/* ══════════════════════════════════════════════════
   AfricanLaw — New UI Design System (Milestone 1)
   Shared header/footer/button/dropdown styling.
   Scoped under .site-nav / .site-footer / .site-* classes
   so it does not affect pages/components outside Milestone 1
   (the existing site reuses bare <nav>/<footer> tags elsewhere
   for unrelated dropdowns, so bare-tag selectors are avoided).
   Theme: reuses the existing html.dark-mode / html.light-mode
   toggle already wired in front/blocks/header.blade.php.
══════════════════════════════════════════════════ */

:root{
  --al-navy:#081420;--al-navy2:#0d1f30;--al-navy3:#112436;
  --al-orange:#E24412;--al-orange2:#c93c0f;
  --al-white:#fff;--al-w80:rgba(255,255,255,.80);--al-w55:rgba(255,255,255,.55);
  --al-w30:rgba(255,255,255,.30);--al-w12:rgba(255,255,255,.12);--al-w07:rgba(255,255,255,.07);
  --al-card-bg:rgba(255,255,255,.05);--al-card-border:rgba(255,255,255,.10);
  --al-green:#3dd68c;--al-blue:#7eb8f7;--al-amber:#E2A012;
}

html.light-mode{
  --al-navy:#f4f6f8;--al-navy2:#ffffff;--al-navy3:#eef1f4;
  --al-white:#0f1c28;--al-w80:rgba(15,28,40,.80);--al-w55:rgba(15,28,40,.55);
  --al-w30:rgba(15,28,40,.30);--al-w12:rgba(15,28,40,.10);--al-w07:rgba(15,28,40,.05);
  --al-card-bg:rgba(0,0,0,.03);--al-card-border:rgba(0,0,0,.08);
}

/* Base typography only (not background/color — those stay page-defined to avoid
   a wholesale reskin of pages outside Milestone 1). webflow.css sets body to Arial;
   this brings the new design's Montserrat in as the sitewide default typeface, which
   already-styled elements on other pages override locally as before. */
body{font-family:'Montserrat',sans-serif;}
/* atipa.webflow.css's `.body{background-color:var(--rich-black)}` (the body
   tag also carries class="body") beats a bare `body{}` tag selector on pure
   specificity regardless of load order — that legacy rule was silently
   driving the page background everywhere. It only looked correct in dark
   mode by coincidence, since --rich-black's dark value happens to match the
   same hex as --al-navy; light mode had no such coincidence and rendered
   plain white instead of the reference's #f4f6f8. Matching specificity here
   (.body, loaded after atipa.webflow.css) puts the real design tokens back
   in charge in both themes. */
.body{background:var(--al-navy) !important;color:var(--al-white) !important;}

/* ── Buttons: one shared base + two color modifiers, composed by every
   button variant in the design (nav pills and page-body CTAs alike).
   Values matched exactly to `.btn-ghost`/`.btn-primary` (nav) and
   `.cta-demo`/`.cta-main` (page body) in the reference HTML — both use the
   same 4px radius / uppercase-on-primary / letter-spacing system, differing
   only in padding, which stays per-context. `.ui-btn`/`.ui-btn-primary`/
   `.ui-btn-ghost` are the reusable names for markup written from here on. ─── */
.ui-btn,.site-btn-primary,.site-btn-ghost,.cta-main,.cta-demo,.pricing-cta{
  font-family:'Montserrat',sans-serif;font-weight:600;
  border-radius:4px;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;
  text-decoration:none;transition:background .2s,border-color .2s,color .2s;
}
.ui-btn,.site-btn-primary,.site-btn-ghost{font-size:12px;letter-spacing:.08em;padding:9px 18px;}
.ui-btn-primary,.site-btn-primary,.cta-main,.pricing-cta-main{
  background:var(--al-orange);color:var(--al-white);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
}
.ui-btn-primary:hover,.site-btn-primary:hover,.cta-main:hover,.pricing-cta-main:hover{background:var(--al-orange2);color:var(--al-white);}
.ui-btn-ghost,.site-btn-ghost,.cta-demo,.pricing-cta-ghost{background:transparent;color:var(--al-w80);border-color:var(--al-w30);text-transform:uppercase;}
html.light-mode .site-btn-ghost,html.light-mode .ui-btn-ghost{color:#0f1c28;border-color:rgba(15,28,40,.25);}
.ui-btn-ghost:hover,.site-btn-ghost:hover,.cta-demo:hover,.pricing-cta-ghost:hover{border-color:var(--al-w55);color:var(--al-orange);}
html.light-mode .site-btn-ghost:hover,html.light-mode .ui-btn-ghost:hover{border-color:rgba(15,28,40,.5);color:#0f1c28;}
.site-btn-ghost:hover {
  border-color: var(--al-orange);
}
/* ── Nav ─────────────────────────────────────────── */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:0 56px;height:66px;background:rgba(8,20,32,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--al-w12);font-family:'Montserrat',sans-serif;
}
html.light-mode .site-nav{background:rgba(244,246,248,.94);border-bottom-color:rgba(15,28,40,.10);}
/* nav is fixed (removed from flow) — reserve the same space at the top of the page */
.wrapper{padding-top:66px;}

/* Text wordmark — matches the reference nav-logo exactly and reuses the same
   token-driven approach as the footer logo, replacing the old dual-PNG
   image swap (two separate raster logo files, restyled and exported
   independently, that never quite matched the footer's clean text mark or
   each other across themes). */
.site-nav-logo-text{display:flex;align-items:center;flex-shrink:0;font-size:22px;font-weight:800;
  letter-spacing:-.5px;cursor:pointer;text-decoration:none;}
.site-nav-logo-text span:first-child{color:rgba(200,213,224,.9);}
html.light-mode .site-nav-logo-text span:first-child{color:#0f1c28;}
.site-nav-logo-text span:last-child{color:var(--al-orange);}

.site-nav-links{display:flex;align-items:center;gap:30px;flex:1;justify-content:center;}
.site-nav-links a,.site-nav-dropdown-label{
  font-size:13px;font-weight:500;color:var(--al-w55);letter-spacing:.02em;cursor:pointer;background:none;border:none;
  font-family:inherit;text-decoration:none;padding:0;display:inline-flex;align-items:center;gap:5px;
}
.site-nav-links a:hover,.site-nav-dropdown-label:hover{color:var(--al-white);}
.site-nav-links a.site-nav-active{color:var(--al-orange);}
.site-nav-dropdown-label::after{content:'▾';font-size:10px;}
html.light-mode .site-nav-links a,html.light-mode .site-nav-dropdown-label{color:rgba(15,28,40,.55);}
html.light-mode .site-nav-links a:hover,html.light-mode .site-nav-dropdown-label:hover{color:#0f1c28;}
html.light-mode .site-nav-links a.site-nav-active{color:var(--al-orange);}

.site-nav-dropdown{position:relative;}
.site-nav-dropdown-menu{
  position:absolute;top:calc(100% + 14px);left:0;transform:translateY(6px);
  background:var(--al-navy2);border:1px solid var(--al-card-border);border-radius:10px;
  min-width:160px;padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.35);
  opacity:0;visibility:hidden;transform:translate(-50%,6px);transition:opacity .15s,transform .15s,visibility .15s;
}
.site-nav-dropdown:hover .site-nav-dropdown-menu,
.site-nav-dropdown.site-open .site-nav-dropdown-menu{
  opacity:1;visibility:visible;transform:translateY(0);
}
.site-nav-dropdown-menu a{
  display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:6px;font-size:13px;color:var(--al-w55);
}
.site-nav-dropdown-menu a svg{flex-shrink:0;}
.site-nav-dropdown-menu a:hover{background:rgba(226, 68, 18, .08);color:var(--al-white);}

.site-nav-ctas{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.site-nav-ctas button,
.site-nav-ctas a {
  font-family: 'Montserrat', sans-serif;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}
/* Audience segmented control — matches .audience-toggle/.aud-btn exactly */
.site-audience-toggle{display:flex;background:var(--al-w07);border:1px solid var(--al-w12);border-radius:4px;overflow:hidden;margin-left:8px;}
.site-audience-toggle:hover {
  border-color: var(--al-orange);
}
html.light-mode .site-audience-toggle{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.10);}
.site-aud-btn{
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:8px 14px;
  cursor:pointer;color:var(--al-w55);text-decoration:none;transition:all .2s;
}

html.light-mode .site-aud-btn{color:rgba(15,28,40,.50);}
.site-aud-btn.site-active{background:var(--al-orange);color:var(--al-white);}
html.light-mode .site-aud-btn.site-active{color:var(--al-white);}

.site-theme-toggle{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--al-w12);background:transparent;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
}
.site-theme-toggle:hover {
  border-color: var(--al-orange);
  color: var(--al-orange);
}
.site-theme-toggle img{width:18px;height:18px;}
/* The icons' visibility is normally set by JS in header.blade.php, but that
   script sits in @push('js') and only runs once everything else at the bottom
   of the page has loaded — so on first paint (and especially on a full page
   reload like a filter/search submit) both icons render at once until the
   script finally executes. html.dark-mode/light-mode is set synchronously in
   <head> before the body ever paints (see main.blade.php), so driving
   visibility from that class here removes the flash entirely; the JS's own
   style.display toggle still runs afterwards and is harmless/redundant. */
html.dark-mode #light_mode_icon,html.light-mode #dark_mode_icon{display:none;}

/* Cart (existing functional markup — visuals only) */
.cart-wrapper{position:relative;display:flex;align-items:center;}
.cart-icon-section{position:relative;width:36px;height:36px;border-radius:50%;border:1px solid var(--al-w12);
  display:flex;align-items:center;justify-content:center;cursor:pointer;}
.cart-icon-section .cart-icon{width:16px;height:16px;}
.cart-count{position:absolute;top:-6px;right:-6px;background:var(--al-orange);color:#fff;font-size:10px;
  font-weight:700;min-width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0 3px;}
.cart-dropdown-menu{display:none;position:absolute;top:calc(100% + 12px);right:0;width:280px;max-height:360px;
  overflow-y:auto;background:var(--al-navy2);border:1px solid var(--al-card-border);border-radius:10px;
  box-shadow:0 18px 40px rgba(0,0,0,.35);z-index:130;}
.cart-dropdown-menu.show-cart-dropdown-menu{display:block;}
.cart-dropdown-data{list-style:none;margin:0;padding:8px;font-size:12.5px;color:var(--al-w80);}
.cart-dropdown-data .empty{padding:14px;text-align:center;color:var(--al-w55);}
.cart-view-all-button{display:block;text-align:center;padding:10px;font-size:12px;font-weight:600;
  color:var(--al-orange);border-top:1px solid var(--al-card-border);}

/* Burger (custom toggle, replaces removed Webflow interaction). The extra
   .site-nav-ctas prefix matters: `.site-nav-ctas button, .site-nav-ctas a`
   (specificity 0,1,1) was beating a bare `.site-burger{display:none}`
   (0,1,0) since the burger button lives inside .site-nav-ctas — so it
   rendered at every viewport width, desktop included, not just mobile. */
.site-nav-ctas .site-burger{display:none;width:36px;height:36px;border:none;background:transparent;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;flex-shrink:0;}
.site-burger span{display:block;width:20px;height:2px;background:var(--al-white);transition:transform .2s,opacity .2s;}
.site-mobile-menu.site-open ~ .site-nav .site-burger span:nth-child(1),
.site-nav .site-burger.site-active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.site-nav .site-burger.site-active span:nth-child(2){opacity:0;}
.site-nav .site-burger.site-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Ask-a-lawyer / Request for Proposal overlay (.find-a-lawyer, existing real
   functionality) previously opened only via a Webflow IX2 interaction bound to
   one specific Home-page button — unusable from the nav, which renders on every
   page. `.site-open` (toggled by openRequestProposal()/closeRequestProposal()
   in header.blade.php) drives the same visible state directly, independent of
   Webflow, so the nav's "Request a Proposal" button works on every page and the
   Home hero's trigger stays consistent with it. */
.find-a-lawyer.site-open{display:flex !important;opacity:1 !important;transform:none !important;-webkit-transform:none !important;}
.find-a-lawyer.site-open .find-a-lawyer-container{opacity:1 !important;transform:none !important;-webkit-transform:none !important;}
.find-a-lawyer.site-open .close-find-a-lawyer{opacity:1 !important;}
/* webflow.css's `.w-slider-arrow-left,.w-slider-arrow-right{position:fixed;
   top:0;right:0;bottom:0;left:0}` is only a no-JS fallback — Webflow's own
   runtime normally replaces it with `position:absolute` positioned against
   the slider once it initializes a slider on page load. Because this modal
   is toggled independently of that flow (see comment above), the Next/Prev
   arrows kept the raw fallback and rendered pinned to the browser viewport's
   corner instead of inside the modal card — visually "far from the form".
   Wanted instead: the same corner-badge treatment as .close-find-a-lawyer
   (hanging at the card's corner, half on/half off — see that comment below),
   applied to the opposite (bottom) corner. That means positioning against
   .find-a-lawyer-container, the same box the close button uses — not against
   #ask-question-slider (`.w-slider`'s own `position:relative`), which sits
   well inside the card and would only place the button in the *middle* of
   the reserved bottom padding, not at the card's actual corner. Neutralizing
   the slider's position here makes the browser look further up the tree and
   land on .find-a-lawyer-container instead, matching the close button's
   coordinate space exactly.
   `margin:0` clears a site-wide `.w-slider-arrow-left,.w-slider-arrow-right
   {margin-top:30vh}` (main.blade.php's inline <style>, meant to nudge the
   old position:fixed fallback down from dead-center) which is still in
   effect and — for an absolutely positioned box with top:auto — factors
   directly into the top-offset calculation otherwise. */
.find-a-lawyer #ask-question-slider{position:static !important;}
.find-a-lawyer .w-slider-arrow-left,.find-a-lawyer .w-slider-arrow-right{
  position:absolute !important;top:auto !important;bottom:-16px !important;margin:0 !important;
}
.find-a-lawyer .w-slider-arrow-left{left:-16px !important;right:auto !important;}
.find-a-lawyer .w-slider-arrow-right{right:-16px !important;left:auto !important;}
/* .close-find-a-lawyer is a DOM sibling of .find-a-lawyer-container, not a
   descendant (see header.blade.php), so its original `position:absolute;
   top:5%;right:2%` (atipa.webflow.css) resolved against the full-viewport
   `.find-a-lawyer` overlay — not the centered card — landing far from the
   card's actual corner on most screens.
   `.find-a-lawyer{overflow:auto}` makes the WHOLE overlay (card included)
   one scrollable unit for forms taller than the viewport — an earlier fix
   made this `position:absolute` against .find-a-lawyer-container to align
   it with the card's corner, but that made it scroll away with the form on
   taller steps (Get Expert Advice / Ask a Lawyer), leaving it unreachable
   without scrolling back up first — the close button must stay reachable
   at all times. `position:fixed` keeps it pinned to the viewport regardless
   of how far the modal content scrolls; the JS below
   (front/blocks/header.blade.php) sets its top/left inline to track the
   card's actual on-screen corner, updated on open and while scrolling. */
.find-a-lawyer-container{position:relative;}
/* top/left are intentionally NOT set here (and not !important) — the JS
   below sets them as inline styles per-open/per-scroll, and inline styles
   already beat these plain (non-!important) rules on their own. `right`
   only needs clearing since atipa.webflow.css's original `right:2%` would
   otherwise conflict with the JS-driven `left`. */
.close-find-a-lawyer{position:fixed !important;right:auto;bottom:auto;}

/* ── Mobile nav panel ────────────────────────────── */
.site-mobile-menu{
  display:none;position:fixed;inset:0;z-index:150;background:var(--al-navy);
  overflow-y:auto;padding:24px;
}
.site-mobile-menu.site-open{display:block;}
.site-mobile-menu-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;}
.site-mobile-close{width:36px;height:36px;border-radius:50%;border:1px solid var(--al-w12);background:transparent;
  color:var(--al-white);font-size:16px;cursor:pointer;}
.site-mobile-links{list-style:none;margin:0 0 20px;padding:0;}
.site-mobile-links li{border-bottom:1px solid var(--al-w07);}
.site-mobile-links a{display:block;padding:14px 4px;font-size:15px;color:var(--al-w80);text-decoration:none;}
.site-mobile-links a.site-nav-active{color:var(--al-orange);}
.site-mobile-ctas{display:flex;flex-direction:column;gap:10px;margin-top:20px;}
.site-mobile-ctas .site-btn-primary,.site-mobile-ctas .site-btn-ghost{justify-content:center;width:100%;}
.site-mobile-socials{display:flex;gap:12px;margin-top:28px;}
.site-mobile-socials a{width:34px;height:34px;border-radius:50%;background:var(--al-w07);border:1px solid transparent;
  display:flex;align-items:center;justify-content:center;color:var(--al-w55);transition:border-color .2s,color .2s;}
.site-mobile-socials a:hover{border-color:var(--al-orange);color:var(--al-orange);}
.site-mobile-socials svg{width:16px;height:16px;}

/* 1180px, not 960px — the full desktop nav (logo + links + audience toggle +
   theme button + Sign In + CTA) needs ~1150px of natural content width to
   fit on one line; below that it doesn't wrap, it just overflows its
   container, so the mobile-burger collapse has to trigger before that
   point, not at the generic 960px breakpoint the rest of the page uses. */
@media (max-width:1180px){
  .site-nav{padding:0 20px;}
  .site-nav-links{display:none;}
  .site-nav-ctas .site-btn-ghost,.site-nav-ctas .site-btn-primary,.site-nav-ctas .site-audience-toggle{display:none;}
  .site-nav-ctas .site-burger{display:flex;}
}

/* ── Footer ──────────────────────────────────────── */
.site-footer{
  /* !important: the legacy `.footer-main` class (kept alongside `.site-footer`
     for out-of-scope pages' scroll JS — see comment on the element) carries its
     own theme-flipping `background-color:var(--rich-black)` rule from an inline
     <style> block later in <head> than this file, which otherwise wins the tie. */
  background:rgba(0,0,0,.28) !important;border-top:1px solid var(--al-w07);
  font-family:'Montserrat',sans-serif;padding:64px 80px 40px;
}
/* Reference sets a much lighter footer overlay in light mode
   (html[data-theme="light"] footer{background:rgba(0,0,0,.04)}) — this was
   missing, so the footer stayed at the dark-mode .28 alpha value in light
   mode too, reading as a noticeably darker band than the reference. */
html.light-mode .site-footer{background:rgba(0,0,0,.04) !important;border-top-color:rgba(0,0,0,.08);}
.site-footer-top{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;
  padding-bottom:0;border-bottom:none;margin-bottom:52px;
}
.site-footer-logo{font-size:24px;font-weight:800;color:var(--al-white);margin-bottom:16px;}
.site-footer-logo span:first-child{color:rgba(200,213,224,.85);}
.site-footer-logo span:last-child{color:var(--al-orange);}
html.light-mode .site-footer-logo span:first-child{color:#0f1c28;}
.site-footer-tagline{font-size:12px;color:var(--al-w55);line-height:1.75;max-width:260px;margin-bottom:24px;}
html.light-mode .site-footer-tagline{color:rgba(15,28,40,.45);}
.site-footer-socials{display:flex;gap:10px;}
.site-footer-socials a{width:34px;height:34px;border-radius:50%;background:transparent;border:1px solid var(--al-w12);
  display:flex;align-items:center;justify-content:center;color:var(--al-w55);transition:border-color .2s,color .2s;}
.site-footer-socials a:hover{border-color:var(--al-orange);color:var(--al-orange);}
html.light-mode .site-footer-socials a{border-color:rgba(0,0,0,.15);}
html.light-mode .site-footer-socials a:hover{border-color:var(--al-orange);}
.site-footer-socials svg{width:15px;height:15px;}
.site-footer-col-title{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--al-white);margin-bottom:20px;}
html.light-mode .site-footer-col-title{color:#0f1c28;}
.site-footer-links{list-style:none;margin:0;padding:0;}
.site-footer-links li{margin-bottom:10px;}
.site-footer-links a{font-size:12px;color:var(--al-w55);text-decoration:none;transition:color .2s;}
.site-footer-links a:hover{color:var(--al-white);}
.site-footer-contact-block{margin-top:24px;font-size:11px;}
.site-footer-contact-line{font-size:11px;color:var(--al-w55);margin-top:4px;}
.site-footer-contact-line:first-child{margin-top:0;}
.site-footer-contact-icon{display:flex;align-items:center;gap:5px;}
.site-footer-contact-icon svg{flex-shrink:0;}
.site-footer-contact-location{color:var(--al-w30);margin-top:8px;}
.site-footer-bottom{
  padding-top:32px;border-top:1px solid var(--al-w07);display:flex;align-items:center;
  justify-content:space-between;flex-wrap:wrap;gap:12px;
}
html.light-mode .site-footer-bottom{border-top-color:rgba(0,0,0,.08);}
.site-footer-copy{font-size:11px;color:var(--al-w30);}
.site-footer-legal{display:flex;gap:20px;list-style:none;margin:0;padding:0;}
.site-footer-legal a{font-size:11px;color:var(--al-w30);text-decoration:none;transition:color .2s;}
.site-footer-legal a:hover{color:var(--al-w55);}

@media (max-width:900px){
  .site-footer-top{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .site-footer{padding:44px 20px 30px;}
  .site-footer-top{grid-template-columns:1fr;}
  .site-footer-bottom{flex-direction:column;align-items:flex-start;}
  /* The Tawk.to live-chat bubble is fixed to the bottom-right corner of the
     viewport on every page (see main.blade.php's Tawk.to embed). The old/
     production footer had enough natural bottom clearance (a taller legacy
     layout) that the bubble never sat over any text; this redesigned
     footer's legal-links row sits much closer to the true bottom edge, so at
     full mobile scroll the bubble covered "Privacy"/"Cookies". Reserving
     extra bottom space here — clear of the widget's ~56px bubble plus its
     own offset from the edge — keeps the legal row visible above it, same
     as production, without touching the third-party widget itself. */
  .site-footer-bottom{padding-bottom:64px;}
}

/* ══════════════════════════════════════════════════
   Home page — shared marketing components
   (used by both the Client and Lawyer Home variants;
   class names match the new design 1:1, none collide
   with existing front-end markup — verified by grep.)
══════════════════════════════════════════════════ */

.wrap{max-width:none;margin:0;padding:0 80px;}
.pad{padding:84px 0;}
.sect-alt{background:rgba(255,255,255,.02);border-top:1px solid var(--al-w07);border-bottom:1px solid var(--al-w07);}
html.light-mode .sect-alt{background:rgba(0,0,0,.015);}
.section-header{margin-bottom:48px;}
.section-label{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--al-orange);margin-bottom:12px;}
.section-h2{font-family:'EB Garamond',Georgia,serif;font-size:clamp(28px,4vw,40px);font-weight:600;color:var(--al-white);line-height:1.2;margin-top:0;margin-bottom:14px;}
.section-sub{font-size:14px;color:var(--al-w55);line-height:1.75;text-align: left;}
.section-header-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;}

/* Base + hover declarations for .cta-main/.cta-demo/.pricing-cta live in the
   shared .ui-btn rule above; this just sets their larger page-body padding/gap.
   font-size:12px is added explicitly here — none of these classes ever set
   their own, so they were inheriting the legacy webflow.css `body{font-size:
   14px}` instead of the reference's 12px, making every primary/secondary CTA
   button on the site render one size too large.
   padding/gap were a single compromise value shared across all three
   (13px 24px / 8px gap), matching none of them — checked against every
   reference HTML file (80+, including lawyer-profile.html) and each of
   these is 100% consistent site-wide at its own distinct value:
   .cta-main padding:15px 30px, gap:10px; .cta-demo padding:14px 22px,
   gap:8px; .pricing-cta padding:13px (no gap needed, no icon). The 13px 24px
   compromise made every .cta-main/.cta-demo button render visibly shorter
   than the reference on every page that uses them. */
.cta-main{padding:15px 30px;gap:10px;font-size:12px;}
.cta-demo{padding:14px 22px;gap:8px;font-size:12px;}
.pricing-cta{padding:13px;font-size:12px;}
.cta-main:hover,.pricing-cta:hover {
  border-color: var(--al-orange);
}
.cta-demo:hover {
  border-color: var(--al-orange);
  color: var(--al-orange);
}


/* Hero — reference has no max-width cap on .hero-inner (it's edge-to-edge,
   just padded), so the section fills the viewport width like every other
   section rather than floating in a fixed-width centered column. */
.hero{position:relative;padding:64px 0 60px;overflow:hidden;}
.hero-network{position:absolute;inset:0;width:100%;height:100%;opacity:.2;pointer-events:none;}
/* .hero-glow{position:absolute;top:-20%;right:-10%;width:600px;height:600px;border-radius:50%;
  background: radial-gradient(circle, rgba(226,68,18,.08) 0%, transparent 70%);pointer-events:none;} */
.hero-glow {
  position: absolute;
  top: 10%;  /* ← CHANGE from -20% */
  right: -5%;  /* ← CHANGE from -10% */
  width: 700px;  /* ← CHANGE from 600px */
  height: 700px;  /* ← CHANGE from 600px */
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226,68,18,.08) 0%, transparent 70%);
  pointer-events: none;
}
.hero-inner{position:relative;padding:0 80px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
/* Lawyer hero has no dashboard mockup — reference uses a single left-anchored
   column (max-width:780px), not the two-column centered grid the Client hero
   uses, so it needs its own layout rather than sharing .hero-inner's grid. */
.hero-inner.hero-inner--lawyer{display:block;max-width:780px;margin:0;text-align:left;}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:700;
  color:var(--al-orange);text-transform:uppercase;letter-spacing:.2em;margin-bottom:28px;max-width:100%;
  background:rgba(226,68,18,.10);border:1px solid rgba(226,68,18,.25);padding:6px 14px;border-radius:3px;}
.hero-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--al-orange);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
/* Client reference uses a fixed 52px .hero-h1 with no responsive scaling at all;
   clamp() reproduces that exact value at desktop widths while staying safe on
   narrow viewports the static reference was never tested against. */
.hero-h1{font-family:'EB Garamond',Georgia,serif;font-size:clamp(32px,4.5vw,52px);font-weight:600;
  line-height:1.15;color:var(--al-white);margin-bottom:22px;}
.hero-h1 em{color:var(--al-orange);font-style:italic;}
/* Lawyer reference specifies its own clamp() formula for .hero-h1 (different
   font-size/line-height/margin from Client) — kept as a page-specific override
   rather than forcing one shared value across both hero variants. */
.hero-inner--lawyer .hero-h1{font-size:clamp(36px,5.6vw,56px);line-height:1.12;margin-bottom:20px;}
/* max-width was a single compromise value (520px) shared by both hero
   variants, matching neither reference exactly: the Client reference caps
   .hero-sub at 480px (it sits in a narrower grid column, alongside the
   dashboard mockup), while the Lawyer reference — a single wide column, no
   mockup — caps it at 620px. Splitting these to match each reference
   precisely, same pattern as .hero-h1 above, instead of a middle-ground
   guess that made both look off. */
.hero-sub{font-size:15px;color:var(--al-w55);line-height:1.75;max-width:480px;margin-bottom:38px;}
.hero-inner--lawyer .hero-sub{max-width:620px;margin-bottom:34px;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:36px;}
.hero-social-proof{display:flex;align-items:center;gap:18px;padding-top:26px;border-top:1px solid var(--al-w12);flex-wrap:wrap;}
.sp-stat{display:flex;flex-direction:column;align-items: center;}
.sp-val{font-size:22px;font-weight:800;color:var(--al-orange);}
.sp-label{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--al-w55);margin-top:3px;}
.sp-div{width:1px;height:28px;background:var(--al-w12);}

/* Platform Showcase mockup (illustrative product snapshot — static, not live data).
   Follows the page's own light/dark theme like every other card (same pattern as
   the hero dashboard-frame), so every layer here uses theme-flip tokens, not
   fixed colors. */
.platform-screens{position:relative;height:420px;}
.screen-main{position:absolute;top:0;left:0;right:60px;background:var(--al-navy2);border:1px solid var(--al-w12);
  border-radius:10px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4);}
/* bottom:-50px (vs. the reference's literal -20px) keeps the layered second-screen
   effect while landing the overlap on the table's empty margin instead of across
   the Status column/last row — the reference's own smaller admin-stats content
   made -20px work there, but ours renders slightly taller. */
.screen-overlay{position:absolute;bottom:-100px;right:0;width:65%;background:var(--al-navy3);border:1px solid var(--al-w12);
  border-radius:10px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.3);}
.screen-topbar{background:var(--al-navy);border-bottom:1px solid var(--al-w07);padding:8px 14px;
  display:flex;align-items:center;justify-content:space-between;}
.screen-dots{display:flex;gap:5px;}
.screen-dot{width:8px;height:8px;border-radius:50%;}
.screen-title-bar{font-size:10px;font-weight:600;color:var(--al-w55);}
.screen-content{padding:14px;}
.mini-table{width:100%;border-collapse:collapse;}
.mini-table th{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--al-w30);
  padding:4px 8px;text-align:left;border-bottom:1px solid var(--al-w07);}
.mini-table td{font-size:10px;color:var(--al-w80);padding:6px 8px;border-bottom:1px solid var(--al-w07);}
.mini-table tr:last-child td{border-bottom:none;}
.mini-badge{display:inline-block;font-size:8px;font-weight:700;padding:2px 7px;border-radius:10px;}
.badge-orange{background:rgba(226,68,18,.15);color:var(--al-orange);}
.badge-green{background:rgba(61,214,140,.15);color:var(--al-green);}
.badge-blue{background:rgba(126,184,247,.15);color:var(--al-blue);}
.badge-amber{background:rgba(226,160,18,.15);color:var(--al-amber);}
.admin-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px;}
.admin-stat{background:var(--al-w07);border-radius:5px;padding:8px;text-align:center;}
.admin-val{font-size:16px;font-weight:800;color:var(--al-orange);}
.admin-lbl{font-size:8px;color:var(--al-w30);margin-top:2px;}

/* Hero dashboard mockup (illustrative product snapshot — static, not live data) */
.hero-right{position:relative;}
.hero-badge2{position:absolute;top:30px;right:-20px;background:var(--al-orange);border-radius:8px;
  padding:12px 16px;box-shadow:0 8px 24px rgba(226,68,18,.3);z-index:2;}
.badge2-val{font-size:20px;font-weight:800;color:#fff;}
.badge2-label{font-size:10px;color:rgba(255,255,255,.75);margin-top:2px;}
/* Dashboard mockup follows the page's own light/dark theme, same as every
   other card on this page (.preview-panel, .aud-feature-card, etc.) — not a
   fixed-color screenshot. */
.dashboard-frame{background:var(--al-navy2);border:1px solid var(--al-w12);border-radius:12px;
  overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.25),0 0 0 1px var(--al-w07);}
.db-topbar{background:var(--al-navy);border-bottom:1px solid var(--al-w12);padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;}
.db-logo{font-size:16px;font-weight:800;}
.db-logo span:first-child{color:rgba(200,213,224,.85);}
html.light-mode .db-logo span:first-child{color:#0f1c28;}
.db-logo span:last-child{color:var(--al-orange);}
.db-search{flex:1;max-width:260px;margin:0 20px;background:var(--al-w07);border:1px solid var(--al-w12);
  border-radius:4px;padding:6px 12px;font-size:11px;color:var(--al-w55);font-family:'Montserrat',sans-serif;outline:none;}
.db-topbar-right{display:flex;align-items:center;gap:10px;}
.db-icon{width:28px;height:28px;border-radius:50%;background:var(--al-w07);border:1px solid var(--al-w12);
  display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--al-w80);}
.db-layout{display:flex;height:480px;}
.db-sidebar{width:180px;background:var(--al-navy);border-right:1px solid var(--al-w07);padding:10px 0;flex-shrink:0;}
.db-nav-item{display:flex;align-items:center;gap:10px;padding:8px 16px;font-size:11px;font-weight:500;color:var(--al-w55);cursor:default;}
.db-nav-item.active{background:var(--al-orange);color:var(--al-white);margin:0 8px;border-radius:4px;padding:8px 10px;}
.db-content{flex:1;padding:20px;overflow:hidden;}
.db-content-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.db-page-title{font-size:15px;font-weight:700;color:var(--al-white);}
.db-date-btn{display:flex;align-items:center;gap:6px;background:var(--al-w07);border:1px solid var(--al-w12);
  border-radius:4px;padding:5px 10px;font-size:10px;color:var(--al-w55);}
.db-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
.db-stat-card{background:var(--al-card-bg);border:1px solid var(--al-card-border);border-radius:8px;
  padding:12px 14px;position:relative;overflow:hidden;}
.db-stat-card.accent{background:rgba(226,68,18,.10);border-color:rgba(226,68,18,.20);}
.db-stat-label{font-size:10px;font-weight:500;color:var(--al-w55);margin-bottom:6px;}
.db-stat-val{font-size:18px;font-weight:800;color:var(--al-orange);}
.db-stat-change{font-size:9px;color:var(--al-w30);margin-top:3px;}
.db-stat-icon{position:absolute;right:12px;top:12px;font-size:18px;opacity:.25;}
.db-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.db-widget{background:var(--al-card-bg);border:1px solid var(--al-card-border);border-radius:8px;padding:14px;}
.db-widget-title{font-size:11px;font-weight:700;color:var(--al-white);margin-bottom:10px;}
.db-matter-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.db-matter-name{font-size:10px;color:var(--al-w80);}
.db-matter-status{font-size:9px;font-weight:600;padding:2px 8px;border-radius:20px;}
.db-status-pending{background:rgba(226,68,18,.15);color:var(--al-orange);}
.db-status-active{background:rgba(61,214,140,.15);color:var(--al-green);}
.db-status-done{background:rgba(126,184,247,.15);color:var(--al-blue);}
.db-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;font-size:9px;}
.db-cal-day{text-align:center;padding:3px;color:var(--al-w30);}
.db-cal-date{text-align:center;padding:3px 1px;border-radius:3px;color:var(--al-w55);font-size:9px;}
.db-cal-date.today{background:var(--al-orange);color:#fff;}
.db-cal-date.has-event{background:rgba(226,68,18,.15);color:var(--al-orange);}
.hero-badge{position:absolute;bottom:-18px;left:-24px;display:flex;align-items:center;gap:10px;
  background:var(--al-navy2);border:1px solid var(--al-card-border);border-radius:10px;padding:10px 16px;
  box-shadow:0 14px 30px rgba(0,0,0,.3);z-index:2;}
.badge-dot{width:8px;height:8px;border-radius:50%;background:var(--al-green);flex-shrink:0;}
.badge-text{font-size:12px;font-weight:700;color:var(--al-white);}
.badge-sub{font-size:10.5px;color:var(--al-w55);}

/* Partner strip */
.partner-strip{padding:24px 80px;border-top:1px solid var(--al-w07);border-bottom:1px solid var(--al-w07);
  background:rgba(255,255,255,.02);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;}
html.light-mode .partner-strip{background:rgba(0,0,0,.02);}
.partner-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--al-w55);flex-shrink:0;}
.partner-logos{display:flex;gap:28px;flex-wrap:wrap;}
.partner-logo{font-size:13px;font-weight:700;color:var(--al-w55);}
.partner-logo-img{height:24px;width:auto;max-width:140px;object-fit:contain;
  filter:grayscale(100%) opacity(.6);transition:filter .2s;}
.partner-logo-img:hover{filter:grayscale(0%) opacity(1);}

/* Audience / Why-Join feature cards (shared shape) */
.audience-section{padding:100px 80px;position:relative;}
.audience-section-bg{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 20% 50%,rgba(226,68,18,.04),transparent);}
html.light-mode .audience-section-bg{background:radial-gradient(ellipse 60% 50% at 20% 50%,rgba(226,68,18,.03),transparent);}
.audience-tabs{display:flex;gap:8px;background:var(--al-w07);border:1px solid var(--al-card-border);border-radius:10px;padding:4px;}
.aud-tab{padding:9px 18px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--al-w55);cursor:pointer;}
.aud-tab.active{background:var(--al-orange);color:var(--al-white);}
.audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px;}
/* ── Cards: one shared base (background/border/radius), composed by every
   card variant. `.ui-card` is the reusable name for markup written from
   here on; the existing card classes now share these declarations instead
   of each repeating them. ─── */
.ui-card,.aud-feature-card,.feature-card,.testimonial-card,.pricing-card{
  background:var(--al-card-bg);border:1px solid var(--al-card-border);border-radius:12px;transition: border-color .2s, background .2s;
}
/* Add this hover block */
.ui-card:hover,.aud-feature-card:hover,.feature-card:hover,.testimonial-card:hover,.pricing-card:hover{
  border-color:rgba(226,68,18,.3);
  background:rgba(226,68,18,.04);
}
/* If you need dark mode support, add this too */
html.dark-mode .ui-card:hover,
html.dark-mode .aud-feature-card:hover,
html.dark-mode .feature-card:hover{
  background:rgba(226,68,18,.08); /* slightly more visible in dark mode */
}

.aud-feature-card{padding:28px;}
.aud-card-icon{width:48px;height:48px;border-radius:8px;background:rgba(226,68,18,.10);color:var(--al-orange);
  border:1px solid rgba(226,68,18,.20);display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.aud-card-icon svg{width:28px;height:28px;}
.aud-card-title{font-size:14px;font-weight:700;color:var(--al-white);margin-bottom:6px;}
.aud-card-body{font-size:12.5px;color:var(--al-w55);line-height:1.65;}

/* Platform section */
.platform-section{padding:100px 80px;background:rgba(255,255,255,.02);border-top:1px solid var(--al-w07);border-bottom:1px solid var(--al-w07);}
html.light-mode .platform-section{background:rgba(0,0,0,.02);border-color:rgba(0,0,0,.07);}
.platform-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.pia-tabs{display:flex;gap:8px;margin-bottom:28px;}
.pia-tab {
  background: var(--al-w07);
  border: 1px solid var(--al-w12);
  color: var(--al-w55);
  padding: 9px 18px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  line-height: 1;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
}
.pia-tab.active{background:var(--al-orange);border-color:var(--al-orange);color:var(--al-white);}
.pia-feature-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px;}
.pia-feature{display:flex;gap:14px;align-items:flex-start;}
.pia-feature-icon{
  width:34px;height:34px;flex-shrink:0;border-radius:6px;background:rgba(226,68,18,.10);
  border:1px solid rgba(226,68,18,.20);display:flex;align-items:center;justify-content:center;color:var(--al-orange);
}
.pia-feature b{display:block;font-size:13px;font-weight:700;color:var(--al-white);margin-bottom:3px;}
.pia-feature p{font-size:12px;color:var(--al-w55);line-height:1.6;}

/* Features grid */
.features-strip{padding:100px 80px;}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px;align-items:stretch;}
/* Fixed-dimension card: reference has no explicit height (its own copy happens to
   fit uniformly), but real/edited copy can vary in length — a fixed height +
   line-clamped body keeps all six cards visually identical regardless of content,
   per the "content fits the UI, not the other way around" rule. */
.feature-card{background:var(--al-w07);border:1px solid var(--al-w12);border-radius:12px;
  padding:32px 28px;position:relative;overflow:hidden;display:flex;flex-direction:column;height:300px;}
.feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--al-orange);}
.feature-num{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--al-orange);opacity:.6;margin-bottom:20px;}
.feature-title{font-size:17px;font-weight:700;color:var(--al-white);margin-bottom:12px;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.feature-body{font-size:13px;color:var(--al-w55);line-height:1.75;flex:1;overflow-y:auto;padding-right:6px;
  scrollbar-width:thin;scrollbar-color:transparent transparent;}
.feature-card:hover .feature-body{scrollbar-color:rgba(226,68,18,.5) transparent;}
.feature-body::-webkit-scrollbar{width:5px;}
.feature-body::-webkit-scrollbar-track{background:transparent;}
.feature-body::-webkit-scrollbar-thumb{background:transparent;border-radius:3px;}
.feature-card:hover .feature-body::-webkit-scrollbar-thumb{background:rgba(226,68,18,.5);}
.feature-body::-webkit-scrollbar-thumb:hover{background:var(--al-orange);}
.feature-link{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--al-orange);margin-top:20px;}
a, a:hover, a:visited, a:active {
  text-decoration: none !important;
}
/* Stats bar */
/* Fixed orange band, not theme-dependent — matches both reference files exactly
   (`.stats-section{background:var(--orange)}` in both). Text stays fixed white
   since it always sits on orange, regardless of light/dark mode. */
.stats-section{background:var(--al-orange);padding:64px 0;}
.stats-grid{padding:0 80px;display:grid;grid-template-columns:repeat(4,1fr);text-align:center;}
.stats-grid-5{grid-template-columns:repeat(5,1fr);}
.stat-item{padding:0 24px;position:relative;}
.stat-item+.stat-item::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  height:40px;width:1px;background:rgba(255,255,255,.25);
}
.stat-val-lg{font-family:'Montserrat',sans-serif;font-size:36px;font-weight:900;color:var(--al-white);line-height:1;}
.stat-lbl-lg{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:8px;}
@media (max-width:600px){
  .stats-grid,.stats-grid-5{grid-template-columns:repeat(2,1fr);gap:28px 0;padding:0 22px;}
  .stat-item+.stat-item::before{display:none;}
}

/* Testimonials — plain 3-card grid matching the reference exactly (no carousel;
   real data is capped to 3 items server-side, same pattern as Pricing). Section
   gets the same tinted alternating background as Platform/Pricing so the page's
   background rhythm is consistent section-to-section. */
.testimonials-section{padding:100px 80px;background:rgba(255,255,255,.02);border-top:1px solid var(--al-w07);position:relative;}
html.light-mode .testimonials-section{background:rgba(0,0,0,.02);border-color:rgba(0,0,0,.07);}
/* Arrow-paged row — same card look/sizing as the original 3-up grid, just
   horizontally scrollable so the arrows can reveal more testimonials
   instead of hard-capping the section at 3. No carousel library: plain
   flex row + native scrollBy, so there's no cloning/infinite-loop DOM and
   the cards render exactly as they did before. */
.testimonials-slider{display:flex;gap:24px;margin-top:52px;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;}
.testimonials-slider::-webkit-scrollbar{display:none;}
.testimonials-slider .testimonial-card{flex:0 0 calc((100% - 48px)/3);scroll-snap-align:start;}
.testimonials-nav{display:flex;gap:10px;flex-shrink:0;}
/* Solid orange circle, white icon — literal white (not the flipping
   --al-white token) since this is an icon-on-brand-color chip like the
   avatar circles elsewhere, not a text CTA, so it stays constant across
   both themes. */
.t-nav-btn{width:38px;height:38px;border-radius:50%;border:none;background:var(--al-orange);
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s;}
.t-nav-btn:hover{background:var(--al-orange2);color:#fff;}
.t-nav-btn.t-nav-disabled{opacity:.35;cursor:not-allowed;}
.t-nav-btn.t-nav-disabled:hover{background:var(--al-orange);}
.t-nav-btn svg{width:16px;height:16px;}
.testimonial-card{background:var(--al-navy2);border:1px solid var(--al-w12);border-radius:12px;
  padding:32px;display:flex;flex-direction:column;position:relative;height:340px;overflow:hidden;}
.t-quote-mark{font-family:'EB Garamond',Georgia,serif;font-size:56px;color:var(--al-orange);line-height:1;
  opacity:.3;position:absolute;top:16px;left:24px;}
.t-quote{font-family:'EB Garamond',Georgia,serif;font-size:16px;font-style:italic;color:var(--al-w80);
  line-height:1.7;padding-top:28px;padding-right:6px;flex:1;margin-bottom:24px;overflow-y:auto;}
.t-quote *{font-family:'EB Garamond',Georgia,serif;font-size:16px;font-style:italic;color:var(--al-w80);line-height:1.7;}
.t-quote::-webkit-scrollbar{width:5px;}
.t-quote::-webkit-scrollbar-track{background:transparent;}
.t-quote::-webkit-scrollbar-thumb{background:transparent;border-radius:3px;}
.testimonial-card:hover .t-quote::-webkit-scrollbar-thumb{background:rgba(226,68,18,.5);}
.t-quote::-webkit-scrollbar-thumb:hover{background:var(--al-orange);}
.t-quote{scrollbar-width:thin;scrollbar-color:transparent transparent;}
.testimonial-card:hover .t-quote{scrollbar-color:rgba(226,68,18,.5) transparent;}
.t-attr{display:flex;align-items:center;gap:12px;padding-top:20px;border-top:1px solid var(--al-w07);flex-shrink:0;}
/* Client reference: solid orange-gradient avatar chip with white initials. */
.testimonials-section-client .t-avatar{width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,var(--al-orange),#b83510);color:#fff;font-size:15px;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
/* Lawyer reference: outlined badge avatar, orange initials on a tinted background. */
.testimonials-section-lawyer .t-avatar{width:40px;height:40px;border-radius:50%;
  background:rgba(226,68,18,.14);border:1px solid rgba(226,68,18,.3);color:var(--al-orange);
  font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.t-name{font-size:13px;font-weight:700;color:var(--al-white);}
.t-role{font-size:11px;color:var(--al-w55);margin-top:2px;}
/* How it works steps */
.how-section{padding:100px 80px;}
.how-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;position:relative;}
.how-steps::before{content:'';position:absolute;top:28px;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,var(--al-orange),var(--al-orange),transparent);opacity:.25;}
.how-step{text-align:center;padding:0 16px;position:relative;}
.how-step-num{width:56px;height:56px;border-radius:50%;background:rgba(226,68,18,.10);
  border:1px solid rgba(226,68,18,.30);display:flex;align-items:center;justify-content:center;
  font-family:'Montserrat',sans-serif;font-size:18px;font-weight:800;color:var(--al-orange);
  margin:0 auto 22px;position:relative;z-index:1;}
.how-step-title{font-size:14px;font-weight:700;color:var(--al-white);margin-bottom:10px;}
.how-step-body{font-size:12px;color:var(--al-w55);line-height:1.7;}

/* Pricing */
.pricing-section{padding:100px 80px;text-align:left;background:rgba(255,255,255,.02);border-top:1px solid var(--al-w07);}
html.light-mode .pricing-section{background:rgba(0,0,0,.02);border-color:rgba(0,0,0,.07);}
.pricing-section .section-sub{margin-left:auto;margin-right:auto;text-align: left;}
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px;text-align:left;}
/* Fixed height: real packages vary in description length and feature count (the
   blade template caps the feature list at 7 items), so height is fixed and the
   description/feature list are clamped — content fits the card, not vice versa. */
.pricing-card{position:relative;border-radius:12px;padding:30px 22px;display:flex;flex-direction:column;
  background:var(--al-navy2);border:1px solid var(--al-w12);height:560px;}
.pricing-card.featured{border-color:var(--al-orange);background:rgba(226,68,18,.06);}
.pricing-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--al-orange);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 14px;border-radius:20px;}
/* Fixed height + scroll — a long plan name wrapping to 2 lines on one card
   (while others stay on 1) pushed .pricing-amount below it out of alignment
   across the row; locking this to a consistent height keeps every card's
   price starting at the same Y regardless of name length. */
.pricing-plan{font-size:11px;font-weight:700;color:var(--al-orange);text-transform:uppercase;letter-spacing:.14em;
  line-height:1.4;height:30px;overflow-y:auto;margin-bottom:18px;scrollbar-width:thin;
  scrollbar-color:transparent transparent;}
.pricing-card:hover .pricing-plan{scrollbar-color:rgba(226,68,18,.5) transparent;}
.pricing-plan::-webkit-scrollbar{width:4px;}
.pricing-plan::-webkit-scrollbar-track{background:transparent;}
.pricing-plan::-webkit-scrollbar-thumb{background:transparent;border-radius:3px;}
.pricing-card:hover .pricing-plan::-webkit-scrollbar-thumb{background:rgba(226,68,18,.5);}
.pricing-price{display:flex;align-items:baseline;gap:6px;margin-bottom:8px;}
.pricing-amount{font-family:'Montserrat',sans-serif;font-size:38px;font-weight:900;color:var(--al-white);}
.pricing-period{font-size:13px;color:var(--al-w55);}
/* Auto-height, no clip/scroll/ellipsis — per explicit direction, long
   descriptions wrap onto as many lines as they need instead of being cut
   off or scrolled. This trades the earlier cross-card row alignment for
   fully readable content. */
/* Fixed 2-line height + scroll (matches .pricing-plan's treatment above) —
   a description spanning 1 line vs 2+ lines was starting .pricing-features
   at a different Y on each card in the row; locking this height keeps the
   feature list aligned across every card regardless of description length. */
.pricing-desc{font-size:12px;color:var(--al-w55);line-height:1.6;margin-bottom:28px;height:38px;
  overflow-y:auto;padding-right:6px;scrollbar-width:thin;scrollbar-color:transparent transparent;}
.pricing-card:hover .pricing-desc{scrollbar-color:rgba(226,68,18,.5) transparent;}
.pricing-desc::-webkit-scrollbar{width:5px;}
.pricing-desc::-webkit-scrollbar-track{background:transparent;}
.pricing-desc::-webkit-scrollbar-thumb{background:transparent;border-radius:3px;}
.pricing-card:hover .pricing-desc::-webkit-scrollbar-thumb{background:rgba(226,68,18,.5);}
/* .pricing-plan/.pricing-desc's scrollbar only reveals on `.pricing-card:hover`
   — on touch devices there's no reliable hover state, so the scroll affordance
   was effectively invisible even though the content is genuinely scrollable
   (overflow-y:auto works fine via touch-drag either way). Keep the thumb
   visible by default wherever hover isn't the primary input, so it's obvious
   there's more to scroll to. -webkit-overflow-scrolling:touch keeps momentum
   scrolling smooth on older iOS Safari. */
@media (pointer:coarse){
  .pricing-plan,.pricing-desc{-webkit-overflow-scrolling:touch;scrollbar-color:rgba(226,68,18,.35) transparent;}
  .pricing-plan::-webkit-scrollbar-thumb,.pricing-desc::-webkit-scrollbar-thumb{background:rgba(226,68,18,.35);}
}
/* overflow-y:auto (was overflow:hidden, silently clipping anything past the
   fixed-height card) — a plan with more features than fit just lost the rest
   with no way to see them. flex:1 still caps this to whatever space is left
   in the card, keeping every card's height consistent; scroll handles the
   rest instead of clipping. Same thin/hover-revealed scrollbar treatment as
   .pricing-plan/.pricing-desc above, including the touch-visible override. */
.pricing-features{list-style:none;margin:0 0 32px;padding:0;flex:1;overflow-y:auto;padding-right:6px;
  scrollbar-width:thin;scrollbar-color:transparent transparent;}
.pricing-card:hover .pricing-features{scrollbar-color:rgba(226,68,18,.5) transparent;}
.pricing-features::-webkit-scrollbar{width:5px;}
.pricing-features::-webkit-scrollbar-track{background:transparent;}
.pricing-features::-webkit-scrollbar-thumb{background:transparent;border-radius:3px;}
.pricing-card:hover .pricing-features::-webkit-scrollbar-thumb{background:rgba(226,68,18,.5);}
@media (pointer:coarse){
  .pricing-features{-webkit-overflow-scrolling:touch;scrollbar-color:rgba(226,68,18,.35) transparent;}
  .pricing-features::-webkit-scrollbar-thumb{background:rgba(226,68,18,.35);}
}
.pricing-features li{display:flex;align-items:flex-start;gap:10px;font-size:12px;color:var(--al-w80);margin-bottom:10px;line-height:1.5;}
.pricing-features li::before{content:'✓';color:var(--al-orange);font-weight:700;flex-shrink:0;margin-top:1px;}
.pricing-features li span{overflow-wrap:break-word;}
.pricing-card .pricing-cta{justify-content:center;width:100%;flex-shrink:0;}

/* CTA banner / strip */
/* Client CTA banner is framed as an inset card with page background showing
   around it on all sides (per explicit request) — the surrounding space is
   just the page's own base background, so it's white in light mode and dark
   navy in dark mode without hardcoding either. */
.cta-banner-outer{padding:60px 80px;}
.cta-banner,.cta-strip{padding:80px 40px;text-align:center;background:var(--al-navy2);
  border-top:1px solid var(--al-w12);position:relative;overflow:hidden;}
.cta-banner{max-width:1160px;margin:0 auto;border-radius:16px;border:1px solid var(--al-w12);}
.cta-banner::before,.cta-strip::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 100% at 50% 50%,rgba(226,68,18,.06),transparent);}
.cta-banner h2,.cta-strip h2{font-family:'EB Garamond',Georgia,serif;font-size:clamp(24px,3vw,34px);
  font-weight:600;color:var(--al-white);margin-bottom:14px;position:relative;}
.cta-banner p,.cta-strip p{font-size:14px;color:var(--al-w55);max-width:560px;margin:0 auto 26px;line-height:1.7;position:relative;}
.cta-banner-btns,.cta-strip-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;}
.cta-banner .section-label,.cta-strip .section-label{position:relative;}

/* Exclusive membership card (Lawyer home) */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;}
.split-list{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:16px;}
.split-list li{display:flex;gap:12px;}
.split-list .ci {
  color: var(--al-orange);
  font-weight: 700;
  flex-shrink: 0;
  width: 24px;
  height: 24px;                   
  border-radius: 6px;             
  background: rgba(226,68,18,.12); 
  display: flex;                  
  align-items: center;            
  justify-content: center;       
  font-size: 12px;                
  margin-top: 1px;
}
.split-list b{display:block;font-size:13.5px;color:var(--al-white);margin-bottom:3px;}
.split-list p{font-size:12.5px;color:var(--al-w55);line-height:1.6;}
/* Solid navy2 background (not the tinted --al-card-bg the generic .ui-card
   group uses) and no hover effect — matches the reference exactly, which
   doesn't give this card a hover state at all. */
.excl-card{background:var(--al-navy2);border:1px solid var(--al-w12);border-radius:14px;padding:32px;
  position:relative;overflow:hidden;}
.excl-card::before{content:'';position:absolute;top:-40%;right:-20%;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(226,68,18,.10),transparent 70%);pointer-events:none;}
.excl-badge{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--al-orange);background:rgba(226,68,18,.10);border:1px solid rgba(226,68,18,.25);
  padding:6px 12px;border-radius:100px;margin-bottom:18px;position:relative;}
.excl-card h3{font-family:'EB Garamond',Georgia,serif;font-size:24px;font-weight:600;color:var(--al-white);
  margin-bottom:12px;position:relative;}
.excl-card p{font-size:13px;color:var(--al-w80);line-height:1.7;margin-bottom:22px;position:relative;}
.excl-meter .row{display:flex;justify-content:space-between;font-size:12px;color:var(--al-w80);margin-bottom:8px;}
.excl-bar{height:6px;border-radius:4px;background:var(--al-w12);overflow:hidden;}
.excl-bar span{display:block;height:100%;width:72%;background:var(--al-orange);}
.excl-note{font-size:11px;color:var(--al-w30);margin-top:10px;line-height:1.5;}

/* ── Shared form controls ────────────────────────────
   Not yet applied to any existing markup (Home's inputs already work via
   inherited legacy styling — see audit). Available for the next page that
   needs real form fields, so every page draws from one input style instead
   of each re-deriving its own. ─── */
.ui-field{margin-bottom:16px;}
.ui-label{display:block;font-size:12px;font-weight:600;color:var(--al-w55);margin-bottom:6px;}
.ui-input,.ui-select,.ui-textarea{
  width:100%;padding:11px 14px;border-radius:8px;border:1px solid var(--al-w12);
  background:var(--al-w07);color:var(--al-white);font-size:13px;font-family:'Montserrat',sans-serif;
  transition:border-color .15s;
}
.ui-textarea{min-height:110px;resize:vertical;}
.ui-input::placeholder,.ui-textarea::placeholder{color:var(--al-w30);}
.ui-input:focus,.ui-select:focus,.ui-textarea:focus{outline:none;border-color:var(--al-orange);}
.ui-checkbox{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--al-w55);cursor:pointer;}
.ui-checkbox input{accent-color:var(--al-orange);}

/* ── Toast ────────────────────────────────────────────
   Visual component + tiny helper only — not wired into any existing form.
   Available for a future page that needs a lightweight confirmation
   without introducing new business behavior. Call window.alToast(msg). ─── */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);z-index:400;
  background:var(--al-navy2);border:1px solid var(--al-card-border);border-left:3px solid var(--al-green);
  border-radius:6px;padding:13px 20px;font:600 12.5px 'Montserrat',sans-serif;color:var(--al-white);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.6);opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;display:flex;align-items:center;gap:10px;max-width:calc(100% - 40px);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast .ti{color:var(--al-green);flex-shrink:0;}

/* FAQ accordion (Lawyer home) */
.faq-list{margin-top:30px;max-width:820px;}
.faq-item{border:1px solid var(--al-w12);border-radius:8px;margin-bottom:12px;background:var(--al-w07);overflow:hidden;}
.faq-q{
  width:100%;text-align:left;background:none;border:none;color:var(--al-white);
  font-family:'Montserrat',sans-serif;font-size:14px;font-weight:600;padding:18px 20px;
  cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq-q .pm{color:var(--al-orange);font-size:18px;transition:transform .2s;flex-shrink:0;}
.faq-item.open .faq-q .pm{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease;}
.faq-a p{padding:0 20px 18px;font-size:13px;color:var(--al-w55);line-height:1.7;}

@media (max-width:960px){
  .hero-inner,.platform-grid,.split{grid-template-columns:minmax(0,1fr);}
  .hero-inner{padding:0 40px;}
  .audience-grid,.grid3,.features-grid,.pricing-grid{grid-template-columns:1fr 1fr;}
  .testimonials-slider .testimonial-card{flex-basis:calc((100% - 24px)/2);}
  .how-steps{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .hero{padding:44px 20px 40px;}
  /* .hero already supplies the side padding above — .hero-inner's own
     desktop padding (0 80px) would otherwise stack on top of it and
     shrink/shift the hero content on narrow viewports. */
  .hero-inner{padding:0;}
  /* The "Platform in Action" screens mockup is two absolutely-positioned,
     overlapping panels sized for desktop; on mobile it's stacked into
     normal flow instead, and the mini-table scrolls horizontally rather
     than clipping/squeezing its columns unreadably. */
  .platform-screens{height:auto;}
  .screen-main{position:static;right:auto;margin-bottom:16px;}
  .screen-overlay{position:static;width:100%;bottom:auto;}
  .screen-content{overflow-x:auto;}
  .mini-table{min-width:420px;}
  .wrap,.audience-section,.features-strip,.testimonials-section,.how-section,.pricing-section,.platform-section,.partner-strip,.cta-banner,.cta-strip,.cta-banner-outer{padding-left:20px;padding-right:20px;}
  .audience-grid,.grid3,.features-grid,.pricing-grid,.how-steps{grid-template-columns:1fr;}
  .testimonials-slider .testimonial-card{flex-basis:100%;}
  .how-steps::before{display:none;}
  .how-step{margin-bottom:26px;}
  /* The reference dashboard-frame mockup has no mobile spec of its own (the
     static reference file only defines breakpoints for its subpages) — this
     scales the same structure down so it doesn't overflow small viewports. */
  .hero-badge2{position:static;display:inline-flex;flex-direction:column;margin-bottom:10px;}
  .db-layout{height:auto;flex-direction:column;}
  .db-sidebar{width:100%;display:flex;overflow-x:auto;padding:8px;gap:4px;}
  .db-nav-item{flex-shrink:0;white-space:nowrap;}
  .db-search{display:none;}
  .db-stats-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .db-bottom-grid{grid-template-columns:minmax(0,1fr);}
  .db-content{padding:14px;min-width:0;}
  .db-stat-val{font-size:15px;}
  .hero-badge{position:static;margin-top:14px;}
}
/* ══════════════════════════════════════════════════
   Re-skin of existing shared partials (real backend
   data/carousels/checkout — structure & JS untouched).
   Every rule below is scoped under its .nui-* wrapper
   class so it cannot leak onto unrelated markup that
   happens to reuse the same old Webflow class names
   elsewhere in the app.
══════════════════════════════════════════════════ */

/* NOTE: atipa.webflow.css carries many 3-4-class selectors targeting these same
   old class names (e.g. `.africa-ip-guide-tm .guide-card .guide-text-block .header-p`)
   with hardcoded colors. Those out-specificity a 2-class `.nui-guide .header-p`
   selector regardless of stylesheet order, so color/background/border declarations
   below are marked !important to reliably win — this is a deliberate, scoped
   override of legacy rules, not a global !important habit. */

.nui-partners,.nui-reviews,.nui-benefits,.nui-pricing,.nui-guide,.nui-cta-banner{
  padding:100px 80px;
}
/* The legacy `.reviews` class (kept alongside `.nui-reviews` on the same element)
   sets `display:flex;flex-direction:column;align-items:center`. In a column flex
   container, a width:auto child sizes to its own content instead of filling the
   container — and Slick's variableWidth track is ~10000px wide by design (it lays
   every slide out side by side), so that child sizes to ~10000px and then gets
   horizontally centered by align-items:center, landing thousands of pixels off
   the left edge of the viewport. This was the actual cause of the "empty"
   testimonials section. Overriding back to block layout removes the flex sizing
   behavior entirely; nothing in this section's own styling depends on it. */
.nui-reviews{display:block !important;}
.nui-partners .sub-heading-parent,.nui-reviews .sub-heading-parent,
.nui-benefits .sub-heading-parent,.nui-pricing .sub-heading-parent{
  display:flex;align-items:center;gap:10px;margin-bottom:10px;opacity:1 !important;
}
.nui-partners .sub-heading-parent .line,.nui-reviews .sub-heading-parent .line,
.nui-benefits .sub-heading-parent .line,.nui-pricing .sub-heading-parent .line{
  width:20px;height:2px;background:var(--al-orange) !important;
}
.nui-partners .sub-heading,.nui-reviews .sub-heading,.nui-benefits .sub-heading,.nui-pricing .sub-heading{
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--al-orange) !important;
}
.nui-partners .heading-section,.nui-reviews .heading-section,.nui-benefits .heading-section,
.nui-pricing .heading-section,.nui-guide .heading-section,.nui-cta-banner .heading-section{
  font-family:'EB Garamond',Georgia,serif;font-size:clamp(24px,3vw,34px);font-weight:600;
  color:var(--al-white) !important;line-height:1.25;opacity:1 !important;
}
.nui-partners .header-p,.nui-reviews .header-p,.nui-benefits .header-p,
.nui-guide .header-p,.nui-cta-banner .header-p{
  font-size:14px;color:var(--al-w55) !important;line-height:1.7;margin-top:10px;opacity:1 !important;
}
/* Force-show content that previously relied on Webflow's IX2 scroll interactions
   to animate opacity 0→1 — not something this restyle can safely depend on. */
.nui-benefits [style*="opacity"],.nui-guide [style*="opacity"],
.nui-cta-banner [style*="opacity"],.nui-partners [style*="opacity"],
.nui-reviews [style*="opacity"],.nui-pricing [style*="opacity"],
.hero [style*="opacity"],.audience-section [style*="opacity"]{
  opacity:1 !important;transform:none !important;
}

/* Partners strip */
.nui-partners{text-align:center;}
.nui-partners .partners-section{background:transparent;padding:1.5rem 0;}

/* Benefits ("Why AfricanLaw") */
.nui-benefits{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start;}
.nui-benefits .benefits-text-block{flex:1;min-width:260px;}
.nui-benefits .benefits-content{display:flex;flex-wrap:wrap;gap:32px;flex:1.4;min-width:280px;}
.nui-benefits .benefits-itself{display:flex;flex-direction:column;gap:20px;flex:1;min-width:220px;opacity:1 !important;}
.nui-benefits .benefits-listing{display:flex;gap:14px;align-items:flex-start;opacity:1 !important;}
.nui-benefits .icon-benefit{width:32px;height:32px;border-radius:8px;background:rgba(226,68,18,.1) !important;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.nui-benefits .icon-benefit img{width:16px;height:16px;}
.nui-benefits .benefit-header{font-size:13.5px;font-weight:700;color:var(--al-white) !important;margin-bottom:4px;}
.nui-benefits .benefit-p{font-size:12.5px;color:var(--al-w55) !important;line-height:1.6;}
.nui-benefits .benifits-right-column-sec{flex:1;min-width:220px;}
.nui-benefits .benifits-right-column-sec img{max-width:100%;border-radius:12px;}
.nui-benefits .benefits-button .button{
  display:inline-flex;margin-top:16px;padding:11px 22px;border-radius:8px;font-size:12.5px;font-weight:600;
  color:var(--al-w80) !important;background:transparent !important;border:1px solid var(--al-w12) !important;text-decoration:none;
}
.nui-benefits .benefits-button .button:hover{border-color:var(--al-orange) !important;color:var(--al-white) !important;}

/* Pricing / package checkout (real functionality — visual only, real $packages
   data). Values matched to the reference's `.pricing-card`/`.pricing-cta` rules.
   `.package-featured`/`.package-badge` exist for a "most popular" treatment but
   are intentionally not applied to any specific package below — the Packages
   model has no field indicating which one is "most popular", and picking one
   would be an invented marketing claim, not a UI-only decision. */
.nui-pricing{text-align:center;}
.nui-pricing .payemnt-card-section{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:32px;text-align:left;
}
.nui-pricing .payement-cards{
  background:var(--al-navy2) !important;border:1px solid var(--al-card-border) !important;border-radius:12px;padding:36px 28px;
  display:flex;flex-direction:column;position:relative;
}
.nui-pricing .payement-cards.package-featured{border-color:var(--al-orange) !important;background:rgba(226,68,18,.06) !important;}
.nui-pricing .package-badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--al-orange);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 14px;border-radius:20px;
}
.nui-pricing .package-name{font-size:11px;font-weight:700;color:var(--al-orange) !important;text-transform:uppercase;letter-spacing:.14em;margin-bottom:14px;}
.nui-pricing .package-price{font-family:'Montserrat',sans-serif;font-size:38px;font-weight:900;color:var(--al-white) !important;margin:0 0 8px;}
.nui-pricing .package-interval{font-size:13px;color:var(--al-w55) !important;font-family:'Montserrat',sans-serif;}
.nui-pricing .features-heading{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--al-w55) !important;margin-bottom:10px;}
.nui-pricing .payment-check-list{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;font-size:12px;color:var(--al-w80) !important;line-height:1.5;}
.nui-pricing .payment-check-list img{width:14px;height:14px;margin-top:2px;}
.nui-pricing .package-submit-button{
  margin-top:20px;background:var(--al-orange) !important;color:#fff !important;border:none;border-radius:4px;padding:13px;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;width:100%;
}
.nui-pricing .package-submit-button:hover{background:var(--al-orange2) !important;}
.nui-pricing .package-submit-button:disabled{opacity:.5;cursor:not-allowed;}

/* Africa IP Guide teaser */
.nui-guide .guide-card{display:flex;align-items:center;gap:48px;flex-wrap:wrap;
  background:var(--al-navy2) !important;border:1px solid var(--al-card-border) !important;border-radius:16px;padding:44px;}
.nui-guide .guide-text-block{flex:1;min-width:260px;}
.nui-guide .guide-img-wrap{flex:1;min-width:220px;text-align:center;}
.nui-guide .guide-img-wrap img{max-width:100%;max-height:220px;}
.nui-guide .guide-button-block{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap;}
.nui-guide .guide-button-block .button{
  padding:12px 22px;border-radius:8px;font-size:12.5px;font-weight:600;text-decoration:none;
  background:transparent !important;border:1px solid var(--al-w12) !important;color:var(--al-w80) !important;
}
.nui-guide .guide-button-block .button.filled{background:var(--al-orange) !important;border-color:var(--al-orange) !important;color:#fff !important;}
.nui-guide .guide-button-block .button:not(.filled):hover{border-color:var(--al-orange) !important;color:var(--al-white) !important;}

/* CTA banner (ask-a-lawyer quote request) */
.nui-cta-banner{
  display:flex;align-items:center;gap:48px;flex-wrap:wrap;text-align:left;
  background:var(--al-navy2) !important;border:1px solid var(--al-card-border);border-radius:16px;
  padding:56px !important;max-width:1240px;margin:0 auto 60px !important;
}
.nui-cta-banner .quote-img-left-sec{flex:1;min-width:200px;text-align:center;}
.nui-cta-banner .quote-img-left-sec img{max-width:100%;max-height:200px;}
.nui-cta-banner .quote-text-block{flex:1.4;min-width:280px;}
.nui-cta-banner .quote-button-block{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap;}
.nui-cta-banner .quote-button-block .button{
  padding:12px 22px;border-radius:8px;font-size:12.5px;font-weight:600;cursor:pointer;text-decoration:none;
  background:transparent !important;border:1px solid var(--al-w12) !important;color:var(--al-w80) !important;
}
.nui-cta-banner .quote-button-block .button.filled{background:var(--al-orange) !important;border-color:var(--al-orange) !important;color:#fff !important;}
.nui-cta-banner .quote-button-block .button:not(.filled):hover{border-color:var(--al-orange) !important;color:var(--al-white) !important;}

@media (max-width:600px){
  .nui-partners,.nui-reviews,.nui-benefits,.nui-pricing,.nui-guide,.nui-cta-banner{padding:50px 20px;}
}

/* Newsletter + secondary CTA (footer-cta, shown above the footer on every page) */
.nui-subscribe-cta{
  display:flex;gap:24px;flex-wrap:wrap;max-width:1240px;margin:0 auto;padding:50px 40px 0;
}
.nui-subscribe-cta .newsletter-card,.nui-subscribe-cta .client-cta{flex:1;min-width:280px;}
.nui-subscribe-cta .card-child{
  height:auto !important;min-height:220px;align-items:flex-start !important;justify-content:center !important;
  background:var(--al-navy2) !important;border:1px solid var(--al-card-border) !important;
  border-radius:14px !important;padding:30px !important;
}
.nui-subscribe-cta .card-child.gray{background:var(--al-navy2) !important;}
.nui-subscribe-cta .heading-section{
  font-family:'EB Garamond',Georgia,serif;font-size:20px;font-weight:600;color:var(--al-white) !important;
  margin-bottom:8px;opacity:1 !important;
}
.nui-subscribe-cta .header-p,.nui-subscribe-cta .header-p.ctas{
  font-size:13px;color:var(--al-w55) !important;line-height:1.6;margin-bottom:18px;
}
.nui-subscribe-cta [style*="opacity"]{opacity:1 !important;transform:none !important;}
.nui-subscribe-cta .ask-a-lawyer-header-form .text-field{
  width:100%;padding:12px 44px 12px 14px;border-radius:8px;border:1px solid var(--al-w12) !important;
  background:var(--al-w07) !important;color:var(--al-white) !important;font-size:13px;
}
.nui-subscribe-cta .search-input-parent{position:relative;}
.nui-subscribe-cta .submit-button{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);background:var(--al-orange) !important;
  border:none;border-radius:6px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.nui-subscribe-cta .submit-button img{width:14px;height:14px;filter:brightness(0) invert(1);}
.nui-subscribe-cta .w-form-done,.nui-subscribe-cta .w-form-fail{display:none;margin-top:10px;font-size:12px;}
.nui-subscribe-cta .client-cta .button{
  margin-top:4px;padding:12px 22px;border-radius:8px;font-size:12.5px;font-weight:600;cursor:pointer;
  background:var(--al-orange) !important;border:1px solid var(--al-orange) !important;color:#fff !important;
}
.nui-subscribe-cta .client-cta .button:hover{background:var(--al-orange2) !important;}

/* ══════════════════════════════════════════════════
   Find a Lawyer page (front/lawyers.blade.php)
══════════════════════════════════════════════════ */
.page-hero{background:var(--al-navy2);padding:130px 80px 80px;position:relative;overflow:hidden;
  border-bottom:1px solid var(--al-w12);}
/* Per explicit direction: the inner-page hero (Features/Find a Lawyer/
   Contact) should match the Home hero's light-mode background exactly —
   the reference itself keeps them on separate tokens (--navy2/white vs
   --navy/off-white), but only the light-mode mismatch was flagged here, so
   dark mode keeps the reference's original --navy2 treatment. */
html.light-mode .page-hero{background:var(--al-navy);}
.ph-network{position:absolute;inset:0;pointer-events:none;opacity:.15;}
.ph-glow{position:absolute;top:-10%;right:-5%;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(226,68,18,.07) 0%,transparent 70%);pointer-events:none;}
.ph-inner{position:relative;z-index:2;}
.ph-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--al-orange);background:rgba(226,68,18,.10);border:1px solid rgba(226,68,18,.25);
  padding:5px 13px;border-radius:3px;margin-bottom:24px;}
.ph-headline{font-family:'EB Garamond',Georgia,serif;font-size:clamp(32px,4.5vw,50px);font-weight:600;
  line-height:1.15;color:var(--al-white);margin-bottom:18px;}
.ph-headline em{color:var(--al-orange);font-style:italic;}
.ph-sub{font-size:15px;color:var(--al-w55);line-height:1.75;max-width:560px;margin-bottom:0;}

.fal-results-section{padding:52px 80px 90px;}
.fal-network-section{padding:60px 80px;}

.filter-bar{background:var(--al-navy2);border:1px solid var(--al-w12);border-radius:10px;padding:20px 24px;
  display:flex;align-items:center;gap:14px;margin-bottom:32px;flex-wrap:wrap;}
/* Scoped under .filter-bar — "search-input" as a bare class collides with an
   unrelated legacy element that happens to reuse the same generic name (the
   button wrapper inside the Knowledge Hub's Webflow-era search bar,
   .search-input-parent > .search-input in faq.blade.php). Unscoped, this
   rule's later load order let it win over that legacy element's own
   width:70px/height:50px circular-button styling, stretching it out to
   min-width:200px with a translucent panel background instead — visible as
   an oversized white blob detached from the orange search bar. */
.filter-bar .search-input{flex:1;min-width:200px;background:var(--al-w07);border:1px solid var(--al-w12);border-radius:6px;
  padding:10px 14px;font-size:13px;color:var(--al-white);font-family:'Montserrat',sans-serif;outline:none;}
.filter-select{background:var(--al-w07);border:1px solid var(--al-w12);border-radius:6px;padding:10px 14px;
  font-size:12px;color:var(--al-w55);font-family:'Montserrat',sans-serif;outline:none;cursor:pointer;
  width:170px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.filter-select:disabled{cursor:not-allowed;opacity:.55;}
/* The native <option> popup ignores the select's own background/color and
   falls back to OS/browser defaults (usually a plain white list) unless the
   options are styled directly — without this it stayed white regardless of
   site theme. Note: the hover/highlight color inside that popup (blue) is
   rendered by the OS/browser chrome, not this stylesheet, and cannot be
   restyled with CSS in Chrome/Safari — only Firefox honors option styling. */
.filter-select option,.sort-select option{background:var(--al-navy);color:var(--al-white);}
html.light-mode .filter-bar .search-input{background:#fff;border-color:rgba(0,0,0,.12);color:#0f1c28;}
html.light-mode .filter-select{background:#fff;border-color:rgba(0,0,0,.12);color:rgba(15,28,40,.55);}
html.light-mode .filter-select option,html.light-mode .sort-select option{background:#fff;color:#0f1c28;}

/* Custom listbox replacing the native <select> popup — see comment in
   lawyers.blade.php for why. The original <select> is kept for real form
   submission, just visually hidden. */
.cs-wrap{position:relative;}
.cs-native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.cs-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;appearance:none;
  -webkit-appearance:none;text-align:left;}
.cs-trigger::after{content:'▾';font-size:10px;color:var(--al-w30);flex-shrink:0;transition:transform .2s;}
.cs-wrap.open .cs-trigger::after{transform:rotate(180deg);}
.cs-list{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--al-navy2);
  border:1px solid var(--al-w12);border-radius:6px;max-height:240px;overflow-y:auto;z-index:60;
  display:none;box-shadow:0 12px 32px rgba(0,0,0,.35);list-style:none;margin:0;padding:6px;}
.cs-wrap.open .cs-list{display:block;}
.cs-option{padding:8px 10px;font-size:12px;color:var(--al-w55);cursor:pointer;border-radius:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cs-option:hover,.cs-option.active{background:rgba(226,68,18,.14);color:var(--al-orange);}
html.light-mode .cs-list{background:#fff;border-color:rgba(0,0,0,.12);box-shadow:0 12px 32px rgba(0,0,0,.14);}
html.light-mode .cs-option{color:rgba(15,28,40,.65);}
html.light-mode .cs-option:hover,html.light-mode .cs-option.active{background:rgba(226,68,18,.10);color:var(--al-orange);}
.search-btn{background:var(--al-orange);color:#fff;border:none;border-radius:6px;padding:10px 22px;font-size:12px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .2s;
  font-family:'Montserrat',sans-serif;flex-shrink:0;}
.search-btn:hover{background:var(--al-orange2);}

.results-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:10px;}
.results-count{font-size:12px;color:var(--al-w55);}
.results-count strong{color:var(--al-white);}
.sort-select{background:var(--al-w07);border:1px solid var(--al-w12);border-radius:4px;padding:6px 12px;
  font-size:11px;color:var(--al-w55);font-family:'Montserrat',sans-serif;outline:none;cursor:pointer;}
.sort-select:disabled{cursor:not-allowed;opacity:.55;}

.lawyers-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start;}
.lawyer-card-slot.lc-hidden{display:none;}
/* Every card is locked to the same height, and every sub-section within it
   (name block, stars, location, practice-area tags) has its own bounded
   height too — so "Practice Areas" always lands at the same Y in every card
   regardless of how much real data a given record has. Sections that could
   still overflow their bounds (a long specialization, many tags) scroll
   internally instead of being clipped or stretching the card. */
/* height:360px — was 392px. .lc-divider's margin-top:auto pushes it (and the
   action-button row below it) down to fill whatever space is left above it,
   so a taller-than-content fixed height just shows up as blank space above
   the divider. 360px was measured against the tallest real content actually
   seen across the current cards (max natural height ~340px, incl. a
   practice-areas row at its full scrollable cap) plus a small buffer — short
   of that, and long content would get clipped by `overflow:hidden` below. */
.lawyer-card{background:var(--al-navy2);border:1px solid var(--al-w12);border-radius:12px;padding:24px;
  transition:border-color .2s;height:360px;display:flex;flex-direction:column;overflow:hidden;}
.lawyer-card:hover{border-color:rgba(226,68,18,.35);}
html.light-mode .lawyer-card{background:#fff;border-color:rgba(0,0,0,.09);}
html.light-mode .lawyer-card:hover{border-color:rgba(226,68,18,.35);}
.lc-top{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;flex-shrink:0;}
.lc-name-block{flex:1;min-width:0;}
.lc-avatar{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:800;color:#fff;flex-shrink:0;}
.av1{background:linear-gradient(135deg,var(--al-orange),#b83510);}
.av2{background:linear-gradient(135deg,#1d6fa4,#0d4a7a);}
.av3{background:linear-gradient(135deg,#1a7a4a,#0d4a2e);}
.av4{background:linear-gradient(135deg,#7a3a9a,#4a1a6a);}
.av5{background:linear-gradient(135deg,#8a6a00,#5a4400);}
.av6{background:linear-gradient(135deg,#7a1a1a,#4a0a0a);}
.av7{background:linear-gradient(135deg,#1a6a7a,#0a3a4a);}
.av8{background:linear-gradient(135deg,#3a7a2a,#1a4a10);}
.av9{background:linear-gradient(135deg,#4a4a8a,#2a2a5a);}
.lawyer-name{font-size:14px;font-weight:700;color:var(--al-white);margin-bottom:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Fixed 2-line height with internal scroll — long specializations stay
   fully readable (scroll) instead of being cut with "…", while still never
   growing the card. */
.lawyer-spec{font-size:11px;font-weight:600;color:var(--al-orange);line-height:1.5;height:33px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:transparent transparent;}
.lawyer-card:hover .lawyer-spec{scrollbar-color:rgba(226,68,18,.5) transparent;}
.lawyer-spec::-webkit-scrollbar{width:4px;}
.lawyer-spec::-webkit-scrollbar-track{background:transparent;}
.lawyer-spec::-webkit-scrollbar-thumb{background:transparent;border-radius:3px;}
.lawyer-card:hover .lawyer-spec::-webkit-scrollbar-thumb{background:rgba(226,68,18,.5);}
.lawyer-firm{font-size:11px;color:var(--al-w55);margin-top:2px;min-height:20px;display:flex;align-items:center;
  gap:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lawyer-firm-count{font-size:9px;color:var(--al-orange);background:rgba(226,68,18,.10);
  border:1px solid rgba(226,68,18,.20);border-radius:3px;padding:1px 6px;font-weight:700;flex-shrink:0;}
.verified-badge{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:700;color:var(--al-green);
  background:rgba(61,214,140,.10);border:1px solid rgba(61,214,140,.20);border-radius:3px;padding:3px 7px;
  margin-left:auto;margin-top:4px;white-space:nowrap;flex-shrink:0;}
.stars{color:var(--al-orange);font-size:11px;margin-bottom:2px;min-height:14px;flex-shrink:0;}
/* min-height reserves the row even when a record has no city/country, so the
   Practice Areas label below doesn't jump up and misalign against neighboring
   cards in the same grid row. */
.lawyer-loc{font-size:11px;color:var(--al-w55);margin-bottom:10px;display:flex;align-items:center;gap:5px;
  min-height:20px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.jur-tags-label{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--al-w30);
  margin:8px 0 5px;flex-shrink:0;}
/* Fixed ~2-row height with internal scroll — mirrors the .lawyer-spec fix
   above so a record with several long tag labels scrolls instead of
   spilling past the card's right edge or growing the card. */
.jur-tags{display:flex;flex-wrap:wrap;align-content:flex-start;gap:5px;margin-bottom:14px;height:54px;
  overflow-y:auto;scrollbar-width:thin;scrollbar-color:transparent transparent;}
.lawyer-card:hover .jur-tags{scrollbar-color:rgba(226,68,18,.5) transparent;}
.jur-tags::-webkit-scrollbar{width:4px;}
.jur-tags::-webkit-scrollbar-track{background:transparent;}
.jur-tags::-webkit-scrollbar-thumb{background:transparent;border-radius:3px;}
.lawyer-card:hover .jur-tags::-webkit-scrollbar-thumb{background:rgba(226,68,18,.5);}
.jur-tag{font-size:9px;font-weight:600;background:var(--al-w07);border:1px solid var(--al-w12);border-radius:3px;
  padding:3px 8px;color:var(--al-w55);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
.lc-divider{height:1px;background:var(--al-w07);margin:14px 0;margin-top:auto;flex-shrink:0;}
.lc-actions{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0;}
.lc-btn-main{flex:1;min-width:0;background:var(--al-orange);color:var(--al-white);border:none;border-radius:5px;
  padding:9px 4px;font-size:10.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;cursor:pointer;
  transition:background .2s;font-family:'Montserrat',sans-serif;text-align:center;text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lc-btn-main:hover{background:var(--al-orange2);color:var(--al-white);}
.lc-btn-ghost{flex:1;min-width:0;background:transparent;color:var(--al-w55);border:1px solid var(--al-w12);
  border-radius:5px;padding:9px 4px;font-size:10.5px;font-weight:600;cursor:pointer;transition:all .2s;
  font-family:'Montserrat',sans-serif;text-align:center;text-decoration:none;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;}
.lc-btn-ghost:hover{border-color:var(--al-w30);color:var(--al-white);}
html.light-mode .lawyer-name{color:#0f1c28;}
html.light-mode .lawyer-firm{color:rgba(15,28,40,.50);}
html.light-mode .lawyer-loc{color:rgba(15,28,40,.45);}
html.light-mode .jur-tag{background:rgba(0,0,0,.05);color:rgba(15,28,40,.55);border-color:rgba(0,0,0,.08);}
html.light-mode .lc-divider{background:rgba(0,0,0,.07);}
html.light-mode .lc-btn-ghost{color:rgba(15,28,40,.50);border-color:rgba(0,0,0,.12);}
@media (max-width:600px){
  /* Stacked full-width buttons instead of 3 squeezed side-by-side — avoids
     truncated/overflowing button labels on narrow phones. */
  .lc-actions{flex-direction:column;}
}

.cta-ghost-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--al-w30);color:var(--al-w80);
  font-size:12px;font-weight:600;letter-spacing:.08em;padding:13px 24px;border-radius:4px;transition:all .2s;
  background:transparent;cursor:pointer;text-decoration:none;}
.cta-ghost-btn:hover{border-color:var(--al-orange);color:var(--al-orange);}

.network-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.network-grid-2col{grid-template-columns:repeat(2,minmax(0,1fr));}
.network-card{background:var(--al-navy2);border:1px solid var(--al-w12);border-radius:12px;padding:28px;text-align:center;}
.network-val{font-family:'Montserrat',sans-serif;font-size:36px;font-weight:900;color:var(--al-orange);
  line-height:1;margin-bottom:6px;}
.network-lbl{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--al-w55);
  margin-bottom:12px;}
.network-body{font-size:12px;color:var(--al-w30);line-height:1.6;}

@media (max-width:960px){
  .page-hero{padding:110px 40px 60px;}
  .fal-results-section,.fal-network-section{padding-left:40px;padding-right:40px;}
  .lawyers-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .network-grid{grid-template-columns:1fr;}
  .filter-bar{flex-direction:column;align-items:stretch;}
  .filter-bar .search-input,.filter-select,.cs-wrap{width:100%;}
}
@media (max-width:600px){
  .page-hero{padding:100px 20px 50px;}
  .fal-results-section,.fal-network-section{padding-left:20px;padding-right:20px;}
  .lawyers-grid{grid-template-columns:minmax(0,1fr);}
}

/* ══════════════════════════════════════════════════
   Features page (front/network.blade.php)
══════════════════════════════════════════════════ */
.feat-section-pad{padding:90px 80px;}

/* Overview grid — fixed-height cards so real/edited copy can't grow them */
.feat-overview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.feat-ov-card{background:var(--al-navy2);border:1px solid var(--al-w12);border-radius:12px;padding:30px;
  position:relative;overflow:hidden;transition:border-color .2s;height:300px;display:flex;flex-direction:column;}
.feat-ov-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--al-orange);}
.feat-ov-card:hover{border-color:rgba(226,68,18,.3);}
.fov-icon{width:48px;height:48px;border-radius:8px;background:rgba(226,68,18,.10);border:1px solid rgba(226,68,18,.20);
  display:flex;align-items:center;justify-content:center;color:var(--al-orange);margin-bottom:18px;flex-shrink:0;}
.fov-num{font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--al-orange);opacity:.6;margin-bottom:14px;}
.fov-title{font-size:16px;font-weight:700;color:var(--al-white);margin-bottom:10px;}
.fov-body{font-size:13px;color:var(--al-w55);line-height:1.7;flex:1;overflow-y:auto;padding-right:6px;
  scrollbar-width:thin;scrollbar-color:transparent transparent;}
.feat-ov-card:hover .fov-body{scrollbar-color:rgba(226,68,18,.5) transparent;}
.fov-body::-webkit-scrollbar{width:5px;}
.fov-body::-webkit-scrollbar-track{background:transparent;}
.fov-body::-webkit-scrollbar-thumb{background:transparent;border-radius:3px;}
.feat-ov-card:hover .fov-body::-webkit-scrollbar-thumb{background:rgba(226,68,18,.5);}
.fov-body::-webkit-scrollbar-thumb:hover{background:var(--al-orange);}
.fov-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--al-orange);
  margin-top:18px;text-decoration:none;}
.fov-link-disabled{color:var(--al-w30);cursor:not-allowed;}

/* Deep-dive sections */
.feat-deep{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.feat-deep-reverse{direction:rtl;}
.feat-deep-reverse>*{direction:ltr;}
.feat-deep-title{font-family:'EB Garamond',Georgia,serif;font-size:28px;font-weight:600;color:var(--al-white);margin-top:0;margin-bottom:14px;}
.feat-deep-body{font-size:14px;color:var(--al-w55);line-height:1.8;margin-bottom:28px;}
/* Plain inline flow, not flex — the label ("Performance metrics:") and the
   text after it need to wrap as one continuous run, exactly like normal
   paragraph text. A flex row turns the text after </strong> into a separate
   anonymous flex item, which wraps as a whole block instead of flowing
   inline — so the label would land on its own line on some items (whichever
   ones didn't have room for the text next to it) while shorter items stayed
   inline, an inconsistent result depending on content length alone. The
   checkmark uses the classic hanging-bullet technique (absolutely positioned
   ::before) instead of a flex item so it doesn't force this layout either. */
.feat-list{list-style:none;margin:0 0 28px;padding:0;}
.feat-list li{position:relative;padding-left:20px;font-size:13px;color:var(--al-w80);
  margin-bottom:10px;line-height:1.5;}
.feat-list li::before{content:'✓';color:var(--al-orange);font-weight:700;position:absolute;left:0;top:1px;}
.feat-list li strong{margin-right:4px;}
.cta-main-disabled{opacity:.5;cursor:not-allowed;}
.cta-main-disabled:hover{background:var(--al-orange);}

/* Mini dashboard mockups (illustrative, theme-flip like every other mockup on the site) */
.db-frame{background:var(--al-navy2);border:1px solid var(--al-w12);border-radius:12px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.45);}
.db-frame-tall{min-height:460px;}
.db-topbar-mini{background:var(--al-navy);border-bottom:1px solid var(--al-w07);padding:10px 16px;
  display:flex;align-items:center;justify-content:space-between;}
.db-logo-mini{font-size:14px;font-weight:800;}
.db-logo-mini span:first-child{color:rgba(200,213,224,.85);}
html.light-mode .db-logo-mini span:first-child{color:#0f1c28;}
.db-logo-mini span:last-child{color:var(--al-orange);}
.db-topbar-mini-label{font-size:10px;color:var(--al-w55);}
.db-layout-mini{display:flex;height:340px;}
.db-sidebar-mini{width:140px;background:var(--al-navy);border-right:1px solid var(--al-w07);padding:8px 0;flex-shrink:0;}
.db-sidebar-mini-wide{width:120px;}
.db-ni{display:flex;align-items:center;gap:8px;padding:7px 12px;font-size:10px;font-weight:500;color:var(--al-w55);}
.db-ni.on{background:var(--al-orange);color:#fff;margin:0 6px;border-radius:3px;padding:7px 8px;}
.db-ni-block{border-radius:4px;}
.db-body-mini{flex:1;padding:16px;overflow:hidden;}
.db-body-mini-flex{display:flex;flex-direction:column;gap:8px;}
.db-body-mini-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.db-row-title{font-size:12px;font-weight:700;color:var(--al-white);}
.db-new-matter{font-size:9px;color:var(--al-orange);font-weight:700;}
.db-date-btn-mini{font-size:8px;background:var(--al-w07);border:1px solid var(--al-w12);border-radius:4px;
  padding:4px 8px;color:var(--al-w55);}
.db-mini-table{width:100%;font-size:10px;border-collapse:collapse;}
.db-mini-table th{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--al-w30);
  padding:4px 6px;text-align:left;border-bottom:1px solid var(--al-w07);}
.db-mini-table td{padding:6px 6px;color:var(--al-w80);border-bottom:1px solid var(--al-w07);}
.db-mini-table tr:last-child td{border:none;}
.mini-b{display:inline-block;font-size:8px;font-weight:700;padding:2px 6px;border-radius:10px;}
.mb-o{background:rgba(226,68,18,.15);color:var(--al-orange);}
.mb-g{background:rgba(61,214,140,.15);color:var(--al-green);}
.mb-b{background:rgba(126,184,247,.15);color:var(--al-blue);}

/* AI copilot mockup */
.db-ai-body{padding:16px;height:340px;overflow-y:auto;scrollbar-width:thin;
  scrollbar-color:transparent transparent;}
.db-frame:hover .db-ai-body{scrollbar-color:rgba(226,68,18,.5) transparent;}
.db-ai-body::-webkit-scrollbar{width:5px;}
.db-ai-body::-webkit-scrollbar-track{background:transparent;}
.db-ai-body::-webkit-scrollbar-thumb{background:transparent;border-radius:3px;}
.db-frame:hover .db-ai-body::-webkit-scrollbar-thumb{background:rgba(226,68,18,.5);}
.db-ai-body::-webkit-scrollbar-thumb:hover{background:var(--al-orange);}
.db-ai-bubble{border-radius:8px;padding:12px;margin-bottom:10px;}
.db-ai-q{background:var(--al-w07);}
.db-ai-a{background:rgba(226,68,18,.08);border:1px solid rgba(226,68,18,.15);}
.db-ai-related{background:var(--al-w07);margin-bottom:0;}
.db-ai-tag{font-size:9px;font-weight:700;color:var(--al-orange);margin-bottom:6px;}
.db-ai-text{font-size:11px;color:var(--al-w80);line-height:1.5;}
.db-ai-a .db-ai-text{font-size:10px;line-height:1.6;}
.db-ai-text-muted{font-size:10px;color:var(--al-w55);}
.db-ai-highlight{color:var(--al-orange);font-weight:600;}

/* Lawyer dashboard mockup stat/cal widgets */
.db-stats-mini-3{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:8px;}
.db-stats-mini-2{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:8px;}
.db-stat-mini{background:var(--al-w07);border:1px solid var(--al-w12);border-radius:5px;padding:8px;}
.db-stat-mini-accent{background:rgba(226,68,18,.15);border-color:rgba(226,68,18,.3);}
.db-stat-mini-lbl{font-size:8px;color:var(--al-w55);margin-bottom:2px;}
.db-stat-mini-val{font-size:14px;font-weight:800;color:var(--al-orange);}
.db-stat-mini-val2{font-size:12px;font-weight:800;color:var(--al-orange);}
.db-stat-mini-val-white{color:var(--al-white);}
.db-stat-mini-sub{font-size:7px;color:var(--al-w30);}
.db-stat-mini-title{font-size:8px;font-weight:700;color:var(--al-w55);margin-bottom:6px;}
.db-cal-mini{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center;}
.db-cal-mini-day{font-size:6px;color:var(--al-w30);}
.db-cal-mini-today{background:var(--al-orange);color:#fff;border-radius:50%;width:12px;height:12px;
  display:flex;align-items:center;justify-content:center;font-size:6px;}
.db-cal-mini-date{font-size:7px;color:var(--al-w55);}
.db-cal-mini-date-today{font-size:7px;font-weight:700;color:var(--al-orange);}
.db-mini-field{background:var(--al-w12);border-radius:3px;padding:4px 6px;font-size:8px;color:var(--al-w30);margin-bottom:4px;}

/* Platform comparison table */
.feat-compare-header{text-align:center;margin-bottom:44px;}
.feat-compare-sub{margin:0 auto;}
.comp-table-wrap{background:var(--al-navy2);border:1px solid var(--al-w12);border-radius:12px;overflow:hidden;overflow-x:auto;}
.comp-table{width:100%;border-collapse:collapse;font-size:13px;}
.comp-table th{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--al-w30);
  padding:12px 20px;text-align:left;border-bottom:1px solid var(--al-w12);white-space:nowrap;}
.comp-table th.featured{color:var(--al-orange);}
.table-row td{padding:14px 20px;border-bottom:1px solid var(--al-w07);}
.table-label{font-size:13px;color:var(--al-w55);}
.comp-row-alt{background:rgba(255,255,255,.02);}
html.light-mode .comp-row-alt{background:rgba(0,0,0,.02);}
.check-y{color:var(--al-green);font-size:16px;}
.check-n{color:var(--al-w30);font-size:16px;}
.check-p{font-size:12px;font-weight:600;color:var(--al-orange);}

/* Platform history / timeline / stats */
.feat-history-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;}
.feat-history-h2{margin-bottom:36px;}
.feat-stats-col{display:flex;flex-direction:column;gap:18px;}
.timeline{position:relative;padding-left:40px;}
.timeline-line{position:absolute;left:15px;top:8px;bottom:8px;width:2px;background:var(--al-w12);}
.tl-item{position:relative;margin-bottom:32px;}
.tl-item:last-child{margin-bottom:0;}
.tl-dot{position:absolute;left:-33px;top:4px;width:16px;height:16px;border-radius:50%;
  background:var(--al-orange);border:3px solid var(--al-navy);z-index:1;}
.tl-year{font-size:10px;font-weight:700;color:var(--al-orange);letter-spacing:.12em;margin-bottom:4px;}
.tl-title{font-size:14px;font-weight:700;color:var(--al-white);margin-bottom:4px;}
.tl-body{font-size:12px;color:var(--al-w55);line-height:1.6;}
.feat-euipo-card{background:var(--al-navy2);border:1px solid var(--al-w12);border-radius:12px;padding:28px;}
.feat-euipo-label{margin-bottom:8px;}
.feat-euipo-title{font-size:15px;font-weight:700;color:var(--al-white);margin-bottom:8px;}
.feat-euipo-body{font-size:13px;color:var(--al-w55);line-height:1.7;}

@media (max-width:960px){
  .feat-section-pad{padding:70px 40px;}
  .feat-overview-grid{grid-template-columns:1fr 1fr;}
  .feat-deep,.feat-deep-reverse{grid-template-columns:1fr;direction:ltr;gap:36px;}
  .feat-history-grid{grid-template-columns:1fr;gap:44px;}
}
@media (max-width:600px){
  .feat-section-pad{padding:56px 20px;}
  .feat-overview-grid{grid-template-columns:1fr;}
  .feat-ov-card{height:auto;min-height:230px;}
  .db-layout-mini{flex-direction:column;height:auto;}
  .db-sidebar-mini,.db-sidebar-mini-wide{width:100%;display:flex;overflow-x:auto;}
}

/* ══════════════════════════════════════════════════
   About page (front/about-page.blade.php)
══════════════════════════════════════════════════ */
.about-section-pad{padding:90px 80px;}

.about-mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-bottom:80px;}
.about-mission-h2{margin-bottom:18px;}
.about-mission-p{font-size:14px;color:var(--al-w55);line-height:1.8;margin-bottom:20px;}
.about-mission-p-last{margin-bottom:28px;}

.about-value-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.about-value-card{background:var(--al-w07);border:1px solid var(--al-w12);border-radius:12px;padding:24px;
  border-top:3px solid var(--al-orange);}
.about-value-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  color:var(--al-orange);margin-bottom:12px;}
.about-value-title{font-size:14px;font-weight:700;color:var(--al-white);margin-bottom:8px;}
.about-value-body{font-size:12px;color:var(--al-w55);line-height:1.65;}

.about-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:48px 0;}
.about-stat{text-align:center;padding:28px;background:var(--al-w07);border:1px solid var(--al-w12);border-radius:12px;}
.about-stat-val{font-family:'Montserrat',sans-serif;font-size:36px;font-weight:900;color:var(--al-orange);
  line-height:1;margin-bottom:6px;}
.about-stat-lbl{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--al-w55);}

.about-block{margin-bottom:60px;}
.about-block-last{margin-bottom:0;}
.about-block-h2{margin-bottom:28px;}

.team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
.team-card{background:var(--al-navy2);border:1px solid var(--al-w12);border-radius:12px;padding:28px;text-align:center;}
.team-avatar{width:72px;height:72px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;
  justify-content:center;font-size:24px;font-weight:800;color:#fff;}
.team-name{font-size:15px;font-weight:700;color:var(--al-white);margin-bottom:4px;}
.team-role{font-size:12px;font-weight:600;color:var(--al-orange);margin-bottom:8px;}
.team-bio{font-size:12px;color:var(--al-w55);line-height:1.65;}

.about-cred-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.about-cred-card{background:var(--al-navy2);border:1px solid var(--al-w12);border-radius:12px;padding:28px;}
.about-cred-label{margin-bottom:8px;}
.about-cred-body{font-size:13px;color:var(--al-w55);line-height:1.75;margin:0;}

.about-advisor-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.about-advisor-card{background:var(--al-navy2);border:1px solid var(--al-w12);border-radius:12px;padding:28px;
  display:flex;gap:16px;align-items:flex-start;}
.about-advisor-avatar{width:46px;height:46px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;font-size:15px;font-weight:800;color:#fff;}
.about-advisor-name{font-size:13px;font-weight:700;color:var(--al-white);margin-bottom:4px;}
.about-advisor-role{font-size:11px;color:var(--al-orange);margin-bottom:6px;}
.about-advisor-body{font-size:12px;color:var(--al-w55);line-height:1.6;}

@media (max-width:960px){
  .about-section-pad{padding:70px 40px;}
  .about-mission-grid{grid-template-columns:1fr;gap:36px;margin-bottom:44px;}
  .about-stats{grid-template-columns:1fr 1fr;}
  .team-grid,.about-cred-grid,.about-advisor-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .about-section-pad{padding:56px 20px;}
  .about-value-grid{grid-template-columns:1fr;}
  .about-stats{grid-template-columns:1fr;}
  .team-grid,.about-cred-grid,.about-advisor-grid{grid-template-columns:1fr;}
}

/* ══════════════════════════════════════════════════
   Lawyer / Law Firm Profile page (front/single-lawyer.blade.php)
══════════════════════════════════════════════════ */
.lawp-page{padding:118px 80px 70px;min-height:60vh;}
.back-home{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--al-w55);
  cursor:pointer;margin-bottom:26px;transition:color .2s;background:none;border:none;text-decoration:none;
  font-family:'Montserrat',sans-serif;}
.back-home:hover{color:var(--al-orange);}
.lawp-top{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:start;background:var(--al-card-bg);
  border:1px solid var(--al-card-border);border-radius:14px;padding:28px;margin-bottom:18px;}
/* :not(.lawp-actions) — this was also matching .lawp-actions (also a direct
   div child of .lawp-top), and its higher specificity silently zeroed out
   .lawp-actions's own min-width:210px, shrinking the Hire button and the 4
   quick-action icons well below their intended design width. */
.lawp-top>div:not(.lawp-actions){min-width:0;}
.lawp-id{display:flex;gap:20px;align-items:flex-start;min-width:0;}
/* :not(.lawp-avatar) — this combinator was also matching the fixed-size avatar
   div (also a direct child of .lawp-id), stretching it to fill available
   width instead of staying at 88px, and starving the name column of the
   min-width:0 it needs to wrap instead of overflowing on mobile. */
.lawp-id>div:not(.lawp-avatar){min-width:0;flex:1;}
.lawp-avatar{width:88px;height:88px;border-radius:16px;background:linear-gradient(135deg,var(--al-orange),#f0733f);
  display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;color:#fff;flex-shrink:0;}
.lawp-featured{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--al-orange);
  background:rgba(226,68,18,.1);border:1px solid rgba(226,68,18,.25);padding:4px 11px;border-radius:20px;
  display:inline-block;margin-bottom:10px;}
.lawp-name{font-family:'EB Garamond',Georgia,serif;font-size:30px;font-weight:600;line-height:1.1;
  color:var(--al-white);display:flex;align-items:center;gap:10px;flex-wrap:wrap;overflow-wrap:break-word;min-width:0;}
/* Raw text sitting directly in a flex container becomes an anonymous flex
   item with a default min-width:auto, so it refused to shrink/wrap and just
   overflowed the card instead — wrapping it in its own element lets us zero
   that out explicitly. */
.lawp-name-text{min-width:0;overflow-wrap:break-word;}
.lawp-vbadge{font-size:10px;font-weight:700;letter-spacing:.05em;color:var(--al-green);
  background:rgba(61,214,140,.14);border:1px solid rgba(61,214,140,.3);border-radius:20px;padding:3px 10px;}
.lawp-loc{font-size:12.5px;color:var(--al-w55);margin:8px 0 3px;}
.lawp-joined{font-size:11px;color:var(--al-w30);}
.lawp-share{display:flex;gap:8px;margin-top:14px;}
.lawp-share a{width:30px;height:30px;border-radius:50%;border:1px solid var(--al-w12);color:var(--al-w55);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;cursor:pointer;
  transition:.2s;text-decoration:none;}
.lawp-share a:hover{border-color:var(--al-orange);color:var(--al-orange);}
.lawp-actions{display:flex;flex-direction:column;gap:10px;min-width:210px;}
.lawp-hire-btn{width:100%;justify-content:center;padding:12px;}
.lawp-qa{display:flex;gap:8px;}
.lawp-qa button{flex:1;height:40px;border-radius:8px;border:1px solid var(--al-w12);background:var(--al-w07);
  color:var(--al-w80);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;}
.lawp-qa button:hover{border-color:var(--al-orange);color:var(--al-orange);}
.lawp-qa svg{width:17px;height:17px;}
.lawp-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;background:var(--al-card-bg);
  border:1px solid var(--al-card-border);border-radius:12px;padding:24px;margin-bottom:20px;}
.lawp-fact{display:flex;gap:12px;}
.lawp-fact .ic{flex:0 0 36px;width:36px;height:36px;border-radius:8px;background:rgba(226,68,18,.1);
  color:var(--al-orange);display:flex;align-items:center;justify-content:center;}
.lawp-fact .ic svg{width:18px;height:18px;}
.lawp-fact .fl{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--al-w55);
  margin-bottom:4px;}
.lawp-fact .fv{font-size:12.5px;color:var(--al-w80);line-height:1.55;}
.lawp-tabs{display:flex;gap:6px;border-bottom:1px solid var(--al-w12);margin-bottom:26px;overflow-x:auto;
  position:sticky;top:66px;background:var(--al-navy);z-index:5;}
.lawp-tab{font-size:12.5px;font-weight:600;color:var(--al-w55);padding:13px 15px;cursor:pointer;
  border-bottom:2px solid transparent;white-space:nowrap;transition:.2s;background:none;border-top:none;
  border-left:none;border-right:none;font-family:'Montserrat',sans-serif;}
.lawp-tab:hover{color:var(--al-white);}
.lawp-tab.lawp-tab-active{color:var(--al-orange);border-bottom-color:var(--al-orange);}
.lawp-reg{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;
  background:var(--al-card-bg);border:1px solid var(--al-card-border);border-left:3px solid var(--al-orange);
  border-radius:12px;padding:24px;margin-bottom:22px;}
/* min-width:0 — grid items default to min-width:auto, which never shrinks
   below its content's intrinsic width. A long unbroken string (e.g. a
   registration number with no spaces) doesn't wrap in that case; it just
   overflows past its own column into the next one instead ("mixed with
   registration date"). min-width:0 lets the column actually shrink to its
   track width, and overflow-wrap on .rv then wraps the long value inside it. */
.lawp-reg>div{min-width:0;}
.lawp-reg .rtitle{grid-column:1/-1;font-size:15px;font-weight:700;color:var(--al-white);}
.lawp-reg .rl{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--al-w55);
  margin-bottom:4px;}
.lawp-reg .rv{font-size:13px;color:var(--al-white);font-weight:600;overflow-wrap:break-word;word-break:break-word;}
.lawp-panel{background:var(--al-card-bg);border:1px solid var(--al-card-border);border-radius:12px;padding:24px;
  margin-bottom:16px;}
/* margin-top:0 overrides webflow.css's legacy h3{margin-top:20px} rule, which
   was stacking on top of the panel's own 24px padding for a ~45px gap above
   the heading — the reference has no such extra space. */
.lawp-panel h3{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--al-orange);margin-top:0;margin-bottom:14px;}
.lawp-panel h3 svg{width:16px;height:16px;}
.lawp-panel p{font-size:13px;color:var(--al-w80);line-height:1.85;}
.lawp-panel ul{margin:0 0 0 18px;}
.lawp-panel li{font-size:13px;color:var(--al-w80);line-height:1.7;margin-bottom:7px;}
.lawp-panel a.lawp-poa-link{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;
  color:var(--al-orange);text-decoration:none;}
.lawp-empty{text-align:center;padding:44px 34px;color:var(--al-w55);font-size:13px;background:var(--al-card-bg);
  border:1px dashed var(--al-card-border);border-radius:12px;}
.lawp-empty .ei{font-size:34px;margin-bottom:10px;opacity:.5;}
.lawp-section-h{font-family:'EB Garamond',Georgia,serif;font-size:23px;font-weight:600;color:var(--al-white);
  margin:0 0 6px;}
.lawp-section-sub{font-size:12.5px;color:var(--al-w55);margin-bottom:18px;}
.lawp-eyebrow{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--al-orange);
  margin-bottom:3px;}
.lawp-svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
/* Fixed height + fixed-height sub-sections (name, description) so price/Buy
   Now always land at the same spot regardless of how much text a service
   has — long name/description scroll internally instead of growing the
   card or pushing the footer down. */
.lawp-svc-card{background:var(--al-card-bg);border:1px solid var(--al-card-border);border-radius:12px;
  padding:22px;display:flex;flex-direction:column;transition:border-color .2s;height:250px;overflow:hidden;}
.lawp-svc-card:hover{border-color:rgba(226,68,18,.35);}
.lsc-cat{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--al-orange);
  margin-bottom:8px;min-height:11px;flex-shrink:0;}
.lsc-name{font-size:14.5px;font-weight:700;color:var(--al-white);line-height:1.3;margin-bottom:7px;
  height:38px;overflow-y:auto;flex-shrink:0;scrollbar-width:thin;scrollbar-color:transparent transparent;}
.lawp-svc-card:hover .lsc-name{scrollbar-color:rgba(226,68,18,.5) transparent;}
.lsc-name::-webkit-scrollbar{width:4px;}
.lsc-name::-webkit-scrollbar-track{background:transparent;}
.lsc-name::-webkit-scrollbar-thumb{background:transparent;border-radius:3px;}
.lawp-svc-card:hover .lsc-name::-webkit-scrollbar-thumb{background:rgba(226,68,18,.5);}
.lsc-desc{font-size:12px;color:var(--al-w55);line-height:1.55;height:56px;margin-bottom:16px;overflow-y:auto;
  flex-shrink:0;scrollbar-width:thin;scrollbar-color:transparent transparent;}
.lawp-svc-card:hover .lsc-desc{scrollbar-color:rgba(226,68,18,.5) transparent;}
.lsc-desc::-webkit-scrollbar{width:4px;}
.lsc-desc::-webkit-scrollbar-track{background:transparent;}
.lsc-desc::-webkit-scrollbar-thumb{background:transparent;border-radius:3px;}
.lawp-svc-card:hover .lsc-desc::-webkit-scrollbar-thumb{background:rgba(226,68,18,.5);}
.lsc-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-shrink:0;}
.lsc-price{font-size:22px;font-weight:900;color:var(--al-white);line-height:1;}
.lsc-del{font-size:10.5px;color:var(--al-w55);margin-top:5px;}
.lsc-buy{background:var(--al-orange);color:var(--al-white);border:none;border-radius:6px;padding:10px 18px;
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;
  transition:background .2s;font-family:'Montserrat',sans-serif;white-space:nowrap;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.lsc-buy:hover{background:var(--al-orange2);}
.lawp-event-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
/* Fixed height, title/meta pinned — long descriptions scroll instead of
   growing the card or being cut with "…" (shared by Publications and
   Speaking Engagements, which both use this card). */
.lawp-event-card{background:var(--al-card-bg);border:1px solid var(--al-card-border);border-radius:12px;
  padding:22px;display:flex;flex-direction:column;height:220px;overflow:hidden;}
.lawp-event-title{font-size:14.5px;font-weight:700;color:var(--al-white);line-height:1.35;margin-bottom:8px;
  height:38px;overflow-y:auto;flex-shrink:0;scrollbar-width:thin;scrollbar-color:transparent transparent;}
.lawp-event-card:hover .lawp-event-title{scrollbar-color:rgba(226,68,18,.5) transparent;}
.lawp-event-title::-webkit-scrollbar{width:4px;}
.lawp-event-title::-webkit-scrollbar-track{background:transparent;}
.lawp-event-title::-webkit-scrollbar-thumb{background:transparent;border-radius:3px;}
.lawp-event-card:hover .lawp-event-title::-webkit-scrollbar-thumb{background:rgba(226,68,18,.5);}
.lawp-event-desc{font-size:12px;color:var(--al-w55);line-height:1.6;margin-bottom:14px;flex:1;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:transparent transparent;}
.lawp-event-card:hover .lawp-event-desc{scrollbar-color:rgba(226,68,18,.5) transparent;}
.lawp-event-desc::-webkit-scrollbar{width:4px;}
.lawp-event-desc::-webkit-scrollbar-track{background:transparent;}
.lawp-event-desc::-webkit-scrollbar-thumb{background:transparent;border-radius:3px;}
.lawp-event-card:hover .lawp-event-desc::-webkit-scrollbar-thumb{background:rgba(226,68,18,.5);}
.lawp-event-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--al-w55);flex-shrink:0;}
.lawp-event-meta span{display:inline-flex;align-items:center;gap:5px;}
/* Multi-column grid, same fixed-dimension treatment as Publications/Speaking. */
.lawp-review-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.lawp-review-card{background:var(--al-card-bg);border:1px solid var(--al-card-border);border-radius:12px;
  padding:20px 22px;display:flex;flex-direction:column;height:220px;overflow:hidden;}
.lawp-review-top{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-shrink:0;}
.lawp-review-avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;font-size:13px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--al-orange),#b83510);
  overflow:hidden;}
.lawp-review-avatar img{width:100%;height:100%;object-fit:cover;}
.lawp-review-name{font-size:13px;font-weight:700;color:var(--al-white);}
.lawp-review-stars{color:var(--al-orange);font-size:11px;margin-top:2px;}
.lawp-review-quote{font-size:13px;color:var(--al-w80);line-height:1.75;margin-bottom:12px;flex:1;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:transparent transparent;}
.lawp-review-card:hover .lawp-review-quote{scrollbar-color:rgba(226,68,18,.5) transparent;}
.lawp-review-quote::-webkit-scrollbar{width:4px;}
.lawp-review-quote::-webkit-scrollbar-track{background:transparent;}
.lawp-review-quote::-webkit-scrollbar-thumb{background:transparent;border-radius:3px;}
.lawp-review-card:hover .lawp-review-quote::-webkit-scrollbar-thumb{background:rgba(226,68,18,.5);}
.lawp-review-extra{display:flex;gap:16px;flex-wrap:wrap;font-size:11px;color:var(--al-w30);flex-shrink:0;}
.lawp-review-extra span{display:inline-flex;align-items:center;gap:5px;}
.lawp-review-viewall{margin-top:4px;}
.lawp-review-modal{position:fixed;inset:0;background:rgba(4,10,16,.7);z-index:500;display:none;
  align-items:flex-start;justify-content:center;padding:60px 20px;overflow-y:auto;}
.lawp-review-modal.lawp-review-modal-open{display:flex;}
.lawp-review-modal-box{background:var(--al-navy2);border:1px solid var(--al-w12);border-radius:14px;
  max-width:640px;width:100%;padding:32px;position:relative;}
.lawp-review-modal-close{position:absolute;top:18px;right:18px;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--al-w12);background:transparent;color:var(--al-w80);cursor:pointer;font-size:14px;}
.lawp-review-modal-close:hover{border-color:var(--al-orange);color:var(--al-orange);}
.lawp-review-modal-title{font-family:'EB Garamond',Georgia,serif;font-size:24px;font-weight:600;
  color:var(--al-white);margin-bottom:20px;}
.similar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:18px;margin-top:14px;}
@media (max-width:960px){
  .lawp-page{padding:104px 40px 60px;}
  .lawp-top{grid-template-columns:minmax(0,1fr);}
  .lawp-facts{grid-template-columns:1fr;}
  .lawp-actions{min-width:0;}
  .lawp-tabs{top:0;}
}
@media (max-width:600px){
  .lawp-page{padding:100px 20px 50px;}
}

/* ══════════════════════════════════════════════════
   How It Works page (front/how-it-works.blade.php,
   front/how-it-works-for-lawyers.blade.php)
══════════════════════════════════════════════════ */
.hiw-section-pad{padding:90px 80px;}
.hiw-section-pad-sm{padding:60px 80px;}
.ph-tabs{display:flex;gap:2px;background:var(--al-w07);border:1px solid var(--al-w12);border-radius:6px;
  padding:4px;width:fit-content;}
.ph-tab{font-size:12px;font-weight:600;letter-spacing:.05em;padding:10px 24px;border-radius:4px;
  cursor:pointer;color:var(--al-w55);transition:all .2s;text-decoration:none;}
.ph-tab.active{background:var(--al-orange);color:var(--al-white);}
.hiw-steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin-bottom:80px;}
.hiw-steps-grid::before{content:'';position:absolute;top:36px;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,var(--al-orange),var(--al-orange),transparent);opacity:.22;}
.step-card{text-align:center;padding:0 20px;}
.step-num{width:72px;height:72px;border-radius:50%;border:1px solid rgba(226,68,18,.3);
  background:rgba(226,68,18,.08);display:flex;align-items:center;justify-content:center;
  font-family:'Montserrat',sans-serif;font-size:22px;font-weight:800;color:var(--al-orange);
  margin:0 auto 24px;position:relative;z-index:1;}
.step-title{font-size:15px;font-weight:700;color:var(--al-white);margin-bottom:10px;}
.step-body{font-size:13px;color:var(--al-w55);line-height:1.7;}
.hiw-trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.hiw-trust-card{background:var(--al-w07);border:1px solid var(--al-w12);border-radius:12px;padding:28px;}
.hiw-trust-icon{width:52px;height:52px;border-radius:8px;background:rgba(226,68,18,.10);
  border:1px solid rgba(226,68,18,.20);display:flex;align-items:center;justify-content:center;
  color:var(--al-orange);margin:0 0 14px;}
.hiw-trust-title{font-size:15px;font-weight:700;color:var(--al-white);margin-bottom:8px;}
.hiw-trust-body{font-size:13px;color:var(--al-w55);line-height:1.7;}
@media (max-width:960px){
  .hiw-section-pad{padding:70px 40px;}
  .hiw-section-pad-sm{padding:50px 40px;}
  .hiw-steps-grid{grid-template-columns:1fr 1fr;row-gap:36px;}
  .hiw-trust-grid{grid-template-columns:1fr;gap:16px;}
}
@media (max-width:600px){
  .hiw-section-pad{padding:56px 20px;}
  .hiw-section-pad-sm{padding:44px 20px;}
  .hiw-steps-grid{grid-template-columns:1fr;row-gap:32px;margin-bottom:56px;}
  .hiw-steps-grid::before{display:none;}
}

/* ══════════════════════════════════════════════════
   Contact page (front/contact-us.blade.php)
══════════════════════════════════════════════════ */
.contact-section-pad{padding:90px 80px;}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
.form-group{margin-bottom:20px;}
.form-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--al-w55);
  margin-bottom:8px;display:block;}
.form-input,.form-textarea{width:100%;background:var(--al-w07);border:1px solid var(--al-w12);border-radius:6px;
  padding:12px 16px;font-size:13px;color:var(--al-white);font-family:'Montserrat',sans-serif;outline:none;
  transition:border-color .2s;}
.form-input:focus,.form-textarea:focus{border-color:rgba(226,68,18,.4);}
.form-input::placeholder,.form-textarea::placeholder{color:var(--al-w30);}
.form-textarea{height:120px;resize:vertical;}
html.light-mode .form-input,html.light-mode .form-textarea{background:#fff;border-color:rgba(0,0,0,.12);color:#0f1c28;}
html.light-mode .form-input::placeholder,html.light-mode .form-textarea::placeholder{color:rgba(15,28,40,.30);}
html.light-mode .form-label{color:rgba(15,28,40,.55);}
.contact-submit-btn{width:100%;justify-content:center;padding:14px;font-size:13px;margin-top:16px;}
.contact-info-card{background:var(--al-navy2);border:1px solid var(--al-w12);border-radius:12px;padding:32px;}
html.light-mode .contact-info-card{background:#fff;border-color:rgba(0,0,0,.09);}
.contact-row{display:flex;align-items:flex-start;gap:16px;margin-bottom:24px;}
.contact-row:last-child{margin-bottom:0;}
.c-icon{width:44px;height:44px;border-radius:8px;background:rgba(226,68,18,.10);border:1px solid rgba(226,68,18,.20);
  display:flex;align-items:center;justify-content:center;color:var(--al-orange);flex-shrink:0;}
.c-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--al-orange);
  margin-bottom:4px;}
.c-val{font-size:13px;color:var(--al-w80);line-height:1.65;}
html.light-mode .c-val{color:rgba(15,28,40,.75);}
.social-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--al-w12);display:flex;align-items:center;
  justify-content:center;font-size:12px;color:var(--al-w55);transition:all .2s;text-decoration:none;}
.social-btn:hover{border-color:var(--al-orange);color:var(--al-orange);}
html.light-mode .social-btn{border-color:rgba(0,0,0,.15);color:rgba(15,28,40,.40);}
html.light-mode .social-btn:hover{border-color:var(--al-orange);color:var(--al-orange);}
/* Success/failure banners for the real contact-form submission result —
   the reference is a static mockup with no such state, so this reuses the
   site's existing alert-style pattern rather than inventing new dots. */
.contact-form-alert{border-radius:8px;padding:14px 16px;font-size:13px;margin-top:16px;line-height:1.6;}
.contact-form-alert-success{background:rgba(61,214,140,.10);border:1px solid rgba(61,214,140,.30);color:var(--al-green);}
.contact-form-alert-error{background:rgba(226,68,18,.10);border:1px solid rgba(226,68,18,.30);color:var(--al-orange);}
@media (max-width:960px){
  .contact-section-pad{padding:70px 40px;}
  .contact-grid{grid-template-columns:1fr;gap:44px;}
}
@media (max-width:600px){
  .contact-section-pad{padding:56px 20px;}
  .contact-info-card{padding:24px;}
}

/* Shop/Lawyer-Firm item pages: neither `.last-section-ss` (the wrapper) nor
   `.go-to-top` (the "Back to Top" button inside it, atipa.webflow.css) had
   any margin-bottom — when a page has no "Similar Offers"/relative items to
   render after it (the section directly below is conditional), it ends up
   the last thing in the content area, sitting flush against the footer with
   no gap. */
.last-section-ss{margin-bottom:50px;}
.go-to-top{margin-bottom:50px;}
/* .single-container-child is the outer page wrapper on these "single item"
   detail pages (opens near the top of @section('content'), closes right
   before @endsection) — it had no margin-bottom either, so the whole page's
   content sat flush against the footer with no breathing room. */
.single-container-child{margin-bottom:50px;}