/* =====================================================================
   BALI TO KOMODO ISLAND — Quiet Concierge design system
   Editorial-minimalist luxury: deep pine ink, brass accent, warm ivory.
   Fraunces (display serif) + Karla (humanist sans).
   ===================================================================== */

:root{
  --ink:        #0f1e1a;
  --ink-2:      #16302a;
  --ink-3:      #1e3b33;
  --accent:     #b08a55;
  --accent-2:   #967141;
  --accent-soft:#e7d3ac;
  --ivory:      #faf6ee;
  --pearl:      #f2ebdc;
  --paper:      #fffdf9;
  --text:       #201e19;
  --text-soft:  #55524a;
  --muted:      #8a8478;
  --border:     #e6ddc9;
  --border-strong: #d8cbab;
  --cream-on-ink: #f4efe3;
  --muted-on-ink: #a9b6ae;

  --r-xs: 4px; --r-sm: 8px; --r: 14px; --r-lg: 22px; --r-pill: 999px;

  --container: 1220px;
  --gutter: 20px;

  --shadow-sm: 0 1px 2px rgba(15,30,26,.06);
  --shadow-md: 0 10px 30px -12px rgba(15,30,26,.22);
  --shadow-lg: 0 24px 60px -20px rgba(15,30,26,.35);

  --ease: cubic-bezier(.25,.8,.25,1);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (min-width: 640px){ :root{ --gutter: 32px; } }
@media (min-width: 1024px){ :root{ --gutter: 48px; } }

/* ---------------------------------------------------------------------
   Reset & base
   --------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p{ margin: 0; }

::selection{ background: var(--accent-soft); color: var(--ink); }

:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.btk-container{
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.btk-skip-link{
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--ink); color: var(--cream-on-ink); padding: 12px 20px; border-radius: 0 0 8px 0;
}
.btk-skip-link:focus{ left: 0; }

h1,h2,h3,.btk-display{ font-family: var(--font-display); color: var(--ink); font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }

.btk-eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent-2);
}
.btk-eyebrow::before{ content:""; width: 22px; height: 1px; background: var(--accent); display:inline-block; }

.btk-h2{ font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem); line-height: 1.12; }
.btk-h1{ font-size: clamp(2.1rem, 1.3rem + 4vw, 3.8rem); line-height: 1.05; }
.btk-lede{ color: var(--text-soft); font-size: clamp(1rem, .95rem + .3vw, 1.15rem); line-height: 1.65; max-width: 60ch; }

.btk-section{ padding-block: clamp(48px, 3.4vw + 18px, 96px); }
.btk-section--tight{ padding-block: clamp(32px, 2.6vw + 16px, 72px); }
.btk-section--ivory{ background: var(--ivory); }
.btk-section--pearl{ background: var(--pearl); }
.btk-section--ink{ background: var(--ink); color: var(--cream-on-ink); }
.btk-section--ink .btk-h2,
.btk-section--ink h3{ color: var(--cream-on-ink); }
.btk-section--ink .btk-lede{ color: var(--muted-on-ink); }

.btk-head{ max-width: 720px; }
.btk-head + .btk-head{ margin-top: 8px; }
.btk-head .btk-eyebrow{ margin-bottom: 14px; }
.btk-head .btk-h2{ margin-bottom: 16px; }

/* Asymmetric editorial header — heading held left, intro set beside it rather
   than stacked underneath, so section openings do not all read the same. */
.btk-head--split{ max-width: none; display: grid; grid-template-columns: 1fr; gap: 4px 44px; }
.btk-head--split .btk-lede{ max-width: 64ch; }
@media (min-width: 960px){
  .btk-head--split{ grid-template-columns: 5fr 7fr; align-items: end; }
  .btk-head--split .btk-h2{ margin-bottom: 0; }
  .btk-head--split .btk-head-aside{ padding-bottom: 5px; border-left: 1px solid var(--border); padding-left: 30px; }
}

/* ---------------------------------------------------------------------
   Reveal-on-scroll (shared by every section)
   --------------------------------------------------------------------- */
.btk-reveal{
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  will-change: opacity, transform;
}
.btk-reveal.is-in{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .btk-reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btk-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 26px;
  border-radius: var(--r-pill); border: 1px solid transparent;
  font-family: var(--font-body); font-weight: 700; font-size: 14.5px; letter-spacing: .01em;
  cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
  touch-action: manipulation;
}
.btk-btn:active{ transform: translateY(1px); }
.btk-btn--primary{ background: var(--accent); color: var(--ink); }
.btk-btn--primary:hover{ background: var(--accent-2); color: var(--paper); }
.btk-btn--ghost{ background: transparent; color: inherit; border-color: currentColor; opacity: .85; }
.btk-btn--ghost:hover{ opacity: 1; border-color: var(--accent); color: var(--accent-2); }
.btk-section--ink .btk-btn--ghost:hover{ color: var(--accent-soft); }
.btk-btn--link{
  display: inline-flex; align-items: center; gap: 8px; min-height: auto; padding: 0;
  border-radius: 0; border-bottom: 1px solid currentColor; font-weight: 600;
}
.btk-btn--link:hover{ color: var(--accent-2); }
.btk-btn svg{ width: 16px; height: 16px; }
.btk-icon{ width: 20px; height: 20px; }

/* ---------------------------------------------------------------------
   Header
   --------------------------------------------------------------------- */
.btk-header{
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  padding-block: 18px;
  background: linear-gradient(to bottom, rgba(15,30,26,.55), transparent);
  transition: background-color .3s var(--ease), padding .3s var(--ease), box-shadow .3s var(--ease);
}
.btk-header.is-solid{
  background: rgba(250,246,238,.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  padding-block: 12px;
}
.btk-header-row{ display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.btk-logo{ display: flex; flex-direction: column; line-height: 1; color: var(--cream-on-ink); }
.btk-header.is-solid .btk-logo{ color: var(--ink); }
.btk-logo strong{ font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.btk-logo span{ font-family: var(--font-body); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent-soft); margin-top: 4px; }
.btk-header.is-solid .btk-logo span{ color: var(--accent-2); }

/* Uploaded logo. Height is fixed so the bar never jumps while the image
   loads; width follows the artwork. */
.btk-logo-img{ display: block; height: 42px; width: auto; max-width: 220px; object-fit: contain; }
@media (max-width: 639px){ .btk-logo-img{ height: 34px; max-width: 165px; } }
/* The header is transparent over the hero and cream once scrolled, so it
   carries both versions and shows whichever suits the current background. */
.btk-logo-img--on-light{ display: none; }
.btk-header.is-solid .btk-logo-img--on-dark{ display: none; }
.btk-header.is-solid .btk-logo-img--on-light{ display: block; }
.btk-footer .btk-logo-img{ height: 46px; }

.btk-nav{ display: none; }
.btk-nav ul{ display: flex; align-items: center; gap: 30px; }
.btk-nav a{
  font-size: 14px; font-weight: 600; color: var(--cream-on-ink); opacity: .88;
  padding-block: 6px; border-bottom: 1px solid transparent; transition: opacity .2s, border-color .2s, color .2s;
}
.btk-header.is-solid .btk-nav a{ color: var(--text); }
.btk-nav a:hover{ opacity: 1; border-color: var(--accent); }

.btk-header-actions{ display: flex; align-items: center; gap: 14px; }
.btk-header-actions .btk-btn--primary{ padding: 10px 22px; min-height: 42px; }
/* The mobile nav drawer carries its own CTA — hide the header's copy below
   the breakpoint where the burger takes over, so the logo has room to sit
   on one line instead of wrapping. */
@media (max-width: 1023px){ .btk-header-actions .btk-btn--primary{ display: none; } }

.btk-burger{
  display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: none; border: 1px solid rgba(244,239,227,.35); border-radius: var(--r-sm); color: var(--cream-on-ink);
}
.btk-header.is-solid .btk-burger{ color: var(--ink); border-color: var(--border-strong); }

.btk-mobile-nav{
  position: fixed; inset: 0; z-index: 110; background: var(--ink);
  display: flex; flex-direction: column; padding: 24px var(--gutter) 40px;
  transform: translateY(-100%); transition: transform .35s var(--ease);
  overflow-y: auto;
}
.btk-mobile-nav.is-open{ transform: translateY(0); }
.btk-mobile-nav-head{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.btk-mobile-nav ul{ display: flex; flex-direction: column; gap: 4px; }
.btk-mobile-nav a{
  display: block; padding: 16px 4px; font-family: var(--font-display); font-size: 26px; color: var(--cream-on-ink);
  border-bottom: 1px solid rgba(244,239,227,.12);
}
.btk-mobile-nav .btk-btn{ margin-top: 28px; align-self: flex-start; }
.btk-close{ background: none; border: none; color: var(--cream-on-ink); width: 44px; height: 44px; }

@media (min-width: 1024px){
  .btk-nav{ display: block; }
  .btk-burger, .btk-mobile-nav{ display: none; }
}

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.btk-hero{
  position: relative; color: var(--cream-on-ink);
  min-height: auto; padding-top: 118px; padding-bottom: 64px;
  background: linear-gradient(180deg, rgba(9,18,15,.72) 0%, rgba(9,18,15,.55) 45%, rgba(9,18,15,.85) 100%), var(--ink);
  background-size: cover; background-position: center;
  isolation: isolate;
}
/* The <img> sits directly under .btk-hero (not a low-stacked wrapper div) so
   the live-editor's "Change image" button — appended as its last child —
   paints above the scrim and the text column instead of behind them. */
.btk-hero-img,
.btk-hero-empty-bg{ position: absolute; inset: 0; z-index: 0; }
.btk-hero-img{ width: 100%; height: 100%; object-fit: cover; }
.btk-hero-empty-bg{ background: radial-gradient(120% 120% at 20% 0%, var(--ink-3), var(--ink) 60%); }
.btk-hero::after{
  content:""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(9,18,15,.75) 0%, rgba(9,18,15,.5) 45%, rgba(9,18,15,.92) 100%);
}
.btk-hero > .btk-container{ position: relative; z-index: 2; }

@media (min-width: 480px){ .btk-hero{ min-height: 540px; } }
@media (min-width: 640px){ .btk-hero{ min-height: 580px; padding-top: 126px; } }
@media (min-width: 768px){ .btk-hero{ min-height: 66vh; padding-top: 140px; } }
@media (min-width: 1280px){ .btk-hero{ min-height: 72vh; padding-top: 150px; } }

.btk-hero-content{ max-width: 700px; }
.btk-hero .btk-eyebrow{ color: var(--accent-soft); }
.btk-hero .btk-eyebrow::before{ background: var(--accent-soft); }
.btk-hero h1{ color: var(--cream-on-ink); margin-block: 18px 20px; }
.btk-hero h1 em{ font-style: italic; color: var(--accent-soft); }
.btk-hero-lede{ color: var(--muted-on-ink); font-size: clamp(1rem, .95rem + .3vw, 1.2rem); max-width: 56ch; margin-bottom: 34px; }
.btk-hero-ctas{ display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; }

.btk-facts{
  margin-top: 38px;
  display: flex; flex-wrap: wrap; gap: 1px;
  background: rgba(244,239,227,.14);
  border-radius: var(--r-lg); overflow: hidden;
  max-width: 640px;
  box-shadow: var(--shadow-lg);
}
.btk-facts-item{ background: rgba(15,30,26,.82); padding: 20px 22px; flex: 1 1 140px; }
.btk-facts-item strong{ display:block; font-family: var(--font-display); font-size: 1.5rem; color: var(--accent-soft); }
.btk-facts-item span{ display:block; font-size: 12px; color: var(--muted-on-ink); margin-top: 4px; letter-spacing:.02em; }

/* ---------------------------------------------------------------------
   Page header (inner pages)
   --------------------------------------------------------------------- */
.btk-page-hero{
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: 130px; padding-bottom: 56px;
  background: linear-gradient(180deg, var(--ink), var(--ink-2));
  color: var(--cream-on-ink);
}
.btk-page-hero-img{ position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.btk-page-hero.has-image::after{
  content:""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(9,18,15,.8) 0%, rgba(9,18,15,.62) 45%, rgba(9,18,15,.94) 100%);
}
.btk-page-hero > .btk-container{ position: relative; z-index: 2; }
.btk-breadcrumb{ display:flex; gap:8px; align-items:center; font-size:12.5px; color: var(--muted-on-ink); margin-bottom: 20px; flex-wrap:wrap; }
.btk-breadcrumb a{ color: var(--muted-on-ink); }
.btk-breadcrumb a:hover{ color: var(--accent-soft); }
.btk-page-hero h1{ color: var(--cream-on-ink); margin-top: 14px; max-width: 800px; }
.btk-page-hero .btk-lede{ color: var(--muted-on-ink); margin-top: 16px; max-width: 68ch; }

/* ---------------------------------------------------------------------
   Steps / journey rail
   --------------------------------------------------------------------- */
.btk-steps-rail{
  margin-top: 46px; display: grid; gap: 38px;
  grid-template-columns: 1fr;
  position: relative;
}
@media (min-width: 860px){ .btk-steps-rail{ grid-template-columns: repeat(4, 1fr); gap: 30px; } }
.btk-step{ position: relative; padding-top: 40px; border-top: 1px solid var(--border-strong); }
/* The numeral sits as a node on the hairline: its own fill masks the rule. */
.btk-step-num{
  position: absolute; top: -20px; left: 0;
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper); border: 1px solid var(--accent-soft);
  font-family: var(--font-display); font-size: 1rem; color: var(--accent-2);
}
.btk-step h3{ font-size: 1.12rem; margin-block: 0 8px; }
.btk-step p{ color: var(--text-soft); font-size: 14.5px; line-height: 1.6; }
.btk-steps-note{ margin-top: 32px; color: var(--muted); font-size: 13.5px; font-style: italic; }

/* ---------------------------------------------------------------------
   Stat strip
   --------------------------------------------------------------------- */
.btk-stat-strip{ margin-top: 28px; display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); }
.btk-stat{ flex: 1 1 160px; padding: 26px 24px; border-right: 1px solid var(--border-strong); }
.btk-stat:last-child{ border-right: none; }
.btk-stat strong{ display:block; font-family: var(--font-display); font-size: clamp(1.8rem,1.4rem + 1.5vw,2.6rem); color: var(--ink); }
.btk-stat span{ display:block; font-size: 13px; color: var(--muted); margin-top: 4px; }

/* ---------------------------------------------------------------------
   Cards grid (trip options / benefits)
   --------------------------------------------------------------------- */
.btk-grid{ margin-top: 32px; display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px){ .btk-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .btk-grid--3{ grid-template-columns: repeat(3, 1fr); } .btk-grid--4{ grid-template-columns: repeat(4, 1fr); } }

.btk-card{
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--r);
  padding: 30px 26px; transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btk-card:hover{ border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btk-card h3{ font-size: 1.08rem; margin-bottom: 10px; }
.btk-card p{ color: var(--text-soft); font-size: 14.5px; line-height: 1.6; }
.btk-card-link{ margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--accent-2); border-bottom: 1px solid transparent; }
.btk-card-link .btk-icon{ width: 15px; height: 15px; }
.btk-card:hover .btk-card-link{ border-color: var(--accent-2); }
.btk-card-price{ margin-top: 16px; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }

/* Icon held in a ring rather than floating loose above the title. */
.btk-card-badge{
  width: 46px; height: 46px; border-radius: 50%; margin-bottom: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pearl); border: 1px solid var(--border); color: var(--accent-2);
}
.btk-card-badge .btk-icon{ width: 22px; height: 22px; }

/* ---------------------------------------------------------------------
   Photo cards — a photo panel beside the copy, two per row, so a long list
   of trip options reads as a set of real offers, not a wall of tiles.
   --------------------------------------------------------------------- */
/* Two-up only once the container is wide enough that the copy column beside
   the photo still has room to breathe. */
.btk-pgrid{ margin-top: 36px; display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 1024px){ .btk-pgrid{ grid-template-columns: repeat(2, 1fr); gap: 24px; } }

.btk-pcard{
  display: grid; grid-template-columns: 1fr; overflow: hidden;
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--r);
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
@media (min-width: 520px){ .btk-pcard{ grid-template-columns: minmax(150px, 36%) 1fr; } }
.btk-pcard:hover{ border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-md); }

.btk-pcard-media{ position: relative; background: var(--pearl); aspect-ratio: 16/10; }
.btk-pcard-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.btk-pcard:hover .btk-pcard-media img{ transform: scale(1.05); }
@media (min-width: 520px){
  .btk-pcard-media{ aspect-ratio: auto; }
  .btk-pcard-media img{ position: absolute; inset: 0; }
}
.btk-pcard-badge{
  position: absolute; left: 14px; bottom: 14px; z-index: 1;
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--accent-2); box-shadow: var(--shadow-sm);
}
.btk-pcard-badge .btk-icon{ width: 18px; height: 18px; }
.btk-pcard-media.is-empty{ display: grid; place-items: center; }
.btk-pcard-media.is-empty .btk-pcard-badge{ position: static; width: 48px; height: 48px; }

.btk-pcard-body{ padding: 22px 24px 24px; display: flex; flex-direction: column; }
.btk-pcard-body h3{ font-size: 1.1rem; line-height: 1.3; margin-bottom: 8px; }
.btk-pcard-body p{ color: var(--text-soft); font-size: 14.5px; line-height: 1.6; flex: 1; }
.btk-pcard-body .btk-card-link{ margin-top: 14px; align-self: flex-start; }
.btk-pcard:hover .btk-card-link{ border-color: var(--accent-2); }

/* ---------------------------------------------------------------------
   Reality strip — a small before/after stat pair inside a split section
   --------------------------------------------------------------------- */
.btk-reality{
  margin-top: 28px; max-width: 620px; display: flex; align-items: stretch; flex-wrap: wrap; gap: 0;
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.btk-reality-stat{ flex: 1 1 180px; padding: 22px 26px; }
.btk-reality-stat strong{ display:block; font-family: var(--font-display); font-size: clamp(1.7rem,1.35rem + 1.3vw,2.3rem); color: var(--ink); }
.btk-reality-stat span{ display:block; font-size: 13px; color: var(--muted); margin-top: 4px; }
.btk-reality-arrow{
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  padding-inline: 10px; color: var(--accent); background: var(--pearl); border-inline: 1px solid var(--border);
}
.btk-reality-arrow .btk-icon{ width: 18px; height: 18px; }
@media (max-width: 539px){
  .btk-reality{ flex-direction: column; }
  .btk-reality-arrow{ padding-block: 8px; border-inline: none; border-block: 1px solid var(--border); transform: rotate(90deg); }
}

/* ---------------------------------------------------------------------
   Editorial feature — a photo panel beside the prose, rather than a photo
   left dangling under the last paragraph.
   --------------------------------------------------------------------- */
.btk-feature{ margin-top: 34px; display: grid; gap: 30px; grid-template-columns: 1fr; }
@media (min-width: 960px){
  .btk-feature{ grid-template-columns: 5fr 7fr; gap: 56px; }
}
.btk-feature--solo{ grid-template-columns: 1fr; }
.btk-feature--solo .btk-feature-body{ max-width: 74ch; }

.btk-feature-media{ margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--pearl); }
.btk-feature-media img{ display: block; width: 100%; object-fit: cover; aspect-ratio: 16/11; }
/* The photo takes its height from the prose beside it, with a floor so a short
   section does not leave a letterboxed sliver. */
@media (min-width: 960px){
  .btk-feature-media{ min-height: 440px; }
  .btk-feature-media img{ aspect-ratio: auto; height: 100%; }
}

.btk-feature-body > p{ color: var(--text-soft); font-size: 15.5px; line-height: 1.75; margin-bottom: 18px; }
/* The opening paragraph carries the answer, so it is set a notch above the
   supporting detail that follows it. */
.btk-feature-body > p:first-of-type{ color: var(--text); font-size: 16.5px; line-height: 1.72; }
.btk-feature-body .btk-reality{ max-width: none; margin-top: 0; margin-bottom: 26px; }

.btk-quote{
  margin: 26px 0 0;
  font-family: var(--font-display); font-style: italic; font-size: clamp(1.1rem, .98rem + .5vw, 1.32rem);
  color: var(--ink); line-height: 1.45; background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 28px 26px 26px; box-shadow: var(--shadow-sm);
}
.btk-quote::before{
  content: "\201C"; display: block; font-size: 2.6rem; line-height: 1; color: var(--accent);
  margin-bottom: 6px; font-style: normal;
}
.btk-quote-attr{ display:block; margin-top: 16px; font-family: var(--font-body); font-style: normal; font-size: 12.5px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }

/* ---------------------------------------------------------------------
   Reason rows (why-us) — mark, claim and detail on one editorial line
   --------------------------------------------------------------------- */
.btk-rows{ margin-top: 40px; }
.btk-row{
  display: grid; grid-template-columns: 1fr; gap: 10px;
  padding-block: 26px; border-top: 1px solid var(--border);
}
.btk-row:last-child{ border-bottom: 1px solid var(--border); }
@media (min-width: 900px){
  .btk-row{ grid-template-columns: 92px 1.05fr 1.6fr; gap: 40px; align-items: center; padding-block: 30px; }
}
.btk-row-mark{ display: flex; align-items: center; gap: 14px; }
.btk-row-num{ font-family: var(--font-display); font-size: 1.25rem; color: var(--muted); transition: color .25s var(--ease); }
.btk-row-icon{
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pearl); border: 1px solid var(--border); color: var(--accent-2);
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.btk-row-icon .btk-icon{ width: 20px; height: 20px; }
.btk-row:hover .btk-row-icon{ background: var(--accent-soft); border-color: var(--accent); }
.btk-row:hover .btk-row-num{ color: var(--accent-2); }
.btk-row-title{ font-size: 1.12rem; line-height: 1.32; }
.btk-row-text{ color: var(--text-soft); font-size: 14.8px; line-height: 1.7; max-width: 64ch; }

/* ---------------------------------------------------------------------
   Note panel (a standalone nudge — seasonal planning, etc.)
   --------------------------------------------------------------------- */
.btk-note{
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr; gap: 16px 48px;
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: clamp(28px,3vw,44px) clamp(26px,3vw,46px);
  box-shadow: var(--shadow-sm);
}
.btk-note::before{
  content: ""; position: absolute; inset-block: 0; left: 0; width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-soft));
}
@media (min-width: 960px){ .btk-note{ grid-template-columns: 5fr 7fr; align-items: center; } }
.btk-note-main .btk-eyebrow{ margin-bottom: 12px; }
.btk-note-body{ color: var(--text-soft); font-size: 15.5px; line-height: 1.75; }

/* ---------------------------------------------------------------------
   Itinerary timeline
   --------------------------------------------------------------------- */
.btk-timeline{ margin-top: 32px; position: relative; padding-left: 28px; border-left: 1px solid var(--border-strong); }
.btk-timeline-item{ position: relative; padding-bottom: 40px; }
.btk-timeline-item:last-child{ padding-bottom: 0; }
.btk-timeline-item::before{
  content:""; position: absolute; left: -33px; top: 4px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--border-strong);
}
.btk-timeline-day{ font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); font-weight: 700; }
.btk-timeline-item h3{ font-size: 1.15rem; margin-block: 6px 8px; }
.btk-timeline-item p{ color: var(--text-soft); font-size: 15px; line-height: 1.7; max-width: 66ch; }

/* ---------------------------------------------------------------------
   Pricing tiers
   --------------------------------------------------------------------- */
.btk-tiers{ margin-top: 32px; display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 860px){ .btk-tiers{ grid-template-columns: repeat(3, 1fr); } }
.btk-tier{ background: var(--paper); border: 1px solid var(--border); border-radius: var(--r); padding: 32px 26px; }
.btk-tier h3{ font-size: 1.05rem; margin-bottom: 6px; }
.btk-tier .btk-tier-price{ font-family: var(--font-display); font-size: 1.9rem; color: var(--ink); margin-block: 10px 4px; }
.btk-tier .btk-tier-unit{ font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.btk-tier p{ margin-top: 14px; color: var(--text-soft); font-size: 14px; line-height: 1.65; }
.btk-tiers-note{ margin-top: 22px; font-size: 13px; color: var(--muted); font-style: italic; }

/* ---------------------------------------------------------------------
   Checklist (two columns)
   --------------------------------------------------------------------- */
.btk-checklist{ margin-top: 28px; display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 720px){ .btk-checklist{ grid-template-columns: 1fr 1fr; } }
.btk-checklist-col h3{ font-size: 1rem; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border-strong); }
.btk-checklist-col li{ display: flex; gap: 10px; padding-block: 8px; font-size: 14.5px; color: var(--text-soft); }
.btk-checklist-col li svg{ flex-shrink: 0; margin-top: 3px; color: var(--accent-2); width: 15px; height: 15px; }

/* ---------------------------------------------------------------------
   Table
   --------------------------------------------------------------------- */
.btk-table-wrap{ margin-top: 28px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); }
.btk-table{ width: 100%; border-collapse: collapse; min-width: 480px; }
.btk-table th{ text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 14px 20px; background: var(--pearl); }
.btk-table td{ padding: 14px 20px; font-size: 14.5px; border-top: 1px solid var(--border); color: var(--text-soft); }

/* ---------------------------------------------------------------------
   Gallery
   --------------------------------------------------------------------- */
.btk-gallery{ margin-top: 28px; display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px){ .btk-gallery{ grid-template-columns: repeat(4, 1fr); } }
.btk-gallery figure{ margin: 0; position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 4/5; background: var(--pearl); }
.btk-gallery a{ display: block; height: 100%; }
.btk-gallery img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.btk-gallery a:hover img{ transform: scale(1.05); }
.btk-gallery figcaption{
  position: absolute; inset-inline: 0; bottom: 0; padding: 32px 14px 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff;
  background: linear-gradient(0deg, rgba(10,20,17,.8), rgba(10,20,17,.34) 55%, transparent);
}

/* Full-bleed variant (photo strip breaking out of the container, edge to
   edge) — the home page gallery's "visual break" between text sections.
   Both column counts divide the template's eight-photo cap, so the strip ends
   on a full row instead of a couple of orphans. */
.btk-gallery--bleed{
  margin-top: 32px; margin-bottom: 0;
  width: 100vw; max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  gap: 8px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px){ .btk-gallery--bleed{ grid-template-columns: repeat(4, 1fr); gap: 10px; } }
.btk-gallery--bleed figure{ border-radius: 0; aspect-ratio: 1/1; }
@media (min-width: 700px){ .btk-gallery--bleed figure{ aspect-ratio: 3/2; } }
.btk-gallery-section{ overflow-x: clip; }

/* ---------------------------------------------------------------------
   FAQ — tab pills + accordion
   --------------------------------------------------------------------- */
.btk-faq-tabs{ margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.btk-faq-tab{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--r-pill); border: 1px solid var(--border-strong);
  background: var(--paper); font-size: 13.5px; font-weight: 700; color: var(--text-soft);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btk-faq-tab svg{ width: 16px; height: 16px; color: var(--accent-2); }
.btk-faq-tab:hover{ border-color: var(--accent); color: var(--ink); }
.btk-faq-tab[aria-selected="true"]{ background: var(--ink); border-color: var(--ink); color: var(--cream-on-ink); }
.btk-faq-tab[aria-selected="true"] svg{ color: var(--accent-soft); }
.btk-faq-tab .btk-faq-count{ font-size: 11px; color: var(--muted); }
.btk-faq-tab[aria-selected="true"] .btk-faq-count{ color: var(--muted-on-ink); }

.btk-faq-panel{ display: none; margin-top: 36px; max-width: 800px; }
.btk-faq-panel.is-active{ display: block; }
.btk-faq-row{ border-bottom: 1px solid var(--border); }
.btk-faq-q{
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: none; text-align: left; padding-block: 20px;
  font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); cursor: pointer;
}
.btk-faq-q svg{ flex-shrink: 0; width: 18px; height: 18px; color: var(--accent-2); transition: transform .25s var(--ease); }
.btk-faq-q[aria-expanded="true"] svg{ transform: rotate(180deg); }
.btk-faq-a{ overflow: hidden; max-height: 0; transition: max-height .3s var(--ease); }
.btk-faq-a-inner{ padding-bottom: 22px; color: var(--text-soft); font-size: 15px; line-height: 1.7; max-width: 66ch; }

/* ---------------------------------------------------------------------
   CTA band
   --------------------------------------------------------------------- */
/* Copy on one side, a photo filling the other — the photo is a grid cell, not
   a washed-out backdrop, so the closing offer reads at full strength. The
   <img> stays a direct child (no wrapper) so the live editor's injected
   "Change image" control lands on the image itself. */
.btk-cta{
  border-radius: var(--r-lg); overflow: hidden;
  display: grid; grid-template-columns: 1fr;
  background: radial-gradient(120% 140% at 15% 0%, var(--ink-3), var(--ink) 65%);
  color: var(--cream-on-ink);
}
@media (min-width: 860px){
  .btk-cta{ grid-template-columns: 1.05fr .95fr; }
  .btk-cta--solo{ grid-template-columns: 1fr; }
}
.btk-cta-body{
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(36px,4vw,64px) clamp(24px,4vw,56px);
}
.btk-cta--solo .btk-cta-body{ max-width: 760px; }
.btk-cta-img{ width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/11; }
@media (min-width: 860px){ .btk-cta-img{ aspect-ratio: auto; } }
.btk-cta .btk-eyebrow{ color: var(--accent-soft); }
.btk-cta .btk-eyebrow::before{ background: var(--accent-soft); }
.btk-cta h2{ color: var(--cream-on-ink); margin-block: 16px 14px; }
.btk-cta p{ color: var(--muted-on-ink); max-width: 52ch; }
.btk-cta .btk-eyebrow, .btk-cta .btk-btn{ align-self: flex-start; }
.btk-cta .btk-btn{ margin-top: 30px; }

/* ---------------------------------------------------------------------
   Contact page
   --------------------------------------------------------------------- */
.btk-contact-grid{ margin-top: 32px; display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 860px){ .btk-contact-grid{ grid-template-columns: repeat(3,1fr); } }
.btk-contact-card{ background: var(--paper); border: 1px solid var(--border); border-radius: var(--r); padding: 30px 26px; }
.btk-contact-card.is-primary{ background: var(--ink); color: var(--cream-on-ink); border-color: var(--ink); }
.btk-contact-card .btk-icon{ color: var(--accent-2); margin-bottom: 16px; }
.btk-contact-card.is-primary .btk-icon{ color: var(--accent-soft); }
.btk-contact-card h3{ font-size: 1.05rem; margin-bottom: 8px; }
.btk-contact-card.is-primary h3{ color: var(--cream-on-ink); }
.btk-contact-card p{ font-size: 14.5px; color: var(--text-soft); line-height: 1.6; margin-bottom: 16px; }
.btk-contact-card.is-primary p{ color: var(--muted-on-ink); }
.btk-contact-meta{ margin-top: 28px; display: flex; flex-wrap: wrap; gap: 32px; color: var(--text-soft); font-size: 14px; }
.btk-contact-meta strong{ display: block; color: var(--ink); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }

/* ---------------------------------------------------------------------
   Related pages strip
   --------------------------------------------------------------------- */
.btk-related-grid{ margin-top: 28px; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px){ .btk-related-grid{ grid-template-columns: repeat(3,1fr); } }
.btk-related-item{ display: block; padding: 22px; border: 1px solid var(--border); border-radius: var(--r); transition: border-color .2s, transform .2s; }
.btk-related-item:hover{ border-color: var(--accent); transform: translateY(-2px); }
.btk-related-item h4{ font-family: var(--font-display); font-size: 1.02rem; color: var(--ink); margin-bottom: 6px; }
.btk-related-item p{ font-size: 13.5px; color: var(--text-soft); line-height: 1.55; }

/* ---------------------------------------------------------------------
   Blog / Journal
   --------------------------------------------------------------------- */
.btk-blog-grid{ margin-top: 32px; display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 720px){ .btk-blog-grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1080px){ .btk-blog-grid{ grid-template-columns: repeat(3,1fr); } }
.btk-blog-card{ display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--paper); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.btk-blog-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btk-blog-card-media{ aspect-ratio: 16/10; background: linear-gradient(135deg, var(--pearl), var(--border)); overflow: hidden; }
.btk-blog-card-media img{ width: 100%; height: 100%; object-fit: cover; }
.btk-blog-card-body{ padding: 22px; flex: 1; display: flex; flex-direction: column; }
.btk-blog-card-date{ font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.btk-blog-card h3{ font-size: 1.1rem; line-height: 1.35; margin-bottom: 10px; }
.btk-blog-card p{ color: var(--text-soft); font-size: 14px; line-height: 1.6; flex: 1; }
.btk-blog-card-link{ margin-top: 16px; font-size: 13px; font-weight: 700; color: var(--accent-2); }
.btk-pagination{ margin-top: 40px; display: flex; justify-content: center; gap: 10px; }
.btk-pagination a, .btk-pagination span{ min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 13.5px; }
.btk-pagination .current{ background: var(--ink); color: var(--cream-on-ink); border-color: var(--ink); }

/* ---------------------------------------------------------------------
   Legal / prose fallback
   --------------------------------------------------------------------- */
.btk-prose{ max-width: 72ch; margin-top: 32px; color: var(--text-soft); font-size: 15.5px; line-height: 1.75; }
.btk-prose h2{ color: var(--ink); font-size: 1.4rem; margin-top: 36px; margin-bottom: 12px; }
.btk-prose p{ margin-bottom: 16px; }
.btk-prose ul{ list-style: disc; padding-left: 22px; margin-bottom: 16px; }
.btk-prose li{ margin-bottom: 6px; }
.btk-prose a{ color: var(--accent-2); text-decoration: underline; }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.btk-footer{ background: var(--ink); color: var(--muted-on-ink); padding-top: 72px; }
.btk-footer-top{ display: grid; gap: 40px; grid-template-columns: 1fr; padding-bottom: 56px; border-bottom: 1px solid rgba(244,239,227,.12); }
@media (min-width: 860px){ .btk-footer-top{ grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; } }
.btk-footer-brand .btk-logo{ color: var(--cream-on-ink); margin-bottom: 18px; }
.btk-footer-brand p{ font-size: 14px; line-height: 1.7; max-width: 42ch; }
.btk-footer-col h4{ font-family: var(--font-body); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-soft); margin-bottom: 18px; }
.btk-footer-col li{ margin-bottom: 11px; }
.btk-footer-col a{ font-size: 14px; transition: color .2s; }
.btk-footer-col a:hover{ color: var(--cream-on-ink); }
.btk-footer-network{ padding-block: 32px; border-bottom: 1px solid rgba(244,239,227,.12); }
.btk-footer-network h4{ font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-on-ink); margin-bottom: 14px; }
.btk-footer-network ul{ display: flex; flex-wrap: wrap; gap: 10px 26px; }
.btk-footer-network a{ font-size: 13px; }
.btk-footer-bottom{ padding-block: 26px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; font-size: 12.5px; }
.btk-footer-bottom ul{ display: flex; gap: 20px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   WhatsApp floating button
   --------------------------------------------------------------------- */
.btk-wa-float{
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ink); color: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: transform .2s var(--ease);
}
.btk-wa-float:hover{ transform: scale(1.06); }
.btk-wa-float svg{ width: 26px; height: 26px; }

/* ---------------------------------------------------------------------
   404 / search
   --------------------------------------------------------------------- */
.btk-404{ padding-top: 160px; padding-bottom: 100px; text-align: center; }
.btk-404 .btk-h1{ color: var(--accent-2); }
.btk-search-form{ display: flex; gap: 10px; margin-top: 28px; max-width: 480px; margin-inline: auto; }
.btk-search-form input{ flex: 1; padding: 14px 18px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); font-size: 15px; }