/* Bharucha & Co.  shared design language
   Colours, type and motion primitives used across every page. */

html {
  scroll-behavior: smooth;
}
body {
  font-family: "Inter", sans-serif;
}
.font-serif {
  font-family: "Cormorant Garamond", serif;
}
.bg-ivory {
  background-color: #f6f3ec;
}
/* Shared content width — keep all .max-w-7xl sections aligned */
.max-w-7xl {
  max-width: 92%;
}

/* About text column width by viewport */
@media (max-width: 1919px) {
  .slide-copy.abouttextbox {
    width: 85%;
  }
}
@media (min-width: 1920px) {
  .lg\:col-span-6.slide-copy.abouttextbox {
    width: 86%;
  }
}

/* ---- Reveal-on-scroll ---- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/*
   * Khaitan-style split column entrance.
   * Image (slide-media) and copy (slide-copy) do NOT move as one block —
   * different travel distances + a short delay create the ms gap between them.
   * Driven by section.is-active (toggled at page change start, like beforeMove).
   */
@media (min-width: 768px) {
  body.home #main > section .slide-media,
  body.home #main > section .slide-copy,
  body.home2 #main > section .slide-media,
  body.home2 #main > section .slide-copy,
  body.home-onepage-scroll #main > section .slide-media,
  body.home-onepage-scroll #main > section .slide-copy {
    opacity: 0;
    transition:
      opacity 1s ease,
      transform 1s ease;
    will-change: opacity, transform;
  }
  /* Full-travel media (like Khaitan .bottom-animate / .top-animate) */
  body.home #main > section .slide-media,
  body.home2 #main > section .slide-media,
  body.home-onepage-scroll #main > section .slide-media {
    transform: translateY(28%);
  }
  body.home #main > section .slide-media.slide-media--up,
  body.home2 #main > section .slide-media.slide-media--up,
  body.home-onepage-scroll #main > section .slide-media.slide-media--up {
    transform: translateY(-28%);
  }
  /* Light-travel copy (like Khaitan .top-animateLight) + delay gap */
  body.home #main > section .slide-copy,
  body.home2 #main > section .slide-copy,
  body.home-onepage-scroll #main > section .slide-copy {
    transform: translateY(-12%);
    transition-delay: 0.2s;
  }
  body.home #main > section.is-active .slide-media,
  body.home #main > section.is-active .slide-copy,
  body.home2 #main > section.is-active .slide-media,
  body.home2 #main > section.is-active .slide-copy,
  body.home-onepage-scroll #main > section.is-active .slide-media,
  body.home-onepage-scroll #main > section.is-active .slide-copy {
    opacity: 1;
    transform: none;
  }
  /* On leave: drop copy delay so exit doesn't lag awkwardly */
  body.home #main > section:not(.is-active) .slide-copy,
  body.home2 #main > section:not(.is-active) .slide-copy,
  body.home-onepage-scroll #main > section:not(.is-active) .slide-copy {
    transition-delay: 0s;
  }
}
/*
   * Mobile only: skip column entrance motion.
   * Do NOT tie this to prefers-reduced-motion — Windows Accessibility →
   * Visual effects OFF sets that media query, and users still expect the
   * two-column slide-in on desktop sections.
   */
@media (max-width: 767px) {
  .slide-media,
  .slide-copy {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---- Hero ambient glow ---- */
.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      60% 50% at 70% 30%,
      rgba(120, 130, 220, 0.22),
      transparent 70%
    ),
    radial-gradient(
      50% 45% at 20% 80%,
      rgba(184, 150, 81, 0.14),
      transparent 70%
    );
  animation: drift 20s ease-in-out infinite alternate;
}
a.group span svg {
  width: 22px;
  height: 22px;
}

/* Button arrow — smooth rotate on hover */
.group-button span svg,
a.group span svg,
button.group span svg {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: rotate(-135deg);
  transform-origin: center center;
  will-change: transform;
}

.group-button:hover span svg,
a.group:hover span svg,
button.group:hover span svg {
  transform: rotate(-90deg);
}

@media (prefers-reduced-motion: reduce) {
  .group-button span svg,
  a.group span svg,
  button.group span svg {
    transition: none !important;
  }
}

#contact.pb-0 {
  padding-bottom: 0 !important;
  position: relative;
}

#contact .text-lg,
#contact .contact-input,
#contact textarea.contact-input {
  font-size: 18px !important;
}

#contact .contact-input,
#contact textarea.contact-input {
  border-color: #c2b7a3 !important;
  padding-top: 0.675rem !important;
  padding-bottom: 0.675rem !important;
}

#bharucha-contact-form button[type="submit"] {
  border-color: #bea25f !important;
}

#servicegrid .group-button {
  border-color: #bea25f !important;
}
header {
  background: #ffffff1f !important;
  border: 1px solid #ffffff40 !important;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}

/* Hero (first section): icons stay in the normal header bar */
#navlinks.nav-actions,
#navlinks {
  position: static;
  padding: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  transition:
    opacity 0.25s ease,
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* After hero: sticky icon pill only (not the full bar) */
body.nav-past-hero header#nav {
  background: transparent !important;
  border: none !important;
}

body.nav-past-hero #navlinks {
  position: fixed;
  top: 1.25rem;
  right: max(1.5rem, 4vw);
  z-index: 60;
  padding: 0.55rem 0.85rem;
  border-radius: 4px;
  background: transparent;
  backdrop-filter: blur(19px);
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: 0px 0px 2px rgb(184 150 81 / 1);
  color: rgb(184 150 81 / 1);
  border: 0;
  box-shadow: none !important;
}

body.nav-past-hero #navlinks svg {
  stroke: rgb(184 150 81 / 1);
}

body.nav-past-hero #navlinks #burger {
  color: rgb(184 150 81 / 1);
}

body.nav-past-hero #navlinks #burger:hover {
  color: rgb(184 150 81 / 0.85);
}

body.menu-open.nav-past-hero #navlinks {
  opacity: 0;
  pointer-events: none;
}
.number-counter {
  font-size: clamp(3rem, 4.7vw, 23.5rem) !important;
  line-height: 0.25 !important;
  margin-bottom: 2.3rem !important;
  padding-top: 1rem !important;
  font-weight: 600;
}

.number-counter .gold-icon {
  font-size: 62px;
  position: relative;
  top: -7px;
  left: 2px;
}

.number-text-counter {
  padding-bottom: 8px;
}
.headerlogo img {
  height: 5rem;
}

a#firm-link,
.firm-link {
  font-size: clamp(0.9rem, 1.1vw, 11.4rem) !important;
  line-height: 1.6 !important;
}

/* Firm body copy: tighter line-height only on large desktops */
@media (min-width: 1920px) {
  #firm .abouttextbox .space-y-6 p {
    font-size: 18px;
    line-height: 1.4 !important;
  }
}

@keyframes drift {
  from {
    transform: translate3d(-3%, -2%, 0) scale(1);
  }
  to {
    transform: translate3d(3%, 2%, 0) scale(1.08);
  }
}

/* ---- Marquee track (recognitions) ---- */
.track {
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

#awards .awards-logo {
  opacity: 1;
  filter: none;
  transition: transform 0.35s ease;
  transform-origin: center center;
}

#awards .awards-logo:hover {
  transform: scale(1.06);
}

/* ---- Headline character reveal ---- */
.char {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  animation: rise 1.1s forwards;
}
@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- Interior page sub-nav ---- */
.ip-anchor {
  scroll-margin-top: 150px;
}
.ip-tab.active {
  color: #b89651;
}
.ip-tab.active span {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .hero-glow,
  .track,
  .char {
    animation: none !important;
  }
  .char {
    opacity: 1;
    transform: none;
  }
}

/* Prevent off-canvas mobile menu from creating horizontal scroll.
     `clip` (not `hidden`) keeps hero position:sticky working. */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}

#ctabox h3 {
  font-size: clamp(1.9rem, 3.1vw, 11.6rem) !important;
  font-weight: 500;
  line-height: 1.1;
}
/* --- Compact scale --- */
section:not(#top) {
  padding-top: clamp(50px, 3.2vw, 6rem) !important;
  padding-bottom: clamp(50px, 3.2vw, 3rem) !important;
}
h1.font-serif {
  font-size: clamp(2rem, 4.6vw, 3.75rem) !important;
}
h2.font-serif {
  font-size: 60px !important;
  line-height: 0.95 !important;
  margin-bottom: 1.9rem !important; /* single shared spacing under all section h2s */
}

#news h2.font-serif {
  margin-bottom: 0 !important;
}

/* Mobile + tablet only */
@media (max-width: 1023px) {
  h2.font-serif {
    font-size: 40px !important;
    line-height: 1.05 !important;
  }
}
h3.font-serif {
  font-size: clamp(2.2rem, 3.6vw, 11.6rem) !important;
}
h4.font-serif {
  font-size: clamp(1.2rem, 1.6vw, 11.3rem) !important;
}
p.text-lg,
.text-lg {
  font-size: clamp(0.9rem, 1vw, 11.4rem) !important;
  line-height: 1.6 !important;
}
#people .aspect-\[4\/5\] {
  aspect-ratio: 4 / 4.2 !important;
}
#people .aspect-\[4\/5\] img {
  object-position: 0px -44px !important;
}
#people h2 {
  margin-bottom: 1rem !important;
}

section#memberships h2 {
  margin-bottom: 25px !important;
}

@media (max-width: 1919px) {
  #people .aspect-\[4\/5\] {
    aspect-ratio: 4 / 4.2 !important;
  }
}
.space-y-24 > * + * {
  margin-top: 2.25rem !important;
}
.lg\:space-y-28 > * + * {
  margin-top: 2.25rem !important;
}
.space-y-20 > * + * {
  margin-top: 2rem !important;
}
.space-y-16 > * + * {
  margin-top: 1.75rem !important;
}
.gap-y-16 {
  row-gap: 2.5rem !important;
}
.gap-y-20 {
  row-gap: 2.75rem !important;
}
button span svg {
  width: 28px !important;
  height: 28px !important;
}

body.menu-open #burger {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
#burger {
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}
#burger:hover {
  transform: scale(1.1);
}
/* hero text: keep it large */
#top h1.font-serif {
  font-size: clamp(2.75rem, 5.8vw, 106.25rem) !important;
}

/* Hero eyebrow gold rule — always visible (don't rely on Tailwind bg-gold/70) */
#top #eyebrow {
  display: flex !important;
  align-items: center;
  visibility: visible !important;
  opacity: 1;
}

#top #eyebrow > span:first-child {
  display: inline-block !important;
  height: 1px !important;
  width: 3rem !important; /* w-12 */
  min-width: 3rem !important;
  background-color: rgba(184, 150, 81, 0.7) !important;
  flex: 0 0 auto !important;
}
#top #herosub {
  font-size: clamp(1.1rem, 1.2vw, 11.4rem) !important;
  line-height: 1.6 !important;
  font-weight: 4;
}

/* feature-row lead phrase — em units keep bar locked to the letterforms
   at every desktop/tablet size (font scales; underline scales with it) */
.feat-underline:before {
  content: "";
  width: 100%;
  height: 0.099em;
  background: #b89651;
  position: absolute;
  left: 0;
  bottom: 0.25em;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s;
}

.feat-underline {
  position: relative;
  padding-right: 9px;
  z-index: 1;
}

/* Draw underline when the feature section appears / becomes active */
@media (min-width: 768px) {
  body.home #main > section.is-active .feat-underline:before,
  body.home2 #main > section.is-active .feat-underline:before,
  body.home-onepage-scroll #main > section.is-active .feat-underline:before,
  body.home-onepage-scroll #main > section.active .feat-underline:before {
    transform: scaleX(1);
  }
}

@media (max-width: 767px) {
  .feat-underline:before {
    transform: scaleX(1) !important;
    transition: none !important;
  }
}

/* Soft heading entrance on each section (desktop deck) */
@media (min-width: 768px) {
  body.home #main > section:not(#top) h2.font-serif,
  body.home #main > section:not(#top) h3.font-serif,
  body.home2 #main > section:not(#top) h2.font-serif,
  body.home2 #main > section:not(#top) h3.font-serif {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s,
      transform 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s;
    will-change: opacity, transform;
  }

  body.home #main > section.is-active:not(#top) h2.font-serif,
  body.home #main > section.is-active:not(#top) h3.font-serif,
  body.home2 #main > section.is-active:not(#top) h2.font-serif,
  body.home2 #main > section.is-active:not(#top) h3.font-serif {
    opacity: 1;
    transform: none;
  }

  /* Leave quickly so the next section can start clean */
  body.home #main > section:not(.is-active):not(#top) h2.font-serif,
  body.home #main > section:not(.is-active):not(#top) h3.font-serif,
  body.home2 #main > section:not(.is-active):not(#top) h2.font-serif,
  body.home2 #main > section:not(.is-active):not(#top) h3.font-serif {
    transition-delay: 0s;
  }
}

@media (max-width: 767px) {
  body.home #main > section:not(#top) h2.font-serif,
  body.home #main > section:not(#top) h3.font-serif,
  body.home2 #main > section:not(#top) h2.font-serif,
  body.home2 #main > section:not(#top) h3.font-serif {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- Slide-in menu panel (Khaitan-style push drawer) --- */
:root {
  --menu-duration: 0.7s;
  --menu-ease: ease;
  --menu-push: 40%; /* must match --menu-panel-w or a gap shows between panel and content */
  --menu-panel-w: 40%; /* menu bar width */
}

#mobilemenu {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  background: transparent;
  transition: visibility 0s linear var(--menu-duration);
}
#mobilemenu.open {
  pointer-events: auto;
  visibility: visible;
  background: rgba(0, 0, 0, 0.35);
  transition: visibility 0s linear 0s;
}
.menu-panel {
  transform: translateX(100%);
  transition: transform var(--menu-duration) var(--menu-ease);
  will-change: transform;
  z-index: 1;
}
#mobilemenu.open .menu-panel {
  transform: translateX(0);
}
.menu-panel--open {
  transform: translateX(0);
}

/*
 * Mobile: full-screen drawer — no partial slide / no “drag left to reveal”.
 * Panel + links snap fully into view whenever the menu is open.
 */
@media (max-width: 767px) {
  #mobilemenu {
    z-index: 200;
    overflow: hidden !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    transform: none !important;
  }

  #mobilemenu .menu-panel {
    position: absolute !important;
    inset: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.18s ease;
  }

  /* Fast dismiss — no long fade when leaving the menu */
  #mobilemenu {
    transition: visibility 0s linear 0.18s, background 0.15s ease !important;
  }
  #mobilemenu.open {
    transition: visibility 0s linear 0s, background 0.15s ease !important;
  }

  body.menu-closing-fast #mobilemenu,
  body.menu-closing-fast #mobilemenu .menu-panel,
  body.menu-closing-fast #mobilemenu .menu-panel__nav .menu-link,
  body.menu-closing-fast #mobilemenu .menu-panel__top-icons {
    transition: none !important;
  }

  #mobilemenu.open .menu-panel,
  body.menu-open #mobilemenu .menu-panel,
  #mobilemenu .menu-panel.menu-panel--open {
    transform: translate3d(0, 0, 0) !important;
  }

  #mobilemenu .menu-panel__nav {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 1.5rem 1.25rem 3rem !important;
    align-items: flex-end;
    overflow-x: hidden !important;
  }

  /* Skip stagger slide — it was leaving links off-canvas until dragged */
  #mobilemenu .menu-panel__nav .menu-link {
    opacity: 0;
    transform: none !important;
    transition: opacity 0.12s ease;
    max-width: 100%;
  }

  #mobilemenu.open .menu-panel__nav .menu-link,
  body.menu-open #mobilemenu .menu-panel__nav .menu-link,
  #mobilemenu .menu-panel--open .menu-panel__nav .menu-link {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    color: #1a1f4d !important;
    transition-delay: 0s !important;
  }

  #mobilemenu.open .menu-panel__top-icons,
  body.menu-open #mobilemenu .menu-panel__top-icons {
    opacity: 1 !important;
  }

  /* Never push the page on mobile (desktop drawer sync) */
  body.menu-open #main {
    transform: none !important;
  }

  html,
  body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
}

/* Page content pushes left in sync with the panel (desktop). */
@media (min-width: 768px) {
  #mobilemenu,
  #mobilemenu.open {
    background: transparent;
  }
  #main {
    position: relative;
    transition: transform var(--menu-duration) var(--menu-ease);
    will-change: transform;
  }
  #scrollCue {
    transition: transform var(--menu-duration) var(--menu-ease);
    will-change: transform;
  }
  .side-nav {
    transition: transform var(--menu-duration) var(--menu-ease);
  }
  body.menu-open #main {
    transform: translateX(calc(-1 * var(--menu-push)));
  }
  body.menu-open #scrollCue {
    transform: none;
  }
  body.menu-open .side-nav {
    transform: translateY(-50%) translateX(calc(-1 * var(--menu-push)));
  }
  /* Overlay on #main — moves with the pushed content, no separate flash */
  body.menu-open #main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 25;
    pointer-events: none;
    background: linear-gradient(
      to right,
      #fff 0%,
      rgba(255, 255, 255, 0.4) 100%
    );
  }
}

/* UI chrome only — do not kill #main page glide (needed with Visual effects OFF) */
@media (prefers-reduced-motion: reduce) {
  #scrollCue,
  .side-nav,
  .menu-panel,
  #mobilemenu {
    transition: none !important;
  }
}

.menu-link {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: 2.75rem;
  line-height: 1;
  color: #1a1f4d;
  text-decoration: none;
  transition:
    color 0.4s ease,
    transform 0.4s ease;
}
.menu-link:hover {
  color: #b89651;
  transform: translateX(-4px);
}
@media (max-width: 767px) {
  .menu-link {
    font-size: 2.25rem;
  }
  div#eyebrow {
    font-size: 14px !important;
  }
  span.footer-dot {
    display: none;
  }
  footer p {
    line-height: 1.4 !important;
  }
}

/* === SLIDE-DECK MODE (desktop ≥768px) === */
@media (min-width: 768px) {
  html {
    scroll-behavior: auto;
  }
  body.home main > section,
  body.page-template-front-page main > section,
  body.home2 main > section,
  body.page-template-home2 main > section,
  body.home > section {
    height: 100vh !important;
    width: 100% !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 !important;
  }

  .headerlogo img {
    height: 80px;
  }

  /* When sections are inside #main */
  body.home #main > section,
  body.home2 #main > section {
    height: 100vh !important;
    width: 100% !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 !important;
  }
  #top {
    height: 100vh !important;
  }
  #stage {
    position: relative !important;
    height: 100vh !important;
  }
  .slide-fit {
    width: 100%;
    transform-origin: center center;
  }
}

/* Memberships slider — smoother, slightly faster glide */
#memTrack {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  will-change: transform;
}

/* Keep card borders (esp. bottom on hover) inside the clipped viewport */
#memberships #memViewport {
  overflow: hidden;
  padding: 3px 2px;
  margin: -3px -2px;
}

#memberships .mem-card {
  border: 1px solid #b89651;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
  justify-content: flex-start !important; /* paragraphs align from top across boxes */
}

#memberships .mem-card > .p_color {
  margin-top: 2.5rem !important; /* more gap from the acronym heading */
}

#memberships .mem-card:hover {
  border: 1px solid rgba(184, 150, 81, 0.4);
}

/* Memberships prev/next — nudged in the 1280–1440 band only (see below) */

/* Services grid — exact 2px dividers via cell borders (avoids uneven 1fr gaps) */
#servicegrid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr !important; /* equal row heights across the grid */
  gap: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-top: 2px solid #393c59 !important;
  border-left: 2px solid #393c59 !important;
  align-items: stretch !important;
  background-color: #393c59 !important;
}

#servicegrid > * {
  min-width: 0;
  width: 100%;
  height: 100% !important;
  min-height: 100%;
  align-self: stretch !important;
  box-sizing: border-box;
  background-color: #f6f5f1;
  border-right: 2px solid #393c59 !important;
  border-bottom: 2px solid #393c59 !important;
  padding: 22px !important; /* was p-8 (32px), reduced by 10px */
}

@media (min-width: 1024px) {
  #servicegrid > * {
    padding: 30px !important; /* was lg:p-10 (40px), reduced by 10px */
  }
}

/* Service cards fill their cell so row heights stay equal */
#servicegrid > a {
  display: flex !important;
  flex-direction: column;
}

#servicegrid h4 {
  font-size: 30px !important;
  line-height: 1.2;
  margin-bottom: 0.75rem !important;
}

/* Top-align CTA with adjacent service card so headings share one baseline */
#servicegrid > div {
  align-items: flex-start !important;
}

#servicegrid > *:hover {
  background-color: #ffffff;
}

@media (max-width: 1023px) {
  #servicegrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 639px) {
  #servicegrid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: auto !important; /* let each row size to its own content */
  }

  /* Shrink service cards only — leave the last CTA box (div) natural height */
  #servicegrid > a {
    height: auto !important;
    min-height: 0 !important;
    padding: 18px 20px !important;
  }

  #servicegrid h4 {
    font-size: 24px !important;
    margin-bottom: 0.4rem !important;
  }

  #servicegrid > a p {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
}

/* mobile hero */
@media (max-width: 767px) {
  #top {
    height: 100svh !important;
    overflow: hidden;
  }
  .mem-button-slider {
    display: none;
  }
  #stage {
    position: relative !important;
    padding-top: 5.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  .f-text-box {
    gap: 15px;
  }

  .f-text-box a img {
    margin-left: 10px;
  }
  #herosub,
  #herocta {
    opacity: 1 !important;
    transform: none !important;
  }
  #top #herosub {
    font-size: 1.05rem !important;
    margin-top: 1.25rem !important;
  }
  #herocta {
    flex-direction: column;
    gap: 0.75rem !important;
  }
  #herocta > a {
    width: fit-content;
    justify-content: space-between;
    min-width: 260px;
  }
  #eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.16em !important;
    gap: 0.5rem !important;
    align-items: flex-start;
    margin-bottom: 1.5rem !important;
  }
  #eyebrow > span:first-child {
    width: 1.5rem !important;
    margin-top: 0.5em;
    flex: 0 0 auto;
  }
  #heroimg img {
    opacity: 0.6 !important;
  }
  #ghost {
    color: rgba(255, 255, 255, 0.1) !important;
  }
  #motif,
  #grid {
    display: none !important;
  }
}

/* ---- Contact form validation ---- */
.field-wrap {
  display: flex;
  flex-direction: column;
}
.field-error,
.form-status {
  min-height: 0;
  margin-top: 0.35rem;
  font-size: 0.875rem;
  line-height: 1.35;
}
.field-error:empty,
.form-status:empty {
  display: none;
}
.field-error {
  color: #9b3d3d;
}
.form-status {
  color: #1a1f4d;
}
.form-status[data-state="error"] {
  color: #9b3d3d;
}
.form-status[data-state="success"] {
  color: #2f6b45;
}
.contact-input.is-invalid,
.contact-select.is-invalid {
  border-color: #9b3d3d !important;
  box-shadow: 0 0 0 1px rgba(155, 61, 61, 0.12);
}
.contact-select {
  padding-right: 3.25rem;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #1a1f4d 50%),
    linear-gradient(135deg, #1a1f4d 50%, transparent 50%);
  background-position:
    calc(100% - 1.2rem) calc(50% - 2px),
    calc(100% - 0.95rem) calc(50% - 2px);
  background-size:
    7px 7px,
    7px 7px;
  background-repeat: no-repeat;
}
textarea.contact-input {
  min-height: 160px;
}

.menu-panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr;
  background: #f6f3ec;
}
/* Desktop: right drawer only — overlay is on #mobilemenu, not the panel */
@media (min-width: 768px) {
  .menu-panel {
    inset: 0 0 0 auto;
    width: var(--menu-panel-w);
    min-width: 300px;
    max-width: none;
    background: #f6f3ec;
  }
  .menu-panel__nav {
    position: static;
    width: auto;
    min-width: 0;
  }
}
@media (min-width: 1100px) {
  :root {
    --menu-panel-w: 40%;
  }
  .fullfeaturesections .slide-copy {
    padding-inline: 8% !important;
  }
}
.menu-panel__nav {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 40px;
  padding: 1.6rem 5.2vw 4rem 0.5rem;
  background: linear-gradient(
    180deg,
    rgba(246, 243, 236, 0.96) 0%,
    rgba(246, 243, 236, 0.92) 100%
  );
}
@media (min-width: 1800px) {
  .menu-panel__nav {
    padding: 2.5rem 5.2vw 4rem 0.5rem;
  }
}
.menu-panel__nav .menu-link {
  text-align: right;
  line-height: 1;
  opacity: 0;
  transform: translateX(30px);
  transition:
    opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    color 0.3s ease;
}
#mobilemenu.open .menu-panel__nav .menu-link,
body.menu-open #mobilemenu .menu-panel__nav .menu-link,
.menu-panel--open .menu-panel__nav .menu-link {
  opacity: 1;
  transform: translateX(0);
}
/* top-icons is child 1; links start at child 2 */
#mobilemenu.open .menu-panel__nav .menu-link:nth-child(2),
body.menu-open #mobilemenu .menu-panel__nav .menu-link:nth-child(2) {
  transition-delay: 0.15s;
}
#mobilemenu.open .menu-panel__nav .menu-link:nth-child(3),
body.menu-open #mobilemenu .menu-panel__nav .menu-link:nth-child(3) {
  transition-delay: 0.22s;
}
#mobilemenu.open .menu-panel__nav .menu-link:nth-child(4),
body.menu-open #mobilemenu .menu-panel__nav .menu-link:nth-child(4) {
  transition-delay: 0.29s;
}
#mobilemenu.open .menu-panel__nav .menu-link:nth-child(5),
body.menu-open #mobilemenu .menu-panel__nav .menu-link:nth-child(5) {
  transition-delay: 0.36s;
}
#mobilemenu.open .menu-panel__nav .menu-link:nth-child(6),
body.menu-open #mobilemenu .menu-panel__nav .menu-link:nth-child(6) {
  transition-delay: 0.43s;
}
.menu-panel__top-icons {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 1rem;
  color: #1a1f4d;
  padding-top: 0.15rem;
  margin-bottom: 0.75rem;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
}
#mobilemenu.open .menu-panel__top-icons,
body.menu-open #mobilemenu .menu-panel__top-icons,
.menu-panel--open .menu-panel__top-icons {
  opacity: 1;
}
.menu-panel__search,
.menu-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1a1f4d;
}
.menu-panel__close {
  background: transparent;
  border: 0;
  margin-top: -0.15rem;
  transition: transform 0.3s ease;
}
.menu-panel__close:hover {
  transform: rotate(90deg);
}
@media (max-width: 1023px) {
  .menu-panel__nav {
    align-items: flex-end;
    padding: 1.5rem 1.5rem 3rem;
    justify-content: unset;
  }
}

/* ---- Circular nav buttons ---- */
.circle-nav-btn {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 9999px;
  border: 1px solid rgba(26, 31, 77, 0.28);
  background: transparent;
  color: #1a1f4d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.3s ease,
    background-color 0.3s ease,
    color 0.3s ease,
    opacity 0.3s ease;
}
.circle-nav-btn svg {
  width: 1.45rem;
  height: 1.45rem;
}
.circle-nav-btn:hover {
  border-color: #b89651;
  background-color: #b89651;
  color: #f6f3ec;
}
.circle-nav-btn--gold {
  border-color: rgba(184, 150, 81, 0.9);
}
.circle-nav-btn--gold:hover {
  border-color: #b89651;
}

@media (min-width: 1600px) {
  .lg\:pr-6 {
    padding-left: 100px;
  }
}

/* === Side navigation (section dots) — deck homepages === */
#scrollCue {
  z-index: 50;
  pointer-events: auto;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}

/* Hide scroll cue while the menu drawer is open */
body.menu-open #scrollCue {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.side-nav {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end;
  mix-blend-mode: difference;
  color: #fff;
}
.side-nav__dot {
  position: relative;
  width: 11px;
  height: 11px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.side-nav__dot::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: transparent;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.side-nav__dot.is-active::before {
  width: 12px;
  height: 12px;
  background: #fff;
  border-color: #fff;
}
.side-nav__label {
  position: absolute;
  right: 22px;
  white-space: nowrap;
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: #f6f3ec;
  background: rgba(17, 20, 47, 0.82);
  padding: 4px 10px;
  border-radius: 4px;
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  mix-blend-mode: normal;
}
.side-nav__dot:hover .side-nav__label,
.side-nav__dot.is-active .side-nav__label {
  opacity: 1;
  transform: translateX(0);
}
@media (max-width: 767px) {
  .side-nav {
    display: none;
  }
}

@media (min-width: 1920px) {
  .headerlogo img {
    height: 120px;
  }
  header#nav svg {
    width: 35px;
    height: 35px;
  }
  .number-counter {
    margin-bottom: 4.3rem !important;
  }

  div#eyebrow {
    font-size: 0.75vw;
  }

  #top #herosub {
    max-width: 40%;
  }

  a.group-button {
    font-size: 0.75vw;
    line-height: 1;
    height: 72px;
  }

  a.group-button span {
    width: 72px;
    height: 72px;
  }

  a.group-button span svg {
    width: 40px;
    height: 40px;
  }
  .aboutbox {
    transform: scale(1.5);
    left: 9rem;
    bottom: 3rem;
  }

  footer a.logobox img {
    height: 60px !important;
  }

  footer a.logobox {
    padding: 24px 24px !important;
  }

  footer p,
  footer a {
    font-size: 16px;
  }
  #ctabox .max-w-5xl {
    max-width: 60%;
  }
}

/* Short / scaled desktops ONLY (e.g. 1280×600, 1920@150% → ~1280×720).
   Width capped at 1440 so larger monitors never match. */
@media (min-width: 1100px) and (max-width: 1440px) and (max-height: 730px) {
  #top h1.font-serif,
  #top h1 {
    font-size: clamp(1.75rem, 4vw, 3rem) !important;
    line-height: 1.1;
  }

  #top h1 .overflow-hidden {
    padding-bottom: 0.15rem !important;
  }

  #top #herosub,
  #top p,
  #top .text-lg {
    margin-top: 0.75rem !important;
  }

  /* Keep hero eyebrow + gold rule visible; only compress other sections */
  section:not(#top) #eyebrow {
    display: none !important;
  }

  #stage {
    padding-top: 2.5rem !important;
    padding-bottom: 0.75rem !important;
    align-items: center !important;
  }

  #motif,
  #ghost,
  #grid {
    display: none !important;
  }

  #heroimg img {
    height: 100% !important;
  }

  #herocta {
    margin-top: 0.75rem !important;
    gap: 0.5rem !important;
  }

  #herocta .group-button {
    height: 40px !important;
    font-size: 0.82rem !important;
    padding-left: 0.9rem !important;
  }

  #herocta .group-button span {
    height: 40px !important;
    width: 40px !important;
    margin-left: 0.65rem !important;
  }

  body.home main > section,
  body.page-template-front-page main > section,
  body.home2 main > section,
  body.page-template-home2 main > section,
  body.home > section,
  body.home #main > section,
  body.home2 #main > section,
  body.home-onepage-scroll #main > section {
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  /* Ivory / feature bands: keep content vertically centered in the viewport */
  body.home #main > section.bg-ivory,
  body.home2 #main > section.bg-ivory,
  body.home-onepage-scroll #main > section.bg-ivory,
  body.home #main > section.fullfeaturesections,
  body.home2 #main > section.fullfeaturesections,
  body.home-onepage-scroll #main > section.fullfeaturesections,
  body.home #main > section#firm,
  body.home #main > section#people,
  body.home #main > section#recognitions,
  body.home #main > section#memberships,
  body.home-onepage-scroll #main > section#firm,
  body.home-onepage-scroll #main > section#people,
  body.home-onepage-scroll #main > section#recognitions,
  body.home-onepage-scroll #main > section#memberships {
    justify-content: center !important;
    align-items: stretch !important;
  }

  /* Auto margins on each child stretch them apart — OK for single-block
     sections, but NOT for #recognitions (heading + logo row). */
  body.home #main > section.bg-ivory:not(#recognitions) > *,
  body.home2 #main > section.bg-ivory:not(#recognitions) > *,
  body.home-onepage-scroll #main > section.bg-ivory:not(#recognitions) > *,
  body.home #main > section.fullfeaturesections > *,
  body.home2 #main > section.fullfeaturesections > *,
  body.home-onepage-scroll #main > section.fullfeaturesections > *,
  body.home #main > section#firm > *,
  body.home #main > section#people > *,
  body.home #main > section#memberships > *,
  body.home-onepage-scroll #main > section#firm > *,
  body.home-onepage-scroll #main > section#people > *,
  body.home-onepage-scroll #main > section#memberships > * {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  /* Recognitions: keep heading + marquee as one tight group, centered together */
  body.home #main > section#recognitions,
  body.home2 #main > section#recognitions,
  body.home-onepage-scroll #main > section#recognitions {
    justify-content: center !important;
    gap: 0 !important;
  }

  body.home #main > section#recognitions > *,
  body.home2 #main > section#recognitions > *,
  body.home-onepage-scroll #main > section#recognitions > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Heading block uses shared h2 margin-bottom (1.9rem) as the gap to logos */
  body.home #main > section#recognitions > .mb-10,
  body.home2 #main > section#recognitions > .mb-10,
  body.home-onepage-scroll #main > section#recognitions > .mb-10,
  #recognitions > .mb-10 {
    margin-bottom: 0 !important;
  }

  #top,
  #stage {
    min-height: 100vh !important;
    height: 100vh !important;
  }

  /* Keep hero a true single viewport so content isn't scroll-parallaxed away */
  body.home #main > section#top,
  body.home2 #main > section#top,
  body.home-onepage-scroll #main > section#top {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  #top #stage {
    height: 100% !important;
    min-height: 0 !important;
    align-items: center !important;
    padding-top: 2.5rem !important;
    padding-bottom: 0.75rem !important;
  }

  #top #herosub,
  #top #herocta,
  #top #line1,
  #top #line2 {
    opacity: 1 !important;
    transform: none !important;
  }

  section:not(#top) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  h2.font-serif {
    font-size: clamp(1.65rem, 2.8vw, 2.35rem) !important;
    line-height: 1 !important;
    margin-bottom: 1.9rem !important;
  }

  h3.font-serif {
    font-size: clamp(1.75rem, 2.6vw, 2.5rem) !important;
    line-height: 1.15 !important;
  }

  h4.font-serif {
    font-size: clamp(0.95rem, 1.2vw, 1.15rem) !important;
  }

  .slide-media img,
  .fullfeaturesections .slide-media img {
    width: 100% !important;
    object-fit: cover !important;
  }

  .slide-media,
  .fullfeaturesections .slide-media {
    max-height: auto !important;
    overflow: visible !important;
  }

  /* Firm collage: show fuller image on short screens */
  #firm .slide-media {
    max-height: none !important;
    overflow: visible !important;
  }

  #firm .slide-media img {
    max-height: 62vh !important;
    height: auto !important;
    width: 100% !important;
    object-fit: contain !important;
  }

  #firm .slide-media .relative {
    max-height: none !important;
  }

  #firm .grid,
  .fullfeaturesections .grid {
    gap: 1rem !important;
    align-items: center !important;
  }

  .number-counter {
    font-size: clamp(1.5rem, 2.2vw, 2.1rem) !important;
    line-height: 1 !important;
    margin-bottom: 0.5rem !important;
    padding-top: 0 !important;
  }

  .number-counter .gold-icon {
    font-size: 1.1rem !important;
    top: -2px !important;
  }

  .counterbox {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    gap: 1.25rem !important;
  }

  .aboutbox {
    padding: 0.45rem 0.85rem !important;
    transform: none !important;
    left: 6rem !important;
    bottom: 0.35rem !important;
  }

  .aboutbox .font-serif {
    font-size: 1.35rem !important;
  }

  #people .aspect-\[4\/5\] {
    aspect-ratio: 4 / 3.5 !important;
    max-height: 48vh !important;
  }

  #people .aspect-\[4\/5\] img {
    object-position: center top !important;
  }

  #people h2,
  #testimonials h2,
  #services h2 {
    margin-bottom: 1.9rem !important;
  }

  #peoplegrid,
  #testimonials .grid {
    gap: 0.75rem !important;
  }

  /*
   * Services @ short/scaled desktops (e.g. 1280×600):
   * free space above the heading + shrink cards equally so content fits.
   */
  #services {
    justify-content: flex-start !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.25rem !important;
    box-sizing: border-box !important;
  }

  #services > .mx-auto {
    width: 100%;
    max-height: 100%;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 0.65rem !important;
  }

  #services .mb-4 {
    margin-bottom: 0.4rem !important;
  }

  #services h2.font-serif {
    margin-bottom: 0.65rem !important;
  }

  #servicegrid {
    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    flex: 0 1 auto !important;
    min-height: 0 !important;
  }

  #servicegrid > * {
    padding: 1.5rem 0.85rem !important;
    min-height: 0 !important;
    height: auto !important;
  }

  #servicegrid h4 {
    font-size: 1.15rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.3rem !important;
  }

  #servicegrid > a p,
  #servicegrid > div p {
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
  }

  #servicegrid .group-button,
  #servicegrid .group-button span {
    height: 2.25rem !important;
  }

  #servicegrid .group-button span {
    width: 2.25rem !important;
    margin-left: 0.65rem !important;
  }

  #people h4.font-serif {
    margin-top: 0.35rem !important;
  }

  #news .aspect-\[16\/10\] {
    aspect-ratio: 30 / 11 !important;
    max-height: 30vh !important;
  }

  #newsgrid a > div:last-child {
    padding: 0.85rem !important;
  }

  .fullfeaturesections {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Don't offset media/copy — that shifts ivory sections off true vertical center */
  body.home #main > section .slide-media,
  body.home2 #main > section .slide-media,
  body.home-onepage-scroll #main > section .slide-media,
  body.home #main > section .slide-media.slide-media--up,
  body.home2 #main > section .slide-media.slide-media--up,
  body.home-onepage-scroll #main > section .slide-media.slide-media--up,
  body.home #main > section .slide-copy,
  body.home2 #main > section .slide-copy,
  body.home-onepage-scroll #main > section .slide-copy {
    transform: none !important;
    transition-delay: 0s !important;
  }

  .menu-panel__nav {
    gap: 18px;
  }

  /* Contact + footer: keep footer bar visible in short viewports */
  #contact {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #contact > .flex-1 {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.5rem !important;
    overflow-y: auto !important;
    align-items: flex-start !important;
  }

  #contact > .flex-1 .mb-10,
  #contact h2.font-serif {
    margin-bottom: 1.9rem !important;
  }

  #contact .space-y-7 > * + *,
  #contact .space-y-5 > * + * {
    margin-top: 0.55rem !important;
  }

  #contact .contact-input,
  #contact textarea.contact-input {
    padding-top: 0.675rem !important;
    padding-bottom: 0.675rem !important;
    min-height: 0 !important;
  }

  #contact textarea.contact-input {
    min-height: 72px !important;
  }

  #contact #site-footer {
    flex-shrink: 0 !important;
    display: block !important;
    position: relative !important;
    z-index: 2;
  }

  #contact #site-footer > div {
    min-height: 0 !important;
  }

  #contact #site-footer a,
  #contact #site-footer p,
  #contact #site-footer .f-text-box {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  #contact #site-footer img {
    height: 1.35rem !important;
  }

  #contact #site-footer .py-6,
  #contact #site-footer [class*="py-"] {
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
  }
}

/*
 * Mid desktops 1280–1440 only: fluid type + box spacing so browser zoom
 * reflows sections. Screens wider than 1440px are untouched.
 */
@media (min-width: 1280px) and (max-width: 1440px) {
  #top h1.font-serif,
  #top h1 {
    font-size: clamp(2.25rem, 4.2vw, 3.5rem) !important;
    line-height: 1.1;
  }

  h2.font-serif {
    font-size: clamp(2.25rem, 3.2vw, 3.25rem) !important;
    line-height: 1 !important;
    margin-bottom: 1.25rem !important;
  }

  #news h2.font-serif {
    margin-bottom: 0 !important;
  }

  #people h2 {
    margin-bottom: 1rem !important;
  }

  section#memberships h2 {
    margin-bottom: 1.25rem !important;
  }

  h3.font-serif {
    font-size: clamp(1.85rem, 2.8vw, 2.75rem) !important;
  }

  h4.font-serif {
    font-size: clamp(1.15rem, 1.5vw, 1.5rem) !important;
  }

  p.text-lg,
  .text-lg,
  #services .text-white,
  #memberships .p_color.text-lg {
    font-size: clamp(0.9rem, 1.05vw, 1.125rem) !important;
    line-height: 1.5 !important;
  }

  .p_color,
  #servicegrid > a p,
  #servicegrid > div p {
    font-size: clamp(0.8rem, 1vw, 0.95rem) !important;
    line-height: 1.45 !important;
  }

  #servicegrid > * {
    padding: clamp(1rem, 1.6vw, 1.5rem) clamp(0.75rem, 1.2vw, 1.1rem) !important;
  }

  #servicegrid h4 {
    font-size: clamp(1.25rem, 1.8vw, 1.75rem) !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.2 !important;
  }

  #servicegrid .group-button {
    height: clamp(2.5rem, 3.5vw, 3rem) !important;
  }

  #servicegrid .group-button span {
    height: clamp(2.5rem, 3.5vw, 3rem) !important;
    width: clamp(2.5rem, 3.5vw, 3rem) !important;
  }

  #memberships .mem-button-slider {
    position: relative;
    top: 3.125rem; /* ~50px, scales with zoom via rem */
  }

  #memberships .mem-card > .p_color {
    margin-top: clamp(1.5rem, 2.5vw, 2.5rem) !important;
  }

  #memberships #memViewport {
    padding: 0.2rem 0.15rem;
    margin: -0.2rem -0.15rem;
  }

  #recognitions h2.font-serif {
    margin-bottom: 1.25rem !important;
  }

  #recognitions .mb-10 {
    margin-bottom: clamp(1.5rem, 2.5vw, 2.5rem) !important;
  }

  .slide-media img,
  .fullfeaturesections .slide-media img {
    max-height: clamp(42vh, 58vh, 70vh) !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  #firm .slide-media img {
    max-height: clamp(48vh, 62vh, 74vh) !important;
    object-fit: contain !important;
  }

  #people .aspect-\[4\/5\] {
    max-height: clamp(45vh, 55vh, 65vh) !important;
  }

  #news .aspect-\[16\/10\] {
    max-height: clamp(22vh, 28vh, 34vh) !important;
  }

  #herocta .group-button {
    height: clamp(2.5rem, 3.8vw, 3.25rem) !important;
    font-size: clamp(0.8rem, 1vw, 0.95rem) !important;
  }

  #herocta .group-button span {
    height: clamp(2.5rem, 3.8vw, 3.25rem) !important;
    width: clamp(2.5rem, 3.8vw, 3.25rem) !important;
  }

  .number-counter {
    font-size: clamp(1.75rem, 2.8vw, 2.75rem) !important;
  }
}

/*
 * Large desktops (1441px+) — keep original section CSS.
 * Do not use min-height alone here; that would override the 1280–1440 band.
 */
@media (min-width: 1441px) {
  body.home #main > section.bg-ivory:not(#recognitions) > *,
  body.home2 #main > section.bg-ivory:not(#recognitions) > *,
  body.home-onepage-scroll #main > section.bg-ivory:not(#recognitions) > *,
  body.home #main > section.fullfeaturesections > *,
  body.home2 #main > section.fullfeaturesections > *,
  body.home-onepage-scroll #main > section.fullfeaturesections > *,
  body.home #main > section#firm > *,
  body.home #main > section#people > *,
  body.home #main > section#memberships > *,
  body.home-onepage-scroll #main > section#firm > *,
  body.home-onepage-scroll #main > section#people > *,
  body.home-onepage-scroll #main > section#memberships > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body.home #main > section#recognitions,
  body.home2 #main > section#recognitions,
  body.home-onepage-scroll #main > section#recognitions {
    gap: normal !important;
  }

  #top #eyebrow {
    display: flex !important;
    visibility: visible !important;
  }

  #top #eyebrow > span:first-child {
    display: inline-block !important;
    background-color: rgba(184, 150, 81, 0.7) !important;
  }

  #services {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    justify-content: center !important;
  }

  #services > .mx-auto {
    display: block !important;
    gap: normal !important;
    max-height: none !important;
  }

  #services .mb-4 {
    margin-bottom: 1rem !important;
  }

  #services h2.font-serif {
    margin-bottom: 1.9rem !important;
  }

  #servicegrid > * {
    padding: 30px !important;
    height: 100% !important;
    min-height: 100% !important;
  }

  #servicegrid h4 {
    font-size: 30px !important;
    line-height: 1.2 !important;
    margin-bottom: 0.75rem !important;
  }

  .slide-media,
  .fullfeaturesections .slide-media {
    max-height: unset !important;
  }

  /* Do NOT reset slide-media / slide-copy transform here — that killed the
   * Khaitan column stagger (image vs copy ms gap) on large screens.
   * Short-screen override stays scoped to max-width: 1440px above. */

  #memberships .mem-button-slider {
    position: static;
    top: auto;
  }

  h2.font-serif {
    font-size: 60px !important;
    line-height: 0.95 !important;
    margin-bottom: 1.9rem !important;
  }

  #news h2.font-serif {
    margin-bottom: 0 !important;
  }

  #people h2 {
    margin-bottom: 1rem !important;
  }

  section#memberships h2 {
    margin-bottom: 25px !important;
  }
}

@media (min-width: 1500px) {
  #servicegrid > * {
    padding: 35px !important;
  }
}

/* Hide page scrollbar on desktop slide-deck — scrolling still works via
   wheel, keyboard, side-nav dots, and the scroll cue button. */
@media (min-width: 768px) {
  html:has(body.home),
  html:has(body.home2),
  html:has(body.page-template-front-page),
  html:has(body.page-template-home2),
  body.home,
  body.home2,
  body.page-template-front-page,
  body.page-template-home2 {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  html:has(body.home)::-webkit-scrollbar,
  html:has(body.home2)::-webkit-scrollbar,
  html:has(body.page-template-front-page)::-webkit-scrollbar,
  html:has(body.page-template-home2)::-webkit-scrollbar,
  body.home::-webkit-scrollbar,
  body.home2::-webkit-scrollbar,
  body.page-template-front-page::-webkit-scrollbar,
  body.page-template-home2::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
}

nav.side-nav {
  display: none;
}