/*
 Theme Name:   Hello Elementor Child
 Template:     hello-elementor
 Version:      2.2.0
*/

/* ═══════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════ */

:root {
  /* ── Primitive Tokens ── */
  /* Brand Navy */
  --navy-50: #f0f4f8;
  --navy-100: #d9e2ec;
  --navy-200: #bcccdc;
  --navy-300: #9fb3c8;
  --navy-400: #829ab1;
  --navy-500: #627d98;
  --navy-600: #486581;
  --navy-700: #334e68;
  --navy-800: #243b53;
  --navy-900: #102a43;

  /* Accent Blue (CTA) */
  --blue-50: #e6f6ff;
  --blue-100: #bae3ff;
  --blue-200: #7cc4fa;
  --blue-300: #47a3f3;
  --blue-400: #2186eb;
  --blue-500: #0369a1;
  --blue-600: #024a70;
  --blue-700: #013352;

  /* Success */
  --green-50: #ecfdf5;
  --green-400: #34d399;
  --green-500: #10b981;

  /* Warm Neutral */
  --sand-50: #faf9f7;
  --sand-100: #f5f3f0;
  --sand-200: #ebe8e3;

  /* Pure Neutrals */
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --white: #ffffff;

  /* ── Semantic Tokens ── */
  --color-background: var(--gray-50);
  --color-surface: var(--white);
  --color-foreground: var(--gray-900);
  --color-muted: var(--gray-500);
  --color-muted-foreground: var(--gray-600);
  --color-primary: var(--navy-900);
  --color-primary-hover: var(--navy-800);
  --color-accent: var(--blue-500);
  --color-accent-hover: var(--blue-600);
  --color-accent-light: var(--blue-50);
  --color-border: var(--gray-200);
  --color-border-light: var(--gray-100);
  --color-card: var(--white);
  --color-card-foreground: var(--gray-900);

  /* ── Type ── */
  --font-body: 'Noto Sans Arabic', 'SF Pro Text', system-ui, -apple-system, sans-serif;
  --font-heading: 'Noto Sans Arabic', 'SF Pro Display', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Type Scale */
  --text-xs: .75rem;
  --text-sm: .8125rem;
  --text-base: .9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: clamp(1.75rem, 4vw, 2.25rem);
  --text-4xl: clamp(2rem, 5vw, 3rem);

  /* ── Spacing ── */
  --sp-xxs: 4px;
  --sp-xs: 8px;
  --sp-sm: 12px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-2xl: 48px;
  --sp-3xl: 64px;
  --sp-section: 80px;
  --sp-hero-y: 150px;
  --sp-hero-y-sm: 120px;

  /* ── Radii ── */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 9999px;

  /* ── Shadows (Elevation Scale) ── */
  --sh-xs: 0 1px 2px rgba(15,23,42,.04);
  --sh-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --sh-md: 0 4px 6px -1px rgba(15,23,42,.07), 0 2px 4px -2px rgba(15,23,42,.04);
  --sh-lg: 0 10px 15px -3px rgba(15,23,42,.08), 0 4px 6px -4px rgba(15,23,42,.03);
  --sh-xl: 0 20px 25px -5px rgba(15,23,42,.1), 0 8px 10px -6px rgba(15,23,42,.04);
  --sh-2xl: 0 25px 50px -12px rgba(15,23,42,.18);
  --sh-glow: 0 0 30px rgba(3,105,161,.12);
  /* ── Motion ── */
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(0,0,.2,1);
  --ease-in-out: cubic-bezier(.45,0,.55,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: 180ms;
  --dur-normal: 280ms;
  --dur-slow: 450ms;
}

/* ── Persian type: Noto Sans Arabic, self-hosted (OFL, assets/fonts/OFL.txt).
   Persian text is set in SemiBold: every regular/medium weight a page asks for
   maps to the SemiBold file, and bold (700+) to Bold, so headings keep their
   contrast. The files carry only the Arabic-script glyphs, so Latin words and
   numbers inside Persian text fall through to the English system font. ── */
@font-face { font-family: 'Noto Sans Arabic'; font-style: normal; font-weight: 100 600; font-display: swap; src: url('assets/fonts/noto-sans-arabic-600.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans Arabic'; font-style: normal; font-weight: 700 900; font-display: swap; src: url('assets/fonts/noto-sans-arabic-700.woff2') format('woff2'); }
/* every right-to-left surface, including form controls, uses it */
[dir="rtl"], [dir="rtl"] :is(button, input, select, textarea) { font-family: 'Noto Sans Arabic', var(--font-body); }

/* ═══════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  /* Hide the browser chrome without disabling ordinary page scrolling. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Keep decorative offsets and wide Elementor sections from creating a page-
   wide horizontal scrollbar. Vertical scrolling remains untouched. */
body {
  max-width: 100%;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-muted);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: none; background: none; }

/* ═══════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════ */

.payalsf-archive {
  direction: rtl;
  min-height: 100vh;
}

/* ═══════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   PAGE HEADER (non-hero fallback)
   ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   CARD GRID
   ═══════════════════════════════════════════ */

/* Featured / lead card */

/* Card media */

/* Card body */

/* Card link */

/* ═══════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   SINGLE / DETAIL
   ═══════════════════════════════════════════ */

/* Facts grid (project detail) */

/* Gallery */

/* ═══════════════════════════════════════════
   STATS BAR
   ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   FEATURES / WHY US
   ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   PROCESS STRIP
   ═══════════════════════════════════════════ */

/* Connecting line */

/* ═══════════════════════════════════════════
   CTA SECTION
   ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   FEATURED PROJECT HERO
   ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   META PILL (shared)
   ═══════════════════════════════════════════ */

/* Light variant for cards on white bg */

/* Card meta pills (on grid cards) */

/* ═══════════════════════════════════════════
   LINE CLAMP (shared)
   ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   SCROLL REVEAL
   ═══════════════════════════════════════════ */

/* Stagger: 60ms per item (design system: 0.06s from 'start') */

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */

/* Tablet */

/* Mobile */
@media (max-width: 600px) {
  
  .payalsf-archive { padding: 0; }
  
  
  
  
  
  
  
  /* Stats */
  
  
  /* Features */
  
  /* Process */
  
  
  /* CTA */
  
  /* Featured project */
  
  
  
}

/* Reduced motion */

/* Accessibility: focus visible */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ═══════════════════════════════════════════
   EDITORIAL SERVICES PAGE
   ═══════════════════════════════════════════

   This layer is scoped to the redesigned Services page. It keeps the
   existing Paya navy / blue tokens, while changing the rhythm from a flat
   card grid to a sequence of large service stories.
*/

.payalsf-services-editorial {
  direction: rtl;
  overflow: clip;
  background: var(--sand-50);
  color: var(--gray-900);
  /* Keep Persian typography consistent with the existing child-theme pages. */
  font-family: var(--font-body);
}

.payalsf-services-editorial.is-ltr { direction: ltr; }

.payalsf-services-editorial h1,
.payalsf-services-editorial h2,
.payalsf-services-editorial h3 {
  font-family: var(--font-heading);
}

/* Elementor's English homepage typography is Roboto / Roboto Slab. */
.payalsf-services-editorial.is-ltr {
  font-family: 'Roboto', var(--font-body);
}

.payalsf-services-editorial.is-ltr h1,
.payalsf-services-editorial.is-ltr h2,
.payalsf-services-editorial.is-ltr h3 {
  font-family: 'Roboto Slab', 'Roboto', var(--font-heading);
}

.payalsf-language-switcher {
  position: relative;
  --language-menu-open-dur: var(--dur-fast);
  --language-menu-close-dur: 150ms;
  --language-menu-ease: cubic-bezier(.22,1,.36,1);
}

.payalsf-language-switcher__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  min-width: 130px;
  min-height: 42px;
  padding: var(--sp-sm) var(--sp-lg);
  /* Mirror the Services CTA geometry, with an intentionally unfilled face. */
  appearance: none;
  border: 1px solid var(--blue-300) !important;
  border-radius: var(--r-md) !important;
  background-color: transparent !important;
  outline: none;
  color: var(--white) !important;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.payalsf-language-switcher__trigger:hover,
.payalsf-language-switcher__trigger[aria-expanded="true"] {
  border-color: var(--blue-200) !important;
  background-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 8px 20px rgba(3,105,161,.18);
}

.payalsf-language-switcher__trigger-content {
  display: flex !important;
  flex-flow: row nowrap;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--sp-sm);
  margin: 0 !important;
  padding: 0 !important;
  line-height: normal;
  white-space: nowrap;
}

.payalsf-language-switcher__trigger-content svg {
  display: block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0 !important;
  padding: 0 !important;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.payalsf-language-switcher__label {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font: inherit;
  line-height: normal;
  white-space: nowrap;
}

.payalsf-language-switcher__menu {
  --language-menu-open-dur: var(--dur-fast);
  --language-menu-close-dur: 150ms;
  --language-menu-ease: cubic-bezier(.22,1,.36,1);
  position: absolute;
  z-index: 10;
  top: calc(100% + var(--sp-xs));
  left: 0;
  min-width: 172px;
  padding: var(--sp-xs);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.98);
  transform-origin: top left;
  pointer-events: none;
  transition:
    opacity var(--language-menu-open-dur) var(--language-menu-ease),
    transform var(--language-menu-open-dur) var(--language-menu-ease),
    visibility 0s linear var(--language-menu-open-dur);
  will-change: opacity, transform;
}

.payalsf-language-switcher__menu[hidden] { display: none; }

.payalsf-language-switcher__menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition:
    opacity var(--language-menu-open-dur) var(--language-menu-ease),
    transform var(--language-menu-open-dur) var(--language-menu-ease),
    visibility 0s linear 0s;
}

.payalsf-language-switcher__menu.is-closing {
  opacity: 0;
  visibility: visible;
  transform: translateY(-4px) scale(.99);
  pointer-events: none;
  transition:
    opacity var(--language-menu-close-dur) var(--language-menu-ease),
    transform var(--language-menu-close-dur) var(--language-menu-ease),
    visibility 0s linear var(--language-menu-close-dur);
}

.payalsf-language-switcher__menu p {
  margin: var(--sp-xs) var(--sp-sm);
  color: var(--gray-500);
  font-size: var(--text-xs);
  font-weight: 700;
}

.payalsf-language-switcher__menu button {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  width: 100%;
  padding: var(--sp-xs) var(--sp-sm);
  appearance: none;
  border: 0 !important;
  border-radius: var(--r-sm);
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
  color: var(--gray-700);
  font-size: var(--text-sm);
  text-align: right;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.payalsf-language-switcher__menu button:hover {
  background: var(--blue-50) !important;
  color: var(--blue-700);
}

.payalsf-language-switcher__menu button[aria-selected="true"],
.payalsf-language-switcher__menu button[aria-selected="true"]:hover {
  background: var(--blue-100) !important;
  color: var(--blue-700);
}

.payalsf-language-switcher__menu button:focus-visible {
  outline: 2px solid var(--blue-300);
  outline-offset: -2px;
}

.payalsf-language-option__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  width: 24px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: 18px;
  line-height: 1;
}

.payalsf-language-option__label {
  color: inherit;
  line-height: 1.35;
}

/*
 * The frame is anchored to the image wrapper rather than the full grid row.
 * This keeps the inset stable when a service has a longer description.
 */

/* ============================================================
   Services listing — sticky split index
   A vertical index of service names (right, in RTL) drives a
   sticky preview panel (left) that crossfades on hover/focus.
   ============================================================ */

/* Preview stage — panels stacked in one grid cell so the column height stays
   stable while they crossfade. */

/* LTR mirrors the chevron nudge direction. */

.payalsf-services-editorial.is-ltr .payalsf-language-switcher__menu button { text-align: left; }

.payalsf-services-editorial.is-ltr .payalsf-language-switcher__menu {
  right: 0;
  left: auto;
  transform-origin: top right;
}

/* ============================================================
   Services — engagement models (how a client can engage)
   ============================================================ */

/* ============================================================
   Services — deliverables (what the client receives), dark band
   ============================================================ */

/* ============================================================
   Services — FAQ accordion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  
  
  
  .payalsf-language-switcher__menu,
  .payalsf-language-switcher__menu.is-open,
  .payalsf-language-switcher__menu.is-closing {
    transform: none;
    transition: none;
  }
}

.payalsf-services-editorial a:focus-visible,
.payalsf-services-editorial button:focus-visible {
  outline: 2px solid var(--blue-300);
  outline-offset: 3px;
}

.payalsf-services-editorial .payalsf-language-switcher__trigger:focus-visible {
  outline: 2px solid var(--blue-300) !important;
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════
   SERVICE DETAIL — EDITORIAL STORY
   ═══════════════════════════════════════════

   A detail page is a guided conversation, not a second card grid. The hero
   establishes the service, the middle sections explain value and handoff,
   and the final rail gives the visitor one calm next step.
*/

/* Stats band — editorial row with hairline dividers (no filled cards) */

/* FAQ */

/* ═══════════════════════════════════════════
   HOMEPAGE FOOTER WORDMARK
   ═══════════════════════════════════════════

   PAYA is a fixed brand name, so it intentionally stays unchanged in both
   language modes. The lower crop gives the homepage a confident final edge.
*/

.payalsf-home-wordmark {
  position: relative;
  overflow: hidden;
  padding: var(--sp-2xl) 0 0;
  border-top: 1px solid var(--color-border-light);
  background: var(--color-background);
}

.payalsf-home-wordmark__text {
  width: 100%;
  margin: 0;
  color: var(--navy-900);
  font-family: 'Anton', Impact, sans-serif;
  font-size: clamp(6rem, 24vw, 18rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: .10em !important;
  line-height: .72;
  text-align: center;
  opacity: .16;
  transform: translateY(16%);
  white-space: nowrap;
  user-select: none;
}

@media (max-width: 600px) {
  .payalsf-home-wordmark { padding-top: var(--sp-xl); }
  .payalsf-home-wordmark__text { font-size: clamp(4.75rem, 27vw, 11rem); }
}

/* ═══════════════════════════════════════════
   PROJECTS / BUILT-WORK INDEX
   ═══════════════════════════════════════════

   Projects use a cinematic, case-study rhythm rather than a repeated card
   grid: one selected work establishes the scale, then each completed project
   gets a full editorial row with its own facts, image, and point of view.
*/

.payalsf-projects-editorial {
  --projects-ink: var(--navy-900);
  --projects-ink-soft: var(--navy-200);
  --projects-line: var(--gray-200);
  --projects-paper: var(--sand-50);
  direction: rtl;
  overflow: clip;
  background: var(--projects-paper);
  color: var(--gray-900);
  font-family: var(--font-body);
}

.payalsf-projects-editorial.is-ltr { direction: ltr; }

/* Class selectors like `.payalsf-project-index a { display:grid }` outrank the
   UA [hidden] rule, so hidden filtered items would keep rendering. Restore it. */
.payalsf-projects-editorial [hidden] { display: none !important; }

.payalsf-projects-editorial h1,
.payalsf-projects-editorial h2,
.payalsf-projects-editorial h3,
.payalsf-projects-editorial p { margin-top: 0; }

.payalsf-projects-editorial h1,
.payalsf-projects-editorial h2,
.payalsf-projects-editorial h3 {
  font-family: var(--font-heading);
}

.payalsf-projects-editorial.is-ltr { font-family: 'Roboto', var(--font-body); }
.payalsf-projects-editorial.is-ltr h1,
.payalsf-projects-editorial.is-ltr h2,
.payalsf-projects-editorial.is-ltr h3 { font-family: 'Roboto Slab', 'Roboto', var(--font-heading); }

.payalsf-projects-shell {
  width: min(calc(100% - (var(--sp-lg) * 2)), 1200px);
  margin-inline: auto;
}

.payalsf-projects-cta h2 em {
  color: var(--blue-200);
  font-style: normal;
}

.payalsf-projects-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  min-height: 48px;
  padding: var(--sp-sm) var(--sp-lg);
  border: 1px solid var(--blue-300);
  border-radius: var(--r-md);
  background: var(--blue-500);
  color: var(--white);
  font-size: var(--text-sm);
  font-weight: 800;
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.payalsf-projects-button:hover {
  transform: translateY(-2px);
  background: var(--blue-400);
  box-shadow: var(--sh-md);
  color: var(--white);
}

.payalsf-projects-button svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
  transition: transform var(--dur-fast) var(--ease);
}

.payalsf-projects-button:hover svg { transform: translateX(-4px); }
.payalsf-projects-editorial.is-ltr .payalsf-projects-button:hover svg { transform: translateX(4px); }

/* Optical alignment for inline arrows beside text. Persian (Noto Sans Arabic) sets a
   high letter body with sparse descenders, so an arrow centred on the line box
   reads as sitting a touch low next to the text. Lift it slightly in RTL; the
   LTR/Latin (Roboto) variants are balanced, so reset the nudge there. */
.payalsf-projects-button svg { margin-block-start: -2px; }
.payalsf-projects-editorial.is-ltr .payalsf-projects-button svg { margin-block-start: 0; }

.payalsf-projects-editorial.is-ltr .payalsf-language-switcher__menu {
  right: 0;
  left: auto;
}

.payalsf-projects-editorial.is-ltr .payalsf-language-switcher__menu button { text-align: left; }

.payalsf-projects-cta h2 {
  color: var(--gray-900);
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: 1.06;
}

/* A compact table-of-contents keeps a growing portfolio scannable, inspired
   by architecture archives that pair immersive work with a precise index. */

.payalsf-projects-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--sp-section) 0;
  background: linear-gradient(145deg, var(--navy-900), var(--navy-800));
  color: var(--white);
}

.payalsf-projects-cta__ring {
  position: absolute;
  z-index: -1;
  top: -220px;
  left: 6%;
  width: 520px;
  height: 520px;
  border: 1px solid color-mix(in srgb, var(--blue-300) 34%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 72px color-mix(in srgb, var(--blue-300) 7%, transparent), 0 0 0 144px color-mix(in srgb, var(--blue-300) 4%, transparent);
  animation: payalsf-projects-ring-drift 18s var(--ease-in-out) infinite;
}

@keyframes payalsf-projects-ring-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(28px, 18px, 0) rotate(8deg); }
}

.payalsf-projects-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr);
  gap: var(--sp-3xl);
  align-items: end;
}

.payalsf-projects-cta h2 { margin-bottom: 0; color: var(--white); }
.payalsf-projects-cta__inner > div:last-child > p { max-width: 38ch; margin-bottom: var(--sp-xl); color: var(--navy-200); line-height: 1.9; }
.payalsf-projects-button--light { border-color: var(--white); background: var(--white); color: var(--navy-900); }
.payalsf-projects-button--light:hover { background: var(--blue-50); color: var(--navy-900); }

/* CTA-as-footer: fills the viewport, with a very faint grid, the giant brand
   name behind everything, and a copyright line. Keeps the existing ring,
   heading, body and button. */
.payalsf-projects-cta {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(var(--sp-section) + var(--sp-3xl));
}

/* Main content + nav centre in the tall section; the copyright sits at the
   bottom. Two auto margins split the free space evenly above and below. */
.payalsf-projects-cta__inner { margin-top: auto; }
.payalsf-projects-cta__base { margin-top: auto; }

/* Footer navigation: brand blurb + link columns. */
.payalsf-projects-cta__nav {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--sp-2xl);
  align-items: start;
  margin-top: var(--sp-3xl);
  padding-top: var(--sp-2xl);
  border-top: 1px solid color-mix(in srgb, var(--white) 12%, transparent);
}

/* the logo mark above the wordmark: the navy artwork turned white for the dark footer */
.payalsf-projects-cta__logo {
  display: block;
  width: auto;
  height: 56px;
  margin-bottom: var(--sp-md);
  filter: brightness(0) invert(1);
}
.payalsf-projects-cta__wordmark {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--white);
}

.payalsf-projects-cta__brand p {
  max-width: 32ch;
  margin: var(--sp-sm) 0 0;
  color: var(--navy-300);
  font-size: var(--text-sm);
  line-height: 1.85;
}

.payalsf-projects-cta__col h3 {
  margin: 0 0 var(--sp-md);
  color: var(--blue-200);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.payalsf-projects-cta__col ul {
  display: grid;
  gap: var(--sp-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.payalsf-projects-cta__col a {
  display: inline-block;
  color: var(--navy-200);
  font-size: var(--text-sm);
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.payalsf-projects-cta__col a:hover { color: var(--white); transform: translateX(-3px); }
.payalsf-projects-editorial.is-ltr .payalsf-projects-cta__col a:hover { transform: translateX(3px); }

/* Bottom bar: copyright on one side, back-to-top on the other. */
.payalsf-projects-cta__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
}

@media (max-width: 900px) {
  .payalsf-projects-cta__nav { grid-template-columns: 1fr 1fr; gap: var(--sp-xl) var(--sp-2xl); }
  .payalsf-projects-cta__brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .payalsf-projects-cta__nav { grid-template-columns: 1fr; gap: var(--sp-xl); }
  .payalsf-projects-cta__base { flex-direction: row; flex-wrap: wrap; }
}

.payalsf-projects-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: 58px 58px;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--white) 4%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--white) 4%, transparent) 1px, transparent 1px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 26%, #000 74%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 26%, #000 74%, transparent);
}

.payalsf-projects-cta__giant {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: -0.14em;
  width: 100%;
  margin: 0;
  transform: translateX(-50%);
  font-family: var(--font-heading);
  font-size: clamp(4rem, 19vw, 17rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: .8;
  text-align: center;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--white) 7%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--white) 9%, transparent), transparent 62%);
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
  user-select: none;
}

/* Copyright sits above the divider line; the back-to-top row (with the line)
   follows below it. */
.payalsf-projects-cta__legal {
  position: relative;
  z-index: 1;
  margin-top: var(--sp-3xl);
}

.payalsf-projects-cta__base {
  position: relative;
  z-index: 1;
  margin-top: var(--sp-md);
  padding-top: var(--sp-lg);
  border-top: 1px solid color-mix(in srgb, var(--white) 12%, transparent);
  justify-content: flex-end;
}

.payalsf-projects-cta__copy {
  color: var(--navy-300);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.payalsf-projects-editorial.is-ltr .payalsf-projects-cta__copy { letter-spacing: .14em; }
.payalsf-projects-editorial:not(.is-ltr) .payalsf-projects-cta__copy { letter-spacing: .06em; }

.payalsf-projects-reveal { opacity: 1; transform: none; }

.payalsf-projects-editorial a:focus-visible,
.payalsf-projects-editorial button:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 4px; }

/* ==========================================================================
   PROJECTS — signature layer
   LSF "track & studs": steel hairlines that draw in on reveal, echoing a
   light-steel frame being erected. One recurring member ties the sections
   together; a cursor-following preview turns the work index into a viewer.
   ========================================================================== */

/* Hero status indicator — mirrors the services topbar so the set reads as one. */

/* Track-and-stud rail — the recurring signature member at section thresholds. */

/* Assembling corner on the featured media — an L-member drawn into place. */

/* Hero diagonal member draws in on load, like a brace being set. */

/* Cursor-following preview — the work index becomes a viewer. */

/* ==========================================================================
   PROJECTS — Phase 2/3 layer (card reveals, kinetic hero, grain, polish)
   ========================================================================== */

/* Card media wipes in from its OUTER edge inward: a left-hand image opens
   left→right, a right-hand image opens right→left. The side alternates per card
   (nth-child) and depends on reading direction, so all four cases are set below.
   The clip carries the image's corner radius (round) so the rounded corners hold
   the whole way through the wipe, not just at rest. The closed inset is a custom
   property so the (less specific) open rule always wins over the direction set. */

/* Gallery: the figure layer holds the swappable image; gradient + number sit
   above it, and the incoming image crossfades over the current one. */

/* Thumbnail gallery — a small liquid-glass box on the image's bottom-left,
   holding uniform square thumbs. Active state is shown by opacity, no borders. */

/* Scoped under the container so these beat reset.css's [type="button"] rules
   (equal 0,1,0 specificity, later in load order) that force a border and auto width. */

/* Kinetic hero heading — each line rises from behind a mask as the frame sets. */

/* Featured photo parallax layer — the image drifts within its frame. */

/* Fine construction grain over the navy sections for a tactile, non-flat feel. */

.payalsf-projects-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.payalsf-projects-cta > .payalsf-projects-shell { position: relative; z-index: 1; }

/* Count-up numerals hold their width so the roll doesn't jitter the layout. */

/* Magnetic buttons get a smooth spring back to rest. */
.payalsf-projects-button { will-change: transform; }

@media (max-width: 900px) {
  
  .payalsf-projects-cta__inner { grid-template-columns: 1fr; gap: var(--sp-2xl); }
  
  
  
  
  
  
  
  
  
}

@media (max-width: 600px) {
  .payalsf-projects-shell { width: min(calc(100% - (var(--sp-md) * 2)), 1200px); }
  
  
  
  
  
  
  
  
  
  
  .payalsf-projects-cta { padding-block: var(--sp-3xl); }
  
  .payalsf-projects-cta h2 { font-size: clamp(2rem, 10vw, 3rem); }
  
  
  
  
  
  
  
  
  
  
  
  
  
  .payalsf-projects-cta__inner { gap: var(--sp-xl); }
  .payalsf-projects-button { width: fit-content; }
}

@media (prefers-reduced-motion: reduce) {
  
  .payalsf-projects-button,
  .payalsf-projects-button svg { transition: none; }
  .payalsf-projects-cta__ring { animation: none; }
  
}

/*
 * Projects 2 / Fieldbook
 *
 * A darker, scroll-led alternative to the light archive. The project index
 * becomes a quiet navigation rail, while each work holds its image in view
 * beside the project story. All content still comes from the same CPT query.
 */

/* ═══════════════════════════════════════════
   PROJECT DETAIL / CASE STUDY
   ═══════════════════════════════════════════ */

/* Hero: a quiet, dark cover that gives the project one memorable first frame. */

/* Optical alignment for inline arrows beside Persian text — see the note on the
   projects page. Lift in RTL, reset for the LTR/Latin variant. */

/* Narrative section deliberately switches to warm paper so the dark cover has a clean release. */

/* Gallery: one dominant image and smaller evidence frames create an editorial rhythm. */

/* Case study: real challenge / solution / result on a signature dark band. */

/* A blue lens section gives the case study a signature moment between images and references. */

/* Closing CTA is intentionally short: it reads as an invitation, not another content block. */

.payalsf-project-detail-reveal { opacity: 1; transform: none; }

/* Numeric UI stays stable and readable in both RTL and LTR presentations. */

[data-project-filter] > span,
[data-service-filter] > span {
  direction: ltr;
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}

/* ═══════════════════════════════════════════
   PROJECTS 2 — exhibition rail
   A separate visual world for the alternate archive. The large image stage,
   quiet chrome and scroll-snap rail are intentionally not shared with the
   original Projects template.
   ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   ABOUT PAGE — "engineering dossier" skin
   test5-born patterns scoped to .payalsf-about-page.
   Ships AFTER the shared chrome block, so it only
   re-paints the About page and never leaks into
   Services / Projects / Home. Teal literals are
   scoped here only — no shared-token renames.
   ═══════════════════════════════════════════ */

/* ── S1 HERO: stud texture + Fraunces h1 + orb killed + teal corner glow ── */
/* The shared editorial skin sets overflow:clip, which captures the hero's
   sticky and defeats the roll-over. Restore visible overflow for the About
   page only; body/html still clip any horizontal overflow, so no h-scroll. */

/* The hero photo sits behind a dark navy scrim for legibility. The hero is
   fixed to the viewport so it stands still while the content below scrolls up
   and rolls over it. A matching spacer on the content wrapper reserves the
   first screen for the hero. */

/* Content after the hero starts one screen down and rolls over the fixed hero. */

/* ── S2 WHO WE ARE: text-only editorial split (claim | body) ── */

/* ── S3 NUMBERS: ink track-record tile + mist stat band ── */

/* ── S4 LSF what/why: ghost numeral + tagline + pill chips ── */

/* ── S5 7-STEP BUILD PROCESS: vertical rail + timelapse contact sheet ── */

/* ── S7 ORIGIN: blue-50 band + Fraunces pull-quote ── */

/* ── S9 PROOF: acoustic 2-col definition ledger ── */

/* ── S10 STUDIO PILLARS: 12-col editorial cards with real photos ── */

/* ── S12 TEAM: dashed monogram roster tiles ── */

/* ── S13 OFFICE: contact-fact grid on the closing CTA ── */
/* Light contact block (replaces the old navy office CTA; the footer now owns
   the closing call-to-action). */

/* ── S11 WORK: about-tinted index (paper case cards) ── */

/* Responsive */

/* ── Fonts + Persian variant (fold-in) ── */
@font-face {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/fraunces/v31/6NUh8FyLNQOQZAnv9ZwNjucMHVn85Ni7emBmky1SzYOcVU1w5eF4NQQX.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: var(--font-heading);
  font-style: italic normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/fraunces/v31/6NU7h8FyLNQOQZAnv9ZwNjucMHVn85Ni7emBmky1SzYOcVU1R4kFNQzXeB0.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/dmsans/v15/rP2Hp2ywxg089UriCZ2IHTWEBlwu8Q.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* Persian headings keep the model-serif feel via a loaded serif face */

/* ── S10 fold-in: pillar sub-lead + split media inset ── */

/* ── S11 WORK: tinted index band ── */

/* ── S12 TEAM: roster tiles are self-contained (see above) ── */

/* ── S13 OFFICE: facts grid is self-contained (see above) ── */

/* ── FIX: single-child process sections sit in the shell's first narrow
      column (the shared chrome's .payalsf-services-process .payalsf-services-shell
      is a 2-col grid for intro+steps). Flatten the shell to full width
      for .about-who-section (S2) and .about-process (S5). ── */

/* ═══════════════════════════════════════════
   ABOUT WORK — "Selected Works" reel chrome.
   The frame around the infinite marquee. The scroller
   travels inside a hairline bordered TRACK (the photo
   track), under an editorial header + a live progress
   rail, so the endless loop reads as a curated reel
   instead of a floating strip that runs off-screen.
   All scoped to .payalsf-about-work (the section).
   ─────────────────────────────────────────── */

/* Header: kicker + heading left, count index right, baseline aligned. */

/* The TRACK: a hairline frame the marquee travels inside. The cluster has
   its own proximity padding; the track adds the border + gutter and a
   leading/fading edge so cards dissolve in/out instead of hard-clipping.
   `overflow: hidden` + padding-top/bottom on the track keeps any grown
   card (up to +40%) from spilling out of the frame. */

/* edge fades removed with the frame */

/* Progress rail: thin mono footer under the track. */

/* RTL: the arrow points the way the row drifts */

/* ── touch / narrow: stack the header, drop the fade edges (full-bleed) ── */

/* ── reduced motion: bar still shows a static state, no drift illusion ── */

/* ═══════════════════════════════════════════
   WORK RAIL — "mounted photograph" archive plates.
   Replacement for the old navy full-bleed square.
   Card = white paper mat (plate) + inset photo
   (mount) + a two-band editorial placard that
   lives ON the photograph:
     __head    kicker (mono/teal) + ghost number (Fraunces italic)
     __caption title (Fraunces) + chips + hover summary
   Mirrors the .about-pillar paper idiom, squared.
   NOTE: .about-work-card has overflow:hidden (frozen),
   so the plate's shadow cannot render outside it —
   the card carries a STATIC soft shadow instead, and
   every moving/hover property lives on descendants
   (the grow JS pins transition:none on the card).
   ═══════════════════════════════════════════ */

/* micro text step — smaller than --text-xs for compact card metadata */

/* Fixed-height "stage": the flex row lives here with a cluster-height of
   410px (max grown card: 292.5 x 1.40). Cards grow to 410px inside the stage
   and push apart horizontally, but the stage height never changes — so the
   section below never moves while cards grow ("page jumping" fix). The
   padding-around air of an at-rest 292.5px-tall card is the centering room
   the section already absorbs; only the wrapped-card breakpoint (<=720px)
   lets the stage relax this fixed height. */

/* The marquee rail: a single nowrap row holding the 2x-cloned card set.
   `width: max-content` makes the rail as wide as its content, so
   `scrollWidth / 2` (JS) is exactly one copy of the row; flex `gap` applies
   across the seam too, so the wrap from translateX(-railWidth -> 0) is
   invisible. The rail is a normal flex child — the stage's align-items
   centers it vertically for free and the translateX transform does the drift,
   never touching the cards' own width/height (those stay the grow's job). */

/* ── the card itself: a transparent portrait window onto the paper plate.
      Every declaration below is FROZEN — the grow JS reads width/height,
      the size source, and the transition. Only non-listed props changed
      (background navy-900 -> transparent, color -> --a-ink, radius, shadow). ── */

/* ── the mat: white paper, hairline border, even frame. Carries the
      hover state so the motion stays smooth (the card's own transition is
      pinned to none by the grow JS). ── */

/* the live border ring: ::after owns it so we can thicken without disturbing
   the mat gap (padding stays 2px).  inset:−2px fills the mat, border-radius
   = card's outer radius (16px) so the ring tracks the card's own curve
   perfectly.  User formula: outer_radius = gap/2 + inner_radius →
   16 = 2/2 + 15 ✓ (inner = plate padding-edge radius, 15px). */

/* ── the mount: the inset photograph, its own smaller radius, clipped. ── */

/* Two scrims on the mount: a label band at the head (kicker + number legible
   over any photo) and the placard gradient at the foot. Painted above the
   image, below the text. */

/* ── band 1: the kicker label, anchored at the reading start ── */

/* ── band 2: the placard at the photograph's foot ── */

/* year chip — solid teal accent for hierarchy, same token as the page */

/* hover: chips fade out so the summary reveal gets the taller runway */

/* Summary: third line of the placard. Expands the caption upward from the
   bottom-anchored box, so the title + chips rise as it appears. */

/* the leading cue, teal mono */

/* ── no-photo plate: paper-toned, teal-tinted, never navy ── */

/* ── keyboard focus ── */

/* ── touch / coarse pointer: no grow, no marquee, no hover — so the summary
      is simply always shown instead of being deleted from the placard ── */

/* ── motion-sensitive users: kill every descendant transition — there is no
      grow or marquee to disable, both JS systems bail on `reduced`. ── */

/* ── Persian (RTL): Fraunces/DM-only micro-type is wrong for Arabic script —
      drop the mono tracking that shreds joined letterforms, hand display type
      to the page's heading face, and let line-height breathe. ── */

/* ── touch / narrow: card is a full-width square, so the placard scales up ── */

/* ==========================================================================
   SITE HEADER — a full-width bar at the very top that shrinks into a compact,
   floating dark island once scrolled, and expands back at the top. Dark navy
   glass keeps it recognizable and premium over any section behind it.
   ========================================================================== */
.payalsf-siteheader {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 200;
  padding-inline: var(--sp-lg);
  padding-top: calc(6px + env(safe-area-inset-top, 0px));
  font-family: var(--font-body);
}
.payalsf-siteheader.is-ltr { font-family: 'Roboto', var(--font-body); }
.payalsf-siteheader button { border: 0; background: none; font: inherit; cursor: pointer; }

.payalsf-siteheader__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2xl);
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  /* --bar-pad: the gap above/below the buttons, also used on their outer
     (inline-end) side; the joined pill's radius follows the bar's:
     z − (y − x) / 2 = bar radius − (padding + 1px border) */
  --bar-pad: 10px;
  --pill-r: calc(var(--r-xl) - var(--bar-pad) - 1px);
  padding: var(--bar-pad) var(--sp-md);
  padding-inline-end: var(--bar-pad);
  border: 1px solid transparent;
  border-radius: var(--r-xl);
  background: transparent;
  box-shadow: none;
  transition:
    max-width .5s var(--ease-out),
    gap .5s var(--ease-out),
    margin-top .5s var(--ease-out),
    padding .5s var(--ease-out),
    background-color .4s var(--ease-out),
    border-color .4s var(--ease-out),
    box-shadow .4s var(--ease-out);
}

/* Scrolled: the bar contracts into the floating dark island. */
.payalsf-siteheader.is-pinned .payalsf-siteheader__bar {
  max-width: 1060px;
  gap: var(--sp-md);
  margin-top: 5px;
  --bar-pad: var(--sp-xs);
  padding: var(--bar-pad) var(--sp-sm);
  padding-inline-end: var(--bar-pad);
  border-color: color-mix(in srgb, var(--white) 14%, transparent);
  background: color-mix(in srgb, var(--navy-900) 86%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: 0 22px 48px -18px rgba(2,10,22,.72), 0 3px 12px rgba(2,10,22,.34);
}

.payalsf-siteheader__logo {
  flex: 0 0 auto;
  padding-inline: var(--sp-sm);
  font-family: var(--font-heading);
  font-size: calc(var(--text-lg) * 1.15);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--white);
  white-space: nowrap;
}
.payalsf-siteheader.is-ltr .payalsf-siteheader__logo { font-family: 'Roboto Slab', 'Roboto', var(--font-heading); }
.payalsf-siteheader__logo span { color: var(--blue-200); margin-inline-start: .14em; }
/* reset.css recolours a:hover; keep the logo colours stable on hover/focus. */
.payalsf-siteheader__logo:hover,
.payalsf-siteheader__logo:focus { color: var(--white); }

.payalsf-siteheader__nav { display: flex; align-items: center; gap: var(--sp-xxs); }

.payalsf-siteheader__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: var(--sp-xs) var(--sp-md);
  border-radius: var(--r-full);
  color: color-mix(in srgb, var(--white) 82%, transparent);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.payalsf-siteheader__link:hover { background: color-mix(in srgb, var(--white) 12%, transparent); color: var(--white); }
/* The dropdown triggers are <button>s; reset.css gives buttons a crimson text
   colour and a 3px radius, so pin them to match the plain nav links. */
.payalsf-siteheader__nav .payalsf-siteheader__trigger {
  color: color-mix(in srgb, var(--white) 82%, transparent);
  border-radius: var(--r-full);
}
.payalsf-siteheader__nav .payalsf-siteheader__trigger:hover,
.payalsf-siteheader__item.is-open > .payalsf-siteheader__trigger { color: var(--white); }
.payalsf-siteheader__item { position: relative; }
.payalsf-siteheader__item.is-open > .payalsf-siteheader__trigger { background: color-mix(in srgb, var(--white) 14%, transparent); }

.payalsf-siteheader__mega {
  position: absolute;
  z-index: 10;
  inset-block-start: calc(100% + 12px);
  inset-inline-start: 0;
  width: min(90vw, 540px);
  padding: var(--sp-sm);
  border: 1px solid color-mix(in srgb, var(--navy-900) 8%, transparent);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: 0 26px 52px -18px rgba(16,42,67,.34), 0 4px 12px rgba(16,42,67,.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s var(--ease-out), transform .28s var(--ease-out), visibility .2s;
}
.payalsf-siteheader__item.is-open .payalsf-siteheader__mega { opacity: 1; visibility: visible; transform: translateY(0); }
/* News, Articles, About LSF: one row, centred under the News link so it stays
   on screen from either side of the bar */
.payalsf-siteheader__mega--pair { width: min(calc(100vw - 32px), 680px); inset-inline: auto; left: 50%; translate: -50% 0; }

.payalsf-siteheader__mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
/* News, Articles, About LSF: side by side in one row, however many there are */
.payalsf-siteheader__mega--pair .payalsf-siteheader__mega-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.payalsf-siteheader__mega-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-sm);
  align-items: start;
  padding: var(--sp-sm);
  border-radius: var(--r-md);
  transition: background-color var(--dur-fast) var(--ease);
}
.payalsf-siteheader__mega-item:hover { background: var(--navy-50); }
.payalsf-siteheader__mega-ic {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--navy-900) 10%, transparent);
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--navy-700);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.payalsf-siteheader__mega-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.payalsf-siteheader__mega-item:hover .payalsf-siteheader__mega-ic { border-color: var(--blue-300); color: var(--blue-600); }
.payalsf-siteheader__mega-item b { display: block; color: var(--navy-900); font-size: var(--text-sm); font-weight: 800; }
.payalsf-siteheader__mega-item small { display: block; margin-top: 2px; color: var(--gray-500); font-size: var(--text-xs); line-height: 1.5; }

/* Projects & Services: wide, centred under the whole bar (not the menu item, so
   it never runs off-screen): the five entries beside a feature panel that
   leads to the section's own page. The panel is pinned to the physical LEFT
   in both languages: the grid itself runs left-to-right, and each side
   restores the page's own text direction. */
.payalsf-siteheader__item--wide { position: static; }
.payalsf-siteheader__item--wide .payalsf-siteheader__mega {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-sm);
  inset-inline: 0;
  width: min(100% - (var(--sp-lg) * 2), 800px);
  margin-inline: auto;
  direction: ltr;
}
.payalsf-siteheader__item--wide .payalsf-siteheader__panel { grid-column: 1; grid-row: 1; }
.payalsf-siteheader__item--wide .payalsf-siteheader__mega-grid { grid-column: 2; grid-row: 1; align-content: start; }
.payalsf-siteheader:not(.is-ltr) .payalsf-siteheader__item--wide .payalsf-siteheader__mega > * { direction: rtl; }

/* the panel: the photo fills it, the words sit on it at the bottom over a
   blur that fades up into the image */
.payalsf-siteheader__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 240px;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-md);
  background: var(--navy-900);
  color: var(--white);
  text-decoration: none;
}
.payalsf-siteheader__panel:hover, .payalsf-siteheader__panel:focus { color: var(--white); }
.payalsf-siteheader__panel:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 2px; }
.payalsf-siteheader__panel-media { position: absolute; inset: 0; z-index: -2; }
.payalsf-siteheader__panel-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.payalsf-siteheader__panel:hover .payalsf-siteheader__panel-media img { transform: scale(1.04); }
.payalsf-siteheader__panel-body { position: relative; display: flex; flex-direction: column; gap: var(--sp-xs); padding: 44px var(--sp-md) var(--sp-md); }
/* blur, strongest at the bottom and gone by the top of the text block */
.payalsf-siteheader__panel-body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to top, var(--navy-900) 55%, transparent 100%);
  mask-image: linear-gradient(to top, var(--navy-900) 55%, transparent 100%);
  background: linear-gradient(to top, color-mix(in srgb, var(--navy-900) 82%, transparent) 0%, color-mix(in srgb, var(--navy-900) 45%, transparent) 60%, transparent 100%);
}
.payalsf-siteheader__panel-figs { display: flex; flex-wrap: wrap; gap: var(--sp-xs) var(--sp-md); color: color-mix(in srgb, var(--white) 75%, transparent); font-size: var(--text-xs); }
.payalsf-siteheader__panel-figs b { color: var(--white); font-size: var(--text-base); font-weight: 800; font-variant-numeric: tabular-nums; }
.payalsf-siteheader__panel-title { color: var(--white); font-size: var(--text-lg); font-weight: 800; line-height: 1.3; }
.payalsf-siteheader__panel-text { color: color-mix(in srgb, var(--white) 80%, transparent); font-size: var(--text-xs); line-height: 1.7; }
.payalsf-siteheader__panel-btn {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-xxs);
  padding: 8px 14px;
  border-radius: var(--r-full);
  background: var(--white);
  color: var(--navy-900);
  font-size: var(--text-xs);
  font-weight: 800;
  transition: gap var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.payalsf-siteheader__panel:hover .payalsf-siteheader__panel-btn { gap: 10px; background: var(--blue-50); }
.payalsf-siteheader__panel-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.payalsf-siteheader:not(.is-ltr) .payalsf-siteheader__panel-btn svg { transform: scaleX(-1); }
/* narrower desktops: the panel moves under the list as a wide, shorter strip */
@media (max-width: 1100px) {
  .payalsf-siteheader__item--wide .payalsf-siteheader__mega { grid-template-columns: minmax(0, 1fr); width: min(100% - (var(--sp-lg) * 2), 620px); }
  .payalsf-siteheader__item--wide .payalsf-siteheader__mega-grid { grid-column: 1; grid-row: 1; }
  .payalsf-siteheader__item--wide .payalsf-siteheader__panel { grid-column: 1; grid-row: 2; height: 190px; }
}

.payalsf-siteheader__actions { display: flex; flex: 0 0 auto; align-items: center; gap: 0; }
.payalsf-siteheader__cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--sp-xs) var(--sp-lg);
  border-radius: var(--r-full);
  background: var(--white);
  color: var(--navy-900);
  font-size: var(--text-sm);
  font-weight: 800;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.payalsf-siteheader__cta:hover { background: var(--blue-100); color: var(--navy-900); transform: translateY(-1px); }

/* Language pill — a light glass chip so it reads clearly against the dark bar.
   The base trigger sets its border with !important, so match it here. */
.payalsf-siteheader__lang .payalsf-language-switcher__trigger {
  color: var(--white) !important;
  background: color-mix(in srgb, var(--white) 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--white) 24%, transparent) !important;
}
.payalsf-siteheader__lang .payalsf-language-switcher__trigger:hover { background: color-mix(in srgb, var(--white) 20%, transparent) !important; }

/* Language + "start a conversation" read as one pill: same height, type and
   padding, joined edge to edge; each half keeps its own colours. The language
   half is rounded on the outer (inline-start) side, the CTA on the other.
   The base trigger sets size and radius with !important, so match that. */
.payalsf-siteheader__lang .payalsf-language-switcher__trigger,
.payalsf-siteheader__cta {
  box-sizing: border-box;
  height: 38px;
  min-height: 38px !important;
  padding: 0 18px !important;
  font-size: var(--text-sm) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
.payalsf-siteheader__lang .payalsf-language-switcher__trigger {
  min-width: 0 !important;
  border-radius: var(--pill-r) 0 0 var(--pill-r) !important;
  border-start-start-radius: var(--pill-r) !important;
  border-end-start-radius: var(--pill-r) !important;
  border-start-end-radius: 0 !important;
  border-end-end-radius: 0 !important;
  border-inline-end: 0 !important;
}
.payalsf-siteheader__cta {
  border-radius: 0 var(--pill-r) var(--pill-r) 0;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: var(--pill-r);
  border-end-end-radius: var(--pill-r);
}
/* keep the joined pill level on hover (the CTA used to lift) */
.payalsf-siteheader__cta:hover { transform: none; }

.payalsf-siteheader__burger { display: none; width: 38px; height: 38px; place-items: center; border-radius: var(--r-full); background: color-mix(in srgb, var(--white) 10%, transparent); border: 1px solid color-mix(in srgb, var(--white) 20%, transparent); }
.payalsf-siteheader__burger span { display: block; width: 18px; height: 2px; margin: 2px auto; border-radius: 2px; background: var(--white); transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.payalsf-siteheader.is-mobile-open .payalsf-siteheader__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.payalsf-siteheader.is-mobile-open .payalsf-siteheader__burger span:nth-child(2) { opacity: 0; }
.payalsf-siteheader.is-mobile-open .payalsf-siteheader__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.payalsf-siteheader a:focus-visible,
.payalsf-siteheader button:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 3px; }

/* "Mobile" = phones, plus any tablet held upright (taller than wide). Landscape
   tablets and laptops keep the desktop header. */
@media (min-width: 921px) and (orientation: landscape), (min-width: 1367px) {
  .payalsf-siteheader__burger,
  .payalsf-siteheader__mobile,
  .payalsf-siteheader__scrim { display: none !important; }
}
@media (max-width: 920px), (orientation: portrait) and (max-width: 1366px) {
  .payalsf-siteheader__nav,
  .payalsf-siteheader__cta,
  .payalsf-siteheader__lang { display: none; }
  .payalsf-siteheader__lang .payalsf-language-switcher__trigger { border-radius: var(--r-full) !important; border-inline-end: 1px solid color-mix(in srgb, var(--white) 24%, transparent) !important; }
  .payalsf-siteheader__burger { display: inline-grid; }
  .payalsf-siteheader__bar { gap: var(--sp-md); }
  .payalsf-siteheader.is-pinned .payalsf-siteheader__bar { max-width: 640px; }
}

@media (prefers-reduced-motion: reduce) {
  .payalsf-siteheader__bar { transition: background-color .2s, border-color .2s; }
  .payalsf-siteheader__mega { transition: opacity .12s; transform: none; }
  .payalsf-siteheader__item.is-open .payalsf-siteheader__mega { transform: none; }
}

/* The global header now serves the top of the page, so the projects hero's own
   topbar (brand + language + status) is retired and the hero makes room. */

/* ============================================================
   First-visit page loader
   Logo (physical left) + page name (physical right) styled like
   the footer wordmark; the name rolls into place, then the whole
   overlay slides away to the right to reveal the page.
   ============================================================ */
html.payalsf-loading,
html.payalsf-loading body {
  overflow: hidden;
}

.payalsf-loader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(145deg, var(--navy-900), var(--navy-800));
}

/* The squares (built by the loader script): the background becomes the tiles,
   which fade out diagonal by diagonal. */
.payalsf-loader.has-tiles { background: none; }
.payalsf-loader__tiles { position: absolute; inset: 0; z-index: -1; direction: ltr; pointer-events: none; }
.payalsf-loader__tiles i {
  position: absolute;
  width: 59px; /* one px of overlap: no hairlines between squares */
  height: 59px;
  background: linear-gradient(145deg, var(--navy-900), var(--navy-800));
  background-size: var(--vw) var(--vh);
  transition: opacity .28s ease-out, transform .28s ease-out;
}
.payalsf-loader.is-leaving { pointer-events: none; }
.payalsf-loader.is-leaving .payalsf-loader__tiles i { opacity: 0; transform: scale(.6); transition-delay: calc(var(--d) * var(--wave, 16ms)); }
.payalsf-loader.is-leaving::before,
.payalsf-loader.is-leaving .payalsf-loader__stage { opacity: 0; transition: opacity .18s ease-out; }

/* Faint grid — identical to the footer's. */
.payalsf-loader::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: 58px 58px;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--white) 4%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--white) 4%, transparent) 1px, transparent 1px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 26%, #000 74%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 26%, #000 74%, transparent);
}

/* Both wordmarks share one centered cell so they stack. */
.payalsf-loader__stage {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0 var(--sp-lg);
}

.payalsf-loader__giant,
.payalsf-loader__name {
  grid-area: 1 / 1;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

/* Giant PAYA LSF — centered, faint, matches the footer wordmark exactly. */
/* Giant PAYA LSF — centered, faint, matches the footer wordmark (a little
   thicker stroke, fading to more transparency toward the bottom). It fades in
   rather than rolling. */
.payalsf-loader__giant {
  z-index: 0;
  font-size: clamp(4rem, 19vw, 17rem);
  letter-spacing: -.04em;
  user-select: none;
  pointer-events: none;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--white) 9%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--white) 13%, transparent) 0%, transparent 52%);
  -webkit-background-clip: text;
  background-clip: text;
  animation: payalsf-loader-giant-in 0.72s var(--ease-out) both;
}

@keyframes payalsf-loader-giant-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Page name — higher contrast, nudged off the giant's centre: far to the side
   (much more than down), and a little down. Farsi to the right, English left. */
.payalsf-loader__name {
  z-index: 1;
  min-width: 0;
  font-size: clamp(40px, 8vw, 116px);
  letter-spacing: -.03em;
  color: var(--white);
  --name-x: clamp(56px, 12vw, 210px);
  --name-y: clamp(30px, 5vw, 96px);
  transform: translate(var(--name-x), var(--name-y));
}

.payalsf-loader.is-ltr .payalsf-loader__name {
  --name-x: calc(-1 * clamp(56px, 12vw, 210px));
}

/* Persian page names run wider than English; a size smaller (Home's claim keeps its own) */
.payalsf-loader:not(.is-ltr) .payalsf-loader__name:not(.payalsf-loader__claim) { font-size: clamp(30px, 6vw, 88px); }

.payalsf-loader__space { display: inline-block; }

/* Typing: the full name is laid out invisibly (so the line has its final size)
   and the typed part is drawn over it from the reading side, with a caret. */
.payalsf-loader__name { display: inline-grid; }
.payalsf-loader__ghost,
.payalsf-loader__typed { grid-area: 1 / 1; text-align: start; }
.payalsf-loader__ghost { visibility: hidden; }
.payalsf-loader__typed::after {
  content: "";
  display: inline-block;
  width: .06em;
  height: .8em;
  margin-inline-start: .06em;
  vertical-align: -.05em;
  background: currentColor;
  animation: payalsf-loader-caret .7s steps(1) infinite;
}
.payalsf-loader__typed.is-done::after { animation: none; opacity: 0; transition: opacity .2s; }
@keyframes payalsf-loader-caret { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .payalsf-loader { transition: opacity .4s linear; }
  .payalsf-loader.is-leaving { opacity: 0; }
  .payalsf-loader.is-leaving .payalsf-loader__tiles i { transform: none; transition: none; }
}

/* ============================================================
   404 — page not found (Paya LSF DNA)
   ============================================================ */
.payalsf-404 {
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: clip;
  background: var(--white);
  padding: calc(88px + var(--sp-2xl)) var(--sp-lg) var(--sp-3xl);
}

.payalsf-404__stage {
  position: relative;
  width: 100%;
  max-width: 820px;
  display: grid;
  place-items: center;
  text-align: center;
}

.payalsf-404__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-lg);
  width: 100%;
}

.payalsf-404__head {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  padding: clamp(2rem, 8vw, 5rem) 0 clamp(1rem, 3vw, 2rem);
}

.payalsf-404__ghost {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(11rem, 40vw, 26rem);
  line-height: .8;
  letter-spacing: -.04em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--navy-900) 8%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--navy-900) 8%, transparent), transparent 64%);
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
  pointer-events: none;
}

.payalsf-404__title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 6.5vw, 4.75rem);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--navy-900);
}

.payalsf-404__lead {
  margin: 0;
  max-width: 46ch;
  color: var(--gray-600);
  font-size: var(--text-lg);
  line-height: 1.7;
}

.payalsf-404__search {
  display: flex;
  gap: var(--sp-sm);
  width: 100%;
  max-width: 520px;
  margin-top: var(--sp-xs);
}

.payalsf-404__search-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: 0 var(--sp-md);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-md);
  background: var(--white);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.payalsf-404__search-field:focus-within {
  border-color: var(--blue-300);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-300) 22%, transparent);
}

.payalsf-404__search-field svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--gray-400);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.payalsf-404__search-field input {
  flex: 1;
  min-width: 0;
  height: 48px;
  border: 0;
  background: transparent;
  color: var(--navy-900);
  font-family: inherit;
  font-size: var(--text-base);
}

.payalsf-404__search-field input:focus { outline: none; }

.payalsf-404__search-btn {
  flex: 0 0 auto;
  height: 48px;
  padding: 0 var(--sp-lg);
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--navy-900) !important;
  font-family: inherit;
  font-weight: 800;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.payalsf-404__search-btn:hover { background: var(--gray-50); border-color: var(--gray-300) !important; }

.payalsf-404__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-md);
  margin-top: var(--sp-sm);
}

.payalsf-404__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  min-height: 48px;
  padding: 0 var(--sp-lg);
  border-radius: var(--r-md);
  font-weight: 800;
  font-size: var(--text-sm);
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.payalsf-404__btn svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.payalsf-404__btn--ghost { background: var(--sand-100); color: var(--navy-900); }
.payalsf-404__btn--ghost:hover { background: var(--sand-200); color: var(--navy-900); }
.payalsf-404__btn--ghost svg { transition: transform var(--dur-fast) var(--ease); }
.payalsf-404__btn--ghost:hover svg { transform: translateX(-3px); }
.payalsf-404.is-ltr .payalsf-404__btn--ghost:hover svg { transform: translateX(3px); }

.payalsf-404__btn--solid { background: var(--navy-900); color: var(--white); }
.payalsf-404__btn--solid:hover { background: var(--navy-800); color: var(--white); transform: translateY(-2px); box-shadow: var(--sh-md); }

@media (max-width: 520px) {
  .payalsf-404__search { flex-direction: column; }
  .payalsf-404__search-btn { height: 46px; }
  .payalsf-404__actions { width: 100%; }
  .payalsf-404__btn { flex: 1; justify-content: center; }
}

/* 404 is a clean standalone screen (matches the reference) — hide the global
   island header, whose transparent top state is built for dark heroes. */
body.error404 .payalsf-siteheader { display: none !important; }
body.error404 .payalsf-404 { padding-top: var(--sp-3xl); }

/* Footer, 90vh: the top 30vh is a fade (transparent → navy, going down) into the
   page above; everything sits in the solid bottom 60vh. The mask uses a fixed
   30vh (not %) so a footer that grows taller on small screens never fades its content. */
.payalsf-projects-cta {
  min-height: 90vh;
  min-height: 90dvh;
  padding-top: 30vh;
  padding-bottom: var(--sp-xl);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30vh);
  mask-image: linear-gradient(to bottom, transparent 0, #000 30vh);
}
.payalsf-projects-cta__ring { top: calc(30vh - 220px); }
.payalsf-projects-cta::before { -webkit-mask-image: none; mask-image: none; }
.payalsf-projects-cta__nav { margin-top: var(--sp-2xl); padding-top: var(--sp-xl); }
.payalsf-projects-cta__legal { margin-top: var(--sp-xl); }
.payalsf-projects-cta__base { margin-top: var(--sp-sm); padding-top: var(--sp-md); }


@media (max-width: 700px) {
  .payalsf-projects-cta { padding-top: 22vh; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22vh); mask-image: linear-gradient(to bottom, transparent 0, #000 22vh); }
  .payalsf-projects-cta__ring { top: calc(22vh - 220px); }
}
/* above the content it rolls over (the pinning script is in footer-cta.php) */
.payalsf-projects-cta { z-index: 5; }

/* Fade eased, not straight: navy over a light page looks dark long before it is
   half opaque, so opacity climbs slowly first and quickly at the end, and the
   fade reads as even top to bottom. --fade is the fade band's height. */
.payalsf-projects-cta {
  --fade: 30vh;
  padding-top: var(--fade);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0 / .03) calc(var(--fade) * .2), rgb(0 0 0 / .1) calc(var(--fade) * .4), rgb(0 0 0 / .24) calc(var(--fade) * .6), rgb(0 0 0 / .5) calc(var(--fade) * .8), #000 var(--fade));
  mask-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0 / .03) calc(var(--fade) * .2), rgb(0 0 0 / .1) calc(var(--fade) * .4), rgb(0 0 0 / .24) calc(var(--fade) * .6), rgb(0 0 0 / .5) calc(var(--fade) * .8), #000 var(--fade));
  /* leave room for the giant PAYA LSF so the copyright row sits above it */
  padding-bottom: calc(clamp(4rem, 19vw, 17rem) * .7);
}
.payalsf-projects-cta__ring { top: calc(var(--fade) - 220px); }
@media (max-width: 700px) {
  .payalsf-projects-cta { --fade: 22vh; }
}

/* logo + wordmark are one link home */
.payalsf-projects-cta__home { display: inline-block; color: inherit; text-decoration: none; }
.payalsf-projects-cta__home:hover .payalsf-projects-cta__wordmark { color: var(--blue-200); }

/* copyright and back-to-top in one row, no second line */
.payalsf-projects-cta__legal { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-lg); margin-top: auto; padding-top: var(--sp-xl); }

/* Fade v3: a gentle curve (≈ t^1.4) so the change is visible across the whole
   30vh, not bunched at either end. Content packed tighter and pushed to the
   bottom, all below the fade band. */
.payalsf-projects-cta {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0 / .1) calc(var(--fade) * .2), rgb(0 0 0 / .26) calc(var(--fade) * .4), rgb(0 0 0 / .46) calc(var(--fade) * .6), rgb(0 0 0 / .72) calc(var(--fade) * .8), #000 var(--fade));
  mask-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0 / .1) calc(var(--fade) * .2), rgb(0 0 0 / .26) calc(var(--fade) * .4), rgb(0 0 0 / .46) calc(var(--fade) * .6), rgb(0 0 0 / .72) calc(var(--fade) * .8), #000 var(--fade));
  padding-bottom: calc(clamp(4rem, 15vw, 13rem) * .6);
}
.payalsf-projects-cta__giant { font-size: clamp(4rem, 15vw, 13rem); }
.payalsf-projects-cta__inner { gap: var(--sp-md); }
.payalsf-projects-cta__inner > div:last-child > p { margin-bottom: var(--sp-md); }
.payalsf-projects-cta__nav { margin-top: var(--sp-lg); padding-top: var(--sp-lg); gap: var(--sp-xl); }
.payalsf-projects-cta__logo { height: 44px; margin-bottom: var(--sp-sm); }
.payalsf-projects-cta__brand p { margin-top: var(--sp-xs); }
.payalsf-projects-cta__col h3 { margin-bottom: var(--sp-sm); }
.payalsf-projects-cta__col ul { gap: 6px; }
.payalsf-projects-cta__legal { margin-top: var(--sp-lg); padding-top: 0; }

/* Solid navy for the bottom 70vh: the fade is the top 20vh only; the content
   still starts 30vh down (bottom 60vh). Giant PAYA LSF back to its full size. */
.payalsf-projects-cta { --fade: 20vh; padding-top: 30vh; padding-bottom: calc(clamp(4rem, 19vw, 17rem) * .6); }
.payalsf-projects-cta__giant { font-size: clamp(4rem, 19vw, 17rem); }
@media (max-width: 700px) {
  .payalsf-projects-cta { --fade: 15vh; padding-top: 22vh; }
}

/* footer heading ~20% smaller */
.payalsf-projects-cta h2 { font-size: clamp(1.7rem, 3.5vw, 2.9rem); }
@media (max-width: 600px) {
  .payalsf-projects-cta h2 { font-size: clamp(1.6rem, 8vw, 2.4rem); }
}

/* 35vh of empty space before the footer on every page. footer-cta.php adds it
   (home already has .home-end-space) and paints it the colour of the section above. */
.payalsf-footer-gap { height: 35vh; }

/* Missing-photo stand-in (payalsf_noimg() in functions.php): fills its box;
   the mark and wordmark scale with the box, within limits. */
.payalsf-noimg {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(6px, 3cqi, 20px);
  container-type: size;
  background:
    linear-gradient(to right, color-mix(in srgb, var(--white) 5%, transparent) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(to bottom, color-mix(in srgb, var(--white) 5%, transparent) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(145deg, var(--navy-900), var(--navy-800));
  pointer-events: none;
}
.payalsf-noimg img { width: auto; height: clamp(22px, 16cqh, 96px); filter: brightness(0) invert(1); opacity: .9; }
.payalsf-noimg span { direction: ltr; color: var(--white); font-family: var(--font-heading); font-size: clamp(13px, 7cqi, 56px); font-weight: 900; letter-spacing: -.02em; line-height: 1; opacity: .9; white-space: nowrap; }

/* ── Height fit (laptops) ──────────────────────────────────────────────────
   Every page copies design.md's :root, where --spacing-section is a fixed
   96px. On short laptop screens (Windows at 125–150% scaling, 13–14" Macs with
   toolbars) that fixed unit made sections taller than the screen, so on
   laptop-width screens it follows the visible height instead: 96px when there
   is ~880px of room under the header, shrinking to 48px at the least. The
   straight line is tuned so the home Services block (the tallest one-screen
   block) fits: ~178px of fixed title plus photos of ~6.67 units.
   `html:root` outranks the pages' own `:root`, so no page file needs changing.
   Widths, grid columns and sticky/anchor offsets use --spacing-section-w, a
   fixed copy of the original, so no layout gets narrower and nothing slides
   under the header. Phones (≤1024px wide) keep the fixed 96px. */
html:root { --spacing-section-w: 96px; }
@media (min-width: 1025px) {
  html:root { --spacing-section: clamp(48px, calc((100svh - 252px) * 0.15), 96px); }
}

/* The footer starts rolling up while a quarter screen of the page above is
   still to come: it overlaps that last 25vh (the empty space before it), and
   the pinning script in footer-cta.php holds the content still from there. */
.payalsf-projects-cta { margin-top: -25vh; }

/* ── Mobile drawer (phones + upright tablets only) ─────────────────────────
   Slides in from the left in both languages: navy brand block, the pages on
   a plain light background, language switch pinned to the bottom. */
@media (max-width: 920px), (orientation: portrait) and (max-width: 1366px) {
  html.payalsf-drawer-open, html.payalsf-drawer-open body { overflow: hidden; }
  .payalsf-siteheader__scrim {
    position: fixed; inset: 0; z-index: 1;
    background: color-mix(in srgb, var(--navy-900) 45%, transparent);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden;
    transition: opacity .35s var(--ease-out), visibility .35s;
  }
  .payalsf-siteheader__mobile {
    position: fixed; inset-block: 0; left: 0; right: auto; z-index: 2;
    display: flex; flex-direction: column;
    width: min(86vw, 360px);
    background: var(--white);
    box-shadow: 24px 0 48px -24px rgba(2,10,22,.45);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .45s var(--ease-out), visibility .45s;
    overscroll-behavior: contain;
  }
  .payalsf-siteheader.is-mobile-open .payalsf-siteheader__scrim { opacity: 1; visibility: visible; }
  .payalsf-siteheader.is-mobile-open .payalsf-siteheader__mobile { transform: none; visibility: visible; }

  .payalsf-drawer__brand {
    position: relative; flex: none;
    padding: calc(var(--sp-xl) + env(safe-area-inset-top, 0px)) var(--sp-lg) var(--sp-lg);
    color: var(--white);
    background:
      linear-gradient(to right, color-mix(in srgb, var(--white) 6%, transparent) 1px, transparent 1px) 0 0 / 28px 28px,
      linear-gradient(to bottom, color-mix(in srgb, var(--white) 6%, transparent) 1px, transparent 1px) 0 0 / 28px 28px,
      linear-gradient(145deg, var(--navy-900), var(--navy-800));
  }
  .payalsf-drawer__mark { display: inline-block; color: var(--white); font-family: var(--font-heading); font-size: 2rem; font-weight: 900; letter-spacing: -.02em; line-height: 1; }
  .payalsf-drawer__mark span { color: var(--blue-300); }
  .payalsf-drawer__brand p { margin: var(--sp-sm) 0 0; max-width: 26ch; color: var(--navy-200); font-size: var(--text-sm); line-height: 1.8; }
  .payalsf-siteheader .payalsf-drawer__close {
    position: absolute; top: calc(var(--sp-sm) + env(safe-area-inset-top, 0px)); inset-inline-end: var(--sp-sm);
    display: inline-grid; place-items: center; width: 38px; height: 38px;
    border: 1px solid color-mix(in srgb, var(--white) 22%, transparent); border-radius: var(--r-full);
    background: color-mix(in srgb, var(--white) 8%, transparent); color: var(--white);
  }
  .payalsf-drawer__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

  .payalsf-drawer__nav { flex: 1; overflow-y: auto; padding: var(--sp-sm) var(--sp-md); }
  .payalsf-drawer__nav a {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm);
    padding: calc(var(--sp-md) * .8) var(--sp-sm);
    border-bottom: 1px solid var(--gray-100);
    color: var(--navy-900); font-size: calc(var(--text-lg) * .92); font-weight: 700;
  }
  /* Magazine: the name is the link, the arrow is a separate toggle for its pages */
  .payalsf-drawer__row { display: flex; align-items: stretch; border-bottom: 1px solid var(--gray-100); }
  .payalsf-drawer__row > a { flex: 1; border-bottom: 0; }
  /* scoped under the header so it outranks the parent theme's reset.css button:hover/:focus (pink) */
  .payalsf-siteheader .payalsf-drawer__toggle,
  .payalsf-siteheader .payalsf-drawer__toggle:hover,
  .payalsf-siteheader .payalsf-drawer__toggle:focus,
  .payalsf-siteheader .payalsf-drawer__toggle:active { flex: none; display: grid; place-items: center; width: 52px; padding: 0; border: 0; border-inline-start: 1px solid var(--gray-100); border-radius: 0; background: transparent; box-shadow: none; color: var(--navy-300); cursor: pointer; }
  .payalsf-siteheader .payalsf-drawer__toggle:focus-visible { outline: 2px solid var(--blue-600); outline-offset: -4px; }
  .payalsf-siteheader .payalsf-drawer__group.is-open .payalsf-drawer__toggle { color: var(--blue-600); }
  /* a chevron: points down while closed, flips up when open (same in both languages) */
  .payalsf-drawer__toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
  .payalsf-drawer__group.is-open .payalsf-drawer__toggle svg { transform: rotate(180deg); }
  .payalsf-drawer__sub { padding: 2px 0 6px; padding-inline-start: var(--sp-md); border-bottom: 1px solid var(--gray-100); background: var(--gray-50); }
  .payalsf-drawer__nav .payalsf-drawer__sub a { padding-block: calc(var(--sp-sm) * 1.1); border-bottom: 0; color: var(--navy-700); font-size: var(--text-base); font-weight: 600; }
  .payalsf-drawer__nav .payalsf-drawer__sub a + a { border-top: 1px solid var(--gray-100); }
  .payalsf-drawer__nav a svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--navy-300); }
  .payalsf-drawer__nav a[aria-current="page"] { color: var(--blue-600); }
  .payalsf-drawer__nav a[aria-current="page"] span { position: relative; padding-inline-start: var(--sp-md); }
  .payalsf-drawer__nav a[aria-current="page"] span::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: currentColor; }

  .payalsf-drawer__lang {
    flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
    margin: var(--sp-md); margin-bottom: calc(var(--sp-md) + env(safe-area-inset-bottom, 0px));
    padding: 4px; border-radius: var(--r-full); background: var(--gray-100);
  }
  .payalsf-drawer__lang a { display: grid; place-items: center; min-height: 42px; border-radius: var(--r-full); color: var(--navy-700); font-size: var(--text-sm); font-weight: 700; }
  .payalsf-drawer__lang a[aria-current="true"] { background: var(--white); color: var(--navy-900); box-shadow: 0 2px 8px -2px rgba(16,42,67,.25); }
}
@media (prefers-reduced-motion: reduce) {
  .payalsf-siteheader__mobile, .payalsf-siteheader__scrim { transition: none; }
}
@media (max-width: 920px), (orientation: portrait) and (max-width: 1366px) {
  .payalsf-siteheader:not(.is-ltr) .payalsf-drawer__nav a svg { transform: scaleX(-1); }
}

/* Below the footer: the footer's navy, never the page. The page's own light
   background is drawn only over the top half (and above the page, for the
   pull-down bounce); from the middle down, and past the end of the page (the
   bottom bounce, or any gap under the footer), the root shows navy. This is
   background only: the page length and where scrolling stops are unchanged. */
html {
  background: var(--navy-900) linear-gradient(var(--color-background), var(--color-background)) 0 -100vh / 100% calc(50% + 100vh) no-repeat;
}
/* a page shorter than the screen (e.g. 404) keeps its own background to the bottom */
body { min-height: 100vh; min-height: 100svh; }

/* position: sticky needs a page that isn't its own scroll box: `clip` hides
   sideways overflow like `hidden` did, without making <body> a scroller (the
   footer roll-over and every sticky section rely on this) */
body { overflow-x: clip; }

/* Desktop footer: as tall as its content, 100% of the screen at most (no
   minimum). Phones keep their own footer layout from assets/mobile.css. */
@media (min-width: 921px) and (orientation: landscape), (min-width: 1367px) {
  /* To stay within the screen height without cutting anything, the flexible parts give on
     short screens: the giant name keeps its size unless the screen is short
     (then at most 28% of it), and the fade band takes what's left, up to its
     usual 20%. ~460px is the real content (heading, links, copyright). */
  .payalsf-projects-cta {
    --giant: min(clamp(2.5rem, 13.5vw, 12.5rem), 28vh); /* Kryon Void Sans: PAYA LSF is 6.8em wide */
    --top-gap: var(--sp-xl); /* breathing room between the fade and the heading */
    /* no fade any more: --fade is now just 5vh of extra height at the top
       (less on short screens, so it still fits) */
    --fade: clamp(0px, calc(100vh - var(--giant) * .6 - 460px - var(--top-gap)), 5vh);
    -webkit-mask-image: none;
    mask-image: none;
    min-height: 0;
    max-height: 100vh;
    box-sizing: border-box;
    padding-top: calc(var(--fade) + var(--top-gap));
    padding-bottom: calc(var(--giant) * .6);
  }
  .payalsf-projects-cta__giant { font-size: var(--giant); }
  .payalsf-projects-cta__nav { margin-top: min(var(--sp-lg), 2.5vh); padding-top: min(var(--sp-lg), 2.5vh); }
  .payalsf-projects-cta__legal { margin-top: min(var(--sp-lg), 2.5vh); }
}

/* ── PAYA LSF wordmark font (Kryon Void Sans, Latin only, one weight) ──
   The navbar logo (and its phone-menu copy), the footer's name under the logo,
   the footer's giant name and the loader's giant name. Single weight: no faux
   bold, letter-spacing as drawn. */
@font-face {
  font-family: 'Kryon Void Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/kryon-void-sans-regular.woff2') format('woff2');
}
.payalsf-siteheader__logo,
.payalsf-siteheader.is-ltr .payalsf-siteheader__logo,
.payalsf-drawer__mark,
.payalsf-projects-cta__wordmark,
.payalsf-projects-cta__giant,
.payalsf-loader__giant {
  font-family: 'Kryon Void Sans', var(--font-heading);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0;
}
/* the giant names: this face is wide (PAYA LSF = 6.8em), so ~13.5vw fills the width */
.payalsf-loader__giant { font-size: clamp(2.5rem, 13.5vw, 12.5rem); }
/* the footer's follows --giant where the desktop footer sets it (its height is
   worked out from it), else the same size */
.payalsf-projects-cta__giant { font-size: var(--giant, clamp(2.5rem, 13.5vw, 12.5rem)); }

/* ── Home loader: claim, progress line, facts (template-parts/page-loader.php) ── */
.payalsf-loader__claim { display: inline-flex; align-items: baseline; gap: .28em; }
.payalsf-loader__slot { position: relative; display: inline-grid; justify-items: start; overflow: hidden; padding-block: .1em .4em; margin-block: -.1em -.4em; color: var(--blue-200); }
.payalsf-loader__slot > span { grid-area: 1 / 1; transform: translateY(110%); opacity: 0; transition: transform .55s cubic-bezier(.22, 1, .36, 1), opacity .4s ease; }
.payalsf-loader__slot > span.is-on { transform: none; opacity: 1; }
.payalsf-loader__slot > span.is-out { transform: translateY(-110%); opacity: 0; }
.payalsf-loader__progress { position: absolute; inset-inline: 0; bottom: max(12vh, calc(64px + env(safe-area-inset-bottom, 0px))); z-index: 1; display: grid; justify-items: center; gap: 14px; width: min(440px, calc(100% - 48px)); margin-inline: auto; text-align: center; }
.payalsf-loader__bar { position: relative; display: block; width: 100%; height: 2px; overflow: hidden; border-radius: 2px; background: color-mix(in srgb, var(--white) 14%, transparent); }
.payalsf-loader__bar i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--blue-200), var(--white)); transform: scaleX(0); transform-origin: left; transition: transform .25s linear; }
.payalsf-loader__progress[dir="rtl"] .payalsf-loader__bar i { transform-origin: right; background: linear-gradient(270deg, var(--blue-200), var(--white)); }
.payalsf-loader__tip { min-height: 3.2em; margin: 0; color: color-mix(in srgb, var(--white) 72%, transparent); font-size: clamp(13px, 1.1vw, 15px); line-height: 1.6; transition: opacity .35s ease; }
.payalsf-loader__tip.is-hide { opacity: 0; }
.payalsf-loader.is-leaving .payalsf-loader__progress { opacity: 0; transition: opacity .18s ease-out; }
@media (prefers-reduced-motion: reduce) { .payalsf-loader__slot > span { transition: none; } }
/* the claim sits centred under the giant (not offset like a page name), and is
   sized so "Building more precise" fits a phone */
.payalsf-loader__name.payalsf-loader__claim,
.payalsf-loader.is-ltr .payalsf-loader__name.payalsf-loader__claim { --name-x: 0px; --name-y: clamp(36px, 6vw, 110px); font-size: clamp(26px, 5vw, 78px); }

/* ── Footer: "Contact the designer" (template-parts/footer-cta.php) ──
   Transparent, in the copyright's colour, sitting exactly on the background's
   58px squares (the script sets its width and nudges it onto the grid). On
   hover each square flips over, one after another, to white, and the text
   turns the footer's navy. */
.payalsf-projects-cta__legal .payalsf-designer { margin-inline-start: auto; } /* the script lines it up under "Get in touch" */
.payalsf-designer {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  height: 58px;
  color: var(--navy-300);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.payalsf-projects-cta:not(.is-ltr) .payalsf-designer { letter-spacing: .06em; text-transform: none; }
.payalsf-designer__tiles { position: absolute; inset: 0; display: flex; perspective: 600px; pointer-events: none; }
.payalsf-designer__tiles i { position: relative; flex: 1 1 0; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.22, 1, .36, 1) calc(var(--k, 0) * 70ms); }
.payalsf-designer__tiles i::before,
.payalsf-designer__tiles i::after { content: ""; position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/* front: the grid square outlined; back: solid white */
.payalsf-designer__tiles i::before { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 16%, transparent); }
.payalsf-designer__tiles i::after { inset: 0 -1px; background: var(--white); transform: rotateY(180deg); } /* 1px overlap: no seam between white squares */
.payalsf-designer__label { position: relative; z-index: 1; transition: color .3s ease .15s; }
.payalsf-designer:hover .payalsf-designer__tiles i,
.payalsf-designer:focus-visible .payalsf-designer__tiles i { transform: rotateY(180deg); }
.payalsf-designer:hover .payalsf-designer__label,
.payalsf-designer:focus-visible .payalsf-designer__label { color: var(--navy-900); }
.payalsf-designer:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 2px; }
/* the "..." after the credit: three dots that grow and shrink in turn */
.payalsf-designer__label { display: inline-flex; align-items: center; }
.payalsf-designer__dots { display: inline-flex; gap: 3px; margin-inline-start: 6px; }
.payalsf-designer__dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: payalsf-designer-dot 1.2s ease-in-out infinite; }
.payalsf-designer__dots i:nth-child(2) { animation-delay: .2s; }
.payalsf-designer__dots i:nth-child(3) { animation-delay: .4s; }
@keyframes payalsf-designer-dot { 0%, 80%, 100% { transform: scale(.55); opacity: .55; } 40% { transform: scale(1.35); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .payalsf-designer__tiles i, .payalsf-designer__label { transition: none; }
  .payalsf-designer__dots i { animation: none; }
}