/* Andrew Burns Travel Co. — design system
   One canonical value per rule, derived from the approved mockups.
   Page-specific rules live in each page's inline <style>, which loads after this file. */

/* ---- tokens ---- */
:root{--accent:#000000;--accent-dark:#333333;--bg:#FFFFFF;--bg-alt:#F4F4F4;--good:#000000;--ink:#000000;--ink-soft:#666666;--line:#E2E2E2;--maxw:1240px;--sans:'Jost',system-ui,sans-serif;--serif:'Cormorant Garamond',Georgia,serif;--white:#fff}

/* ---- base + components ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased}
/* ============================================================================
   STANDING RULE — MONOCHROME IS FOR UI CHROME ONLY; PHOTOGRAPHY STAYS COLOUR
   (CAL-115)
   ----------------------------------------------------------------------------
   ABT's design system is monochrome black & white, but that governs UI CHROME
   ONLY: nav, buttons, dividers, section framing, backgrounds, kickers, form
   fields and icons — all driven by the black/white tokens above
   (--ink / --accent / --line = #000; --bg / --white = #fff). It is NOT a
   photography treatment.

     → Do NOT apply `filter:grayscale()`, `filter:saturate(0)` or `sepia()` to
       any photograph — hero, gallery, lodge/stay, day-by-day, editorial or
       feed image. Safari (Andrew's core segment) sells on visual richness;
       black & white flattens it.
     → A light `filter:contrast(~1.03)` for editorial punch is fine, but the
       image must keep its original colour.

   The `filter:none` default below means every image renders in full colour
   unless a page deliberately opts into a treatment. It is intentionally NOT
   `!important`: a page's own <style> (which loads after this file) can still
   override it, so this fixes omissions without silently re-styling pages that
   made a deliberate choice — new pages inherit colour for free. Photography
   rendered via CSS `background-image` on a <div> (heroes, .stay, .gal, .day
   .di, etc.) is not reachable by this selector, so the rule above is the
   governing convention for those; keep it in mind when authoring a new page.
   ============================================================================ */
img{max-width:100%;display:block;filter:none}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.kicker{text-transform:uppercase;letter-spacing:.28em;font-size:12px;color:var(--accent)}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.12}
h2{font-size:clamp(30px,3.6vw,48px)}
p{color:var(--ink-soft)}
.btn{display:inline-flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:.2em;font-size:12px;padding:16px 30px;border:1px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer;transition:.3s;font-family:var(--sans)}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn--solid{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--solid:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn--light{border-color:rgba(255,255,255,.6);color:#fff}
.btn--light:hover{background:#fff;color:var(--ink)}
.arrow{transition:transform .3s}
.btn:hover .arrow{transform:translate(3px,-3px)}
section.block{padding:96px 0}
@media(max-width:900px){section.block{padding:72px 0}}
.block--alt{background:var(--bg-alt)}
.utility{background:var(--ink);color:#E3E3E3}
.utility .wrap{display:flex;justify-content:space-between;align-items:center;height:42px;font-size:12.5px}
.u-left{display:flex;align-items:center;gap:8px}
.u-mail{flex:none;display:block}
.u-right{display:flex;gap:24px;text-transform:uppercase;letter-spacing:.15em;font-size:11px}
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:84px}
.brand{grid-column:2;text-align:center}
.brand .logo{height:54px;width:auto;display:block;margin:0 auto}
.nav-left,.nav-right{display:flex;align-items:center;gap:26px}
.nav-right{justify-content:flex-end}
.nav a.link{text-transform:uppercase;letter-spacing:.16em;font-size:12px;position:relative}
.nav a.link.active,.nav a.link:hover{color:var(--ink)}
.nav a.link::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--accent);transition:.3s}
.nav a.link.active::after,.nav a.link:hover::after{width:100%}

/* Destinations dropdown (desktop hover/focus) — see abt_nav() in functions.php */
.nav-left li.has-dropdown{position:relative}
.nav-left li.has-dropdown::after{content:"";position:absolute;top:100%;left:0;width:280px;height:18px}
.nav-left li.has-dropdown>a.link{padding-right:15px}
.nav-left li.has-dropdown>a.link::before{content:"";position:absolute;right:0;top:6px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;transition:transform .25s}
.nav-left li.has-dropdown:hover>a.link::before,
.nav-left li.has-dropdown:focus-within>a.link::before{transform:rotate(180deg)}
.nav-left li.has-dropdown .submenu{display:none;position:absolute;top:100%;left:0;margin:18px 0 0;padding:8px 0;min-width:280px;background:var(--bg);border:1px solid var(--line);box-shadow:0 20px 40px rgba(0,0,0,.08);z-index:60;list-style:none}
.nav-left li.has-dropdown:hover .submenu,
.nav-left li.has-dropdown:focus-within .submenu{display:block}
.nav-left .submenu a.sublink{display:block;padding:12px 26px;font-family:var(--serif);font-size:15.5px;letter-spacing:normal;text-transform:none;color:var(--ink-soft);transition:.2s}
.nav-left .submenu a.sublink:hover{color:var(--ink);background:var(--bg-alt)}

.split{display:grid;grid-template-columns:0.9fr 1fr;gap:64px;align-items:center}
.creds-note{font-size:13px;color:var(--ink-soft);max-width:none;margin-bottom:26px} /* CAL-412: span full bio column (was 48ch — wrapped narrower than the paragraphs above); about-only class */
.sec-head{max-width:720px;margin:0 auto 50px;text-align:center}
.sec-head h2{margin-top:14px}
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:44px}
.value .num{font-family:var(--serif);font-size:30px;color:var(--accent);display:block;margin-bottom:16px}
.value h3{font-family:var(--sans);text-transform:uppercase;letter-spacing:.14em;font-size:13px;font-weight:500;margin-bottom:14px}
.value p{font-size:14.5px}
.value .v-ic{display:block;color:var(--accent);margin-bottom:18px;line-height:0}
.value .v-ic svg{width:28px;height:28px}
/* Travel-with-ABTC value tiles: narrow the band to 80% + centre on mobile so it
   doesn't run edge to edge (review 2026-08-26). Column count stays owned by each
   template's inline <style> (front-page.php / inc/itinerary.php: 2-up ≤900, 1-up
   ≤560); those only set grid-template-columns, so this width/margin survives the
   cascade. Applies to both places .values renders (homepage + itinerary Why-band). */
@media(max-width:900px){.values{width:80%;margin-inline:auto}}
/* Destinations — region cards laid out in a grid (no tabs); centred so an
   incomplete last row hangs centred. 7 regions => a deliberate row of 4 then
   a row of 3: tiles are pinned to a quarter-width (no flex-grow) so exactly
   four sit per row and the remaining three centre underneath. */
.dest-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:26px}
.dest-grid .tile{flex:0 1 calc(25% - 20px);max-width:none}
@media(max-width:900px){.dest-grid .tile{flex-basis:calc(50% - 13px)}}
@media(max-width:560px){.dest-grid .tile{flex-basis:100%;max-width:none}}
.cta{text-align:center;background:var(--ink);color:#E8E8E8;padding:96px 0}
.cta h2{color:#fff}
.cta p{color:#C0C0C0;margin:16px auto 30px;max-width:60ch}
footer.site{background:#000;color:#BEBEBE;padding:70px 0 36px}
.fcols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px}
/* Footer logo enlarged 56px -> 80px (Josh, 2026-08-26). Source art is 395x196,
   so 80px still renders at ~2.45x on retina — comfortably sharp. Past ~98px it
   drops under 2x and would soften, which is the trap the Services tiles hit. */
/* Logo now sits at the BOTTOM of the brand column, under the socials (Lianne
   round-4, 2026-09-02) — margin-top separates it from the icons above. */
footer .flogo{height:80px;width:auto;display:block;margin-top:36px}
footer h4{text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:#fff;font-weight:500;margin-bottom:18px}
footer ul{list-style:none;display:grid;gap:11px}
footer ul a{font-size:14px;color:#BEBEBE}
footer ul a:hover{color:#fff}
/* Gap between the JOIN THE LIST button and the socials widened 20px -> 44px
   (Lianne round-4) so this section stands out. */
.fsocial{display:flex;gap:16px;margin-top:44px}
.fsocial li{margin:0}
.fsocial a{display:inline-flex;color:#BEBEBE;transition:color .2s ease}
.fsocial a:hover{color:#fff}
.fsocial svg{width:22px;height:22px;display:block}
.fbar{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.12);margin-top:48px;padding-top:24px;font-size:12px;color:#868686}
.menu-btn{display:none;background:none;border:none;font-size:26px;line-height:1;cursor:pointer;color:var(--ink);padding:2px 0 0}
.mnav{position:fixed;inset:0;z-index:300;background:var(--bg);transform:translateX(100%);transition:transform .38s ease;visibility:hidden;display:flex;flex-direction:column;padding:22px 28px 40px;overflow-y:auto}
.mnav.open{transform:none;visibility:visible}
.mnav-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.mnav-brand{font-family:var(--serif);font-size:19px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.mnav-logo{display:block;height:40px;width:auto}
.mnav-close{background:none;border:none;font-size:34px;line-height:1;cursor:pointer;color:var(--ink);padding:0}
.mnav-links{display:flex;flex-direction:column}
.mnav-links a{font-family:var(--serif);font-size:25px;padding:15px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.mnav-links a.mnav-cta{margin-top:24px;border:1px solid var(--accent);background:var(--accent);color:#fff;text-align:center;font-family:var(--sans);font-size:12px;letter-spacing:.22em;text-transform:uppercase;padding:17px 20px}
/* Destinations countries are collapsed behind a down-arrow toggle (mobileNav()
   nests the region sublinks in a .mnav-subgroup; the arrow rotates on expand). */
.mnav-haschild{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.mnav-links a.mnav-parent{flex:1;border-bottom:none}
.mnav-toggle{background:none;border:none;cursor:pointer;color:var(--ink);padding:15px 2px 15px 18px;line-height:1;font-size:18px}
.mnav-arrow{display:inline-block;transition:transform .25s}
.mnav-haschild.open .mnav-arrow{transform:rotate(180deg)}
.mnav-subgroup{display:none;flex-direction:column}
.mnav-subgroup.open{display:flex}
.mnav-links a.mnav-sublink{font-family:var(--sans);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);padding:13px 0 13px 22px}
.mnav-social{display:flex;flex-wrap:wrap;gap:26px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.mnav-social a{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.mnav-social a:hover{color:var(--ink)}
.intro-band{padding:80px 0;background:var(--white)}
.intro-band .wrap{max-width:840px}
.intro-band p{font-size:16.5px;line-height:1.75}
.intro-band p+p{margin-top:20px}
.country-lead{font-size:16px;margin-bottom:30px;text-align:center}
.countries{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;max-width:1000px;margin:0 auto}
.country{border:1px solid var(--line);background:var(--white);text-align:center;padding:18px 14px;font-family:var(--serif);font-size:17px}$
.country:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.card{background:var(--white);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;transition:.3s}
.card:hover{box-shadow:0 16px 36px rgba(0,0,0,.12);transform:translateY(-4px)}
.card .img{position:relative;aspect-ratio:16/10;background:#C1C1C1 center/cover no-repeat;overflow:hidden}
.card .flag{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.94);color:var(--ink);font-size:10px;text-transform:uppercase;letter-spacing:.14em;padding:6px 12px}
/* All three trip-type stickers (Escorted by Andrew · Private · Group Tour) share
   the white .flag treatment above (Lianne round-3, 2026-08-26). The old accent
   .flag.escort override was removed so "Escorted by Andrew" matches the others. */
.card .body{padding:26px 28px 28px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:24px;margin-bottom:8px}
.card .meta{font-size:13px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.card .desc{font-size:14.5px;line-height:1.7;margin-bottom:20px}
.card .go{margin-top:auto;font-size:11px;text-transform:uppercase;letter-spacing:.15em;border-bottom:1px solid var(--ink);padding-bottom:3px;align-self:flex-start}
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:30px;margin:0}
.way{display:flex;flex-direction:column}
.way-img{aspect-ratio:4/3;background-size:cover;background-position:center;margin-bottom:16px}
.way h3{font-size:18px;margin-bottom:8px}
.way p{font-size:14.5px}
.highlights{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.hl{display:grid;grid-template-columns:1fr 1fr;background:var(--white);overflow:hidden;min-height:300px}
.hl i{background-size:cover;background-position:center;transition:transform .8s ease}
.hl:hover i{transform:scale(1.04)}
.hl .in{padding:44px 38px;display:flex;flex-direction:column;justify-content:center}
.hl h3{font-size:26px;margin-bottom:12px}
.hl p{font-size:15.5px;line-height:1.68}
.exp-tabs{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:44px}
.exp-tab{border:1px solid var(--line);background:var(--white);padding:12px 24px;font-size:12.5px;text-transform:uppercase;letter-spacing:.12em;cursor:pointer;transition:.25s;font-family:var(--sans)}
.exp-tab:hover{border-color:var(--ink)}
.exp-tab.on{background:var(--accent);border-color:var(--accent);color:#fff}
.exp-panel{display:none}
.exp-panel.show{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;animation:fade .5s ease}
.exp-panel .eimg{aspect-ratio:4/3;background-size:cover;background-position:center}
.exp-panel h3{font-size:30px;margin-bottom:14px}
.exp-panel p{font-size:15px;line-height:1.7;margin-bottom:18px}
.exp-panel ul{list-style:none;display:grid;gap:11px}
.exp-panel li{font-size:14.5px;padding-left:24px;position:relative;color:var(--ink)}
.exp-panel li::before{content:"—";position:absolute;left:0;color:var(--accent)}
.seasons{max-width:940px;margin:0 auto}
.season-tabs{display:flex;border:1px solid var(--line)}
.season-tab{flex:1;text-align:center;padding:20px 10px;cursor:pointer;font-family:var(--serif);font-size:20px;color:var(--ink-soft);border-right:1px solid var(--line);transition:.25s;background:var(--white)}
.season-tab:last-child{border-right:none}
.season-tab.on{background:var(--ink);color:#fff}
.season-body{border:1px solid var(--line);border-top:none;padding:44px;background:var(--white)}
.season-content{display:none}
.season-content.show{display:block;animation:fade .4s ease}
.season-content .st-when{font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:var(--accent);margin-bottom:10px}
.season-content h3{font-size:26px;margin-bottom:12px}
.season-content p{font-size:15px;line-height:1.7}
.imgbreak{position:relative;color:#fff;text-align:center;padding:150px 0;background-size:cover;background-position:center;background-attachment:fixed}
.imgbreak::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.46)}
.imgbreak .wrap{position:relative}
.imgbreak p{font-family:var(--serif);font-size:clamp(26px,3.4vw,42px);color:#fff;font-style:italic;max-width:22ch;margin:0 auto;line-height:1.25}
/* When to Go → guide banner (CAL-34): editorial CTA band that replaces the
   season tabs, pointing at the "best time to travel" blog post. */
.guidebanner{max-width:760px;margin:0 auto;text-align:center;border:1px solid var(--line);padding:56px 44px}
.guidebanner h2{margin-top:14px}
.guidebanner p{margin:16px auto 28px;max-width:54ch}
.guidebanner-link{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);text-transform:uppercase;letter-spacing:.15em;font-size:11px;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:4px;transition:.3s}
.guidebanner-link:hover{gap:16px}
.guidebanner-link .ar{color:var(--accent);transition:.3s}
@media(max-width:560px){.guidebanner{padding:40px 24px}}
.faq{max-width:none;margin:0}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 4px;cursor:pointer;font-family:var(--serif);font-size:21px}
.faq-q .pl{font-size:22px;color:var(--accent);transition:transform .3s;flex-shrink:0}
.faq-item.open .pl{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a p{font-size:15px;line-height:1.7}
.faq-item.open .faq-a{max-height:360px;padding-bottom:24px}
.introx{padding:92px 0}
.introx .introx-row{display:grid;grid-template-columns:0.82fr 1fr;gap:64px;align-items:center}
.introx .im{aspect-ratio:4/5;background-size:cover;background-position:center}
.introx .kicker{display:block;margin-bottom:14px}
.introx h2{margin-bottom:22px}
.introx p{font-size:16px;line-height:1.75}
.introx p+p{margin-top:16px}
.introx .stats{display:flex;gap:44px;margin-top:38px;flex-wrap:wrap}
.introx .stat .n{font-family:var(--serif);font-size:34px;color:var(--ink);line-height:1}
.introx .stat .l{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft);margin-top:8px;max-width:16ch}
.regions{display:grid;grid-template-columns:repeat(var(--regions-cols,3),minmax(0,1fr));gap:44px;max-width:calc(var(--regions-cols,3) * 320px + (var(--regions-cols,3) - 1) * 44px);margin:0 auto;text-align:left}
/* Responsive columns so a 4-region list (Europe) seats cleanly; 3-region pages still show 3. */
.regions--exp{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));align-items:start;gap:32px 40px}
.region-col{border-top:2px solid var(--ink);padding-top:24px}
.region-col h3{font-size:25px;margin-bottom:8px}
.region-col .rd{font-size:14px;color:var(--ink-soft);line-height:1.6;margin-bottom:22px}
.region-col ul{list-style:none;display:grid;gap:12px}
.region-col li a{font-size:16px;color:var(--ink);display:inline-flex;align-items:center;gap:8px;transition:.2s}
.region-col li a .ar{color:var(--accent);opacity:0;transform:translateX(-4px);transition:.2s}
.region-col li a:hover{color:var(--accent)}
.region-col li a:hover .ar{opacity:1;transform:translateX(0)}
/* Expandable regions (Europe · CAL-30): each region is a <details> accordion. */
.regions--exp .region-col{padding-top:0}
.regions--exp .region-head{list-style:none;cursor:pointer;position:relative;padding:22px 30px 20px 0;outline:none}
.regions--exp .region-head::-webkit-details-marker{display:none}
.regions--exp .region-head::after{content:"";position:absolute;top:30px;right:4px;width:9px;height:9px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);transition:transform .25s}
.regions--exp .region-col[open] .region-head::after{transform:rotate(-135deg)}
.regions--exp .region-head:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.regions--exp .region-head .rd{margin-bottom:0}
.regions--exp .region-col ul{padding-bottom:22px}
.regions-cta{text-align:center;margin-top:48px}
.testi{text-align:center}
.testi .wrap{max-width:840px}
.testi .stars{color:var(--accent);letter-spacing:3px;margin-bottom:22px;font-size:15px}
.testi blockquote{font-family:var(--serif);font-size:clamp(24px,3vw,34px);line-height:1.4;font-style:italic;margin-bottom:22px}
.testi .who{font-size:12.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft)}
.testi .ph{display:inline-block;margin-top:16px;font-size:10.5px;background:#EAEAEA;color:#707070;padding:4px 11px;letter-spacing:.05em;text-transform:uppercase}
.testi .rsrc{display:inline-block;margin-top:16px;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft);border-bottom:1px solid var(--line);padding-bottom:4px}
.fbar a:hover{color:#fff}
.news{background:#191919;color:#E8E8E8;padding:88px 0;text-align:center}
.news .wrap{max-width:640px}
.news h2{color:#fff;margin:12px 0 10px}
.news p{color:#C0C0C0;margin-bottom:26px}
.news .f{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.news input{flex:1;min-width:220px;background:transparent;border:1px solid rgba(255,255,255,.28);color:#fff;padding:14px 16px;font-family:var(--sans)}
.news input::placeholder{color:#A0A0A0}
.card .flag.tailor{background:var(--accent);color:#fff}
.crumb{background:var(--bg-alt);border-bottom:1px solid var(--line)}
.crumb .wrap{display:flex;gap:10px;align-items:center;height:46px;font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft)}
.crumb a:hover{color:var(--ink)}
.crumb .sep{opacity:.45}
.crumb .now{color:var(--ink)}
.brand .name{font-family:var(--serif);font-size:26px;letter-spacing:.14em;font-weight:500;text-transform:uppercase}
.brand .sub{font-family:'Pinyon Script',cursive;font-size:22px;color:var(--accent);margin-top:-2px}
.nav a.link:hover::after{width:100%}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;counter-reset:s}
.step .ring{width:78px;height:78px;border-radius:50%;border:1px dashed var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto 22px;font-family:var(--serif);font-size:30px;color:var(--accent)}
.step h3{font-size:24px;margin-bottom:10px}
.step p{font-size:14px;max-width:30ch;margin:0 auto}
footer .name{font-family:var(--serif);font-size:24px;letter-spacing:.12em;color:#fff;text-transform:uppercase}
footer .name span{display:block;font-family:'Pinyon Script',cursive;font-size:22px;color:var(--accent);text-transform:none;letter-spacing:0}
.rev-stats{display:flex;justify-content:center;align-items:flex-start;margin:0 auto 62px;max-width:940px}
.rev-stats .rs{flex:1;max-width:280px;padding:0 40px;text-align:center;position:relative}
.rev-stats .rs+.rs::before{content:"";position:absolute;left:0;top:6px;width:1px;height:64px;background:var(--line)}
.rev-stats .n{font-family:var(--serif);font-size:clamp(42px,4.6vw,54px);line-height:1;color:var(--ink);font-weight:500}
.rev-stats .rstars{color:#000000;font-size:13px;letter-spacing:3px;line-height:1;margin-top:11px;height:13px}
.rev-stats .rspacer{height:13px;margin-top:11px}
.rev-stats .l{font-size:10.5px;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-soft);margin-top:13px;line-height:1.65}
.rq{flex:0 0 384px;scroll-snap-align:center;background:var(--white);border:1px solid var(--line);padding:32px 32px 28px;display:flex;flex-direction:column}
.rq .stars{color:#000000;font-size:14px;letter-spacing:3px;line-height:1;margin-bottom:14px}
.rq .rt{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--ink);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;line-height:1.4}
.rq blockquote{font-family:var(--serif);font-size:17.5px;line-height:1.55;color:var(--ink);font-weight:400;margin-bottom:24px}
.rq .by{display:flex;align-items:center;gap:13px;border-top:1px solid var(--line);padding-top:18px;margin-top:auto}
.rq .av{width:40px;height:40px;flex-shrink:0;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:13.5px;letter-spacing:.03em}
.rq .who{display:block;font-size:14px;color:var(--ink);line-height:1.3}
.rq .trip{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft);margin-top:4px;line-height:1.4}
.src{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:16px;border:1px solid var(--line);background:var(--bg);padding:8px 13px;border-radius:999px;font-size:9.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--ink-soft);white-space:nowrap}
.src .mark{width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:500;font-size:10.5px;color:#fff;flex-shrink:0;line-height:1}
.src.google .mark{background:#000000}
.src.facebook .mark{background:#000000}
.src .tick{color:#000000;font-size:11px;line-height:1}
.rev-note{text-align:center;margin-top:30px;font-size:13px;color:var(--ink-soft)}
.rev-note a{border-bottom:1px solid var(--accent);color:var(--ink)}
h1{font-family:var(--serif);font-weight:500;line-height:1.12}
.nav a.link:hover{color:var(--ink)}
.legalhero{text-align:center;padding:80px 0 40px;border-bottom:1px solid var(--line)}
.legalhero h1{font-size:clamp(38px,4.6vw,58px);margin-top:16px}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- responsive ---- */


/* ---------------------------------------------------------------------------
   Moved in from the mockups' per-page <style> blocks.
   These were identical across every country/region page, and main.css had
   neither the .hero rules nor ANY @media queries — without them the theme
   rendered a collapsed hero and had no responsive behaviour at all.
   --------------------------------------------------------------------------- */

.hero{position:relative;color:#fff;padding:110px 0 90px;text-align:center;
    background:linear-gradient(rgba(0,0,0,.52),rgba(0,0,0,.68)),#222222 center/cover no-repeat;
    background-size:cover;background-position:center}
.hero .kicker{color:#DEDEDE}
.hero h1{font-size:clamp(32px,4.2vw,54px);margin:18px auto 22px;max-width:22ch;line-height:1.2}
.hero p{color:#E8E8E8;max-width:62ch;margin:0 auto;font-size:17px}
@media(max-width:900px){.introx .introx-row{grid-template-columns:1fr;gap:32px}.introx .im{aspect-ratio:16/10}.regions{grid-template-columns:1fr;gap:34px;max-width:420px}.nav-left{display:none}.grid{grid-template-columns:1fr}.fcols{grid-template-columns:1fr 1fr}.highlights{grid-template-columns:1fr;gap:24px}.hl{grid-template-columns:1fr}.hl i{aspect-ratio:16/10}.exp-panel.show{grid-template-columns:1fr;gap:28px}.season-tabs{flex-wrap:wrap}.season-tab{flex:1 0 50%;border-bottom:1px solid var(--line)}}
@media(max-width:560px){.wrap{padding:0 20px}.fcols{grid-template-columns:1fr;text-align:center}footer .flogo{margin-inline:auto}.fnews{margin-inline:auto}.fsocial{justify-content:center}.season-tab{flex:1 0 100%;border-right:none}.imgbreak{background-attachment:scroll}.crumb .wrap{font-size:11px;letter-spacing:.1em}}
/* Mobile header: hide the desktop nav, and take the hamburger OUT of grid flow
   (absolute, right) so the logo stays centred in the middle grid column instead
   of being shoved left by the menu-button track. Logo trimmed for breathing room. */
@media(max-width:1100px){.menu-btn{display:block}header.site .nav{position:relative}header.site .nav-left{display:none}header.site .nav-right .link{display:none}header.site .nav-right .btn{display:none}header.site .nav-right{position:absolute;right:0;top:50%;transform:translateY(-50%);gap:0}header.site .brand .logo{height:65px}}
@media(max-width:560px){.utility .u-right{display:none}.utility .wrap{justify-content:center}.utility .u-left{justify-content:center}}

/* ---------------------------------------------------------------------------
   Mobile centering (review 2026-08-26): on phones, section copy reads better
   centered and CTA buttons should span the container. Shared design-system
   wrappers + shared section-CTA buttons are handled here; page-local wrappers
   (homepage hero/advisor, About bio/escorted, Services escorted, itinerary
   hero/overview, charity & giving bands) are centered in their own template
   <style> blocks. Deliberately NOT centered (reported in the ticket hand-back):
   FAQ toggle rows, itinerary day-by-day, tables, region country-link columns,
   feature checklists, card grids/rails, breadcrumb/nav/drawer, filter chrome,
   and the giving/blog heroes (left by design). */
@media(max-width:900px){
	.introx{text-align:center}
	.introx .stats{justify-content:center}
	.cta .btn,.center-cta .btn,.introx .btn,.regions-cta .btn{display:flex;width:100%;justify-content:center}
}

/* ---- Mobile card rails (client feedback 2026-08-17: too much scrolling) ----
   On phones every card grid collapsed to one full-width column, so a 6-card
   section ran ~3.7 phone-screens and /services/ totalled 16.9. These sections
   become horizontally swipeable rails instead, reusing the SAME mechanics as
   .itin-rail on the itinerary detail pages (grid-auto-flow:column + x-mandatory
   scroll snap) so it is an existing, proven pattern rather than a new one.

   Applied to SECONDARY card sets only:
     .wrap .exp        services "Choose the Occasion" / "Choose the Experience" (.xt)
     .wrap .dest-grid  destination region tiles (homepage + services)
     .wrap .jcards     homepage "Travel With Us" service cards
     .wrap .grid       destination-page featured itinerary cards

   🔴 Deliberately NOT applied to page-itineraries.php's .card-row — that is the
   primary browse catalogue, and hiding 12 trips behind a swipe would bury the
   inventory. Scroll there is solved by filtering (sticky filter bar + region
   chips), not by a rail.

   grid-auto-columns is <100% so the next card peeks: that overhang is the
   affordance telling a user the row scrolls. The negative inline margin lets
   the rail bleed to the screen edges while keeping the first card aligned to
   the page gutter. */
@media(max-width:640px){
	.wrap .exp,
	.wrap .dest-grid,
	.wrap .jcards,
	.wrap .grid{
		display:grid;
		grid-auto-flow:column;
		grid-auto-columns:78%;
		grid-template-columns:none;
		gap:14px;
		overflow-x:auto;
		scroll-snap-type:x mandatory;
		-webkit-overflow-scrolling:touch;
		overscroll-behavior-x:contain;
		margin-inline:-20px;
		padding:0 20px 12px;
		scroll-padding-inline:20px;
	}
	.wrap .exp>*,
	.wrap .dest-grid>*,
	.wrap .jcards>*,
	.wrap .grid>*{scroll-snap-align:start}
	/* .wrap .dest-grid is flex at wider widths — neutralise its flex sizing here. */
	.wrap .dest-grid{flex-wrap:nowrap;justify-content:flex-start}
	.wrap .dest-grid .tile{flex:none;max-width:none}
	/* .wrap .jcards draws a table-style outer border; in a rail each card owns its box. */
	.wrap .jcards{border-top:0;border-left:0;margin-top:32px}
	.wrap .jcards .jcard{border:1px solid var(--line);padding:30px 26px}
	.wrap .exp,.wrap .dest-grid,.wrap .jcards,.wrap .grid{scrollbar-width:thin}
	.wrap .exp::-webkit-scrollbar,
	.wrap .dest-grid::-webkit-scrollbar,
	.wrap .jcards::-webkit-scrollbar,
	.wrap .grid::-webkit-scrollbar{height:5px}
	.wrap .exp::-webkit-scrollbar-thumb,
	.wrap .dest-grid::-webkit-scrollbar-thumb,
	.wrap .jcards::-webkit-scrollbar-thumb,
	.wrap .grid::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
}