/* =============================================================
   ALAQAAR — SECTION STYLES
   One block per page section, in the same order they appear on
   the page (Hero → About → Services → Projects → Our Media →
   Testimonials → Biography → Contact). Shared tokens/reset/header/
   footer live in site.css.
   ============================================================= */

/* ---------- Hero ----------
   Full-bleed, full-viewport-height photo with a large, dramatic uppercase
   headline — the signature move of the flair-egypt.com reference, adapted
   here with real ALAQAAR photography and bilingual type (see fonts.css /
   [dir="ltr"] letter-spacing in site.css for why Arabic doesn't get the
   same tracking treatment as English). */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  color: var(--color-white);
  overflow: hidden;

  /* Tuning knobs for the navy curtain (.hero__overlay) — change them here only.
     base = over the whole photo; peak = behind the caption and along the bottom. */
  --hero-curtain-rgb: 35 45 54; /* #232d36 (--color-ink) as RGB channels, so the alphas below can be applied */
  --hero-curtain-base: 0.32;
  --hero-curtain-peak: 0.45;

  /* "White inlaid with gold" caption word (.hero__caption-word). */
  --hero-word-white: #ffffff;
  --hero-word-gold-light: #f0dfc0;
  --hero-word-gold: var(--color-gold); /* #b28a50 */
  --hero-word-glow: rgba(203, 168, 118, 0.5);
  --hero-sub-color: #fbf6ee; /* white with a faint warm cream tint */

  /* Caption size/position (.hero__captions). Sizes are ~20% larger than the
     2026-09-24 ones on desktop and shrink smoothly to phone size. The inset
     lines the captions up with the VISIBLE navbar logo: the centred
     container's margin (very wide screens) + its gutter + the logo's own
     margin + the transparent margin inside the logo PNG — the same
     variables the navbar uses (site.css :root), so the two can't drift.
     Phones (no logo above the hero) use --hero-mobile-side-pad instead. */
  --hero-word-size: clamp(2rem, 1.62rem + 2.59vw, 4.5rem);
  --hero-sub-size: clamp(1rem, 0.96rem + 0.54vw, 1.56rem);
  --hero-caption-width: 42rem;
  --hero-mobile-side-pad: 1.5rem;
  --hero-caption-inset: calc(max(0px, (100% - var(--container-max)) / 2) + var(--gutter) + var(--navbar-brand-margin) + var(--navbar-logo-art-start));

  /* Image-name pill (.hero__badge): fixed size on every slide, the name
     ellipsizes if it's longer. Desktop values; phones override below. */
  --hero-badge-width: 30rem;
  --hero-badge-top: 15%;
  --hero-badge-pad-block: 0.7rem;
  --hero-badge-pad-start: 2rem;   /* before the name */
  --hero-badge-pad-end: 1.4rem;   /* after the arrow pair */
  --hero-badge-gap: 1.25rem;
  --hero-badge-font: clamp(0.85rem, 0.73rem + 0.43vw, 1.04rem);
  --hero-badge-arrow: 2.8rem;
  --hero-badge-arrow-icon: 1.15rem;
  --hero-badge-arrow-gap: 0.45rem;
}
@media (max-width: 575.98px) {
  .hero {
    --hero-caption-inset: var(--hero-mobile-side-pad);
    --hero-badge-width: calc(100% - 2 * var(--hero-mobile-side-pad));
    --hero-badge-top: calc(var(--mobile-header-height) + 1rem); /* below the floating hamburger */
    --hero-badge-pad-block: 0.45rem;
    --hero-badge-pad-start: 1.1rem;
    --hero-badge-pad-end: 0.5rem;
    --hero-badge-gap: 0.75rem;
    --hero-badge-font: 0.88rem;
    --hero-badge-arrow: 2.2rem;
    --hero-badge-arrow-icon: 0.9rem;
    --hero-badge-arrow-gap: 0.3rem;
  }
}
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Navy curtain: one layer above every slide (a sibling of .hero__slides, so
   it never zooms with the Ken Burns effect) and below all hero content
   (captions/badges/arrows/dots all carry z-index 1-2). A flat base tint
   keeps the photos' colors, plus two soft layers — one behind the caption
   column, one rising from the bottom — whose alpha is solved so that, laid
   over the base, each reaches --hero-curtain-peak at its densest point.
   Plain rgb(channels / alpha) — no color-mix() — so every phone browser
   draws the same navy, and each gradient fades to TRANSPARENT NAVY (alpha
   0), never to the keyword `transparent` (transparent black), which some
   browsers blend through a greyish midpoint. */
.hero__overlay {
  --hero-curtain-lift: calc(1 - (1 - var(--hero-curtain-peak)) / (1 - var(--hero-curtain-base)));
  --hero-caption-spot: 22% 50%; /* captions sit at the inline start: left in English */
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 60% at var(--hero-caption-spot), rgb(var(--hero-curtain-rgb) / var(--hero-curtain-lift)) 0%, rgb(var(--hero-curtain-rgb) / 0) 100%),
    linear-gradient(0deg, rgb(var(--hero-curtain-rgb) / var(--hero-curtain-lift)) 0%, rgb(var(--hero-curtain-rgb) / 0) 45%),
    rgb(var(--hero-curtain-rgb) / var(--hero-curtain-base));
}
[dir="rtl"] .hero__overlay { --hero-caption-spot: 78% 50%; }
@media (max-width: 575.98px) {
  /* The captions span most of the width on phones — keep the spot nearer the middle. */
  .hero__overlay { --hero-caption-spot: 35% 50%; }
  [dir="rtl"] .hero__overlay { --hero-caption-spot: 65% 50%; }
}
.hero__content { position: relative; z-index: 1; max-width: 760px; padding-block: 4rem 6rem; }

/* Minimal flair-egypt.com-style overlay: the eyebrow (above, inside
   .hero__content) stays bottom-inline-start as before; the old headline/
   description/buttons/badge are gone, replaced by ONE short word or
   phrase per slide (see .hero__caption below) that crossfades in sync
   with its background photo. This block is deliberately OUTSIDE
   .hero__content/.container — flair-egypt.com's placement pins it to
   the far inline-end edge of the image, vertically centered, not
   inside the same bottom-left content column as the eyebrow. Thin/
   wide-tracked Jost (English only — see [dir="ltr"] below) rather than
   a bold weight, matching the reference exactly.

   .hero__captions needs an explicit `width` (not just max-width): every
   .hero__caption child is position:absolute, so none of them count as
   in-flow content the parent could shrink-to-fit around — verified live
   in the browser (getComputedStyle) that without it the parent resolves
   to width:0, which then caps each child's max-width:100% at 0 too, and
   the caption text silently overflows off the edge of the viewport
   uncontained. font-size (and this width) are considerably smaller than
   the old full-width headline used, since "CRAFTSMANSHIP" (the longest
   single word — an unbreakable run) has to actually fit inside this
   narrow side column at every viewport size; checked against measured
   text width, not just guessed. Both were scaled up together by the same
   ~35% (client-requested font-size increase) so that relationship still
   holds at the larger size — bumping font-size alone without widening
   the column would reintroduce that same overflow. */
/* 2026-09-29: moved to the inline START side (right in Arabic, left in
   English), text start-aligned, lined up with the navbar content edge
   (--hero-caption-inset). The width never exceeds the space left between
   the two insets, so the longest word can't run off the screen. */
.hero__captions {
  position: absolute;
  z-index: 1;
  inset-block-start: 50%;
  inset-inline-start: var(--hero-caption-inset);
  transform: translateY(-50%);
  width: min(var(--hero-caption-width), calc(100% - 2 * var(--hero-caption-inset)));
  min-height: 1.2em;
  text-align: start;
}
/* One word/phrase (bold) + a smaller subtitle sentence per slide — both
   set in cream (var(--color-cream)) per the client's palette. */
.hero__caption {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  /* Reveal: each caption grows from its start edge (left in English, right
     in Arabic — see [dir="rtl"] below) — from scale(0.4) and transparent to
     full size/opacity (see .is-active below). The outgoing caption only
     fades (quickly); its scale snaps back to 0.4 after that fade
     (transform's 300ms delay) so it never visibly shrinks, and is ready for
     its next reveal. */
  opacity: 0;
  transform: scale(0.4);
  transform-origin: left center;
  transition: opacity 300ms ease, transform 0s linear 300ms;
  pointer-events: none;
}
[dir="rtl"] .hero__caption { transform-origin: right center; }
/* Thin/wide-tracked (English only) matching the flair-egypt.com
   reference's own Hero type — see fonts.css for the self-hosted Jost
   300 file. White (not cream) per the 2026-09-20 refinement. */
.hero__caption-word {
  color: var(--color-white);
  font-size: var(--hero-word-size);
  line-height: 1.15;
  font-weight: 700;
  text-transform: uppercase;
}
[dir="ltr"] .hero__caption-word {
  font-family: 'Jost', var(--font-heading);
  font-weight: 700; /* bold Jost (fonts.css) — matches the Arabic word's IBM Plex Sans Arabic 700 */
  letter-spacing: 0.1em;
}
/* "White inlaid with gold": the glyphs are filled with a mostly-white
   gradient that warms to light gold and ends in a touch of brand gold, plus
   a soft warm glow (filter: drop-shadow — text-shadow would paint under the
   transparent fill and muddy it). Browsers without background-clip:text keep
   the plain white above. The padding/negative margin grows the painted box
   by 0.2em above and below without moving anything, so Arabic marks and
   tall letters that rise past the 1.15 line box are never clipped out of the
   fill. Works per glyph, so Arabic joining/ligatures are untouched.
   2026-09-29: the gradient (background-clip:text) is on an inner span and
   the glow (filter) on the outer <strong>: the client's iPhone showed the
   word plain white, and WebKit is known to mis-paint a background-clip:text
   fill when a filter sits on the same element. Kept on separate elements. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__caption-word {
    filter: drop-shadow(0 0 0.28em var(--hero-word-glow)) drop-shadow(0 1px 2px rgba(20, 26, 32, 0.35));
  }
  .hero__caption-fill {
    display: block;
    padding-block: 0.2em;
    margin-block: -0.2em;
    background-image: linear-gradient(to bottom, /* straight down: an angle across this wide box would stretch the stops past the glyphs */
      /* glyphs span roughly 25%-85% of the padded box */
      var(--hero-word-white) 0%,
      var(--hero-word-white) 52%,
      var(--hero-word-gold-light) 74%,
      var(--hero-word-gold) 96%,
      var(--hero-word-gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.hero__caption-sub {
  color: var(--hero-sub-color);
  text-shadow: 0 1px 3px rgba(20, 26, 32, 0.5);
  opacity: 0.92;
  font-size: var(--hero-sub-size);
  line-height: 1.5;
  font-weight: 400;
  text-transform: none;
}
[dir="ltr"] .hero__caption-sub {
  font-family: 'Jost', var(--font-body);
  font-weight: 300;
  letter-spacing: 0.06em;
}
.hero__caption.is-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 700ms ease-out, transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: auto;
}

/* Decorative "image name" pill — one per slide, .hero__badges is a sibling
   of .hero__captions (not nested inside it) so its containing block is
   .hero directly. .hero__caption always carries its own `transform`
   (translateY, for its slide-in), which would make IT the containing
   block for any absolutely-positioned child nested inside it — and that
   box is vertically centered mid-hero, not anchored to the hero's top,
   so top:% there would offset from the wrong origin. Toggled in sync by
   the same hero-slideshow.js show() that already drives slides/captions/
   dots — just one more parallel NodeList, same index, same timing.
   Placeholder captions (Hero_Slide{n}_Badge) until real project names
   are supplied. */
.hero__badges {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.hero__badge {
  position: absolute;
  top: var(--hero-badge-top);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  /* 2026-09-22: client asked for a FIXED box size across all 12 slides —
     the previous `width: fit-content` (2026-09-21 note this replaces) grew
     or shrank the pill with each caption's length. An explicit `width`
     now holds the box constant; `.hero__badge-text` below shrinks instead
     (flex + min-width:0) with a smaller font-size, so the longest captions
     still fit, with its existing ellipsis as a safety fallback rather than
     the normal case. 2026-09-29: ~20-25% larger, and wider still so most
     names fit — all sizes are the --hero-badge-* variables on .hero. */
  gap: var(--hero-badge-gap);
  width: var(--hero-badge-width);
  max-width: calc(100% - 2 * var(--gutter));
  padding-block: var(--hero-badge-pad-block);
  padding-inline: var(--hero-badge-pad-start) var(--hero-badge-pad-end);
  border-radius: 999px;
  background: rgba(71, 78, 86, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 700ms ease;
  /* The pill itself stays inert while crossfaded out — only the active
     badge's own arrows (below) are re-enabled, so the 11 other stacked-
     but-invisible copies never intercept a click meant for the visible one. */
  pointer-events: none;
}
.hero__badge.is-active { opacity: 1; }
/* Both arrows sit together at the pill's logical end (physically: right
   in English/LTR, left in Arabic/RTL) since .hero__badge-text is the
   first DOM child and .hero__badge-arrows the last — flex row order
   follows reading direction automatically, no per-language CSS needed. */
.hero__badge-arrows {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--hero-badge-arrow-gap);
}
/* Real <button>s now (2026-09-21: arrows became functional prev/next
   controls, wired in hero-slideshow.js alongside the separate .hero__arrow
   pair) — reset the UA button chrome, and stay invisible/unclickable
   until the parent .hero__badge is the active one (visibility, not just
   opacity, so the 11 hidden copies also drop out of tab order). */
.hero__badge-arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hero-badge-arrow);
  height: var(--hero-badge-arrow);
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-cream);
  cursor: pointer;
  visibility: hidden;
  transition: background var(--transition);
}
.hero__badge.is-active .hero__badge-arrow { visibility: visible; pointer-events: auto; }
.hero__badge-arrow:hover { background: var(--color-gold-light); }
.hero__badge-arrow .icon { width: var(--hero-badge-arrow-icon); height: var(--hero-badge-arrow-icon); }
.hero__badge-text {
  font-family: var(--font-body);
  font-size: var(--hero-badge-font);
  font-weight: 500;
  color: var(--color-cream);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}

@media (min-width: 992px) {
  .hero__content { padding-block: 4rem 8rem; }
}

/* ---------- Hero slideshow ----------
   3-5 real project photos crossfading behind the (unchanged) dark/gold
   Hero content — see wwwroot/js/hero-slideshow.js for the auto-advance/
   arrow/dot behavior. Stacked absolutely inset:0 like the old single
   .hero__bg was; only the active slide is visible, so the crossfade is
   just two opacity transitions running at once. */
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  /* Ken Burns (2026-09-24): the active slide zooms linearly from its
     resting framing to 110% across its whole time on screen — fade-in
     (1s) + hold (the 2s autoplay interval in hero-slideshow.js, which
     overlaps the fade-in) + fade-out (1s) ≈ 3s — so the motion never
     pauses. Once inactive, the scale resets only AFTER the 1s fade-out
     (transform's delay), so the outgoing photo keeps its zoom while it
     fades instead of visibly jumping back. --slide-ty/--slide-scale are
     a slide's resting framing (identity by default, see --leather). */
  --slide-ty: 0px;
  --slide-scale: 1;
  transform: translateY(var(--slide-ty)) scale(var(--slide-scale));
  transition: opacity 1000ms ease, transform 0s linear 1000ms;
}
.hero__slide.is-active {
  opacity: 1;
  transform: translateY(var(--slide-ty)) scale(calc(var(--slide-scale) * 1.1));
  transition: opacity 1000ms ease, transform 3000ms linear;
}
/* "Plush Leather Seating Area" (slide 12, decor-01-detail.jpg): one-off
   reframe — nudged down and 10% tighter than the default cover framing;
   Ken Burns then zooms on top of this. */
.hero__slide--leather { --slide-ty: 18px; --slide-scale: 1.1; }

/* Grouped as a pair in the bottom-inline-start corner (bottom-left in
   English, mirrored to bottom-right in Arabic via the logical property),
   matching flair-egypt.com's bottom arrow-pair placement — rather than
   each arrow pinned to its own far screen edge as before.
   2026-09-29: pinned to the physical RIGHT in both languages — the floating
   Call/WhatsApp buttons are fixed bottom-LEFT (site.css .floating-actions),
   so in English the pair used to sit underneath them. */
.hero__arrows {
  position: absolute;
  z-index: 2;
  bottom: 1.75rem;
  right: 5.25rem; /* clears the chat button (assistant.css), bottom-right */
  display: flex;
  gap: 0.75rem;
}
.hero__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid rgba(245,241,234,0.4);
  background: rgba(21,17,13,0.25);
  color: var(--color-white);
  backdrop-filter: blur(2px);
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.hero__arrow:hover { background: rgba(21,17,13,0.5); border-color: var(--color-gold-light); }

.hero__dots {
  position: absolute;
  z-index: 2;
  bottom: 1.75rem;
  inset-inline: 0;
  display: flex;
  justify-content: center;
  gap: 0.6rem;
}
.hero__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: rgba(245,241,234,0.45);
  border: 1px solid rgba(245,241,234,0.6);
  padding: 0;
  transition: background var(--transition), transform var(--transition);
}
.hero__dot.is-active { background: var(--color-gold-light); transform: scale(1.2); }

@media (max-width: 575.98px) {
  /* Phones: the pill's own prev/next arrows + swipe (hero-slideshow.js)
     replace the bottom pair, which also clears the floating Call/WhatsApp
     buttons (site.css .floating-actions, bottom-left). Tighter dots so
     the row stays clear of those buttons too. */
  .hero__arrows { display: none; }
  .hero__dots { gap: 0.45rem; }
  /* Bold Jost is wider: a touch less tracking on phones keeps the longest
     word ("ACHIEVEMENT") inside a 320px screen. */
  [dir="ltr"] .hero__caption-word { letter-spacing: 0.06em; }

  /* Full-screen hero: svh = the visible height with the browser's
     toolbars shown, so nothing of the next section peeks in (vh fallback). */
  .hero { min-height: 100vh; min-height: 100svh; }

  /* Slow edge-to-edge pan instead of the Ken Burns zoom, in reading
     direction (left→right in English, right→left in Arabic); the slide's
     focal point (--slide-focus-y, from hero-slideshow.js) sets the vertical
     position. Same technique as the zoom: the active slide transitions to
     the far edge over its whole time on screen; an outgoing slide keeps its
     position through the 1s fade, then snaps back (transition delay).
     --hero-mobile-slide-ms is also read by hero-slideshow.js as the
     autoplay interval — change the timing there only. */
  .hero {
    --hero-mobile-slide-ms: 5000;
    --hero-pan-duration: calc(var(--hero-mobile-slide-ms) * 1ms + 1000ms);
  }
  .hero__slide {
    --pan-from: 0%;
    --pan-to: 100%;
    object-position: var(--pan-from) var(--slide-focus-y, 50%);
    transform: translateY(var(--slide-ty)) scale(var(--slide-scale));
    transition: opacity 1000ms ease, object-position 0s linear 1000ms;
  }
  [dir="rtl"] .hero__slide { --pan-from: 100%; --pan-to: 0%; }
  .hero__slide.is-active {
    object-position: var(--pan-to) var(--slide-focus-y, 50%);
    transform: translateY(var(--slide-ty)) scale(var(--slide-scale));
    transition: opacity 1000ms ease, object-position var(--hero-pan-duration) linear;
  }
  /* A slide with an admin-uploaded mobile image (<picture> in _Hero.cshtml):
     already composed for a portrait screen, so no pan — a gentle zoom. */
  .hero__slide.hero__slide--has-mobile {
    --slide-ty: 0px;
    --slide-scale: 1;
    object-position: 50% 50%;
    transform: scale(1);
    transition: opacity 1000ms ease, transform 0s linear 1000ms;
  }
  .hero__slide.hero__slide--has-mobile.is-active {
    transform: scale(1.06);
    transition: opacity 1000ms ease, transform var(--hero-pan-duration) linear;
  }
}
@media (max-width: 575.98px) and (prefers-reduced-motion: reduce) {
  /* No pan or zoom: each photo just sits on its focal point. */
  .hero__slide,
  .hero__slide.is-active {
    object-position: var(--slide-focus, 50% 50%);
    transform: translateY(var(--slide-ty)) scale(var(--slide-scale));
    transition: opacity 1000ms ease;
  }
  .hero__slide.hero__slide--has-mobile,
  .hero__slide.hero__slide--has-mobile.is-active { object-position: 50% 50%; transform: none; }
}

/* ---------- Services (home teaser) ----------
   Shared .service-card / .service-card__icon / .service-card__desc base
   rules right below are also used, unmodified, by the full /Services page
   grid (.services-page .service-card, see further down) — everything in
   this block is scoped under .services so it only reshapes the home
   teaser into tall carousel cards without touching that other page.

   Carousel mechanics mirror .project-carousel exactly (same arrow/viewport/
   track/dots structure and is-paged/transform approach — see
   wwwroot/js/services-carousel.js), just reading how many cards fit per
   row live from the rendered layout instead of a fixed 2-up, since these
   tall text-heavy cards go down to a single column on mobile (unlike the
   Projects carousel's deliberately-always-2-up compact cards). */
.services { padding-block: 5rem; background: var(--color-cream); }

.service-carousel { position: relative; display: flex; align-items: center; gap: 1rem; }
.service-carousel__viewport { flex: 1; overflow: hidden; }
.service-carousel__track { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.service-carousel__track .service-card { flex: 0 0 100%; }
@media (min-width: 576px) { .service-carousel__track .service-card { flex-basis: calc(50% - 0.75rem); } }
@media (min-width: 992px) { .service-carousel__track .service-card { flex-basis: calc(33.333% - 1rem); } }
.service-carousel__track.is-paged { flex-wrap: nowrap; transition: transform 450ms ease; }

/* Arrows/dots sit on the section's own (unchanged, cream) background,
   flanking/below the now-dark cards — so unlike Projects' arrows (which
   float on a dark band), these read as small dark-navy discs with a
   gold icon, echoing the cards' own color rather than blending into
   the cream backdrop. */
.service-carousel__arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--color-black);
  color: var(--color-gold-light);
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition);
}
.service-carousel__arrow:hover { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-navy); }
.service-carousel__arrow:disabled { opacity: 0.35; cursor: default; }
.service-carousel__arrow[hidden] { display: none; }

.service-carousel__dots { display: flex; justify-content: center; gap: 0.6rem; margin-top: 2.5rem; }
.service-carousel__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: rgba(179, 145, 95, 0.35);
  border: none;
  padding: 0;
  transition: background var(--transition), transform var(--transition);
}
.service-carousel__dot.is-active { background: var(--color-gold-dark); transform: scale(1.2); }
.service-carousel__dots[hidden] { display: none; }
/* Phones: the card takes the full width and the two arrows move to a
   smaller centered pair under it (flanking arrows left the card ~half
   the screen wide — 2026-09-29 review). */
@media (max-width: 575.98px) {
  .service-carousel { flex-wrap: wrap; justify-content: center; row-gap: 1.25rem; }
  .service-carousel__viewport { flex: 0 0 100%; order: -1; }
  .service-carousel__arrow { width: 2.75rem; height: 2.75rem; }
  .service-carousel__dots { margin-top: 1.5rem; }
}

/* Base card look — shared with /Services (see note above). */
.service-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 2.25rem 1.75rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--color-gold);
  transition: transform var(--transition), box-shadow var(--transition);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.service-card__icon {
  width: 4.5rem;
  height: 4.5rem;
  margin-inline: auto;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface-strip);
}
.service-card__icon .icon { color: var(--color-gold-dark); }
.service-card__desc { color: var(--color-text-muted); font-size: 0.97rem; }

/* Carousel-card look, scoped to the home teaser only. No fixed/min height:
   each card is as tall as its content. The flex track stretches every card
   in a row to the tallest one, and .service-card__desc's flex:1 then pushes
   the "Request" link to the bottom so the links line up across the row;
   link-more's margin-top (1.75rem, ~45px with the text's own line spacing) is the gap under the longest
   description. The bottom padding leaves room for the faint corner number. */
/* Dark navy/gold palette (same card tone as .guarantee-feature-card /
   .category-bar), matching the client's ask to bring Services in line
   with Guarantee/"Who We Are"/Projects. Scoped to the home teaser only —
   .services-page's card grid (see further down) keeps its own light
   background untouched. */
.services .service-card {
  position: relative;
  overflow: hidden;
  padding: 3.5rem 2rem 5.75rem; /* taller bottom: the corner number sits under the link, fully inside */
  display: flex;
  flex-direction: column;
  border-top: none;
  background: var(--color-navy);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}
.services .service-card__icon {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  margin-bottom: 1.75rem;
}
.services .service-card__icon .icon { width: 3.75rem; height: 3.75rem; stroke-width: 1.25; color: var(--color-gold-light); }
.services .service-card__title {
  position: relative;
  font-size: 1.05rem;
  font-weight: 500;
  text-transform: uppercase;
  padding-bottom: 1.1rem;
  margin-bottom: 1.1rem;
  color: var(--color-cream);
}
[dir="ltr"] .services .service-card__title { letter-spacing: 0.1em; }
.services .service-card__title::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 2.5rem;
  height: 2px;
  background: var(--color-gold);
}
[dir="rtl"] .services .service-card__title::after { transform: translateX(50%); }
.services .service-card__desc { flex: 1; color: rgba(255, 255, 255, 0.76); }
.services .service-card .link-more { position: relative; z-index: 1; justify-content: center; margin-top: 1.75rem; color: var(--color-gold-light); }
.services .service-card .link-more:hover { color: var(--color-white); }

/* Big, faint background number (01, 02, ...) in the bottom corner — purely
   decorative (aria-hidden in the markup), so it sits behind everything
   else and is never in the tab order. Gold instead of navy so it still
   reads (faintly) against the card's own dark navy background. */
.services .service-card__number {
  position: absolute;
  bottom: 0.5rem;
  inset-inline-end: 0.5rem;
  font-family: var(--font-heading);
  font-size: 5.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-gold-light);
  opacity: 0.14;
  z-index: 0;
  pointer-events: none;
}

/* ---------- Projects → photo gallery ----------
   Replaces the old category-carousel with a grouped photo gallery: 3
   tab-style category switchers, a responsive grid of every photo in the
   active category, and a GLightbox lightbox (grouped per category via
   data-gallery) for prev/next browsing — see wwwroot/js/gallery-tabs.js
   for the tab-switching (GLightbox itself is already initialized
   site-wide in wwwroot/js/scroll-reveal-init.js). */
.projects { padding-block: 5rem; background: var(--color-cream); }
/* Larger than the site's usual small eyebrow label, per the client's ask
   to make "أعمالنا" more visually prominent above the gallery title —
   scoped to this section only, other section eyebrows are unaffected. */
.projects .eyebrow { font-size: 1.15rem; }
/* Navy subtitle under the gallery title (client ask) — this section only;
   other sections keep the shared muted .section-subtitle color. */
.projects .section-subtitle { color: #232d36; }

.projects .section-heading { margin-bottom: 2rem; }

/* Category selector (2026-10-06): one gold pill that shows the current category and
   opens a listbox of the three (gallery-tabs.js). Same on desktop and phones; all
   spacing/arrow placement uses logical properties so Arabic (RTL) mirrors itself. */
.gallery-select {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 2.25rem;
}
.gallery-select__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  max-width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 1.3rem;
  border: 1.5px solid var(--color-gold);
  border-radius: 999px;
  background: var(--color-gold);
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(35, 45, 54, 0.18);
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
[dir="ltr"] .gallery-select__btn { font-family: 'Oswald', var(--font-heading); letter-spacing: 0.06em; text-transform: uppercase; }
.gallery-select__btn:hover { background: #c29a5f; border-color: #c29a5f; }
.gallery-select__btn:focus-visible { outline: 3px solid #232d36; outline-offset: 3px; }
.gallery-select__caption {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.gallery-select__label { text-align: center; overflow-wrap: anywhere; }
.gallery-select__arrow {
  flex: 0 0 auto;
  width: 0.55em;
  height: 0.55em;
  margin-block-start: -0.25em;
  border-inline-end: 2.5px solid currentColor;
  border-block-end: 2.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition), margin var(--transition);
}
.gallery-select__btn[aria-expanded="true"] .gallery-select__arrow { transform: rotate(-135deg); margin-block-start: 0.2em; }
.gallery-select__hint {
  flex: 0 1 auto;
  padding-inline-start: 0.75rem;
  border-inline-start: 1px solid currentColor;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* One gentle bounce when the section first scrolls into view (class set by gallery-tabs.js). */
.gallery-select__arrow.is-bounce { animation: gallery-arrow-bounce 0.9s ease-in-out 1; }
@keyframes gallery-arrow-bounce {
  0%, 100% { translate: 0 0; }
  40% { translate: 0 0.35em; }
  70% { translate: 0 -0.1em; }
}

.gallery-select__list {
  position: absolute;
  inset-block-start: calc(100% + 0.5rem);
  inset-inline: 0;
  z-index: 20;
  width: max-content;
  min-width: min(100%, 16rem);
  max-width: 100%;
  margin-inline: auto;
  margin-block: 0;
  padding: 0.4rem;
  list-style: none;
  background: #fff;
  border: 1.5px solid var(--color-gold);
  border-radius: 1.1rem;
  box-shadow: 0 12px 30px rgba(35, 45, 54, 0.22);
}
.gallery-select__list[hidden] { display: none; }
.gallery-select__option {
  padding: 0.7rem 1.1rem;
  border-radius: 0.75rem;
  color: #232d36;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}
.gallery-select__option:hover,
.gallery-select__option:focus-visible { background: rgba(178, 138, 80, 0.18); outline: none; }
.gallery-select__option.is-active { background: var(--color-gold); color: #232d36; font-weight: 700; }
.gallery-select__option:focus-visible { box-shadow: inset 0 0 0 2px #232d36; }
@media (prefers-reduced-motion: reduce) {
  .gallery-select__arrow, .gallery-select__btn { transition: none; }
  .gallery-select__arrow.is-bounce { animation: none; }
}
@media (max-width: 575.98px) {
  .gallery-select__btn { font-size: 0.9375rem; width: 100%; }
  .gallery-select__list { inset-inline: 0; width: auto; }
}


/* Plain responsive grid — still used by the (now unlinked but still
   reachable) project-detail page's on-page gallery/"related projects". */
.projects__grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 576px) { .projects__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .projects__grid { grid-template-columns: repeat(3, 1fr); } }

.project-card {
  margin: 0;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--color-surface);
}
.project-card__media, .project-card__lightbox { display: block; }
.project-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 500ms ease;
}
.project-card:hover img { transform: scale(1.08); }
.project-card__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 1rem 1.1rem;
  background: linear-gradient(0deg, rgba(21,17,13,0.75) 0%, rgba(21,17,13,0.32) 65%, rgba(21,17,13,0) 100%);
}
.project-card__link { display: flex; align-items: center; gap: 0.5rem; color: var(--color-white); }
.project-card__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1rem;
  text-transform: uppercase;
  transition: font-size var(--transition), transform var(--transition);
}
[dir="ltr"] .project-card__name { letter-spacing: 0.06em; }
.project-card__arrow {
  width: 1.1rem;
  height: 1.1rem;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--transition), transform var(--transition);
}
[dir="rtl"] .project-card__arrow { transform: translateX(4px); }
.project-card:hover .project-card__name { font-size: 1.1rem; transform: translateY(-2px); }
.project-card:hover .project-card__arrow { opacity: 1; transform: translateX(0); }

.project-card__badge {
  background: var(--color-gold);
  color: var(--color-navy);
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
}

/* ---------- Partners of Success ----------
   Infinite auto-scrolling marquee. The track (see _Partners.cshtml)
   holds 19 items (9 partner logos + 10 city cards) rendered twice
   back-to-back; it starts shifted left by exactly one repeat-unit (one
   full set of 19 items + their trailing gaps) and animates back to
   translateX(0), i.e. sliding to the right, as requested. The instant it
   resets, the duplicate copy is already sitting in the exact spot the
   first copy started in, so the loop is seamless. --partners-visible
   controls how many slots the strip is wide enough to show at once (10
   wide desktop → 8 → 6 → 4 → 3 on the smallest phones, each step chosen
   so the strip fits the viewport) — sized via calc() so partial items
   never peek in at the edges. Each slot is a small rounded box (logo or
   city pin only) with the name in small text underneath. The 41s
   duration keeps roughly the same ~59px/s scroll speed as before.
   transform is a physical
   property (not a logical one), so this rightward motion is unaffected
   by [dir="rtl"]/[dir="ltr"]. */
.partners { padding-block: 5rem; background: var(--color-navy); }
/* Wider heading box (the title itself is the shared .heading-pill);
   the subtitle keeps the usual 720px measure. */
.partners .section-heading { max-width: 960px; margin-bottom: 2rem; }
.partners .section-subtitle { color: var(--color-cream); max-width: 720px; margin-inline: auto; }

/* Gold-outlined trust pill between the subtitle and the strip. Text only.
   Neither body font ships a 500 (IBM Plex Sans Arabic: 400/700, Didact
   Gothic: 400 only), so font-weight 500 alone renders as 400 — the
   hairline same-color stroke is what actually makes it read a touch
   bolder without jumping to full 700. */
.partners__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 2.5rem;
  padding: 0.6rem 1.5rem;
  border: 1.5px solid #b28a50;
  border-radius: 999px;
  color: var(--color-cream);
  font-size: 0.95rem;
  font-weight: 500;
  -webkit-text-stroke: 0.2px currentColor;
  text-align: center;
}

.partners-marquee {
  --partners-visible: 10;
  --partners-item-w: 116px;
  --partners-box: 76px;
  --partners-gap: 12px;
  width: calc(var(--partners-visible) * var(--partners-item-w) + (var(--partners-visible) - 1) * var(--partners-gap));
  max-width: 100%;
  margin-inline: auto;
  padding-block: 0.5rem;
  overflow: hidden;
  /* The track below is width:max-content (shrink-to-fit); under dir="rtl"
     a shrink-to-fit block box anchors to its container's *right* edge
     instead of the left, which — combined with the left-anchored
     translateX loop math — pushed the whole track out of this clipped
     view. Pinning this purely-decorative logo strip to physical LTR
     keeps the anchor (and thus the scroll math) consistent regardless
     of the page's own direction. */
  direction: ltr;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.partners-marquee__track {
  display: flex;
  align-items: stretch;
  width: max-content;
  gap: var(--partners-gap);
  animation: partners-scroll 41s linear infinite;
}
.partners-marquee:hover .partners-marquee__track { animation-play-state: paused; }
/* Outer card: faint gold outline around the logo box + label. Cards
   stretch to the tallest label so the row stays even. */
.partners-marquee__item {
  flex: 0 0 var(--partners-item-w);
  width: var(--partners-item-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid rgba(178, 138, 80, 0.35);
  border-radius: 14px;
  transition: transform 180ms ease-out, border-color 180ms ease-out;
}
/* Per-card hover, on top of the strip-wide pause above: only the hovered
   card's outline goes to full gold and the whole card zooms slightly.
   .partners-marquee's padding-block leaves room for the zoom so
   overflow:hidden doesn't clip it. */
.partners-marquee__item:hover {
  transform: scale(1.08);
  border-color: #b28a50;
}
/* Inner box: white fill so logos that ship on a white background sit
   flush; cities (no logo) show a 2-letter abbreviation instead. */
.partners-marquee__box {
  flex: none;
  width: var(--partners-box);
  height: var(--partners-box);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  background: #fff;
  border-radius: 10px;
}
.partners-marquee__box img { width: 100%; height: 100%; object-fit: contain; }
.partners-marquee__abbr {
  font-family: 'Josefin Sans', var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--color-gold);
}
.partners-marquee__label {
  color: var(--color-cream);
  font-size: 0.72rem;
  line-height: 1.35;
  text-align: center;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

@keyframes partners-scroll {
  from { transform: translateX(calc(-50% - (var(--partners-gap) / 2))); }
  to { transform: translateX(0); }
}

@media (max-width: 1319px) {
  .partners-marquee { --partners-visible: 8; }
}
@media (max-width: 1099px) {
  .partners-marquee { --partners-visible: 6; }
}
@media (max-width: 767px) {
  .partners-marquee { --partners-visible: 4; --partners-item-w: 80px; --partners-box: 58px; --partners-gap: 6px; }
  .partners-marquee__item { padding: 0.35rem; gap: 0.35rem; border-radius: 12px; }
  .partners-marquee__box { padding: 0.3rem; border-radius: 8px; }
  .partners-marquee__abbr { font-size: 1.2rem; }
  .partners-marquee__label { font-size: 0.62rem; }
  .partners__badge { font-size: 0.85rem; padding: 0.55rem 1.1rem; border-radius: 1.5rem; }
}
@media (max-width: 359px) {
  .partners-marquee { --partners-visible: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .partners-marquee__track { animation: none; }
  .partners-marquee__item { transition: none; }
}

/* ---------- Biography / "Our Story" founder card ----------
   Light gray/white like every other non-Hero section — this used to
   carry the same dark navy as the Hero, which read as a leftover dark
   note once the rest of the site went light (see item 5). */
.biography { padding-block: 5rem; background: var(--color-surface); color: var(--color-text); }
.biography .section-heading { max-width: 780px; }
.biography .eyebrow { color: var(--color-gold-dark); }
.biography .section-title { color: var(--color-navy); }
.biography__text { color: var(--color-text-muted); font-size: 1.05rem; }

/* Single leader profile card (flair-egypt.com's Biography layout): a thin
   1px frame all the way around "Our Founder" + photo + name + title/quote.
   Generous padding on the card itself (equal on every side) is what
   creates the gap between the frame and the content next to it. */
.founder-card {
  max-width: 420px;
  margin: 3.5rem auto 0;
  border: 1px solid var(--color-border);
  padding: 2.5rem;
  text-align: center;
}
/* Reuses .section-title as-is (same font/weight/letter-spacing as "Our
   Services"/"Our Projects") rather than a smaller custom label — picks
   up navy color for free via the existing ".biography .section-title"
   rule above, since this card lives inside <section class="biography">. */
.founder-card__heading { margin-bottom: 1.75rem; }
.founder-card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.founder-card__body { padding-top: 1.75rem; text-align: center; }
/* Larger/bolder than the site's usual card-title scale — this is the one
   name on the page meant to read like a small heading, not a label.
   Font-family/weight-700 base already comes from the site's global
   h1-h4 rule (site.css); this only bumps size and weight further. */
.founder-card__name {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-navy);
}
[dir="ltr"] .founder-card__name { letter-spacing: 0.02em; }

/* Title <-> quote crossfade: hovering/focusing anywhere on the name +
   title area fades the title out and the quote in a touch above it, and
   reverses on mouse-out/blur. Both lines are stacked in the same grid
   cell (auto-sized to the taller one) so the swap never shifts layout,
   and :focus-within (not just :hover) means tabbing to the name — still
   the only focusable element here — triggers it too, for keyboard users. */
.founder-card__hover { cursor: help; }
.founder-card__reveal {
  position: relative;
  display: grid;
  margin-top: 0.6rem;
}
.founder-card__reveal > * {
  grid-area: 1 / 1;
  margin: 0;
  transition: opacity var(--transition), transform var(--transition);
}
/* Small/uppercase/letter-spaced, consistent with the site's other
   subtitle-style labels (.eyebrow and friends). */
.founder-card__title {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  opacity: 1;
  transform: translateY(0);
}
[dir="ltr"] .founder-card__title { letter-spacing: 0.12em; }
/* Same size/color as the site's other subtitle copy (.section-subtitle /
   .biography__text: 1.05rem, muted) — italic is the only addition, so it
   never reads smaller or lower-contrast than the title it replaces. */
.founder-card__quote-text {
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-text-muted);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.founder-card__hover:hover .founder-card__title,
.founder-card__hover:focus-within .founder-card__title {
  opacity: 0;
  transform: translateY(-10px);
}
.founder-card__hover:hover .founder-card__quote-text,
.founder-card__hover:focus-within .founder-card__quote-text {
  opacity: 1;
  transform: translateY(-4px);
}

/* ---------- "Learn more" links (teaser → full page) ---------- */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.5rem;
  color: var(--color-gold-dark);
  font-weight: 700;
  font-size: 0.95rem;
}
.link-more .icon { width: 1rem; height: 1rem; }
.link-more:hover { color: var(--color-navy); }
.link-more--sm { margin-top: 1.1rem; font-size: 0.85rem; }
.link-more--light { color: var(--color-gold-light); margin-top: 0; margin-bottom: 1.25rem; }
.link-more--light:hover { color: var(--color-white); }


.services__more { text-align: center; margin-top: 2.5rem; }
.service-card { position: relative; }

/* ---------- Standalone page hero (About / Services / Privacy) ---------- */
.page-hero {
  background: linear-gradient(160deg, var(--color-navy), var(--color-navy-light));
  padding-block: 7rem 5rem;
  text-align: center;
  min-height: 46vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-hero--compact { padding-block: 5rem 3.5rem; min-height: 30vh; }
.page-hero__content { max-width: 760px; margin-inline: auto; }
.page-hero__title {
  color: var(--color-white);
  font-size: clamp(2.1rem, 1.6rem + 2.5vw, 3.5rem);
  text-transform: uppercase;
}
[dir="ltr"] .page-hero__title { letter-spacing: 0.06em; }
.page-hero__description { color: rgba(245,241,234,0.85); font-size: 1.05rem; }

/* ---------- About page ---------- */
.about-page { padding-block: 5rem; }
.about-page__intro { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; color: var(--color-text-muted); font-size: 1.05rem; }

.stats-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; max-width: 820px; margin: 3rem auto 0; text-align: center; }
.stats-strip__item { display: flex; flex-direction: column; }
.stats-strip__number { font-family: var(--font-heading); font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); font-weight: 700; color: var(--color-gold-dark); }
.stats-strip__label { color: var(--color-text-muted); font-size: 0.9rem; }
@media (min-width: 768px) { .stats-strip { grid-template-columns: repeat(4, 1fr); } }

.vision-mission { padding-block: 5rem; background: var(--color-cream); }
.vision-mission__grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
.vision-mission__card { background: var(--color-surface); border-radius: var(--radius-lg); padding: 2.25rem; box-shadow: var(--shadow-sm); }
.vision-mission__card p { color: var(--color-text-muted); margin: 0; }
@media (min-width: 768px) { .vision-mission__grid { grid-template-columns: repeat(2, 1fr); } }

.different-section { padding-block: 5rem; }
.different-grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
.different-card { text-align: center; padding: 1.5rem; }
.different-card p { color: var(--color-text-muted); margin: 0; font-size: 0.95rem; }
@media (min-width: 576px) { .different-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .different-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Services page (full listing with tags) ---------- */
.services-page { padding-block: 5rem; background: var(--color-cream); }
.services-page__grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
.service-card--full { text-align: start; scroll-margin-top: 110px; }
.service-card--full .service-card__icon { margin-inline: 0; }
.service-card__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 1.5rem; }
.service-card__tags li {
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}
.services-page .service-card { background: var(--color-surface); }
.services-why { padding-block: 5rem; background: var(--color-cream); }
@media (min-width: 576px) { .services-page__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .services-page__grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- CTA band (closes About / Services / project detail pages) ----------
   Light gray/tan like the rest of the site (see item 5) — the tan
   .btn--gold action button is still the accent, it just no longer sits
   on a full dark-navy band. */
.cta-band { background: var(--color-surface-strip); color: var(--color-text); padding-block: 3.5rem; }
.cta-band__inner { display: flex; flex-direction: column; gap: 1.5rem; align-items: center; text-align: center; }
.cta-band h2 { color: var(--color-navy); font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); }
.cta-band p { color: var(--color-text-muted); margin: 0; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
@media (min-width: 900px) { .cta-band__inner { flex-direction: row; justify-content: space-between; text-align: start; } }

/* ---------- Privacy page ---------- */
.privacy-page { padding-block: 5rem; }
.privacy-content { max-width: 820px; margin: 0 auto; color: var(--color-text-muted); }
.privacy-content h2 { color: var(--color-navy); font-size: 1.25rem; margin-top: 2rem; }
.privacy-content__updated { color: var(--color-gold-dark); font-weight: 700; font-size: 0.9rem; }
.privacy-content__list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0 0 1em; }
.privacy-content__list li { padding-inline-start: 1.25rem; position: relative; }
.privacy-content__list li::before { content: "—"; position: absolute; inset-inline-start: 0; color: var(--color-gold-dark); }
.privacy-content__note { font-style: italic; font-size: 0.92rem; }

/* ---------- Project detail page ---------- */
.project-hero { position: relative; min-height: 46vh; display: flex; align-items: flex-end; color: var(--color-white); overflow: hidden; }
.project-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project-hero__overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(28,23,18,0.6), rgba(28,23,18,0.1)); }
.project-hero__content { position: relative; z-index: 1; padding-block: 2.5rem; }
.project-hero__title { color: var(--color-white); margin-top: 0.75rem; }
.project-detail { padding-block: 4rem; }
.project-detail__text { max-width: 780px; color: var(--color-text-muted); font-size: 1.05rem; margin-bottom: 2rem; }

/* ---------- Careers page ---------- */
.careers-page { padding-block: 5rem; background: var(--color-cream); }
.careers-grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; margin-top: 3rem; }
@media (min-width: 768px) { .careers-grid { grid-template-columns: repeat(2, 1fr); } }
.job-card {
  background: var(--color-navy);
  color: var(--color-cream);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  border-top: 4px solid var(--color-gold);
  box-shadow: var(--shadow-sm);
}
.job-card__title { color: var(--color-cream); font-size: 1.3rem; margin-bottom: 0.75rem; }
.job-card__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-bottom: 1.1rem; }
.job-card__meta span { font-size: 0.82rem; color: var(--color-gold-light); text-transform: uppercase; letter-spacing: 0.03em; }
.job-card__desc { color: rgba(230,215,194,0.85); margin-bottom: 1.5rem; }

/* ---------- Error page (404 / server error — Pages/Error.cshtml) ---------- */
.error-page { min-height: 70vh; }
.error-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2rem; }

/* A single hero slide (the admin can go down to one): nothing to navigate. */
.hero--single .hero__arrows,
.hero--single .hero__badge-arrows,
.hero--single .hero__dots { display: none; }