@import url("shared.css?v=20260927-mobile-swipe");

:root {
    --navy: #182B56;
    --navy-soft: #263c70;
    --grey: #f3f5f8;
    --grey-strong: #e5e9ef;
    --text: #17223a;
    --muted: #61708a;
    --white: #ffffff;
    --shadow: 0 18px 55px rgba(24, 43, 86, 0.11);
    --card-shadow: 0 10px 30px rgba(24, 43, 86, 0.07);
    --radius: 8px;
    --polaroid-paper-rgb: 255, 250, 242;
    --polaroid-paper: rgb(var(--polaroid-paper-rgb));
    --polaroid-radius: 6px;
    --polaroid-image-radius: 3px;
    --polaroid-frame-x-ratio: 0.07547;
    --polaroid-frame-top-ratio: 0.15094;
    --polaroid-frame-bottom-ratio: 0.30189;
    --polaroid-shadow: 0 34px 92px rgba(20, 28, 45, 0.28), 0 8px 22px rgba(20, 28, 45, 0.18), 0 1px 3px rgba(20, 28, 45, 0.14);
    --polaroid-shadow-small: 0 24px 62px rgba(20, 28, 45, 0.26), 0 7px 18px rgba(20, 28, 45, 0.18), 0 1px 3px rgba(20, 28, 45, 0.14);
    --transition: 0.2s ease;
    --hero-overlay-start: rgba(24, 43, 86, 0.72);
    --hero-overlay-end: rgba(24, 43, 86, 0.34);
    --brix-blue: #2868C9;
    --brix-pink: #CE2F87;
    --brix-green: #87D1AD;
    --icon-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3C/svg%3E");
    --icon-audio-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4V5Z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E");
    --icon-audio-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4V5Z'/%3E%3Cpath d='m16 9 5 5'/%3E%3Cpath d='m21 9-5 5'/%3E%3C/svg%3E");
}

html[data-theme="dark"] {
    --navy: #ffffff;
    --navy-soft: #eeeeee;
    --grey: #0f1728;
    --grey-strong: #283954;
    --text: #ffffff;
    --muted: #d6d6d6;
    --white: #08111f;
    --shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
    --card-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
    --hero-overlay-start: rgba(5, 10, 22, 0.54);
    --hero-overlay-end: rgba(5, 10, 22, 0.2);
    --dark-panel: #101b2f;
    --dark-panel-soft: #0d1627;
    --dark-page: #08111f;
    --dark-border: rgba(255, 255, 255, 0.16);
    --dark-border-strong: rgba(255, 255, 255, 0.28);
    --dark-accent: #ffffff;
    --dark-accent-soft: rgba(255, 255, 255, 0.14);
}

* {
    box-sizing: border-box;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 76px 0 0;
    background: var(--white);
    color: var(--text);
    font-family: var(--font-main);
    font-size: var(--text-base);
    line-height: 1.6;
    text-align: left;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

.desktop-break {
    display: block;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--nav-glass-background);
    border-bottom: 0;
    box-shadow: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 0.45s ease, transform 0.45s ease, background-color 0.45s ease;
}

.home-page.is-home-hero-immersive .site-header {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
    pointer-events: none;
}

html[data-theme="dark"] .site-header {
    background: var(--nav-glass-background);
    border-bottom-color: var(--nav-glass-border);
}

html[data-theme="dark"] .brand img {
    filter: brightness(0) invert(1);
}

.nav-shell,
.section-inner,
.footer-inner,
.container {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
}

.nav-shell {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--navy);
    font-weight: var(--weight-heavy);
    letter-spacing: 0;
    white-space: nowrap;
}

.brand [data-brand-label] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    opacity: 1;
    transform: none;
    color: var(--navy);
    font-size: var(--text-sm);
    font-weight: var(--weight-heavy);
    line-height: 1;
    white-space: nowrap;
}

.brand-label-prefix,
.brand-label-suffix {
    display: inline;
}

.brand [data-brand-label]:not(.is-typewriter) .brand-label-prefix:not(:empty) {
    margin-right: 0.28em;
}

.brand-label-cursor {
    width: 1px;
    height: 1.05em;
    display: none;
    flex: 0 0 1px;
    margin-right: 3px;
    background: currentColor;
}

.brand [data-brand-label].is-typewriter .brand-label-cursor {
    display: inline-block;
    animation: brandCursorBlink 1.05s steps(1, end) infinite;
}

@keyframes brandCursorBlink {
    0%,
    48% {
        opacity: 1;
    }

    49%,
    100% {
        opacity: 0;
    }
}

@keyframes heroImageDrift {
    0% {
        transform: scale(1.08) translate3d(-10px, 6px, 0);
    }

    100% {
        transform: scale(1.035) translate3d(0, 0, 0);
    }
}

@keyframes heroLightSweep {
    0% {
        opacity: 0;
        transform: translateX(-16%);
    }

    45% {
        opacity: 0.58;
    }

    100% {
        opacity: 0.42;
        transform: translateX(8%);
    }
}

@keyframes heroTitleIn {
    0% {
        opacity: 0;
        transform: translateY(22px) scale(0.985);
        filter: blur(8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes heroTextIn {
    0% {
        opacity: 0;
        transform: translateY(16px);
        filter: blur(6px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes heroPanelIn {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
        filter: blur(8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes heroChipIn {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.96);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.brand img {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    min-width: 42px;
    aspect-ratio: 1 / 1;
    display: block;
    object-fit: contain;
}

.nav-links {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-links a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 9px 14px;
    color: var(--navy);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: 1;
    white-space: nowrap;
}

.nav-links a:hover {
    background: var(--grey);
}

.nav-cta {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid var(--navy);
    border-radius: 999px;
    padding: 10px 16px;
    background: var(--navy);
    color: var(--white);
    font-size: var(--text-sm);
    font-weight: var(--weight-heavy);
    line-height: 1;
    white-space: nowrap;
    transition: transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.nav-cta:hover,
.nav-cta:focus-visible {
    transform: translateY(-1px);
    border-color: var(--navy-soft);
    background: var(--navy-soft);
    box-shadow: 0 12px 26px rgba(24, 43, 86, 0.18);
}

html[data-theme="dark"] .nav-cta {
    border-color: var(--dark-accent);
    background: var(--dark-accent);
    color: #07101f;
}

html[data-theme="dark"] .nav-cta:hover,
html[data-theme="dark"] .nav-cta:focus-visible {
    border-color: var(--navy-soft);
    background: var(--navy-soft);
}

.site-footer {
    padding: 34px 0;
    background: #182B56;
    color: rgba(255, 255, 255, 0.78);
}

html[data-theme="dark"] .site-footer {
    background: #050b15;
    border-top: 1px solid rgba(184, 212, 255, 0.14);
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.footer-logo,
.footer-inner img {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
}

.footer-logo {
    display: inline-flex;
}

.footer-brand-block,
.footer-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.footer-actions {
    justify-content: flex-end;
}

.footer-inner p {
    margin: 0;
    font-size: var(--text-sm);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
}

.footer-links a:hover {
    color: var(--white);
}

.theme-switch {
    position: relative;
    width: 76px;
    min-width: 76px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    padding: 3px;
    background:
        radial-gradient(ellipse at 30% 100%, rgba(132, 195, 255, 0.58) 0 22px, transparent 23px),
        radial-gradient(ellipse at 58% 105%, rgba(88, 169, 250, 0.52) 0 29px, transparent 30px),
        radial-gradient(ellipse at 88% 100%, rgba(255, 255, 255, 0.92) 0 23px, transparent 24px),
        linear-gradient(90deg, #2f8df7 0%, #46a8ff 55%, #dbf5ff 100%);
    box-shadow: inset 0 1px 4px rgba(255, 255, 255, 0.42), inset 0 -2px 8px rgba(24, 43, 86, 0.18), 0 10px 22px rgba(0, 0, 0, 0.16);
    cursor: pointer;
    overflow: hidden;
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}

.theme-switch::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 2;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #f0cf26;
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.45), inset 0 -2px 4px rgba(129, 92, 0, 0.18), 0 3px 8px rgba(0, 0, 0, 0.26);
    transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.2, 1), background var(--transition), box-shadow var(--transition);
}

.theme-switch::after {
    content: "";
    position: absolute;
    inset: 3px;
    z-index: 1;
    border-radius: 999px;
    background:
        radial-gradient(circle at 59% 79%, rgba(255, 255, 255, 0.86) 0 7px, transparent 8px),
        radial-gradient(circle at 70% 68%, rgba(255, 255, 255, 0.96) 0 10px, transparent 11px),
        radial-gradient(circle at 83% 65%, #ffffff 0 13px, transparent 14px),
        radial-gradient(circle at 98% 54%, #ffffff 0 18px, transparent 19px),
        linear-gradient(90deg, transparent 0 52%, rgba(255, 255, 255, 0.08) 70%, rgba(255, 255, 255, 0.18) 100%);
    opacity: 0.92;
    pointer-events: none;
    transition: opacity var(--transition), background var(--transition);
}

.theme-switch[aria-pressed="true"]::before {
    transform: translateX(42px);
    background:
        radial-gradient(circle at 66% 31%, #8f9aa5 0 2px, transparent 3px),
        radial-gradient(circle at 39% 61%, #8f9aa5 0 3.2px, transparent 4.2px),
        radial-gradient(circle at 74% 66%, #8f9aa5 0 2.4px, transparent 3.4px),
        #d9dee5;
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.48), inset 0 -2px 5px rgba(49, 58, 70, 0.22), 0 3px 8px rgba(0, 0, 0, 0.34);
}

.theme-switch[aria-pressed="true"] {
    background:
        radial-gradient(circle at 10% 26%, #ffffff 0 1.5px, transparent 2.4px),
        radial-gradient(circle at 29% 74%, rgba(255, 255, 255, 0.92) 0 1.3px, transparent 2.1px),
        radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.86) 0 1.1px, transparent 1.9px),
        linear-gradient(90deg, #101827 0%, #1b2638 58%, #4d5661 100%);
    box-shadow: inset 0 1px 4px rgba(255, 255, 255, 0.14), inset 0 -2px 8px rgba(0, 0, 0, 0.32), 0 10px 22px rgba(0, 0, 0, 0.22);
}

.theme-switch[aria-pressed="true"]::after {
    background:
        radial-gradient(ellipse at 39% 50%, rgba(255, 255, 255, 0.08) 0 16px, transparent 17px),
        radial-gradient(ellipse at 60% 50%, rgba(255, 255, 255, 0.12) 0 19px, transparent 20px),
        radial-gradient(circle at 18% 58%, rgba(255, 255, 255, 0.95) 0 1.2px, transparent 2px),
        radial-gradient(circle at 38% 31%, rgba(255, 255, 255, 0.9) 0 1.4px, transparent 2.2px),
        radial-gradient(circle at 61% 70%, rgba(255, 255, 255, 0.76) 0 0.95px, transparent 1.7px),
        linear-gradient(90deg, rgba(8, 17, 31, 0.2), rgba(255, 255, 255, 0.08));
    opacity: 1;
}

.theme-switch-option {
    position: relative;
    z-index: 3;
    width: 50%;
    height: 100%;
    font-size: 0;
    line-height: 0;
}

.theme-switch:hover,
.theme-switch:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
    outline: 0;
}

html[data-theme="dark"] .theme-switch {
    border-color: rgba(184, 212, 255, 0.22);
}

@media (max-width: 720px) {
    .footer-brand-block,
    .footer-actions {
        width: 100%;
        align-items: flex-start;
    }

    .footer-actions {
        flex-direction: column;
    }
}

.section-band {
    padding: 84px 0;
}

.section-band.alt {
    background: var(--grey);
}

.section-heading {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
    gap: 40px;
    align-items: end;
    margin-bottom: 34px;
}

.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    color: var(--navy);
    font-size: var(--text-xs);
    font-weight: var(--weight-heavy);
    letter-spacing: 0.11em;
    line-height: 1.1;
    text-transform: uppercase;
}

.section-kicker i,
.section-kicker .ui-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--grey);
    color: var(--navy);
    font-style: normal;
}

.section-kicker i::before,
.section-kicker .ui-icon::before,
.feature-icon i::before,
.info-icon i::before,
.participant i::before,
.wedding-options-table thead th span i::before,
.button i::before,
.icon-button i::before {
    content: "";
    width: 1em;
    height: 1em;
    background: currentColor;
    display: block;
    -webkit-mask: var(--icon, var(--icon-dot)) center / contain no-repeat;
    mask: var(--icon, var(--icon-dot)) center / contain no-repeat;
}

.alt .section-kicker i,
.alt .section-kicker .ui-icon {
    background: var(--white);
}

.section-heading h2,
.role-panel h2,
.contact-strip h2 {
    margin: 0;
    color: var(--navy);
    font-size: var(--section-title-size);
    line-height: 1.06;
    letter-spacing: 0;
}

.section-heading p,
.intro-copy p,
.feature-card p,
.skill-panel p,
.project-card p,
.copy-card p,
.info-card p,
.contact-strip p {
    color: var(--muted);
}

.section-heading > p {
    margin: 0;
    font-size: var(--text-md);
    line-height: 1.55;
}

.polaroid-format {
    --polaroid-width: min(100%, 320px);
    --polaroid-image-ratio: 1 / 1;
    position: relative;
    width: var(--polaroid-width);
    padding:
        calc(var(--polaroid-width) * var(--polaroid-frame-top-ratio))
        calc(var(--polaroid-width) * var(--polaroid-frame-x-ratio))
        calc(var(--polaroid-width) * var(--polaroid-frame-bottom-ratio));
    border-radius: var(--polaroid-radius);
    background-color: var(--polaroid-paper);
    background-image: url("../images/design/instax-texture.jpg");
    background-size: cover;
    background-position: center;
    box-shadow: var(--polaroid-shadow);
}

.polaroid-format--mini {
    --polaroid-image-ratio: 45 / 60;
    --polaroid-frame-x-ratio: 0.07547;
    --polaroid-frame-top-ratio: 0.15094;
    --polaroid-frame-bottom-ratio: 0.30189;
}

.polaroid-format--square {
    --polaroid-image-ratio: 1 / 1;
    --polaroid-frame-x-ratio: 0.05882;
    --polaroid-frame-top-ratio: 0.11765;
    --polaroid-frame-bottom-ratio: 0.23529;
}

.polaroid-format--wide {
    --polaroid-image-ratio: 100 / 60;
    --polaroid-frame-x-ratio: 0.03704;
    --polaroid-frame-top-ratio: 0.07407;
    --polaroid-frame-bottom-ratio: 0.14815;
}

.polaroid-format img,
.polaroid-format .polaroid-image-wrap {
    aspect-ratio: var(--polaroid-image-ratio);
    border-radius: var(--polaroid-image-radius);
}

.polaroid-format img {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.polaroid-format figcaption,
.polaroid-format .polaroid-caption {
    position: absolute;
    right: calc(var(--polaroid-width) * var(--polaroid-frame-x-ratio));
    bottom: 0;
    left: calc(var(--polaroid-width) * var(--polaroid-frame-x-ratio));
    box-sizing: border-box;
    display: grid;
    place-items: center;
    height: calc(var(--polaroid-width) * var(--polaroid-frame-bottom-ratio));
    margin: 0;
    padding: 0.12em 2px 0;
    overflow: hidden;
    z-index: 2;
    transform: none;
    color: var(--muted);
    font-family: var(--font-display);
    font-size: var(--type-card);
    font-weight: 400;
    line-height: 0.9;
    text-align: center;
}

.polaroid-format--mini figcaption,
.polaroid-format--mini .polaroid-caption,
.polaroid-format--wide figcaption,
.polaroid-format--wide .polaroid-caption {
    font-size: var(--type-card);
}

.wedding-page .polaroid-format figcaption,
.wedding-page .polaroid-format .polaroid-caption {
    color: var(--wedding-polaroid-muted);
}

/* Shared portrait stack; the established mini Polaroid supplies paper and framing. */
.photo-stack { --photo-stack-width:300px; width:min(100%, 420px); margin-inline:auto; }
.photo-stack-stage { display:grid; place-items:center; position:relative; padding:30px 28px; touch-action:pan-y pinch-zoom; user-select:none; }
[data-photo-stack-ready] .photo-stack-stage { cursor:grab; }
.photo-stack-stage.is-grabbing { cursor:grabbing; }
.photo-stack-stage:focus-visible { outline:2px solid var(--button-focus); outline-offset:8px; border-radius:8px; }
.photo-stack-card { --polaroid-width:var(--photo-stack-width); grid-area:1 / 1; margin:0; z-index:1; transform:translate(22px, -12px) rotate(8deg) scale(.95); transition:transform .6s cubic-bezier(.22,.68,.2,1); }
.photo-stack-card.is-front { z-index:2; transform:rotate(-4deg); }
.photo-stack-card img { pointer-events:none; }
.photo-stack-controls { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:12px; width:min(100%,280px); margin:16px auto 0; }
.photo-stack-controls[hidden] { display:none; }
.photo-stack-controls .button { width:44px; height:44px; padding:0; }
.photo-stack-controls [role="status"] { text-align:center; color:var(--muted); font-size:var(--type-small); font-variant-numeric:tabular-nums; }
.photo-stack-panels { display:grid; min-width:0; align-items:start; }
.photo-stack-panels > [data-photo-stack-panel] { grid-area:1 / 1; }
[data-photo-stack-ready] [data-photo-stack-panel][aria-hidden="true"] { visibility:hidden; pointer-events:none; }
@media(max-width:760px) {
    .photo-stack { --photo-stack-width:min(260px, 62vw); }
    .photo-stack-stage { padding:24px; }
}
@media(prefers-reduced-motion:reduce) {
    .photo-stack-card { transition:none; }
}

html[data-theme="dark"] .hero,
html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .hero .eyebrow,
html[data-theme="dark"] .hero .tagline,
html[data-theme="dark"] .hero-lead,
html[data-theme="dark"] .hero-panel p,
html[data-theme="dark"] .hero .signature,
html[data-theme="dark"] .footer-links a:hover {
    color: #ffffff;
}

html[data-theme="dark"] .copy-card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .project-card,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .profile-photo-card,
html[data-theme="dark"] .engagement-card,
html[data-theme="dark"] .step-card,
html[data-theme="dark"] .legal-card,
html[data-theme="dark"] .story-card-grid article,
html[data-theme="dark"] .planner-panel,
html[data-theme="dark"] .planner-summary,
html[data-theme="dark"] .planner-modal-panel,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .contact-strip,
html[data-theme="dark"] .team-copy,
html[data-theme="dark"] .team-roles article,
html[data-theme="dark"] .team-trust,
html[data-theme="dark"] .role-card {
    border-color: var(--dark-border);
    background: var(--dark-panel);
}

html[data-theme="dark"] .project-card,
html[data-theme="dark"] .engagement-card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .info-card {
    box-shadow: var(--card-shadow);
}

html[data-theme="dark"] .nav-links a:hover,
html[data-theme="dark"] .skill-panel,
html[data-theme="dark"] .planner-date-selects,
html[data-theme="dark"] .planner-summary-recommendation,
html[data-theme="dark"] .faq-more-toggle,
html[data-theme="dark"] .planner-choice span,
html[data-theme="dark"] .planner-checklist li {
    background: rgba(120, 170, 255, 0.1);
}

html[data-theme="dark"] .role-panel,
html[data-theme="dark"] .role-panel p,
html[data-theme="dark"] .engagement-day-page .copy-card,
html[data-theme="dark"] .engagement-day-page .copy-card p {
    color: var(--text);
}

html[data-theme="dark"] .role-panel .tag,
html[data-theme="dark"] .engagement-day-page .tag {
    border-color: rgba(120, 170, 255, 0.38);
    background: rgba(120, 170, 255, 0.2);
    color: #ffffff;
}

html[data-theme="dark"] .brix-page .feature-item {
    border-color: rgba(255, 255, 255, 0.9);
    background: #ffffff;
    color: #17223a;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .brix-page .feature-item h3 {
    color: #182b56;
}

html[data-theme="dark"] .brix-page .feature-item p {
    color: #3d4a61;
}

html[data-theme="dark"] .brix-page .feature-item img {
    background: #ffffff;
}

html[data-theme="dark"] .section-band.alt,
html[data-theme="dark"] .planner-progress,
html[data-theme="dark"] .planner-panel-soft,
html[data-theme="dark"] .engagement-card-placeholder,
html[data-theme="dark"] .skill-tab-list {
    background: var(--dark-panel-soft);
}

html[data-theme="dark"] .timeline-date,
html[data-theme="dark"] .tag {
    border-color: rgba(120, 170, 255, 0.26);
    background: rgba(120, 170, 255, 0.18);
    color: var(--text);
}

html[data-theme="dark"] .filter-tabs button.is-active,
html[data-theme="dark"] .engagement-tabs button.is-active,
html[data-theme="dark"] .skill-tab-list button.is-active,
html[data-theme="dark"] .carousel-dots button[aria-current="true"],
html[data-theme="dark"] .planner-step-overview button.is-active,
html[data-theme="dark"] .planner-step-overview button.is-complete:not(.is-active) {
    border-color: var(--dark-accent);
    background: var(--dark-accent);
    color: #07101f;
}

html[data-theme="dark"] .filter-tabs button,
html[data-theme="dark"] .engagement-tabs button,
html[data-theme="dark"] .skill-tab-list button,
html[data-theme="dark"] .planner-step-overview button {
    border-color: rgba(184, 212, 255, 0.18);
    color: var(--navy);
}

html[data-theme="dark"] .planner-step-overview button {
    background: #08111f;
    box-shadow: 0 0 0 5px #0f1728;
}

html[data-theme="dark"] .planner-step-overview li:not(:last-child)::before {
    background: rgba(184, 212, 255, 0.2);
}

html[data-theme="dark"] .planner-step-overview li.is-complete:not(:last-child)::before {
    background: var(--dark-accent);
}

html[data-theme="dark"] .team-trust h3,
html[data-theme="dark"] .team-trust li {
    color: var(--text);
}

html[data-theme="dark"] .team-benefits span {
    background: rgba(120, 170, 255, 0.16);
    color: var(--text);
}

html[data-theme="dark"] .team-trust p {
    color: var(--muted);
}

html[data-theme="dark"] .wedding-options-table-card {
    border-color: var(--dark-border);
    background: var(--dark-panel);
}

html[data-theme="dark"] .wedding-options-table {
    color: var(--text);
}

html[data-theme="dark"] .wedding-options-table th,
html[data-theme="dark"] .wedding-options-table td {
    border-bottom-color: rgba(184, 212, 255, 0.12);
}

html[data-theme="dark"] .wedding-options-table thead th {
    background: rgba(16, 27, 47, 0.92);
    color: var(--text);
}

html[data-theme="dark"] .wedding-options-table thead th em {
    border-color: rgba(184, 212, 255, 0.18);
    background: rgba(120, 170, 255, 0.14);
    color: var(--text);
}

html[data-theme="dark"] .wedding-options-table thead th span i {
    background: rgba(120, 170, 255, 0.16);
    color: var(--text);
}

html[data-theme="dark"] .wedding-options-table tbody th {
    color: var(--text);
}

html[data-theme="dark"] .wedding-options-table tbody td {
    color: var(--muted);
}

html[data-theme="dark"] .wedding-options-cta {
    border-top-color: rgba(184, 212, 255, 0.12);
    background: rgba(8, 17, 31, 0.72);
}

html[data-theme="dark"] .wedding-options-cta p {
    color: var(--muted);
}

html[data-theme="dark"] .team-trust li::before {
    background: var(--dark-accent);
}

html[data-theme="dark"] .planner-summary-list dt,
html[data-theme="dark"] .planner-panel-title,
html[data-theme="dark"] .feature-card h3,
html[data-theme="dark"] .project-card h3,
html[data-theme="dark"] .info-card h3,
html[data-theme="dark"] .engagement-card-body h3,
html[data-theme="dark"] .section-heading h2,
html[data-theme="dark"] .section-kicker {
    color: var(--text);
}

html[data-theme="dark"] .engagement-browser {
    color: var(--text);
}

html[data-theme="dark"] .engagement-tabs,
html[data-theme="dark"] .filter-tabs {
    background: #091321;
    border: 1px solid rgba(184, 212, 255, 0.12);
}

html[data-theme="dark"] .engagement-tab-indicator {
    background: var(--dark-accent);
    box-shadow: 0 10px 26px rgba(120, 170, 255, 0.2);
}

html[data-theme="dark"] .filter-tabs button.is-active,
html[data-theme="dark"] .engagement-tabs button.is-active {
    color: #07101f;
}

html[data-theme="dark"] .engagement-card-media,
html[data-theme="dark"] .engagement-card-placeholder {
    background: #08111f;
}

html[data-theme="dark"] .engagement-card-body p,
html[data-theme="dark"] .skill-panel-copy > p:not(.skill-panel-kicker) {
    color: var(--muted);
}

html[data-theme="dark"] .skill-panel-list {
    background: rgba(8, 17, 31, 0.72);
}

html[data-theme="dark"] .skill-panel-list div {
    border-bottom-color: rgba(184, 212, 255, 0.12);
}

html[data-theme="dark"] .skill-panel-list span {
    color: var(--muted);
}

html[data-theme="dark"] .skill-panel-list strong {
    color: var(--text);
}

html[data-theme="dark"] .social-highlight {
    border: 1px solid rgba(184, 212, 255, 0.14);
    background: #07101f;
    box-shadow: var(--shadow);
}

html[data-theme="dark"] .social-highlight p,
html[data-theme="dark"] .social-highlight .section-kicker {
    color: var(--muted);
}

html[data-theme="dark"] .social-highlight .section-kicker i {
    background: rgba(120, 170, 255, 0.14);
    color: var(--text);
}

html[data-theme="dark"] .home-final-cta {
    background: transparent;
    box-shadow: none;
}

html[data-theme="dark"] .home-final-cta .contact-media figcaption {
    color: var(--muted);
}

html[data-theme="dark"] .home-page .profile-photo-card figcaption {
    color: var(--muted);
}

html[data-theme="dark"] .wedding-shot figcaption,
html[data-theme="dark"] .media-shot figcaption {
    background: rgba(6, 13, 24, 0.78);
    color: var(--text);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(12px);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .planner-date-row input,
html[data-theme="dark"] .planner-name-row input,
html[data-theme="dark"] .planner-season-row select,
html[data-theme="dark"] .planner-location-row input,
html[data-theme="dark"] .planner-other-field input,
html[data-theme="dark"] .planner-panel-grid input,
html[data-theme="dark"] .planner-panel-grid select,
html[data-theme="dark"] .planner-panel-grid textarea {
    border-color: rgba(184, 212, 255, 0.22);
    background-color: #0a1424;
    color: var(--text);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: rgba(174, 187, 208, 0.78);
}

@media (prefers-reduced-motion: reduce) {
.button {
        animation: none;
        
    }
.button i,
.brand [data-brand-label],
.hero::before,
.hero::after,
.hero .eyebrow,
.hero h1,
.hero .tagline,
.hero-lead,
.hero-actions,
.button-row,
.hero-panel,
.fact-panel,
.keyword-grid span,
.engagement-tab-indicator,
.filter-tabs button,
.engagement-tabs button,
.engagement-card-grid,
.engagement-card,
.has-page-scroll-reveal .scroll-reveal-item,
.media-gallery.has-scroll-reveal .media-shot,
.wedding-gallery.has-scroll-reveal .wedding-shot,
.project-grid.has-scroll-reveal .project-card {
        animation: none;
        transition: none;
    }
.button:hover i,
.button:focus-visible i,
.hero::before,
.hero::after,
.hero .eyebrow,
.hero h1,
.hero .tagline,
.hero-lead,
.hero-actions,
.button-row,
.hero-panel,
.fact-panel,
.hero-panel:hover,
.fact-panel:hover,
.keyword-grid span,
.engagement-browser.is-switching .engagement-card-grid,
.engagement-card:hover {
        transform: none;
    }
}

.home-page section {
    margin: 0;
    opacity: 1;
    transform: none;
    transition: none;
    font-size: 1rem;
}

.home-page .section-band {
    min-height: calc(100vh - 76px);
    min-height: calc(100svh - 76px);
    display: grid;
    align-items: center;
    padding: clamp(92px, 10vh, 132px) 0;
    background: var(--white);
}

.home-page .section-band.alt {
    background: var(--white);
}

.home-page .section-heading {
    margin-bottom: clamp(34px, 5vh, 54px);
}

.home-page .section-kicker i,
.home-page .section-kicker .ui-icon {
    background: var(--grey);
}

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--white);
    background: var(--navy);
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(115deg, var(--hero-overlay-start), var(--hero-overlay-end)),
        var(--hero-image) center / cover no-repeat,
        var(--navy);
    transform: scale(1.035);
    transform-origin: center;
    animation: heroImageDrift 18s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.18), transparent 28%),
        linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.08) 46%, transparent 68%);
    opacity: 0.55;
    mix-blend-mode: soft-light;
    transform: translateX(-8%);
    animation: heroLightSweep 7s ease-in-out 0.5s both;
}

.hero > * {
    position: relative;
    z-index: 1;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    align-items: center;
    gap: 48px;
}

.eyebrow {
    margin: 0 0 16px;
    color: rgba(255, 255, 255, 0.76);
    font-size: var(--text-xs);
    font-weight: var(--weight-heavy);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    animation: heroTextIn 0.72s cubic-bezier(0.18, 0.9, 0.2, 1) 0.06s both;
}

.hero h1 {
    max-width: 780px;
    margin: 0;
    color: var(--white);
    font-size: var(--hero-title-size);
    line-height: 1.03;
    letter-spacing: 0;
    text-wrap: balance;
    animation: heroTitleIn 0.86s cubic-bezier(0.18, 0.9, 0.2, 1) 0.14s both;
}

.hero-lead {
    max-width: 680px;
    margin: 26px 0 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: var(--text-lg);
    text-wrap: balance;
    animation: heroTextIn 0.72s cubic-bezier(0.18, 0.9, 0.2, 1) 0.28s both;
}

.hero-actions,
.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
    animation: heroTextIn 0.72s cubic-bezier(0.18, 0.9, 0.2, 1) 0.4s both;
}

.hero-panel,
.fact-panel {
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: var(--radius);
    padding: 24px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(18px);
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.12);
    animation: heroPanelIn 0.88s cubic-bezier(0.18, 0.9, 0.2, 1) 0.34s both;
    transition: transform 0.24s ease, border-color 0.24s ease, background 0.24s ease;
}

.hero-panel:hover,
.fact-panel:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.13);
}

.hero-panel img,
.fact-panel img {
    width: 76px;
    height: 76px;
    display: block;
    margin-bottom: 24px;
}

.fact-grid {
    display: grid;
    gap: 18px;
}

.hero-panel p {
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
}

.signature {
    display: inline-block;
    margin-left: 2px;
    color: var(--white);
    font-weight: var(--weight-bold);
    letter-spacing: 0;
    white-space: nowrap;
}

.keyword-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.keyword-grid span {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.86);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: 1;
    animation: heroChipIn 0.5s cubic-bezier(0.18, 0.9, 0.2, 1) both;
}

.keyword-grid span:nth-child(1) {
    animation-delay: 0.56s;
}

.keyword-grid span:nth-child(2) {
    animation-delay: 0.62s;
}

.keyword-grid span:nth-child(3) {
    animation-delay: 0.68s;
}

.keyword-grid span:nth-child(4) {
    animation-delay: 0.74s;
}

.keyword-grid span:nth-child(5) {
    animation-delay: 0.8s;
}

.keyword-grid span:nth-child(6) {
    animation-delay: 0.86s;
}

.stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 24px;
}

.stat,
.fact {
    padding: 16px 12px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.12);
}

.stat strong,
.stat span,
.fact strong,
.fact span {
    display: block;
}

.stat strong {
    font-size: var(--text-lg);
    line-height: 1;
}

.stat span,
.fact span {
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--text-xs);
    line-height: 1.25;
}

.fact strong {
    color: var(--white);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.intro-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}

.intro-copy,
.copy-card,
.contact-strip {
    padding: 34px;
    border: 1px solid var(--grey-strong);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow);
}

.profile-photo-card {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    margin: 0;
    border-radius: var(--radius);
    background: var(--grey);
    box-shadow: var(--shadow);
}

.profile-photo-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.profile-photo-card:not(.polaroid-format) figcaption {
    position: absolute;
    right: 18px;
    bottom: 18px;
    left: 18px;
    border-radius: var(--radius);
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.42);
    color: var(--white);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: 1.35;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(14px);
}

.home-page .intro-copy {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.home-page .profile-photo-card {
    --polaroid-width: min(100%, 330px);
    justify-self: center;
    min-height: 0;
    border-radius: var(--polaroid-radius);
    background-color: var(--polaroid-paper);
    background-image: url("../images/design/instax-texture.jpg");
    background-size: cover;
    background-position: center;
    box-shadow: var(--polaroid-shadow-small);
    transform: rotate(-5deg);
}

.home-page .profile-photo-card img {
    aspect-ratio: var(--polaroid-image-ratio);
    height: auto;
}

.home-page .profile-photo-card:not(.polaroid-format) figcaption {
    position: static;
    margin: clamp(14px, 1.6vw, 20px) 4px 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 400;
    line-height: 1.35;
    text-align: center;
    text-shadow: none;
    backdrop-filter: none;
}

.profile-eyebrow {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-heavy);
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.intro-copy h3 {
    max-width: 620px;
    margin: 0 0 20px;
    color: var(--navy);
    font-size: var(--subsection-title-size);
    line-height: 1.12;
}

.intro-copy p,
.copy-card p {
    margin: 0;
    font-size: var(--text-md);
}

.intro-copy p + p,
.copy-card p + p {
    margin-top: 16px;
}

.profile-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.profile-facts span {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 7px 11px;
    background: var(--grey);
    color: var(--navy);
    font-size: var(--text-xs);
    font-weight: var(--weight-heavy);
    line-height: 1;
}

.profile-eyebrow + h3 + p {
    margin-top: 0;
}

.values-list {
    display: grid;
    gap: 12px;
}

.value-pill {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    align-items: center;
    padding: 18px;
    border: 1px solid var(--grey-strong);
    border-radius: var(--radius);
    background: var(--white);
}

.value-pill i {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--navy);
    color: var(--white);
}

.value-pill i::before {
    content: "";
    width: 1.35rem;
    height: 1.35rem;
    display: block;
    background: currentColor;
    -webkit-mask: var(--icon, var(--icon-dot)) center / contain no-repeat;
    mask: var(--icon, var(--icon-dot)) center / contain no-repeat;
}

.value-pill strong {
    display: block;
    color: var(--navy);
    line-height: 1.2;
}

.value-pill span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.35;
}

.feature-grid,
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.feature-card,
.info-card {
    min-height: 230px;
    padding: 26px;
    border: 1px solid var(--grey-strong);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--card-shadow);
}

.feature-icon,
.info-icon {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--grey);
    color: var(--navy);
}

.feature-icon i,
.info-icon i,
.participant i,
.button i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    font-style: normal;
}

.skills-showcase {
    display: grid;
    gap: 24px;
}

.skill-tab-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(112px, 1fr));
    gap: 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--grey-strong);
    scrollbar-width: none;
}

.skill-tab-list::-webkit-scrollbar {
    display: none;
}

.skill-tab-list button {
    position: relative;
    min-width: 112px;
    min-height: 104px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 8px;
    border: 0;
    padding: 12px 14px 18px;
    background: transparent;
    color: #737780;
    font: inherit;
    font-weight: var(--weight-bold);
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}

.skill-tab-list button::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    border-radius: 999px;
    background: transparent;
    transition: background 0.2s ease;
}

.skill-tab-list button i {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
}

.skill-tab-list button i::before {
    content: "";
    width: 2.45rem;
    height: 2.45rem;
    display: block;
    background: currentColor;
    -webkit-mask: var(--icon, var(--icon-dot)) center / contain no-repeat;
    mask: var(--icon, var(--icon-dot)) center / contain no-repeat;
}

.skill-tab-list button span {
    font-size: var(--text-sm);
    line-height: 1.15;
}

.skill-tab-list button:hover,
.skill-tab-list button:focus-visible,
.skill-tab-list button.is-active {
    color: #1d1d1f;
}

.skill-tab-list button:hover {
    transform: translateY(-2px);
}

.skill-tab-list button.is-active::after {
    background: #1d1d1f;
}

.skill-tab-list button:focus-visible {
    outline: 3px solid rgba(40, 104, 201, 0.28);
    outline-offset: -3px;
}

.skill-panel-stack {
    min-width: 0;
}

.skill-panel {
    min-height: 340px;
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(320px, 1fr);
    align-items: center;
    gap: 30px;
    padding: 36px;
    border-radius: 18px;
    background: #f5f6f8;
    overflow: hidden;
}

.skill-panel[hidden] {
    display: none;
}

.skill-panel-kicker {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-heavy);
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.skill-panel h3 {
    max-width: 520px;
    margin: 0;
    color: var(--text);
    font-size: var(--panel-title-size);
    line-height: 1.12;
    letter-spacing: 0;
    text-wrap: balance;
}

.skill-panel-copy > p:not(.skill-panel-kicker) {
    max-width: 520px;
    margin: 16px 0 0;
    color: var(--muted);
    font-size: var(--text-base);
}

.skill-panel-list {
    display: grid;
    align-content: center;
    gap: 0;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.66);
    backdrop-filter: blur(12px);
}

.skill-panel-list div {
    display: grid;
    grid-template-columns: minmax(120px, 0.62fr) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 15px 18px;
    border-bottom: 1px solid rgba(24, 43, 86, 0.1);
}

.skill-panel-list div:last-child {
    border-bottom: 0;
}

.skill-panel-list span {
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
}

.skill-panel-list strong {
    color: var(--text);
    font-size: var(--text-base);
    line-height: 1.2;
}

.skill-panel .timeline-link {
    margin-top: 20px;
}

.carousel-controls {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

.icon-button {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--grey-strong);
    border-radius: 50%;
    background: var(--white);
    color: var(--navy);
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.icon-button:hover {
    transform: translateY(-1px);
    background: var(--navy);
    color: var(--white);
}

.icon-button:disabled {
    cursor: default;
    opacity: 0.42;
    transform: none;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 8px 0 0;
}

.carousel-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #c8ceda;
    cursor: pointer;
    transition: width 0.2s ease, background 0.2s ease;
}

.carousel-dots button[aria-current="true"] {
    width: 24px;
    background: var(--navy);
}

.fas,
.fab {
    --icon: var(--icon-dot);
    font-size: var(--text-lg);
}

.fa-user,
.fa-users,
.fa-people-group {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M4 22c0-5 4-8 8-8s8 3 8 8z'/%3E%3C/svg%3E");
}

.fa-graduation-cap {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 1 8l11 5 9-4.1V16h2V8L12 3z'/%3E%3Cpath d='M5 11v4.5C7 17.8 9.3 19 12 19s5-1.2 7-3.5V11l-7 3-7-3z'/%3E%3C/svg%3E");
}

.fa-university,
.fa-city,
.fa-building-columns,
.fa-scale-balanced {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 7v2h20V7L12 2zM4 10h3v8H4v-8zm5 0h3v8H9v-8zm5 0h3v8h-3v-8zm5 0h1v8h-1v-8zM2 20h20v2H2v-2z'/%3E%3C/svg%3E");
}

.fa-heart,
.fa-heartbeat,
.fa-hand-holding-heart {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.2-10-11c-1.5-4.5 3.8-8 7-4.7L12 8l3-2.7c3.2-3.3 8.5.2 7 4.7-2 5.8-10 11-10 11z'/%3E%3C/svg%3E");
}

.fa-handshake,
.fa-hands-helping,
.fa-people-arrows {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 8h4l2 2 2-2h2l5 5-4 4h-3l-3 3-3-3H6l-4-4 5-5zm4 4-2 2 3 3 3-3-2-2-1 1-1-1z'/%3E%3C/svg%3E");
}

.fa-leaf,
.fa-seedling {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 3C11 3 4 8 4 17c0 2 1 4 3 4 7 0 13-8 13-18zM4 22c3-6 7-10 13-14-5 5-7 9-9 14H4z'/%3E%3C/svg%3E");
}

.fa-compass,
.fa-route,
.fa-map-signs,
.fa-map-marker-alt,
.fa-door-open,
.fa-link,
.fa-person-walking-arrow-right {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm4 6-2.2 5.8L8 16l2.2-5.8L16 8z'/%3E%3C/svg%3E");
}

.fa-flag-checkered {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h2v18H4V3zm4 1h12v10H8V4zm2 2v2h2V6h-2zm4 0v2h2V6h-2zm4 0v2h-2v2h2v2h-2v-2h-2v2h-2v-2h-2v2H8V6h2v2h2v2h2V8h2V6h2z'/%3E%3C/svg%3E");
}

.fa-star,
.fa-award {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1 3-6z'/%3E%3C/svg%3E");
}

.fa-toolbox,
.fa-store,
.fa-briefcase {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l1 3h5v15H3V6h5l1-3zm2 3h2l-.3-1h-1.4L11 6zM5 10v3h14v-3H5zm0 5v4h14v-4H5z'/%3E%3C/svg%3E");
}

.fa-folder-open {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5A2.5 2.5 0 0 1 5.5 4H10l2 2.5h6.5A2.5 2.5 0 0 1 21 9v1H6.5a2 2 0 0 0-1.9 1.4L3 17.5v-11Z'/%3E%3Cpath d='M4.6 11.4A2 2 0 0 1 6.5 10H22l-2.1 7.4A3.5 3.5 0 0 1 16.5 20H4.8A1.8 1.8 0 0 1 3 17.7l1.6-6.3Z'/%3E%3C/svg%3E");
}

.fa-book-open {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5.5A3.5 3.5 0 0 1 6.5 2H11v17H6.5A3.5 3.5 0 0 0 3 22V5.5Z'/%3E%3Cpath d='M21 5.5A3.5 3.5 0 0 0 17.5 2H13v17h4.5A3.5 3.5 0 0 1 21 22V5.5Z'/%3E%3C/svg%3E");
}

.fa-comments,
.fa-info-circle {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v11H8l-4 4V4zm5 4v2h6V8H9zm0 4v2h10v-2H9z'/%3E%3C/svg%3E");
}

.fa-project-diagram,
.fa-layer-group,
.fa-diagram-project,
.fa-sitemap {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h6v6H4V4zm10 0h6v6h-6V4zM4 14h6v6H4v-6zm12-2h2v2h-2v-2zM9 9h6v2H9V9zm0 6h7v2H9v-2z'/%3E%3C/svg%3E");
}

.fa-puzzle-piece {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3h4v4h3a3 3 0 1 1 0 6h-3v3h-3a3 3 0 1 0-6 0H2v-6h4V6h4V3zm6 6h-4V5h-1v3H4v1h4v4H4v1h3.5A5 5 0 0 1 17 18h1v-7h-2a1 1 0 1 0 0-2z'/%3E%3C/svg%3E");
}

.fa-camera,
.fa-images {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5h8l2 3h3v12H3V8h3l2-3zm4 5a4 4 0 1 0 0 8 4 4 0 0 0 0-8z'/%3E%3C/svg%3E");
}

.fa-pen-nib,
.fa-code {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 2 8 13l-2 7 7-2L24 7l-5-5zM8 16l2 2-3 1 1-3zM3 6l4 4-4 4-2-2 2-2-2-2 2-2zm18 2 2 2-2 2-2-2 2-2z'/%3E%3C/svg%3E");
}

.fa-calendar-check,
.fa-clock {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2h2v3h10V2h2v3h3v17H2V5h3V2zm-1 8v10h16V10H4zm13 3-6 6-3-3 2-2 1 1 4-4 2 2z'/%3E%3C/svg%3E");
}

.fa-question-circle {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 17a1.3 1.3 0 1 1 0-2.6 1.3 1.3 0 0 1 0 2.6zm1-5h-2v-1.4c0-1.1.7-1.7 1.5-2.2.8-.5 1.4-.9 1.4-1.7 0-.9-.7-1.5-1.8-1.5-1 0-1.7.5-2.2 1.3L8.3 7.4C9.1 6.1 10.4 5.3 12.2 5.3c2.2 0 3.8 1.2 3.8 3.2 0 1.7-1.1 2.5-2 3.1-.7.5-1 .8-1 1.4V14z'/%3E%3C/svg%3E");
}

.fa-magic {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m3 21 12-12 3 3L6 24l-3-3zm13-16 1-3 1 3 3 1-3 1-1 3-1-3-3-1 3-1zM7 4l1-3 1 3 3 1-3 1-1 3-1-3-3-1 3-1zm13 9 1-2 1 2 2 1-2 1-1 2-1-2-2-1 2-1z'/%3E%3C/svg%3E");
}

.fa-list-check {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m4 6 2 2 4-4 2 2-6 6-4-4 2-2zm10 1h8v3h-8V7zM4 16l2 2 4-4 2 2-6 6-4-4 2-2zm10 1h8v3h-8v-3z'/%3E%3C/svg%3E");
}

.fa-file-pdf {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h8l4 4v16H6z'/%3E%3Cpath d='M14 2v5h5'/%3E%3Cpath d='M12 9v6'/%3E%3Cpath d='m9.5 12.5 2.5 2.5 2.5-2.5'/%3E%3Cpath d='M8 18h8'/%3E%3Cpath d='M8 21h8'/%3E%3C/svg%3E");
}

.fa-chart-line,
.fa-chart-column,
.fa-chart-simple,
.fa-magnifying-glass-chart {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h2v16h16v2H3V3zm4 12 4-5 3 3 5-8 2 1-7 11-3-3-3 4-1-3z'/%3E%3C/svg%3E");
}

.fa-lightbulb,
.fa-flask {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2zm-4 17h8v2H8v-2z'/%3E%3C/svg%3E");
}

.fa-cube {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 9 5v10l-9 5-9-5V7l9-5zm0 2.5L6 8l6 3.5L18 8l-6-3.5zM5 10v6l6 3.5v-6L5 10zm14 0-6 3.5v6l6-3.5v-6z'/%3E%3C/svg%3E");
}

.fa-arrow-right,
.fa-arrow-left,
.fa-arrow-down,
.fa-arrow-up,
.fa-external-link-alt {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 5 11.6 6.4 16.2 11H4v2h12.2l-4.6 4.6L13 19l7-7-7-7z'/%3E%3C/svg%3E");
}

.fa-arrow-left::before {
    transform: rotate(180deg);
}

.fa-arrow-down::before {
    transform: rotate(90deg);
}

.fa-arrow-up::before {
    transform: rotate(-90deg);
}

.fa-instagram {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm5 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm6-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E");
}

/* Local outline icon set. Keeps icons consistent without external font/CDN requests. */
.fas,
.fab {
    font-size: var(--text-lg);
}

.fa-user {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.8-4.2 5-6 8-6s6.2 1.8 8 6'/%3E%3C/svg%3E");
}

.fa-users,
.fa-people-group {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20c-.8-3-3-5-6-5s-5.2 2-6 5'/%3E%3Ccircle cx='10' cy='8' r='4'/%3E%3Cpath d='M22 20c-.5-2.3-2-4-4-4.7'/%3E%3Cpath d='M17 4.3a4 4 0 0 1 0 7.4'/%3E%3C/svg%3E");
}

.fa-graduation-cap {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10 12 5 2 10l10 5 10-5Z'/%3E%3Cpath d='M6 12v5c2 1.4 4 2 6 2s4-.6 6-2v-5'/%3E%3Cpath d='M22 10v6'/%3E%3C/svg%3E");
}

.fa-university,
.fa-city,
.fa-building-columns,
.fa-scale-balanced {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V9'/%3E%3Cpath d='M19 21V9'/%3E%3Cpath d='M9 21V9'/%3E%3Cpath d='M15 21V9'/%3E%3Cpath d='M2 9l10-6 10 6H2Z'/%3E%3C/svg%3E");
}

.fa-heart,
.fa-heartbeat,
.fa-hand-holding-heart {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 5.6a5.4 5.4 0 0 0-7.6 0L12 6.8l-1.2-1.2a5.4 5.4 0 1 0-7.6 7.6L12 22l8.8-8.8a5.4 5.4 0 0 0 0-7.6Z'/%3E%3C/svg%3E");
}

.fa-handshake,
.fa-hands-helping,
.fa-people-arrows {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 11 2.5 2.5a2 2 0 0 0 2.8 0L16 11'/%3E%3Cpath d='M7 16 3 12l4-4h4l2 2 2-2h2l4 4-4 4'/%3E%3Cpath d='m9 17 2 2a2 2 0 0 0 3 0l2-2'/%3E%3C/svg%3E");
}

.fa-leaf,
.fa-seedling {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4c-9 0-15 5-15 12a4 4 0 0 0 4 4c6 0 11-7 11-16Z'/%3E%3Cpath d='M4 21c3-6 7-10 13-13'/%3E%3C/svg%3E");
}

.fa-compass,
.fa-route,
.fa-map-signs,
.fa-map-marker-alt,
.fa-door-open,
.fa-link,
.fa-person-walking-arrow-right {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m16 8-2.4 5.6L8 16l2.4-5.6L16 8Z'/%3E%3C/svg%3E");
}

.fa-flag-checkered {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22V4'/%3E%3Cpath d='M5 4c5-2 9 2 14 0v10c-5 2-9-2-14 0'/%3E%3Cpath d='M9 5v8'/%3E%3Cpath d='M15 5v8'/%3E%3C/svg%3E");
}

.fa-star,
.fa-award {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17.2l-5.6 3 1.1-6.2L3 9.6l6.2-.9L12 3Z'/%3E%3C/svg%3E");
}

.fa-toolbox,
.fa-store,
.fa-briefcase {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h18v11H3V8Z'/%3E%3Cpath d='M8 8V6a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M3 13h18'/%3E%3Cpath d='M12 13v2'/%3E%3C/svg%3E");
}

.fa-folder-open {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5A2.5 2.5 0 0 1 5.5 4H10l2 2.5h6.5A2.5 2.5 0 0 1 21 9v1H6.5a2 2 0 0 0-1.9 1.4L3 17.5v-11Z'/%3E%3Cpath d='M4.6 11.4A2 2 0 0 1 6.5 10H22l-2.1 7.4A3.5 3.5 0 0 1 16.5 20H4.8A1.8 1.8 0 0 1 3 17.7l1.6-6.3Z'/%3E%3C/svg%3E");
}

.fa-comments,
.fa-info-circle {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H8l-4 4V5Z'/%3E%3Cpath d='M8 9h8'/%3E%3Cpath d='M8 13h5'/%3E%3C/svg%3E");
}

.fa-envelope {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}

.fa-project-diagram,
.fa-layer-group,
.fa-diagram-project,
.fa-sitemap {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='8.5' y='14' width='7' height='7' rx='1'/%3E%3Cpath d='M10 6.5h4'/%3E%3Cpath d='M6.5 10v4'/%3E%3Cpath d='M17.5 10v4'/%3E%3C/svg%3E");
}

.fa-puzzle-piece {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3h5v4a2 2 0 1 0 4 0h4v5h-4a2 2 0 1 0 0 4h4v5h-6v-3a2 2 0 1 0-4 0v3H8v-5H5a2 2 0 1 1 0-4h3V3Z'/%3E%3C/svg%3E");
}

.fa-camera,
.fa-images {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h4l2-3h4l2 3h4v11H4V8Z'/%3E%3Ccircle cx='12' cy='13.5' r='3.5'/%3E%3C/svg%3E");
}

.fa-gallery-grid {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='8' height='7' rx='1.8'/%3E%3Crect x='13' y='4' width='8' height='7' rx='1.8'/%3E%3Crect x='3' y='13' width='8' height='7' rx='1.8'/%3E%3Crect x='13' y='13' width='8' height='7' rx='1.8'/%3E%3C/svg%3E");
}

.fa-story-book {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.5A2.5 2.5 0 0 1 7 4h5v15H7a2.5 2.5 0 0 0-2.5 2V6.5Z'/%3E%3Cpath d='M19.5 6.5A2.5 2.5 0 0 0 17 4h-5v15h5a2.5 2.5 0 0 1 2.5 2V6.5Z'/%3E%3Cpath d='M8 8h1.8'/%3E%3Cpath d='M14.2 8H16'/%3E%3Cpath d='M14.2 12H16'/%3E%3C/svg%3E");
}

.fa-video {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='13' height='12' rx='2'/%3E%3Cpath d='m16 10 5-3v10l-5-3'/%3E%3C/svg%3E");
}

.fa-pen-nib,
.fa-code {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19 3 2 2-9 9-4 1 1-4 10-8Z'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E");
}

.fa-calendar-check,
.fa-clock {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4'/%3E%3Cpath d='M8 3v4'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='m8 15 2 2 5-5'/%3E%3C/svg%3E");
}

.fa-chart-line,
.fa-chart-column,
.fa-chart-simple,
.fa-magnifying-glass-chart {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V5'/%3E%3Cpath d='M4 19h16'/%3E%3Cpath d='m7 15 4-5 3 3 5-7'/%3E%3C/svg%3E");
}

.fa-lightbulb,
.fa-flask {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M8 14a6 6 0 1 1 8 0c-1 1-1 2-1 4H9c0-2 0-3-1-4Z'/%3E%3C/svg%3E");
}

.fa-cube {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 8 4.5v9L12 21l-8-4.5v-9L12 3Z'/%3E%3Cpath d='M12 12 4 7.5'/%3E%3Cpath d='m12 12 8-4.5'/%3E%3Cpath d='M12 12v9'/%3E%3C/svg%3E");
}

.fa-globe {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15 15 0 0 1 0 20'/%3E%3Cpath d='M12 2a15 15 0 0 0 0 20'/%3E%3C/svg%3E");
}

.fa-arrow-right,
.fa-arrow-left,
.fa-arrow-down,
.fa-arrow-up,
.fa-external-link-alt {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E");
}

.fa-instagram {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M17.5 6.5h.01'/%3E%3C/svg%3E");
}

.fa-linkedin {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M8 11v6'/%3E%3Cpath d='M8 8v.01'/%3E%3Cpath d='M12 17v-6'/%3E%3Cpath d='M12 14a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E");
}

.timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

.timeline::before {
    content: "";
    position: absolute;
    top: 28px;
    left: 7%;
    right: 7%;
    height: 2px;
    background: var(--grey-strong);
}

.timeline-item {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    text-align: center;
    cursor: pointer;
    outline: none;
}

.timeline-marker {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--navy);
    color: var(--white);
    box-shadow: 0 0 0 8px var(--grey);
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.timeline-item:hover .timeline-marker,
.timeline-item:focus-visible .timeline-marker,
.timeline-item.is-active .timeline-marker {
    transform: translateY(-3px);
    background: var(--white);
    color: var(--navy);
    box-shadow: 0 0 0 8px var(--grey), 0 12px 26px rgba(24, 43, 86, 0.16);
}

.timeline-marker i {
    display: inline-flex;
    color: inherit;
    font-style: normal;
}

.timeline-marker i::before {
    content: "";
    width: 1.55rem;
    height: 1.55rem;
    display: block;
    background: currentColor;
    -webkit-mask: var(--icon, var(--icon-dot)) center / contain no-repeat;
    mask: var(--icon, var(--icon-dot)) center / contain no-repeat;
}

.timeline-content {
    display: grid;
    justify-items: center;
    gap: 8px;
}

.timeline-item .timeline-content p,
.timeline-item .timeline-content .timeline-date,
.timeline-item .timeline-content .timeline-link {
    display: none;
}

.timeline-detail {
    grid-column: 1 / -1;
    min-height: 150px;
    display: grid;
    grid-template-columns: minmax(170px, 0.34fr) minmax(0, 1fr);
    gap: 8px 24px;
    align-items: start;
    margin-top: 12px;
    padding: 20px;
    border: 1px solid var(--grey-strong);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--card-shadow);
}

.timeline-date {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    border-radius: 999px;
    padding: 6px 10px;
    background: var(--grey);
    color: var(--navy);
    font-size: var(--text-xs);
    font-weight: var(--weight-heavy);
    line-height: 1;
}

.timeline-content h3 {
    margin: 0;
    color: var(--navy);
    font-size: var(--text-base);
    line-height: 1.2;
}

.timeline-detail h3 {
    grid-column: 1;
    margin: 12px 0 8px;
    color: var(--navy);
    font-size: var(--text-lg);
    line-height: 1.16;
}

.timeline-content p,
.timeline-detail p {
    margin: 0;
    color: var(--muted);
}

.timeline-detail p {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.timeline-detail .timeline-link {
    grid-column: 2;
}

.timeline-link {
    display: inline-flex;
    margin-top: 12px;
    color: var(--navy);
    font-weight: var(--weight-heavy);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.engagement-browser {
    min-width: 0;
    display: grid;
    gap: 22px;
}

.engagement-browser-top {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.filter-tabs,
.engagement-tabs {
    position: relative;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    border-radius: 999px;
    padding: 8px;
    background: #e9ebf1;
    scrollbar-width: none;
}

.engagement-tab-indicator {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    z-index: 0;
    width: 0;
    border-radius: 999px;
    background: #1d1d1f;
    box-shadow: 0 10px 26px rgba(24, 43, 86, 0.16);
    transform: translateX(8px);
}

.engagement-browser.tabs-ready .engagement-tab-indicator {
    transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.filter-tabs::-webkit-scrollbar,
.engagement-tabs::-webkit-scrollbar {
    display: none;
}

.filter-tabs button,
.engagement-tabs button {
    position: relative;
    z-index: 1;
    min-height: 48px;
    border: 0;
    border-radius: 999px;
    padding: 12px 22px;
    color: var(--text);
    background: transparent;
    font: inherit;
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.22s ease;
}

.filter-tabs button.is-active,
.engagement-tabs button.is-active {
    color: var(--white);
}

.filter-tabs button:focus-visible,
.engagement-tabs button:focus-visible {
    outline: 3px solid rgba(40, 104, 201, 0.28);
    outline-offset: 3px;
}

.engagement-slider-controls {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

.icon-button[data-engagement-prev] i {
    transform: rotate(180deg);
}

.engagement-card-window {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--radius);
}

.engagement-card-grid {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: stretch;
    gap: 18px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 0;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
    will-change: opacity, transform;
}

.engagement-browser.is-switching .engagement-card-grid {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}

.engagement-card-grid::-webkit-scrollbar {
    display: none;
}

.engagement-card {
    flex: 0 0 calc((100% - 36px) / 3);
    min-width: 320px;
    overflow: hidden;
    border: 1px solid rgba(24, 43, 86, 0.08);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--card-shadow);
    scroll-snap-align: start;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.engagement-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(24, 43, 86, 0.1);
}

.engagement-dots {
    padding-top: 2px;
}

.engagement-card[hidden] {
    display: none;
}

.engagement-card-media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--white);
}

.engagement-card-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.engagement-card-media img.engagement-image-putzpatenschaft {
    object-position: center 24%;
}

.engagement-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--navy);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(246, 248, 251, 0.98)),
        var(--white);
}

.engagement-card-placeholder i {
    width: 76px;
    height: 76px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--navy);
    background: var(--white);
    box-shadow: 0 14px 34px rgba(24, 43, 86, 0.11);
}

.engagement-card-placeholder i::before {
    content: "";
    width: 2rem;
    height: 2rem;
    display: block;
    background: currentColor;
    -webkit-mask: var(--icon, var(--icon-dot)) center / contain no-repeat;
    mask: var(--icon, var(--icon-dot)) center / contain no-repeat;
}

.engagement-card-body {
    padding: 20px;
}

.engagement-card-body h3 {
    margin: 14px 0 10px;
    color: var(--navy);
    font-size: var(--text-lg);
    line-height: 1.18;
    letter-spacing: 0;
}

.engagement-card-body p {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.feature-card h3,
.project-card h3,
.info-card h3 {
    margin: 22px 0 10px;
    color: var(--navy);
    font-size: var(--text-lg);
    line-height: 1.18;
    letter-spacing: 0;
}

.feature-card p,
.project-card p,
.info-card p {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 18px;
}

.project-card {
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--grey-strong);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--card-shadow);
}

.project-grid.has-scroll-reveal .project-card {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition: opacity 1.34s cubic-bezier(0.16, 1, 0.3, 1), transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--project-reveal-delay, 0ms);
    will-change: opacity, transform;
}

.project-grid.has-scroll-reveal .project-card.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
}

.project-card.project-featured {
    grid-column: span 2;
    display: grid;
    grid-template-columns: minmax(220px, 0.78fr) minmax(0, 1fr);
}

.project-media {
    aspect-ratio: 1 / 1;
    background: var(--grey);
    overflow: hidden;
}

.project-featured .project-media {
    aspect-ratio: auto;
    min-height: 100%;
}

.project-priority:not(.project-featured) .project-media {
    aspect-ratio: 16 / 10;
}

.project-priority .project-body {
    padding: 18px;
}

.project-featured.project-priority .project-body {
    padding: 24px;
}

.project-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.project-card:hover .project-media img {
    transform: scale(1.035);
}

.project-body {
    padding: 20px;
}

.project-featured .project-body {
    padding: 28px;
}

.project-body h3 {
    margin-top: 0;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.tag {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 6px 10px;
    background: var(--grey);
    color: var(--navy);
    font-size: var(--text-xs);
    font-weight: var(--weight-heavy);
    line-height: 1;
}

.project-link {
    margin-top: 20px;
}

.brix-highlight {
    display: grid;
    grid-template-columns: minmax(280px, 0.58fr) minmax(0, 1fr);
    gap: 36px;
    align-items: center;
    padding: 34px;
    border-radius: var(--radius);
    background: var(--navy);
    color: var(--white);
    box-shadow: var(--shadow);
}

.brix-highlight img {
    width: 100%;
    max-width: 340px;
    justify-self: center;
    border-radius: var(--radius);
    background: var(--white);
}

.brix-highlight h2 {
    margin: 0;
    color: var(--white);
    font-size: var(--section-title-size);
    line-height: 1;
    letter-spacing: 0;
}

.brix-highlight p {
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--text-md);
}

.brix-highlight .section-kicker {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, 0.78);
}

.brix-highlight .section-kicker i {
    background: var(--white);
    color: var(--navy);
}

.social-highlight {
    display: grid;
    grid-template-columns: minmax(180px, 0.35fr) minmax(0, 1fr);
    gap: 36px;
    align-items: center;
    padding: 34px;
    border-radius: var(--radius);
    background: var(--navy);
    color: var(--white);
    box-shadow: var(--shadow);
}

.social-highlight h2 {
    margin: 0;
    color: var(--white);
    font-size: var(--section-title-size);
    line-height: 1;
}

.social-highlight p {
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--text-md);
}

.social-highlight .section-kicker {
    color: rgba(255, 255, 255, 0.78);
}

.social-highlight .section-kicker i {
    background: var(--white);
    color: var(--navy);
}

.social-image,
.social-icon {
    width: min(100%, 220px);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)),
        rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    overflow: hidden;
}

.social-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.social-icon i {
    display: inline-flex;
    color: var(--white);
    font-size: 4rem;
    font-style: normal;
}

.social-icon i::before {
    content: "";
    width: 1em;
    height: 1em;
    display: block;
    background: currentColor;
    -webkit-mask: var(--icon, var(--icon-dot)) center / contain no-repeat;
    mask: var(--icon, var(--icon-dot)) center / contain no-repeat;
}

.contact-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
}

.contact-strip-with-media {
    grid-template-columns: minmax(170px, 0.32fr) minmax(0, 1fr) auto;
}

.contact-media {
    min-height: 0;
    height: auto;
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--grey-strong);
    border-radius: var(--radius);
    background: var(--grey);
    box-shadow: var(--card-shadow);
}

.contact-media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.contact-strip p {
    margin: 10px 0 0;
}

.contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}

.home-final-cta {
    grid-template-columns: minmax(260px, 0.46fr) minmax(0, 0.54fr);
    gap: clamp(36px, 7vw, 92px);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.home-final-cta .contact-media {
    --polaroid-width: min(100%, 390px);
    border: 0;
    border-radius: var(--polaroid-radius);
    background-color: var(--polaroid-paper);
    background-image: url("../images/design/instax-texture.jpg");
    background-size: cover;
    background-position: center;
    box-shadow: var(--polaroid-shadow);
    transform: rotate(-4deg);
}

.home-final-cta .contact-media img {
    aspect-ratio: var(--polaroid-image-ratio);
    border-radius: var(--polaroid-image-radius);
}

.home-final-cta .contact-media:not(.polaroid-format) figcaption {
    margin: clamp(14px, 1.6vw, 22px) 4px 0;
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 400;
    line-height: 1.35;
    text-align: center;
}

.home-final-cta .contact-actions {
    justify-content: flex-start;
    margin-top: 28px;
}

.faq-list {
    width: min(100%, 880px);
    display: grid;
    gap: 10px;
}

.faq-item {
    border: 1px solid var(--grey-strong);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--card-shadow);
}

.faq-item.is-faq-revealed {
    animation: faqItemIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--faq-reveal-delay, 0ms);
}

.faq-item summary {
    position: relative;
    min-height: 58px;
    display: flex;
    align-items: center;
    padding: 18px 56px 18px 20px;
    color: var(--navy);
    font-size: var(--text-md);
    font-weight: var(--weight-heavy);
    line-height: 1.25;
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 20px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--grey-strong);
    border-radius: 50%;
    color: var(--navy);
    font-size: 1.2rem;
    font-weight: var(--weight-bold);
    line-height: 1;
    transform: translateY(-50%);
}

.faq-item[open] summary::after {
    content: "-";
}

.faq-item summary:focus-visible {
    outline: 3px solid rgba(40, 104, 201, 0.28);
    outline-offset: 3px;
}

.faq-item p {
    margin: 0;
    padding: 0 20px 20px;
    color: var(--muted);
    font-size: var(--text-base);
}

.faq-reveal {
    margin-top: 18px;
}

@keyframes faqItemIn {
    from {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.project-page .hero {
    --hero-image: url("../images/hnu-engagement-day/portfolio-hnu-engagement-day.png");
    padding: 82px 0 64px;
}

.engagement-day-page .hero {
    --hero-image: url("../images/hnu-engagement-day/hnu-engagement-day-cover.jpg");
}

.pet-page .hero {
    --hero-image: url("../images/tierfotografie/hund-spaziergang-quer-01.jpeg");
}

.portrait-page .hero {
    --hero-image: url("../images/portraitfotografie/portraitfotografie-hero-paarshooting-quer.jpeg");
}

.pet-page .hero-panel img,
.portrait-page .hero-panel img {
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

.project-page .hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.72fr);
}

.project-page h1 {
    max-width: 640px;
    margin: 0 0 24px;
    color: var(--white);
    font-size: var(--hero-title-size);
    line-height: 1.03;
    letter-spacing: 0;
    text-wrap: balance;
}

.project-page .hero-lead {
    max-width: 560px;
}

.participant-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.participant {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--grey-strong);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--navy);
    font-weight: var(--weight-bold);
}

.role-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
    gap: 24px;
}

.role-panel {
    padding: 34px;
    border-radius: var(--radius);
    background: var(--navy);
    color: var(--white);
    box-shadow: var(--shadow);
}

.role-panel h2 {
    color: var(--white);
}

.role-panel p {
    color: rgba(255, 255, 255, 0.78);
}

.source-link,
.legal-page main a {
    color: var(--navy);
    font-weight: var(--weight-bold);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.brix-page .hero {
    --hero-image: url("../images/brix/brix-project-vision.png");
    min-height: 580px;
    display: grid;
    align-items: center;
    padding: 82px 0 64px;
}

.brix-page .hero h1 {
    max-width: 640px;
    margin: 0;
    color: var(--white);
    font-size: var(--hero-title-size);
    line-height: 1.03;
    text-wrap: balance;
}

.brix-page .hero .tagline {
    margin: 16px 0 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    animation: heroTextIn 0.72s cubic-bezier(0.18, 0.9, 0.2, 1) 0.24s both;
}

.brix-page .hero .hero-lead {
    max-width: 560px;
}

.brix-page .features,
.brix-page .explanation,
.brix-page .how-it-works,
.brix-page .stl-viewer,
.brix-page .detailed-insights,
.brix-page .downloads,
.brix-page .call-to-action {
    padding: 84px 0;
}

.brix-page .features,
.brix-page .explanation,
.brix-page .stl-viewer {
    background: var(--grey);
}

.brix-page .detailed-insights,
.brix-page .how-it-works,
.brix-page .downloads {
    background: var(--white);
}

.brix-page h2 {
    margin: 0 0 18px;
    color: var(--navy);
    font-size: var(--section-title-size);
    line-height: 1.06;
}

.brix-page .container > p {
    max-width: 850px;
    color: var(--muted);
    font-size: var(--text-md);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.brix-page .features-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

.feature-item,
.step {
    padding: 26px;
    border: 1px solid var(--grey-strong);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--card-shadow);
}

.brix-page .feature-item {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
}

.feature-item img {
    display: block;
    margin: 0 auto 18px;
}

.brix-page .feature-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: contain;
    margin: 0;
    padding: 14px;
    border-radius: var(--radius);
    background: var(--white);
}

.feature-item h3,
.step h3 {
    margin: 0 0 10px;
    color: var(--navy);
    font-size: var(--text-lg);
}

.feature-item p,
.step p {
    margin: 0;
    color: var(--muted);
}

.detailed-insights img,
.stl-viewer img,
.explanation img {
    display: block;
    width: min(100%, 680px);
    height: auto;
    margin: 28px auto 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.wedding-page .steps,
.pet-page .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.step-card {
    padding: 24px;
    border: 1px solid var(--grey-strong);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--card-shadow);
}

.step-card span {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--grey);
    color: var(--navy);
    font-size: var(--text-xs);
    font-weight: var(--weight-heavy);
    line-height: 1;
}

.step-card h3 {
    margin: 18px 0 10px;
    color: var(--navy);
    font-size: var(--text-lg);
    line-height: 1.18;
}

.step-card p {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.wedding-process-section .section-inner {
    display: grid;
    align-content: center;
}

.wedding-process-timeline {
    --timeline-progress: 0%;
    position: relative;
    display: grid;
    gap: 0;
    max-width: 880px;
    margin: clamp(36px, 6vw, 72px) auto 0;
    padding: 10px 0 10px;
    list-style: none;
    counter-reset: wedding-process;
}

.wedding-process-timeline::before,
.wedding-process-timeline::after {
    content: "";
    position: absolute;
    top: 28px;
    bottom: 28px;
    left: 28px;
    width: 2px;
    border-radius: 999px;
}

.wedding-process-timeline::before {
    background: color-mix(in srgb, var(--navy) 14%, transparent);
}

.wedding-process-timeline::after {
    height: var(--timeline-progress);
    max-height: calc(100% - 56px);
    background: linear-gradient(180deg, var(--navy), var(--navy-soft));
    transition: height 0.08s linear;
}

.wedding-process-step {
    position: relative;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: clamp(18px, 4vw, 48px);
    min-height: clamp(150px, 22vh, 230px);
    align-items: start;
    padding: 12px 0 34px;
}

.wedding-process-step:last-child {
    min-height: 0;
    padding-bottom: 0;
}

.wedding-process-marker {
    position: relative;
    z-index: 2;
    width: 22px;
    height: 22px;
    margin: 7px 0 0 18px;
    border: 2px solid color-mix(in srgb, var(--navy) 24%, var(--white));
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 0 0 8px var(--white);
    transition: border-color 0.28s ease, background-color 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;
}

.wedding-process-step.is-active .wedding-process-marker {
    border-color: var(--navy);
    background: var(--navy);
    box-shadow: 0 0 0 8px var(--white), 0 12px 30px rgba(24, 43, 86, 0.18);
    transform: scale(1.08);
}

.wedding-process-content {
    max-width: 660px;
    padding-top: 0;
}

.wedding-process-number {
    display: inline-flex;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-heavy);
    letter-spacing: 0.08em;
    line-height: 1;
}

.wedding-process-content h3 {
    margin: 0 0 10px;
    color: var(--navy);
    font-size: var(--type-card);
    line-height: 1.08;
}

.wedding-process-content p {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-base);
    line-height: 1.62;
}

html[data-theme="dark"] .wedding-process-timeline::before {
    background: color-mix(in srgb, var(--white) 18%, transparent);
}

html[data-theme="dark"] .wedding-process-timeline::after {
    background: linear-gradient(180deg, var(--dark-accent), var(--navy-soft));
}

html[data-theme="dark"] .wedding-process-marker {
    border-color: color-mix(in srgb, var(--white) 30%, transparent);
    background: var(--dark-panel);
    box-shadow: 0 0 0 8px var(--dark-page);
}

html[data-theme="dark"] .wedding-process-step.is-active .wedding-process-marker {
    border-color: var(--dark-accent);
    background: var(--dark-accent);
    box-shadow: 0 0 0 8px var(--dark-page), 0 14px 34px rgba(125, 177, 255, 0.18);
}

html[data-theme="dark"] .wedding-process-content h3 {
    color: var(--text);
}

html[data-theme="dark"] .wedding-process-number,
html[data-theme="dark"] .wedding-process-content p {
    color: var(--muted);
}

.call-to-action {
    background: var(--navy);
    color: var(--white);
    text-align: center;
}

.call-to-action h2 {
    color: var(--white);
}

.call-to-action p {
    max-width: 760px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.78);
}
.downloads a {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 22px;
    border-radius: 999px;
    padding: 12px 18px;
    border: 1px solid currentColor;
    color: var(--navy);
    background: transparent;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}

.downloads a:hover,
.downloads a:focus-visible {
    transform: translateY(-2px);
    border-color: var(--navy);
    background: var(--navy);
    color: var(--white);
}

.downloads a {
    margin: 8px;
}

.legal-page main {
    background: var(--grey);
}

.legal-hero {
    padding: 72px 0 42px;
    background: var(--navy);
    color: var(--white);
}

html[data-theme="dark"] .legal-hero {
    background: linear-gradient(135deg, #08111f 0%, #101b2f 100%);
    color: var(--text);
}

html[data-theme="dark"] .legal-hero p {
    color: var(--muted);
}

.legal-hero h1 {
    margin: 0;
    font-size: var(--hero-title-size);
    line-height: 1.03;
    text-wrap: balance;
}

.legal-hero p {
    max-width: 760px;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--text-md);
}

.legal-card {
    padding: 34px;
    border: 1px solid var(--grey-strong);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow);
}

.legal-card + .legal-card {
    margin-top: 22px;
}

.legal-card h2 {
    margin: 0 0 14px;
    color: var(--navy);
    font-size: var(--subsection-title-size);
}

.legal-card h3 {
    margin: 24px 0 10px;
    color: var(--navy);
}

.legal-card p,
.legal-card li {
    color: var(--muted);
}

.legal-card ul {
    padding-left: 1.2rem;
}

.media-gallery,
.wedding-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 18px;
}

.story-card-grid,
.wedding-story-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.story-card-grid article,
.wedding-story-grid article {
    min-height: 100%;
    padding: 24px;
    border: 1px solid var(--grey-strong);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--card-shadow);
}

.story-card-grid span,
.wedding-story-grid span {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--grey);
    color: var(--navy);
    font-size: var(--text-xs);
    font-weight: var(--weight-heavy);
    line-height: 1;
}

.story-card-grid h3,
.wedding-story-grid h3 {
    margin: 18px 0 10px;
    color: var(--navy);
    font-size: var(--text-lg);
    line-height: 1.18;
}

.story-card-grid p,
.wedding-story-grid p {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.wedding-team {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.65fr);
    gap: 16px;
    align-items: stretch;
}

.team-copy,
.team-roles article {
    border: 1px solid var(--grey-strong);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--card-shadow);
}

.team-copy {
    padding: 28px;
}

.team-copy p {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-md);
}

.team-copy p + p {
    margin-top: 16px;
}

.team-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.team-benefits span {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 7px 10px;
    background: var(--grey);
    color: var(--navy);
    font-size: var(--text-xs);
    font-weight: var(--weight-heavy);
    line-height: 1;
}

.team-trust {
    margin-top: 22px;
    padding: 18px;
    border: 1px solid rgba(24, 43, 86, 0.1);
    border-radius: var(--radius);
    background: var(--grey);
}

.team-trust h3 {
    margin: 0 0 10px;
    color: var(--navy);
    font-size: var(--text-lg);
    line-height: 1.18;
}

.team-trust p {
    font-size: var(--text-sm);
    line-height: 1.5;
}

.team-trust ul {
    display: grid;
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.team-trust li {
    position: relative;
    padding-left: 18px;
    color: var(--text);
    font-size: var(--text-sm);
    line-height: 1.4;
}

.team-trust li::before {
    content: "";
    position: absolute;
    top: 0.62em;
    left: 2px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--navy);
}

.wedding-options-table-card {
    overflow: hidden;
    border: 1px solid var(--grey-strong);
    border-radius: 24px;
    background: var(--white);
    box-shadow: var(--card-shadow);
}

.wedding-options-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-gutter: stable;
}

.wedding-options-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    color: var(--text);
    font-size: var(--text-sm);
}

.wedding-options-table caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.wedding-options-table th,
.wedding-options-table td {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(24, 43, 86, 0.08);
    vertical-align: top;
    text-align: left;
}

.wedding-options-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    color: var(--navy);
}

.wedding-options-table thead th:not(:first-child) {
    min-width: 170px;
}

.wedding-options-table thead th span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    font-size: var(--text-lg);
    line-height: 1.1;
}

.wedding-options-table thead th span i {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    border-radius: 999px;
    background: var(--grey);
    color: var(--navy);
    font-size: 0.86rem;
}

.wedding-options-table thead th em {
    display: inline-flex;
    margin-bottom: 8px;
    border-radius: 999px;
    padding: 5px 8px;
    background: rgba(24, 43, 86, 0.08);
    color: var(--navy);
    font-size: var(--text-xs);
    font-style: normal;
    font-weight: var(--weight-bold);
    line-height: 1;
}

.wedding-options-table tbody th {
    width: 23%;
    color: var(--navy);
    font-weight: var(--weight-bold);
}

.wedding-options-table tbody td {
    color: var(--muted);
    line-height: 1.45;
}

.wedding-options-table tbody tr:last-child th,
.wedding-options-table tbody tr:last-child td {
    border-bottom: 0;
}

.wedding-options-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 20px;
    border-top: 1px solid rgba(24, 43, 86, 0.08);
    background: var(--grey);
}

.wedding-options-cta p {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.45;
}

.wedding-options-cta .button {

    white-space: nowrap;
}

.wedding-planner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.52fr);
    gap: 18px;
    align-items: start;
}

.wedding-planner-form,
.planner-summary {
    border: 1px solid var(--grey-strong);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--card-shadow);
}

.wedding-planner-form {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.planner-progress {
    display: grid;
    padding: 14px 16px;
    border: 1px solid var(--grey-strong);
    border-radius: var(--radius);
    background: var(--grey);
}

.planner-step-overview {
    --planner-progress-percent: 9;
    position: relative;
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 4px 0;
    list-style: none;
}

.planner-step-overview::before,
.planner-step-overview::after {
    display: none;
}

.planner-step-overview li {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}

.planner-step-overview li:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(50% + 19px);
    right: calc(-50% + 19px);
    height: 4px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: rgba(24, 43, 86, 0.14);
    clip-path: inset(0 round 999px);
    overflow: hidden;
}

.planner-step-overview li.is-complete:not(:last-child)::before {
    background: var(--navy);
}

.planner-step-overview button {
    position: relative;
    z-index: 2;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--grey-strong);
    border-radius: 999px;
    background: var(--white);
    color: var(--navy);
    box-shadow: 0 0 0 5px var(--grey);
    font: inherit;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.planner-step-overview button:not(:disabled):hover,
.planner-step-overview button:not(:disabled):focus-visible {
    border-color: var(--navy);
    transform: translateY(-1px);
}

.planner-step-overview button.is-active {
    border-color: var(--navy);
    background: var(--navy);
    color: var(--white);
    box-shadow: 0 0 0 5px var(--grey);
}

.planner-step-overview button.is-complete:not(.is-active) {
    border-color: var(--navy);
    background: var(--navy);
    color: var(--white);
    box-shadow: 0 0 0 5px var(--grey);
}

.planner-step-overview button:disabled {
    border-color: var(--grey-strong);
    background: var(--white);
    color: var(--navy);
    cursor: default;
    opacity: 1;
}

.planner-panel {
    margin: 0;
    padding: 18px;
    border: 1px solid var(--grey-strong);
    border-radius: var(--radius);
    background: var(--grey);
}

[data-planner-step][hidden] {
    display: none !important;
}

.planner-panel:not([hidden]) {
    animation: plannerStepIn 0.34s ease both;
}

@keyframes plannerStepIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.planner-panel-soft {
    background: rgba(243, 245, 248, 0.62);
}

.planner-panel-title {
    width: 100%;
    margin: 0 0 14px;
    padding: 0;
    color: var(--navy);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    line-height: 1.2;
}

.planner-help,
.planner-privacy,
.planner-feedback {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.45;
}

.planner-help:empty {
    display: none;
}

.planner-privacy {
    margin: 0;
}

.planner-choice-grid,
.planner-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.planner-choice,
.planner-chip-grid label {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.planner-chip-grid label[hidden] {
    display: none;
}

.planner-choice input,
.planner-chip-grid input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.planner-choice span,
.planner-chip-grid span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--grey-strong);
    border-radius: 999px;
    padding: 10px 13px;
    background: var(--white);
    color: var(--navy);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: 1;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.planner-choice span em {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    border-radius: 999px;
    padding: 3px 8px;
    background: rgba(24, 43, 86, 0.1);
    color: var(--navy);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: var(--weight-bold);
    line-height: 1;
}

.planner-choice-recommended span {
    border-color: rgba(24, 43, 86, 0.34);
    box-shadow: 0 10px 24px rgba(24, 43, 86, 0.08);
}

.planner-choice-recommended input:checked + span em {
    background: rgba(255, 255, 255, 0.18);
    color: var(--white);
}

.planner-choice span:hover,
.planner-chip-grid span:hover {
    border-color: rgba(24, 43, 86, 0.34);
    transform: translateY(-1px);
}

.planner-choice input:checked + span,
.planner-chip-grid input:checked + span {
    border-color: var(--navy);
    background: var(--navy);
    color: var(--white);
}

.planner-choice input:focus-visible + span,
.planner-chip-grid input:focus-visible + span {
    outline: 3px solid rgba(40, 104, 201, 0.28);
    outline-offset: 3px;
}

.planner-date-row {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.planner-name-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: 12px;
    margin-top: 14px;
}

.planner-name-row > span {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    color: var(--muted);
    font-size: var(--text-lg);
    font-weight: 400;
}

.planner-name-row > input {
    margin-top: 0;
}

.planner-date-row[hidden] {
    display: none;
}

.planner-season-row,
.planner-location-row,
.planner-other-field,
.planner-conditional-row {
    display: grid;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(24, 43, 86, 0.09);
}

.planner-season-row {
    grid-template-columns: minmax(0, 1fr) minmax(118px, 0.45fr);
}

.planner-season-row[hidden],
.planner-location-row[hidden],
.planner-other-field[hidden],
.planner-conditional-row[hidden] {
    display: none;
}

.planner-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.planner-panel-grid .planner-panel-title {
    grid-column: 1 / -1;
}

.planner-panel label,
.planner-panel-grid label,
.planner-date-label,
.planner-date-selects label {
    color: var(--navy);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.planner-date-row input,
.planner-name-row input,
.planner-season-row select,
.planner-location-row input,
.planner-other-field input,
.planner-panel-grid input,
.planner-panel-grid select,
.planner-panel-grid textarea {
    width: 100%;
    min-height: 50px;
    margin-top: 7px;
    border: 1px solid var(--grey-strong);
    border-radius: 18px;
    padding: 13px 15px;
    background: var(--white);
    color: var(--text);
    font: inherit;
    font-weight: 400;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.planner-date-selects {
    display: grid;
    grid-template-columns: minmax(104px, 0.85fr) minmax(190px, 1.35fr) minmax(112px, 0.9fr);
    gap: 12px;
    padding: 10px;
    border: 1px solid rgba(24, 43, 86, 0.08);
    border-radius: 22px;
    background: rgba(245, 246, 248, 0.86);
}

.planner-date-selects label {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.planner-date-selects select,
.planner-season-row select,
.planner-panel-grid select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-color: var(--white);
    background-image:
        linear-gradient(45deg, transparent 50%, var(--navy) 50%),
        linear-gradient(135deg, var(--navy) 50%, transparent 50%);
    background-position:
        calc(100% - 22px) 50%,
        calc(100% - 15px) 50%;
    background-size:
        7px 7px,
        7px 7px;
    background-repeat: no-repeat;
    padding-right: 48px;
    box-shadow: 0 8px 20px rgba(24, 43, 86, 0.05);
}

.planner-date-selects select {
    min-height: 56px;
    margin-top: 0;
    border-radius: 16px;
    padding: 15px 48px 15px 16px;
    background-color: var(--white);
    background-position:
        calc(100% - 24px) 50%,
        calc(100% - 16px) 50%;
    background-size:
        8px 8px,
        8px 8px;
    box-shadow: 0 12px 26px rgba(24, 43, 86, 0.07);
}

.planner-date-selects select:hover,
.planner-season-row select:hover,
.planner-panel-grid select:hover {
    border-color: rgba(24, 43, 86, 0.32);
    background-color: #fbfcfe;
    transform: translateY(-1px);
}

.planner-date-selects select:disabled,
.planner-season-row select:disabled,
.planner-panel-grid select:disabled {
    color: var(--muted);
    cursor: pointer;
    opacity: 0.72;
}

.planner-date-selects select:focus,
.planner-season-row select:focus,
.planner-name-row input:focus,
.planner-other-field input:focus,
.planner-panel-grid input:focus,
.planner-panel-grid select:focus,
.planner-panel-grid textarea:focus {
    outline: 0;
    border-color: rgba(24, 43, 86, 0.5);
    box-shadow: 0 0 0 4px rgba(40, 104, 201, 0.14), 0 10px 24px rgba(24, 43, 86, 0.08);
}

.planner-date-row input::placeholder,
.planner-name-row input::placeholder,
.planner-location-row input::placeholder,
.planner-other-field input::placeholder,
.planner-panel-grid input::placeholder,
.planner-panel-grid textarea::placeholder {
    color: var(--muted);
    font-weight: 400;
    opacity: 0.78;
}

html[data-theme="dark"] .planner-date-selects {
    border-color: rgba(184, 212, 255, 0.16);
    background: rgba(8, 17, 31, 0.82);
}

html[data-theme="dark"] .planner-date-selects select,
html[data-theme="dark"] .planner-season-row select,
html[data-theme="dark"] .planner-panel-grid select {
    border-color: rgba(184, 212, 255, 0.22);
    background-color: #0a1424;
    background-image:
        linear-gradient(45deg, transparent 50%, #d7e6ff 50%),
        linear-gradient(135deg, #d7e6ff 50%, transparent 50%);
    color: var(--text);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .planner-date-selects select:hover,
html[data-theme="dark"] .planner-season-row select:hover,
html[data-theme="dark"] .planner-panel-grid select:hover {
    border-color: rgba(120, 170, 255, 0.5);
    background-color: #101b2f;
}

html[data-theme="dark"] .planner-date-selects select:focus,
html[data-theme="dark"] .planner-season-row select:focus,
html[data-theme="dark"] .planner-panel-grid select:focus {
    border-color: rgba(120, 170, 255, 0.7);
    box-shadow: 0 0 0 4px rgba(120, 170, 255, 0.16), 0 12px 26px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .planner-choice span,
html[data-theme="dark"] .planner-chip-grid span,
html[data-theme="dark"] .planner-date-row input,
html[data-theme="dark"] .planner-name-row input,
html[data-theme="dark"] .planner-location-row input,
html[data-theme="dark"] .planner-other-field input,
html[data-theme="dark"] .planner-panel-grid input,
html[data-theme="dark"] .planner-panel-grid textarea {
    border-color: rgba(184, 212, 255, 0.22);
    background: #0a1424;
    color: var(--text);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
}

html[data-theme="dark"] .planner-choice span em {
    background: rgba(184, 212, 255, 0.12);
    color: var(--text);
}

html[data-theme="dark"] .planner-choice span:hover,
html[data-theme="dark"] .planner-chip-grid span:hover,
html[data-theme="dark"] .planner-date-row input:hover,
html[data-theme="dark"] .planner-name-row input:hover,
html[data-theme="dark"] .planner-location-row input:hover,
html[data-theme="dark"] .planner-other-field input:hover,
html[data-theme="dark"] .planner-panel-grid input:hover,
html[data-theme="dark"] .planner-panel-grid textarea:hover {
    border-color: rgba(120, 170, 255, 0.5);
    background: #101b2f;
}

html[data-theme="dark"] .planner-choice input:checked + span,
html[data-theme="dark"] .planner-chip-grid input:checked + span {
    border-color: var(--dark-accent);
    background: var(--dark-accent);
    color: #07101f;
    box-shadow: 0 12px 28px rgba(120, 170, 255, 0.2);
}

html[data-theme="dark"] .planner-choice input:checked + span em {
    background: rgba(7, 16, 31, 0.12);
    color: #07101f;
}

html[data-theme="dark"] .planner-choice input:focus-visible + span,
html[data-theme="dark"] .planner-chip-grid input:focus-visible + span,
html[data-theme="dark"] .planner-date-row input:focus,
html[data-theme="dark"] .planner-name-row input:focus,
html[data-theme="dark"] .planner-location-row input:focus,
html[data-theme="dark"] .planner-other-field input:focus,
html[data-theme="dark"] .planner-panel-grid input:focus,
html[data-theme="dark"] .planner-panel-grid textarea:focus {
    border-color: rgba(120, 170, 255, 0.7);
    box-shadow: 0 0 0 4px rgba(120, 170, 255, 0.16), 0 12px 26px rgba(0, 0, 0, 0.24);
}

.planner-panel-grid textarea {
    min-height: 112px;
    resize: vertical;
}

.planner-wide-field {
    grid-column: 1 / -1;
}

[data-planner-party-detail][hidden] {
    display: none !important;
}

.planner-option-block {
    display: grid;
    gap: 10px;
}

.planner-feedback.is-available {
    color: #216744;
    font-weight: var(--weight-medium);
}

.planner-feedback.is-unavailable {
    color: #9b2f2f;
    font-weight: var(--weight-medium);
}

.planner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.planner-actions [hidden] {
    display: none;
}

.planner-back-button:hover .fa-arrow-left,
.planner-back-button:focus-visible .fa-arrow-left {
    transform: translateX(-3px);
}

.planner-back-button:disabled:hover .fa-arrow-left,
.planner-back-button:disabled:focus-visible .fa-arrow-left {
    transform: none;
}

.planner-summary {
    position: sticky;
    top: 96px;
    padding: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.planner-summary:hover,
.planner-summary:focus-visible {
    border-color: rgba(24, 43, 86, 0.26);
    box-shadow: 0 18px 42px rgba(24, 43, 86, 0.12);
    transform: translateY(-1px);
    outline: 0;
}

.planner-summary-kicker {
    margin: 0 0 12px;
    color: var(--navy);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.planner-summary-list {
    display: grid;
    gap: 8px;
    margin: 0;
}

.planner-summary [data-planner-summary-content] {
    position: relative;
    max-height: var(--planner-summary-preview-height, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(24, 43, 86, 0.08);
    scrollbar-width: thin;
    scrollbar-color: rgba(24, 43, 86, 0.32) transparent;
}

.planner-summary [data-planner-summary-content]::-webkit-scrollbar {
    width: 7px;
}

.planner-summary [data-planner-summary-content]::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(24, 43, 86, 0.28);
}

.planner-summary-open {
    width: 100%;
    margin-top: 14px;
    border: 0;
    border-radius: 999px;
    padding: 11px 14px;
    background: var(--grey);
    color: var(--navy);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.planner-summary-open:hover,
.planner-summary-open:focus-visible {
    background: var(--navy);
    color: var(--white);
    outline: 0;
}

.planner-summary-list dt {
    color: var(--navy);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    letter-spacing: 0;
    text-transform: none;
}

.planner-summary-list dd {
    margin: -4px 0 8px;
    color: var(--text);
    font-size: var(--text-sm);
    line-height: 1.45;
}

.planner-summary-note {
    margin: 14px 0 18px;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.45;
}

.planner-summary-mail-hint {
    margin-top: -4px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(24, 43, 86, 0.06);
    color: var(--text);
}

.planner-summary-section-title {
    margin: 18px 0 8px;
    color: var(--navy);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
}

.planner-summary-recommendation {
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(24, 43, 86, 0.1);
    border-radius: 16px;
    background: var(--grey);
    color: var(--text);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.planner-check-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.planner-check-list li {
    display: grid;
    grid-template-columns: 12px 96px 1fr;
    align-items: center;
    gap: 9px;
    color: var(--text);
    font-size: var(--text-sm);
    line-height: 1.35;
}

.planner-check-list li span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #d0d7e2;
}

.planner-check-list li.is-good span {
    background: #2f8f5a;
}

.planner-check-list li.is-warning span {
    background: #d7a229;
}

.planner-check-list li.is-bad span {
    background: #b64646;
}

.planner-check-list strong {
    color: var(--navy);
    font-weight: var(--weight-medium);
}

.planner-check-list em {
    color: var(--muted);
    font-style: normal;
}

.planner-summary-request {
    width: 100%;

}

.planner-reset-button {
    margin-left: auto;

}

.planner-modal[hidden] {
    display: none;
}

.planner-modal {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: grid;
    place-items: center;
    padding: 24px;
}

.planner-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(24, 43, 86, 0.58);
    backdrop-filter: blur(8px);
}

.planner-modal-panel {
    position: relative;
    width: min(760px, 100%);
    max-height: min(86vh, 900px);
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 24px;
    padding: 28px;
    background: var(--white);
    box-shadow: 0 28px 90px rgba(8, 20, 48, 0.28);
}

.planner-modal-panel h3 {
    margin: 0 0 18px;
    color: var(--navy);
    font-size: var(--panel-title-size-mobile);
    line-height: 1.05;
}

.planner-modal-close {
    position: sticky;
    top: 0;
    z-index: 2;
    float: right;
    width: 40px;
    height: 40px;
    margin: -10px -10px 8px 14px;
    border: 1px solid var(--grey-strong);
    border-radius: 999px;
    background: var(--white);
    color: var(--navy);
    font: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.planner-modal-close:hover,
.planner-modal-close:focus-visible {
    background: var(--navy);
    color: var(--white);
    transform: rotate(90deg);
    outline: 0;
}

.planner-modal-content {
    display: grid;
    gap: 14px;
    clear: both;
}

.planner-modal-content .planner-summary-list {
    gap: 10px;
}

.planner-modal-panel > .planner-actions {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--grey-strong);
}

.planner-modal-panel > .planner-actions .button {
    flex: 1 1 0;
    
}

.planner-modal-panel > .planner-actions .planner-summary-request {
    width: auto;
    
}

html.planner-modal-open,
body.planner-modal-open {
    overflow: hidden;
}

body.planner-modal-open {
    position: fixed;
    right: 0;
    left: 0;
    width: 100%;
}

.planner-summary-empty {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.45;
}

.team-roles {
    display: grid;
    gap: 18px;
}

.team-roles article {
    padding: 20px;
}

.team-person {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.team-photo {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

.team-roles h3 {
    margin: 0 0 8px;
    color: var(--navy);
    font-size: var(--text-lg);
}

.team-roles p {
    margin: 0;
    color: var(--muted);
}

.team-meta {
    min-width: 0;
}

.team-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.team-socials[hidden] {
    display: none !important;
}

.team-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    border: 1px solid var(--grey-strong);
    border-radius: 999px;
    padding: 5px 8px;
    background: var(--white);
    color: var(--navy);
    font-size: var(--text-xs);
    font-weight: var(--weight-heavy);
    line-height: 1;
    transition: transform var(--transition), border-color var(--transition), background var(--transition);
}

.team-link:hover,
.team-link:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(24, 43, 86, 0.28);
    background: var(--grey);
}

.team-link i {
    display: inline-flex;
    color: inherit;
}

.team-link i::before {
    content: "";
    width: 1em;
    height: 1em;
    display: block;
    background: currentColor;
    -webkit-mask: var(--icon, var(--icon-dot)) center / contain no-repeat;
    mask: var(--icon, var(--icon-dot)) center / contain no-repeat;
}

.wedding-page .wedding-team {
    display: grid;
    grid-template-columns: minmax(190px, 0.72fr) minmax(150px, 0.42fr) minmax(150px, 0.42fr) minmax(190px, 0.72fr);
    align-items: center;
    gap: clamp(18px, 3.8vw, 44px);
}

.wedding-page .team-role-polaroid {
    --polaroid-width: min(100%, 230px);
    margin: 0;
    justify-self: center;
}

.wedding-page .team-role-polaroid img {
    object-position: center;
}

.wedding-page .team-role-polaroid-merlin {
    transform: rotate(-5deg);
}

.wedding-page .team-role-polaroid-robert {
    transform: rotate(5deg);
}

.wedding-page .team-role-polaroid figcaption {
    color: var(--wedding-polaroid-muted);
}

.wedding-page .team-member-copy {
    max-width: 320px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.wedding-page .team-member-copy h3 {
    margin: 0;
    color: var(--wedding-heading);
    font-size: var(--type-card);
    line-height: 1.02;
}

.wedding-page .team-member-copy-robert {
    text-align: left;
}

html[data-theme="dark"] .wedding-page .team-member-copy {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.wedding-page .team-member-copy .team-socials {
    margin-top: 16px;
}

.wedding-page .team-link {
    background: var(--wedding-polaroid-button-bg);
}

.wedding-page .team-link:hover,
.wedding-page .team-link:focus-visible {
    background: var(--wedding-polaroid-button-bg);
}

html[data-theme="dark"] .wedding-page .team-roles article {
    background-color: var(--polaroid-paper);
}

html[data-theme="dark"] .wedding-page .team-link {
    color: var(--wedding-polaroid-ink);
}

@media (max-width: 860px) {
    .wedding-page .wedding-team {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(22px, 6vw, 40px);
    }

    .wedding-page .team-role-polaroid {
        --polaroid-width: min(82%, 220px);
        order: 1;
    }

    .wedding-page .team-member-copy {
        order: 2;
        max-width: none;
    }

    .wedding-page .team-member-copy-robert {
        text-align: left;
    }
}

@media (max-width: 620px) {
    .wedding-page .wedding-team {
        grid-template-columns: 1fr;
    }

    .wedding-page .team-role-polaroid {
        --polaroid-width: min(72vw, 230px);
    }
}

.media-shot,
.wedding-shot {
    --wedding-shot-column: span 1;
    --wedding-shot-row: span 1;
    --wedding-shot-height: 280px;
    position: relative;
    grid-column: var(--wedding-shot-column);
    grid-row: var(--wedding-shot-row);
    min-height: var(--wedding-shot-height);
    overflow: hidden;
    margin: 0;
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--card-shadow);
}

.media-shot[hidden],
.wedding-shot[hidden] {
    display: none;
}

.media-gallery.has-scroll-reveal .media-shot,
.wedding-gallery.has-scroll-reveal .wedding-shot {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 1.3s cubic-bezier(0.16, 1, 0.3, 1), transform 1.46s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--gallery-reveal-delay, 0ms);
    will-change: opacity, transform;
}

.media-gallery.has-scroll-reveal .media-shot.is-visible,
.wedding-gallery.has-scroll-reveal .wedding-shot.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
}

.has-page-scroll-reveal .scroll-reveal-item {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition: opacity 1.36s cubic-bezier(0.16, 1, 0.3, 1), transform 1.54s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--scroll-reveal-delay, 0ms);
    will-change: opacity, transform;
}

.has-page-scroll-reveal .scroll-reveal-item.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
}

.media-shot--large,
.wedding-shot--large {
    --wedding-shot-column: span 2;
    --wedding-shot-row: span 2;
    --wedding-shot-height: 578px;
}

.media-shot--wide,
.wedding-shot--wide {
    --wedding-shot-column: span 2;
}

.pet-shot--feature {
    --wedding-shot-height: 360px;
}

.pet-shot--portrait {
    --wedding-shot-height: 420px;
}

.portrait-gallery .portrait-shot {
    --wedding-shot-height: 220px;
}

.portrait-gallery .portrait-shot--wide {
    --wedding-shot-column: span 2;
}

.media-shot--compact,
.wedding-shot--compact {
    --wedding-shot-height: 140px;
}

.media-shot--short,
.wedding-shot--short {
    --wedding-shot-height: 220px;
}

.media-shot--half,
.wedding-shot--half {
    --wedding-shot-height: 110px;
}

.media-shot--left,
.wedding-shot--left {
    --wedding-shot-column: 1 / span 2;
}

.media-shot img,
.media-shot video,
.wedding-shot img,
.wedding-shot video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.media-shot:hover img,
.media-shot:hover video,
.wedding-shot:hover img,
.wedding-shot:hover video {
    transform: scale(1.035);
}

.media-audio-toggle {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 46px;
    min-width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.76);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #111;
    box-shadow: 0 12px 30px rgba(13, 35, 75, 0.16);
    cursor: pointer;
    font: inherit;
    line-height: 1;
    backdrop-filter: blur(12px);
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.media-audio-toggle span {
    width: 20px;
    height: 20px;
    display: block;
    background: currentColor;
    -webkit-mask: var(--icon-audio-off) center / contain no-repeat;
    mask: var(--icon-audio-off) center / contain no-repeat;
}

.media-audio-toggle:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.9);
}

.media-audio-toggle.is-active {
    border-color: rgba(13, 35, 75, 0.2);
    background: rgba(255, 255, 255, 0.94);
    color: #111;
}

.media-audio-toggle.is-active span {
    -webkit-mask-image: var(--icon-audio-on);
    mask-image: var(--icon-audio-on);
}

.media-shot figcaption,
.wedding-shot figcaption {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    display: inline-flex;
    width: fit-content;
    max-width: calc(100% - 28px);
    min-height: 32px;
    align-items: center;
    border-radius: 999px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.58);
    color: var(--navy);
    font-size: var(--text-xs);
    font-weight: var(--weight-heavy);
    line-height: 1;
}

.pet-gallery .media-shot figcaption,
.pet-gallery .wedding-shot figcaption {
    display: none;
}

.portrait-gallery .media-shot figcaption,
.portrait-gallery .wedding-shot figcaption {
    display: none;
}

.wedding-tv-feature {
    position: relative;
    overflow: hidden;
    margin: clamp(26px, 4vw, 46px) auto 0;
    border-radius: clamp(18px, 2vw, 28px);
    box-shadow: 0 24px 70px rgba(20, 28, 45, 0.14);
}

.wedding-tv-feature img {
    width: 100%;
    height: auto;
    display: block;
}

.wedding-tv-video {
    position: absolute;
    left: 36.45%;
    top: 32.25%;
    width: 26.75%;
    height: 22.8%;
    display: block;
    box-sizing: border-box;
    border: 3px solid #050505;
    border-radius: 4px;
    object-fit: cover;
    background: #111;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.72), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.wedding-tv-audio-toggle {
    top: 56%;
    right: auto;
    left: 49.8%;
    width: 38px;
    min-width: 38px;
    height: 38px;
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.48);
    transform: translateX(-50%);
}

.wedding-tv-audio-toggle span {
    width: 18px;
    height: 18px;
}

.wedding-tv-audio-toggle:hover {
    background: rgba(255, 255, 255, 0.68);
    transform: translateX(-50%) translateY(-1px);
}

.wedding-tv-audio-toggle.is-active {
    background: rgba(255, 255, 255, 0.72);
}

html[data-theme="dark"] .wedding-tv-feature {
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
}

.pet-gallery-toolbar {
    display: flex;
    justify-content: flex-start;
    margin: 0 0 24px;
}

.pet-gallery-tabs button.is-active {
    background: #1d1d1f;
    color: var(--white);
    box-shadow: 0 10px 26px rgba(24, 43, 86, 0.16);
}

.pet-gallery .media-shot.is-filtered-out,
.pet-gallery .wedding-shot.is-filtered-out {
    display: none;
}

.gallery-reveal {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.gallery-reveal[hidden],
.gallery-reveal .button[hidden] {
    display: none !important;
}

@media (max-width: 940px) {

    .brand [data-brand-label] {
        display: none;
    }

    .hero-grid,
    .section-heading,
    .intro-grid,
    .brix-highlight,
    .social-highlight,
    .wedding-team,
    .contact-strip,
    .role-grid {
        grid-template-columns: 1fr;
    }

    .feature-grid,
    .project-grid,
    .card-grid,
    .story-card-grid,
    .wedding-story-grid,
    .media-gallery,
    .wedding-gallery,
    .participant-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .brix-page .features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .media-shot--large,
    .wedding-shot--large,
    .media-shot--wide,
    .wedding-shot--wide,
    .portrait-gallery .portrait-shot--wide {
        --wedding-shot-column: span 2;
    }

    .project-card.project-featured {
        grid-column: span 2;
        grid-template-columns: 1fr;
    }

    .project-featured .project-media {
        aspect-ratio: 16 / 9;
    }

    .contact-actions {
        justify-content: flex-start;
    }

    .skill-tab-list {
        grid-template-columns: repeat(5, minmax(104px, 1fr));
    }

    .skill-panel {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .wedding-options-table-card {
        overflow: visible;
        border-radius: 22px;
    }

    .wedding-options-table-wrap {
        width: 100%;
        max-width: calc(100vw - 28px);
        border-radius: 22px 22px 0 0;
        background: var(--white);
        box-shadow: inset -18px 0 22px -24px rgba(24, 43, 86, 0.45);
    }

    .wedding-options-table {
        width: 980px;
        min-width: 980px;
        table-layout: fixed;
    }

    .wedding-options-table thead th:first-child,
    .wedding-options-table tbody th {
        width: 170px;
    }

    .wedding-options-table thead th:not(:first-child),
    .wedding-options-table tbody td {
        width: 270px;
    }

    .wedding-options-table th,
    .wedding-options-table td {
        padding: 15px 16px;
    }

    .wedding-options-cta {
        grid-template-columns: 1fr;
        gap: 14px;
        border-radius: 0 0 22px 22px;
        padding: 18px;
    }

    .wedding-options-cta p {
        font-size: var(--text-sm);
        line-height: 1.55;
    }

    .wedding-options-cta .button {
        width: 100%;
        
        white-space: normal;
        text-align: center;
    }

    .wedding-planner {
        grid-template-columns: 1fr;
    }

    .planner-summary {
        position: static;
    }

    .profile-photo-card {
        min-height: 380px;
    }

    .engagement-card {
        flex-basis: min(420px, 72vw);
        min-width: 300px;
    }

    .steps {
        grid-template-columns: 1fr;
    }

    .wedding-page .steps,
    .pet-page .steps,
    .portrait-page .steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wedding-process-timeline {
        max-width: 720px;
    }

    .wedding-process-step {
        min-height: clamp(140px, 20vh, 210px);
        gap: 28px;
    }

    .timeline {
        grid-template-columns: repeat(7, 142px);
        gap: 18px 14px;
        overflow-x: auto;
        padding: 0 2px 4px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .timeline::-webkit-scrollbar {
        display: none;
    }

    .timeline::before {
        display: block;
        left: 34px;
        right: auto;
        width: calc((142px + 14px) * 6);
    }

    .timeline-item {
        scroll-snap-align: start;
    }

    .timeline-detail {
        position: sticky;
        left: 0;
        width: min(calc(100vw - 44px), 560px);
        display: block;
        grid-column: 1 / span 4;
    }

}

@media (max-width: 720px) {

    .desktop-break {
        display: none;
    }

    .nav-shell,
    .section-inner,
    .footer-inner,
    .container {
        width: min(100% - 28px, 1120px);
    }

    .nav-shell {
        gap: 10px;
    }

    .nav-links {
        flex: 1 1 auto;
        display: flex;
        gap: 0;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        padding-bottom: 0;
        scrollbar-width: none;
    }

    .nav-links::-webkit-scrollbar {
        display: none;
    }

    .nav-links a {
        flex: 0 0 auto;
        min-height: 38px;
        padding: 8px 5px;
        font-size: var(--text-xs);
    }

    .nav-cta {
        min-height: 38px;
        padding: 9px 12px;
        font-size: var(--text-xs);
    }

    .project-page .hero,
    .brix-page .hero {
        min-height: auto;
        padding: 68px 0 46px;
    }

    .hero-grid,
    .project-page .hero-grid,
    .brix-page .hero-grid {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 24px;
    }

    .project-page .hero-grid > div,
    .brix-page .hero-grid > div {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        min-width: 0;
    }

    .project-page .hero-panel,
    .project-page .fact-panel,
    .brix-page .hero-panel {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        min-width: 0;
    }

    .project-page h1,
    .brix-page .hero h1,
    .legal-hero h1,
    .wedding-page h1 {
        max-width: 100%;
        margin-bottom: 18px;
        font-size: var(--hero-title-size-mobile);
        line-height: 1.02;
        overflow-wrap: break-word;
    }

    .project-page .hero .tagline,
    .brix-page .hero .tagline {
        margin-top: 10px;
        font-size: var(--text-md);
    }

    .hero-lead,
    .project-page .hero-lead {
        margin-top: 18px;
        font-size: var(--text-md);
    }

    .hero-actions,
    .button-row {
        margin-top: 24px;
    }

    .hero-panel,
    .fact-panel,
    .intro-copy,
    .copy-card,
    .brix-highlight,
    .social-highlight,
    .team-copy,
    .contact-strip,
    .role-panel,
    .legal-card {
        padding: 24px;
    }

    .home-final-cta {
        padding: 0;
    }

    .home-final-cta .contact-media {
        --polaroid-width: min(520px, 92%);
        margin: 0 auto;
    }

    .home-final-cta .contact-actions {
        justify-content: flex-start;
    }

    .home-final-cta .contact-social-button {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
    }

    .profile-photo-card:not(.polaroid-format) {
        min-height: 340px;
    }

    .profile-photo-card:not(.polaroid-format) figcaption {
        right: 14px;
        bottom: 14px;
        left: 14px;
        padding: 14px 16px;
    }

    .home-page .profile-photo-card:not(.polaroid-format) figcaption {
        position: static;
        margin: 14px 4px 0;
        padding: 0;
    }

    .project-page .hero-panel,
    .project-page .fact-panel {
        padding: 20px;
    }

    .hero-panel img,
    .fact-panel img {
        width: 64px;
        height: 64px;
        margin-bottom: 18px;
    }

    .stat-row,
    .feature-grid,
    .project-grid,
    .card-grid,
    .story-card-grid,
    .wedding-story-grid,
    .media-gallery,
    .wedding-gallery,
    .participant-grid {
        grid-template-columns: 1fr;
    }

    .wedding-page .steps,
    .pet-page .steps,
    .portrait-page .steps {
        grid-template-columns: 1fr;
    }

    .wedding-planner-section,
    .wedding-planner {
        overflow-x: clip;
    }

    .planner-panel-grid {
        grid-template-columns: 1fr;
    }

    .planner-date-selects {
        grid-template-columns: 1fr;
    }

    .planner-name-row {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 8px;
    }

    .planner-name-row > span {
        min-width: 18px;
        min-height: 46px;
        justify-content: center;
        font-size: var(--text-md);
    }

    .planner-season-row {
        grid-template-columns: minmax(0, 1fr) minmax(96px, 0.72fr);
        gap: 10px;
    }

    .planner-step-overview {
        gap: 6px;
        min-width: 720px;
    }

    .planner-step-overview button {
        width: 30px;
        height: 30px;
    }

    .wedding-planner,
    .wedding-planner-form,
    .planner-summary,
    .planner-panel,
    .planner-choice-grid,
    .planner-chip-grid,
    .planner-choice,
    .planner-choice span,
    .planner-chip-grid label,
    .planner-chip-grid span {
        max-width: 100%;
        min-width: 0;
    }

    .wedding-planner-form,
    .planner-summary {
        padding: 14px;
    }

    .planner-summary {
        display: none;
    }

    .planner-panel,
    .planner-progress {
        padding: 14px;
    }

    .planner-progress {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .planner-progress::-webkit-scrollbar {
        display: none;
    }

    .planner-choice-grid,
    .planner-chip-grid {
        gap: 8px;
    }

    .planner-choice,
    .planner-chip-grid label {
        flex: 1 1 min(100%, 148px);
    }

    .planner-choice span,
    .planner-chip-grid span {
        width: 100%;
        justify-content: center;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: center;
        line-height: 1.18;
    }

    .planner-choice span em {
        flex-shrink: 0;
    }

    .planner-other-field input,
    .planner-panel-grid input,
    .planner-panel-grid select,
    .planner-panel-grid textarea,
    .planner-date-selects select {
        min-width: 0;
    }

    .planner-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .planner-actions .button {
        width: 100%;
        min-width: 0;

        white-space: normal;
        overflow-wrap: anywhere;
        
    }

    .planner-actions .planner-reset-button,
    .planner-actions [data-planner-submit] {
        grid-column: 1 / -1;
    }

    .planner-modal {
        align-items: end;
        padding: 12px;
    }

    .planner-modal-panel {
        max-height: 90vh;
        border-radius: 22px;
        padding: 24px 18px 20px;
    }

    .planner-modal-panel > .planner-actions .planner-summary-request {
        
        display: inline-flex;

        width: 100%;
        
        text-align: center;
        
        overflow-wrap: normal;
        word-break: normal;
        hyphens: auto;
    }

    .planner-modal-panel > .planner-actions {
        grid-template-columns: 1fr;
    }

    .planner-modal-close {
        top: 0;
        margin: -6px -2px 8px 12px;
    }

    .portrait-gallery .portrait-shot--wide {
        --wedding-shot-column: span 1;
    }

    .skills-showcase {
        gap: 24px;
    }

    .skill-tab-list {
        display: flex;
        margin-right: -14px;
        padding-right: 14px;
    }

    .skill-tab-list button {
        min-width: 96px;
        min-height: 92px;
        padding: 10px 10px 16px;
    }

    .skill-tab-list button i {
        width: 36px;
        height: 36px;
    }

    .skill-tab-list button i::before {
        width: 2.1rem;
        height: 2.1rem;
    }

    .skill-tab-list button span {
        font-size: var(--text-sm);
        max-width: 100%;
        overflow-wrap: anywhere;
        text-align: center;
    }

    .skill-panel {
        gap: 20px;
        padding: 22px;
        border-radius: 18px;
    }

    .skill-panel h3 {
        font-size: var(--panel-title-size-mobile);
        line-height: 1.12;
    }

    .skill-panel-list {
        border-radius: 14px;
    }

    .skill-panel-list div {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 13px 14px;
    }

    .skill-panel-list strong {
        font-size: var(--text-base);
    }

    @media (max-width: 560px) {
        .skill-tab-list button {
            min-width: 82px;
            min-height: 88px;
            padding: 9px 8px 15px;
        }

        .skill-tab-list button i {
            width: 32px;
            height: 32px;
        }

        .skill-tab-list button i::before {
            width: 1.85rem;
            height: 1.85rem;
        }

        .skill-tab-list button span {
            font-size: var(--text-xs);
            line-height: 1.08;
        }
    }

    .engagement-browser-top {
        align-items: stretch;
        flex-direction: column;
    }

    .filter-tabs,
    .engagement-tabs {
        width: 100%;
        max-width: 100%;
        padding: 6px;
    }

    .filter-tabs button,
    .engagement-tabs button {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 11px 16px;
        font-size: var(--text-sm);
    }

    .engagement-slider-controls {
        justify-content: flex-end;
    }

    .engagement-card {
        flex-basis: min(360px, 86vw);
        min-width: min(360px, 86vw);
    }

    .media-shot,
    .wedding-shot {
        --wedding-shot-column: span 1;
        --wedding-shot-row: span 1;
        --wedding-shot-height: 360px;
    }

    .media-shot--large,
    .wedding-shot--large,
    .media-shot--wide,
    .wedding-shot--wide,
    .media-shot--left,
    .wedding-shot--left {
        --wedding-shot-column: span 1;
        --wedding-shot-row: span 1;
    }

    .media-shot--short,
    .wedding-shot--short {
        --wedding-shot-height: 260px;
    }

    .media-shot--half,
    .wedding-shot--half {
        --wedding-shot-height: 180px;
    }

    .timeline {
        grid-template-columns: repeat(7, 128px);
        gap: 16px 12px;
    }

    .timeline::before {
        width: calc((128px + 12px) * 6);
    }

    .timeline-marker {
        width: 50px;
        height: 50px;
        box-shadow: 0 0 0 6px var(--grey);
    }

    .timeline-item:hover .timeline-marker,
    .timeline-item:focus-visible .timeline-marker,
    .timeline-item.is-active .timeline-marker {
        box-shadow: 0 0 0 6px var(--grey), 0 10px 22px rgba(24, 43, 86, 0.15);
    }

    .timeline-date {
        font-size: var(--text-xs);
    }

    .timeline-content h3 {
        font-size: var(--text-sm);
    }

    .timeline-detail {
        min-height: auto;
        padding: 20px;
        width: calc(100vw - 28px);
        grid-column: 1 / span 3;
    }

    .wedding-process-timeline {
        margin-top: 34px;
    }

    .wedding-process-timeline::before,
    .wedding-process-timeline::after {
        left: 22px;
    }

    .wedding-process-step {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 18px;
        min-height: auto;
        padding: 8px 0 38px;
    }

    .wedding-process-marker {
        margin-left: 12px;
    }

    .wedding-process-content h3 {
        font-size: var(--type-card);
    }

    .section-band,
    .brix-page .features,
    .brix-page .explanation,
    .brix-page .how-it-works,
    .brix-page .stl-viewer,
    .brix-page .detailed-insights,
    .brix-page .downloads,
    .brix-page .call-to-action {
        padding: 62px 0;
    }

    .feature-card,
    .info-card {
        min-height: auto;
    }

    .brix-page .features-grid {
        grid-template-columns: 1fr;
    }

    .project-card.project-featured {
        grid-column: span 1;
    }

    .hero-actions,
    .button-row,
    .contact-actions {
        width: 100%;
        flex-direction: column;
    }
.button {
        width: 100%;
    }

    .home-final-cta .contact-actions {
        flex-direction: row;
    }

    .home-final-cta .contact-actions .button:not(.contact-social-button) {
        flex: 1 1 100%;
    }

    .home-final-cta .contact-actions .contact-social-button {
        width: auto;
        flex: 1 1 calc(50% - 6px);
        padding-right: 12px;
        padding-left: 12px;
    }

    .footer-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* Wedding hero: editorial split with polaroids */

.wedding-polaroid {
    --polaroid-rest-transform: rotate(0deg);
    --polaroid-enter-transform: translate3d(-8px, 34px, 0) rotate(-7deg) scale(0.94);
    --polaroid-width: clamp(112px, min(11vw, 15vh), 150px);
    margin: 0;
    box-shadow: var(--polaroid-shadow-small);
    opacity: 0;
    transform: var(--polaroid-enter-transform);
    transform-origin: 50% 85%;
    animation: wedding-polaroid-in 1.05s cubic-bezier(0.18, 0.92, 0.2, 1) forwards;
    will-change: opacity, transform;
}

.wedding-polaroid img {
    width: 100%;
    height: auto;
    aspect-ratio: var(--polaroid-image-ratio);
    display: block;
    object-fit: cover;
}

.wedding-polaroid-one {
    --polaroid-rest-transform: rotate(1.5deg) translateX(8px);
    --polaroid-enter-transform: translate3d(-18px, 34px, 0) rotate(-8deg) scale(0.94);
    animation-delay: 180ms;
}

.wedding-polaroid-two {
    justify-self: center;
    --polaroid-rest-transform: rotate(-7deg) translateX(-10px);
    --polaroid-enter-transform: translate3d(8px, 42px, 0) rotate(5deg) scale(0.93);
    animation-delay: 300ms;
}

.wedding-polaroid-three {
    --polaroid-rest-transform: rotate(3deg) translateX(14px);
    --polaroid-enter-transform: translate3d(-12px, 38px, 0) rotate(-5deg) scale(0.94);
    animation-delay: 420ms;
}

@keyframes wedding-polaroid-in {
    0% {
        opacity: 0;
        filter: blur(6px);
        transform: var(--polaroid-enter-transform);
    }

    58% {
        opacity: 1;
        filter: blur(0);
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform: var(--polaroid-rest-transform);
        will-change: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wedding-polaroid,
    .wedding-page .has-page-scroll-reveal .wedding-final-cta .contact-media.scroll-reveal-item {
        opacity: 1;
        filter: none;
        animation: none;
        transition: none;
        transform: var(--polaroid-rest-transform);
    }
}

html[data-theme="dark"] .wedding-polaroid {
    background-color: var(--polaroid-paper);
}

.wedding-keepsake {
    display: grid;
    grid-template-columns: minmax(260px, 0.82fr) minmax(420px, 1.18fr);
    gap: clamp(36px, 7vw, 96px);
    align-items: center;
}

.wedding-keepsake-copy {
    max-width: 540px;
}

.wedding-keepsake-copy h2 {
    margin: 0;
    color: var(--navy);
    font-size: var(--type-section);
    line-height: 0.98;
    text-wrap: balance;
}

.wedding-keepsake-copy > p:not(.section-kicker) {
    margin: 22px 0 0;
    color: var(--muted);
    font-size: var(--type-body);
    line-height: 1.72;
}

.wedding-keepsake-media {
    position: relative;
    min-height: clamp(520px, 70svh, 720px);
}

.wedding-keepsake-media .wedding-keepsake-card {
    --keepsake-card-width: clamp(118px, 14vw, 186px);
    --polaroid-width: var(--keepsake-card-width);
    --keepsake-rest-transform: translate3d(0, 0, 0) rotate(0deg);
    --keepsake-enter-transform: translate3d(0, -42vh, 0) rotate(-8deg) scale(0.88);
    position: absolute;
    margin: 0;
    overflow: visible;
    box-shadow: var(--polaroid-shadow-small);
    transform: var(--keepsake-rest-transform);
    transform-origin: 50% 85%;
}

.wedding-keepsake-media .wedding-keepsake-card img {
    width: 100%;
    height: auto;
    aspect-ratio: var(--polaroid-image-ratio);
    display: block;
    object-fit: cover;
}

.wedding-keepsake-card-one {
    --keepsake-card-width: clamp(136px, 16vw, 214px);
    --keepsake-rest-transform: rotate(-10deg);
    --keepsake-enter-transform: translate3d(-22vw, -54vh, 0) rotate(-12deg) scale(0.82);
    top: 6%;
    left: 10%;
    z-index: 4;
}

.wedding-keepsake-card-two {
    --keepsake-card-width: clamp(150px, 18vw, 246px);
    --keepsake-rest-transform: rotate(7deg);
    --keepsake-enter-transform: translate3d(4vw, -48vh, 0) rotate(10deg) scale(0.84);
    top: 20%;
    left: 36%;
    z-index: 5;
}

.wedding-keepsake-card-three {
    --keepsake-card-width: clamp(124px, 15vw, 198px);
    --keepsake-rest-transform: rotate(13deg);
    --keepsake-enter-transform: translate3d(20vw, -52vh, 0) rotate(14deg) scale(0.84);
    top: 2%;
    right: 3%;
    z-index: 3;
}

.wedding-keepsake-card-four {
    --keepsake-card-width: clamp(138px, 17vw, 232px);
    --keepsake-rest-transform: rotate(-14deg);
    --keepsake-enter-transform: translate3d(-14vw, -28vh, 0) rotate(-16deg) scale(0.86);
    bottom: 12%;
    left: 4%;
    z-index: 2;
}

.wedding-keepsake-card-five {
    --keepsake-card-width: clamp(122px, 14vw, 188px);
    --keepsake-rest-transform: rotate(4deg);
    --keepsake-enter-transform: translate3d(2vw, -42vh, 0) rotate(-4deg) scale(0.88);
    bottom: 2%;
    left: 40%;
    z-index: 6;
}

.wedding-keepsake-card-six {
    --keepsake-card-width: clamp(128px, 15vw, 204px);
    --keepsake-rest-transform: rotate(-8deg);
    --keepsake-enter-transform: translate3d(18vw, -32vh, 0) rotate(8deg) scale(0.86);
    bottom: 14%;
    right: 8%;
    z-index: 1;
}

.wedding-page .has-page-scroll-reveal .wedding-keepsake-card.scroll-reveal-item {
    opacity: 0;
    transform: var(--keepsake-enter-transform);
    transition: opacity 1.28s cubic-bezier(0.16, 1, 0.3, 1), transform 1.66s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 1.66s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--scroll-reveal-delay, 0ms);
    will-change: opacity, transform;
}

.wedding-page .has-page-scroll-reveal .wedding-keepsake-card.scroll-reveal-item.is-visible {
    opacity: 1;
    transform: var(--keepsake-rest-transform);
    will-change: auto;
}

.wedding-polaroid.is-flow-hidden,
.wedding-keepsake-card.is-flow-hidden {
    opacity: var(--flow-source-opacity, 0) !important;
}

.wedding-keepsake-card.is-flow-measuring {
    opacity: 1 !important;
    visibility: visible !important;
    transform: var(--keepsake-rest-transform) !important;
    transition: none !important;
}

html[data-theme="dark"] .wedding-keepsake-copy h2 {
    color: var(--text);
}

html[data-theme="dark"] .wedding-keepsake-copy > p:not(.section-kicker) {
    color: var(--muted);
}

html[data-theme="dark"] .wedding-keepsake-media .wedding-keepsake-card {
    background-color: var(--polaroid-paper);
}

@media (max-width: 1040px) {

    .wedding-keepsake {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .wedding-keepsake-copy {
        max-width: 720px;
    }

    .wedding-keepsake-media {
        width: min(100%, 820px);
        max-width: 820px;
        margin: 0 auto;
    }

}

@media (max-width: 760px) {

    .wedding-polaroid.is-flow-hidden,
    .wedding-keepsake-card.is-flow-hidden {
        opacity: 1 !important;
    }

    .wedding-polaroid {
        --polaroid-width: clamp(92px, 29vw, 122px);
        width: var(--polaroid-width);
        flex: 0 0 var(--polaroid-width);
        max-width: none;
        opacity: 1;
        animation: none;
        transform: var(--polaroid-rest-transform);
        will-change: auto;
    }

    .wedding-polaroid-one {
        --polaroid-rest-transform: rotate(-3deg) translateY(6px);
        --polaroid-enter-transform: translate3d(-8px, 28px, 0) rotate(5deg) scale(0.94);
    }

    .wedding-polaroid-two {
        --polaroid-rest-transform: rotate(2deg) translateY(-6px);
        --polaroid-enter-transform: translate3d(0, 30px, 0) rotate(-5deg) scale(0.94);
    }

    .wedding-polaroid-three {
        --polaroid-rest-transform: rotate(-2deg) translateY(8px);
        --polaroid-enter-transform: translate3d(8px, 28px, 0) rotate(4deg) scale(0.94);
    }

    .wedding-page .wedding-keepsake-section {
        min-height: 0;
        padding-top: 58px;
        padding-bottom: 58px;
    }

    .wedding-keepsake {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .wedding-keepsake-copy h2 {
        font-size: var(--type-section);
    }

    .wedding-keepsake-media {
        min-height: auto;
        display: flex;
        gap: 12px;
        align-items: flex-start;
        overflow-x: auto;
        overflow-y: visible;
        padding: 8px 4px 22px;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .wedding-keepsake-media .wedding-keepsake-card {
        --polaroid-width: clamp(126px, 38vw, 160px);
        flex: 0 0 var(--polaroid-width);
        position: relative;
        inset: auto;
        width: var(--polaroid-width);
        min-height: 0;
        transform: var(--keepsake-rest-transform);
        scroll-snap-align: center;
    }

    .wedding-keepsake-card-one,
    .wedding-keepsake-card-four {
        grid-row: auto;
    }

    .wedding-page .has-page-scroll-reveal .wedding-keepsake-card.scroll-reveal-item {
        transform: translate3d(0, 34px, 0) rotate(-3deg) scale(0.96);
    }

    .wedding-page .has-page-scroll-reveal .wedding-keepsake-card.scroll-reveal-item.is-visible {
        transform: var(--keepsake-rest-transform);
    }

    .wedding-keepsake-media .wedding-keepsake-card img {
        height: auto;
        aspect-ratio: var(--polaroid-image-ratio);
    }
}

@media (max-width: 520px) {

    .wedding-polaroid {
        --polaroid-width: clamp(92px, 29vw, 122px);
        flex-basis: var(--polaroid-width);
        max-width: none;
    }

}

.wedding-page {
    --wedding-heading: var(--navy);
    --wedding-copy: var(--muted);
    --wedding-overline: #7b8494;
    --wedding-kicker: var(--navy);
    --wedding-kicker-icon: var(--navy);
    --wedding-polaroid-ink: #182B56;
    --wedding-polaroid-muted: #5f6d83;
    --wedding-polaroid-button-bg: #ffffff;
}

html[data-theme="dark"] .wedding-page {
    --wedding-heading: #f4f8ff;
    --wedding-copy: #cbd8ec;
    --wedding-overline: rgba(233, 239, 251, 0.58);
    --wedding-kicker: #d7e6ff;
    --wedding-kicker-icon: #ffffff;
}

.wedding-page .section-band,
.wedding-page .section-band.alt {
    min-height: calc(100svh - 76px);
    display: grid;
    align-items: center;
    background: var(--white);
}

.wedding-page .section-kicker {
    color: var(--wedding-kicker);
}

.wedding-page .section-kicker i,
.wedding-page .section-kicker .ui-icon,
.wedding-page .section-band.alt .section-kicker i,
.wedding-page .section-band.alt .section-kicker .ui-icon {
    background: var(--grey);
    color: var(--wedding-kicker-icon);
}

html[data-theme="dark"] .wedding-page .section-kicker {
    color: var(--wedding-kicker);
}

html[data-theme="dark"] .wedding-page .section-kicker i,
html[data-theme="dark"] .wedding-page .section-kicker .ui-icon,
html[data-theme="dark"] .wedding-page .section-band.alt .section-kicker i,
html[data-theme="dark"] .wedding-page .section-band.alt .section-kicker .ui-icon {
    background: var(--dark-panel);
    color: var(--wedding-kicker-icon);
}

.wedding-testimonial-band {
    padding-top: clamp(54px, 8vw, 96px);
    padding-bottom: clamp(54px, 8vw, 96px);
}

.wedding-testimonial {
    --reviewer-step: clamp(78px, 11vw, 114px);
    position: relative;
    max-width: 980px;
    margin: 0 auto;
}

.wedding-testimonial-heading {
    max-width: 720px;
    margin-bottom: clamp(34px, 6vw, 66px);
}

.wedding-testimonial-heading h2 {
    margin: 0;
    font-size: var(--type-section);
    line-height: 1.05;
    text-wrap: balance;
}

.wedding-reviewer-stage {
    width: 100%;
    overflow: visible;
    margin: 0 0 clamp(8px, 1.4vw, 16px);
    padding: 12px 0 14px;
    touch-action: pan-y;
    user-select: none;
}

.wedding-reviewer-track {
    position: relative;
    width: min(100%, 520px);
    height: clamp(156px, 22vw, 210px);
    margin: 0 auto;
}

.wedding-reviewer-track button {
    --reviewer-size: clamp(64px, 9vw, 88px);
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--reviewer-size);
    display: grid;
    justify-items: center;
    grid-template-rows: max-content auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) scale(0.72);
    transition: opacity 0.34s ease, transform 0.54s cubic-bezier(0.16, 1, 0.3, 1), color 0.24s ease;
}

.wedding-reviewer-track button[data-reviewer-position="prev"] {
    opacity: 0.48;
    pointer-events: auto;
    transform: translateX(calc(-50% - clamp(104px, 18vw, 150px))) translateY(clamp(16px, 2.4vw, 22px)) scale(0.78);
}

.wedding-reviewer-track button[data-reviewer-position="next"] {
    opacity: 0.48;
    pointer-events: auto;
    transform: translateX(calc(-50% + clamp(104px, 18vw, 150px))) translateY(clamp(16px, 2.4vw, 22px)) scale(0.78);
}

.wedding-reviewer-track button[aria-current="true"] {
    --reviewer-size: clamp(96px, 14vw, 132px);
    color: var(--text);
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) scale(1);
}

.wedding-reviewer-track button:hover,
.wedding-reviewer-track button:focus-visible {
    color: var(--text);
    opacity: 1;
}

.wedding-reviewer-track img {
    width: var(--reviewer-size);
    height: var(--reviewer-size);
    display: block;
    object-fit: cover;
    object-position: center;
    border: 3px solid var(--white);
    border-radius: 50%;
    background: var(--grey);
    box-shadow: 0 10px 26px rgba(20, 28, 45, 0.1);
}

.wedding-reviewer-track button[aria-current="true"] img {
    border-color: var(--polaroid-paper);
    box-shadow: 0 16px 42px rgba(20, 28, 45, 0.14);
}

.wedding-reviewer-track span {
    display: block;
    margin-top: 12px;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-align: center;
}

.wedding-testimonial-viewport {
    display: grid;
    align-items: start;
    max-width: 840px;
    margin: 0 auto;
    touch-action: pan-y;
    user-select: none;
}

.wedding-testimonial-slide {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    pointer-events: none;
    transition: opacity 0.64s cubic-bezier(0.16, 1, 0.3, 1), transform 0.74s cubic-bezier(0.16, 1, 0.3, 1);
}

.wedding-testimonial-slide.is-active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
}

.wedding-testimonial blockquote {
    margin: 0;
}

.wedding-testimonial blockquote p {
    margin: 0;
    color: var(--text);
    font-size: var(--type-body);
    font-weight: var(--weight-medium);
    line-height: 1.38;
    text-align: center;
    text-wrap: balance;
}

html[data-theme="dark"] .wedding-testimonial blockquote p {
    color: var(--text);
}

html[data-theme="dark"] .wedding-reviewer-track img {
    border-color: var(--dark-page);
    background: var(--dark-panel);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .wedding-reviewer-track button[aria-current="true"] img {
    border-color: var(--dark-accent);
}

.wedding-story-continues {
    min-height: 0;
    padding-top: clamp(52px, 8vw, 98px);
    padding-bottom: clamp(52px, 8vw, 98px);
}

.wedding-story-cards {
    margin-top: clamp(26px, 4vw, 44px);
}

.wedding-story-cards-plain h3 {
    margin-top: 0;
}

@media (max-width: 760px) {
    .wedding-story-cards {
        grid-template-columns: 1fr;
    }
}

.wedding-page .contact-media {
    --polaroid-width: min(100%, 390px);
    --polaroid-rest-transform: rotate(-3deg);
    --polaroid-scroll-enter-transform: translate3d(-10px, 34px, 0) rotate(-8deg) scale(0.96);
    border: 0;
    border-radius: var(--polaroid-radius);
    background-color: var(--polaroid-paper);
    background-image: url("../images/design/instax-texture.jpg");
    background-size: cover;
    background-position: center;
    box-shadow: var(--polaroid-shadow);
    transform: var(--polaroid-rest-transform);
}

.wedding-page .contact-media img {
    aspect-ratio: var(--polaroid-image-ratio);
    border-radius: var(--polaroid-image-radius);
}

.wedding-page .wedding-final-cta {
    grid-template-columns: minmax(260px, 0.46fr) minmax(0, 0.54fr);
    gap: clamp(36px, 7vw, 92px);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.wedding-page .wedding-final-cta .contact-media {
    --polaroid-width: min(100%, 390px);
    --polaroid-rest-transform: rotate(-4deg);
    --polaroid-scroll-enter-transform: translate3d(-14px, 40px, 0) rotate(-9deg) scale(0.96);
    transform: var(--polaroid-rest-transform);
}

.wedding-page .wedding-final-cta .contact-media:not(.polaroid-format) figcaption {
    margin: clamp(14px, 1.6vw, 22px) 4px 0;
    color: var(--wedding-polaroid-muted);
    font-family: var(--font-main);
    font-size: var(--text-sm);
    font-weight: 400;
    line-height: 1.35;
    text-align: center;
}

.wedding-page .wedding-final-cta .contact-actions {
    justify-content: flex-start;
    margin-top: 28px;
}

.wedding-page .has-page-scroll-reveal .wedding-final-cta .contact-media.scroll-reveal-item {
    opacity: 0;
    transform: var(--polaroid-scroll-enter-transform);
    transition: opacity 1.34s cubic-bezier(0.16, 1, 0.3, 1), transform 1.56s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 1.56s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--scroll-reveal-delay, 0ms);
    will-change: opacity, transform;
}

.wedding-page .has-page-scroll-reveal .wedding-final-cta .contact-media.scroll-reveal-item.is-visible {
    opacity: 1;
    transform: var(--polaroid-rest-transform);
    will-change: auto;
}

html[data-theme="dark"] .wedding-page .wedding-final-cta {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

@media (max-width: 940px) {
    .wedding-testimonial-heading {
        margin-right: auto;
        margin-left: auto;
        text-align: left;
    }

    .wedding-testimonial blockquote p {
        font-size: var(--type-body);
    }

    .wedding-page .wedding-final-cta {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .wedding-page .wedding-final-cta .contact-media {
        --polaroid-width: min(520px, 92%);
        margin: 0 auto;
    }

    .wedding-page .wedding-final-cta .contact-media:not(.polaroid-format) figcaption {
        max-width: 92%;
        margin-right: auto;
        margin-left: auto;
        font-size: var(--text-sm);
        line-height: 1.4;
    }
}

html[data-theme="dark"] .wedding-page .section-band,
html[data-theme="dark"] .wedding-page .section-band.alt {
    background: var(--dark-page);
}

html[data-theme="dark"] .wedding-page .contact-media {
    background-color: var(--polaroid-paper);
}

/* Startseite: Polaroid-Zoom-Hero.
   Die Scrollphasen werden in initHomePolaroidZoomHero() in script.js gesteuert. */
.hero-polaroid-zoom {
    --pz-intro-opacity: 1;
    --pz-intro-y: 0px;
    --pz-card-scale: 1;
    --pz-card-rotate: -2deg;
    --pz-card-y: 0px;
    --pz-frame-opacity: 1;
    --pz-shadow-alpha: 0.24;
    --pz-frame-padding-x: clamp(12px, 1.2vw, 18px);
    --pz-frame-padding-top: clamp(12px, 1.2vw, 18px);
    --pz-frame-padding-bottom: clamp(44px, 4vw, 68px);
    --pz-caption-opacity: 1;
    --pz-image-radius: 4px;
    --pz-overlay-opacity: 0;
    --pz-white-wash-opacity: 0;
    --pz-bg-opacity: 0;
    --pz-bg-scale: 1.04;
    --pz-bg-blur: 0px;
    --pz-photo-blur: 0px;
    position: relative;
    min-height: 300vh;
    min-height: 320svh;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: #fbfbfd;
    color: #1d1d1f;
}

.hero-polaroid-sticky {
    position: sticky;
    top: 0;
    box-sizing: border-box;
    height: 100vh;
    height: 100svh;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding-top: 76px;
    background:
        linear-gradient(180deg, rgba(251, 251, 253, 0.98), rgba(245, 245, 247, 0.96)),
        #fbfbfd;
}

.hero-polaroid-zoom.is-polaroid-active .hero-polaroid-sticky {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1;
}

.hero-polaroid-zoom.is-polaroid-after .hero-polaroid-sticky {
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
}

.hero-polaroid-inner {
    position: relative;
    width: 100%;
    height: calc(100vh - 76px);
    height: calc(100svh - 76px);
    display: grid;
    place-items: center;
}

.hero-intro-text {
    position: absolute;
    right: 0;
    left: 0;
    text-align: center;
}

.hero-intro-text {
    z-index: 1;
    top: clamp(8px, 3.2vh, 38px);
    right: clamp(18px, 5vw, 72px);
    left: clamp(18px, 5vw, 72px);
    opacity: var(--pz-intro-opacity);
    transform: translate3d(0, var(--pz-intro-y), 0);
    pointer-events: none;
}

.hero-intro-text h1 {
    min-height: 1em;
}

.hero-intro-text h1 {
    margin: 0;
    color: var(--navy);
    font-size: var(--type-display);
    font-weight: var(--weight-heavy);
    line-height: 0.95;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.hero-typewriter-target.is-typewriting::after {
    content: "";
    width: 3px;
    height: 0.78em;
    display: inline-block;
    margin-left: 0.08em;
    border-radius: 999px;
    background: currentColor;
    animation: heroTypeCursorBlink 0.72s steps(1, end) infinite;
    vertical-align: -0.04em;
}

.polaroid-stage {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    z-index: 3;
    display: grid;
    place-items: center;
    pointer-events: none;
    transform: translateX(-50%);
}

.polaroid-stage::before {
    content: "";
    position: absolute;
    inset: -10%;
    z-index: 0;
    background: url("../images/originale/hero-immersive.jpg") center / cover no-repeat;
    filter: blur(var(--pz-bg-blur));
    opacity: var(--pz-bg-opacity);
    transform: scale(var(--pz-bg-scale));
    transform-origin: 50% 50%;
    will-change: transform, opacity, filter;
    pointer-events: none;
}

.polaroid-stage::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 4;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, var(--pz-white-wash-opacity))),
        rgba(255, 255, 255, 0.08);
    opacity: var(--pz-overlay-opacity);
    pointer-events: none;
}

.polaroid-card {
    position: relative;
    --polaroid-width: min(clamp(250px, 30vw, 440px), 34svh);
    width: var(--polaroid-width);
    margin: 0;
    padding: var(--pz-frame-padding-top) var(--pz-frame-padding-x) var(--pz-frame-padding-bottom);
    border-radius: var(--polaroid-radius);
    background-color: rgba(var(--polaroid-paper-rgb), var(--pz-frame-opacity));
    background-image: url("../images/design/instax-texture.jpg");
    background-size: cover;
    background-position: center;
    box-shadow:
        0 28px 80px rgba(20, 28, 45, var(--pz-shadow-alpha)),
        0 2px 10px rgba(20, 28, 45, var(--pz-shadow-alpha));
    transform: translate3d(0, var(--pz-card-y), 0) rotate(var(--pz-card-rotate)) scale(var(--pz-card-scale));
    transform-origin: 50% 50%;
    will-change: transform, padding, background;
    z-index: 2;
    animation: home-polaroid-in 1.1s 0.12s cubic-bezier(0.18, 0.92, 0.2, 1) both;
}

.polaroid-image-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--polaroid-image-ratio);
    border-radius: var(--pz-image-radius);
    background: #e5e5e7;
}

.polaroid-image-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    filter: blur(var(--pz-photo-blur));
    transform: scale(1.01);
    will-change: filter, transform;
}

.polaroid-card figcaption {
    position: absolute;
    right: 12px;
    bottom: 0;
    left: 12px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--pz-frame-padding-bottom);
    padding: 0.12em 2px 0;
    transform: none;
    color: rgba(24, 43, 86, 0.72);
    font-family: var(--font-display);
    font-size: var(--type-card);
    font-weight: 400;
    line-height: 0.9;
    text-align: center;
    opacity: var(--pz-caption-opacity);
}

@keyframes heroTypeCursorBlink {
    0%, 46% { opacity: 1; }
    47%, 100% { opacity: 0; }
}

@keyframes home-polaroid-in {
    0% {
        opacity: 0;
        transform: translate3d(0, 34px, 0) rotate(-5deg) scale(0.94);
        filter: blur(8px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, var(--pz-card-y), 0) rotate(var(--pz-card-rotate)) scale(var(--pz-card-scale));
        filter: blur(0);
    }
}

html[data-theme="dark"] .hero-polaroid-zoom,
html[data-theme="dark"] .hero-polaroid-sticky {
    background:
        linear-gradient(180deg, rgba(8, 17, 31, 0.98), rgba(12, 24, 42, 0.96)),
        var(--dark-page);
}

html[data-theme="dark"] .hero-intro-text h1 {
    color: var(--text);
}

@media (max-width: 940px) {
    .hero-polaroid-zoom {
        min-height: 280vh;
        min-height: 300svh;
    }

    .polaroid-card {
        width: min(clamp(240px, 48vw, 380px), 34svh);
    }
}

@media (max-width: 720px) {
    .hero-polaroid-zoom {
        min-height: 220vh;
        min-height: 240svh;
    }

    .hero-polaroid-inner {
        width: 100%;
    }

    .hero-intro-text {
        top: clamp(10px, 4vh, 40px);
    }

    .hero-intro-text h1 {
        font-size: var(--type-display);
    }

    .polaroid-card {
        width: min(clamp(230px, 72vw, 340px), 34svh);
    }

}

@media (prefers-reduced-motion: reduce) {
    .hero-polaroid-zoom {
        min-height: calc(100vh - 76px);
        min-height: calc(100svh - 76px);
    }

    .hero-polaroid-sticky {
        position: relative;
    }

    .hero-intro-text {
        opacity: 1;
        transform: none;
    }

    .polaroid-card {
        padding:
            calc(var(--polaroid-width) * var(--polaroid-frame-top-ratio))
            calc(var(--polaroid-width) * var(--polaroid-frame-x-ratio))
            calc(var(--polaroid-width) * var(--polaroid-frame-bottom-ratio));
        background-color: var(--polaroid-paper);
        background-image: url("../images/design/instax-texture.jpg");
        background-size: cover;
        background-position: center;
        transform: none;
        animation: none;
    }

    .hero-intro-text h1 {
        animation: none;
    }

    .polaroid-stage::before,
    .polaroid-stage::after {
        opacity: 0;
    }
}

/* Shared home-page rhythm and color language. */
.home-story-section {
    --story-accent: #7188ae;
    --story-accent-soft: #eef1f5;
    position: relative;
    isolation: isolate;
}

.home-story-section > .section-inner {
    position: relative;
}

.section-heading-story {
    align-items: start;
}

.section-heading-story h2 {
    max-width: 15ch;
    text-wrap: balance;
}

.section-heading-story > p {
    max-width: 640px;
    padding-top: 44px;
}

.home-story-section .section-kicker i,
.home-story-section .section-kicker .ui-icon {
    background: #e8ebef;
    color: var(--navy);
}

.home-story-section:not(.home-story-contact)::after {
    content: none;
}

/* Profile: the photograph and copy meet like an editorial portrait. */
.profile-story-layout {
    grid-template-columns: minmax(270px, 0.62fr) minmax(0, 1fr);
    gap: clamp(52px, 8vw, 112px);
    align-items: center;
}

.profile-story-layout .intro-copy {
    max-width: 680px;
    padding-top: 0;
}

.profile-story-layout .intro-copy::before {
    content: none;
}

.profile-story-layout .profile-facts {
    gap: 8px;
    margin-top: 30px;
}

.profile-story-layout .profile-facts span {
    min-height: 32px;
    border: 1px solid var(--grey-strong);
    border-radius: 999px;
    padding: 7px 12px;
    background: var(--grey);
    color: var(--navy);
    font-weight: var(--weight-bold);
}

/* Engagement: a calm viewing rail instead of another framed page section. */
.engagement-story-browser {
    padding-top: 0;
    border-top: 0;
}

.engagement-story-browser::before {
    content: none;
}

.home-story-engagement .engagement-card {
    border-color: color-mix(in srgb, var(--story-accent) 20%, var(--grey-strong));
    box-shadow: 0 14px 36px rgba(24, 43, 86, 0.07);
}

.home-story-engagement .engagement-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 46px rgba(24, 43, 86, 0.12);
}

.home-story-engagement .engagement-card-media img {
    transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-story-engagement .engagement-card:hover .engagement-card-media img {
    transform: scale(1.035);
}

/* Skills: tabs stay functional, while the content reads as one open canvas. */
.home-story-skills .skill-tab-list {
    border-bottom: 0;
}

.home-story-skills .skill-tab-list button.is-active::after {
    height: 3px;
    background: var(--story-accent);
}

.home-story-skills .skill-panel {
    min-height: 330px;
    gap: clamp(34px, 6vw, 76px);
    overflow: visible;
    border-top: 0;
    border-radius: 0;
    padding: clamp(36px, 5vw, 58px) 0 0;
    background: transparent;
}

.home-story-skills,
.home-story-portfolio {
    border-top: 0;
    box-shadow: none;
}

.home-story-skills .skill-panel-list {
    border: 1px solid color-mix(in srgb, var(--story-accent) 22%, var(--grey-strong));
    border-radius: 8px;
    background: var(--story-accent-soft);
    backdrop-filter: none;
}

.home-story-skills .skill-panel-list div {
    border-color: color-mix(in srgb, var(--story-accent) 24%, transparent);
}

.home-story-skills .skill-panel.is-entering {
    animation: skillPanelEnter 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes skillPanelEnter {
    from {
        opacity: 0.25;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Portfolio: featured work alternates like an editorial project journal. */
.portfolio-story-grid {
    gap: clamp(18px, 2vw, 26px);
}

.portfolio-story-grid .project-card {
    position: relative;
    border-color: color-mix(in srgb, var(--story-accent) 16%, var(--grey-strong));
    box-shadow: 0 13px 34px rgba(24, 43, 86, 0.07);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}

.portfolio-story-grid .project-card::before {
    content: none;
}

.portfolio-story-grid .project-card:hover::before,
.portfolio-story-grid .project-card:focus-within::before {
    opacity: 1;
    transform: scaleX(1);
}

.portfolio-story-grid .project-card:hover,
.portfolio-story-grid .project-card:focus-within,
.project-grid.has-scroll-reveal.portfolio-story-grid .project-card.is-visible:hover,
.project-grid.has-scroll-reveal.portfolio-story-grid .project-card.is-visible:focus-within {
    transform: translateY(-5px);
    box-shadow: 0 22px 52px rgba(24, 43, 86, 0.12);
}

.portfolio-story-grid .project-card.project-featured:nth-child(even) .project-media {
    order: 2;
}

.portfolio-story-grid .project-media img {
    transition-duration: 0.75s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-story-grid .project-wedding-highlight {
    grid-column: 1 / -1;
}

@media (min-width: 761px) {
    .portfolio-story-grid .project-wedding-highlight {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    }

    .portfolio-story-grid .project-wedding-highlight .project-media {
        aspect-ratio: 16 / 10;
    }

    .portfolio-story-grid .project-wedding-highlight .project-body {
        align-self: center;
        padding: 32px;
    }

    .portfolio-story-grid .project-wedding-highlight h3 {
        font-size: var(--type-card);
        line-height: 1.2;
    }
}

/* Contact: a warm final chapter instead of a detached callout card. */
.home-story-contact .home-final-cta > div {
    max-width: 650px;
}

.home-story-contact .home-final-cta h2 {
    max-width: 12ch;
    text-wrap: balance;
}

.home-story-contact .home-final-cta .section-kicker {
    margin-bottom: 18px;
}

.home-story-contact .contact-actions {
    justify-content: flex-start;
    margin-top: 28px;
}

/* Generic reveals must preserve the intentional Polaroid rotation. */
.home-page .has-page-scroll-reveal .profile-photo-card.scroll-reveal-item {
    transform: translate3d(0, 28px, 0) rotate(-5deg);
}

.home-page .has-page-scroll-reveal .profile-photo-card.scroll-reveal-item.is-visible {
    transform: translate3d(0, 0, 0) rotate(-5deg);
}

html[data-theme="dark"] .home-story-section {
    --story-accent: #9fb7db;
    --story-accent-soft: rgba(159, 183, 219, 0.12);
}

html[data-theme="dark"] .home-story-section .section-kicker i,
html[data-theme="dark"] .home-story-section .section-kicker .ui-icon {
    background: #17243a;
    color: var(--text);
}

html[data-theme="dark"] .home-story-skills .skill-panel {
    border-color: var(--dark-border);
    background: transparent;
}

html[data-theme="dark"] .home-story-skills .skill-panel-list {
    border-color: var(--dark-border-strong);
    background: var(--dark-panel);
}

html[data-theme="dark"] .home-story-engagement .engagement-card,
html[data-theme="dark"] .portfolio-story-grid .project-card {
    border-color: var(--dark-border);
}

@media (max-width: 760px) {
    .section-heading-story {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .section-heading-story > p {
        padding-top: 0;
    }

    .profile-story-layout {
        grid-template-columns: 1fr;
        gap: 52px;
    }

    .profile-story-layout .intro-copy {
        max-width: none;
    }

    .engagement-story-browser {
        padding-top: 0;
    }

    .home-story-skills .skill-panel {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-top: 34px;
    }

    .home-story-skills .skill-tab-list button {
        min-width: 112px;
    }

    .home-story-skills .skill-tab-list button span {
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    .home-story-skills .skill-panel-list div {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .portfolio-story-grid .project-card.project-featured:nth-child(even) .project-media {
        order: 0;
    }

}

@media (prefers-reduced-motion: reduce) {
    .home-story-skills .skill-panel.is-entering {
        animation: none;
    }
.home-story-engagement .engagement-card-media img,
.portfolio-story-grid .project-card,
.portfolio-story-grid .project-card::before {
        transition: none;
        animation: none;
    }
}

/* Shared rail behavior: the same component works in any section or page. */
.section-band,
.engagement-browser {
    grid-template-columns: minmax(0, 1fr);
}
.section-inner,
.engagement-browser > * { min-width: 0; }
.is-drag-scroll { cursor: grab; }
.is-drag-scroll.is-dragging {
    scroll-snap-type: none;
    scroll-behavior: auto;
}
.is-drag-scroll.is-dragging,
.is-drag-scroll.is-dragging * {
    cursor: grabbing !important;
    user-select: none;
}
.is-drag-scroll:focus-visible {
    outline: 3px solid #24766d;
    outline-offset: -3px;
}
@media (max-width: 760px) {
    .nav-links a { min-height: 44px; }
}

/* Compact wedding controls share the primary buttons' hover palette. */
.wedding-page {
    --compact-hover-background:var(--navy-soft);
    --compact-hover-ink:#fff;
}
html[data-theme="dark"] .wedding-page {
    --compact-hover-background:var(--navy-soft);
    --compact-hover-ink:#081226;
}
:root .wedding-page :is(.team-link, .media-audio-toggle, .icon-button, .planner-step-overview button, .planner-summary-open, .planner-modal-close):not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible),
:root .wedding-page :is(.planner-choice, .planner-chip-grid label):hover > input:not(:disabled) + span,
:root .wedding-page :is(.planner-choice, .planner-chip-grid label) > input:not(:disabled):focus-visible + span {
    background:var(--compact-hover-background);
    border-color:var(--compact-hover-background);
    color:var(--compact-hover-ink);
}
:root .wedding-page .planner-choice:hover > input:not(:disabled) + span em,
:root .wedding-page .planner-choice > input:not(:disabled):focus-visible + span em {
    background:transparent;
    color:inherit;
}

/* Wedding editorial layout; shared controls and planner behavior stay unchanged. */
.video-hero-copy { transition:opacity .6s ease, filter .6s ease, transform .6s ease; }
.video-watch {
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:44px;
    margin-top:28px;
    padding:5px 5px 5px 18px;
    border:1px solid rgba(255,255,255,.85);
    border-radius:999px;
    background:rgba(255,255,255,.05);
    color:#fff;
    font:var(--weight-regular) var(--type-small)/1 var(--font-main);
    text-transform:uppercase;
    cursor:pointer;
    backdrop-filter:blur(8px);
    transition:background .25s ease;
}
.video-watch > span { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#fff; color:#263c70; }
.video-watch i { font-size:14px; margin-left:2px; }
.video-hero .fa-play { --icon:url("../images/icons/play.svg"); }
.video-hero .fa-pause { --icon:url("../images/icons/pause.svg"); }
.video-hero :is(.fa-play,.fa-pause)::before {
    content:"";
    display:block;
    width:1em;
    height:1em;
    background:currentColor;
    -webkit-mask:var(--icon) center / contain no-repeat;
    mask:var(--icon) center / contain no-repeat;
}
.video-hero-toggle i { display:block; font-style:normal; font-size:20px; }
.video-watch:hover { background:rgba(255,255,255,.2); }
.video-hero-toggle {
    position:absolute;
    z-index:3;
    bottom:-28px;
    left:calc(50% - 28px);
    display:grid;
    place-items:center;
    width:56px;
    height:56px;
    padding:0;
    border:1px solid rgba(255,255,255,.22);
    border-radius:50%;
    background:rgba(24,27,31,.8);
    color:#fff;
    backdrop-filter:blur(16px);
    cursor:pointer;
}
.video-hero-toggle:hover { background:#263c70; }
.video-hero :is(.video-watch,.video-hero-toggle):focus-visible { outline:3px solid #5289e0; outline-offset:5px; }
.video-hero [hidden] { display:none; }
.video-hero[data-video-state="playing"] .video-hero-copy { opacity:0; filter:blur(6px); transform:scale(.97); pointer-events:none; }
.video-hero[data-video-state="playing"]::after { opacity:0; }
.video-hero-status { position:absolute; bottom:36px; inset-inline:20px; margin:0; text-align:center; color:#fff; font-size:var(--type-small); }
.video-hero-status:empty { display:none; }
@media(prefers-reduced-motion:reduce) {
    .video-hero-copy, .video-watch { transition:none; }
}
.wedding-editorial .wedding-cover {
    position:relative;
    isolation:isolate;
    display:flex;
    align-items:center;
    width:90%;
    max-width:1600px;
    margin:20px auto 32px;
    border-radius:24px;
    min-height:380px;
    height:68svh;
    max-height:640px;
    overflow:visible;
    background:#202327;
    color:#fff;
}
.wedding-cover-image {
    position:absolute;
    inset:0;
    z-index:-2;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 42%;
    border-radius:inherit;
}
.wedding-cover::after {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:rgba(10,14,16,.22);
    pointer-events:none;
    border-radius:inherit;
    transition:opacity .6s ease;
}
.wedding-editorial .wedding-cover-copy { padding:48px 0; text-align:center; }
.wedding-editorial .wedding-cover h1 {
    max-width:1100px;
    margin:0 auto;
    color:#fff;
    font-size: var(--type-display);
    line-height:1.02;
    letter-spacing:0;
    overflow-wrap:anywhere;
}
.wedding-cover h1 span { display:block; font-style:italic; }
.wedding-chapters {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:12px 24px;
    padding:22px 0;
    border-bottom:1px solid var(--grey-strong);
}
.wedding-chapters a { display:inline-flex; align-items:center; gap:10px; min-height:32px; font-size:var(--type-small); color:var(--navy); }
.wedding-chapters a:is(:hover,:focus-visible) { text-decoration:underline; text-underline-offset:6px; }
.wedding-editorial .section-band { padding:112px 0; border-block:0; }
.wedding-editorial .section-heading {
    display:block;
    max-width:760px;
    margin:0 0 40px;
}
.wedding-editorial :is(.section-heading, .wedding-keepsake-copy, .wedding-testimonial-heading, .wedding-final-cta) h2 {
    margin:0;
    max-width:760px;
    font-size: var(--type-display);
    line-height:1.08;
    text-wrap:balance;
    letter-spacing:0;
}
.wedding-editorial .section-heading > p,
.wedding-editorial .wedding-keepsake-copy > p,
.wedding-editorial .wedding-final-cta > div > p {
    max-width:62ch;
    margin:20px 0 0;
    font-size: var(--type-body);
    line-height:1.75;
    color:var(--muted);
    text-wrap:pretty;
}
.wedding-editorial .wedding-keepsake-section { min-height:0; padding-bottom:64px; }
.wedding-editorial .wedding-keepsake { display:block; }
.wedding-editorial .wedding-keepsake-copy { max-width:720px; margin:0 auto; text-align:center; }
.wedding-editorial .wedding-keepsake-copy > p { margin-inline:auto; }
.wedding-memory-strip { display:flex; justify-content:center; gap:28px; max-width:760px; margin:44px auto 0; padding:14px; }
.wedding-memory-strip .polaroid-format { --polaroid-width:190px; flex:0 1 190px; min-width:0; margin:0; transform:rotate(-5deg); }
.wedding-memory-strip .polaroid-format:nth-child(2) { transform:translateY(10px) rotate(4deg); }
.wedding-memory-strip .polaroid-format:nth-child(3) { transform:rotate(-2deg); }
.wedding-editorial #galerie .section-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.65fr); align-items:end; gap:48px; max-width:none; margin-bottom:56px; }
.wedding-editorial #galerie .section-heading > p { margin:0; }
.wedding-editorial .wedding-testimonial-heading { margin:0 auto 48px; text-align:center; }

/* An open, editorial gallery variant, reusable on other photography pages. */
.media-gallery.media-gallery--editorial { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-flow:row; align-items:start; gap:56px 32px; }
.media-gallery--editorial .media-shot { grid-column:auto; grid-row:auto; min-height:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible; }
.media-gallery--editorial .media-shot:first-child,
.media-gallery--editorial .media-shot:has(video) { grid-column:1 / -1; }
.media-gallery--editorial .media-shot :is(img,video) { height:auto; aspect-ratio:4 / 5; object-fit:cover; border-radius:6px; transform:none; }
.media-gallery--editorial .media-shot:first-child img { aspect-ratio:3 / 2; }
.media-gallery--editorial .media-shot video { aspect-ratio:16 / 9; }
.media-gallery--editorial .media-shot--wide img { aspect-ratio:3 / 2; }
html .media-gallery--editorial .media-shot figcaption { position:static; display:block; max-width:100%; min-height:0; margin:12px 0 0; padding:0; border-radius:0; background:transparent; color:var(--muted); font-size:var(--type-small); font-weight:var(--weight-regular); line-height:1.5; }
@media(max-width:760px) {
    .media-gallery.media-gallery--editorial { gap:28px 16px; }
}
@media(max-width:480px) {
    .media-gallery.media-gallery--editorial { grid-template-columns:minmax(0,1fr); }
}
.wedding-check-invitation {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    margin-top:40px;
    padding:28px 0 0;
    border-top:0;
}
.wedding-check-invitation p { max-width:54ch; margin:0; color:var(--muted); line-height:1.65; }
.wedding-check-invitation strong { display:block; margin-bottom:6px; color:var(--text); }
.wedding-check-invitation .button { flex-shrink:0; }
.wedding-editorial .wedding-testimonial-band { background:var(--white); border-block:0; }
.wedding-editorial .wedding-testimonial blockquote p { max-width:62ch; margin-inline:auto; font-size:var(--type-body); line-height:1.75; font-weight:var(--weight-regular); }
.wedding-editorial .wedding-story-grid { gap:32px; }
.wedding-editorial .wedding-story-grid article {
    padding:24px 0 0;
    border:0;
    border-top:1px solid var(--grey-strong);
    border-radius:0;
    background:transparent;
    box-shadow:none;
}
.wedding-editorial .wedding-story-grid article > span { justify-content:flex-start; background:none; color:var(--muted); font-size:var(--type-small); }
.wedding-editorial .wedding-story-grid h3 { margin:12px 0; font-size: var(--type-card); line-height:1.25; }
.wedding-editorial .wedding-story-grid p { max-width:42ch; font-size: var(--type-body); line-height:1.7; }
.wedding-author { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); align-items:center; gap:80px; }
.wedding-author-copy { min-width:0; }
.wedding-author-copy h2 { font-size:var(--type-display); line-height:1.05; margin:0 0 28px; }
.wedding-author-copy p { font-size:var(--type-body); line-height:1.75; color:var(--muted); max-width:54ch; }
.wedding-author-copy .wedding-author-lead { color:var(--text); }
.wedding-author-copy .team-socials { flex-wrap:wrap; gap:8px; margin-block:28px; }
.wedding-author-support { padding-top:12px; }

.wedding-editorial .wedding-options-table-card { border:0; border-radius:0; background:transparent; box-shadow:none; }
.wedding-editorial .wedding-options-table-wrap { border-top:1px solid var(--grey-strong); }
.wedding-editorial .wedding-options-table :is(th,td) { padding:18px 16px; line-height:1.55; }
.wedding-editorial .wedding-options-cta { background:transparent; padding:28px 0; }
.wedding-editorial .wedding-options-cta p { max-width:64ch; font-size: var(--type-body); line-height:1.7; }
.wedding-editorial .wedding-options-cta strong { display:block; margin-bottom:6px; color:var(--text); }
.wedding-editorial .wedding-process-number { letter-spacing:0; }
.wedding-editorial .wedding-process-content { padding:0; }
.wedding-editorial .wedding-process-content h3 { font-size: var(--type-card); line-height:1.25; margin:12px 0; }
.wedding-editorial .wedding-process-content p { font-size: var(--type-body); line-height:1.7; }
.wedding-editorial .wedding-planner-section { background:var(--grey); }
.wedding-check-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin:0 0 24px; padding:0; list-style:none; }
.wedding-check-benefits li { padding:20px 0; border-top:1px solid var(--grey-strong); }
.wedding-check-benefits strong { display:block; margin-bottom:8px; color:var(--text); font-size:var(--type-body); }
.wedding-check-benefits span { color:var(--muted); font-size:var(--type-body); line-height:1.6; }
.wedding-check-note { margin:0 0 28px; font-size:var(--type-small); color:var(--muted); }
.wedding-editorial .wedding-planner-form { border:0; background:transparent; box-shadow:none; padding:0; }
.wedding-editorial #faq .section-inner { max-width:840px; }
.wedding-editorial #faq { background:var(--white); }
.wedding-editorial .faq-item summary { line-height:1.5; }
.wedding-editorial .faq-item p { max-width:68ch; line-height:1.75; }
.wedding-editorial .wedding-story-continues { border-top:0; }
.wedding-editorial .wedding-final-cta .contact-actions { flex-wrap:wrap; }

@media(max-width:1000px) {
    .wedding-editorial :is(.wedding-cover h1, .section-heading h2, .wedding-keepsake-copy h2, .wedding-testimonial-heading h2, .wedding-final-cta h2, .wedding-author-copy h2) { font-size:var(--type-section); }
    .wedding-author { gap:40px; }
}
@media(max-width:760px) {
    .wedding-editorial .wedding-cover { width:calc(100% - 32px); margin-top:12px; height:58svh; min-height:340px; max-height:520px; border-radius:16px; }
    .wedding-editorial .wedding-cover-copy { padding:32px 0; }
    .wedding-chapters { display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; padding:16px 0; }
    .wedding-chapters a { min-height:44px; font-size:var(--type-small); }
    .wedding-editorial .section-band { padding:64px 0; }
    .wedding-editorial .section-heading { margin-bottom:28px; }
    .wedding-editorial #galerie .section-heading { grid-template-columns:1fr; gap:20px; margin-bottom:32px; }
    .wedding-editorial .section-heading > p, .wedding-editorial .wedding-keepsake-copy > p { margin-top:16px; }
    .wedding-memory-strip { gap:12px; padding:12px 6px; margin-top:28px; }
    .wedding-memory-strip .polaroid-format { --polaroid-width:min(150px, calc((100vw - 84px) / 3)); flex:0 0 var(--polaroid-width); }
    .wedding-editorial .wedding-story-grid, .wedding-check-benefits { grid-template-columns:1fr; gap:8px; }
    .wedding-editorial .wedding-story-grid article { padding:18px 0; }
    .wedding-editorial .wedding-story-grid p { max-width:none; }
    .wedding-check-benefits li { padding:16px 0; }
    .wedding-author { grid-template-columns:minmax(0,1fr); gap:32px; }
    .wedding-editorial .wedding-options-cta { grid-template-columns:1fr; }
    .wedding-editorial .wedding-options-cta .button { justify-self:start; white-space:normal; }
    .wedding-editorial .wedding-planner { grid-template-columns:minmax(0,1fr); }
    .wedding-editorial .planner-summary { position:static; }
    .wedding-check-invitation .button { white-space:normal; text-align:left; }
    .wedding-editorial :is(h2,h3,p) { overflow-wrap:break-word; }
    .wedding-editorial .planner-choice span,
    .wedding-editorial .planner-chip-grid span { min-height:44px; line-height:1.4; }
    .wedding-editorial :is(input,select,textarea) { font-size:var(--type-body); }
    .wedding-editorial .planner-date-selects { grid-template-columns:minmax(0, .7fr) minmax(0, 1.2fr) minmax(0, 1fr); gap:8px; }
    .wedding-editorial .planner-date-selects select { padding-inline:8px; min-height:48px; }
    .wedding-editorial .planner-step-overview { min-width:660px; }
    .wedding-editorial .planner-step-overview button { width:44px; height:44px; }
    .wedding-editorial .planner-modal { padding:12px 12px max(12px, env(safe-area-inset-bottom)); }
    .wedding-editorial .planner-modal-panel { max-height:calc(100dvh - 32px - env(safe-area-inset-bottom)); border-radius:8px; overscroll-behavior:contain; }
    .wedding-editorial .planner-modal-close { width:44px; height:44px; }

    .wedding-editorial .wedding-options-table-wrap { overflow-x:auto; max-width:100%; border-radius:0; box-shadow:none; overscroll-behavior-x:contain; }
    .wedding-editorial .wedding-options-table { min-width:780px; }
}
@media(max-width:420px) {
    .wedding-editorial .planner-name-row { grid-template-columns:minmax(0,1fr); gap:4px; }
    .wedding-editorial .planner-name-row > span { min-height:0; }
    .wedding-editorial .planner-date-selects { grid-template-columns:minmax(0,1fr); }
    .wedding-editorial .planner-date-selects label { grid-template-columns:56px minmax(0,1fr); align-items:center; }
}
@media(max-height:700px) and (min-width:761px) {
    .wedding-editorial .wedding-cover { min-height:0; }
}
@media(max-height:500px) {
    .wedding-editorial .wedding-cover { min-height:230px; height:auto; }
    .wedding-editorial .wedding-cover-copy { padding:20px 0; }
    .wedding-editorial .wedding-cover h1 { font-size: var(--type-section); }
    .wedding-cover h1 span { display:inline; }
}