:root{
  --contact-blue:#042698;
  --contact-sky:#9bd4e4;
  --contact-paper:#fdfee9;
  --contact-ink:#10162f;
  --contact-line:rgba(4,38,152,.22);
}

body.contact-page{
  min-height:100vh;
  margin:0;
  display:flex;
  flex-direction:column;
  color:var(--contact-ink);
  background:var(--contact-paper);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.5;
}

.contact-page .phoney-logo{
  image-rendering:auto;
}

.contact-main{
  flex:1;
  width:100%;
  padding:clamp(2rem,5vw,5rem) 1rem;
  box-sizing:border-box;
  background:
    radial-gradient(circle at 12% 10%,rgba(255,255,255,.55),transparent 24rem),
    var(--contact-sky);
}

.contact-shell{
  width:min(960px,100%);
  margin:0 auto;
}

.contact-heading{
  margin:0 0 clamp(1.6rem,4vw,3rem);
  color:var(--contact-blue);
  font-size:clamp(2.25rem,6vw,4.8rem);
  line-height:.95;
  text-align:center;
  font-family:"Racing Sans One",system-ui,sans-serif;
}

.contact-notice{
  margin:0 0 1rem;
  padding:1rem 1.15rem;
  border:2px solid var(--contact-blue);
  border-radius:16px;
  background:#fff;
  font-weight:700;
}

.contact-notice--success{color:#176b35}
.contact-notice--error{color:#a32121}

.contact-options{
  display:grid;
  gap:1rem;
}

.contact-option{
  overflow:hidden;
  border:2px solid var(--contact-blue);
  border-radius:20px;
  background:rgba(255,255,255,.92);
  box-shadow:6px 7px 0 rgba(4,38,152,.16);
}

.contact-option summary{
  position:relative;
  display:flex;
  align-items:center;
  min-height:72px;
  padding:1rem 4rem 1rem 1.25rem;
  box-sizing:border-box;
  color:var(--contact-blue);
  cursor:pointer;
  list-style:none;
  font-size:clamp(1.02rem,2vw,1.22rem);
  font-weight:800;
}

.contact-option summary::-webkit-details-marker{display:none}

.contact-option summary::after{
  content:"⌄";
  position:absolute;
  right:1.25rem;
  top:50%;
  transform:translateY(-58%);
  font-size:1.9rem;
  line-height:1;
  transition:transform .25s ease;
}

.contact-option[open] summary{
  color:#fff;
  background:var(--contact-blue);
}

.contact-option[open] summary::after{
  content:"^";
  transform:translateY(-44%);
}

.contact-option-body{
  padding:clamp(1.1rem,3vw,2rem);
  border-top:2px solid var(--contact-blue);
}

.contact-intro{
  max-width:76ch;
  margin:0 0 .75rem;
}

.contact-intro a{
  color:var(--contact-blue);
  font-weight:800;
}

.contact-send-note{
  margin:0 0 1.4rem;
  padding:.75rem .9rem;
  border-left:4px solid var(--contact-blue);
  border-radius:0 10px 10px 0;
  color:var(--contact-blue);
  background:rgba(4,38,152,.08);
}

.contact-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem 1.2rem;
}

.contact-field{
  display:grid;
  align-content:start;
  gap:.38rem;
}

.contact-field--full,
.contact-actions,
.contact-honeypot{
  grid-column:1/-1;
}

.contact-field label,
.contact-group legend{
  color:var(--contact-blue);
  font-weight:800;
}

.contact-field input,
.contact-field textarea{
  width:100%;
  padding:.82rem .9rem;
  box-sizing:border-box;
  border:1.5px solid var(--contact-line);
  border-radius:12px;
  outline:none;
  color:var(--contact-ink);
  background:#fff;
  font:inherit;
}

.contact-field textarea{
  min-height:135px;
  resize:vertical;
}

.contact-field input:focus,
.contact-field textarea:focus{
  border-color:var(--contact-blue);
  box-shadow:0 0 0 3px rgba(4,38,152,.12);
}

.contact-help{
  margin:0;
  color:#4c536a;
  font-size:.87rem;
  font-style:italic;
}

.contact-group{
  grid-column:1/-1;
  margin:0;
  padding:0;
  border:0;
}

.contact-radio-row{
  display:flex;
  gap:1.2rem;
  margin-top:.55rem;
}

.contact-radio-row label{
  display:flex;
  align-items:center;
  gap:.45rem;
  font-weight:700;
}

.contact-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.8rem;
  margin-top:.35rem;
}

.contact-submit{
  display:inline-flex;
  min-height:46px;
  align-items:center;
  justify-content:center;
  padding:.7rem 1.1rem;
  box-sizing:border-box;
  border:2px solid var(--contact-blue);
  border-radius:12px;
  cursor:pointer;
  font:inherit;
  font-weight:800;
  text-decoration:none;
}

.contact-submit{
  color:#fff;
  background:var(--contact-blue);
}

.contact-submit:hover{
  transform:translateY(-2px);
  box-shadow:3px 4px 0 rgba(4,38,152,.2);
}

.contact-honeypot{
  position:absolute!important;
  left:-10000px!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
}

@media(max-width:640px){
  .contact-main{padding:1.5rem .6rem 3rem}
  .contact-heading{text-align:left}
  .contact-option{border-radius:16px;box-shadow:4px 5px 0 rgba(4,38,152,.14)}
  .contact-option summary{padding-left:1rem}
  .contact-option-body{padding:1rem}
  .contact-form{grid-template-columns:1fr}
  .contact-field--full,.contact-actions,.contact-honeypot{grid-column:1}
  .contact-actions{align-items:stretch;flex-direction:column-reverse}
  .contact-submit{width:100%}
}