/*
Theme Name: Tranquil Safaris
Theme URI: http://localhost/tranquil
Author: Tranquil Safaris
Description: Classic WordPress theme for Tranquil Safaris, converted from the tranquil-safaris static design. Emerald and warm-brown palette, Outfit + Cormorant Garamond, with a park-aware mega navigation and itinerary listings driven by real catalogue data.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: tranquil-safaris
Tags: travel, tourism, custom-logo, featured-images, translation-ready
*/

/* ==========================================================================
   1. TOKENS
   --------------------------------------------------------------------------
   Two naming systems live here on purpose. `--ac`, `--ink`, `--cream` and
   friends are the design's own names, used by everything below. The second
   block re-points the names the shared design system (assets/css/ds.css) and
   the inner-page templates already consume, so the explorer, planner, journal,
   country and experiences pages adopt this brand without being rewritten.
   ds.css enqueues AFTER this file but only defines `--oh-*` tokens, so these
   colour and font definitions are the ones that win.
   ========================================================================== */
:root{
  /*
   * Brand palette, taken from the logo itself: a deep forest-green wordmark
   * with the "Safaris" script in gold. Those two roles carry through the site
   * — green is structure, gold is the flourish. --ink is unchanged.
   */
  --ac:#124933;          /* forest green — the wordmark */
  --ac-dark:#0C3323;     /* pressed / hover state */
  --ac-mid:#1B6146;      /* lifted state on dark surfaces */
  --ac-soft:#E6EDE9;     /* tint for soft fills */
  --gold:#EAB924;        /* the script colour */
  --gold-dark:#C99C13;   /* gold hover, and gold on DARK surfaces */
  /* Gold as text on cream or white. --gold-dark was carrying that job and
     measures 2.30:1 against --cream, which fails even the 3:1 floor for
     large text; this measures 4.49:1 and still reads as gold, not brown. */
  --gold-ink:#8F6A0A;
  --gold-soft:#FBF1D3;   /* tint */
  --ink:#3A2E25;
  --muted:#7A6F66;
  --cream:#F7F3EE;
  --line:#E6E0D8;
  --topbar:#3A2E25;      /* was a neutral grey; the brown ink reads as brand */
  --white:#fff;
  --sans:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:'Cormorant Garamond',Georgia,serif;
  --shadow:0 12px 40px rgba(58,46,37,.12);
  --shadow-sm:0 4px 16px rgba(58,46,37,.08);

  /* --- bridge: names ds.css and the ported inner pages already consume --- */
  --green:#124933; --green-d:#0C3323; --green-l:#1B6146;
  --body:#5F564E;
  --tan:#FBF1D3; --tan-d:#F2E3AE; --bronze:#124933;
  --card:#FBF8F5; --line-2:#D9D2C8; --star:#EAB924;
  --script:'Cormorant Garamond',Georgia,serif;
  --header-height:130px;

  /*
   * Container widths consumed by ds.css's .oh-shell and by dest.css. These
   * were defined in the previous theme's stylesheet and were lost when it was
   * replaced, which left `max-width:var(--shell)` invalid — so every shell on
   * the explorer, planner, journal and experiences pages had been running
   * edge-to-edge. Restored, retuned to this design's 1300px .wrap.
   */
  --shell:1300px; --shell-wide:1404px; --shell-feat:1304px;
  --shell-testi:1278px; --shell-rooms:1290px;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:#fff;line-height:1.6;font-size:17px;
  -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
ul{list-style:none}
.wrap{max-width:1300px;margin:0 auto;padding:0 24px}
.cover{width:100%;height:100%;object-fit:cover;background:linear-gradient(135deg,#7d6a4b,#c9a871)}
.sr,.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);
  clip-path:inset(50%);white-space:nowrap}
.screen-reader-text:focus{position:fixed;top:12px;left:12px;width:auto;height:auto;clip:auto;clip-path:none;
  padding:10px 18px;background:#fff;color:var(--ink);border-radius:10px;box-shadow:var(--shadow);z-index:999}
[hidden]{display:none!important}
:target,[id]{scroll-margin-top:calc(var(--header-height) + 16px)}
.alignwide{max-width:1160px;margin-left:auto;margin-right:auto}
.alignfull{width:100%;max-width:100%}

/* ==========================================================================
   3. TYPE HELPERS
   ========================================================================== */
.kick{display:block;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ac);margin-bottom:12px}
.h2{font-weight:700;font-size:clamp(32px,3.6vw,46px);line-height:1.05;color:var(--ink)}
.h2 .sf,.sf{display:block;font-family:var(--serif);font-weight:500;color:var(--ac);font-size:1.08em;line-height:1.05}
.lead{color:var(--muted);font-size:16px;max-width:460px;margin-top:22px;line-height:1.75}
.pill{display:inline-flex;align-items:center;gap:12px;background:#fff;color:var(--ac);font-weight:600;
  font-size:15px;padding:13px 26px;border-radius:12px;box-shadow:var(--shadow-sm);transition:.2s}
.pill:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.pill svg{width:18px;height:18px}
.btn-ac{display:inline-flex;align-items:center;gap:10px;background:var(--ac);color:#fff;font-weight:600;
  padding:13px 24px;border-radius:12px;transition:.2s;white-space:nowrap}
.btn-ac:hover{background:var(--ac-dark)}
.icon-circle{width:52px;height:52px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);
  display:grid;place-items:center;margin-bottom:26px}
.icon-circle svg{width:22px;height:22px;color:var(--ac)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
summary:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:4px}

/* ==========================================================================
   4. TOP BAR
   --------------------------------------------------------------------------
   The design shipped a phone number and social links. No verified phone,
   address or social account exists for this business, so the bar carries only
   statements the catalogue can back: real counts, drawn from the database.
   ========================================================================== */
.topbar{background:var(--topbar);color:#fff;font-size:14px;font-weight:600;position:relative;z-index:60}
.topbar .wrap{display:flex;align-items:center;justify-content:flex-end;height:42px;gap:30px;padding-left:480px}
.topbar__contact{display:flex;align-items:center;gap:26px;min-width:0}
.topbar__contact a{display:inline-flex;align-items:center;gap:8px;opacity:.92;transition:opacity .2s;white-space:nowrap}
.topbar__contact a:hover{opacity:1}
.topbar__contact svg{width:16px;height:16px;flex:none;color:var(--gold)}
/* Social marks: the brand glyph carries it, the name is for screen readers. */
.topbar__social{display:flex;align-items:center;gap:2px}
.topbar__social a{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:9px;opacity:.86;transition:opacity .2s,background .2s}
.topbar__social a:hover{opacity:1;background:rgba(255,255,255,.12)}
.topbar__social svg{width:17px;height:17px}
.foot-social{display:flex;align-items:center;gap:8px}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:11px;border:1px solid rgba(255,255,255,.22);opacity:.9;
  transition:opacity .2s,background .2s,border-color .2s}
.foot-social a:hover{opacity:1;background:rgba(255,255,255,.1);border-color:var(--gold)}
.foot-social svg{width:19px;height:19px}

/* ==========================================================================
   5. HEADER + MEGA NAV
   ========================================================================== */
/* z-index 70, above the top bar's 60. The logo tab is a child of this bar
   and is positioned at top:-42px so it hangs up THROUGH the top bar — that
   overlap is the whole shape of the mark. With the nav underneath, the top
   bar's opaque brown painted over the tab's upper 42px and took the top of
   the wordmark with it. Measured: elementFromPoint at the tab's top edge
   returned the top bar's wrap, not the logo.
   The tab sits at the far left and the top bar's own content is right
   aligned, so nothing of the top bar is covered in return. */
.site-nav{position:absolute;left:0;right:0;top:42px;z-index:70;transition:background .25s,box-shadow .25s}
.site-nav .wrap{display:flex;align-items:center;height:88px;gap:40px}
.logo-tab{position:absolute;top:-42px;left:24px;width:400px;height:118px;background:var(--ac);
  border-radius:0 0 40px 40px;display:flex;align-items:center;justify-content:center;gap:10px;color:#fff;transition:.25s}
.logo-tab svg{width:38px;height:38px;flex:none}
.logo-tab img{max-height:64px;width:auto}
.logo-word{font-size:34px;font-weight:600;letter-spacing:-.01em;line-height:1}
.logo-word i{font-style:normal;opacity:.72;font-weight:500}
.nav{display:flex;gap:10px;margin-left:440px}
.nav>li{position:relative}
.nav>li>a{display:block;white-space:nowrap;padding:30px 14px;font-size:19px;font-weight:600;color:#fff;transition:color .2s}
.site-nav.solid .nav>li>a{color:var(--ink)}
.nav>li>a:hover,.nav>li.current-menu-item>a{color:var(--ac)}
.site-nav:not(.solid) .nav>li>a:hover{color:#E6EDE9}

.mega{position:absolute;top:100%;left:0;background:#fff;border-radius:20px;box-shadow:var(--shadow);
  padding:28px 30px;opacity:0;visibility:hidden;transform:translateY(10px);transition:.2s;min-width:600px;color:var(--ink)}
.nav>li:hover .mega,.nav>li:focus-within .mega{opacity:1;visibility:visible;transform:none}
/* A mega panel is absolutely positioned at its item left edge. With six items
   the later ones sit far enough right that a wide panel (Parks is 680px)
   overflows the viewport, which is a horizontal scrollbar on every page. The
   last three anchor to their items RIGHT edge instead, so they open inwards. */
.nav>li:nth-last-child(-n+3) .mega{ left:auto; right:0 }
/* The panel's lead item. "All tour packages" is the thing this menu
   exists to reach, so it is set larger than the links beneath it and
   separated by a hairline rather than sitting in the same list rhythm. */
.mega-cols .mega-lead>a{ font-size:19px; font-weight:600; color:var(--ac) }
.mega-cols .mega-lead{ padding-bottom:8px; margin-bottom:6px; border-bottom:1px solid var(--line) }
.mega-cols .mega-lead>a:hover{ color:var(--ac-dark) }

.nav>li .mega{ max-width:min(680px, calc(100vw - 48px)) }

.mega h4{font-family:var(--serif);font-weight:600;font-size:28px;color:var(--ac);margin-bottom:14px;line-height:1}
.mega-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 30px}
.mega-cols h5{font-size:13px;font-weight:700;margin-bottom:6px}
.mega-cols a{display:flex;justify-content:space-between;gap:12px;font-size:15px;padding:4px 0;color:var(--muted)}
.mega-cols a:hover{color:var(--ac)}
.mega-cols a b{font-weight:600;font-size:12px;color:var(--ac);opacity:.75;font-variant-numeric:tabular-nums}
.mega-foot{border-top:1px solid var(--line);margin-top:18px;padding-top:14px}
.mega-foot a{color:var(--ac);font-weight:600;display:inline-flex;gap:8px;align-items:center}
.mega-foot svg{width:16px;height:16px}

.hdr-right{margin-left:auto;display:flex;align-items:center;gap:22px}
.hdr-cta{display:none}
.site-nav.solid .hdr-cta{display:inline-flex}
.hgroup{display:flex;align-items:center;background:#fff;border-radius:14px;box-shadow:var(--shadow-sm);height:66px}
.hgroup>*{padding:0 18px;height:100%;display:flex;align-items:center;gap:8px;font-weight:600;font-size:16px;
  position:relative;white-space:nowrap}
.hgroup>*+*{border-left:1px solid var(--line)}
.hgroup svg{width:20px;height:20px;color:var(--ac)}
.hgroup .cnt-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:999px;background:var(--ac);color:#fff;font-size:11px}
.burger{display:none;width:48px;height:48px;border-radius:12px;background:#fff;place-items:center;box-shadow:var(--shadow-sm)}
.burger svg{width:24px;height:24px;color:var(--ink)}

/* solid (scrolled) state — also the resting state on every inner page */
.site-nav.solid{position:fixed;top:0;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.06)}
.site-nav.solid .logo-tab{top:0;height:88px;width:300px;background:#fff;color:var(--ac);
  border-radius:0 0 30px 30px;box-shadow:var(--shadow-sm)}
.site-nav.solid .logo-word{font-size:28px}
.site-nav.solid .nav{margin-left:330px}
.site-nav.solid .hgroup{height:56px;box-shadow:none;border:1px solid var(--line)}
body.admin-bar .site-nav.solid{top:32px}

/* Inner pages have no dark hero behind the bar, so it starts solid and the
   page is padded down to clear the fixed header. */
body:not(.home) .site-nav{position:fixed;top:0;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.06)}
body:not(.home) .logo-tab{top:0;height:88px;width:300px;background:#fff;color:var(--ac);
  border-radius:0 0 30px 30px;box-shadow:var(--shadow-sm)}
body:not(.home) .logo-word{font-size:28px}
body:not(.home) .nav{margin-left:330px}
body:not(.home) .nav>li>a{color:var(--ink)}
body:not(.home) .hgroup{height:56px;box-shadow:none;border:1px solid var(--line)}
body:not(.home) .hdr-cta{display:inline-flex}
body:not(.home) .site-main{padding-top:var(--header-height)}

/* ==========================================================================
   6. MOBILE NAV
   ========================================================================== */
.mnav{position:fixed;inset:0;background:#fff;z-index:100;transform:translateX(100%);
  transition:transform .3s;padding:22px;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.mnav.open{transform:none}
.mnav-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
.mnav-top .logo-word{color:var(--ac);font-size:28px}
.mnav details{border-bottom:1px solid var(--line);padding:16px 0}
.mnav summary{list-style:none;font-size:20px;font-weight:600;display:flex;justify-content:space-between;
  min-height:44px;align-items:center;cursor:pointer}
.mnav summary::-webkit-details-marker{display:none}
.mnav details[open] summary span{transform:rotate(45deg)}
.mnav summary span{transition:transform .2s;display:inline-block}
.mnav details ul{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding-top:12px}
.mnav details h5{grid-column:1/-1;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ac);margin-top:10px}
.mnav details a{color:var(--muted);display:block;padding:10px 0;min-height:44px}
.mnav>a{display:block;font-size:20px;font-weight:600;padding:16px 0;border-bottom:1px solid var(--line);min-height:44px}
.xbtn{width:44px;height:44px;border-radius:50%;background:var(--cream);font-size:24px;line-height:1}
html.nav-open,body.nav-open{overflow:hidden!important;height:100%;touch-action:none}

/* ==========================================================================
   7. HERO
   ========================================================================== */
/* The photograph and the search card sit on one cream surface. The card is
   pulled 200px up over the photograph and hangs ~70px below it; that strip and
   the gutter either side of the card used to paint the body's white, which put
   a white ledge at the far left and right between the photograph and the cream
   band below. Cream here means the overhang is always cream, whatever the
   card's height works out to be. See the note in front-page.php. */
.hero-wrap{background:var(--cream)}
.hero{position:relative;height:760px;color:#fff;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;overflow:hidden}
.hero>img{position:absolute;inset:0}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(35,28,22,.55),rgba(35,28,22,.35) 50%,rgba(35,28,22,.55))}
.hero-in{position:relative;z-index:2;padding:0 20px;margin-top:-40px}
.hero-kick{font-size:clamp(18px,2.2vw,34px);font-weight:700;letter-spacing:.24em;text-transform:uppercase;margin-bottom:26px}
.hero h1{font-weight:700;font-size:clamp(46px,7.2vw,112px);line-height:.98;letter-spacing:-.015em}
.hero h1 .sf{color:#fff;font-size:1.05em;font-weight:500}
.brush{position:relative;display:inline-block}
.brush svg{position:absolute;left:-2%;bottom:-.02em;width:104%;height:.28em;color:var(--ac);overflow:visible}

/* ==========================================================================
   8. SEARCH CARD
   --------------------------------------------------------------------------
   The design's date picker and traveller counter are gone: the site stores no
   availability and no party-size pricing, so those controls could only ever
   have been decoration. What is left maps one-to-one onto filters the explorer
   genuinely supports — destination, park and trip length.
   ========================================================================== */
.search{position:relative;z-index:5;max-width:1480px;width:calc(100% - 48px);margin:-200px auto 0;background:#fff;
  border-radius:32px;box-shadow:0 20px 60px rgba(58,46,37,.14);padding:26px 62px 44px}
.search-q{display:flex;align-items:center;gap:22px;border-bottom:1px solid var(--line);padding:14px 0 26px}
.search-q svg{width:34px;height:34px;color:#A39C94;flex-shrink:0}
.search-q input{border:0;font:inherit;font-size:clamp(18px,1.6vw,26px);font-weight:500;color:var(--ink);
  width:100%;background:transparent}
.search-q input::placeholder{color:#A39C94}
.search-q input:focus{outline:none}
.fields{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:10px;align-items:center;padding-top:30px}
.fld{position:relative;display:flex;gap:16px;align-items:flex-start;text-align:left;cursor:pointer;
  padding:8px 10px;border-radius:14px}
.fld:hover{background:var(--cream)}
.fld>svg{width:40px;height:40px;color:var(--ac);flex-shrink:0}
.fld b{display:block;font-size:clamp(20px,1.7vw,30px);font-weight:600;line-height:1.1}
.fld .v{display:block;color:var(--muted);font-size:clamp(14px,1.1vw,19px);font-weight:500;margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.go{width:92px;height:92px;border-radius:22px;background:var(--ac);display:grid;place-items:center;
  box-shadow:0 10px 30px rgba(14,122,88,.35);transition:.2s;border:0}
.go:hover{background:var(--ac-dark)}
.go svg{width:38px;height:38px;color:#fff}
.pop{position:absolute;top:calc(100% + 14px);left:0;background:#fff;border-radius:18px;box-shadow:var(--shadow);
  padding:14px;min-width:300px;max-height:340px;overflow-y:auto;z-index:10;display:none;cursor:default}
.fld.open .pop{display:block}
.pop li button{width:100%;display:flex;justify-content:space-between;gap:12px;padding:10px 12px;
  border-radius:10px;font-size:15px;text-align:left}
.pop li button:hover,.pop li button.on{background:var(--ac-soft);color:var(--ac)}
.pop li small{color:var(--muted)}

/* ==========================================================================
   9. SERVICES
   ========================================================================== */
.svc{padding:110px 0 90px;text-align:center}
.svc-row{display:grid;grid-template-columns:1fr 150px 1fr 150px 1fr;align-items:start;max-width:1440px;margin:0 auto}
.svc-item svg.big{width:78px;height:78px;color:var(--ac);margin:0 auto 34px}
.svc-item h3{font-size:clamp(28px,2.6vw,44px);font-weight:600;line-height:1.1;margin-bottom:16px}
.svc-item p{color:var(--muted);font-size:16px;max-width:360px;margin:0 auto;line-height:1.75}
.svc-arrow{width:110px;height:40px;margin:30px auto 0;color:#B9B2AA}
.svc .pill{margin-top:48px}

/* ==========================================================================
   10. DESTINATIONS MOSAIC
   ========================================================================== */
.dest{background:var(--cream);padding:90px 0 110px;overflow:hidden}
.dest .wrap{display:grid;grid-template-columns:380px 1fr;gap:60px;align-items:center}
.dest .pill{margin-top:30px}
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mcol{display:flex;flex-direction:column;gap:22px}
.mcol:nth-child(1){margin-top:30px}
.mcol:nth-child(2){margin-top:-60px}
.mcol:nth-child(3){margin-top:80px}
.tile{position:relative;border-radius:18px;overflow:hidden;display:block;box-shadow:var(--shadow-sm)}
.tile img{transition:transform .6s}
.tile:hover img{transform:scale(1.06)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(20,14,10,.6))}
.tile span{position:absolute;left:22px;bottom:18px;z-index:2;color:#fff;font-weight:700;font-size:clamp(20px,1.8vw,28px)}
.tile em{position:absolute;left:22px;bottom:46px;z-index:2;color:rgba(255,255,255,.82);font-style:normal;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.tile i{position:absolute;right:16px;bottom:18px;z-index:2;width:32px;height:32px;border-radius:9px;
  background:var(--ac);display:grid;place-items:center}
.tile i svg{width:14px;height:14px;color:#fff}
.t-tall{height:300px}.t-mid{height:250px}.t-short{height:200px}

/* ==========================================================================
   11. PARKS CAROUSEL
   ========================================================================== */
.parks{padding:100px 0 90px;overflow:hidden}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;margin-bottom:60px}
.sec-head .lead{margin-top:6px;max-width:520px}
.sec-head .pill{margin-top:24px}
.car{position:relative}
.track{display:flex;gap:30px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:10px calc(50% - 205px) 20px}
.track::-webkit-scrollbar{display:none}
.pk{flex:0 0 410px;scroll-snap-align:center;background:#fff;border-radius:22px;box-shadow:var(--shadow-sm);
  overflow:hidden;border:2px solid transparent;transition:opacity .35s,border-color .35s,transform .35s;opacity:.45}
.pk.act{opacity:1;border-color:var(--ac)}
.pk.near{opacity:1}
.pk-img{position:relative;height:300px}
.tags{position:absolute;top:18px;left:16px;display:flex;gap:6px;z-index:2;flex-wrap:wrap;right:16px}
.tag{display:inline-flex;align-items:center;gap:6px;background:var(--ac);color:#fff;font-size:14px;
  font-weight:600;padding:6px 12px;border-radius:8px;white-space:nowrap}
.tag svg{width:14px;height:14px}
.tag.more{background:rgba(255,255,255,.35)}
.pk-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(20,14,10,.55))}
.pk-title{position:absolute;left:18px;right:90px;bottom:22px;z-index:2;color:#fff}
.pk-title h3{font-size:clamp(28px,2.6vw,44px);font-weight:700;line-height:1;text-shadow:0 2px 12px rgba(0,0,0,.25)}
.pk-title p{font-size:18px;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:none}
.pk.act .pk-title p{display:block}
.pk-go{position:absolute;right:18px;bottom:28px;z-index:3;width:50px;height:50px;border-radius:50%;
  background:var(--ac);display:grid;place-items:center}
.pk-go svg{width:18px;height:18px;color:#fff}
.pk-body{display:flex;justify-content:space-between;align-items:center;padding:22px 18px 26px;gap:12px}
.pk-body b{display:block;font-size:18px;font-weight:600}
.pk-body small{color:var(--muted);font-size:15px}
.heart{width:48px;height:48px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);
  display:grid;place-items:center;flex-shrink:0;position:relative;z-index:3}
.heart svg{width:20px;height:20px;color:#9E958C;fill:#9E958C}
.heart.on svg,.heart[aria-pressed="true"] svg{color:var(--ac);fill:var(--ac)}
.car-ctrl{display:flex;justify-content:center;gap:18px;margin-top:30px}
.car-ctrl button{width:52px;height:52px;border-radius:10px;background:#fff;box-shadow:var(--shadow-sm);
  display:grid;place-items:center}
.car-ctrl button:hover{color:var(--ac)}
.car-ctrl button:disabled{opacity:.35;cursor:default}
.car-ctrl svg{width:22px;height:22px}

/* ==========================================================================
   12. PACKAGES GRID
   --------------------------------------------------------------------------
   The design called this band "Where you'll sleep" and filled it with twelve
   invented lodges at "from $—". There is no accommodation inventory and no
   price on this site, so the same card shape carries what does exist: real
   itineraries, with their real length, country and photo count. The price
   block becomes trip length, which is the only hard number every itinerary has.
   ========================================================================== */
.pkgs{padding:90px 0 100px;background:var(--cream)}
.lgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.lg{background:#fff;border-radius:18px;box-shadow:var(--shadow-sm);overflow:hidden;display:flex;
  flex-direction:column;transition:.25s;position:relative}
.lg:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.lg-img{position:relative;height:200px}
.lg-img .tags{top:12px;left:12px;right:12px}
.lg-img .tag{font-size:12px;padding:4px 9px}
.lg-body{padding:18px;display:flex;flex-direction:column;flex:1}
.lg-top{display:flex;justify-content:space-between;gap:12px}
.lg-top h3{font-size:19px;font-weight:600;line-height:1.25}
.lg-top h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.lg-top .heart{width:38px;height:38px}
.lg-top .heart svg{width:16px;height:16px}
.facts{display:flex;gap:18px;color:var(--muted);font-size:14px;margin:12px 0 16px;flex-wrap:wrap}
.facts span{display:flex;gap:6px;align-items:center}
.facts svg{width:16px;height:16px;flex:none}
.price{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;
  border-top:1px solid var(--line);padding-top:14px}
.price small{display:block;color:var(--muted);font-size:13px}
.price .type{font-weight:600;font-size:14px}
.price .amt{text-align:right}

/* --------------------------------------------------------------------------
   THE TWO EXTRA LINES ON A TRIP CARD
   --------------------------------------------------------------------------
   The parks a trip actually spends a day in, and the first line of its
   itinerary. Both were written for the country pages and both now run on the
   home page's packages band too — the owner asked for one card design, not
   two — so they live here beside .lg rather than in country.css, which only
   loads on country pages.

   The areas line is read off the itinerary's own park terms. It is a fact
   about the trip, not a marketing line, which is why it is set as a labelled
   pair rather than as prose.
   -------------------------------------------------------------------------- */
.ts-ctry-areas{
  margin:10px 0 0;
  font-size:13px; line-height:1.55; color:var(--muted);
}
.ts-ctry-areas__k{
  font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  font-size:11px; color:var(--ac);
  margin-right:4px;
}
.ts-ctry-areas__v{ color:var(--body,#5F564E) }

/* Three lines, clamped, so cards of different excerpt lengths still line up. */
.ts-lg__excerpt{
  margin:10px 0 0;
  font-size:14px; line-height:1.6; color:var(--body,#5F564E);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden;
}
.price .amt b{color:var(--ac);font-size:22px;font-weight:700;line-height:1}
.lg.hide{display:none}
.center{text-align:center;margin-top:50px}

/* ==========================================================================
   13. CTA BAND
   ========================================================================== */
.cta{position:relative;height:500px;display:flex;align-items:center;justify-content:center;text-align:center;
  color:#fff;overflow:hidden}
.cta>img{position:absolute;inset:0}
.cta::after{content:"";position:absolute;inset:0;background:rgba(92,72,50,.62)}
.cta-in{position:relative;z-index:2;padding:0 20px}
.cta-in .kickw{font-size:clamp(14px,1.4vw,22px);font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.cta h2{font-weight:700;font-size:clamp(34px,4.6vw,70px);line-height:1.05}
.cta h2 .sf{color:#fff;font-size:1.02em}
.cta .pill{margin-top:40px;color:var(--ac)}

/* ==========================================================================
   14. NEWSLETTER
   ========================================================================== */
.news{background:var(--cream);padding:100px 0 110px;overflow:hidden}
.news .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.ticks{margin:26px 0 36px;display:grid;gap:12px}
.ticks li{display:flex;align-items:center;gap:14px;font-weight:500}
.ticks i{width:26px;height:26px;border-radius:50%;background:var(--ac);display:grid;place-items:center;flex:none}
.ticks svg{width:14px;height:14px;color:#fff}
.nform{max-width:480px}
.nform .wpcf7-form-control-wrap{display:block}
.nform input[type=email]{width:100%;padding:14px 18px;border:1.5px solid var(--line);border-radius:12px;
  font:inherit;background:#fff}
.nform input[type=email]:focus{outline:none;border-color:var(--ac)}
.nform input[type=submit],.nform button[type=submit]{margin-top:10px;background:var(--ac);color:#fff;
  font-weight:600;padding:13px 26px;border-radius:12px;border:0;cursor:pointer;transition:.2s}
.nform input[type=submit]:hover,.nform button[type=submit]:hover{background:var(--ac-dark)}
.collage{position:relative;height:520px}
.mini{position:absolute;background:#fff;border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.mini-a{left:4%;top:18%;width:250px;height:300px}
.mini-a .cover{position:absolute;inset:0}
.mini-a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(20,14,10,.7))}
.mini-a div{position:absolute;left:16px;right:16px;bottom:16px;z-index:2;color:#fff}
.mini-a b{font-size:26px;font-weight:700}
.mini-a p{font-size:12px;opacity:.9;line-height:1.4}
.mini-b{left:38%;top:0;width:290px;z-index:3}
.mini-b .img{height:190px;position:relative}
.mini-b .tags{top:10px;left:10px;right:10px}
.mini-b .tag{font-size:11px;padding:3px 8px}
.mini-b .body{padding:14px 16px}
.mini-b h4{font-size:20px;font-weight:600;line-height:1.15}
.mini-b .facts{margin:8px 0 10px;font-size:12px}
.mini-b .row{display:flex;justify-content:space-between;align-items:flex-end;border-top:1px solid var(--line);
  padding-top:10px;font-size:12px;color:var(--muted)}
.mini-b .row b{color:var(--ac);font-size:20px;line-height:1}
.mini-c{left:22%;top:56%;width:210px;z-index:4}
.mini-c .img{height:150px;position:relative}
.mini-c .img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(20,14,10,.6))}
.mini-c .img b{position:absolute;left:12px;bottom:10px;color:#fff;font-size:22px;z-index:2}
.mini-c .body{padding:10px 12px;font-size:12px;color:var(--muted)}
.special{position:absolute;left:14%;top:6%;color:var(--ac);font-weight:700;z-index:5;line-height:1}
.special small{display:block;font-size:14px}
.special span{font-size:34px}
.float-heart{position:absolute;left:12%;top:80%;width:52px;height:52px;border-radius:50%;background:var(--ac);
  display:grid;place-items:center;z-index:5;box-shadow:var(--shadow)}
.float-heart svg{width:22px;height:22px;color:#fff;fill:#fff}

/* ==========================================================================
   15. ABOUT CARDS
   ========================================================================== */
.about{background:var(--cream);padding:0 0 100px}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:1260px}
.acard{position:relative;background:#fff;border-radius:18px;box-shadow:var(--shadow-sm);padding:40px 48px 44px}
.acard .h2{font-size:clamp(30px,2.6vw,40px);margin-bottom:28px}
.acard p{color:var(--muted);font-size:16px;max-width:430px;padding-right:50px;line-height:1.75}
.acard .rgo{position:absolute;right:46px;bottom:40px;width:44px;height:44px;border-radius:12px;background:var(--ac);
  display:grid;place-items:center}
.acard .rgo svg{width:18px;height:18px;color:#fff}

/* ==========================================================================
   16. EXPERIENCES STRIP
   --------------------------------------------------------------------------
   Replaces the design's payment-logo wall. This site takes no payment online,
   so fourteen card and wallet logos would have advertised a checkout that does
   not exist. The same tight grid instead indexes the activity taxonomy — every
   cell is a real term with its real itinerary count, and every one links to a
   working filter.
   ========================================================================== */
.xps{padding:80px 0}
.xps-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.xps-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.xps-grid a{min-height:74px;border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;font-weight:600;font-size:14px;color:var(--ink);
  text-align:center;padding:10px 8px;line-height:1.2;transition:.2s}
.xps-grid a:hover{border-color:var(--ac);color:var(--ac);background:var(--ac-soft)}
.xps-grid b{font-size:11px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.xps-grid a:hover b{color:var(--ac)}

/* ==========================================================================
   17. FOOTER
   ========================================================================== */
.site-footer{background:var(--ac);color:#fff;padding:80px 0 0}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,.6fr);gap:40px}
.site-footer .logo-word{font-size:36px;display:flex;align-items:center;gap:10px}
.site-footer .logo-word svg{width:40px;height:40px;flex:none}
.site-footer p{margin-top:28px;max-width:340px;font-size:16px;line-height:1.75;opacity:.92}
.site-footer h4{font-size:19px;font-weight:700;margin-bottom:20px}
.site-footer ul{display:grid;gap:10px}
.site-footer ul a{opacity:.85;font-weight:500}
.site-footer ul a:hover{opacity:1;text-decoration:underline}
.foot-bot{margin-top:70px;border-top:1px solid rgba(255,255,255,.2);padding:24px 0;display:flex;
  justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;font-size:14px}
.foot-bot nav{display:flex;gap:18px}

/* ==========================================================================
   18. MODAL / ENQUIRY
   ========================================================================== */
.modal{position:fixed;inset:0;z-index:200;background:rgba(30,22,16,.55);display:none;align-items:center;
  justify-content:center;padding:20px}
.modal.open{display:flex}
.mbox{background:#fff;border-radius:24px;max-width:560px;width:100%;padding:38px;position:relative;
  max-height:92vh;max-height:92dvh;overflow:auto}
.mbox .xbtn{position:absolute;top:16px;right:16px}
.mbox h3{font-size:clamp(26px,3vw,34px);font-weight:700;line-height:1.05}
.mbox h3 .sf{font-size:1.05em}
.mbox>p{color:var(--muted);font-size:15px;margin:10px 0 22px}
.mbox .wpcf7-form p{margin-bottom:12px}
.mbox input,.mbox select,.mbox textarea{width:100%;padding:13px 14px;border:1.5px solid var(--line);
  border-radius:12px;font:inherit;font-size:15px;background:#fff}
.mbox input:focus,.mbox select:focus,.mbox textarea:focus{outline:none;border-color:var(--ac)}
.mbox input[type=submit]{background:var(--ac);color:#fff;font-weight:600;border:0;cursor:pointer;width:auto;
  padding:13px 26px}
.mbox input[type=submit]:hover{background:var(--ac-dark)}

/* ==========================================================================
   19. INNER PAGES
   ========================================================================== */
.page-hero{background:var(--cream);border-bottom:1px solid var(--line);padding:56px 0 48px}
.page-hero .kick{margin-bottom:8px}
.page-hero h1{font-weight:700;font-size:clamp(32px,4.4vw,56px);line-height:1.05;letter-spacing:-.015em}
.page-hero h1 .sf{font-size:1.05em}
.page-hero .lead{max-width:640px}
.page-content{max-width:820px;margin:0 auto;padding:56px 24px 72px}
.page-content > * + *{margin-top:1.1em}
.page-content h2{font-size:clamp(24px,2.4vw,32px);font-weight:700;margin:1.8em 0 .6em;line-height:1.2}
.page-content h3{font-size:clamp(20px,1.8vw,24px);font-weight:600;margin:1.5em 0 .5em}
.page-content p{color:var(--body);line-height:1.85}
.page-content ul,.page-content ol{margin-left:1.4em;color:var(--body)}
.page-content li{margin-bottom:.5rem;line-height:1.8}
.page-content a{color:var(--ac);text-decoration:underline;text-underline-offset:2px}
.page-content blockquote{border-left:3px solid var(--ac);padding:1rem 1.5rem;margin:1.5rem 0;background:var(--cream);
  border-radius:0 12px 12px 0;font-style:italic}
.page-content img{border-radius:16px;margin:2rem 0;box-shadow:var(--shadow-sm)}
.page-content table{width:100%;border-collapse:collapse;font-size:15px}
.page-content th,.page-content td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.page-content th{background:var(--cream);font-weight:600}
.post-nav{max-width:820px;margin:0 auto;padding:0 24px 72px;display:flex;justify-content:space-between;gap:20px}
.post-nav a{color:var(--ac);font-weight:600;font-size:15px}

/* ==========================================================================
   20. RESPONSIVE
   ========================================================================== */
@media (max-width:1560px){
  .topbar .wrap{padding-left:440px}.logo-tab{width:360px}.nav{margin-left:390px;gap:0}
}
@media (max-width:1400px){
  .topbar .wrap{padding-left:400px}
  .logo-tab{width:340px}
  .nav{margin-left:370px}.nav>li>a{font-size:18px;padding:30px 12px}
  .hgroup>*{padding:0 14px;font-size:16px}
  .xps-grid{grid-template-columns:repeat(5,1fr)}
}
@media (max-width:1180px){
  :root{--header-height:76px}
  .topbar .wrap{padding-left:24px}
  .topbar__contact{gap:18px}
  .nav,.hgroup,.site-nav.solid .hdr-cta,body:not(.home) .hdr-cta{display:none}
  .burger{display:grid}
  .logo-tab,.site-nav.solid .logo-tab,body:not(.home) .logo-tab{position:static;width:auto;height:auto;
    background:none;padding:0;box-shadow:none;border-radius:0}
  .site-nav .wrap{height:76px}
  .site-nav:not(.solid):not(body:not(.home) *) .logo-tab{color:#fff}
  .home .site-nav:not(.solid) .logo-tab{color:#fff}
  body:not(.home) .logo-tab,.site-nav.solid .logo-tab{color:var(--ac)}
  .logo-word,.site-nav.solid .logo-word,body:not(.home) .logo-word{font-size:28px}
  .fields{grid-template-columns:1fr 1fr}
  .go{grid-column:1/-1;width:100%;height:64px;border-radius:16px}
  .search{padding:22px 28px 30px;border-radius:24px}
  .svc-row{grid-template-columns:1fr;gap:50px}
  .svc-arrow{display:none}
  .dest .wrap,.sec-head,.news .wrap{grid-template-columns:1fr}
  .lgrid{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr}
  .xps-grid{grid-template-columns:repeat(4,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .topbar{font-size:12px}
  .topbar__contact a{gap:6px}
  .hero{height:600px}
  .search{margin-top:-120px;margin-left:14px;margin-right:14px;padding:16px 18px 22px;width:calc(100% - 28px)}
  .search-q svg{width:24px;height:24px}
  .fields{grid-template-columns:1fr}
  .fld .v{max-width:none}
  .pop{min-width:0;left:0;right:0}
  .svc{padding:70px 0}
  .mosaic{grid-template-columns:1fr 1fr}
  .mcol:nth-child(3){display:none}
  .mcol:nth-child(n){margin-top:0}
  .pk{flex-basis:84%}
  .track{padding:10px 8%}
  .lgrid{grid-template-columns:1fr}
  .collage{height:440px;transform:scale(.8);transform-origin:left top;width:125%}
  .xps-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr}
  .acard{padding:30px}
  .acard p{padding-right:0}
  .page-content{padding:40px 20px 56px}
}

/* ==========================================================================
   21. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .pill:hover,.lg:hover{transform:none}
  .tile:hover img{transform:none}
}

/* ==========================================================================
   22. ARCHIVES, PAGINATION AND SMALL SHARED PIECES
   --------------------------------------------------------------------------
   The previous theme's stylesheet was replaced wholesale, so the handful of
   classes its generic templates relied on (.archive-grid, .acard-*, .rule,
   .eyebrow, .pagination) are redefined here in this design's language rather
   than left unstyled.
   ========================================================================== */
.eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ac);margin-bottom:12px}
.rule{display:block;width:64px;height:2px;background:var(--ac);border-radius:2px;margin:18px 0 0}

.archive-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;
  max-width:1300px;margin:0 auto;padding:56px 24px 24px}
.acard{background:#fff;border-radius:18px;box-shadow:var(--shadow-sm);overflow:hidden;display:flex;
  flex-direction:column;transition:.25s;position:relative}
.acard:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.acard-img{height:200px;overflow:hidden;background:var(--cream)}
.acard-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.acard:hover .acard-img img{transform:scale(1.05)}
.acard-b{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.acard-b h2{font-size:20px;font-weight:600;line-height:1.28}
.acard-b h2 a::after{content:"";position:absolute;inset:0;z-index:1}
.acard-b p{color:var(--muted);font-size:15px;line-height:1.7}

.pagination,.wp-block-query-pagination,.nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  align-items:center;max-width:1300px;margin:0 auto;padding:16px 24px 72px}
.pagination .page-numbers,.nav-links .page-numbers{display:inline-grid;place-items:center;min-width:44px;
  height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;font-weight:600;font-size:15px;
  color:var(--ink);transition:.2s}
.pagination .page-numbers:hover,.nav-links .page-numbers:hover{border-color:var(--ac);color:var(--ac);
  background:var(--ac-soft)}
.pagination .page-numbers.current,.nav-links .page-numbers.current{background:var(--ac);border-color:var(--ac);color:#fff}
.pagination .dots:hover{border-color:var(--line);color:var(--ink);background:transparent}
.screen-reader-text + .nav-links{padding-top:0}

@media (max-width:1180px){ .archive-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:700px){ .archive-grid{grid-template-columns:minmax(0,1fr);padding:36px 20px 16px} }

/* ==========================================================================
   23. TOUCH TARGETS
   --------------------------------------------------------------------------
   Measured at 390px: the save control inherits 38px from the compact card
   variant, footer links sat at 21px tall, and both wordmarks came in just
   under the floor. Card titles measure short too, but `.lg-top h3 a::after`
   covers the whole card, so the real target is the card itself.
   ========================================================================== */
@media (max-width: 1180px) {
  .lg-top .heart{width:44px;height:44px}
  .lg-top .heart svg{width:18px;height:18px}
  .site-footer ul a{display:inline-flex;align-items:center;min-height:44px}
  .foot-bot nav a{display:inline-flex;align-items:center;min-height:44px}
  .logo-tab,.site-footer .logo-word{min-height:44px;align-items:center}
  .topbar__contact a{min-height:44px}
  .topbar__social a,.foot-social a{width:44px;height:44px}
}

/* ==========================================================================
   24. GOLD
   --------------------------------------------------------------------------
   The logo sets the rule: forest-green wordmark, gold script. So gold is the
   flourish, not a second structural colour — it takes the serif accent lines
   (the `.sf` spans, which are literally the site's script voice), the topbar
   ticks, and link/hover states on the dark green surfaces where green cannot
   be seen. Everything structural stays green.

   ACCESSIBILITY, MEASURED. #EAB924 on white is 1.83:1 and on --cream 1.66:1.
   That fails even the 3:1 floor that large text gets, and these accent lines
   are not flourish — they carry half of every heading's words ("ready-made
   routes", "parks & reserves", "in the planner"). The note that used to sit
   here argued that display size made it acceptable. It does not: size lowers
   the threshold from 4.5:1 to 3:1, it does not remove it.

   So on light surfaces the accent lines take --gold-ink (#8F6A0A, 4.49:1 on
   white, 4.21:1 on cream) — the same deep gold the signature uses. Still
   gold, still the two-tone heading, now legible.

   On the dark green surfaces the bright gold already measures 5.66:1 and
   7.57:1, so it stays exactly as it was. Those are the only exceptions and
   they are listed below; anything else on a dark surface needs adding here.
   ========================================================================== */

/* The serif accent lines — the "Safaris" of every heading. */
.sf, .h2 .sf { color: var(--gold-ink); }

/* Dark green surfaces: the bright gold is what reads there, and passes. */
.ts-why-case .sf,
.ts-cta .sf { color: var(--gold); }

/* On the dark hero and CTA the script is already white by design; keep it. */
.hero h1 .sf, .cta h2 .sf { color: #fff; }

/* Top bar ticks. */
.topbar__contact svg { color: var(--gold); }

/* Dark green surfaces: gold is the only accent that reads there. */
.site-footer h4 { color: var(--gold); }
.site-footer ul a:hover,
.site-footer .foot-bot a:hover { color: var(--gold); opacity: 1; }
.site-footer a:focus-visible { outline-color: var(--gold); }

/* The hero brush stroke under "calm" — the logo's own swash gesture. */
.brush svg { color: var(--gold); }

/* Small highlights that earn it. */
.tag.more { background: var(--gold); color: var(--ink); }
.pk.act { border-color: var(--gold); }
.heart.on svg, .heart[aria-pressed="true"] svg { color: var(--gold-dark); fill: var(--gold-dark); }
.xps-grid a:hover b { color: var(--gold-dark); }

/* Current page in the navigation. */
.site-nav.solid .nav > li.current-menu-item > a,
body:not(.home) .nav > li.current-menu-item > a { color: var(--ac); }
.nav > li > a { position: relative; }
.nav > li.current-menu-item > a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 22px;
  height: 2px; background: var(--gold); border-radius: 2px;
}

/* ==========================================================================
   25. BRAND LOGO
   --------------------------------------------------------------------------
   Two lockups, swapped by header state: the white wordmark over the green tab,
   the full-colour one once the bar turns solid and on every inner page. Both
   are the same 720px asset, so the swap costs no layout shift.
   ========================================================================== */
.logo-tab img,
.site-footer .logo-word img { display: block; width: auto; }

.logo-tab .logo-img { height: 58px; transition: height .25s }
.logo-tab .logo-img--solid { display: none; }
.site-nav.solid .logo-tab .logo-img--solid,
body:not(.home) .logo-tab .logo-img--solid { display: block; }
.site-nav.solid .logo-tab .logo-img--light,
body:not(.home) .logo-tab .logo-img--light { display: none; }
.site-nav.solid .logo-tab .logo-img,
body:not(.home) .logo-tab .logo-img { height: 46px; }

.site-footer .logo-word img { height: 54px; }
.mnav-top img { height: 40px; width: auto; }

@media (max-width: 1180px) {
  /* The green tab collapses on small screens, so the light lockup would sit on
     white. Use the colour one from here down, in both header states. */
  .logo-tab .logo-img--light { display: none !important; }
  .logo-tab .logo-img--solid { display: block !important; }
  .logo-tab .logo-img { height: 42px; }
  .home .site-nav:not(.solid) .logo-tab { background: rgba(255,255,255,.92); border-radius: 12px; padding: 6px 12px; }
}

/* ==========================================================================
   26. LOGO TAB CLEARANCE
   --------------------------------------------------------------------------
   Two separate clipping bugs, both caused by the top bar painting above the
   header (z-index 60 vs 50), and both measured rather than guessed:

   HOME, over the hero — the tab deliberately hangs 42px upward so it reads as
   a tab tucked under the bar. That part is the design. But its contents were
   centred in the full 118px, which put the top 12px of the wordmark behind the
   bar. Padding the overlap out makes the lockup centre in the VISIBLE band
   (42→118) instead, which is where the eye expects it.

   INNER PAGES — worse, 21px of a 46px lockup hidden. The header was
   `position:fixed; top:0`, so at rest it sat underneath the top bar rather
   than below it. Sticky positioning puts it back in flow after the bar and
   still pins it to the top once you scroll, so there is no overlap at any
   scroll position and no need to pad the main content down.
   ========================================================================== */

/* Home, transparent over the hero. */
.logo-tab { padding-top: 42px; }

/* Scrolled: the bar has gone, so the tab centres in its own height again. */
.site-nav.solid .logo-tab { padding-top: 0; }

/* Inner pages: flow below the bar, pin on scroll. */
body:not(.home) .site-nav { position: sticky; top: 0; }
body:not(.home) .logo-tab { padding-top: 0; }
body:not(.home) .site-main { padding-top: 0; }
body.admin-bar:not(.home) .site-nav { top: 32px; }

@media (max-width: 1180px) {
  /* The tab stops hanging upward once it collapses to a plain wordmark. */
  .logo-tab { padding-top: 0; }
}

/* Top bar contact cluster. The phone is the primary item — it carries the icon
   and sits first; the email drops out before it on narrow screens, and both go
   before the "Talk to a planner" link so something actionable always survives. */
.topbar__tel{display:inline-flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.topbar__tel svg{width:15px;height:15px;color:var(--gold);flex:none}
@media (max-width:1180px){ .topbar__mail{display:none} }
@media (max-width:700px){
  .topbar .wrap{gap:12px}
  .topbar__social{gap:0}
  .topbar__tel{min-height:44px}
}


/* ==========================================================================
   THE HOME PAGE'S BAND ALTERNATION
   --------------------------------------------------------------------------
   The page alternates white and cream band by band. It had stopped in two
   places: .ts-intro and .pkgs were both cream (one 2,040px cream run directly
   under the hero), and .parks and .ts-habout were both white (another
   1,972px run).

   The tail from .ts-habout down to .ts-why already alternates and ends on
   white above the green CTA, so its parity is fixed. Working back up from it,
   every band above is forced: .parks cream, .dest white, .svc cream, .pkgs
   white, .ts-intro cream. These four rules are that, and they only work as a
   set — flip any one and the run reappears somewhere else.

   SCOPED TO .home ON PURPOSE. .pkgs is also the listing band on /parks/ and
   on every park archive, and .parks, .dest and .svc each have their own
   neighbours on those templates. Flipping them globally put two cream bands
   together on /parks/ — measured, not guessed. Each template's sequence is
   its own problem.
   ========================================================================== */
/* ==========================================================================
   SMOOTH IN-PAGE SCROLLING
   --------------------------------------------------------------------------
   The class is put on <html> by ts_smooth_scroll_class(), on the home page
   and the country pages — the two templates with in-page links.

   scroll-padding-top is not optional here. The header is fixed once the page
   has scrolled, so without it every anchor lands with its heading underneath
   the navigation. 88px is the header's own height; 16px is so the heading
   does not sit flush against it. The country pages add their sticky tab bar
   on top of that, in country.css.

   Reduced motion turns the animation off and leaves the padding, which is
   layout rather than movement: the jump goes back to instant but still lands
   in the right place.
   ========================================================================== */
html.ts-smooth{ scroll-padding-top:104px }

@media (prefers-reduced-motion:no-preference){
  html.ts-smooth{ scroll-behavior:smooth }
}

.home .pkgs{background:var(--white)}
.home .svc{background:var(--cream)}
.home .dest{background:var(--white)}
.home .parks{background:var(--cream)}
/* The planner card and the Tripadvisor seal are now one row (.duo), so the
   home page has one band fewer than it had and the parity from .duo down
   shifts by one: .duo cream, .xps white, .ts-why cream. Only .ts-why needed
   moving. Its own sheet argues for white on the grounds that white keeps its
   green panel from fusing with the cream above and the dark green below —
   that still holds here, because what is above it now is .xps, which is
   white, and the panel is an object with edges on any light surface. Home
   only: everywhere else the seal is still a band and nothing shifted. */
.home .ts-why{background:var(--cream)}

/* A white card on a white band is held apart only by a 4px/16px shadow at 8%,
   and along the card's top edge, where that shadow is shortest, the edge
   disappears. A hairline separates it instead. Only here: everywhere else
   .lg still sits on cream. */
.home .pkgs .lg{border:1px solid var(--line)}