/* ============================================================
   RankOptim — chrome.css
   Header · Mega nav · Mobile drawer · Footer (accordion on mobile)
   ============================================================ */

/* ══ BRAND LOCKUP (mark + wordmark side by side) ══════════ */
.brand{display:inline-flex;align-items:center;gap:clamp(9px,1vw,13px);flex:none}
.brand-mark{
  width:clamp(34px,3.4vw,42px);height:auto;flex:none;
  filter:drop-shadow(0 3px 10px rgba(214,178,110,.3));
  transition:transform var(--t-med),filter var(--t-med);
}
.brand:hover .brand-mark{transform:rotate(-7deg) scale(1.07);filter:drop-shadow(0 5px 18px rgba(214,178,110,.55))}
.brand-word{display:flex;flex-direction:column;line-height:1;min-width:0}
.brand-name{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.24rem,1.9vw,1.6rem);letter-spacing:.11em;
  background:linear-gradient(100deg,var(--gold-lt),var(--gold) 52%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  white-space:nowrap;
}
.brand-sub{
  font-size:.53rem;font-weight:700;letter-spacing:.30em;text-transform:uppercase;
  color:var(--ink-4);margin-top:5px;white-space:nowrap;
  transition:color var(--t-fast);
}
.brand:hover .brand-sub{color:var(--gold)}
@media (max-width:400px){ .brand-sub{letter-spacing:.2em;font-size:.5rem} }

/* ══ HEADER ═══════════════════════════════════════════════ */
#site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--nav-h);
  background:transparent;
  transition:height var(--t-med),background var(--t-med),border-color var(--t-med),box-shadow var(--t-med);
  border-bottom:1px solid transparent;
}
#site-header::before{
  content:'';position:absolute;inset:0;z-index:-1;opacity:0;
  background:rgba(5,10,24,.82);backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  transition:opacity var(--t-med);
}
#site-header.stuck::before{opacity:1}
#site-header.stuck{border-bottom-color:var(--line);box-shadow:0 10px 40px rgba(0,0,0,.42)}
#site-header.hide{transform:translateY(-100%)}
#site-header{transition:transform .4s var(--ease),height var(--t-med),border-color var(--t-med),box-shadow var(--t-med)}

.hdr{
  height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:var(--max-w);margin-inline:auto;padding-inline:var(--sp-gut);
}
@media (max-width:900px){ #site-header{height:var(--nav-h-sm)} }

/* ── Desktop nav ────────────────────────────────────────── */
.nav{display:flex;align-items:center;gap:2px}
.nav > li{position:relative}
.nav > li > a{
  display:flex;align-items:center;gap:6px;position:relative;
  padding:10px 15px;border-radius:var(--r-pill);
  font-size:var(--t-sm);font-weight:600;color:var(--ink-2);
  transition:color var(--t-fast),background var(--t-fast);
}
.nav > li > a::after{
  content:'';position:absolute;left:15px;right:15px;bottom:4px;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--royal-lt));
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-med);
}
.nav > li > a:hover{color:var(--ink);background:rgba(255,255,255,.04)}
.nav > li > a:hover::after,.nav > li.active > a::after{transform:scaleX(1)}
.nav > li.active > a{color:var(--gold)}
.nav-caret{width:11px;height:11px;transition:transform var(--t-fast);opacity:.7}
.nav > li:hover .nav-caret,.nav > li.open .nav-caret{transform:rotate(180deg)}

/* ── Mega menu ──────────────────────────────────────────── */
.mega{
  position:fixed;left:50%;transform:translate(-50%,10px);
  top:calc(var(--nav-h) - 6px);
  width:min(1060px, calc(100vw - 40px));
  background:rgba(8,16,38,.96);backdrop-filter:blur(26px) saturate(160%);
  border:1px solid var(--line-2);border-radius:var(--r-xl);
  box-shadow:var(--shadow-3);
  padding:26px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--t-med),transform var(--t-med),visibility var(--t-med);
}
.has-mega:hover .mega,.has-mega.open .mega,.mega:hover{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}
.mega-grid{display:grid;grid-template-columns:repeat(3,1fr) .92fr;gap:24px}
@media (max-width:1180px){ .mega-grid{grid-template-columns:repeat(3,1fr)} .mega-promo{display:none} }
.mega-col-head{
  display:flex;align-items:baseline;gap:9px;margin-bottom:14px;
  padding-bottom:11px;border-bottom:1px solid var(--line);
}
.mega-col-head b{font-family:var(--f-display);font-size:1.12rem;font-weight:600;color:var(--gold)}
.mega-col-head i{font-style:normal;font-size:.62rem;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-4)}
.mega-link{
  display:flex;gap:12px;align-items:flex-start;padding:10px 11px;border-radius:var(--r-md);
  transition:background var(--t-fast),transform var(--t-fast);
}
.mega-link:hover{background:rgba(255,255,255,.055);transform:translateX(4px)}
.mega-link .ro-ic{width:19px;height:19px;flex:none;margin-top:3px;color:var(--ink-4);transition:color var(--t-fast),transform var(--t-fast)}
.mega-link:hover .ro-ic{color:var(--gold);transform:scale(1.1)}
.mega-link b{display:block;font-size:var(--t-sm);font-weight:600;color:var(--ink);margin-bottom:2px}
.mega-link small{display:block;font-size:.74rem;color:var(--ink-4);line-height:1.45}
.mega-link:hover b{color:var(--gold-lt)}
.mega-promo{
  background:linear-gradient(155deg,var(--navy-750),var(--navy-850));
  border:1px solid var(--royal-line);border-radius:var(--r-lg);padding:22px;
  display:flex;flex-direction:column;justify-content:space-between;gap:16px;
}
.mega-promo .mega-promo-title{font-family:var(--f-display);font-size:1.3rem;font-weight:500;color:var(--ink);margin-bottom:8px}
.mega-promo p{font-size:.78rem;color:var(--ink-3);line-height:1.6}

/* ── Header actions ─────────────────────────────────────── */
.hdr-actions{display:flex;align-items:center;gap:11px;flex:none}

/* Hamburger */
.burger{
  display:none;width:44px;height:44px;border-radius:var(--r-md);flex:none;
  background:rgba(255,255,255,.045);border:1px solid var(--line);cursor:pointer;
  position:relative;transition:border-color var(--t-fast),background var(--t-fast);
}
.burger:hover{border-color:var(--gold-line);background:var(--gold-pale)}
.burger i{
  position:absolute;left:13px;height:1.7px;width:18px;border-radius:2px;background:var(--ink);
  transition:transform var(--t-med),opacity var(--t-fast),width var(--t-med);
}
.burger i:nth-child(1){top:16px}
.burger i:nth-child(2){top:21.5px;width:13px}
.burger i:nth-child(3){top:27px}
.burger.on i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0;width:0}
.burger.on i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);width:18px}

/* ── Responsive header behaviour ────────────────────────── */
@media (max-width:1120px){
  .nav > li > a{padding:10px 11px;font-size:.83rem}
  .mega{width:calc(100vw - 32px)}
}
@media (max-width:980px){
  .nav,.hdr-cta-desktop{display:none}
  .burger{display:block}
}
@media (max-width:520px){
  .hdr-actions .btn{display:none}
}

/* ══ MOBILE DRAWER ════════════════════════════════════════ */
.scrim{
  position:fixed;inset:0;z-index:1050;background:rgba(3,6,15,.7);backdrop-filter:blur(5px);
  opacity:0;visibility:hidden;transition:opacity var(--t-med),visibility var(--t-med);
}
.scrim.on{opacity:1;visibility:visible}

.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:1060;
  width:min(400px,90vw);display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--navy-900),var(--navy-1000));
  border-left:1px solid var(--line-2);box-shadow:-24px 0 70px rgba(0,0,0,.6);
  transform:translateX(102%);transition:transform .46s var(--ease);
  overscroll-behavior:contain;
}
.drawer.on{transform:none}
.drawer-top{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px var(--sp-gut);border-bottom:1px solid var(--line);flex:none;
  padding-top:calc(16px + env(safe-area-inset-top));
}
.drawer-x{
  width:40px;height:40px;border-radius:var(--r-md);flex:none;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink-2);
  display:grid;place-items:center;font-size:1.15rem;transition:all var(--t-fast);
}
.drawer-x:hover{border-color:var(--gold-line);color:var(--gold);transform:rotate(90deg)}
.drawer-body{flex:1;overflow-y:auto;padding:12px var(--sp-gut) 24px;-webkit-overflow-scrolling:touch}
.drawer-body::-webkit-scrollbar{width:4px}

.mnav > li{border-bottom:1px solid var(--line)}
.mnav > li > a,.mnav .msub-btn{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:17px 2px;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--f-display);font-size:1.32rem;font-weight:500;color:var(--ink);
  transition:color var(--t-fast),padding-left var(--t-fast);
}
.mnav > li > a:hover,.mnav .msub-btn:hover{color:var(--gold);padding-left:8px}
.mnav > li.active > a{color:var(--gold)}
.msub-btn .ro-ic{width:17px;height:17px;color:var(--ink-4);transition:transform var(--t-med),color var(--t-fast)}
.msub-btn[aria-expanded="true"]{color:var(--gold)}
.msub-btn[aria-expanded="true"] .ro-ic{transform:rotate(180deg);color:var(--gold)}
.msub{overflow:hidden;height:0;transition:height var(--t-med)}
.msub-inner{padding-bottom:14px}
.msub-group{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:12px 0 7px;font-weight:700}
.msub a{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-sm);
  font-size:.88rem;color:var(--ink-2);transition:all var(--t-fast);
}
.msub a:hover{background:rgba(255,255,255,.05);color:var(--gold-lt);transform:translateX(4px)}
.msub a .ro-ic{width:17px;height:17px;color:var(--ink-4);flex:none}
.msub a:hover .ro-ic{color:var(--gold)}

.drawer-foot{padding:20px var(--sp-gut) calc(24px + env(safe-area-inset-bottom));border-top:1px solid var(--line);flex:none;display:grid;gap:11px}
.drawer-mail{
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:var(--t-sm);color:var(--ink-3);transition:color var(--t-fast);
}
.drawer-mail:hover{color:var(--gold)}
.drawer-mail .ro-ic{width:16px;height:16px}

/* ══ FOOTER ═══════════════════════════════════════════════ */
#site-footer{
  position:relative;margin-top:clamp(60px,7vw,110px);
  background:linear-gradient(180deg,transparent,var(--navy-1000) 34%);
  border-top:1px solid var(--line);
}
.foot-glow{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(900px,100%);height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

/* Newsletter strip */
.foot-nl{
  margin-top:clamp(-40px,-4vw,-30px);position:relative;z-index:3;
}
.foot-nl-box{
  background:linear-gradient(140deg,var(--navy-800),var(--navy-750));
  border:1px solid var(--royal-line);border-radius:var(--r-xl);
  padding:clamp(26px,3.6vw,44px);
  display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(22px,3vw,44px);align-items:center;
  box-shadow:var(--shadow-2);
}
@media (max-width:880px){ .foot-nl-box{grid-template-columns:1fr;text-align:center} }
.foot-nl-box h3{font-size:clamp(1.5rem,2.4vw,2.1rem);margin-bottom:9px}
.foot-nl-box p{font-size:var(--t-sm);color:var(--ink-3)}
.nl-form{display:flex;gap:10px}
@media (max-width:480px){ .nl-form{flex-direction:column} }
.nl-form .input{border-radius:var(--r-pill);padding-inline:20px}

/* Main grid */
.foot-main{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr;
  gap:clamp(26px,3.4vw,54px);
  padding-block:clamp(46px,5.5vw,76px) clamp(30px,3.4vw,46px);
}
.foot-brand p{font-size:var(--t-sm);color:var(--ink-3);line-height:1.72;margin:18px 0 20px;max-width:38ch}
.foot-col-title{
  font-size:var(--t-label);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:18px;
}
.foot-links{display:grid;gap:11px}
.foot-links a{
  display:inline-flex;align-items:center;gap:7px;position:relative;
  font-size:var(--t-sm);color:var(--ink-3);width:fit-content;
  transition:color var(--t-fast),transform var(--t-fast);
}
.foot-links a::before{
  content:'';width:0;height:1px;background:var(--gold);
  transition:width var(--t-fast);
}
.foot-links a:hover{color:var(--gold-lt);transform:translateX(3px)}
.foot-links a:hover::before{width:11px}
.tagpill{
  font-size:.58rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:2px 7px;border-radius:var(--r-pill);
  background:var(--gold-pale);border:1px solid var(--gold-line);color:var(--gold);
}

.foot-contact{display:grid;gap:16px;margin-bottom:22px}
.foot-ci{display:flex;gap:12px;align-items:flex-start}
.foot-ci .ro-ic{width:18px;height:18px;flex:none;margin-top:3px;color:var(--gold)}
.foot-ci span{display:block;font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.foot-ci a,.foot-ci p{font-size:var(--t-sm);color:var(--ink-2);transition:color var(--t-fast);line-height:1.55}
.foot-ci a:hover{color:var(--gold)}

.foot-social{display:flex;gap:10px}
.soc{
  width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;
  background:rgba(255,255,255,.045);border:1px solid var(--line);color:var(--ink-3);
  transition:all var(--t-med);
}
.soc:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-pale);transform:translateY(-4px)}

/* Bottom bar */
.foot-bottom{
  border-top:1px solid var(--line);
  padding-block:22px calc(24px + env(safe-area-inset-bottom));
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between;
}
.foot-copy{font-size:var(--t-xs);color:var(--ink-4)}
.foot-copy strong{color:var(--ink-3)}
.foot-legal{display:flex;flex-wrap:wrap;gap:8px 16px}
.foot-legal a{font-size:var(--t-xs);color:var(--ink-4);transition:color var(--t-fast)}
.foot-legal a:hover{color:var(--gold)}

/* ── FOOTER: mobile accordion ───────────────────────────── */
.foot-acc-btn{display:none}
@media (max-width:820px){
  .foot-main{grid-template-columns:1fr;gap:0;padding-bottom:20px}
  .foot-brand{padding-bottom:26px;border-bottom:1px solid var(--line)}
  .foot-brand p{max-width:none}

  .foot-col{border-bottom:1px solid var(--line)}
  .foot-col .foot-col-title{display:none}
  .foot-acc-btn{
    display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
    padding:18px 2px;background:none;border:0;cursor:pointer;text-align:left;
    font-size:var(--t-label);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
    color:var(--gold);transition:opacity var(--t-fast);
  }
  .foot-acc-btn .acc-ico{color:var(--ink-3)}
  .foot-acc-btn[aria-expanded="true"] .acc-ico{background:var(--gold);border-color:var(--gold);color:var(--navy-900)}
  .foot-panel{overflow:hidden;height:0;transition:height var(--t-med)}
  .foot-panel-inner{padding-bottom:22px}
  .foot-links{gap:14px}
  .foot-links a{font-size:.92rem}

  .foot-bottom{flex-direction:column;align-items:flex-start;gap:14px}
  .foot-legal{gap:8px 14px}
}
@media (min-width:821px){
  .foot-panel{height:auto!important;overflow:visible}
}

/* ── Extra-small polish ─────────────────────────────────── */
@media (max-width:380px){
  .brand-mark{width:32px}
  .brand-name{font-size:1.12rem;letter-spacing:.08em}
}