/*
Theme Name: Luxweb
Theme URI: https://luxweb.ge/
Description: Native Gutenberg reproduction of the Luxweb.ge website.
Author: Luxweb
Template: twentytwentyfive
Version: 3.26.174
Requires at least: 6.7
Requires PHP: 8.2
Text Domain: luxweb
*/

/* FiraGO carries Georgian and Latin in one design, in real weights.

   Before this the body was set in a face with a single weight, so every bold
   was drawn by the browser rather than by the type designer, and Latin came
   from a second family with a unicode-range splitting the two apart. That
   split put a seam through anything that mixed them, which on a Georgian site
   is most things: a price, a date, a product name. One family with both
   scripts removes the seam and the fake bold at the same time, and it brings
   the lari sign, which neither of the Georgian faces had.

   The files are cut down to Georgian, Latin, digits, punctuation and currency,
   which takes them from 250KB each to 35KB: the two of them together weigh
   what the two families they replace used to. */
@font-face {
  font-family: "FiraGO";
  src: url("assets/reference/fonts/firago-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "FiraGO";
  src: url("assets/reference/fonts/firago-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
}

/* Regular headings pair the Georgian caps face with FiraGO Latin. The chunky
   Dino display family has its own separate companion below. */
@font-face {
  font-family: "FiraGO Latin";
  src: url("assets/reference/fonts/firago-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+2000-206F, U+2070-209F, U+20A0-20BF, U+2122, U+2190-2193, U+2212;
}

@font-face {
  font-family: "FiraGO Latin";
  src: url("assets/reference/fonts/firago-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+2000-206F, U+2070-209F, U+20A0-20BF, U+2122, U+2190-2193, U+2212;
}

@font-face {
  font-family: "BPG Mrgvlovani Caps";
  src: url("assets/reference/fonts/bpg-mrgvlovani-caps.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

/* Dino supplies Georgian and its own digits, but has no Latin alphabet.
   Its Latin companion uses genuine Heavy outlines at the display family's
   normal CSS weight, so Georgian is never synthetically emboldened. This
   alias leaves the upstream font binary unchanged; see OFL-FiraGO.txt. */
@font-face {
  font-family: "Lux Display Latin";
  src: url("assets/reference/fonts/FiraGO-Heavy.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+2000-206F, U+2070-209F, U+20A0-20BF, U+2122, U+2190-2193, U+2212;
}

/* Canonical breakpoints:
   portrait 0-477, landscape 478-767, tablet 768-1023,
   desktop 1024-1439, large 1440-1919, extra-large 1920+. */
:root {
  --lux-dark: #020a1c;
  --lux-blue: #1878f1;
  --lux-blue-deep: #1568e0;
  --lux-active: #0091fc;
  --lux-glow: #3b9eff;
  --lux-surface: #fdfdfd;
  --lux-paper: #f5f5f5;
  --lux-soft-surface: var(--wp--preset--color--neutral-surface, #f3f4f6);
  --lux-text: #2c2d2d;
  --lux-white: #fff;
  --lux-content: 1440px;
  --lux-article-measure: 750px;
  --lux-article-padding: clamp(22px, 2vw, 32px);
  --lux-article-sidebar: 360px;
  --lux-article-gap: clamp(28px, 3vw, 40px);
  --lux-blog-cta-surface: var(--lux-blue-surface);
  --lux-blog-cta-copy: var(--lux-white);
  --lux-blog-cta-button-surface: var(--lux-blue-deep);
  --lux-blog-cta-button-copy: var(--lux-white);
  --lux-blog-cta-shadow: 0 14px 34px rgba(2, 10, 28, 0.12);
  --lux-page-gutter: 18px;
  --lux-gap: 20px;
  --lux-transition: 220ms ease;
  --lux-type-meta: 14px;
  --lux-type-small: 15px;
  --lux-type-body: clamp(16px, calc(15.5px + 0.1vw), 17px);
  --lux-type-lead: clamp(17px, calc(16.5px + 0.1vw), 18px);
  --lux-type-nav: 16px;
  --lux-type-button: clamp(16px, calc(15.5px + 0.1vw), 17px);
  --lux-type-card-title: clamp(18px, 1.55vw, 22px);
  --lux-type-person-name: clamp(18px, 1.4vw, 20px);
  --lux-type-section-title: clamp(26px, 2.5vw, 36px);
  --lux-type-hero: clamp(28px, 3.35vw, 48px);
  --lux-type-faq: clamp(16px, calc(15.5px + 0.1vw), 17px);
  --lux-type-footer-title: 16px;
  --lux-type-footer: 15px;
  --lux-type-copyright: clamp(13px, calc(12.5px + 0.1vw), 14px);
  --lux-leading-body: 1.65;
  --lux-leading-lead: 1.6;
  --lux-leading-title: 1.3;
  --lux-leading-section: 1.2;
  --lux-leading-hero: 1.1;
  --lux-font-display: "Dino Georgian Unicode", "Lux Display Latin", Arial, sans-serif;
  --lux-weight-heading: 400;
  --lux-mockup-image-surface: #eaf0f7;
  --lux-mockup-caption-surface: var(--lux-blue-surface);
  --lux-mockup-ink: var(--lux-white);
  --lux-mockup-line: rgba(255, 255, 255, 0.18);
  --lux-mockup-shadow: 0 16px 40px rgba(2, 10, 28, 0.18);
  --lux-project-browser-surface: var(--lux-blue-surface);
  --lux-project-browser-ink: var(--lux-white);
  --lux-project-browser-muted: #bed0e5;
  --lux-project-browser-line: rgba(255, 255, 255, 0.18);
  --lux-project-browser-shadow: 0 16px 40px rgba(2, 10, 28, 0.18);
  --lux-browser-chrome-surface: var(--lux-white);
  --lux-browser-chrome-ink: #596676;
  --lux-browser-chrome-line: #d8e0e9;
  --lux-browser-chrome-dot: #c8d0d9;
  --lux-section-space-y: clamp(40px, 7vw, 70px);
  --lux-section-heading-space-top: var(--lux-section-space-y);
  --lux-section-heading-space-after: clamp(22px, 2vw, 30px);
  --lux-section-space-bottom: var(--lux-section-space-y);
  --lux-section-divider-width: 48px;
  --lux-section-divider-height: 3px;
  --lux-section-divider-offset: clamp(14px, 1.4vw, 18px);
  --lux-radius-sm: 5px;
  --lux-radius-md: 5px;
  --lux-radius-lg: 5px;
  --lux-radius-button: 5px;
  --lux-radius-card: 5px;
  --lux-case-card-radius: 16px;
  --lux-case-card-surface: #f1f5fb;
  --lux-case-work-surface: #eaf1ff;
  --lux-case-chip-surface: var(--lux-white);
  --lux-case-heading: var(--lux-dark);
  --lux-case-copy: var(--lux-text);
  --lux-case-link: var(--lux-blue-deep);
  --lux-case-card-line: var(--lux-line, #e4e8ee);
  --lux-case-card-shadow: 0 10px 32px rgba(2, 10, 28, 0.04);
  --lux-case-rail-surface: var(--lux-white);
  --lux-case-rail-cta-surface: #f1f6fd;
  --lux-case-rail-copy: var(--lux-text);
  --lux-case-rail-muted: #566070;
  --lux-case-rail-link: var(--lux-dark);
  --lux-case-rail-line: var(--lux-line, #e4e8ee);
  --lux-case-rail-active: rgba(24, 120, 241, 0.08);
  --lux-case-rail-active-copy: var(--lux-blue-deep);
  --lux-case-rail-button-surface: var(--lux-blue-deep);
  --lux-case-rail-button-copy: var(--lux-white);
  --lux-radius-slider: 40px;
  --lux-radius-slider-inner: 32px;
  --lux-radius-pill: 999px;
  --lux-section-radius: clamp(32px, 4.5vw, 72px);
  --lux-button-height: 50px;
  --lux-button-padding: 12px 24px;
  --lux-button-shadow: 0 2px 8px rgba(24, 120, 241, 0.3);
  --lux-button-shadow-glow: 0 8px 24px rgba(24, 120, 241, 0.35);
  --lux-icon-tile-background: linear-gradient(145deg, rgba(88, 196, 255, 0.72), rgba(0, 82, 196, 0.48));
  --lux-icon-tile-background-hover: linear-gradient(145deg, rgba(126, 215, 255, 0.88), rgba(0, 117, 236, 0.58));
  --lux-icon-tile-border: rgba(255, 255, 255, 0.16);
  --lux-icon-tile-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 5px 16px rgba(0, 25, 68, 0.16);
  --lux-motion-out: cubic-bezier(0.22, 1, 0.36, 1);
  /* The brand's dark surface, unchanged: --lux-dark into #08214e and back. The
     112deg button gradient was tried here and is too bright for a page that
     carries paragraphs, so it stays a button. What changed is the light on top
     of it, which used to be a woven texture and is now glow in --lux-active
     and --lux-glow. */
  --lux-blue-surface:
    radial-gradient(ellipse at 50% -14%, rgba(0, 145, 252, 0.3), transparent 40%),
    radial-gradient(circle at 9% 20%, rgba(24, 120, 241, 0.34), transparent 33%),
    radial-gradient(circle at 91% 70%, rgba(0, 145, 252, 0.25), transparent 38%),
    radial-gradient(ellipse at 52% 108%, rgba(21, 104, 224, 0.18), transparent 40%),
    linear-gradient(145deg, #020a1c 0%, #08214e 54%, #020a1c 100%);
  /* Single source of truth for the bar's height — the hero subtracts it. */
  --lux-header-h: 65px;
  --lux-navigation-surface: var(--lux-blue-surface);
  /* What every dark surface lays over the gradient. It runs along x only, with
     no stop that depends on height, so a 64px bar and a 900px section resolve
     to the same tone at the same x and cannot disagree where they meet. The
     woven texture this replaced was tiled for the same reason. */
  --lux-sheen:
    linear-gradient(90deg, rgba(0, 145, 252, 0.26), rgba(0, 145, 252, 0) 44%),
    linear-gradient(270deg, rgba(59, 158, 255, 0.18), rgba(59, 158, 255, 0) 30%);
  --lux-denim-opacity: 0.35;
}

/* Regular headings across the site and editor. Display headings get their
   heavier designed outlines from their font family at its normal weight.
   This outranks legacy component weights and later core styles; inline
   emphasis and translation wrappers inside headings follow it too. */
:is(.wp-site-blocks, .editor-styles-wrapper) :is(h1, h2, h3, h4, h5, h6),
:is(.wp-site-blocks, .editor-styles-wrapper) :is(h1, h2, h3, h4, h5, h6) * {
  font-weight: var(--lux-weight-heading) !important;
}

:is(.wp-site-blocks, .editor-styles-wrapper)
  :is(.lux-reference-hero__title, .lux-svc-hero__title, .lux-cross__title, .lux-error-page__code, .has-dino-georgian-font-family) {
  font-synthesis: none;
}

@media (min-width: 478px) {
  :root {
    --lux-page-gutter: 24px;
  }
}

@media (min-width: 768px) {
  :root {
    --lux-page-gutter: 32px;
  }
}

@media (min-width: 1024px) {
  :root {
    --lux-page-gutter: 40px;
    --lux-header-h: 64px;
  }
}

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

html {
  scroll-behavior: smooth;
}

::selection {
  color: var(--lux-white);
  background: var(--lux-active);
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--lux-text);
  background: var(--lux-surface);
  font-family: "FiraGO", "Sylfaen", sans-serif;
  font-size: var(--lux-type-body);
  line-height: var(--lux-leading-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
}

:where(a, button, summary, input, textarea, select, [tabindex]):focus:not(:focus-visible) {
  outline: 0;
}

:where(
  a,
  button,
  summary,
  input,
  textarea,
  select,
  [tabindex],
  .wp-element-button,
  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container-close,
  .wp-block-search__button,
  .wp-social-link a
):focus-visible {
  outline: 3px solid var(--lux-glow);
  outline-offset: 3px;
}

/* Button design system */
:where(.wp-block-button__link, .wp-element-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--lux-button-height);
  padding: var(--lux-button-padding);
  border: 1px solid var(--lux-blue-deep);
  border-radius: var(--lux-radius-button);
  color: var(--lux-white);
  background: var(--lux-blue-deep);
  box-shadow: var(--lux-button-shadow);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-button);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition:
    color 240ms ease,
    border-color 240ms ease,
    background 360ms var(--lux-motion-out),
    box-shadow 280ms ease,
    transform 280ms var(--lux-motion-out);
}

:where(.wp-block-button__link, .wp-element-button):hover {
  border-color: var(--lux-blue-deep);
  color: var(--lux-white);
  background: linear-gradient(112deg, var(--lux-dark) -18%, var(--lux-blue-deep) 68%, var(--lux-blue) 118%);
  box-shadow: var(--lux-button-shadow-glow);
  transform: translateY(-2px);
}

.wp-block-button.is-style-outline > :where(.wp-block-button__link, .wp-element-button) {
  border-color: var(--lux-blue-deep);
  color: var(--lux-blue-deep);
  background: transparent;
  box-shadow: none;
}

.wp-block-button.is-style-outline > :where(.wp-block-button__link, .wp-element-button):hover {
  color: var(--lux-white);
  background: var(--lux-blue-deep);
  box-shadow: var(--lux-button-shadow-glow);
}

.lux-ui-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.lux-ui-button::before {
  position: absolute;
  top: -90%;
  left: -42%;
  z-index: 1;
  width: 20%;
  height: 280%;
  opacity: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.34),
    transparent
  );
  content: "";
  pointer-events: none;
  transform: skewX(-18deg) translateX(-520%);
}

.lux-ui-button:hover::before {
  opacity: 1;
  transform: skewX(-18deg) translateX(930%);
  transition:
    transform 720ms var(--lux-motion-out),
    opacity 120ms ease;
}

.lux-ui-button:active {
  box-shadow: 0 2px 7px rgba(2, 10, 28, 0.24);
  transform: translateY(0) scale(0.975);
  transition-duration: 80ms;
}

.lux-ui-button--primary {
  border-color: var(--lux-blue-deep);
  color: var(--lux-white);
  background: var(--lux-blue-deep);
  box-shadow: var(--lux-button-shadow);
}

.lux-ui-button--secondary {
  border-color: var(--lux-blue-deep);
  color: var(--lux-blue-deep);
  background: transparent;
  box-shadow: none;
}

.lux-ui-button--secondary:hover {
  color: var(--lux-white);
  background: var(--lux-blue-deep);
  box-shadow: var(--lux-button-shadow-glow);
}

.lux-ui-button--ghost {
  border-color: rgba(255, 255, 255, 0.42);
  color: var(--lux-white);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
  backdrop-filter: blur(10px);
}

.lux-ui-button--ghost:hover {
  border-color: rgba(255, 255, 255, 0.72);
  color: var(--lux-white);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: var(--lux-button-shadow-glow);
}

.lux-ui-button--icon {
  flex: 0 0 auto;
  padding: 0;
  aspect-ratio: 1;
  border-radius: 50% !important;
}

.lux-ui-button--compact {
  min-width: 33px;
  min-height: 33px;
  border-radius: var(--lux-radius-button);
}

.lux-ui-button > svg {
  position: relative;
  z-index: 2;
}

.lux-button-ripple {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  opacity: 0;
  background: rgba(255, 255, 255, 0.32);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  animation: lux-button-ripple 620ms ease-out;
}

@keyframes lux-button-ripple {
  0% {
    opacity: 0.44;
    transform: translate(-50%, -50%) scale(0);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* The travelling light that rims the sliders. It was written out twice and is
   now wanted a third time, so it lives here: a padding-box fill, the conic ring
   that the angle animation turns, and the brand gradient under it. The angle is
   read on whichever element uses this, which is what lets each frame run its
   own animation. */
:root {
  --lux-chase-frame:
    linear-gradient(var(--lux-dark), var(--lux-dark)) padding-box,
    conic-gradient(
      from var(--lux-chase-angle),
      var(--lux-white) 0deg,
      rgba(255, 255, 255, 0.9) 6deg,
      rgba(255, 255, 255, 0) 20deg,
      transparent 20deg 160deg,
      rgba(59, 158, 255, 0) 160deg,
      var(--lux-glow) 172deg,
      var(--lux-blue) 176deg 184deg,
      var(--lux-glow) 188deg,
      rgba(24, 120, 241, 0) 200deg,
      transparent 200deg 340deg,
      rgba(255, 255, 255, 0) 340deg,
      var(--lux-white) 356deg 360deg
    ) border-box,
    linear-gradient(
      112deg,
      var(--lux-dark) -18%,
      var(--lux-blue-deep) 54%,
      var(--lux-blue) 82%,
      var(--lux-glow) 118%
    ) border-box;
}

@property --lux-chase-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes lux-border-chase {
  to {
    --lux-chase-angle: 360deg;
  }
}

.wp-site-blocks,
.wp-site-blocks > *,
.wp-block-template-part,
main,
main .wp-block-post-content,
main .wp-block-post-content > * {
  margin-block-start: 0;
}

.wp-site-blocks {
  padding: 0;
}

main {
  background: var(--lux-surface);
}

/* Header */
.lux-reference-header {
  position: relative;
  top: auto;
  width: 100%;
  height: 65px;
  min-height: 65px;
  margin: 0 !important;
  padding: 0;
  color: var(--lux-white);
  background: var(--lux-blue-surface);
  box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.39);
  /* Never animate `background` here. The header swaps between a gradient and a
     solid across its states; background-image cannot interpolate so it drops at
     once, while background-color fades up from transparent — for the length of
     the transition the bar is see-through and the page shows through it. */
  transition: box-shadow 320ms ease;
}

.lux-reference-header__inner {
  display: grid !important;
  grid-template-columns: 20% 60% 20%;
  align-items: center;
  gap: 0 !important;
  width: min(var(--lux-content), 100%);
  height: 65px;
  margin: 0 auto !important;
  padding: 0 7px;
}

.lux-reference-logo {
  justify-self: start;
  margin: 0 !important;
  line-height: 0;
}

.lux-reference-logo img {
  display: block;
  width: 253px !important;
  max-width: 100%;
  height: 38px;
  object-fit: contain;
  object-position: left center;
}

.lux-reference-nav {
  justify-self: center;
  color: var(--lux-white);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-nav);
  font-weight: 500;
}

.lux-reference-nav .wp-block-navigation__container {
  gap: 7px;
}

.lux-reference-header__tools {
  justify-self: end;
  gap: 7px !important;
  margin: 0 !important;
}

.lux-reference-social {
  gap: 5px !important;
  margin: 0 !important;
}

.lux-reference-social .wp-social-link {
  width: 30px;
  height: 30px;
  border: 1px solid var(--lux-white);
  border-radius: 5px;
  background: transparent !important;
  transition: background var(--lux-transition), border-color var(--lux-transition);
}

.lux-reference-social .wp-social-link:hover {
  border-color: var(--lux-blue);
  background: var(--lux-blue) !important;
  transform: none;
}

.lux-reference-social .wp-social-link a {
  padding: 6px;
}

.lux-reference-search {
  width: 33px !important;
  margin: 0 !important;
}

.lux-reference-search .wp-block-search__inside-wrapper {
  width: 33px !important;
  height: 33px;
  padding: 0;
  border: 0;
}

.lux-reference-search .wp-block-search__button {
  width: 33px;
  height: 33px;
  margin: 0;
  padding: 7px;
  border: 0;
  border-radius: 5px;
  color: var(--lux-white);
  background: var(--lux-icon-tile-background);
  box-shadow: var(--lux-icon-tile-shadow);
  transition: background-color var(--lux-transition);
}

.lux-reference-search .wp-block-search__button:hover,
.lux-reference-search .wp-block-search__button:focus-visible {
  background: var(--lux-icon-tile-background-hover);
}

.lux-reference-search .wp-block-search__button svg {
  width: 19px;
  min-width: 19px;
  height: 19px;
}

/* Hero */
.lux-reference-hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  /* The bar no longer overlaps the hero, so the hero takes the viewport minus
     the bar. Without this it still asks for a full 100vh and pushes its own
     centred content down by the bar's height. */
  height: calc(100vh - var(--lux-header-h));
  min-height: 620px;
  margin: 0;
  padding: 0;
  background-image: url("assets/brand/hero-poster.webp");
  background-position: 50% 50%;
  background-size: cover;
}

.lux-reference-hero::before {
  z-index: 1;
}

.lux-reference-hero .wp-block-cover__video-background {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lux-reference-hero .wp-block-cover__inner-container {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.lux-reference-hero__content {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Room between the headline, the buttons and the partner strip. At 30px
     the three read as one crowded block; this lets each be seen on its own. */
  gap: clamp(34px, 3vw, 44px) !important;
  width: min(var(--lux-content), 100%);
  margin: 0 auto !important;
  padding: 20px;
}

.lux-reference-hero .lux-reference-hero__title {
  width: min(100%, 720px);
  max-width: 720px;
  margin: 0;
  color: var(--lux-white);
  font-family: var(--lux-font-display);
  font-weight: 400;
  line-height: var(--lux-leading-hero) !important;
  text-align: center;
  text-transform: none;
}

.lux-reference-hero
  .lux-reference-hero__title:not([style*="font-size"]):not([class*="-font-size"]) {
  font-size: var(--lux-type-hero);
}

/* The home page's h1 is the small line above the headline. The headline is
   the studio's own line and names no search phrase, while the h1 is what the
   page is found for, so they are two elements and only the headline is drawn
   large. The negative margin pulls the h1 in from the content column's gap so
   it reads as a label on the headline, not as a line of its own. */
.lux-reference-hero .lux-reference-hero__kicker {
  width: min(100%, 720px);
  margin: 0 0 -14px;
  color: var(--lux-paper);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: clamp(14px, 1.25vw, 18px);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-align: center;
  opacity: 0.88;
}

.lux-reference-hero .lux-reference-hero__title.lux-text-wave {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
}

.lux-text-wave__word {
  display: inline-flex;
  justify-content: center;
  white-space: nowrap;
}

.lux-text-wave__space {
  display: none;
}

.lux-text-wave__letter {
  display: inline-block;
  font-size: min(1em, 10vw);
  color: var(--lux-white);
  transform: translateY(0) scale(1);
  transform-origin: 50% 78%;
  animation: lux-hero-text-wave 6.4s var(--lux-motion-out) infinite;
  animation-delay: var(--lux-wave-delay, 1s);
  will-change: color, text-shadow, transform;
}

@keyframes lux-hero-text-wave {
  0%,
  14%,
  100% {
    color: var(--lux-white);
    text-shadow: 0 0 0 rgba(88, 196, 255, 0);
    transform: translateY(0) scale(1);
  }

  5% {
    color: var(--lux-glow);
    text-shadow:
      0 0 14px rgba(0, 145, 252, 0.58),
      0 0 30px rgba(24, 120, 241, 0.32);
    transform: translateY(-0.09em) scale(1.1);
  }

  9% {
    color: var(--lux-active);
    text-shadow: 0 0 18px rgba(0, 145, 252, 0.34);
    transform: translateY(-0.025em) scale(1.035);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lux-text-wave__letter {
    animation: none !important;
    will-change: auto;
  }
}

.lux-reference-hero__lead {
  width: 31.747%;
  max-width: 457px;
  margin: 0;
  color: var(--lux-paper);
  font-family: "FiraGO", "Sylfaen", sans-serif;
  font-weight: 400;
  line-height: var(--lux-leading-lead);
  text-align: center;
}

.lux-reference-hero__lead:not([style*="font-size"]):not([class*="-font-size"]) {
  font-size: var(--lux-type-lead);
}

.lux-reference-hero__buttons {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center;
  gap: 16px !important;
  width: min(100%, 540px) !important;
  max-width: 540px !important;
  margin: 0 !important;
}

.lux-reference-hero__buttons .wp-block-button {
  width: calc((100% - 16px) / 2) !important;
}

.lux-reference-hero__buttons .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: 15px 20px;
  border: 1px solid var(--lux-blue-deep);
  border-radius: var(--lux-radius-lg);
  color: var(--lux-paper);
  background: var(--lux-blue-deep);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-button);
  font-weight: 600;
  line-height: 1;
  box-shadow: var(--lux-button-shadow);
}

.lux-reference-hero__buttons .wp-block-button:first-child .wp-block-button__link:hover {
  color: var(--lux-white);
  background: linear-gradient(112deg, var(--lux-dark) -18%, var(--lux-blue-deep) 68%, var(--lux-blue) 118%);
  box-shadow: var(--lux-button-shadow-glow);
}

.lux-reference-hero__buttons .is-style-outline .wp-block-button__link {
  border-color: var(--lux-white);
  color: var(--lux-white);
  background: transparent;
  box-shadow: none;
}

.lux-reference-hero__buttons .is-style-outline .wp-block-button__link:hover {
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: var(--lux-button-shadow-glow);
}

/* Premium action: reusable Gutenberg Button style and Hero CTA treatment. */
.wp-block-button:not(.is-style-lux-minimal)
  > :where(.wp-block-button__link, .wp-element-button),
.lux-ui-button--premium {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 78px;
  padding: 10px 12px;
  overflow: hidden;
  border: 1px solid rgba(88, 196, 255, 0.58);
  border-radius: var(--lux-radius-button);
  color: var(--lux-white);
  background:
    linear-gradient(118deg, rgba(0, 145, 252, 0.36), rgba(4, 39, 94, 0.72) 52%, rgba(0, 145, 252, 0.26)),
    var(--lux-blue-deep);
  box-shadow:
    0 12px 30px rgba(0, 15, 50, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  text-decoration: none;
  transform: translateY(0) scale(1);
  transition:
    border-color 260ms ease,
    background 420ms var(--lux-motion-out),
    box-shadow 320ms ease,
    transform 320ms var(--lux-motion-out);
}

.wp-block-button:not(.is-style-lux-minimal).is-style-outline
  > :where(.wp-block-button__link, .wp-element-button),
.lux-ui-button--premium-secondary {
  border-color: rgba(255, 255, 255, 0.38);
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.08), rgba(3, 28, 70, 0.62) 55%, rgba(0, 145, 252, 0.14)),
    rgba(3, 24, 58, 0.78);
  box-shadow:
    0 12px 28px rgba(0, 10, 34, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.wp-block-button:not(.is-style-lux-minimal)
  > :where(.wp-block-button__link, .wp-element-button):hover,
.lux-ui-button--premium:hover {
  border-color: rgba(171, 226, 255, 0.92);
  color: var(--lux-white);
  background:
    linear-gradient(118deg, rgba(0, 145, 252, 0.56), rgba(7, 57, 130, 0.86) 52%, rgba(88, 196, 255, 0.34)),
    var(--lux-blue-deep);
  box-shadow:
    0 17px 38px rgba(0, 78, 173, 0.3),
    0 0 24px rgba(0, 145, 252, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: translateY(-3px) scale(1.015);
}

.wp-block-button:not(.is-style-lux-minimal).is-style-outline
  > :where(.wp-block-button__link, .wp-element-button):hover,
.lux-ui-button--premium-secondary:hover {
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.13), rgba(5, 43, 99, 0.82) 52%, rgba(0, 145, 252, 0.24)),
    rgba(3, 31, 74, 0.9);
}

.lux-ui-button--premium::before {
  top: 0;
  left: 0;
  width: 48%;
  height: 100%;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: skewX(-18deg) translateX(-240%);
}

.lux-ui-button--premium:hover::before {
  opacity: 1;
  transform: skewX(-18deg) translateX(430%);
  transition:
    transform 900ms var(--lux-motion-out),
    opacity 140ms ease;
}

.lux-premium-button__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
}

.wp-block-button.is-style-lux-premium-compact
  > :where(.wp-block-button__link, .wp-element-button),
.lux-ui-button--premium-compact {
  min-height: 64px;
  padding: 8px 10px;
}

.lux-ui-button--premium-compact .lux-premium-button__inner {
  gap: 9px;
}

.lux-ui-button--premium-compact .lux-premium-button__copy {
  align-self: stretch;
  justify-content: center;
  gap: 3px;
}

.lux-ui-button--premium-compact .lux-premium-button__title {
  font-size: 17px;
  line-height: 1.12;
}

.lux-ui-button--premium-compact .lux-premium-button__icon {
  flex-basis: 36px;
  width: 36px;
  height: 36px;
}

.lux-ui-button--premium-compact .lux-premium-button__icon svg {
  width: 21px;
  height: 21px;
}

.lux-ui-button--premium-compact .lux-premium-button__subtitle {
  font-size: 11px;
}

.lux-ui-button--premium-compact .lux-premium-button__arrow {
  width: 17px;
  height: 17px;
}

.wp-block-button:not(.is-style-lux-minimal)
  > :where(.wp-block-button__link, .wp-element-button):not(.lux-ui-button--premium)::before {
  position: static;
  display: grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  margin-right: 10px;
  place-items: center;
  border: 1px solid var(--lux-icon-tile-border);
  border-radius: 5px;
  color: var(--lux-white);
  background: var(--lux-icon-tile-background);
  box-shadow: var(--lux-icon-tile-shadow);
  content: "✦";
  opacity: 1;
  transform: none;
}

.wp-block-button.is-style-lux-minimal
  > :where(.wp-block-button__link, .wp-element-button) {
  min-height: var(--lux-button-height);
  padding: var(--lux-button-padding);
  border: 1px solid var(--lux-blue-deep);
  border-radius: 5px !important;
  color: var(--lux-white);
  background: var(--lux-blue-deep);
  box-shadow: var(--lux-button-shadow);
}

.wp-block-button.is-style-lux-minimal
  > :where(.wp-block-button__link, .wp-element-button):hover {
  color: var(--lux-white);
  background: linear-gradient(112deg, var(--lux-dark) -18%, var(--lux-blue-deep) 68%, var(--lux-blue) 118%);
  box-shadow: var(--lux-button-shadow-glow);
}

.lux-premium-button__icon {
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--lux-icon-tile-border);
  border-radius: 5px;
  color: var(--lux-white);
  background: var(--lux-icon-tile-background);
  box-shadow: var(--lux-icon-tile-shadow);
  transition:
    background 300ms ease,
    transform 300ms var(--lux-motion-out);
}

.lux-ui-button--premium-secondary .lux-premium-button__icon {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(0, 112, 228, 0.34));
}

.lux-ui-button--premium:hover .lux-premium-button__icon {
  background: var(--lux-icon-tile-background-hover);
  transform: scale(1.06);
}

.lux-premium-button__icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.lux-premium-button__copy {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  text-align: left;
}

.lux-premium-button__title {
  color: var(--lux-white);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-button);
  font-weight: 700;
  line-height: 1.05;
  white-space: nowrap;
}

/* The label is a heading and keeps Mrgvlovani. The line under it is a
   sentence, not a title, and reads as one: it takes the body face. */
.lux-premium-button__subtitle {
  color: rgba(255, 255, 255, 0.68);
  font-family: "FiraGO", "Sylfaen", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.15;
  white-space: nowrap;
  transition: color 240ms ease;
}

.lux-ui-button--premium:hover .lux-premium-button__subtitle {
  color: rgba(255, 255, 255, 0.92);
}

.lux-premium-button__arrow {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  opacity: 0.52;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition:
    opacity 240ms ease,
    transform 280ms var(--lux-motion-out);
}

.lux-ui-button--premium:hover .lux-premium-button__arrow {
  opacity: 1;
  transform: translateX(3px);
}

.lux-ui-button--premium:active {
  transform: translateY(0) scale(0.985);
}

@media (prefers-reduced-motion: reduce) {
  .lux-ui-button--premium,
  .lux-ui-button--premium::before,
  .lux-premium-button__icon,
  .lux-premium-button__arrow {
    transition-duration: 0.01ms !important;
  }

  .lux-ui-button--premium:hover {
    transform: none;
  }
}

/* Group > Styles > LUX — უფონო.
   Strips a section's own background so it sits directly on whatever is behind
   it — the surrounding page colour or the panel it is nested in. The denim
   texture layer is dropped with it, since that is painted as a ::before. */
.wp-block-group.is-style-lux-bare:not(.has-background),
.wp-block-group.is-style-lux-bare.lux-reference-section:not(.has-background) {
  background: none !important;
}

.wp-block-group.is-style-lux-bare {
  box-shadow: none !important;
}

.wp-block-group.is-style-lux-bare::before,
.wp-block-group.is-style-lux-bare::after {
  display: none !important;
}

/* Everything inside these sections was coloured for a dark panel. With the
   panel gone the type sits on the light page surface, so the palette flips to
   the brand blue rather than to black — Luxweb Blue is what carries the
   section on a light ground. Body copy stays graphite, because a paragraph set
   in blue stops reading as text and starts reading as a link. */
/* Headings stay near-black: on the light ground they carry the section, and
   blue on white read as a link rather than a title. The brand blue is kept for
   the things that actually are interactive — links and controls. */
.wp-block-group.is-style-lux-bare :is(h1, h2, h3, h4, h5, h6),
.wp-block-group.is-style-lux-bare :is(h1, h2, h3, h4, h5, h6) a {
  color: var(--lux-surface-heading, var(--lux-dark)) !important;
}

.wp-block-group.is-style-lux-bare :is(p, li, figcaption) {
  color: var(--lux-text);
}

.wp-block-group.is-style-lux-bare a:not(.wp-element-button) {
  color: var(--lux-blue-deep);
}

.wp-block-group.is-style-lux-bare a:not(.wp-element-button):hover,
.wp-block-group.is-style-lux-bare a:not(.wp-element-button):focus-visible {
  color: var(--lux-active);
}

/* A dark card inside a bare section is a dark surface again. The rules above
   colour it through three tokens, so the card puts those tokens back to what
   they mean on navy rather than fighting each rule: headings and their links
   read --lux-dark, copy reads --lux-text, links read --lux-blue-deep. The
   featured slider's slides are the case today; any dark card inside a bare
   section can join the selector. */
.wp-block-group.is-style-lux-bare .lux-services-featured-track > .wp-block-post:not(.lux-featured-project) {
  --lux-dark: var(--lux-white);
  --lux-text: var(--lux-paper);
  --lux-blue-deep: var(--lux-white);
}

/* Arrows on the light ground: kept on phones, dropped from 768px up.
   On a desktop the trackpad and the progress bar make it obvious the strip
   moves, and the heavy filled discs never sat right on a light section. On a
   phone there is no such hint — without the arrows the slider does not read as
   a slider at all — so there they stay, in a lighter outlined form.

   The media slider is the exception, and it is excluded from the hide below.
   Its slides are films: a visitor watching one has their pointer inside a frame
   that swallows the gesture, so a drag never reaches the track and the strip
   offers no other way out. It keeps both arrows at every width. */
.wp-block-group.is-style-lux-bare
  :is(
    [class*="arrow"],
    [class*="prev"],
    [class*="next"],
    /* Singular only: "__controls" is the row that holds these buttons, and it
       was picking up the tint and border meant for the buttons themselves. */
    [class*="__control"]:not([class*="__controls"])
  ) {
  color: var(--lux-blue-deep);
  border-color: rgba(24, 120, 241, 0.3);
  background: rgba(24, 120, 241, 0.06);
  box-shadow: none;
}

.wp-block-group.is-style-lux-bare
  :is([class*="arrow"], [class*="prev"], [class*="next"]) svg {
  fill: var(--lux-control-icon-fill, currentColor);
  stroke: currentColor;
}

.wp-block-group.is-style-lux-bare
  :is([class*="arrow"], [class*="prev"], [class*="next"]):hover,
.wp-block-group.is-style-lux-bare
  :is([class*="arrow"], [class*="prev"], [class*="next"]):focus-visible {
  color: var(--lux-white);
  border-color: var(--lux-blue-deep);
  background: var(--lux-blue-deep);
}

/* The control row was laid out for the full-bleed dark section, so on the
   narrower light one it sat off to the left. Capped and centred instead. */
.wp-block-group.is-style-lux-bare
  :is(.lux-portfolio-controls, .lux-post-carousel__controls, [class*="controls"]) {
  justify-content: center;
  /* Keeps the page gutter. This rule outranks the responsive width below it, so
     without subtracting the gutter here the row ran edge to edge on a phone
     while every other element kept its margin. */
  width: min(100% - var(--lux-page-gutter) * 2, 420px);
  margin-right: auto !important;
  margin-left: auto !important;
}

@media (min-width: 768px) {
  .wp-block-group.is-style-lux-bare:not(.lux-media-slider)
    :is(
      [class*="arrow"],
      [class*="prev"],
      [class*="next"],
      [class*="__control"]:not([class*="__controls"])
    ) {
    display: none !important;
  }
}

/* Any remaining control keeps the brand blue, white glyph once it fills. */
.wp-block-group.is-style-lux-bare button {
  color: var(--lux-blue-deep);
  border-color: rgba(24, 120, 241, 0.28);
}

.wp-block-group.is-style-lux-bare button:hover,
.wp-block-group.is-style-lux-bare button:focus-visible {
  color: var(--lux-white);
  border-color: var(--lux-blue-deep);
}

.wp-block-group.is-style-lux-bare button svg {
  fill: var(--lux-control-icon-fill, currentColor);
  stroke: currentColor;
}

/* The track takes the muted tint; the fill must not. This selector used to
   match both, which is why the bar read as empty: the same faint blue on the
   filled and unfilled halves. */
.wp-block-group.is-style-lux-bare [class*="progress"]:not([class*="fill"]) {
  background: rgba(2, 10, 28, 0.12);
}

/* Homepage sections */
.lux-reference-section {
  position: relative;
  width: 100%;
  margin: 0 !important;
  padding-top: var(--lux-section-space-y);
  padding-bottom: var(--lux-section-space-y);
  overflow: hidden;
  background: var(--lux-surface);
}

.lux-reference-section > * {
  position: relative;
  z-index: 1;
}

/* Gutenberg: Group > Styles > LUX — მომრგვალებული … */
:where(
  .wp-block-group.is-style-lux-rounded-top,
  .wp-block-group.is-style-lux-rounded-bottom,
  .wp-block-group.is-style-lux-rounded,
  .wp-block-cover.is-style-lux-rounded-top,
  .wp-block-cover.is-style-lux-rounded-bottom,
  .wp-block-cover.is-style-lux-rounded
) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
}

:where(.wp-block-group, .wp-block-cover).is-style-lux-rounded-top {
  border-radius: var(--lux-section-radius) var(--lux-section-radius) 0 0;
}

:where(.wp-block-group, .wp-block-cover).is-style-lux-rounded-bottom {
  border-radius: 0 0 var(--lux-section-radius) var(--lux-section-radius);
}

:where(.wp-block-group, .wp-block-cover).is-style-lux-rounded {
  border-radius: var(--lux-section-radius);
}

/* ---- the footer against a page that ends dark ----
   The rounded top lifts the footer off a light page. When the last section is
   denim there is nothing to lift off: what shows through the curve is the page
   ground, so the corners read as two white wedges bitten out of a continuous
   dark. Against a dark ending the corners go square and the footer's own 1px
   top highlight carries the seam instead. */
main:has(> :is(.is-style-lux-denim, .lux-panel-dark):last-child)
  + footer
  .lux-reference-footer.is-style-lux-rounded-top,
main:has(
    > .wp-block-post-content > :is(.is-style-lux-denim, .lux-panel-dark):last-child
  )
  + footer
  .lux-reference-footer.is-style-lux-rounded-top {
  border-radius: 0;
}

/*
 * LUX denim surface
 * Gutenberg: Group > Styles > LUX — Blue denim
 * Utility class: lux-denim-bg
 */
:where(
  .lux-denim-bg,
  .is-style-lux-denim,
  .lux-panel-dark,
  .lux-reference-header,
  .lux-reference-footer,
  .lux-reference-copyright
),
.lux-reference-work.lux-slider-ready {
  position: relative;
  isolation: isolate;
}

.wp-block-group.is-style-lux-denim {
  --lux-denim-opacity: 0.48;

  color: var(--lux-white);
  background: var(--lux-blue-surface) !important;
}

.wp-block-group.is-style-lux-denim > .wp-block-heading {
  color: var(--lux-white) !important;
}

:where(
  .lux-denim-bg,
  .is-style-lux-denim,
  .lux-panel-dark,
  .lux-reference-header,
  .lux-reference-footer,
  .lux-reference-copyright
)::after,
.lux-reference-work.lux-slider-ready::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--lux-sheen);
  mix-blend-mode: screen;
  opacity: var(--lux-denim-opacity);
  content: "";
  pointer-events: none;
}

:where(
  .lux-denim-bg,
  .is-style-lux-denim,
  .lux-panel-dark,
  .lux-reference-header,
  .lux-reference-footer,
  .lux-reference-copyright
) > * {
  position: relative;
  z-index: 1;
}

.lux-reference-section > .wp-block-heading {
  width: min(calc(100% - 40px), var(--lux-content));
  margin: 0 auto var(--lux-section-heading-space-after) !important;
  color: var(--lux-dark);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-weight: var(--lux-weight-heading);
  line-height: var(--lux-leading-section);
  text-align: center;
}

.lux-reference-section
  > .wp-block-heading:not([style*="font-size"]):not([class*="-font-size"]) {
  font-size: var(--lux-type-section-title);
}

.lux-reference-section > .wp-block-heading::after {
  display: block;
  width: var(--lux-section-divider-width);
  height: var(--lux-section-divider-height);
  margin: var(--lux-section-divider-offset) auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lux-blue-deep), var(--lux-active), var(--lux-glow));
  box-shadow: 0 6px 18px rgba(21, 104, 224, 0.22);
  content: "";
}

.lux-reference-card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px !important;
  width: min(var(--lux-content), 100%);
  margin: 0 auto !important;
}

.lux-reference-card-grid > .wp-block-column {
  min-width: 0;
}

.lux-reference-card {
  height: 100%;
  margin: 0 !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 5px !important;
  background: var(--lux-white);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  transition: box-shadow var(--lux-transition);
}

.lux-reference-card .wp-block-image {
  margin: 0 !important;
  overflow: hidden;
}

.lux-reference-card .wp-block-image a {
  display: block;
  line-height: 0;
}

.lux-reference-card .wp-block-image img {
  display: block;
  width: 100%;
  object-fit: cover;
  transition: filter var(--lux-transition);
}

.lux-reference-card:hover .wp-block-image img {
  filter: brightness(1.2);
}

.lux-reference-card .wp-block-heading {
  margin: 10px 10px 25px !important;
  color: var(--lux-dark);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-weight: 600;
  line-height: var(--lux-leading-title);
}

.lux-reference-card
  .wp-block-heading:not([style*="font-size"]):not([class*="-font-size"]) {
  font-size: var(--lux-type-card-title);
}

.lux-reference-card .wp-block-heading a {
  color: var(--lux-dark);
  transition: color var(--lux-transition);
}

.lux-reference-services {
  height: auto;
  min-height: 0;
}

.lux-reference-service-card {
  height: 328px;
}

.lux-reference-services > .lux-reference-card-grid {
  margin-top: 0 !important;
}

.lux-reference-service-card .wp-block-image img {
  aspect-ratio: 1200 / 630;
}

.lux-reference-certificates {
  height: auto;
  min-height: 0;
}

.lux-reference-certificates__gallery {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px !important;
  width: min(var(--lux-content), 100%);
  margin: 0 auto !important;
}

.lux-reference-certificates__gallery .wp-block-image {
  width: 100% !important;
  margin: 0 !important;
}

.lux-reference-certificates__gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 900 / 690;
  object-fit: cover;
}

.lux-reference-certificates__dots {
  display: none;
}

.lux-reference-work {
  height: auto;
  min-height: 0;
}

.lux-reference-work .lux-reference-card-grid + .lux-reference-card-grid {
  margin-top: 20px !important;
}

.lux-reference-work .lux-reference-card-grid {
  transform: translateY(4px);
}

.lux-reference-work > .wp-block-heading + .lux-reference-card-grid {
  margin-top: 4px !important;
}

.lux-reference-work-card {
  height: 379px;
}

.lux-reference-work-card .wp-block-image img {
  aspect-ratio: 7 / 5;
}

/* Gutenberg pattern preview and no-JavaScript fallback for post-powered glow sliders. */
.lux-glow-slider:not(.lux-slider-ready) .lux-glow-slider__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: min(100% - 40px, 1440px);
  margin: 24px auto 0 !important;
  padding: 0;
  list-style: none;
}

.lux-glow-slider:not(.lux-slider-ready) .lux-glow-slider__grid > .wp-block-post {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border: 8px solid transparent;
  border-radius: var(--lux-radius-slider);
  background: var(--lux-chase-frame);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
  animation: lux-border-chase 8.8s linear infinite;
  will-change: --lux-chase-angle;
}

.lux-glow-slider:not(.lux-slider-ready)
  .lux-glow-slider__grid
  > .wp-block-post
  > .wp-block-post-featured-image {
  position: absolute;
  inset: 0;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: var(--lux-radius-slider-inner);
}

.lux-glow-slider:not(.lux-slider-ready)
  .lux-glow-slider__grid
  > .wp-block-post
  > .lux-post-card__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: var(--lux-radius-slider-inner);
  aspect-ratio: auto;
}

.lux-glow-slider:not(.lux-slider-ready)
  .lux-glow-slider__grid
  > .wp-block-post
  > .wp-block-post-featured-image::after {
  position: absolute;
  inset: auto 0 0;
  height: 44%;
  background: linear-gradient(to top, rgba(2, 10, 28, 0.9), transparent);
  content: "";
  pointer-events: none;
}

.lux-glow-slider:not(.lux-slider-ready)
  .lux-glow-slider__grid
  > .wp-block-post
  > .lux-post-card__media::after {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 44%;
  background: linear-gradient(to top, rgba(2, 10, 28, 0.9), transparent);
  content: "";
  pointer-events: none;
}

.lux-glow-slider:not(.lux-slider-ready)
  .lux-glow-slider__grid
  > .wp-block-post
  > .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lux-glow-slider:not(.lux-slider-ready)
  .lux-glow-slider__grid
  > .wp-block-post
  > .lux-post-card__media
  :is(img, iframe, video) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lux-glow-slider:not(.lux-slider-ready)
  .lux-glow-slider__grid
  > .wp-block-post
  > .wp-block-post-title {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  margin: 0;
  padding: 64px 26px 24px;
  color: var(--lux-white);
  font-size: var(--lux-type-card-title);
  line-height: var(--lux-leading-title);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.56);
}

.lux-glow-slider:not(.lux-slider-ready) .wp-block-post-title a {
  color: inherit !important;
}

.lux-glow-slider .wp-block-query-no-results {
  width: min(100% - 40px, 1440px);
  margin: 30px auto 0;
  color: var(--lux-white);
}

/* Lightweight Gutenberg Post Carousel: native Query Loop + scroll snap first, JS controls second. */
.lux-post-carousel {
  isolation: isolate;
  overflow: clip;
}

.lux-post-carousel__query {
  width: min(calc(100% - 40px), var(--lux-content));
  max-width: var(--lux-content) !important;
  margin: 0 auto !important;
}

.lux-post-carousel__track {
  display: grid !important;
  grid-template-columns: none !important;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--lux-gap) * 2)) / 3);
  gap: var(--lux-gap) !important;
  width: 100%;
  margin: 0 !important;
  padding: 4px 2px 24px !important;
  overflow-x: auto;
  overflow-y: hidden;
  list-style: none;
  scroll-behavior: smooth;
  scroll-padding-inline: 2px;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.lux-post-carousel__track.is-dragging {
  scroll-behavior: auto;
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.lux-post-carousel__track::-webkit-scrollbar {
  display: none;
}

.lux-post-carousel__track:focus-visible {
  border-radius: var(--lux-radius-md);
  box-shadow: inset 0 0 0 2px rgba(21, 104, 224, 0.5) !important;
}

.lux-post-carousel__track > .wp-block-post {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 440px;
  overflow: hidden;
  border: 1px solid rgba(2, 10, 28, 0.09);
  border-radius: var(--lux-radius-lg);
  background: var(--lux-white);
  box-shadow: 0 4px 24px rgba(2, 10, 28, 0.08);
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  transition:
    border-color 220ms ease,
    box-shadow 260ms ease;
}

.lux-post-carousel__track > .wp-block-post:hover,
.lux-post-carousel__track > .wp-block-post:focus-within {
  border-color: rgba(21, 104, 224, 0.36);
  box-shadow: var(--lux-button-shadow-glow);
}

.lux-post-carousel__track
  > .wp-block-post:not(:has(.wp-block-post-featured-image)):not(:has(.lux-post-card__media))::before {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(135deg, rgba(21, 104, 224, 0.16), rgba(59, 158, 255, 0.05)),
    var(--lux-paper);
  content: "";
}

.lux-post-carousel__image {
  flex: 0 0 auto;
  width: 100%;
  margin: 0 !important;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--lux-paper);
}

.lux-post-carousel__image a,
.lux-post-carousel__image img {
  display: block;
  width: 100%;
  height: 100%;
}

.lux-post-carousel__image img {
  object-fit: cover;
  transition: transform 420ms var(--lux-motion-out);
}

.lux-post-carousel__track > .wp-block-post:hover .lux-post-carousel__image img,
.lux-post-carousel__track > .wp-block-post:focus-within .lux-post-carousel__image img {
  transform: scale(1.025);
}

.lux-post-carousel__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: clamp(20px, 2vw, 28px);
}

.lux-post-carousel__body > * {
  width: 100%;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.lux-post-carousel__body .wp-block-post-date {
  margin-top: 0;
  margin-bottom: 10px;
  color: var(--lux-blue-deep);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-meta);
  font-weight: 500;
  line-height: 1.4;
}

.lux-post-carousel__body .wp-block-post-title {
  margin-top: 0;
  margin-bottom: 12px;
  color: var(--lux-dark);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-weight: 400;
  line-height: var(--lux-leading-title);
}

.lux-post-carousel__body
  .wp-block-post-title:not([style*="font-size"]):not([class*="-font-size"]) {
  font-size: var(--lux-type-card-title);
}

.lux-post-carousel__body .wp-block-post-title a {
  color: inherit !important;
}

.lux-post-carousel__body .wp-block-post-excerpt {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  margin: 0;
  color: var(--lux-text);
  font-size: var(--lux-type-body);
  line-height: var(--lux-leading-body);
}

.lux-post-carousel__body .wp-block-post-excerpt__excerpt {
  margin: 0 0 20px;
}

.lux-post-carousel__body .wp-block-post-excerpt__more-text {
  margin: auto 0 0;
}

.lux-post-carousel__body .wp-block-post-excerpt__more-link:not(.lux-ui-button--premium) {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--lux-blue-deep) !important;
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-meta);
  font-weight: 600;
  line-height: 1.2;
  box-shadow: inset 0 -1px 0 currentColor;
}

.lux-post-carousel__body .wp-block-post-excerpt__more-link:not(.lux-ui-button--premium):hover,
.lux-post-carousel__body .wp-block-post-excerpt__more-link:not(.lux-ui-button--premium):focus-visible {
  color: var(--lux-surface-heading, var(--lux-dark)) !important;
  box-shadow: inset 0 -2px 0 var(--lux-blue-deep) !important;
}

.lux-post-carousel__controls {
  display: grid;
  grid-template-columns: 50px minmax(150px, 320px) 50px 42px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: min(100%, 560px);
  margin: 8px auto 0;
}

.lux-post-carousel__controls[hidden] {
  display: none;
}

.lux-post-carousel--single .lux-post-carousel__controls {
  display: none;
}

.lux-post-carousel__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(21, 104, 224, 0.36);
  border-radius: var(--lux-radius-md);
  color: var(--lux-blue-deep);
  background: transparent;
  cursor: pointer;
  transition:
    color 220ms ease,
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease;
}

.lux-post-carousel__button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lux-post-carousel__button:hover,
.lux-post-carousel__button:focus-visible {
  border-color: var(--lux-blue-deep);
  color: var(--lux-white);
  background: var(--lux-blue-deep);
  box-shadow: var(--lux-button-shadow-glow) !important;
}

.lux-post-carousel__button:disabled {
  border-color: rgba(2, 10, 28, 0.12);
  color: rgba(2, 10, 28, 0.32);
  background: transparent;
  box-shadow: none !important;
  cursor: default;
}

.lux-post-carousel__status {
  display: grid;
  grid-template-columns: auto minmax(90px, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.lux-post-carousel__counter {
  min-width: 86px;
  color: var(--lux-dark);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-meta);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.lux-post-carousel__progress {
  position: relative;
  display: block;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(2, 10, 28, 0.12);
}

.lux-post-carousel__progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--lux-blue-deep), var(--lux-glow));
  transition: width 260ms var(--lux-motion-out);
}

.lux-post-carousel .wp-block-query-no-results {
  margin: 0;
  padding: 28px;
  border: 1px solid rgba(2, 10, 28, 0.09);
  border-radius: var(--lux-radius-lg);
  background: var(--lux-paper);
}

@media (max-width: 1023px) {
  .lux-post-carousel__track {
    grid-auto-columns: calc((100% - var(--lux-gap)) / 2);
  }
}

@media (max-width: 767px) {
  .lux-post-carousel__query {
    width: 90%;
  }

  .lux-post-carousel__track {
    grid-auto-columns: min(86vw, 340px);
    gap: 14px !important;
    padding-bottom: 18px !important;
  }

  .lux-post-carousel__track > .wp-block-post {
    min-height: 420px;
  }

  .lux-post-carousel__controls {
    grid-template-columns: 46px minmax(120px, 1fr) 46px;
    gap: 12px;
    width: 100%;
  }

  .lux-post-carousel__button {
    width: 46px;
    height: 46px;
  }

  .lux-post-carousel__status {
    gap: 10px;
  }

  .lux-post-carousel__counter {
    min-width: 68px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lux-post-carousel__track {
    scroll-behavior: auto;
  }

  .lux-post-carousel__image img,
  .lux-post-carousel__progress-fill {
    transition: none;
  }

  .lux-post-carousel__track > .wp-block-post:hover .lux-post-carousel__image img,
  .lux-post-carousel__track > .wp-block-post:focus-within .lux-post-carousel__image img {
    transform: none;
  }
}

/* Unified Post Cards pattern: the same Query Loop can be a grid or a carousel. */
.lux-post-cards {
  --lux-post-cards-columns: 3;
  --lux-post-cards-gap: 20px;
  --lux-post-card-content-gap: 18px;
}

.lux-post-cards-columns-1 {
  --lux-post-cards-columns: 1;
}

.lux-post-cards-columns-2 {
  --lux-post-cards-columns: 2;
}

.lux-post-cards-columns-3 {
  --lux-post-cards-columns: 3;
}

.lux-post-cards-columns-4 {
  --lux-post-cards-columns: 4;
}

.lux-post-cards__query {
  width: min(calc(100% - 40px), var(--lux-content));
  max-width: var(--lux-content) !important;
  margin: 0 auto !important;
}

.lux-post-cards .lux-post-cards__grid {
  display: grid !important;
  grid-template-columns: repeat(var(--lux-post-cards-columns), minmax(0, 1fr)) !important;
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-auto-rows: 1fr;
  align-items: stretch;
  justify-items: stretch;
  gap: var(--lux-post-cards-gap) !important;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible;
  overflow-y: visible;
  list-style: none;
  scroll-behavior: auto;
  scroll-snap-type: none;
  cursor: default;
}

/* A lone card in a scroller should fill the frame rather than sit in it as a
   narrow strip. A lone card in a static grid should not: it keeps its column
   and the other two stay empty, the way any grid with one thing in it looks.
   The exclusion is the archive that has explicitly switched the carousel off. */
.lux-post-cards:not(.lux-post-cards-carousel-desktop-off)
  .lux-post-cards__grid:has(> .wp-block-post:only-child) {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-columns: 100% !important;
}

.lux-post-cards--carousel.lux-post-cards-columns-1 .lux-post-cards__grid {
  grid-auto-columns: 100%;
}

.lux-post-cards--carousel.lux-post-cards-columns-2 .lux-post-cards__grid {
  grid-auto-columns: calc((100% - var(--lux-post-cards-gap)) / 2);
}

.lux-post-cards--carousel.lux-post-cards-columns-3 .lux-post-cards__grid {
  grid-auto-columns: calc((100% - (var(--lux-post-cards-gap) * 2)) / 3);
}

.lux-post-cards--carousel.lux-post-cards-columns-4 .lux-post-cards__grid {
  grid-auto-columns: calc((100% - (var(--lux-post-cards-gap) * 3)) / 4);
}

@media (min-width: 768px) {
  :is(.lux-post-cards-carousel-desktop-on, .lux-post-cards--carousel)
    .lux-post-cards__grid {
    grid-template-columns: none !important;
    grid-auto-flow: column;
    padding: 4px 2px 24px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: inline mandatory;
    cursor: grab;
  }

  :is(.lux-post-cards-carousel-desktop-on, .lux-post-cards--carousel).lux-post-cards-columns-1
    .lux-post-cards__grid {
    grid-auto-columns: 100%;
  }

  :is(.lux-post-cards-carousel-desktop-on, .lux-post-cards--carousel).lux-post-cards-columns-2
    .lux-post-cards__grid {
    grid-auto-columns: calc((100% - var(--lux-post-cards-gap)) / 2);
  }

  :is(.lux-post-cards-carousel-desktop-on, .lux-post-cards--carousel).lux-post-cards-columns-3
    .lux-post-cards__grid {
    grid-auto-columns: calc((100% - (var(--lux-post-cards-gap) * 2)) / 3);
  }

  :is(.lux-post-cards-carousel-desktop-on, .lux-post-cards--carousel).lux-post-cards-columns-4
    .lux-post-cards__grid {
    grid-auto-columns: calc((100% - (var(--lux-post-cards-gap) * 3)) / 4);
  }

  .lux-post-cards-carousel-desktop-off .lux-post-carousel__controls {
    display: none !important;
  }
}

.lux-post-cards .lux-post-cards__grid > .wp-block-post {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  min-height: 0;
  margin: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(2, 10, 28, 0.1);
  border-radius: var(--lux-radius-card);
  background: #f8f9fb;
  box-shadow: 0 8px 26px rgba(2, 10, 28, 0.08);
  scroll-snap-align: start;
  transition:
    border-color 220ms ease,
    box-shadow 280ms var(--lux-motion-out),
    transform 280ms var(--lux-motion-out);
}

.lux-post-cards .lux-post-cards__grid > .wp-block-post:hover,
.lux-post-cards .lux-post-cards__grid > .wp-block-post:focus-within {
  border-color: rgba(21, 104, 224, 0.34);
  box-shadow: 0 14px 38px rgba(2, 10, 28, 0.13);
  transform: translateY(-3px);
}

/* Empty photo slots use the same frame as this card system's real images. */
.lux-post-cards .lux-post-cards__grid
  > .wp-block-post:not(:has(.wp-block-post-featured-image)):not(:has(.lux-post-card__media))::before {
  aspect-ratio: 16 / 9;
}

.wp-block-luxweb-post-card-media.lux-post-card__media,
.lux-post-card__media {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 !important;
  overflow: hidden;
  background: linear-gradient(135deg, var(--lux-dark), #0d2e68);
}

.lux-post-card__media::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: 4px;
  background: linear-gradient(90deg, var(--lux-blue-deep), var(--lux-active), var(--lux-glow));
  content: "";
  pointer-events: none;
}

.lux-post-card__media > a:not(.lux-post-card__youtube-link) {
  display: block;
  width: 100%;
  height: 100%;
}

.lux-post-card__media picture,
.lux-post-card__picture {
  display: block;
  width: 100%;
  height: 100%;
}

.lux-post-card__media img,
.lux-post-card__media iframe,
.lux-post-card__media video {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  object-fit: cover;
}

.lux-post-card__media iframe,
.lux-post-card__media video {
  background: #000;
}

/* ---- how a card's image meets its box ----
   The default stays `cover`: a photograph fills the frame and losing its edges
   costs nothing, which is what keeps a grid of cards even.

   `contain` is for sections whose images are documents rather than pictures:
   certificates, site screenshots, anything with text or a border that must
   survive. Cropping those destroys the very thing the thumbnail is there to
   show. The box already carries the denim gradient, so the space around a
   contained image reads as a mat, not as a gap.

   Set it per section in Gutenberg, in Advanced > Additional CSS class:
     lux-post-cards-fit-contain
   the same way the column count and the carousel are switched. */
.lux-post-cards-fit-contain .lux-post-card__media img {
  object-fit: contain;
  /* Inset and a soft edge so the image reads as an object resting on the
     panel, not as a sticker pasted flat against it. */
  padding: clamp(10px, 1.4vw, 18px);
  border-radius: 4px;
}

/* ---- portfolio thumbnails ----
   A case is illustrated by a screenshot of the site that was built, and every
   one of them is captured at 1440x900. In the shared 16/9 box `cover` shaves
   a strip off the top and the bottom, which is exactly where a site keeps its
   header and its first call to action, so the card ends up showing a slice of
   the page rather than the page. Matching the box to the capture keeps the
   fill edge to edge and takes the crop down to nothing. `contain` is not the
   answer here: it would letterbox the one image on the card that is meant to
   carry it. */
body:is(.post-type-archive-lux_work, .single-lux_work, .tax-lux_work_cat)
  .lux-post-card__media {
  aspect-ratio: 16 / 10;
}

.lux-video-activate {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  color: var(--lux-white);
  background: #000;
  border: 0;
  border-radius: inherit;
  cursor: pointer;
  appearance: none;
}

.lux-video-activate::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 10, 28, 0.04), rgba(2, 10, 28, 0.3));
  content: "";
  pointer-events: none;
  transition: background 220ms ease;
}

.lux-video-activate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.002);
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lux-video-activate__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 66px;
  height: 46px;
  color: #fff;
  background: #ff0033;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(2, 10, 28, 0.36);
  transform: translate(-50%, -50%);
  transition:
    background 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.lux-video-activate__play::before {
  width: 0;
  height: 0;
  margin-left: 4px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 15px solid currentcolor;
  content: "";
}

.lux-video-activate:hover img,
.lux-video-activate:focus-visible img {
  transform: scale(1.035);
}

.lux-video-activate:hover::after,
.lux-video-activate:focus-visible::after {
  background: linear-gradient(180deg, rgba(2, 10, 28, 0), rgba(2, 10, 28, 0.18));
}

.lux-video-activate:hover .lux-video-activate__play,
.lux-video-activate:focus-visible .lux-video-activate__play {
  background: var(--lux-active);
  box-shadow: 0 14px 36px rgba(21, 104, 224, 0.42);
  transform: translate(-50%, -50%) scale(1.05);
}

.lux-video-activate:focus-visible {
  outline: 3px solid var(--lux-glow);
  outline-offset: -5px;
}

.lux-post-card__youtube-link {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  width: auto !important;
  height: auto !important;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--lux-radius-md);
  color: var(--lux-white) !important;
  background: rgba(2, 10, 28, 0.74);
  box-shadow: 0 8px 22px rgba(2, 10, 28, 0.28);
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  backdrop-filter: blur(10px);
  pointer-events: auto;
  transition:
    border-color 220ms ease,
    background 220ms ease,
    transform 220ms ease;
}

.lux-post-card__youtube-link:hover,
.lux-post-card__youtube-link:focus-visible {
  border-color: rgba(255, 255, 255, 0.62);
  color: var(--lux-white) !important;
  background: #ff0033;
  transform: translateY(-2px);
}

.lux-post-card__media-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 24px;
  color: rgba(255, 255, 255, 0.78);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  text-align: center;
}

.lux-post-card__media-placeholder--video {
  align-content: center;
  gap: 10px;
}

.lux-post-card__media-placeholder--video strong {
  color: var(--lux-white);
  font-size: 18px;
}

.lux-post-card__media-placeholder--video span {
  max-width: 34ch;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.lux-post-cards .lux-post-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-height: 0;
  padding: clamp(20px, 2vw, 26px);
}

.lux-post-cards .lux-post-card__body > * {
  width: 100%;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.lux-post-cards .lux-post-card__title {
  /* Clamped at two lines, but never padded out to two. Reserving the second
     line put an empty one between a short title and the text under it, and a
     row of one line titles showed that gap in every card. The cards in a grid
     are already the same height, so excerpts starting a line apart on a mixed
     row costs far less than the gap did. */
  display: -webkit-box;
  margin: 0 0 var(--lux-post-card-content-gap) !important;
  overflow: hidden;
  color: var(--lux-dark);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-weight: 400;
  line-height: var(--lux-leading-title);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.lux-post-cards
  .lux-post-card__title:not([style*="font-size"]):not([class*="-font-size"]) {
  font-size: var(--lux-type-card-title);
}

.lux-post-cards .lux-post-card__title a {
  color: inherit !important;
}

.lux-post-cards .lux-post-card__excerpt {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  color: #657083;
  font-size: var(--lux-type-body);
  line-height: 1.55;
}

.lux-post-cards .lux-post-card__excerpt .wp-block-post-excerpt__excerpt {
  display: -webkit-box;
  margin: 0 0 var(--lux-post-card-content-gap);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.lux-post-cards-description-off .wp-block-post-excerpt__excerpt {
  display: none !important;
}

.lux-post-cards .lux-post-card__excerpt .wp-block-post-excerpt__more-text {
  margin: auto 0 0;
}

.lux-post-cards
  .lux-post-card__excerpt
  .wp-block-post-excerpt__more-link:not(.lux-ui-button--premium) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--lux-button-height);
  padding: 10px 18px;
  border: 1px solid var(--lux-blue-deep);
  border-radius: var(--lux-radius-button);
  color: var(--lux-blue-deep) !important;
  background: transparent;
  box-shadow: none;
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-button);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  transition:
    color 220ms ease,
    background-color 220ms ease,
    box-shadow 260ms ease;
}

.lux-post-cards
  .lux-post-card__excerpt
  .wp-block-post-excerpt__more-link:not(.lux-ui-button--premium):hover,
.lux-post-cards
  .lux-post-card__excerpt
  .wp-block-post-excerpt__more-link:not(.lux-ui-button--premium):focus-visible {
  color: var(--lux-white) !important;
  background: var(--lux-blue-deep);
  box-shadow: none;
}

/* Post Cards carousel controls: clean circles, positioned per viewport. */
.lux-post-cards .lux-post-carousel__controls {
  z-index: 5;
  display: flex;
  grid-template-columns: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: auto;
  margin: 18px auto 0;
}

.lux-post-cards .lux-post-carousel__controls[hidden] {
  display: none !important;
}

.lux-post-cards .lux-post-carousel__status {
  display: none;
}

.lux-post-cards .lux-post-carousel__button {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(21, 104, 224, 0.12);
  border-radius: 50%;
  color: var(--lux-blue-deep);
  background: var(--lux-white);
  box-shadow:
    0 10px 28px rgba(2, 10, 28, 0.14),
    0 2px 8px rgba(21, 104, 224, 0.08);
  transition:
    color 220ms ease,
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 260ms var(--lux-motion-out),
    transform 260ms var(--lux-motion-out);
}

.lux-post-cards .lux-post-carousel__button svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.6;
}

.lux-post-cards .lux-post-carousel__button:hover,
.lux-post-cards .lux-post-carousel__button:focus-visible {
  border-color: transparent;
  color: var(--lux-white);
  background: linear-gradient(135deg, var(--lux-blue-deep), var(--lux-blue));
  box-shadow:
    0 14px 34px rgba(21, 104, 224, 0.28),
    0 0 0 4px rgba(59, 158, 255, 0.1) !important;
  transform: translateY(-2px);
}

.lux-post-cards .lux-post-carousel__button:active {
  transform: translateY(0) scale(0.96);
}

@media (min-width: 768px) {
  :is(.lux-post-cards-carousel-desktop-on, .lux-post-cards--carousel)
    .lux-post-cards__query {
    position: relative;
    padding-top: 68px;
  }

  :is(.lux-post-cards-carousel-desktop-on, .lux-post-cards--carousel)
    .lux-post-carousel__controls {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
  }
}

.lux-post-cards--grid .lux-post-carousel__controls {
  display: none !important;
}

@media (max-width: 1023px) {
  .lux-post-cards-columns-3,
  .lux-post-cards-columns-4 {
    --lux-post-cards-columns: 2;
  }

  .lux-post-cards--carousel.lux-post-cards-columns-3 .lux-post-cards__grid,
  .lux-post-cards--carousel.lux-post-cards-columns-4 .lux-post-cards__grid,
  .lux-post-cards-carousel-desktop-on.lux-post-cards-columns-3 .lux-post-cards__grid,
  .lux-post-cards-carousel-desktop-on.lux-post-cards-columns-4 .lux-post-cards__grid {
    grid-auto-columns: calc((100% - var(--lux-post-cards-gap)) / 2);
  }
}

@media (max-width: 767px) {
  .lux-post-cards {
    --lux-post-cards-columns: 1;
    --lux-post-cards-gap: 14px;
  }

  :is(.lux-post-cards-carousel-mobile-on, .lux-post-cards--carousel)
    .lux-post-cards__grid {
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: min(86vw, 340px) !important;
    padding: 4px 2px 18px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: inline mandatory;
    cursor: grab;
  }

  :is(.lux-post-cards-carousel-mobile-on, .lux-post-cards--carousel)
    .lux-post-cards__grid:has(> .wp-block-post:only-child) {
    grid-auto-columns: 100% !important;
  }

  .lux-post-cards-carousel-mobile-off .lux-post-carousel__controls {
    display: none !important;
  }

  :is(.lux-post-cards-carousel-mobile-on, .lux-post-cards--carousel)
    .lux-post-carousel__controls {
    position: static;
    gap: 18px;
    width: 100%;
    margin: 16px auto 0;
  }

  .lux-post-cards .lux-post-carousel__button {
    width: 58px;
    height: 58px;
  }

  .lux-post-cards .lux-post-carousel__button svg {
    width: 24px;
    height: 24px;
  }

  .lux-post-cards .lux-post-cards__grid > .wp-block-post {
    min-height: 0;
  }
}

/* Portfolio slider: the Gutenberg cards stay native; JavaScript enhances them on the front end. */
.lux-reference-work.lux-slider-ready {
  height: auto;
  min-height: 0;
  overflow: hidden;
  color: var(--lux-white);
  background: var(--lux-blue-surface);
}

.lux-reference-work.lux-slider-ready::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.2;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 52px 52px;
  content: "";
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}

.lux-reference-work.lux-slider-ready > .wp-block-heading {
  position: relative;
  z-index: 2;
  margin-bottom: 34px !important;
  color: var(--lux-white);
}

.lux-reference-work.lux-slider-ready
  > .wp-block-heading:not([style*="font-size"]):not([class*="-font-size"]) {
  font-size: var(--lux-type-section-title);
}

.lux-reference-work.lux-slider-ready > .wp-block-heading::after {
  display: block;
  width: 48px;
  height: 3px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: var(--lux-active);
  box-shadow: 0 0 22px rgba(0, 145, 252, 0.72);
  content: "";
}

.lux-portfolio-slider {
  --lux-slide-gap: clamp(18px, 2.15vw, 34px);
  --lux-slide-width: min(90vw, 1220px);
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin: 0 !important;
  padding: 0;
}

.lux-portfolio-viewport {
  width: calc(
    100%
    - var(--lux-slider-source-padding-left, 0px)
    - var(--lux-slider-source-padding-right, 0px)
  );
  margin-right: var(--lux-slider-source-padding-right, 0px);
  margin-left: var(--lux-slider-source-padding-left, 0px);
  padding: 30px 0 34px;
  overflow: visible;
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
}

.lux-portfolio-viewport.is-dragging {
  cursor: grabbing;
}

.lux-portfolio-viewport.is-dragging .lux-portfolio-track {
  transition: none;
}

.lux-portfolio-track {
  display: flex;
  align-items: center;
  gap: var(--lux-slide-gap);
  width: max-content;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform 820ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lux-portfolio-track.is-jumping {
  transition: none !important;
}

.lux-portfolio-slide {
  position: relative;
  isolation: isolate;
  flex: 0 0 var(--lux-slide-width);
  width: var(--lux-slide-width);
  opacity: 0.38;
  filter: saturate(0.6) brightness(0.72);
  transform: scale(0.94);
  transform-origin: center;
  transition:
    opacity 720ms ease,
    filter 720ms ease,
    transform 820ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lux-portfolio-slide::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--lux-radius-slider);
  opacity: 0.16;
  background: linear-gradient(
    137deg,
    var(--lux-glow) 0%,
    rgba(88, 196, 255, 0.9) 45%,
    var(--lux-blue) 100%
  );
  filter: blur(45px);
  transform: scale(0.92);
  transition:
    opacity 900ms ease,
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  content: "";
  pointer-events: none;
}

.lux-portfolio-slide.is-active {
  z-index: 2;
  opacity: 1;
  filter: none;
  transform: scale(1);
}

.lux-reference-work.lux-slider-in-view .lux-portfolio-slide.is-active::before {
  opacity: 0.6;
  transform: scale(0.98);
}

.lux-portfolio-slide .lux-reference-work-card {
  position: relative;
  z-index: 1;
  isolation: isolate;
  height: clamp(420px, 48vw, 650px);
  min-height: 420px;
  overflow: hidden;
  border: 8px solid transparent !important;
  border-radius: var(--lux-radius-slider) !important;
  background: var(--lux-chase-frame);
  backface-visibility: hidden;
  transform: translateZ(0);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
  transition: box-shadow 720ms ease, transform 720ms ease;
  animation: lux-border-chase 8.8s linear infinite;
  animation-play-state: paused;
  will-change: --lux-chase-angle;
}

.lux-portfolio-slide.is-active .lux-reference-work-card {
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.55);
}

.lux-portfolio-slide .lux-reference-work-card::after {
  content: none;
}

.lux-reference-work.lux-slider-in-view
  .lux-portfolio-slide.is-active
  .lux-reference-work-card {
  animation-play-state: running;
}

.lux-portfolio-slide .lux-reference-work-card .wp-block-image {
  position: absolute;
  inset: 0;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden;
  border-radius: var(--lux-radius-slider-inner);
  background: var(--lux-dark);
}

.lux-portfolio-slide
  .lux-reference-work-card
  .wp-block-image
  a:not(.lux-post-card__youtube-link) {
  display: block;
  width: 100%;
  height: 100%;
}

.lux-portfolio-slide .lux-reference-work-card .wp-block-image::after {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 44%;
  opacity: 1;
  background: linear-gradient(
    to top,
    rgba(2, 10, 28, 0.9) 0%,
    rgba(2, 10, 28, 0.46) 45%,
    transparent 100%
  );
  content: "";
  pointer-events: none;
}

.lux-portfolio-slide .lux-reference-work-card .wp-block-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  filter: none;
  object-fit: cover;
  transform: scale(1.003);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lux-portfolio-slide .lux-reference-work-card .wp-block-image iframe,
.lux-portfolio-slide .lux-reference-work-card .wp-block-image video {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  background: #000;
  object-fit: cover;
}

.lux-media-slider .lux-portfolio-slide .lux-reference-work-card {
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
}

.lux-media-slider .lux-media-slider__media::after {
  content: none;
}

.lux-media-slider .wp-block-embed__wrapper {
  width: 100%;
  height: 100%;
}

.lux-media-slider .wp-block-embed__wrapper::before {
  content: none !important;
}

.lux-media-slider .lux-media-slider__media iframe,
.lux-media-slider .lux-media-slider__media video,
.lux-media-slider .lux-media-slider__media img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.lux-portfolio-slide.is-active .lux-reference-work-card:hover .wp-block-image img {
  filter: none;
  transform: scale(1.04);
}

.lux-portfolio-slide .lux-reference-work-card .wp-block-heading {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: 0;
  margin: 0 !important;
  padding: 64px 30px 25px !important;
  color: var(--lux-white);
  line-height: var(--lux-leading-title);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.56);
}

.lux-portfolio-slide
  .lux-reference-work-card
  .wp-block-heading:not([style*="font-size"]):not([class*="-font-size"]) {
  font-size: var(--lux-type-card-title);
}

.lux-portfolio-slide .lux-reference-work-card .wp-block-heading a {
  color: var(--lux-white) !important;
}

.lux-portfolio-slide .lux-reference-work-card .wp-block-heading::after {
  content: none;
}

/* Opt-in device mockups keep their complete canvas. Ordinary photo slides
   retain the existing cover, animated frame, overlay and hover treatment. */
.lux-portfolio-slide:has(img.lux-project-mockup)::before {
  display: none;
}

.lux-portfolio-slide .lux-reference-work-card:has(img.lux-project-mockup) {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--lux-mockup-line) !important;
  border-radius: var(--lux-case-card-radius) !important;
  background: var(--lux-mockup-caption-surface);
  box-shadow: var(--lux-mockup-shadow);
  animation: none;
}

.lux-portfolio-slide .lux-reference-work-card:has(img.lux-project-mockup) .wp-block-image {
  position: relative;
  inset: auto;
  flex: 1 1 0%;
  min-height: 0;
  height: auto !important;
  aspect-ratio: auto;
  border-radius: 0;
  background: var(--lux-mockup-image-surface);
}

.lux-portfolio-slide .lux-reference-work-card:has(img.lux-project-mockup) .wp-block-image::after {
  content: none;
}

.lux-portfolio-slide .lux-reference-work-card .wp-block-image img.lux-project-mockup {
  display: block;
  object-fit: contain;
  object-position: center;
  transform: none !important;
}

.lux-portfolio-slide .lux-reference-work-card:has(img.lux-project-mockup) > .lux-post-card__body {
  flex: none;
  width: 100%;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--lux-mockup-caption-surface);
}

.lux-portfolio-slide .lux-reference-work-card:has(img.lux-project-mockup) .wp-block-heading {
  position: static;
  flex: none;
  width: 100%;
  padding: 16px clamp(18px, 2vw, 28px) !important;
  border-top: 1px solid var(--lux-mockup-line);
  color: var(--lux-mockup-ink) !important;
  background: var(--lux-mockup-caption-surface);
  text-shadow: none;
}

.lux-portfolio-slide .lux-reference-work-card:has(img.lux-project-mockup) .wp-block-heading a {
  color: var(--lux-mockup-ink) !important;
}

/* An editor can give a screenshot a site URL in the Media Library. The slider
   builds its browser bar and footer from that image and the existing title,
   before cloning the slides. Screenshots crop only at the bottom of the viewport. */
.lux-portfolio-slide:has(.lux-project-browser-card)::before {
  display: none;
}

.lux-portfolio-slider .lux-portfolio-slide .lux-reference-work-card.lux-project-browser-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  aspect-ratio: auto;
  gap: clamp(12px, 1.2vw, 18px);
  padding: clamp(12px, 1.55vw, 24px) !important;
  border: 1px solid var(--lux-project-browser-line) !important;
  border-radius: var(--lux-case-card-radius) !important;
  color: var(--lux-project-browser-ink);
  background: var(--lux-project-browser-surface);
  box-shadow: var(--lux-project-browser-shadow);
  animation: none;
}

.lux-portfolio-slider .lux-portfolio-slide .lux-project-browser-card .wp-block-image {
  position: relative;
  inset: auto;
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  min-height: 0;
  height: auto !important;
  aspect-ratio: auto;
  border: 1px solid var(--lux-browser-chrome-line);
  border-radius: 9px;
  background: var(--lux-browser-chrome-surface);
}

.lux-portfolio-slider .lux-portfolio-slide .lux-project-browser-card .wp-block-image::after {
  content: none;
}

.lux-portfolio-slider .lux-portfolio-slide .lux-project-browser-card .wp-block-image a:not(.lux-post-card__youtube-link) {
  flex: 1 1 0%;
  min-height: 0;
  height: auto;
  overflow: hidden;
}

.lux-portfolio-slider .lux-portfolio-slide .lux-project-browser-card .wp-block-image img {
  display: block;
  width: 100%;
  height: auto !important;
  object-fit: contain;
  object-position: center top;
  transform: none !important;
}

.lux-project-browser__bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  height: clamp(28px, 2.3vw, 34px);
  padding: 0 12px;
  border-bottom: 1px solid var(--lux-browser-chrome-line);
  color: var(--lux-browser-chrome-ink);
  background: var(--lux-browser-chrome-surface);
  font-family: "FiraGO", Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
}

.lux-project-browser__dots {
  display: flex;
  flex: none;
  gap: 4px;
}

.lux-project-browser__dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lux-browser-chrome-dot);
}

.lux-project-browser__host {
  flex: 1;
  min-width: 0;
  padding-right: 27px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lux-portfolio-slider .lux-portfolio-slide .lux-project-browser-card > .lux-post-card__body {
  flex: none;
  width: 100%;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
  background: none;
}

.lux-project-browser__footer {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 20px;
  min-width: 0;
}

.lux-portfolio-slider .lux-portfolio-slide .lux-project-browser-card .wp-block-heading {
  position: static;
  display: block;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--lux-project-browser-ink);
  background: none;
  text-shadow: none;
}

.lux-portfolio-slider .lux-portfolio-slide .lux-project-browser-card .wp-block-heading a {
  color: var(--lux-project-browser-ink) !important;
}

.lux-project-browser__caption {
  max-width: 100%;
  color: var(--lux-project-browser-muted);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

@media (max-width: 767px) {
  .lux-portfolio-slider .lux-portfolio-slide .lux-reference-work-card.lux-project-browser-card {
    height: clamp(290px, 78vw, 400px);
    min-height: 290px;
  }

  .lux-project-browser__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  .lux-project-browser__caption {
    font-size: 12px;
  }
}

.lux-portfolio-controls {
  display: grid;
  grid-template-columns: 58px minmax(200px, 420px) 58px;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.2vw, 30px);
  width: min(100% - 40px, 790px);
  margin: 6px auto 0;
}

.lux-reference-work.lux-slider-single .lux-portfolio-controls {
  display: none;
}

.lux-portfolio-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  color: var(--lux-white);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition:
    border-color var(--lux-transition),
    background var(--lux-transition),
    transform var(--lux-transition);
}

.lux-portfolio-button:hover {
  border-color: var(--lux-blue-deep);
  background: var(--lux-blue-deep);
  box-shadow: var(--lux-button-shadow-glow);
  transform: translateY(-3px);
}

.lux-portfolio-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

/* Pinned to the middle track. On sections that drop the arrows the status was
   the only item left in the row and fell into the first 58px column, which is
   why the bar showed up as a stub instead of a scale. */
.lux-portfolio-status {
  grid-column: 2;
  display: grid;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

/* With the numeric counter gone this bar is the only thing telling you where
   you are in the strip, so it is sized to be read rather than glimpsed. */
.lux-portfolio-progress {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.lux-portfolio-progress__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--lux-blue), #58c4ff);
  box-shadow: 0 0 16px rgba(0, 145, 252, 0.7);
  transition: width 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lux-reference-faq {
  height: auto;
  min-height: 0;
}

.lux-reference-faq__list {
  display: grid;
  gap: 10px;
  width: min(
    720px,
    calc(100% - var(--lux-page-gutter) - var(--lux-page-gutter))
  ) !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  border: 0;
  background: transparent;
}

.lux-reference-faq details {
  position: relative;
  overflow: hidden;
  margin: 0 !important;
  padding: 0;
  border: 1px solid rgba(8, 33, 78, 0.13);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow:
    0 1px 2px rgba(2, 10, 28, 0.04),
    0 8px 22px rgba(2, 10, 28, 0.035);
  transition:
    border-color var(--lux-transition),
    background-color var(--lux-transition),
    box-shadow var(--lux-transition),
    transform var(--lux-transition);
}

.lux-reference-faq details::before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--lux-blue), #58c4ff);
  opacity: 0;
  content: "";
  transform: scaleY(0.4);
  transition: opacity var(--lux-transition), transform var(--lux-transition);
  pointer-events: none;
}

.lux-reference-faq summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 16px 66px 16px 22px;
  color: var(--lux-dark);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-faq);
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition:
    color var(--lux-transition),
    background-color var(--lux-transition),
    box-shadow var(--lux-transition);
}

.lux-reference-faq summary::-webkit-details-marker {
  display: none;
}

.lux-reference-faq summary::after {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(24, 120, 241, 0.24);
  border-radius: 6px;
  background:
    linear-gradient(var(--lux-active), var(--lux-active)) center / 16px 2.5px
      no-repeat,
    linear-gradient(var(--lux-active), var(--lux-active)) center / 2.5px 16px
      no-repeat,
    rgba(24, 120, 241, 0.06);
  content: "";
  transform: translateY(-50%);
  transition:
    border-color var(--lux-transition),
    background-color var(--lux-transition),
    background-size var(--lux-transition),
    box-shadow var(--lux-transition),
    transform 320ms var(--lux-motion-out);
}

.lux-reference-faq details[open] {
  border-color: rgba(24, 120, 241, 0.34);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.98),
    rgba(238, 247, 255, 0.82)
  );
  box-shadow:
    0 1px 2px rgba(2, 10, 28, 0.05),
    0 14px 34px rgba(24, 120, 241, 0.09);
}

.lux-reference-faq details[open]::before {
  opacity: 1;
  transform: scaleY(1);
}

.lux-reference-faq details[open] summary {
  color: #08214e;
}

.lux-reference-faq details[open] summary::after {
  border-color: rgba(24, 120, 241, 0.48);
  background:
    linear-gradient(var(--lux-white), var(--lux-white)) center / 16px 2.5px
      no-repeat,
    linear-gradient(var(--lux-white), var(--lux-white)) center / 2.5px 0
      no-repeat,
    linear-gradient(135deg, var(--lux-blue), var(--lux-active));
  box-shadow: 0 7px 18px rgba(24, 120, 241, 0.2);
  transform: translateY(-50%) rotate(180deg);
}

.lux-reference-faq details > p {
  margin: 0;
  padding: 0 66px 22px 22px;
  color: var(--lux-text);
  font-family: "FiraGO", "Sylfaen", sans-serif;
  font-size: var(--lux-type-body);
  font-weight: 400;
  line-height: 1.75;
}

/* Answers were paragraphs only until one needed a list. A list takes the same
   inset as a paragraph, plus room for its markers so they sit inside that
   inset instead of hanging into the 22px gutter. */
.lux-reference-faq details > :is(ul, ol) {
  margin: 0;
  padding: 0 66px 22px 44px;
  color: var(--lux-text);
  font-family: "FiraGO", "Sylfaen", sans-serif;
  font-size: var(--lux-type-body);
  font-weight: 400;
  line-height: 1.75;
}

.lux-reference-faq details > :is(ul, ol) li + li {
  margin-top: 6px;
}

/* Only the last block in an answer carries the full bottom inset; between two
   paragraphs that 22px reads as a gap rather than as the end of the answer. */
.lux-reference-faq details > :is(p, ul, ol):not(:last-child) {
  padding-bottom: 12px;
}

.lux-reference-faq summary:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(24, 120, 241, 0.42);
}

@supports selector(details::details-content) {
  .lux-reference-faq__list {
    interpolate-size: allow-keywords;
  }

  .lux-reference-faq details::details-content {
    overflow: hidden;
    block-size: 0;
    opacity: 0;
    transition:
      block-size 320ms var(--lux-motion-out),
      content-visibility 320ms allow-discrete,
      opacity 220ms ease;
  }

  .lux-reference-faq details[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

/* Footer */
.lux-reference-footer {
  --lux-denim-opacity: 0.48;

  width: 100%;
  min-height: 0;
  margin: 0 !important;
  padding: clamp(56px, 4.5vw, 68px) 0;
  overflow: hidden;
  overflow: clip;
  border-radius: var(--lux-section-radius) var(--lux-section-radius) 0 0;
  color: rgba(255, 255, 255, 0.82);
  background: var(--lux-blue-surface);
  box-shadow:
    inset 0 1px 0 rgba(105, 190, 255, 0.2),
    0 -12px 34px rgba(2, 10, 28, 0.24);
}

.lux-reference-footer__columns {
  display: grid !important;
  grid-template-columns:
    minmax(250px, 1.35fr)
    minmax(170px, 0.9fr)
    minmax(190px, 1fr)
    minmax(250px, 1.15fr);
  gap: clamp(32px, 3.5vw, 56px) !important;
  align-items: start;
  width: min(var(--lux-content), 100%);
  margin: 0 auto !important;
}

.lux-reference-footer__columns > .wp-block-column {
  min-width: 0;
  margin: 0;
}

.lux-reference-footer__brand {
  padding-right: clamp(8px, 1.5vw, 24px);
}

.lux-reference-footer__logo {
  margin: 0 0 20px !important;
}

.lux-reference-footer__logo img {
  display: block;
  width: min(238px, 100%) !important;
  height: auto;
}

.lux-reference-footer__about {
  max-width: 330px;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.78);
  font-family: "FiraGO", "Sylfaen", sans-serif;
  font-size: var(--lux-type-footer);
  line-height: 1.75;
}

.lux-reference-footer h2 {
  margin: 0 0 18px;
  color: var(--lux-white);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-weight: var(--lux-weight-heading);
  line-height: 1.3;
}

.lux-reference-footer
  h2:not([style*="font-size"]):not([class*="-font-size"]) {
  font-size: var(--lux-type-footer-title);
}

.lux-reference-footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lux-reference-footer__links li {
  position: relative;
  margin: 0;
  padding: 7px 0 7px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.82);
  font-family: "FiraGO", "Sylfaen", sans-serif;
  font-size: var(--lux-type-footer);
  line-height: 1.5;
}

.lux-reference-footer__links li::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 18px;
  background: url("assets/brand/bullet-point.png") no-repeat center / contain;
  content: "";
  filter: drop-shadow(0 3px 8px rgba(2, 10, 28, 0.24));
  transform: translateY(-50%);
  transition:
    filter 220ms ease,
    transform 220ms ease;
}

.lux-reference-footer__links li:hover::before,
.lux-reference-footer__links li:focus-within::before {
  filter: drop-shadow(0 4px 10px rgba(59, 158, 255, 0.36));
  transform: translate(2px, -50%);
}

.lux-reference-footer__links a {
  color: rgba(255, 255, 255, 0.86);
  transition: color var(--lux-transition);
}

.lux-reference-footer__links a:hover,
.lux-reference-footer__links a:focus-visible {
  color: var(--lux-active);
}

/* The footer reuses the contact page's channel rows rather than restating the
   icon-and-text treatment; this only stacks them in the narrow column. */
.lux-reference-footer__channels {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.lux-reference-footer__social {
  gap: 7px !important;
  margin: 16px 0 0 !important;
}

.lux-reference-footer__social .wp-social-link {
  display: grid;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 5px;
  color: var(--lux-white) !important;
  background: transparent !important;
  place-items: center;
}

.lux-reference-footer__social .wp-social-link a {
  display: grid;
  width: 100%;
  height: 100%;
  padding: 6px;
  line-height: 1;
  place-items: center;
}

.lux-reference-footer__social .wp-social-link svg {
  display: block;
  width: 16px;
  height: 16px;
  margin: 0;
}

.lux-reference-footer__social .wp-social-link:hover {
  border-color: var(--lux-blue);
  color: var(--lux-white) !important;
  background: var(--lux-blue) !important;
  transform: none;
}

.lux-reference-copyright {
  --lux-denim-opacity: 0.38;

  display: flex;
  align-items: center;
  width: 100%;
  min-height: 60px;
  margin: 0 !important;
  color: var(--lux-paper);
  background: var(--lux-blue-surface);
  box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.39);
}

.lux-reference-copyright__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
  text-align: center;
  width: min(
    calc(100% - var(--lux-page-gutter) - var(--lux-page-gutter)),
    var(--lux-content)
  ) !important;
  margin: 0 auto !important;
}

.lux-reference-copyright p {
  margin: 0;
  color: var(--lux-paper);
  font-family: "FiraGO", "Sylfaen", sans-serif;
  font-size: var(--lux-type-copyright);
  font-weight: 400;
  line-height: 1.5;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .lux-glow-slider:not(.lux-slider-ready) .lux-glow-slider__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lux-reference-header__inner {
    grid-template-columns: minmax(0, 1fr) 40px 40px;
    align-items: center;
    gap: 10px !important;
    height: 65px;
    padding: 0;
  }

  .lux-reference-logo img {
    width: min(230px, 65vw) !important;
    height: auto;
  }

  .lux-reference-nav {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }

  .lux-reference-nav .wp-block-navigation__responsive-container-open {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 9px;
    color: var(--lux-white);
  }

  .lux-reference-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }

  .lux-reference-nav .wp-block-navigation__responsive-container-open svg {
    width: 20px;
    height: 20px;
  }

  .lux-reference-nav .wp-block-navigation__responsive-container.is-menu-open {
    padding: 28px;
    color: var(--lux-white);
  }

  .lux-reference-header__tools {
    display: contents !important;
  }

  .lux-reference-social {
    display: none !important;
  }

  .lux-reference-search {
    grid-column: 3;
    grid-row: 1;
  }

  .lux-reference-footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 44px 48px !important;
  }
}

@media (max-width: 767px) {
  .lux-glow-slider:not(.lux-slider-ready) .lux-glow-slider__grid {
    grid-template-columns: 1fr;
    width: 90%;
  }

  .lux-glow-slider:not(.lux-slider-ready) .lux-glow-slider__grid > .wp-block-post {
    min-height: 330px;
    border-radius: 28px;
  }

  .lux-glow-slider:not(.lux-slider-ready)
    .lux-glow-slider__grid
    > .wp-block-post
    > .wp-block-post-featured-image {
    border-radius: 20px;
  }

  .lux-reference-header {
    position: relative;
  }

  .lux-reference-header__inner {
    display: grid !important;
    grid-template-columns: 1fr 33px 33px;
    gap: 10px !important;
    width: 90%;
    padding: 0;
  }

  .lux-reference-logo img {
    width: min(253px, 70vw) !important;
    height: auto;
  }

  .lux-reference-nav {
    grid-column: 2;
    grid-row: 1;
  }

  .lux-reference-nav .wp-block-navigation__responsive-container-open {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    padding: 7px;
    border-radius: 5px;
    color: var(--lux-white);
    background: var(--lux-blue-deep);
  }

  .lux-reference-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }

  .lux-reference-nav .wp-block-navigation__responsive-container-open svg {
    width: 19px;
    height: 19px;
  }

  .lux-reference-nav .wp-block-navigation__responsive-container.is-menu-open {
    padding: 28px;
    color: var(--lux-white);
    background: var(--lux-dark) !important;
  }

  .lux-reference-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    color: var(--lux-white);
  }

  .lux-reference-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    padding-top: 36px;
  }

  .lux-reference-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    min-width: 0 !important;
    padding: 2px 0 10px 18px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none;
  }

  .lux-reference-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    padding: 8px 0;
    color: var(--lux-white) !important;
    font-size: var(--lux-type-nav);
  }

  .lux-reference-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
  .lux-reference-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
    color: var(--lux-active) !important;
    background: transparent;
  }

  .lux-reference-header__tools {
    display: contents !important;
  }

  .lux-reference-social {
    display: none !important;
  }

  .lux-reference-search {
    grid-column: 3;
    grid-row: 1;
  }

  .lux-reference-hero {
    height: calc(100svh - var(--lux-header-h));
    min-height: 650px;
  }

  .lux-reference-hero .wp-block-cover__video-background {
    display: none;
  }

  .lux-reference-hero__content {
    width: 100%;
    gap: 34px !important;
    padding: 15px;
    transform: translateY(-30px);
  }

  .lux-reference-hero .lux-reference-hero__title {
    width: min(100%, 720px);
    max-width: 100%;
    /* Match the letter cap before the wave script wraps the heading. */
    font-size: min(72px, 10vw) !important;
    line-height: var(--lux-leading-hero) !important;
  }

  .lux-reference-hero__lead {
    width: 336px;
    max-width: 100%;
  }

  /* Stacked, so each button takes the whole row. The base rule splits the pair
     50/50 with !important to beat the block layout styles, and without matching
     that here the buttons stayed half width even in a column. */
  .lux-reference-hero__buttons {
    flex-direction: column;
    gap: 14px !important;
    width: 100% !important;
    max-width: none !important;
  }

  .lux-reference-hero__buttons .wp-block-button {
    width: 100% !important;
  }

  .lux-reference-section {
    width: 100%;
    min-height: 0;
  }

  .lux-reference-section > .wp-block-heading {
    margin-bottom: var(--lux-section-heading-space-after) !important;
  }

  .lux-reference-services {
    height: auto;
    min-height: 0;
  }

  .lux-reference-services > .lux-reference-card-grid {
    margin-top: 0 !important;
  }

  .lux-reference-card-grid {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 20px !important;
  }

  .lux-reference-service-card,
  .lux-reference-work-card {
    height: auto;
  }

  .lux-reference-service-card {
    height: 295px;
  }

  .lux-reference-service-card .wp-block-image img {
    aspect-ratio: 1200 / 630;
  }

  .lux-reference-work-card .wp-block-image img {
    aspect-ratio: 7 / 5;
  }

  .lux-reference-certificates__gallery {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 !important;
    width: 90% !important;
    max-width: 90% !important;
    height: 101px;
    overflow: hidden;
  }

  .lux-reference-certificates__gallery .wp-block-image {
    width: 100% !important;
    height: 71px;
  }

  .lux-reference-certificates__gallery img {
    height: 71px;
    aspect-ratio: auto;
  }

  .lux-reference-certificates__dots {
    display: none;
  }

  .lux-reference-certificates {
    height: auto;
    min-height: 0;
  }

  .lux-reference-certificates > .wp-block-heading {
    margin-bottom: var(--lux-section-heading-space-after) !important;
  }

  .lux-reference-work {
    height: auto;
    min-height: 0;
  }

  .lux-reference-work .lux-reference-card-grid + .lux-reference-card-grid {
    margin-top: 20px !important;
  }

  .lux-reference-work .lux-reference-card-grid {
    transform: translateY(2px);
  }

  .lux-reference-work > .wp-block-heading + .lux-reference-card-grid {
    margin-top: 2px !important;
  }

  .lux-reference-work-card {
    height: 334px;
  }

  .lux-reference-work.lux-slider-ready {
    height: auto;
    min-height: 0;
  }

  .lux-reference-work.lux-slider-ready > .wp-block-heading {
    width: 90% !important;
    max-width: 90% !important;
    margin-bottom: 20px !important;
  }

  .lux-reference-work.lux-slider-ready > .lux-portfolio-slider {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .lux-portfolio-slider {
    --lux-slide-gap: 12px;
    --lux-slide-width: min(70vw, 620px);
  }

  .lux-portfolio-viewport {
    padding: 24px 0 28px;
  }

  .lux-portfolio-slide {
    opacity: 0.3;
    transform: scale(0.94);
  }

  .lux-portfolio-slide.is-active {
    transform: scale(1);
  }

  .lux-portfolio-slide .lux-reference-work-card {
    height: clamp(330px, 105vw, 460px);
    min-height: 330px;
    border-radius: 28px !important;
  }

  .lux-portfolio-slide .lux-reference-work-card .wp-block-image {
    border-radius: 20px;
  }

  .lux-portfolio-slide .lux-reference-work-card .wp-block-image img {
    height: 100%;
  }

  .lux-portfolio-slide .lux-reference-work-card .wp-block-heading {
    min-height: 0;
    padding: 56px 20px 20px !important;
  }

  /* A size picked in the editor is honoured everywhere except here. On a phone
     the large preset resolved to 36px and ran a project title over seven lines
     inside a 254px card. !important is needed because core marks its own preset
     font-size classes important. */
  .lux-portfolio-slide
    :is(.lux-reference-work-card, .lux-glow-card)
    .wp-block-heading {
    font-size: var(--lux-type-card-title) !important;
  }

  /* Three items, three columns. The fourth 40px track was left over from a
     control that no longer exists, and an empty column on the right shifted the
     whole group off centre. */
  .lux-portfolio-controls {
    grid-template-columns: 48px minmax(110px, 220px) 48px;
    gap: 10px;
    width: calc(100% - (var(--lux-page-gutter) * 2));
  }

  .lux-portfolio-button {
    width: 48px;
    height: 48px;
  }

  .lux-portfolio-status {
    gap: 10px;
  }

  .lux-reference-faq__list {
    gap: 8px;
    width: calc(100% - (var(--lux-page-gutter) * 2)) !important;
    max-width: 720px !important;
  }

  .lux-reference-faq summary {
    min-height: 58px;
    padding: 14px 58px 14px 16px;
    font-size: var(--lux-type-faq);
  }

  .lux-reference-faq summary::after {
    right: 12px;
    width: 32px;
    height: 32px;
  }

  .lux-reference-faq details > p {
    padding: 0 58px 18px 16px;
    font-size: var(--lux-type-body);
    line-height: 1.7;
  }

  .lux-reference-faq details > :is(ul, ol) {
    padding: 0 58px 18px 36px;
    font-size: var(--lux-type-body);
    line-height: 1.7;
  }

  .lux-reference-faq details > :is(p, ul, ol):not(:last-child) {
    padding-bottom: 10px;
  }

  .lux-reference-faq {
    height: auto;
    min-height: 0;
  }

  .lux-reference-footer {
    height: auto;
    min-height: 0;
    padding: var(--lux-section-space-y) 0;
  }

  /* One column on a phone. Two made the navigation and company lists share a
     row, which left both cramped and the labels wrapping. */
  .lux-reference-footer__columns {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 34px !important;
    width: calc(100% - var(--lux-page-gutter) - var(--lux-page-gutter));
  }

  .lux-reference-footer__columns > .wp-block-column {
    width: 100%;
  }

  .lux-reference-footer__brand,
  .lux-reference-footer__contact {
    grid-column: 1 / -1;
  }

  .lux-reference-footer__brand {
    padding-right: 0;
  }

  .lux-reference-footer__about {
    max-width: 440px;
  }

  .lux-reference-copyright {
    min-height: 60px;
    padding: 16px 0;
  }

  .lux-reference-copyright p {
    font-size: var(--lux-type-copyright);
  }
}

@media (min-width: 478px) and (max-width: 767px) {
  .lux-reference-services,
  .lux-reference-certificates,
  .lux-reference-work,
  .lux-reference-faq {
    height: auto;
    min-height: 0;
  }

  .lux-reference-services > .lux-reference-card-grid {
    margin-top: 0 !important;
  }

  .lux-reference-service-card,
  .lux-reference-work-card {
    height: auto;
  }

  .lux-reference-footer {
    height: auto;
    min-height: 0;
  }
}

@media (hover: hover) and (pointer: fine) {
  .lux-reference-card:hover {
    box-shadow: 0 8px 24px rgba(2, 10, 28, 0.2);
  }

  .lux-reference-card:hover .wp-block-heading a,
  .lux-reference-faq summary:hover {
    color: var(--lux-active);
  }

  .lux-reference-faq summary:hover {
    background: rgba(24, 120, 241, 0.045);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .lux-reference-work .lux-reference-work-card,
  .lux-glow-slider:not(.lux-slider-ready) .lux-glow-slider__grid > .wp-block-post {
    animation: none !important;
  }

}

/* Site chrome: sticky header, premium navigation and floating social rail */
body {
  overflow-x: clip;
}

header.wp-block-template-part:has(.lux-reference-header),
header.wp-block-template-part.lux-sticky-header-shell {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 1000;
  width: 100%;
  margin: 0 !important;
}

.lux-reference-header.is-scrolled {
  box-shadow:
    0 1px 0 rgba(59, 158, 255, 0.2),
    0 16px 42px rgba(2, 10, 28, 0.28);
}

.lux-reference-nav
  > .wp-block-navigation__responsive-container
  > .wp-block-navigation__responsive-close
  > .wp-block-navigation__responsive-dialog
  > .wp-block-navigation__responsive-container-content
  > .wp-block-navigation__container
  > .wp-block-navigation-item {
  position: relative;
  isolation: isolate;
  border-radius: var(--lux-radius-lg);
  transition:
    background 280ms var(--lux-motion-out),
    box-shadow 280ms ease,
    transform 280ms var(--lux-motion-out);
}

.lux-reference-nav
  > .wp-block-navigation__responsive-container
  > .wp-block-navigation__responsive-close
  > .wp-block-navigation__responsive-dialog
  > .wp-block-navigation__responsive-container-content
  > .wp-block-navigation__container
  > .wp-block-navigation-item::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid transparent;
  border-radius: inherit;
  background:
    linear-gradient(transparent, transparent) padding-box,
    linear-gradient(110deg, rgba(255, 255, 255, 0.3), rgba(59, 158, 255, 0.58), rgba(24, 120, 241, 0.4)) border-box;
  box-shadow: none;
  content: "";
  opacity: 0;
  transition: opacity 280ms ease;
  display: none;
}

.lux-reference-nav
  > .wp-block-navigation__responsive-container
  > .wp-block-navigation__responsive-close
  > .wp-block-navigation__responsive-dialog
  > .wp-block-navigation__responsive-container-content
  > .wp-block-navigation__container
  > .wp-block-navigation-item:hover,
.lux-reference-nav
  > .wp-block-navigation__responsive-container
  > .wp-block-navigation__responsive-close
  > .wp-block-navigation__responsive-dialog
  > .wp-block-navigation__responsive-container-content
  > .wp-block-navigation__container
  > .wp-block-navigation-item:focus-within {
  transform: none;
}

.lux-reference-nav
  > .wp-block-navigation__responsive-container
  > .wp-block-navigation__responsive-close
  > .wp-block-navigation__responsive-dialog
  > .wp-block-navigation__responsive-container-content
  > .wp-block-navigation__container
  > .wp-block-navigation-item:hover::before,
.lux-reference-nav
  > .wp-block-navigation__responsive-container
  > .wp-block-navigation__responsive-close
  > .wp-block-navigation__responsive-dialog
  > .wp-block-navigation__responsive-container-content
  > .wp-block-navigation__container
  > .wp-block-navigation-item:focus-within::before,
body:not(.home) .lux-reference-nav .current-menu-item:hover::before {
  opacity: 1;
}

.lux-reference-nav
  > .wp-block-navigation__responsive-container
  > .wp-block-navigation__responsive-close
  > .wp-block-navigation__responsive-dialog
  > .wp-block-navigation__responsive-container-content
  > .wp-block-navigation__container
  > .current-menu-item::before,
body.home
  .lux-reference-nav
  > .wp-block-navigation__responsive-container
  > .wp-block-navigation__responsive-close
  > .wp-block-navigation__responsive-dialog
  > .wp-block-navigation__responsive-container-content
  > .wp-block-navigation__container
  > .wp-block-navigation-item:first-child::before {
  border-color: transparent;
  background: none;
  box-shadow: none;
  opacity: 0;
}

.lux-reference-nav .wp-block-navigation-item__content,
.lux-reference-nav .wp-block-navigation-item__content:hover,
.lux-reference-nav .wp-block-navigation-item__content:focus,
.lux-reference-nav .wp-block-navigation-item__content:focus-visible,
.lux-reference-nav .current-menu-item > .wp-block-navigation-item__content,
body.home .lux-reference-nav .wp-block-navigation-item:first-child > .wp-block-navigation-item__content {
  border: 0 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.lux-reference-nav
  > .wp-block-navigation__responsive-container
  > .wp-block-navigation__responsive-close
  > .wp-block-navigation__responsive-dialog
  > .wp-block-navigation__responsive-container-content
  > .wp-block-navigation__container
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  color: var(--lux-white) !important;
  line-height: 1;
  text-align: center;
  transition:
    color 240ms ease,
    transform 280ms var(--lux-motion-out);
}

.lux-reference-nav
  > .wp-block-navigation__responsive-container
  > .wp-block-navigation__responsive-close
  > .wp-block-navigation__responsive-dialog
  > .wp-block-navigation__responsive-container-content
  > .wp-block-navigation__container
  > .has-child
  > .wp-block-navigation-item__content {
  padding-right: 18px;
}

.lux-reference-nav .wp-block-navigation__submenu-icon {
  position: absolute;
  top: 50%;
  right: 4px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 38px;
  margin: 0;
  padding: 0;
  color: var(--lux-white);
  transform: translateY(-50%);
  transition: color 240ms ease;
}

.lux-reference-nav .wp-block-navigation__submenu-icon svg {
  display: none;
}

.lux-reference-nav .wp-block-navigation__submenu-icon::before {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.28);
  content: "";
  opacity: 0.58;
  transition:
    opacity 220ms ease,
    box-shadow 220ms ease;
}

.lux-reference-nav .wp-block-navigation-item:hover > .wp-block-navigation__submenu-icon,
.lux-reference-nav .wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-icon {
  color: var(--lux-white);
}

.lux-reference-nav .wp-block-navigation-item:hover > .wp-block-navigation__submenu-icon::before,
.lux-reference-nav .wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-icon::before {
  box-shadow: 0 0 9px rgba(255, 255, 255, 0.72);
  opacity: 1;
}

.lux-reference-nav .wp-block-navigation-item__label {
  display: inline-block;
  position: relative;
  transform: none;
}

.lux-reference-nav
  > .wp-block-navigation__responsive-container
  > .wp-block-navigation__responsive-close
  > .wp-block-navigation__responsive-dialog
  > .wp-block-navigation__responsive-container-content
  > .wp-block-navigation__container
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content
  > .wp-block-navigation-item__label::after {
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lux-blue-deep), var(--lux-active), var(--lux-glow));
  box-shadow: 0 0 8px rgba(59, 158, 255, 0.3);
  content: "";
  opacity: 0;
  transform: scaleX(0.25);
  transform-origin: center;
  transition:
    opacity 180ms ease,
    transform 280ms var(--lux-motion-out);
}

.lux-reference-nav
  > .wp-block-navigation__responsive-container
  > .wp-block-navigation__responsive-close
  > .wp-block-navigation__responsive-dialog
  > .wp-block-navigation__responsive-container-content
  > .wp-block-navigation__container
  > .wp-block-navigation-item:hover
  > .wp-block-navigation-item__content
  > .wp-block-navigation-item__label::after,
.lux-reference-nav
  > .wp-block-navigation__responsive-container
  > .wp-block-navigation__responsive-close
  > .wp-block-navigation__responsive-dialog
  > .wp-block-navigation__responsive-container-content
  > .wp-block-navigation__container
  > .wp-block-navigation-item:focus-within
  > .wp-block-navigation-item__content
  > .wp-block-navigation-item__label::after {
  opacity: 1;
  transform: scaleX(1);
}

.lux-reference-nav .current-menu-item::after,
.lux-reference-nav .wp-block-navigation-item:has(> .wp-block-navigation-item__content[aria-current="page"])::after,
body.home
  .lux-reference-nav
  > .wp-block-navigation__responsive-container
  > .wp-block-navigation__responsive-close
  > .wp-block-navigation__responsive-dialog
  > .wp-block-navigation__responsive-container-content
  > .wp-block-navigation__container
  > .wp-block-navigation-item:first-child::after {
  position: absolute;
  right: 18px;
  bottom: 2px;
  left: 18px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lux-blue-deep), var(--lux-active), var(--lux-glow));
  box-shadow: 0 0 8px rgba(59, 158, 255, 0.35);
  content: "";
  opacity: 1;
  transform: scaleX(1);
}

.lux-reference-nav
  .current-menu-item
  > .wp-block-navigation-item__content
  > .wp-block-navigation-item__label::after,
.lux-reference-nav
  .wp-block-navigation-item:has(> .wp-block-navigation-item__content[aria-current="page"])
  > .wp-block-navigation-item__content
  > .wp-block-navigation-item__label::after,
body.home
  .lux-reference-nav
  > .wp-block-navigation__responsive-container
  > .wp-block-navigation__responsive-close
  > .wp-block-navigation__responsive-dialog
  > .wp-block-navigation__responsive-container-content
  > .wp-block-navigation__container
  > .wp-block-navigation-item:first-child
  > .wp-block-navigation-item__content
  > .wp-block-navigation-item__label::after {
  opacity: 0 !important;
  transform: scaleX(0.25) !important;
}

.lux-reference-nav .wp-block-navigation__submenu-container {
  min-width: 315px !important;
  padding: 10px !important;
  border: 1px solid rgba(59, 158, 255, 0.22) !important;
  border-radius: 5px !important;
  color: var(--lux-paper);
  background: rgba(2, 10, 28, 0.965) !important;
  box-shadow:
    0 20px 55px rgba(2, 10, 28, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
}

.lux-reference-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 5px;
  color: var(--lux-paper);
  background: transparent;
  transition:
    color 220ms ease,
    background 260ms ease,
    transform 260ms var(--lux-motion-out);
}

.lux-reference-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.lux-reference-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
  color: var(--lux-white);
  background: linear-gradient(112deg, rgba(21, 104, 224, 0.28), rgba(59, 158, 255, 0.1));
  transform: translateX(4px);
}

.lux-social-rail {
  position: fixed;
  top: 50dvh;
  left: 0;
  z-index: 980;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px 12px 7px;
  border: 1px solid rgba(59, 158, 255, 0.2);
  border-left: 0;
  border-radius: 0 18px 18px 0;
  background:
    radial-gradient(circle at 0 0, rgba(24, 120, 241, 0.28), transparent 54%),
    rgba(2, 10, 28, 0.9);
  box-shadow:
    12px 18px 46px rgba(2, 10, 28, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  transform: translateY(-50%);
  animation: lux-social-rail-in 720ms var(--lux-motion-out);
  transition:
    opacity 220ms ease,
    transform 320ms var(--lux-motion-out);
}

.lux-social-rail::before {
  width: 22px;
  height: 3px;
  margin-bottom: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lux-blue-deep), var(--lux-glow), var(--lux-white));
  box-shadow: 0 0 12px rgba(59, 158, 255, 0.68);
  content: "";
}

.lux-social-rail__list {
  display: flex !important;
  flex-direction: column;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.lux-social-rail__list .wp-social-link {
  width: 36px;
  height: 36px;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 5px;
  color: var(--lux-white) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    border-color 240ms ease,
    background 280ms ease,
    box-shadow 280ms ease,
    transform 280ms var(--lux-motion-out);
}

.lux-social-rail__list .wp-social-link a {
  display: grid;
  width: 100%;
  height: 100%;
  padding: 8px;
  place-items: center;
}

.lux-social-rail__list .wp-social-link svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

.lux-social-rail__list .wp-social-link:hover,
.lux-social-rail__list .wp-social-link:focus-within {
  border-color: rgba(255, 255, 255, 0.42);
  color: var(--lux-white) !important;
  background: linear-gradient(135deg, var(--lux-blue-deep), var(--lux-blue)) !important;
  box-shadow: 0 8px 22px rgba(24, 120, 241, 0.4);
  transform: translateX(4px) translateY(-1px);
}

/* Shared LUX color treatment for compact social and utility icon controls. */
:is(
  .lux-reference-social,
  .lux-reference-footer__social,
  .lux-social-rail__list,
  .lux-testimonial__social
) .wp-social-link {
  border-color: var(--lux-icon-tile-border);
  color: var(--lux-white) !important;
  background: var(--lux-icon-tile-background) !important;
  box-shadow: var(--lux-icon-tile-shadow);
}

:is(
  .lux-reference-social,
  .lux-reference-footer__social,
  .lux-social-rail__list,
  .lux-testimonial__social
) .wp-social-link:hover,
:is(
  .lux-reference-social,
  .lux-reference-footer__social,
  .lux-social-rail__list,
  .lux-testimonial__social
) .wp-social-link:focus-within {
  border-color: rgba(255, 255, 255, 0.36);
  color: var(--lux-white) !important;
  background: var(--lux-icon-tile-background-hover) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 8px 20px rgba(0, 88, 191, 0.2);
}

:is(
  .lux-reference-social,
  .lux-reference-footer__social,
  .lux-social-rail__list,
  .lux-testimonial__social
) .wp-social-link svg {
  color: var(--lux-white);
  fill: currentColor;
}

@keyframes lux-social-rail-in {
  from {
    opacity: 0;
    transform: translate(-110%, -50%);
  }

  to {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

@media (max-width: 1023px) {
  .lux-reference-nav .wp-block-navigation__container {
    gap: 4px;
  }

  .lux-social-rail {
    display: flex !important;
  }

  .lux-reference-social {
    display: none !important;
  }
}

/* Tablets keep the rail, phones do not: at that width it sits over the content
   at the left edge and covers too much of it. The same four links are in the
   footer, so it is dropped rather than shrunk. Needs !important only because
   the rule above forces it on for everything under 1023px. */
@media (max-width: 781px) {
  .lux-social-rail {
    display: none !important;
  }
}

@media (max-width: 1199px) {
  .lux-reference-nav .wp-block-navigation__responsive-container-open {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    background: linear-gradient(135deg, var(--lux-blue-deep), var(--lux-blue));
    box-shadow: 0 8px 22px rgba(24, 120, 241, 0.28);
  }

  .lux-reference-nav .wp-block-navigation__responsive-container.is-menu-open {
    height: 100dvh;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    animation: none !important;
    transform: none !important;
    background:
      radial-gradient(circle at 100% 0, rgba(24, 120, 241, 0.22), transparent 38%),
      var(--lux-dark) !important;
  }

  .lux-reference-nav
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    left: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    margin: 0 !important;
    padding: 9px !important;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--lux-radius-md) !important;
    color: var(--lux-white);
    background: rgba(255, 255, 255, 0.055) !important;
    box-shadow: none !important;
  }

  .lux-reference-nav
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close:hover {
    border-color: rgba(59, 158, 255, 0.46);
    background: rgba(59, 158, 255, 0.1) !important;
    transform: none;
  }

  .lux-reference-nav
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close
    svg {
    width: 19px;
    height: 19px;
  }

  .lux-reference-nav
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
    padding-top: 68px;
  }

  .lux-reference-nav
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container {
    gap: 7px;
    width: 100%;
  }

  .lux-reference-nav
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item {
    position: relative;
    width: 100%;
  }

  .lux-reference-nav
    .wp-block-navigation__responsive-container.is-menu-open
    .has-child
    > .wp-block-navigation-item__content {
    padding-right: 48px;
    padding-left: 48px;
  }

  .lux-reference-nav
    .wp-block-navigation__responsive-container.is-menu-open
    .has-child
    > .wp-block-navigation__submenu-icon {
    position: absolute;
    top: 4px;
    right: 6px;
    z-index: 3;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0;
    border: 0;
    border-radius: var(--lux-radius-md);
    color: var(--lux-white);
    background: transparent;
    transform: none;
  }

  .lux-reference-nav
    .wp-block-navigation__responsive-container.is-menu-open
    .has-child
    > .wp-block-navigation__submenu-icon::before {
    display: none;
    content: none;
  }

  .lux-reference-nav
    .wp-block-navigation__responsive-container.is-menu-open
    .has-child
    > .wp-block-navigation__submenu-icon
    svg {
    display: block;
    width: 14px;
    height: 14px;
    transition: transform 280ms var(--lux-motion-out);
  }

  .lux-reference-nav
    .wp-block-navigation__responsive-container.is-menu-open
    .has-child
    > .wp-block-navigation__submenu-icon[aria-expanded="true"]
    svg {
    transform: rotate(180deg);
  }

  .lux-reference-nav
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content {
    width: 100%;
    min-height: 46px;
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 5px;
    color: var(--lux-paper) !important;
    background: rgba(255, 255, 255, 0.035);
  }

  .lux-reference-nav
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content:hover,
  .lux-reference-nav
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content:focus-visible {
    color: var(--lux-white) !important;
    background: linear-gradient(112deg, rgba(21, 104, 224, 0.34), rgba(59, 158, 255, 0.1));
    transform: none;
  }

  .lux-reference-nav
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    min-width: 0 !important;
    max-height: 0;
    margin: 0 !important;
    padding: 0 14px !important;
    overflow: hidden;
    border: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    backdrop-filter: none;
    pointer-events: none;
    transform: none !important;
    will-change: max-height, opacity;
    transition:
      max-height 240ms var(--lux-motion-out),
      padding 240ms var(--lux-motion-out),
      opacity 90ms ease,
      visibility 0s linear 240ms;
  }

  .lux-reference-nav
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.35;
    text-align: center;
  }

  .lux-reference-nav
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-icon[data-lux-submenu-open="true"]
    + .wp-block-navigation__submenu-container {
    max-height: 620px;
    padding: 7px 14px 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
    transition-delay: 0s;
  }
}

@media (max-width: 1023px) {
  .lux-social-rail {
    top: 52dvh;
    gap: 6px;
    padding: 9px 6px 9px 5px;
    border-radius: 0 15px 15px 0;
  }

  .lux-social-rail::before {
    width: 18px;
  }

  .lux-social-rail__list {
    gap: 6px !important;
  }

  .lux-social-rail__list .wp-social-link {
    width: 32px;
    height: 32px;
    border-radius: 5px;
  }

  .lux-social-rail__list .wp-social-link a {
    padding: 7px;
  }

  .lux-social-rail__list .wp-social-link svg {
    width: 17px;
    height: 17px;
  }

  body.lux-menu-open .lux-social-rail {
    opacity: 0;
    pointer-events: none;
    transform: translate(-110%, -50%);
    animation: none;
  }
}

@media screen and (max-width: 782px) {
  body.admin-bar header.wp-block-template-part:has(.lux-reference-header),
  body.admin-bar header.wp-block-template-part.lux-sticky-header-shell {
    top: 46px;
  }
}

/* Responsive geometry: one gutter system for header, sections, grids and queries. */
.lux-reference-header__inner,
.lux-reference-section > .wp-block-heading,
.lux-reference-card-grid,
.lux-reference-certificates__gallery,
.lux-reference-footer__columns,
.lux-post-cards__query,
.lux-post-carousel__query,
.lux-pricing-grid,
.lux-testimonials__track,
.lux-home-about__text,
.lux-home-about .lux-stats,
.lux-offers__lead {
  width: min(
    calc(100% - var(--lux-page-gutter) - var(--lux-page-gutter)),
    var(--lux-content)
  );
  max-width: var(--lux-content);
  margin-right: auto;
  margin-left: auto;
}

/* A section pattern can be inserted inside an empty section in Gutenberg.
   Keep that wrapper transparent so widths and vertical spacing are not applied twice. */
.lux-reference-section:has(> .lux-reference-section:only-child) {
  padding: 0;
  overflow: visible;
  background: transparent;
}

.lux-reference-section > .lux-reference-section:only-child {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.lux-reference-work.lux-slider-ready > .lux-portfolio-slider {
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .lux-reference-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lux-reference-hero .lux-reference-hero__title {
    width: min(100%, 720px);
    max-width: 720px;
  }

  .lux-reference-hero__lead {
    width: min(70%, 560px);
    max-width: min(70%, 560px);
  }

  .lux-reference-hero__buttons {
    width: min(70%, 560px);
  }

  .lux-reference-footer__columns {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lux-reference-footer__columns > .wp-block-column {
    width: 100%;
  }

  .lux-portfolio-slider {
    --lux-slide-width: min(78vw, 760px);
  }

  :is(.lux-reference-work, .lux-glow-slider) .lux-portfolio-viewport {
    width: calc(
      100%
      - var(--lux-slider-source-padding-left, var(--lux-page-gutter))
      - var(--lux-slider-source-padding-right, var(--lux-page-gutter))
    );
    margin-right: var(--lux-slider-source-padding-right, var(--lux-page-gutter));
    margin-left: var(--lux-slider-source-padding-left, var(--lux-page-gutter));
    overflow: hidden;
  }

  :is(.lux-reference-work, .lux-glow-slider) .lux-portfolio-controls {
    width: calc(
      100%
      - var(--lux-slider-source-padding-left, var(--lux-page-gutter))
      - var(--lux-slider-source-padding-right, var(--lux-page-gutter))
    );
  }
}

@media (max-width: 1023px) {
  :is(.lux-reference-work, .lux-glow-slider) .lux-portfolio-slide::before {
    content: none;
  }

  :is(.lux-reference-work, .lux-glow-slider)
    .lux-portfolio-slide
    .lux-reference-work-card,
  :is(.lux-reference-work, .lux-glow-slider)
    .lux-portfolio-slide.is-active
    .lux-reference-work-card {
    box-shadow: none;
  }
}

@media (max-width: 767px) {
  .lux-glow-slider .lux-portfolio-slider {
    --lux-slide-gap: 14px;
  }

  :is(.lux-reference-work, .lux-glow-slider) .lux-portfolio-viewport {
    width: calc(
      100%
      - var(--lux-slider-source-padding-left, var(--lux-page-gutter))
      - var(--lux-slider-source-padding-right, var(--lux-page-gutter))
    );
    margin-right: var(--lux-slider-source-padding-right, var(--lux-page-gutter));
    margin-left: var(--lux-slider-source-padding-left, var(--lux-page-gutter));
    padding-top: 18px;
    padding-bottom: 22px;
    overflow: hidden;
  }

  .lux-glow-slider .lux-portfolio-slide .lux-reference-work-card {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  :is(.lux-reference-work, .lux-glow-slider) .lux-portfolio-controls {
    width: calc(
      100%
      - var(--lux-slider-source-padding-left, var(--lux-page-gutter))
      - var(--lux-slider-source-padding-right, var(--lux-page-gutter))
    );
  }

  .lux-post-cards:is(.lux-post-cards-carousel-mobile-on, .lux-post-cards--carousel)
    .lux-post-cards__grid {
    grid-auto-columns: 100% !important;
    padding: 0 !important;
    scroll-padding-inline: 0;
  }

  .lux-post-cards:is(.lux-post-cards-carousel-mobile-on, .lux-post-cards--carousel)
    .lux-post-cards__grid
    > .wp-block-post,
  .lux-post-cards:is(.lux-post-cards-carousel-mobile-on, .lux-post-cards--carousel)
    .lux-post-cards__grid
    > .wp-block-post:hover,
  .lux-post-cards:is(.lux-post-cards-carousel-mobile-on, .lux-post-cards--carousel)
    .lux-post-cards__grid
    > .wp-block-post:focus-within {
    box-shadow: none;
    transform: none;
  }
}

@media screen and (max-width: 600px) {
  body.admin-bar header.wp-block-template-part:has(.lux-reference-header),
  body.admin-bar header.wp-block-template-part.lux-sticky-header-shell {
    top: 0;
  }
}

/* Desktop header — one full-width denim bar, content held to the 1440 grid.
   The floating capsule this once drew is gone: the bar itself carries the
   surface, so there is a single header on every template. */
@media (min-width: 1024px) {
  .lux-reference-header {
    height: auto;
    min-height: 0;
    padding: 0 var(--lux-page-gutter);
  }

  .lux-reference-header__inner {
    position: relative;
    grid-template-columns: minmax(210px, 253px) minmax(0, 1fr) auto;
    width: min(100%, var(--lux-content));
    max-width: var(--lux-content);
    height: 64px;
    padding: 0;
  }

  .lux-reference-header__inner > * {
    position: relative;
    z-index: 1;
  }

  .lux-reference-nav .wp-block-navigation__submenu-container {
    isolation: isolate;
    overflow: hidden;
    border-color: rgba(126, 195, 255, 0.28) !important;
    color: var(--lux-white);
    background: var(--lux-navigation-surface) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 20px 48px rgba(2, 10, 28, 0.34);
    backdrop-filter: none;
  }

  .lux-reference-nav .wp-block-navigation__submenu-container::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background-image: var(--lux-sheen);
    mix-blend-mode: screen;
    opacity: var(--lux-denim-opacity);
    content: "";
    pointer-events: none;
  }

  .lux-reference-nav
    .wp-block-navigation__submenu-container
    > .wp-block-navigation-item {
    position: relative;
    z-index: 1;
  }

  .lux-reference-nav
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content {
    color: rgba(255, 255, 255, 0.9);
  }

  .lux-reference-nav
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content:hover,
  .lux-reference-nav
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content:focus-visible {
    color: var(--lux-white);
    background: linear-gradient(
      112deg,
      rgba(24, 120, 241, 0.3),
      rgba(59, 158, 255, 0.12)
    );
  }

  .lux-reference-logo {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 44px;
    padding-right: 28px;
  }

  .lux-reference-logo::after,
  .lux-reference-nav::after {
    position: absolute;
    top: 50%;
    width: 1px;
    height: 42px;
    background: linear-gradient(
      to bottom,
      transparent,
      rgba(255, 255, 255, 0.18) 22%,
      rgba(59, 158, 255, 0.42) 50%,
      rgba(255, 255, 255, 0.18) 78%,
      transparent
    );
    content: "";
    pointer-events: none;
    transform: translateY(-50%);
  }

  .lux-reference-logo::after {
    right: 0;
  }

  .lux-reference-nav {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }

  .lux-reference-nav::after {
    right: 0;
  }

  .lux-reference-nav .wp-block-navigation__container {
    gap: clamp(14px, 1.45vw, 24px);
    flex-wrap: nowrap !important;
  }

  .lux-reference-nav
    > .wp-block-navigation__responsive-container
    > .wp-block-navigation__responsive-close
    > .wp-block-navigation__responsive-dialog
    > .wp-block-navigation__responsive-container-content
    > .wp-block-navigation__container
    > .wp-block-navigation-item {
    flex: 0 0 auto;
  }

  .lux-reference-nav
    > .wp-block-navigation__responsive-container
    > .wp-block-navigation__responsive-close
    > .wp-block-navigation__responsive-dialog
    > .wp-block-navigation__responsive-container-content
    > .wp-block-navigation__container
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content {
    white-space: nowrap;
  }

  .lux-reference-header__tools {
    position: relative;
    width: auto;
    min-height: 44px;
    padding-left: 24px;
  }

}

/* Compact desktop header: retain the full navigation without wrapping. */
@media (min-width: 1024px) and (max-width: 1366px) {
  .lux-reference-header__inner {
    grid-template-columns: 230px minmax(0, 1fr) 57px;
    padding-right: 18px;
    padding-left: 18px;
  }

  .lux-reference-logo {
    padding-right: 20px;
  }

  .lux-reference-logo img {
    width: 210px !important;
    height: auto;
  }

  .lux-reference-nav {
    font-size: 15px !important;
  }

  .lux-reference-nav .wp-block-navigation__container {
    gap: clamp(2px, 0.45vw, 6px);
  }

  .lux-reference-nav
    > .wp-block-navigation__responsive-container
    > .wp-block-navigation__responsive-close
    > .wp-block-navigation__responsive-dialog
    > .wp-block-navigation__responsive-container-content
    > .wp-block-navigation__container
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content {
    padding-right: 11px;
    padding-left: 11px;
  }

  .lux-reference-nav
    > .wp-block-navigation__responsive-container
    > .wp-block-navigation__responsive-close
    > .wp-block-navigation__responsive-dialog
    > .wp-block-navigation__responsive-container-content
    > .wp-block-navigation__container
    > .has-child
    > .wp-block-navigation-item__content {
    padding-right: 13px;
  }

  .lux-reference-nav .wp-block-navigation__submenu-icon {
    right: 1px;
  }

  .lux-reference-header__tools {
    justify-content: flex-end;
    padding-left: 16px;
  }

  .lux-reference-social {
    display: none !important;
  }
}

/* ---- the menu on a small laptop ----
   The row above holds the whole menu down to 1024px by trimming the logo, the
   type and the padding. Seven items are past what that can absorb: measured at
   1024px the row wants 844px and the space beside the logo is 719px, so it ran
   under the logo. Rather than shrink Georgian labels to the point of squinting,
   this width takes the compact menu the site already draws for narrower
   screens. 1200px up keeps the full row, which is where it still fits. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .lux-reference-header__inner {
    grid-template-columns: minmax(0, 1fr) 40px 40px;
    align-items: center;
    gap: 10px !important;
  }

  .lux-reference-nav {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }

  .lux-reference-nav .wp-block-navigation__responsive-container-open {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 9px;
    color: var(--lux-white);
  }

  .lux-reference-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }

  .lux-reference-nav .wp-block-navigation__responsive-container-open svg {
    width: 20px;
    height: 20px;
  }

  .lux-reference-nav .wp-block-navigation__responsive-container.is-menu-open {
    padding: 28px;
    color: var(--lux-white);
  }

  .lux-reference-header__tools {
    display: contents !important;
  }

  .lux-reference-social {
    display: none !important;
  }

  .lux-reference-search {
    grid-column: 3;
    grid-row: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lux-social-rail {
    animation: none !important;
  }
}

/* ==========================================================================
   Back to top

   The counterweight to the social rail: that one sits on the left edge, this
   one on the right, so the two never argue over a corner. It is absent until a
   screenful has gone past, because a button offering to undo a scroll that has
   not happened is just clutter over the hero.

   It carries a halo rather than a ring. A ring is two circles, and two
   circles this small never agree: a hairline stroke at 62px falls on half a
   device pixel down one side and a whole one down the other, so the browser
   draws one edge thin and the opposite edge thick and the whole thing looks
   crooked even when the geometry is exact. A halo is a spread shadow on the
   button's own box, which cannot be off-centre because there is only one box,
   and it has no inner edge to land wrong.
   ========================================================================== */
.lux-top-button {
  position: fixed;
  right: var(--lux-page-gutter);
  bottom: calc(var(--lux-page-gutter) + env(safe-area-inset-bottom, 0px));
  z-index: 970;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--lux-white);
  background: linear-gradient(
    112deg,
    var(--lux-dark) -18%,
    var(--lux-blue-deep) 68%,
    var(--lux-blue) 118%
  );
  box-shadow:
    0 0 0 6px rgba(21, 104, 224, 0.17),
    0 10px 30px rgba(2, 10, 28, 0.42),
    0 0 0 1px rgba(126, 195, 255, 0.22) inset;
  opacity: 0;
  cursor: pointer;
  /* Out of reach, not merely out of sight: a transparent button still takes
     clicks and still answers the tab key. */
  visibility: hidden;
  transition:
    opacity 260ms var(--lux-motion-out),
    transform 320ms var(--lux-motion-out),
    box-shadow var(--lux-transition),
    visibility 0s linear 320ms;
  transform: translateY(16px) scale(0.92);
}

.lux-top-button.is-visible {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
  transform: translateY(0) scale(1);
}

.lux-top-button svg {
  width: 22px;
  height: 22px;
  transition: transform 260ms var(--lux-motion-out);
}

.lux-top-button:hover,
.lux-top-button:focus-visible {
  box-shadow:
    0 0 0 10px rgba(21, 104, 224, 0.24),
    0 16px 38px rgba(2, 10, 28, 0.5),
    0 0 0 1px rgba(126, 195, 255, 0.42) inset,
    var(--lux-button-shadow-glow);
}

/* The arrow lifts on hover: the button says what it does before it is pressed. */
.lux-top-button:hover svg,
.lux-top-button:focus-visible svg {
  transform: translateY(-3px);
}

.lux-top-button:focus-visible {
  outline: 3px solid var(--lux-glow);
  outline-offset: 3px;
}

.lux-top-button:active {
  transform: translateY(0) scale(0.94);
}

/* A course page pins a price bar along the bottom on narrow screens, so the
   button steps up over it rather than sitting on top of the enrol action. */
@media (max-width: 1023px) {
  .lux-course-single .lux-top-button {
    bottom: calc(var(--lux-page-gutter) + 68px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 767px) {
  .lux-top-button {
    width: 46px;
    height: 46px;
  }

  .lux-top-button svg {
    width: 19px;
    height: 19px;
  }
}

/* The open mobile menu owns the screen; nothing floats over it. */
body.lux-menu-open .lux-top-button {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .lux-top-button {
    transition: opacity 1ms linear, visibility 0s;
    transform: none;
  }

  .lux-top-button.is-visible {
    transform: none;
  }

  .lux-top-button svg,
  .lux-top-button:hover svg {
    transition: none;
    transform: none;
  }
}

/* Pricing Table — editable Gutenberg cards with responsive premium geometry. */
.lux-pricing-section {
  --lux-pricing-header-surface: linear-gradient(145deg, #123d70, #091e40);
  --lux-pricing-heading: var(--lux-white);
  --lux-pricing-copy: rgba(255, 255, 255, 0.82);
  --lux-pricing-line: rgba(126, 195, 255, 0.3);
  --lux-pricing-panel: linear-gradient(155deg, rgba(7, 35, 80, 0.92), rgba(2, 10, 28, 0.96));
  --lux-pricing-featured-panel: radial-gradient(circle at 88% 8%, rgba(0, 145, 252, 0.28), transparent 34%), linear-gradient(155deg, rgba(10, 56, 128, 0.96), rgba(2, 15, 42, 0.98));

  color: var(--lux-white);
}

.lux-pricing-section > .wp-block-heading {
  color: var(--lux-pricing-section-heading, var(--lux-pricing-heading)) !important;
}

.wp-block-group.lux-pricing-section:is(.is-style-default, .is-style-lux-soft) {
  --lux-pricing-section-heading: var(--lux-dark);
  --lux-pricing-section-copy: var(--lux-text);
}

.lux-pricing-section__intro {
  width: min(calc(100% - (var(--lux-page-gutter) * 2)), 720px);
  max-width: 720px;
  margin: calc(var(--lux-section-heading-space-after) * -0.25) auto clamp(30px, 4vw, 48px);
  color: var(--lux-pricing-section-copy, var(--lux-pricing-copy));
  line-height: var(--lux-leading-lead);
}

.lux-pricing-section__intro:not([style*="font-size"]):not([class*="-font-size"]) {
  font-size: var(--lux-type-lead);
}

/* ---- the price switch ----
   A section can quote the same packages two ways, paid once or paid every
   month. Both prices sit in the markup, each in a block that names the plan it
   belongs to, and the section says which plan it is showing in
   data-lux-billing. Hiding the other one here rather than in the script means
   the page paints one price on the first frame instead of flashing both, and a
   reader with no JavaScript is left with a price rather than two.

   Two plans, so two rules in each pair below. A third plan is one more line in
   each pair, a duplicated button in the switch and a matching block in every
   card: the script reads the plans out of the markup and names none itself. */
.lux-billing-switch {
  width: max-content;
  max-width: 100%;
  margin: 0 auto clamp(30px, 4vw, 44px) !important;
  padding: 5px;
  gap: 4px !important;
  border: 1px solid var(--lux-pricing-line);
  border-radius: 999px;
  background: rgba(2, 10, 28, 0.55);
}

/* Core prints its button rules after the theme, so a pill that only ties with
   them loses. These out-specify rather than tie. */
.lux-billing-switch .wp-block-button .wp-block-button__link {
  min-width: 150px;
  padding: 11px 26px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  background: none !important;
  box-shadow: none !important;
  font-size: 14px;
  text-align: center;
  transition:
    color 200ms ease,
    background 200ms ease;
}

.lux-billing-switch .wp-block-button .wp-block-button__link:hover {
  color: var(--lux-white) !important;
}

/* The chosen pill, in the button gradient the rest of the site uses. */
.lux-pricing-section[data-lux-billing="once"]
  .lux-billing-switch
  a[href$="#lux-billing-once"],
.lux-pricing-section[data-lux-billing="monthly"]
  .lux-billing-switch
  a[href$="#lux-billing-monthly"] {
  color: var(--lux-white) !important;
  background: linear-gradient(
    112deg,
    var(--lux-dark) -18%,
    var(--lux-blue-deep) 68%,
    var(--lux-blue) 118%
  ) !important;
  box-shadow: 0 10px 24px rgba(21, 104, 224, 0.3) !important;
}

/* The price the chosen plan does not own. */
.lux-pricing-section[data-lux-billing="once"] .lux-billing--monthly,
.lux-pricing-section[data-lux-billing="monthly"] .lux-billing--once {
  display: none !important;
}

/* A saving worth reading is worth saying out loud, next to the number rather
   than in a footnote under the grid. */
.lux-pricing-card__price-save {
  align-self: flex-start;
  margin-top: 2px !important;
  padding: 3px 9px;
  border-radius: 999px;
  color: #9de1ff;
  background: rgba(0, 145, 252, 0.15);
  font-size: 12px;
  font-weight: 600;
}

.lux-pricing-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(16px, 2vw, 24px);
}

.lux-pricing-card {
  position: relative;
  isolation: isolate;
  align-items: stretch !important;
  min-width: 0;
  min-height: 540px;
  padding: clamp(24px, 2.5vw, 34px);
  overflow: hidden;
  border: 1px solid var(--lux-pricing-line);
  border-radius: var(--lux-radius-card);
  color: var(--lux-white);
  background: var(--lux-pricing-panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 52px rgba(0, 8, 26, 0.22);
  transition:
    border-color 320ms ease,
    box-shadow 320ms ease,
    transform 320ms var(--lux-motion-out);
}

.lux-pricing-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--lux-blue-deep), var(--lux-active), #b9e7ff, var(--lux-active));
  background-size: 220% 100%;
  content: "";
  animation: lux-pricing-accent 8s linear infinite;
}

.lux-pricing-card::after {
  position: absolute;
  top: -120px;
  right: -110px;
  z-index: -1;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 158, 255, 0.24), transparent 68%);
  content: "";
  opacity: 0.65;
  transition:
    opacity 320ms ease,
    transform 500ms var(--lux-motion-out);
}

.lux-pricing-card:hover,
.lux-pricing-card:focus-within {
  border-color: rgba(145, 214, 255, 0.74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 24px 62px rgba(0, 66, 155, 0.28);
  transform: translateY(-8px);
}

.lux-pricing-card:hover::after,
.lux-pricing-card:focus-within::after {
  opacity: 1;
  transform: translate(-10px, 12px) scale(1.08);
}

.lux-pricing-card--featured {
  border-color: rgba(126, 207, 255, 0.78);
  background: var(--lux-pricing-featured-panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 24px 70px rgba(0, 77, 180, 0.32);
}

.lux-pricing-card > * {
  width: 100%;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.lux-pricing-card__topline {
  width: 100%;
  margin: 0 !important;
}

.lux-pricing-card__eyebrow,
.lux-pricing-card__badge,
.lux-enroll__badge,
.lux-enroll-bar__badge,
.lux-pricing-card__price-label,
.lux-pricing-card__price-value,
.lux-pricing-card__description {
  margin: 0 !important;
}

.lux-pricing-card__eyebrow {
  color: #91d8ff;
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.lux-pricing-card__badge,
.lux-enroll__badge,
.lux-enroll-bar__badge {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid rgba(177, 228, 255, 0.38);
  border-radius: var(--lux-radius-sm);
  color: var(--lux-white);
  background: rgba(0, 145, 252, 0.22);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: 12px;
  line-height: 1;
}

.lux-pricing-card__title {
  margin: 18px 0 10px !important;
  color: var(--lux-white) !important;
  font-weight: 700;
  line-height: 1.15;
}

.lux-pricing-card__title:not([style*="font-size"]):not([class*="-font-size"]) {
  font-size: clamp(26px, 2.4vw, 36px);
}

.lux-pricing-card__description {
  min-height: 78px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.55;
}

.lux-pricing-card__description:not([style*="font-size"]):not([class*="-font-size"]) {
  font-size: var(--lux-type-body);
}

.lux-pricing-card__price {
  min-height: 96px;
  align-items: flex-start !important;
  gap: 5px !important;
  margin: 24px 0 0 !important;
  padding: 22px 0;
  border-top: 1px solid rgba(126, 195, 255, 0.2);
  border-bottom: 1px solid rgba(126, 195, 255, 0.2);
}

.lux-pricing-card__price-label {
  color: rgba(255, 255, 255, 0.56);
  font-size: 13px;
}

.lux-pricing-card__price-value {
  color: var(--lux-white);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-weight: 700;
  line-height: 1.2;
}

.lux-pricing-card__price-value:not([style*="font-size"]):not([class*="-font-size"]) {
  font-size: clamp(21px, 2vw, 28px);
}

.lux-pricing-card__features {
  display: grid;
  margin: 22px 0 28px !important;
  padding: 0 !important;
  gap: 13px;
  color: rgba(255, 255, 255, 0.82);
  list-style: none;
}

.lux-pricing-card__features li {
  position: relative;
  margin: 0;
  padding-left: 28px;
  line-height: 1.45;
}

.lux-pricing-card__features li::before {
  position: absolute;
  top: 0.12em;
  left: 0;
  display: grid;
  width: 19px;
  height: 19px;
  border: 1px solid rgba(121, 211, 255, 0.48);
  border-radius: 50%;
  color: #9de1ff;
  background: rgba(0, 145, 252, 0.13);
  content: "✓";
  place-items: center;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.lux-pricing-card__actions {
  width: 100%;
  margin: auto 0 0 !important;
}

.lux-pricing-card .lux-pricing-card__feature-heading {
  margin: 26px 0 0 !important;
  color: var(--lux-pricing-heading);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 500;
}

.lux-pricing-card__feature-heading + .lux-pricing-card__features {
  margin-top: 14px !important;
  margin-bottom: 0 !important;
}

.lux-pricing-card .lux-pricing-card__limit {
  position: relative;
  margin: 24px 0 !important;
  padding-top: 18px;
  border-top: 1px solid var(--lux-pricing-line);
  color: var(--lux-pricing-copy);
  font-size: var(--lux-type-small);
  line-height: 1.6;
}

.lux-pricing-card__budget-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lux-pricing-budget-help {
  flex: 0 0 auto;
  display: inline-flex;
}

.lux-pricing-budget-help > button {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--lux-pricing-line);
  border-radius: 50%;
  background: rgba(22, 140, 255, 0.1);
  color: var(--lux-pricing-heading);
  font: 600 12px/1 Arial, sans-serif;
  cursor: help;
}

.lux-pricing-budget-help > button:focus-visible {
  outline: 2px solid var(--lux-active);
  outline-offset: 3px;
}

.lux-pricing-budget-tooltip {
  position: absolute;
  z-index: 3;
  inset-inline: 0;
  bottom: calc(100% + 8px);
  padding: 12px 14px;
  border: 1px solid var(--lux-pricing-line);
  border-radius: 8px;
  background: var(--lux-pricing-tooltip-surface, #071d3b);
  color: var(--lux-pricing-heading);
  box-shadow: 0 10px 26px rgba(2, 10, 28, 0.24);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
}

.lux-pricing-budget-help:is(:hover, :focus-within) .lux-pricing-budget-tooltip {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.lux-pricing-card .lux-pricing-card__budget-value {
  margin: 4px 0 0 !important;
  color: var(--lux-pricing-copy);
  font-size: inherit;
  line-height: inherit;
}

.lux-pricing-section .lux-pricing-section__terms {
  width: min(calc(100% - var(--lux-page-gutter) * 2), 1440px);
  margin-inline: auto;
  margin-top: clamp(28px, 3vw, 44px);
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--lux-pricing-line);
  border-radius: var(--lux-radius-card);
  background: var(--lux-pricing-panel);
  color: var(--lux-pricing-copy);
}

.lux-pricing-section__terms .lux-pricing-section__terms-title {
  margin: 0 0 20px !important;
  color: var(--lux-pricing-heading);
  font-size: 23px;
  line-height: 1.4;
}

.lux-pricing-section__terms .lux-pricing-section__terms-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-inline-start: 22px;
  color: var(--lux-pricing-copy);
  line-height: 1.65;
}

/* Detailed packages keep their price and key differences visible; native
   details blocks hold the full, editor-managed scope of each service. */
.lux-pricing-section--compact .lux-pricing-card {
  --lux-pricing-card-inset: clamp(20px, 1.8vw, 26px);
  align-self: start;
  gap: 0 !important;
  min-height: var(--lux-pricing-collapsed-height, 0px);
  padding: var(--lux-pricing-card-inset);
}

.lux-pricing-section--compact .lux-pricing-grid {
  align-items: start;
}

.lux-pricing-section--compact .lux-pricing-card:is(:hover, :focus-within) {
  transform: none;
}

.lux-pricing-section--compact .lux-pricing-card > .lux-pricing-card__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: calc(100% + var(--lux-pricing-card-inset) * 2);
  margin: calc(-1 * var(--lux-pricing-card-inset)) calc(-1 * var(--lux-pricing-card-inset)) 16px !important;
  padding: 20px var(--lux-pricing-card-inset);
  border-bottom: 1px solid var(--lux-pricing-line);
  background: radial-gradient(ellipse at 100% 0%, rgba(22, 140, 255, 0.2), transparent 65%), var(--lux-pricing-header-surface);
  box-shadow: inset 0 1px 0 rgba(126, 207, 255, 0.2);
}

.lux-pricing-section--compact .lux-pricing-card__header .lux-pricing-card__title {
  color: var(--lux-pricing-heading) !important;
  font-size: clamp(22px, 1.85vw, 27px);
  line-height: 1.3;
  padding-inline-start: 12px;
  border-inline-start: 3px solid var(--lux-active);
  letter-spacing: -0.015em;
}

.lux-pricing-section--compact .lux-pricing-card__header .lux-pricing-card__price {
  min-height: 0;
  width: auto;
  margin: 0 !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: baseline !important;
  gap: 7px !important;
  padding: 0;
  border: 0;
}

.lux-pricing-card__header .lux-pricing-card__price-label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--lux-pricing-copy);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.lux-pricing-card__header .lux-pricing-card__price-label::before {
  width: 1px;
  height: 16px;
  background: currentColor;
  opacity: 0.3;
  content: "";
}

.lux-pricing-card__header .lux-pricing-card__price-value {
  white-space: nowrap;
}

.lux-pricing-section--compact .lux-pricing-card__title {
  margin: 0 !important;
}

.lux-pricing-section--compact .lux-pricing-card__price {
  margin: 22px 0 16px !important;
  padding: 18px 0;
}

.lux-pricing-section--compact .lux-pricing-card__price-value:not([style*="font-size"]):not([class*="-font-size"]) {
  font-size: clamp(32px, 2.75vw, 40px);
  letter-spacing: -0.025em;
}

.lux-pricing-section--compact .lux-pricing-card__description {
  min-height: 0;
  line-height: 1.5;
}

.lux-pricing-card .lux-pricing-card__highlights {
  display: grid;
  gap: 10px;
  min-height: 0;
  margin: 16px 0 0 !important;
  padding: 0;
  list-style: none;
  color: var(--lux-pricing-copy);
  font-size: var(--lux-type-body);
  line-height: 1.5;
}

.lux-pricing-card__highlights li {
  position: relative;
  padding-inline-start: 17px;
}

.lux-pricing-card__highlights li::before {
  position: absolute;
  inset-inline-start: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lux-active);
  content: "";
}

.lux-pricing-section--compact .lux-pricing-card__limit {
  min-height: 0;
  margin: 16px 0 12px !important;
  padding-top: 12px;
}

.lux-pricing-card .lux-pricing-card__details {
  width: 100%;
  margin: 0 !important;
  border-top: 1px solid var(--lux-pricing-line);
  color: var(--lux-pricing-copy);
  font-size: var(--lux-type-small);
}

.lux-pricing-card__details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding-block: 14px;
  list-style: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.5;
  color: var(--lux-pricing-heading);
}

.lux-pricing-card__details > summary::-webkit-details-marker { display: none; }
.lux-pricing-card__details > summary::marker { content: ""; }
.lux-pricing-card__details > summary::after { content: "+"; flex: 0 0 auto; color: var(--lux-active); font-size: 24px; }
.lux-pricing-card__details[open] > summary::after { content: "−"; }
.lux-pricing-card__details > summary:focus-visible { outline: 2px solid var(--lux-active); outline-offset: -2px; border-radius: 3px; }
.lux-pricing-card__details .lux-pricing-card__features { margin: 0 0 20px !important; }
.lux-pricing-section--compact .lux-pricing-card__actions { padding-top: 24px; }
.lux-pricing-section__terms .lux-pricing-section__term { margin: 16px 0 0 !important; color: var(--lux-pricing-copy); line-height: 1.75; }

/* A compact comparison layout with a single full-scope disclosure per plan. */
.lux-pricing-section--reference .lux-pricing-card {
  padding: 24px;
  overflow: visible;
  border-radius: 12px;
}

.lux-pricing-section--reference .lux-pricing-card::before,
.lux-pricing-section--reference .lux-pricing-card::after { content: none; }

.lux-pricing-section--reference .lux-pricing-card > .lux-pricing-card__header {
  display: block;
  width: 100%;
  margin: 0 !important;
  padding: 0 0 18px;
  border: 0;
  border-bottom: 1px solid var(--lux-pricing-line);
  background: none;
  box-shadow: none;
}

.lux-pricing-section--reference .lux-pricing-card__header .lux-pricing-card__title {
  padding: 0;
  border: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.015em;
}

.lux-pricing-section--reference .lux-pricing-card__description {
  min-height: 45px;
  margin: 10px 0 18px !important;
  font-size: 14px !important;
  line-height: 1.6;
  color: var(--lux-pricing-copy);
}

.lux-pricing-section--reference .lux-pricing-card__header .lux-pricing-card__price {
  justify-content: flex-start;
  align-items: baseline !important;
  gap: 8px !important;
  margin: 0 !important;
}

.lux-pricing-section--reference .lux-pricing-card__header .lux-pricing-card__limit {
  min-height: 40px;
  margin: 8px 0 0 !important;
  padding: 0;
  border: 0;
  font-size: 12px;
  line-height: 1.65;
}

.lux-pricing-section--reference .lux-pricing-card__budget-heading { align-items: baseline; }
.lux-pricing-section--reference .lux-pricing-budget-help > button { width: 17px; height: 17px; font-size: 11px; }

.lux-pricing-section--reference .lux-pricing-card > .lux-pricing-card__popular {
  position: absolute;
  top: -15px;
  left: 50%;
  width: max-content;
  max-width: 88%;
  transform: translateX(-50%);
  margin: 0 !important;
  padding: 6px 14px;
  border: 1px solid var(--lux-active);
  border-radius: 999px;
  background: var(--lux-blue-deep);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

.lux-pricing-section--reference .lux-pricing-card__highlights {
  gap: 11px;
  margin: 18px 0 !important;
  font-size: 14px;
}

.lux-pricing-section--reference .lux-pricing-card__highlights li { padding-inline-start: 23px; }
.lux-pricing-section--reference .lux-pricing-card__highlights li::before { content: "✓"; top: 0; width: auto; height: auto; background: none; color: var(--lux-active); }
.lux-pricing-section--reference .lux-pricing-card__details { margin-top: auto !important; border: 0; }

.lux-pricing-section--reference .lux-pricing-card__details > summary {
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--lux-pricing-line);
  border-radius: 6px;
  background: rgba(126, 195, 255, 0.07);
  font-size: 13px;
}

.lux-pricing-section--reference .lux-pricing-card__details > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.lux-pricing-section--reference .lux-pricing-card__details[open] > summary::after { transform: rotate(225deg); }
.lux-pricing-section--reference .lux-pricing-card__feature-heading { margin-top: 20px !important; font-size: 15px; }
.lux-pricing-section--reference .lux-pricing-card__features { gap: 9px; margin-top: 12px !important; font-size: 13px; }
.lux-pricing-section--reference .lux-pricing-card__actions { margin-top: 18px !important; padding-top: 0; }
.lux-pricing-section--reference .lux-pricing-card__button .wp-block-button__link { min-height: 50px; padding: 12px 16px; font-size: 14px; }
.lux-pricing-section--reference .lux-pricing-card:not(.lux-pricing-card--featured) .lux-pricing-card__button .wp-block-button__link { background: rgba(126, 195, 255, 0.09); box-shadow: none; }
.lux-pricing-section--reference .lux-pricing-card__button .lux-premium-button__icon,
.lux-pricing-section--reference .lux-pricing-card__button .lux-premium-button__arrow { display: none; }
.lux-pricing-section--reference .lux-pricing-card__button .lux-premium-button__inner { justify-content: center; }
.lux-pricing-section--reference .lux-pricing-card__button .lux-premium-button__copy { align-items: center; text-align: center; }

.lux-pricing-section--unified .lux-pricing-card__header .lux-pricing-card__price {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  margin-top: 18px !important;
}

.lux-pricing-section--unified .lux-pricing-card__price-label {
  margin: 0 !important;
  font-size: 12px;
  color: var(--lux-pricing-copy);
}

.lux-pricing-section--unified .lux-pricing-card__price-label::before {
  content: none;
}

.lux-pricing-section--unified .lux-pricing-card__header .lux-pricing-card__price-value {
  font-size: clamp(28px, 2.5vw, 38px) !important;
  line-height: 1.25;
  white-space: normal;
}

.lux-pricing-section--unified .lux-pricing-card__eyebrow {
  margin: 0 0 10px !important;
  color: var(--lux-pricing-copy);
  font-size: 13px;
}

.lux-pricing-section--unified .lux-pricing-card__actions {
  margin-top: auto !important;
  padding-top: 18px;
}

@media (max-width: 767px) {
  .lux-pricing-section--reference .lux-pricing-card__description,
  .lux-pricing-section--reference .lux-pricing-card__header .lux-pricing-card__limit { min-height: 0; }
}

@media (max-width: 767px) {
  .lux-pricing-section--compact .lux-pricing-card__description,
  .lux-pricing-card .lux-pricing-card__highlights,
  .lux-pricing-section--compact .lux-pricing-card__limit { min-height: 0; }
}

.lux-pricing-card__button,
.lux-pricing-card__button .wp-block-button__link {
  width: 100%;
}

.lux-pricing-section__note {
  width: min(calc(100% - (var(--lux-page-gutter) * 2)), 720px);
  max-width: 720px;
  margin: clamp(28px, 3vw, 40px) auto 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--lux-type-small);
}

@keyframes lux-pricing-accent {
  to {
    background-position: 220% 0;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .lux-pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lux-pricing-card:last-child {
    grid-column: 1 / -1;
    width: calc(50% - 10px);
    justify-self: center;
  }
}

@media (max-width: 767px) {
  .lux-pricing-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .lux-pricing-card {
    min-height: 0;
    padding: 24px 20px;
  }

  .lux-pricing-card__description {
    min-height: 0;
  }

  .lux-pricing-card:hover,
  .lux-pricing-card:focus-within {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lux-pricing-card,
  .lux-pricing-card::after {
    transition-duration: 0.01ms !important;
  }

  .lux-pricing-card::before {
    animation: none !important;
  }
}

/* 404 page — branded not-found screen on the LUX denim surface. */
.lux-error-page {
  /* Match the footer/header denim intensity so the overlapped corners blend. */
  --lux-denim-opacity: 0.48;

  display: flex;
  align-items: center;
  justify-content: center;
  /* Viewport minus the bar — otherwise the page runs a full screen tall below a
     64px header and its centred content sits low, same as the hero did. */
  min-height: calc(100svh - var(--lux-header-h));
  /* Pull the footer up by its corner radius so its rounded top sits ON this
     section: the footer's transparent corners then reveal this section's real
     denim texture underneath, not a flat colour. */
  margin-bottom: calc(var(--lux-section-radius) * -1);
  padding: var(--lux-section-space-y) var(--lux-page-gutter);
  color: var(--lux-white);
  background: var(--lux-blue-surface);
}

/* 404: the whole page is dark, so darken the body too. Otherwise the white body
   surface shows through the footer's rounded top corners against the dark
   section above (invisible on white content pages, glaring here). */
body.error404 {
  background: var(--lux-dark);
}

.lux-error-page__content {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  width: min(100%, 640px);
  margin: 0 auto !important;
  text-align: center;
}

.lux-error-page__code {
  margin: 0;
  color: var(--lux-white);
  font-family: var(--lux-font-display);
  font-size: clamp(104px, 17vw, 196px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
  text-shadow:
    0 0 18px rgba(0, 145, 252, 0.4),
    0 0 44px rgba(24, 120, 241, 0.26);
  animation: lux-error-glow 5.6s var(--lux-motion-out) infinite;
}

@keyframes lux-error-glow {
  0%,
  100% {
    text-shadow:
      0 0 18px rgba(0, 145, 252, 0.4),
      0 0 44px rgba(24, 120, 241, 0.26);
  }

  50% {
    text-shadow:
      0 0 26px rgba(0, 145, 252, 0.62),
      0 0 62px rgba(59, 158, 255, 0.4);
  }
}

.lux-error-page__title {
  margin: clamp(14px, 2vw, 22px) 0 0;
  color: var(--lux-white) !important;
  font-size: var(--lux-type-section-title);
  line-height: var(--lux-leading-section);
}

/* Solid-Ink Rule: primary copy on a dark surface stays solid Cool Paper. */
.lux-error-page__lead {
  width: min(100%, 480px);
  margin: clamp(14px, 1.8vw, 20px) 0 0;
  color: var(--lux-paper);
  font-size: var(--lux-type-lead);
  line-height: var(--lux-leading-lead);
}

.lux-error-page__search {
  width: min(100%, 480px);
  margin: clamp(24px, 3vw, 34px) 0 0 !important;
}

.lux-error-page__search .wp-block-search__inside-wrapper {
  gap: 10px;
}

.lux-error-page__search .wp-block-search__input {
  min-height: var(--lux-button-height);
  padding: 12px 16px;
  border: 1px solid rgba(126, 195, 255, 0.34);
  border-radius: var(--lux-radius-md);
  color: var(--lux-white);
  background: rgba(3, 24, 58, 0.62);
  font-family: "FiraGO", "Sylfaen", sans-serif;
  font-size: var(--lux-type-body);
  transition:
    border-color 240ms ease,
    background 240ms ease,
    box-shadow 240ms ease;
}

.lux-error-page__search .wp-block-search__input::placeholder {
  color: rgba(245, 245, 245, 0.55);
}

.lux-error-page__search .wp-block-search__input:focus {
  border-color: rgba(171, 226, 255, 0.8);
  background: rgba(4, 32, 76, 0.78);
  box-shadow: 0 0 20px rgba(0, 145, 252, 0.22);
  outline: 0;
}

/* button-system.js treats every search button as the header's icon-only round
   control. This one carries a label, so give it back a normal button shape. */
.lux-error-page__search .wp-block-search__button {
  width: auto;
  min-width: 0;
  min-height: var(--lux-button-height);
  padding: 0 22px;
  aspect-ratio: auto;
  border: 1px solid var(--lux-blue-deep);
  border-radius: var(--lux-radius-button) !important;
  color: var(--lux-white);
  background: var(--lux-blue-deep);
  box-shadow: var(--lux-button-shadow);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-button);
  font-weight: 600;
  line-height: 1;
}

.lux-error-page__search .wp-block-search__button:hover,
.lux-error-page__search .wp-block-search__button:focus-visible {
  background: linear-gradient(112deg, var(--lux-dark) -18%, var(--lux-blue-deep) 68%, var(--lux-blue) 118%);
  box-shadow: var(--lux-button-shadow-glow);
}

.lux-error-page__actions {
  gap: 16px !important;
  margin: clamp(24px, 3vw, 34px) 0 0 !important;
}

.lux-error-page__actions .wp-block-button__link {
  min-width: 220px;
}

.lux-error-page__actions .lux-error-page__button--ghost > .wp-block-button__link {
  border-color: rgba(255, 255, 255, 0.5);
  background: transparent;
  box-shadow: none;
}

.lux-error-page__actions .lux-error-page__button--ghost > .wp-block-button__link:hover {
  border-color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: var(--lux-button-shadow-glow);
}

@media (max-width: 477px) {
  .lux-error-page__actions {
    width: 100%;
  }

  .lux-error-page__actions .wp-block-button,
  .lux-error-page__actions .wp-block-button__link {
    width: 100%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lux-error-page__code {
    animation: none !important;
  }
}

/* Breadcrumbs — SEOPress .breadcrumb output as connected arrow tabs (the
   freefrontend "expandable" pattern) in LUX colours: white bordered cells with
   chevron cut-outs, the home cap carrying a house glyph, and hover + current
   page filled brand-blue. Middle crumbs collapse and reveal on hover, so long
   trails stay tidy. Injected before the title on interior views and lifted onto
   the 1440px grid via .alignwide (see functions.php). */
.lux-breadcrumb {
  margin: 24px 0 18px;
  text-align: left;
}

.lux-breadcrumb ol.breadcrumb {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  max-width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  /* The caps face, the same one the eyebrows and section labels use: a crumb is
     a wayfinding label rather than prose, and the taller letterforms sit better
     inside a 40px chip. */
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-meta);
  letter-spacing: 0.03em;
  line-height: 1;
  scrollbar-width: none;
}

.lux-breadcrumb ol.breadcrumb::-webkit-scrollbar {
  display: none;
}

.lux-breadcrumb .breadcrumb-item {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: 0.3s ease;
}

/* The cell of each crumb — links are <a>, the current page is a bare <span>. */
.lux-breadcrumb .breadcrumb-item > a,
.lux-breadcrumb .breadcrumb-item.active > span {
  box-sizing: content-box;
  display: block;
  height: 40px;
  padding: 0 15px 0 25px;
  overflow: hidden;
  color: #757575;
  background: var(--lux-white);
  border: 1px solid #ddd;
  font-size: var(--lux-type-meta);
  line-height: 40px;
  white-space: nowrap;
  text-decoration: none;
  text-overflow: ellipsis;
  transition:
    color 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    max-width 0.3s ease;
}

/* Chevron cut-out between cells: a back triangle in the border colour with a
   front triangle in the cell colour layered over it. */
.lux-breadcrumb .breadcrumb-item::after {
  box-sizing: content-box;
  position: absolute;
  right: -10px;
  top: -1px;
  z-index: 10;
  margin: 0;
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
  border-left: 10px solid #ccc;
  content: "";
  pointer-events: none;
}

.lux-breadcrumb .breadcrumb-item::before {
  box-sizing: content-box;
  position: absolute;
  right: -9px;
  top: -1px;
  z-index: 20;
  margin: 0;
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
  border-left: 10px solid var(--lux-white);
  content: "";
  transition: 0.3s ease;
  pointer-events: none;
}

/* Home crumb → rounded left cap with a house glyph; label kept for a11y. */
.lux-breadcrumb .breadcrumb-item:first-child > a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border-radius: 5px 0 0 5px;
}

.lux-breadcrumb .breadcrumb-item:first-child > a::before {
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11.3 3.3 3 10.8c-.4.3-.2 1 .3 1H5v8c0 .4.3.7.7.7H9.5v-5.2c0-.4.3-.7.7-.7h3.6c.4 0 .7.3.7.7v5.2h3.8c.4 0 .7-.3.7-.7v-8h1.7c.5 0 .7-.7.3-1l-8.3-7.5c-.4-.3-.9-.3-1.3 0z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11.3 3.3 3 10.8c-.4.3-.2 1 .3 1H5v8c0 .4.3.7.7.7H9.5v-5.2c0-.4.3-.7.7-.7h3.6c.4 0 .7.3.7.7v5.2h3.8c.4 0 .7-.3.7-.7v-8h1.7c.5 0 .7-.7.3-1l-8.3-7.5c-.4-.3-.9-.3-1.3 0z'/%3E%3C/svg%3E") no-repeat center / contain;
  content: "";
}

.lux-breadcrumb .breadcrumb-item:first-child > a span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Last crumb → rounded right cap, no chevron. */
.lux-breadcrumb .breadcrumb-item:last-child::before,
.lux-breadcrumb .breadcrumb-item:last-child::after {
  display: none;
}

.lux-breadcrumb .breadcrumb-item:last-child > a,
.lux-breadcrumb .breadcrumb-item:last-child > span {
  padding-right: 20px;
  border-radius: 0 40px 40px 0;
}

/* Collapse middle crumbs; reveal on hover (keeps long trails tidy). */
.lux-breadcrumb .breadcrumb-item:not(:first-child):not(:last-child):not(.active) > a {
  max-width: 78px;
}

/* The trigger is the list item, not the link. The switcher caret sits over the
   chip as a sibling, so with the old link-only trigger the pointer moving onto
   the caret dropped :hover, the chip snapped back, the caret slid out from
   under the pointer and the whole thing oscillated. Hovering the item covers
   the chip and its caret together, so the width settles once. */
.lux-breadcrumb .breadcrumb-item:not(:first-child):not(:last-child):not(.active):hover > a,
.lux-breadcrumb .breadcrumb-item:not(:first-child):not(:last-child):not(.active):focus-within > a {
  max-width: 360px;
}

/* Hover + current page → Kinetic Blue Deep. The Deep-Ink Rule: any blue sitting
   behind text must be --lux-blue-deep; --lux-blue fails WCAG AA on white text. */
.lux-breadcrumb .breadcrumb-item:hover > a,
.lux-breadcrumb .breadcrumb-item > a:focus-visible,
.lux-breadcrumb .breadcrumb-item.active > span {
  color: var(--lux-white);
  background: var(--lux-blue-deep);
  border-color: var(--lux-blue-deep);
}

.lux-breadcrumb .breadcrumb-item:hover::before,
.lux-breadcrumb .breadcrumb-item:focus-within::before {
  border-left-color: var(--lux-blue-deep);
}

@media (max-width: 477px) {
  .lux-breadcrumb .breadcrumb-item:not(:first-child):not(:last-child):not(.active) > a {
    max-width: 60px;
  }
}


/* Sibling switcher inside the parent chip.
   The crumb keeps its own job (it still links to the archive); the caret beside
   it opens the rest of the section. It is a sibling of the link rather than a
   child because the chip clips its own overflow, so it is placed over the chip
   from the list item instead, above the chevron cut-outs. */
.lux-breadcrumb .breadcrumb-item:has(> .lux-crumb-switch) > a {
  padding-right: 36px;
}

.lux-crumb-switch {
  position: absolute;
  top: 50%;
  right: 13px;
  z-index: 25;
  /* Centred with a negative margin rather than a transform. A transformed
     ancestor becomes the containing block for position: fixed, which would trap
     the panel inside this box and hand it back to the crumb list's horizontal
     scroll to clip. */
  margin-top: -12px;
}

/* 24px, not the 18px this used to be. WCAG 2.2 asks for 24 in both directions
   on anything you tap, and a caret sitting inside a crumb has no neighbour far
   enough away to earn the spacing exception. The caret drawn below is still
   5px: only the box around it grew. */
.lux-crumb-switch__toggle {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--lux-radius-sm);
  color: #757575;
  list-style: none;
  cursor: pointer;
  transition:
    color 0.3s ease,
    background 0.3s ease;
}

.lux-crumb-switch__toggle::-webkit-details-marker {
  display: none;
}

.lux-crumb-switch__toggle::after {
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  content: "";
  transition: transform 0.3s ease;
}

.lux-crumb-switch[open] .lux-crumb-switch__toggle::after {
  transform: translateY(1px) rotate(-135deg);
}

/* The chip fills brand blue on hover, so the caret has to come with it. */
.lux-breadcrumb .breadcrumb-item:hover .lux-crumb-switch__toggle,
.lux-crumb-switch[open] .lux-crumb-switch__toggle {
  color: var(--lux-white);
  background: rgba(255, 255, 255, 0.2);
}

.lux-crumb-switch__panel {
  position: fixed;
  z-index: 60;
  display: grid;
  gap: 1px;
  width: max-content;
  max-width: min(320px, 74vw);
  padding: 6px;
  border: 1px solid var(--lux-line, #e4e8ee);
  border-radius: var(--lux-radius-card);
  background: var(--lux-white);
  box-shadow: 0 18px 44px rgba(2, 10, 28, 0.22);
  /* breadcrumb-switch.js opens this as a popover, and the browser's popover
     defaults pin all four sides and centre it with auto margins. The script
     sets top and left itself, so the rest is let go. */
  inset: auto;
  margin: 0;
  overflow: visible;
}

.lux-crumb-switch__item {
  padding: 9px 12px 9px 28px;
  border-radius: var(--lux-radius-sm);
  color: var(--lux-text);
  font-family: "FiraGO", "Sylfaen", sans-serif;
  font-size: var(--lux-type-small);
  line-height: 1.35;
  text-decoration: none;
  transition:
    color 0.3s ease,
    background 0.3s ease;
}

.lux-crumb-switch__item:hover,
.lux-crumb-switch__item:focus-visible {
  color: var(--lux-blue-deep);
  background: rgba(24, 120, 241, 0.07);
}

.lux-crumb-switch__item.is-current {
  position: relative;
  color: var(--lux-blue-deep);
  font-weight: 600;
}

.lux-crumb-switch__item.is-current::before {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lux-active);
  transform: translateY(-50%);
  content: "";
}

/* A title-less page has no masthead to hang the trail on, so it gets a slim
   strip of its own. */
.lux-crumb-strip {
  width: min(1440px, calc(100% - var(--lux-page-gutter) * 2)) !important;
  margin-inline: auto !important;
}

.lux-crumb-strip .lux-breadcrumb {
  margin: 20px 0 0;
}

/* The free-canvas service template has no masthead either, and its first
   section is usually a full-height hero, so the trail floats over that section
   rather than pushing it down. The crumbs are emitted immediately BEFORE their
   anchor block, so the element to place is main's own .lux-breadcrumb child. */
.lux-service-blank {
  position: relative;
}

.lux-crumb-overlay {
  display: none;
}

.lux-service-blank > .lux-breadcrumb {
  position: absolute;
  top: 20px;
  right: 0;
  left: 0;
  z-index: 5;
  width: min(1440px, calc(100% - var(--lux-page-gutter) * 2)) !important;
  margin: 0 auto !important;
}

/* On a phone the hero's own content rides up and the floating trail landed on
   the heading. Putting the trail back into the flow fixed the overlap but left
   a band of page surface above the dark hero, so instead the trail keeps
   floating and the hero opens up enough room for it at the top. */
@media (max-width: 1023px) {
  .lux-service-blank
    .lux-blank-content
    > :first-child:is(.lux-svc-hero, .lux-panel-dark, .lux-reference-hero) {
    padding-top: 84px;
  }
}

/* ==========================================================================
   Services archive (templates/archive-lux_service.html)
   Two independent Query Loops: a configurable featured carousel and the
   service index grid. Icons come from each service's lux_icon meta, surfaced
   as a .lux-icon-* class by the Luxweb — Services plugin.
   ========================================================================== */

/* Eyebrow + the Wing Slash, the system's recurring signature mark. */
.lux-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px !important;
  color: var(--lux-blue-deep);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-meta);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.lux-eyebrow::before {
  width: 6px;
  height: 14px;
  background: currentColor;
  content: "";
  transform: skewX(-18deg);
}

/* Both type archives share the frame; the closing CTA needs the same breathing
   room above the footer on either of them. */
:is(.lux-services-archive, .lux-courses-archive) {
  padding-bottom: var(--lux-section-space-bottom);
  background: var(--lux-surface);
}

/* Dark intro panel — crumbs, hairline, title, lead. */
.lux-panel-dark {
  margin-top: var(--lux-section-space-y) !important;
  padding: clamp(26px, 3vw, 44px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--lux-radius-card);
  color: var(--lux-paper);
  background: var(--lux-blue-surface);
}

/* Marker block that only exists so the crumbs land at the top of the panel. */
.lux-panel-crumbs {
  display: none;
}

/* The class list carries has-css-opacity because that is what the separator
   block writes; without it Gutenberg quietly rewrites every template it opens.
   Core pairs that class with opacity .4, so the selector here has to outrank
   it rather than simply state the value. */
.wp-block-separator.lux-panel-rule {
  height: 1px;
  margin: 18px 0 !important;
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  opacity: 1;
}

.lux-panel-dark .lux-services-title,
.lux-panel-dark .lux-blog-title {
  color: var(--lux-white) !important;
}

.lux-panel-dark .lux-services-lead,
.lux-panel-dark .lux-blog-lead {
  color: var(--lux-paper);
}

/* A title-less page has no masthead to hang the trail on, so it gets a slim
   strip of its own on the light surface. */
.lux-crumb-strip {
  width: min(1440px, calc(100% - var(--lux-page-gutter) * 2)) !important;
  margin-inline: auto !important;
}

.lux-crumb-strip .lux-breadcrumb {
  margin: 20px 0 0;
}

/* Breadcrumb on the dark panel: solid denim cells so the chevron geometry holds. */
:is(.lux-panel-dark, .lux-crumb-strip:has(+ .wp-block-post-content > .lux-reference-section.is-style-lux-denim:first-child)) .lux-breadcrumb {
  margin: 0;
}

:is(.lux-panel-dark, .lux-crumb-strip:has(+ .wp-block-post-content > .lux-reference-section.is-style-lux-denim:first-child)) .lux-breadcrumb .breadcrumb-item > a {
  color: var(--lux-paper);
  background: #0b2450;
  border-color: rgba(126, 195, 255, 0.24);
}

:is(.lux-panel-dark, .lux-crumb-strip:has(+ .wp-block-post-content > .lux-reference-section.is-style-lux-denim:first-child)) .lux-breadcrumb .breadcrumb-item::before {
  border-left-color: #0b2450;
}

:is(.lux-panel-dark, .lux-crumb-strip:has(+ .wp-block-post-content > .lux-reference-section.is-style-lux-denim:first-child)) .lux-breadcrumb .breadcrumb-item::after {
  border-left-color: rgba(126, 195, 255, 0.3);
}

:is(.lux-panel-dark, .lux-crumb-strip:has(+ .wp-block-post-content > .lux-reference-section.is-style-lux-denim:first-child)) .lux-breadcrumb .breadcrumb-item:hover > a,
:is(.lux-panel-dark, .lux-crumb-strip:has(+ .wp-block-post-content > .lux-reference-section.is-style-lux-denim:first-child)) .lux-breadcrumb .breadcrumb-item > a:focus-visible,
:is(.lux-panel-dark, .lux-crumb-strip:has(+ .wp-block-post-content > .lux-reference-section.is-style-lux-denim:first-child)) .lux-breadcrumb .breadcrumb-item.active > span {
  color: var(--lux-white);
  background: var(--lux-blue-deep);
  border-color: var(--lux-blue-deep);
}

:is(.lux-panel-dark, .lux-crumb-strip:has(+ .wp-block-post-content > .lux-reference-section.is-style-lux-denim:first-child)) .lux-breadcrumb .breadcrumb-item:hover::before {
  border-left-color: var(--lux-blue-deep);
}


/* The caret rides the denim chip, so it takes the panel's own text colour. */
:is(.lux-panel-dark, .lux-svc-hero) .lux-crumb-switch__toggle {
  color: var(--lux-paper);
}

/* A dark first section gets the denim chips too, so the floating trail matches
   the masthead rather than dropping white cards onto the hero. */
.lux-service-blank:has(
    .lux-blank-content > :first-child:is(.lux-svc-hero, .lux-panel-dark, .lux-reference-hero)
  )
  > .lux-breadcrumb
  .breadcrumb-item
  > a {
  color: var(--lux-paper);
  background: #0b2450;
  border-color: rgba(126, 195, 255, 0.24);
  text-decoration: none;
}

.lux-service-blank:has(
    .lux-blank-content > :first-child:is(.lux-svc-hero, .lux-panel-dark, .lux-reference-hero)
  )
  > .lux-breadcrumb
  .breadcrumb-item::before {
  border-left-color: #0b2450;
}

.lux-service-blank:has(
    .lux-blank-content > :first-child:is(.lux-svc-hero, .lux-panel-dark, .lux-reference-hero)
  )
  > .lux-breadcrumb
  .breadcrumb-item::after {
  border-left-color: rgba(126, 195, 255, 0.3);
}

.lux-service-blank:has(
    .lux-blank-content > :first-child:is(.lux-svc-hero, .lux-panel-dark, .lux-reference-hero)
  )
  > .lux-breadcrumb
  .lux-crumb-switch__toggle {
  color: var(--lux-paper);
}

.lux-services-title {
  margin: 0 !important;
  color: var(--lux-surface-heading, var(--lux-dark)) !important;
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif !important;
  font-weight: 600;
  font-size: var(--lux-type-hero);
  line-height: var(--lux-leading-hero);
  text-wrap: balance;
}

.lux-services-lead {
  width: min(100%, 62ch);
  margin: 20px 0 0 !important;
  font-size: var(--lux-type-lead);
  line-height: var(--lux-leading-lead);
}

/* ---- the loop ---- */
.lux-services-query-showcase {
  width: min(
    calc(100% - var(--lux-page-gutter) - var(--lux-page-gutter)),
    var(--lux-content)
  );
  max-width: var(--lux-content) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.lux-services-loop {
  margin-top: clamp(30px, 3.4vw, 48px) !important;
}

:is(.lux-services-list, .lux-services-grid) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--lux-gap) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

:is(.lux-services-list, .lux-services-grid) > .wp-block-post {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: var(--lux-radius-card);
  background: var(--lux-white);
  box-shadow: 0 4px 24px rgba(2, 10, 28, 0.08);
  transition:
    box-shadow 320ms ease,
    transform 320ms var(--lux-motion-out);
}

:is(.lux-services-list, .lux-services-grid) > .wp-block-post:hover,
:is(.lux-services-list, .lux-services-grid) > .wp-block-post:focus-within {
  box-shadow: var(--lux-button-shadow-glow);
  transform: translateY(-4px);
}

/* Featured image only exists on the flagship; hide the empty slot elsewhere. */
.lux-service-media {
  margin: 0 !important;
}

.lux-service-media:empty {
  display: none;
}

.lux-service-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lux-service-body {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: clamp(24px, 2.2vw, 32px);
}

/* Icon tile: ::before is the 44px gradient tile, ::after the 24px white glyph. */
.lux-service-body::before {
  position: absolute;
  top: clamp(24px, 2.2vw, 32px);
  left: clamp(24px, 2.2vw, 32px);
  width: 44px;
  height: 44px;
  border: 1px solid var(--lux-icon-tile-border);
  border-radius: var(--lux-radius-sm);
  background: var(--lux-icon-tile-background);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  content: "";
  transition:
    background 320ms var(--lux-motion-out),
    transform 320ms var(--lux-motion-out);
}

.lux-service-body::after {
  position: absolute;
  top: calc(clamp(24px, 2.2vw, 32px) + 10px);
  left: calc(clamp(24px, 2.2vw, 32px) + 10px);
  width: 24px;
  height: 24px;
  background: var(--lux-white);
  content: "";
  -webkit-mask: var(--lux-service-icon) no-repeat center / contain;
  mask: var(--lux-service-icon) no-repeat center / contain;
}

.wp-block-post:hover .lux-service-body::before,
.wp-block-post:focus-within .lux-service-body::before {
  background: var(--lux-icon-tile-background-hover);
  transform: scale(1.06);
}

.lux-service-title {
  display: -webkit-box;
  min-height: calc(2em * var(--lux-leading-title));
  margin: 64px 0 0 !important;
  overflow: hidden;
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-card-title);
  font-weight: 600;
  line-height: var(--lux-leading-title);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.lux-service-title a {
  color: var(--lux-dark);
  transition: color var(--lux-transition);
}

.wp-block-post:hover .lux-service-title a {
  color: var(--lux-blue-deep);
}

.lux-service-excerpt {
  margin: 10px 0 0 !important;
}

.lux-services-grid .lux-service-excerpt {
  min-height: calc(3em * var(--lux-leading-body));
}

.lux-service-excerpt p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: var(--lux-type-body);
  line-height: var(--lux-leading-body);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Capability chips (core/post-terms output). */
.lux-service-caps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0 !important;
  padding-top: 0;
}

.lux-services-grid .lux-service-caps {
  align-content: flex-start;
  min-height: 68px;
}

/* Chips are plain labels — the plugin unlinks them, so style the spans too. */
.lux-service-caps > :where(a, span, li):not(.wp-block-post-terms__separator) {
  display: inline-block;
  padding: 8px 12px;
  border-radius: var(--lux-radius-sm);
  color: var(--lux-blue-deep);
  background: rgba(59, 158, 255, 0.15);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-meta);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}

.lux-service-caps .wp-block-post-terms__separator {
  display: none;
}

/* "See all" affordance: an underline, never bare coloured text with an arrow.
   button-system.js falls back to .lux-ui-button--primary for any read-more that
   opts out of the Premium treatment, so the button fill is undone here. */
.lux-service-more,
.lux-service-more.lux-ui-button,
.lux-service-more.lux-ui-button--primary,
.lux-post-more,
.lux-post-more.lux-ui-button,
.lux-post-more.lux-ui-button--primary {
  display: inline-block;
  min-height: 0;
  margin: 14.4px 0 0 !important;
  padding: 0 0 2px;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  color: var(--lux-blue-deep);
  background: none;
  box-shadow: none;
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-meta);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  transition: color var(--lux-transition);
}

.lux-service-more::before,
.lux-post-more::before {
  display: none !important;
}

.lux-service-more {
  align-self: flex-start;
}

.wp-block-post:hover .lux-service-more {
  color: var(--lux-dark);
}

/* ---- configurable featured services carousel ---- */
.lux-services-featured {
  margin-top: clamp(30px, 3.4vw, 48px) !important;
}

.lux-services-featured .lux-post-carousel__query {
  position: relative;
  width: 100%;
  max-width: none !important;
}

.lux-services-featured .lux-services-featured-track {
  grid-auto-columns: 100%;
  gap: var(--lux-gap) !important;
  padding: 4px 2px 18px !important;
}

.lux-services-featured .lux-services-featured-track > .wp-block-post {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: 320px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--lux-radius-card);
  color: var(--lux-paper);
  background: var(--lux-blue-surface);
  box-shadow: none;
}

.lux-services-featured .lux-service-media {
  position: relative;
  min-height: 320px;
}

.lux-services-featured .lux-service-media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 52%, rgba(2, 10, 28, 0.94) 100%);
  content: "";
  pointer-events: none;
}

.lux-services-featured .lux-service-body {
  justify-content: center;
}

.lux-services-featured .lux-service-title {
  font-size: var(--lux-type-section-title);
}

.lux-services-featured .lux-service-title a {
  color: var(--lux-white);
}

.lux-services-featured .lux-service-excerpt {
  color: var(--lux-paper);
}

.lux-services-featured .lux-service-caps :where(a, span, li):not(.wp-block-post-terms__separator),
.lux-services-featured .lux-service-more {
  color: var(--lux-white);
}

.lux-services-featured .lux-service-caps :where(a, span, li):not(.wp-block-post-terms__separator) {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(21, 104, 224, 0.42);
}

.lux-services-featured .lux-service-more {
  border-bottom-color: var(--lux-glow);
}

.lux-services-featured .wp-block-post:hover .lux-service-title a,
.lux-services-featured .wp-block-post:hover .lux-service-more {
  color: var(--lux-white);
}

.lux-services-featured .lux-post-carousel__controls {
  position: absolute;
  z-index: 5;
  bottom: 42px;
  right: 28px;
  left: auto;
  display: flex;
  grid-template-columns: none;
  justify-content: flex-start;
  gap: 14px;
  width: auto;
  margin: 0;
}

.lux-services-featured .lux-post-carousel__status {
  display: none;
}

.lux-services-featured .lux-post-carousel__controls[hidden] {
  display: none !important;
}

.lux-services-featured .lux-post-carousel__button {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  color: var(--lux-blue-deep);
  background: var(--lux-white);
  box-shadow:
    0 10px 26px rgba(2, 10, 28, 0.24),
    0 0 0 1px rgba(59, 158, 255, 0.12);
}

.lux-services-featured .lux-post-carousel__button svg {
  width: 19px;
  height: 19px;
  stroke-width: 2.2;
}

.lux-services-featured .lux-post-carousel__button:hover,
.lux-services-featured .lux-post-carousel__button:focus-visible {
  color: var(--lux-white);
  background: linear-gradient(135deg, var(--lux-blue-deep), var(--lux-blue));
  box-shadow:
    0 12px 30px rgba(21, 104, 224, 0.3),
    0 0 0 3px rgba(59, 158, 255, 0.14) !important;
}

/* Editor-managed featured projects use the shared carousel and service frame.
   The result fields stay optional; an empty editor group adds no front-end box. */
.lux-featured-projects {
  --lux-featured-project-surface: var(--lux-blue-surface);
  --lux-featured-project-heading: var(--lux-white);
  --lux-featured-project-copy: var(--lux-paper);
  --lux-featured-project-muted: rgba(255, 255, 255, 0.72);
  --lux-featured-project-line: rgba(255, 255, 255, 0.18);
  --lux-featured-project-result: rgba(255, 255, 255, 0.08);
}

.lux-featured-projects .lux-services-featured-track > .lux-featured-project {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  border-color: var(--lux-featured-project-line);
  background: var(--lux-featured-project-surface);
}

.lux-featured-projects .lux-featured-project__image {
  align-self: stretch;
  min-width: 0;
  min-height: 360px;
  aspect-ratio: auto;
}

.lux-featured-projects .lux-featured-project__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lux-featured-projects .lux-featured-project__image::after {
  display: none;
}

.lux-featured-projects .lux-featured-project__image figcaption {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  margin: 0;
  padding: 10px 18px;
  color: var(--lux-white);
  background: rgba(2, 10, 28, 0.72);
  font-size: var(--lux-type-small);
}

.lux-featured-projects .lux-featured-project__body {
  min-width: 0;
  gap: 16px;
  padding: clamp(24px, 3vw, 40px);
  padding-bottom: 104px;
  color: var(--lux-featured-project-copy);
}

.lux-featured-projects .lux-featured-project__body > * {
  max-width: 750px;
  margin: 0 !important;
}

.lux-featured-projects .lux-featured-project__title {
  color: var(--lux-featured-project-heading) !important;
}

.lux-featured-projects :is(.lux-featured-project__description, .lux-featured-project__work, .lux-featured-project__related) {
  color: var(--lux-featured-project-copy);
}

.lux-featured-projects :is(.lux-featured-project__eyebrow, .lux-featured-project__related) {
  font-size: var(--lux-type-small);
}

.lux-featured-projects .lux-featured-project__eyebrow {
  color: var(--lux-featured-project-muted);
}

.lux-featured-projects .lux-featured-project__work {
  padding-left: 22px;
  font-size: var(--lux-type-small);
  line-height: var(--lux-leading-body);
}

.lux-featured-projects .lux-featured-project__body a:not(.wp-element-button) {
  color: var(--lux-featured-project-heading);
  text-underline-offset: 5px;
}

.lux-featured-projects .lux-featured-project__body a:is(:hover, :focus-visible) {
  text-decoration-thickness: 2px;
}

.lux-featured-projects .lux-featured-project__result {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--lux-featured-project-line);
  border-radius: var(--lux-radius-card);
  background: var(--lux-featured-project-result);
}

.lux-featured-projects .lux-featured-project__result > p {
  margin: 0 !important;
  font-size: var(--lux-type-small);
}

.lux-featured-projects .lux-featured-project__result > .lux-featured-project__position {
  font-size: var(--lux-type-card-title);
  font-weight: 700;
}

body:not(.editor-styles-wrapper) .lux-featured-project__result:not(:has(> p:not(:empty))) {
  display: none;
}

.lux-featured-projects .lux-post-carousel__status {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  width: clamp(82px, 9vw, 130px);
}

.lux-featured-projects .lux-post-carousel__counter {
  min-width: 0;
  color: var(--lux-featured-project-copy);
}

.lux-featured-projects .lux-post-carousel__progress {
  background: var(--lux-featured-project-line);
}

.lux-featured-projects.lux-carousel-controls-visible.lux-post-carousel--single
  .lux-post-carousel__controls:not([hidden]) {
  display: flex;
}

.lux-featured-projects .lux-post-carousel__button:disabled {
  opacity: 0.45;
  box-shadow: none;
  cursor: default;
}

.wp-block-group.is-style-lux-bare.lux-featured-projects .lux-post-carousel__controls {
  justify-content: flex-start;
  width: auto;
  margin: 0 !important;
}

@media (max-width: 899px) {
  .lux-featured-projects .lux-services-featured-track > .lux-featured-project {
    grid-template-columns: minmax(0, 1fr);
  }

  .lux-featured-projects .lux-featured-project__image {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 639px) {
  .lux-featured-projects.lux-services-featured .lux-post-carousel__controls {
    left: 24px;
    right: auto;
  }
}

/* ---- flagship: the first service spans the grid as a dark panel ---- */
.lux-services-list > .wp-block-post:first-child {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 1.05fr 0.95fr;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--lux-paper);
  background: var(--lux-blue-surface);
}

.lux-services-list > .wp-block-post:first-child .lux-service-media {
  position: relative;
  min-height: 320px;
}

.lux-services-list > .wp-block-post:first-child .lux-service-media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 52%, rgba(2, 10, 28, 0.94) 100%);
  content: "";
}

.lux-services-list > .wp-block-post:first-child .lux-service-body {
  justify-content: center;
}

.lux-services-list > .wp-block-post:first-child .lux-service-title {
  font-size: var(--lux-type-section-title);
}

.lux-services-list > .wp-block-post:first-child .lux-service-title a {
  color: var(--lux-white);
}

.lux-services-list > .wp-block-post:first-child .lux-service-excerpt {
  color: var(--lux-paper);
}

.lux-services-list > .wp-block-post:first-child .lux-service-caps a {
  color: var(--lux-glow);
}

.lux-services-list > .wp-block-post:first-child .lux-service-more {
  color: var(--lux-glow);
}

.lux-services-list > .wp-block-post:first-child:hover .lux-service-title a,
.lux-services-list > .wp-block-post:first-child:hover .lux-service-more {
  color: var(--lux-white);
}

/* ---- course cards ----
   A course sells on numbers the services archive never needs: what it costs,
   what that price replaces, and the three facts a student checks before
   reading a word of the description. The shell stays the service card's —
   white, one shadow, a lift on hover — and only the body changes: title,
   excerpt, a divided strip of facts, then the price and the enrol button
   pinned to the foot, so every card in a row ends on the same two lines
   however long its title runs.

   The price deliberately does not sit beside the title. The big number is the
   last thing read before the button, the old price is a quiet grey rather than
   an alarm red, and the discount rides in the same blue chip the capability
   tags already use, so a sale reads as information instead of a shout. */
.lux-course-card__media {
  margin: 0 !important;
}

.lux-course-card__media:empty {
  display: none;
}

.lux-course-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* Course media fills its frame consistently in both the slider and grid.
   Size the frame, not the intrinsic image, so cover can crop proportionally. */
.lux-courses-archive :is(.lux-service-media, .lux-course-card__media) {
  overflow: hidden;
}

.lux-courses-archive .lux-course-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
}

.lux-courses-archive :is(.lux-service-media, .lux-course-card__media) > a {
  display: block;
  width: 100%;
  height: 100%;
}

.lux-courses-archive :is(.lux-service-media, .lux-course-card__media) img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 50% 50%;
}

.lux-course-card__body {
  --lux-course-step: 16px;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: clamp(20px, 1.9vw, 26px);
}

.lux-course-card__title {
  display: -webkit-box;
  margin: 0 !important;
  overflow: hidden;
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-card-title);
  font-weight: 600;
  line-height: var(--lux-leading-title);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.lux-course-card__title a {
  color: var(--lux-dark);
  transition: color var(--lux-transition);
}

.wp-block-post:hover .lux-course-card__title a {
  color: var(--lux-blue-deep);
}

/* The bottom margin is what keeps the strip below off the description: the
   auto margin down there only ever eats free space, never this. */
.lux-course-card__excerpt {
  margin: var(--lux-course-step) 0 var(--lux-course-step) !important;
}

.lux-course-card__excerpt p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: rgba(44, 45, 45, 0.78);
  font-size: var(--lux-type-small);
  line-height: var(--lux-leading-body);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Facts strip: equal columns divided by hairlines, one cell per field. */
.lux-course-card__facts {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  margin: auto 0 0 !important;
  padding: var(--lux-course-step) 0;
  border-top: 1px solid rgba(2, 10, 28, 0.1);
  border-bottom: 1px solid rgba(2, 10, 28, 0.1);
}

/* Each cell hands its two rows back to the strip, so a label that wraps to a
   second line pushes every value down together instead of stepping one cell
   out of line with its neighbours. */
.lux-course-fact {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  gap: 6px;
  min-width: 0;
  padding: 0 12px;
}

.lux-course-fact:first-child {
  padding-left: 0;
}

.lux-course-fact:last-child {
  padding-right: 0;
}

.lux-course-fact + .lux-course-fact {
  border-left: 1px solid rgba(2, 10, 28, 0.1);
}

/* An unfilled field drops its whole cell, and the strip goes with it when the
   course fills none of the three. Hiding a cell leaves the structural
   :first-child on something invisible, so the two cases where the leftmost
   visible cell would keep a divider are undone by hand. */
.lux-course-fact:has(> .lux-course-fact__value:empty) {
  display: none;
}

.lux-course-card__facts:not(:has(> .lux-course-fact > .lux-course-fact__value:not(:empty))) {
  display: none;
}

.lux-course-card__facts:has(> .lux-course-fact--level > .lux-course-fact__value:empty)
  > .lux-course-fact--duration,
.lux-course-card__facts:has(> .lux-course-fact--duration > .lux-course-fact__value:empty)
  > .lux-course-fact--format {
  padding-left: 0;
  border-left: 0;
}

.lux-course-card__facts:has(> .lux-course-fact--level > .lux-course-fact__value:not(:empty))
  > .lux-course-fact--format {
  padding-left: 12px;
  border-left: 1px solid rgba(2, 10, 28, 0.1);
}

.lux-course-fact__label {
  align-self: start;
  margin: 0 !important;
  color: rgba(44, 45, 45, 0.55);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.01em;
  line-height: 1.25;
  overflow-wrap: break-word;
}

.lux-course-fact__value {
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: end;
  margin: 0 !important;
  color: var(--lux-dark);
  font-size: var(--lux-type-small);
  font-weight: 600;
  line-height: 1.25;
}

.lux-course-fact__value::before {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background: var(--lux-blue-deep);
  content: "";
  -webkit-mask: var(--lux-fact-icon) no-repeat center / contain;
  mask: var(--lux-fact-icon) no-repeat center / contain;
}

.lux-course-fact--level {
  --lux-fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='M5 20v-4M12 20v-9M19 20V5'/%3E%3C/svg%3E");
}

.lux-course-fact--duration {
  --lux-fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}

.lux-course-fact--format {
  --lux-fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3a14 14 0 0 1 0 18a14 14 0 0 1 0-18z'/%3E%3C/svg%3E");
}

/* Price foot. The facts strip above carries the auto margin that pins this
   block to the bottom of the card, so the price line stays level across a row
   of uneven titles and descriptions. */
.lux-course-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: var(--lux-course-step) 0 0 !important;
  padding: 0;
}

.lux-course-card__amount {
  margin: 0 !important;
  color: var(--lux-dark);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: clamp(22px, 1.9vw, 27px);
  font-weight: 700;
  line-height: 1.1;
}

.lux-course-card__note {
  margin: 0 !important;
  color: rgba(44, 45, 45, 0.6);
  font-size: var(--lux-type-meta);
  line-height: 1.2;
}

/* Old price and badge close the line on the right, whichever of the two the
   course actually carries. */
.lux-course-card__old {
  margin: 0 0 0 auto !important;
  color: rgba(44, 45, 45, 0.5);
  font-size: var(--lux-type-body);
  line-height: 1.2;
  text-decoration: line-through;
}

.lux-course-card__badge {
  margin: 0 !important;
  padding: 6px 10px;
  border-radius: var(--lux-radius-sm);
  color: var(--lux-blue-deep);
  background: rgba(59, 158, 255, 0.18);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-small);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.lux-course-card__old:empty + .lux-course-card__badge {
  margin-left: auto !important;
}

.lux-course-card__amount:empty,
.lux-course-card__note:empty,
.lux-course-card__old:empty,
.lux-course-card__badge:empty {
  display: none !important;
}

.lux-course-card__price:not(:has(> p:not(:empty))) {
  display: none;
}

/* When the strip above is empty the pin moves down to whatever still prints. */
.lux-course-card__facts:not(:has(> .lux-course-fact > .lux-course-fact__value:not(:empty)))
  + .lux-course-card__price {
  margin-top: auto !important;
}

.lux-course-card__facts:not(:has(> .lux-course-fact > .lux-course-fact__value:not(:empty)))
  + .lux-course-card__price:not(:has(> p:not(:empty)))
  + .lux-course-card__cta {
  margin-top: auto !important;
}

/* The enrol action is an outlined button the width of the card, not the
   underlined "read more" the services archive uses. button-system.js tags
   every read-more as a primary button, so the fill it adds is undone here. */
.lux-course-card__cta,
.lux-course-card__cta.lux-ui-button,
.lux-course-card__cta.lux-ui-button--primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--lux-button-height);
  margin: var(--lux-course-step) 0 0 !important;
  padding: 10px 18px;
  overflow: hidden;
  border: 1px solid var(--lux-blue-deep);
  border-radius: var(--lux-radius-button);
  color: var(--lux-blue-deep);
  background: none;
  box-shadow: none;
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-button);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-align: center;
  transition:
    color var(--lux-transition),
    border-color var(--lux-transition),
    background var(--lux-transition);
}

.lux-course-card__cta::before {
  display: none !important;
}

.wp-block-post:hover .lux-course-card__cta,
.wp-block-post:focus-within .lux-course-card__cta,
.lux-course-card__cta:hover,
.lux-course-card__cta:focus-visible {
  color: var(--lux-white);
  background: var(--lux-blue-deep);
}

@media (max-width: 479px) {
  .lux-course-card__facts {
    grid-auto-flow: row;
    grid-template-rows: none;
    gap: 12px;
  }

  .lux-course-fact {
    display: block;
    grid-row: auto;
  }

  .lux-course-fact__value {
    display: flex;
    margin-top: 6px !important;
  }

  .lux-course-fact,
  .lux-course-fact:first-child,
  .lux-course-card__facts > .lux-course-fact--duration,
  .lux-course-card__facts:has(> .lux-course-fact--level > .lux-course-fact__value:not(:empty)) > .lux-course-fact--format {
    padding: 0;
    border-left: 0;
  }

  .lux-course-fact + .lux-course-fact {
    padding-top: 12px;
    border-top: 1px solid rgba(2, 10, 28, 0.1);
  }
}

/* ---- the featured slide, told in full ----
   The slide used to carry a title, a sentence and a row of topic chips, while
   the card below it in the grid answered every question a buyer actually asks:
   how long, what level, what it costs, how many places are left. The slide is
   the larger of the two and was saying the less. It now runs the same facts,
   the same seats and the same price, in the dark panel's own colours. */
.lux-services-featured .lux-service-body {
  gap: clamp(14px, 1.5vw, 18px);
}

/* The decorative tile went. On a card in the grid it marks a service at a
   glance; on a slide this size it is a blue square above a headline that says
   the same thing, and the headline was starting 64 pixels down to make room
   for it. */
.lux-services-featured .lux-service-body::before,
.lux-services-featured .lux-service-body::after {
  display: none;
}

/* The title reserved a second line whether it needed one or not, which is
   right in a grid where every card has to end level and wrong here, where one
   slide stands alone: a one line headline left forty empty pixels under itself
   and pushed everything below it away. The body's gap sets the rhythm now, and
   every child gives up its own margin so that one value governs all of it. */
.lux-services-featured .lux-service-title {
  min-height: 0;
  margin-top: 0 !important;
}

.lux-services-featured .lux-service-excerpt {
  margin: 0 !important;
}

.lux-services-featured .lux-course-card__facts {
  grid-template-rows: auto auto;
  margin: 0 !important;
  padding: clamp(14px, 1.5vw, 18px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.lux-services-featured .lux-course-fact + .lux-course-fact,
.lux-services-featured
  .lux-course-card__facts:has(> .lux-course-fact--level > .lux-course-fact__value:not(:empty))
  > .lux-course-fact--format {
  border-left-color: rgba(255, 255, 255, 0.14);
}

.lux-services-featured .lux-course-fact__label {
  color: rgba(245, 245, 245, 0.6);
}

.lux-services-featured .lux-course-fact__value {
  color: var(--lux-white);
}

.lux-services-featured .lux-course-fact__value::before {
  background: var(--lux-glow);
}

/* The seats block keeps its shape and changes only its colours. */
.lux-services-featured .lux-slide-seats {
  margin: 0 !important;
}

.lux-services-featured .lux-seats {
  padding: 0;
  border: 0;
  background: none;
}

.lux-services-featured .lux-seats__left {
  color: var(--lux-white);
  font-size: var(--lux-type-body);
}

.lux-services-featured .lux-seats.is-scarce .lux-seats__left {
  color: var(--lux-white);
}

.lux-services-featured .lux-seats__filled {
  color: rgba(245, 245, 245, 0.6);
}

.lux-services-featured .lux-seats__track {
  height: 6px;
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.16);
}

.lux-services-featured .lux-seats__bar {
  background: linear-gradient(90deg, var(--lux-active), var(--lux-glow));
}

.lux-services-featured .lux-seats.is-full .lux-seats__bar {
  background: rgba(255, 255, 255, 0.42);
}

.lux-services-featured .lux-course-card__price {
  margin: 0 !important;
  padding: 0;
}

.lux-services-featured .lux-course-card__amount {
  color: var(--lux-white);
  font-size: clamp(26px, 2.2vw, 32px);
}

.lux-services-featured .lux-course-card__note {
  color: rgba(245, 245, 245, 0.6);
}

/* On a card the row is narrow and pushing these to the far edge keeps the two
   prices apart. A slide is three times as wide, and the same rule left the old
   price stranded at the other end of the panel, small and unread. Here they
   close ranks with the number they refer to. */
.lux-services-featured .lux-course-card__price {
  gap: 8px 14px;
}

.lux-services-featured .lux-course-card__old,
.lux-services-featured .lux-course-card__old:empty + .lux-course-card__badge {
  margin-left: 0 !important;
}

.lux-services-featured .lux-course-card__old {
  color: rgba(245, 245, 245, 0.5);
  font-size: var(--lux-type-lead);
}

/* Standing on their own the two prices ran together as one long number. On the
   card the old price is pushed to the far edge and the gap does the parting;
   here they sit side by side, so a hairline does it instead. It belongs to the
   old price, which means it disappears with it. */
.lux-services-featured .lux-course-card__old::before {
  display: inline-block;
  width: 1px;
  height: 22px;
  margin-right: 15px;
  background: rgba(255, 255, 255, 0.22);
  content: "";
  vertical-align: -4px;
}

.lux-services-featured .lux-course-card__badge {
  padding: 7px 12px;
  border: 1px solid rgba(177, 228, 255, 0.5);
  color: var(--lux-white);
  background: rgba(0, 145, 252, 0.22);
  font-size: var(--lux-type-body);
}

/* The slide is a two column panel, so its foot has room the card does not: the
   controls sit bottom right and the price should not run under them. */
.lux-services-featured .lux-service-more {
  margin-top: 2px !important;
}

@media (max-width: 639px) {
  .lux-services-featured .lux-course-card__facts {
    grid-auto-flow: row;
    grid-template-rows: none;
    gap: 12px;
  }

  /* Stacked, every fact starts at the same left edge: the dividers and the
     indent that separated them side by side would only stagger them here. The
     format cell is set by a :has() rule, so it takes one to undo it. */
  .lux-services-featured .lux-course-fact,
  .lux-services-featured .lux-course-card__facts > .lux-course-fact--duration,
  .lux-services-featured .lux-course-card__facts:has(> .lux-course-fact--level > .lux-course-fact__value:not(:empty)) > .lux-course-fact--format {
    padding: 0;
    border-left: 0;
  }

  .lux-services-featured .lux-course-fact + .lux-course-fact {
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  .lux-services-featured .lux-course-fact__value {
    font-size: 17px;
  }
}

/* ---- per-service glyphs ----
   The glyph is a custom property, so it is declared on whichever element
   carries the lux-icon-* class: the Query Loop post wrapper on the archive,
   the <body> on a service single. Both inherit down to the tile that paints
   it, and services without lux_icon meta fall back to the :root default. */
:root {
  --lux-service-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M3 12h18'/%3E%3C/svg%3E");
}

.lux-icon-web {
  --lux-service-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='14' rx='2'/%3E%3Cpath d='M3 9h18M8 21h8'/%3E%3C/svg%3E");
}

.lux-icon-marketing {
  --lux-service-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l5-5 4 3 5-7 4 4'/%3E%3Cpath d='M3 21h18'/%3E%3C/svg%3E");
}

.lux-icon-social {
  --lux-service-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.2'/%3E%3Cpath d='M5.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M18.5 5.5a3 3 0 0 1 0 5'/%3E%3C/svg%3E");
}

.lux-icon-design {
  --lux-service-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l4.5-1.5L19 8a2.1 2.1 0 0 0-3-3L5.5 15.5 4 20z'/%3E%3Cpath d='M14.5 6.5l3 3'/%3E%3C/svg%3E");
}

.lux-icon-photo {
  --lux-service-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5h3l1.5-2h9L18 8.5h3v11H3z'/%3E%3Ccircle cx='12' cy='14' r='3.4'/%3E%3C/svg%3E");
}

.lux-icon-video {
  --lux-service-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='12.5' height='12' rx='2'/%3E%3Cpath d='M15.5 10.5L21 7.5v9l-5.5-3z'/%3E%3C/svg%3E");
}

.lux-icon-security {
  --lux-service-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5.5c0 4.3-2.9 8-7 9.5-4.1-1.5-7-5.2-7-9.5V6z'/%3E%3Cpath d='M9.2 12.2l2 2 3.6-3.9'/%3E%3C/svg%3E");
}

/* A service can explicitly opt out of the decorative icon in Gutenberg. */
.lux-icon-none .lux-service-body::before,
.lux-icon-none .lux-service-body::after {
  display: none;
}

.lux-icon-none .lux-service-title {
  margin-top: 0 !important;
}

/* ---- no icon chosen, no tile ----
   Until the services carried their own 1200x630 image the generic plus was
   better than an empty corner. Every service card now opens with that image,
   and a gradient square under a photograph is a second picture answering the
   question the photograph already answered, with the title starting 64 pixels
   down to make room for it.

   So the tile follows an explicit choice rather than appearing by default. The
   control stays where it was, in the editor: pick a glyph and the tile comes
   back on that card alone. The services archive grid is the only place the tile
   was ever painted, the featured slide above it having turned the tile off for
   the same reason a while ago. */
.wp-block-post:not([class*="lux-icon-"]) .lux-service-body::before,
.wp-block-post:not([class*="lux-icon-"]) .lux-service-body::after {
  display: none;
}

.wp-block-post:not([class*="lux-icon-"]) .lux-service-title {
  margin-top: 0 !important;
}

/* ---- closing call to action ---- */
.lux-services-cta {
  position: relative;
  isolation: isolate;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(26px, 4vw, 58px);
  width: min(calc(100% - (var(--lux-page-gutter) * 2)), 920px) !important;
  margin: var(--lux-section-space-y) auto 0 !important;
  padding: clamp(28px, 3.2vw, 42px);
  overflow: hidden;
  border: 1px solid rgba(112, 198, 255, 0.18);
  border-radius: var(--lux-radius-card);
  color: var(--lux-paper);
  background:
    radial-gradient(circle at 100% 0%, rgba(0, 145, 252, 0.26), transparent 34%),
    linear-gradient(122deg, #051737 0%, #082758 100%);
  box-shadow: 0 18px 38px rgba(2, 10, 28, 0.12);
}

.lux-services-cta::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--lux-sheen);
  mix-blend-mode: screen;
  opacity: 0.3;
  content: "";
  pointer-events: none;
}

.lux-services-cta::after {
  position: absolute;
  bottom: 0;
  left: clamp(28px, 3.2vw, 42px);
  width: 54px;
  height: 2px;
  background: var(--lux-active);
  content: "";
  pointer-events: none;
}

.lux-services-cta :is(.lux-services-cta__copy, .lux-services-cta__aside) {
  position: relative;
  z-index: 1;
}

.lux-services-cta__copy {
  min-width: 0;
}

.lux-services-cta__eyebrow {
  margin: 0 0 10px !important;
  color: rgba(167, 220, 255, 0.92);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

.lux-services-cta__title {
  max-width: 560px;
  margin: 0 !important;
  color: var(--lux-white) !important;
  font-size: clamp(24px, 2.15vw, 32px);
  font-weight: 700;
  line-height: 1.18;
}

.lux-services-cta__lead {
  max-width: 555px;
  margin: 10px 0 0 !important;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--lux-type-small);
  line-height: 1.55;
}

.lux-services-cta__aside {
  display: grid;
  /* One column, as wide as the widest control. Sizing the column rather than
     each item is what lets the phone chip below match the button with
     width: 100%; with justify-items: start every item sized to its own label
     instead, so a long button label left the chip visibly narrower. */
  grid-template-columns: minmax(var(--lux-cta-control-w, 260px), max-content);
  justify-content: start;
  gap: 10px;
}

.lux-services-cta__actions {
  margin: 0 !important;
}

/* min-width, not width: the label never wraps, so a long one (the archive's
   "კონსულტაციის დაჯავშნა") has to be allowed to widen the control instead of
   spilling out of it. Anything stacked beneath it matches via width: 100%. */
.lux-services-cta__actions > .wp-block-button,
.lux-services-cta__button,
.lux-services-cta__actions > .wp-block-button > .wp-block-button__link,
.lux-services-cta__button > .wp-block-button__link {
  width: auto;
  min-width: var(--lux-cta-control-w, 260px);
}

/* Solid white on the denim panel: the highest contrast available here, and
   flat — no border, no drop shadow. The label never wraps, so `center` centres
   the label itself rather than a label-plus-arrow pair. */
.lux-services-cta__actions > .wp-block-button > .wp-block-button__link,
.lux-services-cta__button > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  min-height: 52px;
  padding: 10px 24px;
  border: 0;
  border-radius: var(--lux-radius-button);
  color: var(--lux-dark);
  background: var(--lux-white);
  box-shadow: none;
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-button);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition:
    color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease;
}

.lux-services-cta__actions > .wp-block-button > .wp-block-button__link::after,
.lux-services-cta__button > .wp-block-button__link::after {
  color: inherit;
  content: "→";
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  transition: transform 220ms var(--lux-motion-out);
}

.lux-services-cta__actions > .wp-block-button > .wp-block-button__link:hover,
.lux-services-cta__actions > .wp-block-button > .wp-block-button__link:focus-visible,
.lux-services-cta__button > .wp-block-button__link:hover,
.lux-services-cta__button > .wp-block-button__link:focus-visible {
  color: var(--lux-dark);
  background: var(--lux-white);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
}

.lux-services-cta__actions > .wp-block-button > .wp-block-button__link:hover::after,
.lux-services-cta__actions > .wp-block-button > .wp-block-button__link:focus-visible::after,
.lux-services-cta__button > .wp-block-button__link:hover::after,
.lux-services-cta__button > .wp-block-button__link:focus-visible::after {
  transform: translateX(4px);
}

/* Below the panel's own padding the 260px floor no longer fits, so the controls
   go full-width instead of eating into the right-hand padding. Dropping the
   floor to 0 on the variable reaches every control that reads it, including the
   phone chip defined further down. */
@media (max-width: 620px) {
  .lux-services-cta {
    --lux-cta-control-w: 0px;
  }

  .lux-services-cta__aside {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
  }

  .lux-services-cta__actions,
  .lux-services-cta__actions > .wp-block-button,
  .lux-services-cta__button,
  .lux-services-cta__actions > .wp-block-button > .wp-block-button__link,
  .lux-services-cta__button > .wp-block-button__link {
    width: 100%;
  }

  /* The label never wraps, so its min-content sets the floor; trimming the side
     padding is what lets the control fit the panel at this width. */
  .lux-services-cta__actions > .wp-block-button > .wp-block-button__link,
  .lux-services-cta__button > .wp-block-button__link {
    padding: 10px 14px;
  }
}

.lux-services-cta__availability {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  line-height: 1.35;
}

@media (max-width: 1023px) {
  :is(.lux-services-list, .lux-services-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lux-services-list > .wp-block-post:first-child {
    grid-template-columns: 1fr;
  }

  .lux-services-list > .wp-block-post:first-child .lux-service-media {
    min-height: 220px;
  }

  .lux-services-list > .wp-block-post:first-child .lux-service-media::after {
    background: linear-gradient(180deg, transparent 45%, rgba(2, 10, 28, 0.94) 100%);
  }
}

@media (max-width: 639px) {
  :is(.lux-services-list, .lux-services-grid) {
    grid-template-columns: minmax(0, 1fr);
  }

  .lux-services-featured .lux-services-featured-track {
    grid-auto-columns: 100% !important;
    gap: 14px !important;
  }

  .lux-services-featured .lux-services-featured-track > .wp-block-post {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .lux-services-featured .lux-service-media {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .lux-services-featured .lux-service-media::after {
    background: linear-gradient(180deg, transparent 58%, rgba(2, 10, 28, 0.82) 100%);
  }

  .lux-services-featured .lux-service-body {
    padding-bottom: 88px;
  }

  .lux-services-featured .lux-post-carousel__controls {
    bottom: 34px;
    right: 18px;
    left: auto;
    gap: 12px;
    width: auto;
  }

  .lux-services-featured .lux-post-carousel__button {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }

  .lux-services-cta {
    grid-template-columns: minmax(0, 1fr);
    align-items: flex-start;
    gap: 20px;
    padding: 28px;
  }

  .lux-services-cta__aside {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
  }

  .lux-services-cta__actions,
  .lux-services-cta__actions > .wp-block-button,
  .lux-services-cta__button,
  .lux-services-cta__actions > .wp-block-button > .wp-block-button__link,
  .lux-services-cta__button > .wp-block-button__link {
    width: 100% !important;
  }

  .lux-services-cta__actions > .wp-block-button > .wp-block-button__link,
  .lux-services-cta__button > .wp-block-button__link {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lux-services-list > .wp-block-post:hover,
  .lux-services-list > .wp-block-post:focus-within,
  .lux-services-grid > .wp-block-post:hover,
  .lux-services-grid > .wp-block-post:focus-within {
    transform: none;
  }

  .wp-block-post:hover .lux-service-body::before {
    transform: none;
  }
}

/* ==========================================================================
   Full-bleed masthead — the header band and the page intro fuse into a single
   denim mass that runs edge to edge, with content held to the 1440 grid.
   Interior pages only: the homepage keeps its transparent header so it can
   still float over the video hero.
   ========================================================================== */
/* The panel carries the whole masthead surface — the header sits on top of it
   with no background of its own, so the gradient and weave stay continuous.
   Element-relative radial gradients cannot be matched across two boxes, which
   is why the header must not paint its own. */
body:not(.home) .lux-panel-dark {
  --lux-denim-opacity: 0.48;

  margin-top: 0 !important;
  padding: clamp(24px, 2.6vw, 36px) 0 clamp(28px, 3vw, 44px);
  border: 0;
  border-radius: 0;
}

.lux-panel-inner {
  width: min(
    calc(100% - var(--lux-page-gutter) - var(--lux-page-gutter)),
    var(--lux-content)
  );
  max-width: var(--lux-content);
  margin-right: auto !important;
  margin-left: auto !important;
}

/* ==========================================================================
   THE HEADER — one bar, every template, no exceptions.

   Why it is a flat tone and not --lux-blue-surface: that surface is a stack of
   radial gradients whose stops are positioned against their own element, so a
   78px bar and any tall dark section below it always resolve to different
   colours. That mismatch is the step we chased from page to page. A flat tone
   has no internal variation, so it cannot fail to line up with anything.

   The value is measured, not picked: sampling the rendered page showed the dark
   sections resolve to ~#022046 directly under the bar, so the bar is set to
   exactly that. The weave stays off here — it blends soft-light through a
   brightness(2.1) filter, which lifts the tone toward grey and is what made the
   bar read washed out beside the page.

   `background` must never be animated or swapped between states. The resting
   value would be an image and the stuck value a colour; the image cannot
   interpolate so it drops at once while the colour fades up from transparent,
   leaving the bar see-through mid-transition — that was the white flashing
   through from <main>, and the panel showing through as a second box.
   ========================================================================== */
:root {
  --lux-denim-crest: #022046;
  /* A denim built for a bar: the sweep runs along its length, so the tone at
     any point depends on x, never on how tall the element is. The brand's
     --lux-blue-surface cannot be reused here — its radial stops are sized to
     their own element, which is what made the bar and the panel disagree. */
  --lux-denim-bar:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 62%),
    linear-gradient(90deg, #01193c 0%, #0a2f63 46%, #02204a 100%);
}

.lux-reference-header {
  --lux-denim-opacity: 0.18;

  background: var(--lux-denim-bar);
  /* Separation is carried by shadow, not by a drawn line. A light hairline on a
     dark surface reads as a hard seam; a dark shadow darkens the denim beneath
     the bar instead, so the edge is felt rather than seen. The faint highlight
     that remains is barely-there and only keeps the edge from going mushy. */
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 0.5px 0 rgba(0, 0, 0, 0.14),
    0 14px 30px rgba(0, 0, 0, 0.42);
  transition: box-shadow 320ms ease;
}

/* Weave stays, but quietly: it blends soft-light through a brightness(2.1)
   filter, so anything higher lifts the bar toward grey. */
.lux-reference-header::after {
  display: block;
}

.lux-reference-header__inner::after {
  display: none;
}

.lux-reference-header__inner {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* Stuck, the bar keeps the surface it had at rest — only the shadow deepens. */
.lux-reference-header.is-scrolled {
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 0.5px 0 rgba(0, 0, 0, 0.18),
    0 18px 40px rgba(0, 0, 0, 0.5);
}

/* The sticky wrapper needs the same fill: <main> behind it is white, so any
   fractional gap scroll rounding opens under the bar would flash through. */
header.wp-block-template-part.lux-sticky-header-shell,
header.wp-block-template-part:has(.lux-reference-header) {
  background: var(--lux-denim-crest);
}

/* Thin vertical hairlines between the top-level navigation items, in the same
   language as the logo divider. Submenu items are left alone. */
@media (min-width: 1024px) {
  .lux-reference-nav
    .wp-block-navigation__container:not(.wp-block-navigation__submenu-container)
    > .wp-block-navigation-item
    + .wp-block-navigation-item::after {
    position: absolute;
    top: 50%;
    left: calc(clamp(14px, 1.45vw, 24px) / -2);
    width: 1px;
    height: 18px;
    background: linear-gradient(
      to bottom,
      transparent,
      rgba(255, 255, 255, 0.18) 50%,
      transparent
    );
    content: "";
    pointer-events: none;
    transform: translateY(-50%);
  }
}

.lux-panel-dark {
  margin-top: -1px !important;
}

/* The tools slot no longer exists in the header, so close the column it used to
   occupy and drop the divider that pointed at it. */
.lux-reference-header__inner:not(:has(.lux-reference-header__tools)) .lux-reference-nav::after {
  display: none;
}

@media (min-width: 1024px) {
  .lux-reference-header__inner:not(:has(.lux-reference-header__tools)) {
    grid-template-columns: minmax(210px, 253px) minmax(0, 1fr);
  }

  .lux-reference-header__inner:not(:has(.lux-reference-header__tools)) .lux-reference-nav {
    justify-content: flex-end;
  }

  /* Geometry only — the surface and its scrolled state are defined above. */
  .lux-reference-header__inner {
    height: 64px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

}

/* The same empty tools column is still declared below the desktop bar, where it
   does more damage: the grid reserves a third track the header no longer fills,
   so the burger stops 43px short of the gutter and ends up leaning on the
   wordmark instead of sitting opposite it. Two tracks, button hard right.

   The wordmark was also running to 70vw, two thirds of a phone screen for a
   logo that is read once. Narrowing it is what actually opens the gap. */
@media (max-width: 1023px) {
  .lux-reference-header__inner:not(:has(.lux-reference-header__tools)) {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .lux-reference-header__inner:not(:has(.lux-reference-header__tools))
    .lux-reference-nav {
    grid-column: 2;
    justify-self: end;
  }
}

@media (max-width: 767px) {
  .lux-reference-logo img {
    width: min(200px, 55vw) !important;
  }
}

/* ==========================================================================
   Single post (templates/single.html)
   Dark masthead (breadcrumb, category, title, author + date), then a reading
   column with a sticky sidebar (table of contents + ad slot), then related
   posts pulled from the same category.
   ========================================================================== */
.lux-single {
  padding-bottom: var(--lux-section-space-bottom);
  background: var(--lux-surface);
}

.lux-single-cat {
  margin: 0 0 16px !important;
}

.lux-single-cat a {
  padding: 7px 12px;
  border-radius: var(--lux-radius-sm);
  color: var(--lux-glow);
  background: rgba(59, 158, 255, 0.16);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-meta);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  transition: background var(--lux-transition);
}

.lux-single-cat a:hover {
  background: rgba(59, 158, 255, 0.3);
}

.lux-single-cat .wp-block-post-terms__separator {
  display: none;
}

.lux-single-title {
  margin: 0 !important;
  color: var(--lux-white) !important;
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif !important;
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.15;
  text-wrap: balance;
}

/*
 * Optional per-entry masthead mode. Gutenberg exposes this as
 * “მხოლოდ Breadcrumb-ის დატოვება”; the content area remains untouched so the
 * editor can provide its own H1 and introduction below the masthead.
 */
body.lux-breadcrumb-only .lux-single-masthead {
  padding-top: clamp(18px, 2vw, 26px);
  padding-bottom: clamp(18px, 2vw, 26px);
}

body.lux-breadcrumb-only .lux-single-masthead :is(
  .lux-panel-rule,
  .lux-single-title,
  .lux-single-meta,
  .lux-single-lead,
  .lux-page-lead,
  .wp-block-post-excerpt
) {
  display: none !important;
}

.lux-single-meta {
  align-items: center !important;
  gap: 8px 16px !important;
  margin: clamp(16px, 1.8vw, 22px) 0 0 !important;
  color: var(--lux-paper);
  font-size: var(--lux-type-small);
}

.lux-single-meta .lux-single-author {
  margin: 0 !important;
  color: var(--lux-white);
  font-weight: 600;
}

.lux-single-meta .lux-single-author a {
  color: inherit;
}

.lux-single-meta .lux-single-date {
  position: relative;
  margin: 0 0 0 16px !important;
  color: rgba(245, 245, 245, 0.82);
}

.lux-single-meta .lux-single-date::before {
  position: absolute;
  top: 50%;
  left: -10px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  content: "";
  opacity: 0.6;
  transform: translateY(-50%);
}

/* ---- body: reading column + sticky sidebar ---- */
/* 70 / 30 split, capped to the 1440 grid and centred. */
.lux-single-body {
  display: grid !important;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: clamp(28px, 3vw, 48px);
  align-items: start;
  width: min(1440px, calc(100% - var(--lux-page-gutter) * 2)) !important;
  margin: clamp(34px, 4vw, 56px) auto 0 !important;
  padding-inline: 0 !important;
}

/* The article body is a white, rounded card lifted off the page surface; the
   featured image bleeds to its top edge. */
.lux-single-main {
  --lux-card-pad: clamp(22px, 2.4vw, 40px);

  min-width: 0;
  padding: var(--lux-card-pad);
  overflow: hidden;
  border-radius: 16px;
  background: var(--lux-white);
  box-shadow: 0 4px 24px rgba(2, 10, 28, 0.07);
}

/* Size a blog's white card around its reading measure. A percentage column
   with a second centred 750px wrapper added another gutter inside the card. */
.single-post .lux-single:not(.lux-case):not(.lux-service-single):not(.lux-course-single) {
  --lux-article-frame: calc(
    var(--lux-article-measure) + var(--lux-article-padding) * 2 +
    var(--lux-article-sidebar) + var(--lux-article-gap)
  );
}

.single-post
  .lux-single:not(.lux-case):not(.lux-service-single):not(.lux-course-single)
  .lux-single-main {
  --lux-card-pad: var(--lux-article-padding);
}

@media (min-width: 1024px) {
  .single-post
    .lux-single:not(.lux-case):not(.lux-service-single):not(.lux-course-single)
    :is(.lux-single-body, .lux-panel-inner) {
    width: min(
      var(--lux-article-frame),
      calc(100% - var(--lux-page-gutter) * 2)
    ) !important;
  }

  .single-post
    .lux-single:not(.lux-case):not(.lux-service-single):not(.lux-course-single)
    .lux-single-body {
    grid-template-columns: minmax(0, 1fr) minmax(280px, var(--lux-article-sidebar));
    gap: var(--lux-article-gap);
  }
}

.lux-page-body {
  grid-template-columns: minmax(0, 1fr);
  width: min(960px, calc(100% - var(--lux-page-gutter) * 2)) !important;
}

.lux-page-main .lux-post-content > :not(.alignwide):not(.alignfull) {
  max-width: 720px;
  margin-right: auto;
  margin-left: auto;
}

.lux-page-main .lux-post-content > :is(.alignwide, .alignfull) {
  max-width: none;
}

.lux-single-cover {
  margin: calc(var(--lux-card-pad) * -1) calc(var(--lux-card-pad) * -1) clamp(24px, 3vw, 36px) !important;
  overflow: hidden;
  border-radius: 0;
}

.lux-single-cover:empty {
  display: none;
}

/* The cover on a single post is content, not decoration: a certificate, a site
   screenshot or a portrait shot must not lose its top and bottom to a 16/9 box.
   The box takes the image's shape instead of the image taking the box's.

   Archive and card thumbnails keep their fixed ratios on purpose. There a
   uniform grid is the point, and cropping a photograph costs nothing. */
.lux-single-cover img {
  display: block;
  width: 100%;
  height: auto;
}

/* Post body — comfortable measure, generous rhythm. */
.lux-post-content {
  color: var(--lux-text);
  font-size: var(--lux-type-lead);
  line-height: 1.75;
  /* Long unbroken tokens (URLs, pasted strings) wrap instead of overflowing. */
  overflow-wrap: break-word;
}

.lux-post-content > * {
  margin-block: 0 0;
}

/* Blog copy must outrank core's later flow-layout margin reset. */
.lux-post-content > * + *,
body.single-post .lux-single-main .lux-post-content > * + *,
body.single-post .lux-single-main .lux-post-content > .wp-block-group:not([class*="lux-"]) > * + * {
  margin-top: 1.25em;
}

.lux-post-content :is(h2, h3, h4) {
  margin-top: 1.7em !important;
  color: var(--lux-dark);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-weight: 600;
  line-height: 1.3;
  /* Clear the sticky bar when jumped to from the table of contents. */
  scroll-margin-top: calc(var(--lux-header-h) + 24px);
}

.lux-post-content h2 {
  font-size: clamp(23px, 2vw, 30px);
}

.lux-post-content h3 {
  font-size: clamp(20px, 1.7vw, 24px);
}

.lux-post-content :is(img, figure) {
  border-radius: var(--lux-radius-card);
}

.lux-post-content a:not(.wp-element-button) {
  color: var(--lux-blue-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lux-post-content blockquote {
  margin-inline: 0;
  padding: 6px 0 6px 22px;
  border-left: 3px solid var(--lux-blue);
  color: var(--lux-dark);
  font-size: 1.05em;
}

/* ---- share row ---- */
.lux-single-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: clamp(30px, 3.4vw, 44px);
  padding-top: clamp(22px, 2.4vw, 30px);
  border-top: 1px solid var(--lux-line, #e4e8ee);
}

.lux-single-share__label {
  margin-right: 4px;
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-meta);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #5f6b7a;
}

.lux-share {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(21, 104, 224, 0.22);
  border-radius: var(--lux-radius-sm);
  color: var(--lux-blue-deep);
  background: rgba(24, 120, 241, 0.06);
  cursor: pointer;
  transition:
    color var(--lux-transition),
    border-color var(--lux-transition),
    background var(--lux-transition),
    transform var(--lux-transition);
}

.lux-share svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

.lux-share--copy svg {
  fill: none;
}

.lux-share:hover,
.lux-share:focus-visible {
  color: var(--lux-white);
  border-color: var(--lux-blue-deep);
  background: var(--lux-blue-deep);
  transform: translateY(-2px);
}

.lux-share.is-copied {
  color: var(--lux-white);
  border-color: #1d9e75;
  background: #1d9e75;
}

/* ---- sticky sidebar ---- */
.lux-single-aside {
  position: sticky;
  top: calc(var(--lux-header-h) + 20px);
  display: grid;
  gap: 20px;
  align-self: start;
}

.lux-toc {
  padding: 20px 22px;
  border: 1px solid var(--lux-line, #e4e8ee);
  border-radius: var(--lux-radius-card);
  background: var(--lux-white);
  box-shadow: 0 4px 24px rgba(2, 10, 28, 0.05);
}

.lux-toc__title {
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--lux-line, #e4e8ee);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-meta);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--lux-dark);
}

.lux-toc__nav {
  display: grid;
  gap: 2px;
  max-height: min(60vh, 460px);
  overflow-y: auto;
}

.lux-toc__link {
  display: block;
  padding: 7px 10px 7px 14px;
  border-left: 2px solid transparent;
  border-radius: 0 5px 5px 0;
  color: #5f6b7a;
  font-size: var(--lux-type-small);
  line-height: 1.4;
  transition:
    color var(--lux-transition),
    border-color var(--lux-transition),
    background var(--lux-transition);
}

.lux-toc__link--h3 {
  padding-left: 26px;
  font-size: var(--lux-type-meta);
}

.lux-toc__link:hover {
  color: var(--lux-blue-deep);
  background: rgba(24, 120, 241, 0.06);
}

.lux-toc__link.is-active {
  color: var(--lux-blue-deep);
  border-left-color: var(--lux-blue-deep);
  background: rgba(24, 120, 241, 0.08);
  font-weight: 600;
}

.lux-ad-slot {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 260px;
  padding: 24px;
  border: 1px dashed rgba(21, 104, 224, 0.34);
  border-radius: var(--lux-radius-card);
  background: rgba(24, 120, 241, 0.04);
  text-align: center;
}

.lux-ad-slot__tag {
  padding: 4px 10px;
  border-radius: var(--lux-radius-pill);
  color: var(--lux-blue-deep);
  background: rgba(24, 120, 241, 0.12);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lux-ad-slot__text {
  margin: 0;
  color: #6b7684;
  font-size: var(--lux-type-small);
}

/* ---- related posts ---- */
.lux-related {
  width: min(1440px, calc(100% - var(--lux-page-gutter) * 2)) !important;
  margin: clamp(52px, 6vw, 84px) auto 0 !important;
  padding-inline: 0 !important;
}

.lux-related .wp-block-query,
.lux-related .lux-blog-list {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

.lux-related__title {
  margin: 0 0 clamp(22px, 2.4vw, 32px) !important;
  color: var(--lux-dark);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-weight: 600;
  font-size: var(--lux-type-section-title);
  line-height: var(--lux-leading-section);
}

.lux-related__empty {
  color: #6b7684;
}

/* Card excerpts stay short: three lines, then ellipsis — and hard tokens wrap
   so a space-less string can't blow the card open. Applies to every blog card,
   archive and related alike. */
.lux-blog-list .lux-post-excerpt {
  overflow-wrap: break-word;
}

.lux-blog-list .lux-post-excerpt p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

@media (max-width: 1023px) {
  .lux-single-body {
    grid-template-columns: minmax(0, 1fr);
    width: min(760px, calc(100% - var(--lux-page-gutter) * 2)) !important;
  }

  /* Sidebar drops below the article and stops sticking. */
  .lux-single-aside {
    position: static;
    grid-template-columns: minmax(0, 1fr);
  }

  /* On a course the enrolment card leads instead: video, price and the register
     button come before the reading. display: contents lifts the rail's children
     into the page grid so they can be ordered one by one, which keeps the
     other-courses list at the end where it belongs. */
  .lux-course-single .lux-single-aside {
    display: contents;
  }

  .lux-course-single .lux-enroll {
    order: -1;
  }

  .lux-course-single .lux-countdown {
    order: -1;
  }

  .lux-course-single .lux-single-main {
    order: 0;
  }

  .lux-course-single .lux-svc-others {
    order: 1;
  }

  /* The rail is a desktop affordance; on a phone the pinned bar below does the
     job and the sections are a short scroll apart anyway. */
  .lux-course-single .lux-toc {
    display: none;
  }

  .lux-course-single .lux-enroll-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: grid !important;
    /* The price leads and takes the free space; the button is sized by its own
       label. The other way round the button swallowed the row and left the
       price at 45px with nowhere for the discount to sit. */
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px var(--lux-page-gutter);
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--lux-blue-surface);
    box-shadow: 0 -8px 28px rgba(2, 10, 28, 0.28);
  }

  /* A course with no price has nothing to pin. */
  .lux-course-single .lux-enroll-bar:not(:has(.lux-enroll-bar__price:not(:empty))) {
    display: none !important;
  }

  /* Price and discount share one baseline, so the bar stays one line tall. */
  .lux-enroll-bar__prices {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 5px;
    min-width: 0;
  }

  .lux-enroll-bar__price {
    margin: 0 !important;
    color: var(--lux-white);
    font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
    font-size: var(--lux-type-section-title);
    font-weight: 700;
    line-height: 1.1;
  }

  .lux-enroll-bar__old {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--lux-type-lead);
    line-height: 1.2;
    text-decoration: line-through;
  }

  /* Compact form of the shared badge: same colours, less padding, because it
     sits beside a number rather than at the top of a pricing card. */
  .lux-enroll-bar__badge {
    align-self: center;
    padding: 3px 7px;
    font-size: var(--lux-type-meta);
  }

  .lux-enroll-bar__old:empty {
    display: none;
  }

  .lux-enroll-bar__badge:empty {
    display: none;
  }

  .lux-enroll-bar__actions {
    margin: 0 !important;
  }

  .lux-enroll-bar__actions .wp-block-button,
  .lux-enroll-bar__actions .wp-block-button__link {
    width: auto;
  }

  /* Trimmed so the price, the old price and the discount clear one line at
     375px; the button keeps nowrap and simply widens if its label ever grows. */
  .lux-enroll-bar__actions .wp-block-button__link {
    padding-inline: 13px;
    white-space: nowrap;
  }

  /* Keep the pinned bar from covering the end of the footer. The bar measures
     83px with its safe-area padding, so this clears it with room to spare. */
  body:has(.lux-course-single .lux-enroll-bar) .wp-site-blocks {
    padding-bottom: 96px;
  }
}

/* Below this width the price, the struck price and the discount cannot share a
   line, and the chip ends up stranded on its own under the number. The struck
   price is the one of the three that carries least, so it steps aside and the
   row stays level. */
@media (max-width: 359px) {
  .lux-enroll-bar__old {
    display: none;
  }

  .lux-enroll-bar__actions .wp-block-button__link {
    padding-inline: 10px;
  }

  .lux-toc__nav {
    max-height: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lux-share:hover,
  .lux-share:focus-visible {
    transform: none;
  }
}

/* ==========================================================================
   Service single (single-lux_service.html)
   Reuses the single-post shell (.lux-single-body / -main / -aside); adds the
   "what's included" chips, a contact CTA card and an other-services list.
   ========================================================================== */
.lux-service-single {
  padding-bottom: var(--lux-section-space-bottom);
  background: var(--lux-surface);
}

/* ---- section patterns (patterns/service-*.php) ----
   These are inserted into the post content, so each service picks its own
   sections and order. They size to the reading column, never to the viewport. */
/* The gap between sections is one value, --lux-svc-gap, read on both sides
   of a section: its top margin here, and the bottom padding below when a
   toned section follows. Two values used to set the two sides, so the space
   above a section and the space below it never matched. */
.lux-svc-section {
  --lux-svc-gap: clamp(32px, 3.6vw, 48px);
  margin-top: var(--lux-svc-gap) !important;
}

/* A plain section ends where its last line or card ends, which is right above
   another plain one: that section's top margin opens the gap. A toned section
   (soft, denim, pearl) brings its own ground and starts flush, so a plain
   section above it closed straight onto the band's edge, cards touching the
   blue. The plain one keeps the same gap inside itself instead. */
.lux-svc-section:not(.is-style-lux-soft, .is-style-lux-denim, .is-style-lux-pearl):has(
    + .lux-svc-section:is(.is-style-lux-soft, .is-style-lux-denim, .is-style-lux-pearl)
  ) {
  padding-bottom: var(--lux-svc-gap);
}

.lux-svc-section__title {
  margin: 0 0 14px !important;
  color: var(--lux-dark);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-weight: 600;
  font-size: var(--lux-type-card-title);
  line-height: var(--lux-leading-title);
}

/* Prose headings inside .lux-post-content carry a forced 1.7em top margin so
   article copy breathes. These sections set their own rhythm on the wrapper,
   so their headings opt back out — the selector has to outrank
   `.lux-post-content :is(h2, h3, h4)`, hence the :is() wrapper. */
.lux-post-content :is(
  .lux-svc-section__title,
  .lux-svc-step__title,
  .lux-services-cta__title,
  .lux-svc-plan__title,
  .lux-svc-case__title,
  .lux-value-card__title
) {
  margin-top: 0 !important;
}

.lux-svc-section__intro {
  margin: 0 0 clamp(20px, 2.2vw, 28px) !important;
  color: rgba(44, 45, 45, 0.78);
  font-size: var(--lux-type-body);
  line-height: var(--lux-leading-body);
}

/* A centred intro is capped narrower than a wide section, and the zero side
   margins above left that narrower box against the left edge: the lines were
   centred inside it, the box itself was not, so the intro sat off to one side
   of the heading over it. Only a centred intro takes auto margins; a
   left-aligned one keeps its edge. */
.lux-svc-section__intro.has-text-align-center {
  margin-right: auto !important;
  margin-left: auto !important;
}

/* The colour above is ink on paper. The denim band already turns its heading
   white and lets everything else inherit, but this paragraph sets its own, so
   on the blue it was dark text on a dark ground. Anywhere the band is used. */
.is-style-lux-denim .lux-svc-section__intro,
.lux-panel-dark .lux-svc-section__intro {
  color: rgba(255, 255, 255, 0.78);
}

/* A service with no capability terms renders no post-terms block at all, so
   the heading would otherwise sit above nothing. */
.lux-svc-includes:not(:has(.lux-svc-caps)) {
  display: none;
}

/* The capabilities were three pale pills, which read as metadata rather than as
   an answer to the heading above them. They are the section's whole content, so
   they get the weight of content: one tile each, on the site's own icon
   treatment.

   The marker is a check, not a number. These three are a set, not a sequence —
   numbering them would assert an order the content does not have. A check says
   the one true thing about them: included. */
.lux-svc-caps {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

/* Detailed capability labels keep room for the text beside the icon. */
.lux-svc-caps.lux-svc-caps--detailed {
  --lux-cap-columns: 1;
  grid-template-columns: repeat(var(--lux-cap-columns), minmax(0, 1fr));
}

@media (min-width: 650px) {
  .lux-svc-caps.lux-svc-caps--detailed {
    --lux-cap-columns: 2;
  }
}

@media (min-width: 1100px) {
  .lux-svc-caps.lux-svc-caps--detailed {
    --lux-cap-columns: 3;
  }
}

.lux-svc-caps > :where(a, span, li):not(.wp-block-post-terms__separator) {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 74px;
  padding: 16px 18px 16px 68px;
  border: 1px solid rgba(2, 10, 28, 0.1);
  border-radius: var(--lux-radius-card);
  color: var(--lux-dark);
  background: var(--lux-white);
  box-shadow: 0 4px 20px rgba(2, 10, 28, 0.05);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-decoration: none;
  transition:
    border-color 260ms ease,
    box-shadow 260ms ease,
    transform 260ms var(--lux-motion-out);
}

/* The tile. NOT --lux-icon-tile-background: that gradient is rgba, written to
   sit on the denim panel, and on a white card its alpha blends into the white
   and goes pale. On a light ground the brand colour has to be solid — this is
   the same gradient the process markers use, which is the site's own answer
   for a blue chip on white. */
.lux-svc-caps > :where(a, span, li):not(.wp-block-post-terms__separator)::before {
  position: absolute;
  top: 50%;
  left: 15px;
  box-sizing: border-box;
  width: 38px;
  height: 38px;
  margin-top: -19px;
  border-radius: var(--lux-radius-sm);
  background: linear-gradient(145deg, var(--lux-active), var(--lux-blue-deep));
  box-shadow: 0 5px 14px rgba(21, 104, 224, 0.3);
  content: "";
  transition:
    background 300ms ease,
    box-shadow 300ms ease;
}

/* The check itself: the same two-border glyph the CTA's trust list draws. */
.lux-svc-caps > :where(a, span, li):not(.wp-block-post-terms__separator)::after {
  position: absolute;
  top: 50%;
  left: 30px;
  width: 7px;
  height: 12px;
  margin-top: -8px;
  border-right: 2px solid var(--lux-white);
  border-bottom: 2px solid var(--lux-white);
  content: "";
  transform: rotate(45deg);
}

/* Only a linked term is interactive — the plugin unlinks them on some
   services, and a span that lifts on hover promises a click that never comes. */
.lux-svc-caps > a:not(.wp-block-post-terms__separator):hover,
.lux-svc-caps > a:not(.wp-block-post-terms__separator):focus-visible {
  border-color: rgba(24, 120, 241, 0.34);
  box-shadow: 0 10px 26px rgba(2, 10, 28, 0.08);
  transform: translateY(-2px);
}

.lux-svc-caps > a:not(.wp-block-post-terms__separator):hover::before,
.lux-svc-caps > a:not(.wp-block-post-terms__separator):focus-visible::before {
  background: linear-gradient(145deg, var(--lux-glow), var(--lux-blue));
  box-shadow: 0 8px 20px rgba(21, 104, 224, 0.38);
}

.lux-svc-caps .wp-block-post-terms__separator {
  display: none;
}

/* Service detail cards reuse the value-card skin on the full section grid. */
.lux-value-cards.lux-service-card-grid {
  width: 100%;
}

@media (min-width: 700px) and (max-width: 1023px) {
  .lux-value-cards.lux-service-card-grid--six {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* A project example shows the actual website alongside the recorded work. */
.lux-value-card.lux-service-proof {
  display: grid;
  align-items: center;
  gap: clamp(24px, 3vw, 40px);
  background: var(--lux-case-card-surface, var(--lux-white));
}

.lux-value-card.lux-service-proof::before {
  display: none;
}

.lux-service-proof__media {
  margin: 0 !important;
}

.lux-service-proof__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--lux-case-card-line, var(--lux-line));
  border-radius: var(--lux-radius-card);
}

.lux-service-proof__copy {
  max-width: 750px;
}

.lux-service-proof__work {
  margin: 18px 0 !important;
  padding-left: 22px;
  line-height: var(--lux-leading-body);
}

@media (min-width: 900px) {
  .lux-value-card.lux-service-proof {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* The existing contact form keeps a readable measure inside the service band. */
.lux-post-content .lux-service-request .wp-block-group.lux-service-request__form {
  width: 100%;
  max-width: 750px !important;
  margin-inline: auto !important;
}

.lux-service-request .lux-service-request__alternative {
  margin: 20px auto 0 !important;
}

#seo-includes,
#seo-request {
  scroll-margin-top: calc(var(--lux-header-h) + 24px);
}

/* ==========================================================================
   Service hero (templates/single-lux_service.html)
   Written mobile-first: the base rules are the phone layout — one column,
   copy then stats then logos — and the min-width queries add the two-column
   desktop arrangement that puts the stats to the left of the title.
   ========================================================================== */
.lux-svc-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  /* svh keeps the hero from jumping as mobile browser chrome hides; the vh
     line above it is the fallback for browsers without svh. */
  min-height: calc(100vh - var(--lux-header-h));
  min-height: calc(100svh - var(--lux-header-h));
  padding-block: clamp(28px, 8vw, 56px);
  color: var(--lux-paper);
  background: var(--lux-blue-surface);
}

.lux-svc-hero__inner {
  display: grid;
  gap: clamp(30px, 7vw, 52px);
  width: min(
    var(--lux-content),
    calc(100% - var(--lux-page-gutter) * 2)
  );
  margin-inline: auto !important;
}

.lux-svc-hero__grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 6vw, 44px);
  align-items: center;
}

/* The crumbs are injected as a sibling *before* the anchor block, which stays
   empty, so .lux-panel-crumbs hides it. The anchor is a direct child of __inner,
   so the crumbs get their own row at the top and the grid gap does the spacing. */
.lux-svc-hero .lux-breadcrumb {
  margin: 0 !important;
}

.lux-svc-hero__title {
  margin: 0 !important;
  color: var(--lux-white) !important;
  /* The site's hero face, as used by .lux-reference-hero on the homepage. */
  font-family: var(--lux-font-display) !important;
  font-size: var(--lux-type-hero);
  font-weight: 400;
  line-height: var(--lux-leading-hero) !important;
}

/* The pair itself is the homepage hero's .lux-reference-hero__buttons, so the
   premium treatment comes for free; only the alignment and stacking differ,
   because this hero is left-aligned rather than centred. */
/* The homepage caps this row at 540px and splits it 50/50, which leaves each
   premium button ~262px — too narrow for an icon, a two-line label and an
   arrow, so the text was being clipped. Here the row is as wide as it needs to
   be and each button sizes to its own content. */
.lux-svc-hero__buttons {
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  width: auto !important;
  max-width: none !important;
  margin-top: clamp(30px, 5vw, 38px) !important;
}

.lux-svc-hero__buttons .wp-block-button {
  width: 100% !important;
}

@media (min-width: 560px) {
  .lux-svc-hero__buttons .wp-block-button {
    width: auto !important;
  }
}

/* ---- stats ---- */
.lux-stats {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.lux-stat {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 4vw, 26px) clamp(15px, 4vw, 22px);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--lux-radius-card);
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.09),
    rgba(255, 255, 255, 0.03)
  );
  transition:
    border-color var(--lux-transition),
    transform var(--lux-transition);
}

/* A lit edge along the top of each tile, brightest at the left. */
.lux-stat::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--lux-active), rgba(0, 145, 252, 0));
  content: "";
}

.lux-stat:hover {
  border-color: rgba(126, 195, 255, 0.34);
  transform: translateY(-3px);
}

.lux-stat__value {
  margin: 0 0 6px !important;
  background: linear-gradient(180deg, var(--lux-white), #9fd4ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Latin numerals — the Georgian caps face has uneven digit spacing. */
  font-family: "FiraGO", "Sylfaen", sans-serif;
  font-size: clamp(32px, 8vw, 46px);
  font-weight: 700;
  /* tabular-nums also stops the counter jittering as the digits change. */
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}

.lux-stat__label {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--lux-type-meta);
  line-height: 1.35;
}

/* ---- home page: who we are ----
   A few paragraphs set to a reading width, then the numbers. In a hero the
   stats sit in a narrow column two by two; here they have the page's width,
   so they run in one row and fall back to two on a phone. */
.lux-home-about__text {
  max-width: 820px;
  margin-right: auto !important;
  margin-left: auto !important;
  text-align: center;
}

.lux-home-about .lux-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1120px;
  margin: clamp(28px, 3vw, 44px) auto 0 !important;
}

@media (max-width: 767px) {
  .lux-home-about .lux-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- home page: partners ----
   The logo strip is drawn for the dark service hero, white logos over navy.
   On the home page it stands alone under the hero, so it brings its own
   dark band, and only a strip's worth of height rather than a section's. */
.lux-home-partners {
  padding-top: clamp(18px, 2.2vw, 30px) !important;
  padding-bottom: clamp(18px, 2.2vw, 30px) !important;
}

/* ---- home page: offers ----
   The offers use the course page's featured slider, one wide slide per sale,
   so a single offer fills the row and several page through it. Only the
   intro line needs anything of its own. */
.lux-offers__lead {
  max-width: 640px;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* Offer spotlight: the image, availability and price share one framed panel. */
.lux-offers {
  --lux-offer-ink: #fff;
  --lux-offer-muted: #bacce2;
  --lux-offer-line: rgba(139, 190, 244, .2);
  --lux-offer-surface: var(--lux-blue-surface);
}

.wp-block-group.lux-offers {
  overflow: visible;
}

.lux-offers > .lux-services-featured {
  width: calc(100% - 64px);
  max-width: 1440px !important;
  margin-inline: auto !important;
  overflow: visible;
}

.lux-offers .lux-services-featured > .lux-post-carousel__query {
  overflow: visible;
}

.lux-offers .lux-services-featured .lux-services-featured-track {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row;
  grid-auto-columns: auto;
  align-items: start;
  gap: clamp(48px, 12vh, 150px) !important;
  overflow: visible;
  scroll-snap-type: none;
  counter-reset: lux-offer;
}

.lux-offers .lux-services-featured-track > .wp-block-post {
  position: sticky;
  top: 100px;
  align-self: start;
  counter-increment: lux-offer;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  overflow: hidden;
  border: 1px solid var(--lux-offer-line);
  border-radius: 24px;
  background: var(--lux-offer-surface);
  box-shadow: none;
}

.lux-offers .lux-services-featured .lux-service-body::before {
  position: static;
  display: block;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  color: var(--lux-offer-muted);
  background: none;
  box-shadow: none;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  content: counter(lux-offer, decimal-leading-zero);
  transform: none;
}

@media (min-width: 782px) {
  .lux-offers .lux-services-featured-track > .wp-block-post > .lux-service-media {
    grid-column: 2;
    grid-row: 1;
  }
  .lux-offers .lux-services-featured-track > .wp-block-post > .lux-service-body {
    grid-column: 1;
    grid-row: 1;
  }
  .lux-offers .lux-service-media {
    border-right: 0;
    border-left: 1px solid var(--lux-offer-line);
  }
}

.lux-offers .lux-services-featured .lux-post-carousel__controls:not([hidden]) {
  position: absolute;
  z-index: 5;
  top: calc(50% - 9px);
  right: -24px;
  bottom: auto;
  left: -24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: auto;
  height: 48px;
  margin: 0;
  transform: translateY(-50%);
  pointer-events: none;
}

.lux-offers .lux-post-carousel__controls .lux-post-carousel__status {
  display: none;
}

.lux-offers .lux-post-carousel__controls .lux-post-carousel__button {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: 1px solid #36475e;
  border-radius: 50%;
  color: #c4cfdd;
  background: #0d192b;
  box-shadow: none;
  pointer-events: auto;
  transition: background 180ms ease, border-color 180ms ease;
}

.lux-offers .lux-post-carousel__button:not(:disabled):hover,
.lux-offers .lux-post-carousel__button:focus-visible {
  border-color: #55c9f2;
  background: #15304c;
}

.lux-offers .lux-post-carousel__controls .lux-post-carousel__progress {
  width: 90px;
  background: rgba(21, 104, 224, .15);
}

.lux-offers .lux-post-carousel__button:disabled {
  opacity: 1;
  cursor: default;
  box-shadow: none;
}

.lux-offers .lux-service-media {
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0;
  align-self: stretch;
  display: grid;
  padding: 0;
  overflow: hidden;
  border-right: 1px solid var(--lux-offer-line);
  background: radial-gradient(ellipse at 10% 0%, rgba(0, 199, 235, .16), transparent 65%);
}

.lux-offers .lux-service-media > a {
  position: absolute;
  inset: 0;
  display: block;
  min-width: 0;
  width: 100%;
  height: 100%;
}

.lux-offers .lux-services-featured .wp-block-post .lux-service-media img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover !important;
  object-position: center;
  border-radius: 0;
  box-shadow: none;
}

.lux-offers .lux-service-media::after {
  display: none;
}

.lux-offers .lux-service-body {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  justify-content: center;
  gap: 20px;
  padding: clamp(26px, 3vw, 46px) !important;
  background: transparent;
}

.lux-offers .lux-service-body .lux-service-title {
  font-size: clamp(26px, 2.3vw, 36px);
  font-weight: 700;
  line-height: 1.35;
}

.lux-offers .lux-service-title a {
  color: var(--lux-offer-ink) !important;
  text-decoration: none;
}

.lux-offers .lux-service-excerpt p {
  color: var(--lux-offer-muted);
  font-size: 17px;
  line-height: 1.7;
  -webkit-line-clamp: unset;
}

.lux-offers .lux-slide-seats .lux-seats {
  padding: 17px 18px;
  border: 1px solid var(--lux-offer-line);
  border-radius: 16px;
  background: rgba(1, 12, 32, .35);
}

.lux-offers .lux-seats__head .lux-seats__left {
  color: #8ddcff;
  font-size: 15px;
  font-weight: 600;
}

.lux-offers .lux-service-body .lux-course-card__price {
  padding-top: 18px;
  border-top: 1px solid var(--lux-offer-line);
}

.lux-offers .lux-course-card__price .lux-course-card__amount {
  font-size: clamp(32px, 3vw, 44px);
  letter-spacing: -.025em;
}

.lux-offers .lux-course-card__price .lux-course-card__badge {
  padding: 7px 12px;
  border: 1px solid rgba(63, 217, 173, .3);
  border-radius: 999px;
  color: #6ae3c0;
  background: rgba(21, 159, 121, .15);
  font-weight: 700;
}

.lux-offers .lux-service-body .lux-service-more.lux-ui-button {
  align-self: flex-start;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  min-width: 240px;
  padding: 14px 24px;
  border: 1px solid rgba(118, 207, 255, .4);
  border-radius: 12px;
  background: var(--lux-button-gradient, linear-gradient(112deg, #00b6d4, #1769ed));
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 145, 252, .2);
}

.lux-offers .lux-service-more:hover {
  filter: brightness(1.12);
}

@media (max-width: 781px) {
  .lux-offers .lux-services-featured .lux-post-carousel__controls:not([hidden]) {
    left: -16px;
    right: -16px;
  }
  .lux-offers > .lux-services-featured {
    width: 90%;
  }
  .lux-offers .lux-post-carousel__controls .lux-post-carousel__button {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
  .lux-offers .lux-services-featured-track > .wp-block-post {
    grid-template-columns: 1fr;
    position: relative;
    top: auto;
  }
  .lux-offers .lux-service-media { border-right: 0; border-bottom: 1px solid var(--lux-offer-line); }
  .lux-offers .lux-service-body { padding: 24px !important; }
  .lux-offers .lux-service-body .lux-service-title {
    font-size: clamp(22px, 6.2vw, 28px);
    overflow-wrap: normal;
    word-break: normal;
  }
  .lux-offers .lux-service-excerpt p {
    font-size: 16px;
    line-height: 1.65;
  }
  .lux-offers .lux-service-body .lux-service-more.lux-ui-button { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lux-offers .lux-services-featured-track > .wp-block-post {
    position: relative;
    top: auto;
  }
}


/* ---- partner logos ---- */
.lux-svc-hero__logos {
  display: grid;
  gap: 14px;
}

/* In the home hero the strip follows the buttons, and a strip of logos is a
   different kind of thing from a call to action, so it stands a little
   further off than the headline does from the buttons. */
.lux-reference-hero__content > .lux-svc-hero__logos {
  margin-top: clamp(6px, 1vw, 16px) !important;
}

.lux-svc-hero__logos-label {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.5);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-meta);
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* A horizontal scroller, not a wrapping grid: the strip keeps one row at every
   width and the logos stay their own size instead of stretching. Snap points
   land each logo cleanly, and the scrollbar is hidden because the row is
   swipeable and the partial logo at the edge is the affordance. */
.lux-svc-hero__logos-row {
  display: flex !important;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.lux-svc-hero__logos-row::-webkit-scrollbar {
  display: none;
}

.lux-svc-hero__logos-row > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* ---- marquee ----
   Once logo-marquee.js has wrapped and duplicated the row, the strip moves on
   its own instead of waiting to overflow — six logos fit on a wide screen, so
   a plain scroller would sit still there. Until the script runs, the rules
   above still apply and the row is a normal swipeable strip. */
.lux-marquee[data-lux-marquee="ready"] {
  overflow: hidden;
  scroll-snap-type: none;
  /* Fades both ends so logos enter and leave instead of being cut off. */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 5%,
    #000 95%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 5%,
    #000 95%,
    transparent
  );
}

/* No margin between the two tracks: the row is itself a flex container with
   gap: 10px, so its gap is already the spacing at the seam. Adding a margin on
   top of it doubled the distance between the last and first logo. */
.lux-marquee__track {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  animation: lux-marquee-slide 34s linear infinite;
}

.lux-marquee[data-lux-marquee="ready"]:hover .lux-marquee__track,
.lux-marquee[data-lux-marquee="ready"]:focus-within .lux-marquee__track {
  animation-play-state: paused;
}

@keyframes lux-marquee-slide {
  from {
    transform: translateX(0);
  }

  to {
    /* One full track plus the gap that follows it — the clone lands exactly
       where the original began, so the loop is seamless. */
    transform: translateX(calc(-100% - 10px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .lux-marquee__track {
    animation: none;
  }
}

/* ---- the partner strip ----
   The files used to be dark logos printed on solid white, so the tile had to
   be white too and the row read as a line of paper cards stapled to the navy.
   The sheet has since been cut out of every file: the white that could be
   reached from the edge of the image is gone, the white enclosed by the
   artwork (the middle of a roundel, letters knocked out of a badge) is not.

   That leaves the other half of the problem. A third of these marks are black
   or near-black wordmarks, and a black wordmark on navy is a smudge. So the
   strip is set the way a partner wall is usually set: every mark reduced to
   one white silhouette, which makes the row even and legible whatever the
   twelve brands do individually. Hover gives the logo back its own colours,
   for anyone who stops on one.

   The glass belongs to the figure and the filter to the image inside it. A
   filter applies to everything an element paints, its background and border
   included, so putting brightness(0) on the tile would bleach the glass. */
.lux-svc-hero__logos-row .wp-block-image {
  display: flex;
  box-sizing: border-box;
  width: clamp(132px, 30vw, 168px);
  aspect-ratio: 3 / 2;
  padding: 12px 16px;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  border: 1px solid rgba(126, 195, 255, 0.14);
  border-radius: var(--lux-radius-sm);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition:
    border-color var(--lux-transition),
    background var(--lux-transition),
    box-shadow var(--lux-transition),
    transform var(--lux-transition);
}

.lux-svc-hero__logos-row img {
  display: block;
  width: 100%;
  height: 100%;
  background: none;
  object-fit: contain;
  opacity: 0.78;
  filter: brightness(0) invert(1) drop-shadow(0 0 9px rgba(126, 195, 255, 0.3));
  transition:
    opacity var(--lux-transition),
    filter var(--lux-transition);
}

/* Hover hands the mark back its own colours, and the tile lights up to carry
   them. The plate is not decoration: five of these logos are black or
   near-black wordmarks, and black on navy is a smudge, so the surface has to
   come up under them before the colour means anything. At rest it is glass on
   the dark; under the cursor it is a lit panel with the brand on it. */
.lux-svc-hero__logos-row .wp-block-image:hover {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.93);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 16px 34px rgba(0, 0, 0, 0.34),
    0 0 26px rgba(126, 195, 255, 0.22);
  transform: translateY(-3px);
}

.lux-svc-hero__logos-row .wp-block-image:hover img {
  opacity: 1;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .lux-svc-hero__logos-row .wp-block-image {
    transition: none;
  }

  .lux-svc-hero__logos-row .wp-block-image:hover {
    transform: none;
  }
}



/* ---- the showreel in the hero ----
   The film is 9:16, shot for a phone, so it cannot sit in the wide slot the
   four numbers used to hold: filling that width would make it 900px tall and
   the hero would stop being a hero. It keeps its own proportions in a column
   capped at 340px instead, which is about the width of the device it was cut
   for, and the numbers move under the copy as one row of four. Nothing is
   dropped, and neither element is squeezed into the other's shape. */
.lux-svc-hero__media {
  position: relative;
  width: min(340px, 100%);
  margin-inline: auto !important;
  overflow: hidden;
  border: 5px solid transparent;
  border-radius: var(--lux-radius-slider);
  background: var(--lux-chase-frame);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
  animation: lux-border-chase 8.8s linear infinite;
  will-change: --lux-chase-angle;
}

.lux-svc-hero__video {
  margin: 0 !important;
}

.lux-svc-hero__video video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: rgba(2, 10, 28, 0.4);
  cursor: pointer;
}

/* ==========================================================================
   The player

   Built rather than borrowed. The browser's own bar cannot be brought into the
   brand: each engine exposes a different, partial set of pseudo-elements and
   none of them let the bar be redrawn, so a video that keeps native controls
   will always look like somebody else's product sitting inside ours. These are
   four controls in the site's own colours, added by video-frame.js to any block
   carrying .lux-video-frame.
   ========================================================================== */
.lux-video-frame {
  position: relative;
}

/* The opening press. It sits over the poster, and leaves the moment the film
   starts, because from then on the bar below carries play and pause. */
.lux-video-frame__open {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(78px, 23%, 100px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--lux-white);
  background: linear-gradient(
    135deg,
    var(--lux-blue-deep),
    var(--lux-blue) 52%,
    var(--lux-active)
  );
  box-shadow:
    0 0 0 6px rgba(255, 255, 255, 0.14),
    0 18px 44px rgba(2, 10, 28, 0.55);
  cursor: pointer;
  transition:
    transform var(--lux-transition),
    box-shadow var(--lux-transition),
    opacity 260ms ease;
  transform: translate(-50%, -50%);
}

/* No optical nudge here: the glyph carries its own, drawn into the path. */
.lux-video-frame__open svg {
  width: 44%;
  height: 44%;
  fill: currentColor;
}

.lux-video-frame__open:hover,
.lux-video-frame__open:focus-visible {
  box-shadow:
    0 0 0 9px rgba(59, 158, 255, 0.28),
    0 22px 52px rgba(2, 10, 28, 0.6);
  transform: translate(-50%, -50%) scale(1.06);
}

.lux-video-frame:not([data-lux-video-frame="idle"]) .lux-video-frame__open {
  opacity: 0;
  pointer-events: none;
}

.lux-video-frame__bar {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(2, 10, 28, 0.62);
  opacity: 0;
  backdrop-filter: blur(10px);
  transition: opacity 260ms ease;
  pointer-events: none;
}

.lux-video-frame[data-lux-video-frame="paused"] .lux-video-frame__bar,
.lux-video-frame:hover .lux-video-frame__bar,
.lux-video-frame:focus-within .lux-video-frame__bar {
  opacity: 1;
  pointer-events: auto;
}

.lux-video-frame[data-lux-video-frame="idle"] .lux-video-frame__bar {
  opacity: 0;
  pointer-events: none;
}

.lux-video-frame__control {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--lux-white);
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: background var(--lux-transition), color var(--lux-transition);
}

.lux-video-frame__control svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.lux-video-frame__control:hover,
.lux-video-frame__control:focus-visible {
  color: var(--lux-white);
  background: var(--lux-blue-deep);
}

/* A range input rather than a div, so the film can be scrubbed with the
   keyboard without writing any of that behaviour by hand. --lux-seek carries
   how far along it is, which is what fills the track in brand colour. */
.lux-video-frame__seek {
  flex: 1 1 auto;
  min-width: 0;
  height: 4px;
  margin: 0;
  border-radius: 999px;
  background: linear-gradient(
      90deg,
      var(--lux-blue-deep),
      var(--lux-active) var(--lux-seek, 0%),
      transparent var(--lux-seek, 0%)
    ),
    rgba(255, 255, 255, 0.22);
  cursor: pointer;
  appearance: none;
}

.lux-video-frame__seek::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--lux-white);
  box-shadow: 0 0 0 3px rgba(0, 145, 252, 0.45);
  appearance: none;
}

.lux-video-frame__seek::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--lux-white);
  box-shadow: 0 0 0 3px rgba(0, 145, 252, 0.45);
}

.lux-video-frame__seek:focus-visible {
  outline: 2px solid var(--lux-glow);
  outline-offset: 3px;
}

.lux-video-frame__time {
  flex: 0 0 auto;
  color: rgba(245, 245, 245, 0.82);
  font-family: "FiraGO", "Sylfaen", sans-serif;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

/* Four across under the copy rather than the 2x2 the right-hand column took. */
.lux-svc-hero__stats--inline {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  margin-top: clamp(22px, 2.4vw, 30px) !important;
}

@media (max-width: 767px) {
  .lux-svc-hero__stats--inline {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 900px) {
  .lux-svc-hero__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: clamp(36px, 5vw, 72px);
  }

  .lux-svc-hero__copy {
    grid-row: 1;
    grid-column: 1;
  }

  .lux-stats {
    grid-row: 1;
    grid-column: 2;
  }

  /* The stats live inside the copy column now, so they take its full width
     and the second column belongs to the film. */
  .lux-svc-hero__copy .lux-stats {
    grid-row: auto;
    grid-column: auto;
  }

  .lux-svc-hero__media {
    grid-row: 1;
    grid-column: 2;
  }

  /* The film sets the height of the row. The copy column fills that height and
     pushes the numbers to its foot, so they finish level with the bottom of the
     frame instead of crowding the buttons above them. */
  .lux-svc-hero__grid {
    align-items: stretch;
  }

  .lux-svc-hero__copy {
    display: flex;
    flex-direction: column;
  }

  /* Two auto margins, not one. With only the numbers pushing off the bottom,
     every spare pixel piled under them and the title was left pinned to the
     ceiling. Splitting the free space between the top of the copy and the top
     of the numbers drops the whole block to a natural height and still lands
     the numbers level with the foot of the frame. */
  .lux-svc-hero__copy .lux-svc-hero__title {
    margin-top: auto !important;
  }

  .lux-svc-hero__copy .lux-svc-hero__stats--inline {
    margin-top: auto !important;
  }

  /* The copy starts at the left edge of the grid, so the frame finishes at the
     right one rather than floating in the middle of its column. */
  .lux-svc-hero__media {
    margin-right: 0 !important;
    margin-left: auto !important;
  }
}

/* ---- entrance ----
   One rise, staggered down the hero, so the section arrives instead of just
   appearing. Anyone who asks for reduced motion gets the static hero. */
@media (prefers-reduced-motion: no-preference) {
  .lux-svc-hero .lux-breadcrumb,
  .lux-svc-hero__title,
  .lux-svc-hero-lead,
  .lux-svc-hero__buttons,
  .lux-stat {
    animation: lux-svc-hero-rise 720ms var(--lux-motion-out) backwards;
  }

  .lux-svc-hero .lux-breadcrumb {
    animation-delay: 60ms;
  }

  .lux-svc-hero__title {
    animation-delay: 140ms;
  }

  .lux-svc-hero-lead {
    animation-delay: 220ms;
  }

  .lux-svc-hero__buttons {
    animation-delay: 300ms;
  }

  .lux-stat:nth-child(1) {
    animation-delay: 340ms;
  }

  .lux-stat:nth-child(2) {
    animation-delay: 420ms;
  }

  .lux-stat:nth-child(3) {
    animation-delay: 500ms;
  }

  .lux-stat:nth-child(4) {
    animation-delay: 580ms;
  }

}

@keyframes lux-svc-hero-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* The blank canvas has no padded card around the content, so every child that
   is not full-bleed gets the reading width and the page gutter itself. The
   two-class selector also outranks the section rules further down that set
   their own width. */
/* Sections sit on the site grid; the panels and lists inside them keep a
   reading measure. max-width as well as width, because the canvas is a
   constrained layout and WordPress caps every non-aligned child at the
   contentSize with its own max-width. */
.lux-blank-content > :not(.alignfull) {
  width: min(var(--lux-content), calc(100% - var(--lux-page-gutter) * 2)) !important;
  max-width: none !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* Running text keeps a readable line inside the wider section. */
.lux-blank-content > .lux-svc-section > :is(p, ul, ol):not(.lux-svc-caps) {
  max-width: 780px;
}

/* A section intro is not running text. It is one or two lines introducing what
   follows, and at the reading measure it ends up the narrowest thing on a
   screen where the grid under it runs the full width, which reads as pinched
   rather than as a considered column. A little more room, and the break placed
   evenly so a centred intro does not leave a stray word on the second line. */
.lux-blank-content > .lux-svc-section > p.lux-svc-section__intro {
  /* p, not just the class: the reading measure above is matched through
     :is(p, ul, ol), which carries a type selector, so a plain three class
     selector loses to it and only the properties it does not set got through. */
  max-width: min(980px, 100%);
  text-wrap: balance;
}

/* ---- masthead lead ---- */
.lux-svc-hero-lead {
  width: min(100%, 720px);
  margin: clamp(24px, 1.6vw, 30px) 0 0 !important;
  color: rgba(245, 245, 245, 0.82);
  font-size: var(--lux-type-lead);
  line-height: var(--lux-leading-lead);
}

.lux-svc-hero-lead p {
  margin: 0 !important;
}

/* ---- pattern: process ----
   Each step is a card, and the rail bridges the gap between two cards at the
   height of their markers — so the boxes read as stations on one line rather
   than as four loose tiles. Card, border, radius and lift are the same ones
   the capability tiles and the pricing cards use; this is the page's single
   card system, not a fifth look. */
.lux-svc-steps {
  /* Marker and rail geometry derive from these, so the rail always lands on the
     exact centre of the dot no matter what size the dot is set to. The gap is
     here too because the rail's length IS the gap. */
  --lux-step-dot: 40px;
  --lux-step-rail: 3px;
  --lux-step-gap: clamp(16px, 1.5vw, 24px);
  --lux-step-pad: clamp(18px, 1.6vw, 24px);

  display: grid !important;
  gap: var(--lux-step-gap);
  counter-reset: lux-svc-step;
}

.lux-svc-step {
  position: relative;
  padding: calc(var(--lux-step-pad) + var(--lux-step-dot) + 16px)
    var(--lux-step-pad) var(--lux-step-pad);
  border: 1px solid rgba(2, 10, 28, 0.1);
  border-radius: var(--lux-radius-card);
  background: var(--lux-white);
  box-shadow: 0 4px 20px rgba(2, 10, 28, 0.05);
  counter-increment: lux-svc-step;
}

.lux-svc-step::before {
  position: absolute;
  top: var(--lux-step-pad);
  left: var(--lux-step-pad);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--lux-step-dot);
  height: var(--lux-step-dot);
  border-radius: 50%;
  color: var(--lux-white);
  background: linear-gradient(145deg, var(--lux-active), var(--lux-blue-deep));
  box-shadow:
    0 6px 16px rgba(21, 104, 224, 0.34),
    0 0 0 5px rgba(24, 120, 241, 0.1);
  content: counter(lux-svc-step, decimal-leading-zero);
  /* Latin numerals, not the Georgian caps face: its digits sit off the optical
     centre of a circle this small. */
  font-family: "FiraGO", "Sylfaen", sans-serif;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1;
  text-align: center;
}

/* Down the gap on a phone, across it on a desktop — the length is the gap
   itself in both cases, so the two never disagree. */
.lux-svc-step::after {
  position: absolute;
  top: 100%;
  left: calc(
    var(--lux-step-pad) + (var(--lux-step-dot) - var(--lux-step-rail)) / 2
  );
  width: var(--lux-step-rail);
  height: var(--lux-step-gap);
  border-radius: var(--lux-radius-pill);
  background: linear-gradient(
    to bottom,
    rgba(24, 120, 241, 0.42),
    rgba(24, 120, 241, 0.12)
  );
  content: "";
}

.lux-svc-step:last-child::after {
  display: none;
}

.lux-svc-step__title {
  margin: 0 0 6px !important;
  color: var(--lux-dark);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-body);
  font-weight: 600;
  line-height: var(--lux-leading-title);
}

.lux-svc-step__text {
  margin: 0 !important;
  color: rgba(44, 45, 45, 0.8);
  font-size: var(--lux-type-small);
  line-height: var(--lux-leading-body);
}

/* ---- pattern: FAQ ----
   The accordion itself is the site's existing .lux-reference-faq system. Only
   the width changes: that system centres its list at 720px for a full-bleed
   homepage section, which would sit inset inside the reading column. */
.lux-svc-faq .lux-reference-faq__list {
  width: min(900px, 100%) !important;
  max-width: none !important;
}

/* ---- pattern: CTA ----
   Deliberately the SAME panel as the services-archive closing CTA
   (.lux-services-cta), so a visitor meets one conversion block, not two
   competing ones. Only the sizing changes: it fills the reading column
   instead of the 920px archive width. */
/* One CTA size across the site. The panel reads as a panel at a fixed measure,
   the way the services archive already presents it — stretching it to the full
   grid made the same block look like two different components from page to
   page. */
.lux-svc-cta.lux-services-cta {
  width: min(900px, calc(100% - var(--lux-page-gutter) * 2)) !important;
  max-width: none !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* Objection handling — the reasons not to hesitate, directly under the ask. */
.lux-svc-cta__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: clamp(16px, 1.8vw, 22px) 0 0 !important;
  padding: clamp(14px, 1.6vw, 18px) 0 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  list-style: none;
}

.lux-svc-cta__trust li {
  position: relative;
  padding-left: 20px;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--lux-type-meta);
  line-height: 1.4;
}

.lux-svc-cta__trust li::before {
  position: absolute;
  top: 3px;
  left: 2px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--lux-active);
  border-bottom: 2px solid var(--lux-active);
  content: "";
  transform: rotate(45deg);
}

/* The phone is the low-commitment alternative to the form: same footprint as
   the button, but outlined instead of filled so it reads as the second option.
   The site's own handset tile sits flush in the left corner — the chip is 46px
   tall with a 1px border, so a 44px tile fills its inner height exactly. */
.lux-svc-cta__phone {
  margin: 0 !important;
}

.lux-svc-cta__phone a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 100% of the aside column, which the button above has already sized. */
  width: 100%;
  min-width: var(--lux-cta-control-w, 260px);
  height: 46px;
  padding: 0 18px 0 62px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--lux-radius-button);
  color: var(--lux-cta-phone-copy, var(--lux-white)) !important;
  /* Latin numerals — the Georgian caps face has uneven digit spacing. */
  font-family: "FiraGO", "Sylfaen", sans-serif;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none !important;
  transition:
    border-color 220ms ease,
    background 220ms ease;
}

/* The tile. Inner radius is the chip's 5px minus its 1px border. */
.lux-svc-cta__phone a::before {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  border-right: 1px solid var(--lux-icon-tile-border);
  border-radius: 4px 0 0 4px;
  background: var(--lux-icon-tile-background);
  box-shadow: var(--lux-icon-tile-shadow);
  content: "";
  transition: background 300ms ease;
}

/* The handset, painted white through the artwork's own alpha — the same
   treatment the footer gets from filter: brightness(0) invert(1). */
.lux-svc-cta__phone a::after {
  position: absolute;
  top: 50%;
  left: 22px;
  width: 23px;
  height: 23px;
  margin-top: -11.5px;
  margin-left: -11.5px;
  background: var(--lux-white);
  content: "";
  -webkit-mask: url("assets/reference/icons/phone.webp") no-repeat center /
    contain;
  mask: url("assets/reference/icons/phone.webp") no-repeat center / contain;
}

.lux-svc-cta__phone a:hover,
.lux-svc-cta__phone a:focus-visible {
  border-color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.08);
}

.lux-svc-cta__phone a:hover::before,
.lux-svc-cta__phone a:focus-visible::before {
  background: var(--lux-icon-tile-background-hover);
}

@media (max-width: 860px) {
  .lux-svc-cta {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Blog endings use the centred panel requested for articles, with their
   palette stored in shared tokens so the light article surface keeps contrast. */
.lux-services-cta.lux-blog-cta {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 24px;
  width: 100% !important;
  margin: clamp(28px, 4vw, 40px) 0 0 !important;
  padding: clamp(26px, 3.4vw, 40px);
  border: 0;
  border-radius: 16px;
  color: var(--lux-blog-cta-copy);
  background: var(--lux-blog-cta-surface) !important;
  box-shadow: var(--lux-blog-cta-shadow);
  text-align: center;
}

.lux-services-cta.lux-blog-cta::before,
.lux-services-cta.lux-blog-cta::after {
  display: none;
}

.lux-services-cta.lux-blog-cta .lux-services-cta__copy {
  display: block;
  width: 100%;
}

.lux-services-cta.lux-blog-cta .lux-services-cta__title {
  max-width: 620px;
  margin: 0 auto !important;
  color: var(--lux-blog-cta-copy) !important;
  font-size: clamp(23px, 2.15vw, 30px);
  line-height: 1.35;
  text-wrap: balance;
}

.lux-services-cta.lux-blog-cta .lux-services-cta__lead {
  display: block;
  max-width: 530px;
  margin: 14px auto 0 !important;
  color: var(--lux-blog-cta-copy);
  font-size: var(--lux-type-body);
  line-height: 1.6;
  text-wrap: pretty;
}

.lux-blog-cta .lux-services-cta__actions {
  grid-column: 1 / -1;
  justify-content: center;
  width: 100%;
  margin: 0 !important;
}

.lux-blog-cta .lux-services-cta__button {
  width: auto;
  min-width: 0;
  max-width: 100%;
}

.lux-blog-cta .lux-services-cta__button > .wp-block-button__link {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 56px;
  padding: 14px 24px;
  border-radius: 14px !important;
  color: var(--lux-blog-cta-button-copy);
  background: var(--lux-blog-cta-button-surface);
  line-height: 1.4;
  white-space: normal;
}

.lux-blog-cta .lux-services-cta__button > .wp-block-button__link:hover,
.lux-blog-cta .lux-services-cta__button > .wp-block-button__link:focus-visible {
  color: var(--lux-blog-cta-button-copy);
  background: var(--lux-blog-cta-button-surface);
}

@media (max-width: 477px) {
  .lux-blog-cta .lux-services-cta__button {
    width: 100%;
  }

  .lux-blog-cta .lux-services-cta__button > .wp-block-button__link {
    padding-inline: 14px;
  }
}

/* ==========================================================================
   Portfolio case study (templates/single-post-portfolio.html)

   The cover and facts open the record. Editable narrative groups follow in
   one reading column, with headings above the copy and a contained result panel.
   Reuses the service section rhythm, stats, gallery, CTA and post-card systems.
   ========================================================================== */
/* One measure for the whole record.

   The page was running on three different spines: the masthead and the related
   strip on the 1440 page grid, the record itself on 1120, and the CTA breaking
   out to the full width because it inherits a rule written for the service
   canvas. Nothing lined up down the left edge. Everything now sits on
   --lux-case-measure, and the results band is the single deliberate exception. */
.lux-case {
  /* The site's own grid. A case study that sits narrower than every other page
     reads as a mistake on a wide screen, so the record uses the house measure
     and the prose is capped inside it instead — the same way the FAQ list sits
     at a reading width inside a full 1440 section. */
  --lux-case-measure: var(--lux-content);
  --lux-case-prose: 750px;
  --lux-case-card-padding: clamp(22px, 3vw, 44px);
  --lux-case-type-body: clamp(17px, calc(16px + 0.2vw), 19px);
  --lux-case-type-heading: clamp(24px, 2vw, 30px);
}

.lux-case .lux-panel-inner,
.lux-case .lux-case-cover,
.lux-case .lux-related,
.lux-case-content > :not(.alignfull) {
  width: min(
    var(--lux-case-measure),
    calc(100% - var(--lux-page-gutter) * 2)
  ) !important;
  max-width: none !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.lux-case-body {
  /* clip, not hidden: the results band bleeds by 100vw, which counts the
     scrollbar, and hidden here would also break the sticky section labels. */
  overflow-x: clip;
  padding-bottom: var(--lux-section-space-bottom);
  background: var(--lux-surface);
}

/* The cover lifts into the masthead and the facts plate sits on its lower
   edge, so the page opens on the project record, not on a stock hero. */
.lux-case-cover {
  margin-top: clamp(-64px, -4vw, -32px) !important;
  margin-bottom: 0 !important;
}

/* The lift is taken out of the masthead's lower edge, so the lead has to hand
   back the same amount. Without it a one line excerpt clears the cover and a
   two line one loses its second line underneath the image. The shared lead
   sets its margin as a shorthand with !important, so the override has to
   carry the flag as well or it never lands. */
.lux-case .lux-single-masthead .lux-svc-hero-lead {
  margin-bottom: clamp(36px, 4.4vw, 70px) !important;
}

.lux-case .lux-single-masthead :is(.lux-single-title, .lux-svc-hero-lead) {
  max-width: var(--lux-case-prose);
  margin-inline: 0 !important;
  text-align: left;
}

.lux-case .lux-services-cta__copy > :is(h2, p) {
  max-width: var(--lux-case-prose);
}

.lux-case-cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--lux-radius-card);
  box-shadow: 0 20px 48px rgba(2, 10, 28, 0.18);
}

/* ---- sections ---- */
.lux-case-content > .lux-svc-section {
  margin-top: 0 !important;
  padding-top: clamp(30px, 3.4vw, 46px);
  padding-bottom: clamp(30px, 3.4vw, 46px);
  border-top: 1px solid var(--lux-line, #e4e8ee);
}

.lux-case-content > .lux-facts-section {
  padding-top: 0;
  border-top: 0;
}

/* Section headings stay next to their content, including on wide screens. */
.lux-case-content .lux-svc-section__title {
  margin: 0 0 14px !important;
  color: var(--lux-case-heading);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-case-type-heading, var(--lux-type-card-title));
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
}

.lux-case-content > .lux-svc-section > :not(.lux-svc-section__title):last-child {
  margin-bottom: 0 !important;
}

/* Running text stops at a readable measure. The facts plate, the results tiles,
   the gallery and embeds are data, not prose, and use the whole column. */
.lux-case-content > .lux-svc-section > :is(.lux-svc-section__title, p, ul, ol, blockquote) {
  max-width: var(--lux-case-prose);
  margin-inline: 0 !important;
}

.lux-case-content > .lux-svc-section > .lux-svc-caps {
  max-width: none;
}

.lux-case-content > .lux-svc-section:not(.lux-facts-section) {
  display: block;
}

/* Legacy cases without a reading group retain their bounded prose column.
   Core groups remain editable and each section uses its natural height. */
.lux-case .lux-case-content > :is(.wp-block-group.lux-case-cards, p, ul, ol, blockquote) {
  width: min(var(--lux-case-prose), calc(100% - var(--lux-page-gutter) * 2)) !important;
  margin-inline: auto !important;
}

/* Card padding surrounds the readable prose. The navigation column fills
   the remainder of the same 1440px frame as the cover and project facts. */
.lux-case-content > .wp-block-group.lux-case-reading {
  --lux-case-rail-gap: clamp(32px, 3.4vw, 48px);
  display: grid !important;
  grid-template-columns:
    minmax(0, calc(var(--lux-case-prose) + var(--lux-case-card-padding) * 2 + 2px))
    minmax(300px, 1fr);
  gap: var(--lux-case-rail-gap);
  align-items: start;
  margin-block: clamp(30px, 3.4vw, 46px) !important;
  padding: 0;
}

.lux-case-reading > .wp-block-group.lux-case-reading__main {
  width: 100% !important;
  min-width: 0;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0;
}

.lux-case .lux-case-reading__main.lux-case-content > :not(.alignfull) {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
}

.lux-case .lux-case-reading__main.lux-case-content > :first-child:not(.alignfull) {
  margin-block-start: 0 !important;
}

.lux-case .lux-case-reading__main.lux-case-content > :last-child:not(.alignfull) {
  margin-block-end: 0 !important;
}

.lux-case-reading__main > .lux-svc-section > :is(p, ul, ol, blockquote) {
  font-size: var(--lux-case-type-body);
  line-height: 1.75;
}

/* Gallery, technology and quote groups remain ordinary editable sections.
   They use the same card frame as the narrative, with their natural heights. */
.lux-case-reading__main > .wp-block-group.lux-svc-section:not(.lux-case-outcome) {
  margin-block: clamp(28px, 3vw, 36px) !important;
  padding: var(--lux-case-card-padding);
  border: 1px solid var(--lux-case-card-line);
  border-radius: var(--lux-case-card-radius);
  background: var(--lux-case-card-surface);
  box-shadow: var(--lux-case-card-shadow);
}

.lux-case-reading > .wp-block-group.lux-case-sidebar {
  position: sticky;
  top: calc(var(--lux-header-h) + 24px);
  min-width: 0;
  margin: 0 !important;
  padding: clamp(24px, 2.5vw, 36px);
  border: 1px solid var(--lux-case-rail-line);
  border-radius: var(--lux-case-card-radius);
  color: var(--lux-case-rail-copy);
  background: var(--lux-case-rail-surface);
}

.lux-case-sidebar .lux-toc--case {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.lux-case-reading > .lux-case-sidebar:not(.lux-case-sidebar--with-cta):has(.lux-toc--case[hidden]) {
  display: none;
}

.lux-case-sidebar .lux-toc__title {
  padding-bottom: 18px;
  color: var(--lux-case-rail-link);
  border-color: var(--lux-case-rail-line);
  font-size: clamp(18px, 1.4vw, 21px);
  cursor: pointer;
}

.lux-case-sidebar .lux-toc__nav {
  gap: 6px;
  max-height: min(65vh, 540px);
}

.lux-case .lux-case-sidebar a.lux-toc__link {
  padding: 12px 16px;
  color: var(--lux-case-rail-copy);
  font-size: var(--lux-case-type-body);
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.lux-case .lux-case-sidebar a.lux-toc__link:is(:hover, .is-active) {
  color: var(--lux-case-rail-active-copy);
  border-left-color: var(--lux-case-link);
  background: var(--lux-case-rail-active);
}

.lux-case .lux-case-sidebar a.lux-toc__link.is-active {
  font-weight: 600;
}

/* Desktop uses the same editor-managed closing CTA below the contents.
   Each panel has its own frame; compact screens restore the closing position. */
.lux-case-reading > .wp-block-group.lux-case-sidebar--with-cta {
  padding: 0;
  border: 0;
  background: transparent;
}

.lux-case-sidebar--with-cta > .lux-toc--case {
  padding: clamp(24px, 2vw, 32px);
  border: 1px solid var(--lux-case-rail-line);
  border-radius: var(--lux-case-card-radius);
  background: var(--lux-case-rail-surface);
}

.lux-case-sidebar--with-cta .lux-toc__title {
  padding-bottom: 14px;
}

.lux-case-sidebar--with-cta .lux-toc__nav {
  gap: 4px;
}

.lux-case .lux-case-sidebar--with-cta a.lux-toc__link {
  padding-block: 10px;
}

.lux-case-reading > .wp-block-group.lux-case-sidebar--static {
  position: static;
}

.lux-case .lux-case-sidebar > .lux-services-cta.lux-svc-cta {
  --lux-cta-control-w: 0px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  width: 100% !important;
  max-width: 100% !important;
  margin: 24px 0 0 !important;
  padding: clamp(24px, 2vw, 32px);
  overflow: visible;
  border: 1px solid var(--lux-case-rail-line);
  border-radius: var(--lux-case-card-radius);
  color: var(--lux-case-rail-copy);
  background: var(--lux-case-rail-cta-surface);
  box-shadow: none;
}

.lux-case .lux-case-sidebar > .lux-toc--case[hidden] + .lux-services-cta {
  margin-top: 0 !important;
}

.lux-case-sidebar > .lux-services-cta::before,
.lux-case-sidebar > .lux-services-cta::after {
  display: none;
}

.lux-case .lux-case-sidebar .lux-services-cta__title {
  color: var(--lux-case-rail-link) !important;
  font-size: clamp(22px, 1.6vw, 26px);
  font-weight: 600;
  line-height: 1.35;
}

.lux-case .lux-case-sidebar :is(.lux-services-cta__eyebrow, .lux-services-cta__lead) {
  color: var(--lux-case-rail-muted);
}

.lux-case .lux-case-sidebar .lux-services-cta__lead {
  font-size: var(--lux-type-lead);
  font-weight: 400;
  line-height: 1.65;
}

.lux-case-sidebar .lux-services-cta__aside {
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  gap: 12px;
}

.lux-case-sidebar :is(.lux-services-cta__actions, .lux-services-cta__button, .lux-services-cta__button > .wp-block-button__link) {
  width: 100%;
  min-width: 0;
}

.lux-case .lux-case-sidebar .lux-services-cta__button > .wp-block-button__link {
  padding-inline: 14px;
  color: var(--lux-case-rail-button-copy);
  background: var(--lux-case-rail-button-surface);
  white-space: normal;
  line-height: 1.35;
}

.lux-case .lux-case-sidebar .lux-svc-cta__phone a {
  color: var(--lux-case-rail-copy) !important;
  border-color: var(--lux-case-rail-line);
  font-weight: 400;
}

.lux-case .lux-case-sidebar .lux-svc-cta__phone a::before {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.lux-case .lux-case-sidebar .lux-svc-cta__phone a::after {
  background: var(--lux-case-rail-muted);
}

.lux-case .lux-case-sidebar .lux-svc-cta__phone a:is(:hover, :focus-visible) {
  background: var(--lux-case-rail-active);
}

@media (max-width: 1119px) {
  .lux-case-content > .wp-block-group.lux-case-reading {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .lux-case-reading > .wp-block-group.lux-case-sidebar {
    position: static;
    order: -1;
    width: 100%;
    padding: 18px 22px;
  }

  .lux-case-sidebar .lux-toc--case:not([open]) > .lux-toc__title {
    margin: 0;
    padding: 0;
    border: 0;
  }
}

.lux-case .lux-case-content > .wp-block-group.lux-case-cards {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 3vw, 36px);
  margin-block: clamp(30px, 3.4vw, 46px) !important;
  padding: 0;
  align-items: start;
}

.lux-case-content > .lux-case-cards > .wp-block-group.lux-case-card {
  min-width: 0;
  margin: 0 !important;
  padding: var(--lux-case-card-padding);
  border: 1px solid var(--lux-case-card-line);
  border-radius: var(--lux-case-card-radius);
  color: var(--lux-case-copy);
  background: var(--lux-case-card-surface);
  box-shadow: var(--lux-case-card-shadow);
}

.lux-case-content > .lux-case-cards > .wp-block-group.lux-case-card--work {
  background: var(--lux-case-work-surface);
}

/* An explicit editor surface retains its shared palette and inner spacing. */
.lux-case-content > .lux-case-cards > .wp-block-group.lux-case-card:is(.is-style-lux-denim, .is-style-lux-soft) {
  padding: var(--lux-case-card-padding);
  border-color: var(--lux-case-card-line);
  border-radius: var(--lux-case-card-radius);
  background: var(--lux-case-card-surface);
}

.lux-case-content > .lux-case-cards > .lux-case-card > .lux-svc-section__title {
  position: static;
  max-width: var(--lux-case-prose);
  margin: 0 0 18px !important;
  font-size: var(--lux-case-type-heading);
  text-align: left;
}

.lux-case-content > .lux-case-cards > .lux-case-card--work > .lux-svc-section__title {
  color: var(--lux-case-heading);
}

.lux-case-content > .lux-case-cards > .lux-case-card > :is(p, ul, ol, blockquote) {
  max-width: var(--lux-case-prose);
  color: var(--lux-case-copy);
  font-size: var(--lux-case-type-body);
  line-height: 1.75;
}

.lux-case-content > .lux-case-cards > .lux-case-card > * + * {
  margin-top: 16px;
}

.lux-case-content > .lux-case-cards > .lux-case-card > :last-child {
  margin-bottom: 0 !important;
}

.lux-case-content > .lux-case-cards > .lux-case-card :is(ul, ol) {
  padding-inline-start: 22px;
}

.lux-case-content > .lux-case-cards > .lux-case-card li + li {
  margin-top: 10px;
}

/* Unordered work items read as rows; ordered lists keep their numbering. */
.lux-case-content > .lux-case-cards > .lux-case-card--work > ul.wp-block-list {
  padding-inline-start: 0;
  margin-top: 24px;
  list-style: none;
}

.lux-case-content > .lux-case-cards > .lux-case-card--work > ul.wp-block-list > li {
  position: relative;
  padding: 18px 0 18px 20px;
  margin-top: 0;
  border-top: 1px solid var(--lux-line, #e4e8ee);
}

.lux-case-content > .lux-case-cards > .lux-case-card--work > ul.wp-block-list > li::before {
  position: absolute;
  top: calc(18px + .9em - 2.5px);
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lux-case-link);
  content: "";
}

.lux-case-content > .lux-case-cards > .lux-case-card a:not(.wp-element-button) {
  color: var(--lux-case-link);
}

.lux-case-content > .lux-case-cards > .lux-case-card > .lux-case-services {
  font-size: clamp(16px, 1.15vw, 17px);
}

.lux-case-content > .lux-case-cards > .lux-case-card .lux-svc-section__title::after {
  display: none;
}

/* ---- project facts ----
   A plate resting on the cover. One row per fact; duplicate a .lux-fact to add
   one and the strip reflows on its own. */
.lux-facts-section {
  position: relative;
  z-index: 2;
  margin-top: 0 !important;
}

.lux-case-body:has(.lux-case-cover) .lux-facts-section {
  margin-top: clamp(-56px, -3.5vw, -28px) !important;
}

/* The plate sits above the masthead it rests on, and the masthead is its own
   stacking context (isolation: isolate, for its sheen), so the breadcrumb's
   list opens under the plate. breadcrumb-switch.js lifts the open list into
   the top layer; a browser without popovers lifts the whole masthead instead,
   which covers the top of the plate while the list is open but keeps the
   list readable. */
@supports not selector(:popover-open) {
  .lux-single-masthead:has(.lux-crumb-switch[open]) {
    z-index: 3;
  }
}

/* Two up until there is room for four. auto-fit on its own fitted three into a
   narrow window and left the fourth alone on a line of its own, which is the
   one arrangement a strip of four facts should never take. */
.lux-facts {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border-radius: var(--lux-radius-card);
  background: var(--lux-white);
  box-shadow: 0 16px 40px rgba(2, 10, 28, 0.12);
}

@media (min-width: 900px) {
  .lux-facts {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

/* Was a 1px background gap. Columns land on fractional pixels, so the browser
   antialiased individual seams away and one divider went missing between
   tiles. Each tile paints its own ring instead: neighbouring rings meet on the
   same edge and always resolve to one crisp line. */
.lux-fact {
  padding: clamp(14px, 1.4vw, 18px) clamp(14px, 1.5vw, 20px);
  background: var(--lux-white);
  box-shadow: 0 0 0 1px var(--lux-line, #e4e8ee);
}

.lux-fact__label {
  margin: 0 0 5px !important;
  color: rgba(44, 45, 45, 0.55);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* The value used to be bold and near black, which made a strip of plain facts
   shout louder than the section headings under it. Regular weight puts it back
   in its place: something you read, not something that reads at you. */
.lux-fact__value {
  display: flex;
  overflow-wrap: anywhere;
  align-items: center;
  gap: 9px;
  margin: 0 !important;
  color: var(--lux-text);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 400;
  line-height: 1.35;
}

.lux-post-content .lux-fact__value a,
.lux-post-content .lux-case-services a {
  color: var(--lux-blue-deep);
  text-decoration: none;
}

/* The strip was tall enough to read as a section of its own: 28px of padding
   around a two-line stack, in a bar whose whole job is to be taken in at a
   glance. Half the padding, a smaller label, and a glyph in front of the value
   that says what kind of fact this is before the words do.

   The glyph is opt-in per tile through the lux-fact--* classes below, set from
   the editor's "LUX — ფაქტის აიქონი" panel (assets/js/fact-icon-settings.js).
   A tile with no icon chosen keeps a plain value rather than a blank square,
   which is what the [class*=] rule is for. */
.lux-fact__value::before {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background: var(--lux-blue-deep);
  content: "";
  -webkit-mask: var(--lux-fact-icon) no-repeat center / contain;
  mask: var(--lux-fact-icon) no-repeat center / contain;
}

.lux-fact:not([class*="lux-fact--"]) .lux-fact__value::before {
  display: none;
}

.lux-fact--date {
  --lux-fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}

.lux-fact--duration {
  --lux-fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.4l3.4 2'/%3E%3C/svg%3E");
}

.lux-fact--schedule {
  --lux-fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h10'/%3E%3C/svg%3E");
}

.lux-fact--format {
  --lux-fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3a14 14 0 0 1 0 18a14 14 0 0 1 0-18z'/%3E%3C/svg%3E");
}

.lux-fact--level {
  --lux-fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='M5 20v-4M12 20v-9M19 20V5'/%3E%3C/svg%3E");
}

.lux-fact--place {
  --lux-fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.7 7-11a7 7 0 1 0-14 0c0 5.3 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
}

/* Shared, because the rating row in the masthead marks its student count with
   the same glyph. */
:root {
  --lux-fact-icon-group: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M2.6 20a6.4 6.4 0 0 1 12.8 0'/%3E%3Cpath d='M16.5 5.4a3 3 0 0 1 0 5.2M18 14.4a6.4 6.4 0 0 1 3.4 5.6'/%3E%3C/svg%3E");
}

.lux-fact--group {
  --lux-fact-icon: var(--lux-fact-icon-group);
}

.lux-fact--certificate {
  --lux-fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5.4'/%3E%3Cpath d='M8.4 13.6L7 21l5-2.4 5 2.4-1.4-7.4'/%3E%3C/svg%3E");
}

.lux-fact__value a:hover,
.lux-fact__value a:focus-visible {
  color: var(--lux-active);
}

.lux-case-content > .lux-svc-section > :is(p, ul, ol):not([class]) {
  font-size: var(--lux-type-lead);
  line-height: var(--lux-leading-lead);
}

.lux-case-services {
  margin-top: clamp(14px, 1.6vw, 18px) !important;
  color: rgba(44, 45, 45, 0.7);
  font-size: var(--lux-type-body);
}

.lux-case-services a:hover,
.lux-case-services a:focus-visible {
  color: var(--lux-active);
}

/* ---- results ----
   The page's one loud moment. Selected by the stats it contains, so the band
   appears wherever the editor puts the results and nowhere else. The dark
   ground lets the stat tiles keep the treatment they already have. */
.lux-case-content > .lux-svc-section:has(> .lux-stats) {
  --lux-case-heading: var(--lux-white);
  --lux-case-copy: var(--lux-paper);
  --lux-case-link: var(--lux-glow);
  position: relative;
  isolation: isolate;
  padding-block: clamp(44px, 5.5vw, 76px);
  border-top: 0;
  color: var(--lux-paper);
}

/* Only the colour bleeds. The section itself keeps the measure, so the label
   and the tiles stay on the same spine as every other row — stretching the
   element to 100vw instead pushed its right edge off by the scrollbar. */
.lux-case-content > .lux-svc-section:has(> .lux-stats)::before {
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw);
  background: var(--lux-blue-surface);
  content: "";
}

.lux-case-content > .lux-svc-section:has(> .lux-stats) .lux-svc-section__title {
  color: var(--lux-glow);
}

.lux-case-content > .lux-svc-section:has(> .lux-stats) > :is(p, ul, ol) {
  color: var(--lux-case-copy);
}

/* The approved outcome panel keeps the same spine and rounded edges as the
   story cards. Stats remain direct children for the shared dark palette. */
.lux-case-content > .wp-block-group.lux-case-outcome {
  --lux-case-heading: var(--lux-white);
  --lux-case-copy: var(--lux-paper);
  --lux-case-link: var(--lux-glow);
  margin-block: clamp(30px, 3.4vw, 46px) !important;
  padding: clamp(26px, 3.2vw, 46px);
  border: 0;
  border-radius: var(--lux-case-card-radius);
  color: var(--lux-case-copy);
  background: var(--lux-blue-surface);
}

.lux-case-content > .lux-case-outcome::before {
  display: none;
}

.lux-case-content > .wp-block-group.lux-case-outcome > .lux-svc-section__title {
  margin-bottom: 24px !important;
  color: var(--lux-case-heading);
  text-align: left;
}

.lux-case-content > .wp-block-group.lux-case-outcome .lux-svc-section__title::after {
  display: none;
}

.lux-case-content > .wp-block-group.lux-case-outcome > :is(p, ul, ol) {
  color: var(--lux-case-copy);
}

.lux-case-content > .lux-case-outcome a:not(.wp-element-button) {
  color: var(--lux-case-link);
}

.lux-case-content > .lux-case-outcome > .lux-stats {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lux-gap);
  margin-block: 0;
}

@media (max-width: 599px) {
  .lux-case-content > .lux-case-outcome > .lux-stats {
    grid-template-columns: minmax(0, 1fr);
  }
}

.lux-case-content > .lux-case-outcome > .lux-stats + p {
  margin-top: 24px;
}

.lux-case-content > .lux-case-outcome:is(.is-style-lux-bare, .is-style-lux-soft) {
  --lux-case-heading: var(--lux-dark);
  --lux-case-copy: var(--lux-text);
  --lux-case-link: var(--lux-blue-deep);
  color: var(--lux-case-copy);
}

/* Technologies are compact metadata here, while service capability tiles keep
   their existing icon treatment outside a case study. */
.lux-case-content > .lux-svc-section > .lux-svc-caps {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
}

.lux-case-content > .lux-svc-section > .lux-svc-caps > :is(li, span, a) {
  min-height: 0;
  padding: 9px 14px;
  border: 1px solid var(--lux-case-card-line);
  color: var(--lux-case-copy);
  background: var(--lux-case-chip-surface);
  box-shadow: none;
  font-size: var(--lux-type-small);
  font-weight: 400;
}

.lux-case-content > .lux-svc-section > .lux-svc-caps > :is(li, span, a)::before,
.lux-case-content > .lux-svc-section > .lux-svc-caps > :is(li, span, a)::after {
  display: none;
}

/* ---- client quote ----
   Set as display type instead of a tinted callout: the words are the emphasis. */
.lux-case-quote {
  margin: 0 !important;
  padding: 0;
  border: 0;
  background: none;
}

.lux-case-quote p {
  margin: 0 !important;
  color: var(--lux-dark);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-section-title);
  font-style: normal;
  font-weight: 600;
  line-height: 1.45;
  text-wrap: pretty;
}

.lux-case-quote cite {
  display: block;
  margin-top: 16px;
  color: rgba(44, 45, 45, 0.6);
  font-size: var(--lux-type-meta);
  font-style: normal;
}

.lux-case-reading__main .lux-case-quote {
  padding: 0;
  border: 0;
}

.lux-case-reading__main .lux-case-quote p {
  color: var(--lux-case-copy);
  font-size: clamp(22px, 1.6vw, 28px);
  line-height: 1.5;
}

.lux-case-reading__main .lux-case-quote cite {
  color: var(--lux-case-copy);
  opacity: 0.75;
}

/* ---- gallery and video ---- */
/* The gallery block sizes its columns with
   calc(33.333% - var(--wp--style--unstable-gallery-gap) * .66667), and that
   variable falls back to the theme's block gap, which theme.json sets as a
   unitless 0. Subtracting a plain number from a percentage voids the whole
   declaration, so every column width is thrown away and the images stack one
   per row. Stating the gap with a unit is all the calc needs, and the house
   grid gap is the one the rest of the page already uses. The block prints its
   own per-instance rule for that variable, so the override carries the extra
   class to outrank it. */
.wp-block-gallery.lux-case-gallery {
  --wp--style--unstable-gallery-gap: var(--lux-gap);
  gap: var(--lux-gap) !important;
}

/* Screenshots arrive in every proportion: a desktop capture, a full page
   strip, a phone. is-cropped equalises the row, but the row then takes its
   height from the tallest of them and a three up band grows into a wall.
   Fixing the band keeps every case gallery the same shape whatever is put
   in it. */
.wp-block-gallery.lux-case-gallery.is-cropped figure.wp-block-image {
  aspect-ratio: 4 / 3;
}

@media (max-width: 599px) {
  .lux-case-reading__main .wp-block-gallery.lux-case-gallery.has-nested-images > figure.wp-block-image {
    width: 100% !important;
    flex-basis: 100% !important;
  }
}

.lux-case-gallery img {
  border-radius: var(--lux-radius-sm);
}

.lux-case-video {
  margin: 0 !important;
}

/* ---- pattern: cases ----
   The cards are the site's existing .lux-post-cards system, including its own
   column and carousel modifiers. Only the query width changes: that system
   insets itself by 20px for a full-bleed section, which the reading column
   has already accounted for. */
.lux-svc-cases .lux-post-cards__query {
  width: 100%;
}

/* Sidebar contact CTA — brand denim panel. */
.lux-cta-card {
  --lux-denim-opacity: 0.48;

  padding: clamp(22px, 2.4vw, 30px);
  border-radius: var(--lux-radius-card);
  color: var(--lux-paper);
  background: var(--lux-blue-surface);
}

.lux-cta-card__title {
  margin: 0 !important;
  color: var(--lux-white) !important;
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-weight: 600;
  font-size: var(--lux-type-card-title);
  line-height: var(--lux-leading-title);
}

.lux-cta-card__text {
  margin: 10px 0 0 !important;
  color: var(--lux-paper);
  font-size: var(--lux-type-small);
  line-height: 1.55;
}

.lux-cta-card__actions {
  margin: 18px 0 0 !important;
}

.lux-cta-card__actions .wp-block-button,
.lux-cta-card__actions .wp-block-button__link {
  width: 100%;
}

/* Enrolment card. Same dark panel as .lux-cta-card above, so the two cards in
   the rail read as one family, with the media bleeding to the card's top edge
   the way the cover does in the main column. */
.lux-enroll {
  --lux-denim-opacity: 0.48;

  overflow: hidden;
  border-radius: var(--lux-radius-card);
  color: var(--lux-paper);
  background: var(--lux-blue-surface);
}

.lux-enroll__media {
  margin: 0 !important;
}

.lux-enroll__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Providers hand back a fixed-size iframe, so the ratio has to be imposed. */
.lux-enroll__video :is(iframe, video) {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

.lux-enroll__body {
  padding: clamp(20px, 2.2vw, 26px);
}

.lux-enroll__title {
  margin: 0 !important;
  color: var(--lux-white) !important;
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-card-title);
  font-weight: 600;
  line-height: var(--lux-leading-title);
}

.lux-enroll__old {
  margin: 0 0 0 auto !important;
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--lux-type-body);
  text-decoration: line-through;
}

.lux-enroll__old:empty + .lux-enroll__badge {
  margin-left: auto !important;
}

/* On the dark card the chip earns its keep from the frame rather than the
   fill, so the border is brought up and the type matched to the archive. */
.lux-enroll__badge {
  padding: 7px 11px !important;
  border-color: rgba(177, 228, 255, 0.55) !important;
  font-size: var(--lux-type-small) !important;
  font-weight: 700;
}

/* The card no longer repeats the course name: the breadcrumb above it and the
   page title already say it twice. The price is the first thing in the body
   now, so it starts at the top rather than under a heading that was there. */
.lux-enroll__price-row {
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 6px 8px !important;
  margin: 0 !important;
}

.lux-enroll__price {
  margin: 0 !important;
  color: var(--lux-white);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-section-title);
  font-weight: 700;
  line-height: 1.1;
}

.lux-enroll__note {
  margin: 0 !important;
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  color: rgba(255, 255, 255, 0.56);
  font-size: var(--lux-type-small);
}

/* A course that has no discount, or no monthly note, leaves those fields empty.
   Each bound block then renders as an empty paragraph, so it is hidden here
   along with any row left holding nothing. */
.lux-enroll__old:empty,
.lux-enroll__badge:empty,
.lux-enroll__price:empty,
.lux-enroll__note:empty,
.lux-enroll .lux-enroll__price-row:not(:has(> p:not(:empty))) {
  display: none !important;
}

/* Premium button labels are kept to one line everywhere else, where they sit
   in a wide bar. The rail is 300px at the narrow end of the desktop range and
   "დარეგისტრირდი ახლა" does not fit on one line there, so it is allowed to
   wrap: at the space, never inside a word, and the trailing arrow gives up its
   room to the words. On a full-width screen it goes back to one line. */
.lux-enroll__actions .lux-premium-button__title,
.lux-enroll__actions .lux-premium-button__subtitle {
  overflow-wrap: normal;
  white-space: normal;
  word-break: keep-all;
}

.lux-enroll__actions .lux-premium-button__title {
  font-size: clamp(14px, 1.15vw, 17px);
}

.lux-enroll__actions .lux-premium-button__arrow {
  display: none;
}

.lux-enroll__actions {
  margin: 18px 0 0 !important;
}

.lux-enroll__actions .wp-block-button,
.lux-enroll__actions .wp-block-button__link {
  width: 100%;
}

/* Course syllabus. Deliberately unlike the FAQ accordion: numbered, the full
   width of the column, and far roomier, so a syllabus never reads as a list of
   questions. */
.lux-course-modules__list {
  display: grid;
  width: 100%;
  gap: 12px;
  counter-reset: lux-module;
}

.lux-course-module {
  overflow: hidden;
  border: 1px solid var(--lux-line, #e4e8ee);
  border-radius: var(--lux-radius-card);
  background: rgba(2, 10, 28, 0.022);
  transition:
    border-color var(--lux-transition),
    background var(--lux-transition),
    box-shadow var(--lux-transition);
}

.lux-course-module[open] {
  border-color: rgba(24, 120, 241, 0.32);
  background: var(--lux-white);
  box-shadow: 0 10px 30px rgba(2, 10, 28, 0.07);
}

.lux-course-module > summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 19px 22px;
  color: var(--lux-dark);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-card-title);
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}

.lux-course-module > summary::-webkit-details-marker {
  display: none;
}

/* Generated, so reordering or deleting a module renumbers the rest without
   anyone retyping anything. */
.lux-course-module > summary::before {
  counter-increment: lux-module;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--lux-radius-sm);
  color: var(--lux-blue-deep);
  background: rgba(24, 120, 241, 0.1);
  font-size: var(--lux-type-small);
  font-weight: 700;
  content: counter(lux-module, decimal-leading-zero);
}

.lux-course-module > summary::after {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-left: auto;
  border-right: 2px solid rgba(2, 10, 28, 0.34);
  border-bottom: 2px solid rgba(2, 10, 28, 0.34);
  transform: rotate(45deg) translate(-2px, -2px);
  content: "";
  transition: transform var(--lux-transition);
}

.lux-course-module[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.lux-course-module > :not(summary) {
  margin: 0 22px 20px 80px !important;
}

.lux-course-module ul {
  display: grid;
  gap: 9px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.lux-course-module li {
  position: relative;
  padding-left: 20px;
  color: var(--lux-text);
  font-size: var(--lux-type-body);
  line-height: 1.55;
}

.lux-course-module li::before {
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lux-active);
  content: "";
}

/* Outcomes are short claims, so they read as a grid of cards rather than yet
   another stack of rows. */
.lux-course-outcomes__grid {
  display: grid !important;
  /* min() keeps the track from exceeding a narrow column: without it the 300px
     floor overflowed the article card on a phone and the overflow was clipped. */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  width: 100%;
  gap: 14px;
}

.lux-course-outcome {
  padding: clamp(20px, 2.2vw, 26px);
  border: 1px solid var(--lux-line, #e4e8ee);
  border-radius: var(--lux-radius-card);
  background: rgba(2, 10, 28, 0.022);
}

.lux-course-outcome__title {
  margin: 0 0 8px !important;
  color: var(--lux-dark);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-card-title);
  font-weight: 600;
  line-height: 1.3;
}

/* Tick drawn from two borders, so the pattern needs no icon file. */
.lux-course-outcome::before {
  position: absolute;
  top: 0.42em;
  left: 3px;
  width: 12px;
  height: 7px;
  border-bottom: 2px solid var(--lux-active);
  border-left: 2px solid var(--lux-active);
  transform: rotate(-45deg);
  content: "";
}

.lux-course-outcome__text {
  margin: 0 !important;
  color: var(--lux-text);
  font-size: var(--lux-type-body);
  line-height: 1.6;
}

/* Tutors. */
.lux-course-tutors__list {
  display: grid;
  width: 100%;
  gap: 14px;
}

.lux-course-tutor {
  display: grid !important;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: clamp(16px, 2vw, 24px);
  align-items: start;
  padding: clamp(20px, 2.2vw, 26px);
  border: 1px solid var(--lux-line, #e4e8ee);
  border-radius: var(--lux-radius-card);
  background: rgba(2, 10, 28, 0.022);
}

/* An unfilled image block still leaves its figure behind, so close the column
   rather than hold a gap for a photo nobody added. */
.lux-course-tutor:not(:has(.lux-course-tutor__photo img[src])) {
  grid-template-columns: minmax(0, 1fr);
}

.lux-course-tutor:not(:has(.lux-course-tutor__photo img[src])) .lux-course-tutor__photo {
  display: none;
}

.lux-course-tutor__photo {
  margin: 0 !important;
}

.lux-course-tutor__photo img {
  display: block;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
}

.lux-course-tutor__name {
  margin: 0 !important;
  color: var(--lux-dark);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-card-title);
  font-weight: 600;
}

.lux-course-tutor__role {
  margin: 4px 0 0 !important;
  color: var(--lux-blue-deep);
  font-size: var(--lux-type-small);
  font-weight: 600;
}

.lux-course-tutor__bio {
  margin: 12px 0 0 !important;
  color: var(--lux-text);
  font-size: var(--lux-type-body);
  line-height: 1.6;
}

/* ---- outcomes ----
   Eight bordered cards in a row is eight frames around eight sentences. The
   frame moves out to the section instead: one panel, two columns, and a check
   in front of every line. The list is what is being read, so the list is what
   gets the room. */
/* Two columns and no more. auto-fit gave a third one on a wide screen, and a
   three-across list of sentences reads as a table rather than as a list. */
.lux-course-outcomes__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 22px) clamp(24px, 3vw, 44px);
  padding: clamp(20px, 2.2vw, 30px);
  border: 1px solid var(--lux-line, #e4e8ee);
  border-radius: var(--lux-radius-card);
  background: var(--lux-white);
}

.lux-course-outcome {
  position: relative;
  padding: 0 0 0 28px;
  border: 0;
  border-radius: 0;
  background: none;
}

/* A short name above the line is optional. Most lists read better without it,
   so an empty one simply closes up. */
.lux-course-outcome__title {
  margin: 0 0 4px !important;
  font-size: var(--lux-type-body);
}

.lux-course-outcome__title:empty {
  display: none;
}

/* The two columns are the same width to the fraction of a pixel. What made one
   look roomier than the other was the rag: a long last line on the left beside
   a short one on the right. Balancing the break points settles it. */
.lux-course-outcome__title,
.lux-course-outcome__text {
  text-wrap: pretty;
}

.lux-course-outcome__text {
  font-size: var(--lux-type-small);
  line-height: 1.55;
}

@media (max-width: 767px) {
  .lux-course-outcomes__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- what is in the course ----
   Not the same question as what you will learn, and it should not look like
   it. Skills are a quiet checked list; this is the stack of things handed
   over, the access and the files, so it takes the one dark panel in the
   column and states each item at the size of a promise. It is the loudest
   block on the page after the enrolment card, on purpose: it is the answer to
   "what do I actually get for the money". */
.lux-kit {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  width: 100%;
  border-radius: var(--lux-radius-card);
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(24, 120, 241, 0.32), transparent 60%),
    var(--lux-dark);
}

@media (min-width: 640px) {
  .lux-kit {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lux-kit__item:nth-child(2) {
    border-top: 0;
  }

  .lux-kit__item:nth-child(even) {
    border-left: 1px solid rgba(255, 255, 255, 0.09);
  }
}

/* The panel is one surface with one light in the corner. Each cell used to
   paint the site's blue gradient again on its own, which made four separate
   washes and a background that looked mottled rather than deep. The cells are
   transparent now and hairlines do the dividing. */
.lux-kit__item {
  position: relative;
  padding: clamp(18px, 2vw, 24px) clamp(18px, 2vw, 26px) clamp(18px, 2vw, 24px)
    clamp(50px, 4.4vw, 60px);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.lux-kit__item:first-child {
  border-top: 0;
}

.lux-kit__item::before {
  position: absolute;
  top: clamp(20px, 2.1vw, 26px);
  left: clamp(18px, 2vw, 24px);
  width: 20px;
  height: 20px;
  border-radius: var(--lux-radius-sm);
  background: linear-gradient(145deg, var(--lux-active), var(--lux-blue-deep));
  content: "";
}

/* The check, drawn with two borders the way the rest of the site draws it. */
.lux-kit__item::after {
  position: absolute;
  top: clamp(26px, 2.7vw, 32px);
  left: clamp(24px, 2.5vw, 30px);
  width: 7px;
  height: 4px;
  border-bottom: 2px solid var(--lux-white);
  border-left: 2px solid var(--lux-white);
  transform: rotate(-45deg);
  content: "";
}

/* The name is set in the body face, not the display one. In caps at heading
   size, four of these in a dark box read as four more headings on a page that
   already has six, and the eye starts skipping. The same words in the reading
   face still lead their line without claiming to be a section. */
.lux-kit__name {
  margin: 0 !important;
  color: var(--lux-white);
  font-family: "FiraGO", "Sylfaen", sans-serif;
  font-size: clamp(15.5px, 1.2vw, 17px);
  font-weight: 400;
  line-height: 1.35;
  text-wrap: pretty;
}

/* The terms, for the items that have any. An empty line closes up. */
.lux-kit__note {
  margin: 6px 0 0 !important;
  color: rgba(245, 245, 245, 0.66);
  font-size: var(--lux-type-small);
  line-height: 1.45;
  text-wrap: pretty;
}

.lux-kit__note:empty {
  display: none;
}

/* ---- syllabus ----
   The modules were separate cards with air between them, which read as three
   unrelated boxes. They are one document with sections in it, so they share
   one frame and one set of dividers, each module headed by a band that says
   how much is under it. */
.lux-course-modules__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 18px;
  margin: 0 0 14px;
}

.lux-course-modules__summary {
  margin: 0 !important;
  color: rgba(44, 45, 45, 0.7);
  font-size: var(--lux-type-small);
}

.lux-course-modules__toggle {
  margin-left: auto;
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  color: var(--lux-blue-deep);
  background: none;
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-meta);
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: color var(--lux-transition);
}

.lux-course-modules__toggle:hover,
.lux-course-modules__toggle:focus-visible {
  color: var(--lux-dark);
}

.lux-course-modules__list {
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(2, 10, 28, 0.13);
  border-radius: var(--lux-radius-card);
  background: var(--lux-white);
}

/* One rule per module, drawn dark enough to be seen. The rows are white, so
   the line is the only thing telling one module from the next. */
.lux-course-module {
  border: 0;
  border-top: 1px solid rgba(2, 10, 28, 0.13);
  border-radius: 0;
  background: none;
}

.lux-course-module:first-child {
  border-top: 0;
}

.lux-course-module[open] {
  border-color: var(--lux-line, #e4e8ee);
  background: none;
  box-shadow: none;
}

.lux-course-module > summary {
  padding: 16px 20px;
  font-size: var(--lux-type-body);
  background: var(--lux-white);
  transition: background var(--lux-transition);
}

.lux-course-module > summary:hover {
  background: rgba(24, 120, 241, 0.05);
}

.lux-course-module[open] > summary {
  border-bottom: 1px solid rgba(2, 10, 28, 0.13);
}

.lux-course-module > summary::before {
  width: 34px;
  height: 34px;
  font-size: var(--lux-type-meta);
}

/* The lesson count claims the right-hand slot, so the chevron sits beside it
   instead of being pushed out by the title. A module the script left without a
   count keeps the old behaviour. */
.lux-course-module__count {
  flex: 0 0 auto;
  margin-left: auto;
  color: rgba(44, 45, 45, 0.6);
  font-family: inherit;
  font-size: var(--lux-type-meta);
  font-weight: 600;
  white-space: nowrap;
}

.lux-course-module > summary::after {
  margin-left: 14px;
}

.lux-course-module > summary:not(:has(.lux-course-module__count))::after {
  margin-left: auto;
}

.lux-course-module > :not(summary) {
  margin: 0 20px 18px 68px !important;
  padding-top: 16px;
}

.lux-course-module li {
  padding-left: 26px;
}

/* A line in a module is a lesson, so it is marked like one. */
.lux-course-module li::before {
  top: 0.28em;
  width: 15px;
  height: 15px;
  border-radius: 0;
  background: var(--lux-blue-deep);
  -webkit-mask: var(--lux-lesson-icon) no-repeat center / contain;
  mask: var(--lux-lesson-icon) no-repeat center / contain;
}

:root {
  --lux-lesson-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M10 9.5l5 2.5-5 2.5z'/%3E%3C/svg%3E");
}

/* ---- proof in the hero ----
   A star rating sat here and was removed on purpose. The school has ten Google
   reviews and they are about the agency, not about a course, so an average
   printed on a course page would have been a number with nothing behind it.
   What is left is the one figure that is simply true, marked with the same
   glyph the facts strip uses for a group. */
.lux-hero-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin-top: clamp(14px, 1.6vw, 20px);
}

.lux-hero-proof__students {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(245, 245, 245, 0.78);
  font-size: var(--lux-type-small);
  line-height: 1.2;
}

.lux-hero-proof__students::before {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  background: rgba(245, 245, 245, 0.78);
  content: "";
  -webkit-mask: var(--lux-fact-icon-group) no-repeat center / contain;
  mask: var(--lux-fact-icon-group) no-repeat center / contain;
}

/* ---- what graduates say ----
   Video, not paragraphs. Anyone can type a testimonial; a face saying it is the
   part that cannot be faked, which is the whole reason this block exists.

   The row arranges itself around however many there are, because a school will
   have two of these one term and six the next. Three across is the most a video
   can take before the faces get too small to read, and four goes two and two
   rather than three and a lonely one. */
.lux-course-reviews__list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  gap: var(--lux-gap);
}

@media (min-width: 640px) {
  .lux-course-reviews__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* One video does not need a column to sit in and half a row to leave empty. */
  .lux-course-reviews__list:not(:has(> :nth-child(2))) {
    grid-template-columns: minmax(0, 520px);
  }
}

@media (min-width: 1200px) {
  .lux-course-reviews__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Exactly four: two rows of two, so no row ends in a gap. */
  .lux-course-reviews__list:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Exactly two: they take half each rather than sitting in a third. */
  .lux-course-reviews__list:not(:has(> :nth-child(3))) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* A single video is not a grid. It keeps a readable width and starts left. */
  .lux-course-reviews__list:not(:has(> :nth-child(2))) {
    grid-template-columns: minmax(0, 520px);
  }
}

.lux-course-review {
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 1.6vw, 20px);
  overflow: hidden;
  border: 1px solid var(--lux-line, #e4e8ee);
  border-radius: var(--lux-radius-card);
  background: var(--lux-white);
  transition:
    border-color var(--lux-transition),
    box-shadow var(--lux-transition);
}

.lux-course-review:hover {
  border-color: rgba(24, 120, 241, 0.3);
  box-shadow: 0 10px 28px rgba(2, 10, 28, 0.08);
}

/* WordPress turns a line that holds nothing but an address into the player
   itself, right where the address was. So the line is two things depending on
   what is in it: a field the editor fills in, which the site never shows, or
   the video, which is the whole top of the card.

   Every rule that hides an unfilled card is held back from the editor. Inside
   Gutenberg the address is still plain text, so these rules would hide the very
   thing the editor came to fill in, and the block would look like it had
   vanished. The editor's canvas carries .editor-styles-wrapper on its body,
   which is what tells the two apart. */
body:not(.editor-styles-wrapper) .lux-course-review__link:not(:has(iframe)) {
  display: none !important;
}

/* The video is the card. It bleeds to three edges and the name sits under it.
   An embed block put there by hand counts the same, so a card built either way
   works. */
.lux-course-review :is(.wp-block-embed:has(iframe), .lux-course-review__link:has(iframe)) {
  margin: calc(clamp(16px, 1.6vw, 20px) * -1) calc(clamp(16px, 1.6vw, 20px) * -1)
    clamp(14px, 1.4vw, 18px) !important;
}

.lux-course-review :is(.wp-block-embed, .lux-course-review__link) iframe {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* A card without its video is a card with nothing to say: it goes, and the
   section goes with it when none of them have been filled in yet. */
body:not(.editor-styles-wrapper) .lux-course-review:not(:has(iframe)) {
  display: none;
}

body:not(.editor-styles-wrapper) .lux-course-reviews:not(:has(iframe)) {
  display: none;
}

/* Photo on the left spanning both lines, name over result on the right. It is
   a grid rather than nested boxes so the editor's list view shows four plain
   blocks instead of a stack of groups inside groups. */
.lux-course-review__person {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  margin-top: auto !important;
}

.lux-course-review__photo {
  grid-row: 1 / 3;
  margin: 0 !important;
}

.lux-course-review__photo img {
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

/* No photo, no hole where one would have been, and no empty column either. */
.lux-course-review:not(:has(.lux-course-review__photo img[src])) .lux-course-review__photo {
  display: none;
}

.lux-course-review:not(:has(.lux-course-review__photo img[src])) .lux-course-review__person {
  grid-template-columns: minmax(0, 1fr);
}

.lux-course-review:not(:has(.lux-course-review__photo img[src]))
  :is(.lux-course-review__name, .lux-course-review__result) {
  grid-column: 1;
}

.lux-course-review__name {
  grid-column: 2;
  align-self: end;
  margin: 0 !important;
  color: var(--lux-dark);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-small);
  font-weight: 600;
  line-height: 1.25;
}

.lux-course-review__result {
  grid-column: 2;
  align-self: start;
  margin: 3px 0 0 !important;
  color: var(--lux-blue-deep);
  font-size: var(--lux-type-meta);
  line-height: 1.3;
}


/* ---- the sale ----
   A discount is worth stating twice only if the two statements say different
   things. The band takes the money: one saturated blue block, the only one in
   the column, carrying the number the reader actually cares about. The clock
   on the enrolment card takes the time. Neither repeats the other, and both
   come and go with the same deadline field. */
.lux-sale {
  display: grid;
  gap: 4px;
  padding: clamp(20px, 2.2vw, 30px) clamp(20px, 2.4vw, 34px);
  border-radius: var(--lux-radius-card);
  color: var(--lux-white);
  background: linear-gradient(112deg, var(--lux-blue-deep) 0%, var(--lux-blue) 52%, var(--lux-active) 118%);
  box-shadow: 0 14px 34px rgba(21, 104, 224, 0.28);
}

/* The price fields the band is built from. Data, not copy. */
.lux-sale__data {
  display: none !important;
}

.lux-sale__eyebrow {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.78);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-meta);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.lux-sale__saved {
  margin: 0 !important;
  color: var(--lux-white);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: 700;
  line-height: 1.1;
}

.lux-sale__prices {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--lux-type-small);
}

/* ---- the countdown ----
   Its own card in the rail, directly under the enrolment card and above the
   guide. On the card it had to share the reader's attention with the price,
   the seats and the button; one step down it gets a line of its own and the
   card goes back to being about the price. Tabular figures keep the boxes from
   twitching as the seconds turn over. */
.lux-countdown {
  padding: 16px 18px 18px;
  border: 1px solid var(--lux-line, #e4e8ee);
  border-radius: var(--lux-radius-card);
  background: var(--lux-white);
  box-shadow: 0 4px 24px rgba(2, 10, 28, 0.06);
}

.lux-countdown__note {
  margin: 0 0 10px !important;
  color: rgba(44, 45, 45, 0.6);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-meta);
  font-weight: 600;
}

.lux-countdown__clock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.lux-countdown__clock.is-short {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lux-countdown__clock.is-short .lux-countdown__unit--days {
  display: none;
}

/* The unit name sits under its box, not inside it. In the box it fought the
   digits for the same few pixels and lost, which left a number that looked
   cramped and a word nobody could read. */
.lux-countdown__unit {
  display: grid;
  gap: 6px;
  text-align: center;
}

.lux-countdown__value {
  display: block;
  padding: 11px 4px 10px;
  border: 1px solid rgba(2, 10, 28, 0.1);
  border-radius: var(--lux-radius-sm);
  color: var(--lux-blue-deep);
  background: rgba(24, 120, 241, 0.07);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: clamp(21px, 1.8vw, 26px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.lux-countdown__label {
  color: rgba(44, 45, 45, 0.55);
  font-size: 11.5px;
  line-height: 1.2;
}

/* What the clock actually costs the reader, in money rather than in urgency. */
.lux-countdown__after {
  margin: 12px 0 0 !important;
  color: rgba(44, 45, 45, 0.7);
  font-size: var(--lux-type-meta);
  line-height: 1.45;
}

.lux-countdown__cta {
  display: none;
}

/* ---- seats ----
   Scarcity has to be legible before it is persuasive: what is left, how full
   the group is, and how many people have already taken the course, in that
   order. The bar is the only place on the page that carries a state colour, so
   it stays brand blue until the group is nearly gone. */
.lux-seats {
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--lux-line, #e4e8ee);
  border-radius: var(--lux-radius-card);
  background: var(--lux-white);
}

/* The course fields feeding the block. They are data, not copy. */
.lux-seats__data {
  display: none !important;
}

.lux-seats__head {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
}

.lux-seats__left {
  margin: 0 !important;
  color: var(--lux-dark);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 700;
  line-height: 1.2;
}

.lux-seats.is-scarce .lux-seats__left {
  color: var(--lux-blue-deep);
}

.lux-seats__filled {
  margin: 0 0 0 auto !important;
  font-family: "FiraGO", "Sylfaen", sans-serif;
  color: rgba(44, 45, 45, 0.6);
  font-size: var(--lux-type-small);
  font-weight: 600;
  line-height: 1.2;
}

.lux-seats__track {
  position: relative;
  overflow: hidden;
  height: 8px;
  margin-top: 14px;
  border-radius: 999px;
  background: rgba(2, 10, 28, 0.08);
}

.lux-seats__bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--lux-blue-deep), var(--lux-active));
  transition: width 700ms var(--lux-motion-out);
}

.lux-seats.is-full .lux-seats__bar {
  background: rgba(2, 10, 28, 0.45);
}

.lux-seats__students {
  margin: 12px 0 0 !important;
  color: rgba(44, 45, 45, 0.7);
  font-size: var(--lux-type-small);
}

/* The same block on the enrolment card. It sits right above the button, where
   the last places are the argument for pressing it, so it drops the panel and
   the students line and keeps only what a decision needs: how many are left
   and how full the group is. On the dark ground the bar is lit rather than
   solid, so it reads against the navy without competing with the button. */
.lux-enroll__seats {
  margin-top: 18px !important;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.lux-enroll__seats .lux-seats__left {
  color: var(--lux-white);
  font-size: var(--lux-type-body);
}

.lux-enroll__seats.is-scarce .lux-seats__left {
  color: var(--lux-white);
}

.lux-enroll__seats .lux-seats__filled {
  color: rgba(255, 255, 255, 0.56);
  font-size: var(--lux-type-meta);
}

.lux-enroll__seats .lux-seats__track {
  height: 6px;
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.16);
}

.lux-enroll__seats .lux-seats__bar {
  background: linear-gradient(90deg, var(--lux-active), var(--lux-glow));
}

.lux-enroll__seats.is-full .lux-seats__bar {
  background: rgba(255, 255, 255, 0.42);
}

@media (prefers-reduced-motion: reduce) {
  .lux-seats__bar {
    transition: none;
  }
}

/* The rest of the tutor, folded away. Most readers want to know who is
   teaching and move on; the ones deciding between two schools want the whole
   record. The toggle names the person rather than saying "read more", because
   a name is the thing being vouched for. */
.lux-course-tutor__more {
  margin: clamp(12px, 1.4vw, 16px) 0 0;
  border: 0;
  border-top: 1px solid rgba(2, 10, 28, 0.1);
  padding-top: clamp(12px, 1.4vw, 16px);
}

.lux-course-tutor__more > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--lux-blue-deep);
  font-size: var(--lux-type-small);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  transition: color var(--lux-transition);
}

.lux-course-tutor__more > summary::-webkit-details-marker {
  display: none;
}

.lux-course-tutor__more > summary::after {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  content: "";
  transition: transform var(--lux-transition);
}

.lux-course-tutor__more[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.lux-course-tutor__more > summary:hover {
  color: var(--lux-dark);
}

.lux-course-tutor__more > :not(summary) {
  margin: 12px 0 0 !important;
  color: var(--lux-text);
  font-size: var(--lux-type-small);
  line-height: 1.6;
}

.lux-course-tutor__more ul {
  display: grid;
  gap: 7px;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  list-style: none;
}

.lux-course-tutor__more li {
  position: relative;
  padding-left: 18px;
}

.lux-course-tutor__more li::before {
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lux-active);
  content: "";
}

/* ==========================================================================
   The editor canvas

   Rules above remove slots a course has not filled in yet: a fact with no
   value, a card with no photograph, a line left blank on purpose. That is
   right for a visitor and exactly wrong for the person filling them in, who
   opens the editor and finds nothing to click. Gutenberg marks its canvas with
   .editor-styles-wrapper, so every slot is handed back here.
   ========================================================================== */
.editor-styles-wrapper :is(.lux-course-review__photo, .lux-course-tutor__photo) {
  display: block !important;
}

.editor-styles-wrapper .lux-course-tutor {
  grid-template-columns: 110px minmax(0, 1fr) !important;
}

.editor-styles-wrapper .lux-course-review__person {
  grid-template-columns: auto minmax(0, 1fr) !important;
}

.editor-styles-wrapper :is(.lux-course-review__name, .lux-course-review__result) {
  grid-column: 2 !important;
}

.editor-styles-wrapper .lux-course-fact {
  display: grid !important;
}

.editor-styles-wrapper .lux-course-card__facts {
  display: grid !important;
}

.editor-styles-wrapper :is(.lux-course-outcome__title, .lux-kit__note):empty {
  display: block !important;
}

/* An image block with no picture yet has nothing to size, so it is given a
   visible target to drop one onto. */
.editor-styles-wrapper
  :is(.lux-course-review__photo, .lux-course-tutor__photo)
  img:not([src]) {
  min-width: 60px;
  min-height: 60px;
  border-radius: var(--lux-radius-sm);
  background: rgba(2, 10, 28, 0.06);
}

/* The article and the rail are white cards. On the near-white page surface they
   had nothing to sit against and the whole page read as one flat sheet, so the
   course single gets a cooler ground with a faint wash of the brand blue. */
.lux-course-single {
  background:
    radial-gradient(1100px 400px at 50% 0, rgba(24, 120, 241, 0.06), transparent 68%),
    var(--lux-paper);
}

/* Timeline variant of the table of contents. The blog keeps the plain
   left-border list above; a course rail shows one continuous track with the
   section you are reading marked on it. */
.lux-toc--timeline .lux-toc__nav {
  position: relative;
  gap: 0;
}

.lux-toc--timeline .lux-toc__nav::before {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 8px;
  width: 2px;
  border-radius: 999px;
  background: var(--lux-line, #e4e8ee);
  content: "";
}

.lux-toc--timeline .lux-toc__link {
  position: relative;
  padding: 12px 8px 12px 32px;
  border-left: 0;
  border-radius: var(--lux-radius-sm);
}

.lux-toc--timeline .lux-toc__link--h3 {
  padding-left: 46px;
}

/* The stretch of track that belongs to this entry, lit only while current. */
.lux-toc--timeline .lux-toc__link::before {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 8px;
  width: 2px;
  border-radius: 999px;
  background: transparent;
  content: "";
  transition: background var(--lux-transition);
}

.lux-toc--timeline .lux-toc__link.is-active::before {
  background: var(--lux-blue-deep);
}

/* The marker. Hidden entries keep the element so it can grow into place. */
.lux-toc--timeline .lux-toc__link::after {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: transparent;
  opacity: 0;
  transform: translateY(-50%) scale(0.4);
  content: "";
  transition:
    opacity var(--lux-transition),
    transform var(--lux-transition);
}

.lux-toc--timeline .lux-toc__link.is-active::after {
  background: var(--lux-active);
  box-shadow: 0 0 0 4px rgba(0, 145, 252, 0.16);
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.lux-toc--timeline .lux-toc__link.is-active {
  color: var(--lux-blue-deep);
  background: transparent;
}

.lux-toc--timeline .lux-toc__link:hover {
  background: rgba(24, 120, 241, 0.05);
}

/* Phone-only enrolment bar. Desktop never shows it. */
.lux-enroll-bar {
  display: none;
}

/* Other services list. */
.lux-svc-others {
  padding: 20px 22px;
  border: 1px solid var(--lux-line, #e4e8ee);
  border-radius: var(--lux-radius-card);
  background: var(--lux-white);
  box-shadow: 0 4px 24px rgba(2, 10, 28, 0.05);
}

.lux-svc-others__title {
  margin: 0 0 6px !important;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--lux-line, #e4e8ee);
  color: var(--lux-dark);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-meta);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.lux-svc-others-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.lux-svc-others-list > .wp-block-post {
  margin: 0;
}

.lux-svc-others-list > .wp-block-post + .wp-block-post {
  border-top: 1px solid var(--lux-line, #e4e8ee);
}

.lux-svc-other-link {
  margin: 0 !important;
  font-family: "FiraGO", "Sylfaen", sans-serif;
  font-weight: 400;
  font-size: var(--lux-type-small);
  line-height: 1.4;
}

.lux-svc-other-link a {
  display: block;
  padding: 12px 0;
  color: var(--lux-text);
  transition: color var(--lux-transition);
}

.lux-svc-other-link a:hover {
  color: var(--lux-blue-deep);
}

.lux-svc-others__empty {
  margin: 12px 0 0 !important;
  color: #6b7684;
  font-size: var(--lux-type-small);
}

/* ==========================================================================
   Course page, left column (templates/single-lux_course.html)

   The article was a white card, and every section the editor drops into it is
   itself a white card, so the page was cards inside a card: no edge for any of
   them to read against, and eighty pixels of the 1440 grid spent on a border
   that carried nothing. The wrapper is gone here. The sections sit straight on
   the page ground, which gives them their contrast back, hands the full column
   width to the content, and lets the page be ruled like a syllabus rather than
   boxed like a document.
   ========================================================================== */
.lux-course-single {
  padding-bottom: var(--lux-section-space-bottom);
}

.lux-course-single .lux-single-main {
  --lux-card-pad: 0px;

  padding: 0;
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* The body rises into the masthead, so the hero and the first row of content
   share one edge instead of stacking as two blocks with a gap between them.
   The masthead pays for the overlap in padding, and the lift is a single
   number: change it here and both sides follow. A breadcrumb-only masthead is
   far too short to lend anything, so it keeps its own spacing. */
body:not(.lux-breadcrumb-only) .lux-course-single {
  --lux-course-lift: clamp(40px, 4.4vw, 64px);
}

body:not(.lux-breadcrumb-only) .lux-course-single .lux-single-masthead {
  padding-bottom: calc(clamp(26px, 3vw, 44px) + var(--lux-course-lift));
}

body:not(.lux-breadcrumb-only) .lux-course-single .lux-single-body {
  margin-top: calc(var(--lux-course-lift) * -1) !important;
}

/* ---- the section rule ----
   Six sections used to begin at the same weight with nothing between them.
   Each heading now carries a rule out to the column's edge: the site's own
   48px section divider laid on its side, then a hairline that fades away. It
   is the one device repeated down the page, so the sections read as a set and
   the eye can always find where the next one starts. */
:is(.lux-course-single, .lux-service-single) .lux-post-content > .lux-svc-section {
  --lux-svc-gap: clamp(40px, 4.4vw, 64px);
  margin-top: var(--lux-svc-gap) !important;
}

:is(.lux-course-single, .lux-service-single) .lux-post-content > .lux-svc-section:first-child {
  margin-top: 0 !important;
}

:is(.lux-course-single, .lux-service-single) .lux-svc-section__title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 clamp(18px, 2vw, 26px) !important;
  font-size: clamp(21px, 1.8vw, 26px);
}

:is(.lux-course-single, .lux-service-single) .lux-svc-section__title::after {
  flex: 1 1 auto;
  min-width: var(--lux-section-divider-width);
  height: var(--lux-section-divider-height);
  border-radius: 999px;
  background-image:
    linear-gradient(90deg, var(--lux-blue-deep), var(--lux-active)),
    linear-gradient(90deg, rgba(2, 10, 28, 0.2) 60%, rgba(2, 10, 28, 0.04));
  background-repeat: no-repeat;
  background-position:
    0 50%,
    calc(var(--lux-section-divider-width) + 12px) 50%;
  background-size:
    var(--lux-section-divider-width) var(--lux-section-divider-height),
    calc(100% - var(--lux-section-divider-width) - 12px) 1px;
  content: "";
}

/* ---- what it covers ----
   On a service these are tiles, and there they are the section's whole
   content. A course says it twice: four tiles with a check, and directly below
   them four outcome cards with a check. The second pair is the one carrying
   sentences, so this pair gives up its boxes and becomes what it actually is,
   a list of subjects. Same check, same blue, no frame. */
.lux-course-single .lux-svc-caps {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px 30px;
}

.lux-course-single .lux-svc-caps > :where(a, span, li):not(.wp-block-post-terms__separator) {
  min-height: 0;
  padding: 0 0 0 24px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: var(--lux-type-body);
  transform: none;
}

.lux-course-single .lux-svc-caps > :where(a, span, li):not(.wp-block-post-terms__separator)::before {
  display: none;
}

.lux-course-single .lux-svc-caps > :where(a, span, li):not(.wp-block-post-terms__separator)::after {
  left: 4px;
  width: 6px;
  height: 11px;
  margin-top: -7px;
  border-color: var(--lux-blue-deep);
  border-width: 2.5px;
}

.lux-course-single .lux-svc-caps > a:not(.wp-block-post-terms__separator):hover {
  color: var(--lux-blue-deep);
}

/* The tutor card used to tint itself a couple of percent off the wrapper's
   white. On the page ground it takes the white instead. */
.lux-course-single .lux-course-tutor {
  background: var(--lux-white);
}

/* The FAQ list is capped at a 720px reading measure, which was right inside the
   wrapper and reads as a stray indent against full-width sections above it. */
.lux-course-single .lux-reference-faq__list {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* ==========================================================================
   Blog archive (templates/home.html)
   ========================================================================== */
/* The author page and the work archive are the same shape as the blog: a dark
   panel, then a grid of cards on the page's own surface. They share the rule
   so the space above the footer is the same on all three and stays that way. */
.lux-blog-archive,
.lux-author-archive,
.lux-work-archive {
  padding-bottom: var(--lux-section-space-bottom);
  background: var(--lux-surface);
}

/* The card grid keeps the same distance from the panel above it as the blog
   loop does; .lux-post-cards on its own carries only its column variables. */
.lux-work-archive .lux-post-cards {
  margin-top: clamp(30px, 3.4vw, 48px) !important;
}

/* Spacing comes from .lux-panel-dark; the blog intro only carries its colours. */

.lux-blog-title {
  margin: 0 !important;
  color: var(--lux-surface-heading, var(--lux-dark)) !important;
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif !important;
  font-weight: 600;
  font-size: var(--lux-type-hero);
  line-height: var(--lux-leading-hero);
  text-wrap: balance;
}

.lux-blog-lead {
  width: min(100%, 62ch);
  margin: 20px 0 0 !important;
  font-size: var(--lux-type-lead);
  line-height: var(--lux-leading-lead);
}

.lux-blog-loop {
  margin-top: clamp(30px, 3.4vw, 48px) !important;
}

.lux-blog-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lux-gap) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.lux-blog-list > .wp-block-post {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: var(--lux-radius-card);
  background: var(--lux-white);
  box-shadow: 0 4px 24px rgba(2, 10, 28, 0.08);
  transition:
    box-shadow 320ms ease,
    transform 320ms var(--lux-motion-out);
}

.lux-blog-list > .wp-block-post:hover,
.lux-blog-list > .wp-block-post:focus-within {
  box-shadow: var(--lux-button-shadow-glow);
  transform: translateY(-4px);
}

.lux-post-media {
  margin: 0 !important;
  overflow: hidden;
}

.lux-post-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 420ms var(--lux-motion-out);
}

.lux-blog-list > .wp-block-post:hover .lux-post-media img {
  transform: scale(1.04);
}

.lux-post-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: clamp(22px, 2vw, 28px);
}

.lux-post-cats {
  margin: 0 !important;
}

.lux-post-cats a {
  padding: 7px 11px;
  border-radius: var(--lux-radius-sm);
  color: var(--lux-blue-deep);
  background: rgba(59, 158, 255, 0.15);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-meta);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  transition: background var(--lux-transition);
}

.lux-post-cats a:hover {
  background: rgba(59, 158, 255, 0.28);
}

.lux-post-cats .wp-block-post-terms__separator {
  display: none;
}

.lux-post-heading {
  margin: 14px 0 0 !important;
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-card-title);
  font-weight: 600;
  line-height: var(--lux-leading-title);
}

.lux-post-heading a {
  color: var(--lux-dark);
  transition: color var(--lux-transition);
}

.lux-blog-list > .wp-block-post:hover .lux-post-heading a {
  color: var(--lux-blue-deep);
}

.lux-post-excerpt {
  margin: 10px 0 0 !important;
}

.lux-post-excerpt p {
  margin: 0;
  font-size: var(--lux-type-body);
  line-height: var(--lux-leading-body);
}

.lux-post-foot {
  align-items: center !important;
  gap: 12px !important;
  margin: auto 0 0 !important;
  padding-top: 20px;
}

.lux-post-date {
  margin: 0 !important;
  color: #6b7684;
  font-size: var(--lux-type-meta);
}

.lux-post-more {
  margin: 0 !important;
}

.lux-blog-list > .wp-block-post:hover .lux-post-more {
  color: var(--lux-dark);
}

.lux-blog-pagination {
  gap: 10px !important;
  margin-top: clamp(32px, 3.4vw, 48px) !important;
}

.lux-blog-pagination a,
.lux-blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #dbe2ea;
  border-radius: var(--lux-radius-sm);
  color: var(--lux-text);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-meta);
  font-weight: 600;
  transition:
    color var(--lux-transition),
    border-color var(--lux-transition),
    background var(--lux-transition);
}

.lux-blog-pagination a:hover {
  border-color: var(--lux-blue-deep);
  color: var(--lux-blue-deep);
}

.lux-blog-pagination .page-numbers.current {
  border-color: var(--lux-blue-deep);
  color: var(--lux-white);
  background: var(--lux-blue-deep);
}

.lux-blog-empty {
  margin: clamp(30px, 3.4vw, 48px) 0 0 !important;
  color: #6b7684;
}

@media (max-width: 1023px) {
  .lux-blog-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .lux-blog-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lux-blog-list > .wp-block-post:hover,
  .lux-blog-list > .wp-block-post:focus-within {
    transform: none;
  }

  .lux-blog-list > .wp-block-post:hover .lux-post-media img {
    transform: none;
  }
}

/* ==========================================================================
   Contact page (page "კონტაქტი", default page.html template)
   The masthead — crumbs and the H1 — comes from the template. Everything below
   is the post content, inserted from patterns/contact.php, so every string
   stays editable in Gutenberg.
   ========================================================================== */
/* page.html is built for reading-width pages: .lux-page-body caps the shell at
   960px and .lux-page-main paints it as a white card. The contact page brings
   its own surfaces — a white form card, a denim channels panel — so the shell
   hands over both. Keyed off :has(.lux-contact) rather than a page ID, so it is
   inserting the pattern in Gutenberg that widens the page, nothing hardcoded. */
.lux-page-body:has(.lux-contact) {
  width: min(var(--lux-content), calc(100% - var(--lux-page-gutter) * 2)) !important;
}

.lux-page-main:has(.lux-contact) {
  padding: 0;
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.lux-contact {
  margin-top: 0 !important;
}

.lux-contact__lead {
  max-width: 62ch;
  margin: 0 0 clamp(24px, 3vw, 36px) !important;
  color: rgba(44, 45, 45, 0.82);
  font-size: var(--lux-type-lead);
  line-height: var(--lux-leading-lead);
}

/* ---- the row: a stacked left column, and the map ----
   The map runs off the right edge of the viewport AND starts exactly on its
   midpoint. Both come from the same number: half the page grid.

   The row is widened rightwards by the distance from the grid's right edge to
   the viewport's (50% of the grid minus half the viewport — negative, so the
   row grows into it). The left column is then half the grid minus the gap, so
   column + gap lands the map's left edge on 50vw at every width. body already
   hides overflow-x, which keeps the scrollbar from opening a horizontal
   scroll. */
.lux-contact__main {
  --lux-contact-gap: clamp(20px, 2.4vw, 36px);
  --lux-contact-half: calc(
    min(var(--lux-content), 100vw - var(--lux-page-gutter) * 2) / 2
  );

  display: grid;
  grid-template-columns:
    calc(var(--lux-contact-half) - var(--lux-contact-gap))
    minmax(0, 1fr);
  gap: var(--lux-contact-gap);
  align-items: stretch;
  margin-right: calc(50% - 50vw);
}

/* Channels above, form below. align-content: start keeps the pair at the top
   of the row instead of spreading it down the map's full height. */
.lux-contact__col {
  display: grid;
  gap: var(--lux-contact-gap);
  align-content: start;
  min-width: 0;
}

/* ---- map ----
   Only the left corners are rounded: the right edge is off-screen, so rounding
   it would put a curve where the viewport already cuts. The iframe is pinned
   rather than sized at 100% — a percentage height needs a definite height on
   the parent, and a stretched grid item does not always give one.
   min-height is the floor for when the form column is the shorter of the two. */
.lux-contact__map {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid rgba(2, 10, 28, 0.1);
  border-right: 0;
  border-radius: var(--lux-radius-card) 0 0 var(--lux-radius-card);
  background: var(--lux-paper);
  box-shadow: 0 4px 20px rgba(2, 10, 28, 0.05);
}

.lux-contact__map-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- one card system ----
   The three blocks are peers, so they share a geometry: same padding, same
   radius, same title. Only the surface changes, and only once — the denim
   panel is the page's single accent, and both light cards are the same quiet
   white. Three different fills would have read as three different ideas. */
.lux-contact__form-card,
.lux-contact__channels {
  min-width: 0;
  padding: clamp(20px, 2.2vw, 30px);
  border-radius: var(--lux-radius-card);
}

.lux-contact__form-card {
  border: 1px solid rgba(2, 10, 28, 0.1);
  background: var(--lux-white);
  box-shadow: 0 4px 20px rgba(2, 10, 28, 0.05);
}

/* These live inside .lux-post-content, whose prose rules force a 1.7em top
   margin and a 23–30px size on every h2. A card title is not prose, so it
   opts out of both — and it needs the extra class to outrank `.lux-post-content
   h2`, which a single class would lose to. */
.lux-contact :is(
  .lux-contact__form-title,
  .lux-contact__aside-title
) {
  margin: 0 0 12px !important;
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: clamp(17px, 1.35vw, 19px);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.lux-contact .lux-contact__form-title {
  color: var(--lux-dark);
}

.lux-contact__form-note {
  margin: 0 0 clamp(18px, 2vw, 24px) !important;
  color: rgba(44, 45, 45, 0.7);
  font-size: var(--lux-type-small);
  line-height: 1.55;
}

/* ---- channels ----
   The denim panel the footer and the service CTA already use, so the three
   ways to reach the studio look the same everywhere on the site. */
/* Same lift as the two light cards — without it the denim panel sat flat on
   the page while they floated, which is half of why the three did not read as
   one set. */
/* Two channels per row on the desktop column, one per row on a phone. auto-fit
   decides that from the panel's real width rather than the viewport's, which
   is what actually determines whether two tracks fit — the panel is a column
   inside a column, so a viewport breakpoint would only ever be a guess. The
   260px floor is set by the longest value: a phone number needs ~155px of text
   beside the 86px the cell spends on padding, tile and border. */
.lux-contact__channels {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 1.8vw, 22px) clamp(16px, 1.8vw, 28px);
  align-content: start;
  overflow: hidden;
  border: 1px solid rgba(112, 198, 255, 0.18);
  color: var(--lux-paper);
  background: var(--lux-blue-surface);
  box-shadow: 0 4px 20px rgba(2, 10, 28, 0.05);
}

.lux-contact__channels::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--lux-sheen);
  mix-blend-mode: screen;
  opacity: 0.3;
  content: "";
  pointer-events: none;
}

/* The first channel row carries 12px of its own padding, so this title stops
   short of the shared 12px and lets that padding finish the gap. */
.lux-contact .lux-contact__aside-title {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  margin: 0 !important;
  color: var(--lux-white) !important;
}

/* One row = 44px icon tile + a label/value stack. The tile is the site's
   shared icon treatment; only the glyph changes, per modifier class.

   The tile is absolutely positioned, not a grid cell. As a cell spanning both
   text rows it forced its own 44px across them, so the two rows each took 22px
   and centred their text inside that — which is what pushed the label to the
   top of the tile and the value to the bottom. Out of flow, the label and the
   value are just two tight lines that centre against it as one block. */
/* The faint rule each row used to carry is now a full box. A border-top only
   ever spans its own cell, so in the 2-up grid it stopped halfway across the
   panel and read as a broken line — a box has no such half, and works the same
   whether the panel is one column or two.
   Geometry: 12px padding, then the 44px tile, then 14px before the text. */
.lux-contact-channel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 68px;
  padding: 12px 14px 12px 70px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--lux-radius-sm);
  transition: border-color 300ms ease;
}

.lux-contact-channel:hover,
.lux-contact-channel:focus-within {
  border-color: rgba(255, 255, 255, 0.24);
}

.lux-contact-channel::before {
  position: absolute;
  top: 50%;
  left: 12px;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border: 1px solid var(--lux-icon-tile-border);
  border-radius: var(--lux-radius-sm);
  background: var(--lux-icon-tile-background);
  box-shadow: var(--lux-icon-tile-shadow);
  content: "";
  transition:
    background 300ms ease,
    box-shadow 300ms ease;
}

/* The glyph is painted white through the artwork's own alpha and sits on top
   of the tile — the same technique as the service CTA's handset. */
.lux-contact-channel::after {
  position: absolute;
  top: 50%;
  left: 22px;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  background: var(--lux-white);
  content: "";
  -webkit-mask: var(--lux-channel-glyph) no-repeat center / contain;
  mask: var(--lux-channel-glyph) no-repeat center / contain;
}

.lux-contact-channel--phone {
  --lux-channel-glyph: url("assets/reference/icons/phone.webp");
}

.lux-contact-channel--email {
  --lux-channel-glyph: url("assets/brand/email.svg");
}

.lux-contact-channel--address {
  --lux-channel-glyph: url("assets/brand/map-pin.svg");
}

.lux-contact-channel--hours {
  --lux-channel-glyph: url("assets/reference/icons/work-hours.webp");
}

.lux-contact-channel:not([class*="lux-contact-channel--"])::after {
  display: none;
}

.lux-contact-channel:hover::before,
.lux-contact-channel:focus-within::before {
  background: var(--lux-icon-tile-background-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 8px 20px rgba(0, 88, 191, 0.2);
}

/* The label/value pair is one optical block centred against the tile, so both
   line-heights are tight and neither carries a stray margin. */
.lux-contact-channel__label {
  margin: 0 !important;
  color: rgba(167, 220, 255, 0.9);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.1;
}

.lux-contact-channel__value {
  margin: 2px 0 0 !important;
  color: var(--lux-white);
  /* Latin numerals — the Georgian caps face has uneven digit spacing, which
     shows up badly in a phone number and a time range. */
  font-family: "FiraGO", "Sylfaen", sans-serif;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1.2;
}

/* These sit inside .lux-post-content, whose prose-link rule paints every link
   blue and underlines it. On the denim panel the value IS the content, not a
   link in a sentence — it stays white and unruled, and the hover is the only
   thing that says it is clickable. The extra class outranks that rule. */
/* ---- the same channels, quieter in the footer ----
   On the contact page each channel is a card with a label, which is right: the
   page is about getting in touch. In the footer column those three cards were
   taller than the two lists beside them and pulled the whole row out of shape.
   A phone number, an address and an email announce what they are without being
   told, so the labels go, the tile drops to a marker and the box becomes a
   single line under each row.

   Phones keep the cards. There the column is full width with nothing to line
   up against, and the larger target is easier to hit with a thumb. */
@media (min-width: 768px) {
  /* Every row identical. Trimming the padding off the first and last of them
     looked tidier in the stylesheet and was wrong on the screen: the marker is
     centred in the row box, so a row with padding on one side only carries its
     marker six pixels away from its own text. The bottom rule stays on all
     three, which also parts the addresses from the social links below. */
  .lux-reference-footer__channels .lux-contact-channel {
    min-height: 0;
    padding: 11px 0 11px 44px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
  }

  /* 30px, the size of the social links underneath. Two rows of markers in one
     column should not be two sizes. */
  .lux-reference-footer__channels .lux-contact-channel::before {
    left: 0;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  }

  .lux-reference-footer__channels .lux-contact-channel::after {
    left: 7px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
  }

  .lux-reference-footer__channels .lux-contact-channel__label {
    display: none;
  }

  .lux-reference-footer__channels .lux-contact-channel__value {
    margin: 0 !important;
  }
}

:is(.lux-contact, .lux-reference-footer) .lux-contact-channel__value a {
  color: var(--lux-white);
  text-decoration: none;
  transition: color var(--lux-transition);
}

:is(.lux-contact, .lux-reference-footer) .lux-contact-channel__value a:hover,
:is(.lux-contact, .lux-reference-footer) .lux-contact-channel__value a:focus-visible {
  color: var(--lux-active);
  text-decoration: none;
}

/* Stacked, the map is a card like any other: both corners rounded, stopping
   short of the edge, because there is no second column for it to run past. */
@media (max-width: 860px) {
  .lux-contact__main {
    grid-template-columns: minmax(0, 1fr);
    margin-right: 0;
  }

  .lux-contact__map {
    min-height: 320px;
    border-right: 1px solid rgba(2, 10, 28, 0.1);
    border-radius: var(--lux-radius-card);
  }
}

/* On a phone the button is the only thing on its row, so it takes the row. */
@media (max-width: 560px) {
  .lux-form .ff-btn-submit,
  .lux-form .frm-fluent-form .ff-btn-submit {
    width: 100%;
  }
}

/* ==========================================================================
   Fluent Forms skin (.lux-form)
   Scoped to the wrapper class, not to .fluentform globally: a form dropped
   somewhere else keeps the plugin's own look until it is opted in, and the
   opt-in is a class the editor can see and copy in Gutenberg.
   Markup comes from Fluent Forms 6.x — .ff-el-group wraps each field,
   .ff-el-form-control is every text input, and .ff-t-cell is one column of a
   composite (name / contact) row.
   ========================================================================== */
.lux-form .fluentform {
  margin: 0;
}

/* One rhythm for the whole form. */
.lux-form {
  --lux-field-gap: clamp(18px, 2vw, 24px);
}

/* The gap belongs ABOVE the label, not below it: a label is closer to the
   field it names than to the field before it, so the space between groups is
   what separates them and the label-to-input gap stays tight. */
.lux-form .frm-fluent-form .ff-el-group {
  margin-bottom: var(--lux-field-gap);
}

.lux-form .frm-fluent-form .ff-el-group:last-child {
  margin-bottom: 0;
}

/* ---- a questionnaire's own writing ----
   A stepped form carries copy of its own: what this step is for, and what the
   reader gets at the end. It is written as HTML blocks in the form builder
   rather than as field labels, so the type scale lives here. */
.lux-form .lux-form-step-title {
  margin: 0 0 8px;
  color: var(--lux-white);
  font-size: clamp(19px, 1.8vw, 23px);
  font-weight: 700;
  line-height: 1.25;
}

.lux-form .lux-form-step-lead {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  line-height: var(--lux-leading-lead);
}

.lux-form .lux-form-help {
  display: grid;
  margin: 16px 0 0;
  padding: 0;
  gap: 10px;
  color: rgba(255, 255, 255, 0.62);
  list-style: none;
  font-size: var(--lux-type-small);
  line-height: 1.5;
}

.lux-form .lux-form-help strong {
  color: rgba(255, 255, 255, 0.88);
}

/* The running total is the sales team's number, not the reader's. The reader
   was promised a price by email, so the field rides along in the entry and the
   notification without ever being shown or reachable by tab. It stays in the
   layout rather than display:none, because the calculation script writes to it
   while the reader answers. */
.lux-form .lux-form-internal {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- labels ----
   A label names its field; it is not a heading. At 14px caps it competed with
   the card title, so it drops to 13px and to a muted ink — the input's own
   border is what the eye should land on. */
.lux-form .ff-el-input--label label {
  display: inline-block;
  margin-bottom: 4px;
  color: rgba(44, 45, 45, 0.72);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

/* The asterisk is the plugin's, recoloured: red on a white card is the only
   marker here that has to be read before the field, not after it. */
.lux-form .ff-el-is-required.asterisk-right label::after,
.lux-form .ff-el-is-required.asterisk-left label::before {
  color: #d92d20;
  font-weight: 700;
}

/* ---- controls ---- */
.lux-form .ff-el-form-control {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(2, 10, 28, 0.16);
  border-radius: var(--lux-radius-sm);
  color: var(--lux-text);
  background: var(--lux-white);
  box-shadow: none;
  font-family: "FiraGO", "Sylfaen", sans-serif;
  font-size: var(--lux-type-body);
  line-height: 1.5;
  transition:
    border-color 200ms ease,
    box-shadow 200ms ease;
}

/* Grows with the card: on the 1440 grid the message box is close to 1000px
   wide, and a 132px-tall box that wide reads as a slot rather than a field. */
.lux-form textarea.ff-el-form-control {
  min-height: clamp(132px, 11vw, 184px);
  padding-top: 12px;
  resize: vertical;
}

.lux-form .ff-el-form-control::placeholder {
  color: rgba(44, 45, 45, 0.45);
  opacity: 1;
}

/* Pointer focus gets the ring; the keyboard outline from the global
   :focus-visible rule still lands on top of it for keyboard users. */
.lux-form .ff-el-form-control:focus {
  border-color: var(--lux-blue);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(24, 120, 241, 0.16);
}

.lux-form .ff-el-form-control:hover:not(:focus) {
  border-color: rgba(2, 10, 28, 0.28);
}

/* ---- composite rows (name / contact) ----
   Fluent Forms lays these out as a table; on a narrow card the two cells stack
   instead of squeezing a phone number into half a column. */
/* row-gap / column-gap rather than margins on the cells: row-gap only applies
   once the two cells actually wrap onto separate lines, which depends on how
   wide the card is, not on the viewport — so no breakpoint can get it right. */
.lux-form .ff-t-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lux-field-gap) clamp(12px, 1.4vw, 18px);
  margin: 0;
}

.lux-form .ff-t-cell {
  flex: 1 1 200px;
  min-width: 0;
  padding: 0;
}

/* The composite wrapper already spaces the row. Leaving these on stacked a
   second margin between the name row and the phone row. */
.lux-form .ff-t-cell .ff-el-group {
  margin-bottom: 0;
}

/* ---- validation ---- */
.lux-form .ff-el-form-control.ff-el-is-error,
.lux-form .ff-el-form-control[aria-invalid="true"] {
  border-color: #d92d20;
}

.lux-form .ff-el-form-control.ff-el-is-error:focus,
.lux-form .ff-el-form-control[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.14);
}

.lux-form .error.text-danger,
.lux-form .ff-el-form-check-label .error {
  display: block;
  margin-top: 6px;
  color: #d92d20;
  font-size: var(--lux-type-meta);
  line-height: 1.4;
}

/* ---- submit ----
   The site's primary action: brand blue, caps face, the same 50px height and
   5px radius the theme's buttons use everywhere else. */
.lux-form .ff-el-group.ff-el-form-bottom,
.lux-form .ff-el-group.ff-text-left {
  margin-bottom: 0;
}

/* Sized to its label, not to the card: a 1000px-wide button on the 1440 grid
   is a banner, and the click target it actually needs is about 220px. */
.lux-form .ff-btn-submit,
.lux-form .frm-fluent-form .ff-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  min-width: 220px;
  max-width: 100%;
  min-height: var(--lux-button-height);
  padding: 12px 32px;
  border: 0;
  border-radius: var(--lux-radius-button);
  color: var(--lux-white);
  background: var(--lux-blue);
  box-shadow: var(--lux-button-shadow);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-button);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    background 220ms ease,
    box-shadow 220ms ease,
    transform 220ms var(--lux-motion-out);
}

.lux-form .ff-btn-submit::after {
  color: inherit;
  content: "→";
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  transition: transform 220ms var(--lux-motion-out);
}

.lux-form .ff-btn-submit:hover,
.lux-form .ff-btn-submit:focus-visible {
  background: var(--lux-blue-deep);
  box-shadow: var(--lux-button-shadow-glow);
  transform: translateY(-2px);
}

.lux-form .ff-btn-submit:hover::after,
.lux-form .ff-btn-submit:focus-visible::after {
  transform: translateX(4px);
}

.lux-form .ff-btn-submit:active {
  transform: translateY(0) scale(0.985);
}

/* The plugin dims the button and shows its own spinner while posting. */
.lux-form .ff-form-loading .ff-btn-submit,
.lux-form .ff-btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ---- messages ---- */
.lux-form .ff-message-success {
  padding: clamp(16px, 1.8vw, 20px);
  border: 1px solid rgba(24, 120, 241, 0.24);
  border-left: 3px solid var(--lux-blue);
  border-radius: var(--lux-radius-sm);
  color: var(--lux-dark);
  background: rgba(24, 120, 241, 0.06);
  font-size: var(--lux-type-body);
  line-height: var(--lux-leading-body);
}

.lux-form .ff-errors-in-stack,
.lux-form .ff_submit_error {
  padding: 14px 16px;
  border: 1px solid rgba(217, 45, 32, 0.28);
  border-left: 3px solid #d92d20;
  border-radius: var(--lux-radius-sm);
  color: #8a1c13;
  background: rgba(217, 45, 32, 0.06);
  font-size: var(--lux-type-small);
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .lux-form .ff-btn-submit,
  .lux-form .ff-btn-submit:hover,
  .lux-form .ff-btn-submit:focus-visible,
  .lux-form .ff-btn-submit:active {
    transform: none;
  }

  .lux-form .ff-btn-submit:hover::after,
  .lux-form .ff-btn-submit:focus-visible::after {
    transform: none;
  }
}

/* ==========================================================================
   Service process — horizontal from 861px
   Same cards, turned on their side. Only the axis and the rail change.
   ========================================================================== */

/* .lux-post-content sizes every h3 at 23–30px and outranks a single class, so
   the step title has to restate its size with the content class in front of
   it. Without this the titles render at prose scale and break mid-word inside
   a card. */
.lux-post-content .lux-svc-step__title {
  font-size: var(--lux-type-body);
}

/* The prose rule lets long tokens break anywhere so URLs cannot overflow. A
   step title is not a URL — it wraps between words or not at all. */
.lux-svc-step__title {
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}

@media (min-width: 861px) {
  .lux-svc-steps {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }

  /* The rail turns with the row: it starts at this card's right edge and runs
     the width of the gap to reach the next one, still at marker height. */
  .lux-svc-step::after {
    top: calc(
      var(--lux-step-pad) + (var(--lux-step-dot) - var(--lux-step-rail)) / 2
    );
    left: 100%;
    width: var(--lux-step-gap);
    height: var(--lux-step-rail);
    background: linear-gradient(
      to right,
      rgba(24, 120, 241, 0.42),
      rgba(24, 120, 241, 0.12)
    );
  }
}

/* ==========================================================================
   Who wrote this

   A byline that reads "lukabarnovi" is a login name, and a reader deciding
   whether to trust a paragraph about advertising budgets cannot do anything
   with it. The same person card runs in three places now: beside the date at
   the top of an article, at the foot of it once the reading is done, and as
   the masthead of their own page. It is the tutor card from the course pages,
   because a lecturer and a writer are the same claim being made.
   ========================================================================== */
.lux-single-meta .lux-single-avatar {
  display: flex;
  margin: 0 !important;
}

.lux-single-meta .lux-single-avatar img {
  display: block;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  object-fit: cover;
}

.lux-single-meta .lux-single-author a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lux-author-card {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: clamp(16px, 2vw, 24px);
  align-items: start;
}

.lux-author-card__photo {
  display: block;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  /* A portrait photograph in a circle loses its top and bottom equally at the
     default 50%, and in a head-and-shoulders shot the top is the head. Pulling
     the frame up takes the crop from the shoulders instead, where there is
     nothing to lose.

     The value is a share of the overflow, not of the image: at 12% a 300x406
     portrait keeps about a dozen pixels of headroom above the hair. A very
     differently framed photograph can be re-aimed here without touching
     anything else. */
  object-position: 50% var(--lux-author-photo-y, 12%);
  background: rgba(2, 10, 28, 0.06);
}

/* Core's avatar block, which is the byline at the head of an article and the
   face beside a comment. Same photograph, same circle, so the same aim: the
   plugin now hands it an uncropped rendition, and this points it at the head
   rather than the middle of the frame. */
.wp-block-avatar__image {
  object-fit: cover;
  object-position: 50% var(--lux-author-photo-y, 12%);
}

.lux-author-card__body {
  min-width: 0;
}

.lux-author-card__eyebrow {
  margin: 0 0 6px !important;
  color: var(--lux-blue-deep);
  font-size: var(--lux-type-tiny, 13px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lux-author-card__name {
  margin: 0 !important;
  color: var(--lux-dark);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-card-title);
  font-weight: 600;
  line-height: 1.25;
}

.lux-author-card__name a {
  color: inherit;
  text-decoration: none;
}

.lux-author-card__name a:hover {
  color: var(--lux-blue-deep);
}

.lux-author-card__role {
  margin: 4px 0 0 !important;
  color: var(--lux-blue-deep);
  font-size: var(--lux-type-small);
  font-weight: 600;
}

.lux-author-card__bio {
  margin: 12px 0 0 !important;
  color: var(--lux-text);
  font-size: var(--lux-type-body);
  line-height: 1.6;
  text-wrap: pretty;
}

/* Where this person can be checked, one link per network. Each is named by
   the network rather than labelled "profile", because the name is the whole
   point: a reader looking for corroboration is looking for LinkedIn, and a
   link that will not say where it goes is the opposite of a trust signal. */
.lux-author-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(12px, 1.4vw, 16px);
}

.lux-author-card__link {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid rgba(2, 10, 28, 0.12);
  border-radius: 999px;
  color: var(--lux-blue-deep);
  font-size: var(--lux-type-small);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition:
    border-color var(--lux-transition),
    color var(--lux-transition),
    background var(--lux-transition);
}

.lux-author-card__link:hover {
  border-color: rgba(21, 104, 224, 0.4);
  color: var(--lux-dark);
  background: rgba(59, 158, 255, 0.1);
}

.lux-author-card__link:focus-visible {
  outline: 2px solid var(--lux-active);
  outline-offset: 2px;
}

/* ---- at the foot of an article ---- */

/* The biography lives on the author page, which is about the person. Here the
   card is a byline with a face on it: who wrote this, what they do, and where
   they can be checked. Four short lines against a 104px portrait sit level
   with each other rather than hanging from the top. */
.lux-author-card--foot {
  align-items: center;
  margin-top: clamp(28px, 3vw, 40px);
  padding: clamp(20px, 2.2vw, 26px);
  border: 1px solid var(--lux-line, #e4e8ee);
  border-radius: var(--lux-radius-card);
  background: rgba(2, 10, 28, 0.022);
}

/* ---- the author's own page ---- */
.lux-author-card--hero {
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  margin-top: clamp(18px, 2vw, 26px);
}

.lux-author-card--hero .lux-author-card__photo {
  width: 132px;
  height: 132px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
}

.lux-author-card--hero .lux-author-card__role {
  order: -1;
  margin: 0 0 8px !important;
  color: var(--lux-glow, #b1e4ff);
}

.lux-author-card--hero .lux-author-card__body {
  display: flex;
  flex-direction: column;
}

.lux-author-card--hero .lux-author-card__name {
  margin: 0 !important;
  color: var(--lux-white);
  font-size: clamp(30px, 3.4vw, 46px);
}

.lux-author-card--hero .lux-author-card__bio {
  max-width: 62ch;
  color: rgba(245, 245, 245, 0.82);
}

.lux-author-card--hero .lux-author-card__links {
  align-self: flex-start;
}

.lux-author-card--hero .lux-author-card__link {
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--lux-white);
}

.lux-author-card--hero .lux-author-card__link:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--lux-white);
  background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 639px) {
  /* Stacked, the portrait sits above the name rather than beside it, and a
     round photo hanging off the left edge with the text under it reads as a
     layout that lost its second column. Centred, the card is a column. */
  .lux-author-card,
  .lux-author-card--hero {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 16px;
    text-align: center;
  }

  .lux-author-card__links,
  .lux-author-card--hero .lux-author-card__links {
    align-self: center;
    justify-content: center;
  }

  .lux-author-card--hero .lux-author-card__photo {
    width: 96px;
    height: 96px;
  }
}

/* ==========================================================================
   The team

   The same person card as the tutor block and the byline, laid out as a grid.
   A studio page that shows three faces and says what each of them does is
   answering the question a client actually has, which is whether there is
   anyone here. Cards keep their shape whether the bio runs to one line or
   four, and a card whose photograph has not been added yet holds the portrait
   open rather than collapsing to a strip of text.
   ========================================================================== */
.lux-team {
  --lux-team-plate: linear-gradient(145deg, #0b2b53, #06172f);
  --lux-team-name: #f4f8ff;
  --lux-team-detail: #b7cce5;
  --lux-team-divider: rgba(97, 173, 255, 0.24);
  padding: clamp(48px, 6vw, 88px) 0;
}

.lux-team.is-style-lux-bare,
.is-style-lux-bare .lux-team {
  --lux-team-plate: var(--lux-white);
  --lux-team-name: var(--lux-dark);
  --lux-team-detail: var(--lux-text);
  --lux-team-divider: var(--lux-line, #e4e8ee);
}

.lux-team__title {
  margin: 0 !important;
  color: var(--lux-dark);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-section-title, clamp(26px, 2.6vw, 38px));
  font-weight: 600;
}

.lux-team__lead {
  max-width: 62ch;
  margin: clamp(10px, 1.2vw, 14px) 0 0 !important;
  color: var(--lux-text);
  font-size: var(--lux-type-body);
  line-height: 1.6;
  text-wrap: pretty;
}

/* ---- how many across, and whether it scrolls ----
   Same two settings the post card grids have, expressed once instead of once
   per column count: the count is a custom property, so the carousel's track
   width is one calc rather than four near-identical rules. The editor writes
   lux-team-columns-N and lux-team-carousel-{desktop,mobile}-{on,off} onto the
   block, which is the naming the rest of the site already uses.

   The setters are wrapped in :where() so they carry no specificity, which lets
   the narrow-screen counts below simply override them by coming later. */
.lux-team__list {
  --lux-team-cols: 3;
  --lux-team-gap: clamp(16px, 1.8vw, 22px);
  display: grid !important;
  grid-template-columns: repeat(var(--lux-team-cols), minmax(0, 1fr));
  gap: var(--lux-team-gap) !important;
  margin-top: clamp(26px, 3vw, 40px) !important;
}

:where(.lux-team-columns-2) .lux-team__list {
  --lux-team-cols: 2;
}

:where(.lux-team-columns-3) .lux-team__list {
  --lux-team-cols: 3;
}

:where(.lux-team-columns-4) .lux-team__list {
  --lux-team-cols: 4;
}

/* Four portraits do not fit a tablet and none of them fit a phone, whatever
   the setting says, so the narrow widths decide for themselves. */
@media (max-width: 1023px) {
  .lux-team__list {
    --lux-team-cols: 2;
  }
}

@media (max-width: 639px) {
  .lux-team__list {
    --lux-team-cols: 1;
  }
}

/* Carousel. Turned on, the row stops wrapping and scrolls sideways; turned
   off, a fifth card simply starts a second row, so six cards read 3 + 3 and
   eight read 4 + 4. The padding is what keeps the card shadow from being
   clipped by the scroll container. */
.lux-team-carousel-desktop-on .lux-team__list,
.lux-team-carousel-mobile-on .lux-team__list {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc(
    (100% - (var(--lux-team-gap) * (var(--lux-team-cols) - 1))) /
      var(--lux-team-cols)
  );
  padding: 4px 2px 20px !important;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-padding-inline: 2px;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  cursor: grab;
}

.lux-team-carousel-desktop-on .lux-team__list::-webkit-scrollbar,
.lux-team-carousel-mobile-on .lux-team__list::-webkit-scrollbar {
  display: none;
}

.lux-team-carousel-desktop-on .lux-team__member,
.lux-team-carousel-mobile-on .lux-team__member {
  scroll-snap-align: start;
}

/* Each toggle only governs its own breakpoint. */
@media (max-width: 767px) {
  .lux-team-carousel-desktop-on:not(.lux-team-carousel-mobile-on)
    .lux-team__list {
    grid-template-columns: repeat(var(--lux-team-cols), minmax(0, 1fr));
    grid-auto-flow: row;
    padding: 0 !important;
    overflow: visible;
    scroll-snap-type: none;
    cursor: default;
  }

  /* A mobile page holds a complete pair of portraits. */
  .lux-team-carousel-mobile-on .lux-team__list {
    --lux-team-cols: 2;
    --lux-team-gap: 12px;
  }

  .lux-team-carousel-mobile-on .lux-team__member { scroll-snap-align: none; }
  .lux-team-carousel-mobile-on .lux-team__member:nth-child(odd) { scroll-snap-align: start; }
  .lux-team-carousel-mobile-on .lux-team__list:has(> .lux-team__member:last-child:nth-child(odd))::after { content: ""; }

  .lux-team-carousel-mobile-on .lux-team__body {
    padding: 12px 11px 14px;
  }

  .lux-team-carousel-mobile-on .lux-team__body .lux-team__name {
    font-size: 14px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .lux-team-carousel-mobile-on .lux-team__body .lux-team__role {
    margin-top: 8px !important;
    padding-top: 8px;
    font-size: 11px;
    line-height: 1.5;
  }
}

.lux-team .lux-post-carousel__controls {
  box-sizing: border-box;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  width: min(calc(100% - 40px), 420px);
  margin: 8px auto 0;
  padding: 10px;
  gap: 12px;
  border: 1px solid var(--lux-team-divider);
  border-radius: 999px;
  background: var(--lux-team-plate);
}

.lux-team .lux-post-carousel__button {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 10px;
  border: 1px solid var(--lux-team-divider);
  border-radius: 50%;
  color: var(--lux-team-name);
  background: transparent;
  box-shadow: none;
}

.lux-team .lux-post-carousel__status {
  grid-template-columns: auto minmax(24px, 1fr);
  gap: 12px;
}

.lux-team .lux-post-carousel__counter {
  min-width: 0;
  color: var(--lux-team-name);
  font-size: 12px;
  white-space: nowrap;
}

.lux-team .lux-post-carousel__progress {
  height: 3px;
  background: var(--lux-team-divider);
}

@media (min-width: 768px) {
  .lux-team-carousel-mobile-on:not(.lux-team-carousel-desktop-on)
    .lux-team__list {
    grid-template-columns: repeat(var(--lux-team-cols), minmax(0, 1fr));
    grid-auto-flow: row;
    padding: 0 !important;
    overflow: visible;
    scroll-snap-type: none;
    cursor: default;
  }

  .lux-team-carousel-desktop-off .lux-post-carousel__controls {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .lux-team-carousel-mobile-off .lux-post-carousel__controls {
    display: none !important;
  }
}

.lux-team__list.is-dragging {
  scroll-behavior: auto;
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

/* The photograph is the card. A small round avatar beside a name reads as a
   directory entry; a portrait at full width reads as a person you are being
   introduced to. The navy name plate continues the portrait's studio backdrop;
   the bare surface switches its shared palette back to light. */
.lux-team__member {
  position: relative;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--lux-radius-card);
  background: conic-gradient(from var(--lux-team-edge-angle), #168cff 0deg, #168cff 220deg, #8edcff 265deg, #168cff 310deg) border-box;
  animation: lux-team-edge-orbit 7s linear infinite;
  animation-play-state: paused;
  box-shadow: 0 12px 30px rgba(2, 10, 28, 0.18);
  transition:
    transform var(--lux-transition),
    box-shadow var(--lux-transition);
}

@property --lux-team-edge-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes lux-team-edge-orbit {
  to { --lux-team-edge-angle: 360deg; }
}

.lux-team__member::after {
  content: none;
}

.lux-team__member:hover,
.lux-team__member:focus-within {
  animation-play-state: running;
  transform: translateY(-6px);
  box-shadow: 0 20px 42px rgba(2, 10, 28, 0.28), 0 0 22px rgba(22, 140, 255, 0.16);
}

.lux-team__member:hover::after,
.lux-team__member:focus-within::after {
  filter: brightness(1.2);
}

@media (prefers-reduced-motion: reduce) {
  .lux-team__member,
  .lux-team__member::after {
    transition: none;
    animation: none;
  }

  .lux-team__member:hover,
  .lux-team__member:focus-within {
    transform: none;
  }
}

@media (hover: none), (max-width: 767px) {
  .lux-team__member {
    animation: none;
    transition: none;
    background: #168cff;
    box-shadow: 0 4px 12px rgba(2, 10, 28, .12);
    contain: paint;
  }
  .lux-team__member:hover,
  .lux-team__member:focus-within { transform: none; }
}

.lux-team__photo {
  position: relative;
  overflow: hidden;
  margin: 0 !important;
}

.lux-team__photo::after {
  position: absolute;
  inset: 65% 0 0;
  background: linear-gradient(transparent, rgba(6, 23, 47, 0.32));
  pointer-events: none;
  content: "";
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lux-team__photo img { transition: transform 700ms cubic-bezier(.2,.65,.3,1); }
  .lux-team__member:is(:hover, :focus-within) .lux-team__photo img { transform: scale(1.035); }
}

.lux-team__member:nth-child(3n + 2) { animation-delay: -2.3s; }
.lux-team__member:nth-child(3n) { animation-delay: -4.6s; }

/* A fixed ratio is what keeps a row of cards level when the photographs come
   from four different phones on four different days. */
.lux-team__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
  background: rgba(2, 10, 28, 0.05);
}

/* An image block with nothing in it still leaves its figure behind. */
body:not(.editor-styles-wrapper)
  .lux-team__member:not(:has(.lux-team__photo img[src]))
  .lux-team__photo {
  display: none;
}

/* Collapsing that card was the wrong call: a row where one card is a full
   portrait and the next three are 100px strips of text reads as broken markup
   rather than as work still to do. The empty card holds the portrait open
   instead, filled with the tint a photograph loads against and a head and
   shoulders drawn on it, so the slot is legible as a slot. Setting a
   photograph in the editor replaces it. */
body:not(.editor-styles-wrapper)
  .lux-team__member:not(:has(.lux-team__photo img[src]))::before {
  width: 100%;
  aspect-ratio: 4 / 5;
  background-color: rgba(2, 10, 28, 0.05);
  background-image:
    radial-gradient(
      circle at 50% 38%,
      rgba(2, 10, 28, 0.13) 0 20%,
      transparent 20%
    ),
    radial-gradient(
      circle at 50% 112%,
      rgba(2, 10, 28, 0.13) 0 40%,
      transparent 40%
    );
  content: "";
}

.lux-team__body {
  position: relative;
  flex: 1;
  background: var(--lux-team-plate);
  border-top: 1px solid var(--lux-team-divider);
  padding: clamp(18px, 1.6vw, 22px) clamp(20px, 2vw, 24px)
    clamp(20px, 1.8vw, 24px);
}

.lux-team__body .lux-team__name {
  margin: 0 !important;
  color: var(--lux-team-name);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-person-name);
  font-weight: 500;
  line-height: 1.4;
  text-wrap: pretty;
}

.lux-team__body .lux-team__role {
  margin: 12px 0 0 !important;
  padding-top: 10px;
  border-top: 1px solid var(--lux-team-divider);
  color: var(--lux-team-detail);
  font-size: var(--lux-type-small);
  font-weight: 400;
  line-height: 1.6;
  text-wrap: pretty;
}

.lux-team__bio {
  margin: clamp(10px, 1.2vw, 14px) 0 0 !important;
  color: var(--lux-text);
  font-size: var(--lux-type-small);
  line-height: 1.6;
  text-wrap: pretty;
}

body:not(.editor-styles-wrapper)
  :is(.lux-team__role, .lux-team__bio, .lux-team__lead):empty {
  display: none;
}

/* In the editor the slot has to be visible and droppable even before a
   photograph exists, or there is nothing to click. */
.editor-styles-wrapper .lux-team__photo img:not([src]) {
  display: block;
  width: 100%;
  min-height: 220px;
  background: rgba(2, 10, 28, 0.06);
}

/* The opening paragraph of the About page. It is the one place on the site
   where a single block of prose has to do the whole job, so it is set larger
   than body copy and stopped well short of the full column width. */
.lux-about__lead {
  max-width: 68ch;
  margin: 0 !important;
  color: var(--lux-dark);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.6;
  text-wrap: pretty;
}

/* The category page reuses the work archive, so its title and the term's own
   description take the archive's type. An empty description closes up. */
.lux-work-archive .lux-blog-lead:empty,
.lux-work-archive .wp-block-term-description:empty {
  display: none;
}

/* ---- the category row above the work grid ----
   Pills, because the choice is small and mutually exclusive and a select box
   would hide the options a visitor is meant to browse. They sit on the page
   surface between the dark panel and the cards, and on a narrow screen the
   row scrolls sideways rather than stacking into a block of its own. */
.lux-work-filter {
  display: flex;
  gap: 8px;
  width: min(calc(100% - 40px), var(--lux-content));
  margin: clamp(30px, 3.4vw, 48px) auto 0;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.lux-work-filter::-webkit-scrollbar {
  display: none;
}

/* The grid follows the row, so it gives up the top margin it would have had
   as the first thing under the panel. */
.lux-work-filter + .lux-post-cards {
  margin-top: clamp(18px, 2vw, 26px) !important;
}

.lux-work-filter__item {
  flex: 0 0 auto;
  padding: 9px 16px;
  border: 1px solid rgba(2, 10, 28, 0.12);
  border-radius: 999px;
  color: var(--lux-text);
  background: var(--lux-white);
  font-size: var(--lux-type-small);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition:
    border-color var(--lux-transition),
    color var(--lux-transition),
    background var(--lux-transition);
}

.lux-work-filter__item:hover {
  border-color: rgba(21, 104, 224, 0.45);
  color: var(--lux-blue-deep);
}

.lux-work-filter__item.is-active {
  border-color: var(--lux-dark);
  color: var(--lux-white);
  background: var(--lux-dark);
}

.lux-work-filter__item:focus-visible {
  outline: 2px solid var(--lux-active);
  outline-offset: 2px;
}

/* ---- stats on a light surface ----
   The tiles above are built for the dark hero: white translucent edges and
   white gradient numerals. Dropped into article content, a case study's
   results row or the About page, every one of those colours lands on white
   and the block reads as empty space. Same tile, inverted for paper. */
:is(.lux-post-content, .lux-reference-section:not(.is-style-lux-denim))
  .lux-stat {
  border-color: rgba(2, 10, 28, 0.1);
  background: linear-gradient(160deg, rgba(2, 10, 28, 0.04), rgba(2, 10, 28, 0.015));
}

:is(.lux-post-content, .lux-reference-section:not(.is-style-lux-denim))
  .lux-stat:hover {
  border-color: rgba(21, 104, 224, 0.32);
}

:is(.lux-post-content, .lux-reference-section:not(.is-style-lux-denim))
  .lux-stat__value {
  background: linear-gradient(180deg, var(--lux-blue-deep), var(--lux-dark));
  -webkit-background-clip: text;
  background-clip: text;
}

:is(.lux-post-content, .lux-reference-section:not(.is-style-lux-denim))
  .lux-stat__label {
  color: var(--lux-text);
}

/* ---- and back to white where the ground is dark ----
   Post content is not one colour. It holds the service hero, the case study's
   results band and any denim section an editor drops in, and each of those
   paints its own dark ground: the hero and the band with a pseudo-element
   behind the section, so no ancestor in the tree carries a dark background for
   a selector to test. Every dark context is listed here, in one place, because
   patching them one at a time is how the hero ended up with navy numerals on
   navy. Add to this list, not next to it. */
:is(
    .lux-svc-hero,
    .lux-panel-dark,
    .is-style-lux-denim,
    .lux-case-content > .lux-svc-section:not(.is-style-lux-bare, .is-style-lux-soft):has(> .lux-stats)
  )
  .lux-stat {
  border-color: var(--lux-stat-line, rgba(255, 255, 255, 0.13));
  background: var(--lux-stat-surface, linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)));
}

:is(
    .lux-svc-hero,
    .lux-panel-dark,
    .is-style-lux-denim,
    .lux-case-content > .lux-svc-section:not(.is-style-lux-bare, .is-style-lux-soft):has(> .lux-stats)
  )
  .lux-stat:hover {
  border-color: var(--lux-stat-hover-line, rgba(126, 195, 255, 0.34));
}

:is(
    .lux-svc-hero,
    .lux-panel-dark,
    .is-style-lux-denim,
    .lux-case-content > .lux-svc-section:not(.is-style-lux-bare, .is-style-lux-soft):has(> .lux-stats)
  )
  .lux-stat__value {
  background: var(--lux-stat-value-surface, linear-gradient(180deg, var(--lux-white), #9fd4ff));
  -webkit-background-clip: text;
  background-clip: text;
}

:is(
    .lux-svc-hero,
    .lux-panel-dark,
    .is-style-lux-denim,
    .lux-case-content > .lux-svc-section:not(.is-style-lux-bare, .is-style-lux-soft):has(> .lux-stats)
  )
  .lux-stat__label {
  color: var(--lux-stat-label-copy, rgba(255, 255, 255, 0.68));
}



/* ---- ჩვენს შესახებ ----
   The page is built from lux-reference-section like every other full-width
   page here, so it needs almost nothing of its own: a measure for the centred
   intros, and the founder identified under the opening title. */
.lux-about-intro__text,
.lux-about-prose__text {
  width: min(calc(100% - 40px), 68ch);
  margin-inline: auto !important;
  font-size: var(--lux-type-lead);
  line-height: var(--lux-leading-lead);
  text-wrap: pretty;
}

.lux-about-prose__text {
  color: var(--lux-text);
}

.lux-about-prose__text + .lux-about-prose__text {
  margin-top: clamp(14px, 1.6vw, 20px) !important;
}

/* Who runs the studio, directly under the claim it belongs to. Centred with
   the rest of the section rather than pushed into a corner. */
.lux-author-card--founder {
  grid-template-columns: auto auto;
  justify-content: center;
  gap: 16px;
  align-items: center;
  width: fit-content;
  margin: clamp(28px, 3.2vw, 44px) auto 0;
  padding: clamp(14px, 1.6vw, 18px) clamp(20px, 2.2vw, 26px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--lux-radius-card);
  background: rgba(255, 255, 255, 0.05);
  text-align: left;
}

.lux-author-card--founder .lux-author-card__photo {
  width: 60px;
  height: 60px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
}

.lux-author-card--founder .lux-author-card__eyebrow {
  margin: 0 0 3px !important;
  color: rgba(245, 245, 245, 0.55);
  letter-spacing: 0.06em;
}

.lux-author-card--founder .lux-author-card__name {
  color: var(--lux-white);
  font-size: clamp(16px, 1.3vw, 19px);
}

.lux-author-card--founder .lux-author-card__role {
  margin: 2px 0 0 !important;
  color: var(--lux-glow);
}

/* The team block was written as a section of its own; inside one it gives up
   its own padding and heading, which the section already provides. */
.lux-about-team .lux-team {
  padding: 0;
}

.lux-about-team .lux-team__title {
  display: none;
}

.lux-about-team .lux-team__lead {
  width: min(calc(100% - 40px), 68ch);
  margin: 0 auto !important;
  font-size: var(--lux-type-lead);
  line-height: var(--lux-leading-lead);
  text-align: center;
}

.lux-about-team .lux-team__list,
.lux-about-fields .lux-kit,
.lux-about-numbers .lux-stats {
  width: min(
    calc(100% - var(--lux-page-gutter) - var(--lux-page-gutter)),
    var(--lux-content)
  );
  margin-inline: auto !important;
}

@media (min-width: 860px) {
  .lux-about-numbers .lux-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---- მისია და ხედვა ----
   Two statements set crosswise: the word sits on one side and its text on the
   other, then the second row swaps them. The alternation is the layout's whole
   idea, so nothing else in the band is decorated.

   The words are set in Dino, which is the face this site keeps for its largest
   claims (the homepage headline, the service hero, the 404). One short word is
   the only thing that can carry that size without becoming a wall, which is
   why the commitments beside it stay at reading size. */
.lux-cross {
  width: min(
    calc(100% - var(--lux-page-gutter) - var(--lux-page-gutter)),
    var(--lux-content)
  );
  margin-inline: auto !important;
}

/* The social rail is fixed at the left edge, 52px wide, and centred in the
   viewport, which is exactly where a vertically centred title lands. Every
   other section here centres its heading and never reaches that far left, so
   this is the one block that has to make room. Both sides are inset so the
   composition stays balanced rather than nudged sideways. */
@media (min-width: 900px) {
  .lux-cross {
    width: min(calc(100% - 140px), var(--lux-content));
  }
}

.lux-cross + .lux-cross {
  margin-top: clamp(48px, 6vw, 96px) !important;
  padding-top: clamp(44px, 5.4vw, 88px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.lux-cross__row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}

@media (min-width: 900px) {
  .lux-cross__row {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(36px, 4.5vw, 80px);
  }

  /* The crossing. The word moves to the right and the text takes the left,
     so the two rows read as a mirrored pair rather than a stack. */
  .lux-cross--flip .lux-cross__row {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }

  /* order goes on the grid children, which are the wrappers, not the
     heading inside one of them. */
  .lux-cross--flip .lux-cross__title-wrap {
    order: 2;
  }

  .lux-cross--flip .lux-cross__body {
    order: 1;
  }
}

.lux-cross__title {
  margin: 0 !important;
  overflow-wrap: anywhere;
  color: var(--lux-white);
  font-family: var(--lux-font-display);
  font-size: clamp(54px, 9.5vw, 148px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.01em;
}

@media (min-width: 900px) {
  .lux-cross--flip .lux-cross__title {
    text-align: right;
  }
}

/* The eyebrow names whose mission it is, so the word itself does not have to
   carry "ლუქს ვების" in front of it at 148px. */
.lux-cross__eyebrow {
  margin: 0 0 clamp(10px, 1.2vw, 16px) !important;
  color: var(--lux-white);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
}

@media (min-width: 900px) {
  .lux-cross--flip .lux-cross__eyebrow {
    text-align: right;
  }
}

.lux-mission__list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 2.6vw, 32px);
  margin: 0 !important;
}

@media (min-width: 1180px) {
  .lux-mission__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(28px, 3vw, 44px);
  }
}

/* The short blue rule above each commitment is the mark that sits under every
   section heading on this site, at a quarter of the width. */
.lux-mission__item {
  margin: 0 !important;
  padding-top: clamp(14px, 1.6vw, 20px);
  color: rgba(245, 245, 245, 0.82);
  font-size: var(--lux-type-body);
  line-height: 1.65;
  text-wrap: pretty;
}

.lux-mission__item::before {
  display: block;
  width: 28px;
  height: 3px;
  margin-bottom: clamp(10px, 1.2vw, 14px);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lux-blue-deep), var(--lux-active), var(--lux-glow));
  content: "";
}

.lux-vision__text {
  margin: 0 !important;
  color: rgba(245, 245, 245, 0.88);
  font-size: var(--lux-type-lead);
  line-height: 1.6;
  text-wrap: pretty;
}

/* The one piece of motion here, and it costs no JavaScript: where the browser
   can drive an animation from scroll position it does, and where it cannot the
   words are simply there, which is the state that matters. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lux-cross__title {
      animation: lux-cross-rise linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 30%;
    }
  }
}

@keyframes lux-cross-rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lux-cross__title-wrap {
  container-type: inline-size;
}

/* Measured, not guessed: Dino runs about 0.74em per Georgian character, so a
   five letter word needs roughly a quarter of its column per 100px of type.
   Capping the size against the column keeps the word inside it however it is
   edited, and the break is the last resort for one longer than these.

   The cap is set by the translations, not by the Georgian. Weglot swaps
   "მისია" for "Mission", and the Latin word measures about 4.06em in this
   face against 3.7em for the Georgian one, so a quarter of the column left
   it a letter too wide and the break dropped the "n" onto its own line.
   23cqw fits the longer word with room to spare and keeps every language on
   one line. */
@media (min-width: 900px) {
  .lux-cross__title {
    font-size: min(clamp(54px, 9.5vw, 148px), 23cqw);
  }
}

/* ---- ღირებულებები, on paper ----
   The values moved out of the dark band and onto the page's own surface, which
   is what puts a visible seam between them and the mission above. Dino is used
   white on dark everywhere else on this site; here it is the one place it runs
   dark, because the section it belongs to is light.

   The list itself is the FAQ accordion, unchanged: the site already had a light
   expandable list with a blue open edge, so this is that component in a new
   place rather than a second one. */
/* ---- ღირებულებები ----
   Three cards, not six. Six values sit in two rows where nothing stands out
   and a reader remembers none of them; three fit one row and each one gets
   room to be read.

   The grid and the short paragraph are borrowed structure. Everything that
   makes them look like anything is this site's: the paper card at the 5px
   radius the rest of the theme uses, the hairline border, and the short blue
   gradient rule that already sits under every section heading here, repeated
   above each card at a quarter of the width. No hover lift, because a card
   that cannot be clicked should not pretend otherwise. */
.lux-values__intro {
  width: min(calc(100% - 40px), 62ch);
  margin: 0 auto clamp(30px, 3.6vw, 46px) !important;
  color: var(--lux-text);
  font-size: var(--lux-type-lead);
  line-height: var(--lux-leading-lead);
  text-wrap: pretty;
}

.lux-value-cards {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 1.8vw, 22px);
  width: min(
    calc(100% - var(--lux-page-gutter) - var(--lux-page-gutter)),
    var(--lux-content)
  );
  margin-inline: auto !important;
}

/* One column until there is room for all three side by side. Two cards plus a
   stray third is the arrangement a tablet would otherwise get, and it reads as
   a mistake rather than a layout. */
@media (min-width: 1024px) {
  .lux-value-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.lux-value-card {
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--lux-line, #e4e8ee);
  border-radius: var(--lux-radius-card);
  background: var(--lux-white);
  box-shadow: 0 4px 24px rgba(2, 10, 28, 0.06);
}

.lux-value-card::before {
  display: block;
  width: 28px;
  height: 3px;
  margin-bottom: clamp(14px, 1.6vw, 20px);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lux-blue-deep), var(--lux-active), var(--lux-glow));
  content: "";
}

.lux-value-card__title {
  margin: 0 !important;
  color: var(--lux-dark);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-card-title);
  line-height: 1.25;
}

/* Regular Latin in mixed card titles; outrank the article heading weight. */
.lux-value-card .lux-value-card__title {
  font-weight: 400;
}

.lux-value-card__text {
  margin: clamp(10px, 1.2vw, 14px) 0 0 !important;
  color: var(--lux-text);
  font-size: var(--lux-type-small);
  line-height: 1.65;
  text-wrap: pretty;
}

/* ---- value cards with an icon ----
   The value card as a feature tile: a raised gradient icon where the plain
   card has its short rule, a blue hairline, and a response to the pointer.
   The glyph is the --lux-service-icon a .lux-icon-* class sets, so a card
   picks its picture with one class in the editor, Advanced > Additional CSS
   class > lux-value-card lux-value-card--icon lux-icon-photo, from the same
   set the service cards use.

   The plain value card does not lift, since it is not a link. This one moves
   because it was asked to feel alive, not to say it can be clicked: the lift
   is small, and nothing about it changes the cursor. */
.lux-svc-section > .lux-value-cards:has(> .lux-value-card--icon) {
  /* The section already sits inside the page gutter; the grid's own gutter
     took it off a second time, which left these cards narrower than every
     other grid on the page. */
  width: min(1440px, 100%);
}

.lux-value-card--icon {
  --lux-card-pad: clamp(24px, 2.4vw, 34px);
  --lux-card-tile: 52px;
  position: relative;
  padding: var(--lux-card-pad);
  border: 1px solid rgba(21, 104, 224, 0.14);
  /* The top edge line is a background layer that grows from nothing, so the
     card needs no extra element for it. */
  background:
    linear-gradient(90deg, var(--lux-blue-deep), var(--lux-active), var(--lux-glow)) top left / 0 3px no-repeat,
    var(--lux-white);
  box-shadow: 0 6px 28px rgba(2, 10, 28, 0.07);
  transition:
    transform 320ms var(--lux-motion-out),
    box-shadow 320ms ease,
    border-color 320ms ease,
    background-size 420ms var(--lux-motion-out);
}

/* The tile: a gradient square lifted off the card by its own glow, with a
   faint halo so it reads as a separate object rather than a blue patch. */
.lux-value-card--icon::before {
  width: var(--lux-card-tile);
  height: var(--lux-card-tile);
  margin-bottom: clamp(18px, 2vw, 24px);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--lux-blue-deep), var(--lux-active));
  box-shadow:
    0 0 0 6px rgba(21, 104, 224, 0.08),
    0 12px 24px -10px rgba(21, 104, 224, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition:
    transform 320ms var(--lux-motion-out),
    box-shadow 320ms ease;
}

.lux-value-card--icon::after {
  position: absolute;
  top: calc(var(--lux-card-pad) + var(--lux-card-tile) / 4);
  left: calc(var(--lux-card-pad) + var(--lux-card-tile) / 4);
  width: calc(var(--lux-card-tile) / 2);
  height: calc(var(--lux-card-tile) / 2);
  background: var(--lux-white);
  content: "";
  -webkit-mask: var(--lux-service-icon) no-repeat center / contain;
  mask: var(--lux-service-icon) no-repeat center / contain;
  transition: transform 320ms var(--lux-motion-out);
}

.lux-value-card--icon:hover {
  border-color: rgba(21, 104, 224, 0.38);
  background-size: 100% 3px, auto;
  box-shadow: 0 20px 44px -14px rgba(21, 104, 224, 0.34);
  transform: translateY(-6px);
}

/* Tile and glyph turn together: both are centred on the same point, so the
   same transform about their own centres keeps the glyph inside its tile. */
.lux-value-card--icon:hover::before,
.lux-value-card--icon:hover::after {
  transform: scale(1.07) rotate(-5deg);
}

.lux-value-card--icon:hover::before {
  box-shadow:
    0 0 0 8px rgba(21, 104, 224, 0.1),
    0 16px 30px -10px rgba(21, 104, 224, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  .lux-value-card--icon,
  .lux-value-card--icon::before,
  .lux-value-card--icon::after {
    transition: none;
  }

  .lux-value-card--icon:hover,
  .lux-value-card--icon:hover::before,
  .lux-value-card--icon:hover::after {
    transform: none;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .lux-value-cards:has(> .lux-value-card--icon) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The glyphs these cards brought with them; each is a --lux-service-icon like
   the ones above, so a service card can use them too. */
.lux-icon-event {
  --lux-service-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3Cpath d='M12 12.4l1.05 2.1 2.3.34-1.66 1.62.39 2.29L12 17.66l-2.08 1.09.39-2.29-1.66-1.62 2.3-.34z'/%3E%3C/svg%3E");
}

.lux-icon-portrait {
  --lux-service-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='12' cy='10' r='3.2'/%3E%3Cpath d='M6.5 19c1-2.9 3.1-4.4 5.5-4.4s4.5 1.5 5.5 4.4'/%3E%3C/svg%3E");
}

.lux-icon-business {
  --lux-service-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2.5'/%3E%3Cpath d='M9 7V5.5A1.5 1.5 0 0 1 10.5 4h3A1.5 1.5 0 0 1 15 5.5V7M3 12.5h18'/%3E%3C/svg%3E");
}

.lux-icon-film {
  --lux-service-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='9' width='18' height='11' rx='2'/%3E%3Cpath d='M3.4 9L4.9 4.5h15.4L19 9M8.8 4.5L7.4 9M14.3 4.5L12.9 9'/%3E%3C/svg%3E");
}

.lux-icon-edit {
  --lux-service-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M8.6 7.6L20 18M8.6 16.4L20 6'/%3E%3C/svg%3E");
}

.lux-icon-drone {
  --lux-service-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6.6' r='2.4'/%3E%3Ccircle cx='18' cy='6.6' r='2.4'/%3E%3Crect x='9.2' y='10.4' width='5.6' height='5.6' rx='1.6'/%3E%3Cpath d='M7.7 8.3l1.9 2.1M16.3 8.3l-1.9 2.1M9.6 16l-2.4 2.9M14.4 16l2.4 2.9'/%3E%3C/svg%3E");
}

.lux-icon-gimbal {
  --lux-service-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='10' height='6.5' rx='1.6'/%3E%3Ccircle cx='17.5' cy='7.2' r='1.6'/%3E%3Cpath d='M17.5 8.8v4.4a2 2 0 0 1-2 2H12M12 15.2V21M9.5 21h5'/%3E%3C/svg%3E");
}

.lux-icon-mic {
  --lux-service-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21M8.5 21h7'/%3E%3C/svg%3E");
}

.lux-icon-light {
  --lux-service-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h14l-2.2 7.5H7.2z'/%3E%3Cpath d='M12 11.5V21M8.5 21h7M9.5 15.5h5'/%3E%3C/svg%3E");
}

.lux-icon-color {
  --lux-service-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h9.5M18.5 7H20M4 17h3.5M12.5 17H20'/%3E%3Ccircle cx='16' cy='7' r='2.5'/%3E%3Ccircle cx='10' cy='17' r='2.5'/%3E%3C/svg%3E");
}

/* ---- the trail on a page that opens dark ----
   Templates with a masthead put the breadcrumb inside it. The no-title
   template has none, so the trail sits in a strip of its own, and when the
   first section is denim that strip shows as a pale band between the dark
   header and the dark section.

   Painting the strip only swapped one seam for another: the strip took
   --lux-dark while the section is denim, a different colour with a texture
   over it, so the two darks met in a visible line. The trail floats over the
   section instead, which is what this theme already does on the blank service
   template. One ground, no seam, and no second copy of the denim treatment to
   keep in step with the first. */
.lux-crumb-strip:has(
    + .wp-block-post-content > .lux-reference-section.is-style-lux-denim:first-child
  ) {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 5;
  margin-top: 20px !important;
}

/* The section opens enough room at the top for the trail now sitting over it. */
.lux-crumb-strip:has(
    + .wp-block-post-content > .lux-reference-section.is-style-lux-denim:first-child
  )
  + .wp-block-post-content
  > .lux-reference-section:first-child {
  padding-top: calc(var(--lux-section-space-y) + 44px);
}

/* ==========================================================================
   Testimonials (patterns/testimonials.php)

   People who put their name to a sentence about the agency. It belongs between
   the work and the questions: proof reads best after what we made and before
   what the visitor is about to ask.

   The row is the team carousel's mechanism under the team's own vocabulary,
   lux-testimonials-columns-N and lux-testimonials-carousel-{desktop,mobile}-
   {on,off}, because a second scrolling row of cards does not need a second
   engine. Only what a card holds is different: a sentence, not a portrait.
   ========================================================================== */
.lux-testimonials {
  --lux-testimonial-copy: #34465e;
  --lux-testimonial-name: #0a1f3c;
  --lux-testimonial-surface: #fff;
  --lux-testimonial-surface-hover: #f8fbff;
  --lux-testimonial-line: rgba(24, 120, 241, 0.18);
  --lux-testimonial-line-hover: rgba(24, 120, 241, 0.4);
  --lux-testimonial-control: #145ba8;
  --lux-testimonial-disabled: #73849a;
  --lux-testimonial-counter: #415772;
}

.lux-testimonials.is-style-lux-denim {
  --lux-testimonial-copy: rgba(245, 245, 245, 0.88);
  --lux-testimonial-name: var(--lux-white);
  --lux-testimonial-surface: rgba(255, 255, 255, 0.05);
  --lux-testimonial-surface-hover: rgba(255, 255, 255, 0.075);
  --lux-testimonial-line: rgba(126, 195, 255, 0.16);
  --lux-testimonial-line-hover: rgba(126, 195, 255, 0.34);
  --lux-testimonial-control: rgba(245, 245, 245, 0.9);
  --lux-testimonial-disabled: rgba(245, 245, 245, 0.32);
  --lux-testimonial-counter: rgba(245, 245, 245, 0.82);
}

.lux-testimonials__track {
  --lux-testimonials-cols: 3;
  --lux-testimonials-gap: clamp(16px, 1.8vw, 24px);
  display: grid !important;
  grid-template-columns: repeat(var(--lux-testimonials-cols), minmax(0, 1fr));
  align-items: stretch;
  gap: var(--lux-testimonials-gap) !important;
  /* Width comes from the shared gutter system below, so the cards start under
     the first letter of the section title. */
  margin-top: clamp(26px, 3vw, 40px) !important;
}

:where(.lux-testimonials-columns-2) .lux-testimonials__track {
  --lux-testimonials-cols: 2;
}

:where(.lux-testimonials-columns-3) .lux-testimonials__track {
  --lux-testimonials-cols: 3;
}

:where(.lux-testimonials-columns-4) .lux-testimonials__track {
  --lux-testimonials-cols: 4;
}

@media (max-width: 1023px) {
  .lux-testimonials__track {
    --lux-testimonials-cols: 2;
  }
}

@media (max-width: 639px) {
  .lux-testimonials__track {
    --lux-testimonials-cols: 1;
  }
}

.lux-testimonials-carousel-desktop-on .lux-testimonials__track,
.lux-testimonials-carousel-mobile-on .lux-testimonials__track {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc(
    (100% - (var(--lux-testimonials-gap) * (var(--lux-testimonials-cols) - 1))) /
      var(--lux-testimonials-cols)
  );
  padding: 4px 2px 20px !important;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-padding-inline: 2px;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  cursor: grab;
}

.lux-testimonials-carousel-desktop-on .lux-testimonials__track::-webkit-scrollbar,
.lux-testimonials-carousel-mobile-on .lux-testimonials__track::-webkit-scrollbar {
  display: none;
}

.lux-testimonials-carousel-desktop-on .lux-testimonial,
.lux-testimonials-carousel-mobile-on .lux-testimonial {
  scroll-snap-align: start;
}

@media (max-width: 767px) {
  .lux-testimonials-carousel-desktop-on:not(.lux-testimonials-carousel-mobile-on)
    .lux-testimonials__track {
    grid-template-columns: repeat(var(--lux-testimonials-cols), minmax(0, 1fr));
    grid-auto-flow: row;
    padding: 0 !important;
    overflow: visible;
    scroll-snap-type: none;
    cursor: default;
  }

  /* The next card peeks, which is what tells a thumb there is one. */
  .lux-testimonials-carousel-mobile-on .lux-testimonials__track {
    --lux-testimonials-cols: 1.12;
  }
}

@media (min-width: 768px) {
  .lux-testimonials-carousel-mobile-on:not(.lux-testimonials-carousel-desktop-on)
    .lux-testimonials__track {
    grid-template-columns: repeat(var(--lux-testimonials-cols), minmax(0, 1fr));
    grid-auto-flow: row;
    padding: 0 !important;
    overflow: visible;
    scroll-snap-type: none;
    cursor: default;
  }

  .lux-testimonials-carousel-desktop-off .lux-post-carousel__controls {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .lux-testimonials-carousel-mobile-off .lux-post-carousel__controls {
    display: none !important;
  }
}

.lux-testimonials__track.is-dragging {
  scroll-behavior: auto;
  scroll-snap-type: none;
  cursor: grabbing;
}

/* ---- the card ----
   Equal height by default, so three sentences of different lengths still line
   their faces up along one row. */
.lux-testimonial {
  display: flex;
  height: 100%;
  padding: clamp(22px, 2.2vw, 30px);
  flex-direction: column;
  border: 1px solid var(--lux-testimonial-line);
  border-radius: var(--lux-radius-card);
  background: var(--lux-testimonial-surface);
  transition:
    border-color var(--lux-transition),
    background var(--lux-transition),
    transform var(--lux-transition);
}

.lux-testimonial:hover {
  border-color: var(--lux-testimonial-line-hover);
  background: var(--lux-testimonial-surface-hover);
  transform: translateY(-3px);
}

.lux-testimonial__text {
  margin: 0 0 clamp(26px, 2.8vw, 34px) !important;
  color: var(--lux-testimonial-copy);
  font-size: var(--lux-type-body);
  line-height: 1.75;
  text-wrap: pretty;
}

/* Photo, then name over the link, with the row pinned to the foot of the card
   however long the sentence above it runs. */
.lux-testimonial__person {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 8px;
  align-items: center;
  margin-top: auto !important;
}

.lux-testimonial__photo {
  grid-row: 1 / 3;
  margin: 0 !important;
}

.lux-testimonial__photo img {
  display: block;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(126, 195, 255, 0.3);
  border-radius: 50%;
  object-fit: cover;
}

/* No photo, no hole where one would have been. */
.lux-testimonial:not(:has(.lux-testimonial__photo img[src])) .lux-testimonial__photo {
  display: none;
}

.lux-testimonial:not(:has(.lux-testimonial__photo img[src])) .lux-testimonial__person {
  grid-template-columns: minmax(0, 1fr);
}

.lux-testimonial__name {
  margin: 0 !important;
  color: var(--lux-testimonial-name);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-meta);
  font-weight: 600;
  line-height: 1.3;
}

/* The link is the point of the row: it says this sentence has a person behind
   it who can be looked up. Quiet until the card is hovered, then brand blue. */
.lux-testimonial__social {
  margin: 2px 0 0 !important;
  gap: 0 !important;
}

/* The tile, its fill and its white glyph all come from the shared icon
   treatment above, the same one the social rail and the footer use. Only the
   size and the movement are this block's own: it sits next to a face rather
   than in a column of its own, so it is a little larger and it lifts instead
   of sliding sideways. */
.lux-testimonial__social .wp-social-link {
  display: flex;
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: var(--lux-radius-button);
  transition:
    border-color var(--lux-transition),
    background var(--lux-transition),
    box-shadow 320ms var(--lux-motion-out),
    transform 280ms var(--lux-motion-out);
}

.lux-testimonial__social .wp-social-link .wp-block-social-link-anchor,
.lux-testimonial__social .wp-social-link a {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0 !important;
  align-items: center;
  justify-content: center;
}

.lux-testimonial__social .wp-social-link svg {
  width: 18px;
  height: 18px;
}

/* The ring is a spread shadow: it grows outward without changing the size of
   the box, so nothing is pushed against the bottom of the card. */
.lux-testimonial__social .wp-social-link:hover,
.lux-testimonial__social .wp-social-link:focus-within {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 0 6px rgba(24, 120, 241, 0.18),
    0 10px 24px rgba(0, 88, 191, 0.3);
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .lux-testimonial__social .wp-social-link {
    transition: none;
  }

  .lux-testimonial__social .wp-social-link:hover,
  .lux-testimonial__social .wp-social-link:focus-within {
    transform: none;
  }
}

/* ---- controls on the dark surface ----
   The carousel's buttons and counter were drawn for a white section. Here the
   same controls sit on navy, so only their colours are restated. */
/* On a phone the row runs off the right edge on purpose: a next card that stops
   short of the screen leaves a strip of empty panel beside it, which reads as a
   gap rather than as more to come. The left keeps the page gutter so the first
   card still lines up with the title above it. */
@media (max-width: 767px) {
  .lux-testimonials-carousel-mobile-on .lux-testimonials__track {
    width: 100%;
    max-width: none;
    padding-top: 4px !important;
    padding-right: 0 !important;
    padding-bottom: 20px !important;
    padding-left: var(--lux-page-gutter) !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    scroll-padding-inline: var(--lux-page-gutter) 0;
  }
}

/* The arrows sit inside the page gutter like everything else in the panel,
   rather than against the rounded edge. */
.lux-testimonials .lux-post-carousel__controls {
  width: min(
    calc(100% - var(--lux-page-gutter) - var(--lux-page-gutter)),
    560px
  );
}

.lux-testimonials .lux-post-carousel__button {
  border-color: var(--lux-testimonial-line-hover);
  color: var(--lux-testimonial-control);
}

.lux-testimonials .lux-post-carousel__button:hover,
.lux-testimonials .lux-post-carousel__button:focus-visible {
  border-color: var(--lux-active);
  color: var(--lux-white);
  background: var(--lux-blue-deep);
}

.lux-testimonials .lux-post-carousel__button:disabled {
  border-color: var(--lux-testimonial-line);
  color: var(--lux-testimonial-disabled);
  background: transparent;
}

.lux-testimonials .lux-post-carousel__counter {
  color: var(--lux-testimonial-counter);
}

.lux-testimonials .lux-post-carousel__progress {
  background: rgba(126, 195, 255, 0.2);
}

/* ==========================================================================
   Service cross-link and the empty media slider

   Two service pages that describe the same shoot in the same words compete
   with each other in search rather than with anyone else. The pages were split
   by intent, photo on one and video on the other, and each now ends with one
   line pointing at the other: it tells a visitor where the rest of the work
   is, and it tells a crawler these are two services and not one page twice.
   ========================================================================== */
.lux-svc-cta__related {
  margin: 14px 0 0 !important;
  color: rgba(245, 245, 245, 0.68);
  font-size: var(--lux-type-small);
  line-height: 1.6;
}

.lux-svc-cta__related a {
  color: var(--lux-glow);
  text-decoration: none;
  border-bottom: 1px solid rgba(126, 195, 255, 0.34);
  transition:
    color var(--lux-transition),
    border-color var(--lux-transition);
}

.lux-svc-cta__related a:hover,
.lux-svc-cta__related a:focus-visible {
  color: var(--lux-white);
  border-bottom-color: var(--lux-white);
}

/* A slider whose slides are still empty is a row of grey boxes and a set of
   arrows that go nowhere, so on the site it is simply not there yet. Inside
   Gutenberg it stays, or the editor could not fill it in: the editor's canvas
   carries .editor-styles-wrapper on its body, which is what tells the two
   apart. Adding one photograph brings the whole section back. */
body:not(.editor-styles-wrapper)
  .lux-media-slider:not(:has(.lux-media-slider__media :is(img[src], iframe, video))) {
  display: none;
}

/* ---- partners supplied as a pair ----
   A logo the client drew twice, once white and once in its own colours, does
   not need the filter that flattens the others: the white mark is a real file
   with real letterforms, so a wordmark knocked out of a plate survives instead
   of filling in. The two sit on top of each other in one tile and cross fade,
   which is why the group carries the glass and the figures inside it carry
   nothing.

   Both treatments live side by side on purpose. The strip takes pairs as they
   arrive, and until a logo has one it is still cut out of its white sheet and
   painted white by CSS, so the row stays even the whole way along. */
.lux-svc-hero__logos-row .lux-partner {
  position: relative;
  box-sizing: border-box;
  width: clamp(132px, 30vw, 168px);
  aspect-ratio: 3 / 2;
  margin: 0 !important;
  border: 1px solid rgba(126, 195, 255, 0.14);
  border-radius: var(--lux-radius-sm);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition:
    border-color var(--lux-transition),
    background var(--lux-transition),
    box-shadow var(--lux-transition),
    transform var(--lux-transition);
}

.lux-svc-hero__logos-row .lux-partner .wp-block-image {
  position: absolute;
  inset: 12px 16px;
  display: block;
  width: auto;
  aspect-ratio: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transition: opacity var(--lux-transition);
}

.lux-svc-hero__logos-row .lux-partner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  /* The file is already the right colour, so there is nothing to flatten. */
  filter: none;
}

.lux-svc-hero__logos-row .lux-partner__white {
  opacity: 0.82;
  filter: drop-shadow(0 0 9px rgba(126, 195, 255, 0.3));
}

.lux-svc-hero__logos-row .lux-partner__colour {
  opacity: 0;
}

.lux-svc-hero__logos-row .lux-partner:hover {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.93);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 16px 34px rgba(0, 0, 0, 0.34),
    0 0 26px rgba(126, 195, 255, 0.22);
  transform: translateY(-3px);
}

.lux-svc-hero__logos-row .lux-partner:hover .lux-partner__white {
  opacity: 0;
}

.lux-svc-hero__logos-row .lux-partner:hover .lux-partner__colour {
  opacity: 1;
}

/* With no colour file the white one still has to be visible. */
.lux-svc-hero__logos-row .lux-partner:not(:has(.lux-partner__colour img[src])):hover
  .lux-partner__white {
  opacity: 1;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .lux-svc-hero__logos-row .lux-partner,
  .lux-svc-hero__logos-row .lux-partner .wp-block-image {
    transition: none;
  }

  .lux-svc-hero__logos-row .lux-partner:hover {
    transform: none;
  }
}

/* ==========================================================================
   Questionnaire: the multi-step Fluent Form and the dialog it lives in
   The plugin ships this wizard unstyled, so a Georgian three-step form landed
   on the page as a grey progress strip, a column of naked checkboxes and two
   default buttons. Everything below is the same .lux-form opt-in as the rest
   of the skin, extended to the elements that only a stepped form renders.
   ========================================================================== */

/* ---- step header ----
   The bar carries its own "33%" label, which says the same thing as the step
   title next to it and says it worse. The title stays, the number goes. */
.lux-form .ff-step-header {
  margin-bottom: var(--lux-field-gap);
}

.lux-form .ff-el-progress {
  height: 6px;
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(2, 10, 28, 0.08);
}

.lux-form .ff-el-progress-bar {
  height: 100%;
  background: linear-gradient(112deg, var(--lux-active), var(--lux-blue));
}

.lux-form .ff-el-progress-bar span {
  display: none;
}

.lux-form .ff-el-progress-title,
.lux-form .ff-el-progress-status {
  color: var(--lux-dark);
  font-weight: 600;
  font-size: 15px;
}

/* ---- step navigation ----
   Next repeats the submit button's geometry so the three screens feel like one
   control; Previous is quiet on purpose, because going back is a repair and
   never the action the form wants to encourage. */
.lux-form .ff-btn-next,
.lux-form .ff-btn-prev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--lux-button-height);
  padding: 12px 28px;
  border-radius: var(--lux-radius-button);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: var(--lux-type-button);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    background 220ms ease,
    box-shadow 220ms ease,
    transform 220ms var(--lux-motion-out);
}

/* Fluent Forms paints Next with its own .ff-btn-secondary grey at three
   classes' worth of specificity, so the brand colour has to outrank it rather
   than merely follow it. */
.lux-form .frm-fluent-form .ff-btn-next.ff-btn-secondary,
.lux-form .frm-fluent-form .ff-btn-next {
  border: 0;
  color: var(--lux-white);
  background: var(--lux-blue);
  box-shadow: var(--lux-button-shadow);
}

.lux-form .frm-fluent-form .ff-btn-next.ff-btn-secondary:hover,
.lux-form .frm-fluent-form .ff-btn-next.ff-btn-secondary:focus-visible {
  background: var(--lux-blue-deep);
  box-shadow: var(--lux-button-shadow-glow);
  transform: translateY(-2px);
}

/* Previous carries the same .ff-btn-secondary grey as Next, so it needs the
   same weight of selector to be quiet instead of muddy. */
.lux-form .frm-fluent-form .ff-btn-prev.ff-btn-secondary,
.lux-form .frm-fluent-form .ff-btn-prev {
  border: 1px solid rgba(2, 10, 28, 0.16);
  color: var(--lux-text);
  background: transparent;
  box-shadow: none;
}

.lux-form .frm-fluent-form .ff-btn-prev.ff-btn-secondary:hover,
.lux-form .frm-fluent-form .ff-btn-prev.ff-btn-secondary:focus-visible {
  border-color: var(--lux-active);
  color: var(--lux-dark);
  background: rgba(0, 145, 252, 0.06);
}

/* The plugin leaves the navigation row flush against the last field, so the
   buttons read as part of the form rather than as the way out of it. A rule
   and a gap separate the answer from the action; back stays on the far left,
   forward on the right, on every step and at every width. */
.lux-form :is(.step-nav, .ff-inner_submit_container) {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  margin-top: clamp(20px, 2.4vw, 28px);
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid rgba(2, 10, 28, 0.1);
}

/* On the last step the plugin nests the Back row inside the submit row, and
   two nested separators would draw the line twice. The outer row keeps it. */
.lux-form .ff-inner_submit_container .step-nav {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.lux-form .step-nav .ff-btn-prev {
  margin-right: auto;
}

.lux-form .step-nav :is(.ff-el-group, .ff_submit_btn_wrapper) {
  margin: 0;
}

/* ---- choices ----
   Seventeen bare checkboxes read as a compliance form. As tiles they read as a
   menu, and a menu is what this step actually is: the visitor is picking, not
   confirming. The whole tile is the click target, which matters most on a
   phone where the box itself is a 16px hit area. */
/* The plugin puts the column hint on the field group and the options one level
   deeper, so the grid has to be declared on the inner wrapper. */
.lux-form :is(.ff_list_3col, .ff_list_inline) .ff-el-input--content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* In its own three-column mode the plugin gives every option width: 33.33%.
   Inside a grid cell that percentage resolves against the cell, so each tile
   collapsed to a third of its column and the label spilled out of its own
   border. The cell already does the columns; the option just fills it. */
.lux-form .fluentform .ff-el-group:is(.ff_list_3col, .ff_list_inline) .ff-el-form-check {
  float: none;
  width: 100%;
  padding: 0;
}

.lux-form .ff-el-form-check {
  margin: 0;
}

.lux-form .ff-el-form-check-label {
  display: flex;
  gap: 10px;
  align-items: center;
  height: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(2, 10, 28, 0.12);
  border-radius: 10px;
  background: var(--lux-white);
  font-size: 15px;
  line-height: 1.35;
  cursor: pointer;
  transition:
    border-color var(--lux-transition),
    background var(--lux-transition),
    transform 200ms var(--lux-motion-out);
}

.lux-form .ff-el-form-check-label:hover {
  border-color: rgba(0, 145, 252, 0.5);
  transform: translateY(-1px);
}

.lux-form .ff_item_selected .ff-el-form-check-label {
  border-color: var(--lux-active);
  background: rgba(0, 145, 252, 0.07);
  font-weight: 600;
}

.lux-form .ff-el-form-check-input {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--lux-active);
}

/* ---- budget sliders ----
   The plugin positions the input absolutely and prints the value beside it, so
   the track needs its own height back before either can be seen. */
.lux-form .ff_slider_wrapper {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 6px 0;
}

.lux-form .ff_slider_wrapper input[type="range"] {
  position: static !important;
  width: 100%;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(2, 10, 28, 0.1);
  accent-color: var(--lux-active);
  cursor: pointer;
}

.lux-form .ff_range_value {
  flex: none;
  min-width: 96px;
  padding: 7px 12px;
  border-radius: 8px;
  color: var(--lux-dark);
  background: rgba(0, 145, 252, 0.09);
  font-weight: 600;
  font-size: 15px;
  text-align: center;
}

/* ==========================================================================
   Modal shell (.lux-modal)
   The questionnaire is eleven answers long. Open on the page it pushes the
   proof below the fold and reads as work before anyone has decided to do it;
   in a dialog the same form is a deliberate step someone chose to take.
   .is-ready is added by assets/js/modal.js on the front end only, so in
   Gutenberg the group stays an ordinary block that can be edited in place.
   ========================================================================== */
/* Closed with visibility rather than display, because Fluent Forms measures
   the step slider when the page loads and a display:none form initialises with
   zero-width steps. The dialog is inert while hidden, so nothing inside it is
   focusable or clickable until it opens. */
.lux-modal.is-ready {
  position: fixed;
  inset: 0;
  z-index: 1200;
  /* The block layout the dialog was authored in caps its children at the
     content width and centres them, which cropped the backdrop to a 1440px
     band with live page either side. modal.js also moves the node to <body>;
     these two lines keep it right even if some other layout adopts it. */
  width: auto;
  max-width: none;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: clamp(10px, 3vw, 40px);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  background: rgba(2, 10, 28, 0.62);
  backdrop-filter: blur(3px);
  /* Visibility is a discrete property: given a duration it flips halfway
     through the fade, which is late on open and early on close. A zero-length
     transition with a delay switches it at exactly the right end instead. */
  transition:
    opacity 220ms ease,
    visibility 0s linear 220ms;
  pointer-events: none;
}

.lux-modal.is-ready.is-open {
  visibility: visible;
  opacity: 1;
  transition:
    opacity 220ms ease,
    visibility 0s linear 0s;
  pointer-events: auto;
}

.lux-modal.is-ready .lux-modal__panel {
  position: relative;
  width: min(100%, 760px);
  min-width: 0;
  max-width: 100%;
  margin: auto;
  padding: clamp(22px, 3vw, 38px);
  border-radius: var(--lux-radius-card);
  background: var(--lux-white);
  box-shadow: 0 30px 70px rgba(2, 10, 28, 0.35);
  animation: lux-modal-in 260ms var(--lux-motion-out) both;
}

@keyframes lux-modal-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lux-modal.is-ready .lux-modal__panel {
    animation: none;
  }
}

/* Inside the dialog the form card is the dialog, so it drops its own frame. */
.lux-modal.is-ready .lux-contact__form-card {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.lux-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(2, 10, 28, 0.12);
  border-radius: 50%;
  color: var(--lux-dark);
  background: var(--lux-white);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color var(--lux-transition),
    background var(--lux-transition);
}

.lux-modal__close:hover,
.lux-modal__close:focus-visible {
  border-color: var(--lux-active);
  background: rgba(0, 145, 252, 0.08);
}

body.lux-modal-open {
  overflow: hidden;
}

/* On a phone the two step buttons stop being a row. Side by side they were a
   99px "back" next to a 220px "send", which reads as one button and one
   accident; stacked, each is a full-width target and the primary action sits
   on top where the thumb already is. The plugin nests the back row inside the
   submit row, so reversing the outer column is what puts send above back. */
@media (max-width: 560px) {
  .lux-form :is(.step-nav, .ff-inner_submit_container) {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .lux-form .ff-inner_submit_container > .ff-t-cell {
    width: 100%;
  }

  .lux-form .frm-fluent-form :is(.ff-btn-next, .ff-btn-prev, .ff-btn-submit) {
    width: 100%;
    min-width: 0;
  }

  .lux-form .step-nav .ff-btn-prev {
    margin-right: 0;
  }
}

/* ==========================================================================
   Widgets on a light surface
   The icon tiles, the counter and the slider arrows were all drawn for the
   navy section. Dropped on a bare one they keep their pale, translucent
   values and disappear into the paper: the Facebook tile washes out, the
   counter is white text on white, the arrows are hidden outright.

   This block is the light-surface twin of the dark values, and it works by
   redefining the shared tokens rather than by restyling each component, so a
   widget added later inherits the correct look without another rule here.
   Add to this block, not next to it.
   ========================================================================== */
:is(.wp-block-group.is-style-lux-bare, .lux-post-content) {
  --lux-case-card-surface: #f1f5fb;
  --lux-case-work-surface: #eaf1ff;
  --lux-case-chip-surface: var(--lux-white);
  /* Opaque brand blue instead of the translucent sky tint: on navy the pale
     gradient reads as glass, on white it reads as nothing. */
  --lux-icon-tile-background: linear-gradient(145deg, var(--lux-blue), var(--lux-blue-deep));
  --lux-icon-tile-background-hover: linear-gradient(145deg, var(--lux-active), var(--lux-blue));
  --lux-icon-tile-border: rgba(24, 120, 241, 0.3);
  --lux-icon-tile-shadow: 0 6px 18px rgba(24, 120, 241, 0.22);
}

/* Narrative cards also use the shared surface palette when an editor chooses
   the dark group style. Bare cards retain the light page's readable ink. */
:is(.wp-block-group.is-style-lux-denim, .lux-panel-dark) {
  --lux-case-card-surface: var(--lux-blue-surface);
  --lux-case-work-surface: var(--lux-blue-surface);
  --lux-case-chip-surface: rgba(255, 255, 255, 0.1);
  --lux-case-heading: var(--lux-white);
  --lux-case-copy: var(--lux-paper);
  --lux-case-link: var(--lux-glow);
  --lux-case-card-line: rgba(255, 255, 255, 0.18);
  --lux-case-rail-surface: var(--lux-blue-surface);
  --lux-case-rail-cta-surface: var(--lux-blue-surface);
  --lux-case-rail-copy: var(--lux-paper);
  --lux-case-rail-muted: rgba(255, 255, 255, 0.78);
  --lux-case-rail-link: var(--lux-white);
  --lux-case-rail-line: rgba(255, 255, 255, 0.18);
  --lux-case-rail-active: rgba(255, 255, 255, 0.1);
  --lux-case-rail-active-copy: var(--lux-white);
  --lux-case-rail-button-surface: var(--lux-white);
  --lux-case-rail-button-copy: var(--lux-dark);
}

.wp-block-group.is-style-lux-bare {
  --lux-stat-line: rgba(2, 10, 28, 0.1);
  --lux-mockup-caption-surface: var(--lux-white);
  --lux-mockup-ink: var(--lux-dark);
  --lux-mockup-line: var(--lux-line, #e4e8ee);
  --lux-mockup-shadow: 0 14px 34px rgba(2, 10, 28, 0.1);
  --lux-project-browser-surface: #f2f5f9;
  --lux-project-browser-ink: var(--lux-dark);
  --lux-project-browser-muted: #596676;
  --lux-project-browser-line: var(--lux-line, #e4e8ee);
  --lux-project-browser-shadow: 0 10px 28px rgba(2, 10, 28, 0.08);
  --lux-featured-project-surface: var(--lux-white);
  --lux-featured-project-heading: var(--lux-dark);
  --lux-featured-project-copy: var(--lux-text);
  --lux-featured-project-muted: #566070;
  --lux-featured-project-line: var(--lux-line, #e4e8ee);
  --lux-featured-project-result: #eaf1ff;
  --lux-stat-hover-line: rgba(21, 104, 224, 0.32);
  --lux-stat-surface: linear-gradient(160deg, rgba(2, 10, 28, 0.04), rgba(2, 10, 28, 0.015));
  --lux-stat-value-surface: linear-gradient(180deg, var(--lux-blue-deep), var(--lux-dark));
  --lux-stat-label-copy: var(--lux-text);
  --lux-pricing-line: rgba(2, 10, 28, 0.14);
  --lux-pricing-heading: var(--lux-dark);
  --lux-pricing-header-surface: linear-gradient(145deg, #e5f1ff, #f4f8ff);
  --lux-pricing-tooltip-surface: var(--lux-white);
  --lux-pricing-copy: var(--lux-text);
  --lux-pricing-panel: var(--lux-white);
  --lux-pricing-featured-panel: #eaf1ff;
  --lux-cta-phone-copy: var(--lux-blue-deep);
  --lux-case-heading: var(--lux-dark);
  --lux-case-copy: var(--lux-text);
  --lux-case-link: var(--lux-blue-deep);
  --lux-case-card-line: var(--lux-line, #e4e8ee);
  --lux-case-chip-surface: var(--lux-white);
  --lux-case-rail-surface: var(--lux-white);
  --lux-case-rail-cta-surface: var(--lux-white);
  --lux-case-rail-copy: var(--lux-text);
  --lux-case-rail-muted: #566070;
  --lux-case-rail-link: var(--lux-blue-deep);
  --lux-case-rail-line: var(--lux-line, #e4e8ee);
  --lux-case-rail-active: rgba(24, 120, 241, 0.08);
  --lux-case-rail-active-copy: var(--lux-blue-deep);
  --lux-case-rail-button-surface: var(--lux-blue-deep);
  --lux-case-rail-button-copy: var(--lux-white);
}

/* Slide counters and the small meta text beside them. */
.wp-block-group.is-style-lux-bare :is([class*="counter"], [class*="__meta"]) {
  color: var(--lux-dark);
}

/* The arrows were hidden above 768px on light sections, on the reasoning that
   a visitor there can drag the row and the filled discs sat badly on paper.
   The bare style now draws them outlined rather than filled, and a carousel
   that advances by itself needs a visible way to stop and step through it, so
   they come back. Both hands of the shared carousel are covered: the row and
   the buttons inside it. */
@media (min-width: 768px) {
  .wp-block-group.is-style-lux-bare.lux-post-carousel
    :is(
      [class*="prev"],
      [class*="next"],
      [class*="__control"]:not([class*="__controls"])
    ) {
    display: inline-flex !important;
  }
}

.wp-block-group.is-style-lux-bare.lux-post-carousel
  .lux-post-carousel__controls:not([hidden]) {
  display: flex;
}

/* ==========================================================================
   Mobile action bar (.lux-action-bar)
   A phone's thumb sits at the bottom of the screen, and this site's two best
   channels were a footer link and a number that appears nowhere in the header.
   The bar puts calling, WhatsApp and the offer in that thumb zone.

   Phone only, by design: on a desktop the same strip reads as an ad banner and
   the number belongs in the header instead. Its taps need no tracking code of
   their own, because assets/js/analytics-events.js already reports every tel:
   and wa.me link with the place it was tapped from.
   ========================================================================== */
.lux-action-bar {
  position: fixed;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  left: 12px;
  z-index: 980;
  display: none;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(126, 195, 255, 0.16);
  border-radius: var(--lux-radius-pill);
  background: linear-gradient(145deg, #071b3d, #020a1c);
  box-shadow: 0 12px 30px rgba(2, 10, 28, 0.42);
}

@media (max-width: 767px) {
  .lux-action-bar {
    display: flex;
  }

  /* Room for the bar, so it never covers the last line or a submit button. */
  body {
    padding-bottom: 86px;
  }

  /* The back to top control lived exactly where the bar now sits. It also
     carries a 16px idle translate, so the offset allows for that on top of the
     bar's own height. */
  .lux-top-button {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* An open dialog owns the screen. */
body.lux-modal-open .lux-action-bar {
  display: none;
}

.lux-action-bar__channels {
  display: flex;
  flex: none;
  gap: 8px;
}

.lux-action-bar__icon {
  display: grid;
  width: 44px;
  height: 44px;
  border: 1px solid var(--lux-icon-tile-border);
  border-radius: 50%;
  color: var(--lux-white);
  background: var(--lux-icon-tile-background);
  box-shadow: var(--lux-icon-tile-shadow);
  place-items: center;
  transition:
    background var(--lux-transition),
    transform 220ms var(--lux-motion-out);
}

.lux-action-bar__icon svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
}

.lux-action-bar__icon:active {
  transform: scale(0.94);
}

/* The one filled control on the bar, in the gradient the theme keeps for
   buttons. Everything else here is an outline or a tile, so this reads as the
   action even at a glance. */
.lux-action-bar__actions {
  flex: 1;
  min-width: 0;
  margin: 0 !important;
}

.lux-action-bar__button,
.lux-action-bar__button .wp-block-button__link {
  width: 100%;
}

.lux-action-bar .wp-block-button__link {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 46px !important;
  height: 46px;
  padding: 0 18px !important;
  border: 0;
  border-radius: var(--lux-radius-pill);
  color: var(--lux-white);
  background: linear-gradient(112deg, var(--lux-active), var(--lux-blue));
  box-shadow: var(--lux-button-shadow);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
}

/* The premium button already ends in an arrow of its own, and it opens with a
   chat tile that a 44px-tall bar has no room for. Inside the bar the label and
   that arrow are the whole control. */
.lux-action-bar .lux-premium-button__icon {
  display: none !important;
}

.lux-action-bar :is(.lux-premium-button__inner, .lux-premium-button__copy) {
  gap: 8px;
  min-height: 0;
  padding: 0 !important;
}

.lux-action-bar .lux-premium-button__title {
  font-size: 15px;
  line-height: 1.1;
}

/* ---- denim outside a reference section ----
   The denim style only paints: the box it was always used in came from
   .lux-reference-section, which supplies the vertical rhythm and the gutter.
   Applied from the block sidebar to any other group, as an editor reasonably
   does, it drew a band tight against the text with no air above or below.
   The style now carries its own box, so it works wherever it is dropped.

   Width is still the editor's call and cannot be guessed here: a band reaches
   the screen edges only when the block itself is set to Full width. */
.wp-block-group.is-style-lux-denim:not(.lux-reference-section, .lux-case-card, .lux-case-outcome) {
  padding-block: var(--lux-section-space-y);
  padding-inline: var(--lux-page-gutter);
}

/* A band that does not span the screen reads as a card, so it gets a card's
   corners rather than a full-bleed edge. */
.wp-block-group.is-style-lux-denim:not(.lux-reference-section, .lux-case-card, .lux-case-outcome):not(.alignfull) {
  border-radius: var(--lux-radius-card);
}

/* Its own title sits inside that padding, so it no longer needs the section
   margin that spaced it from the copy above. */
.wp-block-group.is-style-lux-denim:not(.lux-reference-section)
  > .lux-svc-section__title:first-child {
  margin-top: 0 !important;
}

/* A denim group sitting straight in the article is a section, so it behaves
   like one: it fills the content wrapper edge to edge, exactly as a block set
   to Full width does, and drops the card corners. Setting Full width in the
   block sidebar gives the identical result; this only means the style no
   longer depends on remembering to. Nested denim groups, inside a column or a
   card, keep the boxed look above. */
.lux-post-content
  > .wp-block-group.is-style-lux-denim:not(.lux-reference-section, .lux-case-outcome) {
  /* The blank template pins every unaligned child to the reading width with
     !important, so a band has to answer in the same terms. */
  width: auto !important;
  max-width: none !important;
  margin-inline: 0 !important;
  border-radius: 0;
}

/* Section titles on a service page, and in any denim band, take the treatment
   the rest of the site already uses: centred, with the short gradient rule
   beneath. Course pages keep the trailing rule of the article layout, which is
   why the two are listed separately rather than merged. */
:is(.wp-block-group.is-style-lux-denim, .lux-service-single)
  .lux-svc-section__title {
  display: block;
  margin-bottom: var(--lux-section-heading-space-after) !important;
  text-align: center;
}

/* Only the band inverts the colour; on paper the title keeps the ink it had. */
.wp-block-group.is-style-lux-denim .lux-svc-section__title {
  color: var(--lux-white);
}

:is(.wp-block-group.is-style-lux-denim, .lux-service-single)
  .lux-svc-section__title::after {
  display: block;
  width: var(--lux-section-divider-width);
  min-width: 0;
  height: var(--lux-section-divider-height);
  margin: var(--lux-section-divider-offset) auto 0;
  border-radius: 999px;
  background-image: linear-gradient(90deg, var(--lux-blue-deep), var(--lux-active), var(--lux-glow));
  background-position: 0 0;
  background-size: auto;
  box-shadow: 0 6px 18px rgba(21, 104, 224, 0.22);
  content: "";
}

/* When the article ends on a band, the band ends on the footer. The main's
   closing padding is what left a strip of paper between two dark surfaces. */
.lux-post-content
  > .wp-block-group.is-style-lux-denim:not(.lux-reference-section):last-child {
  margin-bottom: calc(-1 * var(--lux-section-space-y)) !important;
}

/* ---- FAQ on a denim band ----
   The card is 88% white, which is right on paper: it lets the section's own
   tint through and the row sits into the page rather than on it. Over navy the
   same translucency drags the card grey, and a list of grey cards on blue
   reads as disabled. On the band the cards are simply white.
   ========================================================================== */
.is-style-lux-denim .lux-reference-faq__list details,
.lux-panel-dark .lux-reference-faq__list details {
  background: var(--lux-white);
}

.is-style-lux-denim .lux-reference-faq__list details[open],
.lux-panel-dark .lux-reference-faq__list details[open] {
  background: linear-gradient(135deg, var(--lux-white), #f2f8ff);
}

/* ==========================================================================
   The third surface (.is-style-lux-soft)
   The site had two: paper and the navy band. Two paper sections in a row read
   as one long section, and reaching for denim every time someone needs a
   boundary makes the loudest surface the most common one.

   This is paper with the brand's own cool cast, light enough that the white
   cards inside it still read as cards. It takes the same box as the denim
   band, so the two are interchangeable in the block sidebar: apply either and
   the section spacing, the width and the centred title come with it.
   ========================================================================== */
.wp-block-group.is-style-lux-soft {
  background:
    linear-gradient(170deg, var(--lux-white) 0%, var(--lux-soft-surface) 100%) !important;
}

.wp-block-group.is-style-lux-soft:not(.lux-reference-section, .lux-case-card, .lux-case-outcome) {
  padding-block: var(--lux-section-space-y);
  padding-inline: var(--lux-page-gutter);
}

/* The same box for the bare surface. A section's spacing should not depend on
   which background an editor picked for it, and `lux-bare` had no rule of its
   own, so switching a section from the light band to paper silently took all
   of its padding away and the content underneath ran straight into it. Scoped
   to a service section rather than every bare group, which is genuinely meant
   to carry nothing. */
.wp-block-group.is-style-lux-bare.lux-svc-section:not(.lux-reference-section, .lux-case-card, .lux-case-outcome) {
  padding-block: var(--lux-section-space-y);
  padding-inline: var(--lux-page-gutter);
  /* The section already carried a top margin of the same size, which is what
     used to hold it off the section above. With the padding added that space
     was being paid for twice and the gap above the heading came out double
     every other section on the page. The padding is the box; the margin goes.
     Marked, because .lux-svc-section sets that margin the same way. */
  margin-block-start: 0 !important;
}

.wp-block-group.is-style-lux-soft:not(.lux-reference-section, .lux-case-card, .lux-case-outcome):not(.alignfull) {
  border-radius: var(--lux-radius-card);
}

.wp-block-group.is-style-lux-soft:not(.lux-reference-section)
  > .lux-svc-section__title:first-child {
  margin-top: 0 !important;
}

/* Straight in the article it is a section, exactly like the denim band. */
.lux-post-content
  > .wp-block-group.is-style-lux-soft:not(.lux-reference-section, .lux-case-outcome) {
  width: auto !important;
  max-width: none !important;
  margin-inline: 0 !important;
  border-radius: 0;
}

.lux-post-content
  > .wp-block-group.is-style-lux-soft:not(.lux-reference-section, .lux-case-outcome):last-child {
  margin-bottom: calc(-1 * var(--lux-section-space-y)) !important;
}

/* Centred title with the short rule, the same as every other section. The ink
   stays dark here: this is a light surface. */
.wp-block-group.is-style-lux-soft .lux-svc-section__title {
  display: block;
  margin-bottom: var(--lux-section-heading-space-after) !important;
  text-align: center;
}

.wp-block-group.is-style-lux-soft .lux-svc-section__title::after {
  display: block;
  width: var(--lux-section-divider-width);
  min-width: 0;
  height: var(--lux-section-divider-height);
  margin: var(--lux-section-divider-offset) auto 0;
  border-radius: 999px;
  background-image: linear-gradient(90deg, var(--lux-blue-deep), var(--lux-active), var(--lux-glow));
  background-position: 0 0;
  background-size: auto;
  box-shadow: 0 6px 18px rgba(21, 104, 224, 0.22);
  content: "";
}

/* Cards keep their edge against the tint rather than dissolving into it. */
.wp-block-group.is-style-lux-soft .lux-reference-faq__list details {
  border-color: rgba(2, 10, 28, 0.1);
  background: var(--lux-white);
}

/* ---- band children keep the section measure ----
   Applying a background in the editor turns the group into a constrained
   layout, and constrained layout caps every child at theme.json's 760px
   content size. That is the right width for running text and the wrong one for
   a section: the four process cards collapsed to 174px each inside a
   full-width band. Inside a band the children get the band's own measure, and
   anything that sets its own width, like the FAQ list, still wins. */
.lux-post-content
  > .wp-block-group:is(.is-style-lux-soft, .is-style-lux-denim)
  > * {
  max-width: min(var(--lux-content), 100%) !important;
  margin-inline: auto !important;
}

/* A band brings its own 70px of air on the inside, so it needs none on the
   outside. The section margin it inherited from the article layout showed as a
   strip of paper between two bands, which is exactly the seam a band exists to
   remove. Sections without a background keep their margin. */
.lux-post-content
  > .wp-block-group:is(.is-style-lux-soft, .is-style-lux-denim) {
  margin-top: 0 !important;
}

/* ---- one section title on service pages ----
   The site had two: 36px on .lux-reference-section bands and 26px on the
   article sections, which put "მომსახურების პროცესი" ten pixels below
   "საიტის დამზადების ფასები" on the same page. Inside a full-width band the
   smaller one read as a caption and the band looked empty.

   Both now use --lux-type-section-title, the token the rest of the site
   already resolves to 36px. Course pages keep the smaller title, where the
   article rhythm is the point. */
.lux-service-single .lux-svc-section__title {
  font-size: var(--lux-type-section-title);
  font-weight: var(--lux-weight-heading);
}

/* ---- ენის გადამრთველი ჰედერში ----
   Weglot pins its switcher to the bottom right of the viewport. On a phone that
   corner is already spoken for: the switcher sits over the content and over the
   action bar, and it is the last place a reader looks when the rest of the site
   chrome is at the top. So on compact widths the header takes it — the empty
   mount block in the header template part, immediately left of the burger, and
   language-switcher.js moves the plugin's own switcher into it. The desktop
   keeps the floating corner it always had.

   No pill, no border, no plate. The burger beside it is the only control the
   mobile header draws; a second bordered box next to it reads as two competing
   buttons. The flag alone, at the burger's own height, with a caret to say it
   opens. Georgian language names are long and the row has the wordmark and the
   burger to seat first; the names are still there the moment the list opens. */
@media (max-width: 1023px) {
  /* The mobile row is two tracks — wordmark, burger. The switcher needs its own
     between them rather than a second grid row to wrap onto. */
  .lux-reference-header__inner:has(> .lux-header-lang) {
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: 10px !important;
  }

  .lux-reference-header__inner:has(> .lux-header-lang) .lux-header-lang {
    grid-column: 2;
    justify-self: end;
    /* Without a plate to press, the flag alone is a 40x19 target. Stretching the
       mount over the full bar gives the thumb the whole height to land on and
       draws nothing extra. */
    align-self: stretch;
  }

  .lux-reference-header__inner:has(> .lux-header-lang) .lux-reference-nav {
    grid-column: 3;
    justify-self: end;
  }

  .lux-header-lang {
    display: flex !important;
    align-items: center;
    margin: 0 !important;
  }

  /* Out of the corner and back into the flow. */
  .lux-header-lang .country-selector.weglot-default {
    position: relative;
    right: auto;
    bottom: auto;
    width: auto;
    height: 100%;
    background: none;
  }

  .lux-header-lang .wgcurrent {
    position: relative;
    display: flex !important;
    align-items: center;
    height: 100% !important;
    padding: 0 13px 0 0 !important;
    border: 0 !important;
    background: none;
  }

  .lux-header-lang .wgcurrent .wglanguage-name {
    display: flex !important;
    align-items: center;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .lux-header-lang .wgcurrent .wglanguage-name::before {
    height: 19px !important;
    margin: 0 !important;
    border-radius: 2px !important;
  }

  /* Weglot's caret is a dark PNG, which on the denim bar is a smudge. Drawn in
     the same white as the burger icon instead. */
  .lux-header-lang .wgcurrent::after {
    top: 50% !important;
    right: 0 !important;
    width: 6px !important;
    height: 6px !important;
    border-right: 1.5px solid rgba(255, 255, 255, 0.75);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.75);
    background: none !important;
    transform: translateY(-70%) rotate(45deg) !important;
  }

  .lux-header-lang .country-selector input:checked ~ .wgcurrent::after {
    transform: translateY(-25%) rotate(-135deg) !important;
  }

  /* The list hangs off the right edge, on the navigation surface the submenus
     already use, so the two panels the header can open match. */
  .lux-header-lang .country-selector.weglot-dropdown ul {
    top: calc(100% + 12px) !important;
    right: 0;
    left: auto !important;
    min-width: 158px;
    padding: 4px !important;
    border: 1px solid rgba(126, 195, 255, 0.28) !important;
    border-radius: 8px;
    background: var(--lux-navigation-surface) !important;
    box-shadow: 0 20px 48px rgba(2, 10, 28, 0.34);
  }

  .lux-header-lang .country-selector.weglot-dropdown ul a {
    display: flex !important;
    align-items: center;
    height: 36px !important;
    padding: 0 8px !important;
    border-radius: 5px;
    color: var(--lux-white) !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  .lux-header-lang .country-selector.weglot-dropdown ul a::before {
    height: 19px !important;
    border-radius: 2px !important;
  }

  .lux-header-lang .country-selector.weglot-dropdown ul a:hover,
  .lux-header-lang .country-selector.weglot-dropdown ul a:focus-visible {
    background: rgba(255, 255, 255, 0.08);
  }
}

/* ---- the same switcher, floating, on the desktop ----
   Above 1023px it goes back where Weglot puts it, except for the corner: the
   right one already holds the back to top button, and the switcher was landing
   on it. Bottom left is empty — the social rail is pinned at half height — and
   it is the corner an eye sweeping back from the content reaches first.

   Weglot's own dressing is a white box with a grey hairline, which on this
   surface reads as a leftover cookie bar. It gets the rail's dressing instead:
   the same night ground, the same blue-lit border, the same blur. */
@media (min-width: 1024px) {
  /* The mount is a real element even when empty, and the desktop header is a
     two-track grid: left in place it would take the navigation's column and
     push the menu onto a second row. */
  .lux-header-lang {
    display: none !important;
  }

  .country-selector.weglot-default {
    right: auto;
    bottom: calc(var(--lux-page-gutter) + env(safe-area-inset-bottom, 0px));
    left: var(--lux-page-gutter);
    background: none;
  }

  .country-selector.weglot-default .wgcurrent {
    display: flex !important;
    align-items: center;
    height: 44px;
    padding: 0 34px 0 13px !important;
    border: 1px solid rgba(59, 158, 255, 0.2) !important;
    border-radius: var(--lux-radius-pill);
    background:
      radial-gradient(circle at 0 0, rgba(24, 120, 241, 0.28), transparent 54%),
      rgba(2, 10, 28, 0.9);
    box-shadow:
      0 14px 34px rgba(2, 10, 28, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    transition:
      border-color 220ms ease,
      box-shadow 220ms ease,
      transform 320ms var(--lux-motion-out);
  }

  .country-selector.weglot-default .wgcurrent:hover {
    border-color: rgba(126, 195, 255, 0.5) !important;
    box-shadow:
      0 18px 42px rgba(2, 10, 28, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
  }

  .country-selector.weglot-default .wgcurrent .wglanguage-name {
    display: flex !important;
    align-items: center;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    color: var(--lux-white);
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1 !important;
  }

  .country-selector.weglot-default .wglanguage-name::before,
  .country-selector.weglot-default ul a::before {
    height: 19px !important;
    border-radius: 3px !important;
  }

  /* Sitting on the floor of the window, the list can only open upward, so the
     caret rests pointing up and turns over when it does. */
  .country-selector.weglot-default .wgcurrent::after {
    top: 50% !important;
    right: 14px !important;
    width: 7px !important;
    height: 7px !important;
    border-right: 1.6px solid rgba(255, 255, 255, 0.8);
    border-bottom: 1.6px solid rgba(255, 255, 255, 0.8);
    background: none !important;
    transform: translateY(-25%) rotate(-135deg) !important;
  }

  .country-selector.weglot-default input:checked ~ .wgcurrent::after {
    transform: translateY(-70%) rotate(45deg) !important;
  }

  .country-selector.weglot-default.weglot-dropdown ul {
    top: auto !important;
    bottom: calc(100% + 10px) !important;
    left: 0;
    min-width: 100%;
    padding: 5px !important;
    border: 1px solid rgba(59, 158, 255, 0.2) !important;
    border-radius: 16px;
    background: rgba(2, 10, 28, 0.94) !important;
    box-shadow: 0 20px 48px rgba(2, 10, 28, 0.42);
    backdrop-filter: blur(16px);
  }

  .country-selector.weglot-default.weglot-dropdown ul a {
    display: flex !important;
    align-items: center;
    height: 40px !important;
    padding: 0 13px !important;
    border-radius: 12px;
    color: var(--lux-white) !important;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1 !important;
  }

  .country-selector.weglot-default.weglot-dropdown ul a:hover,
  .country-selector.weglot-default.weglot-dropdown ul a:focus-visible {
    color: var(--lux-white) !important;
    background: rgba(255, 255, 255, 0.08);
  }
}

/* ---- the stacked headline is set for the Georgian line ----
   The hero headline puts one word per line, which is the shape of "შენი წარმატების
   პარტნიორი": three long words, three lines, read as a stack. A translation is
   a different count of shorter words, and the same rule turns "Your partner for
   success" into a ladder of four single words.

   On a translated page the headline goes back to ordinary wrapping, balanced,
   so the browser evens the lines out instead of stacking them. The per-letter
   wave still runs; only the line breaking changes. */
html:not([lang|="ka"]) .lux-reference-hero .lux-reference-hero__title.lux-text-wave {
  display: block;
  /* The letters are drawn at min(1em, 10vw), so on a phone they are half the
     headline's nominal size. A line box measured from the nominal size would
     leave a blank row between the two lines; this follows the letters. */
  /* !important because the headline rule pins the leading that way. */
  line-height: calc(1.14 * min(1em, 10vw)) !important;
  text-wrap: balance;
}

/* The space between words is drawn as an empty element, which the column layout
   did not need. Wrapping does: without a real space there is nowhere to break.
   It is sized like the letters for the same reason the line box is. */
html:not([lang|="ka"]) .lux-text-wave__space {
  display: inline;
  font-size: min(1em, 10vw);
}

html:not([lang|="ka"]) .lux-text-wave__space::before {
  content: " ";
}

/* ---------------------------------------------------------------------------
   Services mega menu, and the mobile overlay it turns into
   ---------------------------------------------------------------------------
   The services submenu uses two columns, with one line of explanation for
   each link. Six selected services fill three rows; the layout also adapts
   when the editor adds or removes an item.

   The count is the editor's to change, so nothing below leans on it: the last
   row fills itself and the hairlines follow whatever shape that row takes.

   The switch is the lux-mega class on the submenu, set in the editor, not a
   rule that fires on every dropdown. Other menus keep their existing layout.

   Core copies a submenu's className onto both the li and the ul, so .lux-mega
   matches the container itself and no wrapper selector is needed. The
   descriptions are core's own description attribute on each navigation link,
   rendered as .wp-block-navigation-item__description, so they are edited in the
   Navigation block and nothing here invents them.
   --------------------------------------------------------------------------- */

@media (min-width: 1200px) {
  .lux-reference-nav .wp-block-navigation__submenu-container.lux-mega {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Flush cells, because the separation is a hairline between them rather
       than a gap. The room around each link comes from its own padding. */
    gap: 0;
    /* Anchored to the parent's centre rather than its left edge: a 1000px
       panel hung off the left of a short word runs off the viewport. */
    left: 50%;
    /* The menu item's box ends inside the header's padding, so a panel pinned
       to `top: 100%` starts about a dozen pixels above the header's own bottom
       edge and reads as sitting on top of the bar rather than below it. This
       clears the bar and leaves a small gap under it. */
    top: calc(100% + 20px);
    /* Core ships `width: 0` on every submenu container and the theme pins a
       315px min-width, both later in the cascade than this file, so the panel
       has to insist on its own size. */
    width: min(840px, calc(100vw - 72px)) !important;
    min-width: 0 !important;
    padding: 14px !important;
    transform: translateX(-50%);
  }

  /* The gap above would drop the hover the moment the pointer crossed it, so
     it is bridged by an invisible strip that belongs to the panel. */
  .lux-reference-nav .wp-block-navigation__submenu-container.lux-mega::after {
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 22px;
    content: "";
  }

  .lux-reference-nav .lux-mega > .wp-block-navigation-item {
    width: auto;
  }

  .lux-reference-nav
    .lux-mega
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content {
    /* Icon in the first column, label over description in the second. The
       tile is the ::before further down, which is why it spans both rows.

       Core sets `display: flex` on this exact element at the same specificity
       and its stylesheet is printed after the theme's, so the layout has to be
       marked important or the grid never takes effect. */
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 3px 11px;
    align-items: start;
    /* align-items settles an item inside its own row; the rows themselves are
       settled by align-content, and its default of stretch shared this cell's
       spare height between them. A neighbour whose label ran to two lines made
       the whole row taller, and every cell beside it answered by pushing its
       description down to match. Packing the rows at the top keeps a label and
       its description together whatever the tallest cell in the row is doing,
       and the leftover height falls to the bottom where nothing reads into
       it. */
    align-content: start;
    height: 100%;
    /* Core's own 0.5em/1em on this element is printed after the theme at the
       same specificity, the same reason `display` above has to be marked. */
    padding: 15px 18px !important;
    border-radius: var(--lux-radius-sm);
    text-align: left;
    transition: background 200ms ease;
  }

  /* ---- a last row that does not fill ----
     The item count belongs to the editor. An odd number of links leaves one
     cell alone on the last row. That final cell takes the full width so the
     grid stays a rectangle at any count and the hairlines follow its shape. */
  .lux-reference-nav
    .lux-mega:not(.lux-mega--column)
    > .wp-block-navigation-item:last-child:nth-child(2n + 1) {
    grid-column: 1 / -1;
  }

  /* ---- the hairlines between the cells ----
     A translucent white rather than a colour of its own: the panel already has
     a gradient behind it, and a line that borrows from what it sits on stays a
     separator instead of becoming a fourth element in the design.

     Right hand line on every cell that has a cell to its right: not the last of
     a full row, and not the final item, which may be sitting in a short row
     with nothing but panel beside it. */
  .lux-reference-nav
    .lux-mega:not(.lux-mega--column)
    > .wp-block-navigation-item:not(:nth-child(2n)):not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.09);
  }

  /* Bottom line on every cell, then taken back off the last row, because which
     cells make up the last row depends on whether the count is even or odd. */
  .lux-reference-nav .lux-mega > .wp-block-navigation-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  }

  .lux-reference-nav
    .lux-mega:not(.lux-mega--column):has(
      > .wp-block-navigation-item:last-child:nth-child(2n)
    )
    > .wp-block-navigation-item:nth-last-child(-n + 2),
  .lux-reference-nav
    .lux-mega:not(.lux-mega--column):has(
      > .wp-block-navigation-item:last-child:nth-child(2n + 1)
    )
    > .wp-block-navigation-item:last-child {
    border-bottom: 0;
  }

  /* ---- the same panel in one column ----
     Courses uses a compact list. Its existing one column variant keeps the
     panel narrow while the services panel uses two columns.

     The variant changes only what the two column rules assume. The cell is
     untouched: the same icon tile, the same label over the same one line of
     explanation, the same hairline between rows. One column simply has nothing
     to the right of anything, and its last row is its last item, so the rules
     above sit this one out.

     Set in the editor as a second class on the submenu:
     Advanced > Additional CSS class > lux-mega lux-mega--column */
  .lux-reference-nav
    .wp-block-navigation__submenu-container.lux-mega.lux-mega--column {
    grid-template-columns: minmax(0, 1fr);
    /* One cell of the two column panel, padding included, so a course row is
       the same width as a service row rather than a width of its own. */
    width: min(392px, calc(100vw - 72px)) !important;
  }

  .lux-reference-nav
    .lux-mega--column
    > .wp-block-navigation-item:last-child {
    border-bottom: 0;
  }

  .lux-reference-nav
    .lux-mega
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content:hover,
  .lux-reference-nav
    .lux-mega
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content:focus-visible {
    background: rgba(255, 255, 255, 0.08);
  }

  .lux-reference-nav .lux-mega .wp-block-navigation-item__label {
    /* A touch under the navigation size. The Mrgvlovani caps face is wide, and
       at the bar's own size the longer service names wrap to two lines and each
       row grows by half again. */
    font-size: 0.94em;
    font-weight: 600;
    line-height: 1.2;
  }

  .lux-reference-nav .lux-mega .wp-block-navigation-item__description {
    /* Core ships `display: none` on every navigation description, so a theme
       that wants them has to say so. Three classes beats core's two, which is
       why this needs no !important. -webkit-box does the showing here because
       the clamp below needs it.

       Two lines, whether the sentence fills them or not. The editor writes
       these at whatever length the service needs, and mixing one line cells
       with two left the panel with a ragged bottom edge. Reserving the pair
       gives every cell the same block of text, and clamping it stops a long
       one from setting a taller row for the two beside it. The reserved line
       falls at the end of the cell rather than between two pieces of writing,
       which is why it reads as room here and read as a gap on a post card. */
    display: -webkit-box;
    min-height: calc(2em * 1.35);
    overflow: hidden;
    font-size: 0.75em;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* Secondary by weight, not by a second colour: the panel already sits on
       the dark surface and a third tone would only muddy it. */
    opacity: 0.68;
  }
}

/* ---- the same menu on a phone ----
   The phone menu is core's overlay, styled the way it already was. The only
   thing the mega menu adds here is the per link descriptions, and a one line
   explanation under every item turns a short tap list into a wall of text on a
   narrow screen. They belong to the three column panel, so they stay there. */
@media (max-width: 1199px) {
  .lux-reference-nav .wp-block-navigation-item__description {
    display: none;
  }
}

/* ---- mega menu icons ----
   One tile per service, drawn from a custom property so the icon set lives in
   one place and an item picks its glyph with a single class in the editor:
   Advanced > Additional CSS class > lux-ic-web, lux-ic-security, and so on.

   The tile is two background layers on one pseudo element, the glyph over the
   shared icon gradient, which is why no extra markup is needed inside a
   navigation link that core will not let us add to anyway.

   An item with no lux-ic-* class still gets the tile and the default mark, so a
   newly added service looks unfinished rather than broken. */
@media (min-width: 1200px) {
  .lux-reference-nav
    .lux-mega
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content::before {
    grid-row: 1 / span 2;
    align-self: start;
    width: 34px;
    height: 34px;
    border: 1px solid var(--lux-icon-tile-border);
    border-radius: 9px;
    background:
      var(--lux-svc-icon, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l2.3%205.9L20%2011l-5.7%202.1L12%2019l-2.3-5.9L4%2011l5.7-2.1z%22%2F%3E%3C%2Fsvg%3E")) center / 18px 18px no-repeat,
      var(--lux-icon-tile-background);
    box-shadow: var(--lux-icon-tile-shadow);
    content: "";
    transition: background 220ms ease;
  }

  .lux-reference-nav
    .lux-mega
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content:hover::before,
  .lux-reference-nav
    .lux-mega
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content:focus-visible::before {
    background:
      var(--lux-svc-icon, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l2.3%205.9L20%2011l-5.7%202.1L12%2019l-2.3-5.9L4%2011l5.7-2.1z%22%2F%3E%3C%2Fsvg%3E")) center / 18px 18px no-repeat,
      var(--lux-icon-tile-background-hover);
  }

  /* The description is set in FiraGO rather than the navigation face. The menu
     labels use the Mrgvlovani display cut, which is right for four caps words
     and wrong for a sentence: at this size it stops being readable prose. */
  .lux-reference-nav .lux-mega .wp-block-navigation-item__description {
    font-family: "FiraGO", "Sylfaen", sans-serif;
    font-weight: 400;
    letter-spacing: 0;
  }

  .lux-reference-nav .lux-mega .lux-ic-web > .wp-block-navigation-item__content {
    --lux-svc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M3%209h18%22%2F%3E%3Cpath%20d%3D%22M6.5%206.6h.01M9.3%206.6h.01%22%2F%3E%3C%2Fsvg%3E");
  }

  .lux-reference-nav .lux-mega .lux-ic-marketing > .wp-block-navigation-item__content {
    --lux-svc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2017.5l6-6%204%204%207.5-7.5%22%2F%3E%3Cpath%20d%3D%22M14.5%208h6v6%22%2F%3E%3C%2Fsvg%3E");
  }

  .lux-reference-nav .lux-mega .lux-ic-social > .wp-block-navigation-item__content {
    --lux-svc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2011.6a8%208%200%200%201-11.7%207.1L4%2020l1.3-4.4A8%208%200%201%201%2021%2011.6z%22%2F%3E%3Cpath%20d%3D%22M9%2010.5h6M9%2013.8h4%22%2F%3E%3C%2Fsvg%3E");
  }

  .lux-reference-nav .lux-mega .lux-ic-design > .wp-block-navigation-item__content {
    --lux-svc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020l4.2-1L18.6%208.6a2.9%202.9%200%200%200-4.1-4.1L4%2015z%22%2F%3E%3Cpath%20d%3D%22M13.4%205.6l4.1%204.1%22%2F%3E%3C%2Fsvg%3E");
  }

  .lux-reference-nav .lux-mega .lux-ic-brand > .wp-block-navigation-item__content {
    --lux-svc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l2.3%205.9L20%2011l-5.7%202.1L12%2019l-2.3-5.9L4%2011l5.7-2.1z%22%2F%3E%3C%2Fsvg%3E");
  }

  .lux-reference-nav .lux-mega .lux-ic-photo > .wp-block-navigation-item__content {
    --lux-svc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%208h3l1.6-2.2h6.8L17%208h3a1%201%200%200%201%201%201v9a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V9a1%201%200%200%201%201-1z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213.2%22%20r%3D%223.2%22%2F%3E%3C%2Fsvg%3E");
  }

  .lux-reference-nav .lux-mega .lux-ic-video > .wp-block-navigation-item__content {
    --lux-svc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M10.2%209.4l5%202.6-5%202.6z%22%2F%3E%3C%2Fsvg%3E");
  }

  .lux-reference-nav .lux-mega .lux-ic-drone > .wp-block-navigation-item__content {
    --lux-svc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%226%22%20cy%3D%226.6%22%20r%3D%222.4%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%226.6%22%20r%3D%222.4%22%2F%3E%3Crect%20x%3D%229.2%22%20y%3D%2210.4%22%20width%3D%225.6%22%20height%3D%225.6%22%20rx%3D%221.6%22%2F%3E%3Cpath%20d%3D%22M7.7%208.3l1.9%202.1M16.3%208.3l-1.9%202.1M9.6%2016l-2.4%202.9M14.4%2016l2.4%202.9%22%2F%3E%3C%2Fsvg%3E");
  }

  /* The course icons. Marketing and web reuse the service glyphs above rather
     than drawing a second trend line and a second browser window. */
  .lux-reference-nav .lux-mega .lux-ic-ai > .wp-block-navigation-item__content {
    --lux-svc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%227.6%22%20y%3D%227.6%22%20width%3D%228.8%22%20height%3D%228.8%22%20rx%3D%222.2%22%2F%3E%3Cpath%20d%3D%22M10.2%204.2v3.4M13.8%204.2v3.4M10.2%2016.4v3.4M13.8%2016.4v3.4M4.2%2010.2h3.4M4.2%2013.8h3.4M16.4%2010.2h3.4M16.4%2013.8h3.4%22%2F%3E%3C%2Fsvg%3E");
  }

  .lux-reference-nav .lux-mega .lux-ic-sales > .wp-block-navigation-item__content {
    --lux-svc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2012.6V5.4a1.4%201.4%200%200%201%201.4-1.4h7.2l7.4%207.4a1.6%201.6%200%200%201%200%202.3l-5.3%205.3a1.6%201.6%200%200%201-2.3%200z%22%2F%3E%3Ccircle%20cx%3D%228.6%22%20cy%3D%228.6%22%20r%3D%221.5%22%2F%3E%3C%2Fsvg%3E");
  }

  .lux-reference-nav .lux-mega .lux-ic-security > .wp-block-navigation-item__content {
    --lux-svc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203.2l7%202.9v5.8c0%204.4-2.9%207.9-7%209.1-4.1-1.2-7-4.7-7-9.1V6.1z%22%2F%3E%3Cpath%20d%3D%22M9.1%2012.1l2.1%202.1%203.8-4%22%2F%3E%3C%2Fsvg%3E");
  }

}

/* ---------------------------------------------------------------------------
   The article CTA, centred
   ---------------------------------------------------------------------------
   On a service page this card is scanned across the width of the page, so the
   two column split works: read the pitch on the left, reach for the action on
   the right. Inside an article it sits in a column of prose that is read
   straight down the middle, and that same split makes the eye jump sideways for
   the one thing the card is asking for.

   So in a post it becomes one centred object: eyebrow, heading, then the two
   controls side by side where the lead paragraph used to be.

   `display: contents` on the two wrappers is what makes that possible without
   touching the markup. The eyebrow, heading, button, phone chip and reassurance
   become direct children of the card and can be ordered freely, so the same
   block serves both layouts and an editor still sees one CTA.

   Scoped to body.single-post, which is the blog. Portfolio cases are lux_work
   and carry single-lux_work, so they keep the two column card.
   --------------------------------------------------------------------------- */

body.single-post .lux-services-cta:not(.lux-blog-cta) {
  grid-template-columns: repeat(2, minmax(0, max-content));
  justify-content: center;
  justify-items: center;
  /* The page gap is sized for two tall columns and is far too loose once this
     is a stack of short rows. */
  gap: 12px 14px;
  text-align: center;
}

body.single-post .lux-services-cta:not(.lux-blog-cta) > .lux-services-cta__copy,
body.single-post .lux-services-cta:not(.lux-blog-cta) > .lux-services-cta__aside {
  display: contents;
}

/* A display:contents box carries neither position nor z-index, so the lift that
   used to keep the two wrappers above the card's sheen has to move down onto
   the children that are now the grid items. */
body.single-post .lux-services-cta:not(.lux-blog-cta)
  :is(
    .lux-services-cta__eyebrow,
    .lux-services-cta__title,
    .lux-services-cta__actions,
    .lux-svc-cta__phone,
    .lux-services-cta__availability,
    .lux-svc-cta__trust
  ) {
  position: relative;
  z-index: 1;
}

body.single-post .lux-services-cta:not(.lux-blog-cta) .lux-services-cta__eyebrow {
  order: 1;
  grid-column: 1 / -1;
  margin-bottom: 0 !important;
}

body.single-post .lux-services-cta:not(.lux-blog-cta) .lux-services-cta__title {
  order: 2;
  grid-column: 1 / -1;
  max-width: 34ch;
}

/* The buttons take this line, which is what the heading now leads into. */
body.single-post .lux-services-cta:not(.lux-blog-cta) .lux-services-cta__lead {
  display: none;
}

body.single-post .lux-services-cta:not(.lux-blog-cta) .lux-services-cta__actions {
  order: 3;
  grid-column: 1;
  margin-top: 10px !important;
}

body.single-post .lux-services-cta:not(.lux-blog-cta) .lux-svc-cta__phone {
  order: 4;
  grid-column: 2;
  margin-top: 10px !important;
}

body.single-post .lux-services-cta:not(.lux-blog-cta) .lux-services-cta__availability {
  order: 5;
  grid-column: 1 / -1;
}

body.single-post .lux-services-cta:not(.lux-blog-cta) .lux-svc-cta__trust {
  order: 6;
  grid-column: 1 / -1;
  /* Stretched rather than centred as a box, so the rule above it spans the card
     instead of being only as wide as the three labels. */
  justify-self: stretch;
  justify-content: center;
}

/* Below this the two controls no longer fit side by side without shrinking
   under the 260px they are designed around, so they stack. */
@media (max-width: 639px) {
  body.single-post .lux-services-cta:not(.lux-blog-cta) {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stretched, not centred. The card centres its items, and these two size
     themselves differently: the button grows to fit its label while the phone
     chip sits at its 260px floor. Centred, that reads as two controls of
     different widths stacked out of line with each other. Given the full column
     they match, which is the only alignment that looks deliberate. */
  body.single-post .lux-services-cta:not(.lux-blog-cta) .lux-services-cta__actions,
  body.single-post .lux-services-cta:not(.lux-blog-cta) .lux-svc-cta__phone {
    grid-column: 1;
    justify-self: stretch;
    width: 100%;
  }

  body.single-post .lux-services-cta:not(.lux-blog-cta) .lux-services-cta__actions > .wp-block-button,
  body.single-post .lux-services-cta:not(.lux-blog-cta) .lux-services-cta__actions > .wp-block-button > .wp-block-button__link,
  body.single-post .lux-services-cta:not(.lux-blog-cta) .lux-svc-cta__phone a {
    width: 100%;
    min-width: 0;
  }

  body.single-post .lux-services-cta:not(.lux-blog-cta) .lux-svc-cta__phone {
    margin-top: 0 !important;
  }
}

/* ---------------------------------------------------------------------------
   Author certificates
   ---------------------------------------------------------------------------
   Credentials sit under the author card, inside the dark intro panel, as an
   ordinary row of image blocks. Ordinary on purpose: an editor adds, swaps or
   removes one in Site Editor > Templates > Author with the image block they
   already know, and nothing here counts them or names them.

   The certificates are 900x690, which is the ratio the reference gallery was
   already built around, so the frame follows the image rather than cropping it.
   --------------------------------------------------------------------------- */

/* The card and the certificates read as one line: who this is, then a rule,
   then what they are certified in. The rule is the certificates' own left
   border rather than a separate element, so it cannot fall out of step with
   the block it divides, and it disappears with it when the block is removed. */
.lux-author-headline {
  display: flex;
  /* Deliberately not allowed to wrap on its own. Flex wrapping happens at
     whatever width the certificates happen to add up to, and CSS cannot see
     that it has happened, so the vertical rule below would stay switched on
     next to a block that is no longer beside anything. The media query owns
     the change of layout instead, and owns the rule with it. */
  flex-wrap: nowrap;
  gap: clamp(20px, 3vw, 38px);
  align-items: center;
}

.lux-author-headline > .lux-author-card {
  /* Takes the room the certificates leave, and is allowed to shrink: without
     min-width:0 a long bio would push the certificates off the panel. */
  flex: 1 1 340px;
  min-width: 0;
}

.lux-author-certificates {
  flex: 0 1 auto;
  padding-left: clamp(20px, 3vw, 38px);
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.lux-author-certificates__label {
  margin: 0 0 12px !important;
  color: rgba(167, 220, 255, 0.92);
  font-family: "FiraGO Latin", "BPG Mrgvlovani Caps", "Sylfaen", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

.lux-author-certificates__row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* A fixed basis rather than a column count, so a third certificate wraps onto
   the next line at the same size instead of squeezing the other two. */
.lux-author-certificates__row > .lux-author-certificate {
  flex: 0 1 clamp(150px, 20vw, 208px);
  margin: 0 !important;
}

.lux-author-certificates__row > .lux-author-certificate img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--lux-radius-sm);
  /* The certificates are light documents on a dark panel. A plain edge reads as
     a sticker; the inset shadow seats them on the surface. */
  box-shadow:
    0 10px 26px rgba(2, 10, 28, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Once the two sit under the card rather than beside it, a vertical rule has
   nothing to divide, so it lies down and becomes the line between them. The
   breakpoint sits above the width where the row would otherwise wrap by itself,
   so there is no band where the two disagree. */
@media (max-width: 1023px) {
  .lux-author-headline {
    flex-wrap: wrap;
  }

  .lux-author-certificates {
    width: 100%;
    padding-top: clamp(18px, 2.4vw, 24px);
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    border-left: 0;
  }
}

@media (max-width: 479px) {
  .lux-author-certificates__row > .lux-author-certificate {
    flex-basis: calc(50% - 7px);
  }
}

/* ---------------------------------------------------------------------------
   Graphic design galleries
   ---------------------------------------------------------------------------
   Three galleries, one per format, because the work was made in three formats
   and the format is part of it. A square social post, a 9:16 story and a wide
   banner forced into one grid means cropping two of the three, and in a design
   portfolio the crop is the one thing that must not be taken.

   So the square and story grids fix the ratio their own work already shares,
   and the wide grid lets each image keep its natural height. Nothing here
   counts the images: a fourth post or a ninth story needs no change.
   --------------------------------------------------------------------------- */

/* The section box centres its own contents rather than relying on the surface
   style to do it. The denim and soft bands already carry that centring, but
   `lux-bare` is the "no background" style and carries nothing, so on the white
   section everything sat flush against the left edge of the viewport and the
   first column was cut off. Scoped to this section, so the three surfaces read
   identically whichever one an editor picks. */
/* The section is full bleed so its surface reaches both edges, but nothing was
   holding its contents off them. Above 1440px the centred max-width hid that;
   below it the gallery ran straight into the side of the screen. The page
   gutter is the same one the rest of the layout uses, so the galleries line up
   with the sections above and below them. */
.lux-design-section {
  padding-inline: var(--lux-page-gutter);
}

.lux-design-section > * {
  margin-inline: auto;
}

/* The heading and the intro set their own margins with !important, which on
   the bare surface left them pinned to the left while the gallery beside them
   centred. Marking only the inline axis keeps the bottom margin each of them
   relies on. */
.lux-design-section > .wp-block-heading,
.lux-design-section > .lux-svc-section__intro {
  max-width: min(1440px, 100%);
  margin-inline: auto !important;
}

.lux-design-section > p.lux-svc-section__intro {
  max-width: min(750px, 100%);
  text-align: center;
}

.lux-design-gallery {
  display: grid !important;
  gap: clamp(10px, 1.2vw, 16px) !important;
  width: 100%;
  /* No `margin: 0` here. The constrained layout centres this block with
     `margin-inline: auto !important`, and a blanket zero margin later in the
     cascade beat it, which is what pinned the whole gallery to the left edge
     of the viewport. Only the block margins are flattened. */
  margin-block: 0 !important;
}

.lux-design-gallery .wp-block-image {
  width: 100% !important;
  margin: 0 !important;
}

.lux-design-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--lux-radius-sm);
  object-fit: cover;
}

/* Squares: the social posts, all 1:1 already, so the frame states the ratio
   rather than imposing one. */
.lux-design-gallery--square {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lux-design-gallery--square .wp-block-image {
  aspect-ratio: 1 / 1;
}

/* Stories, at the shape a phone actually shows them in. */
.lux-design-gallery--story {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lux-design-gallery--story .wp-block-image {
  aspect-ratio: 9 / 16;
}

/* The wide work arrives at mixed ratios, from a 1200x628 share card to a
   2000x1143 billboard. Left at their natural heights the rows came out ragged
   and the odd ones read as mistakes, so the frame states one ratio, the one
   most of this set already is, and the few that are taller give up a little
   top and bottom. An even grid is worth more here than an uncropped billboard
   mock-up. */
.lux-design-gallery--wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lux-design-gallery--wide .wp-block-image {
  aspect-ratio: 1200 / 630;
}

/* Every design here has its own ground, often a white one, so without an edge
   it bleeds into the section behind it. The edge borrows from the surface it
   sits on rather than being one colour: light on the band, dark on paper. */
.lux-design-section .lux-design-gallery img {
  border: 1px solid rgba(2, 10, 28, 0.12);
}

.lux-design-section.is-style-lux-denim .lux-design-gallery img {
  border-color: rgba(255, 255, 255, 0.12);
}

@media (max-width: 1023px) {
  .lux-design-gallery--square,
  .lux-design-gallery--story {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .lux-design-gallery--square,
  .lux-design-gallery--story {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lux-design-gallery--wide {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Results overview, adapted from approved preview. */

@font-face{font-family:LuxGrid;src:url("assets/results/results-grid.woff2") format('woff2');font-weight:400;font-style:normal;font-display:swap}
#lux-results-grid{--lux-navy:#082447;--lux-deep:#061a35;--lux-blue:#147cf3;--lux-ink:#0b213d;--lux-muted:#5a6d85;--lux-line:#dce6f1;--lux-paper:#f1f6fc;--lux-radius:22px;--lux-gap:14px;container-type:inline-size;font-family:LuxGrid,Arial,sans-serif;color:var(--lux-ink);font-weight:400;padding:8px 0 18px}
#lux-results-grid *{box-sizing:border-box}
#lux-results-grid h2,#lux-results-grid h3,#lux-results-grid p{margin:0;font:inherit;color:inherit}
#lux-results-grid button{font-family:inherit;font-weight:400}
#lux-results-grid [hidden]{display:none!important}
#lux-results-grid .lux-grid-heading{margin-bottom:22px;padding-right:94px}
#lux-results-grid .lux-grid-heading h2{font-size:clamp(26px,4.4cqw,46px);line-height:1.25;letter-spacing:-1px}
#lux-results-grid .lux-grid-heading p{font-size:13px;line-height:1.6;color:var(--lux-muted);margin-top:8px}
#lux-results-grid .lux-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--lux-gap);align-items:stretch}
#lux-results-grid .lux-tile{border-radius:var(--lux-radius);position:relative;min-width:0;isolation:isolate;overflow:hidden;border:1px solid var(--lux-line);background:#fff;padding:24px;transition:transform .3s,border-color .3s,box-shadow .3s;transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));box-shadow:0 5px 18px #08244705}
#lux-results-grid .lux-tile:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(260px circle at var(--mouse-x,50%) var(--mouse-y,20%),#147cf30c,transparent 70%);opacity:0;transition:opacity .3s}
#lux-results-grid .lux-tile:hover:after{opacity:1}
#lux-results-grid .lux-tile:hover{border-color:#aacbf1;box-shadow:0 12px 28px #0824470b}
#lux-results-grid .lux-tile-label{display:flex;align-items:center;gap:9px;font-size:13px;line-height:1.5}
#lux-results-grid .lux-tile-label svg{width:17px;height:17px;flex:none}
#lux-results-grid .lux-rank{grid-column:span 8;background:linear-gradient(145deg,#0c3260,#071d3b);border-color:#14365d;color:#fff;min-height:426px;padding:25px}
#lux-results-grid .lux-rank:after{background:radial-gradient(300px circle at var(--mouse-x,50%) var(--mouse-y,20%),#218bff28,transparent 70%)}
#lux-results-grid .lux-rank .lux-tile-label{color:#c5dbf3}
#lux-results-grid .lux-rank .lux-tile-label svg{color:#73b5ff}
#lux-results-grid .lux-rank-hero{display:flex;align-items:center;gap:22px;margin:14px 0 17px;min-height:106px}
#lux-results-grid .lux-first{font-size:clamp(76px,13cqw,150px);line-height:.95;letter-spacing:-7px;color:#fff;flex:none}
#lux-results-grid .lux-first span{color:#6ab0ff;font-size:.68em;vertical-align:8%;letter-spacing:-5px}
#lux-results-grid .lux-selected-result{min-width:0;flex:1}
#lux-results-grid .lux-selected-result h3{font-size:clamp(19px,3cqw,34px);line-height:1.3;letter-spacing:-.5px;overflow-wrap:anywhere}
#lux-results-grid .lux-selected-result p{color:#abc5e4;font-size:13px;line-height:1.5;margin-top:5px;overflow-wrap:anywhere}
#lux-results-grid .lux-proof-trigger{display:inline-flex;align-items:center;gap:5px;padding:0;min-height:34px;border:0;background:none;color:#95c6ff;font-size:11px;line-height:1.4;text-align:left}
#lux-results-grid .lux-proof-trigger svg{width:13px;height:13px}
#lux-results-grid .lux-proof-reserve{min-height:34px}
#lux-results-grid .lux-site-list{display:grid;gap:7px}
#lux-results-grid .lux-site{display:grid;grid-template-columns:27px minmax(0,1fr) auto;align-items:center;gap:11px;width:100%;border:1px solid #ffffff14;background:#ffffff04;color:#fff;text-align:left;padding:10px 12px;border-radius:11px;min-height:60px;transition:background .25s,border-color .25s,transform .25s}
#lux-results-grid .lux-site:hover{background:#ffffff0b;transform:translateX(2px)}
#lux-results-grid .lux-site[aria-pressed="true"]{background:#15406c;border-color:#3f82c2}
#lux-results-grid .lux-site-monogram{display:grid;place-items:center;width:27px;height:29px;border-radius:6px;border:1px solid #ffffff20;color:#a9caed;font:14px/1 Arial,sans-serif}
#lux-results-grid .lux-site[aria-pressed="true"] .lux-site-monogram{background:#e8f3ff;color:#09284b;border-color:#e8f3ff}
#lux-results-grid .lux-site-domain{display:block;font-size:14px;line-height:1.35;overflow-wrap:anywhere}
#lux-results-grid .lux-site-keyword{display:block;color:#a7c0dd;font-size:11px;line-height:1.4;margin-top:2px;overflow-wrap:anywhere}
#lux-results-grid .lux-site-rank{font-size:16px;line-height:1;color:#7cbaff}
#lux-results-grid .lux-budget{grid-column:span 4;display:flex;flex-direction:column;min-height:426px;background:#f4f8fe}
#lux-results-grid .lux-budget-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;color:var(--lux-blue);background:#e2eeff;margin-bottom:19px}
#lux-results-grid .lux-budget-icon svg{width:21px;height:21px}
#lux-results-grid .lux-budget h3{font-size:19px;line-height:1.35;letter-spacing:-.4px;max-width:240px}
#lux-results-grid .lux-budget-number{font-size:clamp(32px,5.3cqw,80px);line-height:1.1;letter-spacing:-2px;white-space:nowrap;margin-top:auto;padding-top:32px;margin-bottom:16px}
#lux-results-grid .lux-budget-number .lux-dollar{color:var(--lux-blue);font-size:.65em;vertical-align:12%;margin-right:2px;letter-spacing:-1px}
#lux-results-grid .lux-budget-number .lux-plus{font-size:.6em;vertical-align:15%;color:var(--lux-blue);margin-left:2px;letter-spacing:0}
#lux-results-grid .lux-budget-note{font-size:12px!important;line-height:1.6!important;color:var(--lux-muted)!important;margin-top:13px!important;padding-top:16px;border-top:1px solid var(--lux-line)}
/* Passive geography artwork: paths flow from Georgia without map controls. */
#lux-results-grid .lux-map{--lux-map-water:#edf4fc;--lux-map-land:#b8cce1;--lux-map-country:#f6f9fd;--lux-map-region:#6b9fd1;--lux-map-route:#147cf3;grid-column:span 6;min-height:360px;background:var(--lux-map-water);padding:24px;display:flex;flex-direction:column}
#lux-results-grid .lux-map-head{display:flex;align-items:center;justify-content:space-between;gap:9px}
#lux-results-grid .lux-map-head h3{font-size:16px;line-height:1.45;letter-spacing:-.25px}
#lux-results-grid .lux-map-head svg{width:17px;height:17px;color:var(--lux-map-route);flex:none}
#lux-results-grid .lux-map .lux-world{width:100%;height:auto;min-height:270px;flex:1;display:block;margin:16px 0 0;overflow:hidden;border-radius:14px;background:transparent;cursor:default;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;pointer-events:none}
#lux-results-grid .lux-map-base{fill:var(--lux-map-land);stroke:var(--lux-map-country);stroke-width:.6;vector-effect:non-scaling-stroke}
#lux-results-grid .lux-map-borders{fill:none;stroke:var(--lux-map-country);stroke-width:.6;vector-effect:non-scaling-stroke;pointer-events:none}
#lux-results-grid .lux-map-area{fill:var(--lux-map-region);stroke:var(--lux-map-country);stroke-width:.7;vector-effect:non-scaling-stroke}
#lux-results-grid .lux-map-route{fill:none;stroke:var(--lux-map-route);stroke-width:1.3;stroke-linecap:round;opacity:.38;vector-effect:non-scaling-stroke;pointer-events:none}
#lux-results-grid .lux-map-route-flow{fill:none;stroke:var(--lux-map-route);stroke-width:2.3;stroke-linecap:round;stroke-dasharray:.075 .925;stroke-dashoffset:1;vector-effect:non-scaling-stroke;pointer-events:none;animation:lux-map-route-loop 8s linear infinite;animation-play-state:paused}
#lux-results-grid .lux-map-dot{fill:var(--lux-map-route);stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke}
#lux-results-grid .lux-map-halo{fill:#147cf31a;stroke:#147cf340;stroke-width:1;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;animation:lux-map-location-pulse 4s ease-out infinite;animation-play-state:paused}
#lux-results-grid .lux-map.is-map-visible :is(.lux-map-route-flow,.lux-map-halo){animation-play-state:running}
@keyframes lux-map-route-loop{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes lux-map-location-pulse{0%{transform:scale(.8);opacity:.5}75%,100%{transform:scale(1.5);opacity:0}}
@media(prefers-reduced-motion:reduce){#lux-results-grid .lux-map-route-flow{animation:none;stroke-dashoffset:0;opacity:0}#lux-results-grid .lux-map-halo{animation:none;transform:none;opacity:.5}}
#lux-results-grid .lux-projects{grid-column:span 3;min-height:282px;display:flex;flex-direction:column;justify-content:space-between;background:#fff;padding:22px}
#lux-results-grid .lux-small-icon{width:28px;height:28px;display:grid;place-items:center;color:var(--lux-blue)}
#lux-results-grid .lux-small-icon svg{width:23px;height:23px}
#lux-results-grid .lux-projects-value{font-size:clamp(48px,8cqw,110px);line-height:1;letter-spacing:-3px;margin-top:24px}
#lux-results-grid .lux-projects-value small{font:inherit;font-size:.6em;color:var(--lux-blue);vertical-align:12%;margin-left:2px}
#lux-results-grid .lux-small-label{font-size:13px!important;line-height:1.5!important;margin-top:13px!important}
#lux-results-grid .lux-satisfaction{grid-column:span 3;min-height:282px;padding:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#fff}
#lux-results-grid .lux-satisfaction-ring{width:126px;height:126px;position:relative;display:grid;place-items:center}
#lux-results-grid .lux-satisfaction-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
#lux-results-grid .lux-ring-track{fill:none;stroke:#e6eef9;stroke-width:6}
#lux-results-grid .lux-ring-fill{fill:none;stroke:var(--lux-blue);stroke-width:6;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:5}
#lux-results-grid .lux-satisfaction-value{font-size:40px;line-height:1;letter-spacing:-1.7px}
#lux-results-grid .lux-satisfaction-value small{font-size:.5em;letter-spacing:0;margin-left:1px}
#lux-results-grid .lux-satisfaction .lux-small-label{max-width:150px;margin-top:18px!important}
#lux-results-grid .lux-rank-proof{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;gap:13px;background:#fff;color:var(--lux-ink);padding:22px;border-radius:inherit}
#lux-results-grid .lux-rank-proof-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
#lux-results-grid .lux-rank-proof h3{font-size:15px;line-height:1.4}
#lux-results-grid .lux-proof-close{display:grid;place-items:center;min-height:38px;min-width:38px;border:1px solid var(--lux-line);border-radius:8px;background:#fff;color:var(--lux-ink)}
#lux-results-grid .lux-proof-close svg{width:16px;height:16px}
#lux-results-grid .lux-rank-proof-image{flex:1;min-height:0;position:relative;background:#202124;overflow:hidden;border-radius:9px}
#lux-results-grid .lux-rank-proof-image img{position:absolute;max-width:none;display:block}
#lux-results-grid .lux-proof-caption{font-size:11px!important;line-height:1.6!important;color:var(--lux-muted)!important}
#lux-results-grid .lux-proof-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
#lux-results-grid .lux-full-proof{border:0;background:none;color:var(--lux-blue);padding:5px 0;min-height:32px;font-size:11px;line-height:1.4}
#lux-results-grid .lux-live{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@container(min-width:1000px){#lux-results-grid .lux-world{height:260px}#lux-results-grid .lux-map{min-height:420px}}
@container(max-width:600px){
 #lux-results-grid .lux-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
 #lux-results-grid .lux-rank{grid-column:1/-1;min-height:0;padding:22px}
 #lux-results-grid .lux-rank-hero{margin:14px 0 18px;gap:20px;min-height:112px}
 #lux-results-grid .lux-first{font-size:94px;letter-spacing:-6px}
 #lux-results-grid .lux-selected-result h3{font-size:22px}
 #lux-results-grid .lux-site{min-height:64px}
 #lux-results-grid .lux-budget{grid-column:1/-1;min-height:200px;display:grid;grid-template-columns:1fr auto;column-gap:20px;align-items:center;padding:22px}
 #lux-results-grid .lux-budget-icon{margin:0 0 14px;grid-column:1;grid-row:1}
 #lux-results-grid .lux-budget h3{grid-column:1;grid-row:2;font-size:19px}
 #lux-results-grid .lux-budget-number{grid-column:2;grid-row:1/3;padding-top:0;margin:0;font-size:42px}
 #lux-results-grid .lux-budget-note{grid-column:1/-1;margin-top:19px!important;padding-top:12px}
 #lux-results-grid .lux-map{grid-column:1/-1;order:5;min-height:360px;padding:20px}
 #lux-results-grid .lux-world{height:200px}
 #lux-results-grid .lux-region{min-height:44px;font-size:12px}
 #lux-results-grid .lux-projects{grid-column:span 1;min-height:215px;order:3;padding:20px}
 #lux-results-grid .lux-projects-value{font-size:61px}
 #lux-results-grid .lux-satisfaction{grid-column:span 1;min-height:215px;order:4;padding:20px}
 #lux-results-grid .lux-satisfaction-ring{width:104px;height:104px}
 #lux-results-grid .lux-satisfaction-value{font-size:36px}
 #lux-results-grid .lux-small-label{font-size:13px!important}
 #lux-results-grid .lux-satisfaction .lux-small-label{margin-top:14px!important}
}
@container(max-width:380px){
 #lux-results-grid .lux-grid-heading{padding-right:68px;margin-bottom:18px}
 #lux-results-grid .lux-grid-heading h2{font-size:27px}
 #lux-results-grid .lux-grid-heading p{font-size:12px}
 #lux-results-grid .lux-tile{padding:18px}
 #lux-results-grid .lux-rank .lux-tile-label{font-size:12px;gap:7px}
 #lux-results-grid .lux-rank-hero{gap:13px;min-height:110px}
 #lux-results-grid .lux-first{font-size:79px;letter-spacing:-5px}
 #lux-results-grid .lux-selected-result h3{font-size:19px}
 #lux-results-grid .lux-selected-result p{font-size:12px}
 #lux-results-grid .lux-site{padding:10px;gap:9px;min-height:64px}
 #lux-results-grid .lux-site-domain{font-size:13px}
 #lux-results-grid .lux-site-keyword{font-size:11px}
 #lux-results-grid .lux-budget{display:flex;align-items:flex-start;min-height:230px}
 #lux-results-grid .lux-budget h3{font-size:18px;max-width:none}
 #lux-results-grid .lux-budget-icon{margin:0 0 13px;width:34px;height:34px;border-radius:9px}
 #lux-results-grid .lux-budget-number{font-size:44px;margin:19px 0 0;letter-spacing:-2px}
 #lux-results-grid .lux-budget-note{margin-top:14px!important;width:100%}
 #lux-results-grid .lux-projects-value{font-size:49px;letter-spacing:-2px}
 #lux-results-grid .lux-projects,#lux-results-grid .lux-satisfaction{min-height:210px;padding:17px 12px}
 #lux-results-grid .lux-satisfaction-ring{width:89px;height:89px}
 #lux-results-grid .lux-satisfaction-value{font-size:32px}
 #lux-results-grid .lux-small-label{font-size:12px!important}
 #lux-results-grid .lux-map{min-height:360px}
 #lux-results-grid .lux-map-head h3{font-size:15px}
 #lux-results-grid .lux-region{padding:7px;font-size:11px}
 #lux-results-grid .lux-rank-proof{padding:18px}
 #lux-results-grid .lux-rank-proof h3{font-size:13px}
 #lux-results-grid .lux-proof-trigger,#lux-results-grid .lux-full-proof,#lux-results-grid .lux-proof-close{min-height:44px}
}
@media(prefers-reduced-motion:reduce){#lux-results-grid *,#lux-results-grid *:before,#lux-results-grid *:after{animation:none!important;transition:none!important}#lux-results-grid .lux-tile{transform:none!important}}
@media(pointer:coarse){
 #lux-results-grid .lux-map-control{min-height:44px;min-width:40px}
 #lux-results-grid .lux-map-toolbar{min-height:44px}
 #lux-results-grid .lux-map-hint{display:none}
 #lux-results-grid .lux-map-toggle{display:inline-flex}
 #lux-results-grid .lux-map-controls{display:none}
 #lux-results-grid .lux-map.is-touch-active .lux-map-controls{display:flex}
 #lux-results-grid .lux-world{touch-action:pan-y pinch-zoom;cursor:default}
 #lux-results-grid .lux-map.is-touch-active .lux-world{touch-action:none;cursor:grab}
}

.lux-results-archive #lux-results-grid, .lux-home-results #lux-results-grid{width:calc(100% - 64px);max-width:1440px;margin:48px auto;padding-bottom:24px}
#lux-results-grid .lux-grid-heading{padding-right:0}
@media(max-width:600px){.lux-results-archive #lux-results-grid, .lux-home-results #lux-results-grid{width:calc(100% - 32px);margin:28px auto}}

.lux-home-results{padding:24px 0;background:var(--lux-white,#fff)}

#lux-results-grid{--lux-control-icon-fill:none;scroll-margin-top:100px}
#lux-results-grid .lux-tile{--lux-surface-heading:var(--lux-ink)}
#lux-results-grid .lux-rank{--lux-surface-heading:#fff}
#lux-results-grid .lux-proof-close{scroll-margin-block:110px}
#real-results{scroll-margin-top:90px}
#lux-results-grid .lux-rank-proof{--lux-surface-heading:var(--lux-ink)}

/* Keep the results overview proportionate across wide desktop layouts. */
@container (min-width: 1200px) {
  #lux-results-grid .lux-bento { gap: 18px; }
  #lux-results-grid .lux-tile { padding: 28px; border-radius: 25px; }
  #lux-results-grid .lux-rank,
  #lux-results-grid .lux-budget { min-height: 476px; }
  #lux-results-grid .lux-rank-hero { margin: 20px 0 22px; gap: 26px; min-height: 120px; }
  #lux-results-grid .lux-tile-label { font-size: 15px; }
  #lux-results-grid .lux-site { min-height: 67px; padding: 12px 14px; gap: 13px; }
  #lux-results-grid .lux-site-domain { font-size: 16px; }
  #lux-results-grid .lux-site-keyword,
  #lux-results-grid .lux-proof-trigger { font-size: 12px; }
  #lux-results-grid .lux-selected-result p { font-size: 15px; }
  #lux-results-grid .lux-budget h3 { font-size: 22px; max-width: 280px; }
  #lux-results-grid .lux-map { min-height: 460px; }
  #lux-results-grid .lux-world { height: 290px; }
  #lux-results-grid .lux-map-head h3 { font-size: 18px; }
  #lux-results-grid .lux-map-hint { font-size: 12px; }
  #lux-results-grid .lux-region { min-height: 44px; font-size: 12px; }
  #lux-results-grid .lux-small-label { font-size: 15px !important; }
  #lux-results-grid .lux-satisfaction-ring { width: 144px; height: 144px; }
  #lux-results-grid .lux-satisfaction-value { font-size: 46px; }
}
/* Evidence is a primary action within a result, with a clear focus target. */
#lux-results-grid .lux-proof-reserve { min-height: 52px; margin-top: 12px; }
#lux-results-grid .lux-proof-trigger {
  min-height: 44px;
  padding: 10px 15px;
  gap: 9px;
  border: 1px solid rgba(149, 198, 255, .48);
  border-radius: 10px;
  background: rgba(149, 198, 255, .06);
  color: #c4e1ff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: none;
  cursor: pointer;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
#lux-results-grid .lux-proof-trigger svg { width: 17px; height: 17px; fill: none; }
#lux-results-grid .lux-proof-trigger:hover {
  background: rgba(149, 198, 255, .14);
  color: #c4e1ff;
  border-color: #95c6ff;
  box-shadow: none;
}
#lux-results-grid .lux-proof-trigger:focus-visible {
  color: #c4e1ff;
  outline: 3px solid #fff;
  outline-offset: 4px;
}
#lux-results-grid .lux-first { display: flex; flex-direction: column; align-items: center; gap: 9px; letter-spacing: -5px; }
#lux-results-grid .lux-first small { font-size: 13px; line-height: 1.4; letter-spacing: 0; color: #9ccaff; }
#lux-results-grid .lux-site-rank { white-space: nowrap; font-size: 14px; }
#lux-results-grid .lux-reviews-icon{width:72px;height:72px;color:var(--lux-blue);margin-bottom:18px}
#lux-results-grid .lux-reviews .lux-small-label{max-width:200px;margin-top:0!important;font-size:20px!important;line-height:1.4!important}
#lux-results-grid .lux-reviews-copy{font-size:13px;line-height:1.6;color:var(--lux-muted);margin-top:10px}
#lux-results-grid .lux-reviews-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin-top:20px;padding:8px 12px;border:1px solid var(--lux-line);border-radius:9px;font-size:13px;line-height:1.4;color:var(--lux-blue);text-decoration:none}
#lux-results-grid .lux-reviews-link:hover{background:var(--lux-paper);border-color:var(--lux-blue)}
#lux-results-grid .lux-reviews-link:focus-visible{outline:2px solid var(--lux-blue);outline-offset:4px}
#client-reviews{scroll-margin-top:100px}
@container(max-width:600px){#lux-results-grid .lux-reviews{padding:18px 12px}#lux-results-grid .lux-reviews-icon{width:46px;height:46px;margin-bottom:12px}#lux-results-grid .lux-reviews .lux-small-label{font-size:16px!important}#lux-results-grid .lux-reviews-copy{font-size:12px}#lux-results-grid .lux-reviews-link{font-size:12px;padding:7px 8px;margin-top:12px}}
#lux-results-grid .lux-rank .lux-tile-label{font-size:clamp(18px,1.6cqw,23px);line-height:1.4;gap:10px}
#lux-results-grid .lux-rank .lux-tile-label svg{width:21px;height:21px}
#lux-results-grid .lux-first small{font-size:17px;line-height:1.5;color:#c4e1ff}
#lux-results-grid .lux-site{grid-template-columns:27px minmax(0,1fr)}
#lux-results-grid .lux-map-toolbar{justify-content:flex-end}
@media(pointer:coarse){#lux-results-grid .lux-map-toolbar{justify-content:space-between}}
/* Pair the rank and its caption into one compact editorial marker. */
#lux-results-grid .lux-first {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
#lux-results-grid .lux-first small {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding-inline: 9px;
  padding-block: 7px;
  border-inline: 1px solid rgba(156, 202, 255, .3);
  border-radius: 5px;
  background: rgba(149, 198, 255, .06);
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: .5px;
  color: #b9dcff;
}
@container(max-width:380px){
  #lux-results-grid .lux-first{gap:7px}
  #lux-results-grid .lux-first small{font-size:12px;padding-inline:7px;padding-block:5px}
  #lux-results-grid .lux-rank-hero{gap:14px}
}
/* SEO hero reuses the result card and adds two unquantified growth goals. */
#lux-results-grid.lux-seo-results{width:100%;min-width:0;padding:0;margin:0;color:var(--lux-white);--lux-surface-heading:var(--lux-white)}
#lux-results-grid.lux-seo-results .lux-rank{min-height:0;padding:22px;border-color:rgba(149,198,255,.25);box-shadow:0 16px 50px rgba(0,0,0,.14)}
#lux-results-grid.lux-seo-results .lux-tile-label{font-size:18px}
#lux-results-grid.lux-seo-results .lux-rank-hero{gap:18px;margin:20px 0;min-height:116px}
#lux-results-grid.lux-seo-results .lux-first{font-size:94px;letter-spacing:-5px;gap:8px}
#lux-results-grid.lux-seo-results .lux-first small{font-size:12px}
#lux-results-grid.lux-seo-results .lux-selected-result h3{font-size:clamp(19px,4.4cqw,26px);line-height:1.35}
#lux-results-grid.lux-seo-results .lux-selected-result p{font-size:13px;color:#abc5e4}
#lux-results-grid.lux-seo-results .lux-proof-trigger{font-size:12px;padding:8px 10px}
#lux-results-grid.lux-seo-results .lux-site{min-height:55px;padding:9px 11px}
#lux-results-grid.lux-seo-results .lux-site-domain{font-size:14px}
#lux-results-grid.lux-seo-results .lux-seo-goals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
#lux-results-grid.lux-seo-results .lux-seo-goal{padding:19px 17px;border:1px solid rgba(149,198,255,.2);border-radius:17px;background:rgba(149,198,255,.06)}
#lux-results-grid.lux-seo-results .lux-seo-goal svg{width:28px;height:28px;color:#79baff;margin-bottom:12px}
#lux-results-grid.lux-seo-results .lux-seo-goal h3{font-size:17px;line-height:1.45;color:#e4f2ff}
#lux-results-grid.lux-seo-results .lux-seo-goal p{font-size:12px;line-height:1.6;color:#b2cce7;margin-top:6px}
#lux-results-grid.lux-seo-results .lux-seo-goals-note{font-size:11px;line-height:1.6;color:#9ebcda;margin:10px 4px 0}
.lux-svc-hero__grid:has(.lux-seo-results){align-items:center}
@media(min-width:900px){.lux-svc-hero__grid:has(.lux-seo-results){grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,60px)}}
@container(max-width:380px){#lux-results-grid.lux-seo-results .lux-rank{padding:16px}#lux-results-grid.lux-seo-results .lux-rank-hero{gap:12px}#lux-results-grid.lux-seo-results .lux-first{font-size:76px}#lux-results-grid.lux-seo-results .lux-selected-result h3{font-size:18px}#lux-results-grid.lux-seo-results .lux-tile-label{font-size:16px}#lux-results-grid.lux-seo-results .lux-seo-goal{padding:15px 12px}#lux-results-grid.lux-seo-results .lux-seo-goal h3{font-size:15px}}
/* On desktop, growth goals form a vertical rail beside the ranking proof. */
@media(min-width:1100px){
  .lux-svc-hero__grid:has(.lux-seo-results){grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:36px}
  #lux-results-grid.lux-seo-results{display:grid;grid-template-columns:minmax(0,1fr) minmax(155px,.42fr);column-gap:12px;align-items:stretch}
  #lux-results-grid.lux-seo-results .lux-rank{grid-column:1;grid-row:1}
  #lux-results-grid.lux-seo-results .lux-seo-goals{grid-column:2;grid-row:1;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));margin-top:0}
  #lux-results-grid.lux-seo-results .lux-seo-goal{display:flex;flex-direction:column;justify-content:center;padding:20px 16px}
  #lux-results-grid.lux-seo-results .lux-seo-goal h3{font-size:17px}
  #lux-results-grid.lux-seo-results .lux-seo-goals-note{grid-column:1/-1}
  #lux-results-grid.lux-seo-results .lux-selected-result h3{font-size:22px}
}
/* Separate the SEO copy from the complete evidence block on wide screens. */
@media(min-width:1100px){
  .lux-svc-hero__grid:has(.lux-seo-results){gap:72px}
}
#lux-results-grid.lux-seo-results .lux-seo-growth-value{font-size:clamp(32px,3.1cqw,46px);line-height:1.1;letter-spacing:-1.5px;color:#fff;margin:3px 0 14px;font-variant-numeric:tabular-nums}
#lux-results-grid.lux-seo-results .lux-seo-goal svg{margin-bottom:8px}
@container(max-width:380px){#lux-results-grid.lux-seo-results .lux-seo-growth-value{font-size:30px;margin-bottom:10px}}
/* Service illustration covers retain the complete composition in every card. */
:root{--lux-service-cover-surface:#061a35}
.wp-block-post.type-lux_service :is(.lux-service-media,.lux-post-card__media),
.single-lux_service .lux-single-cover{background:var(--lux-service-cover-surface);overflow:hidden}
.wp-block-post.type-lux_service :is(.lux-service-media,.lux-post-card__media)>a,
.wp-block-post.type-lux_service .lux-post-card__media picture{display:block;width:100%;height:100%}
.wp-block-post.type-lux_service :is(.lux-service-media,.lux-post-card__media) img{
  display:block;width:100%;height:100%;object-fit:contain !important;object-position:50% 50%;
}
.lux-services-featured .wp-block-post.type-lux_service .lux-service-media{min-height:0;align-self:stretch}
.lux-services-featured .wp-block-post.type-lux_service .lux-service-media::after,
.lux-services-list>.wp-block-post.type-lux_service .lux-service-media::after{display:none}
.single-lux_service .lux-single-cover{aspect-ratio:16/9}
.single-lux_service .lux-single-cover img{width:100%;height:100%;object-fit:contain !important;object-position:50% 50%}
.wp-block-post.type-lux_service .lux-service-media{aspect-ratio:3/2}

/* Compact ranking columns: the position belongs beside each project. */
#lux-results-grid .lux-rank .lux-rank-hero { min-height:0; gap:0; margin:18px 0 16px; }
#lux-results-grid .lux-site-list-head { display:grid; grid-template-columns:64px minmax(0,1fr); gap:12px; align-items:center; padding:0 12px 4px; color:#adc9e9; font-size:12px; font-weight:500; line-height:1.5; }
#lux-results-grid .lux-site-list-head > :first-child { text-align:center; border-inline-end:1px solid rgba(160,204,255,.18); }
#lux-results-grid .lux-site-list .lux-site { grid-template-columns:64px minmax(0,1fr); gap:12px; min-height:66px; padding:11px 12px; }
#lux-results-grid .lux-site-position { display:grid; place-items:center; justify-self:stretch; width:100%; height:36px; border:0; border-inline-end:1px solid rgba(160,204,255,.18); border-radius:0; color:#ddecff; background:transparent; font-size:20px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums; }
#lux-results-grid .lux-site[aria-pressed="true"] .lux-site-position { color:#fff; background:transparent; border-color:rgba(194,224,255,.3); }
@container (max-width:380px) {
 #lux-results-grid .lux-site-list-head, #lux-results-grid .lux-site-list .lux-site { grid-template-columns:56px minmax(0,1fr); gap:9px; }
 #lux-results-grid .lux-site-list-head { font-size:11px; }
}

/* Web service: payment milestones, informational maintenance and separate costs. */
.lux-pricing-section .lux-pricing-grid.lux-pricing-grid--four{grid-template-columns:repeat(4,minmax(0,1fr))}
.lux-pricing-grid--four .lux-pricing-card{padding:24px}
.lux-pricing-grid--four .lux-pricing-card__title{font-size:clamp(20px,1.75vw,26px)}
.lux-pricing-grid--four .lux-pricing-card__price-value{font-size:clamp(27px,2.5vw,38px)}
.lux-web-terms{color:var(--lux-pricing-copy)}
.lux-web-terms .lux-web-terms__inner{width:min(100%,1440px);max-width:1440px!important;margin-inline:auto}
.lux-web-terms .lux-web-terms__eyebrow{color:var(--lux-pricing-copy);font-size:12px;font-weight:600;letter-spacing:.05em;margin:0 0 20px}
.lux-web-terms .lux-web-terms__title{margin:0 0 24px!important;font-size:clamp(34px,4vw,60px);line-height:1.3;color:var(--lux-pricing-heading)!important}
.lux-web-terms .lux-web-terms__intro{max-width:560px;margin:0!important;line-height:1.9;color:var(--lux-pricing-copy)}
.lux-web-terms .lux-web-terms__payment-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,100px);align-items:center}
.lux-web-terms .lux-web-terms__payments{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.lux-web-terms .lux-web-terms__step{min-width:0;padding:0 0 0 28px;border-inline-start:1px solid var(--lux-pricing-line)}
.lux-web-terms .lux-web-terms__step-index{font-size:12px;color:var(--lux-pricing-copy);margin:0 0 22px}
.lux-web-terms .lux-web-terms__number{font-family:'FiraGO',sans-serif;font-size:clamp(70px,7vw,116px);font-weight:600;line-height:1;letter-spacing:-5px;color:#7fd3ff;margin:0 0 26px}
.lux-web-terms .lux-web-terms__step h3{margin:0 0 14px!important;font-size:clamp(19px,1.7vw,25px);line-height:1.5;color:var(--lux-pricing-heading)!important}
.lux-web-terms .lux-web-terms__step>p:last-child{font-size:14px;line-height:1.85;color:var(--lux-pricing-copy)}
.lux-web-terms .lux-web-terms__maintenance{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-top:64px;padding:30px 0 0;border-top:1px solid var(--lux-pricing-line)}
.lux-web-terms .lux-web-terms__maintenance .lux-web-terms__eyebrow{margin-bottom:8px}
.lux-web-terms .lux-web-terms__maintenance h3{font-size:23px;line-height:1.5;color:var(--lux-pricing-heading)!important;margin:0 0 8px!important}
.lux-web-terms .lux-web-terms__maintenance-copy>p:last-child{font-size:14px;color:var(--lux-pricing-copy);margin:0}
.lux-web-terms .lux-web-terms__maintenance-rate{display:flex;gap:14px;align-items:baseline;flex-shrink:0}
.lux-web-terms .lux-web-terms__maintenance-price{font-family:'FiraGO',sans-serif;font-size:42px;font-weight:600;line-height:1.2;color:#7fd3ff;margin:0;white-space:nowrap}
.lux-web-terms .lux-web-terms__period{font-size:13px;color:var(--lux-pricing-copy);margin:0}
.lux-web-terms--extras .lux-web-terms__inner>.lux-web-terms__eyebrow{text-align:center}
.lux-web-terms--extras .lux-web-terms__title{max-width:1000px;text-align:center;margin-inline:auto!important;font-size:clamp(30px,3.2vw,46px)}
.lux-web-terms--extras .lux-web-terms__intro{max-width:750px;text-align:center;margin:0 auto 42px!important}
.lux-web-terms .lux-web-terms__extras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.lux-web-terms .lux-web-terms__card{--lux-pricing-heading:#f5faff;--lux-pricing-copy:#b8cee5;--lux-pricing-line:rgba(160,200,240,.2);min-width:0;padding:clamp(24px,2.5vw,38px);border:1px solid var(--lux-pricing-line);border-radius:22px;background:linear-gradient(145deg,#102b4d,#06172e);box-shadow:0 16px 40px rgba(8,27,52,.1)}
.lux-web-terms .lux-web-terms__card h3{color:var(--lux-pricing-heading)!important;font-size:clamp(20px,1.8vw,26px);line-height:1.5;margin:0 0 20px!important}
.lux-web-terms .lux-web-terms__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;padding:22px 0;border-top:1px solid var(--lux-pricing-line);align-items:start}
.lux-web-terms .lux-web-terms__row:last-child{padding-bottom:0}
.lux-web-terms .lux-web-terms__row h4{color:var(--lux-pricing-heading)!important;font-size:16px;line-height:1.6;margin:0 0 7px!important}
.lux-web-terms .lux-web-terms__row p{color:var(--lux-pricing-copy);font-size:13px;line-height:1.8;margin:0}
.lux-web-terms .lux-web-terms__row .lux-web-terms__value{max-width:180px;text-align:right;font-family:'FiraGO',sans-serif;font-size:18px;font-weight:600;line-height:1.5;color:#7fd3ff}
@media(max-width:1199px){.lux-pricing-section .lux-pricing-grid.lux-pricing-grid--four{grid-template-columns:repeat(2,minmax(0,1fr))}.lux-web-terms .lux-web-terms__payment-layout{grid-template-columns:minmax(0,1fr);gap:40px}.lux-web-terms .lux-web-terms__lead{max-width:700px}.lux-web-terms .lux-web-terms__number{font-size:90px}}
@media(max-width:639px){.lux-pricing-section .lux-pricing-grid.lux-pricing-grid--four,.lux-web-terms .lux-web-terms__extras{grid-template-columns:minmax(0,1fr)}.lux-web-terms .lux-web-terms__payments{gap:16px}.lux-web-terms .lux-web-terms__step{padding-inline-start:14px}.lux-web-terms .lux-web-terms__number{font-size:64px;letter-spacing:-3px}.lux-web-terms .lux-web-terms__step h3{font-size:17px}.lux-web-terms .lux-web-terms__step>p:last-child{font-size:12px}.lux-web-terms .lux-web-terms__maintenance{align-items:flex-start;flex-direction:column;gap:20px;margin-top:36px}.lux-web-terms .lux-web-terms__maintenance h3{font-size:21px}.lux-web-terms .lux-web-terms__maintenance-price{font-size:36px}.lux-web-terms .lux-web-terms__row{grid-template-columns:minmax(0,1fr);gap:8px}.lux-web-terms .lux-web-terms__row .lux-web-terms__value{max-width:none;text-align:left}}

/* Payment belongs to the shared pricing introduction; maintenance is informational. */
.lux-pricing-section .lux-pricing-payment-note{max-width:900px;text-align:center;font-size:15px;line-height:1.9;margin:0 auto 34px!important;color:var(--lux-pricing-copy)}
.lux-pricing-payment-note strong{color:var(--lux-pricing-heading);font-weight:600}
.lux-web-terms--extras .lux-web-terms__maintenance-price{color:var(--lux-blue-deep)}

.lux-web-terms .lux-web-terms__row .lux-web-terms__monthly{display:flex;align-items:center;justify-content:flex-end;gap:10px;white-space:nowrap}
.lux-web-terms__monthly .lux-web-terms__month{border-inline-start:1px solid rgba(184,206,229,.3);padding-inline-start:10px;font-size:14px;font-weight:400;line-height:1.2;color:var(--lux-pricing-copy)}
@media(max-width:639px){.lux-web-terms .lux-web-terms__row .lux-web-terms__monthly{justify-content:flex-start}}

@container(max-width:600px){#lux-results-grid .lux-map.lux-map--ambient{min-height:300px}#lux-results-grid .lux-map .lux-world{min-height:230px}}

#lux-results-grid .lux-map-flag{filter:drop-shadow(0 3px 3px rgba(8,36,71,.18));pointer-events:none}
#lux-results-grid .lux-map-flag-frame{fill:#fff;stroke:#cadbed;stroke-width:1;vector-effect:non-scaling-stroke}

/* Match the completed-project label to the advertising-budget title. */
#lux-results-grid .lux-projects .lux-small-label{font-size:19px!important;line-height:1.35!important;letter-spacing:-.4px}
@container(min-width:1200px){#lux-results-grid .lux-projects .lux-small-label{font-size:22px!important}}
@container(max-width:380px){#lux-results-grid .lux-projects .lux-small-label{font-size:18px!important}}

/* Statistics: value and icon share the top row, title follows a hairline. */
#lux-results-grid .lux-tile:is(.lux-budget,.lux-projects){display:grid;grid-template-columns:minmax(0,1fr) 42px;align-content:start;align-items:start;column-gap:16px;row-gap:22px;min-height:0}
#lux-results-grid .lux-projects>div:not(.lux-small-icon){display:contents}
#lux-results-grid .lux-budget .lux-budget-number,#lux-results-grid .lux-projects .lux-projects-value{grid-column:1;grid-row:1;margin:0;padding:0;line-height:1.05;letter-spacing:-2px}
#lux-results-grid .lux-budget .lux-budget-number{font-size:clamp(34px,3.8cqw,54px)}
#lux-results-grid .lux-projects .lux-projects-value{font-size:clamp(44px,7cqw,80px)}
#lux-results-grid .lux-budget .lux-budget-icon,#lux-results-grid .lux-projects .lux-small-icon{grid-column:2;grid-row:1;width:42px;height:42px;margin:0;display:grid;place-items:center;border-radius:12px;background:#e9f2ff;color:var(--lux-blue)}
#lux-results-grid .lux-projects .lux-small-icon svg{width:23px;height:23px}
#lux-results-grid .lux-budget h3,#lux-results-grid .lux-projects .lux-small-label{grid-column:1/-1;grid-row:2;max-width:none;margin:0!important;padding-top:18px;border-top:1px solid var(--lux-line);line-height:1.4!important}
#lux-results-grid .lux-budget .lux-budget-note{grid-column:1/-1;grid-row:3;border:0;padding:0;margin:-10px 0 0!important}
@container(min-width:601px){#lux-results-grid .lux-rank{min-height:440px}#lux-results-grid .lux-map.lux-map--ambient{min-height:400px}}
@container(max-width:600px){#lux-results-grid .lux-tile.lux-budget{min-height:185px}#lux-results-grid .lux-tile.lux-projects{min-height:190px;grid-template-columns:minmax(0,1fr) 26px;gap:18px 8px}#lux-results-grid .lux-projects .lux-small-icon{width:26px;height:30px;border-radius:8px;background:transparent}#lux-results-grid .lux-projects .lux-small-icon svg{width:22px;height:22px}#lux-results-grid .lux-projects .lux-small-label{padding-top:15px}#lux-results-grid .lux-satisfaction.lux-reviews{min-height:190px}}

/* Stack compact statistics beside the ranking card instead of stretching them. */
@container(min-width:601px){
 #lux-results-grid .lux-bento{grid-template-rows:auto auto auto}
 #lux-results-grid .lux-bento>.lux-rank{grid-column:1/9;grid-row:1/3;min-height:0}
 #lux-results-grid .lux-bento>.lux-budget{grid-column:9/13;grid-row:1}
 #lux-results-grid .lux-bento>.lux-projects{grid-column:9/13;grid-row:2}
 #lux-results-grid .lux-bento>.lux-map{grid-column:1/9;grid-row:3;min-height:360px;height:360px}
 #lux-results-grid .lux-bento>.lux-reviews{grid-column:9/13;grid-row:3;min-height:0}
}
@container(min-width:601px){#lux-results-grid .lux-bento>.lux-map .lux-world{height:260px;min-height:0}}


/* Experience shares the same visual weight as completed projects. */
@container(min-width:601px){
 #lux-results-grid .lux-bento>.lux-rank{grid-column:1/7}
 #lux-results-grid .lux-bento>.lux-budget{grid-column:7/13}
 #lux-results-grid .lux-bento>.lux-projects{grid-column:7/10}
 #lux-results-grid .lux-bento>.lux-experience{grid-column:10/13}
}
@container(max-width:600px){
 #lux-results-grid .lux-bento>.lux-experience{order:3}
 #lux-results-grid .lux-bento>.lux-reviews{grid-column:1/-1;min-height:190px}
}
/* Short lead forms share a compact responsive field layout. */
.lux-form--lead .frm-fluent-form>fieldset{display:grid;min-width:0;grid-template-columns:minmax(0,1fr);gap:20px}
.lux-form--lead .frm-fluent-form>fieldset>.ff-el-group{min-width:0;margin:0}
@media(min-width:640px){
 .lux-form--lead .frm-fluent-form>fieldset{grid-template-columns:repeat(2,minmax(0,1fr))}
 .lux-form--lead .frm-fluent-form>fieldset>.ff-el-group:has(textarea),.lux-form--lead .frm-fluent-form>fieldset>.ff_submit_btn_wrapper{grid-column:1/-1}
}