/* ==========================================================================
   MAN OF THE HOUSE 215 — Design System & Styles
   Mobile-first, luxury-minimal, 8px spacing grid
   ========================================================================== */

/* ---------- Custom Properties ---------- */
:root {
  --color-bg: #FAF9F6;
  --color-bg-alt: #F0EDE7;
  --color-surface: #FFFFFF;
  --color-navy: #1B2A4A;
  --color-navy-light: #5C6577;
  --color-navy-lighter: #8A9099;
  --color-gold: #C4A04D;
  --color-gold-dark: #B08E3A;
  --color-gold-light: rgba(196, 160, 77, 0.10);
  --color-white: #FFFFFF;
  --color-border: rgba(27, 42, 74, 0.08);
  --color-border-strong: rgba(27, 42, 74, 0.14);

  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.08);

  --ease: cubic-bezier(.25,.46,.45,.94);
}

/* ---------- Reset ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--color-navy);background:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,textarea,select{font-family:inherit;font-size:inherit}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:600;line-height:1.15;color:var(--color-navy)}
h1{font-size:clamp(2.125rem,5vw,3.375rem)}
h2{font-size:clamp(1.75rem,4vw,2.5rem)}
h3{font-size:clamp(1.0625rem,2.5vw,1.3125rem)}

/* ---------- Layout ---------- */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.section{padding:80px 0}

@media(min-width:768px){.section{padding:96px 0}}
@media(min-width:1024px){.container{padding:0 48px}.section{padding:120px 0}}

.section-label{display:block;font-family:var(--font-body);font-size:.75rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--color-gold);margin-bottom:8px}
.section-heading{margin-bottom:16px}
.section-desc{color:var(--color-navy-light);font-size:1rem;line-height:1.7;max-width:540px}
.section-header{margin-bottom:48px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-body);font-size:.9375rem;font-weight:500;border-radius:var(--radius-full);transition:all 200ms var(--ease);min-height:48px;padding:14px 32px;gap:8px;white-space:nowrap}
.btn-primary{background:var(--color-gold);color:var(--color-white)}
.btn-primary:hover{background:var(--color-gold-dark);transform:translateY(-1px)}
.btn-secondary{background:transparent;color:var(--color-white);border:1px solid rgba(255,255,255,.3)}
.btn-secondary:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
.btn-ghost{background:transparent;color:var(--color-navy);border:1px solid var(--color-border-strong)}
.btn-ghost:hover{border-color:var(--color-gold);color:var(--color-gold)}

/* ==========================================================================
   HEADER
   ========================================================================== */
.header{position:fixed;top:0;left:0;right:0;z-index:100;transition:background 300ms var(--ease),border-color 300ms var(--ease);border-bottom:1px solid transparent}
.header--transparent{background:transparent}
.header--solid{background:rgba(250,249,246,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--color-border)}

.nav{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;padding:16px 24px}
.nav-logo{display:flex;align-items:center;gap:12px;min-width:0}
.nav-logo img{height:44px;width:auto;transition:filter 300ms var(--ease);display:block;flex-shrink:0}
.nav-logo-text{font-family:var(--font-heading);font-size:1rem;font-weight:600;color:var(--color-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header--transparent .nav-logo-text{color:var(--color-white)}
@media(min-width:768px){.nav-logo-text{display:none}}
/* Logo in full color in both header states (no filter — avoids white/black box) */
.header--transparent .nav-logo img,
.header--solid .nav-logo img{filter:none}
/* Slight glow over dark hero so logo stays readable */
.header--transparent .nav-logo img{filter:drop-shadow(0 0 20px rgba(0,0,0,.4))}

.nav-links{display:none;align-items:center;gap:40px}
.nav-links a{font-size:.875rem;font-weight:500;color:var(--color-navy-light);letter-spacing:.01em;transition:color 150ms var(--ease);padding:8px 0}
.nav-links a:hover{color:var(--color-navy)}
.header--transparent .nav-links a{color:rgba(255,255,255,.75)}
.header--transparent .nav-links a:hover{color:var(--color-white)}

.nav-cta{display:none}
.nav-cta .btn{padding:10px 24px;font-size:.875rem;min-height:40px}

.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;z-index:110}
.menu-toggle span{display:block;width:100%;height:2px;border-radius:1px;transition:all 200ms var(--ease);background:var(--color-navy)}
.header--transparent .menu-toggle span{background:var(--color-white)}
.menu-toggle.active span{background:var(--color-navy)}
.menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

@media(min-width:768px){
  .nav-logo img{height:52px}
  .nav-links{display:flex}
  .nav-cta{display:block}
  .menu-toggle{display:none}
}
@media(min-width:1024px){.nav{padding:16px 48px}}

/* Mobile Menu */
.mobile-menu{position:fixed;inset:0;background:var(--color-bg);z-index:105;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;opacity:0;pointer-events:none;transition:opacity 250ms var(--ease)}
.mobile-menu.active{opacity:1;pointer-events:auto}
.mobile-menu a{font-family:var(--font-heading);font-size:1.5rem;font-weight:500;color:var(--color-navy);transition:color 150ms var(--ease)}
.mobile-menu a:hover{color:var(--color-gold)}
.mobile-menu .btn{margin-top:8px}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.hero-video{position:absolute;inset:0;z-index:0}
.hero-video video{width:100%;height:100%;object-fit:cover;opacity:0.8}
.hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(27,42,74,.72) 0%,rgba(27,42,74,.50) 50%,rgba(27,42,74,.80) 100%)}

.hero-content{position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;padding:120px 24px 80px;display:flex;flex-direction:column;gap:40px}
.hero-text{flex:1;min-width:0}
.hero-content h1{color:var(--color-white);max-width:640px;margin-bottom:24px}
.hero-text>p{color:rgba(255,255,255,.78);font-size:clamp(1rem,2vw,1.125rem);max-width:500px;margin-bottom:40px;line-height:1.75}

.hero-ctas{display:flex;flex-direction:column;gap:12px;margin-bottom:48px}
@media(min-width:480px){.hero-ctas{flex-direction:row;gap:16px}}

.hero-trust{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.trust-item{display:flex;align-items:center;gap:8px;font-size:.875rem;color:rgba(255,255,255,.65)}
.trust-rating{font-weight:600;color:var(--color-white);font-size:1rem}
.trust-stars{color:var(--color-gold);letter-spacing:2px}
.trust-divider{width:1px;height:20px;background:rgba(255,255,255,.2);display:none}
@media(min-width:640px){.trust-divider{display:block}}

/* Hero card — beside text on desktop; hidden on mobile */
.hero-card{display:none;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-lg);padding:32px 24px;max-width:360px;align-self:flex-start}
.hero-card-title{font-family:var(--font-heading);font-size:1.25rem;font-weight:600;color:var(--color-navy);margin-bottom:8px}
.hero-card-desc{font-size:.9375rem;color:var(--color-navy-light);line-height:1.6;margin-bottom:24px}
.hero-card-cta{width:100%;margin-bottom:20px}
.hero-card-phone{border-top:1px solid var(--color-border);padding-top:20px;text-align:center}
.hero-card-label{display:block;font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--color-navy-lighter);margin-bottom:4px}
.hero-card-number{font-size:1.125rem;font-weight:600;color:var(--color-navy);transition:color 150ms var(--ease)}
.hero-card-number:hover{color:var(--color-gold)}

@media(min-width:1024px){
  .hero-content{flex-direction:row;align-items:center;gap:64px;padding:160px 48px 120px}
  .hero-card{display:block;flex-shrink:0;max-width:340px}
}

/* ==========================================================================
   CAROUSEL SYSTEM (Mobile Scroll-Snap)
   ========================================================================== */
.carousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;padding:0 24px 8px}
.carousel::-webkit-scrollbar{display:none}
.carousel-card{flex:0 0 88%;scroll-snap-align:start}

@media(min-width:768px){
  .carousel{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;overflow-x:visible;scroll-snap-type:none;padding:0}
  .carousel-card{flex:none}
}
@media(min-width:1024px){.carousel{grid-template-columns:repeat(3,1fr)}}

.carousel-dots{display:flex;justify-content:center;gap:8px;margin-top:24px}
.carousel-dot{width:8px;height:8px;border-radius:var(--radius-full);background:var(--color-border-strong);transition:all 200ms var(--ease);padding:0;border:none}
.carousel-dot.active{background:var(--color-gold);width:24px;border-radius:4px}
@media(min-width:768px){.carousel-dots{display:none}}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services{background:var(--color-bg)}

.service-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:32px 24px;transition:border-color 200ms var(--ease),box-shadow 200ms var(--ease)}
.service-card:hover{border-color:var(--color-border-strong);box-shadow:var(--shadow-md)}

.service-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--color-gold-light);border-radius:var(--radius-md);margin-bottom:24px;color:var(--color-gold)}
.service-icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

.service-card h3{margin-bottom:8px}
.service-card p{font-size:.9375rem;line-height:1.65;color:var(--color-navy-light)}

/* ==========================================================================
   OUR WORK
   ========================================================================== */
.work{background:var(--color-bg-alt)}

.work-card{border-radius:var(--radius-lg);overflow:hidden;position:relative}
.work-card img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 400ms var(--ease)}
.work-card:hover img{transform:scale(1.04)}
.work-card-label{position:absolute;bottom:0;left:0;right:0;padding:24px 16px 16px;background:linear-gradient(to top,rgba(27,42,74,.72),transparent);color:var(--color-white);font-size:.875rem;font-weight:500;letter-spacing:.01em}

@media(min-width:1280px){
  #workCarousel{grid-template-columns:repeat(4,1fr)}
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about{background:var(--color-bg)}

.about-grid{display:flex;flex-direction:column;gap:48px}
.about-image{border-radius:var(--radius-lg);overflow:hidden}
.about-image img{width:100%;aspect-ratio:4/3;object-fit:cover}

.about-text{display:flex;flex-direction:column;justify-content:center}
.about-text h2{margin-bottom:24px}
.about-text p{margin-bottom:20px;font-size:1rem;line-height:1.8;color:var(--color-navy-light)}

.about-badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:var(--color-gold-light);color:var(--color-gold-dark);font-size:.8125rem;font-weight:600;letter-spacing:.02em;border-radius:var(--radius-full)}
.badge svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.stat{text-align:center;padding:20px 8px;border:1px solid var(--color-border);border-radius:var(--radius-md)}
.stat-value{font-family:var(--font-heading);font-size:1.5rem;font-weight:600;color:var(--color-navy);display:block;margin-bottom:4px}
.stat-label{font-size:.75rem;color:var(--color-navy-light);text-transform:uppercase;letter-spacing:.08em;font-weight:500}

@media(min-width:768px){
  .about-grid{flex-direction:row;gap:64px}
  .about-image,.about-text{flex:1;min-width:0}
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{background:var(--color-bg-alt)}

.contact-grid{display:flex;flex-direction:column;gap:48px}

.contact-info h2{margin-bottom:20px}
.contact-info>p{margin-bottom:32px;font-size:1rem;line-height:1.7;color:var(--color-navy-light);max-width:480px}

.contact-details{display:flex;flex-direction:column;gap:16px}
.contact-detail{display:flex;align-items:flex-start;gap:16px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:24px;transition:border-color 200ms var(--ease),box-shadow 200ms var(--ease)}
.contact-detail:hover{border-color:var(--color-border-strong);box-shadow:var(--shadow-sm)}
.contact-detail-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--color-gold-light);border-radius:var(--radius-md);color:var(--color-gold);flex-shrink:0}
.contact-detail-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.contact-detail-text{display:flex;flex-direction:column;gap:4px}
.contact-detail-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--color-navy-lighter)}
.contact-detail-value{font-size:.9375rem;font-weight:500;color:var(--color-navy)}
.contact-detail-value a{transition:color 150ms var(--ease)}
.contact-detail-value a:hover{color:var(--color-gold)}

.contact-form{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:32px 24px}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:.8125rem;font-weight:500;color:var(--color-navy);margin-bottom:8px}
.form-group input,
.form-group select,
.form-group textarea{width:100%;padding:14px 16px;background:var(--color-bg);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);color:var(--color-navy);font-size:1rem;transition:border-color 150ms var(--ease),box-shadow 150ms var(--ease);outline:none;-webkit-appearance:none;appearance:none}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{border-color:var(--color-gold);box-shadow:0 0 0 3px var(--color-gold-light)}
.form-group textarea{min-height:120px;resize:vertical}
.form-group input::placeholder,
.form-group textarea::placeholder{color:var(--color-navy-lighter)}
.form-group select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C6577' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
.contact-form .btn{width:100%;margin-top:8px}

@media(min-width:768px){
  .contact-grid{flex-direction:row;gap:64px}
  .contact-info,.contact-form-wrap{flex:1;min-width:0}
  .contact-form{padding:40px}
  .form-row{display:flex;gap:16px}
  .form-row .form-group{flex:1}
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{background:var(--color-navy);color:rgba(255,255,255,.55);padding:64px 0 32px}

.footer-grid{display:flex;flex-direction:column;gap:48px;margin-bottom:48px;align-items:center;text-align:center}
.footer-brand img{height:52px;width:auto;margin-bottom:16px;display:block;filter:none;margin-left:auto;margin-right:auto}
.footer-brand p{color:rgba(255,255,255,.45);font-size:.875rem;line-height:1.7;max-width:320px;margin-left:auto;margin-right:auto}
.footer-col ul{align-items:center}

.footer-col h4{color:var(--color-white);font-family:var(--font-body);font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px}
.footer-col ul{display:flex;flex-direction:column;gap:10px}
.footer-col a{font-size:.875rem;color:rgba(255,255,255,.5);transition:color 150ms var(--ease)}
.footer-col a:hover{color:var(--color-gold)}

.footer-bottom{padding-top:32px;border-top:1px solid rgba(255,255,255,.08);text-align:center;font-size:.8125rem;color:rgba(255,255,255,.35)}

@media(min-width:768px){
  .footer-grid{flex-direction:row;justify-content:space-between;align-items:flex-start;text-align:left}
  .footer-brand{max-width:320px}
  .footer-brand img{margin-left:0;margin-right:0}
  .footer-brand p{margin-left:0;margin-right:0}
  .footer-col ul{align-items:flex-start}
}

/* ==========================================================================
   REVEAL ANIMATION
   ========================================================================== */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* Stagger children */
.reveal-stagger .carousel-card,
.reveal-stagger .stat{opacity:0;transform:translateY(12px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.reveal-stagger.visible .carousel-card,
.reveal-stagger.visible .stat{opacity:1;transform:translateY(0)}

/* body lock for mobile menu */
body.menu-open{overflow:hidden}