@font-face {
  font-family: "DM Sans";
  src: url("./assets/fonts/dm-sans-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: "DM Sans";
  src: url("./assets/fonts/dm-sans-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap
}

:root {
  --cream: #f6f4ed;
  --paper: #eeece3;
  --ink: #073c40;
  --deep: #07383b;
  --navy: #062c36;
  --aqua: #b5e3d4;
  --aqua-hover: #c8eee1;
  --muted: #4d6665;
  --line: #d4dbd3;
  --white: #fffdf7;
  --font: "DM Sans",sans-serif;
  --ease: cubic-bezier(.16,1,.3,1);
  --gutter: clamp(24px,5.3vw,88px)
}

* {
  box-sizing: border-box
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  scrollbar-color: #7eaba1 var(--cream)
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased
}
body.dialog-open {
  overflow: hidden
}
::selection {
  background: var(--aqua);
  color: var(--navy)
}
a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 5px
}
button {
  font: inherit;
  cursor: pointer
}
a,button,summary {
  -webkit-tap-highlight-color: transparent
}
button,a,summary {
  touch-action: manipulation
}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline: 3px solid #17846d;
  outline-offset: 6px
}
svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0
}
img {
  display: block;
  width: 100%;
  height: auto
}
h1,h2,h3,p,figure {
  margin: 0
}
h1,h2,h3 {
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1.08;
  text-wrap: balance
}
h2 {
  font-size: clamp(36px,4.1vw,62px)
}
em {
  font-weight: 400;
  font-style: italic
}
p {
  text-wrap: pretty
}
button {
  border: 0
}
section[id] {
  scroll-margin-top: 20px
}
.svg-library {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden
}
.skip-link {
  position: fixed;
  left: 20px;
  top: -80px;
  background: var(--aqua);
  color: var(--navy);
  padding: 12px 20px;
  z-index: 100
}
.skip-link:focus {
  top: 10px
}
.section-shell {
  padding-inline: var(--gutter);
  max-width: 1600px;
  margin-inline: auto
}
.site-header {
  height: 102px;
  padding: 0 var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 36px;
  position: relative;
  z-index: 20;
  max-width: 1700px;
  margin: auto
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  flex-shrink: 0
}
.brand-symbol {
  height: 46px;
  width: 61px;
  stroke-width: 1.65
}
.brand-type {
  font-size: 35px;
  font-weight: 500;
  letter-spacing: -.07em;
  line-height: .9
}
.brand-boat {
  display: block;
  font-size: 11px;
  letter-spacing: .6em;
  font-weight: 500;
  margin: 8px 0 0 4px
}
.desktop-nav {
  display: flex;
  gap: 36px;
  font-size: 13px;
  font-weight: 500
}
.desktop-nav a {
  position: relative;
  padding: 12px 0
}
.desktop-nav a:after {
  content: "";
  position: absolute;
  bottom: 7px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--ink);
  transition: width .3s var(--ease)
}
.desktop-nav a:hover:after {
  width: 100%
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 56px;
  padding: 16px 24px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -.01em;
  border-radius: 3px;
  transition: background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
  white-space: nowrap
}
.button svg {
  height: 20px;
  width: 20px
}
.button svg:last-child {
  margin-left: 12px;
  transition: transform .3s var(--ease)
}
.button:hover svg:last-child {
  transform: translate(2px,-2px)
}
.button-header {
  border: 1px solid #a6b6af;
  min-height: 46px;
  padding: 12px 18px;
  font-size: 12px
}
.button-header:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink)
}
.button-aqua {
  background: var(--aqua);
  color: var(--navy)
}
.button-aqua:hover {
  background: var(--aqua-hover)
}
.button-dark {
  background: var(--ink);
  color: var(--white)
}
.button-dark:hover {
  background: #14575a
}
.menu-toggle,.mobile-nav {
  display: none
}
.hero {
  position: relative;
  min-height: 650px;
  height: min(730px,calc(100svh - 128px));
  margin: 0 24px;
  overflow: hidden;
  border-radius: 4px;
  color: var(--white);
  isolation: isolate
}
.hero-picture,.hero-picture img,.hero-shade {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0
}
.hero-picture img {
  object-fit: cover;
  object-position: 50% 54%;
  animation: arrive 1.8s var(--ease) both
}
.hero-shade {
  background: linear-gradient(90deg,rgba(2,28,35,.67),rgba(2,28,35,.16) 60%,rgba(2,28,35,.04)),linear-gradient(0deg,rgba(2,28,35,.65),transparent 55%);
  z-index: 1
}
.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 55px clamp(28px,4vw,64px) 54px
}
.hero h1 {
  font-size: clamp(54px,6vw,92px);
  line-height: 1.02;
  max-width: 1000px;
  letter-spacing: -.04em;
  text-shadow: 0 2px 24px rgba(2,28,35,.08)
}
.hero h1 em {
  color: #d4ede1
}
.hero-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px
}
.hero-invitation p {
  font-size: 17px;
  line-height: 1.55;
  margin-bottom: 22px;
  color: var(--white)
}
.hero-invitation .button {
  min-width: 250px
}
.hero-contact {
  display: block;
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: .015em;
  color: #e3efea
}
.hero-discover {
  display: flex;
  gap: 22px;
  align-items: center;
  font-size: 12px;
  line-height: 1.7;
  text-align: right
}
.down-arrow {
  border: 1px solid rgba(255,253,247,.6);
  border-radius: 50%;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center
}
.down-arrow svg {
  transform: rotate(90deg);
  width: 19px
}
.hero-location {
  position: absolute;
  z-index: 2;
  top: 32px;
  right: 36px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase
}
.hero-location svg {
  width: 14px;
  height: 14px
}
.hero-seal {
  position: absolute;
  z-index: 2;
  right: 48px;
  top: 110px;
  width: 112px;
  height: 112px;
  border: 1px solid rgba(255,253,247,.65);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transform: rotate(12deg);
  gap: 9px
}
.hero-seal span {
  font-size: 8px;
  letter-spacing: .12em
}
.hero-seal svg {
  width: 47px;
  height: 34px;
  stroke-width: 1.7
}
.horizon-note {
  height: 114px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--muted)
}
.horizon-note svg {
  width: 34px;
  height: 28px;
  stroke-width: 1.4;
  color: #498b7a
}
.boat-section {
  padding-top: 65px;
  padding-bottom: 118px
}
.section-intro {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 10%;
  align-items: end;
  margin-bottom: 58px
}
.section-intro h2 em {
  color: #3b776b
}
.section-intro>p {
  max-width: 435px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.9;
  padding-bottom: 4px
}
.boat-layout {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 7%;
  align-items: center
}
.boat-photo {
  position: relative;
  align-self: stretch
}
.boat-photo img {
  height: 100%;
  min-height: 515px;
  object-fit: cover;
  object-position: 100% 50%;
  border-radius: 3px
}
.boat-photo figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 36px 28px 24px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--white);
  background: linear-gradient(transparent,rgba(2,28,35,.72));
  border-radius: 0 0 3px 3px
}
.boat-photo figcaption span:first-child {
  font-size: 32px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.04em
}
.boat-photo figcaption span:last-child {
  font-size: 11px;
  letter-spacing: .03em
}
.boat-mark {
  width: 39px;
  height: 32px;
  margin-bottom: 24px;
  color: #538a7b;
  stroke-width: 1.5
}
.boat-details {
  padding: 16px 0;
  max-width: 400px
}
.boat-details h3 {
  font-size: clamp(32px,3.2vw,48px);
  line-height: 1.12;
  margin-bottom: 24px
}
.boat-details h3 em {
  color: #3b776b
}
.boat-details>p {
  font-size: 13px;
  line-height: 1.95;
  color: var(--muted);
  max-width: 335px
}
.boat-facts {
  margin: 28px 0
}
.boat-facts>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 11px
}
.boat-facts dt {
  color: var(--muted)
}
.boat-facts dd {
  margin: 0;
  font-weight: 500
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  font-size: 12px;
  font-weight: 600;
  border-bottom: 1px solid #99b5aa;
  padding: 0 0 7px;
  transition: color .25s
}
.text-link svg {
  width: 17px;
  height: 17px;
  transition: transform .3s var(--ease)
}
.text-link:hover {
  color: #367565
}
.text-link:hover svg {
  transform: translate(2px,-2px)
}
.experience-section {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  background: var(--deep);
  color: var(--white);
  max-width: 1700px;
  margin-inline: auto;
  min-height: 690px
}
.experience-copy {
  padding: 80px clamp(28px,5.3vw,88px)
}
.experience-copy h2 {
  font-size: clamp(38px,4.2vw,63px);
  line-height: 1.08;
  margin-bottom: 26px
}
.experience-copy h2 em {
  color: var(--aqua)
}
.experience-copy>p {
  font-size: 14px;
  line-height: 1.9;
  color: #c5d9d1;
  max-width: 370px;
  margin-bottom: 40px
}
.experience-item {
  display: flex;
  gap: 18px;
  max-width: 370px;
  margin-bottom: 26px
}
.experience-item>svg {
  margin-top: 3px;
  width: 25px;
  height: 25px;
  color: var(--aqua);
  stroke-width: 1.4
}
.experience-item h3 {
  font-size: 15px;
  letter-spacing: -.01em;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 7px
}
.experience-item p {
  font-size: 12px;
  line-height: 1.8;
  color: #c5d9d1
}
.experience-copy .text-link {
  margin-top: 12px
}
.text-link-light {
  color: var(--aqua);
  border-color: #537f73
}
.text-link-light:hover {
  color: var(--white)
}
.experience-visual {
  position: relative;
  min-height: 630px;
  overflow: hidden
}
.experience-visual>img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 48% 50%
}
.experience-visual:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,rgba(2,28,35,.7),transparent 50%);
  pointer-events: none
}
.experience-caption {
  position: absolute;
  z-index: 1;
  left: 38px;
  bottom: 40px;
  right: 38px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px
}
.experience-caption span {
  font-size: 27px;
  line-height: 1.3;
  letter-spacing: -.03em
}
.experience-caption svg {
  width: 54px;
  height: 42px;
  stroke-width: 1.3
}
.gallery-section {
  padding-top: 112px;
  padding-bottom: 100px
}
.gallery-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 48px
}
.gallery-heading h2 em {
  color: #3b776b
}
.gallery-heading>div {
  padding-bottom: 5px;
  min-width: 260px
}
.gallery-heading p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 15px
}
.gallery-hint {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: var(--muted)
}
.gallery-hint svg {
  width: 14px;
  height: 14px
}
.gallery-grid {
  display: grid;
  grid-template-columns: 1.22fr 1fr;
  gap: 20px
}
.gallery-image {
  position: relative;
  display: block;
  height: 335px;
  overflow: hidden;
  border-radius: 3px;
  isolation: isolate;
  background: var(--deep)
}
.gallery-image:nth-child(3) {
  grid-column: 1;
  grid-row: 2
}
.gallery-image img {
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease)
}
.gallery-image:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,rgba(2,28,35,.67),transparent 40%);
  z-index: 1;
  pointer-events: none
}
.gallery-image:hover img {
  transform: scale(1.04)
}
.gallery-image:nth-child(2) img {
  object-position: 50% 66%
}
.gallery-label {
  position: absolute;
  bottom: 23px;
  left: 26px;
  color: var(--white);
  font-size: 12px;
  z-index: 2
}
.gallery-expand {
  position: absolute;
  z-index: 2;
  right: 20px;
  bottom: 18px;
  color: var(--white);
  border: 1px solid #ffffff70;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center
}
.gallery-expand svg {
  width: 15px;
  height: 15px
}
.questions-section {
  display: grid;
  grid-template-columns: .9fr 1.3fr;
  gap: 11%;
  padding-top: 44px;
  padding-bottom: 115px
}
.questions-intro h2 {
  font-size: clamp(36px,3.6vw,54px);
  margin-bottom: 22px
}
.questions-intro h2 em {
  color: #3b776b
}
.questions-intro p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.85
}
.questions-list details {
  border-bottom: 1px solid var(--line)
}
.questions-list details:first-child {
  border-top: 1px solid var(--line)
}
.questions-list summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 23px 0;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  line-height: 1.5
}
.questions-list summary::-webkit-details-marker {
  display: none
}
.questions-list summary svg {
  width: 16px;
  height: 16px;
  transition: transform .3s var(--ease)
}
.questions-list details[open] summary svg {
  transform: rotate(45deg)
}
.answer {
  padding: 0 28px 23px 0;
  font-size: 12px;
  line-height: 1.95;
  color: var(--muted)
}
.reservation-section {
  text-align: center;
  position: relative;
  overflow: hidden;
  background: var(--aqua);
  padding: 62px 24px 110px
}
.reservation-mark {
  width: 54px;
  height: 43px;
  margin: 0 auto 27px;
  stroke-width: 1.4;
  color: #276c61
}
.reservation-section h2 {
  font-size: clamp(48px,6.8vw,96px);
  line-height: 1.02;
  margin-bottom: 24px
}
.reservation-section h2 em {
  font-size: 1em;
  line-height: 1.15
}
.reservation-section>p {
  font-size: 14px;
  color: #285b54;
  line-height: 1.9;
  margin-bottom: 28px
}
.reservation-section .button {
  min-width: 272px
}
.reservation-contact {
  display: block;
  font-size: 11px;
  margin-top: 17px;
  color: #285b54
}
.reservation-contact>span {
  padding: 0 8px
}
.reservation-wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 54px;
  fill: var(--deep);
  stroke: none
}
.site-footer {
  background: var(--deep);
  color: var(--white);
  padding: 40px var(--gutter) 20px
}
.footer-main {
  display: flex;
  align-items: center;
  gap: 7%;
  padding: 10px 0 50px;
  max-width: 1440px;
  margin: auto
}
.brand-light {
  color: var(--aqua)
}
.footer-main>p {
  font-size: 12px;
  line-height: 1.75;
  color: #b5d0c6
}
.footer-main nav {
  margin-left: auto;
  display: flex;
  gap: 30px;
  font-size: 11px;
  color: #e0eae3
}
.footer-main nav a:last-child {
  display: flex;
  align-items: center;
  gap: 10px
}
.footer-main nav svg {
  width: 14px;
  height: 14px
}
.footer-main nav a:hover,.footer-bottom a:hover {
  text-decoration: underline
}
.footer-bottom {
  padding-top: 21px;
  border-top: 1px solid #38615c;
  font-size: 11px;
  color: #b5d0c6;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  max-width: 1440px;
  margin: auto
}
.footer-bottom>span:last-of-type,.footer-bottom a {
  display: flex;
  gap: 6px;
  align-items: center
}
.footer-bottom svg {
  width: 12px;
  height: 12px
}
.mobile-booking {
  display: none
}
.lightbox {
  position: fixed;
  inset: 0;
  max-width: 100vw;
  max-height: 100dvh;
  width: 100vw;
  height: 100dvh;
  border: 0;
  margin: 0;
  padding: 24px 38px;
  background: var(--navy);
  color: var(--white)
}
.lightbox::backdrop {
  background: var(--navy)
}
.lightbox[open] {
  display: flex;
  flex-direction: column
}
.lightbox-toolbar,.lightbox-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px
}
.lightbox-brand {
  font-size: 14px;
  letter-spacing: -.01em
}
.lightbox-brand span {
  color: #75a396;
  margin: 0 12px
}
.icon-button {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid #477069;
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  transition: background .25s
}
.icon-button:hover {
  background: #19525a
}
.icon-button svg {
  width: 20px;
  height: 20px
}
.lightbox-stage {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  gap: 28px;
  align-items: center;
  flex: 1;
  min-height: 0;
  padding-block: 28px
}
.lightbox-stage figure {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px
}
.lightbox-stage img {
  max-height: calc(100dvh - 210px);
  width: auto;
  max-width: 100%;
  object-fit: contain
}
.lightbox-stage figcaption {
  font-size: 13px;
  text-align: center;
  color: #d7e6dd
}
.lightbox-prev svg {
  transform: rotate(180deg)
}
.lightbox-bottom {
  font-size: 11px;
  color: #b5d0c6;
  padding-block: 10px
}
.lightbox-count {
  font-variant-numeric: tabular-nums
}
.menu-toggle:focus-visible,.lightbox :focus-visible,.hero :focus-visible,.experience-section :focus-visible,.site-footer :focus-visible {
  outline-color: var(--aqua)
}

@keyframes arrive {
  from {
    transform: scale(1.035);
    clip-path: inset(0 0 2% 0)
  }
  to {
    transform: scale(1);
    clip-path: inset(0)
  }
}

@media(min-width:1700px) {
  .hero {
    max-width: 1652px;
    margin-inline: auto
  }
}

@media(max-width:1100px) {
  .site-header {
    gap: 20px;
    height: 90px
  }
  .desktop-nav {
    gap: 24px;
    font-size: 12px
  }
  .hero {
    margin-inline: 16px;
    min-height: 610px
  }
  .hero h1 {
    font-size: 70px
  }
  .hero-seal {
    width: 94px;
    height: 94px;
    right: 30px;
    top: 110px
  }
  .section-intro {
    gap: 5%;
    grid-template-columns: 1.3fr 1fr
  }
  .boat-layout {
    gap: 5%;
    grid-template-columns: 1.25fr 1fr
  }
  .boat-photo img {
    min-height: 500px
  }
  .boat-details h3 {
    font-size: 38px
  }
  .experience-copy {
    padding: 64px 36px
  }
  .experience-copy h2 {
    font-size: 45px
  }
  .experience-visual {
    min-height: 640px
  }
  .gallery-image {
    height: 290px
  }
  .footer-main nav {
    gap: 20px
  }
  .footer-main {
    gap: 5%
  }
}

@media(max-width:760px) {
  :root {
    --gutter: 24px
  }
  html {
    scroll-padding-top: 30px
  }
  .site-header {
    height: 84px;
    padding-inline: 24px;
    gap: 16px
  }
  .brand {
    gap: 9px
  }
  .brand-symbol {
    width: 48px;
    height: 37px
  }
  .brand-type {
    font-size: 29px
  }
  .brand-boat {
    font-size: 11px;
    margin-top: 7px;
    letter-spacing: .6em
  }
  .desktop-nav {
    display: none
  }
  .button-header {
    margin-left: auto;
    padding: 10px 13px;
    font-size: 11px;
    min-height: 40px;
    gap: 4px
  }
  .button-header svg {
    width: 15px;
    height: 15px;
    margin-left: 6px!important
  }
  .menu-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: none;
    width: 36px;
    height: 44px;
    padding: 6px;
    color: var(--ink)
  }
  .menu-toggle span {
    height: 1.5px;
    width: 23px;
    background: currentColor;
    transition: transform .3s var(--ease)
  }
  .menu-toggle[aria-expanded=true] span:first-child {
    transform: translateY(3.75px) rotate(45deg)
  }
  .menu-toggle[aria-expanded=true] span:last-child {
    transform: translateY(-3.75px) rotate(-45deg)
  }
  .mobile-nav:not([hidden]) {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 84px;
    left: 0;
    right: 0;
    background: var(--cream);
    padding: 12px 24px 28px;
    box-shadow: 0 20px 26px -20px #073c4040
  }
  .mobile-nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between
  }
  .mobile-nav a:last-child {
    color: #23705b
  }
  .mobile-nav svg {
    width: 18px;
    height: 18px
  }
  .hero {
    margin: 0 12px;
    min-height: 630px;
    height: calc(100svh - 100px);
    max-height: 760px;
    border-radius: 3px
  }
  .hero-content {
    padding: 38px 24px 34px
  }
  .hero h1 {
    font-size: clamp(42px,7.2vw,56px);
    line-height: 1.08;
    letter-spacing: -.04em;
    max-width: 600px
  }
  .hero-picture img {
    object-position: 92% 50%
  }
  .hero-shade {
    background: linear-gradient(180deg,rgba(2,28,35,.3),rgba(2,28,35,.03) 37%,rgba(2,28,35,.7) 100%),linear-gradient(90deg,rgba(2,28,35,.35),transparent 100%)
  }
  .hero-location {
    top: auto;
    bottom: 218px;
    left: 24px;
    right: auto;
    font-size: 11px;
    letter-spacing: .06em
  }
  .hero-location svg {
    width: 12px;
    height: 12px
  }
  .hero-seal {
    display: none
  }
  .hero-seal svg {
    width: 34px;
    height: 26px
  }
  .hero-seal span {
    font-size: 7px
  }
  .hero-bottom {
    display: block
  }
  .hero-invitation p {
    font-size: 15px;
    margin-bottom: 18px;
    line-height: 1.6
  }
  .hero-invitation .button {
    min-width: 250px
  }
  .hero-contact {
    font-size: 11px;
    margin-top: 12px
  }
  .hero-discover {
    display: none
  }
  .horizon-note {
    height: 93px;
    gap: 18px;
    font-size: 11px;
    letter-spacing: .015em
  }
  .horizon-note svg {
    width: 28px;
    height: 24px
  }
  .boat-section {
    padding-top: 38px;
    padding-bottom: 65px
  }
  .section-intro {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 34px
  }
  .section-intro h2 {
    font-size: clamp(34px,6.5vw,46px);
    line-height: 1.12
  }
  .section-intro>p {
    font-size: 13px;
    line-height: 1.9;
    max-width: 550px
  }
  .boat-layout {
    grid-template-columns: 1fr;
    gap: 30px
  }
  .boat-photo img {
    height: 330px;
    min-height: 0;
    object-position: 100% 50%
  }
  .boat-photo figcaption {
    padding: 36px 20px 17px
  }
  .boat-photo figcaption span:first-child {
    font-size: 28px
  }
  .boat-photo figcaption span:last-child {
    font-size: 11px
  }
  .boat-details {
    max-width: none;
    padding: 0
  }
  .boat-mark {
    display: none
  }
  .boat-details h3 {
    font-size: 36px;
    line-height: 1.13;
    margin: 0 0 19px
  }
  .boat-details>p {
    max-width: 550px
  }
  .boat-facts {
    margin: 21px 0 25px
  }
  .boat-facts>div {
    font-size: 12px;
    padding: 12px 0
  }
  .experience-section {
    grid-template-columns: 1fr;
    min-height: 0
  }
  .experience-copy {
    padding: 60px 24px 50px
  }
  .experience-copy h2 {
    font-size: 45px;
    margin-bottom: 23px
  }
  .experience-copy>p {
    font-size: 13px;
    margin-bottom: 30px;
    max-width: 550px
  }
  .experience-item {
    max-width: 550px;
    margin-bottom: 22px
  }
  .experience-item h3 {
    font-size: 14px
  }
  .experience-item p {
    font-size: 12px
  }
  .experience-copy .text-link {
    margin-top: 8px
  }
  .experience-visual {
    min-height: 0;
    height: 390px
  }
  .experience-visual>img {
    object-position: 50% 62%
  }
  .experience-caption {
    left: 24px;
    right: 24px;
    bottom: 26px
  }
  .experience-caption span {
    font-size: 25px
  }
  .experience-caption svg {
    width: 43px;
    height: 35px
  }
  .gallery-section {
    padding-top: 64px;
    padding-bottom: 50px
  }
  .gallery-heading {
    display: block;
    margin-bottom: 30px
  }
  .gallery-heading h2 {
    font-size: 44px;
    line-height: 1.1;
    margin-bottom: 20px
  }
  .gallery-heading>div {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 15px;
    min-width: 0
  }
  .gallery-heading p {
    font-size: 12px;
    margin: 0
  }
  .gallery-hint {
    font-size: 11px;
    max-width: 120px;
    gap: 5px;
    line-height: 1.5
  }
  .gallery-hint svg {
    width: 15px;
    height: 15px
  }
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px
  }
  .gallery-image {
    height: 180px
  }
  .gallery-wide {
    grid-column: 1/-1;
    height: 240px
  }
  .gallery-image:nth-child(3) {
    grid-column: 2;
    grid-row: 2
  }
  .gallery-image:nth-child(4) {
    grid-row: 3
  }
  .gallery-label {
    bottom: 15px;
    left: 14px;
    font-size: 11px;
    max-width: calc(100% - 36px);
    line-height: 1.4
  }
  .gallery-image:not(.gallery-wide) .gallery-label {
    max-width: 90px
  }
  .gallery-expand {
    width: 26px;
    height: 26px;
    right: 12px;
    bottom: 11px
  }
  .gallery-expand svg {
    width: 12px;
    height: 12px
  }
  .questions-section {
    display: block;
    padding-top: 25px;
    padding-bottom: 64px
  }
  .questions-intro {
    margin-bottom: 30px
  }
  .questions-intro h2 {
    font-size: 38px;
    margin-bottom: 16px
  }
  .questions-intro p {
    font-size: 12px
  }
  .questions-list summary {
    font-size: 12px;
    padding: 22px 0
  }
  .answer {
    font-size: 12px;
    padding-right: 12px
  }
  .reservation-section {
    padding: 48px 24px 90px
  }
  .reservation-mark {
    margin-bottom: 24px;
    width: 44px;
    height: 35px
  }
  .reservation-section h2 {
    font-size: clamp(42px,8.5vw,64px);
    line-height: 1.1;
    margin-bottom: 20px
  }
  .reservation-section>p {
    font-size: 12px;
    line-height: 1.9;
    max-width: 440px;
    margin: 0 auto 25px
  }
  .reservation-section>p br {
    display: none
  }
  .reservation-contact {
    font-size: 11px;
    margin-top: 15px
  }
  .reservation-section .button {
    min-width: 263px
  }
  .reservation-wave {
    height: 35px
  }
  .site-footer {
    padding: 20px 24px 100px
  }
  .footer-main {
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
    padding-bottom: 30px
  }
  .footer-main>.brand {
    margin-right: auto
  }
  .footer-main>p {
    font-size: 11px
  }
  .footer-main nav {
    margin: 5px 0 0;
    width: 100%;
    justify-content: space-between;
    gap: 14px;
    font-size: 11px
  }
  .footer-bottom {
    flex-wrap: wrap;
    gap: 13px;
    padding-top: 20px;
    font-size: 11px
  }
  .footer-bottom>span:first-child {
    width: 100%
  }
  .footer-bottom>a {
    margin-left: auto
  }
  .mobile-booking {
    display: block;
    position: fixed;
    z-index: 15;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--cream);
    border-top: 1px solid var(--line);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform .4s var(--ease),visibility .4s
  }
  .mobile-booking.is-visible {
    transform: translateY(0);
    visibility: visible
  }
  .mobile-booking .button {
    width: 100%;
    min-height: 48px;
    padding: 12px 18px;
    font-size: 13px
  }
  .mobile-booking .button svg:last-child {
    margin-left: auto
  }
  .mobile-booking .button svg:first-child {
    margin-right: auto
  }
  .lightbox {
    padding: 14px 16px
  }
  .lightbox-stage {
    grid-template-columns: 40px 1fr 40px;
    gap: 8px;
    padding-block: 20px;
    position: relative
  }
  .lightbox-stage figure {
    grid-column: 1/-1;
    grid-row: 1
  }
  .lightbox-prev,.lightbox-next {
    position: absolute;
    width: 40px;
    height: 40px;
    bottom: 0;
    z-index: 2
  }
  .lightbox-prev {
    left: 0
  }
  .lightbox-next {
    right: 0
  }
  .lightbox-stage img {
    max-height: calc(100dvh - 240px);
    max-width: 100%;
    width: 100%;
    height: auto
  }
  .lightbox-stage figcaption {
    font-size: 12px;
    padding: 0 8px
  }
  .lightbox-brand {
    font-size: 12px
  }
  .lightbox-close {
    width: 40px;
    height: 40px
  }
  .lightbox-bottom {
    font-size: 11px;
    padding-block: 16px
  }
  .lightbox-bottom>span:last-child {
    font-size: 11px
  }
  .lightbox-stage {
    padding-bottom: 65px
  }
}

@media(max-width:360px) {
  .site-header {
    padding-inline: 16px;
    gap: 10px
  }
  .button-header {
    padding-inline: 10px;
    font-size: 11px
  }
  .brand-symbol {
    width: 42px
  }
  .brand-type {
    font-size: 26px
  }
  .hero-content {
    padding-inline: 19px
  }
  .hero h1 {
    font-size: 39px
  }
  .hero-location {
    left: 19px
  }
  .hero-invitation .button {
    min-width: 240px
  }
  .horizon-note {
    gap: 12px;
    font-size: 11px
  }
  .gallery-hint {
    max-width: 105px
  }
  .boat-photo img {
    height: 290px
  }
  .gallery-image {
    height: 160px
  }
  .gallery-wide {
    height: 220px
  }
  .reservation-contact>span {
    padding-inline: 3px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }
  *, *::before, *::after {
    animation: none!important;
    transition: none!important
  }
  .hero-picture img {
    transform: none;
    clip-path: none
  }
}


/* Reading sizes preserve clarity on bright screens by the water. */
.section-intro>p,.boat-details>p,.experience-copy>p,.experience-item p,.gallery-heading p,.questions-intro p,.answer,.reservation-section>p {
  font-size: 14px
}

.hero-contact,.boat-facts>div,.gallery-label,.reservation-contact,.footer-main>p,.footer-main nav,.lightbox-stage figcaption {
  font-size: 12px
}

.questions-list summary {
  font-size: 14px
}

.footer-bottom,.horizon-note,.hero-location,.gallery-hint {
  font-size: 11px
}

.hero-seal {
  display: none
}

.brand-boat {
  font-size: 11px;
  letter-spacing: .48em
}

@media(max-width:760px) {
  .hero-contact {
    font-size: 11px
  }
  .gallery-heading>div {
    gap: 12px
  }
  .gallery-heading p {
    font-size: 13px
  }
  .gallery-hint {
    max-width: 140px
  }
  .gallery-image:not(.gallery-wide) .gallery-label {
    max-width: 90px;
    font-size: 11px
  }
  .footer-main nav {
    font-size: 12px
  }
  .boat-details h3 {
    font-size: 36px
  }
  .hero-location {
    bottom: 230px
  }
  .horizon-note {
    gap: 14px;
    font-size: 10px
  }
  .footer-bottom {
    font-size: 11px
  }
  .brand-boat {
    font-size: 10px
  }
}

@media(max-width:480px) {
  .button-header {
    display: none
  }
  .menu-toggle {
    margin-left: auto
  }
  .hero-content {
    padding-top: 34px
  }
}