/* ══════════════════════════════════════════════════════════════════════
   LUCERO COMMERCIAL GROUP — DESIGN SYSTEM
   styles.css
   ══════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   § 1. DESIGN TOKENS
   ════════════════════════════════════════════════════════════════════ */

:root {

  /* ── BRAND COLORS ── */
  --gold:           #D4AD55;
  --gold-lt:        #E8C96E;
  --gold-ghost:     rgba(201,168,76,.38);   /* decorative numbers: .case-n, .svc-num */
  --gold-tint:      rgba(212,173,85,.12);   /* subtle gold tint bg: tx-pill, scrollbar */

  /* ── BACKGROUND SCALE ── */
  --black:          #0C0B09;
  --bg-deeper:      #060606;               /* #markets — deepest bg */
  --dark:           #111009;
  --mid:            #1A1915;

  /* ── TEXT COLORS ── */
  --text:           #F5F2EC;               /* solid text — body, headings */
  --text-strong:    #F0EDE6;               /* <strong> in body copy */
  --muted:          rgba(245,242,236,.95);
  --text-dim:       rgba(245,242,236,.5);  /* subdued labels: proof-stat-l, hero-scroll */

  /* ── BORDER ── */
  --border:         rgba(212,173,85,.22);

  /* ── LAYOUT ── */
  --pad:            clamp(24px, 5vw, 80px);
  --sec:            clamp(72px, 10vw, 140px);
  --nav-h:          76px;
  --btn-h:          52px;                  /* standard button min-height */

  /* ── SPACING SCALE (4pt base) ──────────────────────────────────────
     Token   Value   Usage
     --sp-1   4px    micro gaps, fine borders
     --sp-2   8px    compact gaps, nav internals
     --sp-2h  10px   small gaps, minor margins
     --sp-3   12px   form gaps, tight padding
     --sp-3h  14px   hero-actions gap, small margins
     --sp-4   16px   standard padding, card gaps
     --sp-4h  18px   section eyebrow margin
     --sp-5   20px   card padding (sm), list gaps
     --sp-6   24px   card padding, badge gap
     --sp-7   28px   heading margins, section gaps
     --sp-8   32px   footer padding, medium gaps
     --sp-9   36px   section padding variants
     --sp-10  40px   section padding, proof gap
     --sp-11  44px   section header margin
     --sp-12  48px   section content margin
     --sp-14  56px   hero divider, large margin
     --sp-16  64px   founder mobile padding
   ─────────────────────────────────────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-2h: 10px;
  --sp-3:  12px;
  --sp-3h: 14px;
  --sp-4:  16px;
  --sp-4h: 18px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-9:  36px;
  --sp-10: 40px;
  --sp-11: 44px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;

  /* ── FONT SIZE SCALE ────────────────────────────────────────────────
     Token       Value                     Usage
     --fs-2xs    8px                       hero-scroll label
     --fs-xs     9px                       stat-l, cases-arrow-label
     --fs-sm     10px                      svc-cta-link, opps-count labels
     --fs-base   11px                      most labels, sec-label, nav links
     --fs-md     13px                      nav-logo, foot-logo, mkt links
     --fs-body   clamp(14px,1.3vw,16px)    primary body text
     --fs-body-md 15px                     forms, table body
   ─────────────────────────────────────────────────────────────────── */
  --fs-2xs:    8px;
  --fs-xs:     9px;
  --fs-sm:     10px;
  --fs-base:   11px;
  --fs-md:     13px;
  --fs-body:   clamp(14px, 1.3vw, 16px);
  --fs-body-md: 15px;

  /* ── LETTER SPACING SCALE ───────────────────────────────────────────
     Token    Value    Usage
     --ls-sm  .16em    mkt h3, insights link, sub-menu
     --ls-md  .18em    nav links, badge-label, tx-pill
     --ls-lg  .20em    award-yr, foot-lic, case-metric-link
     --ls-xl  .22em    nav-logo, btn-gold, btn-ghost, field label  ← most used
     --ls-2xl .28em    case-tag, tx-table th, founder-role
     --ls-3xl .30em    hero-scroll, opps-count-label, ci-label
   ─────────────────────────────────────────────────────────────────── */
  --ls-sm:  .16em;
  --ls-md:  .18em;
  --ls-lg:  .20em;
  --ls-xl:  .22em;
  --ls-2xl: .28em;
  --ls-3xl: .30em;

  /* ── TRANSITIONS ── */
  --t-fast:  .2s;
  --t-base:  .25s;
  --t-slow:  .4s;
}


/* ════════════════════════════════════════════════════════════════════
   § 2. RESET
   ════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--black); color: var(--text); font-family: 'Barlow', sans-serif; font-weight: 400; line-height: 1.75; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }


/* ════════════════════════════════════════════════════════════════════
   § 3. SHARED TYPOGRAPHY BASE
   Grouped selectors eliminate 52 repeated font-family declarations
   and 50 repeated text-transform declarations.
   ════════════════════════════════════════════════════════════════════ */

/* All Cormorant Garamond elements */
h1, h2, h3,
.phil-quote,
.founder-name, .founder-bg-letter,
.case-title, .case-n, .case-metric strong,
.svc-num,
.stat-n, .proof-stat-n, .opps-count-n,
.tx-table td:first-child {
  font-family: 'Cormorant Garamond', serif;
}

/* Cormorant weight 300 subset (display / light) */
h1, h2, h3,
.phil-quote,
.founder-name, .founder-bg-letter,
.case-n, .svc-num,
.stat-n, .proof-stat-n, .opps-count-n,
.tx-table td:first-child {
  font-weight: 300;
}

/* All Barlow Condensed elements */
.nav-logo, .nav-links a, .nav-links .nav-btn,
.hero-eyebrow, .hero-scroll, .hero-strip-item .strip-label,
.btn-gold, .btn-ghost,
.sec-label, .sec-h2,
.founder-role, .award-yr, .award-title, .badge-label, .badge-label strong,
.case-tag, .case-metric, .cases-arrow-label, .cases-arrow-label,
.tx-table th, .tx-pill,
.sector-name,
.svc-name, .svc-cta-link,
.mkt h3, .mkt-link, .mkt-link-row + a,
.diff-t,
.insights-all-link,
.proof-stat-l, .opps-count-label, .opps-count-btn,
.stat-l,
.field label, .ci-label,
.form-submit, .cta-submit,
.foot-logo, .foot-lic,
.ov-main, .ov-sub a, .ov-cta,
.case-metric-link, .sec-subtitle-right + .sec-link-btns a {
  font-family: 'Barlow Condensed', sans-serif;
}

/* Uppercase label subset (Barlow Condensed + uppercase) */
.nav-logo, .nav-links a, .nav-links .nav-btn,
.hero-eyebrow, .hero-scroll, .hero-strip-item .strip-label,
.btn-gold, .btn-ghost,
.sec-label,
.founder-role, .award-yr, .badge-label,
.case-tag, .case-metric, .cases-arrow-label,
.tx-table th, .tx-pill,
.sector-name,
.svc-name, .svc-cta-link,
.mkt h3, .mkt-link,
.diff-t,
.insights-all-link,
.proof-stat-l, .opps-count-label, .opps-count-btn,
.stat-l,
.field label, .ci-label,
.form-submit, .cta-submit,
.foot-logo, .foot-lic,
.ov-main, .ov-sub a, .ov-cta,
.case-metric-link {
  text-transform: uppercase;
}

/* Body text: clamp fluid size + muted color — consolidated from 6 identical declarations */
.hero-sub,
.founder-body,
.expertise-body,
.phil-body,
.cases-hd > p,
.tx-hd > p,
.svc-intro > p {
  font-size: var(--fs-body);
  color: var(--muted);
}

/* Strong text color within body copy */
.founder-body strong,
.expertise-body strong,
.phil-body strong {
  color: var(--text-strong);
  font-weight: 400;
}


/* ════════════════════════════════════════════════════════════════════
   § 4. UTILITIES
   ════════════════════════════════════════════════════════════════════ */

.skip { position: absolute; top: -60px; left: 16px; z-index: 9999; background: var(--gold); color: #000; padding: var(--sp-2h) var(--sp-4h); font-weight: 700; font-size: var(--fs-md); transition: top var(--t-slow); }
.skip:focus { top: 0; }

/* Custom cursor (desktop only) */
.cur, .cur-ring { display: none; pointer-events: none; position: fixed; border-radius: 50%; z-index: 8000; transform: translate(-50%,-50%); opacity: 0; transition: opacity .3s; }
@media (hover:hover) and (pointer:fine) {
  .cur { display: block; width: var(--sp-2); height: var(--sp-2); background: rgba(255,255,255,0.90); }
  .cur-ring { display: block; width: 34px; height: 34px; border: 1.5px solid rgba(255,255,255,0.40); transition: width var(--t-base), height var(--t-base), border-color var(--t-base); }
}
.js-cursor-active, .js-cursor-active * { cursor: none !important; }

/* Scroll reveal */
.rev { opacity: 1; transform: none; }
.js-ready .rev { opacity: 0; transform: translateY(24px); transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1); }
.js-ready .rev.on { opacity: 1; transform: none; }
.d1 { transition-delay: .1s; } .d2 { transition-delay: .2s; } .d3 { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) { .js-ready .rev { opacity: 1; transform: none; } }

/* Anti-spam honeypot */
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }


/* ════════════════════════════════════════════════════════════════════
   § 5. NAVIGATION
   ════════════════════════════════════════════════════════════════════ */

#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad); height: var(--nav-h);
  background: rgba(12,11,9,0);
  transition: background var(--t-slow);
}
#nav.scrolled { background: rgba(12,11,9,.97); border-bottom: 1px solid var(--border); }

.nav-logo { font-size: var(--fs-md); font-weight: 700; letter-spacing: var(--ls-xl); color: var(--text); white-space: nowrap; flex-shrink: 0; }
.nav-logo span { color: var(--gold); }

.nav-links { display: flex; align-items: center; gap: clamp(var(--sp-4),2.5vw,var(--sp-9)); list-style: none; }
.nav-links a { font-size: var(--fs-base); font-weight: 500; letter-spacing: var(--ls-md); color: rgba(245,242,236,.7); transition: color var(--t-fast); white-space: nowrap; }
.nav-links a:hover { color: var(--gold); }
.nav-links .nav-btn { background: var(--gold); color: #000 !important; padding: 9px var(--sp-4); font-weight: 700; transition: background var(--t-base); letter-spacing: .12em; }
.nav-links .nav-btn:hover { background: var(--gold-lt); }

/* Hamburger */
.nav-burger {
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: var(--sp-11); height: var(--sp-11);
  background: none; border: none; cursor: pointer; flex-shrink: 0; padding: var(--sp-2);
  position: relative; z-index: 2;
}
.nav-burger span { display: block; width: 22px; height: 1.5px; background: var(--gold); transition: transform .3s, opacity .3s; }
.nav-burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Dropdown */
.has-sub { position: relative; }
.sub-menu {
  display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: rgba(12,11,9,.98); border: 1px solid var(--border);
  padding: var(--sp-3) 0 var(--sp-2); min-width: 230px; z-index: 1100; white-space: nowrap;
  box-shadow: 0 var(--sp-4) var(--sp-12) rgba(0,0,0,.6);
  max-height: 80vh; overflow-y: auto;
}
.sub-menu li { list-style: none; }
.sub-menu a { display: block; padding: var(--sp-2h) var(--sp-5); font-size: var(--fs-base); font-weight: 500; letter-spacing: var(--ls-sm); color: rgba(245,242,236,.7); transition: color var(--t-fast), background var(--t-fast); }
.sub-menu a:hover { color: var(--gold); background: rgba(212,173,85,.06); }
.has-sub:hover .sub-menu, .has-sub:focus-within .sub-menu { display: block; }
.has-sub > a { padding-bottom: var(--sp-3); }
.has-sub > a::after { content: ''; display: inline-block; width: 5px; height: 5px; border-right: 1px solid rgba(212,173,85,.5); border-bottom: 1px solid rgba(212,173,85,.5); transform: rotate(45deg); margin-left: var(--sp-1h,6px); vertical-align: middle; margin-top: -2px; }

/* Mobile overlay */
#nav-overlay {
  display: none !important; visibility: hidden;
  position: fixed; inset: 0; z-index: 999;
  background: rgba(8,8,8,.99);
  flex-direction: column; align-items: stretch; justify-content: flex-start;
  padding-top: var(--nav-h); overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
#nav-overlay.is-open { display: flex !important; visibility: visible; }
.ov-group { border-bottom: 1px solid rgba(255,255,255,.07); flex-shrink: 0; }
.ov-main {
  font-size: 15px; font-weight: 700; letter-spacing: var(--ls-sm);
  color: rgba(245,242,236,.85);
  display: flex; align-items: center; justify-content: space-between;
  padding: 17px var(--sp-6); width: 100%; background: none; border: none; cursor: pointer;
  text-align: left; transition: color var(--t-fast);
}
.ov-main:hover, .ov-main[aria-expanded="true"] { color: var(--gold); }
.ov-arrow { width: var(--sp-4); height: var(--sp-4); flex-shrink: 0; position: relative; margin-left: var(--sp-2h); transition: transform var(--t-base); }
.ov-arrow::before, .ov-arrow::after { content: ''; position: absolute; top: 50%; left: 50%; width: 7px; height: 1.5px; background: rgba(212,173,85,.6); transform-origin: center; }
.ov-arrow::before { transform: translate(-50%,-50%) rotate(-40deg) translateX(2.5px); }
.ov-arrow::after  { transform: translate(-50%,-50%) rotate(40deg) translateX(-2.5px); }
.ov-main[aria-expanded="true"] .ov-arrow::before { transform: translate(-50%,-50%) rotate(40deg) translateX(2.5px); }
.ov-main[aria-expanded="true"] .ov-arrow::after  { transform: translate(-50%,-50%) rotate(-40deg) translateX(-2.5px); }
.ov-sub { display: none; flex-direction: column; background: rgba(255,255,255,.02); border-top: 1px solid rgba(255,255,255,.05); padding: var(--sp-1h,6px) 0 var(--sp-3); }
.ov-sub.open { display: flex; }
.ov-sub a { font-size: var(--fs-3h,12px); font-weight: 500; letter-spacing: var(--ls-sm); color: rgba(212,173,85,.72); padding: var(--sp-2h) var(--sp-6) var(--sp-2h) var(--sp-10); transition: color var(--t-fast), background var(--t-fast); }
.ov-sub a:hover { color: var(--gold); background: rgba(212,173,85,.04); }
.ov-cta { font-size: var(--fs-md); font-weight: 700; letter-spacing: var(--ls-md); background: var(--gold); color: #000 !important; padding: var(--sp-4h) var(--sp-6); margin: var(--sp-5) var(--sp-5) var(--sp-7); text-align: center; display: block; flex-shrink: 0; }
.ov-cta:hover { background: var(--gold-lt); }

@media (max-width: 1060px) { .nav-links { gap: var(--sp-4); } }
@media (max-width: 860px)  { .nav-links { display: none; } .nav-burger { display: flex; } }
@media (max-width: 860px)  { .has-sub > a::after { display: none; } .sub-menu { display: none !important; } }


/* ════════════════════════════════════════════════════════════════════
   § 6. HERO
   ════════════════════════════════════════════════════════════════════ */

#hero { min-height: 100svh; display: grid; grid-template-columns: 1fr 1fr; position: relative; overflow: hidden; }

.hero-left {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--nav-h) + 60px) clamp(var(--sp-8),5vw,var(--sp-20,80px)) clamp(60px,8vw,100px);
  position: relative; z-index: 2;
  background: linear-gradient(105deg, var(--black) 55%, rgba(12,11,9,.58) 100%);
}
.hero-left::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(to bottom, transparent 10%, var(--gold) 40%, var(--gold) 60%, transparent 90%); }

.hero-right { position: relative; overflow: hidden; }
.hero-right img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: brightness(.75) saturate(1.1); }
.hero-right::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, var(--black) 0%, transparent 40%), linear-gradient(to top, rgba(12,11,9,.48) 0%, transparent 50%); }

/* Asset strip */
.hero-strip { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; display: flex; gap: 2px; }
.hero-strip-item { flex: 1; height: 88px; overflow: hidden; position: relative; cursor: default; }
.hero-strip-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, filter .4s; filter: brightness(.55) saturate(.8); }
.hero-strip-item:hover img { transform: scale(1.08); filter: brightness(.75) saturate(1.1); }
.hero-strip-item .strip-label { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 0 var(--sp-1) var(--sp-2); font-size: 8.5px; font-weight: 700; letter-spacing: var(--ls-lg); color: rgba(245,242,236,.9); text-align: center; background: linear-gradient(to top, rgba(12,11,9,.68) 0%, transparent 70%); }
.hero-strip-item .strip-bar { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--t-slow); }
.hero-strip-item:hover .strip-bar { transform: scaleX(1); }

/* Hero content */
.hero-eyebrow { display: flex; align-items: center; gap: var(--sp-3h); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .4em; color: var(--gold); margin-bottom: var(--sp-7); }
.hero-eyebrow::before { content: ''; width: var(--sp-9); height: 1px; background: var(--gold); flex-shrink: 0; }
h1 { font-size: clamp(52px, 7vw, 108px); line-height: .9; letter-spacing: -.02em; margin-bottom: var(--sp-8); }
h1 em { font-style: italic; color: var(--gold); display: block; }
.hero-divider { width: var(--sp-14); height: 1px; background: var(--gold); margin-bottom: var(--sp-7); }
.hero-sub { line-height: 1.9; max-width: 480px; margin-bottom: var(--sp-11); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3h); align-items: center; margin-bottom: var(--sp-14); }
.btn-gold { display: inline-flex; align-items: center; font-size: var(--fs-3h,12px); font-weight: 700; letter-spacing: var(--ls-xl); background: var(--gold); color: #000; padding: var(--sp-4) var(--sp-9); transition: background var(--t-base); min-height: var(--btn-h); }
.btn-gold:hover { background: var(--gold-lt); }
.btn-ghost { display: inline-flex; align-items: center; font-size: var(--fs-3h,12px); font-weight: 500; letter-spacing: var(--ls-xl); color: var(--muted); border: 1px solid rgba(212,173,85,.35); padding: 15px var(--sp-7); min-height: var(--btn-h); transition: border-color var(--t-base), color var(--t-base); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.hero-stats { display: grid; grid-template-columns: repeat(4, auto); gap: clamp(var(--sp-5),3vw,var(--sp-12)); justify-content: start; padding-top: var(--sp-10); border-top: 1px solid rgba(212,173,85,.15); }
.stat-n { font-size: clamp(26px, 3.5vw, 44px); color: var(--gold); line-height: 1; }
.stat-l { font-size: var(--fs-xs); letter-spacing: .24em; color: rgba(245,242,236,.65); margin-top: 5px; }

/* Scroll indicator */
.hero-scroll { position: absolute; bottom: clamp(var(--sp-5),3vw,var(--sp-9)); right: clamp(var(--sp-6),3vw,var(--sp-12)); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); font-size: var(--fs-2xs); letter-spacing: var(--ls-3xl); color: var(--text-dim); z-index: 4; }
.hero-scroll-line { width: 1px; height: var(--sp-12); background: var(--border); overflow: hidden; position: relative; }
.hero-scroll-line::after { content: ''; position: absolute; inset: 0; background: var(--gold); animation: scrl 2s ease-in-out infinite; }
@keyframes scrl { 0%{transform:translateY(-100%)} 100%{transform:translateY(100%)} }

@media (max-width: 860px) {
  #hero { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .hero-left { padding-top: calc(var(--nav-h) + var(--sp-10)); background: transparent; grid-row: 1; }
  .hero-left::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, var(--black) 0%, var(--black) 52%, rgba(12,11,9,.72) 72%, transparent 94%), linear-gradient(to bottom, rgba(12,11,9,.95) 0%, rgba(12,11,9,.85) 60%, rgba(12,11,9,.3) 100%); }
  .hero-right { grid-row: 1; position: absolute; inset: 0; }
  .hero-right::after { background: linear-gradient(to top, var(--black) 20%, rgba(12,11,9,.55) 50%, transparent 80%), linear-gradient(to right, rgba(12,11,9,.25) 0%, transparent 55%); }
  .hero-strip { position: relative; grid-row: 2; }
  .hero-strip-item { height: var(--sp-16); }
  .hero-stats { grid-template-columns: repeat(2,auto); }
  .hero-scroll { display: none; }
}
@media (max-width: 480px) { .hero-strip-item .strip-label { font-size: 7px; letter-spacing: .12em; } }


/* ════════════════════════════════════════════════════════════════════
   § 7. SECTION SYSTEM
   ════════════════════════════════════════════════════════════════════ */

section { padding: var(--sec) var(--pad); }

/* Section label (eyebrow above h2) */
.sec-label { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-base); font-weight: 500; letter-spacing: .34em; color: var(--gold); margin-bottom: var(--sp-4h); }
.sec-label::before { content: ''; width: 22px; height: 1px; background: var(--gold); flex-shrink: 0; }

/* Heading scale */
h2 { font-size: clamp(36px, 5vw, 72px); line-height: 1.05; }
h2 em { font-style: italic; color: var(--gold); }
h3 { font-size: clamp(18px, 2vw, 26px); }
.sec-h2 { font-size: clamp(32px, 3.8vw, 52px); line-height: 1.05; } /* smaller in-section variant */
.sec-h2 em { font-style: italic; color: var(--gold); }

/* Gold rule */
.rule { width: var(--sp-14); height: 1px; background: var(--gold); margin: var(--sp-7) 0; }
.sec-rule-hr { border: none; border-top: 1px solid var(--border); margin: clamp(var(--sp-8),4vw,var(--sp-13,52px)) 0; }

/* Section container patterns */
.sec-action-paths    { padding: var(--sec) var(--pad); background: var(--black); border-bottom: 1px solid var(--border); }
.sec-featured-opps   { padding: var(--sec) var(--pad); background: var(--dark); border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.sec-expertise       { padding: var(--sec) var(--pad); background: var(--dark); border-bottom: 1px solid var(--border); }
.sec-latest-insights { padding: var(--sec) var(--pad); background: var(--dark); border-top: 1px solid var(--border); }
.sec-proof-strip     { background: var(--mid); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: clamp(var(--sp-10),5vw,var(--sp-18,72px)) var(--pad); }
.sec-contact         { padding: 0; }

/* Section photo background (featured-opps) */
.sec-bg-img { position: absolute; inset: 0; background-image: linear-gradient(rgba(12,11,9,.55),rgba(12,11,9,.72)), url(img-multiresidential.webp); background-size: cover; background-position: center; transform: scale(1.05); z-index: 0; }
.sec-content-layer { position: relative; z-index: 1; }

/* Section header: 2-col grid with label left, links right */
.sec-hd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--sp-7),4vw,60px); align-items: end; margin-bottom: clamp(var(--sp-8),4vw,var(--sp-13,52px)); }
.sec-hd-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: var(--sp-3); }
.sec-hd-right-flex { display: flex; flex-wrap: wrap; gap: var(--sp-2h); justify-content: flex-end; align-items: flex-end; }
.sec-subtitle-right { font-size: clamp(var(--fs-md),1.2vw,15px); line-height: 1.8; color: var(--muted); text-align: right; max-width: 420px; }
.sec-link-btns { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; }

/* Grid patterns */
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; }
.grid-auto-185 { display: grid; grid-template-columns: repeat(auto-fit,minmax(185px,1fr)); gap: 2px; }

/* Small outline link button used in section headers */
.mkt-link { font-family: 'Barlow Condensed', sans-serif; font-size: var(--fs-base); font-weight: 600; letter-spacing: var(--ls-sm); text-transform: uppercase; color: var(--gold); border: 1px solid var(--border); padding: var(--sp-2) var(--sp-4); transition: border-color var(--t-fast), background var(--t-fast); }
.mkt-link:hover { border-color: var(--gold); background: rgba(212,173,85,.06); }

/* Scroll fade-in */
.js-ready section:not(#hero) { opacity: 1; transform: none; }
.js-ready section.sec-vis { opacity: 1; transform: none; }
.js-ready #hero { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .js-ready section:not(#hero) { opacity: 1; transform: none; transition: none; } }


/* ════════════════════════════════════════════════════════════════════
   § 8. FOUNDER / ABOUT
   ════════════════════════════════════════════════════════════════════ */

#founder { padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.founder-visual { background: linear-gradient(135deg, #131308 0%, #0a0a06 100%); display: flex; align-items: center; justify-content: center; padding: var(--sec) var(--pad); position: relative; overflow: hidden; min-height: 560px; }
.founder-bg-letter { position: absolute; right: -10px; bottom: -20px; font-size: 200px; color: rgba(201,168,76,.05); line-height: 1; user-select: none; pointer-events: none; }
.founder-card { position: relative; z-index: 1; border: 1px solid var(--border); padding: var(--sp-10); max-width: 340px; width: 100%; }
.founder-name { font-size: 28px; margin-bottom: var(--sp-1); }
.founder-role { font-size: var(--fs-3h,12px); letter-spacing: var(--ls-2xl); color: var(--gold); margin-bottom: var(--sp-6); }
.founder-facts { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.founder-facts li { font-size: var(--fs-body-md,14px); line-height: 1.75; color: var(--muted); padding-left: var(--sp-5); position: relative; }
.founder-facts li::before { content: '—'; position: absolute; left: 0; color: var(--gold); font-size: var(--fs-sm); top: 3px; }
.founder-content { padding: var(--sec) clamp(var(--sp-8),5vw,var(--sp-20,80px)); display: flex; flex-direction: column; justify-content: center; }
.founder-body { line-height: 1.9; margin: var(--sp-7) 0 var(--sp-9); }
.awards { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.award { background: var(--mid); padding: var(--sp-4) var(--sp-5); border-left: 2px solid var(--gold); }
.award-yr { font-size: var(--fs-base); letter-spacing: var(--ls-lg); color: var(--gold); margin-bottom: var(--sp-1); }
.award-title { font-size: var(--fs-md); letter-spacing: .06em; color: var(--muted); line-height: 1.5; }
.licence-badges { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-7); }
.badge { display: flex; align-items: center; gap: var(--sp-2); background: var(--mid); border: 1px solid var(--border); padding: var(--sp-2h) var(--sp-4); }
.badge-label { font-size: var(--fs-3h,12px); letter-spacing: var(--ls-md); color: var(--muted); }
.badge-label strong { color: var(--gold); display: block; font-size: var(--fs-body-md,14px); }

@media (max-width: 860px) {
  #founder { grid-template-columns: 1fr; }
  .founder-visual { min-height: auto; padding: var(--sp-16) var(--pad); }
  .founder-bg-letter { font-size: 130px; }
  .founder-content { padding: var(--sp-14) var(--pad); }
  .awards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .founder-card { padding: 26px; }
  .awards { grid-template-columns: 1fr; }
  .licence-badges { flex-direction: column; }
}


/* ════════════════════════════════════════════════════════════════════
   § 9. EXPERTISE / SECTORS
   ════════════════════════════════════════════════════════════════════ */

.expertise-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--sp-8),6vw,var(--sp-20,80px)); align-items: end; margin-bottom: var(--sp-12); }
.expertise-body { line-height: 1.85; }
.sectors { display: grid; grid-template-columns: repeat(4,1fr); gap: 3px; }
.sector { position: relative; overflow: hidden; min-height: 280px; display: flex; flex-direction: column; justify-content: flex-end; cursor: default; }
.sector-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease, filter .5s; filter: brightness(.45) saturate(.9); }
.sector:hover .sector-img { transform: scale(1.06); filter: brightness(.6) saturate(1); }
.sector-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,11,9,.95) 0%, rgba(12,11,9,.4) 55%, transparent 100%); transition: opacity var(--t-slow); }
.sector:hover .sector-overlay { opacity: .85; }
.sector-content { position: relative; z-index: 2; padding: 22px var(--sp-5); }
.sector::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .5s; z-index: 3; }
.sector:hover::before { transform: scaleX(1); }
.sector-name { font-size: var(--sp-4); font-weight: 700; letter-spacing: .07em; margin-bottom: var(--sp-2h); color: var(--text); }
.sector-desc { font-size: var(--fs-body-md,14px); line-height: 1.75; color: var(--muted); }

@media (max-width: 1060px) { .sectors { grid-template-columns: repeat(2,1fr); } .expertise-intro { grid-template-columns: 1fr; gap: var(--sp-7); } }
@media (max-width: 560px) { .sectors { grid-template-columns: 1fr 1fr; } .sector { min-height: 200px; } }


/* ════════════════════════════════════════════════════════════════════
   § 10. ACTION PATHS (numbered service cards)
   ════════════════════════════════════════════════════════════════════ */

.svc { padding: var(--sp-10) var(--sp-8); border: 1px solid var(--border); transition: border-color .3s, background .3s; }
.svc:hover { border-color: rgba(201,168,76,.45); background: rgba(201,168,76,.02); }
.svc-num { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 56px; color: var(--gold-ghost); line-height: 1; margin-bottom: var(--sp-3h); }
.svc-name { font-size: 17px; font-weight: 700; letter-spacing: .07em; margin-bottom: var(--sp-3); }
.svc-desc { font-size: var(--fs-body-md,14px); line-height: 1.8; color: var(--muted); }
.svc-block { text-decoration: none; display: block; }
.svc-cta-link { font-size: var(--fs-sm); letter-spacing: var(--ls-md); color: var(--gold); margin-top: var(--sp-4h); border-bottom: 1px solid rgba(212,173,85,.3); padding-bottom: 2px; display: inline-block; }

/* Services page grid */
.svc-intro { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(var(--sp-7),5vw,60px); align-items: end; }
.svc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; margin-top: var(--sp-12); }
@media (max-width: 1060px) { .svc-grid { grid-template-columns: repeat(2,1fr); } .svc-intro { grid-template-columns: 1fr; gap: var(--sp-6); } }
@media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } }


/* ════════════════════════════════════════════════════════════════════
   § 11. FEATURED OPPORTUNITIES
   ════════════════════════════════════════════════════════════════════ */

.case { flex: 0 0 calc(25% - 2px); min-width: 260px; background: var(--mid); padding: var(--sp-9) var(--sp-7); scroll-snap-align: start; position: relative; overflow: hidden; transition: transform .35s; }
.case:hover { transform: scale(1.025); box-shadow: 0 var(--sp-1h,6px) var(--sp-7) rgba(0,0,0,.4); z-index: 2; }
.case::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-lt)); }
.case-n { position: absolute; top: var(--sp-4); right: var(--sp-4); font-size: 68px; color: var(--gold-ghost); line-height: 1; pointer-events: none; }
.case-tag { font-size: var(--fs-base); font-weight: 500; letter-spacing: var(--ls-2xl); color: var(--gold); margin-bottom: var(--sp-3); }
.case-title { font-size: 22px; font-weight: 400; line-height: 1.3; margin-bottom: var(--sp-3h); }
.case-body { font-size: var(--fs-body-md,14px); line-height: 1.8; color: var(--muted); margin-bottom: 22px; }
.case-metric { border-top: 1px solid var(--border); padding-top: var(--sp-4); font-size: var(--fs-base); letter-spacing: .15em; color: var(--gold); }
.case-metric strong { font-size: 26px; font-weight: 400; color: var(--text); display: block; margin-bottom: 3px; letter-spacing: 0; text-transform: none; }
.case-metric-link { font-size: var(--fs-sm); letter-spacing: var(--ls-lg); color: var(--gold); text-decoration: none; }
.case-view-all { background: rgba(212,173,85,.06); border: 1px dashed rgba(212,173,85,.25); }
.case-view-all:hover { background: rgba(212,173,85,.12) !important; transform: translateY(-3px); }

/* Count card (3rd card, homepage) */
.opps-count-card { background: rgba(12,11,9,.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(212,173,85,.18); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--sp-4h); min-height: 240px; }
.opps-count-n { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(var(--sp-12),5vw,72px); color: var(--gold); line-height: 1; }
.opps-count-label { font-family: 'Barlow Condensed', sans-serif; font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--ls-3xl); text-transform: uppercase; color: var(--text-dim); }
.opps-count-btn { font-family: 'Barlow Condensed', sans-serif; font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--ls-lg); text-transform: uppercase; background: var(--gold); color: #000; padding: 11px var(--sp-6); text-decoration: none; display: inline-block; }
.opps-count-btn:hover { background: var(--gold-lt); }

/* Case studies carousel */
#cases { padding: var(--sec) 0; }
.cases-hd { padding: 0 var(--pad); margin-bottom: var(--sp-11); }
.cases-hd > p { line-height: 1.8; max-width: 560px; margin-top: var(--sp-4h); }
.cases-wrap { position: relative; }
.cases-row { display: flex; gap: 2px; padding: 0 var(--pad) var(--sp-7); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: auto; scrollbar-color: var(--gold) rgba(212,173,85,.12); }
.cases-row::-webkit-scrollbar { height: 10px; }
.cases-row::-webkit-scrollbar-track { background: rgba(212,173,85,.08); border-radius: 0; }
.cases-row::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 0; }
.cases-row::-webkit-scrollbar-thumb:hover { background: var(--gold-lt); }
.cases-arrows { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--pad); margin-top: var(--sp-1); margin-bottom: var(--sp-2); }
.cases-arrow { width: var(--sp-11); height: var(--sp-11); background: transparent; border: 1px solid var(--border); color: var(--gold); font-size: var(--sp-4h); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); font-family: inherit; flex-shrink: 0; }
.cases-arrow:hover { background: rgba(212,173,85,.1); border-color: var(--gold); }
.cases-arrow-label { font-size: var(--fs-xs); letter-spacing: var(--ls-2xl); color: rgba(245,242,236,.4); }

@media (max-width: 860px) { .cases-row { gap: 2px; } }
@media (max-width: 600px) { .case { flex: 0 0 90vw !important; } }


/* ════════════════════════════════════════════════════════════════════
   § 12. TRANSACTIONS TABLE
   ════════════════════════════════════════════════════════════════════ */

.tx-hd { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--sp-7),5vw,var(--sp-20,80px)); align-items: end; margin-bottom: var(--sp-12); }
.tx-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tx-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.tx-table thead tr { border-bottom: 1px solid var(--border); }
.tx-table th { font-size: var(--fs-base); font-weight: 500; letter-spacing: var(--ls-2xl); color: var(--muted); text-align: left; padding: 0 var(--sp-3h) var(--sp-4) 0; }
.tx-table tbody tr { border-bottom: 1px solid rgba(255,255,255,.06); transition: background var(--t-fast); }
.tx-table tbody tr:hover { background: rgba(212,173,85,.04); }
.tx-table td { padding: 22px var(--sp-3h) 22px 0; font-size: var(--fs-body-md); color: var(--muted); vertical-align: top; }
.tx-table td:first-child { font-size: 19px; color: var(--text-strong); white-space: nowrap; }
.tx-table td.gold { color: var(--gold); }
.tx-pill { display: inline-block; font-size: var(--fs-sm); letter-spacing: var(--ls-md); background: var(--gold-tint); color: var(--gold); padding: 3px var(--sp-2); margin-top: var(--sp-1); }

@media (max-width: 860px) { .tx-hd { grid-template-columns: 1fr; gap: var(--sp-6); } }


/* ════════════════════════════════════════════════════════════════════
   § 13. PHILOSOPHY
   ════════════════════════════════════════════════════════════════════ */

#philosophy { position: relative; overflow: hidden; }
#philosophy > * { position: relative; z-index: 1; }
#philosophy::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 25% 60%, rgba(201,168,76,.06) 0%, transparent 60%); pointer-events: none; }
.phil-grid { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(var(--sp-10),6vw,100px); align-items: center; position: relative; }
.phil-quote { font-size: clamp(28px,3.5vw,56px); font-style: italic; line-height: 1.25; }
.phil-quote em { font-style: normal; color: var(--gold); }
.phil-body { line-height: 1.9; margin-bottom: var(--sp-9); }
.diffs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.diff { padding: var(--sp-5); border-left: 2px solid var(--gold); background: rgba(201,168,76,.025); }
.diff-t { font-size: var(--fs-body-md,14px); font-weight: 700; letter-spacing: .1em; margin-bottom: var(--sp-2); }
.diff-b { font-size: var(--fs-body-md,14px); line-height: 1.75; color: var(--muted); }

@media (max-width: 860px) { .phil-grid { grid-template-columns: 1fr; gap: var(--sp-9); } .diffs { grid-template-columns: 1fr; } }


/* ════════════════════════════════════════════════════════════════════
   § 14. MARKETS (SEO / text links)
   ════════════════════════════════════════════════════════════════════ */

#markets { background: var(--bg-deeper); border-top: 1px solid var(--border); position: relative; overflow: hidden; }
#markets > * { position: relative; z-index: 1; }
#markets::before { content: ''; position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transform: scale(1.35) translateY(var(--py, 0%)); will-change: transform; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(8,8,6,.78),rgba(8,8,6,.78)), image-set(url('img-heritage-building.webp') type('image/webp'), url('img-heritage-building.jpg') type('image/jpeg')); }
.mkts { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-10); margin-top: var(--sp-11); }
.mkt h3 { font-size: var(--fs-md); font-weight: 700; letter-spacing: var(--ls-sm); color: var(--gold); margin-bottom: var(--sp-3h); }
.mkt p { font-size: var(--fs-body-md,14px); line-height: 1.85; color: rgba(245,242,236,.88); }
.mkt-link-row { margin-top: var(--sp-3h); font-size: var(--fs-md); }
.mkt-link-row a { color: var(--gold); }

@media (max-width: 1060px) { .mkts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .mkts { grid-template-columns: 1fr; } }


/* ════════════════════════════════════════════════════════════════════
   § 15. INSIGHTS
   ════════════════════════════════════════════════════════════════════ */

.insights-hd { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: clamp(var(--sp-7),3vw,var(--sp-11)); }
.insights-hd h2 { margin-top: var(--sp-2); }
.insights-all-link { font-family: 'Barlow Condensed', sans-serif; font-size: var(--fs-base); font-weight: 600; letter-spacing: var(--ls-sm); text-transform: uppercase; color: var(--gold); border: 1px solid var(--border); padding: var(--sp-2) var(--sp-4); text-decoration: none; white-space: nowrap; }
.insights-all-link:hover { border-color: var(--gold); }
.insight-card { background: var(--mid); border: 1px solid var(--border); padding: var(--sp-7) var(--sp-6); transition: border-color .3s; gap: var(--sp-2h); text-decoration: none; display: flex; flex-direction: column; }
.insight-card:hover { border-color: rgba(212,173,85,.45); }
.insight-tag { font-family: 'Barlow Condensed', sans-serif; font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-xl); text-transform: uppercase; color: var(--gold); margin-bottom: var(--sp-2h); }
.insight-title { font-family: 'Barlow Condensed', sans-serif; font-size: 17px; font-weight: 600; letter-spacing: .04em; color: var(--text-strong); line-height: 1.3; margin-bottom: var(--sp-2h); }
.insight-body { font-size: var(--fs-md); line-height: 1.7; color: var(--muted); flex: 1; }
.insight-cta { font-family: 'Barlow Condensed', sans-serif; font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--ls-md); text-transform: uppercase; color: var(--gold); margin-top: var(--sp-3h); }


/* ════════════════════════════════════════════════════════════════════
   § 16. PROOF STRIP
   ════════════════════════════════════════════════════════════════════ */

.proof-inner { display: flex; flex-wrap: wrap; gap: var(--sp-10); justify-content: space-around; align-items: center; }
.proof-stat { text-align: center; }
.proof-stat-n { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(var(--sp-9),4vw,56px); color: var(--gold); line-height: 1; }
.proof-stat-l { font-family: 'Barlow Condensed', sans-serif; font-size: var(--fs-sm); letter-spacing: var(--ls-xl); text-transform: uppercase; color: var(--text-dim); margin-top: var(--sp-1h,6px); }
.proof-links { margin-top: clamp(var(--sp-7),3vw,var(--sp-11)); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2h); }


/* ════════════════════════════════════════════════════════════════════
   § 17. CONTACT / CTA BAND
   ════════════════════════════════════════════════════════════════════ */

.cta-band { background: var(--gold); padding: var(--sec) var(--pad); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--sp-10),6vw,100px); align-items: center; }
.cta-band h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(var(--sp-8),4vw,56px); font-weight: 300; color: #000; line-height: 1.05; }
.cta-band h2 em { font-style: italic; color: #000; }
.cta-band p { font-size: var(--fs-body-md); color: rgba(0,0,0,.75); line-height: 1.75; margin-top: var(--sp-4); }
.cta-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.cta-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
/* All cta-form inputs share these properties (textarea included) */
.cta-form input,
.cta-form select,
.cta-form textarea { background: rgba(0,0,0,.08); border: 1px solid rgba(0,0,0,.2); color: #000; padding: var(--sp-3h) var(--sp-4); font-family: 'Barlow', sans-serif; font-size: var(--fs-body-md); outline: none; transition: border-color var(--t-base); width: 100%; -webkit-appearance: none; }
.cta-form input::placeholder { color: rgba(0,0,0,.4); }
.cta-form input:focus, .cta-form select:focus, .cta-form textarea:focus { border-color: rgba(0,0,0,.5); }
.cta-submit { font-family: 'Barlow Condensed', sans-serif; font-size: var(--fs-base); font-weight: 700; letter-spacing: var(--ls-xl); text-transform: uppercase; background: #000; color: var(--text); border: none; padding: 17px var(--sp-9); cursor: pointer; min-height: var(--btn-h); transition: background var(--t-base); }
.cta-submit:hover { background: var(--mid); }
.cta-phone { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid rgba(0,0,0,.15); font-size: var(--fs-md); color: rgba(0,0,0,.6); }

/* Contact info block (used on location pages) */
.ci-label { font-family: 'Barlow Condensed', sans-serif; font-size: 8.5px; letter-spacing: var(--ls-3xl); text-transform: uppercase; color: rgba(0,0,0,.65); margin-bottom: var(--sp-1); }
.ci-val { font-size: var(--fs-body-md,14px); font-weight: 400; color: #000; }
.ci-val a { color: #000; }
.ci-val a:hover { text-decoration: underline; }

/* Dark-bg form (used on non-CTA band pages) */
.form { display: flex; flex-direction: column; gap: var(--sp-3); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-family: 'Barlow Condensed', sans-serif; font-size: var(--fs-3h,12px); letter-spacing: var(--ls-xl); text-transform: uppercase; color: var(--muted); }
.field input, .field textarea, .field select { background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--text); padding: var(--sp-3h) var(--sp-4); font-family: 'Barlow', sans-serif; font-size: var(--fs-body-md); font-weight: 400; outline: none; transition: border-color var(--t-base); width: 100%; min-height: var(--btn-h); -webkit-appearance: none; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--gold); }
.field textarea { resize: vertical; min-height: 96px; }
.field select option { background: #161616; }
.form-submit { font-family: 'Barlow Condensed', sans-serif; font-size: var(--fs-base); font-weight: 700; letter-spacing: var(--ls-xl); text-transform: uppercase; background: var(--gold); color: #000; border: none; padding: 17px var(--sp-9); cursor: pointer; min-height: var(--btn-h); transition: background var(--t-base); }
.form-submit:hover { background: var(--gold-lt); }

@media (max-width: 860px) { .form-row { grid-template-columns: 1fr; } .cta-form-row { grid-template-columns: 1fr; } }


/* ════════════════════════════════════════════════════════════════════
   § 18. FOOTER
   ════════════════════════════════════════════════════════════════════ */

footer { padding: var(--sp-8) var(--pad); border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-4); }
.foot-logo { font-family: 'Barlow Condensed', sans-serif; font-size: var(--fs-md); font-weight: 700; letter-spacing: var(--ls-lg); text-transform: uppercase; color: var(--muted); }
.foot-logo span { color: var(--gold); }
.foot-copy { font-size: var(--fs-3h,12px); color: rgba(245,242,236,.48); text-align: center; line-height: 1.7; }
.foot-lic { font-family: 'Barlow Condensed', sans-serif; font-size: var(--fs-base); letter-spacing: var(--ls-lg); text-transform: uppercase; color: rgba(212,173,85,.85); }
.foot-link-accent { color: var(--gold); }

@media (max-width: 600px) { footer { flex-direction: column; text-align: center; } }


/* ════════════════════════════════════════════════════════════════════
   § 19. ROUTING / AUDIENCE CARDS
   ════════════════════════════════════════════════════════════════════ */

.contact-routing { background: var(--gold); padding: var(--sec) var(--pad); }
.routing-card { background: rgba(0,0,0,.08); padding: var(--sp-7) var(--sp-6) var(--sp-6); text-decoration: none; display: flex; flex-direction: column; gap: var(--sp-2); position: relative; overflow: hidden; transition: background var(--t-fast); border-bottom: 2px solid transparent; }
.routing-card:hover { background: rgba(0,0,0,.16); border-bottom-color: rgba(0,0,0,.5); }
.routing-card-n { font-family: 'Cormorant Garamond', serif; font-size: var(--sp-10); font-weight: 300; color: rgba(0,0,0,.18); line-height: 1; margin-bottom: var(--sp-1); }
.routing-card-title { font-family: 'Barlow Condensed', sans-serif; font-size: var(--fs-body-md,14px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #000; }
.routing-card-body { font-size: var(--fs-md); color: rgba(0,0,0,.65); line-height: 1.65; flex: 1; }
.routing-card-cta { font-family: 'Barlow Condensed', sans-serif; font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--ls-md); text-transform: uppercase; color: #000; margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid rgba(0,0,0,.15); }
.routing-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; }

@media (max-width: 1060px) { .routing-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .routing-grid { grid-template-columns: 1fr; } }


/* ════════════════════════════════════════════════════════════════════
   § 20. PARALLAX PHOTO BACKGROUNDS
   ════════════════════════════════════════════════════════════════════ */

#philosophy, #markets, #cases { position: relative; overflow: hidden; }
#philosophy > *, #markets > *, #cases > * { position: relative; z-index: 1; }
#philosophy::before, #markets::before, #cases::before {
  content: ''; position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transform: scale(1.35) translateY(var(--py, 0%));
  will-change: transform; z-index: 0; pointer-events: none;
}
#markets::before { background-image: linear-gradient(rgba(8,8,6,.78),rgba(8,8,6,.78)), image-set(url('img-heritage-building.webp') type('image/webp'), url('img-heritage-building.jpg') type('image/jpeg')); }
#cases::before { background-image: linear-gradient(rgba(8,8,6,.78),rgba(8,8,6,.78)), image-set(url('img-grand-interior.webp') type('image/webp'), url('img-grand-interior.jpg') type('image/jpeg')); }


/* ════════════════════════════════════════════════════════════════════
   § 21. RESPONSIVE (GLOBAL)
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 1060px) {
  .svc-grid { grid-template-columns: 1fr 1fr !important; }
  .intel-grid, .why-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 860px) {
  .sec-hd-grid { grid-template-columns: 1fr; }
  .sec-hd-right { align-items: flex-start; }
  .sec-subtitle-right { text-align: left; }
  .sec-link-btns, .sec-hd-right-flex { justify-content: flex-start; }
  .grid-3 { grid-template-columns: repeat(2,1fr); }
  .featured-opps-grid { grid-template-columns: 1fr 1fr !important; }
  .insights-grid { grid-template-columns: repeat(2,1fr) !important; }
  .cta-band, .loc-contact-inner { grid-template-columns: 1fr !important; }
  .mandate { grid-template-columns: 1fr !important; }
  .hub-btns, .pg-btns, .loc-hero-btns { flex-direction: column !important; align-items: flex-start !important; gap: var(--sp-3h) !important; }
  .listing-specs { gap: var(--sp-2h) !important; }
  [style*="justify-content:space-around"] { gap: var(--sp-6) !important; }
}
@media (max-width: 600px) {
  .grid-3, .svc-grid, .gridauto, .ptypes-grid { grid-template-columns: 1fr !important; }
  .listings-grid { grid-template-columns: 1fr !important; }
  .step-card { padding: var(--sp-7) 22px !important; }
  .card, .ptype, .svc { padding: var(--sp-7) var(--sp-5) !important; }
  .mandate { padding: var(--sp-7) 22px !important; }
  .sec-hd, .sec-hd em { font-size: clamp(28px,7vw,44px) !important; }
  .hub-hero-content h1 { font-size: clamp(36px,9vw,60px) !important; }
}
@media (max-width: 560px) {
  h1 { font-size: clamp(38px, 12vw, 56px); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .btn-gold, .btn-ghost { justify-content: center; width: 100%; }
  .hero-stats { gap: var(--sp-5); }
  .sectors { grid-template-columns: 1fr; }
  .case { flex: 0 0 88vw; }
  .featured-opps-grid { grid-template-columns: 1fr !important; }
  .insights-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 540px) { .featured-opps-grid { grid-template-columns: 1fr !important; } }
@media (max-width: 420px) { .svc-grid { grid-template-columns: 1fr !important; } }
@media (max-width: 360px) { .hero-stats { flex-direction: column; gap: var(--sp-3h); } }


/* ════════════════════════════════════════════════════════════════════
   § 22. LEGACY COMPATIBILITY
   Attribute selectors target inline styles on pages not yet migrated
   to class-based layout. Remove once all pages use CSS classes.
   ════════════════════════════════════════════════════════════════════ */

@media(max-width:1060px) {
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns:1fr 1.5fr"],
  [style*="grid-template-columns:1.5fr 1fr"],
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns:1fr !important; }
  .grid2,.grid3,.grid4,.two-col,.three-col,.four-col { grid-template-columns:1fr !important; }
  [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns:1fr 1fr !important; }
}
@media(max-width:860px) {
  [style*="grid-template-columns:1fr 1fr"][style*="--gold"],
  #sell-form,#buy-form,#valuation-form,#landlord-form,#listing-enquiry,
  #opp-form,#offmkt-form,#buyer-req-form,#tenant-req-form { grid-template-columns:1fr !important; }
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns:repeat(2,1fr)"] { grid-template-columns:1fr !important; }
  [style*="grid-template-columns:1fr 1fr"][style*="margin-bottom"] { grid-template-columns:1fr !important; }
}
@media(max-width:600px) {
  [style*="grid-template-columns"] { grid-template-columns:1fr !important; }
  .cta-form-row,[style*="grid-template-columns:1fr 1fr"][style*="gap:12px"] { grid-template-columns:1fr !important; }
  #action-paths [style*="grid-template-columns"] { grid-template-columns:1fr !important; }
  [style*="minmax(185px"] { grid-template-columns:1fr 1fr !important; }
}
@media(max-width:420px) { [style*="minmax(185px"] { grid-template-columns:1fr !important; } }