/*
Theme Name: Tang Law
Theme URI: https://tanglaw.com.au
Author: Tang Law
Description: Custom theme for Tang Law — Perth general-practice law firm. Built from the brand design system: Work Sans + Lora, zero border-radius, hairline 1px grids, charcoal/red/stone palette.
Version: 1.0.0
Requires PHP: 8.0
Text Domain: tanglaw
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root{
  /* Colour */
  --tl-ink: #30302F;
  --tl-ink-2: #262625;
  --tl-ink-3: #31312F;
  --tl-red: #BC2D24;
  --tl-red-dark: #8E211A;
  --tl-body: #5A5754;
  --tl-muted: #8A8683;
  --tl-muted-dark: #A5A19D;
  --tl-line: #E6E3E0;
  --tl-line-2: #DCD8D4;
  --tl-line-dark: #43423F;
  --tl-stone: #F4F2F0;
  --tl-stone-2: #FBFAF9;
  --tl-stone-3: #F9F8F6;
  --tl-white: #FFFFFF;
  --tl-star: #E7A81C;

  /* Type */
  --tl-font-sans: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tl-font-serif: "Lora", Georgia, "Times New Roman", serif;

  /* Layout */
  --tl-container: 1360px;
  --tl-pad: clamp(16px, 3vw, 40px);
  --tl-rhythm: clamp(64px, 8vw, 124px);
  --tl-rhythm-sm: clamp(28px, 3.4vw, 44px);
}

/* ==========================================================================
   2. Fonts (self-hosted, WOFF2)
   ========================================================================== */
/* Self-hosted variable fonts — one file per family/style covers the full
   weight range we use (400/500/600/700), so this is 3 files total, ~110KB. */
@font-face{
  font-family:"Work Sans"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("assets/fonts/work-sans-variable.woff2") format("woff2");
}
@font-face{
  font-family:"Lora"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("assets/fonts/lora-variable.woff2") format("woff2");
}
@font-face{
  font-family:"Lora"; font-style:italic; font-weight:400 600; font-display:swap;
  src:url("assets/fonts/lora-italic-variable.woff2") format("woff2");
}

/* ==========================================================================
   3. Reset — zero radius, zero shadow, everywhere
   ========================================================================== */
*, *::before, *::after{ box-sizing:border-box; border-radius:0 !important; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--tl-white); color:var(--tl-ink);
  font-family:var(--tl-font-sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input, textarea, select{ font-family:inherit; }
ul{ list-style:none; margin:0; padding:0; }
li{ list-style:none; } /* covers menus rendered without their <ul> wrapper (items_wrap="%3$s") */
h1,h2,h3,h4,p{ margin:0; text-wrap:pretty; }
:focus-visible{ outline:2px solid var(--tl-red); outline-offset:2px; }

.tl-container{ max-width:var(--tl-container); margin-inline:auto; padding-inline:var(--tl-pad); }
/* A narrower reading column that still starts at the SAME left edge as a
   full-bleed edge-aligned header above it (e.g. .tl-tm__head-copy) — unlike
   .tl-container with an overridden max-width, which would instead CENTER
   the narrower box and drift away from the header's edge. */
.tl-article{
  /* --tl-article-width is the DESIRED CONTENT width (default: the same
     1360px everything else uses) — set it inline per call site, e.g.
     style="--tl-article-width:640px". Do NOT set max-width directly on a
     call site: max-width here is edge-padding + content-width + right-pad,
     computed together, so it grows in step with the edge padding. A flat
     max-width fighting an ever-growing padding-left is exactly what broke
     the About/Team/Practices page text down to one word per line on a wide
     monitor — the visible content width silently shrank toward zero past
     a certain viewport size. */
  --tl-article-width: var(--tl-container);
  box-sizing:border-box; margin-inline:0;
  padding-left:max(var(--tl-pad), calc((100vw - var(--tl-container)) / 2 + var(--tl-pad)));
  padding-right:var(--tl-pad);
  max-width:calc(max(var(--tl-pad), calc((100vw - var(--tl-container)) / 2 + var(--tl-pad))) + var(--tl-article-width) + var(--tl-pad));
}
.tl-section{ padding-block:var(--tl-rhythm); }
.tl-section--tight{ padding-block:var(--tl-rhythm-sm); }
.tl-visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.tl-skip-link{
  position:absolute; left:8px; top:-60px; z-index:200; background:var(--tl-red); color:#fff;
  padding:10px 16px; font:600 14px/1 var(--tl-font-sans); transition:top .2s;
}
.tl-skip-link:focus{ top:8px; }

/* ==========================================================================
   4. Type roles
   ========================================================================== */
.tl-eyebrow{
  display:inline-flex; align-items:center; gap:14px;
  font:600 12px/1.2 var(--tl-font-sans); text-transform:uppercase; letter-spacing:.18em;
  color:var(--tl-red);
}
.tl-eyebrow--onDark{ color:#C9C5C1; }
.tl-eyebrow .tl-rule{ width:56px; height:3px; background:var(--tl-red); flex:none; }

h1.tl-h1, .tl-h1{
  font:600 clamp(38px,5.4vw,72px)/1.03 var(--tl-font-sans); letter-spacing:-0.025em;
  max-width:16em;
}
h2.tl-h2, .tl-h2{
  font:600 clamp(28px,3.4vw,46px)/1.12 var(--tl-font-sans); letter-spacing:-0.02em;
  max-width:16em;
}
.tl-h3--featured{ font:600 clamp(22px,2.2vw,30px)/1.2 var(--tl-font-sans); letter-spacing:-0.015em; }
.tl-h3{ font:600 clamp(19px,1.7vw,23px)/1.25 var(--tl-font-sans); letter-spacing:-0.01em; }

.tl-lead{ font:400 clamp(16px,1.35vw,19px)/1.65 var(--tl-font-serif); max-width:42ch; color:var(--tl-body); }
.tl-body{ font:400 clamp(15px,1vw,17.5px)/1.7 var(--tl-font-serif); color:var(--tl-body); max-width:60ch; }
/* Prose elements inside post/page content (bios, practice-area copy, etc.) */
.tl-body > * + *{ margin-top:1.3em; }
.tl-body h2, .tl-body h3{ font-family:var(--tl-font-sans); font-weight:600; color:var(--tl-ink); margin-top:1.6em; }
.tl-body h2{ font-size:clamp(20px,2vw,26px); }
.tl-body h3{ font-size:clamp(16px,1.3vw,19px); text-transform:uppercase; letter-spacing:.04em; }
.tl-body ul, .tl-body ol{ padding-left:1.2em; }
.tl-body ul{ list-style:disc; }
.tl-body ol{ list-style:decimal; }
.tl-body li + li{ margin-top:.4em; }
.tl-body li{ list-style:revert; }
.tl-body blockquote{
  border-left:3px solid var(--tl-red); padding-left:1.2em; font-style:italic; color:var(--tl-ink);
}
.tl-body blockquote cite{ display:block; margin-top:.6em; font-style:normal; font:600 13px var(--tl-font-sans); color:var(--tl-muted); }
.tl-pullquote{ font:italic 400 clamp(26px,4vw,54px)/1.2 var(--tl-font-serif); max-width:20ch; }

/* ==========================================================================
   5. Buttons
   ========================================================================== */
.tl-btn{
  display:inline-flex; align-items:center; gap:12px; white-space:nowrap;
  font:600 15px/1 var(--tl-font-sans); padding:17px 30px; border:1px solid transparent;
  transition:background .25s cubic-bezier(.16,1,.3,1), border-color .25s cubic-bezier(.16,1,.3,1), transform .1s;
}
.tl-btn:active{ transform:translateY(1px); }
.tl-btn--solid{ background:var(--tl-red); color:#fff; }
.tl-btn--solid:hover{ background:var(--tl-red-dark); }
.tl-btn--outline{ background:transparent; color:#fff; border-color:#6E6B68; }
.tl-btn--outline:hover{ background:#3E3D3B; border-color:#fff; }
.tl-btn--sm{ padding:13px 20px; font-size:14px; }
.tl-btn--cta{ background:var(--tl-red); color:#fff; padding:13px 20px; font:600 14px/1 var(--tl-font-sans); }
.tl-btn--cta:hover{ background:var(--tl-red-dark); }
.tl-link-underline{
  display:inline-flex; align-items:center; gap:10px; font:600 14px/1 var(--tl-font-sans); color:var(--tl-red);
  border-bottom:2px solid var(--tl-red); padding-bottom:4px;
}

/* ==========================================================================
   6. Utility bar
   ========================================================================== */
.tl-utility{ background:var(--tl-ink); color:#C9C5C1; font:400 12.5px/1.3 var(--tl-font-sans); letter-spacing:.02em; }
.tl-utility .tl-container{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; padding-block:9px; }
.tl-utility__left{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px; }
.tl-utility__item{ display:inline-flex; align-items:center; gap:8px; }
.tl-utility__dot{ width:6px; height:6px; background:var(--tl-red); flex:none; }
.tl-utility a:hover{ color:#fff; }

/* ==========================================================================
   7. Header
   ========================================================================== */
.tl-header{
  background:#fff; border-bottom:1px solid var(--tl-line); position:sticky; top:0; z-index:50;
}
.tl-header .tl-container{ display:flex; align-items:center; height:74px; gap:clamp(16px,3vw,40px); }
.tl-header__logo img{ width:clamp(118px,12vw,158px); height:auto; }
.tl-nav{ display:flex; align-items:center; gap:clamp(12px,1.9vw,28px); margin-left:auto; }
.tl-nav a{
  font:500 14.5px/1 var(--tl-font-sans); color:var(--tl-ink); white-space:nowrap; padding:6px 2px;
}
.tl-nav a:hover{ color:var(--tl-red); }
.tl-nav li{ position:relative; }
.tl-nav li.menu-item-has-children > a{ display:inline-flex; align-items:center; gap:5px; }
.tl-nav li.menu-item-has-children > a::after{
  content:""; width:6px; height:6px; margin-top:-3px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg);
}
.tl-nav .sub-menu{
  position:absolute; top:100%; left:0; margin-top:14px; background:#fff; border:1px solid var(--tl-line);
  min-width:280px; padding:8px 0; z-index:60;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .2s cubic-bezier(.16,1,.3,1), transform .2s cubic-bezier(.16,1,.3,1), visibility .2s;
}
.tl-nav li.menu-item-has-children:hover > .sub-menu,
.tl-nav li.menu-item-has-children:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.tl-nav .sub-menu a{ display:block; padding:11px 20px; font-size:14px; white-space:nowrap; color:var(--tl-ink); }
.tl-nav .sub-menu a:hover{ background:var(--tl-stone); color:var(--tl-red); }

.tl-mobile-nav__links li.menu-item-has-children{ display:flex; flex-wrap:wrap; align-items:center; }
.tl-mobile-nav__links li.menu-item-has-children > a{ flex:1; border-bottom:0; }
.tl-mobile-nav__links li.menu-item-has-children{ border-bottom:1px solid var(--tl-line-dark); }
.tl-mobile-nav__links .tl-submenu-toggle{
  background:none; border:0; color:#fff; width:44px; height:44px; flex:none;
  display:flex; align-items:center; justify-content:center;
}
.tl-mobile-nav__links .tl-submenu-toggle::after{
  content:""; width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform .25s cubic-bezier(.16,1,.3,1);
}
.tl-mobile-nav__links li.is-open .tl-submenu-toggle::after{ transform:rotate(-135deg); }
.tl-mobile-nav__links .sub-menu{
  flex-basis:100%; max-height:0; overflow:hidden; transition:max-height .3s cubic-bezier(.16,1,.3,1);
}
.tl-mobile-nav__links li.is-open > .sub-menu{ max-height:600px; }
.tl-mobile-nav__links .sub-menu a{ font-size:16px; padding-left:20px; color:#C9C5C1; border-bottom:1px solid var(--tl-line-dark); }
.tl-header__cta{ margin-left:clamp(8px,1.4vw,16px); }
.tl-header__toggle{
  display:none; margin-left:auto; background:none; border:0; width:44px; height:44px;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.tl-header__toggle span{ width:22px; height:2px; background:var(--tl-ink); display:block; }

.tl-mobile-nav{
  position:fixed; inset:0; background:var(--tl-ink); z-index:100; padding:clamp(24px,5vw,48px);
  display:flex; flex-direction:column; transform:translateY(-100%); transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.tl-mobile-nav.is-open{ transform:translateY(0); }
.tl-mobile-nav__close{ align-self:flex-end; background:none; border:0; color:#fff; width:44px; height:44px; font-size:28px; }
.tl-mobile-nav__links{ margin-top:clamp(24px,6vh,56px); display:flex; flex-direction:column; gap:8px; }
.tl-mobile-nav__links a{ font:500 20px/1 var(--tl-font-sans); color:#fff; padding:14px 4px; border-bottom:1px solid var(--tl-line-dark); }
.tl-mobile-nav .tl-btn{ margin-top:auto; justify-content:center; }

@media (max-width:900px){
  .tl-nav{ display:none; }
  .tl-header__toggle{ display:flex; }
}

/* ==========================================================================
   8. Hero
   ========================================================================== */
/* The hero photo/video now runs full-bleed behind the copy (previously a
   50/50 grid split) — .tl-hero__media is absolutely positioned to fill
   .tl-hero edge-to-edge, and .tl-hero__copy sits on top of it, in normal
   flow, establishing the section's height itself (media contributes none,
   being out of flow). The scrim gradient does the legibility work that the
   copy's old solid background used to. */
.tl-hero{ position:relative; background:var(--tl-ink); overflow:hidden; }
.tl-hero__copy{
  /* Same edge-alignment formula used everywhere else (padding-left must
     never pair with a flat max-width — see .tl-article above — so the
     content width here is added to the SAME padding-left formula, not a
     fixed number, or it regresses on wide screens exactly like the bug
     documented on .tl-article). */
  --tl-hero-copy-width: 620px;
  position:relative; z-index:1; box-sizing:border-box;
  min-height:clamp(420px,54vw,680px);
  padding-top:clamp(48px,6vw,96px);
  padding-bottom:clamp(56px,7vw,104px);
  padding-right:clamp(16px,3vw,40px);
  padding-left:max(var(--tl-pad), calc((100vw - var(--tl-container)) / 2 + var(--tl-pad)));
  max-width:calc(max(var(--tl-pad), calc((100vw - var(--tl-container)) / 2 + var(--tl-pad))) + var(--tl-hero-copy-width) + clamp(16px,3vw,40px));
  display:flex; flex-direction:column; justify-content:center; gap:22px;
}
.tl-hero__copy h1{ color:#fff; }
.tl-hero__lead{ color:#C9C5C1; }
.tl-hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:6px; }
.tl-hero__media{
  position:absolute; inset:0; overflow:hidden;
}
.tl-hero__media img, .tl-hero__media video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.18);
}
.tl-hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg, #30302F 0%, rgba(48,48,47,.55) 34%, rgba(48,48,47,.18) 100%);
}
.tl-hero__slash{
  position:absolute; right:-30px; top:0; width:clamp(34px,4.5vw,64px); height:100%;
  background:var(--tl-red); transform:skewX(-24deg);
}
/* Photo-credit for licensed (e.g. CC-BY-SA) imagery — small and out of the
   way, but visible per the license's attribution requirement. */
.tl-hero__credit{
  position:absolute; right:10px; bottom:8px; z-index:2;
  font:400 11px/1.3 var(--tl-font-sans); color:rgba(255,255,255,.75);
  background:rgba(0,0,0,.35); padding:3px 8px;
}
.tl-hero__credit a{ color:#fff; text-decoration:underline; }
/* No hero photo uploaded yet — a plain tonal placeholder instead of a broken <img>. */
.tl-hero__media-placeholder{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(-24deg, rgba(255,255,255,.03) 0 2px, transparent 2px 34px),
    linear-gradient(160deg, #3a3937 0%, #26251f 100%);
}
/* Parallax translateY is applied by JS (assets/js/main.js) on scroll — the
   animation-timeline:view() CSS approach was tried first but proved
   unreliable across browsers (progress didn't track scroll position even
   where CSS.supports() reported the feature present), so JS is now the
   single source of truth for this rather than a "supported browsers only"
   enhancement. */

/* ==========================================================================
   9. Stats plinth
   ========================================================================== */
.tl-stats{ background:var(--tl-ink-2); border-top:1px solid var(--tl-line-dark); padding-block:clamp(28px,3.2vw,44px); }
.tl-stats__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:20px; }
.tl-stats__item{ display:flex; align-items:baseline; gap:14px; }
.tl-stats__num{ font:600 clamp(26px,2.5vw,32px)/1 var(--tl-font-sans); letter-spacing:-0.025em; color:#fff; flex:none; }
.tl-stats__label{ font:400 13px/1.35 var(--tl-font-sans); color:var(--tl-muted-dark); }

/* ==========================================================================
   10. About
   ========================================================================== */
.tl-about{ background:#fff; }
.tl-about__grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:clamp(36px,5vw,80px); align-items:start;
}
.tl-about__copy{ display:flex; flex-direction:column; gap:18px; }
.tl-about__copy h2{ margin-top:8px; }
.tl-about__copy p{ max-width:60ch; }
.tl-about__brand{ font:600 1em var(--tl-font-sans); color:var(--tl-ink); }
.tl-about__panel{
  background:var(--tl-stone); padding:clamp(26px,3.2vw,44px); position:relative; overflow:hidden;
}
.tl-about__marker{ position:absolute; right:-14px; top:0; width:clamp(20px,2.6vw,34px); height:64px; background:var(--tl-red); transform:skewX(-24deg); }
.tl-about__rows{ display:grid; gap:clamp(16px,2vw,26px); }
.tl-about__row{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(16px,2vw,26px); padding-block:clamp(22px,2.6vw,30px);
}
.tl-about__row + .tl-about__row{ border-top:1px solid var(--tl-line-2); }
.tl-about__num{ font:600 13px/1 var(--tl-font-sans); letter-spacing:.14em; color:var(--tl-red); padding-top:4px; }
.tl-about__row h3{ font:600 clamp(17px,1.5vw,19px)/1.3 var(--tl-font-sans); margin-bottom:8px; }
.tl-about__row p{ font:400 15.5px/1.7 var(--tl-font-serif); color:var(--tl-body); max-width:42ch; }

/* ==========================================================================
   11. Practice areas grid
   ========================================================================== */
.tl-practices{ background:var(--tl-stone); }
.tl-practices__head{ margin-bottom:clamp(28px,4vw,48px); display:flex; flex-direction:column; gap:14px; }
.tl-grid{
  display:grid; gap:1px; background:var(--tl-line-2); border:1px solid var(--tl-line-2);
  grid-template-columns:repeat(auto-fit, minmax(min(100%,290px),1fr));
}
/* Practice-areas grid: a fixed 3×3 desktop layout (not auto-fit) so the
   featured tile always lands in the requested column per row — see the
   menu_order in seed.php for which practice sits where. Featured tiles no
   longer span 2 columns; they're the same footprint, just photo-backed. */
.tl-practices__grid{ grid-template-columns:repeat(auto-fit, minmax(min(100%,290px),1fr)); }
@media (min-width:900px){
  .tl-practices__grid{ grid-template-columns:repeat(3, 1fr); }
}
.tl-tile{ background:#fff; min-height:320px; position:relative; overflow:hidden; }
.tl-tile--featured{ padding:clamp(24px,3vw,40px); display:flex; align-items:flex-end; color:#fff; }
.tl-tile--featured img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transform:scale(1.1);
}
.tl-tile--featured::before{ content:""; position:absolute; inset:0; background:rgba(48,48,47,.72); z-index:1; }
.tl-tile--featured > .tl-tile__body{ position:relative; z-index:2; }
.tl-tile__num{ font:600 11.5px/1 var(--tl-font-sans); text-transform:uppercase; letter-spacing:.16em; opacity:.75; display:block; margin-bottom:14px; }
.tl-tile--featured .tl-tile__desc{ color:#EAE7E4; font:400 15.5px/1.6 var(--tl-font-serif); max-width:46ch; margin-top:12px; }
.tl-tile--featured .tl-tile__link{
  display:inline-block; margin-top:18px; font:600 13px/1 var(--tl-font-sans); border-bottom:2px solid var(--tl-red); padding-bottom:4px;
}
.tl-tile--standard{ padding:clamp(24px,3vw,36px); display:flex; flex-direction:column; transition:background .25s cubic-bezier(.16,1,.3,1), color .25s cubic-bezier(.16,1,.3,1); }
.tl-tile--standard .tl-tile__num{ color:var(--tl-muted); opacity:1; }
.tl-tile--standard .tl-tile__desc{ font:400 15px/1.6 var(--tl-font-serif); opacity:.72; margin-top:10px; }
.tl-tile--standard .tl-tile__link{ margin-top:auto; padding-top:18px; color:var(--tl-red); font:600 14px/1 var(--tl-font-sans); }
.tl-tile--standard:hover{ background:var(--tl-ink); color:#fff; }
.tl-tile__link-wrap{ position:absolute; inset:0; z-index:3; }
.tl-tile__link-wrap span{ position:absolute; width:1px; height:1px; overflow:hidden; }

/* ==========================================================================
   12. Pull-quote
   ========================================================================== */
.tl-pullquote-section{ position:relative; background:var(--tl-ink); overflow:hidden; padding:clamp(72px,9vw,140px) 0; }
.tl-pullquote-section img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.18);
}
.tl-pullquote-section::before{ content:""; position:absolute; inset:0; background:rgba(48,48,47,.86); }
.tl-pullquote-section__placeholder{
  position:absolute; inset:0;
  background:repeating-linear-gradient(-24deg, rgba(255,255,255,.04) 0 2px, transparent 2px 34px), #26251f;
}
.tl-pullquote-section .tl-article{ position:relative; z-index:1; }
.tl-pullquote-section blockquote{ color:#fff; margin:0; }
.tl-pullquote-section p.tl-body{ color:#C9C5C1; max-width:52ch; margin-top:22px; }
.tl-pullquote__rule{
  width:clamp(120px,20vw,280px); height:3px; background:var(--tl-red); margin-top:32px;
  transform-origin:left; animation:tl-wipe 1s linear; animation-timeline:view(); animation-range:entry 20% cover 40%;
}

/* ==========================================================================
   13. Reviews
   ========================================================================== */
.tl-reviews{ background:var(--tl-stone); }
.tl-reviews__head{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:24px; align-items:end; margin-bottom:clamp(28px,4vw,44px); }
.tl-reviews__summary{
  justify-self:end; width:100%; max-width:520px; box-sizing:border-box; background:#fff;
  border-top:3px solid var(--tl-red); padding:clamp(22px,2.6vw,30px);
}
.tl-reviews__score{ font:600 clamp(40px,4.6vw,58px)/1 var(--tl-font-sans); letter-spacing:-0.03em; }
.tl-reviews__stars{ color:var(--tl-star); font-size:16px; letter-spacing:3px; margin-block:8px; }
.tl-reviews__frame{ border:1px solid var(--tl-line-2); background:#fff; }
.tl-reviews__chrome{ background:var(--tl-stone-2); border-bottom:1px solid var(--tl-line-2); padding:12px clamp(16px,2vw,24px); font:600 12px/1 var(--tl-font-sans); text-transform:uppercase; letter-spacing:.1em; color:var(--tl-muted); }
.tl-reviews__cards{ display:grid; gap:1px; background:var(--tl-line-2); grid-template-columns:repeat(auto-fit, minmax(270px,1fr)); }
.tl-review-card{ background:#fff; padding:clamp(20px,2.4vw,28px); }
.tl-review-card__head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.tl-review-card__avatar{
  width:38px; height:38px; border-radius:50% !important; background:var(--tl-stone); color:var(--tl-ink);
  display:flex; align-items:center; justify-content:center; font:600 14px/1 var(--tl-font-sans); flex:none;
}
.tl-review-card__meta{ flex:1; min-width:0; }
.tl-review-card__name{ font:600 14.5px/1.3 var(--tl-font-sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tl-review-card__date{ font:400 12.5px/1.3 var(--tl-font-sans); color:var(--tl-muted); }
.tl-review-card__stars{ color:var(--tl-star); font-size:14px; letter-spacing:2.5px; margin-bottom:10px; }
.tl-review-card__quote{ font:400 16.5px/1.6 var(--tl-font-serif); color:var(--tl-body); }
.tl-reviews__footer{ display:flex; align-items:center; justify-content:space-between; padding:14px clamp(16px,2vw,24px); border-top:1px solid var(--tl-line-2); }
.tl-reviews__dots{ display:flex; gap:6px; }
.tl-reviews__dots span{ width:7px; height:7px; background:#D8D4D0; }
.tl-reviews__dots span.is-active{ background:var(--tl-red); }

/* Reviews page (template-reviews.php) — trust readout inline in the dark
   header, and a closing CTA band matching the site's other dark sections. */
.tl-reviews-hero-trust{ display:flex; align-items:center; gap:12px; margin-top:6px; }
.tl-reviews-hero-trust__score{ font:600 clamp(34px,3.6vw,44px)/1 var(--tl-font-sans); color:#fff; letter-spacing:-0.02em; }
.tl-reviews-hero-trust__stars{ color:var(--tl-star); font-size:16px; letter-spacing:2px; }
.tl-reviews-hero-trust__label{ font:400 13px/1.4 var(--tl-font-sans); color:#C9C5C1; }

.tl-reviews-cta{ background:var(--tl-ink); text-align:center; padding-block:clamp(56px,7vw,96px); }
.tl-reviews-cta h2{ color:#fff; font:600 clamp(24px,2.8vw,34px)/1.25 var(--tl-font-sans); margin-top:14px; }
.tl-reviews-cta p{ color:#C9C5C1; max-width:52ch; margin:14px auto 28px; font:400 15.5px/1.6 var(--tl-font-serif); }
.tl-btn-row{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* ==========================================================================
   14. Awards
   ========================================================================== */
.tl-awards{ background:#fff; }
.tl-awards__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:clamp(28px,4vw,44px); }
.tl-awards__intro{ max-width:52ch; }
.tl-awards__grid{ background:var(--tl-line); grid-template-columns:repeat(auto-fit, minmax(min(100%,300px),1fr)); }
.tl-award-card{
  background:#fff; padding:clamp(24px,2.8vw,34px) clamp(20px,2.4vw,30px); display:flex; flex-direction:column; gap:20px;
  transition:background .25s cubic-bezier(.16,1,.3,1);
}
.tl-award-card:hover{ background:var(--tl-stone-3); }
.tl-award-card__plate{ height:96px; display:flex; align-items:center; }
.tl-award-card__plate img{ max-height:96px; object-fit:contain; }
.tl-award-card__year{ font:600 clamp(32px,3.2vw,42px)/1 var(--tl-font-sans); letter-spacing:-0.03em; }
.tl-award-card__year-rule{ width:34px; height:3px; background:var(--tl-red); margin-top:10px; }
.tl-award-card__eyebrow{ font:600 11px/1 var(--tl-font-sans); text-transform:uppercase; letter-spacing:.14em; color:var(--tl-red); }
.tl-award-card__title{ font:600 clamp(16px,1.4vw,18px)/1.35 var(--tl-font-sans); }
.tl-award-card__issuer{ font:400 13px/1.4 var(--tl-font-sans); color:var(--tl-muted); margin-top:auto; }

/* ==========================================================================
   15. Process
   ========================================================================== */
.tl-process{ background:var(--tl-ink); }
.tl-process__head{ margin-bottom:clamp(28px,4vw,48px); }
.tl-process__head .tl-h2{ color:#fff; }
.tl-process__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:clamp(24px,3vw,44px); }
.tl-process__step{ border-top:1px solid #55534F; padding-top:24px; }
.tl-process__num{ font:600 clamp(46px,5vw,70px)/0.9 var(--tl-font-sans); letter-spacing:-0.03em; color:var(--tl-red); }
.tl-process__step h3{ font:600 21px/1.3 var(--tl-font-sans); color:#fff; margin-top:16px; margin-bottom:10px; }
.tl-process__step p{ font:400 15.5px/1.65 var(--tl-font-serif); color:#C9C5C1; }

/* ==========================================================================
   16. Memberships marquee
   ========================================================================== */
.tl-members{ background:var(--tl-stone); border-bottom:1px solid var(--tl-line); overflow:hidden; padding-block:clamp(28px,3.4vw,40px); }
.tl-members__heading{ font:600 13px/1 var(--tl-font-sans); text-transform:uppercase; letter-spacing:.14em; color:var(--tl-muted); margin-bottom:clamp(20px,2.6vw,28px); }
.tl-members__mask{ mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.tl-members__track{
  display:flex; width:max-content; gap:clamp(40px,6vw,88px); animation:tl-marquee 46s linear infinite;
}
.tl-members__track:hover{ animation-play-state:paused; }
.tl-members__track img{ height:clamp(38px,4vw,54px); width:auto; filter:grayscale(1); opacity:.62; }

/* ==========================================================================
   17. Contact
   ========================================================================== */
.tl-contact{ background:#fff; }
.tl-contact__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:clamp(36px,5vw,72px); }
.tl-contact__copy{ display:flex; flex-direction:column; gap:16px; }
.tl-contact__dl{ max-width:520px; margin-top:12px; display:flex; flex-direction:column; }
.tl-contact__dl-row{ display:flex; justify-content:space-between; gap:16px; padding-block:14px; font-size:15px; border-top:1px solid var(--tl-line); }
.tl-contact__dl-row dt{ color:var(--tl-muted); }
.tl-contact__dl-row dd{ margin:0; text-align:right; }
.tl-contact__panel{ background:var(--tl-stone); padding:clamp(24px,3.4vw,44px); }

/* Form skin — Contact Form 7 markup, shared by every placement of a form
   on the site (.tl-form-panel goes on .tl-contact__panel AND
   .tl-pa__sidebar-inner) so every CF7 instance looks identical regardless
   of which template embeds it. Only the row layout (paired vs stacked
   fields) varies by container, since the sidebar is much narrower. */
.tl-form-panel .wpcf7-form p{ margin:0 0 18px; }
.tl-form-panel .wpcf7-form-control{
  background:#fff; border:1px solid #C6C2BE; padding:13px 14px; font-size:15px; width:100%; box-sizing:border-box;
  font-family:var(--tl-font-sans); color:var(--tl-ink);
}
.tl-form-panel .wpcf7-form-control.wpcf7-select{ appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--tl-body) 50%), linear-gradient(135deg, var(--tl-body) 50%, transparent 50%); background-position: calc(100% - 20px) center, calc(100% - 15px) center; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }
.tl-form-panel label{ font:600 13px/1.3 var(--tl-font-sans); letter-spacing:.04em; margin-bottom:8px; display:block; }
.tl-form-panel textarea.wpcf7-form-control{ resize:vertical; width:100%; }
.tl-form-panel .tl-cf7-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:480px){ .tl-form-panel .tl-cf7-row{ grid-template-columns:1fr; } }
.tl-contact__helper{ font:400 12.5px/1.5 var(--tl-font-sans); color:var(--tl-body); margin-top:8px; }
.tl-contact__map{ margin-top:8px; border:1px solid var(--tl-line-2); }
.tl-contact__map iframe{ display:block; width:100%; height:280px; border:0; }
.tl-form-panel .wpcf7-submit{
  background:var(--tl-red); color:#fff; padding:17px 24px; font:600 15px/1 var(--tl-font-sans); border:0; cursor:pointer; width:100%;
}
.tl-form-panel .wpcf7-submit:hover{ background:var(--tl-red-dark); }
.tl-form-panel .wpcf7-not-valid-tip{ color:var(--tl-red); font:400 12.5px/1.4 var(--tl-font-sans); margin-top:6px; display:block; }
.tl-form-panel .wpcf7-response-output{ margin:18px 0 0; padding:14px 16px; border:1px solid var(--tl-line-2); font-size:14px; }
.tl-form-panel form.sent .wpcf7-response-output{ border-color:var(--tl-red); color:var(--tl-ink); }
.tl-form-panel .wpcf7-spinner{ margin-left:12px; }
/* Sidebar-specific: fields stack (container's too narrow to pair them),
   and the submit button doesn't force full-width there since it already
   sits in a single-column narrow panel — kept here only for parity. */
.tl-pa__sidebar-inner.tl-form-panel .tl-cf7-row{ display:block; }
.tl-pa__sidebar-inner.tl-form-panel .tl-cf7-row + .tl-cf7-row{ margin-top:0; }

/* ==========================================================================
   18. Footer
   ========================================================================== */
.tl-footer{ background:var(--tl-ink); color:#C9C5C1; }
.tl-footer__top{ padding-block:clamp(52px,6vw,88px) clamp(36px,5vw,56px); }
.tl-footer__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:clamp(28px,4vw,56px); }
.tl-footer__logo{ width:168px; height:auto; margin-bottom:18px; }
.tl-footer__blurb{ font:400 14px/1.6 var(--tl-font-sans); max-width:34ch; }
.tl-footer__social{ display:flex; gap:18px; margin-top:18px; }
.tl-footer__social a{ color:#fff; font:400 14px/1 var(--tl-font-sans); }
.tl-footer__heading{ font:600 12px/1 var(--tl-font-sans); text-transform:uppercase; letter-spacing:.16em; color:var(--tl-muted); margin-bottom:18px; }
.tl-footer__links{ display:flex; flex-direction:column; gap:12px; }
.tl-footer__links a{ font:400 14.5px/1.4 var(--tl-font-sans); }
.tl-footer__links a:hover{ color:#fff; }
.tl-footer__col--services{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.tl-footer address{ font-style:normal; font:400 14px/1.6 var(--tl-font-sans); color:#fff; }
.tl-footer__fax{ color:var(--tl-muted); }
.tl-footer__bottom{ border-top:1px solid #4A4948; padding-block:20px; }
.tl-footer__bottom .tl-container{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font:400 12.5px/1.4 var(--tl-font-sans); color:var(--tl-muted); }

/* ==========================================================================
   19. Motion
   ========================================================================== */
@keyframes tl-rise    { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }
@keyframes tl-fade    { from { opacity:0; } to { opacity:1; } }
@keyframes tl-par     { from { transform:translate3d(0,-9%,0) scale(1.18); } to { transform:translate3d(0,9%,0) scale(1.18); } }
@keyframes tl-parslow { from { transform:translate3d(0,-4%,0) scale(1.10); } to { transform:translate3d(0,4%,0) scale(1.10); } }
@keyframes tl-wipe    { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes tl-marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }

[data-tl-animate]{ opacity:0; }
[data-tl-animate].is-in{ opacity:1; }
[data-tl-animate="rise"]{ transform:translateY(28px); transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
[data-tl-animate="rise"].is-in{ transform:none; }
[data-tl-animate="fade"]{ transition:opacity .6s cubic-bezier(.16,1,.3,1); }

@supports (animation-timeline: view()){
  [data-tl-animate]{ opacity:1; transform:none; } /* CSS scroll-driven anim takes over in .tl-can-view-timeline below */
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:1ms !important; animation-iteration-count:1 !important; }
  html{ scroll-behavior:auto; }
  .tl-members__track{ animation-play-state:paused; }
}

/* ==========================================================================
   20. Practice-area (department) page
   ========================================================================== */
.tl-pa__head{ background:var(--tl-ink); padding-block:clamp(48px,6vw,80px) clamp(36px,4.5vw,56px); }
.tl-pa__trust{ font:500 clamp(15px,1.3vw,18px)/1.5 var(--tl-font-serif); color:var(--tl-red); margin-top:14px; max-width:44ch; }
.tl-pa__head-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }

.tl-pa__proof{ background:var(--tl-stone); border-bottom:1px solid var(--tl-line); }
.tl-pa__proof-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,240px),1fr)); gap:clamp(24px,3vw,40px);
  padding-block:clamp(28px,3.4vw,40px);
}
.tl-pa__proof-item{ display:flex; gap:16px; align-items:flex-start; }
.tl-pa__proof-icon{ width:30px; height:30px; flex:none; color:var(--tl-red); margin-top:2px; }
.tl-pa__proof-item h3{ font:600 15px/1.3 var(--tl-font-sans); margin-bottom:6px; }
.tl-pa__proof-item p{ font:400 14px/1.5 var(--tl-font-serif); color:var(--tl-body); }
.tl-pa__proof-award{
  display:flex; align-items:center; gap:14px; padding:10px 14px; background:#fff; border:1px solid var(--tl-line-2);
  transition:background .2s cubic-bezier(.16,1,.3,1);
}
.tl-pa__proof-award:hover{ background:var(--tl-stone-3); }
.tl-pa__proof-award img{ max-height:44px; max-width:70px; object-fit:contain; flex:none; }
.tl-pa__proof-award span{ font:600 13px/1.3 var(--tl-font-sans); color:var(--tl-ink); }

/* ==========================================================================
   22. Team member profile
   ========================================================================== */
.tl-tm__head{ background:var(--tl-ink); display:grid; grid-template-columns:repeat(auto-fit, minmax(340px,1fr)); }
.tl-tm__head-copy{
  /* Aligns to the same content edge as .tl-hero__copy and every .tl-container
     on the page — see the note there. margin-inline:auto here would instead
     CENTER the block within its own grid column, which drifts away from the
     rest of the site's left edge on anything wider than ~1440px.
     Deliberately NO max-width here — same as .tl-hero__copy. This is a grid
     column whose width already grows with the viewport; pairing that with a
     FIXED max-width while padding-left keeps growing (to track the edge)
     shrinks the actual content area toward zero at wide viewports — that's
     what broke the About/Team/Practices header text down to single words
     per line on a wide monitor. The column width and padding-left both scale
     at ~vw/2, so their difference (the usable text width) is naturally
     stable without an explicit cap. */
  padding-top:clamp(48px,6vw,88px); padding-bottom:clamp(48px,6vw,88px);
  padding-right:clamp(16px,3vw,40px);
  padding-left:max(var(--tl-pad), calc((100vw - var(--tl-container)) / 2 + var(--tl-pad)));
  display:flex; flex-direction:column; gap:16px; justify-content:center;
}
.tl-tm__role{ font:400 clamp(17px,1.4vw,20px)/1.5 var(--tl-font-serif); color:#C9C5C1; }
.tl-tm__contact{ display:flex; flex-wrap:wrap; gap:8px 22px; font:500 14.5px/1 var(--tl-font-sans); }
.tl-tm__contact a{ color:#fff; border-bottom:1px solid var(--tl-line-dark); padding-bottom:3px; }
.tl-tm__contact a:hover{ border-color:var(--tl-red); color:var(--tl-red); }
/* Standard photo frame — fixed portrait aspect ratio, same size for every
   lawyer regardless of whether the source photo is a tight headshot or a
   full-body shot. object-fit:contain shows the whole image with nothing
   cropped off; a plain dark fill behind it means a shorter/wider source
   photo just letterboxes instead of stretching or blowing up past its
   native resolution (our source photos are modest-resolution headshots —
   forcing them to fill a huge cover-crop area was what made them look
   pixelated at this size). */
.tl-tm__head-media{ display:flex; align-items:center; justify-content:center; padding:clamp(24px,4vw,48px); }
.tl-tm__frame{
  position:relative; width:100%; max-width:340px; aspect-ratio:4/5; overflow:hidden;
  background:#26251f; border:1px solid var(--tl-line-dark);
}
.tl-tm__frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; }
.tl-tm__head-media-placeholder{ position:absolute; inset:0; background:repeating-linear-gradient(-24deg, rgba(255,255,255,.03) 0 2px, transparent 2px 34px), #26251f; }
@media (max-width:740px){
  .tl-tm__head{ grid-template-columns:1fr; }
  .tl-tm__frame{ max-width:260px; }
}

/* ==========================================================================
   23. Blog index & cards
   ========================================================================== */
.tl-blog-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,320px),1fr)); gap:clamp(28px,3vw,40px); }
.tl-blog-card{ display:flex; flex-direction:column; }
.tl-blog-card__media{ aspect-ratio:760/480; overflow:hidden; background:var(--tl-stone); margin-bottom:18px; }
.tl-blog-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .4s cubic-bezier(.16,1,.3,1); }
.tl-blog-card:hover .tl-blog-card__media img{ transform:scale(1.04); }
.tl-blog-card__media-placeholder{ width:100%; height:100%; background:repeating-linear-gradient(-24deg, rgba(0,0,0,.025) 0 2px, transparent 2px 34px), var(--tl-stone); }
.tl-blog-card__cat{ display:inline-block; font:600 11px/1 var(--tl-font-sans); text-transform:uppercase; letter-spacing:.1em; color:var(--tl-red); margin-bottom:10px; }
.tl-blog-card__body h2{ margin-bottom:10px; }
.tl-blog-card__excerpt{ font:400 15px/1.6 var(--tl-font-serif); color:var(--tl-body); margin-bottom:12px; }
.tl-blog-card__date{ font:400 13px/1 var(--tl-font-sans); color:var(--tl-muted); }
.tl-blog-pagination{ margin-top:clamp(40px,5vw,64px); }

/* Home page's "Latest insights" strip — forces a clean 3x2 for the 6 cards
   instead of leaving column count to auto-fit (which can wrap unevenly at
   in-between viewport widths). */
.tl-blog-grid--home{ grid-template-columns:repeat(3, 1fr); }
@media (max-width:900px){ .tl-blog-grid--home{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:600px){ .tl-blog-grid--home{ grid-template-columns:1fr; } }
.tl-insights-home{ background:#fff; border-bottom:1px solid var(--tl-line); }
.tl-blog-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 12px;
  font:500 14px/1 var(--tl-font-sans); color:var(--tl-ink); border:1px solid var(--tl-line); margin-right:6px;
}
.tl-blog-pagination .page-numbers.current{ background:var(--tl-red); border-color:var(--tl-red); color:#fff; }
.tl-blog-pagination .page-numbers:not(.current):not(.dots):hover{ background:var(--tl-stone); }

.tl-pa__layout{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,360px);
  gap:clamp(36px,5vw,64px); align-items:start;
}
.tl-pa__main{ min-width:0; }
.tl-pa__team{ margin-top:clamp(48px,6vw,72px); padding-top:clamp(32px,4vw,48px); border-top:1px solid var(--tl-line); }

/* Practice-area pricing block — transparent, upfront pricing shown before
   the booking CTA, echoing the "No surprise costs" promise made in the
   proof strip at the top of the page. */
.tl-pa__pricing{ margin-top:clamp(48px,6vw,72px); padding-top:clamp(32px,4vw,48px); border-top:1px solid var(--tl-line); }
.tl-pricing-table{ background:var(--tl-stone); border-top:3px solid var(--tl-red); }
.tl-pricing-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px clamp(20px,3vw,28px); }
.tl-pricing-row + .tl-pricing-row{ border-top:1px solid var(--tl-line-2); }
.tl-pricing-row__label{ display:flex; flex-direction:column; gap:4px; }
.tl-pricing-row__name{ font:600 16px/1.3 var(--tl-font-sans); color:var(--tl-ink); }
.tl-pricing-row__duration{ font:400 13px/1.4 var(--tl-font-sans); color:var(--tl-muted); }
.tl-pricing-row__price{ font:600 26px/1 var(--tl-font-sans); color:var(--tl-red); letter-spacing:-0.02em; white-space:nowrap; }
.tl-pricing-note{ font:400 13px/1.5 var(--tl-font-sans); color:var(--tl-muted); margin-top:14px; }
@media (max-width:480px){
  .tl-pricing-row{ flex-direction:column; align-items:flex-start; gap:8px; }
}

.tl-pa__sidebar{ position:sticky; top:calc(74px + 24px); } /* below the sticky header */
.tl-pa__sidebar-inner{ background:var(--tl-stone); padding:clamp(24px,2.6vw,32px); border-top:3px solid var(--tl-red); }
.tl-pa__trust-badge{ display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 10px; margin-bottom:16px; }
.tl-pa__trust-score{ font:600 28px/1 var(--tl-font-sans); letter-spacing:-0.02em; }
.tl-pa__trust-stars{ color:var(--tl-star); font-size:14px; letter-spacing:2px; }
.tl-pa__trust-label{ flex-basis:100%; font:400 13px/1.4 var(--tl-font-sans); color:var(--tl-muted); }
.tl-pa__consult{ font:500 14.5px/1.5 var(--tl-font-serif); color:var(--tl-ink); background:#fff; border:1px solid var(--tl-line-2); padding:12px 14px; margin-bottom:18px; }
.tl-pa__or{ text-align:center; font:600 12px/1 var(--tl-font-sans); text-transform:uppercase; letter-spacing:.08em; color:var(--tl-muted); margin-bottom:16px; }
.tl-pa__sidebar-title{ font:600 20px/1.3 var(--tl-font-sans); color:var(--tl-ink); margin-bottom:8px; }
.tl-pa__sidebar-desc{ font:400 14.5px/1.5 var(--tl-font-serif); color:var(--tl-body); margin-bottom:18px; }
/* Same .tl-pricing-table used in the main content column (see "Practice-area
   pricing block" above) — the sidebar already supplies the stone background
   and red top accent, so this modifier swaps to a plain white card instead
   of doubling both up. */
.tl-pricing-table--sidebar{ background:#fff; border-top:none; border:1px solid var(--tl-line-2); margin-bottom:14px; }
.tl-pricing-table--sidebar .tl-pricing-row{ padding:14px 16px; }
.tl-pricing-table--sidebar .tl-pricing-row__name{ font-size:14.5px; }
.tl-pricing-table--sidebar .tl-pricing-row__price{ font-size:22px; }

@media (max-width:900px){
  .tl-pa__layout{ grid-template-columns:1fr; }
  .tl-pa__sidebar{ position:static; }
}

/* Single blog post (Insights). Reuses .tl-pa__layout/sidebar/trust-badge
   above — same "prose + sticky consult CTA" pattern as practice-area pages. */
.tl-post__meta{ font:400 14px/1.5 var(--tl-font-sans); color:#C9C5C1; margin-top:14px; }
.tl-post__media{ aspect-ratio:760/480; overflow:hidden; margin-top:clamp(28px,4vw,44px); }
.tl-post__media img{ width:100%; height:100%; object-fit:cover; }
.tl-post__foot{ margin-top:clamp(36px,4vw,52px); padding-top:clamp(24px,3vw,32px); border-top:1px solid var(--tl-line); }
.tl-post__related{ padding-block:var(--tl-rhythm); border-top:1px solid var(--tl-line); }

/* ==========================================================================
   21. Responsive helpers
   ========================================================================== */
@media (max-width:740px){
  .tl-reviews__summary{ justify-self:stretch; max-width:none; }
}
.tl-footer, .tl-utility, .tl-header, .tl-process, .tl-hero{ }
@media (max-width: 600px){
  .tl-utility .tl-container, .tl-footer__bottom .tl-container{ font-size:12.5px; }
  .tl-utility a, .tl-footer__bottom a{ padding-block:6px; display:inline-block; }
}