/* =====================================================================
   VitaCeylona v3 — B2B components
   Loaded after main.css. Uses the same design tokens (Layer 2 roles), so
   a palette change in main.css :root re-themes everything here as well.
   ===================================================================== */

[hidden]{display:none !important;}

/* ---------- Navigation additions ---------- */
.nav-links{gap:26px;}
.nav-login{
  font-size:0.8rem !important; opacity:0.85;
  padding-left:22px !important; border-left:1px solid rgba(var(--surface-rgb),0.25);
}
.nav-login::after{left:22px !important;}
.nav-login:hover::after{width:calc(100% - 22px) !important;}

.lang-switch{display:inline-flex; align-items:center; border:1px solid rgba(var(--surface-rgb),0.35); border-radius:3px; overflow:hidden;}
.lang-switch .lang-opt{
  font-family:var(--sans); font-size:0.72rem !important; font-weight:600; letter-spacing:0.08em;
  padding:6px 9px !important; color:rgba(var(--surface-rgb),0.8); line-height:1; min-height:0 !important;
}
.lang-switch .lang-opt::after{display:none !important;}
.lang-switch .lang-opt:hover{color:#fff; background:rgba(var(--surface-rgb),0.12);}
.lang-switch .lang-opt.is-current{background:var(--surface); color:var(--primary);}
.foot-social .lang-switch{margin-left:6px;}
.foot-social .lang-switch .lang-opt.is-current{color:var(--primary);}

/* Six links + login + language + CTA need about 1150px on one line, so the
   drawer takes over earlier than in v2 (was 980px). */
@media (max-width:1180px){
  body{padding-top:70px;}
  .logo-mark{height:38px;}
  .nav-links{
    position:fixed; top:0; right:-100%; height:100vh; height:100dvh; width:min(340px,86vw);
    background:var(--primary-deep); flex-direction:column; justify-content:flex-start; align-items:stretch;
    gap:6px; padding:92px 32px 40px; overflow-y:auto;
    transition:right 0.45s cubic-bezier(.77,0,.18,1);
    box-shadow:-20px 0 60px rgba(var(--primary-deep-rgb),0.45);
  }
  .nav-links > *{margin-left:0;}
  .nav-links.open{right:0;}
  .nav-links a{color:var(--text-invert); font-size:1.02rem; min-height:46px; display:flex; align-items:center;}
  .nav-links a::after{display:none;}
  .nav-login{padding-left:0 !important; border-left:none; border-top:1px solid rgba(var(--surface-rgb),0.15); margin-top:10px; padding-top:10px !important;}
  .lang-switch{align-self:flex-start; margin:14px 0 6px;}
  .lang-switch .lang-opt{padding:10px 14px !important; font-size:0.8rem !important;}
  .nav-cta{text-align:center; justify-content:center; margin-top:10px; min-height:48px;}
  .nav-toggle{display:block;}
}

/* ---------- Hero tweaks ---------- */
.hero p.sub.sub-wide{max-width:640px;}
.tour-hero-sub{color:rgba(var(--surface-rgb),0.9); font-size:1.08rem; font-weight:300; max-width:680px; margin-top:16px;}
.page-hero .hero-ctas{margin:28px 0 0;}
.page-hero{height:auto; min-height:max(52vh,340px); padding-top:120px;}

/* ---------- Commitments band ---------- */
.promise-band{background:var(--primary); padding:0;}
.promise-grid{display:grid; grid-template-columns:repeat(4,1fr);}
.promise{padding:34px 28px; border-left:1px solid rgba(var(--surface-rgb),0.14); display:flex; flex-direction:column; gap:6px;}
.promise:first-child{border-left:none; padding-left:0;}
.promise strong{font-family:var(--serif); font-size:1.5rem; font-weight:600; color:var(--surface-alt); line-height:1.2;}
.promise span{font-size:0.86rem; color:rgba(var(--surface-rgb),0.78); font-weight:300;}
@media (max-width:900px){
  .promise-grid{grid-template-columns:1fr 1fr;}
  .promise{padding:26px 18px; border-left:none; border-top:1px solid rgba(var(--surface-rgb),0.14);}
  .promise:nth-child(-n+2){border-top:none;}
  .promise:nth-child(odd){padding-left:0;}
}
@media (max-width:480px){
  .promise-grid{grid-template-columns:1fr;}
  .promise{padding:20px 0; border-top:1px solid rgba(var(--surface-rgb),0.14) !important;}
  .promise:first-child{border-top:none !important;}
}

/* ---------- Service cards ---------- */
.svc-section{background:var(--surface);}
.svc-section.svc-alt{background:var(--surface-alt);}
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:980px){.svc-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.svc-grid{grid-template-columns:1fr;}}
.svc-card{
  background:var(--surface-alt); border:1px solid var(--border); border-radius:6px;
  padding:32px 28px; transition:transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.svc-alt .svc-card{background:var(--surface);}
.svc-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(var(--accent-rgb),0.45);}
.svc-icon{
  display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px;
  border-radius:50%; background:rgba(var(--secondary-rgb),0.12); color:var(--secondary-ink); margin-bottom:18px;
}
.svc-card h3{font-family:var(--sans); font-size:1.08rem; font-weight:600; color:var(--primary-deep); margin-bottom:8px; letter-spacing:0;}
.svc-card p{font-size:0.94rem; color:var(--text-muted); font-weight:400; line-height:1.65;}

/* ---------- Steps ---------- */
.steps-section{background:var(--surface-alt);}
.steps-grid{list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:26px; counter-reset:none;}
.steps-grid.steps-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:980px){.steps-grid, .steps-grid.steps-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.steps-grid, .steps-grid.steps-3{grid-template-columns:1fr;}}
.step{position:relative; padding-top:26px; border-top:2px solid rgba(var(--primary-rgb),0.16);}
.step-num{
  position:absolute; top:-21px; left:0; width:40px; height:40px; border-radius:50%;
  background:var(--primary); color:var(--surface-alt); display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:1.1rem; font-weight:600; box-shadow:0 0 0 6px var(--surface-alt);
}
.step h3{font-family:var(--sans); font-size:1.08rem; font-weight:600; color:var(--primary-deep); margin:14px 0 8px; letter-spacing:0;}
.step p{font-size:0.94rem; color:var(--text-muted); line-height:1.65;}

.model-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:900px){.model-grid{grid-template-columns:1fr;}}
.model-card{background:var(--surface); border-left:3px solid var(--accent); border-radius:0 6px 6px 0; padding:28px 28px 26px; box-shadow:var(--shadow-sm);}
.model-card h3{font-size:1.3rem; color:var(--primary-deep); margin-bottom:10px;}
.model-card p{font-size:0.95rem; color:var(--text-muted);}

/* ---------- Tour cards ---------- */
.tours-section{background:var(--surface);}
.tours-related{background:var(--surface-alt);}
.tour-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
@media (max-width:980px){.tour-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.tour-grid{grid-template-columns:1fr;}}
.tour-card{background:var(--surface-alt); border:1px solid var(--border); border-radius:6px; overflow:hidden; transition:transform 0.35s ease, box-shadow 0.35s ease;}
.tours-related .tour-card{background:var(--surface);}
.tour-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg);}
.tour-card > a{display:flex; flex-direction:column; height:100%;}
.tour-card-media{position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:var(--primary-deep);}
.tour-card-media img{width:100%; height:100%; object-fit:cover; transition:transform 0.7s cubic-bezier(.2,.7,.3,1);}
.tour-card:hover .tour-card-media img{transform:scale(1.07);}
.tour-badge{
  position:absolute; top:14px; left:14px; background:var(--surface); color:var(--primary);
  font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:6px 11px; border-radius:3px;
}
.tour-card-body{display:flex; flex-direction:column; flex:1; padding:24px 24px 22px;}
.tour-card-body .xp-kicker{font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase; font-weight:600; color:var(--secondary-ink); margin-bottom:8px; display:block;}
.tour-card-body h3{font-size:1.4rem; color:var(--primary-deep); margin-bottom:10px;}
.tour-card-body p{font-size:0.93rem; color:var(--text-muted); line-height:1.6; margin-bottom:20px; flex:1;}
.tour-card-foot{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding-top:16px; border-top:1px solid var(--border);}
.tour-price{color:var(--primary-deep); line-height:1.2;}
.tour-price strong{font-family:var(--serif); font-size:1.35rem; font-weight:700;}
.tour-price small{font-size:0.74rem; color:var(--text-muted);}
.price-footnote{margin-top:34px; font-size:0.84rem; color:var(--text-muted); max-width:760px;}

/* ---------- Single tour ---------- */
.tour-facts-bar{background:var(--primary); padding:0;}
.tour-facts{display:grid; grid-template-columns:repeat(4,1fr);}
.tour-facts > div{padding:26px 24px; border-left:1px solid rgba(var(--surface-rgb),0.14);}
.tour-facts > div:first-child{border-left:none; padding-left:0;}
.tour-facts span{display:block; font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase; font-weight:600; color:var(--accent-soft); margin-bottom:6px;}
.tour-facts strong{color:var(--surface-alt); font-weight:500; font-size:0.98rem; line-height:1.4; display:block;}
@media (max-width:900px){
  .tour-facts{grid-template-columns:1fr 1fr;}
  .tour-facts > div{padding:18px 14px 18px 0; border-left:none; border-top:1px solid rgba(var(--surface-rgb),0.14);}
  .tour-facts > div:nth-child(-n+2){border-top:none;}
}

.route-line{list-style:none; display:flex; flex-wrap:wrap; gap:10px 0; margin-bottom:10px;}
.route-line li{position:relative; padding:6px 34px 6px 0; display:flex; flex-direction:column;}
.route-line li::after{content:'→'; position:absolute; right:11px; top:6px; color:var(--accent); font-size:1rem;}
.route-line li:last-child{padding-right:0;}
.route-line li:last-child::after{display:none;}
.route-line strong{font-family:var(--serif); font-size:1.12rem; color:var(--primary-deep); font-weight:600;}
.route-line span{font-size:0.78rem; color:var(--text-muted);}

.tour-stage{grid-template-columns:84px 1fr;}
.tour-stage:not(:last-child)::before{left:41px;}
.stage-marker{width:84px; white-space:nowrap; height:40px; border-radius:20px; font-family:var(--sans); font-size:0.86rem; font-weight:600; letter-spacing:0.02em;}
.stage-days{display:none;}
.tour-stage h3{font-size:1.12rem;}
.tour-stage p{font-size:0.97rem; line-height:1.7; font-weight:400;}

.incl-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:20px;}
@media (max-width:720px){.incl-grid{grid-template-columns:1fr; gap:10px;}}
.incl-grid h2{margin-top:44px !important;}
.check-list{list-style:none;}
.check-list li{position:relative; padding:8px 0 8px 30px; font-size:0.95rem; color:var(--text); border-bottom:1px solid rgba(var(--primary-rgb),0.08);}
.check-list li::before{content:''; position:absolute; left:2px; top:14px; width:14px; height:8px; border-left:2px solid var(--secondary-ink); border-bottom:2px solid var(--secondary-ink); transform:rotate(-45deg);}
.check-list.is-excluded li{color:var(--text-muted);}
.check-list.is-excluded li::before{width:12px; height:0; border-left:none; border-bottom:2px solid var(--text-muted); transform:none; top:20px;}

.price-card .price-big{font-family:var(--serif); font-size:2.1rem; font-weight:700; color:var(--primary-deep); line-height:1.15; margin-bottom:8px;}
.price-card .price-big small{font-family:var(--sans); font-size:0.8rem; font-weight:400; color:var(--text-muted);}
.price-terms{font-size:0.85rem !important; color:var(--text-muted) !important; line-height:1.55;}
.btn-block{display:flex; justify-content:center; width:100%; margin:20px 0 6px; white-space:normal; text-align:center;}
.mini-list{list-style:none;}
.mini-list li{font-size:0.9rem; padding:5px 0 5px 16px; position:relative; color:var(--text);}
.mini-list li::before{content:''; position:absolute; left:0; top:13px; width:6px; height:6px; border-radius:50%; background:var(--accent);}

/* ---------- Split call-to-action ---------- */
.split-cta{background:var(--surface-alt);}
.split-grid{display:grid; grid-template-columns:1.25fr 1fr; gap:28px;}
@media (max-width:900px){.split-grid{grid-template-columns:1fr;}}
.split-card{border-radius:8px; padding:52px 48px; display:flex; flex-direction:column; align-items:flex-start;}
@media (max-width:620px){.split-card{padding:36px 26px;}}
.split-card h2{font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:14px;}
.split-card p{font-size:0.98rem; margin-bottom:28px; max-width:480px;}
.split-trade{background:var(--primary); color:var(--surface-alt);}
.split-trade h2{color:var(--surface-alt);}
.split-trade p{color:rgba(var(--surface-rgb),0.85);}
.split-trade .eyebrow{color:var(--accent-soft);}
.split-travel{background:var(--surface); border:1px solid var(--border);}
.split-travel p{color:var(--text-muted);}
.split-card .btn{margin-top:auto;}

/* ---------- Forms ---------- */
.form-shell{max-width:780px; margin:0 auto;}
.form-shell .section-head{margin-bottom:40px;}
.vc-form{display:flex; flex-direction:column; gap:20px;}
.vc-form label, .field-label{display:block; font-size:0.86rem; font-weight:600; color:var(--primary-deep); letter-spacing:0.01em;}
.field-label{margin-bottom:-8px;}
.vc-input{
  display:block; width:100%; margin-top:7px; padding:13px 14px; min-height:48px;
  border:1px solid rgba(var(--primary-rgb),0.28); border-radius:4px;
  font-family:var(--sans); font-size:1rem; font-weight:400; color:var(--text); background:var(--surface-alt);
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
textarea.vc-input{resize:vertical; min-height:120px; line-height:1.55;}
.vc-input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(var(--primary-rgb),0.14);}
.vc-input::placeholder{color:#7C8592;}
.form-row-3{display:grid; grid-template-columns:1.4fr 0.8fr 1.2fr; gap:18px;}
@media (max-width:600px){.form-row-3{grid-template-columns:1fr;}}
.hp-field{position:absolute; left:-9999px;}
.form-submit{align-self:flex-start;}
.form-note{font-size:0.8rem; color:var(--text-muted);}
.form-msg{padding:16px 18px; border-radius:4px; font-size:0.95rem; margin-bottom:22px;}
.form-msg.is-success{background:rgba(var(--secondary-rgb),0.12); color:#1E5E3B; border:1px solid rgba(var(--secondary-rgb),0.35); font-weight:500;}
.form-msg.is-error{background:#FBEAE5; color:#8A2E17; border:1px solid #EBB9AB;}

.form-done{text-align:center; padding:30px 0;}
.form-done-icon{display:inline-flex; width:72px; height:72px; border-radius:50%; align-items:center; justify-content:center; background:rgba(var(--secondary-rgb),0.14); color:var(--secondary-ink); margin-bottom:22px;}
.form-done h2{font-size:2rem; color:var(--primary-deep); margin-bottom:12px;}
.form-done p{color:var(--text-muted); max-width:520px; margin:0 auto 28px;}

/* ---------- Planner ---------- */
.planner-section{padding-top:80px;}
.planner-progress{list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:36px;}
.planner-progress li{
  display:flex; align-items:center; gap:10px; font-size:0.82rem; font-weight:600; color:var(--text-muted);
  padding-bottom:12px; border-bottom:3px solid rgba(var(--primary-rgb),0.12); cursor:default;
}
.planner-progress li span{
  display:inline-flex; width:26px; height:26px; flex:none; border-radius:50%; align-items:center; justify-content:center;
  background:rgba(var(--primary-rgb),0.1); color:var(--primary); font-size:0.78rem;
}
.planner-progress li.is-active{color:var(--primary-deep); border-bottom-color:var(--accent);}
.planner-progress li.is-active span{background:var(--primary); color:#fff;}
.planner-progress li.is-done{border-bottom-color:var(--secondary); cursor:pointer;}
.planner-progress li.is-done span{background:var(--secondary-ink); color:#fff;}
@media (max-width:600px){.planner-progress li{font-size:0; gap:0; justify-content:center;} .planner-progress li span{font-size:0.78rem;}}

.planner-step{border:none; padding:0; margin:0; min-width:0; display:flex; flex-direction:column; gap:20px;}
.planner-step + .planner-step{margin-top:26px; padding-top:30px; border-top:1px solid var(--border);}
.planner-step legend{font-family:var(--serif); font-size:1.5rem; font-weight:600; color:var(--primary-deep); padding:0; margin-bottom:20px; float:left; width:100%;}
.planner-step legend + *{clear:both;}
/* With JS: one step at a time. */
.planner.is-stepped .planner-step{display:none; margin-top:0; padding-top:0; border-top:none;}
.planner.is-stepped .planner-step.is-active{display:flex; animation:stepIn 0.35s ease;}
@keyframes stepIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}

.choice-grid{display:grid; gap:12px;}
.choice-2{grid-template-columns:1fr 1fr;}
.choice-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:720px){.choice-2, .choice-3{grid-template-columns:1fr;}}
.choice{position:relative; cursor:pointer; margin:0;}
.choice input{position:absolute; opacity:0; inset:0; width:100%; height:100%; cursor:pointer; margin:0;}
.choice > span{
  display:flex; flex-direction:column; gap:4px; height:100%; padding:16px 18px; min-height:48px;
  border:1px solid rgba(var(--primary-rgb),0.25); border-radius:6px; background:var(--surface-alt);
  transition:border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.choice strong{font-size:0.98rem; color:var(--primary-deep); font-weight:600;}
.choice small{font-size:0.82rem; color:var(--text-muted); font-weight:400; line-height:1.45;}
.choice:hover > span{border-color:var(--primary);}
.choice input:checked + span{border-color:var(--primary); background:rgba(var(--primary-rgb),0.06); box-shadow:inset 0 0 0 1px var(--primary);}
.choice input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px;}

.chip-grid{display:flex; flex-wrap:wrap; gap:10px;}
.chip{position:relative; cursor:pointer; margin:0;}
.chip input{position:absolute; opacity:0; inset:0; width:100%; height:100%; cursor:pointer; margin:0;}
.chip span{
  display:inline-flex; align-items:center; min-height:44px; padding:8px 18px; border-radius:24px;
  border:1px solid rgba(var(--primary-rgb),0.28); background:var(--surface-alt);
  font-size:0.9rem; font-weight:500; color:var(--primary-deep); transition:all 0.2s ease;
}
.chip:hover span{border-color:var(--primary);}
.chip input:checked + span{background:var(--primary); border-color:var(--primary); color:#fff;}
.chip input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px;}

.planner-nav{display:flex; justify-content:flex-end; gap:12px; margin-top:14px; padding-top:24px; border-top:1px solid var(--border);}
.planner-nav [data-planner-back]{margin-right:auto;}
@media (max-width:480px){.planner-nav .btn{flex:1; justify-content:center; padding-left:16px; padding-right:16px;}}

/* ---------- Buttons: comfortable touch targets ---------- */
.btn{min-height:48px;}
@media (max-width:480px){
  .hero-ctas .btn{flex:1 1 100%; justify-content:center;}
}

/* Footer: five link columns read better as 2 + 3 on tablets. */
.foot-social{align-items:center;}

/* =====================================================================
   v4 — one site for travellers and the trade
   ===================================================================== */
.hero-trade{color:rgba(var(--surface-rgb),0.85); font-size:0.92rem; margin-top:-30px;}
.hero-trade a{color:var(--accent-soft); font-weight:600; border-bottom:1px solid rgba(var(--surface-rgb),0.35); padding-bottom:1px;}
.hero-trade a:hover{color:#fff; border-bottom-color:#fff;}

.welcome-text p{font-size:1.04rem; color:var(--text); margin-bottom:16px; line-height:1.75;}
.welcome-text h3{font-size:1.3rem; color:var(--primary-deep); margin:26px 0 10px;}

.dest-section{background:var(--surface-alt);}
.dest-home-grid .archive-card{aspect-ratio:4/3;}
.dest-intro{font-family:var(--serif); font-size:1.3rem; line-height:1.6; color:var(--primary-deep); margin-bottom:26px;}
.tour-grid.tour-grid-2{grid-template-columns:repeat(2,1fr); margin-top:8px;}
@media (max-width:620px){.tour-grid.tour-grid-2{grid-template-columns:1fr;}}
.tour-season{color:var(--text-muted);}
.tour-overview p{font-size:1.04rem; line-height:1.75;}

.about-cols{display:grid; grid-template-columns:1fr 1.3fr; gap:60px; align-items:start;}
@media (max-width:900px){.about-cols{grid-template-columns:1fr; gap:30px;}}

.trade-section{background:var(--primary-deep); color:var(--surface-alt);}
.trade-head{max-width:720px; margin-bottom:44px;}
.trade-head h2{color:var(--surface-alt); font-size:clamp(2rem,4vw,2.8rem); margin-bottom:16px;}
.trade-head p{color:rgba(var(--surface-rgb),0.85); font-size:1.04rem;}
.trade-head .eyebrow{color:var(--accent-soft);}
.trade-promises{border-top:1px solid rgba(var(--surface-rgb),0.14); border-bottom:1px solid rgba(var(--surface-rgb),0.14);}
.trade-ctas{margin:40px 0 0;}

.journal-section{background:var(--surface);}
.blog-grid.blog-grid-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:900px){.blog-grid.blog-grid-3{grid-template-columns:1fr;}}

/* Article body: tables and quotes carried over from the old site */
.rich-text h2{font-size:1.6rem; color:var(--primary-deep); margin:34px 0 12px;}
.rich-text h3{font-size:1.25rem; color:var(--primary-deep); margin:26px 0 10px;}
.rich-text table{width:100%; border-collapse:collapse; margin:20px 0; font-size:0.94rem; display:block; overflow-x:auto;}
.rich-text th, .rich-text td{border:1px solid var(--border); padding:10px 12px; text-align:left; vertical-align:top;}
.rich-text th{background:rgba(var(--primary-rgb),0.06); color:var(--primary-deep); font-weight:600;}
.rich-text blockquote{border-left:3px solid var(--accent); padding:6px 0 6px 20px; margin:22px 0; color:var(--primary-deep); font-family:var(--serif); font-size:1.12rem;}
.rich-text a{color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;}