/* =====================================================================
   Magical Travel Society — site styles
   "Charming travel postcard" redesign, September 2026.
   The design system, component catalogue and illustration rules live in
   work/DESIGN.md. Every class used by the original pages and scripts is
   still styled here, so pages that have not been redesigned keep working.
   ===================================================================== */

:root {
  /* ---- palette ---- */
  --cream:     #FFF8EE;   /* page background */
  --paper:     #FFFDF9;   /* .band-white, cards */
  --white:     #FFFFFF;
  --sand:      #FBEEDC;   /* .band-sand */
  --sand-2:    #F3DDBF;
  --sand-3:    #EACB91;
  --sky-50:    #EEF8FB;   /* .band-sky */
  --sky:       #CDEBF3;   /* header + hero sky */
  --sky-2:     #9FD8EA;
  --sun:       #FFC857;
  --sun-lt:    #FFE9B0;
  --peach:     #FFD9C2;
  --peach-lt:  #FFEEE3;
  --coral:     #F4845F;   /* primary accent (fills, buttons with ink text) */
  --coral-600: #B5462A;   /* text-safe coral: labels, links on hover */
  --coral-700: #93381F;
  --blush:     #FBD8D8;
  --rose:      #EE8E99;
  --lagoon:    #C3EBE4;
  --sea-300:   #6CC6C8;
  --sea:       #2E9AA6;
  --sea-600:   #1C6E78;   /* text-safe teal: links */
  --sea-900:   #133F47;   /* footer, .band-deep */
  --leaf-lt:   #CDE8C4;
  --leaf-300:  #A9D59A;
  --leaf:      #5FAE7E;
  --leaf-600:  #3F8A63;
  --lilac:     #E6DDF6;
  --lilac-2:   #B9A6E0;
  --ink:       #1F3440;   /* all body text + headings */
  --ink-soft:  #46606B;
  --muted:     #5E6E76;
  --rule:      #EBDDC9;

  /* ---- legacy names (older markup + inline styles still reference these) ---- */
  --midnight: var(--sea-900);
  --deep:     var(--sea-600);
  --deep-2:   var(--sea);
  --gold:     var(--coral-600);
  --gold-lt:  var(--sun);
  --gold-bg:  var(--peach-lt);
  --ivory:    var(--cream);

  /* ---- type ---- */
  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  /* ---- shape ---- */
  --r-xs: 8px;
  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 30px;
  --r-pill: 999px;

  /* ---- depth (warm, soft, ink-tinted) ---- */
  --sh-sm: 0 1px 2px rgba(31,52,64,.05), 0 8px 20px -10px rgba(31,52,64,.18);
  --sh-md: 0 2px 6px rgba(31,52,64,.05), 0 18px 40px -20px rgba(31,52,64,.30);
  --sh-lg: 0 6px 16px rgba(31,52,64,.06), 0 32px 60px -28px rgba(31,52,64,.38);

  /* ---- spacing ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --measure: 66ch;
  --pad: clamp(18px, 5vw, 40px);

  /* ---- section edge (wave) ---- */
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20C90 0 270 0 360 20S630 40 720 20V40H0z'/%3E%3C/svg%3E");
  --scallop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 18'%3E%3Ccircle cx='18' cy='18' r='18'/%3E%3C/svg%3E");

  color-scheme: light;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

.shell { max-width: 1200px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.narrow { max-width: 800px; margin-left: auto; margin-right: auto; }
.center { text-align: center; }
.center p, .center .lede { margin-left: auto; margin-right: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ============================ typography ============================ */

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-variation-settings: "SOFT" 100;
  letter-spacing: -.012em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 5.4vw, 3.7rem); line-height: 1.07; margin: 0 0 20px; }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.45rem); line-height: 1.14; margin: 0 0 18px; }
h3 { font-size: clamp(1.18rem, 2vw, 1.36rem); line-height: 1.26; margin: 34px 0 10px; }

p { margin: 0 0 18px; max-width: var(--measure); }
section > .narrow > h2:not(:first-child):not(.label + h2) { margin-top: 52px; }
ul, ol { max-width: var(--measure); padding-left: 22px; margin: 0 0 22px; }
li { margin-bottom: 9px; }
strong { font-weight: 800; }

a {
  color: var(--sea-600);
  text-decoration-color: var(--coral);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  font-weight: 700;
}
a:hover { color: var(--coral-600); }

/* the handwritten eyebrow above headings */
.label {
  font-family: var(--f-hand);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--coral-600);
  margin: 0 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.label::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  background: url(images/deco-sparkle.svg) center / contain no-repeat;
}
.lede { font-size: 1.16rem; color: var(--ink-soft); max-width: 60ch; }

/* little hand-drawn squiggle under section headings */
.sec-head h2::after,
.narrow > h2::after,
.split > div > h2::after,
.core-talk > h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 12px;
  margin-top: 12px;
  background: url(images/deco-squiggle.svg) left center / contain no-repeat;
}
.center h2::after, .sec-head.center h2::after { margin-left: auto; margin-right: auto; background-position: center; }

/* ============================ buttons ============================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.2;
  text-transform: none;
  padding: 15px 28px;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  background: var(--coral);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 0 #D9603F, 0 12px 22px -12px rgba(181,70,42,.55);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.btn:hover { background: #F7976F; color: var(--ink); transform: translateY(-2px); box-shadow: 0 6px 0 #D9603F, 0 16px 26px -12px rgba(181,70,42,.55); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #D9603F; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: none;
}
.btn-ghost:hover { background: var(--white); color: var(--ink); box-shadow: 0 4px 0 var(--ink); }

.btn-light {
  background: var(--sun);
  color: var(--ink);
  box-shadow: 0 4px 0 #E0A93A, 0 12px 22px -12px rgba(160,110,20,.5);
}
.btn-light:hover { background: #FFD479; color: var(--ink); box-shadow: 0 6px 0 #E0A93A, 0 16px 26px -12px rgba(160,110,20,.5); }

/* ============================ header ============================ */

.site-header {
  background: var(--sky);
  color: var(--ink);
  position: relative;
  z-index: 20;
}
.hdr-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand {
  text-decoration: none;
  color: var(--ink);
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 12px;
  align-items: center;
  line-height: 1.05;
  font-weight: 400;
}
.brand::before {
  content: "";
  grid-row: 1 / span 2;
  width: 46px;
  height: 46px;
  background: url(images/favicon.svg) center / contain no-repeat;
  filter: drop-shadow(0 3px 4px rgba(31,52,64,.15));
  transition: transform .3s ease;
}
.brand:hover::before { transform: rotate(-10deg) scale(1.05); }
.brand .b-main {
  font-family: var(--f-display);
  font-weight: 600;
  font-variation-settings: "SOFT" 100;
  font-size: 1.32rem;
  letter-spacing: -.005em;
  display: block;
  align-self: end;
}
.brand .b-sub {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sea-600);
  display: block;
  margin-top: 5px;
  align-self: start;
  white-space: nowrap;
}
.brand:hover { color: var(--ink); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 9px 18px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--ink);
}
.nav-toggle:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }

.site-nav { display: none; flex-basis: 100%; }
.site-nav.open { display: block; }
.site-nav > ul {
  list-style: none;
  margin: 0 0 8px;
  padding: 10px;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--paper);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
}
.site-nav li { margin: 0; }
.site-nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  padding: 11px 16px;
  display: block;
  border-radius: 14px;
  white-space: nowrap;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { background: var(--peach-lt); color: var(--coral-600); }
.site-nav .nav-cta a {
  background: var(--coral);
  color: var(--ink);
  text-align: center;
  margin-top: 6px;
  border-radius: var(--r-pill);
  font-weight: 800;
}
.site-nav .nav-cta a[aria-current="page"] { background: var(--coral); color: var(--ink); }   /* the CTA stays a coral button on its own page */
.site-nav .nav-cta a:hover { background: #F7976F; color: var(--ink); }

/* ---- "More trips" disclosure (button + list; script at the foot of every page) ----
   Phone/tablet: an inline, indented list inside the open menu.
   Desktop (>=1180px): a small dropdown card under the button. */
.nav-more-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: none;
  border: 0;
  border-radius: 14px;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 700;
  line-height: inherit;
  text-align: left;
  padding: 11px 16px;
  cursor: pointer;
}
.nav-more-btn::after {                       /* chevron, turns up when open */
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  border-radius: 1px;
  transform: translateY(-3px) rotate(45deg);
  transition: transform .2s ease;
}
.nav-more-btn[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); }
.nav-more-btn:hover,
.nav-more-btn[aria-expanded="true"],
.nav-more:has(a[aria-current="page"]) > .nav-more-btn { background: var(--peach-lt); color: var(--coral-600); }
.nav-more-btn:focus-visible { outline: 3px solid var(--sea-600); outline-offset: 2px; border-radius: 14px; }
.nav-sub {
  display: none;
  list-style: none;
  margin: 2px 0 6px 16px;
  padding: 2px 0 2px 12px;
  max-width: none;
  border-left: 2px dashed var(--rule);
}
.nav-more-btn[aria-expanded="true"] + .nav-sub { display: block; }
.nav-sub li { margin: 0; }

/* phone header sizes run up to 640px: between 441 and 640 the desktop-sized lockup ran under the Menu button */
@media (max-width: 640px) {
  .hdr-inner { gap: 10px; }
  .brand { column-gap: 8px; }
  .brand::before { width: 34px; height: 34px; }
  .brand .b-main { font-size: 1rem; }
  .brand .b-sub { font-size: 8.5px; letter-spacing: .08em; }
  .nav-toggle { padding: 8px 13px; font-size: 13px; }
}

@media (min-width: 1180px) {
  /* two tiers: the Travelmation lockup on top, the nav bar underneath */
  .hdr-inner { row-gap: 12px; padding-bottom: 16px; }
  .nav-toggle { display: none; }
  .site-nav { display: block !important; flex-basis: 100%; }
  .site-nav > ul {
    flex-direction: row;
    align-items: center;
    gap: 2px;
    padding: 6px;
    margin: 0;
    background: rgba(255,253,249,.72);
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 10px 24px -18px rgba(31,52,64,.45);
    border-radius: var(--r-pill);
  }
  .site-nav a { font-size: 15px; padding: 9px 15px; border-radius: var(--r-pill); }
  .site-nav a:hover, .site-nav a[aria-current="page"] { background: var(--white); color: var(--coral-600); }
  .site-nav .nav-cta { margin-left: auto; }
  .site-nav .nav-cta a {
    margin: 0;
    padding: 10px 22px;
    font-size: 15px;
    box-shadow: 0 3px 0 #D9603F;
  }
  .site-nav .nav-cta a:hover { background: #F7976F; }

  .nav-more { position: relative; }
  .nav-more-btn { width: auto; font-size: 15px; padding: 9px 15px; border-radius: var(--r-pill); }
  .nav-more-btn:hover,
  .nav-more-btn[aria-expanded="true"],
  .nav-more:has(a[aria-current="page"]) > .nav-more-btn { background: var(--white); }
  .nav-more-btn:focus-visible { border-radius: var(--r-pill); }
  .nav-sub {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    z-index: 30;
    min-width: 220px;
    margin: 0;
    padding: 8px;
    border-left: 0;
    background: var(--white);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
  }
  .nav-sub::before {                          /* little notch pointing at the button */
    content: "";
    position: absolute;
    top: -7px;
    left: 30px;
    width: 14px;
    height: 14px;
    background: var(--white);
    border-radius: 3px;
    transform: rotate(45deg);
  }
  .nav-sub a { position: relative; font-size: 15px; padding: 10px 16px; border-radius: 14px; }
  .nav-sub a:hover, .nav-sub a[aria-current="page"] { background: var(--peach-lt); }
}

/* ============================ Travelmation lockup ============================
   Travelmation brand guide (p.20-21): the complete Travelmation logo (suitcase + wordmark)
   comes FIRST, then clear space and a divider, then Magical Travel Society; both marks
   look about the same size and both are full colour; the logo is never altered and never
   narrower than 70px. The logo files are the official PNGs, copied untouched:
   images/tm-logo-full.png (navy + Columbia blue, light backgrounds) and
   images/tm-logo-white.png (white + Columbia blue, the dark footer).
   Only width is set here (height:auto keeps the proportions); no filters, no effects. */
.lockup {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.lockup .tm-logo {
  width: 128px;
  height: auto;
  flex: none;
}
.lockup-rule {
  flex: none;
  width: 2px;
  height: 46px;
  border-radius: 2px;
  background: rgba(31,52,64,.2);
}
.lockup .brand { min-width: 0; }
.lockup .brand .b-sub { letter-spacing: .14em; color: var(--sea-600); }
.b-sub .nw { white-space: nowrap; }        /* a wrapped eyebrow breaks as "Travel Advisor / with Travelmation" */
/* "Tri-State" drops out of the brand line on phones so the eyebrow stays two short lines beside the Menu button */
@media (max-width: 640px) { .b-sub .tri { display: none; } }
/* below the desktop nav the lockup shares its row with the Menu button and gives up width first */
@media (max-width: 1179px) {
  .site-header .lockup { flex: 1 1 0; }
  .nav-toggle { flex: none; }
  /* the eyebrow may break ("Travel Advisor / with Travelmation") rather than run under the Menu button */
  .site-header .lockup .brand .b-sub { white-space: normal; }
}
@media (max-width: 640px) {
  .lockup { gap: 10px; }
  .lockup .tm-logo { width: 100px; }
  .lockup-rule { height: 40px; }
  .lockup .brand { column-gap: 7px; }
  .lockup .brand::before { width: 32px; height: 32px; }
  .lockup .brand .b-main { font-size: .97rem; }
  .lockup .brand .b-sub { white-space: normal; line-height: 1.35; letter-spacing: .08em; }
}
@media (max-width: 370px) {
  .lockup { gap: 8px; }
  .lockup .tm-logo { width: 76px; }        /* never below the 70px minimum */
  .lockup .brand::before { width: 30px; height: 30px; }
  .lockup .brand .b-main { font-size: .94rem; }
}
/* the smallest phones (about 300-345px): a slimmer name, mark and Menu pill so nothing runs under the button.
   The Travelmation logo stays at 76px. */
@media (max-width: 345px) {
  .hdr-inner { gap: 8px; }
  .lockup { gap: 7px; }
  .lockup .brand { column-gap: 6px; }
  .lockup .brand::before { width: 26px; height: 26px; }
  .lockup .brand .b-main { font-size: .86rem; }
  .nav-toggle { padding: 7px 11px; font-size: 12.5px; }
}

/* footer version: white Travelmation logo, divider, sunset mark + name */
.lockup-foot { gap: 16px; margin-bottom: 18px; }
.lockup-foot .tm-logo { width: 124px; }
.lockup-foot .lockup-rule { height: 50px; background: rgba(255,248,238,.28); }
.foot-name {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 12px;
  align-items: center;
  line-height: 1.05;
}
.foot-name::before {
  content: "";
  grid-row: 1 / span 2;
  width: 46px;
  height: 46px;
  background: url(images/favicon.svg) center / contain no-repeat;
}
.site-footer .foot-name h4 { margin: 0; align-self: end; font-size: 1.2rem; }
.foot-name .b-sub {
  display: block;
  margin-top: 6px;
  align-self: start;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,248,238,.78);
}
@media (max-width: 440px) {
  .lockup-foot { gap: 12px; }
  .lockup-foot .tm-logo { width: 100px; }
  .lockup-foot .lockup-rule { height: 42px; }
  .foot-name { column-gap: 9px; }
  .foot-name::before { width: 38px; height: 38px; }
  .site-footer .foot-name h4 { font-size: 1.06rem; }
  .foot-name .b-sub { font-size: 8.5px; letter-spacing: .08em; line-height: 1.35; }
}

/* ============================ sections + edges ============================ */

section { padding: clamp(56px, 8vw, 96px) 0; position: relative; }
section.tight { padding: clamp(36px, 5vw, 60px) 0; }

.band-white { --band: var(--paper);  background: var(--paper); }
.band-sand  { --band: var(--sand);   background: var(--sand); }
.band-sky   { --band: var(--sky-50); background: var(--sky-50); }
.band-peach { --band: var(--peach-lt); background: var(--peach-lt); }
.band-deep  { --band: var(--sea-900); background: var(--sea-900); color: var(--cream); }
.band-deep h2, .band-deep h3 { color: var(--cream); }
.band-deep p, .band-deep li { color: rgba(255,248,238,.86); }
.band-deep strong { color: var(--sun-lt); }
.band-deep .label { color: var(--sun); }
.band-deep a { color: var(--sun-lt); }
.band-deep .btn-ghost { color: var(--cream); border-color: var(--cream); }
.band-deep .btn-ghost:hover { background: var(--cream); color: var(--ink); box-shadow: none; }

/* every section after the first gets a soft wave on its top edge, drawn in its own colour */
main > section ~ section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -39px;
  height: 40px;
  background: var(--band, var(--cream));
  -webkit-mask: var(--wave) repeat-x left bottom / 720px 40px;
  mask: var(--wave) repeat-x left bottom / 720px 40px;
  pointer-events: none;
}
/* opt-in scalloped edge instead of a wave */
main > section.edge-scallop::before {
  top: -17px;
  height: 18px;
  -webkit-mask: var(--scallop) repeat-x left bottom / 36px 18px;
  mask: var(--scallop) repeat-x left bottom / 36px 18px;
}
main > section.edge-none::before { display: none; }

.sec-head { margin-bottom: 40px; position: relative; }
.sec-head.center { text-align: center; }
.sec-head.center .lede { margin-left: auto; margin-right: auto; }
.sec-deco { position: absolute; pointer-events: none; }

/* ============================ home hero ============================ */

.hero {
  position: relative;
  background: linear-gradient(180deg, var(--sky) 0%, #E3F3F7 42%, var(--peach-lt) 100%);
  color: var(--ink);
  padding: clamp(28px, 5vw, 56px) 0 clamp(96px, 11vw, 150px);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 40px;
  background: var(--paper);
  -webkit-mask: var(--wave) repeat-x left bottom / 720px 40px;
  mask: var(--wave) repeat-x left bottom / 720px 40px;
}
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; position: relative; z-index: 1; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.02fr .98fr; gap: 40px; } }
.hero h1 { color: var(--ink); max-width: 17ch; font-size: clamp(2.3rem, 5vw, 3.45rem); }
.hero p { color: var(--ink-soft); font-size: 1.15rem; max-width: 50ch; }
/* restate the eyebrow size: ".hero p" would otherwise shrink it to body size (and below AA large-text) */
.hero .label { color: var(--coral-600); font-size: 1.8rem; }
.hero .hero-kicker {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1.1;
  color: var(--coral-600);
  margin: 4px 0 0;
  display: inline-block;
  transform: rotate(-2deg);
  position: relative;
  padding-bottom: 12px;
}
.hero-kicker::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 12px;
  background: url(images/deco-squiggle.svg) left center / 76px 12px repeat-x;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
/* where she is based and who she plans for (tri-state) */
.hero .hero-where { font-weight: 800; color: var(--ink); font-size: 1.06rem; margin-bottom: 12px; }
/* Adriana, thumbs up on the beach, as a small polaroid right beside the "Meet Adriana" button.
   The owner picked this picture on 9/29. The drawing is a 4:5 portrait (400x500); the white
   frame is the border, thicker along the bottom like a real polaroid. */
.hero-actions { align-items: center; }
.hero-adriana {
  flex: none;
  box-sizing: content-box;
  width: 140px;
  height: 175px;
  object-fit: cover;
  background: var(--white);
  border: 8px solid var(--white);
  border-bottom-width: 26px;
  border-radius: 6px;
  box-shadow: var(--sh-lg);
  transform: rotate(4deg);
  margin: -84px 0 -42px 22px;
  position: relative;
  z-index: 2;
}
/* two-column hero with a narrow text column: the picture drops to its own line, right-aligned under the buttons */
@media (min-width: 900px) and (max-width: 1240px) { .hero-adriana { width: 104px; height: 130px; border-width: 6px; border-bottom-width: 20px; margin: -4px 12px -24px auto; } }
/* one-column hero, tablet: room beside the buttons again */
@media (min-width: 561px) and (max-width: 899px) { .hero-adriana { width: 116px; height: 145px; border-width: 7px; border-bottom-width: 22px; margin: -64px 0 -30px 14px; } }
/* phones: under the "Meet Adriana" button, tucked over the top of the hero picture */
@media (max-width: 560px)  { .hero-adriana { width: 96px; height: 120px; border-width: 6px; border-bottom-width: 18px; margin: 0 16px -40px auto; } }
.hero-art { position: relative; }
.hero-art img { width: 100%; max-width: 600px; margin: 0 auto; }
@media (max-width: 899px) { .hero-art img { max-width: 440px; } }

/* floating decorations (clouds, sparkles, balloons) */
.deco { position: absolute; pointer-events: none; user-select: none; z-index: 0; }
.float-a { animation: floatA 7s ease-in-out infinite alternate; }
.float-b { animation: floatB 9s ease-in-out infinite alternate; }
.drift   { animation: drift 16s ease-in-out infinite alternate; }
@keyframes floatA { from { transform: translateY(0); } to { transform: translateY(-12px); } }
@keyframes floatB { from { transform: translateY(-6px) rotate(-3deg); } to { transform: translateY(8px) rotate(3deg); } }
@keyframes drift  { from { transform: translateX(0); } to { transform: translateX(28px); } }
/* left edge tracks the 1200px shell so the cloud (plus its 28px drift) always stays clear of the text column */
.hero-cloud { width: 140px; left: min(-34px, calc((100vw - 1200px) / 2 - 148px)); top: 56%; opacity: .95; }
.hero-spark { width: 22px; left: 47%; top: 8%; }
/* plane-on-a-dotted-path doodle beside a section heading (wide desktop only).
   It sits up in the eyebrow row, above the h2, so a long centred heading never runs into it. */
.home-plane, .services-deco-plane, .towns-plane { width: 180px; right: 0; top: -66px; }
.services-deco-plane, .towns-plane { right: 1%; }
@media (max-width: 1279px) { .home-plane, .services-deco-plane, .towns-plane { display: none; } }
/* the drifting hero cloud would slide under the intro paragraph between tablet and wide desktop */
@media (min-width: 900px) and (max-width: 1279px) { .hero-cloud { display: none; } }
@media (max-width: 899px) { .hero-cloud { left: -34px; top: auto; bottom: 30%; width: 110px; } .hero-spark { left: auto; right: 24px; top: 20px; } }

/* ============================ perks strip (home) ============================ */

.hero-sub {
  display: flow-root;
  background: var(--paper);
  color: var(--ink);
  padding: 0 0 12px;
  position: relative;
  z-index: 2;
}
.hero-sub-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: -72px;
}
@media (min-width: 760px) { .hero-sub-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.hs-item {
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  padding: 18px 20px;
  display: flex;
  gap: 16px;
  align-items: center;
}
.hs-icon { width: 64px; height: 64px; flex: none; }
.hs-item strong {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-variation-settings: "SOFT" 100;
  font-size: 1.14rem;
  color: var(--ink);
  margin-bottom: 2px;
}
.hs-item span { font-size: .94rem; color: var(--ink-soft); line-height: 1.5; display: block; }

/* ============================ interior page hero ============================ */

.page-hero {
  --band: var(--sky);
  position: relative;
  overflow: hidden;
  background:
    url(images/deco-cloud.svg) no-repeat right 7% top 26% / 150px auto,
    url(images/deco-cloud.svg) no-repeat right 22% bottom 30% / 96px auto,
    url(images/deco-sparkle.svg) no-repeat right 30% top 20% / 22px auto,
    url(images/deco-sparkle-coral.svg) no-repeat right 4% bottom 36% / 16px auto,
    radial-gradient(circle at calc(100% - 13%) 34%, var(--sun) 0 54px, rgba(255,233,176,.8) 55px 78px, transparent 79px),
    linear-gradient(180deg, var(--sky) 0%, #E3F3F7 50%, var(--peach-lt) 100%);
  color: var(--ink);
  padding: clamp(44px, 7vw, 80px) 0 clamp(80px, 10vw, 120px);
}
.page-hero > .shell { position: relative; z-index: 1; }
.page-hero h1 { color: var(--ink); max-width: 20ch; }
.page-hero p { color: var(--ink-soft); font-size: 1.14rem; max-width: 56ch; }
.page-hero .label { color: var(--coral-600); font-size: 1.8rem; }   /* beats ".page-hero p" */
@media (max-width: 899px) {
  .page-hero {
    background:
      url(images/deco-cloud.svg) no-repeat right -14px top 14px / 96px auto,
      url(images/deco-sparkle.svg) no-repeat right 110px top 22px / 16px auto,
      radial-gradient(circle at calc(100% - 40px) 34px, var(--sun) 0 30px, rgba(255,233,176,.8) 31px 44px, transparent 45px),
      linear-gradient(180deg, var(--sky) 0%, #E3F3F7 50%, var(--peach-lt) 100%);
    padding-top: 76px;
  }
}
/* a page hero that carries its own illustration: text left, art right */
.page-hero:has(.page-hero-art) { background: linear-gradient(180deg, var(--sky) 0%, #E3F3F7 50%, var(--peach-lt) 100%); padding-top: clamp(36px, 6vw, 64px); }
.page-hero-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
@media (min-width: 900px) { .page-hero-grid { grid-template-columns: 1.1fr .9fr; gap: 48px; } }
.page-hero-art img { width: 100%; max-width: 480px; margin: 0 auto; }

/* framed illustration: rounded tinted panel with a white sticker border */
.art-frame {
  display: block;
  background: var(--tint, var(--sky));
  border: 8px solid var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  overflow: hidden;
}
.art-frame img { width: 100%; height: auto; }
.art-frame.tilt { transform: rotate(-1.5deg); }

/* tint helpers — set the colour behind an illustration or a card */
.tint-sky    { --tint: var(--sky); }
.tint-lilac  { --tint: var(--lilac); }
.tint-lagoon { --tint: var(--lagoon); }
.tint-peach  { --tint: var(--peach-lt); }
.tint-sun    { --tint: var(--sun-lt); }
.tint-blush  { --tint: var(--blush); }
.tint-leaf   { --tint: var(--leaf-lt); }

/* ============================ service cards ============================ */

.cards { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .cards { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 12px 12px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 400;
  box-shadow: var(--sh-md);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { color: var(--ink); transform: translateY(-6px) rotate(-.5deg); box-shadow: var(--sh-lg); }
.card-art {
  display: block;
  background: var(--tint, var(--sky));
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 10px;
}
.card-art img { width: 100%; height: auto; transition: transform .4s ease; }
.card:hover .card-art img { transform: scale(1.04); }
.card h3 { margin: 0; font-size: 1.3rem; padding: 0 12px; }
.card p { margin: 0; font-size: .97rem; color: var(--ink-soft); max-width: none; padding: 0 12px; }
.card .more {
  align-self: flex-start;
  margin: auto 12px 0;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  background: var(--peach-lt);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--coral-600);
  transition: background .2s, color .2s;
}
.card p { margin-bottom: 14px; }
.card:hover .more { background: var(--coral); color: var(--ink); }

/* ============================ icon grid / reasons ============================ */

.reasons, .icon-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 8px; }
@media (min-width: 820px) { .reasons, .icon-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1020px) { .icon-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.reason, .icon-item {
  background: var(--white);
  border-radius: var(--r-md);
  padding: 24px 26px;
  box-shadow: var(--sh-sm);
}
.reason:has(> .reason-icon), .icon-item { display: flex; gap: 18px; align-items: flex-start; }
.reason-icon, .icon-item > img { width: 72px; height: 72px; flex: none; }
.reason h3, .icon-item h3 { margin: 4px 0 8px; font-size: 1.2rem; }
.reason p, .icon-item p { margin: 0; color: var(--ink-soft); font-size: .98rem; max-width: none; }
.reason.is-highlight, .icon-item.is-highlight { background: var(--sun-lt); box-shadow: none; }
@media (max-width: 480px) {
  .reason:has(> .reason-icon), .icon-item { flex-direction: column; gap: 10px; }
  .reason-icon, .icon-item > img { width: 60px; height: 60px; }
}

/* ============================ stack (numbered-feeling feature list) ============================ */

.stack { display: grid; gap: 14px; border-top: 0; margin: 8px 0 10px; }
.stack-item {
  position: relative;
  background: var(--white);
  border-radius: var(--r-md);
  padding: 22px 24px 22px 74px;
  box-shadow: var(--sh-sm);
  border-bottom: 0;
}
.stack-item::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 22px;
  width: 34px;
  height: 34px;
  background: url(images/deco-check.svg) center / contain no-repeat;
}
.stack-item h3 { margin: 2px 0 6px; }
.stack-item p:last-child { margin-bottom: 0; }
@media (max-width: 480px) {
  .stack-item { padding: 20px 20px 20px 62px; }
  .stack-item::before { left: 16px; top: 20px; width: 30px; height: 30px; }
}

/* ============================ pull quote / callout ============================ */

.pull {
  position: relative;
  background: var(--blush);
  border-radius: var(--r-md);
  padding: 26px 30px 26px 84px;
  margin: 36px 0;
  max-width: var(--measure);
  border-left: 0;
}
.pull::before {
  content: "\201C";
  content: "\201C" / "";   /* decorative only: screen readers skip it */
  position: absolute;
  left: 22px;
  top: 10px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 5.2rem;
  line-height: 1;
  color: var(--coral);
}
.pull::after {
  content: "";
  position: absolute;
  right: -10px;
  top: -12px;
  width: 30px;
  height: 30px;
  background: url(images/deco-heart.svg) center / contain no-repeat;
  transform: rotate(12deg);
}
.pull p { font-family: var(--f-display); font-weight: 500; font-variation-settings: "SOFT" 100; font-size: 1.32rem; line-height: 1.42; color: var(--ink); margin: 0; }
.band-deep .pull p { color: var(--ink); }

.callout {
  position: relative;
  background: var(--sun-lt);
  border: 2px dashed rgba(181,70,42,.35);
  border-radius: var(--r-md);
  padding: 22px 26px;
  margin: 30px 0;
  max-width: var(--measure);
}
.callout.has-icon { display: flex; gap: 16px; align-items: flex-start; }
.callout.has-icon > img { width: 56px; height: 56px; flex: none; }
.callout p:last-child { margin-bottom: 0; }

/* ============================ lists in content ============================ */

main section ul:not([class]) { list-style: none; padding-left: 0; }
main section ul:not([class]) > li { position: relative; padding-left: 30px; }
main section ul:not([class]) > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .38em;
  width: 17px;
  height: 17px;
  background: url(images/deco-sparkle-coral.svg) center / contain no-repeat;
}
.band-deep ul:not([class]) > li::before { background-image: url(images/deco-sparkle.svg); }
main section ol:not([class]) > li::marker { color: var(--coral-600); font-weight: 800; }

/* ============================ supplier groups ============================ */

.groups { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 12px; }
@media (min-width: 720px) { .groups { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
.group { background: var(--sky-50); border-radius: var(--r-md); padding: 20px 22px; }
.group:nth-child(6n+2) { background: var(--peach-lt); }
.group:nth-child(6n+3) { background: #EAF7F3; }
.group:nth-child(6n+4) { background: #FFF6DB; }
.group:nth-child(6n+5) { background: #FDEDED; }
.group:nth-child(6n+6) { background: #F3EFFB; }
.group h3 { margin: 0 0 6px; font-size: 1.1rem; }
.group p { margin: 0; font-size: .96rem; color: var(--ink-soft); max-width: none; }

/* ============================ picture frames ============================ */

/* legacy placeholder box (About page until it is redesigned) */
.imgblock {
  background: var(--sky-50) url(images/deco-sun.svg) center 38% / 72px auto no-repeat;
  border: 3px dashed var(--sky-2);
  border-radius: var(--r-md);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: var(--sea-600);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  padding: 20px;
}
.imgblock.portrait { aspect-ratio: 4 / 5; }

/* polaroid: white frame, washi tape, gentle tilt. Put an <img> inside. */
.polaroid {
  position: relative;
  margin: 18px auto 0;
  background: var(--white);
  padding: 14px 14px 58px;
  border-radius: 6px;
  box-shadow: var(--sh-lg);
  transform: rotate(2deg);
  max-width: 520px;
  width: 100%;
}
.polaroid.tilt-left { transform: rotate(-2.2deg); }
.polaroid img { width: 100%; height: auto; border-radius: 3px; }
.polaroid::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 50%;
  width: 118px;
  height: 32px;
  transform: translateX(-50%) rotate(-4deg);
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,.35) 0 6px, transparent 6px 12px), rgba(255,200,87,.82);
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(31,52,64,.08);
}
.polaroid::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 16px;
  width: 30px;
  height: 27px;
  background: url(images/deco-heart.svg) center / contain no-repeat;
}

.split { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 64px; } }
.split.align-center { align-items: center; }
.split.narrow-img { grid-template-columns: 1fr; }
@media (min-width: 900px) { .split.narrow-img { grid-template-columns: 340px 1fr; gap: 56px; } }

/* ============================ chips + badges ============================ */

/* font-size:0 visually hides the "·" separators between the pills (they stay in the markup),
   so a wrapped row never ends or starts with a stray dot */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--muted); max-width: none; font-size: 0; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px 7px 11px;
  border-radius: var(--r-pill);
  background: var(--lagoon);
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  transition: background .2s, transform .2s;
}
.chip::before { content: ""; width: 13px; height: 16px; flex: none; background: url(images/deco-pin.svg) center / contain no-repeat; }
.chip:hover { background: var(--sun-lt); color: var(--ink); transform: translateY(-2px); }

.badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--sun-lt);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ============================ postcards ============================ */

.postcards { display: grid; grid-template-columns: 1fr; gap: 30px; }
@media (min-width: 900px) { .postcards { grid-template-columns: 1fr 1fr; gap: 36px; } }
.postcard {
  position: relative;
  border: 8px solid transparent;
  border-radius: var(--r-md);
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    repeating-linear-gradient(135deg, var(--coral) 0 14px, var(--paper) 14px 22px, var(--sea) 22px 36px, var(--paper) 36px 44px) border-box;
  box-shadow: var(--sh-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.postcard:nth-child(2) { transform: rotate(.6deg); }
.postcard:nth-child(1) { transform: rotate(-.6deg); }
.postcard-art { border-radius: 16px; overflow: hidden; background: var(--tint, var(--peach-lt)); }
.postcard-art img { width: 100%; height: auto; }
.postcard-body { padding: 22px 10px 8px; display: flex; flex-direction: column; flex: 1; }
.postcard-body h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); }
.postcard-body p { color: var(--ink-soft); }
.postcard-body .label { color: var(--coral-600); }
.postcard-body .postcard-actions { margin-top: auto; padding-top: 8px; margin-bottom: 0; }
.postcard-stamp {
  position: absolute;
  top: -18px;
  right: 20px;
  width: 78px;
  height: auto;
  transform: rotate(8deg);
  filter: drop-shadow(0 4px 6px rgba(31,52,64,.18));
  z-index: 2;
}
@media (max-width: 520px) { .postcard-stamp { width: 56px; top: -24px; right: 10px; } }

/* ============================ steps + detail list + forms ============================ */

.form-wrap { background: var(--white); border-radius: var(--r-lg); box-shadow: var(--sh-md); padding: clamp(24px, 5vw, 44px); border: 0; }
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 7px;
}
.field .req { color: var(--coral-600); }
.field input, .field textarea, .field select {
  width: 100%;
  font-family: var(--f-body);
  font-size: 16px;
  color: var(--ink);
  background: var(--cream);
  border: 2px solid var(--rule);
  padding: 13px 16px;
  border-radius: var(--r-sm);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 1; font-size: 15px; }
.field input { text-overflow: ellipsis; }   /* if a hint ever runs long, it ends in "…" instead of a hard crop */
@media (max-width: 380px) { .field input::placeholder { font-size: 14px; } }
.field textarea { min-height: 128px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--sea);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(46,154,166,.22);
}
.field .hint { font-size: .88rem; color: var(--muted); margin: 6px 0 0; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 0 20px; }
@media (min-width: 620px) { .form-row { grid-template-columns: 1fr 1fr; } }

.contact-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 1.25fr 1fr; gap: 56px; } }

.steps { list-style: none; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; padding-left: 54px; position: relative; margin-bottom: 20px; min-height: 38px; }
.steps li::before {
  content: counter(s);
  position: absolute;
  left: 0;
  top: -2px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--sun);
  color: var(--ink);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 0 #E0A93A;
}

.detail-list { list-style: none; padding: 0; background: var(--white); border-radius: var(--r-md); box-shadow: var(--sh-sm); padding: 6px 22px; }
.detail-list li {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 2px dotted var(--rule);
  margin: 0;
  font-size: .97rem;
}
.detail-list li:last-child { border-bottom: 0; }
main section ul.detail-list > li::before { content: none; }
.detail-list dt, .detail-list .k {
  font-weight: 800;
  min-width: 96px;
  color: var(--coral-600);
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding-top: 3px;
}

/* ============================ CTA band (every page) ============================ */

.cta-band {
  --band: var(--sun-lt);
  position: relative;
  color: var(--ink);
  text-align: center;
  padding: clamp(64px, 9vw, 110px) 0 clamp(120px, 13vw, 170px);
  background:
    url(images/deco-cloud.svg) no-repeat left 5% top 30% / 150px auto,
    url(images/deco-cloud.svg) no-repeat right 7% bottom 30% / 120px auto,
    url(images/deco-plane-path.svg) no-repeat right 4% top 14% / 250px auto,
    url(images/deco-balloon.svg) no-repeat left 14% bottom 22% / 58px auto,
    url(images/deco-sparkle.svg) no-repeat left 22% top 16% / 22px auto,
    url(images/deco-sparkle-coral.svg) no-repeat right 26% bottom 42% / 16px auto,
    radial-gradient(circle at 50% calc(100% + 110px), var(--sun) 0 190px, rgba(255,200,87,.35) 191px 250px, transparent 251px),
    linear-gradient(180deg, var(--sun-lt) 0%, var(--peach) 58%, #FBD1CB 100%);
}
.cta-band > .shell { position: relative; z-index: 1; }
.cta-band h2 { color: var(--ink); margin-bottom: 14px; }
.cta-band h2::after { display: none; }
.cta-band p { color: var(--ink-soft); margin-left: auto; margin-right: auto; margin-bottom: 30px; max-width: 54ch; font-size: 1.08rem; }
.cta-band .btn-light { background: var(--coral); box-shadow: 0 4px 0 #D9603F, 0 12px 22px -12px rgba(181,70,42,.55); }
.cta-band .btn-light:hover { background: #F7976F; }
@media (max-width: 760px) {
  .cta-band {
    padding-top: 96px;
    background:
      url(images/deco-cloud.svg) no-repeat left -20px top 26px / 100px auto,
      url(images/deco-plane-path.svg) no-repeat right -10px top 14px / 170px auto,
      url(images/deco-sparkle.svg) no-repeat left 30% bottom 70px / 16px auto,
      radial-gradient(circle at 50% calc(100% + 80px), var(--sun) 0 130px, rgba(255,200,87,.35) 131px 175px, transparent 176px),
      linear-gradient(180deg, var(--sun-lt) 0%, var(--peach) 58%, #FBD1CB 100%);
  }
}

/* ============================ footer ============================ */

.site-footer {
  --band: var(--sea-900);
  position: relative;
  background: var(--sea-900);
  color: rgba(255,248,238,.78);
  padding: 60px 0 30px;
  font-size: .95rem;
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -39px;
  height: 40px;
  background: var(--sea-900);
  -webkit-mask: var(--wave) repeat-x left bottom / 720px 40px;
  mask: var(--wave) repeat-x left bottom / 720px 40px;
}
/* brand + lockup first; then What I Plan, Where I Work, About & Contact.
   Phones: the long "What I Plan" list runs down the left while the two short lists stack on the right. */
.foot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "brand brand" "plan towns" "plan about";
  gap: 30px 22px;
  padding-bottom: 34px;
}
.foot-brand { grid-area: brand; }
.foot-plan  { grid-area: plan; }
.foot-towns { grid-area: towns; }
.foot-about { grid-area: about; }
@media (min-width: 780px) {
  .foot-grid { grid-template-columns: repeat(3, 1fr); grid-template-areas: "brand brand brand" "plan towns about"; gap: 34px 40px; }
}
@media (min-width: 1080px) {
  .foot-grid { grid-template-columns: 1.55fr 1.1fr .8fr .95fr; grid-template-areas: "brand plan towns about"; gap: 40px; }
}
.site-footer h4 {
  font-family: var(--f-display);
  font-weight: 600;
  font-variation-settings: "SOFT" 100;
  font-size: 1.15rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sun);
  margin: 0 0 14px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: rgba(255,248,238,.9); text-decoration: none; font-weight: 600; }
.site-footer a:hover { color: var(--sun); text-decoration: underline; text-decoration-color: var(--coral); }
.site-footer p { max-width: 42ch; margin-bottom: 12px; }
.foot-bottom {
  border-top: 2px dotted rgba(255,248,238,.18);
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  font-size: .86rem;
  color: rgba(255,248,238,.66);
}

/* ============================ focus + skip link ============================ */

:focus-visible { outline: 3px solid var(--sea-600); outline-offset: 3px; border-radius: 6px; }
.btn:focus-visible, .nav-toggle:focus-visible, .chip:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: var(--r-pill); }
.card:focus-visible { outline: 3px solid var(--sea-600); outline-offset: 4px; border-radius: var(--r-lg); }
.site-footer :focus-visible, .band-deep :focus-visible { outline-color: var(--sun); }

.skip {
  position: absolute; left: -9999px;
  background: var(--sun); color: var(--ink);
  padding: 12px 20px; z-index: 100; font-weight: 800; border-radius: var(--r-pill);
}
.skip:focus { left: 12px; top: 12px; }

/* ============================ trip builder ============================ */

.tb-wrap {
  max-width: 760px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  padding: clamp(24px, 5vw, 44px);
}
.tb-progress { display: flex; gap: 6px; margin-bottom: 30px; }
.tb-progress span { height: 10px; flex: 1; background: var(--sand-2); border-radius: var(--r-pill); transition: background .25s; }
.tb-progress span.done { background: var(--coral); }
.tb-step { display: none; }
.tb-step.active { display: block; }
.tb-step h2 { margin-bottom: 8px; }
.tb-step .tb-sub { color: var(--ink-soft); margin-bottom: 26px; }
.tb-count {
  display: inline-block;
  font-size: 13px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--coral-600);
  background: var(--peach-lt);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  margin-bottom: 14px;
}
.opts { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 28px; }
@media (min-width: 560px) { .opts { grid-template-columns: 1fr 1fr; } }
.opt {
  position: relative; display: block; border: 2px solid var(--rule);
  background: var(--cream); padding: 16px 44px 16px 18px; cursor: pointer;
  border-radius: 18px;
  transition: border-color .15s, background .15s, transform .15s;
}
.opt:hover { border-color: var(--coral); transform: translateY(-2px); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt strong { display: block; font-size: 1rem; margin-bottom: 2px; }
.opt span { font-size: .88rem; color: var(--muted); }
.opt input:checked ~ .optbody { color: inherit; }
.opt:has(input:checked) { border-color: var(--coral); background: var(--peach-lt); }
.opt::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 16px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--rule);
  background: var(--white);
}
.opt:has(input:checked)::after { border: 0; background: url(images/deco-check.svg) center / contain no-repeat; }
/* keyboard focus rings the whole option card (the radio itself is visually hidden) */
.opt:has(input:focus-visible) { outline: 3px solid var(--sea-600); outline-offset: 3px; }
@supports not selector(:has(*)) {
  .opt input:focus-visible ~ .optbody { outline: 3px solid var(--sea-600); outline-offset: 6px; border-radius: 8px; }
}
.tb-nav { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.tb-back {
  background: none; border: 0; cursor: pointer; font-family: var(--f-body);
  font-size: 15px; font-weight: 800; letter-spacing: .01em;
  text-transform: none; color: var(--muted); padding: 10px 6px;
  border-radius: var(--r-pill);
}
.tb-back:hover { color: var(--coral-600); }
.tb-skip { font-size: .9rem; color: var(--muted); }
.tb-review { border: 2px dashed var(--rule); background: var(--cream); border-radius: var(--r-md); padding: 22px; margin-bottom: 26px; }
.tb-review dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: .95rem; }
.tb-review dt { font-weight: 800; color: var(--coral-600); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; padding-top: 3px; }
.tb-review dd { margin: 0; }
/* phones: each answer sits under its small-caps key instead of squeezing beside it */
@media (max-width: 480px) {
  .tb-review { padding: 18px 20px; }
  .tb-review dl { grid-template-columns: 1fr; gap: 0; }
  .tb-review dd { margin-bottom: 12px; }
  .tb-review dd:last-child { margin-bottom: 0; }
}
.tb-step h2:focus { outline: none; }

/* ============================ specials ============================ */

.spec-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 700px) { .spec-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .spec-grid { grid-template-columns: repeat(3, 1fr); } }
.spec {
  position: relative;
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  padding: 26px 24px 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.spec::after {
  content: "";
  position: absolute;
  top: -14px;
  right: 16px;
  width: 50px;
  height: 55px;
  background: url(images/deco-stamp.svg) center / contain no-repeat;
  transform: rotate(8deg);
  filter: drop-shadow(0 3px 4px rgba(31,52,64,.15));
}
.spec-tag {
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); align-self: flex-start;
  background: var(--sun-lt); border: 0; border-radius: var(--r-pill); padding: 5px 12px;
}
.spec h3 { margin: 0; font-size: 1.25rem; padding-right: 44px; }
.spec .spec-supplier { font-size: .9rem; color: var(--sea-600); font-weight: 700; margin: 0; letter-spacing: .01em; }
.spec p.spec-body { margin: 0; font-size: .97rem; color: var(--ink-soft); max-width: none; }
.spec-foot {
  margin-top: auto; padding-top: 16px; border-top: 2px dashed var(--rule);
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
.spec-expiry { font-size: .86rem; color: var(--muted); font-weight: 700; }
.spec-cta { font-size: 14px; font-weight: 800; letter-spacing: .01em; text-transform: none; text-decoration: none; color: var(--coral-600); }
.spec-cta:hover { text-decoration: underline; }
.spec-empty { background: var(--white); border: 3px dashed var(--rule); border-radius: var(--r-md); padding: 40px; text-align: center; color: var(--muted); }

/* ============================ journal ============================ */

.post-list { border-top: 0; display: grid; gap: 18px; }
.post-row {
  display: block;
  background: var(--white);
  border: 0;
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  padding: 24px 26px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 400;
  transition: transform .2s ease, box-shadow .2s ease;
}
.post-row:hover { color: var(--ink); transform: translateY(-3px); box-shadow: var(--sh-md); }
.post-row:hover h3 { color: var(--coral-600); }
.post-row h3 { margin: 0 0 6px; }
.post-row .post-meta {
  display: inline-block;
  font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--sea-600); background: var(--lagoon);
  padding: 4px 12px; border-radius: var(--r-pill);
  margin-bottom: 10px;
}
.post-row p { margin: 0; color: var(--ink-soft); font-size: .97rem; }
.article p, .article ul, .article ol { max-width: 68ch; }
.article h2 { margin-top: 44px; }
.byline { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sea-600); margin-top: 18px; }

/* ============================ admin tool ============================ */

.admin-out {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px;
  background: var(--sea-900); color: #D6ECEA; padding: 20px;
  white-space: pre; overflow-x: auto; border: 0; width: 100%; min-height: 260px;
  border-radius: var(--r-sm);
}

/* ============================ Adriana-input slot ============================
   A marked placeholder for something only Adriana can supply (for example a real savings
   story). Markup: <div class="adriana-input" data-q="savings-example"><!-- ADRIANA: a real
   example of savings you passed on - no client names -->Real client savings stories coming soon.</div>
   The instruction lives in the HTML comment; visitors see only the friendly line. */
.adriana-input {
  max-width: var(--measure);
  margin: 26px 0;
  padding: 14px 20px;
  border: 2px dashed var(--rule);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.55);
  color: var(--muted);
  font-size: .95rem;
  font-style: italic;
  line-height: 1.55;
}
.center .adriana-input, .adriana-input.center { margin-left: auto; margin-right: auto; }
.band-deep .adriana-input { background: transparent; border-color: rgba(255,248,238,.3); color: rgba(255,248,238,.8); }

/* #####################################################################
   PAGE-GROUP ADDITIONS
   Everything above is the shared design system (see work/DESIGN.md).
   Each block below belongs to one group of pages and every selector in
   it is scoped under that group's prefix, so the blocks never collide.
   ##################################################################### */

/* =====================================================================
   SERVICES PAGES  (prefix: services-)
   disney-universal-vacations, cruises, all-inclusive-resorts, europe-italy,
   luxury-travel, honeymoons.
   ===================================================================== */

/* ---------- hero: room for a floating decoration beside the framed art ---------- */
.services-hero-art { position: relative; }
.services-hero-art > .deco { z-index: 2; }
/* (".services-hero-art > img.x" beats styles.css ".page-hero-art img { width:100% }") */
.services-hero-art > img.services-hero-spark { width: 34px; left: -6px; top: -18px; }
.services-hero-art > img.services-hero-heart { width: 34px; left: -4px; top: -16px; }
.services-hero-art > img.services-hero-balloon { width: 52px; right: 2px; top: -34px; }
.services-hero-art > img.services-hero-plane { width: 150px; right: -14px; top: -52px; }
@media (max-width: 899px) {
  .services-hero-art { max-width: 480px; margin: 0 auto; width: 100%; }
  .services-hero-art > img.services-hero-plane { width: 118px; right: -4px; top: -40px; }
  .services-hero-art > img.services-hero-balloon { width: 42px; right: 6px; top: -26px; }
}

/* ---------- section illustration beside text ---------- */
.services-art { position: relative; width: 100%; max-width: 500px; margin: 0 auto; }
.services-art > .art-frame { transform: rotate(1.6deg); }
.services-art.services-art-left > .art-frame { transform: rotate(-1.6deg); }
.services-art > .deco { z-index: 2; }
.services-art-spark { width: 30px; right: -8px; top: -14px; }
.services-art-heart { width: 30px; left: -8px; bottom: -10px; }
@media (max-width: 899px) { .services-art { max-width: 460px; } }

/* intro split: keep the lede and the pull quote tidy inside a half-width column */
.services-intro .pull,
.services-intro .callout { margin: 26px 0 0; }
.services-intro .lede:last-child { margin-bottom: 0; }

/* ---------- a plain list turned into little white cards (sparkle bullets kept) ---------- */
.services-perks { margin: 8px 0 26px; }
main .services-perks ul:not([class]) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: none;
  margin: 0;
}
@media (min-width: 700px) { main .services-perks ul:not([class]) { grid-template-columns: 1fr 1fr; } }
main .services-perks ul:not([class]) > li {
  margin: 0;
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  padding: 16px 20px 16px 50px;
  line-height: 1.55;
  color: var(--ink-soft);
}
main .services-perks ul:not([class]) > li strong { color: var(--ink); }
main .services-perks ul:not([class]) > li::before { left: 18px; top: 19px; width: 19px; height: 19px; }
/* an odd last card sits centred under the pair */
@media (min-width: 700px) {
  main .services-perks ul:not([class]) > li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 7px); }
}
/* ---------- five feature cards: two columns, the fifth centred ---------- */
@media (min-width: 820px) {
  .services-five > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 12px); }
}
@media (min-width: 860px) {
  .stack.services-five { grid-template-columns: 1fr 1fr; gap: 20px; }
  .stack.services-five > .stack-item:last-child:nth-child(odd) { width: calc(50% - 10px); }
  .stack.services-even { grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* ---------- supplier groups: three across, with a luggage-tag punch hole ---------- */
@media (min-width: 980px) { .groups.services-groups-3 { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.services-tags .group { position: relative; padding: 22px 24px 22px; box-shadow: var(--sh-sm); }
/* the first tile is sky-50, which vanishes on a sky band: make it white there */
.band-sky .services-tags .group:nth-child(6n+1) { background: var(--white); }
.services-tags .group::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: inset 0 0 0 3px rgba(31,52,64,.12);
}
.services-tags .group h3 { padding-right: 26px; }
.band-sand .services-tags .group::after { background: var(--sand); }
.band-sky .services-tags .group::after { background: var(--sky-50); }
.band-white .services-tags .group::after { background: var(--paper); }
.services-pin { display: inline-block; width: 17px; height: auto; margin-right: 8px; vertical-align: -2px; }

/* ---------- centred pull quote / callout ---------- */
.services-center { margin-left: auto; margin-right: auto; }
.sec-head + .pull.services-center { margin-top: -8px; margin-bottom: 40px; }

/* ---------- white (or sunny) note card with a spot icon: "It costs you nothing", etc. ---------- */
.services-note {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  padding: clamp(24px, 4vw, 38px);
  max-width: 880px;
  margin: 0 auto;
}
.services-note.services-note-sun { background: var(--sun-lt); box-shadow: none; }
.services-note > img { width: 96px; height: 96px; flex: none; }
.services-note h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin: 4px 0 10px; }
.services-note h2::after { display: none; }
.services-note p { color: var(--ink-soft); }
.services-note p:last-child { margin-bottom: 0; }
* + .services-note { margin-top: clamp(40px, 6vw, 64px); }
@media (max-width: 560px) {
  .services-note { flex-direction: column; gap: 10px; }
  .services-note > img { width: 76px; height: 76px; }
}

/* two note cards side by side */
.services-duo { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 860px) { .services-duo { grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; } }
.services-duo > .services-note { max-width: none; margin: 0; }
@media (min-width: 860px) and (max-width: 1099px) {
  .services-duo > .services-note { flex-direction: column; gap: 10px; }
  .services-duo > .services-note > img { width: 80px; height: 80px; }
}

/* ---------- split tweaks ---------- */
.services-split-gap { margin-top: clamp(40px, 6vw, 64px); }
@media (max-width: 899px) { .split > .services-art { order: 2; } }

/* a note whose paragraph opens with a bold lead-in: set the lead-in like a small heading */
.services-lead p > strong:first-child {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-variation-settings: "SOFT" 100;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--ink);
  margin: 4px 0 8px;
}

/* the short line that introduces a card list, in the handwritten accent */
.services-perks-lead {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.1;
  color: var(--coral-600);
  margin: 0 0 16px;
}

/* ---------- small decorations beside a centred section heading (wide screens only; the plane is in "floating decorations") ---------- */
.sec-deco.services-deco-stamp { width: 82px; right: 9%; top: -22px; transform: rotate(10deg); filter: drop-shadow(0 4px 6px rgba(31,52,64,.18)); }
.sec-deco.services-deco-balloon { width: 56px; left: 9%; top: -40px; }
@media (max-width: 979px) {
  .sec-deco.services-deco-stamp, .sec-deco.services-deco-balloon { display: none; }
}

/* =====================================================================
   TOWN PAGES  (prefix: towns-)
   travel-agent-{stamford,norwalk,greenwich,fairfield,westport}-ct.
   ===================================================================== */

/* the opening paragraph, set as a little airmail postcard (reuses .postcard) */
.towns-note { max-width: 800px; margin: 0 auto 72px; }
.towns-note .postcard-body { padding: 16px 64px 10px 12px; }
.towns-note .postcard-body p { font-size: 1.16rem; line-height: 1.72; color: var(--ink); margin: 0; max-width: none; }
.towns-note .postcard-stamp { top: -30px; right: -12px; width: 76px; }
@media (max-width: 600px) {
  .towns-note { margin-bottom: 56px; }
  .towns-note .postcard-body { padding: 26px 4px 6px; }
  .towns-note .postcard-body p { font-size: 1.06rem; }
  .towns-note .postcard-stamp { width: 60px; top: -26px; right: -6px; }
}

/* "What … clients usually need": the original <ul>, laid out as icon cards */
.towns-needs { list-style: none; padding: 0; margin: 0; max-width: none; }
.towns-needs > li { margin: 0; align-items: center; }
.towns-needs > li > p { font-size: 1rem; }
.towns-needs strong { color: var(--ink); }
@media (max-width: 480px) { .towns-needs > li { align-items: flex-start; } }

/* illustration column inside a .split */
.towns-art .art-frame, .towns-art .polaroid { max-width: 500px; margin-left: auto; margin-right: auto; }
.towns-art .polaroid { margin-top: 18px; }
@media (min-width: 900px) {
  .towns-flip > .towns-art { order: -1; }
}
@media (max-width: 899px) {
  .towns-art .art-frame { max-width: 440px; }
  .towns-art .polaroid { max-width: 420px; }
}

/* text column of a town split; a callout inside it sits closer to the copy */
.towns-text > .callout { margin: 26px 0 0; }
.towns-text > .callout + p { margin-top: 18px; }
/* on phones the callout icon sits above its sentence so the text keeps a readable width */
@media (max-width: 480px) {
  .towns-text > .callout.has-icon, .towns-leads + .callout.has-icon { flex-direction: column; gap: 8px; padding: 18px 20px; }
  .towns-text > .callout.has-icon > img, .towns-leads + .callout.has-icon > img { width: 48px; height: 48px; }
}

/* Greenwich: "Where that tends to lead", one sentence per tinted tile */
.towns-leads { margin-top: 4px; }
.towns-leads .group { display: flex; gap: 16px; align-items: center; }
.towns-leads .group > img { width: 64px; height: 64px; flex: none; }
.towns-leads .group p { font-size: 1rem; }
.towns-leads + .callout { margin: 30px auto 0; }
@media (max-width: 480px) {
  .towns-leads .group { gap: 14px; padding: 18px; }
  .towns-leads .group > img { width: 48px; height: 48px; }
}

/* =====================================================================
   CORE PAGES  (prefix: core-)
   about, contact, trip-builder.
   ===================================================================== */

/* ---------------------------- about ---------------------------- */

/* portrait polaroid (replaces the old .imgblock placeholder) */
.polaroid.core-portrait { max-width: 340px; margin-top: 10px; }
@media (max-width: 899px) { .polaroid.core-portrait { max-width: 280px; } }

/* detail list: on phones the small-caps key sits above its value instead of squeezing it */
@media (max-width: 480px) {
  .detail-list.core-dl li { flex-direction: column; gap: 2px; }
  .detail-list.core-dl .k { min-width: 0; }
}

/* "How I work" lifted into a soft card with a chat icon */
.icon-item.core-work { margin-top: 34px; background: var(--peach-lt); box-shadow: none; }
.core-work p + p { margin-top: 12px; }

/* credentials: passport art beside the detail list, then two icon cards */
.core-cred-art { max-width: 460px; margin: 0 auto; }
.core-cred-more { margin-top: 48px; }

/* --------------------------- contact --------------------------- */

/* the form becomes an airmail letter with a stamp in the corner */
.form-wrap.core-letter {
  position: relative;
  border: 8px solid transparent;
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    repeating-linear-gradient(135deg, var(--coral) 0 14px, var(--white) 14px 22px, var(--sea) 22px 36px, var(--white) 36px 44px) border-box;
}
.core-letter .postcard-stamp { top: -24px; right: 18px; }
@media (max-width: 520px) { .core-letter .postcard-stamp { width: 58px; top: -26px; right: 12px; } }
@media (max-width: 420px) { .form-wrap.core-letter { padding-left: 20px; padding-right: 20px; } }
/* paired fields must be wide enough to show every hint text in full:
   on desktop the letter trims its side padding a little, and whenever it is still
   too narrow for pairs (e.g. 960-1199px) the pairs stack */
.form-wrap.core-letter { container-type: inline-size; }
@media (min-width: 960px) {
  .form-wrap.core-letter { padding-left: 32px; padding-right: 32px; }
  .core-letter .form-row { column-gap: 16px; }
  .core-letter .field input { padding-left: 14px; padding-right: 14px; }
}
@container (max-width: 504px) { .core-letter .form-row { grid-template-columns: 1fr; } }

/* "What happens next": illustrated steps joined by a dotted trail */
.steps.core-steps { margin-top: 26px; }
.steps.core-steps li { padding-left: 86px; min-height: 70px; margin-bottom: 20px; padding-top: 9px; }
.core-steps .core-step-icon { position: absolute; left: 0; top: -4px; width: 66px; height: 66px; }
.steps.core-steps li::before {
  left: -6px;
  top: -10px;
  width: 28px;
  height: 28px;
  font-size: 14px;
  z-index: 1;
  box-shadow: 0 2px 0 #E0A93A;
}
.core-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 31px;
  top: 68px;
  bottom: -22px;
  border-left: 3px dotted var(--coral);
}

/* ------------------------- trip builder ------------------------- */

.tb-wrap.core-tb { position: relative; z-index: 1; }

/* progress: a flight path from question 1 to the heart, with the plane on the current step */
.core-tb .tb-progress { position: relative; gap: 10px; padding-right: 38px; margin-bottom: 34px; }
.core-tb .tb-progress::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 26px;
  height: 24px;
  margin-top: -12px;
  background: url(images/deco-heart.svg) center / contain no-repeat;
}
.core-tb .tb-progress span { position: relative; height: 12px; }
.core-tb .tb-progress span.done + span:not(.done)::before,
.core-tb .tb-progress span.done:last-child::after {
  content: "";
  position: absolute;
  top: -19px;
  width: 60px;
  height: 30px;
  background: url(images/pg-plane.svg) center / contain no-repeat;
  filter: drop-shadow(0 3px 3px rgba(31,52,64,.22));
  z-index: 1;
}
.core-tb .tb-progress span.done + span:not(.done)::before { left: -44px; }
.core-tb .tb-progress span.done:last-child::after { right: -18px; }
@media (max-width: 560px) {
  .core-tb .tb-progress { gap: 6px; padding-right: 32px; }
  .core-tb .tb-progress::after { width: 22px; height: 20px; margin-top: -10px; }
  .core-tb .tb-progress span.done + span:not(.done)::before,
  .core-tb .tb-progress span.done:last-child::after { width: 40px; height: 20px; top: -14px; }
  .core-tb .tb-progress span.done + span:not(.done)::before { left: -28px; }
  .core-tb .tb-progress span.done:last-child::after { right: -12px; }
}

/* each question gets a little spot illustration beside its heading */
.core-tb-head { display: flex; align-items: center; gap: 22px; margin-bottom: 26px; }
.core-tb-head > img { width: 92px; height: 92px; flex: none; }
.core-tb-head p.tb-sub { margin-bottom: 0; }
.core-tb-head .tb-count { margin-bottom: 10px; }
/* phones: the spot illustration sits above the question so the heading keeps the full card width */
@media (max-width: 520px) {
  .core-tb-head { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 22px; }
  .core-tb-head > img { width: 64px; height: 64px; }
}

/* floating decorations beside the builder card (wide screens only) */
.core-tb-sun { width: 104px; left: calc(50% - 520px); top: 60px; }
.core-tb-cloud { width: 150px; right: calc(50% - 560px); top: 210px; }
.core-tb-heart { width: 34px; right: calc(50% - 470px); top: 440px; }
.core-tb-spark { width: 22px; left: calc(50% - 450px); top: 330px; }
@media (max-width: 1179px) { .core-tb-sun, .core-tb-heart, .core-tb-cloud, .core-tb-spark { display: none; } }

/* =====================================================================
   JOURNAL + SPECIALS  (prefix: journal-)
   specials, journal, both journal posts, admin-specials.
   ===================================================================== */

/* ---------- shared: small decorations placed with .deco ---------- */
.journal-deco-balloon { width: 64px; right: 3%; top: 26px; }
.journal-deco-spark   { width: 22px; left: 4%; top: 46px; }
@media (max-width: 899px) {
  .journal-deco-balloon { display: none; }
  .journal-deco-spark { left: auto; right: 20px; top: 22px; }
}

/* ---------- shared: a friendly note line (icon + short sentence) ---------- */
.journal-note {
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  max-width: 640px;
  margin: 40px auto 0;
  padding: 14px 22px 14px 14px;
  background: var(--white);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
}
.journal-note > img { width: 52px; height: 52px; flex: none; }
.journal-note p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.55; max-width: none; }
@media (max-width: 560px) {
  .journal-note { border-radius: var(--r-md); align-items: flex-start; padding: 14px 16px; }
  .journal-note > img { width: 44px; height: 44px; }
}

/* ---------- specials page: ticket-style offer cards ---------- */
.journal-specials .spec-grid { gap: 30px; }
.journal-specials .spec { padding-top: 96px; }
.journal-specials .spec::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 88px;
  border-radius: var(--r-md) var(--r-md) 0 0;
  /* a ticket stub: tinted band, sun, polka dots, perforation row and two side notches */
  background:
    radial-gradient(circle at 0 75px, var(--sand) 0 11px, transparent 11.5px) no-repeat,
    radial-gradient(circle at 100% 75px, var(--sand) 0 11px, transparent 11.5px) no-repeat,
    radial-gradient(circle, var(--tint, var(--sky)) 0 2.4px, transparent 2.9px) 6px 72px / 12px 7px repeat-x,
    radial-gradient(circle at 46px 35px, var(--sun) 0 17px, rgba(255,255,255,.75) 17.5px 25px, transparent 25.5px) no-repeat,
    radial-gradient(circle, rgba(255,255,255,.6) 0 2.6px, transparent 3px) 0 0 / 20px 20px,
    linear-gradient(var(--tint, var(--sky)), var(--tint, var(--sky))) 0 0 / 100% 70px no-repeat;
}
.journal-specials .spec:nth-child(6n+1) { --tint: var(--sky); }
.journal-specials .spec:nth-child(6n+2) { --tint: var(--peach); }
.journal-specials .spec:nth-child(6n+3) { --tint: var(--lilac); }
.journal-specials .spec:nth-child(6n+4) { --tint: var(--lagoon); }
.journal-specials .spec:nth-child(6n+5) { --tint: var(--sun-lt); }
.journal-specials .spec:nth-child(6n+6) { --tint: var(--blush); }
.journal-specials .spec::after { top: 10px; right: 18px; width: 54px; height: 60px; transform: rotate(7deg); }
.journal-specials .spec { transition: transform .25s ease, box-shadow .25s ease; }
.journal-specials .spec:hover { transform: translateY(-5px) rotate(-.4deg); box-shadow: var(--sh-lg); }
.journal-specials .spec h3 { padding-right: 0; }
.journal-specials .spec-cta {
  padding: 7px 16px;
  border-radius: var(--r-pill);
  background: var(--peach-lt);
  transition: background .2s, color .2s;
}
.journal-specials .spec-cta:hover { background: var(--coral); color: var(--ink); text-decoration: none; }
.journal-specials .spec-empty {
  border-radius: var(--r-lg);
  color: var(--ink-soft);
  font-size: 1.05rem;
  padding: 100px 30px 40px;
  background:
    radial-gradient(circle at 50% 52px, var(--sun) 0 22px, var(--sun-lt) 22.5px 32px, transparent 32.5px),
    var(--white);
}

/* ---------- journal index: posts as postcards ---------- */
.journal-posts { gap: 34px; }
@media (min-width: 900px) { .journal-posts { gap: 40px; } }
a.journal-post {
  color: var(--ink);
  font-weight: 400;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.journal-posts .journal-post:nth-child(odd)  { transform: rotate(-.6deg); }
.journal-posts .journal-post:nth-child(even) { transform: rotate(.6deg); }
.journal-posts .journal-post:hover { color: var(--ink); transform: translateY(-6px) rotate(0deg); box-shadow: var(--sh-lg); }
.journal-post .postcard-art img { transition: transform .4s ease; }
.journal-post:hover .postcard-art img { transform: scale(1.04); }
.journal-post .postcard-body { padding: 20px 10px 6px; }
.journal-post .post-meta {
  align-self: flex-start;
  display: inline-block;
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sea-600);
  background: var(--lagoon);
  padding: 4px 12px;
  border-radius: var(--r-pill);
}
.journal-post h3 { margin: 0 0 10px; font-size: clamp(1.35rem, 2.4vw, 1.62rem); transition: color .2s; }
.journal-post:hover h3 { color: var(--coral-600); }
.journal-post .postcard-body p:last-child { margin-bottom: 0; }
.journal-post .journal-post-go {
  align-self: flex-end;
  margin-top: auto;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--peach-lt);
  display: grid;
  place-items: center;
  transition: background .2s, transform .2s;
}
.journal-post .journal-post-go::before {
  content: "";
  width: 12px;
  height: 12px;
  border-top: 3px solid var(--coral-600);
  border-right: 3px solid var(--coral-600);
  border-radius: 2px;
  transform: translateX(-2px) rotate(45deg);
}
.journal-post:hover .journal-post-go { background: var(--coral); transform: translateX(3px); }
.journal-post:hover .journal-post-go::before { border-color: var(--ink); }
.journal-post:focus-visible { outline: 3px solid var(--sea-600); outline-offset: 6px; border-radius: var(--r-md); }

/* ---------- journal posts: reading column ---------- */
.journal-article { font-size: 1.07rem; line-height: 1.78; }
.journal-article > p, .journal-article > ul, .journal-article li { font-size: inherit; }
.journal-article > h2 { clear: both; margin-top: 60px; }
.journal-article > h2:first-child { margin-top: 0; }
.journal-article a { text-decoration-line: underline; }
.journal-article .journal-icon-list, .journal-article .pull, .journal-article .callout { max-width: none; }
.journal-article .journal-first { font-size: 1.2rem; line-height: 1.72; color: var(--ink); }
.journal-article .journal-first::first-letter {
  float: left;
  font-family: var(--f-display);
  font-weight: 700;
  font-variation-settings: "SOFT" 100;
  font-size: 3.5em;
  line-height: .9;
  color: var(--coral-600);
  background: var(--sun-lt);
  border-radius: 20px;
  padding: .12em .16em .1em;
  margin: .06em .16em 0 0;
}

/* icon list: each point gets a spot illustration */
.journal-icon-list { list-style: none; padding: 0; margin: 12px 0 30px; display: grid; gap: 14px; max-width: none; }
.journal-icon-list > li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin: 0;
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  padding: 20px 22px;
  line-height: 1.65;
  font-size: 1rem;
  color: var(--ink-soft);
}
.journal-icon-list > li strong { color: var(--ink); }
.journal-icon-list > li > img { width: 64px; height: 64px; flex: none; }
.journal-icon-list > li > div { padding-top: 2px; }
.journal-icon-list > li:nth-child(4n+1) { background: var(--sky-50); }
.journal-icon-list > li:nth-child(4n+2) { background: var(--peach-lt); }
.journal-icon-list > li:nth-child(4n+3) { background: #F3EFFB; }
.journal-icon-list > li:nth-child(4n+4) { background: #FDEDED; }
@media (min-width: 720px) {
  .journal-icon-list.two-up { grid-template-columns: 1fr 1fr; }
  .journal-icon-list.two-up > li { flex-direction: column; gap: 10px; }
}
@media (max-width: 480px) {
  .journal-icon-list > li { flex-direction: column; gap: 10px; padding: 18px; }
  .journal-icon-list > li > img { width: 56px; height: 56px; }
}

/* airport tiles (reuses .groups/.group, adds a pin and a full-width third tile) */
.journal-airports { margin: 10px 0 8px; align-items: start; }
.journal-airports .group { display: flex; gap: 14px; align-items: flex-start; padding: 22px 22px 22px 18px; }
.journal-airports .group > img { width: 22px; height: 28px; flex: none; margin-top: 3px; }
.journal-airports .group p { font-size: 1rem; line-height: 1.65; }
.journal-airports .group p strong { color: var(--ink); font-family: var(--f-display); font-weight: 600; font-variation-settings: "SOFT" 100; font-size: 1.12rem; }
@media (min-width: 720px) { .journal-airports .group:nth-child(3) { grid-column: 1 / -1; } }

/* illustrated figure inside an article */
.journal-figure { margin: 8px 0 30px; }
.journal-figure .art-frame { max-width: 440px; margin: 0 auto; }
@media (min-width: 900px) {
  .journal-figure { float: right; width: 44%; margin: 8px 0 24px 34px; }
  .journal-figure .art-frame { transform: rotate(2deg); }
}
@media (min-width: 1180px) { .journal-figure { margin-right: -64px; } }

/* sign-off card at the end of a post (reuses the airmail .postcard) */
.journal-signoff { clear: both; margin: 56px 0 10px; padding: 26px 30px 24px; max-width: none; }
.journal-signoff .postcard-stamp { top: -22px; right: 22px; width: 72px; }
.journal-signoff > p:first-of-type { font-size: 1.12rem; color: var(--ink); padding-right: 70px; }
.journal-signoff .byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 0;
  padding-top: 16px;
  border-top: 2px dashed var(--rule);
  max-width: none;
}
.journal-signoff .byline > img { width: 44px; height: 44px; flex: none; }
@media (max-width: 560px) {
  .journal-signoff { padding: 24px 20px 20px; }
  .journal-signoff > p:first-of-type { padding-right: 0; padding-top: 22px; }
  .journal-signoff .postcard-stamp { width: 60px; top: -20px; }
}

/* ---------- admin tool: soften the rows the script writes ---------- */
.journal-admin #liveList > div {
  border: 0 !important;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-sm);
  align-items: center !important;
}
.journal-admin .form-wrap h2::after { display: none; }
.journal-admin .admin-out { border-radius: var(--r-md); }

/* =====================================================================
   HOME  (prefix: home-)
   index.html only.
   ===================================================================== */

/* seven service cards: 4 + 3 on desktop with the second row centred,
   pairs on tablets with the seventh card centred underneath */
@media (min-width: 640px) and (max-width: 1059px) {
  .cards.home-cards-7 { grid-template-columns: repeat(2, 1fr); }
  .home-cards-7 > :last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 14px); }
}
@media (min-width: 1060px) {
  .cards.home-cards-7 { grid-template-columns: repeat(8, 1fr); gap: 28px 24px; }
  .home-cards-7 > * { grid-column: span 2; }
  .home-cards-7 > :nth-child(5) { grid-column: 2 / span 2; }
  .home-cards-7 .card h3 { font-size: 1.22rem; }
}

/* ============================ motion preferences ============================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .card:hover, .post-row:hover, .chip:hover, .btn:hover, .opt:hover { transform: none; }
  .card:hover .card-art img { transform: none; }
  .journal-posts .journal-post:hover, .journal-specials .spec:hover { transform: none; }
  .journal-post:hover .postcard-art img, .journal-post:hover .journal-post-go { transform: none; }
}