/* ==========================================================================
My Trip To Ecuador — "Andes Green / Galápagos Blue"
Cloud-forest green against warm stone paper, with volcanic terracotta for
actions only. Reuses the Banff component system (same class vocabulary),
repalette + a few additions (mega-menu, language switcher, quote form).
No webfonts (CWV), no framework. Mobile-first.
========================================================================== */
:root {
--teal-900: #163a2e;
--teal-700: #1f5c46;
--teal: #2f8f6a;
--teal-200: #b7ded0;
--teal-050: #eaf6f1;
--glacier: #6fd6c4; /* Galápagos turquoise accent, kept var name for reuse */
--larch: #c65a2e; /* volcanic terracotta, actions only */
--larch-700: #a3461f;
--ink: #1c211b;
--ink-2: #3d4a41;
--stone: #66746b;
--line: #e2ddd0;
--sand: #f7f4ee;
--paper: #ffffff;
--s1: .375rem; --s2: .75rem; --s3: 1.125rem; --s4: 1.75rem;
--s5: 2.75rem; --s6: 4rem; --s7: 5.5rem;
--r: 14px;
--r-s: 9px;
--shadow: 0 1px 2px rgba(6,65,74,.06), 0 6px 20px rgba(6,65,74,.07);
--shadow-lg: 0 2px 6px rgba(6,65,74,.07), 0 18px 44px rgba(6,65,74,.13);
--wrap: 1180px;
--narrow: 76ch;
}
*, *::before, *::after { box-sizing: border-box; }
/* Root type scale. Everything else is in rem, so this single clamp moves the whole system:
~18px on a phone up to ~19.5px on a wide screen, comfortably above the 16px floor that
made the imported long-form copy feel cramped. */
html {
font-size: clamp(18px, 17px + .3vw, 19.5px);
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font: 400 1rem/1.68 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-feature-settings: "kern" 1;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
line-height: 1.16; letter-spacing: -.018em; margin: 0 0 var(--s2);
color: var(--teal-900); font-weight: 700;
/* Tour titles carry unbreakable runs like "Calgary/Canmore/Banff". Without this they set a
min-content width wider than a phone and drag the whole grid past the viewport edge. */
overflow-wrap: break-word;
}
h1 { font-size: clamp(2rem, 1.35rem + 2.9vw, 3.35rem); }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.15rem); }
h3 { font-size: clamp(1.12rem, 1rem + .5vw, 1.35rem); }
p { margin: 0 0 var(--s3); }
a { color: var(--teal-700); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--larch-700); }
img, svg, iframe { max-width: 100%; }
img { height: auto; display: block; }
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 100;
background: var(--teal-900); color: #fff; padding: .7rem 1rem; border-radius: 0 0 var(--r-s) 0;
}
.skip-link:focus { left: 0; color: #fff; }
:focus-visible { outline: 3px solid var(--larch); outline-offset: 2px; border-radius: 3px; }
/* ---------- layout ---------- */
.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2rem, var(--narrow)); margin-inline: auto; }
.section { padding-block: var(--s6); }
/* Headings run the full width of their container. Capping them by character count forced
short titles onto two lines while the row beside them sat empty. */
h1, h2 { max-width: none; text-wrap: pretty; }
.sec-blurb { color: var(--ink-2); max-width: 68ch; font-size: 1.06rem; margin-bottom: var(--s4); }
/* A band is FULL-BLEED and holds its own .wrap. Putting a background straight on a .wrap
element paints it only as wide as the text column, which reads as a stray grey slab. */
.band { width: 100%; }
.band > .wrap { padding-block: var(--s6); }
.band-soft { background: var(--sand); border-block: 1px solid var(--line); }
.band-tl { background: linear-gradient(170deg, var(--teal-900), #0b5560 65%, var(--teal-700)); color: #dceff0; }
.band-tl h2 { color: #fff; }
.band-tl .sec-blurb { color: #a9d4d8; }
.band-cta { background: linear-gradient(160deg, var(--teal-900), var(--teal-700)); color: #eaf6f6; border-radius: var(--r); padding: var(--s5) var(--s4); margin-bottom: var(--s6); }
.band-cta h2, .band-cta a:not(.btn) { color: #fff; }
.band-cta p { color: #cfe8ea; }
/* ---------- buttons ---------- */
.btn {
--btn-bg: var(--teal); --btn-fg: #fff;
display: inline-block; background: var(--btn-bg); color: var(--btn-fg);
padding: .78rem 1.3rem; border-radius: 999px; border: 1px solid transparent;
font-weight: 650; font-size: .97rem; line-height: 1.25; text-decoration: none;
transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
box-shadow: 0 1px 2px rgba(6,65,74,.14);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }
.btn-primary { --btn-bg: var(--larch); }
.btn-primary:hover { --btn-bg: var(--larch-700); }
.btn-brand { --btn-bg: var(--teal-700); }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--teal-700); border-color: var(--teal-200); box-shadow: none; }
.btn-hero-ghost { --btn-bg: rgba(255,255,255,.12); --btn-fg: #fff; border-color: rgba(255,255,255,.5); backdrop-filter: blur(4px); }
.btn-hero-ghost:hover { --btn-bg: rgba(255,255,255,.22); --btn-fg: #fff; }
.btn-lg { padding: .95rem 1.6rem; font-size: 1.04rem; }
/* ---------- header / nav ---------- */
.site-header {
position: sticky; top: 0; z-index: 40;
background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(9px);
border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: var(--s3); padding-block: .7rem; }
.brand {
font-weight: 750; font-size: 1.02rem; letter-spacing: -.02em; color: var(--teal-900);
text-decoration: none; margin-right: auto; line-height: 1.1;
}
.brand b { color: var(--teal); font-weight: 750; }
/* The space between the two words is a REAL space in the markup. It used to be a
`::before { content: " " }`, which renders correctly but is NOT part of the DOM text:
the sitewide brand anchor read "Banff National ParkTours" to every crawler. */
.nav-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 42px; height: 42px; font-size: 1.25rem;
background: var(--teal-050); color: var(--teal-900);
border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
}
.nav-links { list-style: none; margin: 0; padding: 0; display: none; }
.nav-links[data-open="true"] {
display: flex; flex-direction: column; gap: .2rem;
position: absolute; left: 0; right: 0; top: 100%;
background: var(--paper); border-bottom: 1px solid var(--line);
padding: var(--s2) 1rem var(--s3); box-shadow: var(--shadow);
}
.nav-links a { display: block; padding: .6rem .2rem; color: var(--ink); text-decoration: none; font-weight: 550; }
.nav-links a:hover { color: var(--teal); }
.nav-links .btn { text-align: center; margin-top: var(--s2); color: #fff; }
@media (min-width: 62em) {
.nav-toggle { display: none; }
.nav-links { display: flex; align-items: center; gap: var(--s3); }
.nav-links a { padding: .3rem 0; font-size: .96rem; }
.nav-links .btn { margin-top: 0; padding: .6rem 1.1rem; }
}
/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; color: #fff; display: grid; }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(180deg, rgba(6,65,74,.74) 0%, rgba(6,65,74,.55) 45%, rgba(6,65,74,.82) 100%);
}
.hero-inner { padding-block: clamp(3.5rem, 9vw, 7rem); max-width: 46rem; }
.hero h1 { color: #fff; text-wrap: balance; }
.hero-sub { font-size: clamp(1.1rem, .95rem + .7vw, 1.5rem); font-weight: 600; color: var(--teal-200); margin-bottom: var(--s3); }
.hero .lede { color: rgba(255,255,255,.92); font-size: 1.05rem; }
.hero-proof { display: inline-flex; align-items: center; gap: .45rem; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); padding: .45rem .95rem; border-radius: 999px; font-size: .95rem; }
.hero-proof b { font-size: 1.05rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); margin-bottom: 0; }
.star { color: #f6c445; }
/* ---------- tour cards ---------- */
.tgrid { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 40em) { .tgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .tgrid { grid-template-columns: repeat(3, 1fr); } }
.tcard {
display: flex; flex-direction: column; overflow: hidden;
background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease;
}
.tcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.tcard-media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--teal-050); }
.tcard-media img { width: 100%; height: 100%; object-fit: cover; }
.tcard-badges { position: absolute; top: .7rem; left: .7rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.badge {
background: var(--teal-900); color: #fff; font-size: .68rem; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase; padding: .3rem .55rem; border-radius: 999px;
}
.tcard-body { display: flex; flex-direction: column; flex: 1; padding: var(--s3); }
.tcard-title { font-size: 1.09rem; margin-bottom: var(--s2); }
.tcard-title a { color: var(--teal-900); text-decoration: none; }
.tcard-title a:hover { color: var(--teal); }
.tcard-desc {
color: var(--ink-2); font-size: .945rem; margin-bottom: var(--s3);
display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.tcard-meta {
list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .85rem;
margin: 0 0 var(--s3); padding: 0; font-size: .875rem; color: var(--stone);
}
.tcard-meta .m-rating { color: var(--ink); font-weight: 650; }
.tcard-foot {
display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--line);
}
.price { font-size: 1.5rem; font-weight: 750; color: var(--teal-900); letter-spacing: -.02em; }
.price .cur { font-size: .95rem; vertical-align: .35em; margin-right: .05em; }
.tcard-foot .btn { padding: .6rem 1rem; font-size: .88rem; }
/* ---------- why / feature cards ---------- */
.wgrid { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 44em) { .wgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68em) { .wgrid { grid-template-columns: repeat(4, 1fr); } }
.wcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4) var(--s3); }
.wcard h3 { margin-bottom: var(--s2); }
.wcard p { color: var(--ink-2); font-size: .95rem; margin: 0; }
.wicon {
width: 46px; height: 46px; padding: 9px; margin-bottom: var(--s3);
background: var(--teal-050); border-radius: 50%;
}
/* ---------- team ---------- */
.team-grid { display: grid; gap: var(--s4); align-items: center; }
@media (min-width: 56em) { .team-grid { grid-template-columns: 5fr 6fr; gap: var(--s5); } }
.team-media img { border-radius: var(--r); box-shadow: var(--shadow); width: 100%; }
.team-body p { color: var(--ink-2); }
/* ---------- page head / stats / sitemap / contact ---------- */
.page-head { padding-bottom: var(--s3); }
.page-head h1 { margin-bottom: var(--s2); }
.stat-row {
list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3);
grid-template-columns: repeat(2, 1fr); text-align: center;
}
@media (min-width: 52em) { .stat-row { grid-template-columns: repeat(4, 1fr); } }
.stat-row li { display: flex; flex-direction: column; gap: .2rem; }
.stat-row b { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); color: var(--teal); font-weight: 750; letter-spacing: -.03em; }
.stat-row span { color: var(--stone); font-size: .9rem; }
.sitemap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem var(--s4); }
@media (min-width: 44em) { .sitemap-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70em) { .sitemap-list { grid-template-columns: repeat(3, 1fr); } }
.sitemap-list li { border-bottom: 1px solid var(--line); padding: .5rem 0; }
.contact-dl { margin: 0; }
.contact-dl dt { font-weight: 700; color: var(--teal-900); margin-top: var(--s3); }
.contact-dl dd { margin: .2rem 0 0; color: var(--ink-2); }
/* ---------- awards ---------- */
.award-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48em) { .award-list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 68em) { .award-list { grid-template-columns: repeat(5, 1fr); } }
.award {
display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem;
border: 2px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s2);
transition: border-color .18s ease;
}
.award:hover { border-color: var(--teal-200); }
.award img { width: 34px; height: 34px; }
.aw-name { font-weight: 700; font-size: .86rem; color: var(--ink); }
.aw-year { font-size: .78rem; color: var(--stone); font-weight: 600; }
/* ---------- FAQ ---------- */
.faq details {
border: 1px solid var(--line); border-radius: var(--r-s);
background: var(--paper); margin-bottom: var(--s2); overflow: hidden;
}
.faq details[open] { border-color: var(--teal-200); box-shadow: var(--shadow); }
.faq summary {
cursor: pointer; list-style: none; padding: var(--s3);
font-weight: 650; color: var(--teal-900); display: flex; justify-content: space-between; gap: var(--s2);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--teal); font-weight: 700; font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { background: var(--teal-050); }
.faq-body { padding: 0 var(--s3) var(--s2); color: var(--ink-2); }
.faq-body > :last-child { margin-bottom: var(--s3); }
/* ---------- breadcrumbs ---------- */
.crumbs { font-size: .855rem; color: var(--stone); padding-top: var(--s3); }
.crumbs a { color: var(--stone); }
.crumbs a:hover { color: var(--teal); }
.crumbs [aria-current] { color: var(--ink); }
/* ---------- article / prose ---------- */
.art-head { padding-block: var(--s4) var(--s3); border-bottom: 1px solid var(--line); margin-bottom: var(--s4); }
.article { padding-bottom: var(--s6); }
.lede { font-size: 1.1rem; color: var(--ink-2); }
/* A plain-text email/URL/long compound word (contact-info lists are common in imported
pages) has no natural break point and otherwise overflows a narrow phone column. */
.prose { font-size: 1.02rem; overflow-wrap: anywhere; }
/* Full-width prose sections (homepage, tour pages) still need a readable measure, while
tables, figures and maps stay wide. Article pages already sit in .wrap-narrow. */
.section.prose > * { max-width: var(--narrow); }
.section.prose > .table-wrap,
.section.prose > figure,
.section.prose > iframe,
.section.prose > img { max-width: 100%; }
.prose h2 { margin-top: var(--s5); }
.prose h3 { margin-top: var(--s4); }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 var(--s3); }
.prose li { margin-bottom: .4rem; }
.prose li > ul, .prose li > ol { margin-top: .4rem; }
.prose img { border-radius: var(--r); margin-block: var(--s4); box-shadow: var(--shadow); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: var(--s5); }
.prose dl { margin: 0 0 var(--s3); }
.prose dt { font-weight: 700; color: var(--teal-900); margin-top: var(--s3); }
.prose iframe { border: 0; border-radius: var(--r); width: 100%; aspect-ratio: 16 / 10; margin-block: var(--s4); }
.prose blockquote {
margin: var(--s4) 0; padding: var(--s2) var(--s4);
border-left: 4px solid var(--teal-200); background: var(--sand);
border-radius: 0 var(--r-s) var(--r-s) 0; color: var(--ink-2);
}
.prose strong { color: var(--ink); }
.fig { margin: var(--s4) 0; }
.fig img { margin: 0; }
.fig figcaption { font-size: .86rem; color: var(--stone); padding-top: .6rem; }
.table-wrap { overflow-x: auto; margin-block: var(--s4); border: 1px solid var(--line); border-radius: var(--r); }
table { border-collapse: collapse; width: 100%; font-size: .93rem; background: var(--paper); }
caption { caption-side: top; text-align: left; padding: var(--s2) var(--s3); font-weight: 650; color: var(--teal-900); }
th, td { padding: .7rem .85rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--teal-050); color: var(--teal-900); font-weight: 700; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: #fbfaf8; }
.small { font-size: .85rem; color: var(--stone); }
.disc { margin-top: var(--s2); }
/* ---------- tour page ---------- */
.tour-hero { display: grid; gap: var(--s4); padding-block: var(--s4) var(--s5); }
.tour-hero > * { min-width: 0; }
@media (min-width: 58em) { .tour-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); align-items: center; } }
.th-media img { border-radius: var(--r); box-shadow: var(--shadow-lg); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.th-body .lede { margin-bottom: var(--s3); }
.th-stats { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); padding: var(--s3) 0; border-block: 1px solid var(--line); margin-bottom: var(--s4); }
.th-stat { font-size: .93rem; color: var(--stone); }
.th-stat b { color: var(--ink); font-size: 1.12rem; font-weight: 750; }
.th-price b { color: var(--teal-900); font-size: 1.5rem; letter-spacing: -.02em; }
.th-cta { margin-bottom: 0; }
.incl-grid { display: grid; gap: var(--s3); }
@media (min-width: 48em) { .incl-grid { grid-template-columns: 1fr 1fr; gap: var(--s4); } }
.incl { list-style: none; margin: 0; padding: 0; }
.incl li { position: relative; padding-left: 1.75rem; margin-bottom: .55rem; color: var(--ink-2); }
.incl li::before { position: absolute; left: 0; top: -.05em; font-weight: 700; font-size: 1.05rem; }
.incl.yes li::before { content: "\2713"; color: var(--teal); }
.incl.no li::before { content: "\2715"; color: #b4553f; }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.steps li {
counter-increment: step; position: relative; padding-left: 3.1rem;
margin-bottom: var(--s4); color: var(--ink-2);
}
.steps li::before {
content: counter(step); position: absolute; left: 0; top: -.1rem;
width: 2.15rem; height: 2.15rem; display: grid; place-items: center;
background: var(--teal-050); color: var(--teal-700); border: 1px solid var(--teal-200);
border-radius: 50%; font-weight: 750; font-size: .95rem;
}
/* ---------- footer ---------- */
.site-footer { background: var(--teal-900); color: #cfe4e6; margin-top: var(--s6); padding-block: var(--s6) var(--s4); }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--glacier); text-decoration: underline; }
.foot-grid { display: grid; gap: var(--s4); }
@media (min-width: 48em) { .foot-grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--s5); } }
.foot-brand { font-size: 1.25rem; font-weight: 750; color: #fff; margin-bottom: var(--s2); }
.foot-h { font-size: 1rem; color: #fff; letter-spacing: .01em; }
.site-footer address { font-style: normal; margin-bottom: var(--s2); }
.foot-links { list-style: none; margin: 0; padding: 0; }
.foot-links li { margin-bottom: .45rem; }
.foot-legal { border-top: 1px solid rgba(255,255,255,.16); margin-top: var(--s5); padding-top: var(--s3); }
.foot-legal p { font-size: .82rem; color: #9dbcbf; }
.copy { margin-bottom: 0; }
/* GetYourGuide widget placeholders keep their own sizing; just give them breathing room. */
[data-gyg-widget] { margin-block: var(--s4); }
.updated { font-size: .87rem; color: var(--stone); margin: 0; }
.rev-line { font-size: .93rem; margin-bottom: 0; }
.band-cta .rev-line a { color: #fff; }
/* ---------- contact form ---------- */
.cform { margin-bottom: var(--s3); }
.f-row { display: flex; flex-direction: column; gap: .35rem; margin-bottom: var(--s3); }
.f-row label { font-weight: 650; font-size: .92rem; color: var(--teal-900); }
.cform input, .cform textarea {
font: inherit; font-size: 1rem; color: var(--ink);
padding: .7rem .85rem; border: 1px solid var(--line); border-radius: var(--r-s);
background: var(--paper); width: 100%;
}
.cform input:focus, .cform textarea:focus { border-color: var(--teal); outline: 2px solid var(--teal-200); outline-offset: 1px; }
/* `.cform input { width: 100% }` above targets the text/email fields; a checkbox is also an
and inherited it, and because `flex: 0 0 auto` leaves flex-basis at "auto" it falls
back to the element's own `width` property — so every checkbox stretched to fill its flex
row, shoving its label text (0 width left for it) off past the edge of the viewport. This
was the actual cause of the quote-form horizontal-overflow bug, not the label/span sizing. */
.cform input[type="checkbox"] { width: auto; flex: 0 0 auto; }
.cform textarea { resize: vertical; min-height: 9rem; }
.cform button[disabled] { opacity: .6; cursor: progress; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: .93rem; padding: .7rem .9rem; border-radius: var(--r-s); margin-bottom: 0; }
.form-status.is-ok { background: var(--teal-050); color: var(--teal-900); border: 1px solid var(--teal-200); }
.form-status.is-err { background: #fdf0ec; color: #8c3b26; border: 1px solid #f0c8bb; }
/* ==========================================================================
Engagement components: timeline, link cards, video grid, article TOC.
The imported bodies are 4,000+ word slabs; these give a reader somewhere to
land, something to scan, and a way out that is not the back button.
========================================================================== */
/* ---------- interactive timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
content: ""; position: absolute; left: 8px; top: .6rem; bottom: .6rem;
width: 2px; background: linear-gradient(180deg, var(--glacier), rgba(126,207,214,.15));
}
.tl-item {
position: relative; padding: .85rem 1rem .85rem 2.4rem;
border-radius: var(--r-s); display: grid; gap: .15rem;
transition: background-color .18s ease, transform .18s ease;
opacity: 0; transform: translateY(10px);
}
.tl-item.is-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
.tl-item::before {
content: ""; position: absolute; left: 3px; top: 1.35rem;
width: 12px; height: 12px; border-radius: 50%;
background: var(--glacier); border: 2px solid var(--teal-900);
transition: transform .18s ease, background-color .18s ease;
}
.tl-item:hover, .tl-item:focus-within { background: rgba(255,255,255,.08); transform: translateX(3px); }
.tl-item:hover::before { transform: scale(1.35); background: #fff; }
.tl-time {
font-variant-numeric: tabular-nums; font-weight: 750; font-size: .82rem;
letter-spacing: .06em; text-transform: uppercase; color: var(--glacier);
}
.tl-text { color: #e6f4f5; font-size: 1.02rem; }
.tl-note { margin-top: var(--s4); color: #cfe6e8; }
.tl-note a { color: #fff; }
@media (min-width: 46em) {
.tl-item { grid-template-columns: 7.5rem 1fr; gap: var(--s3); align-items: baseline; }
.tl-time { text-align: right; }
.timeline::before { left: 8.9rem; }
.tl-item::before { left: 8.4rem; }
.tl-item { padding-left: 0; padding-right: 1rem; }
.tl-text { padding-left: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) { .tl-item { opacity: 1; transform: none; } }
/* ---------- internal link cards ---------- */
.lgrid { display: grid; gap: var(--s2); grid-template-columns: 1fr; }
@media (min-width: 40em) { .lgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66em) { .lgrid { grid-template-columns: repeat(3, 1fr); } }
.lcard {
display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s);
padding: var(--s3); color: var(--teal-900); text-decoration: none; font-weight: 600;
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.lcard::after { content: "\2192"; color: var(--teal); transition: transform .18s ease; }
.lcard:hover { border-color: var(--teal-200); transform: translateY(-2px); box-shadow: var(--shadow); color: var(--teal-900); }
.lcard:hover::after { transform: translateX(4px); }
/* ---------- why cards, now clickable ---------- */
a.wcard { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
a.wcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--teal-200); color: inherit; }
a.wcard h3 { transition: color .18s ease; }
a.wcard:hover h3 { color: var(--teal); }
.wcard-go { margin-top: auto; padding-top: var(--s3); font-weight: 650; font-size: .9rem; color: var(--teal); }
a.wcard:hover .wcard-go span { display: inline-block; transform: translateX(4px); transition: transform .18s ease; }
/* ---------- video grid ---------- */
.vgrid { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 52em) { .vgrid { grid-template-columns: repeat(2, 1fr); } }
.vid { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); background: var(--teal-900); }
.vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; margin: 0; }
/* ---------- article layout + table of contents ---------- */
.art-head { padding-block: var(--s5) var(--s3); }
.art-head .lede { max-width: 62ch; }
.art-layout { display: block; }
.art-body { max-width: var(--narrow); }
@media (min-width: 68em) {
.art-layout { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: var(--s6); align-items: start; }
.art-body { max-width: 70ch; }
}
.toc { margin-bottom: var(--s4); }
.toc details {
border: 1px solid var(--line); border-radius: var(--r-s);
background: var(--sand); padding: var(--s2) var(--s3);
}
.toc summary {
cursor: pointer; font-weight: 700; color: var(--teal-900);
font-size: .82rem; letter-spacing: .07em; text-transform: uppercase;
list-style: none; padding: .35rem 0;
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: " +"; color: var(--teal); }
.toc details[open] summary::after { content: " \2212"; }
.toc-list { list-style: none; margin: .5rem 0 .3rem; padding: 0; counter-reset: toc; }
.toc-list li { counter-increment: toc; }
.toc-list a {
display: block; padding: .38rem 0 .38rem 1.6rem; position: relative;
font-size: .91rem; line-height: 1.35; color: var(--ink-2); text-decoration: none;
border-left: 2px solid transparent; transition: color .16s ease, border-color .16s ease;
}
.toc-list a::before {
content: counter(toc); position: absolute; left: .35rem; top: .42rem;
font-size: .72rem; font-weight: 700; color: var(--stone);
}
.toc-list a:hover { color: var(--teal); }
.toc-list a.is-current { color: var(--teal-900); font-weight: 650; border-left-color: var(--teal); background: rgba(13,125,136,.06); }
@media (min-width: 68em) {
.toc { position: sticky; top: 5.2rem; margin-bottom: 0; max-height: calc(100vh - 7rem); overflow-y: auto; }
.toc details { background: transparent; border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: 0 0 0 var(--s3); }
.toc summary { pointer-events: none; }
.toc summary::after { content: ""; }
}
/* Anchor targets must clear the sticky header when jumped to. */
.prose h2 { scroll-margin-top: 5.5rem; }
/* ---------- TL;DR callout ---------- */
.tldr {
background: var(--teal-050); border: 1px solid var(--teal-200);
border-left: 4px solid var(--teal); border-radius: 0 var(--r-s) var(--r-s) 0;
padding: var(--s3) var(--s4); margin: 0 0 var(--s4);
}
.tldr-h {
font-size: .76rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase;
color: var(--teal-700); margin-bottom: .4rem;
}
.tldr p:last-child { margin-bottom: 0; }
/* ---------- reading progress ---------- */
.progress {
position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 50;
background: transparent; pointer-events: none;
}
.progress span {
display: block; height: 100%; width: 0;
background: linear-gradient(90deg, var(--teal), var(--glacier));
transition: width .1s linear;
}
/* ---------- sticky conversion bar (mobile) ---------- */
.sticky-cta {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
padding: .6rem .9rem; background: rgba(6,65,74,.97); backdrop-filter: blur(8px);
border-top: 1px solid rgba(255,255,255,.14);
transform: translateY(110%); transition: transform .25s ease;
}
.sticky-cta.visible { transform: none; }
.sticky-cta .sc-proof { color: #cfe8ea; font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-cta .btn { white-space: nowrap; padding: .6rem 1rem; font-size: .9rem; }
@media (min-width: 62em) {
.sticky-cta { justify-content: center; gap: var(--s4); padding: .7rem 1.5rem; }
.sticky-cta .sc-proof { font-size: .95rem; }
}
/* ---------- timeline layout + featured aside ---------- */
.tl-layout { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 62em) { .tl-layout { grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--s6); } }
.tl-aside {
background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
border-radius: var(--r); overflow: hidden; backdrop-filter: blur(4px);
}
.tl-aside img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tl-aside-body { padding: var(--s3); }
.tl-aside h3 { color: #fff; font-size: 1.05rem; margin-bottom: var(--s2); }
.tl-kicker {
font-size: .7rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase;
color: var(--glacier); margin-bottom: .45rem;
}
.tl-meta { color: #bcdcdf; font-size: .88rem; margin-bottom: var(--s3); }
@media (min-width: 62em) { .tl-aside { position: sticky; top: 5.5rem; } }
/* Article header aligns with the content grid, not the page centre. */
.art-head { max-width: none; }
.art-head .lede { max-width: 64ch; }
/* ==========================================================================
Interactive data blocks: sortable price tables, step cards, map panel.
========================================================================== */
.visually-hidden {
position: absolute; width: 1px; height: 1px; margin: -1px;
padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ---------- sortable price tables ---------- */
.table-tools {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: var(--s2); margin-bottom: var(--s3);
}
.tfilter { flex: 1 1 16rem; max-width: 26rem; }
.tfilter input {
font: inherit; font-size: .95rem; width: 100%;
padding: .6rem .85rem .6rem 2.1rem; border: 1px solid var(--line);
border-radius: 999px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2361716f' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat .7rem center / 1.05rem;
}
.tfilter input:focus { border-color: var(--teal); outline: 2px solid var(--teal-200); outline-offset: 1px; }
.tfilter-hint { margin: 0; }
table.sortable thead th { padding: 0; }
.th-sort {
display: flex; align-items: center; gap: .35rem; width: 100%;
font: inherit; font-weight: 700; font-size: .93rem; color: var(--teal-900);
background: none; border: 0; padding: .7rem .85rem; cursor: pointer; text-align: left;
}
.th-sort:hover { color: var(--teal); }
.th-arrow { width: .6rem; height: .6rem; opacity: .35; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease, opacity .15s ease; }
th[aria-sort="ascending"] .th-arrow { opacity: 1; transform: rotate(135deg); }
th[aria-sort="descending"] .th-arrow { opacity: 1; transform: rotate(-45deg); }
th[aria-sort]:not([aria-sort="none"]) { background: var(--teal-200); }
table.sortable tbody tr.is-hidden { display: none; }
table.sortable tbody tr { transition: background-color .15s ease; }
table.sortable tbody tr:hover { background: var(--teal-050); }
.table-empty { padding: var(--s3); color: var(--stone); font-size: .95rem; }
/* ---------- step cards ---------- */
.sec-intro { margin-bottom: var(--s4); max-width: var(--narrow); }
.scards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); counter-reset: none; }
@media (min-width: 60em) { .scards { grid-template-columns: repeat(3, 1fr); gap: var(--s4); } }
.scard {
display: flex; gap: var(--s3); background: var(--paper);
border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4) var(--s3);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.scard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--teal-200); }
.scard-n {
flex: 0 0 auto; width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
border-radius: 50%; background: var(--teal-050); color: var(--teal-700);
border: 1px solid var(--teal-200); font-weight: 750; font-size: 1rem;
}
.scard h3 { font-size: 1.02rem; margin-bottom: var(--s2); }
.scard p { color: var(--ink-2); font-size: .95rem; margin: 0; }
@media (min-width: 60em) { .scard { flex-direction: column; } }
/* ---------- map panel ---------- */
.map-layout { display: grid; gap: var(--s4); align-items: start; }
/* Grid/flex items default to min-width:auto, so a child that contains a wide intrinsic
image (a WordPress photo with width="1024" height="683" attributes) can force its whole
track wider than the viewport even though the image itself has max-width:100% — the
track grows to fit the content FIRST, then the image fills that now-oversized track.
Real bug, measured at 1024/1140px on a 390px phone on imported hotel-review posts. */
.map-layout > *, .tl-layout > *, .team-grid > *, .tour-hero > *, .incl-grid > * { min-width: 0; }
@media (min-width: 62em) { .map-layout { grid-template-columns: 1fr 1.15fr; gap: var(--s5); } }
.map-copy .prose { font-size: 1rem; }
.map-frame {
position: relative; aspect-ratio: 4 / 3; border-radius: var(--r);
overflow: hidden; box-shadow: var(--shadow-lg); background: var(--teal-050);
}
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; margin: 0; }
.map-facts { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s2); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 46em) { .map-facts { grid-template-columns: repeat(3, 1fr); } }
.map-facts li {
background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s);
padding: var(--s2) var(--s3); display: flex; flex-direction: column; gap: .1rem;
}
.map-facts b { color: var(--teal-900); font-size: 1.02rem; font-weight: 750; line-height: 1.2; }
.map-facts span { color: var(--stone); font-size: .8rem; }
/* ---------- brand mark + socials ---------- */
.brand { display: inline-flex; align-items: center; gap: .55rem; }
.brand-mark { width: 1.7rem; height: 1.7rem; flex: 0 0 auto; }
.foot-brand { display: flex; align-items: center; gap: .6rem; }
.foot-mark { width: 2rem; height: 2rem; border-radius: 7px; flex: 0 0 auto; }
.socials { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0 0; padding: 0; }
.socials a {
display: inline-flex; align-items: center; gap: .45rem;
padding: .45rem .85rem .45rem .7rem; border-radius: 999px;
background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
color: #dceff0; font-size: .87rem; font-weight: 600; text-decoration: none;
transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.socials a:hover { background: rgba(255,255,255,.16); border-color: var(--glacier); color: #fff; transform: translateY(-1px); text-decoration: none; }
.socials svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }
/* Tour content blocks (Overview / What's Included / Itinerary) sit in the page column and
keep a readable measure; the include/exclude grid and the steps still use the full width. */
.tour-block > p { max-width: var(--narrow); }
.tour-block > h2 { margin-bottom: var(--s3); }
.tour-block .steps li { max-width: 92ch; }
/* ==========================================================================
Tour booking panel. The decision drivers — rating, volume, price, the reason
to act, and the button — sit together in one block instead of being spread
below a wall of description.
========================================================================== */
.tour-hero { align-items: start; }
.th-media img { aspect-ratio: 4 / 3; }
.th-panel {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r);
box-shadow: var(--shadow-lg);
padding: var(--s4);
}
.th-panel h1 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); margin-bottom: var(--s3); }
.th-proof {
list-style: none; margin: 0 0 var(--s3); padding: 0;
display: flex; flex-wrap: wrap; gap: .3rem .9rem;
font-size: .92rem; color: var(--stone);
}
.th-proof b { color: var(--ink); font-weight: 750; }
.th-proof .th-rating b { font-size: 1.05rem; }
.th-urgency {
background: #fdf4ea; border: 1px solid #f0d9bd; border-left: 4px solid var(--larch);
border-radius: 0 var(--r-s) var(--r-s) 0;
padding: var(--s2) var(--s3); margin-bottom: var(--s3);
font-size: .92rem; color: #7a4a16; line-height: 1.5;
}
.th-buy { border-top: 1px solid var(--line); padding-top: var(--s3); }
.th-price { display: flex; align-items: baseline; gap: .4rem; margin-bottom: var(--s3); }
.th-price b { font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.4rem); color: var(--teal-900); font-weight: 750; letter-spacing: -.03em; }
.th-from { font-size: .85rem; color: var(--stone); text-transform: uppercase; letter-spacing: .06em; font-weight: 650; }
.th-per { font-size: .88rem; color: var(--stone); }
/* The primary action: full width, larger type, and the only larch element in view. */
.btn-buy {
display: block; width: 100%; text-align: center;
padding: 1.05rem 1.4rem; font-size: 1.12rem; font-weight: 750;
border-radius: var(--r);
box-shadow: 0 2px 4px rgba(217,123,35,.28), 0 10px 26px rgba(217,123,35,.24);
}
.btn-buy:hover { box-shadow: 0 4px 8px rgba(217,123,35,.32), 0 14px 34px rgba(217,123,35,.3); }
.th-next { font-size: .87rem; color: var(--stone); margin: var(--s2) 0 0; line-height: 1.5; }
.th-lede { max-width: var(--narrow); margin-top: var(--s2); font-size: 1.02rem; }
@media (min-width: 58em) {
/* Two explicit columns: the photo and the description stack in the left column, the booking
panel spans both rows on the right. Letting the description span the full width instead
stranded it below the panel with a column of dead space under the photo. */
.tour-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; }
.th-media { grid-column: 1; grid-row: 1; }
.th-lede { grid-column: 1; grid-row: 2; margin-top: 0; }
.th-panel { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 5.5rem; }
}
/* On a phone the button has to be reachable without hunting: cap the photo so the panel
(and therefore the CTA) starts inside the first screenful. */
@media (max-width: 57.99em) {
.th-media img { aspect-ratio: 16 / 10; max-height: 25vh; object-fit: cover; }
.tour-hero { gap: var(--s3); padding-top: var(--s2); padding-bottom: var(--s4); }
.th-panel { padding: var(--s3); display: flex; flex-direction: column; }
.th-panel h1 { font-size: 1.35rem; margin-bottom: var(--s2); }
.th-proof { margin-bottom: var(--s3); font-size: .88rem; }
/* Price and button before the reason-to-act: the CTA has to be reachable without
scrolling, and the justification still reads immediately underneath it. */
.th-panel h1 { order: 1; }
.th-proof { order: 2; }
.th-buy { order: 3; border-top: 0; padding-top: 0; }
.th-urgency { order: 4; margin: var(--s3) 0 0; }
.th-price { margin-bottom: var(--s2); }
.crumbs { font-size: .8rem; padding-top: var(--s2); }
}
.sticky-cta .sc-price { color: #fff; font-weight: 750; font-size: .95rem; white-space: nowrap; }
/* Short phones (iPhone SE and friends): trim the photo and title further so the button
still lands inside the first screen rather than a few pixels under it. */
@media (max-width: 57.99em) and (max-height: 730px) {
.th-media img { max-height: 19vh; }
.th-panel h1 { font-size: 1.22rem; line-height: 1.2; }
.th-proof { margin-bottom: var(--s2); }
.th-price b { font-size: 1.75rem; }
.btn-buy { padding: .92rem 1.2rem; font-size: 1.05rem; }
}
/* ==========================================================================
In-article conversion blocks (guide pages). These sit INSIDE the prose
column, so nothing here is full-bleed: a `.band` in this position would be
clipped to the text measure and read as a stray slab.
========================================================================== */
.cta-box {
background: var(--teal-050);
border: 1px solid var(--teal-200);
border-left: 4px solid var(--teal);
border-radius: 0 var(--r) var(--r) 0;
padding: var(--s4);
margin: var(--s5) 0;
}
.cta-box .cb-h {
font-size: 1.06rem; font-weight: 750; color: var(--teal-900);
margin-bottom: var(--s2); line-height: 1.25;
}
.cta-box p { color: var(--ink-2); margin-bottom: var(--s3); }
.cta-box p:last-child { margin-bottom: 0; }
.cta-box .btn { box-shadow: 0 1px 2px rgba(217,123,35,.2), 0 6px 16px rgba(217,123,35,.18); }
/* Mid-article tour picks: auto-fit so it works in the narrow article column too. */
.tour-picks { margin: var(--s5) 0; }
.tour-picks > h2 { margin-bottom: var(--s3); }
.tour-picks .tgrid { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s3); }
.tour-picks .tcard-body { padding: var(--s3); }
.tour-picks .tcard-title { font-size: 1rem; }
.tour-picks .tcard-desc { font-size: .9rem; -webkit-line-clamp: 5; line-clamp: 5; }
/* The closing block is already a rounded card, not a full-bleed band. */
.article .band-cta { margin: var(--s5) 0 0; }
/* ---------- CTA box with imagery: photo left, copy right; photo on top on mobile ---------- */
.cta-box.has-media { display: grid; gap: 0; padding: 0; overflow: hidden; position: relative; }
.cta-media { background: var(--teal-050); }
.cta-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.cta-body { padding: var(--s4); }
.cta-body > :last-child { margin-bottom: 0; }
@media (min-width: 40em) {
.cta-box.has-media { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); align-items: stretch; }
.cta-media img { height: 100%; aspect-ratio: auto; min-height: 100%; }
}
@media (min-width: 60em) {
.cta-box.has-media { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); }
}
/* Whole box clickable, with the button still the only anchor: no nested links, no duplicate
crawlable URL, and text inside the box stays selectable. */
.cta-box.has-media .cta-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cta-box.has-media:hover { border-color: var(--teal); box-shadow: var(--shadow); }
.cta-box.has-media { transition: border-color .18s ease, box-shadow .18s ease; }
.cta-box.has-media .cta-stretch { position: relative; z-index: 2; }
/* Footer brand links home with the company name as its anchor text. */
.foot-brand a { color: #fff; text-decoration: none; }
.foot-brand a:hover { color: var(--glacier); text-decoration: underline; }
/* ==========================================================================
mytrip2ecuador.com additions: mega-menu nav, language switcher, footer
language row, quote-form field groups. The rest of the file is the shared
Banff component system, reused as-is.
========================================================================== */
/* ---------- mega menu ---------- */
.nav-links { position: relative; }
.has-mega { position: relative; }
.has-mega > a { display: flex; align-items: center; gap: .3rem; }
.has-mega > a::after { content: ""; width: .4rem; height: .4rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -.2rem; opacity: .6; }
.mega {
list-style: none; margin: 0; padding: var(--s3);
display: none; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .1rem var(--s4);
background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s);
box-shadow: var(--shadow-lg);
}
.mega .mega-col { min-width: 0; }
.mega .mega-top > a { font-weight: 750; color: var(--teal-900); }
.mega ul { list-style: none; margin: .2rem 0 .6rem; padding: 0 0 0 .7rem; }
.mega ul ul { padding-left: .9rem; }
.mega li a { display: block; padding: .3rem 0; font-size: .88rem; color: var(--ink-2); text-decoration: none; }
.mega li a:hover { color: var(--teal); }
@media (max-width: 61.99em) {
.has-mega .mega { position: static; display: none; box-shadow: none; border: 0; grid-template-columns: 1fr; padding: 0 0 0 .8rem; }
.has-mega[data-open="true"] .mega { display: grid; }
.has-mega > a::after { margin-left: auto; }
}
@media (min-width: 62em) {
.mega {
position: absolute; top: 100%; left: -1rem; z-index: 60;
width: min(56rem, 92vw); max-height: 70vh; overflow-y: auto;
}
.has-mega:hover .mega, .has-mega:focus-within .mega { display: grid; }
}
/* ---------- language switcher ---------- */
.lang-switch { display: flex; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.lang-switch a {
display: inline-flex; align-items: center; justify-content: center;
min-width: 2.2rem; padding: .3rem .5rem; border-radius: 999px;
font-size: .82rem; font-weight: 700; text-transform: uppercase;
color: var(--teal-700); border: 1px solid var(--line); text-decoration: none;
}
.lang-switch a.is-current { background: var(--teal-050); border-color: var(--teal-200); color: var(--teal-900); }
.lang-switch a:hover { border-color: var(--teal); color: var(--teal); }
.site-footer .lang-switch a { color: #dceff0; border-color: rgba(255,255,255,.24); }
.site-footer .lang-switch a.is-current { background: rgba(255,255,255,.12); color: #fff; }
/* ---------- quote / lead-gen form ---------- */
/*