@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap");

/* =========================================================
   INDWE HOME CSS
   ---------------------------------------------------------
   Current prototype styling base.
   This file has been consolidated from the iterative versions
   so future edits can happen in the relevant section instead
   of adding override blocks.

   Sections:
   1. Settings
   2. Base
   3. Typography
   4. Buttons
   5. Header
   6. Mega menu
   7. Client services popup / drawer
   8. Hero
   9. Why Indwe intro
   10. Personal / Business split
   11. Long image panels
   12. Footer
   13. Responsive

   Cleanup note:
   Later prototype overrides have been consolidated only where safe.
   Shared behaviours that affect every page, such as the mega menu and
   scroll reveal system, now live in clearly labelled sections so future
   edits do not require new one-off override blocks.
   ========================================================= */


/* =========================================================
   1. Settings
   ========================================================= */

:root {
  --header: 60px;

  --black: #000;
  --white: #fff;
  --cream: #f3f0ea;
  --ink: #071723;

  /* Indwe brand palette, used sparingly */
  --indwe-navy: #15324f;
  --indwe-navy-deep: #0d263f;
  --indwe-blue: #2b659e;
  --indwe-cyan: #6bbecd;
  --indwe-ice: #f4f8fb;
  --blue: var(--indwe-blue);

  --line-light: rgba(255, 255, 255, 0.24);
  --line-dark: rgba(0, 0, 0, 0.16);
  --muted-light: rgba(255, 255, 255, 0.78);
  --muted-dark: rgba(0, 0, 0, 0.62);

  --gutter: 22px;
  --grid-gap: 10px;

  /* Hero and expanded menu heading system */
  --headline-left: clamp(48px, 5vw, 86px);
  --headline-top: clamp(135px, 17vh, 190px);  
  --headline-size: clamp(54px, 6.25vw, 110px);
  --page-pad: var(--headline-left);

  --font-body: "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Oswald", Arial, Helvetica, sans-serif;

  --ease: 0.25s ease;
}

/* =========================================================
   2. Base
   ========================================================= */

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  background: var(--indwe-navy-deep);
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  background: var(--indwe-navy);
  color: #fff;
  font-family: var(--font-body);
  overflow-x: hidden;
}
body.menu-open {
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
}
img,
video {
  max-width: 100%;
}

/* =========================================================
   3. Typography
   ========================================================= */

h1,
h2,
h3,
.h40,
.hero-copy h1,
.split-half h2,
.source-panel h2,
.mega-card h3 {
  font-family: var(--font-display);
}
p,
li,
.body,
input,
textarea {
  font-family: var(--font-body);
}
.caps {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.site-header,
.action-popup {
  font-family: var(--font-display);
}
.body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: 0;
  font-weight: 400;
}
.h40 {
  font-size: clamp(34px, 4.15vw, 70px);
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-weight: 600;
  margin: 0;
}

/* =========================================================
   4. Buttons
   ========================================================= */

/*
  Button system
  -------------
  Main page CTAs use .btn-main.
  Bottom utility strip buttons use the same outlined language.
  Buttons intentionally have no arrows.

  The previous optical-padding test has been removed. Button text is centred
  using flexbox, fixed height, normal line-height and no nested span structure.
*/

.btn-main {
  min-width: 154px;
  width: fit-content;
  max-width: 100%;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 42px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  vertical-align: middle;
  overflow: hidden;
  transition:
    background var(--ease),
    border-color var(--ease),
    color var(--ease),
    opacity var(--ease);
}
.btn-main .arrow {
  display: none !important;
}
/* White buttons on dark/image sections */
.hero-copy .btn-main,
.split-half .btn-main,
.source-panel .btn-main,
.why-intro .btn-main {
  color: #fff;
}
.hero-copy .btn-main:hover,
.split-half .btn-main:hover,
.source-panel .btn-main:hover,
.why-intro .btn-main:hover,
.why-intro .btn-main:focus-visible {
  background: var(--indwe-cyan);
  border-color: var(--indwe-cyan);
  color: var(--indwe-navy-deep);
}
/* Keep split and image-panel CTAs compact */
.split-half .btn-main,
.split-half.right .btn-main,
.source-panel .btn-main {
  width: fit-content;
  min-width: 178px;
}
.split-half.right .btn-main {
  margin-left: auto;
}
.why-intro__cta {
  margin-top: 36px;
}

/* =========================================================
   5. Header
   ========================================================= */

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--gutter);
  background: transparent;
  color: #fff;
  transform: translateY(0);
  transition:
    background 0.36s ease,
    border-color 0.36s ease,
    box-shadow 0.36s ease,
    transform 0.32s ease;
  will-change: background, transform;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled,
body.menu-open .site-header {
  background: var(--indwe-navy-deep);
  border-bottom-color: rgba(107, 190, 205, 0.18);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.18);
}
.site-header.is-hidden {
  transform: translateY(-100%);
}
.site-header.is-visible {
  transform: translateY(0);
}
/* .site-header::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  height: calc(var(--header) + 28px);
  background: var(--indwe-navy-deep);
  border-bottom: 1px solid rgba(107, 190, 205, 0.30);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.20);
  pointer-events: none;
  opacity: 0;
  transform: scaleY(0.76);
  transform-origin: top;
  transition:
    opacity 0.34s ease,
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-header.is-scrolled.menu-area-hover::after {
  opacity: 1;
  transform: scaleY(1);
}
body.menu-open .site-header::after {
  opacity: 0;
  transform: scaleY(0.76);
}
.site-header .menu-toggle {
  transition:
    color var(--ease),
    opacity 0.28s ease,
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-header.menu-area-hover .menu-toggle {
  color: #fff;
  opacity: 0.88;
  transform: translateX(3px);
}*/

.head-left,
.head-right {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 22px;
}
.head-right {
  justify-content: flex-end;
}
.divider {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
}
.menu-toggle {
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 0;
  opacity: 1;
  transition:
    color var(--ease),
    opacity var(--ease),
    transform var(--ease);
}
.menu-toggle:hover,
.menu-toggle:focus-visible {
  color: #fff;
  opacity: 0.78;
  transform: translateX(3px);
  outline: 0;
}
/* Menu icon refinement: three horizontal lines when closed,
single line when open */
.menu-dash {
  position: relative;
  width: 24px;
  height: 13px;
  background: transparent;
  display: inline-block;
}
.menu-dash::before,
.menu-dash::after,
.menu-dash span {
  content: "";
  position: absolute;
  left: 0;
  width: 24px;
  height: 1px;
  background: currentColor;
  transition:
    transform var(--ease),
    opacity var(--ease),
    width var(--ease),
    top var(--ease);
}
.menu-dash::before {
  top: 1px;
}
.menu-dash span {
  top: 6px;
}
.menu-dash::after {
  top: 11px;
}
body.menu-open .menu-dash {
  width: 24px;
  height: 1px;
  background: currentColor;
}
body.menu-open .menu-dash::before,
body.menu-open .menu-dash::after,
body.menu-open .menu-dash span {
  opacity: 0;
}
.head-left > a,
.head-right > a {
  display: flex;
  align-items: center;
}
.head-left > a,
.head-right > a {
  height: 100%;
  position: relative;
}
.head-left > a::after,
.head-right > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 18px;
  width: 0;
  height: 1px;
  background: var(--indwe-cyan);
  transition: width var(--ease);
}
.head-left > a:hover::after,
.head-right > a:hover::after {
  width: 100%;
}
.brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--header);
  width: 94px;
}
.brand img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 25px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* =========================================================
   6. Mega menu
   ========================================================= */

.mega {
  position: fixed;
  z-index: 90;
  top: var(--header);
  left: 0;
  right: 0;
  height: calc(100dvh - var(--header));
  display: flex;
  pointer-events: none;
  visibility: hidden;
}
.mega.active,
.mega.is-closing {
  visibility: visible;
}
.mega.active {
  pointer-events: auto;
}
.mega.active {
  pointer-events: auto;
}
.mega.is-closing {
  pointer-events: none;
}
.mega-left {
  width: 50%;
  background: var(--indwe-navy-deep);
  color: #fff;
  transform: translateX(-100%);
  transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
  overflow: auto;
}
.mega-left__inner {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: clamp(92px, 14vh, 150px);
  padding: var(--headline-top) clamp(32px, 5vw, 72px) clamp(44px, 6vw, 82px) var(--headline-left);
}
.mega-left h2 {
  max-width: 720px;
  margin: 0;
  color: var(--indwe-ice);
  font-family: var(--font-display);
  font-size: var(--headline-size);
  line-height: 0.94;
  font-weight: 700;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.mega-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  align-self: end;
  width: 100%;
  max-width: 760px;
}
.mega-group h3 {
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--indwe-cyan);
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mega-group a {
  position: relative;
  display: block;
  width: fit-content;
  padding: 0 0 12px;
  color: var(--indwe-ice);
  font-family: var(--font-display);
  font-size: clamp(12px, 0.95vw, 15px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color var(--ease);
}
.mega-group a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 7px;
  width: 0;
  height: 1px;
  background: var(--indwe-cyan);
  transition: width var(--ease);
}
.mega-group a:hover::after {
  width: 100%;
}
.mega-group a:hover {
  color: var(--indwe-ice);
}
.mega-right {
  width: 50%;
  background: #111;
  transform: translateX(100%);
  transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.mega.active .mega-left,
.mega.active .mega-right {
  transform: translateX(0);
}
.mega-card {
  position: relative;
  overflow: hidden;
}
.mega-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--img) center / cover;
  transition: transform 0.7s ease;
}
.mega-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.66));
}
.mega-card:hover::before {
  transform: scale(1.06);
}
.mega-card div {
  position: absolute;
  z-index: 2;
  left: 22px;
  right: 22px;
  bottom: 24px;
}
.mega-card h3 {
  margin: 8px 0 0;
  font-size: 28px;
  line-height: 1;
  text-transform: uppercase;
}
/* When the expanded menu is open,
remove duplicate top-nav choices. */
body.menu-open .site-header .head-left > a,
body.menu-open .site-header .head-right {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
body.menu-open .site-header .divider {
  opacity: 0;
  visibility: hidden;
}
/* Hide the homepage Client Services popup while the expanded menu is open.
   The menu already has its own action cards,
so this avoids duplicate actions. */
body.menu-open .action-popup {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(18px);
}
/* Client services default state fix
   The popup starts hidden and is shown only by JS when needed. */
.action-popup {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.action-popup:not(.is-hidden) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* =========================================================
   7. Client services popup / drawer
   ========================================================= */

.action-popup {
  position: fixed;
  z-index: 95;
  right: var(--page-pad);
  bottom: 26px;
  width: min(410px, calc(100vw - 44px));
  background: rgba(13, 38, 63, 0.94);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(18px);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transform-origin: bottom right;
  overflow: visible;
  will-change: width, transform, opacity;
  transition:
    width 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.34s ease,
    visibility 0.34s ease,
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    background var(--ease),
    border-color var(--ease);
}
.action-popup.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(18px);
}
.action-popup.is-dismissed {
  display: block;
}
.action-popup:not(.is-hidden) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.action-popup__intro {
  display: grid;
  gap: 10px;
  padding: 24px 24px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.action-popup__intro h2 {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(24px, 2vw, 34px);
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.action-popup__intro p:last-child {
  max-width: 310px;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
}
.action-popup__close {
  position: absolute;
  display: grid;
  place-items: center;
  top: -34px;
  right: -2px;
  width: 28px;
  height: 28px;
  margin: 0;
  border: 0;
  background: transparent;
  color: #000;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 26px;
  line-height: 1;
  opacity: 0.9;
  visibility: visible;
  pointer-events: auto;
  z-index: 50;
  text-shadow: none;
  transition:
    color var(--ease),
    opacity var(--ease);
}
.action-popup__close:hover,
.action-popup__close:focus-visible {
  color: var(--indwe-navy-deep);
  opacity: 0.72;
  outline: 0;
}
.action-popup.is-over-dark:not(.is-collapsed):not(.is-form-open) .action-popup__close {
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
.action-popup__actions {
  display: grid;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.28s ease,
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.action-popup__actions button {
  min-width: 0;
  width: 100%;
  min-height: 0;
  display: grid;
  gap: 6px;
  padding: 17px 24px 18px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition:
    background var(--ease),
    color var(--ease),
    padding-left var(--ease);
}
.action-popup__actions button:last-child {
  border-bottom: 0;
}
.action-popup__actions button span {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.action-popup__actions button small {
  display: block;
  max-width: 300px;
  color: rgba(255, 255, 255, 0.58);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  transition: color var(--ease);
}
.action-popup__actions button:hover,
.action-popup__actions button:focus-visible {
  padding-left: 30px;
  background: rgba(255, 255, 255, 0.055);
  color: #fff;
  outline: 0;
}
.action-popup__actions button:hover small,
.action-popup__actions button:focus-visible small {
  color: rgba(255, 255, 255, 0.78);
}
.action-popup.is-collapsed {
  width: 168px;
  min-height: 46px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(13, 38, 63, 0.78);
  border-color: rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(14px);
}
.action-popup.is-collapsed:hover {
  background: rgba(13, 38, 63, 0.92);
  border-color: rgba(107, 190, 205, 0.62);
  transform: scale(1.025);
}
.action-popup.is-collapsed:focus-within {
  background: rgba(13, 38, 63, 0.78);
  border-color: rgba(255, 255, 255, 0.34);
  transform: none;
}
.action-popup.is-collapsed:hover:focus-within {
  background: rgba(13, 38, 63, 0.92);
  border-color: rgba(107, 190, 205, 0.62);
  transform: scale(1.025);
}
.action-popup.is-collapsed .action-popup__intro,
.action-popup.is-collapsed .action-popup__actions,
.action-popup.is-collapsed .action-popup__form,
.action-popup.is-collapsed .action-popup__close {
  display: none;
}
.action-popup__collapsed-label {
  display: none;
  width: 100%;
  min-height: 42px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition:
    color var(--ease),
    opacity 0.24s ease 0.08s,
    transform 0.24s ease 0.08s;
}
.action-popup.is-collapsed .action-popup__collapsed-label {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}
.action-popup.is-collapsed:hover .action-popup__collapsed-label,
.action-popup.is-collapsed:hover:focus-within .action-popup__collapsed-label {
  color: #fff;
}
/* Inline Client Services form */
.action-popup__form {
  display: none;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 0.28s ease,
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.action-popup.is-form-open {
  width: min(540px, calc(100vw - 44px));
  max-height: none;
  overflow: visible;
}
.action-popup.is-form-open .action-popup__intro,
.action-popup.is-form-open .action-popup__actions,
.action-popup.is-form-open .action-popup__collapsed-label {
  display: none !important;
}
.action-popup.is-form-open .action-popup__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 12px;
  padding: 28px 22px 30px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  overflow: visible;
  animation: actionFormIn 0.28s ease both;
}
.action-popup.is-form-open .action-popup__form h3 {
  grid-column: 1 / -1;
  margin: 0;
  padding-right: 54px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(23px, 2vw, 32px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.action-popup__form-intro {
  grid-column: 1 / -1;
  max-width: 410px;
  margin: -6px 0 2px;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
}
.action-popup.is-form-open .action-popup__close {
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  color: #fff;
  font-size: 38px;
  line-height: 1;
  text-shadow: none;
}
.action-popup.is-form-open .action-popup__close:hover,
.action-popup.is-form-open .action-popup__close:focus-visible {
  color: var(--indwe-cyan);
  opacity: 1;
}
.action-popup__form label {
  display: grid;
  gap: 0;
  margin: 0;
}
.action-popup.is-form-open .action-popup__form label > span {
  display: none;
}
.action-popup__form input,
.action-popup__form textarea,
.action-popup__form select {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.055);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.35;
  padding: 10px 12px;
  outline: 0;
  border-radius: 0;
}
.action-popup__form input::placeholder,
.action-popup__form textarea::placeholder {
  color: rgba(255, 255, 255, 0.52);
}
.action-popup__form textarea {
  min-height: 122px;
  resize: vertical;
}
.action-popup__form option {
  color: #000;
}
.action-popup__form input:focus,
.action-popup__form textarea:focus,
.action-popup__form select:focus {
  border-color: rgba(107, 190, 205, 0.78);
  background: rgba(255, 255, 255, 0.09);
}
.action-popup__form label:has(textarea),
.action-popup__form label:has(select),
.action-popup__check,
.action-popup__submit {
  grid-column: 1 / -1;
}
.action-popup__form label:nth-of-type(5),
.action-popup__form label:nth-of-type(6) {
  grid-column: 1 / -1;
}
.action-popup.is-form-open .action-popup__check {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  align-items: start !important;
  column-gap: 10px !important;
  row-gap: 0 !important;
  margin: 0 !important;
}
.action-popup.is-form-open .action-popup__check input[type="checkbox"] {
  grid-column: 1;
  width: 14px !important;
  height: 14px !important;
  min-height: 14px !important;
  margin: 1px 0 0 0 !important;
  padding: 0 !important;
  align-self: start !important;
  justify-self: start !important;
}
.action-popup.is-form-open .action-popup__check span {
  grid-column: 2;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-body);
  font-size: 12px !important;
  line-height: 1.32 !important;
  font-weight: 500;
}
.action-popup__submit {
  width: fit-content;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  padding: 0 18px;
  border: 1px solid rgba(107, 190, 205, 0.84);
  background: rgba(107, 190, 205, 0.92);
  color: var(--indwe-navy-deep);
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background var(--ease),
    border-color var(--ease),
    color var(--ease),
    transform var(--ease);
}
.action-popup__submit:hover,
.action-popup__submit:focus-visible {
  transform: scale(1.025);
  background: var(--indwe-cyan);
  outline: 0;
}

@media (max-height: 760px) {
.action-popup.is-form-open {
    max-height: calc(100vh - 76px);
    overflow: hidden;
  }
.action-popup.is-form-open .action-popup__form {
    max-height: calc(100vh - 96px);
    overflow: auto;
    scrollbar-gutter: stable;
    gap: 13px 12px;
    padding-top: 24px;
    padding-bottom: 26px;
  }
.action-popup.is-form-open .action-popup__form textarea {
    min-height: 100px;
  }
}

@media (min-height: 761px) {
.action-popup.is-form-open,
.action-popup.is-form-open .action-popup__form {
    overflow: visible !important;
    max-height: none !important;
  }
}

@media (max-width: 680px) {
.action-popup.is-form-open {
    width: min(480px, calc(100vw - 44px));
  }
.action-popup.is-form-open .action-popup__form {
    grid-template-columns: 1fr;
  }
}

@keyframes actionFormIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Mega action cards: restored plain labels with subtle scale */
.mega-card {
  outline: 0;
}
.mega-card h3 {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  transform-origin: left bottom;
  transition:
    color var(--ease),
    transform var(--ease);
}
.mega-card:hover h3 {
  color: #fff;
  transform: scale(1.035);
}
/* Luxury link hover: soft fade + subtle tracking,
no underline */
.head-left > a,
.head-right > a,
.mega-group a,
.footer-col a {
  transition:
    color 0.25s ease,
    letter-spacing 0.25s ease,
    opacity 0.25s ease;
}
.head-left > a:hover,
.head-right > a:hover,
.mega-group a:hover,
.footer-col a:hover {
  color: #fff;
  opacity: 0.78;
}
.head-left > a:hover,
.head-right > a:hover,
.mega-group a:hover {
  letter-spacing: 0.1em;
}
.footer-col a:hover {
  letter-spacing: 0.015em;
}
.head-left > a::after,
.head-right > a::after,
.mega-group a::after,
.footer-col a::after {
  display: none !important;
}
/* v75 Client Services popup refinement */
.action-popup {
  width: min(360px, calc(100vw - 44px));
  background: rgba(13, 38, 63, 0.96);
  border-color: rgba(255, 255, 255, 0.30);
  box-shadow: 0 24px 76px rgba(0, 0, 0, 0.28);
}
.action-popup__intro {
  display: grid;
  gap: 9px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}
.action-popup__intro h2 {
  font-size: clamp(25px, 2.1vw, 36px);
  line-height: 0.96;
  letter-spacing: 0;
}
.action-popup__intro p:last-child {
  max-width: 280px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
  line-height: 1.42;
}
.action-popup__actions button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 52px;
  padding: 0 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  background: transparent;
  color: #fff;
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
}
.action-popup__actions button:last-child {
  border-bottom: 0;
}
.action-popup__actions button:hover,
.action-popup__actions button:focus-visible {
  padding-left: 28px;
  background: rgba(255, 255, 255, 0.055);
  color: #fff;
}
.action-popup.is-collapsed {
  width: 168px;
}
.action-popup.is-form-open {
  width: min(540px, calc(100vw - 44px));
}
/* Remove unused nested-row styling from v74 */
.action-popup__actions button span,
.action-popup__actions button small {
  display: contents;
}

/* =========================================================
   8. Hero
   ========================================================= */

.long-hero {
  position: relative;
  background: #000;
  height: 170vh;
  overflow: clip;
}
.hero-media {
  opacity: var(--hero-media-opacity, 1);
  transition: opacity 0.08s linear;
}
.long-hero::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  background: linear-gradient(350deg, rgba(107, 190, 205, 0.20) 8%, var(--indwe-navy-deep) 82%);
  mix-blend-mode: multiply;
  opacity: calc(var(--hero-media-opacity, 1) * 0.64);
  pointer-events: none;
}
.hero-media {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  opacity: var(--hero-media-opacity, 1);
  transition: opacity 0.08s linear;
}
.long-hero {
  background: var(--indwe-navy-deep);
}
.hero-media video,
.hero-media img {
  width: 100%;
  height: 112vh;
  object-fit: cover;
  object-position: center top;
  display: block;
  transform: translateY(-4vh);
}
.hero-copy {
  position: absolute;
  z-index: 10;
  top: var(--headline-top);
  left: var(--headline-left);
  width: min(640px, calc(100vw - (var(--headline-left) * 2)));
  color: #fff;
}
.hero-copy h1 {
  font-size: var(--headline-size);
  line-height: 0.94;
  font-weight: 300;
  letter-spacing: -0.035em;
  max-width: 620px;
  text-transform: uppercase;
}
.hero-copy .body {
  max-width: 420px;
  margin: 30px 0 40px;
  color: #fff;
}
/* Indwe blue typography on light brand sections */
.why-intro__copy h2 {
  color: var(--indwe-navy);
}
.why-intro__copy p {
  color: var(--indwe-navy);
}

/* =========================================================
   9. Why Indwe intro
   ========================================================= */

.why-intro {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  padding: clamp(84px, 10vw, 160px) var(--page-pad);
  background: #020605;;
  color: #000;
}
.why-intro__copy {
  grid-column: 1 / -1;
  max-width: none;
  justify-self: stretch;
  text-align: left;
}
.why-intro__copy h2 {
  max-width: 920px;
  margin: 0 0 28px 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 3.8vw, 58px);
  line-height: 1.08;
  letter-spacing: 0.015em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--indwe-ice);
  text-transform: uppercase;
}
.why-intro__copy p {
  max-width: 660px;
  margin: 0;
  color: var(--indwe-ice);
  font-size: 17px;
  line-height: 1.65;
}
/* Standard page heading size: excludes the video banner heading */
.why-intro__copy h2 {
  font-size: clamp(34px, 3.8vw, 58px);
  line-height: 1.08;
  letter-spacing: 0.015em;
  font-weight: 700;
  text-transform: uppercase;
}

/* =========================================================
   10. Personal / Business split
   ========================================================= */

.split-collection {
  position: relative;
  display: flex;
  min-height: 170vh;
  color: #fff;
  background: var(--indwe-navy-deep);
}
.split-half {
  position: relative;
  width: 50%;
  height: 170vh;
}
.split-half::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(270deg, rgba(107, 190, 205, 0.18) 0%, var(--indwe-navy-deep) 100%);
  mix-blend-mode: multiply;
  opacity: 0.62;
  pointer-events: none;
}
.split-half img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split-half .inside {
  position: relative;
  z-index: 4;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  padding: clamp(96px, 10vw, 140px) var(--page-pad);
}
.split-text {
  position: sticky;
  top: calc(var(--header) + 70px);
  align-self: start;
  grid-column: 1 / span 4;
  max-width: 460px;
}
.split-half.right .split-text {
  grid-column: 3 / span 4;
  text-align: right;
  justify-self: end;
}
.split-half h2 {
  font-size: clamp(34px, 3.8vw, 58px);
  line-height: 1.08;
  letter-spacing: 0.015em;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 28px;
  overflow-wrap: normal;
  text-wrap: balance;
}
.split-text p {
  max-width: 420px;
  margin: 0 0 28px;
  color: #fff;
  font-size: 17px;
  line-height: 1.5;
}
.split-text .btn-main {
  margin-top: 12px;
}
.split-half.right .split-text p {
  margin-left: auto;
}
.split-half.right .split-text .btn-main {
  margin-left: auto;
}

/* =========================================================
   11. Long image panels
   ========================================================= */

.source-panel {
  position: relative;
  height: 160vh;
  overflow: clip;
  color: #fff;
}
.source-panel::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(90deg, var(--indwe-navy-deep) 0%, rgba(107, 190, 205, 0.18) 100%);
  mix-blend-mode: multiply;
  opacity: 0.64;
  pointer-events: none;
}
.source-panel img,
.source-panel video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 112%;
  object-fit: cover;
  object-position: center;
  transform: translateY(-5%);
}
.source-panel.dark img {
  filter: grayscale(1) contrast(1.08) brightness(0.9);
}
.panel-inner {
  position: relative;
  z-index: 4;
  height: 100%;
  padding: 120px var(--page-pad);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
}
.sticky-copy {
  position: sticky;
  top: 120px;
  grid-column: 1 / span 4;
  align-self: start;
  max-width: 450px;
}
.sticky-copy .body {
  margin: 22px 0 32px;
  color: #fff;
}
.sticky-copy .btn-main {
  margin-top: 0;
}
.source-panel.right .sticky-copy {
  grid-column: 9 / span 4;
  text-align: left;
}

/* =========================================================
   12. Footer
   ========================================================= */

.footer {
  position: relative;
  background: var(--indwe-navy-deep);
  color: #fff;
  overflow: hidden;
  padding: clamp(56px, 7vw, 96px) var(--page-pad) 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.footer-logo-area {
  position: relative;
  z-index: 2;
  padding: 0 0 clamp(44px, 5vw, 68px);
}
.footer-logo {
  display: inline-flex;
  width: clamp(130px, 12vw, 190px);
}
.footer-logo img {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}
.footer-main {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.25fr 0.85fr 1.05fr 1.05fr;
  gap: clamp(38px, 6vw, 88px);
  align-items: start;
  padding: 0 0 clamp(56px, 7vw, 88px);
}
.footer-col h4 {
  margin: 0 0 22px;
  color: rgba(107, 190, 205, 0.86);
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footer-col p,
.footer-col a {
  position: relative;
  display: block;
  width: fit-content;
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
}
.footer-col p {
  width: auto;
  max-width: 270px;
}
.footer-col a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 1px;
  background: var(--indwe-cyan);
  transition: width var(--ease);
}
.footer-col a:hover {
  color: #fff;
  text-decoration: none;
}
.footer-col a:hover::after {
  width: 100%;
}
.footer-follow {
  max-width: 330px;
}
.footer-social-links {
  margin-bottom: 36px;
}
.footer-newsletter {
  margin-top: 32px;
}
.footer-newsletter h4 {
  margin-bottom: 18px;
}
.footer-newsletter p {
  max-width: 300px;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.35;
  font-weight: 500;
}
.newsletter {
  display: none;
}
/* Footer button consistency */
.footer-outline-link,
.footer-policy-link {
  min-width: 176px;
  width: fit-content;
  min-height: 38px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 0 12px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: transparent;
  color: #fff;
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  white-space: nowrap;
}
.footer-policy-link {
  margin-top: 12px !important;
}
.footer-outline-link::after,
.footer-policy-link::after {
  display: none !important;
}
.footer-outline-link:hover,
.footer-policy-link:hover {
  background: var(--indwe-cyan);
  border-color: var(--indwe-cyan);
  color: var(--indwe-navy-deep);
}
/* Footer newsletter buttons extend to the right gutter edge */
.footer-follow {
  max-width: none;
  width: 100%;
  justify-self: stretch;
}
.footer-newsletter {
  width: 100%;
}
.footer-newsletter p {
  max-width: 300px;
}
.footer-newsletter .footer-outline-link {
  width: 100% !important;
  min-width: 0;
}
.footer-bottom {
  position: relative;
  z-index: 2;
  display: block;
  padding: 26px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
}
.footer-bottom p {
  margin: 0 0 4px;
}

/* =========================================================
   v76 final refinements
   ========================================================= */

/* Pull teal back: use it as a quiet accent,
not a bright UI fill */
:root {
  --indwe-cyan-soft: rgba(107, 190, 205, 0.68);
  --indwe-cyan-wash: rgba(107, 190, 205, 0.075);
}
/* Standardise primary buttons: outlined by default,
subtle filled hover */
.btn-main,
.action-popup__submit {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  background: transparent;
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  transition:
    background var(--ease),
    border-color var(--ease),
    color var(--ease),
    transform var(--ease),
    opacity var(--ease);
}
/* Keep the Client Services form submit as the one clearer action,
but less bright */
.action-popup__submit {
  width: fit-content;
  border-color: rgba(107, 190, 205, 0.62);
  background: rgba(107, 190, 205, 0.72);
  color: var(--indwe-navy-deep);
}
.action-popup__submit:hover,
.action-popup__submit:focus-visible {
  background: rgba(107, 190, 205, 0.86);
  border-color: rgba(107, 190, 205, 0.86);
}
.footer-col h4 {
  color: var(--indwe-cyan-soft);
}
.action-popup__actions button:hover,
.action-popup__actions button:focus-visible {
  background: rgba(255, 255, 255, 0.055);
}
.action-popup.is-collapsed:hover {
  background: rgba(13, 38, 63, 0.92);
  border-color: rgba(107, 190, 205, 0.45);
}

/* =========================================================
   Why intro colour refinement
   ========================================================= */

.why-intro {
  background: var(--indwe-navy-deep);
  color: #fff;
}
.why-intro__copy h2 {
  color: #fff;
}
.why-intro__copy p {
  color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 1200px) {
.footer-main {
    grid-template-columns: 1.2fr 0.8fr 1fr 1fr;
    gap: 34px;
  }
}

@media (max-width: 900px) {
:root {
    --header: 58px;
    --page-pad: var(--gutter);
  }
.site-header {
    grid-template-columns: 1fr auto;
  }
.head-right,
.divider,
.head-left > a {
    display: none;
  }
.brand {
    font-size: 16px;
  }
.mega {
    display: block;
    overflow: auto;
  }
.mega-left {
    width: 100%;
    min-height: calc(100vh - var(--header));
    grid-template-columns: 1fr;
  }
.mega-right {
    display: none;
  }
.long-hero {
    height: 145vh;
  }
.hero-copy {
    top: 100px;
    left: var(--gutter);
    width: min(520px, calc(100vw - 44px));
  }
.why-intro {
    display: block;
  }
.why-intro__copy {
    text-align: left;
  }
.why-intro__copy h2,
.why-intro__copy p {
    margin-left: 0;
  }
.split-collection {
    display: block;
  }
.split-half {
    width: 100%;
    height: 120vh;
  }
.split-half .inside {
    display: block;
    padding: 80px var(--gutter);
  }
.split-text,
.split-half.right .split-text {
    top: calc(var(--header) + 40px);
    text-align: left;
    max-width: 360px;
  }
.split-half.right .btn-main {
    margin-left: 0;
  }
.source-panel {
    height: 135vh;
  }
.panel-inner {
    display: block;
    padding: 80px var(--gutter);
  }
.sticky-copy {
    top: 80px;
  }
.source-panel.right .sticky-copy {
    text-align: left;
  }
.footer {
    padding: 56px var(--gutter) 34px;
  }
.footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 38px 28px;
    padding-bottom: 64px;
  }
.footer-follow {
    max-width: none;
  }
.footer-bottom {
    display: block;
  }
}
#back-to-top,
#backTop,
#to-top,
#scroll-top {
  display: none !important;
}


@media (max-width: 620px) {
.footer-main {
    grid-template-columns: 1fr;
  }
.footer-outline-link {
    width: fit-content;
  }
}
/* Left-aligned intro section fix */
/* Left-aligned intro section fix */
.why-intro__copy {
  grid-column: 1 / -1;
  justify-self: stretch;
  text-align: left;
}
.why-intro__copy h2 {
  margin-left: 0;
  margin-right: 0;
}
.why-intro__copy p {
  margin-left: 0;
  margin-right: 0;
}
::selection {
  background: rgba(107, 190, 205, 0.34);
  color: #fff;
}
::-moz-selection {
  background: rgba(107, 190, 205, 0.34);
  color: #fff;
}

/* =========================================================
   Shared scroll reveal system
   ---------------------------------------------------------
   JS automatically applies .reveal-on-scroll to key content
   blocks so the HTML structure can stay unchanged. Motion is
   intentionally subtle: a short fade and a small vertical lift.
   ========================================================= */

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
.reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================
   Mobile render pass
   Desktop is intentionally untouched. All changes below are mobile-only.
   ========================================================= */

@media (max-width: 900px) {
  :root {
    --header: 58px;
    --gutter: 18px;
    --page-pad: var(--gutter);
    --headline-left: var(--gutter);
    --headline-top: clamp(86px, 14vh, 116px);
    --headline-size: clamp(46px, 13.5vw, 72px);
  }

  /* Disable desktop menu-hover expansion on mobile */
  .site-header::after,
  .site-header.menu-area-hover::after {
    display: none;
  }

  .site-header.menu-area-hover .menu-toggle,
  .menu-toggle:hover,
  .menu-toggle:focus-visible {
    opacity: 1;
    transform: none;
  }

  .site-header {
    grid-template-columns: 1fr auto 1fr;
    padding: 0 var(--gutter);
  }

  .head-left {
    grid-column: 1;
    justify-self: start;
    gap: 0;
  }

  .brand {
    grid-column: 2;
    justify-self: center;
    width: 86px;
  }

  .head-right,
  .divider,
  .head-left > a {
    display: none;
  }

  .menu-toggle {
    gap: 10px;
  }

  .menu-dash,
  .menu-dash::before,
  .menu-dash::after,
  .menu-dash span,
  body.menu-open .menu-dash {
    width: 22px;
  }

  body.menu-open {
    position: fixed;
    inset: 0;
    width: 100%;
    overflow: hidden;
  }

  /* Mobile full-screen menu */
  .mega {
    display: grid;
    grid-template-rows: minmax(0, 1fr) minmax(240px, 38vh);
    height: calc(100dvh - var(--header));
    overflow: hidden;
    background: var(--indwe-navy-deep);
  }

  .mega-left,
  .mega-right {
    width: 100%;
    min-height: 0;
    transform: translateY(18px);
    opacity: 0;
    transition:
      transform 0.48s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.42s ease;
  }

  .mega-left {
    height: auto;
    overflow: auto;
    background: var(--indwe-navy-deep);
  }

  .mega-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--indwe-navy-deep);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  .mega.active .mega-left,
  .mega.active .mega-right {
    opacity: 1;
    transform: translateY(0);
  }

  .mega-left__inner {
    min-height: 100%;
    display: block;
    padding: clamp(44px, 9vh, 72px) var(--gutter) 28px;
  }

  .mega-left h2 {
    max-width: 92vw;
    margin: 0 0 34px;
    font-size: clamp(44px, 13.5vw, 68px);
    line-height: 0.95;
    letter-spacing: -0.025em;
  }

  .mega-groups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px 28px;
    width: 100%;
    max-width: none;
  }

  .mega-group:nth-child(3) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 18px;
  }

  .mega-group a {
    width: fit-content;
    padding: 0 0 13px;
    font-size: 13px;
    line-height: 1.05;
  }

  .mega-card {
    min-height: 120px;
  }

  .mega-card::before {
    background-position: center;
    opacity: 0.82;
  }

  .mega-card::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.72));
  }

  .mega-card div {
    left: 16px;
    right: 14px;
    bottom: 16px;
  }

  .mega-card h3 {
    margin: 0;
    font-size: clamp(20px, 6vw, 28px);
    line-height: 0.98;
  }

  /* Hero: reduce long video scroll on mobile */
  .long-hero {
    height: 100svh;
    min-height: 720px;
  }

  .hero-media {
    height: 100svh;
  }

  .hero-media video,
  .hero-media img {
    height: 100svh;
    transform: none;
    object-position: center top;
  }

  .hero-copy {
    top: var(--headline-top);
    left: var(--gutter);
    width: min(520px, calc(100vw - (var(--gutter) * 2)));
  }

  .hero-copy h1 {
    max-width: 92vw;
    font-size: var(--headline-size);
    line-height: 0.94;
  }

  .hero-copy .body {
    max-width: 330px;
    margin: 24px 0 32px;
    font-size: 16px;
    line-height: 1.48;
  }

  .hero-cta-row .btn-main {
    min-width: 206px;
  }

  /* Intro */
  .why-intro {
    display: block;
    padding: clamp(72px, 18vw, 112px) var(--gutter);
  }

  .why-intro__copy {
    max-width: 100%;
  }

  .why-intro__copy h2 {
    font-size: clamp(38px, 12vw, 58px);
    line-height: 1.02;
  }

  .why-intro__copy p {
    max-width: 100%;
    font-size: 16px;
    line-height: 1.58;
  }

  /* Personal / Business: image-led stacked cards, shorter scroll */
  .split-collection {
    display: block;
    min-height: 0;
  }

  .split-half {
    width: 100%;
    height: 88svh;
    min-height: 620px;
    display: block;
    overflow: hidden;
  }

  .split-half img {
    display: block;
    opacity: 1;
    object-position: center;
  }

  .split-half:first-child img {
    object-position: 42% center;
  }

  .split-half.right img {
    object-position: 62% center;
  }

  .split-half .inside {
    height: 100%;
    display: block;
    padding: clamp(76px, 17vw, 104px) var(--gutter) 48px;
  }

  .split-text,
  .split-half.right .split-text {
    position: relative;
    top: auto;
    max-width: min(390px, 90vw);
    text-align: left;
    justify-self: start;
  }

  .split-half.right .split-text p,
  .split-half.right .split-text .btn-main {
    margin-left: 0;
  }

  .split-half h2 {
    font-size: clamp(42px, 13vw, 66px);
    line-height: 0.98;
  }

  .split-text p {
    max-width: 340px;
    font-size: 16px;
    line-height: 1.48;
  }

  /* Long panels: reduce dead scroll and art-direct image position */
  .source-panel {
    height: auto;
    min-height: 92svh;
  }

  .source-panel img,
  .source-panel video {
    height: 100%;
    transform: none;
  }

  #why img {
    object-position: 58% center;
  }

  #personal img {
    object-position: 53% center;
  }

  #business img {
    object-position: 68% center;
  }

  .panel-inner {
    min-height: 92svh;
    height: auto;
    display: block;
    padding: clamp(82px, 18vw, 112px) var(--gutter) 68px;
  }

  .sticky-copy {
    position: relative;
    top: auto;
    max-width: min(420px, 92vw);
  }

  .sticky-copy .body {
    font-size: 16px;
    line-height: 1.5;
  }

  /* Client Services as mobile bottom-sheet constrained to viewport */
  .action-popup {
    right: var(--gutter);
    bottom: 18px;
    width: min(360px, calc(100vw - (var(--gutter) * 2)));
  }

  .action-popup.is-collapsed {
    width: 164px;
  }

  .action-popup:not(.is-collapsed):not(.is-form-open) {
    width: calc(100vw - (var(--gutter) * 2));
    max-height: calc(100dvh - 96px);
  }

  .action-popup.is-form-open {
    width: calc(100vw - (var(--gutter) * 2));
    max-height: calc(100dvh - 84px);
    overflow: hidden;
  }

  .action-popup.is-form-open .action-popup__form {
    grid-template-columns: 1fr;
    max-height: calc(100dvh - 104px);
    overflow: auto;
    padding: 26px 18px 28px;
    gap: 12px;
  }

  .action-popup.is-form-open .action-popup__form textarea {
    min-height: 96px;
  }

  /* Footer */
  .footer {
    padding: 56px var(--gutter) 34px;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 38px;
    padding-bottom: 58px;
  }

  .footer-col p {
    max-width: 100%;
  }

  .footer-newsletter .footer-outline-link {
    width: 100% !important;
  }

  .footer-bottom {
    display: block;
  }
}

@media (max-width: 520px) {
.menu-toggle {
    gap: 9px;
  }
#menuLabel {
    font-size: 11px;
  }
.brand {
    width: 78px;
  }
.mega {
    grid-template-rows: minmax(0, 1fr) minmax(230px, 34vh);
  }
.mega-left__inner {
    padding-top: clamp(36px, 7vh, 58px);
  }
.mega-left h2 {
    font-size: clamp(40px, 12vw, 58px);
  }
.mega-groups {
    grid-template-columns: 1fr;
    gap: 20px;
  }
.mega-group:nth-child(3) {
    grid-column: auto;
    grid-template-columns: 1fr;
    row-gap: 0;
  }
.mega-card h3 {
    font-size: 20px;
  }
.long-hero {
    min-height: 680px;
  }
.split-half {
    height: 82svh;
    min-height: 560px;
  }
.source-panel,
.panel-inner {
    min-height: 86svh;
  }
.action-popup {
    right: 12px;
    bottom: 14px;
    width: calc(100vw - 24px);
  }
.action-popup.is-collapsed {
    width: 156px;
  }
}

/* =========================================================
   Mobile refinement fixes
   - Desktop remains untouched.
   - Keeps Client Services collapsed button unchanged.
   ========================================================= */

@media (max-width: 900px) {
  /* Centre expanded Client Services popup and form only */
  .action-popup:not(.is-collapsed) {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .action-popup.is-hidden:not(.is-collapsed) {
    transform: translateX(-50%) translateY(18px);
  }

  .action-popup.is-form-open {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .action-popup:not(.is-collapsed) .action-popup__intro,
  .action-popup:not(.is-collapsed) .action-popup__actions button,
  .action-popup.is-form-open .action-popup__form,
  .action-popup.is-form-open .action-popup__form h3,
  .action-popup__form-intro {
    text-align: center;
  }

  .action-popup:not(.is-collapsed) .action-popup__intro p:last-child,
  .action-popup__form-intro {
    margin-left: auto;
    margin-right: auto;
  }

  .action-popup.is-form-open .action-popup__submit {
    justify-self: center;
  }

  .action-popup.is-form-open .action-popup__check {
    text-align: left;
  }

  /* Compact the mobile full-screen menu so it does not need to scroll */
  .mega {
    grid-template-rows: minmax(0, 52vh) minmax(220px, 48vh);
  }

  .mega-left {
    overflow: hidden;
  }

  .mega-left__inner {
    padding: clamp(24px, 5vh, 42px) var(--gutter) 18px;
  }

  .mega-left h2 {
    max-width: 78vw;
    margin-bottom: clamp(18px, 3vh, 26px);
    font-size: clamp(34px, 10vw, 48px);
    line-height: 0.95;
  }

  .mega-groups {
    gap: 18px 26px;
  }

  .mega-group a {
    font-size: 12px;
    padding-bottom: 10px;
  }

  .mega-right {
    min-height: 220px;
  }

  .mega-card {
    min-height: 110px;
  }

  .mega-card div {
    left: 14px;
    right: 12px;
    bottom: 14px;
  }

  .mega-card h3 {
    font-size: clamp(18px, 5.4vw, 24px);
  }

  /* Restore the long image panels to the previous mobile sticky/anchored behaviour */
  .source-panel {
    height: 135vh;
    min-height: 0;
    overflow: clip;
  }

  .source-panel img,
  .source-panel video {
    height: 112%;
    transform: translateY(-5%);
  }

  .panel-inner {
    height: 100%;
    min-height: 0;
    display: block;
    padding: 80px var(--gutter);
  }

  .sticky-copy {
    position: sticky;
    top: 80px;
    max-width: 420px;
  }

  .source-panel.right .sticky-copy {
    text-align: left;
  }
}

@media (max-width: 520px) {
.mega {
    grid-template-rows: minmax(0, 52vh) minmax(210px, 48vh);
  }
.mega-left__inner {
    padding-top: clamp(22px, 4vh, 36px);
  }
.mega-left h2 {
    font-size: clamp(32px, 9.6vw, 44px);
    margin-bottom: 16px;
  }
.mega-groups {
    grid-template-columns: 1fr 1fr;
    gap: 16px 22px;
  }
.mega-group:nth-child(3) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 12px;
  }
.mega-group a {
    font-size: 11px;
    padding-bottom: 8px;
  }
.mega-right {
    min-height: 210px;
  }
.mega-card {
    min-height: 105px;
  }
.mega-card h3 {
    font-size: 18px;
  }
}
/* Mobile heading scale refinement
   Keep the hero H1 and "What do you need today?" large.
   Match intro and split headings to the mobile pillar heading scale. */
@media (max-width: 900px) {
  .why-intro__copy h2,
  .split-half h2 {
    font-size: clamp(34px, 4.15vw, 70px);
    line-height: 1.04;
    letter-spacing: 0.01em;
  }
}
/* Mobile menu spacing + split anchor refinement
   Desktop remains untouched. */
@media (max-width: 900px) {
  /* Cleaner three-column mobile nav list under the heading */
  .mega-left h2 {
    margin-bottom: 24px;
  }

  .mega-groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
  }

  .mega-group,
  .mega-group:nth-child(3) {
    grid-column: auto;
    display: block;
  }

  .mega-group a {
    display: block;
    width: fit-content;
    padding: 0 0 11px;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.08em;
  }

  /* Restore the anchored/sticky copy behaviour on the Personal / Business mobile image panels */
  .split-text,
  .split-half.right .split-text {
    position: sticky;
    top: calc(var(--header) + 76px);
    max-width: min(390px, 90vw);
  }

  .split-half .inside {
    min-height: 100%;
  }
}

@media (max-width: 520px) {
.mega-groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
.mega-group:nth-child(3) {
    grid-column: auto;
    display: block;
  }
.mega-group a {
    font-size: 10px;
    padding-bottom: 10px;
  }
.split-text,
.split-half.right .split-text {
    top: calc(var(--header) + 64px);
  }
}
/* Mobile menu/link refinement + split sticky correction
   Desktop remains untouched. */
@media (max-width: 900px) {
  /* Larger, cleaner mobile mega-menu links */
  .mega {
    grid-template-rows: minmax(0, 50vh) minmax(230px, 50vh);
  }

  .mega-left__inner {
    padding: clamp(26px, 5vh, 44px) var(--gutter) 20px;
  }

  .mega-left h2 {
    margin-bottom: clamp(24px, 4vh, 34px);
    font-size: clamp(36px, 10.5vw, 52px);
    line-height: 0.96;
  }

  .mega-groups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 42px;
    align-items: start;
    max-width: 330px;
  }

  .mega-group,
  .mega-group:nth-child(3) {
    display: grid;
    grid-template-columns: 1fr;
    grid-column: auto;
    gap: 12px;
  }

  .mega-group:nth-child(3) {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    column-gap: clamp(28px, 9vw, 52px);
  }

  .mega-group a {
    display: block;
    width: fit-content;
    padding: 0;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.09em;
  }

  .mega-right {
    min-height: 230px;
  }

  .mega-card {
    min-height: 115px;
  }

  .mega-card h3 {
    font-size: clamp(20px, 5.8vw, 26px);
    line-height: 0.98;
  }

  /* Restore visible sticky/anchored behaviour for Personal / Business mobile panels */
  .split-half {
    height: 120vh;
    min-height: 760px;
    overflow: clip;
  }

  .split-half .inside {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    padding: 86px var(--gutter) 64px;
  }

  .split-text,
  .split-half.right .split-text {
    position: sticky;
    top: calc(var(--header) + 70px);
    max-width: min(390px, 90vw);
    text-align: left;
    justify-self: start;
    align-self: start;
  }

  .split-half.right .split-text p,
  .split-half.right .split-text .btn-main {
    margin-left: 0;
  }

  .split-half:first-child img {
    object-position: 42% center;
  }

  .split-half.right img {
    object-position: 62% center;
  }
}

@media (max-width: 520px) {
.mega {
    grid-template-rows: minmax(0, 50vh) minmax(220px, 50vh);
  }
.mega-left__inner {
    padding-top: clamp(22px, 4vh, 34px);
  }
.mega-left h2 {
    font-size: clamp(34px, 9.8vw, 46px);
    margin-bottom: 22px;
  }
.mega-groups {
    max-width: 320px;
    gap: 22px 34px;
  }
.mega-group,
.mega-group:nth-child(3) {
    gap: 11px;
  }
.mega-group:nth-child(3) {
    column-gap: 30px;
  }
.mega-group a {
    font-size: 12px;
  }
.mega-card h3 {
    font-size: 19px;
  }
.split-half {
    height: 118vh;
    min-height: 700px;
  }
.split-text,
.split-half.right .split-text {
    top: calc(var(--header) + 62px);
  }
}
/* Mobile nav order,
split alignment and persistent client-services pill
   Desktop remains untouched. */
@media (max-width: 900px) {
  /* Mobile mega menu: more breathing room after heading */
  .mega-left h2 {
    margin-bottom: clamp(34px, 6vh, 48px);
  }

  .mega-groups {
    grid-template-columns: 1fr 1fr;
    max-width: 360px;
    gap: 0 58px;
    align-items: start;
  }

  .mega-group:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .mega-group:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  .mega-group:nth-child(3) {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-self: start;
    margin-top: calc((13px * 4) + (12px * 4));
  }

  .mega-group:nth-child(3) a:first-child {
    display: none;
  }

  .mega-group a {
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.09em;
  }

  /* Mobile Personal / Business: keep business aligned exactly like personal */
  .split-half.right .inside {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  .split-half.right .split-text {
    grid-column: auto;
    justify-self: start;
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }

  .split-half.right .split-text p,
  .split-half.right .split-text .btn-main {
    margin-left: 0;
    margin-right: 0;
  }

  /* Small Client Services pill should be available immediately on mobile */
  .action-popup.is-collapsed {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

@media (max-width: 520px) {
.mega-groups {
    grid-template-columns: 1fr 1fr;
    max-width: 330px;
    gap: 0 44px;
  }
.mega-group:nth-child(3) {
    grid-column: 1;
    grid-row: 1;
    margin-top: calc((12px * 4) + (11px * 4));
  }
.mega-group a {
    font-size: 12px;
  }
}
/* Mobile header/menu alignment cleanup
   Desktop remains untouched. */
@media (max-width: 900px) {
  /* Return to cleaner mobile header balance: menu left, logo right */
  .site-header {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .head-left {
    grid-column: 1;
    justify-self: start;
  }

  .brand {
    grid-column: 2;
    justify-self: end;
    width: 86px;
  }

  .menu-toggle {
    flex-direction: row;
    gap: 10px;
  }

  body.menu-open .menu-toggle {
    gap: 10px;
  }

  /* Big mobile menu: consistent two-column link layout */
  .mega-left__inner {
    padding-top: clamp(34px, 6vh, 54px);
  }

  .mega-left h2 {
    margin: 0 0 clamp(34px, 6vh, 48px);
    font-size: clamp(38px, 10.5vw, 52px);
    line-height: 0.96;
  }

  .mega-groups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 clamp(56px, 15vw, 88px);
    max-width: 360px;
  }

  .mega-group,
  .mega-group:nth-child(3) {
    grid-column: auto;
    grid-row: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 0;
  }

  .mega-group:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .mega-group:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  .mega-group:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
    margin-top: 26px;
  }

  .mega-group:nth-child(3) a:first-child {
    display: none;
  }

  .mega-group a {
    display: block;
    width: fit-content;
    padding: 0;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.09em;
  }
}

@media (max-width: 520px) {
.brand {
    width: 82px;
  }
.mega-groups {
    max-width: 330px;
    gap: 0 clamp(44px, 12vw, 64px);
  }
.mega-group,
.mega-group:nth-child(3) {
    gap: 13px;
  }
.mega-group:nth-child(3) {
    margin-top: 24px;
  }
.mega-group a {
    font-size: 12px;
  }
}
.action-popup.is-collapsed {
  width: 226px;
}
.action-popup__collapsed-label {
  padding-left: 22px;
  padding-right: 22px;
  white-space: nowrap;
}

@media (max-width: 900px) {
.action-popup:not(.is-collapsed) .action-popup__intro,
.action-popup:not(.is-collapsed) .action-popup__intro h2,
.action-popup:not(.is-collapsed) .action-popup__intro p:last-child {
    text-align: left;
  }
.action-popup:not(.is-collapsed) .action-popup__intro p:last-child {
    margin-left: 0;
    margin-right: 0;
  }
}
/* Mobile popup positioning fixes */
@media (max-width: 900px) {
  .action-popup.is-collapsed {
    position: fixed;
    right: 18px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
    transform: none;
  }

  .action-popup.is-collapsed:hover,
  .action-popup.is-collapsed:focus-within {
    transform: none;
  }

  .action-popup:not(.is-collapsed) {
    left: 50%;
    right: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
    transform: translateX(-50%);
  }

  .action-popup.is-hidden:not(.is-collapsed) {
    transform: translateX(-50%) translateY(18px);
  }

  .action-popup.is-form-open {
    left: 50%;
    right: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
    transform: translateX(-50%);
  }
}

/* =========================================================
   Dynamic insight / campaign rail
   ---------------------------------------------------------
   Homepage-adapted article/campaign rail.
   Left side stays clean. Right side carries image,
article
   metadata and hover detail.
   ========================================================= */

.insight-campaign-rail {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: #fff;
  color: var(--indwe-navy-deep);
  overflow: hidden;
}
.insight-campaign-rail__content {
  min-width: 0;
  align-self: start;
  padding: clamp(92px, 12vw, 180px) var(--page-pad);
}
.insight-campaign-rail__content h2 {
  max-width: 620px;
  margin: 0 0 36px;
  color: var(--indwe-navy-deep);
  font-family: var(--font-display);
  font-size: clamp(34px, 3.8vw, 58px);
  line-height: 1.08;
  letter-spacing: 0.015em;
  font-weight: 700;
  text-transform: uppercase;
}
.insight-campaign-rail__rows {
  width: 100%;
  max-width: 820px;
  display: grid;
  border-top: 1px solid rgba(0, 0, 0, 0.16);
}
.insight-campaign-rail__row {
  position: relative;
  width: 100%;
  display: grid;
  align-items: center;
  min-height: 58px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.16);
  color: var(--indwe-navy-deep);
  transition:
    background var(--ease),
    color var(--ease),
    padding-left var(--ease),
    border-color var(--ease);
}
.insight-campaign-rail__row span {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.insight-campaign-rail__row {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  min-height: 58px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.16);
  color: var(--indwe-navy-deep);
  transition:
    background var(--ease),
    color var(--ease),
    padding-left var(--ease),
    border-color var(--ease);
}
.insight-campaign-rail__row span {
  min-width: 0;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.insight-campaign-rail__row small {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
  color: rgba(13, 38, 63, 0.46);
  font-family: var(--font-display);
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translateY(1px);
  transition:
    color var(--ease),
    opacity var(--ease),
    transform var(--ease);
}
.insight-campaign-rail__row small::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  margin-left: 10px;
  background: var(--indwe-cyan);
  opacity: 0.42;
  transition: opacity var(--ease);
}
.insight-campaign-rail__row:hover small,
.insight-campaign-rail__row:focus-visible small,
.insight-campaign-rail__row.is-active small {
  color: var(--indwe-navy-deep);
  opacity: 1;
  transform: translateY(1px);
}
.insight-campaign-rail__row:hover small::after,
.insight-campaign-rail__row:focus-visible small::after,
.insight-campaign-rail__row.is-active small::after {
  opacity: 0.9;
}
.insight-campaign-rail__row::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: var(--indwe-cyan);
  transition: width var(--ease);
}
.insight-campaign-rail__row:hover,
.insight-campaign-rail__row:focus-visible,
.insight-campaign-rail__row.is-active {
  padding-left: 18px;
  background: rgba(107, 190, 205, 0.075);
  color: var(--indwe-navy-deep);
  outline: 0;
}
.insight-campaign-rail__row:hover::after,
.insight-campaign-rail__row:focus-visible::after,
.insight-campaign-rail__row.is-active::after {
  width: 100%;
}
.insight-campaign-rail__visual {
  position: relative;
  min-width: 0;
  min-height: 100vh;
  background: #fff;
  overflow: hidden;
}
.insight-campaign-rail__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.025);
  transition:
    opacity 0.28s ease,
    transform 0.72s ease;
}
.insight-campaign-rail__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 38, 63, 0.16), rgba(13, 38, 63, 0.74)),
    linear-gradient(270deg, rgba(13, 38, 63, 0.34), rgba(13, 38, 63, 0.08));
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}
.insight-campaign-rail__copy {
  position: absolute;
  z-index: 3;
  top: clamp(92px, 12vw, 180px);
  right: var(--page-pad);
  width: min(520px, calc(100% - (var(--page-pad) * 2)));
  color: #fff;
  text-align: right;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.28s ease,
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.insight-campaign-rail__copy h3 {
  max-width: 560px;
  margin: 0 0 18px auto;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(32px, 3.25vw, 52px);
  line-height: 1.04;
  letter-spacing: 0.015em;
  font-weight: 700;
  text-transform: uppercase;
  text-align: right;
}
.insight-campaign-rail.has-active-insight .insight-campaign-rail__image,
.insight-campaign-rail.has-active-insight .insight-campaign-rail__overlay,
.insight-campaign-rail.has-active-insight .insight-campaign-rail__copy {
  opacity: 1;
}
.insight-campaign-rail.has-active-insight .insight-campaign-rail__image {
  transform: scale(1);
}
.insight-campaign-rail.has-active-insight .insight-campaign-rail__copy {
  transform: translateY(0);
}

@media (max-width: 900px) {
.insight-campaign-rail {
    display: block;
    min-height: 0;
  }
.insight-campaign-rail__content {
    padding: clamp(72px, 18vw, 112px) var(--gutter);
  }
.insight-campaign-rail__content h2 {
    font-size: clamp(38px, 12vw, 58px);
    line-height: 1.02;
  }
.insight-campaign-rail__rows {
    max-width: 100%;
  }
.insight-campaign-rail__row {
    padding: 20px 0;
  }
.insight-campaign-rail__row:hover,
.insight-campaign-rail__row:focus-visible,
.insight-campaign-rail__row.is-active {
    padding-left: 10px;
  }
.insight-campaign-rail__row span {
    font-size: 16px;
  }
.insight-campaign-rail__visual {
    min-height: 72svh;
  }
.insight-campaign-rail__copy {
    top: clamp(70px, 16vw, 96px);
    right: var(--gutter);
    left: var(--gutter);
    width: auto;
    text-align: left;
  }
.insight-campaign-rail__copy h3 {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }
.insight-campaign-rail__copy h3 {
    font-size: clamp(38px, 12vw, 58px);
    line-height: 1.02;
  }
}
.insight-campaign-rail__copy p {
  max-width: 470px;
  margin: 22px 0 0 auto;
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 300;
}

/* =========================================================
   Page transition overlay
   ---------------------------------------------------------
   Full-screen plain navy sheet.
   It drops down over the viewport,
covers the page,
then retracts upward again on the next page.
   ========================================================= */

.page-transition {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--indwe-navy-deep);
  color: #fff;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transform: translateY(-100%);
  transition: transform 0.72s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}
.page-transition::before {
  display: none;
}
.page-transition__inner {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  align-items: center;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.28s ease 0.12s,
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}
.page-transition__logo {
  display: block;
  width: clamp(92px, 8vw, 150px);
  height: auto;
  filter: brightness(0) invert(1);
}
/* Old page: sheet drops down from above */
body.is-page-leaving .page-transition {
  transform: translateY(0);
}
body.is-page-leaving .page-transition__inner {
  opacity: 1;
  transform: translateY(0);
}
/* New page arrives fully covered */
html.has-page-transition-arrival .page-transition {
  transform: translateY(0);
}
html.has-page-transition-arrival .page-transition__inner {
  opacity: 1;
  transform: translateY(0);
}
/* New page reveal: sheet retracts upward */
html.has-page-transition-arrival body.is-page-arriving .page-transition {
  transform: translateY(-100%);
}
html.has-page-transition-arrival body.is-page-arriving .page-transition__inner {
  opacity: 1;
  transform: translateY(0);
}
/* Final resting state: hidden above viewport */
html:not(.has-page-transition-arrival) body:not(.is-page-leaving) .page-transition {
  transform: translateY(-100%);
}
html:not(.has-page-transition-arrival) body:not(.is-page-leaving) .page-transition__inner {
  opacity: 0;
  transform: translateY(10px);
}

@media (prefers-reduced-motion: reduce) {
.page-transition {
    transition: none;
    transform: translateY(-100%);
  }
.page-transition__inner {
    transition: none;
  }
}
/* -------------------------------------------------------
   Client Services WhatsApp option
------------------------------------------------------- */

.action-popup__whatsapp {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  margin: -2px 0 2px;
  padding: 0 18px;
  border: 1px solid rgba(37, 211, 102, .48);
  background: rgba(37, 211, 102, .88);
  color: #fff;
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  text-decoration: none;
  transition:
    background var(--ease),
    border-color var(--ease),
    color var(--ease);
}
.action-popup__whatsapp::before {
  content: "";
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  background: url("../assets/img/whatsapp-logo.png") center / contain no-repeat;
  display: block;
  filter: brightness(0) invert(1);
}
.action-popup__whatsapp span {
  display: block;
  transform: translateY(1px);
}
.action-popup__whatsapp:hover,
.action-popup__whatsapp:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--indwe-navy-deep);
  outline: 0;
}
.action-popup__whatsapp:hover::before,
.action-popup__whatsapp:focus-visible::before {
  filter: none;
}
.action-popup__whatsapp[hidden] {
  display: none !important;
}

@media (max-width: 680px) {
.action-popup__whatsapp {
    min-height: 44px;
    padding: 0 14px;
    font-size: 11px;
  }
.action-popup__whatsapp::before {
    width: 16px;
    height: 16px;
  }
}

/* =========================================================
   Client Services: existing form pages inside refreshed drawer
   ========================================================= */
.action-popup.is-service-open {
  top: calc(var(--header) + 18px);
  right: max(18px, var(--page-pad));
  bottom: 18px;
  width: min(760px, calc(100vw - 36px));
  max-height: none;
  display: block;
  overflow: hidden;
  background: var(--indwe-navy-deep);
}

.action-popup.is-service-open .action-popup__intro,
.action-popup.is-service-open .action-popup__actions,
.action-popup.is-service-open .action-popup__collapsed-label,
.action-popup.is-service-open .action-popup__form {
  display: none !important;
}

.action-popup__service {
  display: none;
  height: 100%;
  min-height: 0;
}

.action-popup.is-service-open .action-popup__service {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.action-popup__service-header {
  min-height: 86px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 18px 72px 18px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.action-popup__service-header p {
  margin: 0 0 7px;
  color: rgba(107, 190, 205, 0.78);
}

.action-popup__service-header h3 {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(23px, 2.4vw, 34px);
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
}

.action-popup__back {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: transparent;
  color: #fff;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.action-popup__back:hover,
.action-popup__back:focus-visible {
  border-color: rgba(107, 190, 205, 0.72);
  background: rgba(107, 190, 205, 0.12);
  outline: 0;
}

.action-popup__frame-wrap {
  position: relative;
  min-height: 0;
  background: #fff;
  overflow: hidden;
}

.action-popup__frame {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: #fff;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.action-popup__frame.is-loaded {
  opacity: 1;
}

.action-popup__loader {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--indwe-navy-deep);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.action-popup__loader[hidden] {
  display: none;
}

.action-popup.is-service-open .action-popup__close {
  top: 21px;
  right: 18px;
  width: 42px;
  height: 42px;
  color: #fff;
  font-size: 36px;
}

@media (max-width: 760px) {
  .action-popup.is-service-open {
    inset: var(--header) 0 0;
    width: 100%;
    max-width: none;
    border: 0;
  }

  .action-popup__service-header {
    min-height: 78px;
    gap: 12px;
    padding: 14px 58px 14px 14px;
  }

  .action-popup__service-header h3 {
    font-size: 21px;
  }

  .action-popup__back {
    min-height: 36px;
    padding: 0 10px;
  }

  .action-popup.is-service-open .action-popup__close {
    top: 17px;
    right: 8px;
  }
}

/* =========================================================
   Client Services: preloaded legacy forms in refreshed drawer
   No iframe and no separate legacy page.
   ========================================================= */
.action-popup.is-client-form-open {
  top: calc(var(--header) + 18px);
  right: max(18px, var(--page-pad));
  bottom: 18px;
  width: min(820px, calc(100vw - 36px));
  max-height: none;
  display: block;
  overflow: hidden;
  background: var(--indwe-navy-deep);
  border-color: rgba(255, 255, 255, 0.24);
}

.action-popup.is-client-form-open .action-popup__intro,
.action-popup.is-client-form-open .action-popup__actions,
.action-popup.is-client-form-open .action-popup__collapsed-label,
.action-popup.is-client-form-open > .action-popup__form,
.action-popup.is-client-form-open .action-popup__service {
  display: none !important;
}

.action-popup__forms {
  display: none;
  height: 100%;
  min-height: 0;
}

.action-popup.is-client-form-open .action-popup__forms {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.action-popup__forms-header {
  min-height: 90px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 18px 72px 18px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.action-popup__forms-header p {
  margin: 0 0 7px;
  color: rgba(107, 190, 205, 0.78);
}

.action-popup__forms-header h3 {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(23px, 2.4vw, 34px);
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
}

.action-popup__forms-scroll {
  min-height: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--indwe-ice);
  scrollbar-gutter: stable;
}

.action-popup__form-panel {
  width: 100%;
  min-height: 100%;
  padding: clamp(26px, 4vw, 48px);
  color: var(--indwe-navy-deep);
  background: var(--indwe-ice);
}

.action-popup__form-panel[hidden] {
  display: none !important;
}

.action-popup__form-copy {
  max-width: 620px;
  margin: 0 0 30px;
  padding: 0 0 22px;
  border-bottom: 1px solid rgba(13, 38, 63, 0.16);
}

.action-popup__form-copy p {
  margin: 0;
  color: rgba(13, 38, 63, 0.76);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
}

.action-popup__form-copy a {
  display: inline-flex;
  margin-top: 10px;
  color: var(--indwe-blue);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.action-popup__legacy-form,
.action-popup__legacy-form form {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Normalise old Bootstrap form wrappers without changing form logic. */
.action-popup__legacy-form .row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 14px;
  margin: 0 !important;
}

.action-popup__legacy-form [class*="col-"] {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.action-popup__legacy-form .formStyling {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 14px;
}

.action-popup__legacy-form .form-group {
  min-width: 0;
  margin: 0 !important;
}

.action-popup__legacy-form .form-group--full,
.action-popup__legacy-form .capbox,
.action-popup__legacy-form .g-recaptcha,
.action-popup__legacy-form p,
.action-popup__legacy-form hr,
.action-popup__legacy-form .form-check,
.action-popup__legacy-form .custom-control {
  grid-column: 1 / -1;
}

.action-popup__legacy-form label:not(.action-popup__terms-row) {
  display: block;
  margin: 0 0 7px;
  color: var(--indwe-navy-deep);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
}

.action-popup__legacy-form label sup {
  color: #9b2638;
}

.action-popup__legacy-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.action-popup__legacy-form select,
.action-popup__legacy-form textarea {
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 11px 13px !important;
  border: 1px solid rgba(13, 38, 63, 0.26) !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--indwe-navy-deep) !important;
  box-shadow: none !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  outline: 0;
  transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
}

.action-popup__legacy-form textarea {
  min-height: 126px !important;
  resize: vertical;
}

.action-popup__legacy-form input::placeholder,
.action-popup__legacy-form textarea::placeholder {
  color: rgba(13, 38, 63, 0.46) !important;
}

.action-popup__legacy-form input:focus,
.action-popup__legacy-form select:focus,
.action-popup__legacy-form textarea:focus {
  border-color: rgba(43, 101, 158, 0.72) !important;
  box-shadow: 0 0 0 3px rgba(107, 190, 205, 0.16) !important;
  background: #fff !important;
}

.action-popup__legacy-form input[type="checkbox"],
.action-popup__legacy-form input[type="radio"] {
  accent-color: var(--indwe-blue);
}

.action-popup__legacy-form .btn,
.action-popup__legacy-form button[type="submit"],
.action-popup__legacy-form input[type="submit"] {
  width: fit-content;
  min-width: 150px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0 0 !important;
  padding: 0 18px !important;
  border: 1px solid var(--indwe-navy-deep) !important;
  border-radius: 0 !important;
  background: var(--indwe-navy-deep) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), color var(--ease), transform var(--ease);
}

.action-popup__legacy-form .btn:hover,
.action-popup__legacy-form .btn:focus-visible,
.action-popup__legacy-form button[type="submit"]:hover,
.action-popup__legacy-form button[type="submit"]:focus-visible,
.action-popup__legacy-form input[type="submit"]:hover,
.action-popup__legacy-form input[type="submit"]:focus-visible {
  border-color: var(--indwe-blue) !important;
  background: var(--indwe-blue) !important;
  color: #fff !important;
  transform: translateY(-1px);
  outline: 0;
}

.action-popup__legacy-form a {
  color: var(--indwe-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.action-popup__legacy-form .form-text,
.action-popup__legacy-form small,
.action-popup__legacy-form p {
  color: rgba(13, 38, 63, 0.68);
  font-family: var(--font-body);
  line-height: 1.5;
}

.action-popup__terms-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin: 0;
  color: rgba(13, 38, 63, 0.76);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
}

.action-popup__terms-row input {
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
}

.action-popup__legacy-form .g-recaptcha {
  max-width: 100%;
  margin: 4px 0 12px;
  overflow-x: auto;
}

.action-popup__missing-form {
  padding: 18px;
  border: 1px solid rgba(155, 38, 56, 0.28);
  background: rgba(155, 38, 56, 0.06);
  color: #7d1f2d;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
}

.action-popup.is-client-form-open .action-popup__close {
  top: 21px;
  right: 18px;
  width: 42px;
  height: 42px;
  color: #fff;
  font-size: 36px;
}

@media (max-width: 760px) {
  .action-popup.is-client-form-open {
    inset: var(--header) 0 0;
    width: 100%;
    max-width: none;
    border: 0;
  }

  .action-popup__forms-header {
    min-height: 78px;
    gap: 12px;
    padding: 14px 58px 14px 14px;
  }

  .action-popup__forms-header h3 {
    font-size: 21px;
  }

  .action-popup__back {
    min-height: 36px;
    padding: 0 10px;
  }

  .action-popup__form-panel {
    padding: 24px 18px 38px;
  }

  .action-popup__legacy-form .formStyling,
  .action-popup__legacy-form .row {
    grid-template-columns: 1fr;
  }

  .action-popup.is-client-form-open .action-popup__close {
    top: 17px;
    right: 8px;
  }
}

/* =========================================================
   Client Services hard-coded form refinements
   ========================================================= */
.action-popup__legacy-form .client-service-form {
  align-items: start;
}

.action-popup__legacy-form fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.action-popup__legacy-form fieldset legend {
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
  color: var(--indwe-navy-deep);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
}

.action-popup__legacy-form fieldset legend small,
.action-popup__legacy-form label small {
  display: block;
  margin-top: 3px;
  color: rgba(13, 38, 63, 0.58);
  font-size: 12px;
  font-weight: 500;
}

.client-service-options,
.client-service-role,
.client-service-section-title,
.client-service-submit-row {
  grid-column: 1 / -1;
}

.client-service-options {
  padding: 18px !important;
  border: 1px solid rgba(13, 38, 63, 0.18) !important;
  background: rgba(255, 255, 255, 0.58);
}

.client-service-options__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.client-service-options__grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.client-service-options__grid label,
.client-service-role__options label {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  margin: 0 !important;
  color: rgba(13, 38, 63, 0.82) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  cursor: pointer;
}

.client-service-options__grid input,
.client-service-role__options input {
  width: 15px !important;
  height: 15px !important;
  min-height: 15px !important;
  margin: 1px 0 0 !important;
  padding: 0 !important;
}

.client-service-role {
  padding: 18px !important;
  border: 1px solid rgba(43, 101, 158, 0.24) !important;
  background: rgba(107, 190, 205, 0.08);
}

.client-service-role__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.client-service-role__options label {
  min-height: 50px;
  align-content: center;
  padding: 12px;
  border: 1px solid rgba(13, 38, 63, 0.18);
  background: #fff;
  transition: border-color var(--ease), background var(--ease);
}

.client-service-role__options label:has(input:checked) {
  border-color: var(--indwe-blue);
  background: rgba(107, 190, 205, 0.12);
}

.client-service-section-title {
  margin: 12px 0 0;
  padding: 18px 0 8px;
  border-top: 1px solid rgba(13, 38, 63, 0.16);
  color: var(--indwe-navy-deep);
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.client-service-submit-row {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding-top: 4px;
}

.client-service-submit-row .g-recaptcha {
  max-width: 100%;
  overflow-x: auto;
}

.client-service-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.client-service-error {
  display: block;
  grid-column: 1 / -1;
  margin-top: 6px;
  color: #9b2638;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
}

.action-popup__legacy-form .is-invalid:not(fieldset) {
  border-color: #9b2638 !important;
  box-shadow: 0 0 0 3px rgba(155, 38, 56, 0.10) !important;
}

.action-popup__legacy-form fieldset.is-invalid {
  border-color: rgba(155, 38, 56, 0.60) !important;
  background: rgba(155, 38, 56, 0.04);
}

.action-popup__legacy-form button[disabled],
.action-popup__legacy-form input[type="submit"][disabled] {
  opacity: 0.58;
  cursor: wait;
  transform: none !important;
}

.action-popup__legacy-form [data-role-field][hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  .client-service-options__grid,
  .client-service-options__grid--three,
  .client-service-role__options {
    grid-template-columns: 1fr;
  }

  .client-service-options {
    padding: 15px !important;
  }

  .client-service-section-title {
    font-size: 20px;
  }
}