/* Drones UAE: ivory, warm silver and champagne gold, sampled from the original logo. */
:root {
 color-scheme: light;
 --bg:#f9f7f2; --bg-soft:#f0ece4; --panel:#fffdf9; --panel2:#eee9e0;
 --surface:rgba(255,253,249,.91); --surface-strong:rgba(255,253,249,.97);
 --line:#d9d0c2; --line-strong:#b9a98f;
 --ink:#302f2c; --text:#302f2c; --mut:#605b53; --muted:#605b53;
 --amber:#7d5324; --cyan:#7d5324; --cyan-soft:#805b2e;
 --orange:#7d5324; --orange-soft:#805b2e; --slate:#605b53;
 --green:#306c4c; --red:#a83930; --danger:#a83930;
 --shadow:0 22px 64px rgba(75,65,51,.10);
 --brand-gold:#c0975b; --brand-silver:#aaa69f;
}
html,body{background-color:var(--bg);color:var(--ink)}
body{background-image:radial-gradient(ellipse at 18% 14%,rgba(192,151,91,.10),transparent 32rem),linear-gradient(180deg,#f9f7f2,#f0ece4 60%,#f9f7f2)}
body::after,.vignette{background:radial-gradient(circle,transparent 45%,rgba(227,220,207,.16) 100%)}
.atmosphere,.duae-unified-layer{mix-blend-mode:multiply;opacity:.45}
.noise{opacity:.025}
.site-header,.duae-site-header,.duae-site-header::before{background:linear-gradient(120deg,#fffdf9,#f0ece4);color:var(--ink)}
.mobile-menu,.duae-mobile-menu,.mega-menu,.navsub,.sitemenu,.sitepanel,.sresults{background:#fffdf9;color:var(--ink)}
.gradient-text{background-image:linear-gradient(110deg,#35332f,#805b2e 40%,#7d5324 75%,#35332f);text-shadow:none}
.button--primary,.btn:not(.ghost),button[type="submit"],nav a.on,nav button.on,.pnbtn.on,.duae-unified-home{
 color:#30291f;background:linear-gradient(120deg,#ead4b0,#d8b682);border-color:#b18c54;box-shadow:0 8px 24px rgba(133,100,51,.13)
}
.button--primary:hover,.btn:not(.ghost):hover,button[type="submit"]:hover{background:linear-gradient(120deg,#e3c696,#cca56d);border-color:#8b6938}
.button--secondary,.btn.ghost{color:#544b3e;background:#fffdf9;border-color:#c7bba9}
.button--secondary:hover,.btn.ghost:hover{background:#eee5d5;border-color:#b18c54}
.eyebrow,.eyebrow::before,.section-kicker,.tag.c,.tag.a{color:#7d5324}
.duae-status-pill,.status-pill{color:#4f593f;background:#efefe6;border-color:#c6c9b5}
.duae-status-pill::before,.status-pill::before{background:#697354;box-shadow:0 0 8px rgba(105,115,84,.15)}
.duae-panel,.hero-panel,.mission-card,.card,.tl-panel,details,.vidcard,.chatpanel{border-color:var(--line)}
.duae-panel,.hero,.content-card,.hero-panel,.mission-card,.card,.tl-panel,details,.vidcard,.chatpanel{background:linear-gradient(145deg,rgba(255,253,249,.94),rgba(243,239,231,.92))}
.loader{background:#f9f7f2}
input,select,textarea{color:#302f2c;background:#fffdf9;border-color:#c6bba9;color-scheme:light}
input::placeholder,textarea::placeholder{color:#71695d;opacity:1}
option{color:#302f2c;background:#fffdf9}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #876130;outline-offset:4px}
::selection{background:#e7cea7;color:#30291f}
.hero-title,.section-title,h1,h2{color:#302f2c}
.hero-title .gradient-text,.section-title .gradient-text{color:transparent}
.scroll-hint,.scene-caption,.hero-caption{color:#605b53}
footer,.site-footer{background:linear-gradient(135deg,#f0ece4,#e7e1d6);color:#605b53;border-color:#d2c7b6}
/* Give native disabled controls a visible, neutral state. */
button:disabled,input:disabled,select:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}

/* =========================================================
   Responsive density pass — 2026-09-10
   Goal: keep Drones Hub visually light and proportional to
   the user's viewport without changing the visual identity.
   ========================================================= */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  max-width: 100%;
  overflow-x: clip;
}

img, svg, video, canvas, iframe {
  max-width: 100%;
}

input, select, textarea, button {
  max-width: 100%;
}

/* Fluid page gutters on all site templates */
body.duae-unified-page main,
main {
  padding-inline: clamp(14px, 3vw, 36px);
}

/* Interior tool/article hero: scale by BOTH width and height.
   This prevents very large headings on wide-but-short laptop screens. */
body.duae-unified-page .duae-page-intro {
  min-height: min(48svh, 520px);
  width: min(100%, 1040px);
}

body.duae-unified-page .duae-page-intro h1,
body.duae-unified-page .duae-page-intro h2,
body.duae-unified-page .hero h1 {
  max-width: min(100%, 900px);
  font-size: clamp(1.65rem, min(3.25vw, 5.6vh), 3.15rem);
  line-height: 1.18;
  overflow-wrap: anywhere;
}

body.duae-unified-page .duae-panel,
body.duae-unified-page .hero,
body.duae-unified-page .card {
  max-width: 100%;
}

body.duae-unified-page .duae-panel {
  padding: clamp(16px, 2.2vw, 28px);
  border-radius: clamp(16px, 1.8vw, 24px);
}

/* Home / 3D landing: keep each scene compact on desktop/laptop */
#hero.panel,
.panel {
  min-height: min(88svh, 760px);
}

#hero .panel__inner,
.panel__inner {
  width: min(100%, 1280px);
  gap: clamp(24px, 4.5vw, 68px);
}

#hero .content-card {
  width: min(100%, 360px);
  max-width: 360px;
  padding: clamp(15px, 1.55vw, 23px);
}

.hero-title {
  font-size: clamp(1.5rem, min(2.35vw, 4.8vh), 2.55rem) !important;
  line-height: 1.16 !important;
}

.section-title {
  font-size: clamp(1.8rem, min(3.5vw, 5.8vh), 3.5rem) !important;
  line-height: 1.16 !important;
}

#hero .lead {
  font-size: clamp(.82rem, .82vw, .94rem) !important;
  line-height: 1.7 !important;
}

#hero .cta-row {
  margin-block-start: 14px !important;
}

#hero .button {
  min-height: 40px !important;
  padding: 8px 13px !important;
  font-size: .76rem !important;
}

/* Header should not dominate shorter screens */
.site-header,
.duae-site-header {
  max-width: calc(100vw - clamp(16px, 3vw, 48px));
}

@media (max-height: 820px) and (min-width: 861px) {
  #hero.panel,
  .panel {
    min-height: min(84svh, 680px);
    padding-block-start: calc(var(--header-h, 72px) + 30px);
    padding-block-end: 28px;
  }

  body.duae-unified-page .duae-page-intro {
    min-height: min(42svh, 430px);
  }

  body.duae-unified-page .duae-page-intro h1,
  body.duae-unified-page .duae-page-intro h2,
  body.duae-unified-page .hero h1 {
    font-size: clamp(1.55rem, min(3vw, 5vh), 2.75rem);
  }

  .hero-title {
    font-size: clamp(1.45rem, min(2.1vw, 4.3vh), 2.25rem) !important;
  }

  .section-title {
    font-size: clamp(1.7rem, min(3.1vw, 5.2vh), 3rem) !important;
  }

  .content-card {
    padding: clamp(18px, 2.1vw, 30px);
  }
}

/* Tablet */
@media (max-width: 860px) {
  body.duae-unified-page main,
  main {
    padding-inline: clamp(12px, 3.5vw, 24px);
  }

  body.duae-unified-page .duae-page-intro {
    min-height: auto;
    width: 100%;
    padding-block: clamp(22px, 6vh, 46px);
  }

  body.duae-unified-page .duae-page-intro h1,
  body.duae-unified-page .duae-page-intro h2,
  body.duae-unified-page .hero h1 {
    font-size: clamp(1.55rem, 6vw, 2.45rem);
  }

  #hero.panel,
  .panel {
    min-height: auto;
    padding-block-start: calc(var(--header-h, 68px) + 104px);
    padding-block-end: 28px;
  }

  #hero .panel__inner,
  .panel__inner {
    width: 100%;
  }

  #hero .content-card,
  .content-card {
    width: min(100%, 560px);
    max-width: 100%;
    margin-inline: auto;
    padding: clamp(16px, 3.8vw, 22px);
  }

  .hero-title {
    font-size: clamp(1.45rem, 6vw, 2.05rem) !important;
  }

  .section-title {
    font-size: clamp(1.7rem, 7.4vw, 2.6rem) !important;
  }

  .lead {
    font-size: clamp(.82rem, 2.8vw, .94rem) !important;
    line-height: 1.72 !important;
  }
}

/* Phone */
@media (max-width: 540px) {
  body.duae-unified-page main,
  main {
    padding-inline: 12px;
  }

  .site-header,
  .duae-site-header {
    max-width: calc(100vw - 16px);
  }

  body.duae-unified-page .duae-page-intro {
    padding-block: 18px 24px;
  }

  body.duae-unified-page .duae-page-intro h1,
  body.duae-unified-page .duae-page-intro h2,
  body.duae-unified-page .hero h1 {
    font-size: clamp(1.4rem, 7.6vw, 2rem);
    line-height: 1.2;
  }

  #hero.panel,
  .panel {
    padding-inline: 12px;
    padding-block-start: calc(var(--header-h, 66px) + 92px);
  }

  #hero .content-card,
  .content-card,
  body.duae-unified-page .duae-panel,
  body.duae-unified-page .hero {
    width: 100%;
    max-width: 100%;
    border-radius: 18px;
  }

  .hero-title {
    font-size: clamp(1.35rem, 7.3vw, 1.85rem) !important;
  }

  .section-title {
    font-size: clamp(1.55rem, 8.2vw, 2.15rem) !important;
  }

  #hero .button,
  .button,
  .btn {
    min-height: 42px;
  }

  table {
    font-size: .8rem;
  }
}