@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Archivo+Expanded:wght@700;800;900&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap");
/* ==========================================================================
 BASE.CSS - Design Tokens, Reset, Typography, Utilities
 Sell Chicago Properties
 Mobile-first foundation - Chicago Summer theme
 ========================================================================== */

/* ---------------------------------------------------------------------------
 1. CUSTOM PROPERTIES (Design Tokens)
 --------------------------------------------------------------------------- */

:root {
 /* Backgrounds */
 --color-white: #FFFFFF;
 --color-cream: #FAF8F5;
 --color-sand: #F3EDE4;
 --color-sand-light: #F9F6F1;

 /* Text */
 --color-text: #1F2937;
 --color-text-light: #4B5563;
 --color-text-muted: #6B7280;

 /* Brand */
 --color-navy: #1B2A4A;
 --color-navy-light: #2A3D66;
 --color-navy-dark: #111D33;

 /* Accent (default = morning, overridden by time-of-day classes) */
 --color-accent: #D4A843;
 --color-accent-dark: #B8912F;
 --color-accent-light: #FDF6E3;
 --color-accent-hover: #C09030;

 /* Vibrant Section Backgrounds */
 --color-mint: #E8F5F0;
 --color-mint-dark: #D0EBE3;
 --color-sky: #EBF4FF;
 --color-sky-dark: #D6E8FC;
 --color-peach: #FFF5EE;
 --color-peach-dark: #FFE8D6;
 --color-lavender: #F3EEFF;
 --color-warm-gold: #FDF8EC;

 /* Functional */
 --color-success: #059669;
 --color-success-light: #D1FAE5;
 --color-error: #DC2626;
 --color-error-light: #FEE2E2;
 --color-border: #E5E1DB;

 /* Typography */
 --font-heading: "Archivo", "Archivo Expanded", system-ui, -apple-system, sans-serif;
 --font-body: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

 --fw-regular: 400;
 --fw-medium: 500;
 --fw-semibold: 600;
 --fw-bold: 700;

 /* Spacing (8px scale) */
 --space-1: 0.25rem;
 --space-2: 0.5rem;
 --space-3: 0.75rem;
 --space-4: 1rem;
 --space-5: 1.5rem;
 --space-6: 2rem;
 --space-8: 3rem;
 --space-10: 4rem;
 --space-12: 5rem;
 --space-16: 6rem;

 /* Border Radius - sharp, structured, modern */
 --radius-sm: 3px;
 --radius-md: 6px;
 --radius-lg: 8px;
 --radius-full: 9999px;

 /* Shadows */
 --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
 --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
 --shadow-lg: 0 12px 32px rgba(0,0,0,0.1);

 /* Transitions */
 --transition-fast: 150ms ease;
 --transition-base: 250ms ease;

 /* Layout */
 --container-max: 1200px;
 --container-narrow: 720px;
 --nav-height: 72px;
}

/* Time-of-day theme overrides */
.time-morning {
 --color-accent: #D4A843;
 --color-accent-dark: #B8912F;
 --color-accent-light: #FDF6E3;
 --color-accent-hover: #C09030;
}

.time-day {
 --color-accent: #2E8B57;
 --color-accent-dark: #1E6B3F;
 --color-accent-light: #E8F5E9;
 --color-accent-hover: #267A4C;
}

.time-evening {
 --color-accent: #E07C3E;
 --color-accent-dark: #C56A2E;
 --color-accent-light: #FFF3E6;
 --color-accent-hover: #D06E30;
}

.time-night {
 --color-accent: #5B8DB8;
 --color-accent-dark: #3A6F99;
 --color-accent-light: #E8F0F8;
 --color-accent-hover: #4D7FA8;
}


/* ---------------------------------------------------------------------------
 2. MODERN CSS RESET
 --------------------------------------------------------------------------- */

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

html {
 -webkit-text-size-adjust: 100%;
 -moz-text-size-adjust: 100%;
 text-size-adjust: 100%;
 scroll-behavior: smooth;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

body {
 min-height: 100vh;
 overflow-x: clip;  /* clip (not hidden) keeps position:sticky working */
 font-family: var(--font-body);
 font-size: 1rem;
 font-weight: var(--fw-regular);
 line-height: 1.7;
 color: var(--color-text);
 background-color: var(--color-cream);
}

img,
picture,
video,
canvas,
svg {
 display: block;
 max-width: 100%;
 height: auto;
}

input,
button,
textarea,
select {
 font: inherit;
 color: inherit;
}

button {
 cursor: pointer;
 background: none;
 border: none;
}

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

ul,
ol {
 list-style: none;
}

table {
 border-collapse: collapse;
 border-spacing: 0;
}

fieldset {
 border: none;
}

/* Remove default search input styling */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
 -webkit-appearance: none;
}

/* Prevent textarea from resizing horizontally */
textarea {
 resize: vertical;
}

/* Remove animations for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
 *,
 *::before,
 *::after {
 animation-duration: 0.01ms !important;
 animation-iteration-count: 1 !important;
 transition-duration: 0.01ms !important;
 scroll-behavior: auto !important;
 }
}


/* ---------------------------------------------------------------------------
 3. TYPOGRAPHY
 --------------------------------------------------------------------------- */

h1, h2, h3, h4 {
 font-family: var(--font-heading);
 color: var(--color-navy);
}

h1 {
 font-size: 2rem;
 font-weight: var(--fw-bold);
 line-height: 1.15;
 letter-spacing: -0.02em;
 margin-bottom: var(--space-5);
}

h2 {
 font-size: 1.625rem;
 font-weight: var(--fw-bold);
 line-height: 1.2;
 margin-bottom: var(--space-4);
}

h3 {
 font-size: 1.25rem;
 font-weight: var(--fw-semibold);
 line-height: 1.3;
 margin-bottom: var(--space-3);
}

h4 {
 font-size: 1.125rem;
 font-weight: var(--fw-semibold);
 line-height: 1.3;
 margin-bottom: var(--space-3);
}

/* Desktop typography */
@media (min-width: 768px) {
 h1 { font-size: 2.625rem; }
 h2 { font-size: 2rem; }
 h3 { font-size: 1.5rem; }
 h4 { font-size: 1.25rem; }
}

p {
 color: var(--color-text-light);
 margin-bottom: 1rem;
}

p:last-child {
 margin-bottom: 0;
}

strong, b {
 font-weight: var(--fw-semibold);
}

small {
 font-size: 0.875rem;
}

/* --- Links --- */
a {
 color: var(--color-navy);
 transition: color var(--transition-fast);
}

a:hover {
 color: var(--color-accent);
}

a:focus-visible {
 outline: 2px solid var(--color-accent);
 outline-offset: 2px;
 border-radius: 2px;
}


/* ---------------------------------------------------------------------------
 4. UTILITY CLASSES
 --------------------------------------------------------------------------- */

/* Text alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Text color */
.text-accent { color: var(--color-accent); }
.text-navy { color: var(--color-navy); }
.text-white { color: var(--color-white); }
.text-muted { color: var(--color-text-muted); }
.text-light { color: var(--color-text-light); }

/* Font weight */
.fw-medium { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold { font-weight: var(--fw-bold); }

/* Accessibility */
.visually-hidden,
.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border: 0;
}

/* Skip link (shows on focus) */
.skip-link {
 position: absolute;
 top: -100%;
 left: var(--space-4);
 z-index: 1000;
 padding: var(--space-2) var(--space-4);
 background: var(--color-navy);
 color: var(--color-white);
 border-radius: var(--radius-sm);
 font-weight: var(--fw-semibold);
}

.skip-link:focus {
 top: var(--space-2);
}

/* Misc utilities */
.no-scroll { overflow: hidden; }
.mx-auto { margin-left: auto; margin-right: auto; }

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }


/* ---------------------------------------------------------------------------
 5. MASTER EASING & ANIMATION SYSTEM
 Inspired by lynxeye.com + engaged.be - premium easeOutExpo transitions
 --------------------------------------------------------------------------- */

:root {
 --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
 --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
 --duration-reveal: 1s;
 --duration-hover: 0.6s;
 --stagger-delay: 0.08s;
}


/* --- Base reveal (fade-up) --- */
.reveal {
 opacity: 0;
 transform: translateY(40px);
 transition: opacity var(--duration-reveal) var(--ease-out-expo),
 transform var(--duration-reveal) var(--ease-out-expo);
}
.reveal.visible {
 opacity: 1;
 transform: translateY(0);
}

/* --- Slide from left --- */
.reveal-left {
 opacity: 0;
 transform: translateX(-60px);
 transition: opacity var(--duration-reveal) var(--ease-out-expo),
 transform var(--duration-reveal) var(--ease-out-expo);
}
.reveal-left.visible {
 opacity: 1;
 transform: translateX(0);
}

/* --- Slide from right --- */
.reveal-right {
 opacity: 0;
 transform: translateX(60px);
 transition: opacity var(--duration-reveal) var(--ease-out-expo),
 transform var(--duration-reveal) var(--ease-out-expo);
}
.reveal-right.visible {
 opacity: 1;
 transform: translateX(0);
}

/* --- Scale in --- */
.reveal-scale {
 opacity: 0;
 transform: scale(0.92);
 transition: opacity var(--duration-reveal) var(--ease-out-expo),
 transform var(--duration-reveal) var(--ease-out-expo);
}
.reveal-scale.visible {
 opacity: 1;
 transform: scale(1);
}

/* --- Clip-path reveal (image wipe from bottom) --- */
.reveal-clip {
 clip-path: inset(100% 0 0 0);
 transition: clip-path 1.2s var(--ease-out-expo);
}
.reveal-clip.visible {
 clip-path: inset(0 0 0 0);
}

/* --- Clip-path reveal from left --- */
.reveal-clip-left {
 clip-path: inset(0 100% 0 0);
 transition: clip-path 1.2s var(--ease-out-expo);
}
.reveal-clip-left.visible {
 clip-path: inset(0 0 0 0);
}

/* --- Fade only (no transform) --- */
.reveal-fade {
 opacity: 0;
 transition: opacity 0.8s var(--ease-out-expo);
}
.reveal-fade.visible {
 opacity: 1;
}


/* --- Staggered children ---
 Add .stagger to a parent; children with .reveal get sequential delays
 Delay is applied via inline --delay custom property set by JS */
.stagger > .reveal,
.stagger > .reveal-left,
.stagger > .reveal-right,
.stagger > .reveal-scale,
.stagger > .reveal-clip,
.stagger > .reveal-clip-left,
.stagger > .reveal-fade {
 transition-delay: var(--delay, 0s);
}


/* --- Split-text word reveal ---
 JS splits heading text into <span class="word"> wrappers */
.split-text .word {
 display: inline-block;
 overflow: hidden;
}
.split-text .word-inner {
 display: inline-block;
 transform: translateY(110%);
 transition: transform 0.9s var(--ease-out-expo);
 transition-delay: var(--word-delay, 0s);
}
.split-text.visible .word-inner {
 transform: translateY(0);
}


/* --- Parallax container --- */
.parallax-bg {
 will-change: transform;
 transition: transform 0.1s linear;
}


/* --- Counter animation placeholder ---
 JS handles the actual counting; this just styles the number */
.counter[data-target] {
 font-variant-numeric: tabular-nums;
}


/* --- View Transitions API (modern cross-document page transitions) --- */
@view-transition {
 navigation: auto;
}

::view-transition-old(root) {
 animation: slide-out 0.35s var(--ease-out-expo) forwards;
}

::view-transition-new(root) {
 animation: slide-in 0.35s var(--ease-out-expo) forwards;
}

@keyframes slide-out {
 from { opacity: 1; transform: translateY(0); }
 to { opacity: 0; transform: translateY(-20px); }
}

@keyframes slide-in {
 from { opacity: 0; transform: translateY(20px); }
 to { opacity: 1; transform: translateY(0); }
}

/* Named view transitions for persistent elements
   2026-05-27: .nav view-transition-name commented because it creates a
   containing block that clips dropdown menus. Footer keeps it (no dropdowns). */
/* .nav { view-transition-name: site-nav; } */
.footer { view-transition-name: site-footer; }

::view-transition-old(site-nav),
::view-transition-new(site-nav),
::view-transition-old(site-footer),
::view-transition-new(site-footer) {
 animation: none;
}


/* --- Scroll-driven section transitions (modern "block" feel) ---
 Progressive enhancement: only in browsers supporting scroll-timeline.
 IMPORTANT: Exclude elements that use the .reveal system (JS-driven
 IntersectionObserver transitions). CSS animation overrides CSS transition
 on the same properties (opacity, transform), which prevents .reveal.visible
 from working. Use :not() to avoid the conflict. */
@supports (animation-timeline: view()) {
 .section:not(.reveal):not(.reveal-left):not(.reveal-right):not(.reveal-scale):not(.reveal-clip):not(.reveal-clip-left):not(.reveal-fade) {
 animation: section-enter linear both;
 animation-timeline: view();
 animation-range: entry 0% entry 30%;
 }

 @keyframes section-enter {
 from {
 opacity: 0.3;
 transform: translateY(30px) scale(0.98);
 }
 to {
 opacity: 1;
 transform: translateY(0) scale(1);
 }
 }

 /* Cards get a staggered scroll-driven entrance -
 skip cards that also carry a .reveal class */
 .booking-card:not(.reveal):not(.reveal-scale),
 .situation-card:not(.reveal):not(.reveal-scale),
 .step-card:not(.reveal):not(.reveal-scale),
 .testimonial-card:not(.reveal):not(.reveal-scale) {
 animation: card-enter linear both;
 animation-timeline: view();
 animation-range: entry 0% entry 40%;
 }

 @keyframes card-enter {
 from {
 opacity: 0;
 transform: translateY(40px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
 }

 /* Keep first-viewport heroes stable for LCP. Richer scroll motion is scoped
 to explicit data-fx sections and the property page engine. */
}

/* --- Named view transitions for element-level page morphs --- */
.hero__title { view-transition-name: hero-title; }
.hero__form-wrap { view-transition-name: hero-form; }
/* Multiple section labels can appear on a page; naming all of them breaks
   native page transitions in Chromium with duplicate view-transition-name. */
/* .section__label { view-transition-name: section-label; } */

/* Hero elements crossfade smoothly between pages */
::view-transition-old(hero-title),
::view-transition-new(hero-title) {
 animation-duration: 0.4s;
 animation-timing-function: var(--ease-out-expo);
}

::view-transition-old(hero-form),
::view-transition-new(hero-form) {
 animation-duration: 0.3s;
}


/* --- Reduced motion: disable all animations --- */
@media (prefers-reduced-motion: reduce) {
 .reveal, .reveal-left, .reveal-right, .reveal-scale,
 .reveal-clip, .reveal-clip-left, .reveal-fade {
 opacity: 1;
 transform: none;
 clip-path: none;
 transition: none;
 }
 .split-text .word-inner {
 transform: none;
 transition: none;
 }
 .parallax-bg {
 transition: none;
 will-change: auto;
 }
 .section,
 .booking-card,
 .situation-card,
 .step-card,
 .testimonial-card,
 .hero {
 animation: none !important;
 }
 @view-transition {
 navigation: none;
 }
}