/* Root / Reset */
:root{
  --bg: #f4efe6;
  --surface: #fdf4e6;
  --text: #1f2723;
  --muted: #56635c;
  --accent: #8bb174;
  --shadow: 0 8px 26px rgba(0,0,0,.12);
  --radius: 18px;
  --wrapper: 1100px;
  --dotdiameter: 15px;
}
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font: 16px/1.6 "Source Serif 4", Georgia, serif;
  color: var(--text);
  background:
    radial-gradient(900px 500px at 20% -10%, rgba(139,177,116,0.10), transparent 60%),
    var(--bg);
}
.wrapper{ width: min(100% - 2rem, var(--wrapper)); margin-inline:auto; }

.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ left: 1rem; top: 1rem; width:auto; height:auto; padding:.5rem .75rem; background:#000; color:#fff; z-index:9999; border-radius:.25rem; }

/* Hero */
.hero{
  position: relative;
  display: grid;
  place-items: center;
  background: var(--bg);
  border-bottom: 0;
}
.hero__overlay{ 
  display: none;
}
.hero__content{ position: relative; text-align: left; padding: 30px 0; }
.hero__title{ color: var(--text); font-size: clamp(1.8rem, 3vw + 1rem, 3rem); margin: 0 0 .25rem; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 200; }
.hero__tagline{ color: var(--muted); font-size: clamp(0.9rem, .5vw + .85rem, 1.1rem); margin-bottom: 1rem; }
.hero__icons{ display: flex; gap: 1rem; align-items: center; }
.hero__icons a{ display: inline-flex; transition: opacity 0.2s ease; }
.hero__icons a:hover{ opacity: 0.7; }
.hero__icons img{ width: 24px; height: 24px; display: block; }

/* Sections */
.section{
  display:grid; grid-template-columns: 1fr; gap: 1.25rem;
  margin: 3rem 0; padding: 1.25rem;
  background-color: var(--surface);
  background-image: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0));
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius); box-shadow: var(--shadow);
  content-visibility: auto; contain-intrinsic-size: 700px;
}
.section__content h2{ margin: 0 0 .5rem; font-size: clamp(1.25rem, 1.2vw + 1rem, 1.8rem); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 200; }
.section__content p{ margin: .5rem 0; color: var(--muted); }

@media (min-width: 800px){
  .section{ grid-template-columns: 1.1fr 1fr; align-items:center; }
  .section--image-right{ grid-template-columns: 1fr 1.1fr; }
  .section--image-right .section__content{ order:1; }
  .section--image-right .section__media{ order:2; }
}
.section--text-only{
  grid-template-columns: 1fr;
  background-color: var(--surface);
  background-image:
    linear-gradient(120deg, rgba(139,177,116,.10), transparent 40%),
    linear-gradient(320deg, rgba(217,164,65,.10), transparent 60%);
}
.section--text-only .section__content{ max-width:none; margin:0; text-align:left; }

/* Carousel */
.carousel{ position: relative; overflow:hidden; }
.carousel__stage{
  position: relative;
  height: clamp(300px, 40vw, 520px);
  border-radius: calc(var(--radius) - 6px);
  overflow: hidden;
  z-index: 1;
  background: #272727;
}
.carousel__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  object-position: center;
  background:#ffffff;
  transition: transform .45s ease, opacity .45s ease;
  opacity: 0;
  cursor: zoom-in;
  outline: none;
}

  /* Per-image fit mode override */
  .carousel__stage[data-fixed-height] .carousel__img.fit-contain{
    object-fit: contain;
  }


/* Desktop fixed height behavior */
@media (min-width: 800px){
  .carousel__stage[data-fixed-height]{
    height: auto; /* will be set by JS */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .carousel__stage[data-fixed-height] .carousel__img{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    transform: none;
    object-fit: cover;
    object-position: center;
  }
  /* Override transitions for fixed-height to work with absolute positioning */
  .carousel__stage[data-fixed-height] .carousel__img.enter-from-right{ 
    transform: translateX(20%); opacity:0.01; 
  }
  .carousel__stage[data-fixed-height] .carousel__img.enter-from-left { 
    transform: translateX(-20%); opacity:0.01; 
  }
  .carousel__stage[data-fixed-height] .carousel__img.enter-active{ 
    transform: translateX(0); opacity:1; 
  }
  .carousel__stage[data-fixed-height] .carousel__img.exit-to-left { 
    transform: translateX(-20%); opacity:0; 
  }
  .carousel__stage[data-fixed-height] .carousel__img.exit-to-right{ 
    transform: translateX(20%); opacity:0; 
  }
}
.carousel__img.is-current{ opacity: 1; }
.carousel__img.enter-from-right{ transform: translateX(20%); opacity:0.01; }
.carousel__img.enter-from-left { transform: translateX(-20%); opacity:0.01; }
.carousel__img.enter-active{ transform: translateX(0); opacity:1; }
.carousel__img.exit-to-left { transform: translateX(-20%); opacity:0; }
.carousel__img.exit-to-right{ transform: translateX(20%);  opacity:0; }

.carousel__nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.12);
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.08);
  z-index: 10;
}
.carousel__prev{ left: .5rem; } .carousel__next{ right: .5rem; }
.carousel__nav:focus{ outline: 2px solid var(--accent); outline-offset: 2px; }
.carousel__nav[disabled]{ opacity: .4; pointer-events:none; cursor: default; }

/* Desktop: Show arrows only on hover */
@media (min-width: 800px) {
  .carousel__nav {
    opacity: 0;
    transition: opacity .3s ease;
  }
  
  .carousel:hover .carousel__nav {
    opacity: 1;
  }
  
  .carousel__nav[disabled] {
    opacity: 0 !important;
  }
}

/* Carousel Dots */
.carousel__dots{
  position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: .5rem; z-index: 10;
}
.carousel__dot{
  height: var(--dotdiameter) !important; 
  min-width: var(--dotdiameter) !important;
  border-radius: 50% !important;
  background: rgba(230, 230, 230, 0.6);
  border: 2px solid rgba(0,0,0,.6);
  cursor: pointer;
  transition: all .2s ease;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  box-shadow: 0 0px 4px rgba(0,0,0,.25);
}
.carousel__dot:hover{ 
  background: rgba(255,255,255,.9);
}
.carousel__dot.is-active{ 
  background: #fff;
  border-color: rgba(0,0,0,1);
  box-shadow: 0 1px 4px rgba(0,0,0,.7);
}

/* Modal */
.modal{ position: fixed; inset: 0; display: none; place-items: center; z-index:1000; }
.modal[aria-hidden="false"]{ display: grid; }
.modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); }
.modal__dialog{
  position: relative; width: min(100% - 2rem, 1000px); max-height: 90vh;
  background: var(--surface); border: 1px solid rgba(0,0,0,.12);
  border-radius: var(--radius); padding: .75rem; box-shadow: 0 15px 60px rgba(0,0,0,.2);
}
.modal__stage{
  position: relative; width: 100%; max-height: 72vh; overflow: hidden;
  border-radius: calc(var(--radius) - 6px);
  border: 1px solid rgba(0,0,0,.08);
  min-height: 180px;
  background: #ffffff;
}
.modal__img{
  display:block;
  position:absolute;
  inset: 12px;
  width: calc(100% - 24px);  /* ADD THIS */
  height: calc(100% - 24px);  /* ADD THIS */
  object-fit:contain;
  transition: transform .35s ease, opacity .35s ease;
  opacity: 0;
}
.modal__img.is-current{ opacity:1; }
.modal__img.enter-from-right{ transform: translateX(20%); opacity:.01; }
.modal__img.enter-from-left { transform: translateX(-20%); opacity:.01; }
.modal__img.enter-active{ transform: translateX(0); opacity:1; }
.modal__img.exit-to-left { transform: translateX(-20%); opacity:0; }
.modal__img.exit-to-right{ transform: translateX(20%);  opacity:0; }

.modal__dialog img{ border-radius: calc(var(--radius) - 6px); }
.modal__close{
  position:absolute; top:.25rem; right:.35rem; font-size: 22px; line-height:1;
  width: 32px; height: 32px; display:inline-flex; align-items:center; justify-content:center;
  border: 1px solid rgba(0,0,0,.12); 
  background: rgba(255,255,255,.92); 
  border-radius: 50%;
  color: var(--text); cursor: pointer;
  z-index: 5; /* above nav */
}
.modal__close:focus{ outline: 2px solid var(--accent); outline-offset: 2px; }
.modal__nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.92); border:1px solid rgba(0,0,0,.12); width:44px; height:44px; border-radius:50%; display:grid; place-items:center; cursor:pointer; z-index:4; }
.modal__nav[disabled]{ cursor: default; }
.modal__prev{ left: calc(.5rem + 9px); } .modal__next{ right: calc(.5rem + 9px); }
.modal__caption{ color: var(--muted); text-align:center; font-size:.95rem; margin-top:.5rem }

/* Modal Dots */
.modal__dots{
  display: flex; gap: .5rem; justify-content: center; margin-top: .75rem;
}
.modal__dot{
  height: var(--dotdiameter) !important; 
  min-width: var(--dotdiameter) !important;
  border-radius: 50% !important;
  background: rgba(230,230,230,.6);
  border: 2px solid rgba(0,0,0,.6);
  cursor: pointer;
  transition: all .2s ease;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.25);
}
.modal__dot:hover{ 
  background: rgba(140,140,140,.7);
}
.modal__dot.is-active{ 
  background: #fff;
  border-color: rgba(0,0,0,1);
  box-shadow: 0 1px 4px rgba(0,0,0,.7);
}

/* Footer */
.footer{ text-align:center; color: var(--muted); padding: 3rem 0 4rem; }
.footer__icons{ display: flex; gap: 1rem; justify-content: center; margin-top: 1rem; }
.footer__icons a{ display: inline-flex; transition: opacity 0.2s ease; }
.footer__icons a:hover{ opacity: 0.7; }
.footer__icons img{ width: 24px; height: 24px; display: block; }

a:focus, button:focus{ outline: 3px solid var(--accent); outline-offset: 2px; }