/* General Styles */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background-color: #f9f9f9; color: #333; line-height: 1.6; }

/* Navbar */
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 5%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 1000; gap: 12px; }
/* Make logo text look playful with a rounded display font while preserving link behavior and accessibility */
.logo { display: flex; align-items: center; font-weight: 700; font-size: 1.9rem; color: #333; font-family: 'Slackey', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; letter-spacing: 0.5px; text-shadow: 0 1px 0 rgba(0,0,0,0.03); text-decoration: none; flex: 1 1 auto; min-width: 0; }
.logo span { font-family: 'Slackey', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; white-space: nowrap; min-width: 0; flex-shrink: 1; }
.logo, .logo:hover, .logo:focus { display: flex; align-items: center; color: inherit; text-decoration: none; }
/* keep an obvious focus ring for keyboard users */
.logo:focus { outline: 3px solid rgba(0,74,153,0.15); border-radius: 6px; }
.logo-img { height: 64px; margin-right: 12px; flex-shrink: 0; }

.nav-toggle { display: none; align-items: center; justify-content: center; flex-direction: column; gap: 6px; width: 44px; height: 44px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; cursor: pointer; padding: 10px; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.25s ease; margin-left: auto; }
.nav-toggle:hover { box-shadow: 0 6px 14px rgba(0,0,0,0.08); transform: translateY(-1px); }
.nav-toggle:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(0,0,0,0.06); }
.nav-toggle:focus-visible { outline: 3px solid rgba(0,74,153,0.15); outline-offset: 2px; }
.nav-toggle__bar { display: block; width: 24px; height: 3px; background: #1f2937; border-radius: 999px; transition: transform 0.25s ease, opacity 0.2s ease, background-color 0.25s ease; transform-origin: center; }
.nav-toggle[aria-expanded="true"] { background: #f8fafc; box-shadow: 0 8px 18px rgba(0,0,0,0.08); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: #ff5733; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.nav-links { list-style: none; display: flex; align-items: center; }
.nav-links li { margin-left: 20px; }
.nav-links a { text-decoration: none; color: #333; transition: 0.2s ease; padding: 8px 14px; border-radius: 10px; }
.nav-links a:hover,
.nav-links a:focus-visible { background: #f1f5ff; box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-1px); }
.nav-links a:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.cta-nav { background: #ff5733; color: #fff !important; padding: 8px 15px; border-radius: 5px; }

/* Responsive tweak: stacked menu with hamburger on small/medium screens */
@media (max-width: 1280px) {
  .navbar { flex-wrap: wrap; align-items: center; gap: 10px; padding: 15px 5%; }
  .logo { order: 1; flex: 1 1 auto; }
  .nav-toggle { display: inline-flex; order: 2; }
  .nav-links { order: 3; width: 100%; display: none; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; padding: 8px 0; margin: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 10px 24px rgba(0,0,0,0.06); }
  .nav-links.is-open { display: flex; }
  .nav-links li { margin: 0; width: 100%; }
  .nav-links a { width: 100%; display: block; }
  .nav-links a:hover,
  .nav-links a:focus-visible { transform: none; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
}

/* Slightly smaller logo on very small screens */
@media (max-width: 600px) {
  .logo { font-size: 1.15rem; line-height: 1.1; }
  .logo span { max-width: none; overflow: visible; text-overflow: clip; white-space: normal; display: block; }
  .logo-img { height: 44px; }
}

@media (max-width: 520px) {
  .logo { font-size: 1.02rem; line-height: 1.1; }
  .logo span { max-width: none; overflow: visible; text-overflow: clip; white-space: normal; display: block; }
  .logo-img { height: 40px; }
}

/* Hero Section */
.hero { height: 80vh; background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('travel-bg.png'); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; }
.hero-content { display: flex; flex-direction: column; gap: 18px; align-items: center; padding: 0 1rem; max-width: 1100px; }
.hero h1 { font-size: 3.5rem; margin-bottom: 0; line-height: 1.05; }
.hero p { margin: 0; max-width: 820px; }
.highlight { color: #ff5733; }
.btn-primary { background: #ff5733; color: #fff; padding: 15px 30px; text-decoration: none; border-radius: 50px; font-weight: bold; display: inline-block; margin-top: 6px; }

/* Hero responsive tweaks */
@media (max-width: 900px) {
  .hero { height: 70vh; }
  .hero h1 { font-size: 2.4rem; }
}
@media (max-width: 600px) {
  .hero { height: 60vh; }
  .hero h1 { font-size: 1.8rem; }
  .btn-primary { padding: 12px 22px; }
}

/* Puzzle Pieces Section */
.puzzle-section { padding: 90px 8% 100px; background: #f4f7fb; text-align: center; }
.puzzle-section__intro { max-width: 860px; margin: 0 auto 40px; display: grid; gap: 12px; }
.puzzle-section__eyebrow { font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #004a99; font-size: 1.35rem; line-height: 1.2; font-style: italic; }
.puzzle-section__lede { color: #4a5568; font-size: 1.05rem; }

.puzzle-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; align-items: stretch; }
.puzzle-cards a.puzzle-card { color: inherit; text-decoration: none; }
.puzzle-card:focus-visible { outline: 3px solid var(--accent-color, #004a99); outline-offset: 6px; }
.puzzle-card { position: relative; padding: 26px 22px 24px; background: #fff; border-radius: 18px; box-shadow: 0 12px 28px rgba(0,0,0,0.06); border: 2px solid var(--accent-color, rgba(0,0,0,0.03)); display: flex; flex-direction: column; align-items: center; gap: 14px; transition: transform 0.2s ease, box-shadow 0.2s ease; overflow: hidden; }
.puzzle-card::before { display: none; }
.puzzle-card > * { position: relative; z-index: 1; }
.puzzle-card:hover,
.puzzle-card:focus-within { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(0,0,0,0.08); }
.puzzle-card h3 { margin-top: 6px; font-size: 1.3rem; }
.puzzle-card__desc { color: #4a5568; font-size: 0.98rem; text-align: center; min-height: 44px; }
.puzzle-card__image { width: 120px; height: 120px; display: grid; place-items: center; background: var(--accent-soft, rgba(0,74,153,0.08)); border-radius: 50%; border: 2px solid var(--accent-color, #004a99); }
.puzzle-card__image img { max-width: 78%; max-height: 78%; display: block; }

.puzzle-card--cruises { --accent-color: #2cb66f; --accent-soft: rgba(44, 182, 111, 0.14); }
.puzzle-card--cruises::after { content: ""; position: absolute; inset: 0; background: url("home/Trip%20Jig%20Logo%20-%20Cruises%20Background.png") center/cover no-repeat; opacity: 0.28; z-index: 0; }
.puzzle-card--activities { --accent-color: #ff8c42; --accent-soft: rgba(255, 140, 66, 0.16); }
.puzzle-card--activities::after { content: ""; position: absolute; inset: 0; background: url("home/Trip%20Jig%20Logo%20-%20Activities%20Background.png") center/cover no-repeat; opacity: 0.28; z-index: 0; }
.puzzle-card--vacations { --accent-color: #ffc947; --accent-soft: rgba(255, 201, 71, 0.20); }
.puzzle-card--vacations::after { content: ""; position: absolute; inset: 0; background: url("home/Trip%20Jig%20Logo%20-%20Vacations%20Background.png") center/cover no-repeat; opacity: 0.28; z-index: 0; }
.puzzle-card--flights { --accent-color: #2e6bff; --accent-soft: rgba(46, 107, 255, 0.18); }
.puzzle-card--flights::after { content: ""; position: absolute; inset: 0; background: url("home/Trip%20Jig%20Logo%20-%20Flights%20Background.png") center/cover no-repeat; opacity: 0.28; z-index: 0; }

/* Cruises page theme */
.cruise-page { background: radial-gradient(circle at 20% 20%, rgba(44,182,111,0.06), transparent 32%), #f6fbf8; }
.cruise-hero { max-width: 1100px; margin: 70px auto 30px; padding: 40px 28px; display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; background: linear-gradient(135deg, rgba(44,182,111,0.09), rgba(44,182,111,0.02)); border: 2px solid rgba(44,182,111,0.14); border-radius: 18px; box-shadow: 0 14px 36px rgba(0,0,0,0.08); position: relative; overflow: hidden; }
.cruise-hero::after { content: ""; position: absolute; inset: -20% 55% auto -10%; background: url("home/Trip%20Jig%20Logo%20-%20Cruises%20Background.png") center/contain no-repeat; opacity: 0.14; pointer-events: none; }
.cruise-hero__badge { width: 120px; height: 120px; border-radius: 24px; background: rgba(44,182,111,0.12); border: 2px solid rgba(44,182,111,0.35); display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0,0,0,0.06); z-index: 1; }
.cruise-hero__badge img { max-width: 80%; max-height: 80%; }
.cruise-hero__text { display: grid; gap: 8px; z-index: 1; }
.cruise-hero__eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; color: #1f7a4f; font-size: 0.95rem; }
.cruise-hero h1 { font-size: 1.8rem; margin: 0; color: #123826; }
.cruise-hero__lede { max-width: 720px; color: #2f4638; font-size: 1.05rem; }
.cruise-hero__actions { display: flex; justify-content: flex-end; }
.cruise-hero__cta { align-self: center; white-space: nowrap; }

.cruise-links { max-width: 1100px; margin: 40px auto 28px; padding: 14px 10%; }
.cruise-links__intro { display: grid; gap: 8px; margin-bottom: 14px; }
.cruise-links__lede { color: #40524b; font-size: 0.98rem; }
.cruise-links h2 { color: #1f7a4f; }
.cruise-partners__list { list-style: disc; padding-left: 1.2rem; color: #2f4638; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 18px; }
.cruise-link-list { list-style: disc; padding-left: 1.2rem; color: #2f4638; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 18px; }
.cruise-link-list a { color: #1f7a4f; font-weight: 700; text-decoration: none; }
.cruise-link-list a:hover, .cruise-link-list a:focus-visible { text-decoration: underline; }

.activities-page { background: radial-gradient(circle at 20% 20%, rgba(255,140,66,0.06), transparent 32%), #fffaf5; }
.activities-hero { max-width: 1100px; margin: 70px auto 30px; padding: 40px 28px; display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; background: linear-gradient(135deg, rgba(255,140,66,0.12), rgba(255,140,66,0.03)); border: 2px solid rgba(255,140,66,0.18); border-radius: 18px; box-shadow: 0 14px 36px rgba(0,0,0,0.08); position: relative; overflow: hidden; }
.activities-hero::after { content: ""; position: absolute; inset: -20% 55% auto -10%; background: url("home/Trip%20Jig%20Logo%20-%20Activities%20Background.png") center/contain no-repeat; opacity: 0.14; pointer-events: none; }
.activities-hero__badge { width: 120px; height: 120px; border-radius: 24px; background: rgba(255,140,66,0.12); border: 2px solid rgba(255,140,66,0.35); display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0,0,0,0.06); z-index: 1; }
.activities-hero__badge img { max-width: 80%; max-height: 80%; }
.activities-hero__text { display: grid; gap: 8px; z-index: 1; }
.activities-hero__eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; color: #bf5a14; font-size: 0.95rem; }
.activities-hero h1 { font-size: 1.8rem; margin: 0; color: #5a2c10; }
.activities-hero__lede { max-width: 720px; color: #62351a; font-size: 1.05rem; }
.activities-hero__actions { display: flex; justify-content: flex-end; }
.activities-hero__cta { align-self: center; white-space: nowrap; }

.activities-links { max-width: 1100px; margin: 40px auto 28px; padding: 14px 10%; }
.activities-links__intro { display: grid; gap: 8px; margin-bottom: 14px; }
.activities-links__lede { color: #62351a; font-size: 0.98rem; }
.activities-links h2 { color: #bf5a14; }
.activities-list { list-style: disc; padding-left: 1.2rem; color: #62351a; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 18px; }
.activities-link-list { list-style: disc; padding-left: 1.2rem; color: #62351a; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 18px; }
.activities-link-list a { color: #bf5a14; font-weight: 700; text-decoration: none; }
.activities-link-list a:hover, .activities-link-list a:focus-visible { text-decoration: underline; }

@media (max-width: 700px) {
  .activities-hero { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 32px 20px; }
  .activities-hero::after { inset: 30% -30% auto 10%; opacity: 0.1; }
  .activities-hero__badge { margin-bottom: 4px; }
  .activities-links { padding: 14px 6%; }
}

.vacations-page { background: radial-gradient(circle at 20% 20%, rgba(255,201,71,0.08), transparent 32%), #fffbf2; }
.vacations-hero { max-width: 1100px; margin: 70px auto 30px; padding: 40px 28px; display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; background: linear-gradient(135deg, rgba(255,201,71,0.16), rgba(255,201,71,0.04)); border: 2px solid rgba(255,201,71,0.22); border-radius: 18px; box-shadow: 0 14px 36px rgba(0,0,0,0.08); position: relative; overflow: hidden; }
.vacations-hero::after { content: ""; position: absolute; inset: -20% 55% auto -10%; background: url("home/Trip%20Jig%20Logo%20-%20Vacations%20Background.png") center/contain no-repeat; opacity: 0.14; pointer-events: none; }
.vacations-hero__badge { width: 120px; height: 120px; border-radius: 24px; background: rgba(255,201,71,0.16); border: 2px solid rgba(255,201,71,0.38); display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0,0,0,0.06); z-index: 1; }
.vacations-hero__badge img { max-width: 80%; max-height: 80%; }
.vacations-hero__text { display: grid; gap: 8px; z-index: 1; }
.vacations-hero__eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; color: #b18000; font-size: 0.95rem; }
.vacations-hero h1 { font-size: 1.8rem; margin: 0; color: #5a3c00; }
.vacations-hero__lede { max-width: 760px; color: #5a3c00; font-size: 1.05rem; }
.vacations-hero__actions { display: flex; justify-content: flex-end; }
.vacations-hero__cta { align-self: center; white-space: nowrap; }

.vacations-links { max-width: 1100px; margin: 40px auto 28px; padding: 14px 10%; }
.vacations-links__intro { display: grid; gap: 8px; margin-bottom: 14px; }
.vacations-links__lede { color: #654300; font-size: 0.98rem; }
.vacations-links h2 { color: #b18000; }
.vacations-list { list-style: disc; padding-left: 1.2rem; color: #654300; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 18px; }
.vacations-link-list { list-style: disc; padding-left: 1.2rem; color: #654300; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 18px; }
.vacations-link-list a { color: #b18000; font-weight: 700; text-decoration: none; }
.vacations-link-list a:hover, .vacations-link-list a:focus-visible { text-decoration: underline; }

@media (max-width: 700px) {
  .vacations-hero { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 32px 20px; }
  .vacations-hero::after { inset: 30% -30% auto 10%; opacity: 0.1; }
  .vacations-hero__badge { margin-bottom: 4px; }
  .vacations-links { padding: 14px 6%; }
}

.flights-page { background: radial-gradient(circle at 20% 20%, rgba(46,107,255,0.08), transparent 32%), #f7faff; }
.flights-hero { max-width: 1100px; margin: 70px auto 30px; padding: 40px 28px; display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; background: linear-gradient(135deg, rgba(46,107,255,0.14), rgba(46,107,255,0.04)); border: 2px solid rgba(46,107,255,0.18); border-radius: 18px; box-shadow: 0 14px 36px rgba(0,0,0,0.08); position: relative; overflow: hidden; }
.flights-hero::after { content: ""; position: absolute; inset: -20% 55% auto -10%; background: url("home/Trip%20Jig%20Logo%20-%20Flights%20Background.png") center/contain no-repeat; opacity: 0.14; pointer-events: none; }
.flights-hero__badge { width: 120px; height: 120px; border-radius: 24px; background: rgba(46,107,255,0.12); border: 2px solid rgba(46,107,255,0.35); display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0,0,0,0.06); z-index: 1; }
.flights-hero__badge img { max-width: 80%; max-height: 80%; }
.flights-hero__text { display: grid; gap: 8px; z-index: 1; }
.flights-hero__eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; color: #1f4cb8; font-size: 0.95rem; }
.flights-hero h1 { font-size: 1.8rem; margin: 0; color: #12316b; }
.flights-hero__lede { max-width: 760px; color: #12316b; font-size: 1.05rem; }
.flights-hero__actions { display: flex; justify-content: flex-end; }
.flights-hero__cta { align-self: center; white-space: nowrap; }

.flights-links { max-width: 1100px; margin: 40px auto 28px; padding: 14px 10%; }
.flights-links__intro { display: grid; gap: 8px; margin-bottom: 14px; }
.flights-links__lede { color: #12316b; font-size: 0.98rem; }
.flights-links h2 { color: #1f4cb8; }
.flights-list { list-style: disc; padding-left: 1.2rem; color: #12316b; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 18px; }
.flights-link-list { list-style: disc; padding-left: 1.2rem; color: #12316b; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 18px; }
.flights-link-list a { color: #1f4cb8; font-weight: 700; text-decoration: none; }
.flights-link-list a:hover, .flights-link-list a:focus-visible { text-decoration: underline; }

@media (max-width: 700px) {
  .flights-hero { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 32px 20px; }
  .flights-hero::after { inset: 30% -30% auto 10%; opacity: 0.1; }
  .flights-hero__badge { margin-bottom: 4px; }
  .flights-links { padding: 14px 6%; }
}

.logo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; padding: 10px 0; align-items: center; }
.logo-item { background: #fff; border-radius: 12px; padding: 22px; display:flex; align-items:center; justify-content:center; box-shadow: 0 6px 16px rgba(0,0,0,0.06); border: 1px solid rgba(44,182,111,0.16); }
.logo-item img, .logo-item picture { max-width: 220px; max-height: 82px; object-fit: contain; }

@media (max-width: 700px) {
  .cruise-hero { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 32px 20px; }
  .cruise-hero::after { inset: 30% -30% auto 10%; opacity: 0.1; }
  .cruise-hero__badge { margin-bottom: 4px; }
  .cruise-links { padding: 14px 6%; }
}

@media (max-width: 700px) {
  .puzzle-section { padding: 70px 6% 80px; }
  .puzzle-card { padding: 22px 18px 20px; }
  .puzzle-card__image { width: 104px; height: 104px; }
}

/* Puzzle Grid */
.process { padding: 80px 10%; text-align: center; }
.puzzle-grid { display: flex; gap: 30px; margin-top: 50px; flex-wrap: wrap; }
.step { flex: 1; min-width: 250px; padding: 30px; background: #fff; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.icon { font-size: 3rem; margin-bottom: 15px; }

/* Booking Engine Section */
.booking-engine { padding: 50px 10%; background: #eee; text-align: center; }
.iframe-container { margin-top: 30px; height: 600px; width: 100%; background: #fff; border-radius: 10px; overflow: hidden; }
.placeholder-box { display: flex; align-items: center; justify-content: center; height: 100%; color: #999; border: 2px dashed #ccc; }

/* Contact Section */
.contact-section { padding: 100px 10%; background: #ffffff; text-align: center; }
.contact-container { max-width: 800px; margin: 0 auto; }

.contact-section { --form-accent: #004a99; --form-accent-strong: #003a7a; transition: background 0.2s ease; }
.contact-section.contact-theme--cruises { --form-accent: #2cb66f; --form-accent-strong: #23965c; background: radial-gradient(circle at 20% 20%, rgba(44,182,111,0.08), transparent 34%), #f6fbf8; }
.contact-section.contact-theme--activities { --form-accent: #ff8c42; --form-accent-strong: #e4742c; background: radial-gradient(circle at 20% 20%, rgba(255,140,66,0.10), transparent 34%), #fffaf5; }
.contact-section.contact-theme--vacations { --form-accent: #ffc947; --form-accent-strong: #e5b027; background: radial-gradient(circle at 20% 20%, rgba(255,201,71,0.12), transparent 34%), #fffbf2; }
.contact-section.contact-theme--flights { --form-accent: #2e6bff; --form-accent-strong: #1f4cb8; background: radial-gradient(circle at 20% 20%, rgba(46,107,255,0.10), transparent 34%), #f7faff; }

.contact-info {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 0.95rem;
    color: #333;
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.contact-info a { color: #004a99; text-decoration: none; font-weight: 600; }
.contact-info a:hover { text-decoration: underline; }

.contact-form { margin-top: 40px; display: flex; flex-direction: column; gap: 20px; }

.service-tiles { border: 0; padding: 0; margin: 24px 0 8px; text-align: left; }
.service-tiles__legend { font-weight: 800; font-size: 1.05rem; margin-bottom: 10px; color: #004a99; }
.service-tiles__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.service-tile { position: relative; display: grid; gap: 6px; padding: 14px; border: 2px solid #e5e7eb; border-radius: 14px; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,0.05); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; aspect-ratio: 1; min-height: 170px; align-content: start; }
.service-tile input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.service-tile__badge { width: 60px; height: 60px; border-radius: 14px; display: grid; place-items: center; background: var(--tile-soft, #eef2ff); border: 2px solid var(--tile-accent, #004a99); }
.service-tile__badge img { max-width: 72%; max-height: 72%; display: block; }
.service-tile__title { font-weight: 800; color: #111; }
.service-tile__hint { color: #4a5568; font-size: 0.95rem; }
.service-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.07); }
.service-tile.is-selected { border-color: var(--tile-accent, #004a99); box-shadow: 0 12px 26px rgba(0,0,0,0.08); background: #fff; }

.service-followup { margin-top: 8px; text-align: left; display: grid; gap: 8px; }
.service-followup[hidden] { display: none; }

@media (max-width: 960px) {
  .service-tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 540px) {
  .service-tiles__grid { grid-template-columns: 1fr; }
}

.service-tile--cruises { --tile-accent: #2cb66f; --tile-soft: rgba(44,182,111,0.12); }
.service-tile--activities { --tile-accent: #ff8c42; --tile-soft: rgba(255,140,66,0.16); }
.service-tile--vacations { --tile-accent: #ffc947; --tile-soft: rgba(255,201,71,0.20); }
.service-tile--flights { --tile-accent: #2e6bff; --tile-soft: rgba(46,107,255,0.18); }

.form-group { display: flex; gap: 20px; flex-wrap: wrap; }
.form-group input { flex: 1; min-width: 250px; }
.form-field--wide { flex: 1 1 100%; min-width: 100%; }
.form-field--wide input { width: 100%; }

/* Radios should not inherit the form-group flex sizing */
.form-group input[type="radio"] {
  flex: 0 0 auto;
  min-width: 0;
  width: auto;
}

/* Minimal styling for dynamic date UI */
.date-type { display: inline-flex; align-items: center; gap: 4px; }
.date-type .date-prompt { font-weight: 600; margin-right: 4px; }
.radio-inline { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; padding: 0; }
.date-fields { margin-top: 8px; display: block; }
.form-field#date-section { min-width: 140px; width: auto; text-align: left; }
.radio-inline { white-space: nowrap; justify-content: flex-start; width: auto; }
.radio-inline input { margin: 0 6px 0 0; }
.date-type { gap: 6px; }

.date-inline-label { white-space: nowrap; margin-right: 8px; }
#flexible-fields input, #flexible-fields select { margin-right: 12px; }

/* Flatpickr (exact date range picker) - keep colors consistent with site */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #004a99;
  border-color: #004a99;
  color: #fff;
}
.flatpickr-day.inRange {
  background: rgba(0,74,153,0.15);
  border-color: rgba(0,74,153,0.15);
}

input, textarea {
    padding: 15px;
    border: 2px solid #eee;
    border-radius: 8px;
    font-size: 1rem;
    outline: none;
    transition: 0.3s;
}

input:focus, textarea:focus { border-color: #004a99; }

.consent-fieldset { border: 0; margin: 0; padding: 0; }
.consent-option { display: flex; gap: 12px; align-items: flex-start; margin: 8px 0; }
.consent-option input { margin-top: 6px; }
.consent-disclaimer { margin-top: 14px; font-size: 0.9rem; color: #666; max-width: 780px; }

/* Back-compat: keep .opt-in selector for older markup if present */
.opt-in { display: flex; align-items: flex-start; gap: 10px; text-align: left; font-size: 0.85rem; color: #666; }
.opt-in input { margin-top: 4px; }

.email-optin { text-align: left; font-size: 0.95rem; color: #333; }
.email-optin label { display: flex; gap: 10px; align-items: flex-start; }
.email-optin input { margin-top: 4px; width: auto; }
.email-optin__copy { flex: 1; line-height: 1.4; }

.btn-submit {
  background: var(--form-accent, #004a99);
    color: #fff;
    padding: 18px;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.btn-submit:hover { background: var(--form-accent-strong, #003a7a); transform: translateY(-2px); }

/* Mobile Adjustments */
@media (max-width: 600px) {
  .cruise-hero { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 32px 20px; }
}
  .cruise-hero__badge { margin-bottom: 4px; }
  .cruise-hero__actions { width: 100%; justify-content: center; }
.site-footer, footer { padding: 8px 12px; text-align: center; background: #333; color: #fff; font-size: 0.9rem; }
.site-footer .footer-inner { padding: 8px 6%; text-align: center; max-width: 1000px; margin: 0 auto; }
.site-footer a, footer a { color: #fff; text-decoration: underline; }
.site-footer a:hover, footer a:hover { opacity: 0.95; }
.site-footer .legal { margin-top: 4px; font-size: 0.82rem; color: #ccc; line-height: 1.25; }

/* DIY logo-grid (moved from diy.html) */
.logo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px; padding: 30px 10%; align-items: center; }
.logo-item { background: #fff; border-radius: 10px; padding: 24px; display:flex; align-items:center; justify-content:center; box-shadow: 0 4px 10px rgba(0,0,0,0.04); }
.logo-item img, .logo-item svg { max-width: 220px; max-height: 80px; object-fit: contain; display:block; }
.logo-caption { font-size: 0.85rem; color:#666; margin-top:8px; text-align:center; }

@media (max-width: 600px) {
  .logo-grid { grid-template-columns: repeat(1, 1fr); padding: 20px 6%; }
  .logo-item { padding: 18px; }
  .logo-item img, .logo-item svg { max-width: 180px; max-height: 64px; }
}

/* Screen-reader only helper class */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Skip link - visible on keyboard focus */
.skip-link { position: absolute; left: -999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { left: 10px; top: 10px; background: #004a99; color: #fff; padding: 8px 12px; border-radius: 4px; z-index: 10000; width: auto; height: auto; text-decoration: none; }