/* ==========================================================================
   Travel Fitoor — Elementor bridge
   The design system in travel-fitoor.css targets hand-written markup. Elementor
   widgets emit their own DOM, and a widget's CSS class lands on the outer
   .elementor-element wrapper, not on the <a>/<h2>/<img> inside it. This file
   maps one onto the other so the components keep the brand styling while
   staying fully editable in the Elementor UI.
   Load order: travel-fitoor.css -> this file.
   ========================================================================== */

/* ---------- Reset Elementor/Hello defaults that fight the system ---------- */
.elementor-widget:not(:last-child){ margin-block-end:0; }
.tf-header .elementor-widget-container,
.tf-footer .elementor-widget-container{ line-height:inherit; }

/* ---------- Buttons ---------- */
.tf-btn > .elementor-widget-container > .elementor-button,
.tf-btn .elementor-button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 24px;
  border-radius:var(--tf-r-btn);
  background:var(--tf-forest); color:var(--tf-ivory);
  border:1px solid var(--tf-forest);
  font-family:'Manrope',sans-serif; font-size:.9375rem; font-weight:600;
  letter-spacing:.02em; text-decoration:none; fill:currentColor;
  transition:background var(--tf-base) var(--tf-ease-soft),
             color var(--tf-base) var(--tf-ease-soft),
             border-color var(--tf-base) var(--tf-ease-soft),
             box-shadow var(--tf-base) var(--tf-ease),
             transform var(--tf-base) var(--tf-ease);
}
.tf-btn .elementor-button:hover,
.tf-btn .elementor-button:focus{
  background:var(--tf-terracotta); border-color:var(--tf-terracotta);
  color:#FFF6EC; box-shadow:var(--tf-shadow);
}
.tf-btn .elementor-button:active{ transform:translateY(1px); }
.tf-btn--acc .elementor-button{ background:var(--tf-terracotta); border-color:var(--tf-terracotta); color:#FFF6EC; }
.tf-btn--acc .elementor-button:hover{ background:var(--tf-forest); border-color:var(--tf-forest); color:var(--tf-ivory); }
.tf-btn--sec .elementor-button{ background:transparent; color:var(--tf-forest); border-color:var(--tf-forest); }
.tf-btn--sec .elementor-button:hover{ background:var(--tf-forest); color:var(--tf-ivory); }
.tf-btn--light .elementor-button{ background:transparent; color:#F6EEE1; border-color:rgba(246,238,225,.55); }
.tf-btn--light .elementor-button:hover{ background:#F6EEE1; color:var(--tf-forest-deep); border-color:#F6EEE1; }
.tf-header__cta .elementor-button{ min-height:44px; padding:0 18px; font-size:.875rem; }

/* ---------- Header ---------- */
.tf-header .tf-logo .elementor-heading-title{
  display:inline-flex; align-items:center; gap:.25em; min-height:44px;
  font-family:'Fraunces',serif; font-size:1.25rem; line-height:1; font-weight:400;
  text-decoration:none; white-space:nowrap;
}
.tf-header .tf-logo a{ text-decoration:none; }
.tf-header .tf-nav{ margin-left:auto; }
.tf-header .tf-nav .elementor-nav-menu{ display:flex; gap:var(--tf-s5); }
.tf-header .tf-nav .elementor-nav-menu a.elementor-item{
  position:relative; padding:10px 0;
  font-family:'Manrope',sans-serif; font-size:.9375rem; font-weight:600;
  color:#F6EEE1; background:transparent;
  transition:color var(--tf-slow) var(--tf-ease-soft);
}
.tf-header.is-scrolled .tf-nav a.elementor-item,
.tf-header--solid .tf-nav a.elementor-item{ color:var(--tf-forest); }
.tf-header .tf-nav a.elementor-item::after{
  content:""; position:absolute; left:0; right:0; bottom:4px; height:1.5px;
  background:var(--tf-terracotta-lift);
  transform:scaleX(0); transform-origin:right;
  transition:transform var(--tf-base) var(--tf-ease);
}
.tf-header.is-scrolled .tf-nav a.elementor-item::after{ background:var(--tf-terracotta); }
.tf-header .tf-nav a.elementor-item:hover::after,
.tf-header .tf-nav a.elementor-item.elementor-item-active::after{ transform:scaleX(1); transform-origin:left; }
.tf-header .tf-nav a.elementor-item:hover{ background:transparent; }
@media (max-width:899px){ .tf-header .tf-nav, .tf-header .tf-header__cta{ display:none; } }

/* ---------- Trust bar ---------- */
.tf-trust__cell{ flex:1 1 170px; text-align:center; padding:var(--tf-s5) var(--tf-s3); border-right:1px solid var(--tf-line-soft); }
.tf-trust__cell:last-child{ border-right:0; }
.tf-trust__value .elementor-heading-title{
  font-family:'Fraunces',serif; font-size:1.75rem; font-weight:400;
  color:var(--tf-forest); font-variant-numeric:tabular-nums; line-height:1.2;
}
.tf-trust__label p{
  margin-top:4px; font-size:.6875rem; text-transform:uppercase;
  letter-spacing:.12em; color:var(--tf-muted); font-weight:700;
}

/* ---------- CTA band ---------- */
.tf-ctaband{ text-align:center; }
.tf-ctaband .elementor-heading-title{ color:#FFF6EC; }
.tf-ctaband p{ color:#CBBCA3; max-width:46ch; margin-inline:auto; }
.tf-ctaband .tf-cta-row{ justify-content:center; }

/* ---------- Experience tile ---------- */
.tf-tile{ position:relative; overflow:hidden; border-radius:var(--tf-r-card); isolation:isolate; }
.tf-tile .tf-tile__img img{
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  transition:transform var(--tf-zoom) var(--tf-ease);
}
.tf-tile:hover .tf-tile__img img{ transform:scale(1.06); }
.tf-tile .tf-tile__txt{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:var(--tf-s3);
  background:linear-gradient(180deg, rgba(5,41,29,0) 0%, rgba(5,41,29,.82) 60%);
}
.tf-tile .tf-tile__txt .elementor-heading-title{ font-size:1.125rem; color:#F6EEE1; }
.tf-tile .tf-tile__txt p{ font-size:.8125rem; line-height:1.5; color:#DCCBB4; margin-top:4px; }

/* ---------- Testimonial ---------- */
.tf-quote__body blockquote{
  margin:0; font-family:'Fraunces',serif; font-size:1.25rem; line-height:1.45;
  font-weight:300; color:var(--tf-ink); border:0; padding:0; quotes:none;
}
.tf-quote__cite p{ margin-top:var(--tf-s3); font-size:.8125rem; color:var(--tf-muted); }
.tf-quote__cite b{ display:block; color:var(--tf-ink-2); font-weight:700; }

/* ---------- Footer ---------- */
.tf-footer__g{ align-items:flex-start; }
.tf-footer__brand{ flex:1 1 260px; }
.tf-footer__explore,
.tf-footer__services{ flex:1 1 170px; }
.tf-footer__cta{ flex:1 1 220px; }
.tf-footer .elementor-heading-title{
  font-family:'Manrope',sans-serif; font-size:.6875rem; text-transform:uppercase;
  letter-spacing:.16em; font-weight:700; color:#B9A98F;
}
.tf-footer .tf-footer__logo .elementor-heading-title{
  font-family:'Fraunces',serif; font-size:1.5rem; font-weight:300;
  color:#F6EEE1; text-transform:none; letter-spacing:0;
  display:inline-flex; align-items:center; min-height:44px;
}
.tf-footer .tf-footer__logo i{ font-style:normal; color:var(--tf-terracotta-lift); }
.tf-footer .tf-footer__logo a:hover .elementor-heading-title{ opacity:.75; }
.tf-footer p{ font-size:.9375rem; color:#CBBCA3; max-width:36ch; }
.tf-footer .tf-footer__nav .elementor-nav-menu{ display:flex; flex-direction:column; }
.tf-footer .tf-footer__nav a.elementor-item{
  display:inline-flex; align-items:center; min-height:44px; padding:0;
  font-family:'Manrope',sans-serif; font-size:.9375rem; color:#F6EEE1;
  background:transparent; transition:color var(--tf-base) var(--tf-ease-soft);
}
.tf-footer .tf-footer__nav a.elementor-item:hover{ color:var(--tf-terracotta-lift); background:transparent; }
.tf-footer .elementor-icon-list-item > a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:.9375rem; color:#F6EEE1; text-decoration:none;
  transition:color var(--tf-base) var(--tf-ease-soft);
}
.tf-footer .elementor-icon-list-item > a:hover{ color:var(--tf-terracotta-lift); }
.tf-footer__bar{
  margin-top:var(--tf-s6); padding-top:var(--tf-s4);
  border-top:1px solid rgba(246,238,225,.16);
  justify-content:space-between; align-items:center;
}
.tf-footer__bar p,
.tf-footer__bar span{ font-size:.75rem; letter-spacing:.06em; color:#B9A98F; }
.tf-footer__bar em{ font-family:'Fraunces',serif; font-style:italic; font-size:.9375rem; letter-spacing:0; color:#CBBCA3; }

/* ---------- Blog card (loop item) ---------- */
.tf-bcard{ background:var(--tf-ivory-hi); border:1px solid var(--tf-line); border-radius:var(--tf-r-card); overflow:hidden; height:100%; }
.tf-bcard .tf-bcard__img img{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; transition:transform var(--tf-zoom) var(--tf-ease); }
.tf-bcard:hover .tf-bcard__img img{ transform:scale(1.06); }
.tf-bcard .tf-bcard__b{ padding:var(--tf-s3) var(--tf-s4) var(--tf-s4); gap:var(--tf-s2); }
.tf-bcard .elementor-heading-title{ font-family:'Fraunces',serif; font-size:1.1875rem; line-height:1.3; color:var(--tf-forest); }
.tf-bcard .tf-bcard__meta p{ font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; color:var(--tf-muted); }

/* ---------- FAQ (native details, already styled by the system) ---------- */
.tf-faq .elementor-widget-container{ padding:0; }

/* ---------- Fixes found by rendering the live page ---------- */

/* Elementor prints its own display rule on the widget wrapper, which beat the
   system's hide. The header nav has a bespoke mobile panel, so suppress
   Elementor's built-in toggle below the desktop breakpoint. */
@media (max-width:899px){
  .tf-header .tf-nav,
  .tf-header .tf-header__cta{ display:none !important; }
}

/* The footer menu must never collapse to a hamburger — it is a plain column. */
.tf-footer .tf-footer__nav .elementor-menu-toggle{ display:none !important; }
.tf-footer .tf-footer__nav .elementor-nav-menu--dropdown{ display:none !important; }
.tf-footer .tf-footer__nav .elementor-nav-menu--main{ display:flex !important; }

/* Icon-list text inherits Elementor's link colour, not the anchor's. */
.tf-footer .elementor-icon-list-text{
  color:#F6EEE1;
  font-family:'Manrope',sans-serif; font-size:.9375rem;
  transition:color var(--tf-base) var(--tf-ease-soft);
}
.tf-footer .elementor-icon-list-item:hover .elementor-icon-list-text{ color:var(--tf-terracotta-lift); }
/* No bullet icons in the services column — the list is typographic. */
.tf-footer .elementor-icon-list-icon{ display:none !important; }
.tf-footer .elementor-icon-list-item > a{ padding-inline-start:0; }

/* ==========================================================================
   Heading scale and colour
   Elementor's heading widget takes the kit's global "Primary" typography and
   colour no matter which tag is chosen, so an h3 rendered at the h1 size and
   every heading came out forest green. Key the scale off the real tag instead,
   and let dark bands override the colour.
   ========================================================================== */
.elementor-widget-heading h1.elementor-heading-title{
  font-family:'Fraunces',Georgia,serif; font-weight:300;
  font-size:clamp(2.5rem,6vw,4rem); line-height:1.02; letter-spacing:-.015em;
  color:var(--tf-forest);
}
.elementor-widget-heading h2.elementor-heading-title{
  font-family:'Fraunces',Georgia,serif; font-weight:400;
  font-size:clamp(1.75rem,3.4vw,2.5rem); line-height:1.14; letter-spacing:-.015em;
  color:var(--tf-forest);
}
.elementor-widget-heading h3.elementor-heading-title{
  font-family:'Fraunces',Georgia,serif; font-weight:400;
  font-size:clamp(1.1875rem,1.9vw,1.375rem); line-height:1.25; letter-spacing:-.015em;
  color:var(--tf-forest);
}
.elementor-widget-heading h4.elementor-heading-title{
  font-family:'Fraunces',Georgia,serif; font-weight:400;
  font-size:1.0625rem; line-height:1.3; color:var(--tf-forest);
}

/* Dark grounds: ivory headings and body copy. */
.tf-hero .elementor-heading-title,
.tf-band--forest .elementor-heading-title,
.tf-ctaband .elementor-heading-title,
.tf-vs__col--hi .elementor-heading-title{ color:#F6EEE1; }
.tf-hero h1.elementor-heading-title{ color:#FFF6EC; max-width:14ch; }
.tf-tile__txt .elementor-heading-title{ color:#F6EEE1; font-size:1.125rem; }

/* Trust bar keeps its own scale. */
.tf-trust__value .elementor-heading-title{ font-size:1.75rem; line-height:1.2; }
/* Footer column labels are Manrope, not the display face. */
.tf-footer .elementor-heading-title{ font-family:'Manrope',sans-serif; font-size:.6875rem; }
.tf-footer .tf-footer__logo .elementor-heading-title{ font-family:'Fraunces',serif; font-size:1.5rem; }
/* Timeline numerals. */
.tf-timeline__dot .elementor-heading-title{ font-size:1.125rem; line-height:1; color:inherit; }

/* Comparison lists. */
.tf-vs__col ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.tf-vs__col li{ display:flex; gap:10px; align-items:flex-start; font-size:.9375rem; color:var(--tf-muted); }
.tf-vs__col li::before{ content:"\2014"; flex:none; color:var(--tf-muted); }
.tf-vs__col--hi li{ color:#D8CBB4; }
.tf-vs__col--hi li::before{ content:"\2713"; color:var(--tf-terracotta-lift); font-weight:700; }

/* Destination meta chips. */
.tf-dcard .tf-meta{ display:flex; flex-wrap:wrap; gap:6px; }
.tf-dcard .tf-meta span{
  font-size:.6875rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700;
  border:1px solid var(--tf-line); border-radius:var(--tf-r-chip); padding:4px 8px; color:var(--tf-muted);
}
.tf-link-btn .elementor-button{
  background:transparent; border:0; padding:0; min-height:44px;
  color:var(--tf-terracotta-ink); font-weight:700; justify-content:flex-start;
}
.tf-link-btn .elementor-button:hover{ background:transparent; color:var(--tf-terracotta); box-shadow:none; }

/* Pillar rail cards. */
.tf-pillar__t .elementor-heading-title{ font-family:'Fraunces',serif; font-size:1.0625rem; color:var(--tf-forest); }
.tf-pillar__s p{ font-size:.75rem; color:var(--tf-muted); margin-top:4px; }

/* Timeline layout in Elementor containers. */
.tf-timeline{ display:flex; flex-direction:column; gap:var(--tf-s6); }
.tf-timeline__item{ display:flex; gap:var(--tf-s4); align-items:flex-start; flex-wrap:nowrap; }
.tf-timeline__dot{
  flex:0 0 48px; width:48px; height:48px; border-radius:50%;
  border:1px solid var(--tf-forest); color:var(--tf-forest); background:var(--tf-ivory-hi);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--tf-base), color var(--tf-base), border-color var(--tf-base);
}
.tf-timeline__item:hover .tf-timeline__dot{ background:var(--tf-terracotta); border-color:var(--tf-terracotta); color:#FFF6EC; }
.tf-timeline__body p{ font-size:.9375rem; color:var(--tf-muted); margin-top:4px; max-width:52ch; }

/* The tag-keyed rules above carry (0,2,1); the dark-band colour rules needed
   to match that weight or they lost and headings stayed forest-on-forest. */
.tf-hero .elementor-widget-heading h1.elementor-heading-title{ color:#FFF6EC; }
.tf-hero .elementor-widget-heading h2.elementor-heading-title,
.tf-band--forest .elementor-widget-heading h2.elementor-heading-title,
.tf-band--forest .elementor-widget-heading h3.elementor-heading-title,
.tf-ctaband .elementor-widget-heading h2.elementor-heading-title,
.tf-vs__col--hi .elementor-widget-heading h3.elementor-heading-title,
.tf-tile__txt .elementor-widget-heading h3.elementor-heading-title{ color:#F6EEE1; }
.tf-footer .elementor-widget-heading .elementor-heading-title{ color:#B9A98F; }
.tf-footer .tf-footer__logo .elementor-widget-heading .elementor-heading-title,
.tf-footer .tf-footer__logo .elementor-heading-title{ color:#F6EEE1; }

/* Footer column labels are h2 tags but must not take the h2 display scale. */
.tf-footer .elementor-widget-heading h2.elementor-heading-title{
  font-family:'Manrope',sans-serif; font-size:.6875rem; font-weight:700;
  line-height:1.5; letter-spacing:.16em; text-transform:uppercase;
}
.tf-footer .tf-footer__logo .elementor-widget-heading .elementor-heading-title{
  font-family:'Fraunces',serif; font-size:1.5rem; font-weight:300;
  letter-spacing:0; text-transform:none;
}
/* Trust bar value keeps its own scale against the tag rules. */
.tf-trust__value .elementor-widget-heading .elementor-heading-title{ font-size:1.75rem; }
.tf-timeline__dot .elementor-widget-heading .elementor-heading-title{ font-size:1.125rem; }

/* ---------- Elementor Pro forms ---------- */
.tf-form .elementor-field-group{ margin-bottom:var(--tf-s3); }
.tf-form .elementor-field-label{
  font-family:'Manrope',sans-serif; font-size:.8125rem; font-weight:700;
  color:var(--tf-forest); letter-spacing:.02em; margin-bottom:6px;
}
.tf-form .elementor-field-textual{
  min-height:48px; padding:12px 14px;
  font-family:'Manrope',sans-serif; font-size:1rem; color:var(--tf-ink);
  background:var(--tf-sand); border:1px solid var(--tf-line);
  border-radius:var(--tf-r-btn);
  transition:border-color var(--tf-fast), background var(--tf-fast);
}
.tf-form textarea.elementor-field-textual{ min-height:120px; line-height:1.6; }
.tf-form .elementor-field-textual:focus{ background:var(--tf-ivory-hi); border-color:var(--tf-forest); outline:2px solid transparent; }
.tf-form .elementor-field-description{ font-size:.75rem; color:var(--tf-muted); margin-top:4px; }
.tf-form .elementor-field-subgroup label{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px;
  border:1px solid var(--tf-line); border-radius:var(--tf-r-btn); background:var(--tf-sand);
  cursor:pointer; font-weight:600; font-size:.875rem; margin-right:var(--tf-s2);
}
.tf-form .elementor-field-subgroup label:has(input:checked){ border-color:var(--tf-forest); background:var(--tf-ivory-hi); }
.tf-form .elementor-field-subgroup input{ accent-color:var(--tf-forest); }
.tf-form .elementor-button[type="submit"]{
  min-height:48px; padding:0 24px; border-radius:var(--tf-r-btn);
  background:var(--tf-terracotta); border:1px solid var(--tf-terracotta); color:#FFF6EC;
  font-family:'Manrope',sans-serif; font-size:.9375rem; font-weight:600; letter-spacing:.02em;
  transition:background var(--tf-base) var(--tf-ease-soft), border-color var(--tf-base) var(--tf-ease-soft);
}
.tf-form .elementor-button[type="submit"]:hover{ background:var(--tf-forest); border-color:var(--tf-forest); color:var(--tf-ivory); }
.tf-form .elementor-message{ font-size:.9375rem; }
.tf-form .elementor-message-success{ color:var(--tf-forest); font-weight:600; }
.tf-form .elementor-message-danger{ color:var(--tf-terracotta-ink); font-weight:600; }

/* Contact page: form left, detail rail right. */
@media (min-width:1024px){
  .tf-contact-layout > .e-con:first-child{ flex:1 1 58%; }
  .tf-contact-layout > .e-con:last-child{ flex:1 1 34%; position:sticky; top:120px; }
}
.tf-contact__item{ display:flex; gap:var(--tf-s3); align-items:flex-start; margin-bottom:var(--tf-s4); }
.tf-contact__item b{ display:block; font-size:.8125rem; text-transform:uppercase; letter-spacing:.1em; color:var(--tf-muted); }
.tf-contact__item a{ font-weight:600; text-decoration:none; color:var(--tf-forest); }
.tf-contact__item a:hover{ color:var(--tf-terracotta-ink); }

/* ==========================================================================
   Layout parity with the reference build
   Elementor gives every container 10px default padding and forces width:100%
   on container children. That inflated the page by ~3.5k px: the trust bar and
   the content rail stacked vertically, and cards gained an inset border.
   ========================================================================== */

/* 1. Strip Elementor's default padding from structural containers. */
.tf-hero__media, .tf-hero__veil,
.tf-trust, .tf-trust__cell, .tf-tiles, .tf-tile, .tf-tile__txt,
.tf-grid, .tf-rail, .tf-pillar, .tf-split, .tf-vs, .tf-vs__col,
.tf-timeline, .tf-timeline__item, .tf-timeline__body,
.tf-dcard, .tf-dcard__img, .tf-bcard, .tf-bcard__img,
.tf-head-block, .tf-cta-row, .tf-media, .tf-footer__g, .tf-footer__bar{
  padding:0;
}
/* .tf-hero__in is also a .tf-inner, so it needs the page gutter. Only
   Elementor's default vertical padding comes off; stripping it wholesale put
   the hero copy 32px left of every other section and flush to the screen
   edge on phones. */
.tf-hero__in{ padding-block:0; padding-inline:var(--tf-gutter); }
.tf-trust__cell{ padding:var(--tf-s5) var(--tf-s3); }
.tf-dcard__b, .tf-bcard__b{ padding:var(--tf-s4); }
.tf-vs__col{ padding:var(--tf-s5); }

/* A split's columns are plain wrappers, but Elementor's default 10px sat on
   them, so their headings and images started 10px right of every other
   section on the page. The column edge is the grid edge. */
.tf-split > .e-con{ padding:0; }
.tf-card, .tf-quote{ padding:var(--tf-s4); }
.tf-quote{ padding:var(--tf-s5); }

/* 2. Restore flex sizing that Elementor's width:100% overrides. */
.tf-trust{ gap:0; flex-wrap:nowrap; }
.tf-trust > .tf-trust__cell{ flex:1 1 0; width:auto; }
@media (max-width:899px){
  .tf-trust{ overflow-x:auto; flex-wrap:nowrap; }
  .tf-trust > .tf-trust__cell{ flex:0 0 45%; }
}
.tf-rail{ flex-wrap:nowrap; overflow-x:auto; }
.tf-rail > *{ flex:0 0 22%; width:auto; }
@media (max-width:1023px){ .tf-rail > *{ flex:0 0 38%; } }
@media (max-width:599px){ .tf-rail > *{ flex:0 0 68%; } }
.tf-cta-row{ gap:var(--tf-s2); }
.tf-cta-row > *{ width:auto; flex:0 0 auto; }

/* 3. Hero media must fill the section, not sit in the flow. */
.tf-hero{ position:relative; }
.tf-hero > .tf-hero__media{
  position:absolute; inset:-6% 0; z-index:0; width:100%;
  padding:0; overflow:hidden;
}
.tf-hero > .tf-hero__media .elementor-widget-image,
.tf-hero > .tf-hero__media .elementor-widget-container,
.tf-hero > .tf-hero__media figure{ height:100%; width:100%; margin:0; }
.tf-hero > .tf-hero__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.tf-hero > .tf-hero__veil{
  position:absolute; inset:0; z-index:1; width:100%; padding:0;
  background:linear-gradient(180deg, rgba(5,41,29,.55) 0%, rgba(5,41,29,.78) 100%);
}
.tf-hero > .tf-hero__in{ position:relative; z-index:2; }

/* 4. Tiles: the image must fill the tile, text overlays it. */
.tf-tile{ position:relative; overflow:hidden; }
.tf-tile > .tf-tile__img,
.tf-tile > .tf-tile__img .elementor-widget-container,
.tf-tile > .tf-tile__img figure{ margin:0; width:100%; }
.tf-tile__txt{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:var(--tf-s3); }

/* 5. Splits: two real columns, not stacked. */
@media (min-width:1024px){
  .tf-split{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--tf-s7); align-items:center; }
  .tf-split--rev{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
  .tf-split > *{ width:auto; }
  .tf-vs{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
  .tf-vs > *{ width:auto; }
}
.tf-vs{ border:1px solid var(--tf-line); border-radius:var(--tf-r-card); overflow:hidden; }

/* 6. Timeline rhythm. */
.tf-timeline{ gap:var(--tf-s6); }
.tf-timeline__item{ gap:var(--tf-s4); }
.tf-timeline__body{ flex:1 1 auto; }

/* 7. Grids keep their column counts. */
.tf-grid{ display:grid; gap:var(--tf-s4); }
.tf-grid > *{ width:auto; }
@media (min-width:768px){ .tf-grid--2{ grid-template-columns:repeat(2,1fr); } .tf-grid--3{ grid-template-columns:repeat(2,1fr); } .tf-grid--4{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .tf-grid--3{ grid-template-columns:repeat(3,1fr); } .tf-grid--4{ grid-template-columns:repeat(4,1fr); } }
.tf-tiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--tf-s2); }
@media (min-width:768px){ .tf-tiles{ grid-template-columns:repeat(3,1fr); gap:var(--tf-s3); } }
@media (min-width:1200px){ .tf-tiles{ grid-template-columns:repeat(5,1fr); } }
.tf-tiles > *{ width:auto; }

/* 8. Destination + blog cards. */
.tf-dcard, .tf-bcard{ overflow:hidden; }
.tf-dcard__img, .tf-bcard__img{ width:100%; }
.tf-dcard__img .elementor-widget-container, .tf-bcard__img .elementor-widget-container{ margin:0; }
.tf-dcard__img img{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; }

/* 9. Elementor inserts --widgets-spacing (20px default) between every widget
   in a container. The reference build spaces with flex gap instead, so zero
   the widget spacing and let the container gaps do the work. */
.e-con, .e-con-inner{
  --widgets-spacing:0px;
  --widgets-spacing-row:0px;
  --widgets-spacing-column:0px;
}
.elementor-widget:not(:last-child){ margin-block-end:0; }

/* Re-declare the intentional rhythm the reference uses. */
.tf-hero__in{ display:flex; flex-direction:column; gap:var(--tf-s4); }
.tf-head-block{ display:flex; flex-direction:column; gap:var(--tf-s3); margin-bottom:var(--tf-s6); }
.tf-card{ display:flex; flex-direction:column; gap:var(--tf-s2); }
.tf-dcard__b{ display:flex; flex-direction:column; gap:var(--tf-s2); flex:1; }
.tf-bcard__b{ display:flex; flex-direction:column; gap:var(--tf-s2); }
.tf-quote{ display:flex; flex-direction:column; gap:0; }
.tf-vs__col{ display:flex; flex-direction:column; gap:var(--tf-s3); }
.tf-timeline__body{ display:flex; flex-direction:column; gap:4px; }
.tf-pillar{ display:flex; flex-direction:column; justify-content:flex-end; gap:4px; min-height:180px; padding:var(--tf-s3); }
.tf-footer__brand, .tf-footer__explore, .tf-footer__services, .tf-footer__cta{
  display:flex; flex-direction:column; gap:var(--tf-s2);
}
.tf-ctaband .tf-inner{ display:flex; flex-direction:column; gap:var(--tf-s4); align-items:center; }
.tf-split > *{ display:flex; flex-direction:column; gap:var(--tf-s4); }

/* 10. Timeline connector. The reference draws a hairline between steps with
   .tf-timeline li::before; Elementor emits divs, so re-attach it to the item. */
.tf-timeline{ gap:0; }
.tf-timeline__item{ position:relative; padding-bottom:var(--tf-s6); }
.tf-timeline__item:last-child{ padding-bottom:0; }
.tf-timeline__item:not(:last-child)::before{
  content:""; position:absolute; left:23px; top:52px; bottom:0;
  width:1px; background:var(--tf-line);
}
.tf-timeline__dot{ position:relative; z-index:1; }

/* 11. Trim the last residual overages against the reference. */
.tf-dcard__b{ padding:var(--tf-s4); gap:var(--tf-s2); }
.tf-dcard .tf-link-btn .elementor-button{ min-height:auto; padding-top:4px; }
.tf-vs__col{ padding:var(--tf-s5); gap:var(--tf-s3); }
.tf-rail{ padding-bottom:var(--tf-s3); }

/* 12. Tap targets. The card link and both logos must stay >=44px. */
.tf-dcard .tf-link-btn .elementor-button{ min-height:44px; padding:0; align-items:center; }
.tf-logo .elementor-heading-title,
.tf-logo > .elementor-widget-container > a,
.tf-footer__logo .elementor-heading-title,
.tf-footer__logo > .elementor-widget-container > a{
  display:inline-flex; align-items:center; min-height:44px;
}

/* Elementor nests the link INSIDE .elementor-heading-title, so the anchor
   itself needs the tap height, not the wrapper. */
.tf-logo .elementor-heading-title a,
.tf-footer__logo .elementor-heading-title a{
  display:inline-flex; align-items:center; min-height:44px; text-decoration:none; color:inherit;
}

/* ==========================================================================
   Round 3 fixes
   ========================================================================== */

/* 13. DOUBLE-BORDERED BUTTONS.
   tf-btn sits on Elementor's widget wrapper, which the design system also
   styles as a button — so the wrapper AND the inner <a> each drew a
   background, border and radius. Strip the wrapper back to a plain box. */
.elementor-widget-button[class*="tf-btn"],
.elementor-widget-button[class*="tf-link-btn"]{
  background:none !important; background-color:transparent !important;
  border:0 !important; border-radius:0 !important;
  min-height:0 !important; padding:0 !important;
  box-shadow:none !important; display:block !important;
}
.elementor-widget-button[class*="tf-btn"] .elementor-button-wrapper{ display:inline-flex; }

/* 14. STICKY HEADER STATE.
   Elementor Pro adds .elementor-sticky--effects past the offset; that is the
   scrolled state the design calls for. Without it the ivory nav sat invisible
   over the cream sections. */
.tf-header.elementor-sticky--effects,
.tf-header.elementor-sticky--effects.e-con{
  background:var(--tf-ivory) !important;
  box-shadow:0 1px 0 rgba(11,75,55,.10), 0 6px 24px -12px rgba(11,75,55,.35);
  backdrop-filter:saturate(1.1);
}
.tf-header.elementor-sticky--effects .tf-logo .elementor-heading-title{ color:var(--tf-forest); }
.tf-header.elementor-sticky--effects .tf-logo .b{ color:var(--tf-terracotta); }
.tf-header.elementor-sticky--effects .tf-nav a.elementor-item{ color:var(--tf-forest); }
.tf-header.elementor-sticky--effects .tf-nav a.elementor-item::after{ background:var(--tf-terracotta); }
.tf-header, .tf-header.e-con{ transition:background var(--tf-slow) var(--tf-ease-soft), box-shadow var(--tf-slow) var(--tf-ease-soft); }
.elementor-sticky--active.tf-header{ z-index:100; }

/* 15. TRUST BAR: the wrapper kept Elementor's 10px padding, which read as an
   extra rule above the bordered strip. */
.tf-band--flush{ padding:0 !important; }
.tf-trust{ border-block:1px solid var(--tf-line); }

/* 16. OVERLAPPING EDITORIAL LABELS on the journal image. */
.tf-labelled{ position:relative; }
.tf-labels{ display:flex; flex-wrap:wrap; gap:var(--tf-s1); margin-top:var(--tf-s3); }
.tf-labels span{
  background:var(--tf-ivory-hi); border:1px solid var(--tf-line);
  border-radius:var(--tf-r-chip); padding:6px 10px;
  font-family:'Manrope',sans-serif; font-size:.6875rem; text-transform:uppercase;
  letter-spacing:.1em; font-weight:700; color:var(--tf-forest);
  box-shadow:var(--tf-shadow-sm); white-space:nowrap;
}
@media (min-width:1024px){
  .tf-labelled .tf-labels-wrap{ position:absolute; inset:0; margin:0; pointer-events:none; z-index:3; }
  .tf-labels{ position:absolute; inset:0; margin:0; }
  .tf-labels span{ position:absolute; }
  .tf-labels span:nth-child(1){ top:-14px; left:-14px; }
  .tf-labels span:nth-child(2){ top:20%; right:-18px; }
  .tf-labels span:nth-child(3){ bottom:28%; left:-20px; }
  .tf-labels span:nth-child(4){ bottom:-14px; right:6%; }
  .tf-labels span:nth-child(5){ top:48%; left:36%; }
}

/* 17. Service-card icons rendered through the HTML widget. */
.tf-card__icon .tf-ico{ width:28px; height:28px; color:var(--tf-forest); display:block; }
.tf-card__icon{ line-height:0; }
.tf-card--warn{ border-color:var(--tf-terracotta); }
.tf-card--warn h3.elementor-heading-title{ color:var(--tf-terracotta-ink); }

/* 18. Hero rhythm to match the reference. */
.tf-hero{ min-height:85svh; padding-top:calc(var(--tf-header-h) + var(--tf-s6)); padding-bottom:var(--tf-s7); }
@media (min-width:1024px){ .tf-hero{ min-height:100svh; padding-bottom:var(--tf-s8); } }
.tf-hero__in{ gap:var(--tf-s4); }

/* 19. HERO VERTICAL ALIGNMENT.
   The reference hero is a row-direction flex box, so its align-items:flex-end
   pushes content to the bottom. Elementor containers are column-direction,
   where the vertical axis is justify-content — hence the copy sat at the top. */
.tf-hero.e-con{ justify-content:flex-end; align-items:stretch; }
.tf-hero > .tf-hero__in{ align-self:stretch; }
.tf-hero__sub{ max-width:52ch; }
.tf-hero__proof{ max-width:none; }
.tf-hero h1.elementor-heading-title{ max-width:14ch; }

/* The measure belongs on the paragraph, not Elementor's widget wrapper. */
.tf-hero__sub p{ max-width:52ch; font-size:1.0625rem; line-height:1.7; color:#E6DAC6; }
@media (min-width:1024px){ .tf-hero__sub p{ font-size:1.1875rem; } }
.tf-hero__proof p{
  font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; color:#CBBCA3;
}
.tf-lede p{ max-width:62ch; }
.tf-body p{ max-width:65ch; }

/* ==========================================================================
   20. STICKY HEADER — hand positioning to Elementor.
   The design system pins .tf-header with position:fixed. Elementor Pro's
   Sticky measures the element's position in the document to decide when to
   pin it and when to add .elementor-sticky--effects. A permanently fixed
   element never moves, so that calculation never fired — the header stayed
   transparent over the cream sections and mis-measured its own width.
   Keep it in normal flow, pull the hero up underneath it, and let Elementor
   own the fixing. The solid state then arrives at the 80px effects offset.
   ========================================================================== */
.elementor-location-header{ position:relative; z-index:100; }
.tf-header:not(.elementor-sticky--active){
  position:relative !important;
  inset:auto !important;
  width:100% !important;
}
.tf-header{ width:100%; }
.tf-header.elementor-sticky--active{ z-index:100; }

/* The hero slides up under the transparent header. */
.tf-hero{ margin-top:calc(var(--tf-header-h) * -1); }

/* Elementor adds a spacer when the element becomes sticky; it must not
   reintroduce the height we just removed. */
.elementor-sticky__spacer{ display:none !important; }

/* The logo is two spans with their own colours; .tf-logo .a out-specifies the
   heading-title rule, so "Travel" stayed ivory on the ivory scrolled header. */
.tf-header.elementor-sticky--effects .tf-logo .a{ color:var(--tf-forest); }
.tf-header.elementor-sticky--effects .tf-logo .b{ color:var(--tf-terracotta); }
.tf-header.elementor-sticky--effects .tf-logo .elementor-heading-title{ color:var(--tf-forest); }
.tf-logo .a, .tf-logo .b{ transition:color var(--tf-slow) var(--tf-ease-soft); }

/* ============================================================
   21. FORM FIELD HINTS
   Elementor Pro's form widget has no per-field description control, so the
   hints under the phone, destination and travellers fields live in their
   placeholders. A <select> has no placeholder, so the budget hint is an
   `html` form field sitting directly beneath it. Keeping it as a real field
   means it stays editable in the builder rather than baked into CSS.
   ============================================================ */
.elementor-field-group.tf-field-hint{
  margin-top:calc(var(--tf-s2) * -1);
  padding-top:0;
}
.tf-field__hint{
  margin:0;
  font-size:.75rem;
  line-height:1.5;
  /* 5.28:1 on the ivory-hi form surface. */
  color:var(--tf-muted);
}

/* ============================================================
   22. DESTINATION CARDS + MEDIA GRID
   The system styles .tf-cat / .tf-small on the element itself; Elementor puts
   that class on the widget WRAPPER and the real <p> sits inside, where
   .tf-dcard p wins on specificity. Re-target the inner paragraph.
   ============================================================ */
.tf-dcard .tf-cat p{
  margin:0; font-size:.6875rem; text-transform:uppercase;
  letter-spacing:.1em; font-weight:700; color:var(--tf-terracotta-ink);
}
.tf-dcard .tf-body p{ margin:0; font-size:.875rem; line-height:1.6; color:var(--tf-ink-2); }
.tf-dcard .tf-small p{ margin:0; font-size:.875rem; line-height:1.6; color:var(--tf-muted); }

/* Image widgets used as bare media frames. */
.tf-media .elementor-widget-container,
.tf-media figure{ margin:0; }
.tf-media img{ width:100%; height:100%; display:block; object-fit:cover; aspect-ratio:4/3; }
.tf-media--tall img{ aspect-ratio:3/4; }

/* Containers used as CSS grids: Elementor sets display:flex on every one. */
.e-con.tf-grid{ display:grid !important; gap:var(--tf-s4); }
.e-con.tf-grid > .e-con, .e-con.tf-grid > .elementor-element{ width:auto; max-width:none; }

/* Loop grids lay themselves out from the widget's own columns setting; the
   design system only needs to supply the gutter. */
.tf-loop-grid .elementor-grid{ gap:var(--tf-s4); }

/* ============================================================
   23. LINK BUTTON ARROW
   The static build ships an inline <svg> inside .tf-link. Elementor escapes
   the button text control, so the arrow has to come from CSS. A mask keeps it
   painted in currentColor, so it follows the link through hover and through
   the forest band where the link turns terracotta-lift.
   ============================================================ */
.tf-link-btn .elementor-button{ display:inline-flex; align-items:center; gap:8px; }
.tf-link-btn .elementor-button::after{
  content:''; flex:none; width:16px; height:11px;
  background:currentColor;
  -webkit-mask:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2211%22 viewBox=%220 0 16 11%22%3E%3Cpath d=%22M1 5.5h13M10 1l4.5 4.5L10 10%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E') no-repeat center/contain;
  mask:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2211%22 viewBox=%220 0 16 11%22%3E%3Cpath d=%22M1 5.5h13M10 1l4.5 4.5L10 10%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E') no-repeat center/contain;
  transition:transform var(--tf-base) var(--tf-ease);
}
.tf-link-btn .elementor-button:hover::after{ transform:translateX(4px); }
@media (prefers-reduced-motion: reduce){
  .tf-link-btn .elementor-button::after{ transition:none; }
  .tf-link-btn .elementor-button:hover::after{ transform:none; }
}

/* ============================================================
   24. FEATURE CARD IMAGE
   Section 22's generic .tf-bcard__img rule lands at the same specificity as
   the design system's feature override and wins on order, which pinned the
   featured image to 3:2. Restore the intent: on the two-column layout the
   image fills whatever height the text column needs.
   ============================================================ */
@media (min-width:900px){
  .tf-bcard--feature > .tf-bcard__img,
  .tf-bcard--feature > .tf-bcard__img .elementor-widget-image,
  .tf-bcard--feature > .tf-bcard__img .elementor-widget-container{ height:100%; }
  .tf-bcard--feature > .tf-bcard__img img{
    height:100%; aspect-ratio:auto; object-fit:cover;
  }
}

/* ============================================================
   25. ARTICLE (single post)
   Articles now render through the TF Single Post theme template rather than
   Hello Elementor's default, so this styles that template's own classes.
   The cover image gets the full 900px column; the reading column is capped
   at a real measure.
   ============================================================ */
.tf-article-wrap{ padding-top:calc(var(--tf-header-h) + var(--tf-s6)); }

.tf-article__head,
.tf-article,
.tf-article__back{ width:100%; max-width:68ch; margin-inline:auto; }
.tf-article__head{ gap:var(--tf-s2); margin-bottom:var(--tf-s5); }

.tf-article__head .tf-cat p{
  margin:0; font-size:.6875rem; text-transform:uppercase;
  letter-spacing:.1em; font-weight:700; color:var(--tf-terracotta-ink);
}
.tf-article__head .tf-article__title h1.elementor-heading-title{
  font-family:'Fraunces',Georgia,serif; font-weight:300;
  font-size:clamp(2rem,4.5vw,2.75rem); line-height:1.1;
  letter-spacing:-.015em; color:var(--tf-forest); text-wrap:balance;
}
.tf-article__head .tf-bcard__meta p{
  margin:0; font-size:.8125rem; text-transform:uppercase;
  letter-spacing:.1em; font-weight:700; color:var(--tf-muted);
}

.tf-article__cover{ margin-bottom:var(--tf-s6); border-radius:var(--tf-r-card); overflow:hidden; }
.tf-article__cover img{ width:100%; display:block; aspect-ratio:3/2; object-fit:cover; }

/* Body copy. The post-content widget prints raw HTML, so target its tags. */
.tf-article .elementor-widget-theme-post-content h2{
  font-family:'Fraunces',Georgia,serif; font-weight:400;
  font-size:1.5rem; line-height:1.25; color:var(--tf-forest);
  text-wrap:balance; margin:var(--tf-s6) 0 var(--tf-s2);
}
.tf-article .elementor-widget-theme-post-content h3{
  font-family:'Fraunces',Georgia,serif; font-weight:400;
  font-size:1.1875rem; line-height:1.3; color:var(--tf-forest);
  margin:var(--tf-s5) 0 var(--tf-s1);
}
.tf-article .elementor-widget-theme-post-content p{
  font-size:1.0625rem; line-height:1.75; color:var(--tf-ink-2);
  margin:0 0 var(--tf-s3); text-wrap:pretty;
}
.tf-article .elementor-widget-theme-post-content ul,
.tf-article .elementor-widget-theme-post-content ol{
  margin:0 0 var(--tf-s3); padding-inline-start:1.25em;
}
.tf-article .elementor-widget-theme-post-content li{
  font-size:1.0625rem; line-height:1.75; color:var(--tf-ink-2);
  margin-bottom:var(--tf-s1);
}
.tf-article .elementor-widget-theme-post-content li::marker{ color:var(--tf-terracotta); }
.tf-article .elementor-widget-theme-post-content strong{ color:var(--tf-ink); font-weight:700; }
.tf-article .elementor-widget-theme-post-content em{ font-family:'Fraunces',Georgia,serif; font-style:italic; }
.tf-article .elementor-widget-theme-post-content a{ color:var(--tf-terracotta-ink); text-underline-offset:3px; }

.tf-article__back{
  margin-top:var(--tf-s6); padding-top:var(--tf-s4);
  border-top:1px solid var(--tf-line);
}

@media (max-width:767px){
  .tf-article-wrap{ padding-top:calc(var(--tf-header-h) + var(--tf-s4)); }
}
/* ============================================================
   26. SOLID HEADER
   .tf-header-solid is on <body> for every page except the homepage. The
   homepage keeps the transparent header over its dark hero and switches on
   Elementor Sticky's --effects class. Both states need ink-coloured nav,
   otherwise the ivory links sit on an ivory bar.
   Selectors carry an extra class over section 20's so they win on weight
   rather than on file order.
   ============================================================ */
.tf-header-solid .tf-header,
.tf-header.elementor-sticky--effects{
  background:var(--tf-ivory) !important;
  box-shadow:0 1px 0 rgba(11,75,55,.10), 0 6px 24px -12px rgba(11,75,55,.35);
}

.tf-header-solid .tf-header .tf-logo .elementor-heading-title,
.tf-header-solid .tf-header .tf-logo .elementor-heading-title .a,
.tf-header.elementor-sticky--effects .tf-logo .elementor-heading-title .a{
  color:var(--tf-forest);
}
.tf-header-solid .tf-header .tf-logo .elementor-heading-title .b,
.tf-header.elementor-sticky--effects .tf-logo .elementor-heading-title .b{
  color:var(--tf-terracotta);
}

/* 8.5:1 on ivory. */
.tf-header-solid .tf-header .tf-nav .elementor-nav-menu a.elementor-item,
.tf-header.elementor-sticky--effects .tf-nav .elementor-nav-menu a.elementor-item{
  color:var(--tf-forest);
}
.tf-header-solid .tf-header .tf-nav .elementor-nav-menu a.elementor-item::after,
.tf-header.elementor-sticky--effects .tf-nav .elementor-nav-menu a.elementor-item::after{
  background:var(--tf-terracotta);
}

/* ============================================================
   27. THREE-COLUMN COMPARISON
   The design system's .tf-vs is fixed at 1fr 1fr from 768px, so a third
   column silently wrapped onto a second row. Tablet keeps two columns and
   lets the third span, which reads better than three cramped ones.
   ============================================================ */
@media (min-width:768px) and (max-width:1023px){
  .tf-vs--3 .tf-vs__col:last-child{ grid-column:1 / -1; }
}
@media (min-width:1024px){
  .tf-vs--3{ grid-template-columns:repeat(3, 1fr); }
}

/* ============================================================
   28. LOGO MARK
   The wordmark is now the supplied logo image. The header carries both
   variants and shows one: the dark mark on ivory, the light mark over the
   homepage hero while the bar is still transparent. The footer is always
   forest, so it ships the light mark only.
   ============================================================ */
.tf-header .tf-logo{
  display:inline-flex !important; align-items:center;
  min-height:44px; width:auto !important; flex:none !important;
  padding:0; gap:0; text-decoration:none;
  transition:opacity var(--tf-base) var(--tf-ease-soft);
}
.tf-header .tf-logo:hover{ opacity:.82; }
.tf-header .tf-logo .elementor-widget-image,
.tf-header .tf-logo .elementor-widget-container,
.tf-header .tf-logo figure{ margin:0; line-height:0; }
.tf-header .tf-logo .tf-logo__img img{
  /* Two-line lockup, so it needs more height than the single-line wordmark
     it replaced to keep each word readable. Header bar is 84px. */
  height:48px; width:auto; max-width:none; display:block;
}

/* Transparent bar over the dark hero: light mark. */
.tf-header .tf-logo__img--dark{ display:none; }
.tf-header .tf-logo__img--light{ display:block; }

/* Ivory bar, on inner pages and once the homepage header sticks: dark mark. */
.tf-header-solid .tf-header .tf-logo__img--dark,
.tf-header.elementor-sticky--effects .tf-logo__img--dark{ display:block; }
.tf-header-solid .tf-header .tf-logo__img--light,
.tf-header.elementor-sticky--effects .tf-logo__img--light{ display:none; }

/* Footer mark. */
.tf-footer .tf-footer__logo .elementor-widget-container,
.tf-footer .tf-footer__logo figure{ margin:0; line-height:0; }
.tf-footer .tf-footer__logo img{
  height:52px; width:auto; max-width:none; display:block;
}
.tf-footer .tf-footer__logo a{
  display:inline-block;
  transition:opacity var(--tf-base) var(--tf-ease-soft);
}
.tf-footer .tf-footer__logo a:hover{ opacity:.82; }

@media (max-width:479px){
  .tf-header .tf-logo .tf-logo__img img{ height:38px; }
}

/* ============================================================
   29. SCROLL MOTION
   Driven by assets/travel-fitoor.js. Every effect is opt-in from a class on
   the section, so the builder stays in charge of which band does what, and
   the whole system is inert below 900px and under reduced-motion.
   ============================================================ */

/* ---- The flight leg: a dashed route drawn across a run of sections ---- */
.tf-flight{
  position:absolute; left:0; width:100%;
  /* The route runs to the page edges, so clip rather than let the stroke
     and the mark widen the document. */
  overflow:hidden;
  pointer-events:none; z-index:2;
  /* Sits into the band rather than printing over it. */
  mix-blend-mode:multiply;
}
.tf-flight__svg{ display:block; width:100%; height:100%; overflow:hidden; }
.tf-flight__trail{
  stroke:var(--tf-forest); stroke-width:1.5;
  stroke-dasharray:5 9; stroke-linecap:round;
  opacity:.45;
}
.tf-flight__mark{
  position:absolute; top:0; left:0;
  width:52px; height:52px; margin:-26px 0 0 -26px;
  background:url('mark-plane.svg') center/contain no-repeat;
  offset-rotate:auto; offset-distance:0%;
  opacity:0; transition:opacity 600ms var(--tf-ease-soft);
  will-change:offset-distance;
  mix-blend-mode:normal;
}
.tf-flight.is-flying .tf-flight__mark{ opacity:1; }

/* ---- The binocular iris ---- */
.tf-iris{
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  transform-origin:50% 50%;
}
/* The lenses themselves, riding the band as it opens. */
.tf-iris::after{
  content:""; position:absolute; left:50%; bottom:clamp(16px, 4vw, 40px);
  translate:-50% 0; width:124px; height:60px; z-index:4;
  background:url('mark-binoc.svg') center/contain no-repeat;
  opacity:0; transition:opacity 700ms var(--tf-ease-soft);
  pointer-events:none;
}
.tf-motion .tf-iris::after{ opacity:.85; }

/* ---- Focus pull: the band sharpens as it arrives ---- */
.tf-focus{ --tf-focus:0; }
.tf-motion .tf-focus > *{
  filter:blur(calc(var(--tf-focus) * 5px));
  transition:filter 120ms linear;
}

/* ---- Depth: children settle out of a backward tilt ---- */
.tf-motion .tf-depth .tf-card,
.tf-motion .tf-depth .tf-dcard,
.tf-motion .tf-depth .tf-tile,
.tf-motion .tf-depth .tf-quote,
.tf-motion .tf-depth .tf-pillar{
  will-change:transform, opacity;
  backface-visibility:hidden;
}

/* ---- Off below the desktop breakpoint and under reduced motion ---- */
@media (max-width:899px){
  .tf-flight{ display:none !important; }
  .tf-iris::after{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .tf-flight{ display:none !important; }
  .tf-iris{ -webkit-mask-image:none !important; mask-image:none !important; transform:none !important; }
  .tf-iris::after{ display:none; }
  .tf-motion .tf-focus > *{ filter:none !important; }
  .tf-motion .tf-depth .tf-card,
  .tf-motion .tf-depth .tf-dcard,
  .tf-motion .tf-depth .tf-tile,
  .tf-motion .tf-depth .tf-quote,
  .tf-motion .tf-depth .tf-pillar{ transform:none !important; opacity:1 !important; }
}

/* ============================================================
   30. SCROLL MOTION — SECTION MECHANICS
   Four more grammars, each on its own opt-in class so a band can be switched
   between them from the builder's CSS Classes field. All transform/opacity
   only, all inert below 900px and under reduced motion.
   ============================================================ */

.tf-deck, .tf-lens, .tf-walk, .tf-wall{ position:relative; }

/* ---- Deck: cards dealt out of a held stack ---- */
.tf-motion .tf-deck .tf-card{
  will-change:transform, opacity;
  backface-visibility:hidden;
  transform-origin:50% 60%;
}

/* ---- Lens sweep: a focus zone crosses the tile grid ---- */
.tf-motion .tf-lens .tf-tile{
  will-change:transform, opacity;
  backface-visibility:hidden;
  transition:opacity 120ms linear;
}
.tf-lens__eye{
  position:absolute; top:0; left:0; z-index:12;
  width:128px; height:62px;
  background:url('mark-binoc.svg') center/contain no-repeat;
  opacity:0; pointer-events:none;
  transition:opacity 500ms var(--tf-ease-soft);
  filter:drop-shadow(0 6px 18px rgba(11,75,55,.28));
  will-change:transform;
}

/* ---- Steps: the mark walks the process ---- */
.tf-motion .tf-walk .tf-timeline__item{
  will-change:transform, opacity;
  backface-visibility:hidden;
  transform-origin:0% 50%;
}
.tf-walk__mark{
  position:absolute; top:0; left:clamp(4px, 2vw, 26px); z-index:12;
  width:46px; height:46px;
  background:url('mark-plane.svg') center/contain no-repeat;
  opacity:0; pointer-events:none;
  /* The route runs downward, so the mark points down the list. */
  rotate:180deg;
  transition:transform 520ms var(--tf-ease-out-quart), opacity 400ms var(--tf-ease-soft);
  will-change:transform;
}

/* ---- Wall: the destination grid swings flat ---- */
.tf-motion .tf-wall .tf-grid{
  transform-style:preserve-3d;
  will-change:transform;
}
.tf-motion .tf-wall .tf-grid > *{
  will-change:transform, opacity;
  backface-visibility:hidden;
}

@media (max-width:899px){
  .tf-lens__eye, .tf-walk__mark{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .tf-lens__eye, .tf-walk__mark{ display:none; }
  .tf-motion .tf-deck .tf-card,
  .tf-motion .tf-lens .tf-tile,
  .tf-motion .tf-walk .tf-timeline__item,
  .tf-motion .tf-wall .tf-grid,
  .tf-motion .tf-wall .tf-grid > *{
    transform:none !important; opacity:1 !important;
  }
}