/* ============================================================
   WHISPERS OF ANTIDOTE — PREMIUM DESIGN LAYER
   Calm-luxury editorial skin over the Designesia engine.
   Loaded last; overrides template tokens & key components.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Marcellus&family=Instrument+Sans:wght@400;500;600;700&display=swap');

/* ---------- 0. FIXED HEADER SPACING ---------- */
main {
  padding-top: 80px;
}
@media (max-width: 991.98px) {
  main {
    padding-top: 72px;
  }
}
@media (max-width: 575.98px) {
  main {
    padding-top: 72px;
  }
}

/* ---------- 1. DESIGN TOKENS (high specificity to win the cascade) ---------- */
html:root,
html body {
  /* warm editorial palette */
  --ivory:        #FBF8F2;
  --cream:        #F5EEE2;
  --sand:         #EFE5D5;
  --sand-deep:    #E7DAC6;
  --espresso:     #2B2620;
  --espresso-2:   #221E18;
  --ink:          #3A332B;
  --muted:        #6B6155;
  --hairline:     rgba(43, 38, 32, 0.12);

  /* refined accents — driven by Site Settings (primaryColor/secondaryColor) via
     the :root vars layout.tsx sets from Sanity; fall back to the studio's warm
     terracotta/eucalyptus defaults only when no override is set. */
  --clay:         var(--primary-color, #B16A4C);
  --clay-rgb:     var(--primary-color-rgb, 177, 106, 76);
  --clay-deep:    #9A5839;
  --sage:         var(--secondary-color, #7E8A6F);
  --sage-rgb:     var(--secondary-color-rgb, 126, 138, 111);
  --gold:         #C2A36B;   /* hairline / detail gold */

  /* template structural tokens */
  --bg-default:   var(--ivory);
  --bg-light:     var(--cream);
  --bg-dark-1:    var(--espresso);
  --bg-dark-2:    var(--espresso-2);
  --bg-dark-3:    #2F2922;
  --bg-dark-1-rgb: 43, 38, 32;
  --footer-background-color: var(--espresso-2);
  --rounded-1:    20px;
  --container-max-width: 1240px;
  --swiper-theme-color: var(--clay);
  --border-color: var(--hairline);

  /* typography — --body-font / --heading-font come from the :root rule
     layout.tsx renders from Site Settings; don't redeclare them here or
     this higher-specificity selector wins over the Sanity value. */
  --body-font-color: var(--ink);
  --body-font-color-bg-dark: rgba(255,255,255,0.72);
  --body-font-line-height: 1.85;
  --heading-font-color: var(--espresso);
  --heading-font-color-bg-dark: #FBF8F2;
  --heading-font-weight: 400;
  --alt-font: "Fraunces", "Marcellus", Georgia, serif;

  --h1-font-family: var(--heading-font);
  --h2-font-family: var(--heading-font);
  --h3-font-family: var(--heading-font);
  --h4-font-family: var(--heading-font);
  --h1-letter-spacing: -0.02em;
  --h2-letter-spacing: -0.018em;
  --h3-letter-spacing: -0.01em;

  --subtitle-color: var(--clay);
  --subtitle-letter-spacing: 4px;
  --subtitle-font-weight: 600;

  --btn-rounded: 50px;
  --btn-hover-bg: var(--espresso);
}

/* ---------- 2. BASE CANVAS & TYPOGRAPHY ---------- */
body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--body-font);
  font-size: 16.5px;
  line-height: 1.85;
  letter-spacing: 0.002em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--heading-font);
  color: var(--espresso);
  font-weight: 400;
  letter-spacing: -0.015em;
  font-optical-sizing: auto;
}
h1, .h1 { font-weight: 400; line-height: 1.08; }
h2, .h2 { line-height: 1.14; }

p { color: var(--ink); }
.lead { font-weight: 400; }

a { transition: color .25s ease; }
::selection { background: rgba(var(--clay-rgb), .22); color: var(--espresso); }

/* generous editorial section rhythm */
section { padding-top: 110px; padding-bottom: 110px; }
@media (max-width: 767.98px){ section { padding-top: 72px; padding-bottom: 72px; } }

.container { max-width: 1240px; }

/* ---------- 2b. OVERFLOW GUARDS (kill horizontal scroll site-wide) ---------- */
html, body { overflow-x: hidden; max-width: 100%; }
#wrapper { overflow-x: clip; }

/* Parallax / oversized background images must clip at their own section
   instead of leaking into page width (they were inflating the document to
   1200–2000px, which let the page scroll sideways and made the fixed navbar
   look misaligned on small screens). The template relies on JS for this; we
   guarantee it in CSS so it holds even before/without JS. */
.jarallax { overflow: hidden; position: relative; }
#subheader.jarallax { overflow-x: clip; overflow-y: visible; } /* keep decorative accents */
.jarallax .jarallax-img,
.jarallax-img { max-width: none; }

/* never let long unbroken strings (placeholder copy, URLs) blow out a card */
h1, h2, h3, h4, h5, h6, p, .subtitle,
.svc-card-body, .mvv-card, .pt-4, .crumb li { overflow-wrap: break-word; word-break: normal; }

/* ---------- 3. SUBTITLE / EYEBROW ---------- */
.subtitle, .subtitle.s2 {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--body-font);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--clay);
  background: none;
  padding: 0;
}
.subtitle::before {
  content: "";
  width: 30px; height: 1px;
  background: var(--clay);
  opacity: .65;
  display: inline-block;
}
.subtitle.text-light, .text-light .subtitle { color: var(--gold); }
.subtitle.text-light::before { background: var(--gold); }

/* ---------- 4. BUTTONS ---------- */
.btn-main {
  background: var(--clay);
  color: #fff;
  border-radius: 50px;
  font-family: var(--body-font);
  font-weight: 600;
  letter-spacing: .2px;
  padding: 14px 34px;
  border: 1px solid var(--clay);
  box-shadow: 0 14px 30px -12px rgba(var(--clay-rgb), .55);
  transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.btn-main:hover {
  background: var(--espresso);
  border-color: var(--espresso);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 20px 38px -14px rgba(43,38,32,.5);
}
.btn-main.fx-slide { overflow: hidden; }

/* outline variant used on dark / hero secondary actions */
.btn-line, .btn-text {
  font-family: var(--body-font);
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--espresso);
}
.btn-line { border-bottom: 1px solid var(--clay); }
.text-light .btn-line, .btn-line.text-white { color: #fff; border-color: var(--gold); }

/* ---------- 5. SECTION BACKGROUND TONES ---------- */
.bg-light          { background: var(--cream) !important; }
.bg-color-op-1     { background: var(--sand) !important; }
.bg-color-op-2     { background: var(--sand-deep) !important; }
section[data-bgcolor], .bg-color-op-2[data-bgcolor] { background-color: var(--cream) !important; }
.bg-color, .bg-color-2 { background: var(--clay) !important; }
.id-color, .id-color-2 { color: var(--clay) !important; }
.text-light .id-color-2 { color: var(--gold) !important; }

/* :not(.cta-banner) — that section renders its own background-image inline
   (real Sanity content, different per page); this shorthand !important would
   otherwise clobber it back to a solid color, same as it does for every
   other .bg-dark section that has no image of its own. */
.bg-dark-1, .bg-dark:not(.cta-banner), .bg-dark-2 { background: var(--espresso) !important; }
.bg-dark-1 h1,.bg-dark-1 h2,.bg-dark-1 h3,.bg-dark-1 h4,
.bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark h4 { color: #FBF8F2 !important; }

/* subtle grain-free warm vignette on dark sections */
.bg-dark-1, .bg-dark { position: relative; }

/* ---------- 6. HERO SLIDER ---------- */
.swiper-inner { background-size: cover; background-position: center; }
.sw-overlay {
  background: linear-gradient(105deg, rgba(34,30,24,.78) 0%, rgba(34,30,24,.42) 48%, rgba(34,30,24,.12) 100%);
}
.sw-caption .subtitle { color: var(--gold); }
.sw-caption .subtitle::before { background: var(--gold); }
.sw-caption h1 {
  font-family: var(--heading-font);
  color: #fff;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 30px rgba(0,0,0,.25);
}
.sw-caption .lead { color: rgba(255,255,255,.85); }
.mh-800 { min-height: 80vh; }

/* swiper controls refined */
.swiper-button-prev, .swiper-button-next {
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50px;
  width: 52px; height: 52px;
  transition: background .3s, border-color .3s;
}
.swiper-button-prev:hover, .swiper-button-next:hover { background: var(--clay); border-color: var(--clay); }
.swiper-pagination-bullet-active { background: var(--gold) !important; }

/* ---------- 7. HIGHLIGHT TILES ---------- */
.row.g-0 > [class*="col-"] > .h-100 {
  padding: 56px 44px !important;
  transition: transform .4s ease, box-shadow .4s ease;
}
.row.g-0 > [class*="col-"] > .h-100:hover { transform: translateY(-4px); }
.row.g-0 .bg-dark-1 { background: var(--espresso) !important; }
.row.g-0 .bg-color-op-2 { background: var(--sand-deep) !important; }
.row.g-0 .h-100 img.w-70px { filter: saturate(.9); }

/* ---------- 8. CARDS, IMAGES, HOVER ---------- */
img { border-radius: inherit; }
.rounded-1 { border-radius: 20px !important; }
.rounded-2 { border-radius: 14px !important; }

.hover .rounded-1.overflow-hidden,
.hover.rounded-1.overflow-hidden {
  box-shadow: 0 30px 60px -34px rgba(43,38,32,.42);
}
.hover-scale-1-2, .hover-scale-1-1 { transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.hover:hover .hover-scale-1-2 { transform: scale(1.09); }
.hover:hover .hover-scale-1-1 { transform: scale(1.05); }

/* service & quote card titles */
.hover h3 a, h3 a.text-dark { color: var(--espresso); transition: color .25s; }
.hover h3 a:hover, h3 a.text-dark:hover { color: var(--clay); }
/* keep quote-card excerpts tidy (3 lines) so long copy never looks like overflow */
.hover .pt-4 p {
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* case study overlay tint → warm espresso instead of harsh */
.abs.bg-color, .abs.bg-dark-1 { background: rgba(43,38,32,.72) !important; }

/* ---------- 8b. SERVICE CARDS (home + services grid) ---------- */
.svc-grid { --gap: 1.5rem; }
.svc-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 24px 50px -38px rgba(43,38,32,.4);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .45s;
}
.svc-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--clay-rgb), .35);
  box-shadow: 0 40px 70px -34px rgba(43,38,32,.4);
}
.svc-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sand);
}
.svc-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.svc-card:hover .svc-card-media img { transform: scale(1.07); }
.svc-card-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(43,38,32,.30), transparent 45%);
  opacity: 0; transition: opacity .45s;
}
.svc-card:hover .svc-card-media::after { opacity: 1; }
.svc-card-index {
  position: absolute; top: 16px; left: 16px;
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(251,248,242,.9);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  font-family: var(--heading-font);
  font-size: 15px; color: var(--clay);
  box-shadow: 0 6px 16px -8px rgba(43,38,32,.4);
}
.svc-card-body {
  padding: 30px 28px 32px;
  display: flex; flex-direction: column;
  flex: 1 1 auto;
}
.svc-card-body h3 {
  font-size: 23px;
  margin: 0 0 12px;
  color: var(--espresso);
  transition: color .25s;
}
.svc-card:hover .svc-card-body h3 { color: var(--clay); }
.svc-card-body p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 22px;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.svc-card-link {
  margin-top: auto;
  font-family: var(--body-font);
  font-weight: 600; font-size: 14px;
  letter-spacing: .3px;
  color: var(--clay);
  display: inline-flex; align-items: center; gap: 8px;
}
.svc-card-link::after { content: "→"; transition: transform .3s; }
.svc-card:hover .svc-card-link::after { transform: translateX(5px); }

.svc-viewall {
  font-family: var(--body-font);
  font-weight: 600; font-size: 14px; letter-spacing: .3px;
  color: var(--espresso);
  display: inline-flex; align-items: center; gap: 9px;
  border-bottom: 1px solid var(--clay);
  padding-bottom: 3px;
  transition: gap .25s, color .25s;
}
.svc-viewall::after { content: "→"; color: var(--clay); transition: transform .3s; }
.svc-viewall:hover { color: var(--clay); }
.svc-viewall:hover::after { transform: translateX(5px); }

/* ---------- 9. ABOUT IMAGES ---------- */
.spacer-double + .row .de_count { padding: 12px 0; }

/* ---------- 10. STAT COUNTERS ---------- */
.de_count h3 .timer, .de_count .hs-2 {
  font-family: var(--heading-font);
  color: var(--clay);
  font-weight: 500;
}
.de_count {
  border-left: 1px solid var(--hairline);
  padding-left: 22px;
}
.text-light .de_count, .bg-dark-1 .de_count { border-color: rgba(255,255,255,.16); }

/* ---------- 11. JOURNEY STEPS ---------- */
.de-step .step-icon {
  width: 92px; height: 92px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--hairline);
  box-shadow: inset 0 0 0 6px rgba(var(--clay-rgb), .05);
  transition: transform .35s ease, background .35s ease;
}
.de-step:hover .step-icon { transform: translateY(-4px); background: var(--sand); }
.de-step .step-icon i { color: var(--clay) !important; font-size: 34px !important; }
.de-step h3 { margin-top: 18px; }
.de-step-arrow::after { color: var(--gold) !important; opacity: .6; }

/* ---------- 12. TIMELINE (about history) ---------- */
.de-timeline-s2 .d-item .d-text { border-left: 1px solid var(--hairline); padding-left: 28px; }
.de-timeline-s2 .d-icon {
  background: var(--clay) !important;
  color: #fff !important;
  font-family: var(--heading-font);
  box-shadow: 0 8px 18px -8px rgba(var(--clay-rgb), .6);
}
.de-timeline-s2 h3 { color: var(--espresso); }

/* ---------- 13. TABS (about) ---------- */
.de-tab { max-width: 100%; }
.de-tab .d-tab-nav {
  display: flex;
  flex-wrap: wrap;              /* never blow out horizontally */
  gap: 6px 26px;
  max-width: 100%;
  background: none;
}
.de-tab .d-tab-nav li {
  font-family: var(--heading-font);
  font-size: 19px;
  color: var(--muted);
  cursor: pointer;
  padding: 0 0 4px;
  background: none !important;  /* template paints active-tab solid clay; we use underline */
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
  flex: 0 1 auto;
  transition: color .25s;
}
.de-tab .d-tab-nav li.active-tab {
  color: var(--clay) !important;
  border-bottom: 2px solid var(--clay);
}
.de-tab .d-tab-content { max-width: 100%; }
.de-tab .d-tab-content > li { overflow-wrap: anywhere; }

/* ---------- 14. ACCORDION (FAQ) ---------- */
.accordion .accordion-section-title {
  font-family: var(--heading-font);
  font-size: 20px;
  color: var(--espresso);
  border-top: 1px solid var(--hairline);
  padding: 22px 44px 22px 0;
  position: relative;
  transition: color .25s;
}
.accordion .accordion-section-title:hover,
.accordion .accordion-section-title.active { color: var(--clay); }
.accordion .accordion-section-title::after {
  content: "+";
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--body-font); font-size: 26px; font-weight: 300;
  color: var(--clay); transition: transform .3s;
}
.accordion .accordion-section-title.active::after { content: "–"; }
.accordion .accordion-section-content { color: var(--muted); padding-bottom: 18px; }

/* ---------- 15. TESTIMONIALS ---------- */
.bg-dark-1 .owl-single-dots h3, .bg-dark-1 h3.fs-32 {
  font-family: var(--heading-font);
  color: #FBF8F2 !important;
  font-weight: 400;
  font-style: italic;
}
.icofont-quote-left.id-color-2 { color: var(--gold) !important; }
.bg-dark-1 .owl-dots .owl-dot.active span,
.bg-dark-1 .owl-dot.active span { background: var(--gold) !important; }

/* ---------- 16. FORMS ---------- */
.form-control, input.form-control, textarea.form-control, select.form-control {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 14px 18px;
  color: var(--ink);
  font-family: var(--body-font);
  font-size: 15.5px;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.form-control::placeholder { color: #A89E90; }
.form-control:focus {
  border-color: var(--clay);
  box-shadow: 0 0 0 4px rgba(var(--clay-rgb), .12);
  background: #fff;
  outline: none;
}
.bg-color-op-1 .form-control { background: #fff; }
label, .form-label { font-weight: 600; color: var(--espresso); letter-spacing: .2px; }

/* contact info icon chips */
.bg-color.text-light.rounded-1 { background: var(--clay) !important; border-radius: 14px !important; }

/* ---------- 17. SUBHEADER ---------- */
#subheader {
  padding-top: 200px; padding-bottom: 110px;
  background-size: cover; background-position: center;
}
#subheader .sw-overlay,
#subheader .sw-overlay.op-4 {
  background: linear-gradient(180deg, rgba(34,30,24,.55) 0%, rgba(34,30,24,.62) 100%);
  opacity: 1 !important;
}
#subheader h1.cam-style { color: #fff; font-family: var(--heading-font); font-weight: 400; }
#subheader .subtitle { color: var(--gold); }
.crumb li, .crumb li a { color: rgba(255,255,255,.8); font-weight: 500; letter-spacing: .3px; }
.crumb li.active { color: var(--gold); }
.crumb li a:hover { color: #fff; }

/* ---------- 18. CTA BANNER ---------- */
/* Plain CSS background instead of jarallax's JS-computed positioning —
   guarantees full, correct cover at every viewport size and load timing. */
.cta-banner {
  position: relative;
  overflow: hidden;
  background-color: var(--espresso);
  background-size: cover;
  background-position: center;
}
.jarallax.bg-dark .sw-overlay,
.cta-banner .sw-overlay { background: linear-gradient(100deg, rgba(34,30,24,.82), rgba(34,30,24,.45)); opacity:1 !important; }
.responsive-contact-chip {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  backdrop-filter: blur(6px);
}

/* ---------- 19. HEADER POLISH ---------- */
#site-header, #site-header.transparent {
  background: rgba(251,248,242,.88) !important;
  backdrop-filter: saturate(140%) blur(14px) !important;
  -webkit-backdrop-filter: saturate(140%) blur(14px) !important;
  box-shadow: 0 1px 0 var(--hairline), 0 10px 30px -22px rgba(43,38,32,.4) !important;
}
#mainmenu a {
  font-family: var(--body-font) !important;
  color: var(--espresso) !important;
  font-weight: 600 !important;
  letter-spacing: .3px;
}
#mainmenu a::after { background: var(--clay) !important; }
#site-header #logo img { max-height: 52px; }

/* ---------- 20. FOOTER — MINIMAL ---------- */
footer.premium-footer {
  background: var(--ivory) !important;
  color: var(--muted);
  padding: 0;
  border-top: 1px solid var(--hairline);
}
.premium-footer .container { padding-top: 64px; padding-bottom: 30px; }

.premium-footer .pf-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px 48px;
  flex-wrap: wrap;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--hairline);
}
.premium-footer .pf-brand img { height: 46px; width: auto; object-fit: contain; display: block; }
.premium-footer .pf-tagline {
  margin: 14px 0 0;
  max-width: 30ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.premium-footer .pf-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
}
.premium-footer .pf-nav a {
  font-family: var(--body-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--espresso);
  position: relative;
  transition: color .25s;
}
.premium-footer .pf-nav a:hover { color: var(--clay); }

.premium-footer .pf-social { display: flex; gap: 10px; }
.premium-footer .pf-social a {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  color: var(--espresso);
  font-size: 15px;
  transition: all .3s;
}
.premium-footer .pf-social a:hover {
  background: var(--clay); border-color: var(--clay); color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 12px 22px -10px rgba(var(--clay-rgb), .5);
}

.premium-footer .pf-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  flex-wrap: wrap;
  padding-top: 26px;
}
.premium-footer .pf-copy { margin: 0; font-size: 13.5px; color: var(--muted); letter-spacing: .2px; }
.premium-footer .pf-contact { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; font-size: 13.5px; }
.premium-footer .pf-contact a { color: var(--ink); transition: color .25s; }
.premium-footer .pf-contact a:hover { color: var(--clay); }
.premium-footer .pf-cta {
  font-weight: 600; color: var(--clay) !important;
  display: inline-flex; align-items: center; gap: 7px;
}
.premium-footer .pf-cta::after { content: "→"; transition: transform .25s; }
.premium-footer .pf-cta:hover::after { transform: translateX(4px); }

@media (max-width: 767.98px) {
  .premium-footer .pf-top { flex-direction: column; align-items: flex-start; gap: 28px; }
  .premium-footer .pf-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- 21. WHATSAPP FLOAT (keep brand green, refine) ---------- */
.whatsapp-float { box-shadow: 0 18px 36px -10px rgba(37,211,102,.45); }

/* ---------- 22. MISC POLISH ---------- */
.ul-check li { color: var(--muted); }
.ul-check li::before { color: var(--clay) !important; }
.bg-blur { background: rgba(43,38,32,.45) !important; backdrop-filter: blur(8px); }
hr { border-color: var(--hairline); }

/* WOW.js sets an *inline* visibility:hidden on .wow elements until they
   scroll into view, which a plain class rule can never override. Content
   below the fold stays permanently invisible whenever the reveal never
   fires — slow/blocked JS, screenshot tools, crawlers, print. Kill the
   hide-until-scroll behavior outright so content is never dependent on it. */
.wow { visibility: visible !important; opacity: 1 !important; }

/* refined link underline for inline text links */
.text-dark { color: var(--espresso) !important; }
a.text-dark:hover { color: var(--clay) !important; }

/* ============================================================
   ABOUT PAGE — clean editorial redesign
   ============================================================ */

/* ---- intro ---- */
.about-intro-media { position: relative; padding-bottom: 30px; }
.about-intro-img {
  width: 84%;
  border-radius: 24px;
  display: block;
  box-shadow: 0 40px 80px -44px rgba(43,38,32,.5);
}
.about-intro-img-2 {
  position: absolute;
  right: 0; bottom: 0;
  width: 46%;
  border-radius: 18px;
  border: 6px solid var(--ivory);
  box-shadow: 0 30px 60px -36px rgba(43,38,32,.55);
}
.about-intro-badge {
  position: absolute;
  top: 26px; right: 8px;
  background: var(--espresso);
  color: #fff;
  border-radius: 18px;
  padding: 16px 22px;
  text-align: center;
  box-shadow: 0 24px 44px -22px rgba(43,38,32,.7);
}
.about-intro-badge .ai-num {
  display: block;
  font-family: var(--heading-font);
  font-size: 30px; line-height: 1;
  color: var(--gold);
}
.about-intro-badge .ai-label {
  display: block;
  font-size: 11px; letter-spacing: .5px;
  margin-top: 6px;
  color: rgba(255,255,255,.78);
  max-width: 11ch;
}
.about-intro-text .lead { color: var(--ink); font-size: 19px; line-height: 1.75; }
.about-intro-actions { display: flex; align-items: center; gap: 16px 28px; flex-wrap: wrap; margin-top: 32px; }
.about-intro-link {
  font-family: var(--body-font); font-weight: 600; font-size: 14px; letter-spacing: .3px;
  color: var(--espresso);
  border-bottom: 1px solid var(--clay); padding-bottom: 3px;
  display: inline-flex; align-items: center; gap: 8px;
}
.about-intro-link::after { content: "→"; color: var(--clay); transition: transform .3s; }
.about-intro-link:hover { color: var(--clay); }
.about-intro-link:hover::after { transform: translateX(5px); }

/* ---- mission / vision / values cards ---- */
.mvv-card {
  position: relative;
  height: 100%;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 22px;
  padding: 44px 34px 38px;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s;
}
.mvv-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--clay);
  transform: scaleY(0); transform-origin: top;
  transition: transform .45s ease;
}
.mvv-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--clay-rgb), .3);
  box-shadow: 0 40px 70px -38px rgba(43,38,32,.4);
}
.mvv-card:hover::before { transform: scaleY(1); }
.mvv-num {
  font-family: var(--heading-font);
  font-size: 16px; font-weight: 500;
  color: var(--clay);
  letter-spacing: 1px;
}
.mvv-card h3 { margin: 14px 0 14px; font-size: 25px; color: var(--espresso); }
.mvv-card p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.75; }

/* ---- journey / history ---- */
.about-journey-img {
  margin-top: 30px;
  border-radius: 22px;
  min-height: 420px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 40px 80px -44px rgba(43,38,32,.5);
}
.about-timeline { list-style: none; margin: 0; padding: 0; counter-reset: tl; }
.about-timeline > li {
  position: relative;
  display: flex;
  gap: 24px;
  padding: 0 0 38px 0;
}
.about-timeline > li::before {
  content: "";
  position: absolute;
  left: 25px; top: 52px; bottom: -4px;
  width: 1px; background: var(--hairline);
}
.about-timeline > li:last-child { padding-bottom: 0; }
.about-timeline > li:last-child::before { display: none; }
.about-timeline .at-marker {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--ivory);
  border: 1px solid rgba(var(--clay-rgb), .35);
  color: var(--clay);
  font-family: var(--heading-font);
  font-size: 20px;
  box-shadow: inset 0 0 0 5px rgba(var(--clay-rgb), .06);
}
.about-timeline .at-body h3 { margin: 8px 0 8px; font-size: 22px; color: var(--espresso); }
.about-timeline .at-body p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.75; }

/* ---- stats strip ---- */
.about-stats { background: var(--espresso); }
.about-stat { text-align: center; padding: 10px 6px; }
.about-stat-num {
  font-family: var(--heading-font);
  font-size: 52px; line-height: 1;
  color: var(--gold);
  margin: 0 0 10px;
}
.about-stat-label {
  display: block;
  color: rgba(255,255,255,.72);
  font-size: 14px; letter-spacing: .3px;
  max-width: 18ch; margin: 0 auto;
}

@media (max-width: 991.98px) {
  .about-intro-media { max-width: 520px; margin: 0 auto; }
  .about-journey-img { min-height: 320px; }
}

/* ============================================================
   22. HEADER & NAVIGATION — COMPLETE REDESIGN
   ============================================================ */

/* Header base */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 80px;
  z-index: 9999;
  background: rgba(251, 248, 242, 0.88);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 1px 0 rgba(43, 38, 32, 0.1), 0 10px 30px -22px rgba(43, 38, 32, 0.4);
  border-bottom: 1px solid rgba(179, 106, 76, 0.08);
  transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}

#site-header::before,
#site-header::after {
  display: none !important;
  content: none !important;
}

/* Hide on scroll — animate `top`, NOT `transform`.
   A non-none transform on the header would make it the containing block for
   its position:fixed child (.nav-mobile-menu), collapsing the mobile menu to
   the header's height instead of the viewport. Using top avoids that. */
#site-header.nav-header-hidden {
  top: -90px;
}

#site-header.nav-header-visible {
  top: 0;
}

/* Container */
.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 48px;
  gap: 40px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Brand/Logo */
.nav-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 60px;
  text-decoration: none;
  transition: opacity 0.25s ease;
}

.nav-brand:hover {
  opacity: 0.8;
}

.nav-brand img {
  display: block;
  width: auto;
  max-width: 180px;
  max-height: 56px;
  object-fit: contain;
  object-position: center;
}

/* Desktop Navigation Menu */
.nav-menu {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  justify-content: center;
  gap: 48px;
}

.nav-menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-link {
  display: inline-block;
  font-family: "Instrument Sans", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #2B2620;
  text-decoration: none;
  position: relative;
  padding: 6px 0;
  transition: color 0.25s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--clay);
  transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--clay);
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
  width: 100%;
}

.nav-link-active {
  color: var(--clay);
}

.nav-link-active::after {
  width: 100%;
  background: rgba(var(--clay-rgb), 0.5);
}

.nav-link:focus-visible {
  outline: none;
}

/* Right Actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

/* Book Button */
.nav-book-btn {
  background: var(--clay);
  color: #fff;
  border: 1px solid var(--clay);
  border-radius: 50px;
  padding: 12px 28px;
  font-family: var(--body-font), "Instrument Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 12px 24px -8px rgba(var(--clay-rgb), 0.4);
  position: relative;
  overflow: hidden;
}

.nav-book-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.15);
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  transition: clip-path 0.4s ease;
}

.nav-book-btn:hover {
  background: #2B2620;
  border-color: #2B2620;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -10px rgba(43, 38, 32, 0.5);
}

.nav-book-btn:hover::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.nav-book-btn:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 4px;
}

/* Hamburger Menu Button */
.nav-hamburger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  margin: -8px -12px -8px 0;
  transition: transform 0.2s ease;
}

.nav-hamburger:hover {
  transform: scale(1.05);
}

.nav-hamburger:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 4px;
}

.nav-hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background: #2B2620;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-hamburger-line:nth-child(1) {
  top: 10px;
}

.nav-hamburger-line:nth-child(2) {
  top: 18px;
}

.nav-hamburger-line:nth-child(3) {
  top: 26px;
}

.nav-hamburger-open .nav-hamburger-line:nth-child(1) {
  top: 18px;
  transform: translateX(-50%) rotate(45deg);
}

.nav-hamburger-open .nav-hamburger-line:nth-child(2) {
  opacity: 0;
}

.nav-hamburger-open .nav-hamburger-line:nth-child(3) {
  top: 18px;
  transform: translateX(-50%) rotate(-45deg);
}

/* Mobile Menu */
.nav-mobile-menu {
  display: none;
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  /* Explicit height (not bottom:0): the header has backdrop-filter, which makes
     it the containing block for this fixed child, so bottom:0 would resolve
     against the 80px header and collapse the menu. body scroll is locked while
     open, so the header stays put and these values stay accurate. */
  height: calc(100vh - 80px);
  height: calc(100dvh - 80px);
  width: 100vw;
  background: rgba(251, 248, 242, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  flex-direction: column;
  z-index: 9998;
  padding: 32px 24px;
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -2px 0 16px rgba(43, 38, 32, 0.08);
}

.nav-mobile-menu::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(43, 38, 32, 0.15);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.4s ease;
}

.nav-mobile-menu-open {
  display: flex;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.nav-mobile-menu-open::before {
  opacity: 1;
  pointer-events: auto;
}

.nav-mobile-menu .nav-menu {
  display: flex !important; /* override the @media `.nav-menu{display:none}` that hides the desktop nav */
  flex-direction: column;
  gap: 0;
  flex: 0 0 auto;
  width: 100%;
  justify-content: flex-start;
}

.nav-mobile-menu .nav-menu li {
  width: 100%;
}

.nav-mobile-menu .nav-link {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid rgba(43, 38, 32, 0.08);
  font-size: 15px;
}

.nav-mobile-menu .nav-link::after {
  display: none;
}

.nav-mobile-menu .nav-link:hover {
  color: var(--clay);
}

/* Mobile Divider */
.nav-mobile-divider {
  height: 1px;
  background: rgba(43, 38, 32, 0.08);
  margin: 24px 0;
}

/* Mobile CTA Button */
.nav-book-btn-mobile {
  width: 100%;
  margin-top: 16px;
}

/* Responsive Breakpoints */
@media (max-width: 991.98px) {
  #site-header {
    height: 72px;
  }

  .nav-container {
    padding: 0 20px;
    gap: 16px;
  }

  .nav-brand {
    height: 54px;
  }

  .nav-brand img {
    max-width: 160px;
    max-height: 50px;
  }

  .nav-menu {
    display: none;
  }

  .nav-actions {
    gap: 12px;
  }

  .nav-actions .nav-book-btn {
    display: none;
  }

  .nav-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-mobile-menu {
    top: 72px;
    height: calc(100vh - 72px);
    height: calc(100dvh - 72px);
  }
}

@media (max-width: 575.98px) {
  .nav-container {
    padding: 0 16px;
  }

  .nav-brand img {
    max-width: 140px;
    max-height: 48px;
  }

  .nav-mobile-menu {
    padding: 24px 16px;
  }

  .nav-mobile-menu .nav-link {
    padding: 14px 0;
    font-size: 14.5px;
  }

  .nav-hamburger {
    margin: -8px -8px -8px 0;
  }
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce) {
  #site-header,
  .nav-link::after,
  .nav-book-btn,
  .nav-mobile-menu,
  .nav-hamburger-line {
    transition: none;
  }
}

/* Body scroll lock when mobile menu open */
body.nav-mobile-open {
  overflow: hidden;
}

/* ============================================================
   23. BOOKING PAGE — editorial redesign
   ============================================================ */

.booking-note {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--clay);
  border-radius: 16px;
  padding: 18px 24px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink);
}
.booking-note-icon {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: var(--clay);
  font-size: 19px;
  box-shadow: 0 8px 18px -10px rgba(43,38,32,.3);
}

.booking-form-card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 22px;
  padding: 40px 38px;
  box-shadow: 0 30px 60px -42px rgba(43,38,32,.4);
}
@media (max-width: 575.98px) {
  .booking-form-card { padding: 28px 22px; }
}

.booking-side-img {
  min-height: 340px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 30px 60px -36px rgba(43,38,32,.45);
}
.booking-side-img-badge {
  position: absolute;
  left: 22px; bottom: 22px;
  background: rgba(43,38,32,.82);
  backdrop-filter: blur(6px);
  color: #fff;
  border-radius: 16px;
  padding: 14px 20px;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}
.booking-side-img-badge .bsi-num {
  font-family: var(--heading-font);
  font-size: 22px;
  color: var(--gold);
  line-height: 1;
}
.booking-side-img-badge .bsi-label {
  font-size: 11.5px;
  letter-spacing: .3px;
  color: rgba(255,255,255,.82);
}

.booking-trust {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.booking-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.booking-trust-icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--hairline);
  color: var(--clay);
  font-size: 18px;
}
.booking-trust-title { font-weight: 700; font-size: 14.5px; color: var(--espresso); margin-bottom: 2px; }
.booking-trust-text { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; }

.booking-fees {
  margin-top: 28px;
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 24px 26px;
}
.booking-fees-title {
  font-family: var(--heading-font);
  font-size: 17px;
  color: var(--espresso);
  margin-bottom: 14px;
}
.booking-fees-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 13.5px;
  color: var(--ink);
}
.booking-fees-row:last-of-type { border-bottom: none; }
.booking-fees-amount { font-weight: 700; color: var(--clay); }
.booking-fees-note {
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}

/* ============================================================
   24. QUOTE CARDS (quotes grid + home preview)
   ============================================================ */
.quote-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 50px -38px rgba(43,38,32,.4);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .45s;
}
.quote-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--clay-rgb), .35);
  box-shadow: 0 40px 70px -34px rgba(43,38,32,.4);
}
.quote-card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); }
.quote-card-media img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 0;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.quote-card:hover .quote-card-media img { transform: scale(1.07); }
.quote-card-tag {
  position: absolute; top: 16px; left: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(43,38,32,.78);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 30px;
}
.quote-card-tag i { color: var(--gold); font-size: 12px; }
.quote-card-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(43,38,32,.18);
  opacity: 0; transition: opacity .35s;
}
.quote-card:hover .quote-card-play { opacity: 1; }
.quote-card-play span {
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(251,248,242,.92);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--clay); font-size: 20px;
  box-shadow: 0 12px 24px -10px rgba(43,38,32,.5);
}
.quote-card-body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1 1 auto; }
.quote-card-body h3 { font-size: 21px; margin: 0 0 10px; color: var(--espresso); transition: color .25s; }
.quote-card:hover .quote-card-body h3 { color: var(--clay); }
.quote-card-body p {
  color: var(--muted); font-size: 14.5px; line-height: 1.7; margin: 0 0 18px;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.quote-card-meta {
  margin-top: auto; display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--muted); font-weight: 600;
  padding-top: 14px; border-top: 1px solid var(--hairline);
}
.quote-card-meta i { color: var(--clay); }

/* ============================================================
   25. CASE STUDY CARDS (case-studies grid + home carousel)
   ============================================================ */
.cs-card {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 24px 50px -38px rgba(43,38,32,.4);
}
.cs-card img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 0;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.cs-card:hover img { transform: scale(1.08); }
.cs-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(43,38,32,0) 35%, rgba(43,38,32,.85) 100%);
}
.cs-card-index {
  position: absolute; top: 18px; left: 18px;
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(251,248,242,.9);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  font-family: var(--heading-font);
  font-size: 15px; color: var(--clay);
  box-shadow: 0 6px 16px -8px rgba(43,38,32,.4);
}
.cs-card-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px 26px;
  color: #fff;
}
.cs-card-body h3 { color: #fff; font-size: 22px; margin: 0 0 10px; }
.cs-card-desc {
  max-height: 0; opacity: 0; overflow: hidden;
  font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,.82);
  transition: max-height .45s ease, opacity .35s ease, margin .35s ease;
}
.cs-card:hover .cs-card-desc { max-height: 140px; opacity: 1; margin-bottom: 14px; }
.cs-card-link {
  font-family: var(--body-font); font-weight: 600; font-size: 13px; letter-spacing: .3px;
  color: var(--gold); display: inline-flex; align-items: center; gap: 8px;
}
.cs-card-link::after { content: "→"; transition: transform .3s; }
.cs-card:hover .cs-card-link::after { transform: translateX(5px); }

/* case study expanded challenge/solution panel */
.cs-detail {
  margin-top: 22px;
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 30px 30px 8px;
}
.cs-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 767.98px) { .cs-detail-grid { grid-template-columns: 1fr; } }
.cs-detail h4 {
  font-family: var(--heading-font); font-size: 17px; color: var(--espresso);
  margin: 0 0 14px; display: flex; align-items: center; gap: 10px;
}
.cs-detail h4::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--clay); display: inline-block;
}

/* ============================================================
   26. CONTACT PAGE — info items + visual
   ============================================================ */
.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 20px 22px;
  height: 100%;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.contact-info-item:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--clay-rgb), .3);
  box-shadow: 0 24px 46px -32px rgba(43,38,32,.4);
}
.contact-info-icon {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: var(--clay);
  color: #fff;
  font-size: 20px;
}
.contact-info-item h4 { margin: 0 0 4px; font-size: 16px; color: var(--espresso); }
.contact-info-item a, .contact-info-item span.ci-text { color: var(--muted); font-size: 14.5px; }
.contact-info-item a:hover { color: var(--clay); }

.contact-visual {
  border-radius: 24px;
  min-height: 460px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 40px 80px -44px rgba(43,38,32,.5);
  position: relative;
  overflow: hidden;
}
.contact-visual::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(43,38,32,.05), rgba(43,38,32,.55));
}
.contact-visual-badge {
  position: absolute; left: 24px; bottom: 24px; z-index: 2;
  background: rgba(251,248,242,.95);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 20px 40px -20px rgba(43,38,32,.5);
}
.contact-visual-badge i { color: var(--clay); font-size: 22px; }
.contact-visual-badge span { font-size: 13px; font-weight: 700; color: var(--espresso); max-width: 16ch; line-height: 1.4; }

@media (max-width: 991.98px) {
  .contact-visual { min-height: 320px; }
}

/* ============================================================
   27. HOME — highlight band (full-bleed colored panels)
   ============================================================ */
.highlights-band { margin: 0; }

.highlight-card {
  height: 100%;
  padding: 56px 48px;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.highlight-card:hover { transform: translateY(-4px); }
.highlight-icon {
  width: 60px; height: 60px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  margin-bottom: 22px;
}
.highlight-icon img { width: 30px; height: 30px; object-fit: contain; }
.highlight-card h3 { font-size: 21px; margin: 0 0 10px; }
.highlight-card p { margin: 0; font-size: 14.5px; line-height: 1.75; }

.highlight-dark { background: var(--espresso); }
.highlight-dark h3 { color: #fff; }
.highlight-dark p { color: rgba(255,255,255,.82); }
.highlight-dark .highlight-icon { background: rgba(255,255,255,.12); }

.highlight-lightblue { background: #EAF2F8; }
.highlight-lightblue h3 { color: var(--espresso); }
.highlight-lightblue p { color: var(--ink); }
.highlight-lightblue .highlight-icon { background: rgba(43,38,32,.06); }

.highlight-colortint { background: var(--sand); }
.highlight-colortint h3 { color: var(--espresso); }
.highlight-colortint p { color: var(--ink); }
.highlight-colortint .highlight-icon { background: rgba(43,38,32,.06); }

/* ============================================================
   28. HOME — journey step numbering
   ============================================================ */
.de-step { position: relative; }
.de-step .step-num {
  position: absolute; top: -6px; left: 50%;
  transform: translateX(18px);
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--clay);
  color: #fff;
  border-radius: 50%;
  font-family: var(--heading-font);
  font-size: 12px;
  box-shadow: 0 6px 14px -6px rgba(var(--clay-rgb), .6);
}

/* ============================================================
   29. HOME — FAQ card wrapper
   ============================================================ */
.faq-card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 12px 36px;
  height: 100%;
  box-shadow: 0 24px 50px -40px rgba(43,38,32,.3);
}
.faq-card .accordion-section-title { padding-left: 0; padding-right: 40px; }