/* ==========================================================================
   U-LIK COMPONENTS
   Desktop-baseline styles (≥1200px, matches the 1440px Figma canvas) for
   every ulik-* section component. Responsive overrides live in
   ulik-responsive.css — this file intentionally contains no @media queries
   except where a rule only ever needs a single breakpoint tweak that reads
   more clearly inline (documented at each occurrence).
   ========================================================================== */

/* ==========================================================================
   1. HEADER / NAVIGATION — ulik-header
   Figma: node 10:18 "Menu". White bar, 40px x-padding, logo left, links +
   CTA right. Nav font: Poppins Medium 20px black. CTA: #1F4E9E, radius 8px.
   ========================================================================== */
.ulik-header {
  position: relative;
  z-index: var(--ulik-z-header);
  background-color: var(--ulik-color-white);
  width: 100%;
}

.ulik-header--sticky {
  position: sticky;
  top: 0;
}

.ulik-header__inner {
  /* Full-bleed, not centered inside a max-width container (client
     screenshot, 2026-09-09: DevTools showed a large empty auto-margin
     strip on the right of the nav before the true edge of the browser
     window, from the max-width + margin-inline:auto combo below that used
     to be here — client asked for that gap to be "empty" i.e. gone, so the
     nav sits flush against the real right edge of the page at any viewport
     width, not just up to --ulik-container-max). Only the gutter padding
     now controls the left/right inset, same value used everywhere else. */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px var(--ulik-container-gutter);
}

.ulik-header__logo-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.ulik-header__logo {
  width: 191px;
  height: 80px; /* was 105px — client request, 2026-09-25 */
  object-fit: contain;
}

/* Mobile-menu backdrop: only ever meant to be visible (as a fixed, full-
   screen scrim) once ulik-responsive.css adds `.is-open` below 1199px.
   With no default here it falls back to the browser's normal `display:
   block`, which makes it a normal (invisible but space-taking) flex child
   of .ulik-header__inner at desktop widths — it silently ate a flex slot
   and pushed .ulik-nav away from the true right edge instead of letting it
   sit flush there. Hidden unconditionally by default; the responsive
   breakpoint still switches it to display:block(.is-open) when needed. */
.ulik-header__overlay {
  display: none;
}

.ulik-nav {
  display: flex;
  align-items: center;
  margin-left: auto;
}

/* Close button for the slide-out mobile/tablet panel only — hidden here at
   desktop, where .ulik-nav is just the inline link row and has nothing to
   close. Shown and positioned in ulik-responsive.css, at the same
   ≤1199px breakpoint where .ulik-nav itself becomes a fixed panel. */
.ulik-nav__close {
  display: none;
}

.ulik-nav__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 0;
  padding: 0;
}

.ulik-nav__link {
  font-family: var(--ulik-font-body);
  font-weight: var(--ulik-fw-medium);
  font-size: var(--font-size-18);
  line-height: var(--ulik-lh-relaxed);
  color: var(--ulik-color-text);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--ulik-transition-fast);
}

.ulik-nav__link:hover,
.ulik-nav__link:focus-visible {
  color: var(--ulik-color-primary);
}

.ulik-nav__link[aria-current="page"] {
  color: var(--ulik-color-primary);
  font-weight: var(--ulik-fw-semibold);
}

.ulik-nav__cta-item {
  margin-inline-start: var(--ulik-space-1);
}

.ulik-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  /* Pushes the burger to the far right of .ulik-header__inner. Needed
     because .ulik-nav (the element that normally carries margin-left:auto
     to fill the row's remaining space) becomes `position: fixed` at this
     same breakpoint — once it's taken out of normal flow, its auto-margin
     no longer affects its flex siblings, so without this the burger just
     sits immediately next to the logo instead of at the true right edge. */
  margin-left: auto;
}

.ulik-burger__bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--ulik-color-text);
  transition: transform var(--ulik-transition-base), opacity var(--ulik-transition-base);
}

.ulik-burger[aria-expanded="true"] .ulik-burger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.ulik-burger[aria-expanded="true"] .ulik-burger__bar:nth-child(2) {
  opacity: 0;
}
.ulik-burger[aria-expanded="true"] .ulik-burger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   2. HERO — ulik-hero
   Figma: node 12:61 "Hero2" (603px band, full-bleed product-flatlay photo)
   + node 13:158 headline card (white, radius 8, shadow, 30px padding),
   overlapping the bottom of the media band. H1: Poppins ExtraBold 48px,
   second line accent orange (#E97324).
   ========================================================================== */
.ulik-hero {
  position: relative;
  background-color: var(--ulik-color-white);
}

.ulik-hero__media {
  position: relative;
  width: 100%;
  height: 603px;
  overflow: hidden;
  background-color: var(--ulik-color-surface);
}

.ulik-hero__media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ulik-hero__media-img--placeholder {
  object-fit: cover;
  background: linear-gradient(135deg, var(--ulik-color-surface), var(--ulik-color-border));
}

/* ---- Hero photo slider (only rendered once 2+ photos are configured) ----
   Static single-photo hero uses .ulik-hero__media-img directly with no
   wrapper, so it costs nothing extra and cannot shift layout. The slider
   wrapper reuses the exact same media box height/position, so switching
   between 1 and 2+ photos never changes the section's height. */
.ulik-hero__media-slider {
  position: absolute;
  inset: 0;
}

.ulik-hero__media-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.ulik-hero__media-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ulik-transition-base);
}
.ulik-hero__media-slide.is-active {
  opacity: 1;
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .ulik-hero__media-slide {
    transition: none;
  }
}

.ulik-hero__media-slide .ulik-hero__media-img {
  position: absolute;
}

/* Transparent, minimal dot pagination — no arrows, no solid container.
   Active dot renders as a short pill; inactive dots are small circles. */
.ulik-hero__media-dots {
  position: absolute;
  left: 50%;
  bottom: var(--ulik-space-4);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--ulik-space-2);
  background: transparent;
  z-index: 1;
}

.ulik-hero__media-dot {
  appearance: none;
  border: none;
  padding: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: width var(--ulik-transition-base), background-color var(--ulik-transition-base);
}
.ulik-hero__media-dot:hover,
.ulik-hero__media-dot:focus-visible {
  background-color: rgba(255, 255, 255, 0.85);
}
.ulik-hero__media-dot:focus-visible {
  outline: 2px solid var(--ulik-color-white);
  outline-offset: 2px;
}
.ulik-hero__media-dot.is-active {
  width: 22px;
  background-color: var(--ulik-color-white);
}
@media (prefers-reduced-motion: reduce) {
  .ulik-hero__media-dot {
    transition: none;
  }
}

.ulik-hero__body {
  max-width: var(--ulik-container-max);
  margin-inline: auto;
  padding-inline: var(--ulik-container-gutter);
  position: relative;
}

.ulik-hero__card {
  position: relative;
  margin-top: -162px; /* pulls the card up over the media band to match the Figma overlap (headline card sits 566px from hero top inside a 603px + adjoining band) */
  max-width: 748px;
  background-color: var(--ulik-color-white);
  border-radius: var(--ulik-radius-sm);
  box-shadow: var(--ulik-shadow-card-float);
  padding: 30px;
}

.ulik-hero__title {
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-extrabold);
  font-size: var(--font-size-43);
  line-height: var(--ulik-lh-relaxed);
  color: var(--ulik-color-text);
  margin: 0;
}

.ulik-hero__title-accent {
  display: block;
  color: var(--ulik-color-accent);
}

/* ==========================================================================
   3. USP / FEATURE STRIP — ulik-usp
   Figma: node 37:26 "Frame 1", light-grey band, "Perfect for you" heading,
   3 icon + big-number feature blocks, 317px columns, 50px gap.
   ========================================================================== */
.ulik-usp {
  background-color: var(--ulik-color-surface);
}

.ulik-usp__grid {
  display: flex;
  justify-content: center;
  gap: var(--ulik-space-6);
  flex-wrap: wrap;
}

.ulik-usp__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 317px;
  gap: var(--ulik-space-3);
}

.ulik-usp__icon {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.ulik-usp__stat {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--ulik-space-2);
  flex-wrap: wrap;
}

.ulik-usp__number {
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-extrabold);
  font-size: var(--font-size-43);
  line-height: var(--ulik-lh-tight);
  color: var(--ulik-color-accent);
}

.ulik-usp__unit {
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-medium);
  font-size: var(--font-size-20);
  line-height: var(--ulik-lh-tight);
  color: var(--ulik-color-text);
}

.ulik-usp__text {
  font-family: var(--ulik-font-body);
  font-weight: var(--ulik-fw-light);
  font-size: var(--font-size-16);
  line-height: var(--ulik-lh-snug);
  color: var(--ulik-color-text);
  margin: 0;
}

/* ==========================================================================
   4. PRODUCT GRID — ulik-product-grid
   Figma: node 75:122. White band, "OUR PRODUCTS" eyebrow, 8 cards in a
   3-column grid (283px cards observed, generalized to an equal-width grid),
   20px gap, bordered cards radius 15px.
   ========================================================================== */
.ulik-product-grid {
  background-color: var(--ulik-color-background);
}

.ulik-product-grid__list {
  /* flex + wrap (not grid) so an incomplete last row (8 cards = 3+3+2)
     centers itself as a group, instead of grid's behavior of always
     filling column 1, 2, 3 left-to-right even on a short final row. Each
     card's flex-basis below reproduces the exact width the old 3-column
     1fr grid produced on a full row. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ulik-space-3);
}

.ulik-product-card {
  display: flex;
  flex: 0 1 calc((100% - 2 * var(--ulik-space-3)) / 3);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ulik-space-5);
  background-color: var(--ulik-color-white);
  border: 1px solid var(--ulik-color-border);
  border-radius: var(--ulik-radius-lg);
  padding: var(--ulik-space-4) 25px;
  text-decoration: none;
  transition: box-shadow var(--ulik-transition-base), transform var(--ulik-transition-base), border-color var(--ulik-transition-base);
}

.ulik-product-card:hover,
.ulik-product-card:focus-within {
  box-shadow: 0 12px 24px -12px rgba(var(--ulik-color-primary-rgb), 0.25);
  border-color: var(--ulik-color-primary);
  transform: translateY(-4px);
}

.ulik-product-card__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 59px;
  height: 54px;
  border-radius: var(--ulik-radius-md);
  background-color: var(--ulik-color-surface-tint);
  flex-shrink: 0;
}

.ulik-product-card__icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.ulik-product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--ulik-space-2);
  width: 100%;
}

.ulik-product-card__title {
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-bold);
  font-size: var(--font-size-24);
  line-height: var(--ulik-lh-tight);
  color: var(--ulik-color-accent);
  margin: 0;
}

.ulik-product-card__text {
  font-family: var(--ulik-font-body);
  font-weight: var(--ulik-fw-light);
  font-size: var(--font-size-16);
  line-height: var(--ulik-lh-snug);
  color: var(--ulik-color-text);
  margin: 0;
}

.ulik-product-card__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--ulik-space-2);
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-semibold);
  font-size: var(--font-size-14);
  line-height: var(--ulik-lh-snug);
  color: var(--ulik-color-primary);
}

.ulik-product-card__link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--ulik-transition-base);
}

.ulik-product-card:hover .ulik-product-card__link svg,
.ulik-product-card:focus-within .ulik-product-card__link svg {
  transform: translate(2px, -2px);
}

/* ==========================================================================
   5. ABOUT — ulik-about
   Figma: node 86:32. Light-grey band, 2-col grid: 628x484 photo | content
   (eyebrow/title/description + 4 checklist rows + CTA button).
   ========================================================================== */
.ulik-about {
  background-color: var(--ulik-color-surface);
}

.ulik-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 628fr) minmax(0, 543fr);
  gap: var(--ulik-space-6);
  align-items: center;
}

.ulik-about__media {
  border-radius: var(--ulik-radius-lg);
  overflow: hidden;
  aspect-ratio: 628 / 484;
}

.ulik-about__media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ulik-about__content {
  display: flex;
  flex-direction: column;
  gap: var(--ulik-space-3);
}

.ulik-about__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ulik-space-2);
}

.ulik-about__list-item {
  display: flex;
  align-items: center;
  gap: var(--ulik-space-2);
}

.ulik-about__list-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}

.ulik-about__list-text {
  font-family: var(--ulik-font-body);
  font-weight: var(--ulik-fw-light);
  font-size: var(--font-size-16);
  line-height: var(--ulik-lh-snug);
  color: var(--ulik-color-text);
  margin: 0;
}

.ulik-about__actions {
  margin-top: var(--ulik-space-2);
}

.ulik-about--reverse .ulik-about__grid {
  grid-template-columns: minmax(0, 543fr) minmax(0, 628fr);
}
.ulik-about--reverse .ulik-about__media {
  order: 2;
}

/* ==========================================================================
   6. SERVICE GRID — ulik-service-grid
   Figma: node 90:34 "Scope of Services". White band, 5 cards (3 + 2,
   centered), bordered radius 15px, square icon chip 60px, icon 30-35px.
   ========================================================================== */
.ulik-service-grid {
  background-color: var(--ulik-color-background);
}

.ulik-service-grid__list {
  /* flex + wrap (not grid) so an incomplete last row centers itself as a
     group, instead of grid's behavior of always filling column 1, 2, 3
     left-to-right even on a short final row. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ulik-space-3);
}

.ulik-service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--ulik-space-6);
  background-color: var(--ulik-color-white);
  border: 1px solid var(--ulik-color-border);
  border-radius: var(--ulik-radius-lg);
  padding: var(--ulik-space-4) 25px;
  min-height: 241px;
  justify-content: center;
  flex: 0 1 283px; /* fixed card width, matches the old grid track width */
  transition: background-color var(--ulik-transition-base), border-color var(--ulik-transition-base);
}

/* Hover: this card only (CSS :hover is inherently per-element — hovering
   one card never affects its siblings) inverts to a solid dark-blue card,
   per the Figma prototype's own hover interaction. */
.ulik-service-card:hover {
  background-color: var(--ulik-color-primary);
  border-color: var(--ulik-color-primary);
}

.ulik-service-card__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: var(--ulik-radius-md);
  background-color: var(--ulik-color-surface-tint);
  flex-shrink: 0;
  transition: background-color var(--ulik-transition-base);
}
.ulik-service-card:hover .ulik-service-card__icon-wrap {
  background-color: rgba(255, 255, 255, 0.15);
}

.ulik-service-card__icon {
  width: 32px;
  height: 32px;
  color: var(--ulik-color-primary);
  transition: color var(--ulik-transition-base);
}
.ulik-service-card:hover .ulik-service-card__icon {
  color: var(--ulik-color-white);
}
.ulik-service-card__icon svg {
  width: 100%;
  height: 100%;
}

.ulik-service-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--ulik-space-2);
}

.ulik-service-card__title {
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-bold);
  font-size: var(--font-size-24);
  line-height: var(--ulik-lh-tight);
  color: var(--ulik-color-accent);
  margin: 0;
  transition: color var(--ulik-transition-base);
}
.ulik-service-card:hover .ulik-service-card__title {
  color: var(--ulik-color-white);
}

.ulik-service-card__text {
  font-family: var(--ulik-font-body);
  font-weight: var(--ulik-fw-light);
  font-size: var(--font-size-16);
  line-height: var(--ulik-lh-snug);
  color: var(--ulik-color-text);
  margin: 0;
  transition: color var(--ulik-transition-base);
}
.ulik-service-card:hover .ulik-service-card__text {
  color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   7. SUSTAINABILITY — ulik-sustainability
   Figma: node 113:11 "Going Green / Solar Generation". Tinted-blue band,
   2-col: content (with 2 inline stats) | full-bleed photo, no side padding
   on the media edge (photo runs to the section's right edge).
   ========================================================================== */
.ulik-sustainability {
  background-color: var(--ulik-color-surface-tint);
  padding-block: 0;
}

.ulik-sustainability__grid {
  display: grid;
  grid-template-columns: minmax(0, 720fr) minmax(0, 611fr);
  align-items: center;
  gap: var(--ulik-space-6);
}

.ulik-sustainability__content {
  padding-block: var(--ulik-space-7);
  padding-inline-start: var(--ulik-container-gutter);
  max-width: 720px;
}

.ulik-sustainability__stats {
  display: flex;
  gap: var(--ulik-space-5);
  margin-top: var(--ulik-space-6);
  flex-wrap: wrap;
}

.ulik-sustainability__stat-value {
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-bold);
  font-size: var(--font-size-43);
  line-height: var(--ulik-lh-tight);
  color: var(--ulik-color-primary);
  margin: 0 0 var(--ulik-space-2);
}

.ulik-sustainability__stat-label {
  font-family: var(--ulik-font-body);
  font-weight: var(--ulik-fw-light);
  font-size: var(--font-size-16);
  line-height: var(--ulik-lh-snug);
  color: var(--ulik-color-text);
  margin: 0;
}

.ulik-sustainability__media {
  align-self: stretch;
}

.ulik-sustainability__media-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}

/* Reverse Layout: swap which side the photo sits on. Column widths swap to
   match (611fr stays the photo's track, 720fr stays the content's track);
   only .ulik-sustainability__content moves via `order`, since it is first
   in the DOM by default (mirrors .ulik-about--reverse's approach, just
   applied to the opposite element since About's photo comes first in its
   own DOM instead). */
.ulik-sustainability--reverse .ulik-sustainability__grid {
  grid-template-columns: minmax(0, 611fr) minmax(0, 720fr);
}
.ulik-sustainability--reverse .ulik-sustainability__content {
  order: 2;
}

/* ==========================================================================
   8. STATS BAR — ulik-stats-bar
   Figma: node 113:15. White band, 4-up big numbers (80px bold orange) with
   regular-weight labels, evenly spaced.
   ========================================================================== */
.ulik-stats-bar {
  background-color: var(--ulik-color-background);
}

.ulik-stats-bar__list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--ulik-space-7);
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ulik-stats-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--ulik-space-2);
  min-width: 140px;
}

.ulik-stats-bar__value {
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-bold);
  font-size: var(--font-size-84);
  line-height: var(--ulik-lh-tight);
  color: var(--ulik-color-accent);
}

.ulik-stats-bar__label {
  font-family: var(--ulik-font-body);
  font-weight: var(--ulik-fw-regular);
  font-size: var(--font-size-20);
  line-height: var(--ulik-lh-snug);
  color: var(--ulik-color-text);
}

/* ==========================================================================
   9. CTA BANNER — ulik-cta
   Figma: node 99:11. Full radial gradient (orange → blue), radius 20px,
   centered white heading/description + accent button.
   ========================================================================== */
.ulik-cta {
  /* Section-level spacing (not the gradient panel's own padding below) —
     client asked for this to live on the section wrapper so it reads as
     breathing room around the whole banner, not padding inside the card.
     100px desktop; overridden to 50px on mobile below (2026-09-10). */
  padding-block: 100px;
}

.ulik-cta__panel {
  background-image: var(--ulik-gradient-cta);
  border-radius: var(--ulik-radius-xl);
  padding: var(--ulik-space-8) var(--ulik-space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--ulik-space-3);
}

.ulik-cta__title {
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-bold);
  font-size: var(--font-size-32);
  line-height: var(--ulik-lh-tight);
  color: var(--ulik-color-white);
  max-width: 878px;
  margin: 0;
}

.ulik-cta__description {
  font-family: var(--ulik-font-body);
  font-weight: var(--ulik-fw-medium);
  font-size: var(--font-size-20);
  line-height: var(--ulik-lh-snug);
  color: var(--ulik-color-white);
  max-width: 878px;
  margin: 0;
}

.ulik-cta__actions {
  margin-top: var(--ulik-space-2);
}

.ulik-cta .ulik-button--accent {
  box-shadow: var(--ulik-shadow-button);
}

/* ==========================================================================
   10. COMPARE SLIDER GRID — ulik-compare
   New component, not from the original Figma file (client reference,
   2026-09-09): a centered section heading ("Title" / "Slide the arrow to
   see how we can transform your product") above two image-comparison
   sliders side by side, each with its own caption underneath (e.g.
   "Printing", "Shrink Labeling") — each slider itself works like the
   "Tubes" section on omso.it: a photo split by a draggable vertical line,
   dragging (or tapping anywhere on the photo) reveals more of one image or
   the other. An earlier version of this component paired a single slider
   with a text/CTA column instead (matching omso.it's own page layout more
   literally); the client's actual reference was this simpler side-by-side
   layout, so the two-column content+media CSS that used to be here was
   replaced with the grid rules below.

   Interaction: each slider's real control is a transparent
   `<input type="range">` stretched to cover the whole photo (see
   .ulik-compare-slider__range below), not a small handle — this is what
   makes a drag/tap ANYWHERE on the image move that slider's divider. The
   visible line + circular handle are pure decoration, kept in sync with
   the input's live value by initCompareSlider() in
   assets/js/ulik-components.js, which runs once per `.ulik-compare-slider`
   on the page so the two sliders here are fully independent of each
   other. ".ulik-section__header" / "__title" / "__description" above are
   the same shared centered-heading classes USP/Products/Services use
   (ulik_section_header() in helpers/ulik-helpers.php) — no new CSS needed
   for the title/subtitle themselves.
   ========================================================================== */
.ulik-compare-grid__list {
  /* flex + wrap (not grid) so exactly 2 fixed-width cards center themselves
     as a group on any container width, same reasoning as
     .ulik-service-grid__list / .ulik-product-grid__list (homepage teaser
     grid) above. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ulik-space-5);
}

.ulik-compare-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ulik-space-3);
  /* Bumped up from 340px per client feedback that the sliders read as too
     small on the page — 460px gives each photo noticeably more presence
     while two still comfortably fit side by side within the container.
     Kept in sync with the calc()/max-width overrides for this grid in
     ulik-responsive.css (tablet and mobile breakpoints). */
  flex: 0 1 460px;
  max-width: 460px;
}

.ulik-compare-grid__caption {
  margin: 0;
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-bold);
  font-size: var(--font-size-20);
  color: var(--ulik-color-accent);
}

/* ---- The slider widget itself (one per .ulik-compare-grid__item) ---- */
.ulik-compare-slider {
  width: 100%;
}

.ulik-compare-slider__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--ulik-radius-lg);
  overflow: hidden;
  /* Plain white per client request (was the tinted --ulik-color-surface-tint,
     which read as an odd pale-blue box behind the now-transparent product
     photos). A plain white panel needs its own edge to read as a distinct
     card rather than bleeding into the page background — added per client
     feedback that it looked "weird and out of place" without one. */
  background-color: var(--ulik-color-white);
  border: 1px solid var(--ulik-color-border);
  /* One-finger vertical page scroll still works over the photo; horizontal
     drag is claimed by the range input below, not the browser's own touch
     scrolling. */
  touch-action: pan-y;
}

.ulik-compare-slider__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

.ulik-compare-slider__image--placeholder {
  background-color: var(--ulik-color-surface);
}
.ulik-compare-slider__after-wrap .ulik-compare-slider__image--placeholder {
  /* Slightly different tint than the "before" placeholder so the two
     halves still read as distinct photos even before an editor uploads
     anything. */
  background-color: var(--ulik-color-surface-tint);
}

.ulik-compare-slider__after-wrap {
  position: absolute;
  inset: 0;
  /* clip-path (never `width`, so the image itself never resizes/reflows —
     only how much of it is visible changes) is updated live by
     initCompareSlider() as the range input's value changes. The inline
     `style` attribute rendered by ulik-compare-slider.php sets the correct
     starting split before any JS runs, so there's no flash of the wrong
     position on load. */
}

.ulik-compare-slider__line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  transform: translateX(-50%);
  /* Brand-color gradient (accent orange -> primary blue) instead of a flat
     white line, so the divider itself reads as an active, colorful edge
     rather than a plain ruler mark. No white stop in the middle — a
     two-color gradient blends through its own mid-tone, so the line stays
     visibly colored along its whole length instead of fading invisible
     against light backgrounds at its midpoint (as an orange-white-blue
     gradient did — it visually read as two disconnected streaks). No glow/
     box-shadow on the line itself, per client feedback — the gradient alone
     is enough to read clearly against the white stage. */
  background-image: linear-gradient(180deg, var(--ulik-color-accent) 0%, var(--ulik-color-primary) 100%);
  pointer-events: none;
}

.ulik-compare-slider__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Gradient ring (orange -> blue) behind a solid white disc, made with a
     gradient-filled circle plus a slightly-inset white ::before overlay —
     simpler and more reliable across browsers than a background-clip
     double-background trick. */
  background-image: linear-gradient(135deg, var(--ulik-color-accent), var(--ulik-color-primary));
  color: var(--ulik-color-white);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.22);
  pointer-events: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ulik-compare-slider__handle::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background-color: var(--ulik-color-white);
}
.ulik-compare-slider__handle svg {
  width: 18px;
  height: 18px;
  position: relative;
  color: var(--ulik-color-primary);
}

/* Focus ring on the handle when the (invisible) range input has keyboard
   focus — :focus-within on the stage rather than a sibling selector off
   the input itself, so this works regardless of the range input's
   position in the DOM relative to the line/handle. */
.ulik-compare-slider__stage:focus-within .ulik-compare-slider__handle {
  box-shadow: 0 0 0 3px var(--ulik-color-accent), 0 4px 14px rgba(15, 23, 42, 0.22);
}

/* Active-drag "wow" state — toggled by initCompareSlider() in
   ulik-components.js while the user is actually dragging (or has pressed
   an arrow key). Pops the handle up slightly so the reveal feels responsive
   rather than static; the line itself has no glow to intensify (see above —
   client asked for no shadow on the line), so only the handle reacts here.
   Purely cosmetic either way; the drag/clip-path logic itself doesn't
   depend on this class. */
.ulik-compare-slider.is-dragging .ulik-compare-slider__handle {
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.3), 0 0 0 2px rgba(255, 255, 255, 0.9) inset;
}

/* The actual interactive control — a fully transparent range input,
   stretched to cover the whole stage (not just a thin native track), so a
   drag or tap ANYWHERE on the photo moves the divider. Native range-input
   behavior (drag, click-to-jump, arrow keys once focused) all keep
   working for free; resetting the thumb's own appearance is what lets the
   whole element act as the draggable surface instead of only a small
   default thumb graphic. */
.ulik-compare-slider__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
/* Deliberately NOT resetting ::-webkit-slider-thumb / ::-moz-range-thumb
   here — the whole input is already invisible via `opacity: 0` above, so
   the native thumb never shows regardless of its own styling. Tested and
   confirmed (2026-09-09) that stripping the thumb's own appearance to a
   zero-size box breaks Chrome's click-to-jump math for this input (a click
   anywhere on the track always jumped to value 0 instead of the clicked
   position — arrow-key stepping still worked, isolating it to exactly
   this); Chrome computes a click's value from where it falls between the
   track's two ends *inset by half the thumb's own width*, and a thumb
   reset to 0×0 breaks that math. Leaving the thumb at its native default
   size (just invisible) keeps click-to-jump working correctly everywhere
   on the photo, not only via dragging.*/

/* ==========================================================================
   11. FOOTER — ulik-footer
   Figma: rasterized footer banner (node 148:835) rebuilt as real, editable
   markup — see DESIGN-ANALYSIS.md for the content transcription. Solid
   brand-blue background, 4-column layout (brand + 2 link columns +
   contact), divider + copyright/legal bar.
   ========================================================================== */
.ulik-footer {
  background-color: var(--ulik-color-footer-bg);
  color: var(--ulik-color-white);
  padding-top: var(--ulik-space-7);
  padding-bottom: var(--ulik-space-4);
}

.ulik-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: var(--ulik-space-6);
}

.ulik-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--ulik-space-2);
}

.ulik-footer__logo-link {
  display: inline-flex;
  align-items: center;
}

.ulik-footer__logo-text {
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-extrabold);
  font-size: 22px;
  color: var(--ulik-color-white);
}

/* "U-Lik" was the accent orange (matching the Figma wordmark) until client
   feedback 2026-09-29 asked for it in white instead, same as the rest of
   "(M) Sdn Bhd" next to it — this class now just keeps both halves visually
   identical rather than differentiating them. */
.ulik-footer__logo-text .ulik-footer__logo-accent {
  color: var(--ulik-color-white);
}

.ulik-footer__logo-img {
  max-height: 48px;
  width: auto;
}

.ulik-footer__description {
  font-family: var(--ulik-font-body);
  font-weight: var(--ulik-fw-light);
  font-size: var(--font-size-16);
  line-height: var(--ulik-lh-snug);
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  max-width: 32ch;
}

.ulik-footer__reg {
  font-family: var(--ulik-font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.ulik-footer__column-title {
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-semibold);
  font-size: var(--font-size-16);
  color: var(--ulik-color-white);
  margin: 0 0 var(--ulik-space-3);
}

.ulik-footer__column-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ulik-space-2);
}

.ulik-footer__link {
  font-family: var(--ulik-font-body);
  font-size: var(--font-size-16);
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color var(--ulik-transition-fast);
}
.ulik-footer__link:hover,
.ulik-footer__link:focus-visible {
  color: var(--ulik-color-white);
  text-decoration: underline;
}

.ulik-footer__contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ulik-space-2);
}

.ulik-footer__contact-item {
  font-family: var(--ulik-font-body);
  font-size: var(--font-size-16);
  color: rgba(255, 255, 255, 0.8);
  line-height: var(--ulik-lh-snug);
  margin: 0;
}

.ulik-footer__contact-item a {
  color: inherit;
  text-decoration: none;
}
.ulik-footer__contact-item a:hover,
.ulik-footer__contact-item a:focus-visible {
  color: var(--ulik-color-white);
  text-decoration: underline;
}

.ulik-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ulik-space-3);
  margin-top: var(--ulik-space-7);
  padding-top: var(--ulik-space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  flex-wrap: wrap;
}

.ulik-footer__copyright {
  font-family: var(--ulik-font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.ulik-footer__legal {
  list-style: none;
  display: flex;
  gap: var(--ulik-space-3);
  margin: 0;
  padding: 0;
}

.ulik-footer__legal a {
  font-family: var(--ulik-font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}
.ulik-footer__legal a:hover,
.ulik-footer__legal a:focus-visible {
  color: var(--ulik-color-white);
  text-decoration: underline;
}

/* ==========================================================================
   ABOUT US PAGE — ulik-abtus-*
   Figma: node 1:2892 "About Us". Shares the Homepage's header/footer/CTA
   classes (ulik-header, ulik-footer, ulik-cta__*) — only the sections
   unique to this page get new classes here, prefixed ulik-abtus- to avoid
   any collision with the Homepage's own ulik-about (§5 above).
   ========================================================================== */

/* ---- 1. Hero — ulik-abtus-hero -------------------------------------------
   Figma: node 127:22 "Hero2". Full-bleed photo, 41% white wash overlay,
   two-tone "About Us" heading bottom-left, no card (simpler than the
   Homepage hero — a single fixed heading, not per-instance slides).
   -------------------------------------------------------------------------- */
/* Structure: .ulik-abtus-hero (plain wrapper, no positioning of its own) >
   __media (position:relative, explicit height — not min-height — and
   overflow:hidden) > __media-img (position:absolute, fills __media) +
   __wash + __title (position:absolute, anchored to __media's own bottom
   edge). Two real bugs were fixed by this exact structure, both from an
   earlier version that put __title outside __media instead of inside it:
   (1) percentage-height on an absolutely positioned image only resolves
   reliably against a containing block with a *definite* height, and
   min-height alone doesn't reliably count as definite in every browser —
   using __media's explicit height fixed the photo stretching to its full
   natural size and bleeding down the page; (2) position:absolute always
   resolves against the *nearest positioned ancestor*, and in the live
   Cornerstone builder that turned out not to reliably be the outer
   .ulik-abtus-hero section (some ancestor further up the tree already had
   its own positioning context), so __title's "bottom:0" was anchoring far
   below the hero, overlapping the next section. Nesting __title directly
   inside __media — which is unambiguously position:relative with nothing
   else competing for that role — makes the containing block impossible to
   get wrong regardless of what any ancestor outside this component does. */
.ulik-abtus-hero {
  position: relative;
}

.ulik-abtus-hero__media {
  position: relative;
  width: 100%;
  height: 460px;
  overflow: hidden;
  background-color: var(--ulik-color-surface);
}

.ulik-abtus-hero__media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ulik-abtus-hero__media-img--placeholder {
  background-color: var(--ulik-color-surface);
}

.ulik-abtus-hero__wash {
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.41);
}

.ulik-abtus-hero__title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-extrabold);
  font-size: var(--font-size-84);
  line-height: 1.15;
  color: var(--ulik-color-text);
  margin: 0;
  padding: var(--ulik-space-6) var(--ulik-container-gutter);
  max-width: var(--ulik-container-max);
  margin-inline: auto;
}

.ulik-abtus-hero__title-accent {
  color: var(--ulik-color-accent);
}

/* ---- 2. Corporate Profile — ulik-abtus-profile ----------------------------
   Figma: node 142:27. Content | photo-with-stat-card, mirrored from the
   Homepage About (content is LEFT by default here) — same Reverse Layout
   toggle pattern applies.
   -------------------------------------------------------------------------- */
.ulik-abtus-profile__grid {
  display: grid;
  grid-template-columns: minmax(0, 543fr) minmax(0, 628fr);
  gap: var(--ulik-space-6);
  align-items: center;
}

.ulik-abtus-profile--reverse .ulik-abtus-profile__grid {
  grid-template-columns: minmax(0, 628fr) minmax(0, 543fr);
}
.ulik-abtus-profile--reverse .ulik-abtus-profile__content {
  order: 2;
}

.ulik-abtus-profile__content {
  display: flex;
  flex-direction: column;
  gap: var(--ulik-space-3);
  align-items: flex-start;
}

.ulik-abtus-profile__description p {
  font-family: var(--ulik-font-body);
  font-weight: var(--ulik-fw-medium);
  font-size: var(--font-size-20);
  line-height: var(--ulik-lh-snug);
  color: var(--ulik-color-text-muted);
  margin: 0 0 var(--ulik-space-2);
}
.ulik-abtus-profile__description p:last-child {
  margin-bottom: 0;
}

.ulik-abtus-profile__actions {
  margin-top: var(--ulik-space-2);
}

.ulik-abtus-profile__media {
  position: relative;
}

.ulik-abtus-profile__media-img {
  display: block;
  width: 100%;
  aspect-ratio: 665 / 512;
  object-fit: cover;
  border-radius: var(--ulik-radius-lg);
}

.ulik-abtus-profile__stat {
  position: absolute;
  right: var(--ulik-space-4);
  bottom: var(--ulik-space-4);
  background-color: rgba(255, 255, 255, 0.67); /* was solid white — client request, 2026-09-25, lets the photo show through slightly */
  border-radius: var(--ulik-radius-sm);
  box-shadow: var(--ulik-shadow-card-float);
  padding: var(--ulik-space-3) var(--ulik-space-4);
  max-width: 260px;
}

.ulik-abtus-profile__stat-value {
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-extrabold);
  font-size: var(--font-size-32);
  color: var(--ulik-color-accent);
  margin: 0 0 var(--ulik-space-1);
}

.ulik-abtus-profile__stat-label {
  font-family: var(--ulik-font-body);
  font-weight: var(--ulik-fw-light);
  font-size: var(--font-size-16);
  color: var(--ulik-color-text);
  margin: 0;
}

/* ---- 3. Mission & Culture — ulik-abtus-mission ----------------------------
   Figma: node 142:214. Two white info cards side by side on a light-grey
   band, no section heading above them — icon top-left (accent/orange glyph
   on a light tint chip — confirmed against a close-up crop of the live page,
   screenshot supplied 2026-09-01, which corrected an earlier primary/blue
   icon-color guess), bold blue title, description below.
   -------------------------------------------------------------------------- */
.ulik-abtus-mission__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ulik-space-5);
}

.ulik-abtus-mission__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ulik-space-3);
  background-color: var(--ulik-color-white);
  border-radius: var(--ulik-radius-lg);
  box-shadow: var(--ulik-shadow-card-float);
  padding: var(--ulik-space-5);
}

.ulik-abtus-mission__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--ulik-radius-sm);
  background-color: var(--ulik-color-surface-tint);
  color: var(--ulik-color-accent);
}
.ulik-abtus-mission__icon svg {
  width: 24px;
  height: 24px;
}

.ulik-abtus-mission__title {
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-bold);
  font-size: var(--font-size-20);
  color: var(--ulik-color-primary);
  margin: 0;
}

.ulik-abtus-mission__text {
  font-family: var(--ulik-font-body);
  font-weight: var(--ulik-fw-light);
  font-size: var(--font-size-16);
  line-height: var(--ulik-lh-snug);
  color: var(--ulik-color-text-muted);
  margin: 0;
}

/* ---- 4. Core Values — ulik-abtus-values -----------------------------------
   Figma: node 145:334. NOT a card grid — each value is a rounded pill badge
   (filled light-tint background, no border, accent-colored text) with a
   plain description line below, centered, no icon.
   The badge is a FIXED size, not shrink-to-fit — pixel-measured directly off
   a close-up crop of the live page (screenshot supplied 2026-09-02): all 6
   pills, including the shortest ("SPIFFS") and the longest
   ("Sustainability"), came out an identical 433×117px at 2x scale = 216×58
   design px, and the pill text itself measured close to a 20px cap+descender
   height — both corrected here (was: shrink-wrapped to each word's own
   width at font-size-16, which made "SPIFFS" a noticeably smaller pill than
   "Sustainability" — visually inconsistent with Figma's uniform pill size).
   -------------------------------------------------------------------------- */
.ulik-abtus-values__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 283px));
  justify-content: center;
  gap: var(--ulik-space-5) var(--ulik-space-4);
}

.ulik-abtus-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ulik-space-2);
  text-align: center;
}

.ulik-abtus-value__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 216px;
  height: 58px;
  padding-inline: var(--ulik-space-3);
  background-color: var(--ulik-color-surface-tint);
  border-radius: var(--ulik-radius-pill, 999px);
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-bold);
  font-size: var(--font-size-20);
  color: var(--ulik-color-accent);
  white-space: nowrap;
  text-align: center;
}

.ulik-abtus-value__text {
  font-family: var(--ulik-font-body);
  font-weight: var(--ulik-fw-light);
  font-size: var(--font-size-14);
  line-height: var(--ulik-lh-snug);
  color: var(--ulik-color-text-muted);
  margin: 0;
  max-width: 220px;
}

/* ---- 5. Our Journey — ulik-abtus-journey -----------------------------------
   Figma: node 499:79. A full-bleed dark-blue band (.ulik-section--primary,
   fixed — no background option, removed in v2.1.4 per client request)
   holding a vertical milestone timeline: a light rail with an orange dot
   per entry, title + optional description/image to its right. Only the
   first entry shows a year. All timeline text is plain white against the
   one fixed blue background. Confirmed against a live render of the page
   (screenshots supplied 2026-08-30, 2026-09-02 and 2026-09-03).

   The section heading ("Our Journey") uses the shared .ulik-section__title
   class, which already has a `.ulik-section--primary .ulik-section__title
   { color: white }` rule in ulik-base.css — that rule should cover this
   section automatically. It wasn't taking effect on the live site (still
   rendering blue, confirmed via screenshot, 2026-09-03), so an ancestor-
   scoped, `!important` override was added directly below, scoped tightly
   to this one section.

   That override *still* wasn't showing up when the client inspected the
   live page again (2026-09-03, second screenshot) — DevTools' Styles
   panel showed only the base `.ulik-section__title` rule, with nothing
   else in the cascade at all, which points to the live site simply not
   yet running this CSS file (a stale cache or an incomplete file
   replacement), not a specificity problem in the code. Belt-and-suspenders
   fix: the h2 itself now also carries a second, dedicated class,
   `.ulik-section__title--journey` (via `ulik_section_header()`'s new
   `title_class` param — see ulik-abtus-journey.php and ulik-helpers.php),
   styled below. Both rules are harmless to keep together; whichever one
   the live CSS actually contains will apply. If the title is STILL blue
   after confirming this exact file is the one live on the server (see
   the file replacement notes in README.md), the cause is almost certainly
   a caching layer (WP cache plugin, CDN, or Cornerstone's own CSS
   compiler cache) serving an old bundle, not this code.
   -------------------------------------------------------------------------- */
.ulik-abtus-journey .ulik-section__title,
.ulik-section__title--journey {
  color: var(--ulik-color-white) !important;
}

.ulik-abtus-journey__list {
  position: relative;
  max-width: 674px;
  margin-inline: auto;
  list-style: none;
  padding: 0;
  padding-left: 40px;
  border-left: 2px solid rgba(255, 255, 255, 0.3);
}

.ulik-abtus-journey__item {
  position: relative;
  padding-bottom: var(--ulik-space-5);
}
.ulik-abtus-journey__item:last-child {
  padding-bottom: 0;
}

.ulik-abtus-journey__dot {
  position: absolute;
  left: -46px;
  top: 6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: var(--ulik-color-accent);
}

.ulik-abtus-journey__year {
  display: block;
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-extrabold);
  font-size: var(--font-size-32);
  color: var(--ulik-color-accent);
  margin: 0 0 var(--ulik-space-1);
}

.ulik-abtus-journey__title {
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-semibold);
  font-size: var(--font-size-20);
  color: var(--ulik-color-white);
  margin: 0;
}

.ulik-abtus-journey__caption {
  font-family: var(--ulik-font-body);
  font-weight: var(--ulik-fw-medium);
  font-size: var(--font-size-14);
  color: var(--ulik-color-white);
  margin: var(--ulik-space-1) 0 0;
}

/* Width matches the Dimensions the client specified (416×190), but height
   is now auto rather than fixed — a fixed 190px frame left visibly empty
   space above/below any milestone image shorter than that, which the
   client flagged as unnecessary whitespace (2026-09-03). The frame now
   just caps the image's width and lets it size to its own natural aspect
   ratio: a short/wide image takes less vertical room than a tall one,
   instead of both being padded out to the same box. Transparent
   background and square corners, no cropping (still no object-fit: cover
   — every pixel of the source image stays visible, per the earlier
   "show the whole image" request). */
.ulik-abtus-journey__logo-frame {
  width: 416px;
  max-width: 100%;
  margin-top: var(--ulik-space-3);
}

.ulik-abtus-journey__logo {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- 6. Facilities — ulik-abtus-facilities --------------------------------
   Figma: node 148:650. 3 fixed photo cards (photo top, text block below),
   bordered like the product/service cards. Card titles are accent (orange),
   not primary (blue) — confirmed against a close-up crop of the live page
   (screenshot supplied 2026-09-01), which replaces an earlier incorrect
   blue-title guess.
   -------------------------------------------------------------------------- */
.ulik-abtus-facilities__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ulik-space-3);
}

.ulik-abtus-facility-card {
  background-color: var(--ulik-color-white);
  border: 1px solid var(--ulik-color-border);
  border-radius: var(--ulik-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ulik-abtus-facility-card__img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.ulik-abtus-facility-card__img--placeholder {
  background-color: var(--ulik-color-surface);
}

.ulik-abtus-facility-card__body {
  padding: var(--ulik-space-3);
}

.ulik-abtus-facility-card__title {
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-bold);
  font-size: var(--font-size-24);
  color: var(--ulik-color-accent);
  margin: 0 0 var(--ulik-space-2);
}

.ulik-abtus-facility-card__text {
  font-family: var(--ulik-font-body);
  font-weight: var(--ulik-fw-light);
  font-size: var(--font-size-16);
  line-height: var(--ulik-lh-snug);
  color: var(--ulik-color-text-muted);
  margin: 0;
}

/* ---- 7. CTA -----------------------------------------------------------
   Figma: node 148:827. Visually identical to the Homepage's CTA Banner
   (gradient panel, centered title/description/button), so the About Us
   page reuses the existing `ulik-cta` element directly instead of a
   separate `ulik-abtus-cta` element — no new markup or classes needed
   here. Just drop the "U-Lik: CTA Banner" element into the page and edit
   its content for this page's context.
   -------------------------------------------------------------------------- */

/* ---- 8. Scope of Service — ulik-scope-nav / ulik-scope-solutions /
   ulik-scope-creative ---------------------------------------------------
   Figma: node 238:104 (tab bar + Effective Solutions panel), 238:349
   (Standardisation selected), 238:354 (The Creative Edge, 8-step grid).
   Colors confirmed by pixel-sampling the client-supplied screenshots
   ("Scope of Service.png", "Section Tabs.png", "Changed Tabs.png",
   2026-09-03): the tab bar band and the Creative Edge outer band both use
   --ulik-color-surface; every flow-diagram card (Card 1, Card 2, and the
   switch's own container) uses --ulik-color-surface-tint; the active tab,
   the active switch segment, and Card 3 ("Finished Product") all use the
   solid --ulik-color-accent orange — measured RGB 233/115/36, an exact
   match. The Creative Edge heading sits INSIDE the same white rounded
   sheet as the step grid, not on the grey band behind it.

   REBUILT 2026-09-03: this was originally one combined `ulik-scope-tabs`
   element with the two page-level panels shown/hidden via JS. Per client
   feedback (there was nothing to scroll to, and no separate "Creative
   Edge" block visible in the page builder), it's now THREE ordinary,
   always-visible, stacked elements — a thin tab-nav bar
   (`ulik-scope-nav` → `.ulik-scope-tabs*` below), the "Effective
   Solutions" section (`ulik-scope-solutions`), and "The Creative Edge"
   section (`ulik-scope-creative`) — same as every other section in this
   package. The nav's tabs are real anchor links to each section's `id`;
   assets/js/ulik-components.js → initScopeNav() smooth-scrolls to the
   target (compensating for the sticky header's height) and highlights
   whichever tab matches the section currently in view.

   The inner Customisation / Standardisation switch is unchanged from the
   original build: both states render into `ulik-scope-solutions` at once,
   and initScopeSwitch() toggles which is visible via the `data-active` /
   `.is-active` attribute hooks below.
   -------------------------------------------------------------------------- */

/* ---- Tab nav bar (ulik-scope-nav, its own element, always visible) ---- */
.ulik-scope-tabs__bar {
  background-color: var(--ulik-color-surface);
  padding-block: var(--ulik-space-4);
}

.ulik-scope-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ulik-space-2);
}

/* Tightened padding/gap 2026-09-03 per client feedback ("look too wide") —
   was space-2/space-4 (10px/30px) + space-3 (20px) gap. */
.ulik-scope-tabs__tab {
  display: inline-block;
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-semibold);
  font-size: var(--font-size-18);
  line-height: var(--ulik-lh-tight);
  background-color: var(--ulik-color-white);
  color: var(--ulik-color-primary);
  border: 2px solid var(--ulik-color-primary);
  border-radius: var(--ulik-radius-md);
  padding: var(--ulik-space-2) var(--ulik-space-3);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--ulik-transition-base), color var(--ulik-transition-base);
}

.ulik-scope-tabs__tab.is-active {
  background-color: var(--ulik-color-primary);
  color: var(--ulik-color-white);
  border-color: var(--ulik-color-primary);
}

.ulik-scope-tabs__tab:hover,
.ulik-scope-tabs__tab:focus-visible {
  background-color: var(--ulik-color-surface-tint);
}
.ulik-scope-tabs__tab.is-active:hover,
.ulik-scope-tabs__tab.is-active:focus-visible {
  background-color: var(--ulik-color-primary-hover);
}

/* ---- Effective Solutions (ulik-scope-solutions, always visible) ----
   Anchor-scroll fallback: if a browser ever jumps here natively (JS
   disabled, or a direct link with #ulik-scope-solutions in the URL)
   before initScopeNav()'s own offset math can run, this keeps the
   heading from landing underneath the sticky header. */
.ulik-scope-solutions {
  scroll-margin-top: var(--ulik-space-7);
}

/* ---- Customisation / Standardisation switch ----
   Tightened 2026-09-05 per client feedback ("the tab space is far too
   wide") — this is the switch pill pair itself, not the ulik-scope-nav
   anchor bar above the section (that one was already tightened in
   v2.2.2, which is why that earlier fix didn't visibly change anything
   here: two different components, both loosely called "tabs").

   Rebuilt from flex (equal 1 1 0 split) to grid (auto auto) 2026-09-05:
   an equal split forces both segments to the width of whichever one has
   more content — Standardisation's longer subtext ("with over 8000
   possibilities!") was forcing Customisation wider than it needed, AND
   still wasn't wide enough for its own text to fit one line the moment
   the client asked for the whole control to be narrower. Content-sized
   grid columns solve both at once: each segment is exactly as wide as
   its own longest line, no wider — Customisation gets tighter,
   Standardisation gets exactly the room its text needs, and the control
   overall still reads as noticeably tighter than the original 640px.
   white-space: nowrap on .ulik-scope-switch__subtext (below) is what
   guarantees the one-line result on desktop; the tablet/mobile
   breakpoint (ulik-responsive.css) relaxes both back to a single
   full-width column so nothing forces an overflow on narrow screens. */
.ulik-scope-switch {
  display: grid;
  grid-template-columns: auto auto;
  gap: var(--ulik-space-1);
  background-color: var(--ulik-color-surface-tint);
  border-radius: var(--ulik-radius-lg);
  padding: var(--ulik-space-1);
  max-width: 500px;
  margin: 0 auto var(--ulik-space-6);
}

.ulik-scope-switch__seg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  background-color: transparent;
  border: none;
  border-radius: var(--ulik-radius-md);
  padding: var(--ulik-space-2) var(--ulik-space-3);
  cursor: pointer;
  transition: background-color var(--ulik-transition-base);
}

.ulik-scope-switch__label {
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-bold);
  font-size: var(--font-size-22);
  color: var(--ulik-color-primary);
  white-space: nowrap;
}

.ulik-scope-switch__subtext {
  font-family: var(--ulik-font-body);
  font-weight: var(--ulik-fw-regular);
  font-size: var(--font-size-16);
  color: var(--ulik-color-primary);
  opacity: 0.7;
  white-space: nowrap;
}

/* Standardisation's subtext swaps wording depending on active state (see
   the PHP file header for why) — both strings render; CSS shows only one. */
.ulik-scope-switch__subtext--on {
  display: none;
}

.ulik-scope-switch__seg.is-active {
  background-color: var(--ulik-color-accent);
}
.ulik-scope-switch__seg.is-active .ulik-scope-switch__label,
.ulik-scope-switch__seg.is-active .ulik-scope-switch__subtext {
  color: var(--ulik-color-white);
  opacity: 0.9;
}
.ulik-scope-switch__seg.is-active .ulik-scope-switch__label {
  opacity: 1;
}
.ulik-scope-switch__seg.is-active .ulik-scope-switch__subtext--off {
  display: none;
}
.ulik-scope-switch__seg.is-active .ulik-scope-switch__subtext--on {
  display: block;
}

.ulik-scope-switch__seg:focus-visible {
  outline: 2px solid var(--ulik-color-accent);
  outline-offset: 2px;
}

/* ---- Flow diagram: Card 1 → arrow → Card 2 → arrow → Card 3 ---- */
.ulik-scope-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ulik-space-4);
}

/* align-self: center (not inherited align-items) is what keeps the arrow
   centered regardless of layout direction. On tablet/mobile the flow
   switches to flex-direction: column with align-items: stretch (so the
   cards stretch to full width instead of shrinking to content width) —
   without its own align-self the arrow stretched to that same full width
   too, and since it never centered its own child, the SVG sat flush left
   instead of in the middle. Fixed 2026-09-05. */
.ulik-scope-flow__arrow {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  justify-content: center;
  color: var(--ulik-color-text);
}
.ulik-scope-flow__arrow svg {
  width: 28px;
  height: 28px;
}

/* Both variants of Card 1 and Card 3 sit in the same slot; only the one
   matching the switch's data-active shows. Specificity note: this has to
   out-rank .ulik-scope-card's own `display: flex` (same element, same
   0,1,0 weight) — the extra .ulik-scope-flow ancestor class here (0,2,0)
   is what makes that happen; a bare `.ulik-scope-flow__variant` selector
   left both variants visible at once regardless of data-active. */
.ulik-scope-flow .ulik-scope-flow__variant {
  display: none;
}
.ulik-scope-flow[data-active="customisation"] .ulik-scope-flow__variant--customisation,
.ulik-scope-flow[data-active="standardisation"] .ulik-scope-flow__variant--standardisation {
  display: flex;
}

.ulik-scope-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ulik-space-3);
  background-color: var(--ulik-color-surface-tint);
  border-radius: var(--ulik-radius-lg);
  padding: var(--ulik-space-5);
  align-self: stretch;
}

/* Sized to its own content, not stretched to match Card 1/Card 2's height
   (the base .ulik-scope-card rule above sets align-self: stretch for
   that reason on those two, which hold multi-line bullet lists) — this
   card only ever holds a title and one row of fixed-105px-tall photos, so
   stretching it to match its much taller neighbours was leaving a large
   empty gap at the bottom, per client feedback 2026-09-05. Its own height
   already can't change between the Customisation/Standardisation switch
   states (same fixed frame height either way), so auto-sizing here loses
   nothing. */
.ulik-scope-card--c3 {
  background-color: var(--ulik-color-accent);
  align-self: center;
}

.ulik-scope-card__title {
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-bold);
  font-size: var(--font-size-24);
  color: var(--ulik-color-primary);
  margin: 0;
}

.ulik-scope-card__title--on-dark {
  color: var(--ulik-color-white);
}

.ulik-scope-card__group {
  display: flex;
  flex-direction: column;
  gap: var(--ulik-space-1);
}

.ulik-scope-card__group-label {
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-bold);
  font-size: var(--font-size-16);
  color: var(--ulik-color-accent);
  margin: 0;
}

.ulik-scope-card__bullets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ulik-space-1) var(--ulik-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ulik-scope-card__bullet {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--ulik-space-1);
  font-family: var(--ulik-font-body);
  font-weight: var(--ulik-fw-regular);
  font-size: var(--font-size-16);
  color: var(--ulik-color-text);
  white-space: nowrap;
}
.ulik-scope-card__bullet::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--ulik-color-primary);
  flex-shrink: 0;
}

/* 2 photos side by side as of 2026-09-05 (see git history for the
   vertical-stack detour that was tried and reverted the same day — a
   vertical stack made this card noticeably taller than its Design &
   Material / Post-Process neighbours, which the Figma reference doesn't
   show).

   REBUILT AS A GRID 2026-09-29 (client request: 4 photos instead of 2).
   A plain flex row of 4 narrow frames would have squeezed each photo to
   roughly a quarter of the card's width; a 2-column grid instead keeps
   each frame the same width it already had with 2 photos (two per row),
   just adding a second row underneath. Switching from flex to grid here
   also permanently retires the old "vanishing photos" bug class: that
   incident was caused by flex-basis meaning HEIGHT instead of WIDTH the
   moment a *different* rule switched this same container to
   flex-direction: column at the mobile breakpoint. Grid rows and columns
   are sized independently of each other, so a breakpoint can change the
   column count (see the ≤767px block, which drops to a single column)
   without that footgun existing at all. */
.ulik-scope-card__photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ulik-space-3);
}

/* Fixed height (not aspect-ratio-driven) so the "Finished Product" card
   stays the same size regardless of which photo is showing — Customisation
   and Standardisation each have their own pair of photos, and those can
   be quite different shapes; with a flexible/aspect-ratio-based height the
   whole card visibly grew or shrank when switching between them. Height
   is 105px per the client-supplied Figma frame measurement ("290 × 105" —
   the photos row's own content width and height, which 290 already gets
   for free from the card's own width).

   REVERTED 2026-09-04: this frame is landscape (wider than tall), but the
   client's real product photos are frequently portrait (tall bottles). With
   object-fit: cover, a portrait photo in a landscape frame gets scaled up
   until it fills the frame's width, which pushes most of the photo's HEIGHT
   outside the frame and crops it away — for a tall bottle that crops off
   the cap/neck entirely and leaves only a flat, unrecognizable slice of the
   body. object-fit: contain guarantees the whole product is always visible
   (this is what the client asked for directly: "so I can see the whole
   image") at the cost of some empty space on the photo's short axis. That
   empty space reads as intentional, not broken, because the frame's own
   background below is the same white as almost all product photography
   backgrounds — the letterboxing blends into the photo instead of showing
   as a visible gap. */
.ulik-scope-card__photo-frame {
  min-width: 0;
  height: 105px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ulik-color-white);
  border-radius: var(--ulik-radius-md);
  overflow: hidden;
}

.ulik-scope-card__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---- The Creative Edge (ulik-scope-creative, always visible) ----
   REVERTED 2026-09-04 per client request: the section itself no longer
   carries its own background — it sits directly on the page background.
   Earlier (2026-09-03) this had `background-color: var(--ulik-color-surface)`
   here, pixel-sampled from an earlier client reference screenshot showing
   a grey band behind the white sheet; the client has now asked for just
   the white sheet (background + border-radius + shadow below) with no
   separate outer band, so that rule is removed. If the grey band ever
   needs to come back, it was `background-color: var(--ulik-color-surface);`.
   scroll-margin-top: see the matching comment on .ulik-scope-solutions
   above. */
.ulik-scope-creative {
  padding-block: var(--ulik-space-6);
  scroll-margin-top: var(--ulik-space-7);
}

.ulik-scope-creative__sheet {
  background-color: var(--ulik-color-white);
  border-radius: var(--ulik-radius-xl);
  /* Floating-card shadow so the white sheet visibly lifts off the grey
     band behind it — client supplied the exact Figma effect values
     (2026-09-03): X 0 / Y 0 / Blur 15 / Spread 5 / Color #1F4E9E at 26%.
     Zero X/Y offset (unlike --ulik-shadow-card-float, used elsewhere,
     which is offset and so reads unevenly) is what makes this glow show
     evenly on every edge — top and bottom included — instead of mostly
     to one side. */
  box-shadow: 0 0 15px 5px rgba(var(--ulik-color-primary-rgb), 0.26);
  padding: var(--ulik-space-6) var(--ulik-space-5);
}

.ulik-scope-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ulik-space-4);
  margin-top: var(--ulik-space-6);
}

.ulik-scope-step {
  display: flex;
  flex-direction: column;
  background-color: var(--ulik-color-white);
  border-radius: var(--ulik-radius-lg);
  box-shadow: var(--ulik-shadow-card-float);
  overflow: hidden;
}

.ulik-scope-step__media {
  position: relative;
}

.ulik-scope-step__img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.ulik-scope-step__img--placeholder {
  background-color: var(--ulik-color-surface);
}

.ulik-scope-step__badge {
  position: absolute;
  top: var(--ulik-space-2);
  left: var(--ulik-space-2);
  background-color: var(--ulik-color-white);
  color: var(--ulik-color-primary);
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-bold);
  font-size: var(--font-size-14);
  padding: 6px var(--ulik-space-2);
  border-radius: var(--ulik-radius-pill, 999px);
  box-shadow: var(--ulik-shadow-card-float);
}

.ulik-scope-step__body {
  padding: var(--ulik-space-4);
}

.ulik-scope-step__title {
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-bold);
  font-size: var(--font-size-20);
  color: var(--ulik-color-accent);
  margin: 0 0 var(--ulik-space-2);
}

.ulik-scope-step__text {
  font-family: var(--ulik-font-body);
  font-weight: var(--ulik-fw-light);
  font-size: var(--font-size-16);
  line-height: var(--ulik-lh-snug);
  color: var(--ulik-color-text-muted);
  margin: 0;
}

/* ==========================================================================
   9. WHAT'S NEW — ulik-whatsnew-featured / ulik-whatsnew-post
   Figma: page "What's New" (node 542:221). Featured card is node 542:233,
   pulled via a live Figma design-context call (2026-09-04) — colors, fonts
   and spacing below for that element are exact. The repeating Post row is
   node 542:244; its own design-context call hit this Figma account's API
   rate limit, so its type scale is inferred one step down from Featured's
   confirmed values, on the same color roles used everywhere else in this
   system — see the long comment atop ulik-whatsnew-post.php for exactly
   what's confirmed vs. inferred.

   Both elements ship with their content fields (title/description/date/
   link URL) intentionally BLANK by default — per client instruction, these
   are meant to hold Cornerstone Dynamic Content tags
   ({{dc:post:title}}, {{dc:post:publish_date}}, etc.) pasted in directly
   through the builder, not hardcoded demo copy. See both element files'
   docblocks for the full intended Looper setup.

   .ulik-whatsnew__link / __link-label / __link-icon / --sm is a SHARED
   plain text+icon "Read More" link used by both elements (not the site's
   bordered `.ulik-button` — this design has no button chrome, just colored
   text and an arrow, confirmed in the Featured node's design context).
   ========================================================================== */
.ulik-whatsnew-featured {
  display: grid;
  grid-template-columns: minmax(0, 746fr) minmax(0, 614fr);
  align-items: stretch;
  border-radius: var(--ulik-radius-lg);
  overflow: hidden;
}

.ulik-whatsnew-featured__content {
  background-color: var(--ulik-color-white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--ulik-space-2);
  padding-inline: var(--ulik-space-7);
  padding-block: var(--ulik-space-6);
}

.ulik-whatsnew-featured__text {
  display: flex;
  flex-direction: column;
  gap: var(--ulik-space-2);
}

.ulik-whatsnew-featured__eyebrow {
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-bold);
  font-size: var(--font-size-32);
  line-height: var(--ulik-lh-tight);
  color: var(--ulik-color-accent);
  text-transform: uppercase;
  letter-spacing: var(--ulik-ls-eyebrow);
}

.ulik-whatsnew-featured__title {
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-bold);
  font-size: var(--font-size-43);
  line-height: var(--ulik-lh-tight);
  color: var(--ulik-color-primary);
  margin: 0;
}

.ulik-whatsnew-featured__description {
  font-family: var(--ulik-font-body);
  font-weight: var(--ulik-fw-medium);
  font-size: var(--font-size-20);
  line-height: var(--ulik-lh-snug);
  color: var(--ulik-color-text-muted);
}

.ulik-whatsnew-featured__media {
  position: relative;
  aspect-ratio: 614 / 459;
  overflow: hidden;
  background-color: var(--ulik-color-surface);
}

.ulik-whatsnew-featured__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ulik-whatsnew-featured__photo--placeholder {
  background-color: var(--ulik-color-surface);
}

/* ---- Shared "Read More" text+icon link (both elements) ---- */
.ulik-whatsnew__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ulik-space-1);
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-semibold);
  font-size: var(--font-size-20); /* was --font-size-24 (Figma's own measurement) — sized down one step per client request 2026-09-04. */
  color: var(--ulik-color-primary);
  text-decoration: none;
}

.ulik-whatsnew__link:hover {
  color: var(--ulik-color-primary-hover);
}

.ulik-whatsnew__link-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
}

.ulik-whatsnew__link-icon svg {
  width: 100%;
  height: 100%;
}

/* Smaller variant used by the repeating Post row (Figma's arrow icon there
   measures ~18×17 vs. the Featured card's ~30×29, so the whole link scales
   down a step, not just its font-size). */
.ulik-whatsnew__link--sm {
  font-size: var(--font-size-14); /* was --font-size-16 — sized down one step per client request 2026-09-04, same as the base link above. */
}

.ulik-whatsnew__link--sm .ulik-whatsnew__link-icon {
  width: 18px;
  height: 18px;
}

/* ---- Repeating Post row ---- */
/* Default is now photo-LEFT (not photo-right) — flipped 2026-09-09 per
   client reference (1st/normal post: photo left; 2nd/alternated post:
   photo right — see the .ulik-whatsnew-post--reverse comment below and
   ulik-whatsnew-post.php's own field comment for the same flip). The
   alternation logic itself (assets/js/ulik-components.js →
   initWhatsNewPaginate()) is untouched — it still just toggles this
   `--reverse` class on every 2nd post; only what that class visually means
   has swapped. */
.ulik-whatsnew-post {
  display: grid;
  grid-template-columns: minmax(0, 534fr) minmax(0, 595fr);
  gap: var(--ulik-space-6);
  align-items: center;
  padding-block: var(--ulik-space-6);
  border-bottom: 1px solid var(--ulik-color-border);
}

.ulik-whatsnew-post__media {
  order: -1;
}

.ulik-whatsnew-post__content {
  display: flex;
  flex-direction: column;
  gap: var(--ulik-space-2);
}

.ulik-whatsnew-post__date {
  font-family: var(--ulik-font-body);
  font-weight: var(--ulik-fw-semibold);
  font-size: var(--font-size-14);
  color: var(--ulik-color-accent); /* client request 2026-09-04: date in the brand orange, matching the Featured card's eyebrow. */
}

.ulik-whatsnew-post__title {
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-bold);
  font-size: var(--font-size-24);
  line-height: var(--ulik-lh-snug);
  color: var(--ulik-color-primary);
  margin: 0;
}

.ulik-whatsnew-post__description {
  font-family: var(--ulik-font-body);
  font-weight: var(--ulik-fw-light);
  font-size: var(--font-size-16);
  line-height: var(--ulik-lh-snug);
  color: var(--ulik-color-text-muted);
}

.ulik-whatsnew-post__media {
  position: relative;
  aspect-ratio: 534 / 271;
  border-radius: var(--ulik-radius-lg);
  overflow: hidden;
  background-color: var(--ulik-color-surface);
}

.ulik-whatsnew-post__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ulik-whatsnew-post__photo--placeholder {
  background-color: var(--ulik-color-surface);
}

/* Manual side-flip — see the "Photo side" note in ulik-whatsnew-post.php
   for why this can't auto-alternate per real post from a single loop
   template. Same order-swap pattern as .ulik-about--reverse.
   `--reverse` now means photo-RIGHT (the ORIGINAL default before the
   2026-09-09 flip above) — resets the column sizing and puts media back
   into its natural DOM order (content, then media = photo on the right),
   overriding the new base rule's `order: -1` via higher selector
   specificity (two classes vs. one). */
.ulik-whatsnew-post--reverse {
  grid-template-columns: minmax(0, 595fr) minmax(0, 534fr);
}
.ulik-whatsnew-post--reverse .ulik-whatsnew-post__media {
  order: 0;
}

/* Client-side de-dupe safety net — see initWhatsNewDedupe() in
   ulik-components.js for why this exists (2026-09-05): hides a normal
   post row whose title text matches the Featured card above it. */
.ulik-whatsnew-post--hidden {
  display: none;
}

/* ---- What's New / Blog — Post Hero (ulik-whatsnew-hero) ----
   Figma: page "News/Blogs" (node 659:74), hero node 659:86 — confirmed via
   a live Figma design-context pull (2026-09-04). Full-bleed 2-col band, NOT
   inside .ulik-container (matches ulik-abtus-hero's full-bleed pattern) —
   this section runs edge-to-edge, unlike the archive page's Featured card
   which sits inside the normal page container with rounded corners.
   Confirmed distinct from that Featured card: description here is the SAME
   blue as the title (#1F4E9E via --ulik-color-primary), not muted grey, and
   there's no "Read More" link (this IS the post being read). */
.ulik-whatsnew-hero {
  display: grid;
  grid-template-columns: minmax(0, 756fr) minmax(0, 684fr);
  align-items: stretch;
}

.ulik-whatsnew-hero__content {
  background-color: var(--ulik-color-surface-blue);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--ulik-space-2);
  padding-inline: var(--ulik-space-7);
  padding-block: var(--ulik-space-7);
}

.ulik-whatsnew-hero__eyebrow {
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-bold);
  font-size: var(--font-size-32);
  line-height: var(--ulik-lh-tight);
  color: var(--ulik-color-accent);
  text-transform: uppercase;
  letter-spacing: var(--ulik-ls-eyebrow);
}

.ulik-whatsnew-hero__title {
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-bold);
  font-size: var(--font-size-43);
  line-height: var(--ulik-lh-tight);
  color: var(--ulik-color-primary);
  margin: 0;
}

.ulik-whatsnew-hero__description {
  font-family: var(--ulik-font-body);
  font-weight: var(--ulik-fw-medium);
  font-size: var(--font-size-20);
  line-height: var(--ulik-lh-snug);
  color: var(--ulik-color-primary); /* confirmed via design context: same blue as the title here, unlike the Featured card's muted-grey description. */
}

.ulik-whatsnew-hero__media {
  position: relative;
  aspect-ratio: 684 / 624;
  overflow: hidden;
  background-color: var(--ulik-color-surface);
}

.ulik-whatsnew-hero__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ulik-whatsnew-hero__photo--placeholder {
  background-color: var(--ulik-color-surface);
}

.ulik-whatsnew-hero--reverse {
  grid-template-columns: minmax(0, 684fr) minmax(0, 756fr);
}
.ulik-whatsnew-hero--reverse .ulik-whatsnew-hero__media {
  order: -1;
}

/* ==========================================================================
   10. CONTACT US — ulik-contact
   Figma: Contact Us page, node 166:2231. Two-column band on the tinted
   section background (.ulik-section--surface handles the 100px vertical
   rhythm + #F5F7FA fill — no section-level CSS needed here). Left column:
   left-aligned header + four fixed info cards + a Business Hours card.
   Right column: a single white "Send an Enquiry" card that either echoes a
   user-supplied WPForms shortcode or shows a setup placeholder. The actual
   WPForms field styling lives in a separate PHP snippet scoped under
   .ulik-contact__form-card — see README.md → "Contact Us page".
   ========================================================================== */
.ulik-contact__grid {
  display: flex;
  align-items: flex-start;
  gap: 70px; /* Figma literal — falls between the --ulik-space-6 (50px) and --ulik-space-7 (80px) steps */
}

.ulik-contact__details {
  flex: 0 1 500px;
  display: flex;
  flex-direction: column;
  gap: var(--ulik-space-4);
  min-width: 0;
}

/* The shared .ulik-section__header component (ulik_section_header() in
   helpers/ulik-helpers.php — also used by USP, Products, Services, etc.)
   carries its own margin-bottom: var(--ulik-space-6) (50px) baked in. On
   this section specifically that stacked on TOP of .ulik-contact__details'
   own 30px flex gap above, doubling up to 80px of dead space between
   "Contact Details" and the first info card — client asked for that 50px
   removed (2026-09-10). Scoped to .ulik-contact only, so every other
   section using the same shared header component keeps its normal 50px. */
.ulik-contact .ulik-section__header {
  margin-bottom: 0;
}

.ulik-contact__form {
  flex: 1 1 600px;
  min-width: 0;
}

/* ---- Info cards (Address / Phone & Fax / WhatsApp / Email) ---- */
.ulik-contact__card {
  background-color: var(--ulik-color-white);
  border: 1px solid var(--ulik-color-border);
  border-radius: var(--ulik-radius-lg);
  padding: 25px 30px;
}

.ulik-contact__card-inner {
  display: flex;
  align-items: flex-start;
  gap: 25px;
}

.ulik-contact__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 59px;
  height: 54px;
  border-radius: var(--ulik-radius-md);
  background-color: var(--ulik-color-surface-tint);
  color: var(--ulik-color-primary);
}

.ulik-contact__card-icon svg,
.ulik-contact__card-icon img {
  width: 26px;
  height: 26px;
}

.ulik-contact__card-icon img {
  /* Uploaded icon images (via the "Icon Image" media picker) instead of the
     built-in inline SVGs — object-fit:contain keeps a non-square upload
     centered and unstretched inside the same 26x26 box the SVGs used,
     rather than distorting it to fill a mismatched aspect ratio. */
  object-fit: contain;
  display: block;
}

.ulik-contact__card-text {
  display: flex;
  flex-direction: column;
  gap: var(--ulik-space-1);
  min-width: 0;
}

.ulik-contact__card-title {
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-bold);
  font-size: var(--font-size-24);
  line-height: var(--ulik-lh-snug);
  color: var(--ulik-color-primary);
  margin: 0;
}

.ulik-contact__card-body {
  font-family: var(--ulik-font-body);
  font-weight: var(--ulik-fw-regular);
  font-size: var(--font-size-16);
  line-height: var(--ulik-lh-relaxed);
  color: var(--ulik-color-text-muted);
  margin: 0;
}

/* ---- Business Hours card (variant of the same card shell) ---- */
.ulik-contact__card--hours {
  padding: 0; /* .ulik-contact__card-inner--hours below owns the padding so its row dividers can run edge-to-edge */
}

.ulik-contact__card-inner--hours {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ulik-space-3);
  padding: 25px 30px;
}

.ulik-contact__hours-title {
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-bold);
  font-size: var(--font-size-24);
  line-height: var(--ulik-lh-snug);
  color: var(--ulik-color-primary);
  margin: 0;
}

.ulik-contact__hours-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--ulik-space-3);
  padding-bottom: var(--ulik-space-2);
  border-bottom: 1px solid var(--ulik-color-border);
}

.ulik-contact__hours-row--last {
  padding-bottom: 0;
  border-bottom: none;
}

.ulik-contact__hours-label {
  font-family: var(--ulik-font-body);
  font-weight: var(--ulik-fw-regular);
  font-size: var(--font-size-16);
  color: var(--ulik-color-text);
}

.ulik-contact__hours-value {
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-medium);
  font-size: var(--font-size-16);
  color: var(--ulik-color-accent);
}

/* ---- "Send an Enquiry" card shell (WPForms fields render inside via shortcode) ---- */
.ulik-contact__form-card {
  display: flex;
  flex-direction: column;
  gap: 0; /* client request (2026-09-10): no forced space between the card's own heading/description and the WPForms form beneath it — removed per direct feedback. */
  background-color: var(--ulik-color-white);
  border: 1px solid var(--ulik-color-border);
  border-radius: var(--ulik-radius-xl);
  padding: var(--ulik-space-6);
  box-shadow: 0 0 20px 5px rgba(var(--ulik-color-primary-rgb), 0.38);
}

.ulik-contact__form-head {
  display: flex;
  flex-direction: column;
  gap: var(--ulik-space-2);
}

/* ---- WPForms: minimal styling re-added by request (2026-09-10), after
   v2.22.0 removed all WPForms styling wholesale. This is intentionally a
   small, targeted set — not the old full field/border/input treatment —
   scoped under .ulik-contact__form-card so no other WPForms form on the
   site is touched. See the MOBILE breakpoint in ulik-responsive.css for
   the accompanying "stack every field to one per line" fix. ---- */
.ulik-contact__form-card .wpforms-field-label {
  color: var(--ulik-color-primary);
}

.ulik-contact__form-card button.wpforms-submit {
  background-color: var(--ulik-color-accent) !important;
  color: var(--ulik-color-white) !important;
}

.ulik-contact__form-card button.wpforms-submit:hover,
.ulik-contact__form-card button.wpforms-submit:focus-visible {
  background-color: var(--ulik-color-primary) !important;
  color: var(--ulik-color-white) !important; /* stays white on hover too, per client request — only the background changes */
}

.ulik-contact__form-title {
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-bold);
  font-size: var(--font-size-32);
  line-height: var(--ulik-lh-tight);
  color: var(--ulik-color-primary);
  margin: 0;
}

.ulik-contact__form-desc {
  font-family: var(--ulik-font-body);
  font-weight: var(--ulik-fw-regular);
  font-size: var(--font-size-16);
  line-height: var(--ulik-lh-relaxed);
  color: var(--ulik-color-text-muted);
  margin: 0;
}

.ulik-contact__form-placeholder {
  font-family: var(--ulik-font-body);
  font-weight: var(--ulik-fw-regular);
  font-size: var(--font-size-14);
  font-style: italic;
  line-height: var(--ulik-lh-relaxed);
  color: var(--ulik-color-text-muted);
  background-color: var(--ulik-color-surface);
  border: 1px dashed var(--ulik-color-border);
  border-radius: var(--ulik-radius-md);
  padding: var(--ulik-space-4);
  margin: 0;
}

.ulik-contact__form-placeholder code {
  background-color: var(--ulik-color-white);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
}

/* ---- Contact Us: Map (ulik-contact-map) ----
   Sits directly below .ulik-contact on the exact same --ulik-color-surface
   background with no visual seam between them (matches Figma, where both
   are one continuous frame) — so this section's own top padding is zeroed
   out here to avoid a double 100px gutter; its bottom padding stays at the
   .ulik-section default (100px), matching Figma's single pb-100 on that
   frame. */
.ulik-contact-map {
  padding-top: 0;
}

.ulik-contact-map__frame {
  position: relative;
  width: 100%;
  max-width: 1212px;
  margin-inline: auto;
  aspect-ratio: 1212 / 553;
  border-radius: var(--ulik-radius-xl);
  overflow: hidden;
  border: 1px solid var(--ulik-color-border);
}

.ulik-contact-map__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}