/* ===========================
   GLOBAL STYLES
   =========================== */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: 'Libre Baskerville', serif;
  background-color: #cec8bf !important; /* Warm ivory everywhere */
  line-height: 1.5;
}

a {
  text-decoration: none;
  transition: all 0.3s linear;
  color: inherit;
}

/* ===========================
   FIX: MAKE THE AREA BETWEEN ORANGE TOPBAR + BLUE NAV IVORY
   =========================== */
.brandingBar {
  background-color: #cec8bf !important; /* was #f4f4f4 */
  padding: 0;
  margin-top: 50px;
}

/* Foundation wrappers in the branding/header area can default to white */
.brandingBar .grid-container,
.brandingBar .grid-x,
.brandingBar .cell,
header {
  background-color: #cec8bf !important;
}

/* If Foundation off-canvas is used, it can also introduce white backgrounds */
.off-canvas-content,
.off-canvas-wrapper,
.off-canvas-wrapper-inner {
  background-color: #cec8bf !important;
}

/* ===========================
   HEADER & FOOTER
   =========================== */
header, footer {
  font-family: 'Libre Baskerville', serif;
}

/* ===========================
   BUTTONS
   =========================== */
.button,
.button.disabled,
.button[disabled] {
  background-color: #000;
  color: #fefefe;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 5px;
  font-weight: bold;
  text-transform: normal;
  display: inline-block;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button:hover,
.button:focus {
  background-color: #333;
}

.button.gold {
  background-color: #f89828;
}

.button.gold:hover,
.button.gold:focus {
  background-color: #404040;
}

/* ===========================
   TOP BAR
   =========================== */
.topBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #efa228;
  padding: 10px;
  z-index: 1000;
  text-align: right;
  font-family: 'Libre Baskerville', serif;
}

.topBar a {
  color: #fff;
}

.topBar a:hover {
  color: #000;
}

/* ===========================
   HEADER ADDRESS
   =========================== */
.headerAddress {
  text-align: right;
  font-size: 1.25rem;
  padding-top: 20px;
  font-family: 'Libre Baskerville', serif;
}

.headerAddressMob {
  text-align: center;
  font-size: 1.25rem;
  padding-top: 20px;
  font-family: 'Libre Baskerville', serif;
}

/* ===========================
   BRANDING BAR & GLOBAL NAV
   =========================== */
.globalNav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  background-color: #6c8ac6;
  padding: 20px 0;
  font-family: 'Libre Baskerville', serif;
}

.globalNav a {
  color: #f4f4f4;
  font-size: 1.2rem;
  font-weight: bold;
  transition: color 0.3s ease;
}

.globalNav a:hover {
  color: #f0d27a;
}

.globalNav_left,
.globalNav_right {
  text-align: center;
  float: none;
}

/* ===========================
   MENU & DRILLDOWN NAVIGATION
   =========================== */
.menu,
.drilldown {
  background-color: #6c8ac6;
  font-family: 'Libre Baskerville', serif;
}

.menu a,
.menu .button,
.drilldown a {
  display: block;
  padding: 0.7rem 1rem;
  line-height: 1;
  color: #fff;
  background-color: #6c8ac6;
}

.menu a:hover,
.menu .button:hover,
.drilldown a:hover {
  background-color: rgba(0,0,0,0.14);
  color: #f0d27a;
}

.is-drilldown {
  position: relative;
  overflow: hidden;
}

.is-drilldown li {
  display: block;
}

.is-drilldown.animate-height {
  transition: height 0.5s;
}

.drilldown .is-drilldown-submenu {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  background-color: #6c8ac6;
  z-index: -1;
  transition: transform 0.15s linear;
}

.drilldown .is-drilldown-submenu.is-active {
  z-index: 1;
  transform: translateX(-100%);
}

.drilldown .is-drilldown-submenu.is-closing {
  transform: translateX(100%);
}

.drilldown .is-drilldown-submenu-parent > a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 1rem;
  margin-top: -6px;
  border: 6px solid transparent;
  border-right-width: 0;
  border-color: transparent transparent transparent #1779ba;
}

/* ===========================
   VIDEO HERO
   =========================== */
.videoHero {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  font-family: 'Libre Baskerville', serif;
}

.background-video-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.background-video-container img,
.background-video-container video.background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.centered-videoText {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
  z-index: 2;
  padding: 0 20px;
  font-family: 'Libre Baskerville', serif;
}

.centered-videoText h1 {
  font-size: 3rem;
  margin: 0.5rem 0;
}

.centered-videoText p {
  font-size: 1.2rem;
  max-width: 800px;
  margin: 0 auto;
}

/* Remove margin and padding from the top and bottom of surrounding elements */
.topBar {
  margin-bottom: 0 !important; /* Ensure no space beneath the top bar */
}

.brandingBar {
  margin-top: 0 !important; /* Ensure no margin above the branding bar */
}

/* Optional: Adjust other containers to avoid pushing video down */
.globalNav,
.homepageContentContainer {
  margin-top: 0 !important;
}

/* ===========================
   BOXES & IMAGES
   =========================== */
.homepageBoxes {
  border-radius: 20px;
  text-align: center;
  box-shadow: 0px 4px 21px -2px rgba(0, 0, 0, 0.55);
  transition: transform 0.2s ease-in-out;
  font-family: 'Libre Baskerville', serif;
}

.homepageBoxes:hover {
  transform: scale(1.03);
}

.imageStyle1 {
  padding: 3px;
  border: 1px solid #666;
  border-radius: 5px;
}

.rounded {
  border-radius: 10px;
}

.homepageContentContainer {
  background-color: #f9f9f9;
  padding: 20px;
  box-shadow: 0 0 10px #888888;
  font-family: 'Libre Baskerville', serif;
}

/* ===========================
   TYPOGRAPHY
   =========================== */
h1, h2, h3 {
  font-family: 'Libre Baskerville', serif;
}

/* (global h3 centering removed 2026-06-11 — headings align with their
   context; centered contexts set it explicitly) */
h3 {
  font-size: 1.5rem;
  color: #333;
}

.articleStyle p,
.articleStyle ul,
.articleStyle li {
  font-size: 1.1rem;
}

.articleStyle h1 {
  font-family: 'Libre Baskerville', serif;
  font-weight: 400;
  font-size: 38px;
  letter-spacing: 1px;
  margin-bottom: 30px;
}

/* ===========================
   TESTIMONIALS
   =========================== */
.testimonial-block-vertical-quote {
  background: rgba(239, 162, 40, 0.5);
  padding: 1rem;
  border-radius: 10px;
  margin-bottom: 1.875rem;
  position: relative;
  font-family: 'Libre Baskerville', serif;
}

.testimonial-block-vertical-quote::after {
  content: '';
  position: absolute;
  bottom: -1.25rem;
  left: 2.25rem;
  border-style: solid;
  border-width: 1.25rem 1.125rem 0 1.125rem;
  border-color: rgba(239, 162, 40, 0.5) transparent transparent transparent;
}

.testimonial-block-vertical-person {
  display: flex;
  align-items: center;
  margin-left: 1.65rem;
  font-family: 'Libre Baskerville', serif;
}

.testimonial-block-vertical-avatar {
  border-radius: 50%;
  width: 60px;
  height: 60px;
}

.testimonial-block-vertical-name {
  text-transform: uppercase;
  font-weight: 600;
  margin-left: 0.65rem;
}

.testimonial-block-vertical-info {
  text-transform: uppercase;
  font-size: 14px;
  color: #8a8a8a;
  margin-left: 0.65rem;
}

/* ===========================
   FOOTER SPECIFIC
   =========================== */
footer {
  font-family: 'Libre Baskerville', serif;
}

/* ===========================
   MISC
   =========================== */
.bottom-left {
  position: relative;
  bottom: 20px;
  left: 20px;
  font-size: 1rem;
  color: #000;
  padding: 10px;
  z-index: 1000;
  font-family: 'Libre Baskerville', serif;
}

.button-container {
  text-align: center;
  margin: 30px 0;
}

/* ===========================
   RESPONSIVE (MOBILE)
   =========================== */
@media (max-width: 768px) {

  .topBar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
    padding: 8px 10px;
    line-height: 1.2;
  }

  .topBar a {
    display: inline-block;
    padding: 4px 6px;
    white-space: nowrap;
    font-size: 0.95rem;
  }

  .brandingBar {
    margin-top: 72px; /* mobile-only: compensates for wrapped topBar */
  }

  .headerAddress {
    text-align: center;
    padding-top: 10px;
    font-size: 1.05rem;
  }

  .globalNav {
    flex-direction: column;
    gap: 0.75rem;
    padding: 14px 0;
  }

  .globalNav a {
    font-size: 1.05rem;
  }

  .homepageContentContainer {
    padding: 14px;
  }

  .articleStyle p,
  .articleStyle ul,
  .articleStyle li {
    font-size: 1.0rem;
    line-height: 1.6;
  }

  .testimonial-block-vertical-person {
    margin-left: 0.75rem;
    flex-wrap: wrap;
    gap: 6px;
  }

  .testimonial-block-vertical-quote::after {
    left: 1.5rem;
  }
}

@media (max-width: 480px) {

  .centered-videoText {
    width: calc(100% - 24px);
    left: 12px;
    transform: none;
    bottom: 12px;
    padding: 0;
  }

  .centered-videoText h1 {
    font-size: 1.5rem;
  }

  .centered-videoText p {
    font-size: 1rem;
    max-width: 100%;
  }

  .homepageBoxes {
    margin: 10px;
  }

  .videoHero {
    aspect-ratio: 16 / 9;
  }
}

/* Force all page titles to be identical (keeps your current desktop behavior) */
.articleStyle h1 {
  font-family: 'Libre Baskerville', serif;
  font-size: 2.5rem !important;
  font-weight: 700;
  text-align: center;
  letter-spacing: 1px;
  margin-bottom: 30px;
}

/* ===========================
   MOBILE TOP BAR FIX
   =========================== */
@media (max-width: 768px) {

  .topBar {
    padding: 0.35rem 0.75rem !important;
  }

  .topBar .grid-x {
    flex-wrap: nowrap !important;
  }

  .topBar .cell {
    flex: 1 1 auto !important;
  }

  .topBar .large-6:first-child {
    justify-content: flex-start !important;
    font-size: 0.85rem;
  }

  .topBar .large-6:last-child {
    justify-content: flex-end !important;
    font-size: 0.75rem;
  }

  .topBar span {
    display: none;
  }

  .topBar i {
    font-size: 1.1rem !important;
  }
}

/* ===========================
   GLOBAL TOP BAR UPDATE
   =========================== */
.topBar {
  background-color: #e89c24 !important; /* New refined orange */
}

/* ===========================
   GLOBAL PREMIUM BUTTON UPGRADE
   =========================== */
.button,
.black-button,
a.button {
  background: linear-gradient(135deg, #000000, #333333);
  border-radius: 30px;
  padding: 12px 28px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  box-shadow: 0 8px 18px rgba(0,0,0,0.2);
  border: none;
}

.button:hover,
.black-button:hover,
a.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.25);
}

/* ===========================
   HOMEPAGE: SYMMETRICAL VERTICAL RHYTHM
   Applies only when <body class="home">
   =========================== */
body.home{
  --home-gap: 40px;
  --home-gap-sm: 24px;
  --home-gap-xs: 18px;

  --home-inner: 18px;
  --home-inner-sm: 14px;
}

body.home .globalNav{
  margin-bottom: 0 !important;
}

body.home .globalNav + .videoHero,
body.home .videoHero{
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: var(--home-gap) !important;
}

body.home .videoHero + .grid-container{
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: var(--home-gap) !important;
}

body.home .homepageBoxes{
  margin-bottom: 32px;
}

body.home .goal-block,
body.home p[style*="OUR GOAL IS SIMPLE"]{
  margin-top: 0 !important;
  margin-bottom: var(--home-gap) !important;
}

body.home h2[style*="text-align: center;"]{
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}
body.home #testimonial-rotator{
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

body.home .center-container[style*="margin-top: -20px;"]{
  margin-top: 0 !important;
  margin-bottom: var(--home-inner) !important;
}

body.home .bottom-center.highlighted{
  margin-top: var(--home-inner) !important;
  margin-bottom: var(--home-gap) !important;
}

body.home .site-footer{
  margin-top: 0 !important;
}

@media (max-width: 640px){
  body.home .videoHero{
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }

  body.home .videoHero + .grid-container{
    padding-bottom: var(--home-gap-sm) !important;
  }

  body.home .homepageBoxes{
    margin-bottom: 22px;
  }

  body.home .goal-block,
  body.home p[style*="OUR GOAL IS SIMPLE"]{
    margin-bottom: var(--home-gap-sm) !important;
  }

  body.home .bottom-center.highlighted{
    margin-bottom: var(--home-gap-sm) !important;
  }
}

@media (max-width: 380px){
  body.home .videoHero{
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
}

/* ===========================
   VIDEO HERO: MAX POP + IVORY BLEND (SHARP CORNERS, NO FADING OVERLAYS)
   =========================== */
.videoHero {
  border-radius: 0 !important;
  overflow: hidden;
  background: #cec8bf;

  box-shadow:
    0 1px 0 rgba(255,255,255,0.65),
    0 18px 45px rgba(0,0,0,0.22),
    0 6px 16px rgba(0,0,0,0.14);

  outline: 2px solid rgba(239,233,223,0.95);
  outline-offset: 0;
}

.videoHero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
  z-index: 2;
}

.background-video-container img,
.background-video-container video.background-video {
  filter: contrast(1.06) saturate(1.07) brightness(1.02);
  transform: scale(1.01);
}

.centered-videoText {
  z-index: 3;
  text-shadow:
    0 10px 28px rgba(0,0,0,0.55),
    0 2px 6px rgba(0,0,0,0.35);
}

.background-video-container::after,
.videoHero::before {
  content: none !important;
}


/* ===========================
   LUXURY TILE UPGRADE (SERVICES)
   Targets: .callout.homepageBoxes
   =========================== */
.callout.homepageBoxes{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  background: linear-gradient(180deg, #fbf7f0 0%, #f3ece2 100%);
  border-radius: 16px;
  padding: 1.35rem 1.25rem;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.10),
    0 2px 6px rgba(0,0,0,0.06);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.callout.homepageBoxes::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #b8892d 0%, #f0d27a 45%, #b8892d 100%);
  opacity: 0.95;
}

.callout.homepageBoxes::after{
  content: "";
  position: absolute;
  top: -40%;
  left: -60%;
  width: 160%;
  height: 160%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.55), rgba(255,255,255,0) 55%);
  transform: rotate(8deg);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}

.callout.homepageBoxes:hover,
.callout.homepageBoxes:focus-within{
  transform: translateY(-6px);
  border-color: rgba(184,137,45,0.30);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.14),
    0 6px 14px rgba(0,0,0,0.08);
}

.callout.homepageBoxes:hover::after,
.callout.homepageBoxes:focus-within::after{
  opacity: 1;
}

.callout.homepageBoxes h3{
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
  margin: 0.35rem 0 0.6rem;
  letter-spacing: 0.2px;
  color: #1b1b1b;
}

.callout.homepageBoxes p{
  color: rgba(0,0,0,0.78);
  font-size: 0.95rem;
  line-height: 1.55;
  margin-bottom: 1.05rem;
}

a .callout.homepageBoxes h3,
a .callout.homepageBoxes p{
  text-decoration: none;
}

.callout.homepageBoxes .button.expanded{
  border-radius: 10px;
  letter-spacing: 0.6px;
  box-shadow: 0 10px 18px rgba(0,0,0,0.10);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.callout.homepageBoxes:hover .button.expanded{
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(0,0,0,0.14);
  filter: brightness(1.02);
}

@media screen and (max-width: 640px){
  .callout.homepageBoxes{
    border-radius: 14px;
    padding: 1.15rem 1.05rem;
  }
}

/* ======================================================
   GLOBAL LUXURY SIDEBAR — OUR SERVICES (ALL PAGES)
   ====================================================== */
.callout.homepageContentContainer.rounded {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fbf7f0 0%, #f3ece2 100%);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 16px;
  padding: 1.2rem 1.15rem;
  box-shadow:
    0 16px 38px rgba(0,0,0,0.14),
    0 5px 12px rgba(0,0,0,0.08);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.callout.homepageContentContainer.rounded::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #b8892d 0%, #f0d27a 45%, #b8892d 100%);
  opacity: 0.95;
}

.callout.homepageContentContainer.rounded h3 {
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0.6rem 0 1rem;
  color: #1b1b1b;
  letter-spacing: 0.3px;
}

.callout.homepageContentContainer.rounded ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.callout.homepageContentContainer.rounded li {
  margin: 0;
}

.callout.homepageContentContainer.rounded li a {
  display: block;
  padding: 0.75rem 0.8rem;
  border-radius: 10px;
  color: rgba(0,0,0,0.82);
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.3;
  transition: background-color 180ms ease, transform 180ms ease;
}

.callout.homepageContentContainer.rounded li a:hover {
  background-color: rgba(184,137,45,0.12);
  transform: translateX(3px);
}

/* ======================================================
   LATEST FIX: SCHEDULE APPOINTMENT — FULL BLUE BLEND
   (No borders, no card edge, seamless with nav blue)
   ====================================================== */
:root{
  --brandBlue: #6c8ac6; /* your current nav/menu blue */
}

/* Make the schedule section itself blue */
.schedulePageWrap{
  background: var(--brandBlue) !important;
  padding-top: 70px;
  padding-bottom: 90px;
}

/* IMPORTANT: this class adds a white panel globally; override it on schedule page */
.homepageContentContainer.schedulePageWrap{
  background: var(--brandBlue) !important;
  box-shadow: none !important;
}

/* Remove the “card” look entirely */
.scheduleFormShell{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 !important;

  background: var(--brandBlue) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  overflow: visible !important;
}

/* Remove inner framing too */
.scheduleFormInner{
  background: var(--brandBlue) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  overflow: visible !important;
}

/* Hide any optional decorative layers if present */
.scheduleFormShell .luxGlow,
.scheduleFormShell .luxNoise,
.scheduleFormShell .luxSweep{
  display: none !important;
}

/* Ensure the iframe doesn’t introduce a “panel” */
.tallyFrame{
  background: transparent !important;
  border: 0 !important;
  display: block;
  width: 100%;
}

/* Mobile tuning */
@media (max-width: 640px){
  .schedulePageWrap{
    padding-top: 50px;
    padding-bottom: 70px;
  }

  .scheduleFormShell{
    margin: 0 12px;
  }
}

/* ===========================
   OFFICE PAGE — LUXURY POLISH (NO LAYOUT CHANGES)
   Paste at END of app.css
   =========================== */

/* --- Subtle global polish (keeps your ivory vibe) --- */
body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Give the main content area a refined “cardless” depth without moving anything */
.homepageContentContainer{
  background: transparent !important;
}


/* “View on Map” link: looks like a refined action, not a default blue link */
.homepageContentContainer a[target="_blank"][style*="View on Map"]{
  color: #111 !important;
  opacity: 0.85;
  transition: opacity .25s ease, transform .25s ease;
}
.homepageContentContainer a[target="_blank"][style*="View on Map"]:hover{
  opacity: 1;
  transform: translateY(-1px);
}

/* --- Button: premium black glass feel, crisp edges, subtle motion --- */
.button{
  border-radius: 6px !important; /* keep “sharp”, but not harsh */
  text-transform: none !important;
  letter-spacing: 0.02em;
  font-weight: 700;
  background: linear-gradient(180deg, #111 0%, #000 100%) !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,0.18),
    0 1px 0 rgba(255,255,255,0.10) inset;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.button:hover{
  transform: translateY(-1px);
  box-shadow:
    0 16px 34px rgba(0,0,0,0.22),
    0 1px 0 rgba(255,255,255,0.12) inset;
  filter: brightness(1.02);
}
.button:active{
  transform: translateY(0px);
}

/* --- Nav: slightly more “designed” while staying in place --- */
.globalNav{
  position: relative;
}
/* Gold gradient hairline along the nav's bottom edge — the premium "finish" */
.globalNav::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 2px;
  background: linear-gradient(90deg, rgba(184,137,45,0) 0%, #b8892d 18%, #f0d27a 50%, #b8892d 82%, rgba(184,137,45,0) 100%);
  pointer-events:none;
}

/* Make menu items feel crisp */
.top-bar .menu a{
  letter-spacing: 0.02em;
  transition: opacity .2s ease, transform .2s ease;
}
.top-bar .menu a:hover{
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Dropdown polish (no layout change) */
.submenu{
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}

/* --- Video: premium “floating glass” treatment, sharp corners preserved --- */
video.imageStyle1{
  border-radius: 0 !important; /* keep sharp edges */
  outline: 1px solid rgba(0,0,0,0.10);
  box-shadow:
    0 26px 60px rgba(0,0,0,0.22),
    0 2px 0 rgba(255,255,255,0.16) inset;
  background: transparent;
  transform: translateZ(0);
}

/* Subtle “ambient” glow behind the video (still rectangular) */
video.imageStyle1{
  position: relative;
}
video.imageStyle1{
  /* soft glow via drop-shadow keeps the rectangle crisp */
  filter:
    drop-shadow(0 18px 40px rgba(0,0,0,0.20))
    drop-shadow(0 0 24px rgba(17,17,17,0.08));
}

/* Make the video feel more premium on hover without moving layout */
video.imageStyle1:hover{
  outline-color: rgba(0,0,0,0.18);
  box-shadow:
    0 34px 72px rgba(0,0,0,0.26),
    0 2px 0 rgba(255,255,255,0.18) inset;
}

/* --- Footer: cleaner, more “finished” --- */
footer, .grid-container.fluid[style*="background-color:#000"]{
  box-shadow: 0 -14px 30px rgba(0,0,0,0.18);
}

/* Keep About Us dropdown names on one line */
.submenu.sublink li a {
    white-space: nowrap;
}

/* Remove extra spacing under homepage tiles */
.home .homepageBoxes {
  margin-bottom: 0 !important;
}

/* Tighten the grid container holding the tiles */
.home .grid-container.section {
  margin-bottom: 12px !important;
}

/* Remove extra padding from grid rows */
.home .grid-x {
  margin-bottom: 0 !important;
}

/* ======================================================
   BOTTOM CENTER CONTACT CONTAINER — SEAMLESS IVORY BLEND
   (Address / Hours / Social / Phone / Email)
   Paste at END of app.css
   ====================================================== */

/* Target your bottom center block (you already reference .bottom-center.highlighted) */
.bottom-center,
.bottom-center.highlighted{
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;   /* removes sharp card corners */
}

/* If it’s a Foundation callout/panel/box inside, neutralize those too */
.bottom-center .callout,
.bottom-center .panel,
.bottom-center .card,
.bottom-center .homepageContentContainer{
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Many “mystery borders” are actually pseudo elements */
.bottom-center::before,
.bottom-center::after,
.bottom-center *::before,
.bottom-center *::after{
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
}

/* Make sure the parent around it is also ivory (prevents a faint seam) */
.bottom-center{
  background-color: #cec8bf !important; /* same ivory as body */
}

/* Optional: add gentle spacing so it still feels intentional, not “floating” */
.bottom-center{
  padding: 18px 16px !important;
}

/* Typography polish so it matches the rest and reads cleanly */
.bottom-center,
.bottom-center p,
.bottom-center li,
.bottom-center a{
  font-family: 'Libre Baskerville', serif !important;
  color: rgba(0,0,0,0.84) !important;
}

/* Links: look refined (not default link-blue) */
.bottom-center a{
  text-decoration: none !important;
  border-bottom: 1px solid rgba(0,0,0,0.18);
  padding-bottom: 1px;
  transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
}

.bottom-center a:hover{
  opacity: 1;
  border-bottom-color: rgba(0,0,0,0.35);
  transform: translateY(-1px);
}

/* Social icons / icon links: remove any “button” backgrounds */
.bottom-center a i,
.bottom-center .social a,
.bottom-center .social a i{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* If you used <hr> lines in that container, soften/remove them */
.bottom-center hr{
  border: 0 !important;
  height: 1px !important;
  background: rgba(0,0,0,0.10) !important;
  margin: 12px auto !important;
  max-width: 520px;
}

/* If the container is in a grid cell that has a white background, kill it */
.bottom-center.cell,
.bottom-center .cell{
  background: transparent !important;
}

/* =========================================
   FLOATING BOTTOM CENTER (ONE LUX SHEET)
   ========================================= */

.bottom-center,
.bottom-center.highlighted{
  position: relative;
  max-width: 920px;
  margin: 34px auto 64px !important;
  padding: 34px 26px !important;

  /* “glass” that still matches ivory */
  background: rgba(239,233,223,0.72) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255,255,255,0.45) !important; /* not a harsh border */
  border-radius: 18px !important;

  /* floating lift */
  box-shadow:
    0 24px 60px rgba(0,0,0,0.14),
    0 8px 18px rgba(0,0,0,0.08),
    0 1px 0 rgba(255,255,255,0.55) inset !important;

  transform: translateZ(0);
}

/* ambient glow underneath (makes it feel lifted off the page) */
.bottom-center::before{
  content:"";
  position:absolute;
  left: 10%;
  right: 10%;
  bottom: -18px;
  height: 40px;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0.20) 0%,
    rgba(0,0,0,0.10) 35%,
    rgba(0,0,0,0.00) 70%
  );
  filter: blur(10px);
  opacity: 0.35;
  z-index: -1;
  pointer-events: none;
}

/* keep text crisp */
.bottom-center,
.bottom-center p,
.bottom-center a,
.bottom-center li{
  color: rgba(0,0,0,0.84) !important;
}

/* refined links */
.bottom-center a{
  border-bottom: 1px solid rgba(0,0,0,0.18);
  padding-bottom: 1px;
}
.bottom-center a:hover{
  border-bottom-color: rgba(184,137,45,0.55);
  transform: translateY(-1px);
}

/* mobile */
@media (max-width: 640px){
  .bottom-center,
  .bottom-center.highlighted{
    margin: 22px 12px 48px !important;
    padding: 24px 16px !important;
    border-radius: 16px !important;
  }
}

/* =========================================
   BOTTOM CENTER — HORIZONTAL ALIGN FIX
   ========================================= */

/* Make the main row behave predictably */
.bottom-center .grid-x{
  display: flex !important;
  align-items: flex-start !important; /* aligns tops perfectly */
  justify-content: space-between;
  gap: 40px;
}

/* Ensure each column grows evenly */
.bottom-center .cell{
  flex: 1 1 0;
}

/* Optional: constrain width for luxury feel */
.bottom-center{
  max-width: 1000px;
  margin: 40px auto 60px !important;
}

/* Remove uneven spacing inside */
.bottom-center p{
  margin-top: 0;
}

/* Headings line up consistently */
.bottom-center h3{
  margin-top: 0;
  margin-bottom: 14px;
}

/* Mobile: stack cleanly */
@media (max-width: 768px){
  .bottom-center .grid-x{
    flex-direction: column !important;
    gap: 24px;
  }
}

/* ======================================================
   BOTTOM CONTACT BLOCK — FLOATING + PERFECT 2-COL ALIGN
   Targets your: <div class="bottom-center highlighted">
   ====================================================== */

.bottom-center.highlighted{
  /* floating sheet */
  position: relative;
  max-width: 980px;
  margin: 34px auto 64px !important;
  padding: 28px 26px !important;

  background: rgba(239,233,223,0.72) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255,255,255,0.45) !important;
  border-radius: 18px !important;

  box-shadow:
    0 24px 60px rgba(0,0,0,0.14),
    0 8px 18px rgba(0,0,0,0.08),
    0 1px 0 rgba(255,255,255,0.55) inset !important;

  text-align: left !important;
  color: rgba(0,0,0,0.84) !important;
}

/* ambient “lift” shadow underneath */
.bottom-center.highlighted::before{
  content:"";
  position:absolute;
  left: 10%;
  right: 10%;
  bottom: -18px;
  height: 40px;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0.20) 0%,
    rgba(0,0,0,0.10) 35%,
    rgba(0,0,0,0.00) 70%
  );
  filter: blur(10px);
  opacity: 0.35;
  z-index: -1;
  pointer-events: none;
}

/* Ensure the 2 columns line up perfectly at the top */
.bottom-center.highlighted .grid-x{
  display: flex !important;
  align-items: flex-start !important;
}

/* Remove any extra top spacing inconsistencies */
.bottom-center.highlighted p{
  margin: 0 0 10px 0 !important;
  line-height: 1.65;
}
.bottom-center.highlighted p:last-child{
  margin-bottom: 0 !important;
}

/* Make headings (strong labels) consistent */
.bottom-center.highlighted strong{
  font-weight: 800;
  letter-spacing: 0.2px;
  color: rgba(0,0,0,0.90);
}

/* Make links premium (no bright default blue) */
.bottom-center.highlighted a{
  color: rgba(0,0,0,0.82) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(0,0,0,0.18);
  padding-bottom: 1px;
  transition: transform .18s ease, border-color .18s ease, opacity .18s ease;
}
.bottom-center.highlighted a:hover{
  border-bottom-color: rgba(184,137,45,0.55);
  transform: translateY(-1px);
  opacity: 1;
}

/* Mobile: stack columns cleanly */
@media (max-width: 640px){
  .bottom-center.highlighted{
    margin: 22px 12px 48px !important;
    padding: 22px 16px !important;
    border-radius: 16px !important;
  }
}

/* ===========================
   HOMEPAGE 4 TILES: IVORY FILL ONLY (KEEP ORIGINAL BORDERS)
   =========================== */

body.home .callout.homepageBoxes{
  background-color: #cec8bf !important; /* ivory fill */
  /* DO NOT touch border or box-shadow */
}

/* If the white is coming from the circle/thumb area */
body.home .homepageBoxes .circleThumb{
  background-color: #cec8bf !important;
}

body.home .callout.homepageBoxes{
  background: #cec8bf !important; /* solid ivory */
  /* border + shadow remain from your Luxury Tile Upgrade */
}

/* ===========================
   GOLD ACCENT STRIP ON TOP OF HOMEPAGE TILES
   =========================== */
body.home .callout.homepageBoxes {
  position: relative;            /* enables the pseudo-element */
  overflow: hidden;              /* keeps accent flush with rounded edges if any */
}

body.home .callout.homepageBoxes::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;                   /* thickness of the gold accent */
  background: linear-gradient(90deg, #b8860b, #f0c15a, #b8860b);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  pointer-events: none;
}

/* ===========================
   HOMEPAGE 4 TILES: KILL ALL WHITE BACKGROUNDS
   =========================== */

/* Force the tile (Foundation callout) to be ivory */
body.home .callout.homepageBoxes,
body.home .homepageBoxes.callout,
body.home .homepageBoxes {
  background: #cec8bf !important;
  box-shadow: none !important;
}

/* Make sure nothing inside paints a white box */
body.home .homepageBoxes * {
  background-color: transparent !important;
}

/* If your circle/thumb wrapper has a background, force it to ivory */
body.home .homepageBoxes .circleThumb {
  background: #cec8bf !important;
  border-radius: 50%;
  overflow: hidden;
  display: inline-block;
}

/* Images can sometimes show a white “canvas” behind them */
body.home .homepageBoxes .circleThumb img {
  display: block;
  background: transparent !important;
}

/* Sometimes the white is the grid cell itself */
body.home .grid-x > .cell {
  background: transparent !important;
}

body.home .homepageBoxes .circleThumb {
  background-color: #cec8bf !important;
}

/* ===========================
   HOMEPAGE 4 TILES: DISTINCT BORDER + LIGHT FROM ABOVE
   =========================== */

body.home .homepageBoxes{
  background: linear-gradient(180deg, #ffffff 0%, #f8f6f2 100%) !important;

  /* Distinct gold-tinted border */
  border: 3px solid rgba(139,105,20,0.40);
  border-top: 4px solid #8b6914;

  /* Strong floating depth */
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.14),
    0 6px 16px rgba(0, 0, 0, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.80) inset;

  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Light source from ABOVE (top glow + gentle falloff) */
body.home .homepageBoxes::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 70%;
  pointer-events: none;

  /* bright top highlight fading down */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(255, 255, 255, 0.28) 20%,
    rgba(255, 255, 255, 0.00) 70%
  );

  opacity: 0.75;
}

/* Subtle bottom “contact shadow” to enhance float */
body.home .homepageBoxes::after{
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -18px;
  height: 36px;
  pointer-events: none;

  /* soft shadow puddle under the tile */
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(0, 0, 0, 0.00) 70%
  );

  filter: blur(10px);
  opacity: 0.35;
}

/* Hover: lift + gold glow */
body.home .homepageBoxes:hover{
  transform: translateY(-10px);
  border-color: rgba(139,105,20,0.28);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.16),
    0 8px 20px rgba(0, 0, 0, 0.10),
    0 0 24px rgba(139,105,20,0.08),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

/* Keep internal whites from showing */
body.home .homepageBoxes *{
  background-color: transparent !important;
}

body.home .homepageBoxes:hover .circleThumb img {
  transform: scale(1.04);
  transition: transform 0.4s ease;
}

body.home .homepageBoxes h3 {
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

/* ===========================
   BOTTOM CENTER FIX (TO AVOID OVERLAPPING TEXT)
   =========================== */
@media (max-width: 768px){
  /* Ensure the bottom-center container has enough padding and spacing */
  .bottom-center {
    padding: 18px 16px !important;
    margin-bottom: 20px !important; /* Ensure there's enough space below */
  }
  /* Adjust text alignment and spacing */
  .bottom-center p, 
  .bottom-center li {
    line-height: 1.6; /* Increase line height for better readability */
    margin-bottom: 10px; /* Space out the elements at the bottom */
  }
  /* Align bottom-center grid to stack vertically */
  .bottom-center .grid-x {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  .bottom-center .cell {
    flex: 1 1 auto;
    margin-bottom: 10px; /* Add margin between items in the bottom center */
  }
}

/* Additional fixes for smaller screen widths (under 480px) */
@media (max-width: 480px){
  .bottom-center {
    padding: 14px 12px !important;
  }
  .bottom-center p {
    font-size: 0.95rem; /* Adjust font size for better mobile readability */
  }
}

/* Ensure that any elements inside .bottom-center that might cause overlap (like buttons or images) have correct spacing */
.bottom-center .button {
  margin-top: 10px; /* Space out buttons from text */
  width: 100%; /* Make buttons span full width if necessary */
}

/* ===========================
   TESTIMONIALS FIX (Ensure quotes are spaced properly on mobile)
   =========================== */
@media (max-width: 768px){
  .testimonial-block-vertical-quote {
    padding: 1rem; /* Add padding to prevent overlap */
    margin-bottom: 16px; /* Space out testimonial blocks */
  }
  .testimonial-block-vertical-quote::after {
    left: 1.5rem; /* Adjust the position of the arrow for better spacing */
  }
  .testimonial-block-vertical-person {
    margin-left: 0.75rem;
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ===========================
   VIDEO HERO (Fix text overlap in smaller viewports)
   =========================== */
@media (max-width: 480px) {
  .centered-videoText {
    width: 100%;
    left: 12px;
    transform: none;
    bottom: 12px;
    padding: 0;
  }
  .centered-videoText h1 {
    font-size: 1.5rem; /* Adjust for smaller screens */
  }
  .centered-videoText p {
    font-size: 1rem; /* Adjust for smaller screens */
  }
}

/* ===========================
   MOBILE LAYOUT ADJUSTMENTS FOR CONTENT BLOCKS AT BOTTOM
   =========================== */
@media (max-width: 768px) {
  .homepageBoxes {
    margin-bottom: 10px !important; /* Ensure space between boxes */
  }
  .videoHero {
    margin-bottom: 12px !important; /* Add margin to prevent overlap */
  }
}

/* ===========================
   FORCE BLUE NAV ITEMS TO ONE LINE (DESKTOP)
   =========================== */
@media screen and (min-width: 64em) { /* Foundation "large" and up */
  /* keep the UL on one row */
  .globalNav .top-bar,
  .globalNav .top-bar-left,
  .globalNav .top-bar-left > ul.menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
  }

  /* prevent each item from wrapping */
  .globalNav .top-bar-left > ul.menu > li,
  .globalNav .top-bar-left > ul.menu > li > a {
    white-space: nowrap !important;
  }

  /* optional: tighter spacing so everything fits */
  .globalNav .top-bar-left > ul.menu > li > a {
    padding: 0.7rem 0.75rem !important; /* tighten */
    font-size: 0.95rem !important;      /* slight shrink */
  }
}

/* ===========================
   MORE SPACE FOR DROPDOWN ARROWS (About Us / Our Services)
   =========================== */

/* Add breathing room between text and the arrow */
.globalNav .dropdown.menu > li.is-dropdown-submenu-parent > a,
.globalNav .dropdown.menu > li.has-submenu > a {
  padding-right: 2.1rem !important;  /* space reserved for arrow */
  position: relative;
}

/* Push the arrow slightly right (Foundation uses ::after for it) */
.globalNav .dropdown.menu > li.is-dropdown-submenu-parent > a::after,
.globalNav .dropdown.menu > li.has-submenu > a::after {
  right: 0.9rem !important;          /* arrow offset from right edge */
}

/* ===========================
   INCREASE TOP NAV FONT SIZE
   =========================== */

@media screen and (min-width: 64em) { /* desktop only */
  .globalNav .top-bar-left > ul.menu > li > a {
    font-size: 1.05rem !important;   /* slightly larger */
    font-weight: 600;                /* subtle luxury weight */
    letter-spacing: 0.5px;           /* refined spacing */
  }
}

/* ===========================
   MOBILE: MAKE "OUR SERVICES" SUBMENU FULLY READABLE
   =========================== */
@media screen and (max-width: 63.9375em) {

  /* Let the whole opened mobile menu scroll */
  #main-menu,
  #main-menu .top-bar,
  #main-menu .is-drilldown {
    max-height: calc(100vh - 70px); /* leaves room for the title bar */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Make submenu lists expand naturally */
  #main-menu .is-drilldown-submenu {
    max-height: none !important;
    overflow: visible !important;
  }

  /* Allow long service names to wrap (instead of truncating) */
  #main-menu .menu a {
    white-space: normal !important;
    line-height: 1.25;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
  }

  /* Optional: slightly smaller font for long submenu items so they fit nicely */
  #main-menu .submenu.menu a {
    font-size: 0.98rem;
  }
}

/* =====================================================
   FIX: Remove white divider line in "Our Services" dropdown
   (Keep blue background + white text exactly as-is)
   ===================================================== */

/* Remove borders/dividers from submenu items */
.globalNav .is-dropdown-submenu,
.globalNav ul.submenu[data-submenu] {
  border: 0 !important;
  box-shadow: none !important;
}

/* Remove any divider lines between items */
.globalNav .is-dropdown-submenu li,
.globalNav .is-dropdown-submenu li a,
.globalNav ul.submenu[data-submenu] li,
.globalNav ul.submenu[data-submenu] li a {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Kill pseudo-element separators if Foundation added any */
.globalNav .is-dropdown-submenu li::after,
.globalNav .is-dropdown-submenu li::before,
.globalNav .is-dropdown-submenu li a::after,
.globalNav .is-dropdown-submenu li a::before {
  content: none !important;
  display: none !important;
}

/* Ensure nav stays above video (prevents visual seams) */
.globalNav { position: relative; z-index: 9999; }
.videoHero { position: relative; z-index: 0; }

/* =========================================
   FIX: Kill desktop "hamburger square" flash
   Show .title-bar ONLY on small screens
   ========================================= */

/* Default: hide the title-bar everywhere (prevents first-paint flash) */
.globalNav .title-bar{
  display: none !important;
}

/* Small screens only: show the title-bar */
@media screen and (max-width: 39.9375em){
  .globalNav .title-bar{
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }
}

.concierge-coming h1 {
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.04em;   /* subtle, not dramatic */
  text-transform: none;     /* matches rest of site */
  color: #d4a017;
  margin-bottom: 10px;
}

.concierge-coming .subline {
  font-family: 'Libre Baskerville', serif;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.75);
}

/* ==================================================
   EXECUTIVE TAB — ELEVATED HIERARCHY (NO LAYOUT SHIFT)
   ================================================== */

.globalNav .menu > li > a[href*="conciergeExperience"]{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  /* lock layout */
  padding: inherit;
  font-size: inherit;
  text-transform: none;
  font-weight: inherit;

  /* subtle hierarchy boost */
  letter-spacing: 0.5px;           /* refined presence */
  font-weight: 700;
  color: #d4a017  !important;

  position: relative;
  z-index: 1;
}

/* --- Blended darker blue background (not boxed) --- */
.globalNav .menu > li > a[href*="conciergeExperience"]::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 4px;

  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.06) 0%,
    rgba(0,0,0,0.14) 100%
  );

  z-index: -1;
}

/* --- Gold underline animation --- */
.globalNav .menu > li > a[href*="conciergeExperience"]::after{
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 0.35rem;
  height: 2px;
  border-radius: 2px;

  background: linear-gradient(
    90deg,
    rgba(199,155,43,0) 0%,
    rgba(199,155,43,0.95) 50%,
    rgba(199,155,43,0) 100%
  );

  opacity: 0.85;
  transform: scaleX(0.85);
  transform-origin: center;
  transition: transform 200ms ease, opacity 200ms ease;
  pointer-events: none;
}

/* --- Ultra subtle gold side accents --- */
.globalNav .menu > li > a[href*="conciergeExperience"]{
  border-left: 1px solid rgba(199,155,43,0.25);
  border-right: 1px solid rgba(199,155,43,0.25);
}

/* Hover — clean and crisp */
.globalNav .menu > li > a[href*="conciergeExperience"]:hover{
  background: transparent !important;
  color: #d6a21f  !important;
  text-shadow: none !important;
}

.globalNav .menu > li > a[href*="conciergeExperience"]:hover::after{
  opacity: 1;
  transform: scaleX(1);
}

/* Active state */
.globalNav .menu > li.active > a[href*="conciergeExperience"],
.globalNav .menu > li > a[href*="conciergeExperience"][aria-current="page"]{
  color: #f2cf6b  !important;
}

/* =========================================
   PREMIUM SEAM BETWEEN ORANGE TOPBAR + BLUE NAV
   (keeps orange topbar, adds refined separation)
   ========================================= */

:root{
  --brandBlueTop: #6c8ac6;
  --brandBlueBottom: #657fb6;
  --topBarOrange: #e89c24;
}

/* Keep TOP BAR orange */
.topBar{
  background: linear-gradient(90deg, #d48a17, var(--topBarOrange)) !important;
}

/* NAV stays blue with subtle depth — gradient lives on .globalNav ONLY */
.globalNav{
  background: linear-gradient(to bottom, var(--brandBlueTop) 0%, var(--brandBlueBottom) 100%) !important;
}

/* Nested nav layers stay transparent so the bar reads as ONE bar (no double-bar) */
.globalNav .top-bar,
.globalNav .top-bar-left,
.globalNav .top-bar-left > ul.menu,
.globalNav .top-bar-left > ul.drilldown,
.globalNav .top-bar-left > ul.menu > li > a{
  background: transparent !important;
}

/* Add a very thin, luxury “separator” line so it feels designed */
.globalNav{
  position: relative;
}

.globalNav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  background-color: #6c8ac6;
  padding: 14px 0;
  font-family: 'Libre Baskerville', serif;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 14px 30px rgba(0,0,0,0.22),
    0 4px 10px rgba(0,0,0,0.10);
}

.menu,
.drilldown {
  background-color: #6c8ac6;
}

.menu a,
.drilldown a {
  background-color: #6c8ac6;
}





/* (top-edge highlight now lives in .globalNav box-shadow; ::after carries the gold bottom hairline) */

/* =========================================
   TOP BAR — FORCE IDENTICAL ORANGE ON ALL PAGES
   (highest priority)
   ========================================= */
:root{
  --topBarOrangeA: #c17f16;  /* deeper */
  --topBarOrangeB: #d9941f;  /* refined */
}

html body .topBar{
  background: linear-gradient(90deg, var(--topBarOrangeA), var(--topBarOrangeB)) !important;
  background-color: var(--topBarOrangeB) !important;
}

/* Executive tab — blended darker blue (no box effect) */
.globalNav .menu > li > a[href*="conciergeExperience"]::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 4px;

  /* subtle blended deepening */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.06) 0%,
    rgba(0,0,0,0.12) 100%
  );

  z-index: -1;
}

/* ==========================================================
   HOMEPAGE: FORCE ALL 4 CIRCULAR TILE IMAGES TO MATCH
   (keeps original size — no shrinking)
   ========================================================== */

body.home .callout.homepageBoxes .circleThumb{
  position: relative !important;
  display: inline-block !important;

  aspect-ratio: 1 / 1;
  border-radius: 50% !important;
  overflow: hidden !important;
}

body.home .callout.homepageBoxes .circleThumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;

  border-radius: 50% !important;
  border: 0 !important;
  display: block !important;
}

/* white + orange ring */
body.home .callout.homepageBoxes .circleThumb::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;

  box-shadow:
    inset 0 0 0 6px #ffffff,
    inset 0 0 0 10px #d48a17;
}

/* =========================================
   TOP ORANGE BAR — SINGLE SOURCE OF TRUTH
   Paste at VERY END of app.css
   ========================================= */
:root{
  /* Update these two values to match your logo/homepage orange */
  --topbar-orange-a: #d88912;  /* deeper edge */
  --topbar-orange-b: #f29a1a;  /* main orange */
}

html body .topBar{
  background: linear-gradient(90deg, var(--topbar-orange-a), var(--topbar-orange-b)) !important;
  background-color: var(--topbar-orange-b) !important;
}

/* Keep hover readable on orange */
html body .topBar a:hover{
  color: #111 !important;
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
  .globalNav {
    flex-direction: column; /* Stack nav items vertically on smaller screens */
    gap: 1rem;
    padding: 14px 0;
  }

  .homepageBoxes {
    margin: 10px; /* Adjust tile margins for mobile */
  }

  .centered-videoText {
    width: 100%;
    bottom: 10px;
  }

  .headerAddressMob {
    text-align: center;
    padding-top: 10px;
  }

  /* Resize font for mobile */
  .globalNav a {
    font-size: 1rem;
  }

  .homepageContentContainer {
    padding: 14px;
  }
}

/* Adjustments for smaller screens (under 480px) */
@media (max-width: 480px) {
  .homepageBoxes {
    margin: 5px;
  }

  .videoHero {
    margin-bottom: 10px;
  }

  .centered-videoText h1 {
    font-size: 1.5rem;
  }

  .homepageContentContainer {
    padding: 10px;
  }

  /* Increase button size for touch screens */
  .button {
    padding: 12px 20px;
    font-size: 1rem;
  }
}

/* Make sure images scale nicely */
.homepageBoxes .circleThumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* Style for social media icons in the bottom container */
.bottom-center .fa-brands {
    font-size: 1.5rem; /* Make the icons slightly larger */
    transition: all 0.3s ease;
}

/* Updated color for Instagram icon */
.bottom-center .fa-instagram {
    color: #FF4B4B; /* Bright red-pink for Instagram */
}

/* Updated color for Facebook icon */
.bottom-center .fa-facebook {
    color: #FF5A00; /* Bright orange for Facebook */
}

/* Add hover effect for better visibility */
.bottom-center .fa-instagram:hover,
.bottom-center .fa-facebook:hover {
    color: #fff; /* White color on hover */
    background-color: #000; /* Black background for contrast */
    padding: 10px; /* Add padding to make the icon stand out more */
    border-radius: 50%; /* Rounded background */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6); /* Glowing effect */
}

/* ===========================
   LUXURY FLOAT EFFECT – DR IMAGE
   =========================== */

.luxury-float-image {
  float: right;
  margin: 0 0 10px 30px;
  border-radius: 12px;

  /* Deep luxury shadow */
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.25),
    0 8px 18px rgba(0, 0, 0, 0.18);

  /* Soft gold ambient glow */
  filter: drop-shadow(0 0 12px rgba(212, 138, 23, 0.25));

  transition: all 0.6s ease;
  animation: luxuryFloat 6s ease-in-out infinite;
}

/* Floating movement */
@keyframes luxuryFloat {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

/* Elevated hover refinement */
.luxury-float-image:hover {
  transform: translateY(-14px) scale(1.02);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.35),
    0 12px 25px rgba(0, 0, 0, 0.25);
  filter: drop-shadow(0 0 16px rgba(212, 138, 23, 0.4));
}
/* ===========================
   NEXT-LEVEL LUXURY PORTRAIT TREATMENT
   (adds frame + sheen + aura)
   =========================== */

.luxury-float-image {
  position: relative;               /* enables better compositing */
  border: 1px solid rgba(255, 255, 255, 0.65);  /* soft ivory frame */
  outline: 1px solid rgba(212, 138, 23, 0.25);  /* faint gold second line */
  outline-offset: 6px;

  /* glassy premium feel */
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(1px);
}

/* subtle “sheen” reflection (editorial) */
.luxury-float-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.22) 0%,
    rgba(255,255,255,0.08) 25%,
    rgba(255,255,255,0.00) 55%
  );

  opacity: 0.55;
  mix-blend-mode: soft-light;
}

/* ambient aura behind the portrait (very subtle) */
.luxury-float-image {
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.25),
    0 8px 18px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.15),
    0 0 40px rgba(212, 138, 23, 0.12);
}

/* hover: slightly brighter sheen + more “lift” */
.luxury-float-image:hover::after {
  opacity: 0.75;
}

.luxury-float-image:hover {
  outline-color: rgba(212, 138, 23, 0.38);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.35),
    0 12px 25px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.22),
    0 0 55px rgba(212, 138, 23, 0.18);
}

/* Clean Minimal Service Image Frame (No Gold, No Ivory) */

.service-image-frame{
  position: relative;
  background: #ffffff;     /* remove ivory */
  padding: 16px;           /* keeps white border spacing */
  border-radius: 10px;
  display: inline-block;
  margin: 0 auto;
  overflow: visible;

  /* subtle depth only */
  box-shadow: 0 18px 45px rgba(0,0,0,.12);
}

/* White inner border only */
.service-image-frame::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:10px;
  border:4px solid #ffffff;
  pointer-events:none;
}

/* REMOVE gold layer completely */
.service-image-frame::after{
  display:none;
}

/* Image polish */
.service-image-frame img{
  display:block;
  width:100%;
  height:auto;
  border-radius:6px;
  filter: contrast(1.04) saturate(1.02);
}

/* ===========================
   GLOBAL: REMOVE VIDEO BORDERS / OUTLINES
   + KEEP PREMIUM LIFT
   (Paste at VERY END of app.css)
   =========================== */

/* All native videos: remove border/outline but KEEP lift */
video {
  border: 0 !important;
  outline: 0 !important;

  /* premium lift (applies sitewide) */
  box-shadow:
    0 26px 60px rgba(0,0,0,0.22),
    0 2px 0 rgba(255,255,255,0.16) inset;

  background: transparent;
  transform: translateZ(0);
}

/* If you want SHARP corners specifically for videos with imageStyle1 */
video.imageStyle1{
  border-radius: 0 !important; /* keep sharp */
}

/* Embedded videos (YouTube/Vimeo/Tally etc.) */
iframe,
embed,
object {
  border: 0 !important;
  outline: 0 !important;
}

/* Don’t nuke borders on everything inside .videoHero (too broad)
   Instead, only target video/iframe inside it */
.videoHero video,
.videoHero iframe,
.background-video-container video,
.background-video-container iframe{
  border: 0 !important;
  outline: 0 !important;
}

/* ======================================================
   OUR SERVICES — IMAGE: NO BORDER, IVORY BLEND, PREMIUM LIFT
   Paste at VERY END of app.css
   ====================================================== */

/* If your Services pages have a body class, use it.
   If not, these rules still work when applied to common Services wrappers. */
body[class*="services"],
body[class*="service"],
.our-services,
.servicesPage,
.services,
.servicePage,
.articleStyle {

  /* no-op wrapper so selector group exists */
}

/* --- Core: kill borders/frames that cause white edges --- */
body[class*="services"] img,
body[class*="service"] img,
.our-services img,
.servicesPage img,
.services img,
.servicePage img,
.articleStyle img{
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;  /* prevents white “canvas” behind images */
  display: block;                      /* removes inline-image baseline gap */
}

/* --- Remove your old “frame” wrappers (white border sources) on Services pages --- */
body[class*="services"] .imageStyle1,
body[class*="service"] .imageStyle1,
.our-services .imageStyle1,
.servicesPage .imageStyle1,
.services .imageStyle1,
.servicePage .imageStyle1{
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;         /* blend with ivory (no card edge) */
  background: transparent !important;
  box-shadow: none !important;          /* lift will be applied to the image itself */
}

/* If you used the service-image-frame wrapper anywhere, neutralize it */
body[class*="services"] .service-image-frame,
body[class*="service"] .service-image-frame,
.our-services .service-image-frame,
.servicesPage .service-image-frame,
.services .service-image-frame,
.servicePage .service-image-frame{
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
body[class*="services"] .service-image-frame::before,
body[class*="services"] .service-image-frame::after,
body[class*="service"] .service-image-frame::before,
body[class*="service"] .service-image-frame::after,
.our-services .service-image-frame::before,
.our-services .service-image-frame::after,
.servicesPage .service-image-frame::before,
.servicesPage .service-image-frame::after,
.services .service-image-frame::before,
.services .service-image-frame::after,
.servicePage .service-image-frame::before,
.servicePage .service-image-frame::after{
  content: none !important;
  display: none !important;
}

/* --- Premium “lift” (video-like) applied to Services images only --- */
body[class*="services"] img,
body[class*="service"] img,
.our-services img,
.servicesPage img,
.services img,
.servicePage img,
.articleStyle img{
  /* match ivory environment */
  border-radius: 0 !important; /* remove if you want slightly softened corners */

  /* premium lifted look */
  box-shadow:
    0 1px 0 rgba(255,255,255,0.65),
    0 18px 45px rgba(0,0,0,0.18),
    0 6px 16px rgba(0,0,0,0.10);

  /* tiny polish so images look “finished” */
  filter: contrast(1.03) saturate(1.03) brightness(1.01);
  transform: translateZ(0);
}

/* Optional: subtle hover lift (doesn’t change layout) */
body[class*="services"] img:hover,
body[class*="service"] img:hover,
.our-services img:hover,
.servicesPage img:hover,
.services img:hover,
.servicePage img:hover,
.articleStyle img:hover{
  box-shadow:
    0 1px 0 rgba(255,255,255,0.70),
    0 28px 60px rgba(0,0,0,0.22),
    0 10px 20px rgba(0,0,0,0.12);
}

/* If any parent has a white background behind the image, neutralize it */
body[class*="services"] .callout,
body[class*="service"] .callout,
.our-services .callout,
.servicesPage .callout,
.services .callout,
.servicePage .callout{
  background: transparent !important;
}

/* ===========================
   REMOVE ALL IMAGE BORDERS
   Paste at VERY END of app.css
   =========================== */

/* Remove borders/outlines from all images */
img {
  border: 0 !important;
  outline: 0 !important;
}

/* Your current “image frame” class is adding a border/padding */
.imageStyle1 {
  border: 0 !important;
  outline: 0 !important;
  padding: 0 !important;      /* removes the white/edge spacing */
  background: transparent !important;
  box-shadow: none !important; /* remove if you want to keep any lift */
}

/* If any images use this wrapper, it creates a white frame */
.service-image-frame {
  border: 0 !important;
  outline: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Kill the pseudo-border layers on that wrapper */
.service-image-frame::before,
.service-image-frame::after {
  content: none !important;
  display: none !important;
}

/* Prevent “mystery” thin lines from inline image gaps */
img {
  display: block !important;
  background: transparent !important;
}

/* ======================================================
   OUR SERVICES — BORDERLESS IMAGES + PREMIUM LIFT
   Paste at VERY END of app.css
   ====================================================== */

/* Best: add <body class="services"> on Services pages.
   If you can’t, the extra selectors help catch common layouts. */
body.services img,
body[class*="service"] img,
body[class*="services"] img,
.articleStyle img{
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  display: block !important;

  /* premium lift */
  box-shadow:
    0 1px 0 rgba(255,255,255,0.65),
    0 18px 45px rgba(0,0,0,0.18),
    0 6px 16px rgba(0,0,0,0.10) !important;

  filter: contrast(1.03) saturate(1.03) brightness(1.01);
  transform: translateZ(0);
}

/* Neutralize border/padding “frames” so no white edge shows */
body.services .imageStyle1,
body[class*="service"] .imageStyle1,
body[class*="services"] .imageStyle1,
.articleStyle .imageStyle1{
  border: 0 !important;
  outline: 0 !important;
  padding: 0 !important;
  background: transparent !important;

  /* don’t kill the image’s lift */
  box-shadow: none !important;
}

body.services .service-image-frame,
body[class*="service"] .service-image-frame,
body[class*="services"] .service-image-frame,
.articleStyle .service-image-frame{
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
body.services .service-image-frame::before,
body.services .service-image-frame::after,
body[class*="service"] .service-image-frame::before,
body[class*="service"] .service-image-frame::after,
body[class*="services"] .service-image-frame::before,
body[class*="services"] .service-image-frame::after,
.articleStyle .service-image-frame::before,
.articleStyle .service-image-frame::after{
  content: none !important;
  display: none !important;
}

/* ===========================
   EXECUTIVE PAGE – STICKY FOOTER (FULL-WIDTH SAFE)
   =========================== */

body.executive-page{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  align-items:stretch; /* IMPORTANT: prevents centered/narrow bars */
}

/* Make sure the wrapper and all fluid bars span full width */
body.executive-page .execPageWrap,
body.executive-page .topBar,
body.executive-page .brandingBar,
body.executive-page .globalNav,
body.executive-page .concierge-coming{
  width:100%;
}

body.executive-page .execPageWrap{
  flex:1;
  display:flex;
  flex-direction:column;
}

/* Keeps the black hero section filling the leftover height */
body.executive-page .concierge-coming{
  flex:1;
}

/* Footer should also span full width */
body.executive-page .executive-footer{
  width:100%;
  margin-top:auto; /* pushes footer to bottom if needed */
}

/* Match other pages: left-aligned footer text */
body.executive-page .executive-footer p{
  text-align:left !important;
  margin:0;
}

/* =========================================
   MIFAS: VIDEO NEXT TO A. BUNIONS (CLEAN)
   ========================================= */
.video-float-right{
  float: right;
  width: 37.5%;
  margin-left: 30px;
  margin-bottom: 15px;
}

/* Ingrown video: match site video styling but keep SHARP corners */
.video-float-right video{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0 !important;   /* sharp edges */
}

/* List: A, B, C + clear the float after the list */
.mifas-list{
  list-style: upper-alpha;
  margin-left: 30px;
  overflow: auto; /* clears the floated video automatically */
}

/* =========================================
   MIFAS: MOBILE — make Ingrown.mp4 smaller (like officetourfinal.mp4)
   (same position, only size changes)
   ========================================= */
@media (max-width: 768px){
  .video-float-right{
    float: none;          /* keep it stacking on mobile */
    width: 65%;           /* same size behavior as officetourfinal.mp4 */
    margin: 20px auto;    /* centered in the same spot */
  }

  .video-float-right video{
    width: 100%;
    height: auto;
    display: block;
  }
}

/* =========================================================
   MOBILE PERFECTION PACK (SITEWIDE)
   Paste at VERY END of app.css
   ========================================================= */

/* ---------------------------
   1) STOP HORIZONTAL SCROLL
   --------------------------- */
html, body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
img, video, iframe, embed, object{
  max-width: 100%;
  height: auto;
}

/* (removed: a blanket `.grid-x { max-width: 100% }` here broke Foundation's
   negative-margin grid math and shifted all page content ~30px left;
   html/body overflow-x:hidden above already guards against side overflow) */
.grid-container,
.grid-container.fluid{
  width: 100%;
}

/* ---------------------------
   2) CONSISTENT TOP OFFSET (FIXED TOP BAR)
   Uses variables so you don’t have to guess margins per page
   --------------------------- */
:root{
  --topbar-h-desktop: 50px;
  --topbar-h-mobile: 72px;   /* matches your wrapped mobile topBar */
}

/* Keep your fixed top bar, but make spacing predictable */
.topBar{
  padding-left: max(10px, env(safe-area-inset-left));
  padding-right: max(10px, env(safe-area-inset-right));
}

/* Use a single “push-down” source of truth */
.brandingBar{
  margin-top: var(--topbar-h-desktop) !important;
}
@media (max-width: 768px){
  .brandingBar{
    margin-top: var(--topbar-h-mobile) !important;
  }
}

/* If any page still gets tucked under the fixed bar, this saves it */
main, .off-canvas-content{
  padding-top: 0; /* keep clean (brandingBar already pushes content) */
}

/* ---------------------------
   3) MOBILE TYPOGRAPHY THAT ALWAYS FITS
   (prevents giant H1s + awkward wraps)
   --------------------------- */
.centered-videoText h1{
  font-size: clamp(1.45rem, 4.8vw, 2.6rem) !important;
  line-height: 1.15;
}
.centered-videoText p{
  font-size: clamp(0.98rem, 2.9vw, 1.15rem);
  line-height: 1.55;
}

/* Body copy: readable without feeling “zoomed” */
.articleStyle p,
.articleStyle li{
  font-size: clamp(1.0rem, 2.8vw, 1.08rem);
  line-height: 1.7;
}

/* ---------------------------
   4) TOUCH TARGETS (NAV + BUTTONS)
   “Feels expensive” = roomy + easy taps
   --------------------------- */
.button,
a.button{
  min-height: 44px;
  padding: 12px 18px !important;
}

/* Mobile nav readability + tap area */
@media (max-width: 768px){
  .globalNav a,
  .menu a,
  .drilldown a{
    padding: 0.95rem 1rem !important;
    line-height: 1.2 !important;
  }

  /* Make the mobile menu feel full-width and clean */
  .globalNav{
    padding: 12px 0 !important;
  }
}

/* ---------------------------
   5) FLOAT KILL-SWITCH ON MOBILE
   (Dr. floating portrait + MIFAS right video will never cramp text)
   --------------------------- */
@media (max-width: 768px){

  /* Dr image float (your class) */
  .luxury-float-image{
    float: none !important;
    display: block !important;
    width: min(420px, 100%) !important;
    margin: 14px auto 18px !important;
  }

  /* MIFAS float video */
  .video-float-right{
    float: none !important;
    width: 100% !important;
    margin: 14px 0 18px !important;
  }

  /* Any legacy floated images/videos (safe catch-all) */
  img[style*="float:"],
  video[style*="float:"],
  .articleStyle img,
  .articleStyle video{
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ---------------------------
   6) PERFECT TILE / GRID SPACING ON MOBILE
   (no cramped edges, no weird gaps)
   --------------------------- */
@media (max-width: 640px){
  .grid-container{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .callout.homepageBoxes{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* If tiles are in multi-column grid, stack nicely */
  .grid-x > .cell{
    min-width: 0; /* prevents text forcing overflow */
  }
}

/* ---------------------------
   7) MEDIA EMBEDS: NEVER BREAK THE LAYOUT
   (Tally/YouTube/iframes always behave)
   --------------------------- */
iframe{
  display: block;
  width: 100%;
  max-width: 100%;
}

/* ---------------------------
   8) BOTTOM CONTACT BLOCK: MOBILE-SAFE SPACING
   (prevents overlap / “squeezed” look)
   --------------------------- */
@media (max-width: 640px){
  .bottom-center.highlighted{
    padding: 20px 14px !important;
  }
  .bottom-center.highlighted .grid-x{
    flex-direction: column !important;
    gap: 16px !important;
  }
}

/* =========================================================
   ABOUT PAGES — EXTRA SMALL PORTRAITS ON MOBILE
   ========================================================= */

@media (max-width: 768px){

  body.aboutShaanSingh .luxury-float-image,
  body.aboutDiltajSingh .luxury-float-image{
    width: 38% !important;       /* much smaller */
    max-width: 150px !important; /* hard cap */
    height: auto !important;
    float: none !important;
    display: block !important;
    margin: 16px auto 20px !important;
  }
}

/* Very small phones */
@media (max-width: 480px){

  body.aboutShaanSingh .luxury-float-image,
  body.aboutDiltajSingh .luxury-float-image{
    width: 38% !important;
    max-width: 150px !important;
  }
}

.globalNav .submenu a { font-weight: 400 !important; }

/* =========================================
   FORCE ALL TOP-LEVEL NAV ITEMS IDENTICAL
   (EXCEPT Executive Concierge)
   ========================================= */

@media (min-width: 64em){

  /* All top-level items */
  .globalNav .menu > li > a{
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #f4f4f4;
  }

  /* EXCLUDE Executive from normalization */
  .globalNav .menu > li > a[href*="conciergeExperience"]{
    font-weight: 700;
    color: #d4a017 !important; /* Gold color */
  }
}

@media (max-width: 768px) {
  .globalNav .menu > li > a[href*="conciergeExperience"]:not(.active) {
    font-weight: bold !important;
    color: #d4a017 !important; /* Gold color */
  }
}

  /* Ensure gold color is applied even when the tab is active or hovered */
  .globalNav .menu > li > a[href*="conciergeExperience"]:hover,
  .globalNav .menu > li > a[href*="conciergeExperience"]:active,
  .globalNav .menu > li > a[href*="conciergeExperience"].is-active {
    font-weight: 700;
    color: #d4a017; /* Ensure gold color remains applied */
  }

/* OUR SERVICES pages: unbold the page title */
body.services-page .articleStyle > h1{
  font-weight: 400;
}

/* =========================================================
   GLOBAL PAGE TITLES — MATCH "What Our Patients Say"
   Paste at VERY END of app.css
   ========================================================= */

/* One source of truth (edit these 2 values if needed) */
:root{
  --pageTitle-size: 2.5rem;   /* match testimonials */
  --pageTitle-weight: 700;    /* match testimonials */
}

/* Apply to the main page title on every page */
.articleStyle > h1,
main h1:first-of-type,
.homepageContentContainer h1:first-of-type,
.grid-container h1:first-of-type{
  font-family: 'Libre Baskerville', serif !important;
  font-size: var(--pageTitle-size) !important;
  font-weight: var(--pageTitle-weight) !important;
  letter-spacing: 1px !important;
  text-align: center !important;
  margin-bottom: 30px !important;
}

/* OPTIONAL: If you also want ALL section titles (h2/h3) to match too, uncomment:
h2, h3{
  font-size: var(--pageTitle-size) !important;
  font-weight: var(--pageTitle-weight) !important;
}
*/

/* =========================================
   SITE LOGO — LOCKED STYLE (ALL PAGES)
   Paste at VERY END of app.css
   ========================================= */

.site-logo{
  display: block !important;
  background: transparent !important;

  /* “lifted + crisp border” look (edit if you want slightly more/less) */
  border: 1px solid rgba(0,0,0,0.12) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.65),
    0 18px 45px rgba(0,0,0,0.18),
    0 6px 16px rgba(0,0,0,0.10) !important;

  border-radius: 0 !important;
}

/* Prevent any page/link state from changing the logo */
a:hover .site-logo,
a:focus .site-logo,
a:active .site-logo,
a:focus-visible .site-logo{
  border: 1px solid rgba(0,0,0,0.12) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.65),
    0 18px 45px rgba(0,0,0,0.18),
    0 6px 16px rgba(0,0,0,0.10) !important;
}

/* Optional: if you ever see a “square outline” around the logo link */
a:focus,
a:focus-visible{
  outline: none !important;
}

/* Logo: crisp + lifted on ALL pages (desktop + mobile) */
img.mainLogo{
  display: block !important;
  background: transparent !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.65),
    0 18px 45px rgba(0,0,0,0.18),
    0 6px 16px rgba(0,0,0,0.10) !important;
  border-radius: 0 !important;
}


/* ======================================================
   FIX: Instagram / Facebook colors in bottom container (mobile + desktop)
   Paste at VERY END of app.css
   ====================================================== */

/* Color the *link* (works even when icons inherit color) */
.bottom-center a[href*="instagram"],
.bottom-center.highlighted a[href*="instagram"]{
  color: #E4405F !important; /* Instagram */
}

.bottom-center a[href*="facebook"],
.bottom-center.highlighted a[href*="facebook"]{
  color: #1877F2 !important; /* Facebook */
}

/* If Font Awesome is SVG-based, force SVG to follow currentColor */
.bottom-center a[href*="instagram"] svg,
.bottom-center a[href*="facebook"] svg,
.bottom-center a[href*="instagram"] .svg-inline--fa,
.bottom-center a[href*="facebook"] .svg-inline--fa{
  fill: currentColor !important;
  color: currentColor !important;
}

/* If Font Awesome is <i> font-based, force the <i> too */
.bottom-center a[href*="instagram"] i,
.bottom-center a[href*="facebook"] i{
  color: currentColor !important;
}

/* Keep your tappable circle behavior (optional, but nice) */
.bottom-center a[href*="instagram"] i.fa-brands,
.bottom-center a[href*="facebook"] i.fa-brands,
.bottom-center a[href*="instagram"] .svg-inline--fa,
.bottom-center a[href*="facebook"] .svg-inline--fa{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
}

/* Hover (desktop) */
@media (hover: hover){
  .bottom-center a[href*="instagram"]:hover,
  .bottom-center a[href*="facebook"]:hover{
    color: #fff !important;
    background: #000;
    border-radius: 999px;
    padding: 6px 10px; /* only affects the link area */
  }
}

/* Tap (mobile) */
@media (hover: none){
  .bottom-center a[href*="instagram"]:active,
  .bottom-center a[href*="facebook"]:active{
    color: #fff !important;
    background: #000;
    border-radius: 999px;
    padding: 6px 10px;
  }
}

/* =========================================
   LUX GLASS LOGO (LOCKED SIZE + CONSISTENT)
   Paste at VERY END of app.css
   ========================================= */

/* Target the logo link wrappers you already use */
.logoContainer a,
.logoContainerMob a{
  display: inline-block !important;
  position: relative !important;
  line-height: 0 !important;            /* removes baseline gaps */
  background: transparent !important;

  /* keep layout identical */
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;

  /* subtle “glass edge” */
  border-radius: 10px;                   /* change to 0 if you want sharp */
  overflow: hidden;                      /* keeps glass layers clipped */
}

/* Lock the image itself so it NEVER changes across pages/states */
.logoContainer img.mainLogo,
.logoContainerMob img.mainLogo{
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;

  /* keep it from being “restyled” elsewhere */
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  transform: none !important;
  filter: none !important;
}

/* Glass layer (soft highlight + depth) */
.logoContainer a::before,
.logoContainerMob a::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* premium glass highlight */
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.48) 0%,
      rgba(255,255,255,0.14) 22%,
      rgba(255,255,255,0.00) 55%),
    radial-gradient(circle at 18% 18%,
      rgba(255,255,255,0.30),
      rgba(255,255,255,0.00) 55%);

  opacity: 0.65;
  mix-blend-mode: screen; /* makes the highlight feel like glass */
}

/* Micro “sheen line” + luxury lift */
.logoContainer a::after,
.logoContainerMob a::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* hairline glass edge + soft vignette */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.55),
    inset 0 -18px 30px rgba(0,0,0,0.10);

  /* tiny texture-like sheen (very subtle) */
  background: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.06) 0px,
    rgba(255,255,255,0.06) 2px,
    rgba(255,255,255,0.00) 6px,
    rgba(255,255,255,0.00) 10px
  );
  opacity: 0.18;
}

/* Outer “floating” depth (glass card feel) */
.logoContainer a,
.logoContainerMob a{
  box-shadow:
    0 1px 0 rgba(255,255,255,0.70),
    0 18px 45px rgba(0,0,0,0.18),
    0 6px 16px rgba(0,0,0,0.10);
  border: 1px solid rgba(0,0,0,0.10);
}

/* HARD LOCK: stop hover/active/focus from changing anything */
.logoContainer a:hover,
.logoContainer a:active,
.logoContainer a:focus,
.logoContainer a:focus-visible,
.logoContainerMob a:hover,
.logoContainerMob a:active,
.logoContainerMob a:focus,
.logoContainerMob a:focus-visible{
  transform: none !important;
  filter: none !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.70),
    0 18px 45px rgba(0,0,0,0.18),
    0 6px 16px rgba(0,0,0,0.10) !important;
  outline: none !important;
}

/* If any page adds a “mystery” outline to images inside links */
.logoContainer a img,
.logoContainerMob a img{
  outline: none !important;
  box-shadow: none !important; /* keep shadows on the wrapper, not the image */
}

/* =========================================================
   GLOBAL: TOP TRANSITION INTO BLUE (ALL PAGES)
   Paste at VERY END of app.css (must be last)
   ========================================================= */

:root{
  --topbar-h-desktop: 50px; /* fixed orange bar height */
  --topbar-h-mobile: 72px;  /* wrapped mobile orange bar height */
}

/* Soft fade just below the orange top bar (sitewide) */
html::before{
  content: "";
  position: fixed;
  left: 0;
  right: 0;

  /* sits immediately under the fixed orange bar */
  top: var(--topbar-h-desktop);

  height: 46px;
  pointer-events: none;

  /* Your CSS already pushes nav super high; keep this just under topBar */
  z-index: 999; /* below .topBar (1000), above page */

  background: linear-gradient(
    to bottom,
    rgba(95,120,176,0.78) 0%,
    rgba(108,138,198,0.00) 100%
  );
}

/* Mobile positioning */
@media (max-width: 768px){
  html::before{
    top: var(--topbar-h-mobile);
  }
}

/* Refined separation shadow under the orange bar (sitewide) */
html body .topBar{
  box-shadow:
    0 10px 26px rgba(0,0,0,0.22),
    0 1px 0 rgba(255,255,255,0.18) inset;
}

/* =========================================================
   MOBILE LUX NAV (MOBILE ONLY — NO DESKTOP CHANGES)
   Paste at VERY END of app.css
   ========================================================= */

@media screen and (max-width: 63.9375em){

  :root{
    --navBlueA: #6c8ac6;
    --navBlueB: #5f77b0;          /* slightly deeper */
    --navGoldA: #b8892d;
    --navGoldB: #f0d27a;
    --navInk: rgba(10,10,10,.92);
    --navLine: rgba(255,255,255,.14);
  }

  /* --- 1) Make the mobile menu bar feel intentional + premium --- */
  .globalNav .title-bar{
    display: flex !important;               /* you already show on small; reinforce on mobile */
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    padding: 14px 14px !important;
    min-height: 58px;

    background: linear-gradient(180deg, var(--navBlueA) 0%, var(--navBlueB) 100%) !important;
    box-shadow:
      0 14px 28px rgba(0,0,0,.22),
      0 1px 0 rgba(255,255,255,.10) inset;
    position: relative;
    z-index: 9999;
  }

  /* Gold accent hairline at the bottom of the title bar */
  .globalNav .title-bar::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height: 3px;
    background: linear-gradient(90deg, var(--navGoldA), var(--navGoldB), var(--navGoldA));
    opacity: .95;
  }

  /* If you have a “Menu” text title inside title-bar */
  .globalNav .title-bar-title{
    font-family: 'Libre Baskerville', serif !important;
    font-weight: 700 !important;
    letter-spacing: .6px;
    color: rgba(255,255,255,.95) !important;
    font-size: 1.35rem !important;
  }

  /* --- 2) Make the hamburger bigger + luxurious (NO layout shift) --- */
  .globalNav .menu-icon{
    width: 64px !important;
    height: 52px !important;
    border-radius: 12px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow:
      0 10px 22px rgba(0,0,0,.18),
      0 1px 0 rgba(255,255,255,.10) inset;
    transition: none !important;
  }
  .globalNav .menu-icon:hover,
  .globalNav .menu-icon:active{
    transform: none !important;
    background: rgba(255,255,255,.10) !important;
    box-shadow:
      0 14px 28px rgba(0,0,0,.22),
      0 1px 0 rgba(255,255,255,.12) inset;
  }

  /* --- 3) Make the opened mobile menu feel like a “drawer” --- */
  #main-menu{
    width: 100% !important;
  }

  /* The container behind the links */
  #main-menu .top-bar{
    padding: 10px 0 14px !important;
    background: linear-gradient(180deg, var(--navBlueA) 0%, var(--navBlueB) 100%) !important;
    border-top: 1px solid rgba(255,255,255,.10);
    box-shadow:
      0 22px 44px rgba(0,0,0,.26);
  }

  /* Make the whole menu scroll nicely if long */
  #main-menu,
  #main-menu .top-bar,
  #main-menu .is-drilldown{
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* --- 4) Bigger, cleaner tap targets + typography --- */
  #main-menu .menu > li > a,
  #main-menu .drilldown a{
    font-family: 'Libre Baskerville', serif !important;
    font-weight: 700 !important;
    letter-spacing: .3px;

    font-size: 1.08rem !important;
    color: rgba(255,255,255,.96) !important;

    padding: 18px 16px !important;         /* BIG tap target */
    line-height: 1.15 !important;
    border-radius: 12px;
    margin: 6px 12px;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow:
      0 10px 22px rgba(0,0,0,.14);
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
    white-space: normal !important;        /* long service names wrap */
  }

  #main-menu .menu > li > a:hover,
  #main-menu .drilldown a:hover,
  #main-menu .menu > li > a:active,
  #main-menu .drilldown a:active{
    background: rgba(255,255,255,.10) !important;
    transform: translateY(-1px);
    box-shadow:
      0 14px 28px rgba(0,0,0,.18);
  }

  /* Submenu items slightly lighter weight so hierarchy reads well */
  #main-menu .submenu.menu a{
    font-weight: 600 !important;
    font-size: 1.02rem !important;
    background: rgba(0,0,0,.08) !important;
  }

  /* --- 5) Make drilldown arrows clearer + more premium --- */
  #main-menu .is-drilldown-submenu-parent > a{
    position: relative;
    padding-right: 54px !important; /* room for arrow */
  }

  /* Override the default Foundation arrow to a clean chevron feel */
  #main-menu .is-drilldown-submenu-parent > a::after{
    content: "›" !important;
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.6rem;
    line-height: 1;
    color: rgba(240,210,122,.95) !important; /* gold */
    border: 0 !important;
    margin: 0 !important;
  }

  /* --- 6) Back link inside submenu: make it look like a control --- */
  #main-menu .js-drilldown-back > a{
    font-weight: 700 !important;
    color: rgba(10,10,10,.92) !important;
    background: linear-gradient(90deg, rgba(240,210,122,.95), rgba(184,137,45,.95)) !important;
    border: 0 !important;
    box-shadow:
      0 12px 24px rgba(0,0,0,.18);
  }

  /* --- 7) Remove “listy” look: no harsh dividers --- */
  #main-menu .menu,
  #main-menu .drilldown,
  #main-menu li{
    background: transparent !important;
  }

  /* Optional: slightly tighter spacing on very small phones */
  @media (max-width: 480px){
    #main-menu .menu > li > a,
    #main-menu .drilldown a{
      font-size: 1.02rem !important;
      padding: 16px 14px !important;
      margin: 6px 10px;
    }
    .globalNav .title-bar{
      padding: 12px 12px !important;
      min-height: 54px;
    }
  }
}


/* =========================================
   BUTTONS — SAME PREMIUM STYLE, BUT BLUE
   Paste at VERY END of app.css
   ========================================= */

:root{
  --brandBlueA: #6c8ac6;   /* matches your nav */
  --brandBlueB: #5f77b0;   /* slightly deeper for depth */
}

/* Replace the black “premium button” with a blue premium button */
.button,
.black-button,
a.button{
  background: linear-gradient(135deg, var(--brandBlueA), var(--brandBlueB)) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.16) !important;

  /* keep your premium feel */
  border-radius: 30px !important;
  padding: 12px 28px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18) !important;
}

/* Hover/focus: brighter + slightly lifted */
.button:hover,
.button:focus,
.black-button:hover,
.black-button:focus,
a.button:hover,
a.button:focus{
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.22) !important;
  filter: brightness(1.06);
}

/* Active/tap: crisp press */
.button:active,
.black-button:active,
a.button:active{
  transform: translateY(0px);
  filter: brightness(0.98);
}

/* =========================================
   FIX: RESTORE MOBILE MENU BAR BUTTON HEIGHT
   (Keeps blue styling but restores original size)
   ========================================= */

@media screen and (max-width: 63.9375em){

  /* Restore original title bar height */
  .globalNav .title-bar{
    min-height: 70px !important;   /* was reduced — restore taller feel */
    padding: 18px 16px !important; /* restores vertical presence */
  }

  /* Restore hamburger button proportions */
  .globalNav .menu-icon{
    width: 60px !important;        /* slightly larger */
    height: 48px !important;       /* restores original visual weight */
    border-radius: 14px !important;
  }

  /* Make sure the icon lines are vertically centered */
  .globalNav .menu-icon::after{
    top: 50%;
    transform: translateY(-50%);
  }
}

/* =========================================================
   FINAL OVERRIDE: ALL BUTTONS = PREMIUM BLACK + ROUNDED
   Paste at VERY END of app.css (must be last)
   ========================================================= */

:root{
  --btnBlackA: #000000;
  --btnBlackB: #222222;
  --btnText:   #ffffff;
  --btnRadius: 30px;
}

/* Foundation buttons + your anchor buttons */
html body .button,
html body a.button,
html body button.button,
html body input.button,
html body input[type="submit"],
html body input[type="submit"].button{
  background: linear-gradient(135deg, var(--btnBlackA), var(--btnBlackB)) !important;
  color: var(--btnText) !important;
  border: 0 !important;
  border-radius: var(--btnRadius) !important;

  /* keep your premium feel */
  padding: 12px 28px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease !important;
}

/* Hover/focus */
html body .button:hover,
html body .button:focus,
html body a.button:hover,
html body a.button:focus,
html body button.button:hover,
html body button.button:focus,
html body input[type="submit"]:hover,
html body input[type="submit"]:focus{
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.22) !important;
  filter: brightness(1.06);
}

/* Active/tap */
html body .button:active,
html body a.button:active,
html body button.button:active,
html body input[type="submit"]:active{
  transform: translateY(0);
  filter: brightness(0.98);
}

/* Homepage 4 tile buttons — gold gradient */
html body.home .callout.homepageBoxes .button,
html body.home .callout.homepageBoxes a.button,
html body.home .callout.homepageBoxes .button.expanded{
  border-radius: var(--btnRadius) !important;
  background: linear-gradient(180deg, #fff3c0 0%, #f1cf6c 26%, #d4af37 62%, #a97815 100%) !important;
  color: #111 !important;
  border: 1px solid rgba(255,235,170,0.55) !important;
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow:
    0 8px 18px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -6px 14px rgba(120,78,8,0.16);
}

html body.home a[style*="background"]{ background: linear-gradient(135deg,#000,#222) !important; }

/* =========================================================
   FINAL BUTTON SHAPE LOCK — FORCE ROUNDED EVERYWHERE
   Paste at VERY END of app.css
   ========================================================= */

:root{
  --globalButtonRadius: 30px;
}

/* Catch everything that could be styled as a button */
html body .button,
html body a.button,
html body .button.expanded,
html body button.button,
html body input.button,
html body input[type="submit"],
html body input[type="submit"].button,
html body .callout .button,
html body .homepageBoxes .button{
  border-radius: var(--globalButtonRadius) !important;
}

/* Some Foundation buttons use pseudo elements */
html body .button::before,
html body .button::after{
  border-radius: var(--globalButtonRadius) !important;
}
/* =========================================================
   FIX: Make the blue fade NOT stick on scroll
   (Replace fixed html::before with scrolling body::before)
   Paste at VERY END of app.css
   ========================================================= */

/* kill the fixed viewport overlay */
html::before{
  content: none !important;
}

/* create a scrolling fade at the top of the document instead */
body{
  position: relative; /* anchor for body::before */
}

body::before{
  content: "";
  position: absolute;          /* <-- scrolls away */
  left: 0;
  right: 0;
  top: var(--topbar-h-desktop); /* sits under fixed orange bar */
  height: 46px;
  pointer-events: none;
  z-index: 5;                  /* below .topBar (1000), above page background */

  background: linear-gradient(
    to bottom,
    rgba(95,120,176,0.78) 0%,
    rgba(108,138,198,0.00) 100%
  );
}

/* Mobile positioning */
@media (max-width: 768px){
  body::before{
    top: var(--topbar-h-mobile);
  }
}

/* =========================================================
   MOBILE ONLY: Standardize top blue menu bar (all pages)
   - Centers hamburger + MENU as one group
   - Keeps your existing colors (no color changes)
   ========================================================= */
@media (max-width: 639px) {

  /* Ensure the blue title bar is consistent + centered */
  .globalNav .title-bar {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;     /* centers the whole control group */
    align-items: center !important;
    padding: 12px 0 !important;             /* consistent height */
  }

  /* Keep icon + text together and evenly spaced */
  .globalNav .title-bar .menu-icon,
  .globalNav .title-bar .title-bar-title {
    margin: 0 !important;
  }

  .globalNav .title-bar .menu-icon {
    width: 40px !important;                 /* consistent tap target */
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* MENU text: consistent + more readable (no color change) */
  .globalNav .title-bar .title-bar-title {
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    font-size: 1.05rem !important;
    line-height: 1 !important;
    transform: translateY(1px);
  }
}

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

  .globalNav .title-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 14px 0 !important;
  }

  .globalNav .title-bar .menu-icon {
    width: 44px !important;
    height: 34px !important;
    position: relative !important;
    margin: 0 auto 6px auto !important;
  }

  .globalNav .title-bar .menu-icon::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 6px !important;
    transform: translateX(-50%) !important;
    width: 28px !important;
    height: 3px !important;
    background: #ffffff !important;
    border-radius: 2px !important;
    box-shadow:
      0 9px 0 #ffffff,
      0 18px 0 #ffffff !important;
  }

  .globalNav .title-bar .menu-icon::before {
    display: none !important;
  }

  .globalNav .title-bar .title-bar-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    margin: 0 !important;
  }

}

/* Ensure FAQ items inherit global font-family */
.faq,
.faq-item,
.faq-item h4,
.faq-item p {
    font-family: 'Libre Baskerville', serif !important;
}

/* Additional style consistency for FAQ */
.faq-item h4 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #333;
}

.faq-item p {
    font-size: 1rem;
    color: #555;
    margin-top: 10px;
}

.faq-item a {
    color: #FFA500;
    text-decoration: none;
    font-weight: normal;
}

.faq-item a:hover {
    text-decoration: underline;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.aboutDiltajSingh .doctor-title,
body.aboutShaanSingh .doctor-title {
  text-align: left !important;
}

/* =========================================
   OFFICE PAGE TITLE — MATCH GLOBAL TITLES
   (Desktop + mobile identical)
   ========================================= */
body.office-page .officeTitle{
  position: relative;
  text-align: center; /* keep as you had */
  margin-bottom: 20px !important;
}

/* =========================================
   OFFICE PAGE TITLE — MATCH GLOBAL TITLES
   (Desktop + mobile identical)
   ========================================= */
body.office-page .officeTitle{
  position: relative;
  text-align: center; /* keep as you had */
  margin-bottom: 20px !important;
}

/* gold line under Office title only */
body.office-page .officeTitleLine{
  display: block;
  height: 3px;
  border-radius: 2px;
  background: #D4AF37;
  margin-top: 8px;
}

/* ==========================
   REFINED PREMIUM SERVICE TITLE ACCENT
   Architectural • Subtle • High-End
   ========================== */

body.services-page .articleStyle > h1{
  position: relative;
  text-align: center;
  padding-bottom: 26px; /* more vertical air = luxury */
  margin-bottom: 10px;  /* subtle separation from content */
}

body.services-page .articleStyle > h1::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;

  width: 72px;      /* shorter = more exclusive */
  height: 2px;

  background-color: #c6a84a; /* solid muted champagne gold */
  border-radius: 2px;
}

/* Style for both About Dr. Diltaj Singh and About Dr. Shaan Singh titles */
.doctor-title {
    font-size: 2.5rem; /* Bigger title */
    font-weight: 700; /* Bolder title */
    color: #8b6914; /* Deep burnished gold */
    text-align: center; /* Center alignment */
    margin-top: 20px; /* Space above */
    margin-bottom: 20px; /* Space below */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Soft shadow */
    background-color: rgba(139, 105, 20, 0.08); /* Light background */
    padding: 10px; /* Padding around text */
    border-radius: 5px; /* Rounded corners */
    border-top: 3px solid #8b6914; /* Gold line above the title */
    padding-top: 15px; /* Extra space for the line */
}

/* Optionally, if you want to target them separately on different pages */
.about-diltaj .doctor-title {
    background-color: rgba(212, 160, 23, 0.15); /* Slightly darker for Dr. Diltaj */
}

.about-shaan .doctor-title {
    background-color: rgba(212, 160, 23, 0.1); /* Slightly lighter for Dr. Shaan */
}

/* Responsive Design for Mobile */
@media screen and (max-width: 768px) {
    .doctor-title {
        font-size: 1.8rem; /* Adjust title size for mobile */
        padding: 8px; /* Adjust padding for mobile */
    }
}

/* CSS to adjust layout for mobile */
@media (max-width: 767px) {
  .title-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .mobile-menu-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px; /* Space between title and button */
  }

  .menu-icon {
    /* Ensure the button has appropriate size for mobile */
    font-size: 2rem; /* Adjust based on your preference */
  }
}

/* Make all submenu items bold */
.globalNav .submenu a {
  font-weight: bold !important;
}

/* Gold title for each service card */
.callout.homepageBoxes h3 {
  font-family: 'Playfair Display', serif; /* Elegant font */
  font-size: 1.4rem; /* Slightly smaller size to fit within the card */
  font-weight: bold; /* Bold text for emphasis */
  color: #b88f2f; /* Softer gold color */
  text-align: center; /* Center the title */
  letter-spacing: 0.5px; /* Slight spacing for elegance */
  margin-bottom: 10px; /* Space below the title */
  transition: color 0.3s ease; /* Smooth transition effect */
}

.callout.homepageBoxes h3:hover {
  color: #f0b44d; /* Warmer gold on hover for interaction */
}

/* ========================== 
   Enhanced Readability for All Service Titles under Our Services
   ========================== */

/* Apply the styling to all service titles */
.callout.homepageContentContainer h3 {
  font-family: 'Playfair Display', serif; /* Elegant, luxury font */
  font-weight: bold; /* Strong, premium impact */
  font-size: 2rem; /* Larger size for prominence */
  color: #d48a17; /* Rich golden color */
  text-align: left; /* Left alignment for a clean look */
  text-transform: uppercase; /* Uppercase for premium styling */
  letter-spacing: 2px; /* Slight spacing for elegance */
  margin-bottom: 20px; /* Space between title and list */
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow */
  transition: all 0.3s ease-in-out; /* Smooth transitions for color, shadow, and transform */
}

/* Hover effect for better contrast and readability */
.callout.homepageContentContainer h3:hover {
  color: #e0b84e; /* Lighter, softer gold for better contrast */
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); /* Slightly deeper shadow for contrast */
  transform: scale(1.05); /* Slight scale effect for emphasis */
}

/* Specific service containers can also be styled individually if needed */
.callout.homepageContentContainer .minimally-invasive h3,
.callout.homepageContentContainer .laser-therapy h3,
.callout.homepageContentContainer .shockwave-therapy h3,
.callout.homepageContentContainer .microwave-therapy h3,
.callout.homepageContentContainer .custom-orthotics h3,
.callout.homepageContentContainer .stem-cells h3,
.callout.homepageContentContainer .cbd-therapy h3,
.callout.homepageContentContainer .red-light-therapy h3 {
  /* Ensure each specific service page follows the same style */
  font-family: 'Playfair Display', serif;
  font-weight: bold;
  font-size: 2rem;
  color: #d48a17;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
}

/* Hover effect for each service container */
.callout.homepageContentContainer .minimally-invasive h3:hover,
.callout.homepageContentContainer .laser-therapy h3:hover,
.callout.homepageContentContainer .shockwave-therapy h3:hover,
.callout.homepageContentContainer .microwave-therapy h3:hover,
.callout.homepageContentContainer .custom-orthotics h3:hover,
.callout.homepageContentContainer .stem-cells h3:hover,
.callout.homepageContentContainer .cbd-therapy h3:hover,
.callout.homepageContentContainer .red-light-therapy h3:hover {
  color: #e0b84e;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
  transform: scale(1.05);
}

/* Subtle gold rule under each title */
html body .homepageContentContainer .callout.homepageBoxes h3::after,
html body .callout.homepageBoxes h3::after {
  content: "" !important;
  display: block !important;
  width: 56px !important;
  height: 2px !important;
  margin: 10px auto 0 auto !important;
  border-radius: 2px !important;
  background: linear-gradient(
    90deg,
    rgba(184,143,47,0),
    rgba(184,143,47,0.95),
    rgba(184,143,47,0)
  ) !important;
}

/* Homepage video spacing that does NOT rely on body.home */
.globalNav + .videoHero{
  margin-top: 0 !important;
  margin-bottom: 40px !important;
}

@media (max-width: 640px){
  .globalNav + .videoHero{
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }
}

@media (max-width: 380px){
  .globalNav + .videoHero{
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
}

/* Mobile-only: premium weight hamburger */
@media (max-width: 768px){

  .title-bar .menu-icon{
    transform: none !important;
    transform-origin: center;
  }
}

@media (max-width: 768px){

  /* Rolex-style deep luxury gold */
  .globalNav .title-bar button.menu-icon,
  .globalNav .title-bar .menu-icon{

    background: linear-gradient(180deg,
      #E9D08A 0%,     /* soft highlight */
      #C9A44F 25%,    /* refined gold */
      #9F7A2E 55%,    /* deeper base */
      #D8B768 100%    /* warm finish */
    ) !important;

    border: 1px solid rgba(255,255,255,.20) !important;
    border-radius: 14px !important;
    position: relative !important;
    overflow: hidden !important;

    box-shadow:
      0 16px 30px rgba(0,0,0,.22),
      0 1px 0 rgba(255,255,255,.35) inset,
      0 -10px 18px rgba(0,0,0,.15) inset !important;

    transition: none !important;
  }

  /* Remove Foundation gradient */
  .globalNav .title-bar .menu-icon{
    background-image: none !important;
  }

  /* Subtle metallic sheen */
  .globalNav .title-bar .menu-icon::before{
    content: "" !important;
    position: absolute !important;
    inset: -40% -60% !important;
    transform: rotate(18deg) !important;
    pointer-events: none !important;

    background: linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.28) 40%,
      rgba(255,255,255,.08) 55%,
      rgba(255,255,255,0) 75%
    ) !important;

    opacity: .5 !important;
    mix-blend-mode: soft-light !important;
  }

  /* White bars — 2.5px */
  .globalNav .title-bar .menu-icon::after{
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;

    width: 28px !important;
    height: 2.5px !important;
    background: rgba(255,255,255,.92) !important;
    border-radius: 2px !important;

    box-shadow:
      0 -9px 0 rgba(255,255,255,.92),
      0  9px 0 rgba(255,255,255,.92),
      0  1px 0 rgba(0,0,0,.12) !important;
  }

  /* Hover lift (only on hover-capable devices) */
  @media (hover: hover){
    .globalNav .title-bar button.menu-icon:hover,
    .globalNav .title-bar .menu-icon:hover{
      transform: none !important;
      filter: none !important;
      background: rgba(255,255,255,0.28) !important;
    }
  }

  /* Press feedback (stronger tactile feel) */
  .globalNav .title-bar button.menu-icon:active,
  .globalNav .title-bar .menu-icon:active{
    transform: none !important;
    filter: none !important;
    background: rgba(255,255,255,0.28) !important;
  }

}

@media (max-width: 768px){

  .globalNav .title-bar .title-bar-title,
  .globalNav .title-bar .menu-text,
  .globalNav .title-bar .menu-label{

    color: #D8B768 !important;   /* refined Rolex gold */

    letter-spacing: .12em;
    font-weight: 500;

    text-shadow:
      0 1px 0 rgba(0,0,0,.35);
  }

}

/* OFFICE page (mobile): force exactly 2 lines */
@media screen and (max-width: 639px){

  /* Line 1 must never wrap (prevents “204” dropping) */
  .officeAddressLine1{
    display: inline-block;
    white-space: nowrap;
    font-size: clamp(20px, 5.2vw, 28px); /* shrinks only if needed */
  }

  /* Line 2 must never wrap */
  .officeAddressLine2{
    display: inline-block;
    white-space: nowrap;
    font-size: clamp(18px, 4.8vw, 24px);
  }
}

/* =========================================
   MOBILE: Executive Concierge = GOLD
   ========================================= */
@media screen and (max-width: 63.9375em){

  #main-menu .menu > li > a[href*="conciergeExperience"]{
    color: #d4a017 !important;   /* your luxury gold */
    font-weight: 700 !important;
  }

  /* Keep gold on hover / active */
  #main-menu .menu > li > a[href*="conciergeExperience"]:hover,
  #main-menu .menu > li > a[href*="conciergeExperience"]:active,
  #main-menu .menu > li.active > a[href*="conciergeExperience"]{
    color: #f2cf6b !important;   /* slightly brighter gold */
  }
}

/* ===========================
   SERVICES PAGES MOBILE SPACING
   Standardizes spacing to match MIFAS page
   =========================== */
@media (max-width: 768px) {

  /* Bottom image row spacing */
  .services-page .articleStyle > div[style*="display:flex"][style*="justify-content:center"]{
    gap: 12px !important;
    margin: 12px 0 !important; /* space above and below image row */
    clear: both !important;
  }

  /* Remove frame margin inconsistencies */
  .services-page .articleStyle .service-image-frame{
    margin: 0 !important;
  }

  /* Ensure consistent spacing before the Our Services sidebar */
  .services-page .cell .callout.homepageContentContainer.rounded{
    margin-top: 12px !important;
  }

}

/* (removed: an old "flush video hero" block zeroed the nav's bottom
   margin/padding globally — superseded by the 10px breathing-room rule
   at the end of this file; the homepage video spacing is handled by
   index.html's own inline rules) */
.grid-container.fluid.globalNav .grid-container {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.videoHero {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ===========================
   SERVICES PAGES: MOBILE SPACING STANDARDIZATION
   Matches MIFAS mobile spacing
   =========================== */
@media (max-width: 768px) {

  /* 1) Make the space from the final text block to the bottom image section uniform */
  .services-page .articleStyle > p:last-of-type,
  .services-page .articleStyle > ul:last-of-type,
  .services-page .articleStyle > ol:last-of-type {
    margin-bottom: 12px !important;
  }

  /* 2) Standardize the bottom image section spacing */
  .services-page .articleStyle > div[style*="display:flex"][style*="justify-content:center"] {
    gap: 12px !important;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
    clear: both !important;
  }

  /* 3) Remove any extra margin on the individual bottom image frames */
  .services-page .articleStyle > div[style*="display:flex"][style*="justify-content:center"] .service-image-frame {
    margin: 0 !important;
  }

  /* 4) Make the space between the last bottom image section and the Our Services sidebar uniform */
  .services-page .articleStyle {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .services-page .articleStyle + .cell {
    margin-top: 12px !important;
    padding-top: 0 !important;
  }

  .services-page .articleStyle + .cell .callout {
    margin-top: 0 !important;
  }
}


  .top-bar-right .button:hover {
    background: linear-gradient(180deg, #fff3c0 0%, #f1cf6c 26%, #d4af37 62%, #a97815 100%) !important;
    color: #111 !important;
    border-color: rgba(255,235,170,0.55) !important;
    transform: translateY(-2px);
    box-shadow:
      0 12px 25px rgba(0,0,0,0.25),
      0 0 22px rgba(212,175,55,0.16),
      0 0 0 1px rgba(255,255,255,0.12) inset,
      inset 0 1px 0 rgba(255,255,255,0.40),
      inset 0 -6px 14px rgba(120,78,8,0.16);
    filter: brightness(1.03);
  }


  .topBar {
    background: linear-gradient(90deg, #d48a17, #f0b44d) !important;
    padding: 0.4rem 1rem;
  }

  .topBar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 1rem;
  }

  .topBar-left,
  .topBar-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
  }

  .topBar-left {
    justify-content: flex-start;
    flex-wrap: nowrap;
  }

  .topBar-right {
    justify-content: flex-end;
    flex-wrap: nowrap;
  }

  .topBar a,
  .topBar span {
    color: black;
    font-family: 'Libre Baskerville', serif;
    font-size: 0.9rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    white-space: nowrap;
    line-height: 1.2;
  }

  @media only screen and (max-width: 1023px) {
    .topBar-row {
      flex-wrap: wrap;
    }

    .topBar-left,
    .topBar-right {
      width: 100%;
      flex-wrap: wrap;
    }

    .topBar-right {
      justify-content: flex-start;
    }
  }

/* ===========================
   MOBILE STICKY "BOOK NOW" BUTTON
   =========================== */

/* Hide on desktop */
.sticky-book-now {
  display: none;
}

@media only screen and (max-width: 639px) {
  .sticky-book-now {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 998;
    padding: 10px 16px;
    background: linear-gradient(180deg, rgba(206,200,191,0.95) 0%, rgba(206,200,191,1) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
  }

  .sticky-book-now a {
    display: block;
    text-align: center;
    padding: 14px 24px;
    font-family: 'Libre Baskerville', serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.06em;
    color: #111;
    text-decoration: none;
    border-radius: 30px;
    background: linear-gradient(180deg, #fff3c0 0%, #f1cf6c 26%, #d4af37 62%, #a97815 100%);
    border: 1px solid rgba(255,235,170,0.55);
    box-shadow:
      0 8px 18px rgba(0,0,0,0.20),
      0 0 0 1px rgba(255,255,255,0.10) inset,
      inset 0 1px 0 rgba(255,255,255,0.35),
      inset 0 -6px 14px rgba(120,78,8,0.16);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .sticky-book-now a:active {
    transform: scale(0.98);
  }

  /* Prevent footer from being hidden behind the sticky button */
  body {
    padding-bottom: 70px;
  }
}

/* ===== HAMBURGER: FULLY STATIC — NO MOVEMENT ===== */
.menu-icon,
.menu-icon:hover,
.menu-icon:active,
.menu-icon:focus,
.title-bar .menu-icon,
.title-bar .menu-icon:hover,
.title-bar .menu-icon:active,
.title-bar .menu-icon:focus,
.globalNav .menu-icon,
.globalNav .menu-icon:hover,
.globalNav .menu-icon:active,
.globalNav .menu-icon:focus,
.globalNav .title-bar .menu-icon,
.globalNav .title-bar .menu-icon:hover,
.globalNav .title-bar .menu-icon:active,
.globalNav .title-bar .menu-icon:focus,
.globalNav .title-bar button.menu-icon,
.globalNav .title-bar button.menu-icon:hover,
.globalNav .title-bar button.menu-icon:active,
.globalNav .title-bar button.menu-icon:focus {
  transform: none !important;
  transition: none !important;
  filter: none !important;
  animation: none !important;
}

/* ── Gold scrollbar — all screens ── */
/* WebKit / Blink (Safari, Chrome, Edge) */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #1a1a1a;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #b8860b, #f0c15a, #b8860b);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #d4a017, #f0d27a, #d4a017);
}

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: #b8860b #1a1a1a;
}

@media screen and (max-width: 639px) {
  ::-webkit-scrollbar {
    width: 8px;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
  }
}

/* =========================================
   BREATHING ROOM UNDER THE NAV (ALL PAGES)
   Matches the homepage nav-to-video gap so the gold
   hairline reads against the page background everywhere.
   (body.home .globalNav keeps margin-bottom: 0 via its
   more-specific rule — the homepage video brings its own gap.)
   ========================================= */
.globalNav {
  margin-bottom: 10px !important;
}

/* =========================================
   SERVICE PAGES — INTRO TAGLINE + CTA STRIP
   (shared by all 8 service pages)
   ========================================= */
.svc-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 2rem;
}

.svc-tagline {
  max-width: 600px;
  margin: 0 auto;
  font-family: 'Libre Baskerville', serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(70,52,12,0.78);
}

.svc-rule {
  width: 62px;
  height: 1.5px;
  margin: 20px auto 0;
  background: linear-gradient(90deg, rgba(139,105,20,0), rgba(139,105,20,0.7), rgba(139,105,20,0));
}

.svc-cta {
  text-align: center;
  margin: 44px auto 10px;
  max-width: 640px;
}

.svc-cta-rule {
  width: 62px;
  height: 1.5px;
  margin: 0 auto 22px;
  background: linear-gradient(90deg, rgba(139,105,20,0), rgba(139,105,20,0.7), rgba(139,105,20,0));
}

.svc-cta-line {
  font-family: 'Libre Baskerville', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #75570e;
  margin: 0 0 14px;
}

.svc-cta-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

.svc-cta-link {
  font-family: 'Libre Baskerville', serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #8b6914;
  text-decoration: none;
  transition: color 0.25s ease;
}

.svc-cta-link .arrow {
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.25s ease;
}

.svc-cta-link:hover {
  color: #52400b;
}

.svc-cta-link:hover .arrow {
  transform: translateX(4px);
}

.svc-cta-or {
  margin-top: 14px;
  font-family: 'Libre Baskerville', serif;
  font-size: 0.92rem;
  color: rgba(70,52,12,0.75);
}

.svc-cta-or a {
  color: #8b6914;
  font-weight: 700;
  text-decoration: none;
}

.svc-cta-or a:hover {
  color: #52400b;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================
   SCROLL-REVEAL CHOREOGRAPHY (js/premium.js)
   Elements are only hidden once JS tags them,
   so no-JS visitors see everything instantly.
   ========================================= */
.sfd-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  will-change: opacity, transform;
}

.sfd-reveal.sfd-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .sfd-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================
   LETTERHEAD FOOTER (sitewide)
   ========================================= */
.site-letterhead {
  margin-top: 36px;
  padding: 0 20px 28px;
  background: linear-gradient(180deg, #121212 0%, #0a0a0a 100%);
  text-align: center;
  font-family: 'Libre Baskerville', serif;
}

.site-letterhead::before {
  content: "";
  display: block;
  height: 2px;
  margin: 0 -20px 38px;
  background: linear-gradient(90deg, rgba(184,137,45,0) 0%, #b8892d 18%, #f0d27a 50%, #b8892d 82%, rgba(184,137,45,0) 100%);
}

.lh-crest {
  width: 46px;
  height: auto;
  margin: 0 auto 16px;
  display: block;
  opacity: 0.95;
}

.lh-wordmark {
  color: #e6c76a;
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lh-tagline {
  color: rgba(240,210,122,0.55);
  font-size: 0.76rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin: 12px 0 0;
}

.lh-cols {
  display: flex;
  justify-content: center;
  gap: 72px;
  flex-wrap: wrap;
  margin: 34px auto 4px;
  max-width: 900px;
}

.lh-col-title {
  color: #b8892d;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.lh-col p {
  color: rgba(255,255,255,0.72);
  font-size: 0.95rem;
  line-height: 1.85;
  margin: 0;
}

.lh-col a {
  color: #d4af37;
  text-decoration: none;
  transition: color 0.25s ease;
}

.lh-col a:hover {
  color: #f0d27a;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lh-legal {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(212,175,55,0.16);
  color: rgba(255,255,255,0.45);
  font-size: 0.82rem;
  line-height: 1.7;
}

.lh-legal-links {
  display: block;
  margin-top: 7px;
}

.lh-legal-links a {
  color: rgba(255,255,255,0.55);
  margin: 0 10px;
  text-decoration: none;
  transition: color 0.25s ease;
}

.lh-legal-links a:hover {
  color: #d4af37;
}

@media (max-width: 640px) {
  .lh-cols {
    gap: 28px;
  }
}

/* =========================================
   PERSISTENT SCHEDULE PILL (js/premium.js)
   ========================================= */
.sfd-cta-pill {
  position: fixed;
  right: 22px;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 950;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff3c0 0%, #f1cf6c 26%, #d4af37 62%, #a97815 100%);
  color: #111;
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  border: 1px solid rgba(255,235,170,0.55);
  box-shadow:
    0 14px 30px rgba(0,0,0,0.30),
    0 0 22px rgba(212,175,55,0.25),
    inset 0 1px 0 rgba(255,255,255,0.4);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.sfd-cta-pill.sfd-cta-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.sfd-cta-pill:hover {
  filter: brightness(1.04);
  transform: translateY(-2px);
  box-shadow:
    0 18px 36px rgba(0,0,0,0.34),
    0 0 30px rgba(212,175,55,0.35),
    inset 0 1px 0 rgba(255,255,255,0.45);
  color: #111;
}

.sfd-cta-pill i {
  font-size: 0.9rem;
}

@media (max-width: 640px) {
  .sfd-cta-pill {
    left: 16px;
    right: 16px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    justify-content: center;
    padding: 15px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sfd-cta-pill {
    transition: none;
  }
}

/* =========================================
   TYPOGRAPHY POLISH — balanced heading wraps
   ========================================= */
h1, h2, h3, h4, .doctor-title {
  text-wrap: balance;
}

/* Letterhead footer — social row */
.lh-social {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 26px;
}

.lh-social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #d4af37;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: color 0.25s ease;
}

.lh-social a i {
  font-size: 1.15rem;
}

.lh-social a:hover {
  color: #f0d27a;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* =========================================
   ACCESSIBILITY POLISH
   ========================================= */
/* Footer legal text — lifted for WCAG AA on near-black */
.lh-legal {
  color: rgba(255,255,255,0.58);
}
.lh-legal-links a {
  color: rgba(255,255,255,0.66);
}

/* Visible keyboard focus, in brand gold */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #75570e;
  outline-offset: 3px;
  border-radius: 2px;
}

.site-letterhead a:focus-visible,
.sfd-cta-pill:focus-visible {
  outline-color: #f0d27a;
}

/* Screen-reader-only utility */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip to content (appears on keyboard focus) */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 2000;
  padding: 12px 22px;
  border-radius: 999px;
  background: #0d0d0d;
  color: #f0d27a;
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transform: translateY(-300%);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: none;
  outline: 2px solid #f0d27a;
  outline-offset: 3px;
}

/* Mobile: keep footer legal links clear of the full-width Schedule pill */
@media (max-width: 640px) {
  .site-letterhead {
    padding-bottom: 100px;
  }
}