/* ===== Dhilal Al Khaimah - Public company pages + public header =====
   Warm premium aesthetic layered on top of the site's existing tokens. */
:root{
  --sand:#FCF9F5; --sand2:#F9F5EE; --sand3:#f2ead9;
  --gold:#C8A96E; --gold-deep:#b18d4f;
  --ink:#2a2118; --ink-soft:#5c5346; --line:#e9e0d2;
}

/* ---------- Public header ---------- */
.pub-header{ position:relative; z-index:80; background:#fff; border-bottom:1px solid var(--line,#e7eaf0); }
.pub-header .ph-inner{ max-width:1200px; margin:0 auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; gap:18px; height:64px; }
.pub-header .ph-brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--primary,#0f3d5c); min-width:0; }
.pub-header .ph-brand img{ max-height:40px; max-width:170px; width:auto; height:auto; object-fit:contain; }
.pub-header .ph-brand strong{ font-size:17px; white-space:nowrap; }
.pub-nav{ display:flex; align-items:center; gap:4px; }
.pub-nav a.pn-link{ padding:8px 13px; border-radius:999px; font-size:14.5px; font-weight:600; color:#334155; text-decoration:none; transition:all .15s; white-space:nowrap; }
.pub-nav a.pn-link:hover{ color:var(--primary,#0f3d5c); background:rgba(15,61,92,.06); }
.pub-nav a.pn-link.active{ color:#fff; background:var(--primary,#0f3d5c); }
.pub-nav a.pn-cta{ margin-left:6px; padding:8px 18px; border-radius:999px; background:var(--gold,#C8A96E); color:#2a2118; font-weight:800; font-size:14px; text-decoration:none; box-shadow:0 4px 12px -6px rgba(200,169,110,.7); }
.pub-nav a.pn-cta:hover{ opacity:.9; }
.ph-toggle{ display:none; background:none; border:0; font-size:22px; color:#0f3d5c; cursor:pointer; padding:6px; }
@media (max-width: 1100px){
  .pub-header .ph-inner{ height:auto; min-height:60px; padding:8px 16px; flex-wrap:wrap; }
  .ph-toggle{ display:inline-flex; }
  .pub-nav{ display:none; flex-direction:column; align-items:stretch; width:100%; padding:6px 0 12px; }
  .pub-nav.open{ display:flex; }
  .pub-nav a.pn-link, .pub-nav a.pn-cta{ text-align:center; }
}

/* ---------- Page shell (base provides header of portal; footer from base) ---------- */
.ch-page{ background:var(--sand,#FCF9F5); }
.ch-wrap{ max-width:1120px; margin:0 auto; padding:0 20px; }

/* Hero */
.ch-hero{ background:linear-gradient(150deg,#14213d 0%,#0f3d5c 55%,#0b5f5a 100%); color:#fff; text-align:center; padding:64px 20px 76px; position:relative; overflow:hidden; }
.ch-hero .arabic{ color:#e8d5b0; font-size:clamp(1.15rem,3vw,1.85rem); margin:6px 0 4px; letter-spacing:.5px; }
.ch-hero h1{ font-size:clamp(2rem,5vw,3.3rem); font-weight:800; margin:6px 0 10px; line-height:1.1; }
.ch-hero .gold-rule{ width:76px; height:3px; border-radius:3px; background:var(--gold,#C8A96E); margin:0 auto 14px; }
.ch-hero p.ch-tag{ color:#f2e6cd; font-size:clamp(1rem,2vw,1.2rem); font-weight:600; letter-spacing:1px; }
.ch-hero p.ch-lead{ max-width:720px; margin:18px auto 0; color:rgba(255,255,255,.9); font-size:16px; line-height:1.6; }
.ch-hero .ch-hero-actions{ margin-top:24px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Buttons */
.btn-gold{ display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:999px; background:var(--gold,#C8A96E); color:#2a2118; font-weight:800; text-decoration:none; transition:transform .15s, box-shadow .15s; }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -12px rgba(0,0,0,.5); }
.btn-ghost{ display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius:999px; border:1.5px solid rgba(255,255,255,.6); color:#fff; font-weight:700; text-decoration:none; }
.btn-ghost:hover{ background:rgba(255,255,255,.12); }

/* Sections */
.ch-sec{ padding:54px 0; }
.ch-sec.alt{ background:var(--sand2,#F9F5EE); }
.ch-eyebrow{ display:inline-flex; align-items:center; gap:8px; color:var(--gold-deep,#b18d4f); font-weight:800; letter-spacing:2px; text-transform:uppercase; font-size:12.5px; margin-bottom:8px; }
.ch-sec-head{ max-width:760px; margin-bottom:32px; }
.ch-sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.ch-sec-head h2{ font-size:clamp(1.6rem,3.4vw,2.4rem); color:var(--ink,#2a2118); margin:0 0 8px; line-height:1.15; }
.ch-sec-head p{ color:var(--ink-soft,#5c5346); font-size:15.5px; line-height:1.6; margin:0; }

/* Cards + grids */
.grid{ display:grid; gap:20px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
@media (max-width: 900px){ .g4{ grid-template-columns:repeat(2,1fr); } .g3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 600px){ .g2,.g3,.g4{ grid-template-columns:1fr; } }
.card{ background:#fff; border:1px solid var(--line,#e9e0d2); border-radius:16px; padding:22px; box-shadow:0 1px 0 rgba(0,0,0,.02); }
.card .ic{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:12px; background:rgba(200,169,110,.16); color:var(--gold-deep,#b18d4f); font-size:20px; margin-bottom:12px; }
.card h3{ font-size:17px; color:var(--ink,#2a2118); margin:0 0 6px; }
.card p{ font-size:14px; color:var(--ink-soft,#5c5346); line-height:1.55; margin:0; }
.card.sand{ background:var(--sand2,#F9F5EE); border-color:transparent; }

/* Pillars (foundation) */
.pillar{ text-align:center; }
.pillar .ic{ margin:0 auto 12px; width:58px; height:58px; border-radius:50%; }
.pillar .p-num{ font-size:12px; font-weight:800; letter-spacing:1.5px; color:var(--gold,#C8A96E); text-transform:uppercase; }

/* Stats strip */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width: 760px){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stat-tile{ background:#fff; border:1px solid var(--line,#e9e0d2); border-radius:14px; padding:18px 12px; text-align:center; }
.stat-tile .n{ font-size:clamp(1.5rem,3.4vw,2.3rem); font-weight:800; color:var(--primary,#0f3d5c); }
.stat-tile .l{ font-size:12.5px; color:var(--ink-soft,#5c5346); margin-top:4px; line-height:1.35; }
.stats-label{ text-align:center; font-size:12px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--gold-deep,#b18d4f); margin:0 0 12px; }

/* Numbered process steps */
.steps{ counter-reset:st; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width: 820px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 520px){ .steps{ grid-template-columns:1fr; } }
.step{ position:relative; background:#fff; border:1px solid var(--line,#e9e0d2); border-radius:14px; padding:22px 20px 20px 58px; }
.step:before{ counter-increment:st; content:counter(st, decimal-leading-zero); position:absolute; left:16px; top:18px; font-weight:800; font-size:22px; color:var(--gold,#C8A96E); }
.step h3{ margin:0 0 5px; font-size:16px; }
.step p{ margin:0; font-size:13.5px; }

/* Team */
.team-card{ background:#fff; border:1px solid var(--line,#e9e0d2); border-radius:16px; overflow:hidden; text-align:center; }
.team-card img{ width:100%; height:230px; object-fit:cover; }
.team-card .tc-body{ padding:16px; }
.team-card h3{ margin:0 0 2px; font-size:16px; }
.team-card .role{ color:var(--gold-deep,#b18d4f); font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.6px; }
.team-card p{ margin:10px 0 0; font-size:13.5px; color:var(--ink-soft,#5c5346); line-height:1.55; }

/* Split two-column */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.split img{ width:100%; border-radius:18px; object-fit:cover; box-shadow:0 18px 40px -24px rgba(0,0,0,.4); }
@media (max-width: 860px){ .split{ grid-template-columns:1fr; } }

/* Partner */
.partner{ display:flex; gap:18px; align-items:flex-start; }
.partner .ic{ flex-shrink:0; }

/* Market (global presence) */
.market{ text-align:center; }
.market .flag{ font-size:34px; margin-bottom:8px; }
.market h3{ font-size:16px; margin:0 0 4px; }
.market p{ font-size:13.5px; color:var(--ink-soft,#5c5346); line-height:1.5; margin:0; }

/* Contact */
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:36px; }
@media (max-width: 860px){ .contact-grid{ grid-template-columns:1fr; } }
.field{ margin-bottom:14px; }
.field label{ display:block; font-weight:700; font-size:13px; color:var(--ink,#2a2118); margin-bottom:5px; }
.field label .req{ color:#c0392b; }
.field input, .field select, .field textarea{ width:100%; border:1px solid var(--line,#d9ceb9); border-radius:10px; padding:11px 13px; font:inherit; font-size:14.5px; background:#fff; color:var(--ink); box-sizing:border-box; }
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--gold,#C8A96E); box-shadow:0 0 0 3px rgba(200,169,110,.2); }
.field .err{ color:#c0392b; font-size:12px; margin-top:4px; }
.btn-submit{ width:100%; padding:13px; border:0; border-radius:10px; background:var(--primary,#0f3d5c); color:#fff; font:inherit; font-weight:800; font-size:15px; cursor:pointer; }
.btn-submit:hover{ opacity:.92; }
.msg-ok{ background:#e9f7ef; color:#11683a; border:1px solid #bfe6d0; padding:11px 14px; border-radius:10px; font-weight:600; margin-bottom:14px; }
.msg-err{ background:#fdecea; color:#b71c1c; border:1px solid #f5c6c0; padding:11px 14px; border-radius:10px; font-weight:600; margin-bottom:14px; }
.info-row{ display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; }
.info-row .ic{ width:42px; height:42px; border-radius:12px; flex-shrink:0; font-size:18px; margin:0; }
.info-row b{ display:block; color:var(--ink); }
.info-row p{ margin:2px 0 0; color:var(--ink-soft); font-size:14px; line-height:1.5; }
.info-row a{ color:var(--ink-soft); text-decoration:none; }
.info-row a:hover{ color:var(--primary); }
.ch-map{ width:100%; height:300px; border:0; border-radius:16px; display:block; background:#ece4d6; }
.biz-hours{ border-collapse:collapse; }
.biz-hours td{ padding:4px 10px 4px 0; font-size:14px; color:var(--ink-soft); }
.biz-hours td:first-child{ font-weight:700; color:var(--ink); }

/* CTA band */
.cta-band{ background:linear-gradient(150deg,#0f3d5c,#0b5f5a); color:#fff; border-radius:20px; padding:34px 26px; text-align:center; }
.cta-band h2{ margin:0 0 8px; font-size:clamp(1.4rem,3vw,1.9rem); }
.cta-band p{ color:#f2e6cd; margin:0 0 18px; font-size:15px; }

/* ===== Portal-aligned theme (v2) ===== */
.ch-page{ background:#ffffff; }
.ch-sec{ padding:60px 0; }
.ch-sec.alt{ background:#f3f6f8; }
.ch-eyebrow{ color:#9a7c3c; }
.ch-sec-head h2{ letter-spacing:-.3px; }
.card{ border-color:#e7ebef; box-shadow:0 1px 2px rgba(15,35,70,.04), 0 8px 24px -18px rgba(15,35,70,.18); }
.card .ic{ background:rgba(15,61,92,.08); color:var(--primary,#0f3d5c); }
.card h3{ color:var(--ink,#1b2430); }
.stat-tile .n{ color:var(--primary,#0f3d5c); }
.btn-submit{ background:var(--primary,#0f3d5c); }
.step:before{ color:#9a7c3c; }
.gold-rule{ background:#c8a96e; }

/* Team initials avatars (no people imagery) */
.team-card{ text-align:center; }
.team-ava{ width:96px; height:96px; margin:0 auto; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg,#0f3d5c,#2b7a8f); color:#fff; font-weight:800; font-size:30px; }
.team-card .tc-body{ padding:14px 16px 18px; }

/* ===== Sticky compact header ===== */
/* `sticky`, not `fixed`. A fixed header sits outside the flow and needs a body
   padding-top to avoid covering content; a sticky one stays in flow and needs
   no compensation. Keeping a single positioning model here and at the end of
   this file is what makes the header behave consistently. */
.pub-header{ position:sticky; top:0; z-index:200; box-shadow:0 1px 0 rgba(15,35,70,.06), 0 8px 22px -18px rgba(15,35,70,.3); }
body:has(.pub-header){ padding-top:0; }
.pub-header .ph-inner{ height:58px; }
.pub-nav{ gap:2px; }
.pub-nav a.pn-link{ padding:7px 11px; font-size:14px; }
@media (min-width: 1101px) and (max-width: 1320px){
  .pub-header .ph-inner{ padding:0 14px; }
  .pub-nav a.pn-link{ padding:6px 8px; font-size:13px; }
  .pub-brand strong{ font-size:15px; }
}

/* ===== Motion: entrance, hover, scroll reveal ===== */
@keyframes chRise{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }
.ch-hero .ch-wrap>*{ animation:chRise .6s ease both; }
.ch-hero .ch-wrap>*:nth-child(1){ animation-delay:.03s; }
.ch-hero .ch-wrap>*:nth-child(2){ animation-delay:.1s; }
.ch-hero .ch-wrap>*:nth-child(3){ animation-delay:.18s; }
.ch-hero .ch-wrap>*:nth-child(4){ animation-delay:.26s; }
.ch-hero .ch-wrap>*:nth-child(5){ animation-delay:.34s; }

.card, .step, .team-card, .market, .stat-tile{ transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.card:hover, .team-card:hover{ transform:translateY(-4px); border-color:#d5dce4; box-shadow:0 20px 40px -26px rgba(15,35,70,.4); }
.card .ic{ transition:transform .22s ease; }
.card:hover .ic{ transform:scale(1.12) rotate(-6deg); }
.step:hover, .market:hover, .stat-tile:hover{ transform:translateY(-3px); }
.pub-nav a.pn-link, .pub-nav a.pn-cta{ transition:transform .15s ease, background .15s ease, color .15s ease; }
.pub-nav a.pn-link:hover{ transform:translateY(-1px); }

/* Scroll reveal */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .ch-hero .ch-wrap>*, .reveal{ animation:none !important; transition:none !important; opacity:1 !important; transform:none !important; }
  .card:hover, .step:hover, .team-card:hover, .market:hover, .stat-tile:hover{ transform:none; }
}

/* ===== Compact vertical rhythm ===== */
.ch-sec{ padding:46px 0; }
.ch-sec-head{ margin-bottom:26px; }
.ch-hero{ padding:52px 20px 60px; }
.grid{ gap:16px; }
.stats{ gap:14px; }


/* Local placeholder visuals (no external images) */
.ph-img{ display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center; text-align:center; color:rgba(255,255,255,.9);
  background:linear-gradient(150deg,#14213d,#0f3d5c 60%,#2b7a8f); border-radius:16px;
  min-height:230px; font-size:60px; }
.ph-img small{ font-size:15px; display:block; color:#e8d5b0; font-weight:600; letter-spacing:.3px; }
.ph-map{ display:flex; align-items:center; justify-content:center; text-align:center;
  background:#eef2f5; border:1px solid #e7ebef; }
.ph-map span{ background:#fff; padding:12px 20px; border-radius:999px; border:1px solid #e7ebef;
  font-weight:700; color:#0f3d5c; }

/* ===== Mobile header menu: make it expand & be visible ===== */
@media (max-width: 1100px){
  .pub-header{ position:sticky; top:0; z-index:200; }
  .pub-header .ph-inner{ height:auto; min-height:56px; padding:8px 14px; flex-wrap:wrap; }
  .pub-header .ph-brand{ flex:1 1 auto; }
  .ph-toggle{ display:inline-flex; order:2; }
  .pub-nav{ display:none; order:3; width:100%; flex-direction:column; align-items:stretch;
    background:#fff; border-top:1px solid #eef1f4; margin-top:6px; padding:6px 0 12px; gap:2px; }
  .pub-nav.open{ display:flex; }
  .pub-nav a.pn-link, .pub-nav a.pn-cta{ width:100%; text-align:left; padding:10px 14px;
    margin:0; border-radius:8px; font-size:15px; }
}
/* ===== Contact page refinements ===== */
.contact-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.cact{ display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:999px; background:#eef4fb; color:#0f3d5c; font-weight:700; font-size:13px; text-decoration:none; }
.cact:hover{ transform:translateY(-1px); }
.cact.wa{ background:#25d366; color:#fff; }
.cact.mail{ background:#0f3d5c; color:#fff; }
.quick-intents{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 16px; }
.quick-intents .qi-label{ font-weight:800; color:#9a7c3c; font-size:12.5px; text-transform:uppercase; letter-spacing:.5px; }
.quick-intents button{ border:1px solid #e7ebef; background:#fff; color:#334155; font-family:inherit; font-weight:600; font-size:13px; padding:7px 14px; border-radius:999px; cursor:pointer; }
.quick-intents button:hover, .quick-intents button.on{ border-color:#0f3d5c; color:#0f3d5c; background:#eef4fb; }
/* ===== Brand mark (header/footer) - consistent ===== */
.pub-header .ph-brand{ display:flex; align-items:center; gap:10px; }
.pub-header .ph-logo{ max-height:40px; max-width:170px; width:auto; height:auto; object-fit:contain; }
.pub-header .ph-mark{ color:var(--primary,#0f3d5c); font-size:20px; display:inline-flex; }
.pub-header .ph-name{ font-weight:800; color:var(--primary,#0f3d5c); font-size:17px; white-space:nowrap; }
.dk-brand{ display:flex; align-items:center; gap:12px; min-width:0; flex-wrap:wrap; }
.dk-logo{ max-width:170px; max-height:38px; width:auto; height:auto; object-fit:contain; }
.dk-name{ font-weight:800; color:var(--text); font-size:16px; }
.dk-tagline{ color:var(--primary); font-weight:600; font-size:12.5px; }

/* ===== Logo prominence + About hero/audience band ===== */
.pub-header .ph-logo{ max-height:54px; max-width:220px; }
.dk-logo{ max-height:50px; max-width:200px; }
.hero-logo{ display:inline-flex; align-items:center; justify-content:center; background:#fff; padding:12px 24px; border-radius:14px; box-shadow:0 12px 28px -16px rgba(0,0,0,.55); margin:0 0 18px; }
.hero-logo img{ max-height:64px; max-width:240px; width:auto; height:auto; object-fit:contain; }
.engage{ margin-top:30px; padding-top:20px; border-top:1px solid rgba(255,255,255,.16); display:grid; grid-template-columns:repeat(4,1fr); gap:16px; text-align:left; }
@media (max-width: 820px){ .engage{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 420px){ .engage{ grid-template-columns:1fr; } }
.engage .eg b{ display:block; font-size:14px; margin-bottom:2px; }
.engage .eg span{ font-size:12.5px; color:#dbe6ee; line-height:1.45; display:block; }
.engage .eg{ position:relative; padding-left:20px; }
.engage .eg:before{ content:''; position:absolute; left:0; top:6px; width:10px; height:2px; background:var(--gold,#C8A96E); border-radius:2px; }

/* ===== Engaging & adaptive brand/hero ===== */
.hero-logo.glow{ padding:14px 30px; border-radius:16px; background:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.35), 0 0 40px -8px rgba(200,169,110,.55), 0 18px 40px -22px rgba(0,0,0,.6); }
.hero-logo.glow img{ max-height:76px; max-width:280px; }
.ch-hero{ padding:46px 20px 54px; }
.pub-header .ph-brand{ gap:10px; }
@media (max-width: 640px){
  .hero-logo{ padding:10px 16px !important; border-radius:12px !important; }
  .hero-logo img{ max-height:52px !important; max-width:200px !important; }
  .arabic{ font-size:.95rem !important; margin-top:10px; }
  .ch-hero h1{ font-size:clamp(1.6rem,8vw,2.2rem) !important; }
}
@media (max-width: 420px){ .ch-hero h1{ font-size:1.45rem !important; } .ch-hero-actions{ gap:8px; } }

/* ===== Compact, high-signal hero ===== */
.ch-hero{ padding:30px 20px 40px !important; }
.ch-hero .ch-lead{ max-width:760px; margin:14px auto 0; }
.ch-hero h1{ margin:8px 0 10px !important; }
@media (max-width: 640px){ .ch-hero{ padding:22px 14px 30px !important; } }

/* ===== Logo auto-fit + stable header + image hero + bigger desktop menu ===== */
.pub-header{ background:#fff; }
.pub-header .ph-logo{ height:40px; width:auto; max-width:240px; object-fit:contain; }
.ch-hero{
  background:
    linear-gradient(180deg, rgba(11,24,44,.86) 0%, rgba(15,45,72,.9) 100%),
    url('../img/dak/dubai-skyline.webp') center 22% / cover no-repeat;
}
@media (min-width: 1101px){
  .pub-nav a.pn-link{ font-size:16px; padding:8px 15px; }
  .pub-nav a.pn-cta{ font-size:15px; padding:9px 20px; }
}

/* ===== Premium hero image + readable logo ===== */
.ch-hero{
  background:
    linear-gradient(180deg, rgba(10,22,40,.84) 0%, rgba(13,42,70,.9) 100%),
    url('../img/dak/hero-about.webp') center 28% / cover no-repeat;
}
.pub-header .ph-inner{ height:66px; }
.pub-header .ph-logo{ height:50px; width:auto; max-width:260px; object-fit:contain; }
body:has(.pub-header){ padding-top:0; }
@media (max-width: 640px){ .pub-header .ph-logo{ height:44px; max-width:220px; } }

/* ===== Genuine-view hero + clearly readable logo ===== */
/* Plain image, no baked-in gradient: contrast is handled by the two layers
   below, so the photograph itself is never flattened. */
.ch-hero{
  background:url('../img/dak/hero-about.webp') center 30% / cover no-repeat;
  text-align:left;
}
.ch-hero .ch-wrap{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; max-width:1120px; margin:0 auto; }
.ch-hero .gold-rule{ margin:0 0 16px; }
.ch-hero .ch-lead{ margin:0; max-width:600px; }
.ch-hero .ch-hero-actions{ justify-content:flex-start; }
.pub-header .ph-inner{ height:82px; }
.pub-header .ph-logo{ height:64px; width:auto; max-width:340px; object-fit:contain; }
body:has(.pub-header){ padding-top:0; }
@media (max-width: 640px){ .pub-header .ph-logo{ height:50px; max-width:260px; } }

@media (min-width:1101px) and (max-width:1380px){
  .pub-header .ph-logo{ max-width:240px; height:56px; }
  .pub-nav a.pn-link{ font-size:15px; padding:7px 10px; }
}

/* ===== Per-page genuine hero views ===== */
.ch-hero{ position:relative; background-size:cover; background-position:center 30%; }
.ch-hero::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  /* Layer 1 of 2 — a gentle wash, not a wall. It only takes the glare off a
     bright photograph; the image stays legible and the scene stays visible.
     Read this together with the localised backing on .ch-wrap::before below:
     the wash alone would not carry body text, and it is not meant to. */
  background:linear-gradient(115deg, rgba(8,18,34,.52) 0%, rgba(8,18,34,.32) 48%, rgba(8,18,34,.14) 100%); }
.ch-hero .ch-wrap{ position:relative; z-index:1; }
/* Layer 2 of 2 — a feathered backing that sits exactly behind the text column
   and nowhere else. This is what allows the hero to stay photographic: instead
   of darkening the whole frame so white text survives, only the area the words
   occupy is darkened, and it dissolves to fully transparent at its edges so
   there is no visible card or band. Contrast where the text is, image where the
   text isn't. */
.ch-hero .ch-wrap::before{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  inset:-16px -30px;
  border-radius:24px;
  background:radial-gradient(130% 108% at 14% 50%,
    rgba(8,18,34,.78) 0%, rgba(8,18,34,.66) 40%,
    rgba(8,18,34,.34) 68%, rgba(8,18,34,0) 86%);
}
/* The backing is horizontal padding around the text; on narrow screens the wrap
   already fills the width, so pull it in to avoid any chance of overflow. */
@media (max-width: 900px){
  .ch-hero .ch-wrap::before{ inset:-12px -8px; }
}
.ch-hero[data-hero='about']{ background-image:url('../img/dak/hero-about.webp'); }
.ch-hero[data-hero='services']{ background-image:url('../img/dak/services.webp'); background-position:center 35%; }
.ch-hero[data-hero='partnerships']{ background-image:url('../img/dak/hero-partnerships.webp'); background-position:center 30%; }
.ch-hero[data-hero='partnerships']::before{ background:linear-gradient(115deg, rgba(8,18,34,.58) 0%, rgba(8,18,34,.36) 48%, rgba(8,18,34,.12) 100%); }
.ch-hero[data-hero='global']{ background-image:url('../img/dak/hero-global.webp'); background-position:center 40%; }
.ch-hero[data-hero='contact']{ background-image:url('../img/dak/contact.webp'); background-position:center 40%; }

/* ===== Common questions accordion (currently unused) =====
   The block is not rendered anywhere at present — see the note in
   company_pages/faqs.py. These styles are retained so re-enabling it needs only
   the template tag, not a CSS rewrite. Native <details>/<summary>, so it is
   keyboard-operable with no JavaScript. */
.ch-faq{ max-width:860px; margin:0 auto; text-align:left; }
.ch-faq-item{ border:1px solid var(--line); border-radius:14px; background:#fff;
  box-shadow:0 1px 2px rgba(15,35,70,.04), 0 10px 26px -22px rgba(15,35,70,.3);
  margin-bottom:10px; overflow:hidden; }
.ch-faq-item summary{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  cursor:pointer; padding:16px 18px; font-weight:700; font-size:15.5px; color:var(--ink);
  list-style:none; }
.ch-faq-item summary::-webkit-details-marker{ display:none; }
.ch-faq-item summary:hover{ color:var(--primary,#0f3d5c); }
.ch-faq-item summary:focus-visible{ outline:2px solid var(--primary,#0f3d5c); outline-offset:2px; }
.ch-faq-item .ch-faq-chev{ flex:0 0 auto; font-size:12px; color:var(--primary,#0f3d5c);
  transition:transform .2s ease; }
.ch-faq-item[open] .ch-faq-chev{ transform:rotate(180deg); }
.ch-faq-item[open] summary{ color:var(--primary,#0f3d5c); }
.ch-faq-item p{ margin:0; padding:0 18px 16px; color:var(--ink-soft); font-size:14.5px; line-height:1.65; }

/* ===== Guarantee text legibility over every hero image =====
   The hero keeps its photograph (only a light wash plus a localised backing, see
   above), so the glyphs also carry their own halo. Three stacked shadows do the
   work a flat overlay used to: a tight contact shadow for edge definition, a
   mid shadow for weight, and a wide soft shadow that quiets busy detail directly
   behind the letterforms. This is what keeps the text prominent while the image
   stays visible. */
.ch-hero h1, .ch-hero .arabic, .ch-hero p.ch-tag, .ch-hero p.ch-lead,
.ch-hero .ch-eyebrow, .ch-hero .ch-sub{
  text-shadow:
    0 1px 2px rgba(0,0,0,.62),
    0 2px 6px rgba(0,0,0,.5),
    0 6px 26px rgba(0,0,0,.55);
}
.ch-hero h1, .ch-hero .ch-eyebrow, .ch-hero .arabic, .ch-hero p.ch-tag{ color:#fff; }
.ch-hero .ch-lead, .ch-hero .ch-sub{ color:rgba(255,255,255,.96); }
.ch-hero .btn-ghost{ border-color:rgba(255,255,255,.95); }

/* ===== Logo readability rework ===== */
.pub-header .ph-logo{ height:74px; max-width:440px; }
@media (min-width:1101px){
  .pub-header .ph-inner{ height:90px; flex-wrap:nowrap; justify-content:flex-start; gap:16px; padding:0 24px; }
  .pub-header .ph-brand{ order:1; flex:0 0 auto; }
  .pub-nav{ order:2; width:auto; margin-left:auto; justify-content:flex-end; gap:4px; }
  .pub-header .ph-logo{ height:64px; max-width:320px; }
}
.dk-logo{ height:60px; max-width:260px; }
@media (max-width:640px){ .pub-header .ph-logo{ height:54px; max-width:320px; } }

/* ===== Why UAE page ===== */
.ch-hero[data-hero='why-uae']{ background-image:url('../img/dak/dubai-skyline.webp'); background-position:center 30%; }

/* Two-level (UAE vs Dubai) cards */
.level-card{ position:relative; padding-top:26px; }
.level-tag{ position:absolute; top:-11px; left:22px; background:#0f3d5c; color:#fff; font-size:11px; font-weight:800; letter-spacing:1.4px; padding:4px 12px; border-radius:999px; }
.level-card h3{ margin-top:4px; }
.level-note{ max-width:780px; margin:22px auto 0; text-align:center; color:var(--ink-soft,#5c5346); font-size:15px; line-height:1.65; }

/* Checklist */
.tick-list{ list-style:none; margin:0; padding:0; color:var(--ink-soft,#5c5346); line-height:1.7; font-size:14.5px; }
.tick-list li{ position:relative; padding-left:24px; margin-bottom:7px; }
.tick-list li:before{ content:''; position:absolute; left:2px; top:8px; width:9px; height:9px; border-radius:2px; background:var(--gold,#C8A96E); }

/* Important / source notes */
.dak-note{ margin-top:18px; background:#fbf8f1; border:1px solid #efe4cd; border-left:4px solid var(--gold,#C8A96E); border-radius:12px; padding:16px 18px; }
.dak-note-title{ display:block; font-weight:800; color:#8a6d2f; font-size:12.5px; letter-spacing:1px; text-transform:uppercase; margin-bottom:6px; }
.dak-note p{ margin:0; color:var(--ink-soft,#5c5346); font-size:13.5px; line-height:1.6; }
.src-note{ text-align:center; color:var(--ink-soft,#5c5346); font-size:12.5px; line-height:1.6; margin:16px auto 0; max-width:820px; }
.src-note-sub{ margin-top:6px; font-size:11.5px; color:#7b8595; }

/* Residence pathway cards */
.path-card{ border-top:3px solid var(--gold,#C8A96E); }

/* Federation of seven emirates */
.fed{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:900px){ .fed{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .fed{ grid-template-columns:1fr; } }
.fed-chip{ background:#fff; border:1px solid #e7ebef; border-radius:14px; padding:16px 18px; box-shadow:0 8px 24px -20px rgba(15,35,70,.25); }
.fed-name{ display:block; font-weight:800; color:#1b2430; font-size:15px; }
.fed-desc{ display:block; color:var(--ink-soft,#5c5346); font-size:13px; margin-top:3px; line-height:1.45; }
.fed-hub{ border-color:var(--gold,#C8A96E); box-shadow:0 14px 30px -20px rgba(200,169,110,.8); position:relative; }
.fed-hub:after{ content:'Focus market'; position:absolute; top:-10px; right:14px; background:var(--gold,#C8A96E); color:#2a2118; font-size:10.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; padding:3px 10px; border-radius:999px; }

/* Trust block */
.trust-block{ background:#fff; border:1px solid #e7ebef; border-radius:16px; padding:24px 24px 20px; box-shadow:0 8px 24px -18px rgba(15,35,70,.18); }
.trust-block h3{ margin:0 0 12px; font-size:17px; color:#1b2430; }

/* Disclaimer */
.dak-disclaimer{ max-width:880px; margin:0 auto; background:#f6f7f9; border:1px solid #e7ebef; border-radius:14px; padding:20px 24px; }
.dak-disclaimer h2{ font-size:14px; letter-spacing:.6px; text-transform:uppercase; color:#8792a0; margin:0 0 8px; }
.dak-disclaimer p{ margin:0; color:#5c5346; font-size:13px; line-height:1.65; }

/* Disclaimer: brief line + expandable "Read more" */
.disclaimer-row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; }
.disclaimer-brief{ margin:0; }
.disclaimer-more{ }
.disclaimer-more > summary{ list-style:none; cursor:pointer; color:#0f3d5c; font-weight:800; font-size:13px; display:inline-flex; align-items:center; gap:5px; }
.disclaimer-more > summary::-webkit-details-marker{ display:none; }
.disclaimer-more > summary::after{ content:'\203A'; display:inline-block; transition:transform .18s ease; }
.disclaimer-more[open] > summary::after{ transform:rotate(90deg); }
.disclaimer-more > summary:focus-visible{ outline:2px solid #0f3d5c; outline-offset:2px; border-radius:4px; }
.disclaimer-full{ flex-basis:100%; }
.disclaimer-full p{ margin:10px 0 0; }

/* Money / currency panel (Why UAE) */
.money-panel{ background:var(--sand2,#F9F5EE); border:1px solid #efe4cd; border-radius:20px; padding:36px 28px 30px; }
@media (max-width:600px){ .money-panel{ padding:24px 16px 22px; border-radius:16px; } }
.currency-highlight{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 14px; background:#fff; border:1px solid #e7ebef; border-radius:16px; padding:18px 22px; margin:0 auto 26px; max-width:680px; text-align:center; box-shadow:0 8px 24px -20px rgba(15,35,70,.25); }
.currency-highlight .peg-value{ font-size:clamp(1.3rem,3.2vw,1.8rem); font-weight:800; color:#0f3d5c; letter-spacing:-.3px; }
.currency-highlight .peg-word{ font-size:.78rem; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:#9a7c3c; }
.currency-highlight .peg-approx{ font-size:1.4rem; font-weight:700; color:#9a7c3c; }
.currency-highlight .peg-caption{ flex-basis:100%; color:var(--ink-soft,#5c5346); font-size:13px; line-height:1.55; margin-top:4px; }
.money-panel .card{ border-color:#e7ebef; }

@media (prefers-reduced-motion: reduce){
  .disclaimer-more > summary::after{ transition:none; }
}

/* ===== Public header: remove stray toggle, logo prominence, mobile fit =====
   `app.css` forces `.ds-btn { display:inline-flex !important }`. The public
   hamburger used to carry `ds-btn ds-btn-primary`, so it stayed visible on
   desktop and — via flex `order` — rendered BEFORE the logo. The toggle no
   longer carries those classes, and the rules below make the intent explicit. */
.pub-header .ph-toggle{ display:none; }
.ph-toggle:focus-visible{ outline:2px solid #0f3d5c; outline-offset:2px; border-radius:8px; }

/* Sticky header — stays visible while scrolling. `overflow-x: clip` (NOT hidden)
   on <body> keeps the sticky containing block without creating a scroll
   container (which would disable `position: sticky`). */
.pub-header{ position:sticky; top:0; z-index:200; }
body:has(.pub-header){ padding-top:0 !important; overflow-x:clip; }

/* The public header is included inside {% block content %}, which base.html
   wraps in .main-content / .main-inner. That wrapper carries the dashboard's
   24px padding, which would leave a gutter above and beside the header and make
   it look detached rather than sticky. Neutralise it on the public pages only,
   so the header is flush to the top and full-bleed, and nothing precedes it. */
body:has(.pub-header) .main-content{ padding:0 !important; }
body:has(.pub-header) .main-inner{ min-height:100vh; }

@media (min-width: 1101px){
  .pub-header .ph-inner{ height:auto; min-height:88px; padding:0 24px; }
  .pub-header .ph-brand{ order:1; flex:0 0 auto; }
  .pub-header .ph-logo{ height:66px; max-height:none; max-width:380px; width:auto; object-fit:contain; }
  .pub-nav{ order:2; }
  .pub-header .ph-toggle{ display:none !important; }
}

@media (max-width: 1100px){
  .pub-header .ph-inner{ height:auto; min-height:62px; padding:8px 14px; flex-wrap:wrap; }
  .pub-header .ph-brand{ order:1; flex:1 1 auto; min-width:0; }
  .pub-header .ph-logo{ height:46px; max-height:none; max-width:230px; width:auto; object-fit:contain; }
  .pub-header .ph-toggle{
    display:inline-flex; order:2; width:44px; height:44px; flex:0 0 auto;
    align-items:center; justify-content:center; padding:0; margin-left:auto;
    border:1px solid #e7ebef; border-radius:10px; background:#fff; color:#0f3d5c;
    font-size:22px; line-height:1; cursor:pointer;
  }
  .pub-nav{ order:3; }
  .pub-nav.open{ max-height:calc(100vh - 66px); overflow:auto; -webkit-overflow-scrolling:touch; }
}

/* ===== Small-screen rhythm (all company pages) ===== */
.ch-page img{ max-width:100%; }
@media (max-width: 640px){
  .ch-wrap{ padding:0 14px; }
  .ch-sec{ padding:34px 0; }
  .ch-sec-head{ margin-bottom:20px; }
  .ch-hero{ padding:34px 14px 40px; }
  .ch-hero h1{ font-size:clamp(1.55rem,7vw,2.1rem); }
  .ch-hero .ch-lead{ font-size:15px; }
  .ch-hero .ch-hero-actions .btn-gold,
  .ch-hero .ch-hero-actions .btn-ghost{ width:100%; justify-content:center; }
  .cta-band{ padding:26px 18px; border-radius:16px; }
  .money-panel{ padding:22px 14px 20px; }
  .trust-block{ padding:20px 18px; }
  .dak-note{ padding:14px 14px; }
  .dak-disclaimer{ padding:16px 16px; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .split{ gap:22px; }
  .grid{ gap:14px; }
  /* Prevent any long token (URL/email) from breaking the layout. */
  .ch-page{ overflow-wrap:break-word; }
}

/* ===== Listing results: empty state + reference line (search page) ===== */
.listing-empty{ grid-column:1 / -1; text-align:center; background:#fff; border:1px solid var(--line,#e9e0d2); border-radius:16px; padding:36px 24px; }
.listing-empty h3{ margin:0 0 8px; font-size:18px; color:var(--ink,#2a2118); }
.listing-empty .text-muted{ color:var(--ink-soft,#5c5346); margin:0 0 16px; }
.listing-empty-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:14px; }
.listing-empty-note{ color:var(--ink-soft,#5c5346); font-size:13px; line-height:1.6; max-width:560px; margin:0 auto; }
.listing-ref{ margin-top:6px; font-size:12px; color:var(--ink-soft,#5c5346); letter-spacing:.2px; }

@media (max-width: 860px){
  .ch-hero[data-hero='partnerships']{
    background-image:url('../img/dak/hero-partnerships.webp');
    background-size:cover;
    background-position:center 30%;
    background-repeat:no-repeat;
  }
}