/* =================================================================
   KAHLANI — Main stylesheet
   Loads AFTER style.css; owns typography, layout, cards, buttons,
   forms, and page-level styles. Elementor renders inside these.
   ================================================================= */

/* ---------- Base typography ---------- */
body, html {
    font-family: var(--kahlani-font);
    background: var(--kahlani-bg-1);
    color: var(--kahlani-text);
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--kahlani-font);
    font-weight: 800;
    color: var(--kahlani-text);
    margin: 0 0 .6em;
    line-height: 1.25;
}
h1 { font-size: clamp(2rem, 4vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
h4 { font-size: 1.15rem; }
p { margin: 0 0 1em; color: var(--kahlani-muted); }
a { transition: color var(--kahlani-t-fast); }
a:hover { color: var(--kahlani-red-hover); }
::selection { background: var(--kahlani-red); color: #fff; }

/* ---------- Screen reader only ---------- */
.screen-reader-text {
    border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
    height: 1px; width: 1px; overflow: hidden; position: absolute !important;
    word-wrap: normal;
}
.skip-link {
    position: absolute; top: -100px; right: 20px;
    background: var(--kahlani-red); color: #fff; padding: 8px 14px;
    z-index: 999999; border-radius: 0 0 var(--kahlani-radius-sm) var(--kahlani-radius-sm);
    transition: top var(--kahlani-t);
}
.skip-link:focus { top: 0; }

/* ---------- Layout container ---------- */
.kahlani-container {
    max-width: var(--kahlani-container);
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}
.kahlani-main {
    padding-top: 80px;
    min-height: 60vh;
}
body.kahlani-front .kahlani-main { padding-top: 0; }

/* ---------- Section base ---------- */
.kahlani-section {
    position: relative;
    overflow: hidden;
}

/* Elementor container overrides so our section classes cooperate */
.elementor-section-wrap > .elementor-section,
.elementor-widget-container { color: inherit; }

.kahlani-section-title,
.elementor-widget .kahlani-section-title .elementor-heading-title {
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--kahlani-text) !important;
    position: relative;
    display: inline-block;
    padding-bottom: 12px;
    margin-bottom: 18px;
}
.kahlani-section-title .elementor-heading-title::after,
.kahlani-section .elementor-heading-title.kahlani-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%);
    width: 60px;
    height: 3px;
    background: var(--kahlani-red);
    border-radius: 2px;
}

.kahlani-section-sub .elementor-widget-container,
.kahlani-section-sub p {
    color: var(--kahlani-muted);
    max-width: 700px;
    margin: 0 auto 40px;
    font-size: 1.05rem;
}

/* ---------- Hero (two-scroll sticky pin + scrim) ----------
   Structure produced by inc/elementor-seed.php `kahlani_build_hero`:
     .kahlani-hero                              (outer, 200vh)
       └─ .elementor-widget-html
             └─ .kahlani-hero-video-wrap        (STICKY, 100vh, layer 0)
                 └─ .kahlani-hero-video
                     ├─ <video>
                     ├─ .kahlani-hero-overlay   (base ambient dim)
                     └─ .kahlani-hero-scrim     (scroll-driven dim, opacity from JS)
       └─ .e-con.kahlani-hero-content            (ABSOLUTE, first 100vh, layer 2)
             ├─ heading .kahlani-hero-title
             ├─ text    .kahlani-hero-sub
             └─ .e-con.kahlani-hero-cta          (buttons)
   Only the outer .kahlani-hero counts as one section for the indicator. */
.kahlani-hero {
    color: #fff;
    /* Section base rule sets overflow:hidden — that BREAKS position:sticky
       on our video wrap. Override for hero specifically. */
    overflow: visible !important;
    position: relative;
    /* --kahlani-scrim-opacity is set from JS (0 → 1) as the hero scrolls. */
}
.kahlani-hero.kahlani-section { overflow: visible !important; }

/* The Elementor HTML-widget wrapper around the video becomes the sticky element.
   Target the first HTML widget inside the hero regardless of Elementor's outer
   wrapping ('e-con-inner' vs direct child in different Elementor versions). */
.kahlani-hero > .elementor-widget-html,
.kahlani-hero > .e-con-inner > .elementor-widget-html,
.kahlani-hero > .elementor-element.elementor-widget-html {
    position: sticky !important;
    top: 0;
    height: 100vh;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 0;
    pointer-events: none;
}
.kahlani-hero > .elementor-widget-html > .elementor-widget-container,
.kahlani-hero > .e-con-inner > .elementor-widget-html > .elementor-widget-container,
.kahlani-hero > .elementor-element.elementor-widget-html > .elementor-widget-container {
    height: 100%;
    padding: 0 !important;
    margin: 0 !important;
}

.kahlani-hero .kahlani-hero-video-wrap {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
.kahlani-hero-video-wrap .kahlani-hero-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    overflow: hidden;
}
.kahlani-hero-video-wrap video {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.55;
    filter: saturate(0.75) contrast(1.05);
    /* Subtle Ken-Burns during hero — held by JS variable so it pauses gracefully */
    transform: scale(calc(1 + var(--kahlani-hero-progress, 0) * 0.06));
    transition: transform 120ms linear;
    will-change: transform;
}
.kahlani-hero-video-wrap .kahlani-hero-overlay {
    position: absolute; inset: 0;
    background:
        radial-gradient(1200px 500px at 50% 10%, rgba(224,0,0,0.18), transparent 60%),
        linear-gradient(180deg, rgba(8,10,11,0.6) 0%, rgba(8,10,11,0.9) 70%, var(--kahlani-bg-1) 100%);
    pointer-events: none;
    /* The base overlay itself dims a bit as the curtain retracts so the
       revealed video feels more open. */
    opacity: calc(1 - var(--kahlani-hero-curtain, 0) * 0.55);
    transition: opacity 120ms linear;
}

/* --------- Curtain reveal (Matter Architects-inspired) ---------
   Two solid panels cover the top and bottom halves of the video at
   scroll = 0. As --kahlani-hero-curtain ramps 0 → 1 (JS, first ~55%
   of hero scroll) the top panel translates up off-screen and the
   bottom panel translates down off-screen. The video is revealed
   from the horizontal centerline outward. A thin brand-red hairline
   sits along the closing edge of each panel so at rest the seam
   reads as an architectural line, not a blank divider.
   Reasoning: single-property transform + opacity animation, GPU
   accelerated, no layout thrash; content-agnostic (works whatever
   the video is). */
.kahlani-hero-video-wrap .kahlani-hero-curtain {
    position: absolute;
    left: 0; right: 0;
    height: 50%;
    background: linear-gradient(180deg,
        #050607 0%,
        #0b0d0f 60%,
        #0f1114 100%);
    pointer-events: none;
    will-change: transform, opacity;
    z-index: 1;
    /* A little residual opacity kept so the reveal breathes rather
       than snaps to fully-off. */
    opacity: calc(1 - var(--kahlani-hero-curtain, 0) * 0.98);
    transition: transform 120ms linear, opacity 120ms linear;
}
.kahlani-hero-video-wrap .kahlani-hero-curtain::after {
    /* The architectural hairline along the meeting edge */
    content: '';
    position: absolute;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(224,0,0,0.55) 30%,
        rgba(224,0,0,0.85) 50%,
        rgba(224,0,0,0.55) 70%,
        transparent 100%);
    opacity: calc(1 - var(--kahlani-hero-curtain, 0));
}
.kahlani-hero-video-wrap .kahlani-hero-curtain--top {
    top: 0;
    transform: translateY(calc(var(--kahlani-hero-curtain, 0) * -100%));
}
.kahlani-hero-video-wrap .kahlani-hero-curtain--top::after {
    bottom: 0;
}
.kahlani-hero-video-wrap .kahlani-hero-curtain--bottom {
    bottom: 0;
    transform: translateY(calc(var(--kahlani-hero-curtain, 0) * 100%));
}
.kahlani-hero-video-wrap .kahlani-hero-curtain--bottom::after {
    top: 0;
}

/* Final scrim: darkens the (revealed) video into the page background
   after the curtain has retracted. Driven by --kahlani-hero-scrim (0
   → 1, JS, starts around 55% of hero scroll). Sequenced this way so
   the scroll story is: [curtain lifts → video breathes → scrim fades
   into next section]. */
.kahlani-hero-video-wrap .kahlani-hero-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(8,10,11,0) 0%,
        rgba(8,10,11,0.35) 45%,
        rgba(8,10,11,0.85) 80%,
        var(--kahlani-bg-1) 100%);
    opacity: var(--kahlani-hero-scrim, 0);
    transition: opacity 120ms linear;
    pointer-events: none;
    will-change: opacity;
    z-index: 2;
}
/* Inside Elementor editor, force curtain + scrim invisible so the
   editor canvas never looks dimmed or covered while editing. */
body.elementor-editor-active .kahlani-hero-video-wrap .kahlani-hero-scrim,
body.elementor-editor-active .kahlani-hero-video-wrap .kahlani-hero-curtain {
    opacity: 0 !important;
    transform: none !important;
}

/* Content overlay: pinned to the first viewport of the hero so it appears
   ON TOP of the sticky video wrap. Buttons remain interactive via
   pointer-events reset on children. */
.kahlani-hero .kahlani-hero-content,
.kahlani-hero > .e-con.kahlani-hero-content,
.kahlani-hero > .e-con-inner > .e-con.kahlani-hero-content {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
    pointer-events: none;
}
.kahlani-hero .kahlani-hero-content > * { pointer-events: auto; }

/* Legacy alias for the pre-v7 single-title (.kahlani-hero-title): if any
   cached _elementor_data still ships that class, it will look identical
   to the new .kahlani-hero-title-final. New content should use the rotator. */
.kahlani-hero .kahlani-hero-title .elementor-heading-title {
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    font-weight: 900;
    line-height: 1.15;
    background: linear-gradient(180deg, #fff 0%, #d0d0d0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
}
.kahlani-hero-sub p {
    font-size: 1.2rem;
    color: var(--kahlani-muted);
    max-width: 700px;
    margin-inline: auto;
}
.kahlani-hero-cta { position: relative; z-index: 2; }

/* Reduced-motion + editor: collapse the hero back to a single viewport so
   nothing surprises the visitor / the editor. Also hides the curtain
   panels and shows only the final rotating title. */
@media (prefers-reduced-motion: reduce) {
    .kahlani-hero { min-height: 100vh !important; }
    .kahlani-hero > .elementor-widget-html,
    .kahlani-hero > .e-con-inner > .elementor-widget-html {
        position: relative !important;
        height: 100vh;
    }
    .kahlani-hero .kahlani-hero-content { position: relative !important; height: auto; }
    .kahlani-hero .kahlani-hero-scrim,
    .kahlani-hero .kahlani-hero-curtain { display: none; }
    .kahlani-hero-video-wrap video { transform: none !important; }
}
body.elementor-editor-active .kahlani-hero { min-height: 100vh !important; }
body.elementor-editor-active .kahlani-hero > .elementor-widget-html,
body.elementor-editor-active .kahlani-hero > .e-con-inner > .elementor-widget-html {
    position: relative !important;
    height: auto;
}
body.elementor-editor-active .kahlani-hero .kahlani-hero-video-wrap { height: 60vh; }
body.elementor-editor-active .kahlani-hero .kahlani-hero-content {
    position: relative !important;
    height: auto;
}

/* ---------- Buttons ---------- */
.kahlani-btn,
.elementor-button.kahlani-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: var(--kahlani-radius);
    font-weight: 700;
    font-family: var(--kahlani-font);
    text-decoration: none;
    line-height: 1;
    transition: transform var(--kahlani-t), box-shadow var(--kahlani-t), background var(--kahlani-t), color var(--kahlani-t);
    border: none;
    cursor: pointer;
}
.kahlani-btn-primary,
.elementor-button.kahlani-btn-primary {
    background: var(--kahlani-red);
    color: #fff !important;
    box-shadow: var(--kahlani-shadow-md);
}
.kahlani-btn-primary:hover,
.elementor-button.kahlani-btn-primary:hover {
    background: var(--kahlani-red-hover);
    box-shadow: var(--kahlani-glow-red), var(--kahlani-shadow-md);
    transform: translateY(-2px);
    color: #fff;
}
.kahlani-btn-ghost,
.elementor-button.kahlani-btn-ghost {
    background: rgba(255,255,255,0.06);
    color: #fff !important;
    backdrop-filter: blur(8px);
}
.kahlani-btn-ghost:hover,
.elementor-button.kahlani-btn-ghost:hover {
    background: rgba(255,255,255,0.12);
    transform: translateY(-2px);
    color: #fff;
}
.kahlani-btn-outline,
.elementor-button.kahlani-btn-outline {
    background: transparent;
    color: var(--kahlani-red) !important;
    border: 1px solid var(--kahlani-red) !important;
}
.kahlani-btn-outline:hover,
.elementor-button.kahlani-btn-outline:hover {
    background: var(--kahlani-red);
    color: #fff !important;
    transform: translateY(-2px);
}
.kahlani-btn-lg,
.elementor-button.kahlani-btn-lg {
    padding: 18px 40px;
    font-size: 1.1rem;
}

/* ---------- Cards ---------- */
.kahlani-card,
.elementor-element.kahlani-card {
    background: var(--kahlani-bg-2);
    border-radius: var(--kahlani-radius);
    border: 1px solid var(--kahlani-border);
    padding: 32px 28px;
    transition: transform var(--kahlani-t), border-color var(--kahlani-t), box-shadow var(--kahlani-t), background var(--kahlani-t);
    position: relative;
    overflow: hidden;
}
.kahlani-card::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 4px;
    height: 0;
    background: var(--kahlani-red);
    transition: height var(--kahlani-t);
    border-radius: 0 var(--kahlani-radius) 0 0;
}
.kahlani-card:hover {
    transform: translateY(-6px);
    border-color: rgba(224,0,0,0.35);
    box-shadow: var(--kahlani-shadow-lg);
    background: var(--kahlani-bg-3);
}
.kahlani-card:hover::before { height: 100%; }

/* Service icons */
.kahlani-service-icon .elementor-icon {
    color: var(--kahlani-red);
    transition: transform var(--kahlani-t);
    display: inline-block;
}
.kahlani-card:hover .kahlani-service-icon .elementor-icon {
    transform: rotate(-8deg) scale(1.08);
}

.kahlani-service-title .elementor-heading-title,
.kahlani-project-title .elementor-heading-title,
.kahlani-step-title .elementor-heading-title {
    color: var(--kahlani-text);
    font-weight: 800;
    margin-bottom: 10px;
}
.kahlani-service-desc, .kahlani-project-cat, .kahlani-step-desc {
    color: var(--kahlani-muted);
}
.kahlani-service-link .elementor-button {
    background: transparent !important;
    color: var(--kahlani-red) !important;
    padding: 6px 0 !important;
    font-weight: 700;
    box-shadow: none !important;
}

/* Grid helpers so Elementor Container flex-row wraps cleanly */
.kahlani-cards-grid > .elementor-element,
.kahlani-cards-grid > .e-con {
    flex: 1 1 260px;
    min-width: 240px;
}
@media (min-width: 900px) {
    .kahlani-cards-4.kahlani-cards-grid > .elementor-element,
    .kahlani-cards-4.kahlani-cards-grid > .e-con {
        flex: 1 1 calc(25% - 24px);
    }
}

/* ---------- About ---------- */
.kahlani-about-image .elementor-widget-container img {
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5));
    max-width: 320px;
    margin: 0 auto;
}
.kahlani-about-features .elementor-icon-list-items .elementor-icon-list-item {
    padding: 8px 0;
}
.kahlani-about-features .elementor-icon-list-icon i {
    color: var(--kahlani-red);
}
.kahlani-about-features .elementor-icon-list-text {
    color: var(--kahlani-text);
    font-weight: 500;
}

/* ---------- Clients ---------- */
.kahlani-clients-grid > .elementor-element,
.kahlani-clients-grid > .e-con {
    flex: 1 1 140px;
    min-width: 130px;
    max-width: calc(16.66% - 20px);
}
.kahlani-client-item {
    background: var(--kahlani-bg-2) !important;
    border: 1px solid var(--kahlani-border);
    transition: transform var(--kahlani-t), border-color var(--kahlani-t);
}
.kahlani-client-item:hover {
    transform: translateY(-4px);
    border-color: rgba(224,0,0,0.35);
}
.kahlani-client-logo img {
    max-height: 60px;
    max-width: 100px;
    filter: grayscale(1) brightness(1.4);
    opacity: 0.7;
    transition: filter var(--kahlani-t), opacity var(--kahlani-t);
}
.kahlani-client-item:hover .kahlani-client-logo img {
    filter: grayscale(0) brightness(1);
    opacity: 1;
}
.kahlani-client-name p {
    font-size: 0.85rem;
    color: var(--kahlani-muted);
    margin: 6px 0 0;
}

/* ---------- Stats ---------- */
.kahlani-stats {
    background:
        radial-gradient(600px 300px at 50% 50%, rgba(224,0,0,0.1), transparent 70%),
        var(--kahlani-bg-0) !important;
}
.kahlani-stats-row > .elementor-element,
.kahlani-stats-row > .e-con {
    flex: 1 1 200px;
    min-width: 180px;
}
.kahlani-stat-counter .elementor-counter-number-wrapper {
    font-family: var(--kahlani-font) !important;
    font-size: clamp(2.5rem, 5vw, 4rem) !important;
    font-weight: 900 !important;
    color: var(--kahlani-red) !important;
    line-height: 1;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}
.kahlani-stat-counter .elementor-counter-title {
    color: var(--kahlani-text) !important;
    font-size: 1rem;
    font-weight: 500;
    margin-top: 12px;
    text-align: center;
}

/* ---------- Process steps ---------- */
.kahlani-step-number .elementor-heading-title {
    font-size: 3rem;
    font-weight: 900;
    color: var(--kahlani-red);
    opacity: 0.6;
    line-height: 1;
    margin-bottom: 8px;
}
.kahlani-step-icon .elementor-icon {
    color: var(--kahlani-red);
}

/* ---------- CTA section ---------- */
.kahlani-cta {
    background:
        radial-gradient(1200px 400px at 50% 100%, rgba(224,0,0,0.2), transparent 60%),
        var(--kahlani-bg-0) !important;
}
.kahlani-cta-title .elementor-heading-title {
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    font-weight: 900;
    color: #fff;
}
.kahlani-cta-sub p {
    font-size: 1.15rem;
    color: var(--kahlani-muted);
    max-width: 600px;
    margin: 0 auto 24px;
}

/* ---------- Contact ---------- */
.kahlani-contact-info .elementor-icon-list-icon i {
    color: var(--kahlani-red);
    font-size: 1.1rem;
}
.kahlani-contact-info .elementor-icon-list-text {
    color: var(--kahlani-text);
    font-weight: 500;
}

/* ---------- Contact form ---------- */
.kahlani-contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.kahlani-cf-title {
    color: var(--kahlani-text);
    margin: 0 0 8px;
    font-size: 1.4rem;
}
.kahlani-cf-status {
    padding: 12px 16px;
    border-radius: var(--kahlani-radius-sm);
    font-size: 0.95rem;
    font-weight: 500;
}
.kahlani-cf-status--success {
    background: rgba(0,200,80,0.12);
    color: #4be08a;
    border: 1px solid rgba(0,200,80,0.25);
}
.kahlani-cf-status--error {
    background: rgba(224,0,0,0.12);
    color: #ff6060;
    border: 1px solid rgba(224,0,0,0.25);
}
.kahlani-cf-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.kahlani-cf-row--2 {
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .kahlani-cf-row--2 { grid-template-columns: 1fr 1fr; }
}
.kahlani-contact-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--kahlani-muted);
    font-size: 0.9rem;
    font-weight: 500;
}
.kahlani-contact-form input,
.kahlani-contact-form textarea {
    font-family: var(--kahlani-font);
    background: var(--kahlani-bg-1);
    border: 1px solid var(--kahlani-border);
    color: var(--kahlani-text);
    padding: 12px 14px;
    border-radius: var(--kahlani-radius-sm);
    font-size: 0.98rem;
    transition: border-color var(--kahlani-t-fast), box-shadow var(--kahlani-t-fast);
    direction: rtl;
}
.kahlani-contact-form input:focus,
.kahlani-contact-form textarea:focus {
    outline: none;
    border-color: var(--kahlani-red);
    box-shadow: 0 0 0 3px rgba(224,0,0,0.15);
}
.kahlani-cf-btn {
    background: var(--kahlani-red);
    color: #fff;
    border: none;
    padding: 14px 28px;
    border-radius: var(--kahlani-radius);
    font-family: var(--kahlani-font);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: transform var(--kahlani-t), background var(--kahlani-t), box-shadow var(--kahlani-t);
    align-self: flex-start;
}
.kahlani-cf-btn:hover {
    background: var(--kahlani-red-hover);
    transform: translateY(-2px);
    box-shadow: var(--kahlani-glow-red);
}

/* ---------- Archive / Blog cards ---------- */
.kahlani-archive__hero,
.kahlani-search__hero {
    padding: 100px 0 40px;
    background: var(--kahlani-bg-0);
    text-align: center;
}
.kahlani-archive__title,
.kahlani-search__title {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    color: #fff;
}
.kahlani-archive__desc {
    color: var(--kahlani-muted);
    max-width: 700px;
    margin: 0 auto;
}
.kahlani-archive__grid,
.kahlani-search__grid,
.kahlani-post-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 60px 0;
}
@media (min-width: 700px) {
    .kahlani-archive__grid, .kahlani-search__grid, .kahlani-post-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (min-width: 1000px) {
    .kahlani-archive__grid, .kahlani-post-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.kahlani-archive-card, .kahlani-post-card {
    background: var(--kahlani-bg-2);
    border-radius: var(--kahlani-radius);
    border: 1px solid var(--kahlani-border);
    overflow: hidden;
    transition: transform var(--kahlani-t), border-color var(--kahlani-t), box-shadow var(--kahlani-t);
}
.kahlani-archive-card:hover, .kahlani-post-card:hover {
    transform: translateY(-6px);
    border-color: rgba(224,0,0,0.35);
    box-shadow: var(--kahlani-shadow-lg);
}
.kahlani-archive-card__link { display: block; color: inherit; }
.kahlani-archive-card__thumb, .kahlani-post-card__thumb {
    display: block;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--kahlani-bg-3);
}
.kahlani-archive-card__thumb img, .kahlani-post-card__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--kahlani-t-slow);
}
.kahlani-archive-card:hover .kahlani-archive-card__thumb img,
.kahlani-post-card:hover .kahlani-post-card__thumb img {
    transform: scale(1.05);
}
.kahlani-archive-card__thumb--empty {
    display: flex; align-items: center; justify-content: center;
    color: var(--kahlani-red); font-size: 3rem;
}
.kahlani-archive-card__body, .kahlani-post-card__body {
    padding: 24px;
}
.kahlani-archive-card__title, .kahlani-post-card__title {
    font-size: 1.15rem;
    margin: 0 0 10px;
    color: var(--kahlani-text);
}
.kahlani-post-card__title a { color: inherit; }
.kahlani-post-card__title a:hover { color: var(--kahlani-red); }
.kahlani-archive-card__excerpt, .kahlani-post-card__excerpt {
    color: var(--kahlani-muted);
    font-size: 0.95rem;
    margin: 0 0 14px;
    line-height: 1.7;
}
.kahlani-archive-card__more, .kahlani-post-card__more {
    color: var(--kahlani-red);
    font-weight: 700;
    font-size: 0.95rem;
}
.kahlani-post-card__meta {
    color: var(--kahlani-dim);
    font-size: 0.85rem;
    margin-bottom: 10px;
}

/* ---------- Pagination ---------- */
.kahlani-pagination {
    display: flex; justify-content: center;
    padding: 40px 0;
}
.kahlani-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px;
    margin: 0 4px;
    padding: 0 12px;
    background: var(--kahlani-bg-2);
    color: var(--kahlani-text);
    border-radius: var(--kahlani-radius-sm);
    text-decoration: none;
    transition: all var(--kahlani-t-fast);
}
.kahlani-pagination .page-numbers:hover,
.kahlani-pagination .page-numbers.current {
    background: var(--kahlani-red);
    color: #fff;
}

/* ---------- 404 ---------- */
.kahlani-404 {
    padding: 140px 0 100px;
    text-align: center;
    background: var(--kahlani-bg-0);
    min-height: 70vh;
    display: flex; align-items: center;
}
.kahlani-404__code {
    font-size: clamp(6rem, 15vw, 12rem);
    font-weight: 900;
    color: var(--kahlani-red);
    line-height: 1;
    margin-bottom: 16px;
    text-shadow: 0 8px 40px rgba(224,0,0,0.4);
}
.kahlani-404__title {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    color: #fff;
}
.kahlani-404__desc {
    color: var(--kahlani-muted);
    max-width: 600px;
    margin: 0 auto 30px;
}
.kahlani-404__actions {
    display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
    margin-bottom: 40px;
}
.kahlani-404__search { max-width: 500px; margin: 0 auto; }

/* ---------- Search form ---------- */
.kahlani-searchform {
    display: flex;
    background: var(--kahlani-bg-2);
    border: 1px solid var(--kahlani-border);
    border-radius: var(--kahlani-radius);
    overflow: hidden;
}
.kahlani-searchform input[type=search] {
    flex: 1;
    background: transparent;
    border: none;
    padding: 14px 18px;
    color: var(--kahlani-text);
    font-family: var(--kahlani-font);
    font-size: 1rem;
    direction: rtl;
}
.kahlani-searchform input[type=search]:focus { outline: none; }
.kahlani-searchform button {
    background: var(--kahlani-red);
    border: none;
    color: #fff;
    padding: 0 20px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background var(--kahlani-t);
}
.kahlani-searchform button:hover { background: var(--kahlani-red-hover); }

/* ---------- Single post/CPT ---------- */
.kahlani-single__hero {
    padding: 120px 0 40px;
    background: var(--kahlani-bg-0);
    text-align: center;
}
.kahlani-single__type {
    display: inline-block;
    padding: 4px 12px;
    background: var(--kahlani-red);
    color: #fff;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 16px;
}
.kahlani-single__title {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    color: #fff;
    margin: 0 auto 16px;
    max-width: 900px;
}
.kahlani-single__lead {
    color: var(--kahlani-muted);
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.05rem;
}
.kahlani-single__thumb {
    padding: 20px 0 0;
    background: var(--kahlani-bg-0);
}
.kahlani-single__thumb img {
    width: 100%;
    max-width: 100%;
    border-radius: var(--kahlani-radius);
    box-shadow: var(--kahlani-shadow-lg);
}
.kahlani-single__body {
    padding: 40px 0;
    max-width: 900px;
    margin: 0 auto;
}
.kahlani-single__body p,
.kahlani-single__body li {
    color: var(--kahlani-muted);
    line-height: 1.85;
    font-size: 1.05rem;
}
.kahlani-single__footer {
    padding: 40px 0 80px;
    text-align: center;
}
.kahlani-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--kahlani-red);
    color: #fff !important;
    border-radius: var(--kahlani-radius);
    font-weight: 700;
    transition: all var(--kahlani-t);
    text-decoration: none;
}
.kahlani-cta-link:hover {
    background: var(--kahlani-red-hover);
    transform: translateY(-2px);
    box-shadow: var(--kahlani-glow-red);
}

/* ---------- Empty state ---------- */
.kahlani-empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--kahlani-muted);
}
.kahlani-empty h2 { color: var(--kahlani-text); }

/* ---------- Comments ---------- */
.kahlani-comments {
    max-width: 900px;
    margin: 40px auto;
    padding: 40px 20px;
}
.kahlani-comments__title {
    color: var(--kahlani-text);
    margin-bottom: 20px;
}
.kahlani-comments__list { list-style: none; padding: 0; }
.kahlani-comments .comment-body {
    background: var(--kahlani-bg-2);
    padding: 20px;
    border-radius: var(--kahlani-radius);
    margin-bottom: 16px;
    border: 1px solid var(--kahlani-border);
}

/* =================================================================
   SCROLL SNAP — section-to-section (desktop only, home only)
   ================================================================= */

/* Snap anchors on every top-level section. Safe everywhere — snap only
   activates when the scrolling container declares a scroll-snap-type. */
body.kahlani-front .kahlani-section {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}
/* Hero starts at page top under the transparent header; other sections
   sit below the fixed 80px header, so their snap area is offset. */
body.kahlani-front .kahlani-section:not(.kahlani-hero):not(.kahlani-page-hero) {
    scroll-margin-top: 80px;
}
body.kahlani-front .kahlani-hero { scroll-margin-top: 0; }

/* Enable mandatory snap on the html scroller — desktop only, non-editor only.
   :has() is used so the entire rule collapses inside the Elementor editor
   iframe (where body carries .elementor-editor-active). A JS belt-and-
   suspenders fallback in main.js clears scroll-snap-type on html for
   older browsers without :has() support. */
@media (min-width: 992px) {
    html:has(body.kahlani-front:not(.elementor-editor-active)) {
        scroll-snap-type: y mandatory;
    }
}

/* Reduced motion — never force snap. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-snap-type: none !important; }
    body.kahlani-front .kahlani-section { scroll-snap-align: none !important; }
}

/* Explicit editor kill-switch (redundant but defensive). */
body.elementor-editor-active .kahlani-section {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
    scroll-margin-top: 0 !important;
}

/* =================================================================
   FIXED-POSITION CHROME OVERLAY
   Seeded as one Elementor Container at the top of the home tree
   (see inc/elementor-seed.php → kahlani_build_chrome). Turned into a
   viewport overlay here so its children (side-nav, progress bar,
   section badge) can position themselves against the viewport
   without leaving the Elementor tree.

   IMPORTANT: In the editor these rules collapse (see the very last
   body.elementor-editor-active block in this file + functions.php)
   so the container renders inline as a normal Elementor container.
   ================================================================= */
.kahlani-chrome-overlay {
    position: fixed !important;
    inset: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
    z-index: 40;
    /* Own children position themselves absolutely against this box. */
}
.kahlani-chrome-overlay > .e-con-inner,
.kahlani-chrome-overlay > .elementor-container {
    /* Elementor injects an inner wrapper; make it a passthrough for
       fixed layout so we can still address the direct child containers. */
    position: absolute;
    inset: 0;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none;
    max-width: none !important;
}

/* ---------- Side nav (vintage.agency-inspired vertical rail) ---------- */
.kahlani-chrome-overlay .kahlani-sidenav {
    position: absolute !important;
    top: 50%;
    /* Physical right in RTL matches the reading direction start —
       feels natural and mirrors the header CTA on the same side. */
    right: 24px;
    transform: translateY(-50%);
    padding: 12px 10px !important;
    margin: 0 !important;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    max-width: none !important;
    width: auto !important;
}
.kahlani-chrome-overlay .kahlani-sidenav > .e-con-inner {
    display: contents;
}
/* Each nav item is a real Elementor Button widget. Elementor puts our
   .kahlani-sidenav-item on the widget wrapper; we style the anchor
   inside. Keep the number monospaced-looking and the label optional
   so it feels architectural. */
.kahlani-chrome-overlay .kahlani-sidenav-item {
    margin: 0 !important;
    width: auto !important;
}
.kahlani-chrome-overlay .kahlani-sidenav-item .elementor-button {
    background: transparent !important;
    color: var(--kahlani-muted) !important;
    padding: 8px 12px !important;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 999px;
    box-shadow: none !important;
    transition: color var(--kahlani-t-fast), background var(--kahlani-t-fast), padding var(--kahlani-t-fast);
    text-decoration: none !important;
}
.kahlani-chrome-overlay .kahlani-sidenav-item .elementor-button .kahlani-sidenav-num {
    display: inline-block;
    min-width: 1.6em;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: inherit;
    opacity: 0.85;
}
.kahlani-chrome-overlay .kahlani-sidenav-item .elementor-button .kahlani-sidenav-label {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(6px);
    transition: max-width var(--kahlani-t), opacity var(--kahlani-t), transform var(--kahlani-t);
}
.kahlani-chrome-overlay .kahlani-sidenav-item .elementor-button:hover,
.kahlani-chrome-overlay .kahlani-sidenav-item.is-current .elementor-button {
    color: var(--kahlani-text) !important;
    background: rgba(224,0,0,0.12) !important;
}
.kahlani-chrome-overlay .kahlani-sidenav-item.is-current .elementor-button .kahlani-sidenav-num,
.kahlani-chrome-overlay .kahlani-sidenav-item:hover .elementor-button .kahlani-sidenav-num {
    color: var(--kahlani-red);
    opacity: 1;
}
.kahlani-chrome-overlay .kahlani-sidenav-item:hover .elementor-button .kahlani-sidenav-label,
.kahlani-chrome-overlay .kahlani-sidenav-item.is-current .elementor-button .kahlani-sidenav-label {
    max-width: 140px;
    opacity: 1;
    transform: none;
}

/* Mobile: hide the rail — the header nav is enough on narrow screens */
@media (max-width: 900px) {
    .kahlani-chrome-overlay .kahlani-sidenav { display: none; }
}

/* ---------- Progress bar (thin line at bottom of the viewport) ---------- */
.kahlani-chrome-overlay .kahlani-progress-track {
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
    pointer-events: none;
    max-width: none !important;
    width: 100% !important;
}
.kahlani-chrome-overlay .kahlani-progress-track > .e-con-inner {
    display: contents;
}
.kahlani-chrome-overlay .kahlani-progress-fill {
    position: absolute !important;
    inset: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: linear-gradient(90deg,
        rgba(224,0,0,0.55) 0%,
        var(--kahlani-red) 55%,
        var(--kahlani-red-hover) 100%);
    /* transform-origin: right for RTL — the fill grows from the reading-start edge */
    transform-origin: right center;
    transform: scaleX(var(--kahlani-scroll-progress, 0));
    transition: transform 60ms linear;
    pointer-events: none;
    will-change: transform;
    max-width: none !important;
    width: 100% !important;
    box-shadow: 0 0 12px rgba(224,0,0,0.35);
}

/* ---------- Section indicator badge (bottom-left corner) ---------- */
.kahlani-chrome-overlay .kahlani-section-badge {
    position: absolute !important;
    bottom: 22px;
    left: 24px;
    padding: 10px 18px !important;
    margin: 0 !important;
    background: rgba(8, 10, 11, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--kahlani-border);
    border-radius: 999px;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    max-width: none !important;
    width: auto !important;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 300ms ease-out, transform 300ms cubic-bezier(.2,.7,.2,1);
}
.kahlani-chrome-overlay .kahlani-section-badge.is-visible {
    opacity: 1;
    transform: none;
}
.kahlani-chrome-overlay .kahlani-section-badge > .e-con-inner {
    display: contents;
}
/* Each digit is a real Heading widget → target its .elementor-heading-title
   so authors can restyle from Elementor without touching selectors. */
.kahlani-chrome-overlay .kahlani-section-badge__current .elementor-heading-title,
.kahlani-chrome-overlay .kahlani-section-badge__total .elementor-heading-title {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    min-width: 1.6em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    margin: 0;
    display: inline-block;
    transition: opacity 180ms ease-out, transform 180ms cubic-bezier(.2,.7,.2,1);
}
.kahlani-chrome-overlay .kahlani-section-badge__current .elementor-heading-title {
    color: var(--kahlani-text);
}
.kahlani-chrome-overlay .kahlani-section-badge__total .elementor-heading-title {
    color: var(--kahlani-muted);
}
.kahlani-chrome-overlay .kahlani-section-badge__sep p,
.kahlani-chrome-overlay .kahlani-section-badge__sep {
    margin: 0 !important;
    color: var(--kahlani-red);
    font-weight: 900;
    font-size: 0.95rem;
    line-height: 1;
}
.kahlani-chrome-overlay .kahlani-section-badge.is-changing .kahlani-section-badge__current .elementor-heading-title {
    opacity: 0;
    transform: translateY(-8px);
}

@media (max-width: 700px) {
    .kahlani-chrome-overlay .kahlani-section-badge {
        bottom: 14px;
        left: 14px;
        padding: 8px 14px !important;
    }
    .kahlani-chrome-overlay .kahlani-section-badge__current .elementor-heading-title,
    .kahlani-chrome-overlay .kahlani-section-badge__total .elementor-heading-title {
        font-size: 0.82rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .kahlani-chrome-overlay .kahlani-section-badge,
    .kahlani-chrome-overlay .kahlani-section-badge__current .elementor-heading-title,
    .kahlani-chrome-overlay .kahlani-section-badge__total .elementor-heading-title,
    .kahlani-chrome-overlay .kahlani-progress-fill,
    .kahlani-chrome-overlay .kahlani-sidenav-item .elementor-button,
    .kahlani-chrome-overlay .kahlani-sidenav-item .elementor-button .kahlani-sidenav-label {
        transition: none !important;
    }
    .kahlani-chrome-overlay .kahlani-section-badge { opacity: 1; transform: none; }
}

/* Belt-and-suspenders editor kill switch: neutralise fixed positioning so
   the container renders inline in the editor canvas. functions.php also
   emits an inline copy of these rules on elementor/editor/after_enqueue_styles. */
body.elementor-editor-active .kahlani-chrome-overlay,
body.elementor-editor-active .kahlani-chrome-overlay .kahlani-sidenav,
body.elementor-editor-active .kahlani-chrome-overlay .kahlani-progress-track,
body.elementor-editor-active .kahlani-chrome-overlay .kahlani-section-badge {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    pointer-events: auto !important;
    opacity: 1 !important;
}
body.elementor-editor-active .kahlani-chrome-overlay .kahlani-progress-fill {
    transform: scaleX(1) !important;
    position: relative !important;
    height: 3px;
}

/* =================================================================
   HERO TITLE ROTATOR (vintage.agency-inspired)
   The rotator container carries multiple real Elementor Heading
   widgets; each is stacked absolutely inside and JS shows one at a
   time. Reduced-motion / editor / no-JS all fall back to showing
   only the final title.
   ================================================================= */
.kahlani-hero .kahlani-hero-title-rotator {
    position: relative;
    width: 100%;
    /* Explicit height so the stacked absolute titles have room to
       render; the value is tuned to match the H1 clamp() below. */
    min-height: clamp(3rem, 6vw, 5.2rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}
.kahlani-hero .kahlani-hero-title-rotator > .e-con-inner {
    display: contents;
}
.kahlani-hero .kahlani-hero-rotating-title {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 380ms cubic-bezier(.2,.7,.2,1),
                transform 380ms cubic-bezier(.2,.7,.2,1);
    will-change: opacity, transform;
    pointer-events: none;
}
.kahlani-hero .kahlani-hero-rotating-title.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
/* The final title inherits the existing gradient-fill treatment
   that used to live on .kahlani-hero-title so the look is preserved. */
.kahlani-hero .kahlani-hero-rotating-title .elementor-heading-title {
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    font-weight: 900;
    line-height: 1.15;
    background: linear-gradient(180deg, #fff 0%, #d0d0d0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
    margin: 0;
}
/* Non-final rotating titles (the "chapter" flashes) are a touch
   smaller and monochrome for a stagier feel. */
.kahlani-hero .kahlani-hero-rotating-title:not(.kahlani-hero-title-final) .elementor-heading-title {
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    background: none;
    -webkit-text-fill-color: initial;
    color: #FFFFFF;
    opacity: 0.92;
}

/* No-JS fallback: without any .is-active toggles, show ONLY the final
   title so the page still looks intentional. */
.kahlani-hero .kahlani-hero-rotating-title.kahlani-hero-title-final {
    opacity: 1;
    transform: none;
}
.kahlani-hero .kahlani-hero-title-rotator:not(.is-ready) .kahlani-hero-rotating-title:not(.kahlani-hero-title-final) {
    opacity: 0;
}

/* Skip button: only visible while rotation is running */
.kahlani-hero .kahlani-hero-skip {
    margin-top: 10px !important;
    opacity: 1;
    transition: opacity 300ms ease-out, transform 300ms ease-out;
}
.kahlani-hero .kahlani-hero-skip .elementor-button {
    padding: 6px 14px !important;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}
.kahlani-hero-content.is-rotator-done .kahlani-hero-skip,
.kahlani-hero:not(.is-rotator-active) .kahlani-hero-skip {
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
}
/* While the rotator is running, keep the subtitle and CTAs deferred
   so attention stays on the title sequence. */
.kahlani-hero-content.is-rotator-active .kahlani-hero-sub,
.kahlani-hero-content.is-rotator-active .kahlani-hero-cta {
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity 500ms cubic-bezier(.2,.7,.2,1),
                transform 500ms cubic-bezier(.2,.7,.2,1);
}
.kahlani-hero-content.is-rotator-done .kahlani-hero-sub,
.kahlani-hero-content.is-rotator-done .kahlani-hero-cta {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: opacity 600ms cubic-bezier(.2,.7,.2,1) 60ms,
                transform 600ms cubic-bezier(.2,.7,.2,1) 60ms;
}

/* Editor + reduced-motion: only the final title, no skip button.
   The rotator container becomes a static box so all headings show
   inline for the author to click and edit. */
@media (prefers-reduced-motion: reduce) {
    .kahlani-hero .kahlani-hero-title-rotator {
        min-height: 0;
    }
    .kahlani-hero .kahlani-hero-rotating-title {
        position: static !important;
        opacity: 0;
        transform: none;
        display: none;
    }
    .kahlani-hero .kahlani-hero-rotating-title.kahlani-hero-title-final {
        display: flex;
        opacity: 1;
    }
    .kahlani-hero .kahlani-hero-skip { display: none; }
    .kahlani-hero-content .kahlani-hero-sub,
    .kahlani-hero-content .kahlani-hero-cta {
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
    }
}
body.elementor-editor-active .kahlani-hero .kahlani-hero-title-rotator {
    min-height: 0 !important;
}
body.elementor-editor-active .kahlani-hero .kahlani-hero-rotating-title {
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    margin: 6px 0 !important;
}