/* ===== FRAME: the one header and footer for both sites (components/header.ts, components/footer.ts) ===== */

/* containers + buttons, scoped to the frame so they never touch page content */
.top .wrap,.ft .wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.top .btn,.ft .btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border-radius:999px;font-weight:600;font-size:16px;text-decoration:none;transition:background .2s}
.top .btn-gold,.ft .btn-gold{background:var(--gold);color:var(--navy)}
.top .btn-gold:hover,.ft .btn-gold:hover{background:var(--gold-hover);color:var(--navy)}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(5,26,54,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--soft)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
.brand img{height:45px;width:auto;display:block}
.menu{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:500}
.menu a{color:var(--text);text-decoration:none;padding:12px 0}
.menu a:hover{color:var(--white)}
.menu a[aria-current="page"]{color:var(--white);box-shadow:inset 0 -2px 0 var(--gold)}
.menu .btn{min-height:40px;padding:0 18px;font-size:14px;color:var(--navy)}   /* = design system small button */
.toggle{display:none;background:none;border:1px solid var(--line);color:var(--white);width:44px;height:44px;border-radius:14px;cursor:pointer;align-items:center;justify-content:center}
@media (max-width:900px){
  .toggle{display:inline-flex}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px 28px 24px;background:var(--navy);border-bottom:1px solid var(--soft)}
  .menu.open{display:flex}
  .menu a{padding:14px 0;border-bottom:1px solid var(--soft)}
  .menu a[aria-current="page"]{box-shadow:none}
  .menu .btn{margin-top:16px}
}
@media (max-width:420px){.brand img{height:38px}}

/* footer */
footer.ft{padding:56px 0 30px;border-top:1px solid var(--soft);background:linear-gradient(180deg,var(--navy),var(--ink))}
.ftop2{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:36px 56px}
.fbrand2{display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:360px}
.flogo3{width:150px;height:auto;display:block}
.flogo3.wide{width:240px}
.fline2{margin:0;font-family:var(--serif);font-size:19px;line-height:1.4;color:var(--text)}
.fline2 em{color:var(--gold)}
.ft .fcta{min-height:46px;padding:0 24px;font-size:15px}
.fcols2{display:flex;flex-wrap:wrap;gap:28px 64px}
.fcols2 div{display:flex;flex-direction:column;gap:12px;min-width:120px}
.fcols2 h4{margin:0 0 4px;font-size:var(--t-label);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.fcols2 a{font-size:15px;color:var(--text);text-decoration:none}
.fcols2 a:hover{color:var(--white)}
.fmid{display:grid;grid-template-columns:auto 1px minmax(0,1fr);gap:36px;align-items:center;margin-top:40px;padding:30px 36px;border:1px solid var(--line);border-radius:22px;background:rgba(7,36,71,.55)}
.tmco2{display:flex;flex-direction:column;gap:12px}
.tmco2 small{font-size:var(--t-label);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.tmco2 img{width:240px;height:auto;display:block}
.tmco2 img.mark{width:170px}
.vdiv{align-self:stretch;width:1px;background:linear-gradient(transparent,rgba(255,179,54,.6),transparent)}
.fq2{margin:0}
.fq2 blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(19px,1.8vw,23px);line-height:1.45;color:var(--white)}
.fq2 figcaption{margin-top:10px;font-size:13px;color:var(--quiet)}
.fbot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 24px;margin-top:26px;font-size:13px;color:var(--quiet)}
.fsig{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--gold)}
@media (max-width:960px){
  .fmid{grid-template-columns:1fr;text-align:center;gap:22px;padding:28px 22px}
  .tmco2{align-items:center}
  .vdiv{width:120px;height:1px;justify-self:center;background:linear-gradient(90deg,transparent,rgba(255,179,54,.6),transparent)}
  .fbot{flex-direction:column;text-align:center}
}
@media (max-width:760px){
  .ftop2{flex-direction:column;align-items:center;text-align:center}
  .fbrand2{align-items:center}
  .fcols2{justify-content:center;text-align:center;gap:28px 40px}
  .fcols2 div{align-items:center}
}