/* September 13: changes from the narrated screen review. */
:root { --section-space: 64px; }
html { scroll-padding-top: 24px; }
.site-header { position: absolute; }
.hero { min-height: 100svh; max-height: none; }
.hero__inner { min-height: 100svh; padding-bottom: 100px; }
.hero__note { right: 5%; bottom: 70px; color: var(--text); font-size: 30px; line-height: .95; text-shadow: 0 2px 8px #000; transform: rotate(-5deg); }
.hero__lead { max-width: 550px; }
.scroll-cue { position: absolute; z-index: 5; bottom: 22px; left: calc(50% - 24px); display: grid; place-items: center; width: 48px; height: 48px; font-size: 34px; text-decoration: none; animation: float-down 3s ease-in-out infinite; }
@keyframes float-down { 0%,100% { transform: translateY(-5px); } 50% { transform: translateY(5px); } }
.back-to-top { position: fixed; z-index: 55; bottom: 24px; right: 24px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #f3efe759; border-radius: 50%; color: #f3efe7; background: #17130fa6; backdrop-filter: blur(8px); text-decoration: none; font-size: 24px; opacity: .7; }
.back-to-top:hover,.back-to-top:focus-visible { opacity: 1; }
.back-to-top[hidden] { display: none; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 14px; }
.mobile-header-contact { display: none; }
.header-phone { color: var(--text); font-size: 14px; font-weight: 600; text-decoration-color: rgba(243,239,231,.38); text-underline-offset: 5px; white-space: nowrap; }
.header-phone:hover,.header-phone:focus-visible { color: var(--amber); }
.brand-wordmark--image { display: block; width: auto; height: auto; line-height: 0; }
.brand-wordmark--image picture { display: block; }
.brand-logo { display: block; width: 100%; height: auto; object-fit: contain; }
.brand-logo--header { width: 174px; max-height: 58px; }
.header-telegram { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border: 1px solid rgba(231,186,128,.34); border-radius: 50%; transition: border-color 180ms var(--ease-ui), background 180ms var(--ease-ui); }
.header-telegram:hover,.header-telegram:focus-visible { border-color: var(--amber); background: rgba(231,186,128,.08); }
.header-telegram img { display: block; }
.mobile-telegram { gap: 10px; }
.section-heading { margin-bottom: 28px; }
.categories__stage { top: var(--categories-sticky-top, 24px); }
.category-card { background-image: url('../assets/workshop/workbench-five.png'); background-size: 500% auto; background-repeat: no-repeat; }
.category-card:nth-child(1) { background-position: 0% center; }
.category-card:nth-child(2) { background-position: 25% center; }
.category-card:nth-child(3) { background-position: 50% center; }
.category-card:nth-child(4) { background-position: 75% center; }
.category-card:nth-child(5) { background-position: 100% center; }
.category-card picture { display: none; }
.gallery__footer { grid-template-columns: auto 1fr; margin-top: 18px; }
.gallery__status { display: block; }
.brands { padding-block: 60px 28px; }
.brands .section-heading { grid-template-columns: 1fr; gap: 10px; }
.brands__hint { display: inline-block; max-width: 680px; margin: 16px 0 0 24px; color: var(--muted); font-size: 13px; vertical-align: top; line-height: 1.5; }
.process { padding-top: 16px; padding-bottom: 32px; }
.notebook { min-height: 0; max-height: none; container-type: inline-size; }
.notebook__paper { inset: 24% 20% 16% 21%; column-gap: 10%; font-family: 'Caveat', 'Segoe Print', cursive; }
.notebook__page:first-child { padding-left: 0; transform: perspective(1100px) rotateY(5deg) rotateZ(1deg) skewX(-5deg); transform-origin: right top; }
.notebook__page:nth-child(2) { transform: perspective(1100px) rotateY(-5deg) rotateZ(-1deg) skewX(4deg); transform-origin: left top; }
.notebook__kicker { margin: 0 0 1.8cqw; font: 700 3.1cqw/1 'Caveat', cursive; letter-spacing: 0; text-transform: none; color: #372a20; }
.notebook__page:first-child .notebook__kicker { text-align: center; }
.steps { gap: 4cqw; }
.steps li { grid-template-columns: 2.6cqw 1fr; gap: 1cqw; }
.steps li > span { width: 2.5cqw; height: 2.5cqw; font-size: 1.7cqw; }
.steps h3 { font: 700 2.6cqw/1.05 'Caveat', cursive; margin-bottom: .8cqw; }
.steps p { font: 400 2.05cqw/1.1 'Caveat', cursive; color: #49392c; }
.notebook__note { max-width: 46%; font-size: 2.05cqw; line-height: 1.12; bottom: 5%; right: 0; transform: rotate(-2deg) skewX(3deg); }
.request { padding-top: 28px; padding-bottom: 44px; }
.request .section-heading { gap: 10px; margin-bottom: 22px; }
.request-layout { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 22px; }
.request-form { padding: 24px 28px; }
.request-form__logo { display: block; width: 68px; height: 68px; object-fit: contain; margin: 0 0 14px auto; }
.form-block { margin-bottom: 16px; }
.form-block legend,.field > span { font-size: 14px; margin-bottom: 7px; }
.contact-row { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 14px; align-items: start; }
.contact-toggle { margin: 0; max-width: none; }
.contact-row .field { margin: 0; }
#contact-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.field { margin-bottom: 14px; }
.field input { min-height: 46px; font-size: 15px; }
.field textarea { min-height: 96px; height: 96px; font-size: 15px; }
.field-error:empty,.form-status:empty { display: none; }
.description-block { display: grid; grid-template-columns: minmax(0,1fr) 155px; gap: 12px; }
.photo-field { display: flex; flex-direction: column; gap: 7px; padding-top: 27px; margin: 0; align-items: stretch; }
.photo-field small { font-size: 11px; color: #706454; }
.file-button { min-height: 46px; padding: 8px; justify-content: center; font-size: 13px; }
.photo-previews { display: grid; grid-template-columns: repeat(5,1fr); width: 100%; height: 24px; gap: 6px; }
.photo-slot { position: relative; min-width: 0; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.photo-slot::before { content: ''; position: absolute; inset: 9px 0; border-radius: 3px; background: #c5b89f; transition: background 160ms; }
.photo-slot.is-filled::before { background: #826027; }
.photo-slot.is-filled:hover::before { background: #a34435; }
.photo-slot:disabled { cursor: default; }
.photo-slot:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.photo-field:focus-within .file-button { border-color: var(--ink); }
.brand-grid { grid-template-columns: repeat(5,1fr); }
.brand-card { border-bottom: 1px solid var(--line); }
.brand-card:nth-child(5n) { border-right: 0; }
.brand-card:nth-last-child(-n + 5) { border-bottom: 0; }
.brand-card img { max-width: 116px; }
.brand-type { height: 36px; display: grid; align-items: center; font-size: 28px; letter-spacing: .04em; }
.brand-type--small { font-size: 19px; }
.selection-chips,.selection-chips:empty { display: inline-flex; height: 20px; margin: 0 0 0 8px; gap: 6px; vertical-align: middle; max-width: 60%; }
.selection-chip { padding: 0 5px; min-height: 20px; height: 20px; font-size: 11px; white-space: nowrap; border: 0; gap: 2px; }
.selection-chip button { width: 18px; height: 18px; }
.more-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; height: auto; opacity: 1; overflow: visible; }
.submit-button { min-height: 46px; }
.data-note { margin: 10px 0 0; font-size: 11px; }
.request-aside { min-height: 0; }
.request-aside__photo img { object-position: center; }
.request-aside__note { font-size: 30px; right: 24px; bottom: 24px; line-height: .95; text-shadow: 0 2px 8px #000; }
.site-footer__inner { min-height: 0; padding-block: 28px; gap: 20px; }
.site-footer__hand { font-size: 27px; }
.brand-wordmark--footer { width: min(270px, 100%); }
.footer-telegram,.direct-contact--telegram { display: inline-flex !important; align-items: center; gap: 8px; }
.footer-telegram img,.direct-contact--telegram img { flex: 0 0 auto; }
.header-telegram,.mobile-header-telegram { border: 0; border-radius: 0; background: transparent; }
.header-telegram:hover,.header-telegram:focus-visible { border-color: transparent; background: transparent; }
.categories__runway.is-pinned .gallery__track { margin-left: max(var(--gutter), calc((100vw - var(--container)) / 2)); }
@media (min-width:768px) {
 .categories__runway:not(.is-pinned) .gallery__viewport { padding-left: max(calc(var(--gutter) * 2), 8vw); }
}
.direct-contacts { right: 24px; bottom: 20px; left: auto; width: max-content; max-width: calc(100% - 48px); padding: 0; border: 0; border-radius: 0; background: transparent; }
#direct-contact-links { justify-content: flex-end; }
.direct-contact--telegram { width: 32px; height: 32px; padding: 0 !important; border: 0; border-radius: 0; background: transparent; }
.direct-contacts a { padding-block: 2px; text-shadow: 0 2px 7px #000; }
@media (min-width:901px) {
 .request-form { position: relative; }
 .request-form__logo { position: absolute; z-index: 2; top: 50px; right: 28px; margin: 0; }
 .request-form .form-block { padding-right: 88px; margin-bottom: 12px; }
}
@media (max-width:900px) {
 .header-actions { display: none; }
 .site-header__inner { grid-template-columns: auto minmax(0,1fr) auto; column-gap: 12px; }
 .brand-wordmark--image picture { width: auto; height: auto; }
 .brand-logo--header { width: 150px; height: auto; object-fit: contain; transform: none; }
 .mobile-header-contact { display: flex; justify-self: end; min-width: 0; align-items: center; gap: 9px; }
 .mobile-header-telegram { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 0; border-radius: 0; background: transparent; }
 .mobile-header-phone { color: var(--text); font-size: 13px; font-weight: 700; white-space: nowrap; text-decoration-color: rgba(243,239,231,.35); text-underline-offset: 4px; }
 .mobile-menu { width: min(224px, calc(100vw - (var(--gutter) * 2))); margin-left: auto; }
 .mobile-menu.is-open { max-height: 170px; }
 .mobile-menu nav { padding: 8px; }
 .mobile-menu a:not(.button) { min-height: 38px; padding-inline: 10px; }
 .gallery__viewport { scroll-padding-inline: calc((100vw - min(42vw,330px)) / 2); }
 .category-card { scroll-snap-align: center; }
 .request-layout { grid-template-columns: minmax(0,1fr); gap: 16px; }
 .request-form { padding: 20px; }
 .contact-row { grid-template-columns: 190px minmax(0,1fr); gap: 8px; }
 .description-block { grid-template-columns: 1fr; gap: 0; position: relative; }
 .description-block > .field,.description-block > .photo-field { grid-area: 1 / 1; }
 .description-block textarea { min-height: 112px; height: 112px; padding-bottom: 42px; }
 .photo-field { z-index: 2; width: max-content; padding: 0; margin: 101px 10px 0 0; justify-self: end; align-self: start; align-items: flex-end; pointer-events: none; }
 .photo-field > * { pointer-events: auto; }
 .photo-field > small,.photo-previews { display: none !important; }
 .file-button { min-height: 32px; padding: 4px 9px; background: rgba(242,232,214,.94); }
 .file-button.has-files { color: #f3efe7; border-color: #315d3c; background: #3f7550; }
 .brands__hint { display: block; margin-left: 0; }
 .notebook { width: min(100%,495px); margin-inline: auto; aspect-ratio: auto; overflow: visible; color: var(--ink); background: var(--paper); border-radius: 4px; }
 .notebook__image { display: none; }
 .notebook__paper { position: relative; inset: auto; display: block; padding: 34px 28px 34px 48px; }
 .notebook__page:first-child,.notebook__page:nth-child(2) { padding-left: 0; transform: none; }
 .notebook__page + .notebook__page { margin-top: 24px; }
 .notebook__kicker { display: block; margin-bottom: 22px; font-size: 31px; }
 .steps { gap: 22px; }
 .steps li { grid-template-columns: 28px 1fr; gap: 10px; }
 .steps li > span { width: 27px; height: 27px; font-size: 20px; }
 .steps h3 { font-size: 26px; }
 .steps p { font-size: 20px; }
 .notebook__note { position: static; max-width: none; margin-top: 30px; font-size: 25px; }
 .notebook::before { position: absolute; z-index: 3; top: 14px; bottom: 14px; left: -12px; width: 34px; content: ""; opacity: .96; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='25' viewBox='0 0 34 25'%3E%3Cpath d='M2 12.5h19c7 0 7-10 0-10H10' fill='none' stroke='%2326221e' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M2 14.5h19c4.5 0 7-2.4 7.6-5.2' fill='none' stroke='%237d7367' stroke-width='1' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E") 0 0 / 34px 25px repeat-y; filter: drop-shadow(1px 1px 1px rgba(0,0,0,.35)); }
 .request-aside { min-height: 250px; }
 .direct-contacts { right: 16px; bottom: 16px; left: auto; width: max-content; max-width: calc(100% - 32px); padding: 0; border: 0; border-radius: 0; background: transparent; }
 #direct-contact-links { display: flex; align-items: center; gap: 12px; }
 .direct-contacts a { padding: 4px 0; }
 .direct-contact--telegram { width: 30px; height: 30px; justify-content: center; border: 0; border-radius: 0; background: transparent; }
 .direct-contact--phone { font-weight: 700; white-space: nowrap; }
 .site-footer__inner { justify-items: center; text-align: center; }
 .brand-wordmark--footer { margin-inline: auto; }
 .site-footer__meta { justify-self: center; align-items: center; }
}
@media (max-width:767px) {
 .brand-wordmark--image picture { width: 44px; height: 44px; }
 .brand-logo--header { width: 44px; height: 44px; object-fit: contain; transform: scale(1.65); }
 .site-header__inner { column-gap: 7px; padding-left: 10px; }
 .mobile-header-contact { gap: 6px; }
 .mobile-header-telegram { width: 30px; height: 30px; flex-basis: 30px; }
 .mobile-header-telegram img { width: 18px; height: 18px; }
 .mobile-header-phone { font-size: 12px; }
 .gallery__viewport { padding-inline: max(var(--gutter), calc((100vw - min(82vw,330px)) / 2)); scroll-padding-inline: calc((100vw - min(82vw,330px)) / 2); }
 html { scroll-padding-top: 16px; }
 .hero { min-height: 720px; }
 .hero__inner { min-height: 720px; padding-bottom: 270px; }
 .hero__note { display: block; bottom: 76px; right: 24px; font-size: 23px; }
 .hero__lead br { display: none; }
 .brands { padding-block: 44px 20px; }
 .notebook__paper { inset: auto; padding: 30px 20px 28px 42px; }
 .notebook__page:first-child,.notebook__page:nth-child(2) { transform: none; }
 .notebook__kicker { display: block; font-size: 31px; margin-bottom: 22px; }
 .notebook__page:nth-child(2) .notebook__kicker { display: none; }
 .steps { gap: 22px; }
 .steps li { grid-template-columns: 28px 1fr; gap: 10px; }
 .steps li > span { width: 27px; height: 27px; font-size: 20px; }
 .steps h3 { font-size: 26px; }
 .steps p { font-size: 23px; }
 .notebook__note { position: static; max-width: none; font-size: 25px; margin-top: 28px; }
 .request-layout { grid-template-columns: 1fr; }
 .request-form__logo { width: 62px; height: 62px; }
 .request .section-heading h2 { font-size: 28px; }
 .request .section-heading p { font-size: 14px; }
 .request-aside { min-height: 280px; }
 .contact-row { grid-template-columns: 160px minmax(0,1fr); }
 .contact-toggle button { min-height: 40px; font-size: 12px; }
 .field input,.field textarea { font-size: 16px; }
 .more-fields { gap: 10px; }
 .more-fields .field > span { font-size: 12px; }
 .selection-chips { max-width: 55%; }
 .selection-chip { max-width: 120px; overflow: hidden; }
 .site-footer__inner { padding-block: 28px 40px; align-items: center; }
 .back-to-top { bottom: 16px; right: 16px; }
 .brand-grid { grid-template-columns: repeat(2,1fr); }
 .brand-card { border-bottom: 1px solid var(--line) !important; border-right: 1px solid var(--line) !important; }
 .brand-card:nth-child(2n) { border-right: 0 !important; }
 .brand-card:last-child { grid-column: auto; }
 .brand-card:nth-last-child(-n + 2) { border-bottom: 0 !important; }
 .brand-type { font-size: 24px; }
 .brand-type--small { font-size: 17px; }
}
@media (prefers-reduced-motion:reduce) { .scroll-cue { animation: none; } }