/* =========================================================
   MAMBODLA PROFESSIONAL ACCOUNTANTS
   GLOBAL DESIGN SYSTEM
========================================================= */

:root {
  /* Brand Colours */
  --color-navy: #0b2239;
  --color-navy-soft: #17324d;
  --color-gold: #b99352;
  --color-gold-light: #c9ab75;

  /* Neutral Colours */
  --color-background: #fcfcfc;
  --color-white: #ffffff;
  --color-text: #1a2630;
  --color-muted: #66717a;
  --color-border: rgba(11, 34, 57, 0.14);

  /* Layout */
  --container-max: 1360px;
  --page-padding: clamp(1.25rem, 4vw, 4rem);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: clamp(5rem, 10vw, 9rem);

  /* Radius */
  --radius-card: 0.4rem;
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;

  /* Animation */
  --transition-fast: 180ms ease;
  --transition-medium: 420ms ease;

  /* Motion System */
  --motion-fast: 150ms;
  --motion-standard: 300ms;
  --motion-slow: 500ms;
  --motion-ambient: 3200ms;
  --motion-page: 560ms;

  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --motion-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;

  background-color: var(--color-background);
  color: var(--color-text);

  font-family: "Poppins", Arial, sans-serif;

  line-height: 1.6;
}

body.menu-open {
  overflow: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

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

.container {
  width: min(calc(100% - (var(--page-padding) * 2)), var(--container-max));

  margin-inline: auto;
}

/* =========================================================
   MAMBODLA MOTION SYSTEM
   EASE → REVEAL → SETTLE
========================================================= */

/* =========================================================
   CROSS-DOCUMENT PAGE TRANSITION
========================================================= */

/*
    IMPORTANT:

    We transition the ROOT VIEWPORT itself.

    Home, About, Services, Insights and Contact therefore
    share exactly the same transition canvas regardless
    of their internal layout.

    This removes the Home ↔ About vertical geometry jump.
*/

::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;

  animation-duration: var(--motion-page);

  animation-timing-function: var(--motion-ease-soft);

  animation-fill-mode: both;
}

/* Current page always leaves to the left */

::view-transition-old(root) {
  animation-name: mambodla-page-slide-out;
}

/* Selected page always enters from the right */

::view-transition-new(root) {
  animation-name: mambodla-page-slide-in;
}

/* =========================================================
   STABLE SITE NAVIGATION
   One stationary navigation layer during page travel
========================================================= */

::view-transition-group(site-navigation) {
  z-index: 100;
  animation: none;
}

::view-transition-old(site-navigation),
::view-transition-new(site-navigation) {
  mix-blend-mode: normal;
  animation: none;
}

/*
    The outgoing navigation snapshot is not shown.

    The incoming snapshot stays stationary and is temporarily
    styled by transition-nav.js to look like the outgoing
    navigation until the page transition finishes.
*/

::view-transition-old(site-navigation) {
  opacity: 0;
}

::view-transition-new(site-navigation) {
  opacity: 1;
}

html.nav-handoff .nav-link.active,
html.nav-handoff .mobile-nav-link.active {
  color: var(--color-navy);
}

html.nav-handoff .nav-link.nav-transition-active,
html.nav-handoff .mobile-nav-link.nav-transition-active {
  color: var(--color-gold);
}

/* =========================================================
   INSIGHTS — INTERNAL NAVIGATION SETTLE
   EASE → REVEAL → SETTLE
========================================================= */

/*
    Normal website navigation continues to use:

        site-navigation

    JavaScript temporarily assigns:

        insights-navigation

    only when travelling internally between:

        Insights Hub ↔ Article
        Article ↔ Article

    This gives the complete Insights ecosystem
    one consistent navigation language.
*/

/* =========================================================
   INSIGHTS NAVIGATION — VIEW TRANSITION LAYER
========================================================= */

::view-transition-group(insights-navigation) {
  z-index: 100;

  animation: none;
}

::view-transition-old(insights-navigation),
::view-transition-new(insights-navigation) {
  mix-blend-mode: normal;
}

/*
    The outgoing Insights navigation clears immediately.

    It does not remain floating over the travelling
    destination composition.
*/

::view-transition-old(insights-navigation) {
  opacity: 0;

  animation: none;
}

/*
    The destination navigation becomes the final
    settling element of the Insights composition.

    The navigation settles near the end of the 560ms page transition.
*/

::view-transition-new(insights-navigation) {
  animation: mambodla-insights-nav-settle 210ms var(--motion-ease) 280ms both;
}

/* =========================================================
   INSIGHTS NAVIGATION — SETTLE
========================================================= */

@keyframes mambodla-insights-nav-settle {
  from {
    opacity: 0;

    transform: translate3d(0, -8px, 0);
  }

  to {
    opacity: 1;

    transform: translate3d(0, 0, 0);
  }
}

/* =========================================================
   INSIGHTS NAVIGATION — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  ::view-transition-new(insights-navigation) {
    opacity: 1;

    transform: none;

    animation: none;
  }
}

/* =========================================================
   PAGE SLIDE KEYFRAMES
========================================================= */

@keyframes mambodla-page-slide-out {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-100vw, 0, 0);
  }
}

@keyframes mambodla-page-slide-in {
  from {
    transform: translate3d(100vw, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

/* =========================================================
   INSIGHTS — SHARED ARTICLE IMAGE
   Featured Insight → Article Hero
========================================================= */

/*
    Keep the shared bridge above the travelling page,
    but below the stationary site navigation.
*/

::view-transition-group(insight-resilience-image) {
  z-index: 80;

  animation-duration: var(--motion-page);

  animation-timing-function: var(--motion-ease);

  animation-fill-mode: both;
}

/*
    Both snapshots represent the same image.

    Normal blending prevents the browser's default
    plus-lighter treatment from creating a bright flash.
*/

::view-transition-old(insight-resilience-image),
::view-transition-new(insight-resilience-image) {
  mix-blend-mode: normal;

  object-fit: cover;
}

/* =========================================================
   SCROLL REVEALS
========================================================= */

/*
    Elements are NOT hidden by default.

    JavaScript only marks content BELOW the initial
    viewport as reveal-pending.

    Anything already visible when the destination page
    arrives remains completely visible during the slide.
*/

[data-reveal].reveal-pending {
  opacity: 0;

  transform: translate3d(0, 16px, 0);

  transition:
    opacity var(--motion-slow) var(--motion-ease),
    transform var(--motion-slow) var(--motion-ease);

  transition-delay: var(--reveal-delay, 0ms);
}

/* =========================================================
   SIMPLE FADE
========================================================= */

[data-reveal="fade"].reveal-pending {
  transform: none;
}

/* =========================================================
   IMAGE REVEAL
========================================================= */

[data-reveal="image"].reveal-pending {
  transform: translate3d(0, 8px, 0) scale(1.015);
}

/* =========================================================
   GOLD RULE REVEAL
========================================================= */

[data-reveal="rule"].reveal-pending {
  opacity: 1;

  transform: scaleX(0);

  transform-origin: left center;
}

/* =========================================================
   REVEALED STATE
========================================================= */

[data-reveal].reveal-pending.is-visible {
  opacity: 1;

  transform: translate3d(0, 0, 0) scale(1);
}

[data-reveal="rule"].reveal-pending.is-visible {
  transform: scaleX(1);
}

/* =========================================================
   ICON MOTION
========================================================= */

[data-icon-motion] {
  transform-origin: 50% 60%;
}

/*
    Icon movement occurs ONLY when its content was genuinely
    below the initial viewport and is revealed by scrolling.

    Icons visible when the page first arrives remain still.
*/

[data-reveal].reveal-pending.is-visible [data-icon-motion],
[data-reveal].reveal-pending.is-visible[data-icon-motion] {
  animation: mambodla-icon-settle 650ms var(--motion-ease) both;
}

@keyframes mambodla-icon-settle {
  0% {
    transform: rotate(-1.75deg) translateY(2px) scale(0.985);
  }

  55% {
    transform: rotate(0.65deg) translateY(-1px) scale(1.005);
  }

  100% {
    transform: rotate(0deg) translateY(0) scale(1);
  }
}

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

.site-header {
  position: relative;
  z-index: 1000;

  background-color: var(--color-background);
}

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

  min-height: 96px;

  view-transition-name: site-navigation;
}

.brand {
  display: inline-flex;
  align-items: center;
}

.brand-logo {
  width: 78px;
  height: auto;
}

.home-page-body .site-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;

  z-index: 100;

  background-color: transparent;
}

/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}

.nav-link {
  padding-block: 0.5rem;

  color: var(--color-navy);

  font-size: 0.85rem;
  font-weight: 500;

  transition: color var(--transition-fast);
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-gold);
}

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

.menu-toggle {
  display: none;

  width: 44px;
  height: 44px;

  padding: 0;
  border: 0;

  background: transparent;

  cursor: pointer;
}

.menu-toggle span {
  display: block;

  width: 24px;
  height: 2px;

  margin: 5px auto;

  border-radius: 999px;

  background-color: var(--color-navy);

  transition:
    transform var(--transition-medium),
    opacity var(--transition-medium),
    background-color var(--transition-fast);
}

.menu-toggle:hover span {
  background-color: var(--color-gold);
}

.menu-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* =========================================================
   MOBILE DRAWER — MATCHED COUNTER MOTION
========================================================= */

::view-transition-group(mobile-drawer) {
  z-index: 90;

  animation-duration: 420ms;
  animation-timing-function: ease;
  animation-fill-mode: both;
}

::view-transition-old(mobile-drawer) {
  mix-blend-mode: normal;

  animation: none;
  opacity: 1;
}

::view-transition-new(mobile-drawer) {
  mix-blend-mode: normal;

  animation: none;
  opacity: 0;
}

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

.mobile-nav {
  display: none;
}

@media (max-width: 768px) {
  .desktop-nav {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  /* Keep hamburger / X above the mobile drawer */

  .header-inner {
    position: relative;
    z-index: 1200;
  }

  .mobile-nav {
    display: block;

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;

    width: clamp(210px, 50vw, 340px);

    z-index: 1100;

    view-transition-name: mobile-drawer;

    transform: translateX(100%);

    transition: transform var(--transition-medium);

    pointer-events: none;
  }

  .mobile-nav.is-open {
    transform: translateX(0);

    pointer-events: auto;
  }

  .mobile-nav-panel {
    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;

    padding: 5.5rem clamp(1.25rem, 4vw, 2rem) 2rem;

    background-color: var(--color-background);

    border-left: 1px solid rgba(11, 34, 57, 0.08);
  }

  .mobile-nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 0.45rem;
  }

  .mobile-nav-social {
    margin-top: auto;

    padding-top: 2rem;

    border-top: 1px solid rgba(11, 34, 57, 0.08);
  }

  .mobile-nav-social p {
    margin: 0 0 0.8rem;

    color: var(--color-navy);

    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .mobile-nav-social-links {
    display: flex;
    align-items: center;
    gap: 0.8rem;
  }

  .mobile-nav-social-links a {
    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    transition:
      transform var(--transition-fast),
      opacity var(--transition-fast);
  }

  .mobile-nav-social-links a:hover {
    transform: translateY(-2px);
    opacity: 0.7;
  }

  .mobile-nav-social-links img {
    width: 17px;
    height: 17px;

    object-fit: contain;
  }

  .mobile-nav-link {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding: 0.45rem 0;

    color: var(--color-navy);

    font-size: clamp(0.95rem, 2.8vw, 1.1rem);
    font-weight: 400;
    text-align: left;

    transition:
      color var(--transition-fast),
      transform var(--transition-medium);
  }

  .mobile-nav-link::after {
    content: "→";

    margin-left: 1.25rem;

    color: var(--color-gold);

    font-size: 1rem;

    opacity: 0.8;

    transition:
      transform var(--transition-fast),
      opacity var(--transition-fast);
  }

  .mobile-nav-link:hover,
  .mobile-nav-link.active {
    color: var(--color-gold);

    transform: translateX(2px);
  }

  .mobile-nav-link:hover::after,
  .mobile-nav-link.active::after {
    transform: translateX(3px);

    opacity: 1;
  }
}

/* =========================================================
   BACK TO TOP — FLOATING UTILITY
   EASE → REVEAL → SETTLE
========================================================= */

.back-to-top {
  position: fixed;

  right: max(0.15rem, env(safe-area-inset-right));
  bottom: max(0.15rem, env(safe-area-inset-bottom));

  z-index: 850;

  display: inline-flex;
  align-items: center;
  justify-content: flex-end;

  min-width: 44px;
  min-height: 44px;

  padding: 0.55rem 0 0.35rem 0.75rem;

  border: 0;
  border-radius: var(--radius-card);

  background: transparent;

  color: var(--color-gold);

  opacity: 0;
  visibility: hidden;

  transform: translate3d(0, 8px, 0);

  pointer-events: none;

  cursor: pointer;

  transition:
    opacity var(--motion-standard) var(--motion-ease),
    transform var(--motion-standard) var(--motion-ease),
    visibility 0s linear var(--motion-standard);
}

/* =========================================================
   VISIBLE STATE
========================================================= */

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;

  transform: translate3d(0, 0, 0);

  pointer-events: auto;

  transition:
    opacity var(--motion-standard) var(--motion-ease),
    transform var(--motion-standard) var(--motion-ease),
    visibility 0s linear 0s;
}

/* =========================================================
   BACK TO TOP — LABEL
========================================================= */

.back-to-top-label {
  display: block;

  max-width: 0;

  margin-right: 0;

  overflow: hidden;

  white-space: nowrap;

  color: var(--color-gold);

  font-size: 0.52rem;
  font-weight: 500;
  line-height: 1;

  letter-spacing: 0.1em;
  text-transform: uppercase;

  opacity: 0;

  transform: translate3d(6px, 0, 0);

  transition:
    max-width var(--motion-standard) var(--motion-ease),
    margin-right var(--motion-standard) var(--motion-ease),
    opacity var(--motion-fast) var(--motion-ease),
    transform var(--motion-standard) var(--motion-ease);
}

/* =========================================================
   BACK TO TOP — ARROW
========================================================= */

.back-to-top-arrow {
  display: grid;
  place-items: center;

  width: 28px;
  height: 28px;

  flex: 0 0 auto;

  color: var(--color-gold);

  font-size: 1.15rem;
  line-height: 1;

  transition: transform var(--transition-fast);
}

/* =========================================================
   DESKTOP — DISCOVERABLE LABEL
========================================================= */

@media (hover: hover) and (pointer: fine) {
  .back-to-top:hover .back-to-top-label {
    max-width: 8rem;

    margin-right: 0.15rem;

    opacity: 1;

    transform: translate3d(0, 0, 0);
  }

  .back-to-top:hover .back-to-top-arrow {
    transform: translateY(-2px);
  }
}

/* =========================================================
   KEYBOARD FOCUS
========================================================= */

.back-to-top:focus-visible {
  outline: 1px solid rgba(185, 147, 82, 0.65);

  outline-offset: 3px;
}

.back-to-top:focus-visible .back-to-top-label {
  max-width: 8rem;

  margin-right: 0.15rem;

  opacity: 1;

  transform: translate3d(0, 0, 0);
}

.back-to-top:focus-visible .back-to-top-arrow {
  transform: translateY(-2px);
}

/* =========================================================
   MOBILE DRAWER OPEN
   Drawer already provides navigation access.
========================================================= */

body.menu-open .back-to-top {
  opacity: 0;
  visibility: hidden;

  transform: translate3d(0, 8px, 0);

  pointer-events: none;
}

/* =========================================================
   BACK TO TOP — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .back-to-top,
  .back-to-top-label,
  .back-to-top-arrow {
    transition: none;
  }
}

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

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

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: clamp(1rem, 2.5vw, 2.25rem);

  padding-top: 1.1rem;
  padding-bottom: 1.5rem;

  border-top: 1px solid rgba(11, 34, 57, 0.08);
}

.footer-copyright p {
  margin: 0;

  color: var(--color-muted);

  font-size: 0.75rem;
}

.footer-legal {
  display: flex;
  gap: 1.25rem;
}

.footer-legal a {
  color: var(--color-navy);

  font-size: 0.75rem;

  transition: color var(--transition-fast);
}

.footer-legal a:hover {
  color: var(--color-gold);
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer-social a {
  display: grid;
  place-items: center;

  width: 28px;
  height: 28px;

  transition:
    transform var(--transition-fast),
    opacity var(--transition-fast);
}

.footer-social a:hover {
  transform: translateY(-2px);

  opacity: 0.75;
}

.footer-social img {
  width: 17px;
  height: 17px;

  object-fit: contain;
}

/* =========================================================
   HOME PAGE
   APPROVED SPREAD — SINGLE VIEWPORT
========================================================= */

.home-page-body {
  height: 100dvh;
  overflow: hidden;
}

.home-page-body .site-footer {
  display: none;
}

.home-page {
  width: 100%;
  height: 100dvh;
}

.home-hero {
  position: relative;

  width: 100%;
  height: 100dvh;

  overflow: hidden;
}

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

.home-hero-background {
  position: absolute;
  inset: 0;

  background-image: url("../assets/images/home/home-hero.webp");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;

  transform: scale(1.002);
}

/*
    Very restrained readability treatment.
    The image remains dominant.
*/

.home-hero-overlay {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(242, 243, 242, 0.82) 0%,
    rgba(242, 243, 242, 0.58) 27%,
    rgba(242, 243, 242, 0.12) 54%,
    rgba(242, 243, 242, 0.015) 100%
  );

  pointer-events: none;
}

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

.home-hero-content {
  position: relative;
  z-index: 5;

  display: flex;
  align-items: flex-start;

  height: 100%;

  padding-top: clamp(8.75rem, 19.5vh, 11.25rem);
}

.home-hero-copy {
  width: min(100%, 510px);
}

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

.home-hero-title {
  display: flex;
  flex-direction: column;

  margin: 0;

  color: var(--color-navy);

  font-size: clamp(2.8rem, 4.15vw, 4.35rem);
  font-weight: 600;
  line-height: 0.96;

  letter-spacing: -0.045em;
}

.home-hero-title span {
  display: block;
}

.home-hero-title .gold-text {
  display: block;

  color: var(--color-gold);

  font-size: 1.15em;
  line-height: 0.92;
}

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

.home-hero-description {
  width: min(100%, 470px);

  margin: clamp(1.25rem, 2.5vh, 1.75rem) 0 0;

  color: var(--color-navy);

  font-size: clamp(0.76rem, 0.9vw, 0.86rem);
  font-weight: 400;
  line-height: 1.65;
}

.home-hero-description .gold-text {
  color: var(--color-gold);
}

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

.home-hero-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;

  margin-top: clamp(1.6rem, 3.5vh, 2.35rem);
}

.home-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;

  padding: 0.7rem 1rem;

  border-radius: 5px;

  font-size: 0.76rem;
  font-weight: 500;

  transition:
    transform var(--transition-fast),
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.home-button:hover {
  transform: translateY(-1px);
}

.home-button-primary {
  gap: 1rem;

  color: var(--color-white);
  background-color: var(--color-navy);
}

.home-button-primary:hover {
  background-color: var(--color-navy-soft);
}

.home-button-arrow {
  color: var(--color-gold);

  font-size: 1rem;
}

.home-button-secondary {
  gap: 0.5rem;

  color: var(--color-navy);

  border: 1px solid var(--color-gold);

  background-color: rgba(242, 243, 242, 0.55);
}

.home-button-secondary:hover {
  border-color: var(--color-navy);
}

.calendar-icon {
  width: 16px;
  height: 16px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   SERVICE CARDS
   GLASS / FLOATING
========================================================= */

.home-services-overlay {
  position: absolute;
  right: 0;
  bottom: clamp(1.1rem, 2.2vh, 1.75rem);
  left: 0;

  z-index: 8;
}

.home-services-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: clamp(0.7rem, 1.2vw, 1.1rem);
}

.home-service-card {
  position: relative;

  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 0.9rem;

  min-height: clamp(112px, 17vh, 145px);

  padding: clamp(0.9rem, 1.4vw, 1.2rem);

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 13px;

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.78),
    rgba(245, 245, 242, 0.55)
  );

  box-shadow:
    0 12px 30px rgba(11, 34, 57, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.22) inset;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  transition:
    transform var(--transition-medium),
    box-shadow var(--transition-medium),
    border-color var(--transition-medium);
}

.home-service-card::before {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: inherit;

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.12) 28%,
    transparent 48%
  );

  pointer-events: none;
}

.home-service-card:hover {
  transform: translateY(-2px);

  border-color: rgba(185, 147, 82, 0.32);

  box-shadow:
    0 13px 28px rgba(11, 34, 57, 0.13),
    0 0 20px rgba(185, 147, 82, 0.06);
}

/* =========================================================
   SERVICE ICONS
========================================================= */

.home-service-icon {
  grid-row: 1 / span 2;

  display: grid;
  place-items: center;

  width: clamp(44px, 4.5vw, 54px);
  height: clamp(44px, 4.5vw, 54px);

  flex-shrink: 0;
}

.home-service-icon img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}

/* =========================================================
   SERVICE CONTENT
========================================================= */

.home-service-content {
  min-width: 0;

  padding-right: 1.3rem;
}

.home-service-content h2 {
  margin: 0;

  color: var(--color-navy);

  font-size: clamp(0.78rem, 1vw, 0.95rem);
  font-weight: 600;
  line-height: 1.25;
}

.home-service-content p {
  width: min(100%, 165px);

  margin: 0.55rem 0 0;

  color: var(--color-navy);

  font-size: clamp(0.64rem, 0.78vw, 0.73rem);
  line-height: 1.5;
}

/* =========================================================
   SERVICE ARROW
========================================================= */

.home-service-arrow {
  position: absolute;
  right: 0.95rem;
  bottom: 0.8rem;

  color: var(--color-gold);

  font-size: 1.15rem;
  line-height: 1;

  transition: transform var(--transition-fast);
}

.home-service-card:hover .home-service-arrow {
  transform: translateX(2px);
}

/* =========================================================
   HOME RESPONSIVE
========================================================= */

@media (max-width: 900px) {
  .home-hero-copy {
    width: min(100%, 460px);
  }

  .home-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-service-card {
    min-height: 105px;
  }
}

@media (min-width: 769px) and (max-width: 900px) {
  .home-hero-actions {
    display: none;
  }
}

@media (max-width: 768px) {
  .home-page-body {
    height: 100dvh;
    overflow: hidden;
  }

  .home-hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(242, 243, 242, 0.88) 0%,
      rgba(242, 243, 242, 0.68) 30%,
      rgba(242, 243, 242, 0.18) 58%,
      rgba(242, 243, 242, 0.03) 100%
    );
  }

  .home-hero-content {
    align-items: flex-start;
  }

  .home-hero-copy {
    width: min(100%, 500px);
    padding-top: 4.25rem;
  }

  .home-hero-title {
    font-size: clamp(2.4rem, 8vw, 3.6rem);
  }

  .home-hero-description {
    display: none;
  }

  .home-hero-actions {
    display: none;
  }

  .home-services-overlay {
    bottom: 0.8rem;
  }

  .home-service-card {
    min-height: 92px;
    padding: 0.8rem;
  }

  .home-service-content {
    padding-right: 1rem;
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  .home-hero-actions {
    position: relative;
    z-index: 10;

    display: flex;
    align-items: center;

    gap: 0.5rem;

    margin-top: 2.5rem;
  }

  .home-button {
    min-height: 40px;

    padding: 0.55rem 0.75rem;

    font-size: 0.68rem;
  }

  .home-button-primary {
    gap: 0.65rem;
  }

  .home-button-secondary {
    gap: 0.4rem;
  }

  .calendar-icon {
    width: 14px;
    height: 14px;
  }

  .home-button-arrow {
    font-size: 0.9rem;
  }
}

@media (max-width: 560px) {
  .home-hero-background {
    background-position: 62% center;
  }

  .home-hero-copy {
    padding-top: 4.25rem;
  }

  .home-hero-title {
    font-size: clamp(2.2rem, 10vw, 3rem);
  }

  .home-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .home-service-card {
    min-height: 100px;
    grid-template-columns: 1fr;
    padding: 0.8rem;
  }

  .home-service-icon {
    width: 34px;
    height: 34px;
  }

  .home-service-content {
    padding-right: 0;
  }

  .home-service-content h2 {
    font-size: 0.72rem;
  }

  .home-service-content p {
    max-width: 130px;
    font-size: 0.62rem;
  }

  .home-service-arrow {
    right: 0.65rem;
    bottom: 0.55rem;
    font-size: 1rem;
  }
}

@media (max-width: 520px) and (orientation: portrait) {
  .home-hero-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: fit-content;

    gap: 0.4rem;

    margin-top: 3.25rem;
  }

  .home-button {
    width: 100%;
    min-width: 145px;
    min-height: 38px;

    padding: 0.5rem 0.7rem;

    font-size: 0.62rem;
  }

  .home-services-overlay {
    bottom: 0.4rem;
  }
}

@media (max-width: 340px) and (orientation: portrait) {
  .home-hero-actions {
    margin-top: 2.5rem;
  }
}

/* =========================================================
   HOME — ARRIVAL CHOREOGRAPHY
   MAMBODLA INTRODUCTION
========================================================= */

.brand-logo-home {
  overflow: visible;
}

.brand-logo-home path {
  transform-box: fill-box;
  transform-origin: center;
}

/* =========================================================
   FRESH ARRIVAL — INITIAL STATE
========================================================= */

html[data-home-arrival="fresh"]
  body.home-page-body:not(.home-intro-started):not(.home-intro-complete)
  .home-logo-sweep,
html[data-home-arrival="fresh"]
  body.home-page-body:not(.home-intro-started):not(.home-intro-complete)
  .home-logo-left,
html[data-home-arrival="fresh"]
  body.home-page-body:not(.home-intro-started):not(.home-intro-complete)
  .home-logo-right,
html[data-home-arrival="fresh"]
  body.home-page-body:not(.home-intro-started):not(.home-intro-complete)
  .home-logo-crown,
html[data-home-arrival="fresh"]
  body.home-page-body:not(.home-intro-started):not(.home-intro-complete)
  .home-logo-wordmark,
html[data-home-arrival="fresh"]
  body.home-page-body:not(.home-intro-started):not(.home-intro-complete)
  .home-hero-title
  > span,
html[data-home-arrival="fresh"]
  body.home-page-body:not(.home-intro-started):not(.home-intro-complete)
  .home-hero-description,
html[data-home-arrival="fresh"]
  body.home-page-body:not(.home-intro-started):not(.home-intro-complete)
  .home-hero-actions,
html[data-home-arrival="fresh"]
  body.home-page-body:not(.home-intro-started):not(.home-intro-complete)
  .home-service-card {
  opacity: 0;
}

/* Logo starting positions */

html[data-home-arrival="fresh"]
  body.home-page-body:not(.home-intro-started):not(.home-intro-complete)
  .home-logo-sweep {
  transform: translateY(5px) scale(0.985);
}

html[data-home-arrival="fresh"]
  body.home-page-body:not(.home-intro-started):not(.home-intro-complete)
  .home-logo-left {
  transform: translateX(-5px) scale(0.985);
}

html[data-home-arrival="fresh"]
  body.home-page-body:not(.home-intro-started):not(.home-intro-complete)
  .home-logo-right {
  transform: translateX(5px) scale(0.985);
}

html[data-home-arrival="fresh"]
  body.home-page-body:not(.home-intro-started):not(.home-intro-complete)
  .home-logo-crown {
  transform: translateY(-5px) scale(0.985);
}

html[data-home-arrival="fresh"]
  body.home-page-body:not(.home-intro-started):not(.home-intro-complete)
  .home-logo-wordmark {
  transform: translateY(4px);
}

/* Hero starting positions */

html[data-home-arrival="fresh"]
  body.home-page-body:not(.home-intro-started):not(.home-intro-complete)
  .home-hero-title
  > span {
  transform: translateY(12px);
}

html[data-home-arrival="fresh"]
  body.home-page-body:not(.home-intro-started):not(.home-intro-complete)
  .home-hero-description,
html[data-home-arrival="fresh"]
  body.home-page-body:not(.home-intro-started):not(.home-intro-complete)
  .home-hero-actions {
  transform: translateY(10px);
}

html[data-home-arrival="fresh"]
  body.home-page-body:not(.home-intro-started):not(.home-intro-complete)
  .home-service-card {
  transform: translateY(14px) scale(0.99);
}

html[data-home-arrival="fresh"]
  body.home-page-body:not(.home-intro-started):not(.home-intro-complete)
  .home-hero-background {
  transform: scale(1.025);
}

html[data-home-arrival="fresh"]
  body.home-page-body:not(.home-intro-started):not(.home-intro-complete)
  .home-hero-overlay {
  opacity: 0.78;
}

/* =========================================================
   FRESH ARRIVAL — GO
========================================================= */

html[data-home-arrival="fresh"]
  body.home-page-body.home-intro-started
  .home-logo-sweep {
  animation: home-logo-sweep-in 420ms var(--motion-ease) 40ms both;
}

html[data-home-arrival="fresh"]
  body.home-page-body.home-intro-started
  .home-logo-left {
  animation: home-logo-left-in 430ms var(--motion-ease) 125ms both;
}

html[data-home-arrival="fresh"]
  body.home-page-body.home-intro-started
  .home-logo-right {
  animation: home-logo-right-in 430ms var(--motion-ease) 205ms both;
}

html[data-home-arrival="fresh"]
  body.home-page-body.home-intro-started
  .home-logo-crown {
  animation: home-logo-crown-in 420ms var(--motion-ease) 285ms both;
}

html[data-home-arrival="fresh"]
  body.home-page-body.home-intro-started
  .home-logo-wordmark {
  animation: home-logo-wordmark-in 420ms var(--motion-ease) 390ms both;
}

/* Background settles beneath the brand */

html[data-home-arrival="fresh"]
  body.home-page-body.home-intro-started
  .home-hero-background {
  animation: home-background-settle 1050ms var(--motion-ease) both;
}

html[data-home-arrival="fresh"]
  body.home-page-body.home-intro-started
  .home-hero-overlay {
  animation: home-overlay-settle 650ms var(--motion-ease-soft) 120ms both;
}

/* Headline */

html[data-home-arrival="fresh"]
  body.home-page-body.home-intro-started
  .home-hero-title
  > span:nth-child(1) {
  animation: home-copy-in 520ms var(--motion-ease) 610ms both;
}

html[data-home-arrival="fresh"]
  body.home-page-body.home-intro-started
  .home-hero-title
  > span:nth-child(2) {
  animation: home-copy-in 520ms var(--motion-ease) 690ms both;
}

html[data-home-arrival="fresh"]
  body.home-page-body.home-intro-started
  .home-hero-title
  > span:nth-child(3) {
  animation: home-copy-in 540ms var(--motion-ease) 770ms both;
}

/* Description + actions */

html[data-home-arrival="fresh"]
  body.home-page-body.home-intro-started
  .home-hero-description {
  animation: home-copy-in 520ms var(--motion-ease) 900ms both;
}

html[data-home-arrival="fresh"]
  body.home-page-body.home-intro-started
  .home-hero-actions {
  animation: home-copy-in 520ms var(--motion-ease) 1010ms both;
}

/* Service cards — 1 2 3 4 */

html[data-home-arrival="fresh"]
  body.home-page-body.home-intro-started
  .home-service-card:nth-child(1) {
  animation: home-card-in 560ms var(--motion-ease) 1140ms both;
}

html[data-home-arrival="fresh"]
  body.home-page-body.home-intro-started
  .home-service-card:nth-child(2) {
  animation: home-card-in 560ms var(--motion-ease) 1210ms both;
}

html[data-home-arrival="fresh"]
  body.home-page-body.home-intro-started
  .home-service-card:nth-child(3) {
  animation: home-card-in 560ms var(--motion-ease) 1280ms both;
}

html[data-home-arrival="fresh"]
  body.home-page-body.home-intro-started
  .home-service-card:nth-child(4) {
  animation: home-card-in 560ms var(--motion-ease) 1350ms both;
}

/* =========================================================
   RETURN HOME — COMPLETE LOGO ONLY
========================================================= */

html[data-home-arrival="return"] .brand-logo-home {
  opacity: 0.96;

  transform: scale(0.985);

  transform-origin: center;

  transition:
    opacity 320ms var(--motion-ease),
    transform 320ms var(--motion-ease);
}

html[data-home-arrival="return"]
  body.home-page-body.home-return-complete
  .brand-logo-home {
  opacity: 1;

  transform: scale(1);
}

/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes home-logo-sweep-in {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes home-logo-left-in {
  from {
    opacity: 0;
    transform: translateX(-5px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes home-logo-right-in {
  from {
    opacity: 0;
    transform: translateX(5px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes home-logo-crown-in {
  from {
    opacity: 0;
    transform: translateY(-5px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes home-logo-wordmark-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes home-copy-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes home-card-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.99);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes home-background-settle {
  from {
    transform: scale(1.025);
  }

  to {
    transform: scale(1.002);
  }
}

@keyframes home-overlay-settle {
  from {
    opacity: 0.78;
  }

  to {
    opacity: 1;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  html[data-home-arrival] .brand-logo-home,
  html[data-home-arrival] .brand-logo-home path,
  html[data-home-arrival] .home-hero-background,
  html[data-home-arrival] .home-hero-overlay,
  html[data-home-arrival] .home-hero-title > span,
  html[data-home-arrival] .home-hero-description,
  html[data-home-arrival] .home-hero-actions,
  html[data-home-arrival] .home-service-card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  html[data-home-arrival] .home-hero-background {
    transform: scale(1.002) !important;
  }
}

/* =========================================================
   ABOUT PAGE
========================================================= */

.about-page {
  width: 100%;
  min-height: 100dvh;

  background-color: var(--color-background);

  padding-bottom: clamp(1.5rem, 3vw, 3rem);
}

/* =========================================================
   ABOUT HERO
   INSIGHTS MASTER ARCHITECTURE
========================================================= */

.about-hero {
  width: calc(100% - 2rem);

  margin-inline: auto;

  background-color: #fdfbfa;
}

/* =========================================================
   ABOUT HERO — CANVAS
========================================================= */

.about-hero-grid {
  position: relative;

  display: flex;
  align-items: flex-start;

  width: 100%;
  min-height: clamp(390px, 46vh, 455px);

  margin: 0;

  padding-top: clamp(2rem, 3vw, 2.75rem);

  overflow: hidden;

  background-color: #fdfbfa;
}

/* =========================================================
   ABOUT HERO — VISUAL
========================================================= */

.about-hero-image-wrap {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;
}

.about-hero-image {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center 60%;
}

/* =========================================================
   ABOUT HERO — CONTENT
========================================================= */

.about-hero-content {
  position: relative;
  z-index: 3;

  display: flex;
  flex-direction: column;

  width: min(100%, 520px);

  padding-left: var(--page-padding);
}

/* =========================================================
   ABOUT HERO — EYEBROW
========================================================= */

.about-eyebrow {
  margin: 0 0 1rem;

  color: var(--color-gold);

  font-size: 0.68rem;
  font-weight: 600;

  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* =========================================================
   ABOUT HERO — TITLE
========================================================= */

.about-hero-title {
  display: flex;
  flex-direction: column;

  margin: 0;

  color: var(--color-navy);

  font-size: clamp(2.15rem, 3.25vw, 3.35rem);
  font-weight: 500;

  line-height: 1.04;

  letter-spacing: -0.035em;
}

.about-hero-title span {
  display: block;
}

.about-hero-title .gold-text {
  color: var(--color-gold);
}

/* =========================================================
   ABOUT HERO — GOLD RULE
========================================================= */

.about-hero-rule {
  width: 38px;
  height: 1px;

  margin-top: 1.25rem;

  background-color: var(--color-gold);
}

/* =========================================================
   ABOUT HERO — DESCRIPTION
========================================================= */

.about-hero-description {
  width: min(100%, 430px);

  margin: 1.2rem 0 0;

  color: var(--color-navy);

  font-size: clamp(0.78rem, 0.95vw, 0.9rem);
  font-weight: 400;

  line-height: 1.8;
}

/* =========================================================
   ABOUT HERO — COMPACT LANDSCAPE / TABLET
========================================================= */

@media (min-width: 769px) and (max-width: 1024px) {
  .about-hero-grid {
    min-height: clamp(390px, 52vh, 440px);
  }

  .about-hero-content {
    width: min(47%, 470px);
  }

  .about-hero-title {
    font-size: clamp(2.15rem, 4.5vw, 2.9rem);
  }

  .about-hero-description {
    width: min(100%, clamp(260px, 34vw, 340px));
  }
}

/* =========================================================
   ABOUT HERO — MOBILE / STACKED
========================================================= */

@media (max-width: 768px) {
  .about-hero {
    width: calc(100% - 1rem);
  }

  .about-hero-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    min-height: auto;

    padding-top: 0;

    overflow: hidden;
  }

  .about-hero-content {
    order: 1;

    width: 100%;

    padding: 2.5rem var(--page-padding) 2rem;
  }

  .about-hero-title {
    font-size: clamp(2.25rem, 10vw, 3.15rem);
    line-height: 1.05;
  }

  .about-hero-description {
    width: min(100%, 410px);
  }

  .about-hero-image-wrap {
    position: relative;

    order: 2;

    inset: auto;

    width: 100%;
    height: clamp(230px, 56vw, 330px);
  }

  .about-hero-image {
    object-position: 72% 60%;
  }
}

/* =========================================================
   ABOUT HERO — SHORT LANDSCAPE
========================================================= */

@media (max-width: 768px) and (orientation: landscape) {
  .about-hero-content {
    padding-top: 1.75rem;
    padding-bottom: 1.5rem;
  }

  .about-hero-title {
    font-size: clamp(2.1rem, 5.5vw, 2.6rem);
  }

  .about-hero-description {
    margin-top: 1rem;
    line-height: 1.65;
  }

  .about-hero-image-wrap {
    height: clamp(190px, 32vw, 245px);
  }
}

/* =========================================================
   ABOUT PAGE — OUR STORY
   APPROVED SPREAD / BATCH 2
========================================================= */

.about-story {
  position: relative;

  width: calc(100% - 2rem);

  margin-inline: auto;

  overflow: hidden;

  background-color: var(--color-navy);
  color: var(--color-white);
}

.about-story-inner {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 0.8fr)
    minmax(0, 1.2fr);

  gap: clamp(2.25rem, 5vw, 5rem);

  width: 100%;
  max-width: none;

  margin: 0;

  min-height: clamp(320px, 27vw, 390px);

  padding: clamp(2.5rem, 3.2vw, 3rem) clamp(1.75rem, 4vw, 4.5rem);
}

/* =========================================================
   STORY INTRO
========================================================= */

.about-story-intro {
  position: relative;
  z-index: 2;

  align-self: start;
}

.about-story-eyebrow {
  margin: 0 0 0.9rem;

  color: var(--color-gold);

  font-size: 0.62rem;
  font-weight: 600;

  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.about-story-title {
  max-width: 440px;

  margin: 0;

  color: var(--color-white);

  font-size: clamp(2rem, 3.2vw, 3.5rem);
  font-weight: 500;
  line-height: 1.08;

  letter-spacing: -0.035em;
}

.about-story-rule {
  width: 42px;
  height: 1.5px;

  margin-top: 1.4rem;

  background-color: var(--color-gold);
}

/* =========================================================
   STORY CONTENT
========================================================= */

.about-story-content {
  position: relative;
  z-index: 2;

  align-self: center;

  max-width: 650px;
}

.about-story-content p {
  margin: 0;

  color: rgba(255, 255, 255, 0.86);

  font-size: clamp(0.78rem, 0.92vw, 0.9rem);
  font-weight: 400;
  line-height: 1.75;
}

.about-story-content p + p {
  margin-top: 1.25rem;
}

/* =========================================================
   WATERMARK
========================================================= */

.about-story-watermark {
  position: absolute;

  right: -3rem;
  top: 50%;

  width: clamp(220px, 24vw, 360px);
  height: auto;

  opacity: 0.006;

  filter: brightness(0) invert(1);

  transform: translateY(-50%) rotate(0deg);

  pointer-events: none;
}

/* =========================================================
   OUR STORY RESPONSIVE
========================================================= */

@media (min-width: 769px) and (max-width: 900px) {
  .about-story-inner {
    grid-template-columns:
      minmax(0, 0.8fr)
      minmax(0, 1.2fr);

    gap: 2rem;

    min-height: 360px;

    padding: 2.75rem clamp(1.75rem, 4vw, 2.5rem);
  }

  .about-story-content {
    max-width: none;
  }

  .about-story-title {
    font-size: clamp(1.9rem, 3.6vw, 2.4rem);
  }

  .about-story-content p {
    font-size: 0.72rem;
    line-height: 1.65;
  }

  .about-story-watermark {
    right: -4rem;
    top: 56%;

    width: 280px;
  }
}

@media (max-width: 768px) {
  .about-story-inner {
    grid-template-columns: 1fr;

    min-height: auto;

    gap: 1.8rem;

    padding-top: 3rem;
    padding-bottom: 3.75rem;
  }

  .about-story-title {
    max-width: 500px;

    font-size: clamp(1.8rem, 7vw, 2.6rem);
  }

  .about-story-content p {
    font-size: 0.78rem;
    line-height: 1.7;
  }

  .about-story-watermark {
    right: -3rem;
    top: auto;
    bottom: -2rem;

    width: 220px;

    transform: rotate(0deg);
  }

  .about-story {
    width: calc(100% - 1rem);
    margin-inline: auto;
  }
}

/* =========================================================
   ABOUT STORY — SIGNATURE LOCKUP
========================================================= */

.about-story-signature-lockup {
  display: flex;
  align-items: center;

  width: fit-content;

  gap: 1rem;

  margin-top: 1.5rem;
}

.about-story-signature {
  width: clamp(135px, 13vw, 190px);
  height: auto;

  flex-shrink: 0;
}

.about-story-signature-divider {
  width: 1px;
  height: 56px;

  flex-shrink: 0;

  background-color: var(--color-gold);

  opacity: 0.8;
}

.about-story-signature-brand {
  display: flex;
  flex-direction: column;

  min-width: 0;
}

.about-story-signature-brand strong {
  color: var(--color-gold);

  font-size: clamp(0.72rem, 0.85vw, 0.88rem);
  font-weight: 600;

  letter-spacing: 0.16em;
  line-height: 1.2;
}

.about-story-signature-brand span {
  margin-top: 0.3rem;

  color: var(--color-gold);

  font-size: clamp(0.5rem, 0.58vw, 0.62rem);
  font-weight: 500;

  letter-spacing: 0.12em;
  line-height: 1.2;
}

/* 769–900 */

@media (min-width: 769px) and (max-width: 900px) {
  .about-story-signature-lockup {
    gap: 0.7rem;

    margin-top: 1.25rem;
  }

  .about-story-signature {
    width: 105px;
  }

  .about-story-signature-divider {
    height: 42px;
  }

  .about-story-signature-brand strong {
    font-size: 0.62rem;
  }

  .about-story-signature-brand span {
    font-size: 0.44rem;
  }
}

/* MOBILE */

@media (max-width: 768px) {
  .about-story-signature-lockup {
    gap: 0.8rem;

    margin-top: 1.5rem;
  }

  .about-story-signature {
    width: clamp(120px, 34vw, 175px);
  }

  .about-story-signature-divider {
    height: 48px;
  }

  .about-story-signature-brand strong {
    font-size: clamp(0.62rem, 2vw, 0.75rem);
  }

  .about-story-signature-brand span {
    font-size: clamp(0.44rem, 1.4vw, 0.55rem);
  }
}

/* VERY SMALL MOBILE */

@media (max-width: 380px) {
  .about-story-signature-lockup {
    gap: 0.6rem;
  }

  .about-story-signature {
    width: 108px;
  }

  .about-story-signature-divider {
    height: 40px;
  }

  .about-story-signature-brand strong {
    font-size: 0.58rem;
    letter-spacing: 0.12em;
  }

  .about-story-signature-brand span {
    font-size: 0.42rem;
    letter-spacing: 0.09em;
  }
}

/* =========================================================
   ABOUT PAGE — FROM THE DIRECTOR
   BRAND BOOK → EDITORIAL WEB TRANSLATION
========================================================= */

.about-director {
  width: calc(100% - 2rem);

  margin-inline: auto;

  background-color: #fdfbfa;
}

.about-director-grid {
  display: grid;

  grid-template-columns:
    minmax(320px, 0.78fr)
    minmax(0, 1.22fr);

  align-items: stretch;

  width: 100%;
}

/* =========================================================
   DIRECTOR — PORTRAIT PANEL
========================================================= */

.about-director-visual {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  min-width: 0;

  margin: 0;

  padding: 0 clamp(1.5rem, 2.5vw, 2.4rem) clamp(1.5rem, 2.5vw, 2.4rem);

  background-color: var(--color-navy);
}

/* =========================================================
   DIRECTOR — PHOTO
========================================================= */

.about-director-photo-frame {
  position: relative;

  width: min(100%, 430px);

  margin-inline: auto;

  overflow: hidden;

  border: 1px solid rgba(185, 147, 82, 0.82);

  background-color: #eef0f2;
}

.about-director-photo {
  display: block;

  width: 100%;

  aspect-ratio: 5 / 6;

  object-fit: cover;
  object-position: center 42%;
}

/* =========================================================
   DIRECTOR — IDENTITY
========================================================= */

.about-director-caption {
  display: flex;
  flex-direction: column;

  width: min(100%, 430px);

  gap: 0.2rem;

  margin: 0.55rem auto 0;
}

.about-director-caption strong {
  color: var(--color-white);

  font-size: clamp(0.78rem, 0.92vw, 0.9rem);
  font-weight: 600;
  line-height: 1.3;
}

.about-director-caption span {
  color: var(--color-gold-light);

  font-size: clamp(0.56rem, 0.66vw, 0.64rem);
  font-weight: 500;

  line-height: 1.4;

  letter-spacing: 0.04em;
}

/* =========================================================
   DIRECTOR — MESSAGE
========================================================= */

.about-director-message {
  align-self: center;

  min-width: 0;

  padding: clamp(2.75rem, 4.5vw, 4.75rem);
}

/* =========================================================
   DIRECTOR — EYEBROW
========================================================= */

.about-director-eyebrow {
  margin: 0 0 0.9rem;

  color: var(--color-gold);

  font-size: 0.62rem;
  font-weight: 600;

  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* =========================================================
   DIRECTOR — TITLE
========================================================= */

.about-director-title {
  display: flex;
  flex-direction: column;

  max-width: 650px;

  margin: 0;

  color: var(--color-navy);

  font-size: clamp(1.9rem, 3vw, 3.1rem);
  font-weight: 500;

  line-height: 1.08;

  letter-spacing: -0.035em;
}

.about-director-title span {
  display: block;
}

.about-director-title .gold-text {
  color: var(--color-gold);
}

/* =========================================================
   DIRECTOR — GOLD RULE
========================================================= */

.about-director-rule {
  width: 42px;
  height: 1.5px;

  margin-top: 1.35rem;

  background-color: var(--color-gold);
}

/* =========================================================
   DIRECTOR — OPENING MESSAGE
========================================================= */

.about-director-intro {
  max-width: 680px;

  margin: 1.5rem 0 0;

  color: var(--color-navy);

  font-size: clamp(0.78rem, 0.9vw, 0.88rem);
  line-height: 1.75;
}

/* =========================================================
   DIRECTOR — PULL QUOTE
========================================================= */

.about-director-quote {
  max-width: 680px;

  margin: 1.65rem 0;

  padding: 0.2rem 0 0.2rem 1.25rem;

  border-left: 1.5px solid var(--color-gold);
}

.about-director-quote p {
  margin: 0;

  color: var(--color-navy);

  font-size: clamp(1rem, 1.35vw, 1.22rem);
  font-weight: 500;

  line-height: 1.55;

  letter-spacing: -0.015em;
}

/* =========================================================
   DIRECTOR — CLOSING COPY
========================================================= */

.about-director-copy {
  display: grid;

  max-width: 680px;

  gap: 0.85rem;
}

.about-director-copy p {
  margin: 0;

  color: var(--color-muted);

  font-size: clamp(0.75rem, 0.86vw, 0.84rem);
  line-height: 1.7;
}

/* =========================================================
   DIRECTOR — COMPACT LANDSCAPE / TABLET
========================================================= */

@media (min-width: 769px) and (max-width: 1024px) {
  .about-director-grid {
    grid-template-columns:
      minmax(280px, 0.9fr)
      minmax(0, 1.1fr);
  }

  .about-director-visual {
    padding: 0 1.5rem 1.5rem;
  }

  .about-director-caption {
    margin-top: 0.55rem;
  }

  .about-director-photo-frame,
  .about-director-caption {
    width: min(100%, 350px);
  }

  .about-director-message {
    padding: 2.5rem;
  }

  .about-director-title {
    font-size: clamp(1.8rem, 3.4vw, 2.45rem);
  }

  .about-director-intro,
  .about-director-copy p {
    font-size: 0.74rem;
  }

  .about-director-quote p {
    font-size: 0.95rem;
  }
}

/* =========================================================
   DIRECTOR — MOBILE
========================================================= */

@media (max-width: 768px) {
  .about-director + .about-pillars {
    padding-top: 2rem;
  }

  .about-director {
    width: calc(100% - 1rem);
  }

  .about-director-grid {
    grid-template-columns: 1fr;
  }

  .about-director-visual {
    padding: 1.25rem;
  }

  .about-director-photo-frame,
  .about-director-caption {
    width: min(100%, 460px);
  }

  .about-director-message {
    padding: 2.75rem var(--page-padding) 3rem;
  }

  .about-director-title {
    font-size: clamp(1.9rem, 8vw, 2.7rem);
  }

  .about-director-intro {
    font-size: 0.78rem;
    line-height: 1.7;
  }

  .about-director-quote {
    margin: 1.5rem 0;
  }

  .about-director-quote p {
    font-size: clamp(0.95rem, 4vw, 1.1rem);
  }

  .about-director-copy p {
    font-size: 0.76rem;
    line-height: 1.7;
  }
}

/* =========================================================
   DIRECTOR — VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {
  .about-director-visual {
    padding: 1rem;
  }

  .about-director-message {
    padding-top: 2.25rem;
    padding-bottom: 2.5rem;
  }

  .about-director-caption strong {
    font-size: 0.74rem;
  }

  .about-director-caption span {
    font-size: 0.54rem;
  }
}

/* =========================================================
   ABOUT PAGE — CORE PILLARS
   APPROVED SPREAD
========================================================= */

.about-pillars {
  width: calc(100% - 2rem);

  margin-inline: auto;

  padding: clamp(3.25rem, 4.75vw, 4.5rem) 0 clamp(3.5rem, 5vw, 4.75rem);

  background-color: var(--color-background);
}

/* =========================================================
   ABOUT PAGE — CORE PILLARS
   APPROVED SPREAD / BATCH 3
========================================================= */

.about-pillars-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 0;

  width: 100%;
}

/* =========================================================
   PILLAR CARD
========================================================= */

.about-pillar-card {
  display: grid;

  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;

  column-gap: 0.9rem;
  row-gap: 0.8rem;

  min-width: 0;
  min-height: 210px;

  padding: 1.25rem clamp(1.35rem, 2.1vw, 2rem);
}

.about-pillar-card + .about-pillar-card {
  border-left: 1px solid rgba(11, 34, 57, 0.1);
}

.about-pillar-icon {
  display: grid;
  place-items: center;

  grid-column: 1;
  grid-row: 1;

  width: 62px;
  height: 62px;

  flex-shrink: 0;
}

.about-pillar-icon img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}

/* =========================================================
   PILLAR CONTENT
========================================================= */

.about-pillar-content {
  display: contents;
}

.about-pillar-content h2 {
  grid-column: 2;
  grid-row: 1;

  align-self: center;

  margin: 0;

  color: var(--color-navy);

  font-size: clamp(0.9rem, 1.05vw, 1.05rem);
  font-weight: 600;
  line-height: 1.25;
}

.about-pillar-content h2::after {
  content: "";

  display: block;

  width: 28px;
  height: 1px;

  margin-top: 0.45rem;

  background-color: var(--color-gold);
}

.about-pillar-content p {
  grid-column: 1 / -1;
  grid-row: 2;

  margin: 0;

  color: var(--color-navy);

  font-size: clamp(0.72rem, 0.85vw, 0.8rem);
  font-weight: 400;
  line-height: 1.6;
}

/* =========================================================
   PILLARS RESPONSIVE
========================================================= */

@media (min-width: 769px) and (max-width: 900px) {
  .about-pillars {
    padding: 2.75rem 0 3rem;
  }

  .about-pillar-card {
    min-height: 190px;

    padding: 1rem 1.15rem;
  }

  .about-pillar-icon {
    width: 52px;
    height: 52px;
  }

  .about-pillar-content h2 {
    font-size: 0.86rem;
  }

  .about-pillar-content p {
    font-size: 0.68rem;
    line-height: 1.6;
  }
}

@media (max-width: 768px) {
  .about-pillar-card.reveal-pending {
    transition-delay: 0ms;
  }

  .about-pillars {
    width: calc(100% - 1rem);

    padding: 3rem 0;
  }

  .about-pillars-grid {
    grid-template-columns: 1fr;

    gap: 1.5rem;
  }

  .about-pillar-card {
    min-height: auto;

    padding: 0.9rem var(--page-padding);
  }

  .about-pillar-card + .about-pillar-card {
    padding-top: 2rem;

    border-left: 0;

    border-top: 1px solid rgba(11, 34, 57, 0.1);
  }

  .about-pillar-icon {
    width: 44px;
    height: 44px;
  }

  .about-pillar-content p {
    font-size: 0.74rem;
    line-height: 1.7;
  }
}

/* =========================================================
   ABOUT PAGE — OUR COMMITMENT
   APPROVED SPREAD / BATCH 4
========================================================= */

/* =========================================================
   OUR COMMITMENT — MATCH OUR STORY WIDTH
========================================================= */

.about-commitment {
  width: calc(100% - 2rem);

  margin-inline: auto;

  padding: 0;

  background-color: #eeeee9;
}

.about-commitment-card {
  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1.25fr)
    1px
    minmax(170px, 0.9fr);

  align-items: center;

  column-gap: clamp(1.25rem, 2.5vw, 2.5rem);

  min-height: 190px;

  padding: 1.5rem clamp(1.5rem, 2.5vw, 2.5rem);

  border-radius: 0.85rem;

  background-color: #eeeee9;
}

.about-commitment-copy-body {
  display: grid;

  gap: 0.7rem;

  max-width: 500px;
}

.about-commitment-copy-body p {
  margin: 0;

  color: var(--color-muted);

  font-size: clamp(0.72rem, 0.82vw, 0.8rem);
  line-height: 1.6;
}

/* =========================================================
   ICON
========================================================= */

.about-commitment-icon {
  display: grid;
  place-items: center;

  width: 86px;
  height: 86px;

  flex-shrink: 0;
}

.about-commitment-icon img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}

/* =========================================================
   COPY
========================================================= */

.about-commitment-copy {
  min-width: 0;
}

.about-commitment-eyebrow {
  margin: 0 0 0.35rem;

  color: var(--color-navy);

  font-size: 0.68rem;
  font-weight: 600;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-commitment-text {
  max-width: 480px;

  margin: 0;

  color: var(--color-muted);

  font-size: 0.68rem;
  line-height: 1.55;
}

/* =========================================================
   GOLD DIVIDER
========================================================= */

.about-commitment-divider {
  align-self: stretch;

  width: 1px;

  background-color: var(--color-gold);

  opacity: 0.6;
}

/* =========================================================
   FOUR PRINCIPLES
========================================================= */

.about-commitment-list {
  display: flex;
  flex-direction: column;

  gap: 0.45rem;

  margin: 0;
  padding: 0;

  list-style: none;
}

.about-commitment-list li {
  display: flex;
  align-items: center;
  gap: 0.55rem;

  color: var(--color-navy);

  font-size: clamp(0.68rem, 0.76vw, 0.74rem);
  line-height: 1.35;
}

.about-commitment-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 13px;
  height: 13px;

  flex-shrink: 0;

  color: var(--color-gold);

  font-size: 0.62rem;
  font-weight: 700;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {
  .about-commitment-card {
    grid-template-columns:
      auto
      minmax(0, 1fr)
      1px
      minmax(150px, 0.8fr);

    column-gap: 1.25rem;
  }
}

@media (max-width: 768px) {
  .about-commitment-card {
    grid-template-columns:
      auto
      minmax(0, 1fr);

    row-gap: 1.25rem;

    padding: 1.25rem;
  }

  .about-commitment-divider {
    display: none;
  }

  .about-commitment-list {
    grid-column: 1 / -1;

    padding-top: 1rem;

    border-top: 1px solid rgba(185, 147, 82, 0.45);
  }
}

@media (max-width: 480px) {
  .about-commitment-card {
    grid-template-columns: 1fr;

    row-gap: 1rem;
  }

  .about-commitment-icon {
    width: 48px;
    height: 48px;

    justify-self: start;
  }

  .about-commitment-copy {
    width: 100%;
  }

  .about-commitment-list {
    grid-column: 1;
  }

  .about-commitment-eyebrow {
    font-size: 0.62rem;
  }

  .about-commitment-text {
    font-size: 0.64rem;
  }

  .about-commitment-list li {
    font-size: 0.62rem;
  }
}

/* =========================================================
   ABOUT PAGE — BRAND BOOK
   EDITORIAL PUBLICATION GATEWAY
========================================================= */

.about-brand-book {
  width: calc(100% - 2rem);

  margin-inline: auto;
  margin-top: clamp(2.75rem, 4vw, 4rem);

  background-color: #fdfbfa;
}

.about-brand-book-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(320px, 0.92fr);

  align-items: center;

  gap: clamp(2.5rem, 5vw, 5rem);

  padding: clamp(2rem, 3.5vw, 3.5rem) clamp(2rem, 4vw, 4.5rem);
}

/* =========================================================
   BRAND BOOK — VISUAL
========================================================= */

.about-brand-book-visual {
  display: grid;
  place-items: center;

  min-width: 0;
}

.about-brand-book-preview-link {
  position: relative;

  display: block;

  width: min(100%, 360px);

  overflow: hidden;

  border: 1px solid rgba(185, 147, 82, 0.28);

  background-color: var(--color-white);
}

.about-brand-book-preview {
  display: block;

  width: 100%;
  height: auto;

  transition: transform var(--transition-medium);
}

.about-brand-book-preview-link:hover .about-brand-book-preview {
  transform: scale(1.008);
}

/* =========================================================
   BRAND BOOK — CONTENT
========================================================= */

.about-brand-book-content {
  min-width: 0;
}

.about-brand-book-eyebrow {
  margin: 0 0 0.9rem;

  color: var(--color-gold);

  font-size: 0.62rem;
  font-weight: 600;

  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.about-brand-book-title {
  display: flex;
  flex-direction: column;

  margin: 0;

  color: var(--color-navy);

  font-size: clamp(1.9rem, 3vw, 3rem);
  font-weight: 500;

  line-height: 1.08;

  letter-spacing: -0.035em;
}

.about-brand-book-title span {
  display: block;
}

.about-brand-book-title .gold-text {
  color: var(--color-gold);
}

.about-brand-book-rule {
  width: 42px;
  height: 1.5px;

  margin-top: 1.35rem;

  background-color: var(--color-gold);
}

.about-brand-book-description {
  max-width: 560px;

  margin: 1.45rem 0 0;

  color: var(--color-muted);

  font-size: clamp(0.76rem, 0.88vw, 0.86rem);

  line-height: 1.75;
}

/* =========================================================
   BRAND BOOK — ACTIONS
========================================================= */

.about-brand-book-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 1rem;

  margin-top: 1.8rem;
}

.about-brand-book-primary {
  display: inline-flex;
  align-items: center;

  gap: 1rem;

  padding: 0.7rem 1rem;

  border-radius: 4px;

  color: var(--color-white);

  background-color: var(--color-navy);

  font-size: 0.72rem;
  font-weight: 500;

  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast);
}

.about-brand-book-primary span:last-child {
  color: var(--color-gold);

  font-size: 1rem;

  transition: transform var(--transition-fast);
}

.about-brand-book-primary:hover {
  background-color: var(--color-navy-soft);

  transform: translateY(-1px);
}

.about-brand-book-primary:hover span:last-child {
  transform: translateX(3px);
}

.about-brand-book-download {
  display: inline-flex;
  align-items: center;

  gap: 0.55rem;

  color: var(--color-gold);

  font-size: 0.68rem;
  font-weight: 500;

  transition: color var(--transition-fast);
}

.about-brand-book-download:hover {
  color: var(--color-navy);
}

/* =========================================================
   BRAND BOOK — TABLET
========================================================= */

@media (min-width: 769px) and (max-width: 1024px) {
  .about-brand-book-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(280px, 0.9fr);

    gap: 2rem;

    padding: 2.5rem;
  }

  .about-brand-book-preview-link {
    width: min(100%, 320px);
  }

  .about-brand-book-title {
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  }

  .about-brand-book-description {
    font-size: 0.74rem;
  }
}

/* =========================================================
   BRAND BOOK — MOBILE
========================================================= */

@media (max-width: 768px) {
  .about-brand-book {
    width: calc(100% - 1rem);

    margin-top: 2rem;
  }

  .about-brand-book-grid {
    grid-template-columns: 1fr;

    gap: 2rem;

    padding: 1.25rem 1.25rem 2.5rem;
  }

  .about-brand-book-preview-link {
    width: min(100%, 320px);
    margin-inline: auto;
  }

  .about-brand-book-content {
    padding-inline: calc(var(--page-padding) - 1.25rem);
  }

  .about-brand-book-title {
    font-size: clamp(1.9rem, 8vw, 2.7rem);
  }

  .about-brand-book-description {
    font-size: 0.76rem;

    line-height: 1.7;
  }
}

/* =========================================================
   ABOUT PAGE — CLOSING
   APPROVED SPREAD
========================================================= */

.about-closing {
  width: 100%;

  margin: 0;

  padding: 3.5rem 0 2rem;
}

.about-closing-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(260px, 0.65fr);

  align-items: center;

  gap: clamp(1.5rem, 4vw, 4rem);
}

/* LEFT STATEMENT */

.about-closing-copy {
  display: grid;
  grid-template-columns: 2px 1fr;

  column-gap: 1rem;

  max-width: 620px;
}

.about-closing-accent {
  width: 1.5px;

  background-color: var(--color-gold);
}

.about-closing-copy h2 {
  margin: 0;

  color: var(--color-navy);

  font-size: clamp(1.45rem, 2.4vw, 2.3rem);
  font-weight: 500;
  line-height: 1.15;

  letter-spacing: -0.025em;
}

.about-closing-copy p {
  grid-column: 2;

  margin: 0.7rem 0 0;

  color: var(--color-muted);

  font-size: clamp(0.7rem, 0.78vw, 0.76rem);
  line-height: 1.6;
}

/* CTA CARD */

.about-closing-card {
  display: flex;
  align-items: center;

  gap: 1rem;

  padding: 1rem 1.15rem;

  border: 1px solid rgba(11, 34, 57, 0.08);
  border-radius: 0.75rem;

  background-color: var(--color-white);

  box-shadow: none;

  transition:
    transform var(--transition-medium),
    box-shadow var(--transition-medium);
}

.about-closing-card:hover {
  transform: translateY(-2px);

  box-shadow: 0 12px 28px rgba(11, 34, 57, 0.08);

  cursor: pointer;
}

.about-closing-icon {
  display: grid;
  place-items: center;

  width: 48px;
  height: 48px;

  flex-shrink: 0;

  color: var(--color-gold);

  border: 1px solid rgba(185, 147, 82, 0.45);
  border-radius: 50%;
}

.about-closing-icon svg {
  width: 32px;
  height: 32px;
}

/* CTA CARD CONTENT */

.about-closing-card-content {
  min-width: 0;

  flex: 1;
}

.about-closing-card-content p {
  margin: 0;

  color: var(--color-muted);

  font-size: 0.66rem;
  line-height: 1.3;
}

.about-closing-card-content strong {
  display: block;

  margin-top: 0.15rem;

  color: var(--color-navy);

  font-size: 0.78rem;
  font-weight: 600;
}

/* ACTUAL BUTTON */

.about-closing-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: fit-content;

  gap: 1rem;

  margin-top: 0.7rem;

  padding: 0.45rem 0.8rem;

  color: var(--color-white);

  background-color: var(--color-navy);

  border-radius: 4px;

  font-size: 0.62rem;
  font-weight: 500;

  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast);
}

.about-closing-button:hover {
  background-color: var(--color-navy-soft);

  transform: translateY(-1px);
}

.about-closing-button span:last-child {
  color: var(--color-gold);

  font-size: 0.85rem;
}

/* MOBILE */

@media (max-width: 768px) {
  .about-closing-grid {
    grid-template-columns: 1fr;

    gap: 1.25rem;
  }

  .about-hero,
  .about-commitment {
    width: calc(100% - 1rem);

    margin-inline: auto;
  }
}

@media (max-width: 480px) {
  .about-closing-copy {
    grid-template-columns: 2px 1fr;
  }

  .about-closing-card {
    padding: 0.9rem;
  }
}

/* =========================================================
   SERVICES PAGE — HERO
   APPROVED SPREAD / BATCH 1
========================================================= */

.services-page {
  width: 100%;

  min-height: 100dvh;

  background-color: var(--color-background);
}

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

.services-hero {
  position: relative;

  display: flex;
  align-items: center;

  width: calc(100% - 2rem);
  min-height: clamp(350px, 48vh, 455px);

  margin-inline: auto;

  overflow: hidden;

  background-color: var(--color-background);
}

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

.services-hero-content {
  position: relative;
  z-index: 3;

  width: min(100%, 620px);

  padding-left: var(--page-padding);

  transform: translateY(-0.75rem);
}

.services-eyebrow {
  margin: 0 0 1rem;

  color: var(--color-gold);

  font-size: 0.68rem;
  font-weight: 600;

  letter-spacing: 0.15em;
  text-transform: uppercase;
}

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

.services-hero-title {
  display: flex;
  flex-direction: column;

  margin: 0;

  color: var(--color-navy);

  font-size: clamp(3.25rem, 5vw, 6rem);
  font-weight: 600;
  line-height: 1.04;

  letter-spacing: -0.035em;
}

.services-hero-title span {
  display: block;
}

.services-hero-title .gold-text {
  color: var(--color-gold);
}

/* =========================================================
   GOLD RULE
========================================================= */

.services-hero-rule {
  width: 38px;
  height: 1.5px;

  margin-top: 1.5rem;

  background-color: var(--color-gold);
}

/* =========================================================
   DESCRIPTION
========================================================= */

.services-hero-description {
  width: min(100%, 430px);

  margin: 1.25rem 0 0;

  color: var(--color-navy);

  font-size: clamp(0.82rem, 1vw, 0.95rem);
  font-weight: 400;

  line-height: 1.8;
}

/* =========================================================
   SERVICES HERO — WATERMARK
========================================================= */

.services-hero-watermark {
  position: absolute;

  z-index: 1;

  top: 50%;
  right: 1.5rem;

  width: auto;
  height: min(78%, 360px);

  max-width: 42vw;

  opacity: 0.035;

  object-fit: contain;

  transform: translateY(-50%);

  pointer-events: none;
  user-select: none;
}

/* =========================================================
   GOLD VERTICAL ACCENT
========================================================= */

.services-hero-accent {
  position: absolute;

  z-index: 2;

  right: 1.25rem;
  bottom: 5%;

  display: flex;
  justify-content: center;

  width: 1px;
  height: 76px;

  background-color: rgba(185, 147, 82, 0.55);
}

.services-hero-accent span {
  position: absolute;

  bottom: -3px;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background-color: var(--color-gold);
}

/* =========================================================
   SERVICES HERO RESPONSIVE
========================================================= */

@media (max-width: 900px) {
  .services-hero-content {
    padding-left: clamp(1.25rem, 4vw, 2.5rem);
  }

  .services-hero-title {
    font-size: clamp(3rem, 8vw, 4.75rem);
  }

  .services-hero-watermark {
    top: auto;
    right: 1rem;
    bottom: 1rem;

    width: auto;
    height: 42%;

    max-width: 48vw;

    opacity: 0.025;

    transform: none;
  }
}

@media (max-width: 768px) {
  .services-hero {
    width: calc(100% - 1rem);

    min-height: 470px;

    align-items: flex-start;

    padding-top: 6rem;
  }

  .services-hero-content {
    width: 100%;

    padding: 0 var(--page-padding);
  }

  .services-eyebrow {
    font-size: 0.62rem;
  }

  .services-hero-title {
    font-size: clamp(2.8rem, 13vw, 4rem);
  }

  .services-hero-description {
    max-width: 360px;

    font-size: 0.78rem;

    line-height: 1.7;
  }

  .services-hero-watermark {
    top: auto;
    right: 1rem;
    bottom: 1rem;

    width: auto;
    height: 42%;

    max-width: 48vw;

    opacity: 0.025;

    transform: none;
  }

  .services-hero-accent {
    display: none;
  }
}

@media (max-width: 480px) {
  .services-hero {
    min-height: 440px;

    padding-top: 5.5rem;
  }

  .services-hero-title {
    font-size: clamp(2.6rem, 14vw, 3.5rem);
  }

  .services-hero-rule {
    margin-top: 1.2rem;
  }

  .services-hero-description {
    max-width: 320px;

    font-size: 0.75rem;
  }
}
/* =========================================================
   SERVICES PAGE — OVERVIEW CARDS
   APPROVED SPREAD / BATCH 2
========================================================= */

.services-overview {
  width: calc(100% - 2rem);

  margin-inline: auto;

  padding: 0 var(--page-padding) clamp(2.75rem, 5vw, 4rem);

  background-color: var(--color-background);
}

.services-overview-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: clamp(0.9rem, 1.5vw, 1.25rem);
}

/* =========================================================
   SERVICES OVERVIEW CARD
   INSIGHTS / CONTACT MASTER CARD LANGUAGE
========================================================= */

.services-overview-card {
  position: relative;

  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: clamp(275px, 34vh, 330px);

  padding: clamp(1.25rem, 2vw, 1.6rem);

  overflow: hidden;

  /* Flat + quiet at rest */
  border: 1px solid rgba(185, 147, 82, 0.1);

  border-radius: var(--radius-card);

  background: rgba(255, 255, 255, 0.45);

  box-shadow: none;

  transition:
    transform var(--transition-medium),
    box-shadow var(--transition-medium),
    border-color var(--transition-medium),
    background var(--transition-medium);
}

.services-overview-card:hover {
  transform: translateY(-3px);

  border-color: rgba(185, 147, 82, 0.38);

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(252, 250, 246, 0.82) 58%,
    rgba(185, 147, 82, 0.055) 100%
  );

  box-shadow: 0 10px 24px rgba(11, 34, 57, 0.055);
}

/* =========================================================
   SERVICES OVERVIEW — ICON
========================================================= */

.services-card-icon {
  display: grid;
  place-items: center;

  width: 82px;
  height: 82px;

  margin-bottom: 1rem;

  border: 1px solid rgba(185, 147, 82, 0.28);

  border-radius: 50%;

  background-color: rgba(252, 252, 252, 0.9);

  box-shadow: none;

  transition:
    border-color var(--transition-medium),
    background-color var(--transition-medium);
}

.services-overview-card:hover .services-card-icon {
  border-color: rgba(185, 147, 82, 0.42);

  background-color: rgba(255, 255, 255, 0.82);
}

.services-card-icon img {
  width: 66px;
  height: 66px;

  object-fit: contain;
}

/* =========================================================
   CARD HEADING
========================================================= */

.services-overview-card h2 {
  margin: 0;

  color: var(--color-navy);

  font-size: clamp(1.35rem, 1.8vw, 1.75rem);
  font-weight: 600;
  line-height: 1.15;

  letter-spacing: -0.02em;
}

/* =========================================================
   GOLD RULE
========================================================= */

.services-card-rule {
  width: 28px;
  height: 1px;

  margin-top: 0.8rem;

  background-color: var(--color-gold);
}

/* =========================================================
   CARD COPY
========================================================= */

.services-overview-card > p {
  margin: 1rem 0 1.25rem;

  color: var(--color-navy);

  font-size: clamp(0.7rem, 0.8vw, 0.78rem);
  font-weight: 400;
  line-height: 1.75;
}

/* =========================================================
   LEARN MORE
========================================================= */

.services-card-link {
  display: inline-flex;
  align-items: center;

  width: fit-content;

  gap: 0.75rem;

  margin-top: auto;

  color: var(--color-gold);

  font-size: 0.76rem;
  font-weight: 500;

  transition: color var(--transition-fast);
}

.services-card-link span:last-child {
  font-size: 1rem;

  transition: transform var(--transition-fast);
}

.services-card-link:hover {
  color: var(--color-navy);
}

.services-card-link:hover span:last-child {
  transform: translateX(3px);
}

/* =========================================================
   SERVICES CARDS RESPONSIVE
========================================================= */

@media (max-width: 1000px) {
  .services-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .services-overview-card {
    min-height: 260px;
  }
}

@media (max-width: 600px) {
  .services-overview-card.reveal-pending {
    transition-delay: 0ms;
  }

  .services-overview {
    width: calc(100% - 1rem);

    padding: 0 var(--page-padding) 2.75rem;
  }

  .services-overview-grid {
    grid-template-columns: 1fr;

    gap: 0.9rem;
  }

  .services-overview-card {
    min-height: 245px;
  }

  .services-card-icon {
    width: 72px;
    height: 72px;
  }

  .services-card-icon img {
    width: 58px;
    height: 58px;
  }
}

/* =========================================================
   SERVICES PAGE — HOW WE HELP
   BATCH 3
========================================================= */

.services-detail {
  width: calc(100% - 2rem);

  margin-inline: auto;

  padding: clamp(2rem, 3.5vw, 3rem) var(--page-padding)
    clamp(1.75rem, 3vw, 2.5rem);

  background-color: var(--color-background);
}

/* =========================================================
   HOW WE HELP — INTRODUCTION
========================================================= */

.services-detail-intro {
  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(280px, 0.85fr);

  align-items: end;

  gap: clamp(3rem, 8vw, 8rem);

  margin-bottom: clamp(2.25rem, 3.5vw, 3.25rem);
}

.services-detail-eyebrow {
  margin: 0 0 0.9rem;

  color: var(--color-gold);

  font-size: 0.68rem;
  font-weight: 600;

  letter-spacing: 0.15em;

  text-transform: uppercase;
}

.services-detail-title {
  display: flex;
  flex-direction: column;

  margin: 0;

  color: var(--color-navy);

  font-size: clamp(2.4rem, 4.2vw, 4.3rem);
  font-weight: 600;

  line-height: 1.02;
  letter-spacing: -0.035em;
}

.services-detail-title .gold-text {
  color: var(--color-gold);
}

.services-detail-intro-copy {
  position: relative;

  padding-left: 1.5rem;

  border-left: 1px solid rgba(185, 147, 82, 0.55);
}

.services-detail-intro-copy p {
  width: min(100%, 430px);

  margin: 0;

  color: var(--color-navy);

  font-size: clamp(0.78rem, 0.95vw, 0.9rem);
  font-weight: 400;

  line-height: 1.8;
}

/* =========================================================
   DETAILED SERVICE GRID
========================================================= */

.services-detail-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  border-top: 1px solid rgba(11, 34, 57, 0.035);

  border-bottom: 1px solid rgba(11, 34, 57, 0.035);
}

/* =========================================================
   INDIVIDUAL SERVICE COLUMN
========================================================= */

.service-detail-column {
  position: relative;

  display: flex;
  flex-direction: column;

  min-width: 0;

  padding: clamp(2rem, 3vw, 2.75rem) clamp(1.25rem, 2vw, 2rem);

  scroll-margin-top: 110px;
}

.service-detail-column:not(:last-child) {
  border-right: 1px solid rgba(11, 34, 57, 0.035);
}

/* =========================================================
   SERVICE ICON
========================================================= */

.service-detail-icon {
  display: grid;
  place-items: center;

  width: 92px;
  height: 92px;

  margin-bottom: 1.25rem;
}

.service-detail-icon img {
  width: 84px;
  height: 84px;

  object-fit: contain;
}

/* =========================================================
   SERVICE CATEGORY
========================================================= */

.service-detail-label {
  margin: 0 0 0.7rem;

  color: var(--color-gold);

  font-size: 0.7rem;
  font-weight: 600;

  letter-spacing: 0.13em;

  text-transform: uppercase;
}

/* =========================================================
   SERVICE TAGLINE
========================================================= */

.service-detail-column h3 {
  min-height: 3.25rem;

  margin: 0;

  color: var(--color-navy);

  font-size: clamp(1rem, 1.3vw, 1.2rem);
  font-weight: 600;

  line-height: 1.4;
}

/* =========================================================
   GOLD RULE
========================================================= */

.service-detail-rule {
  width: 26px;
  height: 1px;

  margin: 1.15rem 0 1.3rem;

  background-color: var(--color-gold);
}

/* =========================================================
   SERVICE LIST
========================================================= */

.service-detail-column ul {
  display: flex;
  flex-direction: column;

  gap: 0.7rem;

  margin: 0 0 2rem;
  padding: 0;

  list-style: none;
}

.service-detail-column li {
  position: relative;

  padding-left: 1rem;

  color: var(--color-navy);

  font-size: clamp(0.7rem, 0.8vw, 0.78rem);
  font-weight: 400;

  line-height: 1.55;
}

.service-detail-column li::before {
  content: "";

  position: absolute;

  top: 0.62em;
  left: 0;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  background-color: var(--color-gold);
}

/* =========================================================
   FIND OUT MORE
========================================================= */

.service-detail-link {
  display: inline-flex;
  align-items: center;

  width: fit-content;

  gap: 0.75rem;

  margin-top: auto;

  color: var(--color-gold);

  font-size: 0.75rem;
  font-weight: 500;

  transition: color var(--transition-fast);
}

.service-detail-link span:last-child {
  font-size: 1rem;

  transition: transform var(--transition-fast);
}

.service-detail-link:hover {
  color: var(--color-navy);
}

.service-detail-link:hover span:last-child {
  transform: translateX(3px);
}

/* =========================================================
   SERVICES DETAIL — RESPONSIVE
========================================================= */

@media (max-width: 1000px) {
  .services-detail-intro {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(250px, 0.75fr);

    gap: 3rem;
  }

  .services-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-detail-column {
    border-bottom: 1px solid rgba(11, 34, 57, 0.035);
  }

  .service-detail-column:nth-child(2) {
    border-right: none;
  }

  .service-detail-column:nth-child(3),
  .service-detail-column:nth-child(4) {
    border-bottom: none;
  }
}

@media (max-width: 700px) {
  .services-overview-card.reveal-pending {
    transition-delay: 0ms;
  }

  .services-detail {
    width: calc(100% - 1rem);

    padding: 3.25rem var(--page-padding) 3.5rem;
  }

  .services-detail-intro {
    grid-template-columns: 1fr;

    align-items: start;

    gap: 1.75rem;

    margin-bottom: 2.75rem;
  }

  .services-detail-intro-copy {
    padding-left: 1rem;
  }

  .services-detail-title {
    font-size: clamp(2.2rem, 10vw, 3.2rem);
  }

  .services-detail-grid {
    grid-template-columns: 1fr;
  }

  .service-detail-column {
    min-height: auto;

    padding: 2rem 0.75rem;

    border-right: none !important;

    border-bottom: 1px solid rgba(11, 34, 57, 0.035) !important;
  }

  .service-detail-column:last-child {
    border-bottom: none !important;
  }

  .service-detail-column h3 {
    min-height: 0;
  }

  .service-detail-icon {
    width: 82px;
    height: 82px;
  }

  .service-detail-icon img {
    width: 76px;
    height: 76px;
  }
}

/* =========================================================
   SERVICES — FLIP CARD PROTOTYPE
   ACCOUNTING
========================================================= */

/* =========================================================
   FLIP CARD — OUTER COLUMN
========================================================= */

.service-detail-column--flip {
  display: block;

  padding: 0;

  perspective: 1400px;
}

/* =========================================================
   FLIP SHELL
   Responsible for active lift + shadow
========================================================= */

.service-flip-shell {
  width: 100%;
  height: 100%;

  border-radius: var(--radius-card);

  transition:
    transform var(--transition-medium),
    box-shadow var(--transition-medium);
}

/* Active card receives attention — not the resting card */

.service-detail-column--flip.is-flipped .service-flip-shell {
  transform: none;

  box-shadow: 0 10px 20px -8px rgba(11, 34, 57, 0.18);
}

/* Keep the active card above neighbouring columns */

.service-detail-column--flip.is-flipped {
  position: relative;
  z-index: 3;
}

/* =========================================================
   ACTIVE FLIP — REMOVE GRID SEPARATOR
========================================================= */

.service-detail-column--flip.is-flipped {
  border-right-color: transparent;
}

/*
    If the active card is not the first column,
    also remove the separator belonging to the
    column immediately before it.
*/

.service-detail-column:has(+ .service-detail-column--flip.is-flipped) {
  border-right-color: transparent;
}

/* =========================================================
   INNER ROTATION
========================================================= */

.service-flip-inner {
  display: grid;

  width: 100%;
  height: 100%;

  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;

  transition: transform var(--transition-medium);
}

.service-detail-column--flip.is-flipped .service-flip-inner {
  transform: rotateY(180deg);
}

/* =========================================================
   BOTH FACES
========================================================= */

.service-detail-face {
  grid-area: 1 / 1;

  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 100%;

  padding: clamp(2rem, 3vw, 2.75rem) clamp(1.25rem, 2vw, 2rem);

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* =========================================================
   FRONT
   Keep existing Services treatment
========================================================= */

.service-detail-front {
  position: relative;

  z-index: 2;

  background-color: var(--color-background);

  transform: rotateY(0deg);
}

/* =========================================================
   BACK — ACTIVE INFORMATION STATE
========================================================= */

.service-detail-back {
  position: relative;

  z-index: 1;

  border-radius: var(--radius-card);

  color: var(--color-white);

  background-color: var(--color-navy);

  transform: rotateY(180deg);
}

/* =========================================================
   BACK — EYEBROW
========================================================= */

.service-detail-back-eyebrow {
  margin: 0 0 0.75rem;

  color: var(--color-gold);

  font-size: 0.68rem;
  font-weight: 600;

  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* =========================================================
   BACK — HEADING
========================================================= */

.service-detail-back h3 {
  min-height: 0;

  margin: 0;

  color: var(--color-white);

  font-size: clamp(1.05rem, 1.45vw, 1.35rem);

  font-weight: 600;

  line-height: 1.35;
}

/* =========================================================
   BACK — COPY
========================================================= */

.service-detail-back-copy {
  display: flex;
  flex-direction: column;

  gap: 1rem;

  margin-bottom: 1.75rem;
}

.service-detail-back-copy p {
  margin: 0;

  color: rgba(255, 255, 255, 0.84);

  font-size: clamp(0.7rem, 0.82vw, 0.8rem);

  font-weight: 400;

  line-height: 1.7;
}

/* =========================================================
   FRONT FLIP TRIGGER
   Make button visually identical to existing link
========================================================= */

.service-flip-trigger {
  appearance: none;
  -webkit-appearance: none;

  padding: 0;

  border: 0;

  font-family: inherit;

  background: transparent;

  cursor: pointer;
}

/* =========================================================
   BACK BUTTON
========================================================= */

.service-flip-back {
  display: inline-flex;
  align-items: center;

  width: fit-content;

  gap: 0.65rem;

  margin-top: auto;
  padding: 0;

  border: 0;

  color: var(--color-gold);

  background: transparent;

  font-family: inherit;

  font-size: 0.75rem;
  font-weight: 500;

  cursor: pointer;

  transition: color var(--transition-fast);
}

.service-flip-back span:first-child {
  font-size: 1rem;

  transition: transform var(--transition-fast);
}

.service-flip-back:hover {
  color: var(--color-white);
}

.service-flip-back:hover span:first-child {
  transform: translateX(-3px);
}

/* =========================================================
   ACCESSIBLE KEYBOARD FOCUS
========================================================= */

.service-flip-trigger:focus-visible,
.service-flip-back:focus-visible {
  outline: 2px solid var(--color-gold);

  outline-offset: 4px;

  border-radius: 2px;
}

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

@media (max-width: 700px) {
  .services-overview-card.reveal-pending {
    transition-delay: 0ms;
  }

  .service-detail-column--flip .service-detail-face {
    padding: 2rem 0.75rem;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .service-flip-shell,
  .service-flip-inner {
    transition: none;
  }
}

/* =========================================================
   SERVICES PAGE — CLOSING CTA
   BATCH 4
========================================================= */

.services-closing {
  width: calc(100% - 2rem);
  margin-inline: auto;

  padding: clamp(0.5rem, 1vw, 0.9rem) var(--page-padding)
    clamp(1.25rem, 2vw, 1.75rem);

  background-color: var(--color-background);
}

.services-closing-inner {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto
    auto;

  align-items: center;

  gap: clamp(2rem, 4vw, 4rem);

  width: 100%;

  padding: clamp(1.6rem, 2.8vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem);

  border-top: 1px solid rgba(185, 147, 82, 0.42);
}

/* =========================================================
   CTA — MESSAGE
========================================================= */

.services-closing-message {
  display: flex;
  align-items: center;

  gap: clamp(1.25rem, 2.5vw, 2rem);

  min-width: 0;
}

.services-closing-icon {
  flex: 0 0 auto;

  display: grid;
  place-items: center;

  width: 72px;
  height: 72px;

  color: var(--color-gold);
}

.services-closing-icon svg {
  width: 62px;
  height: 62px;
}

.services-closing-copy h2 {
  margin: 0 0 0.55rem;

  color: var(--color-navy);

  font-size: clamp(1.35rem, 2vw, 1.85rem);
  font-weight: 600;

  line-height: 1.2;
  letter-spacing: -0.025em;
}

.services-closing-copy p {
  max-width: 520px;

  margin: 0;

  color: var(--color-navy);

  font-size: clamp(0.74rem, 0.85vw, 0.82rem);
  font-weight: 400;

  line-height: 1.7;
}

/* =========================================================
   CTA — DIVIDER
========================================================= */

.services-closing-divider {
  width: 1px;
  height: 58px;

  background-color: rgba(185, 147, 82, 0.42);
}

/* =========================================================
   CTA — BUTTON
========================================================= */

.services-closing-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.services-closing-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 0.85rem;

  min-width: 150px;

  padding: 0.85rem 1.35rem;

  border: 1px solid rgba(185, 147, 82, 0.72);

  color: var(--color-navy);

  font-size: 0.76rem;
  font-weight: 500;

  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.services-closing-button span:last-child {
  color: var(--color-gold);

  font-size: 1rem;

  transition: transform var(--transition-fast);
}

.services-closing-button:hover {
  color: #ffffff;

  border-color: var(--color-navy);

  background-color: var(--color-navy);

  transform: translateY(-1px);
}

.services-closing-button:hover span:last-child {
  color: var(--color-gold);

  transform: translateX(3px);
}

/* =========================================================
   SERVICES CLOSING — RESPONSIVE
========================================================= */

@media (max-width: 800px) {
  .services-closing-inner {
    grid-template-columns:
      minmax(0, 1fr)
      auto;

    gap: 1.75rem;
  }

  .services-closing-divider {
    display: none;
  }

  .services-closing-icon {
    width: 64px;
    height: 64px;
  }

  .services-closing-icon svg {
    width: 56px;
    height: 56px;
  }
}

@media (max-width: 600px) {
  .services-overview-card.reveal-pending {
    transition-delay: 0ms;
  }

  .services-closing {
    width: calc(100% - 1rem);

    padding: 1.25rem var(--page-padding) 2rem;
  }

  .services-closing-inner {
    grid-template-columns: 1fr;

    align-items: start;

    gap: 1.5rem;

    padding: 1.75rem 0.75rem;
  }

  .services-closing-message {
    align-items: flex-start;

    gap: 1rem;
  }

  .services-closing-icon {
    width: 56px;
    height: 56px;
  }

  .services-closing-icon svg {
    width: 50px;
    height: 50px;
  }

  .services-closing-action {
    justify-content: flex-start;

    padding-left: 72px;
  }

  .services-closing-button {
    min-width: 145px;
  }
}

/* =========================================================
   INSIGHTS PAGE
========================================================= */

.insights-page {
  width: 100%;
  min-height: 100dvh;

  background-color: var(--color-background);
}

/* =========================================================
   INSIGHTS — HERO
========================================================= */

.insights-hero {
  position: relative;

  display: flex;
  align-items: flex-start;

  width: calc(100% - 2rem);

  min-height: clamp(390px, 46vh, 455px);

  margin-inline: auto;

  padding-top: clamp(2rem, 3vw, 2.75rem);

  overflow: hidden;

  background-color: var(--color-background);
}

/* =========================================================
   INSIGHTS HERO — VISUAL
========================================================= */

.insights-hero-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.insights-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 72%;
}

/* =========================================================
   INSIGHTS HERO — CONTENT
========================================================= */

.insights-hero-content {
  position: relative;

  z-index: 3;

  width: min(100%, 590px);

  padding-left: var(--page-padding);

  transform: none;
}

.insights-hero-eyebrow {
  margin: 0 0 1rem;

  color: var(--color-gold);

  font-size: 0.68rem;
  font-weight: 600;

  letter-spacing: 0.15em;

  text-transform: uppercase;
}

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

.insights-hero-title {
  display: flex;
  flex-direction: column;

  margin: 0;

  color: var(--color-navy);

  font-size: clamp(2.15rem, 3.25vw, 3.35rem);
  font-weight: 500;

  line-height: 1.04;

  letter-spacing: -0.035em;
}

.insights-hero-title .gold-text {
  color: var(--color-gold);
}

/* =========================================================
   GOLD RULE
========================================================= */

.insights-hero-rule {
  width: 38px;
  height: 1px;

  margin-top: 1.25rem;

  background-color: var(--color-gold);
}

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

.insights-hero-description {
  width: min(100%, 430px);

  margin: 1.2rem 0 0;

  color: var(--color-navy);

  font-size: clamp(0.78rem, 0.95vw, 0.9rem);
  font-weight: 400;

  line-height: 1.8;
}

/* =========================================================
   INSIGHTS HERO — RIGHT ACCENT
========================================================= */

.insights-hero-accent {
  position: absolute;

  z-index: 4;

  right: 1.25rem;
  bottom: 5%;

  display: flex;
  justify-content: center;

  width: 1px;
  height: 92px;

  background-color: rgba(185, 147, 82, 0.58);
}

.insights-hero-accent span {
  position: absolute;

  bottom: -3px;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background-color: var(--color-gold);
}

/* =========================================================
   INSIGHTS HERO — COMPACT LANDSCAPE / TABLET
========================================================= */

@media (min-width: 769px) and (max-width: 1024px) {
  .insights-hero {
    min-height: clamp(390px, 52vh, 440px);
  }

  .insights-hero-content {
    width: min(100%, 500px);
  }

  .insights-hero-title {
    font-size: clamp(2.2rem, 4.8vw, 3rem);
  }

  .insights-hero-description {
    width: min(100%, 380px);
  }
}

/* =========================================================
   INSIGHTS HERO — SHORT LANDSCAPE
========================================================= */

@media (max-width: 768px) and (orientation: landscape) {
  .insights-hero-content {
    padding-top: 1.75rem;
    padding-bottom: 1.5rem;
  }

  .insights-hero-title {
    font-size: clamp(2.15rem, 5.5vw, 2.6rem);
  }

  .insights-hero-description {
    margin-top: 1rem;
    line-height: 1.65;
  }

  .insights-hero-visual {
    height: clamp(190px, 32vw, 245px);
  }
}

/* =========================================================
   INSIGHTS HERO — MOBILE / STACKED
========================================================= */

@media (max-width: 768px) {
  .insights-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    width: calc(100% - 1rem);
    min-height: auto;

    padding-top: 0;

    overflow: hidden;
  }

  .insights-hero-content {
    order: 1;

    width: 100%;

    padding: 2.5rem var(--page-padding) 2rem;

    transform: none;
  }

  .insights-hero-title {
    font-size: clamp(2.25rem, 10vw, 3.15rem);
    line-height: 1.05;
  }

  .insights-hero-description {
    width: min(100%, 410px);
  }

  .insights-hero-visual {
    position: relative;

    order: 2;

    inset: auto;

    width: 100%;
    height: clamp(230px, 56vw, 330px);
  }

  .insights-hero-image {
    object-position: 38% 66%;
  }

  .insights-hero-accent {
    display: none;
  }
}

/* =========================================================
   INSIGHTS — FEATURED INSIGHT
========================================================= */

.featured-insight {
  width: calc(100% - 2rem);
  margin-inline: auto;

  padding: clamp(1rem, 1.8vw, 1.4rem) 0 clamp(1.5rem, 2.5vw, 2rem);

  background-color: var(--color-background);
}

.featured-insight-eyebrow {
  margin: 0 0 0.8rem;

  padding-left: var(--page-padding);

  color: var(--color-gold);

  font-size: 0.68rem;
  font-weight: 600;

  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* =========================================================
   FEATURED CARD
========================================================= */

.featured-insight-card {
  display: grid;
  width: 100%;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(0, 0.92fr);

  gap: clamp(1.6rem, 3vw, 2.5rem);

  align-items: stretch;

  padding: clamp(0.75rem, 1.2vw, 1rem);

  border: 1px solid rgba(11, 34, 57, 0.045);

  border-radius: 0;

  background: rgba(255, 255, 255, 0.78);

  box-shadow: none;
}

/* =========================================================
   FEATURED IMAGE
========================================================= */

.featured-insight-image-wrap {
  display: block;

  height: clamp(220px, 22vw, 265px);
  min-height: 0;

  overflow: hidden;

  border-radius: 0;
}

.featured-insight-image {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center 72%;

  border-radius: 0.15rem;

  transition: transform var(--transition-medium);
}

.featured-insight-card:hover .featured-insight-image {
  transform: scale(1.015);
}

/* =========================================================
   FEATURED CONTENT
========================================================= */

.featured-insight-content {
  display: flex;
  flex-direction: column;

  justify-content: flex-start;

  min-width: 0;

  padding: 0.35rem clamp(0.25rem, 0.8vw, 0.6rem);
}

.featured-insight-category {
  margin: 0 0 0.7rem;

  color: var(--color-gold);

  font-size: 0.68rem;
  font-weight: 600;

  letter-spacing: 0.13em;

  text-transform: uppercase;
}

.featured-insight-content h2 {
  max-width: 520px;

  margin: 0;

  color: var(--color-navy);

  font-size: clamp(1.65rem, 2.7vw, 2.45rem);
  font-weight: 500;

  line-height: 1.18;
  letter-spacing: -0.025em;
}

.featured-insight-rule {
  width: 30px;
  height: 1px;

  margin: 1rem 0 1.1rem;

  background-color: var(--color-gold);
}

.featured-insight-description {
  max-width: 520px;

  margin: 0;

  color: var(--color-navy);

  font-size: clamp(0.75rem, 0.9vw, 0.85rem);
  font-weight: 400;

  line-height: 1.75;
}

/* =========================================================
   FEATURED META + READ MORE
========================================================= */

.featured-insight-footer {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 1.5rem;

  margin-top: 1.5rem;
  padding-top: 0;
}

.featured-insight-meta {
  display: flex;
  align-items: center;

  gap: 0.9rem;

  color: var(--color-navy);

  font-size: 0.68rem;
  font-weight: 400;
}

.featured-insight-meta span {
  display: inline-flex;
  align-items: center;

  gap: 0.45rem;
}

.featured-insight-meta svg {
  width: 15px;
  height: 15px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

.featured-insight-meta .meta-divider {
  width: 1px;
  height: 13px;

  background-color: rgba(11, 34, 57, 0.18);
}

.featured-insight-link {
  display: inline-flex;
  align-items: center;

  gap: 0.75rem;

  color: var(--color-gold);

  font-size: 0.74rem;
  font-weight: 500;

  white-space: nowrap;

  transition: color var(--transition-fast);
}

.featured-insight-link:hover {
  color: var(--color-navy);
}

.featured-insight-link span:last-child {
  font-size: 1rem;

  transition: transform var(--transition-fast);
}

.featured-insight-link:hover span:last-child {
  transform: translateX(3px);
}

@media (max-width: 768px) {
  .featured-insight-card {
    grid-template-columns: 1fr;
  }

  .featured-insight-image-wrap {
    min-height: 300px;
  }

  .featured-insight-content {
    padding: 0.5rem 0.25rem;
  }
}

@media (max-width: 600px) {
  .featured-insight-footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    gap: 0.75rem;

    margin-top: 1.25rem;
    padding-top: 0;
  }

  .featured-insight-meta {
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  .featured-insight-link {
    flex-shrink: 0;
  }
}

/* =========================================================
   INSIGHTS — CATEGORY CARDS
========================================================= */

.insights-categories {
  width: calc(100% - 2rem);
  margin-inline: auto;

  padding: 0 0 clamp(1.75rem, 3vw, 2.5rem);

  background-color: var(--color-background);
}

.insights-categories-grid {
  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: clamp(0.8rem, 1.2vw, 1rem);
}

/* =========================================================
   CATEGORY CARD
========================================================= */

.insight-category-card {
  position: relative;

  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 250px;

  padding: clamp(1.15rem, 1.8vw, 1.4rem);

  /* Flat + quiet at rest */
  border: 1px solid rgba(185, 147, 82, 0.1);

  border-radius: var(--radius-card);

  background: rgba(255, 255, 255, 0.45);

  box-shadow: none;

  transition:
    transform var(--transition-medium),
    box-shadow var(--transition-medium),
    border-color var(--transition-medium),
    background var(--transition-medium);
}

.insight-category-card:hover {
  transform: translateY(-3px);

  border-color: rgba(185, 147, 82, 0.38);

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(252, 250, 246, 0.82) 58%,
    rgba(185, 147, 82, 0.055) 100%
  );

  box-shadow: 0 10px 24px rgba(11, 34, 57, 0.055);
}

/* =========================================================
   CATEGORY ICON
========================================================= */

.insight-category-icon {
  display: grid;
  place-items: center;

  width: 76px;
  height: 76px;

  margin-bottom: 1.15rem;

  border: 1px solid rgba(185, 147, 82, 0.28);

  border-radius: 50%;

  color: var(--color-navy);

  background-color: rgba(252, 252, 252, 0.9);

  transition:
    border-color var(--transition-medium),
    background-color var(--transition-medium);
}

.insight-category-card:hover .insight-category-icon {
  border-color: rgba(185, 147, 82, 0.42);

  background-color: rgba(255, 255, 255, 0.82);
}

.insight-category-icon svg {
  width: 48px;
  height: 48px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   CATEGORY TITLE
========================================================= */

.insight-category-card h3 {
  margin: 0;

  color: var(--color-navy);

  font-size: clamp(1rem, 1.25vw, 1.2rem);
  font-weight: 500;

  line-height: 1.25;
  letter-spacing: -0.015em;
}

/* =========================================================
   GOLD RULE
========================================================= */

.insight-category-rule {
  width: 24px;
  height: 1px;

  margin: 0.75rem 0 0.9rem;

  background-color: var(--color-gold);
}

/* =========================================================
   CATEGORY COPY
========================================================= */

.insight-category-card p {
  margin: 0 0 1.3rem;

  color: var(--color-navy);

  font-size: clamp(0.68rem, 0.78vw, 0.76rem);
  font-weight: 400;

  line-height: 1.7;
}

/* =========================================================
   EXPLORE LINK
========================================================= */

.insight-category-link {
  display: inline-flex;
  align-items: center;

  width: fit-content;

  gap: 0.65rem;

  margin-top: auto;

  color: var(--color-gold);

  font-size: 0.72rem;
  font-weight: 500;

  transition: color var(--transition-fast);
}

.insight-category-link:hover {
  color: var(--color-navy);
}

.insight-category-link span:last-child {
  font-size: 1rem;

  transition: transform var(--transition-fast);
}

.insight-category-link:hover span:last-child {
  transform: translateX(3px);
}

@media (max-width: 1100px) {
  .insights-categories-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .insights-categories-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .insights-categories {
    width: calc(100% - 1rem);
  }

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

  .insight-category-card {
    min-height: 220px;
  }

  .insight-category-icon {
    width: 72px;
    height: 72px;
  }

  .insight-category-icon svg {
    width: 46px;
    height: 46px;
  }
}

/* =========================================================
   INSIGHTS — LATEST INSIGHTS
========================================================= */

.latest-insights {
  width: calc(100% - 2rem);
  margin-inline: auto;

  padding: clamp(1.5rem, 2.5vw, 2rem) 0 clamp(0.75rem, 1.5vw, 1.15rem);

  background-color: var(--color-background);
}

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

.latest-insights-header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 2rem;

  margin-bottom: 1rem;
}

.latest-insights-eyebrow {
  margin: 0;

  color: var(--color-gold);

  font-size: 0.68rem;
  font-weight: 600;

  letter-spacing: 0.15em;

  text-transform: uppercase;
}

.latest-insights-view-all {
  display: inline-flex;
  align-items: center;

  gap: 0.7rem;

  color: var(--color-gold);

  font-size: 0.72rem;
  font-weight: 500;

  transition: color var(--transition-fast);
}

.latest-insights-view-all span:last-child {
  font-size: 1rem;

  transition: transform var(--transition-fast);
}

.latest-insights-view-all:hover {
  color: var(--color-navy);
}

.latest-insights-view-all:hover span:last-child {
  transform: translateX(3px);
}

/* =========================================================
   GRID
========================================================= */

.latest-insights-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: clamp(0.9rem, 1.4vw, 1.2rem);
}

/* =========================================================
   ARTICLE CARD
========================================================= */

.latest-insight-card {
  min-width: 0;

  border: 1px solid rgba(185, 147, 82, 0.1);

  border-radius: var(--radius-card);

  overflow: hidden;

  background: rgba(255, 255, 255, 0.72);

  box-shadow: none;

  transition:
    transform var(--transition-medium),
    box-shadow var(--transition-medium);
}

.latest-insight-card:hover {
  transform: translateY(-2px);

  box-shadow: 0 11px 24px rgba(11, 34, 57, 0.055);
}

/* =========================================================
   IMAGE
========================================================= */

.latest-insight-image-wrap {
  display: block;

  height: clamp(150px, 15vw, 195px);

  overflow: hidden;
}

.latest-insight-image {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transition: transform var(--transition-medium);
}

.latest-insight-card:hover .latest-insight-image {
  transform: scale(1.02);
}

/* =========================================================
   CONTENT
========================================================= */

.latest-insight-content {
  padding: clamp(1rem, 1.4vw, 1.2rem) clamp(1rem, 1.3vw, 1.15rem)
    clamp(1.1rem, 1.5vw, 1.3rem);
}

.latest-insight-category {
  margin: 0 0 0.65rem;

  color: var(--color-gold);

  font-size: 0.64rem;
  font-weight: 600;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}

.latest-insight-content h3 {
  margin: 0;

  font-size: clamp(0.95rem, 1.2vw, 1.12rem);
  font-weight: 500;

  line-height: 1.4;
  letter-spacing: -0.015em;
}

.latest-insight-content h3 a {
  color: var(--color-navy);

  transition: color var(--transition-fast);
}

.latest-insight-content h3 a:hover {
  color: var(--color-gold);
}

/* =========================================================
   META
========================================================= */

.latest-insight-meta {
  display: flex;
  align-items: center;

  flex-wrap: wrap;

  gap: 0.55rem;

  margin-top: 1rem;

  color: rgba(11, 34, 57, 0.72);

  font-size: 0.64rem;
  font-weight: 400;
}

.latest-meta-dot {
  width: 3px;
  height: 3px;

  border-radius: 50%;

  background-color: rgba(185, 147, 82, 0.7);
}

@media (max-width: 1050px) {
  .latest-insights-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .latest-insight-image-wrap {
    height: clamp(180px, 25vw, 230px);
  }
}

@media (max-width: 600px) {
  .latest-insights {
    width: calc(100% - 1rem);
  }

  .latest-insights-header {
    align-items: flex-end;

    gap: 1rem;
  }

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

  .latest-insight-image-wrap {
    height: 220px;
  }

  .latest-insight-content {
    padding: 1.1rem 1rem 1.2rem;
  }
}

/* =========================================================
   INSIGHTS — TAX RESOURCES
   COMPACT PROFESSIONAL RESOURCE LIBRARY
========================================================= */

.insights-tax-resources {
  width: calc(100% - 2rem);

  margin-inline: auto;

  padding: clamp(1.75rem, 3vw, 2.5rem) var(--page-padding)
    clamp(2rem, 3.5vw, 2.75rem);

  border-top: 1px solid rgba(11, 34, 57, 0.07);

  background-color: var(--color-background);

  opacity: 0;

  transform: translate3d(0, 14px, 0);

  transition:
    opacity var(--motion-slow) var(--motion-ease),
    transform var(--motion-slow) var(--motion-ease);
}

.insights-tax-resources[hidden] {
  display: none;
}

.insights-tax-resources.is-visible {
  opacity: 1;

  transform: translate3d(0, 0, 0);
}

/* =========================================================
   TAX RESOURCES — HEADING
========================================================= */

.insights-tax-resources-heading {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, 0.7fr);

  align-items: end;

  gap: clamp(2rem, 5vw, 5rem);

  width: min(100%, 920px);

  margin-inline: auto;
  margin-bottom: 1.35rem;
}

.insights-tax-resources-eyebrow {
  margin: 0 0 0.5rem;

  color: var(--color-gold);

  font-size: 0.64rem;
  font-weight: 600;

  letter-spacing: 0.15em;

  text-transform: uppercase;
}

.insights-tax-resources-title {
  margin: 0;

  color: var(--color-navy);

  font-size: clamp(1.25rem, 2vw, 1.7rem);
  font-weight: 500;

  line-height: 1.25;
  letter-spacing: -0.02em;
}

.insights-tax-resources-intro {
  max-width: 400px;

  margin: 0;

  padding-left: 1rem;

  border-left: 1px solid rgba(185, 147, 82, 0.4);

  color: var(--color-muted);

  font-size: clamp(0.68rem, 0.78vw, 0.76rem);

  line-height: 1.7;
}

/* =========================================================
   TAX RESOURCES — LIBRARY
========================================================= */

.insights-tax-resources-grid {
  display: grid;

  grid-template-columns: 1fr;

  gap: 1rem;

  width: min(100%, 920px);

  margin-inline: auto;
}

/* =========================================================
   TAX RESOURCE CARD
========================================================= */

.insights-tax-resource-card {
  display: grid;

  grid-template-columns:
    104px
    minmax(0, 1fr);

  align-items: center;

  gap: clamp(1.25rem, 2.5vw, 2rem);

  min-width: 0;

  padding: 1rem clamp(1rem, 2vw, 1.4rem);

  border: 1px solid rgba(185, 147, 82, 0.1);

  border-radius: var(--radius-card);

  background: rgba(255, 255, 255, 0.45);

  box-shadow: none;

  transition:
    transform var(--transition-medium),
    box-shadow var(--transition-medium),
    border-color var(--transition-medium),
    background var(--transition-medium);
}

.insights-tax-resource-card:hover {
  transform: translateY(-2px);

  border-color: rgba(185, 147, 82, 0.32);

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(252, 250, 246, 0.78) 100%
  );

  box-shadow: 0 10px 24px rgba(11, 34, 57, 0.05);
}

/* =========================================================
   TAX RESOURCE — SMALL PUBLICATION THUMBNAIL
========================================================= */

.insights-tax-resource-cover-link {
  display: block;

  width: 104px;

  overflow: hidden;

  border: 1px solid rgba(185, 147, 82, 0.3);

  background-color: var(--color-white);

  box-shadow: 0 6px 14px rgba(11, 34, 57, 0.06);

  transition:
    transform var(--transition-medium),
    box-shadow var(--transition-medium);
}

.insights-tax-resource-cover {
  display: block;

  width: 100%;
  height: auto;

  transition: transform var(--transition-medium);
}

.insights-tax-resource-cover-link:hover {
  transform: translateY(-1px);

  box-shadow: 0 8px 16px rgba(11, 34, 57, 0.08);
}

.insights-tax-resource-cover-link:hover .insights-tax-resource-cover {
  transform: scale(1.008);
}

/* =========================================================
   TAX RESOURCE — CONTENT
========================================================= */

.insights-tax-resource-content {
  min-width: 0;
}

.insights-tax-resource-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 1rem;

  margin-bottom: 0.4rem;
}

.insights-tax-resource-type {
  margin: 0;

  color: var(--color-gold);

  font-size: 0.62rem;
  font-weight: 600;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}

.insights-tax-resource-edition {
  color: rgba(11, 34, 57, 0.58);

  font-size: 0.6rem;
  font-weight: 500;

  letter-spacing: 0.08em;
}

.insights-tax-resource-content h3 {
  margin: 0;

  color: var(--color-navy);

  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 500;

  line-height: 1.3;
  letter-spacing: -0.015em;
}

.insights-tax-resource-description {
  max-width: 610px;

  margin: 0.55rem 0 0;

  color: var(--color-muted);

  font-size: clamp(0.68rem, 0.78vw, 0.75rem);

  line-height: 1.65;
}

/* =========================================================
   TAX RESOURCE — META
========================================================= */

.insights-tax-resource-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 0.55rem;

  margin-top: 0.7rem;

  color: rgba(11, 34, 57, 0.58);

  font-size: 0.6rem;
}

.insights-tax-resource-meta > span[aria-hidden="true"] {
  width: 3px;
  height: 3px;

  border-radius: 50%;

  background-color: rgba(185, 147, 82, 0.7);
}

/* =========================================================
   TAX RESOURCE — ACTIONS
========================================================= */

.insights-tax-resource-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 1.1rem;

  margin-top: 0.85rem;
}

.insights-tax-resource-open,
.insights-tax-resource-download {
  display: inline-flex;
  align-items: center;

  width: fit-content;

  gap: 0.55rem;

  font-size: 0.66rem;
  font-weight: 500;

  transition:
    color var(--transition-fast),
    transform var(--transition-fast);
}

.insights-tax-resource-open {
  color: var(--color-navy);
}

.insights-tax-resource-open span:last-child,
.insights-tax-resource-download span:last-child {
  color: var(--color-gold);

  transition: transform var(--transition-fast);
}

.insights-tax-resource-open:hover {
  color: var(--color-gold);
}

.insights-tax-resource-download {
  color: var(--color-gold);
}

.insights-tax-resource-download:hover {
  color: var(--color-navy);
}

.insights-tax-resource-open:hover span:last-child {
  transform: translateX(3px);
}

.insights-tax-resource-download:hover span:last-child {
  transform: translateY(2px);
}

/* =========================================================
   TAX RESOURCES — SHARED CTA
========================================================= */

.insights-tax-resources-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 0.55rem;

  width: min(100%, 920px);

  margin: 0.9rem auto 0;
}

.insights-tax-resources-footer p {
  margin: 0;

  color: var(--color-muted);

  font-size: 0.62rem;
}

.insights-tax-resources-footer a {
  display: inline-flex;
  align-items: center;

  gap: 0.45rem;

  color: var(--color-navy);

  font-size: 0.64rem;
  font-weight: 600;

  transition: color var(--transition-fast);
}

.insights-tax-resources-footer a > span:last-child {
  color: var(--color-gold);

  transition: transform var(--transition-fast);
}

.insights-tax-resources-footer a:hover {
  color: var(--color-gold);
}

.insights-tax-resources-footer a:hover > span:last-child {
  transform: translateX(3px);
}

/* =========================================================
   TAX RESOURCES — TABLET
========================================================= */

@media (max-width: 850px) {
  .insights-tax-resources-heading {
    grid-template-columns: 1fr;

    align-items: start;

    gap: 1rem;
  }

  .insights-tax-resources-intro {
    max-width: 520px;
  }
}

/* =========================================================
   TAX RESOURCES — MOBILE
========================================================= */

@media (max-width: 600px) {
  .insights-tax-resources {
    width: calc(100% - 1rem);

    padding-right: var(--page-padding);
    padding-left: var(--page-padding);
  }

  .insights-tax-resource-card {
    grid-template-columns:
      78px
      minmax(0, 1fr);

    align-items: start;

    gap: 1rem;

    padding: 0.9rem;
  }

  .insights-tax-resource-cover-link {
    width: 78px;
  }

  .insights-tax-resource-header {
    align-items: flex-start;
  }

  .insights-tax-resource-description {
    font-size: 0.67rem;
  }

  .insights-tax-resource-meta {
    gap: 0.45rem;
  }

  .insights-tax-resources-footer {
    align-items: flex-end;
    flex-direction: column;

    gap: 0.25rem;
  }
}

/* =========================================================
   TAX RESOURCES — VERY SMALL MOBILE
========================================================= */

@media (max-width: 400px) {
  .insights-tax-resource-card {
    grid-template-columns: 64px minmax(0, 1fr);

    gap: 0.8rem;
  }

  .insights-tax-resource-cover-link {
    width: 64px;
  }

  .insights-tax-resource-edition {
    display: none;
  }
}

/* =========================================================
   TAX RESOURCES — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .insights-tax-resources,
  .insights-tax-resource-card,
  .insights-tax-resource-cover-link,
  .insights-tax-resource-cover {
    transition: none;
  }
}

/* =========================================================
   INSIGHTS — CONTRIBUTION CTA
========================================================= */

.insights-contribution {
  width: calc(100% - 2rem);
  margin-inline: auto;

  padding: clamp(0.5rem, 1vw, 0.8rem) 0 clamp(2rem, 3.5vw, 2.75rem);

  background-color: var(--color-background);
}

.insights-contribution-inner {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    1px
    minmax(0, 0.9fr);

  align-items: center;

  gap: clamp(2rem, 4vw, 4rem);

  padding: clamp(1.6rem, 2.7vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem);

  border: 1px solid rgba(185, 147, 82, 0.1);

  border-radius: var(--radius-card);

  background: rgba(255, 255, 255, 0.72);

  box-shadow: none;
}

/* =========================================================
   INTRO
========================================================= */

.insights-contribution-intro {
  display: flex;
  align-items: center;

  gap: clamp(1.25rem, 2vw, 1.75rem);
}

/* =========================================================
   QUILL ICON
========================================================= */

.insights-contribution-icon {
  display: grid;
  place-items: center;

  flex: 0 0 auto;

  width: 82px;
  height: 82px;

  border: 1px solid rgba(185, 147, 82, 0.22);

  border-radius: 50%;

  color: var(--color-gold);
}

.insights-contribution-icon svg {
  width: 54px;
  height: 54px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.5;

  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   TITLE
========================================================= */

.insights-contribution-title {
  margin: 0;

  color: var(--color-navy);

  font-size: clamp(1.45rem, 2.25vw, 2.05rem);
  font-weight: 500;

  line-height: 1.18;
  letter-spacing: -0.025em;
}

.insights-contribution-title span {
  display: block;
}

/* =========================================================
   DIVIDER
========================================================= */

.insights-contribution-divider {
  width: 1px;
  height: 82px;

  background-color: rgba(185, 147, 82, 0.5);
}

/* =========================================================
   COPY + CTA
========================================================= */

.insights-contribution-content {
  display: flex;
  flex-direction: column;

  align-items: flex-start;

  width: 100%;
  height: 100%;

  gap: 1.25rem;
}

.insights-contribution-content p {
  max-width: 520px;

  margin: 0;

  color: var(--color-navy);

  font-size: clamp(0.74rem, 0.9vw, 0.84rem);
  font-weight: 400;

  line-height: 1.75;
}

/* =========================================================
   SUBMIT ARTICLE BUTTON
========================================================= */

.insights-contribution-button {
  display: inline-flex;
  align-items: center;

  align-self: flex-end;

  width: fit-content;

  gap: 0.8rem;

  margin-top: auto;

  padding: 0.7rem 1rem;

  border: 1px solid rgba(185, 147, 82, 0.65);

  border-radius: 0.25rem;

  color: var(--color-gold);

  font-size: 0.72rem;
  font-weight: 500;

  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.insights-contribution-button span:last-child {
  font-size: 1rem;

  transition: transform var(--transition-fast);
}

.insights-contribution-button:hover {
  color: var(--color-navy);

  border-color: rgba(11, 34, 57, 0.5);

  transform: translateY(-1px);
}

.insights-contribution-button:hover span:last-child {
  transform: translateX(3px);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {
  .insights-contribution-inner {
    grid-template-columns: 1fr;

    gap: 1.5rem;
  }

  .insights-contribution-divider {
    width: 48px;
    height: 1px;
  }

  .insights-contribution-content {
    height: auto;
  }
}

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

@media (max-width: 600px) {
  .insights-contribution {
    width: calc(100% - 1rem);

    padding: 1.25rem 0 2rem;
  }

  .insights-contribution-inner {
    padding: 1.5rem 1.1rem;
  }

  .insights-contribution-intro {
    align-items: flex-start;

    gap: 1rem;
  }

  .insights-contribution-icon {
    width: 68px;
    height: 68px;
  }

  .insights-contribution-icon svg {
    width: 44px;
    height: 44px;
  }

  .insights-contribution-title {
    font-size: clamp(1.3rem, 6vw, 1.6rem);
  }

  .insights-contribution-button {
    align-self: flex-end;
  }
}

/* =========================================================
   CONTACT PAGE
========================================================= */

.contact-page {
  width: 100%;
  min-height: 100dvh;

  background-color: var(--color-background);
}

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

.contact-hero {
  position: relative;

  width: calc(100% - 2rem);
  min-height: clamp(620px, 78vh, 760px);

  margin-inline: auto;

  overflow: hidden;

  background-color: #f4ebe2;
}

/* =========================================================
   CONTACT HERO — VISUAL
========================================================= */

.contact-hero-visual {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;
}

.contact-hero-image {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;
}

/* =========================================================
   CONTACT HERO — LAYOUT
========================================================= */

.contact-hero-grid {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 560px);

  align-items: start;

  gap: clamp(2rem, 4.5vw, 5rem);

  width: 100%;
  min-height: inherit;

  padding: clamp(2rem, 3vw, 2.75rem) var(--page-padding);
}

/* =========================================================
   CONTACT HERO — COPY
========================================================= */

.contact-hero-content {
  position: relative;

  z-index: 3;

  width: min(100%, 470px);
}

/* EYEBROW */

.contact-hero-eyebrow {
  margin: 0 0 1rem;

  color: var(--color-gold);

  font-size: 0.68rem;
  font-weight: 600;

  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* TITLE */

.contact-hero-title {
  display: flex;
  flex-direction: column;

  margin: 0;

  color: var(--color-navy);

  font-size: clamp(2.4rem, 3.65vw, 3.75rem);
  font-weight: 500;

  line-height: 1.04;

  letter-spacing: -0.035em;
}

.contact-hero-title span {
  display: block;
}

.contact-hero-title .gold-text {
  color: var(--color-gold);
}

/* GOLD RULE */

.contact-hero-rule {
  width: 38px;
  height: 1px;

  margin-top: 1.4rem;

  background-color: var(--color-gold);
}

/* DESCRIPTION */

.contact-hero-description {
  width: min(100%, 410px);

  margin-top: 1.35rem;
}

.contact-hero-description p {
  margin: 0;

  color: var(--color-navy);

  font-size: clamp(0.78rem, 0.92vw, 0.88rem);
  font-weight: 400;

  line-height: 1.8;
}

.contact-hero-description p + p {
  margin-top: 1rem;
}

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

.contact-form-card {
  position: relative;

  z-index: 4;

  width: min(100%, 560px);

  justify-self: end;

  padding: clamp(1.25rem, 2vw, 1.75rem);

  border: 1px solid rgba(11, 34, 57, 0.08);
  border-radius: 0.9rem;

  background-color: rgba(255, 255, 255, 0.9);

  box-shadow: 0 18px 42px rgba(11, 34, 57, 0.08);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* =========================================================
   FORM HEADING
========================================================= */

.contact-form-heading h2 {
  margin: 0;

  color: var(--color-navy);

  font-size: clamp(1.3rem, 1.7vw, 1.65rem);
  font-weight: 500;

  line-height: 1.2;

  letter-spacing: -0.02em;
}

.contact-form-heading p {
  margin: 0.55rem 0 0;

  color: var(--color-muted);

  font-size: 0.72rem;
  line-height: 1.5;
}

.contact-form-heading p span {
  color: var(--color-gold);
}

/* =========================================================
   FORM GRID
========================================================= */

.contact-form {
  margin-top: 1.65rem;
}

.contact-form-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  column-gap: clamp(1rem, 2vw, 1.5rem);
  row-gap: 1.25rem;
}

.contact-field {
  min-width: 0;
}

.contact-field-full {
  grid-column: 1 / -1;
}

/* =========================================================
   LABELS
========================================================= */

.contact-field label {
  display: block;

  margin-bottom: 0.5rem;

  color: var(--color-navy);

  font-size: 0.72rem;
  font-weight: 500;

  line-height: 1.35;
}

.contact-field label > span[aria-hidden="true"] {
  color: var(--color-gold);
}

/* =========================================================
   INPUT WRAPPERS
========================================================= */

.contact-input-wrap,
.contact-select-wrap,
.contact-textarea-wrap {
  position: relative;

  width: 100%;
}

/* =========================================================
   INPUTS / SELECT / TEXTAREA
========================================================= */

.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;

  border: 1px solid rgba(11, 34, 57, 0.16);

  border-radius: 0.45rem;

  outline: none;

  color: var(--color-navy);

  background-color: rgba(255, 255, 255, 0.62);

  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.contact-field input,
.contact-field select {
  min-height: 48px;
}

/* Inputs carrying icons */

.contact-field input {
  padding: 0.65rem 0.9rem 0.65rem 2.75rem;

  font-size: 0.78rem;
}

/* Select */

.contact-field select {
  appearance: none;

  padding: 0.65rem 2.6rem 0.65rem 0.9rem;

  color: var(--color-navy);

  font-size: 0.78rem;

  cursor: pointer;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230b2239' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-position: right 0.9rem center;
}

/* Textarea */

.contact-field textarea {
  min-height: 120px;

  resize: vertical;

  padding: 0.9rem 0.9rem 0.9rem 2.75rem;

  font-size: 0.78rem;
  line-height: 1.6;
}

/* Focus */

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  border-color: rgba(185, 147, 82, 0.72);

  background-color: rgba(255, 255, 255, 0.92);

  box-shadow: 0 0 0 3px rgba(185, 147, 82, 0.08);
}

/* =========================================================
   FIELD ICONS
========================================================= */

.contact-field-icon {
  position: absolute;

  top: 50%;
  left: 0.9rem;

  width: 17px;
  height: 17px;

  fill: none;

  stroke: var(--color-navy);
  stroke-width: 1.35;

  stroke-linecap: round;
  stroke-linejoin: round;

  opacity: 0.72;

  transform: translateY(-50%);

  pointer-events: none;
}

.contact-message-icon {
  top: 1rem;

  transform: none;
}

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

.contact-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 1.5rem;

  margin-top: 1.5rem;
}

/* PRIVACY MESSAGE */

.contact-form-privacy {
  display: flex;
  align-items: center;

  gap: 0.75rem;
}

.contact-form-privacy svg {
  width: 25px;
  height: 25px;

  flex-shrink: 0;

  fill: none;

  stroke: var(--color-navy);
  stroke-width: 1.4;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-form-privacy p {
  margin: 0;

  color: var(--color-navy);

  font-size: 0.66rem;
  line-height: 1.45;
}

.contact-form-privacy p span {
  display: block;

  color: var(--color-muted);
}

/* =========================================================
   SUBMIT BUTTON
========================================================= */

.contact-submit {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;

  min-width: 180px;
  min-height: 52px;

  gap: 1.5rem;

  padding: 0.7rem 1.2rem;

  border: 0;
  border-radius: 0.45rem;

  color: var(--color-white);

  background-color: var(--color-navy);

  font-size: 0.78rem;
  font-weight: 500;

  cursor: pointer;

  transition:
    transform var(--transition-fast),
    background-color var(--transition-fast);
}

.contact-submit span:last-child {
  color: var(--color-gold);

  font-size: 1.15rem;

  transition: transform var(--transition-fast);
}

.contact-submit:hover {
  background-color: var(--color-navy-soft);

  transform: translateY(-1px);
}

.contact-submit:hover span:last-child {
  transform: translateX(3px);
}

/* =========================================================
   CONTACT HERO — TABLET
   769–1024
========================================================= */

@media (min-width: 769px) and (max-width: 1024px) {
  .contact-hero {
    min-height: clamp(600px, 80vh, 700px);
  }

  .contact-hero-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1.2fr);

    gap: 1.5rem;

    padding: clamp(2rem, 3vw, 2.75rem) var(--page-padding);
  }

  .contact-hero-content {
    width: min(100%, 360px);
  }

  .contact-hero-title {
    font-size: clamp(2.25rem, 4vw, 2.85rem);
  }

  .contact-hero-description {
    width: min(100%, 320px);
  }

  /*
        Keep the left-hand plant visible as the hero
        becomes narrower.
    */
  .contact-hero-image {
    object-position: left center;
  }

  .contact-form-card {
    padding: 1.5rem;
  }

  .contact-form-grid {
    column-gap: 1rem;
    row-gap: 1rem;
  }

  .contact-form-footer {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .contact-submit {
    min-width: 150px;
  }
}

/* =========================================================
   CONTACT HERO — MOBILE / STACKED
   INSIGHTS MASTER BREAKPOINT
========================================================= */

@media (max-width: 768px) {
  .contact-hero {
    position: relative;

    width: calc(100% - 1rem);
    min-height: auto;

    overflow: hidden;

    background-color: #f4ebe2;
  }

  /* =====================================================
       KEEP HERO ARTWORK AS THE FULL BACKGROUND
    ===================================================== */

  .contact-hero-visual {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
  }

  .contact-hero-image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
            Bias towards the plant instead of centre-cropping
            it out of the composition.
        */
    object-position: left center;
  }

  /* =====================================================
       STACK COPY + FORM ABOVE THE ARTWORK
    ===================================================== */

  .contact-hero-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns: 1fr;

    align-items: stretch;

    gap: 2rem;

    width: 100%;
    min-height: auto;

    padding: 2.5rem var(--page-padding) 2rem;
  }

  /* HERO COPY */

  .contact-hero-content {
    width: min(100%, 520px);
  }

  .contact-hero-title {
    font-size: clamp(2.25rem, 10vw, 3.15rem);
    line-height: 1.05;
  }

  .contact-hero-description {
    width: min(100%, 430px);
  }

  /* FORM */

  .contact-form-card {
    width: 100%;

    justify-self: stretch;

    margin: 0;

    padding: clamp(1.25rem, 4vw, 1.75rem);
  }

  .contact-form-footer {
    align-items: stretch;
  }
}

/* =========================================================
   CONTACT FORM — SMALL MOBILE
========================================================= */

@media (max-width: 560px) {
  .contact-form-grid {
    grid-template-columns: 1fr;
  }

  .contact-field-full {
    grid-column: auto;
  }

  .contact-form-footer {
    flex-direction: column;
  }

  .contact-submit {
    width: 100%;
  }
}

/* =========================================================
   CONTACT — VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {
  .contact-hero-content {
    padding-top: 2rem;
  }

  .contact-hero-title {
    font-size: 2.25rem;
  }

  .contact-form-card {
    padding: 1.1rem;
  }

  .contact-form-heading h2 {
    font-size: 1.2rem;
  }

  .contact-field input,
  .contact-field select {
    min-height: 46px;
  }
}

/* =========================================================
   CONTACT FORM — ADAPTIVE COMMUNICATION + VALIDATION
========================================================= */

/* =========================================================
   FORM HEADING — CONTEXT
========================================================= */

.contact-form-heading {
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

.contact-form-heading.is-switching {
  opacity: 0;

  transform: translate3d(0, 4px, 0);
}

.contact-form-heading .contact-form-context {
  max-width: 480px;
  min-height: calc(1.65em * 2);

  margin: 0.55rem 0 0;

  color: var(--color-navy);

  font-size: 0.74rem;
  line-height: 1.65;
}

.contact-form-required {
  margin: 0.45rem 0 0 !important;

  color: var(--color-muted) !important;

  font-size: 0.68rem !important;
}

.contact-form-required span {
  color: var(--color-gold);
}

/* =========================================================
   VALIDATION ERROR
========================================================= */

.contact-field-error {
  margin: 0.45rem 0 0;

  color: #934444;

  font-size: 0.66rem;
  font-weight: 500;

  line-height: 1.45;

  opacity: 1;

  transform: translate3d(0, 0, 0);

  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

.contact-field-error {
  min-height: 1.45em;

  margin: 0.45rem 0 0;

  color: #934444;

  font-size: 0.66rem;
  font-weight: 500;

  line-height: 1.45;

  opacity: 1;
  visibility: visible;

  transition:
    opacity var(--transition-fast),
    visibility var(--transition-fast);
}

.contact-field-error[hidden] {
  display: block;

  opacity: 0;
  visibility: hidden;
}

/* =========================================================
   INVALID FIELD
========================================================= */

.contact-field.is-invalid input,
.contact-field.is-invalid select,
.contact-field.is-invalid textarea {
  border-color: rgba(147, 68, 68, 0.7);

  background-color: rgba(255, 248, 248, 0.82);

  box-shadow: 0 0 0 3px rgba(147, 68, 68, 0.06);
}

.contact-field.is-invalid .contact-field-icon {
  stroke: #934444;
}

.contact-field.is-invalid input:focus,
.contact-field.is-invalid select:focus,
.contact-field.is-invalid textarea:focus {
  border-color: rgba(147, 68, 68, 0.82);

  box-shadow: 0 0 0 3px rgba(147, 68, 68, 0.09);
}

/* =========================================================
   FORM STATUS
   Reserved lane — no layout shift
========================================================= */

.contact-form-status {
  min-height: calc((1.55em * 2) + 1.5rem);

  margin: 1rem 0 0;

  padding: 0.75rem 0.9rem;

  border-left: 2px solid var(--color-gold);

  color: var(--color-navy);

  background-color: rgba(185, 147, 82, 0.06);

  font-size: 0.7rem;
  line-height: 1.55;

  opacity: 0;
  visibility: hidden;

  transform: translate3d(0, 4px, 0);

  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast),
    visibility 0s linear var(--transition-fast);
}

.contact-form-status.is-visible {
  opacity: 1;
  visibility: visible;

  transform: translate3d(0, 0, 0);

  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast),
    visibility 0s linear 0s;
}

/* =========================================================
   CONTACT DETAILS
========================================================= */

.contact-details-section {
  width: calc(100% - 2rem);

  margin-inline: auto;

  padding: clamp(2.5rem, 4vw, 4rem) 0 clamp(3rem, 5vw, 5rem);

  background-color: var(--color-background);
}

/* =========================================================
   CONTACT DETAILS — HEADING
========================================================= */

.contact-details-heading {
  width: min(100%, 760px);

  margin: 0 auto clamp(2rem, 3vw, 2.75rem);

  text-align: center;
}

.contact-details-eyebrow {
  margin: 0 0 0.7rem;

  color: var(--color-gold);

  font-size: 0.68rem;
  font-weight: 600;

  letter-spacing: 0.15em;

  text-transform: uppercase;
}

.contact-details-title {
  margin: 0;

  color: var(--color-navy);

  font-size: clamp(1.65rem, 2.4vw, 2.4rem);

  font-weight: 500;

  line-height: 1.18;

  letter-spacing: -0.025em;
}

/* =========================================================
   CONTACT DETAILS — GRID
========================================================= */

.contact-details-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: clamp(1rem, 1.6vw, 1.5rem);

  width: 100%;
}

/* =========================================================
   CONTACT DETAIL CARD
   INSIGHTS MASTER CARD LANGUAGE
========================================================= */

.contact-detail-card {
  position: relative;

  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 260px;

  padding: clamp(1.25rem, 2vw, 1.75rem);

  /* Flat + quiet at rest */
  border: 1px solid rgba(185, 147, 82, 0.1);

  border-radius: var(--radius-card);

  background: rgba(255, 255, 255, 0.45);

  box-shadow: none;

  transition:
    transform var(--transition-medium),
    box-shadow var(--transition-medium),
    border-color var(--transition-medium),
    background var(--transition-medium);
}

.contact-detail-card:hover {
  transform: translateY(-3px);

  border-color: rgba(185, 147, 82, 0.38);

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(252, 250, 246, 0.82) 58%,
    rgba(185, 147, 82, 0.055) 100%
  );

  box-shadow: 0 10px 24px rgba(11, 34, 57, 0.055);
}

/* =========================================================
   CONTACT DETAIL CARD — REVEALED HOVER
   Preserve universal Mambodla card lift
========================================================= */

.contact-detail-card[data-reveal].reveal-pending.is-visible:hover {
  transform: translateY(-3px);
}

/* =========================================================
   CONTACT DETAIL — ICON
========================================================= */

.contact-detail-icon {
  display: grid;

  place-items: center;

  width: 52px;
  height: 52px;

  margin-bottom: 1.15rem;

  border: 1px solid rgba(185, 147, 82, 0.28);

  border-radius: 50%;

  background-color: rgba(252, 252, 252, 0.9);

  box-shadow: none;

  transition:
    border-color var(--transition-medium),
    background-color var(--transition-medium);
}

.contact-detail-card:hover .contact-detail-icon {
  border-color: rgba(185, 147, 82, 0.42);

  background-color: rgba(255, 255, 255, 0.82);
}

.contact-detail-icon svg {
  width: 23px;
  height: 23px;

  fill: none;

  stroke: var(--color-navy);

  stroke-width: 1.45;

  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   CONTACT DETAIL — TITLE / RULE
========================================================= */

.contact-detail-card h3 {
  margin: 0;

  color: var(--color-navy);

  font-size: clamp(1rem, 1.3vw, 1.25rem);

  font-weight: 500;

  line-height: 1.25;
}

.contact-detail-rule {
  width: 28px;
  height: 1px;

  margin: 0.85rem 0 1rem;

  background-color: var(--color-gold);
}

/* =========================================================
   CONTACT DETAIL — BODY
========================================================= */

.contact-detail-body {
  display: flex;
  flex-direction: column;

  min-width: 0;

  color: var(--color-navy);

  font-size: clamp(0.72rem, 0.82vw, 0.82rem);

  line-height: 1.65;
}

.contact-detail-body p {
  margin: 0;
}

.contact-detail-label {
  color: var(--color-muted);

  font-size: 0.68rem;
  font-weight: 500;

  line-height: 1.4;
}

.contact-detail-body .contact-detail-label-spaced {
  margin-top: 0.9rem;
}

.contact-detail-link {
  width: fit-content;

  margin-top: 0.15rem;

  color: var(--color-navy);

  font-weight: 500;

  transition: color var(--transition-fast);
}

.contact-detail-link:hover {
  color: var(--color-gold);
}

.contact-detail-email {
  overflow-wrap: anywhere;
}

.contact-detail-body .contact-detail-secondary {
  margin-top: 0.75rem;

  color: var(--color-muted);
}

.contact-detail-body .contact-detail-emphasis {
  margin-top: 0.2rem;

  color: var(--color-navy);

  font-weight: 500;
}

/* =========================================================
   OFFICE ADDRESS
========================================================= */

.contact-office-address {
  margin: 0;

  color: var(--color-navy);

  font-style: normal;

  line-height: 1.7;
}

/* =========================================================
   VIEW ON MAP
========================================================= */

.contact-detail-action {
  display: inline-flex;

  align-items: center;

  width: fit-content;

  gap: 0.7rem;

  margin-top: 1rem;

  color: var(--color-gold);

  font-weight: 500;

  transition: color var(--transition-fast);
}

.contact-detail-action span:last-child {
  transition: transform var(--transition-fast);
}

.contact-detail-action:hover {
  color: var(--color-navy);
}

.contact-detail-action:hover span:last-child {
  transform: translateX(3px);
}

/* =========================================================
   CONTACT CONVERSATION CARD
========================================================= */

.contact-conversation-card {
  position: relative;

  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr)
    1px
    minmax(280px, 0.9fr);

  align-items: center;

  gap: clamp(1.5rem, 3vw, 3rem);

  width: 100%;

  margin-top: clamp(1.5rem, 2.5vw, 2.25rem);

  padding: clamp(1.5rem, 2.75vw, 2.4rem);

  overflow: hidden;

  /* INSIGHTS MASTER — FLAT AT REST */
  border: 1px solid rgba(185, 147, 82, 0.1);

  border-radius: var(--radius-card);

  background: linear-gradient(
    100deg,
    rgba(247, 243, 238, 0.92),
    rgba(252, 250, 247, 0.98)
  );

  box-shadow: none;
}

/* =========================================================
   CONVERSATION — PEOPLE ICON
========================================================= */

.contact-conversation-visual {
  display: grid;

  place-items: center;

  width: clamp(82px, 8vw, 112px);

  height: clamp(82px, 8vw, 112px);

  border: 1px solid rgba(185, 147, 82, 0.28);

  border-radius: 50%;

  background-color: rgba(252, 252, 252, 0.9);

  box-shadow: none;
}

.contact-conversation-visual svg {
  width: 62%;
  height: 62%;

  stroke: var(--color-navy);

  stroke-width: 1.6;

  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   CONVERSATION — COPY
========================================================= */

.contact-conversation-copy {
  min-width: 0;
}

.contact-conversation-copy h2 {
  margin: 0;

  color: var(--color-navy);

  font-size: clamp(1.3rem, 2vw, 2rem);

  font-weight: 500;

  line-height: 1.2;

  letter-spacing: -0.025em;
}

.contact-conversation-highlight {
  margin: 0.25rem 0 0;

  color: var(--color-gold);

  font-size: clamp(1.25rem, 2vw, 1.85rem);

  font-weight: 500;

  line-height: 1.2;
}

.contact-conversation-description {
  max-width: 470px;

  margin: 1rem 0 0;

  color: var(--color-navy);

  font-size: clamp(0.72rem, 0.82vw, 0.82rem);

  line-height: 1.7;
}

/* =========================================================
   CONVERSATION — DIVIDER
========================================================= */

.contact-conversation-divider {
  align-self: stretch;

  width: 1px;

  background-color: rgba(185, 147, 82, 0.48);
}

/* =========================================================
   CONVERSATION — DIRECT CONTACT
========================================================= */

.contact-conversation-direct {
  min-width: 0;
}

.contact-conversation-phone-row {
  display: flex;

  align-items: flex-start;

  gap: 1rem;
}

.contact-conversation-phone-icon {
  display: grid;

  place-items: center;

  width: 54px;
  height: 54px;

  flex-shrink: 0;

  border: 1px solid rgba(185, 147, 82, 0.28);

  border-radius: 50%;

  background-color: rgba(252, 252, 252, 0.9);

  box-shadow: none;
}

.contact-conversation-phone-icon svg {
  width: 25px;
  height: 25px;

  stroke: var(--color-navy);

  stroke-width: 1.45;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-conversation-phone-copy {
  min-width: 0;
}

.contact-conversation-person {
  margin: 0 0 0.55rem;

  color: var(--color-navy);

  font-size: clamp(0.72rem, 0.82vw, 0.82rem);

  font-weight: 500;

  line-height: 1.45;
}

/* =========================================================
   DIRECT NUMBERS
========================================================= */

.contact-conversation-numbers {
  display: flex;
  flex-direction: column;

  gap: 0.4rem;
}

.contact-conversation-numbers a {
  display: flex;

  align-items: baseline;

  gap: 0.65rem;

  width: fit-content;

  color: var(--color-gold);

  font-size: clamp(0.95rem, 1.45vw, 1.25rem);

  font-weight: 500;

  line-height: 1.25;

  transition: color var(--transition-fast);
}

.contact-conversation-numbers a span {
  min-width: 36px;

  color: var(--color-muted);

  font-size: 0.6rem;
  font-weight: 500;

  letter-spacing: 0.05em;

  text-transform: uppercase;
}

.contact-conversation-numbers a:hover {
  color: var(--color-navy);
}

/* =========================================================
   CONSULTATION BUTTON
========================================================= */

.contact-consultation-button {
  display: inline-flex;

  align-items: center;
  justify-content: space-between;

  width: min(100%, 260px);

  gap: 1.5rem;

  margin-top: 1.25rem;

  padding: 0.8rem 1rem;

  border: 1px solid rgba(185, 147, 82, 0.75);

  border-radius: 0.4rem;

  color: var(--color-gold);

  background-color: rgba(255, 255, 255, 0.34);

  font-size: 0.76rem;
  font-weight: 500;

  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    transform var(--transition-fast);
}

.contact-consultation-button span:last-child {
  font-size: 1rem;

  transition: transform var(--transition-fast);
}

.contact-consultation-button:hover {
  color: var(--color-white);

  border-color: var(--color-navy);

  background-color: var(--color-navy);

  transform: translateY(-1px);
}

.contact-consultation-button:hover span:last-child {
  transform: translateX(3px);
}

/* =========================================================
   CONTACT DETAILS — TABLET
========================================================= */

@media (max-width: 1024px) {
  .contact-details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-detail-card {
    min-height: 230px;
  }

  .contact-conversation-card {
    grid-template-columns:
      auto
      minmax(0, 1fr)
      1px
      minmax(250px, 0.9fr);

    gap: 1.5rem;
  }
}

/* =========================================================
   CONTACT DETAILS — MOBILE
========================================================= */

@media (max-width: 768px) {
  .contact-details-section {
    width: calc(100% - 1rem);

    padding: 2.75rem 0 3rem;
  }

  .contact-details-heading {
    margin-bottom: 2rem;
  }

  .contact-details-title {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }
}

/* =========================================================
   CONVERSATION CTA — COMPACT TABLET
========================================================= */

@media (max-width: 900px) {
  .contact-conversation-card {
    grid-template-columns:
      auto
      minmax(0, 1fr);

    gap: 1.5rem 1.25rem;

    padding: clamp(1.25rem, 4vw, 1.75rem);
  }

  .contact-conversation-divider {
    display: none;
  }

  .contact-conversation-direct {
    grid-column: 1 / -1;

    padding-top: 1.25rem;

    border-top: 1px solid rgba(185, 147, 82, 0.38);
  }
}

/* =========================================================
   CONTACT DETAILS — SMALL MOBILE
========================================================= */

@media (max-width: 560px) {
  .contact-details-grid {
    grid-template-columns: 1fr;
  }

  .contact-detail-card {
    min-height: auto;
  }

  .contact-conversation-card {
    grid-template-columns: 1fr;
  }

  .contact-conversation-visual {
    width: 72px;
    height: 72px;
  }

  .contact-conversation-direct {
    grid-column: 1;
  }

  .contact-consultation-button {
    width: 100%;
    max-width: none;
  }
}

/* =========================================================
   INSIGHTS — MOBILE REVEAL RHYTHM
========================================================= */

@media (max-width: 768px) {
  .insights-page-body .featured-insight-content.reveal-pending,
  .insights-page-body .insight-category-card.reveal-pending,
  .insights-page-body .latest-insight-card.reveal-pending {
    transition-delay: 0ms;
  }
}

/* =========================================================
   MAMBODLA — INSIGHT ARTICLE
   MASTER ARTICLE TEMPLATE
========================================================= */

.insight-article-page-body {
  background-color: var(--color-background);
}

.insight-article-page {
  width: 100%;
  min-height: 100dvh;

  background-color: var(--color-background);
}

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

.insight-article-hero {
  padding: clamp(2.5rem, 5vw, 4.75rem) 0 clamp(2.75rem, 5vw, 4.5rem);
}

/* =========================================================
   ARTICLE HERO — COPY
========================================================= */

.insight-article-hero-inner {
  width: min(calc(100% - (var(--page-padding) * 2)), 1040px);

  margin-inline: auto;
}

/* =========================================================
   BACK LINK
========================================================= */

.insight-article-back {
  display: inline-flex;
  align-items: center;

  gap: 0.65rem;

  margin-bottom: clamp(2rem, 3vw, 2.75rem);

  color: rgba(11, 34, 57, 0.72);

  font-size: 0.72rem;
  font-weight: 500;

  transition:
    color var(--transition-fast),
    transform var(--transition-fast);
}

.insight-article-back span:first-child {
  color: var(--color-gold);

  font-size: 1rem;
}

.insight-article-back:hover {
  color: var(--color-gold);

  transform: translateX(-2px);
}

/* =========================================================
   CATEGORY
========================================================= */

.insight-article-category {
  margin: 0 0 1rem;

  color: var(--color-gold);

  font-size: 0.7rem;
  font-weight: 600;

  letter-spacing: 0.15em;

  text-transform: uppercase;
}

/* =========================================================
   ARTICLE TITLE
========================================================= */

.insight-article-title {
  width: min(100%, 930px);

  margin: 0;

  color: var(--color-navy);

  font-size: clamp(2.45rem, 4.6vw, 4.4rem);

  font-weight: 500;

  line-height: 1.04;

  letter-spacing: -0.045em;
}

/* =========================================================
   STANDFIRST
========================================================= */

.insight-article-standfirst {
  width: min(100%, 820px);

  margin: clamp(1.4rem, 2.5vw, 2rem) 0 0;

  color: rgba(11, 34, 57, 0.82);

  font-size: clamp(0.9rem, 1.15vw, 1.08rem);

  font-weight: 400;

  line-height: 1.8;
}

/* =========================================================
   ARTICLE META
========================================================= */

.insight-article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 0.7rem;

  margin-top: clamp(1.5rem, 2.5vw, 2rem);

  color: rgba(11, 34, 57, 0.62);

  font-size: 0.68rem;
  font-weight: 400;
}

.insight-article-meta-dot {
  width: 3px;
  height: 3px;

  border-radius: 50%;

  background-color: rgba(185, 147, 82, 0.78);
}

/* =========================================================
   ARTICLE — VISUAL ENTRY IMAGE NAV
========================================================= */

.insight-article-image-container {
  position: relative;

  width: min(calc(100% - 2rem), 1240px);

  margin: clamp(2.5rem, 4vw, 3.75rem) auto 0;
}

.insight-article-hero-figure {
  position: relative;

  margin: 0;

  overflow: hidden;

  border-radius: var(--radius-card);

  background-color: rgba(11, 34, 57, 0.04);
}

.insight-article-hero-image {
  display: block;

  width: 100%;

  height: clamp(420px, 47vw, 650px);

  object-fit: cover;
  object-position: center;

  border-radius: inherit;
}

.insight-visual-entry-strip {
  display: flex;

  opacity: 0;
  visibility: hidden;

  transition:
    opacity var(--motion-standard) var(--motion-ease-soft),
    visibility 0s linear var(--motion-standard);

  position: absolute;

  top: 0;
  right: 0;
  left: 0;

  z-index: 3;

  align-items: center;
  justify-content: space-between;

  gap: clamp(2rem, 5vw, 5rem);

  padding: clamp(1rem, 1.6vw, 1.35rem) clamp(1.2rem, 2vw, 1.75rem);

  border-radius: var(--radius-card) var(--radius-card) 0 0;

  background: linear-gradient(
    180deg,
    rgba(11, 34, 57, 0.6) 0%,
    rgba(11, 34, 57, 0.24) 72%,
    rgba(11, 34, 57, 0) 100%
  );

  pointer-events: none;
}

/* =========================================================
   ARTICLE — PORTAL NAV VISIBLE STATE
========================================================= */

.insight-article-page-body.insight-portal-nav-visible
  .insight-visual-entry-strip {
  opacity: 1;
  visibility: visible;

  transition: none;
}

.insight-visual-entry-copy {
  min-width: 0;
}

.insight-visual-entry-category {
  margin: 0 0 0.4rem;

  color: var(--color-gold-light);

  font-size: 0.62rem;
  font-weight: 600;

  letter-spacing: 0.15em;

  text-transform: uppercase;
}

.insight-visual-entry-title {
  width: min(100%, 620px);

  margin: 0;

  color: var(--color-white);

  font-size: clamp(1rem, 1.65vw, 1.4rem);

  font-weight: 500;

  line-height: 1.2;

  letter-spacing: -0.02em;
}

@media (prefers-reduced-motion: reduce) {
  .insight-visual-entry-strip {
    transition: none;
  }
}

/* =========================================================
   READ FROM BEGINNING
========================================================= */

.insight-visual-entry-return {
  display: inline-flex;
  align-items: center;

  gap: 0.55rem;

  flex: 0 0 auto;

  color: var(--color-white);

  font-size: 0.68rem;
  font-weight: 500;

  white-space: nowrap;

  pointer-events: auto;

  transition:
    color var(--transition-fast),
    transform var(--transition-fast);
}

.insight-visual-entry-return span:first-child {
  color: var(--color-gold-light);

  font-size: 0.9rem;
}

.insight-visual-entry-return:hover {
  color: var(--color-gold-light);

  transform: translateY(-1px);
}

/* =========================================================
   ARTICLE BODY
========================================================= */

.insight-article-body {
  width: min(calc(100% - (var(--page-padding) * 2)), 880px);

  margin-inline: auto;

  padding-bottom: clamp(4rem, 8vw, 7rem);
}

/* =========================================================
   READING COPY
========================================================= */

.insight-article-copy {
  width: min(100%, 760px);

  margin-inline: auto;
}

.insight-article-copy p {
  margin: 0 0 1.35rem;

  color: rgba(11, 34, 57, 0.88);

  font-size: clamp(0.86rem, 0.95vw, 0.96rem);

  font-weight: 400;

  line-height: 1.9;
}

.insight-article-copy p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   OPENING PARAGRAPH
========================================================= */

.insight-article-opening {
  color: var(--color-navy) !important;

  font-size: clamp(1rem, 1.25vw, 1.14rem) !important;

  line-height: 1.85 !important;
}

/* =========================================================
   ARTICLE SECTIONS
========================================================= */

.insight-article-section {
  display: grid;

  grid-template-columns:
    46px
    minmax(0, 1fr);

  column-gap: clamp(1.25rem, 2vw, 1.8rem);

  row-gap: 1rem;

  width: min(100%, 820px);

  margin: clamp(4rem, 7vw, 6rem) auto 0;
}

/* =========================================================
   SECTION NUMBER
========================================================= */

.insight-article-section-number {
  grid-column: 1;
  grid-row: 1;

  margin: 0.35rem 0 0;

  color: var(--color-gold);

  font-size: 0.7rem;
  font-weight: 600;

  letter-spacing: 0.12em;
}

/* =========================================================
   SECTION HEADING
========================================================= */

.insight-article-section h2 {
  grid-column: 2;
  grid-row: 1;

  max-width: 690px;

  margin: 0;

  color: var(--color-navy);

  font-size: clamp(1.55rem, 2.4vw, 2.3rem);

  font-weight: 500;

  line-height: 1.2;

  letter-spacing: -0.03em;
}

/* =========================================================
   SECTION COPY
========================================================= */

.insight-article-section .insight-article-copy {
  grid-column: 2;
  grid-row: 2;

  width: 100%;

  margin-inline: 0;
}

/* =========================================================
   ARTICLE LIST
========================================================= */

.insight-article-list {
  display: grid;

  gap: 0.7rem;

  margin: 1.5rem 0 1.5rem;

  padding: 0;

  list-style: none;
}

.insight-article-list li {
  position: relative;

  padding-left: 1.5rem;

  color: rgba(11, 34, 57, 0.88);

  font-size: clamp(0.86rem, 0.95vw, 0.96rem);

  line-height: 1.75;
}

.insight-article-list li::before {
  content: "";

  position: absolute;

  top: 0.75em;
  left: 0;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background-color: var(--color-gold);
}

/* =========================================================
   KEY TAKEAWAY
========================================================= */

.insight-article-takeaway {
  width: min(100%, 760px);

  margin: clamp(4rem, 7vw, 6rem) auto;

  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.6rem, 3vw, 2.4rem);

  border-left: 2px solid var(--color-gold);

  background-color: rgba(185, 147, 82, 0.065);
}

.insight-article-takeaway-label {
  margin: 0 0 0.8rem;

  color: var(--color-gold);

  font-size: 0.66rem;
  font-weight: 600;

  letter-spacing: 0.15em;

  text-transform: uppercase;
}

.insight-article-takeaway-text {
  max-width: 650px;

  margin: 0;

  color: var(--color-navy);

  font-size: clamp(1.35rem, 2vw, 1.85rem);

  font-weight: 500;

  line-height: 1.4;

  letter-spacing: -0.025em;
}

/* =========================================================
   MAMBODLA PERSPECTIVE
========================================================= */

.insight-article-perspective {
  width: 100%;

  margin: clamp(5rem, 8vw, 7rem) auto 0;

  padding: clamp(2.5rem, 4.5vw, 4rem) clamp(2rem, 4vw, 3.5rem);

  border-radius: var(--radius-card);

  background-color: var(--color-navy);
}

.insight-article-perspective-eyebrow {
  margin: 0 0 1rem;

  color: var(--color-gold);

  font-size: 0.68rem;
  font-weight: 600;

  letter-spacing: 0.15em;

  text-transform: uppercase;
}

.insight-article-perspective h2 {
  width: min(100%, 650px);

  margin: 0;

  color: var(--color-white);

  font-size: clamp(1.75rem, 3vw, 2.7rem);

  font-weight: 500;

  line-height: 1.18;

  letter-spacing: -0.035em;
}

.insight-article-perspective > p:last-child {
  width: min(100%, 690px);

  margin: clamp(1.35rem, 2vw, 1.75rem) 0 0;

  color: rgba(255, 255, 255, 0.82);

  font-size: clamp(0.84rem, 0.95vw, 0.94rem);

  line-height: 1.85;
}

/* =========================================================
   BUSINESS ADVISORY CTA
========================================================= */

.insight-article-cta {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: end;

  gap: clamp(2rem, 4vw, 4rem);

  width: 100%;

  margin: clamp(2rem, 4vw, 3rem) auto 0;

  padding: clamp(2rem, 3.5vw, 3rem);

  border: 1px solid rgba(185, 147, 82, 0.2);

  border-radius: var(--radius-card);

  background-color: rgba(255, 255, 255, 0.72);
}

.insight-article-cta-copy {
  min-width: 0;
}

.insight-article-cta-eyebrow {
  margin: 0 0 0.9rem;

  color: var(--color-gold);

  font-size: 0.66rem;
  font-weight: 600;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}

.insight-article-cta h2 {
  width: min(100%, 560px);

  margin: 0;

  color: var(--color-navy);

  font-size: clamp(1.45rem, 2.3vw, 2.15rem);

  font-weight: 500;

  line-height: 1.22;

  letter-spacing: -0.03em;
}

.insight-article-cta-copy > p:last-child {
  width: min(100%, 620px);

  margin: 1rem 0 0;

  color: rgba(11, 34, 57, 0.74);

  font-size: 0.8rem;

  line-height: 1.75;
}

/* =========================================================
   CTA LINK
========================================================= */

.insight-article-cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 0.9rem;

  min-height: 46px;

  padding: 0.75rem 1rem;

  border-radius: 5px;

  color: var(--color-white);

  background-color: var(--color-navy);

  font-size: 0.72rem;
  font-weight: 500;

  white-space: nowrap;

  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast);
}

.insight-article-cta-link:hover {
  background-color: var(--color-navy-soft);

  transform: translateY(-1px);
}

.insight-article-cta-link span:last-child {
  color: var(--color-gold);

  font-size: 1rem;
}

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

.insight-article-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 2rem;

  width: 100%;

  margin-top: clamp(4.5rem, 8vw, 7rem);

  padding-top: clamp(2rem, 3vw, 2.75rem);

  border-top: 1px solid rgba(11, 34, 57, 0.1);
}

.insight-article-footer-label {
  margin: 0 0 0.75rem;

  color: var(--color-gold);

  font-size: 0.66rem;
  font-weight: 600;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}

.insight-article-footer h2 {
  width: min(100%, 550px);

  margin: 0;

  color: var(--color-navy);

  font-size: clamp(1.4rem, 2.3vw, 2.05rem);

  font-weight: 500;

  line-height: 1.25;

  letter-spacing: -0.025em;
}

/* =========================================================
   RETURN LINK
========================================================= */

.insight-article-return-link {
  display: inline-flex;
  align-items: center;

  gap: 0.75rem;

  flex: 0 0 auto;

  color: var(--color-gold);

  font-size: 0.72rem;
  font-weight: 500;

  white-space: nowrap;

  transition: color var(--transition-fast);
}

.insight-article-return-link:hover {
  color: var(--color-navy);
}

.insight-article-return-link span:last-child {
  font-size: 1rem;

  transition: transform var(--transition-fast);
}

.insight-article-return-link:hover span:last-child {
  transform: translateX(3px);
}

/* =========================================================
   DISCLAIMER
========================================================= */

.insight-article-disclaimer {
  width: min(100%, 760px);

  margin: clamp(3rem, 5vw, 4rem) auto 0;

  color: rgba(11, 34, 57, 0.52);

  font-size: 0.64rem;

  line-height: 1.75;
}

/* =========================================================
   ARTICLE — TABLET
========================================================= */

@media (max-width: 900px) {
  .insight-article-hero {
    padding-top: 2.75rem;
  }

  .insight-article-title {
    font-size: clamp(2.3rem, 7vw, 3.7rem);
  }

  .insight-article-hero-image {
    height: clamp(360px, 54vw, 520px);
  }

  .insight-article-cta {
    grid-template-columns: 1fr;

    align-items: start;
  }

  .insight-article-cta-link {
    width: fit-content;
  }
}

/* =========================================================
   ARTICLE — MOBILE
========================================================= */

@media (max-width: 600px) {
  .insight-article-hero {
    padding: 2rem 0 3rem;
  }

  .insight-article-hero-inner {
    width: calc(100% - (var(--page-padding) * 2));
  }

  .insight-article-back {
    margin-bottom: 1.8rem;
  }

  .insight-article-title {
    font-size: clamp(2.15rem, 10.5vw, 3rem);

    line-height: 1.05;
  }

  .insight-article-standfirst {
    margin-top: 1.25rem;

    font-size: 0.9rem;

    line-height: 1.75;
  }

  .insight-article-meta {
    align-items: flex-start;

    gap: 0.5rem 0.65rem;

    font-size: 0.64rem;
  }

  .insight-article-image-container {
    width: calc(100% - 1rem);

    margin-top: 2.25rem;
  }

  .insight-article-hero-image {
    height: clamp(260px, 72vw, 390px);

    object-position: center;
  }

  .insight-article-body {
    width: calc(100% - (var(--page-padding) * 2));

    padding-bottom: 4rem;
  }

  .insight-article-section {
    grid-template-columns: 1fr;

    row-gap: 0.65rem;

    margin-top: 3.75rem;
  }

  .insight-article-section-number {
    grid-column: 1;
    grid-row: 1;

    margin: 0;
  }

  .insight-article-section h2 {
    grid-column: 1;
    grid-row: 2;

    font-size: clamp(1.55rem, 7vw, 2rem);
  }

  .insight-article-section .insight-article-copy {
    grid-column: 1;
    grid-row: 3;

    margin-top: 0.35rem;
  }

  .insight-article-takeaway {
    margin: 3.75rem auto;

    padding: 1.6rem 1.35rem;
  }

  .insight-article-perspective {
    margin-top: 4.5rem;

    padding: 2.25rem 1.5rem;
  }

  .insight-article-cta {
    margin-top: 1rem;

    padding: 1.75rem 1.4rem;
  }

  .insight-article-cta-link {
    width: 100%;
  }

  .insight-article-footer {
    align-items: flex-start;
    flex-direction: column;

    gap: 1.5rem;

    margin-top: 4rem;
  }

  .insight-article-return-link {
    width: fit-content;
  }

  .insight-article-disclaimer {
    margin-top: 3rem;
  }

  .insight-visual-entry-strip {
    align-items: flex-start;

    gap: 1rem;

    padding: 0.9rem 1rem 2rem;
  }

  .insight-visual-entry-title {
    max-width: 220px;

    font-size: clamp(0.88rem, 4vw, 1.05rem);
  }

  .insight-visual-entry-category {
    font-size: 0.56rem;
  }

  .insight-visual-entry-return {
    margin-left: auto;

    font-size: 0.6rem;
  }
}

/* =========================================================
   ARTICLE — VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {
  .insight-article-title {
    font-size: 2rem;
  }

  .insight-article-meta-dot {
    display: none;
  }

  .insight-article-meta {
    flex-direction: column;

    gap: 0.35rem;
  }
}

/* =========================================================
   INSIGHTS — CATEGORY FILTER SYSTEM
   PERFEKTINSLAG VERSION
========================================================= */

/* =========================================================
   CATEGORY CARD — BASE MOTION
========================================================= */

.insight-category-card {
  transition:
    transform var(--transition-medium),
    box-shadow var(--transition-medium),
    border-color var(--transition-medium),
    background var(--transition-medium);
}

.insight-category-card h3,
.insight-category-card > p,
.insight-category-link {
  transition: color var(--transition-medium);
}

.insight-category-icon {
  transition:
    color var(--transition-medium),
    border-color var(--transition-medium),
    background-color var(--transition-medium);
}

/* =========================================================
   NORMAL HOVER
   MATCH SERVICES NAVIGATION CARDS
========================================================= */

.insight-category-card:not(.is-active):hover {
  transform: translateY(-3px);

  border-color: rgba(185, 147, 82, 0.38);

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(252, 250, 246, 0.82) 58%,
    rgba(185, 147, 82, 0.055) 100%
  );

  box-shadow: 0 10px 24px rgba(11, 34, 57, 0.055);
}

.insight-category-card:not(.is-active):hover .insight-category-icon {
  border-color: rgba(185, 147, 82, 0.42);

  background-color: rgba(255, 255, 255, 0.82);
}

/* =========================================================
   ACTIVE CATEGORY
========================================================= */

.insight-category-card.is-active {
  background: var(--color-navy);

  border-color: rgba(185, 147, 82, 0.42);

  box-shadow: 0 8px 20px rgba(11, 34, 57, 0.09);
}

/* Active heading */

.insight-category-card.is-active h3 {
  color: var(--color-white);
}

/* Active description */

.insight-category-card.is-active > p {
  color: rgba(255, 255, 255, 0.76);
}

/* Active icon circle */

.insight-category-card.is-active .insight-category-icon {
  color: var(--color-gold);

  border-color: rgba(185, 147, 82, 0.72);

  background-color: var(--color-navy);

  box-shadow: none;
}

/* Active rule */

.insight-category-card.is-active .insight-category-rule {
  background-color: var(--color-gold);
}

/* Active link */

.insight-category-card.is-active .insight-category-link {
  color: var(--color-gold);
}

/* =========================================================
   ACTIVE HOVER
   STAYS SOLID NAVY
========================================================= */

.insight-category-card.is-active:hover {
  transform: translateY(-3px);

  background: var(--color-navy);

  border-color: rgba(185, 147, 82, 0.58);

  box-shadow: 0 12px 26px rgba(11, 34, 57, 0.13);
}

.insight-category-card.is-active:hover .insight-category-icon {
  color: var(--color-gold);

  border-color: rgba(185, 147, 82, 0.82);

  background-color: var(--color-navy);
}

.insight-category-card.is-active .insight-category-link:hover {
  color: var(--color-gold-light);
}

/* =========================================================
   LATEST INSIGHTS — FILTER HEADER
========================================================= */

.latest-insights-heading-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 0.55rem;
}

.latest-insights-active-filter {
  display: flex;
  align-items: center;

  gap: 0.45rem;

  margin: 0;

  color: var(--color-muted);

  font-size: 0.78rem;
  line-height: 1.4;

  opacity: 0;

  transform: translate3d(0, 5px, 0);

  transition:
    opacity var(--transition-medium),
    transform var(--transition-medium);
}

.latest-insights-active-filter[hidden] {
  display: none;
}

.latest-insights-active-filter.is-visible {
  opacity: 1;

  transform: translate3d(0, 0, 0);
}

.latest-insights-active-filter strong {
  color: var(--color-gold);

  font-weight: 600;
}

/* =========================================================
   FILTERED ARTICLE VISIBILITY
========================================================= */

.latest-insight-card[hidden] {
  display: none;
}

/* =========================================================
   SINGLE FILTER RESULT LAYOUT
========================================================= */

.latest-insights-grid.is-single-result {
  align-items: stretch;
}

.latest-insights-grid.is-single-result .latest-insight-card:not([hidden]) {
  grid-column: 1;
}

/* =========================================================
   EDITORIAL ARTICLE DESCRIPTION
========================================================= */

.latest-insight-detail {
  grid-column: 2 / -1;

  display: flex;
  flex-direction: column;
  justify-content: center;

  min-width: 0;

  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.5rem)
    clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 5vw, 5rem);

  border-left: 1px solid rgba(185, 147, 82, 0.22);

  opacity: 0;

  transform: translate3d(18px, 8px, 0);

  transition:
    opacity var(--motion-slow) var(--motion-ease),
    transform var(--motion-slow) var(--motion-ease);
}

.latest-insight-detail[hidden] {
  display: none;
}

.latest-insight-detail.is-visible {
  opacity: 1;

  transform: translate3d(0, 0, 0);
}

/* ---------------------------------------------------------
   Editorial eyebrow
--------------------------------------------------------- */

.latest-insight-detail-eyebrow {
  margin: 0;

  color: var(--color-gold);

  font-size: 0.66rem;
  font-weight: 600;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}

/* ---------------------------------------------------------
   Gold accent
--------------------------------------------------------- */

.latest-insight-detail-rule {
  width: 34px;
  height: 1px;

  margin: 1rem 0 1.25rem;

  background-color: var(--color-gold);
}

/* ---------------------------------------------------------
   Description
--------------------------------------------------------- */

.latest-insight-detail-copy {
  max-width: 720px;

  margin: 0;

  color: var(--color-navy);

  font-size: clamp(0.9rem, 1.25vw, 1.08rem);
  font-weight: 400;

  line-height: 1.85;
}

/* ---------------------------------------------------------
   Read article
--------------------------------------------------------- */

.latest-insight-detail-link {
  display: inline-flex;
  align-items: center;

  width: fit-content;

  gap: 0.75rem;

  margin-top: 1.6rem;

  color: var(--color-gold);

  font-size: 0.74rem;
  font-weight: 500;

  transition: color var(--transition-fast);
}

.latest-insight-detail-link span:last-child {
  font-size: 1rem;

  transition: transform var(--transition-fast);
}

.latest-insight-detail-link:hover {
  color: var(--color-navy);
}

.latest-insight-detail-link:hover span:last-child {
  transform: translateX(3px);
}

/* =========================================================
   DETAIL — STAGGERED TEXT ARRIVAL
========================================================= */

.latest-insight-detail.is-visible .latest-insight-detail-eyebrow {
  animation: insights-detail-piece-in 520ms var(--motion-ease) both;
}

.latest-insight-detail.is-visible .latest-insight-detail-rule {
  animation: insights-detail-piece-in 520ms 60ms var(--motion-ease) both;
}

.latest-insight-detail.is-visible .latest-insight-detail-copy {
  animation: insights-detail-piece-in 560ms 110ms var(--motion-ease) both;
}

.latest-insight-detail.is-visible .latest-insight-detail-link {
  animation: insights-detail-piece-in 560ms 170ms var(--motion-ease) both;
}

@keyframes insights-detail-piece-in {
  from {
    opacity: 0;

    transform: translate3d(0, 9px, 0);
  }

  to {
    opacity: 1;

    transform: translate3d(0, 0, 0);
  }
}

/* =========================================================
   FILTER — ARTICLE EXIT
========================================================= */

.latest-insight-card.is-filtering-out {
  pointer-events: none;

  animation: insights-filter-card-out 220ms var(--filter-exit-delay, 0ms)
    var(--motion-ease) both;
}

@keyframes insights-filter-card-out {
  from {
    opacity: 1;

    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    opacity: 0;

    transform: translate3d(0, 10px, 0) scale(0.985);
  }
}

/* =========================================================
   FILTER — SELECTED ARTICLE ARRIVAL
========================================================= */

.latest-insight-card.is-filter-entering {
  animation: insights-filter-card-in 520ms var(--motion-ease) both;
}

@keyframes insights-filter-card-in {
  from {
    opacity: 0;

    transform: translate3d(0, 16px, 0);
  }

  to {
    opacity: 1;

    transform: translate3d(0, 0, 0);
  }
}

/* =========================================================
   VIEW ALL — STAGGERED RETURN
   Same 70ms rhythm as the site scroll reveal
========================================================= */

.latest-insight-card.is-filter-returning {
  animation: insights-filter-card-return 560ms var(--filter-return-delay, 0ms)
    var(--motion-ease) both;
}

@keyframes insights-filter-card-return {
  from {
    opacity: 0;

    transform: translate3d(0, 16px, 0);
  }

  to {
    opacity: 1;

    transform: translate3d(0, 0, 0);
  }
}

/* =========================================================
   EMPTY CATEGORY STATE
========================================================= */

.latest-insights-empty {
  grid-column: 1 / -1;

  padding: clamp(2rem, 4vw, 3rem);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-card);

  background: transparent;

  opacity: 0;

  transform: translate3d(0, 14px, 0);

  transition:
    opacity var(--motion-slow) var(--motion-ease),
    transform var(--motion-slow) var(--motion-ease);
}

.latest-insights-empty[hidden] {
  display: none;
}

.latest-insights-empty.is-visible {
  opacity: 1;

  transform: translate3d(0, 0, 0);
}

.latest-insights-empty-eyebrow {
  margin: 0 0 0.75rem;

  color: var(--color-gold);

  font-size: 0.75rem;
  font-weight: 600;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.latest-insights-empty h3 {
  margin: 0 0 0.75rem;

  color: var(--color-navy);

  font-size: clamp(1.2rem, 2vw, 1.5rem);
}

.latest-insights-empty > p:last-child {
  max-width: 620px;

  margin: 0;

  color: var(--color-muted);
}

/* =========================================================
   FILTERED LAYOUT — TABLET
========================================================= */

@media (max-width: 1050px) {
  .latest-insights-grid.is-single-result {
    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(0, 1.1fr);
  }

  .latest-insight-detail {
    grid-column: 2;

    padding-left: clamp(1.5rem, 4vw, 3rem);
  }
}

/* =========================================================
   FILTERED LAYOUT — SMALL SCREENS
========================================================= */

@media (max-width: 700px) {
  .latest-insights-grid.is-single-result {
    grid-template-columns: 1fr;
  }

  .latest-insights-grid.is-single-result .latest-insight-card:not([hidden]) {
    grid-column: 1;
  }

  .latest-insight-detail {
    grid-column: 1;

    padding: 1.5rem 0.25rem 0.5rem;

    border-left: 0;

    border-top: 1px solid rgba(185, 147, 82, 0.22);

    transform: translate3d(0, 12px, 0);
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .insight-category-card,
  .insight-category-card h3,
  .insight-category-card > p,
  .insight-category-icon,
  .insight-category-link,
  .latest-insights-active-filter,
  .latest-insight-detail,
  .latest-insights-empty {
    transition: none;
  }

  .latest-insight-card.is-filtering-out,
  .latest-insight-card.is-filter-entering,
  .latest-insight-card.is-filter-returning,
  .latest-insight-detail.is-visible .latest-insight-detail-eyebrow,
  .latest-insight-detail.is-visible .latest-insight-detail-rule,
  .latest-insight-detail.is-visible .latest-insight-detail-copy,
  .latest-insight-detail.is-visible .latest-insight-detail-link {
    animation: none;
  }
}

/* =========================================================
   TAX RESOURCES — CALCULATOR EXTENSION
   Guide + calculator as equal professional resources
========================================================= */

.insights-tax-resources-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.insights-tax-resource-card {
  height: 100%;
}

.insights-tax-resource-card--calculator {
  grid-template-columns:
    104px
    minmax(0, 1fr);
}

.insights-tax-calculator-icon-link {
  display: grid;
  place-items: center;

  width: 104px;
  height: 104px;

  border: 1px solid rgba(185, 147, 82, 0.3);

  color: var(--color-navy);
  background-color: rgba(255, 255, 255, 0.82);

  transition:
    color var(--transition-fast),
    transform var(--transition-medium),
    border-color var(--transition-medium),
    background-color var(--transition-medium),
    box-shadow var(--transition-medium);
}

.insights-tax-calculator-icon-link svg {
  width: 54px;
  height: 54px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.insights-tax-resource-card--calculator:hover
  .insights-tax-calculator-icon-link {
  color: var(--color-gold);

  border-color: rgba(185, 147, 82, 0.46);

  background-color: rgba(255, 255, 255, 0.95);

  box-shadow: 0 8px 16px rgba(11, 34, 57, 0.06);

  transform: translateY(-1px);
}

.insights-tax-resource-card--calculator .insights-tax-resource-description {
  max-width: 520px;
}

.insights-tax-resource-card--calculator .insights-tax-resource-open {
  color: var(--color-navy);
}

.insights-tax-resource-card--calculator .insights-tax-resource-open:hover {
  color: var(--color-gold);
}

@media (max-width: 1050px) {
  .insights-tax-resources-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .insights-tax-resource-card--calculator {
    grid-template-columns:
      78px
      minmax(0, 1fr);
  }

  .insights-tax-calculator-icon-link {
    width: 78px;
    height: 78px;
  }

  .insights-tax-calculator-icon-link svg {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 400px) {
  .insights-tax-resource-card--calculator {
    grid-template-columns:
      64px
      minmax(0, 1fr);
  }

  .insights-tax-calculator-icon-link {
    width: 64px;
    height: 64px;
  }

  .insights-tax-calculator-icon-link svg {
    width: 38px;
    height: 38px;
  }
}

/* =========================================================
   TAX CALCULATOR PAGE
   Instrument, not dashboard
========================================================= */

.sr-only {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  padding: 0 !important;
  margin: -1px !important;

  overflow: hidden !important;

  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;

  white-space: nowrap !important;

  border: 0 !important;
}

.tax-calculator-page {
  width: 100%;
  min-height: 100dvh;

  padding-bottom: clamp(2rem, 4vw, 3.5rem);

  background-color: var(--color-background);
}

/* =========================================================
   TAX CALCULATOR — INTRODUCTION
========================================================= */

.tax-calculator-intro {
  width: calc(100% - 2rem);

  margin-inline: auto;

  padding: clamp(1.7rem, 2.8vw, 2.5rem) var(--page-padding)
    clamp(1.8rem, 3vw, 2.65rem);

  background-color: #fdfbfa;
}

.tax-calculator-intro-inner {
  width: min(100%, 960px);

  margin-inline: auto;
}

.tax-calculator-back {
  display: inline-flex;
  align-items: center;

  gap: 0.55rem;

  width: fit-content;

  margin-bottom: clamp(1.6rem, 2.5vw, 2.2rem);

  color: var(--color-gold);

  font-size: 0.66rem;
  font-weight: 500;

  transition: color var(--transition-fast);
}

.tax-calculator-back span:first-child {
  font-size: 0.95rem;

  transition: transform var(--transition-fast);
}

.tax-calculator-back:hover {
  color: var(--color-navy);
}

.tax-calculator-back:hover span:first-child {
  transform: translateX(-3px);
}

.tax-calculator-intro-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(240px, 0.45fr);

  align-items: end;

  gap: clamp(2.5rem, 7vw, 6.5rem);
}

.tax-calculator-eyebrow {
  margin: 0 0 0.75rem;

  color: var(--color-gold);

  font-size: 0.64rem;
  font-weight: 600;

  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.tax-calculator-title {
  display: flex;
  flex-direction: column;

  margin: 0;

  color: var(--color-navy);

  font-size: clamp(2.2rem, 4vw, 3.7rem);
  font-weight: 500;
  line-height: 1.02;

  letter-spacing: -0.04em;
}

.tax-calculator-title span {
  display: block;
}

.tax-calculator-title .gold-text {
  margin-top: 0.08em;

  color: var(--color-gold);
}

.tax-calculator-title-rule {
  width: 40px;
  height: 1px;

  margin-top: 1.25rem;

  background-color: var(--color-gold);
}

.tax-calculator-description {
  width: min(100%, 620px);

  margin: 1.1rem 0 0;

  color: var(--color-navy);

  font-size: clamp(0.76rem, 0.88vw, 0.86rem);
  line-height: 1.75;
}

.tax-calculator-period {
  display: flex;
  flex-direction: column;

  align-self: end;

  gap: 0.3rem;

  padding-left: 1.15rem;

  border-left: 1px solid rgba(185, 147, 82, 0.46);
}

.tax-calculator-period-label {
  margin: 0 0 0.15rem;

  color: var(--color-gold);

  font-size: 0.58rem;
  font-weight: 600;

  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tax-calculator-period strong {
  color: var(--color-navy);

  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
}

.tax-calculator-period > span {
  color: var(--color-muted);

  font-size: 0.62rem;
  line-height: 1.5;
}

.tax-calculator-period .tax-calculator-period-verified {
  margin-top: 0.3rem;

  color: rgba(11, 34, 57, 0.55);

  font-size: 0.56rem;
}

/* =========================================================
   TAX CALCULATOR — WORKSPACE
========================================================= */

.tax-calculator-workspace-section {
  width: calc(100% - 2rem);

  margin-inline: auto;

  padding: clamp(1.6rem, 2.8vw, 2.4rem) var(--page-padding)
    clamp(1.8rem, 3.2vw, 2.8rem);

  background-color: var(--color-background);
}

.tax-calculator-workspace {
  display: grid;

  grid-template-columns:
    minmax(0, 0.42fr)
    minmax(0, 0.58fr);

  align-items: stretch;

  width: min(100%, 960px);

  margin-inline: auto;

  overflow: hidden;

  border: 1px solid rgba(11, 34, 57, 0.09);
  border-radius: var(--radius-card);

  background-color: var(--color-white);

  box-shadow: none;
}

/* =========================================================
   INPUT PANEL
========================================================= */

.tax-calculator-input-panel {
  min-width: 0;

  padding: clamp(1.5rem, 2.8vw, 2.35rem);

  border-right: 1px solid rgba(11, 34, 57, 0.08);

  background-color: #fdfbfa;
}

.tax-calculator-panel-heading {
  margin-bottom: 1.5rem;
}

.tax-calculator-panel-eyebrow,
.tax-calculator-result-eyebrow,
.tax-calculator-notes-eyebrow {
  margin: 0 0 0.45rem;

  color: var(--color-gold);

  font-size: 0.6rem;
  font-weight: 600;

  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tax-calculator-panel-heading h2 {
  margin: 0;

  color: var(--color-navy);

  font-size: clamp(1.2rem, 1.7vw, 1.55rem);
  font-weight: 500;
  line-height: 1.25;

  letter-spacing: -0.02em;
}

.tax-calculator-panel-heading > p:last-child {
  margin: 0.55rem 0 0;

  color: var(--color-muted);

  font-size: 0.68rem;
  line-height: 1.65;
}

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

.tax-calculator-form {
  display: grid;

  gap: 1.1rem;
}

.tax-calculator-field {
  min-width: 0;
}

.tax-calculator-field label {
  display: block;

  margin-bottom: 0.38rem;

  color: var(--color-navy);

  font-size: 0.66rem;
  font-weight: 600;
}

.tax-calculator-field input,
.tax-calculator-field select {
  width: 100%;
  min-height: 44px;

  padding: 0.7rem 0.8rem;

  border: 1px solid rgba(11, 34, 57, 0.14);
  border-radius: 4px;

  outline: 0;

  color: var(--color-navy);
  background-color: rgba(255, 255, 255, 0.86);

  font: inherit;
  font-size: 0.74rem;

  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

.tax-calculator-field input:focus,
.tax-calculator-field select:focus {
  border-color: rgba(185, 147, 82, 0.78);

  background-color: var(--color-white);

  box-shadow: 0 0 0 3px rgba(185, 147, 82, 0.08);
}

.tax-calculator-field input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.tax-calculator-field input[type="number"]::-webkit-inner-spin-button,
.tax-calculator-field input[type="number"]::-webkit-outer-spin-button {
  margin: 0;

  -webkit-appearance: none;
}

.tax-calculator-money-input {
  position: relative;
}

.tax-calculator-money-input > span {
  position: absolute;
  top: 50%;
  left: 0.8rem;

  z-index: 2;

  color: var(--color-gold);

  font-size: 0.72rem;
  font-weight: 600;

  transform: translateY(-50%);

  pointer-events: none;
}

.tax-calculator-money-input input {
  padding-left: 1.8rem;
}

.tax-calculator-select-wrap {
  position: relative;
}

.tax-calculator-select-wrap::after {
  content: "⌄";

  position: absolute;
  top: 50%;
  right: 0.8rem;

  color: var(--color-gold);

  font-size: 0.82rem;
  line-height: 1;

  transform: translateY(-58%);

  pointer-events: none;
}

.tax-calculator-select-wrap select {
  appearance: none;
  -webkit-appearance: none;

  padding-right: 2.2rem;
}

.tax-calculator-field-help {
  margin: 0.35rem 0 0;

  color: rgba(11, 34, 57, 0.56);

  font-size: 0.56rem;
  line-height: 1.55;
}

.tax-calculator-field-error {
  margin: 0.35rem 0 0;

  color: #8a2f2f;

  font-size: 0.56rem;
  line-height: 1.5;
}

.tax-calculator-field.is-invalid input,
.tax-calculator-field.is-invalid select {
  border-color: rgba(138, 47, 47, 0.65);

  box-shadow: 0 0 0 3px rgba(138, 47, 47, 0.055);
}

.tax-calculator-field.is-disabled {
  opacity: 0.46;
}

.tax-calculator-field.is-disabled select {
  cursor: not-allowed;
}

/* =========================================================
   FORM ACTIONS
========================================================= */

.tax-calculator-form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 0.9rem;

  margin-top: 0.35rem;
}

.tax-calculator-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;

  gap: 1rem;

  padding: 0.7rem 1rem;

  border: 0;
  border-radius: 4px;

  color: var(--color-white);
  background-color: var(--color-navy);

  font-size: 0.68rem;
  font-weight: 500;

  cursor: pointer;

  transition:
    transform var(--transition-fast),
    background-color var(--transition-fast),
    opacity var(--transition-fast);
}

.tax-calculator-submit > span:last-child {
  color: var(--color-gold);

  font-size: 0.95rem;

  transition: transform var(--transition-fast);
}

.tax-calculator-submit:hover:not(:disabled) {
  background-color: var(--color-navy-soft);

  transform: translateY(-1px);
}

.tax-calculator-submit:hover:not(:disabled) > span:last-child {
  transform: translateX(3px);
}

.tax-calculator-submit:disabled {
  opacity: 0.52;

  cursor: wait;
}

.tax-calculator-reset {
  padding: 0.55rem 0;

  border: 0;

  color: var(--color-gold);
  background: transparent;

  font-size: 0.62rem;
  font-weight: 500;

  cursor: pointer;

  transition: color var(--transition-fast);
}

.tax-calculator-reset:hover {
  color: var(--color-navy);
}

.tax-calculator-submit:focus-visible,
.tax-calculator-reset:focus-visible,
.tax-calculator-back:focus-visible,
.tax-calculator-advice a:focus-visible {
  outline: 2px solid rgba(185, 147, 82, 0.72);
  outline-offset: 3px;
}

.tax-calculator-form-status {
  min-height: 1.1rem;

  margin: -0.15rem 0 0;

  color: var(--color-muted);

  font-size: 0.58rem;
  line-height: 1.5;
}

.tax-calculator-form-status[data-state="error"] {
  color: #8a2f2f;
}

.tax-calculator-data-note {
  margin: -0.35rem 0 0;

  color: rgba(11, 34, 57, 0.46);

  font-size: 0.53rem;
  line-height: 1.5;
}

/* =========================================================
   RESULTS PANEL
========================================================= */

.tax-calculator-result-panel {
  min-width: 0;

  padding: clamp(1.65rem, 3.2vw, 2.75rem);

  background-color: var(--color-white);
}

.tax-calculator-empty-result {
  display: flex;
  flex-direction: column;
  justify-content: center;

  min-height: 100%;
  max-width: 480px;
}

.tax-calculator-empty-mark {
  margin: 0.55rem 0 0.2rem;

  color: rgba(185, 147, 82, 0.78);

  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 300;
  line-height: 1;
}

.tax-calculator-empty-result h2 {
  margin: 0;

  color: var(--color-navy);

  font-size: clamp(1.45rem, 2.2vw, 2rem);
  font-weight: 500;
  line-height: 1.2;

  letter-spacing: -0.025em;
}

.tax-calculator-empty-result > p:not(.tax-calculator-result-eyebrow) {
  max-width: 430px;

  margin: 0.8rem 0 0;

  color: var(--color-muted);

  font-size: 0.7rem;
  line-height: 1.7;
}

.tax-calculator-privacy-note {
  display: flex;
  align-items: flex-start;

  gap: 0.6rem;

  max-width: 430px;

  margin-top: 1.45rem;
  padding-top: 1rem;

  border-top: 1px solid rgba(11, 34, 57, 0.075);

  color: rgba(11, 34, 57, 0.62);

  font-size: 0.58rem;
  line-height: 1.55;
}

.tax-calculator-privacy-note svg {
  width: 15px;
  height: 15px;

  flex: 0 0 auto;

  margin-top: 0.1rem;

  fill: none;
  stroke: var(--color-gold);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   CALCULATED RESULTS
========================================================= */

.tax-calculator-results {
  opacity: 0;

  transform: translate3d(0, 7px, 0);

  transition:
    opacity var(--motion-standard) var(--motion-ease),
    transform var(--motion-standard) var(--motion-ease);
}

.tax-calculator-results[hidden] {
  display: none;
}

.tax-calculator-results.is-visible {
  opacity: 1;

  transform: translate3d(0, 0, 0);
}

.tax-calculator-result-primary {
  display: grid;

  gap: 0.25rem;
}

.tax-calculator-result-amount {
  display: block;

  margin-top: 0.15rem;

  color: var(--color-navy);

  font-size: clamp(2.8rem, 6vw, 5.1rem);
  font-weight: 500;
  line-height: 0.98;

  letter-spacing: -0.055em;
}

.tax-calculator-result-monthly {
  display: flex;
  align-items: baseline;
  justify-content: space-between;

  gap: 1.5rem;

  margin-top: 0.8rem;
}

.tax-calculator-result-monthly span {
  color: var(--color-muted);

  font-size: 0.62rem;
}

.tax-calculator-result-monthly strong {
  color: var(--color-gold);

  font-size: clamp(0.9rem, 1.3vw, 1.1rem);
  font-weight: 600;
}

.tax-calculator-result-rule {
  width: 100%;
  height: 1px;

  margin: 1.35rem 0;

  background-color: rgba(11, 34, 57, 0.08);
}

/* =========================================================
   RESULT METRICS
========================================================= */

.tax-calculator-metrics,
.tax-calculator-breakdown dl {
  margin: 0;
}

.tax-calculator-metrics {
  display: grid;

  gap: 0.65rem;
}

.tax-calculator-metrics > div,
.tax-calculator-breakdown dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;

  gap: 1.5rem;
}

.tax-calculator-metrics dt,
.tax-calculator-breakdown dt {
  color: var(--color-muted);

  font-size: 0.62rem;
  line-height: 1.5;
}

.tax-calculator-metrics dd {
  margin: 0;

  color: var(--color-navy);

  font-size: 0.7rem;
  font-weight: 600;

  text-align: right;
}

/* =========================================================
   BREAKDOWN
========================================================= */

.tax-calculator-breakdown-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 1rem;

  margin-bottom: 0.85rem;
}

.tax-calculator-breakdown-heading p {
  margin: 0;

  color: var(--color-navy);

  font-size: 0.64rem;
  font-weight: 600;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tax-calculator-breakdown-heading span {
  color: var(--color-gold);

  font-size: 0.58rem;
  font-weight: 500;

  letter-spacing: 0.08em;
}

.tax-calculator-breakdown dl {
  display: grid;

  gap: 0.55rem;
}

.tax-calculator-breakdown dd {
  margin: 0;

  color: var(--color-navy);

  font-size: 0.64rem;
  font-weight: 500;

  text-align: right;
}

.tax-calculator-breakdown-total {
  margin-top: 0.35rem;
  padding-top: 0.75rem;

  border-top: 1px solid rgba(185, 147, 82, 0.34);
}

.tax-calculator-breakdown-total dt,
.tax-calculator-breakdown-total dd {
  color: var(--color-navy);

  font-weight: 600;
}

.tax-calculator-result-note {
  margin: 1rem 0 0;

  padding-left: 0.8rem;

  border-left: 1px solid rgba(185, 147, 82, 0.42);

  color: rgba(11, 34, 57, 0.56);

  font-size: 0.54rem;
  line-height: 1.55;
}

/* =========================================================
   NOTES + PROFESSIONAL CTA
========================================================= */

.tax-calculator-notes {
  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(250px, 0.8fr);

  align-items: start;

  gap: clamp(2.5rem, 7vw, 6rem);

  width: min(calc(100% - 2rem), 960px);

  margin-inline: auto;

  padding: clamp(1rem, 2vw, 1.5rem) 0 0;
}

.tax-calculator-notes-copy h2,
.tax-calculator-advice h2 {
  margin: 0;

  color: var(--color-navy);

  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: 500;
  line-height: 1.35;

  letter-spacing: -0.015em;
}

.tax-calculator-notes-copy > p:not(.tax-calculator-notes-eyebrow),
.tax-calculator-advice > p {
  margin: 0.7rem 0 0;

  color: var(--color-muted);

  font-size: 0.62rem;
  line-height: 1.7;
}

.tax-calculator-notes-copy .tax-calculator-disclaimer {
  margin-top: 0.85rem;

  color: rgba(11, 34, 57, 0.5);

  font-size: 0.56rem;
}

.tax-calculator-advice {
  padding-left: 1.15rem;

  border-left: 1px solid rgba(185, 147, 82, 0.42);
}

.tax-calculator-advice > p {
  margin-top: 0;

  color: var(--color-gold);

  font-size: 0.58rem;
  font-weight: 600;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tax-calculator-advice h2 {
  margin-top: 0.45rem;
}

.tax-calculator-advice a {
  display: inline-flex;
  align-items: center;

  gap: 0.65rem;

  margin-top: 0.9rem;

  color: var(--color-navy);

  font-size: 0.64rem;
  font-weight: 600;

  transition: color var(--transition-fast);
}

.tax-calculator-advice a span:last-child {
  color: var(--color-gold);

  transition: transform var(--transition-fast);
}

.tax-calculator-advice a:hover {
  color: var(--color-gold);
}

.tax-calculator-advice a:hover span:last-child {
  transform: translateX(3px);
}

/* =========================================================
   TAX CALCULATOR — TABLET
========================================================= */

@media (max-width: 900px) {
  .tax-calculator-intro-grid {
    grid-template-columns: 1fr;

    align-items: start;

    gap: 1.5rem;
  }

  .tax-calculator-period {
    align-self: start;
  }

  .tax-calculator-workspace {
    grid-template-columns: 1fr;
  }

  .tax-calculator-input-panel {
    border-right: 0;
    border-bottom: 1px solid rgba(11, 34, 57, 0.08);
  }

  .tax-calculator-result-panel {
    min-height: 430px;
  }

  .tax-calculator-notes {
    grid-template-columns: 1fr;

    gap: 1.5rem;
  }
}

/* =========================================================
   TAX CALCULATOR — MOBILE
========================================================= */

@media (max-width: 600px) {
  .tax-calculator-intro,
  .tax-calculator-workspace-section {
    width: calc(100% - 1rem);
  }

  .tax-calculator-intro {
    padding-top: 1.5rem;
    padding-bottom: 1.9rem;
  }

  .tax-calculator-back {
    margin-bottom: 1.4rem;
  }

  .tax-calculator-title {
    font-size: clamp(2.15rem, 10vw, 3rem);
  }

  .tax-calculator-workspace-section {
    padding-top: 1.2rem;
    padding-right: var(--page-padding);
    padding-left: var(--page-padding);
  }

  .tax-calculator-input-panel,
  .tax-calculator-result-panel {
    padding: 1.35rem 1rem;
  }

  .tax-calculator-result-panel {
    min-height: 390px;
  }

  .tax-calculator-result-amount {
    font-size: clamp(2.6rem, 14vw, 4rem);
  }

  .tax-calculator-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .tax-calculator-submit {
    width: 100%;
  }

  .tax-calculator-reset {
    width: fit-content;
  }

  .tax-calculator-result-monthly,
  .tax-calculator-metrics > div,
  .tax-calculator-breakdown dl > div {
    gap: 1rem;
  }

  .tax-calculator-notes {
    width: calc(100% - 1rem);

    padding: 0 var(--page-padding);
  }

  .tax-calculator-advice {
    padding-top: 1rem;
    padding-left: 0;

    border-top: 1px solid rgba(185, 147, 82, 0.42);
    border-left: 0;
  }
}

/* =========================================================
   TAX CALCULATOR — VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {
  .tax-calculator-input-panel,
  .tax-calculator-result-panel {
    padding-right: 0.85rem;
    padding-left: 0.85rem;
  }

  .tax-calculator-result-monthly {
    align-items: flex-start;
    flex-direction: column;

    gap: 0.2rem;
  }

  .tax-calculator-metrics > div,
  .tax-calculator-breakdown dl > div {
    align-items: flex-start;

    gap: 0.75rem;
  }

  .tax-calculator-metrics dd,
  .tax-calculator-breakdown dd {
    flex: 0 0 auto;
  }
}

/* =========================================================
   TAX CALCULATOR — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .insights-tax-calculator-icon-link,
  .tax-calculator-back,
  .tax-calculator-submit,
  .tax-calculator-reset,
  .tax-calculator-results,
  .tax-calculator-advice a,
  .tax-calculator-advice a span:last-child {
    transition: none;
  }
}

/* =========================================================
   TAX CALCULATOR — RED PEN 01
   Desktop resource width + calculated-state correction
========================================================= */

/* The empty state must leave the layout completely
   once the calculated result becomes active. */

.tax-calculator-empty-result[hidden] {
  display: none;
}

/* Two tax resources need a wider desktop canvas than
   the original single-guide layout. */

@media (min-width: 1051px) {
  .insights-tax-resources-heading,
  .insights-tax-resources-grid,
  .insights-tax-resources-footer {
    width: min(100%, 1120px);
  }

  .insights-tax-resources-grid {
    gap: 2.5rem;
  }
}

/* =========================================================
   MAMBODLA — LARGE DESKTOP RESPONSIVE PASS
   1366px remains the approved reference composition.
   This layer begins gently above 1536px and scales through
   1920 / 2200 / 2560 without changing mobile or normal desktop.
========================================================= */

@media (min-width: 1536px) {
  :root {
    /* Let the site use the extra canvas instead of remaining
       trapped inside the original 1360px desktop shell. */
    --container-max: 2800px;
    --page-padding: clamp(4rem, 4vw, 7.5rem);
  }

  /* =======================================================
     GLOBAL HEADER / FOOTER
  ======================================================= */

  .header-inner {
    min-height: clamp(104px, 6vw, 124px);
  }

  .brand-logo {
    width: clamp(84px, 4.7vw, 106px);
  }

  .desktop-nav {
    gap: clamp(2rem, 2.4vw, 3.25rem);
  }

  .nav-link {
    font-size: clamp(0.88rem, 0.72vw, 1rem);
  }

  .footer-inner {
    gap: clamp(1.5rem, 2.4vw, 3rem);
    padding-top: 1.35rem;
    padding-bottom: 1.7rem;
  }

  .footer-copyright p,
  .footer-legal a {
    font-size: clamp(0.78rem, 0.65vw, 0.88rem);
  }

  .footer-social a {
    width: 32px;
    height: 32px;
  }

  .footer-social img {
    width: 19px;
    height: 19px;
  }

  /* =======================================================
     HOME — KEEP 1366 VISUAL HIERARCHY ON LARGER CANVASES
  ======================================================= */

  .home-hero-content {
    padding-top: clamp(10rem, 18vh, 14rem);
  }

  /* Home header receives a slightly stronger scale than the shared
     large-desktop header so the full-viewport composition keeps the
     same authority it has at the approved 1366px reference width. */
  .home-page-body .header-inner {
    min-height: clamp(108px, 6.2vw, 132px);
  }

  .home-page-body .brand-logo {
    width: clamp(92px, 5vw, 118px);
  }

  .home-page-body .desktop-nav {
    gap: clamp(2.15rem, 2.6vw, 3.5rem);
  }

  .home-page-body .nav-link {
    font-size: clamp(0.94rem, 0.76vw, 1.06rem);
  }

  .home-hero-copy {
    width: min(100%, clamp(620px, 36vw, 820px));
  }

  .home-hero-title {
    font-size: clamp(4.25rem, 4.5vw, 6.5rem);
  }

  .home-hero-description {
    width: min(100%, 620px);
    margin-top: clamp(1.5rem, 2.4vh, 2.1rem);
    font-size: clamp(0.94rem, 0.84vw, 1.1rem);
    line-height: 1.72;
  }

  .home-hero-actions {
    gap: 1.05rem;
    margin-top: clamp(1.9rem, 3.1vh, 2.7rem);
  }

  .home-button {
    min-height: clamp(48px, 2.9vw, 58px);
    padding: 0.85rem 1.25rem;
    font-size: clamp(0.82rem, 0.72vw, 0.96rem);
  }

  .calendar-icon {
    width: 19px;
    height: 19px;
  }

  .home-services-overlay {
    bottom: clamp(1.5rem, 2.2vh, 2.25rem);
  }

  .home-services-grid {
    gap: clamp(1rem, 1.3vw, 1.65rem);
  }

  .home-service-card {
    min-height: clamp(145px, 15vh, 190px);
    padding: clamp(1.2rem, 1.35vw, 1.7rem);
    column-gap: clamp(1rem, 1vw, 1.3rem);
  }

  .home-service-icon {
    width: clamp(60px, 4vw, 80px);
    height: clamp(60px, 4vw, 80px);
  }

  .home-service-content {
    padding-right: 1.7rem;
  }

  .home-service-content h2 {
    font-size: clamp(1rem, 0.9vw, 1.22rem);
  }

  .home-service-content p {
    width: min(100%, 280px);
    margin-top: 0.72rem;
    font-size: clamp(0.8rem, 0.7vw, 0.95rem);
    line-height: 1.58;
  }

  .home-service-arrow {
    right: 1.25rem;
    bottom: 1.05rem;
    font-size: 1.35rem;
  }

  /* =======================================================
     ABOUT — HERO
  ======================================================= */

  .about-hero-grid {
    min-height: clamp(470px, 40vh, 620px);
    padding-top: clamp(2.75rem, 3vw, 4rem);
  }

  .about-hero-content {
    width: min(100%, 700px);
  }

  .about-eyebrow {
    font-size: clamp(0.7rem, 0.58vw, 0.8rem);
  }

  .about-hero-title {
    font-size: clamp(3.1rem, 3.2vw, 4.4rem);
  }

  .about-hero-description {
    width: min(100%, 540px);
    font-size: clamp(0.9rem, 0.76vw, 1.05rem);
  }

  /* =======================================================
     ABOUT — OUR STORY
  ======================================================= */

  .about-story-inner {
    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(0, 1.1fr);
    gap: clamp(4rem, 6vw, 8rem);
    min-height: clamp(440px, 24vw, 600px);
    padding: clamp(3.25rem, 3.5vw, 5rem) var(--page-padding);
  }

  .about-story-title {
    max-width: 600px;
    font-size: clamp(3rem, 3vw, 4.4rem);
  }

  .about-story-content {
    max-width: 840px;
  }

  .about-story-content p {
    font-size: clamp(0.9rem, 0.72vw, 1.05rem);
    line-height: 1.8;
  }

  .about-story-signature {
    width: clamp(190px, 11vw, 240px);
  }

  .about-story-signature-divider {
    height: 64px;
  }

  .about-story-signature-brand strong {
    font-size: clamp(0.82rem, 0.68vw, 0.98rem);
  }

  .about-story-signature-brand span {
    font-size: clamp(0.56rem, 0.48vw, 0.7rem);
  }

  /* =======================================================
     ABOUT — DIRECTOR
  ======================================================= */

  .about-director-grid {
    grid-template-columns:
      minmax(420px, 0.9fr)
      minmax(0, 1.1fr);
  }

  .about-director-visual {
    padding: 0 clamp(2rem, 3vw, 4rem) clamp(2rem, 3vw, 4rem);
  }

  .about-director-photo-frame,
  .about-director-caption {
    width: min(100%, clamp(500px, 28vw, 620px));
  }

  .about-director-message {
    padding: clamp(4rem, 5vw, 7rem);
  }

  .about-director-title {
    max-width: 800px;
    font-size: clamp(3rem, 2.8vw, 4.2rem);
  }

  .about-director-intro,
  .about-director-copy {
    max-width: 800px;
  }

  .about-director-intro,
  .about-director-copy p {
    font-size: clamp(0.9rem, 0.72vw, 1.02rem);
    line-height: 1.8;
  }

  .about-director-quote {
    max-width: 800px;
  }

  .about-director-quote p {
    font-size: clamp(1.2rem, 1.1vw, 1.55rem);
  }

  .about-director-caption strong {
    font-size: clamp(0.88rem, 0.72vw, 1rem);
  }

  .about-director-caption span {
    font-size: clamp(0.62rem, 0.52vw, 0.74rem);
  }

  /* =======================================================
     ABOUT — PILLARS / COMMITMENT / BRAND BOOK / CLOSING
  ======================================================= */

  .about-pillars {
    padding-top: clamp(4rem, 4vw, 6rem);
    padding-bottom: clamp(4.25rem, 4.5vw, 6.5rem);
  }

  .about-pillar-card {
    min-height: clamp(235px, 16vw, 300px);
    padding: clamp(1.6rem, 2vw, 2.5rem);
  }

  .about-pillar-icon {
    width: clamp(68px, 4vw, 82px);
    height: clamp(68px, 4vw, 82px);
  }

  .about-pillar-content h2 {
    font-size: clamp(1.05rem, 0.9vw, 1.3rem);
  }

  .about-pillar-content p {
    font-size: clamp(0.82rem, 0.68vw, 0.95rem);
    line-height: 1.72;
  }

  .about-commitment-card {
    min-height: 225px;
    padding: clamp(1.9rem, 2.2vw, 2.8rem);
  }

  .about-commitment-icon {
    width: 100px;
    height: 100px;
  }

  .about-commitment-copy-body {
    max-width: 650px;
  }

  .about-commitment-copy-body p,
  .about-commitment-text,
  .about-commitment-list li {
    font-size: clamp(0.8rem, 0.66vw, 0.92rem);
  }

  .about-brand-book-grid {
    gap: clamp(4rem, 6vw, 8rem);
    padding: clamp(3rem, 4vw, 5.5rem) var(--page-padding);
  }

  .about-brand-book-preview-link {
    width: min(100%, clamp(420px, 24vw, 520px));
  }

  .about-brand-book-title {
    font-size: clamp(3rem, 2.8vw, 4rem);
  }

  .about-brand-book-description {
    max-width: 700px;
    font-size: clamp(0.88rem, 0.72vw, 1.02rem);
  }

  .about-brand-book-primary,
  .about-brand-book-download {
    font-size: clamp(0.76rem, 0.62vw, 0.88rem);
  }

  .about-closing-copy {
    max-width: 760px;
  }

  .about-closing-copy h2 {
    font-size: clamp(2rem, 2vw, 2.8rem);
  }

  .about-closing-copy p {
    font-size: clamp(0.8rem, 0.66vw, 0.92rem);
  }

  .about-closing-card {
    padding: 1.25rem 1.4rem;
  }

  /* =======================================================
     SERVICES — HERO
  ======================================================= */

  .services-hero {
    min-height: clamp(500px, 42vh, 640px);
  }

  .services-hero-content {
    width: min(100%, 800px);
  }

  .services-hero-title {
    font-size: clamp(5rem, 5vw, 6.4rem);
  }

  .services-hero-description {
    width: min(100%, 560px);
    font-size: clamp(0.92rem, 0.78vw, 1.08rem);
  }

  .services-hero-watermark {
    height: min(80%, 460px);
    max-width: 38vw;
  }

  /* =======================================================
     SERVICES — OVERVIEW
  ======================================================= */

  .services-overview-card {
    min-height: clamp(330px, 24vw, 420px);
    padding: clamp(1.6rem, 1.8vw, 2.25rem);
  }

  .services-card-icon {
    width: clamp(88px, 5vw, 104px);
    height: clamp(88px, 5vw, 104px);
  }

  .services-card-icon img {
    width: clamp(70px, 4vw, 84px);
    height: clamp(70px, 4vw, 84px);
  }

  .services-overview-card h2 {
    font-size: clamp(1.65rem, 1.45vw, 2.1rem);
  }

  .services-overview-card > p {
    font-size: clamp(0.82rem, 0.68vw, 0.96rem);
  }

  .services-card-link {
    font-size: clamp(0.78rem, 0.64vw, 0.9rem);
  }

  /* =======================================================
     SERVICES — DETAIL GRID
  ======================================================= */

  .services-detail-intro {
    gap: clamp(5rem, 8vw, 10rem);
  }

  .services-detail-title {
    font-size: clamp(4rem, 4vw, 5.6rem);
  }

  .services-detail-intro-copy p {
    width: min(100%, 560px);
    font-size: clamp(0.9rem, 0.74vw, 1.04rem);
  }

  .service-detail-column,
  .service-detail-face {
    padding: clamp(2.5rem, 2.6vw, 3.5rem) clamp(1.8rem, 1.8vw, 2.5rem);
  }

  .service-detail-icon {
    width: 112px;
    height: 112px;
  }

  .service-detail-icon img {
    width: 100px;
    height: 100px;
  }

  .service-detail-label,
  .service-detail-back-eyebrow {
    font-size: clamp(0.72rem, 0.58vw, 0.82rem);
  }

  .service-detail-column h3,
  .service-detail-back h3 {
    min-height: 3.7rem;
    font-size: clamp(1.2rem, 1.05vw, 1.55rem);
  }

  .service-detail-column li,
  .service-detail-back-copy p {
    font-size: clamp(0.82rem, 0.66vw, 0.94rem);
    line-height: 1.65;
  }

  .service-detail-link,
  .service-flip-back {
    font-size: clamp(0.78rem, 0.62vw, 0.88rem);
  }

  .services-closing-inner {
    padding: clamp(2rem, 2.5vw, 3rem);
  }

  .services-closing-icon {
    width: 84px;
    height: 84px;
  }

  .services-closing-icon svg {
    width: 72px;
    height: 72px;
  }

  .services-closing-copy h2 {
    font-size: clamp(1.7rem, 1.6vw, 2.25rem);
  }

  .services-closing-copy p {
    max-width: 680px;
    font-size: clamp(0.82rem, 0.66vw, 0.94rem);
  }

  .services-closing-button {
    min-width: 170px;
    padding: 0.95rem 1.5rem;
    font-size: clamp(0.8rem, 0.62vw, 0.9rem);
  }

  /* =======================================================
     INSIGHTS — HERO / FEATURED / CATEGORIES / LATEST
  ======================================================= */

  .insights-hero {
    min-height: clamp(480px, 40vh, 620px);
    padding-top: clamp(2.75rem, 3vw, 4rem);
  }

  .insights-hero-content {
    width: min(100%, 740px);
  }

  .insights-hero-title {
    font-size: clamp(3.1rem, 3.15vw, 4.4rem);
  }

  .insights-hero-description {
    width: min(100%, 540px);
    font-size: clamp(0.9rem, 0.74vw, 1.04rem);
  }

  .featured-insight {
    padding-top: clamp(1.5rem, 2vw, 2.4rem);
    padding-bottom: clamp(2rem, 2.8vw, 3.25rem);
  }

  .featured-insight-card {
    gap: clamp(2.5rem, 4vw, 5rem);
    padding: clamp(1rem, 1.4vw, 1.6rem);
  }

  .featured-insight-image-wrap {
    height: clamp(300px, 20vw, 420px);
  }

  .featured-insight-content {
    padding: clamp(0.5rem, 1vw, 1rem);
  }

  .featured-insight-content h2 {
    max-width: 680px;
    font-size: clamp(2.3rem, 2.3vw, 3.2rem);
  }

  .featured-insight-description {
    max-width: 680px;
    font-size: clamp(0.86rem, 0.7vw, 0.98rem);
  }

  .featured-insight-meta,
  .featured-insight-link {
    font-size: clamp(0.72rem, 0.58vw, 0.82rem);
  }

  .insight-category-card {
    min-height: clamp(280px, 18vw, 360px);
    padding: clamp(1.4rem, 1.6vw, 2rem);
  }

  .insight-category-icon {
    width: clamp(82px, 4.6vw, 96px);
    height: clamp(82px, 4.6vw, 96px);
  }

  .insight-category-icon svg {
    width: clamp(50px, 2.8vw, 58px);
    height: clamp(50px, 2.8vw, 58px);
  }

  .insight-category-card h3 {
    font-size: clamp(1.1rem, 0.95vw, 1.35rem);
  }

  .insight-category-card p {
    font-size: clamp(0.78rem, 0.64vw, 0.9rem);
  }

  .insight-category-link {
    font-size: clamp(0.74rem, 0.58vw, 0.84rem);
  }

  .latest-insight-image-wrap {
    height: clamp(210px, 13vw, 280px);
  }

  .latest-insight-content {
    padding: clamp(1.25rem, 1.3vw, 1.65rem);
  }

  .latest-insight-content h3 {
    font-size: clamp(1.08rem, 0.9vw, 1.3rem);
  }

  .latest-insight-category,
  .latest-insight-meta {
    font-size: clamp(0.66rem, 0.54vw, 0.76rem);
  }

  .insights-tax-resources-heading,
  .insights-tax-resources-grid,
  .insights-tax-resources-footer {
    width: min(100%, 1320px);
  }

  /* =======================================================
     ARTICLE — LARGE EDITORIAL CANVAS
     Body copy remains deliberately narrower for readability.
  ======================================================= */

  .insight-article-hero {
    padding-top: clamp(3.5rem, 4vw, 5.5rem);
    padding-bottom: clamp(3.5rem, 4vw, 5.25rem);
  }

  .insight-article-hero-inner {
    width: min(calc(100% - (var(--page-padding) * 2)), 1600px);
  }

  .insight-article-back {
    font-size: clamp(0.76rem, 0.58vw, 0.86rem);
  }

  .insight-article-category {
    font-size: clamp(0.74rem, 0.58vw, 0.84rem);
  }

  .insight-article-title {
    width: min(100%, 1260px);
    font-size: clamp(4rem, 4vw, 5.8rem);
  }

  .insight-article-standfirst {
    width: min(100%, 1020px);
    font-size: clamp(1.05rem, 0.9vw, 1.25rem);
    line-height: 1.75;
  }

  .insight-article-meta {
    font-size: clamp(0.72rem, 0.56vw, 0.82rem);
  }

  .insight-article-image-container {
    width: min(calc(100% - (var(--page-padding) * 2)), 1880px);
    margin-top: clamp(3rem, 3.5vw, 4.5rem);
  }

  .insight-article-hero-image {
    height: clamp(560px, 36vw, 850px);
  }

  .insight-visual-entry-title {
    width: min(100%, 780px);
    font-size: clamp(1.25rem, 1.25vw, 1.75rem);
  }

  .insight-article-body {
    width: min(calc(100% - (var(--page-padding) * 2)), 1060px);
  }

  .insight-article-copy {
    width: min(100%, 820px);
  }

  .insight-article-copy p {
    font-size: clamp(0.98rem, 0.74vw, 1.08rem);
    line-height: 1.9;
  }

  .insight-article-opening {
    font-size: clamp(1.15rem, 0.9vw, 1.3rem) !important;
  }

  .insight-article-section {
    grid-template-columns:
      54px
      minmax(0, 1fr);
    width: min(100%, 960px);
  }

  .insight-article-section h2 {
    max-width: 820px;
    font-size: clamp(2rem, 1.9vw, 2.8rem);
  }

  .insight-article-section-number {
    font-size: clamp(0.74rem, 0.58vw, 0.84rem);
  }

  /* =======================================================
     CONTACT — WIDER WORKING COMPOSITION
  ======================================================= */

  .contact-hero {
    min-height: clamp(700px, 72vh, 900px);
  }

  .contact-hero-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 680px);
    gap: clamp(4rem, 6vw, 8rem);
    padding-top: clamp(3rem, 3vw, 4.25rem);
    padding-bottom: clamp(3rem, 3vw, 4.25rem);
  }

  .contact-hero-content {
    width: min(100%, 600px);
  }

  .contact-hero-title {
    font-size: clamp(3.4rem, 3.2vw, 4.6rem);
  }

  .contact-hero-description {
    width: min(100%, 500px);
  }

  .contact-hero-description p {
    font-size: clamp(0.9rem, 0.72vw, 1.02rem);
  }

  .contact-form-card {
    width: min(100%, 680px);
    padding: clamp(1.75rem, 2vw, 2.5rem);
  }

  .contact-form-heading h2 {
    font-size: clamp(1.55rem, 1.35vw, 1.9rem);
  }

  .contact-form-heading p,
  .contact-field label,
  .contact-field input,
  .contact-field select,
  .contact-field textarea {
    font-size: clamp(0.74rem, 0.6vw, 0.86rem);
  }

  .contact-details-heading {
    width: min(100%, 920px);
  }

  .contact-details-title {
    font-size: clamp(2rem, 2vw, 2.8rem);
  }

  .contact-detail-card {
    min-height: clamp(280px, 18vw, 340px);
    padding: clamp(1.5rem, 1.7vw, 2.1rem);
  }

  .contact-detail-icon {
    width: 62px;
    height: 62px;
  }

  .contact-detail-card h3 {
    font-size: clamp(1.05rem, 0.9vw, 1.28rem);
  }

  .contact-detail-body,
  .contact-detail-body p,
  .contact-detail-action {
    font-size: clamp(0.78rem, 0.62vw, 0.9rem);
  }

  /* =======================================================
     TAX CALCULATOR — USE LARGE DESKTOP CANVAS
  ======================================================= */

  .tax-calculator-intro-inner,
  .tax-calculator-workspace,
  .tax-calculator-notes {
    width: min(100%, 1400px);
  }

  .tax-calculator-title {
    font-size: clamp(3.5rem, 3.4vw, 4.8rem);
  }

  .tax-calculator-description {
    width: min(100%, 760px);
    font-size: clamp(0.86rem, 0.7vw, 1rem);
  }

  .tax-calculator-intro-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(300px, 0.42fr);
  }

  .tax-calculator-workspace {
    grid-template-columns:
      minmax(0, 0.44fr)
      minmax(0, 0.56fr);
  }

  .tax-calculator-input-panel,
  .tax-calculator-result-panel {
    padding: clamp(2rem, 2.3vw, 3rem);
  }

  .tax-calculator-panel-heading h2 {
    font-size: clamp(1.45rem, 1.25vw, 1.8rem);
  }

  .tax-calculator-panel-heading > p:last-child,
  .tax-calculator-field label,
  .tax-calculator-field input,
  .tax-calculator-field select {
    font-size: clamp(0.74rem, 0.6vw, 0.86rem);
  }

  .tax-calculator-field input,
  .tax-calculator-field select,
  .tax-calculator-submit {
    min-height: 48px;
  }

  .tax-calculator-empty-result h2 {
    font-size: clamp(1.7rem, 1.5vw, 2.2rem);
  }

  .tax-calculator-empty-result > p:not(.tax-calculator-result-eyebrow) {
    font-size: clamp(0.76rem, 0.62vw, 0.9rem);
  }

  .tax-calculator-notes-copy h2,
  .tax-calculator-advice h2 {
    font-size: clamp(1.25rem, 1.05vw, 1.55rem);
  }

  .tax-calculator-notes-copy > p:not(.tax-calculator-notes-eyebrow),
  .tax-calculator-advice > p {
    font-size: clamp(0.7rem, 0.56vw, 0.82rem);
  }
}

/* =========================================================
   VERY LARGE DESKTOP — FINAL BREATHING ADJUSTMENT
   Keeps 2560px from feeling like a 1920px composition.
========================================================= */

@media (min-width: 2300px) {
  :root {
    --page-padding: clamp(6rem, 4.25vw, 8rem);
  }

  .home-hero-copy {
    width: min(100%, 840px);
  }

  .home-hero-description {
    width: min(100%, 650px);
  }

  .home-service-card {
    min-height: 195px;
  }

  .about-hero-content,
  .insights-hero-content {
    width: min(100%, 780px);
  }

  .about-story-content {
    max-width: 900px;
  }

  .about-director-photo-frame,
  .about-director-caption {
    width: min(100%, 640px);
  }

  .services-hero-content {
    width: min(100%, 860px);
  }

  .insight-article-hero-inner {
    width: min(calc(100% - (var(--page-padding) * 2)), 1760px);
  }

  .insight-article-image-container {
    width: min(calc(100% - (var(--page-padding) * 2)), 1980px);
  }

  .contact-hero-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 720px);
  }

  .contact-form-card {
    width: min(100%, 720px);
  }

  .tax-calculator-intro-inner,
  .tax-calculator-workspace,
  .tax-calculator-notes {
    width: min(100%, 1520px);
  }
}

/* =========================================================
   HOME — LARGE DESKTOP FINAL LOCK
   Final typography / header / UI refinement after the
   structural large-desktop pass.

   1366px and normal desktop remain untouched.
   Growth begins at 1536px and stays fluid through 2560px+.
========================================================= */

@media (min-width: 1536px) {
  .home-page-body .header-inner {
    min-height: clamp(112px, 6.4vw, 142px);
  }

  .home-page-body .brand-logo {
    width: clamp(100px, 5.4vw, 136px);
  }

  .home-page-body .desktop-nav {
    gap: clamp(2.3rem, 2.75vw, 3.8rem);
  }

  .home-page-body .nav-link {
    font-size: clamp(1rem, 0.82vw, 1.16rem);
  }

  .home-hero-copy {
    width: min(100%, clamp(680px, 38vw, 900px));
  }

  .home-hero-title {
    font-size: clamp(4.75rem, 4.8vw, 7.25rem);
  }

  .home-hero-description {
    width: min(100%, 680px);
    margin-top: clamp(1.65rem, 2.6vh, 2.35rem);
    font-size: clamp(1rem, 0.9vw, 1.22rem);
    line-height: 1.7;
  }

  .home-hero-actions {
    gap: 1.15rem;
    margin-top: clamp(2.05rem, 3.25vh, 2.95rem);
  }

  .home-button {
    min-height: clamp(52px, 3vw, 62px);
    padding: 0.95rem 1.4rem;
    font-size: clamp(0.9rem, 0.78vw, 1.06rem);
  }

  .home-button-primary {
    gap: 1.15rem;
  }

  .home-button-secondary {
    gap: 0.65rem;
  }

  .calendar-icon {
    width: 20px;
    height: 20px;
  }

  .home-button-arrow {
    font-size: 1.15rem;
  }

  .home-service-card {
    min-height: clamp(155px, 15.5vh, 205px);
    padding: clamp(1.3rem, 1.5vw, 1.9rem);
    column-gap: clamp(1.05rem, 1.1vw, 1.4rem);
  }

  .home-service-icon {
    width: clamp(64px, 4.15vw, 90px);
    height: clamp(64px, 4.15vw, 90px);
  }

  .home-service-content {
    padding-right: 1.9rem;
  }

  .home-service-content h2 {
    font-size: clamp(1.08rem, 0.95vw, 1.35rem);
  }

  .home-service-content p {
    width: min(100%, 310px);
    margin-top: 0.78rem;
    font-size: clamp(0.84rem, 0.75vw, 1rem);
    line-height: 1.6;
  }

  .home-service-arrow {
    right: 1.35rem;
    bottom: 1.15rem;
    font-size: 1.45rem;
  }
}

/* Give true 2K / 1440p canvases a final measured step up
   without changing the composition or animation system. */
@media (min-width: 2300px) {
  .home-page-body .brand-logo {
    width: 136px;
  }

  .home-page-body .nav-link {
    font-size: 1.16rem;
  }

  .home-hero-copy {
    width: min(100%, 920px);
  }

  .home-hero-description {
    width: min(100%, 700px);
  }

  .home-service-content p {
    width: min(100%, 330px);
  }
}
/* =========================================================
   ABOUT — LARGE DESKTOP FULL PASS
   Candidate for 1920 / 2200 / 2560 review.

   Goals:
   - preserve the approved 1366-and-below About layout
   - match the locked Home header scale on large desktops
   - remove stretched-panel / tiny-content behaviour
   - strengthen typography, imagery, icons and CTA hierarchy
   - keep existing reveals, page transitions and interactions intact
========================================================= */

@media (min-width: 1536px) {
  /* =======================================================
     ABOUT — HEADER / FOOTER
     Match the large-screen authority already approved on Home.
  ======================================================= */

  .about-page-body .header-inner {
    min-height: clamp(112px, 6.4vw, 142px);
  }

  .about-page-body .brand-logo {
    width: clamp(100px, 5.4vw, 136px);
  }

  .about-page-body .desktop-nav {
    gap: clamp(2.3rem, 2.75vw, 3.8rem);
  }

  .about-page-body .nav-link {
    font-size: clamp(1rem, 0.82vw, 1.16rem);
  }

  .about-page-body .footer-inner {
    gap: clamp(1.7rem, 2.5vw, 3.2rem);
    padding-top: clamp(1.35rem, 1.2vw, 1.7rem);
    padding-bottom: clamp(1.6rem, 1.4vw, 2rem);
  }

  .about-page-body .footer-copyright p,
  .about-page-body .footer-legal a {
    font-size: clamp(0.82rem, 0.68vw, 0.96rem);
  }

  .about-page-body .footer-social a {
    width: clamp(32px, 1.7vw, 38px);
    height: clamp(32px, 1.7vw, 38px);
  }

  .about-page-body .footer-social img {
    width: clamp(19px, 1vw, 22px);
    height: clamp(19px, 1vw, 22px);
  }

  /* =======================================================
     ABOUT — HERO
  ======================================================= */

  .about-hero-grid {
    min-height: clamp(520px, 38vh, 660px);
    padding-top: clamp(3rem, 3vw, 4.5rem);
  }

  .about-hero-content {
    width: min(100%, clamp(760px, 42vw, 940px));
    padding-left: clamp(5rem, 5vw, 8.5rem);
  }

  .about-eyebrow {
    margin-bottom: 1.15rem;
    font-size: clamp(0.76rem, 0.62vw, 0.9rem);
  }

  .about-hero-title {
    font-size: clamp(3.55rem, 3.45vw, 5.1rem);
    line-height: 1.02;
  }

  .about-hero-rule {
    width: clamp(42px, 2.2vw, 54px);
    margin-top: clamp(1.35rem, 1.3vw, 1.7rem);
  }

  .about-hero-description {
    width: min(100%, 650px);
    margin-top: clamp(1.3rem, 1.25vw, 1.7rem);
    font-size: clamp(0.98rem, 0.82vw, 1.16rem);
    line-height: 1.78;
  }

  /* =======================================================
     ABOUT — OUR STORY
     Pull the two columns back into one editorial composition.
  ======================================================= */

  .about-story-inner {
    grid-template-columns:
      minmax(0, 0.92fr)
      minmax(0, 1.08fr);
    gap: clamp(3rem, 3.6vw, 6rem);
    min-height: clamp(455px, 23vw, 570px);
    padding: clamp(3.5rem, 3.4vw, 5rem) clamp(5rem, 5vw, 8.5rem);
  }

  .about-story-eyebrow {
    margin-bottom: 1rem;
    font-size: clamp(0.72rem, 0.6vw, 0.86rem);
  }

  .about-story-title {
    max-width: 720px;
    font-size: clamp(3.15rem, 3vw, 4.65rem);
    line-height: 1.06;
  }

  .about-story-rule {
    width: clamp(44px, 2.2vw, 56px);
    margin-top: 1.5rem;
  }

  .about-story-content {
    justify-self: start;
    max-width: 940px;
  }

  .about-story-content p {
    font-size: clamp(0.98rem, 0.82vw, 1.16rem);
    line-height: 1.82;
  }

  .about-story-content p + p {
    margin-top: clamp(1.15rem, 1.1vw, 1.5rem);
  }

  .about-story-signature-lockup {
    gap: clamp(1rem, 1vw, 1.35rem);
    margin-top: clamp(1.65rem, 1.5vw, 2rem);
  }

  .about-story-signature {
    width: clamp(210px, 11.5vw, 285px);
  }

  .about-story-signature-divider {
    height: clamp(64px, 3.4vw, 78px);
  }

  .about-story-signature-brand strong {
    font-size: clamp(0.88rem, 0.7vw, 1.04rem);
  }

  .about-story-signature-brand span {
    font-size: clamp(0.6rem, 0.5vw, 0.74rem);
  }

  .about-story-watermark {
    right: clamp(-4rem, -2vw, -2rem);
    width: clamp(320px, 21vw, 500px);
  }

  /* =======================================================
     ABOUT — DIRECTOR
  ======================================================= */

  .about-director-grid {
    grid-template-columns:
      minmax(560px, 0.92fr)
      minmax(0, 1.08fr);
  }

  .about-director-visual {
    padding: 0 clamp(2.5rem, 3vw, 4.5rem) clamp(2.5rem, 3vw, 4.5rem);
  }

  .about-director-photo-frame,
  .about-director-caption {
    width: min(100%, clamp(570px, 30vw, 720px));
  }

  .about-director-caption {
    gap: 0.3rem;
    margin-top: 0.75rem;
  }

  .about-director-caption strong {
    font-size: clamp(0.98rem, 0.78vw, 1.14rem);
  }

  .about-director-caption span {
    font-size: clamp(0.68rem, 0.55vw, 0.8rem);
  }

  .about-director-message {
    padding: clamp(4rem, 4.3vw, 6.5rem);
  }

  .about-director-eyebrow {
    margin-bottom: 1rem;
    font-size: clamp(0.72rem, 0.6vw, 0.86rem);
  }

  .about-director-title {
    max-width: 940px;
    font-size: clamp(3.2rem, 3vw, 4.7rem);
    line-height: 1.06;
  }

  .about-director-rule {
    width: clamp(44px, 2.2vw, 56px);
    margin-top: 1.5rem;
  }

  .about-director-intro,
  .about-director-copy,
  .about-director-quote {
    max-width: 940px;
  }

  .about-director-intro {
    margin-top: 1.7rem;
  }

  .about-director-intro,
  .about-director-copy p {
    font-size: clamp(0.98rem, 0.8vw, 1.14rem);
    line-height: 1.82;
  }

  .about-director-copy {
    gap: 1rem;
  }

  .about-director-quote {
    margin: clamp(1.8rem, 1.7vw, 2.25rem) 0;
    padding-left: clamp(1.35rem, 1.2vw, 1.75rem);
  }

  .about-director-quote p {
    font-size: clamp(1.35rem, 1.2vw, 1.78rem);
    line-height: 1.5;
  }

  /* =======================================================
     ABOUT — PILLARS
  ======================================================= */

  .about-pillars {
    padding: clamp(4.75rem, 4.2vw, 6.5rem) 0 clamp(4.75rem, 4.4vw, 6.75rem);
  }

  .about-pillar-card {
    min-height: clamp(275px, 15vw, 340px);
    column-gap: clamp(1rem, 1.1vw, 1.4rem);
    row-gap: clamp(1rem, 1vw, 1.3rem);
    padding: clamp(2rem, 2.1vw, 3rem) clamp(2rem, 2.3vw, 3.25rem);
  }

  .about-pillar-icon {
    width: clamp(82px, 4.5vw, 104px);
    height: clamp(82px, 4.5vw, 104px);
  }

  .about-pillar-content h2 {
    font-size: clamp(1.2rem, 1vw, 1.5rem);
  }

  .about-pillar-content h2::after {
    width: clamp(30px, 1.5vw, 38px);
    margin-top: 0.6rem;
  }

  .about-pillar-content p {
    font-size: clamp(0.92rem, 0.76vw, 1.08rem);
    line-height: 1.75;
  }

  /* =======================================================
     ABOUT — COMMITMENT
  ======================================================= */

  .about-commitment-card {
    grid-template-columns:
      auto
      minmax(0, 1.35fr)
      1px
      minmax(300px, 0.75fr);
    column-gap: clamp(2.5rem, 3.5vw, 5.5rem);
    min-height: clamp(275px, 16vw, 350px);
    padding: clamp(2.4rem, 2.7vw, 3.75rem) clamp(3rem, 3.4vw, 5rem);
  }

  .about-commitment-icon {
    width: clamp(118px, 6vw, 145px);
    height: clamp(118px, 6vw, 145px);
  }

  .about-commitment-copy-body {
    max-width: 860px;
    gap: 0.9rem;
  }

  .about-commitment-eyebrow {
    margin-bottom: 0.55rem;
    font-size: clamp(0.78rem, 0.64vw, 0.92rem);
  }

  .about-commitment-copy-body p,
  .about-commitment-text {
    max-width: 820px;
    font-size: clamp(0.9rem, 0.74vw, 1.06rem);
    line-height: 1.72;
  }

  .about-commitment-list {
    gap: clamp(0.6rem, 0.55vw, 0.8rem);
  }

  .about-commitment-list li {
    gap: 0.7rem;
    font-size: clamp(0.9rem, 0.74vw, 1.04rem);
    line-height: 1.4;
  }

  .about-commitment-check {
    width: 16px;
    height: 16px;
    font-size: 0.76rem;
  }

  /* =======================================================
     ABOUT — BRAND BOOK
  ======================================================= */

  .about-brand-book {
    margin-top: clamp(3.5rem, 3.5vw, 5.25rem);
  }

  .about-brand-book-grid {
    grid-template-columns:
      minmax(0, 1.02fr)
      minmax(520px, 0.98fr);
    gap: clamp(4.5rem, 6vw, 9rem);
    padding: clamp(3.5rem, 3.8vw, 5.5rem) clamp(5rem, 5vw, 8.5rem);
  }

  .about-brand-book-preview-link {
    width: min(100%, clamp(500px, 27vw, 650px));
  }

  .about-brand-book-eyebrow {
    margin-bottom: 1rem;
    font-size: clamp(0.72rem, 0.6vw, 0.86rem);
  }

  .about-brand-book-title {
    font-size: clamp(3.25rem, 3vw, 4.75rem);
    line-height: 1.06;
  }

  .about-brand-book-rule {
    width: clamp(44px, 2.2vw, 56px);
    margin-top: 1.5rem;
  }

  .about-brand-book-description {
    max-width: 820px;
    margin-top: 1.65rem;
    font-size: clamp(0.98rem, 0.8vw, 1.14rem);
    line-height: 1.8;
  }

  .about-brand-book-actions {
    gap: 1.25rem;
    margin-top: 2rem;
  }

  .about-brand-book-primary {
    min-height: 50px;
    padding: 0.85rem 1.2rem;
    font-size: clamp(0.82rem, 0.66vw, 0.96rem);
  }

  .about-brand-book-download {
    font-size: clamp(0.78rem, 0.63vw, 0.9rem);
  }

  /* =======================================================
     ABOUT — CLOSING / CTA
  ======================================================= */

  .about-closing {
    padding: clamp(4rem, 4vw, 5.75rem) 0 clamp(2.5rem, 2.7vw, 3.75rem);
  }

  .about-closing-grid {
    grid-template-columns:
      minmax(0, 1.22fr)
      minmax(420px, 0.78fr);
    gap: clamp(4rem, 5vw, 8rem);
  }

  .about-closing-copy {
    max-width: 920px;
    column-gap: 1.35rem;
  }

  .about-closing-copy h2 {
    font-size: clamp(2.45rem, 2.3vw, 3.5rem);
    line-height: 1.12;
  }

  .about-closing-copy p {
    margin-top: 0.95rem;
    font-size: clamp(0.9rem, 0.72vw, 1.04rem);
    line-height: 1.7;
  }

  .about-closing-card {
    gap: 1.3rem;
    padding: clamp(1.45rem, 1.5vw, 1.9rem) clamp(1.5rem, 1.7vw, 2.1rem);
    border-radius: 0.9rem;
  }

  .about-closing-icon {
    width: clamp(62px, 3.4vw, 78px);
    height: clamp(62px, 3.4vw, 78px);
  }

  .about-closing-icon svg {
    width: clamp(40px, 2.2vw, 50px);
    height: clamp(40px, 2.2vw, 50px);
  }

  .about-closing-card-content p {
    font-size: clamp(0.78rem, 0.62vw, 0.9rem);
    line-height: 1.45;
  }

  .about-closing-card-content strong {
    margin-top: 0.25rem;
    font-size: clamp(0.96rem, 0.76vw, 1.12rem);
  }

  .about-closing-button {
    min-height: 42px;
    margin-top: 0.85rem;
    padding: 0.65rem 1rem;
    font-size: clamp(0.76rem, 0.6vw, 0.88rem);
  }
}

/* =========================================================
   ABOUT — VERY LARGE DESKTOP REBALANCE
   Extra authority at 2300px+ without simply scaling everything.
========================================================= */

@media (min-width: 2300px) {
  .about-hero-grid {
    min-height: 690px;
  }

  .about-hero-content {
    width: min(100%, 980px);
  }

  .about-hero-title {
    font-size: 5.25rem;
  }

  .about-hero-description {
    width: min(100%, 690px);
    font-size: 1.2rem;
  }

  .about-story-inner {
    gap: 5.5rem;
    min-height: 590px;
  }

  .about-story-title {
    max-width: 780px;
    font-size: 4.8rem;
  }

  .about-story-content {
    max-width: 980px;
  }

  .about-story-content p {
    font-size: 1.18rem;
  }

  .about-director-photo-frame,
  .about-director-caption {
    width: min(100%, 740px);
  }

  .about-director-title {
    font-size: 4.8rem;
  }

  .about-director-intro,
  .about-director-copy p {
    font-size: 1.16rem;
  }

  .about-director-quote p {
    font-size: 1.82rem;
  }

  .about-pillar-card {
    min-height: 350px;
  }

  .about-pillar-icon {
    width: 108px;
    height: 108px;
  }

  .about-pillar-content h2 {
    font-size: 1.52rem;
  }

  .about-pillar-content p {
    font-size: 1.08rem;
  }

  .about-commitment-card {
    min-height: 365px;
  }

  .about-commitment-icon {
    width: 150px;
    height: 150px;
  }

  .about-brand-book-preview-link {
    width: min(100%, 680px);
  }

  .about-brand-book-title {
    font-size: 4.85rem;
  }

  .about-brand-book-description {
    font-size: 1.16rem;
  }

  .about-closing-copy h2 {
    font-size: 3.6rem;
  }

  .about-closing-copy p {
    font-size: 1.06rem;
  }
}

/* =========================================================
   ABOUT — LARGE DESKTOP REFINEMENT PASS
   Director tightening + lower-half authority pass
   Append AFTER the existing About large-desktop rules
========================================================= */

@media (min-width: 1536px) {
  /* =======================================================
     DIRECTOR — tighten portrait block + reduce dead navy air
  ======================================================= */

  .about-director-grid {
    grid-template-columns:
      minmax(620px, 0.98fr)
      minmax(0, 1.02fr);
  }

  .about-director-visual {
    padding: clamp(1.75rem, 2vw, 2.75rem) clamp(2.1rem, 2.4vw, 3.4rem)
      clamp(1.6rem, 1.9vw, 2.35rem);
  }

  .about-director-photo-frame,
  .about-director-caption {
    width: min(100%, clamp(600px, 31vw, 760px));
  }

  .about-director-caption {
    gap: 0.26rem;
    margin-top: 0.7rem;
  }

  .about-director-message {
    padding: clamp(3.1rem, 3.2vw, 4.6rem) clamp(3rem, 3.4vw, 4.75rem);
  }

  .about-director-title {
    max-width: 860px;
    font-size: clamp(3rem, 2.8vw, 4.25rem);
  }

  .about-director-intro,
  .about-director-copy,
  .about-director-quote {
    max-width: 860px;
  }

  .about-director-intro,
  .about-director-copy p {
    font-size: clamp(1rem, 0.82vw, 1.12rem);
    line-height: 1.78;
  }

  .about-director-quote {
    margin: 1.6rem 0 1.85rem;
  }

  .about-director-quote p {
    font-size: clamp(1.28rem, 1.08vw, 1.62rem);
    line-height: 1.5;
  }

  /* =======================================================
     PILLARS — give the section more authority
  ======================================================= */

  .about-pillars {
    padding: clamp(4rem, 4vw, 5.5rem) 0 clamp(4.25rem, 4.2vw, 5.85rem);
  }

  .about-pillar-card {
    min-height: clamp(300px, 16vw, 360px);
    column-gap: clamp(1.05rem, 1.15vw, 1.45rem);
    row-gap: clamp(1rem, 1.05vw, 1.35rem);
    padding: clamp(2.2rem, 2.35vw, 3.1rem) clamp(2.15rem, 2.4vw, 3.2rem);
  }

  .about-pillar-icon {
    width: clamp(88px, 4.7vw, 112px);
    height: clamp(88px, 4.7vw, 112px);
  }

  .about-pillar-content h2 {
    font-size: clamp(1.3rem, 1.05vw, 1.6rem);
    line-height: 1.24;
  }

  .about-pillar-content p {
    max-width: 34ch;
    font-size: clamp(0.96rem, 0.79vw, 1.1rem);
    line-height: 1.8;
  }

  /* =======================================================
     COMMITMENT — make it feel less like a thin strip
  ======================================================= */

  .about-commitment-card {
    grid-template-columns:
      auto
      minmax(0, 1.4fr)
      1px
      minmax(320px, 0.72fr);
    column-gap: clamp(2.75rem, 3.7vw, 5.75rem);
    min-height: clamp(295px, 16.5vw, 370px);
    padding: clamp(2.6rem, 2.8vw, 3.9rem) clamp(3rem, 3.5vw, 5.1rem);
  }

  .about-commitment-icon {
    width: clamp(122px, 6.1vw, 150px);
    height: clamp(122px, 6.1vw, 150px);
  }

  .about-commitment-copy-body {
    max-width: 920px;
    gap: 0.95rem;
  }

  .about-commitment-eyebrow {
    font-size: clamp(0.8rem, 0.66vw, 0.94rem);
    margin-bottom: 0.55rem;
  }

  .about-commitment-copy-body p,
  .about-commitment-text {
    max-width: 840px;
    font-size: clamp(0.96rem, 0.78vw, 1.12rem);
    line-height: 1.75;
  }

  .about-commitment-list {
    gap: clamp(0.65rem, 0.6vw, 0.82rem);
  }

  .about-commitment-list li {
    gap: 0.75rem;
    font-size: clamp(0.94rem, 0.78vw, 1.08rem);
    line-height: 1.42;
  }

  .about-commitment-check {
    width: 17px;
    height: 17px;
    font-size: 0.78rem;
  }

  /* =======================================================
     BRAND BOOK — only tiny balancing
  ======================================================= */

  .about-brand-book-grid {
    gap: clamp(4rem, 5vw, 7rem);
  }

  .about-brand-book-preview-link {
    width: min(100%, clamp(520px, 27vw, 670px));
  }

  .about-brand-book-content {
    max-width: 920px;
  }

  .about-brand-book-description {
    max-width: 760px;
  }

  /* =======================================================
     CLOSING — give the final statement and CTA real weight
  ======================================================= */

  .about-closing {
    padding: clamp(4.5rem, 4.4vw, 6rem) 0 clamp(3rem, 3vw, 4rem);
  }

  .about-closing-grid {
    grid-template-columns:
      minmax(0, 1.3fr)
      minmax(500px, 0.7fr);
    gap: clamp(3.25rem, 4.2vw, 6rem);
  }

  .about-closing-copy {
    max-width: 980px;
    column-gap: 1.45rem;
  }

  .about-closing-copy h2 {
    font-size: clamp(2.7rem, 2.45vw, 3.8rem);
    line-height: 1.12;
  }

  .about-closing-copy p {
    margin-top: 0.95rem;
    font-size: clamp(0.96rem, 0.78vw, 1.08rem);
    line-height: 1.72;
  }

  .about-closing-card {
    gap: 1.35rem;
    padding: clamp(1.55rem, 1.6vw, 2rem) clamp(1.75rem, 1.8vw, 2.3rem);
    border-radius: 0.95rem;
  }

  .about-closing-icon {
    width: clamp(66px, 3.55vw, 80px);
    height: clamp(66px, 3.55vw, 80px);
  }

  .about-closing-icon svg {
    width: clamp(42px, 2.25vw, 50px);
    height: clamp(42px, 2.25vw, 50px);
  }

  .about-closing-card-content p {
    font-size: clamp(0.82rem, 0.66vw, 0.94rem);
    line-height: 1.45;
  }

  .about-closing-card-content strong {
    margin-top: 0.25rem;
    font-size: clamp(1.02rem, 0.8vw, 1.18rem);
  }

  .about-closing-button {
    min-height: 46px;
    margin-top: 0.9rem;
    padding: 0.72rem 1.05rem;
    font-size: clamp(0.78rem, 0.63vw, 0.9rem);
  }

  /* =======================================================
     FOOTER — small but important 2K bump
  ======================================================= */

  .about-page-body .footer-inner {
    gap: clamp(1.9rem, 2.6vw, 3.6rem);
    padding-top: clamp(1.5rem, 1.35vw, 1.9rem);
    padding-bottom: clamp(1.8rem, 1.55vw, 2.2rem);
  }

  .about-page-body .footer-copyright p,
  .about-page-body .footer-legal a {
    font-size: clamp(0.86rem, 0.72vw, 1rem);
  }

  .about-page-body .footer-social a {
    width: clamp(34px, 1.8vw, 40px);
    height: clamp(34px, 1.8vw, 40px);
  }

  .about-page-body .footer-social img {
    width: clamp(20px, 1.05vw, 23px);
    height: clamp(20px, 1.05vw, 23px);
  }
}

@media (min-width: 2300px) {
  .about-director-photo-frame,
  .about-director-caption {
    width: min(100%, 780px);
  }

  .about-director-message {
    padding: 4rem 4.4rem;
  }

  .about-pillar-content p {
    max-width: 36ch;
  }

  .about-closing-grid {
    grid-template-columns:
      minmax(0, 1.22fr)
      minmax(560px, 0.78fr);
  }
}

/* =========================================================
   ABOUT — DIRECTOR PORTRAIT MICRO-PASS
   Final candidate for 1920 / 2200 / 2560.
   Tightens the navy portrait enclosure only.
========================================================= */

@media (min-width: 1536px) {
  .about-director-grid {
    grid-template-columns:
      minmax(560px, 0.78fr)
      minmax(0, 1.22fr);
  }

  .about-director-visual {
    padding: clamp(1rem, 1.2vw, 1.5rem) clamp(1.1rem, 1.35vw, 1.75rem)
      clamp(1.25rem, 1.4vw, 1.8rem);
  }

  .about-director-photo-frame,
  .about-director-caption {
    width: min(100%, clamp(620px, 34vw, 840px));
  }

  .about-director-caption {
    margin-top: 0.65rem;
  }
}

/* =========================================================
   SERVICES — LARGE DESKTOP AUTHORITY PASS
   Final candidate for 1920 / 2200 / 2560.
   Preserves the existing structure and all smaller breakpoints.
========================================================= */

@media (min-width: 1536px) {
  /* Match the locked large-desktop header language without
     changing other pages. */
  body:has(.services-page) .header-inner {
    min-height: clamp(112px, 6.4vw, 142px);
  }

  body:has(.services-page) .brand-logo {
    width: clamp(100px, 5.4vw, 136px);
  }

  body:has(.services-page) .desktop-nav {
    gap: clamp(2.3rem, 2.75vw, 3.8rem);
  }

  body:has(.services-page) .nav-link {
    font-size: clamp(1rem, 0.82vw, 1.16rem);
  }

  /* HERO — keep the composition, strengthen supporting copy. */
  .services-hero {
    min-height: clamp(510px, 42vh, 650px);
  }

  .services-hero-content {
    width: min(100%, 860px);
  }

  .services-eyebrow {
    font-size: clamp(0.76rem, 0.62vw, 0.9rem);
  }

  .services-hero-title {
    font-size: clamp(5.1rem, 5vw, 6.6rem);
  }

  .services-hero-rule {
    width: clamp(42px, 2vw, 54px);
  }

  .services-hero-description {
    width: min(100%, 620px);
    font-size: clamp(1rem, 0.82vw, 1.15rem);
    line-height: 1.78;
  }

  .services-hero-watermark {
    height: min(80%, 490px);
  }

  /* OVERVIEW — slightly less empty card height, stronger internals. */
  .services-overview-grid {
    gap: clamp(1.1rem, 1.35vw, 1.7rem);
  }

  .services-overview-card {
    min-height: clamp(300px, 19vw, 360px);
    padding: clamp(1.8rem, 2vw, 2.5rem);
  }

  .services-card-icon {
    width: clamp(94px, 4.8vw, 112px);
    height: clamp(94px, 4.8vw, 112px);
    margin-bottom: clamp(1.15rem, 1.1vw, 1.45rem);
  }

  .services-card-icon img {
    width: clamp(76px, 3.9vw, 90px);
    height: clamp(76px, 3.9vw, 90px);
  }

  .services-overview-card h2 {
    font-size: clamp(1.72rem, 1.48vw, 2.15rem);
  }

  .services-card-rule {
    width: 32px;
    margin-top: 0.9rem;
  }

  .services-overview-card > p {
    max-width: 34ch;
    font-size: clamp(0.9rem, 0.74vw, 1.02rem);
    line-height: 1.75;
  }

  .services-card-link {
    font-size: clamp(0.84rem, 0.68vw, 0.96rem);
  }

  /* DETAIL INTRO — pull the explanatory copy back toward the title. */
  .services-detail-intro {
    grid-template-columns:
      minmax(0, 1.05fr)
      minmax(420px, 0.95fr);
    gap: clamp(4rem, 5.5vw, 7rem);
  }

  .services-detail-eyebrow {
    font-size: clamp(0.76rem, 0.62vw, 0.9rem);
  }

  .services-detail-title {
    font-size: clamp(4.2rem, 4vw, 5.8rem);
  }

  .services-detail-intro-copy {
    padding-left: clamp(1.5rem, 1.4vw, 2rem);
  }

  .services-detail-intro-copy p {
    width: min(100%, 650px);
    font-size: clamp(0.98rem, 0.8vw, 1.12rem);
    line-height: 1.8;
  }

  /* DETAIL COLUMNS — keep four columns but give the content authority. */
  .service-detail-column,
  .service-detail-face {
    padding: clamp(2.65rem, 2.7vw, 3.65rem) clamp(1.9rem, 1.9vw, 2.65rem);
  }

  .service-detail-icon {
    width: clamp(116px, 5.2vw, 128px);
    height: clamp(116px, 5.2vw, 128px);
    margin-bottom: 1.35rem;
  }

  .service-detail-icon img {
    width: clamp(102px, 4.6vw, 112px);
    height: clamp(102px, 4.6vw, 112px);
  }

  .service-detail-label,
  .service-detail-back-eyebrow {
    font-size: clamp(0.78rem, 0.64vw, 0.9rem);
  }

  .service-detail-column h3,
  .service-detail-back h3 {
    min-height: 4rem;
    font-size: clamp(1.35rem, 1.12vw, 1.7rem);
    line-height: 1.35;
  }

  .service-detail-rule {
    width: 30px;
    margin: 1.25rem 0 1.4rem;
  }

  .service-detail-column ul {
    gap: 0.82rem;
    margin-bottom: 2.2rem;
  }

  .service-detail-column li,
  .service-detail-back-copy p {
    font-size: clamp(0.9rem, 0.73vw, 1.04rem);
    line-height: 1.68;
  }

  .service-detail-link,
  .service-flip-back {
    font-size: clamp(0.84rem, 0.68vw, 0.96rem);
  }

  /* CLOSING CTA — stronger finish at 2K without changing its layout. */
  .services-closing-inner {
    grid-template-columns:
      minmax(0, 1fr)
      auto
      auto;
    gap: clamp(2.5rem, 3.5vw, 4.5rem);
    padding: clamp(2.35rem, 2.7vw, 3.4rem);
  }

  .services-closing-message {
    gap: clamp(1.5rem, 1.8vw, 2.35rem);
  }

  .services-closing-icon {
    width: clamp(96px, 4.4vw, 110px);
    height: clamp(96px, 4.4vw, 110px);
  }

  .services-closing-icon svg {
    width: clamp(82px, 3.8vw, 94px);
    height: clamp(82px, 3.8vw, 94px);
  }

  .services-closing-copy h2 {
    font-size: clamp(2rem, 1.75vw, 2.6rem);
  }

  .services-closing-copy p {
    max-width: 760px;
    font-size: clamp(0.94rem, 0.76vw, 1.08rem);
    line-height: 1.72;
  }

  .services-closing-divider {
    height: clamp(70px, 4vw, 88px);
  }

  .services-closing-button {
    min-width: 190px;
    padding: 1.05rem 1.6rem;
    font-size: clamp(0.88rem, 0.7vw, 1rem);
  }

  /* FOOTER — match the large-desktop weight of the finished pages. */
  body:has(.services-page) .footer-inner {
    gap: clamp(1.9rem, 2.6vw, 3.6rem);
    padding-top: clamp(1.5rem, 1.35vw, 1.9rem);
    padding-bottom: clamp(1.8rem, 1.55vw, 2.2rem);
  }

  body:has(.services-page) .footer-copyright p,
  body:has(.services-page) .footer-legal a {
    font-size: clamp(0.86rem, 0.72vw, 1rem);
  }

  body:has(.services-page) .footer-social a {
    width: clamp(34px, 1.8vw, 40px);
    height: clamp(34px, 1.8vw, 40px);
  }

  body:has(.services-page) .footer-social img {
    width: clamp(20px, 1.05vw, 23px);
    height: clamp(20px, 1.05vw, 23px);
  }
}

@media (min-width: 2300px) {
  .services-hero-content {
    width: min(100%, 900px);
  }

  .services-hero-description {
    width: min(100%, 660px);
    font-size: 1.16rem;
  }

  .services-overview-card {
    min-height: 365px;
  }

  .services-overview-card > p {
    max-width: 36ch;
  }

  .services-detail-intro-copy p {
    width: min(100%, 700px);
    font-size: 1.14rem;
  }

  .service-detail-column h3,
  .service-detail-back h3 {
    font-size: 1.72rem;
  }

  .service-detail-column li,
  .service-detail-back-copy p {
    font-size: 1.04rem;
  }

  .services-closing-copy h2 {
    font-size: 2.65rem;
  }

  .services-closing-copy p {
    font-size: 1.08rem;
  }
}

/* =========================================================
   SERVICES — LOWER HALF MICRO-PASS
   Final candidate for 1920 / 2200 / 2560.
   Only strengthens the detail intro, service columns,
   closing CTA and footer. Hero + overview remain untouched.
========================================================= */

@media (min-width: 1536px) {
  /* DETAIL INTRO — stronger supporting paragraph, tighter relation */
  .services-detail-intro {
    grid-template-columns:
      minmax(0, 1.08fr)
      minmax(440px, 0.92fr);
    gap: clamp(3.4rem, 4.5vw, 5.8rem);
  }

  .services-detail-intro-copy p {
    width: min(100%, 700px);
    font-size: clamp(1.04rem, 0.84vw, 1.18rem);
    line-height: 1.78;
  }

  /* DETAIL COLUMNS — final typography authority pass */
  .service-detail-label,
  .service-detail-back-eyebrow {
    font-size: clamp(0.82rem, 0.66vw, 0.94rem);
  }

  .service-detail-column h3,
  .service-detail-back h3 {
    font-size: clamp(1.42rem, 1.16vw, 1.78rem);
    line-height: 1.32;
  }

  .service-detail-column li,
  .service-detail-back-copy p {
    font-size: clamp(0.96rem, 0.77vw, 1.08rem);
    line-height: 1.7;
  }

  .service-detail-link,
  .service-flip-back {
    font-size: clamp(0.88rem, 0.7vw, 1rem);
  }

  /* CLOSING CTA — more visual weight without changing layout */
  .services-closing-inner {
    padding: clamp(2.6rem, 2.9vw, 3.7rem);
  }

  .services-closing-icon {
    width: clamp(102px, 4.6vw, 116px);
    height: clamp(102px, 4.6vw, 116px);
  }

  .services-closing-icon svg {
    width: clamp(86px, 4vw, 98px);
    height: clamp(86px, 4vw, 98px);
  }

  .services-closing-copy h2 {
    font-size: clamp(2.12rem, 1.82vw, 2.72rem);
  }

  .services-closing-copy p {
    max-width: 800px;
    font-size: clamp(1rem, 0.8vw, 1.12rem);
    line-height: 1.72;
  }

  .services-closing-button {
    min-width: 200px;
    padding: 1.08rem 1.7rem;
    font-size: clamp(0.92rem, 0.72vw, 1.02rem);
  }

  /* FOOTER — slightly stronger on large desktop */
  body:has(.services-page) .footer-copyright p,
  body:has(.services-page) .footer-legal a {
    font-size: clamp(0.9rem, 0.74vw, 1.04rem);
  }

  body:has(.services-page) .footer-social a {
    width: clamp(36px, 1.85vw, 42px);
    height: clamp(36px, 1.85vw, 42px);
  }

  body:has(.services-page) .footer-social img {
    width: clamp(21px, 1.08vw, 24px);
    height: clamp(21px, 1.08vw, 24px);
  }
}

@media (min-width: 2300px) {
  .services-detail-intro {
    gap: 5rem;
  }

  .services-detail-intro-copy p {
    width: min(100%, 740px);
    font-size: 1.2rem;
  }

  .service-detail-column h3,
  .service-detail-back h3 {
    font-size: 1.82rem;
  }

  .service-detail-column li,
  .service-detail-back-copy p {
    font-size: 1.1rem;
  }

  .services-closing-copy h2 {
    font-size: 2.8rem;
  }

  .services-closing-copy p {
    font-size: 1.14rem;
  }

  body:has(.services-page) .footer-copyright p,
  body:has(.services-page) .footer-legal a {
    font-size: 1.04rem;
  }
}

/* =========================================================
   INSIGHTS ECOSYSTEM — LARGE DESKTOP AUTHORITY PASS
   Final candidate for 1920 / 2200 / 2560.
   Covers:
   - Insights hub
   - Insight article template
   - Tax calculator
   Preserves all smaller breakpoints and existing interactions.
========================================================= */

@media (min-width: 1536px) {
  /* =======================================================
     SHARED LARGE-DESKTOP HEADER / FOOTER
  ======================================================= */

  .insights-page-body .header-inner,
  .insight-article-page-body .header-inner,
  .tax-calculator-page-body .header-inner {
    min-height: clamp(112px, 6.4vw, 142px);
  }

  .insights-page-body .brand-logo,
  .insight-article-page-body .brand-logo,
  .tax-calculator-page-body .brand-logo {
    width: clamp(100px, 5.4vw, 136px);
  }

  .insights-page-body .desktop-nav,
  .insight-article-page-body .desktop-nav,
  .tax-calculator-page-body .desktop-nav {
    gap: clamp(2.3rem, 2.75vw, 3.8rem);
  }

  .insights-page-body .nav-link,
  .insight-article-page-body .nav-link,
  .tax-calculator-page-body .nav-link {
    font-size: clamp(1rem, 0.82vw, 1.16rem);
  }

  .insights-page-body .footer-inner,
  .insight-article-page-body .footer-inner,
  .tax-calculator-page-body .footer-inner {
    gap: clamp(1.9rem, 2.6vw, 3.6rem);
    padding-top: clamp(1.5rem, 1.35vw, 1.9rem);
    padding-bottom: clamp(1.8rem, 1.55vw, 2.2rem);
  }

  .insights-page-body .footer-copyright p,
  .insights-page-body .footer-legal a,
  .insight-article-page-body .footer-copyright p,
  .insight-article-page-body .footer-legal a,
  .tax-calculator-page-body .footer-copyright p,
  .tax-calculator-page-body .footer-legal a {
    font-size: clamp(0.88rem, 0.72vw, 1rem);
  }

  .insights-page-body .footer-social a,
  .insight-article-page-body .footer-social a,
  .tax-calculator-page-body .footer-social a {
    width: clamp(34px, 1.8vw, 40px);
    height: clamp(34px, 1.8vw, 40px);
  }

  .insights-page-body .footer-social img,
  .insight-article-page-body .footer-social img,
  .tax-calculator-page-body .footer-social img {
    width: clamp(20px, 1.05vw, 23px);
    height: clamp(20px, 1.05vw, 23px);
  }

  /* =======================================================
     INSIGHTS HUB — HERO
  ======================================================= */

  .insights-hero-content {
    width: min(100%, 800px);
  }

  .insights-hero-eyebrow {
    font-size: clamp(0.76rem, 0.62vw, 0.9rem);
  }

  .insights-hero-title {
    font-size: clamp(3.45rem, 3.35vw, 4.8rem);
  }

  .insights-hero-rule {
    width: clamp(42px, 2vw, 54px);
  }

  .insights-hero-description {
    width: min(100%, 610px);
    font-size: clamp(0.98rem, 0.8vw, 1.12rem);
    line-height: 1.78;
  }

  /* =======================================================
     FEATURED INSIGHT — copy catches up with the visual
  ======================================================= */

  .featured-insight-card {
    gap: clamp(2.6rem, 3.6vw, 4.6rem);
  }

  .featured-insight-content {
    padding: clamp(0.65rem, 1.05vw, 1.15rem);
  }

  .featured-insight-category {
    font-size: clamp(0.76rem, 0.62vw, 0.9rem);
  }

  .featured-insight-content h2 {
    max-width: 760px;
    font-size: clamp(2.5rem, 2.45vw, 3.4rem);
    line-height: 1.16;
  }

  .featured-insight-description {
    max-width: 740px;
    font-size: clamp(0.94rem, 0.76vw, 1.06rem);
    line-height: 1.78;
  }

  .featured-insight-meta,
  .featured-insight-link {
    font-size: clamp(0.78rem, 0.62vw, 0.9rem);
  }

  /* =======================================================
     CATEGORY CARDS — less empty height, stronger internals
  ======================================================= */

  .insight-category-card {
    min-height: clamp(290px, 16.5vw, 335px);
    padding: clamp(1.55rem, 1.7vw, 2.15rem);
  }

  .insight-category-icon {
    width: clamp(88px, 4.4vw, 102px);
    height: clamp(88px, 4.4vw, 102px);
  }

  .insight-category-icon svg {
    width: clamp(54px, 2.7vw, 62px);
    height: clamp(54px, 2.7vw, 62px);
  }

  .insight-category-card h3 {
    font-size: clamp(1.2rem, 1vw, 1.45rem);
    line-height: 1.24;
  }

  .insight-category-card p {
    font-size: clamp(0.86rem, 0.69vw, 0.98rem);
    line-height: 1.74;
  }

  .insight-category-link {
    font-size: clamp(0.8rem, 0.64vw, 0.9rem);
  }

  /* =======================================================
     LATEST INSIGHTS — stronger editorial card typography
  ======================================================= */

  .latest-insight-image-wrap {
    height: clamp(220px, 13.5vw, 290px);
  }

  .latest-insight-content {
    padding: clamp(1.35rem, 1.4vw, 1.8rem);
  }

  .latest-insight-category {
    font-size: clamp(0.7rem, 0.56vw, 0.8rem);
  }

  .latest-insight-content h3 {
    font-size: clamp(1.18rem, 0.96vw, 1.42rem);
    line-height: 1.38;
  }

  .latest-insight-meta {
    font-size: clamp(0.7rem, 0.56vw, 0.8rem);
  }

  /* =======================================================
     ARTICLE HERO — light authority refinement only
  ======================================================= */

  .insight-article-back {
    font-size: clamp(0.8rem, 0.62vw, 0.9rem);
  }

  .insight-article-category {
    font-size: clamp(0.78rem, 0.62vw, 0.88rem);
  }

  .insight-article-title {
    width: min(100%, 1320px);
    font-size: clamp(4.1rem, 4vw, 5.9rem);
  }

  .insight-article-standfirst {
    width: min(100%, 1080px);
    font-size: clamp(1.1rem, 0.93vw, 1.3rem);
  }

  .insight-article-meta {
    font-size: clamp(0.78rem, 0.6vw, 0.88rem);
  }

  /* =======================================================
     ARTICLE BODY — true large editorial composition
     Wider, but still deliberately readable.
  ======================================================= */

  .insight-article-body {
    width: min(calc(100% - (var(--page-padding) * 2)), 1180px);
  }

  .insight-article-copy {
    width: min(100%, 940px);
  }

  .insight-article-copy p {
    font-size: clamp(1.04rem, 0.8vw, 1.14rem);
    line-height: 1.88;
  }

  .insight-article-opening {
    font-size: clamp(1.22rem, 0.96vw, 1.38rem) !important;
    line-height: 1.78 !important;
  }

  .insight-article-section {
    grid-template-columns:
      58px
      minmax(0, 1fr);
    width: min(100%, 1080px);
  }

  .insight-article-section h2 {
    max-width: 900px;
    font-size: clamp(2.15rem, 2vw, 3rem);
    line-height: 1.18;
  }

  .insight-article-section-number {
    font-size: clamp(0.78rem, 0.62vw, 0.9rem);
  }

  .insight-article-takeaway-label,
  .insight-article-perspective-eyebrow,
  .insight-article-cta-eyebrow,
  .insight-article-footer-label {
    font-size: clamp(0.74rem, 0.58vw, 0.84rem);
  }

  .insight-article-takeaway-text {
    max-width: 820px;
    font-size: clamp(1.55rem, 1.35vw, 2rem);
  }

  .insight-article-perspective {
    margin-top: clamp(4.5rem, 6vw, 6rem);
    padding: clamp(3rem, 3.6vw, 4.4rem) clamp(2.8rem, 3.4vw, 4.2rem);
  }

  .insight-article-perspective h2 {
    width: min(100%, 800px);
    font-size: clamp(2rem, 2.05vw, 3rem);
  }

  .insight-article-perspective > p:last-child {
    width: min(100%, 840px);
    font-size: clamp(0.96rem, 0.76vw, 1.08rem);
  }

  /* =======================================================
     ARTICLE CTA / FOOTER — stronger 2K finish
  ======================================================= */

  .insight-article-cta {
    gap: clamp(2.5rem, 3.5vw, 4.5rem);
    padding: clamp(2.5rem, 3vw, 3.6rem);
  }

  .insight-article-cta h2 {
    width: min(100%, 720px);
    font-size: clamp(1.8rem, 1.65vw, 2.5rem);
  }

  .insight-article-cta-copy > p:last-child {
    width: min(100%, 760px);
    font-size: clamp(0.9rem, 0.72vw, 1.02rem);
  }

  .insight-article-cta-link {
    min-height: 50px;
    padding: 0.85rem 1.15rem;
    font-size: clamp(0.8rem, 0.64vw, 0.92rem);
  }

  .insight-article-footer {
    margin-top: clamp(4.5rem, 6vw, 6.5rem);
    padding-top: clamp(2.4rem, 2.7vw, 3.2rem);
  }

  .insight-article-footer h2 {
    width: min(100%, 720px);
    font-size: clamp(1.75rem, 1.65vw, 2.45rem);
  }

  .insight-article-return-link {
    font-size: clamp(0.8rem, 0.64vw, 0.92rem);
  }

  .insight-article-disclaimer {
    width: min(100%, 900px);
    font-size: clamp(0.7rem, 0.55vw, 0.8rem);
  }

  /* =======================================================
     TAX CALCULATOR — light polish only
  ======================================================= */

  .tax-calculator-intro-inner,
  .tax-calculator-workspace,
  .tax-calculator-notes {
    width: min(100%, 1460px);
  }

  .tax-calculator-eyebrow,
  .tax-calculator-panel-eyebrow,
  .tax-calculator-result-eyebrow,
  .tax-calculator-notes-eyebrow {
    font-size: clamp(0.72rem, 0.58vw, 0.84rem);
  }

  .tax-calculator-title {
    font-size: clamp(3.65rem, 3.45vw, 4.95rem);
  }

  .tax-calculator-description {
    width: min(100%, 800px);
    font-size: clamp(0.92rem, 0.74vw, 1.06rem);
  }

  .tax-calculator-panel-heading h2 {
    font-size: clamp(1.55rem, 1.3vw, 1.9rem);
  }

  .tax-calculator-panel-heading > p:last-child,
  .tax-calculator-field label,
  .tax-calculator-field input,
  .tax-calculator-field select {
    font-size: clamp(0.78rem, 0.62vw, 0.9rem);
  }

  .tax-calculator-empty-result h2 {
    font-size: clamp(1.8rem, 1.55vw, 2.3rem);
  }

  .tax-calculator-empty-result > p:not(.tax-calculator-result-eyebrow) {
    font-size: clamp(0.8rem, 0.64vw, 0.92rem);
  }

  .tax-calculator-notes-copy h2,
  .tax-calculator-advice h2 {
    font-size: clamp(1.35rem, 1.1vw, 1.65rem);
  }

  .tax-calculator-notes-copy > p:not(.tax-calculator-notes-eyebrow),
  .tax-calculator-advice > p {
    font-size: clamp(0.76rem, 0.6vw, 0.86rem);
  }
}

@media (min-width: 2300px) {
  /* HUB */
  .insights-hero-content {
    width: min(100%, 840px);
  }

  .insights-hero-title {
    font-size: 4.9rem;
  }

  .insights-hero-description {
    width: min(100%, 650px);
    font-size: 1.14rem;
  }

  .featured-insight-content h2 {
    font-size: 3.45rem;
  }

  .featured-insight-description {
    font-size: 1.08rem;
  }

  .insight-category-card {
    min-height: 340px;
  }

  .insight-category-card h3 {
    font-size: 1.48rem;
  }

  .insight-category-card p {
    font-size: 0.98rem;
  }

  .latest-insight-content h3 {
    font-size: 1.45rem;
  }

  /* ARTICLE */
  .insight-article-body {
    width: min(calc(100% - (var(--page-padding) * 2)), 1240px);
  }

  .insight-article-copy {
    width: min(100%, 980px);
  }

  .insight-article-copy p {
    font-size: 1.15rem;
  }

  .insight-article-section {
    width: min(100%, 1120px);
  }

  .insight-article-section h2 {
    max-width: 940px;
    font-size: 3.05rem;
  }

  .insight-article-cta h2,
  .insight-article-footer h2 {
    font-size: 2.55rem;
  }

  /* TAX CALCULATOR */
  .tax-calculator-intro-inner,
  .tax-calculator-workspace,
  .tax-calculator-notes {
    width: min(100%, 1560px);
  }
}

/* =========================================================
   CONTACT — LARGE DESKTOP AUTHORITY PASS
   Candidate for 1920 / 2200 / 2560.
   Preserves the existing structure, image crop, form logic,
   and all smaller breakpoints.
========================================================= */

@media (min-width: 1536px) {
  /* HEADER — match the locked large-desktop language */
  .contact-page-body .header-inner {
    min-height: clamp(112px, 6.4vw, 142px);
  }

  .contact-page-body .brand-logo {
    width: clamp(100px, 5.4vw, 136px);
  }

  .contact-page-body .desktop-nav {
    gap: clamp(2.3rem, 2.75vw, 3.8rem);
  }

  .contact-page-body .nav-link {
    font-size: clamp(1rem, 0.82vw, 1.16rem);
  }

  /* HERO — keep the composition, strengthen the content */
  .contact-hero {
    min-height: clamp(720px, 72vh, 920px);
  }

  .contact-hero-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 720px);
    gap: clamp(4rem, 5vw, 7rem);
    padding-top: clamp(3.25rem, 3.2vw, 4.5rem);
    padding-bottom: clamp(3.25rem, 3.2vw, 4.5rem);
  }

  .contact-hero-content {
    width: min(100%, 660px);
  }

  .contact-hero-eyebrow {
    font-size: clamp(0.76rem, 0.62vw, 0.9rem);
  }

  .contact-hero-title {
    font-size: clamp(3.7rem, 3.4vw, 4.95rem);
  }

  .contact-hero-rule {
    width: clamp(42px, 2vw, 54px);
  }

  .contact-hero-description {
    width: min(100%, 560px);
  }

  .contact-hero-description p {
    font-size: clamp(0.98rem, 0.8vw, 1.12rem);
    line-height: 1.78;
  }

  /* FORM CARD — larger controls and readable helper text */
  .contact-form-card {
    width: min(100%, 720px);
    padding: clamp(2rem, 2.15vw, 2.7rem);
  }

  .contact-form-heading h2 {
    font-size: clamp(1.75rem, 1.45vw, 2.1rem);
  }

  .contact-form-heading p {
    font-size: clamp(0.82rem, 0.66vw, 0.94rem);
  }

  .contact-form {
    margin-top: clamp(1.75rem, 1.5vw, 2rem);
  }

  .contact-form-grid {
    column-gap: clamp(1.2rem, 1.4vw, 1.8rem);
    row-gap: clamp(1.25rem, 1.3vw, 1.6rem);
  }

  .contact-field label {
    font-size: clamp(0.8rem, 0.64vw, 0.92rem);
  }

  .contact-field input,
  .contact-field select {
    min-height: clamp(50px, 2.8vw, 56px);
  }

  .contact-field input,
  .contact-field select,
  .contact-field textarea {
    font-size: clamp(0.84rem, 0.68vw, 0.96rem);
  }

  .contact-field textarea {
    min-height: clamp(130px, 7vw, 155px);
  }

  .contact-field-icon {
    width: 19px;
    height: 19px;
  }

  .contact-form-privacy p {
    font-size: clamp(0.72rem, 0.58vw, 0.84rem);
  }

  .contact-submit {
    min-width: 195px;
    min-height: 54px;
    padding: 0.8rem 1.3rem;
    font-size: clamp(0.84rem, 0.66vw, 0.94rem);
  }

  /* DETAILS HEADING */
  .contact-details-section {
    padding: clamp(3rem, 3.4vw, 4.25rem) 0 clamp(3.8rem, 4vw, 5rem);
  }

  .contact-details-heading {
    width: min(100%, 1040px);
    margin-bottom: clamp(2.4rem, 2.7vw, 3.2rem);
  }

  .contact-details-eyebrow {
    font-size: clamp(0.76rem, 0.62vw, 0.9rem);
  }

  .contact-details-title {
    font-size: clamp(2.35rem, 2.05vw, 3rem);
  }

  /* DETAIL CARDS — stronger internals, less empty card body */
  .contact-details-grid {
    gap: clamp(1.15rem, 1.4vw, 1.75rem);
  }

  .contact-detail-card {
    min-height: clamp(275px, 15.5vw, 320px);
    padding: clamp(1.65rem, 1.8vw, 2.3rem);
  }

  .contact-detail-icon {
    width: clamp(66px, 3.5vw, 76px);
    height: clamp(66px, 3.5vw, 76px);
    margin-bottom: 1.2rem;
  }

  .contact-detail-icon svg {
    width: clamp(28px, 1.45vw, 32px);
    height: clamp(28px, 1.45vw, 32px);
  }

  .contact-detail-card h3 {
    font-size: clamp(1.18rem, 0.98vw, 1.42rem);
  }

  .contact-detail-rule {
    width: 30px;
    margin: 0.9rem 0 1.05rem;
  }

  .contact-detail-body,
  .contact-detail-body p,
  .contact-detail-action {
    font-size: clamp(0.86rem, 0.69vw, 0.98rem);
    line-height: 1.68;
  }

  .contact-detail-label {
    font-size: clamp(0.74rem, 0.58vw, 0.84rem);
  }

  /* CONVERSATION CARD — make the final CTA worthy of the canvas */
  .contact-conversation-card {
    grid-template-columns:
      auto
      minmax(0, 1.15fr)
      1px
      minmax(360px, 0.85fr);
    gap: clamp(2rem, 2.7vw, 3.8rem);
    margin-top: clamp(1.8rem, 2.2vw, 2.7rem);
    padding: clamp(2rem, 2.5vw, 3rem);
  }

  .contact-conversation-visual {
    width: clamp(112px, 5.4vw, 136px);
    height: clamp(112px, 5.4vw, 136px);
  }

  .contact-conversation-copy h2 {
    font-size: clamp(1.9rem, 1.55vw, 2.35rem);
  }

  .contact-conversation-highlight {
    font-size: clamp(1.75rem, 1.45vw, 2.2rem);
  }

  .contact-conversation-description {
    max-width: 620px;
    font-size: clamp(0.9rem, 0.72vw, 1.02rem);
    line-height: 1.72;
  }

  .contact-conversation-phone-row {
    gap: 1.2rem;
  }

  .contact-conversation-phone-icon {
    width: clamp(62px, 3.1vw, 72px);
    height: clamp(62px, 3.1vw, 72px);
  }

  .contact-conversation-phone-icon svg {
    width: clamp(29px, 1.45vw, 34px);
    height: clamp(29px, 1.45vw, 34px);
  }

  .contact-conversation-person {
    font-size: clamp(0.86rem, 0.68vw, 0.98rem);
  }

  .contact-conversation-numbers a {
    font-size: clamp(1.15rem, 0.95vw, 1.42rem);
  }

  .contact-conversation-numbers a span {
    min-width: 42px;
    font-size: clamp(0.66rem, 0.52vw, 0.76rem);
  }

  .contact-consultation-button {
    width: min(100%, 290px);
    margin-top: 1.35rem;
    padding: 0.9rem 1.15rem;
    font-size: clamp(0.84rem, 0.66vw, 0.96rem);
  }

  /* FOOTER */
  .contact-page-body .footer-inner {
    gap: clamp(1.9rem, 2.6vw, 3.6rem);
    padding-top: clamp(1.5rem, 1.35vw, 1.9rem);
    padding-bottom: clamp(1.8rem, 1.55vw, 2.2rem);
  }

  .contact-page-body .footer-copyright p,
  .contact-page-body .footer-legal a {
    font-size: clamp(0.88rem, 0.72vw, 1rem);
  }

  .contact-page-body .footer-social a {
    width: clamp(34px, 1.8vw, 40px);
    height: clamp(34px, 1.8vw, 40px);
  }

  .contact-page-body .footer-social img {
    width: clamp(20px, 1.05vw, 23px);
    height: clamp(20px, 1.05vw, 23px);
  }
}

@media (min-width: 2300px) {
  .contact-hero-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 760px);
  }

  .contact-hero-content {
    width: min(100%, 700px);
  }

  .contact-hero-title {
    font-size: 5rem;
  }

  .contact-hero-description {
    width: min(100%, 590px);
  }

  .contact-hero-description p {
    font-size: 1.14rem;
  }

  .contact-form-card {
    width: min(100%, 760px);
  }

  .contact-form-heading h2 {
    font-size: 2.15rem;
  }

  .contact-detail-card {
    min-height: 325px;
  }

  .contact-detail-card h3 {
    font-size: 1.45rem;
  }

  .contact-detail-body,
  .contact-detail-body p,
  .contact-detail-action {
    font-size: 1rem;
  }

  .contact-conversation-copy h2 {
    font-size: 2.4rem;
  }

  .contact-conversation-highlight {
    font-size: 2.25rem;
  }

  .contact-conversation-description {
    font-size: 1.04rem;
  }

  .contact-conversation-numbers a {
    font-size: 1.45rem;
  }
}

/* =========================================================
   FAQ PAGE
   Mambodla Professional Accountants
   Designed for the existing navy / gold visual system.
========================================================= */

.faq-page {
  width: 100%;
  min-height: 100dvh;

  background-color: var(--color-background);
}

/* =========================================================
   FAQ — HERO
========================================================= */

.faq-hero {
  position: relative;

  display: flex;
  align-items: center;

  width: calc(100% - 2rem);
  min-height: clamp(390px, 45vh, 500px);

  margin-inline: auto;

  overflow: hidden;

  background-color: var(--color-background);
}

.faq-hero-inner {
  position: relative;
  z-index: 3;

  width: 100%;

  padding: clamp(2.4rem, 4vw, 4rem) var(--page-padding);
}

.faq-hero-content {
  width: min(100%, 720px);
}

.faq-hero-eyebrow,
.faq-section-eyebrow,
.faq-group-eyebrow,
.faq-closing-eyebrow,
.faq-category-label {
  margin: 0;

  color: var(--color-gold);

  font-size: 0.68rem;
  font-weight: 600;

  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.faq-hero-eyebrow {
  margin-bottom: 1rem;
}

.faq-hero-title {
  display: flex;
  flex-direction: column;

  margin: 0;

  color: var(--color-navy);

  font-size: clamp(3rem, 5vw, 5.8rem);
  font-weight: 600;

  line-height: 1.02;
  letter-spacing: -0.04em;
}

.faq-hero-title span {
  display: block;
}

.faq-hero-title .gold-text,
.faq-directory-title .gold-text {
  color: var(--color-gold);
}

.faq-hero-rule {
  width: 38px;
  height: 1.5px;

  margin-top: 1.55rem;

  background-color: var(--color-gold);
}

.faq-hero-description {
  width: min(100%, 590px);

  margin: 1.35rem 0 0;

  color: var(--color-navy);

  font-size: clamp(0.84rem, 0.94vw, 0.98rem);
  line-height: 1.8;
}

.faq-hero-watermark {
  position: absolute;

  z-index: 1;

  top: 50%;
  right: clamp(1rem, 4vw, 4rem);

  width: auto;
  height: min(76%, 390px);

  max-width: 40vw;

  opacity: 0.035;

  object-fit: contain;

  transform: translateY(-50%);

  pointer-events: none;
  user-select: none;
}

.faq-hero-accent {
  position: absolute;

  z-index: 2;

  right: 1.25rem;
  bottom: 7%;

  display: flex;
  justify-content: center;

  width: 1px;
  height: 76px;

  background-color: rgba(185, 147, 82, 0.55);
}

.faq-hero-accent span {
  position: absolute;

  bottom: -3px;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background-color: var(--color-gold);
}

/* =========================================================
   FAQ — DIRECTORY
========================================================= */

.faq-directory {
  width: min(calc(100% - 2rem), 1480px);

  margin-inline: auto;

  padding: clamp(3.75rem, 6vw, 6.5rem) var(--page-padding)
    clamp(4.5rem, 6.5vw, 7rem);
}

.faq-directory-intro {
  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(300px, 0.95fr);

  align-items: end;

  gap: clamp(2.5rem, 5vw, 6rem);

  margin-bottom: clamp(3.4rem, 5vw, 5.5rem);
}

.faq-section-eyebrow {
  margin-bottom: 0.9rem;
}

.faq-directory-title {
  display: flex;
  flex-direction: column;

  margin: 0;

  color: var(--color-navy);

  font-size: clamp(2.4rem, 3.4vw, 4.4rem);
  font-weight: 600;

  line-height: 1.08;
  letter-spacing: -0.035em;
}

.faq-directory-copy {
  max-width: 640px;
}

.faq-directory-copy p {
  margin: 0;

  color: var(--color-muted);

  font-size: clamp(0.84rem, 0.9vw, 0.98rem);
  line-height: 1.82;
}

/* =========================================================
   FAQ — TWO-COLUMN LAYOUT
========================================================= */

.faq-layout {
  display: grid;

  grid-template-columns:
    minmax(220px, 0.3fr)
    minmax(0, 1fr);

  align-items: start;

  gap: clamp(2.5rem, 5vw, 5.75rem);
}

/* =========================================================
   FAQ — CATEGORY PANEL
========================================================= */

.faq-category-panel {
  position: sticky;
  top: 1.5rem;

  align-self: start;

  padding: 1.5rem 0 0;
}

.faq-category-label {
  margin-bottom: 1.25rem;
}

.faq-category-nav {
  display: grid;

  border-top: 1px solid rgba(11, 34, 57, 0.12);
}

.faq-category-nav a {
  display: grid;

  grid-template-columns: 32px 1fr;

  gap: 0.85rem;

  padding: 1rem 0;

  border-bottom: 1px solid rgba(11, 34, 57, 0.1);

  color: var(--color-navy);

  font-size: clamp(0.78rem, 0.82vw, 0.9rem);
  font-weight: 500;

  line-height: 1.45;

  transition:
    color var(--transition-fast),
    transform var(--transition-fast);
}

.faq-category-nav a:hover {
  color: var(--color-gold);

  transform: translateX(3px);
}

.faq-category-number {
  color: var(--color-gold);

  font-size: 0.68rem;
  font-weight: 600;

  letter-spacing: 0.08em;
}

.faq-category-note {
  display: grid;

  grid-template-columns: 2px 1fr;

  gap: 1rem;

  margin-top: 1.75rem;
}

.faq-category-note-rule {
  width: 2px;
  height: 100%;

  min-height: 54px;

  background-color: var(--color-gold);
}

.faq-category-note p {
  margin: 0;

  color: var(--color-muted);

  font-size: 0.74rem;
  line-height: 1.7;
}

.faq-category-note a {
  display: inline-block;

  margin-top: 0.45rem;

  color: var(--color-navy);

  font-weight: 600;

  transition: color var(--transition-fast);
}

.faq-category-note a:hover {
  color: var(--color-gold);
}

/* =========================================================
   FAQ — GROUPS
========================================================= */

.faq-groups {
  min-width: 0;
}

.faq-group {
  scroll-margin-top: 1.5rem;
}

.faq-group + .faq-group {
  margin-top: clamp(4rem, 6vw, 6rem);
}

.faq-group-heading {
  display: grid;

  grid-template-columns: 52px minmax(0, 1fr);

  align-items: start;

  gap: 1rem;

  margin-bottom: 1.5rem;
}

.faq-group-number {
  margin: 0.25rem 0 0;

  color: var(--color-gold);

  font-size: 0.72rem;
  font-weight: 600;

  letter-spacing: 0.12em;
}

.faq-group-eyebrow {
  margin-bottom: 0.5rem;
}

.faq-group-heading h2 {
  margin: 0;

  color: var(--color-navy);

  font-size: clamp(1.7rem, 2.1vw, 2.6rem);
  font-weight: 600;

  line-height: 1.18;
  letter-spacing: -0.025em;
}

/* =========================================================
   FAQ — ACCORDION
========================================================= */

.faq-items {
  border-top: 1px solid rgba(11, 34, 57, 0.14);
}

.faq-item {
  border-bottom: 1px solid rgba(11, 34, 57, 0.12);

  background: transparent;
}

.faq-item summary {
  display: grid;

  grid-template-columns: minmax(0, 1fr) 38px;

  align-items: center;

  gap: 1.25rem;

  min-height: 78px;

  padding: 1.2rem 0;

  color: var(--color-navy);

  font-size: clamp(0.96rem, 1vw, 1.08rem);
  font-weight: 500;

  line-height: 1.5;

  list-style: none;

  cursor: pointer;

  transition: color var(--transition-fast);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::marker {
  content: "";
}

.faq-item summary:hover,
.faq-item[open] summary {
  color: var(--color-gold);
}

.faq-item summary:focus-visible {
  outline: 2px solid rgba(185, 147, 82, 0.5);
  outline-offset: 5px;
  border-radius: 0.25rem;
}

.faq-item-toggle {
  position: relative;

  display: grid;
  place-items: center;

  width: 34px;
  height: 34px;

  justify-self: end;

  border: 1px solid rgba(11, 34, 57, 0.13);
  border-radius: 50%;

  transition:
    border-color var(--transition-fast),
    transform var(--transition-medium);
}

.faq-item-toggle::before,
.faq-item-toggle::after {
  content: "";

  position: absolute;

  width: 12px;
  height: 1.5px;

  background-color: currentColor;

  transition:
    transform var(--transition-medium),
    opacity var(--transition-fast);
}

.faq-item-toggle::after {
  transform: rotate(90deg);
}

.faq-item[open] .faq-item-toggle {
  border-color: rgba(185, 147, 82, 0.4);

  transform: rotate(180deg);
}

.faq-item[open] .faq-item-toggle::after {
  opacity: 0;

  transform: rotate(0deg);
}

.faq-answer {
  width: min(100%, 820px);

  padding: 0 3.75rem 1.65rem 0;

  animation: faq-answer-enter 260ms var(--motion-ease) both;
}

.faq-answer p {
  margin: 0;

  color: var(--color-muted);

  font-size: clamp(0.82rem, 0.86vw, 0.96rem);
  line-height: 1.82;
}

.faq-answer p + p {
  margin-top: 0.9rem;
}

.faq-answer a:not(.faq-answer-link) {
  color: var(--color-navy);

  font-weight: 500;
}

.faq-answer-link {
  color: var(--color-gold);

  font-size: 0.8rem;
  font-weight: 600;

  letter-spacing: 0.01em;

  transition: color var(--transition-fast);
}

.faq-answer-link:hover {
  color: var(--color-navy);
}

@keyframes faq-answer-enter {
  from {
    opacity: 0;

    transform: translate3d(0, -4px, 0);
  }

  to {
    opacity: 1;

    transform: translate3d(0, 0, 0);
  }
}

/* =========================================================
   FAQ — CLOSING CTA
========================================================= */

.faq-closing {
  width: min(calc(100% - 2rem), 1480px);

  margin: 0 auto clamp(3rem, 5vw, 5rem);

  padding-inline: var(--page-padding);
}

.faq-closing-inner {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: clamp(2rem, 4vw, 5rem);

  padding: clamp(2.3rem, 3.3vw, 4rem);

  border-radius: var(--radius-card);

  background-color: var(--color-navy);

  box-shadow: 0 20px 50px rgba(11, 34, 57, 0.1);
}

.faq-closing-eyebrow {
  margin-bottom: 0.75rem;
}

.faq-closing-copy h2 {
  max-width: 760px;

  margin: 0;

  color: #ffffff;

  font-size: clamp(1.9rem, 2.3vw, 3rem);
  font-weight: 500;

  line-height: 1.16;
  letter-spacing: -0.03em;
}

.faq-closing-copy > p:last-child {
  max-width: 720px;

  margin: 0.9rem 0 0;

  color: rgba(255, 255, 255, 0.72);

  font-size: clamp(0.8rem, 0.84vw, 0.94rem);
  line-height: 1.72;
}

.faq-closing-button {
  display: inline-flex;

  align-items: center;
  justify-content: space-between;

  gap: 1.35rem;

  min-width: 210px;
  min-height: 52px;

  padding: 0.8rem 1.15rem;

  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-card);

  background-color: #ffffff;

  color: var(--color-navy);

  font-size: 0.82rem;
  font-weight: 600;

  transition:
    transform var(--transition-fast),
    background-color var(--transition-fast);
}

.faq-closing-button:hover {
  background-color: #f5f1e9;

  transform: translateY(-1px);
}

.faq-closing-button span:last-child {
  color: var(--color-gold);

  font-size: 1rem;
}

/* =========================================================
   FAQ — TABLET
========================================================= */

@media (max-width: 1024px) {
  .faq-directory-intro {
    grid-template-columns: 1fr;

    gap: 1.6rem;
  }

  .faq-layout {
    grid-template-columns: 1fr;

    gap: 2.5rem;
  }

  .faq-category-panel {
    position: static;

    padding-top: 0;
  }

  .faq-category-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    border-top: 0;
    border-left: 1px solid rgba(11, 34, 57, 0.1);
  }

  .faq-category-nav a {
    padding: 0.95rem 1rem;

    border-top: 1px solid rgba(11, 34, 57, 0.1);
    border-right: 1px solid rgba(11, 34, 57, 0.1);
  }

  .faq-category-note {
    width: min(100%, 520px);
  }
}

/* =========================================================
   FAQ — MOBILE
========================================================= */

@media (max-width: 768px) {
  .faq-hero,
  .faq-directory,
  .faq-closing {
    width: calc(100% - 1rem);
  }

  .faq-hero {
    min-height: 390px;
  }

  .faq-hero-inner {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .faq-hero-title {
    font-size: clamp(2.7rem, 11vw, 4rem);
  }

  .faq-hero-description {
    max-width: 470px;
  }

  .faq-hero-watermark {
    right: -3rem;

    height: 64%;

    opacity: 0.025;
  }

  .faq-hero-accent {
    right: 0.75rem;
  }

  .faq-directory {
    padding-top: 3.25rem;
    padding-bottom: 4rem;
  }

  .faq-directory-title {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .faq-category-nav {
    grid-template-columns: 1fr;
  }

  .faq-category-nav a {
    border-left: 0;
  }

  .faq-group + .faq-group {
    margin-top: 3.75rem;
  }

  .faq-group-heading {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .faq-item summary {
    grid-template-columns: minmax(0, 1fr) 34px;

    min-height: 72px;

    gap: 0.9rem;

    font-size: 0.92rem;
  }

  .faq-answer {
    padding-right: 0;
  }

  .faq-closing-inner {
    grid-template-columns: 1fr;

    gap: 1.75rem;
  }

  .faq-closing-button {
    min-width: 0;
    width: min(100%, 260px);
  }
}

/* =========================================================
   FAQ — SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
  .faq-hero-inner,
  .faq-directory,
  .faq-closing {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .faq-hero-title {
    font-size: clamp(2.35rem, 12vw, 3.4rem);
  }

  .faq-directory-copy p,
  .faq-answer p {
    font-size: 0.8rem;
  }

  .faq-group-heading {
    grid-template-columns: 1fr;

    gap: 0.4rem;
  }

  .faq-group-number {
    margin-top: 0;
  }

  .faq-item summary {
    font-size: 0.88rem;
  }

  .faq-closing-inner {
    padding: 1.6rem;
  }
}

/* =========================================================
   FAQ — LARGE DESKTOP AUTHORITY PASS
   1920 / 2200 / 2560
========================================================= */

@media (min-width: 1536px) {
  .faq-page-body .header-inner {
    min-height: clamp(112px, 6.4vw, 142px);
  }

  .faq-page-body .brand-logo {
    width: clamp(100px, 5.4vw, 136px);
  }

  .faq-page-body .desktop-nav {
    gap: clamp(2.3rem, 2.75vw, 3.8rem);
  }

  .faq-page-body .nav-link {
    font-size: clamp(1rem, 0.82vw, 1.16rem);
  }

  .faq-hero {
    min-height: clamp(500px, 48vh, 650px);
  }

  .faq-hero-content {
    width: min(100%, 860px);
  }

  .faq-hero-eyebrow,
  .faq-section-eyebrow,
  .faq-group-eyebrow,
  .faq-closing-eyebrow,
  .faq-category-label {
    font-size: clamp(0.76rem, 0.62vw, 0.9rem);
  }

  .faq-hero-title {
    font-size: clamp(4.3rem, 4.15vw, 5.9rem);
  }

  .faq-hero-rule {
    width: clamp(42px, 2vw, 54px);
  }

  .faq-hero-description {
    width: min(100%, 650px);

    font-size: clamp(0.98rem, 0.8vw, 1.12rem);
  }

  .faq-directory,
  .faq-closing {
    width: min(calc(100% - 2rem), 1600px);
  }

  .faq-directory-title {
    font-size: clamp(3rem, 2.75vw, 4rem);
  }

  .faq-directory-copy p {
    font-size: clamp(0.96rem, 0.76vw, 1.08rem);
  }

  .faq-layout {
    grid-template-columns:
      minmax(260px, 0.29fr)
      minmax(0, 1fr);

    gap: clamp(4rem, 5vw, 6.5rem);
  }

  .faq-category-nav a {
    font-size: clamp(0.88rem, 0.7vw, 1rem);
  }

  .faq-category-note p {
    font-size: clamp(0.78rem, 0.6vw, 0.86rem);
  }

  .faq-group-heading {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .faq-group-heading h2 {
    font-size: clamp(2.2rem, 1.9vw, 2.9rem);
  }

  .faq-item summary {
    min-height: 88px;

    font-size: clamp(1.04rem, 0.84vw, 1.18rem);
  }

  .faq-answer {
    width: min(100%, 920px);

    padding-bottom: 1.9rem;
  }

  .faq-answer p {
    font-size: clamp(0.94rem, 0.74vw, 1.06rem);
  }

  .faq-closing-inner {
    padding: clamp(2.7rem, 3vw, 3.8rem);
  }

  .faq-closing-copy h2 {
    font-size: clamp(2.25rem, 1.9vw, 2.9rem);
  }

  .faq-closing-copy > p:last-child {
    font-size: clamp(0.94rem, 0.74vw, 1.06rem);
  }

  .faq-closing-button {
    min-width: 230px;

    font-size: clamp(0.88rem, 0.68vw, 0.98rem);
  }

  .faq-page-body .footer-inner {
    gap: clamp(1.9rem, 2.6vw, 3.6rem);
    padding-top: clamp(1.5rem, 1.35vw, 1.9rem);
    padding-bottom: clamp(1.8rem, 1.55vw, 2.2rem);
  }

  .faq-page-body .footer-copyright p,
  .faq-page-body .footer-legal a {
    font-size: clamp(0.88rem, 0.72vw, 1rem);
  }

  .faq-page-body .footer-social a {
    width: clamp(34px, 1.8vw, 40px);
    height: clamp(34px, 1.8vw, 40px);
  }

  .faq-page-body .footer-social img {
    width: clamp(20px, 1.05vw, 23px);
    height: clamp(20px, 1.05vw, 23px);
  }
}

@media (min-width: 2300px) {
  .faq-directory,
  .faq-closing {
    width: min(calc(100% - 2rem), 1720px);
  }

  .faq-hero-content {
    width: min(100%, 900px);
  }

  .faq-hero-title {
    font-size: 6rem;
  }

  .faq-hero-description {
    font-size: 1.14rem;
  }

  .faq-directory-title {
    font-size: 4.1rem;
  }

  .faq-item summary {
    font-size: 1.2rem;
  }

  .faq-answer p {
    font-size: 1.08rem;
  }
}

/* =========================================================
   FAQ — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .faq-answer {
    animation: none;
  }

  .faq-category-nav a,
  .faq-closing-button,
  .faq-item-toggle {
    transition: none;
  }
}

/* =========================================================
   FOOTER — MOBILE LEGAL LINKS
   Keep each utility/legal label intact while allowing
   the group itself to wrap cleanly.
========================================================= */

@media (max-width: 768px) {
  .footer-legal {
    flex-wrap: wrap;
    justify-content: center;

    row-gap: 0.5rem;
    column-gap: 1rem;
  }

  .footer-legal a {
    white-space: nowrap;
  }
}