:root{
  --sand: #F3E9D7;
  --mist: #D9E4E8;
  --sage: #7AA8A1;
  --blue: #3E6B89;
  --navy: #1E3A5F;
  --ink:  #243343;
  --text: #334155;
  --white: #ffffff;
  --shadow: 0 10px 30px rgba(30,58,95,.18);
  --radius: 16px;
  --arrow-w: 56px;
}

html,body{margin:0;padding:0;scroll-behavior:smooth;}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--sand);}    
h1,h2,h3,.brand{font-family:"Playfair Display",Georgia,serif;color:var(--ink);}    
a{color:inherit;text-decoration:none}
.container{width:min(1120px,92%);margin-inline:auto}
.btn{display:inline-block;padding:.9rem 1.2rem;border-radius:999px;background:linear-gradient(180deg,var(--blue),var(--navy));color:var(--white);font-weight:600;box-shadow:var(--shadow);transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn.alt{background:var(--white);color:var(--navy);border:1px solid #cbd5e1}
.card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow)}

/* ===== Header / Nav ===== */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.7);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid rgba(30,58,95,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0}
.brand{display:flex;gap:.75rem;align-items:center;font-weight:700}
.brand .mark{width:40px;height:40px;border-radius:10px;background:linear-gradient(180deg,var(--sand) 0%, var(--mist) 55%, var(--blue) 100%);position:relative;overflow:hidden;box-shadow:var(--shadow)}
.brand .mark svg{position:absolute;inset:auto 0 0 0;width:100%;opacity:.9}
nav a{padding:.5rem .75rem;border-radius:10px}
nav a:hover{background:rgba(62,107,137,.08)}
.nav-cta{display:flex;gap:.6rem;align-items:center}

/* ===== Hero ===== */
.hero{position:relative;isolation:isolate;}
.hero .wrap{padding:clamp(3rem,6vw,6rem) 0}
.hero-bg{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,var(--sand) 0%, var(--mist) 35%, var(--sage) 60%, var(--blue) 85%, var(--navy) 120%)}
.mountains{position:absolute;inset:auto 0 -1px 0;z-index:-1}
.hero h1{font-size:clamp(2.2rem,4.2vw,3.6rem);line-height:1.05;margin:.25rem 0}
.kicker{letter-spacing:.18em;text-transform:uppercase;color:#3c5a70;font-weight:600;font-size:.85rem}
.hero p{font-size:clamp(1.05rem,1.5vw,1.15rem);max-width:62ch;}
.cta-row{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.25rem}

/* ===== Sections ===== */
section{padding:clamp(2.5rem,5vw,4rem) 0}
.grid{display:grid;gap:1.25rem}
@media (min-width: 800px){.grid.cols-3{grid-template-columns:repeat(3,1fr)}}
.service{padding:1.25rem}
.service h3{margin:.2rem 0 .5rem;font-size:1.1rem}

/* ===== Gallery ===== */
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
@media (min-width: 720px){.gallery-grid{grid-template-columns:repeat(3,1fr);gap:.9rem}}
@media (min-width: 1100px){.gallery-grid{grid-template-columns:repeat(4,1fr)}}
.thumb{position:relative;overflow:hidden;border-radius:12px;line-height:0;background:#e5edf2}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3;transition:transform .25s ease}
.thumb:hover img{transform:scale(1.03)}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:80}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:84vh;border-radius:12px;box-shadow:var(--shadow)}
.lightbox button{position:absolute;top:14px;right:14px;border:0;background:#ffffff;border-radius:999px;padding:.5rem .6rem;cursor:pointer}

/* ==== About Us ===== */
#about .grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  align-items: start;
}

/* Desktop: switch to two columns */
@media (min-width: 900px) {
  #about .grid {
    grid-template-columns: 1.1fr 0.9fr; /* text | image */
    align-items: start;                 /* top alignment */
  }
}

/* Ensure the image fits nicely */
#about figure.card {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
}

#about figure.card img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 3; /* keeps consistent shape */
}


/* ===== Contact ===== */
.contact{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.95))}
.contact .wrap{display:grid;gap:1.5rem;align-items: start}
@media (min-width: 900px){.contact .wrap{grid-template-columns:1.1fr .9fr;align-items:center}}
@media (min-width: 900px){#contact form{max-width: 560px}}
form{display:grid;gap:.8rem}
form label{
  display: block;
  margin: 0 0 .85rem
}
form label .small{
  display: block;
  margin: 0 0 .35rem;
  font-weight: 600;
  line-height: 1.2;
  color: #3c5a70
}
form button[type="submit"]{
  margin-top: .25rem
}
input, textarea{padding:.9rem 1rem;border:1px solid #c8d3df;border-radius:12px;font-size:1rem;outline:none}
input:focus, textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(62,107,137,.15)}

/* ===== Reviews ===== */
.reviews{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(217,228,232,.6))}

.reviews .carousel {
  column-gap: 0;
  display:grid;
  /*grid-template-columns: minmax(44px,56px) 1fr minmax(44px,56px);*/
  grid-template-columns: var(--arrow-w) 1fr var(--arrow-w);
  /*grid-template-areas: "prev next track";*/
  align-items:stretch;
  position:relative;
  overflow:hidden;
  touch-action:pan-y;
}

.reviews .track{
  grid-column:2;
  display:flex;
  transition:transform .4s ease;
  position:relative; 
  z-index:1;
  min-width: 0;
  min-height: 0;
 /* grid-area: track;*/
  position: relative;
  z-index: 1;
 /* overflow: hidden;*/
}

.carousel button.prev{ grid-column:1;}
.carousel button.next{ grid-column:3;float: right;}

.carousel button{
  box-sizing: border-box;
  margin: 0;
  padding: 0;

  inline-size: var(--arrow-w);
  /* min-inline-size: var(--arrow-w);
  max-inline-size: var(--arrow-w);*/

  max-width: none;
  min-width: 0;

  block-size:100%;
  min-block-size:100%;

  align-self:stretch;
  justify-self: strech;
  height:auto;
  width:100%;
  min-width:44px;
  /* Visuals */
  background:rgba(62,107,137,0.12);
  border:0;
  color:var(--ink);
  white-space: nowrap;
  line-height: 1;
  font-size:1.8rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s;
  position:relative; /* allows z-index */
  z-index:2;
}

.carousel button:hover{background:rgba(62,107,137,0.25)}

@media (min-width:1024px){
  .reviews .carousel{ grid-template-columns: minmax(52px,64px) 1fr minmax(52px,64px); }
}

.review{background:var(--white);border-radius:16px;box-shadow:var(--shadow);padding:1.1rem;flex:0 0 100%;box-sizing:border-box}
@media(min-width:900px){.review{flex:0 0 33.333%}}
.review .stars{letter-spacing:.12rem;color:#f59e0b;font-size:1.1rem}
.review .meta{color:#51667a;font-size:.95rem}
/*.review p{overflow-wrap: anywhere;}*/

/* ===== Footer ===== */
footer{background:linear-gradient(180deg,var(--blue),var(--navy));color:var(--white)}
.footer{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;padding:1.25rem 0}
.small{opacity:.85;font-size:.95rem}
.social {object-fit:contain}
.social img{width:40px;height:40px}

/* ===== Mobile Tweaks ===== */
@media (max-width: 700px){
  .nav{gap:.5rem}
  nav{display:none}
  .nav.open nav{display:block;position:absolute;left:0;right:0;top:64px;background:#ffffff;border-bottom:1px solid rgba(30,58,95,.08);padding:.5rem .5rem 1rem}
  nav a{display:block;padding:.8rem 1rem;margin:.2rem 0}
  .nav-cta{display:none}
  .cta-row .btn{width:100%;text-align:center}
  .grid.cols-3{grid-template-columns:1fr}
  .container{width:min(760px,94%)}
}
.sticky-call{display:none}
@media (max-width:700px){
  .sticky-call{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:linear-gradient(180deg,var(--blue),var(--navy));gap:.5rem;padding:.5rem .75rem}
  .sticky-call a{flex:1}
  body{padding-bottom:64px}
}