/* ============================================================
   FLEET DESIGN SYSTEM — overhaul.css (2026-10-19)
   One design language across all Trimurti Group properties.
   Loaded AFTER each site's style.css. Per-site brand color is
   injected as --ov-accent / --ov-accent-deep in a <style> block.
   Content and markup are untouched by this layer.
   ============================================================ */
:root{
  --ov-accent:#C9A227;
  --ov-accent-deep:#8a6d1f;
  --ov-font-head:"Fraunces",Georgia,"Times New Roman",serif;
  --ov-font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ov-radius:16px;
  --ov-radius-sm:10px;
  --ov-shadow:0 1px 2px rgba(10,15,25,.05),0 8px 28px -12px rgba(10,15,25,.18);
  --ov-shadow-lg:0 2px 4px rgba(10,15,25,.06),0 20px 44px -16px rgba(10,15,25,.28);
  --ov-ring:0 0 0 3px color-mix(in srgb,var(--ov-accent) 35%,transparent);
  --ov-ease:cubic-bezier(.22,.8,.28,1);
}

/* ---------- Typography ---------- */
body{font-family:var(--ov-font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;letter-spacing:-.011em}
h1,h2,h3{font-family:var(--ov-font-head);font-weight:600;letter-spacing:-.015em;line-height:1.12;text-wrap:balance}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.55rem,3vw,2.25rem)}
h3{font-size:clamp(1.15rem,1.8vw,1.4rem)}
p,li{line-height:1.68}
.lead,.lede-big{font-size:clamp(1.06rem,1.5vw,1.22rem);line-height:1.62}
.kicker,.eyebrow{font-family:var(--ov-font-body);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.72rem;color:var(--ov-accent-deep)}
::selection{background:color-mix(in srgb,var(--ov-accent) 32%,transparent)}
a{text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--ov-accent)}

/* ---------- Layout rhythm ---------- */
.wrap{max-width:1160px}
.section{padding-top:clamp(3rem,6vw,4.75rem);padding-bottom:clamp(3rem,6vw,4.75rem)}
.rule{border:none;border-top:1px solid color-mix(in srgb,currentColor 14%,transparent);opacity:.7}

/* ---------- Header / nav ---------- */
.site-header,.topbar{position:sticky;top:0;z-index:60;backdrop-filter:saturate(1.5) blur(12px);-webkit-backdrop-filter:saturate(1.5) blur(12px);box-shadow:0 1px 0 color-mix(in srgb,currentColor 9%,transparent),0 10px 30px -18px rgba(10,15,25,.25)}
.site-header .bar,.topbar-inner{min-height:68px}
.brand{gap:.7rem}
.brand-logo{border-radius:10px}
.brand-name{font-family:var(--ov-font-head);font-weight:600;letter-spacing:-.01em}
.brand-name small{font-family:var(--ov-font-body);letter-spacing:.08em;text-transform:uppercase;font-size:.62rem;opacity:.72}
.main-nav a,.nav-links a{position:relative;padding:.45rem .8rem;border-radius:999px;font-weight:550;transition:background .25s var(--ov-ease),color .25s var(--ov-ease)}
.main-nav a:hover,.nav-links a:hover{background:color-mix(in srgb,var(--ov-accent) 14%,transparent);text-decoration:none}
.main-nav a.active,.nav-links a.active{background:color-mix(in srgb,var(--ov-accent) 18%,transparent);color:inherit}
.nav-cta,.main-nav a.nav-cta{border:1.5px solid var(--ov-accent);border-radius:999px;padding:.5rem 1.05rem;font-weight:650}
.nav-cta:hover{background:var(--ov-accent);color:#fff}
.nav-toggle{border-radius:10px;padding:.5rem .7rem}

/* ---------- Hero ---------- */
.hero-video{border-radius:0 0 28px 28px;overflow:hidden}
.hero-video .scrim{background:linear-gradient(180deg,rgba(5,8,14,.34),rgba(5,8,14,.55) 58%,rgba(5,8,14,.78))}
.hero-content{max-width:820px}
.hero-kicker{font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:.72rem}
.hero-content h1{font-size:clamp(2.4rem,5.6vw,4.1rem);line-height:1.06}
.hero-sub{font-size:clamp(1.05rem,1.7vw,1.28rem);line-height:1.6;opacity:.94}
.hero-cta{gap:.8rem;flex-wrap:wrap}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:.78rem 1.5rem;font-weight:650;letter-spacing:.01em;border:1.5px solid transparent;transition:transform .22s var(--ov-ease),box-shadow .22s var(--ov-ease),background .22s var(--ov-ease);box-shadow:var(--ov-shadow)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--ov-shadow-lg);text-decoration:none}
.btn:active{transform:translateY(0)}
.btn-gold,.btn-primary{background:linear-gradient(160deg,var(--ov-accent),var(--ov-accent-deep));color:#fff}
.btn-outline,.btn-ghost{background:transparent;border-color:color-mix(in srgb,currentColor 35%,transparent);color:inherit;box-shadow:none}
.btn-outline:hover,.btn-ghost:hover{border-color:var(--ov-accent);background:color-mix(in srgb,var(--ov-accent) 10%,transparent)}

/* ---------- Cards & affiliates ---------- */
.card,.aff-card,.dp-card{border-radius:var(--ov-radius);box-shadow:var(--ov-shadow);border:1px solid color-mix(in srgb,currentColor 8%,transparent);transition:transform .25s var(--ov-ease),box-shadow .25s var(--ov-ease)}
.card:hover,.aff-card:hover{transform:translateY(-4px);box-shadow:var(--ov-shadow-lg)}
.aff-mono{font-family:var(--ov-font-head);font-weight:600}
.aff-link{font-weight:600;color:var(--ov-accent-deep)}
.tag{display:inline-block;border-radius:999px;padding:.22rem .7rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:color-mix(in srgb,var(--ov-accent) 15%,transparent);color:var(--ov-accent-deep)}
.step .num,.num{font-family:var(--ov-font-head);font-weight:600;color:var(--ov-accent-deep)}
.icon{color:var(--ov-accent-deep)}

/* ---------- Tree of Life motif ---------- */
.tree-of-life{border-radius:var(--ov-radius)}
.tree-quote{font-family:var(--ov-font-head);font-style:italic;font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.45}

/* ---------- Forms ---------- */
.field label{font-weight:620;font-size:.92rem;margin-bottom:.35rem}
.field input,.field select,.field textarea,.dp-input{border-radius:var(--ov-radius-sm);border:1.5px solid color-mix(in srgb,currentColor 22%,transparent);padding:.72rem .9rem;font:inherit;width:100%;background:transparent;transition:border-color .2s var(--ov-ease),box-shadow .2s var(--ov-ease)}
.field input:focus,.field select:focus,.field textarea:focus,.dp-input:focus{outline:none;border-color:var(--ov-accent);box-shadow:var(--ov-ring)}

/* ---------- Footer ---------- */
.site-footer{margin-top:0}
.footer-inner{padding-top:3.2rem}
.footer-grid{gap:2.2rem}
.footer-logo{border-radius:10px}
.footer-bottom,.footer-legal,.legal{font-size:.85rem;opacity:.85}
.a11y-footer-line,.transparency-line,.guarantee-line{font-size:.9rem}
.ff-links a,.family-links a,.footer-family-block a{text-underline-offset:3px}

/* ---------- Chatbot ---------- */
#chatbot-toggle,.chatbot-toggle{box-shadow:var(--ov-shadow-lg)}
#chatbot-panel,.chatbot-panel{border-radius:20px;overflow:hidden;box-shadow:var(--ov-shadow-lg)}

/* ---------- Accessibility & motion ---------- */
:focus-visible{outline:2.5px solid var(--ov-accent);outline-offset:2px;border-radius:6px}
.skip-link{border-radius:0 0 10px 0}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important;scroll-behavior:auto!important}
  .btn:hover,.card:hover,.aff-card:hover{transform:none}
}

/* ---------- Mobile ---------- */
@media (max-width:900px){
  .section{padding-top:2.6rem;padding-bottom:2.6rem}
  .hero-content h1{font-size:clamp(2rem,8.4vw,2.7rem)}
  .footer-grid{gap:1.6rem}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .btn{padding:.72rem 1.25rem}
  .hero-cta .btn{width:100%;justify-content:center}
  .main-nav a,.nav-links a{padding:.6rem .9rem}
  h1{font-size:clamp(1.9rem,8vw,2.4rem)}
  img,video{max-width:100%;height:auto}
}

/* QC3 (2026-10-21): mobile UX — compact fixed widgets, content clears them, 16px body floor */
@media (max-width:640px){
  #a11y-toolbar{left:12px;bottom:12px}
  #a11y-toolbar .a11y-toggle{padding:11px 12px}
  #a11y-toolbar .a11y-toggle-label{display:none}
  #a11y-toolbar .a11y-panel{min-width:200px;max-width:calc(100vw - 24px)}
  #brand-chatbot .cb-chat-btn{width:52px;height:52px;right:14px;bottom:14px}
  #brand-chatbot .cb-chat-panel{right:8px;bottom:84px}
  main{padding-bottom:104px}
  body{font-size:16px}
  p,li{font-size:1rem}
}