.contact-hero{
  padding-block:var(--space-5) var(--space-6);
  color:var(--c-ink);
  background:var(--c-light)
}

.contact-hero-layout{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  align-items:center;
  gap:var(--space-5)
}

.contact-hero-layout>*{
  min-width:0
}

.contact-hero-copy{
  display:grid;
  gap:var(--space-3)
}

.contact-hero-heading{
  display:grid;
  gap:var(--space-1)
}

.contact-hero-heading p{
  max-width:62ch;
  color:var(--c-ink-soft);
  font-size:var(--fs-3)
}

.contact-channel-summary{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  padding-top:var(--space-3);
  border-top:1px solid var(--c-line)
}

.contact-channel-summary div{
  display:grid;
  gap:var(--space-1);
  min-width:0
}

.contact-channel-summary div+div{
  padding-left:var(--space-3);
  border-left:1px solid var(--c-line)
}

.contact-channel-summary strong{
  color:var(--c-ink);
  font-family:var(--font-mono);
  font-size:var(--fs-1);
  font-variant-numeric:tabular-nums
}

.contact-channel-summary span{
  color:var(--c-muted);
  font-size:var(--fs-1)
}

.contact-routing{
  min-width:0;
  overflow:hidden;
  border-radius:var(--radius-lg);
  color:#eef7ee;
  background:var(--c-dark);
  box-shadow:var(--shadow-raised)
}

.contact-routing-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  padding:var(--space-3);
  color:#eef7ee;
  background:var(--c-dark-2)
}

.contact-routing-head div{
  display:grid;
  gap:var(--space-1);
  min-width:0
}

.contact-routing-head span{
  color:#a9c1ae;
  font-family:var(--font-mono);
  font-size:var(--fs-0);
  letter-spacing:.08em
}

.contact-routing-head strong{
  color:#fff;
  font-size:var(--fs-3)
}

.contact-routing-head .contact-routing-state{
  flex:0 0 auto;
  padding:.35rem .65rem;
  border-radius:999px;
  color:var(--c-dark);
  background:var(--c-accent);
  font-weight:700
}

.contact-route-list{
  display:grid;
  gap:var(--space-1);
  padding:var(--space-3)
}

.contact-route{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-2);
  border-radius:var(--radius-sm);
  color:#eaf4e9;
  background:rgba(255,255,255,.06)
}

.contact-route-code{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:var(--radius-sm);
  color:var(--c-dark);
  background:var(--c-accent);
  font:700 var(--fs-0)/1 var(--font-mono)
}

.contact-route div{
  display:grid;
  gap:var(--space-1);
  min-width:0
}

.contact-route strong{
  color:#fff
}

.contact-route div span{
  color:#aac0b0;
  font-size:var(--fs-1)
}

.contact-route-channel{
  color:#dcebdc;
  font-size:var(--fs-1);
  font-weight:650
}

.contact-routing-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  padding:var(--space-2) var(--space-3);
  color:#bed2c0;
  background:rgba(255,255,255,.04);
  font-size:var(--fs-1)
}

.contact-routing-foot svg{
  flex:0 0 auto
}

.contact-form-layout{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);
  align-items:stretch;
  gap:var(--space-3)
}

.contact-form-layout>*{
  min-width:0
}

.contact-form-sheet{
  min-width:0;
  overflow:hidden;
  border:1px solid var(--c-line);
  border-radius:var(--radius-lg);
  color:var(--c-ink);
  background:var(--c-white);
  box-shadow:var(--shadow-soft)
}

.contact-form-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  color:#eef7ee;
  background:var(--c-dark)
}

.contact-form-head div{
  display:grid;
  gap:var(--space-1);
  min-width:0
}

.contact-form-head h3{
  color:#fff
}

.contact-sheet-label,
.contact-sheet-id{
  color:#adbfaf;
  font-family:var(--font-mono);
  font-size:var(--fs-0);
  letter-spacing:.07em
}

.contact-sheet-id{
  flex:0 0 auto
}

.contact-form-body{
  display:grid;
  gap:var(--space-3);
  padding:var(--space-4)
}

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

.contact-date{
  appearance:none;
  padding-inline-end:2.6rem
}

.contact-select-shell{
  position:relative;
  min-width:0
}
.contact-select-native{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  border:0
}
.contact-select-btn{
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.78rem .9rem;
  border:1px solid rgba(16,42,26,.22);
  border-radius:var(--radius-sm);
  color:var(--c-ink);
  background:#fff;
  font:inherit;
  text-align:left;
  cursor:pointer
}
.contact-select-btn::after{
  content:"";
  width:.45rem;
  height:.45rem;
  flex:0 0 auto;
  border-right:2px solid var(--c-muted);
  border-bottom:2px solid var(--c-muted);
  transform:translateY(-15%) rotate(45deg)
}
.contact-select-shell.is-open .contact-select-btn{
  border-color:var(--c-primary);
  outline:3px solid rgba(143,203,138,.25)
}
.contact-select-list{
  position:absolute;
  z-index:20;
  left:0;
  right:0;
  top:calc(100% + .35rem);
  margin:0;
  padding:.35rem;
  list-style:none;
  max-height:16rem;
  overflow:auto;
  border:1px solid rgba(16,42,26,.16);
  border-radius:var(--radius-sm);
  background:#fff;
  box-shadow:var(--shadow-soft)
}
.contact-select-list[hidden]{display:none}
.contact-select-list button{
  width:100%;
  display:block;
  padding:.65rem .75rem;
  border:0;
  border-radius:.45rem;
  background:transparent;
  color:var(--c-ink);
  font:inherit;
  text-align:left;
  cursor:pointer
}
.contact-select-list button:hover,
.contact-select-list button[aria-selected="true"]{
  background:var(--c-surface);
  color:var(--c-primary-hover)
}

.contact-consent{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:var(--space-1);
  color:var(--c-ink-soft);
  font-size:var(--fs-1)
}

.contact-consent input{
  width:18px;
  height:18px;
  margin:.2rem 0 0;
  accent-color:var(--c-primary)
}

.contact-form-actions{
  display:grid;
  gap:var(--space-1)
}

.contact-status{
  min-height:1.65em;
  color:var(--c-primary-hover);
  font-size:var(--fs-1);
  font-weight:600
}

.contact-status.is-error{
  color:#682f28
}

.contact-mail-panel{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  min-width:0;
  padding:var(--space-4);
  border-radius:var(--radius-lg);
  color:#eef7ee;
  background:var(--c-dark-2)
}

.contact-mail-panel .c-badge{
  color:var(--c-dark);
  background:var(--c-accent)
}

.contact-mail-copy{
  display:grid;
  gap:var(--space-1)
}

.contact-mail-copy h3{
  color:#fff
}

.contact-mail-copy p{
  color:#b8cbbb
}

.contact-mail-address{
  overflow-wrap:anywhere;
  color:#e7f5e5;
  font-family:var(--font-mono);
  font-size:var(--fs-3);
  text-decoration:underline;
  text-decoration-color:var(--c-accent);
  text-underline-offset:.25em
}

.contact-response-list{
  display:grid;
  gap:var(--space-2);
  margin-top:auto
}

.contact-response-list div{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:var(--space-2);
  padding-top:var(--space-2);
  border-top:1px solid var(--c-line-light)
}

.contact-response-list dt{
  color:#9fb5a4;
  font-size:var(--fs-1)
}

.contact-response-list dd{
  color:#f1f8ef;
  text-align:right
}

.contact-check-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  align-items:start;
  gap:var(--space-3)
}

.contact-check-card{
  display:grid;
  gap:var(--space-2);
  min-width:0;
  padding:var(--space-3);
  border-radius:var(--radius-md);
  color:#174d3e;
  background:var(--c-cyan)
}

.contact-check-card:nth-child(1),
.contact-check-card:nth-child(2),
.contact-check-card:nth-child(3){
  grid-column:span 2
}

.contact-check-card:nth-child(4),
.contact-check-card:nth-child(5){
  grid-column:span 3
}

.contact-check-index{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  color:#fff;
  background:var(--c-primary);
  font:700 var(--fs-1)/1 var(--font-mono)
}

.contact-check-card div{
  display:grid;
  gap:var(--space-1)
}

.contact-check-card h3{
  color:#174d3e
}

.contact-check-card p{
  color:#315e53
}

.contact-check-notice{
  margin-top:var(--space-3)
}

.contact-ticket-layout{
  align-items:start
}

.contact-ticket-sheet{
  min-width:0;
  overflow:hidden;
  border-radius:var(--radius-lg);
  color:var(--c-ink);
  background:var(--c-light);
  box-shadow:var(--shadow-soft)
}

.contact-ticket-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  color:#eef7ee;
  background:var(--c-dark)
}

.contact-ticket-head div{
  display:grid;
  gap:var(--space-1)
}

.contact-ticket-head span{
  color:#aac0b0;
  font:var(--fs-0)/1 var(--font-mono);
  letter-spacing:.08em
}

.contact-ticket-head h3{
  color:#fff
}

.contact-ticket-head svg{
  flex:0 0 auto
}

.contact-ticket-body{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-3);
  padding:var(--space-4)
}

.contact-ticket-item{
  display:grid;
  align-content:start;
  gap:var(--space-1);
  min-width:0
}

.contact-ticket-item strong{
  color:var(--c-ink);
  font-size:var(--fs-3)
}

.contact-ticket-item p{
  color:var(--c-ink-soft)
}

.contact-ticket-side{
  grid-auto-rows:auto;
  align-items:start
}

.contact-ticket-card{
  gap:var(--space-3);
  color:#eef7ee;
  background:var(--c-dark-2)
}

.contact-ticket-card .c-badge{
  color:var(--c-dark);
  background:var(--c-accent)
}

.contact-ticket-card div,
.contact-guide-card div{
  display:grid;
  gap:var(--space-1)
}

.contact-ticket-card h3{
  color:#fff
}

.contact-ticket-card p{
  color:#b9cbbb
}

.contact-guide-card{
  gap:var(--space-3);
  color:#4d3564;
  background:var(--c-lilac)
}

.contact-guide-card .c-badge{
  color:#4d3564;
  background:rgba(255,255,255,.58)
}

.contact-guide-card h3{
  color:#4d3564
}

.contact-guide-card p{
  color:#655074
}

.contact-boundary-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
  gap:var(--space-3)
}

.contact-boundary-grid article{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:var(--space-2);
  min-width:0;
  padding:var(--space-3);
  border-radius:var(--radius-md);
  color:var(--c-ink);
  background:var(--c-white)
}

.contact-boundary-grid article>svg{
  color:var(--c-primary)
}

.contact-boundary-grid article div{
  display:grid;
  gap:var(--space-1)
}

.contact-boundary-grid h3{
  color:var(--c-ink)
}

.contact-boundary-grid p{
  color:var(--c-ink-soft)
}

.contact-privacy-panel{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
  align-items:stretch;
  gap:var(--space-4);
  padding:var(--space-4);
  border-radius:var(--radius-lg);
  color:var(--c-ink);
  background:var(--c-light)
}

.contact-privacy-panel>*{
  min-width:0
}

.contact-privacy-copy{
  display:grid;
  align-content:start;
  gap:var(--space-3)
}

.contact-privacy-copy div{
  display:grid;
  gap:var(--space-1)
}

.contact-privacy-copy p{
  color:var(--c-ink-soft)
}

.contact-policy-links{
  display:grid;
  grid-auto-rows:1fr;
  gap:var(--space-2)
}

.contact-policy-links a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  min-width:0;
  padding:var(--space-3);
  border:1px solid var(--c-line);
  border-radius:var(--radius-md);
  color:var(--c-ink);
  background:var(--c-white);
  transition:transform .2s var(--ease),border-color .2s var(--ease)
}

.contact-policy-links a:hover{
  transform:translateY(-2px);
  border-color:var(--c-primary)
}

.contact-policy-links span{
  display:grid;
  gap:var(--space-1);
  min-width:0
}

.contact-policy-links strong{
  color:var(--c-ink)
}

.contact-policy-links small{
  color:var(--c-muted);
  font-size:var(--fs-1)
}

.contact-policy-links svg{
  flex:0 0 auto;
  color:var(--c-primary)
}

.contact-closing-actions{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:.75rem;
  min-width:min(100%,260px)
}

.contact-closing-email{
  color:var(--c-dark);
  background:var(--c-white);
  border-color:var(--c-white)
}

.contact-closing-email:hover{
  color:var(--c-dark);
  background:var(--c-mint);
  border-color:var(--c-mint)
}

@media (max-width:980px){
  .contact-hero-layout,
  .contact-form-layout,
  .contact-privacy-panel{
    grid-template-columns:1fr
  }

  .contact-check-card:nth-child(1),
  .contact-check-card:nth-child(2),
  .contact-check-card:nth-child(3),
  .contact-check-card:nth-child(4),
  .contact-check-card:nth-child(5){
    grid-column:span 3
  }

  .contact-boundary-grid{
    grid-template-columns:1fr
  }

  .contact-mail-panel{
    min-height:0
  }
}

@media (max-width:720px){
  .contact-hero{
    padding-block:var(--space-4) var(--space-5)
  }

  .contact-hero-layout{
    gap:var(--space-4)
  }

  .contact-channel-summary{
    display:grid
  }

  .contact-channel-summary div+div{
    padding-top:var(--space-2);
    padding-left:0;
    border-top:1px solid var(--c-line);
    border-left:0
  }

  .contact-route{
    grid-template-columns:auto minmax(0,1fr)
  }

  .contact-route-channel{
    grid-column:2
  }

  .contact-form-head,
  .contact-ticket-head{
    padding:var(--space-3)
  }

  .contact-form-body,
  .contact-mail-panel,
  .contact-ticket-body,
  .contact-privacy-panel{
    padding:var(--space-3)
  }

  .contact-form-grid,
  .contact-ticket-body{
    grid-template-columns:1fr
  }

  .contact-check-grid{
    grid-template-columns:1fr
  }

  .contact-check-card:nth-child(1),
  .contact-check-card:nth-child(2),
  .contact-check-card:nth-child(3),
  .contact-check-card:nth-child(4),
  .contact-check-card:nth-child(5){
    grid-column:auto
  }

  .contact-form-actions .actions{
    align-items:stretch;
    flex-direction:column
  }

  .contact-form-actions .c-btn{
    width:100%
  }

  .contact-response-list div{
    grid-template-columns:1fr
  }

  .contact-response-list dd{
    text-align:left
  }
}

@media (max-width:390px){
  .contact-routing-head,
  .contact-form-head,
  .contact-ticket-head{
    align-items:flex-start;
    flex-direction:column
  }

  .contact-route{
    padding:var(--space-1)
  }

  .contact-route-code{
    width:36px;
    height:36px
  }

  .contact-routing-foot{
    align-items:flex-start
  }

  .contact-policy-links a{
    align-items:flex-start
  }
}

