/* ==========================================================
   TCA Sports Tours Limited — site stylesheet
   Version: v4  |  11 September 2026
   Built on the TCA brand standard: charcoal #414042 + gold #EFCA50, Cormorant
   Garamond display, Work Sans text. See brand-book.html.
   ========================================================== */

:root{
  /* --- core brand, taken from the logo artwork --- */
  --charcoal:#414042;      /* wordmark */
  --gold:#EFCA50;          /* the rule */
  --white:#FFFFFF;

  /* --- supporting neutrals, all tints of charcoal --- */
  --ink:#2A292B;           /* deep ground for dark sections */
  --stone:#F4F3F1;         /* alternating section wash */
  --slate:#6E6D70;         /* secondary text */
  --hairline:#DDDCDC;

  --display:'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --body:'Work Sans', system-ui, -apple-system, sans-serif;

  --gutter:clamp(20px, 5vw, 64px);
  --max:1320px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important; transition:none !important;}
}

body{
  margin:0;
  background:var(--white);
  color:var(--charcoal);
  font-family:var(--body);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--max); margin:0 auto; padding-inline:var(--gutter);}

h1,h2,h3,h4{font-family:var(--display); margin:0; line-height:1.08; letter-spacing:-0.005em; font-weight:600;}
p{margin:0 0 1.15em;}
a{color:inherit;}
.skip{position:absolute; left:-9999px;}
.skip:focus{left:12px; top:12px; z-index:99; background:#fff; padding:10px 16px;}

/* The gold rule from the logo, used as the label device throughout */
.eyebrow{
  font-family:var(--body);
  font-size:12px; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--slate);
  margin:0 0 20px;
  display:flex; align-items:center; gap:14px;
}
.eyebrow::before{content:""; width:3px; height:15px; background:var(--gold); flex:none;}
.section-ink .eyebrow{color:#B6B5B0;}

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible{
  outline:3px solid var(--gold); outline-offset:3px; border-radius:2px;
}

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
}
.bar{display:flex; align-items:center; gap:28px; min-height:82px;}
.logo{display:flex; align-items:center; flex:none; text-decoration:none;}
.logo img{height:34px; width:auto; display:block;}
.logo .fallback{font-family:var(--display); font-weight:600; font-size:26px; letter-spacing:.06em;}
nav.main{margin-left:auto; display:flex; align-items:center; gap:26px;}
nav.main a{
  text-decoration:none; font-size:14px; font-weight:500; color:var(--charcoal);
  letter-spacing:.02em;
  padding-bottom:5px; border-bottom:2px solid transparent; transition:border-color .18s;
}
nav.main a:hover{border-color:var(--gold);}
nav.main a[aria-current="page"]{border-color:var(--charcoal);}
nav.main a.btn[aria-current="page"]{border-color:transparent;}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; border:0; cursor:pointer;
  font-family:var(--body); font-weight:600; font-size:14px;
  letter-spacing:.06em; text-indent:.06em; text-transform:uppercase;
  padding:14px 26px; border-radius:0;
  transition:transform .15s ease, background .18s, color .18s, box-shadow .18s;
}
.btn-primary{background:var(--gold); color:var(--charcoal);}
.btn-primary:hover{background:#E3B93C; transform:translateY(-1px);}
.btn-ghost{background:transparent; color:var(--charcoal); box-shadow:inset 0 0 0 1px var(--charcoal);}
.btn-ghost:hover{background:var(--charcoal); color:#fff;}
.btn-light{background:#fff; color:var(--charcoal);}
.btn-light:hover{background:var(--stone);}
.btn-outline-light{background:transparent; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);}
.btn-outline-light:hover{background:rgba(255,255,255,.1);}
.btn-lg{padding:17px 34px; font-size:14.5px;}

.menu-toggle{display:none; margin-left:auto; background:none; border:0; padding:8px; cursor:pointer;}
.menu-toggle span{display:block; width:24px; height:2px; background:var(--charcoal); margin:5px 0;}

/* ---------- home hero ---------- */
.hero{position:relative; overflow:hidden; padding:clamp(66px,9vw,124px) 0 clamp(56px,7vw,96px);}
.hero .globe{position:absolute; right:-140px; top:-90px; width:620px; height:620px; opacity:.55; pointer-events:none;}
.hero-inner{position:relative; max-width:900px;}
h1{font-weight:500; font-size:clamp(50px,8.6vw,104px); letter-spacing:-0.015em; line-height:1.02;}
h1 .line{display:block;}
h1 em{font-style:normal; font-weight:700;}
h1 .arcword{position:relative; display:inline-block;}
h1 .arcword svg{position:absolute; left:-2%; bottom:-0.16em; width:104%; height:.3em; overflow:visible;}
h1 .arcword path{
  fill:none; stroke:var(--gold); stroke-width:7; stroke-linecap:round;
  stroke-dasharray:420; stroke-dashoffset:420;
  animation:draw 1.5s cubic-bezier(.6,.05,.25,1) .35s forwards;
}
h1 .arcword circle{fill:var(--charcoal); opacity:0; animation:pop .4s ease 1.75s forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes pop{to{opacity:1;}}
@media (prefers-reduced-motion: reduce){
  h1 .arcword path{stroke-dashoffset:0;}
  h1 .arcword circle{opacity:1;}
}
.hero p.lede{font-size:clamp(18px,2.1vw,21px); color:var(--slate); max-width:580px; margin-top:36px; line-height:1.6;}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px;}
.destinations{display:flex; flex-wrap:wrap; gap:0; margin-top:56px; padding-top:26px; border-top:1px solid var(--hairline);}
.destinations span{
  font-family:var(--body); font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--charcoal);
  padding:6px 22px 6px 12px; border-left:2px solid var(--gold);
  margin-bottom:10px;
}

/* ---------- inner page hero ---------- */
.page-hero{background:var(--stone); padding:clamp(50px,7vw,88px) 0 clamp(46px,6vw,76px); border-bottom:1px solid var(--hairline);}
.page-hero h1{font-size:clamp(40px,6.4vw,74px); font-weight:500; max-width:16ch;}
.page-hero .lede{font-size:clamp(17px,2vw,20px); color:var(--slate); max-width:640px; margin-top:26px;}

/* ---------- generic section ---------- */
section{padding:clamp(62px,8vw,108px) 0;}
.section-stone{background:var(--stone);}
.section-ink{background:var(--ink); color:#F0EFEB;}

h2{font-weight:500; font-size:clamp(36px,5vw,58px); letter-spacing:-0.01em;}
h2 em{font-style:normal; font-weight:700;}

.split{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(28px,6vw,80px);}
.split .col-head{position:sticky; top:118px; align-self:start;}
.prose p:last-child{margin-bottom:0;}

/* ---------- difference cards ---------- */
/* Five separate boxes on the page itself — no grey panel behind them.
   Six columns so five items divide evenly: three across the top, two wider
   ones beneath, with no ragged gap at the end of the row. */
.cards{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:clamp(14px, 1.4vw, 22px);
  margin-top:clamp(34px, 4vw, 54px);
}
.card{
  grid-column:span 2;
  background:var(--white);
  border:1px solid var(--hairline);
  padding:clamp(26px, 2.4vw, 36px) clamp(24px, 2.2vw, 32px) clamp(30px, 2.6vw, 38px);
  position:relative;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:nth-child(4), .card:nth-child(5){grid-column:span 3;}
.card::before{
  content:""; position:absolute; left:-1px; top:-1px;
  width:3px; height:54px; background:var(--gold);
}
.card:hover{
  border-color:#CFCEC9;
  box-shadow:0 14px 34px rgba(65, 64, 66, .09);
  transform:translateY(-2px);
}
.card h3{
  font-size:clamp(22px, 1.9vw, 27px); font-weight:600;
  margin-bottom:12px; letter-spacing:-0.005em; line-height:1.16;
}
.card p{font-size:15.5px; color:var(--slate); margin:0;}

@media (max-width:1000px){
  .card, .card:nth-child(4), .card:nth-child(5){grid-column:span 3;}
}
@media (max-width:640px){
  .card, .card:nth-child(4), .card:nth-child(5){grid-column:span 6;}
}

/* ---------- statement band ---------- */
.why{max-width:920px;}
.why .statement{
  font-family:var(--display); font-weight:500; font-style:italic;
  font-size:clamp(30px,4.2vw,48px); line-height:1.18; letter-spacing:-0.01em; margin:0 0 30px;
  color:#fff;
}
.why p{color:#A9A8A3; max-width:640px;}

/* ---------- steps ---------- */
.steps{list-style:none; margin:0; padding:0; position:relative; max-width:830px;}
.steps::before{content:""; position:absolute; left:23px; top:16px; bottom:16px; width:2px; background:var(--hairline);}
.step{position:relative; padding:0 0 46px 78px;}
.step:last-child{padding-bottom:0;}
.step .num{
  position:absolute; left:0; top:-6px;
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--white); box-shadow:inset 0 0 0 1px var(--charcoal);
  font-family:var(--display); font-weight:600; font-size:22px; color:var(--charcoal);
}
.step:first-child .num{background:var(--gold); box-shadow:none;}
.section-stone .step .num{background:var(--stone);}
.section-stone .step:first-child .num{background:var(--gold);}
.step h3{font-size:clamp(25px,3vw,33px); font-weight:600; margin-bottom:10px;}
.step p{color:var(--slate); margin:0; font-size:16.5px;}

.closer{
  margin-top:50px; padding:30px 34px; background:var(--stone);
  border-left:3px solid var(--gold); max-width:830px;
  font-family:var(--display); font-weight:600; font-style:normal;
  font-size:clamp(22px,2.7vw,30px); line-height:1.28;
}
.section-stone .closer{background:#fff;}

/* ---------- itineraries ---------- */
.itins{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:28px; margin-top:54px;}
.itin{
  display:flex; flex-direction:column;
  border:1px solid var(--hairline); background:#fff; padding:34px 32px 32px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.itin:hover{transform:translateY(-3px); box-shadow:0 16px 36px rgba(65,64,66,.10);}
.itin .tag{
  align-self:flex-start; font-family:var(--body); font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--slate);
  border-left:3px solid var(--gold); padding:2px 0 2px 12px; margin-bottom:22px;
}
.itin h3{font-size:31px; font-weight:600; margin-bottom:14px; letter-spacing:-0.005em;}
.itin p{color:var(--slate); font-size:15.5px; flex:1;}
.itin .go{
  margin-top:20px; text-decoration:none; font-family:var(--body); font-weight:600;
  font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:9px; color:var(--charcoal);
  border-bottom:2px solid var(--gold); align-self:flex-start; padding-bottom:4px;
}
.itin .go span{transition:transform .18s ease;}
.itin:hover .go span{transform:translateX(4px);}

/* ---------- a country holding more than one tour ----------
   Same card face as the rest of the grid, but it opens in place to list the
   tours underneath rather than going anywhere. <details> so it needs no
   script: the standalone and preview copies get the same behaviour. */
.itin-group{padding:0;}
.itin-group > summary{
  display:flex; flex-direction:column; cursor:pointer; list-style:none;
}
.itin-group > summary::-webkit-details-marker{display:none;}
.itin-group > summary::marker{content:"";}
.itin-group > summary:focus-visible{outline:3px solid var(--gold); outline-offset:3px;}
.itin-group .itin-body{display:flex; flex-direction:column; flex:1;}
.itin-group .go .chev{
  width:9px; height:9px; border-right:2px solid var(--charcoal);
  border-bottom:2px solid var(--charcoal); transform:rotate(45deg) translateY(-2px);
  transition:transform .18s ease;
}
.itin-group:hover .go .chev{transform:rotate(45deg) translate(1px, 1px);}
.itin-group[open] .go .chev{transform:rotate(-135deg) translateY(-2px);}
.itin-group[open]{box-shadow:0 16px 36px rgba(65,64,66,.10);}
.itin-group[open] .ph{--ratio:16/7;}

.itin-sub{border-top:1px solid var(--hairline);}
.itin-sub a{
  display:block; padding:20px 32px; text-decoration:none; color:var(--charcoal);
  border-bottom:1px solid var(--hairline); transition:background .16s ease;
}
.itin-sub a:last-child{border-bottom:0;}
.itin-sub a:hover, .itin-sub a:focus-visible{background:var(--stone);}
.itin-sub b{
  display:block; font-family:var(--display); font-size:21px; font-weight:600;
  letter-spacing:-0.005em; line-height:1.2; margin-bottom:5px;
}
.itin-sub span{display:block; font-size:14px; color:var(--slate); line-height:1.45;}
.itin-sub a::after{
  content:"View itinerary \2192"; display:inline-block; margin-top:10px;
  font-family:var(--body); font-size:11.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  border-bottom:2px solid var(--gold); padding-bottom:3px;
}

/* ---------- testimonials ---------- */
.quotes{columns:3; column-gap:26px; margin-top:50px;}
.quote{break-inside:avoid; margin:0 0 26px; padding:30px 28px; background:#fff; border:1px solid var(--hairline);}
.quote.feature{background:var(--ink); border-color:var(--ink);}
.quote p{
  font-family:var(--display); font-weight:500; font-size:23px; line-height:1.3;
  letter-spacing:-0.005em; margin:0 0 16px; color:var(--charcoal);
}
.quote.feature p{font-style:italic; font-size:28px; color:#fff;}
.quote cite{
  font-family:var(--body); font-style:normal; font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  border-left:3px solid var(--gold); padding-left:11px;
}
.quote.feature cite{color:#A9A8A3;}
@media (max-width:1000px){.quotes{columns:2;}}
@media (max-width:640px){.quotes{columns:1;}}

/* ---------- FAQ accordion ---------- */
.faq{max-width:850px; margin-top:46px; border-top:1px solid var(--hairline);}
.faq details{border-bottom:1px solid var(--hairline);}
.faq summary{
  list-style:none; cursor:pointer; padding:28px 48px 28px 0; position:relative;
  font-family:var(--display); font-weight:600; font-size:clamp(23px,2.7vw,29px);
  line-height:1.25;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%; width:13px; height:13px;
  border-right:2px solid var(--charcoal); border-bottom:2px solid var(--charcoal);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.faq .answer{padding:0 40px 0 20px; margin-bottom:30px; color:var(--slate); border-left:3px solid var(--gold);}
.faq .answer p:last-child{margin-bottom:0;}
.faq .answer strong{color:var(--charcoal); font-weight:600;}

/* ---------- legal ---------- */
.legal-layout{display:grid; grid-template-columns:240px minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:start;}
.legal-toc{position:sticky; top:112px;}
.legal-toc p{font-family:var(--body); font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); margin-bottom:16px;}
.legal-toc ol{list-style:none; margin:0; padding:0; font-size:14px;}
.legal-toc li{margin-bottom:9px;}
.legal-toc a{text-decoration:none; color:var(--slate); border-left:2px solid var(--hairline); padding-left:12px; display:block;}
.legal-toc a:hover{color:var(--charcoal); border-color:var(--gold);}
.legal{font-size:16px;}
.legal h2{font-size:clamp(27px,3vw,36px); font-weight:600; margin:56px 0 16px; scroll-margin-top:120px;}
.legal h2:first-of-type{margin-top:0;}
.legal h3{font-size:23px; font-weight:600; margin:32px 0 10px;}
.legal p, .legal ul{color:#4C4C4A;}
.legal ul{padding-left:20px;}
.legal li{margin-bottom:8px;}
.legal a{color:var(--charcoal); text-decoration-color:var(--gold); text-underline-offset:3px;}
.legal .callout{background:var(--stone); border-left:3px solid var(--gold); padding:26px 28px; margin:0 0 38px;}
.legal .callout p:last-child{margin-bottom:0;}
.legal .atol{font-family:var(--display); font-weight:600; font-size:30px; letter-spacing:.06em; color:var(--charcoal); display:inline-block; margin-top:4px;}
/* A three-column charges table cannot shrink below about 330px, so on a narrow
   phone it used to widen the whole page and scroll the terms sideways. It now
   scrolls inside its own box and the page stays put. */
.legal{min-width:0;}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:20px 0 28px;}
.table-scroll table{margin:0;}
.table-scroll table{min-width:330px;}
.legal table{width:100%; border-collapse:collapse; margin:20px 0 28px; font-size:15px;}
.legal th,.legal td{text-align:left; padding:13px 14px; border-bottom:1px solid var(--hairline); vertical-align:top;}
.legal th{font-family:var(--body); font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--slate);}

/* ---------- team ---------- */
.team{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:40px; margin-top:54px;}
.member{border-top:2px solid var(--charcoal); padding-top:26px;}
.member .initials{
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center; margin-bottom:22px;
  font-family:var(--display); font-weight:600; font-size:22px; letter-spacing:.06em;
  background:var(--stone); color:var(--charcoal); box-shadow:inset 0 0 0 1px var(--hairline);
}
.member:nth-child(2) .initials{background:var(--gold); box-shadow:none;}
.member h3{font-size:31px; font-weight:600; margin-bottom:6px;}
.member .role{
  font-family:var(--body); font-size:11.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--slate); margin-bottom:16px;
}
.member p{font-size:15.5px; color:var(--slate); margin:0;}

/* ---------- CTA band ---------- */
.cta{background:var(--ink); color:#F0EFEB; padding:clamp(54px,6.5vw,84px) 0;}
.cta h2{max-width:16ch; color:#fff;}
.cta p{color:#A9A8A3; max-width:520px; margin-top:20px;}
.cta .cta-inner{display:flex; flex-wrap:wrap; gap:32px; align-items:end; justify-content:space-between;}
.cta .cta-actions{display:flex; flex-wrap:wrap; gap:14px;}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(32px,6vw,72px); align-items:start;}
.details dl{margin:30px 0 0;}
.details dt{
  font-family:var(--body); font-size:11.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--slate); margin-top:24px;
}
.details dd{margin:6px 0 0; font-size:17px;}
.details dd a{text-decoration:none; border-bottom:2px solid var(--gold);}
.details .addr{line-height:1.5;}

form{background:var(--white); padding:clamp(26px,4vw,42px); border:1px solid var(--hairline);}
.field{margin-bottom:20px;}
label{
  display:block; font-family:var(--body); font-size:12.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--slate); margin-bottom:8px;
}
input,textarea,select{
  width:100%; font-family:var(--body); font-size:16px; color:var(--charcoal);
  padding:13px 14px; border:1px solid var(--hairline); border-radius:0; background:#fff;
}
input:focus,textarea:focus,select:focus{border-color:var(--charcoal);}
textarea{min-height:130px; resize:vertical;}
.form-note{font-size:13.5px; color:var(--slate); margin:18px 0 0;}

/* ---------- footer ---------- */
footer.site{background:var(--ink); color:#94938E; padding:58px 0 42px; font-size:14px;}
.foot-top{display:flex; flex-wrap:wrap; gap:26px 40px; align-items:center; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.13);}
.foot-logo img{height:30px; width:auto; display:block;}
.foot-links{display:flex; flex-wrap:wrap; gap:20px; margin-left:auto;}
.foot-links a{color:#D6D5D0; text-decoration:none; border-bottom:1px solid transparent;}
.foot-links a:hover{border-color:var(--gold); color:#fff;}
.foot-bottom{padding-top:26px; display:flex; flex-wrap:wrap; gap:10px 28px; font-size:13px; align-items:center;}
/* The ATOL line is just another item in the footer row — same size, weight,
   colour and case as the address and phone number beside it. */
.foot-bottom .atol-badge{
  font-family:inherit; font-weight:inherit; font-size:inherit;
  letter-spacing:inherit; text-transform:none; color:inherit;
  border:0; padding:0;
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .split, .contact-grid, .legal-layout{grid-template-columns:1fr;}
  .split .col-head{position:static;}
  .legal-toc{position:static; display:none;}
  nav.main{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:#fff; border-bottom:1px solid var(--hairline);
    flex-direction:column; align-items:stretch; gap:0; padding:8px var(--gutter) 22px;
  }
  nav.main.open{display:flex;}
  nav.main a{padding:14px 0; border-bottom:1px solid var(--hairline);}
  nav.main .btn{margin-top:14px; text-align:center;}
  .menu-toggle{display:block;}
  .hero .globe{opacity:.3; right:-220px;}
  .step{padding-left:64px;}
  .step .num{width:42px; height:42px; font-size:19px;}
  .steps::before{left:20px;}
  .logo img{height:32px;}
}

/* ==========================================================
   PHOTOGRAPHY
   Drop files into assets/images/ using the exact filenames in
   assets/images/README.txt. Until a file exists, the frame shows
   a branded placeholder with the filename and required crop.
   ========================================================== */
.ph{
  position:relative; margin:0; overflow:hidden;
  aspect-ratio:var(--ratio, 16/9);
  background:linear-gradient(135deg, rgba(65,64,66,.05) 0%, rgba(65,64,66,.15) 100%);
}
.ph::before{content:""; position:absolute; left:0; top:0; width:3px; height:48px; background:var(--gold); z-index:3;}
.ph::after{
  content:attr(data-label);
  position:absolute; inset:0; display:grid; place-items:center; padding:24px;
  font-family:var(--display); font-size:13.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--slate);
  text-align:center; line-height:2; z-index:2;
}
.ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; display:block;}
.ph.loaded::after{display:none;}
.ph.loaded{background:var(--stone);}
.ph.round{border-radius:50%;}

/* full-bleed image band */
.band{width:100%;}
.band .ph{--ratio:3/1;}
@media (max-width:700px){.band .ph{--ratio:16/9;}}

/* inner page hero with a supporting image */
.page-hero-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,5vw,64px); align-items:center;}
.page-hero-grid .ph{--ratio:3/2;}
@media (max-width:860px){
  .page-hero-grid{grid-template-columns:1fr;}
  .page-hero-grid .ph{--ratio:16/9;}
}

/* itinerary card image */
.itin{padding:0;}
.itin .ph{--ratio:4/3;}
.itin .itin-body{padding:30px 32px 32px; display:flex; flex-direction:column; flex:1;}

/* team portrait */
.member .portrait{--ratio:1/1; margin-bottom:24px;}

/* ==========================================================
   ITINERARY PAGES
   Structure follows the WeTravel layout: sticky day rail, day
   sections, typed activity rows, hotel cards, inclusions, map list.
   ========================================================== */

.itin-hero{position:relative; background:var(--ink); color:#fff; overflow:hidden;}
.itin-hero .ph{--ratio:21/9; opacity:.45;}
@media (max-width:760px){.itin-hero .ph{--ratio:4/3;}}
.itin-hero .overlay{
  position:absolute; inset:0; display:flex; align-items:flex-end;
  background:linear-gradient(180deg, rgba(38,38,37,.2) 0%, rgba(38,38,37,.88) 100%);
}
.itin-hero .overlay .wrap{width:100%; padding-bottom:clamp(30px,5vw,62px);}
.itin-hero .eyebrow{color:#C9C8C4;}
.itin-hero h1{font-size:clamp(36px,6.2vw,76px); font-weight:500; color:#fff; max-width:18ch;}

.glance{background:var(--stone); border-bottom:1px solid var(--hairline);}
.glance dl{display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:24px 40px; margin:0; padding:30px 0;}
.glance dt{
  font-family:var(--body); font-size:13px; font-weight:700; letter-spacing:.02em;
  color:var(--charcoal); margin-bottom:3px;
}
.glance dd{margin:0; font-family:var(--body); font-size:15px; font-weight:400; color:var(--slate);}

.itin-layout{display:grid; grid-template-columns:225px minmax(0,1fr); gap:clamp(30px,5vw,70px); align-items:start;}
.day-rail{position:sticky; top:104px;}
.day-rail p.rail-title{font-family:var(--body); font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); margin-bottom:14px;}
.day-rail ol{list-style:none; margin:0; padding:0; font-size:13.5px;}
.day-rail a{display:block; text-decoration:none; color:var(--slate); border-left:2px solid var(--hairline); padding:7px 0 7px 14px; transition:border-color .18s, color .18s;}
.day-rail a:hover{color:var(--charcoal); border-color:var(--gold);}
.day-rail a strong{font-family:var(--display); font-weight:600; color:var(--charcoal); display:block; font-size:15px;}

.intro-block{max-width:70ch; margin-bottom:clamp(38px,5vw,60px);}
.intro-block p{color:#4C4C4A;}
.intro-block p:first-of-type{font-family:var(--display); font-size:clamp(21px,2.5vw,27px); line-height:1.4; color:var(--charcoal);}

.day{padding-top:clamp(34px,4vw,54px); margin-bottom:clamp(38px,5vw,60px); scroll-margin-top:100px; border-top:1px solid var(--hairline);}
.day:first-of-type{border-top:0; padding-top:0;}
.day-num{font-family:var(--body); font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); border-left:3px solid var(--gold); padding-left:12px; display:inline-block; margin-bottom:12px;}
.day h2{font-size:clamp(28px,3.6vw,42px); font-weight:500; max-width:24ch;}
.day .day-sub{font-family:var(--body); font-size:15px; font-style:normal; color:var(--slate); margin:8px 0 0;}
.day > .ph{--ratio:16/9; margin:24px 0 4px;}

.items{list-style:none; margin:26px 0 0; padding:0; position:relative;}
.items::before{content:""; position:absolute; left:21px; top:14px; bottom:14px; width:1px; background:var(--hairline);}
.item{position:relative; padding:0 0 30px 66px;}
.item:last-child{padding-bottom:0;}
.item .ico{position:absolute; left:0; top:-2px; width:44px; height:44px; border-radius:50%; background:var(--white); box-shadow:inset 0 0 0 1px var(--hairline); display:grid; place-items:center; color:var(--slate);}
.item .ico svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.item.t-accommodation .ico{background:var(--gold); box-shadow:none; color:var(--charcoal);}
.item.t-note .ico{background:var(--charcoal); box-shadow:none; color:#fff;}
.item h3{font-size:22px; font-weight:600; margin-bottom:7px;}
.item p{font-size:16px; color:#4C4C4A; margin-bottom:.9em;}
.item p:last-child{margin-bottom:0;}
.item .ext{display:inline-block; font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; color:var(--charcoal); border-bottom:2px solid var(--gold); padding-bottom:3px; margin-top:6px;}
.item.t-note{background:var(--stone); padding:22px 26px 22px 66px; margin-bottom:30px;}
.item.t-note .ico{left:14px; top:18px;}
.item.t-note p{font-size:15px;}

.stay{border:1px solid var(--hairline); padding:24px 26px; margin-top:14px; background:#fff;}
.stay h4{font-size:21px; font-weight:600; margin-bottom:5px;}
.stay .addr{font-size:14.5px; color:var(--slate); margin-bottom:12px;}
.stay .addr a{color:var(--slate); text-decoration-color:var(--gold); text-underline-offset:3px;}
.stay p{font-size:15px; margin-bottom:0;}
.stay .contact{margin-top:14px; display:flex; flex-wrap:wrap; gap:10px 22px; font-size:12.5px;}
.stay .contact a{text-decoration:none; border-bottom:2px solid var(--gold); padding-bottom:2px; text-transform:uppercase; letter-spacing:.06em; font-weight:600;}

.inex{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:0 48px; margin-top:32px;}
.inex h3{font-size:25px; font-weight:600; margin-bottom:14px;}
.inex ul{list-style:none; margin:0; padding:0;}
.inex li{padding:11px 0 11px 28px; position:relative; border-bottom:1px solid var(--hairline); font-size:15.5px; color:#4C4C4A;}
.inex li::before{position:absolute; left:0; top:10px; font-family:var(--display); font-size:18px; font-weight:600;}
.inex .inc li::before{content:"+"; color:#4A7A46;}
.inex .exc li::before{content:"\2013"; color:var(--slate);}

.gazetteer{columns:2; column-gap:44px; margin-top:28px;}
@media (max-width:700px){.gazetteer{columns:1;}}
.gaz{break-inside:avoid; display:flex; gap:14px; padding:11px 0; border-bottom:1px solid var(--hairline);}
.gaz .n{font-family:var(--body); font-weight:600; font-size:14px; color:var(--slate); flex:none; width:26px; padding-top:3px;}
.gaz b{display:block; font-family:var(--display); font-size:18px; font-weight:600;}
.gaz span{font-size:13.5px; color:var(--slate);}

.itin-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px;}

@media (max-width:900px){
  .itin-layout{grid-template-columns:1fr;}
  .day-rail{position:static; margin-bottom:34px; border-bottom:1px solid var(--hairline); padding-bottom:18px;}
  .day-rail ol{display:flex; gap:8px; overflow-x:auto; padding-bottom:6px;}
  .day-rail li{flex:none;}
  .day-rail a{border-left:0; border-top:2px solid var(--hairline); padding:10px 18px 6px 0;}
  .item{padding-left:56px;}
  .item .ico{width:38px; height:38px;}
  .items::before{left:18px;}
}

@media print{
  header.site, footer.site, .day-rail, .itin-actions, .cta, .menu-toggle{display:none !important;}
  .itin-layout{grid-template-columns:1fr;}
  body{font-size:11pt;}
  .day{break-inside:avoid-page;}
  .item{break-inside:avoid;}
  .itin-hero{background:none;}
  .itin-hero h1, .itin-hero .eyebrow{color:var(--charcoal);}
  .itin-hero .overlay{position:static; background:none;}
  .itin-hero .ph{display:none;}
}

/* ---------- itinerary: day header, galleries, map (WeTravel parity) ---------- */
.day-date{
  font-family:var(--body); font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--slate); margin:10px 0 0;
}
.day-summary{
  font-family:var(--display); font-size:clamp(22px,2.8vw,30px); font-weight:600;
  line-height:1.24; margin:26px 0 0; padding-left:14px; border-left:3px solid var(--gold);
}

.gallery{display:grid; grid-template-columns:2fr 1fr; gap:8px; margin-top:16px;}
.gallery .ph{--ratio:4/3;}
.gallery .ph:first-child{grid-row:span 2; --ratio:1/1;}
.gallery .ph::before{height:30px; width:2px;}
.gallery .ph::after{font-size:11px; letter-spacing:.14em; line-height:1.8;}
@media (max-width:560px){
  .gallery{grid-template-columns:1fr 1fr;}
  .gallery .ph:first-child{grid-column:span 2; grid-row:auto; --ratio:16/9;}
}

.map-block{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(24px,4vw,48px); align-items:start; margin-top:28px;}
.map-block .ph{--ratio:1/1;}
@media (max-width:800px){.map-block{grid-template-columns:1fr;} .map-block .ph{--ratio:4/3;}}
.gaz-list{columns:1;}
.gaz .n{width:22px; text-transform:uppercase;}

/* Where you will stay. Same row as the gazetteer, but the marker holds a
   phrase ("Nights 1-2 & 12") rather than a single letter, so it needs room
   and drops above the name on a narrow screen rather than squeezing it. */
.stay-list{columns:1; margin-top:28px;}
.stay-list .gaz{align-items:baseline;}
.stay-list .gaz .n{
  width:clamp(104px, 11vw, 150px); text-transform:none; letter-spacing:.01em;
  font-size:13px; line-height:1.35; color:var(--charcoal);
}
@media (max-width:620px){
  .stay-list .gaz{display:block;}
  .stay-list .gaz .n{width:auto; display:block; margin-bottom:3px; color:var(--slate);}
}

/* ---------- itinerary rows: tinted icon tiles, not grey rings ---------- */
.item .ico{
  border-radius:12px;
  background:var(--stone);
  box-shadow:none;
  color:var(--charcoal);
}
.item.t-activity .ico{ background:#FBF1D2; }
.item.t-meal .ico{ background:#F1EFE9; }
.item.t-transport .ico,
.item.t-flight .ico{ background:#ECEDEE; }
.item.t-info .ico,
.item.t-free .ico{ background:#F1EFE9; }
.item.t-accommodation .ico{ background:var(--gold); color:var(--charcoal); }
.item.t-note .ico{ background:var(--charcoal); color:#fff; }

/* a touch more air between rows now the galleries are gone */
.item{padding-bottom:34px;}
.item h3{margin-bottom:9px;}
.items::before{background:var(--hairline); left:22px;}

/* placeholder frames: warm, not battleship grey */
.ph{
  background:linear-gradient(135deg, #F7F6F3 0%, #EFEDE8 100%);
}
.ph::after{color:#8C8B87;}

/* day hero gets more presence now it is the only image on the day */
.day > .ph{--ratio:16/9; margin:22px 0 6px;}
.day-summary{margin-top:30px;}

/* ==========================================================
   REVIEW CHANGES — v14
   ========================================================== */

/* 4. a plane flies the arc instead of a line drawing itself */
h1 .arcword svg{overflow:visible;}
h1 .arcword .track{
  fill:none; stroke:var(--gold); stroke-width:6; stroke-linecap:round;
  stroke-dasharray:420; stroke-dashoffset:420;
  animation:draw 1.9s cubic-bezier(.45,.05,.3,1) .3s forwards;
}

@media (prefers-reduced-motion: reduce){
  h1 .arcword .track{stroke-dashoffset:0;}
  h1 .arcword .plane{opacity:1;}
}

/* 6. destinations are buttons that open an overview */
.destinations button{
  font:inherit; cursor:pointer; background:none; border:0;
  font-family:var(--body); font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--charcoal);
  padding:6px 20px 6px 12px; border-left:2px solid var(--gold);
  margin-bottom:10px; transition:color .15s, border-color .15s;
}
.destinations button:hover{color:var(--slate); border-left-color:var(--charcoal);}
.destinations button::after{content:" +"; color:var(--slate); font-weight:400;}

dialog.sheet{
  border:0; padding:0; max-width:620px; width:calc(100% - 40px);
  background:var(--white); box-shadow:0 30px 80px rgba(65,64,66,.28);
}
dialog.sheet::backdrop{background:rgba(38,38,37,.55);}
dialog.sheet .inner{padding:clamp(28px,4vw,44px);}
dialog.sheet h3{font-size:clamp(28px,4vw,40px); font-weight:500; margin-bottom:6px;}
dialog.sheet .why{
  font-family:var(--body); font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--slate);
  border-left:3px solid var(--gold); padding-left:11px; margin:0 0 20px;
}
dialog.sheet p.body{font-size:16.5px; color:#4C4C4A;}
dialog.sheet .close{
  position:absolute; top:14px; right:16px; background:none; border:0; cursor:pointer;
  font-size:26px; line-height:1; color:var(--slate); padding:6px 10px;
}
dialog.sheet .close:hover{color:var(--charcoal);}

/* 7 & 9. a cue that the page keeps going */
.scroll-cue{
  display:flex; align-items:center; gap:12px; justify-content:center;
  padding:22px 0 0; font-family:var(--body); font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--slate);
}
.scroll-cue::after{
  content:""; width:9px; height:9px; border-right:2px solid var(--gold);
  border-bottom:2px solid var(--gold); transform:rotate(45deg);
  animation:nudge 1.8s ease-in-out infinite;
}
@keyframes nudge{0%,100%{transform:rotate(45deg) translate(0,0);} 50%{transform:rotate(45deg) translate(3px,3px);}}
.band{position:relative;}
.band .after-cue{padding-bottom:6px;}

/* 12. steps highlight as you move down them */
.step .num{transition:background .25s, color .25s, box-shadow .25s;}
.step:first-child .num{background:var(--white); box-shadow:inset 0 0 0 1px var(--charcoal); color:var(--charcoal);}
.section-stone .step:first-child .num{background:var(--stone);}
.step.active .num{background:var(--gold); box-shadow:none; color:var(--charcoal);}
.step h3{transition:color .25s;}
.step:not(.active) h3{color:var(--slate);}
.step.active h3{color:var(--charcoal);}
.steps::before{background:var(--hairline);}
.steps .progress{
  position:absolute; left:23px; top:16px; width:2px; background:var(--gold);
  height:0; transition:height .3s ease;
}

/* 13. the whole itinerary card is the link */
a.itin{text-decoration:none; color:inherit;}
a.itin:hover{transform:translateY(-3px); box-shadow:0 16px 36px rgba(65,64,66,.12);}
a.itin:focus-visible{outline:3px solid var(--gold); outline-offset:3px;}

/* 16. the day rail scrolls on its own and shows where you are */
.day-rail{max-height:calc(100vh - 140px); overflow-y:auto; overscroll-behavior:contain;}
.day-rail::-webkit-scrollbar{width:4px;}
.day-rail::-webkit-scrollbar-thumb{background:var(--hairline);}
.day-rail a.active{border-left-color:var(--gold); color:var(--charcoal); background:var(--stone);}
.day-rail a.active strong{color:var(--charcoal);}

/* ---------- testimonials ---------- */

/* The jump links land on these, so clear the sticky header. */
#leaders, #notebooks{scroll-margin-top:100px;}

/* Jump strip under the hero. */
.jump{background:var(--white); border-bottom:1px solid var(--hairline);}
.jump .wrap{display:flex; flex-wrap:wrap; gap:10px; padding-block:18px;}
.jump a{
  font-family:var(--body); font-size:12.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none; color:var(--charcoal);
  border:1px solid var(--hairline); padding:11px 18px; position:relative;
}
.jump a::after{
  content:""; position:absolute; left:-1px; right:-1px; bottom:-1px; height:3px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.jump a:hover::after, .jump a:focus-visible::after{transform:scaleX(1);}
@media (prefers-reduced-motion:reduce){.jump a::after{transition:none;}}

/* The scores, read as a row of figures with the question under each. */
.scores{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  margin:clamp(30px,4vw,44px) 0 0;
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
}
.scores > div{
  display:flex; flex-direction:column-reverse; justify-content:flex-end;
  padding:22px 18px; border-left:1px solid var(--hairline);
}
.scores > div:first-child{border-left:3px solid var(--gold);}
.scores dt{
  font-family:var(--body); font-size:11.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--slate); line-height:1.4;
}
.scores dd{
  margin:0 0 7px; font-family:var(--display); font-size:clamp(30px,3.2vw,40px);
  font-weight:600; color:var(--charcoal); line-height:1; font-variant-numeric:lining-nums;
}
.scores-note{font-size:14px; color:var(--slate); margin-top:16px; max-width:88ch;}

/* One group leader's feedback: the line they led with, then the questions. */
.review{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
  gap:clamp(24px,4vw,56px);
  padding-block:clamp(30px,5vw,48px); border-top:1px solid var(--hairline);
}
.review:first-of-type{margin-top:clamp(34px,5vw,50px);}
.review blockquote{margin:0; border-left:3px solid var(--gold); padding-left:18px;}
.review blockquote p{
  font-family:var(--display); font-size:clamp(25px,2.6vw,33px); font-weight:500;
  line-height:1.2; color:var(--charcoal);
}
.review .who{margin-top:18px; padding-left:21px;}
.review .who b{
  display:block; font-family:var(--display); font-size:23px; font-weight:600;
  color:var(--charcoal); line-height:1.2;
}
.review .who span{color:var(--slate); font-size:14.5px;}
.review dl{margin:0;}
.review dl > div{padding-block:18px; border-top:1px solid var(--hairline);}
.review dl > div:first-child{border-top:0; padding-top:0;}
.review dt{
  font-family:var(--body); font-size:11.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--slate);
}
.review dd{margin:8px 0 0; max-width:64ch;}
.review dd p + p{margin-top:14px;}

/* Tony's note on where the notebook quotes came from. */
.notebooks-head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
  gap:clamp(24px,4vw,56px); align-items:start;
}
.notebooks-head .story{border-left:3px solid var(--gold); padding-left:18px; max-width:64ch;}
.notebooks-head .story p + p{margin-top:15px;}
.notebooks-head .story .sig{
  margin-top:22px; font-family:var(--display); font-size:21px; font-weight:600;
  color:var(--charcoal); line-height:1.3;
}
.notebooks-head .story .sig span{
  display:block; font-family:var(--body); font-size:14px; font-weight:400; color:var(--slate);
}

.feature{
  margin:clamp(40px,6vw,64px) 0 0; padding:clamp(34px,5vw,56px) clamp(20px,4vw,48px);
  background:var(--charcoal); color:#fff; text-align:center;
}
.feature blockquote{margin:0 auto;}
.feature p{
  max-width:24ch; margin-inline:auto; font-family:var(--display);
  font-size:clamp(30px,4.4vw,52px); font-weight:500; line-height:1.14; color:#fff;
}
.feature .rule{width:72px; height:3px; background:var(--gold); margin:24px auto 16px;}
.feature cite{font-style:normal; font-size:14.5px; color:var(--hairline);}

/* The notebook quotes themselves. */
.quote{
  break-inside:avoid; margin:0 0 clamp(18px,2vw,26px); background:#fff;
  border:1px solid var(--hairline); border-top:3px solid var(--gold);
  padding:26px 26px 22px;
}
.quote blockquote{margin:0;}
.quote p{
  font-family:var(--display); font-size:23px; font-weight:500; line-height:1.26;
  color:var(--charcoal);
}
.quote.big p{font-size:29px;}
.quote cite{
  display:block; margin-top:14px; font-style:normal; font-family:var(--body);
  font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--slate);
}
.quote cite small{
  display:block; margin-top:6px; text-transform:none; letter-spacing:0;
  font-weight:400; font-style:italic; font-size:14px;
}
.quote.dark{background:var(--charcoal); border-color:var(--charcoal); border-top-color:var(--gold);}
.quote.dark p{color:#fff;}
.quote.dark cite{color:var(--hairline);}

@media (max-width:820px){
  .review, .notebooks-head{grid-template-columns:minmax(0,1fr);}
}

/* 19. a single testimonial band for the other pages */
.pullquote{background:var(--ink); color:#fff; padding:clamp(46px,6vw,74px) 0;}
.pullquote blockquote{margin:0; max-width:900px;}
.pullquote p{
  font-family:var(--display); font-weight:500; font-size:clamp(26px,3.6vw,42px);
  line-height:1.25; color:#fff; margin:0 0 20px;
}
.pullquote cite{
  font-family:var(--body); font-style:normal; font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:#A9A8A3;
  border-left:3px solid var(--gold); padding-left:11px;
}

/* ==========================================================
   17. DAY LAYOUT — image left, timeline right, as on the
   South Korea page. Gives each day room to breathe instead
   of stacking blocks of text.
   ========================================================== */
.day{border-top:0; padding-top:0; margin-bottom:clamp(54px,7vw,96px);}
.day-split{display:grid; grid-template-columns:minmax(0,0.86fr) minmax(0,1.14fr); gap:clamp(26px,3.4vw,52px); align-items:start;}
.day-media{position:sticky; top:104px;}
.day-media .ph{--ratio:4/5; margin:0;}
.day-media .cap{
  margin-top:14px; font-family:var(--body); font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--slate);
  border-left:3px solid var(--gold); padding-left:11px;
}
.day-body{min-width:0;}
.day-body .day-num{margin-bottom:10px;}
.day-body h2{font-size:clamp(27px,3.2vw,40px);}
.day-body .day-summary{
  border-left:0; padding-left:0; margin:14px 0 0;
  font-size:clamp(19px,2.1vw,24px); font-weight:500; color:var(--slate);
}
.day-body .items{margin-top:30px;}

@media (max-width:900px){
  .day-split{grid-template-columns:1fr; gap:22px;}
  .day-media{position:static;}
  .day-media .ph{--ratio:16/9;}
}

/* ==========================================================
   v15 — hero photography sits behind the headline
   ========================================================== */
.hero.hero-photo{
  min-height:clamp(560px, 82vh, 860px);
  display:flex; align-items:center;
  padding:clamp(80px,10vw,140px) 0 clamp(52px,6vw,84px);
  color:#fff;
}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-bg .ph{
  --ratio:auto; width:100%; height:100%; margin:0; background:var(--ink);
  aspect-ratio:auto;
}
.hero-bg .ph::before, .hero-bg .ph::after{display:none;}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:center 42%;}
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(105deg, rgba(38,38,37,.86) 0%, rgba(38,38,37,.66) 46%, rgba(38,38,37,.30) 100%),
    linear-gradient(to top, rgba(38,38,37,.55) 0%, rgba(38,38,37,0) 42%);
}
.hero.hero-photo .hero-inner{position:relative; z-index:2; max-width:min(940px, 78%);}
.hero.hero-photo .globe{z-index:1; opacity:.16;}
.hero.hero-photo .globe g{stroke:#fff !important;}

.hero.hero-photo h1{color:#fff;}
.hero.hero-photo .eyebrow{color:#EDECE8;}
.hero.hero-photo .eyebrow::before{background:var(--gold);}
.hero.hero-photo p.lede{color:#E4E3DE; max-width:620px;}
.hero.hero-photo .btn-ghost{color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.65);}
.hero.hero-photo .btn-ghost:hover{background:#fff; color:var(--charcoal); box-shadow:none;}
.hero.hero-photo .destinations{border-top-color:rgba(255,255,255,.28);}
.hero.hero-photo .destinations button{color:#fff; border-left-color:var(--gold);}
.hero.hero-photo .destinations button::after{color:rgba(255,255,255,.7);}
.hero.hero-photo .destinations button:hover{color:var(--gold); border-left-color:#fff;}
.hero.hero-photo .scroll-cue{
  justify-content:flex-start; color:#D9D8D3; margin-top:34px; padding-top:0;
}

@media (max-width:860px){
  .hero.hero-photo .hero-inner{max-width:100%;}
  .hero-scrim{background:linear-gradient(to top, rgba(38,38,37,.90) 20%, rgba(38,38,37,.62) 100%);}
}

/* the arc keeps its full-width stretch; the plane is its own element so it
   never inherits that distortion */
h1 .arcword{position:relative; display:inline-block;}
h1 .arcword .track-svg{
  position:absolute; left:-2%; bottom:-0.16em; width:104%; height:.3em; overflow:visible;
}
h1 .arcword .track{
  fill:none; stroke:var(--gold); stroke-width:7; stroke-linecap:round;
  stroke-dasharray:420; stroke-dashoffset:420;
  animation:draw 1.9s cubic-bezier(.45,.05,.3,1) .3s forwards;
}
/* The plane shares the arc's box (bottom:-0.16em, height:.3em) so the two sit
   in one coordinate space. Previously it was pinned at bottom:-0.30em, which
   dropped it 0.14em below the line it is supposed to be flying along.
   The translateY values below put the plane's centre on the stroke: the path
   "M4 15 Q150 -6 296 12" in a 20-unit box means the curve is .225em from the
   box top at the start, .056em at the midpoint and .18em at the end, and the
   plane's own centre sits at .15em. */
h1 .arcword .plane{
  position:absolute; bottom:-0.16em; left:0; width:.30em; height:.30em;
  opacity:0;
  /* linear, because the easing is baked into the left values of the keyframes
     below - that is the only way the vertical offsets can be matched to the
     curve, since the plane's position in time and its position along the path
     are not the same thing. */
  animation:fly 1.9s linear .3s forwards;
}
h1 .arcword .plane svg{width:100%; height:100%; display:block; fill:var(--gold);}
/* Each stop below is the exact point on "M4 15 Q150 -6 296 12" that the plane
   has reached at that moment, so it rides the stroke rather than floating
   under it. left carries the original cubic-bezier(.45,.05,.3,1) easing; the
   translateY puts the plane's centre on the curve; the rotation is decorative. */
@keyframes fly{
  0%   { opacity:0; left:0.00%;   transform:translate(-50%,  .0712em) rotate(-14deg); }
  8%   { opacity:1; left:2.04%;   transform:translate(-50%,  .0589em) rotate(-13deg); }
  16%  {            left:7.08%;   transform:translate(-50%,  .0305em) rotate(-11deg); }
  24%  {            left:16.54%;  transform:translate(-50%, -.0150em) rotate(-9deg); }
  32%  {            left:31.68%;  transform:translate(-50%, -.0664em) rotate(-6deg); }
  40%  {            left:50.43%;  transform:translate(-50%, -.0939em) rotate(-1deg); }
  50%  {            left:70.58%;  transform:translate(-50%, -.0787em) rotate(3deg); }
  60%  {            left:83.89%;  transform:translate(-50%, -.0432em) rotate(5deg); }
  70%  {            left:92.09%;  transform:translate(-50%, -.0113em) rotate(7deg); }
  80%  {            left:96.87%;  transform:translate(-50%,  .0108em) rotate(8deg); }
  90%  {            left:99.29%;  transform:translate(-50%,  .0231em) rotate(9deg); }
  100% { opacity:1; left:100.00%; transform:translate(-50%,  .0267em) rotate(9deg); }
}
@media (prefers-reduced-motion: reduce){
  h1 .arcword .track{stroke-dashoffset:0;}
  h1 .arcword .plane{opacity:1; left:100%; transform:translate(-50%, .0267em);}
}

/* the earlier blanket rule for arc SVGs must not catch the plane's own icon */
h1 .arcword .plane svg{position:static; left:auto; bottom:auto; height:100%; overflow:visible;}

/* ---------- inner page heroes get the same treatment ---------- */
/* "Why schools choose us" over a photograph instead of a flat dark panel. The
   scrim is heavier than the page hero's, because this is a full paragraph of
   body text rather than a headline and it has to stay easy to read. */
.section-ink.has-photo{position:relative; overflow:hidden; background:var(--ink);}
.section-ink.has-photo .ink-bg{position:absolute; inset:0; z-index:0;}
.section-ink.has-photo .ink-bg .ph{
  --ratio:auto; aspect-ratio:auto; width:100%; height:100%; margin:0; background:var(--ink);
}
.section-ink.has-photo .ink-bg .ph::before,
.section-ink.has-photo .ink-bg .ph::after{display:none;}
.section-ink.has-photo .ink-bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 55%;
}
.section-ink.has-photo .ink-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(38,38,37,.94) 0%, rgba(38,38,37,.86) 55%,
                                     rgba(38,38,37,.66) 100%);
}
.section-ink.has-photo > .wrap{position:relative; z-index:2;}

.page-hero.has-photo{
  position:relative; overflow:hidden; background:var(--ink); color:#fff;
  border-bottom:0; padding:clamp(66px,9vw,120px) 0 clamp(58px,7vw,96px);
}
.page-hero.has-photo .hero-bg{position:absolute; inset:0; z-index:0;}
.page-hero.has-photo .hero-bg .ph{--ratio:auto; aspect-ratio:auto; width:100%; height:100%; margin:0; background:var(--ink);}
.page-hero.has-photo .hero-bg .ph::before,
.page-hero.has-photo .hero-bg .ph::after{display:none;}
.page-hero.has-photo .hero-bg img{width:100%; height:100%; object-fit:cover; object-position:center 40%;}
.page-hero.has-photo .hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(38,38,37,.88) 0%, rgba(38,38,37,.62) 52%, rgba(38,38,37,.28) 100%);
}
.page-hero.has-photo .wrap{position:relative; z-index:2;}
.page-hero.has-photo h1{color:#fff;}
.page-hero.has-photo .eyebrow{color:#EDECE8;}
.page-hero.has-photo .lede{color:#E4E3DE;}
@media (max-width:860px){
  .page-hero.has-photo .hero-scrim{background:linear-gradient(to top, rgba(38,38,37,.90) 25%, rgba(38,38,37,.60) 100%);}
}

/* ==========================================================
   v16
   ========================================================== */

/* The nav underline rule was also landing on the Enquire button, adding 5px of
   bottom padding and a 2px border, so its label sat 7px high. */
nav.main a.btn{
  padding:14px 26px; border-bottom:0; line-height:1;
}
nav.main a.btn:hover{border-bottom:0;}
@media (max-width:900px){
  nav.main a.btn{padding:15px 26px;}
}

/* ---------- itinerary days run along the top ---------- */
.itin-layout{grid-template-columns:1fr; gap:0;}

.day-rail{
  position:sticky; top:82px; z-index:20;
  max-height:none; overflow-x:auto; overflow-y:hidden;
  background:rgba(255,255,255,.96); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
  margin:0 0 clamp(34px,4vw,54px);
  scrollbar-width:none;
}
.day-rail::-webkit-scrollbar{display:none;}
.day-rail p.rail-title{display:none;}
.day-rail ol{display:flex; gap:0; min-width:min-content;}
.day-rail li{flex:none;}
.day-rail a{
  display:block; white-space:nowrap;
  border-left:0; border-bottom:2px solid transparent;
  padding:15px 20px 13px; color:var(--slate);
  font-family:var(--body); font-size:13.5px; font-weight:600;
  letter-spacing:.02em;
}
.day-rail a strong{
  display:inline; font-family:var(--body); font-size:13.5px; font-weight:600; color:inherit;
}
.day-rail a .t{display:none;}
.day-rail a:hover{color:var(--charcoal); border-bottom-color:var(--hairline); border-left:0;}
.day-rail a.active{
  color:var(--charcoal); background:transparent;
  border-left:0; border-bottom-color:var(--gold);
}

/* clear the two sticky bars when jumping to a day */
.day{scroll-margin-top:150px;}
.day .day-media{top:150px;}

/* ---------- square day image, same height as the portrait crop ---------- */
.day-split{grid-template-columns:minmax(0,1.07fr) minmax(0,0.93fr);}
.day-media .ph{--ratio:1/1;}

@media (max-width:900px){
  .day-rail{top:76px; margin-bottom:26px;}
  .day-rail a{padding:13px 16px 11px; font-size:12.5px;}
  .day-split{grid-template-columns:1fr;}
  .day-media .ph{--ratio:16/9;}
}

/* ---------- v19: hero strip links straight to a tour ---------- */
.destinations a{
  text-decoration:none;
  font-family:var(--body); font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--charcoal);
  padding:6px 20px 6px 12px; border-left:2px solid var(--gold);
  margin-bottom:10px; transition:color .15s, border-color .15s;
}
.destinations a::after{content:" \203A"; color:var(--slate); font-weight:400; margin-left:2px;}
.destinations a:hover{color:var(--slate); border-left-color:var(--charcoal);}
.hero.hero-photo .destinations a{color:#fff; border-left-color:var(--gold);}
.hero.hero-photo .destinations a::after{color:rgba(255,255,255,.7);}
.hero.hero-photo .destinations a:hover{color:var(--gold); border-left-color:#fff;}

/* A country with two tours in the hero strip: one heading that drops down to
   show both. The panel floats, so opening it does not shunt the rest of the
   strip sideways. */
.dest-group{position:relative; margin-bottom:10px;}
.dest-group > summary{
  list-style:none; cursor:pointer;
  font-family:var(--body); font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--charcoal);
  padding:6px 20px 6px 12px; border-left:2px solid var(--gold);
  transition:color .15s, border-color .15s;
}
.dest-group > summary::-webkit-details-marker{display:none;}
.dest-group > summary::marker{content:"";}
.dest-group > summary::after{
  content:""; display:inline-block; margin-left:7px;
  width:5px; height:5px; border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px);
  transition:transform .18s ease; opacity:.65;
}
.dest-group[open] > summary::after{transform:rotate(-135deg) translateY(1px);}
.dest-group > summary:hover{color:var(--slate); border-left-color:var(--charcoal);}
.dest-group > summary:focus-visible{outline:3px solid var(--gold); outline-offset:3px;}
.dest-sub{
  position:absolute; top:calc(100% + 8px); left:0; z-index:30;
  min-width:max(100%, 230px);
  background:var(--white); border:1px solid var(--hairline);
  box-shadow:0 18px 40px rgba(65,64,66,.16);
  display:flex; flex-direction:column; padding:4px 0;
}
.dest-sub a{
  margin-bottom:0; border-left:2px solid transparent;
  padding:10px 20px 10px 14px; white-space:nowrap;
}
.dest-sub a:hover, .dest-sub a:focus-visible{
  background:var(--stone); border-left-color:var(--gold); color:var(--charcoal);
}
.hero.hero-photo .dest-group > summary{color:#fff; border-left-color:var(--gold);}
.hero.hero-photo .dest-group > summary:hover{color:var(--gold); border-left-color:#fff;}
/* The panel is a white card even over the photo hero, so its chevrons need the
   dark treatment rather than the translucent white used on the strip itself. */
.hero.hero-photo .dest-sub a{color:var(--charcoal); border-left-color:transparent;}
.hero.hero-photo .dest-sub a::after{color:var(--slate);}
.hero.hero-photo .dest-sub a:hover{color:var(--charcoal); border-left-color:var(--gold);}

@media (max-width:700px){
  /* No room to float on a phone — let it push the strip down instead. */
  .dest-group{position:static; width:100%;}
  .dest-sub{position:static; box-shadow:none; margin:6px 0 4px 12px; min-width:0;}
  .dest-sub a{white-space:normal;}
}

/* ---------- standalone itinerary copies: no navigation to offer ---------- */
.standalone-nav{margin-left:auto; display:flex; align-items:center;}
.logo span.fallback{display:none;}
span.logo{display:flex; align-items:center; flex:none;}
span.foot-logo img{height:30px; width:auto; display:block;}


/* ==========================================================
   THE TOUR APP — showcase on the For schools page.
   The handset is drawn in CSS rather than photographed, so
   the screenshots stay sharp at any size and the frame is
   charcoal and gold rather than a stock device mock-up.
   ========================================================== */
.app-section{background:var(--ink); color:#fff; padding:clamp(56px,7vw,96px) 0;}
.app-section .eyebrow{color:#C9C8C4;}
.app-section .eyebrow::before{background:var(--gold);}
.app-section h2{
  font-family:var(--display); font-weight:600; color:#fff;
  font-size:clamp(30px,4.4vw,52px); line-height:1.1; margin:12px 0 0;
}
.app-section h2 em{font-style:italic; color:var(--gold);}
.app-section .lede{
  color:#BFBEBA; max-width:62ch; margin:18px 0 0; font-size:clamp(15px,1.5vw,17.5px);
}

.app-grid{
  display:grid; gap:clamp(32px,5vw,64px); align-items:center;
  grid-template-columns:1fr; margin-top:clamp(36px,5vw,56px);
}
@media (min-width:900px){
  .app-grid{grid-template-columns:minmax(0,1fr) minmax(0,auto);}
}

.app-features{list-style:none; margin:0; padding:0; display:grid; gap:26px;}
.app-features li{border-left:3px solid var(--gold); padding-left:18px;}
.app-features h3{
  font-family:var(--body); font-size:14.5px; font-weight:600; letter-spacing:.02em;
  color:#fff; margin:0 0 6px;
}
.app-features p{margin:0; color:#A9A8A3; font-size:14.5px; line-height:1.62;}

/* --- the handsets --- */
.phones{
  display:flex; gap:clamp(16px,2.6vw,30px); justify-content:center;
  flex-wrap:wrap; min-width:0;
}
.phone{margin:0; text-align:center; flex:0 1 auto;}
.phone-shell{
  position:relative; width:clamp(200px,46vw,230px); aspect-ratio:9/15.75;
  background:#0E0E0F; border-radius:30px; padding:9px;
  box-shadow:0 0 0 2px #4A494B, 0 26px 50px rgba(0,0,0,.55);
  overflow:hidden;
}
.phone-notch{
  position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:38%; height:15px; background:#0E0E0F;
  border-bottom-left-radius:9px; border-bottom-right-radius:9px; z-index:2;
}
.phone-shell img{
  display:block; width:100%; height:100%; object-fit:cover; object-position:top center;
  border-radius:22px;
}
.phone figcaption{
  margin-top:12px; font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:#8E8D90;
}

.app-quote{
  margin:clamp(40px,5vw,60px) 0 0; max-width:900px;
  border-top:1px solid #454446; padding-top:clamp(28px,3.4vw,40px);
}
.app-quote p{
  font-family:var(--display); font-weight:500; font-style:italic;
  font-size:clamp(21px,2.8vw,33px); line-height:1.32; color:#fff; margin:0;
}
.app-quote cite{
  display:block; margin-top:18px; font-family:var(--body); font-style:normal;
  font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:#A9A8A3; border-left:3px solid var(--gold); padding-left:11px;
}

/* No feature list beside the handsets: one centred column, and the pair can
   sit a little larger because they are not sharing the row. */
.app-grid.solo{grid-template-columns:minmax(0,1fr); justify-items:center;}
.app-grid.solo .phone-shell{width:clamp(210px,46vw,292px);}
@media (min-width:900px){
  .app-grid.solo{grid-template-columns:minmax(0,1fr);}
}

/* The feature points under the handsets. A gold rule in place of a bullet,
   the lead-in in white and the detail in the muted grey, so the eye catches
   the claim first and the explanation second. */
.app-points{
  list-style:none; margin:clamp(34px,4.5vw,52px) auto 0; padding:0;
  max-width:760px; display:grid; gap:20px;
}
.app-points li{
  position:relative; padding-left:30px;
  color:#A9A8A3; font-size:clamp(15px,1.55vw,17px); line-height:1.6;
}
.app-points li::before{
  content:""; position:absolute; left:0; top:.68em;
  width:16px; height:2px; background:var(--gold);
}
.app-points b{color:#fff; font-weight:600;}

.app-closer{
  max-width:760px; margin:22px auto 0; color:#8E8D90;
  font-size:clamp(14px,1.45vw,15.5px); line-height:1.6;
}

/* Points below the handsets. A gold dash rather than a bullet, matching the
   rule under the eyebrow; two columns once there is room for them. */
.app-points{
  margin:clamp(36px,4.6vw,52px) auto 0; max-width:960px;
  border-top:1px solid #454446; padding-top:clamp(28px,3.4vw,38px);
}
.app-points ul{
  list-style:none; margin:0; padding:0;
  display:grid; gap:20px 44px; grid-template-columns:1fr;
}
@media (min-width:760px){ .app-points ul{grid-template-columns:1fr 1fr;} }
.app-points li{
  position:relative; padding-left:26px;
  color:#A9A8A3; font-size:15px; line-height:1.62;
}
.app-points li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:14px; height:2px; background:var(--gold);
}
.app-points li b{color:#fff; font-weight:600;}
.app-foot{
  margin:clamp(22px,2.6vw,30px) 0 0; color:#8E8D90;
  font-size:14px; line-height:1.6;
}

/* No map artwork yet: the gazetteer takes the full width rather than sitting
   beside an empty frame. */
.map-block.no-map{grid-template-columns:1fr;}

/* An optional catchy line above a day's title. Display italic in gold so it
   reads as a flourish rather than a second heading. */
.day-pun{
  font-family:var(--display); font-style:italic; font-weight:600;
  font-size:clamp(24px,3.1vw,36px); line-height:1.12;
  color:var(--gold); margin:14px 0 14px;
  position:relative; padding-bottom:14px;
}
/* a short gold rule under the line, so it reads as a flourish with weight
   rather than a faint second heading */
.day-pun::after{
  content:""; position:absolute; left:0; bottom:0;
  width:52px; height:3px; background:var(--gold);
}

/* The notebooks photograph on the testimonials page. A cut-out PNG, so it
   needs no frame - it sits straight on the stone wash between Tony's account
   of the books and the quote taken from them. */
.notebooks-photo{
  margin:clamp(34px,4.6vw,56px) auto 0; max-width:580px; padding:0;
}
.notebooks-photo img{display:block; width:100%; height:auto;}