/* Contact page: the headline and the brief share the first screen. brief.js turns the brief into three short steps; without it the same fields show as one form. */
.contact-grid{grid-template-areas:"intro form" "info form";grid-template-rows:auto 1fr;align-items:start;row-gap:44px;padding-top:64px}
.contact-grid>*{min-width:0}
.contact-intro{grid-area:intro}
.contact-intro h1{font-size:clamp(46px,4.7vw,74px)}
.contact-intro .intro-copy{max-width:470px;margin-top:26px}
.contact-grid>.project-form{grid-area:form}
.contact-grid>.contact-info{grid-area:info}
.contact-info .contact-person{margin-top:0}
.contact-info figure{margin:38px 0 0}
.contact-info figcaption{margin:12px 0 0;font-size:14px;color:var(--muted)}
.project-form h2{font-size:clamp(30px,2.7vw,40px);margin-bottom:26px}

/* Steps as sections (no JavaScript) */
.brief-step{border:0;margin:0;padding:0;min-width:0}
.brief-step legend{padding:0;margin-bottom:16px;font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.brief-step+.brief-step{margin-top:6px;padding-top:24px;border-top:1px solid var(--mist)}

/* Guided brief */
.project-form.is-guided .brief-step{display:none;margin:0;padding:0;border:0}
.project-form.is-guided .brief-step.is-current{display:block;animation:brief-in .28s ease both}
.project-form.is-guided .brief-step legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.project-form .brief-native{display:none}
@keyframes brief-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.brief-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 30px;padding:0;list-style:none}
.brief-steps button{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;width:100%;min-height:52px;padding:11px 0 0;background:none;border:0;border-top:3px solid var(--line);color:var(--nardo);font-size:14px;font-weight:600;line-height:1.35;text-align:left;cursor:pointer}
.brief-steps button:disabled{cursor:default}
.brief-steps .is-done{border-top-color:var(--ink);color:var(--ink)}
.brief-steps [aria-current=step]{border-top-color:var(--red);color:var(--ink)}
.brief-steps .brief-no{margin-right:6px;font-size:12px;letter-spacing:.08em;color:var(--red)}
.brief-steps small{display:block;max-width:100%;overflow:hidden;font-size:13px;font-weight:400;color:var(--muted);white-space:nowrap;text-overflow:ellipsis}

.brief-question{font-size:19px;font-weight:600;line-height:1.35}
.brief-hint{margin:6px 0 18px;font-size:14px;color:var(--muted)}
.brief-hint.is-error{color:var(--red-dark)}
.brief-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px}
.brief-card{display:flex;flex-direction:column;justify-content:flex-start;gap:5px;min-height:92px;padding:16px 18px;background:var(--paper);border:1px solid var(--line);border-radius:4px;color:var(--ink);text-align:left;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.brief-card small{font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.brief-card strong{font-size:17px;font-weight:600;line-height:1.3}
.brief-card:hover{border-color:var(--ink);background:#fff}
.brief-card[aria-pressed=true]{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red);background:var(--blush)}
.brief-card[aria-pressed=true] small{color:var(--red-dark)}
.brief-card.is-open{grid-column:1/-1;min-height:0;border-style:dashed}

.brief-starter{margin:-12px 0 22px}
.brief-recap{margin-bottom:24px;padding:16px 18px;background:var(--paper);border-left:3px solid var(--ink);border-radius:0 4px 4px 0}
.brief-recap-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px;font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.brief-recap strong{display:block;font-size:16px;line-height:1.4}
.brief-recap q{display:block;margin-top:4px;overflow:hidden;font-size:15px;color:var(--muted);white-space:nowrap;text-overflow:ellipsis}
.brief-link{padding:4px 0;background:none;border:0;color:var(--ink);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.brief-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:6px}
.brief-nav .button{margin-left:auto}
.brief-back{flex-shrink:0;white-space:nowrap;min-height:48px;padding:0 4px 0 0;background:none;border:0;color:var(--muted);font-size:15px;font-weight:600;cursor:pointer}
.brief-back:hover{color:var(--ink)}

.brief-done{display:none}
.project-form.is-sent .brief-steps,.project-form.is-guided.is-sent .brief-step.is-current{display:none}
.project-form.is-sent .brief-done{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:24px}
.brief-done p{flex-basis:100%;font-weight:600}

@media(max-width:900px){
 .contact-grid{padding-top:44px;row-gap:36px}
 .brief-steps .brief-no{display:none}
 .brief-cards{grid-template-columns:1fr}
 .brief-card{min-height:0}
 .brief-card.is-open{grid-column:auto}
}
@media(max-width:600px){
 .contact-grid{grid-template-areas:"intro" "form" "info";grid-template-rows:auto;row-gap:30px;padding-top:34px}
 .contact-intro h1{font-size:44px}
 .contact-intro .intro-copy{margin-top:18px;font-size:18px}
 .brief-steps{gap:6px;margin-bottom:24px}
 .brief-steps button{font-size:13px;min-height:44px}
 .project-form h2{font-size:29px}
 .brief-steps small{display:none}
 .brief-question{font-size:18px}
 .brief-card{padding:13px 15px}
 .brief-card strong{font-size:16px}
 .brief-nav .button{gap:14px;padding:15px 18px}
}
@media(prefers-reduced-motion:reduce){.project-form.is-guided .brief-step.is-current{animation:none}}