/*
Theme name: EDS (Child of ppl-ninja)
Template: ppl-ninja
Version: 1.0
*/

/* --------------------------------------------------------------
   1. CASCADE LAYERS SETUP
   -------------------------------------------------------------- */
@layer reset, fonts, variables, theme, components, media;

/* --------------------------------------------------------------
      2. RESET
      -------------------------------------------------------------- */
@layer reset {
  /* Based on Eric Meyer's Reset v2.0 (public domain) */

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  sup,
  tt,
  var,
  b,
  u,
  i,
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td,
  article,
  aside,
  canvas,
  details,
  embed,
  figure,
  figcaption,
  footer,
  header,
  hgroup,
  menu,
  nav,
  output,
  ruby,
  section,
  summary,
  time,
  mark,
  audio,
  video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }

  /* HTML5 display-role reset for older browsers */
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  menu,
  nav,
  section {
    display: block;
  }

  body {
    line-height: 1;
  }

  ol,
  ul {
    list-style: none;
  }

  blockquote,
  q {
    quotes: none;
  }

  blockquote:before,
  blockquote:after,
  q:before,
  q:after {
    content: "";
    content: none;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  strong {
    font-weight: 550;
  }
}

/* --------------------------------------------------------------
      3. FONTS
      -------------------------------------------------------------- */
@layer fonts {
  @font-face {
    font-family: "Inter";
    src:
      local("Inter Variable"),
      local("Inter"),
      url("assets/fonts/Inter.ttf") format("truetype");

    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Inter";
    src:
      local("Inter Variable Italic"),
      local("Inter Italic"),
      local("Inter-Italic"),
      url("assets/fonts/Inter-Italic.ttf") format("truetype");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
  }
}

/* --------------------------------------------------------------
      4. DESIGN TOKENS / VARIABLES
      -------------------------------------------------------------- */
@layer variables {
  :root {
    --font-primary:
      "Inter", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

    /* Base & text */
    --text: #021116;
    --color-text: #021116;
    --green-color: #21bb62;
    /* --badge-green: #10b981; */
    --badge-blue: #0f8abc;
    --heading: #111827;
    --muted: #4b5563;

    /* Surfaces & backgrounds */
    --surface: #ffffff;
    --section-bg-subtle: #fafafa;
    --header-bg: rgba(255, 255, 255, 0.6);
    --header-bg-scrolled: rgba(255, 255, 255, 1);
    --blockquote-bg: #fff6ea;
    --blockquote-border: #ee773b;
    --blockquote-text: #ee773b;

    /* Links */
    --link: #0f8abc;
    --link-hover: #0f8bbcc2;

    /* Borders */
    /* --border-light: #e5e7eb; */
    --card-border: #eaeaea;

    /* Shadows */
    --shadow-subtle: 0 2px 16px rgba(0, 0, 0, 0.06);
    --shadow-soft: 0 12px 24px rgba(0, 0, 0, 0.08);
    --shadow-drop: 0 10px 30px rgba(0, 0, 0, 0.1);
    --shadow-inset: 0 2px 0 0 rgba(0, 0, 0, 0.08) inset;
    --shadow-card: 0 5px 10px rgba(0, 0, 0, 0.05);

    /* Marquee */
    --marquee-from: #26a3c7;
    --marquee-to: #5ac6b1;
    --marquee-text: #ffffff;
    --marquee-divider: rgba(255, 255, 255, 0.15);

    /* CTA section block gradient */
    --cta-section-overlay: rgba(16, 138, 188, 0.3);
    --cta-section-start: #5ac6b1;
    --cta-section-mid: #1583af;
    --cta-section-end: #005da5;
    --cta-section-text: #ffffff;
    --divider-on-dark: rgba(255, 255, 255, 0.2);

    /* Locations grid: CTA card (last item in grid) */
    --locations-cta-bg: #e8f8ff;
    --locations-cta-border: #0f8abc;

    /* Emergency banner (Figma 43-4027): gradient, CTA, features strip */
    --emergency-banner-from: #26a3c7;
    --emergency-banner-to: #5eead4;
    --emergency-banner-text: #ffffff;
    --emergency-cta-bg: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
    --emergency-cta-text: #0f172a;
    --emergency-features-divider: rgba(255, 255, 255, 0.4);

    /* Footer (Figma 43-4092) */
    --footer-bg: #131f2b;
    --footer-text: #fff;
    --footer-heading: #fff;
    --footer-link: #c9c9c9;
    --footer-link-hover: #ffffff;
    --footer-divider: rgba(255, 255, 255, 0.2);
    --footer-legal: #94a3b8;

    /* CTA button on accent */
    --on-accent: #fff;

    /* Layout & typography */
    --h1-size-base: clamp(2.5rem, 3.5vw, 3.25rem);
    --h1-size-hero: clamp(3rem, 5vw, 4rem);
    --container-gutter: clamp(1rem, 2vw, 3em);
    --max-content: 1230px;
    --header-h: 72px;

    --accent: oklch(0.7 0.16 45 / var(--opacity));
    --accent-light: oklch(0.79 0.15 76.5 / var(--opacity));
    --gradient-angle: 135deg;
    --opacity: 1;
  }
}

/* 5.Theme layer Starts Here */
@layer theme {
  /* Global: body, layout wrapper */
  body {
    font-family: var(--font-primary);
    color: var(--text);
    font-size: 1rem;
    font-optical-sizing: auto;
  }

  .wi_wrapper {
    width: 100%;
    max-width: var(--max-content);
    margin-inline: auto;
    padding-inline: var(--container-gutter);
  }

  /* Header (header-v2): .wi_header, nav, logo, list, CTA, toggle */
  .wi_header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    height: var(--header-h);
    background-color: var(--header-bg);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    transition:
      background-color 0.28s ease,
      box-shadow 0.28s ease;
  }
  .wi_header.is-scrolled {
    background: var(--header-bg-scrolled);
    backdrop-filter: saturate(180%) blur(2px);
    -webkit-backdrop-filter: saturate(180%) blur(2px);
    box-shadow: var(--shadow-subtle);
  }

  .wi_header .wi_wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    background: transparent;
  }

  .wi_header_nav {
    height: 100%;
  }

  /* Hero (front-page): .wi_hero, .wi_hero-bg, .wi_hero_content */
  .wi_hero {
    position: relative;
    display: flex;
    align-items: center;
    aspect-ratio: 1440 / 700;
    min-height: 600px;
    max-height: 750px;
    width: 100%;
    overflow: hidden;
  }

  .wi_hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -1;
  }

  .wi_hero_content {
    display: flex;
    flex-direction: column;
    width: min(45vw, 80%);
    inline-size: clamp(320px, 45vw, 660px);
    row-gap: 2rem;
  }
  .wi_hero_content_subtitle {
    line-height: 1.3;
  }

  /* Emergency banner (Figma 43-4027): full-width gradient + centered CTA + features strip */
  .wi_emergency_banner {
    display: flex;
    flex-direction: column;
    min-height: 420px;
    width: 100%;
    background:
      linear-gradient(
        0deg,
        rgba(16, 138, 188, 0.3) 0%,
        rgba(16, 138, 188, 0.3) 100%
      ),
      linear-gradient(93deg, #26a3c7 0%, #5ac6b1 100%);
    color: var(--emergency-banner-text);
  }

  .wi_emergency_banner .wi_wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-block: clamp(2.5rem, 6vw, 4rem);
  }

  .wi_header_logo {
    width: clamp(8rem, 10vw, 13rem);
    aspect-ratio: 4 / 1;
    image-rendering: auto;
    height: auto;
    display: block;
  }

  .wi_header_nav_list {
    display: flex;
    gap: clamp(12px, 2vw, 32px);
    list-style: none;
    height: 100%;
  }

  .wi_header_nav_list li {
    height: 100%;
  }

  .wi_header_nav_list a {
    display: flex;
    position: relative;
    align-items: center;
    height: 100%;
    padding-inline: 0.5rem;
    text-decoration: none;
    color: var(--text);
    font-weight: 450;
    font-size: 0.94rem;
  }

  .wi_header_nav:not([data-open="true"]) a::after {
    content: "";
    position: absolute;
    bottom: 1rem;
    left: 50%;
    width: 80%;
    height: 1px;
    background-color: var(--text);
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .wi_header_nav:not([data-open="true"]) a:hover::after {
    transform: translateX(-50%) scaleX(1);
  }

  .wi_header_menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--color-text);
  }

  /* Info section top (front-page intro block) */
  .wi_info-section-top {
    text-align: left;
    margin-bottom: clamp(2rem, 5vw, 3rem);
  }

  .wi_info-section-top_description {
    max-width: 900px;
    line-height: 1.6;
    text-wrap: balance;
  }

  @media (min-width: 768px) {
    .wi_info-section-top {
      text-align: center;
    }
    .wi_info-section-top_description {
      margin-inline: auto;
    }
  }

  .wi_info-section-top_subtitle {
    color: var(--badge-blue);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
  }

  .wi_info-section-top_title {
    font-size: clamp(1.75rem, 4vw, 2.3rem);
    margin-bottom: 1rem;
    line-height: 1.34;
    font-weight: 530;
  }

  /* Info section + article blocks (front-page content) */
  .wi_info-section {
    padding-block: 60px 80px;
    background-color: var(--surface);
  }

  .wi_info-section.wi_info-section_locations {
    background-color: var(--section-bg-subtle);
  }

  .wi_article {
    margin-bottom: 40px;
  }

  .wi_article_content {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 40px 60px;
  }

  .wi_article_column {
    flex: 1 1 400px;
    min-width: 0;
  }

  .wi_column_media img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    display: block;
  }

  .wi_reverse_layout {
    flex-direction: row-reverse;
  }

  .wi_article_title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 1.5rem;
    line-height: 1.35;
  }

  .wi_article_column p {
    line-height: 1.75;
    margin-bottom: 1.5rem;
    color: var(--muted);
  }

  .wi_article_column_featured-img {
    width: 100%;
    object-fit: cover;
    height: fit-content;
  }

  .wi_article_accent-text {
    background-color: var(--blockquote-bg);
    border-left: 2px solid var(--blockquote-border);
    padding: 24px;
    margin: 24px 0;
    border-radius: 0 8px 8px 0;
    /* font-weight: 500; */
    color: var(--blockquote-text);
    line-height: 1.75;
  }
  .wi_article_column p a {
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color 0.2s;
  }
  .wi_article_column p a:hover {
    color: var(--link-hover);
  }

  .wi_read_more summary {
    cursor: pointer;
    position: relative;
    color: var(--link);
    font-weight: 450;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1.75;
    transition: color 0.2s;
  }

  .wi_read_more summary:hover {
    color: var(--link-hover);
  }

  .wi_article article:not(:last-child) {
    padding-block-end: 3rem;
  }

  .wi_read_more summary::after {
    content: "↓";
    font-size: 14px;
    transition: transform 0.5s ease;
  }

  .wi_read_more[open] summary::after {
    transform: rotate(180deg);
  }

  .wi_read_more_content {
    margin-top: 1rem;
    animation: wi-fade-in 0.4s ease;
  }

  @keyframes wi-fade-in {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Header mobile (nav drawer, toggle, CTA span hide) */
  @media (max-width: 768px) {
    .wi_header_menu-toggle {
      display: block;
      order: 3;
    }

    .wi_header_nav {
      position: absolute;
      top: var(--header-h);
      left: 0;
      width: 100%;
      background: var(--surface);
      padding: 2rem;
      box-shadow: var(--shadow-drop);

      /* Hidden state */
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Open state triggered by JS */
    .wi_header_nav[data-open="true"] {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      height: auto;
    }

    .wi_header_nav_list {
      flex-direction: column;
      gap: 1.5rem;
      text-align: center;
    }
    .wi_cta-button > span {
      display: none;
    }
  }

  /* Base typography (h1) */
  h1 {
    font-size: var(--h1-size-base);
    line-height: 1.3;
    font-weight: 600;
  }
}

/* 6.Components layer Starts Here */
@layer components {
  /* CTA button (header + hero) */
  .wi_cta-button {
    white-space: nowrap;
    padding: 20px min(40px, 5vw);
    border-radius: 10vh;
    cursor: pointer;
    transition: filter 0.3s ease;
    text-decoration: none;
    font-size: clamp(14px, 2.5vw, 1rem);
    text-transform: uppercase;
    font-weight: 500;
    max-width: fit-content;
    display: inline-block;
  }

  .wi_cta-button.ws_cta-main {
    background: linear-gradient(
      var(--gradient-angle),
      var(--accent),
      var(--accent-light)
    );
    color: var(--on-accent);
    padding-block: 24px;
    box-shadow: var(--shadow-inset);
  }

  .wi_cta-button.wi_cta-button_secondary {
    background: linear-gradient(
      var(--gradient-angle),
      oklch(from var(--accent-light) l c h / 0.1),
      oklch(from var(--accent) l c h / 0.1)
    );
    color: var(--accent);
    border: 1px solid var(--accent);
  }

  .wi_cta-button:hover {
    filter: brightness(1.1);
  }

  /* Hero content: subtitle, social (front-page) */
  .wi_hero_content_subtitle > span {
    position: relative;
    padding-left: 1.5rem;
    color: var(--green-color);
    font-weight: 450;
  }

  .wi_hero_content_subtitle > span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    translate: 0 -50%;
    width: 8px;
    height: 8px;
    background-color: currentColor;
    border-radius: 50%;
    z-index: 1;
  }

  .wi_hero_content_subtitle > span::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    translate: 0 -50%;
    width: 8px;
    height: 8px;
    background-color: currentColor;
    border-radius: 50%;
    z-index: 1;
    animation: wi-radar 2s infinite;
  }

  @keyframes wi-radar {
    0% {
      transform: scale(1);
      opacity: 0.8;
    }
    80%,
    100% {
      transform: scale(3.5);
      opacity: 0;
    }
  }

  .wi_social {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .wi_social_stars {
    display: block;
    width: auto;
    height: 20px;
    max-width: 120px;
    align-self: flex-start;
  }

  .wi_social_inner {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .wi_social_avatars {
    display: block;
    height: auto;
    width: auto;
    max-width: 120px;
  }

  .wi_social_text {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text);
  }

  .wi_social_text strong {
    font-weight: 600;
  }

  /* Marquee (front-page) */
  .wi_marquee {
    --speed: 50s;
    --bg-gradient: linear-gradient(
      135deg,
      var(--marquee-from) 0%,
      var(--marquee-to) 100%
    );
    width: 100%;
    overflow: hidden;
    background: var(--bg-gradient);
    padding-block: 1.5rem;
    position: relative;
    /* mask-image: linear-gradient(
      to right,
      #29a4c67a,
      rgb(255, 255, 255) 10%,
      rgb(255, 255, 255) 90%,
      #59c5b34a
    ); */
  }

  .wi_marquee-track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: wi-scroll var(--speed) linear infinite;
  }

  .wi_marquee-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
  }

  .wi_marquee-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-inline: 40px;
    color: var(--marquee-text);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .wi_marquee-item img {
    max-height: clamp(24px, 4vw, 36px);
    width: auto;
    height: auto;
    object-fit: contain;
  }

  @keyframes wi-scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }

  .wi_marquee:hover .wi_marquee-track {
    animation-play-state: paused;
  }

  /* Emergency banner content + features strip (Figma 43-4027) */
  .wi_emergency_banner_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.7rem;
  }
  .wi_emergency_banner_content h2 {
    margin-bottom: 0rem;
  }

  .wi_emergency_banner_subtitle {
    font-size: clamp(1rem, 2vw, 1.125rem);
    font-weight: 400;
    margin: 0;
    color: var(--emergency-banner-text);
    opacity: 0.95;
    padding-block-end: 0.5rem;
  }

  .wi_emergency_banner_cta {
    margin-top: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 10vh;
    background: var(--emergency-cta-bg);
    color: var(--emergency-cta-text);
    font-weight: 700;
    font-size: clamp(14px, 2vw, 1rem);
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.02em;
    box-shadow: var(--shadow-soft);
    transition:
      filter 0.2s ease,
      box-shadow 0.2s ease;
    border: none;
    cursor: pointer;
  }

  .wi_emergency_banner_cta:hover {
    filter: brightness(0.98);
    box-shadow: var(--shadow-drop);
  }

  .wi_emergency_banner_features {
    width: 100%;
    padding-block: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    background: linear-gradient(
      108deg,
      rgba(255, 255, 255, 0.24) 0%,
      rgba(255, 255, 255, 0.06) 100%
    );
    backdrop-filter: blur(15px);
  }

  .wi_emergency_banner_features_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding-inline: var(--container-gutter);
  }

  .wi_emergency_banner_features_item,
  .wi_marquee-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--emergency-banner-text);
    font-size: 1rem;
    font-weight: 400;
    padding-inline: 3.5rem;
    border-right: 1px solid;
    border-image: linear-gradient(
        to bottom,
        transparent,
        var(--emergency-features-divider) 50%,
        transparent
      )
      1;
  }

  .wi_emergency_banner_features_item:last-child,
  .wi_marquee-item:last-child {
    border-right: none;
    padding-right: 0;
  }

  .wi_emergency_banner_features_item:first-child {
    padding-left: 0;
  }

  .wi_emergency_banner_features_item img,
  .wi_emergency_banner_icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .wi_emergency_banner_features_item img {
    object-fit: contain;
    filter: brightness(0) invert(1);
  }

  @media (max-width: 640px) {
    .wi_emergency_banner_features_item {
      border-right: none;
      padding-inline: 0.5rem;
    }
  }

  /* Services grid + cards (front-page) */
  .wi_services_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    gap: 1rem;
  }

  /* Locations grid (wi_info-section-main): cards + last item CTA — Figma 43-3928 */
  .wi_locations_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 1rem;
  }

  .wi_locations_card,
  .wi_services_card {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.5rem);
    padding: clamp(1rem, 4vw, 1.7rem) clamp(1rem, 3vw, 1.5rem);
    background: var(--surface);
    border-radius: 6px;
    border: 1px solid var(--card-border);
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
    transition: box-shadow 0.2s ease;
  }

  .wi_locations_card:hover,
  .wi_services_card:hover {
    box-shadow: var(--shadow-card);
  }
  .wi_services_card:hover {
    cursor: pointer;
  }

  .wi_locations_card_img {
    flex-shrink: 0;
    width: clamp(54px, 25%, 72px);
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
  }
  .wi_services_card_img img {
    width: 100%;
    height: auto;
    max-width: 130px;
    overflow: hidden;
    object-fit: cover;
  }

  .wi_locations_card_content {
    min-width: 0;
  }

  .wi_locations_card_state,
  .wi_locations_card_cta .wi_locations_card_cta_title,
  .wi_services_card_content h3 {
    font-weight: 500;
    font-size: 1.25rem;
    color: var(--text);
    margin: 0 0 0.3rem 0;
    line-height: 1.3;
  }

  .wi_locations_card_state,
  .wi_locations_card_cta .wi_locations_card_cta_title {
    margin: 0 0 0.3rem 0;
  }

  .wi_services_card_content h3 {
    margin: 0 0 13px 0;
  }

  .wi_locations_card_cities {
    font-size: 1rem;
    line-height: 1.75;
  }

  .wi_locations_card_cities a,
  .wi_locations_card_cta .wi_locations_card_cta_link,
  .wi_services_link {
    color: var(--link);
    text-decoration: underline;
    font-weight: normal;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition:
      text-decoration-color 0.3s ease,
      color 0.3s ease;
  }
  .wi_services_link {
    text-underline-offset: 4px;
  }
  .wi_services_link span {
    font-size: 14px;  
  }

  .wi_locations_card_cities a:hover,
  .wi_locations_card_cta .wi_locations_card_cta_link:hover,
  .wi_services_link:hover {
    color: var(--link-hover);
    text-decoration-color: transparent;
  }

  /* Last card: CTA block (Find Your Local Dentist) */
  .wi_locations_card_cta {
    justify-content: center;
    text-align: center;
    background: var(--locations-cta-bg);
    border-color: var(--locations-cta-border);
    box-shadow: none;
  }

  .wi_locations_card_cta:hover {
    transform: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  /* CTA section block (front-page) */
  .wi_cta {
    background:
      linear-gradient(
        0deg,
        var(--cta-section-overlay) 0%,
        var(--cta-section-overlay) 100%
      ),
      linear-gradient(
        93deg,
        var(--cta-section-start) 0%,
        var(--cta-section-mid) 62.98%,
        var(--cta-section-end) 100%
      );
    padding-block: 40px;
    color: var(--cta-section-text);
  }

  .wi_cta_inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px 40px;
  }

  .wi_cta_title {
    font-size: 1.5rem;
    font-weight: 650;
    line-height: 1.6;
    margin: 0;
    flex: 1 0 280px;
    border-right: 1px solid;
    border-image: linear-gradient(
        to bottom,
        transparent,
        var(--emergency-features-divider) 50%,
        transparent
      )
      1;
  }

  .wi_cta_text {
    font-size: 1rem;
    line-height: 1.75;
    margin: 0;
    flex: 2 0 300px;
    text-wrap: balance;
  }

  .wi_cta_action {
    flex: 0 0 auto;
  }

  /* Container query: CTA divider hide when narrow */
  .wi_wrapper {
    container-type: inline-size;
  }

  @container (max-width: 900px) {
    .wi_cta_divider {
      display: none;
    }
  }

  /* Footer (Figma 43-4092): branding, links, legal */
  footer.wi_footer {
    background: var(--footer-bg) !important;
    color: var(--footer-text);
    padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
  }

  .wi_footer .wi_wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .wi_footer_top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 5%;
    row-gap: 2rem;
  }
  .wi_footer_brand {
    flex: 2 1 50%;
  }
  .wi_footer_nav {
    flex: 1 1 20%;
  }
  .wi_footer_contact {
    display: flex;
    flex-direction: column;
  }

  .wi_footer_contact_logo {
    display: inline-block;
    padding-block-end: 1rem;
  }

  .wi_footer_contact a,
  .wi_footer_nav_list a {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.4rem;
    text-decoration-thickness: 1px;
    transition:
      text-decoration-color 0.3s ease,
      text-underline-offset 0.3s ease;
    width: fit-content;
    display: inline-block;
    padding-block: 0.5rem;
  }

  .wi_footer_contact a {
    color: var(--footer-text);
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  .wi_footer_nav_list a {
    color: var(--footer-link);
  }

  .wi_footer_contact a:hover,
  .wi_footer_nav_list a:hover {
    color: var(--footer-text);
    text-decoration-color: var(--footer-text);
    text-underline-offset: 0.7rem;
  }

  .wi_footer_nav_title {
    font-weight: 550;
    padding-block-end: 1rem;
  }
  .wi_footer_nav_list li:not(:last-child) {
    padding-block-end: 0.5rem;
  }
  hr.wi_footer_divider {
    border: none;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    margin-block: 1rem 0;
    width: 100%;
  }
  .wi_footer_legal {
    font-size: 12px;
    line-height: 1.9;
  }

  .wi_footer_legal p + p {
    margin-top: 1rem;
  }
}

/* 7. RESPONSIVE / MEDIA LAYER  */
@layer media {
  /* Small phones and narrow devices */
  @media (max-width: 480px) {
    .wi_hero {
      min-height: 550px;
      padding-block-start: 4rem;
    }
    .wi_services_card_img img {
      width: 100px;
    }
    .wi_services_card_content h3 {
      font-size: 1.1rem;
    }
  }

  /* Phones & small tablets (portrait) */
  @media (max-width: 768px) {
    .wi_hero {
      background: linear-gradient(
        to right,
        rgb(255 255 255 / 65%),
        rgb(255 255 255 / 90%),
        rgb(255 255 255 / 60%)
      );
    }
    .wi_hero_content {
      width: 100%;
    }
    .wi_hero-bg {
      opacity: 0.6;
    }
    .wi_hero_content {
      row-gap: 1.5rem;
  }

  }

  /* Tablets & small laptops */
  @media (max-width: 1024px) {
    .wi_cta-button {
      padding-inline: 24px;
    }
    .wi_hero_content_subtitle {
      line-height: 1.3;
      font-size: 14px;
    }
    .wi_hero_content {  
      min-width: 60%;
    }
    .wi_cta_inner {
      flex-direction: column;
      align-items: flex-start;
    }
    .wi_cta_inner  > *{
      flex: 1 0 auto;
    }
    .wi_cta_title {
      border-right: none;
    }
    
  }
}

/* --------------------------------------------------------------
      8. UNLAYERED: GLOBAL FIXES
      (Anything here sits above all layers in the cascade)
      -------------------------------------------------------------- */
/* Any style here beats all layers (useful for WP Admin Bar fixes) */
#wpadminbar {
  z-index: 99999 !important;
}