/*
 Theme Name: SMA - Sociedade de Advogados
 Theme URI: https://sma-adv.co.mz
 Description: Custom theme based on BlankSlate.
 Author: ✺ Miguel Caria
 Version: 1.0
 Text Domain: sma
*/

/* ============================================
   FONT FACES
============================================ */

@font-face {
  font-family: 'Manrope';
  src: url('./fonts/Manrope-Variable.woff2') format('woff2-variations');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Newsreader';
  src: url('./fonts/Newsreader[opsz,wght].woff2') format('woff2-variations');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Newsreader';
  src: url('./fonts/Newsreader-Italic[opsz,wght].woff2') format('woff2-variations');
  font-weight: 200 700;
  font-style: italic;
  font-display: swap;
}

/* ============================================
   GLOBAL VARIABLES
============================================ */

:root {

  /* ============================================
   TYPOGRAPHY
============================================ */

  --font-family--sans: 'Manrope', sans-serif;
  --font-family--serif: 'Newsreader', serif;

  --font-size--base: 1rem;

  /* ============================================
     BRAND COLORS
  ============================================ */

  --brand-color--primary: #011e93;
  --brand-color--dark: #011876;

  /* ============================================
     TEXT COLORS
  ============================================ */

  --text-color--brand: var(--brand-color--primary);
  --text-color--primary: #505774;
  --text-color--brand-dark: var(--brand-color--dark);
  --text-color--inverse: #ffffff;
  --text-color--inverse-muted: hsl(0deg 0% 100% / 72%);
  --text-color--inverse-soft: hsl(0deg 0% 100% / 80%);
  --text-link-underline-color: hsl(228deg 99% 29% / 30%);
  --text-color-error: #c62828;

  /* ============================================
     BACKGROUND COLORS
  ============================================ */

  --background-color--primary: #ffffff;
  --background-color--secondary: #e6ecf5;
  --background-color--tertiary: #f7faff;

  --background-color--brand: var(--brand-color--primary);
  --background-color--brand-dark: var(--brand-color--dark);
  --background-color--brand-soft: #ebf5ff;

  --background-color--inverse: hsl(0deg 0% 100% / 40%);

  /* ============================================
   BACKGROUND GRADIENTS
  ============================================ */

  --background-gradient--top-light:
    linear-gradient(
      180deg,
      hsl(217.5deg 100% 98.43% / 100%) 0%,
      hsl(217.5deg 100% 98.43% / 0%) 100%
    );

  --background-gradient--bottom-light:
    linear-gradient(
      0deg,
      hsl(216deg 42.86% 93.14% / 100%) 0%,
      hsl(216deg 42.86% 93.14% / 0%) 100%
    );

  /* ============================================
    BORDER COLORS
  ============================================ */

  --border-color--primary: hsl(228deg 99% 29% / 10%);

  --border-color--brand: hsl(228deg 99% 29%);

  --border-color--inverse: hsl(0deg 0% 100% / 40%);

  --border-color--inverse-hover: hsl(0deg 0% 100% / 70%);

  --border-color--brand-inverse: hsl(0deg 0% 100% / 15%);

  --border-color--white: hsl(0deg 0% 100%);

}

/* ============================================
   RESET
============================================ */

html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  height: 100%;
  font-family: sans-serif;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
figure,
blockquote,
dl,
dd {
  margin: 0;
  padding: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

svg:not(:root) {
  overflow: hidden;
}

hr {
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
  -webkit-tap-highlight-color: transparent;
}

a:active,
a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

mark {
  color: #000;
  background-color: #ff0;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  vertical-align: middle;
}

button,
input,
select,
textarea {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

textarea {
  overflow: auto;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

button {
  overflow: visible;
  cursor: pointer;
}

input[type="search"] {
  appearance: none;
  -webkit-appearance: none;
}

/* ============================================
   ACCESSIBILITY
============================================ */

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  clip: auto !important;
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 100000;
  padding: 15px 23px;
  color: #007acc;
  font-weight: 700;
  background-color: #f7f7f7;
}

.skip-link {
  position: absolute;
  top: 2.5rem;
  left: -9999rem;
  z-index: 999999999;
  text-decoration: underline;
}

.skip-link:focus {
  top: 7px;
  left: 6px;
  z-index: 100000;
  padding: 15px 23px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

/* ============================================
   USER PREFERENCES
============================================ */

@media (pointer: coarse) {
  * {
    background-attachment: scroll !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video-bg-element {
    animation: none !important;
  }
}

/* ============================================
   SCROLL BEHAVIOR
============================================ */

html,
body {
  overscroll-behavior-y: none;
}

/* ============================================
   TYPOGRAPHY
============================================ */

body {
  font-family: var(--font-family--sans);
  font-size: var(--font-size--base);
  font-weight: 400;
  font-variation-settings: "wght" 380;
  color: var(--text-color--primary);
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family--sans);
  font-weight: 400;
  color: var(--brand-color--primary);
}

h1 {
  font-size: 3rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variation-settings: "wght" 200;
}

h2 {
  font-size: 2.75rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-variation-settings: "wght" 200;
}


h3 {
  font-variation-settings: "wght" 300;
  font-size: 1.75rem;
  line-height: 1.2;
}

h4 {
  font-size: 1.5rem;
  line-height: 1.2;
}

h5,
h6 {
  font-size: 1rem;
  line-height: 1.3;
}

.display-heading-large {
  font-size: 3.875rem;
}

.display-heading {
  font-size: 3.375rem;
}

.heading-style-h2 {
    font-variation-settings: "wght" 250;
    font-size: 2.125rem;
    letter-spacing: -.015em;
}

.heading-style-h2.is-large {
  font-variation-settings: "wght" 200;
  font-size: 3.125rem;
}

.heading-style-h2.is-medium {
  font-variation-settings: "wght" 200;
  font-size: 2.875rem;
  line-height: 1.2;
}

.heading-style-h2.is-small {
  font-variation-settings: "wght" 280;
  font-size: 1.625rem;
  line-height: 1.4;
}

.heading-style-h2.is-xsmall {
  font-variation-settings: "wght" 300;
  font-size: 1.375rem;
  line-height: 1.4;
}

.heading-style-h3 {
  font-variation-settings: "wght" 380;
  font-size: 1.25rem;
  line-height: 1.4;
}

.heading-style-h3.is-medium {
  font-variation-settings: "wght" 340;
  font-size: 1.375rem;
}

.heading-style-h3.is-large {
  font-variation-settings: "wght" 300;
  font-size: 1.75rem;
  line-height: 1.2;
}

.heading-serif {
  font-family: var(--font-family--serif);
  font-variation-settings: "wght" 250;
  line-height: 1.2;
  letter-spacing: 0.015em;
}

.heading-serif.is-inline {
  font-size: 1.08em;
  font-variation-settings: "wght" 240;
}

.heading-serif.is-huge {
  font-variation-settings: "wght" 200;
  font-size: 4.5rem;
  line-height: 0.95;
}

.heading-serif.is-xxlarge {
    font-size: 3.375rem;
    line-height: 1.1;
    font-variation-settings: "wght" 220;
}

.heading-serif.is-xlarge {
  font-size: 3.125rem;
  line-height: 1.2;
}

.heading-serif.is-large {
  font-variation-settings: "wght" 300;
  font-size: 2.125rem;
  line-height: 1.1;
}

.heading-serif.is-medium {
  font-variation-settings: "wght" 320;
  font-size: 1.75rem;
}

.heading-serif.is-small {
  font-variation-settings: "wght" 340;
  font-size: 1.563rem;
  line-height: 1.2;
}

.small-text {
  font-size: .875rem;
}

.large-text {
    font-size: 1.125rem;
}

.xlarge-text {
    font-size: 1.25rem;
}

.italic {
  font-style: italic;
}

input,
textarea,
select,
button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

a {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.small-caps-text {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.813rem;
  font-variation-settings: "wght" 450;
}

/* ============================================
   LAYOUT
============================================ */
.section {
  display: block;
  padding-block: 6rem;
}

.section-large {
  display: block;
  padding-block: 8rem;
}

.fullscreen-section {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  min-height: 80vh;
  padding-block: 12rem 4rem;
  overflow: hidden;
  background-color: var(--background-color--brand);
}

.fullscreen-section.medium-height {
  min-height: 70vh;
}

.fullscreen-section.small-height {
  min-height: 65vh;
}

.fullscreen-section.xsmall-height {
  min-height: 60vh;
}

.fullscreen-section.xxsmall-height {
  min-height: 50vh;
}

.fullscreen-section.compact-height {
  min-height: 30vh;
  padding-block-start: 10rem;
}

.main-container {
  position: relative;
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
}

.grid-halves {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 3rem;
  column-gap: 4rem;
  justify-items: stretch;
}

.grid-thirds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  place-items: start stretch;
}

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

/* GRID - LAYOUT */

.is-left-narrow {
    grid-template-columns: minmax(0, .75fr) minmax(0, 1fr);
}

.is-right-narrow {
    grid-template-columns: minmax(0, 1fr) minmax(0, .75fr);
}

.padding-content-end-large {
  padding-block: 3rem;
  padding-inline: 3rem 6rem;
}

.flex-align-right {
  justify-self: end;
}

.flex-full-width-center {
    display: flex;
    justify-content: center;
    width: 100%;
}

.flex-column-between {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  height: 100%;
}

/* GRID - COLUMN GAP */

.is-column-gap-none {
  column-gap: 0;
}

.is-column-gap-small {
  column-gap: 2rem;
}

.is-column-gap-medium {
  column-gap: 3rem;
}

.is-column-gap-large {
  column-gap: 4rem;
}

.is-column-gap-xlarge {
  column-gap: 6rem;
}

.is-column-gap-xxlarge {
  column-gap: 8rem;
}

/* GRID - ROW GAP */

.is-row-gap-none {
    row-gap: 0;
}

.is-row-gap-small {
  row-gap: 1.2rem;
}

.is-row-gap-medium {
  row-gap: 2rem;
}

.is-row-gap-large {
  row-gap: 3rem;
}

.is-row-gap-xlarge {
  row-gap: 4rem;
}

.is-row-gap-xxlarge {
  row-gap: 6rem;
}

.is-row-gap-huge{
  row-gap: 10rem;
}

.text-stack {
  display: flex;
  flex-direction: column;
  row-gap: 1.4rem;
  align-items: flex-start;
}

.text-stack.is-gap-xxsmall {
  row-gap: 1rem;
}

.text-stack.is-gap-xsmall {
  row-gap: 1.25rem;
}

.text-stack.is-gap-small {
  row-gap: 2rem;
}

.text-stack.is-gap-medium {
  row-gap: 3rem;
}

.text-stack.is-gap-large {
  row-gap: 6rem;
}

.is-gap-none {
  row-gap: 0;
}

.container {
  direction: ltr;
  width: 100%;
  max-width: 32rem;
  position: relative;
}

.container-large {
  width: 100%;
  max-width: 40rem;
  position: relative;
}

.container-xlarge {
  width: 100%;
  max-width: 46rem;
  position: relative;
}

.container-medium {
  width: 100%;
  max-width: 32rem;
  position: relative;
}

.container-small {
  width: 100%;
  max-width: 28rem;
  position: relative;
}

.container-xsmall {
  width: 100%;
  max-width: 24rem;
  position: relative;
}

.no-padding-top {
  padding-block-start: 0;
}

.is-padding-top-xsmall {
  padding-top: 2rem;
}

.is-padding-top-small {
  padding-top: 3rem;
}

.is-padding-top-medium {
  padding-top: 4rem;
}

.no-padding-bottom {
  padding-block-end: 0;
}

.no-padding-y {
  padding-block: 0;
}

.content-center {
  align-items: center;
}

.align-end {
  align-items: end;
}

.align-self-center {
  align-self: center;
}

.align-center {
  margin-inline: auto;
  text-align: center;
}

.align-content-center {
  margin-inline: auto;
}


/* ========= Width utilities ========= */

.max-ch-8 {
  max-width: 8ch;
}

.max-ch-10 {
  max-width: 10ch;
}

.max-ch-11 {
  max-width: 11ch;
}

.max-ch-12 {
  max-width: 12ch;
}

.max-ch-14 {
  max-width: 14ch;
}

.max-ch-16 {
  max-width: 16ch;
}

.max-ch-18 {
  max-width: 18ch;
}

.max-ch-20 {
  max-width: 20ch;
}

.max-ch-22 {
  max-width: 22ch;
}

/* ========= Text measure ========= */

.heading-measure-small { max-width: 10ch; }
.heading-measure-medium { max-width: 14ch; }
.heading-measure-large { max-width: 18ch; }

.text-measure-small { max-width: 40ch; }
.text-measure-medium { max-width: 55ch; }
.text-measure-large { max-width: 70ch; }

.hero-image-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: var(--background-color--brand);
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================
   BACKGROUNDS
============================================ */

.bg-tertiary {
  background-color: var(--background-color--tertiary);
}

.bg-brand-soft {
    background-color: var(--background-color--brand-soft);
}

.bg-white {
  background: var(--background-color--primary);
}

.bg-primary-gradient {
  background: var(--background-gradient--top-light);
}

.bg-primary-gradient-bottom {
  background: var(--background-gradient--bottom-light);
}

/* ============================================
   TEXT COLOR UTILITIES
============================================ */

.text-color-brand {
  color: var(--text-color--brand);
}

.text-color-primary {
  color: var(--text-color--primary);
}

.text-color-primary strong {
  color: var(--text-color--brand);
}

.text-white {
  color: var(--text-color--inverse);
}

.text-inverse-muted {
  color: var(--text-color--inverse-muted);
}

.text-inverse-muted-soft {
  color: var(--text-color--inverse-soft);
}

/* ============================================
   UTILITIES
============================================ */

.hide {
  display: none !important;
}

.show-mobile-portrait {
  display: none;
}

.border-top {
  border-top: 1px solid var(--border-color--primary);
}

.divider-line {
  width: 100%;
  height: 1px;
  background-color: var(--border-color--primary);
}

.is-zindex-1 {
  position: relative;
  z-index: 1;
}

.is-zindex-2 {
  position: relative;
  z-index: 2;
}

.opacity-30 {
  opacity: 0.3;
}

.is-grayscale {
  filter: grayscale(100%);
}

/* ============================================
   Page Transition
============================================ */

.page-transition {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background-color: var(--background-color--primary);
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

/* ============================================
   SPACING UTILITIES
============================================ */

/* Margin */

.margin-bottom-small {
    margin-bottom: 2rem;
}

.margin-bottom-medium {
    margin-bottom: 3rem;
}

.margin-bottom-large {
    margin-bottom: 6rem;
}

/* Padding Top */

.padding-top-xxsmall {
    padding-top: .6rem;
}

.padding-top-small {
    padding-top: 2rem;
}

.padding-top-medium {
    padding-top: 3rem;
}

.padding-top-large {
    padding-top: 4rem;
}

/* Padding Bottom */

.padding-bottom-xxsmall {
    padding-bottom: .5rem;
}

/*  OPTICAL ALIGNMENT */

.align-optical-top {
  padding-top: 0.6rem;
}

/* ============================================
   Text Utilities
============================================ */

.text-center {
  text-align: center;
}

.text-pretty {
  text-wrap: pretty;
}

.text-balance {
  text-wrap: balance;
}

/* ======== Bullet Text ========= */

.bullet-text {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  line-height: 1.4;
}

.bullet-text__dot {
  flex: 0 0 auto;
  width: 0.28em;
  height: 0.28em;
  margin-top: 0.62rem;
  border-radius: 50%;
  background-color: currentColor;
}

.bullet-text__label {
  min-width: 0;
}

/* ============================================
   LETTER SPACING UTILITIES
============================================ */

.letter-spacing-negative-small {
  letter-spacing: -0.015em;
}

.letter-spacing-positive-small {
  letter-spacing: 0.015em;
}

.letter-spacing-negative {
  letter-spacing: -0.02em;
}

/* ============================================
   Rich Text
============================================ */

.rich-text strong,
.rich-text b {
  color: var(--brand-color--primary);
}

.rich-text a {
  color: inherit;
  text-decoration: underline;
  text-underline-position: under;
  text-decoration-thickness: 1px;
  transition: 0.3s ease;
}

.rich-text a:hover {
  color: var(--brand-color--primary);
  text-decoration-color: var(--brand-color--primary);
}

.rich-text ul,
.rich-text ol {
  margin: 0;
  padding-inline-start: 1.5rem;
}

.rich-text ul li::marker,
.rich-text ol li::marker {
  color: var(--brand-color--primary);
}

.rich-text li {
  padding-inline-start: 0.5rem;
  padding-bottom: 0.75rem;
}

/* ============================================
   Link Components
============================================ */

.underline-link {
  color: var(--brand-color--primary);
  display: inline-block;
}

.link-with-arrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block-end: 0.3rem;
}

.link-with-arrow.no-padding-bottom {
  padding-block-end: 0;
}

.arrow-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.38rem;
  padding-top: 0.15rem;
}

.arrow-link svg {
  display: block;
  width: 100%;
  height: auto;
}

.underline-container {
  position: relative;
  width: 100%;
  height: 1px;
  overflow: hidden;
  background-color: var(--border-color--primary);
}

.underline-line {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  height: 1px;
  background-color: var(--background-color--brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.underline-link:hover .underline-line,
.underline-link:focus-visible .underline-line {
  transform: scaleX(1);
}

/* Inverse variant */

.underline-link.is-inverse {
  color: var(--text-color--inverse);
}

.underline-link.is-inverse .underline-container {
  background-color: var(--background-color--inverse);
}

.underline-link.is-inverse .underline-line {
  background-color: var(--background-color--primary);
}

/* ========= Practice area link ========= */

.link-with-bullet {
  display: flex;
  align-items: flex-start;
  column-gap: 0.75rem;
  padding-bottom: 1rem;
}

/* ========================================
   Buttons
======================================== */

.button {
  display: inline-block;
  border: 1px solid var(--brand-color--primary);
  background-color: transparent;
  color: var(--brand-color--primary);
  font-variation-settings: "wght" 450;
  text-align: center;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

.button.large {
  padding: 1.125rem 2.25rem;
  font-size: 1.125rem;
}

.button.bg-primary {
  background-color: var(--background-color--brand);
  color: var(--text-color--inverse);
}

.button.bg-primary:hover,
.button.bg-primary:focus-visible {
  background-color: var(--background-color--brand-dark);
}

/* ============================================
   Icon Sizes and Colors
============================================ */

.icon-small {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.icon-medium {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
}

.icon-large {
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
}

.icon-xlarge {
  width: 5rem;
  height: 5rem;
  flex-shrink: 0;
}

.icon-small svg,
.icon-medium svg,
.icon-large svg,
.icon-xlarge svg {
  width: 100%;
  height: 100%;
  display: block;
}

.icon-color-primary {
    color: var(--text-color--brand);
}

.icon-color-white {
    color: var(--text-color--inverse);
}

/* ============================================
   Media Components
============================================ */

.image-reveal-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  max-width: 25rem;
  height: 32rem;
  overflow: hidden;
}

.image-reveal {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 80%;
  transform-origin: center bottom;
  will-change: transform, height;
}

.image-reveal-placeholder {
  opacity: 0;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

/* ====== Infinite Marquee ====== */

@keyframes scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-100% - 1.5rem));
  }
}

.scroll {
  animation: scroll 35s linear infinite;
}

/* ====== Play or Paused ======
.marquee:hover > .scroll {
  animation-play-state: paused;
}
====== */

.marquee {
  display: flex;
  column-gap: 1.5rem;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.marquee-track {
  display: flex;
  flex: none;
  min-width: 100%;
  column-gap: 1.5rem;
  justify-content: space-between;
}

.marquee-item {
  display: flex;
  flex: 0 0 auto;
  width: 18rem;
  background-color: var(--background-color--secondary);
}

.marquee-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.marquee-image.is-grayscale {
  filter: grayscale(100%) contrast(1.04);
}

/* ============================================
   HEADER / NAVBAR BASE
============================================ */

.navbar-container {
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-inline: auto;
}

.navbar-container.overlay-hero {
  position: fixed;
  inset: 0 0 auto;
  background-color: transparent;
  border-bottom: 1px solid var(--border-color--inverse);
  transition: background-color 0.4s ease-out, border-bottom-color 0.4s ease-out;
}

.navbar {
  background-color: transparent;
}

.navbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar-left-content {
  display: flex;
  align-items: center;
}

.navbar-brand {
  display: inline-block;
  max-width: 100%;
}

.main-logo {
  position: relative;
  z-index: 2;
  width: 6.8rem;
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* ============================================
   MAIN NAVIGATION
============================================ */

.main-nav-menu {
  position: relative;
  display: block;
}

.nav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.938rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-item {
  list-style: none;
}

.nav-link {
  position: relative;
  display: flex;
  flex-flow: column;
  align-items: stretch;
  justify-content: center;
  padding: 2rem 0.5rem;
  color: var(--text-color--inverse);
  font-size: 0.938rem;
  font-variation-settings: "wght" 380;
  transition: padding 0.3s ease-out, color 0.3s ease, opacity 0.3s ease;
}

.nav-link.dark-link {
  color: var(--background-color--brand-dark);
}

.nav_link-line {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  height: 1px;
  margin-bottom: -1px;
  overflow: hidden;
  background-color: var(--text-color--inverse);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease, background-color 0.4s ease;
}

.nav-link:hover .nav_link-line,
.nav-link[aria-current="page"] .nav_link-line {
  transform: scaleX(1);
}

/* ============================================
   NAVBAR ACTIONS
============================================ */

.navbar-actions-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.navbar-action-item {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
}

.lang-switch {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  padding: 1rem 0.55rem;
  color: var(--text-color--inverse);
  transition: color 0.3s ease, opacity 0.3s ease;
}

.lang-icon {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  width: 0.95rem;
  transition: color 0.3s ease, fill 0.3s ease, opacity 0.3s ease;
}

.nav-link-lang {
  font-size: 0.938rem;
  line-height: 1;
  letter-spacing: 0.01em;
  font-variation-settings: "wght" 380;
}

.nav-button {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  color: var(--text-color--inverse);
  font-size: 0.938rem;
  line-height: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background-color: transparent;
  border: 1px solid var(--border-color--inverse);
  border-radius: 0;
  font-variation-settings: "wght" 380;
  transition: border-color 0.4s ease, color 0.3s ease;
}

.nav-button:hover {
  border-color: var(--border-color--white);
}

/* ============================================
   NAVBAR SCROLLED STATE
============================================ */

.navbar-container.overlay-hero.scrolled {
  background-color: var(--background-color--primary);
  border-bottom-color: var(--border-color--primary);
}

.navbar-container.overlay-hero.scrolled .nav-link {
  padding-block: 1.6rem;
}

.navbar-container.overlay-hero.scrolled .nav-link,
.navbar-container.overlay-hero.scrolled .lang-switch {
  color: var(--text-color--brand-dark);
}

.navbar-container.overlay-hero.scrolled .nav_link-line,
.navbar-container.overlay-hero.scrolled .nav-link[aria-current="page"] .nav_link-line {
  background-color: var(--background-color--brand);
}

.navbar-container.overlay-hero.scrolled .nav-button.scrolled-button {
  color: var(--text-color--brand-dark);
  border-color: var(--border-color--primary);
}

.navbar-container.overlay-hero.scrolled .nav-button.scrolled-button:hover {
  border-color: var(--border-color--brand);
}

/* ============================================
   NAVBAR STICKY VARIANT
============================================ */

.navbar-container.navbar-sticky {
  position: sticky;
  top: 0;
  background-color: var(--background-color--primary);
  border-bottom: 1px solid var(--border-color--primary);
}

.navbar-container.navbar-sticky .nav-link {
  padding-block: 1.6rem;
  color: var(--text-color--brand-dark);
}

.navbar-container.navbar-sticky .nav_link-line,
.navbar-container.navbar-sticky .nav-link[aria-current="page"] .nav_link-line {
  background-color: var(--background-color--brand);
}

.navbar-container.navbar-sticky .nav-button {
  color: var(--text-color--brand-dark);
  border-color: var(--border-color--primary);
}

.navbar-container.navbar-sticky .nav-button:hover {
  border-color: var(--border-color--brand);
}

.navbar-container.navbar-sticky .lang-switch,
.navbar-container.navbar-sticky .lang-icon,
.navbar-container.navbar-sticky .nav-link-lang {
  color: var(--text-color--brand-dark);
}

/* ============================================
   MENU BUTTON
============================================ */

.menu-button {
  display: none;
  padding-block: 0;
}

.mobile-menu-btn {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.hamburger-line {
  width: 1.5rem;
  height: 1px;
  background-color: var(--text-color--inverse);
  transition: background-color 0.2s ease;
}

/* ============================================
   COMPONENTS — HERO VIDEO
============================================ */

.hero-video {
  z-index: 1;
  min-height: 100svh;
  color: var(--text-color--inverse);
  display: flex;
  position: relative;
}

.hero-video-wrap {
  flex-flow: column;
  justify-content: flex-end;
  align-items: stretch;
  width: 100%;
  min-height: 100svh;
  display: flex;
  position: relative;
  overflow: hidden;
}

.main-container.is-hero-video {
  z-index: 2;
  padding-bottom: 5rem;
  position: relative;
}

.hero-top-row {
  z-index: 2;
  row-gap: 0.7rem;
  flex-flow: column;
  display: flex;
  position: relative;
  padding-bottom: 6rem;
}

/* ==== Important for the Homepage Transition ===== */
.hero-line,
.intro-subtitle,
.intro-heading {
  opacity: 0;
}
/* ========= */

.intro-subtitle {
  font-size: .9375rem;
  font-variation-settings: "wght" 450;
  letter-spacing: 0.08em;
}

.hero-line {
  width: 100%;
  height: 1px;
  background-color: var(--border-color--inverse);
}

.grid-halves.is-hero-grid {
  grid-template-columns: 1fr 0.75fr;
  align-items: end;
}

.hero-title-width {
  max-width: 16ch;
}

.hero-video-bg {
  z-index: 1;
  pointer-events: none;
  width: 100vw;
  min-height: 100svh;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-video-bg-element {
  object-fit: cover;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
}

video.hero-video-bg-element {
  background-image: url("https://cdn.prod.website-files.com/6925e97…/69776cd…_poster-image-desk.webp");
}

/* ========= Hero overlay ========= */

.hero-overlay {
  z-index: 1;
  pointer-events: none;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
}

/* Gradient overlay */
.hero-overlay.is-gradient {
  background-image: linear-gradient(
    180deg,
    hsl(228deg 99% 29% / 42%) 0%,
    hsl(228deg 99% 29% / 78%) 100%
  );
}

.hero-overlay.is-gradient.is-light {
  background-image: linear-gradient(
    180deg,
    hsl(228deg 99% 29% / 28%) 0%,
    hsl(228deg 99% 29% / 60%) 100%
  );
}

.hero-overlay.is-gradient.is-default {
  background-image: linear-gradient(
    180deg,
    hsl(228deg 99% 29% / 42%) 0%,
    hsl(228deg 99% 29% / 78%) 100%
  );
}

.hero-overlay.is-gradient.is-dark {
  background-image: linear-gradient(
    180deg,
    hsl(228deg 99% 29% / 55%) 0%,
    hsl(228deg 99% 29% / 88%) 100%
  );
}

.hero-overlay.is-gradient.is-darker {
  background-image: linear-gradient(
    180deg,
    hsl(228deg 99% 29% / 68%) 0%,
    hsl(228deg 99% 29% / 94%) 100%
  );
}

/* Solid overlay */
.hero-overlay.is-solid.is-light {
  background-color: hsl(228deg 99% 29% / 28%);
}

.hero-overlay.is-solid.is-default {
  background-color: hsl(228deg 99% 29% / 42%);
}

.hero-overlay.is-solid.is-dark {
  background-color: hsl(228deg 99% 29% / 55%);
}

.hero-overlay.is-solid.is-darker {
  background-color: hsl(228deg 99% 29% / 68%);
}

.hero-overlay.is-solid.is-darkest {
  background-color: hsl(228deg 99% 29% / 90%);
}

/* ============================================
   COMPONENTS — Home Intro
============================================ */

.home-intro-grid {
  display: grid;
  grid-template-columns: 1fr 0.75fr;
  align-items: stretch;
  gap: 4rem;
  width: 100%;
}

.home-intro-content {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}

.content-stack {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 3rem;
}

/* ============================================
   COMPONENTS — Home Values
============================================ */

.values-grid {
  align-items: start;
}

/* ============================================
   COMPONENTS — Dot Timeline
============================================ */

.timeline-marker {
  display: flex;
  align-items: center;
  margin-bottom: 1.7rem;
}

.timeline-dot {
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 0.5rem;
  border-radius: 50%;
  background-color: var(--brand-color--primary);
}

.timeline-line {
  flex: 1;
  height: 1px;
  background-color: var(--border-color--primary);
}

.timeline-item .text-stack {
  padding-right: 2.2rem;
}

.timeline-item:last-child .text-stack {
  padding-right: 0;
}

/* ========================================
   Component - About Page - Statistics value
======================================== */

.stat-value {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 0.35rem;
}

/* ========================================
   Contact Form
======================================== */

.contact-form-wrap {
  border: 1px solid var(--border-color--primary);
  height: 100%;
  padding: 2.25rem;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 1.2rem;
}

.form-field {
  display: flex;
  flex-direction: column;
}

.form-field label {
  display: block;
  font-size: 0.875rem;
  font-variation-settings: "wght" 420;
  line-height: 1.4;
}

.form-input {
  width: 100%;
  height: 3.5rem;
  padding: 1rem 0;
  border: 0;
  border-bottom: 1px solid var(--border-color--primary);
  background-color: transparent;
  color: var(--text-color--primary);
  outline: none;
  appearance: none;
  transition: border-color 0.3s ease;
}

.form-input:focus {
  border-bottom-color: var(--brand-color--primary);
}

.form-input::placeholder {
  color: var(--text-color--primary);
  opacity: 0.5;
}

.contact-form textarea.form-input {
  min-height: 5.5rem;
  resize: none;
  overflow-y: hidden;
}

.form-message {
  padding: 1rem 1.25rem;
  border: 1px solid var(--border-color--primary);
  font-size: 0.875rem;
}

.form-message.is-success {
  color: var(--brand-color--primary);
  background-color: var(--background-color--secondary);
}

.form-message.is-error {
  color: var(--brand-color--primary);
  background-color: var(--background-color--secondary);
}

.form-consent {
  display: flex;
  align-items: flex-start;
}

.form-consent input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.form-consent label {
  position: relative;
  margin: 0;
  padding-left: 1.6rem;
  font-size: 0.75rem;
  line-height: 1.8;
  cursor: pointer;
}

.form-consent label::before {
  content: "";
  position: absolute;
  top: 0.16rem;
  left: 0;
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--border-color--brand);
  border-radius: 2px;
  background-color: transparent;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.form-consent label::after {
  content: "";
  position: absolute;
  top: 0.33rem;
  left: 0.17rem;
  width: 0.65rem;
  height: 0.65rem;
  color: var(--text-color--inverse);
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M29.0612 10.0613L13.0612 26.0613C12.9218 26.2011 12.7563 26.3121 12.5739 26.3878C12.3916 26.4635 12.1961 26.5024 11.9987 26.5024C11.8013 26.5024 11.6058 26.4635 11.4235 26.3878C11.2411 26.3121 11.0756 26.2011 10.9362 26.0613L3.9362 19.0613C3.79667 18.9217 3.68599 18.7561 3.61047 18.5738C3.53496 18.3915 3.49609 18.1961 3.49609 17.9988C3.49609 17.8014 3.53496 17.606 3.61047 17.4237C3.68599 17.2414 3.79667 17.0758 3.9362 16.9363C4.07573 16.7967 4.24137 16.686 4.42367 16.6105C4.60598 16.535 4.80137 16.4962 4.9987 16.4962C5.19602 16.4962 5.39141 16.535 5.57372 16.6105C5.75602 16.686 5.92167 16.7967 6.0612 16.9363L11.9999 22.875L26.9387 7.93876C27.2205 7.65697 27.6027 7.49866 28.0012 7.49866C28.3997 7.49866 28.7819 7.65697 29.0637 7.93876C29.3455 8.22055 29.5038 8.60274 29.5038 9.00126C29.5038 9.39977 29.3455 9.78197 29.0637 10.0638L29.0612 10.0613Z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  transform: scale(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.form-consent input[type="checkbox"]:checked + label::before {
  background-color: var(--background-color--brand);
}

.form-consent input[type="checkbox"]:checked + label::after {
  transform: scale(1);
}

.form-consent input[type="checkbox"]:focus-visible + label::before {
  outline: 2px solid var(--border-color--brand);
  outline-offset: 3px;
}

.checkbox-link {
  font-variation-settings: "wght" 420;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--brand-color--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  cursor: pointer;
}

.form-honeypot {
    display: none;
}

.form-field-error {
    display: none;
}

.form-field-error.is-visible {
    display: block;
    margin-top: 0.5rem;
    color: var(--text-color-error); 
    font-size: 0.75rem;
}

.form-field-error[data-error-for="contact_privacy"].is-visible {
    margin-top: -0.75rem;
}

/* ============================================
   COMPONENTS — HOME INSIGHTS & MEDIA
============================================ */

.home-insights-grid {
  display: grid;
  grid-template-columns: 0.6fr 1fr;
  column-gap: 4rem;
}

.home-insights-legal {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  padding-right: 4rem;
  border-right: 1px solid var(--border-color--primary);
}

.home-insights-sma {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 4rem;
}

.insight-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.insight-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  row-gap: 2rem;
  padding-bottom: 2rem;
}

.insight-card.is-legal .insight-card__body {
    flex: 1;
    justify-content: space-between;
}

.insight-card.is-sma .insight-card__body {
    padding-top: 1rem;
}

.insight-card__meta {
  font-size: 0.875rem;
}

.insight-card__image-wrap {
  position: relative;
  overflow: hidden;
  min-height: 14rem;
  background-color: var(--background-color--brand);
}

.insight-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  transition:
    opacity 0.6s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.insight-card.is-sma .insight-card__body {
  padding-top: 1rem;
}

.insight-card .underline-container {
  margin-top: auto;
}

.insight-card:hover .insight-card__image,
.insight-card:focus-visible .insight-card__image {
  opacity: 0.6;
  transform: scale(1.025);
}

/* ============================================
   TEMPLATE — Insights & Media Archive
============================================ */

.insights-media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 4rem;
  row-gap: 4rem;
}

.insights-media-grid .insight-card.is-legal {
  border: 1px solid var(--border-color--primary);
  padding: 2rem;
  min-height: 24rem;
  transition: background-color 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.insights-media-grid .insight-card.is-legal .insight-card__body {
  height: 100%;
  justify-content: space-between;
  padding-bottom: 0;
}

.insights-media-grid .insight-card.is-legal:hover,
.insights-media-grid .insight-card.is-legal:focus-visible {
  background-color: var(--background-color--tertiary);
}

.insights-media-grid .insight-card.is-sma {
  min-height: 24rem;
}


/* ============================================
   TEMPLATE — SINGLE POST
============================================ */

.post-content-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 4rem;
  row-gap: 6rem;
  align-items: start;
}

.post-rich-text p {
  margin: 0;
}

.post-rich-text.text-stack > * + * {
  margin-top: 0;
}

.post-additional-content {
  margin-top: 0rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 4rem;
  row-gap: 6rem;
}

.post-content-grid + .post-additional-content {
  margin-top: 6rem;
}

.post-additional-column {
  min-width: 0;
}

.single-post .post-rich-text a,
.single-post .heading-style-h2.is-small a {
  color: inherit;
  text-decoration: underline;
  text-underline-position: under;
  text-decoration-thickness: 1px;
  transition: 0.3s ease;
}

.single-post .post-rich-text a:hover,
.single-post .heading-style-h2.is-small a:hover {
  color: var(--brand-color--primary);
  text-decoration-color: var(--brand-color--primary);
}

.single-post .heading-style-h2.is-small strong,
.single-post .heading-style-h2.is-small b,
.single-post .post-rich-text strong,
.single-post .post-rich-text b {
  color: var(--brand-color--primary);
  font-variation-settings: "wght" 400;
}

.single-post .post-rich-text ul,
.single-post .post-rich-text ol {
  padding-left: 1.4rem;
  margin: 0;
}

.single-post .post-rich-text li + li {
  margin-top: 0.5rem;
}

.single-post .post-rich-text ul li::marker,
.single-post .post-rich-text ol li::marker {
  color: var(--brand-color--primary);
}

.post-additional-column img {
  display: block;
  width: 100%;
  height: auto;
}

.post-additional-column figure,
.post-additional-column .wp-caption,
.post-additional-column > .post-rich-text > img {
  margin: 1rem 0;
}

.post-additional-column figure,
.post-additional-column .wp-caption {
  width: 100% !important;
}

.post-additional-column figcaption,
.post-additional-column .wp-caption-text {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-color--primary);
}

/* ==========================================================================
   Feature Card
   ========================================================================== */

.feature-card {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    height: 100%;
    padding: 2rem 2rem 3rem;
}

.feature-card__divider {
    width: 100%;
    height: 1px;
    flex-shrink: 0;
}

/* Feature Card - Light */

.feature-card.is-light {
    background-color: var(--background-color--tertiary);
}

.feature-card.is-light > .heading-serif {
    color: var(--brand-color--primary);
}

.feature-card.is-light > p {
    color: var(--text-color--primary);
}

.feature-card.is-light .feature-card__divider {
    background-color: var(--border-color--primary);
}

/* Feature Card - Primary */

.feature-card.is-primary {
    background-color: var(--background-color--brand);
}

.feature-card.is-primary > .heading-serif {
    color: var(--text-color--inverse);
}

.feature-card.is-primary > p {
    color: var(--text-color--inverse);
}

.feature-card.is-primary .feature-card__divider {
    background-color: var(--border-color--brand-inverse);
}

/* ============================================
   TEAM CARD Component
============================================ */

.team-biography-text strong,
.team-biography-text b {
  color: var(--brand-color--primary);
  font-weight: inherit;
}

.team-biography-text a {
  color: inherit;
  text-decoration: underline;
  text-underline-position: under;
  text-decoration-thickness: 1px;
  transition: 0.3s ease;
}

.team-biography-text a:hover {
  color: var(--brand-color--primary);
  text-decoration-color: var(--brand-color--primary);
}

.team-biography-text ul,
.team-biography-text ol {
  padding-left: 1.4rem;
  margin: 0;
}

.team-biography-text li + li {
  margin-top: 0.5rem;
}

.team-biography-text ul li::marker,
.team-biography-text ol li::marker {
  color: var(--brand-color--primary);
}

.team-item {
  width: 100%;
}

.team-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 728 / 950;
  overflow: hidden;
  background-color: var(--background-color--tertiary);
}

.team-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  transform: scale(1);
  transition:
    transform 0.6s cubic-bezier(0.65, 0, 0.35, 1),
    filter 0.6s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform, filter;
}

/* Base State */
.team-image:not(.is-grayscale) {
  filter: grayscale(0%);
}

.team-image.is-grayscale {
  filter: grayscale(100%) contrast(1.05);
}

@media (hover: hover) and (pointer: fine) {

  .team-item:hover .team-image:not(.is-grayscale),
  .team-item:focus-visible .team-image:not(.is-grayscale) {
    filter: grayscale(100%);
    transform: scale(1.025);
  }

  .team-item:hover .team-image.is-grayscale,
  .team-item:focus-visible .team-image.is-grayscale {
    filter: grayscale(0%);
    transform: scale(1.025);
  }

}

@media (hover: none) and (pointer: coarse) {

  .team-item:active .team-image:not(.is-grayscale) {
    filter: grayscale(100%);
    transform: scale(1.025);
  }

  .team-item:active .team-image.is-grayscale {
    filter: grayscale(0%);
    transform: scale(1.025);
  }

}

/* ============================================
   TEAM Profile Imagem
============================================ */

.team-profile-image-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    overflow: hidden;
}

.team-profile-image {
    display: block;
    width: 100%;
    max-width: 510px;
    height: auto;
    align-self: flex-end;
}

.team-profile-image.is-grayscale {
  filter: grayscale(100%) contrast(1.05);
}



/* ============================================
  Practice Area Page - Image cards
============================================ */

.practice-area-card {
    display: flex;
    height: 100%;
}

.practice-area-card > .text-stack {
    width: 100%;
    height: 100%;
}

.practice-area-card__content {
  display: flex;
  flex-direction: column;
  row-gap: 1.25rem;
  width: 100%;
  flex: 1;
}

.practice-area-card__content .underline-container {
    margin-top: auto;
}

.practice-area-card__image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 750 / 326;
  overflow: hidden;
}

.practice-area-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transform: scale(1);
  transition:
    transform 0.6s cubic-bezier(0.65, 0, 0.35, 1),
    filter 0.6s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform, filter;
}

.practice-area-card:hover .practice-area-card__image,
.practice-area-card:focus-visible .practice-area-card__image {
    filter: grayscale(0%);
    transform: scale(1.025);
}

/* ============================================
   Content Card
============================================ */

.content-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border-color--primary);
}

.content-card__content {
    min-width: 0;
}

.content-card.is-bullet .content-card__content {
  display: flex;
  column-gap: 1.2rem;
  align-items: start;
}

.content-card__dot {
  width: 0.45em;
  height: 0.45em;
  margin-top: 0.7em;
  border-radius: 50%;
  background-color: var(--background-color--brand);
}

.content-card__text {
  flex: 1;
  min-width: 0;
}

.content-card__text strong,
.content-card__text b {
  color: var(--brand-color--primary);
  font-weight: inherit;
}

/* ============================================
   Contact Page Links
============================================ */

.contact-details-link {
  color: inherit;
  transition: color 0.3s ease;
}

.contact-details-link:hover {
  color: var(--text-color--brand);
}

/* ============================================
   Footer
============================================ */

.site-footer {
  background-color: var(--background-color--brand);
  color: var(--text-color--inverse);
}

.site-footer-container {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 3rem;
  position: relative;
}

.site-footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
}

.site-footer-brand {
  border-right: 1px solid var(--border-color--brand-inverse);
  padding-top: 5rem;
}

.site-footer-brand-inner {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  row-gap: 3rem;
}

.site-footer-heading {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  row-gap: 1.55rem;
  width: 100%;
  max-width: 25rem;
}

.site-footer-content {
  padding-top: 5rem;
  padding-bottom: 5rem;
  padding-left: 4rem;
}

.site-footer-content-inner {
  display: flex;
  flex-flow: column;
  justify-content: center;
  gap: 3rem 2.5rem;
}

.site-footer-column-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  grid-template-rows: auto;
  gap: 2rem 0.75rem;
}

.site-footer-column {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 1.2rem 1rem;
  height: 100%;
}

.site-footer-column.is-last-child {
  justify-content: flex-start;
}

.site-footer-column-content {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    gap: 1rem;
}

.site-footer-column.is-contact .site-footer-column-content,
.site-footer-column.is-office .site-footer-column-content {
  flex: 1;
}

.footer-link.is-contact-email,
.footer-arrow-link.is-office-direction {
  margin-top: auto;
}

.footer-social-links {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.footer-link-list {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-link-list li {
  margin: 0;
  padding: 0;
}

.footer-link,
.footer-link-list a {
  display: block;
  color: var(--text-color--inverse-muted);
  transition: color 0.3s ease;
  padding: 0.08rem 0;
}

.footer-link:hover,
.footer-link-list a:hover {
  color: var(--text-color--inverse);
}

.footer-arrow-link {
  display: inline-flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 0 0.6rem;
  color: var(--text-color--inverse-muted);
  font-variation-settings: "wght" 380;
  transition: color 0.3s ease;
}

.footer-arrow-link:hover {
  color: var(--text-color--inverse);
}

.arrow-top {
  display: flex;
  justify-content: center;
  align-items: center;
}

.arrow-top.small {
  width: 0.4rem;
  padding-top: 0.125rem;
}

.arrow-top.medium {
  width: 0.6rem;
  padding-top: 0.125rem;
}

.arrow-top svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Buttons */

.button {
  display: inline-block;
  max-width: 100%;
  border: 1px solid var(--border-color--brand-inverse);
  background-color: var(--background-color--primary);
  font-variation-settings: "wght" 450;
  text-align: center;
  padding: 0.8rem 1.2rem;
}

.button.outline-white {
  border-color: var(--border-color--brand-inverse);
  color: var(--text-color--inverse);
  background-color: transparent;
  transition: border-color 0.4s ease;
}

.button.outline-white:hover {
  border-color: var(--border-color--inverse-hover);
}

.sub-footer {
  border-top: 1px solid var(--border-color--brand-inverse);
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
  position: relative;
}

.sub-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sub-footer-copyright {
  display: flex;
  align-items: center;
}

.sub-footer-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sub-footer-links li {
  margin: 0;
  padding: 0;
}

.sub-footer-links a {
  color: var(--text-color--inverse-soft);
  font-size: 0.875rem;
  transition: color 0.3s ease;
}

.sub-footer-links a:hover {
  color: var(--text-color--inverse);
}

/* ============================================
   MEDIA QUERIES
============================================ */

@media screen and (max-width: 991px) {

  /* ===== Navbar ===== */

  header.navbar-container.navbar-hide {
    transform: translateY(-100%);
    transition: transform 0.5s ease;
    will-change: transform;
  }

  header.navbar-container.navbar-show {
    transform: translateY(0);
    transition: transform 0.5s ease;
    will-change: transform;
  }

  .navbar-container.overlay-hero,
  .navbar-container.navbar-sticky {
    min-height: 4rem;
    padding-block: 0.6rem;
  }

  .navbar-container.overlay-hero {
    background-color: transparent;
    transition:
      transform 0.5s ease,
      background-color 0.2s ease,
      border-bottom-color 0.2s ease;
  }

  .navbar-container.overlay-hero.scrolled,
  .navbar-container.overlay-hero.navbar-show {
    background-color: var(--background-color--primary);
    border-bottom-color: var(--border-color--primary);
  }

  .navbar-brand {
    padding: 0;
  }

  .main-logo {
    width: 6.3rem;
  }

  .main-nav-menu {
    display: none;
  }

  .navbar-actions {
    gap: 0.2rem;
  }

  .lang-switch {
    padding-inline: 0.75rem 0.5rem;
  }

  .nav-link-lang {
    padding-block: 0.375rem;
  }

  .navbar-action-item.is-cta {
    display: none;
  }

  .menu-button {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: flex-end;
    margin-right: -0.4rem;
    padding: 1rem 0.85rem;
    background-color: transparent;
  }

  .mobile-menu-btn {
    gap: 0.35rem;
    justify-content: space-between;
    width: 100%;
  }

  .hamburger-line {
    width: 1.3rem;
    background-color: var(--text-color--inverse);
  }

  .navbar-container.overlay-hero.scrolled .lang-switch,
  .navbar-container.overlay-hero.navbar-show .lang-switch,
  .navbar-container.overlay-hero.scrolled .nav-link-lang,
  .navbar-container.overlay-hero.navbar-show .nav-link-lang,
  .navbar-container.overlay-hero.scrolled .lang-icon,
  .navbar-container.overlay-hero.navbar-show .lang-icon {
    color: var(--text-color--brand-dark);
  }

  .navbar-container.overlay-hero.scrolled .hamburger-line,
  .navbar-container.overlay-hero.navbar-show .hamburger-line,
  .navbar-container.navbar-sticky .hamburger-line {
    background-color: var(--background-color--brand-dark);
  }

  .nav_link-line {
    display: none;
  }

  /* ===== TYPOGRAPHY ===== */

  .display-heading-large {
    font-size: 3.25rem;
  }

  .display-heading {
    font-size: 2.75rem;
  }

  /* ===== LAYOUT ===== */

  .fullscreen-section {
    padding-top: 10rem;
    padding-bottom: 3rem;
  }

  .section-large {
    padding-block: 6rem;
  }

  .align-optical-top {
    padding-top: 0rem;
  }

  /* Components — Hero Video */
  .main-container.is-hero-video {
    padding-bottom: 4rem;
  }

  .grid-halves {
    grid-template-columns: 1fr;
    place-items: center start;
    row-gap: 4rem;
  }

  .grid-halves.is-full-width-tablet {
    grid-template-columns: 1fr;
  }

  .grid-halves.is-full-width-tablet > * {
    width: 100%;
  }

  .grid-halves.is-two-columns-tablet {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .is-column-gap-none-tablet {
    column-gap: 0;
  }

  .grid-fourths {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 4rem;
  }

  .grid-halves.is-hero-grid {
    grid-template-columns: 1fr 0.75fr;
    column-gap: 2rem;
  }

  .grid-thirds {
    grid-template-columns: repeat(2, 1fr);
  }

  .is-row-gap-none {
    row-gap: 0;
  }

  .is-row-gap-large {
    row-gap: 3rem;
  }

  .is-tablet-row-gap-huge {
    row-gap: 8rem;
  }

  .is-column-gap-xxlarge {
    column-gap: 4rem;
  }

  .is-column-gap-xlarge {
    column-gap: 3rem;
  }
  
  .container-xlarge {
    max-width: 42rem;
  }

  .flex-align-right {
    justify-self: start;
  }

  .hero-top-row {
    padding-bottom: 5rem;
  }

  .padding-top-small-tablet {
    padding-top: 2rem;
  }

  .padding-top-medium-tablet {
    padding-top: 3rem;
  }

  .padding-top-large-tablet {
    padding-top: 4rem;
  }

  .display-heading-large.hero-title-width {
    max-width: 13ch;
  }

  /* ========= Home Intro ========= */

  .home-intro-grid {
    grid-template-columns: 1fr;
    gap: 6rem;
  }

  .home-intro-content {
    gap: 5rem;
  }

  .image-reveal-wrap {
    max-width: 100%;
    height: 28rem;
  }

  /* ========= COMPONENTS — Dot Timeline ========= */

  .timeline-item .text-stack {
    padding-right: 2.5rem;
  }

  .timeline-item:last-child .text-stack {
    padding-right: 2.5rem;
  }

  /* ========= About Page - SMA by Numbers ========= */

  .stats-grid {
    row-gap: 6rem;
  }

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

  .mobile-menu-overlay {
    z-index: 9999;
    background-color: var(--background-color--primary);
    flex-flow: column;
    justify-content: space-between;
    align-items: stretch;
    width: 100vw;
    min-height: 100svh;
    padding-top: 4.8rem;
    display: flex;
    position: fixed;
    inset: 0;
    overflow-y: auto;
    transform: translateX(101%) rotate(0.001deg);
    pointer-events: none;
    transition: transform 0.8s cubic-bezier(0.6, 0, 0.2, 1);
    transition-delay: 0.1s;
  }

  .mobile-menu-overlay.is-open {
    transform: translateX(0%) rotate(0.001deg);
    pointer-events: auto;
    transition-delay: 0s;
  }

  .menu-header {
    border-bottom: 1px solid var(--border-color--primary);
    padding: 1rem clamp(1.563rem, 5vw, 3rem);
    position: absolute;
    inset: 0 0 auto;
  }

  .menu-header-inner {
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .menu-top-text {
    color: var(--brand-color--primary);
    font-variation-settings: "wght" 400;
  }

  .menu-close-button {
    cursor: pointer;
    background-color: transparent;
    border: 0;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 2.625rem;
    height: 2.625rem;
    margin-right: -0.8rem;
    padding: 0;
    display: flex;
  }

  .close-button {
    width: 1.3rem;
    height: 1.3rem;
    position: relative;
  }

  .close-bar {
    background-color: var(--background-color--brand);
    transform-origin: center;
    width: 100%;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 0;
  }

  .close-bar:first-child {
    transform: translateY(-50%) rotate(45deg);
  }

  .close-bar:last-child {
    transform: translateY(-50%) rotate(-45deg);
  }

  .mobile-nav {
    row-gap: 1rem;
    flex-flow: column;
    width: 100%;
    padding: clamp(8.5vh, 12vh, 12vh) clamp(1.563rem, 5vw, 3rem) 1.5rem;
    display: flex;
  }

  .mobile-nav-list {
    list-style: none;
    margin: 0;
    padding-left: 0;
  }

  .mobile-nav-list > li {
    width: 100%;
    display: flex;
  }

  .mobile-nav-list > li > a {
    color: var(--brand-color--primary);
    font-variation-settings: "wght" 250;
    letter-spacing: -0.01em;
    width: 100%;
    padding: 0.25rem 0;
    font-size: 2.125rem;
    line-height: 1.2;
    text-decoration: none;
    display: flex;
  }

  .mobile-nav-list > .current-menu-item > a,
  .mobile-nav-list > .current_page_item > a {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
  }

  .mobile-menu-footer {
    border-top: 1px solid var(--border-color--primary);
    flex-flow: column;
    justify-content: flex-end;
    width: 100%;
    padding: 1.5rem clamp(1.563rem, 5vw, 3rem);
    display: flex;
  }

  .mobile-footer-inner {
    flex-flow: row;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    display: flex;
  }

  .mobile-footer-column {
    flex-flow: column;
    align-items: stretch;
    display: flex;
  }

  .menu-footer-link {
    font-variation-settings: "wght" 400;
    color: var(--brand-color--primary);
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    line-height: 1.2;
    text-decoration: none;
  }

  .menu-footer-link.menu-link-wide {
    padding-left: 1rem;
  }

  .align-right {
    margin-left: auto;
    display: block;
  }

  /* ========= Template - Insights & Media Archive ========= */

  .insights-media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem;
  }

  /* ========= COMPONENTS — HOME INSIGHTS & MEDIA ========= */

  .home-insights-grid {
    grid-template-columns: 1fr;
    row-gap: 4rem;
  }

  .home-insights-legal {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3rem;
    padding-right: 0;
    border-right: 0;
  }

  .insight-card.is-legal {
    padding-top: 2rem;
    border-top: 1px solid var(--border-color--primary);
  }

  .home-insights-sma {
    column-gap: 3rem;
  }

  /* ========= TEMPLATE — SINGLE POST ========= */

  .post-content-grid,
  .post-additional-content {
    grid-template-columns: 1fr;
    row-gap: 4rem;
  }

  .post-content-grid + .post-additional-content {
    margin-top: 4rem;
  }

  /* ========= Site Footer ========= */

  .site-footer-container {
    padding-inline: 0;
  }

  .site-footer-grid {
    grid-template-columns: 1fr;
  }

  .site-footer-brand {
    padding: 4rem clamp(1.563rem, 5vw, 3rem);
    border-right: none;
    border-bottom: 1px solid var(--border-color--brand-inverse);
  }

  .site-footer-content {
    padding: 4rem clamp(1.563rem, 5vw, 3rem);
  }

  .site-footer-column {
    gap: 1.5rem 0.6rem;
  }

  .sub-footer {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    place-items: center start;
    row-gap: 0.3rem;
    padding-bottom: 1.7rem;
  }

  .sub-footer-inner {
    flex-flow: column-reverse;
    align-items: flex-start;
    gap: 0.4rem;
  }
}

@media screen and (max-width: 767px) {
  
  /* ===== TYPOGRAPHY ===== */

  .display-heading {
    font-size: 2.5rem;
  }

  .intro-subtitle {
    font-size: .875rem;
  }
  
  /* ===== LAYOUT ===== */

  .grid-thirds {
    grid-template-columns: 1fr;
  }

  .fullscreen-section.small-height {
    min-height: 70vh;
  }

  .grid-halves.is-two-columns-tablet {
    grid-template-columns: 1fr;
  }

  .main-container {
    padding-inline: clamp(1rem, 6vw, 1.563rem);
  }

  /* Components — Hero Video */
   .grid-halves.is-hero-grid {
      row-gap: 1.75rem;
      grid-template-columns: 1fr;
    }

  .hero-top-row {
    padding-bottom: 4rem;
  }

  .container-xlarge {
    max-width: 34rem;
  }

  .text-center-mobile {
    align-items: center;
    text-align: center;
  }

  /* ========= Template - Insights & Media Archive ========= */

  .insights-media-grid {
    column-gap: 2rem;
  }

  .insights-media-grid .insight-card.is-legal {
    padding: 1.5rem;
  }

  /* ========= COMPONENTS — HOME INSIGHTS & MEDIA ========= */

  .home-insights-legal {
    grid-template-columns: 1fr;
  }

  .home-insights-legal .insight-card.is-legal + .insight-card.is-legal {
    padding-top: 0;
    border-top: 0;
  }

  .home-insights-sma {
    grid-template-columns: 1fr;
    row-gap: 4rem;
  }

  /* ========= Site Footer ========= */

  .site-footer-heading {
    gap: 1.2rem;
  }
}

@media screen and (max-width: 479px) {

  /* ===== TYPOGRAPHY ===== */

  .display-heading-large {
    font-size: 3rem;
  }

  .heading-style-h2.is-small {
    font-size: 1.563rem;
  }

  /* ========= Layout ========= */

  .section {
    padding-block: 4rem;
  }

  .grid-thirds {
    grid-template-columns: 1fr;
  }

  .grid-fourths {
    grid-template-columns: 1fr;
    row-gap: 3rem;
  }

  .text-stack.is-gap-large {
    row-gap: 4rem;
  }

  .is-full-width-mobile {
    grid-column: 1 / -1;
    inline-size: 100%;
  }

  .padding-content-end-large {
    padding-block: 2.2rem;
    padding-inline: 2.2rem;
  }

  .margin-bottom-large {
    margin-bottom: 4rem;
  }

  .no-padding-top {
    padding-block-start: 0;
  }

  .no-padding-bottom {
    padding-block-end: 0;
  }

  .no-padding-y {
    padding-block: 0;
  }

  /* ===== TYPOGRAPHY ==== */

  .heading-style-h2.is-large {
    font-size: 2.5rem;
  }

  .heading-style-h2.is-medium {
    font-size: 2.75rem;
  }

  .heading-style-h3 {
    font-size: 1.125rem;
  }

  .heading-serif.is-xlarge {
    font-size: 2.625rem;
  }

  .heading-serif.is-large {
    font-size: 2rem;
  }

  .heading-serif.is-medium {
    font-size: 1.625rem;
  }

  /* ======= UTILITIES ====== */

  .show-mobile-portrait {
    display: block;
  }

  /* ===== Buttons ==== */

  .button.large {
    padding-block: 1rem;
    font-size: 1rem;
  }

  /* ===== NavBar ==== */

  .navbar-actions {
    gap: 0;
  }

  .lang-icon {
    width: 1rem;
  }

  .nav-link-lang {
    font-size: 1rem;
  }

  .menu-button {
    justify-content: flex-end;
    margin-right: -0.5rem;
    padding-right: 0.75rem;
  }

  .hamburger-line {
    width: 1.5rem;
  }

  /* ========= Components — Hero Video ========= */
  .hero-video-bg-element {
    object-position: 31% 50%;
  }

   /* ========= Home Intro ========= */

   .home-intro-grid {
    gap: 5rem;
  }

  .content-stack {
    gap: 2rem;
  }

  .image-reveal-wrap {
    height: 24rem;
  }

  /* ========= COMPONENTS — Dot Timeline ========= */

  .timeline-item .text-stack {
    padding-right: 0;
  }

  /* ====== Infinite Marquee ====== */

  .scroll {
    animation-duration: 30s;
  }

  .marquee-item {
    width: 16rem;
  }

  /* ========= About Page - SMA by Numbers ========= */

  .stats-grid {
    row-gap: 4rem;
  }

  /* ========= MOBILE MENU ========= */
   .close-button {
    width: 1.4rem;
    height: 1.4rem;
  }

  .mobile-nav-list > li > a {
    font-size: 2rem;
  }

  /* ========= Contact form ========= */

  .contact-form-wrap {
    padding: 1.75rem;
  }

  .form-input {
    height: 2.5rem;
  }

  /* ========= Template - Insights & Media Archive ========= */

  .insights-media-grid {
    grid-template-columns: 1fr;
  }

  .insights-media-grid .insight-card__image-wrap {
    min-height: 16rem;
  }

  .insights-media-grid .insight-card.is-legal {
    padding: 2rem;
    min-height: 25rem;
    background-color: var(--background-color--tertiary);
  }

  /* ========= TEAM Profile Imagem =============== */

.team-profile-image {
    transform: scale(1.075);
    transform-origin: center bottom;
  }

  /* ========== Content Card ========= */

  .content-card.is-bullet .content-card__content {
    column-gap: 1rem;
  }

  /* ========= Site Footer ========= */

  .site-footer-column-grid {
    grid-template-columns: 1fr;
    gap: 3rem 0;
  }

  .sub-footer {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .sub-footer-inner {
    gap: 2rem;
  }

  .sub-footer-links {
    flex-flow: column;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
  }
}