/* connect page styles, shared by connect.html (English) and ar/connect.html (Arabic) */
  /* Palette only (brand manual p13–14) */
  :root { --white:#ffffff; --cream:#eae6df; --beige:#dcd5c3; --camel:#ba8867; --ink:#000000;
          --blue:#abc8ce; --sage:#949b80; --brick:#9b450b; --brown:#773805;
          --bg:#dcd5c3;
          --serif:"benton-modern-display", Georgia, serif;   /* headings */
          --sans:"cofo-sans-variable", Arial, sans-serif;     /* body + sub-headings */
          --arabic:"ibm-plex-arabic", Tahoma, sans-serif; }  /* Arabic */
  * { box-sizing:border-box; margin:0; padding:0; }
  body { background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; }
  :lang(ar) { font-family:var(--arabic); letter-spacing:0 !important; text-transform:none !important; }
  .label { font-size:12px; letter-spacing:.25em; text-transform:uppercase; }

  /* Header (same as project pages: small, emblem) */
  header { position:fixed; inset:0 0 auto 0; z-index:10; height:64px; background:var(--bg);
           display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 40px; }
  nav { display:flex; gap:48px; font-size:12px; letter-spacing:.25em; text-transform:uppercase; }
  nav a { color:var(--ink); text-decoration:none; opacity:.75; }
  nav a:hover, nav a.on { opacity:1; color:var(--brown); }   /* brown: 6.1:1 on light beige (brick is only 4.4:1) */
  nav.right { justify-content:flex-end; }
  .logo img { height:40px; display:block; }

  /* Title */
  .intro { text-align:center; padding:144px 24px 72px; }
  .intro h1 { font-family:var(--serif); font-weight:400; font-size:64px; line-height:1; margin-bottom:18px; }
  .intro p { font-size:18px; opacity:.8; }




  @media (max-width:760px) {
    header { padding:0 16px; grid-template-columns:72px 1fr 72px; } nav { display:none; } .logo { grid-column:2; justify-self:center; }
    .intro { padding:120px 16px 48px; } .intro h1 { font-size:44px; } .intro p { font-size:16px; }
  }


  /* ---- Rebuilt 2026-09-27: form (left) + direct channels (right) ---- */
  .contact { display:grid; grid-template-columns:1.2fr 1fr; gap:64px; max-width:1100px; margin:0 auto; padding:0 40px 96px; align-items:start; }
  .contact h2 { font-family:var(--serif); font-weight:400; font-size:32px; margin-bottom:24px; }
  .form label { display:block; font-size:12px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:18px; }
  .form input, .form textarea { display:block; width:100%; margin-top:8px; padding:14px 16px; font:inherit; font-size:16px; letter-spacing:0; text-transform:none;
                                color:var(--ink); background:var(--cream); border:1px solid var(--camel); border-radius:0; }
  .form input:focus, .form textarea:focus { outline:2px solid var(--brown); outline-offset:1px; }
  .form textarea { resize:vertical; min-height:130px; }
  .form .hp { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; margin:0; }   /* honeypot: invisible, takes no space (no off-screen offset, which broke RTL scrolling) */
  .form .btn { margin:4px 0 0; border:0; cursor:pointer; font:inherit; font-size:12px; letter-spacing:.2em; text-transform:uppercase; }
  .form .btn[disabled] { opacity:.6; cursor:default; }
  .form .status { min-height:1.6em; margin-top:14px; font-size:16px; }
  .form .status[data-kind="ok"] { color:var(--brown); font-family:var(--serif); font-size:22px; }
  .form .status[data-kind="error"] { color:var(--brown); }
  .channels .ch { display:flex; align-items:center; gap:14px; color:var(--ink); text-decoration:none; font-size:18px; padding:14px 0;
                  border-top:1px solid var(--camel); border-bottom:1px solid var(--camel); }
  .channels .chip { display:inline-grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--cream); color:var(--ink); flex:none; }
  .channels .chip svg { width:22px; height:22px; }
  .channels .social { display:flex; gap:12px; margin:22px 0 18px; }
  .channels a.chip:hover, .channels .ch:hover .chip { box-shadow:0 0 0 2px var(--brown); }
  @media (max-width:760px) {
    .contact { grid-template-columns:1fr; gap:48px; padding:0 16px 72px; }
  }