/* =====================================================
   Master Lawyer - Law Firm HTML Template
   Main stylesheet (css/style.css)

   Loaded after Bootstrap 5.3, Swiper and Animate.css, and after
   css/fonts.css and css/icons.css. Blog pages add css/blog.css.
   Brand gold: var(--gold). Type: the --font-* tokens in section 1.

   Contents
    1. Design tokens: colors and type roles
    2. Bootstrap 3 compatibility
    3. Base
    4. Scroll reveal
    5. Header: top bar
    6. Header: logo bar
    7. Header: logo bar
    8. Page wrappers
    9. Hero slider
   10. Stats band
   11. Home sections
   12. About: story and founder
   13. FAQ: help topics and accordion
   14. Team cards (home)
   15. Testimonials
   16. Carousels: shared
   17. Testimonials carousel
   18. Partner logos
   19. News
   20. Contact band and map
   21. Breadcrumbs
   22. Attorney carousel (about)
   23. Contact page: details box
   24. Footer
   25. Footer: office carousel
   26. Footer: contact lines, links and posts
   27. Footer: newsletter
   28. Logo and brand lockup
   29. Footer: bottom bar
   30. Parallax
   31. Main menu
   32. Back to top
   33. Section titles
   34. Buttons
   35. Cards: practice areas and news
   36. Contact form
   37. Main menu: toggle button
   38. Hero caption
   39. Icon glyphs
   40. Slider dots
   41. Customizer panel
   42. Responsive: original breakpoints
   43. Mobile menu
   44. Attorney carousel: hover reveal
   45. Icon sizes and large screens
   46. Team cards (home): hover reveal
   47. Attorney profile
   48. Card links
   49. Reveal motion
   50. Phones: typography and stats
   51. Phones: card rows and partner logos
   52. Contact band: phone link
   53. Phones: footer
   54. Accessibility: skip link and focus ring
   55. Phones and touch screens: attorney cards
   56. Phones: founder portrait
   ===================================================== */

/* ---------- Design tokens: colors and type roles ---------- */

/* Four type roles. Every font in style.css goes through these tokens, so a
   font option only has to redefine them. Sizes are written as
   calc(<design size> * var(--font-<role>-scale)): each option's scale keeps
   headlines and labels at the width the layout was designed for.

   Default: Barlow Condensed + Barlow. Alternatives (picked in the customizer and
   stored by js/font-init.js): html[data-font="oswald"], "archivo", "league".
   To ship one option only, delete the others' blocks below and the customizer. */
:root {
  /* Brand colours. --gold is the brand gold used everywhere (buttons,
     icons, lines, dark sections); --gold-text is a darker gold for small
     text on light backgrounds, where the brand gold is too faint (5.35:1). */
  --gold: #c29032;
  --gold-rgb: 194 144 50; /* the same gold as R G B, for tints: rgb(var(--gold-rgb) / 25%) */
  --gold-text: #8a6420;
  /* Keyboard focus (section "Accessibility" at the end of this file). */
  --focus-ring-color: #b5852b;
  --focus-ring-halo: rgb(var(--gold-rgb) / 18%);
  /* Overall size of headlines and labels, on top of each font's own
     --font-*-scale (which only evens out how big the fonts look).
     Lower these to make every heading or label smaller. */
  --type-display: 0.86;
  --type-label: 0.94;
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-display-weight: 600;
  --font-display-scale: calc(0.717 * var(--type-display));
  --font-display-stretch: normal;
  --font-display-case: uppercase;
  --font-label: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-label-weight: 500;
  --font-label-scale: calc(1.081 * var(--type-label));
  --font-label-stretch: normal;
  --font-body: 'Barlow', 'Segoe UI', Arial, sans-serif;
  --font-body-scale: 1.058;
  --font-caption: 'Barlow', 'Segoe UI', Arial, sans-serif;
  --font-caption-scale: 1.02;
  --font-caption-weight: 400;
  --font-caption-stretch: normal;
  --bs-body-font-size: 14px;
  --bs-body-line-height: 1.714286;
  --bs-link-color-rgb: 0, 0, 0;
  --bs-link-hover-color-rgb: 0, 0, 0;
  --logo-font: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --logo-tagline-font: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --logo-gold: var(--gold);
  --logo-weight: 600;
  --logo-header-size: 28.7px;
  --logo-header-track: 0;
  --logo-name-size: 0.957em;
  --logo-name-track: 0;
  --logo-name-lh: 0.983em;
  --logo-name-gap: 0.4em;
  --logo-tagline-weight: 500;
  --logo-tagline-size: 0.447em;
  --logo-tagline-track: 0;
  --logo-tagline-lh: 0.921em;
  --logo-tagline-gap: 0.329em;
  --screen-type: 1;
}

html[data-font="league"] {
  /* The template's original look. League Gothic is an OFL revival of the
     original Alternate Gothic, which could not be redistributed. */
  --font-display: 'League Gothic', 'Arial Narrow', sans-serif;
  --font-display-weight: 400;
  --font-display-scale: calc(1 * var(--type-display));
  --font-display-case: none;
  --font-label: 'Fjalla One', 'Arial Narrow', sans-serif;
  --font-label-weight: 400;
  --font-label-scale: calc(1 * var(--type-label));
  --font-body: 'Open Sans', Arial, Helvetica, sans-serif;
  --font-body-scale: 1;
  --font-caption: 'Open Sans', Arial, Helvetica, sans-serif;
  --font-caption-scale: 1;
  --font-caption-weight: 300;
  --font-caption-stretch: 75%;
  --logo-font: 'League Gothic', 'Arial Narrow', sans-serif;
  --logo-tagline-font: 'Fjalla One', 'Arial Narrow', sans-serif;
  --logo-weight: 400;
  --logo-header-size: 33px;
  --logo-header-track: 0.5px;
  --logo-name-size: 0.97em;
  --logo-name-track: 0.07em;
  --logo-name-lh: 0.97em;
  --logo-name-gap: 0.394em;
  --logo-tagline-weight: 400;
  --logo-tagline-size: 0.382em;
  --logo-tagline-track: 0.023em;
  --logo-tagline-lh: 1.077em;
  --logo-tagline-gap: 0.385em;
}

html[data-font="oswald"] {
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-display-weight: 500;
  --font-display-scale: calc(0.738 * var(--type-display));
  --font-display-case: none;
  --font-label: 'Oswald', 'Arial Narrow', sans-serif;
  --font-label-weight: 400;
  --font-label-scale: calc(1 * var(--type-label));
  --font-body: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
  --font-body-scale: 1.1;
  --font-caption: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
  --font-caption-scale: 1.05;
}

html[data-font="archivo"] {
  --font-display: 'Archivo', 'Arial Narrow', sans-serif;
  --font-display-weight: 700;
  --font-display-scale: calc(0.87 * var(--type-display));
  --font-display-stretch: 62%;
  --font-display-case: none;
  --font-label: 'Archivo', 'Arial Narrow', sans-serif;
  --font-label-weight: 600;
  --font-label-scale: calc(0.946 * var(--type-label));
  --font-label-stretch: 75%;
  --font-body: 'Archivo', 'Segoe UI', Arial, sans-serif;
  --font-body-scale: 1.017;
  --font-caption: 'Archivo', 'Segoe UI', Arial, sans-serif;
  --font-caption-scale: 1;
}


/* ---------- Bootstrap 3 compatibility ---------- */

/* The design was built on Bootstrap 3. These rules keep its grid, spacing and
   element defaults under Bootstrap 5 so the layout renders as designed. */
html {
  scroll-padding-top: 75px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* The template's Bootstrap 3 build: 30px gutters and 750 / 970 / 1200px containers
   (a custom 1230px large breakpoint) that clear their floats. */
.container::before, .container::after {
  content: " ";
  display: table;
}

.container::after {
  clear: both;
}

.container, .row {
  --bs-gutter-x: 30px;
}

@media (width >= 576px) {
  .container {
    max-width: none;
  }
}

@media (width >= 768px) {
  .container {
    max-width: 750px;
  }
}

@media (width >= 992px) {
  .container {
    max-width: 970px;
  }
}

@media (width >= 1230px) {
  .container {
    max-width: 1200px;
  }
}

/* Bootstrap 3 element defaults the design relies on. */
.clearfix::before {
  content: " ";
  display: table;
}

/* Bootstrap 3's .img-responsive was block-level; .img-fluid is not. */
.img-fluid {
  display: block;
}

/* Logo strips sit in a .row without grid columns; keep Bootstrap 3's block row there. */
.partners > .row {
  display: block;
}

p {
  margin: 0 0 10px;
}

figure {
  margin: 0;
}

label {
  margin-bottom: 5px;
  font-weight: 700;
}

ul, ol {
  padding-left: 40px;
  margin-bottom: 10px;
}

ul ul, ul ol, ol ul, ol ol {
  margin-bottom: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 500;
  line-height: 1.1;
}

blockquote {
  padding: 10px 20px;
  margin: 0 0 20px;
  font-size: calc(17.5px * var(--font-caption-scale) * var(--screen-type));
  border-left: 5px solid #eee;
}

.form-group {
  margin-bottom: 15px;
}

.form-control {
  font-size: calc(14px * var(--font-body-scale) * var(--screen-type));
  line-height: 1.42857143;
  border-radius: 4px;
}

.form-control:focus {
  box-shadow: none;
}

.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

.thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  line-height: inherit;
}

/* Navbar: keep Bootstrap 3's toggle button and float layout. */
.navbar_ {
  display: block;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  position: relative;
  z-index: 30;
  min-height: 0;
  float: right;
  padding-top: 17px;
  padding-bottom: 17px;
}

.navbar_ .navbar-toggle {
  position: relative;
  float: right;
  line-height: 1;
  margin-right: 0;
  padding: 10px 0 10px 10px;
  margin-top: 18px;
  margin-bottom: 18px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.navbar_ .navbar-toggle:focus {
  box-shadow: none;
}

.navbar_ .navbar-toggle .icon-bar {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
  transition: transform 0.3s ease-out, opacity 0.2s ease-out, background-color 0.2s ease-out;
}

.navbar_ .navbar-toggle .icon-bar + .icon-bar {
  margin-top: 6px;
}

@media (width >= 768px) {
  .navbar_ .navbar-toggle {
    display: none;
  }

  /* Must beat Bootstrap's .navbar-expand-md .navbar-collapse { display: flex !important }. */
  .navbar_ .navbar-collapse {
    display: block !important;
  }
}


/* ---------- Base ---------- */
a[href^="tel:"] {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--gold);
  color: #fff;
}

a {
  color: #000;
  text-decoration: underline;
}

a:hover {
  color: #000;
  text-decoration: none;
}

body {
  background: #fff;
  border: 0;
  font: calc(14px * var(--font-body-scale) * var(--screen-type)) var(--font-body);
  color: #696969;
  line-height: 1.714286;
  min-width: 320px;
}

.container {
  position: relative;
  min-width: 320px;
}

/* overflow-x: clip (not hidden) so the sticky header below keeps working */
#main {
  margin: 0 auto;
  position: relative;
  overflow-x: clip;
}


/* ---------- Scroll reveal ---------- */

/* Blocks wait, invisible, until js/scripts.js reveals them on scroll.
   Opacity (not visibility) keeps them readable by screen readers and
   find-in-page meanwhile; without JavaScript (no .js on <html>, set by
   js/font-init.js) nothing is hidden at all. */
.js .animated:not(.visible) {
  opacity: 0;
}


/* ---------- Header: top bar ---------- */
#top0 {
  position: relative;
  background: #000;
  border-bottom: 1px solid #31240d;
  z-index: 1;
  padding: 12px 0;
}

.not-front #top0 {
  border-bottom: 1px solid #000;
}

.social_wrapper {
  float: left;
  padding-top: 2px;
  padding-bottom: 3px;
}

.social {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social li {
  display: inline-block;
  margin: 0 20px 0 0;
}

.social li:last-child {
  margin-right: 0;
}

/* Plain brand glyphs; gold on hover. */
.social li a {
  display: block;
  text-decoration: none;
  color: #8a8a8a;
  transition: color 0.2s ease-out;
  font-size: 21px;
  line-height: 30px;
}

.social li a:hover, .social li a:focus-visible {
  color: var(--gold);
}

.free-button-wrapper {
  float: right;
}

.free-button {
  display: block;
  text-decoration: none;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-label);
  font-size: calc(15px * var(--font-label-scale) * var(--screen-type));
  text-transform: uppercase;
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
}

.free-button:hover {
  color: #fff;
}

.free-button span {
  display: block;
  margin: 3px;
  padding: 1px 15px;
  transition: all 0.3s ease-out;
}

.free-button:hover span {
  background: var(--gold);
}

.ic1 {
  font-size: calc(13px * var(--font-caption-scale) * var(--screen-type));
  line-height: 20px;
  color: #fff;
  padding: 7px 0;
  font-family: var(--font-caption);
  white-space: nowrap;
  font-stretch: var(--font-caption-stretch);
  font-weight: var(--font-caption-weight);
}

.ic1 i {
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  float: left;
  padding-right: 10px;
}

.ic1 span {
  float: left;
}

.ic1 span a {
  color: #fff;
  text-decoration: none;
}

.mail1_wrapper {
  float: right;
  padding-right: 20px;
}

.phone1_wrapper {
  float: right;
  padding-right: 20px;
}


/* ---------- Header: logo bar ---------- */

/* <header class="site-header"> wraps #top0 and #top1 for the banner landmark
   but generates no box, so #top1 stays sticky against the whole page. */
.site-header {
  display: contents;
}


/* ---------- Header: logo bar ---------- */
.site-brand {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -15px;
  z-index: 50;
}

#top1 {
  width: 100%;
  position: sticky;
  left: 0;
  top: 0;
  z-index: 99;
  min-width: 320px;
}

/* Blog pages are for reading: the header scrolls away with the page. */
.page-blog #top1 {
  position: relative;
}

#top2 {
  position: relative;
  z-index: 40;
}

.top2_wrapper {
  background: #000;
  transition: all 0.3s ease-out;
}

.not-front .top2_wrapper {
  background: #000;
}

.top2 {
  position: relative;
}


/* ---------- Page wrappers ---------- */
#content {
  position: relative;
  padding-top: 60px;
  padding-bottom: 60px;
}

#home {
  position: relative;
  overflow: hidden;
  background: #000;
}

#slides_wrapper {
  position: relative;
}


/* ---------- Hero slider ---------- */

/* The slider fills the window below the header: top bar (61px) + menu bar (75px). */
#slides {
  position: relative;
  height: calc(100vh - 136px);
  height: calc(100svh - 136px);
}

#slides .slides-container {
  margin: 0;
  padding: 0;
  list-style: none;
}

#slides .swiper-slide {
  position: relative;
  overflow: hidden;
  background: #000;
}

#slides .swiper-slide > .img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slides-navigation button {
  border: 0;
  padding: 0;
  cursor: pointer;
  position: absolute;
  z-index: 10;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
  top: 50%;
  margin-top: -25px;
  background: left top no-repeat #1e1e1e;
  transition: all 0.3s ease-out;
}

.slides-navigation .prev {
  left: 24px;
}

.slides-navigation .next {
  background: right top no-repeat #1e1e1e;
  right: 24px;
}

.slides-navigation button:hover {
  background-color: var(--gold);
  background-position: right top;
}

.slides-navigation .next:hover {
  background-position: left top;
}

.slides-container .caption {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  width: 100%;
  padding-bottom: 40px;
  text-align: center;
  color: #fff;
  font-family: var(--font-display);
  line-height: 1.1;
  font-weight: var(--font-display-weight);
  font-stretch: var(--font-display-stretch);
  text-transform: var(--font-display-case);
}

.slides-container .caption .txt1 {
  font-size: max(calc(23px * var(--font-display-scale) * var(--screen-type)), 15px);
  padding-bottom: 10px;
}

.slides-container .caption .txt2 {
  font-size: max(calc(90px * var(--font-display-scale) * var(--screen-type)), 15px);
  color: var(--gold);
  padding-bottom: 20px;
}

.slides-container .caption .txt3 {
  font-size: max(calc(24px * var(--font-display-scale) * var(--screen-type)), 15px);
  padding-bottom: 25px;
  letter-spacing: 1px;
}

.slides-container .caption .img1 {
  padding-bottom: 35px;
}

.slider-link1 {
  display: inline-block;
  text-decoration: none;
  border: 1px solid var(--gold);
  color: #040404;
  font-family: var(--font-label);
  font-size: calc(16px * var(--font-label-scale) * var(--screen-type));
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
}

.slider-link1:hover {
  color: #fff;
}

.slider-link1 span {
  display: block;
  margin: 3px;
  padding: 10px 25px;
  background: var(--gold);
  transition: all 0.3s ease-out;
}

.slider-link1:hover span {
  background: #000;
}

@media (width <= 991px) {
  .slides-container .caption .img1 {
    display: none;
  }

  .slides-container .caption .txt1 {
    font-size: max(calc(20px * var(--font-display-scale) * var(--screen-type)), 15px);
  }

  .slides-container .caption .txt2 {
    font-size: max(calc(70px * var(--font-display-scale) * var(--screen-type)), 15px);
  }

  .slides-container .caption .txt3 {
    font-size: max(calc(16px * var(--font-display-scale) * var(--screen-type)), 15px);
  }
}

@media (width <= 767px) {
  .slides-container .caption .link1 {
    display: none;
  }

  .slides-container .caption .txt1 {
    padding-bottom: 5px;
    font-size: min(calc(20px * var(--font-display-scale) * var(--screen-type)), 5vw);
    line-height: 1.2;
  }

  .slides-container .caption .txt2 {
    font-size: max(calc(34px * var(--font-display-scale) * var(--screen-type)), 15px);
    padding-bottom: 10px;
  }
}

@media (width <= 480px) {
  .slides-container .caption {
    font-size: max(calc(14px * var(--font-display-scale) * var(--screen-type)), 14px);
    line-height: 20px;
  }

  .slides-container .caption .txt2 {
    font-size: max(calc(30px * var(--font-display-scale) * var(--screen-type)), 15px);
  }
}


/* ---------- Stats band ---------- */
#info {
  position: relative;
  background: #191919;
}

.info-wrapper {
  display: table;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.info-wrapper .info1 {
  display: table-cell;
  width: 25%;
  text-align: center;
  border-left: 1px solid #262626;
  vertical-align: middle;
  padding: 44px 10px;
}

/* The four figures sit within the page width, divided by short rules. */
.info-wrapper .info1:first-child {
  border-left: 0;
}

.info-wrapper .info1-inner {
  display: inline-block;
  text-align: left;
  white-space: nowrap;
}

.info-wrapper .info1 .img1 {
  display: inline-block;
  float: left;
  margin-top: 10px;
}

.info-wrapper .info1 .caption {
  float: left;
  padding-left: 10px;
  font-family: var(--font-label);
  text-transform: uppercase;
  line-height: 1.4;
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
}

.info-wrapper .info1 .txt1 {
  font-size: calc(32px * var(--font-label-scale) * var(--screen-type));
  color: #fff;
}

.info-wrapper .info1 .txt2 {
  font-size: calc(13px * var(--font-label-scale) * var(--screen-type));
  color: var(--gold);
}


/* ---------- Home sections ---------- */
.dark-bg {
  background: #262626;
}

#practice {
  position: relative;
  padding-top: 60px;
  padding-bottom: 80px;
}

#about {
  position: relative;
  background: #fff;
  padding-top: 60px;
  border-bottom: 1px solid #ebebeb;
}

.not-front #about {
  border-bottom: none;
}


/* ---------- About: story and founder ---------- */
.about-txt {
  position: relative;
  padding-bottom: 110px;
}

.about-txt .txt1 {
  font-family: var(--font-label);
  font-size: calc(25px * var(--font-label-scale) * var(--screen-type));
  color: var(--gold);
  text-align: right;
  padding-bottom: 15px;
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
}

.about-txt .txt2 {
  font-family: var(--font-label);
  font-size: calc(19px * var(--font-label-scale) * var(--screen-type));
  color: #555;
  padding-bottom: 15px;
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
}

.about-txt .txt3 {
  font-family: var(--font-caption);
  font-size: calc(15px * var(--font-caption-scale) * var(--screen-type));
  color: #767676;
  padding-bottom: 15px;
  font-stretch: var(--font-caption-stretch);
  font-weight: var(--font-caption-weight);
}

.sign1 {
  min-height: 201px;
  background: url("../images/sign1.png") right top no-repeat;
  font-family: var(--font-label);
  font-size: calc(15px * var(--font-label-scale) * var(--screen-type));
  color: #767676;
  text-align: right;
  padding-top: 140px;
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
}

.sign1 .txt4 {
  color: #222;
  position: relative;
}

.sign1 .txt5 {
  position: relative;
}

.sign1 .pen1 {
  position: absolute;
  width: 100%;
  height: auto;
}

.man1 {
  position: absolute;
  right: -100%;
  bottom: 0;
}


/* ---------- FAQ: help topics and accordion ---------- */
.topic1 {
  display: block;
  border: 1px solid #e5e5e5;
  color: #737373;
  font-family: var(--font-display);
  font-size: max(calc(25px * var(--font-display-scale) * var(--screen-type)), 15px);
  background: #fff;
  text-align: center;
  text-decoration: none;
  margin-bottom: 30px;
  font-weight: var(--font-display-weight);
  font-stretch: var(--font-display-stretch);
  text-transform: var(--font-display-case);
}

.topic1:hover {
  border-color: var(--gold);
  color: #fff;
}

.topic1 span {
  display: block;
  margin: 2px;
  padding: 35px 15px;
  transition: all 0.3s ease-out;
}

.topic1:hover span {
  background: var(--gold);
}

.accordion {
  margin-bottom: 20px;

  --bs-accordion-bg: transparent;
  --bs-accordion-border-width: 0;
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
}

.accordion .accordion-header {
  padding: 0;
  margin: 2px 0 0;
}

.accordion .accordion-button {
  font-size: max(calc(25px * var(--font-display-scale) * var(--screen-type)), 15px);
  line-height: 1.3;
  font-weight: var(--font-display-weight);
  color: #262626;
  padding: 10px 20px 10px 25px;
  border: none;
  font-family: var(--font-display);
  background: none;
  box-shadow: none;
  font-stretch: var(--font-display-stretch);
  text-transform: var(--font-display-case);
}

.accordion .accordion-button:focus {
  box-shadow: none;
}

.accordion .accordion-button:not(.collapsed) {
  background: none;
  color: var(--gold);
  box-shadow: none;
}

.accordion .accordion-button::after {
  content: var(--glyph-plus);
  position: absolute;
  top: 50%;
  right: 0;
  width: auto;
  height: auto;
  margin-top: -8px;
  background: none;
  font-size: 16px;
  color: #9a9a9a;
  transform: none;
}

.accordion .accordion-button:not(.collapsed)::after {
  content: var(--glyph-minus);
  color: var(--gold);
  transform: none;
}

.accordion .accordion-body {
  padding: 0 25px 35px;
  border: none;
  line-height: 1.5;
  font-family: var(--font-caption);
  color: #737373;
  font-size: calc(15px * var(--font-caption-scale) * var(--screen-type));
  font-stretch: var(--font-caption-stretch);
  font-weight: var(--font-caption-weight);
}

#faq {
  position: relative;
  border-top: 3px solid #fff;
}


/* ---------- Team cards (home) ---------- */
#team {
  position: relative;
  padding-top: 60px;
  border-bottom: 3px solid #f6f4f4;
}

.team1 {
  width: 33.33333333%;
  float: left;
  position: relative;
}

.team1 figure img {
  margin-left: auto;
  margin-right: auto;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease-out;
}

.team1 .caption {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 10px;
  text-align: center;
  padding: 24px 22px 20px;
  background: rgb(22 22 22 / 88%);
  border-top: 0;
  box-shadow: 0 18px 40px rgb(0 0 0 / 45%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.3s ease-out, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.3s;
}

.team1:hover .caption {
  opacity: 1;
}

.team1 .caption .txt1 {
  font-family: var(--font-label);
  font-size: calc(30px * var(--font-label-scale) * var(--screen-type));
  color: #fff;
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
}

.team1 .caption .txt2 {
  font-family: var(--font-label);
  font-size: calc(15px * var(--font-label-scale) * var(--screen-type));
  color: var(--gold);
  padding-bottom: 5px;
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
}

.team1 .caption .txt3 {
  font-family: var(--font-caption);
  font-size: calc(15px * var(--font-caption-scale) * var(--screen-type));
  color: #dbdbdb;
  padding-bottom: 10px;
  font-stretch: var(--font-caption-stretch);
  font-weight: var(--font-caption-weight);
}

.social_team {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social_team li {
  display: inline-block;
  margin: 5px 2px;
}

.social_team li a {
  display: block;
  text-decoration: none;
  font-size: calc(13px * var(--font-body-scale) * var(--screen-type));
  color: #b4b4b4;
  text-align: center;
  line-height: 28px;
  width: 30px;
  height: 30px;
  border: 1px solid #fff;
  border-radius: 50%;
  transition: all 0.3s ease-out;
}

.social_team li a:hover {
  color: #ba8a31;
  border-color: #ba8a31;
}


/* ---------- Testimonials ---------- */
#testimonials {
  position: relative;
  background: #f6f4f4;
  padding-top: 60px;
  padding-bottom: 40px;
  border-top: 1px solid #252525;
  border-bottom: 1px solid #adadad;
}


/* ---------- Carousels: shared ---------- */
.carousel.main.swiper > .swiper-wrapper {
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}


/* ---------- Testimonials carousel ---------- */
#clients {
  position: relative;
  margin-top: 0;
  margin-bottom: 60px;
}

.clients_prev {
  border: 0;
  padding: 0;
  cursor: pointer;
  position: absolute;
  z-index: 10;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
  top: 150px;
  left: -15px;
  background: left top no-repeat #fff;
  box-shadow: 0 0 10px rgb(0 0 0 / 13%);
  border-radius: 2px;
  transition: all 0.3s ease-out;
}

.clients_prev:hover {
  background-color: var(--gold);
  background-position: right top;
}

.clients_next {
  border: 0;
  padding: 0;
  cursor: pointer;
  position: absolute;
  z-index: 10;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
  top: 150px;
  right: -15px;
  background: right top no-repeat #fff;
  box-shadow: 0 0 10px rgb(0 0 0 / 13%);
  border-radius: 2px;
  transition: all 0.3s ease-out;
}

.clients_next:hover {
  background-color: var(--gold);
  background-position: left top;
}

#clients .carousel-box {
  position: relative;
}

#clients .carousel-box .inner {
  position: relative;
  overflow: hidden;
  max-width: none;
  margin: 0;
}

#clients .carousel.main {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  margin-right: -30px;
}

#clients .carousel.main > ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

#clients .carousel-box ul li {
  position: relative;
  overflow: hidden;
  padding-right: 30px;
  box-sizing: border-box;
}

.clients .clients_inner {
  position: relative;
  padding: 10px;
}

.clients .clients_inner figure {
  margin: 0;
  padding: 0;
  position: relative;
  border: none;
  background: none;
  z-index: 2;
  margin-left: 30px;
}

.clients .clients_inner .caption {
  background: 92% 40px no-repeat #fff;
  margin-top: -50px;
  box-shadow: 0 0 10px rgb(0 0 0 / 13%);
  padding: 80px 50px 50px 40px;
  border: 1px solid transparent;
  transition: all 0.3s ease-out;
  background-image: none;
  position: relative;
}

.clients .clients_inner:hover .caption {
  border-color: var(--gold);
  box-shadow: 0 0 10px rgb(0 0 0 / 20%);
}

.clients .clients_inner .caption .txt1 {
  font-family: var(--font-label);
  font-size: calc(18px * var(--font-label-scale) * var(--screen-type));
  color: var(--gold);
  padding-bottom: 10px;
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
}

.clients .clients_inner .caption .txt2 {
  color: #737373;
  font-size: calc(15px * var(--font-caption-scale) * var(--screen-type));
  font-family: var(--font-caption);
  font-stretch: var(--font-caption-stretch);
  font-weight: var(--font-caption-weight);
}


/* ---------- Partner logos ---------- */
.partners {
  text-align: center;
}

.partner1 {
  width: 20%;
  float: left;
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 30px;
}

.partner1__logo {
  display: block;
}

.partner1__logo figure {
  position: relative;
}

.partner1__logo img {
  margin-left: auto;
  margin-right: auto;
}

.partner1__logo .img2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0;
  transition: all 0.3s ease-out;
}

.partner1__logo:hover .img2 {
  opacity: 1;
}


/* ---------- News ---------- */
#news {
  position: relative;
  background: #fff;
  padding-top: 60px;
  padding-bottom: 50px;
}


/* ---------- Contact band and map ---------- */
#contacts {
  position: relative;
  background: #191919 url("../images/parallax1.jpg") center / cover no-repeat;
  box-shadow: inset 0 0 0 100vmax rgb(0 0 0 / 78%);
  padding-top: 115px;
  padding-bottom: 85px;
}

#google_map {
  position: absolute;
  inset: 0;
}

#google_map.map-placeholder {
  background: #191919 url("../images/parallax1.jpg") center / cover no-repeat;
  box-shadow: inset 0 0 0 100vmax rgb(0 0 0 / 80%);
}

/* Office pin on the map (js/googlemap.js): a gold dot with a soft ring. */
.map-pin {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}

.map-pin::before,
.map-pin::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.map-pin::before {
  width: 44px;
  height: 44px;
  background: rgb(var(--gold-rgb) / 22%);
  animation: mapPinPulse 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.map-pin::after {
  width: 16px;
  height: 16px;
  border: 3px solid #111;
  background: var(--gold);
  box-shadow: 0 2px 8px rgb(0 0 0 / 50%);
}

@keyframes mapPinPulse {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.4);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-pin::before {
    animation: none;
  }
}

.not-front #google_map {
  position: relative;
  height: 500px;
}

.contacts_border {
  position: relative;
  text-align: center;
  padding: 0 0 50px;
  border: 1px solid #fff;
  border-top: none;
  color: #fff;
}

.contacts_border .contact-icon {
  top: -30px;
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
}

.contacts_border .contact-icon span {
  position: relative;
  display: inline-block;
}

.contacts_border .contact-icon span::before {
  content: '';
  display: block;
  width: 1000px;
  height: 1px;
  background: #fff;
  position: absolute;
  right: 100%;
  top: 30px;
}

.contacts_border .contact-icon span::after {
  content: '';
  display: block;
  width: 1000px;
  height: 1px;
  background: #fff;
  position: absolute;
  left: 100%;
  top: 30px;
}

.contacts_border .txt1 {
  font-family: var(--font-label);
  font-size: calc(20px * var(--font-label-scale) * var(--screen-type));
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
}

.contacts_border .txt2 {
  font-family: var(--font-display);
  font-size: max(calc(57px * var(--font-display-scale) * var(--screen-type)), 15px);
  font-weight: var(--font-display-weight);
  font-stretch: var(--font-display-stretch);
  text-transform: var(--font-display-case);
}

.contacts_border .txt3 {
  font-family: var(--font-label);
  font-size: calc(17px * var(--font-label-scale) * var(--screen-type));
  margin-bottom: 30px;
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
}


/* ---------- Breadcrumbs ---------- */
/* A dark strip under the header with a home icon, chevron separators and the
   current page in gold. Long trails truncate the last item on phones. */
.breadcrumbs1_wrapper {
  position: relative;
  background: #111;
  border-bottom: 1px solid rgb(var(--gold-rgb) / 25%);
}

.breadcrumbs1 ol {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  min-height: 52px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-label);
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
  font-size: calc(13px * var(--font-label-scale) * var(--screen-type));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9a958c;
}

.breadcrumbs1 li {
  display: flex;
  align-items: center;
  min-width: 0;
  white-space: nowrap;
}

.breadcrumbs1 li + li::before {
  content: var(--glyph-next);
  margin: 0 12px;
  font-family: var(--icon-font);
  font-size: 13px;
  letter-spacing: 0;
  color: #5c5850;
}

.breadcrumbs1 a {
  display: inline-flex;
  align-items: center;
  color: #9a958c;
  text-decoration: none;
  transition: color 0.25s ease-out;
}

.breadcrumbs1 a:hover {
  color: #fff;
}

.breadcrumbs1 a .ico {
  font-size: 17px;
  color: var(--gold);
}

.breadcrumbs1 [aria-current="page"] {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--gold);
}


/* ---------- Attorney carousel (about) ---------- */
#team2 {
  position: relative;
  padding-top: 60px;
  padding-bottom: 100px;
}

.team2-wrapper {
  position: relative;
  padding-left: 8%;
  padding-right: 8%;
}

#meet {
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
}

.meet_prev {
  border: 0;
  padding: 0;
  cursor: pointer;
  position: absolute;
  z-index: 10;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
  top: 50%;
  margin-top: -25px;
  left: -70px;
  background: left top no-repeat;
  border-radius: 2px;
  transition: all 0.3s ease-out;
}

.meet_prev:hover {
  background-position: right top;
}

.meet_next {
  border: 0;
  padding: 0;
  cursor: pointer;
  position: absolute;
  z-index: 10;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
  top: 50%;
  margin-top: -25px;
  right: -70px;
  background: right top no-repeat;
  border-radius: 2px;
  transition: all 0.3s ease-out;
}

.meet_next:hover {
  background-position: left top;
}

#meet .carousel-box {
  position: relative;
}

#meet .carousel-box .inner {
  position: relative;
  overflow: hidden;
  max-width: none;
  margin: 0;
}

#meet .carousel.main {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  margin-right: -60px;
}

#meet .carousel.main > ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

#meet .carousel-box ul li {
  position: relative;
  overflow: hidden;
  padding-right: 60px;
  box-sizing: border-box;
}

.meet .meet_inner {
  position: relative;
  overflow: hidden;
}

.meet .meet_inner figure {
  margin: 0;
  padding: 0;
  position: relative;
  border: none;
  background: none;
  overflow: hidden;
  transition: none;
}

.meet .meet_inner:hover figure {
  opacity: 0;
}

.meet .meet_inner figure img {
  width: 100%;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Darkens the photo on hover. An overlay fade is much cheaper to animate
   than a brightness filter on the image. */
.meet .meet_inner figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 45%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}

.meet .meet_inner:hover figure::after, .meet .meet_inner:focus-within figure::after {
  opacity: 1;
}

.meet .meet_inner .caption {
  text-align: center;
  padding-top: 15px;
  transition: opacity 0.35s ease-out;
}

.meet .meet_inner:hover .caption {
  opacity: 0;
}

.meet .meet_inner .caption .txt1 {
  font-family: var(--font-label);
  font-size: calc(16px * var(--font-label-scale) * var(--screen-type));
  color: #fff;
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
}

.meet .meet_inner .caption .txt2 {
  font-family: var(--font-label);
  font-size: calc(13px * var(--font-label-scale) * var(--screen-type));
  color: var(--gold);
  padding-bottom: 5px;
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
}

.meet .meet_inner .hover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 28px 24px 26px;
  border: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 55%) 35%, rgb(0 0 0 / 94%) 72%);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: none;
  transition: opacity 0.3s ease-out, visibility 0.3s;
}

.meet .meet_inner .hover .txt1 {
  font-family: var(--font-label);
  font-size: calc(25px * var(--font-label-scale) * var(--screen-type));
  color: #fff;
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
}

.meet .meet_inner .hover .txt2 {
  font-family: var(--font-label);
  font-size: calc(15px * var(--font-label-scale) * var(--screen-type));
  color: var(--gold);
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
  padding-bottom: 10px;
}

.meet .meet_inner .hover .txt3 {
  color: #d0d0d0;
  font-family: var(--font-caption);
  font-size: calc(15px * var(--font-caption-scale) * var(--screen-type));
  font-stretch: var(--font-caption-stretch);
  font-weight: var(--font-caption-weight);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
  line-height: 1.5;
}

.meet .meet_inner .hover .social3_wrapper {
  left: 0;
  right: 0;
  bottom: 0;
  position: static;
  padding: 16px 0 0;
  background: none;
}

.social3_wrapper {
  padding-top: 10px;
}

.social3 {
  display: block;
  margin: 0;
  padding: 0;
}

.social3 > div {
  display: inline-block;
  margin: 5px 2px;
}

.social3 > div a {
  display: block;
  text-decoration: none;
  font-size: calc(13px * var(--font-body-scale) * var(--screen-type));
  color: #b4b4b4;
  text-align: center;
  line-height: 33px;
  width: 35px;
  height: 35px;
  border: 1px solid #b4b4b4;
  border-radius: 50%;
  transition: all 0.3s ease-out;
}

.social3 > div a:hover {
  color: #ba8a31;
  border-color: #ba8a31;
}


/* ---------- Contact page: details box ---------- */
.contact-box {
  background: #fff;
  box-shadow: 0 8px 10px 0 rgb(0 0 0 / 10%);
  position: relative;
  padding: 15px;
  font-family: var(--font-caption);
  color: #767676;
  margin-bottom: 80px;
  margin-top: 50px;
  font-stretch: var(--font-caption-stretch);
  font-weight: var(--font-caption-weight);
}

.contact-box-inner {
  position: relative;
  border: 1px solid var(--gold);
  padding: 20px 40px 70px;
}

.page-contact2 .contact-box {
  background: url("../images/contact-box.jpg");
  box-shadow: 0 8px 10px 0 rgb(0 0 0 / 25%);
  margin-bottom: 30px;
}

.page-contact2 .contact-box-inner {
  padding-bottom: 40px;
}

.ic4 {
  font-size: calc(15px * var(--font-label-scale) * var(--screen-type));
  line-height: 20px;
  color: #555;
  padding: 0;
  margin: 0 0 15px;
  font-family: var(--font-label);
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
}

.ic4 i {
  color: #262626;
  min-width: 40px;
  font-size: 20px;
  line-height: 20px;
  float: left;
  padding-right: 10px;
}

.ic4 span {
  display: table;
}

.ic4 span a {
  color: #555;
  text-decoration: none;
}

.mark1 {
  position: absolute;
  left: 50%;
  margin-left: -150px;
  bottom: -140px;
}


/* ---------- Footer ---------- */
.bot1 {
  position: relative;
  background: #262626;
  padding-top: 40px;
  padding-bottom: 30px;
  color: #d0d0d0;
  font-family: var(--font-body);
  font-size: calc(13px * var(--font-body-scale) * var(--screen-type));
  border-bottom: 1px solid #151515;
}

.bot_title {
  position: relative;
  padding-top: 25px;
  padding-bottom: 15px;
  margin-bottom: 30px;
  font-family: var(--font-label);
  font-size: calc(16px * var(--font-label-scale) * var(--screen-type));
  color: #fff;
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
}

.bot_title::after {
  content: '';
  display: inline-block;
  width: 30px;
  height: 2px;
  background: var(--gold);
  position: absolute;
  left: 0;
  bottom: 0;
}


/* ---------- Footer: office carousel ---------- */
#location {
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
}

.location_pagination {
  display: flex;
  gap: 4px;
  margin-left: -8px;
  padding-top: 10px;
}

/* Same pill dots as the other sliders: a 24px target around an 8px dot;
   the current office stretches into a gold pill. */
.location_pagination .location-bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border: 0;
  background: none;
  cursor: pointer;
}

.location_pagination .location-bullet span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #555;
  transition: width 0.3s ease-out, background-color 0.3s ease-out;
}

.location_pagination .location-bullet:hover span {
  background: #8a8a8a;
}

.location_pagination .location-bullet.selected span {
  width: 24px;
  background: var(--gold);
}

#location .carousel-box {
  position: relative;
}

#location .carousel-box .inner {
  position: relative;
  overflow: hidden;
  max-width: none;
  margin: 0;
}

#location .carousel.main {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  margin-right: -30px;
}

#location .carousel.main > ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

#location .carousel-box ul li {
  position: relative;
  overflow: hidden;
  padding-right: 30px;
  box-sizing: border-box;
}

.location .location_inner {
  position: relative;
  padding: 0;
}


/* ---------- Footer: contact lines, links and posts ---------- */
.ic2 {
  font-size: calc(13px * var(--font-body-scale) * var(--screen-type));
  line-height: 20px;
  color: #d0d0d0;
  padding: 0;
  margin: 0 0 15px;
  font-family: var(--font-body);
}

.ic2 i {
  color: #ab7f30;
  min-width: 30px;
  font-size: 17px;
  line-height: 20px;
  float: left;
  padding-right: 10px;
}

.ic2 span {
  display: table;
}

.ic2 span a {
  color: #d0d0d0;
  text-decoration: none;
}

.ul0 {
  padding: 0;
  margin: 0;
  list-style: none;
  color: #d0d0d0;
  font-family: var(--font-body);
  font-size: calc(13px * var(--font-body-scale) * var(--screen-type));
}

.ul0 li {
  display: block;
  padding: 0 0 8px;
}

.ul0 li a {
  color: #d0d0d0;
  text-decoration: none;
  display: block;
}

.ul0 li a:hover {
  text-decoration: underline;
  color: #fff;
}

.ic3 {
  font-size: calc(13px * var(--font-body-scale) * var(--screen-type));
  line-height: 20px;
  color: #d0d0d0;
  padding: 0;
  margin: 0 0 25px;
  font-family: var(--font-body);
}

.ic3 i {
  color: #ab7f30;
  min-width: 30px;
  font-size: 17px;
  line-height: 20px;
  float: left;
  padding-right: 10px;
}

.ic3 span {
  display: table;
}

.ic3 span em {
  display: block;
  font-style: normal;
  padding-top: 10px;
}

.ic3 span a {
  color: var(--gold);
  text-decoration: none;
}


/* ---------- Footer: newsletter ---------- */
.subscribe-form-wrapper {
  position: relative;
  margin-top: 20px;
}

.subscribe-form-wrapper .form-control {
  border: 1px solid #626262;
  border-radius: 0;
  padding: 11px 50px 10px 15px;
  height: 43px;
  color: #d0d0d0;
  font-size: calc(14px * var(--font-body-scale) * var(--screen-type));
  line-height: 20px;
  background: none;
}

.subscribe-form-wrapper .form-control::placeholder {
  color: #9a958c;
  opacity: 1;
}

.subscribe-form-wrapper .form-control:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px var(--focus-ring-halo);
  color: #fff;
}

.subscribe-form-wrapper__submit {
  position: absolute;
  top: 5px;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  line-height: 33px;
  background: var(--gold);
  color: #000;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  padding: 0;
  border: 0;
  cursor: pointer;
}

.subscribe-form-wrapper__submit:hover {
  background: #fff;
  color: #000;
}

.social2_wrapper {
  padding-top: 20px;
}

.social2 {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social2 li {
  display: inline-block;
  margin: 5px 2px;
}

.social2 li a:hover, .social2 li a:focus-visible {
  color: #ba8a31;
  border-color: #ba8a31;
}

.logo2_wrapper {
  text-align: center;
  padding-top: 25px;
}

.logo2_wrapper a {
  display: inline-block;
  text-decoration: none;
}


/* ---------- Logo and brand lockup ---------- */

/* The logo is live text plus a vector emblem, so it stays sharp at any size
   and on any screen density. It stays in Barlow Condensed across font options (a
   brand mark is fixed) except League Gothic, which restores the original
   lettering; sizes match the original artwork's width. */

/* The League Gothic option brings back the original logo lettering. */
.logo {
  display: block;
  text-decoration: none;
}

.logo:hover, .logo:focus {
  text-decoration: none;
}

.logo-text {
  display: block;
  height: 30px;
  font: var(--logo-weight) calc(var(--logo-header-size) * var(--screen-type))/30px var(--logo-font);
  letter-spacing: var(--logo-header-track);
  color: #fff;
  white-space: nowrap;
}

.logo-accent {
  color: var(--logo-gold);
}

/* Emblem + name + tagline. Everything is in em, so one font-size scales the
   whole lockup: 34px matches the hero artwork, 17.5px the footer one. */
.brand-lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 5.53em;
  font-size: 34px;
  line-height: 1;
  text-decoration: none;
}

.brand-lockup--footer {
  font-size: 17.5px;
}

.brand-lockup__emblem {
  display: block;
  width: 3.912em;
  height: 4.765em;
}

.brand-lockup__name {
  display: block;
  position: relative;
  top: 0.035em;
  height: var(--logo-name-lh);
  margin-top: var(--logo-name-gap);
  font: var(--logo-weight) var(--logo-name-size)/var(--logo-name-lh) var(--logo-font);
  letter-spacing: var(--logo-name-track);
  text-indent: var(--logo-name-track);
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

.brand-lockup__tagline {
  display: block;
  position: relative;
  top: 0.15em;
  height: var(--logo-tagline-lh);
  margin-top: var(--logo-tagline-gap);
  font: var(--logo-tagline-weight) var(--logo-tagline-size)/var(--logo-tagline-lh) var(--logo-tagline-font);
  letter-spacing: var(--logo-tagline-track);
  text-indent: var(--logo-tagline-track);
  text-transform: uppercase;
  color: var(--logo-gold);
  white-space: nowrap;
}


/* ---------- Footer: bottom bar ---------- */
.bot2 {
  position: relative;
  background: #212121;
  padding: 33px 0;
  text-align: center;
  color: #d0d0d0;
  font-family: var(--font-body);
  font-size: calc(12px * var(--font-body-scale) * var(--screen-type));
  border-top: 3px solid #262626;
}

.bot2 a {
  color: var(--gold);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bot2 a:hover {
  color: #fff;
}


/* ---------- Parallax ---------- */
.parallax {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: none;
  padding-top: 60px;
  padding-bottom: 90px;
}

.parallax, .parallax .parallax-content {
  height: 100%;
}

.parallax-bg {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  margin: 0 auto;
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

/* Parallax (js/scripts.js): the layer is taller than its section and is
   moved with transform, which the browser does on the GPU without
   repainting the photo. */
.parallax-bg.is-parallax {
  top: -20%;
  height: 140%;
  will-change: transform;
}

.parallax .parallax-content {
  position: relative;
}

.bg1 {
  background-image: url("../images/parallax1.jpg");
}


/* ---------- Main menu ---------- */
.navbar_ .navbar-toggle:hover, .navbar_ .navbar-toggle:focus {
  background: none;
}

.navbar-collapse_ {
  padding-left: 0;
  padding-right: 0;
  border: none;
}

.navbar_ .nav {
  position: relative;
  margin: 0;
  padding: 0;
  display: block;
  float: none;
}

.navbar_ .nav > li {
  position: relative;
  display: block;
  float: left;
  white-space: nowrap;
  background: none;
  margin-left: 25px;
}

.navbar_ .nav > li:first-child {
  margin-left: 0;
}

.navbar_ .nav > li > a {
  display: block;
  text-decoration: none;
  background: none;
  font-family: var(--font-label);
  font-weight: var(--font-label-weight);
  font-size: calc(14px * var(--font-label-scale) * var(--screen-type));
  line-height: 20px;
  color: #fff;
  text-shadow: none;
  padding: 10px 2px;
  border: none;
  margin: 0;
  text-align: left;
  position: relative;
  z-index: 2;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease-out;
  font-stretch: var(--font-label-stretch);
}

.navbar_ .nav > li > a i {
  margin-left: 5px;
}

.navbar_ .nav > li > a:focus {
  color: #fff;
  text-decoration: none;
  box-shadow: none;
  border-radius: 0;
  background: none;
  border-bottom: 1px solid transparent;
}

.navbar_ .nav > li > a:hover, .navbar_ .nav > li:hover > a {
  color: var(--gold);
  text-decoration: none;
  box-shadow: none;
  border-radius: 0;
  background: none;
  border-bottom: 1px solid var(--gold);
}

.navbar_ .nav > li > a.active,
.navbar_ .nav > li > a.active:hover,
.navbar_ .nav > li > a.active:focus {
  color: var(--gold);
  text-decoration: none;
  box-shadow: none;
  border-radius: 0;
  background: none;
  border-bottom: 1px solid var(--gold);
}

.sub-menu ul {
  position: absolute;
  display: none;
  right: 0;
  top: 100%;
  list-style: none;
  z-index: 1;
  margin: 0;
  padding: 0;
  background: #000;
  text-align: right;
  border: 1px solid var(--gold);
  margin-top: -1px;
  border-radius: 0;
  text-transform: uppercase;
}

.sub-menu li {
  margin: 0;
  position: relative;
  display: block;
  border-top: 1px solid var(--gold);
}

.sub-menu li:first-child {
  border-top: none;
}

.sub-menu li a {
  display: block;
  position: relative;
  font-family: var(--font-label);
  font-weight: var(--font-label-weight);
  font-size: calc(15px * var(--font-label-scale) * var(--screen-type));
  line-height: 20px;
  color: #fff;
  text-decoration: none;
  padding: 6px 14px 6px 35px;
  background: none;
  transition: all 0.3s ease-out;
  font-stretch: var(--font-label-stretch);
}

.sub-menu li a:hover {
  text-decoration: none;
  color: var(--gold);
  background: none;
}

/* Bootstrap 5 dropdown, restyled as the original Superfish menu: opens on
   hover (and keyboard focus) on desktop, on tap in the mobile menu. */
.navbar_ .sub-menu > .dropdown-menu {
  --bs-dropdown-min-width: 0;
  --bs-dropdown-padding-y: 0;
  --bs-dropdown-spacer: 0;
  --bs-dropdown-font-size: inherit;

  font-size: inherit;
  min-width: 0;
  padding: 0;
  color: inherit;
}

.sub-menu li a.dropdown-item {
  white-space: nowrap;
}

.sub-menu li a.dropdown-item:hover, .sub-menu li a.dropdown-item:focus {
  background: none;
  color: var(--gold);
}

.sub-menu li a.dropdown-item:active {
  background: none;
}

@media (width >= 768px) {
  .navbar_ .sub-menu > .dropdown-menu {
    position: absolute;
    right: 0;
    left: auto;
    top: 100%;
  }

  .navbar_ .sub-menu:hover > .dropdown-menu, .navbar_ .sub-menu:focus-within > .dropdown-menu {
    display: block;
    animation: subMenuIn 0.3s ease-out;
  }
}

@keyframes subMenuIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/* ---------- Back to top ---------- */
#toTop {
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  position: fixed;
  z-index: 1000;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 16px;
  bottom: 16px;
  width: 44px;
  height: 44px;
  background: #111;
  border: 1px solid #333;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
}

#toTop.is-visible {
  opacity: 1;
  visibility: visible;
}


/* ---------- Section titles ---------- */
.title1 {
  font-family: var(--font-label);
  font-size: calc(14px * var(--font-label-scale) * var(--screen-type));
  line-height: 1.1;
  font-weight: var(--font-label-weight);
  color: var(--gold);
  text-align: center;
  text-transform: none;
  padding-top: 0;
  padding-bottom: 10px;
  font-stretch: var(--font-label-stretch);
}

.title2 {
  font-family: var(--font-display);
  font-size: max(calc(50px * var(--font-display-scale) * var(--screen-type)), 15px);
  line-height: 1.1;
  font-weight: var(--font-display-weight);
  color: #262626;
  text-align: center;
  text-transform: var(--font-display-case);
  padding-top: 0;
  padding-bottom: 15px;
  position: relative;
  margin-bottom: 25px;
  font-stretch: var(--font-display-stretch);
}

.title2::after {
  content: '';
  display: inline-block;
  width: 70px;
  height: 4px;
  background: var(--gold);
  position: absolute;
  left: 50%;
  margin-left: -35px;
  bottom: 0;
}

.dark-bg .title2 {
  color: #fff;
}

.title3 {
  font-family: var(--font-caption);
  font-size: calc(15px * var(--font-caption-scale) * var(--screen-type));
  font-weight: 400;
  color: #d0d0d0;
  text-align: center;
  padding-bottom: 30px;
  font-stretch: var(--font-caption-stretch);
}

.title4 {
  font-family: var(--font-display);
  font-size: max(calc(25px * var(--font-display-scale) * var(--screen-type)), 15px);
  font-weight: var(--font-display-weight);
  color: #262626;
  padding-bottom: 10px;
  font-stretch: var(--font-display-stretch);
  text-transform: var(--font-display-case);
}

.title5 {
  font-family: var(--font-body);
  font-size: calc(14px * var(--font-body-scale) * var(--screen-type));
  font-weight: 700;
  color: var(--gold);
  padding-bottom: 10px;
}

.title6 {
  font-family: var(--font-label);
  font-size: calc(28px * var(--font-label-scale) * var(--screen-type));
  line-height: 1.1;
  font-weight: var(--font-label-weight);
  color: #262626;
  text-align: left;
  text-transform: none;
  padding-top: 30px;
  padding-bottom: 15px;
  position: relative;
  margin-bottom: 30px;
  font-stretch: var(--font-label-stretch);
}

.title6::after {
  content: '';
  display: inline-block;
  width: 70px;
  height: 4px;
  background: var(--gold);
  position: absolute;
  left: 0;
  bottom: 0;
}

h2 {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: max(calc(27px * var(--font-display-scale) * var(--screen-type)), 15px);
  color: #333;
  line-height: 1.1;
  padding: 30px 0 20px;
  margin: 0;
  font-stretch: var(--font-display-stretch);
  text-transform: var(--font-display-case);
}

h3 {
  display: block;
  font-family: var(--font-label);
  font-weight: var(--font-label-weight);
  font-size: calc(18px * var(--font-label-scale) * var(--screen-type));
  color: #333;
  line-height: 1.1;
  padding: 20px 0;
  margin: 0;
  font-stretch: var(--font-label-stretch);
}

/* Section, card and footer titles are real headings; they take the look of
   the class they carry, not the browser's, Bootstrap's or the h2/h3 above.
   Specificity (0,0,1): wins over those, loses to every component class. */
:is(h1, h2, h3):where(.title2, .title4, .title5, .title6, .bot_title, .txt1) {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  text-wrap: inherit;
}


/* ---------- Buttons ---------- */
.btn-default.btn1 {
  font-family: var(--font-label);
  display: inline-block;
  color: var(--gold);
  border: none;
  font-size: calc(13px * var(--font-label-scale) * var(--screen-type));
  line-height: 20px;
  font-weight: var(--font-label-weight);
  padding: 5px 0;
  text-decoration: none;
  border-radius: 0;
  margin-top: 0;
  margin-bottom: 0;
  text-transform: uppercase;
  background: none;
  position: relative;
  text-align: left;
  transition: all 0.3s ease-out;
  font-stretch: var(--font-label-stretch);
}

.btn-default.btn1:hover {
  color: #000;
}

.btn-default.btn2 {
  font-family: var(--font-label);
  display: inline-block;
  color: #040404;
  border: 1px solid var(--gold);
  font-size: calc(16px * var(--font-label-scale) * var(--screen-type));
  line-height: 20px;
  font-weight: var(--font-label-weight);
  padding: 0;
  text-decoration: none;
  border-radius: 0;
  margin-top: 0;
  margin-bottom: 0;
  text-transform: uppercase;
  background: none;
  position: relative;
  text-align: left;
  letter-spacing: 1px;
  transition: all 0.3s ease-out;
  font-stretch: var(--font-label-stretch);
}

.btn-default.btn2:hover {
  color: #fff;
}

.btn-default.btn2 span {
  display: block;
  margin: 3px;
  padding: 13px 35px;
  background: var(--gold);
}

.btn-default.btn2:hover span {
  background: #000;
}


/* ---------- Cards: practice areas and news ---------- */
.thumbnail .caption {
  padding: 0;
  color: inherit;
}

.thumb1 {
  margin-bottom: 30px;
  margin-top: 0;
}

.thumb1 .thumbnail {
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
  background: none;
}

.thumb1 a {
  display: block;
  box-shadow: 0 2px 8px rgb(0 0 0 / 25%);
  padding: 40px 20px 30px;
  border: 1px solid transparent;
  transition: all 0.3s ease-out;
  text-decoration: none;
}

.thumb1 a:hover {
  border-color: var(--gold);
}

.thumb1 a figure {
  float: none;
  margin: 0 0 35px;
  position: relative;
}

.thumb1 a .caption {
  text-align: center;
}

.thumb1 a .caption .txt1 {
  font-family: var(--font-label);
  font-size: calc(16px * var(--font-label-scale) * var(--screen-type));
  color: var(--gold);
  padding-bottom: 15px;
  line-height: 1.4;
  transition: all 0.3s ease-out;
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
}

.thumb1 a:hover .caption .txt1 {
  color: #fff;
}

.thumb1 a .caption .txt2 {
  font-family: var(--font-caption);
  font-size: calc(15px * var(--font-caption-scale) * var(--screen-type));
  color: #b9b6b0;
  line-height: 1.65;
  font-stretch: var(--font-caption-stretch);
  font-weight: var(--font-caption-weight);
}

.thumb2 {
  margin-bottom: 20px;
  margin-top: 0;
}

.thumb2 .thumbnail {
  position: relative;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
  background: none;
}

.thumb2 figure {
  float: none;
  margin: 0 0 20px;
  position: relative;
  overflow: hidden;
}

.thumb2 figure img {
  width: 100%;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.thumb2 figure .date1 {
  position: absolute;
  left: 20px;
  bottom: 20px;
  background: var(--gold);
  width: 71px;
  text-align: center;
  padding: 13px 10px;
  color: #000;
  font-family: var(--font-label);
  line-height: 1.1;
  text-transform: uppercase;
  font-size: calc(29px * var(--font-label-scale) * var(--screen-type));
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
}

.thumb2 figure .date1::before {
  content: '';
  display: block;
  border: 1px solid rgba(0, 0, 0, 0.3);
  position: absolute;
  inset: 5px;
}

.thumb2 figure .date1 .txt2 {
  font-size: calc(12px * var(--font-label-scale) * var(--screen-type));
}

.thumb2 .caption .txt1 {
  font-family: var(--font-label);
  font-size: calc(25px * var(--font-label-scale) * var(--screen-type));
  color: #000;
  padding-bottom: 10px;
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
  transition: color 0.3s ease-out;
}


/* ---------- Contact form ---------- */
.notification_error {
  color: #f00;
  padding-bottom: 10px;
}

.notification_ok {
  text-align: left;
  padding-bottom: 10px;
}

#ajax-contact-form .form-group {
  margin-left: 0;
  margin-right: 0;
}

#ajax-contact-form .form-control {
  height: 38px;
  padding: 8px 12px;
  font-size: calc(14px * var(--font-caption-scale) * var(--screen-type));
  line-height: 20px;
  color: #737373;
  background: none;
  border: 1px solid #ccc;
  border-radius: 0;
}

#ajax-contact-form .form-control:focus {
  border-color: var(--focus-ring-color);
  background: #fff;
  color: #000;
  box-shadow: 0 0 0 4px var(--focus-ring-halo);
}

#ajax-contact-form .form-control::placeholder {
  color: #737373;
  opacity: 1;
}

#ajax-contact-form textarea.form-control {
  height: auto;
}

.btn-default.btn-cf-submit {
  font-family: var(--font-label);
  display: inline-block;
  color: #fff;
  border: 1px solid var(--gold);
  font-size: calc(16px * var(--font-label-scale) * var(--screen-type));
  line-height: 20px;
  font-weight: var(--font-label-weight);
  padding: 0;
  text-decoration: none;
  border-radius: 0;
  margin-bottom: 0;
  text-transform: uppercase;
  background: none;
  position: relative;
  text-align: left;
  letter-spacing: 1px;
  margin-top: 20px;
  transition: all 0.3s ease-out;
  font-stretch: var(--font-label-stretch);
}

.btn-default.btn-cf-submit:hover {
  color: #fff;
}

.btn-default.btn-cf-submit span {
  display: block;
  margin: 3px;
  padding: 13px 35px;
  background: #000;
}

.btn-default.btn-cf-submit:hover span {
  background: var(--gold);
}


/* ---------- Main menu: toggle button ---------- */

/* Menu button: three thin lines that turn into a close (X) mark when open. */
.navbar_ .navbar-toggle:hover .icon-bar {
  background: var(--gold);
}

.navbar_ .navbar-toggle:not(.collapsed) .icon-bar:nth-of-type(2) {
  transform: translateY(8px) rotate(45deg);
}

.navbar_ .navbar-toggle:not(.collapsed) .icon-bar:nth-of-type(3) {
  opacity: 0;
}

.navbar_ .navbar-toggle:not(.collapsed) .icon-bar:nth-of-type(4) {
  transform: translateY(-8px) rotate(-45deg);
}


/* ---------- Hero caption ---------- */

/* Font options that set headlines in capitals keep sentences in normal case. */
.slides-container .caption .txt3, .about-txt .txt1 {
  text-transform: none;
}

@media (width <= 767px) {
  /* The dots navigate on phones; the side arrows would cover the caption. */
  #slides .slides-navigation {
    display: none;
  }

  .slides-container .caption .container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .slides-container .caption .txt2 {
    font-size: min(calc(46px * var(--font-display-scale) * var(--screen-type)), 10.5vw);
    line-height: 1.05;
    padding-bottom: 14px;
  }
}


/* ---------- Icon glyphs ---------- */

/* Arrows, FAQ toggles, back-to-top and the newsletter button draw their glyphs
   from the active icon set (css/icons.css) instead of the old sprite images. */
.slides-navigation button::before,
.clients_prev::before,
.clients_next::before,
.meet_prev::before,
.meet_next::before,
.accordion .accordion-button::after,
#toTop::before,
.subscribe-form-wrapper__submit::before {
  font-family: var(--icon-font);
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

.slides-navigation .prev::before, .clients_prev::before, .meet_prev::before {
  content: var(--glyph-prev);
}

.slides-navigation .next::before, .clients_next::before, .meet_next::before {
  content: var(--glyph-next);
}

.slides-navigation button,
.slides-navigation button:hover,
.slides-navigation .next,
.slides-navigation .next:hover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  background: rgb(0 0 0 / 35%);
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  transition: color 0.2s ease-out, border-color 0.2s ease-out;
}

.slides-navigation button:hover, .slides-navigation button:focus-visible {
  color: var(--gold);
  border-color: var(--gold);
}

.clients_prev, .clients_prev:hover, .clients_next, .clients_next:hover {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #e3ddd2;
  border-radius: 50%;
  box-shadow: none;
  color: #555;
  font-size: 20px;
  transition: color 0.2s ease-out, border-color 0.2s ease-out;
}

.clients_prev:hover, .clients_next:hover, .clients_prev:focus-visible, .clients_next:focus-visible {
  color: var(--gold);
  border-color: var(--gold);
}

.meet_prev, .meet_prev:hover, .meet_next, .meet_next:hover {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  transition: color 0.2s ease-out, border-color 0.2s ease-out;
}

.meet_prev:hover, .meet_next:hover, .meet_prev:focus-visible, .meet_next:focus-visible {
  color: var(--gold);
  border-color: var(--gold);
}

#toTop:hover, #toTop:focus-visible {
  color: var(--gold);
  border-color: var(--gold);
}

#toTop::before {
  content: var(--glyph-arrow-up);
}

.subscribe-form-wrapper__submit::before {
  content: var(--glyph-send);
}

/* Practice areas, stats and contact: icons from the active set. */
.thumb1 a figure .ico-practice {
  display: block;
  text-align: center;
  text-decoration: none;
  font-size: 60px;
  color: #fff;
  transition: color 0.3s ease-out;
}

.thumb1 a:hover figure .ico-practice {
  color: var(--gold);
}

.info-wrapper .info1 .ico-stat {
  font-size: 44px;
  color: #fff;
  margin-top: 6px;
}

.contacts_border .contact-icon .ico {
  display: block;
  width: 82px;
  font-size: 52px;
  line-height: 63px;
  color: #fff;
}

/* Testimonial quote mark (was quote.png). */
.clients .clients_inner .caption::before {
  content: var(--glyph-quote);
  position: absolute;
  right: 8%;
  top: 32px;
  font-family: var(--icon-font);
  font-size: 64px;
  line-height: 1;
  color: #efe4cf;
}


/* ---------- Slider dots ---------- */

/* Dots make it obvious a block is a slideshow and how many slides it has.
   Each dot is a 24px button (the WCAG 2.2 minimum target) that draws an
   8px pill in its middle. The row keeps its original height and the larger
   targets overflow it, so the pills and the layout stay exactly as they were. */
.carousel-dots {
  display: flex;
  justify-content: center;
  height: 32px;
  padding-top: 16px;
}

.carousel-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border: 0;
  background: none;
  cursor: pointer;
}

.carousel-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #c9c3b8;
  transition: width 0.3s ease-out, background-color 0.3s ease-out;
}

.carousel-dot.is-active::before {
  width: 24px;
  background: var(--gold);
}

.dark-bg .carousel-dot::before {
  background: #555;
}

#slides .slides-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 10;
  display: flex;
  justify-content: center;
}

#slides .slides-dots .carousel-dot::before {
  background: rgb(255 255 255 / 45%);
}

.dark-bg .carousel-dot.is-active::before,
#slides .slides-dots .carousel-dot.is-active::before {
  background: var(--gold);
}


/* ---------- Customizer panel ---------- */
.customizer-toggle {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 1001;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gold);
  color: #000;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgb(0 0 0 / 35%);
  transition: background-color 0.2s ease-out;
}

.customizer-toggle:hover {
  background: #d6a54a;
}

.customizer {
  position: fixed;
  left: 16px;
  bottom: 72px;
  z-index: 1001;
  width: 260px;
  padding: 18px;
  background: #111;
  color: #d0d0d0;
  border: 1px solid #262626;
  border-radius: 6px;
  box-shadow: 0 12px 40px rgb(0 0 0 / 45%);
  font-family: var(--font-body);
  font-size: 14px;
}

.customizer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.customizer__title {
  font-family: var(--font-label);
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}

.customizer__close {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  color: #8a8a8a;
  cursor: pointer;
  font-size: 18px;
}

.customizer__close:hover, .customizer__close:focus-visible {
  color: #fff;
}

.customizer__label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8a8a;
}

.customizer-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 8px;
  padding: 10px 12px;
  border: 1px solid #262626;
  border-radius: 4px;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease-out;
}

.customizer-option:last-child {
  margin-bottom: 0;
}

.customizer-option:hover {
  border-color: #555;
}

.customizer-option[aria-pressed="true"] {
  border-color: var(--gold);
}

.customizer-option__sample {
  flex: none;
  width: 36px;
  font-size: 26px;
  line-height: 1;
  color: var(--gold);
}

.customizer-option__sample--icons {
  display: flex;
  gap: 4px;
  width: auto;
  min-width: 36px;
  font-size: 18px;
  color: var(--gold);
}

.customizer__section + .customizer__section {
  margin-top: 16px;
}

.customizer-option__text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.customizer-option__name {
  color: #fff;
  font-size: 14px;
}

.customizer-option__note {
  font-size: 12px;
  color: #8a8a8a;
}

@media (width <= 480px) {
  .customizer {
    right: 16px;
    width: auto;
  }
}


/* ---------- Responsive: original breakpoints ---------- */

/* Default landscape and desktop to large desktop */
@media (width <= 1229px) {
  .sign1 .pen1 {
    max-width: 70%;
  }
}

/* Portrait tablet to landscape and desktop */
@media (width <= 991px) {
  .man1 {
    position: relative;
    right: 0;
    bottom: auto;
    padding-top: 25px;
  }

  .man1 img {
    margin-left: auto;
    margin-right: auto;
  }

  .about-txt {
    padding-bottom: 0;
  }

  .page-contact .contact-box-inner {
    padding-bottom: 120px;
  }
}

/* Landscape phone to portrait tablet */
@media (width <= 767px) {
  .mail1_wrapper {
    display: none;
  }

  .phone1_wrapper {
    display: none;
  }

  .navbar_ {
    float: none;
    height: 75px;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .navbar-collapse_ {
    clear: both;
    margin-left: -15px;
    margin-right: -15px;
  }

  .navbar_ .nav {
    display: block;
    border: none;
    counter-reset: menu-index;
    width: 100%;
    background: none;
    padding: 0;
  }

  .navbar_ .nav > li {
    float: none;
    border-left: none;
    background: none;
    counter-increment: menu-index;
    border-top: 0;
    margin: 0;
  }

  .navbar_ .nav > li > a {
    margin-bottom: 0;
    border: 0;
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: baseline;
    padding: 10px 0;
    font-family: var(--font-display);
    font-weight: var(--font-display-weight);
    font-stretch: var(--font-display-stretch);
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #f2f2f2;
  }

  .navbar_ .nav > li > a:hover,
  .navbar_ .nav > li > a:focus,
  .navbar_ .nav > li:hover > a,
  .navbar_ .nav > li > a.active,
  .navbar_ .nav > li > a.active:hover,
  .navbar_ .nav > li > a.active:focus {
    border: 0;
  }

  .sub-menu ul {
    position: relative;
    left: 0;
    top: 0;
    margin-top: 0;
    border: none;
  }

  .sub-menu ul li {
    text-align: left;
  }

  .sub-menu ul li a {
    padding-left: 20px;
  }

  .info-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .info-wrapper .info1 {
    display: block;
    width: auto;
    padding: 26px 10px;
    border-left: 1px solid #262626;
    border-top: 1px solid #262626;
    text-align: center;
  }

  .team1 {
    width: 100%;
    float: none;
    margin-top: 30px;
  }

  .partner1 {
    width: auto;
    float: none;
    padding-left: 15px;
    display: inline-block;
  }

  .team2-wrapper {
    padding-left: 50px;
    padding-right: 50px;
  }

  .meet_prev {
    left: -50px;
  }

  .meet_next {
    right: -50px;
  }
}

/* Landscape phones and down */
@media (width <= 480px) {
  .free-button-wrapper {
    display: none;
  }
}


/* ---------- Mobile menu ---------- */

/* Under 768px the menu unrolls below the header as a numbered table of
   contents (the sections run in that order down the home page), with call,
   email and the case-evaluation button at the bottom. Desktop is unchanged. */
.menu-index__label, .menu-index__foot {
  display: none;
}

@media (width <= 767px) {
  .navbar_ .navbar-collapse_ {
    position: fixed;
    inset: var(--menu-top, 136px) 0 0 0;
    z-index: 90;
    margin: 0;
    padding: 18px 24px 24px;
    background: #000;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .navbar_ .navbar-collapse_.show {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    animation: menuIndexIn 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Bootstrap writes an inline height while collapsing; the menu does not animate it. */
  .navbar_ .navbar-collapse_.collapsing {
    height: auto !important;
    transition: none;
    display: none;
  }

  .navbar_ .navbar-collapse_ > * {
    flex-shrink: 0;
  }

  .menu-index__label {
    display: block;
    margin: 0 0 6px;
    font-family: var(--font-label);
    font-weight: var(--font-label-weight);
    font-stretch: var(--font-label-stretch);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9a958c;
  }

  .navbar_ .nav > li > a::before {
    content: counter(menu-index, decimal-leading-zero);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #9a958c;
  }

  .navbar_ .nav > li > a::after {
    content: var(--glyph-next);
    font-family: var(--icon-font);
    font-size: 18px;
    color: var(--gold);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.2s, transform 0.2s;
  }

  .navbar_ .nav > li > a:hover::after, .navbar_ .nav > li > a.active::after {
    opacity: 1;
    transform: none;
  }

  .navbar_ .nav > li > a.active, .navbar_ .nav > li > a.active::before {
    color: var(--gold);
  }

  /* "Pages" expands in place; its sub-pages sit indented in the body face. */
  .navbar_ .nav > li.sub-menu > a::before {
    content: "+";
  }

  .navbar_ .nav > li.sub-menu > a i {
    display: none;
  }

  .navbar_ .nav > li.sub-menu > a::after {
    content: var(--glyph-chevron-down);
    opacity: 1;
    transform: none;
    color: #9a958c;
    transition: transform 0.2s;
  }

  .navbar_ .nav > li.sub-menu > a[aria-expanded="true"]::after {
    transform: rotate(180deg);
  }

  .navbar_ .sub-menu > .dropdown-menu {
    position: static;
    float: none;
    padding: 0 0 6px 34px;
    background: none;
    border: 0;
    box-shadow: none;
    text-align: left;
  }

  .sub-menu ul li, .sub-menu ul li:first-child {
    border-top: 0;
  }

  .sub-menu ul li a, .sub-menu li a.dropdown-item {
    padding: 8px 0;
    font-family: var(--font-body);
    font-size: 16px;
    text-transform: none;
    letter-spacing: 0;
    color: #bdb8af;
  }

  .menu-index__foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: auto;
    padding-top: 24px;
  }

  .menu-index__foot a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 14px;
    color: #ddd;
    text-decoration: none;
  }

  .menu-index__foot a .ico {
    font-size: 18px;
  }

  .menu-index__foot .menu-index__cta {
    grid-column: 1 / -1;
    border-color: var(--gold);
    color: var(--gold);
    font-family: var(--font-label);
    font-weight: var(--font-label-weight);
    font-stretch: var(--font-label-stretch);
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .menu-index__foot a:hover, .menu-index__foot a:focus-visible {
    border-color: var(--gold);
    color: #fff;
  }

  .menu-index__foot .menu-index__cta:hover, .menu-index__foot .menu-index__cta:focus-visible {
    background: var(--gold);
    color: #000;
  }

  /* Lock the page behind the menu. Only <html>: hiding overflow on <body> too
     would break the sticky header. */
  html.menu-open {
    overflow: hidden;
  }

  html.menu-open .customizer-toggle, html.menu-open .customizer, html.menu-open #toTop {
    display: none;
  }
}

@keyframes menuIndexIn {
  from {
    clip-path: inset(0 0 100% 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .navbar_ .navbar-collapse_.show {
    animation: none;
  }
}


/* ---------- Attorney carousel: hover reveal ---------- */

/* The photo stays and darkens while a gradient panel rises over it; the
   content fades up in sequence. Also opens on keyboard focus. */
.meet .meet_inner:hover figure, .meet .meet_inner:focus-within figure {
  opacity: 1;
}

.meet .meet_inner:hover figure img, .meet .meet_inner:focus-within figure img {
  transform: scale(1.05);
}

.meet .meet_inner:focus-within .caption {
  opacity: 0;
}

.meet .meet_inner:hover .hover, .meet .meet_inner:focus-within .hover {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.meet .meet_inner .hover::before {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  margin-bottom: 14px;
  background: var(--gold);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}

.meet .meet_inner:hover .hover::before, .meet .meet_inner:focus-within .hover::before {
  width: 40px;
}

.meet .meet_inner .hover > div {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease-out, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.meet .meet_inner:hover .hover > div, .meet .meet_inner:focus-within .hover > div {
  opacity: 1;
  transform: none;
}

.meet .meet_inner .hover > div:nth-child(1) {
  transition-delay: 0.04s;
}

.meet .meet_inner .hover > div:nth-child(2) {
  transition-delay: 0.08s;
}

.meet .meet_inner .hover > div:nth-child(3) {
  transition-delay: 0.12s;
}

.meet .meet_inner .hover > div:nth-child(4) {
  transition-delay: 0.16s;
}

/* A long bio ends with an ellipsis instead of being cut off mid-line. */
.meet .meet_inner .hover .social3 {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
}

@media (prefers-reduced-motion: reduce) {
  .meet .meet_inner figure img,
  .meet .meet_inner .hover,
  .meet .meet_inner .hover > div,
  .meet .meet_inner .hover::before {
    transition: none;
  }

  .meet .meet_inner:hover figure img, .meet .meet_inner:focus-within figure img {
    transform: none;
  }
}


/* ---------- Icon sizes and large screens ---------- */

/* Line icons need a little size to stay crisp on standard-density monitors. */
.ic1 .ico {
  font-size: 17px;
  line-height: 20px;
  padding-right: 8px;
}

.social2 li a, .social_team li a, .social3 > div a {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
}

.social2 li a {
  width: 40px;
  height: 40px;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 50%;
  color: #c8c8c8;
  font-size: 21px;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease-out;
}

/* The layout was drawn for ~1440px screens. On large monitors the content
   widens and all type (and the logo) steps up through --screen-type. */
@media (width >= 1600px) {
  :root {
    --screen-type: 1.05;
  }

  .container {
    max-width: 1360px;
  }

  .social li a {
    font-size: 22px;
  }

  .ic1 .ico {
    font-size: 18px;
  }
}

@media (width >= 2200px) {
  :root {
    --screen-type: 1.12;
  }

  .container {
    max-width: 1520px;
  }
}


/* ---------- Team cards (home): hover reveal ---------- */
.team1 figure {
  overflow: hidden;
}

.team1:hover figure img, .team1:focus-within figure img {
  transform: scale(1.04);
  opacity: 0.7;
}

.team1:hover .caption, .team1:focus-within .caption {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.team1 .caption::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 2px;
  background: var(--gold);
  transform: translateX(-50%);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}

.team1:hover .caption::before, .team1:focus-within .caption::before {
  width: 64px;
}

.team1 .caption > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease-out, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.team1:hover .caption > div, .team1:focus-within .caption > div {
  opacity: 1;
  transform: none;
}

.team1 .caption > *:nth-child(1) {
  transition-delay: 0.04s;
}

.team1 .caption > *:nth-child(2) {
  transition-delay: 0.08s;
}

.team1 .caption > *:nth-child(3) {
  transition-delay: 0.12s;
}

.team1 .caption > *:nth-child(4) {
  transition-delay: 0.16s;
}

@media (prefers-reduced-motion: reduce) {
  .team1 figure img, .team1 .caption, .team1 .caption > *, .team1 .caption::before {
    transition: none;
  }

  .team1:hover figure img, .team1:focus-within figure img, .team1 .caption {
    transform: none;
  }
}


/* ---------- Attorney profile ---------- */
#attorney {
  padding: 70px 0 80px;
  background: #fff;
}

.attorney-portrait {
  position: relative;
  margin: 0 0 30px;
  padding: 0 18px 18px 0;
}

.attorney-portrait::before {
  content: "";
  position: absolute;
  inset: 18px 0 0 18px;
  border: 1px solid var(--gold);
}

.attorney-portrait img {
  position: relative;
  width: 100%;
  background: #f6f4f4;
}

.attorney-intro {
  padding-left: 20px;
}

.attorney-role {
  text-align: left;
  padding-bottom: 6px;
}

.attorney-name {
  margin: 0 0 20px;
  padding: 0;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-stretch: var(--font-display-stretch);
  text-transform: var(--font-display-case);
  font-size: calc(64px * var(--font-display-scale) * var(--screen-type));
  line-height: 1.05;
  color: #262626;
}

.attorney-lead {
  font-size: calc(18px * var(--font-body-scale) * var(--screen-type));
  line-height: 1.6;
  color: #333;
}

#attorney p {
  margin-bottom: 14px;
  line-height: 1.7;
}

.attorney-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px 24px;
  margin: 26px 0 30px;
  padding: 22px 0;
  border-top: 1px solid #ebe6dc;
  border-bottom: 1px solid #ebe6dc;
}

.attorney-facts dt {
  margin: 0 0 4px;
  font-family: var(--font-label);
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
  font-size: calc(12px * var(--font-label-scale) * var(--screen-type));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #726d66;
}

.attorney-facts dd {
  margin: 0;
  font-size: calc(15px * var(--font-body-scale) * var(--screen-type));
  color: #262626;
}

.attorney-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}

.attorney-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #262626;
  text-decoration: none;
  transition: color 0.25s ease-out;
}

.attorney-link .ico {
  font-size: 20px;
  color: var(--gold);
}

.attorney-link:hover, .attorney-link:focus-visible {
  color: var(--gold);
}

.attorney-social {
  display: flex;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.attorney-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #ddd6c9;
  border-radius: 50%;
  font-size: 19px;
  color: #555;
  text-decoration: none;
  transition: color 0.25s ease-out, border-color 0.25s ease-out;
}

.attorney-social a:hover, .attorney-social a:focus-visible {
  color: var(--gold);
  border-color: var(--gold);
}

#attorney-focus {
  padding: 70px 0 60px;
}

.attorney-focus-card {
  height: 100%;
  margin-bottom: 30px;
  padding: 34px 28px;
  border: 1px solid rgb(255 255 255 / 8%);
  background: rgb(255 255 255 / 2%);
  transition: border-color 0.35s ease-out, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.attorney-focus-card:hover {
  border-color: rgb(var(--gold-rgb) / 60%);
  transform: translateY(-4px);
}

.attorney-focus-card .ico {
  font-size: 42px;
  color: #fff;
}

.attorney-focus-card h3 {
  padding: 18px 0 10px;
  font-family: var(--font-label);
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
  font-size: calc(20px * var(--font-label-scale) * var(--screen-type));
  color: var(--gold);
}

.attorney-focus-card p {
  margin: 0;
  line-height: 1.65;
  color: #cfcfcf;
}

#attorney-matters {
  padding: 70px 0 80px;
  background: #fff;
}

.attorney-section-label {
  text-align: left;
}

.attorney-h2 {
  margin: 0 0 24px;
  padding: 0;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-stretch: var(--font-display-stretch);
  text-transform: var(--font-display-case);
  font-size: calc(40px * var(--font-display-scale) * var(--screen-type));
  color: #262626;
}

.attorney-matters {
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}

.attorney-matters li {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #ebe6dc;
  line-height: 1.6;
}

.attorney-matters__year {
  font-family: var(--font-label);
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
  color: var(--gold);
}

.attorney-quote {
  position: relative;
  margin: 0 0 30px;
  padding: 40px 36px 34px;
  background: #191919;
  color: #e6e6e6;
}

.attorney-quote .ico {
  font-size: 42px;
  color: var(--gold);
}

.attorney-quote blockquote {
  margin: 12px 0 18px;
  padding: 0;
  border: 0;
  font-size: calc(19px * var(--font-body-scale) * var(--screen-type));
  line-height: 1.6;
}

.attorney-quote figcaption {
  font-family: var(--font-label);
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
  font-size: calc(14px * var(--font-label-scale) * var(--screen-type));
  letter-spacing: 0.04em;
  color: #9a958c;
}

.attorney-cta p {
  margin-bottom: 18px;
}

@media (width <= 767px) {
  #attorney, #attorney-matters {
    padding: 40px 0 50px;
  }

  .attorney-intro {
    padding-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .attorney-focus-card {
    transition: none;
  }

  .attorney-focus-card:hover {
    transform: none;
  }
}


/* ---------- Card links ---------- */

/* Whole attorney cards link to the profile; social links stay clickable on top. */
.card-link {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.meet .meet_inner .hover .social3_wrapper, .team1 .caption .social_team_wrapper {
  position: relative;
  z-index: 4;
}

.meet .meet_inner, .team1 {
  cursor: pointer;
}


/* ---------- Reveal motion ---------- */

/* Animate.css moves elements by 100% of their own size, so tall blocks sweep
   across their neighbours. Redefined here as short, eased glides. */
.animate__animated {
  --animate-duration: 0.8s;

  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -24px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-32px, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(32px, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.94, 0.94, 1);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes bounceIn {
  from {
    opacity: 0;
    transform: scale3d(0.94, 0.94, 1);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


/* ---------- Phones: typography and stats ---------- */
:is(h1, h2):not(.bot_title, .title6), .title2, .attorney-name, .slides-container .caption .txt2 {
  text-wrap: balance;
}

@media (width <= 767px) {
  /* Headlines scale with the screen instead of a fixed size. */
  .slides-container .caption .txt3 {
    line-height: 1.5;
  }

  .title2 {
    font-size: min(calc(50px * var(--font-display-scale) * var(--screen-type)), 9.5vw);
  }

  .attorney-name {
    font-size: min(calc(64px * var(--font-display-scale) * var(--screen-type)), 12vw);
  }

  /* Stats: a 2 x 2 grid with each figure stacked and centred. */
  .info-wrapper .info1:nth-child(odd) {
    border-left: 0;
  }

  .info-wrapper .info1-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    white-space: normal;
    text-align: center;
  }

  .info-wrapper .info1 .img1 {
    float: none;
    margin: 0 0 4px;
  }

  .info-wrapper .info1 .caption {
    float: none;
    padding-left: 0;
  }
}


/* ---------- Phones: card rows and partner logos ---------- */

/* On phones the attorney cards become a swipeable row (native scroll-snap)
   with the next card peeking in, and partner logos a compact grid. */
@media (width <= 767px) {
  .team-wrapper {
    display: flex;
    gap: 16px;
    margin: 0 -15px;
    padding: 0 15px 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 15px;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .team-wrapper::-webkit-scrollbar {
    display: none;
  }

  .team-wrapper::before, .team-wrapper::after {
    display: none;
  }

  .team-wrapper .team1 {
    flex: 0 0 84%;
    width: auto;
    float: none;
    margin-top: 0;
    scroll-snap-align: start;
  }

  .team-wrapper + .carousel-dots {
    height: 26px;
    padding-top: 10px;
  }

  .partners > .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 0;
  }

  .partners .partner1 {
    flex: 0 0 33.333%;
    width: auto;
    margin: 0;
    padding: 0 6px;
  }

  .partners .partner1 img {
    max-width: 100%;
  }
}

@media (width >= 768px) {
  .team-wrapper + .carousel-dots {
    display: none;
  }
}


/* ---------- Contact band: phone link ---------- */

/* Contact band: the phone number never breaks across lines, and is a call link. */
.contacts_border .contacts-phone {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s ease-out;
}

.contacts_border .contacts-phone:hover, .contacts_border .contacts-phone:focus-visible {
  color: var(--gold);
}

@media (width <= 767px) {
  .contacts_border .txt2 {
    font-size: min(calc(57px * var(--font-display-scale) * var(--screen-type)), 9vw);
    line-height: 1.15;
  }

  .contacts_border .contacts-phone {
    display: block;
  }
}


/* ---------- Phones: footer ---------- */

/* Brand first, then the newsletter, offices on a card, links in two columns,
   recent posts, and a centred social row. */
@media (width <= 767px) {
  .bot1 {
    padding: 36px 0 28px;
  }

  .bot1 > .container {
    display: flex;
    flex-direction: column;
  }

  .bot1 .logo2_wrapper {
    order: -1;
    padding: 0 0 26px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgb(255 255 255 / 8%);
  }

  .bot1 .row {
    row-gap: 0;
  }

  .bot1 .row > div {
    display: flex;
    flex-direction: column;
    padding-top: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgb(255 255 255 / 8%);
  }

  .bot1 .row > div:nth-child(4) {
    order: -1;
  }

  .bot1 .row > div:last-child {
    border-bottom: 0;
  }

  .bot_title {
    margin-bottom: 18px;
    padding: 0 0 12px;
    font-size: calc(13px * var(--font-label-scale) * var(--screen-type));
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9a958c;
  }

  .bot_title::after {
    width: 24px;
  }

  #location .location_inner {
    padding: 18px 18px 6px;
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: 8px;
    background: rgb(255 255 255 / 2%);
  }

  #location .carousel.main {
    margin-right: 0;
  }

  #location .carousel-box ul li {
    padding-right: 0;
  }

  .location_pagination {
    padding-top: 14px;
  }

  .ul0 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
    font-size: calc(15px * var(--font-body-scale) * var(--screen-type));
  }

  .ul0 li {
    padding: 0;
  }

  .ul0 li a {
    padding: 8px 0;
  }

  .ic3 {
    margin-bottom: 16px;
  }

  .ic3:last-child {
    margin-bottom: 0;
  }

  .bot1 .row > div:nth-child(4) p {
    margin-bottom: 0;
  }

  .bot1 .row > div:nth-child(4) p br {
    display: none;
  }

  .subscribe-form-wrapper .form-control {
    height: 48px;
  }

  .subscribe-form-wrapper__submit {
    top: 7px;
    right: 7px;
    width: 34px;
    height: 34px;
  }

  .social2_wrapper {
    padding-top: 22px;
  }

  .social2 {
    display: flex;
    justify-content: center;
    gap: 6px;
  }

  .bot2 {
    padding: 22px 0;
  }
}


/* ---------- Accessibility: skip link and focus ring ---------- */

/* One focus style for every control, matching the blog pages: a rounded gold
   ring just outside links, buttons and cards, and a gold border with a soft
   halo on form fields. #b5852b keeps 3:1 against both the white and the dark
   sections; square controls get rounded corners only while the ring shows.
   Focus is never removed without a replacement. */

/* Hidden until focused (Bootstrap's .visually-hidden-focusable on the link). */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 2000;
  padding: 10px 18px;
  border-radius: 6px;
  background: var(--gold);
  color: #000;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Mouse and touch users never see the keyboard ring (js/scripts.js adds
   html.is-pointer on click or tap and removes it on Tab, arrows, Enter...).
   !important: the ring is set by several more specific rules below.
   Form fields keep their own focus border. */
html.is-pointer :focus-visible:not(input, textarea, select) {
  outline: none !important;
}

html.is-pointer :is(.booking-button, .careers-button, .careers-chip, .fees-button,
  .results-button, .results-chip, .results-empty__reset, .blog-search__clear):focus-visible {
  box-shadow: none !important;
}

/* Bootstrap draws its own blue ring (or none) on these; use the gold one. */
.navbar_ .navbar-toggle:focus-visible,
.navbar_ .nav > li > a:focus-visible,
.navbar_ .nav > li > a.active:focus-visible,
.navbar_ .sub-menu li a.dropdown-item:focus-visible,
.accordion .accordion-item .accordion-header .accordion-button:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: none;
}

/* Square buttons and cards: same ring, rounded while focused. */
.btn-default:focus-visible,
.free-button:focus-visible,
.slider-link1:focus-visible,
.topic1:focus-visible,
.thumb1 a:focus-visible,
.subscribe-form-wrapper__submit:focus-visible {
  border-radius: 4px;
}

/* Inside clipped or full-width boxes the ring is drawn just inside the edge. */
.accordion .accordion-item .accordion-header .accordion-button:focus-visible,
.card-link:focus-visible,
.navbar_ .sub-menu li a.dropdown-item:focus-visible {
  outline-offset: -3px;
}


/* ---------- Phones and touch screens: attorney cards ---------- */

/* Without a mouse there is no hover: a tap would open the overlay over the
   portrait. Cards show the photo as it is, with the details on a panel
   below it; the whole card still links to the profile. Desktop keeps the
   hover reveal. */
@media (width <= 767px), (hover: none) {
  .team1 figure img,
  .team1:hover figure img,
  .team1:focus-within figure img {
    transform: none;
    opacity: 1;
  }

  .team1 .caption,
  .team1:hover .caption,
  .team1:focus-within .caption {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    padding: 20px;
    background: #1c1c1c;
    box-shadow: none;
    text-align: center;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .team1 .caption::before {
    width: 64px;
  }

  .team1 .caption > * {
    opacity: 1;
    transform: none;
  }

  .meet .meet_inner .hover {
    display: none;
  }

  .meet .meet_inner:hover figure img,
  .meet .meet_inner:focus-within figure img {
    transform: none;
  }

  .meet .meet_inner figure::after {
    display: none;
  }

  .meet .meet_inner:hover .caption,
  .meet .meet_inner:focus-within .caption {
    opacity: 1;
  }

  .meet .meet_inner .caption .social3_wrapper {
    position: relative;
    z-index: 4;
  }
}

@media (width <= 767px) {
  /* Cards in the swipe row line up at the same height. */
  .team-wrapper .team1 {
    display: flex;
    flex-direction: column;
  }

  .team-wrapper .team1 .caption {
    flex: 1;
  }
}


/* ---------- Phones: founder portrait ---------- */

/* The cut-out portrait sits under the signature as one compact block. */
@media (width <= 767px) {
  .man1 {
    padding-top: 24px;
    padding-bottom: 0;
  }

  .man1 img {
    width: min(60vw, 260px);
    height: auto;
  }
}

/* ============================= gold text on light backgrounds ====================== */
/* Brand gold (var(--gold)) is 2.86:1 on white, too faint for small text. On light
   sections small gold text uses a darker gold (5.35:1); headings, buttons and
   dark sections keep the brand gold. Both are set at the top of this file. */
#about .title1,
#faq .title1,
#testimonials .title1,
#news .title1,
#content .title1,
.about-txt .txt1,
.clients .clients_inner .caption .txt1,
.btn-default.btn1,
.attorney-role,
.attorney-section-label,
.attorney-matters__year {
  color: var(--gold-text);
}

/* Carousel controls hide when every slide already fits (Swiper adds the
   lock classes), e.g. two testimonials side by side on desktop. */
.clients_prev.swiper-button-lock,
.clients_next.swiper-button-lock,
.meet_prev.swiper-button-lock,
.meet_next.swiper-button-lock,
.carousel-dots.swiper-pagination-lock {
  display: none;
}

/* ============================= legal pages (privacy.html) ====================== */
.legal {
  padding: 64px 0 90px;
  background: #fff;
  font-family: var(--font-body);
  color: #5f5f5f;
}

.legal-toc {
  position: sticky;
  top: 100px;
  margin-bottom: 30px;
}

.legal-toc__title {
  margin: 0 0 12px;
  font-family: var(--font-label);
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
  font-size: calc(13px * var(--font-label-scale) * var(--screen-type));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #262626;
}

.legal-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid #ebe6dc;
}

.legal-toc a {
  display: block;
  padding: 6px 0 6px 16px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: #5f5f5f;
  text-decoration: none;
  transition: color 0.25s ease-out, border-color 0.25s ease-out;
}

.legal-toc a:hover {
  border-left-color: var(--gold);
  color: #262626;
}

.legal-body {
  max-width: 68ch;
  font-size: calc(16px * var(--font-body-scale) * var(--screen-type));
  line-height: 1.75;
}

.legal-eyebrow {
  margin: 0 0 8px;
  font-family: var(--font-label);
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
  font-size: calc(13px * var(--font-label-scale) * var(--screen-type));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.legal-title {
  margin: 0 0 8px;
  padding: 0;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-stretch: var(--font-display-stretch);
  font-size: min(calc(56px * var(--font-display-scale) * var(--screen-type)), 11vw);
  line-height: 1.05;
  text-transform: var(--font-display-case);
  color: #262626;
}

.legal-updated {
  margin: 0 0 24px;
  font-size: calc(14px * var(--font-body-scale) * var(--screen-type));
  color: #706d67;
}

.legal-lead {
  margin: 0 0 12px;
  padding-bottom: 28px;
  border-bottom: 1px solid #ebe6dc;
  font-size: calc(19px * var(--font-body-scale) * var(--screen-type));
  line-height: 1.6;
  color: #262626;
}

.legal-section {
  scroll-margin-top: 20px;
}

.legal-section h2 {
  margin: 0;
  padding: 32px 0 10px;
  font-family: var(--font-label);
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
  font-size: calc(24px * var(--font-label-scale) * var(--screen-type));
  color: #262626;
}

.legal-section p,
.legal-section ul {
  margin: 0 0 14px;
}

.legal-section ul {
  padding-left: 22px;
}

.legal-section li {
  margin-bottom: 8px;
}

.legal-section li::marker {
  color: var(--gold);
}

.legal-section a {
  color: var(--gold-text);
}

@media (max-width: 991px) {
  .legal-toc {
    position: static;
  }

  .legal-toc ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-left: 0;
  }

  .legal-toc a {
    padding: 6px 12px;
    margin: 0;
    border: 1px solid #ebe6dc;
    border-radius: 999px;
    font-size: calc(14px * var(--font-body-scale) * var(--screen-type));
  }
}

/* ============================= home news cards: hover ====================== */
/* The whole card opens the article. On hover a thin gold frame draws itself
   around the card from the top-left corner (clip-path), the photo zooms
   gently, the read link turns gold and its arrow slides. Nothing changes
   size or position. */
.thumb2 .card-link {
  z-index: 3;
}

.thumb2 .caption .btn1 {
  position: relative;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
}

.thumb2 .caption .btn1::after {
  content: "";
  position: absolute;
  left: 0;
  right: 22px;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.thumb2 .caption .btn1 .ico {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.thumb2:hover figure img {
  transform: scale(1.05);
}

.thumb2:hover .caption .btn1::after,
.thumb2 .caption .btn1:focus-visible::after {
  transform: scaleX(1);
}

.thumb2:hover .caption .btn1 .ico,
.thumb2 .caption .btn1:focus-visible .ico {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .thumb2 .thumbnail,
  .thumb2 figure img,
  .thumb2 .caption .btn1::after,
  .thumb2 .caption .btn1 .ico {
    transition: none;
  }

  .thumb2:hover figure img {
    transform: none;
  }
}

/* Inline "see more" links on the attorney page */
.attorney-more a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-label);
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-text);
  text-decoration: none;
}

.attorney-more a .ico {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.attorney-more a:hover .ico {
  transform: translateX(4px);
}

/* ============================= hover text on gold ====================== */
/* White on brand gold is 2.86:1; hovers that fill with gold use black text
   (7.33:1), like the solid gold buttons. */
.free-button:hover,
.free-button:focus-visible,
.topic1:hover,
.topic1:focus-visible,
.btn-default.btn-cf-submit:hover,
.btn-default.btn-cf-submit:focus-visible {
  color: #000;
}

.accordion .accordion-button:hover {
  color: var(--gold-text);
}

/* ============================= Pages menu: grouped panel ====================== */
/* Desktop: a dark three-column panel (The firm / Services / Resources) under
   "Pages". Phones: the same groups as labelled sub-lists in the mobile menu.
   Selectors are scoped to .pages-menu so they win over the legacy .sub-menu
   rules that hide nested lists. */
.navbar_ .sub-menu > .pages-menu {
  text-align: left;
}

.sub-menu .pages-menu ul {
  position: static;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  text-transform: none;
}

.sub-menu .pages-menu li {
  border-top: 0;
}

.pages-menu__label {
  display: block;
  margin: 0 0 10px;
  font-family: var(--font-label);
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
  font-size: calc(12px * var(--font-label-scale) * var(--screen-type));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9a958c;
}

.sub-menu .pages-menu li a.dropdown-item {
  display: inline-flex;
  align-items: center;
  padding: 7px 0;
  font-family: var(--font-label);
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
  font-size: calc(14px * var(--font-label-scale) * var(--screen-type));
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #e4e1db;
  transition: color 0.25s ease-out, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.sub-menu .pages-menu li a.dropdown-item:hover,
.sub-menu .pages-menu li a.dropdown-item:focus-visible {
  color: var(--gold);
  transform: translateX(3px);
}

.sub-menu .pages-menu li a.dropdown-item[aria-current="page"] {
  color: var(--gold);
}

.sub-menu .pages-menu li a.pages-menu__cta {
  justify-self: start;
  white-space: nowrap;
  margin-top: 8px;
  padding: 8px 14px;
  border: 1px solid var(--gold);
  border-radius: 6px;
  font-family: var(--font-label);
  font-weight: var(--font-label-weight);
  font-stretch: var(--font-label-stretch);
  font-size: calc(13px * var(--font-label-scale) * var(--screen-type));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

.sub-menu .pages-menu li a.pages-menu__cta:hover,
.sub-menu .pages-menu li a.pages-menu__cta:focus-visible {
  background: var(--gold);
  color: #000;
  transform: none;
}

@media (width >= 768px) {
  .navbar_ .sub-menu > .pages-menu {
    margin-top: 10px;
    padding: 26px 30px 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: #111;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
    animation: pagesMenuIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Invisible bridge over the 10px gap so the pointer can cross into the panel. */
  .navbar_ .sub-menu > .pages-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
  }

  /* While open, "Pages" is gold without the underline that would meet the panel.
     !important: the underline comes from several state rules (hover, focus,
     .active and their :focus-visible ring), and this one must win over all. */
  .navbar_ .nav > li.sub-menu:hover > a,
  .navbar_ .nav > li.sub-menu:focus-within > a,
  .navbar_ .nav > li.sub-menu.show > a {
    border-bottom-color: transparent !important;
  }

  .navbar_ .nav > li.sub-menu > a i {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .navbar_ .nav > li.sub-menu:hover > a i,
  .navbar_ .nav > li.sub-menu:focus-within > a i {
    transform: rotate(180deg);
  }

  .navbar_ .sub-menu:hover > .pages-menu,
  .navbar_ .sub-menu:focus-within > .pages-menu,
  .navbar_ .sub-menu > .pages-menu.show {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 0;
  }

  .pages-menu__group {
    min-width: 160px;
    padding: 0 32px;
  }

  .pages-menu__group:first-child {
    padding-left: 0;
  }

  .pages-menu__group:last-child {
    padding-right: 0;
  }

  .pages-menu__group + .pages-menu__group {
    border-left: 1px solid rgba(255, 255, 255, 0.06);
  }
}

@media (max-width: 767px) {
  .navbar_ .sub-menu > .pages-menu {
    padding: 4px 0 8px 34px;
  }

  .navbar_ .sub-menu > .pages-menu.show {
    display: grid;
    gap: 14px;
  }

  .sub-menu .pages-menu li a.dropdown-item {
    padding: 6px 0;
    font-size: calc(16px * var(--font-label-scale) * var(--screen-type));
  }

  /* The booking link keeps its button padding and fits its text. */
  .sub-menu .pages-menu li a.pages-menu__cta {
    display: inline-block;
    width: auto;
    margin-top: 6px;
    padding: 10px 18px;
    font-size: calc(14px * var(--font-label-scale) * var(--screen-type));
  }
}

@media (prefers-reduced-motion: reduce) {
  .sub-menu .pages-menu li a.dropdown-item {
    transition: none;
  }

  .sub-menu .pages-menu li a.dropdown-item:hover {
    transform: none;
  }
}

/* Table of contents: the section being read (set by js/scripts.js). */
.legal-toc a.is-active {
  border-left-color: var(--gold);
  color: #262626;
  font-weight: 600;
}

@media (max-width: 991px) {
  .legal-toc a.is-active {
    border-color: var(--gold);
    background: #faf6ee;
    font-weight: 400;
    color: var(--gold-text);
  }
}

/* Practice cards: equal height in each row, titles on one line. */
#practice .row > [class*="col-"] {
  display: flex;
}

#practice .thumb1 {
  display: flex;
  flex: 1;
  margin-bottom: 30px;
}

#practice .thumb1 .thumbnail,
#practice .thumb1 a {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
}

#practice .thumb1 a .caption .txt1 {
  white-space: nowrap;
}

@keyframes pagesMenuIn {
  from {
    opacity: 0;
    transform: translate3d(0, -8px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Tablet (768-991px): tighter menu spacing so it never runs into the logo. */
@media (min-width: 768px) and (max-width: 991px) {
  .navbar_ .nav > li {
    margin-left: 14px;
  }

  .navbar_ .nav > li > a {
    font-size: calc(13px * var(--font-label-scale) * var(--screen-type));
  }
}

/* ============================= home news cards: drawn gold outline ====================== */
.thumb2 .thumbnail::after {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: 5;
  border: 1px solid var(--gold);
  border-radius: 4px;
  pointer-events: none;
  clip-path: inset(0 100% 100% 0);
  transition: clip-path 0.2s ease-out;
}

.thumb2:hover .thumbnail::after,
.thumb2:focus-within .thumbnail::after {
  clip-path: inset(0 0 0 0);
  transition-duration: 0.35s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.thumb2:hover .caption .btn1 {
  color: var(--gold-text);
}

@media (prefers-reduced-motion: reduce) {
  .thumb2 .thumbnail::after {
    transition: none;
  }
}