/* ==========================================================================
   Markaz Al Maqam — main stylesheet
   Palette taken from the client's design PDF + photography (warm wood, brass, ivory)
   ========================================================================== */

:root {
  --bg:          #120c09;
  --bg-2:        #1a120d;
  --bg-3:        #231811;
  --panel:       rgba(22, 15, 11, .64);
  --ink:         #f1e8de;
  --muted:       #cdbfb3;
  --soft:        #9d8d80;
  --gold:        #c9965a;
  --gold-light:  #e6c18c;
  --line:        rgba(230, 193, 140, .22);
  --aubergine:   #2b0b1c;

  --ff-display:  "Marcellus", "Times New Roman", serif;
  --ff-body:     "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

  --nav-h:       84px;
  --ease:        cubic-bezier(.22, .61, .36, 1);

  /* fine grain, like the panels in the PDF */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .9  0 0 0 0 .8  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--muted);
  font-family: var(--ff-body);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--ff-display); font-weight: 400; color: var(--ink); letter-spacing: .01em; }
a { color: var(--gold-light); text-decoration: none; transition: color .3s var(--ease); }
a:hover { color: var(--ink); }
img { max-width: 100%; }
::selection { background: var(--gold); color: var(--bg); }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 2000;
  background: var(--gold); color: var(--bg); padding: .5rem 1rem;
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

/* ---------- Shared section bits ---------- */
section { position: relative; scroll-margin-top: 0; }
.container-xxl { padding-inline: clamp(1.25rem, 4vw, 2.5rem); }

.eyebrow {
  font-size: .8rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold-light); margin-bottom: 1.5rem;
  display: flex; align-items: center; gap: 1rem;
}
.eyebrow::before { content: ""; width: 42px; height: 1px; background: var(--gold); }

/* Marcellus uses old-style numerals ("IO2"), so all figures are set in Jost */
.section-index, .service-num, .step-num, .contact-value { font-family: var(--ff-body) !important; font-weight: 400; }

.section-index {
  display: inline-block; font-size: .85rem;
  color: var(--gold); letter-spacing: .2em; margin-bottom: .75rem;
}
.section-index::after {
  content: ""; display: inline-block; width: 28px; height: 1px; background: var(--gold);
  vertical-align: middle; margin-left: .75rem; opacity: .7;
}
.section-title { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.15; margin-bottom: 1.25rem; }
.rule { width: 64px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); margin-bottom: 2rem; }

/* ---------- Buttons ---------- */
.btn { border-radius: 0; padding: .95rem 1.9rem; font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; transition: all .35s var(--ease); }
.btn-gold { background: var(--gold); color: #1a0f08; border: 1px solid var(--gold); }
.btn-gold:hover, .btn-gold:focus { background: var(--gold-light); border-color: var(--gold-light); color: #1a0f08; }
.btn-ghost { border: 1px solid rgba(241, 232, 222, .45); color: var(--ink); background: transparent; }
.btn-ghost:hover, .btn-ghost:focus { border-color: var(--gold-light); color: var(--gold-light); background: rgba(201, 150, 90, .08); }

/* ==========================================================================
   NAVBAR
   ========================================================================== */
#mainNav {
  height: var(--nav-h); padding: 0;
  transition: background .4s var(--ease), height .4s var(--ease), box-shadow .4s var(--ease);
}
#mainNav.scrolled {
  --nav-h: 70px;
  background: rgba(18, 12, 9, .82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.navbar-brand img { height: 39px; width: auto; transition: height .4s var(--ease); }
#mainNav.scrolled .navbar-brand img { height: 32px; }

#mainNav .nav-link {
  font-family: var(--ff-display); font-size: 1rem; color: rgba(241, 232, 222, .82);
  padding: .5rem .95rem !important; position: relative;
}
#mainNav .nav-link::after {
  content: ""; position: absolute; left: .95rem; right: .95rem; bottom: .2rem; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
#mainNav .nav-link:hover, #mainNav .nav-link.active { color: var(--ink); }
#mainNav .nav-link:hover::after, #mainNav .nav-link.active::after { transform: scaleX(1); }
#mainNav .nav-cta { border: 1px solid var(--line); margin-left: .75rem; padding: .45rem 1.3rem !important; }
#mainNav .nav-cta::after { display: none; }
#mainNav .nav-cta:hover, #mainNav .nav-cta.active { border-color: var(--gold); color: var(--gold-light); }

.navbar-toggler { border: 0; padding: .5rem; width: 44px; height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 7px; box-shadow: none !important; }
.toggler-line { display: block; height: 1px; width: 28px; background: var(--ink); transition: transform .35s var(--ease); margin-left: auto; }
.toggler-line:last-child { width: 18px; }
.navbar-toggler[aria-expanded="true"] .toggler-line:first-child { transform: translateY(4px) rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .toggler-line:last-child { width: 28px; transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 1199.98px) {
  #mainNav .navbar-collapse {
    position: fixed; inset: var(--nav-h) 0 auto 0; height: calc(100vh - var(--nav-h)); height: calc(100dvh - var(--nav-h));
    background-color: rgba(18, 12, 9, .98); background-image: var(--grain); padding: 2rem 1.5rem; overflow-y: auto;
  }
  #mainNav .navbar-collapse.collapsing { transition: height .35s var(--ease); }
  #mainNav .nav-link { font-size: 1.5rem; padding: .8rem 0 !important; border-bottom: 1px solid rgba(230, 193, 140, .1); }
  #mainNav .nav-link::after { display: none; }
  #mainNav .nav-cta { margin: 1.5rem 0 0; text-align: center; border-color: var(--gold); }
  body.menu-open #mainNav { background: rgba(18, 12, 9, .97); }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
.hero-slides, .hero-slide, .hero-shade { position: absolute; inset: 0; }
.hero-slide {
  background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.12);
  transition: opacity 1.8s ease, transform 9s linear;
}
.hero-slide.is-active { opacity: 1; transform: scale(1); }
.hero-shade {
  background:
    linear-gradient(90deg, rgba(18, 12, 9, .92) 0%, rgba(18, 12, 9, .7) 38%, rgba(18, 12, 9, .15) 75%),
    linear-gradient(0deg, rgba(18, 12, 9, .95) 0%, transparent 35%),
    var(--grain);
}
.hero-inner { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; padding-top: calc(var(--nav-h) + 2rem); padding-bottom: 4rem; }
.hero-content { max-width: 640px; }
.hero-title { font-size: clamp(3rem, 1.6rem + 6vw, 6.4rem); line-height: 1; margin-bottom: 2rem; }
.hero-title em { font-style: normal; color: var(--gold-light); }
.hero-lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); color: var(--muted); max-width: 520px; margin-bottom: 2.5rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

.hero-bar { position: relative; z-index: 2; border-top: 1px solid var(--line); padding: 1.25rem 0; background: rgba(18, 12, 9, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 2.5rem; font-size: .88rem; letter-spacing: .06em; color: var(--muted); }
.hero-facts i { color: var(--gold); margin-right: .4rem; }

.scroll-cue { width: 26px; height: 42px; border: 1px solid rgba(241, 232, 222, .45); border-radius: 14px; position: relative; flex-shrink: 0; }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 2px; height: 8px; margin-left: -1px; background: var(--gold-light); border-radius: 2px; animation: cue 2s infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ==========================================================================
   SPLIT SECTIONS — the PDF's signature layout: full-bleed photo + glass panel
   ========================================================================== */
.split { min-height: 100vh; min-height: 100svh; display: flex; align-items: stretch; overflow: hidden; background: var(--bg); }
.split-media { position: absolute; inset: -8% 0; will-change: transform; }
.split-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.split-panel {
  position: relative; z-index: 2;
  width: min(36%, 560px); min-width: 440px;
  padding: calc(var(--nav-h) + 3rem) 3.25rem 4rem;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--grain), linear-gradient(180deg, rgba(22, 15, 11, .72), rgba(22, 15, 11, .6));
  backdrop-filter: blur(5px) saturate(.9); -webkit-backdrop-filter: blur(5px) saturate(.9);
  border-right: 1px solid var(--line);
}
.split-panel p { margin-bottom: 1.25rem; }
.split-wide .split-panel { width: min(44%, 680px); }
.lead-line { font-family: var(--ff-display); font-size: 1.25rem; line-height: 1.5; color: var(--ink); }

.chips { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li { border: 1px solid var(--line); padding: .35rem 1rem; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.chips .chip-home { border-color: var(--gold); color: var(--gold-light); }

.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 2.25rem; }
.pillar { border-left: 1px solid var(--gold); padding-left: 1.1rem; }
.pillar h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.pillar p { font-size: .97rem; line-height: 1.65; margin: 0; }

@media (max-width: 991.98px) {
  .split { flex-direction: column; min-height: 0; }
  .split-media { position: relative; inset: auto; height: 78vw; max-height: 560px; transform: none !important; }
  .split-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg) 0%, transparent 45%); }
  .split-panel, .split-wide .split-panel {
    width: 100%; min-width: 0; margin-top: -4rem;
    padding: 2.5rem 1.5rem 4rem; border-right: 0;
    background: var(--grain), var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}
@media (max-width: 575.98px) { .pillars { grid-template-columns: 1fr; } }

/* ==========================================================================
   WHAT WE DO
   ========================================================================== */
.section-dark { padding: clamp(5rem, 4rem + 5vw, 9rem) 0; background: var(--grain), linear-gradient(180deg, var(--bg-2), var(--bg)); }

.framed-img { position: relative; margin: 0; }
.framed-img::before {
  content: ""; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; border: 1px solid var(--line); z-index: 0;
}
.framed-img img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% center; filter: saturate(.95); }
@media (max-width: 991.98px) {
  .framed-img img { aspect-ratio: 16 / 10; }
  .framed-img::before { inset: .75rem -.75rem -.75rem .75rem; }
}

.service-list { list-style: none; padding: 0; margin: 0; }
.service {
  display: flex; gap: 1.5rem; padding: 1.6rem 0; border-top: 1px solid rgba(230, 193, 140, .12);
  transition: padding .4s var(--ease), background .4s var(--ease);
}
.service:last-child { border-bottom: 1px solid rgba(230, 193, 140, .12); }
.service:hover { padding-left: .75rem; background: linear-gradient(90deg, rgba(201, 150, 90, .07), transparent 70%); }
.service-num { font-family: var(--ff-display); color: var(--gold); font-size: 1rem; padding-top: .35rem; min-width: 2rem; }
.service h3 { font-size: 1.4rem; margin-bottom: .35rem; transition: color .3s; }
.service:hover h3 { color: var(--gold-light); }
.service p { margin: 0; }

/* ==========================================================================
   SECTORS
   ========================================================================== */
.sectors { padding: clamp(5rem, 4rem + 5vw, 9rem) 0; overflow: hidden; }
.sectors-bg, .process-bg { position: absolute; inset: -10% 0; background-size: cover; background-position: center; will-change: transform; }
.sectors::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--grain), linear-gradient(180deg, rgba(18, 12, 9, .94) 0%, rgba(18, 12, 9, .78) 45%, rgba(18, 12, 9, .94) 100%);
}
.sectors .container-xxl { z-index: 2; }

.sector-card {
  height: 100%; padding: 2.25rem 1.9rem 2rem;
  background: rgba(26, 18, 13, .62); border: 1px solid var(--line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  position: relative; overflow: hidden;
  transition: transform .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease);
}
.sector-card::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light)); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
.sector-card:hover { transform: translateY(-6px); border-color: rgba(230, 193, 140, .45); background: rgba(35, 24, 17, .78); }
.sector-card:hover::after { transform: scaleX(1); }
.sector-card i { font-size: 2rem; color: var(--gold); display: block; margin-bottom: 1.5rem; }
.sector-card h3 { font-size: 1.3rem; line-height: 1.3; margin-bottom: .75rem; }
.sector-card p { margin: 0; font-size: .97rem; line-height: 1.65; }

/* ==========================================================================
   HOW WE WORK
   ========================================================================== */
.process { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding: 8rem 0 5rem; overflow: hidden; }
.process-bg { background-position: 60% center; }
.process-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(18, 12, 9, .97) 0%, rgba(18, 12, 9, .65) 40%, rgba(18, 12, 9, .1) 75%),
    linear-gradient(90deg, rgba(18, 12, 9, .7) 0%, transparent 55%);
}
.process-head { max-width: 520px; margin-bottom: 4rem; }

.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; position: relative; }
.steps::before { content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--gold), rgba(230, 193, 140, .15)); }
.step { position: relative; padding-top: 2.25rem; }
.step-dot {
  position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--gold-light); box-shadow: 0 0 0 4px rgba(201, 150, 90, .15);
}
.step-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--gold-light); }
.step-num { font-family: var(--ff-display); color: var(--gold); letter-spacing: .2em; font-size: .9rem; }
.step h3 { font-size: 1.6rem; text-transform: uppercase; letter-spacing: .14em; margin: .4rem 0 .6rem; }
.step p { margin: 0; max-width: 260px; }

@media (max-width: 991.98px) {
  .steps { grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; }
  .steps::before { display: none; }
  .step { border-top: 1px solid var(--line); }
  .step-dot { top: -7px; }
}
@media (max-width: 575.98px) { .steps { grid-template-columns: 1fr; } }
@media (max-width: 991.98px) {
  .process-shade { background: linear-gradient(0deg, rgba(18, 12, 9, .97) 0%, rgba(18, 12, 9, .8) 55%, rgba(18, 12, 9, .55) 100%); }
}

/* ==========================================================================
   INNER PAGE HERO (About / Services / Contact)
   ========================================================================== */
.page-hero { position: relative; min-height: 64vh; min-height: 64svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--bg); }
.page-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; animation: heroZoom 14s ease-out both; }
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, var(--bg) 0%, rgba(18, 12, 9, .55) 45%, rgba(18, 12, 9, .7) 100%), linear-gradient(90deg, rgba(18, 12, 9, .75), transparent 70%), var(--grain);
}
.page-hero-contact .page-hero-bg { background-position: center 65%; }
.page-hero-inner { position: relative; z-index: 2; padding-top: calc(var(--nav-h) + 3rem); padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem); }
.page-title { font-size: clamp(2.5rem, 1.6rem + 4vw, 4.8rem); line-height: 1.05; margin-bottom: 1.25rem; max-width: 900px; }
.page-lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); max-width: 620px; margin: 0; }
@keyframes heroZoom { from { transform: scale(1.1); } to { transform: scale(1); } }

.crumbs { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; gap: .6rem; font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-light); }
.crumbs li + li::before { content: "/"; margin-right: .6rem; color: var(--soft); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--gold-light); }

/* ---------- Links + linked cards ---------- */
.link-arrow { font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-light); display: inline-flex; align-items: center; gap: .6rem; }
.link-arrow i { transition: transform .35s var(--ease); }
.link-arrow:hover i { transform: translateX(5px); }

.card-link { display: block; color: var(--muted); }
.card-link:hover { color: var(--muted); }
.card-more { display: inline-flex; gap: .5rem; margin-top: 1.5rem; font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-light); }
.card-link:hover .card-more i { transform: translateX(4px); }
.card-more i { transition: transform .35s var(--ease); }

/* ---------- CTA band ---------- */
.cta-band { padding: clamp(5rem, 4rem + 5vw, 8.5rem) 0; overflow: hidden; background: #0d0806; }
.cta-bg {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #0d0806 0%, rgba(13, 8, 6, .45) 35%, rgba(13, 8, 6, .55) 70%, #0d0806 100%), url("img/contact-bg.jpg") center 62% / cover no-repeat;
}
.cta-band p { font-size: 1.1rem; }

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.contact-main { padding-top: clamp(3rem, 2rem + 3vw, 5rem); }

.contact-list { list-style: none; padding: 0; margin: 2.5rem 0 0; }
.contact-list li { display: flex; gap: 1.25rem; padding: 1.4rem 0; border-top: 1px solid rgba(230, 193, 140, .12); }
.contact-list li:last-child { border-bottom: 1px solid rgba(230, 193, 140, .12); }
.contact-list i {
  flex-shrink: 0; width: 48px; height: 48px; display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--gold); font-size: 1.15rem;
}
.contact-label { display: block; font-size: .75rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-light); margin-bottom: .3rem; }
.contact-value { color: var(--ink); font-size: 1.08rem; line-height: 1.55; }
a.contact-value:hover { color: var(--gold-light); }

.form-card {
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  background: var(--grain), linear-gradient(180deg, rgba(35, 24, 17, .75), rgba(22, 15, 11, .75));
  border: 1px solid var(--line);
}
.form-title { font-size: 1.8rem; margin-bottom: .35rem; }
.form-note { font-size: .9rem; color: var(--soft); margin-bottom: 1.75rem; }
.req { color: var(--gold-light); }
.opt { color: var(--soft); font-size: .85em; }

.form-label { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: .55rem; }
.form-control, .form-select {
  background-color: rgba(13, 8, 6, .6); border: 1px solid rgba(230, 193, 140, .2); border-radius: 0;
  color: var(--ink); padding: .85rem 1rem; font-weight: 300; font-size: 1rem;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s;
}
.form-control::placeholder { color: var(--soft); }
.form-control:focus, .form-select:focus {
  background-color: rgba(13, 8, 6, .85); color: var(--ink);
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 150, 90, .18);
}
.form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e6c18c' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-select option { background: var(--bg-3); color: var(--ink); }
.form-select:invalid, .form-select option[value=""] { color: var(--soft); }
textarea.form-control { resize: vertical; min-height: 160px; }
.form-control.is-invalid, .form-select.is-invalid { border-color: #d9805f; background-image: none; padding-right: 1rem; }
.form-select.is-invalid { background-image: var(--bs-form-select-bg-img); padding-right: 2.25rem; }
.form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow: 0 0 0 3px rgba(217, 128, 95, .2); }
.invalid-feedback { color: #e79a7c; font-size: .85rem; }
.char-count { color: var(--soft); font-size: .8rem; margin-top: .35rem; }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-alert { padding: 1rem 1.25rem; margin-bottom: 1.75rem; border: 1px solid; font-size: .98rem; }
.form-alert.is-success { border-color: rgba(140, 190, 130, .5); background: rgba(90, 140, 80, .12); color: #cfe6c6; }
.form-alert.is-error { border-color: rgba(217, 128, 95, .5); background: rgba(217, 128, 95, .1); color: #f0c3b1; }

.btn-submit { min-width: 220px; display: inline-flex; align-items: center; justify-content: center; gap: .75rem; }
.btn-submit .spinner-border { display: none; }
.btn-submit.is-loading .spinner-border { display: inline-block; }
.btn-submit:disabled { opacity: .75; }

.map-wrap { margin-top: clamp(3rem, 2rem + 3vw, 5rem); border: 1px solid var(--line); height: 400px; position: relative; overflow: hidden; }
.map-wrap iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.85) sepia(.35) invert(.92) hue-rotate(180deg) contrast(.9) brightness(.95); }

@media (max-width: 400px) {
  .g-recaptcha { transform: scale(.9); transform-origin: 0 0; }
}

/* ==========================================================================
   FOOTER + TO TOP
   ========================================================================== */
.site-footer { padding: clamp(3.5rem, 3rem + 2vw, 5rem) 0 0; border-top: 1px solid var(--line); background: var(--grain), #0d0806; font-size: .95rem; color: var(--soft); }
.footer-brand img { height: 36px; width: auto; }
.footer-blurb { margin: 1.25rem 0 0; max-width: 340px; line-height: 1.7; }
.footer-title { font-family: var(--ff-body); font-size: .75rem; font-weight: 400; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 1.25rem; }
.footer-links, .footer-contact { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: .6rem; }
.footer-links a, .footer-contact a { color: var(--muted); }
.footer-links a:hover, .footer-contact a:hover { color: var(--gold-light); }
.footer-contact li { display: flex; gap: .85rem; margin-bottom: .9rem; line-height: 1.6; }
.footer-contact i { color: var(--gold); margin-top: .1rem; }
.footer-bottom {
  margin-top: 3.5rem; padding: 1.5rem 0; border-top: 1px solid rgba(230, 193, 140, .1);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; font-size: .85rem;
}

.to-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1030;
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--line); background: rgba(18, 12, 9, .8); color: var(--gold-light);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .4s var(--ease);
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--gold); color: var(--ink); }

/* ==========================================================================
   REVEAL ANIMATIONS
   ========================================================================== */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: .12s; }
.js .reveal[data-delay="2"] { transition-delay: .24s; }
.js .reveal[data-delay="3"] { transition-delay: .36s; }

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

@media (min-width: 992px) {
  .contact-aside { position: sticky; top: calc(var(--nav-h) + 2rem); }
}
.form-control.is-invalid + .d-flex .invalid-feedback { display: block; }

/* Web CMS: each block sits inside a <section class="sec sec--mk-…"> wrapper; keep its backgrounds contained as before. */
.sec > div, .sec > header { position: relative; }