:root {
  --ink: #102126;
  --ink-soft: #3f5255;
  --night: #0d1c21;
  --night-soft: #183039;
  --sand: #f3eee4;
  --paper: #fbf9f5;
  --orange: #ff751d;
  --line: rgba(16, 33, 38, .17);
  --shell: min(1240px, calc(100vw - 64px));
  --display: "Plus Jakarta Sans", Arial, sans-serif;
  --body: "Plus Jakarta Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  margin: 0;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
button, input, textarea { font: inherit; }
a { color: inherit; text-underline-offset: .2em; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

.skip-link { background: var(--paper); color: var(--ink); left: 16px; padding: 12px 16px; position: fixed; top: -100px; z-index: 100; }
.skip-link:focus { top: 16px; }
.sr-only { clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.section-shell { margin-inline: auto; max-width: var(--shell); position: relative; }
.eyebrow { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .16em; margin: 0 0 22px; text-transform: uppercase; }
.eyebrow--light { color: rgba(255,255,255,.72); }

.site-header {
  align-items: center;
  display: flex;
  height: 84px;
  justify-content: flex-end;
  left: 50%;
  max-width: var(--shell);
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: var(--shell);
  z-index: 10;
}
.brand-wordmark { display: block; line-height: 0; text-decoration: none; width: 152px; }
.brand-wordmark img { display: block; height: auto; width: 100%; }
.primary-nav { display: flex; gap: 28px; }
.primary-nav a { color: rgba(255,255,255,.92); font-family: var(--display); font-size: 11px; font-weight: 650; letter-spacing: .11em; text-decoration: none; text-transform: uppercase; }
.primary-nav a::after { background: var(--orange); content: ""; display: block; height: 1px; margin-top: 5px; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.primary-nav a:hover::after { transform: scaleX(1); }
.nav-toggle { background: transparent; border: 0; display: none; height: 40px; padding: 8px; width: 40px; }
.nav-toggle span:not(.sr-only) { background: white; display: block; height: 1px; margin: 7px 0; transition: transform .2s ease; width: 24px; }

.hero { aspect-ratio: 2103 / 748; background: #254148; isolation: isolate; overflow: hidden; position: relative; }
.hero__background { height: 108%; left: -4%; max-width: none; object-fit: cover; position: absolute; top: -4%; transform: translate3d(-1.4%, -1.2%, 0) scale(1.012); transform-origin: center; width: 108%; will-change: transform; z-index: -3; }
.hero__depth { background: radial-gradient(ellipse at 75% 10%, rgba(255,163,68,.22), transparent 26%), linear-gradient(90deg, rgba(4,18,23,.26), transparent 56%), linear-gradient(0deg, rgba(2,13,17,.4), transparent 42%); inset: 0; mix-blend-mode: multiply; pointer-events: none; position: absolute; z-index: -1; }
.hero__copy { height: 100%; inset: 0; object-fit: fill; pointer-events: none; position: absolute; width: 100%; z-index: 1; }
.hero__mobile-copy { display: none; }
.hero__edge { background: linear-gradient(90deg, rgba(255,255,255,.26), transparent 13%, transparent 86%, rgba(255,255,255,.14)); box-shadow: inset 0 -1px rgba(255,255,255,.36); inset: 0; mix-blend-mode: soft-light; pointer-events: none; position: absolute; z-index: 2; }
.intro { display: grid; gap: 9vw; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); padding-block: clamp(110px, 14vw, 200px); }
.intro h2, .principles h2, .statement h2, .quote h2 { font-family: var(--display); font-size: clamp(42px, 5.5vw, 86px); font-weight: 360; letter-spacing: -.065em; line-height: .92; margin: 0; }
.brand-signature { background: #fff; border: 1px solid rgba(16,33,38,.12); box-shadow: 12px 15px 0 rgba(16,33,38,.1), 0 20px 36px rgba(16,33,38,.09); display: block; margin: 0 0 38px; padding: 13px; width: min(215px, 52%); }
.brand-signature img { display: block; height: auto; width: 100%; }
.intro__lead::after { background: linear-gradient(90deg, var(--orange) 0 31px, var(--ink) 31px 94px, transparent 94px); content: ""; display: block; height: 1px; margin-top: 34px; width: 126px; }
.intro__body { align-self: end; max-width: 370px; padding-bottom: 6px; }
.intro__body p, .quote__intro > p:not(.eyebrow) { color: var(--ink-soft); font-size: 18px; font-weight: 400; letter-spacing: -.018em; line-height: 1.5; margin: 0 0 32px; }
.intro__body > p:not(.area-note) { color: #0b1214; }
.intro__body .area-note { border-left: 2px solid var(--orange); color: var(--ink); font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .04em; margin: -8px 0 31px; padding-left: 13px; text-transform: uppercase; }
.text-link { border-bottom: 1px solid var(--ink); display: inline-flex; font-family: var(--display); font-size: 12px; font-weight: 700; gap: 38px; letter-spacing: .06em; padding: 0 0 10px; text-decoration: none; text-transform: uppercase; transition: color .2s ease, gap .2s ease; }
.text-link:hover { color: var(--orange); gap: 48px; }
.text-link span { font-size: 17px; line-height: .6; }

.principles { background: var(--night); color: white; min-height: 760px; overflow: hidden; padding-block: clamp(104px, 12vw, 176px); position: relative; }
.principles__surface { background: repeating-radial-gradient(ellipse at 66% 36%, transparent 0 5px, rgba(138,188,188,.048) 6px 7px, transparent 8px 14px), linear-gradient(127deg, transparent 40%, rgba(82,134,142,.18) 75%, rgba(255,120,32,.13)); inset: -18%; opacity: .75; position: absolute; transform: rotate(-9deg); }
.principles__inner { display: grid; gap: 11vw; grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr); }
.principles__header { position: relative; z-index: 1; }
.principles h2 { color: #faf6ef; }
.principle-list { border-top: 1px solid rgba(255,255,255,.24); list-style: none; margin: 5px 0 0; padding: 0; position: relative; z-index: 1; }
.principle-list li { border-bottom: 1px solid rgba(255,255,255,.24); display: grid; grid-template-columns: 1fr; padding: 31px 0 34px; transition: background .25s ease, padding-left .25s ease; }
.principle-list li:hover { background: linear-gradient(90deg, rgba(255,117,29,.08), transparent 72%); padding-left: 8px; }
.principle-list h3 { font-family: var(--display); font-size: 25px; font-weight: 400; letter-spacing: -.045em; margin: 0 0 8px; }
.principle-list p { color: rgba(255,255,255,.63); font-size: 15px; line-height: 1.5; margin: 0; max-width: 330px; }

.statement { min-height: 690px; overflow: hidden; padding-block: clamp(128px, 16vw, 240px) 80px; }
.statement__orb { background: radial-gradient(circle at 35% 35%, rgba(255,199,128,.55), rgba(255,117,29,.32) 38%, rgba(245,238,228,.1) 67%, transparent 70%); filter: blur(1px); height: min(49vw, 690px); pointer-events: none; position: absolute; right: -13%; top: -9%; width: min(49vw, 690px); }
.statement h2 { font-size: clamp(48px, 7vw, 110px); max-width: 1050px; position: relative; }
.statement h2 em { color: var(--orange); font-family: var(--display); font-size: .92em; font-style: italic; font-weight: 500; letter-spacing: -.075em; }
.statement__detail { border-top: 1px solid var(--line); display: flex; font-family: var(--display); font-size: 10px; font-weight: 700; justify-content: space-between; letter-spacing: .12em; margin-top: clamp(90px, 12vw, 172px); padding-top: 15px; position: relative; text-transform: uppercase; }
.statement__detail span { align-items: center; display: inline-flex; gap: 8px; }
.statement__detail span::before { background: var(--orange); border-radius: 50%; content: ""; height: 4px; width: 4px; }

.quote { display: grid; gap: 10vw; grid-template-columns: minmax(0, .88fr) minmax(430px, 1.12fr); padding-block: clamp(108px, 12vw, 170px); }
.quote__intro h2 { font-size: clamp(42px, 5vw, 76px); margin-bottom: 36px; }
.quote__intro > p:not(.eyebrow) { max-width: 400px; }
.quote__intro > p.quote__email { border-top: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 400; letter-spacing: -.01em; margin: 12px 0 0; padding-top: 15px; }
.quote__email a { font-weight: 700; text-decoration-thickness: 1px; }
.quote-form { background: #f4eee5; box-shadow: 18px 20px 0 rgba(20,43,49,.1), 0 30px 55px rgba(26,47,50,.13); padding: clamp(30px, 4vw, 58px); position: relative; }
.quote-form::before { border: 1px solid rgba(255,255,255,.74); content: ""; inset: 11px; pointer-events: none; position: absolute; }
.field-row { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; }
.field { display: block; margin-bottom: 24px; position: relative; z-index: 1; }
.field span { display: block; font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: .11em; margin-bottom: 9px; text-transform: uppercase; }
.field input, .field textarea { background: rgba(255,255,255,.36); border: 0; border-bottom: 1px solid rgba(16,33,38,.38); border-radius: 0; color: var(--ink); min-height: 45px; padding: 10px 1px; resize: vertical; width: 100%; }
.field textarea { line-height: 1.45; min-height: 114px; }
.field input::placeholder, .field textarea::placeholder { color: rgba(16,33,38,.52); }
.field input:focus, .field textarea:focus { border-color: var(--orange); outline: none; }
.consent { align-items: flex-start; display: flex; font-size: 12px; gap: 11px; line-height: 1.42; margin: 4px 0 27px; position: relative; z-index: 1; }
.consent input { accent-color: var(--orange); flex: 0 0 auto; margin: 2px 0 0; }
.consent a { color: inherit; }
.submit-button { align-items: center; background: var(--ink); border: 0; color: white; cursor: pointer; display: flex; font-family: var(--display); font-size: 11px; font-weight: 700; justify-content: space-between; letter-spacing: .12em; min-height: 58px; padding: 0 22px; position: relative; text-transform: uppercase; transition: background .2s ease, transform .2s ease; width: 100%; z-index: 1; }
.submit-button:hover { background: var(--orange); transform: translateY(-2px); }
.submit-button i { font-size: 21px; font-style: normal; font-weight: 400; }
.form-status { font-size: 13px; line-height: 1.45; margin: 16px 0 0; min-height: 1.45em; position: relative; z-index: 1; }
.form-status[data-state="success"] { color: #22774b; }
.form-status[data-state="error"] { color: #a12626; }
.form-trap { height: 1px; left: -10000px; overflow: hidden; position: absolute; width: 1px; }

.site-footer { background: var(--night); color: white; }
.site-footer__top { align-items: flex-end; display: flex; justify-content: space-between; padding-block: 64px; }
.brand-wordmark--footer { width: 220px; }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,.2); display: flex; font-size: 10px; justify-content: space-between; letter-spacing: .08em; padding-block: 20px; text-transform: uppercase; }
.site-footer__bottom nav { display: flex; gap: 18px; }
.site-footer__bottom a { color: rgba(255,255,255,.7); text-decoration: none; }
.site-footer__bottom a:hover { color: var(--orange); }

.legal-page { background: var(--paper); }
.legal-header { align-items: center; display: flex; height: 86px; justify-content: space-between; }
.legal-header > a:last-child { font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.legal { max-width: min(820px, calc(100vw - 64px)); padding-block: clamp(66px, 10vw, 130px); }
.legal h1 { font-family: var(--display); font-size: clamp(48px, 7vw, 92px); font-weight: 350; letter-spacing: -.07em; line-height: .9; margin: 0; }
.legal__updated { color: var(--ink-soft); font-size: 13px; margin: 24px 0 46px; }
.legal__lead { font-family: var(--body); font-size: clamp(22px, 2.3vw, 30px); font-weight: 500; letter-spacing: -.035em; line-height: 1.25; margin: 0 0 76px; max-width: 690px; }
.legal section { border-top: 1px solid var(--line); padding: 28px 0 4px; }
.legal h2 { font-family: var(--display); font-size: 23px; font-weight: 500; letter-spacing: -.045em; margin: 0 0 12px; }
.legal section p { color: var(--ink-soft); font-size: 15px; line-height: 1.62; margin: 0 0 20px; max-width: 720px; }
.legal section a { color: var(--ink); }

.cookie-dialog { align-items: flex-end; background: var(--paper); border: 1px solid rgba(16,33,38,.18); bottom: 18px; box-shadow: 0 20px 48px rgba(10,30,36,.2); display: flex; gap: 26px; justify-content: space-between; left: 18px; max-width: 590px; padding: 25px; position: fixed; z-index: 30; }
.cookie-dialog[hidden] { display: none; }
.cookie-dialog .eyebrow { margin-bottom: 10px; }
.cookie-dialog h2 { font-family: var(--display); font-size: 22px; font-weight: 420; letter-spacing: -.045em; margin: 0 0 8px; }
.cookie-dialog p:not(.eyebrow) { color: var(--ink-soft); font-size: 12px; line-height: 1.45; margin: 0; max-width: 360px; }
.cookie-dialog__actions { align-items: flex-end; display: flex; flex: 0 0 auto; flex-direction: column; gap: 18px; }
.cookie-dialog__actions a { font-size: 11px; white-space: nowrap; }
.cookie-dialog__actions button { background: var(--ink); border: 0; color: white; cursor: pointer; font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: .1em; padding: 12px 16px; text-transform: uppercase; }

.chat-launcher { align-items: center; background: var(--night); border: 1px solid rgba(255,255,255,.34); bottom: 22px; box-shadow: 0 16px 30px rgba(4,18,23,.24); color: white; cursor: pointer; display: inline-flex; font-family: var(--display); font-size: 11px; font-weight: 700; gap: 10px; letter-spacing: .05em; min-height: 50px; padding: 0 18px; position: fixed; right: 22px; text-transform: uppercase; transition: background .2s ease, transform .2s ease; z-index: 28; }
.chat-launcher:hover { background: var(--orange); transform: translateY(-2px); }
.chat-launcher__signal { background: var(--orange); border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,117,29,.16); height: 7px; width: 7px; }
.chat-launcher:hover .chat-launcher__signal { background: var(--night); box-shadow: 0 0 0 4px rgba(13,28,33,.16); }
.chat-assistant { background: var(--paper); border: 1px solid rgba(16,33,38,.18); bottom: 22px; box-shadow: 18px 20px 0 rgba(16,33,38,.1), 0 28px 58px rgba(5,24,29,.2); color: var(--ink); max-width: calc(100vw - 44px); padding: 24px; position: fixed; right: 22px; width: 380px; z-index: 32; }
.chat-assistant[hidden] { display: none; }
.chat-assistant__header { align-items: flex-start; display: flex; gap: 18px; justify-content: space-between; }
.chat-assistant__header .eyebrow { color: var(--orange); font-size: 9px; margin-bottom: 9px; }
.chat-assistant__header h2 { font-family: var(--display); font-size: 24px; font-weight: 500; letter-spacing: -.055em; line-height: 1; margin: 0; }
.chat-assistant__close { background: transparent; border: 0; color: var(--ink); cursor: pointer; font-family: var(--display); font-size: 28px; font-weight: 300; line-height: .7; padding: 4px 0 8px 8px; }
.chat-assistant__messages { display: flex; flex-direction: column; gap: 10px; margin: 24px 0 14px; max-height: 260px; overflow-y: auto; padding-right: 4px; }
.chat-message { font-size: 14px; line-height: 1.48; max-width: 92%; padding: 12px 14px; }
.chat-message p { margin: 0; }
.chat-message--assistant { align-self: flex-start; background: #eee9df; border-left: 2px solid var(--orange); }
.chat-message--user { align-self: flex-end; background: var(--night); color: white; }
.chat-assistant__quick { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.chat-assistant__quick button { background: transparent; border: 1px solid var(--line); color: var(--ink); cursor: pointer; font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: .035em; padding: 9px 10px; text-transform: uppercase; }
.chat-assistant__quick button:hover { border-color: var(--orange); color: var(--orange); }
.chat-assistant__form { border-bottom: 1px solid rgba(16,33,38,.36); display: flex; gap: 9px; }
.chat-assistant__form input { background: transparent; border: 0; color: var(--ink); flex: 1 1 auto; min-width: 0; padding: 12px 0; }
.chat-assistant__form input:focus { outline: 0; }
.chat-assistant__form button { background: transparent; border: 0; color: var(--orange); cursor: pointer; font-family: var(--display); font-size: 22px; padding: 0 2px; }
.chat-assistant__note { color: var(--ink-soft); font-size: 11px; line-height: 1.4; margin: 13px 0 0; }

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

@media (max-width: 760px) {
  :root { --shell: calc(100vw - 40px); }
  .site-header { height: 66px; }
  .primary-nav { background: rgba(10,28,33,.96); box-shadow: 0 20px 30px rgba(0,0,0,.2); display: none; flex-direction: column; gap: 0; padding: 13px 20px; position: absolute; right: 0; top: 58px; width: 200px; }
  .primary-nav.is-open { display: flex; }
  .primary-nav a { padding: 14px 0; }
  .nav-toggle { background: rgba(13,28,33,.38); border: 1px solid rgba(255,255,255,.42); backdrop-filter: blur(10px); display: block; }
  .nav-toggle[aria-expanded="true"] span:nth-of-type(2) { transform: translateY(4px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-of-type(3) { transform: translateY(-4px) rotate(-45deg); }
  .hero { aspect-ratio: auto; min-height: 430px; }
  .hero__copy { display: none; }
  .hero__mobile-copy { align-items: center; bottom: 27%; display: flex; flex-direction: column; gap: 9px; left: 20px; position: absolute; right: 20px; z-index: 2; }
  .hero__mobile-copy img { display: block; height: auto; object-fit: contain; }
  .hero__mobile-booking { width: min(94%, 355px); }
  .hero__mobile-summer { width: min(61%, 230px); }
  .intro, .principles__inner, .quote { display: block; }
  .intro__lead { margin-bottom: 42px; }
  .brand-wordmark { width: 128px; }
  .brand-wordmark--footer { width: 190px; }
  .brand-signature { margin-bottom: 30px; width: min(176px, 58%); }
  .intro h2, .principles h2, .statement h2, .quote h2 { font-size: clamp(42px, 12vw, 64px); }
  .principles__header { margin-bottom: 55px; }
  .statement { min-height: 540px; }
  .statement__orb { height: 95vw; right: -41%; width: 95vw; }
  .statement__detail { display: grid; gap: 10px; }
  .quote__intro { margin-bottom: 55px; }
  .field-row { display: block; }
  .site-footer__top, .site-footer__bottom { align-items: flex-start; flex-direction: column; gap: 22px; }
  .legal { max-width: calc(100vw - 40px); }
  .cookie-dialog { align-items: stretch; bottom: 10px; display: block; left: 10px; max-width: calc(100vw - 20px); padding: 21px; }
  .cookie-dialog__actions { align-items: center; flex-direction: row; justify-content: space-between; margin-top: 18px; }
  .chat-launcher { bottom: 14px; min-height: 48px; right: 14px; }
  .chat-assistant { bottom: 14px; max-width: calc(100vw - 28px); padding: 21px; right: 14px; width: 390px; }
  .chat-assistant__messages { max-height: 220px; }
}

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