html{color-scheme:light;}
/* ============================================================
   SIDO ENTERPRISE CORP — Design tokens
   Palette: Emerald + Sand + Gold hairline
   Type: Fraunces (display) / Inter (body) / IBM Plex Mono (data)
   ============================================================ */

/* fonts embedded at build time — no network dependency */

:root{
  --display: 'Fraunces', serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --max: 1180px;
}

/* ===== THEME 1 — EMERALD & SAND (default, approved) ===== */
:root, [data-theme="emerald"]{
  --ph1:#DFD4B8; --ph2:#CABF9D;
  --emerald-950:#0A2019;
  --emerald-900:#0E3B2E;
  --emerald-700:#1C5C46;
  --emerald-500:#2E7D5F;
  --sand-100:#F4EFE2;
  --sand-200:#E8DCC4;
  --gold-500:#C9A24B;
  --gold-300:#DEC489;
  --accent-text:#7E6224;
  --ink-900:#101812;
  --ink-600:#3E4A42;
  --cream:#F2ECDC;
  --line: rgba(201,162,75,0.35);
  --glowA: rgba(46,125,95,0.42);
  --glowB: rgba(201,162,75,0.18);
  --glowC: rgba(14,59,46,0.88);
  --meshB1:#0A2019; --meshB2:#0E3B2E; --meshB3:#123F30;
}





/* ===== THEME 2 — ONYX & BRONZE =====================================
   COOL PORCELAIN background (not warm cream) + near-black charcoal dark
   sections + bronze accent. Reads crisp, architectural, high-contrast —
   the opposite temperature to Emerald's warmth. ==================== */
[data-theme="onyx"]{
  --ph1:#D8D6CF; --ph2:#C2BFB4;
  --emerald-950:#0F0E11;
  --emerald-900:#17161A;
  --emerald-700:#26252B;
  --emerald-500:#3A3842;
  --sand-100:#F5F4F1;      /* cool porcelain, faint grey undertone */
  --sand-200:#E6E4DE;
  --gold-500:#9C7A4D;      /* bronze */
  --gold-300:#BE9C6E;
  --accent-text:#7C5E38;
  --ink-900:#141317;
  --ink-600:#43424A;
  --cream:#F4F2EE;
  --line: rgba(156,122,77,0.30);
  --glowA: rgba(58,56,66,0.40);
  --glowB: rgba(156,122,77,0.12);
  --glowC: rgba(15,14,17,0.92);
  --meshB1:#0F0E11; --meshB2:#17161A; --meshB3:#141318;
}

/* ===== THEME 3 — SLATE & STEEL ====================================
   COOL GREY-WHITE background with a blue undertone + deep slate-blue
   dark sections + muted steel-gold accent. Cooler and more corporate /
   automotive — unmistakably different the instant you switch. ====== */
[data-theme="slate"]{
  --ph1:#CFD4D6; --ph2:#B7BEC1;
  --emerald-950:#141C21;
  --emerald-900:#1F2B33;    /* deep slate blue replaces emerald green */
  --emerald-700:#2E3E48;
  --emerald-500:#425562;
  --sand-100:#EDEFF1;       /* cool grey-white, blue undertone */
  --sand-200:#DBDFE2;
  --gold-500:#9A8A63;       /* muted steel-gold */
  --gold-300:#B6A882;
  --accent-text:#6F6244;
  --ink-900:#151A1D;
  --ink-600:#3C444A;
  --cream:#EFF1F2;
  --line: rgba(154,138,99,0.30);
  --glowA: rgba(66,85,98,0.42);
  --glowB: rgba(154,138,99,0.12);
  --glowC: rgba(20,28,33,0.90);
  --meshB1:#141C21; --meshB2:#1F2B33; --meshB3:#1B2830;
}

body, .hero-bg .layer, .dark, .card, .btn, .ticker-wrap, footer.site, header.site{
  transition: background-color .5s ease, color .5s ease, border-color .5s ease;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--body);
  color: var(--ink-900);
  background: var(--sand-100);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}

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

.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
@media (max-width:640px){ .wrap{padding:0 20px;} }

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent-text, var(--gold-500));
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:24px; height:1px; background:var(--accent-text, var(--gold-500)); display:inline-block;}

h1,h2,h3,h4{font-family:var(--display); font-weight:500; letter-spacing:-0.01em; color:var(--emerald-900);}
h1{font-size:clamp(2.6rem,5.4vw,4.6rem); line-height:1.02; font-weight:400;}
h2{font-size:clamp(1.9rem,3.4vw,2.8rem); line-height:1.08;}
h3{font-size:1.3rem;}
p{color:var(--ink-600);}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
  padding:15px 28px; border-radius:2px; border:1px solid transparent;
  cursor:pointer; transition:all .25s ease;
}
.btn-primary{background:var(--emerald-900); color:var(--cream);}
.btn-outline{border-color:var(--gold-500); color:var(--emerald-900);}
.btn-light{border-color:rgba(242,236,220,0.5); color:var(--cream);}

/* ---------- NAV ---------- */
header.site{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--sand-100) 92%, transparent); backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transform:translateY(0);
  transition:transform .35s ease, border-color .3s ease, box-shadow .3s ease, background-color .5s ease;
  will-change:transform;
}
header.site.scrolled{border-bottom-color:var(--line); box-shadow:0 2px 20px rgba(0,0,0,0.05);}
header.site.nav-hidden{transform:translateY(-101%);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:20px 0;}
.brand{font-family:var(--display); font-size:1.25rem; color:var(--emerald-900); letter-spacing:0.01em; position:relative; z-index:3;}
.brand span{color:var(--gold-500);}
.navlinks{display:flex; gap:34px; align-items:center;}
.navlinks a{font-family:var(--mono); font-size:12.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-600); position:relative; padding:4px 0;}
.navlinks a::after{content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--gold-500); transition:width .25s ease;}
.navlinks a.active{color:var(--emerald-900);}
.navcta{font-family:var(--mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; background:var(--emerald-900); color:var(--cream) !important; padding:11px 20px;}
.navcta::after{display:none;}
.burger{display:none; background:none; border:none; cursor:pointer; position:relative; z-index:3; padding:6px;}
.burger span{display:block; width:24px; height:1px; background:var(--emerald-900); margin:6px 0; transition:transform .3s ease, opacity .3s ease;}
.burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.x span:nth-child(2){opacity:0;}
.burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:900px){
  .navlinks{
    position:fixed; inset:0; background:var(--sand-100);
    flex-direction:column; padding:100px 28px 48px; gap:8px;
    align-items:flex-start; overflow-y:auto;
    transform:translateX(100%); transition:transform .3s ease; z-index:2;
  }
  .navlinks.open{transform:translateX(0);}
  .navlinks li{width:100%; border-bottom:1px solid rgba(16,24,18,0.08);}
  .navlinks a{font-size:16px; display:block; padding:18px 0; width:100%;}
  .navlinks .navcta{margin-top:20px; text-align:center; padding:16px 20px; font-size:13px;}
  .navlinks li:last-child{border-bottom:none;}
  .burger{display:block;}
  body.menu-open{overflow:hidden;}
  /* never hide the bar while the menu is open */
  header.site.nav-hidden:has(.navlinks.open){transform:translateY(0);}
}

/* ---------- FOOTER ---------- */
footer.site{background:var(--emerald-950); color:var(--sand-200); padding:64px 0 28px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(201,162,75,0.2);}
.foot-grid h4{color:var(--gold-300); font-family:var(--mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:16px; font-weight:500;}
.foot-grid a, .foot-grid p{color:rgba(242,236,220,0.72); font-size:14px; display:block; margin-bottom:9px;}
.foot-brand{font-family:var(--display); font-size:1.4rem; color:var(--cream); margin-bottom:12px;}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:12.5px; color:rgba(242,236,220,0.5); flex-wrap:wrap; gap:12px;}
.foot-bottom a{color:rgba(242,236,220,0.5);}
@media (max-width:800px){ .foot-grid{grid-template-columns:1fr 1fr;} }

/* ---------- SECTION UTIL ---------- */
section{padding:104px 0;}
@media (max-width:700px){ section{padding:64px 0;} }
.section-head{max-width:640px; margin-bottom:56px;}
.section-head h2{margin-top:14px;}
.dark{background:var(--emerald-950); color:var(--sand-200);}
.dark h2, .dark h3, .dark h1, .dark h4{color:var(--cream);}
.dark p{color:rgba(242,236,220,0.72);}
.dark li{color:rgba(242,236,220,0.80);}
.dark .eyebrow{color:var(--gold-300);}
.dark .badge{color:var(--gold-300); border-color:var(--gold-500);}
.dark .process .step h4{color:var(--cream);}
.dark .card h3{color:var(--cream);}
.dark .card p{color:rgba(242,236,220,0.72);}
.dark .card li{color:rgba(242,236,220,0.80);}
.dark .btn-outline{border-color:var(--gold-500); color:var(--gold-300);}

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

/* ---------- HERO ---------- */
.hero{position:relative; min-height:92vh; display:flex; align-items:flex-end; overflow:hidden; color:var(--cream);}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-bg .layer{position:absolute; inset:-10%; background-size:cover; background-position:center;}
.hero-scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,32,25,0.55) 0%, rgba(10,32,25,0.35) 40%, rgba(10,32,25,0.92) 100%); z-index:1;}
.hero-content{position:relative; z-index:2; padding-bottom:72px; width:100%;}
.hero-content .eyebrow{color:var(--gold-300);}
.hero h1{color:var(--cream); margin:16px 0 22px;}
.hero p.lede{max-width:560px; color:rgba(242,236,220,0.82); font-size:1.08rem; margin-bottom:32px;}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap;}

/* animated gradient mesh backgrounds (placeholder for real photography/video) */
.mesh-emerald{background:
  radial-gradient(ellipse at 20% 20%, var(--glowA), transparent 55%),
  radial-gradient(ellipse at 80% 30%, var(--glowB), transparent 50%),
  radial-gradient(ellipse at 50% 90%, var(--glowC), transparent 60%),
  linear-gradient(160deg, var(--meshB1), var(--meshB2) 55%, var(--meshB3));
  animation: drift 18s ease-in-out infinite alternate;
}
.mesh-dubai{background:
  radial-gradient(ellipse at 75% 15%, var(--glowB), transparent 45%),
  radial-gradient(ellipse at 15% 85%, var(--glowA), transparent 55%),
  radial-gradient(ellipse at 50% 100%, var(--glowC), transparent 55%),
  linear-gradient(180deg, var(--meshB1) 0%, var(--meshB2) 60%, var(--meshB1) 100%);
  animation: drift 22s ease-in-out infinite alternate;
}
.mesh-auto{background:
  radial-gradient(ellipse at 10% 10%, var(--glowB), transparent 45%),
  radial-gradient(ellipse at 90% 80%, var(--glowA), transparent 50%),
  linear-gradient(200deg, var(--meshB1), var(--meshB3) 60%);
  animation: drift 20s ease-in-out infinite alternate;
}
.mesh-olive{background:
  radial-gradient(ellipse at 30% 20%, var(--glowB), transparent 50%),
  radial-gradient(ellipse at 80% 70%, var(--glowA), transparent 55%),
  linear-gradient(170deg, var(--meshB3), var(--meshB2) 70%);
  animation: drift 24s ease-in-out infinite alternate;
}
@keyframes drift{ 0%{ transform:scale(1) translate(0,0);} 100%{ transform:scale(1.08) translate(-1%,-1%);} }

.skyline-svg{position:absolute; bottom:0; left:0; width:100%; z-index:1; opacity:0.5;}

/* stat bar */
.stat-bar{position:relative; z-index:2; border-top:1px solid rgba(201,162,75,0.3); margin-top:44px; padding-top:28px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.stat{}
.stat .num{font-family:var(--mono); font-size:clamp(1.6rem,2.6vw,2.2rem); color:var(--gold-300);}
.stat .label{font-size:12.5px; color:rgba(242,236,220,0.65); margin-top:4px; letter-spacing:0.02em;}
@media (max-width:800px){ .stat-bar{grid-template-columns:repeat(2,1fr);} }

/* ticker (Real Estate signature element) */
.ticker-wrap{background:var(--emerald-900); border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; white-space:nowrap; position:relative;}
.ticker-wrap::before, .ticker-wrap::after{content:""; position:absolute; top:0; bottom:0; width:60px; z-index:2; pointer-events:none;}
.ticker-wrap::before{left:0; background:linear-gradient(90deg, var(--emerald-900), transparent);}
.ticker-wrap::after{right:0; background:linear-gradient(270deg, var(--emerald-900), transparent);}
.ticker{display:inline-flex; gap:60px; padding:14px 0; animation:ticker 34s linear infinite;}
.ticker span{font-family:var(--mono); font-size:13px; color:var(--sand-200); letter-spacing:0.02em;}
.ticker span b{color:var(--gold-300); font-weight:500;}
@keyframes ticker{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* cards */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media (max-width:900px){ .grid-3{grid-template-columns:1fr;} .grid-2{grid-template-columns:1fr;} .grid-4{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .grid-4{grid-template-columns:1fr;} }

.card{background:#fff; border:1px solid rgba(16,24,18,0.08); padding:36px 32px; transition:transform .3s ease, box-shadow .3s ease;}
.card .idx{font-family:var(--mono); color:var(--accent-text, var(--gold-500)); font-size:13px; margin-bottom:16px; display:block;}
.card h3{margin-bottom:12px;}
.card p{font-size:14.5px;}

.pillar-card{background:var(--emerald-900); color:var(--cream); padding:44px 34px; position:relative; overflow:hidden;}
.pillar-card::before{content:""; position:absolute; inset:0; border:1px solid rgba(201,162,75,0.25); pointer-events:none;}
.pillar-card h3{color:var(--cream); font-size:1.5rem; margin:18px 0 12px;}
.pillar-card p{color:rgba(242,236,220,0.72); font-size:14.5px; margin-bottom:20px;}
.pillar-card .ring{width:46px; height:46px; border:1px solid var(--gold-500); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--mono); color:var(--gold-300); font-size:13px;}
.pillar-card a{font-family:var(--mono); font-size:12.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--gold-300); border-bottom:1px solid rgba(201,162,75,0.4); padding-bottom:2px;}

/* project cards (real estate listings) */
.proj-card{position:relative; overflow:hidden; height:420px; color:var(--cream); display:flex; flex-direction:column; justify-content:flex-end;}
.proj-card .ph{position:absolute; inset:0; background-size:cover; background-position:center;}
.proj-card::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,32,25,0.92) 5%, rgba(10,32,25,0.15) 60%);}
.proj-card .body{position:relative; z-index:2; padding:28px;}
.proj-card .tag{font-family:var(--mono); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-300); margin-bottom:8px; display:block;}
.proj-card h3{color:var(--cream); margin-bottom:8px;}
.proj-card p{color:rgba(242,236,220,0.78); font-size:13.5px;}

/* image placeholder block (no real photography yet) */
.imgph{
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,0.045) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, var(--ph1), var(--ph2));
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-600); font-family:var(--mono); font-size:12px; letter-spacing:0.05em; text-transform:uppercase;
  border:1px solid rgba(16,24,18,0.1);
  min-height:220px;
}

/* process / timeline */
.process{display:grid; grid-template-columns:repeat(5,1fr); gap:20px;}
.process .step{border-top:2px solid var(--gold-500); padding-top:18px;}
.process .step .n{font-family:var(--mono); color:var(--accent-text, var(--gold-500)); font-size:13px;}
.process .step h4{font-size:1rem; margin:10px 0 8px; font-family:var(--body); font-weight:600; color:var(--emerald-900);}
.process .step p{font-size:13.5px;}
@media (max-width:900px){ .process{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .process{grid-template-columns:1fr;} }

/* FAQ accordion */
.faq-item{border-bottom:1px solid rgba(16,24,18,0.12);}
.faq-q{width:100%; text-align:left; background:none; border:none; padding:22px 0; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-family:var(--body); font-weight:600; font-size:1rem; color:var(--emerald-900);}
.faq-q .plus{font-family:var(--mono); color:var(--gold-500); font-size:18px; transition:transform .25s ease;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s ease;}
.faq-a p{padding-bottom:22px; font-size:14.5px;}

/* blog */
.blog-card{border:1px solid rgba(16,24,18,0.1); background:#fff;}
.blog-card .imgph{min-height:170px;}
.blog-card .body{padding:22px;}
.blog-card .date{font-family:var(--mono); font-size:11.5px; color:var(--accent-text, var(--gold-500)); letter-spacing:0.05em; text-transform:uppercase;}
.blog-card h4{font-family:var(--body); font-weight:600; font-size:1rem; margin:10px 0 8px; color:var(--emerald-900);}
.blog-card p{font-size:13.5px;}

/* partner logos */
.partners{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
@media (max-width:900px){ .partners{grid-template-columns:1fr 1fr;} }
.plogo{
  display:flex; align-items:center; gap:14px;
  border:1px solid rgba(16,24,18,0.12); background:#fff;
  padding:18px 20px; transition:border-color .25s ease, transform .25s ease;
}
.plogo .mark{
  width:44px; height:44px; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:14px; font-weight:500;
  color:var(--cream); background:var(--emerald-900);
  border:1px solid var(--gold-500); letter-spacing:0.02em;
}
.plogo .pname{font-family:var(--display); font-size:1.02rem; color:var(--emerald-900); line-height:1.15;}
.plogo .psub{font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-500); margin-top:3px;}
.dark .plogo{background:var(--emerald-900); border-color:rgba(201,162,75,0.25);}
.dark .plogo .pname{color:var(--cream);}
.dark .plogo .mark{background:var(--emerald-950);}

/* ---------- BIG METRIC BLOCKS (animated) ---------- */
.metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);}
@media (max-width:900px){ .metrics{grid-template-columns:1fr 1fr;} }
.metric{background:var(--emerald-950); padding:34px 26px;}
.metric .mval{
  font-family:var(--mono); font-size:clamp(1.8rem,3.2vw,2.6rem);
  color:var(--gold-300); line-height:1; letter-spacing:-0.02em;
}
.metric .mval .pre{font-size:0.5em; color:rgba(242,236,220,0.55); margin-right:6px; letter-spacing:0.08em;}
.metric .mlabel{font-size:13px; color:rgba(242,236,220,0.75); margin-top:12px; line-height:1.4;}
.metric .mdelta{
  font-family:var(--mono); font-size:11px; letter-spacing:0.05em;
  color:var(--gold-500); margin-top:8px; display:inline-block;
  border:1px solid rgba(201,162,75,0.4); padding:3px 8px;
}
.src-note{font-family:var(--mono); font-size:11px; letter-spacing:0.04em; color:var(--ink-600); margin-top:18px;}
.dark .src-note{color:rgba(242,236,220,0.5);}

/* CTA band on dark */
.cta-band .btn-light{border-color:rgba(242,236,220,0.6);}

/* ---------- IMAGE FRAME FORMATS ---------- */
.frame{overflow:hidden; position:relative; width:100%;}
.frame > .imgph, .frame > img{width:100%; height:100%; object-fit:cover; min-height:0;}
.frame[data-frame="portrait"]{aspect-ratio:4/5;}
.frame[data-frame="square"]{aspect-ratio:1/1;}
.frame[data-frame="wide"]{aspect-ratio:16/9;}
.frame[data-frame="arch"]{aspect-ratio:4/5; border-radius:999px 999px 4px 4px;}
.frame[data-frame="tall"]{aspect-ratio:3/4;}
.frame[data-frame="round"]{aspect-ratio:1/1; border-radius:50%;}
.frame[data-frame="soft"]{aspect-ratio:4/5; border-radius:14px;}
.frame[data-frame="arch"] > .imgph, .frame[data-frame="round"] > .imgph, .frame[data-frame="soft"] > .imgph{border-radius:inherit;}
.frame[data-frame="round"]{max-width:440px; margin-inline:auto;}

.frame-picker{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap;}
.frame-picker button{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
  padding:8px 12px; background:none; cursor:pointer;
  border:1px solid rgba(16,24,18,0.2); color:var(--ink-600); transition:all .2s ease;
}
.frame-picker button[aria-pressed="true"]{background:var(--emerald-900); color:var(--cream); border-color:var(--emerald-900);}
.dark .frame-picker button{border-color:rgba(201,162,75,0.3); color:var(--sand-200);}
.dark .frame-picker button[aria-pressed="true"]{background:var(--gold-500); color:var(--emerald-950); border-color:var(--gold-500);}

/* CTA band */
.cta-band{background:var(--emerald-900); color:var(--cream); text-align:center; padding:96px 0;}
.cta-band h2{color:var(--cream);}
.cta-band p{color:rgba(242,236,220,0.75); max-width:520px; margin:16px auto 32px;}

/* contact form */
.form-shell{background:#fff; border:1px solid rgba(16,24,18,0.1); padding:44px; max-width:640px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px;}
@media (max-width:600px){ .form-row{grid-template-columns:1fr;} }
.field label{display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-600); margin-bottom:8px;}
.field input, .field textarea, .field select{
  width:100%; border:1px solid rgba(16,24,18,0.18); background:var(--sand-100); padding:13px 14px; font-family:var(--body); font-size:14.5px; color:var(--ink-900);
}
.field input:focus, .field textarea:focus, .field select:focus{outline:2px solid var(--gold-500); outline-offset:1px; background:#fff;}

.badge-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:20px;}
.badge{font-family:var(--mono); font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase; border:1px solid var(--accent-text, var(--gold-500)); color:var(--emerald-900); padding:8px 14px;}

/* ============================================================
   RESPONSIVE PASS — fits phones, tablets, desktop, ultrawide
   ============================================================ */
html, body{max-width:100%; overflow-x:clip;}
img, video, svg{max-width:100%; height:auto;}
* { min-width:0; }

/* Tablet */
@media (max-width:1024px){
  .navlinks{gap:22px;}
  .metrics{grid-template-columns:repeat(2,1fr);}
}

/* Small tablet / large phone */
@media (max-width:768px){
  section{padding:64px 0;}
  .section-head{margin-bottom:36px;}
  .hero{min-height:auto; padding-top:88px;}
  .hero-content{padding-bottom:52px;}
  .hero p.lede{font-size:1rem;}
  .hero-actions{gap:12px;}
  .stat-bar{margin-top:34px; padding-top:22px; gap:20px;}
  .proj-card{height:340px;}
  .form-shell{padding:28px 22px;}
  .cta-band{padding:64px 0;}
  .grid-2{gap:36px;}
}

/* Phone */
@media (max-width:560px){
  h1{font-size:clamp(2rem,8.5vw,2.6rem);}
  h2{font-size:clamp(1.6rem,6vw,2rem);}
  .hero-actions{flex-direction:column; align-items:stretch;}
  .hero-actions .btn{width:100%; justify-content:center;}
  .btn{padding:14px 22px; font-size:12px;}
  .stat-bar{grid-template-columns:1fr 1fr; gap:18px;}
  .stat .num{font-size:1.5rem;}
  .stat .label{font-size:11.5px;}
  .metrics{grid-template-columns:1fr;}
  .metric{padding:26px 22px;}
  .partners{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr; gap:32px;}
  .foot-bottom{flex-direction:column; align-items:flex-start; gap:8px;}
  .card{padding:28px 22px;}
  .pillar-card{padding:32px 24px;}
  .proj-card{height:300px;}
  .proj-card .body{padding:22px;}
  .faq-q{font-size:0.95rem; gap:14px;}
  .ticker span{font-size:12px;}
  .ticker{gap:36px;}
  .frame[data-frame="round"]{max-width:280px;}
  .frame-picker button{font-size:9.5px; padding:7px 9px;}
  .section-head h2{margin-top:10px;}
  .eyebrow{font-size:11px;}
}

/* Very small phone */
@media (max-width:380px){
  .wrap{padding:0 16px;}
  .stat-bar{grid-template-columns:1fr;}
  .brand{font-size:1.05rem;}
}

/* Ultrawide — keep line lengths readable */
@media (min-width:1600px){
  :root{--max:1280px;}
}

/* Theme dock — collapsible so it never blocks content on mobile */
.theme-dock{transition:transform .3s ease;}
.dock-toggle{
  position:absolute; top:-1px; right:100%; margin-right:-1px;
  background:var(--emerald-900); color:var(--cream);
  border:1px solid var(--line); border-right:none; cursor:pointer;
  font-family:var(--mono); font-size:10px; letter-spacing:0.08em;
  padding:10px 8px; writing-mode:vertical-rl; text-transform:uppercase;
}
.theme-dock.collapsed{transform:translateX(calc(100% + 20px));}
@media (max-width:560px){
  .theme-dock{right:0; bottom:70px;}
  .theme-dock.collapsed{transform:translateX(100%);}
}

/* ============================================================
   STYLE PRESETS — second axis: typography + nav + footer + layout
   Applied via [data-style] on <html>, independent of [data-theme]
   ============================================================ */

/* ---------- A · EDITORIAL (default) ---------- */
[data-style="editorial"]{
  --display: 'Fraunces', serif;
  --radius: 2px;
}

/* ---------- B · MODERN — structural / oversized / sans ---------- */
[data-style="modern"]{
  --display: 'Space Grotesk', sans-serif;
  --radius: 0px;
}
/* Type: huge, uppercase, tight — opposite of Editorial's refined serif */
[data-style="modern"] h1{
  font-weight:700; letter-spacing:-0.045em; text-transform:uppercase;
  font-size:clamp(2.6rem,7vw,6rem); line-height:0.92;
}
[data-style="modern"] h2{
  font-weight:700; letter-spacing:-0.035em; text-transform:uppercase;
  font-size:clamp(2rem,4.6vw,3.6rem); line-height:0.98;
}
[data-style="modern"] h3{ font-weight:600; letter-spacing:-0.02em; }
/* Eyebrow becomes a solid tag, not a hairline */
[data-style="modern"] .eyebrow{
  background:var(--gold-500); color:var(--emerald-950);
  padding:5px 10px; display:inline-flex; font-weight:500;
}
[data-style="modern"] .eyebrow::before{ display:none; }
[data-style="modern"] .dark .eyebrow{ background:var(--gold-500); color:var(--emerald-950); }
/* Nav: heavy rule, bold sans links, no mono */
[data-style="modern"] header.site{ border-bottom-width:2px; }
[data-style="modern"] header.site.scrolled{ border-bottom-color:var(--ink-900); }
[data-style="modern"] .navlinks a{
  font-family:var(--display); font-size:13px; font-weight:600;
  letter-spacing:0.02em; text-transform:uppercase;
}
[data-style="modern"] .navcta{
  font-family:var(--display); font-weight:600; letter-spacing:0.02em; border-radius:0;
}
[data-style="modern"] .brand{ font-weight:700; letter-spacing:-0.04em; text-transform:uppercase; }
/* Cards: borderless, separated by structural rules */
[data-style="modern"] .card{
  border:none; border-top:2px solid var(--ink-900); background:none; padding:26px 0 0;
}
[data-style="modern"] .dark .card{ border-top-color:var(--gold-500); }
[data-style="modern"] .grid-3, [data-style="modern"] .grid-2{ gap:36px; }
[data-style="modern"] .pillar-card{ border-radius:0; }
[data-style="modern"] .pillar-card .ring{ border-radius:0; }
[data-style="modern"] .plogo{ border:none; border-top:2px solid var(--ink-900); background:none; padding:20px 0 0; }
[data-style="modern"] .dark .plogo{ border-top-color:var(--gold-500); }
[data-style="modern"] .plogo .mark{ border-radius:0; }
[data-style="modern"] .blog-card{ border:none; background:none; }
[data-style="modern"] .blog-card .body{ padding:18px 0 0; border-top:2px solid var(--ink-900); margin-top:14px; }
/* Buttons: solid, square, bold */
[data-style="modern"] .btn{
  font-family:var(--display); font-weight:600; letter-spacing:0.02em;
  border-radius:0; padding:16px 30px; font-size:13px;
}
/* Section heads run wide */
[data-style="modern"] .section-head{ max-width:900px; }
[data-style="modern"] .section-head h2{ margin-top:18px; }
/* Footer: oversized brand, structural */
[data-style="modern"] .foot-grid{ grid-template-columns:2.2fr 1fr 1fr 1fr; }
[data-style="modern"] .foot-brand{
  font-size:clamp(2rem,4vw,3.2rem); letter-spacing:-0.045em;
  text-transform:uppercase; line-height:0.95;
}
[data-style="modern"] .foot-grid h4{ font-family:var(--display); font-weight:600; }
[data-style="modern"] .metric .mval{ font-family:var(--display); font-weight:700; letter-spacing:-0.04em; }
[data-style="modern"] .stat .num{ font-family:var(--display); font-weight:700; letter-spacing:-0.04em; }
[data-style="modern"] .faq-q{ font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:0.95rem; letter-spacing:-0.01em; }

/* ---------- C · CLASSIC ---------- */
[data-style="classic"]{
  --display: 'Libre Baskerville', serif;
  --radius: 0px;
}
[data-style="classic"] h1{ font-weight:400; line-height:1.14; letter-spacing:0; }
[data-style="classic"] h2{ font-weight:400; letter-spacing:0; }
/* nav: brand centred, links centred beneath */
[data-style="classic"] .nav{
  display:flex; flex-direction:column; gap:14px; padding:18px 0 14px; position:relative;
}
[data-style="classic"] .brand{ font-size:1.4rem; letter-spacing:0.04em; }
[data-style="classic"] .navlinks{ gap:30px; }
[data-style="classic"] .navcta{
  background:none; color:var(--emerald-900) !important;
  border:1px solid var(--gold-500); padding:9px 16px;
}
[data-style="classic"] .burger{ position:absolute; right:0; top:16px; }
/* centred section headings */
[data-style="classic"] .section-head{ margin-inline:auto; text-align:center; }
[data-style="classic"] .section-head .eyebrow{ justify-content:center; }
[data-style="classic"] .btn{ border-radius:0; letter-spacing:0.12em; }
/* footer: centred, stacked */
[data-style="classic"] .foot-grid{
  grid-template-columns:1fr; text-align:center; gap:30px;
}
[data-style="classic"] .foot-grid .eyebrow{ justify-content:center; }
[data-style="classic"] .foot-bottom{ justify-content:center; text-align:center; }
[data-style="classic"] .foot-brand{ letter-spacing:0.04em; }
[data-style="classic"] .hero-content{ text-align:center; }
[data-style="classic"] .hero-content .eyebrow{ justify-content:center; }
[data-style="classic"] .hero p.lede{ margin-inline:auto; }
[data-style="classic"] .hero-actions{ justify-content:center; }
[data-style="classic"] .stat-bar{ text-align:center; }

@media (max-width:900px){
  [data-style="modern"] .nav{ display:flex; }
  [data-style="classic"] .nav{ flex-direction:row; }
  [data-style="classic"] .burger{ position:relative; top:0; }
  [data-style="classic"] .hero-content{ text-align:left; }
  [data-style="classic"] .hero-content .eyebrow{ justify-content:flex-start; }
  [data-style="classic"] .hero p.lede{ margin-inline:0; }
  [data-style="classic"] .hero-actions{ justify-content:stretch; }
  [data-style="classic"] .section-head{ text-align:left; }
  [data-style="classic"] .section-head .eyebrow{ justify-content:flex-start; }
}

/* ---------- Style dock (review tool) ---------- */
.theme-dock .divider{ height:1px; background:var(--line); margin:14px 0 12px; }
.style-row{ display:flex; gap:6px; }
.style-row button{
  flex:1; font-family:var(--mono); font-size:9.5px; letter-spacing:0.06em;
  text-transform:uppercase; padding:8px 6px; cursor:pointer;
  border:1px solid rgba(0,0,0,0.18); background:none; color:var(--ink-600);
  transition:all .2s ease; border-radius:0;
}
.style-row button[aria-pressed="true"]{
  background:var(--emerald-900); color:var(--cream); border-color:var(--emerald-900);
}

/* ============================================================
   IMAGE TREATMENTS — bind photography to the active palette
   Set data-treat on any .frame. Colours come from theme vars,
   so treated images re-grade automatically when the theme changes.
   ============================================================ */
.frame > img{display:block; width:100%; height:100%; object-fit:cover;}
.frame::before, .frame::after{border-radius:inherit; pointer-events:none;}

/* NONE — photo as shot */
.frame[data-treat="none"] img{filter:none;}

/* GRADE — subtle: desaturate + warm toward the accent. Photo still reads natural. */
.frame[data-treat="grade"] img{filter:saturate(0.62) contrast(1.06) brightness(1.02);}
.frame[data-treat="grade"]::after{
  content:""; position:absolute; inset:0;
  background:var(--gold-500); mix-blend-mode:color; opacity:0.22;
}

/* TINT — accent hue washed over, luminance preserved */
.frame[data-treat="tint"]::after{
  content:""; position:absolute; inset:0;
  background:var(--gold-500); mix-blend-mode:color; opacity:0.68;
}
.frame[data-treat="tint"] img{filter:contrast(1.04);}

/* DUOTONE — true two-tone: shadows take the dark theme colour,
   highlights take the accent. Strongest brand lock. */
.frame[data-treat="duotone"] img{filter:grayscale(1) contrast(1.12);}
.frame[data-treat="duotone"]::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:var(--emerald-900); mix-blend-mode:lighten;
}
.frame[data-treat="duotone"]::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:var(--gold-300); mix-blend-mode:darken;
}

/* EDGE — hairline accent border, no colour shift (safest for product shots) */
.frame[data-treat="edge"]{outline:1px solid var(--gold-500); outline-offset:-1px;}
.frame[data-treat="edge"] img{filter:saturate(0.9);}

/* scrim for text over images */
.frame[data-scrim]::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, var(--emerald-950) 0%, transparent 65%);
  opacity:0.85;
}

/* ---------- TYPEWRITER HEADINGS ---------- */
[data-typewriter]{ min-height:1em; }
.tw-caret{
  display:inline-block; width:0.06em; min-width:2px; height:0.86em;
  background:var(--gold-500); margin-left:0.06em;
  vertical-align:-0.06em; animation:caret 0.9s steps(1) infinite;
}
.hero .tw-caret{ background:var(--gold-300); }
@keyframes caret{ 0%,49%{opacity:1;} 50%,100%{opacity:0;} }
.tw-done .tw-caret{ animation:caret 0.9s steps(1) 3; opacity:0; }
@media (prefers-reduced-motion: reduce){ .tw-caret{display:none;} }

/* ============================================================
   FULL SCRIMS — now that real photography is in, every image
   that carries text needs full-coverage shadowing, not a
   partial fade. Daytime aerial footage especially.
   ============================================================ */
.hero-scrim{
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.28) 30%, rgba(0,0,0,0.55) 62%, var(--emerald-950) 100%),
    linear-gradient(90deg, var(--emerald-950) 0%, rgba(0,0,0,0.45) 45%, rgba(0,0,0,0.15) 100%);
  opacity:0.97;
}
.hero-vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at 40% 50%, transparent 25%, rgba(0,0,0,0.55) 100%);
}
/* hero video layer */
.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
/* project cards: full scrim so titles always read */
.proj-card::after{
  background:
    linear-gradient(0deg, var(--emerald-950) 2%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.25) 100%);
}
.proj-card .ph{ transition:transform 1.1s cubic-bezier(.2,.7,.3,1); }

/* section-level shadowing for full-bleed image bands */
.band{
  position:relative; overflow:hidden;
  background-size:cover; background-position:center;
}
.band::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--emerald-950) 0%, rgba(0,0,0,0.6) 40%, var(--emerald-950) 100%);
  opacity:0.94;
}
.band > .wrap{ position:relative; z-index:2; }

/* gallery tiles get a soft shadow lift */
.gal{ box-shadow:0 18px 40px rgba(0,0,0,0.18); }
.dark .gal{ box-shadow:0 18px 40px rgba(0,0,0,0.5); }

/* text-only blog cards — fewer images needed, cleaner read */
.blog-card.blog-text{border:none; border-top:2px solid var(--gold-500); background:none;}
.blog-card.blog-text .body{padding:20px 0 0;}

/* ============================================================
   HERO VIDEO FIT
   The film is 16:9. Rather than letterboxing it (which leaves a seam)
   or cropping it (which was cutting 9% off the sides on a laptop and
   74% on a phone), the hero's height is tied to the film's own aspect
   ratio on wide screens — so cover fills it exactly, edge to edge,
   with the whole frame visible. Portrait screens keep a taller hero
   and accept a crop, since 16:9 cannot fill a portrait box.
   ============================================================ */
.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  transform:scale(var(--hero-zoom, 1));
  transform-origin:center;
}
/* Pulled back 15%: the frame was already fully visible, so this renders it
   smaller inside the hero rather than revealing more of it. The mesh fills
   the surround and the edges are feathered so there is no hard boundary. */
@media (min-width:900px){
  :root{ --hero-zoom:0.85; }
  .hero-video{
    -webkit-mask-image:radial-gradient(ellipse 82% 82% at 50% 50%, #000 60%, transparent 100%);
            mask-image:radial-gradient(ellipse 82% 82% at 50% 50%, #000 60%, transparent 100%);
  }
}
@media (min-width:900px){
  /* 56.25vw = 9/16 of the width — the exact height a 16:9 film needs.
     The generic section padding (104px top+bottom) was inflating the hero
     past that target and reintroducing the crop, so it's cleared here. */
  .hero{ min-height:min(88vh, 56.25vw); padding-top:0; padding-bottom:0; }
}
@media (min-width:900px) and (max-aspect-ratio:16/9){
  .hero{ min-height:56.25vw; padding-top:0; padding-bottom:0; }
}
.hero-bg .layer{ z-index:0; }
.hero-video{ z-index:1; }
.hero-scrim{ z-index:2; }
.hero-vignette{ z-index:3; }
.hero-content{ z-index:4; }

/* Phones: 16:9 in a portrait hero always crops. Bias the crop toward the
   skyline rather than the centre, and keep the hero from running too tall. */
@media (max-width:899px){
  .hero-video{ object-position:50% 40%; }
}

/* ---------- UAE SHOWCASE GRID ---------- */
.uae-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
@media (max-width:1000px){ .uae-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .uae-grid{grid-template-columns:1fr;} }
.uae-tile{
  position:relative; overflow:hidden; aspect-ratio:4/5;
  display:flex; align-items:flex-end;
}
.uae-tile img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.7,.3,1);
}
.uae-tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, var(--emerald-950) 3%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0.1) 100%);
}
.uae-tile .cap{ position:relative; z-index:2; padding:18px; }
.uae-tile .cap .place{
  font-family:var(--mono); font-size:10px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--gold-300); display:block; margin-bottom:5px;
}
.uae-tile .cap h4{
  font-family:var(--display); font-weight:500; font-size:1rem;
  color:var(--cream); line-height:1.15;
}
.uae-tile .cap p{ font-size:12px; color:rgba(242,236,220,0.72); margin-top:5px; line-height:1.35; }

/* ---------- SOURCED FIGURES ----------
   Every number carries its year and a link to the government source that
   published it. Unsourced numbers do not go on this site. */
.metric .msrc{ display:block; margin-top:10px; }
.metric .msrc a, .stat .msrc a, .src-link{
  font-family:var(--mono); font-size:10px; letter-spacing:0.05em;
  color:var(--gold-500); text-decoration:none;
  border-bottom:1px solid rgba(201,162,75,0.35); padding-bottom:1px;
  transition:color .2s ease, border-color .2s ease;
}
.msrc .yr{
  display:inline-block;
  font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase;
  color:var(--gold-500);
  border:1px solid var(--line);
  border-radius:3px;
  padding:2px 7px; margin-right:8px;
}
.dark .msrc .yr{ color:var(--gold-300); border-color:rgba(201,162,75,0.32); background:rgba(0,0,0,0.18); }
.src-panel{
  border-top:1px solid var(--line); margin-top:36px; padding-top:22px;
}
.src-panel h4{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--gold-500); margin-bottom:14px; font-weight:500;
}
.src-panel ol{ list-style:none; display:grid; gap:9px; counter-reset:s; }
.src-panel li{ counter-increment:s; font-size:12.5px; line-height:1.5; padding-left:26px; position:relative; }
.src-panel li::before{
  content:counter(s); position:absolute; left:0; top:1px;
  font-family:var(--mono); font-size:10px; color:var(--gold-500);
  border:1px solid var(--line); width:17px; height:17px;
  display:flex; align-items:center; justify-content:center;
}
.src-panel a{ color:var(--gold-300); border-bottom:1px solid rgba(201,162,75,0.3); }
.src-panel .gov{
  font-family:var(--mono); font-size:9px; letter-spacing:0.08em; text-transform:uppercase;
  border:1px solid var(--line); color:var(--gold-500); padding:1px 5px; margin-left:6px;
}

/* ---------- ORIGIN TIMELINE ---------- */
.timeline{ display:grid; gap:0; margin-top:8px; }
.tl-item{
  display:grid; grid-template-columns:92px 1fr; gap:24px;
  padding:22px 0; border-top:1px solid rgba(201,162,75,0.22);
}
.tl-item:last-child{ border-bottom:1px solid rgba(201,162,75,0.22); }
.tl-year{
  font-family:var(--mono); font-size:14px; color:var(--gold-300);
  letter-spacing:0.02em; padding-top:2px;
}
.tl-body h4{
  font-family:var(--display); font-weight:500; font-size:1.08rem;
  color:var(--cream); margin-bottom:5px;
}
.tl-body p{ font-size:13.5px; color:rgba(242,236,220,0.72); line-height:1.55; }
.tl-body .where{
  font-family:var(--mono); font-size:10px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--gold-500); display:block; margin-bottom:6px;
}
@media (max-width:600px){
  .tl-item{ grid-template-columns:1fr; gap:6px; }
  .tl-year{ font-size:12px; }
}

/* ---------- BLOG INDEX ---------- */
.blog-filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:38px; }
.blog-filters button{
  font-family:var(--mono); font-size:11px; letter-spacing:0.07em; text-transform:uppercase;
  padding:9px 15px; background:none; cursor:pointer;
  border:1px solid rgba(16,24,18,0.2); color:var(--ink-600); transition:all .2s ease;
}
.blog-filters button[aria-pressed="true"]{ background:var(--emerald-900); color:var(--cream); border-color:var(--emerald-900); }
.post-list{ display:grid; gap:0; }
.post-row{
  display:grid; grid-template-columns:52px 1fr 132px; gap:26px; align-items:baseline;
  padding:26px 0; border-top:1px solid rgba(16,24,18,0.12); transition:padding-left .25s ease;
}
.post-row:last-child{ border-bottom:1px solid rgba(16,24,18,0.12); }
.post-row .num{ font-family:var(--mono); font-size:12px; color:var(--gold-500); }
.post-row h3{ font-size:1.22rem; margin-bottom:6px; transition:color .2s ease; }
.post-row p{ font-size:13.5px; }
.post-row .meta{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.07em; text-transform:uppercase; color:var(--ink-600); text-align:right; }
.post-row .meta .cat{ color:var(--gold-500); display:block; margin-bottom:4px; }
@media (max-width:760px){
  .post-row{ grid-template-columns:1fr; gap:8px; }
  .post-row .meta{ text-align:left; }
}

/* ---------- POST PAGE ---------- */
.post-head{ max-width:760px; }
.post-head .kicker{ display:flex; gap:14px; align-items:center; margin-bottom:18px; flex-wrap:wrap; }
.post-head .kicker .cat{
  font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  background:var(--gold-500); color:var(--emerald-950); padding:4px 9px;
}
.post-head .kicker .read{ font-family:var(--mono); font-size:11px; color:var(--ink-600); letter-spacing:0.05em; }
.post-body{ max-width:720px; }
.post-body h3{ font-size:1.35rem; margin:44px 0 14px; }
.post-body p{ font-size:15.5px; line-height:1.72; margin-bottom:17px; }
.post-body ul{ margin:0 0 20px; display:grid; gap:9px; }
.post-body li{
  font-size:15px; line-height:1.6; color:var(--ink-600);
  padding-left:20px; position:relative;
}
.post-body li::before{ content:"·"; position:absolute; left:4px; color:var(--gold-500); font-weight:700; }
.post-body li strong{ color:var(--emerald-900); }
.post-nav{
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  border-top:1px solid rgba(16,24,18,0.12); margin-top:56px; padding-top:26px;
}
.post-nav a{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-600); }
.post-nav a .lbl{ display:block; color:var(--gold-500); font-size:9.5px; margin-bottom:4px; }

/* ============================================================
   AUTOMOTIVE HERO — portrait clip, centred and deliberately small
   The source footage is vertical (phone-shot). Rather than force a
   crop to fill the wide hero, it sits as a small, centred frame with
   the emerald mesh filling the surround — matching the "smaller,
   centres the eye" treatment requested for the Real Estate hero.
   ============================================================ */
.hero-video-portrait{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  transform:scale(var(--hero-zoom, 1));
  transform-origin:center;
}
@media (min-width:900px){
  :root{ --hero-zoom:0.85; }
  .hero-video-portrait{
    -webkit-mask-image:radial-gradient(ellipse 82% 82% at 50% 50%, #000 60%, transparent 100%);
            mask-image:radial-gradient(ellipse 82% 82% at 50% 50%, #000 60%, transparent 100%);
  }
}


/* Projects: 3-across so an odd number of cards wraps cleanly */
#projects-grid{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ #projects-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ #projects-grid{ grid-template-columns:1fr; } }

/* ---------- TAG GRIDS (services / vehicle types / buyer types) ---------- */
.tag-grid{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.tag-grid span{
  font-family:var(--mono); font-size:12px; letter-spacing:0.03em;
  padding:9px 14px; border:1px solid var(--line);
  color:var(--ink-600); background:rgba(255,255,255,0.4);
}
.dark .tag-grid span{ color:rgba(242,236,220,0.82); background:rgba(255,255,255,0.04); border-color:rgba(201,162,75,0.22); }
.tag-grid.gold span{ border-color:rgba(201,162,75,0.4); color:var(--gold-500); }
/* On DARK backgrounds (hero + .dark sections), the muted bronze/steel accents
   lose contrast against a translucent white box. Use the brighter --gold-300
   tint + a darker, opaque chip so text is clearly legible in every theme. */
.dark .tag-grid.gold span,
.hero .tag-grid.gold span{
  color:var(--gold-300);
  background:rgba(0,0,0,0.32);
  border-color:var(--gold-300);
}

/* audience lane cards */
.lane{ border:1px solid var(--line); padding:34px 30px; height:100%; }
.dark .lane{ border-color:rgba(201,162,75,0.2); }
.lane .eyebrow{ margin-bottom:14px; }
.lane h3{ font-size:1.3rem; margin-bottom:12px; }
.lane ul{ margin-top:16px; display:grid; gap:8px; }
.lane li{ font-size:13.5px; line-height:1.5; padding-left:18px; position:relative; color:inherit; }
.lane li::before{ content:"·"; position:absolute; left:4px; color:var(--gold-500); font-weight:700; }


/* ---------------------------------------------------------------------
   Hover effects only for devices that truly have a mouse (hover:hover).
   On touch devices this block doesn't apply at all, so the browser never
   sees a hover-capable rule for these elements — fixing the classic
   "first tap simulates hover, second tap actually clicks" mobile bug.
   Desktop mouse users see all hover effects exactly as before.
------------------------------------------------------------------------ */
@media (hover:hover) and (pointer:fine){
.btn-primary:hover{background:var(--emerald-700);}
.btn-outline:hover{background:var(--gold-500); color:var(--emerald-950);}
.btn-light:hover{background:var(--cream); color:var(--emerald-950);}
.navlinks a:hover::after, .navlinks a.active::after{width:100%;}
.navcta:hover{background:var(--emerald-700);}
.foot-grid a:hover{color:var(--gold-300);}
.foot-bottom a:hover{color:var(--gold-300);}
.dark .badge:hover{background:var(--gold-500); color:var(--emerald-950);}
.dark .btn-outline:hover{background:var(--gold-500); color:var(--emerald-950);}
.card:hover{transform:translateY(-6px); box-shadow:0 24px 48px rgba(16,24,18,0.1);}
.plogo:hover{border-color:var(--gold-500); transform:translateY(-3px);}
.frame-picker button:hover{border-color:var(--gold-500);}
[data-style="modern"] .card:hover{transform:none; box-shadow:none;}
[data-style="classic"] .navcta:hover{background:var(--gold-500); color:var(--emerald-950) !important;}
.style-row button:hover{border-color:var(--gold-500);}
.proj-card:hover .ph{transform:scale(1.06);}
.uae-tile:hover img{transform:scale(1.07);}
.metric .msrc a:hover, .src-link:hover{color:var(--gold-300); border-bottom-color:var(--gold-300);}
.src-panel a:hover{color:var(--gold-500);}
.blog-filters button:hover{border-color:var(--gold-500);}
.post-row:hover{padding-left:10px;}
.post-row:hover h3{color:var(--emerald-700);}
.post-nav a:hover{color:var(--emerald-900);}
}

/* Touch devices: remove the default grey tap-highlight flash on links/buttons */
@media (hover:none), (pointer:coarse){
  a, button, .btn, .card, .proj-card{ -webkit-tap-highlight-color: transparent; }
}

.mesh-msb{background:
  radial-gradient(ellipse at 20% 15%, var(--glowA), transparent 50%),
  radial-gradient(ellipse at 85% 85%, var(--glowB), transparent 55%),
  linear-gradient(195deg, var(--emerald-950), var(--emerald-900) 65%);
  animation: drift 22s ease-in-out infinite alternate;
}

/* Dominant Master Agency badge — Real Estate hero */
.hero-badge-dominant{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--gold-500); color:var(--emerald-950);
  font-family:var(--mono); font-weight:700; font-size:13px;
  letter-spacing:0.08em; text-transform:uppercase;
  padding:10px 18px; margin-bottom:16px;
  box-shadow:0 4px 18px rgba(201,162,75,0.35);
}