.metal-subcategory-page {
   --metal-sub-bg: var(--catalog-bg, #1f1f1f);
   --metal-sub-surface: var(--catalog-surface, #2a2a2a);
   --metal-sub-surface-strong: var(--catalog-surface-strong, #303030);
   --metal-sub-border: var(--catalog-border, rgba(255, 255, 255, 0.08));
   --metal-sub-border-strong: var(--catalog-border-strong, rgba(255, 255, 255, 0.14));
   --metal-sub-text: var(--catalog-text, #f5f7ff);
   --metal-sub-muted: var(--catalog-muted, rgba(245, 247, 255, 0.72));
   --metal-sub-accent: var(--catalog-accent, #f2b705);
   --metal-sub-blue: var(--catalog-accent-strong, #1a3e6f);
   --metal-sub-shadow: var(--catalog-shadow, 0 24px 60px rgba(0, 0, 0, 0.28));
   --metal-bg: var(--metal-sub-bg);
   --metal-surface: var(--metal-sub-surface);
   --metal-surface-strong: var(--metal-sub-surface-strong);
   --metal-border: var(--metal-sub-border);
   --metal-border-strong: var(--metal-sub-border-strong);
   --metal-text: var(--metal-sub-text);
   --metal-muted: var(--metal-sub-muted);
   --metal-accent: var(--metal-sub-accent);
   --metal-blue: var(--metal-sub-blue);
   --metal-shadow: var(--metal-sub-shadow);
   padding: 34px var(--header-pad-x) 58px;
   background:
      radial-gradient(circle at top right, rgba(242, 183, 5, 0.14), transparent 25%),
      radial-gradient(circle at 8% 18%, rgba(26, 62, 111, 0.28), transparent 30%),
      linear-gradient(180deg, #1f1f1f 0%, var(--metal-sub-bg) 100%);
   color: var(--metal-sub-text);
}

.metal-subcategory-page a {
   color: inherit;
   text-decoration: none;
}

.metal-subcategory-page .hp-field,
.metal-sub-manager-modal .hp-field {
   position: absolute !important;
   left: -9999px !important;
   width: 1px !important;
   height: 1px !important;
   opacity: 0 !important;
   pointer-events: none !important;
}

.metal-manager-modal,
.metal-sub-manager-modal {
   --metal-bg: var(--catalog-bg, #1f1f1f);
   --metal-surface: var(--catalog-surface, #2a2a2a);
   --metal-surface-strong: var(--catalog-surface-strong, #303030);
   --metal-border: var(--catalog-border, rgba(255, 255, 255, 0.08));
   --metal-border-strong: var(--catalog-border-strong, rgba(255, 255, 255, 0.14));
   --metal-text: var(--catalog-text, #f5f7ff);
   --metal-muted: var(--catalog-muted, rgba(245, 247, 255, 0.72));
   --metal-accent: var(--catalog-accent, #f2b705);
   --metal-blue: var(--catalog-accent-strong, #1a3e6f);
   --metal-shadow: var(--catalog-shadow, 0 24px 60px rgba(0, 0, 0, 0.28));
   --metal-sub-bg: var(--metal-bg);
   --metal-sub-surface: var(--metal-surface);
   --metal-sub-surface-strong: var(--metal-surface-strong);
   --metal-sub-border: var(--metal-border);
   --metal-sub-border-strong: var(--metal-border-strong);
   --metal-sub-text: var(--metal-text);
   --metal-sub-muted: var(--metal-muted);
   --metal-sub-accent: var(--metal-accent);
   --metal-sub-blue: var(--metal-blue);
   --metal-sub-shadow: var(--metal-shadow);
}

.metal-subcategory-shell {
   max-width: 1400px;
   margin: 0 auto;
   display: grid;
   gap: 28px;
}

.metal-sub-breadcrumbs {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 9px;
   color: var(--metal-sub-muted);
   font-size: 14px;
}

.metal-sub-breadcrumbs a {
   color: rgba(245, 247, 255, 0.8);
   transition: color 0.2s ease;
}

.metal-sub-breadcrumbs a:hover,
.metal-sub-breadcrumbs span:last-child {
   color: var(--metal-sub-accent);
}

.metal-sub-hero,
.metal-sub-section,
.metal-sub-seo,
.metal-sub-form-section,
.metal-sub-faq-section,
.metal-sub-works-section,
.metal-sub-final-seo {
   border: 1px solid var(--metal-sub-border);
   border-radius: 32px;
   background: linear-gradient(180deg, rgba(48, 48, 48, 0.96), rgba(31, 31, 31, 0.98));
   box-shadow: var(--metal-sub-shadow);
}

.metal-sub-hero {
   display: grid;
   grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
   gap: 26px;
   padding: clamp(26px, 4vw, 42px);
   position: relative;
   overflow: hidden;
}

.metal-sub-hero::before,
.metal-sub-hero::after {
   content: "";
   position: absolute;
   border-radius: 999px;
   pointer-events: none;
}

.metal-sub-hero::before {
   width: 300px;
   height: 300px;
   right: -120px;
   top: -130px;
   background: rgba(242, 183, 5, 0.14);
}

.metal-sub-hero::after {
   width: 420px;
   height: 420px;
   right: 18%;
   bottom: -320px;
   background: rgba(26, 62, 111, 0.28);
}

.metal-sub-hero__copy,
.metal-sub-hero__card {
   position: relative;
   z-index: 1;
}

.metal-sub-eyebrow {
   display: inline-flex;
   align-items: center;
   padding: 8px 14px;
   border-radius: 999px;
   border: 1px solid var(--metal-sub-border-strong);
   background: rgba(255, 255, 255, 0.08);
   color: var(--metal-sub-accent);
   font-size: 12px;
   font-weight: 800;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

.metal-sub-hero h1 {
   max-width: 840px;
   margin: 18px 0 14px;
   color: #fff;
   font-size: 54px;
   line-height: 1.03;
}

.metal-sub-hero__subtitle {
   margin: 0 0 20px;
   color: rgba(245, 247, 255, 0.84);
   font-size: 22px;
   font-weight: 600;
}

.metal-sub-hero__description,
.metal-sub-hero__text,
.metal-sub-text-panel,
.metal-sub-final-seo__text,
.metal-sub-instruction-card__text,
.metal-sub-faq-answer {
   color: var(--metal-sub-muted);
   line-height: 1.72;
}

.metal-sub-hero__description {
   max-width: 690px;
   margin: 0;
}

.metal-sub-actions,
.metal-sub-card-buttons,
.metal-sub-form-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
}

.metal-sub-actions {
   margin-top: 28px;
}

.metal-sub-btn,
.metal-sub-btn-sm {
   appearance: none;
   border: 0;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   border-radius: 999px;
   font-weight: 800;
   transition: transform 0.22s ease, background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}

.metal-sub-btn {
   min-height: 50px;
   padding: 0 22px;
   font-size: 15px;
}

.metal-sub-btn-sm {
   flex: 1;
   min-height: 42px;
   padding: 0 14px;
   font-size: 13px;
}

.metal-sub-btn--accent,
.metal-sub-btn-sm--accent {
   background: var(--metal-sub-accent);
   color: #111726;
   box-shadow: 0 18px 34px rgba(242, 183, 5, 0.22);
}

.metal-sub-btn--primary {
   background: var(--metal-sub-blue);
   color: #fff;
}

.metal-sub-btn--ghost,
.metal-sub-btn-sm--outline {
   border: 1px solid rgba(255, 255, 255, 0.18);
   background: rgba(255, 255, 255, 0.06);
   color: var(--metal-sub-text);
}

.metal-sub-btn:hover,
.metal-sub-btn-sm:hover {
   transform: translateY(-2px);
}

.metal-sub-btn--ghost:hover,
.metal-sub-btn-sm--outline:hover {
   border-color: rgba(242, 183, 5, 0.46);
   color: var(--metal-sub-accent);
}

.metal-sub-hero__card {
   align-self: stretch;
   padding: 30px;
   border-radius: 30px;
   border: 1px solid rgba(255, 255, 255, 0.14);
   background: linear-gradient(145deg, rgba(26, 62, 111, 0.92), rgba(15, 21, 32, 0.96));
}

.metal-sub-hero__card h2 {
   margin: 0 0 16px;
   padding-left: 16px;
   border-left: 3px solid var(--metal-sub-accent);
   color: #fff;
   font-size: 22px;
}

.metal-sub-company-badge,
.metal-sub-phone {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   margin-top: 20px;
   color: var(--metal-sub-accent);
   font-weight: 800;
}

.metal-sub-section,
.metal-sub-seo,
.metal-sub-form-section,
.metal-sub-faq-section,
.metal-sub-works-section,
.metal-sub-final-seo {
   padding: clamp(24px, 4vw, 40px);
}

.metal-subcategory-page .metal-section,
.metal-subcategory-page .metal-callback__card {
   border: 1px solid var(--metal-border);
   background: linear-gradient(180deg, rgba(48, 48, 48, 0.96), rgba(31, 31, 31, 0.98));
   border-radius: 32px;
   box-shadow: var(--metal-shadow);
}

.metal-subcategory-page .metal-section {
   padding: clamp(24px, 4vw, 40px);
}

.metal-subcategory-page .metal-callback__card {
   max-width: 1060px;
   margin: 0 auto;
   padding: clamp(24px, 4vw, 36px);
}

.metal-subcategory-page .metal-callback__card h2 {
   margin: 0 0 10px;
   color: #fff;
   font-size: 31px;
   letter-spacing: 0;
   overflow-wrap: anywhere;
}

.metal-subcategory-page .metal-callback__card > h2,
.metal-subcategory-page .metal-callback__card > p {
   text-align: center;
}

.metal-subcategory-page .metal-callback__card > p {
   margin: 0 0 26px;
   color: var(--metal-muted);
   line-height: 1.7;
}

.metal-subcategory-page .metal-form__grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 16px;
}

.metal-subcategory-page .metal-field {
   display: grid;
   gap: 8px;
   color: #fff;
   font-weight: 700;
}

.metal-subcategory-page .metal-field--full {
   grid-column: 1 / -1;
   margin-top: 16px;
}

.metal-subcategory-page .metal-field span {
   font-size: 14px;
}

.metal-subcategory-page .metal-field input,
.metal-subcategory-page .metal-field textarea {
   width: 100%;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 22px;
   padding: 15px 18px;
   background: #1f1f1f;
   color: var(--metal-text);
   outline: none;
   transition: border-color 180ms ease, box-shadow 180ms ease;
}

.metal-subcategory-page .metal-field textarea {
   min-height: 130px;
   resize: vertical;
}

.metal-subcategory-page .metal-field input::placeholder,
.metal-subcategory-page .metal-field textarea::placeholder {
   color: rgba(245, 247, 255, 0.5);
}

.metal-subcategory-page .metal-field input:focus,
.metal-subcategory-page .metal-field textarea:focus {
   border-color: rgba(242, 183, 5, 0.52);
   box-shadow: 0 0 0 3px rgba(242, 183, 5, 0.12);
}

.metal-subcategory-page .metal-form__actions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 14px;
   margin-top: 22px;
}

.metal-subcategory-page .metal-upload {
   position: relative;
   min-height: 48px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 0 18px;
   border-radius: 999px;
   border: 1px dashed rgba(242, 183, 5, 0.48);
   background: rgba(242, 183, 5, 0.08);
   color: #fff8df;
   font-weight: 800;
   cursor: pointer;
}

.metal-subcategory-page .metal-upload input {
   position: absolute;
   width: 1px;
   height: 1px;
   opacity: 0;
   pointer-events: none;
}

.metal-subcategory-page .metal-btn {
   min-height: 48px;
   border: 0;
   border-radius: 999px;
   padding: 0 22px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   
   gap: 10px;
   font-weight: 800;
   cursor: pointer;
   transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.metal-subcategory-page .metal-btn:hover {
   transform: translateY(-2px);
}

.metal-subcategory-page .metal-btn--primary {
   background: var(--metal-blue);
   color: #fff;
}

.metal-subcategory-page .metal-btn--primary:hover {
   background: #ffd764;
   color: #111726;
}

.metal-subcategory-page .metal-privacy {
   width: fit-content;
   margin: 18px auto 0;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 10px 14px;
   border-radius: 999px;
   border: 1px solid var(--metal-border);
   background: rgba(255, 255, 255, 0.05);
   color: var(--metal-muted);
   font-size: 13px;
}

.metal-sub-section-title {
   display: inline-block;
   position: relative;
   margin: 0 0 32px;
   color: #fff;
   font-size: 31px;
   line-height: 1.2;
}

.metal-sub-section-title::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: -10px;
   width: 76px;
   height: 3px;
   border-radius: 999px;
   background: var(--metal-sub-accent);
}

.metal-sub-projects {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 24px;
}

.metal-sub-project-card,
.metal-sub-instruction-card,
.metal-sub-faq-item,
.metal-sub-faq-form,
.metal-sub-work-card,
.metal-sub-form-card {
   border: 1px solid var(--metal-sub-border);
   background: rgba(255, 255, 255, 0.045);
   border-radius: 28px;
}

.metal-sub-project-card {
   overflow: hidden;
   transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, background-color 0.28s ease;
}

.metal-sub-project-card:hover,
.metal-sub-work-card:hover,
.metal-sub-instruction-card:hover {
   transform: translateY(-6px);
   border-color: rgba(242, 183, 5, 0.42);
   box-shadow: 0 22px 34px -22px rgba(242, 183, 5, 0.45);
   background: rgba(255, 255, 255, 0.065);
}

.metal-sub-project-card__preview {
   min-height: 184px;
   display: grid;
   place-items: center;
   background: linear-gradient(145deg, rgba(26, 62, 111, 0.34), rgba(255, 255, 255, 0.04));
   background-position: center;
   background-size: cover;
   color: var(--metal-sub-accent);
   font-size: 52px;
}

.metal-sub-project-card__body {
   padding: 24px 20px 22px;
}

.metal-sub-project-card h3,
.metal-sub-work-card h3,
.metal-sub-instruction-card h2,
.metal-sub-faq-form h3 {
   margin: 0;
   color: #fff;
}

.metal-sub-project-card h3 {
   min-height: 54px;
   font-size: 21px;
   line-height: 1.28;
}

.metal-sub-param-list {
   display: grid;
   gap: 8px;
   margin: 18px 0 20px;
}

.metal-sub-param-item {
   display: flex;
   gap: 10px;
   align-items: flex-start;
   padding-bottom: 8px;
   border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
   color: rgba(245, 247, 255, 0.78);
   font-size: 14px;
   line-height: 1.45;
}

.metal-sub-param-item i,
.metal-sub-form-title i,
.metal-sub-field i,
.metal-sub-options__label i,
.metal-sub-instruction-card h2 i,
.metal-sub-faq-form h3 i {
   color: var(--metal-sub-accent);
}

.metal-sub-text-panel,
.metal-sub-final-seo__text {
   padding: 28px;
   border-left: 5px solid var(--metal-sub-accent);
   border-radius: 26px;
   background: rgba(255, 255, 255, 0.055);
}

.metal-sub-text-panel p,
.metal-sub-final-seo__text p {
   margin: 0 0 16px;
}

.metal-sub-text-panel p:last-child,
.metal-sub-final-seo__text p:last-child {
   margin-bottom: 0;
}

.metal-sub-form-card {
   padding: clamp(24px, 4vw, 34px);
}

.metal-sub-form-title {
   display: flex;
   gap: 12px;
   align-items: center;
   margin: 0 0 10px;
   color: #fff;
   font-size: 28px;
}

.metal-sub-form-subtitle {
   margin: 0 0 26px;
   padding-left: 16px;
   border-left: 3px solid var(--metal-sub-accent);
   color: var(--metal-sub-muted);
}

.metal-sub-form-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 20px;
}

.metal-sub-field,
.metal-sub-options {
   display: grid;
   gap: 8px;
   margin-bottom: 20px;
}

.metal-sub-field--full {
   grid-column: 1 / -1;
}

.metal-sub-field span,
.metal-sub-options__label {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   color: rgba(245, 247, 255, 0.9);
   font-size: 14px;
   font-weight: 800;
}

.metal-sub-field input,
.metal-sub-field select,
.metal-sub-field textarea,
.metal-sub-faq-form input,
.metal-sub-faq-form textarea {
   width: 100%;
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 20px;
   background: rgba(0, 0, 0, 0.18);
   color: #fff;
   font: inherit;
   padding: 14px 16px;
   outline: none;
   transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.metal-sub-field textarea,
.metal-sub-faq-form textarea {
   resize: vertical;
}

.metal-sub-field input:focus,
.metal-sub-field select:focus,
.metal-sub-field textarea:focus,
.metal-sub-faq-form input:focus,
.metal-sub-faq-form textarea:focus {
   border-color: rgba(242, 183, 5, 0.7);
   box-shadow: 0 0 0 3px rgba(242, 183, 5, 0.12);
}

.metal-sub-checkbox-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
   gap: 12px;
}

.metal-sub-checkbox {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 11px 14px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.05);
   color: rgba(245, 247, 255, 0.82);
   cursor: pointer;
}

.metal-sub-checkbox input {
   accent-color: var(--metal-sub-accent);
}

.metal-sub-upload {
   display: grid;
   place-items: center;
   gap: 10px;
   margin: 6px 0 24px;
   padding: 22px;
   border: 2px dashed rgba(242, 183, 5, 0.38);
   border-radius: 26px;
   background: rgba(242, 183, 5, 0.08);
   color: rgba(245, 247, 255, 0.82);
   text-align: center;
   cursor: pointer;
}

.metal-sub-upload i {
   color: var(--metal-sub-accent);
   font-size: 28px;
}

.metal-sub-upload input {
   display: none;
}

.metal-sub-privacy {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-top: 12px;
   color: rgba(245, 247, 255, 0.58);
   font-size: 12px;
}

.metal-sub-instructions {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 24px;
}

.metal-sub-instruction-card {
   padding: 28px;
   transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.metal-sub-instruction-card h2 {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 18px;
   font-size: 23px;
}

.metal-sub-instruction-card ul {
   display: grid;
   gap: 9px;
   margin: 18px 0 22px;
   padding: 0;
   list-style: none;
   color: rgba(245, 247, 255, 0.78);
}

.metal-sub-instruction-card li::before {
   content: "✓";
   margin-right: 8px;
   color: var(--metal-sub-accent);
   font-weight: 900;
}

.metal-sub-faq-layout {
   display: grid;
   grid-template-columns: minmax(0, 1.18fr) minmax(290px, 0.82fr);
   gap: 28px;
}

.metal-sub-faq-list {
   display: grid;
   gap: 14px;
   align-content: start;
   position: sticky;
   top: 112px;
   align-self: start;
}

.metal-sub-faq-item {
   overflow: hidden;
}

.metal-sub-faq-question {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   padding: 20px 22px;
   border: 0;
   background: transparent;
   color: #fff;
   font: inherit;
   font-weight: 800;
   text-align: left;
   cursor: pointer;
}

.metal-sub-faq-question i {
   color: var(--metal-sub-accent);
   transition: transform 0.25s ease;
}

.metal-sub-faq-item.is-open .metal-sub-faq-question i {
   transform: rotate(180deg);
}

.metal-sub-faq-answer {
   display: none;
   padding: 0 22px 20px;
   border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.metal-sub-faq-item.is-open .metal-sub-faq-answer {
   display: block;
}

.metal-sub-faq-form {
   padding: 26px;
   align-self: start;
}

.metal-sub-faq-form h3 {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 10px;
   font-size: 23px;
}

.metal-sub-faq-form p {
   margin: 0 0 22px;
   color: var(--metal-sub-muted);
   line-height: 1.6;
}

.metal-sub-faq-form input,
.metal-sub-faq-form textarea {
   margin-bottom: 14px;
}

.metal-sub-faq-form button {
   width: 100%;
   min-height: 48px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   border: 0;
   border-radius: 999px;
   background: var(--metal-sub-blue);
   color: #fff;
   font-weight: 800;
   cursor: pointer;
   transition: transform 0.2s ease, background-color 0.2s ease;
}

.metal-sub-faq-form button:hover {
   transform: translateY(-2px);
   background: var(--metal-sub-accent);
   color: #111726;
}

.metal-sub-works-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 20px;
}

.metal-sub-work-card {
   overflow: hidden;
   cursor: pointer;
   transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.metal-sub-work-card__image {
   min-height: 190px;
   display: grid;
   place-items: center;
   background: linear-gradient(145deg, rgba(26, 62, 111, 0.36), rgba(242, 183, 5, 0.08));
   background-position: center;
   background-size: cover;
   color: var(--metal-sub-accent);
   font-size: 48px;
}

.metal-sub-work-card__info {
   padding: 18px;
}

.metal-sub-work-card h3 {
   margin-bottom: 8px;
   font-size: 18px;
}

.metal-sub-work-card p {
   margin: 0;
   color: var(--metal-sub-muted);
   font-size: 14px;
   line-height: 1.55;
}

.metal-sub-center {
   display: flex;
   justify-content: center;
   margin-top: 28px;
}

.metal-sub-empty {
   padding: 24px;
   border: 1px dashed rgba(242, 183, 5, 0.35);
   border-radius: 24px;
   background: rgba(255, 255, 255, 0.05);
   color: var(--metal-sub-muted);
   text-align: center;
}

.metal-sub-final-seo__text + .metal-sub-final-seo__text {
   margin-top: 16px;
}

.metal-sub-manager-modal[hidden] {
   display: none !important;
}

.metal-sub-manager-modal {
   position: fixed;
   inset: 0;
   z-index: 9999;
   display: grid;
   place-items: center;
   padding: 20px;
   background: rgba(0, 0, 0, 0.64);
   backdrop-filter: blur(8px);
}

.metal-sub-manager-modal__dialog {
   width: min(560px, 100%);
   max-height: min(760px, 92vh);
   overflow: auto;
   position: relative;
   padding: 28px;
   border: 1px solid var(--metal-sub-border-strong);
   border-top: 5px solid var(--metal-sub-accent);
   border-radius: 32px;
   background: linear-gradient(180deg, rgba(48, 48, 48, 0.98), rgba(31, 31, 31, 0.99));
   color: var(--metal-sub-text);
   box-shadow: var(--metal-sub-shadow);
}

.metal-sub-manager-modal__close {
   position: absolute;
   top: 16px;
   right: 18px;
   width: 38px;
   height: 38px;
   border: 0;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.08);
   color: #fff;
   font-size: 28px;
   line-height: 1;
   cursor: pointer;
   transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.metal-sub-manager-modal__close:hover {
   background: var(--metal-sub-accent);
   color: #111726;
   transform: rotate(90deg);
}

.metal-sub-manager-modal h2 {
   margin: 0 44px 22px 0;
   color: #fff;
}

.metal-sub-manager-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 12px;
   margin-bottom: 20px;
}

.metal-sub-manager-card {
   display: grid;
   justify-items: center;
   gap: 5px;
   min-height: 104px;
   padding: 12px 8px;
   border: 1px solid var(--metal-sub-border);
   border-radius: 20px;
   background: rgba(255, 255, 255, 0.06);
   color: #fff;
   cursor: pointer;
   transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.metal-sub-manager-card strong {
   width: 42px;
   height: 42px;
   display: grid;
   place-items: center;
   justify-self: center;
   border-radius: 50%;
   background: var(--metal-sub-blue);
   color: #fff;
}

.metal-sub-manager-card span {
   font-weight: 800;
}

.metal-sub-manager-card em {
   color: var(--metal-sub-accent);
   font-style: normal;
   font-size: 12px;
}

.metal-sub-manager-card.is-selected,
.metal-sub-manager-card:hover:not(:disabled) {
   transform: translateY(-2px);
   border-color: rgba(242, 183, 5, 0.48);
   background: rgba(242, 183, 5, 0.1);
}

.metal-sub-manager-card.is-busy {
   opacity: 0.48;
   cursor: not-allowed;
}

.metal-sub-manager-form__submit {
   width: 100%;
   margin-top: 6px;
}

.metal-subcategory-page .popup-status,
.metal-sub-manager-modal .popup-status {
   min-height: 20px;
   margin-top: 12px;
   color: var(--metal-sub-muted);
   font-size: 13px;
}

.metal-subcategory-page .popup-status.is-error,
.metal-sub-manager-modal .popup-status.is-error,
.metal-subcategory-page .popup-status.error,
.metal-sub-manager-modal .popup-status.error {
   color: #ffb4b4;
}

.metal-subcategory-page .popup-status.is-success,
.metal-sub-manager-modal .popup-status.is-success {
   color: #b8f5ce;
}

.metal-manager-modal {
   position: fixed;
   inset: 0;
   z-index: 3000;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
   background: rgba(0, 0, 0, 0.72);
   backdrop-filter: blur(8px);
}

.metal-manager-modal[hidden] {
   display: none;
}

.metal-manager-modal__dialog {
   width: min(560px, 100%);
   max-height: min(760px, 92vh);
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
   position: relative;
   padding: 30px;
   border-radius: 32px;
   border: 1px solid var(--metal-border-strong);
   border-top: 5px solid var(--metal-accent);
   background: linear-gradient(180deg, rgba(48, 48, 48, 0.98), rgba(31, 31, 31, 0.99));
   color: var(--metal-text);
   box-shadow: var(--metal-shadow);
}

.metal-manager-modal__close {
   position: absolute;
   top: 16px;
   right: 18px;
   width: 40px;
   height: 40px;
   border: 0;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.08);
   color: #fff;
   font-size: 26px;
   cursor: pointer;
   transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.metal-manager-modal__close:hover {
   background: var(--metal-accent);
   color: #111726;
   transform: rotate(90deg);
}

.metal-manager-modal h2 {
   margin: 0 44px 20px 0;
   color: #fff;
}

.metal-manager-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 12px;
   margin-bottom: 18px;
}

.metal-manager-card {
   display: grid;
   justify-items: center;
   gap: 5px;
   min-height: 104px;
   padding: 14px 8px;
   border-radius: 20px;
   border: 1px solid var(--metal-border);
   background: rgba(255, 255, 255, 0.06);
   color: #fff;
   cursor: pointer;
   transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.metal-manager-card strong {
   width: 42px;
   height: 42px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   background: var(--metal-blue);
   font-size: 20px;
   color: #fff;
}

.metal-manager-card span {
   font-weight: 800;
}

.metal-manager-card em {
   color: var(--metal-accent);
   font-style: normal;
   font-size: 12px;
}

.metal-manager-card.is-selected,
.metal-manager-card:hover:not(:disabled) {
   transform: translateY(-2px);
   border-color: rgba(242, 183, 5, 0.55);
   background: rgba(242, 183, 5, 0.12);
}

.metal-manager-card.is-busy {
   opacity: 0.45;
   cursor: not-allowed;
}

.metal-manager-modal .metal-form__grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 16px;
}

.metal-manager-modal .metal-field {
   display: grid;
   gap: 8px;
   color: #fff;
   font-weight: 700;
}

.metal-manager-modal .metal-field--full {
   grid-column: 1 / -1;
   margin-top: 16px;
}

.metal-manager-modal .metal-field span {
   font-size: 14px;
}

.metal-manager-modal .metal-field input {
   width: 100%;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 22px;
   padding: 15px 18px;
   background: #1f1f1f;
   color: var(--metal-text);
   outline: none;
   transition: border-color 180ms ease, box-shadow 180ms ease;
}

.metal-manager-modal .metal-field input::placeholder {
   color: rgba(245, 247, 255, 0.5);
}

.metal-manager-modal .metal-field input:focus {
   border-color: rgba(242, 183, 5, 0.52);
   box-shadow: 0 0 0 3px rgba(242, 183, 5, 0.12);
}

.metal-manager-modal .metal-btn {
   min-height: 48px;
   border: 0;
   border-radius: 999px;
   padding: 0 22px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   font-weight: 800;
   cursor: pointer;
   transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
}

.metal-manager-modal .metal-btn:hover {
   transform: translateY(-2px);
}

.metal-manager-modal .metal-btn--accent {
   background: var(--metal-accent);
   color: #111726;
}

.metal-manager-modal .metal-btn--accent:hover {
   background: #ffd764;
   color: #111726;
}

.metal-manager-form__submit {
   width: 100%;
   margin-top: 18px;
}

.metal-manager-form .hp-field {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

@media (max-width: 1180px) {
   .metal-sub-projects,
   .metal-sub-works-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (max-width: 900px) {
   .metal-sub-hero,
   .metal-sub-faq-layout,
   .metal-sub-instructions {
      grid-template-columns: 1fr;
   }

   .metal-sub-faq-list {
      position: static;
      top: auto;
   }

   .metal-sub-hero__card {
      order: -1;
   }
}

@media (max-width: 680px) {
   .metal-subcategory-page {
      padding: 22px 14px 42px;
   }

   .metal-subcategory-page .metal-section,
   .metal-subcategory-page .metal-callback__card {
      border-radius: 24px;
   }

   .metal-sub-projects,
   .metal-sub-works-grid,
   .metal-sub-form-grid,
   .metal-subcategory-page .metal-form__grid,
   .metal-sub-manager-grid {
      grid-template-columns: 1fr;
   }

   .metal-sub-card-buttons,
   .metal-sub-form-actions,
   .metal-sub-actions {
      flex-direction: column;
   }

   .metal-sub-btn,
   .metal-sub-btn-sm,
   .metal-subcategory-page .metal-btn,
   .metal-subcategory-page .metal-upload {
      width: 100%;
   }
}

/* ===== Responsive heading scale ===== */
.metal-sub-hero h1,
.metal-sub-hero__subtitle,
.metal-sub-hero__card h2,
.metal-sub-section-title,
.metal-sub-project-card h3,
.metal-sub-form-title,
.metal-sub-instruction-card h2,
.metal-sub-faq-form h3,
.metal-sub-work-card h3,
.metal-sub-manager-modal h2 {
   letter-spacing: 0;
   overflow-wrap: anywhere;
}

.metal-sub-hero h1 {
   font-size: 54px;
}

.metal-sub-hero__subtitle {
   font-size: 22px;
}

.metal-sub-hero__card h2 {
   font-size: 20px;
}

.metal-sub-section-title {
   font-size: 31px;
}

.metal-sub-project-card h3 {
   font-size: 20px;
}

.metal-sub-form-title {
   font-size: 28px;
}

.metal-subcategory-page .metal-callback__card h2 {
   font-size: 31px;
}

.metal-sub-instruction-card h2,
.metal-sub-faq-form h3 {
   font-size: 21px;
}

.metal-sub-work-card h3 {
   font-size: 17px;
}

.metal-sub-manager-modal h2 {
   font-size: 26px;
}

@media (max-width: 900px) {
   .metal-sub-hero h1 {
      font-size: 42px;
   }

   .metal-sub-hero__subtitle {
      font-size: 20px;
   }

   .metal-subcategory-page .metal-callback__card h2 {
      font-size: 28px;
   }
}

@media (max-width: 680px) {
   .metal-sub-hero h1 {
      font-size: 36px;
   }

   .metal-sub-hero__subtitle {
      font-size: 17px;
   }

   .metal-sub-section-title,
   .metal-sub-form-title {
      font-size: 23px;
   }

   .metal-subcategory-page .metal-callback__card h2 {
      font-size: 24px;
   }

   .metal-sub-project-card h3,
   .metal-sub-instruction-card h2,
   .metal-sub-faq-form h3 {
      font-size: 20px;
   }
}

@media (max-width: 420px) {
   .metal-sub-hero h1 {
      font-size: 28px;
   }

   .metal-sub-section-title,
   .metal-sub-form-title {
      font-size: 22px;
   }

   .metal-subcategory-page .metal-callback__card h2 {
      font-size: 22px;
   }
}