/* =============================================
   SHARED COMPONENTS (REDESIGN)
   ============================================= */

/* --- Scroll Animations (Motion.js handles animation, CSS sets initial state) --- */
.reveal {
  opacity: 0;
}

/* --- Skip to content (first tab stop; only visible while focused) --- */
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--heading);
  font-weight: 600;
  font-size: .875rem;
  border-radius: 0 0 6px 6px;
  transition: top .2s;
}
.skip-link:focus {
  top: 0;
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* --- Section Labels & Titles --- */
.section-label {
  font-family: var(--heading);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--red);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-label::before {
  content: '';
  width: 32px;
  height: 2px;
  background: var(--red);
}
/* Cleared in FR8 Creator ("Section label" emptied) = the eyebrow disappears. Without this the
   span stays in flow and the red ::before dash and its 16px margin are left on their own. */
.section-label:empty { display: none; }
/* The same for a subtitle cleared in FR8 Creator (e.g. the Latest News one, blank since 2026-10-09). */
.section-subtitle:empty { display: none; }

/* Every section title shows each word with a capital first letter (owner, 2026-09-25), including
   titles typed in lower case in FR8 Creator. The second rule covers the headings that use their own
   class (Network, Group, Contact, FAQ, Careers); the popups sit outside <main>. */
#main-content section h2 { text-transform: capitalize; }
.section-title {
  font-family: var(--heading);
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
  margin-bottom: 24px;
  letter-spacing: -.03em;
  text-transform: capitalize;
}

.section-subtitle {
  font-family: var(--body);
  font-size: 1.0625rem;
  color: var(--g500);
  max-width: none;
  line-height: 1.8;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  font-family: var(--heading);
  font-size: .875rem;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background .25s cubic-bezier(.16, 1, .3, 1), color .25s cubic-bezier(.16, 1, .3, 1), transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .35s cubic-bezier(.16, 1, .3, 1), border-color .25s ease;
  border: none;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.btn-primary {
  background: var(--red);
  color: var(--white);
}
.btn-primary:hover {
  transform: translateY(-2px);
  background: var(--red);
}
.btn-primary:active { transform: translateY(0); transition-duration: .08s; }

/* Every button and button-styled link that used to end in a long arrow now ends in this
   chevron (Lucide chevron-right), owner 2026-10-08. The per-button hover nudges the arrows had
   are kept in Hero.css / Sections.css / the .ca-continue rule below; this is just the shape. */
/* Lined up with the CAPITALS (owner, 2026-10-09, the Careers "View Open Roles"): the flex row centres the chevron on the
   text's line, but Oxanium's capitals sit higher than the middle of that line, so the chevron sat 1.9px (0.134em at the
   14px button text) LOW - measured in a browser on desktop and phone. Raised by the same amount; in em, so it stays right
   at any button size. (`top`, not a transform: the hover nudges use transform.) */
.btn-chevron { flex: 0 0 auto; display: inline-block; position: relative; top: -.134em; }

.btn-secondary {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--g200);
}
.btn-secondary:hover {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
  transform: translateY(-2px);
}

/* "outline-white" is now SOLID - opaque white pill with navy text. No glow, not transparent. */
.btn-outline-white {
  background: var(--white);
  color: var(--navy);
  border: 2px solid var(--white);
}
.btn-outline-white:hover {
  background: var(--off-white);
  border-color: var(--off-white);
  transform: translateY(-2px);
}

/* =============================================
   CUSTOMER PORTAL LOGIN MODAL
   ============================================= */
.login-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;          /* above the cookie banner (9999): on a phone it covered the lower part of every pop-up */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;               /* the overlay itself never scrolls */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* No transitions: the popup appears and disappears instantly. */
}
.login-modal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.login-modal-backdrop {
  position: absolute;
  inset: 0;
  /* One light dim for EVERY pop-up (--popup-dim, 20%) - no pop-up overrides it. Plain colour,
     no backdrop blur (blur was slow + heavy). */
  background: var(--popup-dim);
}
.login-modal-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  /* Sized to fit a ~480px-tall window without scrolling. If a window is shorter still, the
     card scrolls by wheel/touch but never SHOWS a scrollbar - a second bar at the right edge
     used to appear and squeeze the fields sideways. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: var(--white);
  border-radius: 10px;
  /* With the page only lightly dimmed, the card needs its own edge to stand off it. */
  border: 1px solid rgba(11, 22, 40, .08);
  box-shadow: 0 28px 70px rgba(11, 22, 40, .30), 0 2px 10px rgba(11, 22, 40, .10);
  padding: 30px 32px 24px;
  text-align: center;
  overscroll-behavior: contain;
}
.login-modal-card::-webkit-scrollbar { display: none; }
.login-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--g500);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.login-modal-close:hover { background: var(--g100); color: var(--navy); }
.login-modal-close:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.login-modal h2 {
  font-family: var(--heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .5px;
  margin: 0 0 4px;
}
.login-modal-sub {
  font-size: .9rem;
  color: var(--g600);
  line-height: 1.5;
  margin: 0 0 18px;
}
.login-modal-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.login-modal-field { display: flex; flex-direction: column; gap: 6px; }
.login-modal-field label {
  font-family: var(--heading);
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--g600);
}
.login-modal-field input {
  height: 44px;
  padding: 0 14px;
  font-family: var(--body);
  font-size: 16px;                /* never below 16px: iOS zooms the whole page into smaller fields */
  color: var(--navy);
  background: var(--off-white);
  border: 1.5px solid var(--g200);
  border-radius: 6px;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.login-modal-field input::placeholder { color: var(--g300); }
/* The box being typed in: a navy edge, no red and no halo - the same as the enquiry form (owner, 2026-10-09: no red
   line round a box while typing in it; red means "needs attention"). Audit 2026-10-09. */
.login-modal-field input:focus {
  outline: none;
  background: var(--white);
  border-color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
}
.login-modal-submit { width: 100%; justify-content: center; margin-top: 4px; padding: 14px 24px; }
.login-modal-note {
  font-size: .75rem;
  color: var(--g500);
  line-height: 1.5;
  margin: 12px 0 0;
}
@media (max-width: 480px) {
  .login-modal-card { padding: 26px 20px 20px; }
  .login-modal h2 { font-size: 1.25rem; }
}

/* --- Customer Portal login (#loginModal) - restyled 2026-10-07 to match the Customer Area it opens:
   the same navy header with the red VALLANCE wordmark (.ca-wordmark / .ca-head-label are shared),
   then the form on white with field icons and a show-password eye. Scoped to #loginModal, so the
   other pop-ups that share .login-modal-card are unchanged. --- */
/* Built like the Customer Area card: header across the full width with no outline (no border, no card
   background showing round it), and only the body scrolls if a short window needs it. */
#loginModal .login-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: 440px;
  padding: 0;
  text-align: left;
  border: 0;
  border-radius: 14px;
  background: transparent;
}
.login-card-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 12px 12px 24px;
  background: var(--navy);
  color: var(--white);
  border-bottom: 3px solid var(--red);
}
.login-card-head .ca-wordmark { font-size: 26px; }
#loginModal .login-card-head .login-modal-close {
  position: static;
  flex: 0 0 auto;
  margin-left: auto;
  color: rgba(255, 255, 255, .75);
}
#loginModal .login-card-head .login-modal-close:hover { background: rgba(255, 255, 255, .1); color: var(--white); }
#loginModal .login-card-head .login-modal-close:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.login-card-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 28px 22px;
  background: var(--white);
  scrollbar-width: thin;
  scrollbar-color: var(--g300) transparent;
}
.login-card-body::-webkit-scrollbar { width: 8px; }
.login-card-body::-webkit-scrollbar-thumb { background: var(--g300); border-radius: 8px; }
.login-card-body::-webkit-scrollbar-track { background: transparent; }
#loginModal .login-card-body h2 { font-size: 1.6rem; letter-spacing: 0; margin: 0 0 4px; }
#loginModal .login-modal-sub { margin: 0 0 20px; }
#loginModal .login-modal-form { gap: 14px; }
.login-input { position: relative; }
.login-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--g500);
  pointer-events: none;
  transition: color .2s;
}
.login-input:focus-within .login-input-icon { color: var(--red); }
#loginModal .login-input input { width: 100%; height: 48px; padding-left: 44px; border-radius: 8px; }
#loginModal .login-input-password input { padding-right: 50px; }
.login-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--g500);
  cursor: pointer;
  transition: color .2s, background .2s;
}
.login-eye:hover { color: var(--navy); background: var(--g100); }
.login-eye:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.login-eye-hide { display: none; }
.login-eye[aria-pressed="true"] .login-eye-show { display: none; }
.login-eye[aria-pressed="true"] .login-eye-hide { display: inline; }
.login-caps { margin: 0; font-size: .75rem; font-weight: 600; color: var(--red); }
.login-caps[hidden] { display: none; }
#loginModal .login-modal-submit { gap: 8px; min-height: 50px; padding: 12px 24px; margin-top: 6px; border-radius: 8px; }
#loginModal .login-modal-submit svg { flex: 0 0 auto; transition: transform .2s; }
#loginModal .login-modal-submit:hover svg { transform: translateX(3px); }
#loginModal .login-modal-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 0;
  padding: 12px 14px;
  background: var(--off-white);
  border: 1px solid var(--g100);
  border-radius: 8px;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--g600);
}
#loginModal .login-modal-note svg { flex: 0 0 auto; margin-top: 1px; color: var(--red); }
.login-help { margin: 14px 0 0; font-size: .78rem; color: var(--g500); text-align: center; }
.login-help a { color: var(--navy); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--g300); white-space: nowrap; }
.login-help a:hover { color: var(--red); border-bottom-color: var(--red); }
.login-help a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
@media (max-width: 480px) {
  .login-card-head { gap: 12px; padding: 10px 8px 10px 18px; }
  .login-card-head .ca-wordmark { font-size: 22px; }
  .login-card-head .ca-head-label { padding-left: 12px; font-size: .62rem; letter-spacing: 2px; }
  .login-card-body { padding: 20px 20px 18px; }
  #loginModal .login-card-body h2 { font-size: 1.35rem; }
}
/* Short windows (a landscape phone, a small laptop): tighten up so the whole form fits without
   scrolling. The "Next" note goes - the Customer Area says the same thing a moment later. */
@media (max-height: 700px) {
  .login-card-body { padding-top: 16px; padding-bottom: 14px; }
  #loginModal .login-modal-sub { margin-bottom: 12px; }
  #loginModal .login-modal-form { gap: 10px; }
  #loginModal .login-input input { height: 44px; }
  #loginModal .login-modal-note { display: none; }
  .login-help { margin-top: 10px; }
}

/* --- Sustainability pop-up (a card's "Read more") - reuses the login modal overlay + card --- */
/* No white outline (owner, 2026-10-08): the shared card's faint edge over its white background drew a light ring round
   the dark photo panel. So this card has no edge and no background of its own - the panel runs to the rounded edge and
   only the text part below is white (same fix as the Customer Area header, 2026-10-07). Also the invoice pop-up. */
.sustain-modal-card { max-width: 640px; padding: 0; text-align: left; border: 0; background: transparent; }
.sustain-modal .login-modal-close { z-index: 2; background: rgba(255,255,255,.92); color: var(--navy); border-radius: 50%; }
.sustain-modal .login-modal-close:hover { background: var(--white); }
.sustain-modal-media { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px 10px 0 0;
  background: radial-gradient(circle at 70% 30%, rgba(237,28,36,.28) 0%, rgba(237,28,36,0) 55%), linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  display: flex; align-items: center; justify-content: center; }
.sustain-modal-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sustain-modal-media img[hidden], .sustain-modal-placeholder[hidden] { display: none; }
/* No photo yet: a branded panel with the card's icon (the owner will add photos in FR8 Creator). */
.sustain-modal-placeholder { display: flex; align-items: center; justify-content: center; width: 112px; height: 112px;
  border-radius: 24px; background: rgba(255,255,255,.08); color: var(--white); }
.sustain-modal-body { padding: 24px 30px 30px; background: var(--white); }
.sustain-modal-label { display: block; font-family: var(--heading); font-size: .6875rem; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--red); margin-bottom: 6px; }
.sustain-modal .sustain-modal-body h2 { text-align: left; font-size: 1.5rem; margin: 0 0 12px; text-transform: capitalize; }
.sustain-modal-text { color: var(--g600); font-size: .95rem; line-height: 1.75; }
/* Each merged point's name (bold in FR8 Creator) reads as a small heading in the pop-up (2026-10-08). */
.sustain-modal-text strong { color: var(--navy); }
/* No photo (2026-10-08): the branded icon panel is shorter than a photo, so the merged boxes' longer text fits on a
   laptop screen. Set by the pop-up script (.is-placeholder); the invoice pop-up never gets it - its drawn example
   invoice needs the full height. */
.sustain-modal-media.is-placeholder { aspect-ratio: 3 / 1; }
@media (max-width: 480px) {
  .sustain-modal-card { padding: 0; }
  .sustain-modal-body { padding: 20px 20px 24px; }
  .sustain-modal .sustain-modal-body h2 { font-size: 1.3rem; }
  .sustain-modal-placeholder { width: 88px; height: 88px; }
  .sustain-modal-placeholder svg { width: 56px; height: 56px; }
}

/* --- Invoice pop-up (Technology box 4, Report & Invoice - card 9 until the four-box merge, 2026-10-08) - the Sustainability pop-up's card and branded panel. An uploaded
   invoice photo is shown WHOLE (contain, not cover - a cropped invoice says nothing); until there is one, a drawn
   example: white paper, one line and one charge per job, every detail made up AND blurred. --- */
.invoice-modal .sustain-modal-media img { object-fit: contain; background: var(--off-white); }
.invoice-sample { width: min(80%, 440px); padding: 16px 18px 14px; border-radius: 6px; background: var(--white); color: var(--navy);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6); font-family: var(--body); font-size: 11px; line-height: 1.35; text-align: left; }
.invoice-sample[hidden] { display: none; }
.invoice-sample-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; padding-bottom: 7px;
  border-bottom: 2px solid var(--red); }
.invoice-sample-brand { font-family: 'Ersen', var(--heading); font-size: 17px; letter-spacing: .06em; color: var(--red); }
.invoice-sample-doc { font-family: var(--heading); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.invoice-sample-meta { display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--g500); }
.invoice-sample-row { display: grid; grid-template-columns: .8fr 1.2fr 1.5fr .9fr; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--g100); }
.invoice-sample-row span:last-child, .invoice-sample-total span:last-child { text-align: right; }
.invoice-sample-row--head { font-family: var(--heading); font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--g500); border-bottom-color: var(--g200); }
.invoice-sample-total { display: flex; justify-content: space-between; padding-top: 7px; font-weight: 700; }
.invoice-blur { filter: blur(3px); user-select: none; }
.invoice-modal-note { margin: 12px 0 0; color: var(--g500); font-size: .8rem; }
@media (max-width: 480px) {
  .invoice-sample { width: 88%; padding: 12px 12px 10px; font-size: 9.5px; }
  .invoice-sample-brand { font-size: 14px; }
}

/* --- Resources popup (footer "Resources" link) - reuses the login modal overlay + card --- */
.resources-card { max-width: 520px; }
.resources-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.resource-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--off-white);
  border: 1px solid var(--g200);
  border-radius: 8px;
}
.resource-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--red-glow);
  color: var(--red);
}
.resource-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.resource-title { font-family: var(--heading); font-size: .95rem; font-weight: 700; color: var(--navy); line-height: 1.3; }
.resource-desc { font-size: .8125rem; color: var(--g600); line-height: 1.45; }
.resource-meta { font-size: .6875rem; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--g500); margin-top: 2px; }
.resource-btn { flex: 0 0 auto; padding: 11px 18px; font-size: .75rem; }
.resource-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
@media (max-width: 480px) {
  .resource-item { flex-wrap: wrap; gap: 10px 12px; padding: 14px; }
  .resource-text { flex-basis: calc(100% - 54px); }
  .resource-btn { width: 100%; justify-content: center; }
}

/* customer area */
/* =============================================
   CUSTOMER AREA - the full-screen step between the Login pop-up and Mandata (index.html, #customerArea).
   Uses the .login-modal overlay; above the cookie banner (9999) so nothing covers "Continue To The Portal".
   ============================================= */
.customer-area { padding: 0; z-index: 10001; }
/* (Its own 78% dim was removed 2026-10-07 - every pop-up uses the one light --popup-dim.) */
/* Three fixed-height parts in a column (owner, 2026-10-07): the navy header across the FULL width of the
   card, the content, and the Continue bar. Only the content scrolls ([data-popup-scroll] tells the popup
   script so), so the scrollbar runs from the bottom of the header to the top of the Continue bar - it used to
   run down the whole card, beside the header, leaving a white strip next to it. No border and no card
   background either: the header goes right to the card's rounded edge with no light outline around it. */
.customer-area .customer-area-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: 1080px;
  width: calc(100% - 48px);
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  padding: 0;
  text-align: left;
  border: 0;
  border-radius: 14px;
  background: transparent;
}
.ca-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 28px;
  background: var(--navy);
  color: var(--white);
}
.ca-wordmark { font-family: var(--logo); font-size: 30px; font-weight: 560; line-height: 1; letter-spacing: .06em; color: var(--red); }
.ca-head-label {
  font-family: var(--heading);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, .25);
}
.ca-back {
  margin-left: auto;
  background: none;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 8px;
  color: var(--white);
  font-family: var(--heading);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 9px 14px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.ca-back:hover { border-color: var(--white); background: rgba(255, 255, 255, .08); }
.ca-back:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.ca-body {
  flex: 1 1 auto;
  min-height: 0;                    /* lets the column shrink it, so it scrolls instead of growing the card */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 36px 40px 40px;
  background: var(--white);
  scrollbar-width: thin;
  scrollbar-color: var(--g300) transparent;
}
.ca-body::-webkit-scrollbar { width: 8px; }
.ca-body::-webkit-scrollbar-thumb { background: var(--g300); border-radius: 8px; }
.ca-body::-webkit-scrollbar-track { background: transparent; }
.customer-area #customerAreaTitle:focus { outline: none; }   /* focused on open so it is read first; not a control */
.customer-area .ca-body h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); text-align: left; margin: 0 0 10px; letter-spacing: 0; }
.ca-intro { max-width: 680px; font-size: .95rem; line-height: 1.7; color: var(--g600); margin: 0 0 32px; }
.ca-section + .ca-section { margin-top: 36px; }
.ca-section h3 { font-family: var(--heading); font-size: 1.1rem; font-weight: 700; color: var(--navy); margin: 0 0 14px; }
.ca-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.ca-video { display: flex; flex-direction: column; border: 1px solid var(--g100); border-radius: 12px; overflow: hidden; background: var(--white); box-shadow: 0 14px 36px -28px rgba(11, 22, 40, .5); }
.ca-video-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: linear-gradient(135deg, var(--navy), var(--navy-mid));
  cursor: pointer;
}
.ca-video-media img, .ca-video-media iframe, .ca-video-media video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.ca-video-media video { object-fit: contain; background: #000; }
.ca-play {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: var(--white);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  transition: transform .2s;
}
.ca-video-media:hover .ca-play { transform: scale(1.08); }
.ca-video-media:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }
.ca-video-text { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 14px; }
.ca-video-title { font-family: var(--heading); font-size: .95rem; font-weight: 700; color: var(--navy); }
.ca-video-length { font-size: .75rem; color: var(--g500); }
/* The link to the training videos' page (2026-10-13) - a .resources-list item like the Documents below it. Videos
   listed in CUSTOMER_VIDEOS (none yet) appear under it. (The dashed "videos are on their way" note, .ca-empty, went.) */
.ca-training + .ca-videos:not(:empty) { margin-top: 16px; }
.ca-docs { margin: 0; }
/* Footer bar at the bottom of the card, outside the scrolling part: "Continue To The Portal" is always visible,
   bottom right, and never covers the content. */
.ca-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 16px 28px;
  background: var(--white);
  border-top: 1px solid var(--g100);
  box-shadow: 0 -12px 30px -22px rgba(11, 22, 40, .4);
}
.ca-foot-note { margin: 0 auto 0 0; font-size: .8rem; line-height: 1.5; color: var(--g500); }
.ca-continue { flex: 0 0 auto; padding: 15px 26px; }   /* no red glow under it (owner, 2026-10-08: no glow on any button) */
.ca-continue .btn-chevron { transition: transform .25s; }
.ca-continue:hover .btn-chevron { transform: translateX(4px); }
.ca-continue:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.ca-continue:disabled { opacity: .85; cursor: progress; }
@media (max-width: 640px) {
  .customer-area .customer-area-card { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  .ca-head { padding: 12px 16px; gap: 10px; }
  .ca-wordmark { font-size: 22px; }
  .ca-head-label { display: none; }
  .ca-body { padding: 24px 16px 28px; }
  .ca-foot { padding: 12px 16px; }
  .ca-foot-note { display: none; }
  .ca-continue { flex: 1 1 auto; justify-content: center; }
}

/* =============================================
   WELCOME POP-UP (2026-10-16) - "Welcome to our new website", for launch day (#welcomeModal in index.html).
   Built like the Login pop-up: the same navy header with the red VALLANCE wordmark running to the card's edges, no
   outline round the card, a white body that is the only part that scrolls. Its own entrance, only while it is open:
   the card rises in, the badge pops and its ring ripples, the three steps arrive one after another, and the little
   arrow on the Login step keeps nudging towards the top right corner - where the Login button is. Visitors who ask
   their device for less motion get none of it. No glow on the buttons (owner rule). Wording and the on/off switch:
   FR8 Creator -> Welcome Pop-up; Js/Welcome-Popup.js opens it.
   ============================================= */
#welcomeModal .welcome-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: 480px;
  padding: 0;
  text-align: left;
  border: 0;
  border-radius: 14px;
  background: transparent;
}
#welcomeModal .login-card-head .login-modal-close { position: static; flex: 0 0 auto; margin-left: auto; color: rgba(255, 255, 255, .75); }
#welcomeModal .login-card-head .login-modal-close:hover { background: rgba(255, 255, 255, .1); color: var(--white); }
#welcomeModal .login-card-head .login-modal-close:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
/* A line emptied in FR8 Creator is hidden by the script; nothing here may beat [hidden] with a display of its own. */
#welcomeModal [hidden] { display: none !important; }
.welcome-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 30px 32px 28px;
  background: var(--white);
  text-align: center;
  scrollbar-width: thin;
  scrollbar-color: var(--g300) transparent;
}
.welcome-body::-webkit-scrollbar { width: 8px; }
.welcome-body::-webkit-scrollbar-thumb { background: var(--g300); border-radius: 8px; }
.welcome-badge {
  position: relative;
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
}
.welcome-badge svg { position: relative; z-index: 1; }
.welcome-badge-ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--red); opacity: 0; }
.welcome-spark { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--red); opacity: 0; }
.welcome-spark-a { top: 2px; right: -4px; }
.welcome-spark-b { bottom: 4px; left: -8px; width: 6px; height: 6px; }
.welcome-spark-c { top: -8px; left: 20px; width: 5px; height: 5px; }
.welcome-body h2 {
  font-family: var(--heading);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--navy);
  margin: 0 0 8px;
}
.welcome-intro { max-width: 380px; margin: 0 auto 22px; font-size: .95rem; line-height: 1.65; color: var(--g600); }
.welcome-steps { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; text-align: left; }
.welcome-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--off-white);
  border: 1px solid var(--g100);
}
.welcome-step-icon {
  position: relative;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--navy);
  color: var(--white);
}
.welcome-step-pin {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  border: 2px solid var(--off-white);
}
.welcome-step-text { font-size: .9rem; line-height: 1.5; color: var(--g800); }
.welcome-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.welcome-actions .btn { flex: 1 1 150px; justify-content: center; }
@media (max-width: 480px) {
  .welcome-body { padding: 24px 18px 20px; }
  .welcome-body h2 { font-size: 1.3rem; }
  .welcome-badge { width: 64px; height: 64px; margin-bottom: 14px; }
  .welcome-step { padding: 10px 12px; gap: 12px; }
}

/* The entrance - only while it is open. */
@keyframes welcomeFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes welcomeCardIn { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes welcomeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes welcomeStepIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes welcomePop {
  0% { opacity: 0; transform: scale(.4) rotate(-12deg); }
  65% { opacity: 1; transform: scale(1.08) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes welcomeRipple { 0% { opacity: .55; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes welcomeSpark { 0%, 100% { opacity: 0; transform: scale(.3); } 40% { opacity: 1; transform: scale(1); } 70% { opacity: 0; transform: scale(.6); } }
@keyframes welcomeNudge { 0%, 55%, 100% { transform: translate(0, 0); } 25% { transform: translate(3px, -3px); } }
#welcomeModal.open .login-modal-backdrop { animation: welcomeFadeIn .3s ease both; }
#welcomeModal.open .welcome-card { animation: welcomeCardIn .5s cubic-bezier(.2, .8, .2, 1) both; }
#welcomeModal.open .welcome-badge { animation: welcomePop .7s .15s cubic-bezier(.2, .8, .2, 1) both; }
#welcomeModal.open .welcome-badge-ring { animation: welcomeRipple 2.4s .8s ease-out infinite; }
#welcomeModal.open .welcome-spark-a { animation: welcomeSpark 2.4s .9s ease-in-out infinite; }
#welcomeModal.open .welcome-spark-b { animation: welcomeSpark 2.4s 1.5s ease-in-out infinite; }
#welcomeModal.open .welcome-spark-c { animation: welcomeSpark 2.4s 2.1s ease-in-out infinite; }
#welcomeModal.open .welcome-body h2 { animation: welcomeUp .45s .3s ease both; }
#welcomeModal.open .welcome-intro { animation: welcomeUp .45s .38s ease both; }
#welcomeModal.open .welcome-step:nth-child(1) { animation: welcomeStepIn .45s .5s ease both; }
#welcomeModal.open .welcome-step:nth-child(2) { animation: welcomeStepIn .45s .62s ease both; }
#welcomeModal.open .welcome-step:nth-child(3) { animation: welcomeStepIn .45s .74s ease both; }
#welcomeModal.open .welcome-actions { animation: welcomeUp .45s .9s ease both; }
#welcomeModal.open .welcome-step-pin { animation: welcomeNudge 1.6s 1.3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  #welcomeModal *, #welcomeModal *::before, #welcomeModal *::after { animation: none !important; }
}