/* ==========================================================================
   AMC Hungary - About page v1
   Loaded only on /rolunk. All page rules are scoped under .about-page.
   ========================================================================== */

.about-page {
    --about-container: 1320px;
    --about-container-px: clamp(20px, 4vw, 56px);
    --about-section-y: clamp(74px, 10vw, 150px);
    --about-section-tight: clamp(54px, 8vw, 104px);
    --about-ink-soft: rgba(26, 26, 27, 0.72);
    --about-ink-muted: rgba(26, 26, 27, 0.56);
    --about-gold-soft: rgba(201, 169, 97, 0.16);
    --about-gold-tint: rgba(201, 169, 97, 0.07);
    --about-ivory: #f6f2ea;
    --about-warm-dark: #11100e;
    --about-on-dark: rgba(250, 250, 247, 0.88);
    --about-on-dark-muted: rgba(250, 250, 247, 0.62);
    --about-shadow: 0 26px 70px rgba(14, 20, 18, 0.1);
    --about-shadow-hover: 0 34px 86px rgba(14, 20, 18, 0.16);
    --about-motion-fast: var(--amc-motion-fast, 240ms);
    --about-motion-medium: var(--amc-motion-medium, 480ms);
    --about-motion-slow: var(--amc-motion-slow, 720ms);
    --about-ease: var(--amc-ease-premium, cubic-bezier(0.22, 1, 0.36, 1));
    background: var(--color-pearl-white);
    color: var(--color-ink-black);
    overflow-x: clip;
}

body.about-body {
    overflow-x: clip;
}

html.about-root {
    overflow-x: clip;
}

.about-page *,
.about-page *::before,
.about-page *::after {
    box-sizing: border-box;
}

.about-page :is(h1, h2, h3, blockquote) {
    hyphens: none;
    overflow-wrap: normal;
    text-wrap: balance;
}

.about-page p {
    text-wrap: pretty;
}

.about-page img {
    display: block;
    max-width: 100%;
    height: auto;
}

.about-page a,
.about-page button {
    -webkit-tap-highlight-color: transparent;
}

.about-page a:focus-visible,
.about-page button:focus-visible {
    outline: 2px solid var(--color-champagne-gold);
    outline-offset: 4px;
}

.about-container {
    width: min(100% - (var(--about-container-px) * 2), var(--about-container));
    margin-inline: auto;
}

.about-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.about-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 22px;
    color: var(--color-deep-gold);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    line-height: 1.35;
    text-transform: uppercase;
}

.about-eyebrow:not(.about-eyebrow-center)::before {
    content: "";
    width: 58px;
    height: 1px;
    background: var(--color-champagne-gold);
    flex: 0 0 auto;
}

.about-eyebrow-center {
    justify-content: center;
}

/* Single 60px champagne hairline ABOVE the eyebrow — matches the homepage
   .home-hairline pattern. Used for centered eyebrows where flanking lines
   are removed. The companion <span class="about-hairline"> sits in the
   markup directly before the .about-eyebrow.about-eyebrow-center element. */
.about-hairline {
    display: block;
    width: 60px;
    height: 1px;
    margin: 0 auto 22px;
    background: var(--color-champagne-gold);
}

.about-eyebrow-dark {
    color: var(--color-champagne-gold);
}

.about-icon {
    width: 42px;
    height: 42px;
    color: var(--color-deep-gold);
    flex: 0 0 auto;
}

.about-button,
.about-link-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    text-decoration: none;
    transition:
        background-color var(--about-motion-fast) var(--about-ease),
        border-color var(--about-motion-fast) var(--about-ease),
        color var(--about-motion-fast) var(--about-ease),
        transform var(--about-motion-fast) var(--about-ease),
        box-shadow var(--about-motion-fast) var(--about-ease);
}

.about-button {
    padding: 0 26px;
    border: 1px solid transparent;
    border-radius: 0;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.about-button-primary {
    background: var(--color-premium-black);
    color: var(--color-soft-white);
}

.about-button-primary:hover {
    background: var(--color-deep-gold);
    transform: translateY(-1px);
}

.about-button-secondary {
    border-color: rgba(26, 26, 27, 0.22);
    color: var(--color-ink-black);
    background: rgba(255, 255, 255, 0.55);
}

.about-button-secondary:hover {
    border-color: var(--color-champagne-gold);
    color: var(--color-deep-gold);
    transform: translateY(-1px);
}

.about-link-arrow {
    gap: 8px;
    color: var(--color-ink-black);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.about-link-arrow span {
    transition: transform var(--about-motion-fast) var(--about-ease);
}

.about-link-arrow:hover {
    color: var(--color-deep-gold);
}

.about-link-arrow:hover span {
    transform: translateX(4px);
}

.about-link-arrow-dark {
    color: var(--color-soft-white);
}

.about-link-arrow-dark:hover {
    color: var(--color-champagne-gold);
}

.about-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    align-items: center;
    margin-top: 34px;
}

.about-actions-center {
    justify-content: center;
}

.about-page.is-enhanced .about-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 820ms var(--about-ease),
        transform 820ms var(--about-ease);
}

.about-page.is-enhanced .about-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Section 1 */
.about-hero {
    padding: clamp(112px, 12vw, 176px) var(--about-container-px) clamp(76px, 9vw, 126px);
    background: var(--about-ivory);
}

.about-hero-grid {
    width: min(100%, var(--about-container));
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 0.96fr) minmax(380px, 1.04fr);
    gap: clamp(34px, 6vw, 86px);
    align-items: center;
}

.about-hero-title {
    max-width: 760px;
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(2.7rem, 5vw, 5.25rem);
    font-weight: 400;
    line-height: 1.03;
    letter-spacing: -0.01em;
}

.about-hero-lead {
    max-width: 670px;
    margin: 30px 0 0;
    color: var(--about-ink-soft);
    font-size: clamp(1.03rem, 1.35vw, 1.24rem);
    line-height: 1.72;
}

.about-hero-media {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 10;
    box-shadow: var(--about-shadow);
    overflow: hidden;
    isolation: isolate;
}

.about-hero-media::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(250, 250, 247, 0.48);
    z-index: 2;
    pointer-events: none;
}

.about-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 860ms var(--about-ease);
}

.about-hero-media:hover img {
    transform: scale(1.025);
}

/* Section 2 */
.about-philosophy {
    padding: var(--about-section-tight) var(--about-container-px);
    background: var(--about-ivory);
}

.about-philosophy-inner {
    width: min(100%, 960px);
    margin-inline: auto;
    text-align: center;
}

.about-philosophy blockquote {
    position: relative;
    margin: 0;
    color: var(--color-ink-black);
    font-family: var(--font-serif);
    font-size: clamp(2.1rem, 4.8vw, 4.6rem);
    font-weight: 400;
    line-height: 1.08;
}

.about-philosophy blockquote::after {
    content: "";
    display: block;
    width: min(190px, 34vw);
    height: 1px;
    margin: 30px auto 0;
    background: var(--color-champagne-gold);
    opacity: 0.45;
}

.about-philosophy p:last-child {
    max-width: 650px;
    margin: 28px auto 0;
    color: var(--about-ink-soft);
    font-size: clamp(1rem, 1.25vw, 1.14rem);
    line-height: 1.7;
}

/* Section 3 */
.about-identity {
    padding: var(--about-section-y) 0;
}

.about-identity-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
    gap: clamp(44px, 7vw, 96px);
    align-items: center;
}

.about-editorial-copy h2,
.about-section-header h2,
.about-system-use-copy h2,
.about-advisory-copy h2,
.about-values-copy h2,
.about-faq-header h2 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(2.05rem, 3.7vw, 3.95rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.01em;
}

.about-editorial-copy p,
.about-section-header p,
.about-system-use-copy p,
.about-advisory-copy p,
.about-values-copy p {
    max-width: 720px;
    margin: 28px 0 0;
    color: var(--about-ink-soft);
    font-size: 1rem;
    line-height: 1.74;
}

.about-trust-board {
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px, 1.2fr) minmax(280px, 0.8fr);
    column-gap: 0;
    row-gap: 22px;
    align-items: center;
    overflow: visible;
}

.about-trust-image {
    align-self: stretch;
    margin: 0;
    background: #10100f;
    overflow: hidden;
    box-shadow: var(--about-shadow);
}

.about-trust-image img {
    width: 100%;
    height: 100%;
    min-height: 520px;
    object-fit: contain;
}

.about-trust-stack {
    display: grid;
    gap: 14px;
    margin-block: 38px;
    margin-left: clamp(-100px, -6vw, -64px);
    margin-right: clamp(-40px, -2.4vw, -16px);
    position: relative;
    z-index: 3;
}

/* Solid floating cards on top of dark image — override the shared
   semi-transparent background just for trust cards in this overlap layout. */
.about-trust-card {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(1.2) blur(2px);
    -webkit-backdrop-filter: saturate(1.2) blur(2px);
}

.about-trust-card,
.about-tech-card,
.about-support-cards article,
.about-value-tiles article {
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(201, 169, 97, 0.22);
    box-shadow: 0 16px 44px rgba(14, 20, 18, 0.06);
    transition:
        transform var(--about-motion-medium) var(--about-ease),
        box-shadow var(--about-motion-medium) var(--about-ease),
        border-color var(--about-motion-medium) var(--about-ease);
}

.about-trust-card:hover,
.about-tech-card:hover,
.about-support-cards article:hover,
.about-value-tiles article:hover {
    transform: translateY(-3px);
    border-color: rgba(201, 169, 97, 0.5);
    box-shadow: var(--about-shadow-hover);
}

.about-trust-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 16px;
    padding: 24px;
}

.about-trust-card h3,
.about-tech-card h3,
.about-support-cards h3,
.about-value-tiles h3,
.about-component-list h3 {
    margin: 0;
    color: var(--color-ink-black);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.about-trust-card p,
.about-tech-card p,
.about-support-cards p,
.about-value-tiles p,
.about-component-list p {
    margin: 7px 0 0;
    color: var(--about-ink-muted);
    font-size: 0.93rem;
    line-height: 1.6;
}

.about-trust-card .about-icon {
    grid-row: span 2;
}

/* Section 4 */
.about-technology {
    padding: var(--about-section-y) 0;
    background: linear-gradient(180deg, var(--about-ivory) 0%, var(--color-pearl-white) 100%);
}

.about-section-header {
    max-width: 910px;
}

.about-section-header p {
    font-size: 1.08rem;
}

/* ==========================================================================
   Section 4 — Full-bleed dark technology editorial moment.
   Centered editorial header → six static component cards (3×2 desktop /
   2×3 tablet / 1×6 mobile) → closing chord ("HAT KOMPONENS · EGY RENDSZER")
   → four outcome cards. All descriptions are visible without any user
   interaction; the previous hover-only SVG diagram and its sequence
   animation have been removed.
   ========================================================================== */

.about-technology {
    position: relative;
    padding: 0;
}

.about-technology-dark {
    background: #1A1410;
    color: var(--about-on-dark);
    overflow: hidden;
}

.about-technology-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center top, rgba(201, 169, 97, 0.06) 0%, transparent 65%);
    pointer-events: none;
}

.about-technology-inner {
    position: relative;
    width: min(100%, var(--about-container));
    margin-inline: auto;
    padding: clamp(74px, 10vw, 150px) var(--about-container-px);
}

/* Centered editorial header */
.about-technology-header {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.about-technology-hairline {
    display: block;
    width: 60px;
    height: 1px;
    margin: 0 auto 22px;
    background: var(--color-champagne-gold);
    transform-origin: center;
}

.about-technology-eyebrow {
    margin: 0 0 22px;
    color: var(--color-champagne-gold);
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    line-height: 1.35;
    text-transform: uppercase;
}

.about-technology-header h2 {
    margin: 0 0 26px;
    color: #FAF7F2;
    font-family: var(--font-serif);
    font-size: clamp(1.95rem, 3vw, 3.2rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.about-technology-lead {
    max-width: 56ch;
    margin: 0 auto;
    color: var(--about-on-dark);
    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.15vw, 1.08rem);
    line-height: 1.7;
}

/* Component grid — six static cards (3×2 desktop / 2×3 tablet / 1×6 mobile).
   Replaces the previous interactive hotspot diagram. Every description is
   visible on every viewport without hover, tap, or any interaction. */
.about-components-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 32px);
    margin-top: clamp(56px, 7vw, 96px);
}

.about-component-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(28px, 3vw, 40px) clamp(22px, 2.6vw, 32px);
    background: rgba(250, 250, 247, 0.03);
    border: 1px solid rgba(201, 169, 97, 0.18);
    text-align: center;
    transition:
        background-color var(--about-motion-medium) var(--about-ease),
        border-color var(--about-motion-medium) var(--about-ease),
        transform var(--about-motion-medium) var(--about-ease);
}

@media (hover: hover) and (pointer: fine) {
    .about-component-card:hover {
        background: rgba(250, 250, 247, 0.05);
        border-color: rgba(201, 169, 97, 0.4);
        transform: translateY(-2px);
    }
}

.about-component-card-number {
    color: var(--color-champagne-gold);
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    line-height: 1.2;
    margin: 0 0 22px;
}

.about-component-card-icon {
    display: block;
    color: var(--color-champagne-gold);
    margin: 0 0 26px;
}

.about-component-card-icon .about-icon {
    width: clamp(48px, 5vw, 60px);
    height: clamp(48px, 5vw, 60px);
    color: inherit;
}

.about-component-card-name {
    margin: 0 0 8px;
    color: #FAF7F2;
    font-family: var(--font-serif);
    font-size: clamp(1.25rem, 1.6vw, 1.5rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.005em;
}

.about-component-card-subhead {
    margin: 0 0 14px;
    max-width: 32ch;
    color: var(--color-champagne-gold);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.4;
}

.about-component-card-desc {
    margin: 0;
    max-width: 34ch;
    color: var(--about-on-dark);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.65;
}

/* Closing chord — gold hairline + champagne eyebrow + serif kicker.
   Editorial transition between the six-component grid and the four-card
   outcome row that follows. Reuses .about-hairline + .about-eyebrow tokens
   already defined above for visual consistency with the philosophy block. */
.about-components-closing {
    margin: clamp(48px, 6vw, 80px) auto 0;
    max-width: 720px;
    text-align: center;
}

.about-components-closing-text {
    margin: 6px 0 0;
    color: var(--about-on-dark);
    font-family: var(--font-serif);
    font-size: clamp(1.15rem, 1.7vw, 1.45rem);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.005em;
}

@media (max-width: 1023px) {
    .about-components-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .about-components-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-component-card {
        transition: none;
    }
}

/* Section 3 — Trust card icons (PNG) — kept here for backward-compat */
.about-trust-icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
    grid-row: span 2;
    align-self: center;
}

/* Dark feature cards — closing chord of the technology section */
.about-tech-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 22px);
    margin-top: clamp(72px, 8vw, 110px);
    align-items: stretch;
}

.about-tech-cards-dark .about-tech-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(28px, 3vw, 38px) clamp(22px, 2.5vw, 28px);
    background: rgba(250, 250, 247, 0.03);
    border: 1px solid rgba(201, 169, 97, 0.18);
    text-align: center;
    transition:
        background-color var(--about-motion-medium) var(--about-ease),
        border-color var(--about-motion-medium) var(--about-ease),
        transform var(--about-motion-medium) var(--about-ease);
}

.about-tech-cards-dark .about-tech-card:hover {
    background: rgba(250, 250, 247, 0.05);
    border-color: rgba(201, 169, 97, 0.4);
    transform: translateY(-2px);
}

.about-tech-cards-dark .about-tech-card h3 {
    margin: 0 0 12px;
    color: #FAF7F2;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.25;
}

.about-tech-cards-dark .about-tech-card p {
    margin: 0;
    color: var(--about-on-dark);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 32ch;
}

.about-tech-icon {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin: 0 0 22px;
}

/* Section 5 */
.about-system-use {
    padding: var(--about-section-y) 0;
    background:
        linear-gradient(135deg, rgba(17, 16, 14, 0.98), rgba(28, 27, 24, 0.98)),
        var(--about-warm-dark);
    color: var(--color-soft-white);
}

.about-system-use-grid {
    display: grid;
    grid-template-columns: minmax(360px, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(34px, 6vw, 84px);
    align-items: start;
}

.about-system-use-media {
    position: sticky;
    top: clamp(80px, 8vw, 120px);
    align-self: start;
    margin: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.28);
}

.about-system-use-media::after {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(201, 169, 97, 0.38);
    pointer-events: none;
}

.about-system-use-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-system-use-copy h2 {
    color: var(--color-soft-white);
    font-size: clamp(1.85rem, 2.8vw, 3rem);
    text-wrap: balance;
}

.about-system-use-copy p {
    color: var(--about-on-dark);
}

/* Accordion — product components */
.about-component-list {
    display: grid;
    gap: 6px;
    margin: 34px 0 28px;
    border-top: 1px solid rgba(201, 169, 97, 0.16);
}

.about-component-item {
    border-bottom: 1px solid rgba(201, 169, 97, 0.16);
}

.about-component-toggle {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    width: 100%;
    padding: 18px 6px;
    background: transparent;
    border: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background-color var(--about-motion-fast) var(--about-ease);
}

.about-component-toggle:hover {
    background: rgba(250, 250, 247, 0.04);
}

.about-component-toggle:focus-visible {
    outline: 2px solid var(--color-champagne-gold);
    outline-offset: 2px;
}

.about-component-toggle img {
    width: 74px;
    height: 74px;
    object-fit: contain;
    background: transparent;
}

.about-component-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.about-component-name {
    color: var(--color-soft-white);
    font-family: var(--font-serif);
    font-size: 1.18rem;
    font-weight: 400;
    line-height: 1.2;
}

.about-component-teaser {
    color: var(--about-on-dark-muted);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.5;
}

.about-component-chevron {
    width: 14px;
    height: 14px;
    border-right: 1.5px solid var(--color-champagne-gold);
    border-bottom: 1.5px solid var(--color-champagne-gold);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 420ms var(--about-ease);
    margin-right: 6px;
}

.about-component-item.is-open .about-component-chevron {
    transform: rotate(225deg) translate(-2px, -2px);
}

.about-component-detail {
    overflow: hidden;
    max-height: 0;
    transition: max-height 420ms var(--about-ease);
}

.about-component-item.is-open .about-component-detail {
    max-height: 600px;
}

.about-component-detail p {
    margin: 0;
    padding: 4px 6px 22px;
    color: var(--about-on-dark);
    font-family: var(--font-sans);
    font-size: 0.98rem;
    line-height: 1.7;
    max-width: 64ch;
}

/* Section 6 */
.about-advisory {
    padding: var(--about-section-y) 0;
}

.about-advisory-grid {
    display: grid;
    grid-template-columns: minmax(350px, 0.88fr) minmax(0, 1.12fr);
    gap: clamp(38px, 7vw, 98px);
    align-items: center;
}

.about-advisory-media {
    position: relative;
    margin: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    box-shadow: var(--about-shadow);
}

.about-advisory-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-support-icon {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: contain;
    margin-bottom: 18px;
}

.about-support-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 34px 0 28px;
}

.about-support-cards article {
    padding: 22px;
}

.about-support-cards .about-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 18px;
}

/* Section 7 */
.about-values {
    padding: var(--about-section-y) 0;
    background: var(--about-ivory);
}

.about-values-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.62fr);
    gap: clamp(30px, 5vw, 64px);
    align-items: start;
}

.about-values-copy {
    max-width: 760px;
}

.about-values-media {
    grid-row: span 2;
    position: sticky;
    top: clamp(80px, 8vw, 120px);
    align-self: start;
    margin: 0;
    overflow: hidden;
    box-shadow: var(--about-shadow);
}

.about-value-icon {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-bottom: 20px;
}

.about-values-media img {
    width: 100%;
    min-height: 560px;
    object-fit: cover;
}

.about-value-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.about-value-tiles article {
    min-height: 230px;
    padding: 26px;
}

.about-value-tiles .about-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 20px;
}

/* Section 8 */
.about-faq {
    padding: var(--about-section-y) 0;
    background: var(--color-pearl-white);
}

.about-faq-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.42fr) minmax(0, 0.78fr);
    gap: clamp(34px, 6vw, 82px);
    align-items: start;
}

.about-faq-header {
    position: sticky;
    top: 108px;
}

.about-faq-header h2 {
    font-size: clamp(1.85rem, 2.8vw, 3rem);
    text-wrap: balance;
}

.about-faq-list {
    border-top: 1px solid rgba(26, 26, 27, 0.12);
}

.about-faq-item {
    border-bottom: 1px solid rgba(26, 26, 27, 0.12);
}

.about-faq-item h3 {
    margin: 0;
}

.about-faq-question {
    width: 100%;
    padding: 27px 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 22px;
    align-items: center;
    border: 0;
    background: transparent;
    color: var(--color-ink-black);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: clamp(1.02rem, 1.4vw, 1.18rem);
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
}

.about-faq-mark {
    position: relative;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(201, 169, 97, 0.42);
    border-radius: 50%;
}

.about-faq-mark::before,
.about-faq-mark::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: 50%;
    height: 1px;
    background: var(--color-deep-gold);
    transform: translateY(-50%);
    transition: transform var(--about-motion-fast) var(--about-ease);
}

.about-faq-mark::after {
    transform: translateY(-50%) rotate(90deg);
}

.about-faq-question[aria-expanded="true"] .about-faq-mark::after {
    transform: translateY(-50%) rotate(0deg);
}

.about-faq-panel {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 260ms var(--about-ease);
}

.about-page.is-enhanced .about-faq-panel {
    grid-template-rows: 0fr;
}

.about-page.is-enhanced .about-faq-item.is-open .about-faq-panel {
    grid-template-rows: 1fr;
}

.about-faq-panel > div {
    overflow: hidden;
}

.about-faq-panel p {
    max-width: 720px;
    margin: 0;
    padding: 0 58px 28px 0;
    color: var(--about-ink-soft);
    font-size: 0.98rem;
    line-height: 1.72;
}

/* Section 9 */
.about-closing {
    padding: var(--about-section-y) var(--about-container-px);
    background:
        linear-gradient(180deg, rgba(246, 242, 234, 0.78), rgba(250, 250, 247, 1));
    text-align: center;
}

.about-closing-inner {
    width: min(100%, 980px);
    margin-inline: auto;
}

.about-closing-media {
    width: min(180px, 46vw);
    aspect-ratio: 1 / 1;
    margin: 0 auto 34px;
    overflow: hidden;
    border: 1px solid rgba(201, 169, 97, 0.28);
    border-radius: 50%;
    box-shadow: 0 18px 46px rgba(14, 20, 18, 0.1);
}

.about-closing-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.about-closing-label {
    margin: 0 0 18px;
    color: var(--color-deep-gold);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.about-closing blockquote {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(2.4rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 1.05;
}

.about-closing blockquote::after {
    content: "";
    display: block;
    width: min(210px, 42vw);
    height: 1px;
    margin: 32px auto 0;
    background: var(--color-champagne-gold);
}

.about-closing-inner > p:not(.about-closing-label) {
    max-width: 630px;
    margin: 28px auto 0;
    color: var(--about-ink-soft);
    font-size: 1.05rem;
    line-height: 1.7;
}

@media (min-width: 1440px) {
    .about-hero-grid,
    .about-container {
        --about-container: 1380px;
    }
}

@media (max-width: 1180px) {
    .about-hero-grid,
    .about-identity-grid,
    .about-tech-grid,
    .about-system-use-grid,
    .about-advisory-grid,
    .about-values-grid,
    .about-faq-grid {
        gap: clamp(30px, 5vw, 58px);
    }

    .about-tech-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-support-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .about-hero {
        background: var(--color-pearl-white);
    }

    .about-hero-grid,
    .about-identity-grid,
    .about-tech-grid,
    .about-system-use-grid,
    .about-advisory-grid,
    .about-values-grid,
    .about-faq-grid {
        grid-template-columns: 1fr;
    }

    .about-hero-media {
        order: -1;
    }

    .about-trust-board {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    }

    .about-trust-stack {
        margin-left: -50px;
        margin-right: -20px;
    }

    .about-values-media img {
        min-height: 420px;
    }

    .about-values-media {
        grid-row: auto;
        position: static;
        top: auto;
    }

    .about-system-use-media {
        position: static;
        top: auto;
    }

    .about-faq-header {
        position: static;
    }
}

@media (max-width: 820px) {
    .about-trust-board {
        grid-template-columns: 1fr;
    }

    .about-trust-image img {
        min-height: 420px;
    }

    .about-trust-stack {
        margin: 0;
    }

    .about-value-tiles {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .about-page {
        --about-container-px: 20px;
    }

    .about-hero {
        padding-top: 98px;
    }

    .about-hero-title {
        font-size: clamp(2.35rem, 12vw, 3.4rem);
    }

    .about-hero-media,
    .about-system-use-media,
    .about-advisory-media {
        min-height: 0;
    }

    .about-hero-media img,
    .about-advisory-media img {
        min-height: 310px;
    }

    .about-eyebrow {
        gap: 10px;
        font-size: 0.68rem;
        letter-spacing: 0.16em;
    }

    .about-eyebrow:not(.about-eyebrow-center)::before {
        width: 34px;
    }

    .about-hairline {
        width: 40px;
    }

    .about-actions,
    .about-actions-center {
        align-items: stretch;
        flex-direction: column;
    }

    .about-button,
    .about-link-arrow {
        width: 100%;
    }

    .about-philosophy blockquote,
    .about-closing blockquote {
        font-size: clamp(2rem, 12vw, 3.2rem);
    }

    .about-trust-card {
        grid-template-columns: 1fr;
    }

    .about-tech-cards {
        grid-template-columns: 1fr;
    }

    .about-component-list article {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .about-component-list img {
        width: 64px;
        height: 64px;
    }

    .about-faq-question {
        grid-template-columns: minmax(0, 1fr) 30px;
        padding: 22px 0;
    }

    .about-faq-mark {
        width: 30px;
        height: 30px;
    }

    .about-faq-panel p {
        padding-right: 0;
    }
}

@media (max-width: 420px) {
    .about-page {
        --about-container-px: 18px;
    }

    .about-button {
        padding-inline: 18px;
        letter-spacing: 0.12em;
    }

    .about-tech-card,
    .about-support-cards article,
    .about-value-tiles article {
        padding: 22px;
    }

    .about-hero-media figcaption {
        left: 0;
        right: 0;
        text-align: center;
    }
}

@media (max-width: 767px) {
    .about-hero-copy {
        text-align: center;
    }

    .about-hero-copy .about-eyebrow {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-page *,
    .about-page *::before,
    .about-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .about-page.is-enhanced .about-reveal,
    .about-page.is-enhanced .about-reveal.is-visible {
        opacity: 1;
        transform: none;
    }

    .about-component-detail,
    .about-component-chevron {
        transition: none !important;
    }
}

/* Tech-cards responsive adjustments */
@media (max-width: 820px) {
    .about-tech-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .about-tech-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .about-component-toggle {
        grid-template-columns: 56px minmax(0, 1fr) auto;
        gap: 14px;
        padding: 16px 4px;
    }

    .about-component-toggle img {
        width: 56px;
        height: 56px;
    }

    .about-component-name {
        font-size: 1.05rem;
    }
}

/* ==========================================================================
   Mobile + tablet center-alignment pass (≤1023px)
   --------------------------------------------------------------------------
   Editorial copy blocks in stacked layouts (Identity / System-use /
   Advisory / Values) read better centered when the supporting media
   sits above or below. Trust cards, support cards, and value tiles in
   icon+text card patterns center their icon + heading + body. The FAQ
   section header centers above the (left-aligned) accordion list.
   Accordion rows themselves (Components, FAQ questions, FAQ answers)
   stay left-aligned — paragraph reading needs the left edge.
   Desktop (≥1024px) is untouched.
   ========================================================================== */
@media (max-width: 1023px) {
    .about-editorial-copy,
    .about-system-use-copy,
    .about-advisory-copy,
    .about-values-copy {
        text-align: center;
    }

    .about-editorial-copy .about-eyebrow:not(.about-eyebrow-center),
    .about-system-use-copy .about-eyebrow:not(.about-eyebrow-center),
    .about-advisory-copy .about-eyebrow:not(.about-eyebrow-center),
    .about-values-copy .about-eyebrow:not(.about-eyebrow-center) {
        justify-content: center;
    }

    .about-editorial-copy > p:not(.about-eyebrow),
    .about-system-use-copy > p:not(.about-eyebrow),
    .about-advisory-copy > p:not(.about-eyebrow),
    .about-values-copy > p:not(.about-eyebrow) {
        max-width: 56ch;
        margin-inline: auto;
    }

    .about-editorial-copy .about-link-arrow,
    .about-system-use-copy .about-link-arrow,
    .about-advisory-copy .about-link-arrow {
        margin-inline: auto;
    }

    /* Trust + support + value cards — icon-on-top + centered text */
    .about-trust-card,
    .about-support-cards article,
    .about-value-tiles article {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .about-trust-card .about-icon,
    .about-trust-card .about-trust-icon,
    .about-support-cards .about-support-icon,
    .about-value-tiles .about-value-icon {
        margin: 0 auto;
    }

    .about-trust-card p,
    .about-support-cards p,
    .about-value-tiles p {
        max-width: 36ch;
        margin-inline: auto;
    }

    /* FAQ section header centers above the (still left-aligned) accordion list */
    .about-faq-header {
        text-align: center;
    }

    .about-faq-header .about-eyebrow:not(.about-eyebrow-center) {
        justify-content: center;
    }
}

/* ==========================================================================
   Section 4 — A TECHNOLÓGIA — kinematikus főzési ciklus
   --------------------------------------------------------------------------
   3-act build sequence: Act 1 reveal (eyebrow + word-split heading + lead),
   Act 2 six-beat sequential SVG component reveal (pot, lid, audiotherm,
   secuquick, navigenio, speech bubbles), Act 3 closing breathing animations.
   Desktop (≥1024px) = ScrollTrigger pinned with scrub.
   Tablet/mobile (<1024px) = button-triggered in place.
   Static fallback (no JS / prefers-reduced-motion) shows assembled end state.
   ========================================================================== */

.amc-tech-cinema {
    position: relative;
    width: 100%;
    margin-top: clamp(56px, 7vw, 96px);
}

.amc-tech-cinema-stage {
    display: grid;
    grid-template-rows: auto auto auto;
    gap: clamp(28px, 3.4vw, 52px);
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    align-items: center;
}

.amc-tech-cinema-header {
    text-align: center;
    max-width: 760px;
    margin-inline: auto;
}

.amc-tech-cinema-heading {
    font-kerning: none;
    text-rendering: optimizeSpeed;
    text-wrap: balance;
}

/* Word-split spans (added by JS at runtime) — initial state visible (static
   fallback). JS sets autoAlpha 0 + translateY before animating in. */
.amc-tech-word {
    display: inline-block;
    will-change: auto;
}

.amc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Build region: illustration + cards */
.amc-tech-cinema-build {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
}

.amc-tech-cinema-illustration {
    position: relative;
    aspect-ratio: 4 / 3;
    width: 100%;
    max-height: clamp(340px, 50vh, 500px);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.amc-tech-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* SVG group default state: all visible (static fallback). The JS-controlled
   reveal hides via gsap.set(autoAlpha:0) only when GSAP timeline is active. */

/* Standard lid is intermediate-only (Beat 2 → Beat 4). Hidden by default in
   static state; only the desktop pinned cinema unhides via the body class. */
.amc-tech-svg #amc-fedo {
    display: none;
}

.amc-tech-cinema--desktop .amc-tech-svg #amc-fedo {
    display: block;
}

/* Subtle ambient effects in static state (no animation). The desktop and
   mobile timelines can crank these up via gsap.to() during play. */
.amc-tech-svg #amc-audiotherm-pulse-ring {
    opacity: 0.42;
}

.amc-tech-svg #amc-underglow {
    opacity: 0.5;
}

.amc-tech-svg #amc-rim-flash {
    opacity: 0;
}

/* ==========================================================================
   SPOTLIGHT pattern — single active card + 6-stepper.
   Replaces the previous 2x3 card grid that exceeded a single viewport.
   The active card stays anchored next to the illustration; only its inner
   content swaps between beats (cross-fade). The stepper at the bottom shows
   position in the 6-beat sequence.
   Fixed min-height on the active card prevents layout shift on swap (CLS=0).
   ========================================================================== */

.amc-tech-cinema-spotlight {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.amc-tech-active-card {
    width: 100%;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(20px, 2vw, 28px);
    padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 36px);
    background: rgba(250, 250, 247, 0.035);
    border: 1px solid rgba(201, 169, 97, 0.22);
    border-left: 2px solid var(--color-champagne-gold);
}

.amc-tech-active-card-content {
    flex: 1;
    min-height: 0;
    /* Cross-fade target — JS animates autoAlpha + y on this element */
}

.amc-tech-active-card-content .amc-tech-card-number {
    display: block;
    margin: 0 0 16px;
    color: var(--color-champagne-gold);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    line-height: 1;
}

.amc-tech-active-card-content .amc-tech-card-name {
    margin: 0 0 10px;
    color: #FAF7F2;
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2vw, 1.95rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.005em;
}

.amc-tech-active-card-content .amc-tech-card-subhead {
    margin: 0 0 18px;
    color: var(--color-champagne-gold);
    font-family: var(--font-sans);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.4;
}

.amc-tech-active-card-content .amc-tech-card-desc {
    margin: 0;
    max-width: 42ch;
    color: var(--about-on-dark);
    font-family: var(--font-sans);
    font-size: clamp(0.96rem, 1vw, 1.04rem);
    line-height: 1.65;
}

/* Final state styling — centered, larger serif, no number */
.amc-tech-active-card-content[data-tech-current-beat="final"] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.amc-tech-active-card-content .amc-tech-card-name--final {
    margin: 0 0 16px;
    font-size: clamp(1.7rem, 2.2vw, 2.2rem);
    letter-spacing: 0.1em;
}

.amc-tech-active-card-content .amc-tech-card-desc--final {
    max-width: none;
    margin-inline: auto;
    color: #FAF7F2;
    font-family: var(--font-serif);
    font-size: clamp(1.15rem, 1.5vw, 1.4rem);
    font-weight: 400;
    line-height: 1.4;
}

/* Divider between content and stepper */
.amc-tech-active-card-divider {
    margin: 0;
    border: 0;
    height: 1px;
    background: rgba(201, 169, 97, 0.22);
}

/* Stepper — 6 indicator buttons */
.amc-tech-stepper {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    gap: 6px;
}

.amc-tech-step {
    flex: 1;
    min-width: 0;
}

.amc-tech-step-btn {
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    background: transparent;
    border: 0;
    color: var(--color-champagne-gold);
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1;
    cursor: pointer;
    opacity: 0.4;
    transition:
        opacity var(--amc-motion-medium) var(--amc-ease-premium),
        transform var(--amc-motion-medium) var(--amc-ease-premium),
        color var(--amc-motion-medium) var(--amc-ease-premium);
}

.amc-tech-step-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid currentColor;
    opacity: 0;
    transform: scale(0.6);
    transition:
        opacity var(--amc-motion-medium) var(--amc-ease-premium),
        transform var(--amc-motion-medium) var(--amc-ease-premium),
        background-color var(--amc-motion-medium) var(--amc-ease-premium);
}

.amc-tech-step-label {
    display: inline-block;
    line-height: 1;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: border-color var(--amc-motion-medium) var(--amc-ease-premium);
}

/* ACTIVE state */
.amc-tech-step.is-active .amc-tech-step-btn {
    opacity: 1;
    transform: scale(1.05);
}

.amc-tech-step.is-active .amc-tech-step-dot {
    opacity: 1;
    transform: scale(1);
    background: var(--color-champagne-gold);
}

/* COMPLETED state — gold underline, dot fades out */
.amc-tech-step.is-completed .amc-tech-step-btn {
    opacity: 0.7;
    color: var(--color-deep-gold);
}

.amc-tech-step.is-completed .amc-tech-step-dot {
    opacity: 0;
}

.amc-tech-step.is-completed .amc-tech-step-label {
    border-bottom-color: var(--color-deep-gold);
}

/* Hover (desktop interactive) */
@media (hover: hover) and (pointer: fine) {
    .amc-tech-step-btn:hover {
        opacity: 0.85;
    }

    .amc-tech-step.is-active .amc-tech-step-btn:hover {
        opacity: 1;
    }
}

.amc-tech-step-btn:focus-visible {
    outline: 2px solid var(--color-champagne-gold);
    outline-offset: 4px;
    border-radius: 2px;
}

/* Stepper not interactive on mobile/tablet (display-only per spec) */
@media (max-width: 1023px) {
    .amc-tech-step-btn {
        pointer-events: none;
        cursor: default;
    }
}

/* ==========================================================================
   Fallback list — visible only in reduced-motion (escape hatch). Hidden by
   default so JS-enabled non-reduced-motion users see the spotlight only.
   ========================================================================== */
.amc-tech-cinema-cards-fallback {
    display: none;
}

.amc-tech-card-fallback {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(14px, 1.6vw, 20px);
    padding: clamp(14px, 1.5vw, 20px) clamp(16px, 1.8vw, 24px);
    background: rgba(250, 250, 247, 0.025);
    border: 1px solid rgba(201, 169, 97, 0.18);
    border-left: 2px solid rgba(201, 169, 97, 0.32);
}

.amc-tech-card-number {
    color: var(--color-champagne-gold);
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    line-height: 1;
    padding-top: 4px;
}

.amc-tech-card-body {
    min-width: 0;
}

.amc-tech-card-name {
    margin: 0;
    color: #FAF7F2;
    font-family: var(--font-serif);
    font-size: clamp(1.04rem, 1.1vw, 1.2rem);
    font-weight: 400;
    line-height: 1.2;
}

.amc-tech-card-subhead {
    margin: 4px 0 0;
    color: var(--color-champagne-gold);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.4;
}

.amc-tech-card-desc {
    margin: 8px 0 0;
    color: var(--about-on-dark);
    font-family: var(--font-sans);
    font-size: 0.88rem;
    line-height: 1.55;
}

/* Closing chord */
.amc-tech-cinema-closing {
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
    padding-top: clamp(8px, 1.4vw, 20px);
}

.amc-tech-cinema-closing-eyebrow {
    margin-bottom: 14px;
}

.amc-tech-cinema-closing-text {
    margin: 6px 0 0;
    color: #FAF7F2;
    font-family: var(--font-serif);
    font-size: clamp(1.18rem, 1.7vw, 1.5rem);
    font-weight: 400;
    line-height: 1.4;
}

/* Buttons (start + restart, shared base) */
.amc-tech-cinema-button {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-top: clamp(22px, 2.4vw, 32px);
    padding: 14px 26px;
    min-height: 48px;
    background: transparent;
    border: 1px solid rgba(201, 169, 97, 0.32);
    color: var(--color-champagne-gold);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        border-color var(--amc-motion-fast) var(--amc-ease-premium),
        color var(--amc-motion-fast) var(--amc-ease-premium),
        background-color var(--amc-motion-fast) var(--amc-ease-premium),
        box-shadow var(--amc-motion-fast) var(--amc-ease-premium);
}

@media (hover: hover) and (pointer: fine) {
    .amc-tech-cinema-button:hover {
        border-color: var(--color-champagne-gold);
        background: rgba(201, 169, 97, 0.05);
        box-shadow: 0 0 24px rgba(201, 169, 97, 0.18);
    }
}

.amc-tech-cinema-button:focus-visible {
    outline: 2px solid var(--color-champagne-gold);
    outline-offset: 4px;
}

.amc-tech-cinema-button-icon {
    font-size: 0.72em;
    line-height: 1;
}

/* Start button (mobile/tablet) uses inline SVG icon for crisp play/pause
   swap; restart button (desktop only) keeps the text glyph above. */
.amc-tech-cinema-button--start .amc-tech-cinema-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 13px;
    color: var(--color-champagne-gold);
}

.amc-tech-cinema-button--start .amc-tech-cinema-button-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Native [hidden] attribute toggling (no need for additional CSS — browser
   handles `display: none` via the attribute). */

/* Mobile controls — start button placed between illustration and cards.
   Hidden by default (HTML attr); JS un-hides on mobile/tablet only. */
.amc-tech-cinema-mobile-controls {
    text-align: center;
    margin-block: clamp(8px, 1.4vw, 18px);
}

/* ==========================================================================
   Responsive: ≤1023px stacks the build into a single column. Active card
   shrinks min-height. Stepper labels shrink slightly to fit narrower viewport.
   ========================================================================== */
@media (max-width: 1023px) {
    .amc-tech-cinema-build {
        grid-template-columns: 1fr;
        gap: clamp(20px, 3vw, 32px);
    }

    .amc-tech-cinema-illustration {
        max-height: clamp(280px, 50vw, 420px);
    }

    .amc-tech-active-card {
        min-height: 340px;
    }

    /* Replay button (closing chord) is desktop-only — mobile/tablet uses the
       trigger button's idle/completed state for restart, so the inline replay
       would be redundant. !important defends against any future JS or stylesheet
       cascade that might try to reveal it. */
    .amc-tech-cinema-button--restart {
        display: none !important;
    }
}

@media (max-width: 640px) {
    .amc-tech-active-card {
        min-height: 300px;
        padding: 24px 22px;
    }

    .amc-tech-stepper {
        gap: 4px;
    }

    .amc-tech-step-btn {
        font-size: 0.85rem;
        padding: 6px 2px;
    }
}

/* ==========================================================================
   Desktop pinned cinema state: ensure the cinema container fits the viewport
   (so ScrollTrigger pinning has predictable bounds and no layout shift).
   ========================================================================== */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .amc-tech-cinema {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-block: clamp(32px, 5vh, 72px);
    }
}

/* ==========================================================================
   Reduced motion: defeat any JS-set hidden states; restore static end state.
   The standard lid stays hidden because it's intermediate-only — the assembled
   end state shows SecuQuick (with its own pressure regulator dial) instead.
   Spotlight + buttons hidden; the 6-card fallback list takes over as the
   static escape hatch (all 6 descriptions visible without interaction).
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .amc-tech-svg [data-tech-hidden] {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .amc-tech-svg #amc-fedo {
        display: none !important;
    }

    .amc-tech-cinema-button,
    .amc-tech-cinema-mobile-controls,
    .amc-tech-cinema-spotlight {
        display: none !important;
    }

    .amc-tech-cinema-cards-fallback {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .amc-tech-card-fallback {
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) and (min-width: 768px) {
    .amc-tech-cinema-cards-fallback {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
    .amc-tech-cinema-cards-fallback {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}