/* Harmonic London — lc-conversion-ux.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 { padding-bottom:72px; }
        .hero-meta { display:flex; align-items:center; gap:20px; margin-top:32px; flex-wrap:wrap; }
        .hero-count { font-family:'JetBrains Mono',monospace; font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.45); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); padding:6px 14px; }
        .hero-service { font-size:.875rem; color:rgba(255,255,255,.45); }
        .hero-service a { color:var(--accent); font-weight:600; }
        .articles { padding:80px 0 112px; background:var(--bg); }
        .articles-header { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:48px; flex-wrap:wrap; gap:16px; }
        .articles-header h2 { font-family:'Playfair Display',serif; font-size:clamp(1.75rem,2.5vw,2.25rem); font-weight:600; color:var(--primary); letter-spacing:-.02em; }
        .articles-header a { font-size:.9rem; font-weight:600; color:var(--text-light); transition:color .2s; }
        .articles-header a:hover { color:var(--primary); }
        .card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
        .card::before { background:#E84393; }
        .related { padding:80px 0; background:var(--gray-light); border-top:1px solid var(--border); }
        .related-inner { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
        .related-label { font-size:.75rem; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.15em; margin-bottom:16px; display:block; }
        .related h2 { font-family:'Playfair Display',serif; font-size:clamp(1.75rem,2.5vw,2.25rem); font-weight:600; color:var(--primary); line-height:1.2; letter-spacing:-.02em; margin-bottom:16px; }
        .related h2 em { font-style:italic; color:var(--accent); }
        .related p { font-size:1rem; color:var(--text-light); line-height:1.8; margin-bottom:28px; }
        .btn-primary { display:inline-flex; align-items:center; gap:10px; background:var(--primary); color:white; padding:16px 36px; font-size:.9375rem; font-weight:600; transition:all .3s; }
        .btn-primary:hover { background:var(--primary-light); transform:translateY(-2px); }
        .btn-outline { display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--primary); padding:16px 36px; font-size:.9375rem; font-weight:600; border:2px solid var(--border); transition:all .3s; margin-left:12px; }
        .btn-outline:hover { border-color:var(--primary); }
        .all-sections { background:white; border:1px solid var(--border); padding:32px 36px; }
        .all-sections h4 { font-family:'Playfair Display',serif; font-size:1.0625rem; font-weight:600; color:var(--primary); margin-bottom:20px; }
        .all-sections ul { list-style:none; display:flex; flex-direction:column; gap:8px; }
        .all-sections ul li a { font-size:.9rem; color:var(--text-light); display:flex; align-items:center; gap:8px; transition:color .2s; }
        .all-sections ul li a:hover { color:var(--primary); }
        .all-sections ul li a::before { content:''; width:6px; height:6px; background:var(--border); border-radius:50%; flex-shrink:0; }
        @media(max-width:1024px) { .card-grid { grid-template-columns:1fr 1fr; } .related-inner { grid-template-columns:1fr; } }
        @media(max-width:768px) { .card-grid { grid-template-columns:1fr; } }