/* ========== Lanyard – Light Theme (White / Black with Navy accents) ========== */
:root{
  --bg:#ffffff;          /* page background */
  --panel:#ffffff;       /* cards/panels */
  --text:#111111;        /* primary text */
  --muted:#5b6676;       /* secondary text */
  --navy:#0b1d39;        /* navy accent */
  --navy-2:#15325f;      /* darker navy (hover) */
  --border:#e5e7eb;      /* light gray borders */
  --max:1100px;          /* content width */
  --radius:16px;         /* rounded corners */
  --shadow:0 10px 24px rgba(0,0,0,.08); /* soft depth */
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", Helvetica;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex; flex-direction:column;
}

/* ---------- Containers / Layout ---------- */
.container{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:20px; }
.page{ flex:1; display:flex; flex-direction:column; }
.section{ padding-block:48px; }

/* ---------- Header / Navbar ---------- */
.header{
  position:sticky; top:0; z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.nav{ height:68px; display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); }
.brand img{ height:36px; width:auto; border-radius:8px; }
.brand .name{ font-weight:800; letter-spacing:.2px; font-size:1.1rem; color:var(--navy); } /* navy sprinkle */

.links a{
  color:var(--text); text-decoration:none; margin-left:18px; font-weight:600; opacity:.9;
  border-bottom:2px solid transparent; padding-bottom:2px;
}
.links a:hover,
.links a.active{ opacity:1; color:var(--navy); border-bottom-color:var(--navy); }

/* ---------- Opening line on Home ---------- */
.intro-line{ margin-top:28px; text-align:center; }
.intro-line h2{
  font-size:clamp(18px, 2.2vw, 26px);
  font-weight:800; line-height:1.5; color:var(--navy);
  max-width:900px; margin:0 auto;
}

/* ---------- Split visual (two images to break copy) ---------- */
.split-visual{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
  margin-block:28px 16px;
}
.split-visual .split-img img{
  width:100%; height:340px; object-fit:cover;
  image-rendering:auto;
  border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease;
}
.split-visual .split-img img:hover{ transform:translateY(-4px); box-shadow:0 16px 28px rgba(0,0,0,.12); }

/* ---------- Hero ---------- */
.hero{ padding-block:64px 40px; display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.hero h1{ font-size:clamp(28px, 5vw, 44px); margin:0; }
.statline{ font-weight:800; color:var(--navy); } /* navy sprinkle */
.mission{ max-width:820px; color:var(--muted); }

/* ---------- Grids / Images ---------- */
.photo-grid{
  width:100%;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px; margin-top:20px;
}
.photo-grid img{
  width:100%;
  height:auto;             /* avoid stretching small images */
  max-height:420px;        /* sensible cap for tall images */
  object-fit:cover;
  image-rendering:auto;
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.photo-grid img:hover{ transform: translateY(-4px); box-shadow:0 16px 28px rgba(0,0,0,.12); }

/* ---------- About page photos ---------- */
.about-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-block: 28px;
}

.about-photos img {
  width: 100%;
  height: 400px;            /* ✅ force equal height */
  object-fit: cover;        /* ✅ crops to fill */
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: transform .25s ease;
}

.about-photos img:hover {
  transform: translateY(-4px);
}

/* ---------- Values Cards ---------- */
.values{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:20px; margin-top:24px; }
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
}
.card h3{ margin-top:0; color:var(--navy); } /* navy headings in cards */

/* ---------- About Intro Paragraph ---------- */
.about-intro{
  font-size:1.1rem; line-height:1.6; color:var(--muted);
  max-width:900px; margin:0 auto 32px; text-align:center;
}

/* ---------- Mission beside photo (About bottom) ---------- */
.mission-section{
  display:flex; align-items:center; justify-content:center; gap:24px; margin-top:48px;
}
.mission-photo{
  width:45%;
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  object-fit:contain; background:#fff;
}
.mission-text{ max-width:50%; text-align:left; }
.mission-text h2{ margin-top:0; font-size:1.8rem; color:var(--navy); }
.mission-text p{ font-size:1.1rem; color:var(--text); }

/* ---------- Contact Form ---------- */
form.card{ display:grid; gap:14px; max-width:640px; margin-inline:auto; }
input, textarea{
  width:100%; padding:14px 16px; border-radius:12px;
  border:1px solid var(--border); background:#ffffff; color:var(--text);
  transition:border-color .2s ease, box-shadow .2s ease;
}
input:focus, textarea:focus{
  outline:none; border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(11,29,57,.12);
}
textarea{ resize:vertical; min-height:120px; }

button{
  padding:14px 18px; border-radius:999px; border:1px solid var(--navy);
  font-weight:800; cursor:pointer; background:var(--navy); color:#ffffff;
  transition:filter .15s ease, transform .05s ease, background .2s ease, border-color .2s ease;
}
button:hover{ filter:brightness(1.05); }
button:active{ transform:translateY(1px); }
.form-msg{ min-height:1.2em; color:var(--muted); }
.trap{ display:none !important; }

/* ---------- Footer ---------- */
.footer{
  background:var(--bg);
  padding:20px; text-align:center;
  border-top:1px solid var(--border);
  color:var(--muted);
}
.footer a{
  color:var(--navy); text-decoration:none; margin:0 8px;
  border-bottom:2px solid transparent;
}
.footer a:hover{ border-bottom-color:var(--navy); }
.footer .ig{ width:20px; height:20px; vertical-align:middle; }

/* ---------- Animations ---------- */
.fade-in{ opacity:0; transform: translateY(14px); }
.revealed{ opacity:1; transform:none; transition: opacity .7s ease, transform .7s ease; }
.delay-1{ transition-delay:.08s; }
.delay-2{ transition-delay:.16s; }
.delay-3{ transition-delay:.24s; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .fade-in, .revealed{ transition:none; transform:none; opacity:1; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .photo-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px){
  .mission{ max-width:720px; }
  .split-visual{ grid-template-columns:1fr; }
  .split-visual .split-img img{ height:260px; }
}
@media (max-width: 640px){
  .photo-grid{ grid-template-columns: 1fr; }
  .about-photos{ grid-template-columns: 1fr; }
  .mission-section{ flex-direction:column; text-align:center; }
  .mission-photo, .mission-text{ width:100%; max-width:none; }
}

/* ---------- Optional placeholder (remove if not used) ---------- */
.photo-placeholder{
  display:flex; align-items:center; justify-content:center;
  background: var(--border); color: var(--muted);
  height: 280px; border-radius: var(--radius);
  font-weight:600; font-size:1rem;
}