/* Basic reset */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

:root{
  --bg:#f4f3ec;
  --surface:#ffffff;
  --text:#0b0f14;
  --muted:#4a4f55;

  --border:rgba(11,15,20,.18);
  --shadow-sm:0 4px 14px rgba(11,15,20,.06);
  --shadow-md:0 12px 32px rgba(11,15,20,.12);
}

body{
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
}

.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Keep anchor targets visible below sticky header */
section{scroll-margin-top:84px}
@media (max-width:860px){section{scroll-margin-top:70px}}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 32px;
  border-radius:10px;
  border:2px solid var(--text);
  background:var(--text);
  color:#fff;

  font-family: inherit;
  font-weight: 600;
  font-size:16px;
  line-height:1;
  letter-spacing: 0;

  transition:transform .15s ease, background .15s ease, color .15s ease, opacity .15s ease;
}

.btn:hover{
  background:#fff;
  color:var(--text);
  transform:translateY(-1px);
  opacity:.98;
}
.btn:active{transform:translateY(0)}

/* Header / Nav */
header{
  position:sticky;
  top:0;
  background:#ffffffcc;
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--border);
  z-index:50;
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:64px;
}
.brand{
  display:flex;
  align-items:center;
  gap:8px;
}
.brand-wordmark{
  height:42px;
  width:auto;
}
.brand-mobile-icon{
  display:none;
  width:28px;
  height:28px;
  opacity:0;
  transition:opacity .2s ease;
}

/* Desktop-only brand polish */ /* CHANGED */
@media (min-width:861px){ /* CHANGED */
  .brand{
    gap:10px; /* CHANGED */
  }

  .brand-mobile-icon{
    display:block; /* CHANGED */
    width:42px; /* CHANGED */
    height:42px; /* CHANGED */
    opacity:1; /* CHANGED */
    flex:0 0 auto; /* CHANGED */
  }

  .brand-wordmark{
    height:42px;
    width:auto;
    border-radius:999px; /* CHANGED */
    overflow:hidden; /* CHANGED */
  }
}

nav ul{display:flex;gap:22px;list-style:none}
nav a{font-weight:650}
nav a:hover{opacity:.75}

.hamburger{
  display:none;
  border:1px solid var(--border);
  border-radius:10px;
  padding:4px 12px;
  background:#fff;
  cursor:pointer;
}

.hamburger span{
  display:block;
  width:14px;   /* CHANGED */
  height:2px;
  background:#0b0f14;
  margin:3px 0; /* CHANGED */
  border-radius:2px;
}

@media (max-width:860px){
  nav ul{
    display:none;
    position:absolute;
    top:64px;left:0;right:0;
    background:#fff;
    border-bottom:1px solid var(--border);
    flex-direction:column;
    padding:12px;
  }
  nav ul.open{display:flex}
  .hamburger{display:block}
}

/* Hero */
.hero{
  position:relative;
  background:linear-gradient(180deg,#ffffff 0%, var(--bg) 70%);
  padding:72px 0 32px;
}
.hero h1{
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.08;
  letter-spacing: 0;
}

.hero p{
  margin-top:12px;
  color:var(--muted);
}

.highlight{
  font-weight:800;
  color:#b35252;
  letter-spacing:.2px;
}
.hero .cta{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap}

.badges{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap}
.badges span{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--border);
}

/* Floating logo (stays visible) */
.hero-logo{
  position:absolute;
  right:10%;                 /* 🔧 was 6% → pushes logo LEFT */
  top:50%;
  transform:translateY(-50%);
  width:520px;
  height:auto;
  z-index:0;
  opacity:.05;               /* 🔧 was .08 → more subtle */
  pointer-events:none;
  transition:opacity .2s ease;
}

.hero-logo.is-dim{
  opacity:.05;               /* 🔧 was .55 → removes fade effect */
}
body.mobile-scrolled .hero-logo{opacity:0}
body.mobile-scrolled .brand-mobile-icon{opacity:1}

/* Sections */
section{padding:52px 0;border-top:none}
.section-title{font-size:24px;margin-bottom:16px}

/* Grids */
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{
  grid-template-columns:repeat(2,1fr);
  align-items:stretch; /* 🔧 ADDED */
}
@media (max-width:860px){.grid-3,.grid-2{grid-template-columns:1fr}}

/* Cards */
.card{
  background:#fff;
  border-radius:14px;
  padding:18px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.card h3{margin-bottom:8px;font-size:18px}

/* Check list */
ul.check{list-style:none}
ul.check li{padding-left:26px;position:relative;margin:6px 0}
ul.check li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--text);
  font-weight:800;
}

/* Gallery */
.gallery{display:grid;gap:10px;grid-template-columns:repeat(3,1fr)}
.gallery img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--border);
  background:#f7f7f7;
  cursor:zoom-in;
  transition:transform .15s ease, filter .15s ease, outline .15s ease;
}
.gallery img:hover{
  filter:brightness(.92);
  outline:2px solid var(--text);
  outline-offset:-2px;
  transform:scale(1.01);
}
@media (max-width:860px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.gallery{grid-template-columns:1fr;gap:8px}}

/* Contact */
/* Contact */
.contact{font-size:17px}

.contact .card{
  display:flex;              /* 🔧 ADDED */
  flex-direction:column;     /* 🔧 ADDED */
  height:100%;               /* 🔧 ADDED */
}

#contact-form{
  display:flex;              /* 🔧 ADDED */
  flex-direction:column;     /* 🔧 ADDED */
  height:100%;               /* 🔧 ADDED */
}

.input{
  width:100%;
  padding:12px;
  border:1px solid rgba(11,15,20,.22);
  border-radius:10px;
  outline:none;
  margin-bottom:10px;
  background:#fff;
  transition:box-shadow .15s ease, border-color .15s ease;
}
.input:focus{
  border-color:var(--text);
  box-shadow:0 0 0 3px rgba(11,15,20,.12);
}
textarea.input{
  min-height:120px;
  resize:vertical;
  flex:1 1 auto;            /* 🔧 ADDED */
}

/* Make contact info card match the form card rhythm (no HTML changes needed) */
.contact-info{
  display:flex;
  flex-direction:column;
  gap:12px;
  height:100%;               /* 🔧 ADDED */
}
.contact-info p{margin:0}
.contact-info p:not(.small){
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
}
.contact-info p:not(.small) strong{min-width:110px}
.contact-info p:not(.small) a{font-weight:650}

#contact-form .btn{
  width:100%;                /* 🔧 ADDED */
  margin-top:6px;            /* 🔧 ADDED */
}

.contact-info .btn{
  width:100%;                /* 🔧 CHANGED from max-content */
  margin-top:auto;           /* 🔧 CHANGED */
}

#contact-form .small{
  margin-top:10px;           /* 🔧 ADDED */
}

.contact-info .small{
  margin-top:10px;           /* 🔧 CHANGED */
}
@media (max-width:480px){
  .contact-info p:not(.small){
    justify-content:flex-start; /* CHANGED: stop pushing content to opposite sides */
    align-items:flex-start; /* CHANGED */
    gap:8px; /* CHANGED */
    flex-wrap:wrap; /* CHANGED: allow wrap instead of overflow */
  }

  .contact-info p:not(.small) strong{
    min-width:0; /* CHANGED: remove forced label width on mobile */
  }

  .contact-info p:not(.small) a,
  .contact-info p:not(.small) span{
    overflow-wrap:anywhere; /* CHANGED: lets long email/text wrap */
    word-break:break-word; /* CHANGED */
  }
}

/* Footer */
footer{padding:36px 0;background:var(--text);color:#dbe1e1}
.small{font-size:13px;color:#59656b}
.mt-10{margin-top:10px}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(11,15,20,.88);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:100;
}
.lightbox.open{display:flex}
.lb-img{
  max-width:min(92vw, 1100px);
  max-height:82vh;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow-md);
}
.lb-close,.lb-prev,.lb-next{
  position:absolute;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.35);
  color:#fff;
  width:44px;
  height:44px;
  border-radius:12px;
  cursor:pointer;
  font-size:28px;
  line-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lb-close{top:18px;right:18px;font-size:34px;line-height:42px}
.lb-prev{left:18px}
.lb-next{right:18px}

/* Mobile polish */
@media (max-width:480px){
  .container{padding:0 14px}
  section{padding:38px 0}

  header .nav{
    height:56px;
    padding-right:4px;
  }

  .brand-wordmark{height:28px}

  .brand{
    gap:16px;
  }

  .brand-mobile-icon{
    display:block;
    width:34px;
    height:34px;
  }

 .hamburger{
  display:block;
  margin-left:auto;
  margin-right:14px;
  padding:3px 8px; /* CHANGED */
}

  .hero{padding:132px 0 24px}

  .hero h1{
    font-size: clamp(26px, 7vw, 36px);
    line-height: 1.2;
  }

  .hero p{font-size:15px}

  .hero-logo{top:72px;left:14px;width:100px;opacity:.9}
  .input{font-size:16px}
}