/* ==========================================================================
   DD Inc. — shared base for the rebuilt static pages (About, Insights)
   Tokens sampled from the approved mockups + the existing site build.
   ========================================================================== */

:root{
  --cream:       #faf8f6;
  --navy:        #00122c;
  --navy-panel:  #001b3a;
  --navy-ink:    #0b1b38;
  --gold:        #c98a38;
  --gold-bright: #d08329;
  --white:       #ffffff;

  --display:"Playfair Display", Georgia, serif;
  --body:"DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --shell:1360px;
  --gutter:40px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--cream);
  color:var(--navy-ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------- type ---------------------------------------------------------- */

.display{ font-family:var(--display); font-weight:500; letter-spacing:-.01em; margin:0; }
.display span{ display:block; }
.gold{ color:var(--gold-bright); }

/* ---------- rules --------------------------------------------------------- */

.rule-diamond{ display:flex; align-items:center; gap:8px; width:150px; }
.rule-diamond.centered{ margin-inline:auto; }
.rule-diamond i{ flex:1; height:1px; background:var(--gold); opacity:.85; }
.rule-diamond b{ width:7px; height:7px; background:var(--gold); transform:rotate(45deg); }

/* label with a hairline running out to each side */
.band-label{
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 16px;
  font-family:var(--body);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  white-space:nowrap;
}
.band-label::before,
.band-label::after{ content:""; flex:1; height:1px; background:var(--gold); opacity:.5; }

/* ---------- arrows / buttons ---------------------------------------------- */

.arrow{
  display:inline-block; width:22px; height:1.5px;
  background:currentColor; position:relative;
  vertical-align:middle; margin-left:10px;
}
.arrow::after{
  content:""; position:absolute; right:0; top:50%;
  width:7px; height:7px;
  border-top:1.5px solid currentColor; border-right:1.5px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}

.btn{
  display:inline-flex; align-items:center;
  font-size:13px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  padding:15px 24px;
  transition:background-color .18s ease, color .18s ease, transform .18s ease;
}
.btn-navy{ background:var(--navy); color:var(--gold-bright); }
.btn-navy:hover{ background:#04203f; }
.btn-gold{ background:var(--gold); color:var(--navy); }
.btn-gold:hover{ background:#d9973f; }
.btn-ghost{ background:transparent; color:var(--gold); border:1px solid var(--gold); }
.btn-ghost:hover{ background:rgba(201,138,56,.12); }
.btn:active{ transform:translateY(1px); }

.link-gold{
  display:inline-flex; align-items:center;
  font-size:12px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--gold-bright);
}
.link-gold .arrow{ width:18px; margin-left:8px; }
.link-gold:hover .arrow{ width:24px; transition:width .18s ease; }

/* ==========================================================================
   HEADER (cream variant — as on Home and Insights)
   ========================================================================== */

.site-header{ background:var(--cream); position:sticky; top:0; z-index:60; }
.header-inner{ display:flex; align-items:center; gap:32px; height:88px; }

.brand{ display:flex; align-items:center; gap:14px; flex:0 0 auto; }
.brand-mark{ width:56px; height:auto; }
.brand-rule{ width:1px; height:44px; background:var(--gold); opacity:.55; }
.brand-text{ display:flex; flex-direction:column; gap:3px; }
.brand-name{
  font-family:var(--display); font-size:27px; font-weight:600;
  line-height:1; color:var(--navy-ink); letter-spacing:.01em;
}
.brand-inc{ font-size:20px; font-weight:500; }
.brand-tag{ font-size:11.5px; color:var(--gold); letter-spacing:.005em; line-height:1; }

.nav{ display:flex; align-items:center; gap:34px; margin-left:auto; }
.nav-item{ position:relative; }
.nav-link{
  font-size:12.5px; font-weight:500; letter-spacing:.11em; text-transform:uppercase;
  color:var(--navy-ink); background:none; border:0; padding:0;
  font-family:var(--body); cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  transition:color .18s ease;
}
.nav-link:hover{ color:var(--gold); }
.nav-link.is-active{ color:var(--navy-ink); position:relative; }
.nav-link.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-9px;
  height:2px; background:var(--gold);
}
.caret{
  width:7px; height:7px;
  border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}

.nav-menu{
  position:absolute; top:calc(100% + 18px); left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:270px; background:var(--navy);
  border:1px solid rgba(201,138,56,.28); padding:8px 0;
  opacity:0; visibility:hidden;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.has-menu.open .nav-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.nav-menu a{ display:block; padding:11px 22px; font-size:13px; color:var(--white); letter-spacing:.02em; }
.nav-menu a:hover{ background:rgba(201,138,56,.14); color:var(--gold); }

.header-cta{ flex:0 0 auto; padding:14px 22px; }

.burger{ display:none; background:none; border:0; padding:8px; cursor:pointer; }
.burger span{ display:block; width:24px; height:2px; background:var(--navy-ink); margin:5px 0; }

/* ==========================================================================
   CLOSING CTA (navy band, shared shape)
   ========================================================================== */

.closing{ position:relative; background:var(--navy); overflow:hidden; }

/* ==========================================================================
   RESPONSIVE — header
   ========================================================================== */

@media (max-width:1360px){
  .header-inner{ gap:22px; }
  .nav{ gap:24px; }
  .nav-link{ font-size:11.5px; letter-spacing:.08em; }
}
@media (max-width:1180px){
  .header-inner{ gap:16px; }
  .nav{ gap:17px; }
  .nav-link{ font-size:11px; letter-spacing:.06em; }
  .header-cta{ padding:13px 16px; font-size:11.5px; letter-spacing:.09em; }
  .brand-mark{ width:48px; }
  .brand-name{ font-size:23px; }
}
@media (max-width:980px){
  :root{ --gutter:28px; }
  .nav, .header-cta{ display:none; }
  .burger{ display:block; margin-left:auto; }
  body.nav-open .nav{
    display:flex; position:absolute; top:88px; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--navy); padding:14px 28px 22px; z-index:70;
  }
  body.nav-open .nav .nav-link{ color:var(--white); padding:13px 0; }
  body.nav-open .nav .nav-link.is-active::after{ bottom:6px; }
  body.nav-open .nav-menu{
    position:static; transform:none; opacity:1; visibility:visible;
    border:0; background:transparent; min-width:0; padding:0 0 8px 14px;
  }
}
@media (max-width:620px){
  .header-inner{ height:74px; }
  .brand-mark{ width:44px; }
  .brand-name{ font-size:22px; }
  .brand-tag{ font-size:10px; }
  body.nav-open .nav{ top:74px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}