/* ===========================================================================
   Aurora Trust Bank: public site.
   Loaded after aurora.css, which owns all design tokens.

   Replaces roughly 2,800 lines of inline <style> that were duplicated across
   ten marketing and legal pages.
   ======================================================================== */

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.97);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  max-width: var(--container);
  min-height: var(--header-height);
  margin-inline: auto;
  padding: var(--space-3) var(--space-5);
}

.site-logo { flex-shrink: 0; }
.site-logo img { width: 128px; height: auto; }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

.site-nav a {
  position: relative;
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--font-secondary);
  border-radius: var(--radius-sm);
}

.site-nav a::after {
  content: '';
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.site-nav a:hover,
.site-nav a.is-active { color: var(--primary); }
.site-nav a:hover::after,
.site-nav a.is-active::after { transform: scaleX(1); }

.site-actions { display: flex; gap: var(--space-2); flex-shrink: 0; }

.site-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
  background: none;
  border: 0;
}
.site-burger span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--primary);
  transition: transform var(--transition), opacity var(--transition);
}

/* ------------------------------------------------------------ mobile nav */

.mobile-nav { position: fixed; inset: 0; z-index: 1200; }
.mobile-nav[hidden] { display: none; }
.mobile-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 32, 63, 0.5);
  backdrop-filter: blur(3px);
  animation: fade-in 200ms var(--ease-out);
}

.mobile-nav__panel {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: min(360px, 88vw);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-5);
  overflow-y: auto;
  background: var(--surface);
  box-shadow: var(--shadow-xl);
  animation: slide-in 280ms var(--ease-out);
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-in { from { transform: translateX(100%); } to { transform: none; } }

.mobile-nav__close {
  align-self: flex-end;
  width: 42px; height: 42px;
  background: var(--gray-100);
  border: 0;
  border-radius: 50%;
  color: var(--primary);
  font-size: 1.1rem;
}

.mobile-nav nav { display: flex; flex-direction: column; }
.mobile-nav nav a {
  padding: var(--space-4) 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--primary);
  border-bottom: 1px solid var(--gray-100);
}
.mobile-nav nav a.is-active { color: var(--accent-700); }

.mobile-nav__actions { display: grid; gap: var(--space-3); }

.mobile-nav__contact { margin: 0; font-size: var(--text-sm); }
.mobile-nav__contact a { display: block; font-weight: 700; color: var(--primary); }
.mobile-nav__contact span { color: var(--font-secondary); font-size: var(--text-xs); }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(88vh, 820px);
  padding-block: clamp(3rem, 9vw, 6rem);
  overflow: hidden;
  background: linear-gradient(165deg, #00152A 0%, var(--primary-800) 42%, var(--primary-600) 100%);
  color: #E9F2F8;
}

/* Photographic backdrop. The gradient above still shows through and remains
   the fallback if the image is slow or blocked, so the hero text keeps its
   contrast either way. */
.hero__media {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: 0.55;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(0, 21, 42, 0.92) 0%, rgba(0, 32, 63, 0.72) 45%, rgba(0, 32, 63, 0.35) 100%),
    linear-gradient(to top, rgba(0, 21, 42, 0.9), transparent 45%);
}

/* The aurora itself: three blurred bands drifting behind the content.
   Replaces a 2.2 MB looping video with about four kilobytes of CSS. */
.aurora-sky { position: absolute; inset: 0; overflow: hidden; }

.aurora-sky::before,
.aurora-sky::after,
.aurora-band {
  content: '';
  position: absolute;
  left: -30%;
  width: 160%;
  height: 46%;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  will-change: transform;
}

.aurora-sky::before {
  top: 2%;
  background: radial-gradient(closest-side, rgba(0, 200, 151, 0.72), transparent 72%);
  animation: drift-a 22s var(--ease-in-out) infinite alternate;
}
.aurora-sky::after {
  top: 22%;
  background: radial-gradient(closest-side, rgba(0, 122, 124, 0.62), transparent 72%);
  animation: drift-b 28s var(--ease-in-out) infinite alternate;
}
.aurora-band {
  top: 40%;
  height: 38%;
  background: radial-gradient(closest-side, rgba(79, 224, 187, 0.42), transparent 74%);
  animation: drift-c 34s var(--ease-in-out) infinite alternate;
}

@keyframes drift-a {
  from { transform: translate3d(-6%, 0, 0) rotate(-3deg) scaleY(0.86); }
  to   { transform: translate3d(8%, 5%, 0) rotate(4deg) scaleY(1.18); }
}
@keyframes drift-b {
  from { transform: translate3d(7%, 3%, 0) rotate(3deg) scaleY(1.12); }
  to   { transform: translate3d(-8%, -3%, 0) rotate(-4deg) scaleY(0.88); }
}
@keyframes drift-c {
  from { transform: translate3d(-4%, 4%, 0) scaleX(1.1); }
  to   { transform: translate3d(6%, -4%, 0) scaleX(0.92); }
}

/* A static star field, drawn once as a repeating gradient. */
.aurora-stars {
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 28% 42%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 44% 12%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 61% 33%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 76% 20%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 88% 48%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 18% 62%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 52% 72%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 82% 68%, #fff, transparent);
  background-repeat: no-repeat;
}

/* A soft ridge line grounding the composition. */
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 130px;
  background: linear-gradient(to bottom, transparent, rgba(0, 21, 42, 0.85));
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem 1rem;
  margin-bottom: var(--space-4);
  border: 1px solid rgba(0, 200, 151, 0.42);
  border-radius: var(--radius-full);
  background: rgba(0, 200, 151, 0.12);
  color: var(--accent-300);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 13ch;        /* keeps the line breaks deliberate rather than orphaning a word */
  margin-bottom: var(--space-4);
  font-size: clamp(2.25rem, 4.4vw, 3.4rem);
  color: #fff;
}
.hero h1 em { font-style: normal; color: var(--accent-300); }

.hero__lede {
  max-width: 56ch;
  margin-bottom: var(--space-6);
  font-size: clamp(1rem, 1.6vw, var(--text-lg));
  color: rgba(233, 242, 248, 0.82);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.hero__trust div strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: #fff;
  line-height: 1.1;
}
.hero__trust div span { font-size: var(--text-xs); color: rgba(233, 242, 248, 0.62); }

/* Floating glass panel on the right of the hero. */
.hero__card {
  position: relative;
  padding: var(--space-6);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-xl);
  animation: float 7s var(--ease-in-out) infinite alternate;
}
@keyframes float { from { transform: translateY(-8px); } to { transform: translateY(8px); } }

.hero__card h2 { font-size: var(--text-lg); color: #fff; margin-bottom: var(--space-4); }
.hero__card dl { display: grid; gap: var(--space-4); margin: 0; }
.hero__card dt { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: rgba(233, 242, 248, 0.6); }
.hero__card dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--accent-300);
}

/* ------------------------------------------------------------ page hero */

.page-hero {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
  background: linear-gradient(150deg, #00152A, var(--primary-700) 60%, var(--primary-500));
  color: #E9F2F8;
  text-align: center;
}
.page-hero .aurora-sky { opacity: 0.75; }
.page-hero__inner { position: relative; z-index: 2; max-width: 780px; margin-inline: auto; padding-inline: var(--space-5); }
.page-hero h1 { color: #fff; }
.page-hero p { color: rgba(233, 242, 248, 0.8); font-size: var(--text-lg); margin: 0; }

.breadcrumb {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(233, 242, 248, 0.6);
}
.breadcrumb a { color: var(--accent-300); }

/* ------------------------------------------------------------- features */

.feature-card { height: 100%; }
.feature-card h3 { margin-bottom: var(--space-2); }
.feature-card p { color: var(--font-secondary); font-size: var(--text-sm); margin-bottom: var(--space-4); }
.feature-card .feature-link { font-size: var(--text-sm); font-weight: 600; color: var(--accent-700); }
.feature-card .feature-link i { transition: transform var(--transition); }
.feature-card:hover .feature-link i { transform: translateX(4px); }

/* --------------------------------------------------------------- stats */

.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--space-5);
  text-align: center;
}
.stat-strip div strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, var(--text-4xl));
  line-height: 1.05;
  color: var(--accent-300);
}
.stat-strip div span {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.72);
}

/* ---------------------------------------------------- heritage timeline */

.timeline {
  display: flex;
  gap: var(--space-5);
  padding-block: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.timeline::-webkit-scrollbar { height: 6px; }
.timeline::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

.timeline__item {
  position: relative;
  flex: 0 0 min(320px, 78vw);
  scroll-snap-align: start;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  border-top: 4px solid var(--accent);
  transition: transform var(--transition), box-shadow var(--transition);
}
.timeline__item:hover,
.timeline__item:focus-within { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.timeline__year {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--accent-700);
  line-height: 1;
}
.timeline__item h3 { margin: var(--space-2) 0; font-size: var(--text-lg); }
.timeline__item p { margin: 0; font-size: var(--text-sm); color: var(--font-secondary); }

.timeline-controls { display: flex; gap: var(--space-2); justify-content: center; margin-top: var(--space-4); }
.timeline-controls button {
  width: 44px; height: 44px;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--primary);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.timeline-controls button:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* -------------------------------------------------------------- article */

.article-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

.article-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform var(--transition), box-shadow var(--transition);
}
.article-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.article-card__media { position: relative; aspect-ratio: 16 / 9; background: var(--primary-800); }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; }

.article-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-5); }
.article-card__body h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.article-card__body h3 a { color: inherit; }
.article-card__body h3 a:hover { color: var(--accent-700); }
.article-card__body p { flex: 1; font-size: var(--text-sm); color: var(--font-secondary); }

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--thin-font-color);
}

/* Long-form article body */
.prose { max-width: 72ch; margin-inline: auto; }
.prose h2 { margin-top: var(--space-7); font-size: var(--text-2xl); }
.prose h3 { margin-top: var(--space-6); }
.prose p, .prose li { color: var(--font-color); font-size: var(--text-lg); line-height: 1.8; }
.prose .lead { font-size: var(--text-xl); color: var(--font-secondary); }
.prose blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--accent);
  background: var(--accent-pale);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
}

/* ------------------------------------------------------------- lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: none;
  place-items: center;
  padding: var(--space-5);
  background: rgba(0, 21, 42, 0.9);
  backdrop-filter: blur(6px);
}
.lightbox.is-open { display: grid; }
.lightbox img { max-width: min(1100px, 94vw); max-height: 88vh; border-radius: var(--radius); box-shadow: var(--shadow-xl); }
.lightbox__close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 48px; height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.25rem;
}
.lightbox__close:hover { background: rgba(255, 255, 255, 0.26); }
[data-lightbox] { cursor: zoom-in; }

/* ------------------------------------------------------------ contact */

.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }

.contact-channel {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--gray-100);
}
.contact-channel:last-child { border-bottom: 0; }
.contact-channel__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: var(--radius);
  background: var(--accent-pale);
  color: var(--accent-700);
}
.contact-channel h3 { margin: 0 0 2px; font-size: var(--text-base); }
.contact-channel a { font-weight: 600; }
.contact-channel span { display: block; font-size: var(--text-xs); color: var(--thin-font-color); }

/* --------------------------------------------------------------- legal */

.legal-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }

.legal-toc { position: sticky; top: calc(var(--header-height) + var(--space-5)); }
.legal-toc h2 { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--thin-font-color); }
.legal-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: block;
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  color: var(--font-secondary);
  border-left: 2px solid var(--border);
  position: relative;
}
.legal-toc a::before {
  content: counter(toc);
  position: absolute;
  left: var(--space-2);
  font-size: var(--text-xs);
  color: var(--thin-font-color);
}
.legal-toc a:hover { color: var(--primary); border-left-color: var(--accent); }

.legal-body section { scroll-margin-top: calc(var(--header-height) + var(--space-5)); }
.legal-body section + section { margin-top: var(--space-7); }
.legal-body h2 { font-size: var(--text-xl); }
.legal-body p, .legal-body li { color: var(--font-secondary); }

.legal-updated {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
  border-radius: var(--radius);
  background: var(--gray-50);
  border: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--font-secondary);
}

/* ------------------------------------------------------------------ cta */

.cta-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, var(--space-8));
  border-radius: var(--radius-xl);
  background: linear-gradient(140deg, var(--primary-800), var(--primary-600) 65%, var(--accent-800));
  color: #fff;
  text-align: center;
}
.cta-panel h2 { color: #fff; }
.cta-panel p { max-width: 58ch; margin-inline: auto; color: rgba(255, 255, 255, 0.82); }
.cta-panel .hero__cta { justify-content: center; margin-top: var(--space-5); }

/* --------------------------------------------------------- scroll reveal */

/* Content is visible by default and only hidden once JavaScript has confirmed
   it can reveal it again. Hiding first would leave the page blank for anyone
   whose script fails to load. */
.has-js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.has-js .reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------- breakpoints */

@media (max-width: 1024px) {
  /* minmax(0, 1fr) rather than a bare 1fr: an implicit `auto` minimum lets a
     long unbreakable string, such as an email address or a wide table, push
     the track past the viewport. */
  .hero__inner   { grid-template-columns: minmax(0, 1fr); }
  .hero__card    { max-width: 460px; }
  .contact-grid  { grid-template-columns: minmax(0, 1fr); }
  .legal-layout  { grid-template-columns: minmax(0, 1fr); }
  .legal-toc     { position: static; }
}

@media (max-width: 880px) {
  .site-nav,
  .site-actions { display: none; }
  .site-burger { display: flex; margin-left: auto; }
  .site-logo img { width: 108px; }
}

@media (max-width: 560px) {
  .hero__trust { gap: var(--space-4); }
  .hero__cta .btn { width: 100%; }
  .cta-panel .hero__cta .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .aurora-sky::before,
  .aurora-sky::after,
  .aurora-band,
  .hero__card { animation: none; }
  .reveal { opacity: 1; transform: none; }
}

/* ===========================================================================
   Site footer.

   The markup in includes/public_footer.php shipped without any styles at all,
   so the footer rendered as an unstyled stack of lists. This is the whole
   component: a five-column grid over Arctic Midnight, collapsing to two
   columns on a tablet and one on a phone.
   ======================================================================== */

.site-footer {
  position: relative;
  margin-top: auto;
  background: linear-gradient(170deg, var(--primary-800) 0%, #00152A 100%);
  color: rgba(233, 242, 248, 0.72);
  font-size: var(--text-sm);
}

/* A thin aurora line along the top edge, tying the footer to the brand. */
.site-footer::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-700), var(--accent), var(--accent-300), var(--accent-700));
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr) 1.5fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(3rem, 6vw, var(--space-8)) var(--space-5) var(--space-6);
}

.site-footer__brand img {
  width: 150px;
  height: auto;
  margin-bottom: var(--space-4);
}
.site-footer__brand p {
  max-width: 38ch;
  margin-bottom: var(--space-4);
  line-height: 1.7;
}

.site-footer__swift {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
}
.site-footer__swift span {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(233, 242, 248, 0.55);
}
.site-footer__swift strong {
  font-size: var(--text-base);
  letter-spacing: 0.08em;
  color: var(--accent-300);
}

.site-footer__col h4 {
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}

.site-footer__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.site-footer a {
  color: rgba(233, 242, 248, 0.72);
  transition: color var(--transition);
}
.site-footer a:hover { color: var(--accent-300); }

.site-footer__contact address {
  margin-bottom: var(--space-4);
  font-style: normal;
  line-height: 1.8;
}

.site-footer__phones {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}
.site-footer__phones a { display: block; font-weight: 600; color: #fff; }
.site-footer__phones a:hover { color: var(--accent-300); }
.site-footer__phones span {
  display: block;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: rgba(233, 242, 248, 0.5);
}

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--text-xs);
  color: rgba(233, 242, 248, 0.5);
}
.site-footer__bar p { margin: 0; }
.site-footer__bar p:last-child { max-width: 60ch; text-align: right; }

@media (max-width: 1024px) {
  .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__brand,
  .site-footer__contact { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .site-footer__inner { grid-template-columns: minmax(0, 1fr); }
  .site-footer__bar { flex-direction: column; align-items: flex-start; }
  .site-footer__bar p:last-child { text-align: left; }
}

/* --- Wide photographic band, used above the heritage timeline ----------- */

.heritage-banner {
  position: relative;
  margin: 0 0 var(--space-6);
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.heritage-banner img {
  width: 100%;
  aspect-ratio: 40 / 13;
  object-fit: cover;
}
.heritage-banner figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-5) var(--space-5) var(--space-4);
  background: linear-gradient(to top, rgba(0, 21, 42, 0.88), transparent);
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--text-sm);
}

@media (max-width: 600px) {
  .heritage-banner img { aspect-ratio: 3 / 2; }
}

/* --- Feature card with photography above the body ----------------------- */

.feature-card--photo { padding: 0; overflow: hidden; }
.feature-card--photo img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.feature-card--photo .feature-card__body { padding: var(--space-5); }