/* Home page design aligned with the Saint Martin reference. */
.aruba-home {
  --ink: #102e38;
  --coral: #d95d36;
  --paper: #faf9f5;
  --home-sans: 'DM Sans', Arial, sans-serif;
  --home-serif: 'Playfair Display', Georgia, serif;
  background: var(--paper);
  font: 18px/1.75 var(--home-sans);
}
.aruba-home .wrap {
  width: calc(100% - 100px);
  max-width: 1250px;
  padding-inline: 0;
}
.aruba-home .top { padding-inline: 50px; background: var(--paper); }
.aruba-home .top .brand { font-size: 18px; line-height: 1.2; }
.aruba-home .top .brand small { font-size: 11px; }
.aruba-home .top nav { font-size: 16px; }
.aruba-home .nav-cta {
  padding: 12px 20px;
  border: 0;
  border-radius: 3px;
  color: white;
  background: var(--coral);
  font-size: 16px;
  font-weight: 600;
}
.aruba-home .nav-cta b { color: inherit; }
.aruba-home .eyebrow, .aruba-home .fleet .eyebrow {
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: 2.5px;
}
.aruba-home .button {
  gap: 30px;
  border-radius: 3px;
  padding: 16px 25px;
  font: 600 16px/1.75 var(--home-sans);
}
.aruba-home section[id] { scroll-margin-top: 88px; }

.aruba-home .hero {
  display: flex;
  align-items: center;
  min-height: 610px;
  height: auto;
  padding: 55px 7.5% 85px;
}
.aruba-home .hero-img { object-position: center 55%; }
.aruba-home .hero::before {
  background: linear-gradient(90deg, #051e2ecc, #051e2e59 57%, #051e2e0a);
}
.aruba-home .hero-inner { padding: 0; max-width: 760px; }
.aruba-home .hero .eyebrow { color: #f4d6b4; }
.aruba-home .hero h1 {
  font: 400 clamp(46px, 5.1vw, 72px)/1.1 var(--home-serif);
  letter-spacing: -1.6px;
  margin: 20px 0 25px;
}
.aruba-home .hero p {
  max-width: 560px;
  color: #e8eef0;
  font-size: 18px;
  line-height: 1.8;
  margin: 0 0 30px;
}
.aruba-home .hero .button { margin: 0; }
.aruba-home .hero .textlink { font-size: 16px; }
.aruba-home .hero-bottom { left: 7.5%; right: 7.5%; font-size: 11px; }

.aruba-home .finder {
  display: grid;
  grid-template-columns: 1fr 230px 210px;
  align-items: center;
  gap: 35px;
  padding: 30px 35px;
  background: white;
  border-bottom: 1px solid var(--line);
}
.finder h2 { font: 500 23px var(--home-serif); letter-spacing: -.5px; margin: 5px 0; }
.finder label { border-left: 1px solid var(--line); padding-left: 30px; font-size: 13px; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; }
.finder select { display: block; width: 100%; padding: 9px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: 16px/1.5 var(--home-sans); }
.finder .button { justify-content: space-between; margin: 0; }
.aruba-home .assurances { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 35px; font-size: 15px; padding: 25px 0; color: #52686a; }
.assurances span::before { content: '✓'; margin-right: 10px; color: #38796c; }

.intro-band { background: #eaf0ec; padding: 75px 0; }
.aruba-home .intro { padding-block: 0; align-items: start; gap: 8%; grid-template-columns: .85fr 1.15fr; }
.aruba-home .intro h2, .aruba-home .section-head h2, .aruba-home .stories h2 {
  font: 500 44px/1.16 var(--home-serif);
  letter-spacing: -1.3px;
  margin: 8px 0 0;
}
.aruba-home .intro p { font-size: 18px; line-height: 1.8; }
.intro-copy p + p { margin-top: 16px; }
.intro-link { display: inline-block; margin-top: 20px; color: var(--sea); font-size: 16px; font-weight: 600; }
.aruba-home .fleet { background: transparent; padding: 90px 0 24px; }
.aruba-home .section-head { gap: 50px; margin-bottom: 32px; }
.aruba-home .section-head > p { max-width: 400px; margin: 0 0 4px; font-size: 17px; line-height: 1.75; color: #52686a; }
.fleet-count { margin: 0 0 18px; color: #52686a; font-size: 15px; }
.aruba-home .boat-grid { gap: 26px; }
.aruba-home .comparison-boat[hidden] { display: none; }
.aruba-home .comparison-boat .boat-image img { height: 250px; }
.aruba-home .comparison-boat h3 { font: 500 20px/1.4 var(--home-sans); }
.aruba-home .boat-details-button { padding: 10px 14px; }

.aruba-home .book, .aruba-home .guide { color: var(--ink); background: transparent; padding: 24px 0 70px; }
.aruba-home .book-inner { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 30px; }
.aruba-home .book form, .booking-contact { padding: 28px; border: 1px solid var(--line); border-radius: 5px; background: white; }
.booking-contact { background: var(--ink); color: white; }
.aruba-home .book h3 { font: 500 22px/1.4 var(--home-sans); margin: 0; }
.aruba-home .book label { font-size: 15px; letter-spacing: 0; }
.aruba-home .book input, .aruba-home .book select, .aruba-home .book textarea { font: 16px/1.5 var(--home-sans); }
.aruba-home .book form #form-message { font-size: 14px; line-height: 1.7; }
.aruba-home .book .contact { font-size: 16px; margin-top: 16px !important; overflow-wrap: anywhere; }
.aruba-home .guide-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 36px; }
.guide-photo { min-height: 485px; position: relative; overflow: hidden; border-radius: 4px; background: var(--ink); }
.guide-photo img, .guide-photo::after { position: absolute; inset: 0; width: 100%; height: 100%; }
.guide-photo img { object-fit: cover; object-position: 60% center; }
.guide-photo::after { content: ''; background: linear-gradient(transparent 35%, #082b3ddd); }
.guide-photo > div { position: absolute; inset: auto 30px 30px; z-index: 1; color: white; }
.guide-photo h3 { font: 400 32px/1.2 var(--home-serif); margin: 0; }
.guide-topics details { border-block-start: 1px solid var(--line); padding: 15px 0; }
.guide-topics summary { cursor: pointer; font-size: 18px; font-weight: 600; }
.guide-topics p { font-size: 18px; line-height: 1.8; margin: 12px 0; }
.guide-topics .guide-note { color: #52686a; font-size: 15px; }
.stories-band { background: #eaf0ec; }
.aruba-home .stories { padding-block: 75px; }
.aruba-home .quotes { gap: 45px; margin-top: 40px; }
.aruba-home .quotes blockquote { padding: 20px 0 0; background: transparent; border-top: 1px solid #cad6d0; font: 400 21px/1.6 var(--home-serif); }
.aruba-home .quotes cite { font: 14px/1.75 var(--home-sans); }

@media (min-width: 1600px) {
  .aruba-home .hero { padding-left: calc(50% - 625px); min-height: 690px; }
}
@media (max-width: 1050px) {
  .aruba-home .wrap { width: calc(100% - 60px); }
  .aruba-home .hero { padding-left: 6%; min-height: 580px; }
  .aruba-home .finder { grid-template-columns: 1fr 200px 200px; gap: 20px; }
  .aruba-home .section-head { gap: 30px; }
  .aruba-home .comparison-boat .boat-image img { height: 200px; }
}
@media (max-width: 800px) {
  .aruba-home .top { padding-inline: 20px; }
}
@media (max-width: 760px) {
  .aruba-home .wrap { width: calc(100% - 40px); }
  .aruba-home .hero { min-height: 570px; padding: 45px 25px 100px; }
  .aruba-home .hero-img { object-position: 59% center; }
  .aruba-home .hero h1 { font-size: 44px; letter-spacing: -1px; }
  .aruba-home .hero p, .aruba-home .intro p, .guide-topics p { font-size: 17px; }
  .aruba-home .hero .textlink { display: block; margin: 14px 0 0; }
  .aruba-home .hero-bottom { left: 25px; right: 25px; gap: 14px; font-size: 9px; }
  .aruba-home .finder { grid-template-columns: 1fr; gap: 18px; padding: 25px 20px; }
  .finder label { padding-left: 0; border: 0; }
  .aruba-home .assurances { gap: 10px 20px; font-size: 14px; }
  .intro-band, .aruba-home .stories { padding-block: 55px; }
  .aruba-home .intro, .aruba-home .book-inner, .aruba-home .guide-inner { grid-template-columns: 1fr; gap: 20px; }
  .aruba-home .intro h2, .aruba-home .section-head h2, .aruba-home .stories h2 { font-size: 36px; }
  .aruba-home .fleet { padding-top: 60px; }
  .aruba-home .section-head { display: block; margin-bottom: 25px; }
  .aruba-home .section-head > p { margin-top: 15px; }
  .aruba-home .boat-grid { gap: 25px; }
  .aruba-home .comparison-boat .boat-image img { height: 260px; }
  .guide-photo { min-height: 320px; }
  .aruba-home .quotes { gap: 30px; }
}
