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

:root {
        --primary:#0a0e27; --primary-light:#1a1f3a;
        --accent:#d4af37;  --accent-dark:#b8942c;
        --text:#0a0e27;    --text-light:#64748b;
        --bg:#ffffff;      --border:#e5e7eb;
        --gray-light:#f8f9fa; --cream:#fdfcf8;
    }
    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    
    html { scroll-behavior:smooth; }
    body { font-family:'DM Sans',-apple-system,system-ui,sans-serif; color:var(--text); line-height:1.7; background:var(--bg); overflow-x:hidden; }
    .container { max-width:1200px; margin:0 auto; padding:0 40px; }
    a { text-decoration:none; color:inherit; }

    /* GLOBAL NAV */

    /* BREADCRUMB */
    .bc { background:var(--primary); padding:14px 0; border-bottom:1px solid rgba(255,255,255,.06); }
    .bc-inner { display:flex; align-items:center; gap:6px; font-size:.8125rem; color:rgba(255,255,255,.4); flex-wrap:wrap; }
    .bc-inner a { color:rgba(255,255,255,.5); transition:color .2s; }
    .bc-inner a:hover { color:var(--accent); }
    .bc-sep { opacity:.35; }
    .bc-current { color:rgba(255,255,255,.7); font-weight:500; }

    /* HERO */
    .hero { background:var(--primary); padding:140px 0 96px; position:relative; overflow:hidden; }
    .hero::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(212,175,55,.3),transparent); }
    .hero-inner { position:relative; z-index:2; }
    .hero-label { display:inline-flex; align-items:center; gap:10px; background:rgba(212,175,55,.08); border:1px solid rgba(212,175,55,.2); padding:8px 20px; margin-bottom:32px; font-size:.8125rem; font-weight:600; color:var(--accent); letter-spacing:.08em; text-transform:uppercase; }
    .hero-label::before { content:''; width:6px; height:6px; background:var(--accent); border-radius:50%; }
    .hero h1 { font-family:'Playfair Display',serif; font-size:clamp(2.75rem,5vw,4.25rem); font-weight:700; line-height:1.06; letter-spacing:-.035em; color:white; margin-bottom:24px; }
    .hero h1 em { font-style:italic; color:var(--accent); }
    .hero-sub { font-size:1.125rem; color:rgba(255,255,255,.6); max-width:580px; line-height:1.8; }

    /* ARTICLE CARD */
    .card { background:white; border:1px solid var(--border); display:block; transition:all .3s ease; position:relative; overflow:hidden; }
    .card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; transform:scaleX(0); transform-origin:left; transition:transform .3s; }
    .card:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.07); }
    .card:hover::before { transform:scaleX(1); }
    .card-body { padding:32px 28px; }
    .card-cat { font-family:'JetBrains Mono',monospace; font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; margin-bottom:14px; display:block; }
    .card-title { font-family:'Playfair Display',serif; font-size:1.125rem; font-weight:600; color:var(--primary); line-height:1.35; margin-bottom:12px; }
    .card-desc { font-size:.875rem; color:var(--text-light); line-height:1.7; margin-bottom:20px; }
    .card-link { font-size:.8125rem; font-weight:600; display:inline-flex; align-items:center; gap:6px; transition:gap .2s; }
    .card:hover .card-link { gap:10px; }

    /* SECTION CARD (for index page) */
    .sec-card { background:white; border:1px solid var(--border); padding:40px 36px; display:block; transition:all .3s; position:relative; overflow:hidden; }
    .sec-card::after { content:'→'; position:absolute; bottom:28px; right:28px; font-size:1.125rem; color:var(--border); transition:all .3s; }
    .sec-card:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.07); }
    .sec-card:hover::after { color:var(--accent); right:20px; }
    .sec-dot { width:12px; height:12px; border-radius:50%; margin-bottom:24px; }
    .sec-num { font-family:'JetBrains Mono',monospace; font-size:.625rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--text-light); margin-bottom:10px; display:block; }
    .sec-name { font-family:'Playfair Display',serif; font-size:1.25rem; font-weight:600; color:var(--primary); line-height:1.25; margin-bottom:10px; }
    .sec-tag { font-size:.875rem; color:var(--text-light); line-height:1.6; margin-bottom:20px; }
    .sec-count { font-family:'JetBrains Mono',monospace; font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }

    /* 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-logo { font-family:'Playfair Display',serif; font-size:1.25rem; font-weight:700; color:white; display:block; margin-bottom:6px; }
    .f-logo span { color:var(--accent); }
    .f-logo-sub { font-family:'DM Sans',sans-serif; font-size:.5625rem; font-weight:600; color:rgba(255,255,255,.3); text-transform:uppercase; letter-spacing:.15em; display:block; margin-bottom:18px; }
    .f-brand p { font-size:.875rem; color:rgba(255,255,255,.3); line-height:1.75; max-width:260px; }
    .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; }
    .f-col ul a { color:rgba(255,255,255,.4); font-size:.875rem; transition:color .25s; }
    .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; }
    .f-bottom p, .f-bottom a { font-size:.8125rem; color:rgba(255,255,255,.22); }
    .f-bottom a:hover { color:var(--accent); }

    /* REVEAL */
    .reveal { opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
    .reveal.visible { opacity:1; transform:translateY(0); }
    .rd1 { transition-delay:.1s; } .rd2 { transition-delay:.2s; } .rd3 { transition-delay:.3s; }

    @media(max-width:1024px) { .f-grid { grid-template-columns:1fr 1fr; } }
    @media(max-width:768px) {
        .container { padding:0 24px; }
        .hero { padding:110px 0 72px; }
        .gnav-links { display:none; }
    }

        .hero-stat-row { display:flex; gap:40px; margin-top:48px; flex-wrap:wrap; }
        .hero-stat { }
        .hero-stat-n { font-family:'Playfair Display',serif; font-size:2rem; font-weight:700; color:var(--accent); line-height:1; }
        .hero-stat-l { font-size:.875rem; color:rgba(255,255,255,.45); margin-top:4px; }
        .sections { padding:96px 0; background:var(--gray-light); border-top:1px solid var(--border); }
        .sections-header { margin-bottom:56px; }
        .section-label { font-size:.75rem; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.15em; margin-bottom:16px; display:block; }
        .sections-header h2 { font-family:'Playfair Display',serif; font-size:clamp(2rem,3vw,2.75rem); font-weight:600; color:var(--primary); line-height:1.1; letter-spacing:-.025em; }
        .sections-header h2 em { font-style:italic; color:var(--accent); }
        .sec-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
        .featured { padding:96px 0; background:var(--bg); }
        .featured-header { text-align:center; margin-bottom:56px; }
        .featured-header h2 { font-family:'Playfair Display',serif; font-size:clamp(1.875rem,3vw,2.5rem); font-weight:600; color:var(--primary); letter-spacing:-.025em; }
        .featured-header h2 em { font-style:italic; color:var(--accent); }
        .featured-header p { color:var(--text-light); margin-top:16px; font-size:1.0625rem; }
        .card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
        .card::before { background:var(--card-colour, var(--accent)); }
        .cta-band { background:var(--primary); padding:96px 0; text-align:center; position:relative; overflow:hidden; }
        .cta-band::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:700px; height:700px; background:radial-gradient(circle,rgba(212,175,55,.08) 0%,transparent 60%); border-radius:50%; }
        .cta-band .container { position:relative; z-index:1; }
        .cta-band .label { color:var(--accent); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.15em; margin-bottom:20px; display:block; }
        .cta-band h2 { font-family:'Playfair Display',serif; font-size:clamp(2rem,4vw,3rem); font-weight:600; color:white; margin-bottom:20px; letter-spacing:-.025em; }
        .cta-band h2 em { font-style:italic; color:var(--accent); }
        .cta-band p { color:rgba(255,255,255,.55); font-size:1.0625rem; max-width:480px; margin:0 auto 44px; line-height:1.8; }
        .btn-gold { display:inline-flex; align-items:center; gap:10px; background:var(--accent); color:var(--primary); padding:18px 44px; font-size:.9375rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; transition:all .3s; }
        .btn-gold:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(212,175,55,.3); }
        @media(max-width:1024px) { .sec-grid { grid-template-columns:1fr 1fr; } .card-grid { grid-template-columns:1fr 1fr; } }
        @media(max-width:768px) { .sec-grid, .card-grid { grid-template-columns:1fr; } }