/* Supplied Arson Pro family. Snasm is shown as a sourced specimen until its font file is available. */
        @font-face { font-family: 'Arson Pro'; src: url('fonts/Arson_Pro_Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
        @font-face { font-family: 'Arson Pro'; src: url('fonts/Arson_Pro_Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
        @font-face { font-family: 'Arson Pro'; src: url('fonts/Arson_Pro_Medium.otf') format('opentype'); font-weight: 500 600; font-style: normal; font-display: swap; }
        @font-face { font-family: 'Arson Pro'; src: url('fonts/Arson_Pro_Bold.otf') format('opentype'); font-weight: 700 800; font-style: normal; font-display: swap; }
        @font-face { font-family: 'Arson Pro'; src: url('fonts/Arson_Pro_Black.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; }
        @font-face { font-family: 'Arson Pro'; src: url('fonts/Arson_Pro_Light_Italic.otf') format('opentype'); font-weight: 300; font-style: italic; font-display: swap; }
        @font-face { font-family: 'Arson Pro'; src: url('fonts/Arson_Pro_Regular_Italic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; }
        @font-face { font-family: 'Arson Pro'; src: url('fonts/Arson_Pro_Medium_Italic.otf') format('opentype'); font-weight: 500 600; font-style: italic; font-display: swap; }
        @font-face { font-family: 'Arson Pro'; src: url('fonts/Arson_Pro_Bold_Italic.otf') format('opentype'); font-weight: 700 800; font-style: italic; font-display: swap; }
        @font-face { font-family: 'Arson Pro'; src: url('fonts/Arson_Pro_Black_Italic.otf') format('opentype'); font-weight: 900; font-style: italic; font-display: swap; }

        /* === BASE === */
        * { box-sizing: border-box; }
        html { font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; }
        body { background: #1d1d20; color: #cbd5e1; }

        /* === SCROLLBAR === */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #1d1d20; }
        ::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: #00B4D8; }

        /* === TOP NAV === */
        .top-nav {
            position: fixed; top: 0; left: 0; right: 0;
            height: 3.5rem; z-index: 50;
            background: #1d1d20;
            backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(0, 180, 216, 0.1);
            display: flex; align-items: center;
            padding: 0 1.5rem;
        }
        .nav-dropdown { position: relative; }
        .nav-dropdown-btn {
            display: flex; align-items: center; gap: 0.35rem;
            padding: 0.4rem 0.75rem; font-size: 0.7rem; font-weight: 600;
            letter-spacing: 0.08em; text-transform: uppercase;
            color: #94a3b8; cursor: pointer; border: none; background: none;
            transition: color 0.2s;
        }
        .nav-dropdown-btn:hover, .nav-dropdown-btn.active { color: #00B4D8; }
        .nav-dropdown-btn svg { width: 0.6rem; height: 0.6rem; transition: transform 0.2s; }
        .nav-dropdown.open .nav-dropdown-btn svg { transform: rotate(180deg); }

        /* Dropdown menu */
        .nav-dropdown-menu {
            display: none; position: absolute; top: 100%; left: 0;
            min-width: 200px; padding: 0.5rem 0;
            background: #27272a; border: 1px solid rgba(0, 180, 216, 0.15);
            border-radius: 0.5rem; box-shadow: 0 12px 28px rgba(0,0,0,0.4);
            z-index: 60;
        }
        .nav-dropdown.open .nav-dropdown-menu { display: block; }
        .nav-dropdown-menu a {
            display: block; padding: 0.5rem 1rem;
            font-size: 0.75rem; color: #94a3b8;
            text-decoration: none; transition: all 0.15s;
        }
        .nav-dropdown-menu a:hover { color: #00B4D8; background: rgba(0, 180, 216, 0.06); }

        /* Mega menu for Design System */
        .mega-menu {
            display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
            width: 720px; padding: 1rem;
            background: #27272a; border: 1px solid rgba(0, 180, 216, 0.15);
            border-radius: 0.75rem; box-shadow: 0 12px 28px rgba(0,0,0,0.4);
            z-index: 60;
        }
        .nav-dropdown.open .mega-menu { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.25rem; }
        .mega-col-title {
            font-size: 0.55rem; font-weight: 700; letter-spacing: 0.12em;
            text-transform: uppercase; color: #00B4D8; padding: 0.25rem 0.5rem 0.35rem;
            border-bottom: 1px solid rgba(0, 180, 216, 0.1); margin-bottom: 0.25rem;
        }
        .mega-menu a {
            display: block; padding: 0.3rem 0.5rem; font-size: 0.68rem;
            color: #94a3b8; text-decoration: none; border-radius: 0.25rem; transition: all 0.15s;
        }
        .mega-menu a:hover { color: #00B4D8; background: rgba(0, 180, 216, 0.06); }

        .nav-direct-link {
            padding: 0.4rem 0.75rem; font-size: 0.7rem; font-weight: 600;
            letter-spacing: 0.08em; text-transform: uppercase;
            color: #94a3b8; text-decoration: none; transition: color 0.2s;
        }
        .nav-direct-link:hover { color: #00B4D8; }

        /* === SUB-HEADER === */
        .sub-header {
            position: fixed; top: 3.5rem; left: 0; right: 0;
            height: 2.5rem; z-index: 45;
            background: rgba(29, 29, 32, 0.75);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(0, 180, 216, 0.06);
            display: flex; align-items: center; justify-content: space-between;
            padding: 0 1.5rem;
            font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase;
            color: #64748b;
        }
        .sub-header-title { color: #00B4D8; font-weight: 600; font-family: 'Arson Pro', monospace; }

        /* === THEME TOGGLE BUTTONS === */
        .theme-btns { display: flex; gap: 2px; }
        .theme-btn {
            padding: 0.25rem 0.6rem; font-size: 0.6rem; font-weight: 700;
            letter-spacing: 0.1em; text-transform: uppercase;
            border: 1px solid rgba(0, 180, 216, 0.15); cursor: pointer;
            transition: all 0.2s; background: transparent; color: #64748b;
        }
        .theme-btn:first-child { border-radius: 4px 0 0 4px; }
        .theme-btn:last-child { border-radius: 0 4px 4px 0; }
        .theme-btn.active { background: transparent; color: #f1f5f9; border-color: #f1f5f9; }

        /* === CONTEXTUAL SIDEBAR === */
        .ctx-sidebar {
            position: fixed; top: 6rem; left: 0; bottom: 0;
            width: 180px; overflow-y: auto; z-index: 30;
            padding: 1.5rem 0; border-right: 1px solid rgba(0, 180, 216, 0.06);
            background: rgba(29, 29, 32, 0.95);
            transform: translateX(-100%); transition: transform 0.3s ease;
        }
        .ctx-sidebar.visible { transform: translateX(0); }
        .ctx-sidebar-group { padding: 0.5rem 0; }
        .ctx-sidebar-label {
            font-size: 0.55rem; letter-spacing: 0.14em; text-transform: uppercase;
            color: #475569; font-weight: 700; padding: 0.5rem 1.25rem 0.25rem;
        }
        .ctx-sidebar a {
            display: block; padding: 0.3rem 1.25rem; padding-left: 1rem;
            font-size: 0.72rem; color: #64748b; text-decoration: none;
            border-left: 2px solid transparent; transition: all 0.15s;
        }
        .ctx-sidebar a:hover { color: #00B4D8; }
        .ctx-sidebar a.active { color: #00B4D8; border-left-color: #00B4D8; }

        /* === MAIN CONTENT === */
        .main-area { padding-top: 6rem; transition: margin-left 0.3s ease; position: relative; z-index: 1; }
        .main-area.with-sidebar { margin-left: 180px; }

        /* === PAGE HERO === */
        .page-hero { padding: 4rem 0 3rem; }
        .page-hero-title {
            font-size: clamp(3rem, 6vw, 5rem); font-weight: 800;
            line-height: 0.95; letter-spacing: -0.03em; color: #f1f5f9;
        }
        .page-hero-title .accent { color: #00B4D8; }
        .page-hero-subtitle { font-size: 1rem; color: #64748b; margin-top: 0.75rem; max-width: 36rem; }
        .page-hero-bar {
            margin-top: 1.5rem; padding: 0.5rem 0;
            border-top: 1px solid rgba(0, 180, 216, 0.1);
            font-size: 0.6rem; letter-spacing: 0.12em;
            text-transform: uppercase; color: #475569;
        }
        .page-hero-bar span { color: #00B4D8; }

        /* === SECTION DIVIDERS === */
        .section-divider {
            display: flex; align-items: center; gap: 1rem;
            padding: 3rem 0 1.5rem; border-top: 1px solid rgba(0, 180, 216, 0.08);
        }
        .section-divider-num {
            font-size: 0.75rem; font-weight: 700; color: #00B4D8;
            font-family: 'Arson Pro', monospace; min-width: 2rem;
        }
        .section-divider-line { flex: 1; height: 1px; background: rgba(0, 180, 216, 0.08); }
        .section-divider-title {
            font-size: 0.65rem; letter-spacing: 0.14em;
            text-transform: uppercase; color: #64748b; font-weight: 600;
        }

        /* === INDEX CARD GRID === */
        .index-card {
            background: #27272a;
            border: 1px solid rgba(0, 180, 216, 0.08);
            border-radius: 0.75rem; padding: 1.5rem;
            cursor: pointer; transition: all 0.2s;
        }
        .index-card:hover {
            border-color: rgba(0, 180, 216, 0.25);
            box-shadow: 0 0 24px rgba(0, 180, 216, 0.06);
        }
        .index-card-num {
            font-size: 2rem; font-weight: 800; color: rgba(0, 180, 216, 0.15);
            line-height: 1; margin-bottom: 0.75rem;
        }
        .index-card-title { font-size: 0.9rem; font-weight: 700; color: #00B4D8; margin-bottom: 0.25rem; }
        .index-card-desc { font-size: 0.75rem; color: #64748b; line-height: 1.5; }

        /* === PAGE CONTENT SECTIONS === */
        .page-section { padding: 2rem 0; }
        .content-wrap { max-width: 100%; margin: 0 auto; padding: 0 3rem; }

        /* === CARDS === */
        .bb-card {
            background: #27272a;
            border: 1px solid rgba(0, 180, 216, 0.08);
            border-radius: 0.75rem; padding: 1.5rem; transition: all 0.2s;
        }
        .bb-card:hover { border-color: rgba(0, 180, 216, 0.25); }
        .bb-card-flat {
            background: #27272a;
            border: 1px solid rgba(0, 180, 216, 0.08);
            border-radius: 0.75rem; overflow: hidden;
        }

        /* === LOGO SYSTEM / BRAND SELECTION & MULTBLOCK === */
        .logo-brand-nav { display: flex; gap: 0.5rem; margin-top: 1.5rem; flex-wrap: wrap; }
        .logo-brand-nav a { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-width: 180px; padding: 0.9rem 1rem; border: 1px solid #475569; border-radius: 0.5rem; color: #cbd5e1; font-size: 0.8rem; font-weight: 600; transition: background 0.2s, border-color 0.2s; }
        .logo-brand-nav a span { font: 0.65rem ui-monospace, monospace; opacity: 0.65; }
        .logo-brand-nav a:hover { border-color: #2dccfc; }
        .logo-brand-nav a[aria-current="page"] { background: rgba(45,204,252,0.1); border-color: #2dccfc; color: #2dccfc; }
        .logo-brand-nav a:focus-visible, #page-brandbook-logo-multblock a:focus-visible { outline: 2px solid #2dccfc; outline-offset: 4px; }
        .mb-logo-caption { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; padding: 1rem 1.25rem; font: 0.65rem ui-monospace, monospace; letter-spacing: 0.05em; color: #94a3b8; }
        .mb-logo-caption a { color: #2dccfc; font-family: 'Arson Pro', sans-serif; font-weight: 600; }
        .mb-logo-caption a:hover { text-decoration: underline; }
        .mb-logo-stage { min-height: 290px; display: flex; align-items: center; justify-content: center; padding: 4rem clamp(1.5rem, 6vw, 6rem); background-color: #18181b; border-block: 1px solid rgba(45,204,252,0.12); }
        .mb-logo-stage img { display: block; width: 100%; max-width: 940px; height: auto; }
        .mb-logo-facts { display: grid; grid-template-columns: 1fr 1.2fr 1.3fr; gap: 1.5rem; padding: 1.5rem 0; }
        .mb-logo-kicker { display: block; font: 0.6rem ui-monospace, monospace; letter-spacing: 0.08em; color: #94a3b8; }
        .mb-logo-facts p { margin-top: 0.6rem; font-size: 0.75rem; }
        .mb-logo-swatch { display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: 0.5rem; border-radius: 50%; background: #2dccfc; }
        .mb-logo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
        .mb-logo-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .mb-logo-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .mb-logo-sample { display: flex; flex-direction: column; justify-content: space-between; min-height: 210px; padding: 1.5rem; border: 1px solid rgba(148,163,184,0.15); border-radius: 0.75rem; overflow: hidden; }
        .mb-logo-sample img { display: block; width: 100%; height: auto; margin: 2rem auto; }
        .mb-logo-sample figcaption { font-size: 0.75rem; font-weight: 600; }
        .mb-logo-sample figcaption span { display: block; margin-top: 0.35rem; font-size: 0.65rem; font-weight: 400; opacity: 0.7; line-height: 1.6; }
        .mb-logo-bg-dark { background: #18181b; color: #e2e8f0; }
        .mb-logo-bg-navy { background: #0d3b66; color: #e2e8f0; }
        .mb-logo-bg-white { background: #fff; color: #1e293b; }
        .mb-logo-bg-white .mb-logo-kicker { color: #475569; }
        .mb-logo-bg-cyan { background: #48cae4; color: #082a4a; }
        .mb-logo-white { filter: brightness(0) invert(1); }
        .mb-logo-black { filter: brightness(0); }
        .mb-logo-note { margin-top: 1.25rem; padding-left: 1rem; border-left: 2px solid #2dccfc; color: #94a3b8; font-size: 0.75rem; line-height: 1.8; }
        .mb-logo-card-copy { border-top: 1px solid rgba(148,163,184,0.15); padding: 1.25rem; font-size: 0.75rem; line-height: 1.8; color: #94a3b8; }
        .mb-logo-clear-stage { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; min-height: 200px; }
        .mb-logo-clear-frame { position: relative; padding: clamp(1rem, 3vw, 2rem); border: 1px dashed #2dccfc; background: rgba(45,204,252,0.04); width: 100%; }
        .mb-logo-clear-frame img { width: 100%; height: auto; }
        .mb-logo-clear-label { position: absolute; top: -1.2rem; left: 0; color: #94a3b8; font: 0.6rem ui-monospace, monospace; }
        .mb-logo-reduction { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; padding: 1.5rem; min-height: 200px; }
        .mb-logo-reduction div { max-width: 100%; text-align: center; }
        .mb-logo-reduction img { height: auto; max-width: 100%; }
        .mb-logo-reduction span { display: block; margin-top: 0.5rem; font: 0.6rem ui-monospace, monospace; color: #94a3b8; }
        .mb-logo-dont { border-color: rgba(248,113,113,0.25); }
        .mb-logo-dont .mb-logo-kicker { color: #fca5a5; }
        html.light .logo-brand-nav a { color: #334155; border-color: #cbd5e1; }
        html.light .logo-brand-nav a[aria-current="page"] { color: #00708a; border-color: #00708a; background: #e6f8fd; }
        html.light .mb-logo-caption, html.light .mb-logo-facts .mb-logo-kicker, html.light .mb-logo-card-copy, html.light .mb-logo-note, html.light .mb-logo-clear-label, html.light .mb-logo-reduction span { color: #475569; }
        html.light .mb-logo-caption a { color: #00708a; }
        @media (max-width: 1100px) { .mb-logo-grid-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
        @media (max-width: 640px) {
            .logo-brand-nav a { flex: 1; min-width: 0; gap: 0.75rem; }
            .mb-logo-facts, .mb-logo-grid { grid-template-columns: minmax(0, 1fr); }
            .mb-logo-stage { min-height: 180px; padding: 2.5rem 1.5rem; }
            .mb-logo-sample { min-height: 200px; }
        }

        /* === COLOR SWATCHES === */
        .color-swatch { border-radius: 0.75rem; overflow: hidden; transition: transform 0.2s; }
        .color-swatch:hover { transform: translateY(-4px); }
        .color-swatch .swatch-block { height: 6rem; }
        .color-swatch .swatch-info {
            padding: 0.75rem; background: #27272a;
            border: 1px solid rgba(0, 180, 216, 0.08); border-top: none;
        }

        /* === GLOW === */
        .glow-cyan { box-shadow: 0 0 30px rgba(0, 180, 216, 0.15); }
        .glow-text { text-shadow: 0 0 40px rgba(0, 180, 216, 0.3); }

        /* === FADE === */
        .fade-up { opacity: 0; }

        /* === GRID PATTERN === */
        .grid-pattern {
            background-image:
                linear-gradient(rgba(0,180,216,0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0,180,216,0.04) 1px, transparent 1px);
            background-size: 24px 24px;
        }
        .construction-grid {
            background-image:
                linear-gradient(rgba(0,180,216,0.12) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0,180,216,0.12) 1px, transparent 1px);
            background-size: 20px 20px;
        }

        /* === DONT BADGE === */
        .dont-badge {
            position: absolute; top: 0.5rem; right: 0.5rem;
            width: 1.5rem; height: 1.5rem; background: #ef4444;
            border-radius: 50%; display: flex; align-items: center; justify-content: center;
        }

        /* === DEMO AREA === */
        .demo-area {
            background: #2e2e32;
            border: 1px solid rgba(0, 180, 216, 0.08);
            border-radius: 0.5rem; padding: 2rem;
            display: flex; flex-wrap: wrap; gap: 1rem;
            align-items: center; justify-content: center;
        }

        /* === TYPE SPECIMEN === */
        .type-specimen {
            font-size: clamp(4rem, 8vw, 8rem); font-weight: 800;
            color: #f1f5f9; line-height: 0.9; letter-spacing: -0.03em;
        }

        /* === SECTION LABEL & TITLE (used inside pages) === */
        .section-label {
            font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
            color: #00B4D8; font-weight: 600; margin-bottom: 0.75rem;
        }
        .section-title { font-size: 2rem; font-weight: 700; color: #f1f5f9; line-height: 1.2; margin-bottom: 1rem; }
        .section-desc { font-size: 1.0625rem; color: #94a3b8; max-width: 42rem; line-height: 1.7; }

        /* === PAGE TRANSITIONS === */
        .page-view { display: none; opacity: 0; transition: opacity 0.2s ease; }
        .page-view.active { display: block; }
        .page-view.show { opacity: 1; }

        /* === MOBILE HAMBURGER === */
        .mobile-menu-btn { display: none; }
        .mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 55; cursor: pointer; }
        .mobile-overlay.open { display: block; }
        .mobile-nav-panel {
            position: fixed; top: 0; left: 0; bottom: 0; width: 280px;
            background: #1d1d20; border-right: 1px solid rgba(0, 180, 216, 0.1);
            z-index: 56; transform: translateX(-100%); transition: transform 0.3s;
            overflow-y: auto; padding: 1.5rem;
        }
        .mobile-nav-panel.open { transform: translateX(0); }
        .mobile-nav-panel .mob-section { margin-bottom: 1.5rem; }
        .mobile-nav-panel .mob-section-title {
            font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
            color: #475569; font-weight: 700; margin-bottom: 0.5rem;
        }
        .mobile-nav-panel a {
            display: block; padding: 0.4rem 0; font-size: 0.8rem;
            color: #94a3b8; text-decoration: none;
        }
        .mobile-nav-panel a:hover { color: #00B4D8; }

        /* === CODE BLOCKS === */
        .code-block {
            background: #1d1d20; border: 1px solid rgba(0,180,216,0.1);
            border-radius: 0.5rem; overflow-x: auto;
        }
        .code-block pre { padding: 1.25rem; font-size: 0.72rem; line-height: 1.7; color: #94a3b8; margin: 0; }
        .code-block .hl { color: #00B4D8; }

        /* === LANDING LOGO === */
        .landing-logo { filter: brightness(0) invert(1); }
        .split-char { display: inline; opacity: 0; }
        .split-word { display: inline-block; white-space: nowrap; }
        /* split-space removed — spaces are now plain text for natural word-wrap */

        @media (max-width: 1023px) {
            .mobile-menu-btn { display: flex; }
            .nav-items-desktop { display: none !important; }
            .ctx-sidebar { display: none; }
            .main-area.with-sidebar { margin-left: 0; }
            .top-nav { padding: 0 1rem; }
            .sub-header { padding: 0 1rem; }
            .content-wrap { padding: 0 1.5rem; }
            .mega-menu { width: 100%; left: 0; transform: none; }
            .page-hero-title { font-size: clamp(1.5rem, 7vw, 2.5rem); overflow-wrap: break-word; word-wrap: break-word; }
        }

        /* ============================================ */
        /* LIGHT MODE                                   */
        /* ============================================ */
        html.light body { background: #f8fafc; color: #334155; }
        html.light ::-webkit-scrollbar-track { background: #f1f5f9; }
        html.light ::-webkit-scrollbar-thumb { background: #cbd5e1; }
        html.light ::-webkit-scrollbar-thumb:hover { background: #0D3B66; }

        html.light .top-nav { background: rgba(255,255,255,0.95); border-bottom-color: #e2e8f0; }
        html.light .nav-dropdown-btn { color: #64748b; }
        html.light .nav-dropdown-btn:hover, html.light .nav-dropdown-btn.active { color: #0D3B66; }
        html.light .nav-direct-link { color: #64748b; }
        html.light .nav-direct-link:hover { color: #0D3B66; }
        html.light .nav-dropdown-menu { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 12px 28px rgba(0,0,0,0.08); }
        html.light .nav-dropdown-menu a { color: #64748b; }
        html.light .nav-dropdown-menu a:hover { color: #0D3B66; background: rgba(13,59,102,0.04); }
        html.light .mega-menu { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 12px 28px rgba(0,0,0,0.08); }
        html.light .mega-col-title { color: #0D3B66; border-bottom-color: #e2e8f0; }
        html.light .mega-menu a { color: #64748b; }
        html.light .mega-menu a:hover { color: #0D3B66; background: rgba(13,59,102,0.04); }

        html.light .sub-header { background: rgba(248,250,252,0.75); border-bottom-color: #e2e8f0; color: #94a3b8; }
        html.light .sub-header-title { color: #0D3B66; }

        html.light .theme-btn { border-color: #e2e8f0; color: #94a3b8; }
        html.light .theme-btn.active { background: #0D3B66; color: #ffffff; border-color: #0D3B66; }

        html.light .ctx-sidebar { background: rgba(255,255,255,0.95); border-right-color: #e2e8f0; }
        html.light .ctx-sidebar-label { color: #94a3b8; }
        html.light .ctx-sidebar a { color: #94a3b8; }
        html.light .ctx-sidebar a:hover { color: #0D3B66; }
        html.light .ctx-sidebar a.active { color: #0D3B66; border-left-color: #0D3B66; }

        html.light .page-hero-title, html.light .page-hero-title .split-char { color: #0D3B66; }
        html.light .page-hero-title .accent, html.light .page-hero-title .split-char.accent { color: #0096B4; }
        html.light .page-hero-subtitle { color: #94a3b8; }
        html.light .page-hero-bar { border-top-color: #e2e8f0; color: #94a3b8; }
        html.light .page-hero-bar span { color: #0096B4; }

        html.light .section-divider { border-top-color: #e2e8f0; }
        html.light .section-divider-num { color: #0096B4; }
        html.light .section-divider-line { background: #e2e8f0; }
        html.light .section-divider-title { color: #94a3b8; }

        html.light .section-label { color: #0096B4; }
        html.light .section-title { color: #0D3B66; }
        html.light .section-desc { color: #64748b; }

        html.light .index-card { background: #ffffff; border-color: #e2e8f0; }
        html.light .index-card:hover { border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
        html.light .index-card-num { color: rgba(13,59,102,0.1); }
        html.light .index-card-title { color: #0D3B66; }
        html.light .index-card-desc { color: #94a3b8; }

        html.light .bb-card { background: #ffffff; border-color: #e2e8f0; }
        html.light .bb-card:hover { border-color: #cbd5e1; }
        html.light .bb-card-flat { background: #ffffff; border-color: #e2e8f0; }

        html.light .color-swatch .swatch-info { background: #ffffff; border-color: #e2e8f0; }
        html.light .demo-area { background: #f1f5f9; border-color: #e2e8f0; }
        html.light .glow-cyan { box-shadow: 0 4px 16px rgba(0, 180, 216, 0.12); }
        html.light .glow-text { text-shadow: none; }
        html.light .type-specimen { color: #0D3B66; }
        html.light .landing-logo { filter: none; }
        html.light .threads-bg { opacity: 0.15 !important; }
        html.light .code-block { background: #f1f5f9; border-color: #e2e8f0; }
        html.light .code-block pre { color: #334155; }
        html.light .code-block .hl { color: #0D3B66; }

        html.light .grid-pattern {
            background-image: linear-gradient(rgba(13,59,102,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(13,59,102,0.06) 1px, transparent 1px);
        }
        html.light .construction-grid {
            background-image: linear-gradient(rgba(13,59,102,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(13,59,102,0.1) 1px, transparent 1px);
        }

        html.light .text-neutral-200 { color: #1e293b !important; }
        html.light .text-neutral-300 { color: #334155 !important; }
        html.light .text-neutral-400 { color: #64748b !important; }
        html.light .text-neutral-500 { color: #94a3b8 !important; }

        html.light input, html.light select, html.light textarea {
            background: #f8fafc !important; border-color: #e2e8f0 !important; color: #1e293b !important;
        }
        html.light input::placeholder, html.light textarea::placeholder { color: #94a3b8 !important; }

        html.light footer { border-top-color: #e2e8f0; }
        html.light .logo-invert { filter: none; }
        .logo-dark-only { display: inline-block; }
        .logo-light-only { display: none; }
        html.light .logo-dark-only { display: none; }
        html.light .logo-light-only { display: inline-block; }

        html.light .mobile-nav-panel { background: #ffffff; border-right-color: #e2e8f0; }
        html.light .mobile-nav-panel .mob-section-title { color: #94a3b8; }
        html.light .mobile-nav-panel a { color: #64748b; }
        html.light .mobile-nav-panel a:hover { color: #0D3B66; }

        html.light .landing-hero { background: linear-gradient(180deg, #f0f9ff 0%, #f8fafc 100%); }
        html.light .landing-hero .grid-pattern { opacity: 0.3; }
        html.light .landing-hero .radial-glow { opacity: 0.3 !important; }
        html.light .landing-hero .hero-bottom-fade { background: linear-gradient(transparent, #f8fafc) !important; }

        /* Product image grid */
        .product-img-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 300px)); gap: 1rem; }
        .product-img-grid img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 0.5rem; border: 1px solid rgba(0,180,216,0.08); cursor: zoom-in; transition: transform 0.2s, border-color 0.2s; }
        .product-img-grid img:hover { border-color: rgba(0,180,216,0.25); transform: scale(1.02); }
        @media (max-width: 640px) { .product-img-grid { grid-template-columns: repeat(2, 1fr); } }

        /* Brand tree */
        .brand-tree-line { border-left: 2px solid rgba(0,180,216,0.2); margin-left: 2rem; padding-left: 1.5rem; }
        .brand-tree-connector { position: relative; }
        .brand-tree-connector::before { content: ''; position: absolute; left: -1.5rem; top: 50%; width: 1.5rem; height: 2px; background: rgba(0,180,216,0.2); }

        /* ========================================= */
        /* EDITORIAL SLIDES (Showcase > Editorial)   */
        /* ========================================= */
        .editorial-slide {
            margin-bottom: 2rem;
        }
        .editorial-slide-inner {
            position: relative;
            min-height: 75vh;
            background: #1d1d20;
            border: 1px solid rgba(0,180,216,0.08);
            border-radius: 1rem;
            padding: 2rem 2.5rem;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .editorial-slide-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 2rem;
            flex-shrink: 0;
        }
        .editorial-num {
            font-size: 2.5rem;
            font-weight: 900;
            color: rgba(0,180,216,0.15);
            line-height: 1;
            letter-spacing: -0.03em;
        }
        .editorial-label {
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #64748b;
        }
        .editorial-tag {
            margin-left: auto;
            font-size: 0.6rem;
            font-weight: 700;
            color: #00B4D8;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }
        .editorial-slide-footer {
            position: absolute;
            bottom: 1.25rem;
            left: 2rem;
            right: 2rem;
            display: flex;
            justify-content: space-between;
            font-size: 0.5rem;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.15);
            z-index: 3;
        }
        @media (max-width: 768px) {
            .editorial-slide-inner { min-height: 60vh; padding: 1.5rem; }
            .editorial-num { font-size: 1.8rem; }
        }

        /* Print styles for PDF download */
        @media print {
            .top-nav, .sub-header, .ctx-sidebar, .mobile-nav-panel, .mobile-overlay { display: none !important; }
            .main-area { padding-top: 0 !important; margin-left: 0 !important; }
            .editorial-slide { page-break-inside: avoid; break-inside: avoid; margin-bottom: 0; }
            .editorial-slide-inner { border: none; border-radius: 0; min-height: 100vh; }
            body { background: #1d1d20 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
        }

        /* Responsive — Showcase Editorial Slides */
        @media (max-width: 768px) {
            .editorial-slide-inner { min-height: 50vh; padding: 1.5rem 1.25rem; }
            .editorial-slide-inner .grid { gap: 1rem; }
            .editorial-num { font-size: 1.5rem; }
            .editorial-slide-footer { left: 1.25rem; right: 1.25rem; bottom: 0.75rem; font-size: 0.4rem; }
            .editorial-slide-header { margin-bottom: 1rem; }

            /* Force 2-col and multi-col grids to stack */
            .editorial-slide-inner .grid.md\:grid-cols-2,
            .editorial-slide-inner .grid.md\:grid-cols-3 { grid-template-columns: 1fr !important; }

            /* Image slides need min-height */
            .editorial-slide-inner[style*="padding:0"] { min-height: 50vh; }
            .editorial-slide-inner[style*="padding:0"] .grid { min-height: 50vh; }
            .editorial-slide-inner[style*="padding:0"] .grid.grid-cols-3 { grid-template-columns: 1fr !important; }

            /* Product images */
            .editorial-slide-inner .rounded-xl img.aspect-square { aspect-ratio: 4/3; }
        }

        @media (max-width: 480px) {
            .editorial-slide-inner { min-height: 40vh; }
        }

/* Story 1.4: measured media, real typography and dual-brand applications. */
body { font-family: 'Arson Pro', system-ui, sans-serif; }
.font-reference { padding: 1.25rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 0.65rem; overflow: hidden; }
.snasm-specimen { display: block; width: 100%; aspect-ratio: 5 / 1; object-fit: cover; object-position: left center; }
.font-reference figcaption { margin-top: 1rem; color: #475569; font: 0.7rem 'Arson Pro', sans-serif; line-height: 1.6; }
.font-reference a { text-decoration: underline; text-underline-offset: 3px; }
.font-weight-row { display: flex; gap: 1.5rem; align-items: center; padding: 1.25rem; border-bottom: 1px solid rgba(148,163,184,.12); }
.font-weight-row > span { min-width: 105px; color: #64748b; font-size: .75rem; }
.font-weight-row p { font-size: clamp(1.15rem,2.5vw,1.8rem); overflow-wrap: anywhere; }
.single-media { display: block; width: 100%; max-width: 1000px; max-height: 560px; height: auto; object-fit: contain; margin: 0 auto; border-radius: .75rem; cursor: zoom-in; }
#page-showcase-editorial .editorial-slide { max-width: 1120px; margin: 0 auto 2rem; }
#page-showcase-editorial .editorial-slide-inner { min-height: 540px; }
#page-showcase-editorial .editorial-media-panel { min-height: 0; }
#page-showcase-editorial .editorial-media-panel img { max-height: 620px; object-fit: contain; background: #eef0f2; }
#page-showcase-editorial .editorial-media-panel > .h-full > img { height: min(60vh,560px); object-fit: contain; }
#page-showcase-papelaria .page-section > .overflow-hidden { max-width: 1000px; margin-inline: auto; }
#page-showcase-papelaria .page-section > .overflow-hidden > img { max-height: 520px; object-fit: contain; }
.mockup-summary { display: flex; flex-wrap: wrap; gap: 2.5rem; padding: 1.5rem 0; border-block: 1px solid rgba(148,163,184,.15); margin-bottom: 1.5rem; }
.mockup-summary strong { display: block; color: #00b4d8; font-size: 1.7rem; }
.mockup-summary span { color: #94a3b8; font-size: .75rem; }
.mockup-filter-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1.5rem; }
.mockup-filter-list button { padding: .5rem .8rem; font-size: .75rem; border: 1px solid rgba(148,163,184,.25); border-radius: .35rem; }
.mockup-filter-list button.active { border-color: #00b4d8; background: rgba(0,180,216,.08); }
.brand-mockup-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.2rem; }
.brand-mockup-card { min-width: 0; border: 1px solid rgba(148,163,184,.2); border-radius: .65rem; overflow: hidden; }
.brand-mockup-image { display: flex; align-items: center; justify-content: center; height: 290px; background: #eef0f2; }
.brand-mockup-image img { width: 100%; height: 100%; object-fit: contain; }
.brand-mockup-caption { padding: 1rem; }
.brand-mockup-caption p { font-weight: 700; font-size: .9rem; }
.brand-mockup-caption span { display: block; font-size: .7rem; color: #94a3b8; margin-top: .35rem; }
.brand-mockup-card:focus-visible, .mockup-filter-list button:focus-visible { outline: 2px solid #00b4d8; outline-offset: 3px; }
.uniform-detail { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); align-items: center; gap: 2rem; max-width: 1100px; margin-inline: auto; }
.uniform-detail > img { width: 100%; max-height: 540px; object-fit: contain; background: #eef0f2; border-radius: .75rem; cursor: zoom-in; }
.asset-download { display: inline-block; margin-top: 1.2rem; color: #00b4d8; font-size: .8rem; text-decoration: underline; text-underline-offset: 4px; }
html.light .brand-mockup-card { background: #fff; border-color: #e2e8f0; }
html.light .brand-mockup-caption span, html.light .mockup-summary span { color: #475569; }
@media (max-width: 1000px) { .brand-mockup-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px) {
 .font-weight-row { align-items: flex-start; flex-direction: column; gap: .5rem; }
 .brand-mockup-grid, .uniform-detail { grid-template-columns: minmax(0,1fr); }
 .brand-mockup-image { height: 320px; }
 .uniform-detail > img { max-height: 460px; }
 #page-showcase-editorial .editorial-slide-inner { min-height: 0; }
 #page-showcase-editorial .editorial-media-panel img { max-height: 440px; }
 #page-showcase-editorial .editorial-media-panel > .h-full > img { height: auto; max-height: 440px; }
 .mockup-summary { gap: 1.5rem; }
}
@media print { #page-showcase-editorial .editorial-slide-inner { min-height: 95vh; } }

/* Institutional source artwork and brand photography. */
.strategy-motto { padding: clamp(1.5rem,4vw,3rem); background: #0d3b66; border-radius: .8rem; border-left: 3px solid #00b4d8; }
.strategy-motto h2 { color: white; max-width: 900px; font-size: clamp(1.8rem,4vw,3.5rem); font-weight: 700; line-height: 1.14; }
.strategy-motto img { width: 190px; height: auto; margin-top: 2rem; }
.institutional-plates { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem; }
.institutional-plates figure { min-width: 0; padding: 1.3rem; border: 1px solid rgba(148,163,184,.2); border-radius: .7rem; }
.institutional-plates img { display: block; width: 100%; max-height: 440px; object-fit: contain; }
.institutional-plates figcaption h3 { font-size: 1.15rem; color: #00b4d8; font-weight: 700; margin: 1.5rem 0 .7rem; }
.institutional-plates figcaption p { font-size: .9rem; line-height: 1.65; margin-top: .6rem; }
.brand-photo-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.2rem; }
.brand-photo-grid figure { min-width: 0; overflow: hidden; border-radius: .65rem; border: 1px solid rgba(148,163,184,.2); }
.brand-photo-grid img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; cursor:zoom-in; }
.brand-photo-grid figcaption { padding:1rem; font-size:.8rem; line-height:1.5; }
.brand-photo-grid strong { display:block; color:#00b4d8; margin-bottom:.35rem; }
.brand-moodboard { grid-template-columns:repeat(2,minmax(0,1fr)); }
#page-produtos-protese img[src$="mockup-innovare.png"] { object-fit: cover; object-position: center; }
@media(max-width:640px) { .institutional-plates,.brand-photo-grid,.brand-moodboard { grid-template-columns:minmax(0,1fr); } #page-movimento .movimento-token-list { flex-wrap:wrap; } }
/* Story 1.5 — presentation system; scoped to preserve the rest of the manual. */
#page-apresentacao {
 --pres-bg: #101f2c; --pres-panel: #172b3b; --pres-navy: #0d3b66;
 --pres-text: #f5f8fb; --pres-muted: #b3c4d1; --pres-accent: #55d7f3;
 --pres-rule: rgba(177,205,225,.2); --pres-paper: #eef2f4;
 --pres-width: 1200px; --pres-gutter: clamp(20px,4.4vw,72px);
 --pres-space: clamp(24px,3.5vw,52px); --pres-radius: 18px;
 --pres-toolbar: 76px; --pres-controls: 68px;
}
#page-apresentacao .pres-presenter { position:fixed;inset:0;z-index:200;overflow-y:auto;overflow-x:hidden;background:var(--pres-bg);color:var(--pres-text);scroll-behavior:smooth;overscroll-behavior-y:contain; }
#page-apresentacao .pres-toolbar { position:fixed;inset:0 0 auto;z-index:214;height:var(--pres-toolbar);padding:0 var(--pres-gutter);display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--pres-bg);border-bottom:1px solid var(--pres-rule);color:var(--pres-text); }
#page-apresentacao .pres-brand-pair { display:flex;align-items:center;gap:24px;flex-shrink:0; }
#page-apresentacao .pres-brand-pair img { display:block;width:152px;height:28px;object-fit:contain; }
#page-apresentacao .pres-brand-pair img:first-child { filter:brightness(0) invert(1); }
#page-apresentacao .pres-brand-pair img:last-child { width:132px; }
#page-apresentacao .pres-brand-pair > span { height:24px;width:1px;background:var(--pres-rule); }
#page-apresentacao .pres-toolbar-label { color:var(--pres-muted);font-size:11px;letter-spacing:.12em;text-transform:uppercase; }
#page-apresentacao .pres-back { flex-shrink:0;min-height:44px;display:flex;align-items:center;gap:12px;font-size:12px;white-space:nowrap; }
#page-apresentacao .pres-back:hover { color:var(--pres-accent); }
#page-apresentacao .pres-track { position:relative; }
#page-apresentacao .pres-section { min-height:100svh;padding:calc(var(--pres-toolbar) + 42px) var(--pres-gutter) calc(var(--pres-controls) + 42px);border-bottom:1px solid var(--pres-rule); }
#page-apresentacao .pres-inner { max-width:var(--pres-width);margin:auto; }
#page-apresentacao .pres-eyebrow { display:flex;align-items:center;gap:18px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--pres-accent);margin:0 0 22px; }
#page-apresentacao .pres-eyebrow > span { opacity:.7;font-variant-numeric:tabular-nums; }
#page-apresentacao .pres-heading { max-width:900px;margin:0 0 var(--pres-space); }
#page-apresentacao h1,#page-apresentacao h2,#page-apresentacao h3,#page-apresentacao p { margin-top:0; }
#page-apresentacao h1 { font-size:clamp(38px,4.3vw,66px);line-height:1.08;font-weight:700;letter-spacing:-.035em;text-wrap:balance;margin-bottom:28px; }
#page-apresentacao h1 em { font-style:normal;color:var(--pres-accent); }
#page-apresentacao h2 { color:var(--pres-text);font-size:clamp(32px,3.65vw,52px);font-weight:700;line-height:1.12;letter-spacing:-.025em;text-wrap:balance;margin-bottom:20px; }
#page-apresentacao h3 { color:var(--pres-text);font-weight:700;font-size:22px;line-height:1.25;margin-bottom:12px; }
#page-apresentacao .pres-lead { font-size:clamp(16px,1.35vw,19px);line-height:1.65;color:var(--pres-muted);max-width:720px;margin-bottom:24px; }
#page-apresentacao .pres-copy > p:not(.pres-lead) { font-size:15px;line-height:1.8;color:var(--pres-muted);margin-bottom:28px; }
#page-apresentacao .pres-hero-grid { display:grid;grid-template-columns:1.1fr 1fr;gap:var(--pres-space);align-items:center;min-height:calc(100svh - var(--pres-toolbar) - var(--pres-controls) - 84px); }
#page-apresentacao .pres-cover { background:radial-gradient(ellipse at 100% 0,rgba(0,180,216,.13),transparent 60%),var(--pres-bg); }
#page-apresentacao .pres-hero-media { box-shadow:0 24px 70px rgba(0,0,0,.18); }
#page-apresentacao .pres-image-note { font-size:12px;line-height:1.6;color:var(--pres-muted);margin:18px 0 0;text-align:right; }
#page-apresentacao .pres-action { display:inline-flex;align-items:center;justify-content:space-between;gap:30px;padding:16px 22px;min-height:52px;border-radius:8px;background:var(--pres-accent);color:#082a4a;font-size:14px;font-weight:700;transition:background .15s; }
#page-apresentacao .pres-action:hover { background:#b0effc; }
#page-apresentacao .pres-action > span { font-size:22px;line-height:1; }
#page-apresentacao .pres-split { display:grid;grid-template-columns:1fr 1fr;gap:var(--pres-space);align-items:center; }
#page-apresentacao .pres-media { min-width:0;overflow:hidden;border-radius:var(--pres-radius);background:#fff;color:#15374f;margin:0; }
#page-apresentacao .pres-media > img { display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--pres-paper); }
#page-apresentacao .pres-media > figcaption { padding:16px 20px;font-size:12px;line-height:1.5;display:flex;align-items:center;justify-content:space-between;gap:12px; }
#page-apresentacao .pres-media > figcaption strong { font-size:17px; }
#page-apresentacao .pres-hero-media > img { aspect-ratio:1; }
#page-apresentacao .pres-hero-media > figcaption > span { color:#526777;text-transform:uppercase;letter-spacing:.08em;font-size:10px; }
#page-apresentacao .pres-stats { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin:28px 0 0; }
#page-apresentacao .pres-stats > div { min-width:0;border-top:1px solid var(--pres-rule);padding:20px 0;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:8px; }
#page-apresentacao .pres-stats dt { color:var(--pres-muted);font-size:12px;line-height:1.5; }
#page-apresentacao .pres-stats dd { color:var(--pres-text);font-size:clamp(28px,3.2vw,46px);font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums;margin:0; }
#page-apresentacao .pres-stats-three { grid-template-columns:repeat(3,minmax(0,1fr)); }
#page-apresentacao .pres-stats-three dd { font-size:clamp(21px,2.5vw,36px); }
#page-apresentacao .pres-portfolio { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px; }
#page-apresentacao .pres-portfolio article { overflow:hidden;border:1px solid var(--pres-rule);border-radius:var(--pres-radius);background:var(--pres-panel); }
#page-apresentacao .pres-portfolio-photo img { display:block;width:100%;height:280px;object-fit:contain;background:var(--pres-paper); }
#page-apresentacao .pres-portfolio-copy { padding:28px; }
#page-apresentacao .pres-line-logo { display:block;max-width:180px;height:30px;object-fit:contain;object-position:left;margin-bottom:24px; }
#page-apresentacao .pres-portfolio-copy h3 { font-size:30px; }
#page-apresentacao .pres-portfolio-copy p { color:var(--pres-muted);font-size:14px;line-height:1.7;margin-bottom:24px; }
#page-apresentacao .pres-text-link { color:var(--pres-accent);display:inline-flex;align-items:center;gap:30px;min-height:44px;font-size:13px;font-weight:600; }
#page-apresentacao .pres-text-link:hover { text-decoration:underline;text-underline-offset:5px; }
#page-apresentacao .pres-paper { --pres-text:#15374f;--pres-muted:#506572;--pres-accent:#006d87;--pres-rule:rgba(21,55,79,.18);background:var(--pres-paper); }
#page-apresentacao .pres-navy { background:var(--pres-navy); }
#page-apresentacao .pres-ceramics { display:grid;grid-template-columns:1fr 1fr;gap:24px; }
#page-apresentacao .pres-ceramics img { max-height:330px;background:white; }
#page-apresentacao .pres-variants { margin:24px 0 0;padding:0;list-style:none; }
#page-apresentacao .pres-variants li { display:flex;align-items:center;gap:24px;padding:16px 0;border-top:1px solid var(--pres-rule); }
#page-apresentacao .pres-variants strong { min-width:72px;color:var(--pres-accent);font-size:18px; }
#page-apresentacao .pres-variants span { font-size:13px;line-height:1.5;color:var(--pres-muted); }
#page-apresentacao .pres-product-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px; }
#page-apresentacao .pres-product img { aspect-ratio:1;background:white; }
#page-apresentacao .pres-product figcaption { padding:14px 16px; }
#page-apresentacao .pres-product figcaption > span { color:#647c8c;font-size:11px; }
#page-apresentacao .pres-fill img { object-fit:cover; }
#page-apresentacao .pres-thinkx-brand { display:block;width:180px;height:45px;object-fit:contain;object-position:left;margin:-10px 0 28px; }
#page-apresentacao .pres-thinkx-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px; }
#page-apresentacao .pres-thinkx-grid article { display:grid;grid-template-columns:140px 1fr;gap:22px;align-items:center;border:1px solid var(--pres-rule);padding:20px;border-radius:12px; }
#page-apresentacao .pres-thinkx-grid img { aspect-ratio:1; }
#page-apresentacao .pres-thinkx-grid h3 { font-size:20px; }
#page-apresentacao .pres-thinkx-grid p { font-size:14px;line-height:1.6;color:var(--pres-muted);margin-bottom:0; }
#page-apresentacao .pres-differences { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 60px; }
#page-apresentacao .pres-differences article { display:flex;gap:24px;padding:28px 0;border-top:1px solid var(--pres-rule); }
#page-apresentacao .pres-differences article > span { color:var(--pres-accent);font-size:14px;padding-top:4px; }
#page-apresentacao .pres-differences h3 { font-size:22px; }
#page-apresentacao .pres-differences p { font-size:15px;line-height:1.7;color:var(--pres-muted);margin-bottom:0; }
#page-apresentacao .pres-results { display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center; }
#page-apresentacao .pres-results .pres-stats { margin-top:0; }
#page-apresentacao .pres-results .pres-stats dd { font-size:clamp(36px,4vw,60px); }
#page-apresentacao .pres-testimonial { margin:0;padding-left:36px;border-left:1px solid var(--pres-rule); }
#page-apresentacao .pres-testimonial > span { font-size:100px;line-height:.7;color:var(--pres-accent); }
#page-apresentacao .pres-testimonial blockquote { font-size:clamp(26px,2.8vw,40px);font-weight:300;line-height:1.4;letter-spacing:-.01em; }
#page-apresentacao .pres-testimonial figcaption { color:var(--pres-accent);font-size:14px;margin-top:24px; }
#page-apresentacao .pres-contact { min-height:calc(100svh - var(--pres-toolbar) - var(--pres-controls) - 84px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center; }
#page-apresentacao .pres-contact h2 { font-size:clamp(46px,6vw,84px); }
#page-apresentacao .pres-contact .pres-heading { margin-bottom:8px; }
#page-apresentacao .pres-contact-motto { font-size:18px;color:var(--pres-accent);line-height:1.6;margin-bottom:32px;max-width:660px; }
#page-apresentacao .pres-contact-links { display:flex;flex-wrap:wrap;gap:16px 36px;margin-top:48px;padding-top:24px;border-top:1px solid var(--pres-rule);width:100%; }
#page-apresentacao .pres-contact-links a { color:var(--pres-muted);font-size:13px;min-height:44px;display:flex;align-items:center; }
#page-apresentacao .pres-controls { position:fixed;inset:auto 0 0;z-index:214;display:flex;align-items:center;justify-content:center;gap:28px;height:calc(var(--pres-controls) + env(safe-area-inset-bottom));padding:8px 20px calc(8px + env(safe-area-inset-bottom));background:var(--pres-bg);border-top:1px solid var(--pres-rule);color:var(--pres-text); }
#page-apresentacao .pres-controls > button { display:flex;align-items:center;justify-content:center;gap:12px;min-width:44px;min-height:44px;padding:0 12px;font-size:12px;border-radius:6px; }
#page-apresentacao .pres-controls > button > span:first-child:not(.pres-control-word),#page-apresentacao .pres-controls > button > span:last-child:not(.pres-control-word) { font-size:22px; }
#page-apresentacao .pres-controls > button:hover:not(:disabled) { background:var(--pres-panel); }
#page-apresentacao .pres-controls > button:disabled { opacity:.3;cursor:default; }
#page-apresentacao .pres-chapter-picker { position:relative;display:flex;align-items:center;min-width:240px; }
#page-apresentacao .pres-chapter-picker select { appearance:none;width:100%;min-height:44px;border:1px solid var(--pres-rule);border-radius:6px;background:var(--pres-panel);color:var(--pres-text);padding:8px 40px 8px 16px;cursor:pointer;font-family:inherit;font-size:13px;font-variant-numeric:tabular-nums; }
#page-apresentacao .pres-chapter-picker > span[aria-hidden] { position:absolute;right:15px;pointer-events:none;color:var(--pres-accent); }
#page-apresentacao .pres-progress { position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--pres-panel); }
#page-apresentacao .pres-progress > div { height:100%;width:0;background:var(--pres-accent); }
#page-apresentacao :is(button,a,select):focus-visible { outline:3px solid var(--pres-accent);outline-offset:4px; }
@media(max-width:1100px) { #page-apresentacao .pres-toolbar-label { display:none; } #page-apresentacao .pres-thinkx-grid article { grid-template-columns:100px 1fr;gap:16px;padding:16px; } }
@media(max-width:900px) {
 #page-apresentacao .pres-hero-grid,#page-apresentacao .pres-split,#page-apresentacao .pres-results { grid-template-columns:minmax(0,1fr);gap:36px; }
 #page-apresentacao .pres-hero-product { max-width:560px;width:100%;justify-self:center; }
 #page-apresentacao h1 { max-width:700px;font-size:clamp(38px,6.5vw,58px); }
 #page-apresentacao .pres-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 #page-apresentacao .pres-thinkx-grid { grid-template-columns:minmax(0,1fr); }
 #page-apresentacao .pres-thinkx-grid article { grid-template-columns:130px 1fr; }
 #page-apresentacao .pres-differences { gap:0 30px; }
 #page-apresentacao .pres-testimonial { padding-left:24px; }
}
@media(max-width:600px) {
 #page-apresentacao { --pres-toolbar:64px;--pres-controls:64px;--pres-radius:12px; }
 #page-apresentacao .pres-toolbar { padding-inline:16px;gap:14px; }
 #page-apresentacao .pres-brand-pair { gap:9px; }
 #page-apresentacao .pres-brand-pair img { width:116px;height:24px; }
 #page-apresentacao .pres-brand-pair img:last-child { width:94px; }
 #page-apresentacao .pres-brand-pair > span { height:20px; }
 #page-apresentacao .pres-back { width:44px;justify-content:center; }
 #page-apresentacao .pres-back > span { display:none; }
 #page-apresentacao .pres-section { padding-top:calc(var(--pres-toolbar) + 32px);padding-bottom:calc(var(--pres-controls) + 32px); }
 #page-apresentacao h1 { font-size:clamp(32px,8.7vw,46px);letter-spacing:-.025em; }
 #page-apresentacao .pres-eyebrow { font-size:10px;letter-spacing:.12em;gap:12px; }
 #page-apresentacao .pres-portfolio,#page-apresentacao .pres-ceramics,#page-apresentacao .pres-differences { grid-template-columns:minmax(0,1fr); }
 #page-apresentacao .pres-portfolio-photo img { height:250px; }
 #page-apresentacao .pres-portfolio-copy { padding:22px; }
 #page-apresentacao .pres-product-grid { gap:14px; }
 #page-apresentacao .pres-product figcaption { padding:12px;gap:6px; }
 #page-apresentacao .pres-product figcaption strong { font-size:14px; }
 #page-apresentacao .pres-thinkx-grid article { grid-template-columns:90px 1fr;gap:16px;padding:16px; }
 #page-apresentacao .pres-thinkx-grid h3 { font-size:18px; }
 #page-apresentacao .pres-thinkx-grid p { font-size:13px; }
 #page-apresentacao .pres-stats-three { gap:12px; }
 #page-apresentacao .pres-stats-three dd { font-size:20px; }
 #page-apresentacao .pres-stats-three dt { font-size:11px; }
 #page-apresentacao .pres-controls { gap:10px;padding-inline:12px; }
 #page-apresentacao .pres-control-word { display:none; }
 #page-apresentacao .pres-chapter-picker { min-width:0;width:min(240px,calc(100vw - 136px)); }
 #page-apresentacao .pres-chapter-picker select { padding-left:10px;font-size:12px; }
 #page-apresentacao .pres-contact-links { gap:0 24px;margin-top:32px; }
}
@media(prefers-reduced-motion:reduce) { #page-apresentacao .pres-presenter { scroll-behavior:auto; } #page-apresentacao *,#page-apresentacao *::before,#page-apresentacao *::after { animation:none!important;transition:none!important; } }

body.slide-mode .top-nav, body.slide-mode .sub-header, body.slide-mode .ctx-sidebar { display:none!important; }
body.slide-mode { overflow:hidden; }
body.slide-mode .main-area { padding-top:0!important; }
#page-apresentacao { padding:0!important;margin:0!important; }
@media(min-width:1100px) {
 #page-apresentacao .pres-product img { height:clamp(150px,18vh,190px);aspect-ratio:auto; }
 #page-apresentacao .pres-portfolio-photo img { height:clamp(220px,28vh,280px); }
}
@media(max-width:600px) {
 #page-apresentacao .pres-contact h2 { font-size:clamp(32px,9vw,46px); }
 #page-apresentacao .pres-contact .pres-heading { max-width:100%; }
}
@media(min-width:1100px) { #page-apresentacao .pres-ceramics img { max-height:clamp(220px,30vh,300px); } }

/* Story 1.6 — black and gold campaign cover; square photographic frames. */
#page-apresentacao #ed-01 {
 --pres-text:#ead9ad; --pres-muted:#c5bda9; --pres-accent:#d9bc78;
 --pres-rule:rgba(217,188,120,.22);
 background:radial-gradient(ellipse at 84% 68%,rgba(151,112,52,.21),transparent 49%),#070706;
 position:relative;isolation:isolate;
}
#page-apresentacao #ed-01::before {
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.17;
 background:repeating-radial-gradient(ellipse at 110% 120%,transparent 0 37px,rgba(184,158,103,.4) 38px,transparent 39px 74px);
 mask-image:linear-gradient(120deg,transparent 36%,#000);
}
#page-apresentacao #ed-01 h1 {color:#d8c28e;font-weight:500;text-shadow:0 0 36px rgba(210,171,86,.13);}
#page-apresentacao #ed-01 h1 em {color:#f3e5c3;font-weight:700;text-shadow:0 0 32px rgba(234,199,121,.22);}
#page-apresentacao #ed-01 .pres-action {background:linear-gradient(110deg,#ebd8a7,#bb9c5a);color:#18140b;box-shadow:0 6px 30px rgba(190,152,74,.17);}
#page-apresentacao #ed-01 .pres-action:hover {background:#f3e5c3;}
#page-apresentacao #ed-01 .pres-hero-media {background:#0b0a08;color:#ead9ad;border:1px solid rgba(217,188,120,.22);box-shadow:0 0 80px rgba(178,131,52,.12),0 30px 80px #0008;}
#page-apresentacao #ed-01 .pres-hero-media img {background:#090806;}
#page-apresentacao #ed-01 .pres-hero-media figcaption {background:#100e0a;border-top:1px solid rgba(217,188,120,.18);}
#page-apresentacao #ed-01 .pres-hero-media figcaption > span {color:#b9a77f;}
#page-apresentacao .pres-media > img,
#page-apresentacao .pres-portfolio-photo img {
 width:100%;height:auto;max-height:none;aspect-ratio:1 / 1;object-fit:cover;object-position:center;
}
.brand-mockup-image {height:auto;aspect-ratio:1 / 1;}
.brand-mockup-image img {display:block;object-fit:cover;}
.uniform-detail > img,.brand-photo-grid img,.product-img-grid img {
 display:block;width:100%;height:auto;max-height:none;aspect-ratio:1 / 1;object-fit:cover;object-position:center;
}