/*
Theme Name: Paradise Turnleaf
Theme URI: https://turnleaflennar.com
Description: Lightweight conversion-focused theme for turnleaflennar.com — an independent
  buyer-representation resource for Lennar at Turnleaf, Punta Gorda FL. Part of the
  Paradise Community Sites network. Ships header images, auto schema, security hardening
  and the Jen concierge as first-class theme features.
Author: Paradise Community Sites
Version: 1.0.3
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: paradise-turnleaf
*/

/* ============================================================
   1. DESIGN TOKENS
   Palette validated programmatically for WCAG 2.1 AA at body size.
   Two coppers by job: -700 for text/links, -600 for surfaces.
   Do not introduce a third without re-running scripts/contrast.py.
   ============================================================ */
:root{
  /* bark — primary dark, warm espresso. Distinct from riverhall teal
     (#1b8589) and valencia forest green (#102C21). */
  --tl-bark-900:#2A211A;
  --tl-bark-800:#3B2E23;
  --tl-bark-700:#4E3C2D;
  --tl-bark-600:#63503D;

  /* copper — accent.
     700 = text/links on light  (6.73:1 on white)
     600 = button/surface fill  (white on it 5.39:1)
     400 = text on bark only    (5.82:1 on bark-900) */
  --tl-copper-700:#8C4A24;
  --tl-copper-600:#A0572C;
  --tl-copper-400:#DA8A54;
  --tl-copper-100:#F7EBE1;

  /* sage — secondary, the "leaf" */
  --tl-sage-700:#4F5C42;
  --tl-sage-600:#6B7A5A;
  --tl-sage-100:#E8EDE2;

  /* neutrals */
  --tl-ink:#241F1A;
  --tl-ink-soft:#4A443D;
  --tl-muted:#6E675E;
  --tl-line:#DFD8CD;
  --tl-stone-100:#F2EEE8;
  --tl-stone-50:#FAF8F5;
  --tl-white:#FFFFFF;

  /* savings / price-drop accent (7.37:1 on white) */
  --tl-save:#9C3016;
  --tl-save-bg:#FBEDE8;

  /* type — shared network signature with riverhall + valencia */
  --tl-font-display:"IBM Plex Serif",Georgia,"Times New Roman",serif;
  --tl-font-body:"Nunito Sans",-apple-system,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* metrics */
  --tl-container:1200px;
  --tl-container-narrow:780px;
  --tl-gutter:clamp(1.15rem,3.4vw,2.25rem);
  --tl-section:clamp(3rem,5.6vw,5.25rem);
  --tl-radius:4px;
  --tl-radius-lg:10px;
  --tl-shadow:0 1px 2px rgba(36,31,26,.06),0 8px 20px rgba(36,31,26,.06);
  --tl-shadow-lg:0 2px 4px rgba(36,31,26,.06),0 18px 40px rgba(36,31,26,.10);
  --tl-focus:3px solid var(--tl-copper-600);
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;
  font-family:var(--tl-font-body);
  font-size:clamp(1rem,.97rem + .16vw,1.075rem);
  line-height:1.65;
  color:var(--tl-ink);
  background:var(--tl-white);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--tl-font-display);font-weight:600;line-height:1.18;margin:0 0 .5em;color:var(--tl-ink);text-wrap:balance}
h1{font-size:clamp(2rem,1.5rem + 2.2vw,3.1rem);letter-spacing:-.015em}
h2{font-size:clamp(1.55rem,1.25rem + 1.35vw,2.3rem);letter-spacing:-.01em}
h3{font-size:clamp(1.2rem,1.08rem + .5vw,1.45rem)}
h4{font-size:1.05rem}
p{margin:0 0 1.15em;text-wrap:pretty}
a{color:var(--tl-copper-700);text-underline-offset:.18em;text-decoration-thickness:from-font}
a:hover{color:var(--tl-bark-800)}
:focus-visible{outline:var(--tl-focus);outline-offset:2px;border-radius:2px}
img{max-width:100%;height:auto;display:block}
strong{font-weight:700}
hr{border:0;border-top:1px solid var(--tl-line);margin:2.5rem 0}
table{border-collapse:collapse;width:100%}
::selection{background:var(--tl-copper-100);color:var(--tl-ink)}

.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:1rem;top:1rem;z-index:999;background:var(--tl-white);padding:.7rem 1.1rem;border-radius:var(--tl-radius);box-shadow:var(--tl-shadow-lg)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ============================================================
   3. LAYOUT
   ============================================================ */
.container{width:100%;max-width:var(--tl-container);margin-inline:auto;padding-inline:var(--tl-gutter)}
.container--narrow{max-width:var(--tl-container-narrow)}
.section{padding-block:var(--tl-section)}
.section--tight{padding-block:calc(var(--tl-section) * .58)}
.section--stone{background:var(--tl-stone-50)}
.section--stone-100{background:var(--tl-stone-100)}
.section--sage{background:var(--tl-sage-100)}
.section--bark{background:var(--tl-bark-900);color:var(--tl-stone-100)}
.section--bark h2,.section--bark h3{color:var(--tl-white)}
.section--bark a{color:var(--tl-copper-400)}
.section-head{max-width:62ch;margin-bottom:2rem}
.section-head--center{margin-inline:auto;text-align:center}
.section-head p{color:var(--tl-ink-soft);margin-bottom:0}
.section--bark .section-head p{color:var(--tl-sage-100)}

/* GOTCHA: grid children default to min-width:auto, so a long unbroken value
   (e.g. "From $463,999") refuses to shrink and spills into the next cell.
   This shipped as a visible bug on a previous build. Do not remove. */
.grid{display:grid;gap:clamp(1rem,2.2vw,1.75rem)}
.grid>*{min-width:0}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;gap:clamp(1.5rem,3.5vw,3rem);align-items:center}
.split>*{min-width:0}
.split--40-60{grid-template-columns:minmax(0,4fr) minmax(0,6fr)}
.split--60-40{grid-template-columns:minmax(0,6fr) minmax(0,4fr)}
.mt-1{margin-top:.75rem}.mt-2{margin-top:1.5rem}.mt-3{margin-top:2.25rem}
.rounded{border-radius:var(--tl-radius-lg);overflow:hidden}
.shadow{box-shadow:var(--tl-shadow)}

/* ============================================================
   4. BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--tl-font-body);font-weight:700;font-size:.95rem;line-height:1.2;
  padding:.85rem 1.4rem;border-radius:var(--tl-radius);border:2px solid transparent;
  cursor:pointer;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s;
  min-height:44px; /* touch target */
}
.btn--primary{background:var(--tl-copper-600);color:var(--tl-white)}   /* 5.39:1 */
.btn--primary:hover{background:var(--tl-copper-700);color:var(--tl-white)}
.btn--ghost{background:transparent;color:var(--tl-bark-800);border-color:var(--tl-bark-600)}
.btn--ghost:hover{background:var(--tl-bark-900);color:var(--tl-white);border-color:var(--tl-bark-900)}
.btn--onbark{background:var(--tl-white);color:var(--tl-bark-900)}
.btn--onbark:hover{background:var(--tl-copper-400);color:var(--tl-bark-900)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}
.btn-row--center{justify-content:center}

/* ============================================================
   5. TOPBAR / HEADER / NAV
   Independence disclaimer lives in the masthead AND the footer — the domain
   contains a builder trademark, so the disclosure must be visible above the fold.
   ============================================================ */
.tl-topbar{background:var(--tl-bark-900);color:var(--tl-stone-100);font-size:.86rem}
.tl-topbar__inner{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center;justify-content:space-between;padding-block:.55rem}
.tl-topbar a{color:var(--tl-copper-400);font-weight:700}
.tl-topbar__note{color:var(--tl-sage-100);opacity:.92}

.tl-disclaimer-bar{background:var(--tl-stone-100);border-bottom:1px solid var(--tl-line);font-size:.8rem;color:var(--tl-ink-soft)}
.tl-disclaimer-bar p{margin:0;padding-block:.5rem}

.tl-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--tl-line)}
.tl-header__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.85rem}
.tl-brand{font-family:var(--tl-font-display);font-weight:600;font-size:1.12rem;line-height:1.15;color:var(--tl-ink);text-decoration:none}
.tl-brand span{display:block;font-family:var(--tl-font-body);font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--tl-copper-700)}
.tl-nav{display:flex;align-items:center;gap:1.35rem}
.tl-nav ul{display:flex;align-items:center;gap:1.35rem;list-style:none;margin:0;padding:0}
/* WCAG 2.2 SC 2.5.8 — list navigation is not exempt the way inline prose links
   are, so nav and footer link boxes must clear 24px. Measured, not assumed. */
.tl-nav a{color:var(--tl-ink);text-decoration:none;font-weight:600;font-size:.94rem;display:inline-block;padding-block:.28rem}
.tl-nav a:hover,.tl-nav .current-menu-item>a{color:var(--tl-copper-700)}
.tl-nav li{position:relative}
.tl-nav .sub-menu{display:none;position:absolute;top:100%;left:0;min-width:230px;background:var(--tl-white);border:1px solid var(--tl-line);border-radius:var(--tl-radius);box-shadow:var(--tl-shadow-lg);padding:.4rem;flex-direction:column;gap:0}
.tl-nav li:hover>.sub-menu,.tl-nav li:focus-within>.sub-menu{display:flex}
.tl-nav .sub-menu a{display:block;padding:.5rem .7rem;font-weight:500;border-radius:3px}
.tl-nav .sub-menu a:hover{background:var(--tl-stone-100)}
.tl-navtoggle{display:none;background:none;border:2px solid var(--tl-line);border-radius:var(--tl-radius);padding:.55rem .8rem;font-weight:700;cursor:pointer;min-height:44px}

/* ============================================================
   6. PAGE HEADER IMAGE
   Every page ships a real <img> header. Baseline, never a retrofit.
   Left-weighted scrim on desktop, top-to-bottom under 720px.
   ============================================================ */
/* GOTCHA — hero geometry. The header image is 16:9 (1.78). If the hero's height is
   driven only by content padding, the box gets wider without getting taller, so the
   aspect ratio runs away and object-fit:cover eats the picture. Measured on the live
   site before this fix: 4.99:1 at 3035px wide, showing just 36% of the image height —
   the clubhouse roof was cut off top and bottom.

   min-height pins the ratio at ~2.2-2.5 from 1024px to 1920px (71-80% of the image
   visible). The min(45vw, 72vh) term stops a tall hero eating the fold on short
   laptop screens; the 900px cap stops it running away on ultrawide. */
.tl-hero{
  position:relative;isolation:isolate;background:var(--tl-bark-900);
  display:grid;align-items:center;
  min-height:clamp(430px, min(45vw, 72vh), 900px);
}
.tl-hero__media{position:absolute;inset:0;z-index:-2}
.tl-hero__media img{width:100%;height:100%;object-fit:cover}

/* GOTCHA — scrim opacity is an ACCESSIBILITY control, not decoration. The original
   ramp (.92 -> .78 at 38% -> .30 at 72%) let the text drift out of the dark zone,
   because the scrim is anchored to the viewport while the text is anchored to the
   centred container. Measured against the real composited pixels, the kicker came out
   at 4.08:1 — a WCAG AA failure at body size. Holding .88 out to 42% lifts the worst
   case to 7.01:1 while still letting the photograph read on the right.
   Re-measure with scripts/hero-contrast.js if you touch these stops. */
.tl-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(42,33,26,.94) 0%,rgba(42,33,26,.88) 42%,rgba(42,33,26,.56) 68%,rgba(42,33,26,.22) 100%);
}
.tl-hero__inner{padding-block:clamp(2.75rem,4.5vw,4.5rem);max-width:63ch;color:var(--tl-white)}
.tl-hero h1{color:var(--tl-white)}
.tl-hero__kicker{font-size:.78rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--tl-copper-400);margin:0 0 .7rem}
.tl-hero__sub{font-size:clamp(1.03rem,1rem + .3vw,1.2rem);color:var(--tl-stone-100);margin-bottom:1.5rem}
/* Compact = no header image (tl_hero_image returned nothing). Must NOT inherit the
   image-driven min-height, or pages without a picture render a huge empty bark slab. */
.tl-hero--compact{min-height:0}
.tl-hero--compact .tl-hero__inner{padding-block:clamp(2.25rem,4.5vw,3.75rem)}

/* ============================================================
   7. COMPONENTS
   ============================================================ */
.stat-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--tl-line);border:1px solid var(--tl-line);border-radius:var(--tl-radius-lg);overflow:hidden}
.stat{background:var(--tl-white);padding:1.15rem 1.25rem;min-width:0}
.stat__num{font-family:var(--tl-font-display);font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem);font-weight:600;color:var(--tl-bark-900);line-height:1.1;overflow-wrap:break-word}
.stat__label{font-size:.83rem;color:var(--tl-muted);margin-top:.2rem}

.card{background:var(--tl-white);border:1px solid var(--tl-line);border-radius:var(--tl-radius-lg);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.card__media{aspect-ratio:3/2;background:var(--tl-stone-100)}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__body{padding:1.15rem 1.25rem;flex:1;min-width:0}
.card__body h3{margin-bottom:.35rem}
.card__meta{font-size:.87rem;color:var(--tl-muted);margin:0 0 .6rem}
.card__price{font-family:var(--tl-font-display);font-size:1.2rem;font-weight:600;color:var(--tl-bark-900);overflow-wrap:break-word}
.card__foot{padding:.9rem 1.25rem;border-top:1px solid var(--tl-line);background:var(--tl-stone-50)}
.badge-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.6rem}
.badge{font-size:.74rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:.24rem .55rem;border-radius:100px;background:var(--tl-sage-100);color:var(--tl-sage-700)}
.badge--copper{background:var(--tl-copper-100);color:var(--tl-copper-700)}
.badge--save{background:var(--tl-save-bg);color:var(--tl-save)}

.callout{border-left:4px solid var(--tl-copper-600);background:var(--tl-stone-50);padding:1.15rem 1.35rem;border-radius:0 var(--tl-radius) var(--tl-radius) 0}
.callout p:last-child{margin-bottom:0}
.callout--sage{border-left-color:var(--tl-sage-600);background:var(--tl-sage-100)}

/* Verification note — used wherever we publish a figure that conflicts across
   sources, or a builder claim we are attributing rather than asserting. */
.tl-sourcenote{font-size:.83rem;color:var(--tl-muted);border-top:1px dashed var(--tl-line);padding-top:.6rem;margin-top:.9rem}
.tl-sourcenote strong{color:var(--tl-ink-soft)}

.feature{display:flex;gap:.85rem;align-items:flex-start}
.feature__icon{flex:0 0 auto;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--tl-sage-100);display:grid;place-items:center;color:var(--tl-sage-700);font-weight:800}
.feature p{margin:.15rem 0 0;color:var(--tl-ink-soft);font-size:.94rem}

/* FAQ — <details>/<summary>. functions.php harvests these into FAQPage schema. */
.tl-faq details{border:1px solid var(--tl-line);border-radius:var(--tl-radius);margin-bottom:.65rem;background:var(--tl-white)}
.tl-faq summary{cursor:pointer;padding:.95rem 1.15rem;font-weight:700;font-family:var(--tl-font-display);font-size:1.03rem;list-style:none;display:flex;justify-content:space-between;gap:1rem;min-height:44px;align-items:center}
.tl-faq summary::-webkit-details-marker{display:none}
.tl-faq summary::after{content:"+";font-size:1.3rem;color:var(--tl-copper-700);flex:0 0 auto;line-height:1}
.tl-faq details[open] summary::after{content:"\2212"}
.tl-faq__body{padding:0 1.15rem 1.1rem;color:var(--tl-ink-soft)}
.tl-faq__body p:last-child{margin-bottom:0}

/* Data table */
.tl-table-wrap{overflow-x:auto;border:1px solid var(--tl-line);border-radius:var(--tl-radius-lg)}
/* GOTCHA: a blanket min-width here clipped a 2-column table placed in a 40% split
   column — the wrap scrolled, but it read as a broken layout. Narrow tables now
   fit their container by default; only genuinely wide ones opt into scrolling. */
.tl-table{font-size:.92rem;min-width:0;width:100%}
.tl-table--wide{min-width:640px}
.tl-table th,.tl-table td{padding:.7rem .9rem;text-align:left;border-bottom:1px solid var(--tl-line)}
.tl-table thead th{background:var(--tl-bark-900);color:var(--tl-white);font-family:var(--tl-font-body);font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;position:sticky;top:0}
.tl-table tbody tr:nth-child(even){background:var(--tl-stone-50)}
.tl-table tbody tr:last-child td{border-bottom:0}
.tl-table td.num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ============================================================
   8. RECIPROCAL COMMUNITY STRIP  (network interlink, lower third)
   ============================================================ */
.tl-network{background:var(--tl-stone-100);border-block:1px solid var(--tl-line)}
.tl-network__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}
.tl-network__card{background:var(--tl-white);border:1px solid var(--tl-line);border-radius:var(--tl-radius-lg);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.tl-network__media{aspect-ratio:16/10;background:var(--tl-stone-100)}
.tl-network__media img{width:100%;height:100%;object-fit:cover}
.tl-network__body{padding:1rem 1.1rem;flex:1}
.tl-network__body h3{font-size:1.05rem;margin-bottom:.2rem}
.tl-network__body p{font-size:.88rem;color:var(--tl-muted);margin:0 0 .8rem}

/* ============================================================
   9. JEN — New Home Concierge
   Never labelled AI, bot or assistant anywhere in the markup.
   ============================================================ */
.jen-launcher{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:60;
  display:flex;align-items:center;gap:.6rem;
  background:var(--tl-bark-900);color:var(--tl-white);
  border:0;border-radius:100px;padding:.6rem 1.15rem .6rem .6rem;
  box-shadow:var(--tl-shadow-lg);cursor:pointer;font-family:var(--tl-font-body);
  font-weight:700;font-size:.92rem;min-height:52px;
}
.jen-launcher:hover{background:var(--tl-bark-800)}
.jen-launcher__avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.jen-launcher__status{display:block;font-size:.72rem;font-weight:600;color:var(--tl-copper-400);text-align:left}
.jen-panel{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:61;width:min(390px,calc(100vw - 2.2rem));
  height:min(600px,calc(100dvh - 2.2rem));background:var(--tl-white);
  border-radius:var(--tl-radius-lg);box-shadow:var(--tl-shadow-lg);
  display:none;flex-direction:column;overflow:hidden;border:1px solid var(--tl-line);
}
.jen-panel[data-open="1"]{display:flex}
.jen-panel__head{display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem;background:var(--tl-bark-900);color:var(--tl-white)}
.jen-panel__head img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.jen-panel__name{font-family:var(--tl-font-display);font-weight:600;font-size:1rem;line-height:1.2}
.jen-panel__role{font-size:.75rem;color:var(--tl-sage-100)}
.jen-panel__close{margin-left:auto;background:none;border:0;color:var(--tl-white);font-size:1.4rem;cursor:pointer;line-height:1;padding:.25rem .4rem;min-height:44px;min-width:44px}
.jen-log{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.7rem;background:var(--tl-stone-50)}
.jen-msg{max-width:85%;padding:.65rem .9rem;border-radius:12px;font-size:.93rem;line-height:1.5}
.jen-msg--jen{background:var(--tl-white);border:1px solid var(--tl-line);align-self:flex-start;border-bottom-left-radius:3px}
.jen-msg--you{background:var(--tl-bark-900);color:var(--tl-white);align-self:flex-end;border-bottom-right-radius:3px}
.jen-msg--system{align-self:center;background:var(--tl-sage-100);color:var(--tl-sage-700);font-size:.8rem;font-weight:700;border-radius:100px;padding:.35rem .85rem}
.jen-form{display:flex;gap:.5rem;padding:.75rem;border-top:1px solid var(--tl-line);background:var(--tl-white)}
.jen-form input{flex:1;min-width:0;padding:.7rem .85rem;border:1px solid var(--tl-line);border-radius:var(--tl-radius);font-family:inherit;font-size:.94rem;min-height:44px}
.jen-form button{flex:0 0 auto;min-height:44px}
.jen-consent{font-size:.72rem;color:var(--tl-muted);padding:0 .75rem .6rem;background:var(--tl-white);margin:0}

/* ============================================================
   10. FOOTER
   ============================================================ */
.tl-footer{background:var(--tl-bark-900);color:var(--tl-stone-100);padding-block:var(--tl-section) 1.5rem}
.tl-footer a{color:var(--tl-stone-100);text-decoration:none}
.tl-footer a:hover{color:var(--tl-copper-400);text-decoration:underline}
.tl-footer__top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:2rem;padding-bottom:2.25rem;border-bottom:1px solid rgba(255,255,255,.14)}
.tl-footer__brand h2{color:var(--tl-white);font-size:1.3rem;margin-bottom:.15rem}
.tl-footer__loc{font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tl-copper-400);margin-bottom:.9rem}
.tl-footer__brand p{font-size:.9rem;color:var(--tl-sage-100)}
.tl-footer__phone{font-family:var(--tl-font-display);font-size:1.3rem;font-weight:600;color:var(--tl-white)!important;display:inline-block;margin-top:.3rem}
.tl-footer__col h3{font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tl-copper-400);margin-bottom:.8rem}
.tl-footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.2rem}
.tl-footer__col a{font-size:.9rem;display:inline-block;padding-block:.28rem} /* >=24px tap target */
.tl-footer__brand a:not(.tl-footer__phone){display:inline-block;padding-block:.28rem}
.tl-footer__legal{padding-top:1.4rem;font-size:.82rem;color:var(--tl-sage-100);opacity:.88}
.tl-footer__legal p{margin:0 0 .5rem}
.tl-footer__legal strong{color:var(--tl-white)}

/* ============================================================
   11. RESPONSIVE
   MUST come after the components it overrides — equal specificity means
   source order decides. A previous build shipped broken because these
   were declared above the component rules.
   ============================================================ */
@media (max-width:1080px){
  .tl-footer__top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tl-network__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split--40-60,.split--60-40{grid-template-columns:minmax(0,1fr)}
  .tl-nav{display:none}
  .tl-nav[data-open="1"]{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--tl-white);border-bottom:1px solid var(--tl-line);flex-direction:column;align-items:stretch;gap:0;padding:.6rem var(--tl-gutter) 1.1rem;box-shadow:var(--tl-shadow-lg);max-height:75vh;overflow-y:auto}
  .tl-nav[data-open="1"] ul{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .tl-nav[data-open="1"] a{display:block;padding:.7rem 0;border-bottom:1px solid var(--tl-line)}
  .tl-nav[data-open="1"] .sub-menu{display:flex;position:static;border:0;box-shadow:none;padding:0 0 0 1rem;min-width:0}
  .tl-navtoggle{display:inline-flex;align-items:center}
  .tl-header__inner{position:relative}
}
@media (max-width:720px){
  /* Portrait viewport: a 16:9 image in a tall narrow box crops on WIDTH, not height,
     so the horizontal scrim would darken the wrong axis. Flip it top-to-bottom. */
  .tl-hero{min-height:clamp(380px,62vw,540px)}
  .tl-hero::after{background:linear-gradient(180deg,rgba(42,33,26,.55) 0%,rgba(42,33,26,.82) 55%,rgba(42,33,26,.94) 100%)}
  .tl-hero__inner{padding-block:clamp(2.5rem,9vw,3.5rem)}
  .grid-2{grid-template-columns:minmax(0,1fr)}
  .tl-footer__top{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
  .tl-topbar__inner{justify-content:center;text-align:center}
}
@media (max-width:560px){
  .grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}
  .stat-strip{grid-template-columns:minmax(0,1fr)}
  .tl-network__grid{grid-template-columns:minmax(0,1fr)}
  .tl-footer__top{grid-template-columns:minmax(0,1fr)}
  .jen-launcher span.jen-launcher__text{display:none}
}

@media print{
  .tl-header,.tl-topbar,.jen-launcher,.jen-panel,.tl-network,.tl-navtoggle{display:none!important}
  body{color:#000}
  .tl-hero::after{display:none}
}