/*
Theme Name: Lumoria Custom
Theme URI: https://lumoria.com
Author: Lumoria Design Team
Description: Custom WordPress theme for Khalaf Sons Real Estate — a Bahrain property owner and management company. Built from a static HTML design with ACF-powered dynamic content.
Version: 1.0.0
License: GPL v2 or later
Text Domain: lumoria-custom
*/

/* =========================================================
   LUMORIA — Design System
   Manrope · Cream + Ink + Gold
   All CSS below is the original static design, unmodified.
  ========================================================= */

:root {
  --bg-cream:      #F5F4F2;
  --ink:           #1D1235;
  --ink-soft:      #04272F;
  --gold:          #44BDA1;
  --gold-dark:     #04272F;
  /* Legacy component palette; values retained to preserve rendered colors. */
  --lum-gold:      #44BDA1;
  --lum-gold-dark: #04272F;
  --lum-ink:       #1D1235;
  --lum-sub: var(--text-muted);
  --white:         #ffffff;
  --overlay-1:     rgba(29,18,53,.35);
  --overlay-2:     rgba(29,18,53,.55);
  --border-soft:   rgba(29,18,53,.08);

  --container-w:   1450px;
  --radius-lg:     34px;
  --radius-md:     18px;
  --radius-pill:   999px;

  --transition-fast: .25s ease;
  --transition-med:  .5s cubic-bezier(.4,0,.2,1);

  /* ---------- TYPOGRAPHY TOKENS ----------
     One system for the whole site. Every font-family, size, weight and
     line-height below resolves back to these; nothing should hard-code a
     family again. The Customizer (Appearance > Customize > Typography)
     overrides --font-primary, --text-base, the heading weight and the
     text colours by re-declaring them on :root, so keep these as the
     single source of truth. */

  --font-primary:  'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  /* Legacy aliases — the templates still reference these two names. */
  --font-display:  var(--font-primary);
  --font-body:     var(--font-primary);

  /* Type scale */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-lg:    18px;
  --text-xl:    20px;
  --text-2xl:   24px;
  --text-3xl:   30px;
  --text-4xl:   36px;
  --text-5xl:   48px;
  --text-6xl:   60px;
  --text-7xl:   72px;

  /* Fluid heading sizes — scale between mobile and desktop without a
     media query per breakpoint. --type-scale lets the Customizer size the
     whole heading ramp up or down without touching individual rules. */
  --type-scale: 1;
  --text-h1:    clamp(calc(36px * var(--type-scale)), calc(4.4vw * var(--type-scale)), calc(56px * var(--type-scale)));
  --text-h2:    clamp(calc(30px * var(--type-scale)), calc(3.4vw * var(--type-scale)), calc(42px * var(--type-scale)));
  --text-h3:    clamp(calc(26px * var(--type-scale)), calc(2.4vw * var(--type-scale)), calc(30px * var(--type-scale)));
  --text-h4:    calc(var(--text-2xl) * var(--type-scale));
  --text-h5:    var(--text-xl);
  --text-h6:    var(--text-base);
  --text-hero:  clamp(calc(36px * var(--type-scale)), calc(5vw * var(--type-scale)), calc(72px * var(--type-scale)));

  /* Weights — 400 body, 500 UI, 600 headings/emphasis, 700 sparingly. */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-heading:  var(--fw-semibold);

  /* Line heights */
  --lh-tight:    1.1;
  --lh-heading:  1.25;
  --lh-snug:     1.3;
  --lh-body:     1.65;
  --lh-prose:    1.7;
  --lh-relaxed:  1.75;

  /* Letter spacing — negative on display sizes, positive only on eyebrows. */
  --ls-hero:     -0.035em;
  --ls-h1:       -0.03em;
  --ls-h2:       -0.025em;
  --ls-normal:   normal;
  --ls-eyebrow:  0.08em;

  /* Text colours (overridable from the Customizer) */
  --text-heading: var(--ink);
  --text-body:    var(--ink);
  --text-muted:   rgba(4,39,47,.7);
  --text-link:    var(--gold);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* =========================================================
   TYPOGRAPHY BASE
   Element-level defaults for the whole site. Component rules
   further down only override what genuinely differs.
   ========================================================= */

body{
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-normal);
  color: var(--text-body);
  text-rendering: optimizeLegibility;
}

p{
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-prose);
  margin: 0 0 1em;
}
p:last-child{ margin-bottom: 0; }

h1, h2, h3, h4, h5, h6{
  font-family: var(--font-primary);
  font-weight: var(--fw-heading);
  letter-spacing: var(--ls-normal);
  margin: 0 0 .5em;
  text-wrap: balance;
  /* Colour is deliberately inherited: headings sit on both cream and ink
     panels, and the Customizer's heading colour is applied separately. */
}

h1{ font-size: var(--text-h1); line-height: var(--lh-tight);   letter-spacing: var(--ls-h1); }
h2{ font-size: var(--text-h2); line-height: 1.15;              letter-spacing: var(--ls-h2); }
h3{ font-size: var(--text-h3); line-height: var(--lh-heading); }
h4{ font-size: var(--text-h4); line-height: var(--lh-snug); }
h5{ font-size: var(--text-h5); line-height: var(--lh-snug); }
h6{ font-size: var(--text-h6); line-height: var(--lh-snug); }

/* Form controls and buttons do not inherit the family on their own. */
button,
input,
optgroup,
select,
textarea{
  font-family: var(--font-primary);
  letter-spacing: var(--ls-normal);
}

input,
textarea,
select{
  font-size: 15px;
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
}
input::placeholder,
textarea::placeholder{ font-size: 15px; font-weight: var(--fw-regular); }
select{ font-weight: var(--fw-medium); }

label{
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

table{ font-size: var(--text-sm); }
th{ font-weight: var(--fw-semibold); }

small{ font-size: 13px; }
strong, b{ font-weight: var(--fw-semibold); }

/* Small section labels — the one place uppercase and open tracking belong. */
.eyebrow,
.lum-craft-tag,
.lum-cts-tag,
.lum-ask-tag,
.lum-ask-form-tag,
.lum-contact-cta-tag{
  font-size: 13px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  line-height: var(--lh-snug);
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.screen-reader-text,
.lumoria-honeypot{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

.container{
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-weight: var(--fw-semibold); font-size: var(--text-sm);
  padding: 8px 8px 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  white-space:nowrap;
  transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
  line-height: 1;
  letter-spacing: 0;
}
.btn .icon-circle{
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition: transform var(--transition-fast);
}
.btn-primary{ background: var(--gold); color: var(--white); }
.btn-primary .icon-circle{ background: var(--white); color: var(--gold); }
.btn-primary:hover{ background: var(--gold-dark); }
.btn-primary:hover .icon-circle{ transform: rotate(45deg); }

/* ========== LANGUAGE SWITCHER ========== */
.lang-switcher{
  display:flex;
  align-items:center;
  gap:2px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  padding: 3px;
  background: var(--white);
}
.lang-link{
  display:inline-flex;
  align-items:center;
  padding: 6px 14px;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--ink-soft);
  border-radius: var(--radius-pill);
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space:nowrap;
  text-decoration:none;
}
.lang-link.is-active{
  background: var(--gold);
  color: var(--white);
}
.lang-link:not(.is-active):hover{
  background: var(--bg-cream);
  color: var(--ink);
}

/* Mobile language switcher — lives in .header-actions alongside the
   CTA icon and hamburger button on mobile/small devices (the desktop
   .lang-switcher pill hides at this breakpoint instead). */
.mobile-lang-switcher{
  display:none;
  gap:6px;
  align-items:center;
}
@media (max-width: 1200px){
  .mobile-lang-switcher{
    display:flex;
  }
  .lang-switcher{
    display:none;
  }
  .mobile-lang-switcher .lang-link{
    padding: 5px 9px;
    font-size: .7rem;
  }
}

.btn-light{ background: var(--white); color: var(--ink); }
.btn-light .icon-circle{ background: var(--gold); color: var(--white); }
.btn-light:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.btn-light:hover .icon-circle{ transform: rotate(45deg); }

/* ---------- HERO CALLS TO ACTION ----------
   The two banner buttons share one shape — same height, padding rhythm, type
   and icon size — so the pair reads as a set, and colour alone carries the
   hierarchy: the primary action is solid mint, the secondary sits on white.
   Padding is logical, so the leading icon stays on the correct side in Arabic
   without a mirrored override. */
.hero-actions .btn-look,
.hero-actions .btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 12px;
  height: 54px;
  padding-inline: 9px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast),
              transform var(--transition-fast), box-shadow var(--transition-fast);
}

.hero-actions .icon-circle {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 13px;
  transition: transform var(--transition-fast);
}

/* Primary — the action most visitors want. Ink on mint rather than white on
   mint: white would only reach 2.3:1 against this green, well under the 4.5:1
   WCAG AA needs at this size, while ink clears it at 6.8:1. On hover the fill
   goes dark and the text flips to white, which stays legible at 15.7:1. */
.hero-actions .btn-look {
  background: var(--gold);
  color: var(--ink-soft);
}
.hero-actions .btn-look .icon-circle { background: var(--white); color: var(--ink-soft); }
.hero-actions .btn-look:hover { background: var(--gold-dark); color: var(--white); }

/* Secondary — identical shape, quieter colour. */
.hero-actions .btn-light {
  background: var(--white);
  color: var(--ink);
}
.hero-actions .btn-light .icon-circle { background: var(--gold); color: var(--white); }

/* One soft shadow for both, so the pair lifts off the photograph evenly. */
.hero-actions > a { box-shadow: 0 10px 24px -12px rgba(4, 39, 47, .55); }
.hero-actions > a:hover { box-shadow: 0 16px 30px -14px rgba(4, 39, 47, .6); }

.hero-actions > a:hover { transform: translateY(-2px); }
.hero-actions > a:hover .icon-circle { transform: rotate(45deg); }
.hero-actions > a:active { transform: translateY(0); }
.hero-actions > a:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .hero-actions > a,
  .hero-actions .icon-circle { transition: none; }
  .hero-actions > a:hover { transform: none; }
  .hero-actions > a:hover .icon-circle { transform: none; }
}
.btn-look-reverse {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  align-items: center;
  gap: 14px;
  background: #44BDA1;
  color: #fff;
  font-weight: var(--fw-semibold);
  font-size: 15px;
  border-radius: 999px;
  padding-block: 8px;
  padding-inline: 8px 30px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.25s ease, transform 0.15s ease;
  line-height: 1;
  letter-spacing: 0;
}
.btn-look-reverse:hover {
  background: #fff;
  color: #1D1235;
  transform: translateY(-1px);
}
.btn-look-reverse .icon-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.25s ease;
}
.btn-look-reverse:hover .icon-circle {
  background: #44BDA1;
}
.btn-look-reverse .icon-circle i {
  color: var(--lum-gold, #44BDA1);
  font-size: 14px;
  transition: color 0.25s ease;
}
.btn-look-reverse:hover .icon-circle i {
  color: #fff;
}

.btn-outline{
  display:inline-flex; align-items:center; gap:10px;
  font-weight: var(--fw-semibold); font-size: 15px;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--white);
  transition: background var(--transition-fast), color var(--transition-fast);
  line-height: 1;
  letter-spacing: 0;
}
.btn-outline:hover{ background: var(--gold); border-color: var(--gold); color: var(--white); }

.section{ padding: 90px 0; }

.section-header{
  text-align: center;
  margin-bottom: 50px;
  max-width: 650px;
  margin-inline: auto;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  background: rgba(68,189,161,.10);
  color: var(--gold-dark);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform:uppercase;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  margin-bottom: 18px;
}
.eyebrow-light{ background: rgba(255,255,255,.12); color: var(--white); }

.heading{
  font-family: var(--font-display);
  font-weight: var(--fw-heading);
  font-size: var(--text-h2);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 16px;
  letter-spacing: var(--ls-h2);
}

.lead{
  font-size: var(--text-base);
  line-height: var(--lh-prose);
  color: var(--ink-soft);
  max-width: 480px;
}
.lead-center{ margin-inline: auto; text-align:center; }

.site-header{
  position: sticky;
  top: 0;
  /* Must stay above .nav-backdrop (z-index:150) — .site-header creates its
     own stacking context, so .primary-nav's z-index:200 can't escape it on
     its own; without this the backdrop sat on top of the open mobile menu
     and swallowed every tap on a nav link. */
  z-index: 200;
  background: var(--bg-cream);
  transition: box-shadow var(--transition-fast), padding var(--transition-fast);
}
.site-header.is-scrolled{ box-shadow: 0 4px 24px rgba(0,0,0,.06); }
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
  padding-block: 5px;
  transition: padding var(--transition-fast);
}
.site-header.is-scrolled .header-inner{ padding-block: 14px; }

.logo{
  display:flex;
  align-items:center;
  gap:8px;
  font-family: var(--font-display);
  font-weight:600;
  font-size: 1.55rem;
  letter-spacing: .5px;
  white-space:nowrap;
}
.logo .mark{
  width: 28px; height: 28px;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--ink);
  color: var(--gold);
  border-radius: 8px;
  font-size: .8rem;
  transform: rotate(45deg);
  flex-shrink:0;
}
.logo .mark i{ transform: rotate(-45deg); }

/* Custom logo from Customizer */
.logo .custom-logo{ height:100px; width:auto; display:block; }

.primary-nav{ display:flex; }
.primary-nav > ul{ display:flex; align-items:center; gap: clamp(20px, 2.2vw, 40px); }
.primary-nav a{
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: var(--ink);
  display:flex; align-items:center; gap:6px;
  padding: 6px 2px;
  position:relative;
  line-height: 1;
}
.primary-nav a::after{
  content:"";
  position:absolute; inset-inline-start:0; bottom:0;
  width:0; height:2px;
  background: var(--gold);
  transition: width var(--transition-fast);
}
.primary-nav a:hover::after,
.primary-nav li.is-current a::after{ width:100%; }
.primary-nav li.is-current a{ color: var(--gold); }

.header-actions{ display:flex; align-items:center; gap:14px; }

.phone-pill{
  display:flex; align-items:center; gap:10px;
  font-weight:500; font-size:.95rem;
  white-space:nowrap;
}
.phone-pill .icon-circle{
  width:42px; height:42px; border-radius:50%;
  background: var(--gold);
  color:var(--white);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

.menu-toggle{
  display:none;
  flex-direction:column; gap:5px;
  background:none; border:none; padding:8px;
}
.menu-toggle span{
  width:24px; height:2px; background: var(--ink);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.menu-toggle.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-active span:nth-child(2){ opacity:0; }
.menu-toggle.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.nav-backdrop{
  position: fixed; inset:0;
  background: rgba(0,0,0,.3);
  opacity:0; pointer-events:none;
  transition: opacity var(--transition-fast);
  z-index: 150;
}
.nav-backdrop.is-visible{ opacity:1; pointer-events:auto; }

.hero-wrap{ padding: 8px clamp(20px, 4vw, 48px) 60px; }

.hero{
  position:relative;
  border-radius: var(--radius-lg);
  overflow:hidden;
  min-height: 640px;
  height: min(78vh, 760px);
  isolation:isolate;
}

.hero-slide{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  opacity:0;
  transition: opacity 1.2s ease;
}
.hero-slide.is-active{ opacity:1; }
.hero-slide::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(
    115deg,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.65) 55%,
    rgba(0, 0, 0, 0.35) 100%);
}

.hero-content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items: flex-start;
  padding: 40px clamp(24px, 5vw, 64px);
  /* Wide enough to hold both calls to action on one line. The headline and
     copy are capped separately below so they keep their original measure —
     only the button row uses the extra width. */
  max-width: 760px;
}

.hero-badges{
  display:inline-flex;
  align-self:flex-start;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: var(--radius-pill);
  padding: 6px;
  margin-bottom: 28px;
}
.hero-badges .hero-badge-clip{
  display: inline-block;
  width: 260px;
  max-width: 60vw;
  overflow: hidden;
  vertical-align: middle;
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  padding: 7px 18px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.14);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.hero-badges .hero-badge-text{
  display: inline-block;
  white-space: nowrap;
  vertical-align: top;
  animation: heroBadgeScroll 14s linear infinite;
}
.hero-badges .hero-badge-clip:hover .hero-badge-text{
  animation-play-state: paused;
}
.hero-badges .hero-badge-copy{
  display: inline-block;
  white-space: nowrap;
}
.hero-badges .hero-badge-gap{
  display: inline-block;
  width: 36px;
}
@keyframes heroBadgeScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .hero-badges .hero-badge-text{ animation: none; }
}

.hero-title{
  font-family: var(--font-display);
  font-weight: var(--fw-heading);
  color: var(--white);
  font-size: var(--text-hero);
  line-height: 1.05;
  margin: 0 0 22px;
  letter-spacing: var(--ls-hero);
}

.hero-text{
  color: rgba(255,255,255,.88);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: var(--lh-body);
  max-width: 700px;
  margin: 0 0 36px;
  font-weight: var(--fw-regular);
}

.hero-actions{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:12px;
}
/* A label longer than the row can hold is trimmed rather than allowed to
   wrap the second button onto its own line; the icon keeps its full size. */
.hero-actions > a{ min-width:0; }
.hero-actions > a > span:last-child{
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (min-width: 769px){
  .hero-title,
  .hero-text{ max-width: 472px; }
}

.hero-fold{
  position:absolute;
  inset-inline-end:0;
  inset-block-end:0;
  width: clamp(140px, 18vw, 220px);
  height: clamp(140px, 18vw, 220px);
  background: var(--bg-cream);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  z-index:2;
}

.hero-dots{
  position:absolute;
  inset-inline-end: clamp(28px, 3vw, 48px);
  inset-block-end: clamp(24px, 2.6vw, 40px);
  z-index:3;
  display:flex;
  align-items:center;
  gap:10px;
}
.hero-dots button{
  width:9px; height:9px;
  border-radius:50%;
  background: rgba(29,18,53,.28);
  border:none;
  padding:0;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.hero-dots button.is-active{
  background: var(--gold);
  transform: scale(1.3);
}

/* ========== HERO PROPERTY SEARCH ========== */

/* The search card supplies the break at the bottom of the hero, so the corner
   fold is dropped here and the dots are lifted clear of the card and recoloured
   for the photo they now sit on. */
.hero-wrap--search .hero-fold{ display: none; }
.hero-wrap--search .hero-dots{ inset-block-end: calc(clamp(24px, 2.6vw, 40px) + 64px); }
.hero-wrap--search .hero-dots button{ background: rgba(255,255,255,.55); }
.hero-wrap--search .hero-dots button.is-active{ background: var(--white); }

.hero-search{
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1400px;
  margin: clamp(-78px, -5vw, -48px) auto 0;
}

.hero-search-card{
  width: 100%;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(29,18,53,.14);
  padding: clamp(16px, 1.6vw, 22px);
}

.hero-search-row{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
}

.hs-field{
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 170px;
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.hs-field--text{ flex: 3 1 340px; }
.hs-field--compact{ flex: 1 1 165px; }
.hs-field:hover{ border-color: rgba(68,189,161,.45); }
.hs-field:focus-within{
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(68,189,161,.15);
}

.hs-field-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  font-size: .95rem;
  color: var(--gold);
}

.hs-field input[type="search"],
.hs-field select{
  width: 100%;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: var(--ink);
  padding: 15px 18px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.hs-field--text input[type="search"]{ padding-inline-start: 0; }
.hs-field input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance: none; }
.hs-field input[type="search"]::placeholder{
  color: rgba(4,39,47,.55);
  font-weight: 400;
}

.hs-field--select select{ padding-inline-end: 42px; cursor: pointer; }
.hs-field--select select option{ color: var(--ink); }

.hs-caret{
  position: absolute;
  inset-inline-end: 16px;
  pointer-events: none;
  font-size: .7rem;
  color: var(--ink-soft);
  opacity: .6;
  transition: transform var(--transition-fast);
}
.hs-field--select:hover .hs-caret{ transform: translateY(2px); }

.hs-submit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 15px 30px;
  border: none;
  border-radius: 14px;
  background: var(--gold);
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  line-height: 1;
  letter-spacing: 0;
}
.hs-submit:hover{
  background: var(--gold-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(4,39,47,.22);
}
.hs-submit:active{ transform: translateY(0); }
.hs-submit-icon{ font-size: .9rem; }

/* Hint line doubles as the live result count for the current filters. */
.hs-foot{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 14px 4px 0;
}

.hs-hint{
  margin: 0;
  font-size: 13px;
  color: var(--lum-sub);
}
.hs-hint.is-empty{ color: #b4412f; }

.hs-clear{
  flex: 0 0 auto;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.hs-clear:hover{ color: var(--gold); }

/* A dropdown with nothing left to offer, and a search with no results, both
   read as unavailable rather than silently doing nothing. */
.hs-field select:disabled{ opacity: .55; cursor: not-allowed; }
.hs-submit:disabled{
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.hs-submit:disabled:hover{
  background: var(--gold);
  transform: none;
  box-shadow: none;
}

.hs-viewall{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 22px auto 0;
  padding: 0 4px;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--gold-dark);
  transition: color var(--transition-fast), gap var(--transition-fast);
}
.hs-viewall:hover{ color: var(--gold); gap: 12px; }
.hs-viewall i{ font-size: .78rem; }

@media (max-width: 1180px){
  .hs-field--text{ flex-basis: 100%; }
  .hs-submit{ flex: 1 1 200px; }
}

@media (max-width: 992px){
  .hero-wrap--search .hero-dots{ inset-block-end: calc(clamp(24px, 2.6vw, 40px) + 40px); }
  .hero-search{ margin-top: 20px; }
}

@media (max-width: 640px){
  .hero-wrap--search .hero-dots{ inset-block-end: clamp(24px, 2.6vw, 40px); }
  .hs-field,
  .hs-field--compact{ flex-basis: 100%; }
  .hs-submit{ flex-basis: 100%; }
  .hero-search-card{ border-radius: 16px; }
  .hs-field input[type="search"],
  .hs-field select{ padding: 13px 16px; font-size: .88rem; }
  .hs-submit{ padding: 14px 24px; }
  .hs-hint{ font-size: .74rem; }
}

.about{ background: var(--white); }

.about-grid{
  display: grid;
  grid-template-columns: 46% 54%;
  gap: 70px;
  align-items: stretch;
}

.about-media{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 100%;
}

.about-img-wrap{
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
}

.about-img-wrap img{
  width: 100%;
  height: 100%;
  min-height: 640px;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-med);
}

.about-img-wrap:hover img{ transform: scale(1.04); }

.about-media .badge{
  position: absolute;
  inset-inline-start: 28px;
  bottom: 28px;
}

.badge{
  border-radius: var(--radius-md);
  padding: 28px 36px;
  color: var(--white);
  max-width: 300px;
}
.badge-gold{ background: var(--gold); }

.badge-number{
  font-family: var(--font-display);
  font-weight: var(--fw-heading);
  font-size: var(--text-5xl);
  line-height: 1;
  display: block;
  margin-bottom: 8px;
}

.badge-label{
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-base);
  display: block;
}

.about-text{
  display: flex;
  flex-direction: column;
  padding-top: 6px;
}

.about-text .eyebrow{ margin-bottom: 18px; }
.about-text .heading{ margin-bottom: 36px; max-width: 640px; }

.tabs{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.tab{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-size: .9rem;
  font-weight: 500;
  font-family: var(--font-body);
  background: var(--bg-cream);
  color: var(--ink);
  border: 1px solid var(--border-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.tab .dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  display: inline-block;
  flex-shrink: 0;
}

.tab.is-active{
  background: var(--gold);
  color: var(--white);
  border-color: var(--gold);
}
.tab.is-active .dot{ background: var(--white); }
.tab:hover{ transform: translateY(-1px); }

.divider{
  height: 1px;
  width: 100%;
  background: var(--border-soft);
  margin-bottom: 36px;
}

.about-sub-grid{
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 40px;
  align-items: start;
}

.sub-media-wrap{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sub-media{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  overflow: hidden;
}

.sub-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-med);
}

.sub-media:hover img{ transform: scale(1.04); }

.panel{ display: none; }
.panel.is-visible{ display: block; animation: fadeIn .3s ease; }

@keyframes fadeIn{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}

.text-col .lead{
  font-size: var(--text-base);
  line-height: var(--lh-prose);
  color: var(--ink-soft);
  margin: 0 0 26px 0;
  max-width: 480px;
}

.checklist{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.checklist li{
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink);
}

.check-icon{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.check-icon svg{ width: 13px; height: 13px; stroke: var(--white); }

.chat-btn{
  display:inline-flex; align-items:center; gap:14px;
  background: var(--white); border-radius: var(--radius-pill);
  padding-block: 10px; padding-inline: 10px 26px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  font-weight: var(--fw-semibold); font-size: var(--text-sm); color: var(--ink);
  text-decoration:none; width:fit-content; cursor:pointer;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
  line-height: 1;
  letter-spacing: 0;
}
.chat-btn:hover{ box-shadow: 0 8px 22px rgba(0,0,0,.1); transform: translateY(-2px); }

.chat-btn .arrow-circle{
  width:40px; height:40px; border-radius:50%;
  background: var(--gold); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.chat-btn .arrow-circle svg{ width:18px; height:18px; }

.services{ background: var(--bg-cream); }

.services-carousel{
  position:relative;
  overflow:hidden;
}

.services-track{
  display:flex;
  gap:24px;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}

.services-track .service-card{
  min-width:calc(33.333% - 16px);
  flex-shrink:0;
}

.service-card{
  background: var(--white);
  border-radius: var(--radius-md);
  overflow:hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  cursor: default;
  border: 1px solid transparent;
}

.service-card-img{
  width:100%;
  height:200px;
  overflow:hidden;
}

.service-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform var(--transition-med);
}

.service-card:hover .service-card-img img{ transform:scale(1.06); }

.service-card:hover{
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 20px 40px rgba(0,0,0,.06);
}

.service-num{
  display: block;
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 600;
  color: rgba(68,189,161,.15);
  line-height: 1;
  margin-bottom: 18px;
  padding:24px 30px 0;
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.service-card:hover .service-num{
  color: rgba(68,189,161,.3);
  transform: translateY(-4px);
}

.service-title{
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xl);
  color: var(--ink);
  margin-bottom: 10px;
  padding:0 30px;
  line-height: var(--lh-snug);
}

.service-desc{
  font-size: .88rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 18px;
  padding:0 30px;
}

.service-link{
  font-size: .82rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: .03em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding:0 30px 28px;
}

.service-link i{ font-size: .7rem; transition: transform var(--transition-fast); }
.service-link:hover i{ transform: translateX(5px); }

.services-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:var(--white);
  border:none;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background var(--transition-fast), color var(--transition-fast);
  color:var(--ink);
  font-size: 15px;
  z-index:2;
  border-radius:50%;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: 0;
}

.services-btn:hover{ background:var(--gold); color:var(--white); }

.services-prev{ inset-inline-start:-24px; }
.services-next{ inset-inline-end:-24px; }

.effeff-section{
  background: var(--white);
  padding-bottom: 60px;
  position: relative;
  overflow: hidden;
}

.effeff-section .blueprint-bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 900px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.effeff-inner{
  max-width: 1600px;
  margin: 0 auto;
  padding: 60px 40px 100px;
  position: relative;
  z-index: 1;
}

.effeff-section .eyebrow-wrap{
  text-align: center;
  position: relative;
  height: 34px;
  margin-bottom: 20px;
}

.effeff-section .pill-tag{
  position: absolute;
  top: 0;
  left: 50%;
  background: #ffffff;
  border: 1px solid var(--border-soft);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 7px 20px;
  border-radius: 999px;
  white-space: nowrap;
}

.effeff-section .pill-one{
  transform: translateX(-50%);
}

.effeff-title{
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--fw-heading);
  margin: 0 0 44px;
  letter-spacing: var(--ls-h2);
  color: var(--ink);
  line-height: 1.15;
}

.effeff-filters{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 50px;
}

.effeff-filter-btn{
  display: flex;
  align-items: center;
  gap: 9px;
  background: #ffffff;
  border: 1px solid var(--border-soft);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  padding: 13px 24px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  line-height: 1;
  letter-spacing: 0;
}

.effeff-filter-btn .dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  transition: background 0.25s ease;
}

.effeff-filter-btn.active{
  background: var(--gold);
  border-color: var(--gold);
  color: #ffffff;
}

.effeff-filter-btn.active .dot{
  background: #ffffff;
}

.effeff-gallery{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 190px;
  grid-auto-flow: dense;
  gap: 24px;
}

.effeff-item{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #F7EBE2;
}

.effeff-item.effeff-wide{
  grid-column: span 2;
}

.effeff-item.effeff-tall{
  grid-row: span 2;
}

.effeff-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-med);
}

.effeff-item:hover img{ transform: scale(1.08); }

.effeff-label{
  position: absolute;
  inset-inline-start: 20px;
  bottom: 20px;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.effeff-item:hover .effeff-label{
  opacity: 1;
  transform: translateY(0);
}

.effeff-item.is-filtered{
  display: none;
}

.effeff-cta{
  text-align: center;
  margin-top: 2.5rem;
}

/* ---------- Latest News Section ---------- */
.news-section{
  background: var(--bg-cream);
  padding: 80px 0;
}

.news-header{
  margin-bottom: 40px;
}

.news-subtitle{
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--gold);
  letter-spacing: var(--ls-eyebrow);
  margin-bottom: 10px;
}

.news-title{
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--fw-heading);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: var(--ls-h2);
}

.news-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 30px;
}

/* Large Tablets */
@media (max-width: 1024px) {
    .news-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
}

/* Tablets */
@media (max-width: 768px) {
    .news-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .news-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.news-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.featured-card,
.side-card{
  background: var(--white);
  border-radius: 30px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.featured-card:hover,
.side-card:hover{
  transform: translateY(-5px);
}

.featured-card{
  padding: 25px;
}

.featured-card .card-image{
  width: 100%;
  height: 400px;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 25px;
}

.featured-card .card-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-meta{
  display: flex;
  gap: 20px;
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 15px;
}

.news-meta i{
  color: var(--gold);
  margin-inline-end: 5px;
}

.featured-card h3{
  font-family: var(--font-display);
  font-size: 26px;
  margin-bottom: 15px;
  line-height: 1.3;
  color: var(--ink);
}

.featured-card p{
  color: var(--ink-soft);
  line-height: 1.6;
  font-size: 16px;
}

.sidebar-list{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.side-card{
  display: flex;
  padding: 20px;
  align-items: center;
  gap: 20px;
  height: 100%;
}

.side-card .card-image{
  flex-shrink: 0;
  width: 160px;
  height: 120px;
  border-radius: 15px;
  overflow: hidden;
}

.side-card .card-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.side-card h3{
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink);
}

/* ---------- Service Detail Page ---------- */
.service-detail-container{
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 20px;
}

.service-detail-container .hero-banner{
  width: 100%;
  height: 500px;
  border-radius: 30px;
  overflow: hidden;
  margin-bottom: 50px;
}

.service-detail-container .hero-banner img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-detail-container .content-wrapper{
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 50px;
}

.service-detail-container .main-content h1,
.service-detail-container .main-content h2{
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 500;
  margin-bottom: 20px;
  color: var(--ink);
}

.service-detail-container .main-content h2{
  font-size: 28px;
  margin-top: 40px;
}

.service-detail-container .main-content p{
  color: var(--ink-soft);
  margin-bottom: 25px;
  font-size: 16px;
  line-height: 1.7;
}

.service-detail-container .icon-list{
  list-style: none;
  margin-bottom: 30px;
}

.service-detail-container .icon-list li{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--ink-soft);
  font-weight: 500;
}

.service-detail-container .icon-list i{
  color: var(--gold);
  font-size: 18px;
}

.service-detail-container .content-row{
  display: flex;
  gap: 30px;
  align-items: center;
  margin-top: 30px;
}

.service-detail-container .row-image{
  flex: 1;
  border-radius: 20px;
  overflow: hidden;
}

.service-detail-container .row-image img{
  width: 100%;
  display: block;
}

.service-detail-container .sidebar-card{
  background: var(--white);
  padding: 40px 30px;
  border-radius: 25px;
  margin-bottom: 30px;
}

.service-detail-container .sidebar-card h3{
  font-family: var(--font-display);
  font-size: 20px;
  margin-bottom: 25px;
  font-weight: 600;
  color: var(--ink);
}

.service-detail-container .side-menu{
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.service-detail-container .side-menu a{
  text-decoration: none;
  color: var(--ink);
  padding: 15px 25px;
  border: 1px solid var(--border-soft);
  border-radius: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.3s;
  font-size: 15px;
}

.service-detail-container .side-menu a.active{
  background: var(--gold);
  color: var(--white);
  border-color: var(--gold);
}

.service-detail-container .side-menu a:hover:not(.active){
  border-color: var(--gold);
}

.service-detail-container .contact-form{
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.service-detail-container .contact-form input,
.service-detail-container .contact-form select,
.service-detail-container .contact-form textarea{
  width: 100%;
  padding: 15px 25px;
  border: 1px solid rgba(29,18,53,.08);
  border-radius: 50px;
  font-family: var(--font-body);
  outline: none;
}

.service-detail-container .contact-form textarea{
  border-radius: 20px;
  height: 120px;
  resize: none;
}

.service-detail-container .upload-btn-wrapper{
  background: #F7EBE2;
  border-radius: 50px;
  display: flex;
  align-items: center;
  padding: 5px;
  font-size: 14px;
  color: rgba(4,39,47,.7);
}

.service-detail-container .btn-upload{
  background: var(--gold);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 50px;
  margin-inline-end: 15px;
  cursor: pointer;
}

.service-detail-container .btn-submit{
  background: var(--gold);
  color: white;
  border: none;
  padding: 18px;
  border-radius: 50px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.service-detail-container .btn-submit:hover{
  background: var(--gold-dark);
}

@media (max-width: 992px){
  .service-detail-container .content-wrapper{ grid-template-columns: 1fr; }
  .service-detail-container .hero-banner{ height: 350px; }
  .service-detail-container .content-row{ flex-direction: column; }
}

@media (max-width: 600px){
  .service-detail-container .hero-banner{ height: 250px; border-radius: 18px; }
  .service-detail-container .main-content h1{ font-size: 26px; }
}

.counters{
  background: var(--ink);
  padding: 80px 0;
}

.counters-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}

.counter-item{ position: relative; }

.counter-item:not(:last-child)::after{
  content:'';
  position:absolute; inset-inline-end:-15px; top:50%;
  transform:translateY(-50%);
  width:1px; height:60px;
  background: rgba(255,255,255,.08);
}

.counter-num{
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: var(--fw-heading);
  color: var(--gold);
  line-height: 1;
}

.counter-plus{
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  color: var(--gold);
  margin-inline-start: 2px;
}

.counter-label{
  display: block;
  font-size: .88rem;
  font-weight: 500;
  color: rgba(255,255,255,.6);
  margin-top: 8px;
  letter-spacing: .02em;
}

.testimonials{ background: var(--bg-cream); }

.testimonial-carousel{
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  overflow: hidden;
}

.testimonial-track{
  display: flex;
  transition: transform var(--transition-med);
}

.testimonial-slide{
  min-width: 100%;
  padding: 0 20px;
  text-align: center;
}

.testimonial-stars{
  color: var(--gold);
  font-size: .9rem;
  margin-bottom: 24px;
  display: flex;
  gap: 5px;
  justify-content: center;
}

.testimonial-text{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--ink);
  margin-bottom: 30px;
}

.testimonial-author{
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
}

.testimonial-author img{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold);
}

.testimonial-author strong{
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}

.testimonial-author span{
  font-size: .82rem;
  color: var(--ink-soft);
}

.testimonial-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--white);
  border: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  color: var(--ink);
  font-size: 15px;
  z-index: 2;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: 0;
}

.testimonial-btn:hover{ background: var(--gold); color: var(--white); }

.test-prev{ inset-inline-start: -60px; }
.test-next{ inset-inline-end: -60px; }

.team{ background: var(--white); }

.team-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.team-card{
  background: var(--bg-cream);
  text-align: center;
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.team-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,.08);
}

.team-image{
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5; /* Responsive image ratio */
}

.team-image img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform var(--transition-med);
}

.team-card:hover .team-image img{
    transform: scale(1.06);
}

.team-social{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 18px;
  background: linear-gradient(to top, rgba(29,18,53,.7), transparent);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.team-card:hover .team-social{ opacity: 1; transform: translateY(0); }

.team-social a{
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.15);
  color: var(--white);
  font-size: .88rem;
  border-radius: 50%;
  backdrop-filter: blur(4px);
}

.team-social a:hover{ background: var(--gold); }

.team-name{
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
  margin-top: 20px;
  margin-bottom: 4px;
}

.team-role{
  display: block;
  font-size: .82rem;
  color: var(--ink-soft);
  margin-bottom: 20px;
  font-weight: 400;
}

/* Team Section — now uses scoped styles inside #lumTeamSec in page-team.php */

.cta{
  position: relative;
  text-align: center;
  padding: 120px 0;
  overflow: hidden;
}

.cta-bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(.35);
}

.cta-content{ position: relative; z-index: 2; }
.cta-content .eyebrow{ align-self: center; }

.cta-title{
  font-family: var(--font-display);
  font-weight: var(--fw-heading);
  font-size: var(--text-h2);
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 16px;
  max-width: 650px;
  margin-inline: auto;
  letter-spacing: var(--ls-h2);
}

.cta-desc{
  font-size: .95rem;
  color: rgba(255,255,255,.8);
  margin-bottom: 32px;
  max-width: 520px;
  margin-inline: auto;
}

/* ---------- Footer ---------- */
.main-footer{
  background-color: #1D1235;
  color: #ffffff;
  border-radius: clamp(20px, 2.5vw, 40px);
  /* Fluid gutter: the card keeps its inset on small screens and stops
     growing (centred) once it reaches its maximum width. */
  max-width: min(1800px, calc(100% - clamp(20px, 6vw, 120px)));
  margin: clamp(30px, 4vw, 60px) auto;
  padding: clamp(36px, 4.5vw, 68px) clamp(22px, 4vw, 64px) clamp(24px, 2.5vw, 34px);
}

/* --- Lead call to action --- */
/* Heading and its supporting line on the left, the WhatsApp button on the
   right, the pair separated from the columns by a hairline rather than an
   <hr> so the spacing above and below it stays symmetrical. */
.footer-newsletter{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(24px, 3vw, 56px);
  flex-wrap: wrap;
  padding-bottom: clamp(20px, 3.5vw, 30px);
  margin-bottom: clamp(30px, 3.5vw, 48px);
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.footer-cta-text{ max-width: 620px; }

.newsletter-title{
  font-family: var(--font-primary);
  color: #ffffff;
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: var(--fw-heading);
  line-height: 1.2;
  letter-spacing: var(--ls-h2);
}

.footer-tour-note{
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,.55);
}

/* WhatsApp brand green, which clears AA against white at 4.53:1. Sized to
   its own label now rather than stretched across a 450px column. */
.btn-tour{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 30px;
  border-radius: var(--radius-pill);
  background-color: #1DA851;
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.btn-tour:hover{
  background-color: #17913f;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,.25);
}
.btn-tour:focus-visible{ outline: 2px solid #ffffff; outline-offset: 3px; }
.btn-tour i{ font-size: 20px; }

/* Kept for footers still rendering the old markup. */
.footer-divider{
  border: 0;
  border-top: 1px solid rgba(255,255,255,.1);
  margin-bottom: clamp(30px, 3.5vw, 48px);
}

/* --- Column grid --- */
/* Every column opens with a heading on the same line, so the four blocks
   share one top baseline instead of each starting where its content does. */
.footer-grid{
  display: grid;
  align-content: start;
  grid-template-columns: 1.25fr 0.75fr 0.8fr 1.2fr;
  gap: clamp(28px, 3vw, 48px);
  margin-bottom: clamp(34px, 3.5vw, 52px);
}

/* The footer is an ink panel, so its headings are pinned light rather than
   following the global heading colour. */
.main-footer h1,
.main-footer h2,
.main-footer h3,
.main-footer h4,
.main-footer h5,
.main-footer h6{ color: #ffffff; }

.footer-col h3{
  font-family: var(--font-primary);
  font-size: 13px;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-weight: var(--fw-semibold);
  color: rgba(255,255,255,.55);
}

.footer-logo{
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  letter-spacing: 2px;
  /* Sits on the same line as the column headings opposite it. */
  margin-bottom: 22px;
  color: #ffffff;
}
.footer-logo img{
  display: block;
  max-width: min(200px, 100%);
  max-height: 88px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.footer-logo i{ color: var(--gold); }

.brand-desc{
  color: rgba(255,255,255,.55);
  line-height: 1.75;
  /* Last thing in the brand column now the consultation button is gone. */
  margin-bottom: 0;
  max-width: 40ch;
  font-size: 15px;
}

.footer-links,
.hours-list{ list-style: none; }

.footer-links li,
.hours-list li{
  margin-bottom: 12px;
  color: rgba(255,255,255,.62);
  font-size: 15px;
  line-height: 1.6;
}

.footer-links li:last-child,
.hours-list li:last-child{ margin-bottom: 0; }

/* A time sits under the days it belongs to, quieter and tucked up close. */
.hours-list li.is-time{
  margin-top: -8px;
  color: rgba(255,255,255,.45);
  font-size: 14px;
}

.footer-links a{
  color: inherit;
  text-decoration: none;
  transition: color .3s ease;
}

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

/* --- Contact column --- */
.contact-item{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}
.contact-item:last-child{ margin-bottom: 0; }

.contact-icon{
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background-color: rgba(255,255,255,.07);
  color: var(--gold);
  font-size: 14px;
}

/* min-width lets a long email shrink inside the grid column instead of
   pushing the whole card wider. */
.contact-text{ min-width: 0; }

.contact-label{
  display: block;
  margin-bottom: 3px;
  color: rgba(255,255,255,.5);
  font-size: var(--text-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.contact-link{
  display: inline-block;
  /* Phone numbers open with "+", which bidi drags to the far end of the
     string on the Arabic site; the values are latin either way. */
  direction: ltr;
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  font-weight: var(--fw-semibold);
  line-height: 1.45;
  /* Email addresses have no spaces to break on, but only break when the
     line actually overflows. */
  overflow-wrap: break-word;
  transition: color .3s ease;
}

.contact-link.is-email{ font-size: 15px; }

.contact-link:hover{ color: var(--gold); }

/* --- Bottom bar --- */
.footer-bottom{
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
}

.copyright{
  color: rgba(255,255,255,.5);
  font-size: 13px;
}

.copyright a{ color: inherit; text-decoration: underline; }
.copyright a:hover{ color: var(--gold); }

.social-links{
  display: flex;
  gap: 20px;
}

.social-links a{
  color: #ffffff;
  font-size: 18px;
  transition: 0.3s;
}

.social-links a:hover{ color: var(--gold); transform: translateY(-3px); }

/* Footer only: the same class also dresses the team-card share menu. */
.main-footer .social-links{ gap: 10px; }

.main-footer .social-links a{
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  font-size: 14px;
  color: rgba(255,255,255,.8);
  transition: color .3s ease, border-color .3s ease, background-color .3s ease;
}

.main-footer .social-links a:hover{
  color: var(--ink);
  border-color: var(--gold);
  background-color: var(--gold);
  transform: none;
}

.toast{
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--white);
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  font-size: .88rem;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 9999;
}
.toast.is-shown{ opacity: 1; transform: translateX(-50%) translateY(0); }

.reveal{
  opacity:0;
  transform: translateY(22px);
  transition: opacity var(--transition-med), transform var(--transition-med);
}
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-delay-1{ transition-delay:.1s; }
.reveal-delay-2{ transition-delay:.22s; }
.reveal-delay-3{ transition-delay:.34s; }

@media (max-width: 1100px){
  .footer-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; }
}

@media (max-width: 1200px){
  .primary-nav > ul{ gap: 18px; }
  .phone-pill span{ display:none; }
  .phone-pill{ gap:0; }
}

@media (max-width: 1024px){
  .about-grid{ grid-template-columns: 1fr; gap: 50px; }
  .about-img-wrap img{ min-height: 420px; }
  .about-text .heading{ max-width: 100%; }
  .about-sub-grid{ grid-template-columns: 220px 1fr; gap: 30px; }
  .services-track .service-card{ min-width:calc(50% - 12px); }
  .effeff-gallery{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
  .effeff-item.effeff-wide{ grid-column: span 2; }
  .effeff-item.effeff-tall{ grid-row: auto; }
  .team-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ========== ABOUT US PAGE — HERO ========== */
.about-hero{
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  padding: 120px 0 80px;
  overflow: hidden;
  background: var(--ink);
}
.about-hero-overlay{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(.35);
}
.about-hero[style*="background-image"] .about-hero-overlay{
  background: inherit;
  background-size: cover;
  background-position: center;
  filter: brightness(.35);
}
.about-hero[style*="background-image"]{
  background-size: cover;
  background-position: center;
}
.about-hero[style*="background-image"] .about-hero-overlay{
  background: rgba(0,0,0,.45);
  filter: none;
}
.about-hero-content{
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.about-hero-content .eyebrow{ align-self: center; }
.about-hero-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-h1);
  color: var(--white);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h1);
  margin: 0 0 20px;
}
.about-hero-desc{
  font-size: clamp(16px, 1.2vw, 18px);
  color: rgba(255,255,255,.85);
  line-height: var(--lh-body);
  max-width: 560px;
  margin-inline: auto;
}

/* ========== ABOUT US PAGE — REDEFINING SECTION ========== */
.about-redefining{ background: var(--white); }

/* ========== ABOUT US PAGE — VISIONARY ARCHITECTURE ========== */
.lum-vis-sec, .lum-vis-sec * { box-sizing: border-box; }
.lum-vis-sec {
  --lum-radius: 22px;
  font-family: var(--font-primary);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0;
}
.lum-vis-wrap {
  position: relative;
  overflow: hidden;
  min-height: 640px;
  background-color: #1D1235;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}
.lum-vis-card {
  position: relative;
  margin-inline-end: 50px;
  margin-inline-start: auto;
  width: min(46%, 640px);
  background: #ffffff;
  border-radius: var(--lum-radius);
  padding: 56px 60px 48px;
  overflow: hidden;
}
.lum-vis-blueprint {
  position: absolute;
  inset-inline-end: -10px;
  bottom: -10px;
  width: 260px;
  height: 200px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.lum-vis-tags {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-bottom: 20px;
}
.lum-vis-tags span {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--lum-gold);
  position: relative;
}
.lum-vis-tags span:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-inline-end: -12px;
  top: 3px;
  width: 1px;
  height: 12px;
  background: rgba(68,189,161,0.4);
}
.lum-vis-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-primary);
  font-weight: var(--fw-heading);
  font-size: var(--text-h2);
  line-height: 1.15;
  color: var(--lum-ink);
  margin: 0 0 22px;
  letter-spacing: var(--ls-h2);
}
.lum-vis-desc {
  position: relative;
  z-index: 1;
  font-size: var(--text-base);
  line-height: var(--lh-prose);
  color: var(--lum-sub);
  max-width: 480px;
  margin: 0 0 30px;
}
.lum-vis-list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
}
.lum-vis-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--lum-ink);
  font-weight: var(--fw-medium);
}
.lum-vis-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--lum-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lum-vis-check svg {
  width: 11px;
  height: 11px;
  stroke: #fff;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lum-vis-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--lum-gold);
  color: #fff;
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 15px;
  border: none;
  border-radius: 999px;
  padding: 8px 26px 8px 8px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.15s ease;
  line-height: 1;
  letter-spacing: 0;
}
.lum-vis-btn:hover { background: var(--lum-gold-dark); }
.lum-vis-btn:active { transform: scale(0.97); }
.lum-vis-btn-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lum-vis-btn-icon svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 1024px) {
  .lum-vis-card { width: 56%; padding: 48px 44px 40px; }
}
@media (max-width: 860px) {
  .lum-vis-wrap { min-height: auto; align-items: stretch; }
  .lum-vis-card { width: 100%; border-radius: 0; padding: 40px 26px 36px; }
  .lum-vis-list { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .lum-vis-card { padding: 34px 20px 30px; }
  .lum-vis-title { font-size: 26px; }
  .lum-vis-blueprint { width: 160px; height: 130px; opacity: 0.35; }
}

/* ========== ABOUT US PAGE — CRAFTING INNOVATIVE SPACES ========== */
.lum-craft-sec, .lum-craft-sec * { box-sizing: border-box; }
.lum-craft-sec {
  --lum-divider: rgba(29,18,53,.08);
  --lum-radius: 20px;
  font-family: var(--font-primary);
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 24px;
}

.lum-craft-top {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 64px;
}

.lum-craft-img {
  border-radius: var(--lum-radius);
  overflow: hidden;
  height: 620px;
}
.lum-craft-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lum-craft-img.lum-craft-img-right { height: 460px; }

.lum-craft-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(68,189,161,0.4);
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--lum-gold);
  margin-bottom: 24px;
}

.lum-craft-title {
  font-family: var(--font-primary);
  font-weight: var(--fw-heading);
  font-size: var(--text-h2);
  line-height: 1.15;
  color: var(--lum-ink);
  margin: 0 0 24px;
  letter-spacing: var(--ls-h2);
}

.lum-craft-desc {
  font-size: var(--text-base);
  line-height: var(--lh-prose);
  color: var(--lum-sub);
  max-width: 460px;
  margin: 0 0 36px;
}

.lum-craft-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--lum-gold);
  color: #fff;
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 15px;
  border: none;
  border-radius: 999px;
  padding: 8px 30px 8px 8px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.15s ease;
  line-height: 1;
  letter-spacing: 0;
}
.lum-craft-btn:hover { background: var(--lum-gold-dark); }
.lum-craft-btn:active { transform: scale(0.97); }
.lum-craft-btn-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lum-craft-btn-icon svg {
  width: 17px;
  height: 17px;
  stroke: var(--lum-gold);
  stroke-width: 2.3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Stats Row --- */
.lum-craft-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.lum-craft-stat {
  text-align: start;
  padding: 0 32px;
  border-inline-start: 1px solid var(--lum-divider);
}
.lum-craft-stat:first-child {
  border-inline-start: none;
  padding-inline-start: 0;
}

.lum-craft-stat-num {
  font-family: var(--font-primary);
  font-weight: var(--fw-heading);
  font-size: clamp(40px, 4vw, 56px);
  color: var(--lum-ink);
  line-height: 1;
  margin-bottom: 14px;
  letter-spacing: var(--ls-h2);
}

.lum-craft-stat-label {
  font-size: var(--text-sm);
  color: var(--lum-sub);
  font-weight: var(--fw-medium);
}

/* --- Crafting Responsive --- */
@media (max-width: 1100px) {
  .lum-craft-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .lum-craft-img,
  .lum-craft-img.lum-craft-img-right { height: 340px; order: 2; }
  .lum-craft-content { order: 1; }
  .lum-craft-desc { max-width: 100%; }
}

@media (max-width: 640px) {
  .lum-craft-sec { padding: 32px 16px; }
  .lum-craft-top { margin-bottom: 44px; }
  .lum-craft-stats {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 32px;
  }
  .lum-craft-stat {
    border-inline-start: none;
    padding: 0;
  }
  .lum-craft-stat:nth-child(odd) { padding-inline-end: 16px; }
  .lum-craft-stat:nth-child(even) { padding-inline-start: 16px; border-inline-start: 1px solid var(--lum-divider); }
}

/* ========== ABOUT US PAGE — TESTIMONIALS (What Clients Are Saying) ========== */
.lum-cts-sec, .lum-cts-sec * { box-sizing: border-box; }
.lum-cts-sec {
  --lum-star-off: rgba(29,18,53,.15);
  --lum-radius: 20px;
  font-family: var(--font-primary);
  max-width: 1500px;
  margin: 0 auto;
  padding: 56px 24px;
}

.lum-cts-head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 48px;
}

.lum-cts-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(68,189,161,0.4);
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--lum-gold);
  margin-bottom: 20px;
}

.lum-cts-title {
  font-family: var(--font-primary);
  font-weight: var(--fw-heading);
  font-size: var(--text-h2);
  line-height: 1.15;
  color: var(--lum-ink);
  margin: 0;
  letter-spacing: var(--ls-h2);
}

/* --- Carousel Layout --- */
.lum-cts-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.lum-cts-nav {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(29,18,53,0.18);
  background: transparent;
  color: var(--lum-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}
.lum-cts-nav svg {
  width: 18px; height: 18px;
  stroke: var(--lum-ink);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.25s ease;
}
.lum-cts-nav:hover {
  background: var(--lum-gold);
  border-color: var(--lum-gold);
}
.lum-cts-nav:hover svg { stroke: #fff; }
.lum-cts-nav:active { transform: scale(0.94); }
.lum-cts-nav:disabled { opacity: 0.35; cursor: default; }
.lum-cts-nav:disabled:hover {
  background: transparent;
  border-color: rgba(29,18,53,0.18);
}
.lum-cts-nav:disabled:hover svg { stroke: var(--lum-ink); }

.lum-cts-viewport {
  flex: 1;
  overflow: hidden;
}

.lum-cts-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 40px) / 3);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.lum-cts-track::-webkit-scrollbar { display: none; }

/* --- Card --- */
.lum-cts-card {
  scroll-snap-align: start;
  position: relative;
  background: #fff;
  border-radius: var(--lum-radius);
  padding: 40px 36px 34px;
  overflow: hidden;
  min-width: 0;
}

.lum-cts-quote-bg {
  position: absolute;
  top: 34px;
  inset-inline-end: 30px;
  display: flex;
  gap: 4px;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}
.lum-cts-quote-bg svg { width: 56px; height: 56px; fill: #F7EBE2; }

.lum-cts-stars {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 5px;
  margin-bottom: 22px;
}
.lum-cts-stars svg { width: 20px; height: 20px; }
.lum-cts-star-on { fill: var(--lum-gold); }
.lum-cts-star-off { fill: var(--lum-star-off); }

.lum-cts-quote {
  position: relative;
  z-index: 1;
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--lum-sub);
  margin: 0 0 28px;
  max-width: 90%;
}

.lum-cts-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.lum-cts-person-name {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: var(--text-lg);
  color: var(--lum-ink);
  line-height: var(--lh-snug);
}
.lum-cts-person-role {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: var(--text-sm);
  color: var(--lum-sub);
  margin-inline-start: 4px;
}

.lum-cts-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* --- Testimonials Responsive --- */
@media (max-width: 1000px) {
  .lum-cts-track { grid-auto-columns: calc((100% - 20px) / 2); }
}

@media (max-width: 680px) {
  .lum-cts-sec { padding: 40px 16px; }
  .lum-cts-head { margin-bottom: 32px; }
  .lum-cts-row { gap: 10px; }
  .lum-cts-nav { width: 42px; height: 42px; }
  .lum-cts-track { grid-auto-columns: 88%; }
  .lum-cts-card { padding: 32px 26px 28px; }
  .lum-cts-quote { max-width: 100%; }
}

/* --- Google reviews variant of the same carousel ---
   The section reuses the testimonial shell, so only what a Google review adds
   over a testimonial is styled here: the author's own head, the portfolio
   rating above the cards, and the link back that Google's terms require. */
.lum-greviews-tag {
  border-color: rgba(66,133,244,.35);
  color: var(--lum-sub);
}
.lum-greviews-g { width: 16px; height: 16px; flex: none; }

.lum-greviews-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  margin: 16px 0 0;
}
.lum-greviews-summary .lum-cts-stars { margin-bottom: 0; }
.lum-greviews-score {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--lum-gold);
}
.lum-greviews-count {
  flex-basis: 100%;
  color: var(--lum-sub);
  font-size: var(--text-sm);
}

.lum-greview { display: flex; flex-direction: column; }
.lum-greview-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.lum-greview-avatar {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}
.lum-greview-avatar-blank {
  display: grid;
  place-items: center;
  background: #F7EBE2;
  color: var(--lum-gold);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}
.lum-greview-who { min-width: 0; }
.lum-greview-author,
.lum-greview-meta { display: block; overflow-wrap: anywhere; }
.lum-greview-author { font-weight: var(--fw-semibold); }
.lum-greview-meta { color: var(--lum-sub); font-size: var(--text-xs); }

/* Google reviews run to any length; the card keeps its shape and the rest is
   a click away on Google, which is where the full text belongs anyway. */
.lum-greview-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  overflow: hidden;
  max-width: 100%;
  margin-bottom: 20px;
}
.lum-greview-link {
  position: relative;
  z-index: 1;
  margin-block-start: auto;
  color: #1a73e8;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.lum-greview-link:hover { text-decoration: underline; }

.lum-greviews-all {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin: 28px 0 0;
  color: var(--lum-sub);
  font-size: var(--text-sm);
}
.lum-greviews-all-label { flex-basis: 100%; font-weight: var(--fw-semibold); }
.lum-greviews-all a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.lum-greviews-all a:hover { color: var(--lum-gold); }

/* ========== ABOUT US PAGE — VALUES ========== */
.about-values{ background: var(--bg-cream); }

.about-values-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 10px;
}

.about-value-card{
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 36px 30px;
  border: 1px solid var(--border-soft);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.about-value-card:hover{
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 20px 40px rgba(0,0,0,.06);
}

.about-value-icon{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(68,189,161,.10);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.about-value-icon svg{
  width: 28px;
  height: 28px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-value-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
  margin: 0 0 12px;
}

.about-value-desc{
  font-size: .9rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}

/* ========== PAGE HEADER BANNER (all pages except front) ========== */
.lum-hdr-sec, .lum-hdr-sec * { box-sizing: border-box; }
.lum-hdr-sec {
  --lum-radius: 20px;
  font-family: var(--font-primary);
  max-width: 1600px;
  margin: 0 auto;
  padding: 24px;
}
.lum-hdr-wrap {
  position: relative;
  border-radius: var(--lum-radius);
  overflow: hidden;
  min-height: 340px;
  background: #1D1235;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.lum-hdr-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(    115deg,    rgba(0, 0, 0, 0.75) 0%,    rgba(0, 0, 0, 0.55) 55%,    rgba(0, 0, 0, 0.35) 80%);
}
.lum-hdr-content {
  position: relative;
  z-index: 1;
  padding: 40px 24px;
}
.lum-hdr-subtext {
  display: inline-block;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: #44BDA1;
  margin: 0 0 14px;
}
.lum-hdr-title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--text-h1);
  color: #fff;
  margin: 0 0 18px;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h1);
}
.lum-hdr-crumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.85);
}
.lum-hdr-sep {
  color: rgba(255,255,255,0.55);
}
.lum-hdr-crumbs a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: color 0.2s ease;
}
.lum-hdr-crumbs a:hover { color: #fff; }
.lum-hdr-current {
  color: #fff;
  font-weight: 600;
}

@media (max-width: 640px) {
  .lum-hdr-sec { padding: 14px; }
  .lum-hdr-wrap { min-height: 260px; border-radius: 16px; }
  .lum-hdr-content { padding: 28px 18px; }
  .lum-hdr-crumbs { font-size: 14px; }
}

@media (max-width: 992px){
  .about-values-grid{ grid-template-columns: repeat(2, 1fr); }
  .primary-nav a::after{ display:none; }
  .menu-toggle{ display:flex; }
  /* .primary-nav is position:fixed + z-index:200, which makes it a
     positioned stacking layer that paints above un-positioned siblings
     like .header-actions no matter their DOM order — so the open panel
     was covering the toggle/close button. Lift header-actions into its
     own stacking context above it. */
  .header-actions{ position:relative; z-index:201; gap:10px; }
  .phone-pill{ display:none; }
  .btn-primary span{ display:none; }
  .btn-primary{ padding: 6px; }
  .hero{ min-height: 560px; }
}

@media (max-width: 768px){
  .about-hero{ min-height: 340px; padding: 100px 0 60px; }
  .about-values-grid{ grid-template-columns: 1fr; }
  .header-inner{ padding-block: 16px; }
  .hero{ height: min(86vh, 640px); border-radius: 22px; }
  .hero-content{ padding: 28px 22px; max-width:100%; }
  .hero-fold{ width:110px; height:110px; }
  .hero-dots{ inset-inline-end:18px; inset-block-end:16px; }
  .about-img-wrap img{ min-height: 320px; }
  .about-media .badge{ inset-inline-start:16px; bottom:16px; padding:18px 22px; max-width:220px; border-radius: 16px; }
  .about-media .badge-number{ font-size:34px; }
  .about-media .badge-label{ font-size:14px; }
  .about-text .heading{ font-size:1.6rem; margin-bottom:28px; }
  .tabs{ gap:10px; margin-bottom:26px; }
  .tab{ padding:10px 18px; font-size:.82rem; }
  .divider{ margin-bottom:28px; }
  .about-sub-grid{ grid-template-columns:1fr; gap:24px; }
  .sub-media-wrap{ flex-direction:row; align-items:center; }
  .sub-media{ width:140px; flex-shrink:0; }
  .lead{ font-size:.9rem; }
  .checklist li{ font-size:.88rem; }
  .effeff-title{ font-size: 34px; }
  .effeff-inner{ padding: 40px 20px 60px; }
  .testimonial-btn{ display:none; }
  .testimonial-text{ font-size:1rem; }
  .counters-grid{ grid-template-columns: repeat(2, 1fr); gap:40px; }
  .counter-item:not(:last-child)::after{ display:none; }
  .counter-num{ font-size:40px; }
  .footer-newsletter{ flex-direction: column; align-items: flex-start; gap: 22px; }
}

@media (max-width: 640px){
  .services-track .service-card{ min-width:100%; }
  .services-btn{ display:none; }
  .effeff-gallery{ grid-template-columns: 1fr; }
  .effeff-item.effeff-wide,
  .effeff-item.effeff-tall{ grid-column: auto; grid-row: auto; }
  .team-grid{ grid-template-columns: 1fr; }
  .side-card{ flex-direction: column; align-items: flex-start; }
  .side-card .card-image{ width: 100%; height: 200px; }
  .news-title{ font-size: 32px; }
  .footer-grid{ grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .footer-bottom{ flex-direction: column; gap: 20px; text-align: center; }
  .social-links{ justify-content: center; }
  /* Full-width gives the one call to action a proper thumb target. */
  .footer-tour{ width: 100%; }
  .btn-tour{ width: 100%; padding: 16px 24px; font-size: 15px; }
}

@media (max-width: 576px){
  .hero-wrap{ padding: 6px 14px 40px; }
  .hero{ min-height: 520px; border-radius:18px; }
  .hero-badges .hero-badge-clip{ font-size: var(--text-xs); padding:6px 12px; width: 180px; }
  /* Only the icons fit at this width. The labels are hidden visually but kept
     in the accessibility tree, so the links still announce what they do. */
  .hero-actions > a > span:not(.icon-circle){
    position:absolute;
    width:1px; height:1px;
    margin:-1px; padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
  }
  /* Match the base rule's specificity, or the desktop trailing padding wins
     and the buttons stay lopsided pills instead of circles. */
  .hero-actions .btn-look,
  .hero-actions .btn{
    width:50px; height:50px;
    padding-inline:0;
    gap:0;
    justify-content:center;
  }
  .logo{ font-size:1.25rem; }
  .logo .custom-logo{ height:70px; }
  .counters-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 480px){
  .counter-num{ font-size:40px; }
  /* Below this width the address genuinely cannot fit on one line, so let it
     break mid-word rather than push the footer wider than the screen. */
  .contact-link{ overflow-wrap: anywhere; }
  .footer-grid{ grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero-slide{ transition:none; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ========== CONTACT US PAGE ========== */

/* --- Contact Info Cards --- */
#lumCinfoSec,
#lumCinfoSec * {
  box-sizing: border-box;
}
#lumCinfoSec {
  --lum-cinfo-bg: #F7EBE2;
  --lum-cinfo-card: #ffffff;
  --lum-cinfo-icon-bg: rgba(29,18,53,.05);
  --lum-cinfo-divider: rgba(29,18,53,.08);
  --lum-cinfo-radius: 20px;
  font-family: var(--font-primary);
  background: var(--lum-cinfo-bg);
  max-width: 1500px;
  margin: 0 auto;
  padding: 56px 24px;
}
#lumCinfoSec .lum-cinfo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
#lumCinfoSec .lum-cinfo-card {
  background: var(--lum-cinfo-card);
  border-radius: var(--lum-cinfo-radius);
  padding: 36px 32px 40px;
  display: flex;
  flex-direction: column;
}
#lumCinfoSec .lum-cinfo-top {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
}
#lumCinfoSec .lum-cinfo-icon {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--lum-cinfo-icon-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s ease, transform 0.3s ease;
}
#lumCinfoSec .lum-cinfo-icon svg {
  width: 30px;
  height: 30px;
  fill: var(--lum-gold);
  transition: fill 0.3s ease;
}
#lumCinfoSec .lum-cinfo-icon svg [fill]:not([fill="none"]) {
  transition: fill 0.3s ease;
}
#lumCinfoSec .lum-cinfo-card:hover .lum-cinfo-icon {
  background: var(--lum-gold);
  transform: scale(1.06);
}
#lumCinfoSec .lum-cinfo-card:hover .lum-cinfo-icon svg {
  fill: #ffffff;
}
#lumCinfoSec .lum-cinfo-card:hover .lum-cinfo-icon svg [fill]:not([fill="none"]) {
  fill: var(--lum-gold);
}
#lumCinfoSec .lum-cinfo-title-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#lumCinfoSec .lum-cinfo-title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.2;
  color: var(--lum-ink);
  margin: 0;
}
#lumCinfoSec .lum-cinfo-highlight {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--lum-gold);
  line-height: 1.4;
}
#lumCinfoSec .lum-cinfo-divider {
  border: none;
  border-top: 1px solid var(--lum-cinfo-divider);
  margin: 0 0 26px;
}
#lumCinfoSec .lum-cinfo-desc {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--lum-sub);
  margin: auto 0 0;
}

@media (max-width: 1100px) {
  #lumCinfoSec .lum-cinfo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  #lumCinfoSec {
    padding: 40px 16px;
  }
  #lumCinfoSec .lum-cinfo-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  #lumCinfoSec .lum-cinfo-card {
    padding: 30px 26px 32px;
  }
  #lumCinfoSec .lum-cinfo-icon {
    width: 64px;
    height: 64px;
  }
  #lumCinfoSec .lum-cinfo-icon svg {
    width: 26px;
    height: 26px;
  }
  #lumCinfoSec .lum-cinfo-title {
    font-size: 19px;
  }
}

/* --- Main Contact: Ask Us Anything --- */
.lum-ask-sec, .lum-ask-sec * { box-sizing: border-box; }
.lum-ask-sec {
  --lum-field-border: rgba(29,18,53,.08);
  --lum-radius: 22px;
  font-family: var(--font-primary);
  max-width: 1500px;
  margin: 0 auto;
  padding: 56px 24px;
}

.lum-ask-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.15fr;
  gap: 48px;
  align-items: center;
}

/* --- Left Column --- */
.lum-ask-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(68,189,161,0.4);
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--lum-gold);
  margin-bottom: 22px;
}

.lum-ask-title {
  font-family: var(--font-primary);
  font-weight: var(--fw-heading);
  font-size: var(--text-h2);
  line-height: 1.15;
  color: var(--lum-ink);
  margin: 0 0 22px;
  letter-spacing: var(--ls-h2);
}

.lum-ask-desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--lum-sub);
  max-width: 440px;
  margin: 0 0 40px;
}

.lum-ask-media {
  display: flex;
  justify-content: center;
}
.lum-ask-media img {
  max-width: 100%;
  width: 460px;
  height: auto;
  filter: drop-shadow(0 40px 40px rgba(29,18,53,0.18));
}

/* --- Form Card --- */
.lum-ask-card {
  background: #fff;
  border-radius: var(--lum-radius);
  padding: 48px 56px 52px;
}

.lum-ask-form-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(68,189,161,0.4);
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--lum-gold);
  margin-bottom: 20px;
}

.lum-ask-form-title {
  font-family: var(--font-primary);
  font-weight: var(--fw-heading);
  font-size: var(--text-h3);
  color: var(--lum-ink);
  margin: 0 0 32px;
  line-height: var(--lh-heading);
}

.lum-ask-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

.lum-ask-field {
  position: relative;
}

.lum-ask-field input,
.lum-ask-field select,
.lum-ask-field textarea {
  width: 100%;
  font-family: var(--font-primary);
  font-size: 15px;
  color: var(--lum-ink);
  background: #fff;
  border: 1px solid var(--lum-field-border);
  border-radius: 999px;
  padding: 17px 24px;
  outline: none;
  transition: border-color 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

.lum-ask-field input::placeholder,
.lum-ask-field textarea::placeholder {
  color: rgba(4,39,47,.55);
}

.lum-ask-field select {
  color: rgba(4,39,47,.55);
  cursor: pointer;
}
.lum-ask-field select.lum-ask-has-value {
  color: var(--lum-ink);
}

.lum-ask-field input:focus,
.lum-ask-field select:focus,
.lum-ask-field textarea:focus {
  border-color: var(--lum-gold);
}

.lum-ask-field textarea {
  border-radius: 26px;
  min-height: 140px;
  resize: vertical;
  padding: 20px 24px;
}

.lum-ask-chevron {
  position: absolute;
  inset-inline-end: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  pointer-events: none;
}
.lum-ask-chevron svg {
  width: 100%; height: 100%;
  stroke: rgba(4,39,47,.55);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lum-ask-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--lum-sub);
  margin: 22px 0 30px;
  cursor: pointer;
  user-select: none;
}
.lum-ask-checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--lum-gold);
  cursor: pointer;
  flex-shrink: 0;
}

.lum-ask-submit {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--lum-gold);
  color: #fff;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 15px;
  border: none;
  border-radius: 999px;
  padding-block: 8px;
  padding-inline: 8px 30px;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.15s ease;
}
.lum-ask-submit:hover { background: var(--lum-gold-dark); }
.lum-ask-submit:active { transform: scale(0.97); }
.lum-ask-submit-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lum-ask-submit-icon svg {
  width: 17px; height: 17px;
  stroke: var(--lum-gold);
  stroke-width: 2.3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lum-ask-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--lum-ink);
  color: #fff;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 9999;
}
.lum-ask-toast.lum-ask-shown {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* --- Ask Us Responsive --- */
@media (max-width: 1024px) {
  .lum-ask-grid { grid-template-columns: 1fr; gap: 44px; }
  .lum-ask-card { padding: 40px 32px 44px; }
  .lum-ask-desc { max-width: 100%; }
}

@media (max-width: 560px) {
  .lum-ask-sec { padding: 40px 16px; }
  .lum-ask-row { grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
  .lum-ask-card { padding: 32px 22px 36px; border-radius: 18px; }
  .lum-ask-field input,
  .lum-ask-field select,
  .lum-ask-field textarea { padding: 15px 20px; font-size: 14.5px; }
  .lum-ask-media img { width: 100%; }
  .lum-ask-checkbox { font-size: 13.5px; }
}

/* ========== MAP ========== */
.lum-office-sec, .lum-office-sec * { box-sizing: border-box; }
.lum-office-sec {
  font-family: var(--font-primary);
  max-width: 1500px;
  margin: 0 auto;
  padding: 24px 24px 80px;
}
.lum-office-map, .lum-office-map iframe {
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
  border-radius: 20px;
  display: block;
}

@media (max-width: 560px) {
  .lum-office-sec { padding: 16px 16px 56px; }
  .lum-office-map, .lum-office-map iframe { min-height: 320px; }
}

/* ========== CONTACT CTA ========== */
.lum-contact-cta-sec, .lum-contact-cta-sec * { box-sizing: border-box; }
.lum-contact-cta-sec {
  position: relative;
  overflow: hidden;
  max-width: 1500px;
  margin: 0 auto 80px;
  border-radius: 24px;
  background: #1D1235;
  background-size: cover;
  background-position: center;
  font-family: var(--font-primary);
}
.lum-contact-cta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.35) 80%);
}
.lum-contact-cta-content {
  position: relative;
  z-index: 1;
  padding: 72px 40px;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lum-contact-cta-tag {
  display: inline-block;
  color: var(--lum-gold);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.lum-contact-cta-heading {
  font-family: var(--font-primary);
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 16px;
  line-height: 1.2;
}
.lum-contact-cta-desc {
  color: rgba(255,255,255,.8);
  font-size: 16px;
  margin: 0 0 32px;
  max-width: 560px;
}
.lum-contact-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--lum-gold);
  color: #04272F;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.lum-contact-cta-btn:hover { background: var(--lum-gold-dark); color: #fff; }
.lum-contact-cta-btn:active { transform: scale(0.97); }
.lum-contact-cta-btn-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(4,39,47,.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lum-contact-cta-btn-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

@media (max-width: 560px) {
  .lum-contact-cta-sec { border-radius: 18px; margin-bottom: 56px; }
  .lum-contact-cta-content { padding: 48px 24px; }
  .lum-contact-cta-heading { font-size: 28px; }
}

/* =========================================================
   HEADER — wide nav rail + compact action cluster
   The primary menu carries eight or more items, so the header
   gets its own wider container and the utility controls are
   reduced to icon buttons that only show their label when
   there is genuinely room.
   ========================================================= */

.site-header > .container{
  max-width: 1680px;
}

.header-inner{ gap: clamp(16px, 2vw, 32px); }

.primary-nav > ul{ gap: clamp(14px, 1.5vw, 30px); }
.primary-nav a{ white-space: nowrap; }

.header-actions{ gap: 10px; }

/* Icon-first action buttons. The label is revealed at wide widths only. */
.header-action{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 42px;
  min-width: 42px;
  padding: 0;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background: var(--white);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), transform var(--transition-fast);
}
.header-action i{ font-size: 15px; line-height: 1; }
.header-action:hover{ transform: translateY(-1px); }
.header-action-phone:hover{ border-color: var(--gold); color: var(--gold-dark); }

.header-action-whatsapp{
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
}
.header-action-whatsapp:hover{ background: var(--gold-dark); border-color: var(--gold-dark); }

/* Labels are hidden by default and only appear on roomy screens. */
.header-action-text{
  display: none;
  font-weight: var(--fw-medium);
}

@media (min-width: 1500px){
  .header-action{ padding-inline: 16px; }
  .header-action-phone .header-action-text{ display: inline; }
}
@media (min-width: 1660px){
  .header-action-whatsapp .header-action-text{ display: inline; font-weight: var(--fw-semibold); }
}

/* Single-language toggle pill. */
.lang-switcher{ padding: 0; border-radius: var(--radius-pill); }
.lang-switcher .lang-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  min-width: 42px;
  padding-inline: 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--ink-soft);
}
.lang-switcher .lang-link:hover{ background: var(--gold); color: var(--white); }

/* The menu needs the full width earlier than the old 992px breakpoint once
   the item count grows, so the off-canvas menu now takes over at 1200px. */
@media (max-width: 1200px){
  .primary-nav{
    position: fixed;
    inset: 0 0 0 auto;
    width: min(340px, 84vw);
    height: 100vh;
    background: var(--bg-cream);
    box-shadow: -12px 0 40px rgba(0,0,0,.12);
    transform: translateX(100%);
    transition: transform var(--transition-med);
    z-index: 200;
    padding: 130px 32px 32px;
    overflow-y: auto;
    flex-direction: column;
    align-items: flex-start;
  }
  .primary-nav.is-open{ transform: translateX(0); }
  .primary-nav > ul{ flex-direction: column; align-items: flex-start; gap: 22px; width: 100%; }
  .menu-toggle{ display: flex; }
}

@media (max-width: 560px){
  .header-inner{ gap: 12px; }
  .header-actions{ gap: 8px; }
  .header-action,
  .lang-switcher .lang-link{ height: 38px; min-width: 38px; }
  .lang-switcher .lang-link{ padding-inline: 10px; font-size: 12px; }
}

/* ========== HEADER SUB-MENUS ========== */

.primary-nav li{ position: relative; }

.primary-nav .submenu-caret{
  font-size: 9px;
  line-height: 1;
  opacity: .5;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.primary-nav .menu-item-has-children:hover > a .submenu-caret,
.primary-nav .menu-item-has-children:focus-within > a .submenu-caret{
  transform: rotate(180deg);
  opacity: 1;
}

/* The toggle button is only used by the mobile drawer. */
.primary-nav .submenu-toggle{ display: none; }

.primary-nav .sub-menu{
  position: absolute;
  top: calc(100% + 14px);
  inset-inline-start: -14px;
  z-index: 210;
  min-width: 232px;
  padding: 8px;
  margin: 0;
  list-style: none;
  border: 1px solid rgba(29,18,53,.07);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 2px 6px rgba(29,18,53,.04), 0 24px 48px -20px rgba(29,18,53,.26);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}
/* Small pointer tying the panel to its parent item. */
.primary-nav .sub-menu::before{
  content: "";
  position: absolute;
  top: -5px;
  inset-inline-start: 26px;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background: var(--white);
  border-inline-start: 1px solid rgba(29,18,53,.07);
  border-top: 1px solid rgba(29,18,53,.07);
}
/* A hover bridge stops the panel closing while the pointer crosses the gap. */
.primary-nav .menu-item-has-children::after{
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 100%;
  height: 14px;
}
.primary-nav .menu-item-has-children:hover > .sub-menu,
.primary-nav .menu-item-has-children:focus-within > .sub-menu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.primary-nav .sub-menu li{ width: 100%; }
.primary-nav .sub-menu a{
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 9px;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast), padding-inline-start var(--transition-fast);
}
/* The gold underline belongs to top-level links only. */
.primary-nav .sub-menu a::after{ display: none; }
.primary-nav .sub-menu a:hover,
.primary-nav .sub-menu a:focus-visible{
  background: rgba(68,189,161,.10);
  color: var(--gold-dark);
  padding-inline-start: 18px;
}
.primary-nav .sub-menu li.is-current > a{ color: var(--gold); }

/* Third level opens to the side. */
.primary-nav .sub-menu .sub-menu{
  top: -8px;
  inset-inline-start: 100%;
  margin-inline-start: 6px;
}

/* ---------- Mobile drawer: accordion instead of hover ---------- */
@media (max-width: 1200px){
  .primary-nav .menu-item-has-children{ width: 100%; }
  .primary-nav .submenu-caret{ display: none; }
  .primary-nav .menu-item-has-children::after{ display: none; }
  .primary-nav .sub-menu::before{ display: none; }

  .primary-nav .submenu-toggle{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border-soft);
    border-radius: 50%;
    background: var(--white);
    color: var(--ink);
    font-size: 11px;
    transition: transform var(--transition-fast), background var(--transition-fast);
  }
  .primary-nav .submenu-toggle[aria-expanded="true"]{
    transform: rotate(180deg);
    background: var(--gold);
    color: var(--white);
  }

  .primary-nav .sub-menu{
    position: static;
    display: none;
    min-width: 0;
    margin: 10px 0 4px;
    padding: 6px;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: rgba(29,18,53,.03);
  }
  .primary-nav .menu-item-has-children.is-open > .sub-menu{ display: block; }
  /* Hover must not open panels on touch. */
  .primary-nav .menu-item-has-children:hover > .sub-menu,
  .primary-nav .menu-item-has-children:focus-within > .sub-menu{ display: none; }
  .primary-nav .menu-item-has-children.is-open:hover > .sub-menu,
  .primary-nav .menu-item-has-children.is-open:focus-within > .sub-menu{ display: block; }
  .primary-nav .sub-menu .sub-menu{ margin-inline-start: 12px; }
}