/* ==========================================================================
   CTPL · dir/contact.css
   Contact: hero, detail cards, enquiry form.

   Sits beside contact.html and is loaded only by it.

   Cascade order for this page:
     1. ../css/global.css      tokens, base elements, site chrome, RFQ band
     2. ../css/components.css  cross-page patterns (.hl, .hero-wash, .surface-dark, ...)
     3. this file                 everything unique to the page

   Loaded last, so any rule here of equal specificity wins without !important.
   ========================================================================== */

  /* Contact runs a tighter section rhythm than the global 88 / 64 / 54 */
  section.block{padding:80px 0}

  /* Contact hero */
  /* Background wash comes from .hero-wash (components.css) */
  .ct-hero .wrap{position:relative;text-align:center;max-width:760px;padding:74px 26px 44px}
  .ct-hero .eyebrow{justify-content:center;margin-bottom:1.1rem}
  .ct-hero h1{font-size:3rem;font-weight:700;letter-spacing:-.03em;margin-bottom:1rem}
  .ct-hero p{font-size:1.14rem;color:var(--ink-soft);max-width:40rem;margin:0 auto}

  /* Contact layout */
  .contact-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:40px;align-items:start}

  .info-list{display:grid;gap:16px}
  .info-card{display:flex;gap:1rem;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;box-shadow:var(--shadow);transition:.2s var(--ease)}
  .info-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#c5d4ee}
  .info-card .ic{width:44px;height:44px;border-radius:12px;background:var(--mint-soft);color:var(--teal);display:grid;place-items:center;flex:none}
  .info-card .ic svg{width:22px;height:22px}
  .info-card h3{font-size:.72rem;font-family:var(--fm);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.35rem}
  .info-card .v{font-family:var(--fd);font-weight:600;font-size:1.08rem;color:var(--ink);line-height:1.25}
  .info-card .v a:hover{color:var(--blue)}
  .info-card .s{font-size:.9rem;color:var(--ink-soft);margin-top:.2rem}
  .info-note{margin-top:8px;background:linear-gradient(155deg,var(--blue) 0%,var(--blue-dark) 65%,var(--navy) 100%);color:#fff;border-radius:16px;padding:22px 24px;box-shadow:var(--shadow-lg)}
  .info-note .rl{font-family:var(--fm);font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mint);margin-bottom:.5rem}
  .info-note p{font-size:.95rem;color:#cdd8f4}
  .info-note a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}

  /* Form */
  .form-card{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg);padding:36px 36px}
  .form-card h2{font-size:1.6rem;font-weight:700;margin-bottom:.4rem}
  .form-card>p{color:var(--ink-soft);font-size:.98rem;margin-bottom:1.6rem}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .field{margin-bottom:16px}
  .field label{display:block;font-family:var(--fm);font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.5rem}
  .field label .req{color:var(--red)}
  .field input,.field select,.field textarea{width:100%;font-family:var(--fb);font-size:.98rem;color:var(--ink);background:var(--paper);border:1.5px solid var(--border);border-radius:12px;padding:.8rem .95rem;transition:.18s var(--ease)}
  .field textarea{resize:vertical;min-height:130px;line-height:1.55}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(24,64,152,.1)}
  .field input::placeholder,.field textarea::placeholder{color:#9aa4bd}
  .form-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:6px}
  .form-actions .btn{padding:.9rem 1.7rem}
  .form-hint{font-size:.82rem;color:var(--ink-soft)}
  .form-ok{display:none;align-items:flex-start;gap:.7rem;background:var(--mint-soft);border:1px solid #cfe8e0;border-radius:14px;padding:16px 18px;margin-bottom:1.4rem;color:var(--ink)}
  .form-ok.show{display:flex}
  .form-ok svg{width:22px;height:22px;color:var(--teal);flex:none;margin-top:1px}
  .form-ok b{font-family:var(--fd)}

  @media(max-width:940px){
    section.block{padding:60px 0}
    .contact-grid{grid-template-columns:1fr;gap:30px}
    .ct-hero h1{font-size:2.5rem}
  }

  @media(max-width:600px){
    section.block{padding:48px 0}
    .ct-hero .wrap{padding:48px 20px 34px}
    .ct-hero h1{font-size:2.05rem;letter-spacing:-.02em}
    .form-card{padding:26px 22px}
    .form-row{grid-template-columns:1fr}
  }

  /* Submission failure panel. Mirrors .form-ok geometry so the card does not
     shift when one swaps for the other. */
  .form-err{display:none;align-items:flex-start;gap:.7rem;background:#FDECEC;border:1px solid #F6C9CB;border-radius:14px;padding:16px 18px;margin-bottom:1.4rem;color:var(--ink)}
  .form-err.show{display:flex}
  .form-err svg{width:22px;height:22px;color:var(--red);flex:none;margin-top:1px}
  .form-err b{font-family:var(--fd)}
  .form-err a{color:var(--red);text-decoration:underline}
  /* In-flight state for the submit button. */
  .form-actions .btn[disabled]{opacity:.6;cursor:progress;transform:none;box-shadow:none}