/* Typography Families */
@font-face {
  font-family: 'Classico';
  src: url('classico.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: 'Classico', Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Structural Display Sizes */
  --display-hero: clamp(38px, 5vw, 56px);
  --display-section: clamp(32px, 4vw, 44px);
  --display-sub: clamp(22px, 2vw, 28px);
  --display-quote: clamp(20px, 2vw, 32px);
  
  /* Body Sizes */
  --body-large: clamp(15px, 1.1vw, 17px);
  --body-base: clamp(14px, 1vw, 16px);
  --body-small: clamp(12px, 0.9vw, 13px);
  --eyebrow-size: 10px;
  --button-size: 11px;
  --nav-size: 11px;
  
  /* Letter Spacing */
  --ls-display: 0.03em;
  --ls-eyebrow: 0.2em;
  --ls-button: 0.15em;
  --ls-nav: 0.12em;
  --ls-logo: 0.18em;
  
  /* Line Heights */
  --lh-display: 1.15;
  --lh-body: 1.7;
}

body {
  font-family: var(--font-body);
  font-size: var(--body-base);
  line-height: var(--lh-body);
  color: #1E1B16;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.logo, .logo-wordmark, .brand-name, .wordmark,
.hero-title, .section-title, .display-hero, .display-section, .display-sub, .pull-quote {
  font-family: var(--font-display);
  font-weight: normal;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
}

h1, .display-hero {
  font-size: var(--display-hero);
  line-height: var(--lh-display);
}

h2, .display-section {
  font-size: var(--display-section);
  line-height: var(--lh-display);
}

h3, .display-sub {
  font-size: var(--display-sub);
  line-height: 1.3;
}

.pull-quote {
  font-size: var(--display-quote);
  line-height: 1.4;
}

p, .body-text {
  font-family: var(--font-body);
  font-weight: 400;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
  color: #6A645B;
}

.hairline {
  width: 32px;
  height: 1px;
  background-color: #6A645B;
  border: none;
  margin: 16px auto 28px;
}

.button, button {
  font-family: var(--font-body);
  font-size: var(--button-size);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  font-weight: 500;
  padding: 16px 32px;
  border: 0.5px solid currentColor;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-block;
  text-decoration: none;
  color: #1E1B16;
}

.button:hover, button:hover {
  background: #1E1B16;
  color: #F9F7F2;
}

.editorial-link {
  font-family: var(--font-body);
  font-size: var(--button-size);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 0.5px solid currentColor;
  padding-bottom: 4px;
  color: inherit;
  transition: all 0.3s ease;
}

.nav-link, nav a {
  font-family: var(--font-body);
  font-size: var(--nav-size);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  font-weight: 400;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s ease;
}
.nav-link:hover, nav a:hover {
  opacity: 0.7;
}

.signature, .script, [class*="signature"], [class*="script"] {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  font-style: normal;
}

.logo-wordmark {
  letter-spacing: var(--ls-logo);
  text-transform: uppercase;
}


/* Footer specific overrides for dark background */
footer, footer p, footer .body-text, footer .eyebrow, footer a {
  color: rgba(252, 251, 249, 0.95) !important;
}
footer .logo-wordmark {
  color: #FCFBF9 !important;
}
footer .hairline {
  background-color: rgba(252, 251, 249, 0.3) !important;
}

/* Active Navigation Link */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0.5px;
  background-color: currentColor;
  transition: width 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}
.nav-link:hover::after {
  width: 16px;
  opacity: 0.4;
}
.nav-link.active-nav-link {
  opacity: 1 !important;
}
.nav-link.active-nav-link::after {
  width: 16px;
  opacity: 0.6;
}

html {
  overflow-y: scroll;
}

/* ==========================================================================
   Site-wide type scale (refined): calmer headlines, consistent body copy.
   Overrides the per-page Tailwind sizes so Home, About and the inner pages
   share one scale. Loaded on every page via typography.css.
   ========================================================================== */
:root {
  --display-hero: clamp(32px, 4vw, 48px);
  --display-section: clamp(28px, 3vw, 38px);
  --display-sub: clamp(18px, 1.6vw, 22px);
  --display-quote: clamp(20px, 1.9vw, 28px);
}

/* Hero headline on Home */
h1[class*="clamp(36px,5vw,56px)"] { font-size: clamp(30px, 3.6vw, 44px) !important; }

/* Page headlines on inner pages (About, Contact, Journal, Legal) */
h1[class*="md:text-[42px]"],
h1[class*="md:text-[44px]"],
h1[class*="md:text-[48px]"] { font-size: clamp(30px, 3.2vw, 42px) !important; }

/* Large hero titles on the Explore pages */
h1[style*="clamp(32px, 8vw, 110px)"] { font-size: clamp(30px, 6.5vw, 92px) !important; }
h1[style*="clamp(28px, 9vw, 130px)"] { font-size: clamp(28px, 7vw, 96px) !important; }

/* Section headlines */
h2[style*="clamp(28px, 3.5vw, 42px)"],
h2[class*="lg:text-[52px]"],
h2[class*="md:text-[46px]"],
h2[class*="md:text-[40px]"],
h2.display-section { font-size: clamp(28px, 3vw, 38px) !important; }

/* Large overlay titles (Switzerland / Costa Blanca on Home) */
h3[class*="lg:text-[46px]"] { font-size: clamp(26px, 2.6vw, 34px) !important; }

/* Calmer line breaks in headlines */
h1, h2 { text-wrap: balance; }

/* Lead paragraphs: 17px -> 16px */
p[class*="md:text-[17px]"],
div[class*="md:text-[17px]"] { font-size: 16px !important; }

/* Italic testimonial quotes: 18px -> 17px */
p[class*="md:text-[18px]"] { font-size: 17px !important; }

/* Readability floor for running text (small copy was 12-13px) */
ul[class*="text-[13px]"],
div.space-y-4[class*="text-[13px]"] { font-size: 14px !important; }
p[class*="text-[12px]"][class*="max-w-[320px]"] { font-size: 13.5px !important; }
div.space-y-4[class*="text-brand-oliveLight/70"] { color: rgba(242, 239, 233, 0.85) !important; }

/* Mobile header: keep the wordmark clear of the menu button */
@media (max-width: 420px) {
  #header-logo-main { font-size: 20px !important; }
}
@media (max-width: 340px) {
  #header-logo-main { font-size: 17px !important; }
}

/* ==========================================================================
   Hero fit: the first screen shows the essentials at any window size.
   Heights follow the window height (svh), so resizing the window just works.
   ========================================================================== */

/* Slimmer sticky navigation (home page keeps its own overlay header) */
@media (min-width: 768px) {
  nav.sticky#navbar {
    padding-top: clamp(14px, 2.4vh, 26px) !important;
    padding-bottom: clamp(14px, 2.4vh, 26px) !important;
  }
}
@media (max-width: 767px) {
  nav.sticky#navbar {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}

/* Destinations + destination pages: tighter spacing above and below the images */
header.relative.bg-brand-olive {
  padding-top: clamp(24px, 4.5vh, 56px) !important;
  padding-bottom: clamp(40px, 6vh, 64px) !important;
}
header.relative.bg-brand-olive > div:first-child {
  margin-bottom: clamp(20px, 3.6vh, 48px) !important;
}

@media (min-width: 768px) {
  /* Single destination hero (Switzerland, Costa Blanca): image height follows the window */
  header.relative.bg-brand-olive > div.max-w-\[440px\] > div[class*="aspect-"] {
    aspect-ratio: auto !important;
    height: clamp(300px, calc(100svh - 300px), 620px);
  }
  /* Destinations overview: two image cards follow the window height */
  header.relative.bg-brand-olive > div.max-w-\[840px\] > a[class*="aspect-"] {
    aspect-ratio: auto !important;
    height: clamp(280px, calc(100svh - 320px), 520px);
  }
  header.relative.bg-brand-olive > div.mt-\[80px\] {
    margin-top: clamp(32px, 6vh, 80px) !important;
  }
}
@media (max-width: 767px) {
  /* Mobile: stacked cards a little shorter */
  header.relative.bg-brand-olive > div.max-w-\[840px\] > a[class*="aspect-"] {
    aspect-ratio: 1 / 1 !important;
  }
}

/* About: portrait scales with the window height and is never cut off */
@media (min-width: 768px) {
  header.about-hero.about-hero {
    padding-top: clamp(20px, 4vh, 64px) !important;
    padding-bottom: clamp(20px, 4vh, 64px) !important;
  }
  header.about-hero img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100svh - 220px);
  }
  .about-story__photo { top: 7rem !important; }
}

/* Pages with a plain heading block (Services, Journal, articles, Contact, legal):
   less empty space above the first line, so content starts higher */
@media (min-width: 768px) {
  nav.sticky#navbar ~ header.bg-brand-light:not(.about-hero),
  main#main > header.bg-brand-light:not(.about-hero) {
    padding-top: clamp(24px, 4.5vh, 64px) !important;
    padding-bottom: clamp(24px, 4.5vh, 56px) !important;
  }
  nav.sticky#navbar ~ section.pb-32:first-of-type,
  main#main > section.pb-32:first-of-type {
    padding-top: clamp(24px, 4.5vh, 64px) !important;
  }
  nav.sticky#navbar ~ main.w-full {
    padding-top: clamp(32px, 6vh, 112px) !important;
  }
}

/* Navigation: spacing between the menu items grows smoothly with the window width (1024 to 1535 px) */
@media (min-width: 1024px) and (max-width: 1535px) {
  nav#navbar { --nav-gap: clamp(30px, 4.2vw - 12px, 48px); --nav-logo-gap: clamp(44px, 9.96vw - 57px, 96px); }
  nav#navbar > div.flex-1 { padding-left: var(--nav-logo-gap) !important; padding-right: var(--nav-logo-gap) !important; column-gap: var(--nav-gap); }
  nav#navbar > div.flex-1 > .nav-link { margin-left: 0 !important; margin-right: 0 !important; }
}

/* Footer: direct contact (email + contact form) */
.footer-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.75rem;
  margin-top: -0.5rem;
}
.footer-contact__mail {
  font-size: 15px;
  letter-spacing: 0.04em;
  color: #F2EFE9;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(242, 239, 233, 0.4);
  transition: border-color 0.3s ease;
}
.footer-contact__form {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242, 239, 233, 0.9);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.footer-contact__mail:hover,
.footer-contact__mail:focus-visible,
.footer-contact__form:hover,
.footer-contact__form:focus-visible { border-bottom-color: #F2EFE9; }
.footer-contact__sep { width: 1px; height: 14px; background: rgba(242, 239, 233, 0.3); }
@media (max-width: 480px) { .footer-contact__sep { display: none; } }

/* Footer: unified layout (brand + five link columns on one single line + centered legal/copy row) */
.site-footer { border-top: 1px solid rgba(242, 239, 233, 0.1); padding: clamp(36px, 4.5vh, 52px) 24px 28px; }
.site-footer__inner { max-width: 82rem; margin: 0 auto; display: grid; grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); gap: 1.75rem 2.25rem; align-items: start; }
.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer__brand .site-footer__tagline { margin-top: 0.75rem; max-width: 260px; font-size: 12px; line-height: 1.6; font-weight: 300; color: rgba(242, 239, 233, 0.7); }
.site-footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.25fr); gap: 1rem 1.25rem; }
.site-footer__title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(242, 239, 233, 0.75);
  margin: 0 0 0.75rem;
}
.site-footer__title::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 10px;
  background: rgba(242, 239, 233, 0.4);
  flex-shrink: 0;
}
.site-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.site-footer__list a { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(242, 239, 233, 0.88); transition: color 0.3s ease; }
.site-footer__list a:hover, .site-footer__list a:focus-visible { color: #fff; }
.site-footer__list a.site-footer__mail { font-size: 11.5px; letter-spacing: 0.10em; text-transform: uppercase; overflow-wrap: anywhere; }
.site-footer__bottom { max-width: 82rem; margin: clamp(24px, 3vh, 36px) auto 0; padding-top: 1.15rem; border-top: 1px solid rgba(242, 239, 233, 0.1); display: flex; align-items: center; justify-content: center; text-align: center; }
.site-footer__copy { font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(242, 239, 233, 0.72); }
@media (max-width: 960px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: 1.75rem; }
}
@media (max-width: 767px) {
  .site-footer { padding-left: 24px; padding-right: 24px; }
  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
  .site-footer__col--contact { grid-column: 1 / -1; }
  .site-footer__bottom { text-align: center; justify-content: center; }
}



/* ==========================================================================
   Spacing balance: more air between the navigation and the first content.
   Still follows the window height, so the first screen stays compact.
   ========================================================================== */
@media (min-width: 768px) {
  nav.sticky#navbar {
    padding-top: clamp(18px, 3vh, 30px) !important;
    padding-bottom: clamp(18px, 3vh, 30px) !important;
  }
  /* Destinations pages (olive header): more room above the eyebrow and below the images */
  header.relative.bg-brand-olive {
    padding-top: clamp(52px, 9vh, 96px) !important;
    padding-bottom: clamp(48px, 7vh, 72px) !important;
  }
  header.relative.bg-brand-olive > div.max-w-\[440px\] > div[class*="aspect-"] {
    height: clamp(300px, calc(100svh - 360px), 600px);
  }
  header.relative.bg-brand-olive > div.max-w-\[840px\] > a[class*="aspect-"] {
    height: clamp(280px, calc(100svh - 380px), 500px);
  }
  /* Plain heading pages (Services, Journal, articles, Contact, legal) */
  nav.sticky#navbar ~ header.bg-brand-light:not(.about-hero),
  main#main > header.bg-brand-light:not(.about-hero) {
    padding-top: clamp(52px, 9vh, 100px) !important;
    padding-bottom: clamp(44px, 6.5vh, 80px) !important;
  }
  nav.sticky#navbar ~ section.pb-32:first-of-type,
  main#main > section.pb-32:first-of-type {
    padding-top: clamp(52px, 9vh, 100px) !important;
  }
  nav.sticky#navbar ~ main.w-full {
    padding-top: clamp(56px, 9vh, 120px) !important;
  }
  header.about-hero.about-hero {
    padding-top: clamp(32px, 6vh, 80px) !important;
    padding-bottom: clamp(32px, 5vh, 72px) !important;
  }
  header.about-hero img { max-height: calc(100svh - 260px); }
}
@media (max-width: 767px) {
  header.relative.bg-brand-olive {
    padding-top: 48px !important;
  }
  nav.sticky#navbar ~ header.bg-brand-light:not(.about-hero),
  main#main > header.bg-brand-light:not(.about-hero) {
    padding-top: 56px !important;
    padding-bottom: 48px !important;
  }
}

/* Journal overview: a little more space between the heading and the first article */
header.bg-brand-light + section > div.max-w-4xl.space-y-24 { padding-top: 0.5rem; }
@media (min-width: 768px) {
  header.bg-brand-light + section > div.max-w-4xl.space-y-24 { padding-top: 1rem; }
}

/* Footer: slightly stronger small text for better legibility */
.site-footer__title { color: rgba(242, 239, 233, 0.72); }
.site-footer__copy { color: rgba(242, 239, 233, 0.72); }
.site-footer__legal a { color: rgba(242, 239, 233, 0.8); }

/* Journal: date and category line with better contrast */
span.block[class*="text-brand-dark/50"] { color: rgba(30, 27, 22, 0.68); }

/* Journal overview: slightly larger images, more editorial feel */
@media (min-width: 768px) {
  a.group > div[class*="md:w-[240px]"] { width: 280px; }
}

/* Very wide screens: navigation stays within a comfortable width */
@media (min-width: 1700px) {
  nav#navbar { padding-left: calc((100vw - 1500px) / 2); padding-right: calc((100vw - 1500px) / 2); }
}

/* Skip link: visible only on keyboard focus */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; padding: 12px 18px; background: #fdfcfa; color: #1e1b16; font-family: Manrope, sans-serif; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; }
.skip-link:focus { left: 16px; top: 16px; outline: 2px solid #3e4432; outline-offset: 2px; }
main:focus { outline: none; }

/* Green content boxes (phones): the utility padding classes are not compiled, so give them even vertical padding */
@media (max-width: 767px) {
  .why-box { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}

@media (max-width: 440px) {
  h1.font-display[class*="md:text-[44px]"] { font-size: clamp(20px, 7vw, 30px) !important; }
}

/* ==========================================================================
   Rhythm and alignment (one shared system)
   1) Every content section uses the same vertical padding, so the space between
      sections is equal everywhere (phones 56px, larger screens 72px).
   2) Phones: reading text and headings are left-aligned. Only the page opener
      (first screen), the testimonials and the footer stay centred.
   ========================================================================== */
:root { --sec-y: 56px; }
@media (min-width: 768px) { :root { --sec-y: 72px; } }

main > section:not(#home):not(#services):not(.cx-form-section):not(:has(> .dest-cards)),
main > div > section:not(#home):not(:has(> .dest-cards)) {
  padding-top: var(--sec-pt, var(--sec-y)) !important;
  padding-bottom: var(--sec-y) !important;
}
/* Explore pages (phones): the intro sits closer to the hero image */
@media (max-width: 767px) {
  header.relative.bg-brand-olive + section.bg-brand-olive { --sec-pt: 1rem; }
}
.cx-form-section { padding-bottom: var(--sec-y) !important; }

@media (max-width: 767px) {
  main > section:not(#home):not(:has(.kw-quotes)):not(:has(> .dest-cards)),
  main > section:not(#home):not(:has(.kw-quotes)):not(:has(> .dest-cards)) .text-center,
  main > section:not(#home):not(:has(.kw-quotes)):not(:has(> .dest-cards)) .cx-head,
  main > section:not(#home):not(:has(.kw-quotes)):not(:has(> .dest-cards)) .region-slider > div,
  main > section:not(#home):not(:has(.kw-quotes)):not(:has(> .dest-cards)) .cx-step,
  main > section:not(#home):not(:has(.kw-quotes)):not(:has(> .dest-cards)) .why-box {
    text-align: left !important;
  }
  main > section:not(#home):not(:has(.kw-quotes)):not(:has(> .dest-cards)) .flex-col.items-center,
  main > section:not(#home):not(:has(.kw-quotes)):not(:has(> .dest-cards)) .cx-head,
  main > section:not(#home):not(:has(.kw-quotes)):not(:has(> .dest-cards)) .region-slider > div {
    align-items: flex-start !important;
  }
  main > section:not(#home):not(:has(.kw-quotes)):not(:has(> .dest-cards)) .mx-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  /* Outlined buttons keep their label centred, also when it wraps to two lines */
  main > section:not(#home):not(:has(.kw-quotes)):not(:has(> .dest-cards)) a.border {
    text-align: center !important;
  }

  /* Text-only page openers on light ground (Services, Journal, articles) are left-aligned too */
  main > header.bg-brand-light,
  main > header.bg-brand-light .text-center {
    text-align: left !important;
  }
  main > header.bg-brand-light .flex-col.items-center {
    align-items: flex-start !important;
  }
  main > header.bg-brand-light .mx-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

/* Very small phones (320 px class): long German headline words must stay inside the page when left-aligned */
@media (max-width: 340px) {
  main h2.font-display, main h2.display-section { font-size: clamp(20px, 6.8vw, 28px) !important; overflow-wrap: break-word; }
}

/* Phones: all outlined buttons share one compact size (no more full-width bars) */
@media (max-width: 767px) {
  main a.border,
  main a.button,
  main form button[type="submit"] {
    box-sizing: border-box;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    max-width: 100%;
    min-height: 46px;
    padding: 13px 26px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.22em !important;
    line-height: 1.5;
    text-align: center !important;
  }
}
@media (max-width: 340px) {
  main a.border, main a.button, main form button[type="submit"] { padding-left: 14px !important; padding-right: 14px !important; letter-spacing: 0.16em !important; }
}

/* Headlines: never hyphenate automatically, and keep hyphenated compound words together (whole word moves to the next line) */
h1, h2, h3, h4, .font-display, .faq-acc-q {
  hyphens: none;
  -webkit-hyphens: none;
}
.nb { white-space: nowrap; }

/* ==========================================================================
   One grid on phones: text, images and boxes all start at 24px and end at the
   same right edge. Boxes use one inner padding (28px).
   ========================================================================== */
@media (max-width: 767px) {
  /* About: remove the extra side padding that pushed intro text and photos in to 40px */
  header.about-hero .p-4,
  .about-story__photo.p-4 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  header.about-hero img,
  .about-story__photo img {
    max-width: none !important;
    width: 100% !important;
  }
  /* Boxes: same inner side padding everywhere */
  .why-box,
  .places-col {
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important;
  }
  /* Footer uses the same side gutter as the pages */
  .site-footer { padding-left: 24px !important; padding-right: 24px !important; }

  /* Destinations opener: heading, intro text and button left-aligned like the rest of the site; captions on the photos stay centred */
  header:has(a[href="#switzerland"]) { align-items: flex-start !important; }
  header:has(a[href="#switzerland"]) > div:first-child { align-items: flex-start !important; }
  header:has(a[href="#switzerland"]) > div:first-child p { text-align: left !important; }
  header:has(a[href="#switzerland"]) > div:first-child .mx-auto { margin-left: 0 !important; }
  header:has(a[href="#switzerland"]) h1.text-center { text-align: left !important; }
  header:has(a[href="#switzerland"]) > div.space-y-6 {
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  header:has(a[href="#switzerland"]) > a.border { align-self: flex-start; }
}

/* ==========================================================================
   FAQ sections (tablet and phones): heading and intro first, then the questions,
   and "Still have questions?" below the questions
   ========================================================================== */
@media (max-width: 1023px) {
  section:has(.faq-accordion-item) > div {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: 0 !important;
  }
  section:has(.faq-accordion-item) > div > div.order-1 { display: contents; }
  section:has(.faq-accordion-item) > div > div.order-1 > * { order: 1; }
  section:has(.faq-accordion-item) > div > div.order-2 { order: 2; }
  section:has(.faq-accordion-item) > div > div.order-1 > div.border-t {
    order: 3;
    margin-top: 2.25rem;
    padding-top: 0;
    border-top: 0;
    max-width: none;
  }
}

/* ==========================================================================
   Services quick navigation: four entries as a calm 2 x 2 grid (tablet and desktop)
   ========================================================================== */
.svc-beyond { scroll-margin-top: 7rem; }
@media (min-width: 768px) {
  nav.svc-quick {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 0;
  }
  nav.svc-quick a {
    border-bottom: 1px solid rgba(140, 130, 116, 0.3);
    border-left: 0;
    padding: 1rem 0.75rem;
  }
  nav.svc-quick a:nth-child(odd) { border-left: 0; }
  nav.svc-quick a:nth-child(even) { border-left: 1px solid rgba(140, 130, 116, 0.3); }
}
@media (max-width: 340px) {
  nav.svc-quick a { letter-spacing: 0.1em; gap: 0.75rem; }
}

/* ==========================================================================
   Even vertical rhythm around images (phones and tablets that stack):
   an image sits 40px from the text next to it, and 56px section padding below it
   ========================================================================== */
@media (max-width: 767px) {
  /* About: opener (text, then portrait) */
  header.about-hero > div { gap: 2.5rem !important; }
  header.about-hero > div > div:first-child { padding-bottom: 0 !important; }
  header.about-hero > div > div:last-child { padding-top: 0 !important; padding-bottom: 0 !important; }
  header.about-hero.about-hero { padding-bottom: var(--sec-y) !important; }
  /* About: story (text, then portrait) */
  main .about-story { gap: 2.5rem; }
  .about-story__photo.p-4 { padding-top: 0 !important; padding-bottom: 0 !important; }
  /* Services: photo and text of each service */
  main .svcr { gap: 2.5rem; }
  /* Journal articles: photo and article text */
  div.max-w-5xl.mx-auto.px-6 + article.pt-16 { padding-top: 2.5rem !important; }
}
@media (max-width: 1023px) {
  /* Destinations: photo and text of Switzerland / Costa Blanca */
  #switzerland > div,
  #costa-blanca > div { gap: 2.5rem !important; }
}