:root {
  --ink: #17232d;
  --muted: #60707c;
  --line: #dbe3e9;
  --paper: #ffffff;
  --soft: #f3f7f9;
  --accent: #176a93;
  --accent-dark: #104e6d;
  --deep: #102d3e;
  --max: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.container { width: min(var(--max), calc(100% - 44px)); margin-inline: auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid rgba(219,227,233,.9);
  backdrop-filter: blur(12px);
}
.nav-wrap { min-height: 76px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { text-decoration:none; font-size:1.5rem; font-weight:700; letter-spacing:.01em; color:var(--deep); }
.brand span { font-weight:350; }
.nav { display:flex; align-items:center; gap:30px; }
.nav a { text-decoration:none; color:#4e5f6b; font-size:.95rem; font-weight:550; }
.nav a:hover, .nav a:focus { color:var(--deep); }
.nav .button { color:white; }
.nav-toggle { display:none; border:0; background:transparent; font-size:1.55rem; cursor:pointer; color:var(--deep); }

.button {
  display:inline-block;
  text-decoration:none;
  border:1px solid var(--accent);
  background:var(--accent);
  color:white;
  padding:11px 19px;
  border-radius:4px;
  font-weight:650;
  line-height:1.25;
}
.button:hover, .button:focus { background:var(--accent-dark); border-color:var(--accent-dark); }
.button.secondary { background:transparent; color:var(--accent); }

.hero {
  min-height: 650px;
  display:grid;
  align-items:center;
  color:white;
  background:
    linear-gradient(90deg, rgba(10,38,54,.90) 0%, rgba(13,47,66,.72) 43%, rgba(13,47,66,.18) 76%),
    url('assets/architecture-campus.jpg') center/cover no-repeat;
}
.hero-inner { max-width:760px; padding:90px 0; }
.eyebrow { text-transform:uppercase; letter-spacing:.17em; font-size:.76rem; font-weight:750; color:var(--accent); }
.hero .eyebrow { color:#d7eef9; }
.hero h1 { font-size:clamp(3rem, 7vw, 5.7rem); line-height:.98; margin:14px 0 24px; font-weight:500; letter-spacing:-.035em; }
.hero p { font-size:clamp(1.08rem, 2vw, 1.32rem); max-width:680px; margin:0 0 32px; color:rgba(255,255,255,.93); }

.section { padding:92px 0; }
.section.soft { background:var(--soft); }
.section-head { max-width:790px; margin-bottom:44px; }
.section h2 { font-size:clamp(2.15rem,4vw,3.2rem); line-height:1.1; margin:6px 0 14px; font-weight:500; letter-spacing:-.025em; }
.section-head p { color:var(--muted); font-size:1.08rem; margin:0; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.card { border:1px solid var(--line); background:white; min-height:100%; display:flex; flex-direction:column; box-shadow:0 8px 30px rgba(22,55,72,.04); }
.card-image { width:100%; aspect-ratio:16/9; object-fit:cover; }
.card-image.crop-portrait { object-position:center 40%; }
.card-body { padding:28px; display:flex; flex-direction:column; flex:1; }
.card h3 { margin:0 0 12px; font-size:1.33rem; font-weight:650; line-height:1.28; color:var(--deep); }
.card p { margin:0 0 23px; color:var(--muted); }
.card .learn { margin-top:auto; text-decoration:none; color:var(--accent); font-weight:700; }
.card .learn:hover { text-decoration:underline; }

.split-feature { display:grid; grid-template-columns:1.02fr .98fr; gap:66px; align-items:center; }
.feature-image { min-height:430px; width:100%; object-fit:cover; object-position:center; }
.feature-copy p { color:var(--muted); font-size:1.1rem; margin-bottom:26px; }
.feature-list { list-style:none; padding:0; margin:24px 0 0; display:grid; gap:13px; }
.feature-list li { padding-left:22px; position:relative; color:#40515d; }
.feature-list li::before { content:""; width:7px; height:7px; background:var(--accent); border-radius:50%; position:absolute; left:0; top:.62em; }

.contact-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:72px; align-items:start; }
.contact-copy p { color:var(--muted); font-size:1.05rem; }
.form { display:grid; gap:18px; background:var(--soft); border:1px solid var(--line); padding:30px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
label { display:grid; gap:7px; font-weight:650; font-size:.91rem; color:#314653; }
input, textarea {
  width:100%;
  border:1px solid #bcc9d2;
  border-radius:4px;
  padding:12px 13px;
  font:inherit;
  background:white;
  color:var(--ink);
}
input:focus, textarea:focus { outline:3px solid rgba(23,106,147,.16); border-color:var(--accent); }
textarea { min-height:170px; resize:vertical; }
.form-note { margin:0; color:var(--muted); font-size:.84rem; }
.hidden { position:absolute !important; left:-9999px !important; }

.page-hero {
  background:
    linear-gradient(90deg, rgba(16,45,62,.94), rgba(16,45,62,.76)),
    url('assets/architecture-blue.jpg') center 43%/cover no-repeat;
  color:white;
  padding:96px 0 78px;
}
.page-hero .eyebrow { color:#cfe9f5; }
.page-hero h1 { font-size:clamp(2.65rem,5vw,4.5rem); line-height:1.04; margin:9px 0 18px; font-weight:500; letter-spacing:-.03em; }
.page-hero p { max-width:790px; color:rgba(255,255,255,.88); font-size:1.16rem; margin-bottom:0; }
.back { display:inline-block; margin-bottom:28px; color:#d7edf7; text-decoration:none; font-weight:600; }
.back:hover { text-decoration:underline; }
.detail-grid { display:grid; grid-template-columns:1.06fr .94fr; gap:68px; align-items:start; }
.detail-grid img { width:100%; min-height:430px; height:100%; object-fit:cover; }
.detail-grid img.tall-crop { object-position:center 35%; }
.prose { font-size:1.08rem; }
.prose p { margin:0 0 21px; color:#3d4e59; }
.prose h2 { margin-top:0; }
.prose .button { margin-top:10px; }

.site-footer { background:var(--deep); padding:30px 0; color:#c3d1d8; font-size:.9rem; }
.footer-wrap { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }

@media (max-width: 820px) {
  .container { width:min(var(--max), calc(100% - 32px)); }
  .nav-toggle { display:block; }
  .nav { display:none; position:absolute; top:76px; left:0; right:0; background:white; border-bottom:1px solid var(--line); padding:22px; flex-direction:column; align-items:flex-start; gap:18px; }
  .nav.open { display:flex; }
  .cards, .split-feature, .contact-grid, .detail-grid, .form-row { grid-template-columns:1fr; }
  .section { padding:68px 0; }
  .hero { min-height:560px; background-position:58% center; }
  .hero-inner { padding:72px 0; }
  .split-feature, .contact-grid, .detail-grid { gap:38px; }
  .feature-image, .detail-grid img { min-height:300px; }
}