@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/instrument-sans-variable.ttf") format("truetype");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
:root {
  --red: #fe1709;
  --red-text: #fe1709;
  /* A deeper red for long-form body copy, where the brand red is too light to read. */
  --red-deep: #9c1207;
  --yellow: #fae181;
  /* Figma fills buttons with a deeper yellow than the section backgrounds. */
  --button-yellow: #f6d762;
  --blue: #2451bb;
  --pink: #f9cbd7;
  --cream: #fffdf5;
  --ink: #23231f;
  --gutter: 4.1666667%;
  /* The Figma design sets headings, body and accents all in Instrument Sans;
     the only slab serif is the wordmark, which ships as artwork. */
  --font-body: "Instrument Sans",Arial,Helvetica,sans-serif;
  --font-heading: var(--font-body);
  --font-accent: var(--font-body);
  font-family: var(--font-body);
  color: var(--red-text);
  background: var(--cream);
  font-synthesis: none;
}
* {
  box-sizing: border-box;
  letter-spacing: 0;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}
body {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
}
body,input,button,select,textarea {
  font-family: var(--font-body);
}
h1,h2,h3,p,figure,blockquote {
  margin: 0;
}
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  line-height: 1.12;
  font-weight: 600;
  overflow-wrap: anywhere;
}
h1 {
  font-size: 52px;
}
h2 {
  font-size: 32px;
}
h3 {
  font-size: 24px;
}
p+p {
  margin-top: 20px;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.mobile-extra a {
  padding: 4px 8px;
  margin: 0 -8px;
}
.nav a:hover,.mobile-extra a:hover,.footer-links a:hover,.footer-contact a:hover {
  background: var(--red);
  color: var(--cream);
  text-decoration: none;
}
img {
  display: block;
  max-width: 100%;
  object-fit: cover;
}
svg {
  flex: 0 0 auto;
  vertical-align: middle;
}
button,input,select,textarea {
  font: inherit;
}
button,summary,select {
  cursor: pointer;
}
button {
  color: inherit;
}
:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 5px;
}
input,textarea,select {
  min-width: 0;
  max-width: 100%;
}
section,article,form,figure,div {
  min-width: 0;
}
summary {
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}
.section-pad {
  padding: 80px var(--gutter);
}
.theme-yellow {
  background: var(--yellow);
  color: var(--red-text);
}
.theme-blue {
  background: var(--blue);
  color: var(--cream);
}
.theme-pink {
  background: var(--pink);
  color: var(--red-text);
}
.theme-red {
  background: var(--red);
  color: var(--cream);
}
.theme-navy {
  background: #10214b;
  color: var(--yellow);
}
.inline-link {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 12px 24px;
  border: 1px solid var(--red);
  background: var(--button-yellow);
  color: var(--red-text);
  border-radius: 0;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}
.button:hover {
  background: #f2cc45;
  text-decoration: none;
}
.button-outline,.button-light {
  border-color: var(--red);
  background: white;
  color: var(--red-text);
}
.button-outline:hover,.button-light:hover {
  background: var(--cream);
}
.actions {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.brand img,.footer-brand img {
  /* Cropped to the glyphs, so height sets the cap height directly. */
  width: auto;
  display: block;
}
.brand picture,.footer-brand picture {
  display: block;
}
/* Pieces drawn only in the Figma mobile frames. */
.mobile-only,.adventure-star,.review-stars,.booking-dates>svg,.booking-arrow {
  display: none;
}
/* On desktop the date pair sits in the search grid like any other field. */
.booking-dates {
  display: contents;
}
.brand img {
  height: 21px;
}
.footer-brand img {
  height: 102px;
}
.skip-link {
  position: fixed;
  top: -100px;
  left: 20px;
  background: var(--cream);
  padding: 16px;
  z-index: 100;
}
.skip-link:focus {
  top: 12px;
}
.announcement {
  padding: 7px var(--gutter);
  min-height: 38px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  background: var(--yellow);
  font-size: 13px;
  font-weight: 600;
}
.announcement a {
  font-family: var(--font-accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 0;
  padding: 3px 12px;
}
.announcement svg {
  width: 14px;
  height: 14px;
}
.nav-item.has-menu {
  position: relative;
}
.nav-menu {
  position: absolute;
  top: 100%;
  left: -8px;
  display: none;
  flex-direction: column;
  min-width: 190px;
  padding: 6px 0;
  background: var(--cream);
  /* The header runs white over a hero, which would hide these on cream. */
  color: var(--red-text);
  border: 1px solid var(--red);
  z-index: 20;
}
.nav-item.has-menu:hover .nav-menu,.nav-item.has-menu:focus-within .nav-menu {
  display: flex;
}
.nav-menu a {
  padding: 8px 14px;
  margin: 0;
  white-space: nowrap;
}
.site-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 98px;
  padding: 20px var(--gutter);
  background: var(--cream);
}
.site-header.over-hero {
  margin-bottom: -98px;
  background: transparent;
  color: white;
}
.brand {
  margin-right: auto;
  display: flex;
  align-items: center;
}
.brand:hover {
  text-decoration: none;
}
.nav {
  display: flex;
  gap: 28px;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
}
.nav>a,.nav-item>a {
  display: inline-flex;
  align-items: center;
  padding: 10px 8px;
  margin: 0 -4px;
}
.over-hero .nav .active {
  background: var(--red);
  color: white;
}
.nav .contact-link {
  background: white;
  border: 1px solid var(--red);
  color: var(--red-text);
  padding: 12px 18px;
}
.menu-button,.mobile-extra {
  display: none;
}
.hero {
  position: relative;
  isolation: isolate;
  min-height: 0;
  height: auto;
  aspect-ratio: 1440 / 800;
  display: grid;
  align-items: end;
  color: white;
  background: #36332b;
}
.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  object-position: center;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,rgb(0 0 0 / 22%),transparent 30%,rgb(0 0 0 / 14%));
}
.hero-inner {
  padding: 140px var(--gutter) 64px;
  width: 100%;
}
.hero h1 {
  line-height: 1.3;
}
.hero h1 span {
  background: var(--red);
  padding: 2px 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hero-description p {
  font-size: 20px;
  line-height: 1.5;
  max-width: 620px;
}
.tour-hero:not(.home-hero) {
  align-items: center;
}
.tour-hero:not(.home-hero) .hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.tour-hero::before {
  background: rgb(0 0 0 / 30%);
}
.home-hero {
  min-height: 0;
  height: auto;
  align-items: center;
  text-align: center;
}
.home-hero .hero-inner {
  padding-top: 145px;
  padding-bottom: 85px;
}
.home-hero h1 {
  font-size: 48px;
  margin-bottom: 16px;
}
.home-hero .hero-description p {
  margin: 0 auto 32px;
  max-width: 730px;
}
.home-hero::before {
  background: rgb(0 0 0 / 39%);
}
.booking-search {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 180px 180px 120px 130px auto;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgb(255 255 255 / 75%);
  border-radius: 44px;
  background: rgb(0 0 0 / 12%);
  align-items: stretch;
  text-align: left;
}
.booking-search label {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  align-content: center;
  gap: 0;
  border-radius: 30px;
  background: var(--cream);
  color: var(--red-text);
  padding: 8px 16px;
}
.booking-search label>svg {
  display: none;
}
.booking-search label>span {
  font-size: 12px;
}
.booking-search input,.booking-search select {
  border: 0;
  /* Was near-black, which read as a different face next to the red labels. */
  color: var(--red-text);
  background: transparent;
  padding: 0;
  width: 100%;
  height: 30px;
  font-size: 14px;
}
/* Chrome renders the date field text in its own shadow DOM, which does not
   pick up the inherited family, so the parts are set explicitly. */
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-year-field {
  font-family: var(--font-body);
}
/* Chrome pads each field, which spaces the text out like a monospace face. */
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-year-field {
  padding: 0;
}
.booking-search .button {
  border-radius: 30px;
}
.section-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
  margin-bottom: 70px;
}
.section-heading p {
  max-width: 630px;
}
/* Only nudge the paragraph down when it sits under the heading, not beside it. */
.section-heading>div h2+p {
  margin-top: 24px;
}
.home-intro {
  padding-top: 56px;
  padding-bottom: 40px;
}
.home-intro>p {
  margin-bottom: 32px;
  font-size: 20px;
}
.home-photo-story img {
  width: 100%;
}
.home-photo-wide img {
  aspect-ratio: 1320 / 600;
}
.home-photo-pair {
  display: grid;
  grid-template-columns: 600fr 350fr;
  gap: 28.030303%;
  margin-top: 60px;
}
.home-photo-pair img {
  aspect-ratio: 1;
  object-position: center 58%;
}
.home-photo-pair figure:last-child img {
  aspect-ratio: 350 / 400;
}
.home-photo-pair figcaption {
  font-size: 14px;
  margin-top: 18px;
}
.featured-tours {
  padding-top: 40px;
}
.featured-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
}
.featured-heading h2 {
  line-height: 1.45;
}
.featured-heading .button {
  flex-shrink: 0;
}
.review-link {
  margin-top: 24px;
}
.photo-carousel {
  padding: 0 var(--gutter) 36px;
}
.photo-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 27.9166667vw;
  gap: 1.3888889vw;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: none;
}
.photo-strip::-webkit-scrollbar {
  display: none;
}
.photo-strip img {
  width: 100%;
  height: auto;
  aspect-ratio: 402 / 300;
}
.adventure-section {
  color: var(--blue);
}
.adventure-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 1.3888889vw;
}
.adventure-grid img {
  width: 100%;
  aspect-ratio: 315 / 400;
}
.adventure-grid h3 {
  margin: 20px 0 14px;
}
.scroll-controls {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin: 0 0 24px;
}
.scroll-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
}
.scroll-controls button[data-direction="-1"] svg {
  transform: rotate(180deg);
}
.adventure-section>.scroll-controls {
  display: none;
}
.testimonials .section-heading {
  margin-bottom: 55px;
}
.review-track {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 48px)/3);
  overflow-x: auto;
  gap: 24px;
  scrollbar-width: none;
  scroll-snap-type: none;
  scroll-behavior: auto;
  padding-bottom: 16px;
}
.review {
  background: var(--blue);
  color: var(--cream);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-height: 340px;
  border: 1px solid rgb(255 255 255 / 50%);
  padding: 28px;
  scroll-snap-align: start;
}
.review:hover,.review.review-selected {
  background: var(--yellow);
  color: var(--ink);
  border-color: var(--yellow);
}
.quote-mark {
  font-family: var(--font-heading);
  line-height: 1;
  font-size: 76px;
  color: var(--yellow);
}
.review.review-selected .quote-mark {
  color: var(--red);
}
.review blockquote {
  margin: 24px 0 30px;
}
.review figcaption {
  margin-top: auto;
  display: grid;
  gap: 5px;
}
.review figcaption span {
  font-size: 14px;
}
.faq-groups {
  border-top: 1px solid currentColor;
}
.faq-category {
  border-bottom: 1px solid currentColor;
}
.faq-category>summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 76px;
  padding: 18px 4px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
}
summary>span {
  width: 28px;
  flex: 0 0 28px;
  text-align: center;
  font-size: 30px;
  line-height: 1;
}
details[open]>summary>span {
  transform: rotate(45deg);
}
.faq-questions {
  padding: 0 30px 24px;
}
.faq-questions details+details {
  border-top: 1px solid rgb(189 40 23 / 30%);
}
.faq-questions summary {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 18px 0;
  font-weight: 600;
}
.faq-questions p {
  padding: 0 24px 24px 0;
  max-width: none;
  color: var(--red-deep);
}
.faq-questions summary>span {
  font-size: 22px;
}
.faq-questions summary {
  color: var(--red-deep);
}
.room-grid {
  display: grid;
  grid-template-columns: 667fr 658fr;
  gap: 0.7638889vw;
  margin-right: -1.1111111vw;
}
.room-card {
  background: #fcf0bc;
  color: var(--ink);
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.room-card>img {
  width: 100%;
  aspect-ratio: 667 / 320;
  object-position: center 46%;
}
.room-card:nth-child(2)>img {
  aspect-ratio: 658 / 320;
  object-position: center 45%;
}
.room-card-body {
  padding: 30px;
}
.room-tag {
  border-bottom: 1px solid rgb(0 0 0 / 30%);
  padding: 12px 0;
  margin-bottom: 20px;
}
.room-card-body .text-link {
  margin-top: 22px;
}
.room-description .section-heading {
  margin-bottom: 0;
}
/* Interim layout for the three private room types until the Figma layout lands. */
.room-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  padding-top: 0;
}
.room-options h3 {
  margin: 0 0 12px;
}
.room-options p {
  margin: 0;
}
.room-description.theme-yellow {
  color: var(--blue);
}
/* The room sections are yellow or pink, so the button takes the white secondary style. */
.room-description .button {
  margin-top: 28px;
  background: white;
  color: var(--red-text);
}
.room-description .button:hover {
  background: var(--cream);
}
.room-description .photo-carousel {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 70px;
}
.room-description .photo-strip {
  gap: 0.6944444vw;
}
.amenities {
  color: var(--pink);
  display: grid;
  grid-template-columns: 814fr 626fr;
  gap: 0;
  padding: 4.1666667vw 0;
}
.amenities-photos>img {
  width: 100%;
  aspect-ratio: 814 / 800;
}
.amenities-secondary {
  display: none;
}
.amenities>div:not(.amenities-photos) {
  display: flex;
  flex-direction: column;
  padding: 32px 4.1666667vw 16px 2.7777778vw;
}
.amenities ol {
  list-style: none;
  margin: auto 0 0;
  padding: 45px 0 0;
}
.amenities li {
  display: flex;
  gap: 30px;
  align-items: baseline;
  padding: 6px 0;
}
.amenities li span {
  font-family: var(--font-accent);
  font-size: 14px;
  /* A fixed column, so [ 01 ] and [ 07 ] don't push their items to different starts. */
  flex: 0 0 3.5em;
  white-space: nowrap;
}
.lifestyle-intro {
  font-size: 24px;
  max-width: 1150px;
  margin-bottom: 50px;
}
.lifestyle-wide img {
  width: 100%;
  aspect-ratio: 1315 / 680;
  object-position: center 20%;
}
.lifestyle-wide,.lifestyle-pair {
  width: calc(100% - 0.3472222vw);
}
.lifestyle.theme-navy .lifestyle-wide img {
  object-position: center;
}
.lifestyle figcaption {
  font-size: 14px;
  margin-top: 18px;
}
.lifestyle-pair {
  display: grid;
  grid-template-columns: 648fr 341fr;
  gap: 24.7908745%;
  margin-top: 80px;
}
.lifestyle-pair img {
  width: 100%;
  aspect-ratio: 648 / 680;
  object-position: center 62%;
}
.lifestyle-pair figure:last-child img {
  aspect-ratio: 341 / 426;
  object-position: center;
}
.lifestyle-pair figure:last-child figcaption {
  text-align: right;
}
.tours-section>h2 {
  margin-bottom: 50px;
}
.tours-section {
  padding-right: 3.8888889vw;
  padding-left: 3.8888889vw;
}
.tour-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 32px 1.5277778vw;
}
.tour-grid[hidden] {
  display: none;
}
.tour-item>summary {
  display: none;
}
.tour-item {
  min-width: 0;
  position: relative;
}
@media (min-width: 701px) {
  .tour-item::details-content {
    height: 100%;
  }
}
.tour-card {
  background: var(--cream);
  border: 1px solid var(--red);
  border-radius: 4px;
  overflow: hidden;
  color: var(--ink);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.tour-image {
  position: relative;
}
@media (hover: hover) and (pointer: fine) and (min-width: 701px) {
  .tour-card {
    transition: transform 200ms ease, box-shadow 200ms ease;
  }
  .tour-item:hover,.featured-tour:hover {
    z-index: 1;
  }
  .tour-item:hover .tour-card,.featured-tour:hover {
    transform: scale(1.025);
    box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
  }
}
.tour-image img {
  width: 100%;
  aspect-ratio: 426 / 320;
}
.tour-price {
  position: absolute;
  top: 16px;
  right: 16px;
  max-width: calc(100% - 32px);
  padding: 5px 12px;
  background: white;
  color: var(--ink);
  font-size: 14px;
  text-align: center;
}
.tour-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: start;
  padding: 24px;
  gap: 18px;
}
.tour-card h3 {
  font-size: 25px;
}
.tour-tagline {
  border-bottom: 1px solid #b5b3a8;
  padding-bottom: 16px;
  width: 100%;
  font-size: 14px;
}
.tour-card-body p+p {
  margin: 0;
}
.tour-inclusions {
  font-size: 14px;
}
.tour-inclusions summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tour-inclusions summary svg {
  width: 16px;
  height: 16px;
  transition: transform 150ms ease;
}
.tour-inclusions[open] summary svg {
  transform: rotate(90deg);
}
.tour-inclusions p {
  margin: 8px 0;
}
.tour-card-actions {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin-top: auto;
  width: 100%;
}
.tour-offer {
  background: var(--red-text);
  color: var(--yellow);
  padding: 3px 6px;
  font-size: 12px;
  line-height: 1.5;
  text-transform: uppercase;
}
.tour-card-actions>.button {
  background: var(--button-yellow);
  color: var(--red-text);
}
.featured-tour {
  position: relative;
}
.tour-break {
  display: flex;
  justify-content: flex-end;
  padding: 24px 0;
}
.tour-more {
  border-color: var(--red);
  color: var(--red);
}
.tour-inclusions ul {
  padding-left: 20px;
}
.tour-card-body .button {
  margin-top: auto;
  background: var(--button-yellow);
  color: var(--red-text);
}
/* Book Now and Enquire Now share a row and wrap once the card gets narrow. */
.tour-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
}
.tour-buttons .button {
  margin-top: 0;
}
/* Book Now stays yellow; Enquire Now is white with red. Both need to outrank
   the blanket yellow that .tour-card-body .button puts on card buttons. */
.tour-buttons .button-outline {
  background: white;
  color: var(--red-text);
}
.tour-buttons .button-outline:hover {
  background: var(--cream);
}
.contact-section {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 100px;
}
.contact-section>div:first-child p {
  max-width: 290px;
  margin-top: 20px;
}
/* The form wireframes set "Book a tour." and "We've got the answers." larger
   than the contact page's heading, so they carry the column on their own. */
.form-intro>div:first-child h2 {
  font-size: 40px;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 28px 40px;
}
.contact-form label {
  display: grid;
  gap: 10px;
  font-size: 14px;
}
.contact-form input,.contact-form textarea {
  width: 100%;
  padding: 8px 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--red-text);
  border-radius: 0;
  min-height: 44px;
  font-size: 16px;
}
.contact-form textarea {
  resize: vertical;
  min-height: 110px;
}
.contact-form>label {
  margin-top: 32px;
}
.contact-form>.button {
  margin-top: 36px;
}
/* The spam trap: off-screen rather than display:none, which some bots skip. */
.botcheck {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.form-status {
  font-size: 14px;
  color: var(--ink);
  margin-top: 20px;
}
.form-status:empty {
  display: none;
}
/* What the guest is about to be charged, shown before they leave for Stitch. */
.deposit-note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  margin: 4px 0 0;
  font-weight: 600;
}
.deposit-note[hidden] {
  display: none;
}
/* Which booking this was, named back to the guest on the confirmation page. */
.booking-reference {
  padding: 12px 16px;
  border-left: 3px solid var(--red, currentColor);
  background: rgb(0 0 0 / 4%);
  line-height: 1.6;
}
.booking-reference code {
  font-size: 13px;
  word-break: break-all;
}
/* The tour forms: every label starts on its own line, as the wireframes draw
   them, and lifts clear once the guest types. Dates and selects float from the
   start so the native control is never hidden behind the label. */
.line-form label {
  display: block;
  position: relative;
  gap: 0;
}
.line-form label>span {
  position: absolute;
  left: 0;
  top: 10px;
  font-size: 16px;
  pointer-events: none;
  transform-origin: left top;
  transition: transform 150ms ease;
}
.line-form label.is-floated>span,.line-form label.has-value>span,.line-form label:focus-within>span {
  transform: translateY(-18px) scale(0.875);
}
.line-form select {
  width: 100%;
  padding: 8px 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--red-text);
  border-radius: 0;
  min-height: 44px;
  font-size: 16px;
}
.line-form>label {
  margin-top: 42px;
}
.form-confirmation p {
  font-size: 28px;
  line-height: 1.4;
  max-width: 900px;
  margin: 0 auto;
  padding: 60px 0;
}
.form-confirmation:focus {
  outline: none;
}
.contact-details {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 20px;
  margin-top: 80px;
}
.contact-details a {
  display: flex;
  gap: 10px;
  align-items: start;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.contact-details strong {
  display: block;
  margin-bottom: 12px;
}
.contact-details svg {
  width: 20px;
  color: var(--red);
}
.map-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 50px;
  align-items: end;
}
/* Flatten the panel so the copy can line up with the bottom of the map itself,
   rather than with the Google Maps link underneath it. */
.map-panel {
  display: contents;
}
.map-canvas {
  grid-column: 1;
  grid-row: 1;
}
.map-tools {
  grid-column: 1;
  grid-row: 2;
}
.map-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.1;
  border: 0;
  background: var(--cream);
}
/* Leaflet ships its own type and link colours; keep the map in the site's voice. */
.map-canvas .leaflet-container {
  font: inherit;
}
.map-canvas .map-pin {
  background: none;
  border: 0;
}
/* Presentation attributes do not take custom properties everywhere, so style the path here. */
.map-canvas .map-pin path {
  fill: var(--red);
  stroke: var(--cream);
  stroke-width: 1.1;
}
.map-canvas .leaflet-control-attribution {
  font-size: 11px;
}
.map-failed::after {
  content: "The map could not load. Use the link below for directions.";
  display: grid;
  place-content: center;
  height: 100%;
  padding: 24px;
  text-align: center;
  color: var(--red-text);
}
.map-copy {
  grid-column: 2;
  grid-row: 1;
}
.map-copy p {
  font-size: 20px;
  max-width: 520px;
}
.map-copy .text-link {
  margin-top: 20px;
}
.map-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 12px;
}
.map-tools .text-link {
  font-size: 14px;
}
.map-reload {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid currentColor;
  background: transparent;
  font-size: 14px;
}
.booking-handoff p {
  max-width: 560px;
  margin-top: 20px;
}
.booking-page>h1 {
  margin-bottom: 70px;
}
.page-heading {
  max-width: 900px;
  margin-bottom: 60px;
}
.page-heading h1 {
  margin: 14px 0 24px;
}
.eyebrow {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
}
.live-gallery-grid {
  columns: 3;
  column-gap: 18px;
}
.live-gallery-grid figure {
  break-inside: avoid;
  margin: 0 0 18px;
}
.live-gallery-grid img {
  width: 100%;
  height: auto;
}
.blog-article {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
}
.blog-article img {
  width: 100%;
  aspect-ratio: 4 / 5;
}
.blog-article h2 {
  margin: 18px 0 30px;
}
.blog-article p {
  color: var(--ink);
}
.neighbourhood-image {
  width: 100%;
  max-height: 570px;
  object-position: center 60%;
}
.neighbourhood-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 45px;
  margin-top: 50px;
}
.neighbourhood-grid h2 {
  font-size: 26px;
  margin-bottom: 22px;
}
.footer {
  background: var(--red);
  color: var(--yellow);
}
.footer .footer-links a:hover,.footer .footer-contact a:hover {
  background: var(--yellow);
  color: var(--red);
}
.footer-yellow {
  background: var(--yellow);
  color: var(--red-text);
}
.footer-yellow .footer-links a:hover,.footer-yellow .footer-contact a:hover {
  background: var(--red);
  color: var(--yellow);
}
.footer-top {
  display: grid;
  grid-template-columns: 3.2fr 1fr 1fr;
  gap: 40px;
}
.footer-brand {
  align-self: start;
}
.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  column-gap: 25px;
}
.footer-links>div {
  min-width: 0;
}
.footer-links a,.footer-contact a {
  font-size: 14px;
  padding: 6px 8px;
  margin: 0 -8px;
  /* Block, so each sits on its own line, but only as wide as its own text. */
  display: block;
  width: fit-content;
}
.footer-contact {
  overflow-wrap: anywhere;
  justify-self: end;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  margin-top: 120px;
}
.footer-bottom small {
  font-size: 13px;
}
.footer-bottom a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
.hero[data-page="/contact"],.hero[data-page="/book-tour"],.hero[data-page="/enquire"] {
  aspect-ratio: 1440 / 709;
}
/* Both form photos are portrait, so the crop is nudged to keep the subject in. */
.hero[data-page="/book-tour"] .hero-image {
  object-position: center 74%;
}
.hero[data-page="/enquire"] .hero-image {
  object-position: center 61%;
}
.hero[data-page="/terms"] {
  aspect-ratio: 1440 / 540;
}
.hero[data-page="/terms"] .hero-image {
  object-position: center 48%;
}
.terms-content {
  color: var(--red-deep);
}
.terms-content .section-heading {
  grid-template-columns: 3fr 2fr;
}
.terms-content .section-heading h2 {
  text-transform: uppercase;
  line-height: 1.4;
}
.terms-content .faq-category>summary {
  text-transform: uppercase;
  font-size: 20px;
}
.terms-closing {
  margin-top: 60px;
  line-height: 1.4;
}
.hero[data-page="/rooms"] .hero-image {
  object-position: center 63.3%;
}
.hero[data-page="/rooms/female-dorm"] .hero-image {
  object-position: center 22%;
}
@media(max-width:1050px) {
  h1 {
    font-size: 44px;
  }
  h2 {
    font-size: 28px;
  }
  .section-pad {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .nav,.site-header {
    gap: 16px;
  }
  .booking-search {
    grid-template-columns: 160px 160px 100px auto;
  }
  .booking-search .code-field {
    display: none;
  }
  .section-heading {
    gap: 40px;
  }
  .adventure-grid {
    gap: 1.3888889vw;
  }
  .contact-section {
    gap: 45px;
  }
  .form-intro>div:first-child h2 {
    font-size: 34px;
  }
  .contact-details {
    grid-template-columns: 1fr;
    margin-top: 45px;
  }
  .contact-details strong {
    margin-bottom: 4px;
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 35px;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
  .footer-brand img {
    height: 76px;
  }
  .tour-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media(max-width:700px) {
  :root {
    --gutter: 16px;
  }
  h1,.home-hero h1 {
    font-size: 32px;
  }
  h2 {
    font-size: 25px;
  }
  h3 {
    font-size: 23px;
  }
  .section-pad {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .announcement {
    gap: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .announcement span {
    max-width: 190px;
    font-size: 12px;
    line-height: 1.35;
  }
  .brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .announcement a {
    min-height: 44px;
    justify-content: center;
    padding: 7px 12px;
    font-size: 12px;
    white-space: normal;
    text-align: center;
  }
  .announcement svg {
    display: none;
  }
  .site-header,.site-header.over-hero {
    background: var(--cream);
    color: var(--red-text);
    margin-bottom: 0;
    min-height: 76px;
    padding-top: 14px;
    padding-bottom: 14px;
    gap: 12px;
  }
  .brand {
    font-size: 25px;
  }
  .book-link {
    padding: 9px 13px;
    min-height: 44px;
    font-size: 13px;
  }
  .menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    flex-shrink: 0;
  }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    color: var(--red-text);
    box-shadow: 0 12px 18px rgb(0 0 0 / 12%);
    padding: 16px 20px 24px;
    max-height: 75svh;
    overflow-y: auto;
    border-top: 1px solid currentColor;
  }
  .nav.nav-open {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 20px;
  }
  .nav a {
    min-height: 44px;
    padding: 10px 6px;
  }
  .nav .contact-link {
    background: transparent;
    border: 0;
    padding: 10px 6px;
  }
  .over-hero .nav .active {
    background: transparent;
    color: var(--red-text);
  }
  .nav-item.has-menu {
    display: contents;
  }
  .nav-menu {
    position: static;
    display: flex;
    grid-column: 1 / -1;
    min-width: 0;
    padding: 0 0 0 18px;
    border: 0;
    background: none;
  }
  .nav-menu a {
    min-height: 44px;
    padding: 10px 6px;
    display: flex;
    align-items: center;
  }
  .mobile-extra {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column: 1 / -1;
    gap: 8px 20px;
    border-top: 1px solid currentColor;
    padding-top: 12px;
  }
  .hero,.hero[data-page="/contact"],.hero[data-page="/book-tour"],.hero[data-page="/enquire"] {
    min-height: 0;
    height: auto;
    max-height: none;
    aspect-ratio: 375 / 300;
  }
  .hero-inner {
    padding: 48px var(--gutter) 36px;
  }
  .hero-image {
    object-position: center;
  }
  .hero h1 {
    line-height: 1.4;
  }
  .home-hero {
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 375 / 550;
  }
  .home-hero .hero-inner {
    padding: 32px var(--gutter);
  }
  .hero-description p,.home-hero .hero-description p {
    font-size: 16px;
    text-align: left;
    line-height: 1.55;
    margin-bottom: 28px;
  }
  .home-hero h1 {
    text-align: left;
    margin-bottom: 20px;
    font-size: 26px;
  }
  .booking-search {
    grid-template-columns: repeat(2,minmax(0,1fr));
    width: 100%;
    gap: 10px;
    border-radius: 24px;
    padding: 12px;
  }
  .booking-search label {
    min-width: 0;
    padding: 9px 12px;
    border-radius: 14px;
  }
  .booking-search .code-field {
    display: grid;
  }
  .booking-search .button {
    grid-column: 1 / -1;
    border-radius: 22px;
    min-height: 48px;
  }
  .booking-search input,.booking-search select {
    font-size: 16px;
  }
  .tour-hero:not(.home-hero) {
    height: auto;
    max-height: none;
    min-height: 0;
    aspect-ratio: 375 / 300;
  }
  .tour-hero:not(.home-hero) .hero-inner {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .tour-hero .actions {
    margin-top: 20px;
  }
  .section-heading {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-bottom: 38px;
  }
  .section-heading h2+p {
    margin-top: 18px;
  }
  .home-intro {
    padding-top: 36px;
    padding-bottom: 24px;
  }
  .home-intro>p {
    font-size: 16px;
    margin-bottom: 24px;
  }
  .home-photo-wide img {
    aspect-ratio: 343 / 200;
  }
  .home-photo-pair {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 24px;
  }
  .home-photo-pair img,.home-photo-pair figure:last-child img {
    aspect-ratio: 163 / 200;
  }
  .home-photo-pair figcaption {
    font-size: 12px;
    margin-top: 12px;
  }
  .featured-tours {
    padding-top: 24px;
  }
  .featured-heading {
    flex-direction: column;
    gap: 18px;
    margin-bottom: 28px;
  }
  .featured-tour-grid.tour-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hero[data-page="/terms"] {
    aspect-ratio: 375 / 260;
  }
  .terms-content .section-heading {
    grid-template-columns: 1fr;
  }
  .terms-sections h3 {
    font-size: 18px;
  }
  .terms-closing {
    margin-top: 36px;
  }
  .photo-carousel {
    padding: 0 0 28px;
    background: var(--yellow);
  }
  .photo-strip {
    grid-auto-columns: 50vw;
    gap: 10px;
  }
  .photo-strip img {
    height: auto;
    aspect-ratio: 187.5 / 200;
  }
  .adventure-section {
    background: var(--cream);
  }
  .adventure-section>.scroll-controls {
    display: flex;
  }
  .adventure-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 88%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 15px;
  }
  .adventure-grid article {
    scroll-snap-align: start;
    background: #fff9e5;
    border: 1px solid var(--blue);
    border-radius: 4px;
    padding: 20px;
  }
  .adventure-grid img {
    display: none;
  }
  .testimonials .section-heading>h2 {
    display: none;
  }
  .testimonials .section-heading {
    margin-bottom: 24px;
  }
  .review-track {
    grid-auto-columns: 88%;
    gap: 16px;
  }
  .review {
    padding: 24px;
    min-height: 350px;
  }
  .faqs .section-heading {
    margin-bottom: 50px;
  }
  .faq-category>summary {
    font-size: 19px;
    min-height: 72px;
    padding: 18px 0;
    gap: 16px;
  }
  .faq-questions {
    padding: 0 8px 16px;
  }
  .faq-questions summary {
    gap: 12px;
  }
  .faq-questions p {
    padding: 0 10px 20px 0;
  }
  .room-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc(100vw - 32px);
    gap: 10px;
    margin-right: -16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding-bottom: 16px;
  }
  .room-card {
    scroll-snap-align: start;
  }
  .room-card-body {
    padding: 24px;
  }
  .room-card>img,.room-card:nth-child(2)>img {
    aspect-ratio: 343 / 321;
    object-position: center 68%;
  }
  .room-options {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .room-description .section-heading {
    padding-bottom: 35px;
  }
  .room-description .photo-carousel {
    background: inherit;
    padding: 0 16px 32px;
  }
  .room-description .photo-strip {
    grid-auto-columns: calc(100vw - 32px);
    gap: 10px;
  }
  .room-description .photo-strip img {
    aspect-ratio: 343 / 200;
  }
  .amenities {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 16px;
  }
  .amenities>div:not(.amenities-photos) {
    grid-row: 1;
    padding: 0;
  }
  .amenities ol {
    padding-top: 28px;
  }
  .amenities-photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0 1.5px;
  }
  .amenities-photos>img {
    display: block;
    aspect-ratio: 165 / 169;
  }
  .lifestyle-intro {
    font-size: 18px;
    margin-bottom: 30px;
  }
  .lifestyle-wide img {
    aspect-ratio: 343 / 200;
    object-position: center bottom;
  }
  .lifestyle-pair {
    grid-template-columns: 163fr 168fr;
    gap: 12px;
    margin-top: 38px;
  }
  .lifestyle-wide,.lifestyle-pair {
    width: 100%;
  }
  .tours-section {
    padding-right: 16px;
    padding-left: 16px;
  }
  .lifestyle-pair img {
    aspect-ratio: 163 / 170;
  }
  .lifestyle-pair figure:last-child img {
    aspect-ratio: 168 / 170;
  }
  .tour-image img {
    aspect-ratio: 341 / 250;
  }
  .lifestyle figcaption {
    font-size: 13px;
  }
  .tour-grid {
    display: block;
  }
  .tour-item>summary {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    border-bottom: 1px solid currentColor;
    padding: 16px 0;
    font-size: 18px;
    line-height: 1.4;
    min-height: 62px;
  }
  .tour-item[open]>summary {
    border-bottom: 0;
  }
  .tour-item[open] {
    padding-bottom: 20px;
  }
  .tour-card-body {
    padding: 24px;
  }
  .tour-card-body .button {
    width: 100%;
  }
  .tour-card h3 {
    font-size: 25px;
  }
  .tours-section>h2 {
    margin-bottom: 28px;
  }
  .tours-section+.lifestyle {
    display: none;
  }
  .footer-yellow.footer-red-mobile {
    background: var(--red);
    color: var(--yellow);
  }
  .footer-yellow.footer-red-mobile .footer-links a:hover,.footer-yellow.footer-red-mobile .footer-contact a:hover {
    background: var(--yellow);
    color: var(--red);
  }
  .contact-section {
    grid-template-columns: 1fr;
    gap: 42px;
  }
  .form-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .contact-form>label {
    margin-top: 25px;
  }
  .line-form>label {
    margin-top: 34px;
  }
  .form-confirmation p {
    font-size: 20px;
    padding: 30px 0;
  }
  .contact-details {
    gap: 24px;
  }
  .contact-details a {
    font-size: 16px;
  }
  .map-section {
    grid-template-columns: 1fr;
  }
  .map-section>.map-copy {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 30px;
  }
  .map-canvas {
    grid-row: 2;
  }
  .map-tools {
    grid-row: 3;
  }
  .map-copy p {
    font-size: 18px;
  }
  .map-canvas {
    aspect-ratio: 0.95;
  }
  .booking-page>h1 {
    margin-bottom: 40px;
  }
  .page-heading {
    margin-bottom: 35px;
  }
  .live-gallery-grid {
    columns: 2;
    column-gap: 10px;
  }
  .live-gallery-grid figure {
    margin-bottom: 10px;
  }
  .blog-article {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .blog-article img {
    aspect-ratio: 1.2;
  }
  .neighbourhood-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .footer {
    padding-top: 44px;
    padding-bottom: 28px;
  }
  .footer-top {
    gap: 28px 18px;
    grid-template-columns: 0.85fr 1.15fr;
  }
  .footer-brand img {
    height: 58px;
  }
  .footer-links {
    grid-template-columns: 1fr;
  }
  .footer-contact {
    justify-self: start;
  }
  .footer-contact a {
    font-size: 14px;
  }
  .footer-bottom {
    margin-top: 44px;
    align-items: start;
    flex-direction: column;
    gap: 14px;
  }
}
@media(max-width:360px) {
  :root {
    --gutter: 16px;
  }
  .brand {
    font-size: 22px;
  }
  .book-link {
    font-size: 12px;
    padding: 9px;
  }
  .site-header {
    gap: 6px;
  }
  .footer-brand img {
    height: 50px;
  }
  .booking-search {
    padding: 8px;
    gap: 8px;
  }
  .booking-search label {
    padding: 8px;
  }
  .actions {
    gap: 10px;
  }
  .actions .button {
    padding: 12px 16px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }
  *,*::before,*::after {
    scroll-behavior: auto!important;
    transition: none!important;
  }
}

/* Touch targets are about the input device, not the viewport width.
   A phone in landscape is 844px wide and a tablet is 768-834px, so the
   max-width:700px rules never reach them - but they are still operated
   with a finger. Key the 44px minimum off pointer:coarse instead. */
@media (pointer: coarse) {
  .brand,
  .book-link,
  .announcement a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .announcement a {
    justify-content: center;
  }
}

/* Phones, as drawn in the Figma mobile frames (375px wide). This sits last so it
   settles anything the earlier breakpoints and the touch rules set. */
@media (max-width: 700px) {
  .mobile-only {
    display: block;
  }
  .desktop-only {
    display: none;
  }

  /* Body copy in the frames is 14/21 and justified. */
  .hero-description p,.home-hero .hero-description p,.section-heading p,.home-story>p,.adventure-grid p,
  .room-options p,.lifestyle-intro,.map-copy p,.contact-section>div:first-child p,.tour-card-body>p:not(.tour-tagline) {
    font-size: 14px;
    line-height: 1.5;
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  /* Announcement bar: one compact strip. */
  .announcement {
    min-height: 32px;
    padding: 4px var(--gutter);
    gap: 12px;
  }
  .announcement span {
    max-width: 215px;
    font-size: 10px;
    line-height: 1.25;
  }
  .announcement a {
    position: relative;
    min-height: 22px;
    padding: 3px 10px;
    font-size: 9px;
    white-space: nowrap;
  }
  /* Drawn small, but the tap area still reaches 44px. */
  .announcement a::after {
    content: "";
    position: absolute;
    inset: -11px -6px;
  }

  /* Header: white, wordmark and menu only. */
  .site-header,.site-header.over-hero {
    background: white;
    min-height: 62px;
    padding-top: 9px;
    padding-bottom: 9px;
  }
  .brand img {
    height: 18px;
  }
  .book-link {
    display: none;
  }
  .menu-button {
    color: var(--red);
  }
  .nav {
    background: white;
    border-top: 1px solid var(--red);
  }
  .nav.nav-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .nav.nav-open a {
    margin-left: 0;
    margin-right: 0;
    font-size: 16px;
  }
  .nav-menu {
    flex-direction: column;
    padding-left: 18px;
  }
  .mobile-extra {
    display: contents;
  }
  .mobile-home {
    order: -1;
  }
  .nav .mobile-extra .button {
    align-self: start;
    margin-top: 12px;
    padding: 10px 24px;
    font-size: 14px;
  }

  /* Hero: content centred in the frame. */
  .hero-inner,.home-hero .hero-inner {
    align-self: center;
    padding: 24px var(--gutter);
  }
  .hero h1,.home-hero h1 {
    font-size: 24px;
    line-height: 1.45;
  }
  .home-hero h1 {
    text-align: center;
    margin-bottom: 22px;
  }
  .home-hero .hero-description p {
    margin-bottom: 30px;
  }
  .tour-hero .actions {
    margin-top: 24px;
  }

  /* Buttons are drawn 30px tall on phones. */
  .button,.actions .button {
    min-height: 30px;
    padding: 6px 16px;
    font-size: 12px;
  }

  /* Booking search: stacked pills. */
  .booking-search {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 17px;
    border-radius: 30px;
    background: transparent;
  }
  .booking-search label {
    padding: 0;
    border-radius: 0;
    background: none;
  }
  .booking-dates,.booking-search .guests-field,.booking-search .code-field {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 50px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--cream);
    color: var(--red-text);
  }
  .booking-dates>svg,.booking-search label>svg {
    display: block;
    width: 20px;
    height: 20px;
  }
  .booking-arrow {
    display: flex;
  }
  .booking-arrow svg {
    width: 18px;
    height: 18px;
  }
  .booking-dates label {
    position: relative;
    flex: 1;
    align-self: stretch;
    display: grid;
    place-items: center;
    background: none;
  }
  .booking-dates label>span {
    font-size: 14px;
  }
  /* The picker sits invisibly over its label until a date is chosen. */
  .booking-dates input {
    position: absolute;
    inset: 0;
    height: 100%;
    opacity: 0;
    text-align: center;
    font-size: 16px;
  }
  .booking-dates input::-webkit-date-and-time-value {
    text-align: center;
  }
  .booking-dates label.has-value>span {
    visibility: hidden;
  }
  .booking-dates label.has-value input {
    opacity: 1;
  }
  .booking-search .guests-field>span,.booking-search .code-field>span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .booking-search .guests-field select {
    width: auto;
    -webkit-appearance: none;
    appearance: none;
    font-size: 16px;
  }
  .booking-search .code-field {
    background: transparent;
    border: 1px solid rgb(255 255 255 / 80%);
    color: white;
  }
  .booking-search .code-field input {
    width: 7em;
    flex: none;
    color: white;
    font-size: 16px;
  }
  .booking-search .code-field input::placeholder {
    color: white;
    opacity: 1;
  }
  .booking-search .button {
    min-height: 50px;
    border-radius: 999px;
    font-size: 14px;
  }

  /* Home: the yellow story section. */
  .home-story {
    padding-top: 40px;
    padding-bottom: 32px;
  }
  .home-story h2 {
    line-height: 1.48;
    margin-bottom: 36px;
  }
  .home-story img {
    width: 100%;
  }
  .home-story-wide img {
    aspect-ratio: 343 / 200;
  }
  .home-story>p {
    margin: 22px 0 56px;
  }
  .home-story-pair {
    display: grid;
    grid-template-columns: 186fr 178fr;
    gap: 11px;
    margin: 0 calc(var(--gutter) * -1);
  }
  .home-story-pair img {
    height: 200px;
  }

  /* Choose your own adventure: one card at a time. */
  .adventure-section .section-heading {
    gap: 28px;
    margin-bottom: 40px;
  }
  .adventure-section>.scroll-controls {
    gap: 16px;
    margin-bottom: 30px;
  }
  .adventure-section .scroll-controls button {
    width: 28px;
    height: 28px;
  }
  .adventure-section .scroll-controls svg {
    width: 14px;
    height: 14px;
  }
  .adventure-section .scroll-controls button[data-direction="1"] {
    background: var(--blue);
    border-color: var(--blue);
    color: white;
  }
  .adventure-grid {
    grid-auto-columns: 100%;
    gap: 16px;
  }
  .adventure-grid article {
    padding: 17px;
    background: transparent;
  }
  .adventure-star {
    display: block;
    color: var(--blue);
    margin-bottom: 22px;
  }
  .adventure-star svg {
    width: 33px;
    height: 33px;
  }
  .adventure-grid h3 {
    font-size: 22px;
    margin-bottom: 20px;
  }

  /* Testimonials: full-width cards with stars, the button on the right. */
  .testimonials>.scroll-controls {
    display: none;
  }
  .testimonials .section-heading>div {
    display: grid;
  }
  .testimonials .review-link {
    justify-self: end;
    width: 119px;
    margin-top: 26px;
  }
  .testimonials .section-heading {
    margin-bottom: 30px;
  }
  /* One card per swipe; the loop's duplicates only serve desktop's drift. */
  .review-track,.photo-strip {
    scroll-snap-type: x mandatory;
  }
  .review,.photo-strip>img {
    scroll-snap-align: start;
  }
  [data-carousel]>[aria-hidden="true"] {
    display: none;
  }
  .review-track {
    grid-auto-columns: 100%;
    gap: 16px;
  }
  .review {
    min-height: 398px;
    padding: 31px;
    border-color: var(--yellow);
    border-radius: 5px;
  }
  .review blockquote {
    margin-top: auto;
  }
  .review figcaption {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    margin-top: 36px;
  }
  .review figcaption>strong,.review figcaption>span:not(.review-stars) {
    grid-column: 1;
  }
  .review-stars {
    display: flex;
    gap: 4px;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    color: var(--yellow);
  }
  .review-stars svg {
    width: 20px;
    height: 20px;
  }
  .review.review-selected .review-stars,.review:hover .review-stars {
    color: var(--red);
  }

  /* FAQs. */
  .faqs .section-heading {
    gap: 22px;
    margin-bottom: 110px;
  }
  .faqs .section-heading h1,.faqs .section-heading h2 {
    font-size: 36px;
  }
  .faqs .section-heading p {
    font-size: 17px;
    line-height: 1.6;
    text-align: left;
  }
  .faq-category>summary {
    font-size: 16px;
    min-height: 79px;
    padding: 16px 10px;
  }

  /* Rooms: the lifestyle section gets its heading. */
  .lifestyle-heading {
    color: var(--red-text);
    line-height: 1.48;
    margin-bottom: 36px;
  }

  /* Room pages: no booking button in the frames, so no room left for one. */
  .room-description .button {
    display: none;
  }
  .room-description .section-heading {
    margin-bottom: 0;
    padding-bottom: 36px;
  }
  .amenities li {
    font-size: 14px;
  }

  /* Tours: every tour in one list, chevrons, the offer over the photo. */
  .tour-break {
    display: none;
  }
  .tour-grid#more-adventures[hidden] {
    display: block;
  }
  .tour-item>summary {
    min-height: 35px;
    padding: 6px 0;
    font-size: 16px;
    border-bottom: 2px solid var(--red);
  }
  .tour-item>summary>span,.tour-item[open]>summary>span {
    display: flex;
    justify-content: center;
    width: 20px;
    flex-basis: 20px;
    transform: rotate(90deg);
  }
  .tour-item>summary svg {
    width: 20px;
    height: 20px;
  }
  .tour-item[open]>summary {
    margin-bottom: 16px;
  }
  .tour-item[open] {
    padding-bottom: 30px;
  }
  .tour-inclusions {
    display: none;
  }
  .tour-card {
    position: relative;
  }
  /* Centred on the photo, which is the card's inner width at 341:250. */
  .tour-offer {
    position: absolute;
    left: 50%;
    top: calc((100vw - var(--gutter) * 2 - 2px) * 125 / 341);
    transform: translate(-50%,-50%);
    white-space: nowrap;
    font-size: 14px;
    padding: 2px 6px;
  }
  .tour-card-body {
    padding: 33px 17px 17px;
  }
  .tour-card h3 {
    font-size: 22px;
  }
  .tour-tagline {
    font-size: 14px;
  }

  /* Contact. */
  .contact-section>div:first-child h2 {
    font-size: 36px;
  }
  .contact-section>div:first-child p {
    max-width: 300px;
  }
  /* Each label sits just above its line, as drawn. */
  .contact-form label {
    gap: 0;
  }
  .form-grid {
    gap: 36px;
  }
  .contact-form>label {
    margin-top: 36px;
  }
  .contact-form input {
    min-height: 32px;
    padding: 4px 0;
  }
  .contact-form textarea {
    min-height: 0;
    height: 72px;
  }
  /* The shorter phone fields move the floating label up with them. */
  .line-form select {
    min-height: 32px;
    padding: 4px 0;
  }
  .line-form label>span {
    top: 5px;
  }
  .line-form label.is-floated>span,.line-form label.has-value>span,.line-form label:focus-within>span {
    transform: translateY(-16px) scale(0.875);
  }
  .line-form>label {
    margin-top: 40px;
  }
  .contact-form>.button {
    width: 200px;
    min-height: 44px;
    margin-top: 50px;
    font-size: 14px;
  }
  .contact-details {
    gap: 20px;
    margin-top: 60px;
  }
  .contact-details svg {
    display: none;
  }
  .contact-details a {
    font-size: 14px;
  }
  .contact-details a>span {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    text-align: right;
  }
  .contact-details strong {
    flex: none;
    margin: 0;
    font-weight: 400;
    text-align: left;
  }
  .map-canvas {
    aspect-ratio: 343 / 400;
  }

  /* Footer: Rooms, Tours, Contact Us, and a full-width wordmark. */
  .footer-links .footer-home {
    display: none;
  }
  /* The address column sizes to its line, as drawn, so it doesn't wrap. */
  .footer-top {
    grid-template-columns: 1fr auto;
    column-gap: 16px;
  }
  .footer-brand img {
    width: 100%;
    max-width: 324px;
    height: auto;
  }
}