:root {
    --kl-cream: #f7f6f3;
    --kl-charcoal: #2c2c2c;
    --kl-gold: #d4af37;
    --kl-teal: #1b6b63;
    --kl-sage: #556e43;
    --kl-dark: #1a2022;
    --kl-line: rgba(44, 44, 44, 0.09);
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html,
body {
    background-color: var(--kl-cream);
    color: var(--kl-charcoal);
    font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-feature-settings: "ss01", "cv11";
}

body {
    margin: 0;
    overflow-x: hidden;
}

/* Smooth scroll (Lenis) */
html.lenis,
html.lenis body {
    height: auto;
}
.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}
.lenis.lenis-stopped {
    overflow: hidden;
}
.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* Selection */
::selection {
    background: #d4af37;
    color: #1a2022;
}

/* Typography helpers */
.font-display {
    font-family: "Playfair Display", ui-serif, Georgia, serif;
    letter-spacing: -0.015em;
}

.font-mono-alt {
    font-family:
        "JetBrains Mono", "Menlo", ui-monospace, SFMono-Regular, monospace;
    letter-spacing: 0.02em;
}

/* Noise + grain background */
.bg-grain {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox=%270 0 200 200%27 xmlns=%27http://www.w3.org/2000/svg%27><filter id=%27n%27><feTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%272%27 stitchTiles=%27stitch%27/><feColorMatrix values=%270 0 0 0 0.17 0 0 0 0 0.17 0 0 0 0 0.17 0 0 0 0.35 0%27/></filter><rect width=%27100%25%27 height=%27100%25%27 filter=%27url%28%23n%29%27 opacity=%270.55%27/></svg>");
    background-size: 220px 220px;
}

/* Reveal mask helper (hero headline lines) */
.reveal-mask {
    overflow: hidden;
    display: inline-block;
    line-height: 1;
    padding-bottom: 0.12em;
    margin-bottom: -0.12em;
}

/* Underline link */
.link-underline {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.link-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform-origin: right center;
    transform: scaleX(0);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.link-underline:hover::after {
    transform-origin: left center;
    transform: scaleX(1);
}

/* Marquee: outlined display text */
.text-outline {
    color: transparent;
    -webkit-text-stroke: 1px rgba(44, 44, 44, 0.55);
}

/* Hero gradient */
.hero-gradient {
    background:
        radial-gradient(
            1200px 600px at 85% 15%,
            rgba(212, 175, 55, 0.12),
            transparent 60%
        ),
        radial-gradient(
            900px 500px at 10% 85%,
            rgba(85, 110, 67, 0.1),
            transparent 60%
        ),
        linear-gradient(180deg, #faf9f6 0%, #f7f6f3 100%);
}

/* Photo frame treatment */
.frame-clip {
    clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 94%);
}

/* Card hover shine */
.card-shine {
    position: relative;
    overflow: hidden;
}
.card-shine::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent 30%,
        rgba(212, 175, 55, 0.08) 50%,
        transparent 70%
    );
    transform: translateX(-100%);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}
.card-shine:hover::before {
    transform: translateX(100%);
}

/* Cursor dot */
.kl-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    background: var(--kl-gold);
    border-radius: 999px;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: multiply;
    transform: translate(-50%, -50%);
    transition:
        width 0.25s ease,
        height 0.25s ease,
        background 0.25s ease;
}
.kl-cursor.kl-cursor-lg {
    width: 44px;
    height: 44px;
    background: rgba(212, 175, 55, 0.35);
}
@media (max-width: 768px) {
    .kl-cursor {
        display: none;
    }
}

/* ==========================================================================
   Marquee ticker (principles band)
   ========================================================================== */
.marquee-row {
    display: flex;
    width: max-content;
    animation: marquee-scroll 60s linear infinite;
}
.marquee-row:hover {
    animation-play-state: paused;
}
@keyframes marquee-scroll {
    to {
        transform: translateX(-50%);
    }
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
[data-reveal] {
    opacity: 0;
    transform: translateY(var(--reveal-y, 24px));
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        transition-duration: 0.001ms !important;
    }
    .marquee-row {
        animation: none;
    }
}

/* Hero headline mask reveal (plays once on load) */
.reveal-mask > span {
    display: inline-block;
    transform: translateY(110%);
    animation: mask-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: var(--mask-delay, 0s);
}
@keyframes mask-in {
    to {
        transform: translateY(0);
    }
}

/* ==========================================================================
   Case-study diagram line-draw
   ========================================================================== */
.diagram-draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.diagram-ring {
    opacity: 0;
    transition: opacity 1s ease;
}
.diagram-marker {
    opacity: 0;
    transition:
        opacity 0.5s ease,
        transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.diagram-marker-final {
    opacity: 0;
    transition:
        opacity 0.6s ease,
        transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.case-study-visual.is-in .diagram-draw {
    stroke-dashoffset: 0;
}
.case-study-visual.is-in .diagram-ring {
    opacity: 1;
}
.case-study-visual.is-in .diagram-marker {
    opacity: 1;
    transform: scale(1);
}
.case-study-visual.is-in .diagram-marker-final {
    opacity: 1;
    transform: scale(1);
}

/* ==========================================================================
   Mobile nav
   ========================================================================== */
.mobile-nav {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition:
        height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.3s ease;
}
.mobile-nav.is-open {
    opacity: 1;
}

.nav-toggle-line {
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-line:first-child {
    transform: translateY(4px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-line:last-child {
    transform: translateY(-4px) rotate(-45deg);
}

/* ==========================================================================
   Contact form success state
   ========================================================================== */
.form-success {
    display: none;
}
.form-success.is-visible {
    display: block;
}
.form-fields.is-hidden {
    display: none;
}