/* ==========================================================================
   THELIVERANK — Design System v2
   Built to map 1:1 onto Elementor Free containers + core widgets.
   Every visual decision lives here. The HTML carries only structure + classes.
   ========================================================================== */

/* Fonts are self-hosted in assets/fonts (no Google Fonts request). */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/manrope-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/manrope-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/manrope-latin-800-normal.woff2') format('woff2')}

/* --------------------------------------------------------------------------
   TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* colour — unchanged from v1 prototype */
  --c-ink:#111111;
  --c-body:#444444;
  --c-muted:#6B7280;
  --c-faint:#9CA3AF;
  --c-accent:#2F80ED;
  --c-accent-dk:#1a5fbd;
  --c-accent-soft:#EFF6FF;
  --c-green:#16A34A;
  --c-green-soft:#F0FDF4;
  --c-amber:#F59E0B;
  --c-amber-soft:#FFFBEB;
  --c-purple:#7C3AED;
  --c-purple-soft:#F5F3FF;
  --c-line:#E5E7EB;
  --c-card-line:#E9EDF3;
  --c-subtle:#F9FAFB;
  --c-white:#FFFFFF;

  /* type */
  --f-head:'Manrope',system-ui,sans-serif;
  --f-body:'Inter',system-ui,sans-serif;
  --t-h1:clamp(2rem,1.3rem + 3.4vw,3.5rem);
  --t-h2:clamp(1.5rem,1.15rem + 1.7vw,2.25rem);
  --t-h2-xl:clamp(1.75rem,1.1rem + 3.2vw,3.25rem);
  --t-h3:clamp(1.0625rem,1rem + .35vw,1.25rem);
  --t-h4:1rem;
  --t-lead:clamp(.9375rem,.9rem + .3vw,1.0625rem);
  --t-body:.9375rem;
  --t-sm:.8125rem;
  --t-xs:.75rem;
  --t-mono:clamp(1.5rem,1.1rem + 1.6vw,2.25rem);

  /* spacing scale — 8pt based */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px;
  --sec-y:clamp(56px,7vw,96px);   /* section vertical padding */
  --sec-x:clamp(16px,4vw,20px);   /* section horizontal padding */
  --gap:clamp(16px,2vw,24px);     /* grid gap */
  --wrap:1140px;                  /* Elementor content width */
  --wrap-narrow:760px;

  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(17,17,17,.04);
  --sh-md:0 4px 16px rgba(17,17,17,.06);
  --sh-lg:0 16px 48px rgba(17,17,17,.10);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--f-body);font-size:var(--t-body);line-height:1.7;
  color:var(--c-body);background:var(--c-white);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .2s}
h1,h2,h3,h4{font-family:var(--f-head);color:var(--c-ink);line-height:1.18;margin:0;font-weight:800;letter-spacing:-.02em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px;border-radius:4px}
::selection{background:rgba(47,128,237,.15)}

/* --------------------------------------------------------------------------
   LAYOUT PRIMITIVES   -> Elementor container
   .tlr-sec  = top-level container (boxed)
   .tlr-row  = inner container, flex-direction:row
   .tlr-cN   = child container width
   -------------------------------------------------------------------------- */
.tlr-sec{padding:var(--sec-y) var(--sec-x)}
.tlr-sec-sm{padding:clamp(36px,4.5vw,56px) var(--sec-x)}
.tlr-wrap{max-width:var(--wrap);margin-inline:auto;width:100%}
.tlr-narrow{max-width:var(--wrap-narrow);margin-inline:auto;width:100%}
.tlr-bg-subtle{background:var(--c-subtle)}
.tlr-bg-ink{background:var(--c-ink);color:#D1D5DB}
.tlr-bg-ink h1,.tlr-bg-ink h2,.tlr-bg-ink h3,.tlr-bg-ink h4{color:#fff}

.tlr-row{display:flex;flex-wrap:wrap;gap:var(--gap);align-items:flex-start}
.tlr-row-center{align-items:center}
.tlr-row-mid{justify-content:center}
.tlr-col{display:flex;flex-direction:column;gap:var(--s4)}
.tlr-c2{width:calc(50% - var(--gap) / 2)}
.tlr-c3{width:calc(33.3333% - var(--gap) * 2 / 3)}
.tlr-c4{width:calc(25% - var(--gap) * 3 / 4)}
.tlr-center{text-align:center;align-items:center}

/* section heading block */
.tlr-head{max-width:660px;margin-inline:auto;text-align:center;display:flex;
  flex-direction:column;align-items:center;gap:var(--s3);margin-bottom:var(--s7)}
.tlr-head-left{margin-inline:0;text-align:left;align-items:flex-start}

/* --------------------------------------------------------------------------
   TYPE HELPERS   -> Elementor heading / text-editor
   -------------------------------------------------------------------------- */
.tlr-h1{font-size:var(--t-h1)}
.tlr-h2{font-size:var(--t-h2)}
.tlr-h2-xl{font-size:var(--t-h2-xl);letter-spacing:-.03em}
.tlr-h3{font-size:var(--t-h3);font-weight:700}
.tlr-h4{font-size:var(--t-h4);font-weight:700}
.tlr-lead{font-size:var(--t-lead);color:var(--c-body);line-height:1.7}
.tlr-body{font-size:var(--t-body);color:var(--c-muted)}
.tlr-sm{font-size:var(--t-sm);color:var(--c-muted)}
.tlr-xs{font-size:var(--t-xs);color:var(--c-faint)}
.tlr-grad{background:linear-gradient(135deg,var(--c-accent),#8B5CF6);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tlr-accent{color:var(--c-accent)}

/* eyebrow / badge */
.tlr-badge{display:inline-flex;align-items:center;gap:var(--s2);padding:5px 13px;
  border-radius:var(--r-pill);font-family:var(--f-body);font-size:var(--t-xs);
  font-weight:600;letter-spacing:.01em;background:var(--c-accent-soft);color:var(--c-accent)}
.tlr-badge-green{background:var(--c-green-soft);color:var(--c-green)}
.tlr-badge-amber{background:var(--c-amber-soft);color:var(--c-amber)}
.tlr-badge-purple{background:var(--c-purple-soft);color:var(--c-purple)}
.tlr-badge svg{width:14px;height:14px;flex:0 0 auto}
.tlr-eyebrow{font-family:var(--f-body);font-size:var(--t-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;color:var(--c-faint)}

/* --------------------------------------------------------------------------
   BUTTONS   -> Elementor button
   -------------------------------------------------------------------------- */
.tlr-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-family:var(--f-body);font-size:var(--t-body);font-weight:600;
  padding:13px 26px;border-radius:var(--r-pill);border:1.5px solid transparent;
  cursor:pointer;transition:background .25s,border-color .25s,color .25s,transform .25s,box-shadow .25s}
.tlr-btn svg{width:17px;height:17px;flex:0 0 auto}
.tlr-btn-primary{background:var(--c-accent);color:#fff}
.tlr-btn-primary:hover{background:var(--c-accent-dk);transform:translateY(-2px);box-shadow:0 8px 24px rgba(47,128,237,.28)}
.tlr-btn-ghost{background:transparent;color:var(--c-ink);border-color:var(--c-line)}
.tlr-btn-ghost:hover{border-color:var(--c-accent);color:var(--c-accent)}
.tlr-btn-white{background:#fff;color:var(--c-ink)}
.tlr-btn-white:hover{background:#F3F4F6;transform:translateY(-2px)}
.tlr-btn-wa{background:#25D366;color:#fff}
.tlr-btn-wa:hover{background:#1eb355;transform:translateY(-2px)}
.tlr-link{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);
  font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--c-accent)}
.tlr-link svg{width:14px;height:14px;flex:0 0 auto}
.tlr-link:hover{gap:10px}
.tlr-link-green{color:var(--c-green)} .tlr-link-amber{color:var(--c-amber)} .tlr-link-purple{color:var(--c-purple)}

/* Safety net: any inline SVG that isn't explicitly sized stays text-sized.
   This is what broke the badges and the card links in v2.0. */
.tlr-btn svg,.tlr-badge svg,.tlr-link svg,.tlr-list svg,.tlr-check svg,
.tlr-stars svg,.tlr-social svg,.tlr-logo i svg{flex:0 0 auto}
a svg:not([class]),span svg:not([class]){max-width:1.4em;max-height:1.4em}

/* --------------------------------------------------------------------------
   CARD   -> Elementor container. Solid, not glass: one border, one shadow.
   -------------------------------------------------------------------------- */
.tlr-card{display:flex;flex-direction:column;gap:var(--s3);background:var(--c-white);
  border:1px solid var(--c-card-line);border-radius:var(--r-lg);padding:clamp(20px,2.4vw,30px);
  box-shadow:var(--sh-sm);transition:transform .3s,box-shadow .3s,border-color .3s}
.tlr-card-hov:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:rgba(47,128,237,.28)}
.tlr-card-flat{box-shadow:none}
.tlr-card-pad-0{padding:0;overflow:hidden}

/* icon tile -> Elementor icon / icon-box */
.tlr-ico{width:clamp(48px,5vw,58px);aspect-ratio:1;border-radius:var(--r-md);
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.tlr-ico svg{width:52%;height:52%}
.tlr-ico-round{border-radius:50%}
.tlr-ico-blue{background:var(--c-accent-soft);color:var(--c-accent)}
.tlr-ico-green{background:var(--c-green-soft);color:var(--c-green)}
.tlr-ico-amber{background:var(--c-amber-soft);color:var(--c-amber)}
.tlr-ico-purple{background:var(--c-purple-soft);color:var(--c-purple)}
.tlr-ico-sm{width:34px;border-radius:var(--r-sm)}

/* checklist -> Elementor icon-list */
.tlr-list{display:flex;flex-direction:column;gap:7px}
.tlr-list li{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-xs);color:var(--c-body)}
.tlr-list svg{width:15px;height:15px;flex:0 0 auto;color:var(--c-accent)}
.tlr-list-green svg{color:var(--c-green)} .tlr-list-amber svg{color:var(--c-amber)} .tlr-list-purple svg{color:var(--c-purple)}

/* ==========================================================================
   SIGNATURE: THE METRIC PILL
   The one repeated device across the whole site. Everything this agency sells
   is a number (DR, traffic, price, uplift) so the number is the ornament.
   ========================================================================== */
.tlr-metric{display:flex;flex-direction:column;gap:2px;padding-top:var(--s3);
  border-top:3px solid var(--c-accent);min-width:0}
.tlr-metric-n{font-family:var(--f-head);font-size:var(--t-mono);font-weight:800;
  color:var(--c-ink);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tlr-metric-l{font-size:var(--t-xs);color:var(--c-muted);line-height:1.35}
.tlr-metric-green{border-top-color:var(--c-green)}
.tlr-metric-amber{border-top-color:var(--c-amber)}
.tlr-metric-purple{border-top-color:var(--c-purple)}
.tlr-metrics{display:flex;flex-wrap:wrap;gap:var(--s5)}
.tlr-metrics>.tlr-metric{flex:1 1 120px;min-width:0}
.tlr-metrics-4>.tlr-metric{flex:1 1 calc(25% - var(--s5) * 3 / 4)}

/* DR chip — the marketplace version of the same idea */
.tlr-dr{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:var(--r-md);background:var(--c-accent-soft);flex:0 0 auto}
.tlr-dr b{font-family:var(--f-head);font-size:1.0625rem;font-weight:800;color:var(--c-accent);line-height:1}
.tlr-dr span{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--c-accent);opacity:.75}
.tlr-dr-high{background:#ECFDF5}.tlr-dr-high b,.tlr-dr-high span{color:var(--c-green)}
.tlr-dr-mid{background:var(--c-amber-soft)}.tlr-dr-mid b,.tlr-dr-mid span{color:var(--c-amber)}

/* --------------------------------------------------------------------------
   HEADER   -> Elementor Header template (needs free "Elementor Header &
   Footer Builder" plugin — Theme Builder is Pro only)
   -------------------------------------------------------------------------- */
.tlr-hdr{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--c-line)}
.tlr-hdr-in{max-width:var(--wrap);margin-inline:auto;padding:var(--s3) var(--sec-x);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.tlr-logo{display:flex;align-items:center;gap:var(--s2);font-family:var(--f-head);
  font-weight:800;font-size:1.0625rem;color:var(--c-ink);letter-spacing:-.02em}
.tlr-logo i{width:32px;height:32px;border-radius:9px;background:var(--c-accent);
  display:grid;place-items:center;color:#fff;flex:0 0 auto}
.tlr-logo i svg{width:17px;height:17px}
.tlr-nav{display:none;align-items:center;gap:var(--s5);font-size:var(--t-sm);font-weight:500}
.tlr-nav a:hover{color:var(--c-accent)}
.tlr-nav a[aria-current]{color:var(--c-accent);font-weight:600}
.tlr-hdr-cta{display:none}
.tlr-burger{width:42px;height:42px;border:1px solid var(--c-line);border-radius:11px;
  background:#fff;display:grid;place-items:center;cursor:pointer}
.tlr-burger svg{width:20px;height:20px}
@media (min-width:1000px){
  .tlr-nav{display:flex}
  .tlr-hdr-cta{display:inline-flex}
  .tlr-burger{display:none}
}
/* mobile drawer */
.tlr-drawer{position:fixed;inset:0;z-index:200;background:#fff;padding:var(--s5) var(--sec-x);
  transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;gap:var(--s2);overflow-y:auto}
.tlr-drawer[data-open]{transform:translateX(0)}
.tlr-drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s4)}
.tlr-drawer nav{display:flex;flex-direction:column}
.tlr-drawer nav a{padding:14px 0;border-bottom:1px solid #F3F4F6;font-size:1rem;font-weight:500;color:var(--c-ink)}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.tlr-hero{position:relative;overflow:hidden;padding-top:clamp(40px,5vw,72px)}
.tlr-hero::before{content:"";position:absolute;width:min(560px,90vw);aspect-ratio:1;
  border-radius:50%;background:var(--c-accent);opacity:.10;filter:blur(70px);
  top:-22%;right:-14%;pointer-events:none}
.tlr-hero::after{content:"";position:absolute;width:min(340px,60vw);aspect-ratio:1;
  border-radius:50%;background:#A78BFA;opacity:.10;filter:blur(70px);
  bottom:-18%;left:-10%;pointer-events:none}
.tlr-hero>*{position:relative;z-index:1}
.tlr-hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s5)}
.tlr-hero-btns{display:flex;flex-wrap:wrap;gap:var(--s3)}
.tlr-shot{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--c-card-line);
  box-shadow:var(--sh-lg);background:#fff}
.tlr-shot img{width:100%;aspect-ratio:16/11;object-fit:cover}

/* --------------------------------------------------------------------------
   LOGO STRIP
   -------------------------------------------------------------------------- */
.tlr-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(20px,4vw,48px)}
.tlr-logos img{height:clamp(18px,2.2vw,26px);width:auto;opacity:.4;
  filter:grayscale(100%);transition:opacity .3s,filter .3s}
.tlr-logos img:hover{opacity:1;filter:none}

/* --------------------------------------------------------------------------
   PRICE TIER CARD
   -------------------------------------------------------------------------- */
.tlr-tier{align-items:flex-start;position:relative}
.tlr-tier-price{font-family:var(--f-head);font-size:clamp(1.75rem,1.4rem + 1.4vw,2.25rem);
  font-weight:800;color:var(--c-ink);line-height:1;letter-spacing:-.03em}
.tlr-tier-count{font-size:var(--t-xs);font-weight:600;color:var(--c-accent);
  background:var(--c-accent-soft);padding:3px 10px;border-radius:var(--r-pill)}
.tlr-tier-hot{border-color:var(--c-accent);box-shadow:0 8px 30px rgba(47,128,237,.12)}
.tlr-tier-flag{position:absolute;top:-11px;left:clamp(20px,2.4vw,30px);
  background:var(--c-accent);color:#fff;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;padding:4px 10px;border-radius:var(--r-pill)}

/* --------------------------------------------------------------------------
   MARKETPLACE — site card + table
   -------------------------------------------------------------------------- */
.tlr-site{display:flex;align-items:center;gap:var(--s3);background:#fff;
  border:1px solid var(--c-card-line);border-radius:var(--r-md);padding:var(--s4);
  box-shadow:var(--sh-sm);transition:border-color .25s,box-shadow .25s}
.tlr-site:hover{border-color:rgba(47,128,237,.3);box-shadow:var(--sh-md)}
.tlr-site-body{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:3px}
.tlr-site-dom{font-family:var(--f-head);font-size:var(--t-sm);font-weight:700;color:var(--c-ink);
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.tlr-site-dom>b{font-weight:700;overflow-wrap:anywhere}
.tlr-site-meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);font-size:var(--t-xs);color:var(--c-muted)}
.tlr-site-meta b{color:var(--c-ink);font-weight:600}
.tlr-site-price{font-family:var(--f-head);font-size:1.125rem;font-weight:800;color:var(--c-accent);flex:0 0 auto}

/* filter bar */
.tlr-filters{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s5)}
.tlr-field{min-width:0;display:flex;flex-direction:column;gap:6px}
.tlr-filters .tlr-field{flex:1 1 190px}   /* basis only where the row is horizontal */
.tlr-field label{font-size:var(--t-xs);font-weight:600;color:var(--c-muted)}
.tlr-input,.tlr-select{width:100%;padding:11px 14px;border:1.5px solid var(--c-line);
  border-radius:var(--r-sm);font-family:var(--f-body);font-size:var(--t-sm);
  color:var(--c-ink);background:#fff;transition:border-color .2s}
.tlr-input:focus,.tlr-select:focus{outline:none;border-color:var(--c-accent)}
.tlr-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
.tlr-count{font-size:var(--t-sm);color:var(--c-muted);margin-bottom:var(--s3)}
.tlr-count b{color:var(--c-ink);font-weight:700}

/* the table: real table on desktop, stacked cards on mobile */
.tlr-tablewrap{border:1px solid var(--c-card-line);border-radius:var(--r-lg);
  background:#fff;box-shadow:var(--sh-sm);overflow:hidden}
.tlr-table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.tlr-table thead th{background:var(--c-subtle);text-align:left;font-family:var(--f-body);
  font-size:var(--t-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--c-muted);padding:13px 16px;border-bottom:1px solid var(--c-line);white-space:nowrap}
.tlr-table thead th[data-sort]{cursor:pointer;user-select:none}
.tlr-table thead th[data-sort]:hover{color:var(--c-accent)}
.tlr-table thead th[data-sort]::after{content:"↕";margin-left:5px;opacity:.4;font-size:10px}
.tlr-table thead th[data-dir="asc"]::after{content:"↑";opacity:1;color:var(--c-accent)}
.tlr-table thead th[data-dir="desc"]::after{content:"↓";opacity:1;color:var(--c-accent)}
.tlr-table tbody td{padding:13px 16px;border-bottom:1px solid #F3F4F6;vertical-align:middle}
.tlr-table tbody tr:last-child td{border-bottom:0}
.tlr-table tbody tr:hover{background:#FAFBFC}
.tlr-table .c-dom{font-weight:600;color:var(--c-ink)}
.tlr-table .c-price{font-family:var(--f-head);font-weight:800;color:var(--c-accent);white-space:nowrap}
.tlr-table .c-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.tlr-pill{display:inline-flex;padding:2px 9px;border-radius:var(--r-pill);font-size:11px;font-weight:600}
.tlr-pill-i{background:var(--c-green-soft);color:var(--c-green)}
.tlr-pill-h{background:var(--c-accent-soft);color:var(--c-accent)}
.tlr-note{display:inline-flex;padding:2px 8px;border-radius:var(--r-pill);font-size:10px;
  font-weight:600;background:var(--c-amber-soft);color:#B45309;margin-left:6px;white-space:nowrap}
.tlr-empty{padding:var(--s7) var(--s4);text-align:center;color:var(--c-muted);font-size:var(--t-sm)}
.tlr-more{display:flex;justify-content:center;padding:var(--s4);border-top:1px solid #F3F4F6}

@media (max-width:768px){
  .tlr-tablewrap{border:0;background:none;box-shadow:none;overflow:visible}
  .tlr-table,.tlr-table tbody,.tlr-table tr,.tlr-table td{display:block;width:100%}
  .tlr-table thead{display:none}
  .tlr-table tbody tr{background:#fff;border:1px solid var(--c-card-line);
    border-radius:var(--r-md);padding:var(--s4);margin-bottom:var(--s3);box-shadow:var(--sh-sm)}
  .tlr-table tbody td{border:0;padding:3px 0;display:flex;justify-content:space-between;
    align-items:center;gap:var(--s4)}
  .tlr-table tbody td::before{content:attr(data-th);font-size:var(--t-xs);
    font-weight:600;color:var(--c-muted);flex:0 0 auto}
  .tlr-table tbody td.c-dom{font-size:var(--t-body);padding-bottom:var(--s2);
    margin-bottom:var(--s2);border-bottom:1px solid #F3F4F6;display:block}
  .tlr-table tbody td.c-dom::before{display:none}
}

/* --------------------------------------------------------------------------
   PROCESS STEPS (a real sequence, so numbering carries meaning)
   -------------------------------------------------------------------------- */
.tlr-step{position:relative}
.tlr-step-n{font-family:var(--f-head);font-size:var(--t-xs);font-weight:800;
  letter-spacing:.1em;color:var(--c-accent);margin-bottom:var(--s2)}

/* TEAM */
.tlr-avatar{width:clamp(96px,12vw,132px);aspect-ratio:1;border-radius:50%;object-fit:cover;
  object-position:center top;background:var(--c-subtle);border:3px solid #fff;box-shadow:var(--sh-md)}

/* TESTIMONIALS */
.tlr-stars{display:flex;gap:2px;color:var(--c-amber)}
.tlr-stars svg{width:15px;height:15px}
.tlr-quote{font-size:var(--t-sm);color:#4B5563;line-height:1.7}
.tlr-who{display:flex;align-items:center;gap:var(--s3);margin-top:auto;padding-top:var(--s3)}
.tlr-who img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 auto}

/* GUARANTEE */
.tlr-pct{font-family:var(--f-head);font-size:clamp(3.5rem,2rem + 8vw,7rem);font-weight:800;
  line-height:1;letter-spacing:-.05em;display:block;margin:var(--s2) 0;
  background:linear-gradient(135deg,var(--c-accent),#8B5CF6);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tlr-checks{display:flex;flex-wrap:wrap;gap:var(--gap);text-align:left}
.tlr-check{flex:1 1 200px;display:flex;gap:var(--s3);align-items:flex-start}
.tlr-check svg{width:19px;height:19px;color:var(--c-accent);flex:0 0 auto;margin-top:3px}

/* CASE STUDY */
.tlr-case{display:flex;flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:0}
.tlr-case-img{flex:1 1 300px;min-height:240px}
.tlr-case-img img{width:100%;height:100%;object-fit:cover;min-height:240px}
.tlr-case-body{flex:1 1 340px;padding:clamp(24px,3.4vw,48px);display:flex;
  flex-direction:column;gap:var(--s4);justify-content:center}
.tlr-tags{display:flex;flex-wrap:wrap;gap:var(--s2)}
.tlr-tag{padding:4px 11px;border-radius:var(--r-pill);font-size:var(--t-xs);font-weight:600}
.tlr-tag-b{background:var(--c-accent-soft);color:#1D4ED8}
.tlr-tag-g{background:var(--c-green-soft);color:#15803D}

/* ACCORDION -> Elementor accordion widget */
.tlr-acc{display:flex;flex-direction:column;gap:var(--s3)}
.tlr-acc-item{background:#fff;border:1px solid var(--c-card-line);border-radius:var(--r-md);overflow:hidden}
.tlr-acc-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s4) clamp(16px,2vw,20px);background:none;border:0;cursor:pointer;
  font-family:var(--f-body);font-size:var(--t-sm);font-weight:600;color:var(--c-ink);text-align:left}
.tlr-acc-q i{width:20px;height:20px;flex:0 0 auto;display:grid;place-items:center;
  color:var(--c-faint);transition:transform .3s;font-style:normal;font-size:1.1rem}
.tlr-acc-item[data-open] .tlr-acc-q i{transform:rotate(45deg);color:var(--c-accent)}
.tlr-acc-a{max-height:0;overflow:hidden;transition:max-height .32s cubic-bezier(.4,0,.2,1)}
.tlr-acc-a p{padding:0 clamp(16px,2vw,20px) var(--s4);font-size:var(--t-sm);color:var(--c-muted)}
.tlr-acc-item[data-open] .tlr-acc-a{max-height:420px}

/* CTA PANEL */
.tlr-cta{position:relative;overflow:hidden;background:var(--c-ink);border-radius:var(--r-xl);
  padding:clamp(32px,5vw,72px) clamp(20px,4vw,48px);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:var(--s4)}
.tlr-cta::before{content:"";position:absolute;width:min(400px,80vw);aspect-ratio:1;border-radius:50%;
  background:var(--c-accent);opacity:.22;filter:blur(70px);top:-45%;right:-12%}
.tlr-cta::after{content:"";position:absolute;width:min(280px,60vw);aspect-ratio:1;border-radius:50%;
  background:#8B5CF6;opacity:.2;filter:blur(70px);bottom:-40%;left:-8%}
.tlr-cta>*{position:relative;z-index:1}
.tlr-cta h2{color:#fff}
.tlr-cta p{color:#D1D5DB;max-width:34rem}

/* FOOTER */
.tlr-ftr{background:var(--c-ink);color:#9CA3AF;padding:clamp(48px,6vw,72px) var(--sec-x) var(--s5)}
.tlr-ftr a:hover{color:#fff}
.tlr-ftr-grid{display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,48px);max-width:var(--wrap);margin-inline:auto}
.tlr-ftr-brand{flex:1 1 260px;display:flex;flex-direction:column;gap:var(--s3)}
.tlr-ftr-col{flex:1 1 140px;display:flex;flex-direction:column;gap:var(--s3)}
.tlr-ftr-col h2{color:#fff;font-size:var(--t-sm);font-weight:700}
.tlr-ftr-col nav{display:flex;flex-direction:column;gap:9px;font-size:var(--t-sm)}
.tlr-ftr .tlr-logo{color:#fff}
.tlr-ftr-bot{max-width:var(--wrap);margin:var(--s7) auto 0;padding:var(--s5) 0 76px;
  border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:var(--s3);font-size:var(--t-xs)}
.tlr-social{display:flex;gap:var(--s2)}
.tlr-social a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.06);
  display:grid;place-items:center;transition:background .25s}
.tlr-social a:hover{background:rgba(255,255,255,.14)}
.tlr-social svg{width:15px;height:15px;color:#fff}

/* FLOATING WHATSAPP */
.tlr-wa{position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:90;
  width:54px;height:54px;border-radius:50%;background:#25D366;display:grid;place-items:center;
  box-shadow:0 6px 22px rgba(37,211,102,.4);transition:transform .25s}
.tlr-wa:hover{transform:scale(1.07)}
.tlr-wa svg{width:26px;height:26px;color:#fff}

/* --------------------------------------------------------------------------
   RESPONSIVE — only two breakpoints needed; clamp() handles the rest
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  .tlr-c4{width:calc(50% - var(--gap) / 2)}
  .tlr-c3{width:calc(50% - var(--gap) / 2)}
}
@media (max-width:640px){
  .tlr-c2,.tlr-c3,.tlr-c4{width:100%}
  .tlr-c4-keep{width:calc(50% - var(--gap) / 2)}   /* small tiles stay 2-up */
  .tlr-head{margin-bottom:var(--s6)}
  .tlr-hero-btns .tlr-btn{width:100%}
  .tlr-metrics{gap:var(--s4)}
  .tlr-metrics>.tlr-metric{flex:1 1 calc(50% - var(--s4) / 2)}
}
@media (hover:none){
  .tlr-card-hov:hover{transform:none;box-shadow:var(--sh-sm);border-color:var(--c-card-line)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto}
}

/* ==========================================================================
   v2.1 — components added for the remaining 18 pages
   ========================================================================== */

/* generic ------------------------------------------------------------ */
.tlr-h3-lg{font-size:clamp(1.25rem,1rem + 1.2vw,1.75rem);font-weight:800}
.tlr-role{font-size:var(--t-sm);font-weight:600;color:var(--c-accent)}
.tlr-list-blue svg{color:var(--c-accent)}
.tlr-ico-circle{border-radius:50%}
.tlr-logo-img{height:clamp(18px,2.2vw,26px);width:auto;opacity:.4;filter:grayscale(100%)}
.tlr-face{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.tlr-t-name{font-size:.875rem;font-weight:700}
.tlr-t-meta-txt{display:flex;flex-direction:column;gap:0;min-width:0}

/* guarantee ---------------------------------------------------------- */
.tlr-guarantee{max-width:840px;margin-inline:auto}
.tlr-guarantee-grid{max-width:760px;margin-inline:auto;margin-block:var(--s4)}

/* case study --------------------------------------------------------- */
.tlr-case-media{flex:1 1 300px;display:flex;min-width:0}

/* awards ------------------------------------------------------------- */
.tlr-award{padding:var(--s5) var(--s4);gap:var(--s2)}
.tlr-award-name{font-size:.875rem;font-weight:700;line-height:1.35}
.tlr-award-org{font-size:var(--t-xs);color:var(--c-faint)}
.tlr-award .tlr-ico{border:2px solid currentColor;background:transparent}
.tlr-award .tlr-ico-blue{color:var(--c-accent)}
.tlr-award .tlr-ico-green{color:var(--c-green)}
.tlr-award .tlr-ico-purple{color:var(--c-purple)}
.tlr-award .tlr-ico-amber{color:var(--c-amber)}

/* blog cards --------------------------------------------------------- */
.tlr-post{gap:0}
.tlr-post-media{display:block;overflow:hidden;background:var(--c-subtle)}
.tlr-post-img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.4,0,.2,1)}
.tlr-post:hover .tlr-post-img{transform:scale(1.04)}
.tlr-post-body{display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--s3);padding:clamp(18px,2vw,24px)}

/* long-form prose (blog article + legal pages) ----------------------- */
.tlr-prose{font-size:var(--t-lead);color:var(--c-body);line-height:1.8}
.tlr-prose h2{font-size:clamp(1.25rem,1.05rem + .9vw,1.625rem);margin:var(--s7) 0 var(--s3)}
.tlr-prose h2:first-child{margin-top:0}
.tlr-prose p{margin-bottom:var(--s4)}
.tlr-prose ul{margin:0 0 var(--s4);padding-left:var(--s5);list-style:disc}
.tlr-prose li{margin-bottom:var(--s2)}
.tlr-prose blockquote{margin:var(--s6) 0;padding:var(--s4) var(--s5);
  border-left:3px solid var(--c-accent);background:var(--c-subtle);
  border-radius:0 var(--r-md) var(--r-md) 0}
.tlr-prose blockquote p{margin:0;font-family:var(--f-head);font-size:1.0625rem;
  font-weight:600;color:var(--c-ink)}
.tlr-prose a{color:var(--c-accent);font-weight:600;text-decoration:underline}

/* contact form (prototype only — real form comes from a plugin) ------ */
.tlr-form{display:flex;flex-direction:column;gap:var(--s4);width:100%}
.tlr-form textarea.tlr-input{resize:vertical;font-family:var(--f-body);line-height:1.6}
.tlr-form .tlr-btn{align-self:flex-start}

/* mobile ------------------------------------------------------------- */
@media (max-width:640px){
  .tlr-guarantee-grid{margin-block:var(--s3)}
  .tlr-form .tlr-btn{align-self:stretch}
  .tlr-prose h2{margin-top:var(--s6)}
}


/* ==========================================================================
   v2.2 — CONTACT
   ========================================================================== */
.tlr-cc{gap:var(--s2);align-items:flex-start}
.tlr-cc p,.tlr-cc a{overflow-wrap:anywhere}
.tlr-formwrap{max-width:720px;margin-inline:auto;width:100%}

/* ==========================================================================
   v2.2 — SWIPE ROWS
   Below 700px any .tlr-swipe row becomes a thumb-scrollable carousel.
   Slides are deliberately narrower than the viewport so the NEXT card always
   peeks in — that sliver is the only affordance telling the visitor there is
   more to the right. Pure CSS: no JS, no carousel widget, so in Elementor
   this is one CSS class on an ordinary container.
   ========================================================================== */
@media (max-width:700px){
  .tlr-swipe{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--sec-x);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
    /* bleed to the screen edges so the peek is not clipped by section padding */
    margin-inline:calc(var(--sec-x) * -1);
    padding-inline:var(--sec-x);
    padding-block-end:var(--s3);
    align-items:stretch;
  }
  .tlr-swipe::-webkit-scrollbar{display:none}

  .tlr-swipe>*,
  .tlr-swipe>.tlr-c2,
  .tlr-swipe>.tlr-c3,
  .tlr-swipe>.tlr-c4,
  .tlr-swipe>.tlr-c4-keep{
    flex:0 0 auto;
    width:var(--slide,86%);
    scroll-snap-align:start;
  }
  /* two-up variants for compact tiles (team, awards) */
  .tlr-swipe-2{--slide:44%}
  .tlr-swipe-3{--slide:31%}

  /* cards in a swipe row must match height or the snap looks ragged */
  .tlr-swipe>.tlr-card{height:auto}
  /* hover lift is meaningless mid-swipe and causes jitter */
  .tlr-swipe>.tlr-card-hov:hover{transform:none;box-shadow:var(--sh-sm)}
}

/* desktop: swipe rows are ordinary grids again */
@media (min-width:701px){
  .tlr-swipe{overflow:visible}
}

/* ==========================================================================
   v2.2 — TAP TARGETS
   Standalone links were 20–22px tall on mobile. Inline links inside a
   sentence are exempt (WCAG 2.5.8 inline exception) so typography is left
   alone; every link that stands on its own line gets a real 44px target.
   ========================================================================== */
@media (max-width:700px){
  .tlr-link{min-height:44px}
  .tlr-ftr-col nav a,
  .tlr-ftr-brand>a.tlr-sm,
  .tlr-drawer nav a{display:flex;align-items:center;min-height:44px}
  .tlr-ftr-col nav{gap:0}
  .tlr-ftr-bot{gap:var(--s2)}
  .tlr-social a{width:44px;height:44px}
}


/* ==========================================================================
   WORDPRESS ADDITIONS (theme v1.0)
   ========================================================================== */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.tlr-skip{position:absolute;left:-9999px;top:8px;z-index:1000;background:#fff;color:var(--c-ink);padding:10px 16px;border-radius:10px;box-shadow:var(--sh-md);font-weight:600}
.tlr-skip:focus{left:12px}

/* sticky header + drawer sit below the WP admin bar when logged in */
.admin-bar .tlr-hdr{top:32px}
.admin-bar .tlr-drawer{top:32px}
@media (max-width:782px){.admin-bar .tlr-hdr{top:46px}.admin-bar .tlr-drawer{top:46px}}
@media (max-width:600px){.admin-bar .tlr-hdr{top:0}}

/* six client logos fit on one row */
.tlr-logos{gap:clamp(20px,3.4vw,44px)}

/* case study images fill their half of the card */
img.tlr-case-img{object-fit:cover;height:auto;align-self:stretch}

/* blog cards are clickable (the whole card) */
.tlr-post{position:relative}
.tlr-post-link{color:inherit;text-decoration:none}
.tlr-post-link::after{content:"";position:absolute;inset:0;z-index:1}
.tlr-post:hover .tlr-post-link{color:var(--c-accent)}
.tlr-post-link:focus-visible{outline:none}
.tlr-post:focus-within{outline:2px solid var(--c-accent);outline-offset:3px}

/* pagination */
.tlr-pagination{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:clamp(28px,4vw,48px)}
.tlr-pagination .page-numbers{min-width:44px;height:44px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--c-line);border-radius:12px;background:#fff;font-size:var(--t-sm);font-weight:600;color:var(--c-ink)}
.tlr-pagination a.page-numbers:hover{border-color:var(--c-accent);color:var(--c-accent)}
.tlr-pagination .current{background:var(--c-accent);border-color:var(--c-accent);color:#fff}

/* contact form */
.tlr-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.tlr-notice{border-radius:var(--r-md);padding:14px 18px;margin-bottom:var(--s4);font-size:var(--t-sm);font-weight:600}
.tlr-notice-ok{background:var(--c-green-soft);color:#166534;border:1px solid #BBF7D0}
.tlr-notice-err{background:#FEF2F2;color:#991B1B;border:1px solid #FECACA}

/* generic pages, archives, search */
.tlr-hero-sm{padding-bottom:clamp(32px,4vw,56px)}
.tlr-author-box .tlr-h4{font-size:var(--t-h4)}

/* post content from the WordPress editor */
.tlr-prose h3{font-size:var(--t-h3);margin:var(--s6) 0 var(--s3)}
.tlr-prose ol{margin:0 0 var(--s4);padding-left:var(--s5);list-style:decimal}
.tlr-prose img,.tlr-prose figure{border-radius:var(--r-lg);margin:var(--s5) 0}
.tlr-prose figcaption,.wp-caption-text{font-size:var(--t-sm);color:var(--c-muted);text-align:center;margin-top:var(--s2)}
.tlr-prose code{font-size:.9em;background:var(--c-subtle);border:1px solid var(--c-line);border-radius:6px;padding:1px 6px}
.tlr-prose table{width:100%;border-collapse:collapse;margin:var(--s5) 0;font-size:var(--t-sm)}
.tlr-prose th,.tlr-prose td{border:1px solid var(--c-line);padding:10px 12px;text-align:left}
.alignleft{float:left;margin:0 var(--s5) var(--s4) 0}
.alignright{float:right;margin:0 0 var(--s4) var(--s5)}
.aligncenter{display:block;margin-inline:auto}
.alignwide,.alignfull{max-width:100%}

/* comments */
.tlr-comments{margin-top:var(--s6)}
.tlr-comment-list{list-style:none;padding:0}
.tlr-comments textarea,.tlr-comments input[type=text],.tlr-comments input[type=email],.tlr-comments input[type=url]{
  width:100%;border:1px solid var(--c-line);border-radius:var(--r-sm);padding:12px 14px;font:inherit}
.tlr-comments .submit{background:var(--c-accent);color:#fff;border:0;border-radius:var(--r-pill);padding:12px 24px;font-weight:600;cursor:pointer}

/* author box under articles: photo left, text right */
.tlr-card.tlr-author-box{flex-direction:row;align-items:center;gap:var(--s5)}
.tlr-author-box .tlr-avatar{width:clamp(72px,9vw,96px)}
@media (max-width:520px){.tlr-card.tlr-author-box{flex-direction:column;text-align:center;flex-wrap:wrap!important}}

/* contact methods: stacked on phones, long emails never split mid-word */
.tlr-contact-cards .tlr-card{min-width:0}
.tlr-contact-cards a,.tlr-contact-cards p{overflow-wrap:anywhere}
@media (max-width:640px){.tlr-contact-cards>*{width:100%}}

/* keep the base design when other plugins (old theme companion, sliders) load generic CSS */
html body{font-family:var(--f-body);font-size:var(--t-body);line-height:1.7;color:var(--c-body);background:var(--c-white)}
html body h1,html body h2,html body h3,html body h4{font-family:var(--f-head);color:var(--c-ink);line-height:1.18;margin:0;font-weight:800;letter-spacing:-.02em}
html body p{margin:0}
html body a{color:inherit;text-decoration:none}
html body img{max-width:100%;height:auto}