:root {
  --navy: #113768;
  --navy-deep: #082341;
  --navy-darker: #061a32;
  --red: #c03d3d;
  --red-dark: #9f2f33;
  --cream: #f4f0e7;
  --paper: #faf8f3;
  --ink: #142033;
  --muted: #667085;
  --line: rgba(17, 55, 104, .13);
  --white: #fff;
  --display: "Manrope", sans-serif;
  --body: "DM Sans", sans-serif;
  --shadow: 0 24px 70px rgba(10, 30, 58, .13);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--body); -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
body.modal-open { overflow: hidden; }
body.menu-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 33;
  background: rgba(6, 26, 50, .45);
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
.container { width: min(1240px, calc(100% - 48px)); margin: 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 999; padding: 12px 18px; background: #fff; color: var(--navy); transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.topbar { height: 40px; color: #fff; background: var(--navy-deep); font-size: 12px; position: relative; z-index: 32; }
.topbar-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.topbar-announcement { display: flex; align-items: center; gap: 7px; letter-spacing: .01em; }
.topbar-announcement > i { color: #ffd36a; font-size: 13px; }
.topbar-mobile-emergency { display:none; width:28px; height:28px; flex:0 0 auto; margin-left:auto; padding:0; border:0; border-radius:50%; color:#fff; background:var(--red); cursor:pointer; }
.topbar-announcement a { color: rgba(255,255,255,.76); transition: color .2s; }
.topbar-announcement a:hover { color: #fff; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #ff6565; box-shadow: 0 0 0 5px rgba(255,101,101,.14); margin-right: 5px; animation: pulse 2s infinite; }
.topbar-links { display: flex; align-items: center; gap: 14px; color: rgba(255,255,255,.78); }
.topbar-links a { transition: color .2s; }
.topbar-links a:hover { color: #fff; }
.topbar-links span { width: 1px; height: 12px; background: rgba(255,255,255,.2); }
.topbar-links i { margin-right: 5px; color: #fff; }
.topbar-link-button { margin:0; padding:0; border:0; color:inherit; background:transparent; cursor:pointer; transition:color .2s; }
.topbar-link-button:hover { color:#fff; }
.topbar-links .topbar-social { width:auto; height:auto; display:flex; align-items:center; gap:5px; background:none; }
.topbar-social a { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; color:#fff; background:rgba(255,255,255,.09); transition:background .2s,transform .2s; }
.topbar-social a:hover { color:#fff; background:var(--red); transform:translateY(-2px); }
.topbar-social i { margin:0; font-size:11px; }

.emergency-modal[hidden] { display:none; }
.emergency-modal { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:24px; }
.emergency-modal-backdrop { position:absolute; inset:0; background:rgba(4,18,35,.76); backdrop-filter:blur(5px); }
.emergency-dialog { position:relative; width:min(620px,100%); max-height:min(760px,calc(100vh - 48px)); overflow:auto; padding:30px; border-radius:18px; background:#fff; box-shadow:0 30px 90px rgba(0,0,0,.32); }
.emergency-dialog-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:24px; }
.emergency-kicker { color:var(--red); font:700 10px/1 var(--display); letter-spacing:.2em; }
.emergency-dialog h2 { margin:7px 0 0; color:var(--navy); font:700 30px/1.15 var(--display); }
.emergency-dialog-header button { width:38px; height:38px; flex:0 0 auto; border:0; border-radius:50%; color:var(--navy); background:rgba(17,55,104,.08); cursor:pointer; }
.emergency-list { display:grid; gap:10px; }
.emergency-item { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--line); border-radius:12px; transition:background .2s,border-color .2s,transform .2s; }
.emergency-item:hover { border-color:rgba(192,61,61,.35); background:rgba(192,61,61,.045); transform:translateY(-1px); }
.emergency-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--red); }
.emergency-item > span:nth-child(2) { display:flex; min-width:0; flex-direction:column; gap:3px; }
.emergency-item small { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.emergency-item strong { color:var(--ink); font:700 14px/1.25 var(--display); }
.emergency-item b { color:var(--navy); font:800 16px/1 var(--display); white-space:nowrap; }
.emergency-empty { margin:0; padding:20px; border-radius:10px; color:var(--muted); background:var(--cream); line-height:1.6; }

.site-header { height: 108px; overflow:visible; background: rgba(255,255,255,.97); border-bottom: 1px solid rgba(17,55,104,.1); position: absolute; top: 40px; left: 0; right: 0; z-index: 34; box-shadow: 0 12px 35px rgba(7,30,57,.06); transition: height .25s, box-shadow .25s, transform .25s; }
.site-header::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(17,55,104,.035) 50%,transparent); }
.site-header.sticky { position: fixed; top: 0; height: 78px; box-shadow: 0 12px 38px rgba(7,30,57,.16); }
.header-inner { height: 100%; position:relative; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 13px; flex-shrink: 0; }
.brand-centered { position:absolute; z-index:3; left:50%; top:60%; flex-direction:column; gap:0; transform:translate(-50%,-50%); }
.brand-centered::before { content:""; position:absolute; inset:-9px; border:1px solid rgba(192,61,61,.26); border-radius:50%; animation:logoHalo 5s ease-in-out infinite; }
.brand-mark { width: 126px; height: 126px; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border: 6px solid #fff; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--navy), 0 16px 34px rgba(7,30,57,.24); transition:width .25s,height .25s,border-width .25s,box-shadow .25s; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; border-radius:50%; transform:rotate(0); transform-origin:center; transition:transform .85s cubic-bezier(.2,.7,.2,1); }
@media (hover:hover) {
  .brand-centered:hover .brand-mark img,
  .brand-centered:focus-visible .brand-mark img { transform:rotate(360deg); }
}
.brand-copy { position:absolute; top:116px; left:50%; display:flex; flex-direction:column; align-items:center; min-width:150px; padding:7px 12px 6px; color:#fff; background:var(--navy); border-radius:0 0 12px 12px; box-shadow:0 8px 18px rgba(7,30,57,.18); transform:translateX(-50%); }
.brand-copy strong { display:none; }
.brand-copy small { margin:0; font:700 7px/1 var(--display); letter-spacing:.18em; white-space:nowrap; color:#fff; }
.sticky .brand-mark { width:86px; height:86px; border-width:5px; box-shadow:0 0 0 2px var(--navy),0 12px 25px rgba(7,30,57,.22); }
.sticky .brand-copy { top:77px; }
.main-nav { width:100%; height:100%; display:grid; grid-template-columns:minmax(0,1fr) 168px minmax(0,1fr); align-items:center; }
.nav-logo-space { width:168px; }
.nav-wing { height:100%; display:flex; align-items:center; gap:clamp(18px,2vw,31px); }
.nav-wing-left { justify-content:flex-end; padding-right:17px; }
.nav-wing-right { justify-content:flex-start; padding-left:17px; }
.nav-wing > a, .nav-dropdown > button { position: relative; border: 0; padding: 37px 0; background: transparent; font-size: 12px; font-weight: 700; letter-spacing:.035em; cursor: pointer; white-space: nowrap; }
.sticky .nav-wing > a, .sticky .nav-dropdown > button { padding: 29px 0; }
.nav-wing > a:not(.nav-cta)::after, .nav-dropdown > button::after { content: ""; position: absolute; height: 3px; left: 50%; right: 50%; bottom: 26px; border-radius:3px; background: var(--red); transition: left .2s, right .2s; }
.sticky .nav-wing > a:not(.nav-cta)::after, .sticky .nav-dropdown > button::after { bottom: 19px; }
.nav-wing > a:hover::after, .nav-wing > a.active::after, .nav-dropdown:hover > button::after, .nav-dropdown.open > button::after { left: 0; right: 0; }
.nav-dropdown { height: 100%; position: relative; display: flex; align-items: center; }
.nav-dropdown button i { font-size: 9px; margin-left: 4px; }
.dropdown-menu { position: absolute; top: calc(100% - 3px); left: -22px; width: 220px; padding: 12px; background: #fff; border-top: 3px solid var(--red); box-shadow: 0 18px 45px rgba(8,35,65,.16); opacity: 0; visibility: hidden; transform: translateY(10px); transition: .2s; }
.nav-dropdown:hover .dropdown-menu, .nav-dropdown.open .dropdown-menu { opacity: 1; visibility: visible; transform: none; }
.dropdown-menu a { display: block; padding: 10px 12px; font-size: 12px; color: #4c586a; transition: .2s; }
.dropdown-menu a:hover { color: var(--navy); background: #f3f5f8; padding-left: 16px; }
.main-nav .nav-cta,
.sticky .nav-wing > a.nav-cta {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: auto;
  min-height: 0;
  padding: 10px 18px;
  color: #fff;
  background: var(--red);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(192,61,61,.23);
  transition: background .2s, transform .2s;
  white-space: nowrap;
  line-height: 1.2;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.main-nav .nav-cta:hover,
.sticky .nav-wing > a.nav-cta:hover { background: var(--red-dark); color: #fff; }
.main-nav .nav-cta i { margin: 0; font-size: 12px; }
.nav-wing-right { min-width: 0; flex-wrap: nowrap; }
.menu-toggle { display: none; width: 42px; height: 42px; border: 0; background: var(--navy); padding: 11px; cursor: pointer; }
.menu-toggle span { display: block; height: 2px; margin: 4px 0; background: #fff; transition: .25s; }

.hero { height: max(720px, 100vh); min-height: 700px; position: relative; overflow: hidden; background: var(--navy-darker); color: #fff; }
.hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; background-image: var(--hero-image); background-position: center; background-size: cover; transform: scale(1.05); transition: opacity 1s ease, visibility 1s, transform 7s ease; }
@media (max-width: 767px) {
  .hero-slide { background-image: var(--hero-mobile-image, var(--hero-image)); }
}
.hero-slide.active { opacity: 1; visibility: visible; transform: scale(1); }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,24,48,.94) 0%, rgba(7,29,57,.76) 42%, rgba(8,32,58,.28) 76%, rgba(8,32,58,.42) 100%), linear-gradient(0deg, rgba(5,25,50,.55), transparent 45%); }
.hero-overlay::after { content: ""; position: absolute; inset: 128px 0 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px); background-size: 100% 120px, 160px 100%; mask-image: linear-gradient(90deg,#000,transparent 70%); }
.hero-content { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-top: 110px; position: relative; z-index: 2; }
.eyebrow, .section-kicker { margin: 0 0 18px; font: 700 11px/1 var(--display); letter-spacing: .24em; }
.eyebrow { display: flex; align-items: center; color: rgba(255,255,255,.8); }
.eyebrow span { width: 36px; height: 1px; background: var(--red); margin-right: 12px; }
.hero h1, .hero h2 { max-width: 880px; margin: 0; font: 700 clamp(54px, 6.6vw, 92px)/1.01 var(--display); letter-spacing: -.055em; text-shadow: 0 3px 25px rgba(0,0,0,.15); }
.hero h1 em, .hero h2 em, .section h2 em { color: #d06060; font-style: normal; }
.hero-lead { max-width: 650px; margin: 27px 0 34px; color: rgba(255,255,255,.78); font-size: 17px; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; gap: 14px; }
.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 17px; padding: 0 24px; font-size: 13px; font-weight: 700; transition: .25s; border: 1px solid transparent; cursor: pointer; }
.button-primary { color: #fff; background: var(--red); box-shadow: 0 12px 30px rgba(192,61,61,.28); }
.button-primary:hover, .button-primary:focus-visible { background: var(--red-dark); }
.button-ghost { color: #fff; border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.05); backdrop-filter: blur(5px); }
.button-ghost:hover, .button-ghost:focus-visible { background: #fff; color: var(--navy); }
.button-ghost i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--red); font-size: 9px; transition: .2s; }
.button-ghost:hover i, .button-ghost:focus-visible i { background: var(--cream); color: var(--red); }
.button:focus-visible,
.main-nav .nav-cta:focus-visible,
.newsletter-cta:focus-visible,
.slider-arrow:focus-visible,
.play-button:focus-visible,
.event-note button:focus-visible,
.back-to-top:focus-visible,
.contact-form .button:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
}
.contact-form .button:focus-visible { outline-color: var(--navy); }
@media (hover: hover) {
  .button:hover { transform: translateY(-2px); }
  .main-nav .nav-cta:hover { transform: translateY(-2px); }
  .timeline-item:hover .timeline-card { transform: translateY(-2px); }
}

@media (min-width: 992px) {
  .timeline-dikey {
    --tl-rail: 36px;
    --tl-gap: 28px;
    max-width: 900px;
  }
  .timeline-dikey .timeline-card {
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 22px;
    padding: 18px;
  }
  .timeline-dikey .timeline-photo { width: 140px; }
  .timeline-dikey .timeline-marker { padding-top: 48px; }
}
.hero-bottom { position: absolute; z-index: 3; left: 50%; bottom: 48px; transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; }
.slider-controls { display: flex; align-items: center; gap: 16px; }
.slider-arrow { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.14); color: #fff; cursor: pointer; transition: .2s; }
.slider-arrow:hover { background: #fff; color: var(--navy); }
.slider-progress { display: flex; gap: 7px; }
.slide-dot { width: 42px; height: 4px; padding: 0; border: 0; overflow: hidden; background: rgba(255,255,255,.26); cursor: pointer; }
.slide-dot span { display: block; width: 0; height: 100%; background: #fff; }
.slide-dot.active span { animation: slideProgress 7s linear forwards; }
.scroll-cue { display: flex; align-items: center; gap: 14px; color: rgba(255,255,255,.68); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.scroll-cue i { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; display: grid; place-items: center; animation: bounce 2s infinite; }

.quick-access { position: relative; z-index: 5; margin-top: -1px; background: #fff; border-bottom: 1px solid var(--line); }
.quick-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.quick-card { min-height: 126px; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 15px; padding: 22px; border-right: 1px solid var(--line); transition: .25s; }
.quick-card:first-child { border-left: 1px solid var(--line); }
@media (hover: hover) {
  .quick-card:hover { background: var(--navy); color: #fff; transform: translateY(-7px); box-shadow: 0 18px 35px rgba(17,55,104,.18); }
  .quick-card:hover .quick-icon { background: var(--red); color: #fff; }
  .quick-card:hover small { color: rgba(255,255,255,.65); }
}
.quick-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: var(--red); background: rgba(192,61,61,.09); transition: .25s; }
.quick-card > span:nth-child(2) { display: flex; flex-direction: column; gap: 5px; }
.quick-card strong { font: 700 14px/1.2 var(--display); }
.quick-card small { color: #838c9a; font-size: 11px; }
.quick-card > i { color: #a7afba; font-size: 10px; }

.section { padding: 112px 0; }
.section-kicker { color: var(--red); }
.section h2, .newsletter-section h2 { margin: 0; font: 700 clamp(38px,4vw,60px)/1.08 var(--display); letter-spacing: -.045em; color: var(--navy-deep); }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 48px; }
.section-heading .section-kicker { margin-bottom: 12px; }
.text-link { padding-bottom: 8px; border-bottom: 1px solid var(--navy); font-size: 12px; font-weight: 700; color: var(--navy); }
.text-link i { margin-left: 12px; transition: transform .2s; }
.text-link:hover i { transform: translateX(4px); }

.mayor-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 8% 20%, rgba(192,61,61,.07), transparent 55%),
    radial-gradient(ellipse 55% 50% at 92% 80%, rgba(17,55,104,.08), transparent 50%),
    linear-gradient(165deg, #f7f3eb 0%, var(--cream) 48%, #ebe4d6 100%);
}
.mayor-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image:
    linear-gradient(rgba(17,55,104,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,55,104,.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.mayor-grid { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 90px; position: relative; z-index: 1; }
.mayor-visual { min-height: 620px; position: relative; }
.mayor-shape {
  position: absolute;
  left: 0;
  right: 42px;
  bottom: 0;
  height: 500px;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 70%, #041628 100%);
  box-shadow: 22px 32px 70px rgba(8,35,65,.28);
}
.mayor-shape::before { content:""; position: absolute; inset: 18px; border: 1px solid rgba(255,255,255,.2); }
.mayor-shape::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, var(--red) 0%, #e8b45a 45%, transparent 90%);
}
.mayor-photo-stage {
  position: absolute;
  inset: 8px 10px 18px 28px;
  z-index: 2;
}
.mayor-photo-halo {
  position: absolute;
  inset: -10px -14px -18px -10px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, rgba(232,180,90,.22), transparent 70%),
    radial-gradient(ellipse 80% 70% at 50% 60%, rgba(17,55,104,.18), transparent 75%);
  filter: blur(2px);
  pointer-events: none;
  z-index: 0;
}
.mayor-photo-wrap {
  position: absolute;
  inset: 14px;
  overflow: hidden;
  z-index: 1;
  background: #0d2748;
  border: 3px solid #fff;
  box-shadow:
    0 0 0 4px var(--navy),
    0 0 0 7px rgba(192,61,61,.85),
    0 0 0 11px rgba(255,255,255,.55),
    0 28px 64px rgba(6,26,50,.42),
    0 10px 24px rgba(6,26,50,.28);
  transition: transform .45s ease, box-shadow .45s ease;
}
.mayor-visual:hover .mayor-photo-wrap {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 4px var(--navy),
    0 0 0 7px rgba(192,61,61,.95),
    0 0 0 11px rgba(255,255,255,.7),
    0 36px 72px rgba(6,26,50,.48),
    0 14px 28px rgba(6,26,50,.32);
}
.mayor-photo-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.35);
  pointer-events: none;
  z-index: 2;
}
.mayor-photo-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(6,26,50,.62) 0%, rgba(6,26,50,.18) 28%, transparent 48%),
    linear-gradient(115deg, rgba(8,35,65,.16), transparent 42%);
  pointer-events: none;
  z-index: 2;
}
.mayor-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(.92) contrast(1.05);
  transform: scale(1.03);
  transition: transform 1.1s ease, filter .5s ease;
}
.mayor-visual:hover .mayor-photo-wrap img { transform: scale(1.07); filter: saturate(1) contrast(1.06); }
.mayor-photo-placeholder { width:100%; height:100%; display:grid; place-items:center; background:linear-gradient(145deg,#dfe5ec,#cbd4df); color:rgba(17,55,104,.35); font-size:120px; }
.mayor-photo-ribbon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 14px 16px 12px;
  text-align: center;
  color: #fff;
  font: 700 11px/1.2 var(--display);
  letter-spacing: .16em;
  text-transform: uppercase;
  background: linear-gradient(90deg, rgba(8,35,65,.15), transparent 30%, transparent 70%, rgba(8,35,65,.15)),
              linear-gradient(180deg, transparent, rgba(6,26,50,.55) 30%, rgba(6,26,50,.92));
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  pointer-events: none;
}
.mayor-frame-corner {
  position: absolute;
  width: 34px;
  height: 34px;
  z-index: 3;
  pointer-events: none;
  border-color: #e8b45a;
  border-style: solid;
  border-width: 0;
  filter: drop-shadow(0 1px 2px rgba(6,26,50,.25));
}
.mayor-frame-corner--tl { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; }
.mayor-frame-corner--tr { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; }
.mayor-frame-corner--bl { bottom: 4px; left: 0; border-bottom-width: 3px; border-left-width: 3px; }
.mayor-frame-corner--br { bottom: 4px; right: 0; border-bottom-width: 3px; border-right-width: 3px; }
.mayor-seal {
  position: absolute;
  right: -22px;
  bottom: 48px;
  width: 158px;
  height: 158px;
  border-radius: 50%;
  border: 9px solid var(--cream);
  background: radial-gradient(circle at 30% 28%, #d45252, var(--red) 55%, var(--red-dark));
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow:
    0 0 0 3px rgba(232,180,90,.55),
    0 18px 40px rgba(159,47,51,.4);
  transform: rotate(-7deg);
  z-index: 4;
  transition: transform .35s ease;
}
.mayor-visual:hover .mayor-seal { transform: rotate(-4deg) scale(1.03); }
.mayor-seal i { font-size: 22px; margin-bottom: 8px; }
.mayor-seal span { font: 500 9px/1.55 var(--display); letter-spacing: .13em; }
.mayor-seal strong { font-size: 10px; }
.mayor-copy { position: relative; padding-left: 8px; }
.mayor-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.mayor-kicker span {
  width: 36px;
  height: 2px;
  background: var(--red);
  flex: 0 0 auto;
}
.mayor-quote { position: relative; margin-bottom: 8px; }
.mayor-quote-mark {
  position: absolute;
  left: -10px;
  top: -28px;
  font: 700 96px/.8 var(--display);
  color: rgba(192,61,61,.14);
  pointer-events: none;
  user-select: none;
}
.mayor-copy h2,
.mayor-quote h2 {
  position: relative;
  margin: 0;
  max-width: 16ch;
  font-size: clamp(36px,4.2vw,58px);
  line-height: 1.12;
  color: var(--navy-deep);
}
.mayor-message { margin: 28px 0; max-width: 610px; font-size: 16px; color: #5f6977; line-height: 1.85; }
.mayor-signature { display: flex; align-items: flex-start; gap: 16px; margin: 30px 0; }
.signature-line { width: 42px; height: 2px; margin-top: 10px; background: var(--red); flex: 0 0 auto; }
.mayor-signature > span:last-child { display: flex; flex-direction: column; gap: 5px; }
.mayor-signature strong { font: 700 17px/1.15 var(--display); color: var(--navy); letter-spacing: .02em; text-transform: uppercase; }
.mayor-signature small { color: #7e8794; font-size: 13px; }
.mayor-term {
  margin-top: 4px;
  font: 700 11px/1 var(--display);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
  font-style: normal;
}
.mayor-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  padding-top: 26px;
  border-top: 1px solid rgba(17,55,104,.16);
}
.mayor-link-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(17,55,104,.35);
  transition: color .2s, border-color .2s, gap .2s;
}
.mayor-link-primary:hover { color: var(--red); border-color: var(--red); gap: 14px; }
.mayor-link-secondary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  transition: transform .2s, color .2s;
}
.mayor-link-secondary:hover { color: var(--red-dark); transform: translateX(2px); }

.mayor-aza-strip {
  position: relative;
  z-index: 1;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid rgba(17,55,104,.12);
  text-align: center;
}
.mayor-aza-kicker {
  margin: 0 0 20px;
  color: var(--red);
  font: 700 10px/1 var(--display);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.mayor-aza-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px 28px;
}
.mayor-aza {
  width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.mayor-aza-foto {
  width: 72px;
  height: 72px;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(145deg, #d8dee8, #b8c4d4);
  color: var(--navy);
  display: grid;
  place-items: center;
  font: 700 22px/1 var(--display);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(17,55,104,.18);
}
.mayor-aza-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.mayor-aza strong {
  color: var(--navy-deep);
  font: 700 13px/1.25 var(--display);
  letter-spacing: -.01em;
}
.mayor-aza small {
  color: #6b7480;
  font-size: 11px;
  line-height: 1.3;
}

.news-section { background: #fff; }
.news-layout { display: grid; grid-template-columns: 1.08fr .92fr; gap: 50px; }
.featured-news { background: var(--paper); border: 1px solid var(--line); }
.featured-image { height: 335px; position: relative; overflow: hidden; }
.featured-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.featured-news:hover .featured-image img { transform: scale(1.04); }
.category-badge { position: absolute; left: 24px; bottom: 0; padding: 10px 15px; background: var(--red); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .15em; }
.featured-body { padding: 30px; }
.news-meta { display: flex; gap: 18px; color: #8a929e; font-size: 11px; }
.news-meta i { color: var(--red); margin-right: 5px; }
.featured-body h3 { margin: 17px 0 12px; font: 700 27px/1.3 var(--display); color: var(--navy-deep); }
.featured-body p { margin: 0 0 22px; color: #727b88; font-size: 14px; line-height: 1.7; }
.featured-body a, .news-item a { font-size: 11px; font-weight: 700; color: var(--red); }
.featured-body a i, .news-item a i { margin-left: 7px; }
.news-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.news-item { flex: 1; display: grid; grid-template-columns: 68px 1fr; gap: 24px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.news-item time { width: 65px; height: 65px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(17,55,104,.06); color: var(--navy); }
.news-item time strong { font: 700 25px/1 var(--display); }
.news-item time span { margin-top: 5px; font-size: 8px; font-weight: 700; letter-spacing: .15em; color: var(--red); }
.news-category { font-size: 8px; font-weight: 700; letter-spacing: .17em; color: #87909c; }
.news-item h3 { margin: 7px 0 7px; font: 700 17px/1.35 var(--display); color: var(--navy-deep); transition: color .2s; }
.news-item:hover h3 { color: var(--red); }

.events-section { background: var(--navy-deep); color: #fff; position: relative; overflow: hidden; }
.events-section::before { content:""; position:absolute; width: 520px; height: 520px; border: 1px solid rgba(255,255,255,.05); border-radius:50%; right:-170px; top:-180px; box-shadow: 0 0 0 80px rgba(255,255,255,.018), 0 0 0 160px rgba(255,255,255,.012); }
.section-heading.light { position: relative; }
.section-heading.light h2 { color: #fff; }
.light-link { color: #fff; border-color: rgba(255,255,255,.5); }
.events-grid { position: relative; display: grid; grid-template-columns: 1.45fr 1fr 1fr; gap: 18px; }
.event-card { min-height: 330px; position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 29px; background: #163d6c; border: 1px solid rgba(255,255,255,.1); overflow: hidden; transition: transform .25s, background .25s; }
@media (hover: hover) {
  .event-card:not(.featured-event):hover { transform: translateY(-6px); background: #1b477d; }
}
.featured-event { min-height: 440px; }
.event-image { position: absolute; inset: 0; background-size: cover; background-position: center; }
.featured-event::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(6,26,50,.96),rgba(6,26,50,.12) 80%); }
.event-date { position: absolute; left: 29px; top: 29px; z-index: 2; width: 65px; height: 72px; display:flex; flex-direction:column; align-items:center; justify-content:center; background: var(--red); }
.event-date strong { font: 700 27px/1 var(--display); }
.event-date span { margin-top:6px; font-size:8px; font-weight:700; letter-spacing:.15em; }
.event-content { position: relative; z-index: 2; }
.event-type { font-size:8px; font-weight:700; letter-spacing:.17em; color:#de7a7a; }
.event-content h3 { margin: 11px 0; font: 700 24px/1.25 var(--display); color:#fff; }
.featured-event h3 { font-size:32px; }
.event-content p { display:flex; flex-wrap:wrap; align-items:center; gap:7px; color:rgba(255,255,255,.61); font-size:10px; }
.event-content p span { width:1px; height:10px; margin:0 5px; background:rgba(255,255,255,.25); }
.event-content p i { color:#de7a7a; }
.event-content a { display:inline-block; margin-top:16px; color:#fff; font-size:11px; font-weight:700; border-bottom:1px solid rgba(255,255,255,.35); padding-bottom:5px; }
.event-content a i { margin-left:8px; }
.event-note { position: relative; display:grid; grid-template-columns:45px 1fr auto; align-items:center; gap:20px; margin-top:20px; padding:20px 24px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.09); }
.event-note > i { width:43px; height:43px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--red); }
.event-note span { font-size:12px; color:rgba(255,255,255,.63); }
.event-note span strong { color:#fff; }
.event-note button { border:1px solid rgba(255,255,255,.35); background:transparent; color:#fff; padding:10px 16px; font-size:10px; font-weight:700; cursor:pointer; }

.story-section { background: var(--cream); overflow:hidden; }
.story-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:100px; align-items:center; }
.story-copy p:not(.section-kicker) { color:#67707c; font-size:15px; line-height:1.85; }
.story-copy p:nth-of-type(2) { margin-top:28px; }
.button-dark { margin-top:18px; background:var(--navy); color:#fff; }
.button-dark:hover { background:var(--red); }
.story-collage { min-height:570px; position:relative; }
.story-photo { margin:0; position:absolute; overflow:hidden; box-shadow:var(--shadow); }
.story-photo img { width:100%; height:100%; object-fit:cover; filter:saturate(.78); transition:transform .7s; }
.story-photo:hover img { transform:scale(1.04); }
.story-photo-large { width:72%; height:500px; right:0; top:0; }
.story-photo-small { width:43%; height:285px; left:0; bottom:0; border:12px solid var(--cream); }
.story-photo figcaption { position:absolute; left:22px; bottom:20px; color:#fff; font-size:9px; letter-spacing:.14em; text-transform:uppercase; }
.since-stamp { position:absolute; left:9%; top:15px; z-index:3; width:135px; height:135px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:50%; background:var(--red); color:#fff; font:500 9px/1.6 var(--display); text-align:center; letter-spacing:.12em; transform:rotate(-9deg); }
.since-stamp strong { font-size:13px; }
.stats-section { padding:54px 0; background:var(--red); color:#fff; }
.stats-grid { display:grid; grid-template-columns:1.2fr repeat(4,1fr); }
.stats-intro, .stat { min-height:110px; display:flex; flex-direction:column; justify-content:center; border-right:1px solid rgba(255,255,255,.2); padding:0 32px; }
.stats-intro p { font:500 10px/1.55 var(--display); letter-spacing:.14em; }
.stats-intro strong { font-size:18px; }
.stat strong { font:700 42px/1 var(--display); }
.stat span { margin-top:8px; color:rgba(255,255,255,.72); font-size:10px; }

.former-mayors {
  background:
    radial-gradient(ellipse 60% 50% at 10% 0%, rgba(192,61,61,.05), transparent 55%),
    radial-gradient(ellipse 50% 45% at 90% 100%, rgba(17,55,104,.06), transparent 50%),
    linear-gradient(180deg, #fff 0%, #f7f9fc 100%);
}
.former-mayors-dedication {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  max-width: 720px;
  margin: 4px auto 28px;
  text-align: center;
}
.former-mayors-dedication-line {
  flex: 1 1 48px;
  max-width: 72px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(192, 61, 61, .55), rgba(17, 55, 104, .35));
}
.former-mayors-dedication-line:last-child {
  background: linear-gradient(90deg, rgba(17, 55, 104, .35), rgba(192, 61, 61, .55), transparent);
}
.former-mayors-dedication-text {
  max-width: 28ch;
  color: var(--navy);
  font: 500 clamp(15px, 2.1vw, 19px)/1.55 var(--display);
  letter-spacing: .02em;
}
.former-mayors-dedication-text em {
  font-style: italic;
  font-weight: 700;
  color: var(--red);
  letter-spacing: .04em;
}
.former-mayors-dedication--hero {
  margin: 18px auto 10px;
  color: inherit;
}
.former-mayors-dedication--hero .former-mayors-dedication-text {
  color: rgba(255, 255, 255, .92);
}
.former-mayors-dedication--hero .former-mayors-dedication-text em {
  color: #f1b1a8;
}
.former-mayors-dedication--hero .former-mayors-dedication-line {
  background: linear-gradient(90deg, transparent, rgba(241, 177, 168, .7), rgba(255, 255, 255, .35));
}
.former-mayors-dedication--hero .former-mayors-dedication-line:last-child {
  background: linear-gradient(90deg, rgba(255, 255, 255, .35), rgba(241, 177, 168, .7), transparent);
}
.former-mayors-dedication-sub {
  margin: 0 0 8px;
  color: rgba(255, 255, 255, .68);
  font-size: 14px;
  line-height: 1.6;
}
.heading-note { max-width: 310px; color: #7d8692; font-size: 13px; line-height: 1.6; }
.timeline {
  --tl-rail: 28px;
  --tl-gap: 22px;
  position: relative;
  display: flex;
  gap: var(--tl-gap);
}
.timeline-dikey {
  flex-direction: column;
  max-width: 860px;
  margin: 0 auto;
  padding: 8px 0 4px;
}
.timeline-dikey::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: calc(var(--tl-rail) / 2);
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(192, 61, 61, .55), rgba(17, 55, 104, .18) 40%, rgba(17, 55, 104, .08));
  border-radius: 2px;
}
.timeline-dikey .timeline-item {
  display: grid;
  grid-template-columns: var(--tl-rail) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  min-width: 0;
}
.timeline-dikey .timeline-marker {
  width: var(--tl-rail);
  display: flex;
  justify-content: center;
  padding-top: 42px;
}
.timeline-yatay-sarici {
  margin: 0 -8px;
  padding: 8px 8px 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(17,55,104,.35) transparent;
}
.timeline-yatay-sarici::-webkit-scrollbar { height: 8px; }
.timeline-yatay-sarici::-webkit-scrollbar-thumb { background: rgba(17,55,104,.28); border-radius: 999px; }
.timeline-yatay {
  flex-direction: row;
  align-items: stretch;
  width: max-content;
  min-width: 100%;
  padding: 28px 12px 18px;
  gap: 20px;
}
.timeline-yatay::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 34px;
  height: 2px;
  background: linear-gradient(90deg, rgba(192, 61, 61, .55), rgba(17, 55, 104, .18) 45%, rgba(17, 55, 104, .08));
  border-radius: 2px;
}
.timeline-yatay .timeline-item {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(250px, 76vw);
  flex: 0 0 auto;
  gap: 12px;
}
.timeline-yatay .timeline-marker {
  width: 100%;
  height: 14px;
  display: flex;
  justify-content: center;
  padding-top: 0;
  align-items: center;
}
.timeline-marker {
  position: relative;
  z-index: 1;
}
.timeline-marker::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border-radius: 50%;
  background: var(--red);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(192, 61, 61, .35), 0 6px 16px rgba(192, 61, 61, .2);
}
.timeline-item.is-current .timeline-marker::before {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
  background: var(--navy);
  box-shadow: 0 0 0 1px rgba(17, 55, 104, .35), 0 0 0 6px rgba(17, 55, 104, .1);
}
.timeline-card {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-width: 0;
  padding: 16px;
  background:
    linear-gradient(165deg, #fff 0%, #faf8f3 100%);
  border: 2px solid #fff;
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  box-shadow:
    0 0 0 6px rgba(192, 61, 61, .75),
    0 16px 40px rgba(8, 35, 65, .14);
  transition: transform .25s ease, box-shadow .25s ease;
}
.timeline-item:hover .timeline-card,
.timeline-item.is-current .timeline-card {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 6px rgba(192, 61, 61, .9),
    0 22px 48px rgba(8, 35, 65, .2);
}
.timeline-photo {
  position: relative;
  width: 118px;
  flex: 0 0 auto;
}
.timeline-photo-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #0d2748;
  border: 2px solid #fff;
  box-shadow:
    0 0 0 3px var(--navy),
    0 0 0 5px rgba(192, 61, 61, .85),
    0 10px 24px rgba(6, 26, 50, .28);
}
.timeline-photo-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(6,26,50,.45) 0%, transparent 40%);
  pointer-events: none;
}
.timeline-photo-wrap img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  filter: saturate(.92) contrast(1.04);
}
.timeline-photo-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #dfe5ec, #cbd4df);
  color: rgba(17, 55, 104, .35);
  font-size: 42px;
}
.timeline-photo-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  z-index: 2;
  pointer-events: none;
  border-color: #e8b45a;
  border-style: solid;
  border-width: 0;
}
.timeline-photo-corner--tl { top: -5px; left: -5px; border-top-width: 2px; border-left-width: 2px; }
.timeline-photo-corner--tr { top: -5px; right: -5px; border-top-width: 2px; border-right-width: 2px; }
.timeline-photo-corner--bl { bottom: -5px; left: -5px; border-bottom-width: 2px; border-left-width: 2px; }
.timeline-photo-corner--br { bottom: -5px; right: -5px; border-bottom-width: 2px; border-right-width: 2px; }
.timeline-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.timeline-year {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 5px 11px;
  background: rgba(192, 61, 61, .1);
  color: var(--red);
  border-left: 3px solid var(--red);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}
.timeline-item.is-current .timeline-year {
  background: rgba(17, 55, 104, .1);
  color: var(--navy);
  border-left-color: var(--navy);
}
.timeline-copy h3 {
  margin: 0;
  font: 700 clamp(17px, 2.4vw, 22px)/1.25 var(--display);
  color: var(--navy);
  overflow-wrap: anywhere;
}
.timeline-copy p {
  margin: 0;
  color: #7d8692;
  font-size: 13px;
  line-height: 1.45;
}
.timeline-ozgecmis { margin-top: 8px !important; color: #5f6977 !important; }
.timeline-yatay .timeline-card {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: 14px;
  padding: 14px 14px 18px;
}
.timeline-yatay .timeline-photo { width: 100%; max-width: 180px; }
.timeline-yatay .timeline-copy { align-items: center; }
.timeline-yatay .timeline-year { border-left: 0; border-bottom: 2px solid var(--red); }
.aza-bolumu { margin-top: 54px; padding-top: 36px; border-top: 1px solid rgba(17,55,104,.12); }
.aza-baslik h2,
.aza-baslik h3 { margin: 8px 0 0; font: 700 28px/1.2 var(--display); color: var(--navy); }
.aza-baslik h2 em,
.aza-baslik h3 em { font-style: italic; color: var(--red); }
.aza-alt-aciklama { margin: 10px 0 0; color: #5f6977; font-size: 15px; }
.aza-sayfa-bolumu { padding-bottom: 12px; }
.aza-timeline .timeline-item { width: min(220px, 78vw); }
.aza-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin-top: 22px; }
.aza-kart { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 24px rgba(17,55,104,.05); }
.aza-avatar { width: 58px; height: 58px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #e9edf2; color: #9aa3af; flex: 0 0 auto; }
.aza-avatar img { width: 100%; height: 100%; object-fit: cover; }
.aza-kart strong { display: block; color: var(--navy); font: 700 15px/1.3 var(--display); }
.aza-kart small { color: #7d8692; font-size: 12px; }
.weather-fx { pointer-events: none; position: fixed; inset: 0; z-index: 40; overflow: hidden; opacity: 0; transition: opacity .4s; }
.weather-fx.is-rain,
.weather-fx.is-snow { opacity: 1; }
.weather-fx span {
  position: absolute;
  top: -12vh;
  left: var(--x, 50%);
  width: var(--w, 2px);
  height: var(--h, 14px);
  background: linear-gradient(180deg, transparent, rgba(170,200,230,.85));
  animation: weather-fall var(--d, 1s) linear infinite;
  animation-delay: var(--delay, 0s);
  opacity: .75;
}
.weather-fx.is-snow span {
  width: var(--w, 6px);
  height: var(--w, 6px);
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 6px rgba(255,255,255,.45);
}
@keyframes weather-fall {
  to { transform: translate3d(var(--drift, 0), 110vh, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .weather-fx { display: none; }
}
.center-link { text-align:center; margin-top:38px; }
.center-link a { font-size:11px; font-weight:700; color:var(--navy); padding-bottom:7px; border-bottom:1px solid var(--navy); }
.center-link i { margin-left:9px; }

.gallery-section { background:var(--navy-darker); }
.gallery-grid { display:grid; grid-template-columns:1.15fr 1fr 1fr; grid-template-rows:240px 240px; gap:14px; }
.gallery-grid-albums { grid-auto-rows: 240px; }
.gallery-item { position:relative; overflow:hidden; display:block; min-height: 0; }
.gallery-item::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(5,23,44,.9),transparent 60%); transition:background .3s; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .65s; }
.gallery-item:hover img { transform:scale(1.06); }
.gallery-item span { position:absolute; z-index:2; left:24px; right:18px; bottom:20px; color:#fff; font:700 17px/1.2 var(--display); }
.gallery-item small { display:block; margin-bottom:7px; color:#df7777; font:700 8px/1 var(--display); letter-spacing:.18em; }
.gallery-empty { padding: 40px 0 10px; color: rgba(255,255,255,.72); }
.gallery-empty p { margin: 0 0 16px; max-width: 480px; line-height: 1.6; }
.gallery-tall { grid-row:1 / 3; }
.gallery-wide { grid-column:2 / 4; }

.projects-section { background:var(--paper); }
.projects-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.project-card { position:relative; min-height:365px; padding:34px; background:#fff; border:1px solid var(--line); transition:.25s; }
@media (hover: hover) {
  .project-card:hover { transform:translateY(-7px); box-shadow:var(--shadow); border-color:transparent; }
}
.project-number { position:absolute; right:27px; top:22px; color:rgba(17,55,104,.08); font:800 58px/1 var(--display); }
.project-card > i { width:58px; height:58px; display:grid; place-items:center; background:rgba(17,55,104,.07); color:var(--navy); font-size:22px; }
.project-status { display:inline-block; margin-top:26px; color:#34845c; font-size:8px; font-weight:700; letter-spacing:.16em; }
.project-status::before { content:""; display:inline-block; width:6px; height:6px; margin-right:7px; border-radius:50%; background:#4aa874; }
.project-status.planning { color:#b78330; }
.project-status.planning::before { background:#d6a14c; }
.project-card h3 { margin:12px 0; font:700 21px/1.3 var(--display); color:var(--navy); }
.project-card p { min-height:66px; color:#7a838f; font-size:13px; line-height:1.65; }
.progress { height:4px; margin-top:25px; background:#e7eaf0; }
.progress span { display:block; height:100%; background:var(--red); }
.project-card > small { display:block; margin-top:9px; color:#969da6; font-size:9px; text-align:right; }

.video-section { padding-top:20px; background:var(--paper); }
.video-feature { height:545px; position:relative; overflow:hidden; }
.video-feature > img { width:100%; height:100%; object-fit:cover; }
.video-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,25,49,.9),rgba(5,25,49,.28)); }
.video-copy { position:absolute; inset:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:8%; color:#fff; }
.video-copy h2 { color:#fff; }
.video-copy h2 em { color:#dc7373; }
.play-button { width:65px; height:65px; flex:0 0 65px; display:grid; place-items:center; margin:30px 0 11px; border:0; border-radius:50%; background:var(--red); color:#fff; line-height:1; text-decoration:none; cursor:pointer; box-shadow:0 0 0 12px rgba(192,61,61,.22); transition:transform .25s, background-color .25s; }
.play-button i { display:block; margin:0; font-size:18px; line-height:1; transform:translateX(2px); }
.play-button:hover { color:#fff; background:var(--red-dark); transform:scale(1.08); }
.video-copy > span { font-size:9px; letter-spacing:.14em; color:rgba(255,255,255,.7); text-transform:uppercase; }

.contact-section { background: var(--cream); border-top: 1px solid var(--line); }
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
.contact-copy h2 { margin-bottom: 16px; }
.contact-copy > p { margin: 0; max-width: 420px; color: var(--muted); font-size: 15px; line-height: 1.75; }
.contact-meta { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 14px; }
.contact-meta li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--navy); }
.contact-meta i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(17,55,104,.08); color: var(--red); font-size: 13px; flex-shrink: 0; }
.contact-meta a:hover { color: var(--red); }
.contact-map { grid-column: 1 / -1; width: 100%; margin-top: 8px; overflow: hidden; border: 1px solid rgba(17,55,104,.14); background: #fff; box-shadow: 0 12px 30px rgba(17,55,104,.08); }
.contact-map iframe { display: block; width: 100%; height: 380px; border: 0; }
.contact-map > a { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; padding: 0 16px; color: var(--navy); background: #fff; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; transition: color .2s, background-color .2s; }
.contact-map > a:hover { color: #fff; background: var(--navy); }
.contact-form { display: grid; gap: 16px; }
.contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form label { display: grid; gap: 7px; }
.contact-form label span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }
.contact-form input,
.contact-form textarea { width: 100%; border: 1px solid rgba(17,55,104,.16); background: #fff; color: var(--ink); padding: 13px 15px; outline: 0; transition: border-color .2s, box-shadow .2s; }
.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(17,55,104,.1); }
.contact-form input.is-invalid,
.contact-form textarea.is-invalid { border-color: var(--red); box-shadow: 0 0 0 3px rgba(192,61,61,.12); }
.contact-form textarea { resize: vertical; min-height: 140px; line-height: 1.55; }
.contact-message { grid-column: 1 / -1; }
.contact-hint { margin: 0; font-size: 12px; color: var(--muted); }
.contact-form .button { justify-self: start; cursor: pointer; border: 0; }
.contact-form .button[disabled] { opacity: .65; cursor: wait; transform: none; }
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.newsletter-section { padding:75px 0; background:var(--red); color:#fff; }
.newsletter-inner { display:grid; grid-template-columns:80px 1fr 1.15fr; align-items:center; gap:28px; }
.newsletter-icon { width:70px; height:70px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.38); border-radius:50%; font-size:26px; }
.newsletter-copy .section-kicker { color:rgba(255,255,255,.7); margin-bottom:9px; }
.newsletter-section h2 { color:#fff; font-size:34px; }
.newsletter-copy > p:last-child { margin:8px 0 0; font-size:12px; color:rgba(255,255,255,.7); }
.newsletter-cta-wrap { display: grid; gap: 12px; align-content: center; }
.newsletter-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 55px;
  padding: 0 22px;
  background: var(--navy-deep);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  transition: background .2s, transform .2s;
}
.newsletter-cta:hover,
.newsletter-cta:focus-visible { background: var(--navy); color: #fff; }
.newsletter-kanallar { display:flex; gap:14px; flex-wrap: wrap; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.78); }
.newsletter-kanallar span { display:inline-flex; align-items:center; gap:7px; }
.newsletter-kanallar i { opacity:.9; }
.newsletter-note { margin: 0; font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.72); }

.site-footer { padding:80px 0 0; background:#071d36; color:#fff; }
.footer-grid { display:grid; grid-template-columns:1.5fr repeat(2,.75fr) 1.1fr; gap:60px; padding-bottom:60px; }
.footer-brand .brand { position: relative; display: inline-flex; align-items: center; gap: 14px; }
.footer-brand .brand-mark { width: 64px; height: 64px; border-width: 3px; }
.footer-brand .brand-copy {
  position: static;
  transform: none;
  min-width: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  align-items: flex-start;
  border-radius: 0;
}
.footer-brand .brand-copy strong {
  display: block;
  font: 800 18px/1 var(--display);
  letter-spacing: .08em;
  color: #fff;
}
.footer-brand .brand-copy small { color: rgba(255,255,255,.5); font-size: 9px; letter-spacing: .14em; }
.footer-brand > p { max-width:280px; margin:24px 0; color:rgba(255,255,255,.5); font-size:12px; line-height:1.7; }
.social-links { display:flex; gap:9px; }
.social-links a { width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.16); font-size:12px; transition:.2s; }
.social-links a:hover { background:var(--red); border-color:var(--red); }
.footer-grid h3 { margin:5px 0 23px; font:700 12px/1 var(--display); letter-spacing:.08em; }
.footer-links { display:flex; flex-direction:column; gap:13px; }
.footer-links a { color:rgba(255,255,255,.53); font-size:11px; transition:.2s; }
.footer-links a:hover { color:#fff; transform:translateX(3px); }
.footer-contact p { display:flex; gap:12px; align-items:flex-start; margin:0 0 14px; color:rgba(255,255,255,.55); font-size:11px; line-height:1.6; }
.footer-contact p i { margin-top:3px; color:#d46363; }
.footer-emergency-button { margin:0; padding:0; border:0; color:inherit; background:transparent; cursor:pointer; text-align:left; }
.footer-emergency-button:hover { color:#fff; }
.map-link { display:inline-block; margin-top:8px; padding-bottom:5px; border-bottom:1px solid rgba(255,255,255,.32); font-size:10px; }
.map-link i { margin-left:8px; }
.footer-bottom { min-height:70px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.4); font-size:9px; }
.footer-bottom div { display:flex; gap:22px; }
.back-to-top { width:38px; height:38px; border:1px solid rgba(255,255,255,.2); background:transparent; color:#fff; cursor:pointer; }
.toast { position:fixed; z-index:100; right:24px; bottom:24px; display:flex; align-items:center; gap:11px; padding:15px 20px; color:#fff; background:#1e6d4d; box-shadow:var(--shadow); font-size:12px; transform:translateY(120px); opacity:0; transition:.3s; }
.toast.show { transform:none; opacity:1; }
.toast.error { background: var(--red-dark); }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }

@keyframes slideProgress { from { width:0; } to { width:100%; } }
@keyframes pulse { 50% { box-shadow:0 0 0 8px rgba(255,101,101,0); } }
@keyframes bounce { 50% { transform:translateY(5px); } }
@keyframes logoHalo { 50% { transform:scale(1.055); opacity:.45; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .reveal { opacity:1; transform:none; }
  .brand-centered:hover .brand-mark img, .brand-centered:focus-visible .brand-mark img { transform:none; }
  .mayor-visual:hover .mayor-photo-wrap,
  .mayor-visual:hover .mayor-photo-wrap img,
  .mayor-visual:hover .mayor-seal { transform:none; }
}

@media (max-width: 1100px) {
  .main-nav { grid-template-columns:minmax(0,1fr) 138px minmax(0,1fr); }
  .nav-logo-space { width:138px; }
  .nav-wing { gap:15px; }
  .nav-wing-left { padding-right:10px; }
  .nav-wing-right { padding-left:10px; }
  .nav-wing > a, .nav-dropdown > button { font-size:11px; }
  .brand-mark { width:106px; height:106px; }
  .brand-copy { top:97px; }
  .mayor-grid, .story-grid { gap:55px; }
  .footer-grid { gap:35px; }
}
@media (max-width: 900px) {
  .container { width:min(720px, calc(100% - 32px)); }
  .topbar-links { display:none; }
  .site-header { height:76px; }
  .header-inner { justify-content:space-between; }
  .brand-centered { position:relative; left:auto; top:auto; flex-direction:row; gap:10px; transform:none; }
  .brand-centered::before { display:none; }
  .brand-mark, .sticky .brand-mark { width:58px; height:58px; border-width:3px; box-shadow:0 0 0 1px var(--navy),0 8px 18px rgba(7,30,57,.16); }
  .brand-copy, .sticky .brand-copy { position:static; min-width:0; padding:0; align-items:flex-start; background:transparent; box-shadow:none; transform:none; }
  .brand-copy strong { display:block; font:800 17px/1 var(--display); letter-spacing:.09em; color:var(--navy); }
  .brand-copy small { margin-top:5px; font-size:6px; color:#748093; }
  .menu-toggle { display:block; }
  .main-nav { position:fixed; z-index:35; top:0; right:0; bottom:0; width:min(85vw,380px); height:100vh; display:flex; flex-direction:column; align-items:stretch; gap:0; padding:100px 30px 40px; background:#fff; box-shadow:-20px 0 60px rgba(0,0,0,.2); transform:translateX(110%); transition:transform .3s; overflow:auto; }
  .main-nav.open { transform:none; }
  .nav-logo-space { display:none; }
  .nav-wing, .nav-wing-left, .nav-wing-right { height:auto; flex-direction:column; align-items:stretch; gap:0; padding:0; }
  .nav-wing > a, .nav-dropdown > button { width:100%; padding:16px 0; text-align:left; border-bottom:1px solid var(--line); font-size:14px; }
  .nav-wing > a::after, .nav-dropdown > button::after { display:none; }
  .main-nav .nav-cta,
  .sticky .nav-wing > a.nav-cta {
    width: 100%;
    margin-top: 18px;
    padding: 14px 18px;
    text-align: center;
    justify-content: center;
  }
  .nav-dropdown { height:auto; display:block; }
  .dropdown-menu { position:static; width:100%; display:none; opacity:1; visibility:visible; transform:none; box-shadow:none; border-top:0; padding:0 0 8px 12px; }
  .nav-dropdown.open .dropdown-menu { display:block; }
  .menu-toggle { position: relative; z-index: 40; }
  .menu-toggle.active { position: relative; }
  .menu-toggle.active span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
  .menu-toggle.active span:nth-child(2) { opacity:0; }
  .menu-toggle.active span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
  .hero { min-height:700px; }
  .hero-content { padding-top:90px; }
  .hero h1, .hero h2 { font-size:clamp(48px,10vw,70px); }
  .quick-grid { grid-template-columns:repeat(2,1fr); }
  .quick-card:nth-child(3) { border-left:1px solid var(--line); }
  .mayor-grid, .story-grid, .news-layout { grid-template-columns:1fr; }
  .mayor-grid { gap:55px; }
  .mayor-visual { min-height:560px; }
  .events-grid { grid-template-columns:1fr 1fr; }
  .featured-event { grid-column:1 / 3; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .stats-intro { grid-column:1 / 3; min-height:70px; border-bottom:1px solid rgba(255,255,255,.2); }
  .timeline-dikey {
    --tl-rail: 32px;
    --tl-gap: 24px;
    max-width: 780px;
  }
  .timeline-dikey .timeline-card {
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 16px;
    padding: 14px;
  }
  .timeline-dikey .timeline-photo { width: 110px; }
  .gallery-grid { grid-template-columns:1fr 1fr; grid-template-rows:310px 230px 260px; }
  .gallery-tall { grid-column:1 / 3; grid-row:auto; }
  .gallery-wide { grid-column:1 / 3; }
  .projects-grid { grid-template-columns:1fr; }
  .project-card { min-height:auto; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .newsletter-inner { grid-template-columns:70px 1fr; }
  .newsletter-cta-wrap { grid-column:1 / 3; }
  .footer-grid { grid-template-columns:1.5fr 1fr 1fr; }
  .footer-contact { grid-column:1 / 4; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
  .footer-contact h3 { grid-column:1 / 4; }
}
@media (max-width: 600px) {
  .container { width:calc(100% - 28px); }
  .topbar { height:36px; }
  .topbar-announcement { width:100%; overflow:hidden; white-space:nowrap; font-size:10px; }
  .topbar-announcement #weather-status { overflow:hidden; text-overflow:ellipsis; }
  .topbar-mobile-emergency { display:grid; place-items:center; }
  .topbar-announcement strong { display:none; }
  .emergency-modal { padding:12px; }
  .emergency-dialog { max-height:calc(100vh - 24px); padding:22px 16px; border-radius:14px; }
  .emergency-item { grid-template-columns:40px minmax(0,1fr); padding:12px; }
  .emergency-item b { grid-column:2; font-size:15px; }
  .site-header { top:36px; }
  .brand-mark { width:47px; height:47px; }
  .brand-copy strong { font-size:18px; }
  .brand-copy small { font-size: 9px; letter-spacing: .12em; }
  .hero { height: auto; min-height: 100svh; padding-bottom: 96px; }
  .hero-overlay { background:linear-gradient(90deg,rgba(5,24,48,.94),rgba(7,29,57,.66)),linear-gradient(0deg,rgba(5,25,50,.5),transparent); }
  .hero-content { justify-content:center; padding-top:100px; }
  .eyebrow { margin-bottom:14px; }
  .hero h1, .hero h2 { font-size:43px; line-height:1.05; }
  .hero-lead { margin:20px 0 25px; font-size:14px; line-height:1.6; }
  .hero-actions { flex-direction:column; align-items:stretch; width:100%; }
  .hero-actions .button { width:100%; }
  .hero-bottom { bottom:26px; }
  .scroll-cue { display:none; }
  .slide-dot { width:29px; }
  .quick-grid { grid-template-columns:1fr; width:100%; }
  .quick-card, .quick-card:first-child, .quick-card:nth-child(3) { min-height:100px; border-left:0; }
  .section { padding:78px 0; }
  .section h2, .newsletter-section h2 { font-size:37px; }
  .section-heading { display:block; margin-bottom:35px; }
  .section-heading .text-link { display:inline-block; margin-top:20px; }
  .mayor-visual { min-height:470px; }
  .mayor-photo-stage { inset: 6px 6px 14px 16px; }
  .mayor-photo-wrap { inset: 10px; border-width: 2px; }
  .mayor-photo-ribbon { font-size: 10px; letter-spacing: .12em; padding: 12px 10px 10px; }
  .mayor-frame-corner { width: 26px; height: 26px; }
  .mayor-shape { right:25px; height:390px; }
  .mayor-seal { width:118px; height:118px; right:-4px; bottom:26px; border-width:7px; }
  .mayor-quote-mark { font-size: 72px; top: -18px; left: -4px; }
  .mayor-quote h2 { max-width: none; }
  .mayor-message { font-size:14px; }
  .mayor-links { flex-direction:column; align-items:flex-start; gap:14px; }
  .mayor-copy { padding-left: 0; }
  .mayor-aza { width: 96px; }
  .mayor-aza-foto { width: 64px; height: 64px; }
  .featured-image { height:230px; }
  .featured-body { padding:22px; }
  .featured-body h3 { font-size:22px; }
  .news-item { grid-template-columns:56px 1fr; gap:14px; }
  .news-item time { width:54px; height:57px; }
  .events-grid { grid-template-columns:1fr; }
  .featured-event { grid-column:auto; min-height:400px; }
  .event-note { grid-template-columns:42px 1fr; }
  .event-note button { grid-column:1 / 3; }
  .story-grid { gap:45px; }
  .story-collage { min-height:430px; }
  .story-photo-large { height:390px; }
  .story-photo-small { height:205px; }
  .since-stamp { width:105px; height:105px; left:5%; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .stat { padding:0 18px; }
  .stat strong { font-size:34px; }
  .timeline-dikey {
    --tl-rail: 22px;
    --tl-gap: 16px;
  }
  .timeline-dikey .timeline-item { gap: 12px; }
  .timeline-dikey .timeline-marker { padding-top: 28px; }
  .timeline-dikey .timeline-marker::before {
    width: 12px;
    height: 12px;
    flex-basis: 12px;
  }
  .timeline-dikey .timeline-card {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 14px;
    padding: 14px;
  }
  .timeline-dikey .timeline-photo { width: min(160px, 55vw); }
  .timeline-dikey .timeline-copy { align-items: flex-start; }
  .timeline-year {
    font-size: 10px;
    padding: 3px 8px;
    letter-spacing: .06em;
  }
  .timeline-copy h3 { font-size: 17px; }
  .timeline-copy p { font-size: 12px; }
  .timeline-yatay .timeline-item { width: min(240px, 82vw); }
  .gallery-grid { display:flex; flex-direction:column; }
  .gallery-item { height:250px; }
  .gallery-tall { height:340px; }
  .video-feature { height:470px; }
  .video-copy { padding:30px; }
  .contact-fields { grid-template-columns: 1fr; }
  .contact-map iframe { height: 240px; }
  .contact-form .button { width: 100%; justify-self: stretch; }
  .newsletter-inner { grid-template-columns:1fr; }
  .newsletter-icon { display:none; }
  .newsletter-cta-wrap { grid-column: auto; }
  .newsletter-cta { width: 100%; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1 / 3; }
  .footer-contact { grid-column:1 / 3; display:block; }
  .footer-contact h3 { grid-column:auto; }
  .footer-bottom { padding:20px 0; align-items:flex-start; gap:15px; }
  .footer-bottom div { display:none; }
}
@media (max-width: 420px) {
  .timeline-dikey .timeline-photo { width: min(140px, 62vw); }
  .timeline-yatay .timeline-item { width: min(220px, 86vw); }
}