html, body{
  background: #FAF7F2; /* background color */
}

/* ===== Fixed-width section + 12-column responsive grid ===== */

/* Content wrapper (keeps everything within a controlled max width) */
.section{
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 32px);
}

/* 12-column grid for flexible layouts (full-width, 3/4-width, etc.) */
.grid{
  display: grid;
  gap: clamp(32px, 5vw, 48px);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
}



/* ===============
   NAVIGATION BAR
   =============== */

.topbar{
  background:#7b8a5f;
  padding: 14px 22px;
}

/* Make header fixed + smooth show/hide */
.topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  transition: transform .22s ease;
}

/* Hidden state (scrolling down) */
.topbar.is-hidden{
  transform: translateY(-120%);
}

/* IMPORTANT: add padding so content doesn't go under the fixed bar */
body{
  padding-top: 100px; /* adjust if your topbar is taller/shorter */
}


.nav-wrap{
  display:flex;
  align-items:center;
  gap:16px;
}

.nav-logo{
  width:72px;
  height:72px;
  border-radius:50%;
  overflow:hidden;
  background:#fff;
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.nav-logo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.nav-links{
  flex:1;
  display:flex;
  justify-content:center;
  gap: clamp(10px, 3vw, 64px);
  font-family:"Playfair Display", serif;
  font-size: clamp(18px, 2vw, 28px);
}

.nav-links a{
  color:#fff;
  text-decoration:none;
  opacity:.9;
  padding:8px 6px;
  }

.nav-links a {
  display: inline-block; /* needed for transform */
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform-origin: center;
}

.nav-links a:hover {
  opacity: 1;
  transform: translateY(-1px) scale(1.05);
}

.nav-links a.is-active{
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 3px;
  opacity:1;
}

.nav-lang{
  margin-left: auto;
  display:flex;
  align-items:center;
  gap:8px;
  color:#fff;
  font-family:Inter, system-ui, sans-serif;
  font-weight:600;
}

.nav-lang a{
  color:#fff;
  text-decoration:none;
  opacity:.9;
}

.nav-lang a {
  display: inline-block; /* needed for transform */
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform-origin: center;
}

.nav-lang a:hover {
  opacity: 1;
  transform: translateY(-1px) scale(1.05);
}

.nav-lang a.is-active{
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

.nav-toggle{
  display:none;      /* hide on desktop */
  background:none;
  border:none;
  font-size: 28px;
  color:#fff;
  cursor:pointer;
}

/*=========================
  NEW Mobile NAV Second try*/
  
  /* Off-canvas panel (mobile) */ 
  .menu-overlay{ 
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    transition: opacity .22s ease;
    z-index: 999;
  }
  
  .mobile-panel{
    position: fixed;
    top: 0; right: 0;
    height: 100dvh;
    width: min(68vw, 180px);
    background: #7b8a5f;
    padding: 70px 10px 10px;
    
    /* 70px gives space under your topbar */
    transform: translateX(100%);
    transition: transform .26s ease; z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: -18px 0 40px rgba(0,0,0,.18);
  }
  
  .mobile-panel-links{
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: "Playfair Display", serif; font-size: 22px;
  }
  
  .mobile-panel-links a{
    color:#fff;
    text-decoration:none;
    opacity:.95;
    padding: 10px 6px;
    border-radius: 12px;
  }
  
  .mobile-panel-links a:hover{ 
  background: rgba(255,255,255,.10);
  }
  
  .mobile-panel-lang{
    margin-top: 40px;
    display: flex;
    justify-content: flex-start;
    gap: 10px; color:#fff;
    font-family: Inter, system-ui, sans-serif;
    font-weight: 700;
  }
  
  .mobile-panel-lang a{
    color:#fff;
    text-decoration:none;
    opacity:.95;
  }
  
  .mobile-panel-lang a {
    display: inline-block; /* needed for transform */
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform-origin: center;
  }

  .mobile-panel-lang a:hover {
    opacity: 1;
    transform: translateY(-1px) scale(1.05);
  }

  /* Open state */
  body.menu-open .menu-overlay{opacity: 1; } 
  body.menu-open .mobile-panel{ transform: translateX(0); }
  
  /* Only on mobile: hide desktop links/lang, show hamburger */
  @media (max-width: 700px){
    .nav-toggle{display:block; margin-left:auto; }
    .nav-links, .nav-lang{ display:none; } }



/* =========================
   Global radius (Figma: 20)
   ========================= */

:root{
  --radius: 20px;
}



/* ============
      Buttons 
   ============*/

.btn{
  appearance:none;
  border:none;
  cursor:pointer;
  border-radius:30px;
  padding:.6rem 1.15rem;
  font-weight:600;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: transform .12s ease, box-shadow .12s ease, opacity .15s;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.btn:hover{ transform: translateY(-1px); }

.btn.alt{
  background:#fff;
  color: var(--ink, #0d2b1f);
  border:1px solid #e7ecea;
  box-shadow:none;
}

/* White button (primary action) */
.btn--primary{
  background: rgba(255, 255, 255, 0.95);
  color: #000000;
  box-shadow: 0 6px 16px rgba(0,0,0,.14);
}

/* Green button (secondary action) */
.btn--secondary{
    background: #7A8B5E;
    color: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,.14);
}



/* ==========================================
   Hero / Header card (spans full grid width)
   ========================================== */

.hero-card{
  grid-column: 1 / -1;           /* takes all 12 columns */
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  transform: translateY(0);
  transition: transform .15s ease, box-shadow .15s ease;
  position: relative;

  /* header size */
  min-height: clamp(280px, 38vw, 460px);
  display: grid;
  place-items: center;           /* centers inner content */
}

/* Background image + overlay */
.hero-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.30)),
    var(--hero-image) center / cover no-repeat;
  transform: scale(1.02);        /* tiny scale to avoid edge seams */
}

.hero2-card{
  grid-column: 1 / -1;           /* takes all 12 columns */
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  transform: translateY(0);
  transition: transform .15s ease, box-shadow .15s ease;
  position: relative;

  /* header size */
  min-height: clamp(200px, 32vw, 320px);
  display: grid;
  place-items: center;           /* centers inner content */
}

/* Background image + overlay */
.hero2-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.30)),
    var(--hero-image) center / cover no-repeat;
  transform: scale(1.02);        /* tiny scale to avoid edge seams */
}

/* Content layer above background */
.hero-content{
  position: relative;
  z-index: 1;
  text-align: left;
  color: #fff;
  padding: clamp(18px, 3vw, 40px);
  }

/* Text etc. layout */
.hero-inner{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* Content starts at column 2 and spans 6 columns */
.hero-textblock{
  grid-column: 2 / span 6;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Title and text (tweak as you like) */
.hero-title{
  margin: 0 0 20px;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: clamp(1.9rem, 4vw + 1rem, 3.9rem);
  line-height: 1.08;
}

.hero-text{
  margin: 0 0 18px;
  font-size: clamp(1rem, .7vw + .95rem, 1.25rem);
  opacity: .95;
}

/* CTA area */
.hero-actions{
  display:flex;
  justify-content:left;
  gap: 12px;
  flex-wrap: wrap;
}

/* Make your existing button look good on dark image */
.hero-card .btn.alt{
  background: rgba(255,255,255,.92);
  color: #123326;
  border: 1px solid rgba(255,255,255,.55);
}

/* Mobile: ensure spacing stays nice */
@media (max-width: 420px){
  .hero-actions .btn{ width: 100%; }
}

/* Tablet */
@media (max-width: 980px){
  .hero-textblock{
    grid-column: 2 / span 8;
  }
}

/* Mobile */
@media (max-width: 620px){
  .hero-inner{
    grid-template-columns: 1fr;
  }
  .hero-textblock{
    grid-column: 1 / -1;
  }
}



/* ========================================================
What you will find
Two cards next to each other 3/4 full screen (text & image)
=========================================================== */

.card-box{
  background: #ffffff;
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  overflow: hidden;
}

.card-pair{
  grid-column: 1 / 10; /* 3/4 width with gap on right */
  display: grid;
  gap: clamp(14px, 2vw, 22px);
  grid-template-columns: 5fr 3fr; /* original 5fr 3fr */
  align-items: stretch; /* makes both cards same height */
}

/* Left card content (text card inside the pair) */
.card-pair-content{
  padding: clamp(2px, 0.2vw, 14px);
  display: flex;
  flex-direction: column;
  justify-content: top;
  gap: 2px;
}

/* Title */
.card-pair-title{
  margin: 20px 20px 16px;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.4rem, 1.6vw + 1rem, 2.2rem);
  color: #7b8a5f;
}

.card-pair-list {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-left: 36px;
}

.card-pair-list li{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: clamp(1.05rem, 1.1vw + 0.9rem, 1.55rem);
  line-height: 1;
  color: #7b8a5f;
  margin-bottom: 10px;
}

/* Arrow / chevron */
.card-pair-list li::before{
  content: "›";
  font-size: clamp(1.4rem, 1.4vw + 1rem, 2.2rem);;
  line-height: 0.5;
  flex-shrink: 0;         /* arrow never squashes */
  margin-top: 0.05em; /* tiny optical alignment */
}

/* Right card is image-only */
.card-pair .pair-image{
  padding: 0;
  height: 260px;   /* controls the box height */
  display: flex;
}

.card-pair .pair-image img{
  width: 100%;
  max-width: 380px;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive: stack */
@media (max-width: 700px){
  .card-pair{ grid-column: 1 / -1; } /* full width */
}

@media (max-width: 600px){
  .card-pair{
    grid-column: 1/-1;
    grid-template-columns: 1fr;
  }
  .card-pair .pair-image{
    height: 220px;
  }

    /* apply object-fit to the IMG (not the container) */
  .card-pair .pair-image img{
    max-width: none;        /* ✅ prevents weird shrinking */
    width: 100%;
    object-fit: cover;    /* ✅ shows full image */
    object-position: center;
  }

  .card-pair-content{
    padding-bottom: clamp(14px, 3vw, 32px);
  }
}



/* ======================
   Parking spots section
   ====================== */

.parking-section{
  grid-column: 1 / -1;                /* full width like hero */
}

.parking-title{
  margin: 0 0 16px;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: clamp(1.8rem, 2.2vw + 1rem, 3rem);
  color: #7b8a5f;
}

.parking-image{
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  overflow: hidden;
}

.parking-image img{
  width: 100%;
  height: auto;                      /* ✅ height adapts to image */
  display: block;
  object-fit: contain;               /* keeps parking map readable */
}



/* ======================
   Gallery Preview (12)
   ====================== */

.gallery-preview-section{
  grid-column: 1 / -1; /* full width like hero/awards */
}

.gallery-preview-title{
  margin: 0 0 14px;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: clamp(1.8rem, 2.2vw + 1rem, 3rem);
  color: #7b8a5f;
}

/* Carousel wrapper */
.gallery-preview-carousel{
  position: relative;
}

.gallery-preview-carousel::before{
  z-index: 2;
  content:"";
  pointer-events:none;
  position:absolute;
  right:0;
  top:0;
  width:84px;
  height:100%;
  background: linear-gradient(
    to left,
    #FAF7F2,
    rgba(255,255,255,0)
  );
}

.gallery-preview-item{
   scroll-snap-align: start;
  flex: 0 0 auto;
  width: 170px;            /* controls visible count like awards */
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #e6e6e6;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

.gallery-preview-item img{
  width: 100%;
  aspect-ratio: 1 / 1; /* clean square grid */
  object-fit: cover;
  display: block;
}

/* Nav buttons */
.gallery-preview-nav{
  position:absolute;
  z-index: 5;
  top:45%;
  transform: translateY(-50%);
  width:40px;
  height:40px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  background:#fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  display:grid;
  place-items:center;
  font-size:22px;
  color:#0d2b1f;
  opacity:.90;
}

.gallery-preview-nav.prev{ left:8px; }
.gallery-preview-nav.next{ right:8px; }

.gallery-preview-track{
  position: relative;
  z-index: 1;
  display: flex;
  gap: clamp(14px, 2.4vw, 28px);
  overflow-x: auto;
  padding: 6px 52px 18px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: thin;
  scrollbar-color: #7b8a5f #faf7f2;
}

.gallery-preview-cta{
  display: flex;
  justify-content: flex-start;
  margin-top: 18px;
  margin-left: 18x;
}

.gallery-preview-track::-webkit-scrollbar-track{
  background: #faf7f2;
  border-radius: 999px;
  margin: 0 52px; /* match padding */
}

.gallery-preview-track::-webkit-scrollbar-thumb{
  background: linear-gradient(to right, #7b8a5f, #6a7752);
  border-radius: 999px;
  border: 2px solid #faf7f2;
  transition: background 0.2s ease;
}

.gallery-preview-track::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(to right, #6a7752, #5a6642);
}

/* Responsive */
@media (max-width: 620px){
  .gallery-preview-track{
    padding-left: 64x;
    scroll-padding-left: 64px;
  }
}



/* =========================
   Visit our Webshop
   Wide CTA banner (Webshop)
   ========================= */

.wide-cta{
  grid-column: 1 / -1;                 /* full width like the hero */
  background: #7b8a5f;                 /* your navbar green */
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  padding: clamp(14px, 2vw, 20px) clamp(18px, 3vw, 26px);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Left side: title + chevrons */
.wide-cta-left{
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0; /* prevents overflow issues */
}

.wide-cta-title{
  margin: 0;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  color: #f6f3ee;
  font-size: clamp(1.4rem, 2vw + 1rem, 2.6rem);
  line-height: 1.1;
  white-space: nowrap;
}

.wide-cta-icon{
  color: #f6f3ee;
  font-size: clamp(1.6rem, 2.2vw + 1rem, 2.6rem);
  line-height: 1;
  opacity: .95;
}

/* Tablet */
@media (max-width: 860px){
  .wide-cta{
    gap: 14px;
  }
}

/* Phone */
@media (max-width: 620px){
  .wide-cta{
    flex-direction: column;
    align-items: flex-start;
  }
  .wide-cta .btn{
    width: 88%;
  }
  .wide-cta-title{
    white-space: normal;
    overflow-wrap: anywhere;
  }
}



/*================================
  Our Offer
  Two Cards in One 3/4 full screen
  ================================*/

/* =================
   Outer box/Card */

.offer-section{
  grid-column: 1 / 10; /* 3/4 width with right gap */
  background: #fff;
  padding: clamp(18px, 3vw, 28px);
}

/* Title */
.offer-title{
  margin: 0 0 14px;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 2vw + 1rem, 2.6rem);
  color: #7b8a5f;
}

/* Grid for the two inner cards */
.offer-grid{
  display: grid;
  gap: clamp(14px, 2vw, 22px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ===================
   Inner offer cards*/

.offer-card{
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  min-height: 230px;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

/* Background image */
.offer-card img{
  max-height: 230px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
}

/* Dark overlay for readability */
.offer-card::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(10, 50
  , 25, 0.80), rgba(5, 26, 10, 0.70));
}

/* Content overlay */
.offer-card-content{
  position:absolute;
  inset:0;
  z-index: 1;
  padding: clamp(16px, 2vw, 22px);
  padding-left: clamp(28px, 3vw, 42px);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
}

.offer-card-heading{
  margin: 0;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 1.2vw + 1rem, 2rem);
  line-height: 1.05;
}

/* Bullets */
.offer-list{
  margin: 0;
  padding-left: 18px;
  font-size: 1.05rem;
  line-height: 1.55;
}
.offer-list li{ margin: 4px 0; }

/* Button row */
.offer-actions{
  margin-top: 16px;
  display: flex;
}

/* Make the green button look like your screenshot inside this card */
.offer-actions .btn{
  border-radius: 860px;
  padding: .75rem 1.2rem;
  font-weight: 700;
}

/* Responsive */
@media (max-width: 700px){
  .offer-section{
    grid-column: 1 / -1; /* full width like hero */
  }
}

@media (max-width: 480px){
  .offer-grid{
    grid-template-columns: 1fr;
  }
  .offer-card{
    min-height: 200px;
  }
  .offer-actions .btn{
    width: 100%;
  }
}



/* =========================
   Where to find us (2 cards)
   ========================= */

.location-pair{
  grid-column: 1 / -1; /* same width as hero */
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(14px, 2vw, 22px);
  align-items: stretch;
}

/* Left info card */
.location-info{
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  padding: clamp(18px, 3vw, 28px);
}

/* Title */
.location-title{
  margin: 0 0 18px;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 2.2vw + 1rem, 3rem);
  color: #7b8a5f;
}

/* Address row (text + buttons on the right) */
.location-row{
  display: grid;
  background: #fff;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: start;
}

.location-label{
  margin: 0 0 8px;
  font-weight: 800;
}

.location-address{
  margin: 0;
  line-height: 1.35;
}

/* Buttons stacked like your design */
.location-actions{
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}

/* Opening hours pill */
.location-hours{
  margin-top: 18px;
  background: #7b8a5f;
  color: #fff;
  border-radius: var(--radius);
  padding: 14px 16px;
  max-width: 430px;
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
}

.location-hours h3{
  margin: 0 0 10px;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 1.2rem;
}

.location-hours table{
  width: 100%;
  border-collapse: collapse;
  font-weight: 600;
}

.location-hours td{
  padding: 2px 0;
  vertical-align: top;
}

.location-hours .note{
  margin: 8px 0 0;
  font-size: .9rem;
  opacity: .95;
}

/* Right map card */
.location-map{
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  overflow: hidden;
  min-height: 320px; /* controls map “window” height */
  position: relative;     /* IMPORTANT: makes overlay buttons anchor to the map */
  min-width: 0;
}

/* Makes iframe responsive (IGNORE Google's width/height) */
.location-map iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Map Reload button */
.location-map .map-reload{
  position: absolute;
  right: 14px;
  top: 14px;
  bottom: auto;
  z-index: 2;

  border-radius: 999px;
  padding: .55rem .9rem;
  font-weight: 700;
  font-size: .95rem;
  background: rgba(255,255,255,0.92);    /* subtle / glassy */
  color: #0d2b1f;
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
  opacity: .82;
  transition: opacity .15s ease, transform .12s ease;
}

.location-map .map-reload:hover{
  opacity: 1;
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 820px){
  .location-pair{
    grid-template-columns: 1fr;
  }
  .location-actions{
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  .location-map{
    min-height: 260px;
  }
}

@media (max-width: 520px){
  .location-row{
    grid-template-columns: 1fr;
  }
  .location-actions{
    flex-direction: column;
    align-items: center;
  }
  .location-actions .btn{
    width: 95%;
  }
}



/* ======================
   Our Certified Florist
   Simple 2 in 1 Card
   ====================== */

.expert-section{
  grid-column: 1 / 10;            /* same width as hero */
  background: #fff; 
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  overflow: hidden;

  display: grid;
  grid-template-columns: 7fr 5fr; /* text / image ratio like screenshot */
  align-items: stretch;
}

/* Left side */
.expert-content{
  padding: clamp(18px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.expert-title{
  margin: 0;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 1.6vw + 1rem, 2.2rem);
  color: #7b8a5f;
  line-height: 1.05;
}

.expert-text{
  margin: 0;
  max-width: 44ch;
  font-size: clamp(1rem, .6vw + .95rem, 1.15rem);
  line-height: 1.5;
  opacity: .95;
}

.expert-actions{
  margin-top: 10px;
  display: flex;
}

/* Right side image */
.expert-image{
  position: relative;
  min-height: 280px; /* sets the card height on desktop */;
}

.expert-image img{
  width: 100%;
  max-width: 380px;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* "Shadow" on the LEFT side of the image */
.expert-image::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,0) 40%);
  pointer-events:none;
}

/* Responsive */
@media (max-width: 700px){
  .expert-section{grid-column: 1 / -1;}
}

@media (max-width: 440px){
  .expert-section{
    grid-column: 1/-1;
    grid-template-columns: 1fr;
  }
}


@media (max-width: 520px){
  .expert-actions .btn{
    width: 95%;
  }
}



/* ======================
   Awards / Certificates
   Sliding Selection
   ====================== */

.awards-section{
  grid-column: 1 / -1; /* full width like hero */
}

.awards-title{
  margin: 0 0 14px;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: clamp(1.8rem, 2.2vw + 1rem, 3rem);
  color: #7b8a5f;
}

/* Carousel wrapper */
.awards-carousel{
  position: relative;
}

.awards-carousel::before{
  content:"";
  pointer-events:none;
  position:absolute;
  right:0;
  top:0;
  width:84px;
  height:100%;
  background: linear-gradient(
    to left,
    #FAF7F2,
    rgba(255,255,255,0)
  );
}

/* Scroll container */
.awards-track{
  display: flex;
  gap: clamp(18px, 2.6vw, 46px);
  overflow-x: auto;
  padding: 6px 52px 18px; /* room for nav buttons */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  /* nicer “mobile swipe” feel */
  -webkit-overflow-scrolling: touch;
  
  /* Custom scrollbar styling for Firefox */
  scrollbar-width: thin;
  scrollbar-color: #7b8a5f #faf7f2; /* thumb color, track color */
}

/* Webkit scrollbar styling for awards carousel (Chrome, Safari, Edge) */
.awards-track::-webkit-scrollbar{
  height: 10px;
}

.awards-track::-webkit-scrollbar-track{
  background: #faf7f2;
  border-radius: 999px;
  margin: 0 52px; /* match padding */
}

.awards-track::-webkit-scrollbar-thumb{
  background: linear-gradient(to right, #7b8a5f, #6a7752);
  border-radius: 999px;
  border: 2px solid #faf7f2;
  transition: background 0.2s ease;
}

.awards-track::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(to right, #6a7752, #5a6642);
}

/* Each item */
.award-card{
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 170px; /* controls how many are visible */
  text-align: center;
}

.award-avatar{
  width: 110px;
  height: 110px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
  margin: 0 auto 12px;
}

.award-name{
  margin: 0;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.05;
  color: #1b1b1b;
}

.award-date{
  margin: 6px 0 0;
  font-size: .95rem;
  opacity: .85;
  color: #1b1b1b;
}

/* Nav buttons (desktop) */
.awards-nav{
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  color: #0d2b1f;
  opacity: .95;
}

.awards-nav.prev{ left: 8px; }
.awards-nav.next{ right: 8px; }

/* Hide buttons on small screens (swipe instead) */
@media (max-width: 620px){
  .awards-track{ padding-left: 16px; padding-right: 16px; }
}



/* ==================
   Contact page Title
   ================== */
.contact-page{
  text-align: center;
  margin: 10px 0;
  font-family: "Playfair Display",serif;
  font-size: clamp(1.2rem, 3vw, 2rem);
  font-weight: 500;
  color: #6a7752;
} 

/* ====================
   Contact information
   Simple 2 in 1 Card
   ==================== */

.contact-section{
  grid-column: 1 / 10;                  /* 3/4 width like your sections */
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  overflow: hidden;

  display: grid;
  grid-template-columns: 7fr 5fr;    /* text / image */
  align-items: stretch;
}

/* Left side */
.contact-left{
  padding: clamp(18px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.contact-title{
  margin: 0;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: clamp(1.4rem, 1.6vw + 1rem, 2.2rem);
  color: #7b8a5f;
  line-height: 1.05;
}

/* List layout */
.contact-list{
  list-style: none;
  margin: 10px;
  padding: 0;
  display: grid;
  gap: 14px;
}

.contact-item{
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  column-gap: 14px;
}

/* Icons */
.contact-icon{
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* PNG icons */
.contact-icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Pills */
.contact-pill{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: .55rem .9rem;
  border-radius: 999px;
  background: #ffffff;
  color: #0d2b1f;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
  border: 1px solid rgba(0,0,0,.06);

  /* allow long text (email) to wrap on small screens */
  overflow-wrap: anywhere;
}

.contact-pill:hover{
  transform: translateY(-1px);
}

/* Right side image */
.contact-image{
  position: relative;
  min-height: 260px;
}

.contact-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* subtle shadow line on the left edge of the image */
.contact-image::before{
  content:"";
  position:absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,0)40%);
  pointer-events: none;
}

/* Responsive */
@media (max-width: 700px){
  .contact-section{
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px){
  .contact-section{
    grid-template-columns: 1fr;
  }
  .contact-image{
    min-height: 220px;
  }
}



/* =========================
   Social section (full width)
   ========================= */

.social-section{
  grid-column: 1 / -1; /* FULL WIDTH like hero */
  background: #fff;
  padding: clamp(4px, 3vw, 28px);
}

.social-title{
  margin: 0 0 16px;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 2vw + 1rem, 2.6rem);
  color: #7b8a5f;
}

.social-grid{
  display: grid;
  gap: clamp(16px, 2.5vw, 28px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.social-window{
  background: #fbf8f4;
  border-radius: var(--radius);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  padding: 16px;
  overflow: hidden;
  min-width: 0;
}

.social-window{
  display: flex;
  flex-direction: column;
}

.social-window-title{
  margin: 0 0 12px;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: #7b8a5f;
}

/* Force embeds to respect container */
.social-window iframe,
.social-window blockquote{
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Buttons belong to the card */
.social-window-actions{
  margin-top: 14px;
  display: flex;
}

/* On desktop: keep button aligned left under its window */
.social-window-actions .btn{
  width: auto;
}

/* Actions */
.social-actions{
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Embed area takes the available space, actions sit at bottom */
.social-embed{
  min-width: 0;
}

.social-actions .btn{
  border-radius: 860px;
  padding: .75rem 1.2rem;
  font-weight: 700;
}

/* Responsive */
@media (max-width: 720px){
  .social-grid{
    grid-template-columns: 1fr;
  }

  .social-actions .btn{
    width: 100%;
  }
}

/* On mobile: button should be full width under its own window */
@media (max-width: 720px){
  .social-window-actions .btn{
    width: 100%;
  }
}

@media (max-width: 420px){

  /* Keep the outer Social section card as the only "card" */
  .social-section{
    padding: 0;                 /* remove inner padding so windows can be full width */
  }

  .social-title{
    padding: 18px 18px 10px;    /* keep nice spacing for the title */
    margin: 0;
  }

  /* Stack */
  .social-grid{
    grid-template-columns: 1fr;
    gap: 0;                      /* no gap between inner windows */
  }

  /* Remove inner "window card" styling so they become full-width */
  .social-window{
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }

  /* Add simple separators between Instagram and TikTok */
  .social-window + .social-window{
    border-top: 1px solid rgba(0,0,0,.10);
  }

  /* Make the embed itself take full width (no rounding that cuts content) */
  .social-embed{
    border-radius: 0;
    overflow: hidden;
  }

  /* Actions: make buttons full width and aligned nicely */
  .social-window-actions{
    padding: 14px 18px 18px;
    display: flex;
  }

  .social-window-actions .btn{
    width: 100%;
  }

  /* Optional: give each window title its own padding */
  .social-window-title{
    padding: 14px 18px 10px;
    margin: 0;
  }
}



/* =========================
   Gallery section
   ========================= */

.gallery-section{
  grid-column: 1 / -1;               /* full width like hero */
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  padding: clamp(18px, 3vw, 28px);
  overflow: hidden;
}

.gallery-title{
  margin: 0 0 14px;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 2vw + 1rem, 2.6rem);
  color: #7b8a5f;
}

/* Filter bar (scrollable on mobile) */
.gallery-filters{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 18px 0 20px;
  margin: 0;
  background: transparent;
  overflow-y: auto;
  border-radius: var(--radius);
  box-shadow: none;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;            /* Firefox */
  scrollbar-color: #7b8a5f #fbf8f4;  /* thumb color, track color */
}

.gallery-filters-nav{
  position: static;
  transform: none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  display: grid;
  place-items: center;
  font-size: 20px;
  color: #0d2b1f;
  opacity: .55;
  flex: 0 0 auto;
}
.gallery-filters-nav:hover{ opacity: .85; }

.gallery-filters::-webkit-scrollbar{
  height: 10px;
}
.gallery-filters::-webkit-scrollbar-track{
  background: #fbf8f4;
  border-radius: 999px;
  margin: 0 12px; /* match padding */
}
.gallery-filters::-webkit-scrollbar-thumb{
  background: linear-gradient(to right, #7b8a5f, #6a7752);
  border-radius: 999px;
  border: 2px solid #fbf8f4;
  transition: background 0.2s ease;
}
.gallery-filters::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(to right, #6a7752, #5a6642);
}

.gallery-filter{
  flex: 0 0 auto;
  border: none;
  cursor: pointer;
  padding: .65rem 1.05rem;
  border-radius: 999px;
  font-weight: 700;
  background: #ffffff;
  color: #0d2b1f;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
  transition: transform .12s ease, opacity .15s ease;
  white-space: nowrap;
}
.gallery-filter:hover{ transform: translateY(-1px); }

.gallery-filter.is-active{
  background: #7b8a5f;
  color: #fff;
}

/* Wrapper for gradient fades */
.gallery-filters-wrap{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  margin: 0 0 18px;           /* moved from .gallery-filters if you want */
  border-radius: var(--radius);
  background: #fbf8f4;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
  overflow: hidden;           /* clips the gradient nicely to rounded corners */
}



/* Grid */
.gallery-grid{
  display: grid;
  gap: clamp(12px, 2vw, 18px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Items */
.gallery-item{
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #e6e6e6;               /* placeholder background */
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  transform: translateY(0);
  transition: transform .18s ease, opacity .18s ease;
}

.gallery-item img{
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;               /* square like your mock */
  object-fit: cover;
  display: block;
}

/* Hide / show animation states */
.gallery-item.is-hidden{
  opacity: 0;
  transform: scale(.98);
  pointer-events: none;
  display: none;                      /* simple + safe */
}

.gallery-more{
  display:flex;
  justify-content:center;
  margin-top: 10px;
}

.gallery-counter{
  display: flex;
  justify-content: center;
  margin: 20px 0 10px;
  font-family: sans-serif;
  font-weight: 600;
  color: #596444;
  font-size: .95rem;
  text-align: center;
}


/* Responsive */
@media (max-width: 900px){
  .gallery-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .gallery-grid{ grid-template-columns: 1fr; }
}







/* ======================
   FOOTER
   ====================== */

.site-footer{
  background: #7b8a5f; /* same green as navbar */
  color: #f6f3ee;
  margin-top: clamp(40px, 6vw, 80px);
}

.footer-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 48px);
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: clamp(20px, 4vw, 48px);
  align-items: start;
}

/* Brand */
.footer-brand img{
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 12px;
}

.footer-tagline{
  margin: 0;
  font-size: .95rem;
  opacity: .9;
}

/* Links */
.footer-links{
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: "Playfair Display", serif;
  font-size: 1.05rem;
}

.footer-links a{
  color: #fff;
  text-decoration: none;
  opacity: .9;
}
.footer-links a:hover{
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Contact */
.footer-contact{
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: .95rem;
}

.footer-contact a{
  color: #fff;
  text-decoration: none;
  opacity: .9;
}
.footer-contact a:hover{
  opacity: 1;
}

/* Bottom bar */
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.25);
  text-align: center;
  padding: 14px 16px;
  font-size: .85rem;
  opacity: .9;
}

/* Mobile */
@media (max-width: 700px){
  .footer-wrap{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-links,
  .footer-contact{
    align-items: center;
  }
}







/* =========================
   Under construction card
   ========================= */

.construction-card {
  grid-column: 2 / 12; /* centered, same logic as your other cards */
  margin: clamp(60px, 10vh, 120px) auto;
  padding: clamp(28px, 4vw, 40px);

  background: #f7f4ef;
  border-radius: 18px;
  text-align: center;

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
}

.construction-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.construction-card h1 {
  font-family: "Playfair Display", serif;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 600;
  margin-bottom: 8px;
  color: #5f6f52; /* your logo green tone */
}

.construction-card p {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: #6f6f6f;
  max-width: 360px;
  margin: 0 auto;
}

/* Mobile adjustment */
@media (max-width: 620px) {
  .construction-card {
    grid-column: 1 / -1;
    margin: 48px 16px;
  }
}



/* ======================
   Responsive breakpoints
   ====================== */

/* Tablet: reduce to 8 columns (still flexible) */
@media (max-width: 980px){
  .grid{
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

/* Mobile: single column stack */
@media (max-width: 620px){
  .grid{
    grid-template-columns: 1fr;
  }
}

/* Let grid/flex children actually shrink instead of overflowing */
.grid > * { min-width: 0; }
.card-pair, .wide-cta, .location-pair, .expert-section { min-width: 0; }

*, *::before, *::after { box-sizing: border-box; }