/* =========================================================
   YOUR FIRM
   Palette + type tokens taken from the client's reference
   screenshot. Layout rhythm (numbered service rows, intro
   strip, closing CTA banner, footer) inspired by belavi.at.
   ========================================================= */

:root{
  /* ---- colour tokens (from reference screenshot) ---- */
  --cream:        #F2ECE0;   /* page background */
  --cream-alt:    #EAE2D2;   /* alternate section background */
  --line-dark:    #3B2A20;   /* hairline top bar */
  --ink:          #241C15;   /* headings / near-black */
  --ink-soft:     #57514A;   /* body copy */
  --accent:       #B4854F;   /* terracotta / gold eyebrow + accents */
  --accent-deep:  #8C5E36;   /* hover / deeper wood tone */
  --wood:         #C9A47A;   /* logo block tan */
  --btn-bg:       #17130F;   /* black CTA button */
  --btn-text:     #F2ECE0;
  --border-soft:  rgba(36,28,21,0.12);
  --white:        #FFFFFF;

  /* ---- type ---- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-heading: 'Brittany Signature', cursive;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- misc ---- */
  --container: 1240px;
  --radius: 2px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink-soft);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3{
  font-family:var(--font-display);
  color:var(--ink);
  margin:0;
  font-weight:500;
}
section{position:relative;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

/* ---------------------------------------------------------
   Shared bits
--------------------------------------------------------- */
.eyebrow{
  font-family:var(--font-heading);
  font-size:clamp(30px, 2.8vw, 42px);
  font-weight:400;
  letter-spacing:normal;
  text-transform:none;
  color:var(--accent);
  margin:0 0 20px;
}
.eyebrow-center{text-align:center;}

.section-title{
  font-size:clamp(28px,3.4vw,42px);
  margin-bottom:20px;
}
.section-title-center{text-align:center;}

.btn{
  display:inline-block;
  padding:15px 30px;
  font-family:var(--font-body);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  cursor:pointer;
}
.btn-dark{
  background:var(--btn-bg);
  color:var(--btn-text);
}
.btn-dark:hover{
  background:var(--accent-deep);
  transform:translateY(-2px);
}

.text-link{
  display:inline-block;
  margin-top:6px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--ink);
  border-bottom:1px solid var(--accent);
  padding-bottom:3px;
  transition:color .2s ease, border-color .2s ease;
}
.text-link:hover{color:var(--accent-deep); border-color:var(--accent-deep);}

.loop-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:var(--cream-alt);
}

/* reveal-on-scroll utility, toggled by script.js */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* ---------------------------------------------------------
   Top hairline + header
--------------------------------------------------------- */
.top-line{height:4px; background:var(--line-dark); width:100%;}

.site-header{
  position:sticky; top:0; z-index:60;
  background:var(--cream);
  border-bottom:1px solid var(--border-soft);
}
.header-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:16px 32px;
  display:flex;
  align-items:center;
  gap:28px;
}
.logo{display:flex; align-items:center; gap:12px; margin-right:auto;}
.logo-mark{
  width:46px; height:46px;
  background:var(--wood);
  border:1px solid var(--line-dark);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-size:15px; font-weight:600; color:var(--line-dark);
}
.logo-text{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.4;
  color:var(--ink);
}

.main-nav{display:flex; align-items:center; gap:30px;}
.main-nav a{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  position:relative;
  padding-bottom:4px;
}
.main-nav a::after{
  content:'';
  position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:var(--accent);
  transition:right .25s ease;
}
.main-nav a:hover::after{right:0;}

.header-cta{white-space:nowrap;}

.nav-toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:6px;
}
.nav-toggle span{width:24px; height:2px; background:var(--ink);}

/* ---------------------------------------------------------
   HERO — autoplay-once video
--------------------------------------------------------- */
.hero{
  height:100vh;
  min-height:640px;
}
.hero-pin{
  position:relative;
  height:100%;
  width:100%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-video-frame{
  position:absolute; inset:0;
  width:100%; height:100%;
}
.hero-video{
  width:100%; height:100%;
  object-fit:cover;
  background:linear-gradient(180deg,#dfd6c4,#cdbfa4);
}
.hero-video-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(23,19,15,.35) 0%, rgba(23,19,15,.12) 38%, rgba(23,19,15,.5) 100%);
}

.hero-copy{
  position:relative;
  z-index:2;
  max-width:760px;
  text-align:center;
  padding:0 24px;
  color:var(--cream);
  transition:opacity .3s ease, transform .3s ease;
}
.hero-copy .eyebrow{color:var(--wood); text-align:center;}
.hero-title{
  font-size:clamp(40px,7vw,84px);
  line-height:1.05;
  color:var(--cream);
  margin-bottom:22px;
}
.hero-desc{
  color:#EDE6D8;
  font-size:16px;
  max-width:560px;
  margin:0 auto 30px;
}

/* ---------------------------------------------------------
   STATS SECTION
--------------------------------------------------------- */
.stats-section{
  width:100%;
  background:var(--cream);
  padding:120px 32px;
}
.stats-container{
  max-width:var(--container);
  margin:0 auto;
  width:100%;
}
.stats-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  width:100%;
  gap:40px;
}
.stat-block{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.stat-num-container{
  font-family:var(--font-display);
  font-size:clamp(44px, 5.5vw, 68px);
  font-weight:600;
  color:var(--ink);
  line-height:1;
  margin-bottom:12px;
}
.stat-number{
  font-variant-numeric:tabular-nums;
}
.stat-suffix{
  color:var(--accent);
  margin-left:2px;
}
.stat-label{
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink-soft);
  opacity:0.8;
}

/* ---------------------------------------------------------
   SERVICES
--------------------------------------------------------- */
.services{
  background:var(--cream-alt);
  padding:110px 32px 60px;
}
.services > .eyebrow, .services > .section-title{
  max-width:var(--container);
  margin-left:auto; margin-right:auto;
}
.services .section-title-center{margin-bottom:70px;}

.service-row{
  max-width:var(--container);
  margin:0 auto 90px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
.service-row-reverse .service-media{order:2;}
.service-row-reverse .service-copy{order:1;}

/* --- Full-bleed left video row (Service 01) --- */
.service-row-full-left{
  max-width:none;
  width:calc(100% + 64px);
  margin-left:-32px;
  margin-right:-32px;
  grid-template-columns:50vw 50vw;
  gap:0;
  align-items:stretch;
}
.service-row-full-left .service-media{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  border-radius:0;
  box-shadow:none;
}
.service-row-full-left .service-media .loop-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.service-row-full-left .service-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:40px 64px;
  max-width:580px;
}

/* --- Full-bleed right video row (Service 02) --- */
.service-row-full-right{
  max-width:none;
  width:calc(100% + 64px);
  margin-left:-32px;
  margin-right:-32px;
  grid-template-columns:50vw 50vw;
  gap:0;
  align-items:stretch;
}
.service-row-full-right .service-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:40px 64px;
  max-width:580px;
  margin-left:auto;
}
.service-row-full-right .service-media{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  border-radius:0;
  box-shadow:none;
}
.service-row-full-right .service-media .loop-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.service-media{
  aspect-ratio:5/4;
  overflow:hidden;
  border-radius:var(--radius);
  box-shadow:0 24px 50px -28px rgba(36,28,21,.4);
}
.service-index{
  display:inline-block;
  font-family:var(--font-display);
  font-size:14px;
  color:var(--accent);
  letter-spacing:.08em;
  margin-bottom:10px;
}
.service-copy h3{
  font-size:clamp(24px,2.6vw,32px);
  margin-bottom:18px;
}
.service-list li{
  position:relative;
  padding-left:20px;
  margin-bottom:12px;
  font-size:15px;
  color:var(--ink-soft);
}
.service-list li::before{
  content:'';
  position:absolute; left:0; top:9px;
  width:7px; height:1px;
  background:var(--accent);
}

/* ---------------------------------------------------------
   PORTFOLIO
--------------------------------------------------------- */
.portfolio{
  max-width:var(--container);
  margin:0 auto;
  padding:120px 32px;
}
.portfolio-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:48px;
}
.portfolio-head .eyebrow, .portfolio-head .section-title{margin-bottom:0;}
.portfolio-note{font-size:13px; color:var(--accent-deep); margin:0;}

.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  grid-template-areas:
    "kitchen kitchen dining"
    "bedroom living dining";
}
.portfolio-card{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:var(--radius);
  display:block;
  background:var(--cream-alt);
}
.card-kitchen{
  grid-area:kitchen;
  aspect-ratio:1.6 / 1;
}
.card-dining{
  grid-area:dining;
  aspect-ratio:auto;
  height:100%;
}
.card-bedroom{
  grid-area:bedroom;
  aspect-ratio:4/5;
}
.card-living{
  grid-area:living;
  aspect-ratio:4/5;
}
.portfolio-card::after{
  content:'';
  position:absolute; inset:0;
  background:rgba(0, 0, 0, 0.25);
  transition:background 0.3s ease;
  z-index:2;
}
.portfolio-card:hover::after{
  background:rgba(0, 0, 0, 0.15);
}
.portfolio-card-title{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
  color:#FFFFFF;
  font-family:var(--font-body);
  font-size:clamp(32px, 4.5vw, 64px);
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-shadow:0 4px 24px rgba(0, 0, 0, 0.5);
  pointer-events:none;
}
.portfolio-card img,
.portfolio-card .loop-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s ease;
}
.portfolio-card:hover img,
.portfolio-card:hover .loop-video{transform:scale(1.06);}

/* ---------------------------------------------------------
   TEAM
--------------------------------------------------------- */
.team{
  background:var(--cream-alt);
  padding:120px 32px;
}
.team > .eyebrow, .team > .section-title{text-align:center;}
.team .section-title-center{margin-bottom:60px;}

.team-grid{
  max-width:var(--container);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:30px;
}
.team-card{text-align:center;}
.team-photo{
  aspect-ratio:3/4;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--wood);
  margin-bottom:16px;
}
.team-photo img{width:100%; height:100%; object-fit:cover;}
.team-card h3{font-size:18px; margin-bottom:4px;}
.team-card p{font-size:13px; color:var(--accent-deep); margin:0;}

/* ---------------------------------------------------------
   CTA BANNER
--------------------------------------------------------- */
.cta-banner{
  text-align:center;
  padding:140px 32px;
  background:var(--ink);
  color:var(--cream);
}
.cta-banner h2{
  color:var(--cream);
  font-size:clamp(32px,4.6vw,54px);
  line-height:1.1;
  margin-bottom:18px;
}
.cta-banner p{color:#CFC6B6; margin:0 auto 34px; max-width:420px;}
.cta-banner .btn-dark{background:var(--wood); color:var(--ink);}
.cta-banner .btn-dark:hover{background:var(--accent);}
.cta-note{margin-top:18px !important; font-size:12px; color:#9C927F;}

/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */
.site-footer{
  background:var(--ink);
  color:#B9AF9C;
  padding:70px 32px 30px;
}
.footer-grid{
  max-width:var(--container);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:50px;
  border-bottom:1px solid rgba(242,236,224,.12);
}
.footer-brand .logo-text{color:var(--cream); font-size:12px;}
.footer-brand p{max-width:280px; margin-top:16px; font-size:13.5px;}
.footer-col h4{
  color:var(--cream);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:16px;
  font-weight:600;
  font-family:var(--font-body);
}
.footer-col a{
  display:block;
  font-size:13.5px;
  margin-bottom:10px;
  transition:color .2s ease;
}
.footer-col a:hover{color:var(--wood);}

.footer-bottom{
  max-width:var(--container);
  margin:0 auto;
  padding-top:24px;
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:#8A806D;
  flex-wrap:wrap;
  gap:8px;
}

/* ---------------------------------------------------------
   FLOATING ACTION BUTTONS
--------------------------------------------------------- */
.fab-stack{
  position:fixed;
  right:22px; bottom:26px;
  z-index:80;
  display:flex; flex-direction:column; gap:12px;
}
.fab{
  width:48px; height:48px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  box-shadow:0 10px 22px -8px rgba(0,0,0,.4);
  transition:transform .2s ease;
}
.fab svg{width:22px; height:22px;}
.fab:hover{transform:translateY(-3px);}
.fab-whatsapp{background:#25D366;}
.fab-instagram{background:radial-gradient(circle at 30% 110%, #fdf497, #fd5949 45%, #d6249f 65%, #285AEB 95%);}
.fab-phone{background:var(--accent-deep);}

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */
@media (max-width:1080px){
  .team-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:920px){
  .stats-section{padding:80px 24px;}
  .service-row{grid-template-columns:1fr; gap:30px;}
  .service-row-reverse .service-media{order:0;}
  .service-row-reverse .service-copy{order:0;}
  .service-row-full-left,
  .service-row-full-right{
    grid-template-columns:1fr;
    gap:24px;
    margin-left:-24px;
    margin-right:-24px;
    width:calc(100% + 48px);
  }
  .service-row-full-left .service-media,
  .service-row-full-right .service-media{
    aspect-ratio:16/10;
    width:100%;
    height:auto;
  }
  .service-row-full-left .service-copy,
  .service-row-full-right .service-copy{
    padding:0 24px;
    max-width:100%;
  }
  .service-row-full-right .service-copy{order:1;}
  .service-row-full-right .service-media{order:2;}
  .footer-grid{grid-template-columns:1fr 1fr; row-gap:34px;}
}

@media (max-width:760px){
  .site-header{padding:14px 20px;}
  .main-nav{
    position:absolute; top:100%; left:0; right:0;
    background:rgba(247, 244, 238, 0.98);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    border-bottom:1px solid var(--border-soft);
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
    box-shadow:0 20px 40px rgba(0,0,0,0.12);
  }
  .main-nav.is-open{max-height:420px;}
  .main-nav a{
    width:100%;
    padding:16px 24px;
    border-top:1px solid var(--border-soft);
    font-size:15px;
    font-weight:500;
  }
  .header-cta{display:none;}
  .nav-toggle{display:flex;}
  .services{padding:70px 20px 30px;}
  .service-row-full-left,
  .service-row-full-right{
    margin-left:-20px;
    margin-right:-20px;
    width:calc(100% + 40px);
  }
  .service-row-full-left .service-copy,
  .service-row-full-right .service-copy{
    padding:0 20px;
  }
  .portfolio{padding:70px 20px;}
  .team{padding:70px 20px;}
  .team-grid{grid-template-columns:1fr 1fr; gap:20px;}
  .portfolio-grid{
    grid-template-columns:1fr;
    grid-template-areas:none;
    gap:14px;
  }
  .card-kitchen, .card-dining, .card-bedroom, .card-living{
    grid-area:auto;
    aspect-ratio:4/3;
    height:auto;
  }
  .portfolio-card-title{
    font-size:clamp(26px, 7vw, 38px);
  }
  .stats-section{
    padding:60px 20px;
  }
  .stats-row{
    grid-template-columns:repeat(2, 1fr);
    row-gap:36px;
    column-gap:20px;
  }
  .cta-banner{padding:80px 20px;}
  .footer-grid{grid-template-columns:1fr;}
}

@media (max-width:540px){
  .hero-title{
    font-size:clamp(32px, 8.5vw, 48px);
    margin-bottom:16px;
  }
  .hero-desc{
    font-size:14px;
    line-height:1.6;
    margin-bottom:24px;
  }
  .hero-copy{
    padding:0 18px;
  }
  .team-grid{grid-template-columns:1fr; gap:24px;}
  .fab-stack{right:16px; bottom:20px; gap:10px;}
  .fab{width:44px; height:44px;}
  .fab svg{width:20px; height:20px;}
}