/* PremierLawyer Agency Template 2 - Namespaced under .pl-at2 */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Host+Grotesk:wght@300;400;500;600;700&display=swap');

/* Keyframes - must be global scope */
@keyframes pl-at2-anmItem {
  to { translate: 0 0; opacity: 1; }
}
@keyframes pl-at2-mstgItm {
  to { opacity: 1; translate: 0 0; }
}
@keyframes pl-at2-anmGlow {
  0%, 100% { transform: scaleY(0); opacity: 0; }
  50% { transform: scaleY(1); opacity: 1; }
}
@keyframes pl-at2-anmGlowText {
  to { text-shadow: var(--ttl-sdw); }
}
@keyframes pl-at2-anmScaleIn {
  to { scale: 1.1; }
}
@keyframes pl-at2-timerThumb {
  to { width: 100%; }
}

/* ============ SCOPED STYLES ============ */
.pl-at2 {
  /* Variables (scoped to .pl-at2 instead of :root) */
  --g-pd-v: 3.5rem;
  --g-pd-h: 2rem;
  --hdr-mrg-bt: 3rem;
  --bg-bx-pd-v: 0;
  --bg-bx-pd-h: 0;
  --bg-bx-bdr-rds: 0.9rem;
  --bg-bx-blr: 0.5rem;
  --bg-bx-bdr-w: 2px;
  --so-i-s: 0.9rem;
  --fnt-m: "Host Grotesk", system-ui, sans-serif;
  --fnt-t: "Outfit", system-ui, sans-serif;
  --fnt-rev-mx: "Gilroy", sans-serif;
  --min-fnt-s: 1rem;
  --max-fnt-s: 1.25rem;
  --clp-rng-1: 0.752rem;
  --clp-rng-2: 0.7936vw;
  --clp-rng: calc(var(--clp-rng-1) + var(--clp-rng-2));
  --bdy-fnt-s: clamp(var(--min-fnt-s), var(--clp-rng), var(--max-fnt-s));
  --bdy-ln-ht: 1.5;
  --fnt-pl-s: 1.25rem;
  --fnt-pl-s-mtp: 1;
  --fnt-t-rev-ff: var(--fnt-rev-mx);
  --fnt-t-rev-ls: 0em;
  --fnt-t-rev-w: 300;
  --fnt-t-rev-tt: none;
  --fnt-t-rev-s: 2rem;
  --fnt-t-rev-lh: 1;
  --fnt-t-rev-s-mtp: 1;
  --fnt-t-big-ff: var(--fnt-t);
  --fnt-t-big-ls: 0em;
  --fnt-t-big-w: 700;
  --fnt-t-big-tt: none;
  --fnt-t-big-s: 2.5rem;
  --fnt-t-big-lh: 1;
  --fnt-t-big-s-mtp: 1;
  --fnt-t-co-ff: var(--fnt-t);
  --fnt-t-co-ls: 0em;
  --fnt-t-co-w: 400;
  --fnt-t-co-tt: none;
  --fnt-t-co-s: 2.75rem;
  --fnt-t-co-lh: 1;
  --fnt-t-co-s-mtp: 1;
  --fnt-t-sb-ff: var(--fnt-t);
  --fnt-t-sb-ls: 0em;
  --fnt-t-sb-w: 600;
  --fnt-t-sb-tt: none;
  --fnt-t-sb-s: 2.5rem;
  --fnt-t-sb-lh: 1.2;
  --fnt-t-sb-s-mtp: 1;
  --fnt-t-k-ff: var(--fnt-t);
  --fnt-t-k-ls: 0.38em;
  --fnt-t-k-w: 700;
  --fnt-t-k-tt: uppercase;
  --fnt-t-k-s: 0.75rem;
  --fnt-t-k-lh: 1.2;
  --fnt-t-k-s-mtp: 1;
  --fnt-t-1-ff: var(--fnt-t);
  --fnt-t-1-ls: 0em;
  --fnt-t-1-w: 600;
  --fnt-t-1-tt: none;
  --fnt-t-1-s: 2rem;
  --fnt-t-1-lh: 1.2;
  --fnt-t-1-s-mtp: 1;
  --fnt-t-2-ff: var(--fnt-t);
  --fnt-t-2-ls: 0em;
  --fnt-t-2-w: 400;
  --fnt-t-2-tt: none;
  --fnt-t-2-s: 1.5rem;
  --fnt-t-2-lh: 1.3;
  --fnt-t-2-s-mtp: 1;
  --fnt-t-3-ff: var(--fnt-m);
  --fnt-t-3-ls: 0em;
  --fnt-t-3-w: 400;
  --fnt-t-3-tt: none;
  --fnt-t-3-s: 1.5rem;
  --fnt-t-3-lh: 1.3;
  --fnt-t-3-s-mtp: 1;
  --fnt-t-4-ff: var(--fnt-t);
  --fnt-t-4-ls: 0em;
  --fnt-t-4-w: 600;
  --fnt-t-4-tt: none;
  --fnt-t-4-s: 1.125rem;
  --fnt-t-4-lh: 1.2;
  --fnt-t-4-s-mtp: 1;
  --fnt-t-5-ff: var(--fnt-t);
  --fnt-t-5-ls: 0em;
  --fnt-t-5-w: 600;
  --fnt-t-5-tt: none;
  --fnt-t-5-s: 1rem;
  --fnt-t-5-lh: 1.2;
  --fnt-t-5-s-mtp: 1;
  --fnt-t-6-ff: var(--fnt-m);
  --fnt-t-6-ls: 0.5em;
  --fnt-t-6-w: 400;
  --fnt-t-6-tt: uppercase;
  --fnt-t-6-s: 0.75rem;
  --fnt-t-6-lh: 1.3;
  --fnt-t-6-s-mtp: 1;
  --fnt-t-itm-ff: var(--fnt-t);
  --fnt-t-itm-ls: 0em;
  --fnt-t-itm-w: 600;
  --fnt-t-itm-tt: none;
  --fnt-t-itm-s: 1.5rem;
  --fnt-t-itm-lh: 1.3;
  --fnt-t-itm-s-mtp: 1;
  --g-trn-sp: 0.3s;
  --g-trn-tf: ease;
  --mn-wd: 73rem;
  --mn-tn: 60rem;
  --mn-ch: 80ch;
  --full: 100%;
  --half: 50%;
  --third: 33.333%;
  --fourth: 25%;
  --fifth: 20%;
  --sixth: 16.666%;
  --seventh: 14.285%;
  --two-3rds: 66.667%;
  --three-fourths: 75%;
  --three-8ths: 37.5%;
  --five-8ths: 62.5%;
  --flx-gap: 4rem;
  --grd-sp: 1rem;
  --grd-sml-mpt: 0.4;
  --grd-lrg-mpt: 2;
  --grd-sp-sml: calc(var(--grd-sp) * var(--grd-sml-mpt));
  --grd-sp-lrg: calc(var(--grd-sp) * var(--grd-lrg-mpt));
  --grd-sp-dyn: var(--grd-sp);
  --bdr-stl: solid;
  --bdr-w: 1px;
  --bdr-clr-o: 0.1;
  --bdr-rds: 1.4rem;
  --hvr-trns: opacity var(--g-trn-sp) var(--g-trn-tf) 0s;
  --primary: #007FFD;
  --primary-alt: #CCE4FF;
  --secondary: #6D5AFF;
  --secondary-alt: #E2DEFF;
  --tertiary: #151231;
  --buttons: #007FFD;
  --white: #FFFFFF;
  --black: #000000;
  --valid: #23BF57;
  --ui-scroll-brd-rds: 12px;
  --ui-scroll-w: 0.278rem;
  --scrl-nv-mrg-tp: 2.75rem;

  font-size: var(--bdy-fnt-s);
  font-family: var(--fnt-m);
  line-height: var(--bdy-ln-ht);
  text-wrap: pretty;
  overflow-x: clip;

  *, *:before, *:after { box-sizing: border-box; }

  /* ---- Reset ---- */
  p { margin-block: 1rem; }
  p:first-child { margin-block-start: 0; }
  p:last-child { margin-block-end: 0; }
  ul { margin: 0; list-style: none; padding: 0; }
  a { text-decoration: none; transition: color var(--g-trn-sp) var(--g-trn-tf) 0s; }
  button {
    padding: 0; border: none; outline: none; cursor: pointer;
    font-size: inherit; text-align: inherit; font-family: inherit;
    line-height: inherit; background-color: transparent;
  }
  svg { width: 1em; height: 1em; display: block; fill: currentColor; }
  svg * { pointer-events: none; }
  figure { margin: 0; }
  picture { display: block; }
  picture source { width: 0; }
  picture img { width: 100%; }
  picture img[src*=".jpg"] { object-fit: cover; }
  picture img[src*=".png"]:not(.static-map) { object-fit: contain; }
  img, video { display: block; max-width: 100%; }
  video { object-fit: cover; }

  /* ---- Layout ---- */
  .rlt { position: relative; }
  .blk { display: block; }
  .bg {
    inset: 0; position: absolute; overflow: hidden;
  }
  .bg img, .bg video { width: 100%; height: 100%; position: absolute; }
  .full { width: var(--full); }
  .half { width: var(--half); }

  [class*="mn_"] {
    width: 100%; max-width: var(--mn-w, none);
    margin-inline: auto; position: relative;
  }
  @media screen and (width >= 1280px) {
    [class*="mn_"].mn_wd { --mn-w: var(--mn-wd); }
  }

  [class*="ta_"] { text-align: center; }
  @media screen and (width >= 1280px) {
    .ta_l-1280 { text-align: left; }
  }

  /* ---- Flex system ---- */
  [class*="flx"] {
    align-items: stretch; align-content: space-around; display: flex;
  }
  [class*="flx"][class*="flx-at-"]:not([class*="sw-"]) { display: block; }
  [class*="flx"]:is(.f_gp) > :is(:not([data-columns], .fit), :only-child), .ato { flex: 1 1 auto; }
  .fit { flex: 0 0 auto; }
  .str { align-self: stretch; }
  .f_c { justify-content: center; }
  .f_r { justify-content: flex-end; }
  .f_sb { justify-content: space-between; }
  .f_m { align-items: center; }
  .f_t { align-items: flex-start; }
  .f_b { align-items: flex-end; }
  .f_wrp { flex-wrap: wrap; }
  .f_rev { flex-direction: row-reverse; }
  .f_clm { flex-direction: column; }
  .f_nln { display: inline-flex; }
  .f_gp { column-gap: var(--flx-gap); }
  .f_gp > .half { width: calc(var(--half) - (var(--flx-gap) / 2)); }
  .f_gp > .third { width: calc(var(--third) - (var(--flx-gap) / 2)); }
  .f_gp > .two-thirds { width: calc(var(--two-3rds) - (var(--flx-gap) / 2)); }
  .f_gp > .three-8ths { width: calc(var(--three-8ths) - (var(--flx-gap) / 2)); }
  .f_gp > .five-8ths { width: calc(var(--five-8ths) - (var(--flx-gap) / 2)); }

  [class*="gp_sp"] { gap: var(--grd-sp-dyn); }
  [class*="gp_sp"]:not([class*="-sml"], [class*="-lrg"]) { --grd-sp-dyn: var(--grd-sp); }
  [class*="gp_sp"][class*="-sml"] { --grd-sp-dyn: var(--grd-sp-sml); }
  [class*="gp_sp"][class*="-lrg"] { --grd-sp-dyn: var(--grd-sp-lrg); }
  [class*="gp_sp"] > .half { width: calc(var(--half) - (var(--grd-sp-dyn) * 0.5)); }
  [class*="gp_sp"] > .third { width: calc(var(--third) - (var(--grd-sp-dyn) * 0.667)); }
  [class*="gp_sp"] > .two-thirds { width: calc(var(--two-3rds) - (var(--grd-sp-dyn) * 0.333)); }

  @media screen and (min-width: 700px) {
    [class*="flx"][class*="-at-700"]:not([class*="sw-"]) { display: flex; }
    [class*="flx"][class*="-at-700"]:not([class*="sw-"]) > * { margin-block: 0 !important; }
  }
  @media screen and (min-width: 1280px) {
    [class*="flx"][class*="-at-1280"]:not([class*="sw-"]) { display: flex; }
    [class*="flx"][class*="-at-1280"]:not([class*="sw-"]) > * { margin-block: 0 !important; }
  }
  @media screen and (max-width: 1279px) {
    [class*="flx"][class*="-at-1280"] > :not(svg, .full-mbl, .btn, .max-cnt) {
      width: 100% !important; max-width: 100% !important; margin-inline: 0;
    }
    [class*="flx"][class*="-at-1280"][class*="gp_sp"] > * + * { margin-top: var(--grd-sp-dyn); }
    .flx-at-1280.f_gp > * + * { margin-block-start: var(--g-pd-v); }
    .ta_l-1280 [class*="flx"] { justify-content: center; }
    .full-mbl {
      width: calc(100% + var(--g-pd-h) * 2) !important;
      margin-inline: calc(var(--g-pd-h) * -1) !important;
      border-radius: 0 !important;
    }
    .full-mbl:not(picture, .btn) { padding: calc(var(--g-pd-v) * 0.5) var(--g-pd-h); }
  }
  @media screen and (max-width: 699px) {
    [class*="flx"][class*="-at-700"] > :not(svg, .full-mbl, .btn, .max-cnt) {
      width: 100% !important; max-width: 100% !important; margin-inline: 0;
    }
    [class*="flx"][class*="-at-700"][class*="gp_sp"] > * + * { margin-top: var(--grd-sp-dyn); }
  }

  /* ---- Grid ---- */
  :has(> .grd) { container-type: inline-size; }
  .grd {
    --itm-val: 100;
    --itm-w: calc(var(--itm-val) * 1cqw);
    --itm-grw: 1;
    display: flex;
  }
  .grd[class*="gp_sp"] { --itm-w: calc(var(--itm-val) * 1cqw - (var(--grd-sp-dyn) * ((100 - var(--itm-val)) * .01))); }
  .grd > * { flex: var(--itm-grw) 0 var(--itm-w); }

  /* ---- Borders ---- */
  [class*="bdr_"] {
    border-color: hsl(from var(--bdr-clr, var(--text-color)) h s l / var(--bdr-clr-o));
    border-style: var(--bdr-stl); border-width: 0;
  }
  .bdr_a { border-width: var(--bdr-w); }
  .bdr_tp { border-top-width: var(--bdr-w); }
  .bdr_bt { border-bottom-width: var(--bdr-w); }
  .bdr-rds { border-radius: var(--bdr-rds); overflow: hidden; }

  /* ---- Typography ---- */
  [class*="fnt_"] { display: block; font-style: normal; word-break: break-word; }
  .fnt_t-big {
    font-family: var(--fnt-t-big-ff); font-weight: var(--fnt-t-big-w);
    line-height: var(--fnt-t-big-lh); text-transform: var(--fnt-t-big-tt);
    letter-spacing: var(--fnt-t-big-ls);
    font-size: calc(var(--fnt-t-big-s) * var(--fnt-t-big-s-mtp));
  }
  .fnt_t-big > :is(strong, b) { display: block; }
  .fnt_t-co {
    font-family: var(--fnt-t-co-ff); font-weight: var(--fnt-t-co-w);
    line-height: var(--fnt-t-co-lh); text-transform: var(--fnt-t-co-tt);
    letter-spacing: var(--fnt-t-co-ls);
    font-size: calc(var(--fnt-t-co-s) * var(--fnt-t-co-s-mtp));
  }
  .fnt_t-co > :is(strong, b) { display: block; }
  .fnt_t-co > :is(em, i) { display: block; font-weight: 700; font-style: inherit; }

  h1 > :is(i, em),
  section header > small:first-child,
  .cnt-stl > :first-child:is(h1, h2, h3, h4, h5, h6) > :is(i, em) {
    font-family: var(--fnt-t-k-ff); font-weight: var(--fnt-t-k-w);
    line-height: var(--fnt-t-k-lh); text-transform: var(--fnt-t-k-tt);
    letter-spacing: var(--fnt-t-k-ls);
    font-size: calc(var(--fnt-t-k-s) * var(--fnt-t-k-s-mtp));
    font-style: normal; display: inline-block; margin-block-end: 0.5rem;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  h1, h2, h4, h5, [class*="fnt_t"] { margin-block: 1rem; }
  h1:first-child, h2:first-child, h4:first-child, h5:first-child,
  [class*="fnt_t"]:first-child { margin-block-start: 0; }
  h1:last-child, h2:last-child, h4:last-child, h5:last-child,
  [class*="fnt_t"]:last-child { margin-block-end: 0; }
  .flx:not(.f_clm) > h1, .flx:not(.f_clm) > h2, .flx:not(.f_clm) > h3,
  .flx:not(.f_clm) > h4, .flx:not(.f_clm) > h5, .flx:not(.f_clm) > h6,
  .flx:not(.f_clm) > [class*="fnt_t"],
  .grd > h1, .grd > h2, .grd > h3, .grd > h4, .grd > h5, .grd > h6,
  .grd > [class*="fnt_t"] { margin-block: 0; }

  h1, .fnt_t-1, section header > small + :not(a, [class*="fnt_"]),
  .cnt-stl > :first-child:is(h1, h2, h3, h4, h5, h6):not([class*="fnt_"]) {
    font-family: var(--fnt-t-1-ff); font-weight: var(--fnt-t-1-w);
    line-height: var(--fnt-t-1-lh); text-transform: var(--fnt-t-1-tt);
    letter-spacing: var(--fnt-t-1-ls);
    font-size: calc(var(--fnt-t-1-s) * var(--fnt-t-1-s-mtp));
  }
  h1 > :is(strong, b), .fnt_t-1 > :is(strong, b),
  section header > small + :not(a, [class*="fnt_"]) > :is(strong, b) {
    font-weight: inherit; display: inline-block;
  }
  section:not(.lt-bg.alt-bg) h1 > :is(strong, b),
  section:not(.lt-bg.alt-bg) .fnt_t-1 > :is(strong, b),
  section:not(.lt-bg.alt-bg) header > small + :not(a, [class*="fnt_"]) > :is(strong, b) {
    border-radius: 0.75rem; padding-inline: 0.375em; margin-block: 0.1em;
  }

  h2, .fnt_t-2, section header > small + :not(a) + :not([class*="fnt_"], p) {
    font-family: var(--fnt-t-2-ff); font-weight: var(--fnt-t-2-w);
    line-height: var(--fnt-t-2-lh); text-transform: var(--fnt-t-2-tt);
    letter-spacing: var(--fnt-t-2-ls);
    font-size: calc(var(--fnt-t-2-s) * var(--fnt-t-2-s-mtp));
  }
  h4, .fnt_t-4 {
    font-family: var(--fnt-t-4-ff); font-weight: var(--fnt-t-4-w);
    line-height: var(--fnt-t-4-lh); text-transform: var(--fnt-t-4-tt);
    letter-spacing: var(--fnt-t-4-ls);
    font-size: calc(var(--fnt-t-4-s) * var(--fnt-t-4-s-mtp));
  }
  .fnt_t-6 {
    font-family: var(--fnt-m); font-size: 0.75rem; font-weight: 400;
    line-height: 1.2; text-transform: uppercase; letter-spacing: 0.4em;
  }

  /* ---- Responsive font scaling ---- */
  @media screen and (width >= 700px) {
    --fnt-t-big-s-mtp: 1.5;
    --fnt-t-co-s-mtp: 1.15;
    --fnt-t-sb-s-mtp: 1.15;
    --fnt-t-1-s-mtp: 1.15;
    --fnt-t-2-s-mtp: 1.1;
  }
  @media screen and (width >= 1280px) {
    --g-pd-v: 7rem;
    --fnt-t-big-s-mtp: 2;
    --fnt-t-co-s-mtp: 1.35;
    --fnt-t-sb-s-mtp: 1.3;
    --fnt-t-1-s-mtp: 1.2;
    --fnt-t-2-s-mtp: 1.2;
    --fnt-t-4-s-mtp: 1;
  }
  @media screen and (width >= 1500px) {
    --fnt-t-big-s-mtp: 2.5;
    --fnt-t-co-s-mtp: 1.55;
    --fnt-t-sb-s-mtp: 1.5;
    --fnt-t-1-s-mtp: 1.5;
    --fnt-t-2-s-mtp: 1.3;
    --fnt-t-4-s-mtp: 1.066;
  }
  @media screen and (width >= 1920px) {
    --fnt-t-co-s-mtp: 1.849;
    --fnt-t-sb-s-mtp: 1.6;
    --fnt-t-1-s-mtp: 1.6;
    --fnt-t-2-s-mtp: 1.334;
  }

  /* ---- Sections ---- */
  section {
    padding: var(--g-pd-v) var(--g-pd-h); position: relative;
  }
  section header { position: relative; z-index: 1; }
  section header:not(:last-child) { margin-block-end: var(--hdr-mrg-bt); }
  @media screen and (width < 1500px) {
    section header:not(:last-child) br { display: none; }
  }

  /* ---- Background box ---- */
  .bg-bx {
    backdrop-filter: blur(var(--bg-bx-blr));
    border-radius: var(--bg-bx-bdr-rds);
    position: relative; z-index: 1; overflow: hidden;
    padding: var(--bg-bx-pd-v) var(--bg-bx-pd-h);
  }
  .bg-bx .bg:not(:only-child)::after {
    content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(to top, hsl(from var(--inner-theme) h s l / 0.7) 35%, transparent 65%);
  }
  .bg-bx .bg:not(:only-child) :is(video, img) { opacity: 0.7; }

  /* ---- Theme: Light backgrounds ---- */
  .wht-bg, .lt-bg {
    --text-color: var(--black);
    --link: var(--primary);
    --link-hover: inherit;
    --bdr-clr-o: 0.1;
    --ttl-clr-1: var(--secondary);
    --ttl-clr-2: var(--primary);
    --background: var(--white);
    color: var(--text-color);
    background-color: var(--background);
  }
  .lt-bg {
    --background-gradient-clr: hsl(from var(--primary) h s l / 0.1);
    background-image: linear-gradient(180deg, var(--background), var(--background-gradient-clr));
  }
  .wht-bg .bg-bx, .lt-bg .bg-bx {
    --inner-theme: var(--secondary-alt);
    --inner-gradient-clr-1: var(--secondary-alt);
    --inner-gradient-clr-2: var(--primary-alt);
    --inner-gradient: linear-gradient(180deg, var(--inner-gradient-clr-1), var(--inner-gradient-clr-2));
    color: var(--text-color); background-color: var(--inner-theme);
  }
  .wht-bg .alt-bg, .lt-bg .alt-bg {
    --inner-theme: var(--primary-alt);
    --inner-gradient-dir: 90deg;
  }
  .wht-bg a, .wht-bg button, .lt-bg a, .lt-bg button { color: var(--link); }
  .wht-bg a:is(:hover, :focus-visible), .lt-bg a:is(:hover, :focus-visible) { color: var(--link-hover); }
  .wht-bg .clr-txt, .lt-bg .clr-txt { color: var(--text-color); }

  .wht-bg:not(.lt-bg.alt-bg) h1 > :is(strong, b),
  .wht-bg:not(.lt-bg.alt-bg) header > small + :not(a, [class*="fnt_"]) > :is(strong, b) {
    --ttl-clr-1: var(--secondary-alt);
    --ttl-clr-2: var(--primary-alt);
    --text-color: var(--black);
  }

  .wht-bg h1 > :is(i, em), .wht-bg header > small:first-child,
  .wht-bg .cnt-stl > :first-child:is(h1, h2, h3, h4, h5, h6) > :is(i, em),
  .lt-bg h1 > :is(i, em), .lt-bg header > small:first-child,
  .lt-bg .cnt-stl > :first-child:is(h1, h2, h3, h4, h5, h6) > :is(i, em) {
    background-image: linear-gradient(to right, var(--ttl-clr-1), var(--ttl-clr-2));
  }
  .wht-bg h1, .wht-bg h2, .wht-bg h4, .wht-bg h5, .wht-bg [class*="fnt_t"],
  .lt-bg h1, .lt-bg h2, .lt-bg h4, .lt-bg h5, .lt-bg [class*="fnt_t"] {
    color: var(--text-color);
  }
  .wht-bg h1 > :is(strong, b), .lt-bg h1 > :is(strong, b),
  .wht-bg .fnt_t-1 > :is(strong, b), .lt-bg .fnt_t-1 > :is(strong, b),
  .wht-bg header > small + :not(a, [class*="fnt_"]) > :is(strong, b),
  .lt-bg header > small + :not(a, [class*="fnt_"]) > :is(strong, b) {
    color: var(--text-color);
    background-image: linear-gradient(to right, var(--ttl-clr-1), var(--ttl-clr-2));
  }

  /* ---- Theme: Dark backgrounds ---- */
  .blk-bg, .dk-bg {
    --text-color: var(--white);
    --link: var(--primary);
    --link-hover: inherit;
    --bdr-clr-o: 0.3;
    --ttl-clr-1: var(--secondary);
    --ttl-clr-2: var(--primary);
    --background: var(--black);
    --background-gradient-clr-1: hsl(from var(--secondary) h s l / 0.2);
    --background-gradient-clr-2: hsl(from var(--primary) h s l / 0.2);
    color: var(--text-color);
    background-color: var(--background);
    background-image:
      radial-gradient(67% 45% at 0% 40%, var(--background-gradient-clr-1), transparent),
      radial-gradient(45% 48% at 100% 50%, var(--background-gradient-clr-2), transparent);
  }
  .dk-bg.alt-bg {
    background-image:
      radial-gradient(62% 35% at 40% 35%, var(--background-gradient-clr-1), transparent),
      radial-gradient(57% 46% at 50% 43%, var(--background-gradient-clr-2), transparent);
  }
  .blk-bg .bg-bx, .dk-bg .bg-bx {
    --inner-theme: hsl(from var(--black) h s l / 0.4);
    --inner-gradient-clr-1: hsl(from var(--secondary) h s l / 0.5);
    --inner-gradient-clr-2: hsl(from var(--primary) h s l / 0.5);
    --inner-gradient: linear-gradient(180deg, var(--inner-gradient-clr-1), var(--inner-gradient-clr-2));
    color: var(--text-color); background-color: var(--inner-theme);
  }
  .blk-bg .bg-bx:not(.bdr-bg, .no-bg), .dk-bg .bg-bx:not(.bdr-bg, .no-bg) {
    background-image: var(--inner-gradient);
  }
  .blk-bg .ulk-bg, .dk-bg .ulk-bg {
    --inner-theme: var(--white);
    --inner-gradient: none;
    color: var(--black); background-color: var(--white);
  }
  .blk-bg .no-bg, .dk-bg .no-bg { --inner-theme: var(--black); }
  .blk-bg a, .blk-bg button, .dk-bg a, .dk-bg button { color: var(--link); }
  .blk-bg a:is(:hover, :focus-visible), .dk-bg a:is(:hover, :focus-visible) { color: var(--link-hover); }
  .blk-bg h1, .blk-bg h2, .blk-bg h4, .blk-bg h5, .blk-bg [class*="fnt_t"],
  .dk-bg h1, .dk-bg h2, .dk-bg h4, .dk-bg h5, .dk-bg [class*="fnt_t"] {
    color: var(--text-color);
  }
  .blk-bg .fnt_t-big, .dk-bg .fnt_t-big { --text-color: var(--primary-alt); }
  .blk-bg .fnt_t-big :is(strong, b), .dk-bg .fnt_t-big :is(strong, b) { --text-color: var(--white); color: var(--white); }
  .blk-bg .fnt_t-co > :is(strong, b), .dk-bg .fnt_t-co > :is(strong, b) { --text-color: var(--primary-alt); }
  .blk-bg .fnt_t-1 > :is(strong, b), .dk-bg .fnt_t-1 > :is(strong, b),
  .blk-bg header > :first-child:not(small, a, [class*="fnt_"]) > :is(strong, b),
  .dk-bg header > :first-child:not(small, a, [class*="fnt_"]) > :is(strong, b) {
    --ttl-clr-1: var(--secondary-alt);
    --ttl-clr-2: var(--primary-alt);
    --text-color: var(--black);
  }
  .blk-bg h1 > :is(i, em), .blk-bg header > small:first-child,
  .dk-bg h1 > :is(i, em), .dk-bg header > small:first-child {
    background-image: linear-gradient(to right, var(--ttl-clr-1), var(--ttl-clr-2));
  }
  .blk-bg h1 > :is(strong, b), .dk-bg h1 > :is(strong, b),
  .blk-bg .fnt_t-1 > :is(strong, b), .dk-bg .fnt_t-1 > :is(strong, b) {
    color: var(--text-color);
    background-image: linear-gradient(to right, var(--ttl-clr-1), var(--ttl-clr-2));
  }

  /* ---- Glow animation on dark ---- */
  .anm_glw:is(.blk-bg, .dk-bg) :is(.fnt_t-co, .fnt_t-sb) > :is(em, i) {
    --ttl-sdw: 0 0 0.234em hsl(from var(--primary) h s l / 0.65),
               0 0 0.234em hsl(from var(--primary) h s l / 0.65),
               0 0 0.234em hsl(from var(--primary) h s l / 0.65);
  }

  /* ---- Button ---- */
  .btn {
    --btn-icn-s: 0.667em;
    position: relative; z-index: 1; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1; column-gap: 0.4em; text-align: center;
    font-size: var(--btn-fnt-s, 0.9rem); font-weight: var(--btn-fnt-w, 600);
    font-family: var(--fnt-t);
    border: solid var(--btn-bdr-w, 0) currentColor;
    border-radius: var(--btn-rds, 0);
  }
  .btn.v1 {
    --btn-rds: 5em;
    color: var(--btn-clr, var(--white));
    background-color: var(--btn-bg, var(--buttons));
    padding: var(--btn-pd-v, 1em) var(--btn-pd-h, 1.111em);
    transition: box-shadow var(--g-trn-sp) var(--g-trn-tf);
  }
  @media (hover: hover) and (pointer: fine) {
    .btn.v1:is(:hover, :focus-visible) {
      box-shadow: 0 0 0 0.35rem hsl(from var(--btn-sdw, var(--btn-bg, var(--buttons))) h s l / 0.25);
    }
  }
  @media screen and (width < 700px) {
    .btn.v1 { width: 100%; }
  }

  /* ---- Content style ---- */
  .cnt-stl ul { padding-left: 1.5rem; list-style-type: none; }
  .cnt-stl li { position: relative; }
  .cnt-stl ul li::before {
    content: ''; position: absolute; left: -1.5rem; top: 10px;
    height: 16px; width: 16px;
    background: linear-gradient(180deg, var(--secondary) 0%, var(--primary) 100%);
    border-radius: 50%; border: solid 3px #B2D6FF;
  }
  .cnt-stl li + li { margin-block-start: 1.6rem; }

  /* ---- Mainstage ---- */
  .mstg {
    --g-pd-v: 2.8rem;
    --mstg-h: 65svh;
    --mstg-bg-o: 0.6;
    min-height: var(--mstg-h);
  }
  .mstg > .bg :is(img, video) { opacity: var(--mstg-bg-o); }
  .mstg .inf ul { margin-block-start: 2.5rem; }
  @media screen and (width >= 1280px) {
    .mstg { --mstg-h: max(35rem, 100svh); }
  }

  /* ---- Content section ---- */
  .cnt.v1 .btn.v1 { margin-block-start: 1.6rem; }
  @media screen and (width < 1280px) {
    .cnt.v1 [class*="mn_"] > div:has(figure):not(:has(video, blockquote)) {
      display: none; visibility: hidden;
    }
  }

  /* ---- Callout ---- */
  .clt.v5 .btn.v1 { margin-block-start: 2.5rem; }
  @media screen and (width >= 1280px) {
    .clt.v5 { --g-pd-v: 10rem; }
  }

  /* ---- Services ---- */
  .srv-itm {
    --srv-itm-icn-s: 1.8rem;
    --srv-itm-arw-s: 0.6rem;
    --srv-itm-sp: 0.8rem;
  }
  .srv-itm.bg-bx { --bg-bx-pd-v: 0.8rem; --bg-bx-pd-h: 1.2rem; }
  .srv-itm svg:first-child { font-size: var(--srv-itm-icn-s); margin-inline-end: var(--srv-itm-sp); }
  .srv-itm svg:last-child { font-size: var(--srv-itm-arw-s); margin-inline-start: var(--srv-itm-sp); }

  .srv.v5 {
    --srv-v5-bg-ovly-o: 0.4;
    --srv-v5-lst-w: 23.5rem;
    --srv-v5-lst-sp: 0.4rem;
  }
  .srv.v5 .bg::after {
    background-image: linear-gradient(to right, var(--inner-theme), transparent);
    opacity: var(--srv-v5-bg-ovly-o);
  }
  .srv.v5 [class*="mn_"] > .bg-bx {
    --bg-bx-pd-v: 2.8rem;
    --bg-bx-pd-h: 2.8rem;
    container-type: inline-size;
  }
  .srv.v5 [class*="mn_"] > .bg-bx > strong { z-index: 1; }
  .srv.v5 [class*="mn_"] > .bg-bx > ul > li + li { margin-block-start: var(--srv-v5-lst-sp); }
  @media screen and (width >= 1280px) {
    .srv.v5 [class*="mn_"] > .bg-bx > ul {
      max-width: var(--srv-v5-lst-w);
    }
    .srv.v5 [class*="mn_"] > .bg-bx > ul > li { padding-inline-end: var(--srv-v5-lst-sp); }
  }
  .srv.v5 li .bg {
    width: var(--mn-w); height: 100cqh; top: auto;
    bottom: calc(var(--bg-bx-pd-v) * -1); left: calc(var(--bg-bx-pd-h) * -1);
    opacity: 0; pointer-events: none; background-color: var(--inner-theme);
    transition: opacity var(--g-trn-sp) var(--g-trn-tf), scale 4s var(--g-trn-tf);
  }
  .srv.v5 li:is(:hover, :focus-visible) .bg { opacity: 1; scale: 1.05; }
  .srv.v5 li :is(a, button).bg-bx { --bg-bx-pd-v: 1.8rem; --bg-bx-pd-h: 1.2rem; }
  .srv.v5 li ul {
    --bg-bx-pd-v: 1rem; --bg-bx-pd-h: 1rem;
    transition: var(--g-trn-sp) var(--g-trn-tf);
  }
  .srv.v5 li ul li a {
    padding-block: 0.8rem;
    transition: background-color var(--g-trn-sp) var(--g-trn-tf);
  }
  .srv.v5 li ul li a:is(:hover, :focus-visible) {
    background-color: hsl(from var(--inner-theme) h s l / 0.2);
  }
  @media screen and (width >= 1280px) {
    .srv.v5 li ul {
      display: flex; opacity: 0; position: absolute;
      top: 0; left: 100%; width: max-content; height: 100%;
      translate: 0.5rem 0;
    }
    .srv.v5 li:is(:hover, :focus-visible) ul {
      opacity: 1; visibility: visible; translate: 0 0;
    }
    .srv.v5 li ul li a { border: none; border-radius: 0.4rem; }
  }
  @media screen and (width < 1280px) {
    .srv.v5 li ul { margin-block-start: var(--srv-v5-lst-sp); }
  }

  /* ---- Solutions ---- */
  .sln-itm {
    --bg-bx-pd-v: 2.4rem; --bg-bx-pd-h: 2rem;
    --sln-itm-cnt-w: 50rem;
  }
  .sln-itm[class*="flx"] { --sln-itm-cnt-w: 30rem; }
  .sln-itm[class*="flx"] img { width: auto; }
  .sln-itm[class*="flx"] .btn { margin-block-start: 1.2rem; }
  .sln-itm picture:not(.bg) { margin-block: 1.2rem; }
  .sln-itm picture:not(.bg):first-child { margin-block-start: 0; }
  .sln-itm picture:not(.bg):last-child { margin-block-end: 0; }
  .sln-itm .cnt-stl { max-width: var(--sln-itm-cnt-w); }
  @media screen and (width >= 1280px) {
    .sln-itm:not(:has(.bg)) { --bg-bx-pd-h: 4rem; }
    .sln-itm[class*="flx"] img {
      max-width: calc(100% + var(--bg-bx-pd-h));
      margin: calc(var(--bg-bx-pd-v) * -1) calc(var(--bg-bx-pd-h) * -1) calc(var(--bg-bx-pd-v) * -1) 0;
    }
  }
  @media screen and (width >= 1500px) {
    .sln-itm[class*="flx"] img { max-height: 32rem; max-width: calc(135% + var(--bg-bx-pd-h)); }
  }

  .sln-icn {
    --sln-icn-s: 1.6rem; --sln-icn-w: 2em; --sln-icn-rds: 50%;
    font-size: var(--sln-icn-s); width: var(--sln-icn-w); height: var(--sln-icn-w);
    color: var(--white); border-radius: var(--sln-icn-rds);
    background-image: linear-gradient(to bottom, var(--secondary), var(--primary));
  }
  .sln-tag {
    font-size: 0.9rem; font-weight: 600; font-family: var(--fnt-t);
    border-radius: 0.444em; padding: 0.444em 0.889em; margin-block-end: 1rem;
    border: solid 1px var(--primary);
    background-color: hsl(from var(--white) h s l / 0.1);
  }
  .sln-tag .sln-icn { --sln-icn-s: 0.6rem; --sln-icn-w: 2em; --sln-icn-rds: 0.5em; }
  .sln.v7 li { max-width: 100%; }
  .sln.v7 li img { object-position: 0 50%; }

  /* ---- Scroller / Carousel ---- */
  [data-role="scroller"].s-active [data-role="list"] {
    overflow-x: auto; scroll-behavior: smooth;
    flex-wrap: nowrap !important; justify-content: flex-start;
    will-change: scroll-position;
    -ms-overflow-style: none; scrollbar-width: none;
  }
  [data-role="scroller"].s-active [data-role="list"]::-webkit-scrollbar { display: none; }
  [data-role="scroller"].s-active:not(.msr) [data-role="list"] { scroll-snap-type: x mandatory; }

  .s-active .off-scr {
    margin-inline: calc(var(--g-pd-h) * -1);
  }
  .s-active .off-scr::before, .s-active .off-scr::after {
    content: ""; display: block; width: var(--g-pd-h); flex-shrink: 0; scroll-snap-align: center;
  }
  .s-active .off-scr[class*="gp_sp"]::before,
  .s-active .off-scr[class*="gp_sp"]::after {
    width: calc(var(--g-pd-h) - var(--grd-sp-dyn));
  }
  .s-active .off-scr [data-role="item"] { scroll-snap-align: center; }
  @media screen and (width >= 1280px) {
    .s-active .off-scr {
      margin-inline: calc((100svw - var(--mn-w)) * -0.5);
    }
    .s-active .off-scr::before, .s-active .off-scr::after {
      width: calc((100svw - var(--mn-w)) * 0.5);
    }
    .s-active .off-scr[class*="gp_sp"]::before,
    .s-active .off-scr[class*="gp_sp"]::after {
      width: calc((100svw - var(--mn-w)) * 0.5 - var(--grd-sp-dyn));
    }
  }

  [data-role="arrows"] {
    --sl-sa-s: 0.8rem; --scrl-nv-rds: 0.5rem;
    --scrl-nv-pd-v: 0.7rem; --scrl-nv-pd-h: 0.75rem;
    --scrl-nv-gp: 1.2rem;
    color: var(--text-color); font-size: var(--sl-sa-s);
    margin-block-start: var(--scrl-nv-mrg-tp);
  }
  [data-role="arrows"]:has([data-role="thumbList"]) {
    --scrl-nv-rds: 5rem; --scrl-nv-pd-v: 0.9rem; --scrl-nv-pd-h: 1.2rem;
  }
  [data-role="arrows"] > div {
    gap: var(--scrl-nv-gp);
    padding: var(--scrl-nv-pd-v) var(--scrl-nv-pd-h);
    border-radius: var(--scrl-nv-rds);
  }
  .wht-bg [data-role="arrows"] > div,
  .lt-bg [data-role="arrows"] > div { background-color: var(--background); }

  [data-action="PlayPause"] {
    color: var(--white); background-color: var(--buttons);
    border-radius: 50%; padding: 0.3rem;
    transition: background-color var(--g-trn-sp) var(--g-trn-tf);
  }
  [data-action="PlayPause"] svg { font-size: 0.4rem; display: none; }
  [data-action="PlayPause"] svg.pse-icn { display: block; }
  [data-action="PlayPause"]:is(:hover, :focus-visible) {
    color: var(--white); background-color: #00407F;
  }
  [data-auto-advance="true"] [data-action="PlayPause"] { display: block; visibility: visible; }

  [data-role="thumbList"] {
    --ato-adv-thb-dur: 19.5s;
  }
  [data-role="thumbList"] button {
    --thmb-o: 0.25; display: block; color: inherit;
    width: 0.5rem; height: 0.5rem; position: relative; overflow: hidden;
    background-color: hsl(from var(--text-color) h s l / var(--thmb-o));
    border-radius: 0.5rem;
  }
  [data-role="thumbList"] button.s-active { pointer-events: none; }
  .wht-bg [data-role="thumbList"] button:is(.s-active, :hover, :focus-visible),
  .lt-bg [data-role="thumbList"] button:is(.s-active, :hover, :focus-visible) { --thmb-o: 1; }
  [data-auto-advance="true"] [data-role="thumbList"] button {
    transition: width 0.2s ease, background-color var(--g-trn-sp) var(--g-trn-tf);
  }
  [data-auto-advance="true"] [data-role="thumbList"] button::after {
    content: ""; position: absolute; top: 0; left: 0;
    width: 0; height: 100%; border-radius: inherit;
    background-color: var(--buttons);
  }
  [data-auto-advance="true"] [data-role="thumbList"] button.s-active {
    --thmb-o: 0.25; width: 3.2rem;
    background-color: hsl(from var(--text-color) h s l / var(--thmb-o));
  }
  [data-auto-advance="true"] [data-role="thumbList"] button.s-active::after {
    animation: pl-at2-timerThumb var(--ato-adv-thb-dur) linear forwards;
  }

  /* ---- Contact ---- */
  .ctc.v1 .bg-bx:not(.no-bg) { padding: 2.5rem; }
  @media screen and (width >= 1280px) {
    .ctc.v1 .bg-bx:not(.no-bg) { padding: 3.111rem; }
  }

  /* ---- Hover effects ---- */
  .hvr_bdr-bg::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    border: solid var(--bg-bx-bdr-w) transparent;
    mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    background-image: linear-gradient(to top, var(--secondary), var(--primary));
    opacity: 0; transition: var(--hvr-trns);
  }
  @media (hover: hover) and (pointer: fine) {
    a:is(:hover, :focus-visible) .hvr_bdr-bg::before,
    .hvr_bdr-bg:is(:hover, :focus-visible)::before { opacity: 1; }
  }
  .hvr_grd-bg::before {
    content: ""; position: absolute; inset: 0; opacity: 0;
    background-image: var(--inner-gradient); z-index: -1;
    transition: var(--hvr-trns);
  }
  @media (hover: hover) and (pointer: fine) {
    a:is(:hover, :focus-visible) .hvr_grd-bg::before,
    .hvr_grd-bg:is(:hover, :focus-visible)::before { opacity: 1; }
  }

  /* ---- Scroll-driven animations ---- */
  @media (prefers-reduced-motion: no-preference) and (width >= 1280px) {
    [class*="anm_itm"] {
      --animation-amt: 5rem;
      opacity: 0;
      animation: pl-at2-anmItem linear forwards;
      animation-timeline: view();
      animation-range-start: entry;
      animation-range-end: 45svh;
    }
    [class*="anm_itm"]:is(.anm_itm-up, .anm_itm-dwn) { translate: 0 var(--animation-sp); }
    [class*="anm_itm"].anm_itm-up { --animation-sp: var(--animation-amt); }
    [class*="anm_itm"]:is(.anm_itm-lt, .anm_itm-rt) { translate: var(--animation-sp) 0; }
    [class*="anm_itm"].anm_itm-lt { --animation-sp: var(--animation-amt); }
    [class*="anm_itm"].anm_itm-rt { --animation-sp: calc(var(--animation-amt) * -1); }

    [class*="mn_"].f_rev .anm_itm-lt { --animation-sp: calc(var(--animation-amt) * -1); }
    [class*="mn_"].f_rev .anm_itm-rt { --animation-sp: var(--animation-amt); }

    .anm_glw:is(.blk-bg, .dk-bg)::before {
      content: ""; position: absolute; top: 0; left: 50%;
      width: calc(100% - var(--g-pd-h) * 2); height: var(--g-pd-v);
      translate: -50% 0; transform: scaleY(0); transform-origin: 50% 0;
      background-image: radial-gradient(at 30% 0, var(--primary), transparent 55%),
                         radial-gradient(at 65% 0, var(--secondary), transparent 55%);
      filter: blur(1rem);
      animation: pl-at2-anmGlow linear forwards;
      animation-timeline: view(); animation-range-start: entry; animation-range-end: 75svh;
    }
    .anm_glw:is(.blk-bg, .dk-bg) :is(.fnt_t-co, .fnt_t-sb) > :is(em, i) {
      text-shadow: none;
      animation: pl-at2-anmGlowText linear forwards;
      animation-timeline: view(); animation-range-start: entry; animation-range-end: 50svh;
    }

    .mstg {
      --mstg-anm-dly: 0.5s;
    }
    .mstg .inf > *, .mstg .inf > div > * {
      opacity: 0; translate: 0 2rem;
      animation: pl-at2-mstgItm 0.75s ease-in-out forwards;
    }
    .mstg .inf > *:not(:first-child), .mstg .inf > div > *:not(:first-child) {
      animation-delay: var(--mstg-anm-dly);
    }
  }

  /* ---- Reduced motion ---- */
  @media (prefers-reduced-motion: reduce) {
    *, *:before, *:after { transition: none !important; }
  }

  /* ---- SVG gradient definition ---- */
  .grd-svg { fill: url(#pl-at2-svgGradient); }

  /* ---- El-panel tabs ---- */
  .el-panel:not(.active) { opacity: 0; display: none; visibility: hidden; }

  /* ---- Form basics ---- */
  input, select {
    height: 100%; outline: none; font-weight: normal; text-transform: none;
  }
  select { appearance: none; }
  :invalid, input:invalid { box-shadow: none; }
  label { display: block; }
}