/* ============================================================
   Divano - Modernization & Enhancement Layer  (2026)
   Non-destructive: loads AFTER the theme CSS and only refines
   quality (typography, contrast, overlays, buttons, motion).
   Identity, layout, colours and structure are preserved.
   To fully revert: remove the divano-modern.css & .js includes.
   ============================================================ */

:root {
  /* The site's ACTUAL identity tones (kept, only refined) */
  --dm-dark-1: #3e5252;   /* original gradient start (teal-green) */
  --dm-dark-2: #001416;   /* original gradient end (near-black teal) */
  --dm-accent: #e4d3c0;   /* original tan/beige accent */
  --dm-accent-soft: #d8c4a3;
  --dm-gold: #e4d3c0;     /* accent alias -> keeps identity (tan, not new gold) */
  --dm-gold-soft: #efe2d1;
  --dm-cream: #faf6ef;

  --dm-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dm-dur: 0.4s;
}

/* Smooth, calm scrolling */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ------------------------------------------------------------
   1 · TYPOGRAPHY  - same fonts, better rhythm & hierarchy
   ------------------------------------------------------------ */
.ot_custom_heading {
  letter-spacing: 0.14em !important;
  line-height: 1.18 !important;
  font-weight: 300 !important;
}
/* gentle fluid sizing for the big section titles */
h1.ot_custom_heading { font-size: clamp(1.9rem, 1.4rem + 1.9vw, 2.9rem) !important; }

.service-excerpt p,
.de_testi blockquote p {
  line-height: 1.8 !important;
  letter-spacing: 0.01em;
}

/* Section headings breathing room */
.servicesGrid .ot_custom_heading,
.processGrid .ot_custom_heading,
.testimonialsGrid .ot_custom_heading { margin-bottom: 0.2rem !important; }

/* ------------------------------------------------------------
   2 · SEPARATOR - refine the signature circle-dot
   ------------------------------------------------------------ */
.separator span i.fa-circle {
  color: var(--dm-gold) !important;
  font-size: 8px !important;
  position: relative;
}
.separator span::before,
.separator span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(28px, 6vw, 60px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--dm-gold));
}
.separator span { position: relative; display: inline-block; }
.separator span::before { right: 100%; margin-right: 12px; }
.separator span::after { left: 100%; margin-left: 12px; transform: scaleX(-1); }

/* ------------------------------------------------------------
   3 · BUTTONS - same shape, modern interaction
   ------------------------------------------------------------ */
.btn-line,
a.btn-line {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  letter-spacing: 0.18em !important;
  transition: color var(--dm-dur) var(--dm-ease),
              border-color var(--dm-dur) var(--dm-ease),
              transform var(--dm-dur) var(--dm-ease) !important;
}
.btn-line::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--dm-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--dm-ease);
}
.btn-line:hover::before { transform: scaleX(1); transform-origin: left; }
.btn-line:hover {
  color: var(--dm-dark-2) !important;
  border-color: var(--dm-gold) !important;
  transform: translateY(-2px);
}
.btn-line:active { transform: translateY(0); }
.btn-line:focus-visible {
  outline: 2px solid var(--dm-gold);
  outline-offset: 3px;
}
/* animated arrow after Read More buttons */
.btn-fullwidth::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.5em;
  transition: transform var(--dm-dur) var(--dm-ease);
}
.btn-fullwidth:hover::after { transform: translateX(5px); }

/* Hero Revolution-Slider button - subtle lift only (RS controls colours) */
.rev-btn { transition: transform 0.3s var(--dm-ease) !important; }
.rev-btn:hover { transform: translateY(-2px); }

/* ------------------------------------------------------------
   4 · SERVICE CARDS (What We Do) - richer overlay + image zoom
   ------------------------------------------------------------ */
.box-four-columns {
  overflow: hidden;
  transition: transform var(--dm-dur) var(--dm-ease),
              box-shadow var(--dm-dur) var(--dm-ease);
  background-size: cover !important;
  background-position: center !important;
}
/* Six services, not four: at the theme's 25% the band read 4 + a half-empty
   row of 2. Three across gives two full rows. Above 992px only - below that
   the theme stacks them and the phone layer turns them into a swipe rail. */
@media (min-width: 993px) {
  .servicesGrid .display-table .box-four-columns { width: 33.3333%; }
}
.box-four-columns:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(0, 20, 22, 0.45);
}
/* zoom the background image on hover via a pseudo layer */
.box-four-columns::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform 0.9s var(--dm-ease);
  z-index: 0;
}
.box-four-columns:hover::after { transform: scale(1.08); }
.box-four-columns > * { position: relative; z-index: 2; }
/* deeper, cleaner overlay for text legibility */
.box-four-columns .mask-overlay {
  background: linear-gradient(to top,
    rgba(0, 20, 22, 0.92) 0%,
    rgba(0, 20, 22, 0.55) 45%,
    rgba(0, 20, 22, 0.2) 100%) !important;
  opacity: 1 !important;
  z-index: 1 !important;
  transition: background var(--dm-dur) var(--dm-ease);
}
.box-four-columns:hover .mask-overlay {
  background: linear-gradient(to top,
    rgba(0, 20, 22, 0.94) 0%,
    rgba(0, 20, 22, 0.6) 50%,
    rgba(0, 20, 22, 0.25) 100%) !important;
}
.box-four-columns h3 {
  letter-spacing: 0.06em;
  transition: color var(--dm-dur) var(--dm-ease);
}

/* ------------------------------------------------------------
   5 · PROCESS circles - refined hover & transition
   ------------------------------------------------------------ */
.process-circle-textonly li .content-mid,
.tab_steps .de_nav li .content-mid {
  transition: transform var(--dm-dur) var(--dm-ease),
              background var(--dm-dur) var(--dm-ease),
              color var(--dm-dur) var(--dm-ease),
              box-shadow var(--dm-dur) var(--dm-ease) !important;
}
.process-circle-textonly li:hover .content-mid {
  transform: translateY(-5px);
  box-shadow: 0 14px 34px rgba(0, 20, 22, 0.4);
}
.de_tab_content_inner { transition: opacity 0.5s var(--dm-ease); }

/* the active ring (2px border) and hover lift were clipped by the theme's
   overflow:hidden on the nav - let the circles breathe */
.de_tab.tab_steps .de_nav { overflow: visible !important; padding-top: 8px !important; }

/* ---- Process timeline line ----
   The theme drew a vertical stub under every circle (.v-border) meeting a
   horizontal rule at the TOP of the description area, so the "line" dangled
   BELOW the circles. Kill both and draw one continuous rule that runs through
   the vertical CENTRE of the circles, behind them (classic timeline look). */
.de_tab.tab_steps .de_nav li .v-border { display: none !important; }
.de_tab.tab_steps .de_tab_content { border-top: none !important; padding-top: 0 !important; }

@media (min-width: 993px) {
  .tab_steps .de_nav.process-circle-textonly { position: relative; }
  .tab_steps .de_nav.process-circle-textonly::before {
    content: "";
    position: absolute;
    left: 8%; right: 8%;
    /* 8px nav padding-top + half of the 140px circle = centre of the row */
    top: 78px;
    height: 1px;
    background: rgba(228, 211, 192, 0.4);
    z-index: 0;
  }
  .tab_steps .de_nav.process-circle-textonly li { position: relative; z-index: 1; }
}

/* Process - only the ACTIVE step's description shows (the tabs JS
   toggles them; forcing display:block here used to stack all five).
   The text sits in its own quiet panel - it was unreadable raw over
   the busy fixed background. */
.tab_steps .de_tab_content_inner p {
  max-width: 720px;
  margin: 40px auto 0 !important;
  padding: 26px 32px;
  text-align: center !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
  color: #f3ecdf !important;
  /* translucent dark-teal glass - deliberately a different family from the
     tan circles so the section no longer reads as one repeated colour */
  background: rgba(5, 26, 28, 0.46);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(228, 211, 192, 0.22);
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(0, 20, 22, 0.5);
}

/* ------------------------------------------------------------
   6 · TESTIMONIALS - equal heights, rounded cards, ambient glow
   ------------------------------------------------------------ */
.de_testi blockquote p { color: #f3ecdf !important; }
.de_testi { transition: transform var(--dm-dur) var(--dm-ease); }

/* Equal heights: stretch every layer of the carousel item (Owl v1).
   Owl sets display:block inline on the wrapper - !important is required. */
.testimonial__carousel .owl-wrapper { display: flex !important; }
.testimonial__carousel .owl-item { display: flex !important; float: none !important; }
.testimonial__carousel .item { display: flex; width: 100%; }
.testimonial__carousel .de_testi { display: flex; width: 100%; margin-bottom: 0; }
.testimonial__carousel .de_testi blockquote { display: flex; flex-direction: column; width: 100%; }
/* pin the client name to the bottom so all cards align */
.testimonial__carousel .de_testi_by { margin-top: auto !important; padding-top: 16px; }

/* Rounded card + hairline border in the identity tan */
.de_testi blockquote {
  position: relative;
  border-radius: 14px !important;
  border: 1px solid rgba(228, 211, 192, 0.16) !important;
  box-shadow: 0 14px 40px rgba(0, 20, 22, 0.35);
  transition: transform var(--dm-dur) var(--dm-ease),
              border-color var(--dm-dur) var(--dm-ease),
              box-shadow var(--dm-dur) var(--dm-ease);
}
.de_testi blockquote:before { border-radius: 10px; }

/* Ambient glow - a slow breathing halo behind each card */
.de_testi blockquote::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 34px rgba(228, 211, 192, 0.22);
  opacity: 0.25;
  animation: dm-testi-glow 4.5s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes dm-testi-glow {
  from { opacity: 0.15; }
  to   { opacity: 0.85; }
}

/* Hover: gentle lift + brighter edge */
.de_testi:hover blockquote {
  transform: translateY(-5px);
  border-color: rgba(228, 211, 192, 0.45) !important;
  box-shadow: 0 22px 55px rgba(0, 20, 22, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .de_testi blockquote::after { animation: none; opacity: 0.4; }
  .de_testi:hover blockquote { transform: none; }
}

/* ------------------------------------------------------------
   7 · HEADER - shrink + blur + shadow on scroll
   ------------------------------------------------------------ */
.site-header { transition: all var(--dm-dur) var(--dm-ease); }
body.dm-scrolled .site-header {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(0, 20, 22, 0.25);
}
body.dm-scrolled .site-header .info { /* keep top bar tidy when shrunk */
  transition: max-height var(--dm-dur) var(--dm-ease);
}
#mainmenu > li > a {
  position: relative;
  transition: color var(--dm-dur) var(--dm-ease);
}
/* animated underline on nav links - the 11px caps sit in the middle
   of a 33px line-height inside a padded box, so hang the line off the
   box centre (tracks the glyphs in both full and shrunk header states) */
#mainmenu > li > a::after {
  content: "";
  position: absolute;
  left: 20px; right: 0; top: calc(50% + 10px);
  height: 1.5px;
  background: var(--dm-gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dm-dur) var(--dm-ease);
}
#mainmenu > li > a:hover::after,
#mainmenu > li.current-menu-item > a::after { transform: scaleX(1); }
/* 980–1199px: the theme swaps the link padding to 5px each side */
@media (min-width: 980px) and (max-width: 1199px) {
  #mainmenu > li > a::after { left: 5px; right: 5px; }
}

/* ------------------------------------------------------------
   7b · dmRiseIn - soft staggered rise for WOW-triggered cards
   ------------------------------------------------------------ */
@keyframes dmRiseIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dmRiseIn {
  animation-name: dmRiseIn;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  animation-fill-mode: both;
}
@media (prefers-reduced-motion: reduce) {
  .dmRiseIn { animation: none; visibility: visible !important; opacity: 1; }
}

/* ------------------------------------------------------------
   8 · SOCIAL ICONS - modern hover
   ------------------------------------------------------------ */
.social-list li a,
.footer .social-list li a {
  display: inline-flex;
  transition: color var(--dm-dur) var(--dm-ease),
              transform var(--dm-dur) var(--dm-ease);
}
.social-list li a:hover { color: var(--dm-gold-soft) !important; transform: translateY(-3px); }

/* ------------------------------------------------------------
   9 · IMAGES - soft loading + generic hover zoom in figures
   ------------------------------------------------------------ */
img { transition: opacity 0.6s var(--dm-ease); }
img.dm-lazy { opacity: 0; }
img.dm-lazy.dm-loaded { opacity: 1; }

/* ------------------------------------------------------------
   10 · BACK TO TOP - modern pill
   ------------------------------------------------------------ */
#back-to-top {
  transition: opacity var(--dm-dur) var(--dm-ease),
              transform var(--dm-dur) var(--dm-ease),
              background var(--dm-dur) var(--dm-ease) !important;
}
#back-to-top:hover { transform: translateY(-4px); }

/* ------------------------------------------------------------
   10b · PAGE TRANSITIONS - soft fade between pages
   ------------------------------------------------------------ */
body.dm-page-ready { animation: dmPageIn 0.5s var(--dm-ease); }
@keyframes dmPageIn { from { opacity: 0; } to { opacity: 1; } }
body.dm-page-out { opacity: 0; transition: opacity 0.26s var(--dm-ease); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  body.dm-page-ready { animation: none; }
  body.dm-page-out { opacity: 1; transition: none; }
}

/* ------------------------------------------------------------
   11 · SCROLL REVEAL - modern entrance (JS toggles .dm-in)
   ------------------------------------------------------------ */
.dm-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--dm-ease), transform 0.8s var(--dm-ease);
  transition-delay: var(--dm-delay, 0ms);
  will-change: opacity, transform;
}
.dm-reveal.dm-zoom { transform: scale(0.96); }
.dm-reveal.dm-scale { transform: scale(0.9); }
.dm-reveal.dm-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .dm-reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ------------------------------------------------------------
   11 · SUBHEADER (inner pages) - modern hero treatment
   Applies to: services, projects, service detail pages, privacy
   ------------------------------------------------------------ */
#subheader {
  position: relative;
  padding-top: 190px !important;
  padding-bottom: 120px !important;
  background-size: cover !important;
  background-position: center 40% !important;
  overflow: hidden;
}
#subheader::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(0,20,22,0.92) 10%, rgba(0,20,22,0.6) 55%, rgba(0,20,22,0.38) 100%);
  z-index: 0;
}
#subheader .container { position: relative; z-index: 1; }
#subheader .title-wrap { float: none !important; }
#subheader h1 {
  margin: 14px 0 0 !important;
  padding: 0 !important;
  font-family: 'Dosis', sans-serif !important;
  font-weight: 300 !important;
  font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem) !important;
  line-height: 1.1 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  color: #fff !important;
  animation: dmSubUp 0.9s var(--dm-ease) 0.15s both;
}
#subheader .crumb {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Dosis', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: rgba(228,211,192,0.7) !important;
  animation: dmSubUp 0.9s var(--dm-ease) 0.3s both;
}
#subheader .crumb a { color: rgba(228,211,192,0.7) !important; }
#subheader .crumb a:hover { color: #E4D3C0 !important; }
#subheader .crumb li.active { color: #E4D3C0 !important; }
@keyframes dmSubUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #subheader h1, #subheader .crumb { animation: none; }
}

/* ------------------------------------------------------------
   12 · TYPOGRAPHY-LUXE - three-layer pairing
   Display: Cormorant Garamond (serif) · Labels: Dosis · Body: Open Sans
   ------------------------------------------------------------ */
h1.ot_custom_heading,
#subheader h1,
.hm-hero__title,
.cs-hero__title,
.cs-sh__t,
.cs-cta h2,
.ab-hero h1,
.ab h2,
.ct-hero h1,
.ct h2,
.pf-card__name,
.cs-tl__txt h3,
.cs-pal__card h3 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
}

/* serif renders smaller than Dosis - give the big titles more presence */
.cs-hero__title { font-size: clamp(2.9rem, 1.8rem + 4.8vw, 5.2rem) !important; line-height: 1.06 !important; }
/* home hero headline: sized in px (immune to fluid rem) so it never passes two lines */
.hm-hero__title { font-size: clamp(19px, 3.9vw, 56px) !important; line-height: 1.12 !important; }
h1.ot_custom_heading { font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.2rem) !important; }
#subheader h1 { font-size: clamp(2.6rem, 1.8rem + 3.2vw, 4.2rem) !important; }
.cs-sh__t, .ab h2, .ct h2 { font-size: clamp(2rem, 1.5rem + 2.2vw, 2.9rem) !important; }

/* statistics numerals in light serif */
.cs-stat__n { font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 300 !important; }

/* testimonials read as spoken words - serif italic */
.de_testi blockquote p,
.ab-quote p {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic;
  font-size: 20px !important;
  line-height: 1.75 !important;
  letter-spacing: 0.01em !important;
}

/* calmer, wider body rhythm site-wide */
body { letter-spacing: 0.012em; }
p { line-height: 1.85; }

/* ------------------------------------------------------------
   13 · FOOTER - modern refresh
   Kills the dated hairlines-under-everything look; quiet tan
   eyebrow headings, animated links, pill social buttons.
   ------------------------------------------------------------ */
footer { border-top: 1px solid rgba(228, 211, 192, 0.08); }
footer .main-footer { padding-top: 92px !important; }

/* logo + blurb column */
footer .widget_custom_html img[src*="divano-logo"] { max-width: 168px; opacity: 0.95; }
footer .textwidget { color: #a9b8b3; line-height: 1.9; }

/* widget headings -> quiet tan eyebrows */
footer .widget h3 {
  font-family: 'Dosis', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: var(--dm-gold) !important;
  margin-bottom: 26px !important;
}

/* nav / services lists: no separator lines, animated links */
footer .widget_nav_menu li,
footer .widget_categories li,
footer .widget_pages li,
footer .widget_meta li {
  border-bottom: 0 !important;
  padding: 0 !important;
  margin: 0 0 13px !important;
}
footer .widget_nav_menu li a {
  position: relative;
  display: inline-block;
  color: #b9c6c2 !important;
  transition: color var(--dm-dur) var(--dm-ease),
              transform var(--dm-dur) var(--dm-ease);
}
footer .widget_nav_menu li a::after {
  content: "";
  position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: var(--dm-gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dm-dur) var(--dm-ease);
}
footer .widget_nav_menu li a:hover { color: var(--dm-gold-soft) !important; transform: translateX(4px); }
footer .widget_nav_menu li a:hover::after { transform: scaleX(1); }

/* contact block: no hairlines, tan labels, roomier rows */
footer address { margin-top: 0 !important; }
footer address span, footer address div {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 12px !important;
  color: #a9b8b3;
}
footer address span strong {
  color: var(--dm-gold) !important;
  font-weight: 600;
  font-family: 'Dosis', sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  min-width: 64px;
}
footer address a { color: #d6e0dc !important; }
footer address a:hover { color: var(--dm-gold) !important; }

/* social icons -> bordered pills with lift, one tight row */
footer .social-icons { margin-top: 22px; }
footer .social-icons ul {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
footer .social-icons ul li { margin: 0 !important; padding: 0 !important; float: none !important; }
footer .social-icons ul li a {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: 34px !important; height: 34px !important;
  border: 1px solid rgba(228, 211, 192, 0.22);
  border-radius: 50% !important;
  color: #d6e0dc !important;
  transition: color var(--dm-dur) var(--dm-ease),
              background var(--dm-dur) var(--dm-ease),
              border-color var(--dm-dur) var(--dm-ease),
              transform var(--dm-dur) var(--dm-ease);
}
footer .social-icons ul li a:hover {
  background: var(--dm-gold);
  border-color: var(--dm-gold);
  color: #001416 !important;
  transform: translateY(-4px);
}

/* ------------------------------------------------------------
   14 · MOBILE HEADER & MENU - identity-matched (theme forces
   solid #000 and a grey hamburger below 993px; replace both)
   ------------------------------------------------------------ */
@media only screen and (max-width: 992px) {
  header, header.fixed, header.transparent, header.header-bg,
  header.de_header_2 {
    background: linear-gradient(180deg, rgba(8, 28, 30, 0.97), rgba(10, 32, 34, 0.94)) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(228, 211, 192, 0.10);
    box-shadow: 0 10px 30px rgba(0, 10, 11, 0.35);
  }

  /* hamburger: quiet tan-outlined square instead of a grey block */
  #menu-btn {
    background: transparent !important;
    border: 1px solid rgba(228, 211, 192, 0.4);
    border-radius: 6px;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    margin-top: 6px;
    line-height: 42px !important;
    transition: background 0.3s, border-color 0.3s;
  }
  #menu-btn:before {
    color: #E4D3C0 !important;
    font-size: 20px !important;
    line-height: 42px !important;
  }
  #menu-btn:hover, #menu-btn.active {
    background: rgba(228, 211, 192, 0.12) !important;
    border-color: #E4D3C0;
  }
  #menu-btn:hover:before { color: #E4D3C0 !important; }

  /* open menu: opaque identity panel with generous touch targets */
  header nav { clear: both; }
  #mainmenu {
    /* the lighter identity green, slightly see-through over the page behind it.
       the blur keeps the labels readable whatever is scrolling underneath;
       the solid first line is the fallback where backdrop-filter is missing. */
    background: #3e5252 !important;
    background: rgba(62, 82, 82, 0.82) !important;
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    border: 1px solid rgba(228, 211, 192, 0.20);
    border-radius: 10px;
    padding: 8px 20px !important;
    margin: 14px 0 8px !important;
    box-shadow: 0 24px 50px rgba(0, 10, 11, 0.45);
  }
  /* CLOSED by default on mobile; #menu-btn (designesia.js) toggles it via
     slideDown / slideUp. Must NOT force display with !important, or slideUp's
     inline display:none can't collapse the panel. The li below are
     float:none / display:block, so the ul wraps them without flow-root. */
  #mainmenu { display: none; }
  #mainmenu > li { float: none !important; display: block !important; width: 100%; }
  #mainmenu > li { border-bottom: 1px solid rgba(228, 211, 192, 0.09) !important; }
  #mainmenu > li:last-child { border-bottom: 0 !important; }
  #mainmenu > li > a {
    padding: 17px 4px !important;
    font-size: 14.5px !important;
    letter-spacing: 0.22em !important;
  }
  /* the desktop underline animation makes no sense in a stacked list */
  #mainmenu > li > a::after { display: none; }
  /* the old theme paints a flat #111 slab behind the tapped row (style_2.css) -
     a black block on the green panel. keep the feedback, drop the black. */
  #mainmenu a:hover,
  #mainmenu a:focus,
  #mainmenu a:active {
    background: rgba(228, 211, 192, 0.12) !important;
    border-radius: 6px;
  }
}

/* subfooter: hairline divider instead of a solid black slab */
.subfooter {
  background: transparent !important;
  border-top: 1px solid rgba(228, 211, 192, 0.10) !important;
  color: #8ba09b !important;
  font-family: 'Dosis', sans-serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.subfooter a { color: #b9c6c2 !important; }
.subfooter a:hover { color: var(--dm-gold) !important; }

/* ============================================================
   Standalone language switch (mobile, outside the drawer) +
   footer address → Google-Maps link
   ============================================================ */
.lang-switch { display: none; }
@media (max-width: 992px) {
  .lang-switch {
    display: inline-flex; align-items: center; justify-content: center;
    float: right; height: 36px; min-width: 42px; margin: 8px 10px 0 0; padding: 0 13px;
    border: 1px solid rgba(228, 211, 192, 0.55); border-radius: 30px;
    background: rgba(255, 255, 255, 0.05); color: #E4D3C0 !important;
    font-family: 'Dosis', 'Segoe UI', Tahoma, Arial, sans-serif; font-weight: 700; font-size: 15px; line-height: 1;
    letter-spacing: 0.04em; text-decoration: none !important;
    transition: background .3s, color .3s, border-color .3s;
  }
  .lang-switch:hover, .lang-switch:focus { background: #E4D3C0; color: #001416 !important; border-color: #E4D3C0; }
  /* Arabic (RTL): hamburger sits on the left, so the button mirrors to the left */
  [dir="rtl"] .lang-switch { float: left; margin: 8px 0 0 10px; }
  /* the in-drawer language item is replaced by this standalone button on mobile */
  #mainmenu .menu-item-lang { display: none !important; }
}
/* desktop: circle the AR/EN glyphs so the item reads as a button while the
   link itself keeps the exact nav-row layout. The glyph row sits 10px right
   of box centre in LTR (20px left padding, none right) and ~1.5px below
   vertical centre (25px top / 22px bottom padding) - same geometry the
   underline ::after tracks. */
@media (min-width: 993px) {
  /* a wide gutter separates the language button from the nav links */
  #mainmenu > li.menu-item-lang { margin-left: 45px; }
  [dir="rtl"] #mainmenu > li.menu-item-lang { margin-left: 0; margin-right: 45px; }
  #mainmenu > li.menu-item-lang > a { position: relative; color: #001416 !important; }
  #mainmenu > li.menu-item-lang > a::after { display: none; }
  #mainmenu > li.menu-item-lang > a::before {
    content: "";
    position: absolute;
    z-index: -1; /* the white fill sits behind the glyphs */
    left: calc(50% + 10px);
    top: calc(50% + 1.5px);
    width: 60px;
    height: 30px;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid #001416;
    border-radius: 0;
    transition: background .3s, border-color .3s;
  }
  #mainmenu > li.menu-item-lang > a:hover::before,
  #mainmenu > li.menu-item-lang > a:focus::before { background: #E4D3C0; border-color: #E4D3C0; }
  /* Arabic (RTL): the 20px gutter padding mirrors, so the glyphs sit left of centre */
  [dir="rtl"] #mainmenu > li.menu-item-lang > a::before { left: calc(50% - 10px); }
}
/* footer address keeps its look but reads as a tappable Maps link */
.ct-map-link { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(228, 211, 192, 0.4); transition: color .3s, border-color .3s; }
.ct-map-link:hover { color: #E4D3C0; border-bottom-color: #E4D3C0; }

/* ============================================================
   Navbar locked to the compact (scrolled) size on desktop -
   no tall-then-shrink; forces the .smaller dimensions in both
   states so the JS toggle produces no size change.
   ============================================================ */
@media only screen and (min-width: 993px) {
  .site-header.de_header_2,
  .site-header.de_header_2:not(.header-bottom):not(.side-header) { height: 70px !important; }
  .site-header.de_header_2 div#logo { height: 70px !important; line-height: 70px !important; max-width: 300px !important; }
  .site-header.de_header_2 div#logo a img { max-height: 46px !important; width: auto !important; }
  .site-header.de_header_2 #mainmenu > li > a { padding-top: 18px !important; padding-bottom: 17px !important; }
  .site-header.de_header_2 .info { display: none !important; }
}