.contact-hero{
padding-block:var(--space-4) var(--space-6);
background:var(--c-base);
color:var(--c-ink)
}
.contact-hero__grid{
display:grid;
grid-template-columns:minmax(0,1.02fr) minmax(20rem,.98fr);
gap:var(--space-4);
align-items:stretch;
min-width:0
}
.contact-hero__grid>*{
min-width:0
}
.contact-hero__copy{
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center;
min-width:0
}
.contact-hero__copy .c-kicker{
margin-bottom:var(--space-2)
}
.contact-hero__copy h1{
max-width:15ch;
font-size:var(--fs-5);
line-height:1.18;
overflow-wrap:anywhere
}
.contact-hero__copy .c-lead{
max-width:42rem;
margin-top:var(--space-2);
color:var(--c-muted)
}
.contact-hero__actions{
justify-content:flex-start;
margin-block:var(--space-3)
}
.contact-response{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
width:100%;
margin-top:var(--space-2);
border-top:1px solid var(--c-line);
border-bottom:1px solid var(--c-line)
}
.contact-response div{
display:grid;
gap:var(--space-1);
min-width:0;
padding-block:var(--space-2)
}
.contact-response div+div{
padding-left:var(--space-2);
border-left:1px solid var(--c-line)
}
.contact-response strong{
font-size:var(--fs-1);
line-height:1.4
}
.contact-response span{
color:var(--c-muted);
font-size:var(--fs-1);
line-height:1.45
}
.contact-run-sheet{
display:flex;
flex-direction:column;
min-width:0;
border-radius:var(--radius-lg);
background:var(--c-dark);
color:#f8f3f2;
overflow:hidden;
box-shadow:var(--shadow-float)
}
.contact-run-sheet__head{
display:grid;
gap:var(--space-1);
padding:var(--space-3);
background:var(--c-primary);
color:var(--c-ink)
}
.contact-run-sheet__head span{
font-family:var(--font-mono);
font-size:var(--fs-0);
line-height:1.4;
letter-spacing:.08em
}
.contact-run-sheet__head strong{
font-family:var(--font-head);
font-size:var(--fs-3);
line-height:1.3
}
.contact-run-sheet__body{
display:grid;
padding-inline:var(--space-3)
}
.contact-route-row{
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
gap:var(--space-2);
align-items:center;
min-width:0;
padding-block:var(--space-2);
border-bottom:1px solid var(--c-line-dark)
}
.contact-route-row>*{
min-width:0
}
.contact-route-row__code{
display:inline-flex;
align-items:center;
justify-content:center;
width:2.75rem;
height:2rem;
border-radius:var(--radius-sm);
background:var(--c-dark-surface);
color:#f8f3f2;
font-family:var(--font-mono);
font-size:var(--fs-0);
line-height:1
}
.contact-route-row strong{
display:block;
font-size:var(--fs-1);
line-height:1.4
}
.contact-route-row p{
margin-top:var(--space-1);
color:#c6bec3;
font-size:var(--fs-1);
line-height:1.45
}
.contact-route-row__channel{
padding:.38rem .6rem;
border-radius:999px;
background:var(--c-peach);
color:var(--c-ink);
font-size:var(--fs-0);
line-height:1.2;
font-weight:700
}
.contact-run-sheet__foot{
display:flex;
justify-content:space-between;
gap:var(--space-2);
margin-top:auto;
padding:var(--space-3);
color:#c6bec3;
font-size:var(--fs-0);
line-height:1.45
}
.contact-run-sheet__foot span{
min-width:0;
overflow-wrap:anywhere
}
.contact-form-layout{
display:grid;
grid-template-columns:minmax(0,1.3fr) minmax(18rem,.7fr);
gap:var(--space-3);
align-items:stretch;
margin-top:var(--space-4);
min-width:0
}
.contact-form-layout>*{
min-width:0
}
.contact-mail-form{
display:flex;
flex-direction:column;
min-width:0;
border-radius:var(--radius-md);
background:var(--c-base);
color:var(--c-ink);
overflow:hidden
}
.contact-form-section{
padding:var(--space-3);
border-bottom:1px solid var(--c-line)
}
.contact-form-section__head{
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:var(--space-2);
align-items:start;
margin-bottom:var(--space-3)
}
.contact-form-section__head>span{
display:inline-flex;
align-items:center;
justify-content:center;
width:2.5rem;
height:2.5rem;
border-radius:var(--radius-sm);
background:var(--c-dark);
color:#f8f3f2;
font-size:var(--fs-0);
line-height:1
}
.contact-form-section__head div{
display:grid;
gap:var(--space-1);
min-width:0
}
.contact-form-section__head h3{
font-size:var(--fs-3)
}
.contact-form-section__head p{
color:var(--c-muted);
font-size:var(--fs-1)
}
.contact-fields{
display:grid;
gap:var(--space-3);
min-width:0
}
.contact-fields--two{
grid-template-columns:repeat(2,minmax(0,1fr))
}
.contact-fields>*{
min-width:0
}
.contact-choice-group{
min-width:0;
margin:0;
padding:0;
border:0
}
.contact-choice-group legend{
margin-bottom:var(--space-1);
padding:0;
font-size:var(--fs-1);
line-height:1.45;
font-weight:650
}
.contact-choice-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));
gap:var(--space-1)
}
.contact-choice{
position:relative;
display:flex;
min-width:0;
cursor:pointer
}
.contact-choice input{
position:absolute;
width:1px;
height:1px;
opacity:0
}
.contact-choice>span{
display:grid;
gap:var(--space-1);
width:100%;
min-width:0;
padding:var(--space-2);
border:1px solid var(--c-control);
border-radius:var(--radius-sm);
background:var(--c-surface);
color:var(--c-ink);
transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)
}
.contact-choice input:checked+span{
border-color:var(--c-primary);
background:var(--c-peach);
color:var(--c-ink)
}
.contact-choice input:focus-visible+span{
outline:3px solid color-mix(in srgb,var(--c-primary) 45%,transparent);
outline-offset:3px
}
.contact-choice strong{
font-size:var(--fs-1);
line-height:1.4
}
.contact-choice small{
color:var(--c-muted);
font-size:var(--fs-0)
}
.contact-compact-options{
display:flex;
flex-wrap:wrap;
gap:var(--space-1)
}
.contact-compact-options label{
position:relative;
display:flex;
min-width:0;
cursor:pointer
}
.contact-compact-options input{
position:absolute;
width:1px;
height:1px;
opacity:0
}
.contact-compact-options span{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:2.5rem;
padding:.55rem .8rem;
border:1px solid var(--c-control);
border-radius:999px;
background:var(--c-surface);
color:var(--c-ink);
font-size:var(--fs-1);
line-height:1.25
}
.contact-compact-options input:checked+span{
border-color:var(--c-primary);
background:var(--c-peach);
color:var(--c-ink)
}
.contact-compact-options input:focus-visible+span{
outline:3px solid color-mix(in srgb,var(--c-primary) 45%,transparent);
outline-offset:3px
}
.contact-consent{
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:var(--space-1);
align-items:start;
margin-top:var(--space-2);
font-weight:500
}
.contact-consent input{
width:1.1rem;
height:1.1rem;
margin:.2rem 0 0;
accent-color:var(--c-primary)
}
.contact-consent span{
min-width:0;
color:var(--c-muted);
font-size:var(--fs-1);
line-height:1.55
}
.contact-consent a{
color:#8e421f;
text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:.2em
}
.contact-form-actions{
display:flex;
flex-wrap:wrap;
gap:var(--space-1);
padding:var(--space-3)
}
.contact-form-actions .c-btn svg{
width:1.15rem;
height:1.15rem
}
.contact-form-status{
min-height:1.5rem;
padding:0 var(--space-3) var(--space-3);
color:var(--c-muted);
font-size:var(--fs-1);
line-height:1.5
}
.contact-form-status.is-error{
color:#8e421f
}
.contact-form-status.is-success{
color:var(--c-success)
}
.contact-channel-stack{
display:grid;
grid-template-rows:auto auto;
gap:var(--space-3);
min-width:0
}
.contact-channel-card{
display:flex;
flex-direction:column;
align-items:flex-start;
min-width:0;
padding:var(--space-3);
border-radius:var(--radius-md);
color:var(--c-ink)
}
.contact-channel-card--mail{
background:var(--c-peach);
color:var(--c-ink)
}
.contact-channel-card--ticket{
background:var(--c-lilac);
color:var(--c-ink)
}
.contact-channel-card .c-badge{
margin-bottom:var(--space-2)
}
.contact-channel-card h3{
font-size:var(--fs-3)
}
.contact-channel-card>p{
margin-top:var(--space-1);
color:#5f575c;
font-size:var(--fs-1)
}
.contact-channel-card dl{
display:grid;
width:100%;
margin:var(--space-3) 0 0
}
.contact-channel-card dl div{
display:grid;
gap:var(--space-1);
padding-block:var(--space-2);
border-top:1px solid var(--c-line)
}
.contact-channel-card dd{
color:#5f575c;
font-size:var(--fs-1);
overflow-wrap:anywhere
}
.contact-channel-card dd a{
text-decoration:underline;
text-underline-offset:.2em
}
.contact-channel-card>.c-btn{
width:100%;
margin-top:var(--space-3)
}
.contact-check-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
gap:var(--space-3);
align-items:start;
margin-top:var(--space-4)
}
.contact-check-card{
display:flex;
flex-direction:column;
align-items:flex-start;
min-width:0;
padding:var(--space-3);
border-radius:var(--radius-md);
background:var(--c-surface);
color:var(--c-ink)
}
.contact-check-card__number{
display:inline-flex;
align-items:center;
justify-content:center;
width:2.5rem;
height:2.5rem;
margin-bottom:var(--space-2);
border-radius:var(--radius-sm);
background:var(--c-primary);
color:var(--c-ink);
font-family:var(--font-mono);
font-size:var(--fs-0);
line-height:1;
font-weight:700
}
.contact-check-card h3{
font-size:var(--fs-3)
}
.contact-check-card p{
margin-top:var(--space-1);
color:var(--c-muted);
font-size:var(--fs-1)
}
.contact-note{
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:var(--space-2);
align-items:start;
margin-top:var(--space-3);
padding:var(--space-3);
border-radius:var(--radius-md);
background:var(--c-dark);
color:#f8f3f2
}
.contact-note svg{
width:1.35rem;
height:1.35rem;
margin-top:.15rem
}
.contact-note div{
display:grid;
gap:var(--space-1);
min-width:0
}
.contact-note p{
color:#c6bec3
}
.contact-diagnostic{
display:grid;
grid-template-columns:minmax(0,1.1fr) minmax(18rem,.9fr);
gap:var(--space-3);
align-items:stretch;
margin-top:var(--space-4);
min-width:0
}
.contact-diagnostic>*{
min-width:0
}
.contact-diagnostic__steps{
display:grid;
align-content:start;
padding-inline:var(--space-3);
border-radius:var(--radius-md);
background:var(--c-surface);
color:var(--c-ink)
}
.contact-diagnostic__steps article{
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:var(--space-2);
align-items:start;
padding-block:var(--space-3);
border-bottom:1px solid var(--c-line)
}
.contact-diagnostic__steps article:last-child{
border-bottom:0
}
.contact-diagnostic__steps article>span{
display:inline-flex;
align-items:center;
justify-content:center;
width:2.25rem;
height:2.25rem;
border-radius:var(--radius-sm);
background:var(--c-blue);
color:var(--c-ink);
font-size:var(--fs-0)
}
.contact-diagnostic__steps article div{
display:grid;
gap:var(--space-1);
min-width:0
}
.contact-diagnostic__steps h3{
font-size:var(--fs-3)
}
.contact-diagnostic__steps p{
color:var(--c-muted);
font-size:var(--fs-1)
}
.contact-diagnostic__sample{
display:flex;
flex-direction:column;
align-items:flex-start;
min-width:0;
padding:var(--space-3);
border-radius:var(--radius-md);
background:var(--c-dark);
color:#f8f3f2
}
.contact-diagnostic__sample .c-badge{
margin-bottom:var(--space-2);
background:var(--c-peach);
color:var(--c-ink)
}
.contact-diagnostic__sample h3{
font-size:var(--fs-4)
}
.contact-diagnostic__sample dl{
display:grid;
width:100%;
margin:var(--space-3) 0 0
}
.contact-diagnostic__sample dl div{
display:grid;
grid-template-columns:minmax(5rem,.35fr) minmax(0,.65fr);
gap:var(--space-2);
padding-block:var(--space-2);
border-top:1px solid var(--c-line-dark)
}
.contact-diagnostic__sample dt{
color:#c6bec3
}
.contact-diagnostic__sample dd{
color:#f8f3f2;
font-size:var(--fs-1);
overflow-wrap:anywhere
}
.contact-diagnostic__sample .c-btn{
width:100%;
margin-top:var(--space-3)
}
.contact-enterprise{
display:grid;
grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
gap:var(--space-4);
align-items:start;
min-width:0
}
.contact-enterprise>*{
min-width:0
}
.contact-enterprise__copy{
display:flex;
flex-direction:column;
align-items:flex-start
}
.contact-enterprise__copy .c-kicker{
margin-bottom:var(--space-2)
}
.contact-enterprise__copy h2{
font-size:var(--fs-5)
}
.contact-enterprise__copy>p{
margin-top:var(--space-2);
color:#5f575c
}
.contact-enterprise__matrix{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--space-3);
align-items:start
}
.contact-enterprise__matrix article{
display:flex;
flex-direction:column;
align-items:flex-start;
min-width:0;
padding:var(--space-3);
border-radius:var(--radius-md);
background:var(--c-surface);
color:var(--c-ink)
}
.contact-enterprise__matrix article>span{
margin-bottom:var(--space-2);
color:#8e421f;
font-size:var(--fs-0);
line-height:1.3
}
.contact-enterprise__matrix h3{
font-size:var(--fs-3)
}
.contact-enterprise__matrix p{
margin-top:var(--space-1);
color:var(--c-muted);
font-size:var(--fs-1)
}
.contact-privacy{
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:var(--space-3);
align-items:start;
max-width:var(--container-standard);
padding:var(--space-4);
border-radius:var(--radius-lg);
background:var(--c-base);
color:var(--c-ink)
}
.contact-privacy__icon{
display:flex;
align-items:center;
justify-content:center;
width:4rem;
height:4rem;
border-radius:var(--radius-md);
background:var(--c-peach);
color:var(--c-ink)
}
.contact-privacy__icon svg{
width:2rem;
height:2rem
}
.contact-privacy__copy{
display:flex;
flex-direction:column;
align-items:flex-start;
min-width:0
}
.contact-privacy__copy .c-kicker{
margin-bottom:var(--space-2)
}
.contact-privacy__copy h2{
font-size:var(--fs-4)
}
.contact-privacy__copy p{
margin-top:var(--space-2);
color:var(--c-muted)
}
.contact-text-link{
display:inline-flex;
align-items:center;
gap:var(--space-1);
margin-top:var(--space-3);
color:#8e421f;
font-weight:700
}
.contact-text-link svg{
width:1.15rem;
height:1.15rem;
flex:0 0 1.15rem
}
.contact-closing-section{
padding-block:var(--space-5) var(--space-3)
}
.contact-closing{
min-width:0
}
.contact-closing>div:first-child{
min-width:0
}
.contact-closing__label{
display:block;
margin-bottom:var(--space-2);
color:var(--c-primary);
font-size:var(--fs-0);
line-height:1.4;
font-weight:700;
letter-spacing:.08em
}
.contact-closing h2{
font-size:var(--fs-4)
}
.contact-closing p{
max-width:44rem;
margin-top:var(--space-1)
}
.contact-closing__actions{
display:flex;
flex-direction:column;
gap:var(--space-1);
flex:0 0 auto;
min-width:13rem
}
.contact-closing__actions .c-btn{
width:100%
}
.contact-closing__actions .c-btn-ghost{
color:#f8f3f2;
border-color:color-mix(in srgb,currentColor 35%,transparent)
}
@media (max-width:64rem){
.contact-hero__grid,
.contact-form-layout,
.contact-diagnostic,
.contact-enterprise{
grid-template-columns:1fr
}
.contact-run-sheet{
min-height:0
}
.contact-channel-stack{
grid-template-columns:repeat(2,minmax(0,1fr));
grid-template-rows:auto
}
.contact-enterprise__copy{
max-width:none
}
}
@media (max-width:44rem){
.contact-hero{
padding-block:var(--space-3) var(--space-5)
}
.contact-hero__copy h1{
max-width:none;
font-size:clamp(2.3rem,12vw,3.2rem)
}
.contact-response,
.contact-fields--two,
.contact-enterprise__matrix,
.contact-channel-stack{
grid-template-columns:1fr
}
.contact-response div+div{
padding-left:0;
border-left:0;
border-top:1px solid var(--c-line)
}
.contact-route-row{
grid-template-columns:auto minmax(0,1fr)
}
.contact-route-row__channel{
grid-column:2
}
.contact-run-sheet__foot{
flex-direction:column
}
.contact-form-section,
.contact-form-actions{
padding-inline:var(--space-2)
}
.contact-form-section__head{
grid-template-columns:1fr
}
.contact-form-section__head>span{
width:2.25rem;
height:2.25rem
}
.contact-form-actions{
flex-direction:column
}
.contact-form-actions .c-btn{
width:100%
}
.contact-diagnostic__steps{
padding-inline:var(--space-2)
}
.contact-diagnostic__steps article{
grid-template-columns:1fr
}
.contact-diagnostic__sample dl div{
grid-template-columns:1fr;
gap:var(--space-1)
}
.contact-privacy{
grid-template-columns:1fr;
padding:var(--space-3)
}
.contact-closing__actions{
width:100%;
min-width:0
}
}
@media (max-width:24.375rem){
.contact-route-row{
grid-template-columns:1fr
}
.contact-route-row__channel{
grid-column:1
}
.contact-choice-grid{
grid-template-columns:1fr
}
.contact-compact-options{
display:grid;
grid-template-columns:1fr
}
.contact-compact-options label,
.contact-compact-options span{
width:100%
}
}