.btn-primary:disabled{ opacity:0.65; cursor:not-allowed; transform:none; box-shadow:0 10px 24px rgba(29,158,117,0.28); }

  /* =========================================================
     CONTACT PAGE — editorial two-column layout: a large "Contact"
     mark and a plain detail list on the left, an unboxed
     underline-style form on the right. No card chrome, no dark
     panel — flat, quiet, and typographic.
     ========================================================= */
  .contact-page{
    padding:calc(var(--nav-h-desktop) + 56px) clamp(24px, 6vw, 64px) 120px;
  }
  .contact-inner{ max-width:var(--container); margin:0 auto; }

  .contact-grid{
    display:grid;
    grid-template-columns:0.8fr 1.2fr;
    gap:clamp(40px, 6vw, 96px);
    align-items:start;
  }

  /* ---- Left: mark + detail list ---- */
  .contact-left{ display:flex; flex-direction:column; }
  .contact-mark{
    font-size:clamp(56px, 6vw, 92px);
    line-height:0.95; font-weight:600; letter-spacing:-0.03em;
    color:var(--ink-900);
    margin-bottom:48px;
  }

  .details-list{
    border-top:1px solid var(--neutral-200);
  }
  .detail-row{
    padding:26px 0;
    border-bottom:1px solid var(--neutral-200);
    display:flex; flex-direction:column; gap:6px;
  }
  .detail-label{
    font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--teal-700);
  }
  .detail-value, .detail-value a{
    font-size:16px; line-height:1.6; color:var(--neutral-700);
    text-decoration:none;
  }
  .detail-value a{ color:var(--ink-900); }
  .detail-value a:hover{ color:var(--teal-700); }

  /* ---- Right: form ---- */
  .contact-form{
    padding-left:clamp(0px, 4vw, 64px);
    border-left:1px solid var(--neutral-200);
  }
  .contact-form-title{
    font-size:22px; font-weight:600; letter-spacing:-0.01em;
    margin-bottom:24px;
  }
  .required-note{
    font-size:12.5px; color:var(--neutral-400);
    margin-bottom:26px;
  }
  .required-note .req{ color:#C24C3D; }
  .form-row{
    display:grid; grid-template-columns:1fr 1fr; gap:32px;
  }
  .field{
    position:relative;
    display:flex; flex-direction:column; gap:2px;
    margin-bottom:30px;
  }
  .field label{
    font-size:13px; font-weight:600; color: var(--ink-900); letter-spacing:0.01em;
    margin-bottom:6px; opacity:0.8;
  }
  .field label .req{ color:#C24C3D; margin-left:2px; }
  .field input,
  .field textarea{
    font-family:inherit; font-size:16px; color:var(--ink-900);
    background:transparent;
    border:none; border-bottom:1.5px solid var(--neutral-200);
    padding:10px 0 12px;
    outline:none;
    resize:none;
  }
  .field input::placeholder,
  .field textarea::placeholder{ color:var(--neutral-400); }
  .field textarea{ min-height:88px; }
  .field::after{
    content:'';
    position:absolute; left:0; right:0; bottom:0; height:2px;
    background:var(--teal-500);
    transform:scaleX(0); transform-origin:left;
    transition:transform 260ms ease;
  }
  .field:focus-within::after{ transform:scaleX(1); }
  .field.has-error input,
  .field.has-error textarea{ border-color:#C24C3D; }
  /* Don't show the teal focus underline over a red error border — the
     border color alone is the signal, the toast carries the message. */
  .field.has-error:focus-within::after{ transform:scaleX(0); }

  .contact-submit{ margin-top:6px; }

  /* Spam-trap field for Formspree: real users never see or fill this in. */
  .hp-field{
    position:absolute; left:-9999px; top:-9999px;
    width:1px; height:1px; overflow:hidden;
  }

  /* Notyf toast — recolored to match the brand instead of its default palette. */
  .notyf__toast--success{ background:var(--teal-700); }
  .notyf__toast--error{ background:#C24C3D; }

  @media (max-width:1023px){
    .contact-page{ padding:calc(var(--nav-h-mobile) + 20px) 20px 64px; }
    .contact-grid{ grid-template-columns:1fr; }
    /* Form first, "Contact" mark + details below once stacked. */
    .contact-form{ order:1; border-left:none; padding-left:0; }
    .contact-left{ order:2; }
    .contact-mark{ margin-bottom:20px; font-size:clamp(40px, 12vw, 56px); }

    .contact-form-title{ font-size:18px; }
    .required-note{ margin-bottom:18px; }
    .field{ margin-bottom:18px; }
    .field input, .field textarea{ font-size:15px; padding:8px 0 10px; }
    .field textarea{ min-height:64px; }
    .contact-submit{ width:100%; margin-top:2px; }

    .detail-row{ padding:18px 0; }
  }
  @media (max-width:600px){
    .form-row{ grid-template-columns:1fr; gap:0; }
  }

  @media (prefers-reduced-motion: reduce){
    * { animation:none !important; transition:none !important; }
  }