/** Shopify CDN: Minification failed

Line 367:0 Unexpected "<"

**/
/* ============================================================
   SaundersRoam — theme.css
   Brand kit v2. Single source of truth for design tokens.
   Per-section styles live in each section's <style> block.
   ============================================================ */


/* ── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 16px; }
body {
  background: var(--sr-bg);
  color: var(--sr-ink);
  font-family: var(--f-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; padding: 0; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
/* Prevent iOS Safari zoom-on-focus — anything below 16px triggers it. */
@media (max-width: 768px) {
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="password"],
  textarea,
  select { font-size: 16px !important; }
}
ul, ol { list-style: none; }


/* ── BRAND TOKENS ───────────────────────────────────────── */
:root {

  /* — Surface — */
  --sr-bg:        #FFFFFF;     /* Primary surface */
  --sr-bg-soft:   #F8F8F5;     /* Off-white for alt sections */
  --sr-rule:      #E5E4DF;     /* Hairline rules, borders, dividers */

  /* — Ink — */
  --sr-ink:       #0D0E10;     /* Type, primary borders, dark sections */
  --sr-slate:     #3A3D44;     /* Secondary type */
  --sr-mute:      #7B7468;     /* Tactical labels, captions, mono mute */

  /* — Earned red — */
  --sr-red:       #E63329;     /* Wordmark dot, hero accents, small marks only */

  /* — City accents — */
  --city-blue:    #2D63A8;
  --city-yellow:  #D6A82B;
  --city-red:     #C13A2A;
  --city-teal:    #1F5048;
  --city-orange:  #C7621D;
  --city-purple:  #5B3D8F;

  /* — Trustpilot brand green — never change — */
  --trustpilot:   #00B67A;

  /* — Type families — */
  --f-display:    'Bricolage Grotesque', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --f-body:       'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono:       'Geist Mono', ui-monospace, 'SF Mono', monospace;

  /* — Weights — */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-xbold:     800;
  --weight-black:     900;

  /* — Font size scale — */
  --text-2xs:      9px;
  --text-xs:       11px;
  --text-sm:       13px;
  --text-base:     15px;
  --text-md:       16px;
  --text-lg:       17px;
  --text-xl:       18px;
  --text-2xl:      22px;
  --text-3xl:      26px;
  --text-4xl:      32px;
  --text-5xl:      40px;
  --text-6xl:      48px;
  --text-display:  clamp(40px, 4.5vw, 64px);
  --text-hero:     clamp(36px, 5vw, 72px);

  /* — Heading scale (single source of truth for ALL headings) —
     h1: hero page titles (Spain. / Your cart. / Where are you headed?)
     h2: major section heads (Popular destinations / Pick. Install. Connect.)
     h3: module / strip / large-card heads (More in Europe / end-CTA cards)
     h4: card titles inside grids (regional plan card / how-it-works step)
     h5: small tile / chip headings (destination card name)
     lede: paragraph that sits directly under h1/h2 */
  --text-h1:    clamp(34px, 4.2vw, 56px);
  --text-h2:    clamp(30px, 3.2vw, 40px);
  --text-h3:    clamp(24px, 2.4vw, 30px);
  --text-h4:    clamp(19px, 1.8vw, 22px);
  --text-h5:    clamp(15px, 1.3vw, 17px);
  --text-lede:  clamp(16px, 1.3vw, 18px);

  /* — Line heights — */
  --leading-tight:    1;
  --leading-snug:     1.2;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;
  --leading-loose:    1.75;

  /* — Letter spacing — */
  --tracking-tighter:  -0.045em;
  --tracking-tight:    -0.03em;
  --tracking-normal:   -0.01em;
  --tracking-wide:      0.06em;
  --tracking-wider:     0.1em;
  --tracking-widest:    0.14em;

  /* — Spacing scale (4px base) — */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* — Layout — */
  --max-width:   1280px;
  --gutter:      32px;
  --nav-height:  68px;

  /* — Border radius — */
  --r-none:    0;
  --r-sm:      4px;
  --r-md:      8px;
  --r-lg:      12px;
  --r-pill:    999px;

  /* — Motion — */
  --ease:    cubic-bezier(.4, .1, .2, 1);
  --t-fast:  .15s;
  --t-base:  .25s;
  --t-slow:  .4s;


  /* ── LEGACY ALIASES ──────────────────────────────────────
     Map old token names to the new palette so any not-yet-
     rebuilt section still renders with the new colours during
     the transition. Remove once every section is ported. */

  --navy:           var(--sr-ink);
  --navy-mid:       #1c1d20;
  --green:          var(--city-teal);
  --green-hover:    #173d36;
  --green-pale:     var(--sr-bg-soft);

  --white:          var(--sr-bg);
  --off:            var(--sr-bg-soft);
  --rule:           var(--sr-rule);
  --rule-mid:       #d3d2cd;
  --mid:            var(--sr-slate);
  --muted:          var(--sr-mute);

  --overlay-light:  rgba(13, 14, 16, 0.42);
  --overlay-mid:    rgba(13, 14, 16, 0.62);
  --overlay-heavy:  rgba(13, 14, 16, 0.82);
  --white-06:       rgba(255, 255, 255, 0.06);
  --white-10:       rgba(255, 255, 255, 0.10);
  --white-15:       rgba(255, 255, 255, 0.15);
  --white-20:       rgba(255, 255, 255, 0.20);
  --white-25:       rgba(255, 255, 255, 0.25);
  --white-35:       rgba(255, 255, 255, 0.35);
  --white-40:       rgba(255, 255, 255, 0.40);
  --white-45:       rgba(255, 255, 255, 0.45);
  --white-60:       rgba(255, 255, 255, 0.60);
  --white-70:       rgba(255, 255, 255, 0.70);
  --white-75:       rgba(255, 255, 255, 0.75);

  --font:           var(--f-body);

  --weight-heading: var(--weight-xbold);
  --weight-body:    var(--weight-regular);

  --shadow-sm:      0 1px 3px rgba(13, 14, 16, 0.06), 0 1px 2px rgba(13, 14, 16, 0.04);
  --shadow-md:      0 4px 16px rgba(13, 14, 16, 0.08), 0 2px 6px rgba(13, 14, 16, 0.05);
  --shadow-lg:      0 12px 40px rgba(13, 14, 16, 0.14);
  --shadow-card:    0 2px 12px rgba(13, 14, 16, 0.06);

  --r-xl:    16px;
}


/* ── BASE TYPE ──────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-display);
  font-weight: var(--weight-xbold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--sr-ink);
}
strong, b { font-weight: var(--weight-semibold); }
p { line-height: var(--leading-normal); color: inherit; }


/* ── ACCESSIBILITY ──────────────────────────────────────── */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: var(--sr-ink);
  color: var(--sr-bg);
  padding: var(--space-3) var(--space-5);
  font-family: var(--f-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-decoration: none;
  font-weight: var(--weight-medium);
}
.skip-to-content:focus { left: var(--space-4); top: var(--space-4); }

:focus-visible {
  outline: 2px solid var(--sr-ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ── UTILITIES ──────────────────────────────────────────── */
.wrap,
.page-width {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap--narrow { max-width: 780px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Used inline by mono kickers for the red middot separator */
.red { color: var(--sr-red); }


/* ── RESPONSIVE GUTTER ──────────────────────────────────── */
@media (max-width: 560px) {
  :root { --gutter: 20px; }
}


/* ── POLICY PAGES (rendered by layout/policy.liquid) ────── */
.policy-hero {
  padding: var(--space-12) 0 var(--space-6);
  border-bottom: 1px solid var(--sr-rule);
  background: var(--sr-bg);
}
.policy-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.policy-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--f-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--sr-mute);
  font-weight: var(--weight-medium);
}
.policy-breadcrumb a { transition: color var(--t-fast) var(--ease); }
.policy-breadcrumb a:hover { color: var(--sr-ink); }
.policy-breadcrumb span { color: var(--sr-rule); }
.policy-breadcrumb span:last-child { color: var(--sr-ink); }
.policy-title {
  font-family: var(--f-display);
  font-weight: var(--weight-xbold);
  font-size: var(--text-h1);
  letter-spacing: var(--tracking-tight);
  line-height: 0.95;
  color: var(--sr-ink);
}

.policy-body { padding: var(--space-12) 0 var(--space-20); background: var(--sr-bg); }
.policy-content {
  max-width: 720px;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--sr-slate);
}
.policy-content h2 {
  font-family: var(--f-display);
  font-weight: var(--weight-xbold);
  font-size: var(--text-h3);
  letter-spacing: var(--tracking-tight);
  color: var(--sr-ink);
  margin: var(--space-10) 0 var(--space-4);
  padding-top: var(--space-10);
  border-top: 1px solid var(--sr-rule);
}
.policy-content h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.policy-content h3 {
  font-family: var(--f-display);
  font-weight: var(--weight-xbold);
  font-size: var(--text-h4);
  color: var(--sr-ink);
  margin: var(--space-6) 0 var(--space-3);
}
.policy-content p { margin-bottom: var(--space-4); }
.policy-content ul, .policy-content ol { padding-left: var(--space-6); margin-bottom: var(--space-4); }
.policy-content li { margin-bottom: var(--space-2); }
.policy-content a {
  color: var(--sr-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--sr-rule);
}
.policy-content a:hover { color: var(--sr-red); text-decoration-color: var(--sr-red); }
.policy-content strong { color: var(--sr-ink); font-weight: var(--weight-semibold); }
.policy-content > h1:first-child,
.policy-content > .shopify-policy__title { display: none; }


/* ── SCROLL REVEAL (small fade-up on scroll-into-view) ──── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
</content>
</invoke>