:root {
  --bg: #06171b;
  --bg2: #0b2024;
  --white: #f4f5f2;
  --muted: #929c9d;
  --line: rgba(213, 233, 231, 0.18);
  --cyan: #64c5d7;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input {
  font: inherit;
  color: inherit;
}
.site-header {
  position: absolute;
  z-index: 20;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 89px;
  padding: 0 5.2vw;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.brand {
  display: flex;
  align-items: center;
  width: 132px;
  height: 78px;
}
.brand img {
  display: block;
  width: 100%;
  height: auto;
}
.site-header nav {
  display: flex;
  align-items: center;
  gap: 39px;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.17em;
}
.site-header nav > a:not(.nav-button) {
  padding-block: 30px;
}
.divider {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.2);
}
.language,
.menu-toggle {
  border: 0;
  background: none;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  cursor: pointer;
}
.nav-button {
  padding: 15px 25px;
  border: 1px solid rgba(255, 255, 255, 0.58);
}
.menu-toggle {
  display: none;
}
.hero {
  position: relative;
  height: 1051px;
  max-height: 100svh;
  min-height: 760px;
  overflow: hidden;
}
.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      90deg,
      rgba(3, 17, 20, 0.63),
      rgba(3, 17, 20, 0.08) 65%
    ),
    linear-gradient(0deg, rgba(2, 14, 18, 0.93), transparent 48%);
}
.hero-content {
  position: absolute;
  z-index: 2;
  left: 5.2vw;
  bottom: 11.4%;
  width: 70%;
}
.kicker {
  margin: 0 0 22px;
  color: var(--cyan);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
}
.kicker-light {
  color: #cdd3d2;
}
.hero h1,
.section-heading h2,
.collection h2,
.about h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.035em;
}
.hero h1 {
  font-size: clamp(100px, 7.5vw, 154px);
  line-height: 0.94;
  margin: 0 0 46px;
}
.hero-row {
  display: flex;
  align-items: center;
  gap: 34px;
}
.primary-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 268px;
  padding: 16px 29px;
  background: var(--cyan);
  color: #07191d;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  font-size: 13px;
  font-weight: 600;
}
.hero-row p {
  max-width: 490px;
  margin: 0;
  color: #c1c7c6;
  font-weight: 300;
}
.scroll-button {
  position: absolute;
  right: 5.7%;
  bottom: 3.6%;
  z-index: 2;
  width: 68px;
  height: 68px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  display: grid;
  place-items: center;
  font-size: 27px;
}
.stays {
  padding: 104px 5.55vw 125px;
}
.section-heading {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 80px;
  align-items: end;
}
.section-heading h2 {
  font-size: clamp(70px, 5.2vw, 106px);
  line-height: 0.9;
  margin: 0;
}
.section-heading > p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 18px;
  max-width: 650px;
}
.booking-search {
  display: grid;
  grid-template-columns: 1fr 1fr 0.7fr 235px;
  margin-top: 72px;
  min-height: 121px;
  border: 1px solid var(--line);
}
.lodgify-booking-search {
  display: block;
  min-height: 0;
  padding: 0;
  background: #0b2025;
}
#lodgify-search-bar {
  width: 100%;
  --ldg-psb-background: #0b2025;
  --ldg-psb-border-radius: 0;
  --ldg-psb-box-shadow: none;
  --ldg-psb-padding: 14px;
  --ldg-psb-input-background: #102b31;
  --ldg-psb-button-border-radius: 0;
  --ldg-psb-color-primary: var(--cyan);
  --ldg-psb-color-primary-lighter: #a7e1eb;
  --ldg-psb-color-primary-darker: #2c8292;
  --ldg-psb-color-primary-contrast: #07191d;
  --ldg-semantic-color-primary: var(--cyan);
  --ldg-semantic-color-primary-lighter: #a7e1eb;
  --ldg-semantic-color-primary-darker: #2c8292;
  --ldg-semantic-color-primary-contrast: #07191d;
  --ldg-component-modal-z-index: 999;
}
.booking-search > label,
.guests {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 23px 31px;
  border-right: 1px solid var(--line);
}
.booking-search svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.7;
}
.booking-search small,
.guests small {
  display: block;
  color: #7d898a;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  margin-bottom: 3px;
}
.booking-search label > span {
  width: 100%;
}
.booking-search input {
  width: 100%;
  border: 0;
  background: transparent;
  color-scheme: dark;
  padding: 0;
}
.guests strong {
  font-weight: 400;
}
.guest-buttons {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.guest-buttons button {
  width: 41px;
  height: 41px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: none;
  cursor: pointer;
}
.search-button {
  border: 0;
  background: var(--cyan);
  color: #07191d;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.search-button span {
  margin-left: 18px;
}
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 59px 0 48px;
}
.filters {
  display: flex;
  gap: 10px;
}
.filters button,
.filters a {
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: none;
  padding: 10px 21px;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  font-size: 12px;
  cursor: pointer;
}
.filters button.active {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #07191d;
}
.toolbar > p {
  margin: 0;
  color: #778385;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  font-size: 12px;
}
.stay-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 34px;
}
.stay-card {
  position: relative;
  padding-bottom: 27px;
  border-bottom: 1px solid var(--line);
}
.stay-image {
  position: relative;
  aspect-ratio: 1.32;
  overflow: hidden;
  margin-bottom: 20px;
}
.stay-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s;
}
.stay-card:hover .stay-image img {
  transform: scale(1.025);
}
.stay-image span {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 9px 16px;
  background: rgba(5, 21, 24, 0.94);
  text-transform: uppercase;
  letter-spacing: 0.17em;
  font-size: 12px;
}
.location {
  margin: 0;
  color: #808c8d;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 12px;
}
.stay-card h3 {
  font: 400 38px/1.15 var(--serif);
  margin: 9px 0 7px;
}
.stay-card > p:not(.location) {
  margin: 0;
  padding-right: 70px;
  color: var(--muted);
}
.card-arrow {
  position: absolute;
  right: 0;
  bottom: 84px;
  width: 51px;
  height: 51px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: grid;
  place-items: center;
  font-size: 24px;
}
.collection {
  position: relative;
  height: 1050px;
  max-height: 88svh;
  min-height: 760px;
  overflow: hidden;
}
.collection > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 47%;
}
.collection-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      90deg,
      rgba(3, 18, 22, 0.91),
      rgba(3, 18, 22, 0.3) 64%
    ),
    linear-gradient(0deg, rgba(3, 18, 22, 0.72), transparent 55%);
}
.collection-copy {
  position: absolute;
  z-index: 2;
  left: 9.45%;
  top: 25.3%;
  max-width: 1050px;
}
.collection h2 {
  font-size: clamp(78px, 5.2vw, 108px);
  line-height: 0.92;
  margin: 0 0 47px;
}
.collection-copy > p:not(.kicker) {
  max-width: 780px;
  margin: 0;
  color: #b5bebe;
  font-size: 18px;
}
.collection-copy > a {
  display: inline-flex;
  gap: 32px;
  margin-top: 48px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 13px;
}
.about {
  min-height: 1015px;
  display: grid;
  grid-template-columns: 1fr 1.13fr;
  align-items: center;
  gap: 6.8vw;
  padding: 100px 2.9vw;
  background: var(--bg2);
}
.about > img {
  width: 100%;
  height: 724px;
  object-fit: cover;
}
.about-copy {
  max-width: 680px;
}
.about h2 {
  font-size: clamp(72px, 4.45vw, 92px);
  line-height: 0.91;
  margin: 0 0 45px;
}
.about-copy > p:last-child {
  max-width: 650px;
  margin: 0;
  color: var(--muted);
  font-size: 18px;
}
.stay-card[hidden] {
  display: none;
}
.site-footer {
  padding: 88px 5.2vw 34px;
  background: #041216;
  border-top: 1px solid var(--line);
}
.footer-main {
  display: grid;
  grid-template-columns: 1.8fr repeat(3, 1fr);
  gap: 6vw;
  padding-bottom: 78px;
}
.footer-intro img {
  width: 170px;
  height: auto;
  margin-bottom: 28px;
}
.footer-intro p {
  max-width: 320px;
  margin: 0;
  color: var(--muted);
}
.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.footer-column p,
.footer-column a {
  margin: 0;
  color: #b4bdbe;
}
.footer-column a:hover {
  color: var(--cyan);
}
.footer-label {
  margin-bottom: 13px !important;
  color: var(--cyan) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  color: #718083;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer-bottom p {
  margin: 0;
}
.footer-bottom div {
  display: flex;
  gap: 30px;
}
@media (max-width: 1000px) {
  .site-header {
    height: 76px;
    padding-inline: 28px;
  }
  .menu-toggle {
    display: block;
  }
  .site-header nav {
    display: none;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 30px;
    background: rgba(5, 22, 26, 0.98);
    gap: 18px;
  }
  .site-header nav.open {
    display: flex;
  }
  .divider {
    display: none;
  }
  .hero {
    min-height: 720px;
  }
  .hero-content {
    left: 28px;
    width: 88%;
  }
  .hero h1 {
    font-size: clamp(65px, 11vw, 110px);
  }
  .section-heading {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .booking-search {
    grid-template-columns: 1fr 1fr;
  }
  .booking-search > * {
    min-height: 100px;
    border-bottom: 1px solid var(--line);
  }
  .stay-grid {
    grid-template-columns: 1fr 1fr;
  }
  .collection-copy {
    left: 6%;
    max-width: 88%;
  }
  .about {
    grid-template-columns: 1fr;
    padding-block: 75px;
  }
  .about > img {
    height: 60vh;
  }
  .about-copy {
    padding: 0 4vw 30px;
  }
  .footer-main {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
  .footer-main .footer-column:last-child {
    display: none;
  }
}
@media (max-width: 650px) {
  .hero {
    min-height: 700px;
  }
  .hero h1 {
    font-size: 58px;
  }
  .hero-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .hero-row p {
    display: none;
  }
  .scroll-button {
    width: 54px;
    height: 54px;
  }
  .stays {
    padding: 75px 24px;
  }
  .section-heading h2,
  .collection h2,
  .about h2 {
    font-size: 52px;
  }
  .booking-search {
    grid-template-columns: 1fr;
  }
  .search-button {
    min-height: 82px;
  }
  .toolbar {
    align-items: flex-end;
  }
  .filters {
    flex-direction: column;
  }
  .stay-grid {
    grid-template-columns: 1fr;
  }
  .collection {
    min-height: 720px;
  }
  .collection-copy {
    top: 22%;
    left: 24px;
  }
  .about {
    padding: 55px 24px;
  }
  .about > img {
    height: 54vh;
  }
  .about-copy {
    padding: 0;
  }
  .site-header nav > a:not(.nav-button) {
    padding-block: 5px;
  }
  .site-footer {
    padding: 65px 24px 28px;
  }
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 48px 28px;
    padding-bottom: 55px;
  }
  .footer-intro {
    grid-column: 1 / -1;
  }
  .footer-bottom {
    flex-direction: column;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .stay-image img {
    transition: none;
  }
}

.who-we-are {
  max-width: 1240px;
  margin: 0 auto;
  padding: 64px 32px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
}
.who-we-are h2 { margin: 0; font: 400 2.25rem/1.2 var(--serif); }
.who-we-are p { margin: 0 0 20px; color: var(--muted); font-size: 1rem; line-height: 1.75; }
.who-we-are p:last-child { margin-bottom: 0; }
@media (max-width: 700px) {
  .who-we-are { grid-template-columns: 1fr; gap: 24px; padding: 40px 24px; }
}

/* First-party search: no third-party script or persistent browser storage. */
.private-booking-search { display:grid; grid-template-columns:1fr 1fr .7fr 1fr; gap:20px; align-items:end; padding:24px; border:1px solid #cbd5d4; background:#fff; color:#152d32; }
.private-booking-search label { display:grid; gap:9px; font-size:14px; font-weight:500; }
.private-booking-search input { min-width:0; width:100%; box-sizing:border-box; padding:12px; min-height:48px; border:1px solid #b4c3c3; border-radius:0; background:#fff; color:#152d32; font:inherit; }
.private-booking-search button { min-height:48px; padding:12px 16px; background:#153c45; color:#fff; border:1px solid #153c45; font:inherit; cursor:pointer; }
.private-booking-search :focus-visible { outline:3px solid #1591ac; outline-offset:3px; }
.booking-note { margin:12px 0 0; font-size:13px; color:var(--muted); }
.legal-header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:24px; padding:28px max(24px,5vw); border-bottom:1px solid #ced9d7; }
.legal-header img { width:160px; }
.legal-nav { display:flex; gap:24px; }
.legal-content { max-width:820px; margin:auto; padding:64px 24px 96px; }
.legal-content h1 { font:400 clamp(38px,6vw,62px)/1.1 var(--serif); margin:18px 0 24px; overflow-wrap:anywhere; }
.legal-content h2 { font:400 30px/1.25 var(--serif); margin:38px 0 14px; }
.legal-content p,.legal-content li { line-height:1.8; color:var(--muted); }
.legal-content a { text-decoration:underline; text-underline-offset:3px; }
.review-notice { padding:18px 22px; border-left:3px solid #957443; background:#f5eee3; color:#46371d; line-height:1.6; }
.legal-footer { max-width:820px; margin:auto; padding:24px; border-top:1px solid #ced9d7; display:flex; flex-wrap:wrap; gap:24px; }
@media(max-width:700px) { .private-booking-search { grid-template-columns:1fr 1fr; padding:18px; gap:16px; } .private-booking-search button { align-self:end; } .legal-content { padding-top:36px; } }
@media(max-width:380px) { .private-booking-search { grid-template-columns:1fr; } }

/* The local search owns its grid; its outer container must span the section. */
#booking-search { display:block; min-height:0; border:0; }
#booking-search > .private-booking-search { min-height:0; }
#booking-search > .booking-note { min-height:0; border:0; }

/* Contact form keeps a visible, explicit email handoff. */
.contact-section { display:grid; grid-template-columns:1fr 1.35fr; gap:64px; padding:80px 5.55vw 100px; background:var(--bg2); border-top:1px solid var(--line); }
.contact-intro h2 { font:400 64px/1.1 var(--serif); margin:0 0 24px; }
.contact-intro p { color:#b4bdbe; max-width:440px; }
.contact-intro a { text-decoration:underline; text-underline-offset:4px; }
.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.contact-form label { display:grid; gap:8px; color:var(--white); font-size:14px; min-width:0; }
.contact-form input,.contact-form textarea { width:100%; min-height:48px; padding:13px; border:1px solid #708c91; border-radius:0; color:var(--white); background:#102b31; font:inherit; }
.contact-form textarea { resize:vertical; }
.contact-form textarea::placeholder { color:#b1bdc0; }
.contact-form :focus-visible { outline:3px solid var(--cyan); outline-offset:3px; }
.contact-message,.contact-help,.contact-actions,.contact-feedback,.contact-form noscript { grid-column:1/-1; }
.contact-help { font-size:13px; line-height:1.65; color:#b4bdbe; margin:0; }
.contact-help a { text-decoration:underline; }
.contact-actions { display:flex; flex-wrap:wrap; gap:14px; }
.contact-actions button { padding:14px 22px; min-height:48px; background:var(--cyan); color:var(--bg); border:1px solid var(--cyan); cursor:pointer; font:inherit; }
.contact-actions .secondary { background:transparent; color:var(--white); border-color:#708c91; }
.contact-feedback { font-size:14px; margin:0; color:#b4bdbe; }
@media(min-width:1001px) { .site-header nav { gap:24px; font-size:12px; } }
@media(max-width:850px) { .contact-section { grid-template-columns:1fr; gap:28px; padding:56px 24px; } .contact-intro h2 { font-size:48px; } }
@media(max-width:450px) { .contact-form { grid-template-columns:1fr; } }

.landscape-break { margin:0; width:100%; }
.landscape-break img { display:block; width:100%; height:auto; }

/* Slow, optional motion, retaining readable content and normal page scrolling. */
.hero-slides { position:absolute; inset:0; overflow:hidden; }
.hero-slides .hero-image { opacity:0; transition:opacity 1.8s ease-in-out; }
.hero-slides .hero-image.is-active { opacity:1; }
.hero-slides.motion-enabled .hero-image { animation:scene-drift 22s ease-in-out infinite alternate; will-change:transform; }
.hero-slides.is-paused .hero-image { animation-play-state:paused; }
@keyframes scene-drift { from { transform:scale(1.015); } to { transform:scale(1.075); } }
.hero-slide-controls { position:absolute; z-index:4; bottom:20px; left:5.2vw; display:flex; align-items:center; flex-wrap:wrap; gap:18px; }
.hero-slide-controls[hidden] { display:none; }
.hero-slide-dots { display:flex; align-items:center; gap:0; }
.hero-slide-dots button { display:grid; place-items:center; min-width:44px; min-height:44px; padding:0; border:0; background:none; cursor:pointer; }
.hero-slide-dots button span { display:block; height:3px; width:23px; background:rgba(255,255,255,.45); transition:background .3s,width .3s; }
.hero-slide-dots button[aria-pressed="true"] span { width:32px; background:var(--cyan); }
.hero-slide-pause { min-height:44px; display:flex; align-items:center; gap:9px; padding:0 14px; border:1px solid rgba(255,255,255,.45); background:rgba(6,23,27,.5); color:#fff; font-size:11px; text-transform:uppercase; letter-spacing:.13em; cursor:pointer; }
.hero-slide-controls button:focus-visible { outline:3px solid var(--cyan); outline-offset:3px; }
.motion-reveal { transition:opacity .85s ease, transform .85s cubic-bezier(.2,.65,.3,1); }
.motion-reveal.is-pending { opacity:0; transform:translateY(22px); }
.collection > img.scroll-scene { transform:translate3d(0,var(--scene-shift,0px),0) scale(1.055); }
@media(hover:hover) and (pointer:fine) { .stay-image img { transition:transform .9s cubic-bezier(.2,.65,.3,1); } .stay-card:hover .stay-image img { transform:scale(1.05); } }
@media(max-width:1000px) { .hero-slide-controls { left:28px; } }
@media(max-width:650px) { .hero-slide-controls { left:24px; bottom:17px; gap:6px; max-width:calc(100% - 110px); } .hero-slide-pause { font-size:10px; letter-spacing:.08em; padding-inline:10px; } .hero-slide-dots button { min-width:36px; } }
@media(prefers-reduced-motion:reduce) {
 .hero-slides .hero-image { animation:none!important; transition:none!important; transform:none!important; }
 .motion-reveal,.motion-reveal.is-pending { opacity:1!important; transform:none!important; transition:none!important; }
 .collection > img.scroll-scene { transform:none!important; }
 .hero-slide-dots button span,.stay-image img { transition:none!important; }
}
@media(max-width:650px) {
 .hero-slide-controls { max-width:calc(100% - 96px); flex-wrap:nowrap; }
 .hero-slide-dots button { min-width:44px; }
 .hero-slide-pause { white-space:nowrap; }
}
@media(max-width:380px) {
 .hero-slide-pause { min-width:44px; justify-content:center; padding:0; }
 .hero-slide-pause [data-pause-label] { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}

/* Show the entire ARKT portrait and place the new photograph beside local knowledge. */
.collection { height:auto; min-height:0; max-height:none; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:center; gap:6vw; padding:80px 5.55vw; background:var(--bg); overflow:visible; }
.collection > img { position:static; inset:auto; display:block; width:100%; height:auto; object-fit:contain; object-position:center; }
.collection-overlay { display:none; }
.collection-copy { position:static; inset:auto; max-width:none; min-width:0; }
.collection h2 { font-size:clamp(42px,4.5vw,84px); line-height:1; margin-bottom:30px; }
.collection-copy > p:not(.kicker) { font-size:17px; }
.collection-copy > a { margin-top:30px; }
.about { min-height:0; }
.about > img { height:auto; object-fit:contain; }
@media(max-width:850px) {
 .collection { grid-template-columns:1fr; gap:36px; padding:56px 24px; }
 .collection > img { width:100%; max-width:520px; margin-inline:auto; }
 .collection h2 { font-size:clamp(40px,7.2vw,60px); }
 .collection-copy { width:100%; }
}