/* Stylesheet extracted from index.html for multi-page site */
:root {
  --sand: #f2e8d8;
  --mist: #f9f7f2;
  --ocean: #123f50;
  --teal: #1a776f;
  --gold: #c38f42;
  --ink: #172021;
  --line: rgba(18, 63, 80, 0.18);
}

* { box-sizing: border-box; }

body {
  margin: 0; padding: 0; color: var(--ink);
  font-family: "Gill Sans", "Trebuchet MS", sans-serif;
  background:
    radial-gradient(circle at 8% 14%, #fff 0%, transparent 26%),
    radial-gradient(circle at 85% 78%, #ecd9bc 0%, transparent 36%),
    linear-gradient(145deg, var(--sand), #dac7a7);
}

.frame { width: min(1100px, 92vw); margin: 1.2rem auto 2.8rem; background: rgba(255,255,255,0.86); border:1px solid var(--line); border-radius:24px; overflow:hidden; box-shadow:0 24px 64px rgba(20,33,39,0.16); backdrop-filter: blur(4px); }

header { padding:1.15rem 1.25rem; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:0.9rem; flex-wrap:wrap }
.brand { font-family: Georgia, serif; font-size: clamp(1.2rem, 3.5vw, 1.8rem); color:var(--ocean); letter-spacing:0.03em; margin:0 }
.tagline { margin:0.2rem 0 0; font-size:0.9rem; color:#40575f }
nav { display:flex; gap:0.5rem }
nav a { text-decoration:none; color:var(--ocean); font-size:0.9rem; border:1px solid var(--line); border-radius:999px; padding:0.35rem 0.8rem; background:var(--mist); transition: transform .2s, background-color .2s }
nav a:hover { transform: translateY(-2px); background:#fff }

section { padding:1.35rem 1.25rem; border-bottom:1px solid var(--line) }
.hero { display:grid; grid-template-columns:1.05fr 0.95fr; gap:1.15rem; align-items:stretch; background: linear-gradient(120deg,#f8f3e8,#efe1ca) }
.hero h1 { margin:0; font-family: Georgia, serif; line-height:1.1; font-size: clamp(1.8rem,4.6vw,3rem); color:var(--ocean) }
.hero p { margin:0.8rem 0 0; line-height:1.6; max-width:60ch }
.hero-media { border-radius:18px; overflow:hidden; min-height:420px; background:#113f4f; border:1px solid rgba(18,63,80,0.28); box-shadow:0 14px 32px rgba(18,63,80,0.24); display:flex; align-items:center; justify-content:center }
.hero-media img { width:100%; height:100%; object-fit:contain; display:block }
.pill-row { margin-top:1rem; display:flex; gap:0.45rem; flex-wrap:wrap }
.pill { font-size:.82rem; border-radius:999px; border:1px solid rgba(18,63,80,0.25); background:rgba(255,255,255,0.78); color:#2f474e; padding:.3rem .62rem }
.hero-card { margin-top:1rem; border:1px solid rgba(18,63,80,0.21); border-radius:16px; background:rgba(255,255,255,0.72); padding:1rem }
.hero-card strong { display:block; margin-bottom:.45rem; color:var(--ocean) }
h2 { margin:0; font-size: clamp(1.2rem,3vw,1.7rem); color:var(--ocean); font-family: Georgia, serif }
.muted { margin:.6rem 0 0; color:#2a3433; line-height:1.6 }
.grid-2, .grid-3 { display:grid; gap:.8rem; margin-top:.9rem }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.tile { border:1px solid var(--line); border-radius:14px; background:var(--mist); padding:.85rem; transition: transform .22s, box-shadow .22s }
.tile:hover { transform: translateY(-3px); box-shadow:0 14px 24px rgba(21,35,40,0.12) }
.tile h3 { margin:0; font-size:1rem; color:var(--teal) }
.tile p, .tile ul { margin:.5rem 0 0; line-height:1.55; padding-left:1rem }
.tile p { padding-left:0 }
.tile-img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:10px; border:1px solid rgba(18,63,80,0.16); margin-bottom:.7rem; background:#f2ece0 }
.contact { display:grid; grid-template-columns:1fr 1fr; gap:.8rem }
.contact a { color:var(--teal); font-weight:700 }
footer { padding:1rem 1.2rem 1.3rem; color:#2f3a37; font-size:.94rem; background:#f6efdf; border-top:1px solid var(--line) }
@media (max-width:860px) { .hero, .grid-2, .grid-3, .contact { grid-template-columns:1fr } .hero-media { min-height:220px } }