/* KOSCA — Home Page Styles */

/* ============================================================
   SHARED HELPERS (replace one-off inline styles)
   .section-actions and the CTA aurora/glass machinery now live in
   global.css (shared with About). This file keeps only home-specific
   tuning (the champagne .cta-strip--light overrides further down).
============================================================ */

/* Section header with title on the left and an action on the right. */
.section-header--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.section-header--split .section-title { margin-bottom: 0; }

/* ============================================================
   HERO
============================================================ */

.hero {
  position: relative;
  min-height: calc(100dvh - var(--nav-height) - 36px);
  display: flex;
  align-items: center;
  background: var(--color-text-primary);
  overflow: hidden;
}

/* --- Right-side image carousel --------------------------------
   Each slide is opaque on the far right and fades to fully
   transparent toward the left, so it never sits over the words.
   The gradient mask does the fade; crossfade swaps the active
   slide. Tune the mask stops to widen/narrow the clear zone. */
.hero__carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  /* Keep the image's focal subject on the right third */
  background-position: right center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;

  /* Fade: transparent behind the text on the left, ramping to fully opaque
     so the photo reads clearly across the right half. Clear band pulled
     leftward (vs the old 28-65%) so more of the photo is visible as a real
     image, not just faint texture behind the indigo bloom. */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    transparent 44%,
    #000 68%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0%,
    transparent 44%,
    #000 68%
  );
}

.hero__slide.is-active {
  opacity: 1;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Darkens the left for text legibility, then clears earlier and more
     fully so the carousel photo reads clearly across the right side. */
  background: linear-gradient(
    105deg,
    rgba(26, 26, 46, 0.92) 0%,
    rgba(26, 26, 46, 0.55) 24%,
    rgba(26, 26, 46, 0.12) 38%,
    rgba(26, 26, 46, 0) 50%
  );
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 620px;
  padding: var(--space-20) 0;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold-light);
  margin-bottom: var(--space-5);
}

.hero__eyebrow::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--color-gold-light);
}

.hero__title {
  font-family: var(--font-heading);
  /* Scaled so "South India's most trusted" holds on one line and
     "beauty distribution partner" on the next — a clean 2-line hero
     at desktop. Was 4rem, which forced a 4-line wrap in the 760px column. */
  font-size: clamp(2.25rem, 3.6vw, 3.25rem);
  font-weight: var(--weight-bold);
  line-height: 1.12;
  letter-spacing: var(--tracking-tight);
  color: #ffffff;
  margin-bottom: var(--space-5);
  max-width: 580px;
}

.hero__title em {
  font-style: italic;
  color: var(--color-gold-light);
}
.hero__title .hero-typed-wrap {
  font-style: italic;
}
/* cursor hidden until typing starts */
.hero__title .hero-typed-wrap::after {
  content: '|';
  display: inline-block;
  margin-left: 1px;
  color: transparent;
  animation: none;
}
.hero__title .hero-typed-wrap.is-typing::after {
  color: var(--color-gold-light);
  animation: hero-cursor-blink 0.75s step-end infinite;
}
@keyframes hero-cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.hero__subtitle {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: rgba(255,255,255,0.7);
  margin-bottom: var(--space-5);
}

/* Proof line — pairs the "most trusted" claim with a real number.
   Gold tick + light type, reads as a credential, not body copy. */
.hero__proof {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.82);
  margin-bottom: var(--space-10);
}

.hero__proof::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--color-gold);
  transform: translateY(-1px);
}

.hero__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Primary hero CTA: gold fill on the dark indigo hero — the brand's
   high-energy pairing, echoing the gold "most trusted" headline accent.
   Indigo text on gold keeps strong contrast. Scoped to the hero only. */
.hero__actions .btn--primary {
  background: linear-gradient(160deg, var(--color-gold-light) 0%, var(--color-gold) 100%);
  border-color: var(--color-gold);
  color: var(--color-brand-primary-dark);
  box-shadow: 0 8px 24px rgba(201, 162, 75, 0.30);
}

.hero__actions .btn--primary:hover {
  background: var(--color-gold-light);
  border-color: var(--color-gold-light);
  color: var(--color-brand-primary-dark);
  box-shadow: 0 12px 30px rgba(201, 162, 75, 0.42);
  transform: translateY(-2px);
}

/* Secondary hero CTA: gold-tinted "ghost" outline so it pairs with the
   gold primary as one system — still secondary (outline, not filled).
   Gold-light text for legibility on the dark hero (6.3:1). */
.hero__actions .btn--secondary {
  color: var(--color-gold-light);
  border-color: rgba(201, 162, 75, 0.55);
}

.hero__actions .btn--secondary:hover {
  background: rgba(201, 162, 75, 0.12);
  border-color: var(--color-gold);
  color: var(--color-gold-light);
}

@media (max-width: 768px) {
  .hero { min-height: 82dvh; }
  .hero__content { padding: var(--space-16) 0 var(--space-12); }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { text-align: center; justify-content: center; }
  /* Image carousel hidden on small screens — text-only hero */
  .hero__carousel { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
}

/* ============================================================
   ABOUT SNAPSHOT
============================================================ */

.about-snapshot {
  background: transparent;   /* let warm bg + colour blooms show through */
}

.about-snapshot__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.about-snapshot__text p {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

.about-snapshot__text .btn {
  margin-top: var(--space-2);
}

/* Gold text on the indigo primary buttons that sit on light/champagne
   sections — "Our Story" and "View All Services". */
.about-snapshot__text .btn--primary,
.services-overview .btn--primary {
  color: var(--color-gold-light);
}
.about-snapshot__text .btn--primary:hover,
.services-overview .btn--primary:hover {
  color: var(--color-gold-light);
}

/* Wrapper only — the inner .stats-grid does the layout (avoid nested grids
   fighting, which was squashing the cards into one cramped row). */
.about-snapshot__stats {
  display: block;
}

/* In this half-width column the shared 4-across grid is too tight, so make
   it a balanced 2x2 here. */
.about-snapshot__stats .stats-grid {
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

/* Stop the count-up from reflowing the layout "while ticking": fix the card
   height and use tabular figures so growing digits don't change width. */
.about-snapshot__stats .stat-card {
  min-height: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.about-snapshot__stats .stat-card__number {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

@media (max-width: 900px) {
  .about-snapshot__grid { grid-template-columns: 1fr; gap: var(--space-10); }
}

/* ============================================================
   SERVICES OVERVIEW
============================================================ */

/* ============================================================
   CORE STRENGTHS  —  drenched indigo "jewel" section
   The dark centerpiece between the two light sections (Who We Are
   above, What We Do below), giving the page an A–B–A rhythm.
   Cards are translucent glass over the indigo, with gold accents.
============================================================ */
.core-strengths {
  position: relative;
}

/* The section header eyebrow/title/subtitle read light on the indigo via the
   shared .section--indigo rules; just give the eyebrow the gold treatment. */
.about-snapshot .section-label { color: var(--color-gold-deep); }
.core-strengths .section-label { color: var(--color-gold-light); }

/* ------------------------------------------------------------
   HORIZONTAL HOVER-EXPAND ACCORDION
   Five panels in a row. The active panel grows to reveal its full
   content; the others collapse to slim spines with a vertical label
   + number. Width animates via flex-grow. Hover/focus/click driven.
------------------------------------------------------------ */
.strengths-accordion {
  position: relative;
  z-index: 1;
  margin-top: var(--space-12);
  display: flex;
  gap: var(--space-3);
  height: 510px;   /* tall enough for the longest vertical spine labels
                      ("Relationship Management") to clear the top edge, and
                      for the tallest expanded card (2-line title + 5-line
                      desc + stats) to fit beside the photo column without
                      overflow, so stats align across all cards */
}

.strength-panel {
  position: relative;
  flex: 0 1 96px;         /* collapsed default — narrow spine; only flex-grow
                             changes when active, so the expand animates smoothly */
  min-width: 0;
  overflow: hidden;
  display: block;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(201, 162, 75, 0.28);   /* faint gold edge */
  /* Collapsed = CHAMPAGNE tile, slightly muted (deeper champagne) so it reads
     as "resting" next to the brighter active panel. Dark text inside. */
  background:
    radial-gradient(130% 120% at 90% 8%, rgba(201, 162, 75, 0.14) 0%, transparent 55%),
    linear-gradient(165deg, var(--color-champagne-deep) 0%, #E0D3B2 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 24px rgba(15, 12, 45, 0.22);
  /* Smoother: longer, expressive ease for the width; gentler colour/edge fades */
  transition:
    flex-grow 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.5s ease,
    background 0.5s ease,
    box-shadow 0.5s ease;
}

/* Active = brighter CHAMPAGNE panel with a strong gold edge + deeper shadow,
   so it clearly lifts off the resting collapsed champagne tiles. */
.strength-panel.is-active {
  flex-grow: 9;           /* only flex-grow changes (basis stays 96px) → smooth
                             expand; a high grow makes the active panel much
                             wider than the 4 narrow collapsed spines */
  border-color: var(--color-gold);
  background:
    radial-gradient(120% 120% at 88% 0%, rgba(201, 162, 75, 0.20) 0%, transparent 55%),
    linear-gradient(160deg, #FBF4E4 0%, var(--color-champagne) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 24px 56px rgba(15, 12, 45, 0.42);   /* deep-indigo cast shadow under the light panel */
}

.strength-panel:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* --- Collapsed spine: vertical label + number, shown only when collapsed --- */
.strength-panel__spine {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) 0;
  opacity: 1;
  transition: opacity 0.45s ease;
}

.strength-panel.is-active .strength-panel__spine {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;   /* fade the spine out quickly as it expands */
}

/* Collapsed spine icon — small indigo chip with a gold glyph, sits at the top
   of each champagne spine (replaces the old 01/02 number). */
.strength-panel__spine-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, var(--color-brand-primary) 0%, var(--color-brand-primary-dark) 100%);
  border: 1px solid rgba(201, 162, 75, 0.4);
  color: var(--color-gold-light);
  box-shadow: 0 4px 12px rgba(43, 38, 96, 0.22);
}

.strength-panel__spine-label {
  /* vertical text reading bottom-to-top */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}

/* --- Expanded content: only visible when active --- */
.strength-panel__content {
  position: absolute;
  /* FIXED width, NO max-width cap. This is the key to a flicker-free expand:
     the text is laid out once at the full width and never re-wraps as the
     panel grows. In a collapsed (narrow) panel the fixed-width box overflows
     to the left and is simply clipped by overflow:hidden. */
  top: 0;
  bottom: 0;
  right: 0;
  width: 620px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-2);
  padding: var(--space-10) var(--space-10) var(--space-10) var(--space-10);
  padding-top: calc(var(--space-10) + 80px);
  opacity: 0;
  visibility: hidden;        /* fully hidden when collapsed — no flash/clip */
  /* Only fade in (no slide) and wait until the panel is mostly open (0.34s),
     so the text appears already at full width — no reflow visible. Promote to
     its own layer so the fade is composited, not repainted each frame. */
  transition: opacity 0.32s ease 0.34s,
              visibility 0s linear 0.34s;
  will-change: opacity;
}

.strength-panel.is-active .strength-panel__content {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.32s ease 0.3s,
              visibility 0s linear 0s;
}

/* Content sits on the CHAMPAGNE active panel → dark indigo text, deep-gold
   accents (gold-deep reads at 4.9:1 on the light champagne). */
.strength-panel__icon {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;          /* never let the flex column squash the icon */
  align-self: flex-start;  /* keep it square, hug the left edge */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  /* Indigo jewel tile with a gold glyph — pops on the light champagne */
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,0.14) 0%, transparent 55%),
    linear-gradient(160deg, var(--color-brand-primary) 0%, var(--color-brand-primary-dark) 100%);
  border: 1px solid rgba(201, 162, 75, 0.5);
  color: var(--color-gold-light);
  box-shadow: 0 8px 20px rgba(43, 38, 96, 0.26);
  margin-bottom: var(--space-1);
}

.strength-panel__title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);   /* dark indigo on champagne */
  line-height: var(--leading-tight);
  /* Stay clear of the top-right stat column (long titles like "Relationship
     Management" must not run under it). */
  max-width: 22ch;
}

.strength-panel__title::after {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  margin-top: var(--space-3);
  /* deep-gold underline reads on the light champagne */
  background: linear-gradient(90deg, var(--color-gold-deep), transparent);
  border-radius: 2px;
}

.strength-panel__desc {
  font-size: var(--text-md);
  color: var(--color-text-secondary);   /* muted indigo-grey on champagne */
  line-height: var(--leading-relaxed);
}

/* Highlight stats — pinned to the TOP-RIGHT of the panel, laid out
   HORIZONTALLY (side by side) with a vertical gold divider between them. */
.strength-panel__stats {
  position: absolute;
  top: var(--space-8);
  right: var(--space-10);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-6);
  text-align: center;
}

.strength-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

/* faint vertical gold rule between the two side-by-side stats */
.strength-stat + .strength-stat {
  padding-left: var(--space-6);
  border-left: 1px solid rgba(138, 109, 31, 0.28);
}

.strength-stat__value {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: 1.1;
  color: var(--color-gold-deep);   /* gold figure on champagne */
  white-space: nowrap;
}

.strength-stat__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* Text column wrapper — present on every panel. Without an image it lays
   out exactly like the old content column (vertical stack); the absolute
   stats are positioned against .strength-panel__content as before. */
.strength-panel__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ---- Optional photo column (panels with .has-image) -----------------
   Split the expanded content into a text column + a tall photo on the
   right. The stats, normally pinned top-right (where the photo now
   sits), flow inline at the bottom of the text instead. */
.strength-panel.has-image .strength-panel__content {
  /* Wider fixed content box than the text-only 620px, so the active panel
     can grow and the photo column gets real width. Stays fixed for the
     flicker-free expand (laid out once, never re-wraps). Matched to the
     active panel's rendered width so the left padding isn't clipped. */
  width: 720px;
  flex-direction: row;
  align-items: stretch;
  gap: var(--space-8);
  /* Even padding all round: drop the reserved top space for the (now
     relocated) absolute stats and match top/bottom so the photo column
     sits symmetrically inside the panel. */
  padding: var(--space-10);
}

.strength-panel.has-image .strength-panel__text {
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;        /* fill full content height so margin-top:auto works */
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.strength-panel.has-image .strength-panel__stats {
  position: static;
  margin-top: auto;           /* pin to the bottom of the text column → aligned across cards */
  padding-top: var(--space-6);
}

.strength-panel__photo {
  flex: 0 0 44%;
  align-self: stretch;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: rgba(43, 38, 96, 0.08);
  border: 1px solid rgba(201, 162, 75, 0.35);
  box-shadow: 0 0 32px 8px rgba(61, 54, 128, 0.45);
}

.strength-panel__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Tablet + mobile: the horizontal hover-accordion can't fit its expanded panel
   below ~900px (text clips against the collapsed spines), so switch to a
   vertical stack where the active panel expands downward. */
@media (max-width: 900px) {
  .strengths-accordion {
    flex-direction: column;
    height: auto;
    gap: var(--space-3);
  }
  .strength-panel { flex: none; }
  .strength-panel.is-active { flex: none; }

  /* Spine becomes a horizontal header bar */
  .strength-panel__spine {
    position: relative;
    inset: auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
  }
  .strength-panel.is-active .strength-panel__spine {
    opacity: 1;          /* keep the header visible above expanded content */
    pointer-events: auto;
  }
  .strength-panel__spine-label {
    writing-mode: horizontal-tb;
    transform: none;
  }
  /* Active panel is champagne → its header label must flip to dark indigo
     (white-on-champagne fails contrast). The icon chip stays as-is. */
  .strength-panel.is-active .strength-panel__spine-label { color: var(--color-text-primary); }

  /* Content flows below the header instead of absolute-positioning */
  .strength-panel__content {
    position: relative;
    inset: auto;
    right: auto;
    width: auto;          /* reset the desktop fixed width — full panel width */
    min-width: 0;
    height: 0;
    padding: 0 var(--space-6);
    overflow: hidden;
    visibility: visible;  /* mobile uses height collapse, not visibility */
    transform: none;
    justify-content: flex-start;
    transition: height var(--transition-slow), opacity var(--transition-base), padding var(--transition-base);
  }
  .strength-panel.is-active .strength-panel__content {
    height: auto;
    padding: 0 var(--space-6) var(--space-8);
  }
  /* Number, icon and content-title are redundant on mobile — the header bar
     already shows the number + title. Keep only the description in the body. */
  .strength-panel__num,
  .strength-panel__icon,
  .strength-panel__title { display: none; }
  .strength-panel__desc { font-size: var(--text-base); padding-top: var(--space-1); }
  /* On mobile the stats flow back in-line below the description (the absolute
     top-right placement is a desktop-only device). Row of two, left-aligned. */
  .strength-panel__stats {
    position: static;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-6);
    text-align: center;
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(138, 109, 31, 0.28);
  }
  .strength-stat { align-items: center; }
  .strength-stat__value { font-size: var(--text-xl); }
}

/* Reduced motion: no width glide / fades — instant expand */
@media (prefers-reduced-motion: reduce) {
  .strength-panel,
  .strength-panel__spine,
  .strength-panel__content { transition: none; }

  /* Logo hover glow: keep the fade, drop the scale motion (stay centred). */
  .brand-logo__slot::before { transition: opacity var(--transition-base); transform: translate(-50%, -50%); }
  .brands-marquee__item:hover .brand-logo__slot:has(.brand-logo__img.is-loaded)::before { transform: translate(-50%, -50%); }
  /* Logo glint sweep: no motion for reduced-motion users. */
  .brands-marquee__item:hover .brand-logo__slot:has(.brand-logo__img.is-loaded)::after { animation: none; }
}


.services-overview {
  /* background comes from .section--champagne utility */
}

/* ------------------------------------------------------------
   SERVICES — numbered editorial list (not cards).
   A deliberate break from the card-grid layout family used in
   Strengths / News / Spotlight. Borderless rows, gold serif index,
   hairline dividers. Two columns at desktop so six rows read as
   a balanced 3+3 block; single column below.
------------------------------------------------------------ */
.services-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-12);
}

.service-row {
  /* hairline divider between rows; the row's link carries the hover state */
  border-top: 1px solid var(--color-border);
}

/* First row in each column has no top rule (cleaner top edge) */
.services-list .service-row:nth-child(1),
.services-list .service-row:nth-child(2) {
  border-top: 0;
}

.service-row__link {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr auto;   /* icon · body · arrow (number removed) */
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-2) var(--space-6) var(--space-2);
  text-decoration: none;
  transition: padding-left var(--transition-base);
}

.service-row__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  /* Jewel icon chip — deep indigo with gold glyph */
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,0.12) 0%, transparent 55%),
    linear-gradient(160deg, var(--color-brand-primary) 0%, var(--color-brand-primary-dark) 100%);
  border: 1px solid rgba(201, 162, 75, 0.30);
  color: var(--color-gold-light);
  box-shadow: 0 4px 12px rgba(43, 38, 96, 0.18);
  transition: transform var(--transition-base);
}

.service-row__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-1);
}

.service-row__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
}

.service-row__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong);
  color: var(--color-brand-primary);
  flex-shrink: 0;
  transition: background var(--transition-base), border-color var(--transition-base),
              color var(--transition-base), transform var(--transition-base);
}

/* Hover: row nudges right, icon lifts, arrow fills gold */
.service-row__link:hover { padding-left: var(--space-5); }
.service-row__link:hover .service-row__icon { transform: scale(1.06); }
.service-row__link:hover .service-row__title { color: var(--color-brand-primary); }
.service-row__link:hover .service-row__arrow {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-brand-primary-dark);
  transform: translateX(2px);
}

/* Focus ring for keyboard users (a11y) */
.service-row__link:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-md);
}

@media (max-width: 820px) {
  .services-list { grid-template-columns: 1fr; column-gap: 0; }
  /* Single column now: only the very first row drops its top rule */
  .services-list .service-row:nth-child(2) { border-top: 1px solid var(--color-border); }
  .services-list .service-row:nth-child(1) { border-top: 0; }
}

@media (max-width: 480px) {
  .service-row__link {
    grid-template-columns: auto 1fr auto;
    gap: var(--space-4);
    padding-block: var(--space-5);
  }
  /* Hide the icon chip on the tightest screens; number + title carry it */
  .service-row__icon { display: none; }
}

/* ============================================================
   BRAND PARTNERS STRIP
============================================================ */

/* Deep indigo brand wall — distinct from the warm-ivory neighbours, and the
   dark field makes the logo placeholders read as a premium partner showcase */
.brands-strip {
  position: relative;
  overflow: hidden;
  /* same lavender + gold bloom atmosphere as the other indigo sections */
  background:
    radial-gradient(70% 110% at 12% 0%, rgba(107, 95, 212, 0.40) 0%, transparent 60%),
    radial-gradient(70% 110% at 92% 100%, rgba(201, 162, 75, 0.20) 0%, transparent 58%),
    linear-gradient(160deg, var(--color-brand-primary) 0%, var(--color-brand-primary-dark) 100%);
}

/* Header text flips to light on the dark band */
.brands-strip .section-title { color: #fff; }
.brands-strip .section-subtitle { color: rgba(255, 255, 255, 0.72); }
.brands-strip .section-label { color: var(--color-gold-light); }

/* Master company logo — lead element above the product-range marquee.
   Bigger and centred, with a small gold caption, so the Wella company brand
   reads as the headline relationship and the ranges below as its portfolio. */
.brands-master {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-10);
}

.brands-master__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.brands-master__logo {
  height: 120px;
  width: auto;
  max-width: 420px;
  object-fit: contain;
  /* SVG renders its own white-on-transparent mark — no filter (invert would
     turn its internal colour-matrix into a solid white block). */
  opacity: 0.95;
}

/* Hairline under the master logo, separating it from the scrolling ranges */
.brands-master::after {
  content: '';
  width: 64px;
  height: 1px;
  margin-top: var(--space-2);
  background: var(--gradient-gold-hairline);
}

/* Buttons read on the dark band: primary becomes gold, secondary white-outlined */
.brands-strip .btn--primary,
.spotlight-section .btn--primary {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-brand-primary-dark);
}
.brands-strip .btn--primary:hover,
.spotlight-section .btn--primary:hover {
  background: var(--color-gold-light);
  border-color: var(--color-gold-light);
  color: var(--color-brand-primary-dark);
}
/* Gold-outline secondary (matches the hero "Our Services" button). */
.brands-strip .btn--secondary {
  color: var(--color-gold-light);
  border-color: rgba(201, 162, 75, 0.55);
  background: transparent;
}
.brands-strip .btn--secondary:hover {
  background: rgba(201, 162, 75, 0.12);
  border-color: var(--color-gold);
  color: var(--color-gold-light);
}

.brands-marquee-wrap {
  position: relative;
  overflow: hidden;
  margin-top: var(--space-10);
  /* fade the edges so logos scroll in/out softly */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.brands-marquee {
  display: flex;
  gap: var(--space-6);
  animation: marqueeScroll 38s linear infinite;
  width: max-content;
}

.brands-marquee:hover {
  animation-play-state: paused;
}

.brands-marquee__item {
  flex-shrink: 0;
}

/* Logo-only tile — just the chip, no name label beneath it. */
.brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  /* No outer card, no name — the logo speaks for itself. */
}

/* Hover: the chip gets a white card so the logo's real colours appear bright
   and readable (incl. dark logos like Sebastian). See the hover rules below. */

/* Framed square logo slot — one consistent square placeholder per category,
   visible until a real logo loads */
.brand-logo__slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 130px;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  /* faint placeholder frame; becomes invisible once the logo fills it */
  border: 1px dashed rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  transition: background var(--transition-base), box-shadow var(--transition-base);
}

/* Soft glow bloom — a round, evenly-radiating halo centred on the card.
   Fixed square size (not inset %) so it reads as a circular bloom, not a
   horizontal left/right smear. */
.brand-logo__slot::before {
  content: '';
  position: absolute;
  width: 240px;
  height: 240px;
  top: 50%;
  left: 50%;
  z-index: -1;
  border-radius: var(--radius-full);
  background: radial-gradient(circle,
    rgba(201, 162, 75, 0.45) 0%,
    rgba(107, 95, 212, 0.28) 42%,
    transparent 68%);
  filter: blur(30px);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
  transition: opacity var(--transition-base), transform var(--transition-base);
  pointer-events: none;
}

/* Glint sweep — a bright diagonal light streak that wipes across the card on
   hover, like a blade catching light. Clipped to the rounded card via
   clip-path (so it never touches the glow ::before). Resting off to the left. */
.brand-logo__slot::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--radius-md);
  clip-path: inset(0 round var(--radius-md));
  background: linear-gradient(105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.20) 46%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0.20) 54%,
    transparent 62%);
  background-size: 250% 100%;
  background-position: 180% 0;   /* streak parked off the right edge */
  opacity: 0;
  pointer-events: none;
}

/* When the logo has loaded, drop the placeholder frame */
.brand-logo__slot:has(.brand-logo__img.is-loaded) {
  border-color: transparent;
  background: transparent;
}

/* No logo file yet: a gold monogram fills the slot so it reads as
   intentional brand chip, never an empty/broken placeholder. */
.brand-logo__slot:has(.brand-logo__mono) {
  border-style: solid;
  border-color: rgba(201, 162, 75, 0.30);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,0.10) 0%, transparent 55%),
    linear-gradient(160deg, rgba(107,95,212,0.25) 0%, rgba(43,38,96,0.45) 100%);
}

.brand-logo__mono {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--color-gold-light);
}

.brand-logo__img {
  max-height: 110px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  /* Rest: force every logo to a flat white silhouette on the dark band. */
  filter: brightness(0) invert(1);
  opacity: 0;
  transition: opacity var(--transition-base), filter var(--transition-base);
}

.brand-logo__img.is-loaded { opacity: 0.92; }

/* Hover: a soft (not stark-white) card so the logo's real colours read
   without the white dominating the dark band. */
.brands-marquee__item:hover .brand-logo__slot:has(.brand-logo__img.is-loaded) {
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 12, 45, 0.30);
}

/* Hover: bloom the soft glow halo out from behind the card. */
.brands-marquee__item:hover .brand-logo__slot:has(.brand-logo__img.is-loaded)::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}

/* Hover: fire the glint sweep across the card — fast, one-shot. */
.brands-marquee__item:hover .brand-logo__slot:has(.brand-logo__img.is-loaded)::after {
  animation: logoGlint 0.55s ease-out;
}

@keyframes logoGlint {
  0%   { opacity: 0; background-position: 180% 0; }
  15%  { opacity: 1; }
  100% { opacity: 0; background-position: -80% 0; }
}

/* Hover: dark logos show real colour on the white card. */
.brands-marquee__item:hover .brand-logo__img.is-loaded {
  filter: none;
  opacity: 1;
}

/* Light/pale logos would vanish on the white card — darken them on hover so
   they read clearly while keeping their hue. */
.brands-marquee__item:hover .brand-logo__slot[data-tone="light"] .brand-logo__img.is-loaded {
  filter: brightness(0.4) saturate(1.3);
}

.brand-logo__name {
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  letter-spacing: var(--tracking-wide);
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Timeline styles moved to global.css */

/* ============================================================
   ACADEMY TEASER
============================================================ */

.academy-teaser {
  /* background comes from .section--champagne utility */
}

.academy-teaser__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

/* lead paragraph spacing before the CTA (was an inline style) */
.academy-teaser .text-lead { margin-bottom: var(--space-8); }

/* Academy teaser CTA: indigo button with a gold label */
.academy-teaser .btn--primary { color: var(--color-gold-light); }

/* Champagne panel gives the right column structure and warmth, lifting the
   benefits off the indigo gradient. Light panel → dark text inside. */
.academy-teaser__benefits {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-primary-dark) 60%, #6b3fa0 100%);
  border: 1px solid rgba(201, 162, 75, 0.25);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  box-shadow: 0 18px 44px rgba(43, 38, 96, 0.30);
}

.academy-teaser__benefit {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  transition: background var(--transition-base);
}

/* Hairline separator between rows — a gold-tinted rule that fades at the
   ends so it reads as a divider, not a hard line. */
.academy-teaser__benefit + .academy-teaser__benefit {
  position: relative;
}
.academy-teaser__benefit + .academy-teaser__benefit::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--space-4);
  right: var(--space-4);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15) 20%, rgba(255, 255, 255, 0.15) 80%, transparent);
}

.academy-teaser__benefit:hover {
  background: rgba(255, 255, 255, 0.07);
}

/* Stagger the three benefits in (the list is a single .reveal block;
   stepped delays make them cascade rather than appear all at once). */
.academy-teaser__benefit:nth-child(1) { transition-delay: 0.15s; }
.academy-teaser__benefit:nth-child(2) { transition-delay: 0.28s; }
.academy-teaser__benefit:nth-child(3) { transition-delay: 0.41s; }

/* Same jewel tile as the "What We Do" service rows: deep indigo gradient
   with a sheen and a gold ring. Glyph is a solid champagne-gold (currentColor)
   so it stays warm against the indigo with no paint-server dependency. */
.academy-teaser__benefit-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, #fff8ee 0%, #e8c97a 50%, #b8820f 100%);
  border: 1px solid rgba(201, 162, 75, 0.35);
  color: var(--color-brand-primary);
  box-shadow: 0 4px 12px rgba(43, 38, 96, 0.25);
}

.academy-teaser__benefit-title {
  font-weight: var(--weight-semibold);
  color: var(--color-champagne-deep);
  margin-bottom: var(--space-1);
}

.academy-teaser__benefit-desc {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.72);
  line-height: var(--leading-relaxed);
}

/* CTA arrow nudges on hover */
.academy-teaser .btn--primary .arrow {
  display: inline-block;
  transition: transform var(--transition-base);
}
.academy-teaser .btn--primary:hover .arrow {
  transform: translateX(4px);
}

@media (max-width: 900px) {
  .academy-teaser__grid { grid-template-columns: 1fr; gap: var(--space-10); }
}

@media (prefers-reduced-motion: reduce) {
  .academy-teaser__benefit { transition-delay: 0s; }
  .academy-teaser .btn--primary .arrow { transition: none; }
}

/* ============================================================
   EMPLOYEE SPOTLIGHT
============================================================ */

/* Team Behind the Work — champagne section (background from .section--champagne).
   Eyebrow uses deep gold; heading stays the default dark via the champagne utility. */
.spotlight-section .section-label { color: var(--color-gold-deep); }

/* Latest News — indigo section (background from .section--indigo-gold; the utility
   already flips heading text light). Single CTA on indigo → gold button. */
.news-section .btn--primary {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-brand-primary-dark);
}
.news-section .btn--primary:hover {
  background: var(--color-gold-light);
  border-color: var(--color-gold-light);
  color: var(--color-brand-primary-dark);
}

/* The champagne .cta-strip--light treatment now lives in global.css (shared
   by Home + About). The aurora/glass machinery is there too. */

.spotlight-card {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  box-shadow: 0 16px 40px rgba(43, 38, 96, 0.22);
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-8);
  align-items: center;
  overflow: hidden;
}

/* gold hairline crowning the card */
.spotlight-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.spotlight-card__photo {
  width: 140px;
  height: 168px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  border: 1px solid var(--color-brand-primary-faint);
}

.spotlight-section .spotlight-card__photo-placeholder {
  width: 140px;
  height: 168px;
  border-radius: var(--radius-lg);
  /* jewel panel — deep indigo with gold initials + gold edge */
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,0.12) 0%, transparent 55%),
    linear-gradient(160deg, var(--color-brand-primary) 0%, var(--color-brand-primary-dark) 100%);
  border: 1px solid rgba(201, 162, 75, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold-light);
  font-size: var(--text-3xl);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
}

.spotlight-section .spotlight-card__badge {
  display: block;
  grid-column: 1 / -1;
  width: fit-content;
  margin: calc(var(--space-4) - var(--space-8)) auto calc(var(--space-3) - var(--space-8));
  /* indigo fill with gold text */
  background: var(--color-brand-primary);
  color: var(--color-gold-light);
  border: 1px solid var(--color-brand-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.spotlight-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.spotlight-card__role {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.spotlight-card__achievement {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.spotlight-card__quote {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-style: italic;
  color: var(--color-text-primary);
  border-left: 3px solid var(--color-gold);   /* gold quote rule — jewel accent */
  padding-left: var(--space-4);
  line-height: var(--leading-relaxed);
}

@media (max-width: 600px) {
  .spotlight-card {
    grid-template-columns: 1fr;
    text-align: center;
    padding: var(--space-8) var(--space-6);
  }
  .spotlight-card__photo,
  .spotlight-card__photo-placeholder { margin: 0 auto; }
  .spotlight-card__quote { text-align: left; }
}

/* Spotlight grid — count-aware wrapper */
.spotlight-grid {
  display: grid;
  gap: var(--space-6);
  max-width: 980px;
  margin: 0 auto;
}
.spotlight-grid--solo  { grid-template-columns: 1fr; max-width: 760px; }
.spotlight-grid--duo   { grid-template-columns: 1fr 1fr; }
.spotlight-grid--trio  { grid-template-columns: 1fr 1fr; }
.spotlight-grid--trio  > .spotlight-card:nth-child(3) { grid-column: 1 / -1; }
.spotlight-grid--multi { grid-template-columns: 1fr 1fr; }
.spotlight-grid--multi > .spotlight-card:nth-child(odd):last-child { grid-column: 1 / -1; }
/* In multi-column rows, tighten the photo so text doesn't get crowded */
.spotlight-grid--duo .spotlight-card,
.spotlight-grid--trio .spotlight-card,
.spotlight-grid--multi .spotlight-card { grid-template-columns: 110px 1fr; }
@media (max-width: 760px) {
  .spotlight-grid { grid-template-columns: 1fr !important; }
  .spotlight-grid .spotlight-card { grid-template-columns: 1fr; text-align: center; }
  .spotlight-grid .spotlight-card__photo,
  .spotlight-grid .spotlight-card__photo-placeholder { margin: 0 auto; }
}

/* ============================================================
   NEWS CARDS
============================================================ */

.news-section {
  /* background comes from .section--champagne utility (alternation rhythm) */
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

/* Empty state — compact, centered, honest (replaces 3 fake placeholder cards) */
.news-grid:empty { display: none; }

.news-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  max-width: 440px;
  margin: var(--space-6) auto 0;
  padding: var(--space-10) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  color: var(--color-brand-primary);
}

.news-empty__text {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.news-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

/* Gold hairline crowning each card — faint at rest to tie the white cards to
   the jewel palette, brightening on hover. */
.news-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  opacity: 0.45;
  transition: opacity var(--transition-base);
  z-index: 1;
}

.news-card:hover::before { opacity: 1; }

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.news-card__image {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: var(--color-brand-primary-faint);
}

/* Soft indigo→champagne wash so the empty image area reads as intentional
   brand texture rather than a flat grey block. Faint gold icon sits on top. */
.news-card__image-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background:
    radial-gradient(120% 120% at 25% 15%, rgba(255,255,255,0.35) 0%, transparent 55%),
    linear-gradient(150deg,
      var(--color-brand-primary-faint) 0%,
      #E7DEEC 45%,
      var(--color-champagne) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold-deep);
  opacity: 0.85;
}
.news-card__image-placeholder svg { opacity: 0.55; }

.news-card__body {
  padding: var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.news-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.news-card__category {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gold-deep);   /* gold category label — jewel accent */
}

.news-card__date {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.news-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
  flex: 1;
}

.news-card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
}

/* "Read More" styled as the Meet-the-Team button: indigo pill, gold text.
   Scoped to .news-section so it beats the tokens.css [class*="card"] override
   that forces dark text on indigo sections. */
.news-section .news-card__link {
  align-self: flex-start;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-gold-light);
  background: var(--color-brand-primary);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  transition: gap var(--transition-fast), background var(--transition-base);
}

.news-section .news-card:hover .news-card__link {
  gap: var(--space-2);
  background: var(--color-brand-primary-dark);
  color: var(--color-gold-light);
}

@media (max-width: 900px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .news-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   LIFE AT KOSCA — gallery marquee
   Sits below the news cards (dark indigo section). Continuous
   horizontal scroll; track is duplicated in markup for a seamless
   loop (reuses the marqueeScroll keyframe). Admin-managed photos,
   placeholders until uploaded.
============================================================ */
/* Gold eyebrow above the marquee. Scoped under the section + container so it
   beats `.section--indigo-gold > .container > p` (which would otherwise force
   white text on this <p>). */
.section--indigo-gold > .container > .gallery-marquee__label {
  margin-top: var(--space-12);
  margin-bottom: var(--space-5);
  text-align: center;
  color: var(--color-gold-light);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gallery-marquee-wrap {
  position: relative;
  overflow: hidden;
  margin-top: var(--space-4);   /* label now provides the top gap */
  /* short, soft edge fade — narrow dissolve into the champagne ground */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,0.5) 2%, #000 6%, #000 94%, rgba(0,0,0,0.5) 98%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,0.5) 2%, #000 6%, #000 94%, rgba(0,0,0,0.5) 98%, transparent 100%);
}

.gallery-marquee {
  display: flex;
  gap: var(--space-5);
  width: max-content;
  animation: marqueeScroll 50s linear infinite;
}
.gallery-marquee-wrap:hover .gallery-marquee { animation-play-state: paused; }

.gallery-marquee__item {
  flex-shrink: 0;
  position: relative;
  margin: 0;
  width: 300px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  /* lift each tile off the dark section so it reads as a card, not a ghost */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.gallery-marquee__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.gallery-marquee__item:hover img { transform: scale(1.05); }

.gallery-marquee__item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-6) var(--space-4) var(--space-3);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  background: linear-gradient(to top, rgba(20, 18, 48, 0.85) 0%, transparent 100%);
}

/* Placeholder tiles — jewel wash + centred icon until photos are uploaded.
   Brighter face + gold edge so they separate from the indigo section ground. */
.gallery-marquee__item--ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  border-color: rgba(201, 162, 75, 0.45);
  color: var(--color-gold-light);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,0.14) 0%, transparent 55%),
    linear-gradient(160deg, #4b4290 0%, var(--color-brand-primary) 100%);
}
.gallery-marquee__item--ph .gallery-marquee__icon { opacity: 0.85; line-height: 0; }
.gallery-marquee__item--ph figcaption {
  position: static;
  padding: 0;
  background: none;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.02em;
}
/* tonal variety so duplicated placeholders aren't a flat repeating block */
.gallery-marquee__item--2, .gallery-marquee__item--5 {
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,0.12) 0%, transparent 55%),
    linear-gradient(160deg, #4b4290 0%, var(--color-brand-primary) 100%);
}
.gallery-marquee__item--3, .gallery-marquee__item--6 {
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,0.10) 0%, transparent 55%),
    linear-gradient(160deg, var(--color-brand-primary) 0%, var(--color-brand-primary-dark) 100%);
}

@media (max-width: 600px) {
  .gallery-marquee__item { width: 230px; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-marquee { animation: none; }
}