/* Flow Controls UK Ltd - contact.css */

.contact-page { background:#f0f4f8; padding:80px 0; }
    .contact-page-inner { max-width:1240px; margin:0 auto; padding:0 24px; }

    /* Top grid */
    .contact-top-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:56px; align-items:flex-start; margin-bottom:72px; }

    /* Left info */
    .contact-info-title { font-family:'Barlow Condensed',sans-serif; font-size:clamp(30px,3.5vw,42px); font-weight:800; color:#0d2137; line-height:1.1; margin-bottom:16px; }
    .contact-info-desc { font-size:15.5px; color:#4a5568; line-height:1.75; margin-bottom:36px; }
    .contact-cards { display:flex; flex-direction:column; gap:16px; }
    .contact-card { background:#fff; border-radius:14px; padding:22px 22px; box-shadow:0 3px 14px rgba(0,0,0,0.06); display:flex; align-items:flex-start; gap:16px; transition:transform 0.25s,box-shadow 0.25s; }
    .contact-card:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,0,0,0.1); }
    .contact-card-icon { width:48px; height:48px; background:rgba(26,143,227,0.1); border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .contact-card-icon svg { width:24px; height:24px; color:var(--blue); }
    .contact-card-label { font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--blue); margin-bottom:5px; }
    .contact-card-value { font-size:15px; color:#0d2137; font-weight:600; line-height:1.5; }
    .contact-card-sub { font-size:13px; color:#6b7a8d; margin-top:2px; }

    /* Form card */
    .contact-form-wrap { background:#fff; border-radius:18px; padding:40px 38px; box-shadow:0 8px 36px rgba(0,0,0,0.09); }
    .form-title { font-family:'Barlow Condensed',sans-serif; font-size:28px; font-weight:800; color:#0d2137; margin-bottom:6px; }
    .form-subtitle { font-size:14px; color:#6b7a8d; margin-bottom:30px; }
    .form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
    .form-group { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
    .form-label { font-size:13.5px; font-weight:600; color:#2d3748; }
    .form-input, .form-select, .form-textarea { width:100%; border:1.5px solid #d1dce8; border-radius:8px; padding:12px 15px; font-family:'Barlow',sans-serif; font-size:14.5px; color:#2d3748; background:#fff; outline:none; transition:border-color 0.2s,box-shadow 0.2s; }
    .form-input::placeholder, .form-textarea::placeholder { color:#aab4c0; }
    .form-input:focus, .form-select:focus, .form-textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(26,143,227,0.12); }
    .form-select { cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7a8d' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px; padding-right:40px; }
    .form-textarea { resize:vertical; min-height:130px; }
    .form-submit { width:100%; background:var(--blue); color:#fff; border:none; cursor:pointer; font-family:'Barlow',sans-serif; font-size:16px; font-weight:600; padding:15px 24px; border-radius:9px; display:flex; align-items:center; justify-content:center; gap:10px; box-shadow:0 6px 22px rgba(26,143,227,0.38); transition:background 0.2s,transform 0.2s; margin-top:8px; }
    .form-submit:hover { background:var(--blue-dark); transform:translateY(-2px); }
    .form-submit svg { width:18px; height:18px; }
    .form-note { font-size:12.5px; color:#8a9bb0; text-align:center; margin-top:12px; }

    /* Map section */
    .map-section { margin-bottom:72px; }
    .map-header { text-align:center; margin-bottom:36px; }
    .map-title { font-family:'Barlow Condensed',sans-serif; font-size:clamp(28px,3vw,40px); font-weight:800; color:#0d2137; margin-bottom:10px; }
    .map-desc { font-size:15px; color:#5a6a7a; max-width:480px; margin:0 auto; }
    .map-placeholder { background:#0d2137; border-radius:16px; height:360px; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; box-shadow:0 8px 36px rgba(0,0,0,0.15); }
    .map-placeholder iframe { width:100%; height:100%; border:none; border-radius:16px; filter:invert(0.9) hue-rotate(180deg) saturate(0.7); }

    /* FAQ section */
    .faq-section { margin-bottom:72px; }
    .faq-header { text-align:center; margin-bottom:36px; }
    .faq-title { font-family:'Barlow Condensed',sans-serif; font-size:clamp(28px,3vw,40px); font-weight:800; color:#0d2137; margin-bottom:10px; }
    .faq-list { max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
    .faq-item { background:#fff; border-radius:12px; box-shadow:0 3px 12px rgba(0,0,0,0.06); overflow:hidden; }
    .faq-q { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; cursor:pointer; font-size:15.5px; font-weight:600; color:#0d2137; transition:color 0.2s; }
    .faq-q:hover { color:var(--blue); }
    .faq-q svg { width:18px; height:18px; color:#8a9bb0; transition:transform 0.3s; flex-shrink:0; }
    .faq-item.open .faq-q svg { transform:rotate(180deg); }
    .faq-item.open .faq-q { color:var(--blue); }
    .faq-a { display:none; padding:0 24px 20px; font-size:14.5px; color:#5a6a7a; line-height:1.7; border-top:1px solid #f0f4f8; padding-top:16px; }
    .faq-item.open .faq-a { display:block; }

    @media(max-width:900px){ .contact-top-grid{grid-template-columns:1fr; gap:40px;} }
    @media(max-width:540px){ .form-row{grid-template-columns:1fr;} .contact-form-wrap{padding:28px 20px;} }