/* Harmonic London — resources-hub.css
   Shared stylesheet. Page-specific colour variables are set in a small
   :root block on each page. */

:root {
            --primary: #0a0e27;
            --accent: #d4af37;
            --text: #e8e8f0;
            --text-light: rgba(232,232,240,0.65);
            --bg: #0a0e27;
        }
        
        * { margin:0; padding:0; box-sizing:border-box; }
        body { font-family:'DM Sans',-apple-system,system-ui,sans-serif; background:var(--bg); color:var(--text); line-height:1.7; padding-top:68px; }
        .container { max-width:1280px; margin:0 auto; padding:0 32px; }
                .gnav-links { display:flex; gap:28px; list-style:none; align-items:center; }
        .gnav-links a { color:rgba(255,255,255,.7); font-size:.9375rem; font-weight:500; text-decoration:none; transition:color .3s; }
        .gnav-links a:hover { color:var(--accent); }
        .gnav-cta { border:1.5px solid var(--accent) !important; color:var(--accent) !important; padding:9px 24px; font-size:.875rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
        .has-drop { position:relative; }
        .gnav-drop { display:none; position:absolute; top:100%;padding-top:12px; left:0; background:rgba(10,14,39,.98); border:1px solid rgba(212,175,55,.25); min-width:270px; z-index:200; list-style:none; padding:8px 0; box-shadow:0 8px 32px rgba(0,0,0,.4); }
        .has-drop.is-open .gnav-drop, .has-drop:focus-within .gnav-drop { display:block; }
        .gnav-drop li a { display:block; padding:10px 20px; color:rgba(255,255,255,.8); font-size:.875rem; white-space:nowrap; font-weight:500; transition:color .2s,background .2s; }
        .gnav-drop li a:hover { color:var(--accent); background:rgba(255,255,255,.04); }
        .mobile-toggle { display:none; background:none; border:none; cursor:pointer; padding:8px; }
        .mobile-toggle span { display:block; width:22px; height:2px; background:white; margin:4px 0; }
        /* HERO */
        .page-hero { padding:80px 0 64px; border-bottom:1px solid rgba(255,255,255,.06); }
        .sec-label { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); margin-bottom:16px; }
        .page-hero h1 { font-family:'Playfair Display',serif; font-size:clamp(2.25rem,4vw,3.25rem); font-weight:700; color:white; letter-spacing:-.02em; margin-bottom:20px; max-width:640px; }
        .page-hero p { font-size:1.0625rem; color:var(--text-light); max-width:560px; line-height:1.75; }
        /* GRID */
        .resources-section { padding:80px 0; }
        .resources-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:24px; }
        .r-card { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); padding:36px; transition:border-color .3s,transform .3s; display:flex; flex-direction:column; text-decoration:none; color:inherit; }
        .r-card:hover { border-color:var(--accent); transform:translateY(-3px); }
        .r-tag { font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); margin-bottom:16px; }
        .r-card h2 { font-family:'Playfair Display',serif; font-size:1.25rem; font-weight:600; color:white; margin-bottom:12px; line-height:1.35; }
        .r-card p { font-size:.9375rem; color:var(--text-light); line-height:1.7; flex:1; }
        .r-cta { margin-top:24px; font-size:.875rem; font-weight:600; color:var(--accent); display:flex; align-items:center; gap:8px; }
        /* FOOTER */
        .footer { background:#060918; padding:64px 0 0; border-top:1px solid rgba(255,255,255,.04); }
        .f-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:64px; }
        .f-brand p { font-size:.875rem; color:rgba(255,255,255,.3); line-height:1.75; max-width:260px; margin-top:12px; }
        .f-col h5 { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.35); margin-bottom:18px; }
        .f-col ul { list-style:none; display:flex; flex-direction:column; gap:9px; padding:0; }
        .f-col ul a { color:rgba(255,255,255,.4); font-size:.875rem; transition:color .25s; text-decoration:none; }
        .f-col ul a:hover { color:var(--accent); }
        .f-bottom { border-top:1px solid rgba(255,255,255,.05); padding:24px 0; display:flex; justify-content:space-between; align-items:center; }
        .f-bottom p,.f-bottom a { font-size:.8125rem; color:rgba(255,255,255,.22); text-decoration:none; }
        .f-bl a { margin-left:16px; }
        .f-bottom a:hover { color:var(--accent); }
        @media(max-width:1024px) { .f-grid { grid-template-columns:1fr 1fr; } }
        @media(max-width:768px) { .gnav-links { display:none; } .mobile-toggle { display:block; } .resources-grid { grid-template-columns:1fr; } }
        @media(max-width:640px) { .f-grid { grid-template-columns:1fr; } .f-bottom { flex-direction:column; gap:8px; text-align:center; } }