:root {
  color-scheme: light;

  /* ---- Core palette (confirmed brand foundation) ---- */
  --navy: #063645;
  --navy-deep: #032832;
  --ink: #173b43;
  --teal: #0b6973;
  --teal-deep: #07515a;
  --aqua: #58c7c4;
  --aqua-pale: #dff5f3;
  --cream: #f5ece3;
  --cream-lift: #fbf5ec;
  --foam: #f3fbfa;
  --foam-tint: #edf9f7;
  --white: #ffffff;

  /* The 2026 poster carries no gold: every rule, bullet, flourish and
     divider in it is teal on linen. The sand and coral accents that used to
     live here were retired rather than left defined-but-unused. */

  /* ---- Semantic text: light surfaces ---- */
  --text-strong: var(--navy);
  --text-body: var(--ink);
  --text-muted: #536a70;
  --muted: var(--text-muted);

  /* ---- Semantic text: dark surfaces ---- */
  --text-on-dark: var(--white);
  --text-on-dark-soft: #dcebed;
  --text-on-dark-quiet: #bfd2d5;
  --text-on-dark-faint: #a9c2c5;
  --accent-on-dark: #9fdedb;

  /* ---- Surfaces ---- */
  --surface-page: var(--cream);
  --surface-raised: var(--white);
  --surface-soft: var(--foam);
  --surface-dark: var(--navy);
  --surface-deep: var(--navy-deep);
  --surface-note: #eaf5f3;
  --text-note: #234a4e;

  /* ---- Lines, borders and decorative strokes ---- */
  --line: #d4e3e1;
  --border-control: #6b898b;
  --note-border: #a9cfcd;
  --stroke-decorative: rgba(11, 105, 115, 0.12);
  --stroke-decorative-light: rgba(255, 255, 255, 0.16);

  /* ---- Focus and print ---- */
  --focus-ring: var(--white);
  --focus-ring-outer: #8a4d00;
  --print-ink: #000000;

  /* ---- Elevation ---- */
  --shadow-sm: 0 0.75rem 2rem rgba(6, 54, 69, 0.1);
  --shadow-lg: 0 1.75rem 4.5rem rgba(6, 54, 69, 0.18);

  /* ---- Radii: tightened for a framed, vintage-print feel ---- */
  --radius-sm: 0.6rem;
  --radius-md: 1.1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2.25rem;
  --radius-pill: 999px;

  /* ---- Layout ---- */
  --container: 76rem;

  /* ---- Typography roles ----
     Body/interface: --font-sans. Display: --font-display.
     There is no script role. The artwork's brush lettering is carried as
     vector paths inside approved logo SVGs, never as a web font, so it
     renders identically on every device. */
  --font-sans: "Segoe UI", Aptos, Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-display: var(--font-serif);

  /* ---- Texture and brush decoration ---- */
  --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");
  --brush-kicker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 10' preserveAspectRatio='none'%3E%3Cpath d='M1.5 6.4c9-3.4 17.6 1.5 26.5-.6C36.2 3.9 45 7.6 62.5 3.2' fill='none' stroke='%230b6973' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --brush-underline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8.6c30-6.2 58 2.4 92-1.2 28-3 52-2.6 105 1.4' fill='none' stroke='%230b6973' stroke-width='4.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --brush-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M4 9.2c34-6.8 66 2.8 104-1.4 32-3.4 60-3 128 1.6' fill='none' stroke='%230b6973' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --brush-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 64' preserveAspectRatio='none'%3E%3Cpath d='M7 15c53-9 106 3 159-6 40-7 96 7 148-3l-4 47c-52 10-104-3-156 4-46 6-98-7-152 3z' fill='%230b6973'/%3E%3C/svg%3E");
  --icon-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8.4-5.3-8.4-11A4.6 4.6 0 0 1 12 7.4 4.6 4.6 0 0 1 20.4 10c0 5.7-8.4 11-8.4 11z' fill='%23000'/%3E%3C/svg%3E");
  --icon-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.5 8.5 0 0 1-12.4 7.6L4 20l.9-4.1A8.5 8.5 0 1 1 21 11.5Z'/%3E%3Cpath d='M8.2 7.8c.6 3.4 2.6 5.4 6 6l1.2-1.2 2.1 1-.4 2c-.2.8-.9 1.3-1.7 1.2-4.4-.7-7.9-4.2-8.6-8.6-.1-.8.4-1.5 1.2-1.7l2-.4 1 2.1Z'/%3E%3C/svg%3E");

  /* ---- Motion ---- */
  --motion-fast: 160ms;
  --motion-base: 180ms;
  --motion-slow: 520ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.nav-open {
  overflow: hidden;
}

img,
picture {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: var(--aqua);
  color: var(--navy-deep);
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin-top: 0;
}

h1,
h2,
h3 {
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.04;
  text-wrap: balance;
}

h1 {
  margin-bottom: 1.4rem;
  font-size: clamp(3rem, 6.7vw, 6.35rem);
  letter-spacing: -0.055em;
}

h2 {
  margin-bottom: 1rem;
  font-size: clamp(2.2rem, 4.5vw, 4.15rem);
  letter-spacing: -0.045em;
}

h3 {
  margin-bottom: 0.65rem;
  font-size: clamp(1.35rem, 2.1vw, 1.8rem);
  letter-spacing: -0.025em;
}

p:last-child,
ul:last-child,
ol:last-child {
  margin-bottom: 0;
}

.container {
  width: min(calc(100% - 2.5rem), var(--container));
  margin-inline: auto;
}

.narrow {
  width: min(calc(100% - 2.5rem), 50rem);
  margin-inline: auto;
}

.space-top-md {
  margin-top: 1.5rem;
}

.space-top-lg {
  margin-top: 2rem;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.8rem 1rem;
  border-radius: 0.5rem;
  background: var(--white);
  color: var(--navy-deep);
  font-weight: 800;
  transform: translateY(-180%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.eyebrow,
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1rem;
  color: var(--teal-deep);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  line-height: 1.35;
  text-transform: uppercase;
}

.eyebrow::before,
.kicker::before {
  width: 2.4rem;
  height: 0.5rem;
  flex: 0 0 auto;
  background: var(--brush-kicker) no-repeat center / 100% 100%;
  content: "";
}

.kicker--light::before {
  filter: brightness(1.45) saturate(0.7);
}

.kicker--light {
  color: var(--accent-on-dark);
}

/* Display-face accent with a brush underline. The artwork's brush lettering
   is deliberately not reproduced with a font here: the previous generic
   script fallback rendered differently on every device. */
.accent-script {
  display: inline-block;
  padding-bottom: 0.14em;
  background: var(--brush-underline) no-repeat left bottom / 100% 0.16em;
  color: var(--teal);
  font-family: var(--font-display);
  font-style: italic;
  letter-spacing: -0.03em;
}

.lede,
.section-copy {
  max-width: 42rem;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
}

.section-copy--light {
  color: var(--text-on-dark-soft);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: var(--teal-deep);
  font-size: 0.92rem;
  font-weight: 850;
  text-decoration: none;
}

.text-link::after {
  content: "\2192";
  font-size: 1.15em;
  transition: transform 160ms ease;
}

.text-link:hover::after {
  transform: translateX(0.25rem);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

.button {
  display: inline-flex;
  min-height: 3.25rem;
  padding: 0.8rem 1.2rem;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 0.92rem;
  font-weight: 850;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.button::after {
  content: "\2192";
  font-size: 1.1em;
}

.button:hover {
  transform: translateY(-2px);
}

.button--primary {
  background: var(--teal-deep);
  color: var(--white);
}

.button--primary:hover {
  background: var(--navy);
}

.button--secondary {
  border-color: var(--border-control);
  background: rgba(255, 255, 255, 0.6);
  color: var(--navy);
}

.button--secondary:hover {
  border-color: var(--teal-deep);
  background: var(--white);
}

.button--light {
  background: var(--cream);
  color: var(--navy-deep);
}

.button--light:hover {
  background: var(--white);
}

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  border-bottom: 1px solid rgba(6, 54, 69, 0.08);
  background: rgba(255, 250, 240, 0.96);
  box-shadow: 0 0.45rem 1.5rem rgba(6, 54, 69, 0.05);
  backdrop-filter: blur(1rem);
}

.header-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  min-height: 5.35rem;
  align-items: center;
  gap: 1.15rem;
}

.brand {
  display: inline-flex;
  min-height: 2.75rem;
  flex: 0 0 auto;
  align-items: center;
  text-decoration: none;
}

.brand-logo--header {
  width: clamp(10.5rem, 19vw, 15rem);
}

.brand-logo--footer {
  width: min(100%, 16rem);
}

.site-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  justify-self: center;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.nav-list a {
  display: inline-flex;
  min-height: 2.75rem;
  padding: 0.4rem 0.9rem;
  align-items: center;
  border-radius: var(--radius-pill);
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 750;
  text-decoration: none;
}

.nav-list a:hover,
.nav-list a[aria-current="page"] {
  background: var(--aqua-pale);
  color: var(--teal-deep);
}

.lang-switch {
  display: inline-flex;
  padding: 0.12rem;
  flex: 0 0 auto;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.lang-switch__option {
  display: inline-flex;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  text-decoration: none;
}

.lang-switch__option:hover,
.lang-switch__option[aria-current="true"] {
  background: var(--aqua-pale);
  color: var(--teal-deep);
}

.header-book {
  display: inline-flex;
  min-height: 2.9rem;
  padding: 0.55rem 1rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--teal-deep);
  color: var(--white);
  font-size: 0.87rem;
  font-weight: 850;
  justify-self: end;
  text-decoration: none;
  transition: background 180ms ease, transform 180ms ease;
}

.header-book::before {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  background: currentcolor;
  content: "";
  mask: var(--icon-whatsapp) no-repeat center / contain;
  -webkit-mask: var(--icon-whatsapp) no-repeat center / contain;
}

.header-book:hover {
  background: var(--navy);
  transform: translateY(-1px);
}

.menu-toggle {
  display: none;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  cursor: pointer;
}

.menu-toggle__lines,
.menu-toggle__lines::before,
.menu-toggle__lines::after {
  display: block;
  width: 1.15rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  content: "";
  transition: opacity 180ms ease, top 180ms ease, transform 180ms ease;
}

.menu-toggle__lines {
  position: relative;
}

.menu-toggle__lines::before,
.menu-toggle__lines::after {
  position: absolute;
  left: 0;
}

.menu-toggle__lines::before {
  top: -0.36rem;
}

.menu-toggle__lines::after {
  top: 0.36rem;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__lines {
  background: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__lines::before {
  top: 0;
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__lines::after {
  top: 0;
  transform: rotate(-45deg);
}

.hero {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 7rem) clamp(5rem, 9vw, 8rem);
  overflow: hidden;
  background:
    var(--texture-grain) repeat 0 0 / 10rem 10rem,
    radial-gradient(circle at 12% 12%, rgba(88, 199, 196, 0.16), transparent 28rem),
    linear-gradient(160deg, var(--cream-lift), var(--cream) 62%);
}

.hero::after {
  position: absolute;
  right: -10rem;
  bottom: -9rem;
  width: 34rem;
  height: 22rem;
  border: 2px solid var(--stroke-decorative);
  border-radius: 50%;
  content: "";
  transform: rotate(-12deg);
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.82fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 6.5rem);
}

.hero h1 {
  font-size: clamp(2.9rem, 5.4vw, 5.1rem);
}

.hero__copy {
  max-width: 40rem;
}

.hero__media {
  position: relative;
  padding: 0.7rem 0.7rem 2.7rem 2.7rem;
}

.hero__media::before {
  position: absolute;
  inset: 0 2rem 2rem 0;
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xl) var(--radius-lg);
  background: var(--teal);
  content: "";
  transform: rotate(-2deg);
}

.hero__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border: 0.55rem solid var(--white);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xl) var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 47%;
}

.hero__badge {
  position: absolute;
  z-index: 2;
  right: -0.5rem;
  bottom: 0;
  display: grid;
  width: 8.5rem;
  aspect-ratio: 1;
  padding: 1rem;
  place-items: center;
  border: 0.35rem solid var(--cream);
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-sm);
  font-size: 0.77rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(5deg);
}

.mini-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.25rem;
  padding: 0;
  margin: 1.5rem 0 0;
  color: var(--navy);
  font-size: 0.86rem;
  font-weight: 750;
  list-style: none;
}

.mini-proof li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.mini-proof li::before {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--teal);
  content: "";
}

.fact-bar {
  position: relative;
  z-index: 3;
  margin-top: -2.1rem;
}

.fact-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-lg);
  list-style: none;
}

.fact {
  display: flex;
  min-height: 8.3rem;
  padding: 1.4rem;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
}

.fact + .fact {
  border-left: 1px solid var(--line);
}

.fact__value {
  color: var(--teal-deep);
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 3.15rem);
  line-height: 1;
  white-space: nowrap;
}

.fact__label {
  display: block;
  max-width: 8.5rem;
  color: var(--navy);
  font-size: 0.83rem;
  font-weight: 800;
  line-height: 1.4;
}

.section {
  position: relative;
  padding-block: clamp(4.8rem, 9vw, 8rem);
}

.section--white {
  background: var(--white);
}

.section--foam {
  background: var(--foam);
}

.section--cream {
  background: var(--texture-grain) repeat 0 0 / 10rem 10rem, var(--cream);
}

.section--navy {
  background: var(--navy-deep);
  color: var(--white);
}

.section--navy h2,
.section--navy h3 {
  color: var(--white);
}

.section-heading {
  display: flex;
  margin-bottom: clamp(2.3rem, 5vw, 4rem);
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
}

.section-heading > :first-child {
  max-width: 50rem;
}

.section-heading .stamp-wrap {
  flex: 0 0 auto;
}

.editorial-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 1rem;
}

.image-card {
  position: relative;
  min-height: 18rem;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--aqua-pale);
  box-shadow: var(--shadow-sm);
}

.image-card picture,
.image-card img {
  width: 100%;
  height: 100%;
}

.image-card img {
  object-fit: cover;
  transition: transform 500ms ease;
}

.image-card:hover img {
  transform: scale(1.025);
}

.image-card figcaption {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  left: 0.75rem;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0.8rem;
  background: rgba(3, 40, 50, 0.82);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.4;
  backdrop-filter: blur(0.45rem);
}

.image-card--wide {
  grid-column: span 7;
  grid-row: span 2;
  min-height: 38rem;
}

.image-card--top,
.image-card--bottom {
  grid-column: span 5;
}

.image-card--top img {
  object-position: center 42%;
}

.image-card--bottom img {
  object-position: center 55%;
}

.amenity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.amenity-card {
  min-height: 13rem;
  padding: 1.55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: 0 0.45rem 1.5rem rgba(6, 54, 69, 0.06);
}

.amenity-mark {
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  margin-bottom: 1.15rem;
  place-items: center;
  border-radius: 50%;
  background: var(--aqua-pale);
  color: var(--teal-deep);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
}

.amenity-card p {
  color: var(--muted);
  font-size: 0.92rem;
}

.location-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(21rem, 0.9fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.location-copy {
  position: relative;
  padding: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
  border-radius: var(--radius-xl) var(--radius-md) var(--radius-xl) var(--radius-md);
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-lg);
}

.location-copy::after {
  position: absolute;
  right: -7rem;
  bottom: -8rem;
  width: 21rem;
  height: 15rem;
  border: 2px solid var(--stroke-decorative-light);
  border-radius: 50%;
  content: "";
  transform: rotate(-11deg);
}

.location-copy h2 {
  color: var(--white);
}

.location-copy p {
  position: relative;
  z-index: 1;
  color: var(--text-on-dark-soft);
}

.location-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.location-list li {
  position: relative;
  padding: 1rem 0 1rem 2.1rem;
  border-bottom: 1px solid var(--line);
  color: var(--navy);
  font-weight: 750;
}

.location-list li::before {
  position: absolute;
  top: 1.25rem;
  left: 0;
  width: 1.15rem;
  height: 1.15rem;
  border: 0.3rem solid var(--aqua);
  border-radius: 50%;
  content: "";
}

/* ---- Map embed -------------------------------------------------------- */
.map-embed {
  position: relative;
  aspect-ratio: 4 / 3;
}

.map-embed iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 43rem) {
  .map-embed {
    aspect-ratio: 21 / 9;
  }
}

/* The client's illustrated seal, reintroduced beside the "Find us" heading
   rather than over the map card, so it never competes with Google's own
   controls or attribution. */
.find-us-aside {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.find-us-seal {
  display: block;
  width: 6.5rem;
  height: auto;
}

.rate-preview {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.rate-preview__intro,
.season-card {
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border-radius: var(--radius-md);
}

.rate-preview__intro {
  background: var(--aqua-pale);
}

.season-card {
  position: relative;
  display: flex;
  min-height: 24rem;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--white);
}

.season-card--dark {
  border-color: transparent;
  background: var(--navy);
  color: var(--white);
}

.season-card h3 {
  min-height: 2.08em;
  font-size: clamp(2rem, 3.5vw, 3rem);
}

.season-card--dark h3,
.season-card--dark .rate-amount {
  color: var(--white);
}

.rate-amount {
  margin: 0.8rem 0 0.35rem;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(2.65rem, 5vw, 4.35rem);
  letter-spacing: -0.045em;
  line-height: 1;
}

.rate-period {
  display: block;
  margin-bottom: 1.4rem;
  color: var(--muted);
  font-size: 0.83rem;
  font-weight: 800;
}

.rate-amount .price-was {
  margin-right: 0.4rem;
  color: var(--muted);
  font-size: 0.45em;
  font-weight: 700;
  text-decoration: line-through;
}

.season-card--dark .rate-period,
.season-card--dark p {
  color: var(--text-on-dark-soft);
}

.rate-includes {
  font-size: 0.93rem;
}

.rate-supplement {
  padding-top: 1rem;
  margin-top: auto;
  border-top: 1px solid var(--line);
  color: var(--navy);
  font-weight: 850;
}

.season-card--dark .rate-supplement {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--white);
}

.stay-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

/* Four cards (home and rates pages) sit in one even row rather than 3 + 1. */
.stay-details--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.detail-card {
  padding: 1.5rem;
  border-top: 0.3rem solid var(--teal);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.detail-card__label {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.detail-card__value {
  display: block;
  margin-top: 0.45rem;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 1.8rem;
  line-height: 1.15;
}

.answer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.answer-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
}

.answer-card summary {
  position: relative;
  min-height: 4.8rem;
  padding: 1.25rem 3.5rem 1.25rem 1.35rem;
  color: var(--navy);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 850;
  list-style: none;
}

.answer-card summary::-webkit-details-marker {
  display: none;
}

.answer-card summary::after {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border-radius: 50%;
  background: var(--aqua-pale);
  color: var(--teal-deep);
  content: "+";
  font-size: 1.3rem;
  line-height: 1;
}

.answer-card[open] summary::after {
  content: "\2212";
}

.answer-card p {
  padding: 0 1.35rem 1.35rem;
  margin: 0;
  color: var(--muted);
}

.cta-section {
  padding-block: clamp(4.5rem, 8vw, 7rem);
  background: var(--aqua-pale);
}

.cta-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
  align-items: center;
  gap: 2rem;
  border-radius: var(--radius-xl) var(--radius-md) var(--radius-xl) var(--radius-md);
  background: var(--navy-deep);
  color: var(--white);
  box-shadow: var(--shadow-lg);
}

.cta-panel::after {
  position: absolute;
  right: -5rem;
  bottom: -9rem;
  width: 22rem;
  height: 15rem;
  border: 2px solid rgba(88, 199, 196, 0.24);
  border-radius: 50%;
  content: "";
}

.cta-panel > * {
  position: relative;
  z-index: 1;
}

.cta-panel h2 {
  margin-bottom: 0.6rem;
  color: var(--white);
}

.cta-panel p {
  max-width: 42rem;
  color: var(--text-on-dark-soft);
}

.site-footer {
  padding-block: 4.5rem 2rem;
  background: var(--navy-deep);
  color: var(--text-on-dark-soft);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(10rem, 0.7fr));
  gap: 3rem;
}

.footer-brand p {
  max-width: 32rem;
  margin-top: 1.4rem;
  color: var(--text-on-dark-quiet);
}

.footer-heading {
  margin-bottom: 1rem;
  color: var(--accent-on-dark);
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.footer-links {
  padding: 0;
  margin: 0;
  list-style: none;
}

.footer-links li + li {
  margin-top: 0.5rem;
}

.footer-links a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: var(--text-on-dark-soft);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--white);
  text-decoration: underline;
}

.site-footer .lang-switch {
  margin-top: 1rem;
  border-color: rgba(255, 255, 255, 0.22);
}

.site-footer .lang-switch__option {
  color: var(--text-on-dark-soft);
}

.site-footer .lang-switch__option:hover,
.site-footer .lang-switch__option[aria-current="true"] {
  background: rgba(255, 255, 255, 0.13);
  color: var(--white);
}

.footer-bottom {
  display: flex;
  padding-top: 1.7rem;
  margin-top: 3.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-on-dark-faint);
  font-size: 0.79rem;
}

.footer-bottom a {
  display: inline-flex;
  min-height: 1.5rem;
  align-items: center;
}

.subhero {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 20%, rgba(88, 199, 196, 0.28), transparent 25rem),
    linear-gradient(145deg, var(--cream), var(--foam));
}

.subhero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(25rem, 0.78fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
}

.subhero h1 {
  max-width: 49rem;
  font-size: clamp(3.1rem, 6vw, 5.7rem);
}

.subhero__photo {
  width: min(100%, 35rem);
  aspect-ratio: 1;
  overflow: hidden;
  border: 0.55rem solid var(--white);
  border-radius: var(--radius-lg) var(--radius-lg) 6rem var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transform: rotate(1.5deg);
}

.subhero__photo picture,
.subhero__photo img {
  width: 100%;
  height: 100%;
}

.subhero__photo img {
  object-fit: cover;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0;
  margin: 0 0 1.4rem;
  color: var(--teal-deep);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  list-style: none;
  text-transform: uppercase;
}

.breadcrumbs li + li::before {
  margin-right: 0.45rem;
  color: var(--text-muted);
  content: "/";
}

.breadcrumbs a {
  display: inline-flex;
  min-height: 1.5rem;
  align-items: center;
  text-decoration: none;
}

.summary-list a {
  display: inline-flex;
  min-height: 1.5rem;
  align-items: center;
}

.info-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.summary-list {
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.summary-list li {
  display: flex;
  padding-block: 1rem;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.summary-list span {
  color: var(--muted);
  font-size: 0.88rem;
}

.summary-list strong {
  color: var(--navy);
  text-align: right;
}

/* Every source photo is square, so the tiles are too: wide 16rem-high strips
   showed as little as a third of a photo. The featured tile spans 2 × 2, so
   nine photos fill each row exactly (4 + 8 = 12 cells) at 3 and 2 columns. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.gallery-item {
  position: relative;
  aspect-ratio: 1;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--aqua-pale);
  box-shadow: var(--shadow-sm);
}

.gallery-item--featured {
  grid-column: span 2;
  grid-row: span 2;
}

.gallery-item picture,
.gallery-item img {
  width: 100%;
  height: 100%;
}

.gallery-item img {
  object-fit: cover;
}

.gallery-item figcaption {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  left: 0.7rem;
  padding: 0.7rem 0.85rem;
  border-radius: 0.7rem;
  background: rgba(3, 40, 50, 0.84);
  color: var(--white);
  font-size: 0.76rem;
  font-weight: 750;
}

/* ---- Gallery links and photo viewer ---------------------------------------
   Each tile links to its full-size JPEG, which site.js upgrades to an
   in-page viewer. The caption overlays the photo, so it passes taps through
   to the link underneath. */
.gallery-item__link {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

.gallery-item figcaption {
  pointer-events: none;
}

/* The tile clips its overflow, which would clip a ring drawn on the link, so
   draw the focus ring on the tile itself. */
.gallery-item:has(.gallery-item__link:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--focus-ring-outer), var(--shadow-sm);
}

@supports selector(:has(a)) {
  .gallery-item__link:focus-visible {
    outline: none;
    box-shadow: none;
  }
}

.lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  padding: 4.5rem clamp(0.75rem, 6vw, 5.5rem) 1.5rem;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--white);
}

.lightbox[open] {
  display: grid;
  place-items: center;
}

.lightbox::backdrop {
  background: rgba(3, 40, 50, 0.94);
}

.lightbox__figure {
  display: grid;
  margin: 0;
  gap: 0.8rem;
  justify-items: center;
}

.lightbox__image {
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  max-height: calc(100dvh - 9rem);
  border-radius: var(--radius-md);
  object-fit: contain;
}

.lightbox__caption {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
  font-weight: 750;
}

.lightbox__count {
  flex: 0 0 auto;
  color: var(--text-on-dark-quiet);
  font-weight: 650;
}

.lightbox__button {
  position: fixed;
  display: grid;
  width: 3rem;
  height: 3rem;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(3, 40, 50, 0.72);
  color: var(--white);
  cursor: pointer;
  font-size: 1.7rem;
  line-height: 1;
}

.lightbox__button:hover {
  background: var(--teal-deep);
}

.lightbox__button--close {
  top: 0.9rem;
  right: 0.9rem;
}

.lightbox__button--prev,
.lightbox__button--next {
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__button--prev {
  left: 0.9rem;
}

.lightbox__button--next {
  right: 0.9rem;
}

html:has(.lightbox[open]) {
  overflow: hidden;
}

.bedroom-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.bedroom-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.bedroom-card picture {
  aspect-ratio: 1;
  overflow: hidden;
}

.bedroom-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bedroom-card__copy {
  padding: 1.2rem;
}

.bedroom-card__copy p {
  color: var(--muted);
  font-size: 0.9rem;
}

.rates-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.rate-card {
  position: relative;
  display: flex;
  min-height: 30rem;
  padding: clamp(1.75rem, 4vw, 3rem);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.rate-card--dark {
  border-color: transparent;
  background: var(--navy);
  color: var(--white);
}

.rate-card h3 {
  min-height: 2.08em;
  font-size: clamp(2.35rem, 5vw, 4rem);
}

.rate-card--dark h3,
.rate-card--dark .price,
.rate-card--dark .rate-facts strong {
  color: var(--white);
}

.price {
  margin: 1rem 0 0.5rem;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 6.4vw, 5.4rem);
  letter-spacing: -0.055em;
  line-height: 0.95;
}

.price-note {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 800;
}

.price-was {
  margin-right: 0.5rem;
  color: var(--muted);
  font-size: 0.5em;
  font-weight: 700;
  text-decoration: line-through;
}

.price-promo-tag {
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--aqua-pale);
  color: var(--teal-deep);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
}

.rate-card--dark .price-note,
.rate-card--dark p {
  color: var(--text-on-dark-soft);
}

.rate-facts {
  padding: 0;
  margin: auto 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.rate-card--dark .rate-facts {
  border-color: rgba(255, 255, 255, 0.2);
}

.rate-facts li {
  display: flex;
  padding-block: 0.9rem;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.88rem;
}

.rate-card--dark .rate-facts li {
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-on-dark-soft);
}

.rate-facts strong {
  color: var(--navy);
  text-align: right;
}

.booking-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding: 0;
  margin: 2.5rem 0 0;
  counter-reset: step;
  list-style: none;
}

.booking-steps li {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  counter-increment: step;
}

.booking-steps li::before {
  display: grid;
  width: 2.7rem;
  height: 2.7rem;
  margin-bottom: 1.2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--aqua-pale);
  color: var(--teal-deep);
  content: counter(step, decimal-leading-zero);
  font-size: 0.77rem;
  font-weight: 900;
}

.booking-steps p {
  color: var(--muted);
  font-size: 0.92rem;
}

.quote-note {
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--note-border);
  border-left: 0.35rem solid var(--teal);
  border-radius: 0.85rem;
  background: var(--surface-note);
  color: var(--text-note);
}

.quote-note strong {
  color: var(--navy-deep);
}

.contact-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: clamp(1.75rem, 5vw, 3.2rem);
  align-items: center;
  gap: 2rem;
  border-radius: var(--radius-lg);
  background: var(--teal-deep);
  color: var(--white);
  box-shadow: var(--shadow-lg);
}

.contact-panel h2 {
  margin-bottom: 0.5rem;
  color: var(--white);
}

.contact-panel p {
  color: var(--text-on-dark-soft);
}

.contact-number {
  display: inline-flex;
  min-height: 2.75rem;
  margin-top: 0.5rem;
  align-items: center;
  color: var(--white);
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 900;
  text-decoration: none;
}

.not-found {
  display: grid;
  min-height: calc(100vh - 5.35rem);
  padding-block: 5rem;
  place-items: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(88, 199, 196, 0.3), transparent 24rem),
    linear-gradient(150deg, var(--cream), var(--foam));
  text-align: center;
}

.not-found__content {
  max-width: 45rem;
}

.not-found__code {
  display: block;
  margin-bottom: 1rem;
  color: var(--teal-deep);
  font-family: var(--font-display);
  font-size: clamp(6rem, 18vw, 12rem);
  line-height: 0.8;
  opacity: 0.15;
}

.not-found h1 {
  font-size: clamp(2.8rem, 6vw, 5rem);
}

.not-found p {
  color: var(--muted);
  font-size: 1.08rem;
}

.not-found .button-row {
  justify-content: center;
}

.mobile-booking {
  display: none;
}

.reveal-pending {
  opacity: 0;
  transform: translateY(1rem);
}

.reveal-pending.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--motion-slow) ease, transform var(--motion-slow) ease;
}

/* ---- Campaign strapline --------------------------------------------------- */
.strapline {
  display: block;
  margin-top: 1.3rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-style: italic;
  letter-spacing: 0.01em;
}

/* Beats the `.footer-brand p` colour and margin without !important. */
.footer-brand .strapline {
  margin-top: 1.1rem;
  color: var(--accent-on-dark);
}

/* ---- Brush rule ----------------------------------------------------------- */
.brush-rule {
  display: block;
  width: min(13rem, 55%);
  height: 0.75rem;
  padding: 0;
  border: 0;
  margin: 2.4rem 0 0;
  background: var(--brush-rule) no-repeat left center / 100% 100%;
}

.brush-rule--light {
  filter: brightness(1.45) saturate(0.7);
}

/* ---- Hero headline, set the way the poster sets it ------------------------
   A heavy cap line, the accent word beneath it, then the location on a brush
   block. The accent drops its underline here: the block below already carries
   the weight the underline is there to provide elsewhere. */
.hero__title {
  display: grid;
  justify-items: start;
  gap: 0;
}

.hero__title-lead {
  color: var(--teal-deep);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

.hero__title-accent {
  padding-bottom: 0;
  margin-top: -0.1em;
  background: none;
  font-size: 0.94em;
}

.hero__title-band {
  margin-top: 0.5em;
  font-size: clamp(0.8rem, 0.21em, 1.08rem);
}

.spec-sep {
  padding-inline: 0.15em;
  color: var(--teal);
  font-weight: 400;
}

/* The sprite only supplies <symbol> definitions; it must never take up space. */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---- Poster devices -------------------------------------------------------
   Lifted from the 2026 client poster: a ragged teal brush block carrying
   white caps, the two icon specification lists, and the dashed circular
   getaway stamp. ------------------------------------------------------------- */

.brush-band {
  display: inline-block;
  padding: 0.5em 1.15em 0.62em;
  background: var(--brush-band) no-repeat center / 100% 100%;
  color: var(--text-on-dark);
  font-weight: 850;
  letter-spacing: 0.13em;
  line-height: 1.25;
  text-transform: uppercase;
}

.section-heading .brush-band,
.spec-col .brush-band {
  margin-bottom: 1.4rem;
  font-size: 0.86rem;
}

/* ---- Specification lists -------------------------------------------------- */
.spec-grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.spec-col + .spec-col {
  padding-left: clamp(1.75rem, 4vw, 3.25rem);
  border-left: 1px solid var(--line);
}

.spec-list {
  display: grid;
  gap: 0.95rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.spec-list li {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1.65rem minmax(0, 1fr);
  align-items: start;
  color: var(--text-strong);
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.4;
}

.spec-list svg {
  width: 1.65rem;
  height: 1.65rem;
  margin-top: -0.1rem;
  fill: none;
  stroke: var(--teal);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

/* ---- Circular stamp ------------------------------------------------------- */
.stamp {
  display: grid;
  width: 10.5rem;
  aspect-ratio: 1;
  padding: 1.35rem;
  place-content: center;
  border-radius: 50%;
  background: var(--teal-deep);
  color: var(--text-on-dark);
  text-align: center;
}

.stamp::before {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 auto 0.35rem;
  background: currentcolor;
  content: "";
  mask: var(--icon-heart) no-repeat center / contain;
  -webkit-mask: var(--icon-heart) no-repeat center / contain;
}

.stamp__lead {
  display: block;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.stamp__main {
  display: block;
  margin-top: 0.15rem;
  font-size: 1.12rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.15;
  text-transform: uppercase;
}

.stamp-wrap {
  display: grid;
  place-items: center;
  padding: 0.5rem;
  border: 0.15rem dashed var(--teal-deep);
  border-radius: 50%;
}

/* ---- Illustrated brand band ----------------------------------------------- */
.brand-band {
  display: block;
  overflow: hidden;
  background: var(--cream);
  line-height: 0;
}

.brand-band img {
  display: block;
  width: 100%;
  height: auto;
}

/* Home page, two-column hero and up: the band is a full-bleed 3:1 lockup, so
   on any 16:9 screen it filled 59% of the first view and pushed the headline
   and "Check availability" below the fold. Show the hero first and move the
   band to the end of the page, where every other page already places it.
   Phones and tablets keep it on top, as tuned with the client. The band holds
   no links or controls, so only its visual position changes. */
@media (min-width: 56.0625rem) {
  .page-home main {
    display: flex;
    flex-direction: column;
  }

  .page-home .brand-band--top {
    order: 1;
  }
}

@media (max-width: 43rem) {
  /* The banner is a 3:1 lockup. A fixed rem height over-crops as the viewport
     narrows (the crop window keeps shrinking while the height stays put), so
     use aspect-ratio to keep the same proportion of the scene visible at
     every phone width instead of zooming in further on small screens. */
  .brand-band img {
    aspect-ratio: 2.2 / 1;
    height: auto;
    object-fit: cover;
    object-position: center;
  }
}

@media (max-width: 68rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.8fr);
    gap: 3rem;
  }

  .amenity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rate-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rate-preview__intro {
    grid-column: 1 / -1;
  }

  /* Too narrow for four columns of display-size values: use 2 × 2. The
     single-column rule at 56rem comes later in the file and still wins. */
  .stay-details--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 56rem) {
  .spec-grid {
    gap: 1.75rem;
  }

  .spec-col + .spec-col {
    padding-left: 1.75rem;
  }

  .header-shell {
    display: flex;
    min-height: 4.9rem;
    gap: 0.7rem;
  }

  .brand-logo--header {
    width: clamp(10rem, 30vw, 12.5rem);
  }

  .site-nav {
    position: absolute;
    z-index: 110;
    top: calc(100% + 0.55rem);
    right: 0;
    left: 0;
    align-items: stretch;
    flex-direction: column;
    gap: 0.35rem;
    justify-self: auto;
    margin: 0;
    padding: 0.65rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: var(--shadow-lg);
  }

  /* Closing: fade out, then hide. Hiding is delayed rather than animated
     because an animated visibility is still `hidden` on the first frame. */
  .js .site-nav {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.6rem);
    transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
  }

  .nav-initializing .site-nav {
    transition: none !important;
  }

  /* Opening: visible (and focusable) at once, so site.js can move focus to
     the first link on the next frame; only opacity and position animate. */
  .js body.nav-open .site-nav {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 160ms ease, transform 160ms ease, visibility 0s;
  }

  .nav-list {
    align-items: stretch;
    flex-direction: column;
  }

  .nav-list a {
    width: 100%;
    min-height: 3.15rem;
    padding-inline: 1rem;
  }

  .site-nav .lang-switch {
    align-self: flex-start;
    margin: 0.35rem 0.35rem 0;
  }

  .js .menu-toggle {
    display: inline-flex;
  }

  .no-js .header-shell {
    flex-wrap: wrap;
    padding-block: 0.6rem;
  }

  .no-js .site-nav {
    position: static;
    order: 4;
    flex-basis: 100%;
    align-items: center;
    flex-flow: row wrap;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .no-js .nav-list {
    align-items: center;
    flex-flow: row wrap;
  }

  .no-js .nav-list a {
    width: auto;
  }

  .no-js .site-nav .lang-switch {
    margin: 0;
  }

  .brand {
    margin-right: auto;
  }

  .hero__grid,
  .subhero__grid,
  .location-panel,
  .info-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__copy {
    max-width: none;
  }

  .hero__media,
  .subhero__photo {
    width: min(100%, 42rem);
    margin-inline: auto;
  }

  .subhero__photo {
    transform: none;
  }

  .fact-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fact:nth-child(3) {
    border-left: 0;
  }

  .fact:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .editorial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .image-card--wide,
  .image-card--top,
  .image-card--bottom {
    grid-column: auto;
    grid-row: auto;
    min-height: 24rem;
  }

  .image-card--wide {
    grid-column: 1 / -1;
    min-height: 32rem;
  }

  .stay-details,
  .booking-steps {
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 2rem;
  }
}

@media (max-width: 43rem) {
  .spec-grid {
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr);
  }

  .spec-col + .spec-col {
    padding-top: 2rem;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .stamp {
    width: 9rem;
    padding: 1.1rem;
  }

  body {
    padding-bottom: 4.8rem;
  }

  .container,
  .narrow {
    width: min(calc(100% - 1.5rem), var(--container));
  }

  .header-book {
    width: 2.9rem;
    padding: 0;
  }

  .header-book__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  h1 {
    font-size: clamp(2.9rem, 14vw, 4.35rem);
  }

  .hero {
    padding-top: 3.2rem;
  }

  .hero__media {
    padding: 0.5rem 0.5rem 1.9rem 1.4rem;
  }

  .hero__badge {
    right: 0.6rem;
    width: 6.8rem;
    font-size: 0.64rem;
  }

  .footer-seal {
    width: 8rem;
  }

  .button-row .button {
    width: 100%;
  }

  .fact-list,
  .editorial-grid,
  .amenity-grid,
  .rate-preview,
  .rates-grid,
  .answer-grid,
  .gallery-grid,
  .bedroom-grid {
    grid-template-columns: 1fr;
  }

  .fact:nth-child(n) {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .fact:first-child {
    border-top: 0;
  }

  .fact {
    min-height: 6.4rem;
    justify-content: flex-start;
  }

  .image-card--wide,
  .image-card--top,
  .image-card--bottom {
    grid-column: auto;
    min-height: 23rem;
  }

  .section-heading {
    align-items: start;
    flex-direction: column;
    gap: 0.5rem;
  }

  .rate-preview__intro {
    grid-column: auto;
  }

  .season-card {
    min-height: 21rem;
  }

  .season-card h3,
  .rate-card h3 {
    min-height: 0;
  }

  .summary-list li {
    align-items: start;
    flex-direction: column;
    gap: 0.25rem;
  }

  .summary-list strong {
    text-align: left;
  }

  .gallery-item--featured {
    grid-column: auto;
    grid-row: auto;
  }

  .cta-panel,
  .contact-panel {
    grid-template-columns: 1fr;
  }

  .cta-panel .button,
  .contact-panel .button {
    width: 100%;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    align-items: start;
    flex-direction: column;
  }

  .mobile-booking {
    position: fixed;
    z-index: 120;
    right: 0.75rem;
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    left: 0.75rem;
    display: flex;
    min-height: 3.35rem;
    padding: 0.65rem 1rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--teal-deep);
    color: var(--white);
    box-shadow: 0 0.75rem 2.2rem rgba(3, 40, 50, 0.35);
    font-size: 0.9rem;
    font-weight: 900;
    opacity: 0;
    pointer-events: none;
    text-decoration: none;
    transform: translateY(calc(100% + 1.5rem));
    transition: opacity var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out);
  }

  .mobile-booking.is-visible,
  .no-js .mobile-booking {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}

@media (max-width: 23rem) {
  .brand-logo--header {
    width: 8.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .reveal-pending {
    opacity: 1;
    transform: none;
  }
}

@media print {
  .site-nav,
  .header-book,
  .menu-toggle,
  .skip-link,
  .mobile-booking,
  .button-row,
  .cta-section,
  .map-embed,
  .brand-band,
  .footer-brand .brand,
  .lightbox {
    display: none !important;
  }

  body {
    padding: 0;
    background: var(--white);
    color: var(--print-ink);
  }

  /* Keep the logo so a printed rates sheet still says whose rates they are. */
  .site-header {
    position: static;
    border: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
  }

  .section,
  .hero,
  .subhero {
    padding-block: 2rem;
  }

  /* site.js only reveals [data-reveal] blocks as they scroll into view, so
     anything not yet scrolled to would otherwise print blank. */
  .reveal-pending {
    opacity: 1;
    transform: none;
  }

  /* Closed FAQ answers would print as bare questions. */
  .answer-card::details-content {
    content-visibility: visible;
  }

  .answer-card summary::after {
    display: none;
  }

  /* Keep a heading on the same page as the content it introduces. */
  .section-heading,
  h2,
  h3 {
    break-after: avoid;
  }

  /* Rotated, full-width photos split across page breaks; print them smaller
     and keep cards and figures whole. */
  .hero__media,
  .subhero__photo {
    width: min(100%, 20rem);
    margin-inline: 0;
    transform: none;
  }

  .gallery-item--featured {
    grid-column: auto;
    grid-row: auto;
  }

  .fact-list,
  .rate-card,
  .season-card,
  .detail-card,
  .answer-card,
  .booking-steps li,
  .bedroom-card,
  .gallery-item,
  .image-card,
  .hero__media,
  .subhero__photo,
  .contact-panel,
  .quote-note {
    break-inside: avoid;
  }
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--focus-ring-outer);
}

/* ---- Texture and decoration safeguards ------------------------------------
   Dropping --texture-grain to none removes only the noise layer and leaves
   every gradient and solid background intact. */
@media (prefers-contrast: more) {
  :root {
    --texture-grain: none;
  }
}

@media (forced-colors: active) {
  :root {
    --texture-grain: none;
  }

  .eyebrow::before,
  .kicker::before,
  .brush-rule {
    display: none;
  }

  .accent-script {
    background: none;
    text-decoration: underline;
  }
}