/*
 * site.css — the public site. Every page is light; the body class set by
 * public_open() (lib/view.php) picks the palette:
 *   .div-home         umbrella pages (home, about, contact, legal) — white, violet + red
 *   .div-productions  Snazzy Productions — white/black, red "REC" accent
 *   .div-3d           Snazzy 3D — lavender, violet / cyan
 * The :root tokens below are a dark fallback that no public page uses any more.
 * System font stack, no web fonts (the CSP allows only this site's own files).
 */
:root {
    --bg: #0a0a0f;
    --bg-alt: #111119;
    --surface: #16161f;
    --surface-2: #1d1d29;
    --ink: #f5f5f7;
    --ink-2: #c8c8d4;
    --muted: #8e8ea0;
    --line: rgba(255, 255, 255, .09);
    --line-2: rgba(255, 255, 255, .16);
    --danger: #f87171;
    --success: #4ade80;
    --radius: 16px;
    --shadow: 0 20px 50px -20px rgba(0, 0, 0, .7);
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --container: 1200px;

    /* Division palettes */
    --prod: #e5322d;  --prod-2: #ff6a3d;  --prod-ink: #ffffff;  --prod-text: #ff7a6e;
    --p3d: #7c3aed;   --p3d-2: #0891b2;   --p3d-ink: #ffffff;   --p3d-text: #a78bfa;

    /* Active accent (umbrella default: both palettes blended) */
    --accent: #7c3aed;
    --accent-2: #ea580c;
    --accent-ink: #ffffff;
    --accent-text: #c4b5fd;

    /* Theme surfaces (dark default; light divisions override them below) */
    --scheme: dark;
    --tint-1: rgba(255, 255, 255, .04);
    --tint-2: rgba(255, 255, 255, .08);
    --header-bg: rgba(10, 10, 15, .78);
    --eyebrow-bg: rgba(10, 10, 15, .4);
    --footer-bg: #07070b;
    --hero-fade: linear-gradient(90deg, rgba(10, 10, 15, .94) 0%, rgba(10, 10, 15, .72) 45%, rgba(10, 10, 15, .25) 100%);
    --hero-fade-mobile: linear-gradient(0deg, var(--bg) 0%, rgba(10, 10, 15, .78) 50%, rgba(10, 10, 15, .55) 100%);
}
/*
 * Division themes: both are light and bright, each with its own character.
 *   Productions — a clean photo studio: white paper, black type, one red "REC" accent.
 *   3D          — a bright maker space: lavender-white, violet + cyan, softer corners,
 *                 a faint build-plate dot grid behind everything.
 */
.div-productions {
    --scheme: light;
    --bg: #ffffff; --bg-alt: #f6f5f1; --surface: #ffffff; --surface-2: #efede7;
    --ink: #121212; --ink-2: #3a3a3a; --muted: #6b6b6b;
    --line: rgba(18, 18, 18, .1); --line-2: rgba(18, 18, 18, .2);
    --tint-1: rgba(18, 18, 18, .04); --tint-2: rgba(18, 18, 18, .08);
    --shadow: 0 18px 40px -22px rgba(0, 0, 0, .28);
    --danger: #c62828; --success: #15803d;
    --header-bg: rgba(255, 255, 255, .9); --eyebrow-bg: #ffffff; --footer-bg: #f6f5f1;
    --hero-fade: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .94) 36%, rgba(255, 255, 255, 0) 70%);
    --hero-fade-mobile: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, .92) 55%, rgba(255, 255, 255, .6) 100%);
    --accent: #121212; --accent-2: #121212; --accent-ink: #ffffff; --accent-text: #d1291e;
}
.div-3d {
    --scheme: light;
    --bg: #fbfaff; --bg-alt: #f2f0fd; --surface: #ffffff; --surface-2: #ece9fb;
    --ink: #16132b; --ink-2: #3e3a5a; --muted: #6f6a8a;
    --line: rgba(22, 19, 43, .1); --line-2: rgba(22, 19, 43, .18);
    --tint-1: rgba(109, 40, 217, .05); --tint-2: rgba(109, 40, 217, .1);
    --shadow: 0 18px 40px -22px rgba(76, 29, 149, .35);
    --danger: #c62828; --success: #15803d;
    --radius: 20px;
    --header-bg: rgba(251, 250, 255, .9); --eyebrow-bg: #ffffff; --footer-bg: #f2f0fd;
    --hero-fade: linear-gradient(90deg, #fbfaff 0%, rgba(251, 250, 255, .92) 38%, rgba(251, 250, 255, 0) 74%);
    --hero-fade-mobile: linear-gradient(0deg, #fbfaff 0%, rgba(251, 250, 255, .92) 55%, rgba(251, 250, 255, .6) 100%);
    --accent: #6d28d9; --accent-2: #0891b2; --accent-ink: #ffffff; --accent-text: #6d28d9;
}
/* Umbrella pages (home, about, contact, legal): bright and neutral, accents from both divisions
   (3D violet + Productions red), so the home of both feels like neither one alone. */
.div-home {
    --scheme: light;
    --bg: #ffffff; --bg-alt: #f7f6fb; --surface: #ffffff; --surface-2: #f0eef6;
    --ink: #15131d; --ink-2: #3d3a4a; --muted: #6e6a7c;
    --line: rgba(21, 19, 29, .1); --line-2: rgba(21, 19, 29, .18);
    --tint-1: rgba(21, 19, 29, .04); --tint-2: rgba(21, 19, 29, .08);
    --shadow: 0 18px 40px -22px rgba(40, 20, 80, .3);
    --danger: #c62828; --success: #15803d;
    --header-bg: rgba(255, 255, 255, .9); --eyebrow-bg: #ffffff; --footer-bg: #f7f6fb;
    --hero-fade: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .92) 34%, rgba(255, 255, 255, 0) 66%);
    --hero-fade-mobile: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, .92) 55%, rgba(255, 255, 255, .6) 100%);
    --accent: #6d28d9; --accent-2: #d1291e; --accent-ink: #ffffff; --accent-text: #5b21b6;
    --prod-text: #d1291e; --p3d-text: #6d28d9;
}
body.div-3d { background-image: radial-gradient(rgba(109, 40, 217, .09) 1px, transparent 1.2px); background-size: 22px 22px; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { color-scheme: var(--scheme); }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.025em; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }
.center { text-align: center; justify-content: center; }
.note { margin-top: 28px; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 780px; }
.icon { flex: none; vertical-align: -3px; }
.rounded { border-radius: var(--radius); }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--surface); color: var(--ink); padding: 10px 16px; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; outline: 3px solid var(--accent); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent-text) 70%, transparent); outline-offset: 2px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid transparent;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); font: inherit; font-weight: 650;
    cursor: pointer; text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s; }
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 10px 28px -6px color-mix(in srgb, var(--accent) 60%, transparent); }
.btn-ghost { background: var(--tint-1); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--tint-2); box-shadow: none; }
.btn-light { background: #fff; color: #0a0a0f; }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.btn-outline-light:hover { background: rgba(255, 255, 255, .1); box-shadow: none; }
.btn-prod { background: linear-gradient(135deg, var(--prod), var(--prod-2)); color: var(--prod-ink); }
.btn-3d { background: linear-gradient(135deg, var(--p3d), var(--p3d-2)); color: var(--p3d-ink); }
.btn-sm { padding: 6px 14px; font-size: .9rem; }
.btn-lg { padding: 14px 26px; font-size: 1.05rem; }
.btn-block { width: 100%; justify-content: center; }

/* Notice + flash */
.notice-bar { background: var(--accent); color: var(--accent-ink); text-align: center; padding: 8px 16px; font-size: .9rem; }
.flash-wrap { padding-top: 16px; }
.alert { padding: 12px 16px; border-radius: 12px; margin-bottom: 12px; border: 1px solid; }
.alert-success { background: rgba(74, 222, 128, .1); border-color: rgba(74, 222, 128, .35); color: #bbf7d0; }
.alert-error { background: rgba(248, 113, 113, .1); border-color: rgba(248, 113, 113, .4); color: #fecaca; }
.alert-info { background: rgba(96, 165, 250, .1); border-color: rgba(96, 165, 250, .35); color: #bfdbfe; }

/* Header */
/*
 * Header (partials/nav.php). Sticky, blurred; site.js adds .is-scrolled once the page moves.
 * Division header, left to right, each group set apart by a thin divider (.nav-sep):
 *   brand | menu as pill tabs (active = tinted pill) | language | CTA | round icon buttons
 * Everything in the bar is 40 px high. At 900 px and below the menu, language and CTA
 * move into the drawer (big rows with icons); the icon buttons and the menu button stay in the bar.
 */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    border-bottom: 1px solid var(--line); transition: box-shadow .2s, border-color .2s; }
.site-header.is-scrolled { box-shadow: 0 12px 30px -20px rgba(24, 14, 48, .45); border-bottom-color: transparent; }
.nav-row { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-mark { width: 30px; height: 30px; border-radius: 9px; flex: none;
    background: conic-gradient(from 210deg, var(--prod), var(--prod-2), var(--p3d), var(--p3d-2), var(--prod));
    box-shadow: inset 0 0 0 7px var(--bg); }
.brand-word { font-weight: 850; font-size: 1.25rem; letter-spacing: -.04em; display: inline-flex; align-items: baseline; gap: 6px; }
.brand-word small { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.lang-switch { display: inline-flex; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; }
.lang-switch a { padding: 4px 10px; font-size: .78rem; font-weight: 700; color: var(--muted); }
.lang-switch a.active { background: var(--ink); color: var(--bg); }
.lang-switch a:hover { text-decoration: none; }
.site-header .lang-switch { height: 40px; padding: 3px; gap: 2px; align-items: center; background: var(--surface); flex: none; }
.site-header .lang-switch a { display: grid; place-items: center; height: 32px; min-width: 38px; padding: 0 10px; border-radius: 999px; letter-spacing: .04em; }
.site-header .lang-switch a:not(.active):hover { color: var(--ink); background: var(--tint-2); }

.site-header-div .nav-row { justify-content: flex-start; gap: 14px; }
.site-header-div .brand { margin-right: auto; flex: none; }
.site-nav { display: flex; align-items: center; gap: 14px; }
.nav-sep { width: 1px; height: 26px; background: var(--line-2); flex: none; }
.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--tint-1); }
.nav-link { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; color: var(--ink-2); font-weight: 600; font-size: .94rem;
    white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s; }
.nav-link .icon { display: none; }
.nav-link:hover { color: var(--ink); background: var(--tint-2); text-decoration: none; }
.nav-link.active { color: var(--accent-text); font-weight: 700; background: color-mix(in srgb, var(--accent-text) 13%, var(--surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-text) 30%, transparent), 0 1px 2px rgba(0, 0, 0, .06); }
.site-header .nav-cta { height: 40px; padding: 0 18px; font-size: .92rem; white-space: nowrap; flex: none; }
/* Split mode (lib/site3d.php): the production house links to the 3D site on its own domain. */
.site-header .nav-ext { height: 40px; padding: 0 14px; font-size: .9rem; white-space: nowrap; flex: none; }
.nav-ext small { font-size: .78rem; font-weight: 600; color: var(--muted); }
.footer-sister { display: block; margin-top: 4px; }
.nav-icons { display: flex; align-items: center; gap: 8px; flex: none; }
.nav-icons > .nav-icon { order: 0; margin: 0; }   /* shop.css still orders the old .nav-account link */
.nav-icon { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink-2);
    background: var(--surface); border: 1px solid var(--line-2); transition: color .15s, background .15s, border-color .15s; }
.nav-icon .icon { width: 19px; height: 19px; }
.nav-icon:hover { color: var(--ink); background: var(--tint-1); border-color: color-mix(in srgb, var(--accent-text) 45%, var(--line-2)); text-decoration: none; }
.nav-icon.active { color: var(--accent-text); background: color-mix(in srgb, var(--accent-text) 12%, var(--surface)); border-color: color-mix(in srgb, var(--accent-text) 40%, transparent); }
.nav-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: .75rem; font-weight: 800;
    color: var(--accent-ink); background: var(--accent); }
.nav-icon .nav-count { position: absolute; top: -6px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px; font-size: .7rem; line-height: 1; box-shadow: 0 0 0 2px var(--bg); }
/* Tooltip (the same name is the aria-label). The last one is right-aligned so it never sticks out of the page. */
.nav-icon[data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, -4px); z-index: 5;
    padding: 5px 9px; border-radius: 7px; background: var(--ink); color: var(--bg); font-size: .76rem; font-weight: 600; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
.nav-icons > .nav-icon:last-of-type[data-tip]::after { left: auto; right: 0; transform: translateY(-4px); }
.nav-icon[data-tip]:hover::after, .nav-icon[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.nav-icons > .nav-icon:last-of-type[data-tip]:hover::after, .nav-icons > .nav-icon:last-of-type[data-tip]:focus-visible::after { transform: none; }
.nav-toggle { display: none; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; color: var(--ink); }
.nav-toggle span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; margin: 2px 0; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* 901-1180 px: a long menu (3D) needs the room: tighter tabs; below 1100 px the CTA (the same page as one of the tabs) waits for the drawer. */
@media (min-width: 901px) and (max-width: 1180px) {
    .site-header-div .nav-row, .site-nav { gap: 10px; }
    .nav-link { padding: 0 11px; font-size: .92rem; }
}
@media (min-width: 901px) and (max-width: 1099px) { .nav-many .nav-cta, .nav-many .nav-actions .nav-sep { display: none; } .nav-ext small { display: none; } }
@media (min-width: 901px) and (max-width: 1000px) { .nav-link { padding: 0 9px; } .brand-word small { display: none; } }

@media (max-width: 900px) {
    .nav-toggle { display: inline-grid; align-content: center; justify-items: center; }
    .site-header-div .nav-row { gap: 10px; }
    .nav-sep { display: none; }
    .site-header-div .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 14px;
        padding: 14px 16px 18px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 26px 40px -26px rgba(24, 14, 48, .45);
        max-height: calc(100vh - 68px); max-height: calc(100dvh - 68px); overflow-y: auto; }
    .site-header-div .site-nav.open { display: flex; }
    .nav-links { flex-direction: column; align-items: stretch; gap: 6px; padding: 0; border: 0; border-radius: 0; background: none; }
    .nav-link { display: flex; height: 52px; padding: 0 16px; gap: 14px; border-radius: 14px; font-size: 1.02rem; border: 1px solid var(--line); background: var(--surface); }
    .nav-link .icon { display: inline-block; width: 22px; height: 22px; color: var(--muted); }
    .nav-link.active .icon { color: inherit; }
    .nav-link::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); opacity: .35; }
    .site-header-div .nav-actions { justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
    .site-header-div .nav-actions .nav-cta { flex: 1; justify-content: center; height: 48px; font-size: 1rem; }
    .site-header-div .nav-actions { flex-wrap: wrap; }
    .site-header-div .nav-actions .nav-ext { order: 5; flex: 1 1 100%; justify-content: center; height: 48px; font-size: 1rem; }
    .site-header .lang-switch { height: 48px; }
    .site-header .lang-switch a { height: 40px; min-width: 46px; }
}
@media (max-width: 360px) { .brand-word small { display: none; } }

.subnav { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.subnav-row { display: flex; align-items: center; gap: 24px; height: 46px; overflow-x: auto; scrollbar-width: none; }
.subnav-row::-webkit-scrollbar { display: none; }
.subnav-name { font-weight: 750; font-size: .85rem; color: var(--accent-text); white-space: nowrap; }
.subnav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.subnav ul a { display: block; padding: 5px 12px; border-radius: 999px; color: var(--ink-2); font-size: .9rem; white-space: nowrap; }
.subnav ul a:hover { color: var(--ink); text-decoration: none; background: var(--tint-1); }
.subnav ul a.active { color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.subnav-cart { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; color: var(--ink-2); font-size: .9rem; white-space: nowrap; }
.subnav-cart:hover, .subnav-cart.active { color: var(--ink); text-decoration: none; background: var(--tint-1); }
.subnav-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: .75rem; font-weight: 800;
    color: var(--accent-ink); background: var(--accent); }

@media (max-width: 960px) { .subnav-name { display: none; } }

/* Hero */
.hero { position: relative; padding: 110px 0 96px; overflow: hidden; isolation: isolate; }
.hero-photo { min-height: min(86vh, 760px); display: flex; align-items: center; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero-photo::after { content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--hero-fade),
                linear-gradient(0deg, var(--bg) 0%, transparent 30%); }
.hero-inner { position: relative; }
.eyebrow { display: inline-block; font-size: .76rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text);
    border: 1px solid color-mix(in srgb, var(--accent-text) 40%, transparent); background: var(--eyebrow-bg);
    padding: 6px 14px; border-radius: 999px; margin-bottom: 20px; }
.hero h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); font-weight: 850; max-width: 820px; }
.grad-text { background: linear-gradient(90deg, var(--accent-text), color-mix(in srgb, var(--accent-2) 80%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.div-home .grad-text { background-image: linear-gradient(90deg, var(--p3d-text), var(--prod)); }
.lead { font-size: 1.15rem; color: var(--ink-2); max-width: 580px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 36px; list-style: none; padding: 0; margin: 44px 0 0; }
.hero-stats li { display: grid; }
.hero-stats strong { font-size: 1.7rem; font-weight: 850; letter-spacing: -.03em; }
.hero-stats span { color: var(--muted); font-size: .9rem; }
@media (max-width: 700px) {
    .hero { padding: 72px 0 56px; }
    .hero-photo { min-height: 0; }
    .hero-photo::after { background: var(--hero-fade-mobile); }
}

/* Sections */
.section { padding: 84px 0; }
.section-alt { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 44px; }
.section-head h2 { font-size: clamp(1.8rem, 3.8vw, 2.6rem); font-weight: 820; }
.section-head p { color: var(--muted); font-size: 1.05rem; }
.section-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; max-width: none; text-align: left; }
.section-head-row h2 { margin: 0; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } .section { padding: 56px 0; } }

.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--accent-text); }
.link-arrow .icon { transition: transform .15s; }
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover .icon, a:hover > .link-arrow .icon { transform: translateX(3px); }

.feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; transition: transform .2s, border-color .2s; display: flex; flex-direction: column; }
.feature:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent-text) 40%, transparent); }
.feature-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; color: var(--accent-ink); margin-bottom: 18px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.feature h3 { font-size: 1.12rem; }
.feature p { color: var(--muted); margin: 0 0 14px; flex: 1; }
.feature p:last-child { margin: 0; }

/* Home: the two division cards */
.div-split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 860px) { .div-split { grid-template-columns: 1fr; } }
.div-card { position: relative; display: block; overflow: hidden; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); isolation: isolate; }
.div-card:hover { text-decoration: none; }
.div-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.div-card:hover img { transform: scale(1.04); }
.div-card-body { padding: 26px 28px 30px; }
.div-card h3 { font-size: 1.5rem; margin: 12px 0 14px; }
.div-card-tag { display: inline-flex; align-items: center; gap: 8px; font-weight: 750; font-size: .85rem; letter-spacing: .04em; }
.div-card-productions { --accent-text: var(--prod-text); --accent: var(--prod); }
.div-card-3d { --accent-text: var(--p3d-text); --accent: var(--p3d); }
.div-card .div-card-tag, .div-card .link-arrow, .div-card .check-list .icon { color: var(--accent-text); }
.div-card::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--accent); transform: scaleX(.15); transform-origin: left; transition: transform .4s; }
.div-card:hover::after { transform: scaleX(1); }

/* Galleries */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery-6 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .gallery, .gallery-6 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .gallery, .gallery-6 { grid-template-columns: 1fr; } }
.tile { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.tile img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.tile:hover img { transform: scale(1.05); }
.tile figcaption { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
    border-radius: 999px; background: rgba(10, 10, 15, .72); backdrop-filter: blur(8px); font-size: .86rem; font-weight: 600; color: #fff; }
.tile-info figcaption { left: 0; right: 0; bottom: 0; border-radius: 0; display: grid; gap: 2px; padding: 40px 16px 14px;
    background: linear-gradient(0deg, rgba(10, 10, 15, .92), transparent); backdrop-filter: none; }
.tile-info figcaption small { color: rgba(255, 255, 255, .78); font-weight: 450; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot-productions { background: var(--prod); }
.dot-3d { background: var(--p3d-text); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.chip { padding: 6px 16px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); font-size: .92rem; }
.chip:hover { text-decoration: none; color: var(--ink); background: var(--tint-1); }
.chip.active { color: var(--accent-ink); border-color: transparent; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }

/* Plans / pricing */
.plan { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 6px; }
.plan-featured { border-color: color-mix(in srgb, var(--accent) 70%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface)); }
.plan-badge { position: absolute; top: -12px; right: 20px; padding: 3px 12px; border-radius: 999px; font-size: .78rem; font-weight: 750;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); }
.plan-price { color: var(--muted); }
.plan-price small { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.plan-price span { font-size: 2.2rem; font-weight: 850; color: var(--ink); letter-spacing: -.03em; }
.check-list { list-style: none; padding: 0; margin: 8px 0 22px; display: grid; gap: 10px; flex: 1; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); }
.check-list .icon { color: var(--accent-text); margin-top: 3px; }

/* Steps */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: s; }
.steps li { position: relative; padding: 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.steps h3 { font-size: 1.08rem; margin-top: 16px; }
.steps p { color: var(--muted); margin: 0; }
.step-num { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-weight: 800;
    border: 1px solid color-mix(in srgb, var(--accent-text) 50%, transparent); color: var(--accent-text); }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* Home: combined projects */
.combo { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 44px; border-radius: 24px;
    border: 1px solid var(--line); background: radial-gradient(80% 120% at 0% 0%, rgba(245, 158, 11, .12), transparent 60%),
    radial-gradient(80% 120% at 100% 100%, rgba(124, 58, 237, .16), transparent 60%), var(--surface); }
.combo h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.combo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.combo-list li { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 14px; background: var(--tint-1); border: 1px solid var(--line); color: var(--ink-2); }
.combo-list .icon { color: var(--accent-text); }
@media (max-width: 860px) { .combo { grid-template-columns: 1fr; padding: 28px 22px; } }

/* Materials */
.materials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 960px) { .materials { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .materials { grid-template-columns: 1fr; } }
.material { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.material header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.material h2 { font-size: 1.3rem; margin: 0; }
.badge-tech { font-size: .75rem; font-weight: 750; letter-spacing: .08em; padding: 3px 10px; border-radius: 999px; color: var(--accent-text); border: 1px solid color-mix(in srgb, var(--accent-text) 45%, transparent); }
.material > p { margin: 10px 0 18px; }
.meters { display: grid; gap: 10px; margin: 0; }
.meters div { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 12px; }
.meters dt { color: var(--ink-2); font-size: .9rem; }
.meters dd { margin: 0; height: 8px; border-radius: 999px; background: var(--tint-2); overflow: hidden; }
.meter { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.m1 { width: 20%; } .m2 { width: 40%; } .m3 { width: 60%; } .m4 { width: 80%; } .m5 { width: 100%; }

/* FAQ */
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 4px 20px; margin-bottom: 10px; }
.faq details[open] { border-color: color-mix(in srgb, var(--accent-text) 35%, transparent); }
.faq summary { cursor: pointer; font-weight: 620; padding: 14px 0; }
.faq details p { color: var(--muted); }

/* Call-to-action band */
.cta-band { position: relative; overflow: hidden; text-align: center; padding: 64px 28px; border-radius: 28px; color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.cta-band h2 { font-size: clamp(1.7rem, 3.8vw, 2.5rem); }
.cta-band p { opacity: .9; max-width: 560px; margin: 0 auto 26px; }
.cta-band .hero-actions { margin-top: 0; }
.div-home .cta-band { background: linear-gradient(120deg, var(--p3d), #9333ea 35%, var(--prod-2) 100%); }

/* Inner pages */
.page-hero { padding: 72px 0 36px; border-bottom: 1px solid var(--line);
    background: radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%), var(--bg-alt); }
.page-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.1rem); font-weight: 850; }
.prose h2 { font-size: 1.4rem; margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-2); }
.about-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; gap: 28px; } }
.about-divs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
@media (max-width: 480px) { .about-divs { grid-template-columns: 1fr; } }
.mini-div { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); color: var(--ink); background: var(--tint-1); }
.mini-div:hover { text-decoration: none; background: var(--tint-2); }
.mini-div span { display: grid; line-height: 1.3; }
.mini-div small { color: var(--muted); }
.mini-productions .icon { color: var(--prod); }
.mini-3d .icon { color: var(--p3d-text); }

/* Forms */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.card-img { border-radius: 12px; margin-bottom: 18px; aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.card-h { font-size: 1.15rem; }
.contact-grid { display: grid; grid-template-columns: 1.5fr .9fr; gap: 24px; align-items: start; }
.contact-info { display: grid; gap: 20px; }
.contact-info p { display: flex; gap: 10px; align-items: center; color: var(--ink-2); }
.contact-info .icon { color: var(--accent-text); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field > span { font-weight: 600; font-size: .92rem; color: var(--ink-2); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
input, select, textarea { font: inherit; width: 100%; padding: 11px 13px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg); color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .7; }
input:focus, select:focus, textarea:focus { border-color: var(--accent-text); outline: 3px solid color-mix(in srgb, var(--accent-text) 22%, transparent); }
.form .btn { justify-self: start; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Footer */
.site-footer { background: var(--footer-bg); color: var(--ink-2); padding: 64px 0 28px; border-top: 1px solid var(--line); }
.site-footer a { color: var(--ink-2); }
.site-footer a:hover { color: var(--ink); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-grid .brand { margin-bottom: 14px; }
.footer-addr { display: flex; gap: 8px; align-items: center; }
.footer-h { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); margin-top: 44px; padding-top: 22px; font-size: .88rem; color: var(--muted); }
.footer-legal { display: flex; gap: 18px; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > div:first-child { grid-column: 1 / -1; } }

/* Floating WhatsApp button (only when the 'whatsapp' setting is filled) */
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
    background: #25d366; color: #06280f; box-shadow: 0 12px 30px -8px rgba(37, 211, 102, .6); }
.wa-float .icon { width: 26px; height: 26px; }

/* Error pages */
.error-page { text-align: center; padding: 110px 20px; }
.error-page h1 { font-size: 6rem; background: linear-gradient(90deg, var(--p3d-text), var(--prod)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------------------------------------------------------------------------
 * Portfolio (lib/portfolio.php, productions/portfolio.php + project.php)
 * ------------------------------------------------------------------------- */
.section-tight { padding: 40px 0; }
.section-tight + .section-tight { padding-top: 0; }
.chip-n { font-size: .78em; opacity: .65; margin-left: 2px; }
.feature-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.feature-links .link-arrow:first-child { color: var(--ink-2); }

.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.pf-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .pf-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pf-grid, .pf-grid-3 { grid-template-columns: 1fr; } }
.pf-card { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: transform .2s, border-color .2s; }
.pf-card:hover { text-decoration: none; transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent-text) 45%, transparent); }
.pf-media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; }
.pf-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.pf-card:hover .pf-media img { transform: scale(1.05); }
.pf-noimg { display: grid; place-items: center; height: 100%; color: var(--muted); }
.pf-badges { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; }
.pf-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: .76rem; font-weight: 700;
    background: rgba(10, 10, 15, .72); backdrop-filter: blur(6px); color: #fff; }
.pf-badge .icon { width: 13px; height: 13px; }
.pf-body { display: grid; gap: 2px; padding: 14px 16px 16px; }
.pf-body strong { font-size: 1.02rem; line-height: 1.3; }
.pf-body small { color: var(--muted); }

/* Clickable tiles on the home page (a.tile with a caption span) */
a.tile { display: block; color: var(--ink); }
a.tile:hover { text-decoration: none; }
.tile-cap { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; max-width: calc(100% - 24px);
    border-radius: 999px; background: rgba(10, 10, 15, .72); backdrop-filter: blur(8px); font-size: .86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }

/* Project page */
.project-hero { padding-top: 40px; }
.link-back { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: .92rem; margin-bottom: 22px; }
.link-back:hover { color: var(--ink); text-decoration: none; }
.project-hero .eyebrow { margin-bottom: 14px; }
.pf-info { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 20px 0 0; }
.pf-info dt { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }
.pf-info dd { margin: 2px 0 0; font-weight: 600; }

.photo-grid { columns: 3 280px; column-gap: 14px; }
.photo-grid-1 { columns: 1; max-width: 900px; margin: 0 auto; }
.photo { display: block; margin: 0 0 14px; break-inside: avoid; border-radius: 12px; overflow: hidden; background: var(--surface-2); cursor: zoom-in; }
.photo img { width: 100%; transition: transform .5s, opacity .3s; }
.photo:hover img { transform: scale(1.03); }

.pf-pager { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding-top: 24px; }
.pf-pager a { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); max-width: 48%; }
.pf-pager a:hover { text-decoration: none; color: var(--accent-text); }
.pf-pager span { display: grid; }
.pf-pager small { color: var(--muted); font-size: .8rem; }
.pf-pager .next { margin-left: auto; text-align: right; }

/* YouTube poster + player */
.yt { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; border: 1px solid var(--line); }
.yt img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .2s; }
.yt:hover img { opacity: 1; }
.yt-play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); box-shadow: 0 12px 40px -8px rgba(0, 0, 0, .8); transition: transform .15s; }
.yt-play:hover { transform: scale(1.08); }
.yt-play .icon { width: 30px; height: 30px; margin-left: 4px; }
.yt-link { position: absolute; right: 12px; bottom: 12px; padding: 4px 12px; border-radius: 999px; font-size: .8rem; background: rgba(10, 10, 15, .75); color: #fff; }
.yt-on iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-list { display: grid; gap: 20px; }
.yt-list-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .yt-list-2 { grid-template-columns: 1fr; } }

.showreel { display: grid; grid-template-columns: .8fr 1.6fr; gap: 40px; align-items: center; }
.showreel h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
@media (max-width: 860px) { .showreel { grid-template-columns: 1fr; gap: 22px; } }

/* 360° tours (Pannellum) */
.pano-list { display: grid; gap: 48px; }
.pano-fig { margin: 0; }
.pano-fig figcaption { margin-top: 14px; color: var(--muted); font-size: .9rem; display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; }
.pano-fig figcaption strong { color: var(--ink); font-weight: 650; }
.pano-fig figcaption .icon { margin-top: 2px; }
.pano { position: relative; aspect-ratio: 16 / 9; max-height: 78vh; width: 100%; border-radius: var(--radius); overflow: hidden; background: #000; border: 1px solid var(--line); }
.pano > img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); }
.pano-start { position: absolute; inset: 0; margin: auto; height: fit-content; width: fit-content; display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px;
    border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700; text-align: left;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); box-shadow: 0 12px 40px -8px rgba(0, 0, 0, .8); }
.pano-start span { display: grid; line-height: 1.25; }
.pano-start small { font-weight: 500; opacity: .8; }
.pano-start .icon { width: 26px; height: 26px; }
.pano-loading .pano-start { opacity: .7; cursor: progress; }
@media (max-width: 600px) { .pano { aspect-ratio: 4 / 5; } }
/* Pannellum: its own .pnlm-container sets height:100% (and loads after this file),
   which stretched the viewer over the caption; keep our 16:9 box and a black backdrop. */
.pano.pnlm-container { background: #000; height: auto; aspect-ratio: 16 / 9; }
@media (max-width: 600px) { .pano.pnlm-container { aspect-ratio: 4 / 5; } }
.pano .pnlm-tooltip span { background: rgba(10, 10, 15, .9); color: #fff; border-radius: 8px; font-family: var(--font); }

/* Lightbox (site.js) */
.no-scroll { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px;
    background: rgba(12, 10, 24, .62); backdrop-filter: blur(4px); }
.lb-open { display: flex; }
.lb-panel { position: relative; display: grid; gap: 10px; width: min(1080px, 100%); max-height: calc(100vh - 48px); padding: 14px;
    border-radius: 18px; background: #14121c; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); }
.lb-stage { display: grid; place-items: center; min-height: 200px; }
.lb-stage img, .lb-stage video { max-width: 100%; max-height: calc(100vh - 150px); border-radius: 10px; object-fit: contain; background: #000; }
.lb-foot { display: flex; justify-content: space-between; gap: 12px; padding: 0 6px; color: #c9c6d6; font-size: .9rem; min-height: 1.2em; }
.lb-count { color: #8f8aa6; white-space: nowrap; }
.lb-btn { position: absolute; z-index: 2; border: 0; background: rgba(255, 255, 255, .14); color: #fff; width: 44px; height: 44px; border-radius: 50%;
    font-size: 1.8rem; line-height: 1; cursor: pointer; }
.lb-btn:hover { background: rgba(255, 255, 255, .28); }
.lb-close { top: -14px; right: -14px; font-size: 1.5rem; background: #fff; color: #14121c; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.lb-close:hover { background: #eee; }
.lb-prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 22px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) { .lb { padding: 12px; } .lb-panel { padding: 8px; } .lb-close { top: -10px; right: -6px; } .lb-prev { left: 12px; } .lb-next { right: 12px; } }
.lb-single .lb-prev, .lb-single .lb-next { display: none; }
@media (max-width: 600px) { .lb-fig { padding: 56px 8px; } .lb-prev, .lb-next { top: auto; bottom: 8px; transform: none; } }

/* ---------------------------------------------------------------------------
 * Light division details (the tokens above do most of the work)
 * ------------------------------------------------------------------------- */
.div-productions .grad-text { background: none; color: var(--accent-text); }
.div-productions .yt-play, .div-productions .pano-start { background: var(--accent-text); color: #fff; }
.div-productions .hero h1, .div-3d .hero h1 { letter-spacing: -.035em; }
.div-productions .eyebrow { letter-spacing: .2em; }
.div-productions .eyebrow::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--accent-text); vertical-align: 1px; }
.div-productions .section-alt, .div-3d .section-alt { border-color: transparent; }
.div-productions .pf-card:hover, .div-3d .pf-card:hover, .div-productions .feature:hover, .div-3d .feature:hover { box-shadow: var(--shadow); }
.div-productions .lead, .div-3d .lead { color: var(--ink-2); }
.div-3d .feature-icon { border-radius: 14px; }
.div-3d .cta-band { background: linear-gradient(120deg, #6d28d9, #7c3aed 40%, #0891b2); }
.div-home .lead { color: var(--ink-2); }
.div-home .section-alt { border-color: transparent; }
.div-home .feature:hover, .div-home .div-card:hover { box-shadow: var(--shadow); }
.div-home .combo { background: radial-gradient(80% 120% at 0% 0%, rgba(209, 41, 30, .07), transparent 60%),
    radial-gradient(80% 120% at 100% 100%, rgba(109, 40, 217, .09), transparent 60%), var(--surface); }
.div-home .cta-band { background: linear-gradient(120deg, #6d28d9, #9333ea 40%, #e5322d 100%); }
.div-home input, .div-home select, .div-home textarea { background: #fff; }
.div-home .alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.div-home .alert-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.div-home .alert-info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.div-productions .alert-success, .div-3d .alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.div-productions .alert-error, .div-3d .alert-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.div-productions .alert-info, .div-3d .alert-info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.div-productions input, .div-productions select, .div-productions textarea,
.div-3d input, .div-3d select, .div-3d textarea { background: #fff; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* The gateway (umbrella home) */
.footer-grid-div { grid-template-columns: 1.6fr 1fr 1fr; }
@media (max-width: 760px) { .footer-grid-div { grid-template-columns: 1fr; } }
.site-footer-gate { padding: 0; margin: 0; }
.site-footer-gate .footer-bottom { border-top: 0; padding: 18px 20px; }

body.gate { min-height: 100vh; display: flex; flex-direction: column; }
body.gate main { flex: 1; display: flex; }
.gate-doors { flex: 1; display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 68px - 60px); }
.door { position: relative; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; color: #fff; padding: clamp(28px, 5vw, 64px); min-height: 340px; }
.door:hover { text-decoration: none; }
.door-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.door::after { content: ""; position: absolute; inset: 0; z-index: -1; transition: opacity .4s;
    background: linear-gradient(0deg, rgba(8, 8, 14, .82) 0%, rgba(8, 8, 14, .35) 45%, rgba(8, 8, 14, .1) 100%); }
.door-prod::after { background: linear-gradient(0deg, rgba(40, 6, 6, .85) 0%, rgba(20, 6, 6, .35) 45%, rgba(0, 0, 0, .08) 100%); }
.door-3d::after { background: linear-gradient(0deg, rgba(30, 14, 70, .85) 0%, rgba(20, 10, 50, .35) 45%, rgba(0, 0, 0, .05) 100%); }
.door:hover .door-bg { transform: scale(1.05); }
.door-body { display: grid; gap: 8px; max-width: 460px; }
.door-body small { font-size: .8rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.door-body strong { font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1; letter-spacing: -.04em; font-weight: 850; }
.door-line { opacity: .88; font-size: 1.02rem; }
.door-go { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 10px 20px; border-radius: 999px; font-weight: 700;
    background: #fff; color: #111; transition: transform .2s, gap .2s; }
.door:hover .door-go { gap: 14px; }
.door-prod .door-go { color: #c62828; }
.door-3d .door-go { color: #6d28d9; }
@media (max-width: 760px) { .gate-doors { grid-template-columns: 1fr; } .door { min-height: 46vh; } }

/* Gallery tiles that open the pop-up (lib/gallery.php) */
a.tile img, a.tile video { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
a.tile video { background: #111; }
.tile-play { position: absolute; top: 50%; left: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(10, 10, 15, .6); color: #fff; backdrop-filter: blur(4px); }
.tile-play .icon { width: 24px; height: 24px; margin-left: 3px; }
a.tile { cursor: zoom-in; }

/* Show / hide password button (site.js) */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 46px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px;
    padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.pw-toggle:hover { color: var(--ink); background: var(--tint-1); }

/* Material guide: in stock vs not now (admin → Materials) */
.material-on { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.material-off { opacity: .55; }
.material-stock { margin: 8px 0 0; font-size: .9rem; color: var(--muted); }
.material-on .material-stock strong { color: #15803d; }
.material-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 16px; }
.material-colors .sw-dot { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .18); display: inline-block; }
.material-colors small { flex-basis: 100%; }