/* Inter for body, Oswald (condensed display) for big headings — a contractor-y
   pairing: workmanlike serif-free body, bold/condensed display for hero and
   section titles. Falls back to system stack if webfonts fail. */
:root {
    --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Oswald', Impact, 'Arial Narrow Bold', sans-serif;
}
html { font-family: var(--font-sans); }
body { font-family: var(--font-sans); }

/* Kill stray horizontal scroll on mobile. `clip` (not `hidden`) is used on
   purpose: it prevents sideways overflow WITHOUT creating a scroll container,
   so the sticky <header> keeps working. */
html { overflow-x: clip; }
/* Belt-and-suspenders: never let a media element push past the viewport. */
img, video, iframe, svg { max-width: 100%; }
/* Long single words in big condensed headings (e.g. "INSTALLATIONS") can exceed
   a 360px phone at text-5xl — allow them to break rather than overflow. */
h1, h2 { overflow-wrap: break-word; }
h1, h2, h3, h4 {
    font-family: var(--font-display);
    letter-spacing: 0.01em;
    font-weight: 600;
    text-transform: uppercase;
}
h1 { letter-spacing: 0.005em; }

/* Small CSS layer on top of Tailwind. Tailwind utilities handle most styling;
   anything that needs to style RICH-TEXT output (Quill HTML) lives here, since
   Tailwind utilities can't reach inside untouched HTML. */

/* Render rich-text content with sensible spacing even though we're loading
   Tailwind via the Play CDN (which doesn't include the typography plugin). */
.prose p { margin-bottom: 1em; line-height: 1.65; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; color: #0f172a; }
.prose em { font-style: italic; }
.prose a { color: #b45309; text-decoration: underline; } /* amber-700 */
.prose a:hover { color: #92400e; }                       /* amber-800 */
.prose ul, .prose ol { margin: 0.5em 0 1em 1.5em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 0.25em; }
.prose-lg p { font-size: 1.125rem; }

/* <select> with appearance-none — paint our own chevron arrow via background-image
   so the select height matches the <input> height across browsers (Safari/Chrome
   render native selects shorter than inputs even with identical padding). */
.form-select-kdc {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20' stroke='%2364748b' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    background-size: 1.1rem 1.1rem;
}

/* Testimonial carousel pills.
   Inactive dots are small grey circles. The active dot expands into a wider
   "track" pill with a sky-blue progress bar that fills over 6s and triggers
   the next slide on animationend. Hovering the carousel pauses the fill. */
.ytc-dot {
    position: relative;
    display: inline-block;
    height: 0.5rem;
    width: 0.5rem;
    border-radius: 9999px;
    background-color: rgb(203 213 225); /* slate-300 — track / inactive color */
    overflow: hidden;
    cursor: pointer;
    border: 0;
    padding: 0;
    transition: width 0.4s ease, background-color 0.3s ease;
}
.ytc-dot:hover {
    background-color: rgb(148 163 184); /* slate-400 */
}
.ytc-dot.is-active {
    width: 2.75rem;
    cursor: default;
    background-color: rgb(203 213 225);
}
.ytc-dot-bar {
    position: absolute;
    inset: 0;
    width: 0;
    background-color: rgb(245 158 11); /* amber-500 */
    border-radius: 9999px;
}
.ytc-dot.is-active .ytc-dot-bar {
    animation: ytc-fill 6s linear forwards;
}
.ytc-paused .ytc-dot.is-active .ytc-dot-bar {
    animation-play-state: paused;
}
@keyframes ytc-fill {
    from { width: 0%; }
    to   { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .ytc-dot.is-active .ytc-dot-bar { animation-duration: 12s; }
    .ytc-dot { transition: none; }
}

/* Gallery filter — pill bar + FLIP-animated item states. JS handles the
   actual layout animation; CSS owns the fade-in/out and display:none. */
.kdc-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    border-radius: 9999px;
    background: rgb(241 245 249); /* slate-100 */
    color: rgb(51 65 85);         /* slate-700 */
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.kdc-pill:hover {
    background: rgb(226 232 240);
    color: rgb(15 23 42);
}
.kdc-pill.is-active {
    background: rgb(251 191 36); /* amber-400 */
    color: #000;
}
.kdc-pill-count {
    display: inline-block;
    background: rgba(0, 0, 0, 0.08);
    color: inherit;
    font-size: 0.7rem;
    padding: 0.1rem 0.45rem;
    border-radius: 9999px;
    font-weight: 700;
}
.kdc-pill.is-active .kdc-pill-count {
    background: rgba(0, 0, 0, 0.18);
}
/* Hide native scrollbars on the pill toolbar (it still scrolls on overflow). */
.kdc-filter { scrollbar-width: none; }
.kdc-filter::-webkit-scrollbar { display: none; }

.kdc-gallery-item {
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.kdc-gallery-item.is-leaving {
    opacity: 0;
    transform: scale(0.92);
    pointer-events: none;
}
.kdc-gallery-item.is-hidden {
    display: none;
}

/* Lightbox — fullscreen photo viewer with prev/next + close. The grid tiles
   are <button>s so clicking them opens this. Body scroll locks while open. */
.kdc-lock-scroll,
.kdc-lock-scroll body {
    overflow: hidden;
}
.kdc-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: 4rem 1rem 1rem;
}
.kdc-lightbox.is-open {
    opacity: 1;
}
.kdc-lightbox[hidden] {
    display: none;
}
.kdc-lightbox-figure {
    margin: 0;
    width: 100%;
    max-width: min(1200px, 92vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
/* Fixed-size wrapper means the image always renders at a comfortable size,
   regardless of whether it's a 4000x3000 JPEG or a 200x150-default SVG.
   object-fit: contain preserves the image's aspect ratio inside this box. */
.kdc-lightbox-image-wrap {
    width: 100%;
    height: 70vh;
    max-height: 800px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #1f2937;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
}
.kdc-lightbox-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.kdc-lightbox-caption {
    color: #fff;
    text-align: center;
    max-width: 60ch;
}
.kdc-lightbox-category {
    font-family: 'Oswald', Impact, sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgb(252 211 77); /* amber-300 */
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.kdc-lightbox-title {
    font-size: 1rem;
    color: #fff;
}
.kdc-lightbox-counter {
    font-size: 0.75rem;
    color: rgb(148 163 184); /* slate-400 */
    margin-top: 0.5rem;
    letter-spacing: 0.08em;
}

/* Close & nav buttons */
.kdc-lightbox-close,
.kdc-lightbox-nav {
    position: absolute;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    backdrop-filter: blur(4px);
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.kdc-lightbox-close:hover,
.kdc-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.2);
}
.kdc-lightbox-close {
    top: 1rem;
    right: 1rem;
    width: 2.75rem;
    height: 2.75rem;
}
.kdc-lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
}
.kdc-lightbox-nav:hover {
    transform: translateY(-50%) scale(1.05);
}
.kdc-lightbox-prev { left: 1rem; }
.kdc-lightbox-next { right: 1rem; }
@media (min-width: 640px) {
    .kdc-lightbox-close { top: 1.5rem; right: 1.5rem; width: 3rem; height: 3rem; }
    .kdc-lightbox-prev  { left: 2rem; }
    .kdc-lightbox-next  { right: 2rem; }
}

/* Scroll-reveal — JS adds .is-revealed when the element enters the viewport.
   Default state is hidden + nudged down; revealed state is visible + at rest. */
[data-reveal],
[data-reveal-stagger] > .is-stagger-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    will-change: opacity, transform;
}
[data-reveal].is-revealed,
[data-reveal-stagger] > .is-stagger-item.is-revealed {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    [data-reveal],
    [data-reveal-stagger] > .is-stagger-item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}