/* The contact page (/contact.html). The look is the home page's: its blue, its
   ink, Poppins (from /css/fonts.css), its rounded fields and its pill button.
   Nothing here is shared with another page, so nothing here can restyle one. */

:root{
  --blue:#1E32C8; --blue-soft:#3D53E0; --blue-tint:#F4F6FE;
  --ink:#0B0F22; --body:#4A5169; --muted:#6B7488;
  --line:#E4E7F1; --line-control:#8891B8;
  --good:#15803D; --good-tint:#ECFDF3; --bad:#B91C1C; --bad-tint:#FEF2F2;
  --font:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--body);background:#fff;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
a{color:var(--blue)}
button,input,textarea{font:inherit;color:inherit}

/* The bar at the top: the name, and the way back to the home page */
.c-nav{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--line)}
.c-nav-in{max-width:1040px;margin:0 auto;padding:0 20px;height:60px;
  display:flex;align-items:center;justify-content:space-between;gap:14px}
.c-logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;
  color:var(--ink);letter-spacing:-.025em;text-decoration:none;padding:8px 0}
.c-logo img{width:28px;height:28px;border-radius:8px;display:block}
.c-nav-link{font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;padding:12px 4px}
.c-nav-link:hover{color:var(--blue);text-decoration:underline}

.c-wrap{max-width:1040px;margin:0 auto;padding:40px 20px 64px}
.c-head{max-width:700px;margin-bottom:30px}
h1{font-size:clamp(28px,5vw,40px);font-weight:800;color:var(--ink);letter-spacing:-.025em;
  line-height:1.15;margin-bottom:14px}
.c-intro{font-size:17px;margin-bottom:10px}
.c-h2{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.015em;line-height:1.3;margin-bottom:16px}

/* The form, and beside it who we are. One column on a phone: the form first. */
.c-cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;align-items:start}
@media(max-width:860px){.c-cols{grid-template-columns:minmax(0,1fr);gap:36px}}

.c-row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:520px){.c-row{grid-template-columns:1fr}}
.field{margin-bottom:16px}
.field label{display:block;font-size:15.5px;font-weight:700;color:var(--ink);
  letter-spacing:-.012em;margin-bottom:8px}
.c-opt{font-weight:500;color:var(--muted)}
.field input,.field textarea{display:block;width:100%;padding:14px 16px;border:1.5px solid var(--line-control);
  border-radius:12px;font-size:16px;color:var(--ink);background:#fff;font-weight:500;min-height:52px;
  transition:border-color .15s, box-shadow .15s}
.field textarea{min-height:120px;line-height:1.5;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3.5px rgba(30,50,200,.13)}
.field input[aria-invalid="true"]{border-color:#DC2626}

/* What the form tells the person: sent, or what is in the way. Each is in the
   page and out of sight until it applies. Without JavaScript the server sends
   the browser back to this page with the line's name after a "#", and :target
   shows it; with JavaScript, /js/contact.js gives it the class "on". */
.c-msg{display:none;margin:0 0 16px;padding:12px 14px;border-radius:12px;font-size:15px;font-weight:600;line-height:1.5;
  scroll-margin-top:76px}
.c-msg:target,.c-msg.on{display:block}
.c-ok{background:var(--good-tint);color:var(--good);border:1px solid #BBE5C8}
.c-bad{background:var(--bad-tint);color:var(--bad);border:1px solid #F5C2C2}
.c-bad a{color:inherit}

/* The two boxes for text messages: the same boxes, with the same words, as on
   the home page's form. Each is a label around a real checkbox, so a tap
   anywhere on its words ticks it; neither is ever ticked for the visitor, and
   Send does not need them. The bold line names the box; the sentence under it
   is the whole of what is agreed to, on the page at the box. */
.sms{border:0;min-width:0;margin:22px 0 18px}
.sms legend{font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-.012em;margin-bottom:10px}
.sms-box{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;margin-bottom:10px;
  border:1.5px solid var(--line-control);border-radius:12px;background:#fff;cursor:pointer;
  transition:border-color .15s, background .15s}
@media(hover:hover){.sms-box:hover{border-color:var(--blue)}}
.sms-box input{flex:0 0 auto;width:22px;height:22px;margin-top:1px;accent-color:var(--blue);cursor:pointer}
.sms-box input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.sms-box:has(input:checked){border-color:var(--blue);background:var(--blue-tint)}
.sms-words{min-width:0}
.sms-words b{display:block;font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.012em;line-height:1.35}
.sms-words span{display:block;margin-top:4px;font-size:16px;line-height:1.5;color:var(--body);font-weight:500}
@media(max-width:560px){.sms-words span{font-size:14px;line-height:1.45}}
.sms-note{font-size:14px;line-height:1.5;color:var(--body);font-weight:500}
.sms-note a{display:inline-block;padding:8px 0;margin-right:18px;color:var(--ink);font-weight:600;
  text-decoration:underline;text-underline-offset:2px}
.sms-note a:hover{color:var(--blue)}

/* A field for whatever fills in forms by itself: no person sees it or reaches
   it with the keyboard. The server saves nothing from a form that has it filled. */
.c-trap{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.c-send{display:block;width:100%;border:0;background:var(--blue-soft);color:#fff;font-weight:800;font-size:16.5px;
  padding:17px;border-radius:100px;min-height:56px;cursor:pointer;transition:background .15s}
.c-send:hover{background:var(--blue)}
.c-send:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.c-send:disabled{opacity:.55;cursor:default}

/* Who we are and how else to reach us */
.c-card{border:1px solid var(--line);border-radius:16px;background:var(--blue-tint);padding:24px 22px}
.c-card address{font-style:normal;color:var(--ink);font-weight:500;margin-bottom:14px}
.c-card p{margin-bottom:4px}
.c-card a{display:inline-block;padding:7px 0;color:var(--blue);font-weight:700;text-decoration:none}
.c-card a:hover{text-decoration:underline}

/* The foot of the page, as the site's other pages have it */
.c-foot{border-top:1px solid var(--line);padding:26px 20px 34px;text-align:center;
  font-size:13.5px;color:var(--muted);font-weight:500;
  display:flex;justify-content:center;align-items:center;gap:6px 22px;flex-wrap:wrap}
.c-foot a{color:var(--muted);display:inline-block;padding:12px 0;text-decoration:none}
.c-foot a:hover{color:var(--blue);text-decoration:underline}