/* ==========================================================================
   Capture Me — Core Stylesheet
   Cinematic editorial photography theme. Black & white luxury aesthetic.
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: auto; /* Lenis handles smooth scroll */
}

body {
    margin: 0;
    background: var(--cm-black);
    color: var(--cm-paper);
    font-family: var(--cm-font-body);
    font-size: 1rem;
    line-height: 1.65;
    font-weight: 300;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.cm-light {
    background: var(--cm-paper);
    color: var(--cm-ink);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.4s var(--cm-ease); }
button { font-family: inherit; cursor: pointer; }

/* When custom cursor is active, hide native cursor on capable devices */
@media (hover: hover) and (pointer: fine) {
    body.cm-cursor-on, body.cm-cursor-on a, body.cm-cursor-on button { cursor: none; }
}

/* ---------- Typography scale ---------- */
h1, h2, h3, h4 { font-family: var(--cm-font-display); font-weight: 500; line-height: 1.04; margin: 0 0 0.5em; letter-spacing: -0.015em; }
.cm-display { font-size: clamp(2.75rem, 9vw, 8.5rem); font-weight: 500; }
h1 { font-size: clamp(2.4rem, 6vw, 5rem); }
h2 { font-size: clamp(2rem, 4.5vw, 4rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 2.25rem); }
p { margin: 0 0 1.25rem; }

.cm-eyebrow {
    font-family: var(--cm-font-label);
    text-transform: uppercase;
    letter-spacing: 0.42em;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--cm-accent);
    display: inline-block;
    margin-bottom: 1.5rem;
}

.cm-italic { font-style: italic; }

/* ---------- Layout ---------- */
.cm-container { width: 100%; max-width: var(--cm-maxw); margin-inline: auto; padding-inline: var(--cm-gutter); }
.cm-section { padding-block: clamp(5rem, 12vh, 11rem); position: relative; }
.cm-section--tight { padding-block: clamp(3rem, 7vh, 6rem); }

/* ---------- Buttons / magnetic ---------- */
.cm-btn {
    --bg: var(--cm-paper);
    --fg: var(--cm-black);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.05rem 2.4rem;
    font-family: var(--cm-font-label);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fg);
    background: var(--bg);
    border: 1px solid var(--bg);
    border-radius: var(--cm-radius);
    overflow: hidden;
    transition: color 0.5s var(--cm-ease), transform 0.4s var(--cm-ease);
    will-change: transform;
}
.cm-btn span { position: relative; z-index: 2; }
.cm-btn::after {
    content: "";
    position: absolute; inset: 0;
    background: var(--cm-accent);
    transform: translateY(101%);
    transition: transform 0.55s var(--cm-ease);
    z-index: 1;
}
.cm-btn:hover { color: var(--cm-black); }
.cm-btn:hover::after { transform: translateY(0); }

.cm-btn--ghost { --bg: transparent; --fg: var(--cm-paper); border-color: rgba(245,243,239,0.28); }
.cm-btn--ghost:hover { color: var(--cm-black); }

.cm-magnetic { display: inline-block; will-change: transform; }

/* ---------- Loading screen ---------- */
.cm-loader {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--cm-black);
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 2rem;
    transition: opacity 0.8s var(--cm-ease), visibility 0.8s;
}
.cm-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.cm-loader__mark { font-family: var(--cm-font-display); font-size: clamp(2rem,5vw,3.5rem); letter-spacing: 0.05em; color: var(--cm-paper); overflow: hidden; }
.cm-loader__bar { width: min(280px, 60vw); height: 1px; background: rgba(245,243,239,0.18); overflow: hidden; }
.cm-loader__bar i { display: block; height: 100%; width: 0; background: var(--cm-accent); }
.cm-loader__pct { font-family: var(--cm-font-label); font-size: 0.7rem; letter-spacing: 0.4em; color: var(--cm-mist); }

/* ---------- Custom cursor ---------- */
.cm-cursor, .cm-cursor-dot { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998; border-radius: 50%; mix-blend-mode: difference; }
.cm-cursor { width: 38px; height: 38px; border: 1px solid var(--cm-paper); transform: translate(-50%, -50%); transition: width 0.35s var(--cm-ease), height 0.35s var(--cm-ease), background 0.35s var(--cm-ease); }
.cm-cursor-dot { width: 5px; height: 5px; background: var(--cm-paper); transform: translate(-50%, -50%); }
.cm-cursor.is-hover { width: 76px; height: 76px; background: var(--cm-paper); }
.cm-cursor.is-hidden, .cm-cursor-dot.is-hidden { opacity: 0; }
@media (hover: none), (pointer: coarse) { .cm-cursor, .cm-cursor-dot { display: none; } }

/* ---------- Film grain + noise overlay ---------- */
.cm-grain {
    position: fixed; inset: -200%;
    z-index: 9990; pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: cm-grain 0.6s steps(2) infinite;
}
@keyframes cm-grain {
    0% { transform: translate(0,0); } 25% { transform: translate(-3%, 2%); }
    50% { transform: translate(2%, -2%); } 75% { transform: translate(-2%, -3%); }
    100% { transform: translate(2%, 3%); }
}

/* ---------- Scroll progress + indicators ---------- */
.cm-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--cm-accent); z-index: 9997; }

/* ---------- Header / Nav ---------- */
.cm-header {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
    padding-block: 1.6rem;
    transition: background 0.5s var(--cm-ease), padding 0.5s var(--cm-ease), transform 0.5s var(--cm-ease);
}
.cm-header.is-scrolled {
    padding-block: 1rem;
    background: rgba(10,10,10,0.55);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    border-bottom: 1px solid rgba(245,243,239,0.06);
}
body.cm-light .cm-header.is-scrolled { background: rgba(245,243,239,0.6); border-bottom-color: rgba(20,20,20,0.06); }
.cm-header.is-hidden { transform: translateY(-100%); }
.cm-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.cm-brand { display: flex; flex-direction: column; line-height: 1; }
.cm-brand__name { font-family: var(--cm-font-display); font-size: 1.4rem; letter-spacing: 0.02em; }
.cm-brand__tag { font-family: var(--cm-font-label); font-size: 0.56rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--cm-accent); margin-top: 0.35rem; }
.cm-brand img { max-height: 46px; width: auto; }

.cm-nav { display: flex; align-items: center; gap: 2.6rem; }
.cm-nav ul { display: flex; gap: 2.4rem; list-style: none; margin: 0; padding: 0; }
.cm-nav a { font-family: var(--cm-font-label); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; position: relative; padding-block: 0.4rem; }
.cm-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--cm-accent); transition: width 0.4s var(--cm-ease); }
.cm-nav a:hover::after, .cm-nav .current-menu-item > a::after { width: 100%; }
.cm-nav .sub-menu { position: absolute; flex-direction: column; gap: 0; background: rgba(10,10,10,0.92); backdrop-filter: blur(20px); padding: 1rem 0; min-width: 220px; border: 1px solid rgba(245,243,239,0.08); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.4s var(--cm-ease); }
.cm-nav li { position: relative; }
.cm-nav li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.cm-nav .sub-menu li { padding: 0 1.6rem; }
.cm-nav .sub-menu a { display: block; padding-block: 0.7rem; }

.cm-header__actions { display: flex; align-items: center; gap: 1.5rem; }
.cm-theme-toggle { background: none; border: 1px solid rgba(245,243,239,0.2); color: inherit; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; transition: all 0.4s var(--cm-ease); }
.cm-theme-toggle:hover { border-color: var(--cm-accent); color: var(--cm-accent); }
body.cm-light .cm-theme-toggle { border-color: rgba(20,20,20,0.2); }

/* Mobile menu */
.cm-burger { display: none; flex-direction: column; gap: 6px; width: 30px; background: none; border: none; padding: 0; }
.cm-burger span { display: block; height: 1.5px; width: 100%; background: currentColor; transition: transform 0.4s var(--cm-ease), opacity 0.3s; }
.cm-burger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.cm-burger.is-open span:nth-child(2) { opacity: 0; }
.cm-burger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.cm-mobile-menu {
    position: fixed; inset: 0; z-index: 999;
    background: var(--cm-black);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.5rem;
    transform: translateY(-100%);
    transition: transform 0.7s var(--cm-ease);
}
.cm-mobile-menu.is-open { transform: translateY(0); }
.cm-mobile-menu ul { list-style: none; margin: 0; padding: 0; text-align: center; }
.cm-mobile-menu a { font-family: var(--cm-font-display); font-size: clamp(2rem, 8vw, 3.5rem); padding-block: 0.4rem; display: block; }
.cm-mobile-menu .sub-menu { display: none; }

/* ---------- Hero ---------- */
.cm-hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.cm-hero__canvas { position: absolute; inset: 0; z-index: 0; }
.cm-hero__particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cm-hero__media { position: absolute; inset: 0; z-index: 0; }
.cm-hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.08); transition: opacity 1.6s var(--cm-ease), transform 7s linear; }
.cm-hero__slide.is-active { opacity: 1; transform: scale(1); }
.cm-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10,10,10,0.45), rgba(10,10,10,0.2) 40%, rgba(10,10,10,0.85)); z-index: 2; }
.cm-hero__light { position: absolute; width: 60vw; height: 60vw; border-radius: 50%; background: radial-gradient(circle, var(--cm-accent-soft), transparent 65%); filter: blur(40px); z-index: 1; pointer-events: none; transform: translate(-50%, -50%); opacity: 0.7; }
.cm-hero__inner { position: relative; z-index: 5; width: 100%; }
.cm-hero__title { margin: 0; }
.cm-hero__title .line { display: block; overflow: hidden; }
.cm-hero__title .line > span { display: block; }
.cm-hero__sub { max-width: 32ch; color: rgba(245,243,239,0.78); font-size: 1.05rem; margin: 2rem 0 2.75rem; }
.cm-hero__cta { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.cm-hero__scroll { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; font-family: var(--cm-font-label); font-size: 0.6rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--cm-mist); }
.cm-hero__scroll i { width: 1px; height: 48px; background: linear-gradient(var(--cm-accent), transparent); animation: cm-scrolldown 2s var(--cm-ease) infinite; }
@keyframes cm-scrolldown { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 50.1% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.cm-hero__counter { position: absolute; bottom: 2.5rem; right: var(--cm-gutter); z-index: 5; font-family: var(--cm-font-label); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--cm-mist); }

/* ---------- Section heading ---------- */
.cm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 3.5rem; }
.cm-head__title { max-width: 18ch; }
.cm-head__meta { max-width: 38ch; color: var(--cm-mist); }
.cm-reveal-line { overflow: hidden; }

/* ---------- About ---------- */
.cm-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.cm-about__photo { position: relative; overflow: hidden; border-radius: var(--cm-radius); aspect-ratio: 4/5; }
.cm-about__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter 0.8s var(--cm-ease), transform 1.2s var(--cm-ease); }
.cm-about__photo:hover img { filter: grayscale(0); transform: scale(1.04); }
.cm-about__sign { font-family: var(--cm-font-display); font-style: italic; font-size: 2rem; color: var(--cm-accent); margin-top: 1rem; }
.cm-stats { display: flex; gap: 3rem; margin-top: 2.5rem; flex-wrap: wrap; }
.cm-stat__n { font-family: var(--cm-font-display); font-size: 2.6rem; line-height: 1; }
.cm-stat__l { font-family: var(--cm-font-label); font-size: 0.66rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--cm-mist); margin-top: 0.5rem; }

/* ---------- Portfolio ---------- */
.cm-filters { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 3rem; }
.cm-filter { background: none; border: 1px solid rgba(245,243,239,0.16); color: inherit; padding: 0.6rem 1.4rem; font-family: var(--cm-font-label); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; border-radius: 100px; transition: all 0.4s var(--cm-ease); }
.cm-filter:hover { border-color: var(--cm-accent); color: var(--cm-accent); }
.cm-filter.is-active { background: var(--cm-paper); color: var(--cm-black); border-color: var(--cm-paper); }
body.cm-light .cm-filter { border-color: rgba(20,20,20,0.16); }
body.cm-light .cm-filter.is-active { background: var(--cm-ink); color: var(--cm-paper); }

.cm-masonry { columns: 3; column-gap: 1.25rem; }
.cm-masonry .cm-card { break-inside: avoid; margin-bottom: 1.25rem; }
.cm-card { position: relative; overflow: hidden; border-radius: var(--cm-radius); display: block; }
.cm-card img { width: 100%; filter: grayscale(0.55) brightness(0.92); transition: filter 0.8s var(--cm-ease), transform 1.1s var(--cm-ease); }
.cm-card:hover img { filter: grayscale(0) brightness(1); transform: scale(1.06); }
.cm-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,0.85), transparent 55%); opacity: 0; transition: opacity 0.5s var(--cm-ease); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.8rem; }
.cm-card:hover .cm-card__overlay { opacity: 1; }
.cm-card__cat { font-family: var(--cm-font-label); font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cm-accent); transform: translateY(12px); transition: transform 0.5s var(--cm-ease) 0.05s; }
.cm-card__title { font-family: var(--cm-font-display); font-size: 1.5rem; color: var(--cm-paper); transform: translateY(14px); transition: transform 0.5s var(--cm-ease) 0.1s; }
.cm-card:hover .cm-card__cat, .cm-card:hover .cm-card__title { transform: translateY(0); }
.cm-card__plus { position: absolute; top: 1.4rem; right: 1.4rem; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--cm-paper); display: grid; place-items: center; opacity: 0; transform: scale(0.6) rotate(-45deg); transition: all 0.5s var(--cm-ease); color: var(--cm-paper); }
.cm-card:hover .cm-card__plus { opacity: 1; transform: scale(1) rotate(0); }

.cm-portfolio__more { text-align: center; margin-top: 3.5rem; }
.cm-grid-loading { opacity: 0.4; pointer-events: none; }

/* ---------- Services ---------- */
.cm-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; }
.cm-service { position: relative; padding: 2.75rem 2.4rem; border: 1px solid rgba(245,243,239,0.1); border-radius: var(--cm-radius); overflow: hidden; transition: transform 0.6s var(--cm-ease), border-color 0.6s var(--cm-ease); background: rgba(255,255,255,0.012); }
body.cm-light .cm-service { border-color: rgba(20,20,20,0.1); background: rgba(20,20,20,0.012); }
.cm-service::before { content: ""; position: absolute; inset: 0; background: var(--cm-accent); transform: translateY(100%); transition: transform 0.6s var(--cm-ease); z-index: 0; opacity: 0.08; }
.cm-service:hover { transform: translateY(-8px); border-color: var(--cm-accent); }
.cm-service:hover::before { transform: translateY(0); }
.cm-service > * { position: relative; z-index: 1; }
.cm-service__num { font-family: var(--cm-font-label); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--cm-mist); }
.cm-service__icon { font-size: 2rem; color: var(--cm-accent); margin: 1.5rem 0; }
.cm-service__title { font-size: 1.7rem; margin-bottom: 0.75rem; }
.cm-service__desc { color: var(--cm-mist); font-size: 0.95rem; }
.cm-service__price { font-family: var(--cm-font-display); font-size: 1.4rem; margin-top: 1.5rem; display: block; }
.cm-service__price small { font-family: var(--cm-font-label); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cm-mist); display: block; }
.cm-service__link { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.5rem; font-family: var(--cm-font-label); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; }
.cm-service__link i { transition: transform 0.4s var(--cm-ease); }
.cm-service:hover .cm-service__link i { transform: translateX(6px); }

/* ---------- Testimonials ---------- */
.cm-testi { background: var(--cm-ink); }
body.cm-light .cm-testi { background: #ece9e2; }
.cm-testi__swiper { overflow: hidden; }
.cm-testi__card { text-align: center; max-width: 760px; margin-inline: auto; }
.cm-testi__stars { color: var(--cm-accent); letter-spacing: 0.3em; margin-bottom: 1.75rem; font-size: 0.9rem; }
.cm-testi__quote { font-family: var(--cm-font-display); font-style: italic; font-size: clamp(1.4rem, 3vw, 2.4rem); line-height: 1.35; margin-bottom: 2rem; }
.cm-testi__author { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.cm-testi__author img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
.cm-testi__name { font-family: var(--cm-font-label); font-weight: 600; letter-spacing: 0.1em; }
.cm-testi__role { font-size: 0.78rem; color: var(--cm-mist); letter-spacing: 0.1em; }
.cm-testi__nav { display: flex; gap: 1rem; justify-content: center; margin-top: 2.5rem; }
.cm-testi__nav button { width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(245,243,239,0.2); background: none; color: inherit; transition: all 0.4s var(--cm-ease); }
.cm-testi__nav button:hover { background: var(--cm-accent); border-color: var(--cm-accent); color: var(--cm-black); }

/* ---------- Marquee ---------- */
.cm-marquee { overflow: hidden; white-space: nowrap; padding-block: 2rem; border-block: 1px solid rgba(245,243,239,0.08); }
.cm-marquee__track { display: inline-flex; gap: 3rem; animation: cm-marq 26s linear infinite; will-change: transform; }
.cm-marquee span { font-family: var(--cm-font-display); font-size: clamp(2rem, 6vw, 5rem); font-style: italic; color: transparent; -webkit-text-stroke: 1px rgba(245,243,239,0.3); }
.cm-marquee span:nth-child(even) { color: var(--cm-accent); -webkit-text-stroke: 0; }
@keyframes cm-marq { to { transform: translateX(-50%); } }

/* ---------- Contact ---------- */
.cm-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); }
.cm-field { position: relative; margin-bottom: 2rem; }
.cm-field input, .cm-field textarea { width: 100%; background: none; border: none; border-bottom: 1px solid rgba(245,243,239,0.2); color: inherit; font-family: var(--cm-font-body); font-size: 1rem; padding: 0.9rem 0; outline: none; transition: border-color 0.4s var(--cm-ease); }
body.cm-light .cm-field input, body.cm-light .cm-field textarea { border-bottom-color: rgba(20,20,20,0.2); }
.cm-field textarea { resize: vertical; min-height: 120px; }
.cm-field label { position: absolute; left: 0; top: 0.9rem; color: var(--cm-mist); font-family: var(--cm-font-label); font-size: 0.85rem; letter-spacing: 0.05em; pointer-events: none; transition: all 0.4s var(--cm-ease); }
.cm-field input:focus ~ label, .cm-field input:not(:placeholder-shown) ~ label,
.cm-field textarea:focus ~ label, .cm-field textarea:not(:placeholder-shown) ~ label {
    top: -0.85rem; font-size: 0.62rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--cm-accent);
}
.cm-field input:focus, .cm-field textarea:focus { border-bottom-color: var(--cm-accent); }
.cm-field.is-error input, .cm-field.is-error textarea { border-bottom-color: #c0392b; }
.cm-field__error { color: #c0392b; font-size: 0.7rem; letter-spacing: 0.05em; margin-top: 0.4rem; display: none; }
.cm-field.is-error .cm-field__error { display: block; }
.cm-form__status { font-family: var(--cm-font-label); font-size: 0.8rem; letter-spacing: 0.05em; margin-top: 1rem; min-height: 1.2em; }
.cm-contact__info { display: flex; flex-direction: column; gap: 2rem; }
.cm-contact__item .l { font-family: var(--cm-font-label); font-size: 0.64rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cm-accent); margin-bottom: 0.5rem; }
.cm-contact__item .v { font-family: var(--cm-font-display); font-size: 1.5rem; }
.cm-map { margin-top: 2rem; border-radius: var(--cm-radius); overflow: hidden; filter: grayscale(1) invert(0.92) contrast(0.9); }
.cm-map iframe { width: 100%; height: 240px; border: 0; display: block; }
body.cm-light .cm-map { filter: grayscale(1); }

/* WhatsApp float */
.cm-whatsapp { position: fixed; bottom: 2rem; right: 2rem; z-index: 900; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; font-size: 1.5rem; box-shadow: 0 10px 40px rgba(37,211,102,0.35); transition: transform 0.4s var(--cm-ease); }
.cm-whatsapp:hover { transform: scale(1.1) rotate(8deg); }

/* ---------- Footer ---------- */
.cm-footer { background: var(--cm-black); border-top: 1px solid rgba(245,243,239,0.08); padding-top: clamp(4rem, 8vh, 7rem); }
body.cm-light .cm-footer { background: #ece9e2; }
.cm-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; margin-bottom: 4rem; }
.cm-footer__cta { font-family: var(--cm-font-display); font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.1; }
.cm-footer__col h4 { font-family: var(--cm-font-label); font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cm-accent); margin-bottom: 1.5rem; }
.cm-footer__col ul { list-style: none; margin: 0; padding: 0; }
.cm-footer__col li { margin-bottom: 0.85rem; }
.cm-footer__col a:hover { color: var(--cm-accent); }
.cm-insta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.cm-insta a { aspect-ratio: 1; overflow: hidden; border-radius: 2px; }
.cm-insta img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter 0.5s var(--cm-ease), transform 0.6s var(--cm-ease); }
.cm-insta a:hover img { filter: grayscale(0); transform: scale(1.08); }
.cm-socials { display: flex; gap: 1rem; margin-top: 1.5rem; }
.cm-socials a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(245,243,239,0.18); display: grid; place-items: center; transition: all 0.4s var(--cm-ease); }
.cm-socials a:hover { background: var(--cm-accent); border-color: var(--cm-accent); color: var(--cm-black); transform: translateY(-4px); }
.cm-footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-block: 2rem; border-top: 1px solid rgba(245,243,239,0.08); font-family: var(--cm-font-label); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--cm-mist); }
.cm-newsletter { display: flex; gap: 0.5rem; margin-top: 1rem; }
.cm-newsletter input { flex: 1; background: none; border: 1px solid rgba(245,243,239,0.2); color: inherit; padding: 0.8rem 1rem; border-radius: var(--cm-radius); outline: none; }
.cm-newsletter button { padding: 0 1.2rem; background: var(--cm-accent); color: var(--cm-black); border: none; border-radius: var(--cm-radius); }

/* ---------- Lightbox ---------- */
.cm-lightbox { position: fixed; inset: 0; z-index: 9995; background: rgba(8,8,8,0.96); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.5s var(--cm-ease), visibility 0.5s; }
.cm-lightbox.is-open { opacity: 1; visibility: visible; }
.cm-lightbox img { max-width: 88vw; max-height: 84vh; border-radius: var(--cm-radius); transform: scale(0.94); transition: transform 0.6s var(--cm-ease); }
.cm-lightbox.is-open img { transform: scale(1); }
.cm-lightbox__close, .cm-lightbox__nav { position: absolute; background: none; border: 1px solid rgba(245,243,239,0.25); color: var(--cm-paper); width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; transition: all 0.4s var(--cm-ease); }
.cm-lightbox__close { top: 2rem; right: 2rem; }
.cm-lightbox__nav { top: 50%; transform: translateY(-50%); }
.cm-lightbox__nav.prev { left: 2rem; } .cm-lightbox__nav.next { right: 2rem; }
.cm-lightbox button:hover { background: var(--cm-accent); border-color: var(--cm-accent); color: var(--cm-black); }
.cm-lightbox__caption { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); font-family: var(--cm-font-label); font-size: 0.78rem; letter-spacing: 0.15em; color: var(--cm-mist); }

/* ---------- Before / After comparison ---------- */
.cm-baw { position: relative; overflow: hidden; border-radius: var(--cm-radius); user-select: none; aspect-ratio: 3/2; }
.cm-baw img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cm-baw__after { clip-path: inset(0 0 0 50%); }
.cm-baw__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--cm-paper); cursor: ew-resize; }
.cm-baw__handle::after { content: "\2194"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; background: var(--cm-paper); color: var(--cm-black); border-radius: 50%; display: grid; place-items: center; }

/* ---------- Posts / single / archive ---------- */
.cm-post-hero { padding-top: 9rem; }
.cm-post__meta { font-family: var(--cm-font-label); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cm-mist); margin-bottom: 1.5rem; }
.cm-prose { max-width: 720px; margin-inline: auto; }
.cm-prose p, .cm-prose ul, .cm-prose ol { font-size: 1.08rem; color: rgba(245,243,239,0.85); }
body.cm-light .cm-prose p { color: rgba(20,20,20,0.85); }
.cm-prose h2, .cm-prose h3 { margin-top: 2.5rem; }
.cm-prose blockquote { border-left: 2px solid var(--cm-accent); padding-left: 1.5rem; font-family: var(--cm-font-display); font-style: italic; font-size: 1.5rem; margin: 2rem 0; }
.cm-prose img { border-radius: var(--cm-radius); margin: 2rem 0; }

.cm-archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; }

/* Pagination */
.cm-pagination { display: flex; gap: 0.5rem; justify-content: center; margin-top: 4rem; }
.cm-pagination .page-numbers { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(245,243,239,0.16); border-radius: 50%; font-family: var(--cm-font-label); font-size: 0.8rem; transition: all 0.4s var(--cm-ease); }
.cm-pagination .page-numbers.current, .cm-pagination .page-numbers:hover { background: var(--cm-accent); border-color: var(--cm-accent); color: var(--cm-black); }

/* Comments + widgets */
.cm-widget { margin-bottom: 2.5rem; }
.cm-widget-title { font-family: var(--cm-font-label); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cm-accent); margin-bottom: 1.25rem; }
.cm-widget ul { list-style: none; margin: 0; padding: 0; }
.cm-widget li { padding-block: 0.6rem; border-bottom: 1px solid rgba(245,243,239,0.06); }
.cm-comments { max-width: 720px; margin: 4rem auto 0; }
.cm-comment { padding: 1.5rem 0; border-bottom: 1px solid rgba(245,243,239,0.08); list-style: none; }
.cm-comment .children { list-style: none; padding-left: 2rem; }
.comment-form input, .comment-form textarea { width: 100%; background: none; border: 1px solid rgba(245,243,239,0.18); color: inherit; padding: 0.8rem 1rem; margin-bottom: 1rem; border-radius: var(--cm-radius); }

/* ---------- Reveal utilities ---------- */
[data-reveal] { opacity: 0; transform: translateY(40px); }
.cm-split .char { display: inline-block; will-change: transform; }

/* Album protected */
.cm-album-lock { max-width: 460px; margin: 6rem auto; text-align: center; }
.cm-album-lock input { width: 100%; text-align: center; background: none; border: 1px solid rgba(245,243,239,0.2); color: inherit; padding: 1rem; border-radius: var(--cm-radius); margin-block: 1.5rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .cm-masonry { columns: 2; }
    .cm-about__grid, .cm-contact__grid { grid-template-columns: 1fr; }
    .cm-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .cm-nav, .cm-header__actions .cm-theme-toggle { display: none; }
    .cm-burger { display: flex; }
    .cm-masonry { columns: 1; }
    .cm-footer__top { grid-template-columns: 1fr; gap: 2.5rem; }
    .cm-head { flex-direction: column; align-items: flex-start; }
    .cm-hero__counter { display: none; }
    .cm-whatsapp { bottom: 1.25rem; right: 1.25rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
    .cm-grain, .cm-hero__scroll i { animation: none; }
    [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Keyboard focus ---------- */
:focus-visible { outline: 2px solid var(--cm-accent); outline-offset: 3px; }

/* ==========================================================================
   Extended templates — blog cards, 404, single project, albums, gallery
   (appended; self-contained, includes own responsive rules)
   ========================================================================== */

/* --- Blog / archive post cards ------------------------------------------ */
.cm-pcard { display: flex; flex-direction: column; background: var(--cm-ink); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--cm-radius); overflow: hidden; transition: transform var(--cm-dur) var(--cm-ease), border-color var(--cm-dur) var(--cm-ease); }
.cm-pcard:hover { transform: translateY(-6px); border-color: rgba(201,165,92,0.4); }
.cm-pcard__media { position: relative; display: block; aspect-ratio: 3/2; overflow: hidden; background: var(--cm-graphite); }
.cm-pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--cm-ease); }
.cm-pcard:hover .cm-pcard__media img { transform: scale(1.06); }
.cm-pcard__placeholder { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.5rem; color: rgba(255,255,255,0.12); }
.cm-pcard__plus { position: absolute; right: 1rem; bottom: 1rem; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--cm-paper); color: var(--cm-black); transform: translateY(12px); opacity: 0; transition: all var(--cm-dur) var(--cm-ease); }
.cm-pcard:hover .cm-pcard__plus { transform: translateY(0); opacity: 1; }
.cm-pcard__body { padding: 1.6rem 1.5rem 1.8rem; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }
.cm-pcard__meta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-family: var(--cm-font-label); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cm-mist); }
.cm-pcard__meta a { color: var(--cm-accent); }
.cm-pcard__title { font-family: var(--cm-font-display); font-size: 1.5rem; line-height: 1.2; }
.cm-pcard__title a { color: inherit; }
.cm-pcard__title a:hover { color: var(--cm-accent); }
.cm-pcard__excerpt { color: rgba(245,243,239,0.6); font-size: 0.95rem; line-height: 1.6; flex: 1; }
.cm-pcard__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem; }
.cm-pcard__read { font-size: 0.78rem; color: var(--cm-mist); }
.cm-pcard__link { font-family: var(--cm-font-label); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cm-paper); display: inline-flex; gap: 0.5rem; align-items: center; }
.cm-pcard__link:hover { color: var(--cm-accent); }
.cm-pcard__link i { transition: transform var(--cm-dur) var(--cm-ease); }
.cm-pcard__link:hover i { transform: translateX(5px); }
body.cm-light .cm-pcard { background: #fff; border-color: rgba(0,0,0,0.08); }
body.cm-light .cm-pcard__excerpt { color: rgba(20,20,20,0.6); }

/* --- No results / empty states ------------------------------------------ */
.cm-none { text-align: center; max-width: 540px; margin: 4rem auto; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.cm-none__icon { font-size: 3rem; color: var(--cm-accent); opacity: 0.7; }
.cm-none__title { font-family: var(--cm-font-display); font-size: 2rem; }
.cm-none__text { color: var(--cm-mist); line-height: 1.7; }

/* --- 404 ----------------------------------------------------------------- */
.cm-404 { min-height: 80vh; display: grid; place-items: center; text-align: center; }
.cm-404__inner { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.cm-404__code { font-family: var(--cm-font-display); font-size: clamp(6rem, 22vw, 16rem); line-height: 0.9; color: transparent; -webkit-text-stroke: 1.5px rgba(201,165,92,0.55); }
.cm-404__title { font-family: var(--cm-font-display); font-size: clamp(1.6rem, 4vw, 2.6rem); }
.cm-404__text { color: var(--cm-mist); max-width: 520px; line-height: 1.7; }
.cm-404__actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 0.5rem; }
.cm-404__search { margin-top: 1.5rem; width: min(420px, 90vw); }

/* --- Sidebar / widgets --------------------------------------------------- */
.cm-sidebar { display: flex; flex-direction: column; gap: 2.5rem; }

/* --- Comments ------------------------------------------------------------ */
.cm-comments { max-width: 720px; margin: 4rem auto 0; }
.cm-comments__title { font-family: var(--cm-font-display); font-size: 1.7rem; margin-bottom: 2rem; }
.cm-comments__list { list-style: none; display: flex; flex-direction: column; gap: 1.5rem; }
.cm-comments__list ol { list-style: none; margin-top: 1.5rem; padding-left: 2rem; }
.cm-comments .comment-body { background: var(--cm-ink); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--cm-radius); padding: 1.5rem; }
.cm-comments .comment-author { font-family: var(--cm-font-label); font-size: 0.85rem; letter-spacing: 0.06em; }
.cm-comments .comment-author .says { display: none; }
.cm-comments .comment-meta { font-size: 0.75rem; color: var(--cm-mist); margin-bottom: 0.6rem; }
.cm-comments .comment-meta a { color: var(--cm-mist); }
.cm-comment-form { margin-top: 3rem; display: flex; flex-direction: column; gap: 1rem; }
.cm-comment-form input[type="text"], .cm-comment-form input[type="email"], .cm-comment-form input[type="url"], .cm-comment-form textarea { width: 100%; background: var(--cm-ink); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--cm-radius); padding: 1rem 1.1rem; color: var(--cm-paper); font-family: var(--cm-font-body); }
.cm-comment-form textarea { min-height: 140px; resize: vertical; }
.cm-comments__reply-title { font-family: var(--cm-font-display); font-size: 1.5rem; }
.cm-comments__closed { color: var(--cm-mist); font-style: italic; }
body.cm-light .cm-comments .comment-body { background: #fff; border-color: rgba(0,0,0,0.08); }

/* --- Single project ------------------------------------------------------ */
.cm-project__hero { position: relative; min-height: 70vh; display: flex; align-items: flex-end; overflow: hidden; padding-bottom: clamp(2rem, 6vh, 5rem); }
.cm-project__hero-media { position: absolute; inset: -10% 0; }
.cm-project__hero-media img { width: 100%; height: 120%; object-fit: cover; }
.cm-project__hero-veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.4) 50%, rgba(10,10,10,0.6) 100%); }
.cm-project__hero-inner { position: relative; z-index: 2; }
.cm-project__title { font-family: var(--cm-font-display); font-size: clamp(2.4rem, 7vw, 6rem); line-height: 1.02; margin-top: 0.5rem; }
.cm-project__body { padding-block: clamp(3rem, 8vh, 7rem); }
.cm-project__layout { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 900px) { .cm-project__layout { grid-template-columns: 1.6fr 0.9fr; gap: 5rem; } }
.cm-project__content.cm-prose { margin-inline: 0; max-width: none; }
.cm-project__facts { display: flex; flex-direction: column; gap: 1.3rem; align-self: start; border-top: 1px solid rgba(201,165,92,0.3); padding-top: 1.6rem; }
.cm-fact { display: flex; flex-direction: column; gap: 0.3rem; }
.cm-fact__label { font-family: var(--cm-font-label); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cm-accent); }
.cm-fact__value { font-size: 1.05rem; color: var(--cm-paper); }
.cm-project__subhead { font-family: var(--cm-font-display); font-size: 1.8rem; margin-bottom: 1.5rem; }
.cm-project__video, .cm-project__gallery, .cm-baw { margin-top: clamp(3rem, 7vh, 6rem); }
body.cm-light .cm-fact__value { color: var(--cm-black); }

/* --- Before / after ------------------------------------------------------ */
.cm-baw__stage { position: relative; aspect-ratio: 16/10; overflow: hidden; border-radius: var(--cm-radius); user-select: none; cursor: ew-resize; }
.cm-baw__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cm-baw__before { position: absolute; inset: 0; width: 50%; overflow: hidden; border-right: 2px solid var(--cm-paper); }
.cm-baw__before img { width: auto; min-width: 100vw; max-width: none; }
.cm-baw__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--cm-paper); transform: translateX(-50%); display: flex; align-items: center; justify-content: center; }
.cm-baw__grip { width: 46px; height: 46px; border-radius: 50%; background: var(--cm-paper); color: var(--cm-black); display: grid; place-items: center; box-shadow: 0 4px 20px rgba(0,0,0,0.4); }

/* --- Video frame --------------------------------------------------------- */
.cm-video-frame { position: relative; aspect-ratio: 16/9; border-radius: var(--cm-radius); overflow: hidden; background: #000; }
.cm-video-frame iframe, .cm-video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Gallery grid -------------------------------------------------------- */
.cm-gallery-grid { columns: 3 240px; column-gap: 1rem; }
.cm-gallery-grid__item { display: block; margin-bottom: 1rem; break-inside: avoid; overflow: hidden; border-radius: var(--cm-radius); }
.cm-gallery-grid__item img { width: 100%; display: block; transition: transform 1s var(--cm-ease), filter 0.6s var(--cm-ease); filter: grayscale(0.25); }
.cm-gallery-grid__item:hover img { transform: scale(1.05); filter: grayscale(0); }

/* --- Project nav --------------------------------------------------------- */
.cm-project__nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: clamp(3rem, 8vh, 6rem); padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.08); }
.cm-project__nav-link { display: flex; flex-direction: column; gap: 0.4rem; }
.cm-project__nav-link--next { text-align: right; margin-left: auto; }
.cm-project__nav-dir { font-family: var(--cm-font-label); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cm-accent); }
.cm-project__nav-title { font-family: var(--cm-font-display); font-size: 1.2rem; color: var(--cm-paper); }
.cm-project__nav-title:hover { color: var(--cm-accent); }
.cm-project__nav-all { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); display: grid; place-items: center; color: var(--cm-paper); flex-shrink: 0; }
.cm-project__nav-all:hover { background: var(--cm-accent); color: var(--cm-black); border-color: var(--cm-accent); }

/* --- Albums -------------------------------------------------------------- */
.cm-album__hero { padding-top: 9rem; text-align: center; }
.cm-album__hero-inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.cm-album__title { font-family: var(--cm-font-display); font-size: clamp(2.2rem, 6vw, 4.5rem); line-height: 1.05; }
.cm-album__intro { max-width: 600px; color: var(--cm-mist); }
.cm-album__meta { display: flex; gap: 1.5rem; font-family: var(--cm-font-label); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cm-mist); }
.cm-album__meta i { color: var(--cm-accent); margin-right: 0.4rem; }
.cm-album__body { padding-bottom: clamp(4rem, 10vh, 8rem); }
.cm-album__gate { max-width: 460px; margin: 3rem auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; background: var(--cm-ink); border: 1px solid rgba(255,255,255,0.08); padding: 3rem 2rem; border-radius: var(--cm-radius); }
.cm-album__gate-icon { font-size: 2.2rem; color: var(--cm-accent); }
.cm-album__gate-title { font-family: var(--cm-font-display); font-size: 1.6rem; }
.cm-album__gate-text { color: var(--cm-mist); font-size: 0.95rem; }
.cm-album__gate-error { color: #e0796b; font-size: 0.85rem; }
.cm-album__gate-form { display: flex; gap: 0.6rem; width: 100%; margin-top: 0.5rem; }
.cm-album__gate-form input { flex: 1; background: var(--cm-black); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--cm-radius); padding: 0.9rem 1rem; color: var(--cm-paper); }
.cm-album__toolbar { display: flex; justify-content: flex-end; margin-bottom: 1.5rem; }
.cm-album__toolbar-note { font-size: 0.82rem; color: var(--cm-mist); }
.cm-album__toolbar-note i { color: var(--cm-accent); margin-right: 0.4rem; }
.cm-album__grid { columns: 3 260px; column-gap: 1.2rem; }
.cm-album__item { position: relative; margin: 0 0 1.2rem; break-inside: avoid; overflow: hidden; border-radius: var(--cm-radius); }
.cm-album__item img { width: 100%; display: block; transition: transform 1s var(--cm-ease); }
.cm-album__item:hover img { transform: scale(1.04); }
.cm-album__dl { position: absolute; top: 0.7rem; right: 0.7rem; width: 40px; height: 40px; border-radius: 50%; background: rgba(10,10,10,0.7); color: var(--cm-paper); display: grid; place-items: center; opacity: 0; transform: translateY(-6px); transition: all var(--cm-dur) var(--cm-ease); backdrop-filter: blur(6px); }
.cm-album__item:hover .cm-album__dl, .cm-album__slide:hover .cm-album__dl { opacity: 1; transform: translateY(0); }
.cm-album__dl:hover { background: var(--cm-accent); color: var(--cm-black); }
.cm-album__slideshow { border-radius: var(--cm-radius); overflow: hidden; }
.cm-album__slide { position: relative; aspect-ratio: 3/2; background: var(--cm-graphite); }
.cm-album__slide img { width: 100%; height: 100%; object-fit: contain; }
.cm-album__slideshow .swiper-button-prev, .cm-album__slideshow .swiper-button-next { color: var(--cm-paper); }
.cm-album__slideshow .swiper-pagination-bullet-active { background: var(--cm-accent); }

/* Album index */
.cm-album-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; }
.cm-album-card { display: flex; flex-direction: column; background: var(--cm-ink); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--cm-radius); overflow: hidden; transition: transform var(--cm-dur) var(--cm-ease), border-color var(--cm-dur) var(--cm-ease); }
.cm-album-card:hover { transform: translateY(-6px); border-color: rgba(201,165,92,0.4); }
.cm-album-card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--cm-graphite); }
.cm-album-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--cm-ease); }
.cm-album-card:hover .cm-album-card__media img { transform: scale(1.06); }
.cm-album-card__lock { position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; border-radius: 50%; background: rgba(10,10,10,0.7); color: var(--cm-accent); display: grid; place-items: center; backdrop-filter: blur(6px); }
.cm-album-card__body { padding: 1.4rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: 0.4rem; }
.cm-album-card__title { font-family: var(--cm-font-display); font-size: 1.35rem; }
.cm-album-card__count { font-family: var(--cm-font-label); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cm-mist); }
body.cm-light .cm-album__gate, body.cm-light .cm-album-card { background: #fff; border-color: rgba(0,0,0,0.08); }

/* --- Form status states -------------------------------------------------- */
.cm-form__status.is-success { color: var(--cm-accent); }
.cm-form__status.is-error { color: #e0796b; }
.cm-btn.is-loading, button.is-loading { opacity: 0.6; pointer-events: none; }

/* --- Search form --------------------------------------------------------- */
.search-form { display: flex; gap: 0.6rem; }
.search-form .search-field { flex: 1; background: var(--cm-ink); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--cm-radius); padding: 0.9rem 1.1rem; color: var(--cm-paper); font-family: var(--cm-font-body); }
.search-form .search-submit { background: var(--cm-paper); color: var(--cm-black); border: 0; border-radius: var(--cm-radius); padding: 0 1.4rem; font-family: var(--cm-font-label); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
body.cm-light .search-form .search-field { background: #fff; border-color: rgba(0,0,0,0.12); color: var(--cm-black); }

/* --- Extended responsive ------------------------------------------------- */
@media (max-width: 768px) {
  .cm-gallery-grid { columns: 2 160px; }
  .cm-album__grid { columns: 2 160px; }
  .cm-project__nav-title { font-size: 1rem; }
  .cm-baw__grip { width: 38px; height: 38px; }
}
@media (max-width: 520px) {
  .cm-gallery-grid, .cm-album__grid { columns: 1; }
  .cm-album__gate-form { flex-direction: column; }
  .cm-project__nav { flex-wrap: wrap; }
}