/* hero form / Компактная форма: one shared layout at every viewport width. */
.hero-form{display:grid;grid-template-columns:minmax(0,1fr);width:min(100%,var(--hero-actions-max));gap:var(--space-2);--link:var(--color-link-dark);--muted:var(--color-muted-dark)}
.hero-form__row{display:grid;grid-template-columns:minmax(0,1fr) 122px;gap:var(--space-3)}
.hero-form .field{min-width:0;gap:var(--space-1);align-content:start;color:var(--hero-text)}
.hero-form .field input{min-height:var(--action-height)}
.hero-form .field-error{min-block-size:1lh;font-size:12px;line-height:16px;color:var(--color-error-dark)}
.hero-form .field input[aria-invalid=true]{border-color:var(--color-error-dark)}
.hero-form>.action{max-width:none;width:100%}
.hero-form>.action:disabled{background:var(--color-blue);border-color:var(--color-blue);color:var(--color-surface);opacity:.65}
.hero-form .consent-notice{font-size:12px;line-height:18px;color:var(--color-inverse)}
.hero-form .consent-notice a{display:block}
.hero-form .form-status{color:var(--color-success-dark)}
.hero-form .form-status[data-state=error]{color:var(--color-error-dark)}
.hero-form .form-status[data-state=pending]{color:var(--color-muted-dark)}

/* Approved blue panel shared by the homepage and service Hero. */
.hero-form--panel{width:min(100%,calc(var(--hero-actions-max) + var(--space-12)));gap:0}
.hero-form__body{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2);padding:var(--space-6);background:var(--color-blue);border-radius:var(--action-radius) var(--action-radius) 0 0}
.hero-form__title{margin:0 0 var(--space-2);color:var(--color-surface);font-size:var(--type-card);line-height:var(--leading-card);letter-spacing:var(--tracking-card);font-weight:var(--weight-medium)}
.hero-form__body>.action{max-width:none;width:100%;background:var(--color-dark);border-color:var(--color-dark);color:var(--color-surface)}
.hero-form__body>.action:disabled{background:var(--color-dark);border-color:var(--color-dark);color:var(--color-surface);opacity:.65}
.hero-form__footer{padding:var(--space-3) var(--space-6);background:var(--color-blue-hover);border-radius:0 0 var(--action-radius) var(--action-radius)}
.hero-form--panel .consent-notice a{display:inline;color:var(--color-inverse)}
.hero-form--panel>.form-status{margin-top:0;min-block-size:2lh}
.hero-form--panel :is(input,button,a):focus-visible{outline-color:var(--color-surface)}
@media(hover:hover) and (pointer:fine){
 .hero-form__body>.action:hover:not(:disabled){background:color-mix(in srgb,var(--color-dark) 82%,var(--color-blue));border-color:color-mix(in srgb,var(--color-dark) 82%,var(--color-blue))}
}
@media(max-width:767px){
 .hero-form__body{padding:var(--space-4)}
 .hero-form__footer{padding-inline:var(--space-4)}
}

/* Hero composition belongs to the host; fields keep their compact rhythm. */
html:has(.hero--with-form){min-width:0}
.hero--with-form{justify-content:flex-start;gap:0;padding-top:calc(var(--header-height) + 1px + clamp(var(--space-8),calc(100svh - 900px),var(--space-16)));padding-bottom:var(--space-4);background:var(--color-dark)}
.hero--with-form::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(7,24,36,.88),rgba(7,24,36,.64) 32%,rgba(7,24,36,.24) 54%,transparent 76%),linear-gradient(0deg,rgba(7,24,36,.5),transparent 52%)}
.hero--with-form>.shell{display:flex;flex:1}
.hero--with-form .hero-copy{display:flex;flex-direction:column;justify-content:flex-end;width:100%;gap:var(--space-3)}
/* Keep the width-based type scale, capped by stable viewport height. */
.hero--with-form .hero-copy>h1{font-size:min(var(--type-display),clamp(2.5rem,8svh,4.5rem))}
.hero--with-form .hero-form{margin-top:var(--space-2)}
.hero--with-form .hero-facts{margin:0;padding-top:0}
.hero-form-sample .shell{display:grid;gap:var(--space-8)}
@media(max-width:767px){
 .hero--with-form{padding-top:calc(var(--header-height) + 1px + var(--space-16))}
 .hero--with-form .hero-facts{gap:var(--space-2)}
}


/* Short desktop screens: preserve readable controls in one compact row. */
@media(min-width:1024px) and (max-height:800px){
 .hero-form--panel{width:min(100%,var(--hero-copy-max))}
 .hero-form--panel .hero-form__body{grid-template-columns:minmax(0,1.1fr) 122px minmax(0,1fr) max-content;gap:var(--space-2) var(--space-3)}
 .hero-form--panel .hero-form__title{grid-column:1 / -1}
 .hero-form--panel .hero-form__row{display:contents}
 .hero-form--panel .hero-form__body>.action{align-self:start;margin-top:calc(var(--type-supporting)*var(--leading-supporting) + var(--space-1));min-height:calc(var(--action-height) + 2px)}
}