/* Google Fonts loaded via in */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:-apple-system,'Helvetica Neue',Arial,sans-serif;color:#2C3241;background:#FFFFFF;-webkit-font-smoothing:antialiased;line-height:1.6} img{max-width:100%;display:block} a{color:inherit;text-decoration:none;touch-action:manipulation} button{touch-action:manipulation} :root{ --ink:#12263A;--gold:#C4963A;--gold-lt:#F5ECDA;--cream:#F9F8F4;--sand:#EDE8DF; --border:#D8D2C8;--text:#2C3241;--muted:#6B7280;--white:#FFFFFF;--blue:#1B3A6B; --serif:-apple-system,'Helvetica Neue',Arial,sans-serif --sans:-apple-system,'Helvetica Neue',Arial,sans-serif; --max:1240px; } /* ── NAVIGATION ── */ .nav{position:sticky;top:0;z-index:9000;height:68px;background:#12263A;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center} #nav-hamburger{display:none} .nav-inner{max-width:var(--max);margin:0 auto;padding:0 48px;width:100%;display:flex;align-items:center;gap:40px} .nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0} .nav-logo img{height:28px;width:auto} .nav-logo-text{font-family:var(--serif);font-size:14px;font-weight:600;letter-spacing:.06em;color:#FFFFFF;white-space:nowrap} .nav-links{display:flex;align-items:center;gap:0;list-style:none;flex:1;justify-content:center} .nav-links li{position:relative} .nav-a{display:flex;align-items:center;gap:5px;height:68px;padding:0 18px;font-size:12.5px;font-weight:500;letter-spacing:.04em;color:rgba(255,255,255,.90);transition:color .18s;white-space:nowrap} .nav-a:hover,.nav-a.active{color:#FFFFFF} .nav-a.active::after{content:'';position:absolute;bottom:0;left:18px;right:18px;height:2px;background:#C4963A} .nav-drop{position:absolute;top:68px;left:0;min-width:220px;background:#12263A;border:1px solid rgba(255,255,255,.1);border-top:2px solid #C4963A;display:none;z-index:999} .nav-links li:hover .nav-drop{display:block} .nav-drop a{display:block;padding:13px 20px;font-size:12px;color:rgba(255,255,255,.68);letter-spacing:.04em;transition:all .15s;border-bottom:1px solid rgba(255,255,255,.06)} .nav-drop a:hover{color:#FFFFFF;background:rgba(255,255,255,.06);padding-left:26px} .nav-cta{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;padding:9px 22px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#12263A;background:#C4963A;transition:background .2s} .nav-cta:hover{background:#D4A840} /* ── LAYOUT ── */ .wrap{max-width:var(--max);margin:0 auto;padding:0 56px} .g2{display:grid;grid-template-columns:1fr 1fr;gap:32px} .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} /* ── SECTIONS ── */ .sec {padding:88px 0;background:#FFFFFF;scroll-margin-top:120px} .sec-c {padding:88px 0;background:#F9F8F4;scroll-margin-top:120px} .sec-s {padding:88px 0;background:#EDE8DF;scroll-margin-top:120px} .sec-ink{padding:88px 0;background:linear-gradient(135deg,#08192A 0%,#0C1F3A 60%,#101E34 100%);scroll-margin-top:120px} .sec-sm {padding:56px 0} .sec-xs {padding:40px 0} /* ── TYPOGRAPHY ── */ .label{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#C4963A} .label-muted{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#4B5563} .label-w{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.78)} h1{font-family:'Termina',var(--sans);font-size:clamp(24px,4.5vw,48px);font-weight:500;line-height:1.05;letter-spacing:-.02em;color:#12263A} h1 em{font-style:italic;font-weight:400} h2{font-family:'Termina',var(--sans);font-size:clamp(14px,3vw,30px)font-weight:600;line-height:1.1;letter-spacing:-.015em;color:#12263A} h3{font-size:clamp(18px,2vw,24px);font-weight:600;color:#12263A;line-height:1.3} .h-white h1,.h-white h2,.h-white h3{color:#FFFFFF} p{font-size:15px;line-height:1.85;color:#2C3241} .lead{font-size:17px;line-height:1.85;color:#2C3241;font-weight:300} .muted{color:#4B5563} /* ── HERO ── */ .hero{position:relative;min-height:90vh;display:flex;align-items:flex-end;background-size:cover;background-position:center;background-color:#08192A;overflow:hidden} .hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(to right,rgba(8,20,36,.88) 0%,rgba(12,31,58,.72) 55%,rgba(12,31,58,.25) 100%)} .hero-content{position:relative;z-index:2;padding:0 56px 80px;max-width:var(--max);margin:0 auto;width:100%} .hero-rule{width:48px;height:2px;background:#C4963A;margin-bottom:28px} .hero h1{color:#FFFFFF;max-width:720px} .hero-sub{font-size:16px;font-weight:300;color:rgba(255,255,255,.92);line-height:1.85;max-width:580px;margin-top:20px} .hero-actions{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap} /* ── PAGE HEADER (interior) ── */ .page-header{padding:72px 0 64px;background:#12263A;position:relative;overflow:hidden} .page-header h1{color:#FFFFFF} .page-header .lead{color:rgba(255,255,255,.90)} .breadcrumb{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:20px} .breadcrumb span{color:rgba(255,255,255,.50)} /* ── RULE DECORATION ── */ .rule{display:flex;align-items:center;gap:14px;margin-bottom:18px} .rule-line{height:1px;width:36px;background:#C4963A} .rule-dot{width:5px;height:5px;border-radius:50%;background:#C4963A} /* ── BUTTONS ── */ .btn{display:inline-flex;align-items:center;padding:12px 28px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transition:all .2s;cursor:pointer} .btn-ink{background:#12263A;color:#FFFFFF;border:1px solid #12263A} .btn-ink:hover{background:#1B3A6B} .btn-gold{background:#C4963A;color:#12263A;border:1px solid #C4963A} .btn-gold:hover{background:#D4A840} .btn-out{background:transparent;color:#12263A;border:1px solid #12263A} .btn-out:hover{background:#12263A;color:#FFFFFF} .btn-out-w{background:transparent;color:#FFFFFF;border:1px solid rgba(255,255,255,.5)} .btn-out-w:hover{background:rgba(255,255,255,.1)} .btn-text{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#C4963A;border-bottom:1px solid #C4963A;padding-bottom:2px} /* ── CARDS ── */ .card{background:#FFFFFF;border:1px solid #D8D2C8;padding:36px 32px;transition:box-shadow .25s} .card:hover{box-shadow:0 6px 28px rgba(18,38,58,.08)} .card-gold{border-left:3px solid #C4963A} .card-ink{background:#12263A;border:none} /* ── DATA ROWS (key/value) ── */ .data-table{border-top:1px solid #D8D2C8;margin-top:20px} .data-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid #D8D2C8} .data-key{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#4B5563} .data-val{font-size:13px;font-weight:500;color:#12263A;text-align:right} /* ── STAT STRIP ── */ .stat-strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #D8D2C8} .stat-item{padding:32px 28px;border-right:1px solid #D8D2C8} .stat-item:last-child{border-right:none} .stat-num{font-family:var(--serif);font-size:36px;font-weight:700;color:#12263A;line-height:1} .stat-label{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#374151;margin-top:6px} .stat-desc{font-size:12.5px;color:#374151;margin-top:4px} /* ── EDITORIAL (split) ── */ .editorial-v2{display:grid;grid-template-columns:1fr 1fr;min-height:480px} .editorial-v2-img{background-size:cover;background-position:center;min-height:400px} .editorial-v2-content{padding:72px 60px;display:flex;flex-direction:column;justify-content:center} .editorial-v2-rev{direction:rtl} .editorial-v2-rev .editorial-v2-content{direction:ltr} .editorial-v2-rev .editorial-v2-img{direction:ltr} /* ── PILLAR CARDS ── */ .pillar{padding:44px 36px;border-top:2px solid #C4963A;background:#FFFFFF;transition:box-shadow .2s} .pillar:hover{box-shadow:0 8px 32px rgba(18,38,58,.08)} .pillar-num{font-family:var(--serif);font-size:48px;font-weight:700;color:rgba(196,150,58,.15);line-height:1;margin-bottom:20px} .pillar h3{margin-bottom:14px} .pillar p{font-size:13.5px;color:#374151;line-height:1.85} /* ── DIAGRAM BOXES ── */ .diag{background:#12263A;padding:48px;border:1px solid rgba(255,255,255,.06)} .diag-title{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.78);text-align:center;margin-bottom:36px} .diag-node-gold{display:inline-block;padding:14px 28px;background:#C4963A;font-size:12.5px;font-weight:700;letter-spacing:.06em;color:#12263A;text-transform:uppercase} .diag-node{padding:16px 14px;text-align:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)} .diag-node-role{font-size:8px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#C4963A;margin-bottom:6px} .diag-node-name{font-size:13px;font-weight:600;color:#FFFFFF} .diag-node-desc{font-size:10px;color:rgba(255,255,255,.80);margin-top:3px} .diag-footer{text-align:center;padding:12px;border:1px solid rgba(255,255,255,.08);margin-top:12px} .diag-footer span{font-size:10px;color:rgba(255,255,255,.72);letter-spacing:.08em} /* ── PROVIDER CARDS ── */ .prov-card{border:1px solid #D8D2C8;padding:24px;transition:border-color .2s} .prov-card:hover{border-color:#C4963A} .prov-role{font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#C4963A;margin-bottom:8px} .prov-name{font-size:16px;font-weight:600;color:#12263A;margin-bottom:6px;font-family:var(--serif)} .prov-desc{font-size:12.5px;color:#374151;line-height:1.7} /* ── TIMELINE ── */ .tl-track{position:relative;padding-left:24px;border-left:1px solid #D8D2C8} .tl-entry{position:relative;margin-bottom:40px;padding-left:28px} .tl-entry::before{content:'';position:absolute;left:-29px;top:6px;width:9px;height:9px;border-radius:50%;background:#C4963A;border:2px solid #FFFFFF;box-shadow:0 0 0 1px #C4963A} .tl-year{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#C4963A;margin-bottom:6px} .tl-title{font-size:16px;font-weight:600;color:#12263A;margin-bottom:8px;font-family:var(--serif)} .tl-body{font-size:13.5px;color:#374151;line-height:1.8} /* ── NEWS CARDS ── */ .news-card{background:#FFFFFF;border:1px solid #D8D2C8;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .25s;height:100%} .news-card:hover{box-shadow:0 8px 32px rgba(18,38,58,.1)} .news-thumb{overflow:hidden;line-height:0} .news-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s} .news-thumb{overflow:visible;line-height:0} .news-body{padding:24px;flex:1;display:flex;flex-direction:column} .news-cat{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#C4963A;margin-bottom:10px} .news-h{font-family:var(--serif);font-size:17px;font-weight:600;color:#12263A;line-height:1.4;margin-bottom:10px;flex:1} .news-date{font-size:11px;color:#374151;margin-bottom:12px} .news-link{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#C4963A;border-bottom:1px solid #C4963A;padding-bottom:2px;align-self:flex-start} [id^="modal-a"] p+p{margin-top:18px} /* ── RISK LAYERS ── */ .risk-layer{display:flex;align-items:stretch;gap:0;margin-bottom:6px} .risk-layer-num{width:80px;min-width:80px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#C4963A;background:rgba(196,150,58,.1);border:1px solid rgba(196,150,58,.2);border-right:none} .risk-layer-body{flex:1;padding:18px 22px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)} .risk-layer-title{font-size:13px;font-weight:700;color:#FFFFFF;margin-bottom:5px} .risk-layer-desc{font-size:12px;color:rgba(255,255,255,.90);line-height:1.7} .risk-layer-bar{width:6px;min-width:6px} /* ── CONTACT FORM ── */ .form-group{margin-bottom:20px} .form-label{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#12263A;margin-bottom:8px} .form-input{width:100%;padding:12px 16px;font-size:14px;font-family:var(--sans);border:1px solid #D8D2C8;background:#FFFFFF;color:#2C3241;transition:border-color .2s;outline:none} .form-input:focus{border-color:#C4963A} select.form-input{cursor:pointer} textarea.form-input{min-height:140px;resize:vertical} /* ── CTA SECTION ── */ .cta-sec{padding:80px 0;background:#12263A;text-align:center} .cta-sec h2{color:#FFFFFF} .cta-sec p{color:rgba(255,255,255,.88);margin:16px auto 36px;max-width:560px;font-size:15px} .cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* ── FOOTER ── */ .footer{background:#0A1929;border-top:1px solid rgba(255,255,255,.06);padding:64px 0 0} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:56px;padding-bottom:48px} .footer-brand p{font-size:13px;color:rgba(255,255,255,.78);margin-top:16px;line-height:1.85;max-width:280px} .footer-col h4{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#C4963A;margin-bottom:20px} .footer-col a{display:block;font-size:13px;color:rgba(255,255,255,.78);margin-bottom:10px;transition:color .15s} .footer-col a:hover{color:#FFFFFF} .footer-bottom{border-top:1px solid rgba(255,255,255,.07);padding:24px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px} .footer-bottom p{font-size:11.5px;color:rgba(255,255,255,.65);line-height:1.7} /* ── FADE-IN ANIMATION ── */ .fade{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease} @media(max-width:1024px){.fade{opacity:1!important;transform:none!important;transition:none!important}} .fade.vis{opacity:1;transform:none} /* ── RESPONSIVE ── */ @media(max-width:1024px){ .wrap{padding:0 32px} .hero-content{padding:0 32px 64px} .footer-grid{grid-template-columns:1fr 1fr;gap:36px} .editorial-v2,.editorial-v2-rev{grid-template-columns:1fr} .stat-strip{grid-template-columns:1fr 1fr} .stat-item{border-bottom:1px solid #D8D2C8} .g4{grid-template-columns:repeat(4, 1fr)} } @media(max-width:768px){ .wrap{padding:0 20px} .hero-content{padding:0 20px 52px} .sec,.sec-c,.sec-s,.sec-ink{padding:60px 0} .g2,.g3,.g4{grid-template-columns:1fr} .stat-strip{grid-template-columns:1fr} .nav-links{display:none} .editorial-v2-content{padding:44px 28px} .footer-grid{grid-template-columns:1fr} .diag{padding:28px 20px} } /* Combined SPA styles */ .page { display: none; } .page:first-of-type { display: block; } /* Prevent nav-drop flash on load */ .nav-drop { display: none !important; } .nav-links li:hover .nav-drop { display: block !important; } /* Sticky governance anchor nav adjusts for combined nav */ .page > div[style*="position:sticky"][style*="top:68px"] { top: 68px; } /* ── Focus / keyboard accessibility ─── */ a:focus-visible,button:focus-visible{outline:2px solid #C4963A;outline-offset:3px} /* ── btn-text hover ─── */ .btn-text{transition:color .18s,letter-spacing .18s} .btn-text:hover{color:#D4A840} /* ── card hover lift ─── */ .card:hover,.prov-card:hover{transform:translateY(-2px);transition:box-shadow .25s,transform .25s} /* ── CTA active press ─── */ .btn:active,.nav-cta:active{transform:scale(.98);transition:transform .1s} /* ── nav-drop keyboard/hover ─── */ .nav-drop a:hover{background:rgba(255,255,255,.08)!important;padding-left:26px!important;transition:all .15s} /* ── Active nav underline ─── */ .nav-a.active::after{content:'';position:absolute;bottom:0;left:18px;right:18px;height:2px;background:#C4963A} .mob-link{display:block;padding:15px 20px;font-size:13px;font-weight:600;color:rgba(255,255,255,.8);letter-spacing:.06em;border-bottom:1px solid rgba(255,255,255,.07);text-decoration:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer} .mob-link:hover,.mob-link:active{color:#C4963A} .mob-group-btn{width:100%;display:flex;justify-content:space-between;align-items:center;padding:15px 20px;font-size:13px;font-weight:600;color:rgba(255,255,255,.8);letter-spacing:.06em;border:none;border-bottom:1px solid rgba(255,255,255,.07);background:transparent;text-align:left;cursor:pointer} .mob-group-btn:active{color:#C4963A} .mob-chev{font-size:11px;color:#C4963A;transition:transform .22s;margin-left:8px;flex-shrink:0} .mob-sub{display:none;background:rgba(0,0,0,.18)} .mob-sub-link{display:block;padding:12px 20px 12px 34px;font-size:12px;font-weight:500;color:rgba(255,255,255,.55);letter-spacing:.04em;border-bottom:1px solid rgba(255,255,255,.05);text-decoration:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer} .mob-sub-link:hover,.mob-sub-link:active{color:#C4963A;padding-left:38px} /* ═══════════════════════════════════════════ MOBILE / PHONE RESPONSIVE ENHANCEMENTS ═══════════════════════════════════════════ */ @media(max-width:768px){ /* 1. NAV, show hamburger, hide desktop CTA and logo text */ #nav-hamburger{display:flex!important;position:relative;z-index:9999!important;pointer-events:auto!important;min-width:44px!important;min-height:44px!important} .nav-cta{display:none!important} .nav-logo-text{display:none!important} .nav-inner{padding:0 16px!important;gap:0} /* 2. SECTION PADDING */ .sec,.sec-c,.sec-s,.sec-ink{padding:52px 0} .wrap{padding:0 16px!important} .hero-content{padding:0 16px 48px!important} /* 3. HERO */ .hero{min-height:78vh;background-size:cover!important;background-attachment:scroll!important;background-position:center top!important} /* 3b. ABOUT PAGE-HEADER — keep BOA logo in frame on small screens */ .page-header[style*="background-image"]{background-position:60% center!important} /* 4. G2 class with large inline gaps, columns already collapse via existing rule */ .g2[style*="gap:80px"], .g2[style*="gap:64px"], .g2[style*="gap:48px"]{gap:28px!important} /* 5. INLINE SECTION GRIDS, collapse asymmetric & wide column layouts */ [style*="grid-template-columns:1fr 2fr"], [style*="grid-template-columns:5fr 7fr"], [style*="grid-template-columns:1fr 1fr;gap:80px"], [style*="grid-template-columns:1fr 1fr;gap:64px"], [style*="grid-template-columns:1fr 1fr;gap:48px"]{ grid-template-columns:1fr!important; gap:32px!important; } /* 6. REPEAT INLINE GRIDS, 2-col on mobile */ section [style*="grid-template-columns:repeat(2,1fr)"], section [style*="grid-template-columns:repeat(3,1fr)"], section [style*="grid-template-columns:repeat(4,1fr)"]{ grid-template-columns:1fr 1fr!important; gap:10px!important; } /* 7. GOVERNANCE DIAGRAM nodes, 2×2 grid */ .diag [style*="grid-template-columns:repeat(4,1fr)"]{ grid-template-columns:1fr 1fr!important; gap:6px!important; } /* 8. ARBITRAGE FLOW DIAGRAM, stack Exchange A / BOA / Exchange B vertically */ [style*="grid-template-columns:1fr 32px 1fr 32px 1fr"]{ grid-template-columns:1fr!important; gap:0!important; } /* Hide the two horizontal arrow columns on mobile */ [style*="grid-template-columns:1fr 32px 1fr 32px 1fr"] > div:nth-child(2), [style*="grid-template-columns:1fr 32px 1fr 32px 1fr"] > div:nth-child(4){ display:none!important; } /* 9. NEWS FEATURED two-column image+text, stack */ [style*="grid-template-columns:1fr 1fr;border:1px"]{ grid-template-columns:1fr!important; min-height:unset!important; } [style*="min-height:420px"]{min-height:unset!important} /* 10. CONTACT FORM side-by-side fields, stack */ [style*="grid-template-columns:1fr 1fr;gap:16px"]{ grid-template-columns:1fr!important; } /* 11. STAT STRIP, remove last border-bottom */ .stat-item:last-child{border-bottom:none} /* 12. DIAG scrollable on very narrow screens */ .diag{overflow-x:auto;-webkit-overflow-scrolling:touch} /* Six-stage flex diagram, wrap to 3×2 grid on mobile */ .diag [style*="display:flex;align-items:stretch;gap:2px"]{ flex-wrap:wrap!important; } .diag [style*="display:flex;align-items:stretch;gap:2px"] > div{ flex:0 0 calc(33.333% - 2px)!important; min-width:calc(33.333% - 2px)!important; box-sizing:border-box!important; } /* Leadership team wider container, reduce padding on mobile */ [style*="max-width:1380px"]{padding:0 16px!important} /* Risk layer rows, allow wrapping */ .risk-layer{flex-wrap:wrap} /* 13. DATA TABLE keys */ .data-key{font-size:10px} } /* Tablet tweaks (769–1024px) already handled above; add card touch spacing */ @media(max-width:480px){ h1{font-size:clamp(28px,6.5vw,40px)!important} h2{font-size:clamp(22px,4.5vw,32px)!important} .hero-sub{font-size:14px!important} .btn{padding:11px 20px;font-size:11px} section [style*="grid-template-columns:repeat(3,1fr)"], section [style*="grid-template-columns:repeat(4,1fr)"]{ grid-template-columns:1fr!important; } .g4{grid-template-columns:1fr 1fr!important} } /* Mobile/offline fallback: page visibility managed by JS; if JS fails, show home, hide all others via CSS */ .page { display: none; } #page-home { display: block; } /* ── CSS Checkbox Hamburger — works without JavaScript ── */ /* wrap now fully JS-controlled - no CSS checkbox dependency */ #mob-toggle:checked ~ nav #nav-hamburger .hb-bar:nth-child(1) { transform: rotate(45deg) translate(5px,5px); } #mob-toggle:checked ~ nav #nav-hamburger .hb-bar:nth-child(2) { opacity: 0; } #mob-toggle:checked ~ nav #nav-hamburger .hb-bar:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); } /* ── Contact hero header – responsive ── */ #contact-hero { padding: 100px 0 88px; min-height: 340px; } @media (max-width: 768px) { #contact-hero { padding: 72px 0 64px; min-height: 260px; background-position: 62% center !important; } } @media (max-width: 480px) { #contact-hero { background-position: 60% center !important; } }