/* =====================
--- DEFAULTS + SETUP ---
======================== */

    /* --- Fonts --- */

@font-face { font-family: 'Inter'; font-style: normal; src: url('assets/fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype'); font-weight: 100 900; }
@font-face { font-family: 'Inter'; font-style: italic; src: url('assets/fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype'); font-weight: 100 900; }
@font-face { font-family: 'Grotesk'; font-style: normal; src: url('assets/fonts/Space_Grotesk/SpaceGrotesk-VariableFont_wght.ttf') format('truetype'); font-weight: 300 700;}

    /* --- Reset & Base Tags --- */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--site-spacing); background-color: var(--primary-bg); color: var(--text-main); }
body { font-family: var(--font-main); overflow-x: hidden; }
.container { max-width: var(--site-max-width); margin: 0 auto; padding: 0 var(--site-edge); } /* TODO: strip this down */

    /* --- Text Constants --- */

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
.display-font { font-family: var(--font-display); }
.italic { font-style: italic; }

    /* --- A11Y Accessibility --- */
    
.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; }

/* =======================
--- REPEATED VARIABLES ---
========================== */

:root {
    --primary-bg: #F4F1EA;        /* "dutch cream" */
    --secondary-bg: #1A1A1A;      /* "charcoal" */
    --text-main: #1A1A1A;
    --text-light: #F4F1EA;
    --font-main: 'Inter', sans-serif;
    --font-display: 'Grotesk', sans-serif;
    --site-max-width: 1600px;
    --site-edge: 3rem;              /* horizontal spacing */
    --site-spacing: 3rem;           /* vertical spacing */
}

/* ==================================
   --- CUSTOM CURSOR & ANIMATIONS ---
================================== */

    /* --- Custom Cursor --- */
body.custom-cursor-active, body.custom-cursor-active * { cursor: none !important; }
#cursor-dot { width: 0.4rem; height: 0.4rem; background-color: white; border-radius: 50%; position: fixed; z-index: 10000; pointer-events: none; mix-blend-mode: difference; transform: translate(-50%, -50%); transition: transform 0.15s ease; }
#cursor-ring { width: 1.5rem; height: 1.5rem; border: 2px solid #ffffff; border-radius: 50%; box-shadow: 0 0 8px rgba(255, 255, 255, 0.3); position: fixed; z-index: 9999; pointer-events: none; mix-blend-mode: difference; transform: translate(-50%, -50%); transition: width 0.3s, height 0.3s, background-color 0.3s, transform 0.1s ease-out; }
body.hovering #cursor-dot { transform: translate(-50%, -50%) scale(0); }
body.hovering #cursor-ring { width: 3.3rem; height: 3.3rem; background-color: #ffffff; border-width: 0; }

    /* --- Scroll Reveal Animations --- */
.reveal-text { opacity: 0; transform: translateY(20px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-text.visible { opacity: 1; transform: translateY(0); }
.delay-100 { transition-delay: 0.1s; }
.delay-300 { transition-delay: 0.3s; }
.delay-500 { transition-delay: 0.5s; }
.delay-800 { transition-delay: 0.8s; }

    /* --- Parallax Base --- */
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.parallax-img { position: absolute; top: -15%; left: 0; width: 100%; height: 130%; object-fit: cover; object-position: center; will-change: transform; }
.hero-overlay { position: absolute; inset: 0; background-color: rgba(0,0,0,0.4); }

/* ==================================
   --- REUSABLE COMPONENTS ---
================================== */

    /* --- Navigation --- */
.nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 50; display: flex; justify-content: space-between; align-items: center; color: var(--text-light); border-bottom: 1px solid transparent; transition: all 0.4s ease; }
.navbar { display: flex; justify-content: space-between; align-items: center; width: 100%; padding-top: 0.3rem; padding-bottom: 0.3rem; }
.logo-img { height: 3.5rem; width: auto; transition: filter 0.4s; }
.nav-links { display: flex; gap: var(--site-edge); }
.nav-link { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; position: relative; font-weight: 600; }
.nav-link::after { content: ''; display: block; width: 0; height: 1px; background: currentColor; transition: width 0.3s; margin-top: 4px; }
.nav-link:hover::after { width: 100%; }
.nav-link.active-page::after { width: 100%; }
.nav.scrolled { background-color: rgba(244, 241, 234, 0.85); backdrop-filter: blur(10px); color: var(--text-main); border-bottom: 1px solid rgba(26, 26, 26, 0.1); }
.nav.scrolled .logo-img { filter: none; }

    /* --- Mobile Menu Overlay --- */
.mobile-menu-btn { display: none; background: none; border: none; color: inherit; cursor: pointer; }
#mobile-menu { position: fixed; inset: 0; background-color: var(--secondary-bg); z-index: 60; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2rem; color: var(--text-light); transform: translateX(100%); transition: transform 0.5s ease-in-out; }
#mobile-menu.open { transform: translateX(0); }
#close-menu { position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: none; color: white; cursor: pointer; }
.mobile-link { font-size: 2rem; text-transform: uppercase; }

    /* --- Buttons --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;font-family: var(--font-main); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; line-height: 1; padding: 1rem 2rem; cursor: pointer; position: relative; overflow: hidden; z-index: 1; appearance: none; border-radius: 0; background: transparent; border: 1px solid var(--text-main); color: var(--text-main); transition: color 0.3s ease; }
.btn::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; transform: translateX(-101%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); background-color: var(--text-main); }
.btn:hover { color: var(--text-light); }
.btn:hover::before { transform: translateX(0); }
.btn:focus-visible { outline: 2px solid var(--text-main); outline-offset: 4px; }
.btn-inverse { border-color: var(--text-light); color: var(--text-light); }
.btn-inverse::before { background-color: var(--text-light); }
.btn-inverse:hover { color: var(--text-main); }

    /* ---  Forms --- */
.contact-form { display: flex; flex-direction: column; gap: 1.5rem; width: 100%; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.form-group { position: relative; width: 100%; }
.form-input { width: 100%; padding: 1rem 0; background: transparent; border: none; border-bottom: 1px solid #ccc; border-radius: 0; font-family: var(--font-main); font-size: 1rem; color: var(--text-main); transition: all 0.3s ease; }
textarea.form-input { resize: vertical; min-height: 100px; border: 1px solid #ccc; padding: 1rem; background-color: rgba(255, 255, 255, 0.5); }
select.form-input { cursor: pointer; color: var(--text-main); background-color: transparent; }
.form-input:focus { outline: none; border-color: var(--secondary-bg); background-color: rgba(255, 255, 255, 0.8); padding-left: 0.5rem; }
.form-input::placeholder { color: #999; font-weight: 300; }

    /* --- Footer --- */
footer { background: var(--secondary-bg); color: var(--text-light); width: 100%; }
.footer-bottom { max-width: var(--site-max-width); margin: 0 auto; padding: 1.5rem var(--site-edge); border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: flex-end; font-size: 0.7rem; letter-spacing: 0.1em; }

/* ===============================
   --- LANDING PAGE ---
=============================== */

/* --- Hero Big --- */
.hero-big { position: relative; width: 100%; overflow: hidden; display: flex; height: 100vh; height: 100svh; align-items: center; justify-content: center; }
.hero-big .hero-content { position: relative; z-index: 10; color: var(--text-light); padding: 1rem; text-align: center; }
.hero-title { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 0.85; margin-bottom: 2rem; }
.hero-subtitle { letter-spacing: 0.6rem; font-weight: 700; font-size: clamp(1rem, 2.5vw, 1.5rem); text-align: center; }

/* Line Reveal Animation */
.hero-line-reveal { display: block; margin: 0; }
.hero-line-1 { font-size: clamp(4rem, 13vw, 8.8rem); }
.hero-line-2 { font-size: clamp(3.2rem, 10vw, 7.5rem); }
.hero-line-3 { font-size: clamp(2.2rem, 8vw, 5.4rem); }
.hero-line-reveal > span { display: inline-block; transform: translateY(110%); transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-text.visible.hero-line-reveal > span { transform: translateY(0); }

/* Landing Footer */
.hero-footer { 
    position: absolute; 
    bottom: 2rem; 
    left: 0; 
    right: 0; 
    width: 100%; 
    display: grid; 
    grid-template-columns: 1fr auto 1fr; 
    align-items: center; 
    color: var(--text-light); 
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase; 
    letter-spacing: 0.1em; 
    z-index: 20; 
}
.hero-footer > *:first-child { justify-self: start; }
.hero-footer > *:last-child { justify-self: end; }
.hero-footer > .bounce-text { justify-self: center; }
.bounce-text { animation: bounce 2s infinite; }
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

/* --- Intro Section --- */
.intro-grid { display: grid; grid-template-columns: 1fr 2fr; gap: var(--site-edge); padding-top: var(--site-spacing); padding-bottom: var(--site-spacing); }
.section-label { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1rem; padding-top: 1rem; }
.about-line { border-top: 1px solid var(--text-main); width: 0; transition: width 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s; }
.reveal-text.visible .about-line { width: 100%; }
.intro-text p { font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.8rem); font-weight: 300; line-height: 1.3; }

/* --- Unified Background Wrapper (Expertise + Services + Contact) --- */
/* The Wrapper provides the base Dark Color for the top section */
.unified-bottom-wrapper { 
    background-color: var(--secondary-bg); 
    width: 100%; 
}

/* Header needs to be transparent to show the dark wrapper background */
.unified-bottom-wrapper .section-header-wrapper { background: transparent !important; border: none; }

/* Color Overrides for Visibility */
.unified-bottom-wrapper .section-header-wrapper .section-title { color: var(--text-light); }
.unified-bottom-wrapper .contact-section .section-title,
.unified-bottom-wrapper .contact-section a,
.unified-bottom-wrapper .contact-section .info-address { color: var(--text-main); }
.unified-bottom-wrapper .contact-section .info-label { color: rgba(26, 26, 26, 0.6); }

/* Invert the contact button hover effect because background is now white */
.unified-bottom-wrapper .contact-section .btn { border-color: var(--text-main); color: var(--text-main); }
.unified-bottom-wrapper .contact-section .btn::before { background-color: var(--text-main); }
.unified-bottom-wrapper .contact-section .btn:hover { color: var(--text-light); }


/* --- Reusable Section Header --- */
.section-header-wrapper { padding-top: var(--site-spacing); padding-bottom: var(--site-spacing); display: block; background: white; }
.section-title { font-size: clamp(3rem, 5vw + 1rem, 5rem); font-weight: 700; line-height: 1; letter-spacing: -0.05em; }

/* --- Services Grid --- */
.services-section { padding: 0; width: 100%; background: linear-gradient(to bottom, var(--secondary-bg) 1%, var(--primary-bg) 100%); }
.service-container { max-width: var(--site-max-width); margin: 0 auto; padding: 0 var(--site-edge); }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.service-card { background: #fff; position: relative; aspect-ratio: 4/5; overflow: hidden; }
.service-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.service-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 40%, rgba(0,0,0,1) 100%); opacity: 1; transition: opacity 0.4s ease; z-index: 1; }
.service-info { position: absolute; bottom: 0; left: 0; width: 100%; padding: 1.5rem; transform: translateY(20px); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); z-index: 2; }
.service-tag { display: inline-block; background: var(--text-main); color: #fff; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.25rem 0.5rem; margin-bottom: 0.5rem; opacity: 0; transform: translateY(10px); transition: all 0.6s ease 0.1s; }
.service-title { color: #fff; font-size: 1.5rem; font-weight: 700; margin-bottom: 0.25rem; }
.service-desc { color: rgba(255,255,255,0.8); font-size: 0.95rem; line-height: 1.5; }

/* Service Hover */
.service-card:hover .service-img { transform: scale(1.1); }
.service-card:hover .service-overlay { opacity: 0.6; }
.service-card:hover .service-info { transform: translateY(0); }
.service-card:hover .service-tag { opacity: 1; transform: translateY(0); }

/* --- Contact Strip --- */
.contact-section { 
    /* Force white background */
    background-color: var(--primary-bg); 
    color: var(--text-main); 
    padding-top: var(--site-spacing); 
    padding-bottom: var(--site-spacing); 
    width: 100%; 
}
.contact-section .section-title, .contact-section a { color: var(--text-main); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 2rem; }
.contact-item-title { text-align: left; }
.contact-item-btn { display: flex; justify-content: center; align-items: center; }
.contact-item-address { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.info-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; color: rgba(26, 26, 26, 0.6); }
.info-address { font-size: 1.125rem; line-height: 1.4; font-weight: 500; }

/* ==================================
   SUBPAGE STYLING
================================== */

/* --- Hero Small --- */
.hero-small { position: relative; width: 100%; overflow: hidden; display: flex; height: 45vh; min-height: 420px; align-items: center; }
.hero-small .hero-title { font-size: clamp(3rem, 6vw, 5.5rem); margin: 0; text-align: center; align-items: center; color: var(--text-light); width: 100%; }
.hero-small .parallax-img { height: 120%; top: -10%; }
.hero-small-content { position: relative; z-index: 10; width: 100%; }

/* --- Portfolio Page --- */
.portfolio-grid { position: relative; z-index: 2; background-color: var(--primary-bg); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--site-edge); padding: var(--site-spacing) var(--site-edge); max-width: var(--site-max-width); margin: 0 auto; }
.prop-card { display: block; color: var(--text-main); }
.prop-image-wrapper { position: relative; aspect-ratio: 3/2; overflow: hidden; margin-bottom: 1.5rem; }
.prop-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.prop-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.1); transition: opacity 0.3s; }
.prop-card:hover .prop-img { transform: scale(1.05); }
.prop-meta { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 1rem; }
.prop-title { font-size: 1.25rem; font-weight: 500; }
.prop-type { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: #666; }
.prop-loc { margin-top: 0.5rem; font-size: 0.9rem; color: #666; }

/* Grid Responsive Breakpoints (Inline) */
@media (max-width: 1400px) { .portfolio-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .portfolio-grid { grid-template-columns: 1fr; } }

/* --- Services Page (Details) --- */
.prop-detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--site-edge); padding: var(--site-spacing) var(--site-edge); max-width: var(--site-max-width); margin: 0 auto; border-bottom: 1px solid #e5e5e5; }
.service-detail-block { margin-bottom: 2rem; }
.service-detail-block h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; font-family: var(--font-display); }
.service-body { font-size: 1.125rem; line-height: 1.6; color: #4a4a4a; margin-bottom: 1rem; max-width: 65ch; }
.detail-list { list-style: disc; margin-left: 1.5rem; margin-bottom: 1.5rem; line-height: 1.8; }
.detail-list li { padding-left: 0.5rem; }
.sidebar-block { margin-bottom: 2rem; }
.sidebar-quote-text { margin-bottom: 1.5rem; line-height: 1.6; }
.detail-list-simple { list-style: none; line-height: 2; }
.detail-list-simple strong { font-weight: 600; color: var(--text-main); }

/* --- Property Page (Details + Map) --- */
.prop-page-3col { display: grid; grid-template-columns: 1fr 1fr 0.8fr; gap: var(--site-edge); padding: var(--site-spacing) var(--site-edge); max-width: var(--site-max-width); margin: 0 auto; border-bottom: 1px solid #e5e5e5; align-items: start; }
.hero-subtitle-prop { text-align: center; margin-top: 0.5rem; margin-bottom: 0.5rem; opacity: 0.8; text-transform: uppercase; color: var(--text-light); width: 100%; }
.prop-overview h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1.5rem; }
.prop-overview p { font-size: 1.5rem; font-weight: 300; line-height: 1.6; }
.prop-content-footer { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(0, 0, 0, 0.1); }

/* Stats Column */
.prop-stats-box { background-color: #f9fafb; padding: 2rem; margin-bottom: 2rem; color: #1a1a1a; }
.prop-stats-header { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
#dynamic-stats { display: flex; flex-direction: column; gap: 0.5rem; }
.stat-row { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0,0,0,0.1); padding: 1rem 0; }
.stat-label { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; color: #666; }
.stat-value { font-weight: 600; }
.prop-location-group { margin-top: 2rem; padding-top: 1rem; }
.prop-location-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: #6b7280; margin-bottom: 0.5rem; }
.prop-location-value { font-size: 1.125rem; font-weight: 500; }

/* Map */
.prop-map-column { width: 100%; height: 100%; }
.map-container { width: 100%; height: 100%; min-height: 450px; background-color: #e5e5e5; position: relative; z-index: 1; }

/* --- Contact Page (Specific Layout) --- */
.contact-page-layout { display: grid; grid-template-columns: 1fr 2fr; gap: var(--site-edge); padding: var(--site-spacing) var(--site-edge); max-width: var(--site-max-width); margin: 0 auto; align-items: start; }
.contact-page-layout .prop-stats-box { margin-bottom: 0; }

/* Dark Box & Input Overrides for Contact Form */
.box-dark { background-color: var(--secondary-bg); color: var(--primary-bg); }
.box-dark .prop-stats-header { border-color: rgba(255, 255, 255, 0.2); }
.box-dark .form-input { color: var(--primary-bg); border-bottom-color: rgba(244, 241, 234, 0.3); }
.box-dark .form-input::placeholder { color: rgba(244, 241, 234, 0.5); }
.box-dark .form-input:focus { background-color: rgba(244, 241, 234, 0.1); border-color: var(--primary-bg); }
.box-dark textarea.form-input { background-color: rgba(244, 241, 234, 0.05); border: 1px solid rgba(244, 241, 234, 0.3); }
.box-dark textarea.form-input:focus { background-color: rgba(244, 241, 234, 0.1); border-color: var(--primary-bg); }
.box-dark select.form-input option { background-color: var(--secondary-bg); color: var(--primary-bg); }


/* ================================
   MOBILE PORTRAIT
================================ */

@media screen and (max-width: 1024px) {
    :root { --site-edge: 1.5rem; --site-spacing: 3rem; } 
    #cursor-dot, #cursor-ring { display: none !important; } 
    body { cursor: auto !important; } 
    .nav-links { display: none; }
    .mobile-menu-btn { display: block; }
    .hero-subtitle { font-size: 0.9rem; letter-spacing: 0.1rem;}
    .hide-mobile { display: none; }
    .intro { padding: var(--site-spacing) 1.5rem; }
    .intro-grid { grid-template-columns: 1fr; }
    .services-grid { grid-template-columns: 1fr; width: 100%; }
    .service-container { padding: 0 !important; width: 100%; max-width: 100%; }
    .service-card { width: 100%; border-radius: 0; aspect-ratio: 16/9; }
    .service-img { width: 100%; height: 100%; object-fit: cover; }
    .contact-grid { grid-template-columns: 1fr; gap: var(--site-spacing); }
    .contact-item-btn { justify-content: flex-start; }
    .contact-item-address { align-items: flex-start; text-align: left; }
    .form-row { grid-template-columns: 1fr; gap: 1.5rem; }
    .contact-page-layout, .prop-detail-grid, .prop-page-3col { grid-template-columns: 1fr; gap: var(--site-spacing); } 
    .map-container { height: 350px; margin-bottom: 2rem; }
    .hero-footer { display: flex; justify-content: center; }
    .footer-bottom { justify-content: flex-end; }
}
@media (pointer: coarse) { /* redundant safety for touch devices regardless of size */
    #cursor-dot, #cursor-ring { display: none !important; } 
    body { cursor: auto !important; } 
    .nav-links { display: none; }
    .mobile-menu-btn { display: block; }
}

/* ===============================
   MOBILE LANDSCAPE
=============================== */

@media screen and (orientation: landscape) and (max-height: 500px) {
    .hero-big { height: 100svh; min-height: auto; padding: 0; flex-direction: column; align-items: center; justify-content: center; }
    .hero-content { width: 100%; display: flex; flex-direction: column; align-items: center; margin-bottom: 2rem; z-index: 10; }
    .hero-title { align-items: center; margin-bottom: 0.5rem; line-height: 0.9; }
    .hero-line-1 { font-size: 16vh; }
    .hero-line-2 { font-size: 13vh; }
    .hero-line-3 { font-size: 10vh; }
    .hero-subtitle { letter-spacing: 0.2rem; text-align: center; font-size: 0.9rem; margin-top: 0.5rem; }
    .hero-footer { position: absolute; bottom: 1rem; left: 0; right: 0; margin-top: 0; display: flex; justify-content: center; width: 100%; }
    .hero-footer .btn { padding: 0.6rem 1.5rem; font-size: 0.75rem; }
    .hero-footer span { display: none; }
    .hero-small { min-height: 75svh; padding-top: 4rem; }
    .service-card { max-height: 15rem; }
}