/* ==========================================================================
   LK Risk — Sections
   Section-specific styling only. Each block maps 1:1 to a file in /sections.
   Shared compositions (split, editorial, straddle) live in layouts.css.
   Order follows the homepage: hero → expertise → features → insurance →
   benefits → commitment → faq → cta.
   ========================================================================== */


/* ==========================================================================
   Hero — sections/hero.html
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(100svh, 940px);
  padding-block: calc(var(--nav-height) + var(--space-10)) var(--space-11);
  background-color: var(--navy-950);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-focus, 70% 40%);
  filter: saturate(0.5) contrast(1.05);
  animation: settle 2.6s var(--ease-out) both;
}

/* Navy veil: dense where the copy sits, opening up towards the architecture */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(10, 18, 31, 0.96) 0%, rgba(10, 18, 31, 0.86) 38%, rgba(10, 18, 31, 0.45) 75%, rgba(10, 18, 31, 0.3) 100%),
    linear-gradient(0deg, rgba(10, 18, 31, 0.9) 0%, rgba(10, 18, 31, 0) 35%);
}

.hero__content {
  max-width: 44rem;
}

.hero__title {
  margin-bottom: var(--space-7);
  font-weight: var(--weight-medium);
}

.hero__title em {
  font-style: italic;
  color: var(--gold-300);
}

.hero__intro {
  margin-bottom: var(--space-4);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--white);
}

.hero__text {
  max-width: 36rem;
  color: var(--navy-200);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5) var(--space-7);
  margin-top: var(--space-9);
}

.hero__actions .link-arrow {
  color: var(--navy-100);
}

.hero__actions .link-arrow:hover {
  color: var(--white);
}

/* Internal pages: same hero language, shorter stage.
   Set --hero-focus inline to frame each page's photograph. */
.hero--page {
  min-height: min(78svh, 720px);
  padding-bottom: var(--space-10);
}

/* Internal headlines tend to be sentences: one step below the homepage's
   display size, on a wider measure, so they settle into two or three lines */
.hero--page .hero__content {
  max-width: 54rem;
}

.hero--page .hero__title {
  font-size: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); /* 40–72 */
}

.hero--page .hero__intro {
  max-width: 38rem;
}


/* ==========================================================================
   Expertise (About) — sections/features.html (part 1)
   Layout: .split + .media-frame. Only the lit navy backdrop is unique.
   ========================================================================== */
.expertise {
  --frame-focus: center 30%;
  position: relative;
  background:
    radial-gradient(ellipse 70% 60% at 85% 10%, rgba(46, 66, 98, 0.55), transparent 70%),
    var(--navy-900);
}


/* ==========================================================================
   Insurance — sections/insurance.html
   ========================================================================== */
.insurance {
  background-color: var(--ivory);
}

.insurance__grid {
  row-gap: var(--space-9);
}

.insurance__content {
  grid-column: 1 / span 4;
  align-self: start;
  position: sticky;
  top: calc(var(--nav-height) + var(--space-6));
}

.insurance__content .rule {
  margin-bottom: var(--space-6);
}

.insurance__title {
  margin-bottom: var(--space-5);
  font-size: var(--text-xl);
  color: var(--navy-900);
}

.insurance__cards {
  grid-column: 6 / span 7;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}


/* Benefits — sections/benefits.html: layout is .showcase (layouts.css). */


/* ==========================================================================
   Commitment — sections/commitment.html
   Layout: .split--media-end + .media-offset + .media-frame.
   ========================================================================== */
.commitment {
  --frame-saturate: 0.6;
}


/* FAQ — sections/faq.html: layout is .editorial; items are components. */


/* ==========================================================================
   Final CTA — sections/cta.html
   Mirrors the features panel: white panel across the ivory → navy seam,
   with the lower half flowing straight into the footer.
   ========================================================================== */
.cta {
  --map-height: 34rem;  /* how far the map runs down behind the panel */
  --panel-offset: 26rem; /* where the panel starts — keeps the pin in view */
  position: relative;
  isolation: isolate;
  padding-top: var(--panel-offset);
  padding-bottom: var(--space-9);
  background-color: var(--navy-950);
}

/* Map band: toned to the palette; its lower edge meets navy behind the
   panel, echoing the features panel's straddle */
.cta__map {
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: var(--map-height);
  background-color: var(--ivory);
  overflow: hidden;
}

.cta__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) sepia(0.12) contrast(0.92) brightness(1.04);
}

/* Gold marker drawn over Google's (now greyscale) pin at the map centre */
.cta__pin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 42px;
  transform: translate(-50%, -100%);
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 42'%3E%3Cpath d='M15 41s14-13.4 14-25.5A14 14 0 0 0 1 15.5C1 27.6 15 41 15 41Z' fill='%23C3A572' stroke='%230A121F' stroke-width='1.5'/%3E%3Ccircle cx='15' cy='15.5' r='5' fill='%230A121F'/%3E%3C/svg%3E");
  pointer-events: none;
}

.cta__panel {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-9);
  align-items: end;
}

.cta__heading .rule {
  margin-bottom: var(--space-6);
}

.cta__title {
  font-size: var(--text-xl);
  color: var(--navy-900);
}

.cta__title em {
  color: var(--gold-700);
}

.cta__lead {
  margin-bottom: var(--space-4);
}

.cta__body .btn {
  margin-top: var(--space-7);
}

/* Optional row when a CTA offers more than one action */
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5) var(--space-7);
  margin-top: var(--space-7);
}

.cta__actions .btn {
  margin-top: 0;
}


/* ==========================================================================
   Process — service pages: heading, steps, action
   ========================================================================== */
.process__steps {
  margin-top: var(--space-9);
}

.process__actions {
  margin-top: var(--space-9);
}


/* ==========================================================================
   Enquiry — contact.html. Layout: .editorial (details aside + form panel).
   ========================================================================== */
.enquiry .contact-list {
  margin-top: var(--space-8);
}

.enquiry__social {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
}

.enquiry__social .eyebrow {
  margin-bottom: var(--space-4);
}

.enquiry .panel > .copy {
  margin-bottom: var(--space-8);
}


/* ==========================================================================
   Responsive — tablet
   ========================================================================== */
@media (max-width: 1080px) {
  .insurance__content,
  .insurance__cards {
    grid-column: 1 / -1;
  }

  .insurance__content {
    position: static;
    max-width: 34rem;
  }
}

@media (max-width: 860px) {
  .cta__panel {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
}


/* ==========================================================================
   Responsive — mobile
   ========================================================================== */
@media (max-width: 640px) {
  :root {
    --nav-height: 72px;
  }

  .hero {
    min-height: 100svh;
    align-items: flex-end;
  }

  .hero::before {
    background:
      linear-gradient(0deg, rgba(10, 18, 31, 0.96) 0%, rgba(10, 18, 31, 0.8) 55%, rgba(10, 18, 31, 0.5) 100%);
  }

  .hero--page {
    min-height: 72svh;
    padding-bottom: var(--space-9);
  }

  .hero__actions .btn,
  .cta__body .btn {
    width: 100%;
    white-space: normal;
  }

  .cta {
    --map-height: 24rem;
    --panel-offset: 18rem;
  }

  .insurance__cards {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .insurance-card__media {
    aspect-ratio: 4 / 3;
  }
}