/*!
Theme Name: Umbra Consultancy
Theme URI: https://umbraconsultancy.ae
Author: Rifad Rafeeque (Adam Apps)
Author URI: https://adamapps.in
Description: A bespoke WordPress theme for Umbra Management Consultancy L.L.C. — Dubai-anchored advisory for risk, project development, marketing research, and feasibility studies. Built on the Umbra brand book v1.0 (July 2026). Every section that an editor might want to update is exposed via ACF Pro fields grouped into accordion tabs (one tab per section). One-click demo importer copies all bundled content + 30+ images into WordPress.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: Proprietary — for Umbra Management Consultancy L.L.C. only
Text Domain: umbra
Tags: business, consultancy, custom-colors, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready

Umbra theme is hand-built. The styles, layout, and component structure mirror
the static v14 design produced as the source of truth. Every section that an
editor might want to update (copy, images, links) is exposed via ACF Pro field
groups — one field group per page template, with each section organised into
its own accordion tab. CSS custom properties mirror the brand book 1:1 — do
not edit them in this file without updating the brand book too.
*/

/* ============================================================
   UMBRA CONSULTANCY — Design System
   Ink & Gold. The Umbra Arc is the signature motif throughout.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,400;1,9..144,400;1,9..144,500&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&display=swap');

:root {
  --ink: #141310;
  --charcoal: #211f1a;
  --gold: #9a6f2a;
  --gold-bright: #c6973a;
  --gold-glow: #d9b558;
  --gold-dark: #6f4e1d;
  --cream: #f6f2e9;
  --paper: #fffdf7;
  --ash: #6b6357;
  --mist: #a89d8a;
  --line-dark: #3a362e;
  --line-light: #e2d9c5;

  --display: 'Space Grotesk', system-ui, sans-serif;
  --accent: 'Fraunces', serif;
  --body: 'Newsreader', Georgia, serif;

  /* Metallic gold for dark backgrounds — uses cream highlights that pop on ink */
  --gradient-gold-metallic: linear-gradient(to right, #bf953f 0%, #fcf6ba 25%, #b38728 50%, #fbf5b7 75%, #aa771c 100%);
  /* Simple gold gradient for buttons — subtle, premium, no shimmer */
  --gradient-gold-button: linear-gradient(135deg, #c6973a 0%, #b88829 50%, #9a6f2a 100%);
  /* Deep gold for light backgrounds — no cream highlights (would wash out on cream) */
  --gradient-gold-deep: linear-gradient(to right, #8a5a18 0%, #c6973a 35%, #6f4e1d 65%, #b88829 100%);
  /* Default = deep (works on both, falls back gracefully) */
  --gradient-gold: var(--gradient-gold-deep);
  --gradient-gold-soft: linear-gradient(to right, #9a6f2a 0%, #c6973a 50%, #6f4e1d 100%);

  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  font-variation-settings: "opsz" 16;
}

p {
  margin: 0 0 1em;
  line-height: 1.65;
  font-weight: 400;
  font-variation-settings: "opsz" 16;
}
p:last-child { margin-bottom: 0; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- Utility type ---------- */
.eyebrow {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 11px;
  background: var(--gradient-gold-soft);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
  -webkit-text-fill-color: var(--gold);
  color: var(--gold);
}

/* Royal Gold gradient text — metallic (cream highlights) for DARK backgrounds only.
   For light backgrounds use .gold-text-light instead — cream highlights wash out on cream. */
.gold-text, h1.gold-text, h1 em.gold-text, h2 em.gold-text { background: var(--gradient-gold-metallic) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; display: inline-block; }
/* Deep gold (no cream) for LIGHT backgrounds — section heads, scope lists, cream cards */
.gold-text-light, .section-head .accent-italic { background: var(--gradient-gold-deep) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent; }
.gold-text-soft { background: var(--gradient-gold-soft); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; display: inline-block; }
.gold-text-metallic { background: linear-gradient(to right, #bf953f 0%, #fcf6ba 25%, #b38728 50%, #fbf5b7 75%, #aa771c 100%); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
ol.scope-list span[style*="color:var(--gold)"] { background: var(--gradient-gold-deep); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
span.accent-italic[style*="color:var(--gold)"], span.accent-italic[style*="color:var(--gold-bright)"] { background: var(--gradient-gold-deep); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
p[style*="color:var(--gold)"], p[style*="color:var(--gold-bright)"] { background: var(--gradient-gold-soft); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -0.015em; }
.accent-italic { font-family: var(--accent); font-style: italic; font-weight: 400; font-variation-settings: "opsz" 36; }

p { line-height: 1.65; color: var(--ash); margin: 0; }
.on-dark p { color: var(--mist); }
.on-dark, .on-dark h1, .on-dark h2, .on-dark h3 { color: var(--paper); }

/* ---------- Body font overrides: keep utility UI in sans for legibility ---------- */
.btn, .breadcrumb, .eyebrow, label, input, textarea,
.legal, .meta, .small-note, .caption {
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: normal;
  letter-spacing: 0.02em;
}
.btn { letter-spacing: 0.02em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 3px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.005em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color .25s ease;
}
.btn-gold {
  background: var(--gradient-gold-button);
  color: var(--ink);
  border: 1px solid rgba(111, 78, 29, 0.5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 2px 6px rgba(111, 78, 29, 0.2);
}
.btn-gold:hover { background: var(--gradient-gold-button); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 4px 10px rgba(111, 78, 29, 0.3); }
.btn-outline-dark {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn-outline-dark:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.btn-outline-light {
  border-color: rgba(255,253,247,0.35);
  color: var(--paper);
  background: transparent;
}
.btn-outline-light:hover { border-color: var(--gold); color: var(--gold-bright); transform: translateY(-2px); }
.btn-arrow { transition: transform .25s ease; }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ============================================================
   NAV
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(246,242,233,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #d8cfb9;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  max-width: var(--container);
  margin: 0 auto;
  gap: 24px;
  position: relative;
}
.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.brand-img {
  height: 76px;
  width: auto;
  display: block;
}
.nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
  margin: 0; padding: 0;
  flex: 1;
  justify-content: center;
}
.nav-links a {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink);
  position: relative;
  padding: 6px 0;
  transition: color .2s ease;
}
.nav-links a:hover { color: var(--gold); }
.nav-links a.active { color: var(--gold); }
.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}
.nav-cta { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
.nav-phone { font-size: 13px; color: var(--mist); }
.nav-phone strong { color: var(--paper); font-weight: 600; }
.nav-toggle {
  display: none;
  position: relative;
  background: var(--ink);
  color: var(--gold);
  font-size: 0;
  line-height: 1;
  width: 48px;
  height: 48px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease;
  box-shadow: 0 2px 8px rgba(20, 19, 16, 0.12);
}
.nav-toggle:hover {
  background: var(--gold);
  transform: scale(1.05);
}
.nav-toggle:hover .nav-toggle-bar,
.nav-toggle:hover .nav-toggle-bar::before,
.nav-toggle:hover .nav-toggle-bar::after {
  background: var(--ink);
}
.nav-toggle[aria-expanded="true"] {
  background: var(--gold);
  transform: rotate(180deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar,
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before,
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after {
  background: var(--ink);
}
/* Custom 2-bar hamburger icon (middle bar) */
.nav-toggle .nav-toggle-bar {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  background: var(--gold);
  transition: background 0.2s ease;
}
.nav-toggle .nav-toggle-bar::before,
.nav-toggle .nav-toggle-bar::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--gold);
  transition: background 0.2s ease;
}
.nav-toggle .nav-toggle-bar::before { top: -6px; }
.nav-toggle .nav-toggle-bar::after { top: 6px; }

/* Mobile menu overlay (hidden by default, toggled by JS) */
.mobile-menu {
  display: none;
  position: fixed;
  top: 78px; left: 0; right: 0;
  background: var(--ink);
  padding: 24px 32px 32px;
  z-index: 99;
  border-top: 1px solid var(--line-dark);
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
}
.mobile-menu.is-open { display: block; }
.mobile-menu ul {
  list-style: none;
  margin: 0; padding: 0;
}
.mobile-menu li { border-bottom: 1px solid var(--line-dark); }
.mobile-menu li:first-child { border-top: 1px solid var(--line-dark); }
.mobile-menu a {
  display: block;
  padding: 16px 0;
  font-family: var(--body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper);
  text-decoration: none;
  font-variation-settings: "opsz" 16;
  transition: color 0.15s ease, padding-left 0.2s ease;
}
.mobile-menu a:hover,
.mobile-menu a.active {
  color: var(--gold-bright);
  padding-left: 8px;
}
.mobile-menu .mobile-cta {
  margin-top: 20px;
  display: block;
  text-align: center;
  padding: 16px 20px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Tablet breakpoint */
@media (max-width: 1024px) {
  .nav-links { gap: 24px; }
  .nav-cta .btn { padding: 10px 16px; font-size: 12px; }
}

/* Mobile breakpoint */
@media (max-width: 768px) {
  .nav {
    padding: 14px 20px;
    gap: 12px;
  }
  .brand-img { height: 64px; }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: flex; }
}

/* ============================================================
   HERO (dark, asymmetric, arc graphic)
   ============================================================ */
.hero {
  background: var(--ink);
  position: relative;
  overflow: hidden;
  padding: 92px 0 76px;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 400px at 85% 15%, rgba(193,146,46,0.10), transparent 70%);
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.85fr;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.hero h1,
.hero--photo h1 {
  font-size: clamp(38px, 5vw, 70px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--paper);
  text-transform: uppercase;
  font-weight: 900;
  margin: 18px 0 22px;
}
.hero h1 em,
.hero--photo h1 em {
  font-style: normal;
  color: var(--gold);
}
.hero .lede,
.hero--photo .lede {
  max-width: 480px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ash);
  margin-bottom: 32px;
}
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.hero-image {
  width: 100%;
  max-width: 460px;
  height: auto;
  filter: drop-shadow(0 40px 80px rgba(0,0,0,0.55)) drop-shadow(0 16px 30px rgba(189,142,61,0.18));
  border-radius: 4px;
}
.hero-image-wrap {
  position: relative;
  padding: 0;
}
.hero-image-wrap::before { content: none; }
.hero-image-wrap::after { content: none; }

/* ---------- Hero with photographic backdrop (home) ---------- */
.hero--photo {
  background-color: var(--ink);
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  padding: 100px 0 90px;
  position: relative;
  color: var(--paper);
}
.hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(95deg, rgba(15,15,12,0.97) 0%, rgba(15,15,12,0.85) 45%, rgba(15,15,12,0.55) 75%, rgba(15,15,12,0.30) 100%),
    radial-gradient(900px 500px at 90% 0%, rgba(189,142,61,0.22), transparent 65%);
  pointer-events: none;
  z-index: 1;
}
.hero--photo .hero-grid { position: relative; z-index: 2; align-items: center; }
.hero--photo h1 { color: var(--paper); }
.hero--photo h1 em { color: transparent; }
.hero--photo .lede { color: rgba(232,225,210,0.92); }
.hero--photo .eyebrow { color: transparent; }
.hero--photo .eyebrow::before { background: var(--gold); }
.hero--photo .hero-image-wrap {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  max-width: 380px;
  margin-left: auto;
  box-shadow: none;
}
.hero--photo .hero-image {
  max-width: 380px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 70px rgba(189,142,61,0.20)) drop-shadow(0 18px 36px rgba(0,0,0,0.55));
  border-radius: 4px;
}
.hero--photo .hero-image-wrap::before { display: none; }
.hero--photo .hero-image-wrap::after { display: none; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-image { max-width: 240px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   SECTIONS
   ============================================================ */
section { padding: 96px 0; }
.section-cream { background: var(--cream); }
.section-ink { background: var(--ink); }
.section-paper { background: var(--paper); }

.section-head {
  max-width: 640px;
  margin-bottom: 56px;
}
.section-head h2 {
  font-size: clamp(28px, 3.4vw, 42px);
  margin-top: 16px;
  line-height: 1.12;
  text-transform: uppercase;
  font-weight: 900;
}
.section-head .accent-italic {
  font-size: clamp(28px, 3.4vw, 42px);
  text-transform: none;
  font-weight: 500;
  display: block;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.section-head p { margin-top: 18px; font-size: 16px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center .eyebrow::before { display: none; }

/* ---------- Arc divider ---------- */
.arc-divider {
  width: 100%;
  height: 46px;
  display: block;
}

/* ---------- Service / feature cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.card {
  background: var(--paper);
  border: 1px solid var(--line-light);
  border-radius: 4px;
  padding: 34px 30px;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  position: relative;
}
.card:hover {
  transform: translateY(-5px);
  border-color: var(--gold);
  box-shadow: 0 18px 40px -20px rgba(20,19,16,0.35);
}
.card .arc-badge { margin-bottom: 20px; }
.card h3 {
  font-size: 19px;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: 0.01em;
}
.card p { font-size: 14.5px; }
.card .card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.arc-badge {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.arc-badge svg { width: 26px; height: 26px; }

/* ---------- CTA banner ---------- */
.cta-banner {
  background: var(--ink);
  border-radius: 6px;
  padding: 64px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  overflow: hidden;
}
.cta-banner::after {
  content: "";
  position: absolute;
  right: -60px; top: -60px;
  width: 260px; height: 260px;
  border: 1px solid rgba(189,142,61,0.40);
  border-radius: 50%;
}
.cta-banner h2 {
  color: var(--paper);
  font-size: clamp(22px, 2.6vw, 32px);
  text-transform: uppercase;
  font-weight: 900;
  max-width: 540px;
  position: relative; z-index: 2;
  padding-right: 40px;
}
.cta-banner .cta-actions { position: relative; z-index: 2; display: flex; gap: 14px; flex-shrink: 0; }

@media (max-width: 760px) {
  .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .cta-banner { flex-direction: column; align-items: flex-start; padding: 40px 28px; gap: 28px; }
  .cta-banner h2 { padding-right: 0; font-size: clamp(20px, 5.5vw, 26px); max-width: 100%; word-break: break-word; }
  .cta-banner .cta-actions { flex-direction: column; align-items: flex-start; width: 100%; }
  .cta-banner .cta-actions .btn { justify-content: center; min-width: 0; max-width: 320px; align-self: flex-start; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--mist);
  padding: 72px 0 28px;
  border-top: 1px solid var(--line-dark);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line-dark);
}
.footer-brand .brand-img { height: 80px; }
.footer-brand p { font-size: 13.5px; margin-top: 16px; max-width: 320px; }
.footer-col h4 {
  font-family: var(--body);
  color: var(--paper);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 18px;
  font-weight: 600;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-col a, .footer-col li { font-size: 14px; color: var(--mist); transition: color .2s; line-height: 1.5; }
.footer-col a:hover { color: var(--gold-bright); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 26px;
  font-size: 12.5px;
  color: #665e50;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom a { color: #665e50; }
.footer-bottom a:hover { color: var(--gold); }

/* Tablet footer: 2x2 grid, brand full width on top */
@media (max-width: 900px) {
  .site-footer { padding: 56px 0 24px; }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 28px;
  }
  .footer-brand {
    grid-column: 1 / -1;
    margin-bottom: 4px;
  }
  .footer-brand p { max-width: 100%; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* Mobile footer: single column stack */
@media (max-width: 560px) {
  .site-footer { padding: 48px 0 22px; }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .footer-brand { grid-column: auto; }
  .footer-col h4 { margin-bottom: 14px; }
  .footer-col ul { gap: 10px; }
  .footer-bottom { font-size: 11.5px; }
}

/* ---------- Global responsive tweaks ---------- */
@media (max-width: 768px) {
  .wrap { padding: 0 20px; }
  .hero { padding: 72px 0 56px; }
  .hero h1 { font-size: clamp(32px, 9vw, 48px); }
  .hero .lede, .hero--photo .lede { font-size: 16px; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .page-hero { padding: 56px 0 48px; }
  .page-hero h1 { font-size: clamp(28px, 7vw, 40px); }
  .page-hero .lede { font-size: 16px; }
  .section { padding: 64px 0; }
  .section h2 { font-size: clamp(24px, 6vw, 36px); }
  .cta-banner { padding: 40px 28px; gap: 24px; }
  .cta-banner h2 { font-size: clamp(18px, 5vw, 24px); max-width: 100%; }
  .cta-banner__inner { gap: 24px; }
  .cta-banner .cta-actions { flex-direction: column; align-items: flex-start; width: 100%; }
  .cta-banner .cta-actions .btn { justify-content: center; min-width: 0; max-width: 320px; align-self: flex-start; }
  .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; gap: 24px; }
  .principal { padding: 32px 24px; gap: 32px; }
  .principal__avatar { width: 56px; height: 56px; font-size: 20px; }
  .form-grid { grid-template-columns: 1fr !important; gap: 14px; }
  .form-card { padding: 28px 24px !important; }
  .contact-card { padding: 28px 24px !important; }
  .page-hero::before, .page-hero::after { display: none; }
  .page-hero--photo { padding: 64px 0 56px; }
  .page-hero--photo .lede { max-width: 100%; }
}

@media (max-width: 480px) {
  .wrap { padding: 0 20px; }
  .hero { padding: 56px 0 48px; }
  .section { padding: 48px 0; }
  .page-hero { padding: 48px 0 40px; }
  .form-card { padding: 24px 20px !important; }
  .contact-card { padding: 24px 20px !important; }
  .form-card h3 { font-size: 20px !important; }
  .field input, .field select, .field textarea { font-size: 16px !important; padding: 14px 14px; }
  .umbra-contact-form .form-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .svc-num-text { font-size: 40px; padding-right: 6px; }
}

/* ============================================================
   Contact form (AJAX)
   ============================================================ */
.umbra-contact-form .req { color: var(--gold); font-weight: 600; }
.umbra-contact-form input[aria-invalid="true"],
.umbra-contact-form select[aria-invalid="true"],
.umbra-contact-form textarea[aria-invalid="true"] {
  border-color: #b14a3a;
  background: #fdf6f3;
}
.umbra-contact-form .btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.umbra-contact-form .btn .btn-arrow { transition: transform .2s ease; }
.umbra-contact-form .btn:hover .btn-arrow { transform: translateX(2px); }
.umbra-contact-form .form-status { transition: opacity .2s ease; }
.umbra-contact-form .form-status.is-success {
  display: block;
  background: #eef6ec;
  border: 1px solid #6b8f5e;
  color: #355c2c;
}
.umbra-contact-form .form-status.is-error {
  display: block;
  background: #fdf0ec;
  border: 1px solid #b14a3a;
  color: #7a2e22;
}
.umbra-contact-form.is-sent .form-grid,
.umbra-contact-form.is-sent .field,
.umbra-contact-form.is-sent button[type="submit"] {
  display: none;
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  background: var(--ink);
  padding: 70px 0 64px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  right: -8%; top: -30%;
  width: 480px; height: 480px;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
}
.page-hero::after {
  content: "";
  position: absolute;
  right: 2%; top: -10%;
  width: 340px; height: 340px;
  border: 1px solid rgba(189,142,61,0.40);
  border-radius: 50%;
}
.page-hero .wrap { position: relative; z-index: 2; }

/* ---------- Page hero with photographic backdrop ---------- */
.page-hero--photo {
  background-color: var(--ink);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 110px 0 96px;
}
.page-hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(15,15,12,0.96) 0%, rgba(15,15,12,0.88) 45%, rgba(15,15,12,0.78) 100%);
  z-index: 1;
}
.page-hero--photo::after { display: none; }
.page-hero--photo .wrap { position: relative; z-index: 2; max-width: 1200px; }
.page-hero--photo .breadcrumb { color: rgba(232,225,210,0.75); }
.page-hero--photo h1 { max-width: 640px; text-shadow: 0 2px 18px rgba(15,15,12,0.5); }
.page-hero--photo .lede { color: rgba(232,225,210,1); text-shadow: 0 1px 2px rgba(15,15,12,0.85), 0 2px 18px rgba(15,15,12,0.7); }
.page-hero--photo-solid::before {
  background: linear-gradient(180deg, rgba(15,15,12,0.92) 0%, rgba(15,15,12,0.78) 50%, rgba(15,15,12,0.62) 100%) !important;
}
.page-hero--photo-solid .lede { color: var(--paper) !important; text-shadow: 0 1px 8px rgba(15,15,12,0.6); max-width: 540px; }
.breadcrumb { font-size: 12.5px; color: var(--mist); margin-bottom: 20px; letter-spacing: .04em; }
.breadcrumb a:hover { color: var(--gold-bright); }
.page-hero h1 {
  font-size: clamp(34px, 5vw, 54px);
  color: var(--paper);
  text-transform: uppercase;
  font-weight: 900;
  line-height: 1.05;
  max-width: 700px;
}
.page-hero .lede { max-width: 560px; margin-top: 18px; font-size: 16.5px; }

/* ---------- Numbered arc steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; counter-reset: step; }
.step { position: relative; padding-top: 6px; text-align: center; }
.step .step-arc {
  width: 56px; height: 56px;
  margin: 0 auto 12px;
  position: relative;
}
.step .step-arc svg { width: 100%; height: 100%; }
.step .step-arc span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--gold-bright);
}
.step h3 { font-size: 15px; text-transform: uppercase; font-weight: 800; margin-bottom: 8px; letter-spacing: .02em; }
.step p { font-size: 13.5px; color: var(--mist); max-width: 240px; margin-left: auto; margin-right: auto; }

/* ---------- Region cards with photographic accent ---------- */
.region-card--photo {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: var(--charcoal);
  display: flex;
  flex-direction: column;
  min-height: 320px;
}
.region-card--photo .region-photo {
  height: 170px;
  background-size: cover;
  background-position: center;
  position: relative;
  flex-shrink: 0;
}
.region-card--photo .region-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,15,12,0.10) 0%, rgba(15,15,12,0.55) 100%);
}
.region-card--photo .region-body {
  padding: 24px 26px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.region-card--photo .region-body h3 { color: var(--paper); margin-top: 8px; font-size: 17px; }
.region-card--photo .region-body p { color: var(--mist); font-size: 14px; margin-top: 8px; }

@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Testimonial ---------- */
.testimonial {
  background: var(--charcoal);
  border-radius: 6px;
  padding: 54px;
  position: relative;
}
.testimonial .quote-mark {
  font-family: var(--accent);
  font-size: 70px;
  color: var(--gold);
  line-height: 0.5;
  display: block;
  margin-bottom: 18px;
}
.testimonial blockquote {
  margin: 0;
  font-family: var(--accent);
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--paper);
}
.testimonial cite {
  display: block;
  margin-top: 26px;
  font-style: normal;
  font-size: 13.5px;
  color: var(--mist);
}
.testimonial cite strong { color: var(--gold-bright); display: block; font-size: 14.5px; margin-bottom: 2px; }

/* ---------- Form (contact) ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ash);
}
.field input, .field select, .field textarea {
  font-family: var(--body);
  font-size: 14.5px;
  padding: 13px 16px;
  border: 1px solid var(--line-light);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(193,146,46,0.15);
}
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- Misc lists ---------- */
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.check-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--ink); }
.check-list li svg { flex-shrink: 0; margin-top: 3px; width: 18px; height: 18px; }
.on-dark .check-list li { color: var(--paper); }

.tag-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.tag {
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 7px 14px; border: 1px solid var(--line-light); border-radius: 30px; color: var(--ash);
}

/* ---------- Service banner strip (services detail pages) ---------- */
.svc-banner {
  height: 240px;
  background-size: cover;
  background-position: center;
  position: relative;
  border-radius: 4px;
  margin-bottom: 36px;
  overflow: hidden;
}

/* ---------- Service number (01 / 02 / 03 / 04) ----------
   Stacked above the eyebrow+heading row (editorial layout).
   The number is a large display element that reads ABOVE the
   decorative dash line, with the eyebrow as a label below it. */
.svc-num-text {
  font-family: var(--accent);
  font-style: italic;
  font-weight: 500;
  font-size: 52px;
  line-height: 1;
  color: var(--gold);
  font-variation-settings: "opsz" 36;
  /* Optical-center the italic digit (lean is leftward, so nudge right) */
  padding-right: 8px;
}
.svc-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,19,16,0.10) 0%, rgba(20,19,16,0.40) 100%);
}
.svc-banner .svc-banner-tag {
  position: absolute;
  bottom: 18px;
  left: 22px;
  z-index: 2;
  color: var(--paper);
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: rgba(15,15,12,0.65);
  padding: 6px 12px;
  border-radius: 3px;
  border: 1px solid rgba(193,146,46,0.32);
}

/* ---------- Service cards with photographic header ---------- */
.service-card--photo {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-light);
  border-radius: 4px;
  background: var(--paper);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  text-decoration: none;
  color: inherit;
}
.service-card--photo:hover {
  transform: translateY(-5px);
  border-color: var(--gold);
  box-shadow: 0 18px 40px -20px rgba(20,19,16,0.35);
}
.service-card--photo .svc-photo {
  height: 200px;
  background-size: cover;
  background-position: center;
  position: relative;
  flex-shrink: 0;
}
.service-card--photo .svc-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,19,16,0.20) 0%, rgba(20,19,16,0.50) 100%);
}
.service-card--photo .svc-photo .svc-photo-tag {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  font-family: var(--display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--paper);
  background: rgba(15,15,12,0.65);
  padding: 6px 12px;
  border-radius: 30px;
  border: 1px solid rgba(193,146,46,0.40);
}
.service-card--photo .svc-body { padding: 28px 28px 32px; }
.service-card--photo .svc-body h3 {
  font-size: 19px;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.service-card--photo .svc-body p { font-size: 14.5px; color: var(--ash); }
.service-card--photo .svc-body .svc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* ---------- Contact info photo block ---------- */
.contact-photo {
  position: relative;
  background-color: var(--charcoal);
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  overflow: hidden;
  min-height: 360px;
  display: flex;
  align-items: flex-end;
  padding: 32px;
}
.contact-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,15,12,0.20) 0%, rgba(15,15,12,0.85) 100%);
}
.contact-photo-inner { position: relative; z-index: 2; color: var(--paper); }
.contact-photo-inner .eyebrow { color: transparent; }
.contact-photo-inner .caption { font-size: 13px; color: var(--mist); margin-top: 8px; max-width: 340px; }

/* ---------- About / split photo + text ---------- */
.split-photo {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.split-photo .split-img {
  height: 380px;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  position: relative;
}
.split-photo .split-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,19,16,0.04) 0%, rgba(20,19,16,0.28) 100%);
  border-radius: 4px;
}
.split-photo .split-img .split-caption {
  position: absolute;
  bottom: 18px;
  left: 22px;
  z-index: 2;
  color: var(--paper);
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(15,15,12,0.55);
  padding: 6px 12px;
  border-radius: 3px;
  border: 1px solid rgba(193,146,46,0.30);
}
@media (max-width: 860px) {
  .split-photo { grid-template-columns: 1fr; gap: 32px; }
  .split-photo .split-img { height: 260px; }
}

/* ---------- animations ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

.draw-path {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: draw 2.2s ease forwards 0.3s;
}
@keyframes draw { to { stroke-dashoffset: 0; } }