/* normalize.io/l?v=805b7799818f58b1 */
/* ===================================================================
   Classic theme - Clean, familiar, dependable
   Version: 1.0.4
   Author: Reveloni
   For: CMS 6.0.0+

   Changelog:
     1.0.4 - Dropdown menu re-anchored to the header container. It used to be
             positioned from the hamburger button, whose bottom sits above the
             header's edge, so with an 80px logo the menu overlapped the bar by
             26-32px. On mobile the fixed `top` pinned it over the header - in
             Classic, which stacks the header into a column, it covered the
             hamburger button itself. `top: 100%` now means the bottom of the
             bar at every breakpoint. RTL no longer shifts the menu sideways.
   =================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Theme colors are set inline by PHP */
    --text: #1f2937;
    --text-light: #6b7280;
    --bg: #ffffff;
    --bg-light: #f9fafb;
    --border: #e5e7eb;
}

[data-theme="dark"] {
    --text: #f9fafb;
    --text-light: #d1d5db;
    --bg: #1f2937;
    --bg-light: #374151;
    --border: #4b5563;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg-light);
    transition: background 0.3s, color 0.3s;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Scroll animations - progressive enhancement approach */
/* Elements are visible by default, JS adds animation class to body */
.animate-on-scroll {
    opacity: 1;
    transform: none;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Only hide and animate when JS is ready and animations enabled */
body.js-ready[data-animations-enabled="true"] .animate-on-scroll {
    opacity: 0;
    transform: translateY(var(--animation-offset, 30px));
}

body.js-ready[data-animations-enabled="true"] .animate-on-scroll.animated,
.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Dark Mode Toggle */
.dark-mode-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: var(--primary);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 1000;
    transition: transform 0.3s;
}

.dark-mode-toggle:hover {
    transform: scale(1.1);
}

/* Header */
header {
    background: var(--bg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* The dropdown anchors to this box, so `top: 100%` is the bottom of the
   header bar regardless of logo height or a stacked mobile layout. */
header .container {
    position: relative;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.logo-container img {
    height: 80px;
    width: auto;
}

.logo-container a {
    transition: opacity 0.3s;
}

.logo-container a:hover {
    opacity: 0.8;
}

.site-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

/* Breadcrumbs */
.breadcrumbs {
    background: var(--bg-light);
    padding: 1rem 0;
    font-size: 0.875rem;
}

.breadcrumbs a {
    color: var(--primary);
    text-decoration: none;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

.breadcrumbs span {
    color: var(--text-light);
    margin: 0 0.5rem;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
    align-items: center;
}

nav a {
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

nav a:hover, nav a.active {
    color: var(--primary);
}

/* Hamburger Menu */
.hamburger-menu {
    /* static on purpose: the header container is the anchor */
    position: static;
}

.hamburger-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text);
    padding: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hamburger-btn:hover {
    color: var(--primary);
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 20px;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 250px;
    max-height: 80vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    margin-top: 0.5rem;
    z-index: 1000;
}

.dropdown-menu.active {
    display: block;
}

.dropdown-menu ul {
    display: block;
    padding: 0.5rem 0;
}

.dropdown-menu li {
    margin: 0;
}

.dropdown-menu a {
    display: block;
    padding: 0.75rem 1.5rem;
    color: var(--text);
    text-decoration: none;
    transition: background 0.2s;
}

.dropdown-menu a:hover {
    background: var(--bg-light);
    color: var(--primary);
}

.dropdown-submenu {
    padding-left: 2rem;
    font-size: 0.9rem;
}

.dropdown-submenu a {
    padding: 0.5rem 1.5rem;
}

.dropdown-subsubmenu {
    padding-left: 3rem;
    font-size: 0.85rem;
}

.dropdown-subsubmenu a {
    padding: 0.4rem 1.5rem;
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    padding: 4rem 0;
    text-align: center;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.hero p {
    font-size: 1.25rem;
    opacity: 0.9;
}

/* Content */
.content-section {
    background: var(--bg);
    margin: 2rem auto;
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.content-section div {
    color: inherit;
}

.content-section ul,
.content-section ol {
    margin: 0.75rem 0;
    padding-left: 1.5rem;
}

.content-section ul {
    list-style-type: disc;
}

.content-section ol {
    list-style-type: decimal;
}

.content-section li {
    margin: 0.35rem 0;
    line-height: 1.6;
}

/* One-Page Sections */
.onepage-sections {
    margin: 4rem auto;
}

/* Subpages Sections (on parent pages) */
.subpages-sections {
    margin: 2rem auto 4rem;
}

.page-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.page-card {
    background: var(--bg);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
}

.page-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.page-card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: top center;
    background: var(--bg-light);
}

/* Placeholder shown when page card has no gallery image */
.page-card-placeholder {
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, black));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    opacity: 0.85;
}

.page-card-placeholder span {
    opacity: 0.4;
}

.page-card picture {
    display: block;
    width: 100%;
    height: 200px;
}

.page-card picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.page-card-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.page-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1rem;
}

.page-card-excerpt {
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.page-card-link {
    display: inline-block;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}

.page-card-link:hover {
    color: var(--secondary);
}

.page-card-link::after {
    content: ' →';
}

/* Photo gallery */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin: 2rem auto;
    justify-content: center;
    max-width: 100%;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
    aspect-ratio: 4/3;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.3s;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: rgba(0,0,0,0.9);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
}

.lightbox.active {
    display: flex;
}

.lightbox img {
    max-width: 90%;
    max-height: 80%;
    border-radius: 8px;
    cursor: default;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2rem;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
}

.lightbox-counter {
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
    margin-top: 1rem;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    font-size: 2rem;
    padding: 1rem;
    cursor: pointer;
    border-radius: 4px;
    z-index: 2001;
}

.lightbox-nav:hover {
    background: rgba(255,255,255,0.35);
}

.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

/* CTA Button */
.cta-button {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: var(--primary);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.125rem;
    margin: 2rem 0;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.cta-button:hover {
    background: var(--secondary);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

/* Contact Form */
.contact-form {
    background: var(--bg-light);
    padding: 2rem;
    border-radius: 12px;
    margin: 2rem 0;
}

.contact-form h2 {
    color: var(--primary);
    margin-bottom: 1.5rem;
}

/* Testimonials */
.testimonials-section {
    background: var(--bg-light);
    padding: 3rem 0;
    margin: 2rem 0;
    border-radius: 12px;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.testimonial-card {
    background: var(--bg);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.testimonial-rating {
    color: #fbbf24;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.testimonial-text {
    font-style: italic;
    margin-bottom: 1rem;
    color: var(--text-light);
}

.testimonial-author {
    font-weight: 700;
    color: var(--primary);
}

.price-tag {
    display: inline-block;
    background: var(--accent);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 1rem 0;
}

/* Footer */
footer {
    background: var(--footer-bg, var(--text));
    color: white;
    padding: 2rem 0 0.75rem;
    margin-top: 3rem;
}

[data-theme="dark"] footer {
    background: var(--footer-bg, #111827);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.footer-section h3 {
    color: var(--accent);
    margin-bottom: 0.75rem;
}

.footer-section p {
    margin: 0.5rem 0;
}

.footer-menu {
    list-style: none;
}

.footer-menu li {
    margin: 0.5rem 0;
}

.footer-menu a {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-menu a:hover {
    color: var(--accent);
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-links a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    background: var(--primary);
    border-radius: 5px;
    transition: background 0.3s;
}

.social-links a:hover {
    background: var(--secondary);
}

.copyright {
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    opacity: 0.7;
}

/* Admin Panel */
.admin-panel {
    background: var(--bg);
    margin: 2rem auto;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border);
}

.tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--border);
    flex-wrap: wrap;
}

.tab {
    padding: 1rem 2rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-light);
    border-bottom: 3px solid transparent;
    transition: all 0.3s;
}

.tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Gallery Admin */
.gallery-admin {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.gallery-admin-item {
    position: relative;
    aspect-ratio: 1;
    border: 2px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    cursor: move;
}

.gallery-admin-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-admin-item .delete-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-admin-item.dragging {
    opacity: 0.5;
}

/* Forms */
.form-group {
    margin-bottom: 1.5rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="file"],
select,
textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--border);
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.3s;
    background: var(--bg);
    color: var(--text);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary);
}

textarea {
    min-height: 200px;
    resize: vertical;
}

.btn {
    padding: 0.75rem 2rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}

.btn:hover {
    background: var(--secondary);
}

.btn-danger {
    background: #ef4444;
}

.btn-danger:hover {
    background: #dc2626;
}

.btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* Login Page */
.login-container {
    max-width: 400px;
    margin: 4rem auto;
    padding: 2rem;
    background: var(--bg);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.login-container h1 {
    text-align: center;
    color: var(--primary);
    margin-bottom: 2rem;
}

.error {
    background: #fee;
    color: #c00;
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.success {
    background: #efe;
    color: #080;
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}

/* Pages List */
.pages-list {
    display: grid;
    gap: 1rem;
}

.page-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--bg-light);
    border-radius: 8px;
    border: 2px solid var(--border);
}

.page-info h3 {
    color: var(--primary);
    margin-bottom: 0.25rem;
}

.page-actions {
    display: flex;
    gap: 0.5rem;
}

.theme-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.theme-option {
    padding: 1rem;
    border: 3px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s;
}

.theme-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.theme-option.selected {
    border-color: var(--primary);
    background: var(--bg-light);
}

.color-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 0 auto 0.5rem;
}

.testimonial-item {
    background: var(--bg-light);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .header-content {
flex-direction: column;
gap: 1rem;
    }
    
    nav ul {
flex-wrap: wrap;
justify-content: center;
    }
    
    .hero h1 {
font-size: 2rem;
    }
    
    .content-section {
padding: 1.5rem;
    }
    
    .tabs {
flex-wrap: wrap;
    }
    
    .page-item {
flex-direction: column;
gap: 1rem;
    }
    
    .dark-mode-toggle {
bottom: 10px;
right: 10px;
    }
    
    .dropdown-menu {
        /* Anchored to the header container: the menu opens directly below the
           bar, whatever height the logo (or a stacked column layout) gives it.
           Replaces the fixed `top` of the 6.2.5 fix, which pinned the menu over
           the header - in Classic it even covered the hamburger button. The
           base rule keeps max-height + overflow-y, so long menus scroll inside;
           the body-scroll lock in script.js still holds the page behind. */
        left: 20px;
        right: 20px;
        max-height: 70vh;
        margin-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

/* WYSIWYG Editor */
.editor-toolbar {
    background: var(--bg-light);
    border: 1px solid rgba(0,0,0,0.1);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 0.5rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.editor-toolbar button {
    background: var(--bg);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
    color: var(--text);
}

.editor-toolbar button:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-1px);
}

.editor-toolbar button strong,
.editor-toolbar button em,
.editor-toolbar button u {
    pointer-events: none;
}

.toolbar-separator {
    color: var(--text-light);
    margin: 0 0.25rem;
}

/* 
 * Dark mode & colors: the editor sets color: var(--text) on the container.
 * All children inherit this by default. Elements with inline color styles
 * (set by the user via toolbar) override inheritance naturally.
 * We do NOT set any color rules on child elements to avoid conflicts.
 */
.wysiwyg-editor {
    min-height: 300px;
    padding: 1rem;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 0 0 8px 8px;
    background: var(--bg);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
    overflow-y: auto;
    max-height: 600px;
}

.wysiwyg-editor:focus {
    outline: none;
    border-color: var(--primary);
}

.wysiwyg-editor h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 1rem 0;
}

.wysiwyg-editor h3 {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0.75rem 0;
}

.wysiwyg-editor p {
    margin: 0.5rem 0;
}

.wysiwyg-editor ul,
.wysiwyg-editor ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.wysiwyg-editor ul {
    list-style-type: disc;
}

.wysiwyg-editor ol {
    list-style-type: decimal;
}

.wysiwyg-editor li {
    margin: 0.25rem 0;
}

.wysiwyg-editor strong {
    font-weight: 700;
}

.wysiwyg-editor em {
    font-style: italic;
}

.wysiwyg-editor u {
    text-decoration: underline;
}

/* === PLACEHOLDER COMPOSITIONS (v1.0.1) ===
   Abstract scheme-colored compositions for image-less cards; shapes
   rearrange on hover. Inspired by the Atelier theme. */
.page-card-placeholder {
    position: relative;
    overflow: hidden;
}

.page-card-placeholder span { display: none; }

.page-card-placeholder::before,
.page-card-placeholder::after {
    content: '';
    position: absolute;
    animation: none;
    -webkit-mask-image: none;
    mask-image: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    filter: none;
    opacity: 1;
    width: auto;
    height: auto;
    inset: auto;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Composition 1: primary disc + accent diagonal */
.page-card-placeholder::before {
    inset: 0;
    background:
        radial-gradient(circle at 34% 52%, var(--primary) 0 21%, transparent 21.5%),
        linear-gradient(118deg, transparent 49.6%, var(--accent) 49.6% 50.6%, transparent 50.6%);
    opacity: 0.85;
}

.page-card-placeholder::after {
    width: 64px;
    height: 64px;
    top: 14%;
    right: 10%;
    border-radius: 50%;
    border: 2px solid var(--accent);
    background: transparent;
    opacity: 0.7;
}

/* Composition 2: accent quarter + baseline */
.page-card:nth-child(2n) .page-card-placeholder::before {
    background:
        conic-gradient(from 180deg at 72% 38%, var(--accent) 0 90deg, transparent 90deg),
        linear-gradient(0deg, transparent 31.5%, var(--primary) 31.5% 33%, transparent 33%);
}

.page-card:nth-child(2n) .page-card-placeholder::after {
    width: 40px;
    height: 40px;
    bottom: 16%;
    left: 14%;
    top: auto;
    right: auto;
    border: none;
    border-radius: 0;
    background: var(--primary);
}

/* Composition 3: concentric rings + bar */
.page-card:nth-child(3n) .page-card-placeholder::before {
    background:
        radial-gradient(circle at 58% 48%,
            transparent 0 16%, var(--accent) 16% 17.5%, transparent 17.5% 26%,
            var(--primary) 26% 27.5%, transparent 27.5%);
}

.page-card:nth-child(3n) .page-card-placeholder::after {
    width: 70%;
    height: 5px;
    bottom: 22%;
    left: 0;
    top: auto;
    right: auto;
    border: none;
    border-radius: 0;
    background: var(--accent);
    transform: rotate(-3deg);
    transform-origin: left center;
}

.page-card:hover .page-card-placeholder::before {
    transform: scale(1.07) rotate(-2deg);
}

.page-card:hover .page-card-placeholder::after {
    transform: scale(1.12) rotate(4deg);
}

.page-card:nth-child(3n):hover .page-card-placeholder::after {
    transform: rotate(2deg) translateX(4%);
}

@media (prefers-reduced-motion: reduce) {
    .page-card-placeholder::before,
    .page-card-placeholder::after {
        transition: none !important;
    }
}

/* === KEYBOARD FOCUS (6.2.4 accessibility) === */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* === HERO BACKGROUND IMAGE (6.3.0) ===
   Homepage hero with a full-bleed photo. Classic keeps it elegant and
   restrained: the image fills the hero, a scheme-tinted dark gradient
   guarantees white-title legibility, four overlay levels. Falls back to
   the original gradient hero when no image is set. */
.hero--has-bg {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 6rem 0;
    background: var(--primary); /* fallback tint while image loads */
}

.hero--has-bg .hero-bg-media {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
}

.hero--has-bg .hero-bg-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Scheme-tinted dark overlay for contrast (WCAG-friendly) */
.hero--has-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--primary) 30%, transparent) 0%,
            rgba(0, 0, 0, 0.55) 100%);
}

.hero--has-bg h1 {
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

/* Four overlay strengths */
.hero--overlay-none::after   { background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.15) 100%); }
.hero--overlay-light::after  { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 18%, transparent) 0%, rgba(0,0,0,0.30) 100%); }
.hero--overlay-medium::after { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 30%, transparent) 0%, rgba(0,0,0,0.55) 100%); }
.hero--overlay-strong::after { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 45%, transparent) 0%, rgba(0,0,0,0.72) 100%); }

@media (max-width: 768px) {
    .hero--has-bg { padding: 4rem 0; }
}