/* ==========================================================================
   TOGEAN TRAVEL — Design System
   --------------------------------------------------------------------------
   Editorial-luxury atlas. Sea-ink and warm bronze on sand-cream.
   Playfair Display (display) · Lato (text) · Cormorant Garamond (accent).

   Layout language, deliberately distinct from the sibling liveaboard theme:
   hairline rules instead of shadows, numbered section markers, an
   asymmetric hero with an overlapping "quick answer" card, and a wide
   editorial measure with a sticky in-page index on long guides.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Ink — deep sea black with a green cast */
  --tg-ink:        #14201f;
  --tg-ink-2:      #1e2e2c;
  --tg-ink-3:      #2a3d3a;

  /* Bronze — the accent, carried from the house luxury language */
  --tg-bronze:     #a8784a;
  --tg-bronze-d:   #8d6238;
  --tg-bronze-l:   #c39a6d;
  --tg-bronze-soft:#e2cdb4;

  /* Lagoon — the Togean marine secondary, used sparingly */
  --tg-lagoon:     #2c6f6a;
  --tg-lagoon-d:   #1d4f4b;

  /* Ground */
  --tg-sand:       #f5efe6;
  --tg-sand-2:     #ede3d6;
  --tg-shell:      #faf7f2;
  --tg-white:      #ffffff;

  /* Text */
  --tg-text:       #14201f;
  --tg-text-soft:  #4a5a57;
  --tg-muted:      #8a9694;
  --tg-on-dark:    #f0e9df;
  --tg-on-dark-2:  rgba(240, 233, 223, 0.72);

  /* Lines */
  --tg-rule:       rgba(20, 32, 31, 0.13);
  --tg-rule-soft:  rgba(20, 32, 31, 0.08);
  --tg-rule-dark:  rgba(240, 233, 223, 0.18);

  /* Type */
  --tg-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --tg-body:    "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --tg-accent:  "Cormorant Garamond", "Playfair Display", Georgia, serif;

  /* Rhythm */
  --tg-gutter:      1.5rem;
  --tg-max:         76rem;   /* 1216px shell   */
  --tg-max-wide:    88rem;   /* full-bleed cap */
  --tg-measure:     42rem;   /* reading column */
  --tg-header-h:    76px;

  /* Motion */
  --tg-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* A committed light design: tell the UA so native controls and scrollbars
     stay light even when the OS is in dark mode. */
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--tg-header-h) + 1.5rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--tg-sand);
  color: var(--tg-text);
  font-family: var(--tg-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--tg-display);
  color: var(--tg-ink);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 1.35rem + 3.6vw, 4rem); }
h2 { font-size: clamp(1.75rem, 1.15rem + 2.3vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); }
h4 { font-size: clamp(1.08rem, 1rem + 0.35vw, 1.25rem); }

p  { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 1.15em; padding-left: 1.25rem; }
li  { margin-bottom: 0.4em; }
li:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; color: var(--tg-ink); }

hr { border: 0; border-top: 1px solid var(--tg-rule); margin: 2.5rem 0; }

blockquote {
  margin: 2rem 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--tg-bronze);
  font-family: var(--tg-accent);
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--tg-ink-2);
}

table { border-collapse: collapse; width: 100%; }

::selection { background: var(--tg-bronze); color: var(--tg-white); }

/* Focus — never removed, always visible, never on plain mouse clicks. */
:focus-visible {
  outline: 2px solid var(--tg-bronze-d);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Skip link */
.tg-skip {
  position: absolute;
  left: 0.75rem;
  top: -100px;
  z-index: 999;
  padding: 0.7rem 1.25rem;
  background: var(--tg-ink);
  color: var(--tg-on-dark);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: top 0.2s var(--tg-ease);
}
.tg-skip:focus { top: 0.75rem; }

.tg-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---------- 3. Layout primitives ---------- */
.tg-shell {
  width: 100%;
  max-width: var(--tg-max);
  margin-inline: auto;
  padding-inline: var(--tg-gutter);
}
.tg-shell-wide { max-width: var(--tg-max-wide); }
.tg-shell-narrow { max-width: 58rem; }

.tg-section { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
.tg-section-tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }

.tg-bg-sand  { background: var(--tg-sand); }
.tg-bg-sand2 { background: var(--tg-sand-2); }
.tg-bg-shell { background: var(--tg-shell); }
.tg-bg-white { background: var(--tg-white); }
.tg-bg-ink   { background: var(--tg-ink); color: var(--tg-on-dark); }
.tg-bg-ink h1, .tg-bg-ink h2, .tg-bg-ink h3, .tg-bg-ink h4 { color: var(--tg-on-dark); }

.tg-rule-top    { border-top: 1px solid var(--tg-rule); }
.tg-rule-bottom { border-bottom: 1px solid var(--tg-rule); }

.tg-measure { max-width: var(--tg-measure); }

/* ---------- 4. Editorial typography components ---------- */

/* Eyebrow: small caps label, the theme's connective tissue. */
.tg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--tg-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tg-bronze-d);
  margin: 0 0 1rem;
}
.tg-eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--tg-bronze);
  flex: none;
}
.tg-eyebrow-center { justify-content: center; }
/* On any dark ground — the ink sections, the hero, the page header, the CTA
   band — the eyebrow steps up to the light bronze so it stays legible. */
.tg-bg-ink .tg-eyebrow,
.tg-hero .tg-eyebrow,
.tg-pagehead .tg-eyebrow,
.tg-cta .tg-eyebrow { color: var(--tg-bronze-l); }
.tg-bg-ink .tg-eyebrow::before,
.tg-hero .tg-eyebrow::before,
.tg-pagehead .tg-eyebrow::before,
.tg-cta .tg-eyebrow::before { background: var(--tg-bronze-l); }

/* Numbered section marker — 01 —— , the atlas device. */
.tg-marker {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--tg-display);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--tg-bronze-d);
  margin-bottom: 1.1rem;
}
.tg-marker::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--tg-rule);
}

/* Section lede — the paragraph under a section title. */
.tg-lede {
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem);
  line-height: 1.8;
  color: var(--tg-text-soft);
}

/* Drop-styled opening line for editorial bodies. */
.tg-prose { max-width: var(--tg-measure); color: var(--tg-text-soft); }
.tg-prose h2 { margin-top: 2.4em; }
.tg-prose h3 { margin-top: 2em; }
.tg-prose h2:first-child, .tg-prose h3:first-child { margin-top: 0; }
.tg-prose a {
  color: var(--tg-bronze-d);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 0.2s var(--tg-ease);
}
.tg-prose a:hover { color: var(--tg-ink); }
.tg-prose ul { list-style: none; padding-left: 0; }
.tg-prose ul > li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.6em;
}
.tg-prose ul > li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.72em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--tg-bronze);
}

/* Byline / updated meta strip */
.tg-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--tg-muted);
}
.tg-byline .tg-dot { color: var(--tg-bronze); }

/* ---------- 5. Buttons ---------- */
.tg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.9rem 1.9rem;
  min-height: 48px;
  font-family: var(--tg-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.28s var(--tg-ease),
              color 0.28s var(--tg-ease),
              border-color 0.28s var(--tg-ease),
              transform 0.28s var(--tg-ease);
}
.tg-btn i { font-size: 1.05rem; }

.tg-btn-primary { background: var(--tg-bronze); color: var(--tg-white); border-color: var(--tg-bronze); }
.tg-btn-primary:hover { background: var(--tg-bronze-d); border-color: var(--tg-bronze-d); transform: translateY(-2px); }

.tg-btn-ink { background: var(--tg-ink); color: var(--tg-on-dark); border-color: var(--tg-ink); }
.tg-btn-ink:hover { background: var(--tg-ink-2); border-color: var(--tg-ink-2); transform: translateY(-2px); }

.tg-btn-outline { background: transparent; color: var(--tg-ink); border-color: var(--tg-ink); }
.tg-btn-outline:hover { background: var(--tg-ink); color: var(--tg-on-dark); transform: translateY(-2px); }

.tg-btn-light { background: transparent; color: var(--tg-on-dark); border-color: rgba(240, 233, 223, 0.55); }
.tg-btn-light:hover { background: var(--tg-on-dark); color: var(--tg-ink); border-color: var(--tg-on-dark); transform: translateY(-2px); }

.tg-btn-block { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .tg-btn:hover { transform: none; }
}

/* Text link with a rule that draws on hover. */
.tg-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tg-bronze-d);
  padding-block: 0.3rem;
  position: relative;
  transition: color 0.25s var(--tg-ease);
}
.tg-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--tg-ease);
}
.tg-link:hover { color: var(--tg-ink); }
.tg-link:hover::after, .tg-link:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .tg-link::after { transition: none; }
}
.tg-bg-ink .tg-link { color: var(--tg-bronze-l); }
.tg-bg-ink .tg-link:hover { color: var(--tg-on-dark); }

/* ---------- 6. Header ---------- */
.tg-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 239, 230, 0.9);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--tg-rule-soft);
  transition: background-color 0.3s var(--tg-ease), border-color 0.3s var(--tg-ease);
}
.tg-header.is-scrolled {
  background: rgba(245, 239, 230, 0.98);
  border-bottom-color: var(--tg-rule);
}
.tg-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  height: var(--tg-header-h);
}
@media (max-width: 767px) {
  :root { --tg-header-h: 62px; }
}

.tg-brand { display: flex; align-items: center; flex: none; }
.tg-brand img { height: 46px; width: auto; max-width: 210px; object-fit: contain; }
.tg-brand-text { display: flex; flex-direction: column; line-height: 1; }
.tg-brand-name {
  font-family: var(--tg-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--tg-ink);
  white-space: nowrap;
}
.tg-brand-kicker {
  margin-top: 0.32rem;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tg-bronze-d);
}
@media (max-width: 767px) {
  .tg-brand img { height: 36px; }
  .tg-brand-name { font-size: 1.08rem; }
}

/* Desktop nav */
.tg-nav-desktop { display: none; }
.tg-nav { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.tg-nav > li { position: relative; margin: 0; }
.tg-nav > li > .tg-menu-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.6rem 0.8rem;
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tg-ink-2);
  position: relative;
  transition: color 0.22s var(--tg-ease);
}
.tg-nav > li > .tg-menu-link::after {
  content: "";
  position: absolute;
  left: 0.8rem; right: 0.8rem; bottom: 0.15rem;
  height: 1px;
  background: var(--tg-bronze);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--tg-ease);
}
.tg-nav > li > .tg-menu-link:hover,
.tg-nav > li.current-menu-item > .tg-menu-link,
.tg-nav > li.current-menu-ancestor > .tg-menu-link { color: var(--tg-bronze-d); }
.tg-nav > li > .tg-menu-link:hover::after,
.tg-nav > li.current-menu-item > .tg-menu-link::after,
.tg-nav > li.current-menu-ancestor > .tg-menu-link::after { transform: scaleX(1); }
.tg-menu-caret { font-size: 0.7rem; transition: transform 0.25s var(--tg-ease); }
.tg-nav > li:hover > .tg-menu-link .tg-menu-caret { transform: rotate(180deg); }

.tg-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 17rem;
  margin: 0;
  padding: 0.4rem 0;
  list-style: none;
  background: var(--tg-shell);
  border: 1px solid var(--tg-rule);
  border-top: 2px solid var(--tg-bronze);
  box-shadow: 0 24px 48px -24px rgba(20, 32, 31, 0.35);
  z-index: 60;
}
.tg-nav > li:hover > .tg-submenu,
.tg-nav > li:focus-within > .tg-submenu { display: block; }
.tg-submenu li { margin: 0; }
.tg-submenu .tg-menu-link {
  display: block;
  padding: 0.6rem 1.2rem;
  font-size: 0.85rem;
  color: var(--tg-text-soft);
  border-left: 2px solid transparent;
  transition: color 0.2s var(--tg-ease), border-color 0.2s var(--tg-ease), background-color 0.2s var(--tg-ease);
}
.tg-submenu .tg-menu-link:hover,
.tg-submenu .current-menu-item > .tg-menu-link {
  color: var(--tg-bronze-d);
  border-left-color: var(--tg-bronze);
  background: rgba(168, 120, 74, 0.06);
}

.tg-header-cta { display: none; flex: none; }

@media (min-width: 1100px) {
  .tg-nav-desktop { display: flex; flex: 1 1 auto; justify-content: center; }
  .tg-header-cta  { display: inline-flex; }
  .tg-burger      { display: none !important; }
}

/* Burger + drawer */
.tg-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--tg-rule);
  color: var(--tg-ink);
  font-size: 1.3rem;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.2s var(--tg-ease), border-color 0.2s var(--tg-ease);
}
.tg-burger:hover { background: rgba(168, 120, 74, 0.09); border-color: var(--tg-bronze); }

.tg-overlay {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(20, 32, 31, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--tg-ease);
}
.tg-overlay.is-open { opacity: 1; pointer-events: auto; }

.tg-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 200;
  width: min(23rem, 88vw);
  display: flex;
  flex-direction: column;
  background: var(--tg-shell);
  border-left: 1px solid var(--tg-rule);
  border-top: 3px solid var(--tg-bronze);
  transform: translateX(100%);
  transition: transform 0.34s var(--tg-ease);
  overscroll-behavior: contain;
  padding-bottom: env(safe-area-inset-bottom);
}
.tg-drawer.is-open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .tg-drawer, .tg-overlay { transition: none; }
}
.tg-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: none;
  padding: 0.85rem 1.2rem;
  border-bottom: 1px solid var(--tg-rule);
  background: rgba(168, 120, 74, 0.05);
}
.tg-drawer-head span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tg-bronze-d);
}
.tg-drawer-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.tg-drawer-foot {
  flex: none;
  padding: 1.1rem 1.2rem 1.5rem;
  border-top: 1px solid var(--tg-rule);
  background: rgba(168, 120, 74, 0.05);
}
.tg-drawer-tagline {
  margin-top: 0.9rem;
  text-align: center;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tg-muted);
}

.tg-drawer .tg-nav { flex-direction: column; align-items: stretch; }
.tg-drawer .tg-nav > li { width: 100%; }
.tg-drawer .tg-nav > li > .tg-menu-link {
  display: flex;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 0 1.2rem;
  border-bottom: 1px solid var(--tg-rule-soft);
  border-left: 2px solid transparent;
}
.tg-drawer .tg-nav > li > .tg-menu-link::after { display: none; }
.tg-drawer .tg-nav > li.current-menu-item > .tg-menu-link,
.tg-drawer .tg-nav > li.current-menu-ancestor > .tg-menu-link {
  border-left-color: var(--tg-bronze);
  background: rgba(168, 120, 74, 0.07);
}
.tg-drawer .tg-menu-caret { margin-left: auto; }
.tg-drawer .tg-submenu {
  display: none;
  position: static;
  min-width: 0;
  border: 0;
  border-top: 1px solid rgba(168, 120, 74, 0.2);
  box-shadow: none;
  background: rgba(237, 227, 214, 0.6);
}
.tg-drawer .has-children.is-expanded > .tg-submenu { display: block; }
.tg-drawer .has-children.is-expanded > .tg-menu-link .tg-menu-caret { transform: rotate(180deg); }
.tg-drawer .tg-submenu .tg-menu-link {
  min-height: 46px;
  display: flex;
  align-items: center;
  padding-left: 1.9rem;
  border-bottom: 1px solid var(--tg-rule-soft);
}

/* ---------- 7. Hero ---------- */
.tg-hero {
  position: relative;
  isolation: isolate;
  background: var(--tg-ink);
  color: var(--tg-on-dark);
  overflow: hidden;
}
.tg-hero-media { position: absolute; inset: 0; z-index: -2; }
.tg-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.tg-hero-fallback {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(90% 70% at 78% 8%, rgba(44, 111, 106, 0.55) 0%, transparent 62%),
    radial-gradient(70% 60% at 12% 92%, rgba(168, 120, 74, 0.4) 0%, transparent 60%),
    linear-gradient(160deg, #16302e 0%, #14201f 55%, #0e1a19 100%);
}
.tg-hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(20, 32, 31, 0.94) 0%, rgba(20, 32, 31, 0.6) 42%, rgba(20, 32, 31, 0.34) 100%),
    linear-gradient(to right, rgba(20, 32, 31, 0.7) 0%, rgba(20, 32, 31, 0.15) 62%, transparent 100%);
}
/* Fine grain, keeps large flat areas from banding. */
.tg-grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.28;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.tg-hero-inner {
  position: relative;
  display: grid;
  align-content: end;
  min-height: clamp(30rem, 24rem + 22vw, 44rem);
  padding-block: clamp(5rem, 3rem + 8vw, 8.5rem) clamp(4rem, 2.5rem + 6vw, 6.5rem);
}
.tg-hero-body { max-width: 46rem; }
.tg-hero h1 { color: var(--tg-on-dark); margin-bottom: 0.5em; }
.tg-hero-sub {
  font-family: var(--tg-accent);
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.7rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.45;
  color: var(--tg-bronze-l);
  margin-bottom: 1.1rem;
}
.tg-hero-desc {
  font-size: clamp(0.98rem, 0.95rem + 0.2vw, 1.08rem);
  line-height: 1.85;
  color: var(--tg-on-dark-2);
  max-width: 38rem;
}
.tg-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

/* Overlapping quick-answer card — the hero's signature move.
   The card is narrower (54rem) than the wide shell it sits in (88rem), so it
   needs its own auto side-margins to stay centred; without them it hangs off
   the left edge with ~30rem of dead space to its right. */
.tg-quickcard {
  position: relative;
  z-index: 3;
  margin-top: clamp(-4.5rem, -3rem - 3vw, -2.5rem);
  margin-inline: auto;
  background: var(--tg-shell);
  border: 1px solid var(--tg-rule);
  border-top: 3px solid var(--tg-bronze);
  padding: clamp(1.6rem, 1.1rem + 1.8vw, 2.75rem);
  max-width: 54rem;
}
.tg-quickcard h2 {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  letter-spacing: 0.01em;
  margin-bottom: 0.7rem;
}
.tg-quickcard p { color: var(--tg-text-soft); margin-bottom: 0; }

/* ---------- 8. Page header (inner pages) ---------- */
.tg-pagehead {
  position: relative;
  isolation: isolate;
  background: var(--tg-ink);
  color: var(--tg-on-dark);
  overflow: hidden;
}
.tg-pagehead-inner { padding-block: clamp(3.5rem, 2.5rem + 6vw, 7rem); }
.tg-pagehead h1 { color: var(--tg-on-dark); max-width: 24ch; }
.tg-pagehead-sub {
  max-width: 44rem;
  font-size: clamp(0.98rem, 0.95rem + 0.2vw, 1.1rem);
  line-height: 1.85;
  color: var(--tg-on-dark-2);
}

.tg-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(240, 233, 223, 0.6);
}
.tg-crumbs li { margin: 0; display: inline-flex; align-items: center; gap: 0.45rem; }
.tg-crumbs a { transition: color 0.2s var(--tg-ease); }
.tg-crumbs a:hover { color: var(--tg-bronze-l); }
.tg-crumbs [aria-current] { color: var(--tg-bronze-l); }
.tg-crumbs .tg-sep { color: rgba(240, 233, 223, 0.35); }

/* Photo credit, pinned to the bottom-right of a page header. */
.tg-photo-credit {
  position: absolute;
  right: max(1rem, env(safe-area-inset-right));
  bottom: 0.7rem;
  z-index: 2;
  margin: 0;
  max-width: min(90%, 32rem);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-align: right;
  color: rgba(240, 233, 223, 0.42);
}
.tg-photo-credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.16em;
  transition: color 0.2s var(--tg-ease);
}
.tg-photo-credit a:hover { color: rgba(240, 233, 223, 0.85); }
@media (max-width: 600px) {
  .tg-photo-credit { position: static; text-align: left; max-width: none; padding: 0 var(--tg-gutter) 0.9rem; }
}

/* ---------- 9. Cards & grids ---------- */
.tg-grid { display: grid; gap: clamp(1.1rem, 0.8rem + 1.2vw, 2rem); }
.tg-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.tg-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.tg-grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); }

/* Quantity queries.
   `auto-fit` collapses the empty tracks and lets the surviving items stretch
   across the whole row — great when the grid is full, disastrous when it
   holds one item, because a 4/3 media card becomes a billboard. When a grid
   carries fewer items than its nominal column count, cap the track instead of
   letting it grow, and pack the row from the left.
   Browsers without :has() simply keep the old behaviour, which only ever
   looks wrong on an under-filled grid. */
.tg-grid-2:has(> :last-child:nth-child(1)),
.tg-grid-3:has(> :last-child:nth-child(-n + 2)),
.tg-grid-4:has(> :last-child:nth-child(-n + 3)) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 24rem));
  justify-content: start;
}

.tg-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--tg-white);
  border: 1px solid var(--tg-rule);
  padding: clamp(1.4rem, 1.1rem + 0.9vw, 2rem);
  transition: border-color 0.3s var(--tg-ease), transform 0.3s var(--tg-ease), box-shadow 0.3s var(--tg-ease);
}
a.tg-card:hover, .tg-card-hover:hover {
  border-color: var(--tg-bronze);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -28px rgba(20, 32, 31, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  a.tg-card:hover, .tg-card-hover:hover { transform: none; }
}
/* Card headings sit a step below section h3s: in a 3–4 column grid the
   measure is short, and the display face needs the tighter size to avoid
   four-line titles. */
.tg-card h3 {
  font-size: clamp(1.08rem, 1.02rem + 0.28vw, 1.28rem);
  line-height: 1.28;
  margin-bottom: 0.55rem;
}
.tg-card p  { color: var(--tg-text-soft); font-size: 0.95rem; }
/* Push the card's read-more to the bottom so the row shares one baseline,
   however uneven the copy above it is. */
.tg-card-more { margin-top: auto; padding-top: 1.15rem; align-self: flex-start; }
.tg-media-card .tg-media-body { display: flex; flex-direction: column; flex: 1 1 auto; }

.tg-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem; height: 2.9rem;
  margin-bottom: 1.1rem;
  border: 1px solid var(--tg-bronze);
  color: var(--tg-bronze-d);
  font-size: 1.3rem;
  flex: none;
}
.tg-card-num {
  font-family: var(--tg-display);
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1;
  color: var(--tg-bronze-soft);
  margin-bottom: 0.7rem;
}

/* Card on the dark ground */
.tg-bg-ink .tg-card {
  background: rgba(240, 233, 223, 0.04);
  border-color: var(--tg-rule-dark);
}
.tg-bg-ink .tg-card p { color: var(--tg-on-dark-2); }
.tg-bg-ink .tg-card-icon { border-color: rgba(195, 154, 109, 0.55); color: var(--tg-bronze-l); }
.tg-bg-ink .tg-card-num { color: rgba(195, 154, 109, 0.45); }

/* Media card — image over text */
.tg-media-card { padding: 0; overflow: hidden; }
.tg-media-card .tg-media-figure {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--tg-sand-2);
  overflow: hidden;
}
.tg-media-card .tg-media-figure img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--tg-ease);
}
.tg-media-card:hover .tg-media-figure img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .tg-media-card:hover .tg-media-figure img { transform: none; }
}
.tg-media-card .tg-media-body { padding: clamp(1.3rem, 1rem + 0.8vw, 1.75rem); }
/* No-image state. Reads as a deliberate plate — flat ground, a hairline
   inset frame and a legible bronze mark — rather than a failed <img>. */
.tg-media-placeholder {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--tg-sand-2);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(168, 120, 74, 0.05) 0 1px,
    transparent 1px 9px
  );
  color: var(--tg-bronze);
  font-size: 2.1rem;
}
.tg-media-placeholder::after {
  content: "";
  position: absolute;
  inset: 0.85rem;
  border: 1px solid rgba(168, 120, 74, 0.28);
  pointer-events: none;
}
.tg-media-placeholder .ti { position: relative; z-index: 1; opacity: 0.75; }

/* ---------- 10. Split (text + media) ---------- */
.tg-split {
  display: grid;
  gap: clamp(1.8rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .tg-split { grid-template-columns: 1fr 1fr; }
  .tg-split-reverse .tg-split-media { order: -1; }
}
.tg-split-media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--tg-sand-2);
  overflow: hidden;
}
.tg-split-media img { width: 100%; height: 100%; object-fit: cover; }
/* Bronze rule offset behind the image — quiet depth without a drop shadow. */
.tg-split-media::before {
  content: "";
  position: absolute;
  inset: auto -0.9rem -0.9rem auto;
  width: 62%; height: 62%;
  border-right: 1px solid var(--tg-bronze);
  border-bottom: 1px solid var(--tg-bronze);
  z-index: -1;
}
.tg-split-media-wrap { position: relative; }

/* ---------- 10b. Mosaic ---------- */
.tg-mosaic-head {
  display: grid;
  gap: 1.25rem 3rem;
  align-items: end;
  margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}
@media (min-width: 900px) {
  .tg-mosaic-head { grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); }
}

/* Two rows: a dominant 7/12 tile beside a 5/12, then three equal 4/12 tiles.
   The asymmetry is the point — an even grid would read as a product listing. */
.tg-mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.6rem, 0.4rem + 0.8vw, 1.1rem);
}
.tg-mosaic-tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  background: var(--tg-sand-2);
  grid-column: span 12;
  aspect-ratio: 4 / 3;
}
@media (min-width: 900px) {
  /* The wide tile sets the row height; its narrower neighbour stretches to
     match rather than keeping its own ratio, which would leave a gap beneath
     it because the two tiles differ in width. */
  .tg-mosaic-tile:nth-child(1) { grid-column: span 7; aspect-ratio: 16 / 11; }
  .tg-mosaic-tile:nth-child(2) { grid-column: span 5; aspect-ratio: auto; height: 100%; }
  .tg-mosaic-tile:nth-child(3),
  .tg-mosaic-tile:nth-child(4),
  .tg-mosaic-tile:nth-child(5) { grid-column: span 4; aspect-ratio: 4 / 5; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .tg-mosaic-tile { grid-column: span 6; aspect-ratio: 4 / 3; }
  .tg-mosaic-tile:nth-child(1) { grid-column: span 12; aspect-ratio: 16 / 9; }
}
.tg-mosaic-tile img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.7s var(--tg-ease);
}
.tg-mosaic-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(20, 32, 31, 0.88) 0%, rgba(20, 32, 31, 0.28) 42%, rgba(20, 32, 31, 0.06) 100%);
  transition: opacity 0.4s var(--tg-ease);
}
a.tg-mosaic-tile:hover img { transform: scale(1.05); }
a.tg-mosaic-tile:focus-visible { outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) {
  .tg-mosaic-tile img { transition: none; }
  a.tg-mosaic-tile:hover img { transform: none; }
}
.tg-mosaic-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: block;
  padding: clamp(1rem, 0.8rem + 0.8vw, 1.6rem);
  color: var(--tg-on-dark);
}
.tg-mosaic-title {
  display: block;
  font-family: var(--tg-display);
  font-size: clamp(1.15rem, 1.02rem + 0.6vw, 1.6rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.tg-mosaic-desc {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.86rem;
  line-height: 1.6;
  color: rgba(240, 233, 223, 0.78);
  max-width: 32ch;
}
.tg-mosaic-tile .tg-media-placeholder { z-index: -2; }

/* ---------- 10c. Statement band ---------- */
.tg-statement {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--tg-ink);
  color: var(--tg-on-dark);
}
.tg-statement-media { position: absolute; inset: 0; z-index: -2; }
.tg-statement-media img { width: 100%; height: 100%; object-fit: cover; }
.tg-statement-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 90% at 50% 50%, rgba(20, 32, 31, 0.55) 0%, rgba(20, 32, 31, 0.82) 100%);
}
.tg-statement-inner {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: clamp(22rem, 16rem + 16vw, 34rem);
  padding-block: clamp(4rem, 3rem + 5vw, 7rem);
}
.tg-statement-short .tg-statement-inner { min-height: clamp(16rem, 12rem + 10vw, 24rem); }
.tg-statement-quote {
  margin: 0;
  padding: 0;
  border: 0;
  max-width: 24ch;
  font-family: var(--tg-accent);
  font-size: clamp(1.75rem, 1.15rem + 2.6vw, 3.4rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.24;
  color: var(--tg-on-dark);
  text-wrap: balance;
}
.tg-statement-attr {
  margin: 1.75rem 0 0;
  font-family: var(--tg-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tg-bronze-l);
}

/* ---------- 11. Stats ---------- */
.tg-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 1px;
  background: var(--tg-rule);
  border: 1px solid var(--tg-rule);
}
.tg-stat { background: var(--tg-sand); padding: clamp(1.4rem, 1rem + 1.2vw, 2.2rem) 1.25rem; text-align: center; }
.tg-stat-value {
  font-family: var(--tg-display);
  font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.9rem);
  font-weight: 500;
  line-height: 1;
  color: var(--tg-bronze-d);
  font-variant-numeric: tabular-nums;
}
.tg-stat-label {
  margin-top: 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tg-text-soft);
}
.tg-bg-ink .tg-stats { background: var(--tg-rule-dark); border-color: var(--tg-rule-dark); }
.tg-bg-ink .tg-stat { background: var(--tg-ink); }
.tg-bg-ink .tg-stat-value { color: var(--tg-bronze-l); }
.tg-bg-ink .tg-stat-label { color: var(--tg-on-dark-2); }

/* ---------- 12. Timeline (itinerary days / process steps) ---------- */
.tg-timeline { list-style: none; margin: 0; padding: 0; }
.tg-timeline > li {
  position: relative;
  margin: 0;
  padding: 0 0 clamp(2rem, 1.5rem + 1.5vw, 3rem) clamp(2.5rem, 2rem + 2vw, 4rem);
  border-left: 1px solid var(--tg-rule);
}
.tg-timeline > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.tg-timeline > li::before {
  content: "";
  position: absolute;
  left: -5px; top: 0.55rem;
  width: 9px; height: 9px;
  background: var(--tg-bronze);
  border-radius: 50%;
}
.tg-timeline-step {
  display: block;
  font-family: var(--tg-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tg-bronze-d);
  margin-bottom: 0.5rem;
}
.tg-timeline h3 { margin-bottom: 0.6rem; }
.tg-timeline p  { color: var(--tg-text-soft); max-width: 46rem; }

/* ---------- 13. FAQ (categorised) ---------- */
.tg-faq-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: 2.25rem;
}
.tg-faq-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.55rem 1.15rem;
  background: transparent;
  border: 1px solid var(--tg-rule);
  color: var(--tg-ink-2);
  font-family: var(--tg-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.24s var(--tg-ease), color 0.24s var(--tg-ease), border-color 0.24s var(--tg-ease);
}
.tg-faq-pill i { font-size: 1.05rem; color: var(--tg-bronze-d); transition: color 0.24s var(--tg-ease); }
.tg-faq-pill:hover { border-color: var(--tg-bronze); color: var(--tg-bronze-d); }
.tg-faq-pill.is-active {
  background: var(--tg-ink);
  border-color: var(--tg-ink);
  color: var(--tg-on-dark);
}
.tg-faq-pill.is-active i { color: var(--tg-bronze-l); }

.tg-faq-list { border-top: 1px solid var(--tg-rule); }
.tg-faq-item { border-bottom: 1px solid var(--tg-rule); }
.tg-faq-item > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.35rem 0.25rem;
  cursor: pointer;
  list-style: none;
  transition: color 0.22s var(--tg-ease);
}
.tg-faq-item > summary::-webkit-details-marker { display: none; }
.tg-faq-item > summary::marker { content: ""; }
.tg-faq-item > summary:hover { color: var(--tg-bronze-d); }
.tg-faq-q {
  margin: 0;
  font-family: var(--tg-display);
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.15rem);
  font-weight: 500;
  line-height: 1.45;
  color: inherit;
  min-width: 0;
}
.tg-faq-sign {
  flex: none;
  position: relative;
  width: 1.6rem; height: 1.6rem;
  margin-top: 0.15rem;
  border: 1px solid var(--tg-bronze);
  color: var(--tg-bronze-d);
}
.tg-faq-sign::before, .tg-faq-sign::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: currentColor;
  transform-origin: center;
  transition: transform 0.28s var(--tg-ease), opacity 0.28s var(--tg-ease);
}
.tg-faq-sign::before { width: 0.7rem; height: 1px; transform: translate(-50%, -50%); }
.tg-faq-sign::after  { width: 1px; height: 0.7rem; transform: translate(-50%, -50%); }
.tg-faq-item[open] .tg-faq-sign::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .tg-faq-sign::before, .tg-faq-sign::after { transition: none; }
}
.tg-faq-a {
  padding: 0 2.85rem 1.6rem 0.25rem;
  max-width: 52rem;
  color: var(--tg-text-soft);
  font-size: 0.97rem;
  line-height: 1.85;
}
.tg-faq-a a { color: var(--tg-bronze-d); text-decoration: underline; text-underline-offset: 0.18em; }

/* ---------- 14. Comparison table ---------- */
.tg-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--tg-rule); }
.tg-table { min-width: 40rem; background: var(--tg-white); }
.tg-table th, .tg-table td {
  padding: 1rem 1.15rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--tg-rule-soft);
  font-size: 0.93rem;
}
.tg-table thead th {
  background: var(--tg-sand-2);
  font-family: var(--tg-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tg-ink);
  border-bottom-color: var(--tg-rule);
}
/* Row headers stay narrow: with four comparison columns a wide first column
   just pushes the data apart. */
.tg-table tbody th { font-weight: 700; color: var(--tg-ink); width: 20%; min-width: 9rem; }
.tg-table td { color: var(--tg-text-soft); }
.tg-table tbody tr:last-child th, .tg-table tbody tr:last-child td { border-bottom: 0; }
.tg-table-num { font-variant-numeric: tabular-nums; }

/* ---------- 15. In-page index (long guides) ---------- */
.tg-guide-layout { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); }
@media (min-width: 1000px) {
  .tg-guide-layout { grid-template-columns: minmax(0, 1fr) 16rem; align-items: start; }
}
.tg-guide-index {
  position: sticky;
  top: calc(var(--tg-header-h) + 1.5rem);
  border-top: 2px solid var(--tg-bronze);
  padding-top: 1.1rem;
}
.tg-guide-index h2 {
  font-family: var(--tg-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tg-bronze-d);
  margin-bottom: 0.9rem;
}
.tg-guide-index ol { list-style: none; margin: 0; padding: 0; counter-reset: idx; }
.tg-guide-index li { margin-bottom: 0.15rem; counter-increment: idx; }
.tg-guide-index a {
  display: flex;
  gap: 0.7rem;
  padding: 0.42rem 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--tg-text-soft);
  transition: color 0.2s var(--tg-ease);
}
.tg-guide-index a::before {
  content: counter(idx, decimal-leading-zero);
  flex: none;
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--tg-bronze-soft);
  padding-top: 0.18em;
}
.tg-guide-index a:hover { color: var(--tg-bronze-d); }
@media (max-width: 999px) {
  .tg-guide-index { position: static; }
}

/* ---------- 15b. Editorial split (side-by-side body) ---------- */
.tg-esplit-head {
  display: grid;
  gap: 1.25rem 3rem;
  align-items: end;
  margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}
@media (min-width: 900px) {
  .tg-esplit-head { grid-template-columns: minmax(0, 1fr) minmax(0, 36rem); }
}

/* Section lead photo. Full content width so its edges land on the same two
   verticals as the row hairlines below it, and shallow — a 16/9 band here would
   out-weigh the statement image that already sits directly above the section. */
.tg-esplit-lead {
  margin: 0 0 clamp(2rem, 1.5rem + 2vw, 3.5rem);
  overflow: hidden;
  background: var(--tg-sand-2);
  aspect-ratio: 16 / 9;
}
@media (min-width: 700px) {
  .tg-esplit-lead { aspect-ratio: 21 / 9; }
}
.tg-esplit-lead img { width: 100%; height: 100%; object-fit: cover; }

/* Compact in-page nav. Horizontal so it costs a line, not a column. */
.tg-chipnav {
  border-top: 1px solid var(--tg-rule);
  border-bottom: 1px solid var(--tg-rule);
  padding-block: 1.15rem;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}
.tg-chipnav-title {
  font-family: var(--tg-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--tg-bronze-d);
  margin: 0 0 0.85rem;
}
.tg-chipnav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: chip;
}
.tg-chipnav-list li { margin: 0; }
.tg-chipnav-list a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--tg-rule);
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--tg-text-soft);
  transition: color 0.2s var(--tg-ease), border-color 0.2s var(--tg-ease), background-color 0.2s var(--tg-ease);
}
.tg-chipnav-list a:hover {
  color: var(--tg-bronze-d);
  border-color: var(--tg-bronze);
  background: rgba(168, 120, 74, 0.06);
}
.tg-chipnav-n {
  font-variant-numeric: tabular-nums;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--tg-bronze-soft);
}

/* No grid gap: each row supplies its own top padding below, and having both
   double-spaced every section. */
.tg-esplit { display: grid; gap: 0; }

.tg-esplit-row { display: grid; gap: clamp(1.25rem, 1rem + 1.5vw, 3rem); }
@media (min-width: 1000px) {
  /* One rail, never mirrored. Alternating the aside reads as movement across a
     three-block feature; across a guide this long it leaves the page with no
     vertical axis at all — every number, heading and image begins at a
     different x, and the edge the reader scans down disappears. A fixed rail
     rather than a fraction holds that axis steady at every viewport, so the
     headings wrap the same way and every image is the same size. */
  .tg-esplit-row {
    grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
    column-gap: clamp(2rem, 1rem + 2.5vw, 3.5rem);
  }
  /* The aside has to span the row for the sticky heading to have anywhere to
     travel. Pinned to `start` it collapses to content height, and sticky then
     silently does nothing at all. */
  .tg-esplit-aside { align-self: stretch; }
}

/* The heading travels with the reader through a long block. */
.tg-esplit-sticky { position: static; }
@media (min-width: 1000px) {
  .tg-esplit-sticky {
    position: sticky;
    top: calc(var(--tg-header-h) + 2rem);
    padding-bottom: 1rem;
  }
}
.tg-esplit-h {
  /* Sized to the rail, and kept clear of the 1.6rem h3s running in the body
     beside it so the hierarchy still reads at a glance. */
  font-size: clamp(1.45rem, 1.1rem + 1.3vw, 2rem);
  line-height: 1.18;
  margin-bottom: 0;
  /* The rail is the measure now — a second cap in ch only re-introduces a
     ragged edge that lines up with nothing. */
  max-width: none;
}
.tg-esplit-figure {
  margin: 1.5rem 0 0;
  overflow: hidden;
  background: var(--tg-sand-2);
  aspect-ratio: 4 / 3;
}
.tg-esplit-figure img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1000px) {
  /* Landscape, not portrait: the aside must never out-grow the prose beside
     it, or the row inherits the image's height and the page gets longer. */
  .tg-esplit-figure { aspect-ratio: 16 / 10; }
}

/* The body track is wider than a comfortable line at the top breakpoints, and
   the template clears .tg-prose's own cap to let sub-blocks fill the column —
   so without this the guide sets at roughly 100 characters a line, which is
   most of why a long section reads as a wall. Same measure as every other
   reading column in the theme. */
.tg-esplit-body { max-width: var(--tg-measure); }
.tg-esplit-body > * + * { margin-top: 1.5rem; }
.tg-esplit-sub { padding-top: 0.5rem; }
.tg-esplit-sub h3 { margin-bottom: 0.7rem; }

/* Hairline between rows, so the rail reads as a rhythm not a list. */
.tg-esplit-row + .tg-esplit-row {
  border-top: 1px solid var(--tg-rule-soft);
  margin-top: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  padding-top: clamp(2rem, 1.6rem + 1.6vw, 3rem);
}

/* ---------- 16. Featured-in strip ---------- */
.tg-featured {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 0.8rem + 2.4vw, 3.25rem);
}
.tg-featured-item {
  font-family: var(--tg-display);
  font-size: clamp(0.85rem, 0.8rem + 0.35vw, 1.05rem);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--tg-muted);
  white-space: nowrap;
  transition: color 0.25s var(--tg-ease);
}
.tg-featured-item:hover { color: var(--tg-ink); }

/* ---------- 16b. Editorial link list ("You may also like") ---------- */
.tg-linklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tg-rule); }
.tg-linklist > li { margin: 0; border-bottom: 1px solid var(--tg-rule); }
.tg-linklist > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0.25rem;
  transition: color 0.22s var(--tg-ease), padding-left 0.28s var(--tg-ease);
}
.tg-linklist > li > a:hover { color: var(--tg-bronze-d); padding-left: 0.75rem; }
@media (prefers-reduced-motion: reduce) {
  .tg-linklist > li > a { transition: color 0.22s var(--tg-ease); }
  .tg-linklist > li > a:hover { padding-left: 0.25rem; }
}
.tg-linklist-text { min-width: 0; }
.tg-linklist-title {
  display: block;
  font-family: var(--tg-display);
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.15rem);
  line-height: 1.4;
}
.tg-linklist-desc {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.88rem;
  color: var(--tg-text-soft);
}
.tg-linklist > li > a > .ti { flex: none; color: var(--tg-bronze); font-size: 1.3rem; }

/* ---------- 16b2. Journal search bar ---------- */
.tg-journal-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.75rem;
  margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--tg-rule);
}
.tg-search {
  display: flex;
  gap: 0.6rem;
  flex: 1 1 22rem;
  max-width: 34rem;
  min-width: 0;
}
.tg-search .tg-input { flex: 1 1 auto; min-width: 0; }
/* Drop the WebKit clear affordance: the form has its own explicit
   "Clear search" link, and two clears next to each other read as a bug. */
.tg-search input[type="search"]::-webkit-search-decoration,
.tg-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.tg-search .tg-btn { flex: none; }

.tg-journal-count {
  margin: 0;
  font-size: 0.85rem;
  color: var(--tg-text-soft);
  min-width: 0;
}
.tg-journal-clear {
  display: inline-block;
  margin-left: 0.6rem;
  color: var(--tg-bronze-d);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  transition: color 0.2s var(--tg-ease);
}
.tg-journal-clear:hover { color: var(--tg-ink); }

@media (max-width: 560px) {
  .tg-search { flex-basis: 100%; max-width: none; }
  .tg-search .tg-btn { padding-inline: 1.25rem; }
}

/* ---------- 16c. Pagination ---------- */
.tg-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tg-pagination li { margin: 0; }
.tg-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: 0.9rem;
  border: 1px solid var(--tg-rule);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.2s var(--tg-ease), color 0.2s var(--tg-ease), border-color 0.2s var(--tg-ease);
}
.tg-pagination a.page-numbers:hover { border-color: var(--tg-bronze); color: var(--tg-bronze-d); }
.tg-pagination .page-numbers.current { background: var(--tg-ink); border-color: var(--tg-ink); color: var(--tg-on-dark); }

/* ---------- 17. Contact form ---------- */
.tg-field { margin-bottom: 1.15rem; }
.tg-label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tg-ink-2);
}
.tg-input, .tg-textarea, .tg-select {
  width: 100%;
  padding: 0.85rem 1rem;
  min-height: 48px;
  background: var(--tg-white);
  border: 1px solid var(--tg-rule);
  border-radius: 0;
  color: var(--tg-text);
  font-family: var(--tg-body);
  font-size: 0.95rem;
  line-height: 1.5;
  transition: border-color 0.22s var(--tg-ease), box-shadow 0.22s var(--tg-ease);
}
.tg-textarea { min-height: 8.5rem; resize: vertical; }
.tg-select { appearance: none; background-image: none; color: var(--tg-text); }
.tg-input::placeholder, .tg-textarea::placeholder { color: var(--tg-muted); }
.tg-input:hover, .tg-textarea:hover, .tg-select:hover { border-color: var(--tg-bronze-soft); }
/* Transparent outline rather than `none`, so Windows high-contrast mode still
   draws a focus ring while the designed ring below carries normal cases. */
.tg-input:focus-visible, .tg-textarea:focus-visible, .tg-select:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--tg-bronze);
  box-shadow: 0 0 0 3px rgba(168, 120, 74, 0.18);
}
.tg-help { margin-top: 0.4rem; font-size: 0.78rem; color: var(--tg-muted); }
.tg-form-row { display: grid; gap: 0 1.15rem; }
@media (min-width: 640px) { .tg-form-row { grid-template-columns: 1fr 1fr; } }

/* ---------- 18. Contact detail rows ---------- */
.tg-detail-list { list-style: none; margin: 0; padding: 0; }
.tg-detail-list > li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.05rem 0;
  margin: 0;
  border-bottom: 1px solid var(--tg-rule-soft);
}
.tg-detail-list > li:last-child { border-bottom: 0; }
.tg-detail-list i { flex: none; font-size: 1.15rem; color: var(--tg-bronze-d); margin-top: 0.2rem; }
.tg-detail-k {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tg-muted);
  margin-bottom: 0.2rem;
}
.tg-detail-v { display: block; color: var(--tg-ink); font-size: 0.98rem; word-break: break-word; }
a.tg-detail-v:hover { color: var(--tg-bronze-d); }

/* ---------- 19. CTA band ---------- */
.tg-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--tg-ink);
  color: var(--tg-on-dark);
}
.tg-cta-bg { position: absolute; inset: 0; z-index: -2; }
.tg-cta-bg img { width: 100%; height: 100%; object-fit: cover; }
.tg-cta-scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, rgba(20, 32, 31, 0.95) 12%, rgba(20, 32, 31, 0.72) 100%);
}
.tg-cta-inner { padding-block: clamp(3.5rem, 2.5rem + 5vw, 6rem); text-align: center; }
.tg-cta h2 { color: var(--tg-on-dark); max-width: 20ch; margin-inline: auto; }
.tg-cta p { max-width: 44rem; margin-inline: auto; color: var(--tg-on-dark-2); }
.tg-cta-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; margin-top: 2rem; }

/* ---------- 20. Footer ---------- */
.tg-footer { background: var(--tg-ink); color: var(--tg-on-dark-2); }
.tg-footer-top {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
}
@media (min-width: 860px) {
  .tg-footer-top { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; }
}
.tg-footer h2, .tg-footer h3, .tg-footer h4 { color: var(--tg-on-dark); }
.tg-footer-col-title {
  font-family: var(--tg-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tg-bronze-l);
  margin-bottom: 1.1rem;
}
.tg-footer-links { list-style: none; margin: 0; padding: 0; }
.tg-footer-links li { margin-bottom: 0.55rem; }
.tg-footer-links a {
  font-size: 0.9rem;
  color: var(--tg-on-dark-2);
  transition: color 0.2s var(--tg-ease);
}
.tg-footer-links a:hover { color: var(--tg-bronze-l); }
.tg-footer-brand img { height: 52px; width: auto; max-width: 220px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.9; }
.tg-footer-tagline { max-width: 30rem; font-size: 0.92rem; line-height: 1.85; }

.tg-footer-mid {
  border-top: 1px solid var(--tg-rule-dark);
  padding-block: clamp(2rem, 1.5rem + 2vw, 3rem);
  text-align: center;
}
.tg-footer-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 1rem + 2.5vw, 2.75rem);
}
.tg-footer-logos img {
  height: 38px; width: auto; max-width: 150px; object-fit: contain;
  opacity: 0.6;
  transition: opacity 0.25s var(--tg-ease);
}
.tg-footer-logos a:hover img { opacity: 1; }

.tg-footer-bottom {
  border-top: 1px solid var(--tg-rule-dark);
  padding-block: 1.5rem 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  font-size: 0.8rem;
  color: rgba(240, 233, 223, 0.55);
}
.tg-footer-legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1.15rem; list-style: none; margin: 0; padding: 0; }
.tg-footer-legal a:hover { color: var(--tg-bronze-l); }

/* ---------- 21. Floating actions ---------- */
.tg-float-wa {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 150;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  background: #25d366;
  color: #fff;
  font-size: 1.7rem;
  box-shadow: 0 12px 28px -12px rgba(20, 32, 31, 0.6);
  transition: transform 0.25s var(--tg-ease);
}
.tg-float-wa:hover { transform: translateY(-3px); }
.tg-float-top {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + 66px);
  z-index: 149;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: var(--tg-ink);
  color: var(--tg-on-dark);
  border: 0;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--tg-ease), transform 0.25s var(--tg-ease);
}
.tg-float-top.is-visible { opacity: 1; pointer-events: auto; }
.tg-float-top:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
  .tg-float-wa:hover, .tg-float-top:hover { transform: none; }
}

/* ---------- 22. Scroll reveal ---------- */
.tg-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--tg-ease), transform 0.7s var(--tg-ease);
}
.tg-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .tg-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- 23. Utilities ---------- */
.tg-center { text-align: center; }
.tg-center .tg-lede, .tg-center .tg-measure { margin-inline: auto; }
.tg-stack-sm > * + * { margin-top: 0.75rem; }
.tg-stack   > * + * { margin-top: 1.5rem; }
.tg-stack-lg > * + * { margin-top: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.tg-mt-0 { margin-top: 0; }
.tg-mb-0 { margin-bottom: 0; }
.tg-nowrap { white-space: nowrap; }
.tg-tabular { font-variant-numeric: tabular-nums; }
.tg-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.tg-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--tg-bronze);
  color: var(--tg-bronze-d);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.tg-bg-ink .tg-pill { border-color: rgba(195, 154, 109, 0.5); color: var(--tg-bronze-l); }

/* Body scroll lock while the drawer is open. */
body.tg-locked { overflow: hidden; }