/*
 * landing-il.css
 * Independent Lifestyle Coming Soon — standalone landing page styles.
 *
 * Typography note:
 *   Headings use "Roc Grotesk" loaded via Adobe Typekit (enqueued in functions.php).
 *
 *   Body copy uses "Mulish" loaded via Google Fonts (enqueued in functions.php).
 *
 */

/* ============================================================
   Custom Properties
   ============================================================ */
:root {
  --il-navy:       #001a70;
  --il-blue:       #009cde;
  --il-blue-light: #66c4eb;
  --il-white:      #ffffff;

  --il-font-heading: roc-grotesk, 'Arial Black', Arial, sans-serif;
  --il-font-body:    'Mulish', system-ui, Arial, sans-serif;

  /* Fluid horizontal padding: 20px → 120px over 375px → 1920px viewport */
  --il-pad-x:      clamp(20px, 6.25vw, 120px);
  /* Wide padding used for intro/form sections */
  --il-pad-x-wide: clamp(40px, 20.8vw, 400px);
  /* Vertical section padding */
  --il-pad-y:      clamp(60px, 12.5vw, 240px);
}

/* ============================================================
   Base Reset (scoped to .il-landing)
   ============================================================ */
.il-landing *,
.il-landing *::before,
.il-landing *::after {
  box-sizing: border-box;
}

.il-landing {
  font-family: var(--il-font-body);
  color: var(--il-navy);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.il-landing img {
  max-width: 100%;
  height: auto;
}

/* ============================================================
   Skip Link
   ============================================================ */
.il-skip-link {
  position: fixed;
  top: -100px;
  left: 0;
  z-index: 9999;
  background: var(--il-blue);
  color: var(--il-white);
  padding: 10px 20px;
  font-family: var(--il-font-body);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s;
}
.il-skip-link:focus {
  top: 0;
}

/* ============================================================
   Buttons
   ============================================================ */
.il-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 36px;
  border-radius: 4px;
  font-family: var(--il-font-body);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.33;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
  white-space: normal;
}

.il-btn--solid {
  background-color: var(--il-blue);
  border-color: var(--il-blue);
  color: var(--il-white);
}
.il-btn--solid:hover,
.il-btn--solid:focus-visible {
  background-color: #0081bc;
  border-color: #0081bc;
  color: var(--il-white);
}

.il-btn--outline {
  background-color: transparent;
  border-color: var(--il-blue);
  color: var(--il-white);
}
.il-btn--outline:hover,
.il-btn--outline:focus-visible {
  background-color: var(--il-blue);
  color: var(--il-white);
}

.il-btn--full {
  width: 100%;
}

/* ============================================================
   Navbar
   ============================================================ */
.il-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px var(--il-pad-x);
}

.il-nav__logo {
  display: block;
  width: 270px;
}

@media (max-width: 600px) {
  .il-nav {
  }

  .il-nav__logo {
    width: 40px;
  }
}
.il-nav__logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   Hero
   ============================================================ */
.il-hero {
  position: relative;
  min-height: clamp(500px, 53.3vw, 1024px);
  display: flex;
  align-items: flex-end;
  padding: 120px var(--il-pad-x) clamp(40px, 6.25vw, 120px);
  overflow: hidden;
  /* Scroll parallax: --il-hero-parallax set from page-ilcs-lp.twig */
  --il-hero-parallax: 0px;
}

@media (max-width: 600px) {
  .il-hero {
    padding-top: 200px;
  }
}

.il-hero__bg {
  position: absolute;
  inset: 0;
  background-color: var(--il-navy);
  background-size: cover;
  background-position: center top;
  transform-origin: center center;
  /* Scale hides edges when --il-hero-parallax shifts the layer */
  transform: scale(1.14) translate3d(0, var(--il-hero-parallax), 0);
}

.il-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 26, 112, 0.4) 0%,
    #001a70 80%
  );
  transform: translate3d(0, var(--il-hero-parallax), 0);
}

.il-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  gap: clamp(20px, 2vw, 40px);
  align-items: flex-end;
  width: 100%;
}

.il-hero__headline {
  font-family: var(--il-font-heading);
  font-size: clamp(40px, 6.25vw, 120px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--il-white);
  margin: 0;
  flex: 0 0 auto;
  width: clamp(300px, 62.5vw, 1200px);
}

.il-text-accent {
  color: var(--il-blue-light);
}

.il-hero__aside {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 40px);
  align-items: flex-start;
  justify-content: center;
}

.il-hero__desc {
  font-size: clamp(16px, 1.67vw, 32px);
  line-height: 1.25;
  color: var(--il-white);
  margin: 0;
}

/* ============================================================
   Video Section
   ============================================================ */
.il-video {
  position: relative;
  background-color: var(--il-navy);
  padding: 0 var(--il-pad-x) clamp(40px, 6.25vw, 120px);
  overflow: visible;
}

@media (max-width: 600px) {
  .il-video {
    padding: 0;
  }
}

.il-video__sr-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.il-video__inner {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background-color: #000;
  overflow: hidden;
}

.il-video__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
  transition: opacity 0.8s ease;
}

.il-video__poster--hidden {
  opacity: 0;
  pointer-events: none;
}

/* Muted autoplay iframe — sits behind the poster, same dimensions */
.il-video__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  z-index: 0;
}

.il-video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 2;
}

.il-video__play img {
  width: clamp(72px, 8.4vw, 150px);
  height: auto;
  transition: transform 0.3s ease-in-out;
}
.il-video__play:hover img,
.il-video__play:focus-visible img,
.il-video__play:hover svg,
.il-video__play:focus-visible svg {
  transform: scale(1.04);
}
.il-video__play:hover svg,
.il-video__play:focus-visible svg {
  transform: scale(1.04);
}

/* ============================================================
   Middle Scene — shared positioning context for video, intro,
   cta, and the three floating images.
   overflow-x: clip prevents horizontal scrollbar from float 2
   bleeding off-screen right; overflow-y must stay visible so
   floats can overlap the hero above and footer below.
   ============================================================ */
.il-scene {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
}

/* ============================================================
   Floating Decorative Images
   Each float is absolutely positioned within its parent section,
   so positioning is content-aware and doesn't drift at large viewports.

   Sections need position: relative and overflow: visible.
   .il-scene keeps overflow-x: clip to swallow the right bleed on float 2.
   ============================================================ */
.il-float {
  position: absolute;
  pointer-events: none;
  z-index: 10;
}

.il-float img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* border-radius: 4px; */
  /* box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); */
}

/* Float 1 — inside .il-video, bottom-left corner, overlaps down into intro */
.il-float--1 {
  --il-parallax-y: 0px;
  bottom: -120px;
  left: 64px;
  width: clamp(160px, 16.67vw, 320px);
  aspect-ratio: 5 / 3;
  transform: rotate(-5deg) translate3d(0, var(--il-parallax-y), 0);
}

/* Float 2 — inside .il-intro, right side, partially off-screen */
.il-float--2 {
  --il-parallax-y: 0px;
  top: 80px;
  right: -60px;
  width: clamp(400px, 41.67vw, 800px);
  aspect-ratio: 5 / 3;
  transform: rotate(5deg) translate3d(0, var(--il-parallax-y), 0);
}

/* Float 3 — inside .il-intro, bottom center-left, overlaps down into CTA */
.il-float--3 {
  --il-parallax-y: 0px;
  bottom: -80px;
  left: 28%;
  width: clamp(240px, 25vw, 480px);
  aspect-ratio: 5 / 3;
  transform: rotate(-5deg) translate3d(0, var(--il-parallax-y), 0);
}

/* ============================================================
   Intro — Reserve without Reservation
   ============================================================ */
.il-intro {
  position: relative;
  z-index: 5;
  background-color: var(--il-blue);
  color: var(--il-white);
  padding: var(--il-pad-y) var(--il-pad-x-wide);
}

@media (max-width: 1024px) {
  .il-intro {
    padding: var(--il-pad-y) var(--il-pad-x);
  }
}

.il-intro__inner {
  max-width: 400px;
}

.il-intro__heading {
  font-family: var(--il-font-heading);
  font-size: clamp(36px, 5vw, 96px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--il-white);
  margin: 0 0 clamp(20px, 2vw, 40px);
  max-width: 640px;
}

.il-intro__text {
  font-size: 24px;
  line-height: 1.4;
  margin: 0;
  max-width: 440px;
}

/* ============================================================
   CTA + Form
   ============================================================ */
.il-cta {
  background-color: var(--il-white);
  padding: var(--il-pad-y) var(--il-pad-x);
  display: flex;
  gap: clamp(40px, 10.4vw, 200px);
  align-items: flex-start;
}

@media (max-width: 1024px) {
  .il-cta {
    padding-top: calc(var(--il-pad-y) * 2);
  }
}

.il-cta__copy {
  flex: 1 0 0;
  min-width: 0;
  position: sticky;
  top: 40px;
}

.il-cta__heading {
  font-family: var(--il-font-heading);
  font-size: clamp(32px, 5vw, 96px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--il-blue);
  margin: 0 0 clamp(16px, 2vw, 40px);
}

.il-cta__desc {
  font-size: clamp(16px, 1.25vw, 24px);
  line-height: 1.4;
  color: var(--il-navy);
  margin: 0;
}

.il-cta__form-wrap {
  flex: 1 0 0;
  min-width: 0;
}

@media (max-width: 600px) {
  .il-cta__form-wrap {
    margin-top: 40px;
  }
}

/* ============================================================
   Fallback Form
   (These styles also inform the Gravity Forms overrides below)
   ============================================================ */
.il-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.il-form__field {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.il-form__field fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

/* Figma CTA form: Mulish 24 / 32, label color #009cde */
.il-form__label,
legend.il-form__label {
  font-size: clamp(16px, 1.25vw, 24px) !important;
  font-weight: 400;
  line-height: clamp(24px, 1.67vw, 32px);
  color: var(--il-blue);
  padding: 0;
}

.il-form__input {
  width: 100%;
  background-color: rgba(0, 156, 222, 0.05);
  border: 1px solid var(--il-navy);
  border-radius: 4px;
  padding: 12px 16px;
  font-family: var(--il-font-body);
  font-size: clamp(16px, 1.25vw, 24px);
  line-height: clamp(24px, 1.67vw, 32px);
  color: var(--il-navy);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.il-form__input:focus {
  border-color: var(--il-blue);
  box-shadow: 0 0 0 3px rgba(0, 156, 222, 0.2);
}
.il-form__input::placeholder {
  color: rgba(0, 26, 112, 0.4);
}

.il-form__checkboxes {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 0;
}

.il-form__check-row {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
}

/* Figma: checkbox hit box 36×36 */
.il-form__checkbox {
  width: 36px;
  height: 36px;
  min-width: 36px;
  margin-top: 0;
  background-color: rgba(0, 156, 222, 0.05);
  border: 1px solid var(--il-navy);
  border-radius: 4px;
  cursor: pointer;
  accent-color: var(--il-blue);
}

.il-form__check-label {
  font-size: clamp(16px, 1.25vw, 24px);
  line-height: clamp(24px, 1.67vw, 32px);
  color: var(--il-navy);
}

/* ============================================================
   Gravity Forms overrides — match .il-form (fallback) design
   Gravity 2.5+ theme: div.gform_fields + .gchoice (legacy ul/li still covered)
   ============================================================ */
.il-cta__form-wrap .gform_wrapper {
  margin: 0;
  max-width: none !important;
}

.il-cta__form-wrap .gform_wrapper .gform_heading {
  margin: 0;
}

.il-cta__form-wrap .gform_wrapper .gform_heading .gform_description:empty {
  display: none;
}

/* Required-field legend hidden per design (asterisks remain on labels). */
.il-cta__form-wrap .gform_wrapper .gform_required_legend {
  display: none !important;
}

.il-cta__form-wrap .gform_wrapper .gform_body {
  padding: 0;
}

.il-cta__form-wrap .gform_wrapper ul.gform_fields,
.il-cta__form-wrap .gform_wrapper .gform_fields {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

@media (max-width: 600px) {
  .il-cta__form-wrap .gform_wrapper ul.gform_fields,
  .il-cta__form-wrap .gform_wrapper .gform_fields {
    gap: 8px;
  }
}

.il-cta__form-wrap .gform_wrapper .gfield {
  padding: 0;
  margin: 0;
  border: none;
}

.il-cta__form-wrap .gform_wrapper fieldset.gfield {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.il-cta__form-wrap .gform_wrapper .gfield_label,
.il-cta__form-wrap .gform_wrapper legend.gfield_label {
  font-family: var(--il-font-body);
  font-size: clamp(16px, 1.25vw, 24px);
  font-weight: 400;
  line-height: clamp(24px, 1.67vw, 32px);
  color: var(--il-blue);
  padding: 0;
}

.il-cta__form-wrap .gform_wrapper label.gfield_label,
.il-cta__form-wrap .gform_wrapper legend.gfield_label,
.gfield_required.gfield_required_asterisk {
  margin: 0 0 8px;
  font-size: clamp(15px, 1.25vw, 24px) !important;
  color: var(--il-blue) !important;
  font-weight: 400 !important;
}
.gfield_required.gfield_required_asterisk {
  line-height: 1 !important;
  margin-bottom: 0 !important;
}

.il-cta__form-wrap .gform_wrapper fieldset.gfield {
  margin-top: 16px;
}

.il-cta__form-wrap .gform_wrapper .gfield--type-checkbox legend.gfield_label,
.il-cta__form-wrap .gform_wrapper .gfield--type-choice legend.gfield_label {
  display: block;
  width: 100%;
  margin-bottom: 16px;
}

.il-cta__form-wrap .gform_wrapper .gfield_required {
  color: var(--il-navy);
}

.il-cta__form-wrap .gform_wrapper .ginput_container {
  margin-top: 0;
}

.il-cta__form-wrap .gform_wrapper input[type="text"],
.il-cta__form-wrap .gform_wrapper input[type="email"],
.il-cta__form-wrap .gform_wrapper input[type="tel"],
.il-cta__form-wrap .gform_wrapper input[type="number"],
.il-cta__form-wrap .gform_wrapper textarea,
.il-cta__form-wrap .gform_wrapper select {
  background-color: rgba(0, 156, 222, 0.05) !important;
  border: 1px solid var(--il-navy) !important;
  border-radius: 4px !important;
  padding: 12px 16px !important;
  font-family: var(--il-font-body) !important;
  font-size: clamp(15px, 1.25vw, 24px) !important;
  line-height: 1.33 !important;
  color: var(--il-navy) !important;
  width: 100% !important;
  max-width: none !important;
  box-shadow: none !important;
}

.il-cta__form-wrap .gform_wrapper input::placeholder,
.il-cta__form-wrap .gform_wrapper textarea::placeholder {
  color: rgba(0, 26, 112, 0.4) !important;
}

.il-cta__form-wrap .gform_wrapper input:focus,
.il-cta__form-wrap .gform_wrapper textarea:focus,
.il-cta__form-wrap .gform_wrapper select:focus {
  border-color: var(--il-blue) !important;
  box-shadow: 0 0 0 3px rgba(0, 156, 222, 0.2) !important;
  outline: none !important;
}

/* Gravity 2.5+: .gchoice rows */
.il-cta__form-wrap .gform_wrapper .gfield_checkbox,
.il-cta__form-wrap .gform_wrapper .gfield_radio {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 6px;
}

.il-cta__form-wrap .gform_wrapper .gfield_checkbox .gchoice,
.il-cta__form-wrap .gform_wrapper .gfield_radio .gchoice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 !important;
}

/* Legacy list markup */
.il-cta__form-wrap .gform_wrapper .gfield_checkbox li,
.il-cta__form-wrap .gform_wrapper .gfield_radio li {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.il-cta__form-wrap .gform_wrapper .gfield-choice-input[type="checkbox"],
.il-cta__form-wrap .gform_wrapper .gfield-choice-input[type="radio"] {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  margin: 3px 0 0 !important;
  transform: scale(1) !important;
  padding: 0 !important;
  flex-shrink: 0;
  background-color: rgba(0, 156, 222, 0.05) !important;
  border: 1px solid var(--il-navy) !important;
  border-radius: 4px !important;
  accent-color: var(--il-blue);
  cursor: pointer;
}

.il-cta__form-wrap .gform_wrapper .gfield-choice-input[type="radio"] {
  border-radius: 50% !important;
}

.il-cta__form-wrap .gform_wrapper .gfield_checkbox .gform-field-label--type-inline,
.il-cta__form-wrap .gform_wrapper .gfield_radio .gform-field-label--type-inline,
.il-cta__form-wrap .gform_wrapper .gfield_checkbox li label,
.il-cta__form-wrap .gform_wrapper .gfield_radio li label {
  font-family: var(--il-font-body);
  font-size: clamp(17px, 1.35vw, 26px);
  font-weight: 400;
  line-height: 1.35;
  color: var(--il-navy);
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.il-cta__form-wrap .gform_wrapper .gfield_checkbox .gchoice label {
  color: var(--il-navy) !important;
  font-weight: 400 !important;
}

.il-cta__form-wrap .gform_wrapper .gform_footer,
.il-cta__form-wrap .gform_wrapper .gform-footer,
.il-cta__form-wrap .gform_wrapper .gform_page_footer {
  padding: 0;
  margin-top: 32px;
}

/* Match .il-btn.il-btn--solid.il-btn--full */
.il-cta__form-wrap .gform_wrapper .gform_footer input[type="submit"],
.il-cta__form-wrap .gform_wrapper .gform-footer input[type="submit"],
.il-cta__form-wrap .gform_wrapper .gform_footer button[type="submit"],
.il-cta__form-wrap .gform_wrapper .gform-footer button[type="submit"] {
  width: 100%;
  background-color: var(--il-blue) !important;
  border: 2px solid var(--il-blue) !important;
  border-radius: 4px !important;
  padding: 14px 36px !important;
  font-family: var(--il-font-body) !important;
  font-weight: 700 !important;
  font-size: clamp(16px, 1.25vw, 24px) !important;
  line-height: 1.33 !important;
  color: var(--il-white) !important;
  cursor: pointer !important;
  transition: background-color 0.2s, border-color 0.2s !important;
  box-shadow: none !important;
}

.il-cta__form-wrap .gform_wrapper .gform_footer input[type="submit"]:hover,
.il-cta__form-wrap .gform_wrapper .gform-footer input[type="submit"]:hover,
.il-cta__form-wrap .gform_wrapper .gform_footer button[type="submit"]:hover,
.il-cta__form-wrap .gform_wrapper .gform-footer button[type="submit"]:hover,
.il-cta__form-wrap .gform_wrapper .gform_footer input[type="submit"]:focus-visible,
.il-cta__form-wrap .gform_wrapper .gform-footer input[type="submit"]:focus-visible {
  background-color: #0081bc !important;
  border-color: #0081bc !important;
}

/* Validation — keep readable in IL palette */
.il-cta__form-wrap .gform_wrapper .gfield_error .gfield_label,
.il-cta__form-wrap .gform_wrapper .gfield_error legend.gfield_label {
  color: var(--il-navy);
}

.il-cta__form-wrap .gform_wrapper .gfield_description.validation_message,
.il-cta__form-wrap .gform_wrapper .validation_message {
  font-family: var(--il-font-body);
  font-size: clamp(14px, 1vw, 18px);
  color: #b00020;
  margin-top: 8px;
}

.il-cta__form-wrap .gform_wrapper .gform_validation_errors,
.il-cta__form-wrap .gform_wrapper .gform_submission_error {
  font-family: var(--il-font-body);
  border-color: var(--il-navy) !important;
  border-radius: 4px !important;
  margin-bottom: 20px !important;
}

.il-cta__form-wrap .gform_wrapper .gfield_error input[type="text"],
.il-cta__form-wrap .gform_wrapper .gfield_error input[type="email"],
.il-cta__form-wrap .gform_wrapper .gfield_error input[type="tel"],
.il-cta__form-wrap .gform_wrapper .gfield_error textarea,
.il-cta__form-wrap .gform_wrapper .gfield_error select {
  border-color: #b00020 !important;
}

/* ============================================================
   Footer
   ============================================================ */
.il-footer {
  background-color: var(--il-navy);
  color: var(--il-white);
  padding: clamp(40px, 6.25vw, 120px) var(--il-pad-x);
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6.25vw, 120px);
}

.il-footer__top {
  display: flex;
  gap: clamp(40px, 10.4vw, 200px);
  align-items: flex-start;
}

.il-footer__logo-col {
  flex: 1 0 0;
  min-width: 0;
}

.il-footer__logo {
  display: block;
  width: 100%;
  max-width: 270px;
  height: auto;
}

.il-footer__info-col {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 40px);
}

.il-footer__desc {
  font-size: clamp(15px, 1.25vw, 24px) !important;
  line-height: 1.4;
  margin: 0;
}

.il-footer__actions {
  display: flex;
  gap: clamp(16px, 2vw, 40px);
  flex-wrap: wrap;
  align-items: flex-start;
}

.il-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 40px);
}

.il-footer__rule {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  margin: 0;
}

.il-footer__legal {
  font-size: clamp(14px, 1.25vw, 24px);
  line-height: 1.4;
  margin: 0;
}

.il-footer__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.il-footer__icons {
  display: flex;
  align-items: center;
  gap: 16px;
}

.il-footer__icons img {
  width: clamp(40px, 4.2vw, 64px);
  height: auto;
}

.il-footer__policy {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  flex-wrap: wrap;
}

.il-footer__policy a {
  font-size: clamp(12px, 0.83vw, 16px);
  line-height: 1.25;
  color: var(--il-white);
  text-decoration: none;
  opacity: 0.9;
}
.il-footer__policy a:hover,
.il-footer__policy a:focus-visible {
  text-decoration: underline;
  opacity: 1;
  color: var(--il-blue-light);
}

/* ============================================================
   Video Modal
   ============================================================ */
.il-video-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.il-video-modal[hidden] {
  display: none;
}

.il-video-modal__inner {
  position: relative;
  width: 100%;
  max-width: 1280px;
}

.il-video-modal__embed {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;
}

.il-video-modal__embed iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.il-video-modal__close {
  position: absolute;
  top: -44px;
  right: 0;
  background: none;
  border: none;
  color: var(--il-white);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
  opacity: 0.8;
  transition: opacity 0.15s;
}
.il-video-modal__close:hover {
  opacity: 1;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .il-hero__content {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }
  .il-hero__headline {
    width: 100%;
  }
  .il-cta {
    display: block;
  }
  .il-cta__copy {
    position: static;
  }
  .il-footer__top {
    flex-direction: column;
  }
  .il-footer__meta {
    flex-direction: column;
    align-items: flex-start;
  }
  /* Hide desktop floats on mobile */
  .il-float--1,
  .il-float--2,
  .il-float--3 {
    display: none;
  }

  /* Float 2 mobile copy — shown inline after intro content */
  .il-float--2-mobile {
    --il-parallax-y: 0px;
    width: 80%;
    max-width: 320px;
    margin: 32px auto 0;
    aspect-ratio: 5 / 3;
    transform: rotate(3deg) translate3d(0, var(--il-parallax-y), 0);
    overflow: hidden;
    /* border-radius: 4px; */
    /* box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); */
    margin-inline: auto;
    margin-bottom: -200px;
  }
  .il-float--2-mobile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (min-width: 960px) {
  .il-float--2-mobile {
    display: none;
  }
}

@media (max-width: 600px) {
  .il-intro {
    position: relative;
    padding-left: var(--il-pad-x);
    padding-right: var(--il-pad-x);
    padding-bottom: 150px;
  }
  .il-footer__actions {
    flex-direction: column;
  }
  .il-btn--outline,
  .il-btn--solid {
    /* width: 100%; */
    text-align: center;
  }
}