/* ================================================================
   TAYLOR FINANCIAL — MASTER DESIGN SYSTEM
   Extracted from: /taylor-financial/ · /our-services-v2/ · /our-process-v2/
   Font: Lato (300 · 400 · 700 · 900) throughout — no exceptions
   Palette: Garnet + Gold + Warm Ink
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700&display=swap');

/* ================================================================
   1. DESIGN TOKENS
   ================================================================ */
:root {
  /* Garnet palette */
  --garnet-950: #1e0008;
  --garnet-900: #300108;
  --garnet-800: #3d0818;
  --garnet-deep: #4a0f20;
  --garnet-700:  #5a0f26;
  --garnet-600:  #6b1a30;
  --garnet:      #6b1a30;
  --garnet-mid:  #7d2038;
  --garnet-500:  #8f2045;
  --garnet-400:  #a83058;

  /* Gold palette */
  --gold-900:  #4a3a10;
  --gold-800:  #6b5520;
  --gold-700:  #817024;
  --gold-600:  #928135;
  --gold-500:  #b8923a;
  --gold:      #c9a84c;
  --gold-400:  #c9a84c;
  --gold-light:#dbbe70;
  --gold-300:  #dbbe70;
  --gold-200:  #edd494;
  --gold-pale: #f0e0a8;
  --gold-100:  #f7edca;

  /* Ink — warm dark */
  --ink:       #1a110c;
  --ink-mid:   #3c2d22;
  --ink-soft:  #6a5641;
  --ink-muted: #9a8878;

  /* Surfaces */
  --white:      #ffffff;
  --cream:      #faf7f2;
  --cream-warm: #f3ead9;
  --cream-dark: #ebe2d0;

  /* Borders */
  --border:        rgba(180,148,72,0.13);
  --border-mid:    rgba(180,148,72,0.26);
  --border-strong: rgba(180,148,72,0.42);

  /* Shadows */
  --shadow-xs: 0 1px 4px rgba(74,15,32,0.06);
  --shadow-sm: 0 2px 12px rgba(74,15,32,0.08);
  --shadow-md: 0 6px 28px rgba(74,15,32,0.11);
  --shadow-lg: 0 16px 52px rgba(74,15,32,0.14);
  --shadow-xl: 0 28px 72px rgba(74,15,32,0.20);

  /* Typography — Lato throughout */
  --font:  'Lato', system-ui, sans-serif;
  --serif: 'Lato', system-ui, sans-serif;
  --sans:  'Lato', system-ui, sans-serif;

  /* Layout */
  --max-w:    1260px;
  --gutter:   clamp(20px, 4vw, 56px);
  --section-v:    clamp(72px, 8vw, 104px);
  --section-v-lg: clamp(80px, 9vw, 120px);

  /* Spacing — 8px base unit */
  --sp-1:  8px;  --sp-2:  16px; --sp-3:  24px; --sp-4:  32px;
  --sp-5:  40px; --sp-6:  48px; --sp-8:  64px; --sp-10: 80px;

  /* Easing */
  --ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --snap:        cubic-bezier(.22,.68,0,1.2);
}

/* ================================================================
   2. RESET & BASE
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-family: var(--font); font-size: 16px; font-weight: 400; line-height: 1.72; color: var(--ink-mid); background: var(--white); overflow-x: hidden; }
img  { display: block; max-width: 100%; height: auto; }
a    { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
ul, ol { list-style: none; }

/* ================================================================
   3. LAYOUT UTILITIES
   ================================================================ */
.tf-container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.tf-section    { padding: var(--section-v) 0; }
.tf-section-lg { padding: var(--section-v-lg) 0; }
.tf-sr-only    { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ================================================================
   4. TYPOGRAPHY SCALE
   ================================================================ */

/* Eyebrow label */
.tf-label {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font); font-size: 11px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold); margin-bottom: var(--sp-3);
}
.tf-label::before { content: ''; display: block; flex-shrink: 0; width: 28px; height: 1px; background: linear-gradient(90deg, var(--gold), rgba(201,168,76,0.3)); }
.tf-label::after  { content: ''; display: none;  flex-shrink: 0; width: 28px; height: 1px; background: linear-gradient(270deg, var(--gold), rgba(201,168,76,0.3)); }
.tf-label.centered         { justify-content: center; }
.tf-label.centered::after  { display: block; }
.tf-label.garnet           { color: var(--garnet); }
.tf-label.garnet::before   { background: linear-gradient(90deg, var(--garnet), rgba(107,26,48,0.3)); }
.tf-label.garnet::after    { background: linear-gradient(270deg, var(--garnet), rgba(107,26,48,0.3)); }
.tf-label.white            { color: rgba(255,255,255,0.65); }
.tf-label.white::before    { background: linear-gradient(90deg, rgba(255,255,255,0.45), transparent); }
.tf-label.white::after     { background: linear-gradient(270deg, rgba(255,255,255,0.45), transparent); }

/* H1 */
.tf-h1 { font-family: var(--font); font-size: clamp(36px,4.5vw,58px); font-weight: 300; line-height: 1.08; letter-spacing: 0.01em; color: var(--garnet); }
.tf-h1 em     { font-style: italic; }
.tf-h1 strong { font-weight: 700; }
.tf-h1.white  { color: #fff; }
.tf-h1.white em { color: var(--gold-light); }

/* H2 */
.tf-h2 { font-family: var(--font); font-size: clamp(28px,3.4vw,46px); font-weight: 300; line-height: 1.14; letter-spacing: 0.01em; color: var(--garnet); }
.tf-h2 em     { font-style: italic; }
.tf-h2 strong { font-weight: 700; }
.tf-h2.white  { color: #fff; }
.tf-h2.white em { color: var(--gold-light); }
.tf-h2.ink    { color: var(--ink); }

/* H3 */
.tf-h3 { font-family: var(--font); font-size: clamp(20px,2.1vw,28px); font-weight: 400; line-height: 1.26; letter-spacing: 0.01em; color: var(--garnet); }
.tf-h3.white { color: #fff; }
.tf-h3.ink   { color: var(--ink); }

/* H4 */
.tf-h4 { font-family: var(--font); font-size: clamp(16px,1.6vw,20px); font-weight: 700; line-height: 1.35; letter-spacing: 0.01em; color: var(--garnet); }
.tf-h4.white { color: #fff; }

/* Body */
.tf-body    { font-size: 17px; font-weight: 400; line-height: 1.82; color: var(--ink-mid); }
.tf-body.lg { font-size: 19px; }
.tf-body.sm { font-size: 15px; line-height: 1.72; }
.tf-body.white { color: rgba(255,255,255,0.70); }
.tf-body.muted { color: var(--ink-soft); }
.tf-body em  { font-style: italic; }

/* Caption */
.tf-caption       { font-size: 12px; font-weight: 400; line-height: 1.82; color: var(--ink-muted); }
.tf-caption.white { color: rgba(255,255,255,0.38); }

/* ================================================================
   5. ORNAMENT ELEMENTS
   ================================================================ */
.tf-rule        { display: block; width: 44px; height: 1px; background: linear-gradient(90deg, var(--gold), rgba(201,168,76,0)); margin: var(--sp-3) 0; }
.tf-rule.white  { background: linear-gradient(90deg, rgba(255,255,255,0.5), transparent); }
.tf-rule.wide   { width: 100%; background: linear-gradient(90deg, transparent, var(--border-mid), transparent); }

.tf-divider-thick {
  width: 100%; height: 3px; border: none;
  background: linear-gradient(90deg, transparent 0%, var(--gold-700) 15%, var(--gold) 40%, var(--gold-200) 50%, var(--gold) 60%, var(--gold-700) 85%, transparent 100%);
}
.tf-divider {
  border: none; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--border-mid) 20%, var(--border-mid) 80%, transparent 100%);
}

/* Ornament row */
.tf-orn { display: flex; align-items: center; gap: 16px; }
.tf-orn-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--border-mid), transparent); }
.tf-orn-gem  { width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); flex-shrink: 0; box-shadow: 0 0 8px rgba(201,168,76,0.5); }
.tf-orn-text { font-family: var(--font); font-size: 10.5px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); white-space: nowrap; padding: 0 var(--sp-2); }

/* Phase band */
.tf-phase-band { display: flex; align-items: center; padding: 20px var(--gutter); background: var(--cream); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.tf-phase-line  { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--border-mid), transparent); }
.tf-phase-label { font-family: var(--font); font-size: 10.5px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); padding: 0 var(--sp-5); white-space: nowrap; }

/* Gold gradient text */
.tf-gold-text {
  background: linear-gradient(135deg, var(--gold-700) 0%, var(--gold) 45%, var(--gold-200) 70%, var(--gold) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ================================================================
   6. BUTTONS
   ================================================================ */
.tf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 15px 36px; min-height: 52px;
  font-family: var(--font); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #fff; background: var(--garnet); border: 1.5px solid var(--garnet);
  text-decoration: none; position: relative; overflow: hidden;
  transition: background 0.28s, box-shadow 0.36s, transform 0.24s;
  box-shadow: 0 3px 16px rgba(107,26,48,0.18);
}
.tf-btn::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.09); transform: translateX(-101%); transition: transform 0.38s ease; }
.tf-btn:hover  { background: var(--garnet-mid); box-shadow: 0 8px 32px rgba(107,26,48,0.26); transform: translateY(-1px); color: #fff; }
.tf-btn:hover::after { transform: translateX(0); }
.tf-btn i { font-size: 11px; transition: transform 0.28s; }
.tf-btn:hover i { transform: translateX(4px); }

.tf-btn.gold    { background: var(--gold); border-color: var(--gold); color: var(--garnet-deep); box-shadow: 0 4px 22px rgba(201,168,76,0.35); }
.tf-btn.gold::after { background: rgba(255,255,255,0.14); }
.tf-btn.gold:hover  { background: var(--gold-light); border-color: var(--gold-light); color: var(--garnet-deep); box-shadow: 0 8px 36px rgba(201,168,76,0.45); }

.tf-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 13px 32px; min-height: 52px;
  font-family: var(--font); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--garnet); background: transparent;
  border: 1.5px solid rgba(107,26,48,0.28); text-decoration: none;
  transition: border-color 0.28s, background 0.28s, transform 0.24s;
}
.tf-btn-ghost:hover { border-color: var(--garnet); background: rgba(107,26,48,0.05); transform: translateY(-1px); }

.tf-btn-ghost.white { color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.28); }
.tf-btn-ghost.white:hover { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.07); color: #fff; }
.tf-btn-ghost.gold  { color: var(--gold); border-color: rgba(201,168,76,0.4); }
.tf-btn-ghost.gold:hover  { border-color: var(--gold); background: rgba(201,168,76,0.06); color: var(--gold-light); }

.tf-btn-row        { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tf-btn-row.center { justify-content: center; }

/* ================================================================
   7. NAVIGATION
   ================================================================ */
.tf-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 72px;
  background: rgba(48,1,8,0.88);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(201,168,76,0.12);
  transition: background 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.tf-nav.scrolled { background: rgba(30,0,8,0.97); box-shadow: 0 4px 32px rgba(0,0,0,0.4); }
.tf-nav-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); height: 72px; display: flex; align-items: center; justify-content: space-between; }

.tf-nav-logo          { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.tf-nav-logo-img      { height: 38px; width: auto; flex-shrink: 0; }
.tf-nav-logo-text     { display: flex; flex-direction: column; gap: 1px; }
.tf-nav-logo-name     { font-family: var(--font); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.16em; color: var(--gold); text-transform: uppercase; line-height: 1; }
.tf-nav-logo-tagline  { font-size: 0.52rem; font-weight: 400; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(201,168,76,0.5); line-height: 1; }

.tf-nav-links   { display: flex; align-items: center; gap: 4px; list-style: none; }
.tf-nav-links a { font-family: var(--font); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(250,247,242,0.7); padding: 8px 14px; border-radius: 3px; transition: color 0.2s, background 0.2s; }
.tf-nav-links a:hover,
.tf-nav-links a.active { color: var(--gold); background: rgba(201,168,76,0.08); }

.tf-nav-cta { font-family: var(--font); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--garnet-deep); background: linear-gradient(135deg, var(--gold-500), var(--gold-light)); padding: 10px 22px; border-radius: 2px; margin-left: 12px; transition: transform 0.2s var(--ease-out), box-shadow 0.2s, opacity 0.2s; }
.tf-nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(201,168,76,0.3); opacity: 0.92; }

.tf-nav-toggle      { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.tf-nav-toggle span { width: 24px; height: 1.5px; background: var(--gold); transition: transform 0.3s, opacity 0.3s; }
.tf-nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.tf-nav-toggle.open span:nth-child(2) { opacity: 0; }
.tf-nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.tf-nav-drawer { display: none; position: fixed; top: 72px; left: 0; right: 0; background: rgba(30,0,8,0.98); backdrop-filter: blur(20px); padding: 32px var(--gutter) 40px; border-bottom: 1px solid rgba(201,168,76,0.15); flex-direction: column; gap: 4px; transform: translateY(-8px); opacity: 0; transition: transform 0.3s var(--ease-out), opacity 0.3s; z-index: 999; }
.tf-nav-drawer.open { display: flex; transform: translateY(0); opacity: 1; }
.tf-nav-drawer a { font-family: var(--font); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(250,247,242,0.8); padding: 14px 0; border-bottom: 1px solid rgba(201,168,76,0.08); transition: color 0.2s, padding-left 0.2s; }
.tf-nav-drawer a:hover { color: var(--gold); padding-left: 8px; }
.tf-drawer-cta { margin-top: 20px !important; text-align: center; padding: 14px !important; background: linear-gradient(135deg, var(--gold-500), var(--gold-light)) !important; color: var(--garnet-deep) !important; font-weight: 700 !important; font-size: 0.65rem; letter-spacing: 0.2em; border-radius: 2px; border: none !important; }

/* ================================================================
   8. VIDEO HERO
   ================================================================ */
.tf-video-hero   { position: relative; width: 100%; height: 100vh; overflow: hidden; display: flex; align-items: flex-end; }
.tf-video-wrap   { position: absolute; inset: 0; z-index: 0; will-change: transform; transform: translateZ(0); }
.tf-video-wrap video { width: 100%; height: 100%; object-fit: cover; will-change: transform; transform: translateZ(0); }
.tf-video-curtain { position: absolute; inset: 0; background: #0d0006; z-index: 2; opacity: 1; transition: opacity 1.4s ease-out; pointer-events: none; }
.tf-video-curtain.lifted { opacity: 0; }
.tf-ov-base { position: absolute; inset: 0; z-index: 1; background: rgba(20,0,6,0.38); pointer-events: none; }
.tf-ov-vign { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, rgba(0,0,0,0.6) 100%); pointer-events: none; }
.tf-ov-text { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(4,0,8,0.82) 65%, rgba(4,0,8,0.99) 100%); }

.tf-video-content { position: relative; z-index: 3; width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter) clamp(56px,9vh,100px); }
.tf-video-badge {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px;
  font-family: var(--font); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold); text-shadow: 0 2px 12px rgba(0,0,0,0.9);
  opacity: 0; animation: tf-fade-up 0.8s 0.6s var(--ease-out) forwards;
}
.tf-video-badge::before { content: ''; width: 24px; height: 1px; background: var(--gold-500); }
.tf-video-h1 {
  font-family: var(--font); font-size: clamp(2.6rem,5.5vw,5rem); font-weight: 300; line-height: 1.08; letter-spacing: 0.01em; color: #fff; margin-bottom: 20px; max-width: 740px;
  text-shadow: 0 4px 60px rgba(0,0,0,1.00), 0 2px 20px rgba(0,0,0,0.98), 0 1px 8px rgba(20,0,5,0.95), 0 0 2px rgba(0,0,0,0.90);
  opacity: 0; animation: tf-fade-up 0.9s 0.75s var(--ease-out) forwards;
}
.tf-video-h1 em     { font-style: italic; color: var(--gold-light); }
.tf-video-h1 strong { font-weight: 700; }
.tf-video-sub {
  font-family: var(--font); font-size: 1rem; font-weight: 300; line-height: 1.75; color: rgba(255,255,255,0.96); max-width: 520px; margin-bottom: 40px;
  text-shadow: 0 4px 60px rgba(0,0,0,1.00), 0 2px 20px rgba(0,0,0,0.98), 0 1px 8px rgba(20,0,5,0.95), 0 0 2px rgba(0,0,0,0.90);
  opacity: 0; animation: tf-fade-up 0.9s 0.90s var(--ease-out) forwards;
}
.tf-video-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; opacity: 0; animation: tf-fade-up 0.9s 1.05s var(--ease-out) forwards; }

/* Hero stats strip */
.tf-hero-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; border: 1px solid rgba(201,168,76,0.15); border-radius: 3px; overflow: hidden; margin-top: 44px; max-width: 560px; opacity: 0; animation: tf-fade-up 0.9s 1.20s var(--ease-out) forwards; }
.tf-hero-stat  { padding: 24px 20px; background: rgba(0,0,0,0.35); text-align: center; border-right: 1px solid rgba(201,168,76,0.12); backdrop-filter: blur(10px); transition: background 0.3s; }
.tf-hero-stat:last-child { border-right: none; }
.tf-hero-stat:hover { background: rgba(201,168,76,0.06); }
.tf-hero-stat-num { font-family: var(--font); font-size: 1.9rem; font-weight: 700; line-height: 1; background: linear-gradient(135deg, var(--gold-700) 0%, var(--gold) 50%, var(--gold-200) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 5px; letter-spacing: 0; }
.tf-hero-stat-label { font-family: var(--font); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(250,247,242,0.5); line-height: 1.4; }

/* ================================================================
   9. PAGE HERO (interior pages)
   ================================================================ */
.tf-page-hero {
  min-height: 55vh; display: flex; align-items: flex-end;
  padding-bottom: clamp(48px,8vh,96px); padding-top: 140px;
  background: radial-gradient(ellipse 100% 80% at 15% 0%, var(--garnet-500) 0%, transparent 55%), radial-gradient(ellipse 60% 70% at 85% 100%, var(--garnet-800) 0%, transparent 60%), linear-gradient(155deg, var(--garnet-950) 0%, var(--garnet-800) 45%, var(--garnet-700) 100%);
  position: relative; overflow: hidden;
}
.tf-page-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); background-size: 200px; opacity: 0.04; }
.tf-page-hero-inner { position: relative; z-index: 2; padding: 0 var(--gutter); max-width: var(--max-w); margin: 0 auto; width: 100%; }
.tf-page-hero-inner::after { content: ''; display: block; margin-top: 48px; height: 3px; background: linear-gradient(90deg, transparent 0%, var(--gold-700) 15%, var(--gold) 40%, var(--gold-200) 50%, var(--gold) 60%, var(--gold-700) 85%, transparent 100%); }
.tf-breadcrumb     { display: flex; align-items: center; gap: 8px; font-family: var(--font); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(250,247,242,0.4); margin-bottom: 20px; }
.tf-breadcrumb a   { color: var(--gold-500); transition: color 0.2s; }
.tf-breadcrumb a:hover { color: var(--gold); }
.tf-breadcrumb-sep { color: rgba(201,168,76,0.3); }
.tf-page-hero-h1   { font-family: var(--font); font-size: clamp(2.2rem,5vw,4rem); font-weight: 300; line-height: 1.1; letter-spacing: 0.01em; color: #fff; }
.tf-page-hero-h1 em { font-style: italic; color: var(--gold-light); }
.tf-page-hero-sub  { font-size: 1rem; font-weight: 300; color: rgba(250,247,242,0.6); line-height: 1.75; max-width: 560px; margin-top: 20px; }

/* ================================================================
   10. TRUST MARQUEE
   ================================================================ */
.tf-marquee-bar { background: var(--garnet-950); border-top: 1px solid rgba(201,168,76,0.1); border-bottom: 1px solid rgba(201,168,76,0.1); padding: 18px 0; overflow: hidden; position: relative; }
.tf-marquee-bar::before, .tf-marquee-bar::after { content: ''; position: absolute; top: 0; bottom: 0; width: 100px; z-index: 2; background: linear-gradient(90deg, var(--garnet-950), transparent); }
.tf-marquee-bar::after { right: 0; left: auto; background: linear-gradient(270deg, var(--garnet-950), transparent); }
.tf-marquee-track  { display: flex; align-items: center; gap: 56px; animation: tf-marquee 28s linear infinite; white-space: nowrap; width: max-content; }
.tf-marquee-track:hover { animation-play-state: paused; }
.tf-marquee-item   { display: flex; align-items: center; gap: 14px; font-family: var(--font); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(250,247,242,0.4); flex-shrink: 0; transition: color 0.3s; }
.tf-marquee-item:hover { color: var(--gold); }
.tf-marquee-dot    { width: 3px; height: 3px; background: var(--gold-600); border-radius: 50%; flex-shrink: 0; }

/* ================================================================
   11. STATS SECTION
   ================================================================ */
.tf-stats-section { background: var(--garnet-800); border-top: 3px solid transparent; border-image: linear-gradient(90deg, transparent, var(--gold-500), transparent) 1; }
.tf-stats-grid    { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; }
.tf-stat-item     { padding: 52px 40px; text-align: center; border-right: 1px solid rgba(201,168,76,0.12); transition: background 0.4s; }
.tf-stat-item:last-child { border-right: none; }
.tf-stat-item:hover      { background: rgba(201,168,76,0.05); }
.tf-stat-big  { font-family: var(--font); font-size: clamp(2.2rem,4vw,3.4rem); font-weight: 700; line-height: 1; background: linear-gradient(135deg, var(--gold-700) 0%, var(--gold) 50%, var(--gold-200) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 10px; letter-spacing: 0; }
.tf-stat-name { font-family: var(--font); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(250,247,242,0.5); }

/* ================================================================
   12. SERVICE PHOTO CARDS (home grid)
   ================================================================ */
.tfs-section { position: relative; overflow: hidden; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: var(--white); }
.tfs-grid    { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; }
.tfs-card    { position: relative; overflow: hidden; aspect-ratio: 1/1; cursor: pointer; outline: none; }
.tfs-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.6s var(--ease-out); }
.tfs-card:hover .tfs-card-bg, .tfs-card:focus .tfs-card-bg { transform: scale(1.06); }
.tfs-card-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(74,15,32,0.12) 0%, rgba(74,15,32,0.55) 55%, rgba(30,0,8,0.88) 100%); transition: background 0.4s; }
.tfs-card:hover .tfs-card-overlay { background: linear-gradient(to bottom, rgba(74,15,32,0.18) 0%, rgba(74,15,32,0.66) 55%, rgba(30,0,8,0.94) 100%); }
.tfs-card-content    { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: clamp(24px,3.5vw,44px); }
.tfs-card-icon       { margin-bottom: 14px; width: 44px; height: 44px; flex-shrink: 0; }
.tfs-card-icon svg   { width: 44px; height: 44px; fill: none; stroke: rgba(201,168,76,0.85); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.3s; }
.tfs-card:hover .tfs-card-icon svg { stroke: var(--gold-light); }
.tfs-card-title      { font-family: var(--font); font-size: clamp(20px,2vw,26px); font-weight: 300; line-height: 1.2; color: #fff; letter-spacing: 0.01em; margin-bottom: 12px; }
.tfs-card-title-rule { width: 28px; height: 1.5px; background: var(--gold); transition: width 0.4s var(--ease-out), background 0.3s; }
.tfs-card:hover .tfs-card-title-rule { width: 52px; background: var(--gold-light); }

/* ================================================================
   13. PROCESS CARDS (dark garnet background)
   ================================================================ */
.tf-process {
  background-color: var(--garnet-800);
  background-image: radial-gradient(ellipse 120% 60% at 20% 10%, var(--garnet-700) 0%, transparent 60%), radial-gradient(ellipse 80% 80% at 80% 90%, var(--garnet-500) 0%, transparent 50%), linear-gradient(180deg, var(--garnet-950) 0%, var(--garnet-800) 40%, var(--garnet-700) 70%, var(--garnet-800) 100%);
  position: relative; overflow: hidden;
}
.tf-process::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E"); opacity: 0.028; }
.tf-process > * { position: relative; z-index: 1; }
.tf-process-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; }

.tf-card { padding: clamp(36px,4.5vw,56px) clamp(28px,3.5vw,44px); background: rgba(250,247,242,0.97); border: 1px solid rgba(201,168,76,0.14); display: flex; flex-direction: column; position: relative; overflow: hidden; transition: box-shadow 0.36s, transform 0.3s var(--snap); }
.tf-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--garnet-500), transparent); transform: scaleX(0); transform-origin: center; transition: transform 0.5s var(--snap); }
.tf-card:hover   { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.tf-card:hover::before { transform: scaleX(1); }

.tf-card--featured { background: var(--garnet-600); border-color: rgba(201,168,76,0.25); box-shadow: 0 24px 64px rgba(74,15,32,0.45), inset 0 1px 0 rgba(255,255,255,0.06); transform: translateY(-6px); z-index: 2; }
.tf-card--featured:hover { transform: translateY(-12px); }
.tf-card--featured::before { background: linear-gradient(90deg, transparent, var(--gold-light), var(--gold), var(--gold-light), transparent); transform: scaleX(1); }

.tf-card-step   { font-family: var(--font); font-size: 10px; font-weight: 700; letter-spacing: 0.30em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--sp-3); }
.tf-card--featured .tf-card-step { color: var(--gold-light); }
.tf-card-icon   { margin-bottom: var(--sp-3); width: 44px; height: 44px; }
.tf-card-icon img { width: 44px; height: 44px; object-fit: contain; filter: brightness(0) saturate(100%) invert(11%) sepia(61%) saturate(1200%) hue-rotate(320deg) brightness(80%); }
.tf-card--featured .tf-card-icon img { filter: none; }
.tf-card-title  { font-family: var(--font); font-size: clamp(18px,1.9vw,24px); font-weight: 400; line-height: 1.26; color: var(--garnet); margin-bottom: var(--sp-2); letter-spacing: 0.01em; }
.tf-card--featured .tf-card-title { color: #fff; }
.tf-card-rule   { display: block; width: 36px; height: 1.5px; background: linear-gradient(90deg, var(--gold), rgba(201,168,76,0)); margin: 0 0 var(--sp-3); }
.tf-card--featured .tf-card-rule { background: linear-gradient(90deg, var(--gold-light), rgba(219,190,112,0)); }
.tf-card-body   { font-family: var(--font); font-size: 15.5px; font-weight: 400; line-height: 1.78; color: var(--ink-soft); flex: 1; margin-bottom: var(--sp-4); }
.tf-card--featured .tf-card-body { color: rgba(255,255,255,0.72); }
.tf-card-link   { font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; color: var(--garnet); display: inline-flex; align-items: center; gap: 8px; transition: gap 0.3s, color 0.2s; }
.tf-card-link:hover { gap: 14px; color: var(--garnet-mid); }
.tf-card--featured .tf-card-link { color: rgba(255,255,255,0.55); }
.tf-card--featured .tf-card-link:hover { color: var(--gold-light); }
.tf-card-btn    { display: inline-flex; align-items: center; gap: 10px; padding: 13px 28px; font-family: var(--font); font-size: 10.5px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; color: var(--garnet-deep); background: var(--gold); border: none; text-decoration: none; transition: background 0.28s, box-shadow 0.3s, transform 0.24s; box-shadow: 0 4px 18px rgba(201,168,76,0.35); }
.tf-card-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.26s; }
.tf-card-btn:hover { background: var(--gold-light); transform: translateY(-1px); box-shadow: 0 8px 28px rgba(201,168,76,0.45); }
.tf-card-btn:hover svg { transform: translateX(4px); }

/* ================================================================
   14. AWARDS GRID
   ================================================================ */
.tf-awards-section { background-color: var(--garnet-950); background-image: radial-gradient(ellipse 90% 70% at 50% -10%, rgba(115,37,60,0.9) 0%, transparent 65%); position: relative; overflow: hidden; }
.tf-awards-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 16px; margin-top: var(--sp-8); }
.tf-award-card  { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px 12px; border-radius: 3px; border: 1px solid rgba(201,168,76,0.18); background: rgba(255,255,255,0.04); transition: all 0.4s var(--ease-out); cursor: pointer; box-shadow: 0 2px 16px rgba(0,0,0,0.2); }
.tf-award-card:hover { background: rgba(201,168,76,0.08); border-color: rgba(201,168,76,0.35); transform: scale(1.04); }
.tf-award-img   { width: 78%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35)); transition: transform 0.4s; }
.tf-award-card:hover .tf-award-img { transform: scale(1.08); }
.tf-award-year  { font-family: var(--font); font-size: 0.54rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(201,168,76,0.55); transition: color 0.3s; }
.tf-award-card:hover .tf-award-year { color: var(--gold); }

/* ================================================================
   15. MEDIA LOGOS
   ================================================================ */
.tf-media-section        { background: var(--cream-dark); position: relative; }
.tf-media-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent 0%, var(--gold-700) 15%, var(--gold) 40%, var(--gold-200) 50%, var(--gold) 60%, var(--gold-700) 85%, transparent 100%); }
.tf-media-logos { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: nowrap; margin-top: var(--sp-8); }
.tf-media-item  { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 24px; border-right: 1px solid rgba(107,15,26,0.08); transition: background 0.3s; }
.tf-media-item:last-child { border-right: none; }
.tf-media-item:hover { background: rgba(107,15,26,0.04); }
.tf-media-text  { font-family: var(--font); font-size: 1.2rem; font-weight: 300; color: rgba(28,28,30,0.3); letter-spacing: 0.05em; white-space: nowrap; transition: color 0.3s; }
.tf-media-item:hover .tf-media-text { color: rgba(107,15,26,0.6); }

/* ================================================================
   16. CTA BANNER
   ================================================================ */
.tf-cta-banner { background: linear-gradient(135deg, var(--garnet-950) 0%, var(--garnet-800) 50%, var(--garnet-950) 100%); position: relative; overflow: hidden; text-align: center; }
.tf-cta-banner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent 0%, var(--gold-700) 15%, var(--gold) 40%, var(--gold-200) 50%, var(--gold) 60%, var(--gold-700) 85%, transparent 100%); }
.tf-cta-banner::after  { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent 0%, var(--gold-700) 15%, var(--gold) 40%, var(--gold-200) 50%, var(--gold) 60%, var(--gold-700) 85%, transparent 100%); }
.tf-cta-inner  { max-width: 760px; margin: 0 auto; padding: var(--section-v) var(--gutter); }
.tf-cta-orn    { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: var(--sp-5); }
.tf-cta-orn-line { width: 64px; height: 1px; background: rgba(201,168,76,0.3); }
.tf-cta-gem    { width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 10px rgba(201,168,76,0.45); }
.tf-cta-h      { font-family: var(--font); font-size: clamp(26px,3vw,40px); font-weight: 300; line-height: 1.18; letter-spacing: 0.01em; color: #fff; max-width: 580px; margin: 0 auto var(--sp-2); }
.tf-cta-h em   { font-style: italic; color: var(--gold-light); }
.tf-cta-sub    { font-family: var(--font); font-size: clamp(15px,1.5vw,17px); font-weight: 300; font-style: italic; line-height: 1.72; color: rgba(250,247,242,0.6); max-width: 540px; margin: 0 auto var(--sp-8); }

/* ================================================================
   17. FOOTER
   ================================================================ */
.tf-footer      { background: var(--garnet-950); border-top: 1px solid rgba(201,168,76,0.1); padding: 72px var(--gutter) 40px; }
.tf-footer-inner { max-width: var(--max-w); margin: 0 auto; }
.tf-footer-top  { display: grid; grid-template-columns: 280px 1fr 1fr 1fr; gap: 60px; margin-bottom: 64px; }
.tf-footer-brand-name    { font-family: var(--font); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.tf-footer-brand-tagline { font-family: var(--font); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-700); margin-bottom: 20px; }
.tf-footer-brand-text    { font-family: var(--font); font-size: 0.8rem; color: rgba(250,247,242,0.4); line-height: 1.8; }
.tf-footer-col-title     { font-family: var(--font); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-500); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid rgba(201,168,76,0.12); }
.tf-footer-links         { display: flex; flex-direction: column; gap: 10px; }
.tf-footer-links a       { font-family: var(--font); font-size: 0.8rem; color: rgba(250,247,242,0.45); transition: color 0.2s, padding-left 0.2s; }
.tf-footer-links a:hover { color: var(--gold); padding-left: 4px; }
.tf-footer-contact-item  { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.tf-footer-contact-icon  { color: var(--gold-600); font-size: 0.85rem; margin-top: 2px; flex-shrink: 0; }
.tf-footer-contact-text  { font-family: var(--font); font-size: 0.78rem; color: rgba(250,247,242,0.45); line-height: 1.6; }
.tf-footer-socials       { display: flex; gap: 14px; margin-top: 24px; }
.tf-footer-social        { width: 36px; height: 36px; border: 1px solid rgba(201,168,76,0.2); display: flex; align-items: center; justify-content: center; color: var(--gold-500); font-size: 0.85rem; border-radius: 2px; transition: all 0.2s; }
.tf-footer-social:hover  { background: rgba(201,168,76,0.1); border-color: rgba(201,168,76,0.4); color: var(--gold); }
.tf-footer-bottom { border-top: 1px solid rgba(201,168,76,0.08); padding-top: 28px; display: flex; align-items: flex-start; gap: 32px; justify-content: space-between; flex-wrap: wrap; }
.tf-footer-copy   { font-family: var(--font); font-size: 0.7rem; color: rgba(250,247,242,0.25); line-height: 1.8; max-width: 800px; }
.tf-footer-legal  { display: flex; gap: 20px; flex-shrink: 0; }
.tf-footer-legal a { font-family: var(--font); font-size: 0.65rem; color: rgba(250,247,242,0.3); letter-spacing: 0.1em; transition: color 0.2s; }
.tf-footer-legal a:hover { color: var(--gold-500); }

/* ================================================================
   18. SCROLL REVEAL
   ================================================================ */
.tf-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.72s cubic-bezier(.22,.68,0,1.1), transform 0.72s cubic-bezier(.22,.68,0,1.1); }
.tf-reveal.in { opacity: 1; transform: none; }
.tf-reveal.d1 { transition-delay: 0.10s; }
.tf-reveal.d2 { transition-delay: 0.22s; }
.tf-reveal.d3 { transition-delay: 0.36s; }
.tf-reveal.d4 { transition-delay: 0.52s; }
.tf-reveal.d5 { transition-delay: 0.68s; }
/* Legacy compat */
.reveal           { opacity: 0; transform: translateY(32px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal.visible   { opacity: 1; transform: translateY(0); }
.reveal-delay-1   { transition-delay: 0.1s; }
.reveal-delay-2   { transition-delay: 0.2s; }
.reveal-delay-3   { transition-delay: 0.3s; }
.reveal-delay-4   { transition-delay: 0.4s; }
.reveal-delay-5   { transition-delay: 0.5s; }

/* ================================================================
   19. ANIMATIONS
   ================================================================ */
@keyframes tf-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tf-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes tf-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ================================================================
   20. TABS (sticky service tab nav)
   ================================================================ */
.tf-tabs-bar   { position: sticky; top: 0; z-index: 900; background: var(--white); border-bottom: 1px solid var(--border); box-shadow: 0 2px 16px rgba(74,15,32,0.07); }
.tf-tabs-track { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); display: flex; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.tf-tabs-track::-webkit-scrollbar { display: none; }
.tf-tab        { flex-shrink: 0; background: none; border: none; cursor: pointer; padding: 20px 28px; display: flex; align-items: center; gap: 9px; font-family: var(--font); font-size: 11.5px; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-muted); position: relative; white-space: nowrap; transition: color 0.24s; }
.tf-tab::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--garnet); transform: scaleX(0); transform-origin: center; transition: transform 0.30s var(--snap); }
.tf-tab:hover  { color: var(--garnet-mid); }
.tf-tab.active { color: var(--garnet); font-weight: 700; }
.tf-tab.active::after { transform: scaleX(1); }
.tf-tab i { font-size: 14px; }

/* ================================================================
   21. GLOBAL FONT OVERRIDE — forces Lato on all WP/Elementor output
   ================================================================ */
body, body *, h1, h2, h3, h4, h5, h6, p, a, span, div, li, td, th,
button, input, textarea, select,
.av-special-heading-tag, .av_textblock_section *, .avia_textblock *,
[class*="av-"], [class*="avia-"], [class*="elementor-"],
.tfs *, .tfs-section *, .tf-process *, .tfp *, .tfe * {
  font-family: 'Lato', system-ui, sans-serif !important;
}

/* ================================================================
   22. RESPONSIVE
   ================================================================ */
@media (max-width: 1100px) {
  .tf-stats-grid { grid-template-columns: repeat(2,1fr); }
  .tf-awards-grid { grid-template-columns: repeat(3,1fr); }
  .tf-footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .tfs-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .tf-nav-links, .tf-nav-cta { display: none; }
  .tf-nav-toggle { display: flex; }
  .tf-media-logos { flex-wrap: wrap; }
  .tf-media-item  { flex: 0 0 50%; border-right: none; border-bottom: 1px solid rgba(107,15,26,0.08); }
  .tf-process-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  :root { --section-v: clamp(56px,8vw,80px); }
  .tf-stats-grid  { grid-template-columns: repeat(2,1fr); }
  .tf-stat-item   { border-bottom: 1px solid rgba(201,168,76,0.08); }
  .tf-awards-grid { grid-template-columns: repeat(3,1fr); }
  .tf-footer-top  { grid-template-columns: 1fr; gap: 40px; }
  .tf-btn-row     { flex-direction: column; align-items: stretch; }
  .tf-btn, .tf-btn-ghost { width: 100%; justify-content: center; }
  .tf-video-actions { flex-direction: column; align-items: flex-start; }
  .tf-hero-stats  { max-width: 100%; }
}
@media (max-width: 560px) {
  .tfs-grid       { grid-template-columns: 1fr; }
  .tf-stats-grid  { grid-template-columns: 1fr; }
  .tf-awards-grid { grid-template-columns: repeat(2,1fr); }
  .tf-media-item  { flex: 0 0 100%; }
  .tf-hero-stats  { grid-template-columns: 1fr; }
}