:root {
  /* ============================================================
    COLOR PALETTE (Raw Colors)
============================================================ */
  --color-dark-black: #000000;
  --color-black: #1f2930;
  --color-white: #ffffff;
  --color-near-white: var(--color-200);
  --color-success: #2fa84f;

  /* Greys */
  --color-grey-100: #555;
  --color-grey-200: #666;
  --color-grey-300: #ccc;
  --color-grey-400: #ddd;
  --color-grey-500: #eee;

  /* Brand Colors */
  --color-blue: #063a7d;
  --color-teal: #0091a1;
  --color-purple: #6e3075;
  --color-orange: #d54122;
  --color-green: #648c2e;
  --color-grey: #636466;
  --color-light-blue: #62b5e5;
  --color-light-purple: #a77bca;
  --color-bright-green: #6cc24a;
  --color-yellow: #f0b323;
  --color-900: #333;
  --color-200: #f2f2f2;

  --color-tint-purple: #d3c1d6;
  --color-tint-orange: #f2c6bd;
  --color-tint-green: #cad4be;
  --color-tint-grey: #d0d0d1;
  --color-tint-light-blue: #d0e9f7;
  --color-tint-light-purple: #e5d7ef;
  --color-tint-bright-green: #d3edc9;
  --color-tint-yellow: #fbe8bd;

  /* Legacy - Need to keep these until SWW brand update is done */
  --color-accent-blue: #004ea8;
  --color-accent-green: #00afb9;
  --color-accent-lightblue: #48c6ee;
  --color-accent-navy: #203869;
  --color-accent-purple: #604278;
  --color-accent-red: #ff949f;
  --color-accent-yellow: #ffd02f;
  --color-tint-stone: #f0efe1;
  --color-pastel-navy: #e8effa;
  --color-pastel-blue: #e7f4f9;
  --color-bw-tint-blue: #ccdcee;
  --color-bw-tint-light-blue: #cceffb;
  --color-bw-tint-purple: #dfd9e4;
  --color-bw-tint-cyan: #cceff1;

  /* ============================================================
    SEMANTIC COLORS (Usage-based)
  ============================================================ */
  --color-page-bg: var(--color-white);

  /* Footer */
  --color-footer-top-bg: var(--color-blue);
  --color-footer-bottom-bg: var(--color-blue);
  --color-footer-logo: var(--color-white);
  --color-footer-text: var(--color-white);

  /* Header & Navigation */
  --color-header-bg: var(--color-blue);
  --color-header-logo: var(--color-blue);
  --color-header-logo-mobile: var(--color-blue);
  --color-header-logo-mobile-alt: var(--color-blue);

  --color-primary-nav-link-text: var(--color-white);
  --color-primary-nav-link-text-hover: var(--color-blue);
  --color-primary-nav-link-text-active: var(--color-blue);
  --color-primary-nav-link-bg: var(--color-blue);
  --color-primary-nav-link-bg-hover: var(--color-white);
  --color-primary-nav-link-bg-active: var(--color-white);

  /* Main Nav (Mobile) */
  --color-main-nav-text: var(--color-black);
  --color-main-nav-bg: transparent;
  --color-main-nav-text-opened: var(--color-blue);
  --color-main-nav-text-opened-border-color: var(--color-900);
  --color-main-nav-bg-opened: var(--color-white);
  --color-main-nav-footer-bg: var(--color-near-white);
  --color-main-nav-sub-text-opened: var(--color-900);

  /* Sub Nav */
  --color-sub-nav-bg: transparent;
  --color-sub-nav-text: var(--color-white);
  --color-sub-nav-item-text: var(--color-grey-900);
  --font-weight-sub-nav-text: bold;
  --color-sub-nav-item-border: var(--color-grey-400);
  --color-sub-nav-button-bg: transparent;
  --color-sub-nav-button-text: var(--color-blue);
  --color-sub-nav-button-bg-hover: var(--color-200);
  --color-sub-nav-button-text-hover: var(--color-blue);
  --color-sub-nav-link-hover: var(--color-tint-light-blue);

  /* Panel */
  --color-pannel-wrap-bg: var(--color-200);
  --color-pannel-wrap-text: var(--color-900);
  --color-panel-link-text: var(--color-blue);
  --color-panel-link-hover: var(--color-black);
  --color-panel-link-border-color: var(--color-900);
  --color-panel-article-text: var(--color-900);
  --color-panel-article-border: var(--color-black);
  --color-panel-article-bg-hover: #b2dbf5;
  --color-panel-small-screen-items-shadow: var(--color-grey-500);
  --color-panel-return-text: var(--color-grey-200);

  /* Text */
  --color-text: var(--color-grey-100);
  --color-text-alt: var(--color-white);
  --color-heading: var(--color-blue);
  --color-heading-alt: var(--color-white);
  --color-text-bubble: var(--color-white);
  --color-text-in-your-area: var(--color-black);

  /* In Your Area */
  --color-in-your-area-text: var(--color-white);
  --color-in-your-area-bg: var(--color-teal);
  --in-your-area-wave-bg-image: url("/images/waves/ses/my-account-bottom-right.svg");

  --color-in-your-area-promo-text: var(--color-white);
  --color-in-your-area-promo-bg: var(--color-teal);
  --in-your-area-promo-wave-bg-image: url("/images/waves/ses/in-your-area-bottom-left.svg");

  /* Contact */
  --color-contact-bg: var(--color-blue);
  --color-contact-cta: var(--color-white);
  --color-contact-text: var(--color-white);
  --contact-wave-bg-image: url("/images/waves/ses/my-account-top-left.svg");

  /* Stats Blocks */
  --color-stats-block-1-bg: var(--color-purple);
  --color-stats-block-2-bg: var(--color-teal);
  --color-stats-block-3-bg: var(--color-orange);
  --color-stats-block-4-bg: var(--color-blue);
  --color-text-stats-block-1: var(--color-white);
  --color-text-stats-block-2: var(--color-white);
  --color-text-stats-block-3: var(--color-white);
  --color-text-stats-block-4: var(--color-white);
  --wave-stats-block-1: url("/images/waves/ses/stats-block-top-right.svg");
  --wave-stats-block-2: url("/images/waves/ses/stats-block-bottom-left.svg");
  --wave-stats-block-3: url("/images/waves/ses/stats-block-bottom-right.svg");
  --wave-stats-block-4: url("/images/waves/ses/stats-block-top-left.svg");

  /* In Page Navigation */
  --color-in-page-navigation-1-bg: var(--color-purple);
  --color-in-page-navigation-2-bg: var(--color-teal);
  --color-in-page-navigation-3-bg: var(--color-orange);
  --color-in-page-navigation-4-bg: var(--color-blue);
  --color-text-in-page-navigation-1: var(--color-white);
  --color-text-in-page-navigation-2: var(--color-white);
  --color-text-in-page-navigation-3: var(--color-white);
  --color-text-in-page-navigation-4: var(--color-white);
  --color-text-in-page-navigation-hover-underline: var(--color-white);
  --wave-in-page-navigation-1: url("/images/waves/ses/stats-block-top-right.svg");
  --wave-in-page-navigation-2: url("/images/waves/ses/stats-block-bottom-left.svg");
  --wave-in-page-navigation-3: url("/images/waves/ses/stats-block-top-left.svg");
  --wave-in-page-navigation-4: url("/images/waves/ses/stats-block-top-right.svg");

  /* Bubbles */
  --color-bubble-1-bg: var(--color-purple);
  --color-bubble-2-bg: var(--color-orange);
  --color-bubble-3-bg: var(--color-green);
  --color-bubble-4-bg: var(--color-light-blue);
  --color-bubble-4-text: var(--color-blue);

  /* Saving Calculator */
  --color-saving-calc-bg: var(--color-teal);
  --color-saving-calc-total-bg: var(--color-yellow);
  --color-text-saving-calc-total-bg: var(--color-black);

  /* Timeline */
  --color-timeline-button-bg: var(--color-blue);
  --color-timeline-button-text: var(--color-white);
  --color-timeline-pagination-inactive: var(--color-grey);
  --timeline-wave-bg-image: url("/images/waves/ses/timeline-bottom-right.svg");
  /* bgcolors are declared in utility-classes.scss */

  /* Forms */
  --color-form-bg: var(--color-white);
  --color-form-main-body-bg: var(--color-white);
  --color-form-label-text: var(--color-black);
  --color-form-input-text: var(--color-black);
  --color-form-input-border: var(--color-grey-300);
  --color-form-input-border-focus: var(--color-black);
  --color-form-select-option-bg: var(--color-grey-300);
  --color-form-select-option-bg-selected: #d9d9d9;
  --color-form-select-option-text: var(--color-black);
  --color-form-checkbox-border: var(--color-grey-300);
  --color-form-checkbox-text-active: var(--color-white);
  --color-form-checkbox-bg-active: var(--color-black);
  --color-from-radio-bg: var(--color-white);
  --color-form-radio-border: var(--color-grey-300);
  --color-form-radio-border-active: var(--color-white);
  --color-form-radio-bg-active: var(--color-black);
  --color-form-navigatio-action-bg: var(--color-accent-purple);
  --color-form-navigatio-action-border: var(--color-accent-purple);
  --color-form-navigatio-action-text: var(--color-white);
  --color-form-navigatio-action-bg-disabled: var(--color-grey-300);
  --color-form-navigatio-action-border-disabled: var(--color-grey-300);
  --color-form-navigatio-action-text-disabled: var(--color-black);
  --color-form-navigatio-action-bg-focus: var(--color-accent-green);
  --color-form-navigatio-action-border-focus: var(--color-accent-green);
  --color-form-navigatio-action-text-focus: var(--color-black);
  --color-form-progress-bar-bg: var(--color-accent-green);
  --color-form-progress-bar-border: var(--color-accent-green);
  --color-form-range-bg: var(--color-grey-300);
  --color-form-range-thumb-bg: var(--color-accent-purple);
  --color-form-range-thumb-bg-hover: var(--color-accent-green);
  --color-form-file-border: var(--color-grey-300);
  --color-form-file-border-hover: var(--color-grey-200);
  --color-form-file-bg: var(--color-near-white);
  --color-form-status-bg: transparent;
  --color-form-status-text: var(--color-grey-100);
  --color-form-number-picker-wrap-bg: var(--color-white);
  --color-form-number-picker-input-bg: var(--color-white);
  --color-form-number-picker-input-border: var(--color-grey-300);
  --color-form-number-picker-button-bg: var(--color-blue);
  --color-form-number-picker-button-text: var(--color-white);
  --color-form-number-picker-icon-bg: var(--color-grey-500);
  --color-form-number-picker-border-focus: var(--color-black);
  --color-form-table-header-bg: var(--color-accent-green);
  --color-form-table-header: var(--color-black);
  --color-form-table: var(--color-grey-100);
  --color-form-table-input-disabled-bg: #f6f6f6;

  /* Hosepipe Ban */
  --color-hosepipe-ban-text: var(--color-black);
  --color-hosepipe-ban-bg: var(--color-200);
  --hosepipe-ban-wave-bottom-right: url("/images/waves/ses/hosepipe-bottom-right.svg");
  --hosepipe-ban-wave-top-left: url("/images/waves/ses/hosepipe-top-left.svg");
  --hosepipe-ban-wave-top-right: url("/images/waves/ses/hosepipe-top-right.svg");
  --hosepipe-ban-wave-bottom-left: url("/images/waves/ses/hosepipe-bottom-left.svg");

  /* UPRN Lookup */
  --uprn-lookup-wave-left: url("/images/waves/ses/text-and-media-bottom-left.svg");
  --uprn-lookup-wave-right: url("/images/waves/ses/text-and-media-top-right.svg");

  /* Text and Media */
  --color-text-and-media-text: var(--color-200);
  --text-and-media-wave-right: url("/images/waves/ses/text-and-media-top-right.svg");
  --text-and-media-wave-left: url("/images/waves/ses/text-and-media-bottom-left.svg");

  /* Savings Calculator */
  --color-savings-calc-btn-bg: var(--color-accent-purple);
  --color-savings-calc-btn-border: var(--color-accent-purple);
  --color-savings-response-block-text: var(--color-white);

  /* Search */
  --color-search-icon: var(--color-white);
  --color-search-error-text: red;
  --color-search-bg: var(--color-white);
  --color-search-button-bg: var(--color-blue);
  --color-search-button-icon: var(--color-white);

  /* FAQ */
  --color-faq-category: var(--color-grey-200);
  --color-faq-category-text-active: var(--color-black);
  --color-faq-category-border-active: var(--color-accent-green);
  --color-faq-link-copied-bg: var(--color-black);

  /* Hero */
  --hero-bg-color: var(--color-blue);
  --hero-bg-image: url("/images/hero-ses.svg");
  --hero-content-bg: rgba(6, 58, 125, 0.9);
  --hero-content-text: var(--color-white);

  --hero-bg-color-light: var(--color-tint-light-blue);
  --hero-bg-image-light: url("/images/hero-ses.svg");
  --hero-content-text-light: var(--color-black);

  /* Announcement Banner */
  --banner-yellow-bg-color: var(--color-yellow);
  --banner-green-bg-color: var(--color-teal);
  --banner-green-text-color: var(--color-white);
  --banner-blue-bg-color: var(--color-blue);
  --banner-icon-color: var(--color-blue);
  --banner-text-color: var(--color-900);
  --banner-wave-bg-image: url("/images/waves/ses/announcement-banner-top-right.svg");

  /* Campaign Promo */
  --campaign-promo-wave-left: url("/images/waves/ses/campaign-promo-top-left.svg");
  --campaign-promo-wave-right: url("/images/waves/ses/campaign-promo-bottom-right.svg");

  /* Map */
  --map-panel-bg: var(--color-blue);
  --map-list-bg: var(--color-tint-light-blue);
  --map-list-scrollbar-bg: var(--color-blue);
  --map-panel-item-text: var(--color-900);

  /* Triage */
  --triage-button-bg: var(--color-white);
  --triage-button-bg-hover: var(--color-teal);
  --triage-button-bg-selected: var(--color-yellow);
  --triage-button-text: var(--color-black);
  --triage-button-text-hover: var(--color-black);
  --triage-button-text-selected: var(--color-black);

  /* Pill */
  --color-pill-text: var(--color-900);
  --color-pill-background-active: var(--color-blue);

  /* Breadcrumb */
  --color-breadcrumb-current-text: var(--color-900);

  /* V-button */
  --opacity-v-btn-overlay: 1;

  /* Document Library */
  --color-document-border: var(--color-light-blue);
  --color-document-bg: var(--color-white);
  --color-document-bg-hover: var(--color-light-blue);
  --color-document-title: var(--color-blue);
  --color-document-text: var(--color-grey-100);

  /* Modal */
  --modal-wave-bg-image: url("/images/waves/ses/text-and-media-top-right.svg");


  /* ============================================================
    TYPOGRAPHY
  ============================================================ */
  /* Font Families */
  --font-family-text: "Montserrat", "Helvetica", "Arial", sans-serif;
  --font-family-heading: "Montserrat", sans-serif;


  /* Font Weights */
  --font-weight-bold: bold;
  --font-weight-heading: bold;

  /* Font Sizes */
  --font-size-body: clamp(1rem, 0.955rem + 0.23vw, 1.125rem); /* 16px, 18px */
  --font-size-homepage-title: clamp(
    2.25rem,
    1.5357142857142858rem + 3.571428571428571vw,
    3.75rem
  ); /* 36px, 60px */
  --font-size-1: clamp(2.25rem, 1.893rem + 1.79vw, 3rem); /* 36px, 48px */
  --font-size-2: clamp(1.75rem, 1.631rem + 0.6vw, 2rem); /* 28px, 32px */
  --font-size-3: 1.5rem; /* 24px */
  --font-size-4: 1.25rem; /* 20px */
  --font-size-5: 1rem; /* 16px */
  --font-size-6: 1rem; /* 16px */
  --font-size-7: 1.125rem; /* 18px */

  /* Line Heights */
  --line-height-body: 1.5;
  --line-height-homepage-title: 1.1;
  --line-height-1: 1.2;
  --line-height-2: 1.3;
  --line-height-3: 1.4;
  --line-height-4: 1.5;
  --line-height-5: 1.6;
  --line-height-6: 1.6;

  /* ============================================================
    LAYOUT
  ============================================================ */
  --width-wrap-narrow: 55.375rem; /* 884px */
  --width-wrap: 83.75rem; /* 1340px */
  --width-wrap-wide: 90rem; /* 1440px */

  /* NOTE: --width-cols-* were generated with SCSS
    @for $i from 1 through 12 {
      --width-cols-#{$i}: #{rem(
        ((math.div(1580px - (20px * 11), 12)) * $i)+ (20px * ($i - 1))
      )};
    }
  */
  --width-cols-1: 7.0833333333rem;
  --width-cols-2: 15.4166666667rem;
  --width-cols-3: 23.75rem;
  --width-cols-4: 32.0833333333rem;
  --width-cols-5: 40.4166666667rem;
  --width-cols-6: 48.75rem;
  --width-cols-7: 57.0833333333rem;
  --width-cols-8: 65.4166666667rem;
  --width-cols-9: 73.75rem;
  --width-cols-10: 82.0833333333rem;
  --width-cols-11: 90.4166666667rem;
  --width-cols-12: 98.75rem;

  /* ============================================================
    COMPONENTS
  ============================================================ */
  /* Buttons */
  --button-height: 55px;
  --button-padding: 10px 20px;
  --button-font-size: 1.125rem; /* 18px */
  --button-line-height: 1.6rem; /* 24px */
  --button-font-family: var(--font-family-text);
  --button-border-width: 2px;
  --button-border-radius: 5px;
  --button-text-translate-y: 0.37em;

  /* Primary Button */
  --button-primary-color: var(--color-white);
  --button-primary-color-hover: var(--color-white);
  --button-primary-color-focus: var(--color-white);
  --button-primary-color-active: var(--color-white);
  --button-primary-bg: var(--color-blue);
  --button-primary-bg-hover: #1e4d8a;
  --button-primary-bg-focus: var(--color-blue);
  --button-primary-bg-active: var(--color-900);
  --button-primary-border: var(--color-blue);
  --button-primary-border-hover: var(--color-blue);
  --button-primary-border-focus: var(--color-900);
  --button-primary-border-active: var(--color-900);

  /* Secondary Button */
  --button-secondary-color: var(--color-blue);
  --button-secondary-color-hover: var(--color-blue);
  --button-secondary-color-focus: var(--color-blue);
  --button-secondary-color-active: var(--color-white);
  --button-secondary-bg: var(--color-white);
  --button-secondary-bg-hover: var(--color-tint-grey);
  --button-secondary-bg-focus: var(--color-tint-grey);
  --button-secondary-bg-active: var(--color-blue);
  --button-secondary-border: var(--color-blue);
  --button-secondary-border-hover: var(--color-blue);
  --button-secondary-border-focus: var(--color-blue);
  --button-secondary-border-active: var(--color-blue);

  --button-primary-text: var(--color-white);
  --button-primary: var(--color-blue);
  --button-primary-hover: color-mix(in oklab, var(--color-blue) 90%, white);
  --button-primary-focus: var(--color-blue);
  --button-primary-active: var(--color-black);

  /* small button */
  --button-small-height: 40px;
  --button-small-padding: 5px 10px;
  --button-small-font-size: 1rem;
  --button-small-line-height: 1.4rem;

  /* ============================================================
    MISCELLANEOUS
  ============================================================ */
  /* Border Radius */
  --border-radius: 10px;
  --border-radius-large: 20px;

  /* Shadows */
  --card-shadow:
    0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


/* ============================================================
  OVERRIDES
============================================================ */
.in-your-area-block::before {
  background-blend-mode: overlay !important;
}

.hero--content-detail .hero__content-inner {
  background-color: transparent !important;
}