/* outtaheretravel.ca — rebuilt from the GoDaddy Websites + Marketing theme, October 2026.
   Fonts: Fjalla One (headings, nav, buttons) + Source Sans Pro (text), self-hosted in fonts.css. */

:root {
  --ink: #1b1b1b;          /* body text / dark headings */
  --dark: #161616;         /* header + dark bands */
  --paper: #fff;
  --sky: #e2f2fe;          /* footer + cookie card */
  --slate: #455a64;        /* WhatsApp button */
  --slate-hover: #4f6672;
  --nav: #f7f7f7;          /* nav text on dark */
  --link-dark: #42c4fb;    /* link hover on dark backgrounds */
  --heading: 'Fjalla One', Arial, sans-serif;
  --text: 'Source Sans Pro', Arial, sans-serif;
  --container: 1160px;
  --gutter: 56px;
  --section: 100px;
}
@media (max-width: 767px) { :root { --gutter: 24px; --section: 56px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.5 var(--text); }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
p { margin: 0 0 16px; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 400; }
strong { font-weight: 700; }
.center { text-align: center; }
.left { text-align: left; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; color: #000; padding: 8px 16px; z-index: 100; }
.skip:focus { left: 8px; }

.container { max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; }
.section.slim { padding: 64px 0 var(--section); }

/* ---------- type scale (from the original theme) ---------- */
.section-heading { font: 400 22px/1.4 var(--heading); text-transform: uppercase; letter-spacing: 2px; text-align: center; margin: 0 0 72px; color: var(--ink); }
.section-heading.left { text-align: left; }
.heading-major { font: 400 44px/1.25 var(--heading); text-transform: uppercase; letter-spacing: 2px; text-align: center; margin: 0 0 40px; color: var(--ink); }
.heading-major.left { text-align: left; margin-bottom: 24px; }
.content-heading { font: 400 22px/1.25 var(--text); letter-spacing: 2px; margin: 0 0 16px; color: var(--ink); }
.sub-heading { font: 400 20px/1.3 var(--text); margin: 24px 0 8px; }
.lead { font-size: 18px; max-width: 640px; margin: -32px auto 0; }
.strong { font-weight: 700; }
@media (max-width: 767px) {
  .section-heading { margin-bottom: 40px; }
  .heading-major { font-size: 32px; }
  .content-heading { font-size: 20px; letter-spacing: 1.5px; }
}

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 8px 40px;
  border: 1px solid currentColor; border-radius: 48px; background: transparent; cursor: pointer; text-decoration: none; text-align: center;
  font: 400 16px/1.2 var(--heading); text-transform: uppercase; letter-spacing: 2px; transition: background-color .3s, color .3s, border-color .3s; max-width: 100%; }
.btn-light { color: #fff; }
.btn-light:hover, .btn-light:focus-visible { background: #fff; color: #000; border-color: #fff; }
.btn-dark { color: var(--ink); }
.btn-dark:hover, .btn-dark:focus-visible { background: #000; color: #fff; border-color: #000; }
.btn-solid-light { background: #fff; color: #000; border-color: #fff; }
.btn-solid-light:hover, .btn-solid-light:focus-visible { background: #e9e9e9; border-color: #e9e9e9; }
.btn-solid-dark { background: var(--dark); color: #fff; border-color: var(--dark); }
.btn-solid-dark:hover, .btn-solid-dark:focus-visible { background: #000; border-color: #000; }
.btn-sm { min-height: 40px; padding: 4px 24px; font-size: 14px; }
.btn-wide { min-width: min(680px, 100%); }
.btn-whatsapp { background: var(--slate); color: #fff; border: 0; font: 700 16px/1.2 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: normal; text-transform: none; }
.btn-whatsapp:hover, .btn-whatsapp:focus-visible { background: var(--slate-hover); }
.button-stack { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.button-stack .btn { width: 300px; max-width: 100%; }

/* ---------- header / navigation ---------- */
.site-header { background: var(--dark); color: var(--nav); position: relative; z-index: 20; }
.site-header.is-overlay { position: absolute; top: 0; left: 0; right: 0; background: transparent; }
.nav-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 100px; padding: 0 48px; gap: 24px; }
.logo { font: 400 44px/1.2 var(--heading); text-transform: uppercase; letter-spacing: 2px; color: var(--nav); text-decoration: none; white-space: nowrap; text-align: center; }
.nav { display: flex; align-items: center; gap: 40px; }
.nav-left { justify-self: start; }
.nav-right { justify-self: end; }
.nav-link { position: relative; display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 4px 0; cursor: pointer;
  color: var(--nav); text-decoration: none; font: 400 16px/1.5 var(--heading); text-transform: uppercase; letter-spacing: 2px; white-space: nowrap; transition: opacity .3s; }
.nav-link:hover, .nav-link:focus-visible { opacity: .5; }
.nav-link.active::before { content: ""; display: inline-block; width: 8px; height: 1px; background: currentColor; margin-right: 4px; vertical-align: middle; }
.nav-item { position: relative; }
.sub { position: absolute; top: 100%; left: -24px; min-width: 220px; background: var(--dark); padding: 16px 24px; display: none; flex-direction: column; gap: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.sub a { color: var(--nav); text-decoration: none; font: 400 16px/1.5 var(--heading); text-transform: uppercase; letter-spacing: 2px; white-space: nowrap; }
.sub a:hover, .sub a.active { opacity: .6; }
.nav-item.open .sub, .nav-item:hover .sub, .nav-item:focus-within .sub { display: flex; }
.nav-toggle { display: none; background: none; border: 0; color: var(--nav); padding: 8px; cursor: pointer; justify-self: start; }
.drawer { background: var(--dark); padding: 8px 24px 32px; display: flex; flex-direction: column; gap: 14px; }
.drawer a, .drawer-label { color: var(--nav); text-decoration: none; font: 400 18px/1.4 var(--heading); text-transform: uppercase; letter-spacing: 2px; }
.drawer a.active { opacity: .6; }
.drawer-group { display: flex; flex-direction: column; gap: 10px; }
.drawer-group a { padding-left: 20px; font-size: 16px; opacity: .85; }
.drawer-label { opacity: .5; font-size: 14px; }

@media (max-width: 1599px) {   /* nine menu items need the compact sizing up to wide screens */
  .logo { font-size: 34px; }
  .nav { gap: 24px; }
  .nav-link, .sub a { font-size: 14px; letter-spacing: 1.5px; }
  .nav-bar { padding: 0 32px; min-height: 88px; }
}
@media (max-width: 1099px) {   /* the full menu needs ~1100px; below that the drawer takes over */
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-bar { grid-template-columns: 48px 1fr 48px; padding: 0 16px; min-height: 72px; }
  .logo { font-size: 26px; letter-spacing: 1.5px; }
  .site-header.is-overlay.menu-open { background: var(--dark); }
}
@media (max-width: 360px) { .logo { font-size: 22px; } }

/* ---------- hero (home) ---------- */
.hero { position: relative; background: var(--dark); min-height: 70.7vw; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding: 160px 24px 9vw; overflow: hidden; color: #fff; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 38% 0; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(22,22,22,.3), rgba(22,22,22,.3)); }
.hero-content { position: relative; z-index: 1; max-width: 900px; }
.tagline { font: 400 clamp(38px, 6vw, 62px)/1.2 var(--heading); text-transform: uppercase; letter-spacing: 4px; margin: 0 0 8px; }
.subtagline { font: 400 clamp(18px, 2vw, 22px)/1.5 var(--text); letter-spacing: 2px; margin: 0 0 20px; }
@media (max-width: 767px) { .hero { min-height: 82vh; padding-bottom: 56px; } .tagline { letter-spacing: 2px; } }

/* ---------- split sections (text | full-bleed image or map) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; }
.split-text { padding: var(--section) var(--gutter); max-width: calc(var(--container) / 2 + var(--gutter)); justify-self: end; width: 100%; }
.split-image { position: relative; min-height: 420px; }
.split-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.steps { display: flex; flex-direction: column; gap: 48px; }
.steps .btn { margin-top: 24px; }
@media (max-width: 1023px) {
  .split { grid-template-columns: 1fr; }
  .split-text { max-width: none; justify-self: stretch; }
  .split-image { min-height: 60vw; }
}

/* ---------- gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; max-width: 790px; margin: 0 auto; }
.gallery figure { margin: 0; aspect-ratio: 1 / 1; }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 479px) { .gallery { gap: 4px; } }

/* ---------- CTA bands ---------- */
.cta-band { padding: 56px 0; }
.cta-band.dark { background: var(--dark); color: #fff; }
.cta-band.dark .heading-major { color: #fff; }
.cta-band.dark p { font-weight: 700; color: var(--nav); }
.cta-band.light { background: var(--paper); padding: var(--section) 0 48px; }
.cta-inner { display: flex; align-items: center; justify-content: center; gap: 40px; }
.cta-img { width: 500px; max-width: 45%; flex: none; aspect-ratio: 3 / 2; object-fit: cover; }
.cta-text { max-width: 480px; }
@media (max-width: 767px) {
  .cta-inner { flex-direction: column; align-items: stretch; }
  .cta-img { width: 100%; max-width: none; }
}

/* ---------- content pages ---------- */
.page-image { margin: 0 0 72px; }
.page-image img { width: 100%; }
.two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 48px 64px; align-items: start; }
.two-col.media { grid-template-columns: 3fr 2fr; align-items: center; }
.two-col.special { grid-template-columns: 1fr 1fr; align-items: center; }
.two-col figure { margin: 0; }
.col-side .btn { margin-top: 8px; }
.col-main p:last-child { margin-bottom: 0; }
@media (max-width: 767px) { .two-col, .two-col.media, .two-col.special { grid-template-columns: 1fr; } .page-image { margin-bottom: 40px; } }

.partner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.partner-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; aspect-ratio: 2 / 3; padding: 24px;
  background: #ccc center / cover no-repeat; color: #fff; text-decoration: none; text-align: center; isolation: isolate; }
.partner-card::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); z-index: -1; transition: background .3s; }
.partner-card:hover::before { background: rgba(0,0,0,.5); }
.partner-title { font: 400 clamp(26px, 3vw, 44px)/1.2 var(--heading); text-transform: uppercase; letter-spacing: 2px; }
.partner-sub { font: 400 18px/1.4 var(--text); }
@media (max-width: 767px) { .partner-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .partner-card { aspect-ratio: 3 / 4; } }
@media (max-width: 479px) { .partner-grid { grid-template-columns: 1fr; } .partner-card { aspect-ratio: 3 / 2; } }

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 36px; }
.content-card img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; margin-bottom: 24px; }
.content-card .content-heading { text-align: center; }
.content-card p { text-align: center; margin: 0; }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); gap: 32px 24px; }
@media (max-width: 1023px) { .card-grid, .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) {
  a[href^="tel:"], a[href^="mailto:"] { display: inline-block; padding: 5px 0; }   /* bigger tap targets on phones */ .card-grid { grid-template-columns: 1fr; } }

/* ---------- contact pieces ---------- */
.contact-block { padding-top: 48px; }
.contact-block .btn-whatsapp { margin: 8px 0 40px; }
.contact-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 760px; margin: 0 auto; }
.phones a { text-decoration: none; color: var(--slate); }
.phones a:hover { text-decoration: underline; }
.phones span { opacity: .75; }
.hours { border-collapse: collapse; margin: 0 auto 16px; }
.hours th { text-align: left; font-weight: 400; padding: 2px 12px 2px 0; }
.hours td { padding: 2px 0; }
.hours tr.closed th, .hours tr.closed td { font-weight: 700; }
.hours.left { margin-left: 0; }
.today { font-weight: 700; }
.contact-split .split-text p a:not(.btn) { color: var(--slate); }
.split-map { position: relative; min-height: 480px; background: #e9eef1; }
.split-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.directions { position: absolute; top: 16px; left: 16px; }
.reveal { margin-top: 32px; }
.tj-form { margin: 0 auto; max-width: 1060px; }
.tj-form iframe { width: 100%; display: block; }
@media (max-width: 599px) { .contact-cols { grid-template-columns: 1fr; } }

/* ---------- about ---------- */
.people { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; max-width: 760px; margin: 0 auto; }
.person { text-align: center; }
.person img { aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 30%; margin: 0 auto 32px; }
.person .content-heading { margin-bottom: 24px; }
.person .btn { margin-top: 8px; }
@media (max-width: 599px) { .people { grid-template-columns: 1fr; } }

/* ---------- reviews ---------- */
.reviews-summary { text-align: center; margin-bottom: 48px; }
.rating-big { display: inline-flex; align-items: center; gap: 12px; }
.rating-num { font: 400 56px/1 var(--heading); }
.stars { display: inline-flex; gap: 2px; color: #f5a623; }
.rating-count { margin: 8px 0 24px; letter-spacing: 1px; }
.reviews-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.review { background: var(--sky); border-radius: 7px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.review-head { display: flex; align-items: center; gap: 12px; }
.review-head img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.review-author { font-weight: 700; }
.review-when { font-size: 14px; opacity: .7; }
.review .stars { font-size: 14px; }
.review p { margin: 0; }
.reviews-note { text-align: center; margin-top: 24px; opacity: .75; }

/* ---------- prose (privacy) ---------- */
.prose { max-width: 820px; }
.prose h3 { font: 700 18px/1.4 var(--text); margin: 28px 0 8px; }

/* ---------- footer ---------- */
.site-footer { background: var(--sky); padding: 56px 0; text-align: center; }
.social { display: flex; justify-content: center; gap: 16px; margin-bottom: 24px; }
.social a { color: var(--ink); display: inline-flex; padding: 4px; transition: opacity .3s; }
.social a:hover { opacity: .6; }
.copyright { font-size: 14px; margin-bottom: 24px; }
.footer-link { font: 400 14px/1.4 var(--heading); text-transform: uppercase; letter-spacing: 2px; text-decoration: none; color: var(--ink); }
.footer-link:hover { opacity: .6; }

/* ---------- cookie notice ---------- */
.cookie { position: fixed; right: 24px; bottom: 24px; width: 400px; max-width: calc(100% - 32px); background: var(--sky); border-radius: 7px; box-shadow: 0 2px 6px rgba(0,0,0,.3); padding: 24px; z-index: 50; }
.cookie h4 { font: 400 20px/1.3 var(--text); margin-bottom: 8px; }
.cookie p { font-size: 15px; margin-bottom: 8px; }
.cookie-actions { display: flex; gap: 16px; margin-top: 16px; }
.cookie-actions .btn { flex: 1; color: #0f1011; }
@media (max-width: 479px) { .cookie { right: 16px; bottom: 16px; } }

.site-footer .footer-nap { font-size: 14px; margin: 0 0 10px; }
.site-footer .footer-nap a { color: inherit; }

/* travel tips */
.tips-intro { max-width: 720px; margin: -40px auto 56px; }
.tip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 36px; }
.tip-card img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; margin-bottom: 20px; }
.tip-card .content-heading { font-size: 20px; letter-spacing: 1px; line-height: 1.3; }
.tip-card .content-heading a { text-decoration: none; }
.tip-card .content-heading a:hover { text-decoration: underline; }
.tip-date { font-size: 14px; opacity: .7; margin: 0 0 8px; }
.read-more { font: 400 14px/1.4 var(--heading); text-transform: uppercase; letter-spacing: 2px; text-decoration: none; border-bottom: 1px solid currentColor; }
@media (max-width: 1023px) { .tip-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .tip-grid { grid-template-columns: 1fr; } .tips-intro { margin-top: -16px; } }
.article { padding: var(--section) 0 0; }
.article .container { max-width: 820px; }
.kicker { font: 400 14px/1.4 var(--heading); text-transform: uppercase; letter-spacing: 2px; margin: 0 0 16px; }
.kicker a { text-decoration: none; }
.article-title { font: 400 36px/1.2 var(--heading); text-transform: uppercase; letter-spacing: 1.5px; margin: 0 0 16px; }
.byline { font-size: 15px; opacity: .75; margin: 0 0 32px; }
.article-hero { margin: 0 0 40px; }
.article-hero img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.article-body { font-size: 18px; line-height: 1.6; max-width: none; }
.article-body h2 { font: 400 24px/1.3 var(--heading); text-transform: uppercase; letter-spacing: 1.5px; margin: 40px 0 12px; }
.article-body p { margin: 0 0 20px; }
.article-body ul, .article-body ol { margin: 0 0 20px; padding-left: 26px; }
.article-body li { margin-bottom: 10px; }
.article-cta { text-align: center; padding: 32px 0 8px; }
.article-cta .small { font-size: 14px; opacity: .75; margin-top: 16px; }
.author-box { display: flex; gap: 24px; align-items: center; background: var(--sky); border-radius: 7px; padding: 24px; margin: 40px 0; }
.author-box img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; flex: none; }
.author-box p { margin: 0 0 6px; }
.more-tips { margin-bottom: 24px; }
.more-tips ul { padding-left: 22px; margin: 0; }
.more-tips li { margin-bottom: 8px; }
@media (max-width: 599px) { .article-title { font-size: 28px; } .article-body { font-size: 17px; } .author-box { flex-direction: column; text-align: center; } }