/* ==========================================================================
   Travel Fitoor — global stylesheet
   Design system v1.0 · Forest / Terracotta / Ivory
   Elementor port: paste the :root block into Site Settings → Custom CSS,
   then the component blocks as-is. Class names are already tf- prefixed
   so they can be dropped into Elementor "CSS Classes" fields directly.
   ========================================================================== */

/* ---------- 1. FONTS (self-hosted, latin subset, variable) ---------- */
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces.woff2') format('woff2');
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Manrope';
  src:url('../fonts/manrope.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}

/* ---------- 2. TOKENS ---------- */
:root{
  /* colour — sampled from the logo */
  --tf-forest:#0B4B37;
  --tf-forest-mid:#12634A;
  --tf-forest-deep:#05291D;
  --tf-terracotta:#C0552F;
  --tf-terracotta-ink:#A3441F;    /* body-size terracotta text, 5.17:1 on ivory */
  --tf-terracotta-lift:#E08055;   /* terracotta on dark grounds, 5.51:1 */
  --tf-ivory:#F3EADC;
  --tf-ivory-hi:#FBF6EE;
  --tf-sand:#E4D6BE;
  --tf-olive:#7F8F6B;
  --tf-ink:#1A1712;
  --tf-ink-2:#4A4436;
  --tf-muted:#6E6656;
  --tf-line:#DED0B8;
  --tf-line-soft:#EADFC9;

  /* spacing */
  --tf-s1:8px;  --tf-s2:12px; --tf-s3:16px; --tf-s4:24px;
  --tf-s5:32px; --tf-s6:48px; --tf-s7:64px; --tf-s8:96px; --tf-s9:128px;

  /* form */
  --tf-r-card:12px; --tf-r-btn:8px; --tf-r-chip:4px;
  --tf-shadow-sm:0 1px 2px rgba(11,75,55,.05), 0 2px 10px rgba(11,75,55,.04);
  --tf-shadow:0 4px 14px rgba(11,75,55,.07), 0 18px 36px -14px rgba(11,75,55,.14);

  /* motion */
  --tf-fast:180ms; --tf-base:260ms; --tf-slow:420ms; --tf-zoom:900ms;
  --tf-ease:cubic-bezier(.22,.61,.36,1);
  --tf-ease-soft:cubic-bezier(.4,0,.2,1);

  /* layout */
  --tf-max:1240px; --tf-max-narrow:760px;
  --tf-gutter:20px;
  --tf-header-h:64px;
}
@media (min-width:768px){ :root{ --tf-gutter:32px; --tf-header-h:84px; } }
@media (min-width:1440px){ :root{ --tf-gutter:48px; } }

/* ---------- 3. BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--tf-ivory-hi);
  color:var(--tf-ink);
  font-family:'Manrope',ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5{
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  font-optical-sizing:auto;
  font-weight:400; margin:0;
  letter-spacing:-.015em; text-wrap:balance;
  color:var(--tf-forest);
}
p{ margin:0; }
svg{ max-width:100%; display:block; }
/* width/height attributes are set on every <img> to reserve space and keep CLS
   under 0.1. height:auto is what lets the CSS aspect-ratio win over the
   attribute's presentational height once the stylesheet applies. */
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--tf-terracotta-ink); }
ul,ol{ margin:0; padding:0; }
:focus-visible{ outline:2px solid var(--tf-terracotta); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--tf-terracotta); color:#FFF6EC; }

.tf-skip{
  position:absolute; left:-9999px; top:0; z-index:9999;
  background:var(--tf-forest); color:var(--tf-ivory);
  padding:12px 20px; border-radius:0 0 var(--tf-r-btn) 0; font-weight:600;
}
.tf-skip:focus{ left:0; }
.tf-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- 4. LAYOUT ---------- */
.tf-section{ padding:var(--tf-s6) 0; position:relative; }
@media (min-width:768px){ .tf-section{ padding:72px 0; } }
@media (min-width:1024px){ .tf-section{ padding:var(--tf-s8) 0; } }
@media (min-width:1440px){ .tf-section{ padding:var(--tf-s9) 0; } }

.tf-inner{ width:100%; max-width:var(--tf-max); margin:0 auto; padding:0 var(--tf-gutter); }
.tf-inner--narrow{ max-width:var(--tf-max-narrow); }

.tf-band--ivory{ background:var(--tf-ivory); }
.tf-band--sand{ background:var(--tf-sand); }
.tf-band--forest{ background:var(--tf-forest-deep); }
.tf-band--forest h1,.tf-band--forest h2,.tf-band--forest h3,.tf-band--forest h4{ color:#F6EEE1; }
.tf-band--forest p{ color:#CBBCA3; }

.tf-grid{ display:grid; gap:var(--tf-s4); }
@media (min-width:768px){ .tf-grid--2{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:768px){ .tf-grid--3{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .tf-grid--3{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:768px){ .tf-grid--4{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .tf-grid--4{ grid-template-columns:repeat(4,1fr); } }

/* split: image + copy */
.tf-split{ display:grid; gap:var(--tf-s5); align-items:center; }
@media (min-width:1024px){
  .tf-split{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--tf-s7); }
  .tf-split--rev{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
  .tf-split--rev > :first-child{ order:-1; }
}

/* ---------- 5. TYPOGRAPHY ---------- */
.tf-eyebrow{
  font-size:.6875rem; text-transform:uppercase; letter-spacing:.2em;
  font-weight:700; color:var(--tf-terracotta-ink); margin-bottom:var(--tf-s3);
}
.tf-band--forest .tf-eyebrow{ color:var(--tf-terracotta-lift); }
.tf-h1{ font-size:clamp(2.5rem,6vw,4rem); line-height:1.02; font-weight:300; }
.tf-h2{ font-size:clamp(1.75rem,3.4vw,2.5rem); line-height:1.14; }
.tf-h3{ font-size:clamp(1.25rem,2vw,1.5rem); line-height:1.25; }
.tf-lede{ font-size:1.0625rem; line-height:1.75; color:var(--tf-ink-2); max-width:62ch; }
@media (min-width:1024px){ .tf-lede{ font-size:1.125rem; } }
.tf-body{ color:var(--tf-ink-2); max-width:65ch; }
.tf-small{ font-size:.875rem; line-height:1.6; color:var(--tf-muted); }
.tf-head-block{ margin-bottom:var(--tf-s6); max-width:56ch; }
.tf-head-block .tf-lede{ margin-top:var(--tf-s3); }

/* ---------- 6. BUTTONS ---------- */
.tf-btn{
  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; cursor:pointer;
  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:hover{ background:var(--tf-terracotta); border-color:var(--tf-terracotta); color:#FFF6EC; box-shadow:var(--tf-shadow); }
.tf-btn:active{ transform:translateY(1px); }
.tf-btn--sec{ background:transparent; color:var(--tf-forest); border-color:var(--tf-forest); }
.tf-btn--sec:hover{ background:var(--tf-forest); color:var(--tf-ivory); border-color:var(--tf-forest); }
.tf-btn--acc{ background:var(--tf-terracotta); border-color:var(--tf-terracotta); color:#FFF6EC; }
.tf-btn--acc:hover{ background:var(--tf-forest); border-color:var(--tf-forest); color:var(--tf-ivory); }
.tf-btn--light{ background:transparent; color:#F6EEE1; border-color:rgba(246,238,225,.55); }
.tf-btn--light:hover{ background:#F6EEE1; color:var(--tf-forest-deep); border-color:#F6EEE1; }
.tf-btn--wide{ width:100%; }
.tf-btn[disabled]{ opacity:.45; pointer-events:none; }

.tf-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.9375rem; font-weight:700; color:var(--tf-terracotta-ink);
  text-decoration:none; min-height:44px;
}
.tf-link svg{ transition:transform var(--tf-base) var(--tf-ease); }
.tf-link:hover svg{ transform:translateX(4px); }
.tf-band--forest .tf-link{ color:var(--tf-terracotta-lift); }

.tf-cta-row{ display:flex; flex-wrap:wrap; gap:var(--tf-s2); margin-top:var(--tf-s5); }
@media (max-width:479px){ .tf-cta-row .tf-btn{ width:100%; } }

/* ---------- 7. HEADER ---------- */
.tf-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--tf-header-h);
  display:flex; align-items:center;
  background:transparent;
  transition:background var(--tf-slow) var(--tf-ease-soft),
             box-shadow var(--tf-slow) var(--tf-ease-soft);
}
.tf-header__in{ width:100%; max-width:var(--tf-max); margin:0 auto; padding:0 var(--tf-gutter); display:flex; align-items:center; gap:var(--tf-s4); }
.tf-header.is-scrolled,
.tf-header--solid{
  background:var(--tf-ivory);
  box-shadow:0 1px 0 rgba(11,75,55,.10), 0 6px 24px -12px rgba(11,75,55,.35);
}

.tf-logo{
  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-logo .a{ color:#FFF6EC; transition:color var(--tf-slow) var(--tf-ease-soft); }
.tf-logo .b{ color:var(--tf-terracotta-lift); transition:color var(--tf-slow) var(--tf-ease-soft); }
.tf-header.is-scrolled .tf-logo .a,
.tf-header--solid .tf-logo .a{ color:var(--tf-forest); }
.tf-header.is-scrolled .tf-logo .b,
.tf-header--solid .tf-logo .b{ color:var(--tf-terracotta); }

.tf-nav{ margin-left:auto; }
.tf-nav ul{ display:flex; gap:var(--tf-s5); list-style:none; }
.tf-nav a{
  position:relative; display:inline-block; padding:10px 0;
  font-size:.9375rem; font-weight:600; text-decoration:none;
  color:#F6EEE1; transition:color var(--tf-slow) var(--tf-ease-soft);
}
.tf-header.is-scrolled .tf-nav a,
.tf-header--solid .tf-nav a{ color:var(--tf-forest); }
.tf-nav a::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::after,
.tf-header--solid .tf-nav a::after{ background:var(--tf-terracotta); }
.tf-nav a:hover::after,
.tf-nav a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }
.tf-header__cta{ min-height:44px; padding:0 18px; font-size:.875rem; }
@media (max-width:899px){ .tf-nav,.tf-header__cta{ display:none; } }

/* burger */
.tf-burger{
  margin-left:auto; width:48px; height:48px; display:none;
  align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer; color:#F6EEE1;
}
.tf-header.is-scrolled .tf-burger,
.tf-header--solid .tf-burger{ color:var(--tf-forest); }
.tf-burger span{ display:block; width:24px; height:1.5px; background:currentColor; position:relative; transition:background var(--tf-fast); }
.tf-burger span::before,.tf-burger span::after{
  content:""; position:absolute; left:0; width:24px; height:1.5px; background:currentColor;
  transition:transform var(--tf-base) var(--tf-ease);
}
.tf-burger span::before{ top:-7px; } .tf-burger span::after{ top:7px; }
@media (max-width:899px){ .tf-burger{ display:flex; } }

/* mobile panel */
.tf-panel{
  position:fixed; inset:0; z-index:200;
  background:var(--tf-ivory);
  display:flex; flex-direction:column;
  padding:var(--tf-s4) var(--tf-gutter) calc(var(--tf-s4) + env(safe-area-inset-bottom));
  transform:translateX(100%);
  transition:transform 320ms var(--tf-ease);
  visibility:hidden;
}
.tf-panel.is-open{ transform:none; visibility:visible; }
.tf-panel__top{ display:flex; align-items:center; min-height:48px; }
.tf-panel__close{ margin-left:auto; width:48px; height:48px; border:0; background:none; cursor:pointer; color:var(--tf-forest); font-size:1.75rem; line-height:1; }
.tf-panel ul{ list-style:none; margin-top:var(--tf-s5); }
.tf-panel li{ border-bottom:1px solid var(--tf-line); }
.tf-panel a{
  display:flex; align-items:center; min-height:56px;
  font-family:'Fraunces',serif; font-size:1.5rem;
  color:var(--tf-forest); text-decoration:none;
  opacity:0; transform:translateY(8px);
  transition:opacity var(--tf-base) var(--tf-ease), transform var(--tf-base) var(--tf-ease), color var(--tf-fast);
}
.tf-panel.is-open a{ opacity:1; transform:none; }
.tf-panel.is-open li:nth-child(1) a{ transition-delay:60ms; }
.tf-panel.is-open li:nth-child(2) a{ transition-delay:100ms; }
.tf-panel.is-open li:nth-child(3) a{ transition-delay:140ms; }
.tf-panel.is-open li:nth-child(4) a{ transition-delay:180ms; }
.tf-panel.is-open li:nth-child(5) a{ transition-delay:220ms; }
.tf-panel a:hover,.tf-panel a[aria-current="page"]{ color:var(--tf-terracotta); }
.tf-panel__cta{ margin-top:auto; padding-top:var(--tf-s5); }
body.tf-locked{ overflow:hidden; }

/* sticky mobile CTA */
.tf-sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  padding:10px var(--tf-gutter) calc(10px + env(safe-area-inset-bottom));
  background:var(--tf-ivory);
  border-top:1px solid var(--tf-line);
  transform:translateY(110%);
  transition:transform 320ms var(--tf-ease);
}
body.tf-cta-on .tf-sticky-cta{ transform:none; }
body.tf-locked .tf-sticky-cta{ transform:translateY(110%); }
@media (min-width:900px){ .tf-sticky-cta{ display:none; } }
@media (max-width:899px){ body.tf-cta-on{ padding-bottom:76px; } }

/* ---------- 8. HERO ---------- */
.tf-hero{
  position:relative; min-height:85svh;
  display:flex; align-items:flex-end;
  padding:calc(var(--tf-header-h) + var(--tf-s6)) 0 var(--tf-s7);
  overflow:hidden; background:var(--tf-forest-deep);
}
@media (min-width:1024px){ .tf-hero{ min-height:100svh; padding-bottom:var(--tf-s8); } }
.tf-hero__media{ position:absolute; inset:-6% 0; z-index:0; will-change:transform; }
.tf-hero__media img{ width:100%; height:100%; object-fit:cover; }
.tf-hero__veil{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(5,41,29,.55) 0%, rgba(5,41,29,.78) 100%),
             linear-gradient(0deg, rgba(243,234,220,.06), rgba(243,234,220,.06));
}
.tf-hero__in{ position:relative; z-index:2; }
.tf-hero h1{ color:#FFF6EC; max-width:14ch; }
.tf-hero__sub{ color:#E6DAC6; font-size:1.0625rem; line-height:1.7; max-width:52ch; margin-top:var(--tf-s4); }
@media (min-width:1024px){ .tf-hero__sub{ font-size:1.1875rem; } }
.tf-hero__proof{
  margin-top:var(--tf-s4); color:#CBBCA3;
  font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
}

/* compact hero for inner pages */
.tf-hero--page{ min-height:0; padding:calc(var(--tf-header-h) + var(--tf-s7)) 0 var(--tf-s7); align-items:center; }
@media (min-width:1024px){ .tf-hero--page{ min-height:48svh; padding:calc(var(--tf-header-h) + var(--tf-s8)) 0 var(--tf-s8); } }
.tf-hero--page h1{ max-width:20ch; }

/* ---------- 9. TRUST BAR ---------- */
.tf-trust{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; border-block:1px solid var(--tf-line); scrollbar-width:none; -ms-overflow-style:none; }
.tf-trust::-webkit-scrollbar{ width:0; height:0; display:none; }
.tf-trust__cell{
  flex:0 0 45%; scroll-snap-align:start;
  padding:var(--tf-s5) var(--tf-s3); text-align:center;
  border-right:1px solid var(--tf-line-soft);
}
.tf-trust__cell:last-child{ border-right:0; }
@media (min-width:900px){
  .tf-trust{ overflow:visible; }
  .tf-trust__cell{ flex:1 1 0; }
}
.tf-trust b{ display:block; font-family:'Fraunces',serif; font-size:1.75rem; font-weight:400; color:var(--tf-forest); font-variant-numeric:tabular-nums; }
/* Direct child only. As a descendant selector this also matched the count-up
   <span> nested inside <b>, rendering "3 Lakh+" at label size while the
   text-only cells rendered at 1.75rem. */
.tf-trust__cell > span{ display:block; margin-top:4px; font-size:.6875rem; text-transform:uppercase; letter-spacing:.12em; color:var(--tf-muted); font-weight:700; }
.tf-trust b span{ font:inherit; color:inherit; letter-spacing:inherit; text-transform:none; }

/* ---------- 10. MEDIA + LABELS ---------- */
.tf-media{ border-radius:var(--tf-r-card); overflow:hidden; background:var(--tf-sand); }
.tf-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.tf-media--tall img{ aspect-ratio:3/4; }
.tf-media--wide img{ aspect-ratio:3/2; }
.tf-media--parallax img{ will-change:transform; }

.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-size:.6875rem; text-transform:uppercase; letter-spacing:.1em;
  font-weight:700; color:var(--tf-forest); box-shadow:var(--tf-shadow-sm);
}
@media (min-width:1024px){
  .tf-labels{ position:absolute; inset:0; margin:0; pointer-events:none; }
  .tf-labels span{ position:absolute; }
  .tf-labels span:nth-child(1){ top:-12px; left:-12px; }
  .tf-labels span:nth-child(2){ top:22%; right:-16px; }
  .tf-labels span:nth-child(3){ bottom:26%; left:-18px; }
  .tf-labels span:nth-child(4){ bottom:-12px; right:8%; }
  .tf-labels span:nth-child(5){ top:52%; left:38%; }
}

/* ---------- 11. CARDS ---------- */
.tf-card{
  background:var(--tf-ivory-hi); border:1px solid var(--tf-line);
  border-radius:var(--tf-r-card); padding:var(--tf-s4);
  display:flex; flex-direction:column; gap:var(--tf-s2);
  transition:border-color var(--tf-base), box-shadow var(--tf-base), transform var(--tf-base) var(--tf-ease);
}
.tf-card:hover{ border-color:var(--tf-terracotta); box-shadow:var(--tf-shadow); transform:translateY(-3px); }
.tf-card__icon{ width:28px; height:28px; color:var(--tf-forest); }
.tf-card h3{ font-size:1.1875rem; }
.tf-card p{ font-size:.875rem; color:var(--tf-muted); line-height:1.65; }

/* destination card */
.tf-dcard{
  background:var(--tf-ivory-hi); border:1px solid var(--tf-line);
  border-radius:var(--tf-r-card); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--tf-shadow-sm);
  transition:box-shadow var(--tf-base) var(--tf-ease), transform var(--tf-base) var(--tf-ease);
}
.tf-dcard:hover{ box-shadow:var(--tf-shadow); transform:translateY(-3px); }
.tf-dcard__img{ overflow:hidden; }
.tf-dcard__img img{ width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform var(--tf-zoom) var(--tf-ease); }
.tf-dcard:hover .tf-dcard__img img{ transform:scale(1.06); }
.tf-dcard__b{ padding:var(--tf-s4); display:flex; flex-direction:column; gap:var(--tf-s2); flex:1; }
.tf-dcard h3{ font-size:1.375rem; }
.tf-dcard p{ font-size:.875rem; color:var(--tf-ink-2); }
.tf-meta{ display:flex; flex-wrap:wrap; gap:6px; }
.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-dcard .tf-link{ margin-top:auto; }

/* experience tile */
.tf-tile{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--tf-r-card); text-decoration:none; isolation:isolate;
}
.tf-tile img{ width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform var(--tf-zoom) var(--tf-ease); }
.tf-tile:hover img,.tf-tile:focus-visible img{ transform:scale(1.06); }
.tf-tile__veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,41,29,0) 35%, rgba(5,41,29,.82) 100%); pointer-events:none; }
.tf-tile__txt{ position:absolute; left:0; right:0; bottom:0; padding:var(--tf-s3); }
.tf-tile__txt h3{ font-size:1.125rem; color:#F6EEE1; }
.tf-tile__txt p{ font-size:.8125rem; line-height:1.5; color:#DCCBB4; margin-top:4px; }
@media (min-width:1024px){
  .tf-tile__txt p{
    max-height:0; opacity:0; overflow:hidden; transform:translateY(6px); margin-top:0;
    transition:max-height var(--tf-slow) var(--tf-ease), opacity var(--tf-base) var(--tf-ease),
               transform var(--tf-slow) var(--tf-ease), margin-top var(--tf-slow) var(--tf-ease);
  }
  .tf-tile:hover .tf-tile__txt p,
  .tf-tile:focus-visible .tf-tile__txt p{ max-height:5rem; opacity:1; transform:none; margin-top:4px; }
}
.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); } }

/* ---------- 12. TIMELINE ---------- */
.tf-timeline{ list-style:none; position:relative; }
.tf-timeline li{ display:grid; grid-template-columns:auto 1fr; gap:var(--tf-s4); padding-bottom:var(--tf-s6); position:relative; }
.tf-timeline li:last-child{ padding-bottom:0; }
.tf-timeline li::before{
  content:""; position:absolute; left:23px; top:52px; bottom:0; width:1px;
  background:var(--tf-line); transform:scaleY(0); transform-origin:top;
  transition:transform 600ms var(--tf-ease);
}
.tf-timeline li.is-in::before{ transform:scaleY(1); }
.tf-timeline li:last-child::before{ display:none; }
.tf-timeline__dot{
  width:48px; height:48px; border-radius:50%;
  border:1px solid var(--tf-forest); color:var(--tf-forest);
  background:var(--tf-ivory-hi);
  display:grid; place-items:center;
  font-family:'Fraunces',serif; font-size:1.125rem;
  transition:background var(--tf-base), color var(--tf-base), border-color var(--tf-base);
}
.tf-timeline li:hover .tf-timeline__dot{ background:var(--tf-terracotta); border-color:var(--tf-terracotta); color:#FFF6EC; }
.tf-timeline h3{ font-size:1.1875rem; }
.tf-timeline p{ font-size:.9375rem; color:var(--tf-muted); margin-top:4px; max-width:52ch; }

/* ---------- 13. RAIL ---------- */
/* Horizontal rails carry their own affordance — a hairline progress indicator
   and a fading right edge — instead of a raw OS scrollbar. */
.tf-scroll-x{ scrollbar-width:none; -ms-overflow-style:none; }
.tf-scroll-x::-webkit-scrollbar{ width:0; height:0; display:none; }

.tf-rail{
  display:flex; gap:var(--tf-s3);
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:var(--tf-s2);
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scroll-behavior:smooth;
  list-style:none;
  scrollbar-width:none; -ms-overflow-style:none;
  /* the trailing card dissolves instead of being hard-clipped; the mask is
     removed once the rail is scrolled to its end */
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 64px), transparent 100%);
          mask-image:linear-gradient(to right, #000 calc(100% - 64px), transparent 100%);
  transition:-webkit-mask-image var(--tf-base) linear, mask-image var(--tf-base) linear;
}
.tf-rail::-webkit-scrollbar{ width:0; height:0; display:none; }
.tf-rail.at-end{
  -webkit-mask-image:linear-gradient(to right, #000 100%, transparent 100%);
          mask-image:linear-gradient(to right, #000 100%, transparent 100%);
}
@media (hover:hover) and (min-width:1024px){ .tf-rail{ cursor:grab; } }

/* hairline progress indicator, inserted by script after each rail */
.tf-rail__progress{
  position:relative; height:2px; border-radius:2px;
  background:var(--tf-line); margin-top:var(--tf-s3);
  overflow:hidden;
}
.tf-rail__progress i{
  position:absolute; inset:0 auto 0 0; display:block;
  width:var(--tf-rail-w, 30%); border-radius:2px;
  background:var(--tf-forest);
  transform:translateX(var(--tf-rail-x, 0));
  transition:transform 120ms linear;
}
@media (prefers-reduced-motion:reduce){
  .tf-rail{ scroll-behavior:auto; }
  .tf-rail__progress i{ transition:none; }
}
.tf-rail > *{ flex:0 0 68%; scroll-snap-align:start; }
@media (min-width:600px){ .tf-rail > *{ flex:0 0 38%; } }
@media (min-width:1024px){ .tf-rail > *{ flex:0 0 22%; } }
.tf-rail--bleed{ margin-right:calc(var(--tf-gutter) * -1); padding-right:var(--tf-gutter); }
.tf-rail.is-dragging{ cursor:grabbing; scroll-snap-type:none; }

.tf-pillar{
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:180px; padding:var(--tf-s3);
  background:var(--tf-ivory-hi); border:1px solid var(--tf-line);
  border-radius:var(--tf-r-card); text-decoration:none;
  transition:border-color var(--tf-base), box-shadow var(--tf-base), transform var(--tf-base) var(--tf-ease);
}
.tf-pillar:hover{ border-color:var(--tf-terracotta); box-shadow:var(--tf-shadow); transform:translateY(-3px); }
.tf-pillar b{ font-family:'Fraunces',serif; font-size:1.0625rem; font-weight:400; color:var(--tf-forest); }
.tf-pillar span{ font-size:.75rem; color:var(--tf-muted); margin-top:4px; }

/* ---------- 14. QUOTES ---------- */
.tf-quote{
  background:var(--tf-ivory-hi); border:1px solid var(--tf-line);
  border-left:2px solid var(--tf-terracotta);
  border-radius:var(--tf-r-card); padding:var(--tf-s5); margin:0;
}
.tf-quote blockquote{ margin:0; font-family:'Fraunces',serif; font-size:1.25rem; line-height:1.45; font-weight:300; color:var(--tf-ink); }
@media (min-width:1024px){ .tf-quote blockquote{ font-size:1.375rem; } }
.tf-quote figcaption{ margin-top:var(--tf-s3); font-size:.8125rem; color:var(--tf-muted); }
.tf-quote figcaption b{ display:block; color:var(--tf-ink-2); font-weight:700; }

/* ---------- 15. FAQ ---------- */
.tf-faq{ border:1px solid var(--tf-line); border-radius:var(--tf-r-card); overflow:hidden; background:var(--tf-ivory-hi); }
.tf-faq details{ border-bottom:1px solid var(--tf-line-soft); }
.tf-faq details:last-child{ border-bottom:0; }
.tf-faq summary{
  list-style:none; cursor:pointer;
  padding:var(--tf-s3) var(--tf-s4); min-height:56px;
  display:flex; align-items:center; gap:var(--tf-s3);
  font-family:'Fraunces',serif; font-size:1.0625rem; color:var(--tf-forest);
  transition:background var(--tf-fast), color var(--tf-fast);
}
.tf-faq summary::-webkit-details-marker{ display:none; }
.tf-faq summary:hover{ background:rgba(192,85,47,.08); color:var(--tf-terracotta-ink); }
.tf-faq summary::after{
  content:""; margin-left:auto; flex:none; width:9px; height:9px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--tf-base) var(--tf-ease);
}
.tf-faq details[open] summary::after{ transform:rotate(225deg) translateY(-2px); }
.tf-faq__a{ padding:0 var(--tf-s4) var(--tf-s4); font-size:.9375rem; color:var(--tf-muted); max-width:70ch; }

/* ---------- 16. COMPARISON ---------- */
.tf-vs{ display:grid; border:1px solid var(--tf-line); border-radius:var(--tf-r-card); overflow:hidden; }
@media (min-width:768px){ .tf-vs{ grid-template-columns:1fr 1fr; } }
.tf-vs__col{ padding:var(--tf-s5); background:var(--tf-ivory-hi); }
.tf-vs__col--hi{ background:var(--tf-forest-deep); }
.tf-vs__col--hi h3{ color:#F6EEE1; }
.tf-vs__col h3{ font-size:1.25rem; margin-bottom:var(--tf-s3); }
.tf-vs__col ul{ list-style:none; display:flex; flex-direction:column; gap:10px; font-size:.9375rem; color:var(--tf-muted); }
.tf-vs__col--hi ul{ color:#D8CBB4; }
.tf-vs__col li{ display:flex; gap:10px; align-items:flex-start; }
.tf-vs__col li::before{ content:"—"; flex:none; color:var(--tf-muted); }
.tf-vs__col--hi li::before{ content:"✓"; color:var(--tf-terracotta-lift); font-weight:700; }

/* ---------- 17. CTA BAND ---------- */
.tf-ctaband{ position:relative; background:var(--tf-forest-deep); overflow:hidden; text-align:center; }
.tf-ctaband::after{
  content:""; position:absolute; left:50%; bottom:-40%; width:min(760px,120%); aspect-ratio:1;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(192,85,47,.30) 0%, rgba(192,85,47,0) 68%);
  pointer-events:none;
}
.tf-ctaband .tf-inner{ position:relative; z-index:1; max-width:640px; }
.tf-ctaband h2{ color:#FFF6EC; }
.tf-ctaband p{ color:#CBBCA3; margin:var(--tf-s4) auto 0; max-width:46ch; }
.tf-ctaband .tf-cta-row{ justify-content:center; }

/* ---------- 18. FOOTER ---------- */
.tf-footer{ background:var(--tf-forest-deep); color:#F6EEE1; padding:var(--tf-s7) 0 var(--tf-s5); }
@media (min-width:1024px){ .tf-footer{ padding:var(--tf-s8) 0 var(--tf-s6); } }
.tf-footer__g{ display:grid; gap:var(--tf-s6); grid-template-columns:1fr; }
@media (min-width:600px){ .tf-footer__g{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .tf-footer__g{ grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:var(--tf-s5); } }
.tf-footer h2{ font-family:'Manrope',sans-serif; font-size:.6875rem; text-transform:uppercase; letter-spacing:.16em; font-weight:700; color:#B9A98F; margin-bottom:var(--tf-s3); }
.tf-footer ul{ list-style:none; display:flex; flex-direction:column; gap:2px; }
.tf-footer a{ color:#F6EEE1; text-decoration:none; font-size:.9375rem; transition:color var(--tf-base) var(--tf-ease-soft); }
.tf-footer li a{ display:inline-flex; align-items:center; min-height:44px; }
.tf-footer a:hover{ color:var(--tf-terracotta-lift); }
.tf-footer p{ font-size:.9375rem; color:#CBBCA3; max-width:36ch; }
.tf-footer__logo{ display:inline-flex; align-items:center; min-height:44px; font-family:'Fraunces',serif; font-size:1.5rem; font-weight:300; color:#F6EEE1; margin-bottom:var(--tf-s2); text-decoration:none; transition:opacity var(--tf-base); }
.tf-footer__logo:hover{ opacity:.75; color:#F6EEE1; }
.tf-footer__logo i{ font-style:normal; color:var(--tf-terracotta-lift); }
.tf-social{ display:flex; gap:10px; margin-top:var(--tf-s4); }
.tf-social a{
  width:44px; height:44px; display:grid; place-items:center;
  border:1px solid rgba(246,238,225,.28); border-radius:var(--tf-r-btn);
  transition:transform var(--tf-base) var(--tf-ease), border-color var(--tf-base), color var(--tf-base);
}
.tf-social a:hover{ transform:translateY(-2px); border-color:var(--tf-terracotta-lift); 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);
  display:flex; flex-wrap:wrap; gap:var(--tf-s3); justify-content:space-between; align-items:center;
  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; }
.tf-footer__bar a{ font-size:.75rem; display:inline-flex; align-items:center; min-height:44px; }
.tf-footer__legal{ display:flex; align-items:center; gap:var(--tf-s2); }
.tf-footer__legal span{ opacity:.4; }

/* ---------- 19. FORMS ---------- */
.tf-form{ display:grid; gap:var(--tf-s4); }
.tf-field{ display:flex; flex-direction:column; gap:6px; }
.tf-field label{ font-size:.8125rem; font-weight:700; color:var(--tf-forest); letter-spacing:.02em; }
.tf-field label .req{ color:var(--tf-terracotta-ink); }
.tf-field input,.tf-field select,.tf-field textarea{
  width:100%; 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); appearance:none;
  transition:border-color var(--tf-fast), background var(--tf-fast);
}
.tf-field textarea{ min-height:120px; resize:vertical; line-height:1.6; }
.tf-field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230B4B37' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }
.tf-field input:focus,.tf-field select:focus,.tf-field textarea:focus{ background:var(--tf-ivory-hi); border-color:var(--tf-forest); }
.tf-field .hint{ font-size:.75rem; color:var(--tf-muted); }
.tf-field .err{ font-size:.8125rem; color:var(--tf-terracotta-ink); font-weight:600; display:none; }
.tf-field.has-error input,.tf-field.has-error select,.tf-field.has-error textarea{ border-color:var(--tf-terracotta); }
.tf-field.has-error .err{ display:block; }
.tf-radios{ display:flex; flex-wrap:wrap; gap:var(--tf-s2); }
.tf-radios 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;
  transition:border-color var(--tf-fast), background var(--tf-fast);
}
.tf-radios label:has(input:checked){ border-color:var(--tf-forest); background:var(--tf-ivory-hi); }
.tf-radios input{ width:auto; min-height:0; accent-color:var(--tf-forest); }
@media (min-width:768px){ .tf-form--2col{ grid-template-columns:1fr 1fr; } .tf-field--full{ grid-column:1 / -1; } }
.tf-form__success{
  display:none; padding:var(--tf-s5);
  background:var(--tf-ivory-hi); border:1px solid var(--tf-forest);
  border-radius:var(--tf-r-card);
}
.tf-form__success h3{ font-size:1.375rem; }
.tf-form__success p{ margin-top:var(--tf-s2); color:var(--tf-ink-2); }
.tf-form.is-sent{ display:none; }
.tf-form__success.is-shown{ display:block; }
.tf-hp{ position:absolute; left:-9999px; }

/* ---------- 19b. CHECKLISTS ---------- */
.tf-checklist{ list-style:none; display:flex; flex-direction:column; gap:var(--tf-s2); }
.tf-checklist li{
  display:flex; gap:var(--tf-s2); align-items:flex-start;
  font-size:.9375rem; line-height:1.6; color:var(--tf-ink-2);
}
.tf-checklist li::before{
  content:""; flex:none; width:16px; height:16px; margin-top:5px;
  border:1.5px solid var(--tf-forest); border-radius:3px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='%230B4B37' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;
}
.tf-checklist--sm li{ font-size:.875rem; color:var(--tf-muted); }
.tf-checklist--x li::before{
  border-color:var(--tf-terracotta);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 2l6 6M8 2l-6 6' stroke='%23C0552F' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.tf-checklist--light li{ color:#D8CBB4; }
.tf-checklist--light li::before{
  border-color:var(--tf-terracotta-lift);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='%23E08055' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- 19c. CONTACT RAIL ---------- */
.tf-contact{ display:flex; flex-direction:column; gap:var(--tf-s4); }
.tf-contact__item{ display:flex; gap:var(--tf-s3); align-items:flex-start; }
.tf-contact__item svg{ flex:none; width:22px; height:22px; color:var(--tf-forest); margin-top:2px; }
.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); }

/* ---------- 19d. STEP INDICATOR (mobile forms) ---------- */
.tf-steps{ display:none; gap:var(--tf-s1); align-items:center; margin-bottom:var(--tf-s4); }
@media (max-width:767px){ .tf-steps{ display:flex; } }
.tf-steps span{ width:28px; height:4px; border-radius:2px; background:var(--tf-line); }
.tf-steps span[aria-current="step"]{ background:var(--tf-forest); }
.tf-form__nav{ display:flex; gap:var(--tf-s2); }

/* ---------- 20. BLOG ---------- */
.tf-bcard{
  display:flex; flex-direction:column; gap:var(--tf-s2);
  text-decoration:none; border-radius:var(--tf-r-card); overflow:hidden;
  background:var(--tf-ivory-hi); border:1px solid var(--tf-line);
  transition:box-shadow var(--tf-base), transform var(--tf-base) var(--tf-ease);
}
.tf-bcard:hover{ box-shadow:var(--tf-shadow); transform:translateY(-3px); }
.tf-bcard__img{ overflow:hidden; }
.tf-bcard__img img{ width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform var(--tf-zoom) var(--tf-ease); }
.tf-bcard:hover .tf-bcard__img img{ transform:scale(1.06); }
.tf-bcard__b{ padding:var(--tf-s3) var(--tf-s4) var(--tf-s4); display:flex; flex-direction:column; gap:var(--tf-s2); }
.tf-bcard h3{ font-size:1.1875rem; line-height:1.3; }
.tf-bcard__meta{ font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; color:var(--tf-muted); }
.tf-cat{ font-size:.6875rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; color:var(--tf-terracotta-ink); }
.tf-catrail{ display:flex; gap:var(--tf-s1); overflow-x:auto; padding-bottom:var(--tf-s2); list-style:none; scrollbar-width:none; -ms-overflow-style:none; }
.tf-catrail::-webkit-scrollbar{ width:0; height:0; display:none; }
.tf-catrail a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 16px;
  white-space:nowrap; text-decoration:none;
  border:1px solid var(--tf-line); border-radius:var(--tf-r-btn);
  font-size:.875rem; font-weight:600; color:var(--tf-forest); background:var(--tf-ivory-hi);
  transition:border-color var(--tf-fast), color var(--tf-fast), background var(--tf-fast);
}
.tf-catrail a:hover,.tf-catrail a[aria-current="page"]{ border-color:var(--tf-terracotta); color:var(--tf-terracotta-ink); background:rgba(192,85,47,.08); }

/* ---------- 20b. BLOG: FEATURE, PAGINATION, NEWSLETTER ---------- */
.tf-bcard--feature{ display:grid; }
@media (min-width:900px){
  .tf-bcard--feature{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:stretch; }
  .tf-bcard--feature .tf-bcard__img{ height:100%; }
  .tf-bcard--feature .tf-bcard__img img{ height:100%; aspect-ratio:auto; }
  .tf-bcard--feature .tf-bcard__b{ padding:var(--tf-s6); justify-content:center; gap:var(--tf-s3); }
}
.tf-bcard--feature .tf-body{ font-size:1rem; }

.tf-pagination{ display:flex; gap:var(--tf-s1); justify-content:center; margin-top:var(--tf-s6); }
.tf-pagination a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:0 12px;
  border:1px solid var(--tf-line); border-radius:var(--tf-r-btn);
  background:var(--tf-ivory-hi); color:var(--tf-forest);
  font-size:.875rem; font-weight:600; text-decoration:none;
  transition:border-color var(--tf-fast), background var(--tf-fast), color var(--tf-fast);
}
.tf-pagination a:hover{ border-color:var(--tf-terracotta); color:var(--tf-terracotta-ink); }
.tf-pagination a[aria-current="page"]{ background:var(--tf-forest); border-color:var(--tf-forest); color:var(--tf-ivory); }

.tf-newsletter{ display:flex; flex-direction:column; gap:var(--tf-s2); max-width:440px; margin:var(--tf-s5) auto 0; text-align:left; }
@media (min-width:560px){ .tf-newsletter{ flex-direction:row; align-items:flex-start; } .tf-newsletter .tf-field{ flex:1; } }

/* ---------- 20c. CONTACT LAYOUT + FORM STEPS ---------- */
.tf-contact-layout{ display:grid; gap:var(--tf-s6); }
@media (min-width:1024px){
  .tf-contact-layout{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--tf-s7); align-items:start; }
  .tf-contact-layout aside{ position:sticky; top:calc(var(--tf-header-h) + var(--tf-s4)); }
}
/* display:contents lets the two step wrappers vanish from the grid on desktop,
   so all ten fields share one two-column grid. [hidden] must still win. */
.tf-step{ display:contents; }
.tf-step[hidden]{ display:none; }
@media (max-width:767px){
  .tf-step{ display:grid; gap:var(--tf-s4); }
}

/* ---------- 21. MOTION ----------
   Motion roles, not one reflex. The previous build applied an identical
   fade-and-rise to all 67 .tf-reveal elements across the site, which reads as
   scaffolding rather than choreography. Here each reveal fits what it reveals:

     hero        one orchestrated page-load — the brand's thesis moment
     h2          horizontal clip wipe, editorial and calm
     imagery     slow cinematic settle (scale 1.05 -> 1)
     cta rows    short rise, because it is the action
     card grids  sibling stagger, capped at six
     everything else — prose, ledes, meta — no entrance at all

   Only the roles above are ever hidden. Every other .tf-reveal element renders
   visible from first paint, so a failed script cannot blank a section; motion
   enhances an already-visible default.

   Every `transition` is declared on the BASE (hidden) state, never only on the
   target state. A transition declared solely in the target rule is evaluated
   from the after-change style and can resolve as an instant jump instead of an
   animation. Base-state declaration always animates. */

/* Named curves. Ease-out only; no bounce, no elastic. */
:root{
  --tf-ease-out-quart:cubic-bezier(.25,1,.5,1);
  --tf-ease-out-quint:cubic-bezier(.22,1,.36,1);
  --tf-ease-out-expo:cubic-bezier(.16,1,.3,1);
}

/* ---- Hero: the one signature moment. Fires on load, not on scroll. ---- */
.tf-js .tf-hero__media img{
  transform:scale(1.07);
  transition:transform 1800ms var(--tf-ease-out-expo);
}
.tf-js.tf-ready .tf-hero__media img{ transform:none; }

.tf-js .tf-hero h1,
.tf-js h1.tf-h1{
  clip-path:inset(0 100% 0 0); transform:translateY(.1em);
  transition:clip-path 1100ms var(--tf-ease-out-expo),
             transform 1100ms var(--tf-ease-out-expo);
}
.tf-js.tf-ready .tf-hero h1,
.tf-js.tf-ready h1.tf-h1{ clip-path:inset(0 -3% 0 0); transform:none; }

.tf-js .tf-hero .tf-eyebrow,
.tf-js .tf-hero__sub,
.tf-js .tf-hero__proof,
.tf-js .tf-hero .tf-cta-row{
  opacity:0; transform:translateY(14px);
  transition:opacity 700ms var(--tf-ease-out-quart),
             transform 700ms var(--tf-ease-out-quart);
}
.tf-js .tf-hero .tf-eyebrow{ transition-delay:180ms; }
.tf-js .tf-hero__sub{ transition-delay:300ms; }
.tf-js .tf-hero__proof{ transition-delay:400ms; }
.tf-js .tf-hero .tf-cta-row{ transition-delay:500ms; }
.tf-js.tf-ready .tf-hero .tf-eyebrow,
.tf-js.tf-ready .tf-hero__sub,
.tf-js.tf-ready .tf-hero__proof,
.tf-js.tf-ready .tf-hero .tf-cta-row{ opacity:1; transform:none; }

/* ---- Section headings: a horizontal wipe, not a fade-up ---- */
.tf-js h2.tf-reveal,
.tf-js .tf-reveal h2{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 800ms var(--tf-ease-out-expo);
}
.tf-js h2.tf-reveal.is-in,
.tf-js .tf-reveal.is-in h2{ clip-path:inset(0 -3% 0 0); }

/* ---- Imagery: a slow settle. This is what carries "cinematic". ---- */
.tf-js .tf-reveal .tf-media img,
.tf-js .tf-reveal.tf-media img{
  opacity:0; transform:scale(1.05);
  transition:opacity 700ms var(--tf-ease-out-quart),
             transform 1400ms var(--tf-ease-out-expo);
}
.tf-js .tf-reveal.is-in .tf-media img,
.tf-js .tf-reveal.tf-media.is-in img{ opacity:1; transform:none; }

/* ---- Action rows: a short rise, because it is the thing to do next ---- */
.tf-js .tf-reveal.tf-cta-row{
  opacity:0; transform:translateY(12px);
  transition:opacity 500ms var(--tf-ease-out-quart) 100ms,
             transform 500ms var(--tf-ease-out-quart) 100ms;
}
.tf-js .tf-reveal.tf-cta-row.is-in{ opacity:1; transform:none; }

/* ---- Card grids: sibling stagger is legitimate; cap the total ---- */
.tf-js .tf-stagger > *{
  opacity:0; transform:translateY(14px);
  transition:opacity 560ms var(--tf-ease-out-quart),
             transform 560ms var(--tf-ease-out-quart);
  transition-delay:calc(min(var(--tf-i, 0), 5) * 55ms);
}
.tf-js .tf-stagger.is-in > *{ opacity:1; transform:none; }

/* ---- Loaded in a background tab: no entrance, just the finished state ---- */
.tf-js.tf-no-entrance .tf-hero h1,
.tf-js.tf-no-entrance h1.tf-h1,
.tf-js.tf-no-entrance h2.tf-reveal,
.tf-js.tf-no-entrance .tf-reveal h2{ clip-path:none !important; }
.tf-js.tf-no-entrance .tf-hero__media img,
.tf-js.tf-no-entrance .tf-hero .tf-eyebrow,
.tf-js.tf-no-entrance .tf-hero__sub,
.tf-js.tf-no-entrance .tf-hero__proof,
.tf-js.tf-no-entrance .tf-hero .tf-cta-row,
.tf-js.tf-no-entrance .tf-reveal .tf-media img,
.tf-js.tf-no-entrance .tf-reveal.tf-media img,
.tf-js.tf-no-entrance .tf-reveal.tf-cta-row,
.tf-js.tf-no-entrance .tf-stagger > *{
  opacity:1 !important; transform:none !important; transition:none !important;
}

.tf-magnetic{ will-change:transform; }

/* ---- Reduced motion: everything visible, nothing moves ---- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .tf-js .tf-hero h1,
  .tf-js h1.tf-h1,
  .tf-js h2.tf-reveal,
  .tf-js .tf-reveal h2{ clip-path:none !important; }
  .tf-js .tf-hero__media img,
  .tf-js .tf-reveal .tf-media img,
  .tf-js .tf-reveal.tf-media img,
  .tf-js .tf-hero .tf-eyebrow,
  .tf-js .tf-hero__sub,
  .tf-js .tf-hero__proof,
  .tf-js .tf-hero .tf-cta-row,
  .tf-js .tf-reveal,
  .tf-js .tf-reveal.tf-cta-row,
  .tf-js .tf-stagger > *{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  .tf-timeline li::before{ transform:scaleY(1) !important; transition:none !important; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ---------- 22. PRINT ---------- */
@media print{
  .tf-header,.tf-panel,.tf-sticky-cta,.tf-ctaband{ display:none !important; }
  body{ background:#fff; }
}