/* style.css (paste EVERYTHING) */
:root{
  /* sampled from your logo green */
  --brandGreen:#6C9841;

  --ink:#1b1b1b;
  --line:rgba(0,0,0,0.14);
  --shadow: 0 10px 30px rgba(0,0,0,0.12);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: "Cormorant Garamond", serif;
  color: var(--ink);
  background: #ece7d8;
}

/* NAV BANNER (match logo green) */
.navBanner{
  position: sticky;
  top: 0;
  z-index: 2000;

  height: 2in;                 /* UPDATED: gives room so logo can be 0.5in bigger */
  min-height: 128px;           /* UPDATED */
  background: var(--brandGreen);
  color: #fff;

  border-bottom: 1px solid rgba(255,255,255,0.25);
  transition: transform .25s ease;
}
.navBanner.is-hidden{ transform: translateY(-110%); }

.navBanner__inner{
  max-width: 1100px;
  margin: 0 auto;
  height: 100%;
  padding: 12px 14px;

  display: grid;
  grid-template-columns: 1.1fr 1.6fr 0.6fr;
  align-items: center;
  gap: 16px;
}

.navBrand--logo{
  display:flex;
  align-items:center;
  text-decoration:none;
}

.navLogo{
  display:block;
  height: calc(2in - 18px);    /* UPDATED: ~0.5in bigger than before */
  max-height: 168px;           /* UPDATED */
  width: auto;
  object-fit: contain;

  /* UPDATED: remove shadow so it “blends” into green banner */
  filter: none;
  background: transparent;
}

.navLinks{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 22px;

  font-size: 16px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.navLinks a{
  color:#fff;
  opacity:0.95;
  text-decoration:none;
  padding:10px 6px;
}
.navLinks a:hover{ opacity:1; text-decoration: underline; }

.navBook{
  justify-self:end;
  color:#fff;
  text-decoration:none;

  border: 2px solid rgba(255,255,255,0.75);
  padding: 14px 18px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
}
.navBook:hover{ background: rgba(255,255,255,0.12); }

/* LEFT “SWIPE UP” */
.swipeUp{
  position: fixed;
  left: 10px;
  top: 40%;
  z-index: 50;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color: rgba(0,0,0,0.55);
  text-decoration:none;
  user-select:none;
}
.swipeUp__arrow{
  width: 36px;
  height: 36px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  background: rgba(255,255,255,0.55);
  border-radius: 12px;
}
.swipeUp__text{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.22em;
  font-size: 14px;
}

/* PAGE */
.page{
  max-width:1100px;
  margin: 0 auto;
  padding: 0 14px 40px;
}

/* MARQUEE */
.marqueeWrap{ width: 100%; margin: 18px 0 6px; }
.marquee{ width: 100%; overflow:hidden; }
.marquee__track{
  display:flex;
  gap:18px;
  width:max-content;
  animation: marqueeMove 70s linear infinite;
  will-change: transform;
}
@keyframes marqueeMove{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.photoTile{
  width: 3in;
  height: 5in;
  flex: 0 0 auto;
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
  overflow:hidden;
  background: rgba(255,255,255,0.98);
}
.photoTile img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

/* BLOCKS */
.block{
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 18px;
  margin: 16px 0;
  position: relative;
  overflow:hidden;
}

/* Inset sections: ~1 inch from screen edges */
.insetSection{
  width: calc(100vw - 2in);
  margin-left: calc(50% - 50vw + 1in);
  margin-right: calc(50% - 50vw + 1in);
  border-radius: 18px;
}

/* brand green bodies + white text */
.brandSection{
  background: var(--brandGreen);
  color:#fff;
  border: 1px solid rgba(255,255,255,0.22);
}

/* Full bleed only where used (contact + experiences) */
.fullBleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
}

/* Green sections (contact + experiences) */
.greenSection{
  background: var(--brandGreen);
  color:#fff;
  border: 1px solid rgba(255,255,255,0.18);
}

/* Typography */
.sectionLabel{
  margin: 4px 0 10px;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: inherit;
}
.storyText{
  margin: 10px 0;
  max-width: 70ch;
  font-size: 18px;
  line-height: 1.5;
  color: inherit;
}

/* WAVY (light on green) */
.wavy{
  height: 16px;
  margin: 10px 0;
  border-radius: 999px;
  transform: rotate(-1deg);
  opacity: 0.6;
  background:
    repeating-linear-gradient(
      to right,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,0) 10px,
      rgba(0,0,0,0.25) 10px,
      rgba(0,0,0,0.25) 12px
    );
}
.wavy--small{ width: 70%; }
.wavy--light{
  background:
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,0) 0px,
      rgba(255,255,255,0) 10px,
      rgba(255,255,255,0.75) 10px,
      rgba(255,255,255,0.75) 12px
    );
}

/* STORY */
.storyGrid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 16px;
}

.storyRight{ display:flex; flex-direction:column; gap:12px; align-items:stretch; }

/* right side boxes on green */
.rightBox{
  border-radius: 14px;
  padding: 12px;
}
.rightBox--brand{
  border: 1px solid rgba(255,255,255,0.30);
  background: rgba(255,255,255,0.10);
  color:#fff;
}
.rightBox__title{
  font-weight:700;
  letter-spacing:0.08em;
  text-transform: lowercase;
  margin-bottom: 6px;
  font-size: 18px;
  color: inherit;
}
.rightBox__text{ margin:0 0 10px; font-size: 16px; opacity: 0.95; color: inherit; }

.miniBtn{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 12px;
  text-decoration:none;
}
.miniBtn--brand{
  border: 1px solid rgba(255,255,255,0.60);
  color:#fff;
  background: rgba(255,255,255,0.12);
}
.tinyNote{ font-size: 14px; text-align:right; }
.tinyNote--light{ color:#fff; opacity: 0.9; }

/* GALLERY */
.galleryRow{
  display:grid;
  grid-template-columns: 130px 1fr 130px;
  gap: 14px;
  align-items:center;
}
.thumb{ border:none; background:transparent; cursor:pointer; padding:0; }
.thumb__img{
  display:block;
  width: 130px;
  height: 170px;              /* UPDATED: taller thumbs to match bigger gallery */
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.12);
  box-shadow: var(--shadow);
  background-size: cover;
  background-position:center;
}
.carousel{
  display:grid;
  grid-template-columns: 56px 1fr 56px;
  align-items:center;
  gap: 10px;
}
.arrow{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  cursor:pointer;
  font-size: 24px;
}
.arrow--light{
  border: 1px solid rgba(255,255,255,0.60);
  background: rgba(255,255,255,0.12);
  color:#fff;
}
.carousel__frame{
  border-radius: 18px;
  overflow:hidden;
  min-height: 316px;          /* UPDATED: +~1in */
  position:relative;
  box-shadow: var(--shadow);
}
.carousel__frame--brand{
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.10);
}
.carousel__img{
  width:100%;
  height:316px;               /* UPDATED: +~1in (was 220px) */
  background-size: cover;
  background-position:center;
}
.carousel__caption{
  position:absolute;
  bottom:10px;
  right:10px;
  background: rgba(255,255,255,0.90);
  color:#000;
  border:1px solid rgba(0,0,0,0.12);
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 14px;
}
.hintRow{
  margin-top: 10px;
  display:flex;
  justify-content:center;
  gap: 18px;
}
.hintRow--light{ color:#fff; opacity: 0.95; font-size: 16px; }

/* MENU cards */
.menuGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.menuCard{
  border-radius: 14px;
  padding: 12px;
}
.menuCard--brand{
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.10);
  color:#fff;
}
.menuCard__title{
  font-weight: 700;
  letter-spacing:0.06em;
  margin-bottom: 6px;
  font-size: 20px;
  color: inherit;
}
.menuCard__text{
  margin:0;
  font-size: 16px;
  opacity: 0.95;
  color: inherit;
}

/* CONTACT */
.contactCenter{ max-width: 980px; margin: 0 auto; position: relative; }

.contactTitleOverlay{
  position:absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align:center;
  font-size: 34px;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color:#fff;
  pointer-events:none;
}
.form--contact{ margin-top: 72px; }

.form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}
.field{ display:flex; flex-direction:column; gap:6px; }
.field--wide{ grid-column: 1 / -1; }

.field__label{
  font-size: 14px;
  letter-spacing:0.12em;
  text-transform: uppercase;
  opacity: 0.95;
  color:#fff;
}
.field__input{
  border: 1px solid rgba(255,255,255,0.35);
  background:#fff;
  color:#000;
  border-radius: 12px;
  padding: 10px 10px;
  font: inherit;
  outline:none;
}
.field__textarea{ resize: vertical; min-height: 110px; }

.submit{
  grid-column: 1 / -1;
  border: 2px solid rgba(255,255,255,0.75);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.10);
  color:#fff;
  font-weight:700;
  letter-spacing:0.08em;
  cursor:pointer;
  font-size: 18px;
}
.formNote--light{
  grid-column: 1 / -1;
  margin: 0;
  font-size: 14px;
  color:#fff;
  opacity: 0.9;
}
.success--light{
  grid-column: 1 / -1;
  display:none;
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.12);
  color:#fff;
}
.success.is-on{ display:block; }

.contactInfoCenter,
.contactInfoUnder{
  margin: 18px auto 0;
  text-align:center;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.10);
  max-width: 520px;
  color:#fff;
}
.contactInfoUnder{ margin-top: 14px; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.28); }

.contactInfoCenter__title,
.contactInfoUnder__title{
  font-weight: 800;
  letter-spacing:0.12em;
  text-transform: lowercase;
  margin-bottom: 8px;
  font-size: 18px;
}

.knowRow{
  margin-top: 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.knowTitle--light{ color:#fff; opacity: 0.95; font-size: 18px; }
.avatars{ display:flex; gap:10px; }
.avatar--light{
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.12);
  color:#fff;
}

/* FOOTER */
.footer{
  max-width:1100px;
  margin: 0 auto 30px;
  padding: 0 14px;
  display:flex;
  justify-content:flex-end;
}
.backTop--light{
  padding: 10px 14px;
  border-radius: 14px;
  text-decoration:none;
  border:2px solid rgba(255,255,255,0.60);
  background: rgba(255,255,255,0.12);
  color:#fff;
}

/* RESPONSIVE */
@media (max-width: 920px){
  .navBanner__inner{
    grid-template-columns: 1fr;
    gap: 10px;
    justify-items: center;
    text-align:center;
  }
  .navLinks{ flex-wrap: wrap; gap: 14px; }
  .navBook{ justify-self: center; }

  .storyGrid{ grid-template-columns: 1fr; }
  .galleryRow{ grid-template-columns: 1fr; }
  .thumb__img{ width: 100%; height: 150px; }   /* UPDATED */
  .carousel{ grid-template-columns: 44px 1fr 44px; }
  .arrow{ width:44px; height:44px; border-radius: 14px; }
  .menuGrid{ grid-template-columns: 1fr; }
  .swipeUp{ display:none; }

  .photoTile{ width: min(80vw, 3in); height: min(120vw, 5in); }
  .marquee__track{ animation-duration: 95s; }

  .navLogo{ height: 140px; }                   /* UPDATED for mobile */
  .form{ grid-template-columns: 1fr; }

  /* On phones, 1in margins are too big; clamp inset to 16px */
  .insetSection{
    width: calc(100vw - 32px);
    margin-left: 16px;
    margin-right: 16px;
    border-radius: 18px;
  }

  .carousel__frame{ min-height: 280px; }       /* UPDATED */
  .carousel__img{ height: 280px; }             /* UPDATED */

  .contactTitleOverlay{ font-size: 28px; }
}