:root{
  --aqua:#16c7cd;
  --ink:#0b1b2b;
  --white:#fff;
  --maxw:1100px;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background:#ffffff;
  color:var(--ink);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}

/* HERO: full-bleed, full viewport height */
.hero{
  position:relative;
  min-height:100svh; /* modern mobile-safe viewport */
  background:url("assets/img/hero.jpg") center/cover no-repeat;
}
@supports (min-height: 100dvh){
  .hero{ min-height:100dvh; }
}

/* Remove side padding so nav can touch edges */
.hero__overlay{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:3.5rem 0 1rem; /* no left/right padding */
}

/* LOGO */
.brand-logo{
  max-width:min(60vw, 1200px);
  height:auto;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.35));
}

/* NAV: full width, edge-to-edge */
.nav{
  margin-top:1.2rem;
  width:100%;
  background:var(--aqua);
  display:flex;
  justify-content:center;
  gap:6.6rem;
  padding:.55rem 1rem; /* slightly shorter bar height */
  box-shadow:0 6px 24px rgba(0,0,0,.10) inset, 0 2px 10px rgba(0,0,0,.08);
  /* Full-bleed safeguard in case any parent adds padding later */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
body{ overflow-x:hidden; } /* prevent horizontal scroll from full-bleed trick */

/* MENU LINKS: smaller Courier New */
.nav__link{
  font-family: "Courier New", Courier, monospace;
  font-weight:700;
  letter-spacing:.06em;
  text-decoration:none;
  color:#032e2e;
  font-size:.85rem; /* smaller than before */
}
.nav__link:hover,.nav__link:focus{ opacity:.85; text-decoration:underline; }

@media (max-width: 420px){
  .nav__link{ font-size:.8rem; }
}

/* Hide the “Email us at …” line in the Contact section */
#contact > p:first-of-type{
  display:none;
}

/* SECTIONS */
.section{ padding:4rem 1rem; display:block; }
.section--tight{ padding-top:3rem; }
.section > h2{ font-size:2rem; margin:0 auto 1rem; max-width:var(--maxw); }
.lede{ max-width:var(--maxw); margin:.25rem auto 0; font-size:1.05rem; color:#234; }
/* Align all About paragraphs with the first (.lede) one */
#about p{
  max-width: var(--maxw);
  margin: 0 auto 1rem; /* centers so left edge lines up with the lede */
}

/* GRID / CARDS */
.grid{
  list-style:none; margin:1rem auto 0; padding:0;
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  max-width:var(--maxw);
}
.card{
  position:relative;
  border-radius:16px; 
  overflow:hidden; 
  background:#f7fbfb;
  box-shadow:0 8px 30px rgba(0,0,0,.06);
}
.card img{ width:100%; height:180px; object-fit:cover; display:block; }
.card__body{ padding:1rem; }
.card__body h3{ margin:.25rem 0 .5rem; font-size:1.125rem; }

/* FORM */
.form{
  max-width:720px; margin:0 auto; display:grid; gap:1rem;
}
label{ display:grid; gap:.4rem; font-weight:600; }
input,textarea{
  border:1px solid #cfe9e9; border-radius:10px; padding:.8rem; background:#fff; font:inherit;
}
input:focus,textarea:focus{ outline:2px solid var(--aqua); border-color:transparent; }

.btn{
  background:var(--aqua); color:#033; border:0; border-radius:999px;
  padding:.8rem 1.2rem; font-weight:800; cursor:pointer;
}
.btn:hover{ opacity:.9; }

/* FOOTER */
.footer{
  border-top:1px solid #e6f3f3;
  padding:1.5rem 1rem; margin-top:2rem; text-align:center;
}

/* Make the main © line turquoise but keep photo credit distinct */
.footer p{ color: var(--aqua); }
.credit{ color:#466; font-size:.95rem; }

/* Placeholder badge overlay */
  .card.placeholder::after{
  content:"PLACEHOLDER";
  position:absolute;
  top:.5rem;
  left:.5rem;
  padding:.25rem .5rem;
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.06em;
  background:rgba(22,199,205,.92); /* turquoise */
  color:#032e2e;
  border-radius:6px;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  pointer-events:none;
  z-index:2;
}