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

:root {
            --primary:#0a0e27; --accent:#d4af37;
            --text:#0a0e27; --text-light:#64748b;
            --bg:#ffffff; --cream:#fdfcf8;
            --gray-light:#f8f9fa; --border:#e5e7eb;
            --pastel-lavender:#dcd0f0; --pastel-sage:#c8dbc5;
            --pastel-peach:#fadcb0; --pastel-sky:#c5dcea;
            --pastel-rose:#e8c4c4; --pastel-lilac:#d8c4e8;
        }
        
        *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
        html { scroll-behavior:smooth; }
        /* "Send Us a Message" card jumps here (#hs-panel); scroll-margin-top
           keeps the fixed 68px header clear of the form on landing, same
           80px offset already used for anchor targets elsewhere on the
           site (learning centre articles, privacy policy). */
        #hs-panel { scroll-margin-top: 80px; }
        body { font-family:'DM Sans',-apple-system,system-ui,sans-serif; color:var(--text); line-height:1.7; background:var(--bg); overflow-x:hidden; padding-top:68px; }
        a { color:var(--primary); text-decoration:none; font-weight:500; }
        .container { max-width:1280px; margin:0 auto; padding:0 32px; }
        /* HERO */
        .hero { background:var(--primary); color:white; text-align:center; padding:140px 0 100px; 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-content { position:relative; z-index:1; }
        .hero-badge { 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; animation:fiu .8s ease-out .2s both; }
        .hero h1 { font-family:'Playfair Display',serif; font-size:clamp(2.5rem,5vw,4rem); font-weight:600; line-height:1.1; letter-spacing:-.03em; margin-bottom:28px; animation:fiu .8s ease-out .4s both; }
        .hero-sub { font-size:1.1875rem; opacity:.75; max-width:600px; margin:0 auto; line-height:1.7; animation:fiu .8s ease-out .6s both; }
        @keyframes fiu { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
        /* CONTACT OPTIONS */
        .contact-options { padding:100px 0 80px; background:var(--bg); position:relative; overflow:hidden; }
        .sec-label { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); margin-bottom:16px; display:block; }
        .sec-title { font-family:'Playfair Display',serif; font-size:clamp(2rem,4vw,3rem); font-weight:600; color:var(--primary); line-height:1.15; letter-spacing:-.02em; text-align:center; margin-bottom:24px; }
        .sec-sub { font-size:1.125rem; color:var(--text-light); text-align:center; max-width:680px; margin:0 auto 60px; }
        .option-selector { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:860px; margin:0 auto 60px; }
        .opt-card { padding:40px 36px; border:2px solid var(--border); background:white; cursor:pointer; transition:all .3s; position:relative; text-align:left; }
        .opt-card:hover { border-color:var(--accent); } .opt-card.active { border-color:var(--accent); box-shadow:0 8px 32px rgba(212,175,55,.12); }
        .opt-card h3 { font-family:'Playfair Display',serif; font-size:1.375rem; font-weight:600; color:var(--primary); margin-bottom:10px; }
        .opt-card p { font-size:.9375rem; color:var(--text-light); line-height:1.65; margin-bottom:20px; } .opt-card-cta { color:var(--primary); }
        .opt-card-link { display:block; text-decoration:none; color:inherit; }
        .opt-card-link:hover .opt-card { border-color:var(--accent); }
        .opt-card-cta { margin-top:20px; display:inline-flex; align-items:center; gap:8px; font-size:.875rem; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.06em; }
        .opt-pill { display:inline-block; font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; padding:4px 12px; background:var(--gray-light); color:var(--text-light); margin-bottom:16px; }
        .opt-pill--gold { background:rgba(212,175,55,.08); color:var(--accent); border:1px solid rgba(212,175,55,.2); }
        .opt-meta { display:flex; align-items:center; gap:12px; }
        .opt-time { font-size:.8125rem; color:var(--text-light); }
        .opt-badge { font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:3px 10px; background:rgba(212,175,55,.12); border:1px solid rgba(212,175,55,.2); color:var(--accent); }
        /* FORM SECTION */
        .form-section { background:var(--bg); padding:60px 0 120px; position:relative; overflow:hidden; }
        .form-wrapper { max-width:680px; margin:0 auto; }
        .form-header { text-align:center; margin-bottom:48px; }
        .form-header h2 { font-family:'Playfair Display',serif; font-size:clamp(2rem,3.5vw,2.75rem); font-weight:600; color:var(--primary); margin-bottom:16px; letter-spacing:-.02em; }
        .form-header p { font-size:1.0625rem; color:var(--text-light); max-width:560px; margin:0 auto; }
        .form-card { background:white; padding:64px 56px; border:1px solid var(--border); box-shadow:0 8px 40px rgba(0,0,0,.04); position:relative; }
        .rd1 { border-color:rgba(212,175,55,.3); }
        .hs-form-frame { display:block; width:100%; min-height:400px; }
        /* PROMISE */
        .promise { padding:100px 0; background:var(--cream); border-top:1px solid var(--border); }
        .promise-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
        .promise-card { background:white; padding:36px 28px; border:1px solid var(--border); text-align:center; transition:all .3s; }
        .promise-num { font-family:'Playfair Display',serif; font-size:2.75rem; font-weight:700; color:var(--accent); line-height:1; margin-bottom:8px; } .promise-grid { gap:24px; }
        .promise-card h4 { font-size:.9375rem; font-weight:700; color:var(--primary); margin-bottom:8px; }
        .promise-card p { font-size:.8125rem; color:var(--text-light); line-height:1.6; margin:0; }
        /* NEXT STEPS */
        .next-steps { padding:100px 0; background:var(--primary); color:white; }
        .steps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
        .step { text-align:center; padding:0 20px; }
        .step-num { width:56px; height:56px; border-radius:50%; background:rgba(212,175,55,.1); border:2px solid var(--accent); display:flex; align-items:center; justify-content:center; margin:0 auto 24px; font-family:'Playfair Display',serif; font-size:1.25rem; font-weight:700; color:var(--accent); }
        .step h4 { font-family:'Playfair Display',serif; font-size:1.0625rem; font-weight:600; color:white; margin-bottom:10px; }
        .step p { font-size:.875rem; color:rgba(255,255,255,.5); line-height:1.7; margin:0; }
        /* DIRECT BAR */
        .direct-bar { padding:80px 0; background:var(--bg); border-top:1px solid var(--border); }
        .direct-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:40px; text-align:center; }
        .direct-item h4 { font-size:.9375rem; font-weight:700; color:var(--primary); margin-bottom:6px; }
        .direct-item p, .direct-item a { font-size:.9375rem; color:var(--text-light); } .direct-item a:hover { color:var(--accent); }
        .detail { font-size:.875rem; color:var(--text-light); margin-top:4px; }
        /* FAQ */
        .faq { padding:100px 0; background:var(--cream); }
        .faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:1000px; margin:0 auto; }
        .fq { background:white; border:1px solid var(--border); padding:28px; }
        .fq h4 { font-size:1.0625rem; font-weight:700; color:var(--primary); margin-bottom:12px; line-height:1.4; }
        .fq p { font-size:.9375rem; color:var(--text-light); line-height:1.7; margin:0; }
        /* MISC */
        .p1, .p2 { font-size:.875rem; color:var(--text-light); }
        .bl, .bl1, .bl2 { width:400px; height:400px; position:absolute; border-radius:50%; pointer-events:none; filter:blur(100px); }
        .bl { background:var(--pastel-sage); top:-20%; right:5%; opacity:.2; } .bl1 { background:var(--pastel-lilac); bottom:-25%; left:-10%; opacity:.15; } .bl2 { background:var(--pastel-peach); top:10%; right:-8%; opacity:.12; }
        .reveal { opacity:0; transform:translateY(20px); transition:opacity .6s ease,transform .6s ease; } .reveal.visible { opacity:1; transform:none; }
        .shape { position:absolute; pointer-events:none; border-radius:50%; filter:blur(80px); opacity:.08; }
        .sf, .sfr, .sfs { display:flex; gap:12px; align-items:flex-start; } .s1,.s2,.s3 { width:300px; height:300px; position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; }
        .s1 { background:var(--pastel-lavender); top:-15%; right:-8%; opacity:.08; } .s2 { background:var(--pastel-peach); bottom:0; left:15%; opacity:.06; } .s3 { background:var(--pastel-sky); top:40%; left:-5%; opacity:.05; }
/* 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); }
        /* RESPONSIVE */
        @media (max-width:1024px) { .f-grid { grid-template-columns:1fr 1fr; } .promise-grid { grid-template-columns:1fr 1fr; } }
        @media (max-width:768px) {
            .gnav-links { display:none; }
            .gnav-links.mobile-open { display:flex; flex-direction:column; align-items:flex-start; height:auto; position:absolute; top:68px; left:0; right:0; background:rgba(10,14,39,.98); padding:12px 0 20px; gap:0; border-top:1px solid rgba(255,255,255,.08); }
            .gnav-links.mobile-open > li { width:100%; padding:0; }
            .gnav-links.mobile-open > li > a, .gnav-links.mobile-open > li > button { padding:12px 24px; width:100%; justify-content:space-between; }
            .gnav-drop { position:static; border:none; background:rgba(255,255,255,.04); box-shadow:none; padding:4px 0; }
            .mobile-toggle { display:block; }
            .option-selector { grid-template-columns:1fr; }
            .faq-grid { grid-template-columns:1fr; }
            .promise-grid, .steps-grid { grid-template-columns:1fr 1fr; }
            .direct-grid { grid-template-columns:1fr; }
            .f-grid { grid-template-columns:1fr; }
            .f-bottom { flex-direction:column; gap:8px; text-align:center; }
        }
        @media (max-width:480px) { .form-card { padding:32px 24px; } }
        @media print { .gnav, .footer, .skip-nav, .shape { display:none !important; } body { background:white; color:black; padding-top:0; } }