/* =========================================
   FONTS — Nimbus Sans

   Every face is declared TWICE, under both names this site asks for:
   'Nimbus Sans' (the name these @font-face blocks always used) and
   'nimbus-sans' (the Adobe-Fonts-style name that --font, the html body *
   reset and most component rules list FIRST). CSS family matching ignores
   case but not the hyphen, so 'nimbus-sans' matched nothing and those rules
   fell through to 'Helvetica Neue' → Helvetica → Arial → sans-serif — a
   different font on every OS (Helvetica Neue on macOS/iOS, Arial on Windows,
   Roboto on Android). @font-face has no alias syntax, so the blocks are
   repeated; identical URLs are still fetched once.

   src order: the woff2 files that ship inside this theme first (~46KB and
   supported by every browser in use), then the original OTFs in uploads, so
   the font still renders if only one of the two locations is deployed. Both
   URLs are site-absolute on purpose — a relative ../fonts/ path breaks the
   moment an optimiser (LiteSpeed here) combines or inlines this stylesheet
   from a different directory.

   The bold faces claim 700–900 so the font-weight:800/900 rules in the menu,
   headings and stat numbers bind to the real bold face instead of leaving
   each browser to synthesise its own fake bold at its own strength.
========================================= */

@font-face {
  font-family: 'Nimbus Sans';
  src: url('/wp-content/themes/divi-child/assets/fonts/NimbusSanL-Reg.woff2') format('woff2'),
       url('/wp-content/uploads/fonts/NimbusSanL-Reg.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'nimbus-sans';
  src: url('/wp-content/themes/divi-child/assets/fonts/NimbusSanL-Reg.woff2') format('woff2'),
       url('/wp-content/uploads/fonts/NimbusSanL-Reg.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nimbus Sans';
  src: url('/wp-content/themes/divi-child/assets/fonts/NimbusSanL-Bol.woff2') format('woff2'),
       url('/wp-content/uploads/fonts/NimbusSanL-Bol.otf') format('opentype');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'nimbus-sans';
  src: url('/wp-content/themes/divi-child/assets/fonts/NimbusSanL-Bol.woff2') format('woff2'),
       url('/wp-content/uploads/fonts/NimbusSanL-Bol.otf') format('opentype');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nimbus Sans';
  src: url('/wp-content/themes/divi-child/assets/fonts/NimbusSanL-RegIta.woff2') format('woff2'),
       url('/wp-content/uploads/fonts/NimbusSanL-RegIta.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'nimbus-sans';
  src: url('/wp-content/themes/divi-child/assets/fonts/NimbusSanL-RegIta.woff2') format('woff2'),
       url('/wp-content/uploads/fonts/NimbusSanL-RegIta.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Nimbus Sans';
  src: url('/wp-content/themes/divi-child/assets/fonts/NimbusSanL-BolIta.woff2') format('woff2'),
       url('/wp-content/uploads/fonts/NimbusSanL-BolIta.otf') format('opentype');
  font-weight: 700 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'nimbus-sans';
  src: url('/wp-content/themes/divi-child/assets/fonts/NimbusSanL-BolIta.woff2') format('woff2'),
       url('/wp-content/uploads/fonts/NimbusSanL-BolIta.otf') format('opentype');
  font-weight: 700 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --font: 'Nimbus Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body {
  font-family: 'Nimbus Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}


/* =========================================
   RESET + ROOT VARIABLES
========================================= */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{--navy:#232c39;--navy-deep:#2d3a4a;--red:#c72b35;--red-dark:#a5222b;--gray:#f5f5f5;--gray-mid:#e0e0e0;--white:#ffffff;--text-body:#3d4a56;--text-muted:#6b7a8a;--header-h:76px;--section-pad:clamp(72px,9vw,120px);--page-gutter:clamp(32px,5vw,80px);--hero-gap-top:clamp(39px,calc(2vw + 25px),51px);/* breadcrumb-to-h1 gap, matched to /lawyers/ (the standard) *//* the site gutter: same value as .atac-header-inner and .atac-crumb-inner, so the logo, breadcrumb and every section share one left edge */--radius:5px;
  /* Shared card corner accent: soft 10px top-left, deep 56px sweep
     bottom-right, square on the other diagonal. One token so lawyer cards,
     matter cards and case images can't drift. */
  --card-corners:10px 0 56px 0;
  /* The soft off-white panel ground. Originally the "Our Lawyers" showcase
     band, which is plain white now — the Legal Insights lead card is the one
     surface still using it, and the token keeps that value in one place. */
  --panel-ground:linear-gradient(135deg,#f6f7f6 0%,#edf1ee 100%);--h1-size:clamp(34px,4.6vw,55px);--font:'nimbus-sans','Nimbus Sans','nimbus-sans-condensed','Helvetica Neue',Helvetica,Arial,sans-serif !important;}

html{scroll-behavior:smooth;}
body{font-family:'nimbus-sans','Helvetica Neue',Helvetica,Arial,sans-serif;color:var(--text-body);line-height:1.65;background:var(--white);-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;display:block;}
a{text-decoration:none;}
/* GLOBAL TEXT LINKS — the one link style for page content on every template: brand red
   text, red underline, darker red on hover. Do not re-declare it per section or per link.
   Scope = page content: Divi pages (#main-content) and each custom template's top-level
   block under #et-main-area (case / insight / lawyer articles, .cr-page archives); the
   footer and the breadcrumb bar are excluded. Links carrying a class of their own
   (.atac-link-cta, buttons, cards, TOC...) keep their own styling.
   Weight 0,0,2 on purpose ("html" + "a"; the :where() parts count zero): it beats only
   Divi's default a{color:#2ea3f2}, whatever the load order, and yields to every
   class-based link rule. Replaces the per-area copies that used to sit in atac-post.css
   (.atac-post-content a), atac-lawyer.css (.exp-main a) and atac-cookie-consent.css. */
html :where(#main-content, #et-main-area > :not(footer, .atac-crumb-bar)) a:where(:not([class])){
  color:var(--red); text-decoration:underline; text-underline-offset:3px; transition:color .2s;
}
html :where(#main-content, #et-main-area > :not(footer, .atac-crumb-bar)) a:where(:not([class]):hover){color:var(--red-dark);}

h1,h3,h4{
  font-family: var(--font);
  font-weight: 700;
  line-height:1.1;
  letter-spacing:-1px;
}

.form-card h3,
.expertise-title,
.expertise-subname {
  font-family: 'Nimbus Sans', 'nimbus-sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-weight: 800 !important;
}

/* H2 GLOBAL FIX */
h2,
.site-header ~ * h2,
section h2,
.hero-content h2,
.pain h2,
.benefits h2,
.lawyers h2,
.why-owners h2,
.reviews h2,
.insights h2,
.faq h2,
.final-cta h2,
.expertise h2 {
  font-family: 'Nimbus Sans', 'nimbus-sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: clamp(26px, 3vw, 44px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.1 !important;
}


/* =========================================
   PHONE BUTTON
========================================= */

.phone-btn {
  background: #c72b35 !important;
  padding: 14px 34px !important;
  line-height: 1 !important;
}

.phone-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  color: #ffffff !important;
}

.phone-btn:active {
  transform: translateY(0);
}

@media (max-width: 768px) {
  .phone-btn {
    width: 100%;
  }
}


/* =========================================
   CONTACT BUTTONS
========================================= */

.contact-buttons {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 28px;
}

.hero .contact-buttons {
  justify-content: flex-start;
}

.faq .contact-buttons {
  justify-content: center;
  width: 100%;
}


/* =========================================
   WECHAT + WHATSAPP BUTTONS
========================================= */

.wechat-btn,
.whatsapp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 6px;
  text-decoration: none;
  color: #ffffff !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  border: none !important;
  outline: none !important;
  appearance: none;
  -webkit-appearance: none;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    filter .2s ease;
}

.wechat-btn {
  background: #07c160 !important;
}

.whatsapp-btn {
  background: #25d366 !important;
}

.wechat-btn:hover,
.whatsapp-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  color: #ffffff !important;
}

.wechat-btn:active,
.whatsapp-btn:active {
  transform: translateY(0);
}

.wechat-btn svg,
.whatsapp-btn svg {
  width: 20px;
  height: 20px;
  fill: #ffffff;
  flex-shrink: 0;
}


/* =========================================
   WECHAT MODAL
========================================= */

.wechat-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 99999;
  align-items: center;
  justify-content: center;
}

.wechat-modal.active {
  display: flex;
}

.wechat-box {
  position: relative;
  background: #ffffff;
  border-radius: 14px;
  padding: 40px;
  box-shadow:
    0 32px 80px rgba(0,0,0,.35),
    0 8px 24px rgba(0,0,0,.18);
}

.wechat-close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: #c72b35 !important;
  color: #ffffff !important;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wechat-qr {
  width: 220px;
  height: 220px;
  object-fit: contain;
  display: block;
}

@media (max-width: 768px) {
  .contact-buttons {
    flex-wrap: wrap;
    gap: 16px;
  }

  .wechat-btn,
  .whatsapp-btn {
    width: 100%;
  }

  .hero .contact-buttons {
    justify-content: flex-start;
  }

  .faq .contact-buttons {
    justify-content: center;
  }
}


/* =========================================
   LEGAL FORM (elementor-129131)
========================================= */

/* Form inputs */
.elementor-129131 .elementor-field-textual,
.elementor-129131 input.elementor-field,
.elementor-129131 textarea.elementor-field {
  width: 100% !important;
  background: #ffffff !important;
  border: 1.5px solid #c8d0d8 !important;
  border-radius: 5px !important;
  color: #232c39 !important;
  font-family: 'nimbus-sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  padding: 12px 16px !important;
  box-shadow: none !important;
  outline: none !important;
  margin-bottom: 6px !important;
}

.elementor-129131 .elementor-field-group {
  margin-bottom: 6px !important;
  padding-bottom: 0 !important;
}

/* Input focus */
.elementor-129131 .elementor-field-textual:focus,
.elementor-129131 input.elementor-field:focus,
.elementor-129131 textarea.elementor-field:focus {
  border-color: #c72b35 !important;
  box-shadow: 0 0 0 3px rgba(199,43,53,0.10) !important;
}

/* Placeholder */
.elementor-129131 input::placeholder,
.elementor-129131 textarea::placeholder {
  color: #7f8b99 !important;
  opacity: 1 !important;
}

/* Submit button */
.elementor-129131 .elementor-button,
.elementor-129131 button.elementor-button {
  width: 100% !important;
  background: #c72b35 !important;
  background-color: #c72b35 !important;
  border: none !important;
  border-radius: 5px !important;
  color: #ffffff !important;
  font-family: 'nimbus-sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: capitalize !important;   /* site button standard */
  padding: 14px 18px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background .25s ease !important;
}

.elementor-129131 .elementor-button:hover,
.elementor-129131 button.elementor-button:hover {
  background: #a5222b !important;
  background-color: #a5222b !important;
}

.elementor-129131 .elementor-button-text {
  color: #ffffff !important;
  font-family: 'nimbus-sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

/* Remove number input spinners */
.elementor-129131 input[type="number"]::-webkit-outer-spin-button,
.elementor-129131 input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
.elementor-129131 input[type="number"] {
  -moz-appearance: textfield !important;
}

/* Two-column field rows */
.elementor-129131 .lf-two-col {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  width: 100% !important;
  margin-bottom: 0 !important;
}
.elementor-129131 .lf-two-col .elementor-field-group {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
}
.elementor-129131 .lf-two-col .elementor-field-textual {
  width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 560px) {
  .elementor-129131 .lf-two-col {
    flex-direction: column !important;
    gap: 0 !important;
  }
}

/* Submit row */
.elementor-129131 .lf-turnstile-row {
  display: block !important;
  margin-top: 6px;
}
.elementor-129131 .lf-turnstile-row .elementor-field-group {
  margin-bottom: 0 !important;
  width: 100% !important;
}

/* Success message */
.elementor-129131 #lf-success {
  display: none;
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #166534;
  border-radius: 5px;
  padding: 12px 16px;
  margin-top: 12px;
  font-size: 14px;
}

/* Honeypot */
.lf-honeypot {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
  z-index: -1;
  overflow: hidden;
}

/* Form micro text */
.form-micro {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  font-weight: 400;
  margin-top: 16px;
}

.form-micro svg{width:14px;height:14px;fill:var(--red);flex-shrink:0;margin-top:1px;}


/* =========================================
   HEADER
========================================= */

.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--header-h);background:linear-gradient(135deg,#2d3a4a 0%,var(--navy) 100%);border-bottom:1px solid rgba(255,255,255,0.06);transition:transform .4s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 32px rgba(0,0,0,0.35);}
.site-header.hidden{transform:translateY(-100%);}
.site-header::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--red) 0%,rgba(199,43,53,0.3) 60%,transparent 100%);}
.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 var(--page-gutter);margin:0 auto;}
.header-logo img{height:38px;width:auto;display:block;}
.header-center{display:flex;align-items:center;gap:32px;}
.header-right{display:flex;align-items:center;gap:20px;}
.header-questions{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,0.45);font-size:13px;}
.header-questions::before{content:'';width:6px;height:6px;border-radius:50%;background:#22c55e;flex-shrink:0;animation:pulse 2s infinite;}

@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.6;transform:scale(1.3);}}

.phone-cta{display:inline-flex;align-items:center;gap:9px;padding:10px 22px;background:var(--red);color:var(--white);font-family:var(--font);font-size:14px;font-weight:600;border-radius:var(--radius);border:none;cursor:pointer;box-shadow:0 4px 18px rgba(199,43,53,0.35);transition:background .25s,transform .2s;}
.phone-cta:hover{background:var(--red-dark);transform:translateY(-1px);}
.phone-cta svg{width:16px;height:16px;fill:var(--white);flex-shrink:0;}

/* Wide screen header fix */
.header-inner{margin:0 auto;}

@media (min-width: 1400px) {
  .header-nav-link{font-size:clamp(16px,1.1vw,22px) !important;}
  .phone-cta{font-size:clamp(15px,1vw,18px) !important;padding:12px 28px !important;}
  .header-logo img{height:clamp(38px,3vw,52px) !important;}
}

@media (min-width: 1800px) {
  .header-nav-link{font-size:20px !important;}
  .phone-cta{font-size:17px !important;padding:14px 32px !important;}
  .header-logo img{height:48px !important;}
}


/* =========================================
   NAV UNDERLINE ANIMATION
========================================= */

.header-nav-link {
  position: relative !important;
  padding: 4px 8px 6px !important;
  font-size: clamp(16px, 1.1vw, 24px) !important;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 0.3px;
  transition: color .2s;
  cursor: pointer;
}

.header-nav-link:hover {
  color: rgba(255,255,255,0.55) !important;
}

.header-nav-link::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: -6px;
  width: calc(100% + 12px);
  height: 2px;
  background: #c72b35;
  border-radius: 5px;
}

.header-nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: -6px;
  width: calc(100% + 12px);
  height: 0%;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  transition:
    height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.header-nav-link:hover::after,
.header-nav-link.active-nav::after {
  height: calc(100% + 8px);
  border-color: #c72b35;
  background: #c72b35;
}


/* =========================================
   ANIMATED LINES
========================================= */

.anim-line{display:block;height:1px;width:100%;position:relative;overflow:hidden;}
.anim-line::after{content:'';position:absolute;top:0;left:0;height:1px;transition:width 1.4s cubic-bezier(.4,0,.2,1);width:0%;}
.anim-line.light::after{background:linear-gradient(90deg,var(--red) 0%,rgba(199,43,53,0.15) 100%);}
.anim-line.dark::after{background:linear-gradient(90deg,rgba(199,43,53,0.8) 0%,rgba(199,43,53,0.08) 100%);}
.anim-line.line-drawn::after{width:100%;}
.anim-line.line-retracted::after{width:0%;}
.benefit-item-line{display:block;height:2px;width:0%;background:var(--red);border-radius:2px;margin-bottom:14px;transition:width 0.9s cubic-bezier(.4,0,.2,1);}
.benefit-item.line-drawn .benefit-item-line{width:32px;}


/* =========================================
   HERO
========================================= */

.hero{position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center;background:var(--gray);padding-top:var(--header-h);}
.hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(35,44,57,0.09) 1px,transparent 1px);background-size:28px 28px;pointer-events:none;z-index:0;}
.hero-bg-img{position:absolute;right:0;top:0;bottom:0;width:48%;background:url('https://ataclaw.ca/wp-content/uploads/2026/04/construction-law-firm-lawyer.webp') center/cover no-repeat;z-index:1;transform:scaleX(-1);}
.hero-bg-img::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--gray) 0%,rgba(245,245,245,0.95) 25%,rgba(245,245,245,0.6) 45%,rgba(245,245,245,0) 100%);z-index:2;transform:scaleX(-1);}
.hero-bg-img::after{content:'';position:absolute;inset:0;background:rgba(35,44,57,0.38);z-index:1;}
.hero-inner{width:100%;padding:60px 52px 70px;display:grid;grid-template-columns:1fr 440px;gap:56px;align-items:start;position:relative;z-index:2;}

.chinese-landing-hero .hero-bg-img {
  background: url('https://ataclaw.ca/wp-content/uploads/2026/04/Asia-Pacific_with-Shuni_Dec182025_ATACLaw_0263-scaled-1.webp') center/cover no-repeat !important;
}

/* Nimbus Sans H1 fix */
.hero-content h1,
.hero-content h1 *,
.hero-content .h1-accent,
span.h1-accent {
  font-family: 'Nimbus Sans', 'nimbus-sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-weight: 800 !important;
}
span.h1-accent{color:#c72b35 !important;}

.hero-sub{font-size:clamp(15px,1.15vw,20px);color:var(--text-body);line-height:1.75;max-width:900px;font-weight:400;margin-top:24px;}


/* =========================================
   FORM CARD
========================================= */

.form-card{background:var(--white);border-radius:var(--radius);box-shadow:0 12px 48px rgba(35,44,57,0.14),0 0 0 1px rgba(35,44,57,0.07);overflow:hidden;}
.form-card-top{border-top:3px solid var(--red);padding:28px 32px 0;}
.form-eyebrow-label{display:inline-block;font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--red);margin-bottom:8px;}
.form-card h3{font-size:clamp(20px,1.8vw,26px);font-weight:800;color:var(--navy);line-height:1.1;margin-bottom:0;}
.form-card-body{padding:22px 32px 28px;}


/* =========================================
   STATS
========================================= */

.stats-section{background:var(--navy-deep);padding:0;overflow:hidden;}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,0.06);}
.stat-cell{border-right:1px solid rgba(255,255,255,0.06);padding:clamp(44px,5vw,80px) clamp(28px,3vw,52px);position:relative;}
.stat-cell:last-child{border-right:none;}
.stat-num{font-size:clamp(40px,4.8vw,74px);color:var(--white);line-height:1;margin-bottom:20px;display:block;letter-spacing:-2px;font-family:'Nimbus Sans','nimbus-sans','Helvetica Neue',Helvetica,Arial,sans-serif !important;font-weight:800 !important;}
.stat-label{font-size:clamp(13px,1vw,15px);color:rgba(255,255,255,0.5);font-weight:400;line-height:1.5;font-family:var(--font);}

/* Stats font force fix */
.stats-section,
.stats-section *,
.stats-grid,
.stats-grid *,
.stat-cell,
.stat-cell *,
.stat-num,
.stat-num *,
.stat-num .counter {
  font-family: 'Nimbus Sans', 'nimbus-sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-weight: 800 !important;
}
.stat-label{font-weight:400 !important;}

/* Stats background image */
.stats-section{position:relative;overflow:hidden;}
.stats-section::before{content:'';position:absolute;bottom:0;right:0;width:70%;height:55%;background:url('https://ataclaw.ca/wp-content/uploads/2026/04/law-firm.png') center/cover no-repeat;z-index:0;opacity:0.35;transform:scaleX(-1);}
.stats-section::after{content:'';position:absolute;bottom:0;right:0;width:70%;height:55%;z-index:1;background:linear-gradient(to right,#2d3a4a 0%,#2d3a4a 5%,transparent 40%),linear-gradient(to bottom,#2d3a4a 0%,#2d3a4a 5%,transparent 40%);}
.stats-grid{position:relative;z-index:2;}


/* =========================================
   PAIN + IMAGE
========================================= */

.pain{padding:var(--section-pad) 0;background:var(--white);}
.pain-inner{padding:0 var(--page-gutter);display:grid;grid-template-columns:1fr 480px;gap:64px;align-items:center;}
.pain h2{font-size:clamp(28px,3vw,48px);font-weight:800;margin-bottom:20px;line-height:1.08;letter-spacing:-0.8px;}
.pain-rule{width:48px;height:3px;background:var(--red);margin-bottom:32px;border-radius:2px;}
.pain-body p{font-size:16px;line-height:1.85;color:var(--text-body);margin-bottom:20px;font-weight:400;}
.pain-body p:last-child{font-weight:700;color:var(--navy);font-size:17px;margin-bottom:0;}
.pain-image-wrap{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 24px 64px rgba(35,44,57,0.18);}
.pain-image-wrap img{width:100%;height:520px;object-fit:cover;object-position:center top;display:block;}
.pain-image-wrap::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(22,29,40,0.5) 100%);}
.pain-image-badge{position:absolute;bottom:24px;left:24px;right:24px;z-index:2;background:rgba(45,58,74,0.85);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:16px 20px;display:flex;align-items:center;gap:16px;}
.pain-image-badge-num{font-size:32px;font-weight:800;color:var(--red);line-height:1;letter-spacing:-1px;flex-shrink:0;}
.pain-image-badge-text{font-size:13px;color:rgba(255,255,255,0.8);line-height:1.5;font-weight:400;}
.pain-image-badge-text strong{color:var(--white);font-weight:700;display:block;font-size:14px;margin-bottom:2px;}


/* =========================================
   BENEFITS
========================================= */

.benefits{padding:var(--section-pad) 0;background:var(--white);position:relative;z-index:3;}
.benefits-inner{padding:0 var(--page-gutter);}
.benefits h2{font-size:clamp(24px,2.8vw,40px);font-weight:800;margin-bottom:14px;letter-spacing:-0.5px;}
.benefits-head-line{margin-bottom:52px;}
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--gray-mid);border-radius:var(--radius);overflow:hidden;box-shadow:0 4px 24px rgba(35,44,57,0.08);}
.benefit-item{background:var(--white);padding:32px 28px;transition:background .25s;}
.benefit-item:hover{background:#fafafa;}
.benefit-num{font-size:12px;font-weight:700;color:var(--red);letter-spacing:1px;margin-bottom:12px;}
.benefit-item h4{font-size:17px;font-weight:700;color:var(--navy);margin-bottom:10px;line-height:1.3;}
.benefit-item p{font-size:14.5px;line-height:1.75;color:var(--text-body);font-weight:400;}


/* =========================================
   EXPERTISE
========================================= */

.expertise{padding:clamp(40px,5vw,72px) 0;background:var(--white);}
.expertise-inner{padding:0 var(--page-gutter);}
.expertise-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0;gap:24px;}
.expertise-header h2{font-size:clamp(26px,3vw,44px);font-weight:800;color:var(--navy);letter-spacing:-0.5px;line-height:1.1;flex:1;}
.expertise-head-line{margin-bottom:20px;margin-top:10px;}
.expertise-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 40px;}
.expertise-col{display:flex;flex-direction:column;gap:10px;}
.expertise-group{border-bottom:1px solid var(--gray-mid);padding-bottom:10px;}
.expertise-trigger{width:100%;background:none;border:none;padding:0;display:flex;align-items:center;justify-content:space-between;gap:18px;cursor:pointer;text-align:left;font-family:var(--font);}
.expertise-title{font-size:clamp(17px,1.6vw,22px);font-weight:800;color:var(--navy);line-height:1.3;}
.expertise-toggle{width:34px;height:34px;border-radius:50%;border:1px solid rgba(199,43,53,0.18);background:rgba(199,43,53,0.08);color:var(--red);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .25s,border-color .25s,color .25s,transform .25s;}
.expertise-toggle svg{width:16px;height:16px;fill:currentColor;transition:transform .3s ease;}
.expertise-group.open .expertise-toggle{background:var(--red);border-color:var(--red);color:var(--white);}
.expertise-group.open .expertise-toggle svg{transform:rotate(180deg);}
.expertise-content{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1),padding-top .3s ease;}
.expertise-group.open .expertise-content{padding-top:16px;}
.expertise-subtopics{display:flex;flex-direction:column;gap:10px;padding-left:20px;border-left:2px solid rgba(199,43,53,0.18);}
.expertise-subitem{background:var(--white);border:1px solid var(--gray-mid);border-radius:var(--radius);overflow:hidden;}
.expertise-subtrigger{width:100%;background:none;border:none;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;text-align:left;font-family:var(--font);}
.expertise-subname{font-size:clamp(14px,1.2vw,17px);font-weight:700;color:var(--navy);line-height:1.35;}
.expertise-subtoggle{width:28px;height:28px;border-radius:50%;background:var(--white);border:1px solid rgba(35,44,57,0.08);display:flex;align-items:center;justify-content:center;color:var(--navy);flex-shrink:0;transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease;}
.expertise-subtoggle svg{width:14px;height:14px;fill:currentColor;transition:transform .25s ease;}
.expertise-subitem.open .expertise-subtoggle{background:var(--navy);color:var(--white);border-color:var(--navy);}
.expertise-subitem.open .expertise-subtoggle svg{transform:rotate(180deg);}
.expertise-subcontent{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1);}
.expertise-subbody{padding:0 16px 16px;font-size:clamp(13px,1vw,15px);line-height:1.75;color:var(--text-body);}

.expertise-actions{display:none;}
.expertise-toggle-all{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;background:var(--navy);color:var(--white);border:1px solid var(--navy);border-radius:var(--radius);font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;transition:background .25s,border-color .25s,color .25s,transform .2s;flex-shrink:0;margin-left:auto;}
.expertise-toggle-all:hover{background:var(--red);border-color:var(--red);color:var(--white);transform:translateY(-1px);}


/* =========================================
   LAWYERS CAROUSEL
========================================= */

.lawyers{padding:var(--section-pad) 0;background:var(--white);overflow:hidden;}
.lawyers-header{padding:0 var(--page-gutter);display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;}
.lawyers-header-left h2{font-size:clamp(26px,3vw,44px);font-weight:800;color:var(--navy);letter-spacing:-0.5px;line-height:1.1;}
.lawyers-head-line{padding:0 var(--page-gutter);margin-bottom:40px;}
.lawyers-track-wrap{position:relative;overflow:hidden;padding:0 var(--page-gutter);}
.lawyers-nav{position:absolute;top:50%;left:52px;right:52px;transform:translateY(-50%);z-index:20;display:flex;align-items:center;justify-content:space-between;pointer-events:none;}
.lawyer-arrow{width:56px;height:56px;border-radius:50%;border:none;background:var(--red);color:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s,transform .2s;flex-shrink:0;pointer-events:auto;box-shadow:0 8px 24px rgba(35,44,57,0.18);}
.lawyer-arrow:hover{background:var(--red-dark);transform:scale(1.08);}
.lawyer-arrow svg{width:22px;height:22px;fill:currentColor;}
.lawyers-track{display:flex;gap:20px;transition:transform .5s cubic-bezier(.4,0,.2,1);}
.lawyer-card{flex-shrink:0;width:calc((100vw - 104px - 60px) / 4);min-width:200px;position:relative;border-radius:5px;overflow:hidden;background:var(--navy);cursor:default;box-shadow:none;}
.lawyer-card img{width:100%;aspect-ratio:.72;object-fit:cover;object-position:top center;display:block;transition:transform .5s ease;filter:grayscale(15%);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%);}
.lawyer-card:hover img{transform:scale(1.04);}

/* Lawyer card font fix */
.lawyer-name,.lawyer-title,.lawyer-exp,.lawyer-bio-title,.lawyer-bio p,.lawyer-overlay,.lawyer-overlay *,.lawyer-bio,.lawyer-bio *{font-family:'Nimbus Sans','nimbus-sans','Helvetica Neue',Helvetica,Arial,sans-serif !important;}

.lawyer-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,rgba(45,58,74,0.97) 0%,rgba(45,58,74,0.85) 50%,transparent 100%);padding:32px 18px 18px;}
.lawyer-name{font-size:clamp(16px,1.4vw,20px);font-weight:700;color:var(--white);margin-bottom:3px;line-height:1.2;}
.lawyer-suffix{font-size:clamp(12.5px,1vw,16px);color:var(--red);font-weight:700 !important;letter-spacing:.3px;line-height:1.2;margin-bottom:2px;}
.lawyer-title{font-size:clamp(12.5px,1vw,16px);color:var(--red);font-weight:600 !important;letter-spacing:.3px;margin-bottom:4px;}
.lawyer-exp{font-size:11px;color:rgba(255,255,255,0.45);font-weight:400;}
.lawyer-bio{position:absolute;inset:0;font-weight:600 !important;padding:24px 20px;display:flex;flex-direction:column;justify-content:flex-end;opacity:0;transition:opacity .35s;pointer-events:none;background:linear-gradient(to top,rgba(22,29,40,0.98) 0%,rgba(22,29,40,0.85) 40%,rgba(22,29,40,0.2) 75%,rgba(22,29,40,0) 100%) !important;}
.lawyer-card:hover .lawyer-bio{opacity:1;}
/* The hover panel's gradient is translucent above ~40% of the card, so the
   always-painted .lawyer-overlay underneath shows through it as ghost text.
   It only became visible on cards whose name+suffix wraps past one line
   ("Mike C. Stewart, P.Eng, J.D., Q.Arb, Q.Med"), which pushes the panel's
   own text up and off the overlay it used to cover. Fade the overlay out
   with the panel so only one copy of the name is ever painted. */
.lawyer-overlay{transition:opacity .35s;}
/* The overlay is a caption, never a target: it holds no links, and it sits
   ABOVE the photo anchor, so while it was hit-testable it swallowed every
   click on the bottom half of the card — including the ones aimed at the
   hover panel's CTA. Faded to opacity:0 on hover it was still eating them,
   invisibly. */
.lawyer-overlay{pointer-events:none;}
.lawyer-card:hover .lawyer-overlay,
.lawyer-card:focus-within .lawyer-overlay{opacity:0;}
/* .lawyer-bio-name removed — the hover panel shows only the CTA */
.lawyer-bio-title{font-size:clamp(11.5px,1vw,15px);color:var(--red);font-weight:600;letter-spacing:.3px;margin-bottom:3px;}
.lawyer-bio-exp{font-size:11px;color:rgba(255,255,255,0.45);margin-bottom:12px;}
.lawyer-bio p{font-size:clamp(13px,1.1vw,16px);line-height:1.7;color:rgba(255,255,255,0.75);font-weight:300 !important;}
/* The hover CTA is the site text-link component (.atac-link-cta.on-dark);
   only its placement in the panel is local — flush left, above the edge. */
.lawyer-learn-more{margin-top:18px;align-self:flex-start;}
/* …and it has to be clickable. The panel around it keeps pointer-events:none
   (so the photo link underneath still makes the whole card clickable), which
   pointer-events INHERITS down onto the CTA — that is why "View X's bio" did
   nothing on desktop while the mobile rule below, which flips the whole panel
   to auto, worked fine. Opt the CTA back in, but only while the panel is
   actually revealed: an invisible link must never be clickable.
   :focus-within covers the keyboard path, which reveals the panel the same
   way hover does. */
.lawyer-card:hover .lawyer-learn-more,
.lawyer-card:focus-within .lawyer-learn-more{pointer-events:auto;}


/* =========================================
   LAWYERS — SPLIT LAYOUT (intro text left, carousel right)
   Rendered server-side by atac_render_lawyers() via
   <div data-atac-lawyers></div>. The base .lawyers rules above still
   apply; these override layout only when .lawyers--split is present.
========================================= */

.lawyers--split{padding-left:var(--page-gutter);padding-right:var(--page-gutter);}
.lawyers-split{display:grid;grid-template-columns:minmax(300px,38%) minmax(0,1fr);gap:56px;align-items:center;}
.lawyers-intro h2{font-size:clamp(24px,2.4vw,38px);font-weight:800;color:var(--navy);letter-spacing:-0.5px;line-height:1.18;margin-bottom:22px;}
/* Section intro copy — the lawyers intro and every About section lede read as
   the same voice, so the type comes from one declaration. .about-refer sits
   on navy and re-declares only its colour below. */
.lawyers-intro p,
.about-values-left p,
.about-mission-right p,
.about-accred-left p,
.about-purpose-list li,
.about-refer p{font-size:clamp(14px,1.05vw,16.5px);line-height:1.8;color:var(--text-body);margin-bottom:16px;}
.lawyers-intro .atac-red-btn{margin-top:8px;}
.lawyers--split .lawyers-track-wrap{padding:0;min-width:0;}
.lawyers--split .lawyers-nav{left:12px;right:12px;}
/* 2 cards visible inside the right column (one 20px gap) */
.lawyers--split .lawyer-card{width:calc((100% - 20px) / 2);min-width:0;}

@media (max-width: 1024px){
  .lawyers--split{padding-left:32px;padding-right:32px;}
  .lawyers-split{grid-template-columns:1fr;gap:36px;}
}

@media (max-width: 640px){
  .lawyers--split{padding-left:20px;padding-right:20px;}
  .lawyers--split .lawyer-card{width:100%;}
  .lawyers--split .lawyers-nav{left:8px;right:8px;}
}


/* =========================================
   LAWYERS — SHOWCASE (home page)
   Adds the tall-portrait "travel card" look on top of .lawyers--split:
   soft gradient background, pill CTA, 3 rounded cards with the name +
   role pinned to the bottom of the photo. Markup is unchanged, so the
   same rules style both JS-injected and server-rendered cards.
========================================= */

/* horizontal gutters match .insights-inner (52 / 32 / 20) */
/* Plain white — the soft gradient band this variant used to carry was
   removed on request. Stated rather than deleted so it does not silently
   depend on whatever .lawyers sets. */
.lawyers--showcase{background:var(--white);padding-left:var(--page-gutter) !important;padding-right:var(--page-gutter) !important;}
.lawyers--showcase .lawyers-intro h2{font-size:clamp(28px,3vw,46px);letter-spacing:-1px;line-height:1.1;margin-bottom:26px;}
.lawyers--showcase .lawyers-intro p{max-width:48ch;}
/* CTA inherits plain .atac-red-btn — same look as the About button */

/* 3 tall cards visible inside the right column (two 20px gaps) */
.lawyers--showcase .lawyer-card{width:calc((100% - 40px) / 3);box-shadow:none;}
.lawyers--showcase .lawyer-card img{aspect-ratio:.62;filter:none;-webkit-mask-image:none;mask-image:none;}
.lawyers--showcase .lawyer-overlay{padding:110px 22px 24px;background:linear-gradient(0deg,rgba(14,20,29,0.88) 0%,rgba(14,20,29,0.45) 55%,transparent 100%);}
.lawyers--showcase .lawyer-name{font-size:clamp(19px,1.6vw,26px);font-weight:800;letter-spacing:-0.3px;margin-bottom:6px;}
.lawyers--showcase .lawyer-bio-title{display:none !important;}
/* Compact hover panel = name only: drop the credential suffix that the
   always-on overlay already shows. */
.lawyers--showcase .lawyer-bio-suffix{display:none;}
/* showcase card front: suffix (red) + title (white) under the name */
.lawyers--showcase .lawyer-suffix{display:block;font-size:clamp(13px,1.05vw,17px);font-weight:700 !important;color:var(--red);letter-spacing:.2px;margin-bottom:3px;}
.lawyers--showcase .lawyer-title{display:block !important;font-size:clamp(13px,1.05vw,17px);font-weight:500 !important;color:var(--white) !important;letter-spacing:.2px;margin-bottom:0;}
/* showcase hover panel keeps name/role + Learn More but drops the
   description text (landing pages keep the full panel) */
.lawyers--showcase .lawyer-bio p{display:none;}

@media (max-width: 1200px){
  .lawyers--showcase .lawyer-card{width:calc((100% - 20px) / 2);}
}
@media (max-width: 1100px){
  .lawyers--showcase{padding-left:32px !important;padding-right:32px !important;}
}
@media (max-width: 640px){
  .lawyers--showcase{padding-left:20px !important;padding-right:20px !important;}
  /* keep 2 cards visible on phones (one 20px gap) */
  .lawyers--showcase .lawyer-card{width:calc((100% - 20px) / 2);}
  .lawyers--showcase .lawyer-card img{aspect-ratio:.72;}
  /* 2-up cards are short; move the nav arrows BELOW the cards into added
     bottom padding so they never overlap the always-visible name / Learn-More.
     The nav stays inside the wrap's padding box, so overflow:hidden won't clip it. */
  .lawyers--showcase .lawyers-track-wrap{padding-bottom:56px;}
  .lawyers--showcase .lawyers-nav{top:auto;bottom:0;transform:none;left:0;right:0;justify-content:center;gap:22px;}
  .lawyers--showcase .lawyer-arrow{width:42px;height:42px;}
  .lawyers--showcase .lawyer-arrow svg{width:19px;height:19px;}
  /* mobile keeps .lawyer-bio always visible, so drop the base overlay
     to avoid the name rendering twice */
  .lawyers--showcase .lawyer-overlay{display:none;}
}


/* =========================================
   LAWYERS — INTRO CARDS (zh / ko pages only)
   atac_lawyer_intro_card() in snippets/atac-dynamic-sections.php renders
   these instead of the hover-panel cards on translated pages: intro under
   the photo, the whole card one link. Two per view on the home page only
   (.lawyers--split); expertise pages keep the English card size. Keyed on
   .lawyer-card--intro alone, so English cards are untouched and the
   Divi-authored home section needs no extra class.
========================================= */
/* Card shell for every layout. Width + photo ratio come from the section:
   .lawyers--split (home) = 2 per view, 4:5 photo; .lawyers--fullwidth
   (expertise pages) = the English practice-page card, 23vw at a .62 ratio. */
.lawyers .lawyers-track .lawyer-card.lawyer-card--intro{min-width:0;display:flex;flex-direction:column;background:transparent;border-radius:0;overflow:visible;cursor:pointer;text-decoration:none !important;color:inherit;}
.lawyer-card--intro .lawyer-card-photo{display:block;position:relative;overflow:hidden;border-radius:5px;background:var(--navy);}
.lawyers .lawyer-card--intro img{filter:none;-webkit-mask-image:none;mask-image:none;}
.lawyers--split .lawyers-track .lawyer-card.lawyer-card--intro{width:calc((100% - 20px) / 2);}
.lawyers--split .lawyer-card--intro img{aspect-ratio:4/5;}
.lawyers--fullwidth .lawyer-card--intro img{aspect-ratio:.62;}
/* name / credentials / title on the photo: the page's own English overlay
   rules (.lawyer-overlay, or the .lawyers--showcase version on the home
   page) style it. Unlike English there is no hover panel to swap in, so the
   overlay stays visible on hover and on phones. */
.lawyers .lawyer-card--intro .lawyer-overlay{display:block;opacity:1;}
.lawyers .lawyer-card--intro .lawyer-overlay > span{display:block;}
.lawyer-card--intro .lawyer-card-body{display:flex;flex-direction:column;flex:1;padding:20px 2px 0;}
.lawyer-card--intro .lawyer-intro{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 20px;font-size:15px;line-height:1.75;color:var(--text-body);}
.lawyer-card--intro .lawyer-learn-more{margin-top:auto;pointer-events:none;}
/* the card is the link, so hovering anywhere on it plays the CTA's hover */
.lawyer-card--intro:hover .atac-link-cta{color:var(--red) !important;}
.lawyer-card--intro:hover .atac-link-cta::after{transform:scaleX(.8);}
.lawyer-card--intro:hover .atac-link-cta::before{transform:translateX(4px);}
.lawyer-card--intro:focus-visible{outline:2px solid var(--red);outline-offset:4px;}
/* arrows sit on the middle of the PHOTO, not of the photo + text block */
@media (min-width: 641px){
  .lawyers--split .lawyers-track-wrap:has(.lawyer-card--intro){container-type:inline-size;}
  .lawyers--split .lawyers-track-wrap:has(.lawyer-card--intro) .lawyers-nav{top:calc((100cqw - 20px) / 2 * 1.25 / 2);}
  /* 8px = the fullwidth wrap's top padding; card width as .lawyers--fullwidth .lawyer-card */
  .lawyers--fullwidth .lawyers-track-wrap:has(.lawyer-card--intro) .lawyers-nav{top:calc(8px + clamp(260px,23vw,340px) / .62 / 2);}
}
/* phones: one card per view — two would squeeze the intro to a few characters a line */
@media (max-width: 640px){
  .lawyers--split .lawyers-track .lawyer-card.lawyer-card--intro{width:100%;}
  .lawyers--split .lawyer-card--intro img{aspect-ratio:1/1;}
  .lawyers--fullwidth .lawyers-track-wrap:has(.lawyer-card--intro) .lawyers-nav{top:calc(8px + 82vw / .62 / 2);}
}


/* =========================================
   LAWYER MODAL
========================================= */

.lawyer-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:32px;z-index:2000;background:rgba(45,58,74,0.74);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .3s ease;}
.lawyer-modal.open{opacity:1;pointer-events:auto;}
.body-modal-open{overflow:hidden;}
.lawyer-modal-dialog{position:relative;width:min(1280px,100%);max-height:calc(100vh - 64px);overflow:auto;background:var(--white);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,0.35);}
.lawyer-modal-close{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,0.16);background:rgba(255,255,255,0.08);color:var(--white);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:4;transition:background .25s,border-color .25s;}
.lawyer-modal-close:hover,.lawyer-modal-nav:hover,.lawyer-accordion-toggle:hover{background:var(--red);border-color:var(--red);color:var(--white);}
.lawyer-modal-close svg,.lawyer-modal-nav svg,.lawyer-accordion-toggle svg{width:18px;height:18px;fill:currentColor;}
.lawyer-modal-header{display:grid;grid-template-columns:280px 1fr;background:var(--navy);color:var(--white);}
.lawyer-modal-image img{width:100%;height:100%;min-height:340px;object-fit:cover;object-position:top center;}
.lawyer-modal-main{padding:40px 36px 34px;display:flex;flex-direction:column;justify-content:center;}
.lawyer-modal-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:26px;padding-right:72px;}
.lawyer-modal-name{font-size:clamp(32px,3vw,54px);line-height:1.02;color:var(--white);margin-bottom:8px;}
.lawyer-modal-title{font-size:18px;font-weight:700;color:var(--red);margin-bottom:10px;}
.lawyer-modal-exp{font-size:18px;color:rgba(255,255,255,0.7);}
.lawyer-modal-contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 26px;}
.lawyer-modal-field{padding:0;background:none;border:none;border-radius:0;}
.lawyer-modal-field-label{display:block;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.45);margin-bottom:8px;}
.lawyer-modal-field-value{font-size:15px;line-height:1.55;color:rgba(255,255,255,0.95);font-weight:700;word-break:break-word;}
.lawyer-modal-navs{display:flex;gap:10px;flex-shrink:0;}
.lawyer-modal-nav{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,0.16);background:rgba(255,255,255,0.08);color:var(--white);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .25s,border-color .25s;}
.lawyer-modal-sections{background:var(--white);}
.lawyer-accordion{background:var(--white);}
.lawyer-accordion-item{border-top:1px solid var(--gray-mid);background:var(--white);}
.lawyer-accordion-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 36px;background:var(--white);border:none;cursor:pointer;text-align:left;font-family:var(--font);}
.lawyer-accordion-trigger span:first-child{font-size:18px;font-weight:700;color:var(--navy);line-height:1.3;}
.lawyer-accordion-toggle{width:38px;height:38px;border-radius:50%;border:1px solid rgba(199,43,53,0.18);background:var(--red);color:var(--white);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .25s,border-color .25s,color .25s,transform .25s;flex-shrink:0;box-shadow:0 8px 18px rgba(199,43,53,0.22);}
.lawyer-accordion-toggle svg{transition:transform .3s ease;}
.lawyer-accordion-item.open .lawyer-accordion-toggle svg{transform:rotate(180deg);}
.lawyer-accordion-content{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1);background:var(--white);}
.lawyer-accordion-body{padding:0 36px 28px;font-size:15px;line-height:1.8;color:var(--text-body);}
.lawyer-accordion-body p{margin:0 0 14px;}
.lawyer-accordion-body p:last-child{margin-bottom:0;}
.lawyer-accordion-body ul{list-style:none;padding:0;margin:0;}
.lawyer-accordion-body li{position:relative;padding-left:18px;margin-bottom:10px;font-size:15px;line-height:1.8;color:var(--text-body);}
.lawyer-accordion-body li:last-child{margin-bottom:0;}
.lawyer-accordion-body li::before{content:'';position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:50%;background:var(--red);}
.lawyer-accordion-copy{position:relative;}
.lawyer-accordion-see-more{display:none;margin-top:16px;padding:10px 16px;background:var(--white);border:1px solid rgba(199,43,53,0.25);border-radius:999px;color:var(--red);font-family:var(--font);font-size:13px;font-weight:700;line-height:1;cursor:pointer;}
.lawyer-accordion-see-more:hover{background:rgba(199,43,53,0.06);}
.lawyer-modal-cta-wrap{display:flex;align-items:center;gap:28px;flex-wrap:wrap;}
.lawyer-modal-cta-btn{display:inline-flex;align-items:center;gap:9px;padding:11px 24px;background:#c72b35;color:#ffffff;font-family:'nimbus-sans','Nimbus Sans','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;font-weight:600;border-radius:5px;border:none;cursor:pointer;text-decoration:none;box-shadow:0 4px 18px rgba(199,43,53,0.35);transition:background .25s,transform .2s;flex-shrink:0;}
.lawyer-modal-cta-btn:hover{background:#a5222b;transform:translateY(-1px);}
.lawyer-modal-cta-btn svg{width:16px;height:16px;fill:#ffffff;flex-shrink:0;}
.lawyer-modal-contact-secondary{display:flex;flex-direction:column;}
.lawyer-modal-contact-secondary .lawyer-modal-field-label{display:block;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.45);margin-bottom:6px;}
.lawyer-modal-contact-secondary .lawyer-modal-field-value{font-size:14px;line-height:1.4;color:rgba(255,255,255,0.9);font-weight:600;word-break:break-word;}
.lawyer-modal-email-btn{display:inline-flex;align-items:center;gap:9px;padding:11px 24px;background:rgba(255,255,255,0.1);color:#ffffff;font-family:'nimbus-sans','Nimbus Sans','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;font-weight:600;border-radius:5px;border:1px solid rgba(255,255,255,0.2);cursor:pointer;text-decoration:none;transition:background .25s,border-color .25s,transform .2s;flex-shrink:0;}
.lawyer-modal-email-btn:hover{background:rgba(255,255,255,0.18);border-color:rgba(255,255,255,0.4);transform:translateY(-1px);}
.lawyer-modal-email-btn svg{width:16px;height:16px;fill:#ffffff;flex-shrink:0;}


/* =========================================
   REVIEWS
========================================= */

/* The navy sits on .reviews-panel, not the section, so the block matches the
   footprint of the panel sections that follow it (same page gutter, same
   footer-card radius and shadow as .atac-refer-split) instead of running
   full-bleed. .reviews-inner keeps owning the gutter so every existing
   responsive override for it still applies. */
.reviews{padding:var(--section-pad) 0;background:transparent;position:relative;}
/* Legacy v1 reviews markup — the hand-built /lp/ landing pages — has no
   .reviews-panel: back then the navy sat on the section itself. With the
   navy moved to the panel, those pages were painting white review text on a
   white section. When no panel is present the section keeps the navy as a
   full-bleed band (which is how those LPs were designed); pages that do have
   the panel are left alone. */
.reviews:not(:has(.reviews-panel)){background:var(--navy);}
.reviews-inner{padding:0 var(--page-gutter);}
.reviews-panel{background:var(--navy);border-radius:0 var(--radius) var(--radius) var(--radius);box-shadow:0 18px 60px rgba(35,44,57,.16);overflow:hidden;padding:clamp(32px,4.5vw,64px);}
.reviews h2{font-size:clamp(28px,3.2vw,56px);font-weight:800;color:var(--white);letter-spacing:-0.8px;line-height:1.08;}
.reviews-head-line{margin:16px 0 46px;}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.review-card{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.11);border-radius:5px;padding:26px 24px 28px;display:flex;flex-direction:column;min-height:286px;}
.review-stars{display:flex;gap:4px;margin-bottom:14px;}
.review-stars svg{width:19px;height:19px;fill:#ffd21f;}
.review-card blockquote{font-size:15px;line-height:1.85;color:rgba(255,255,255,0.82);font-style:italic;margin-bottom:22px;flex:1;font-weight:400;border:none !important;padding:0 !important;margin-left:0px !important;}
.review-attr{font-size:14px;font-weight:700;color:rgba(255,255,255,0.96);}
.review-attr .source{color:rgba(255,255,255,0.38);font-weight:400;font-size:12px;display:flex;align-items:center;gap:6px;margin-top:6px;}
.review-attr .source img{height:16px;width:auto;display:inline-block;flex-shrink:0;}
.reviews-more{overflow:hidden;max-height:0;transition:max-height .5s cubic-bezier(.4,0,.2,1);}
.reviews-more.open{max-height:600px;}
.reviews-grid-more{margin-top:20px;}
.reviews-toggle-wrap{display:flex;justify-content:center;margin-top:32px;}
.reviews-toggle-btn{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid rgba(255,255,255,0.2);border-radius:999px;padding:11px 24px;color:rgba(255,255,255,0.7);font-family:var(--font);font-size:14px;font-weight:500;cursor:pointer;transition:border-color .25s,color .25s;}
.reviews-toggle-btn:hover{border-color:rgba(255,255,255,0.5);color:var(--white);}
.reviews-toggle-btn svg{width:18px;height:18px;fill:currentColor;transition:transform .35s cubic-bezier(.4,0,.2,1);}
.reviews-toggle-btn.open svg{transform:rotate(180deg);}
/* Slider controls: only the mobile one-card slider uses them (see 640px block) */
.reviews-slider-nav{display:none;align-items:center;justify-content:center;gap:18px;margin-top:26px;}
.reviews-arrow{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;padding:0;background:none;border:1px solid rgba(255,255,255,0.22);border-radius:50%;color:rgba(255,255,255,0.85);cursor:pointer;transition:border-color .25s,color .25s,opacity .25s;}
.reviews-arrow svg{width:20px;height:20px;}
.reviews-arrow-next svg{transform:rotate(180deg);}
.reviews-arrow:hover:not(:disabled){border-color:rgba(255,255,255,0.55);color:var(--white);}
.reviews-arrow:disabled{opacity:.3;cursor:default;}
.reviews-counter{font-size:13px;font-weight:500;letter-spacing:.5px;color:rgba(255,255,255,0.55);min-width:52px;text-align:center;font-variant-numeric:tabular-nums;}


/* =========================================
   VIDEO
========================================= */

.video-trust{position:relative;top:0;z-index:1;width:100%;overflow:hidden;background:#000;padding-bottom:0;}
.video-iframe-wrap{position:relative;width:100%;padding-top:56.25%;}
.video-iframe-wrap iframe{position:absolute !important;top:0 !important;left:0 !important;width:100% !important;height:100% !important;border:none !important;}
.video-click-block{position:absolute;inset:0;z-index:2;}
.video-logos{position:absolute;top:50%;left:52px;transform:translateY(-50%);z-index:5;padding:0;background:none;pointer-events:none;}
.video-logos-inner{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:16px;flex-wrap:nowrap;padding:0;}
.video-logos-inner img{height:clamp(24px,2.4vw,34px);width:auto;filter:brightness(0) invert(1);opacity:0.82;}


/* =========================================
   WHY OWNERS
========================================= */

.why-owners{position:relative;z-index:2;padding:var(--section-pad) 0;background:var(--white);overflow:hidden;}
.why-owners-inner{padding:0 var(--page-gutter);}
.why-owners-header{display:flex;align-items:center;justify-content:flex-start;margin-bottom:32px;}
.why-owners-header h2{font-size:clamp(26px,3vw,44px);font-weight:800;color:var(--navy);letter-spacing:-0.5px;line-height:1.1;}
.wo-slider-wrap{position:relative;}
.wo-nav{position:absolute;top:50%;left:-20px;right:-20px;transform:translateY(-50%);display:flex;align-items:center;justify-content:space-between;pointer-events:none;z-index:10;}
.wo-arrow{width:44px;height:44px;border-radius:50%;border:none;background:var(--red);color:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;pointer-events:auto;box-shadow:0 4px 16px rgba(199,43,53,0.35);transition:background 0.25s,transform 0.2s;}
.wo-arrow:hover{background:var(--red-dark);transform:scale(1.08);}
.wo-arrow svg{width:20px;height:20px;fill:currentColor;}
.wo-track-wrap{overflow:hidden;touch-action:pan-y;}
.wo-track{display:flex;gap:20px;transition:transform 0.5s cubic-bezier(0.4,0,0.2,1);will-change:transform;}
.wo-card{flex-shrink:0;width:calc((100% - 60px) / 4);min-width:240px;background:#2d3a4a;border:1px solid rgba(255,255,255,0.10);border-radius:12px;padding:28px 24px 24px;display:flex;flex-direction:column;gap:16px;overflow:hidden;transition:border-color 0.3s;}
.wo-card:hover{border-color:rgba(199,43,53,0.4);}
.wo-card-tag{display:inline-flex;align-self:flex-start;font-size:11px;font-weight:600;letter-spacing:0.3px;color:rgba(255,255,255,0.55);background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);border-radius:20px;padding:5px 13px;}
.wo-card-title{font-size:16px;font-weight:700;color:var(--white);line-height:1.35;}
.wo-card-title + .wo-card-body-static{border-top:1px solid rgba(255,255,255,0.08);padding-top:16px;}
.wo-card-body-static{flex:1;}
.wo-card-body-static p{font-size:13.5px;line-height:1.82;color:rgba(255,255,255,0.92);font-weight:400;margin:0;}
.wo-card-body,.wo-card-footer,.wo-card-date,.wo-expand-btn{display:none !important;}


/* =========================================
   CLIENT VICTORIES
========================================= */

.cv-section{padding:clamp(48px,5vw,72px) 0;background:var(--white);}
.cv-inner{padding:0 var(--page-gutter);max-width:100%;box-sizing:border-box;}
.cv-heading{margin-bottom:28px;}
.cv-h2{font-family:'Nimbus Sans','nimbus-sans','Helvetica Neue',Helvetica,Arial,sans-serif !important;font-size:clamp(26px,3vw,44px) !important;font-weight:800 !important;color:var(--navy) !important;letter-spacing:-0.5px !important;line-height:1.1 !important;margin:0 !important;}
.cv-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;}
.cv-col-left{display:flex;flex-direction:column;gap:16px;}
.cv-tag{display:inline-block;background:#c72b35;color:#fff;font-family:'Nimbus Sans','nimbus-sans','Helvetica Neue',Helvetica,Arial,sans-serif !important;font-size:13px;font-weight:600;padding:7px 20px;border-radius:20px;margin:0;letter-spacing:0.2px;align-self:flex-start;}
.cv-title{font-family:'Nimbus Sans','nimbus-sans','Helvetica Neue',Helvetica,Arial,sans-serif !important;font-size:clamp(22px,2.2vw,32px) !important;font-weight:700 !important;line-height:1.3 !important;color:var(--navy) !important;margin:0 !important;letter-spacing:-0.3px;}
.cv-title strong{font-weight:900 !important;}
.cv-dark-card{background:#2c3547;border-radius:16px;padding:2.5rem 2.75rem;}
.cv-body{font-family:'Nimbus Sans','nimbus-sans','Helvetica Neue',Helvetica,Arial,sans-serif !important;font-size:clamp(16px,1.2vw,18px) !important;line-height:1.85 !important;color:#dce3ef !important;margin:0 !important;font-weight:400 !important;}


/* =========================================
   HOW IT WORKS
========================================= */

.how-it-works{position:relative;z-index:2;padding:var(--section-pad) 0;background:var(--gray);}
.hiw-inner{padding:0 var(--page-gutter);}
.how-it-works h2{font-size:clamp(24px,2.8vw,40px);font-weight:800;margin-bottom:14px;letter-spacing:-0.5px;}
.hiw-head-line{margin-bottom:52px;}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.step-box{border:1px solid var(--gray-mid);border-radius:var(--radius);padding:40px 32px;background:var(--white);transition:border-color .3s,box-shadow .3s,transform .3s;}
.step-box:hover{border-color:var(--red);box-shadow:0 12px 40px rgba(35,44,57,0.1);transform:translateY(-4px);}
.step-box-num{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background:var(--navy);border-radius:var(--radius);font-size:20px;font-weight:800;color:var(--white);margin-bottom:24px;line-height:1;transition:background .3s;}
.step-box:hover .step-box-num{background:var(--red);}
.step-box h4{font-size:20px;font-weight:700;color:var(--navy);margin-bottom:12px;line-height:1.2;}
.step-box p{font-size:15px;line-height:1.75;color:var(--text-body);font-weight:400;}


/* =========================================
   FAQ
========================================= */

.faq{padding:var(--section-pad) 0;background:var(--white);position:relative;z-index:3;}
.faq-inner{padding:0 var(--page-gutter);display:grid;grid-template-columns:360px 1fr;gap:80px;align-items:start;}
.faq-left{position:sticky;top:calc(var(--header-h) + 24px);}
.faq-left h2{font-size:clamp(24px,2.6vw,38px);font-weight:800;margin-bottom:14px;letter-spacing:-0.5px;}
.faq-left-rule{width:48px;height:3px;background:var(--red);margin-bottom:24px;border-radius:2px;}
.faq-left p{font-size:15.5px;color:var(--text-muted);line-height:1.7;margin-bottom:32px;font-weight:400;}
/* .faq-contact-btn is the site's text-link CTA — see .atac-link-cta below,
   which this class is listed in. */
.faq-list{display:flex;flex-direction:column;}
.faq-item{border-bottom:1px solid var(--gray-mid);}
.faq-item:first-child{border-top:1px solid var(--gray-mid);}
.faq-question{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0;cursor:pointer;user-select:none;}
.faq-question-text{font-size:16px;font-weight:600;color:var(--navy);line-height:1.35;}
.faq-icon{width:30px;height:30px;border-radius:50%;background:var(--red);border:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .3s;}
.faq-icon svg{width:14px;height:14px;fill:var(--white);transition:transform .3s;}
.faq-item.open .faq-icon svg{transform:rotate(180deg);}
.faq-answer{overflow:hidden;max-height:0;transition:max-height .4s cubic-bezier(.4,0,.2,1);}
.faq-answer-inner{padding:0 0 22px;font-size:15px;line-height:1.8;color:var(--text-body);font-weight:400;}
.faq-item.open .faq-answer{max-height:400px;}


/* =========================================
   INDUSTRY INSIGHTS
========================================= */

.insights{padding:var(--section-pad) 0;background:var(--white);position:relative;z-index:2;}
.insights-inner{padding:0 var(--page-gutter);}
.insights-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:16px;}
.insights-header-left h2{font-size:clamp(26px,3vw,44px);font-weight:800;color:var(--navy);letter-spacing:-0.5px;line-height:1.1;}
.insights-head-line{margin-bottom:40px;}
.insights-slider-wrap{position:relative;display:flex;align-items:center;gap:0;}

.insights-arrow,
.insights-arrow-prev,
.insights-arrow-next{
  width:44px !important;height:44px !important;border-radius:50% !important;border:1.5px solid var(--red) !important;background:var(--red) !important;color:var(--white) !important;cursor:pointer !important;display:flex !important;align-items:center !important;justify-content:center !important;flex-shrink:0 !important;transition:background .25s,border-color .25s,color .25s,transform .2s !important;box-shadow:0 2px 12px rgba(35,44,57,0.1) !important;z-index:2 !important;opacity:1 !important;
}
.insights-arrow:hover,.insights-arrow-prev:hover,.insights-arrow-next:hover{background:var(--red-dark) !important;border-color:var(--red-dark) !important;color:var(--white) !important;transform:scale(1.08) !important;}
.insights-arrow svg,.insights-arrow-prev svg,.insights-arrow-next svg{width:20px !important;height:20px !important;fill:currentColor !important;}
.insights-arrow-prev{margin-right:16px !important;}
.insights-arrow-next{margin-left:16px !important;}
.insights-arrow:disabled,.insights-arrow-prev:disabled,.insights-arrow-next:disabled{opacity:0.55 !important;cursor:default !important;pointer-events:none !important;background:var(--red) !important;border-color:var(--red) !important;color:var(--white) !important;}
.insights-track-outer{overflow:hidden;flex:1;}
.insights-track{display:flex;gap:20px;transition:transform .5s cubic-bezier(.4,0,.2,1);}
.insight-card{flex-shrink:0;width:calc((100% - 40px) / 3);border:1px solid var(--gray-mid);border-radius:var(--radius);padding:28px 26px 26px;background:var(--white);display:flex;flex-direction:column;box-shadow:none;transition:border-color .3s,box-shadow .3s,transform .3s;}
.insight-card:hover{border-color:rgba(199,43,53,0.3);box-shadow:none;transform:translateY(-3px);}
/* ====================================================================
   BUTTON CASE — the site standard: every button/CTA label renders with
   the first letter of each word capitalised. `capitalize` only uppercases
   first letters and never lowercases, so "ATAC LAW" in a label stays
   fully capitalised.
   Matched structurally (element + class pattern) rather than by listing
   every class, so a new button picks the standard up on its own. Element
   qualifiers matter: they keep section wrappers like <div class="final-cta">
   out, which would otherwise title-case their whole contents.
   ==================================================================== */
button,
input[type="submit"],
input[type="button"],
a[class*="-btn"],    span[class*="-btn"],
a[class*="-cta"],    span[class*="-cta"],
a[class*="-more"],   span[class*="-more"],
a[class*="-go"],     span[class*="-go"],
a[class*="-copy"],   span[class*="-copy"],
.atac-red-btn,
.atac-link-cta,
.atac-mega-card,
.about-textlink,
.lp-tab,
.atac-svc-tab,
.cr-pager-item,
.cr-filter-reset{
  text-transform:capitalize;
}

/* ====================================================================
   MEDIA CARD — the listing card shared by /legal-insights/, /experience/
   and the home page's Insights carousel. Moved here from atac-lawyer.css
   and page-legal-insights.php so all three read one definition.
   ==================================================================== */
.cr-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--gray-mid); border-radius: var(--radius);
  padding: 28px 26px 26px; background: #fff;
  box-shadow: 0 2px 12px rgba(35,44,57,.05);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.cr-card:hover { border-color: var(--gray-mid); }
.cr-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; min-height: 28px; }
.cr-card-areas { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.cr-card-year { font-size: 13px; font-weight: 600; color: var(--text-muted); flex-shrink: 0; }
/* Look comes from the shared .insight-card-tag/.cr-card-area-tag chip in
   atac-custom.css; these are the only button-specific bits. */
.cr-card-area-tag { cursor: pointer; transition: background .2s, color .2s; }
.cr-card-area-tag:hover { background: var(--navy); color: #fff; }
.cr-card-title {
  font-size: 23px !important; font-weight: 800; color: var(--navy); line-height: 1.3;
  margin: 0 0 12px; flex: 1;
}
.cr-card-title a { color: inherit; text-decoration: none; transition: color .2s; }
.cr-card-title a:hover { color: var(--red); }
.cr-card-excerpt { font-size: 14.5px; line-height: 1.75; color: var(--text-body); margin: 0 0 22px; }
/* Every card CTA carries .atac-link-cta (the "View Bio" text link), so its
   type, colour, padding and underline all come from that one component in
   atac-custom.css. Only the card-specific bit lives here. */
.cr-card-more { margin-top: auto; }

  /* Cover image at the top of each article card. Full-bleed over the card's
     28px/26px padding, with the top corners matching the card radius. */
  .cr-card-media {
    display: block; position: relative; overflow: hidden;
    /* 3/2, not 16/9: the featured images are exported at 1200x794 / 1200x800
       (~1.51), so a 16/9 box cropped ~15% off the top and bottom of every
       card — enough to cut into the titles baked into the artwork. */
    margin: -28px -26px 20px; aspect-ratio: 3 / 2;
    border-radius: var(--radius, 12px) var(--radius, 12px) 0 0;
    background: var(--navy, #232c39);
  }
  .cr-card-media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .4s ease;
  }
  /* ── Hover language lifted from the home page's insight cards
     (.atac-ihub-card): no lift and no shadow — instead the image desaturates
     under a scrim that fades in, a red rule sweeps the meta row, the title
     turns red and the CTA arrow slides. Same timings (.55s / .25s). */
  .cr-card { transition: border-color .25s; }
  .cr-card:hover {
    box-shadow: none; transform: none; border-color: var(--gray-mid, #e0e0e0);
  }
  .cr-card-media::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    opacity: 0; transition: opacity .55s;
    background: linear-gradient(rgba(35,44,57,.1) 0, rgba(35,44,57,.32) 100%);
  }
  .cr-card:hover .cr-card-media::before { opacity: 1; }
  .cr-card-media img { filter: saturate(1); transition: filter .55s; }
  .cr-card:hover .cr-card-media img { filter: saturate(.88); transform: none; }
  /* the red rule needs a hairline to sweep along */
  .cr-card-head {
    position: relative; padding-bottom: 10px;
    border-bottom: 1px solid rgba(35,44,57,.16);
  }
  .cr-card-head::after {
    content: ''; position: absolute; left: 0; bottom: -1px; width: 0; height: 1px;
    background: var(--red, #c72b35); transition: width .55s cubic-bezier(.4,0,.2,1);
  }
  .cr-card:hover .cr-card-head::after { width: 100%; }
  .cr-card:hover .cr-card-more::after { transform: scaleX(.8); }
  .cr-card-title a { transition: color .25s; }
  .cr-card:hover .cr-card-title a,
  .cr-card:hover > .cr-card-title,
  a.cr-card:hover .cr-card-title { color: var(--red, #c72b35); }
  /* The CTA is the site's .atac-link-cta text link (same as "View Bio" on
     /lawyers/): it brings its own chevron, colour change and red underline
     that retracts on hover, so no arrow rules are needed here. */
  /* Branded fallback when a post has no featured image. */
  .cr-card-media.is-placeholder {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--navy, #232c39) 0%, #2f3c4d 100%);
  }
  .cr-card-media-mark {
    font-family: var(--font); font-weight: 800; letter-spacing: 3px;
    font-size: 22px; color: #fff; opacity: .85;
  }
  .cr-card-media-mark span { color: var(--red, #c72b35); }

/* ── META CHIP — one definition for the small uppercase tags on cards
   (practice-page Insights date chip, Insights/Experience practice-area tags).
   .cr-card-area-tag adds only the bits that make it a filter button. */
.insight-card-tag,
.cr-card-area-tag{
  display:inline-block;font-family:var(--font);
  font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  line-height:1.5;color:var(--navy);background:var(--gray);
  border:none;border-radius:4px;padding:3px 9px;text-decoration:none;
  /* .cr-card-area-tag is a <button> on the Judgments & Commentary, Legal
     Insights and Experience grids, and buttons are text-align:center in the UA
     stylesheet. Invisible while a term fits on one line, obvious the moment one
     wraps — "Commercial Real Estate and Disputes" centred its second line
     against every left-aligned tag beside it. */
  text-align:left;
}
.insight-card-tag{margin-bottom:18px;align-self:flex-start;}
.insight-card h4{font-size:17px;font-weight:800;color:var(--navy);line-height:1.3;margin-bottom:14px;}
.insight-card p{font-size:14px;line-height:1.8;color:var(--text-body);flex:1;margin-bottom:20px;}
.insight-card-footer{border-top:1px solid var(--gray-mid);padding-top:14px;font-size:12px;font-weight:600;letter-spacing:0.5px;color:var(--text-muted);}
.insights-dots-wrap{display:flex;justify-content:center;margin-top:28px;}
.insights-dots{display:flex;gap:8px;align-items:center;}
.insights-dot{width:7px;height:7px;border-radius:50%;background:var(--gray-mid);border:none;cursor:pointer;padding:0;transition:background .25s,transform .2s;}
.insights-dot.active{background:var(--red);transform:scale(1.3);}
/* The CTA carries .atac-link-cta, so its type, colour, chevron and underline
   come from that component. Only the card's own placement lives here. */
.insight-card-more{margin-top:auto;}
/* the card is the hover target, not just the link */
.insight-card:hover .insight-card-more::after{transform:scaleX(.8);}


/* =========================================
   CASES — "Highlighted Successful Matters" carousel
   Dark navy cards on a light section. Mirrors the
   Insights slider engine (side red arrows + dots).
   ========================================= */
.cases{padding:var(--section-pad) 0;background:var(--white);position:relative;z-index:2;}
.cases-inner{padding:0 var(--page-gutter);}
.cases-header{margin-bottom:16px;}
.cases-header h2{font-size:clamp(26px,3vw,44px);font-weight:800;color:var(--navy);letter-spacing:-0.5px;line-height:1.1;}
.cases-header h2 .red{color:var(--red);}
.cases-head-line{margin-bottom:40px;}
.cases-slider-wrap{position:relative;display:flex;align-items:center;gap:0;}
.cases-arrow,
.cases-arrow-prev,
.cases-arrow-next{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--red);border:1px solid var(--red);color:var(--white);cursor:pointer;padding:0;transition:background .25s,border-color .25s,transform .2s;box-shadow:0 6px 20px rgba(199,43,53,0.32);}
.cases-arrow:hover,.cases-arrow-prev:hover,.cases-arrow-next:hover{background:var(--red-dark);border-color:var(--red-dark);transform:scale(1.08);}
.cases-arrow svg,.cases-arrow-prev svg,.cases-arrow-next svg{width:22px;height:22px;fill:currentColor;}
.cases-arrow-prev{margin-right:18px;}
.cases-arrow-next{margin-left:18px;}
.cases-arrow:disabled{opacity:0.4;cursor:default;pointer-events:none;}
.cases-track-outer{overflow:hidden;flex:1;min-width:0;}
.cases-track{display:flex;gap:24px;transition:transform .5s cubic-bezier(.4,0,.2,1);}
.case-card{position:relative;overflow:hidden;flex-shrink:0;width:calc((100% - 48px) / 3);background:var(--navy);border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius) var(--radius) 72px var(--radius);padding:30px 30px 28px;display:flex;flex-direction:column;box-shadow:none;transition:box-shadow .3s,transform .3s;}
.case-card:hover{box-shadow:none;transform:translateY(-4px);}
/* Logo-style angled red wedge in the bottom-right corner; sits behind the card
   content and is clipped to the corner's 72px radius by overflow:hidden. */
.case-card::after{content:'';position:absolute;right:0;bottom:0;width:200px;height:150px;background:linear-gradient(135deg,#7a1418,#c72c35);clip-path:polygon(100% 15%,100% 100%,50% 100%);z-index:0;pointer-events:none;}
.case-card > *{position:relative;z-index:1;}
.case-card-tag{display:inline-block;align-self:flex-start;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.78);background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);border-radius:20px;padding:6px 14px;margin-bottom:20px;}
.case-card-title{font-size:18px;font-weight:800;line-height:1.32;margin:0 0 16px;}
.case-card-title a{color:var(--white);text-decoration:none;transition:color .25s ease;}
.case-card-title a:hover{color:var(--red);}
.case-card-rule{height:1px;background:rgba(255,255,255,0.12);margin:0 0 18px;}
.case-card-summary{font-size:14px;line-height:1.8;color:rgba(255,255,255,0.72);margin:0 0 18px;flex:1;}
.case-card-cta{margin-top:auto;}
.cases-dots-wrap{display:flex;justify-content:center;margin-top:28px;}
.cases-dots{display:flex;gap:8px;align-items:center;}
.cases-dot{width:7px;height:7px;border-radius:50%;background:var(--gray-mid);border:none;cursor:pointer;padding:0;transition:background .25s,transform .2s;}
.cases-dot.active{background:var(--red);transform:scale(1.3);}
@media (max-width:1100px){
  .cases-inner{padding:0 32px;}
  .case-card{width:calc((100% - 24px) / 2);}
}
@media (max-width:768px){
  .cases-inner{padding:0 20px;}
  .cases-slider-wrap{gap:8px;}
  .cases-arrow{width:40px;height:40px;}
  .cases-arrow-prev{margin-right:0;order:-1;}
  .cases-arrow-next{margin-left:0;order:1;}
  .case-card{box-sizing:border-box;width:100% !important;}
}


/* =========================================
   LOCATIONS
========================================= */

.locations{padding:var(--section-pad) 0 clamp(40px,4vw,60px) 0;background:var(--white);}
.locations-inner{padding:0 var(--page-gutter);}
.locations-header{margin-bottom:14px;}
.locations-head-line{margin-bottom:40px;}
.locations-grid{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:24px;margin-bottom:0;}
.loc-card{background:var(--gray);border-radius:10px;padding:36px 32px;}
.loc-card-label{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--red);margin-bottom:14px;font-family:var(--font);}
.loc-card-name{font-size:clamp(22px,2vw,30px);color:var(--navy);margin-bottom:8px;font-family:'Nimbus Sans','nimbus-sans','Helvetica Neue',Helvetica,Arial,sans-serif !important;font-weight:800 !important;letter-spacing:-0.3px;}
.loc-card-address{font-size:16px;color:var(--text-body);line-height:1.6;margin-bottom:22px;}
.loc-hours-row{display:flex;align-items:center;gap:12px;margin-bottom:28px;padding:14px 16px;background:var(--white);border-radius:6px;border:1px solid var(--gray-mid);}
.loc-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;flex-shrink:0;animation:pulse 2s infinite;}
.loc-hours-label{font-size:13px;color:var(--text-muted);font-weight:400;font-family:var(--font);line-height:1.5;}
.loc-hours-label strong{color:var(--navy);font-weight:700;display:block;font-size:14px;margin-bottom:2px;}


/* =========================================
   FINAL CTA
========================================= */

.final-cta{padding:var(--section-pad) 0;background:var(--navy);position:relative;overflow:hidden;}
.final-cta::before{content:'';position:absolute;top:-50%;right:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(199,43,53,0.1) 0%,transparent 70%);pointer-events:none;}
.final-cta-inner{padding:0 52px;max-width:640px;margin:0 auto;text-align:center;position:relative;z-index:2;}
.final-cta h2{font-size:clamp(24px,3vw,44px);font-weight:800;color:var(--white);margin-bottom:12px;letter-spacing:-0.5px;}
.final-sub{font-size:18px;color:rgba(255,255,255,.65);margin-bottom:44px;font-weight:300;}
.final-cta .form-card{text-align:left;}


/* =========================================
   FOOTER
========================================= */

.lp-footer{background:var(--navy-deep);border-top:1px solid rgba(255,255,255,0.06);padding:28px 0;text-align:center;}
.lp-footer p{font-size:13px;color:rgba(255,255,255,.3);}


/* =========================================
   BUTTONS
========================================= */

.atac-red-btn,
.atac-red-btn:visited,
.elementor-button.atac-red-btn,
.elementor-button.atac-red-btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 28px;
  background: #c72b35 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 5px !important;
  font-family: var(--font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}

.atac-red-btn:hover,
.atac-red-btn:focus,
.elementor-button.atac-red-btn:hover,
.elementor-button.atac-red-btn:focus {
  background: #232c39 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}


/* =========================================
   FADE UP ANIMATION — disabled (elements always visible)
========================================= */


/* =========================================
   WORDPRESS OVERRIDES
========================================= */

/* Global font override */
html body,html body *,html body h1,html body h2,html body h3,html body h4,html body h5,html body h6,html body p,html body span,html body a,html body li,html body ul,html body ol,html body button,html body input,html body textarea,html body select,html body label,html body blockquote,html body div,html body section,html body article,html body nav,html body header,html body footer{font-family:'nimbus-sans','Helvetica Neue',Helvetica,Arial,sans-serif !important;}

/* ── Global body-copy typography (July 2026) ─────────────────────────────
   One consistent reading style for running paragraphs + content list items
   site-wide. Targets <p>/<li> only, so section headings (h1–h6), buttons,
   and the nav menu are untouched (they're not paragraphs). Deliberately
   EXCLUDES, so they keep their own designed styling:
     • hero sections (home / about / practice-area / case-results / expertise
       / people / cases / chinese landing, + generic .hero)
     • self-contained card & component blurbs (insight, case, case-results,
       knowledge, lawyer + bio, people, mega-menu, review, form cards)
     • page / section footers
   Uses :not() with descendant args — modern browsers only; older engines
   simply skip the rule, leaving text at its current size (safe no-op). */
html body p:not(
  .home-hero *, .about-hero *, .pa-hero *, .cr-hero *, .exp-hero *,
  .atac-people-hero *, .cases-hero *, .chinese-landing-hero *, .hero *,
  .insight-card *, .case-card *, .mcase-card *, .cr-card *, .know-card *, .lawyer-card *,
  .lawyer-bio *, .exp-lawyer-card *, .atac-people-card *, .atac-mega-card *,
  .form-card *, .atac-reviews *,
  .exp-main *,                        /* case / insight article body: .exp-main p rules it */
  .cases-footer *, .insights-footer *, .knowledge-footer *, #main-footer *, footer *
),
html body .entry-content li:not(.home-hero *, .about-hero *, .pa-hero *, .cr-hero *, .exp-hero *),
html body .et_pb_text li{
  font-size: clamp(14px, 1.1vw, 16px) !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  margin-bottom: 10px !important;
}

/* Global list-bullet reset — removes the default/Divi disc bullets site-wide.
   !important is needed to beat Divi's high-specificity `list-style:disc` rules.
   Custom markers built with ::before (e.g. .about-purpose-list) are unaffected. */
html body ul,
html body ol,
html body li{list-style:none !important;}
html body li::marker{content:none !important;}

/* Exception — keep normal bullets/numbers inside post & page body copy
   (blog articles, the WP editor content area, and the case/insight article
   body) so written lists read correctly. .exp-main is listed here rather than
   fighting this rule from atac-lawyer.css: the reset above targets `li`
   directly, so a marker set on the parent `ul` can never win it back. */
html body .entry-content ul,
html body .exp-main ul,
html body .et_pb_text ul{list-style:disc !important;padding-left:1.4em !important;}
html body .entry-content ol,
html body .exp-main ol,
html body .et_pb_text ol{list-style:decimal !important;padding-left:1.4em !important;}
html body .entry-content li,
html body .exp-main li,
html body .et_pb_text li{list-style:inherit !important;}
html body .entry-content li::marker,
html body .exp-main li::marker,
html body .et_pb_text li::marker{content:normal !important;}

/* …but a breadcrumb is navigation, not body copy. On pages whose breadcrumb is
   printed inside a Divi Code/Text module (/team/, for one) the exception above
   catches its <ol> and indents the trail by 1.4em. Undo it — higher specificity
   than the rules above, so the !important there is beaten rather than fought. */
html body .entry-content .atac-breadcrumb ol,
html body .et_pb_text .atac-breadcrumb ol,
html body .atac-breadcrumb ol{list-style:none !important;padding-left:0 !important;margin:0 !important;}
html body .entry-content .atac-breadcrumb li,
html body .et_pb_text .atac-breadcrumb li,
html body .atac-breadcrumb li{list-style:none !important;}
html body .entry-content .atac-breadcrumb li::marker,
html body .et_pb_text .atac-breadcrumb li::marker,
html body .atac-breadcrumb li::marker{content:none !important;}

/* Designed lists keep ONLY their custom markers — the content exception above
   must never re-add disc bullets to them, even when nested in a Divi text /
   .entry-content wrapper on the live site. */
html body ul.about-purpose-list{list-style:none !important;padding-left:0 !important;}
html body ul.about-purpose-list li{list-style:none !important;}
html body ul.about-purpose-list li::marker{content:none !important;}

/* Full-width sections */
.site-header{left:0 !important;right:0 !important;width:100% !important;max-width:100% !important;}
.hero,.stats-section,.pain,.expertise,.lawyers,.why-owners,.video-trust,.benefits,.reviews,.insights,.faq,.final-cta,.lp-footer{width:100% !important;max-width:100% !important;box-sizing:border-box !important;}
.elementor-section-wrap,.elementor-section,.elementor-container,.elementor-widget-wrap,.e-con,.e-con-inner{max-width:100% !important;width:100% !important;padding-left:0 !important;padding-right:0 !important;}

/* Expertise triggers */
.expertise-group .expertise-trigger,.expertise-group .expertise-trigger:hover,.expertise-group .expertise-trigger:focus{background:none !important;background-color:transparent !important;border:none !important;border-radius:0 !important;box-shadow:none !important;padding:0 !important;text-transform:none !important;color:#232c39 !important;}
.expertise-group .expertise-title{font-size:17px !important;font-weight:800 !important;color:#232c39 !important;background:none !important;text-transform:none !important;letter-spacing:normal !important;}
.expertise-subitem .expertise-subtrigger,.expertise-subitem .expertise-subtrigger:hover,.expertise-subitem .expertise-subtrigger:focus{background:none !important;background-color:transparent !important;border:none !important;border-radius:0 !important;box-shadow:none !important;padding:14px 16px !important;text-transform:none !important;color:#232c39 !important;}
.expertise-subitem{background:#ffffff !important;background-color:#ffffff !important;border:1px solid #e0e0e0 !important;border-radius:5px !important;}
.expertise-subname{font-size:15px !important;font-weight:700 !important;color:#232c39 !important;text-transform:none !important;letter-spacing:normal !important;background:none !important;}

/* Expertise toggles */
.expertise-group .expertise-toggle{background:rgba(199,43,53,0.08) !important;background-color:rgba(199,43,53,0.08) !important;border:1px solid rgba(199,43,53,0.18) !important;border-radius:50% !important;color:#c72b35 !important;box-shadow:none !important;}
.expertise-group.open .expertise-toggle{background:#c72b35 !important;background-color:#c72b35 !important;border-color:#c72b35 !important;color:#ffffff !important;}
.expertise-group .expertise-toggle svg{fill:currentColor !important;}
.expertise-toggle-all{background:#232c39 !important;background-color:#232c39 !important;color:#ffffff !important;border:1px solid #232c39 !important;border-radius:5px !important;font-size:13px !important;font-weight:700 !important;text-transform:none !important;letter-spacing:normal !important;padding:10px 16px !important;box-shadow:none !important;margin-left:auto !important;flex-shrink:0 !important;}
.expertise-toggle-all:hover{background:#c72b35 !important;background-color:#c72b35 !important;border-color:#c72b35 !important;color:#ffffff !important;}
.expertise-subitem .expertise-subtoggle{background:#ffffff !important;background-color:#ffffff !important;border:1px solid rgba(35,44,57,0.08) !important;border-radius:50% !important;color:#232c39 !important;box-shadow:none !important;}
.expertise-subitem.open .expertise-subtoggle{background:#232c39 !important;background-color:#232c39 !important;border-color:#232c39 !important;color:#ffffff !important;}
.expertise-subitem .expertise-subtoggle svg{fill:currentColor !important;}

/* Lawyer modal accordion */
.lawyer-accordion-item,.lawyer-accordion-item:hover{background:#ffffff !important;background-color:#ffffff !important;}
.lawyer-accordion-trigger,.lawyer-accordion-trigger:hover,.lawyer-accordion-trigger:focus{background:#ffffff !important;background-color:#ffffff !important;border:none !important;border-radius:0 !important;box-shadow:none !important;padding:26px 36px !important;text-transform:none !important;}
.lawyer-accordion-trigger span:first-child{font-size:18px !important;font-weight:700 !important;color:#232c39 !important;text-transform:none !important;letter-spacing:normal !important;background:none !important;}
.lawyer-accordion-item.open,.lawyer-accordion-item.open .lawyer-accordion-trigger{background:#ffffff !important;background-color:#ffffff !important;}
.lawyer-accordion-content,.lawyer-accordion-body{background:#ffffff !important;background-color:#ffffff !important;}
.lawyer-accordion-item .lawyer-accordion-toggle{background:#c72b35 !important;background-color:#c72b35 !important;border:1px solid rgba(199,43,53,0.18) !important;border-radius:50% !important;color:#ffffff !important;box-shadow:0 8px 18px rgba(199,43,53,0.22) !important;}
.lawyer-accordion-item .lawyer-accordion-toggle svg{fill:#ffffff !important;}

/* Header */
.site-header .header-nav-link,.site-header .header-nav-link:visited,.site-header .header-nav-link:hover{background:none !important;background-color:transparent !important;border:none !important;border-radius:0 !important;box-shadow:none !important;padding:0 !important;text-transform:none !important;letter-spacing:0.3px !important;font-size:13.5px !important;font-weight:500 !important;color:#ffffff !important;text-decoration:none !important;}
.site-header .header-nav-link:hover{color:#ffffff !important;}
.site-header .phone-cta,.site-header .phone-cta:visited{background:#c72b35 !important;background-color:#c72b35 !important;color:#ffffff !important;border:none !important;border-radius:5px !important;text-transform:none !important;letter-spacing:normal !important;font-size:14px !important;font-weight:600 !important;padding:10px 22px !important;text-decoration:none !important;box-shadow:0 4px 18px rgba(199,43,53,0.35) !important;}
.site-header .phone-cta:hover{background:#a5222b !important;background-color:#a5222b !important;}
.site-header .phone-cta svg{fill:#ffffff !important;}

/* Lawyer carousel */
.lawyers .lawyer-arrow,.lawyers .lawyer-arrow:hover,.lawyers .lawyer-arrow:focus{background:#c72b35 !important;background-color:#c72b35 !important;border:none !important;border-radius:50% !important;color:#ffffff !important;box-shadow:none !important;}
.lawyers .lawyer-arrow:hover{background:#a5222b !important;background-color:#a5222b !important;}
.lawyers .lawyer-arrow svg{fill:#ffffff !important;}

/* Lawyer learn more */
/* No button overrides here: the CTA is the .atac-link-cta text link and the
   component carries !important itself. A leftover `:hover{background:#a5222b}`
   used to sit here from when this was a solid red button — it outranked the
   component's own `background:transparent !important` (0,3,0 vs 0,1,0) and
   painted a red block behind the label on hover, underline and all. */

/* Modal close/nav */
.lawyer-modal-dialog .lawyer-modal-close,.lawyer-modal-dialog .lawyer-modal-nav{background:rgba(255,255,255,0.08) !important;background-color:rgba(255,255,255,0.08) !important;border:1px solid rgba(255,255,255,0.16) !important;border-radius:50% !important;color:#ffffff !important;box-shadow:none !important;}
.lawyer-modal-dialog .lawyer-modal-close:hover,.lawyer-modal-dialog .lawyer-modal-nav:hover{background:#c72b35 !important;background-color:#c72b35 !important;border-color:#c72b35 !important;}
.lawyer-modal-dialog .lawyer-modal-close svg,.lawyer-modal-dialog .lawyer-modal-nav svg{fill:currentColor !important;}

/* Modal email + CTA buttons */
.lawyer-modal-email-btn,.lawyer-modal-email-btn:visited{background:rgba(255,255,255,0.1) !important;color:#ffffff !important;border:1px solid rgba(255,255,255,0.2) !important;border-radius:5px !important;text-transform:none !important;letter-spacing:normal !important;font-size:14px !important;font-weight:600 !important;padding:11px 24px !important;text-decoration:none !important;box-shadow:none !important;}
.lawyer-modal-email-btn:hover{background:rgba(255,255,255,0.18) !important;border-color:rgba(255,255,255,0.4) !important;}
.lawyer-modal-email-btn svg{fill:#ffffff !important;}
.lawyer-modal-cta-btn,.lawyer-modal-cta-btn:visited{background:#c72b35 !important;background-color:#c72b35 !important;color:#ffffff !important;border:none !important;border-radius:5px !important;text-transform:none !important;letter-spacing:normal !important;font-size:14px !important;font-weight:600 !important;padding:11px 24px !important;text-decoration:none !important;box-shadow:0 4px 18px rgba(199,43,53,0.35) !important;}
.lawyer-modal-cta-btn:hover{background:#a5222b !important;background-color:#a5222b !important;}
.lawyer-modal-cta-btn svg{fill:#ffffff !important;}

/* Why Owners */
.why-owners .wo-arrow,.why-owners .wo-arrow:hover,.why-owners .wo-arrow:focus{background:#c72b35 !important;background-color:#c72b35 !important;border:none !important;border-radius:50% !important;color:#ffffff !important;box-shadow:none !important;}
.why-owners .wo-arrow:hover{background:#a5222b !important;background-color:#a5222b !important;}
.why-owners .wo-arrow svg{fill:#ffffff !important;}
.why-owners .wo-card-body-static p{color:rgba(255,255,255,0.92) !important;font-family:'nimbus-sans','Helvetica Neue',Helvetica,Arial,sans-serif !important;}
.why-owners .wo-card-tag{color:rgba(255,255,255,0.55) !important;font-family:'nimbus-sans','Helvetica Neue',Helvetica,Arial,sans-serif !important;}
.why-owners .wo-card-title{color:var(--white) !important;font-family:'nimbus-sans','Helvetica Neue',Helvetica,Arial,sans-serif !important;}

/* Reviews toggle */
.reviews-toggle-btn,.reviews-toggle-btn:hover,.reviews-toggle-btn:focus{background:none !important;background-color:transparent !important;border:1px solid rgba(255,255,255,0.2) !important;border-radius:999px !important;color:rgba(255,255,255,0.7) !important;font-size:14px !important;font-weight:500 !important;text-transform:none !important;letter-spacing:normal !important;padding:11px 24px !important;box-shadow:none !important;}
.reviews-toggle-btn:hover{border-color:rgba(255,255,255,0.5) !important;color:#ffffff !important;}
.reviews-toggle-btn svg{fill:currentColor !important;}
/* Same theme-button reset for the mobile slider arrows */
.reviews-arrow,.reviews-arrow:hover,.reviews-arrow:focus{background:none !important;background-color:transparent !important;border:1px solid rgba(255,255,255,0.22) !important;border-radius:50% !important;color:rgba(255,255,255,0.85) !important;padding:0 !important;box-shadow:none !important;line-height:1 !important;}
.reviews-arrow:hover:not(:disabled){border-color:rgba(255,255,255,0.55) !important;color:#ffffff !important;}
.reviews-arrow svg{fill:none !important;stroke:currentColor !important;}

/* FAQ icon */
.faq-item .faq-icon{background:#c72b35 !important;background-color:#c72b35 !important;border:none !important;border-radius:50% !important;box-shadow:none !important;}
.faq-item .faq-icon svg{fill:#ffffff !important;}
/* .faq-contact-btn needs no overrides of its own: it is listed in the
   .atac-link-cta component below, which already carries !important on the
   properties Divi would otherwise set. */

/* Insights dots */
.insights-dot{background:#e0e0e0 !important;background-color:#e0e0e0 !important;border:none !important;border-radius:50% !important;box-shadow:none !important;padding:0 !important;}
.insights-dot.active{background:#c72b35 !important;background-color:#c72b35 !important;}
.insights .insights-arrow:disabled{opacity:0.25 !important;pointer-events:none !important;}
.insights .insights-arrow svg{fill:currentColor !important;}

/* Why owners expand buttons */
.wo-card .wo-expand-btn{background:rgba(199,43,53,0.12) !important;background-color:rgba(199,43,53,0.12) !important;border:1.5px solid rgba(199,43,53,0.5) !important;border-radius:50% !important;color:#c72b35 !important;box-shadow:none !important;}
.wo-card.open .wo-expand-btn{background:#c72b35 !important;background-color:#c72b35 !important;border-color:#c72b35 !important;color:#ffffff !important;}
.wo-card .wo-expand-btn svg{fill:currentColor !important;}


/* =========================================
   RESPONSIVE — 1100px
========================================= */

@media(max-width:1100px){
  .hero-inner{grid-template-columns:1fr 440px;gap:56px;padding:40px 32px 56px;}
  .hero-bg-img{display:none;}
  .form-card{max-width:520px;margin:0 auto;}
  .expertise-grid{grid-template-columns:1fr;gap:18px;}
  .expertise-inner{padding:0 32px;}
  .header-center{display:none;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .pain-inner{grid-template-columns:1fr;gap:48px;padding:0 32px;}
  .pain-image-wrap img{height:340px;}
  .benefit-grid{grid-template-columns:repeat(2,1fr);}
  .reviews-grid{grid-template-columns:repeat(2,1fr);}
  .steps-grid{grid-template-columns:1fr;max-width:480px;}
  .faq-inner{grid-template-columns:1fr;gap:40px;padding:0 32px;}
  .faq-left{position:static;}
  /* .reviews-inner is deliberately absent: it positions the .reviews-panel
     edge, which has to stay on --page-gutter so the panel lines up with the
     page content column (.lawyer-profile) and the panel sections around it.
     The 32px/20px insets here are for full-bleed bands' inner content. */
  .benefits-inner,.hiw-inner,.why-owners-inner,.final-cta-inner,.lawyers-header,.lawyers-head-line,.lawyers-track-wrap{padding:0 32px;}
  .insights-inner{padding:0 32px;}
  .insight-card{width:calc((100% - 20px) / 2);}
  .lawyer-card{width:calc((100vw - 64px - 20px) / 2);}
  .header-inner,.pain-inner{padding-left:32px;padding-right:32px;}
  .wo-card{width:calc((100% - 20px) / 2);}
  .lawyers-header,.lawyers-head-line,.lawyers-track-wrap{padding:0 32px;}
  .lawyer-arrow{width:52px;height:52px;}
  .lawyers-nav{left:32px;right:32px;}
  .video-logos{top:50%;left:32px;right:auto;bottom:auto;transform:translateY(-50%);}
  .video-logos-inner{gap:12px;}
  .video-logos-inner img{height:24px;}
  .lawyer-modal-header{grid-template-columns:220px 1fr;}
  .lawyer-modal-main{padding:32px 28px 30px;}
  .lawyer-modal-contact-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .cv-inner{padding:0 32px;}
  .cv-dark-card{padding:2rem 2.25rem;}
  .locations-grid{grid-template-columns:repeat(2,1fr) !important;}
  .why-owners-inner{padding:0 32px;}
  .wo-nav{left:-16px;right:-16px;}
}


/* =========================================
   RESPONSIVE — 700px
========================================= */

@media(max-width:700px){
  .cv-inner{padding:0 20px;}
  .cv-grid{grid-template-columns:1fr;gap:2rem;}
  .cv-body{font-size:15px !important;}
}


/* =========================================
   RESPONSIVE — 640px
========================================= */

@media(max-width:640px){
  :root{--header-h:62px;}
  .header-inner{padding:0 12px;gap:10px;}
  .header-questions{display:none;}
  .header-logo{flex:1 1 auto;min-width:0;}
  .header-logo img{height:26px;max-width:100%;object-fit:contain;}
  .header-right{flex-shrink:0;gap:0;}
  .phone-cta{padding:8px 12px;font-size:12px;gap:6px;white-space:normal;line-height:1.15;text-align:center;min-width:96px;justify-content:center;}
  .phone-cta svg{width:13px;height:13px;}
  .hero-inner{grid-template-columns:1fr !important;gap:32px !important;padding:32px 20px 48px !important;}
  .hero-bg-img{display:none !important;}
  .form-card{max-width:100% !important;width:100% !important;}
  /* .reviews-inner omitted here too — see the 1080px note. On phone widths
     --page-gutter already clamps to 20px, so this is a no-op in practice. */
  .benefits-inner,.hiw-inner,.final-cta-inner,.why-owners-inner,.expertise-inner{padding:0 20px;}
  .insights-inner{padding:0 20px;}
  .insight-card{width:calc(100vw - 40px);}
  .pain-inner,.faq-inner{padding:0 20px;}
  .video-logos{left:20px;top:50%;right:auto;bottom:auto;transform:translateY(-50%);}
  .video-logos-inner{align-items:flex-start;justify-content:center;gap:10px;flex-wrap:nowrap;}
  .video-logos-inner img{height:20px;}
  .benefit-grid,.reviews-grid{grid-template-columns:1fr;}
  /* REVIEWS — one-card slider. display:contents drops both grids (and the
     See More accordion, whose max-height/overflow stop applying) so every
     .review-card becomes a scroll-snap item of the single .reviews-track.
     Native swipe drives the scroller; .reviews-arrow buttons scroll it. */
  .reviews-panel{padding:28px 20px 30px;}
  /* No height transition: the JS sets an explicit px height per card and a
     transition here would leave the box mid-animation wherever transitions
     are suppressed. The slide itself is animated by the scroll. */
  .reviews-viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;}
  .reviews-viewport::-webkit-scrollbar{display:none;}
  /* flex-start (not stretch) keeps each card its natural height; the JS sets
     the viewport height to the active card so short reviews don't inherit the
     longest one's dead space. */
  .reviews-track{display:flex;align-items:flex-start;gap:14px;}
  .reviews-grid,.reviews-more,.reviews-grid-more{display:contents;}
  .reviews-track .review-card{flex:0 0 100%;min-width:0;min-height:0;scroll-snap-align:start;}
  .reviews-toggle-wrap{display:none;}
  .reviews-slider-nav{display:flex;}
  .lawyers-header,.lawyers-head-line,.lawyers-track-wrap{padding:0 20px;}
  .lawyer-card,.wo-card{width:calc(100vw - 40px);}
  .lawyer-card{cursor:pointer;}
  .lawyer-bio{opacity:1;pointer-events:auto;}
  .lawyer-modal{padding:16px;}
  .lawyer-modal-dialog{max-height:calc(100vh - 32px);}
  .lawyer-modal-header{grid-template-columns:1fr;}
  .lawyer-modal-image{display:none;}
  .lawyer-modal-main{padding:26px 20px 22px;}
  .lawyer-modal-top{padding-right:54px;flex-direction:column;align-items:flex-start;}
  .lawyer-modal-navs{align-self:flex-start;}
  .lawyer-modal-sections{background:var(--white);}
  .lawyer-accordion-trigger{padding:22px 20px;}
  .lawyer-accordion-body{padding:0 20px 24px;}
  .lawyer-accordion-copy.is-clamped{max-height:168px;overflow:hidden;}
  .lawyer-accordion-copy.is-expanded{max-height:none;}
  .lawyer-accordion-see-more.is-visible{display:inline-flex;align-items:center;justify-content:center;}
  .lawyers-nav{left:20px;right:20px;}
  .lawyer-arrow{width:48px;height:48px;}
  .lawyer-arrow svg{width:20px;height:20px;}
  .wo-nav{left:-12px;right:-12px;}
  .wo-arrow{width:40px;height:40px;}
  .wo-arrow svg{width:18px;height:18px;}
  .wo-track-wrap{-webkit-mask-image:none;mask-image:none;}
  .wo-card{width:calc(100vw - 40px);min-width:calc(100vw - 40px);max-width:calc(100vw - 40px);}
  .wo-card-body{max-height:none !important;}
  .insights-slider-wrap{position:relative;display:flex;align-items:center;gap:8px;}
  .insights-track-outer{flex:1;min-width:0;overflow:hidden;}
  .insights-arrow{position:static !important;flex-shrink:0;transform:none !important;top:auto !important;left:auto !important;right:auto !important;width:40px !important;height:40px !important;min-width:40px;}
  .insights-arrow-prev{order:-1;}
  .insights-arrow-next{order:1;}
  .insight-card{box-sizing:border-box;width:100% !important;overflow:hidden;}
  .insights-track{display:flex;}
  .lawyer-accordion-see-more{background:#c72b35 !important;background-color:#c72b35 !important;color:#ffffff !important;border:none !important;border-radius:5px !important;padding:12px 20px !important;font-size:14px !important;font-weight:700 !important;text-transform:none !important;letter-spacing:normal !important;box-shadow:none !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;margin-top:16px !important;width:auto !important;}
  .video-trust{padding-bottom:0 !important;}
  .locations-grid{grid-template-columns:1fr !important;}
}


/* =========================================
   RESPONSIVE — 480px
========================================= */

@media(max-width:480px){
  .lawyer-modal-name{font-size:34px;}
}


/* =====================================================================
   HOME PAGE (home-hero.html) — recovered from session history 2026-06-11.
   Originally moved out of the page <style> block on 2026-06-08; lost when
   the file was overwritten with an older copy.
   ===================================================================== */

    /* =========================================
       GENERAL TYPOGRAPHY — one source of truth for every section.
       Do NOT add per-section font rules. Headings inherit from here;
       only override COLOUR (e.g. on dark backgrounds via .on-dark).
    ========================================= */

    /* NOTE: selectors are prefixed with `html body` so they reach the
       same specificity (0,0,3) as the global rules in atac-custom.css
       (`html body span`, `html body h2`, …) and win by source order.
       Both the heading AND its inline spans get the IDENTICAL font, so
       an accent span can never render in a different font or weight. */
    html body h1, html body h1 *,
    html body h2, html body h2 *,
    html body h3, html body h3 *,
    html body h4, html body h4 * {
      font-family: 'Nimbus Sans', 'nimbus-sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
      font-style: normal !important;
    }
    html body h1 *, html body h2 *, html body h3 *, html body h4 * {
      font-weight: 800 !important;
    }

    html body h1 {
      font-weight: 800 !important;
      font-size: var(--h1-size) !important;   /* single h1 standard — see --h1-size */
      line-height: 1.12 !important;
      letter-spacing: -1px !important;
      color: var(--navy);
    }
    html body h2 {
      font-weight: 800 !important;
      font-size: clamp(28px, 3.2vw, 46px) !important;
      line-height: 1.15 !important;
      letter-spacing: -0.5px !important;
      color: var(--navy);
    }
    html body h3 {
      font-weight: 800 !important;
      font-size: clamp(20px, 1.8vw, 26px) !important;
      line-height: 1.2 !important;
      letter-spacing: -0.3px !important;
      color: var(--navy);
    }

    /* red accent inside any heading — reusable everywhere */
    html body .red { color: var(--red) !important; }

    /* dark-background sections: flip text to white, keep the red accent */
    .on-dark h1, .on-dark h2, .on-dark h3 { color: #ffffff; }
    .on-dark p { color: rgba(255, 255, 255, 0.82); }

    /* =========================================
       HOME HERO
    ========================================= */

    /* Divi/Elementor wrap the home-hero in a Section + Row that carry a
       default top padding (~54px). Neutralize it so the hero sits flush
       at the very top of the page (the home page has no header). */
    .et_pb_section:has(.home-hero),
    .et_pb_row:has(.home-hero),
    .elementor-section:has(.home-hero) {
      padding-top: 0 !important;
      margin-top: 0 !important;
    }

    /* HEADER STRATEGY (and the 76px-gap fix):
       Divi runs a fixed site header (body.et_fixed_nav) that reserves
       header-height padding on #page-container. The custom ATAC header
       (`.atac-header`) is now auto-injected on EVERY page, so on every page
       we hide Divi's native header and drop its reserved #page-container
       padding-top — otherwise that padding leaves a tall empty gap above the
       breadcrumb / content. (`.site-header` + `.home-hero` kept for safety.) */
    body:has(.atac-header) #main-header,
    body:has(.home-hero) #main-header,
    body:has(.site-header) #main-header { display: none !important; }
    body:has(.atac-header) #page-container,
    body:has(.home-hero) #page-container,
    body:has(.site-header) #page-container { padding-top: 0 !important; }

    /* Divi wraps custom Code-module sections in et_pb_section/row that carry a
       default ~54px top padding. Neutralize it for the Expertise accordion and
       the People/Team directory so the breadcrumb + content sit right under the
       header — each section supplies its own controlled top spacing. */
    .et_pb_section:has(.atac-pa),
    .et_pb_row:has(.atac-pa),
    .et_pb_section:has(.atac-people-wrap),
    .et_pb_row:has(.atac-people-wrap) { padding-top: 0 !important; }

    .home-hero {
      display: flex;
      /* standard hero height — not full-screen on large monitors */
      min-height: clamp(540px, 70vh, 700px);
      /* No padding-top: the site header was removed, so the hero starts
         flush at the top. (Re-add `padding-top: var(--header-h)` only if a
         fixed header comes back.) */
      overflow: hidden;
      position: relative;
      background: #ffffff;          /* white shows behind the blade */
    }

    /* LEFT PANEL */
    .home-hero-left {
      flex: 0 0 50%;
      background: transparent;       /* let section white + blade show through */
      display: flex;
      align-items: center;
      padding: clamp(48px, 6vw, 96px) var(--page-gutter);
      position: relative;
      z-index: 2;                    /* text sits above the blade */
    }

    .home-hero-left-inner {
      max-width: 560px;
    }

    /* h1 font/size/colour come from the general typography block */
    .home-hero-left h1 { margin-bottom: 24px; }

    .home-hero-left p {
      font-size: clamp(15px, 1.2vw, 18px);
      color: var(--text-body);
      line-height: 1.75;
      font-weight: 400;
      margin-bottom: 40px;
      max-width: 460px;
    }

    .home-hero-ctas {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }

    /* RIGHT PANEL — video on top, with a smooth curved bottom-left
       corner. The red blade behind shows through this curve. */
    .home-hero-right {
      flex: 0 0 50%;
      position: relative;
      overflow: hidden;
      background: var(--navy-deep);
      z-index: 3;                              /* video sits above the blade */
      border-bottom-left-radius: 38% 62%;      /* horizontal / vertical radius */
    }

    /* YouTube iframe fills the panel */
    .home-hero-video-wrap {
      position: absolute;
      inset: -60px;
      z-index: 0;
    }

    /* CSS-only "cover": the wrap is a size container, so cqw/cqh units
       let the iframe compute a true 16:9 box that is at least as wide
       AND as tall as the wrap, centered — overflow is cropped by the
       panel, so the video never letterboxes at any screen size. */
    .home-hero-video-wrap {
      container-type: size;
    }

    /* Divi's FitVids JS wraps the iframe in .fluid-width-video-wrapper
       (a 16:9 padding box) at runtime — that wrapper, not our wrap,
       becomes the iframe's containing block and letterboxes the video.
       Force the wrapper to exactly fill the wrap so it has no say. */
    #heroVideoWrap .fluid-width-video-wrapper {
      position: absolute !important;
      inset: 0 !important;
      padding: 0 !important;
      width: 100% !important;
      height: 100% !important;
    }

    /* !important + id selector: Divi applies its own higher-specificity
       width/height/max-width to iframes, which clamps the video back to
       the wrap box and letterboxes it. */
    .home-hero-video-wrap iframe,
    #heroVideoWrap iframe {
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
      width:  max(100cqw, calc(100cqh * 16 / 9)) !important;
      height: max(100cqh, calc(100cqw * 9 / 16)) !important;
      max-width: none !important;
      max-height: none !important;
      border: none;
      pointer-events: none;
    }

    /* Poster image for the YouTube facade — same "cover" math and the same
       stacking as the iframe so the deferred video swaps in identically.
       NOTE: the overlay and the curve <img> are SIBLINGS of
       .home-hero-video-wrap (overlay inside .home-hero-right, curve a direct
       child of .home-hero) — never nest them in the wrap: it is a
       container-type:size containing block and breaks their positioning. */
    .home-hero-poster {
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
      width:  max(100cqw, calc(100cqh * 16 / 9)) !important;
      height: max(100cqh, calc(100cqw * 9 / 16)) !important;
      max-width: none !important;
      max-height: none !important;
      object-fit: cover;
      border: none;
      pointer-events: none;
    }

    /* Overlay kept for stacking/structure but no longer tints the video —
       the footage shows through clean (was rgba(35,44,57,.28)). */
    .home-hero-overlay {
      position: absolute;
      inset: 0;
      background: transparent;
      z-index: 1;
      pointer-events: none;
    }

    /* Red blade SVG — sits BEHIND the video (lower z-index), straddling
       the seam: its apex lands on the panel edge and its body sweeps
       down-left across the white panel while its curved right side nests
       into the video's rounded corner. This overlap is the intended look
       (see preview/home-hero.html in the design project) — don't clip it. */
    .home-hero-curve {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-66%);
      /* capped so it stays proportional to the standard hero height */
      height: clamp(300px, 52vh, 440px);
      width: auto;
      z-index: 1;                 /* behind the video (z-index 3) */
      display: block;
      pointer-events: none;
    }

    /* The blade's leftward sweep is sized from the viewport HEIGHT while the
       white panel it sweeps into is 50% of the viewport WIDTH. Below ~1400px
       the panel narrows faster than the blade shrinks, so its tip lands on the
       body copy and the CTA row — navy text on red, unreadable. Scale the blade
       from the WIDTH here and ease the pull back in two steps, so the sweep
       survives but always stops short of the text. Measured clearance between
       the copy and the first red pixel: 97px at 1600px (the look being matched),
       90px at 1280, 51px at 1180, 59px at 1024, 115px at 834. */
    @media (min-width: 1101px) and (max-width: 1400px) {
      .home-hero-curve {
        height: clamp(240px, 26vw, 360px);
        transform: translateX(-36%);
      }
    }

    @media (min-width: 769px) and (max-width: 1100px) {
      .home-hero-curve {
        height: clamp(200px, 24vw, 320px);
        transform: translateX(-22%);
      }
    }

    /* =========================================
       MOBILE
    ========================================= */

    @media (max-width: 768px) {
      .home-hero {
        flex-direction: column;
        min-height: auto;
      }

      .home-hero-left {
        flex: none;
        padding: 52px 28px 48px;
      }

      .home-hero-left-inner {
        max-width: 100%;
      }

      .home-hero-right {
        flex: none;
        height: 70vw;
        min-height: 320px;
        /* smooth curved bottom-left corner on mobile too */
        border-bottom-left-radius: 42% 40%;
      }

      .home-hero-video-wrap {
        inset: -20px;
      }

      /* Blade peeks through the curved corner at the bottom-left */
      .home-hero-curve {
        bottom: 0;
        left: 0;
        transform: translateX(-18%);
        height: clamp(150px, 44vw, 260px);
      }

      .home-hero-ctas {
        flex-direction: column;
        align-items: flex-start;
      }

      .home-hero-ctas .atac-red-btn,
      .home-hero-ctas .phone-cta {
        width: 100%;
        justify-content: center;
      }
    }

    /* =========================================
       STATS + STATEMENT
    ========================================= */

    .home-stats {
      background: #ffffff;
      padding: clamp(64px, 8vw, 120px) 0 clamp(28px, 3.5vw, 48px);
    }

    .home-stats-inner {
      padding: 0 var(--page-gutter);
    }

    .home-stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }

    /* each column has a thin divider on its right; grid stretches
       all cells to equal height so the dividers line up */
    .home-stat {
      border-right: 1px solid var(--gray-mid);
      padding: 0 clamp(20px, 2.4vw, 44px) 12px;
    }
    .home-stat:last-child { border-right: none; }

    /* staggered vertical offsets */
    .home-stat:nth-child(1) { padding-top: 8px; }
    .home-stat:nth-child(2) { padding-top: 76px; }
    .home-stat:nth-child(3) { padding-top: 140px; }
    .home-stat:nth-child(4) { padding-top: 108px; }

    .home-stat-label {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: clamp(22px, 3vw, 40px);
    }

    .home-stat-num {
      font-family: 'Nimbus Sans', 'nimbus-sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-weight: 800;
      font-size: clamp(42px, 4.6vw, 74px);
      line-height: 1;
      letter-spacing: -2px;
      color: var(--navy);
      margin-bottom: clamp(20px, 2.6vw, 36px);
    }

    .home-stat-desc {
      font-size: clamp(14px, 1vw, 16px);
      color: var(--text-body);
      line-height: 1.5;
    }

    /* statement block */
    .home-statement {
      max-width: 760px;
      margin: clamp(80px, 10vw, 150px) auto 0;
      padding: 0 24px;
      text-align: center;
    }

    /* h2 + .red come from the general typography block */
    .home-statement h2 { margin-bottom: clamp(18px, 2.2vw, 28px); }

    .home-statement p {
      font-size: clamp(15px, 1.2vw, 18px);
      line-height: 1.8;
      color: var(--text-body);
      margin-bottom: clamp(28px, 3.4vw, 40px);
    }

    @media (max-width: 768px) {
      .home-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
      }
      .home-stat {
        position: relative;
        border-right: none;                 /* divider drawn as inset line below */
        padding-top: 40px !important;
        min-height: 200px;
      }
      /* vertical divider on the left column, inset top & bottom so it keeps an
         equal gap above and below where it crosses the row divider */
      .home-stat:nth-child(odd)::after {
        content: '';
        position: absolute;
        top: 18px;
        bottom: 18px;
        right: 0;
        width: 1px;
        background: var(--gray-mid);
      }
      .home-stat:nth-child(3),
      .home-stat:nth-child(4) {
        border-top: 1px solid var(--gray-mid);
        padding-top: 40px !important;
      }
    }

    /* =========================================
       PRACTICE AREAS — sticky scroll highlight
    ========================================= */

    .practice { background: #ffffff; }

    .practice-track { position: relative; }
    .practice-sticky { position: relative; }

    .practice-inner {
      width: 100%;
      padding: 0 var(--page-gutter);
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: clamp(40px, 6vw, 110px);
      align-items: start;
    }

    /* LEFT column freezes (pins) while the right column scrolls past.
       Top-aligned (with a small offset) so the heading lines up with
       the first list item instead of sinking to the middle.

       NO height here on purpose. A sticky element can only travel
       (grid area height - its own height), so a 100vh box burned a whole
       viewport of that budget: the heading unpinned after ~340px of a
       1188px list and was off screen for the last ~380px, leaving the
       column blank beside the final practice areas. Content height keeps
       it pinned to the end of the list. The padding-top (not `top`) sets
       the offset, so the pinned position is unchanged. */
    .practice-left {
      position: sticky;
      /* Pinned at the MIDDLE of the screen. `top` positions the box, but its
         top ~110px is the padding that lines the heading up with the first
         list item while the column is still static — centring the BOX would
         leave the visible text low. So the offset is half the visible block
         (heading + paragraph + CTA) plus that padding: measured 1280→228,
         1440→258, 1920→258. max(0px, …) keeps it sane on short viewports. */
      top: max(0px, calc(50vh - clamp(225px, 18vw, 258px)));
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding-top: clamp(56px, 8vw, 110px);
    }

    /* h2 + .red come from the general typography block */
    .practice-left h2 { margin-bottom: clamp(20px, 2.4vw, 30px); }

    .practice-left p {
      font-size: clamp(15px, 1.15vw, 17px);
      line-height: 1.8;
      color: var(--text-body);
      max-width: 460px;
    }

    .practice-left-btn { margin-top: clamp(28px, 3vw, 40px); }

    /* RIGHT column scrolls; items are spaced out so each one passes
       the viewport centre on its own and highlights in turn */
    .practice-list {
      display: flex;
      flex-direction: column;
      /* Hoisted into a custom property so the divider below can centre itself
         in the gap without the two values drifting apart. */
      --pa-gap: clamp(70px, 13vh, 150px);
      gap: var(--pa-gap);
      /* Top offset matches the left heading. NO bottom lead-out, and that is
         load-bearing: a sticky box unpins when its bottom reaches the bottom
         of its containing block, so with the list ending at the last item the
         column lets go exactly as the two "View Our Expertise" CTAs line up.

         The arithmetic, measured identically at 796 / 1440 / 1920: the left
         CTA's centre sits 13px above the column's bottom edge, item 04's CTA
         centre sits 15px above the item's bottom edge, so the two coincide
         within 2px the moment those bottoms meet. Any padding here pushes the
         release that far past the alignment. The pin offset above cancels out
         of both sides, so centring the pin does not change this. */
      padding: clamp(56px, 8vw, 110px) 0 0;
    }

    .pa-item {
      position: relative;
      display: grid;
      grid-template-columns: 38px minmax(130px, 180px) 1fr;
      gap: 0 22px;
      align-items: start;
      padding-left: 26px;
      text-decoration: none;        /* it's an <a> now */
      color: inherit;
      cursor: pointer;
    }

    /* Divider between items — furniture, not a state indicator.
       The red rail that used to sit here (a 3px bar on the left edge, faded
       and scaled in on .active/:hover) is gone by request. The highlight is
       unchanged: it is carried entirely by the colour transitions on
       .pa-num / .pa-title / .pa-desc and the CTA reveal further down.

       On every item after the first, pulled up by half the flex gap so the
       line lands in the middle of the space between two items instead of
       clinging to the top of one. left/right:0 spans the item's whole box,
       the 26px padding included, so it runs the full width of the column.
       No transition and no hover state: it looks the same at all times. */
    .pa-item + .pa-item::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: calc(var(--pa-gap) / -2);
      height: 1px;
      background: var(--gray-mid);
    }

    .pa-num {
      font-weight: 700;
      font-size: clamp(15px, 1.1vw, 18px);
      color: #c4c9ce;
      transition: color .45s ease;
    }
    .pa-title {
      font-family: 'Nimbus Sans', 'nimbus-sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
      font-weight: 800 !important;
      font-size: clamp(17px, 1.4vw, 22px);
      line-height: 1.25;
      color: #c4c9ce;
      transition: color .45s ease;
    }
    .pa-desc {
      font-size: clamp(13px, 1vw, 15.5px);
      line-height: 1.6;
      color: #c8cdd2;
      transition: color .45s ease;
      max-width: 420px;
    }

    /* active (scroll) OR hover both light the item up so it's clearly clickable */
    .pa-item.active .pa-num,   .pa-item:hover .pa-num   { color: var(--navy); }
    .pa-item.active .pa-title, .pa-item:hover .pa-title { color: var(--navy); }
    .pa-item.active .pa-desc,  .pa-item:hover .pa-desc  { color: var(--text-body); }

    /* branded "Check {area}" link — slides/fades in on the active or hovered item */
    .pa-cta {
      grid-column: 2 / -1;          /* sit under the title + description */
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      margin-top: 0;
      font-family: 'Nimbus Sans', 'nimbus-sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-weight: 700;
      font-size: clamp(13px, 1vw, 15px);
      letter-spacing: 0.3px;
      color: var(--red);
      opacity: 0;
      max-height: 0;
      transform: translateY(-6px);
      overflow: hidden;
      transition: opacity .4s ease, transform .4s ease, max-height .4s ease, margin-top .4s ease;
    }
    .pa-item.active .pa-cta,
    .pa-item:hover .pa-cta {
      opacity: 1;
      max-height: 48px;
      margin-top: 14px;
      transform: translateY(0);
    }
    .pa-cta svg {
      width: 16px;
      height: 16px;
      fill: currentColor;
      transition: transform .3s ease;
    }
    .pa-item:hover .pa-cta svg { transform: translateX(4px); }

    /* "Show N more practice areas" expander — items past the limit are
       rendered with [hidden] and revealed by the button (atac-custom.js). */
    .pa-item[hidden] { display: none !important; }
    .pa-more {
      align-self: flex-start;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-left: 26px;              /* aligns with .pa-item padding-left */
      padding: 14px 26px;
      background: transparent;
      border: 1px solid var(--gray-mid);
      border-radius: var(--radius);
      font-family: var(--font);
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.01em;
      color: var(--navy);
      cursor: pointer;
      transition: border-color .25s ease, color .25s ease, background .25s ease;
    }
    .pa-more:hover,
    .pa-more:focus-visible {
      border-color: var(--red);
      color: var(--red);
    }
    .pa-more:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
    .pa-more svg {
      width: 18px;
      height: 18px;
      fill: currentColor;
      transition: transform .25s ease;
    }
    .pa-more:hover svg { transform: translateY(3px); }

    /* TABLET AND DOWN — drop the sticky/scroll highlight and stack: heading,
       intro and button first, then the list underneath at full width, all left
       aligned. Above this the two-up grid squeezes .pa-desc to ~230px (one word
       per line at 1180px). 1200px matches the header's own tablet breakpoint,
       so the burger nav and this layout switch together. */
    @media (max-width: 1200px) {
      .practice-sticky { padding: clamp(56px, 12vw, 80px) 0; }
      .practice-inner {
        grid-template-columns: 1fr;
        gap: 40px;
        align-items: start;
      }
      .practice-left {
        position: static;
        height: auto;
        display: block;
      }
      .practice-left p { max-width: min(100%, 720px); }
      .practice-list { padding: 0; --pa-gap: 32px; gap: var(--pa-gap); }
      .pa-item {
        grid-template-columns: 32px 1fr;
        gap: 4px 16px;
      }
      .pa-item .pa-desc { grid-column: 1 / -1; margin-top: 6px; max-width: min(100%, 760px); }
      /* on mobile every item is readable (full colour) */
      .pa-num   { color: var(--navy); }
      .pa-title { color: var(--navy); }
      .pa-desc  { color: var(--text-body); }
      /* The vertical rail is gone here too, so there is nothing left to
         recolour for the active item; the divider inherited from the base
         rule needs no narrow-screen adjustment beyond the smaller --pa-gap. */
      /* CTA always shown on mobile (no hover) */
      .pa-cta {
        grid-column: 1 / -1;
        opacity: 1;
        max-height: 48px;
        margin-top: 12px;
        transform: none;
      }
    }

    /* tighten the gap before the lawyers section (it inherits the big
       global --section-pad on top) */
    .lawyers { padding-top: clamp(40px, 5vw, 72px); }

/* phone button — navy variant (was an inline style attribute) */
.phone-cta.phone-cta--navy { background: var(--navy); }


/* =====================================================================
   KNOWLEDGE — blog grid (dynamic [atac_knowledge] shortcode)
   ===================================================================== */
.knowledge{padding:var(--section-pad) 0;background:var(--gray);}
.knowledge-inner{padding:0 var(--page-gutter);}
.knowledge .knowledge-head h2{margin-bottom:40px;}
.knowledge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
/* carousel mode (lawyer-style overlaid arrows + sliding track) */
.knowledge-track-wrap{position:relative;padding:0 72px;}
.knowledge-nav{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);z-index:20;display:flex;align-items:center;justify-content:space-between;pointer-events:none;}
.knowledge-track-outer{overflow:hidden;}
.knowledge-track{display:flex;gap:30px;transition:transform .5s cubic-bezier(.4,0,.2,1);}
.knowledge-track .know-card{flex-shrink:0;width:calc((100% - 60px) / 3);}
/* MOBILE — must come AFTER the base .know-card width rule above: same
   specificity, so source order decides which one wins on small screens. */
@media (max-width: 768px){
  .knowledge-track-wrap{padding:0;display:flex;flex-direction:column;}
  .knowledge-track-outer{order:1;}
  .knowledge-nav{position:static;transform:none;justify-content:center;gap:16px;margin-top:20px;order:2;}
  .knowledge-track .know-card{width:100%;}
}
.knowledge .lawyer-arrow:disabled{opacity:0.4;cursor:default;pointer-events:none;}
.know-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--gray-mid);border-radius:10px;overflow:hidden;box-shadow:0 2px 16px rgba(35,44,57,0.06);transition:box-shadow .3s,transform .3s;}
.know-card:hover{box-shadow:0 12px 36px rgba(35,44,57,0.12);transform:translateY(-4px);}
.know-card-thumb{display:block;width:100%;aspect-ratio:16/10;overflow:hidden;background:var(--gray-mid);}
.know-card-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.know-card:hover .know-card-thumb img{transform:scale(1.04);}
.know-card-body{display:flex;flex-direction:column;flex:1;padding:24px 26px 26px;}
.know-card-meta{display:flex;align-items:center;gap:14px;margin-bottom:14px;font-size:13px;}
.know-card-cat{color:var(--red);font-weight:700;}
.know-card-date{color:var(--text-muted);font-weight:500;}
.know-card-title{margin:0 0 12px;}
.know-card-title a{color:var(--navy);text-decoration:none;}
.know-card-title a:hover{color:var(--red);}
.know-card h4.know-card-title{font-size:19px;line-height:1.3;}
.know-card-excerpt{font-size:14px;line-height:1.75;color:var(--text-body);flex:1;margin:0 0 20px;}
/* .know-card-more carries .atac-link-cta — nothing to declare here. */
.know-card:hover .know-card-more::after{transform:scaleX(.8);}
.knowledge-footer{display:flex;justify-content:center;margin-top:48px;}
.cases-footer,.insights-footer{display:flex;justify-content:center;margin-top:44px;}
@media(max-width:900px){.knowledge-grid{grid-template-columns:repeat(2,1fr);gap:24px;}}
@media(max-width:600px){.knowledge-grid{grid-template-columns:1fr;}}


/* =====================================================================
   ABOUT PAGE (about.html) — editorial layout adapted from a Dribbble
   reference (BeachPoint). Same ATAC branding: navy / red / Nimbus.
   All selectors are scoped with `.about-` so nothing collides with the
   landing-page or home-page sections. Shares .site-header, .atac-red-btn
   and the .lawyers showcase carousel.
   ===================================================================== */

/* ---------- shared bits ---------- */
.about-eyebrow{
  display:inline-flex;align-items:center;
  font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--red);font-family:var(--font);
}
.about-eyebrow.on-dark{color:#fff;}

.about-textlink{
  display:inline-flex;align-items:center;gap:8px;position:relative;
  font-family:var(--font);font-size:14px;font-weight:700;letter-spacing:.3px;
  color:var(--navy);padding-bottom:6px;
}
.about-textlink::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--red);transform:scaleX(.5);transform-origin:left;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.about-textlink:hover{color:var(--red);}
.about-textlink:hover::after{transform:scaleX(.8);}
.about-textlink svg{width:15px;height:15px;fill:currentColor;transition:transform .3s ease;}
.about-textlink:hover svg{transform:translateX(4px);}
.about-textlink.on-dark{color:#fff;}
.about-textlink.on-dark:hover{color:rgba(255,255,255,.7);}


/* =========================================================
   TEXT-LINK CTA  —  "Our practice areas →" hover treatment
   ---------------------------------------------------------
   Generalised from .about-textlink so any non-contact CTA can
   share the same look: full-width red underline that retracts
   to 40% on hover, chevron that slides, subtle colour shift.

     • .atac-link-cta           → LIGHT backgrounds (navy text)
     • .atac-link-cta.on-dark   → DARK  backgrounds (white text)

   The block below ALSO re-skins the existing solid .atac-red-btn
   navigation buttons (Learn More About Us, Check Our Expertise
   Areas, Meet Our Lawyers, All Knowledge) + the .pa-cta practice
   links into this style — WITHOUT touching their markup.
   Contact / call CTAs are deliberately NOT listed here, so they
   keep the solid red button (Get a Free Assessment, Work With Us,
   Contact Our Team, Book a Consultation, Contact Now, tel: links).
========================================================= */

/* ---- reusable base (LIGHT background) ---- */
.atac-link-cta,
.atac-mega-card,
.faq-contact-btn,
.home-statement .atac-red-btn,
.atac-red-btn.practice-left-btn,
.lawyers-intro .atac-red-btn,
.knowledge-footer .atac-red-btn{
  display:inline-flex !important;
  align-items:center;
  justify-content:flex-start !important;
  gap:8px;
  position:relative;
  width:fit-content;
  font-family:var(--font) !important;
  font-size:16px !important;
  font-weight:700 !important;
  letter-spacing:.3px;
  line-height:1.2 !important;
  color:var(--navy) !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 0 6px !important;
  cursor:pointer;
  text-decoration:none !important;
  transition:color .3s ease !important;
}

/* underline — full width by default, retracts to 40% on hover */
.atac-link-cta::after,
.atac-mega-card::after,
.faq-contact-btn::after,
.home-statement .atac-red-btn::after,
.atac-red-btn.practice-left-btn::after,
.lawyers-intro .atac-red-btn::after,
.knowledge-footer .atac-red-btn::after{
  content:'';
  position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--red);
  transform:scaleX(.5);transform-origin:left;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}

.atac-link-cta:hover,
.atac-mega-card:hover,
.faq-contact-btn:hover,
.home-statement .atac-red-btn:hover,
.atac-red-btn.practice-left-btn:hover,
.lawyers-intro .atac-red-btn:hover,
.knowledge-footer .atac-red-btn:hover{
  color:var(--red) !important;
  background:transparent !important;
  transform:none !important;
}
.atac-link-cta:hover::after,
.atac-mega-card:hover::after,
.faq-contact-btn:hover::after,
.home-statement .atac-red-btn:hover::after,
.atac-red-btn.practice-left-btn:hover::after,
.lawyers-intro .atac-red-btn:hover::after,
.knowledge-footer .atac-red-btn:hover::after{transform:scaleX(.8);}

/* chevron — drawn with a CSS mask so it inherits the text colour.
   Added only to buttons that have NO literal arrow in their markup
   (so it never doubles up with an existing "→"). */
.atac-link-cta::before,
.atac-mega-card::before,
.home-statement .atac-red-btn::before,
.atac-red-btn.practice-left-btn::before,
.knowledge-footer .atac-red-btn::before{
  content:'';
  order:1;                       /* sit after the text in the flex row */
  width:15px;height:15px;flex:0 0 auto;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .3s ease;
}
.atac-link-cta:hover::before,
.atac-mega-card:hover::before,
.home-statement .atac-red-btn:hover::before,
.atac-red-btn.practice-left-btn:hover::before,
.knowledge-footer .atac-red-btn:hover::before{transform:translateX(4px);}

/* Submenu cards reuse the .atac-link-cta look above. They normally hold a
   title + description in a column; the link-cta base makes them an inline
   flex row, so hide the description and drop the title's box styling so each
   item renders as the clean underlined text-link with a sliding chevron. */
.atac-mega-card .atac-mega-card-desc{ display:none; }
.atac-mega-card .atac-mega-card-title{
  display:inline;
  margin:0;
  font-size:15px;
}

/* ---- DARK-background variant ---- */
.atac-link-cta.on-dark{color:#fff !important;}
.atac-link-cta.on-dark:hover{color:rgba(255,255,255,.7) !important;}

/* ---- .pa-cta practice links: already have a sliding chevron +
   reveal animation, so just ADD the retracting underline.
   The link only appears on item hover/active, so it reveals with
   a FULL underline (the liked "rest" look) and retracts to 40%
   only when you hover the link itself. ---- */
.pa-cta{position:relative;padding-bottom:6px;}
.pa-cta::after{
  content:'';
  position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--red);
  transform:scaleX(.5);transform-origin:left;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.pa-cta:hover::after{transform:scaleX(.8);}


/* ---------- HERO ---------- */
.about-hero{
  /* height + vertical centring mirror .home-hero, so the copy sits mid-hero
     instead of being pinned to the bottom of an 80vh box (which left a tall
     empty gap above the headline on narrow and short screens) */
  position:relative;min-height:clamp(540px,70vh,700px);display:flex;flex-direction:column;
  justify-content:center;overflow:hidden;background:#fff;
  padding-top:0;
}
/* Photo fitted exactly like the landing-page hero (.hero-bg-img, above): the
   image occupies the right 48%, mirrored, dissolving leftwards into the page.
   Same geometry, same gradient stops (0 / 25 / 45 / 100%) and the same navy
   veil; only the fade colour differs, white here instead of --gray, to match
   this hero's white background. The mirror sits on the container because the
   parallax script owns the img's transform and would overwrite it. */
.about-hero-bg{position:absolute;right:0;top:0;bottom:0;left:auto;width:48%;z-index:0;overflow:hidden;transform:scaleX(-1);}
/* Seam cover. The image block and its wash are mirrored (scaleX(-1)) and get
   rasterised separately, so at some widths the photo's left edge shows as a
   1px vertical line. The block's own overflow:hidden clips any overlap from
   inside, so the patch lives here on the hero: a 4px white strip straddling
   the 52% boundary, above the image (z-index 0) and below the copy (2).
   Invisible — everything it covers is already white. */
.about-hero::before{
  content:'';position:absolute;top:0;bottom:0;right:calc(48% - 2px);
  width:4px;background:#fff;z-index:1;pointer-events:none;
}
@media (max-width:980px){ .about-hero::before{display:none;} }
/* base scale gives the JS parallax headroom (and avoids gaps if JS fails) */
.about-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.32);will-change:transform;}
.about-hero-bg::after{
  content:'';position:absolute;inset:0;transform:scaleX(-1);   /* un-mirror the wash */
  background:
    /* 1. left-to-right dissolve; clears fully by 85% so the right side of the
          photo reads at full strength rather than staying half-washed */
    linear-gradient(90deg,#fff 0%,rgba(255,255,255,.9) 20%,rgba(255,255,255,.45) 40%,rgba(255,255,255,.08) 68%,rgba(255,255,255,0) 85%),
    /* 2. top and bottom feather so the photo melts into the white above and
          below instead of ending on a hard horizontal cut */
    linear-gradient(180deg,#fff 0%,rgba(255,255,255,.6) 5%,rgba(255,255,255,0) 16%,rgba(255,255,255,0) 80%,rgba(255,255,255,.6) 94%,#fff 100%),
    /* 3. navy veil, lighter than the landing page's .38 to keep the image open */
    linear-gradient(rgba(35,44,57,.22),rgba(35,44,57,.22));
}
/* Tablet/mobile: the 48% column would sit under the copy, so the photo goes
   full width behind a heavier wash, exactly as the landing page drops its own. */
@media (max-width:980px){
  .about-hero-bg{width:100%;}
  .about-hero-bg::after{
    background:
      linear-gradient(180deg,#fff 0%,rgba(255,255,255,.72) 12%,rgba(255,255,255,.55) 48%,rgba(255,255,255,.75) 88%,#fff 100%),
      linear-gradient(rgba(35,44,57,.16),rgba(35,44,57,.16));
  }
}
.about-hero-inner{
  position:relative;z-index:2;width:100%;
  padding:var(--hero-gap-top) var(--page-gutter) clamp(36px,4vw,56px);
}
.about-hero h1{
  color:var(--navy) !important;max-width:28ch;   /* wide enough for the two <br>-split lines to each stay on one line */
  font-size:var(--h1-size) !important;   /* single h1 standard — see --h1-size */
  /* line-height matches the site h1 standard (html body h1: 1.12), so this
     title sets the same as the home-page hero instead of tighter at 1.02 */
  font-weight:800 !important;line-height:1.12 !important;letter-spacing:-2px !important;
  margin-bottom:clamp(30px,4vw,52px);   /* was up to 80px — tightened with the centred layout */
}
.about-hero h1 .red{color:var(--red) !important;}
.about-hero-meta{
  display:grid;grid-template-columns:160px 1fr auto;gap:32px;align-items:start;
  padding-top:26px;   /* rule above the meta row removed by request */
}
.about-hero-meta-label{
  font-family:var(--font);font-size:13px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--navy);
}
.about-hero-meta-text{
  max-width:46ch;font-size:clamp(15px,1.2vw,18px);line-height:1.7;
  color:var(--text-body);font-weight:400;
}
.about-hero-meta-text .about-textlink{margin-top:18px;}
/* the markup carries .on-dark from the navy original; re-point it to navy here
   rather than editing the Divi page content */
.about-hero .about-textlink.on-dark{color:var(--navy);}
.about-hero .about-textlink.on-dark:hover{color:var(--red);}
/* "SCROLL" cue removed by request. Rules kept so it can be restored by
   flipping this back to inline-flex; the markup still ships it. */
.about-hero-scroll{
  display:none;align-items:center;gap:9px;
  font-family:var(--font);font-size:13px;font-weight:700;letter-spacing:1.5px;
  /* the only meta item sitting over the photo, and with the wash lightened the
     suit behind it is dark again: white, with a soft shadow to hold it */
  text-transform:uppercase;color:#fff;white-space:nowrap;
  text-shadow:0 1px 10px rgba(35,44,57,.6);
}
.about-hero-scroll svg{width:16px;height:16px;fill:currentColor;animation:aboutScrollBob 1.8s ease-in-out infinite;}
@keyframes aboutScrollBob{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}


/* ---------- BIG STATEMENT ---------- */
.about-statement{background:#fff;padding:clamp(72px,10vw,150px) var(--page-gutter);}
.about-statement-inner{max-width:1500px;margin:0 auto;}
.about-statement h2{
  max-width:20ch;
  font-size:clamp(30px,5vw,72px) !important;
  font-weight:800 !important;line-height:1.06 !important;letter-spacing:-1.5px !important;
  color:var(--navy) !important;
}
.about-statement h2 .red{color:var(--red) !important;}


/* ---------- MISSION (label + two columns) ---------- */
/* bottom padding mirrors .about-mission-inner's padding-top so the block sits
   evenly between its own hairline and the next section's. */
.about-mission{background:#fff;padding:0 var(--page-gutter) clamp(48px,6vw,80px);}
.about-mission-inner{
  /* full-width between the section's own page-gutter padding — matches
     .about-hero-inner / .lawyers-split so left AND right edges line up on
     wide viewports (a 1500px cap here left a lopsided gap on the right) */
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(32px,6vw,90px);align-items:start;
  padding-top:clamp(48px,6vw,80px);border-top:1px solid var(--gray-mid);
}
.about-mission-left h3{
  font-size:clamp(22px,2.4vw,34px) !important;font-weight:800 !important;
  line-height:1.15 !important;letter-spacing:-.5px !important;color:var(--navy) !important;
  margin-top:22px;max-width:16ch;
}
.about-mission-right p{
  font-weight:400;margin-bottom:26px;
}
.about-mission-right p:last-of-type{margin-bottom:34px;}
.about-mission-right .about-textlink{margin-top:0;}


/* ---------- ACCREDITATIONS (intro + infinite logo marquee) ---------- */
.about-accred{background:#fff;padding:0 var(--page-gutter) clamp(72px,9vw,130px);}
.about-accred-inner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(32px,6vw,90px);align-items:center;
  padding-top:clamp(48px,6vw,80px);border-top:1px solid var(--gray-mid);
}
.about-accred-left h3{
  font-size:clamp(22px,2.4vw,34px) !important;font-weight:800 !important;
  line-height:1.15 !important;letter-spacing:-.5px !important;color:var(--navy) !important;
  margin-top:22px;max-width:18ch;
}
.about-accred-left p{
  font-weight:400;margin-top:22px;margin-bottom:0;max-width:52ch;
}
.about-accred-right{min-width:0;}
.accred-marquee{
  position:relative;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
}
.accred-track{
  display:flex;width:max-content;
  animation:accredScroll 32s linear infinite;
}
.accred-marquee:hover .accred-track{animation-play-state:paused;}
.accred-group{display:flex;flex:0 0 auto;}
.accred-logo{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  padding:0 clamp(28px,4vw,64px);
}
.accred-logo img{
  height:clamp(48px,5vw,74px);width:auto;display:block;
  filter:grayscale(1);opacity:.55;
  transition:filter .35s ease,opacity .35s ease;
}
.accred-logo img:hover{filter:grayscale(0);opacity:1;}
@keyframes accredScroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media(prefers-reduced-motion:reduce){
  .accred-track{animation:none;flex-wrap:wrap;justify-content:center;gap:24px 0;}
}


/* ---------- HIGHLIGHTS (horizontal scroll marquee, scroll-driven) ---------- */
.about-stats{position:relative;background:var(--gray);}
.about-stats-sticky{
  position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden;
}
.about-stats-track{
  display:flex;align-items:stretch;will-change:transform;
  padding-left:var(--page-gutter);
}
.about-stat{
  flex:0 0 auto;width:min(46vw,640px);
  border-right:1px solid var(--gray-mid);
  padding:0 clamp(28px,4vw,72px);
  display:flex;flex-direction:column;justify-content:center;
}
.about-stat:last-child{border-right:none;padding-right:clamp(48px,8vw,140px);}
.about-stat-num{
  font-family:var(--font);font-weight:800;color:var(--navy);
  font-size:clamp(72px,13vw,200px);line-height:.9;letter-spacing:-4px;
  margin-bottom:clamp(20px,3vw,44px);
}
.about-stat-num .red{color:var(--red);}
.about-stat-label{
  font-family:var(--font);font-size:clamp(15px,1.4vw,22px);font-weight:700;
  color:var(--text-body);letter-spacing:-.2px;
}
.about-stats-progress{
  position:absolute;left:0;bottom:0;height:3px;width:100%;background:transparent;z-index:3;
}
.about-stats-progress span{display:block;height:100%;width:0;background:var(--red);}

/* ---------- LAWYER CARDS (About) ----------
   The About cards used to be name-only: the title was hidden and the overlay
   tightened around the name. They now read exactly like the home page's —
   name, suffix, title — so there is deliberately nothing to override here.
   The .lawyers--about class stays on the section for future use. */


/* ---------- IMAGE BAND ---------- */
.about-band{position:relative;width:100%;height:clamp(340px,52vw,640px);overflow:hidden;background:var(--navy);}
.about-band img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.about-band::after{content:'';position:absolute;inset:0;background:rgba(35,44,57,.18);}


/* ---------- SECOND STATEMENT (+ thumb) ---------- */
.about-statement2{background:#fff;padding:clamp(64px,9vw,130px) var(--page-gutter) clamp(48px,6vw,80px);}
.about-statement2-inner{
  max-width:1500px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) clamp(180px,18vw,300px);
  gap:clamp(32px,5vw,72px);align-items:start;
}
.about-statement2 h2{
  max-width:18ch;
  font-size:clamp(28px,4.4vw,64px) !important;font-weight:800 !important;
  line-height:1.08 !important;letter-spacing:-1.2px !important;color:var(--navy) !important;
}
.about-statement2 h2 .red{color:var(--red) !important;}
.about-statement2 .about-textlink{margin-top:34px;}
.about-statement2-thumb{
  width:100%;aspect-ratio:1/.82;border-radius:10px;overflow:hidden;
  box-shadow:0 16px 40px rgba(35,44,57,.16);align-self:start;
}
.about-statement2-thumb img{width:100%;height:100%;object-fit:cover;display:block;}


/* ---------- VALUES / PRACTICE LIST (01–06) ---------- */
.about-values{background:#fff;padding:clamp(48px,6vw,90px) var(--page-gutter) clamp(72px,10vw,150px);}
.about-values-inner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(32px,6vw,90px);align-items:start;
  padding-top:clamp(40px,5vw,70px);
}
.about-values-left h3{
  font-size:clamp(22px,2.4vw,34px) !important;font-weight:800 !important;
  line-height:1.15 !important;letter-spacing:-.5px !important;color:var(--navy) !important;
  margin-bottom:22px;max-width:18ch;
}
.about-values-left p{
  font-weight:400;max-width:48ch;margin-bottom:30px;
}
.about-values-list{display:flex;flex-direction:column;}
.about-value-row{
  display:grid;grid-template-columns:58px 1fr;align-items:start;gap:18px;
  padding:clamp(18px,2.1vw,26px) 0;border-top:1px solid var(--gray-mid);
  color:inherit;transition:padding-left .35s cubic-bezier(.4,0,.2,1);
}
.about-value-row:first-child{border-top:none;}
.about-value-row:last-child{border-bottom:1px solid var(--gray-mid);}
.about-value-num{font-family:var(--font);font-size:15px;font-weight:700;color:var(--text-muted);line-height:1.6;transition:color .3s;}
.about-value-copy{display:flex;flex-direction:column;gap:7px;}
.about-value-name{
  font-family:var(--font);font-size:clamp(18px,1.7vw,24px);font-weight:800;
  letter-spacing:-.4px;color:var(--navy);line-height:1.2;transition:color .3s;
}
.about-value-desc{
  font-size:clamp(13.5px,1.05vw,16px);line-height:1.65;color:var(--text-muted);font-weight:400;
}
.about-value-row:hover{padding-left:12px;}
.about-value-row:hover .about-value-num{color:var(--red);}
.about-value-row:hover .about-value-name{color:var(--red);}

/* ---------- VALUES — mirrored hero video card (left column) ----------
   A compact mirror of the home-hero design: video panel with a curved
   bottom-RIGHT corner (hero curves bottom-left), and the red brand blade
   nesting behind that curve, sweeping down-right into the column whitespace.
   Video is a self-hosted, pre-trimmed (28–42s) clip — loops itself,
   no JS needed. */
.values-media{
  position:relative;
  margin-top:clamp(34px,4vw,58px);
  width:100%;max-width:680px;
  padding:0;                           /* no bottom pad → blade and video share one baseline */
}
.values-media-panel{
  position:relative;z-index:2;overflow:hidden;
  width:88%;aspect-ratio:16/11;        /* leaves the right side for the blade */
  background:var(--navy);
  border-bottom-right-radius:46% 66%;  /* mirror of the hero bottom-left curve */
  box-shadow:0 22px 50px rgba(35,44,57,.24);
}
.values-media-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;
}
/* Red brand "A"-blade — the real curve-atac-law.svg, flipped horizontally
   (scaleX -1) so it mirrors the home-hero blade: sits behind the panel
   (z-index 1), nesting into the bottom-right curve and sweeping down-right. */
.values-media-blade{
  position:absolute;z-index:1;right:0;bottom:0;
  height:86%;width:auto;
  transform:scaleX(-1);
  pointer-events:none;
}

/* Purpose list (mission section) */
.about-purpose-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px;}
.about-purpose-list li{
  position:relative;padding-left:30px;font-weight:400;margin-bottom:0;
}
.about-purpose-list li::before{
  content:'';position:absolute;left:0;top:.7em;width:13px;height:2px;background:var(--red);border-radius:2px;
}


/* ---------- REFERRAL CTA (inset red card) ---------- */
/* outer = transparent track that gives the card breathing room L/R (and a little T/B) */
.about-refer{background:transparent;padding:clamp(20px,3vw,40px) var(--page-gutter);}
/* inner = the red card itself: rounded, width-capped, content padding lives here now */
.about-refer-inner{
  max-width:1500px;margin:0 auto;
  background:var(--red);
  border-radius:clamp(16px,2vw,28px);
  padding:clamp(44px,5vw,72px) clamp(28px,4vw,64px) clamp(64px,8vw,110px);
}
.about-refer-top{
  padding-bottom:18px;margin-bottom:clamp(44px,7vw,88px);
  border-bottom:1px solid rgba(255,255,255,.35);
}
.about-refer-label{
  font-family:var(--font);font-size:14px;font-weight:500;letter-spacing:.2px;
  color:rgba(255,255,255,.92);
}
.about-refer h2{
  max-width:16ch;
  font-size:clamp(38px,5.6vw,84px) !important;font-weight:800 !important;
  line-height:1.02 !important;letter-spacing:-2px !important;color:#fff !important;
  margin-bottom:clamp(20px,2.4vw,30px);
}
.about-refer p{
  max-width:62ch;
  color:rgba(255,255,255,.9); /* navy background — keeps the light-on-dark colour */
  font-weight:400;margin-bottom:clamp(28px,3.4vw,40px);
}
.about-refer-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 30px;background:#fff;color:var(--red);
  font-family:var(--font);font-size:15px;font-weight:700;border-radius:5px;
  transition:background .25s,color .25s,transform .25s;
}
.about-refer-btn:hover{background:var(--navy);color:#fff;transform:translateY(-2px);}


/* ---------- FOLDING / STACKING SCROLL ----------
   Each panel sticky-pins at the top; the next panel scrolls up and folds
   over it (like the reference video). Solid backgrounds + rising z-index
   make each one fully cover the panel beneath. The stats panel keeps its
   own internal horizontal pin, so it stays position:relative. */
.about-fold{position:sticky;top:0;}

/* full-screen panels so each fold fully covers the previous */
.about-statement.about-fold,
.about-mission.about-fold,
.about-statement2.about-fold,
.about-values.about-fold{
  min-height:100vh;display:flex;align-items:center;
}
.about-statement.about-fold > *,
.about-mission.about-fold > *,
.about-statement2.about-fold > *,
.about-values.about-fold > *{width:100%;}

/* a hairline + soft shadow on the folding seam reads as the "fold" edge */
.about-statement.about-fold,
.about-mission.about-fold,
.about-statement2.about-fold,
.about-values.about-fold,
.about-stats.about-fold{
  box-shadow:0 -1px 0 rgba(35,44,57,.08), 0 -24px 40px rgba(35,44,57,.06);
}

/* rising z-index so later panels paint over earlier pinned ones */
.about-hero.about-fold{z-index:1;}
.about-statement.about-fold{z-index:2;}
.about-mission.about-fold{z-index:3;}
.about-stats.about-fold{position:relative;z-index:4;}  /* keeps internal horizontal pin */
.about-statement2.about-fold{z-index:5;}
.about-values.about-fold{z-index:6;}
/* trailing sections must also cover the last pinned panel */
.about-page-cover{position:relative;}
#lawyers.lawyers--showcase{position:relative;z-index:7;}
.about-cta{position:relative;z-index:8;}


/* ---------- RESPONSIVE ---------- */
@media(max-width:1024px){
  .about-hero-meta{grid-template-columns:1fr;gap:18px;}
  .about-hero-scroll{display:none;}
  .about-mission-inner,
  .about-accred-inner,
  .about-values-inner{grid-template-columns:1fr;gap:36px;}
  .about-statement2-inner{grid-template-columns:1fr;}
  .about-statement2-thumb{max-width:300px;order:-1;}
  .about-cta-inner{grid-template-columns:1fr;}
}
@media(max-width:768px){
  /* drop the pinned horizontal scroll — stack stats in a simple grid */
  .about-stats{height:auto !important;}
  .about-stats-sticky{position:static;height:auto;display:block;padding:clamp(48px,9vw,72px) 0;overflow:visible;}
  .about-stats-track{transform:none !important;flex-wrap:wrap;gap:0;padding:0 20px;}
  .about-stat{
    width:50%;border-right:1px solid var(--gray-mid);border-bottom:1px solid var(--gray-mid);
    padding:28px 20px;
  }
  .about-stat:nth-child(2n){border-right:none;}
  .about-stat:last-child{padding-right:20px;}
  .about-stats-progress{display:none;}
  .about-value-row{grid-template-columns:44px 1fr;}
}
@media(max-width:480px){
  .about-stat{width:100%;border-right:none;}
}

/* ===== [atac_refer_contact] — navy panel: form + "why refer to us" =====
   One navy gradient across the whole section (footer-card style); the two
   columns are separated by the same hairline the footer uses. The form
   column is 30% wider than the copy column (1.3fr vs 1fr). */
.atac-refer-split{
  display:grid; grid-template-columns:1.3fr 1fr;
  /* footer-card radius (5px) on every corner except top-left (squared) */
  border-radius:0 var(--radius,5px) var(--radius,5px) var(--radius,5px);
  overflow:hidden;
  margin:clamp(32px,5vw,64px) 0;
  box-shadow:0 18px 60px rgba(35,44,57,.16);
  background:linear-gradient(150deg,var(--navy-deep,#2d3a4a) 0%,var(--navy,#232c39) 100%);
}
.atac-refer-split .ars-col{
  padding:clamp(32px,4.5vw,64px);
  display:flex; flex-direction:column; justify-content:center;
}
#atac-contact-form{ scroll-margin-top:calc(var(--header-h,76px) + 16px); }
/* LEFT: holds the white form card */
.atac-refer-split .ars-form{ background:transparent; }
.atac-refer-split .ars-form .form-card{ width:100%; }
/* RIGHT: "why refer" copy — hairline divider against the form column */
.atac-refer-split .ars-copy{
  background:transparent;
  border-left:1px solid rgba(255,255,255,.12);
}
/* swap="1" — flip which side is which (divider moves with it); the form
   keeps its wider 1.3fr column on the right */
.atac-refer-split.is-swapped{ grid-template-columns:1fr 1.3fr; }
.atac-refer-split.is-swapped .ars-form{ order:2; border-left:1px solid rgba(255,255,255,.12); }
.atac-refer-split.is-swapped .ars-copy{ order:1; border-left:0; }

.atac-refer-split .ars-eyebrow{
  font-size:13px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
  color:rgba(255,255,255,.85); margin:0 0 18px; padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.28);
}
.atac-refer-split .ars-title{
  font-size:clamp(34px,4vw,60px); font-weight:800; line-height:1.04;
  letter-spacing:-.5px; color:#fff; margin:0 0 24px;
}
.atac-refer-split .ars-text{ margin:0 0 32px; }
.atac-refer-split .ars-text p{
  font-size:clamp(16px,1.2vw,18px); line-height:1.7;
  color:rgba(255,255,255,.92); margin:0 0 14px;
}
.atac-refer-split .ars-text p:last-child{ margin-bottom:0; }
.atac-refer-split .ars-cta{
  align-self:flex-start; display:inline-block; margin-top:4px;
  background:#fff; color:var(--red,#c72b35); font-weight:700; font-size:15px;
  padding:16px 34px; border-radius:var(--radius,5px); text-decoration:none;
  transition:transform .2s, box-shadow .2s, color .2s;
}
.atac-refer-split .ars-cta:hover{
  transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.18);
  color:var(--red-dark,#a5222b);
}
@media(max-width:900px){
  .atac-refer-split,
  .atac-refer-split.is-swapped{ grid-template-columns:1fr; border-radius:0 var(--radius,5px) var(--radius,5px) var(--radius,5px); }
  .atac-refer-split.is-swapped .ars-form,
  .atac-refer-split.is-swapped .ars-copy{ order:0; }
  /* stacked: the column divider turns horizontal */
  .atac-refer-split .ars-copy,
  .atac-refer-split.is-swapped .ars-form{ border-left:0; }
  .atac-refer-split .ars-copy{ border-top:1px solid rgba(255,255,255,.12); }
}

/* ===== #sec-contact — static Contact/Refer panel ==========================
   Standalone Divi Code-module instance of .atac-refer-split: copy column
   FIRST (left), form column SECOND (right). All rules id-scoped so they
   override the shared .atac-refer-split base without affecting it.
   Copy column carries a background photo tinted with a navy gradient so only
   the lawyer emerges (hero-style); text stays white. An inset vertical rule
   (.ars-divider — a real element, since Divi can strip ::before pseudos)
   sits between the columns on desktop, turning into a top border when
   stacked. Colours use !important because Divi tags the module
   .et_pb_bg_layout_light and forces dark body text at high specificity. */
@media(min-width:901px){
  #sec-contact.atac-refer-split{ grid-template-columns:60% 40%; }
  #sec-contact .ars-copy{ border-left:0; }
  #sec-contact .ars-form{ border-left:0; position:relative; }
  #sec-contact .ars-divider{
    display:block !important; position:absolute; left:0;
    top:clamp(32px,4.5vw,64px); bottom:clamp(32px,4.5vw,64px);
    width:1px; background:rgba(255,255,255,.28); pointer-events:none; z-index:2;
  }
}
@media(max-width:900px){
  #sec-contact .ars-copy{ border-top:0; }
  #sec-contact .ars-divider{ display:none !important; }
  #sec-contact .ars-form{ border-left:0; border-top:1px solid rgba(255,255,255,.12); }
}
#sec-contact .ars-copy.pa-intro{
  padding:clamp(32px,4.5vw,64px);
  background-color:rgb(39,50,65) !important;
  /* Image held to the LEFT, visible up to the column's midpoint, then a
     smooth fade to solid navy on the right. The ending colour is rgb(39,50,65)
     — the exact colour the transparent form column shows at the seam (the
     section's 150deg navy-deep→navy gradient sampled at x=60%,y=50%) — so the
     two columns blend seamlessly across the divider. */
  background-image:
    linear-gradient(90deg,rgba(35,44,57,.52) -14%,rgba(35,44,57,.46) -17%,rgba(35,44,57,0.88) 19%,rgb(39,50,65) 100%),
    url("/wp-content/uploads/2026/08/atac-law-contact-for-consultation-scaled-1.webp") !important;
  background-size:cover !important;
  background-position:left center !important;
  background-repeat:no-repeat !important;
}
#sec-contact .pa-intro h2{ color:#fff !important; }
#sec-contact .pa-intro p{ color:rgba(255,255,255,.92) !important; }


/* =========================================
   GLOBAL COLUMN REVEAL
   Bottom-to-top fade-in, applied site-wide
   by atac-reveal.js. The .atac-js gate
   ensures no flash when JS hasn't run yet.
   Above-fold elements never receive the
   class, so only scroll-triggered items
   are invisible before animation.
========================================= */

.atac-js .atac-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity   0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
}

.atac-js .atac-reveal.atac-reveal--in {
  opacity: 1;
  transform: translateY(0);
}

/* Safety net — forms must NEVER be hidden by the reveal effect, even if a
   wrapper still receives .atac-reveal (e.g. stale cached JS, or a form added
   later). The lead form is Elementor-style markup with no semantic <form>
   tag, so its wrappers (.elementor-widget-form / .ac-form / .lf-two-col) are
   matched explicitly alongside real <form> elements. */
.atac-js form .atac-reveal,
.atac-js form.atac-reveal,
.atac-js .elementor-widget-form .atac-reveal,
.atac-js .elementor-widget-form.atac-reveal,
.atac-js .ac-form .atac-reveal,
.atac-js .ac-form.atac-reveal,
.atac-js .lf-two-col.atac-reveal,
.atac-js .lf-two-col > .atac-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .atac-js .atac-reveal,
  .atac-js .atac-reveal.atac-reveal--in {
    transition: none;
    opacity: 1;
    transform: none;
  }
}


/* =========================================
   GOOGLE REVIEWS — dark testimonials section
   Rendered server-side via <div data-atac-reviews>.
   Curated 5-star reviews; "See More" reveals the rest.
========================================= */

.atac-reviews {
  background: var(--navy);
  padding: clamp(64px, 8vw, 110px) 0;
}

.atac-reviews-inner {
  padding: 0 var(--page-gutter);
}

/* Title — white, large, left aligned (inherits .on-dark white) */
.atac-reviews-title {
  max-width: 1100px;
  margin-bottom: clamp(22px, 2.6vw, 34px);
}

/* Thin full-width rule with a red accent on the left */
.atac-reviews-rule {
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
  position: relative;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.atac-reviews-rule::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(120px, 22%, 320px);
  height: 1px;
  background: var(--red);
}

.atac-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2vw, 30px);
}

.atac-review-card {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  padding: clamp(26px, 2.4vw, 38px);
  display: flex;
  flex-direction: column;
}

/* native hidden attribute / class — both keep extra reviews out until
   "See More". JS removes both to reveal them. */
.atac-review-card.is-hidden { display: none; }

.atac-review-stars {
  display: flex;
  gap: 4px;
  margin-bottom: clamp(18px, 2vw, 28px);
}
.atac-review-stars svg {
  width: 20px;
  height: 20px;
  fill: #f5b50a;            /* Google gold */
  flex-shrink: 0;
}

.atac-review-quote {
  font-style: italic;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 clamp(28px, 3vw, 44px);
  border: none;
  padding: 0;
}

/* push the footer to the bottom so cards of unequal text align nicely */
.atac-review-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.atac-review-name {
  font-weight: 700;
  font-size: clamp(15px, 1.1vw, 17px);
  color: #ffffff;
}
.atac-review-src {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.42);
}
.atac-review-badge {
  display: inline-flex;
}
.atac-review-badge svg {
  width: 15px;
  height: 15px;
  display: block;
}
.atac-review-badge circle { fill: #4285f4; }   /* Google blue */

/* See More Reviews — centered pill button */
.atac-reviews-foot {
  display: flex;
  justify-content: center;
  margin-top: clamp(36px, 4vw, 56px);
}
.atac-reviews-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: #ffffff;
  font-family: var(--font);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease;
}
.atac-reviews-more:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.40);
}
.atac-reviews-more svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  transition: transform .25s ease;
}
.atac-reviews-more[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* tablet → 2 columns, mobile → 1 column */
@media (max-width: 1024px) {
  .atac-reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .atac-reviews-grid { grid-template-columns: 1fr; }
}


/* =========================================
   EXPERTISE GRID — the "/expertise" page list
   Rendered server-side via <div data-atac-expertise>.
   Auto-lists top-level practice areas (name + description),
   each linking to its /expertise/<slug>/ page.
========================================= */

.expertise-grid-sec {
  background: #ffffff;
  padding: clamp(40px, 5vw, 72px) 0 clamp(64px, 8vw, 110px);
}
.expertise-grid-inner {
  padding: 0 var(--page-gutter);
}
.expertise-grid-title {
  margin-bottom: clamp(32px, 4vw, 56px);
}
.expertise-grid-intro {
  max-width: 900px;
  margin: 0 0 clamp(32px, 4vw, 56px);
}
.expertise-grid-intro p {
  margin: 0 0 1em;
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.7;
  color: var(--text-muted);
}
.expertise-grid-intro p:last-child { margin-bottom: 0; }

.expertise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(36px, 4vw, 64px) clamp(32px, 4vw, 80px);
}

.expertise-cell {
  display: block;
  text-decoration: none;
  color: inherit;
}
.expertise-cell-title {
  display: block;
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(18px, 1.5vw, 23px);
  letter-spacing: -0.3px;
  line-height: 1.2;
  color: var(--navy);
  transition: color .25s ease;
}
.expertise-cell-desc {
  display: block;
  margin-top: 10px;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.6;
  color: var(--text-muted);
}
/* hover affordance — it's a link to the area page */
.expertise-cell:hover .expertise-cell-title { color: var(--red); }

@media (max-width: 960px) {
  .expertise-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .expertise-grid { grid-template-columns: 1fr; }
}


/* =========================================
   PRACTICE AREAS — expandable accordion
   <div data-atac-expertise data-mode="accordion">
   Two columns of main areas; each opens to its sub-practice
   areas (city pages excluded), each sub opens to its excerpt.
========================================= */

.atac-pa { background:#fff; padding: clamp(48px,6vw,90px) 0; }
.atac-pa-inner { padding: 0 var(--page-gutter); }

/* When this section leads the page the global breadcrumb bar sits directly
   above it and already owns the top spacing — trim the section's own padding
   so the H1 doesn't float. Same figure the People/Team page uses. */
.atac-pa--lead { padding-top: var(--hero-gap-top); }

.atac-pa-head {
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; margin-bottom: clamp(16px,2vw,24px);
}
.atac-pa-title { margin:0; }

/* intro copy under the practice-areas title */
.atac-pa-intro {
  max-width: 900px;
  margin: 0 0 clamp(20px,2.4vw,32px);
}
/* /expertise/ lead intro — matched to the lawyers page (.atac-people-lead in
   atac-people.css): same measure, size, leading and body colour. It used to be
   max-width:none, which ran the copy the full content width and produced
   ~200-character lines that were hard to read. Keep these four values in sync
   with .atac-people-lead p if that rule ever changes. */
.atac-pa--lead .atac-pa-intro {
  max-width: min(100%, 60rem);
  margin-top: 24px;
}
.atac-pa--lead .atac-pa-intro p {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.8;
  color: var(--text-body);
  margin: 0 0 16px;
}
.atac-pa-intro p {
  margin: 0 0 1em;
  font-size: clamp(15px,1.05vw,18px);
  line-height: 1.7;
  color: var(--text-muted);
}
.atac-pa-intro p:last-child { margin-bottom: 0; }

.atac-pa-expand {
  flex:0 0 auto;
  background: var(--navy); color:#fff;
  font-family: var(--font); font-weight:700; font-size:14px;
  border:0; border-radius:8px; padding:12px 22px; cursor:pointer;
  transition: background .25s ease;
}
.atac-pa-expand:hover { background:#000; }

.atac-pa-foot {
  display:flex; justify-content:center;
  margin-top: clamp(32px,4vw,56px);
}

/* two columns */
.atac-pa-cols {
  display:grid; grid-template-columns: repeat(2, 1fr);
  gap: 0 clamp(32px,5vw,80px); align-items:start;
}

/* ---- main area row: title link + "N areas +" toggle + go arrow ---- */
.atac-pa-item { border-bottom:1px solid var(--gray-mid); }

.atac-pa-row {
  width:100%; display:flex; align-items:center;
  gap:14px; padding: clamp(14px,1.7vw,20px) 0;
  font-family: var(--font); text-align:left;
}
.atac-pa-row-title {
  flex:1 1 auto; min-width:0;
  font-weight:800; font-size: clamp(16px,1.3vw,19px);
  letter-spacing:-.2px; line-height:1.3; color: var(--navy);
  text-decoration:none; transition: color .25s ease;
}
.atac-pa-row-title:hover { color: var(--red); }

/* ---- LEGACY row: the whole row is one <button>, with a chevron circle ----
   The "X Services We Provide" sections on the practice-area pages are authored
   by hand in Divi Code modules against the ORIGINAL accordion markup:
     <button class="atac-pa-row"><span class="atac-pa-row-title">…</span>
       <span class="atac-pa-row-icon"><svg/></span></button>
   The /expertise/ renderer emits a <div class="atac-pa-row"> instead, so the
   element qualifier keeps the two apart. Without the reset below Divi's own
   button chrome shows through and the rows render as grey boxes. Keep this
   as long as any page still hand-codes the old markup. */
button.atac-pa-row {
  justify-content:space-between; gap:16px;
  background:transparent; border:0; cursor:pointer;
  padding: clamp(16px,1.8vw,22px) 0;
  box-shadow:none; border-radius:0;
}
button.atac-pa-row .atac-pa-row-title { flex:0 1 auto; }
button.atac-pa-row:hover .atac-pa-row-title { color: var(--red); }

.atac-pa-row-icon {
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#f7d9db; transition: background .25s ease, transform .25s ease;
}
.atac-pa-row-icon svg { width:15px; height:15px; fill: var(--red); transition: fill .25s ease; }
.atac-pa-item.is-open > .atac-pa-row .atac-pa-row-icon { background: var(--red); }
.atac-pa-item.is-open > .atac-pa-row .atac-pa-row-icon svg { fill:#fff; transform: rotate(180deg); }

/* sub-area count — the pill that opens the panel. Dark once open. */
.atac-pa-count {
  flex:0 0 auto; background:#f2f3f5; color: var(--text-muted);
  border:0; border-radius:999px; cursor:pointer;
  font-family: var(--font); font-weight:700; font-size:12.5px;
  letter-spacing:normal; text-transform:none;
  padding:5px 12px; white-space:nowrap;
  transition: background .25s ease, color .25s ease;
}
.atac-pa-count:hover { background:#e6e8eb; color: var(--navy); }
.atac-pa-item.is-open > .atac-pa-row .atac-pa-count { background: var(--navy); color:#fff; }

/* go-to-area arrow */
.atac-pa-row-go {
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; color: var(--red); text-decoration:none;
}
.atac-pa-row-go svg { width:18px; height:18px; fill: currentColor; transition: transform .25s ease; }
.atac-pa-row-go:hover svg { transform: translateX(3px); }

/* ---- sub-areas as pills ---- */
.atac-pa-pills { display:flex; flex-wrap:wrap; gap:10px; }
.atac-pa-pill {
  display:inline-flex; align-items:center;
  padding:8px 16px; background:#fff;
  border:1px solid var(--gray-mid); border-radius:999px;
  font-size: clamp(13px,.95vw,14.5px); font-weight:600; line-height:1.3;
  color: var(--text-muted); text-decoration:none;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.atac-pa-pill:hover { border-color: var(--red); color: var(--red); background: rgba(199,43,53,.04); }

/* collapsible panel — grid-rows 0fr→1fr animates auto height, no JS measuring */
.atac-pa-panel {
  display:grid; grid-template-rows: 0fr;
  transition: grid-template-rows .35s cubic-bezier(.4,0,.2,1);
}
.atac-pa-item.is-open > .atac-pa-panel { grid-template-rows: 1fr; }
.atac-pa-panel-in { overflow:hidden; }

/* red rail on the open area's content */
.atac-pa-item.is-open > .atac-pa-panel .atac-pa-panel-in {
  border-left:2px solid var(--red); padding: 4px 0 16px 16px;
}

/* ---- sub-area card ---- */
.atac-pa-sub {
  border:1px solid var(--gray-mid); border-radius:10px;
  margin-bottom:10px; background:#fff;
}
.atac-pa-sub-row {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:14px; background:transparent; border:0; cursor:pointer;
  padding:14px 18px; font-family: var(--font); text-align:left;
}
.atac-pa-sub-title { font-weight:700; font-size: clamp(14px,1.05vw,16px); color: var(--navy); }
.atac-pa-sub-icon {
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#f2f3f5; transition: background .25s ease;
}
.atac-pa-sub-icon svg { width:13px; height:13px; fill: var(--text-muted); transition: fill .25s ease, transform .25s ease; }
.atac-pa-sub.is-open > .atac-pa-sub-row .atac-pa-sub-icon { background: var(--navy); }
.atac-pa-sub.is-open > .atac-pa-sub-row .atac-pa-sub-icon svg { fill:#fff; transform: rotate(180deg); }

.atac-pa-sub-panel {
  display:grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s cubic-bezier(.4,0,.2,1);
}
.atac-pa-sub.is-open > .atac-pa-sub-panel { grid-template-rows: 1fr; }
.atac-pa-sub-panel-in { overflow:hidden; padding:0 18px; }
.atac-pa-sub.is-open > .atac-pa-sub-panel .atac-pa-sub-panel-in { padding:0 18px 16px; }
.atac-pa-sub-panel-in p {
  margin:0 0 10px; font-size: clamp(14px,1vw,15.5px);
  line-height:1.65; color: var(--text-body);
}

/* top-level area's own description, shown above its sub-list (or the
   "View {name}" fallback) when the row is expanded */
.atac-pa-desc {
  margin:0 0 14px; font-size: clamp(14px,1.05vw,16px);
  line-height:1.7; color: var(--text-body);
}

/* "Learn more" / empty-area link — reuse the red-link look */
.atac-pa-sub-link {
  display:inline-flex; align-items:center; gap:6px;
  color: var(--red); font-weight:700; font-size:14px; text-decoration:none;
}
.atac-pa-sub-link svg { width:14px; height:14px; fill: currentColor; transition: transform .25s ease; }
.atac-pa-sub-link:hover svg { transform: translateX(3px); }
.atac-pa-empty { padding:4px 0 8px; }

@media (max-width: 760px) {
  .atac-pa-cols { grid-template-columns: 1fr; gap:0; }
  .atac-pa-head { flex-wrap:wrap; gap:12px; }
}


/* =========================================
   SERVICE CATEGORY TABS
   One rail shared by the /expertise/ grid and the practice-areas accordion:
   Private Legal Services / Corporate & Commercial Legal Solutions.
   Assignments live in page meta (snippets/atac-service-groups.php) and reach
   the markup as data-atac-groups; atac-custom.js only flips [hidden], so
   switching categories never reloads the page.
========================================= */

.atac-svc-layout {
  display:grid;
  grid-template-columns: minmax(190px, 280px) minmax(0, 1fr);
  gap: clamp(28px,4vw,72px);
  align-items:start;
}

/* The left column: the tab rail, plus Expand All parked under it. They are
   wrapped rather than nested because the rail is a role="tablist" and must
   only ever contain tabs. */
.atac-svc-side {
  position:sticky; top: calc(var(--header-h,76px) + 28px);
  display:flex; flex-direction:column; align-items:flex-start;
  gap: clamp(20px,2.4vw,32px);
}
.atac-svc-rail { display:flex; flex-direction:column; gap:4px; width:100%; }

.atac-svc-side .atac-pa-foot { margin-top:0; justify-content:flex-start; }

.atac-svc-tab {
  display:flex; align-items:flex-start; gap:12px;
  width:100%; padding:10px 0;
  background:transparent; border:0; cursor:pointer;
  font-family: var(--font); text-align:left;
  font-weight:800; font-size: clamp(15px,1.15vw,18px);
  letter-spacing:-.2px; line-height:1.3; text-transform:none;
  color: var(--text-muted);
  transition: color .25s ease;
}
.atac-svc-tab:hover { color: var(--navy); }
.atac-svc-tab.is-active { color: var(--navy); }
.atac-svc-tab:focus-visible { outline:2px solid var(--red); outline-offset:3px; }

/* ---- phone layout: no tabs, one headed section per category ----
   Printed alongside the tab panel and swapped in at the breakpoint. An area
   in two categories appears under both headings — that is the point. */
.atac-svc-stack { display:none; }

.atac-svc-group { margin-bottom: clamp(30px,5vw,48px); }
.atac-svc-group:last-of-type { margin-bottom:0; }

/* !important throughout: the "H2 GLOBAL FIX" block at the top of this file
   pins every h2 to clamp(26px,3vw,44px) !important, and this heading has to
   read as a category label the same weight as a rail tab, not a page title.
   Same reason .cv-h2 does it. */
.atac-svc-group-title {
  display:flex; align-items:flex-start; gap:12px;
  margin:0 0 6px; padding-bottom:12px;
  border-bottom:1px solid var(--gray-mid);
  font-family: var(--font) !important; font-weight:800 !important;
  font-size: clamp(16px,1.2vw,19px) !important;
  letter-spacing:-.2px !important; line-height:1.3 !important;
  color: var(--navy);
}
/* the mark is decorative here, not a state — always solid */
.atac-svc-group-title .atac-svc-tab-mark { opacity:1; }

.atac-svc-group[hidden] { display:none; }

/* one column — the two-column split is a desktop-only idea */
.atac-pa-stack-list { display:block; }

/* ATAC mark — solid on the active category, faded on the rest.
   Same 12px box the red corner flag used to occupy. Served from the Media
   Library (already uploaded), root-relative so it follows the site's own
   domain rather than pinning the stylesheet to dev.ataclaw.ca. */
.atac-svc-tab-mark {
  flex:0 0 auto; width:12px; height:12px; margin-top:.35em;
  background: url('/wp-content/uploads/2026/07/light-bg-icon-atac-law-1.svg') center / contain no-repeat;
  opacity:.28;
  transition: opacity .25s ease;
}
.atac-svc-tab.is-active .atac-svc-tab-mark { opacity:1; }

/* the rail costs width, so the 3-up expertise grid drops to 2-up beside it */
.atac-svc-layout .expertise-grid { grid-template-columns: repeat(2, 1fr); }

/* ---- search box: narrows the list in place, on top of the open category ---- */
.atac-svc-search {
  display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap;
  margin: 0 0 clamp(24px,3vw,38px);
}
.atac-svc-search-field { flex:0 1 520px; min-width:240px; }
.atac-svc-search-label {
  display:block; margin-bottom:8px;
  font-family: var(--font); font-size:12px; font-weight:700;
  letter-spacing:1.6px; text-transform:uppercase; color: var(--text-muted);
}
.atac-svc-search-input { position:relative; }
.atac-svc-search-input input {
  width:100%; box-sizing:border-box;
  padding:14px 46px 14px 22px;
  background:#fff; border:1px solid var(--gray-mid); border-radius:999px;
  font-family: var(--font); font-size:15px; line-height:1.4; color: var(--navy);
  transition: border-color .25s ease, box-shadow .25s ease;
  appearance:none; -webkit-appearance:none;
}
.atac-svc-search-input input::placeholder { color: var(--text-muted); }
.atac-svc-search-input input:focus {
  outline:none; border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(199,43,53,.12);
}
/* the UA's own clear affordance would sit under our icon */
.atac-svc-search-input input::-webkit-search-cancel-button { display:none; }
.atac-svc-search-icon {
  position:absolute; right:18px; top:50%; transform: translateY(-50%);
  width:18px; height:18px; fill: var(--text-muted); pointer-events:none;
}
.atac-svc-clear {
  flex:0 0 auto;
  padding:14px 22px; background:transparent;
  border:1px solid var(--gray-mid); border-radius:999px; cursor:pointer;
  font-family: var(--font); font-size:14px; font-weight:700;
  letter-spacing:normal; text-transform:none; color: var(--text-muted);
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.atac-svc-clear:hover { border-color: var(--red); color: var(--red); background: rgba(199,43,53,.04); }
.atac-svc-clear[hidden] { display:none; }

/* while a query is live it, not the rail, is doing the filtering — say so and
   pull the rail back so the "active" tab doesn't read as a constraint */
.atac-svc-scope {
  flex: 1 0 100%; margin: 2px 0 0;
  font-size: 13.5px; line-height:1.6; color: var(--text-muted);
}
.atac-svc-scope[hidden] { display:none; }
.is-searching .atac-svc-rail { opacity:.45; transition: opacity .25s ease; }
.is-searching .atac-svc-rail:hover,
.is-searching .atac-svc-rail:focus-within { opacity:1; }

.atac-svc-empty {
  grid-column: 1 / -1;
  margin: 20px 0 0; font-size: clamp(14px,1vw,16px);
  line-height:1.7; color: var(--text-muted);
}

/* filtered-out rows — beat the display rules the components set themselves */
.atac-pa-item[hidden],
.expertise-cell[hidden] { display:none !important; }

/* ---- switching categories: the choreography (driven from atac-custom.js) ----
   Rows leaving fade out in place; the ones that stay are FLIPped to their new
   slots; the incoming ones rise in on a stagger. Keep these timings in step
   with OUT_MS / MOVE_MS / STEP_MS in the script. */
[data-atac-groups] {
  transition: opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
/* beat 1 — on the way out */
.atac-svc-out {
  opacity:0; transform: translateY(-6px) scale(.99);
  transition: opacity .2s ease, transform .2s ease;
}
/* beat 3 — waiting to rise in */
.atac-svc-in { opacity:0; transform: translateY(18px); }
/* the inverted frame: pinned to the old position with no transition at all */
.atac-svc-still { transition:none !important; will-change: transform; }
/* beat 2 — the glide itself, slower than everything around it */
.atac-svc-move {
  transition: transform .62s cubic-bezier(.22,.61,.36,1) !important;
  will-change: transform;
}
/* the panel eases between the two layout heights instead of snapping */
.atac-svc-resize {
  overflow:hidden; align-content:start;
  transition: height .62s cubic-bezier(.22,.61,.36,1);
}

@media (prefers-reduced-motion: reduce) {
  [data-atac-groups],
  .atac-svc-out,
  .atac-svc-move,
  .atac-svc-resize { transition:none !important; }
  .atac-svc-in { opacity:1; transform:none; }
}

@media (max-width: 900px) {
  /* ---- ACCORDION: drop the tabs entirely and show every category stacked.
     The two wrappers dissolve so the search box, the stack and Expand All
     become siblings in one column and can be ordered; the tab panel itself
     is the only thing left hidden. ---- */
  .atac-pa--tabbed .atac-pa-inner { display:flex; flex-direction:column; }
  .atac-pa--tabbed .atac-svc-layout,
  .atac-pa--tabbed .atac-svc-side { display:contents; }
  .atac-pa--tabbed .atac-svc-rail { display:none; }
  .atac-pa--tabbed .atac-svc-layout > .atac-pa-cols { display:none; }
  .atac-pa--tabbed .atac-svc-stack { display:block; order:8; }
  .atac-pa--tabbed .atac-svc-side .atac-pa-foot {
    order:9; justify-content:center; margin-top: clamp(24px,3vw,40px);
  }

  /* ---- GRID (/expertise/ cells) keeps its rail, as a chip strip ---- */
  .atac-svc-layout { grid-template-columns: 1fr; gap: clamp(20px,3vw,28px); }
  .expertise-grid-sec .atac-svc-side { display:contents; }
  .expertise-grid-sec .atac-svc-rail { order:1; }
  .atac-svc-layout .expertise-grid { order:2; }
  .expertise-grid-sec .atac-svc-rail {
    position:static; flex-direction:row; gap:20px; width:auto;
    overflow-x:auto; scrollbar-width:none;
    border-bottom:1px solid var(--gray-mid);
  }
  .expertise-grid-sec .atac-svc-rail::-webkit-scrollbar { display:none; }
  .expertise-grid-sec .atac-svc-tab {
    flex:0 0 auto; width:auto; padding:8px 0 12px; margin-bottom:-1px;
    font-size:14px; white-space:nowrap;
    border-bottom:2px solid transparent;
  }
  .expertise-grid-sec .atac-svc-tab.is-active { border-bottom-color: var(--red); }
  .expertise-grid-sec .atac-svc-tab-mark { display:none; }
}
@media (max-width: 600px) {
  .atac-svc-layout .expertise-grid { grid-template-columns: 1fr; }
}


/* =========================================
   GLOBAL BREADCRUMB BAR
   One per page, rendered right after the header (atac_breadcrumb_bar).
   Inner padding matches .atac-header-inner's gutter so the trail lines up
   under the ATAC LAW logo on every page. Separators are red for visibility.
========================================= */

/* The breadcrumb bar sits in normal flow BELOW the sticky header, so it must
   stack below the nav — otherwise the Expertise mega dropdown (a descendant of
   the header's z-index:1100 context) renders behind this bar. Keep it above
   generic page content but under the header/dropdown. */
.atac-crumb-bar { background:#fff; position:relative; z-index:1; }
/* Breadcrumb links stay above the bar's own background so they remain clickable */
.atac-crumb-bar .atac-breadcrumb,
.atac-crumb-bar .atac-breadcrumb ol,
.atac-crumb-bar .atac-breadcrumb li,
.atac-crumb-bar .atac-breadcrumb a { position:relative; z-index:2; pointer-events:auto; }

/* same horizontal gutter as the header → aligns under the logo.
   Vertical rhythm copied from the /team/ reference (atac-people.css):
   .atac-people.has-breadcrumb top padding + the crumb's own 22px bottom. */
.atac-crumb-inner {
  padding: clamp(14px, 2vw, 26px) clamp(32px, 5vw, 80px) 22px;
}

.atac-crumb-bar .atac-breadcrumb {
  font-family: var(--font);
  font-size: 14px;
  /* Deterministic content height so the practice-area hero image can be pulled
     up over the crumb row by an EXACT amount. Must stay in sync with the
     `+ 21px` term in --pa-crumb-h below — otherwise a gap appears at the top of
     the .pa-hero-img. (Left unset, the breadcrumb renders ~24px tall and the
     image falls a few px short of the header.) */
  line-height: 21px;
  color: var(--text-muted);
  padding: 0;
}
.atac-crumb-bar .atac-breadcrumb a {
  color: var(--navy); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; text-decoration-color: rgba(199,43,53,.5);
  transition: color .2s, text-decoration-color .2s;
}
.atac-crumb-bar .atac-breadcrumb a:hover { color: var(--red); text-decoration-color: var(--red); }
.atac-crumb-bar .atac-breadcrumb [aria-current] { color: var(--text-muted); font-weight:600; text-decoration:none; }

/* red separator arrows — bumped up a touch so they read clearly */
.atac-crumb-bar .atac-breadcrumb .sep {
  color: var(--red);
  font-size: 15px;
  font-weight: 700;
}


/* =====================================================================
   PRACTICE-AREA PAGE  (.pa-*) — hero (dotted bg, text + one-column cases),
   intro prose section, plus a full-width lawyers layout and a hero cases
   one-column carousel. Reuses .case-card / .lawyer-card / .atac-pa styles.
   ===================================================================== */

/* ---- Global breadcrumb base (so .atac-breadcrumb renders inline on any page,
   not only where atac-lawyer.css loads) ---- */

/* =====================================================================
   SHARE / SOCIAL BUTTONS — one canonical style for the whole site
   Article share row, case & insight hero share, lawyer-profile socials,
   footer socials. A bordered square with a muted icon; the copy-link
   button is the same shell with a label beside its icon.
   On a dark ground the white fill would read as four white chips, so the
   dark contexts get a translucent white instead and white icons.
   Phones drop the copy label and the button becomes icon-only (the
   button keeps an aria-label, so screen readers still announce it).
   ===================================================================== */
.atac-post-share-btn,
.exp-share-btn,
.lp-social a,
.atac-footer__social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex-shrink:0;
  border:1px solid var(--gray-mid,#e0e0e0);border-radius:var(--radius,5px);
  background:#fff;color:var(--text-muted,#6b7a8a);text-decoration:none;
  transition:border-color .2s,background .2s,color .2s;
}
.atac-post-share-btn svg,
.exp-share-btn svg,
.lp-social a svg,
.atac-footer__social a svg{width:16px;height:16px;fill:currentColor;transition:fill .2s;}
.atac-post-share-btn:hover,
.exp-share-btn:hover,
.lp-social a:hover,
.atac-footer__social a:hover,
.atac-footer__social a:focus-visible{border-color:var(--navy,#232c39);color:var(--navy,#232c39);background:#fff;}

/* the copy-link button: same shell, plus a label */
.atac-post-copy{
  display:inline-flex;align-items:center;gap:8px;
  height:38px;padding:0 16px;
  border:1px solid var(--gray-mid,#e0e0e0);border-radius:var(--radius,5px);
  background:#fff;font-family:inherit;font-size:13.5px;font-weight:600;
  color:var(--navy,#232c39);cursor:pointer;
  transition:border-color .2s,background .2s,color .2s;
}
.atac-post-copy svg{width:15px;height:15px;fill:currentColor;flex-shrink:0;}
.atac-post-copy:hover{border-color:var(--navy,#232c39);}
.atac-post-copy.is-copied{border-color:var(--red,#c72b35);color:var(--red,#c72b35);}

/* dark grounds — translucent white, never a white chip per button.
   NOTE: the footer socials are NOT here. They live in .atac-footer__bottom,
   which is white (only the card above it is navy), so they take the light
   variant; add .on-dark to a wrapper if that bar ever goes dark. */
.exp-hero .exp-share-btn,
.exp-hero .atac-post-copy,
.on-dark .atac-post-share-btn,
.on-dark .atac-post-copy{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff;
}
.exp-hero .exp-share-btn:hover,
.exp-hero .atac-post-copy:hover,
.on-dark .atac-post-share-btn:hover,
.on-dark .atac-post-copy:hover{
  background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.42);color:#fff;
}

@media (max-width:720px){
  /* icon-only copy button */
  .atac-post-copy{width:38px;padding:0;justify-content:center;gap:0;}
  .atac-post-copy [data-atac-copy-label]{display:none;}
}

/* ── BREADCRUMB LAYOUT — one canonical rule ─────────────────────────────
   Every breadcrumb (global bar, .cr-hero, .atac-people, article headers)
   shares this: a single line that never wraps, with the current-page label
   truncated to an ellipsis when the trail is too long for the width.
   Truncation is visual only — the text and the BreadcrumbList microdata stay
   intact in the DOM, so crawlers read the full trail.
   Per-context blocks below/elsewhere set only colour, size and weight. */
.atac-breadcrumb ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:nowrap;align-items:center;gap:10px;
  overflow:hidden;
}
.atac-breadcrumb li{display:flex;align-items:center;gap:10px;flex:0 0 auto;min-width:0;white-space:nowrap;}
/* the current page is the one that gives way */
.atac-breadcrumb li:last-child{flex:0 1 auto;overflow:hidden;}
.atac-breadcrumb li:last-child > a,
.atac-breadcrumb li:last-child > [itemprop="name"]{
  display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.atac-breadcrumb li:last-child > a > [itemprop="name"]{display:block;overflow:hidden;text-overflow:ellipsis;}
.atac-breadcrumb .sep{flex:0 0 auto;}
.atac-breadcrumb ol{font-size:14px;font-weight:600;}
.atac-breadcrumb a{color:var(--text-muted);text-decoration:none;transition:color .2s;}
.atac-breadcrumb a:hover{color:var(--red);}
.atac-breadcrumb li[aria-current],.atac-breadcrumb .current{color:var(--navy);font-weight:700;}
.atac-breadcrumb .sep{color:var(--red);font-size:15px;font-weight:700;}

/* ---- Hero ----
   Horizontal padding matches the sticky menu (.atac-header-inner uses
   clamp(32px,5vw,80px)) and the inner is full-bleed, so the title's left edge
   lines up with the logo and the cases carousel's right edge with the CTA. */
.pa-hero{
  background-color:#f4f5f4;
  background-image:radial-gradient(rgba(35,44,57,.10) 1.1px,transparent 1.1px);
  background-size:24px 24px;
  padding:var(--hero-gap-top) clamp(32px,5vw,80px) clamp(56px,7vw,96px);
  overflow-x:clip;   /* contain any horizontal spill on small screens */
}
.pa-hero-inner{max-width:none;margin:0;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:clamp(32px,4vw,64px);align-items:center;}
.pa-hero-left,.pa-hero-right{min-width:0;}   /* let grid children shrink so content wraps instead of overflowing */
.pa-hero-crumb{margin-bottom:26px;}
/* overflow-wrap lets long titles (e.g. "British Columbia") break to the next
   line on narrow phones instead of pushing the page wider than the viewport. */
.pa-hero-title{font-size:clamp(38px,5vw,68px);font-weight:800;line-height:1.03;letter-spacing:-2px;color:var(--navy);overflow-wrap:break-word;}
.pa-hero-slogan{font-size:clamp(22px,2.4vw,34px);font-weight:800;color:var(--red);letter-spacing:-.5px;margin:14px 0 26px;overflow-wrap:break-word;}
.pa-hero-intro{font-size:clamp(15px,1.15vw,17.5px);line-height:1.8;color:var(--text-body);max-width:60ch;}
@media(max-width:980px){.pa-hero-inner{grid-template-columns:1fr;gap:40px;}}
/* Phones: scale the title down and tighten the gutter so the hero fits cleanly. */
@media(max-width:640px){
  .pa-hero{padding-left:22px;padding-right:22px;}
  .pa-hero-title{font-size:clamp(30px,7.6vw,44px);letter-spacing:-1px;}
  .pa-hero-slogan{font-size:clamp(20px,5.6vw,28px);}
}

/* ---- Hero one-column cases carousel (reuses .case-card; arrows flank the
   card left/right like the home "Knowledge" section, using .lawyer-arrow) ---- */
.cases-hero{position:relative;}
.cases-hero-outer{overflow:hidden;border-radius:8px 8px 72px 8px;box-shadow:none;}
.cases-hero-track{display:flex;align-items:stretch;transition:transform .5s cubic-bezier(.4,0,.2,1);}
.cases-hero .case-card{flex:0 0 100%;width:100%;border-radius:8px 8px 72px 8px;transform:none;box-shadow:none;}
.cases-hero .case-card:hover{transform:none;box-shadow:none;}
.cases-hero-nav{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);z-index:20;display:flex;align-items:center;justify-content:space-between;pointer-events:none;}
.cases-hero-nav .lawyer-arrow{pointer-events:auto;}
.cases-hero-prev{margin-left:-24px;}
.cases-hero-next{margin-right:-24px;}
/* On stacked (mobile/tablet) layouts the card is full-width, so the arrows
   can't flank it without covering the text. Drop the nav into a centered row
   below the card instead of overlaying it. */
@media(max-width:980px){
  .cases-hero-nav{position:static;transform:none;margin-top:18px;justify-content:center;gap:18px;}
  .cases-hero-prev,.cases-hero-next{margin:0;}
}

/* ---- Intro prose section ---- */
.pa-intro{padding:var(--section-pad) clamp(32px,5vw,80px);background:#fff;}
.pa-intro-inner{max-width:none;margin:0;}
/* Align the services accordion to the same gutter as the other sections on the
   practice-area page (scoped so the site-wide Expertise accordion is untouched). */
body:has(.pa-hero) .atac-pa-inner{max-width:none;padding-left:clamp(32px,5vw,80px);padding-right:clamp(32px,5vw,80px);}
/* Lead paragraph under the services accordion heading */
.atac-pa-lead{max-width:960px;margin:0 0 30px;font-size:clamp(15px,1.1vw,17px);line-height:1.85;color:var(--text-body);}
/* Service search — injected under the lead by atac-custom.js, wearing the
   /expertise/ search box's own classes (.atac-svc-search et al). Only the
   spacing is local: there it follows an intro block, here a single lead. */
.atac-pa-search{margin:0 0 clamp(26px,3vw,40px);}
.atac-pa-search .atac-svc-search-field{flex:0 1 560px;}
/* filtered-out rows beat the display rules those components set themselves
   (.atac-pa-item[hidden] is handled with the /expertise/ rules above) */
.atac-pa-sub[hidden],.atac-pa-col[hidden]{display:none !important;}
.atac-pa .atac-svc-empty{margin:4px 0 0;}
.pa-intro h2{font-size:clamp(28px,3.4vw,46px);font-weight:800;line-height:1.08;letter-spacing:-1px;color:var(--navy);}
.pa-intro-rule{width:56px;height:3px;background:var(--red);border-radius:2px;margin:24px 0 32px;}
.pa-intro p{font-size:clamp(15px,1.1vw,17px);line-height:1.9;color:var(--text-body);margin-bottom:22px;}
.pa-intro p:last-child{margin-bottom:0;}

/* ---- Lawyers FULL-WIDTH layout (reuses .lawyer-card + #lawyersTrack JS) ---- */
.lawyers--fullwidth{padding:var(--section-pad) 0;background:var(--white);overflow:hidden;}
.lawyers--fullwidth .lawyers-fw-head{padding:0 clamp(32px,5vw,80px);margin-bottom:40px;}
.lawyers--fullwidth .lawyers-fw-head h2{font-size:clamp(26px,3vw,42px);font-weight:800;line-height:1.12;letter-spacing:-.5px;color:var(--navy);max-width:none;}
.lawyers--fullwidth .lawyers-fw-rule{margin-top:22px;height:1px;background:linear-gradient(90deg,var(--red) 0%,rgba(199,43,53,.15) 30%,transparent 70%);}
.lawyers--fullwidth .lawyers-track-wrap{position:relative;padding:8px clamp(32px,5vw,80px);}
.lawyers--fullwidth .lawyers-track{display:flex;gap:24px;transition:transform .5s cubic-bezier(.4,0,.2,1);}
.lawyers--fullwidth .lawyer-card{width:clamp(260px,23vw,340px);box-shadow:none;}
.lawyers--fullwidth .lawyer-card img{aspect-ratio:.62;filter:none;-webkit-mask-image:none;mask-image:none;}
.lawyers--fullwidth .lawyers-nav{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);display:flex;justify-content:space-between;pointer-events:none;padding:0 clamp(8px,2vw,28px);z-index:5;}
.lawyers--fullwidth .lawyers-nav .lawyer-arrow{pointer-events:auto;}
@media(max-width:640px){.lawyers--fullwidth .lawyer-card{width:82vw;}}
/* When rendered via atac_render_lawyers() the default extra_class is
   'lawyers--showcase', which forces a var(--page-gutter) section padding.
   In the full-width layout the head + track-wrap already own the gutter
   (clamp(32px,5vw,80px)), so the showcase padding stacks on top and pushes
   the heading/cards right of the hero, intro and services accordion.
   Zero it here so the section aligns to the same single gutter as the rest
   of the practice-area page. Higher specificity than the showcase media
   queries, so it holds at every breakpoint. */
.lawyers--fullwidth.lawyers--showcase{padding-left:0 !important;padding-right:0 !important;}

/* ---- Construction Law page (page-id-130573): unify the h2 section dividers ----
   Match the "Construction Law Services We Provide" rule — a 1px hairline with a
   solid red left segment — under the other section headings on this page: the
   intro ("Work with Experts…") and the lawyers ("Meet the Construction
   Lawyers…"). Scoped to this page so the short red bar and the gradient rule
   stay intact on the other practice-area pages. */
body.page-id-130573 .pa-intro-rule,
body.page-id-130573 .lawyers-fw-rule{
  width:auto; height:1px; border-radius:0;
  background:var(--gray-mid); position:relative;
}
body.page-id-130573 .pa-intro-rule::before,
body.page-id-130573 .lawyers-fw-rule::before{
  content:''; position:absolute; left:0; top:0; height:1px;
  width:clamp(120px,22%,320px); background:var(--red);
}

/* =====================================================================
   PRACTICE-AREA sticky SECTION NAV (right rail). Built by atac-custom.js
   from whichever sections are present (so auto-injected lawyers/insights
   are included). One-word labels, scrollspy, smooth scroll. The dots live
   in the right gutter; labels reveal on hover so they never overlap the
   full-width section content. Large screens only.
   ===================================================================== */
.pa-secnav{
  position:fixed; top:50%; right:clamp(14px,1.6vw,30px); transform:translateY(-50%);
  z-index:60; display:flex; flex-direction:column; gap:2px; align-items:flex-end;
  font-family:var(--font);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s ease, visibility .35s ease;
}
.pa-secnav.is-active{ opacity:1; visibility:visible; pointer-events:auto; }
.pa-secnav-link{
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
  padding:7px 0; text-decoration:none; cursor:pointer;
}
.pa-secnav-label{
  font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--navy); white-space:nowrap;
  /* Solid pill so a revealed label reads cleanly over page content instead
     of clashing with it. Hidden at rest (dots only) so nothing overlaps. */
  background:#fff; padding:5px 12px; border-radius:20px;
  border:1px solid var(--gray-mid); box-shadow:0 6px 20px rgba(35,44,57,.16);
  opacity:0; transform:translateX(8px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, color .2s ease;
}
.pa-secnav-dot{
  width:9px; height:9px; border-radius:50%; background:var(--gray-mid);
  flex-shrink:0; transition:background .2s ease, transform .2s ease;
}
/* Reveal labels only while hovering the rail — never persistently. */
.pa-secnav:hover .pa-secnav-label{ opacity:1; transform:none; }
.pa-secnav-link:hover .pa-secnav-label{ color:var(--red); }
.pa-secnav-link:hover .pa-secnav-dot{ background:var(--navy); }
/* Current section = enlarged red dot only (no always-on text). */
.pa-secnav-link.is-current .pa-secnav-dot{ background:var(--red); transform:scale(1.35); }
.pa-secnav-link.is-current:hover .pa-secnav-label{ color:var(--red); }
@media (max-width:1200px){ .pa-secnav{ display:none; } }

/* Reserve a right-hand lane for the section-nav rail on large screens, so no
   section content, carousel arrow, or hover label collides with it. Only
   applies where the rail is shown (>1200px); below that the rail is hidden
   and every section keeps its normal full width. Adds the lane on top of each
   section's existing right gutter so alignment elsewhere is preserved. */
@media (min-width:1201px){
  body:has(.pa-hero){ --pa-rail-gap:clamp(64px,5.5vw,96px); }
  body:has(.pa-hero) .pa-intro{ padding-right:calc(clamp(32px,5vw,80px) + var(--pa-rail-gap)); }
  body:has(.pa-hero) .atac-pa-inner{ padding-right:calc(clamp(32px,5vw,80px) + var(--pa-rail-gap)); }
  body:has(.pa-hero) .lawyers--fullwidth .lawyers-fw-head,
  body:has(.pa-hero) .lawyers--fullwidth .lawyers-track-wrap{ padding-right:calc(clamp(32px,5vw,80px) + var(--pa-rail-gap)); }
  body:has(.pa-hero) .lawyers--fullwidth .lawyers-nav{ padding-right:calc(clamp(8px,2vw,28px) + var(--pa-rail-gap)); }
  body:has(.pa-hero) .insights-inner,
  body:has(.pa-hero) .faq-inner,
  /* Testimonials sit in this same run now (above the FAQ), so they take the
     same lane — without this the panel alone would reach under the rail. */
  body:has(.pa-hero) .reviews-inner{ padding-right:calc(var(--page-gutter) + var(--pa-rail-gap)); }
  body:has(.pa-hero) .atac-refer-split{ margin-right:var(--pa-rail-gap); }
}

/* =========================================
   MOBILE CAROUSEL PARITY — Insights + "Highlighted Successful Matters"
   Unify both carousels on phones/tablets to match the one-column .cases-hero:
   a full-width card with the prev/next arrows centered in a row BELOW it,
   instead of the arrows flanking (and shrinking) the card. Applies on every
   page since it targets the shared .cases / .insights slider markup.
   ========================================= */
@media (max-width:768px){
  .cases-slider-wrap,
  .insights-slider-wrap{
    display:flex !important;flex-wrap:wrap !important;
    align-items:center !important;justify-content:center !important;gap:18px !important;
  }
  /* card row spans the full width, so the arrows wrap onto the line below */
  .cases-track-outer,
  .insights-track-outer{order:0 !important;flex:0 0 100% !important;min-width:0 !important;overflow:hidden !important;}
  .cases-slider-wrap .case-card,
  .insights-slider-wrap .insight-card{width:100% !important;}
  /* arrows: static, equal size, no side margins (gap handles spacing) */
  .cases-arrow,.cases-arrow-prev,.cases-arrow-next,
  .insights-arrow,.insights-arrow-prev,.insights-arrow-next{
    position:static !important;transform:none !important;
    width:48px !important;height:48px !important;min-width:48px;margin:0 !important;
  }
  .cases-arrow-prev,.insights-arrow-prev{order:1 !important;}
  .cases-arrow-next,.insights-arrow-next{order:2 !important;}
}

/* =====================================================================
   CONTACT US PAGE  (markup: contact-us.html → Divi Code module)
   Scoped under .atac-contact. Locations are a 4-up grid on desktop and a
   Burnaby-first accordion on mobile.
   ===================================================================== */
.atac-contact{
  --ac-navy:#232c39; --ac-red:#c72b35; --ac-gray:#f5f5f5; --ac-gray-mid:#e0e0e0;
  --ac-white:#fff; --ac-text:#3d4a56; --ac-muted:#6b7a8a; --ac-radius:5px;
  font-family:var(--font,'nimbus-sans','Nimbus Sans','Helvetica Neue',Helvetica,Arial,sans-serif);
  color:var(--ac-text); background:var(--ac-white);
  /* breadcrumb-to-h1 gap comes from the shared token (see --hero-gap-top) */
  padding:var(--hero-gap-top) 0 clamp(56px,7vw,96px);
}
.atac-contact *{box-sizing:border-box;}
/* Align to the site gutter like every other section (.*-inner), so the
   heading/content left edge matches the breadcrumb, logo, and section titles. */
.atac-contact .ac-wrap{padding:0 var(--page-gutter);}
.atac-contact p{font-size:clamp(14px,1.1vw,16px); line-height:1.6; font-weight:400; margin:0 0 10px;}
.atac-contact .ac-eyebrow{display:inline-block; font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--ac-red); margin-bottom:10px;}
.atac-contact .ac-title{font-size:clamp(34px,4.6vw,64px); font-weight:800; color:var(--ac-navy); line-height:1.05; letter-spacing:-.5px; margin:0 0 14px;}
.atac-contact .ac-lead{max-width:620px; color:var(--ac-muted); font-size:clamp(15px,1.3vw,18px); line-height:1.6;}
.atac-contact .ac-intro{margin-bottom:clamp(36px,4vw,56px);}
.atac-contact .ac-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(28px,4vw,64px); align-items:start; margin-bottom:clamp(56px,7vw,104px);}
.atac-contact .ac-h{font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--ac-navy); margin:0 0 16px;}
.atac-contact .ac-detail-block + .ac-detail-block{margin-top:34px;}
.atac-contact .ac-contact-list{list-style:none; margin:0; padding:0;}
.atac-contact .ac-contact-list li{display:flex; align-items:flex-start; gap:14px; padding:12px 0; border-bottom:1px solid var(--ac-gray-mid);}
.atac-contact .ac-contact-list li:last-child{border-bottom:none;}
.atac-contact .ac-ico{flex:0 0 40px; width:40px; height:40px; border-radius:50%; background:rgba(199,43,53,.08); display:flex; align-items:center; justify-content:center;}
.atac-contact .ac-ico svg{width:20px; height:20px; fill:var(--ac-red);}
.atac-contact .ac-contact-text{display:flex; flex-direction:column; padding-top:2px;}
.atac-contact .ac-contact-text a{color:var(--ac-navy); font-size:17px; font-weight:700; text-decoration:none;}
.atac-contact .ac-contact-text a[href]:hover{color:var(--ac-red);}
.atac-contact .ac-contact-text em{font-style:normal; font-size:13px; color:var(--ac-muted); margin-top:2px;}
.atac-contact .ac-form{background:var(--ac-white); border-radius:var(--ac-radius); box-shadow:0 12px 48px rgba(35,44,57,.12),0 0 0 1px rgba(35,44,57,.07); overflow:hidden;}
.atac-contact .ac-form-top{border-top:3px solid var(--ac-red); padding:28px 32px 4px;}
.atac-contact .ac-form-h{font-size:clamp(20px,1.8vw,26px); font-weight:800; color:var(--ac-navy); line-height:1.1; margin:0;}
.atac-contact .ac-form .form-card,
.atac-contact .ac-form .form-card-top{box-shadow:none; border-top:0; background:transparent;}
.atac-contact .ac-section-title{font-size:clamp(26px,3vw,44px); font-weight:800; color:var(--ac-navy); letter-spacing:-.5px; line-height:1.1; margin:0 0 16px;}
.atac-contact .ac-loc-rule{height:1px; background:var(--ac-gray-mid); position:relative; margin-bottom:36px;}
.atac-contact .ac-loc-rule::before{content:''; position:absolute; left:0; top:-1px; width:80px; height:3px; background:var(--ac-red);}
.atac-contact .ac-loc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.atac-contact .ac-loc-card{background:var(--ac-gray); border-radius:var(--ac-radius); overflow:hidden; display:flex; flex-direction:column;}
.atac-contact .ac-loc-head{width:100%; text-align:left; background:transparent; border:0; padding:22px 22px 24px; display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:default; font-family:inherit;}
.atac-contact .ac-loc-eyebrow{display:block; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--ac-red); margin-bottom:6px;}
/* margin/padding reset matters: Divi pads every h1–h6 by 10px at the bottom,
   which makes this box 10px taller than its text. Inside the flex row below
   that skews align-items:center, dropping the Head Office pill ~5px under the
   office name. The head's own padding-bottom carries the spacing instead. */
.atac-contact .ac-loc-name{display:block; margin:0; padding:0; font-size:22px; font-weight:800; color:var(--ac-navy); line-height:1.1;}
/* "Head Office" marker on the Burnaby card.
   ≤900px (1- and 2-up): a navy pill sitting beside the office name. Wraps
   under the name on the narrowest phones rather than squeezing the title.
   >900px (4-up): the same element becomes a navy panel notched into the
   card's top-right corner, stacked over two lines. Absolute, so it adds no
   height and all four office names keep the baseline they share; the card's
   own overflow:hidden + radius clip the outer corner, leaving only the inner
   corner to round. */
.atac-contact .ac-loc-card{position:relative;}
.atac-contact .ac-loc-head-text{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; min-width:0;}
.atac-contact .ac-loc-badge{display:inline-block; padding:5px 11px; background:var(--ac-navy); color:var(--ac-white); font-size:10px; font-weight:700; line-height:1.2; letter-spacing:1px; text-transform:uppercase; border-radius:999px; white-space:nowrap;}
.atac-contact .ac-loc-badge > span{display:inline;}
@media (min-width:901px){
  .atac-contact .ac-loc-badge{position:absolute; top:0; right:0; z-index:2; display:block; padding:8px 10px; border-radius:0 var(--ac-radius) 0 14px; line-height:1.35; letter-spacing:.6px; text-align:center;}
  .atac-contact .ac-loc-badge > span{display:block;}
  /* Clear the panel. Deliberately tight: at the 4-up breakpoint the card is
     only ~252px, and "Burnaby Office" needs ~160px of the ~166px this leaves. */
  .atac-contact .ac-loc-burnaby .ac-loc-head{padding-right:64px;}
}
.atac-contact .ac-loc-chevron{display:none; flex:0 0 34px; width:34px; height:34px; border-radius:50%; background:rgba(199,43,53,.08); align-items:center; justify-content:center; transition:transform .3s;}
.atac-contact .ac-loc-chevron svg{width:20px; height:20px; fill:var(--ac-red); transform:rotate(90deg);}
.atac-contact .ac-loc-body{padding:0 22px 22px;}
.atac-contact .ac-loc-addr{font-style:normal; color:var(--ac-muted); font-size:15px; line-height:1.6; margin-bottom:16px;}
.atac-contact .ac-loc-hours{display:flex; align-items:flex-start; gap:10px; background:var(--ac-white); border:1px solid var(--ac-gray-mid); border-radius:var(--ac-radius); padding:12px 14px; margin-bottom:16px; font-size:14px; line-height:1.4; color:var(--ac-navy);}
.atac-contact .ac-loc-hours strong{font-weight:700;}
.atac-contact .ac-dot{flex:0 0 9px; width:9px; height:9px; border-radius:50%; background:#2fae4a; margin-top:4px;}
.atac-contact .ac-loc-map{border-radius:var(--ac-radius); overflow:hidden; border:1px solid var(--ac-gray-mid); line-height:0;}
.atac-contact .ac-loc-map iframe{width:100%; height:180px; border:0; display:block;}
@media (max-width:900px){
  .atac-contact .ac-grid{grid-template-columns:1fr;}
  .atac-contact .ac-loc-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:768px){
  .atac-contact .ac-loc-grid{grid-template-columns:1fr; gap:14px;}
  .atac-contact .ac-loc-card{border:1px solid var(--ac-gray-mid);}
  .atac-contact .ac-loc-head{cursor:pointer; padding:18px;}
  .atac-contact .ac-loc-chevron{display:flex;}
  .atac-contact .ac-loc-card .ac-loc-chevron svg{transform:rotate(90deg); transition:transform .3s;}
  .atac-contact .ac-loc-card.is-open .ac-loc-chevron svg{transform:rotate(-90deg);}
  .atac-contact .ac-loc-body{display:none;}
  .atac-contact .ac-loc-card.is-open .ac-loc-body{display:block; padding:0 18px 18px;}
  .atac-contact .ac-loc-map iframe{height:220px;}
}
/* Head-office card in the details column beside the form (2026-09-24): the
   Burnaby card's body without its header, so it pads itself and is never
   collapsed by the mobile accordion. The Locations grid then holds three
   offices (.ac-loc-grid--3); pages still listing four keep the base grid. */
.atac-contact .ac-hq-card .ac-loc-body{display:block; padding:22px;}
/* Phone / fax / email / address list at the top of the card: pull it up by
   the first row's padding and space it off the hours box below. */
.atac-contact .ac-hq-card .ac-contact-list{margin:-12px 0 16px;}
.atac-contact .ac-loc-grid--3{grid-template-columns:repeat(3,1fr);}
@media (max-width:900px){
  .atac-contact .ac-loc-grid--3{grid-template-columns:1fr 1fr;}
}
@media (max-width:768px){
  .atac-contact .ac-loc-grid--3{grid-template-columns:1fr;}
  .atac-contact .ac-hq-card .ac-loc-body{padding:18px;}
}

/* =====================================================================
   INSIGHTS HUB — home-page combined section (white bg).
   ONE light lead panel on the left, PINNED (position:sticky), beside a
   column of carousel rows that scroll past it. The panel carries a pane
   per row (title + description) stacked in a single grid cell, the shared
   practice-area filter, and a CTA per row — also stacked. As a row crosses
   the middle of the viewport its pane blurs in and the other blurs out
   (JS toggles .is-active; see atac_render_insights_hub()).
   Below 900px nothing is pinned: the panel keeps only the filter and each
   row carries its own head (.atac-ihub-rowhead) and CTA.
   Renderer: atac_render_insights_hub().
   ===================================================================== */
/* overflow-x:clip keeps the tracks from causing page scroll without adding a
   scroll container (overflow:hidden would clip the filter dropdown). */
.atac-ihub{background:var(--white); padding:var(--section-pad) 0; overflow-x:clip;}
.atac-ihub-inner{padding:0 var(--page-gutter);}

/* Two columns: the pinned panel, then the stack of carousel rows.
   align-items:start is what makes the sticky work — the default `stretch`
   would grow the panel column to the full height of the rows column and
   leave it nothing to stick within. */
.atac-ihub-layout{
  display:grid; grid-template-columns:clamp(300px,24vw,380px) minmax(0,1fr);
  gap:20px; align-items:start;
}
/* The lead column is a STATIC RAIL; the panel inside it is what sticks. The
   rail's height is what decides where the pin lets go, and that is the whole
   trick: set it to row1 + gap + panelHeight and the panel releases at exactly
   the scroll position where its top is level with the SECOND row's top — from
   there the two travel locked together, permanently aligned, instead of the
   panel hanging at a fixed offset while the cards slide past underneath it.
   (Sticky releases when the container's bottom meets the element's bottom, so
   panel-top-at-release = rail-top + row1 + gap = row2-top.)
   --ihub-leadcol-h is measured in JS and capped to the rows column so the rail
   can never make the grid row taller than the cards. Its 100% fallback (no JS)
   is the old behaviour: stick across the whole section. */
.atac-ihub-leadcol{
  height:var(--ihub-leadcol-h, 100%);
  align-self:start; z-index:30; min-width:0;
}
/* Rows. Each row = a scrolling carousel (plus a phone-only head). */
.atac-ihub-rows{display:flex; flex-direction:column; gap:clamp(32px,3.5vw,56px); min-width:0;}
.atac-ihub-row{display:flex; flex-direction:column; min-width:0;}

/* The single light lead panel — the sticky element, parking in the MIDDLE of
   the visible area (below the fixed header) rather than against the top.
     --ihub-pin-min  the old top-of-screen offset; the floor.
     --ihub-pin-mid  centres the panel in (viewport − header).
   max() of the two means: centre it, but never let it slide under the header —
   which is what a panel taller than the visible area would otherwise do.
   --ihub-lead-h is set by JS; its 200vh fallback makes the mid term hugely
   negative when it is missing, so max() falls back cleanly to the floor with no
   JS and on phones. sticky also positions it, so the filter dropdown still
   opens over the cards (z-index below). */
.atac-ihub-lead{
  --ihub-pin-min:calc(var(--header-h,76px) + 28px);
  --ihub-pin-mid:calc(var(--header-h,76px) + (100vh - var(--header-h,76px) - var(--ihub-lead-h,200vh)) / 2);
  position:sticky; top:max(var(--ihub-pin-min), var(--ihub-pin-mid));
  /* One place to change the panel's ground and its ink. The panel is now a
     LIGHT card, so every value below is a navy on off-white rather than the
     off-white on slate it started as. */
  --ihub-lead-bg:var(--panel-ground);
  --ihub-lead-ink:var(--navy,#232c39);
  background:var(--ihub-lead-bg); color:var(--ihub-lead-ink); border-radius:14px;
  padding:36px 32px; display:flex; flex-direction:column;
  z-index:30;
  /* Match the height of the carousel row beside it, so the panel and the cards
     share a bottom edge. --ihub-lead-h is measured from the first row in JS
     (the rows are in the other grid column, so CSS alone cannot see it) and is
     unset below 900px and when JS is off — min-height then falls back to 0 and
     the panel is content-height, exactly as before.
     The viewport cap is what keeps the pin working: a sticky element taller
     than the screen can never fully show, so its bottom (and the CTA on it)
     would sit below the fold forever on a short window. */
  min-height:min(var(--ihub-lead-h,0px), calc(100vh - var(--header-h,76px) - 56px));
}

/* ---- Cross-fading panes -------------------------------------------------
   Both panes sit in the SAME grid cell, so the panel is as tall as the taller
   one and swapping never reflows anything (no jump under the filter). Only
   opacity/filter/transform animate — all compositor-side. */
.atac-ihub-panes{display:grid;}
.atac-ihub-pane{grid-area:1/1; min-width:0;}
.atac-ihub-pane,
.atac-ihub-ctas > .atac-ihub-lead-cta{
  opacity:0; filter:blur(8px); transform:translateY(6px); pointer-events:none;
  transition:opacity .5s ease, filter .5s ease, transform .5s ease;
}
.atac-ihub-pane.is-active,
.atac-ihub-ctas > .atac-ihub-lead-cta.is-active{
  opacity:1; filter:blur(0); transform:none; pointer-events:auto;
}
/* No JS (or an old browser without IntersectionObserver): the first pane and
   its CTA are server-rendered with .is-active, so the panel is never blank. */

.atac-ihub-lead-title{
  color:var(--ihub-lead-ink); font-weight:800; margin:0 0 18px; line-height:1.15;
  font-size:clamp(26px,2.2vw,32px);
}
.atac-ihub-lead-title .red{color:#ff6b73;}
.atac-ihub-lead-text{color:rgba(35,44,57,.82); font-size:15.5px; line-height:1.65; margin:0 0 clamp(22px,2.4vw,32px);}
/* CTA matches the "Meet Our Lawyers" text-link (.atac-link-cta), on-dark variant.
   Stacked in one cell like the panes, so the two labels swap in place. */
.atac-ihub-ctas{display:grid; justify-items:start; margin-top:auto;}
.atac-ihub-ctas > .atac-ihub-lead-cta{grid-area:1/1; margin:0;}

/* ---- Phone-only row heads (display:none from 901px up, so they are out of
   the a11y tree on desktop and never duplicate the pinned panel) ---- */
.atac-ihub-rowhead{display:none;}
/* !important because the shared .atac-link-cta component declares
   display:inline-flex !important — a plain `display:none` loses to it. */
.atac-ihub-rowcta{display:none !important;}
/* The markup still carries .atac-link-cta.on-dark, which pins #fff
   !important for every dark surface on the site — invisible on this light
   card. Re-stated here rather than changing the shared component or the
   markup, and scoped so no other on-dark CTA is touched. */
.atac-ihub-lead .atac-link-cta.on-dark{color:var(--ihub-lead-ink) !important;}
.atac-ihub-lead .atac-link-cta.on-dark:hover{color:rgba(35,44,57,.7) !important;}

/* Carousel wrapper — the scroll viewport + arrows live here */
.atac-ihub-carousel{position:relative; flex:1 1 auto; min-width:0;}
.atac-ihub-track{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 4px 18px; scrollbar-width:none; -ms-overflow-style:none;
}
.atac-ihub-track::-webkit-scrollbar{display:none;}
/* Soft fade on the right edge — hints there's more to scroll, smooths the cut-off.
   Sits below the arrow (z-index 20) and ignores clicks. */
.atac-ihub-carousel::after{
  content:""; position:absolute; top:0; right:0; bottom:18px; width:clamp(48px,7%,110px);
  background:linear-gradient(to right, rgba(255,255,255,0), var(--white) 78%);
  pointer-events:none; z-index:5;
}

/* Article cards — SAME COLUMN STYLE AS THE HOME CASE CARDS (.mcase-card).
   The boxed white card (border + 14px radius + lift-on-hover) was replaced with
   the borderless treatment: image with the brand corner cut, a red uppercase
   kicker and date over a hairline, navy title, red "Read More" bottom-right.
   Widths, the track, the arrows and the navy lead panel are deliberately
   untouched — only the card's own styling changed. Keep this in step with the
   .mcase-* block further down; the two are meant to read as one system. */
/* THREE cards visible per view on desktop (two 20px gaps inside the track) */
/* The card look is the shared MEDIA CARD (.cr-card). These are the carousel
   track properties only. */
.atac-ihub-card{flex:0 0 calc((100% - 40px) / 3); scroll-snap-align:start;}


/* Media — the picture FILLS the box (2026-09-10).
   History: this used to carry `height:auto`, from when the media box had no
   height of its own and took the image's ratio, so a branded title card was
   never cropped (Talat, 2026-09-03 — object-fit:cover in a 16/9 box was slicing
   the wordmark off). The shared .cr-card-media has since become a fixed
   `aspect-ratio:3/2` box, which makes `height:auto` do the opposite of its
   intent: the box no longer adapts, so anything not exactly 3:2 renders short
   and leaves a navy strip under it (a 16/9 cover came out 144px in a 171px box).
   Filling is the honest behaviour for a fixed box, and 3/2 is the ratio the
   house artwork is exported at (1200x800), so exports at that ratio crop by
   nothing. ⚠️ An off-ratio branded title card now CROPS instead of letterboxing
   — keep covers at ~3:2 and there is nothing to crop. */
/* media: shared .cr-card-media */
.atac-ihub-card-media img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1); transition:filter .55s ease;}
/* Photo shows as-shot at rest; hover draws a navy veil over it. Nothing scales,
   so the fixed height and row alignment are untouched. Mirrors .mcase-media. */
/* scrim: shared .cr-card-media::before */


/* No cover image → brand panel with the red corner wedge, matching
   .mcase-media--empty. z-index 2 puts it over the veil, which is for photos. */
/* No cover image → the panel declares the same 3/2 as the media box, so a card
   with no artwork is exactly the shape of one with artwork. Static (not
   absolute) so it fills the box in flow rather than collapsing it. */
.atac-ihub-card-media-fallback{
  display:block; position:relative; z-index:2; width:100%; aspect-ratio:3/2;   /* match the shared card media */
  background:linear-gradient(135deg,var(--navy-deep) 0%,var(--navy) 100%);
}
.atac-ihub-card-media-fallback::after{
  content:''; position:absolute; right:0; bottom:0; width:46%; height:60%;
  background:linear-gradient(135deg,#7a1418,var(--red));
  clip-path:polygon(100% 15%,100% 100%,50% 100%);
}

/* Text stays in the column it had before the restyle. The card lost its 1px
   border along with the box, so the old 22px padding becomes 23px to land the
   copy on exactly the same width (294.13 - 46 = 248.13px). The media is
   deliberately NOT inset — it runs full-bleed to the card edge. */
/* body wrapper: the shared card pads itself */

/* Meta row: practice area left, date right, over a hairline that draws itself
   red left-to-right on hover. */
/* meta row: shared .cr-card-head */
/* meta rule sweep: shared .cr-card-head::after */

/* The pill is now plain red text — it inherits the meta row's type. */
/* tag: shared chip (.cr-card-area-tag) */
/* date: shared .cr-card-year */

/* No line-clamp — titles wrap fully and are never cut off. Cards in a row
   stretch to equal height (align-items:stretch on the track). Type matches
   .mcase-title / .pa-title. */
/* title: shared .cr-card-title */


/* Read More link on every card (span — the whole card is already an <a>).
   Red text + chevron, flush right at the card's foot, matching .mcase-go. */
/* CTA: shared .cr-card-more + .atac-link-cta */




/* Text-only cards (Industry Insights — no cover image, shows an excerpt).
   Taller than the image row so the text carousel has more presence. */
.atac-ihub-card--text{min-height:clamp(360px,32vw,440px);}
/* text-only body: shared card padding applies */
/* Type is left to the global `html body p` rule (clamp(14px,1.1vw,16px)/1.6),
   which is what .mcase-summary and .pa-desc render at — so the excerpt reads
   the same as the case cards' summary. */
/* excerpt: shared .cr-card-excerpt */
/* Image cards carry a cover photo above the copy, so three lines is enough —
   the clamp is a backstop, the server-side truncation does the real work. */
.atac-ihub-card:not(.atac-ihub-card--text) .atac-ihub-card-excerpt{-webkit-line-clamp:3;}

/* Arrows — identical to the lawyer-section navigation (red circles) */
.atac-ihub-arrow{
  position:absolute; top:calc(50% - 9px); z-index:20; transform:translateY(-50%);
  width:56px; height:56px; border-radius:50%; border:none;
  background:var(--red); color:var(--white); cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0; flex-shrink:0;
  box-shadow:0 8px 24px rgba(35,44,57,.18); transition:background .3s,transform .2s;
}
.atac-ihub-arrow:hover{background:var(--red-dark); transform:translateY(-50%) scale(1.08);}
.atac-ihub-arrow svg{width:22px; height:22px; fill:currentColor;}
.atac-ihub-arrow--prev{left:-16px;}
.atac-ihub-arrow--next{right:-16px;}

/* =====================================================================
   CAROUSEL ARROWS — SPENT STATE, one treatment for every carousel.
   Each engine already sets button.disabled when a direction has nothing
   left to show; until now that was styled four different ways (opacity
   .25 / .3 / .4 / .55) and not at all on the home lawyers row or the
   insights hub, so a dead arrow looked identical to a live one and
   invited another click. This is the single rule.

   pointer-events:none does the real work — it kills the hover colour and
   the scale-up, so the button cannot pretend to respond. transform is
   deliberately NOT reset: .atac-ihub-arrow centres itself with
   translateY(-50%), and clearing it would drop the arrow off its row.

   !important + the compound selectors are to beat the per-component rules
   this replaces, two of which were already !important at higher
   specificity (.insights .insights-arrow:disabled).

   NOT listed, on purpose: .lawyer-arrow.cases-hero-prev/next and
   .exp-slider-prev/next. Those two carousels wrap around ((i + n) % n) —
   they never run out, so they must never read as spent.
   ===================================================================== */
.atac-ihub-arrow:disabled,
.lawyer-arrow:disabled,
.knowledge .lawyer-arrow:disabled,
.cases-arrow:disabled,
.insights-arrow:disabled,
.insights .insights-arrow:disabled,
.reviews-arrow:disabled{
  opacity:.28 !important;
  box-shadow:none !important;
  cursor:default !important;
  pointer-events:none !important;
}

/* ---- Practice-area filter (client-side, scoped to this section) ---- */
/* Lives inside the navy lead card, between the paragraph and the CTA. */
.atac-ihub-filter{position:relative; margin:0 0 clamp(24px,2.6vw,34px); max-width:100%;
  transition:opacity .5s ease, filter .5s ease;}
/* The filter belongs to the LEGAL row alone, so it leaves with that pane —
   same blur-out language as the panes themselves. It keeps its box (opacity,
   not display) so switching panes never reflows the panel, and the CTA stays
   put at the foot. JS also drops the button out of the tab order and shuts the
   dropdown; see atac_render_insights_hub(). */
.atac-ihub-filter.is-off{opacity:0; filter:blur(8px); pointer-events:none;}
.atac-ihub-fbtn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  /* Navy hairline + navy label: the filter sits on the light card now, so
     the old translucent-white outline read as almost nothing. */
  background:transparent; border:1px solid rgba(35,44,57,.35); border-radius:999px;
  padding:14px 22px; font-size:15.5px; font-weight:600; color:rgba(35,44,57,.9);
  cursor:pointer; transition:border-color .2s,box-shadow .2s,background .2s;
}
.atac-ihub-filter.is-open .atac-ihub-fbtn,
.atac-ihub-fbtn:hover{border-color:var(--red); background:rgba(35,44,57,.05);}
.atac-ihub-filter.is-open .atac-ihub-fbtn{box-shadow:0 0 0 3px rgba(199,43,53,.25);}
.atac-ihub-fcaret{width:20px; height:20px; fill:currentColor; flex-shrink:0; transition:transform .2s;}
.atac-ihub-filter.is-open .atac-ihub-fcaret{transform:rotate(180deg);}

.atac-ihub-fpanel{
  position:absolute; top:calc(100% + 10px); left:0; right:0; z-index:60;
  min-width:280px;
  background:var(--white); border:1px solid var(--gray-mid); border-radius:16px;
  box-shadow:0 20px 50px rgba(35,44,57,.16); overflow:hidden;
}
.atac-ihub-fpanel-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 22px; border-bottom:1px solid var(--gray-mid);
  font-size:13px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--navy);
}
.atac-ihub-fclear{background:none; border:none; padding:0; color:var(--red); font-size:12px; font-weight:700; cursor:pointer; text-transform:none; letter-spacing:.3px;}
.atac-ihub-foptions{list-style:none; margin:0; padding:0; max-height:340px; overflow-y:auto;}
.atac-ihub-fopt + .atac-ihub-fopt{border-top:1px solid var(--gray-mid);}
.atac-ihub-fopt{
  display:flex; align-items:center; gap:16px; padding:16px 22px; cursor:pointer;
  font-size:17px; color:var(--navy); margin:0;
}
.atac-ihub-fopt:hover{background:var(--gray);}
.atac-ihub-fopt input{position:absolute; opacity:0; width:0; height:0;}
.atac-ihub-fopt-box{
  flex:0 0 22px; width:22px; height:22px; border:2px solid var(--gray-mid); border-radius:6px;
  position:relative; transition:border-color .15s,background .15s;
}
.atac-ihub-fopt input:checked + .atac-ihub-fopt-box{background:var(--red); border-color:var(--red);}
.atac-ihub-fopt input:checked + .atac-ihub-fopt-box::after{
  content:""; position:absolute; left:6px; top:2px; width:6px; height:11px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.atac-ihub-fopt input:focus-visible + .atac-ihub-fopt-box{box-shadow:0 0 0 3px rgba(199,43,53,.2);}
.atac-ihub-fopt-name{flex:1;}
.atac-ihub-fopt-count{color:var(--text-muted); font-size:15px;}

/* Filtered-out cards + empty-carousel state */
.atac-ihub-card.is-hidden{display:none !important;}
.atac-ihub-empty{margin:0; padding:26px 4px; color:var(--text-muted); font-size:15px;}
.atac-ihub-carousel.is-empty .atac-ihub-arrow,
.atac-ihub-carousel.is-empty::after{display:none;}

/* The pane swap is decoration — hold the panel still for anyone who asks. */
@media (prefers-reduced-motion:reduce){
  .atac-ihub-pane,
  .atac-ihub-ctas > .atac-ihub-lead-cta,
  .atac-ihub-filter,
  .atac-ihub-filter.is-off{transition-duration:.01ms; filter:none;}
}

/* Tablet: two cards per view */
@media (max-width:1200px){
  .atac-ihub-card{flex-basis:calc((100% - 20px) / 2);}
}
@media (max-width:1024px){
  .atac-ihub-layout{grid-template-columns:clamp(260px,30vw,320px) minmax(0,1fr);}
  .atac-ihub-arrow{width:48px; height:48px;}
}
/* Phone: nothing is pinned. The panel drops to the filter alone and each row
   carries its own head + CTA — the stacked layout this section has always had
   on small screens. Matches the 900px guard in the pane-switching JS. */
@media (max-width:900px){
  .atac-ihub-layout{grid-template-columns:1fr; gap:clamp(24px,4vw,34px);}
  .atac-ihub-leadcol{height:auto;}
  .atac-ihub-lead{position:static; top:auto;}
  .atac-ihub-panes,
  .atac-ihub-ctas{display:none;}
  /* With the panes gone the panel is only the filter, and a gray box drawn
     around a single pill looks like a leftover container — so drop the panel
     chrome and let the control stand on the white. */
  .atac-ihub-lead{background:none; padding:0; border-radius:0;}
  /* No panes here, so nothing owns the filter's visibility — make sure a
     desktop → phone resize can never leave it faded out. */
  .atac-ihub-filter,
  .atac-ihub-filter.is-off{margin:0; opacity:1; filter:none; pointer-events:auto;}
  .atac-ihub-rowhead{display:block; margin:0 0 20px;}
  .atac-ihub-rowhead-title{
    color:var(--navy,#232c39); font-weight:800; margin:0 0 12px; line-height:1.15;
    font-size:clamp(24px,5.4vw,30px);
  }
  .atac-ihub-rowhead-title .red{color:var(--red);}
  .atac-ihub-rowhead-text{color:rgba(35,44,57,.82); font-size:15.5px; line-height:1.65; margin:0;}
  .atac-ihub-rowcta{display:inline-flex !important; margin-top:18px; align-self:flex-start;}
}
/* Narrow: card sizing + arrows below the track */
@media (max-width:768px){
  .atac-ihub-card{flex-basis:min(72vw,320px);}
  /* Nav arrows: centered pair BELOW the carousel, like the lawyer section
     (instead of overlapping the cards). */
  .atac-ihub-carousel{padding-bottom:64px;}
  .atac-ihub-carousel::after{bottom:64px;}
  .atac-ihub-arrow{width:46px; height:46px; top:auto; bottom:0; transform:none;}
  .atac-ihub-arrow:hover{transform:scale(1.06);}
  .atac-ihub-arrow svg{width:20px; height:20px;}
  .atac-ihub-arrow--prev{left:50%; right:auto; margin-left:-52px;}
  .atac-ihub-arrow--next{left:50%; right:auto; margin-left:6px;}
}
@media (max-width:640px){
  .atac-ihub-card{flex-basis:min(78vw,300px);}
}

/* =====================================================================
   SQUARED TOP-LEFT CORNER — shared accent. Applied to the insights-hub
   navy lead cards, the lawyer cards, the case-result cards, and the
   contact/referral split so they all match the carousel item cards.
   !important so it wins over each block's own border-radius shorthand
   regardless of source order / variant specificity.
   ===================================================================== */
.atac-ihub-lead,
.case-card,
.atac-refer-split{
  border-top-left-radius:0 !important;
}

/* =====================================================================
   PRACTICE-AREA: "Work with Experts" as a 70/30 row (mirrors the hero),
   with the featured-case carousel moved into the 30% side under an h3.
   The hero can now drop its .pa-hero-right and go full-width.
   ===================================================================== */
/* Hero with no right column → text spans full width */
.pa-hero-inner:not(:has(.pa-hero-right)){ grid-template-columns:1fr; }

/* Hero image = full-bleed cover of the ENTIRE right half of the hero.
   The image wrapper is absolutely positioned to the hero's right edge so it
   fills top-to-bottom and bleeds over the hero padding (Fasken-style). */
.pa-hero:has(.pa-hero-img){ position:relative; }
.pa-hero:has(.pa-hero-img) .pa-hero-inner{ grid-template-columns:1fr; }
.pa-hero:has(.pa-hero-img) .pa-hero-left{ max-width:50%; }
.pa-hero-right:has(.pa-hero-img){
  position:absolute; inset:0 0 0 auto; width:50%; padding:0; margin:0;
}
.pa-hero-img{
  display:block; width:100%; height:100%; object-fit:cover; border-radius:0;
  /* Soft-fade the LEFT edge into the grey dotted hero background so the image
     dissolves in rather than starting on a hard vertical seam (matches the
     Fasken-style blend). The mask is applied to the desktop full-bleed image
     only; it's reset on mobile below where the image stacks under the text. */
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 28%);
          mask-image:linear-gradient(to right, transparent 0, #000 28%);
}
/* Tablet / phone: image drops back into normal flow below the text */
@media(max-width:980px){
  .pa-hero:has(.pa-hero-img) .pa-hero-left{ max-width:none; }
  .pa-hero-right:has(.pa-hero-img){ position:static; width:auto; }
  .pa-hero-img{
    aspect-ratio:16/9;
    -webkit-mask-image:none;
            mask-image:none;   /* full-width stacked image: no left fade */
  }
}

/* Extend the grey hero background — and the hero image — UP over the
   breadcrumb bar on practice-area pages, so the crumb sits inside the hero. */
/* Crumb-bar height = 2×(.atac-crumb-inner vertical padding) + breadcrumb line
   box. The 21px MUST equal the pinned `line-height` on .atac-crumb-bar
   .atac-breadcrumb (above); keep them in sync or the hero image gaps/overlaps. */
body:has(.pa-hero){ --pa-crumb-h: calc(clamp(14px,2vw,26px) + 22px + 21px); }
body:has(.pa-hero) .atac-crumb-bar{
  background-color:#f4f5f4;
  background-image:radial-gradient(rgba(35,44,57,.10) 1.1px,transparent 1.1px);
  background-size:24px 24px;
  position:relative; z-index:1;
}
body:has(.pa-hero) .pa-hero{ position:relative; z-index:2; }
/* raise the image up to fill the right half of the breadcrumb row */
body:has(.pa-hero) .pa-hero-right:has(.pa-hero-img){ top:calc(-1 * var(--pa-crumb-h)); }
@media(max-width:980px){
  body:has(.pa-hero) .pa-hero-right:has(.pa-hero-img){ top:0; }
}

/* =====================================================================
   PRACTICE-AREA HERO — normal flow (sticky reveal REMOVED)
   The hero used to pin below the header while the following sections
   scrolled up and over it ("parallax"), via position:sticky on .pa-hero
   at >=981px. That was removed on request: the hero now scrolls away with
   the page like every other hero on the site.

   To restore it, put back on this rule:
     position:sticky; top:var(--header-h);
   and note the old requirement — every section after the hero must paint an
   opaque background, or the pinned hero shows through as they ride over it.

   The sibling stacking below is KEPT deliberately. .pa-hero carries
   z-index:2 (it raises the hero image up over the breadcrumb bar), so
   without a higher z-index on what follows, any later section that tucks
   upward would paint underneath the hero. This keeps the paint order
   exactly as it is today. */
@media (min-width:981px){
  body:has(.pa-hero) .pa-hero ~ *{
    position:relative;
    z-index:3;
  }
}

/* 70 / 30 split — same ratio as the hero grid */
.pa-expertise-row{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,3fr);
  gap:clamp(32px,4vw,64px); align-items:start;
}
.pa-expertise-main{ min-width:0; }
.pa-expertise-side{ min-width:0; }
/* The matters carousel is dropped on areas that have no case of their own
   (atac_render_cases returns nothing), which leaves .pa-expertise-side an
   empty 30% column beside the prose. Give the prose the full width instead.
   Keyed on element children, not :empty, so the authored whitespace inside
   the column does not defeat it. */
.pa-expertise-row:not(:has(.pa-expertise-side > *)){grid-template-columns:minmax(0,1fr);}
/* =====================================================================
   MULTILANGUAGE — header language switcher (EN / 中文) + Chinese typography.
   Markup from atac_ml_switcher(); injected before the header CTA.
   ===================================================================== */
.atac-lang-switch{
  display:flex; align-items:center; gap:8px; margin-right:18px;
  font-size:14px; font-weight:700; letter-spacing:.3px; white-space:nowrap;
}
.atac-lang-switch .atac-lang-sep{color:var(--gray-mid);}
.atac-lang-switch .atac-lang-cur{color:var(--red);}
.atac-lang-switch a{color:var(--navy); text-decoration:none; transition:color .2s;}
.atac-lang-switch a:hover{color:var(--red);}
/* mobile menu: switcher stacks with the nav items */
@media (max-width:1200px){
  .atac-lang-switch{margin:14px 0 4px; font-size:16px;}
}

.atac-lang-switch .atac-lang-extra{display:none;}
/* ≥1450px: room again for the old inline pair (EN / 中文). Below it only the
   active language shows, and the pair's second language lives in the caret
   dropdown instead — .atac-lang-dup is that dropdown twin. */
@media (min-width:1450px){
  .atac-lang-switch .atac-lang-extra{display:inline-flex; align-items:center; gap:8px;}
  .atac-lang-switch .atac-lang-dropdown .atac-lang-dup{display:none;}
}

/* "中文 ▾" group: caret opens a dropdown for languages beyond EN / 中文
   (currently 한국어) without growing the always-visible header row. */
.atac-lang-switch .atac-lang-group{position:relative; display:inline-flex; align-items:center; gap:4px;}
.atac-lang-switch .atac-lang-caret{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; padding:0; margin:0; border:0; background:none;
  color:var(--navy); cursor:pointer; transition:color .2s, transform .2s;
}
.atac-lang-switch .atac-lang-caret svg{width:9px; height:6px;}
.atac-lang-switch .atac-lang-group:hover .atac-lang-caret,
.atac-lang-switch .atac-lang-group.is-open .atac-lang-caret{color:var(--red); transform:rotate(180deg);}

.atac-lang-switch .atac-lang-dropdown{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%);
  min-width:96px; padding:8px; margin:0;
  background:#fff; border-radius:var(--radius,5px);
  box-shadow:0 12px 28px rgba(35,44,57,.16);
  text-align:center; white-space:nowrap;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  transform:translateX(-50%) translateY(-4px);
  z-index:20;
}
/* Invisible hover bridge across the 10px gap between the caret and the menu,
   so moving the cursor down into the dropdown doesn't drop the group's :hover
   and snap it shut. */
.atac-lang-switch .atac-lang-dropdown::before{
  content:""; position:absolute; left:0; right:0; top:-14px; height:14px;
}
.atac-lang-switch .atac-lang-dropdown a,
.atac-lang-switch .atac-lang-dropdown .atac-lang-cur{
  display:block; padding:6px 10px; border-radius:4px;
}
.atac-lang-switch .atac-lang-dropdown a:hover{background:var(--bg-light,#f4f5f7);}
.atac-lang-switch .atac-lang-group:hover .atac-lang-dropdown,
.atac-lang-switch .atac-lang-group:focus-within .atac-lang-dropdown,
.atac-lang-switch .atac-lang-group.is-open .atac-lang-dropdown{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
@media (max-width:1200px){
  /* touch: no hover, rely on the click-to-toggle .is-open class */
  .atac-lang-switch .atac-lang-dropdown{left:0; transform:translateY(-4px);}
  .atac-lang-switch .atac-lang-group.is-open .atac-lang-dropdown{transform:translateY(0);}
}
/* Traditional Chinese font stack + comfortable CJK line-height */
body.lang-zh{
  --font:'PingFang TC','Noto Sans TC','Microsoft JhengHei','Heiti TC',
         'nimbus-sans','Helvetica Neue',Helvetica,Arial,sans-serif !important;
}
body.lang-zh p{line-height:1.9;}
body.lang-zh h1,body.lang-zh h2,body.lang-zh h3{letter-spacing:0;}

/* h3 section title merged INTO the navy case panel — the navy extends UP to
   include it, joined seamlessly to the case card below (one navy block). */
.pa-cases-title{
  color:#fff !important; background:var(--navy);
  margin:0; padding:clamp(26px,2.4vw,36px) clamp(24px,2.4vw,34px) 6px;
  border-radius:0 8px 0 0;                       /* squared top-left accent */
  font-size:clamp(24px,2.3vw,33px); font-weight:800; line-height:1.12; letter-spacing:-.5px;
}
/* case carousel loses its top rounding so it butts right under the h3 */
.pa-expertise-side .cases-hero-outer,
.pa-expertise-side .cases-hero .case-card{
  border-top-left-radius:0; border-top-right-radius:0;
}
/* clear hierarchy: h4 case headline is smaller/lighter than the h3 */
.pa-expertise-side .case-card-title{ font-size:17px; font-weight:700; }
/* summary paragraph white on navy (overrides the dark .pa-intro p colour) */
.pa-expertise-side .case-card-summary{ color:rgba(255,255,255,.82); }
.pa-expertise-side .case-card-tag{ display:none; }
@media(max-width:980px){
  .pa-expertise-row{ grid-template-columns:1fr; gap:40px; }
}

/* ---- Contact-form field errors (moved from inline <style> in functions.php) ---- */
.lf-field-error {



        border-color: #e53e3e !important;



        background-color: #fff5f5 !important;



    }



    .lf-field-error-msg {



        display: block;



        color: #e53e3e;



        font-size: 12px;



        margin-top: 4px;



        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;



    }



    .lf-honeypot {



        opacity: 0;



        position: absolute;



        top: 0;



        left: 0;



        height: 0;



        width: 0;



        z-index: -1;



        overflow: hidden;



    }


/* =====================================================================
   CASES — HOME PAGE "feature" layout (.cases--feature).

   The home page no longer runs the navy-card carousel: it shows three
   hand-picked matters as light, image-led cards on white with no arrows
   (see atac_render_cases(), layout `feature`). The middle card is wider;
   the two flanking it are equal. Every other page keeps the
   .cases--showcase carousel above unchanged.

   THREE CARDS, ONE HEIGHT. The media is a fixed height (not an
   aspect-ratio), so the meta rule / title / summary all sit on the same
   baseline across the row whatever the column width, and the grid's
   default stretch plus the auto-margin on .mcase-go squares off the feet.

   ONE LINK PER CARD, AND IT IS THE CARD. Each card used to end with its
   own "View Case Details" text-link — four near-identical red-underlined
   links in one section. Now .mcase-title a::after stretches over the whole
   card and the visible affordance is the round arrow at its foot, leaving
   "View Other Experience" as the section's only text-link CTA.

   Image comes from each case's Featured image. A case with none renders
   .mcase-media--empty — a navy panel with the brand's red corner wedge —
   so a missing image never collapses the row.
   ===================================================================== */
.cases--feature{background:var(--white);}
.cases--feature .cases-header{margin-bottom:16px;}
.cases--feature .cases-head-line{margin-bottom:26px;}
/* Intro sits under the heading rule, above the cards; not printed when
   data-intro="". Type is deliberately NOT set here: left alone, the global
   `html body p` rule (clamp(14px,1.1vw,16px)/1.6/400) governs it, which is the
   same type .practice-left p ends up with — so the two sections match. */
.cases--feature .cases-intro{max-width:62ch;margin:0 0 46px;}
.cases--feature .cases-intro p{color:var(--text-body);}
.cases--feature .cases-intro p:last-child{margin-bottom:0;}
/* Section CTA now lives with the intro rather than in a centred footer below
   the cards, so it reads as part of the section's opening statement. */
.cases--feature .cases-intro-cta{margin-top:24px;}

/* Outer columns even, middle one wider. */
.mcase-grid{display:grid;grid-template-columns:1fr 1.34fr 1fr;gap:40px;align-items:stretch;}

.mcase-card{position:relative;display:flex;flex-direction:column;min-width:0;height:100%;}

/* Media — fixed height so all three rows align, whatever the column width. */
/* Corners: top-left rounded, bottom-right carries the brand's big cut, and
   top-right / bottom-left are square — TL TR BR BL. */
.mcase-media{position:relative;overflow:hidden;border-radius:5px;background:var(--gray-mid);height:clamp(197px,17.1vw,269px);margin-bottom:22px;}
.mcase-media img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1);transition:filter .55s ease;}

/* HOVER — the image settles rather than zooms. The photograph shows as-shot at
   rest; hovering draws a navy veil over it and pulls a little saturation out,
   so the card recedes under the cursor instead of lighting up. Quieter than a
   scale, and nothing moves, so the fixed media height and the row alignment are
   untouched. ::before, not ::after — .mcase-media--empty already owns ::after
   for its red wedge, and the veil is skipped there since that panel is brand
   colour, not a photo. */
.mcase-media:not(.mcase-media--empty)::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:linear-gradient(180deg,rgba(35,44,57,0.10) 0%,rgba(35,44,57,0.32) 100%);transition:opacity .55s ease;}
.mcase-card:hover .mcase-media img{filter:saturate(.88);}
.mcase-card:hover .mcase-media:not(.mcase-media--empty)::before{opacity:1;}

/* No Featured image yet — brand panel rather than a grey hole. */
.mcase-media--empty{background:linear-gradient(135deg,var(--navy-deep) 0%,var(--navy) 100%);}
.mcase-media--empty::after{content:'';position:absolute;right:0;bottom:0;width:46%;height:60%;background:linear-gradient(135deg,#7a1418,var(--red));clip-path:polygon(100% 15%,100% 100%,50% 100%);}

/* Meta row: practice area left, year right, over a hairline. The hairline
   draws itself red left-to-right on hover — the same motion vocabulary as
   .anim-line and the .atac-link-cta underline, so the card reads as part of
   the site rather than as a one-off effect. */
.mcase-meta{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid rgba(35,44,57,0.16);font-size:11px !important;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;line-height:1.4;}
.mcase-meta::after{content:'';position:absolute;left:0;bottom:-1px;width:0;height:1px;background:var(--red);transition:width .55s cubic-bezier(.4,0,.2,1);}
.mcase-card:hover .mcase-meta::after{width:100%;}
.mcase-kicker{color:var(--red);}
.mcase-year{color:var(--text-muted);white-space:nowrap;}

/* Type matches .pa-title in the home Expertise list. !important is needed
   only because the card title is an <h3> and `html body h3` sets the heading
   scale with !important; .pa-title is a <span> and escapes it for free. */
.mcase-title{font-size:clamp(17px,1.4vw,22px) !important;font-weight:800 !important;line-height:1.25 !important;letter-spacing:normal !important;margin:0 0 12px;}
.mcase-title a{color:var(--navy);text-decoration:none;transition:color .25s ease;}
.mcase-card:hover .mcase-title a,
.mcase-title a:focus-visible{color:var(--red);}
/* The card IS the link — no second CTA competing with the section footer. */
.mcase-title a::after{content:'';position:absolute;inset:0;z-index:2;border-radius:var(--radius);}
.mcase-title a:focus-visible::after{outline:2px solid var(--red);outline-offset:6px;}

/* No flex:1 — the copy ends where it ends and the arrow follows it straight
   away. Cards stay equal height from the grid's stretch; the slack collects
   below the arrow instead of being pushed between it and the text. */
.mcase-summary{font-size:clamp(14px,1.1vw,16px) !important;line-height:1.6;font-weight:400;color:var(--text-body);margin:0;}

/* Affordance: a red "Read more ›", not a button and not an .atac-link-cta —
   the footer's "View Other Experience" keeps the red-underline treatment, so
   this stays plain red text and the two can't be confused. Decorative
   (aria-hidden in the markup): the card itself is the link.

   It sits ON the summary's last line, flush right. float:right is what buys
   that: as the paragraph's last child the float is placed on the line box it
   is encountered on — the last one — and being out of the inline flow it does
   NOT inflate that line the way an inline-flex box did. The 5px top margin
   centres its 15px box on the 26px line.

   THE COPY LENGTH IS PART OF THIS RULE. A float only stays on the last line
   if that line still has room for it; a full last line pushes it down to a
   line of its own (still right-aligned — the graceful failure, not a break).
   atac_render_cases() therefore truncates feature summaries to 115 chars,
   which leaves the last line well short in both the narrow and the wide
   column. Lengthen the summary and the label starts to orphan. The figure is
   tied to the type size: it was 125 at the old 15px summary and had to drop
   when the paragraph was matched to the house 15.84px. */
.mcase-go{float:right;display:flex;align-items:center;gap:5px;margin:5px 0 0 16px;color:var(--red);font-size:14px;font-weight:700;line-height:1;letter-spacing:.2px;transition:color .25s;}
.mcase-go svg{width:15px;height:15px;fill:currentColor;transition:transform .25s;}
.mcase-card:hover .mcase-go{color:var(--red-dark);}
.mcase-card:hover .mcase-go svg{transform:translateX(4px);}

@media (max-width:1100px){
  .mcase-grid{grid-template-columns:1fr 1fr;gap:34px;}
  /* Odd card out spans the row rather than leaving a gap. Its copy stays
     measured — a summary run edge-to-edge across the page is unreadable. */
  .mcase-card:nth-child(3):last-child{grid-column:1 / -1;}
  .mcase-card:nth-child(3):last-child .mcase-media{height:clamp(207px,22.77vw,269px);}
  .mcase-card:nth-child(3):last-child .mcase-title,
  .mcase-card:nth-child(3):last-child .mcase-summary{max-width:64ch;}
}
@media (max-width:780px){
  .mcase-grid{grid-template-columns:1fr;gap:40px;}
  .mcase-card:nth-child(3):last-child{grid-column:auto;}
  .mcase-media,
  .mcase-card:nth-child(3):last-child .mcase-media{height:clamp(207px,53.82vw,269px);}
  .cases--feature .cases-head-line{margin-bottom:34px;}

}

/* The photo is wrapped in a link so the whole image navigates to the profile.
   It fills the card and sits under the overlay/bio panels. */
.lawyer-card-photo{display:block;position:relative;z-index:0;}
.lawyer-card-photo img{display:block;width:100%;}


/* =========================================
   SECTION-TITLE RULES — REMOVED
   The decorative rule that used to sit under every section heading: the 1px
   red→transparent gradient (.anim-line, used by every *-head-line element),
   the practice-area variants (.lawyers-fw-rule / .pa-intro-rule, including
   the grey-with-red-segment treatment scoped to page-id-130573), and the
   short 48×3 red bars (.faq-left-rule, .pain-rule).

   The INK is removed, not the element. Those rules carry the margin that
   spaces a heading from the content under it (40–52px on the head-lines,
   24–32px on the bars), so display:none would silently tighten a dozen
   sections. Dropping the background leaves a transparent 1–3px box that
   holds exactly the spacing the layout was built around, and makes this a
   one-line revert if the accent is ever wanted back.

   !important because several of these backgrounds are themselves set by
   more specific selectors (.anim-line.light::after, body.page-id-130573 …).
========================================= */
.anim-line::after,
.lawyers-fw-rule,
.lawyers-fw-rule::before,
.pa-intro-rule,
.pa-intro-rule::before,
.faq-left-rule,
.pain-rule{background:none !important;}


/* =========================================
   VIDEO BAND — navy text panel + YouTube thumbnail that opens a pop-up player, on a
   white section. First used on the /zh/ home page right after the lawyers
   section (Divi Code module holds the markup only; the pop-up script is in atac-custom.js). The
   photo fades into the navy panel from the left; stacks on tablets/phones.
========================================= */
.atac-video-band{background:var(--white);padding:0 var(--page-gutter) var(--section-pad);}
.atac-video-card{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);min-height:clamp(320px,30vw,420px);background:var(--navy);border-radius:var(--radius);overflow:hidden;box-shadow:0 24px 60px rgba(35,44,57,.18);}
.atac-video-text{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:clamp(36px,4.5vw,64px);}
/* !important: the site-wide h2 scale (and Divi's) otherwise wins and wraps the title */
.atac-video-text h2{font-size:clamp(21px,2.2vw,32px) !important;font-weight:800 !important;line-height:1.3 !important;letter-spacing:-0.3px;color:var(--white) !important;margin:0 0 18px !important;padding:0;}
.atac-video-text h2::after{content:'';display:block;width:56px;height:3px;margin-top:16px;background:var(--red);}
.atac-video-text p{font-size:clamp(14.5px,1.1vw,16.5px);line-height:1.85;color:rgba(255,255,255,.82);margin:0 0 12px;padding:0;max-width:60ch;}
.atac-video-text .atac-link-cta{margin-top:18px;font-family:inherit;}
.atac-video-media{position:relative;min-height:240px;background:var(--navy);}
.atac-video-media img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:60% 30%;display:block;}
/* fade the photo into the navy panel */
.atac-video-media::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--navy) 0%,rgba(35,44,57,.72) 22%,rgba(35,44,57,.15) 55%,rgba(35,44,57,0) 100%);}
.atac-video-play{position:absolute;z-index:2;left:55%;top:50%;transform:translate(-50%,-50%);width:88px;height:88px;border-radius:50%;border:0;padding:0;background:var(--red);color:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 10px rgba(199,43,53,.25),0 12px 30px rgba(0,0,0,.3);transition:transform .25s,background .25s,box-shadow .25s;}
.atac-video-play svg{width:38px;height:38px;fill:currentColor;margin-left:4px;}
.atac-video-play:hover,.atac-video-play:focus-visible{background:var(--red-dark);transform:translate(-50%,-50%) scale(1.08);box-shadow:0 0 0 14px rgba(199,43,53,.2),0 12px 30px rgba(0,0,0,.3);}
/* pop-up player (built by the VIDEO BAND block in atac-custom.js, appended to <body>) */
.atac-video-modal{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,56px);background:rgba(14,20,29,.88);opacity:0;transition:opacity .25s;}
.atac-video-modal[hidden]{display:none;}
.atac-video-modal.is-open{opacity:1;}
.atac-video-modal-inner{position:relative;width:min(1100px,100%,calc((100vh - 120px) * 16 / 9));}
.atac-video-modal-frame{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--radius);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);}
.atac-video-modal-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.atac-video-modal-close{position:absolute;right:0;bottom:calc(100% + 12px);width:44px;height:44px;border-radius:50%;border:0;padding:0;background:var(--red);color:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .25s,transform .25s;}
.atac-video-modal-close:hover,.atac-video-modal-close:focus-visible{background:var(--red-dark);transform:scale(1.08);}
.atac-video-modal-close svg{width:22px;height:22px;fill:currentColor;}
html.atac-video-modal-open,html.atac-video-modal-open body{overflow:hidden;}
@media (max-width: 900px){
  .atac-video-card{grid-template-columns:1fr;min-height:0;}
  .atac-video-media{order:-1;min-height:0;aspect-ratio:16/9;}
  .atac-video-media::before{background:linear-gradient(0deg,var(--navy) 0%,rgba(35,44,57,.35) 30%,rgba(35,44,57,0) 60%);}
  .atac-video-play{left:50%;width:72px;height:72px;}
  .atac-video-play svg{width:30px;height:30px;}
}
@media (max-width: 640px){
  .atac-video-band{padding-left:20px;padding-right:20px;}
  .atac-video-text{padding:28px 24px 32px;}
}


/* =========================================
   REASONS — "选择我们的理由" two-column checklist (/zh/ home, placed under the
   .home-statement title in a Divi Code module). The statement column is only
   760px wide and centred, so the grid breaks out to 1040px around the same
   centre line. Five reasons + a navy hotline card fill the 2 x 3 grid.
========================================= */
.atac-reasons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4vw,56px);
  width:min(1040px,calc(100vw - 2 * var(--page-gutter)));margin:clamp(8px,1.5vw,20px) 0 clamp(36px,4vw,56px) calc(50% - min(520px,50vw - var(--page-gutter)));text-align:left;}
.atac-reason{display:flex;align-items:flex-start;gap:18px;padding:clamp(22px,2.4vw,30px) 0;border-top:1px solid var(--gray-mid);}
.atac-reason-icon{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:rgba(199,43,53,.1);color:var(--red);display:flex;align-items:center;justify-content:center;}
.atac-reason-icon svg{width:22px;height:22px;fill:currentColor;}
.atac-reason-body{min-width:0;}
.home-statement .atac-reason-title,.atac-reason-title{font-size:clamp(19px,1.5vw,22px) !important;font-weight:800 !important;line-height:1.3 !important;color:var(--navy) !important;margin:6px 0 8px !important;padding:0;letter-spacing:0;}
.home-statement .atac-reason-text,.atac-reason-text{font-size:clamp(15px,1.1vw,16.5px) !important;line-height:1.75 !important;color:var(--text-body);margin:0 !important;padding:0;}
/* 6th cell: hotline card in the brand navy */
.atac-reason--cta{flex-direction:column;justify-content:center;gap:6px;margin:clamp(14px,1.6vw,20px) 0;padding:clamp(22px,2.4vw,30px) clamp(24px,2.6vw,34px);border:0;border-radius:var(--radius);background:var(--navy);text-decoration:none !important;transition:background .3s;}
.atac-reason--cta:hover{background:var(--navy-deep);}
.atac-reason-cta-label{font-size:13px;font-weight:600;letter-spacing:2px;color:rgba(255,255,255,.65);}
.atac-reason-cta-phone{font-size:clamp(24px,2.2vw,30px);font-weight:800;letter-spacing:-0.3px;line-height:1.2;color:var(--white);margin-bottom:8px;}
.atac-reason--cta:hover .atac-link-cta{color:var(--red) !important;}
.atac-reason--cta:hover .atac-link-cta::after{transform:scaleX(.8);}
@media (max-width: 767px){
  .atac-reasons{grid-template-columns:1fr;width:auto;margin-left:0;}
}

/* =========================================
   CHAT CTAs — 微信咨询 / WhatsApp / 立即致电 button row (zh pages; markup in a
   Divi Code module, e.g. the /zh/ home hero). Brand-matched instead of the
   old WeChat green: solid red (primary), solid navy, navy outline — same
   size, radius and weight as .atac-red-btn. [data-atac-qr] opens the QR
   pop-up (.atac-qr-modal, built by the CHAT CTAs block in atac-custom.js).
========================================= */
.atac-chat-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
.atac-chat-btn,.atac-chat-btn:visited{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 24px;border:2px solid transparent;border-radius:var(--radius);font-family:var(--font) !important;font-size:15px !important;font-weight:700 !important;line-height:1 !important;letter-spacing:.3px;text-decoration:none !important;text-transform:none !important;cursor:pointer;box-shadow:none;transition:background .25s,color .25s,border-color .25s,transform .25s;}
.atac-chat-btn svg{width:20px;height:20px;flex:0 0 auto;fill:currentColor;}
.atac-chat-btn:hover,.atac-chat-btn:focus-visible{transform:translateY(-1px);}
.atac-chat-btn--wechat{background:var(--red);border-color:var(--red);color:var(--white) !important;}
.atac-chat-btn--wechat:hover,.atac-chat-btn--wechat:focus-visible{background:var(--navy);border-color:var(--navy);}
.atac-chat-btn--whatsapp{background:var(--navy);border-color:var(--navy);color:var(--white) !important;}
.atac-chat-btn--whatsapp:hover,.atac-chat-btn--whatsapp:focus-visible{background:var(--red);border-color:var(--red);}
.atac-chat-btn--call{background:transparent;border-color:var(--navy);color:var(--navy) !important;}
.atac-chat-btn--call:hover,.atac-chat-btn--call:focus-visible{background:var(--navy);color:var(--white) !important;}
@media (max-width: 640px){
  .atac-chat-ctas{display:grid;grid-template-columns:1fr 1fr;width:100%;}
  .atac-chat-btn{padding:14px 16px;}
  .atac-chat-btn--call{grid-column:1 / -1;}
}
/* QR pop-up — same backdrop and red close button as the video pop-up */
.atac-qr-modal{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(14,20,29,.72);opacity:0;transition:opacity .25s;}
.atac-qr-modal[hidden]{display:none;}
.atac-qr-modal.is-open{opacity:1;}
.atac-qr-card{position:relative;width:min(340px,100%);padding:34px 32px 28px;background:var(--white);border-top:4px solid var(--red);border-radius:var(--radius);box-shadow:0 30px 80px rgba(0,0,0,.35);text-align:center;}
.atac-qr-card h3{font-size:20px !important;font-weight:800 !important;color:var(--navy) !important;margin:0 0 18px !important;padding:0;line-height:1.3 !important;}
.atac-qr-card img{display:block;width:220px;max-width:100%;height:auto;margin:0 auto;}
.atac-qr-card p{font-size:14px !important;line-height:1.7 !important;color:var(--text-muted);margin:16px 0 0 !important;padding:0;}
.atac-qr-close{position:absolute;top:-16px;right:-16px;width:40px;height:40px;border-radius:50%;border:0;padding:0;background:var(--red);color:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,.25);transition:background .25s,transform .25s;}
.atac-qr-close:hover,.atac-qr-close:focus-visible{background:var(--red-dark);transform:scale(1.08);}
.atac-qr-close svg{width:20px;height:20px;fill:currentColor;}
html.atac-qr-modal-open,html.atac-qr-modal-open body{overflow:hidden;}

/* =====================================================================
   THANK-YOU PAGE (.atac-ty) — form confirmation, EN / ZH / KO.
   Markup lives in the Divi Theme Builder "Thank You" template body (one
   Code module per language). These rules used to sit in an inline <style>
   inside that markup; the video fade-in script is in atac-custom.js.
   ===================================================================== */
.atac-ty{
  box-sizing:border-box;position:relative;
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:clamp(64px,9vw,140px) clamp(20px,5vw,160px);
  background:var(--navy,#232c39); /* fallback before video paints */
  color:#fff;
  font-family:var(--font,'Nimbus Sans','Helvetica Neue',Helvetica,Arial,sans-serif);
  text-align:center;
  overflow:hidden;
}
.atac-ty *,.atac-ty *::before,.atac-ty *::after{box-sizing:border-box;}

/* ---- Video background + overlay ---- */
.atac-ty-bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
/* container-type:size — lets the cqw/cqh "cover" formula below compute
   against THIS box's own size, not the viewport's (same technique as
   .home-hero-video-wrap). */
.atac-ty-video{position:absolute;inset:0;container-type:size;}
.atac-ty-poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;filter:saturate(.9);transform:scale(1.02);
}
/* Divi's FitVids JS wraps the iframe in .fluid-width-video-wrapper (a 16:9
   padding-box) at runtime — that wrapper, not .atac-ty-video, becomes the
   iframe's containing block and left the video ~1000px off-centre, covering
   only part of the section. Force the wrapper to exactly fill .atac-ty-video
   so it has no say (same fix already in place for the home-hero video). */
.atac-ty-video .fluid-width-video-wrapper{
  position:absolute !important;
  inset:0 !important;
  padding:0 !important;
  width:100% !important;
  height:100% !important;
}
.atac-ty-video iframe{
  position:absolute !important;
  top:50% !important;left:50% !important;
  transform:translate(-50%,-50%);
  /* True "cover": at least as wide AND as tall as the box, centered —
     overflow is cropped by .atac-ty-bg's overflow:hidden. !important
     because FitVids sets a competing inline width/height on this element. */
  width:max(100cqw, calc(100cqh * 16 / 9)) !important;
  height:max(100cqh, calc(100cqw * 9 / 16)) !important;
  max-width:none !important;max-height:none !important;
  border:0;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .45s ease;
}
.atac-ty-video-ready .atac-ty-video iframe{opacity:1;visibility:visible;}
.atac-ty-video-failed .atac-ty-video iframe{opacity:0;visibility:hidden;}
.atac-ty-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(35,44,57,.55),rgba(35,44,57,.78)),
    rgba(35,44,57,.35);
}

.atac-ty-inner{position:relative;z-index:1;max-width:720px;margin:0 auto;}

.atac-ty-title{
  margin:0 0 18px;
  font-size:var(--h1-size,clamp(30px,4.2vw,48px));
  font-weight:800;line-height:1.1;letter-spacing:-.5px;color:#fff;
}
.atac-ty-dek{
  margin:0 auto 34px;max-width:560px;
  font-size:clamp(16px,1.3vw,18px);line-height:1.65;
  color:rgba(255,255,255,.82);
}

.atac-ty-actions{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:18px 28px;margin-bottom:clamp(44px,6vw,64px);
}
/* Solid red button — mirrors global .atac-red-btn if it isn't loaded */
.atac-ty .atac-red-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 30px;border-radius:var(--radius,5px);
  background:var(--red,#c72b35);color:#fff;
  font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.2px;
  text-decoration:none;border:0;cursor:pointer;
  transition:background .2s,transform .2s;
}
.atac-ty .atac-red-btn:hover{background:var(--red-dark,#a5222b);transform:translateY(-1px);}

/* Text link CTA with retracting underline (light-on-dark) */
.atac-ty .atac-ty-link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:15px;font-weight:600;color:#fff;text-decoration:none;
  position:relative;
}
.atac-ty .atac-ty-link::after{
  content:"";position:absolute;left:0;bottom:-4px;height:1.5px;width:100%;
  background:var(--red,#c72b35);transform:scaleX(0);transform-origin:right;
  transition:transform .3s ease;
}
.atac-ty .atac-ty-link:hover::after{transform:scaleX(1);transform-origin:left;}
.atac-ty .atac-ty-link::before{
  content:"\2192";font-weight:700;color:var(--red,#c72b35);
}

.atac-ty-links{
  padding-top:clamp(32px,4vw,44px);
  border-top:1px solid rgba(255,255,255,.18);
}
.atac-ty-links-label{
  margin:0 0 18px;font-size:12px;font-weight:700;
  letter-spacing:1.6px;text-transform:uppercase;color:rgba(255,255,255,.6);
}
.atac-ty-links ul{
  list-style:none !important;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px 12px;
}
.atac-ty-links li{
  margin:0;padding:0;list-style:none !important;
  display:block;
}
.atac-ty-links li::marker{content:none;}
.atac-ty-links a{
  display:inline-block;padding:9px 18px;border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  font-size:14px;font-weight:600;color:rgba(255,255,255,.9);
  text-decoration:none;transition:border-color .2s,background .2s,color .2s;
}
.atac-ty-links a:hover{
  border-color:var(--red,#c72b35);background:var(--red,#c72b35);color:#fff;
}

/* Chinese / Korean: roomier title and body leading; Korean never breaks
   inside a word (the body classes come from atac-multilang.php). */
.lang-zh .atac-ty-title,.lang-ko .atac-ty-title{line-height:1.25;letter-spacing:0;}
.lang-zh .atac-ty-dek,.lang-ko .atac-ty-dek{line-height:1.8;}
.lang-ko .atac-ty{word-break:keep-all;}

@media (max-width:640px){
  .atac-ty-actions{flex-direction:column;gap:16px;}
  .atac-ty .atac-red-btn{width:100%;max-width:320px;}
}

/* =====================================================================
   INLINE VIDEO — YouTube behind ATAC's own poster and controls, so it reads
   as a natively hosted video. Behaviour, and why the iframe is oversized:
   "INLINE VIDEO" in atac-custom.js.
   ===================================================================== */
.atac-iv{margin:0;}
.atac-iv-screen{
  position:relative; width:100%; aspect-ratio:16/9; isolation:isolate;
  overflow:hidden; overflow:clip;   /* clip: a hidden box can still be scrolled (focus, full-screen
                                       requests), which would slide YouTube's UI into view */
  background:#000; border-radius:0 8px 8px 8px;          /* squared top-left, as .pa-cases-title */
  box-shadow:0 18px 40px rgba(35,44,57,.18);
  -webkit-user-select:none; user-select:none;
}
.atac-iv-stage{position:absolute; inset:0; z-index:1;}
/* Twice the frame's height, centred: the 16:9 picture lands exactly in the
   frame and YouTube's edge-pinned UI falls in the clipped letterbox.
   !important beats Divi FitVids' inline sizing (same as the home hero). */
.atac-iv-stage iframe{
  position:absolute !important; left:0 !important; top:-50% !important;
  width:100% !important; height:200% !important; max-width:none !important;
  margin:0; border:0; pointer-events:none;
}
.atac-iv-stage .fluid-width-video-wrapper{
  position:absolute !important; inset:0 !important; width:auto !important; height:auto !important; padding:0 !important;
}
.atac-iv-poster{
  position:absolute; inset:0; z-index:2; width:100%; height:100%; max-width:none;
  margin:0; object-fit:cover; border-radius:0;
  transition:opacity .35s ease, visibility .35s;
}
.atac-iv.is-started:not(.is-ended) .atac-iv-poster{opacity:0; visibility:hidden;}
.atac-iv-shield{position:absolute; inset:0; z-index:3; cursor:pointer;}
.atac-iv.is-idle .atac-iv-shield{cursor:none;}

/* big play button — the whole frame is the hit area, the disc sits centred */
.atac-iv-start{
  position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; min-width:0; margin:0; padding:0; border:0; border-radius:0; box-shadow:none;
  background:linear-gradient(180deg, rgba(35,44,57,0) 35%, rgba(35,44,57,.38));
  font:inherit; line-height:1; cursor:pointer;
  transition:opacity .25s ease, visibility .25s;
}
/* after the first play the control bar is up while paused: smaller disc,
   centred in the space above the bar so it never sits on the seek line */
.atac-iv.is-started .atac-iv-start{padding-bottom:48px; background:rgba(10,14,20,.2);}
.atac-iv.is-started .atac-iv-start-icon{width:clamp(52px,17%,84px);}
.atac-iv.is-fs .atac-iv-start{padding-bottom:80px;}
.atac-iv.is-playing .atac-iv-start{opacity:0; visibility:hidden; pointer-events:none;}
/* see-through red disc inside a fainter red halo (solid on hover), one
   element: the radial gradient paints the disc (inner 80% of the radius) and the halo ring;
   sized as a share of the frame so it scales from the side column to full width */
.atac-iv-start-icon{
  --disc:rgba(199,43,53,.78);
  position:relative; display:flex; align-items:center; justify-content:center;
  width:clamp(64px,24%,120px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle closest-side, var(--disc) 80%, rgba(199,43,53,.3) calc(80% + 1px));
  color:#fff;
  transition:transform .2s ease;
}
.atac-iv-start-icon svg{width:38%; height:38%; margin-left:5%; fill:currentColor;}
.atac-iv-start:hover .atac-iv-start-icon,
.atac-iv-start:focus-visible .atac-iv-start-icon{--disc:var(--red); transform:scale(1.05);}
.atac-iv-start:focus-visible{outline:none;}
.atac-iv-start:focus-visible .atac-iv-start-icon{box-shadow:0 0 0 3px #fff;}
/* loading: a ring turns around the disc until the first frame plays */
.atac-iv.is-loading .atac-iv-start-icon::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:3px solid rgba(255,255,255,.3); border-top-color:#fff;
  animation:atac-iv-spin .8s linear infinite;
}
@keyframes atac-iv-spin{to{transform:rotate(360deg);}}

/* control bar */
.atac-iv-bar{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  padding:22px 8px 4px;
  background:linear-gradient(180deg, rgba(10,14,20,0), rgba(10,14,20,.75));
  color:#fff; transition:opacity .25s ease, visibility .25s;
}
.atac-iv:not(.is-started) .atac-iv-bar,
.atac-iv.is-idle .atac-iv-bar{opacity:0; visibility:hidden;}
.atac-iv-row{display:flex; align-items:center; gap:2px;}
.atac-iv-btn{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:34px; height:34px; min-width:0; margin:0; padding:0;
  border:0; border-radius:4px; background:none; box-shadow:none;
  color:#fff; font:inherit; line-height:1; cursor:pointer; transition:background-color .15s;
}
.atac-iv-btn:hover{background:rgba(255,255,255,.14);}
.atac-iv-btn:focus-visible{outline:2px solid #fff; outline-offset:0;}
.atac-iv-btn svg{display:block; width:22px; height:22px; fill:currentColor;}
.atac-iv-i-pause, .atac-iv-i-muted, .atac-iv-i-fsExit{display:none !important;}
.atac-iv.is-playing .atac-iv-i-play,
.atac-iv.is-muted .atac-iv-i-vol,
.atac-iv.is-fs .atac-iv-i-fs{display:none !important;}
.atac-iv.is-playing .atac-iv-i-pause,
.atac-iv.is-muted .atac-iv-i-muted,
.atac-iv.is-fs .atac-iv-i-fsExit{display:block !important;}
.atac-iv-time{
  margin-left:6px; white-space:nowrap;
  font-size:12px; font-weight:600; line-height:1; letter-spacing:.2px;
  font-variant-numeric:tabular-nums; color:rgba(255,255,255,.92);
}
.atac-iv-fs{margin-left:auto;}

/* seek bar: red fill up to --p (set by the script), thin white thumb */
.atac-iv-seek{
  --p:0%;
  -webkit-appearance:none; appearance:none; display:block;
  width:100%; height:14px; margin:0 0 2px; padding:0;
  background:transparent; border:0; cursor:pointer;
}
.atac-iv-seek:focus{outline:none;}
.atac-iv-seek:focus-visible{outline:2px solid #fff; outline-offset:2px;}
.atac-iv-seek::-webkit-slider-runnable-track{
  height:4px; border-radius:2px;
  background:linear-gradient(90deg, var(--red) var(--p), rgba(255,255,255,.32) var(--p));
}
.atac-iv-seek::-webkit-slider-thumb{
  -webkit-appearance:none; width:12px; height:12px; margin-top:-4px;
  border:0; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.atac-iv-seek::-moz-range-track{height:4px; border-radius:2px; background:rgba(255,255,255,.32);}
.atac-iv-seek::-moz-range-progress{height:4px; border-radius:2px; background:var(--red);}
.atac-iv-seek::-moz-range-thumb{width:12px; height:12px; border:0; border-radius:50%; background:#fff;}

/* full screen (the 16:9 frame goes full screen, caption stays behind) */
.atac-iv-screen:fullscreen{width:100%; height:100%; aspect-ratio:auto; border-radius:0; box-shadow:none;}
.atac-iv-screen:-webkit-full-screen{width:100%; height:100%; aspect-ratio:auto; border-radius:0; box-shadow:none;}
.atac-iv.is-fs .atac-iv-bar{padding:48px 20px 12px;}
.atac-iv.is-fs .atac-iv-btn{width:44px; height:44px;}
.atac-iv.is-fs .atac-iv-btn svg{width:28px; height:28px;}
.atac-iv.is-fs .atac-iv-time{font-size:14px;}

.atac-iv-caption{margin:14px 0 0; font-size:15px; line-height:1.4; color:var(--text-muted);}
.atac-iv-caption strong{display:block; margin-bottom:2px; font-size:17px; font-weight:700; color:var(--navy);}

@media (prefers-reduced-motion: reduce){
  .atac-iv-poster, .atac-iv-start, .atac-iv-start-icon, .atac-iv-bar{transition:none;}
  .atac-iv.is-loading .atac-iv-start-icon::after{animation-duration:2s;}
}