:root{
  --primary:#1f6b63;
  --primary-dark:#154742;
  --accent:#f4a261;
  --bg:#f7f7f7;
  --text:#222;
  --muted:#555;
  --max-width:1100px;
}

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

html,body{width:100%;overflow-x:hidden;}

body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.6;
}

img{max-width:100%;height:auto;display:block;}

a{color:var(--primary-dark);text-decoration:none;}
a:hover{text-decoration:underline;}

/* HEADER */
header{
  position:sticky;top:0;z-index:999;
  background:#fff;
  box-shadow:0 2px 4px rgba(0,0,0,0.06);
}

.top-bar{
  background:var(--primary-dark);
  color:#fff;
  font-size:0.9rem;
}

.top-bar-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0.5rem 1rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:0.75rem;
  flex-wrap:wrap;
}

.top-bar-left{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}

.top-bar-right{
  display:flex;
  gap:0.5rem;
  flex-wrap:wrap;
}

.btn-top{
  padding:0.35rem 0.75rem;
  border-radius:999px;
  background:var(--accent);
  color:#222;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* NAV */
.nav-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0.6rem 1rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:0.75rem;
  flex-wrap:wrap;
}

.logo{
  display:flex;
  align-items:center;
  gap:0.5rem;
  font-size:1.15rem;
  font-weight:800;
  color:var(--primary-dark);
}

.logo img{height:40px;width:auto;}

nav ul{
  list-style:none;
  display:flex;
  gap:0.9rem;
  flex-wrap:wrap;
}

nav a{color:var(--muted);font-weight:600;}
nav a:hover{color:var(--primary-dark);}

/* SECTIONS */
section{padding:2rem 1rem;}
section:nth-of-type(even){background:var(--bg);}

.section-inner{
  max-width:var(--max-width);
  margin:0 auto;
}

.section-title{
  font-size:1.7rem;
  color:var(--primary-dark);
  margin-bottom:0.6rem;
}

.section-intro{
  max-width:680px;
  color:var(--muted);
  margin-bottom:1.5rem;
}

/* HERO */
#top{
  background:linear-gradient(135deg,#edf6f9,#fff);
  border-bottom:1px solid #eaeaea;
}

.hero-inner{
  max-width:var(--max-width);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,2.2fr);
  gap:2rem;
  align-items:center;
}

.hero-title{font-size:2.2rem;color:var(--primary-dark);margin-bottom:0.5rem;}
.hero-subtitle{color:var(--muted);margin-bottom:1.2rem;}

.hero-buttons{
  display:flex;
  gap:0.75rem;
  flex-wrap:wrap;
  margin-bottom:1rem;
}

.btn{
  padding:0.75rem 1.4rem;
  border-radius:999px;
  font-weight:800;
  border:2px solid transparent;
  font-size:1rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-dark);}

.btn-outline{
  background:transparent;
  color:var(--primary-dark);
  border:2px solid var(--primary-dark);
}
.btn-outline:hover{background:var(--primary-dark);color:#fff;}

.hero-image{
  border-radius:12px;
  overflow:hidden;
  border:1px solid #dde4e5;
  background:#dde4e5;
}

/* CARDS / GRIDS */
.unit-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.25rem;
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.25rem;
}

.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.25rem;
}

.unit-card,.feature-card,.step{
  background:#fff;
  border-radius:12px;
  padding:1.2rem;
  border:1px solid #e1e4e5;
}

.step-number{
  background:var(--primary);
  color:#fff;
  width:28px;height:28px;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:50%;
  margin-bottom:0.5rem;
  font-weight:800;
}

/* PHOTO STRIP */
.photo-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:0.75rem;
}

.photo-box{
  background:#dfe7ea;
  border-radius:12px;
  border:1px solid #cfd7da;
  overflow:hidden;
}

/* FAQ */
details{
  background:#fff;
  border-radius:10px;
  padding:0.8rem 1rem;
  border:1px solid #e1e4e5;
  margin-bottom:0.6rem;
}

/* LOCATION */
.location-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,2fr);
  gap:1.5rem;
}

.map-placeholder{
  height:450px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid #cfd7da;
  background:#dfe7ea;
}
.map-placeholder iframe{width:100%;height:100%;border:0;}

/* CONTACT */
.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:2rem;
  align-items:flex-start;
}

.contact-grid form{
  width:100%;
  max-width:100%;
  display:grid;
  gap:0.6rem;
}

.contact-grid label{
  font-size:0.95rem;
  font-weight:800;
  color:var(--primary-dark);
  margin-bottom:0.15rem;
}

.contact-grid input,
.contact-grid textarea{
  width:100%;
  padding:0.55rem 0.65rem;
  border-radius:8px;
  border:1px solid #ccd3d6;
  font-size:1rem;
  font-family:inherit;
}

.contact-grid textarea{resize:vertical;min-height:110px;}

.contact-grid form .btn{justify-self:start;margin-top:0.5rem;}

/* SMS CHECKBOX */
.form-checkbox{
  display:grid;
  grid-template-columns:20px 1fr;
  column-gap:0.75rem;
  align-items:start;
  width:100%;
  margin:0.25rem 0 0.5rem;
}

.form-checkbox input[type="checkbox"]{
  margin-top:0.25rem;
  transform:scale(1.1);
}

.form-checkbox .sms-label{
  width:100%;
  min-width:0;
  font-size:0.92rem;
  font-weight:500;
  line-height:1.35;
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
}

/* FOOTER */
footer{
  background:#111;
  color:#eee;
  padding:1.5rem 1rem;
  text-align:center;
}

footer a{color:#0F5E41;font-weight:700;}

/* MOBILE */
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-image{order:-1;}
  .location-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
}

@media (max-width: 600px){
  section{padding:1.5rem 1rem;}
  .hero-title{font-size:1.75rem;}
  .btn{width:100%;}
  .top-bar-inner{padding:0.5rem 0.75rem;}
  .nav-inner{padding:0.6rem 0.75rem;}
  nav ul{gap:0.4rem 0.8rem;}
}

/* --- Gallery fix: remove empty space in cards, no cropping --- */
.gallery-card,
.gallery-item,
.gallery-box,
.photo-card,
.card { 
  height: auto !important;
  min-height: 0 !important;
}

.gallery-card img,
.gallery-item img,
.gallery-box img,
.photo-card img,
.card img {
  width: 100% !important;
  height: auto !important;      /* keeps original proportions */
  display: block !important;    /* removes the little bottom gap */
}

/* --- Photo strip: make each card shrink to the image (no empty space, no cropping) --- */
.photo-box{
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden;          /* keeps corners clean if you have rounding */
}

.photo-box img{
  width: 100% !important;
  height: auto !important;   /* preserves original proportions */
  display: block !important; /* removes any extra gap under image */
}
/* --- Fix: grid is stretching the photo cards --- */
.photo-strip{
  align-items: start !important;
  grid-auto-rows: auto !important;
}

.photo-box{
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  align-self: start !important;
}

.photo-box img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
}
/* ================================
   PHOTO STRIP – UNIFORM GALLERY
   ================================ */

.photo-strip{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  align-items: start;
}

.photo-box{
  height: 170px;              /* uniform height – adjust if desired */
  border-radius: 14px;
  overflow: hidden;
  background: #dfe7ea;
}

.photo-box img{
  width: 100%;
  height: 100%;
  object-fit: cover;          /* uniform cards, minimal cropping */
  display: block;
}
/* ===== FORCE uniform photo cards in the #photos gallery ===== */

#photos .photo-strip{
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 18px !important;

  /* prevent any stretching behavior from earlier rules */
  align-items: start !important;
  grid-auto-rows: 170px !important;  /* KEY: forces uniform row height */
}

#photos .photo-strip > .photo-box{
  height: 170px !important;
  min-height: 170px !important;
  max-height: 170px !important;

  padding: 0 !important;
  margin: 0 !important;

  overflow: hidden !important;
  border-radius: 14px !important;
  background: #dfe7ea !important;
}

/* If any prior CSS sets aspect-ratio on the image/box, kill it */
#photos .photo-strip > .photo-box,
#photos .photo-strip > .photo-box img{
  aspect-ratio: auto !important;
}

#photos .photo-strip > .photo-box img{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important; /* uniform look */
}

/* Hide the empty placeholder boxes (your HTML shows several empty .photo-box divs) */
#photos .photo-strip > .photo-box:empty{
  display: none !important;
}