/* Layout: containers, sections, header, navigation, hero, footer */

.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.container-narrow { width: min(100% - 2.5rem, 820px); margin-inline: auto; }

.section { padding-block: var(--spacing-xl); }
.section--tight { padding-block: var(--spacing-lg); }
.section--soft { background: var(--color-bg-soft); }
.section--dark { background: var(--color-bg-dark); color: var(--color-on-dark); }
.section-head { max-width: 760px; margin-bottom: var(--spacing-lg); }
.section-head--center { margin-inline: auto; text-align: center; }

/* Brand tricolour line (red / orange / green, as on the letterhead) */
.tricolour { height: 5px; background: linear-gradient(90deg, var(--jds-red) 0 42%, var(--jds-orange) 42% 60%, var(--jds-green) 60%); }

/* ── Header ───────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.97); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--color-line); }
.site-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); }
.site-logo { display: block; flex: 0 0 auto; }
.site-logo img { width: 112px; height: auto; }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.site-nav a:not(.btn) { display: block; padding: 0.55rem 0.8rem; border-radius: var(--radius-sm); color: var(--color-text); text-decoration: none; font-weight: 700; font-size: 0.98rem; }
.site-nav a:not(.btn):hover, .site-nav a[aria-current="page"]:not(.btn) { color: var(--jds-red); background: var(--color-bg-soft); }
.site-nav .nav-cta { display: flex; gap: 0.5rem; margin-left: 0.6rem; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; padding: 0.6rem; border-radius: var(--radius-sm); cursor: pointer; }
.nav-toggle span { display: block; width: 26px; height: 3px; margin: 5px 0; background: var(--color-text); border-radius: 2px; transition: transform var(--transition-fast), opacity var(--transition-fast); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.site-header .header-phone { display: inline-flex; }

@media (max-width: 1060px) {
  .nav-toggle { display: block; }
  .site-header .header-phone { margin-left: auto; }
  /* Closed menu is display:none, not pushed off-screen: an off-screen fixed
     panel widens the page on phones and lets it scroll sideways. */
  .site-nav { display: none; position: fixed; inset: calc(var(--header-h) + 5px) 0 0 0; background: #fff; padding: 1.25rem; overflow-y: auto; }
  .site-nav.is-open { display: block; animation: nav-in var(--transition-normal); }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0.2rem; }
  .site-nav a:not(.btn) { font-size: 1.2rem; padding: 0.9rem 0.6rem; border-bottom: 1px solid var(--color-line); border-radius: 0; }
  .site-nav .nav-cta { flex-direction: column; margin: 1rem 0 0; }
  .site-nav .nav-cta .btn { width: 100%; justify-content: center; }
  .nav-toggle { margin-left: 0; }
}
@media (max-width: 480px) { .header-phone .btn__text { display: none; } }
@keyframes nav-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .site-nav.is-open { animation: none; } }

/* ── Hero ─────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; background: radial-gradient(ellipse at 75% 20%, #22306060 0%, transparent 55%), radial-gradient(ellipse at 10% 90%, #5a1a2840 0%, transparent 50%), var(--color-bg-dark); color: var(--color-on-dark); }
.hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--spacing-lg); align-items: center; padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem); }
.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: var(--jds-gold); text-shadow: 0 0 28px rgba(247, 181, 44, 0.45); }
.hero__lead { font-size: clamp(1.1rem, 1.6vw, 1.28rem); color: var(--color-on-dark-muted); max-width: 54ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.8rem 0 1.6rem; }
.hero__trust { display: flex; align-items: center; gap: 0.7rem; color: var(--color-on-dark-muted); font-size: 0.95rem; }
.hero__trust strong { color: #fff; }
.hero__media { position: relative; min-height: 520px; }
.hero__video { position: relative; width: min(330px, 70%); margin-left: auto; margin-right: 12%; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 4px solid rgba(255, 255, 255, 0.08); }
.hero__video video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.hero__card { position: absolute; z-index: 2; width: 42%; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-lg); border: 4px solid #fff; background: #fff; }
.hero__card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.hero__card--a { left: 0; top: 8%; transform: rotate(-4deg); }
.hero__card--b { right: 0; bottom: -2%; width: 36%; transform: rotate(3deg); }
.media-tag { position: absolute; left: 0.6rem; bottom: 0.6rem; background: rgba(12, 18, 36, 0.82); color: #fff; font-size: 0.78rem; font-weight: 700; padding: 0.3rem 0.6rem; border-radius: var(--radius-full); }

@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__media { min-height: 0; display: grid; grid-template-columns: 1.15fr 1fr; gap: 0.8rem; max-width: 560px; }
  .hero__video { width: 100%; margin: 0; grid-column: 1; grid-row: 1 / span 2; }
  .hero__video video { height: 100%; aspect-ratio: auto; }
  .hero__card, .hero__card--a, .hero__card--b { position: relative; inset: auto; width: 100%; transform: none; }
  .hero__card--a { grid-column: 2; grid-row: 1; }
  .hero__card--b { grid-column: 2; grid-row: 2; }
  .hero__card img { height: 100%; }
}

/* Inner-page hero (lighter) */
.page-hero { background: var(--color-bg-dark); color: var(--color-on-dark); }
.page-hero__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--spacing-lg); align-items: center; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.page-hero h1 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.3rem); }
.page-hero__media img, .page-hero__media video { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-height: 460px; object-fit: cover; }
.page-hero--plain .page-hero__inner { grid-template-columns: 1fr; }
@media (max-width: 860px) { .page-hero__inner { grid-template-columns: 1fr; } .page-hero__media img { max-height: 340px; } }

/* ── Grids ────────────────────────────────────────────── */
.grid { display: grid; gap: var(--spacing-md); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); align-items: center; }
.split--wide-left { grid-template-columns: 1.15fr 0.85fr; }
@media (max-width: 960px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .split, .split--wide-left { grid-template-columns: 1fr; gap: var(--spacing-lg); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* ── Footer ───────────────────────────────────────────── */
.site-footer { background: var(--color-bg-dark); color: var(--color-on-dark-muted); font-size: 0.95rem; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--jds-gold); text-decoration: underline; }
.site-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--spacing-lg); padding-block: var(--spacing-xl) var(--spacing-lg); }
.site-footer h2 { font-size: 1rem; color: #fff; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.9rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.45rem; }
.site-footer__logo { display: inline-block; background: #fff; border-radius: var(--radius-md); padding: 0.7rem 0.9rem; margin-bottom: 1rem; }
.site-footer__logo img { width: 120px; }
.site-footer__legal { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-block: 1.2rem; font-size: 0.85rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; }
@media (max-width: 860px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-footer__grid { grid-template-columns: 1fr; } }