/* ACASC Middle East — v2. Tokens from DESIGN.md; direction B4. Do not add values that are not there. */
:root {
  --primary: #42011f;
  --primary-hover: #5a0a2e;
  --primary-active: #2e0015;
  --on-dark-hover: #f3e9ee;
  --ink: #16141a;
  --muted: #5c5763;
  --surface: #f6f6f6;
  --background: #ffffff;
  --line: #e6e1e6;
  --on-primary: #ffffff;
  --whatsapp: #1ea952;

  --font-sans: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-naskh: "Amiri", "IBM Plex Sans Arabic", serif;

  /* Type scale: 13 / 16 / 26 / heading / display. Amiri sizes are optical matches (DESIGN.md). */
  --text-label: 0.8125rem;
  --text-body: 1rem;
  --text-title: 1.625rem;
  --text-heading: clamp(2.25rem, 3vw + 1rem, 3.5rem);
  --text-display: clamp(2.75rem, 5vw + 1rem, 4rem);

  /* Spacing: 8px unit */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 80px;
  --gutter: 80px;
  --section: 80px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --hero-h: min(88vh, 640px);
  --shadow-card: 0 12px 32px rgba(22, 20, 26, 0.08);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--primary) var(--surface); }
body { margin: 0; background: var(--background); color: var(--ink); font-family: var(--font-sans); font-size: var(--text-body); line-height: 1.8; }
img, video { display: block; max-width: 100%; }
::selection { background: var(--primary); color: var(--on-primary); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--radius-sm); }
.on-dark :focus-visible { outline-color: var(--on-primary); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Header ---------- */
.site-header { position: absolute; inset-inline: 0; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--gutter); background: linear-gradient(rgba(22, 20, 26, 0.62), rgba(22, 20, 26, 0.3) 60%, rgba(22, 20, 26, 0)); }
.site-header .logo img { height: 28px; width: auto; }
.site-header nav { display: flex; gap: var(--space-md); }
.site-header nav a { text-decoration: none; color: rgba(255, 255, 255, 0.82); transition: color 160ms var(--ease); }
.site-header nav a:hover { color: var(--on-primary); }

/* ---------- Type ---------- */
.eyebrow { margin: 0 0 var(--space-sm); font-size: var(--text-label); font-weight: 600; line-height: 1.4; color: var(--primary); }
.on-dark .eyebrow { color: rgba(255, 255, 255, 0.86); }
.display { margin: 0; font-family: var(--font-naskh); font-size: var(--text-display); font-weight: 700; line-height: 1.45; text-wrap: balance; }
.heading { margin: 0; font-family: var(--font-naskh); font-size: var(--text-heading); font-weight: 700; line-height: 1.45; text-wrap: balance; }
.lead { margin: var(--space-md) 0 0; max-width: 34ch; color: var(--muted); }
.on-dark .lead { color: rgba(255, 255, 255, 0.86); }

/* ---------- Buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); height: 48px; padding: 0 var(--space-md); border-radius: var(--radius-sm); border: 1px solid transparent; font: 600 var(--text-body)/1 var(--font-sans); text-decoration: none; cursor: pointer; transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease); }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:active { background: var(--primary-active); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); }
.on-dark .btn-primary { background: var(--on-primary); color: var(--primary); }
.on-dark .btn-primary:hover { background: var(--on-dark-hover); }
.on-dark .btn-secondary { color: var(--on-primary); border-color: rgba(255, 255, 255, 0.6); }
.on-dark .btn-secondary:hover { border-color: var(--on-primary); background: rgba(255, 255, 255, 0.08); }

/* ---------- 1. Hero (B4) ---------- */
.stage { position: relative; height: calc(var(--hero-h) + 88px); color: var(--on-primary); background: var(--primary); overflow: hidden; }
.stage > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, rgba(66, 1, 31, 0.9) 0, rgba(66, 1, 31, 0.74) calc(var(--gutter) + 580px), rgba(66, 1, 31, 0) calc(var(--gutter) + 920px)); }
.hero-text { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; max-width: calc(560px + var(--gutter)); padding: 88px var(--gutter) var(--space-xl); }
.pause { position: absolute; z-index: 4; inset-inline-end: var(--gutter); top: 96px; display: grid; place-items: center; width: 44px; height: 44px; color: var(--on-primary); background: rgba(22, 20, 26, 0.6); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; cursor: pointer; }
.pause svg { width: 14px; height: 14px; }

/* Facts card — client facts only */
.facts-card { position: relative; z-index: 2; margin: -80px var(--gutter) 0; padding: 32px 40px; background: var(--background); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.facts li { padding: 0 var(--space-md); border-inline-start: 1px solid var(--line); }
.facts li:first-child { border-inline-start: 0; padding-inline-start: 0; }
.facts b { display: block; font-size: var(--text-title); line-height: 1.4; font-weight: 600; color: var(--primary); }
.facts span { display: block; margin-top: 4px; font-size: var(--text-label); line-height: 1.6; color: var(--muted); }

/* ---------- 2. About — student photos in the background, revealed on arrival ---------- */
.about { position: relative; isolation: isolate; margin-top: var(--section); padding: var(--section) var(--gutter); min-height: 640px; display: flex; align-items: center; overflow: hidden; }
.about-photos { position: absolute; inset: 0; z-index: -2; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin: 0; padding: 0; list-style: none; }
.about-photos img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.about-photos li { opacity: 1; transform: none; }
.about::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to left, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.92) 38%, rgba(255, 255, 255, 0.55) 62%, rgba(255, 255, 255, 0.08) 100%); }
.about-text { max-width: 560px; }
.about-text > p { margin: var(--space-md) 0 0; }
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin: var(--space-lg) 0 0; padding-top: var(--space-md); border-top: 1px solid var(--line); }
.pillars h3 { margin: 0 0 4px; font-size: var(--text-label); font-weight: 600; line-height: 1.4; color: var(--primary); }
.pillars p { margin: 0; }
.why { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
.why li { position: relative; padding-inline-start: var(--space-sm); }
.why li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.85em; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.photo-note { position: absolute; inset-inline-end: var(--gutter); bottom: var(--space-md); margin: 0; font-size: var(--text-label); line-height: 1.4; color: var(--on-primary); background: rgba(22, 20, 26, 0.72); padding: 4px 10px; border-radius: var(--radius-sm); }

/* The one motion moment of this section: photos arrive one after another. Only when JS is present and motion is allowed. */
.js .about-photos li { opacity: 0; transform: scale(1.04); transition: opacity 900ms var(--ease), transform 1200ms var(--ease); }
.js .about.in .about-photos li { opacity: 1; transform: none; }
.js .about.in .about-photos li:nth-child(2) { transition-delay: 120ms; }
.js .about.in .about-photos li:nth-child(3) { transition-delay: 240ms; }
.js .about.in .about-photos li:nth-child(4) { transition-delay: 360ms; }
.js .about.in .about-photos li:nth-child(5) { transition-delay: 480ms; }

/* ---------- 3. Services — the client's 8 services, grouped by journey stage ---------- */
.services { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-xl); align-items: start; padding: var(--section) var(--gutter); background: var(--surface); }
.services-intro { position: sticky; top: var(--space-lg); }
.services-intro .actions { margin-top: var(--space-lg); }
.stages { display: grid; gap: 0; }
.stage-group { display: grid; grid-template-columns: 2fr 5fr; gap: var(--space-md); padding: var(--space-lg) 0; border-top: 1px solid var(--line); }
.stage-group:first-child { border-top: 0; padding-top: 0; }
.stage-group h3 { margin: 0; font-size: var(--text-title); font-weight: 600; line-height: 1.4; color: var(--primary); }
.stage-group ul { margin: 0; padding: 0; list-style: none; }
.stage-group li { display: flex; align-items: baseline; gap: var(--space-xs); padding: 12px 0; border-top: 1px solid var(--line); }
.stage-group li:first-child { border-top: 0; padding-top: 4px; }
.services { position: relative; isolation: isolate; overflow: hidden; }
/* Background student photos, revealed on arrival like About. Photos are softened (saturation/contrast) so the list on top stays readable. */
.services .services-photos { position: absolute; inset: 0; z-index: -2; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin: 0; padding: 0; list-style: none; }
.services .services-photos img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: saturate(0.7) contrast(0.85); }
.services::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to left, rgba(246, 246, 246, 0.96) 0%, rgba(246, 246, 246, 0.88) 45%, rgba(246, 246, 246, 0.8) 75%, rgba(246, 246, 246, 0.7) 100%); }
.js .services .services-photos li { opacity: 0; transform: scale(1.04); transition: opacity 900ms var(--ease), transform 1200ms var(--ease); }
.js .services.in .services-photos li { opacity: 1; transform: none; }
.js .services.in .services-photos li:nth-child(2) { transition-delay: 120ms; }
.js .services.in .services-photos li:nth-child(3) { transition-delay: 240ms; }
.js .services.in .services-photos li:nth-child(4) { transition-delay: 360ms; }
.js .services.in .services-photos li:nth-child(5) { transition-delay: 480ms; }

/* ---------- 4. Steps — the single full burgundy band; a real sequence, so numbers are meaningful ---------- */
.steps { padding: var(--section) var(--gutter); background: var(--primary); color: var(--on-primary); }
.steps .heading { max-width: 18ch; }
.timeline { margin-top: var(--space-xl); }
.span-note { position: relative; width: calc(50% - var(--space-md) / 2); margin: 0 0 var(--space-md); padding-bottom: var(--space-sm); font-size: var(--text-label); line-height: 1.6; color: rgba(255, 255, 255, 0.86); }
.span-note b { color: var(--on-primary); font-weight: 600; }
/* bracket over steps 1–4 */
.span-note::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 8px; border: 1px solid rgba(255, 255, 255, 0.5); border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.step-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg) var(--space-md); margin: 0; padding: 0; list-style: none; }
.step-list li { position: relative; padding-top: var(--space-md); border-top: 1px solid rgba(255, 255, 255, 0.3); }
.step-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--on-primary); }
.step-list .num { display: block; font-family: var(--font-naskh); font-size: var(--text-title); font-weight: 700; line-height: 1.2; color: rgba(255, 255, 255, 0.7); }
.step-list p { margin: var(--space-xs) 0 0; font-weight: 600; line-height: 1.6; }
.steps .actions { margin-top: var(--space-xl); }

/* ---------- 5. Universities — real campus photos, place named on each, mosaic not uniform cards ---------- */
.universities { padding: var(--section) var(--gutter); background: var(--background); }
.uni-intro { max-width: 640px; }
.uni-mosaic { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 220px; gap: var(--space-sm); margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
.uni-tile { position: relative; grid-column: span 3; overflow: hidden; border-radius: var(--radius-md); background: var(--primary); }
.uni-tile--lg { grid-column: span 7; grid-row: span 2; }
.uni-tile--md { grid-column: span 5; grid-row: span 2; }
.uni-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.uni-tile:hover .uni-photo { transform: scale(1.03); }
.uni-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(66, 1, 31, 0.88) 0%, rgba(66, 1, 31, 0.45) 38%, rgba(66, 1, 31, 0) 70%); }
.uni-label { position: absolute; z-index: 1; inset-inline: var(--space-md); bottom: var(--space-md); display: flex; align-items: center; gap: 12px; color: var(--on-primary); }
.uni-logo { flex: none; width: 48px; height: 48px; padding: 4px; border-radius: 50%; background: var(--background); object-fit: contain; }
.uni-tile--third { grid-column: span 4; }
.uni-open { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; color: inherit; font: inherit; text-align: start; background: none; cursor: pointer; }
.uni-open:focus-visible { outline: none; }
.uni-tile:has(.uni-open:focus-visible) { outline: 3px solid var(--primary); outline-offset: 3px; }
.uni-name { display: block; font-size: var(--text-body); font-weight: 600; line-height: 1.4; }
.uni-tile--lg .uni-name, .uni-tile--md .uni-name { font-size: var(--text-title); }
.uni-count { position: absolute; z-index: 1; inset-inline-start: var(--space-sm); top: var(--space-sm); padding: 4px 10px; font-size: var(--text-label); font-weight: 600; line-height: 1.5; color: var(--primary); background: var(--background); border-radius: var(--radius-sm); box-shadow: 0 2px 8px rgba(22, 20, 26, 0.12); transition: background-color 160ms var(--ease), color 160ms var(--ease); }
.uni-tile:hover .uni-count, .uni-open:focus-visible .uni-count { color: var(--on-primary); background: var(--primary); }

/* Gallery dialog — the client's photos of each university */
.modal-open { overflow: hidden; }
.gallery { scroll-padding-top: 88px; width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: var(--radius-md); color: var(--ink); background: var(--background); box-shadow: 0 24px 64px rgba(22, 20, 26, 0.35); overflow: auto; }
.gallery::backdrop { background: rgba(22, 20, 26, 0.78); }
.gallery-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: var(--space-sm) var(--space-md); background: var(--background); border-bottom: 1px solid var(--line); }
.gallery-head h3 { margin: 0; flex: 1; font-family: var(--font-naskh); font-size: var(--text-title); font-weight: 700; line-height: 1.4; }
.gallery-head .uni-logo { width: 40px; height: 40px; border: 1px solid var(--line); }
.gallery-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--background); cursor: pointer; transition: border-color 160ms var(--ease), color 160ms var(--ease); }
.gallery-close:hover { border-color: var(--primary); color: var(--primary); }
.gallery-close svg { width: 20px; height: 20px; }
.gallery-stage { display: grid; grid-template-columns: 1fr; margin: 0; padding: var(--space-md) var(--space-md) 0; }
.gallery-stage img { grid-area: 1 / 1; width: 100%; height: auto; max-height: 62vh; object-fit: contain; background: var(--surface); border-radius: var(--radius-sm); }
.gallery-stage figcaption { grid-area: 2 / 1; display: flex; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) 0 0; font-weight: 600; }
.gallery-count { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
/* Arrows share the image's grid cell, so they stay centred on it whatever its height */
.gallery-nav { grid-area: 1 / 1; align-self: center; z-index: 1; margin-inline: 12px; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; color: var(--primary); background: rgba(255, 255, 255, 0.92); box-shadow: 0 4px 16px rgba(22, 20, 26, 0.2); cursor: pointer; }
.gallery-nav:hover { background: var(--background); }
.gallery-nav svg { width: 22px; height: 22px; }
.gallery-prev { justify-self: start; }
.gallery-next { justify-self: end; }
.gallery-thumbs { display: flex; gap: var(--space-xs); margin: 0; padding: var(--space-sm) var(--space-md) var(--space-md); overflow-x: auto; list-style: none; scrollbar-width: thin; }
.gallery-thumbs button { display: block; flex: none; width: 104px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: var(--radius-sm); background: none; cursor: pointer; opacity: 0.7; transition: opacity 160ms var(--ease), border-color 160ms var(--ease); }
.gallery-thumbs button:hover { opacity: 1; }
.gallery-thumbs button[aria-current="true"] { border-color: var(--primary); opacity: 1; }
.gallery-thumbs img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

.uni-more-note { max-width: 62ch; margin: var(--space-md) 0 0; font-size: var(--text-body); line-height: 1.7; color: var(--ink); }
.uni-more-note a { white-space: nowrap; color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.uni-more-note a:hover { color: var(--primary-hover); }
.credit-note { margin: var(--space-md) 0 0; font-size: var(--text-label); line-height: 1.6; color: var(--muted); }

/* ---------- 6. Testimonials — the client's own student videos in their phone format ---------- */
.voices { padding: var(--section) var(--gutter); background: var(--surface); }
.voices-intro { max-width: 640px; }
.clips { display: grid; gap: var(--space-md); margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
.clip { position: relative; margin: 0; }
/* More videos than fit one row: a scroll-snap row with arrow controls on desktop (phones swipe, see the mobile block) */
.clips--scroll { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-block: 8px; margin-block: -8px; }
.clips--scroll::-webkit-scrollbar { display: none; }
.clips--scroll > li { flex: 0 0 calc((100% - 4 * var(--space-md)) / 5); scroll-snap-align: start; }
/* Arrows sit on the row's two sides, centred on the video cards (--nav-y is set by app.js) */
.clips-row { position: relative; margin-top: var(--space-lg); }
.clips-row > .clips { margin-top: 0; }
.clips-nav { position: absolute; top: var(--nav-y, 40%); z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; color: var(--primary); background: rgba(255, 255, 255, 0.96); box-shadow: var(--shadow-card); cursor: pointer; transform: translateY(-50%); transition: opacity 160ms var(--ease), transform 160ms var(--ease); }
.clips-nav:hover { transform: translateY(-50%) scale(1.06); }
.clips-nav:disabled { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 160ms var(--ease), visibility 0s 160ms; }
.clips-nav svg { width: 22px; height: 22px; }
#clips-prev { inset-inline-start: -24px; }
#clips-next { inset-inline-end: -24px; }
.clip .poster, .clip video { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--radius-md); background: var(--ink); }
.clip .play { position: absolute; top: 0; inset-inline: 0; display: grid; place-items: center; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: var(--radius-md); background: rgba(22, 20, 26, 0.12); cursor: pointer; transition: background-color 160ms var(--ease); }
.clip .play:hover { background: rgba(22, 20, 26, 0.28); }
.clip .play span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: var(--primary); background: var(--on-primary); box-shadow: var(--shadow-card); }
.clip .play svg { width: 24px; height: 24px; margin-left: 4px; } /* media icons are not mirrored in RTL */
.clip figcaption { margin-top: 12px; font-size: var(--text-label); line-height: 1.6; color: var(--muted); }
.clip figcaption b { display: block; font-size: var(--text-body); font-weight: 600; color: var(--ink); }
.team { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--line); }
.team h3 { margin: 0; font-size: var(--text-title); font-weight: 600; line-height: 1.4; }
.team > p { margin: 4px 0 0; color: var(--muted); }
.clips--wide { grid-template-columns: repeat(2, minmax(0, 420px)); margin-top: var(--space-md); }
.clip--wide .poster, .clip--wide video, .clip--wide .play { aspect-ratio: 16 / 9; }
.clip:not(.playing) video { display: none; }
.clip.playing .poster, .clip.playing .play { display: none; }

/* ---------- 7. FAQ — the client's 4 questions, native details/summary ---------- */
.faq { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-xl); align-items: start; padding: var(--section) var(--gutter); background: var(--background); }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; display: block; padding: var(--space-md) 0 var(--space-md) var(--space-lg); font-size: var(--text-title); font-weight: 600; line-height: 1.4; cursor: pointer; list-style: none; transition: color 160ms var(--ease); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--primary); }
/* plus that turns into minus — drawn, not a glyph */
.faq-list summary::before, .faq-list summary::after { content: ""; position: absolute; inset-inline-end: 0; top: 50%; width: 16px; height: 2px; background: var(--primary); transition: transform 200ms var(--ease); }
.faq-list summary::after { transform: rotate(90deg); }
.faq-list details[open] summary::after { transform: rotate(0deg); }
.faq-list details p { margin: 0 0 var(--space-md); max-width: 60ch; color: var(--muted); }

/* ---------- 8. Start your file — real photo, gradient from the start edge, the one floating white card ---------- */
.contact { position: relative; isolation: isolate; display: grid; grid-template-columns: 6fr 5fr; gap: var(--space-xl); align-items: center; padding: var(--section) var(--gutter); color: var(--on-primary); background: var(--primary); overflow: hidden; }
.contact-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.contact::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to left, rgba(66, 1, 31, 0.92) 0%, rgba(66, 1, 31, 0.78) 45%, rgba(66, 1, 31, 0.55) 100%); }
.assure { display: grid; gap: var(--space-sm); margin: var(--space-lg) 0 0; padding: 0; list-style: none; color: rgba(255, 255, 255, 0.86); }
.assure b { display: block; color: var(--on-primary); font-weight: 600; }
.direct { margin: var(--space-lg) 0 0; font-size: var(--text-label); color: rgba(255, 255, 255, 0.86); }
.direct a { color: var(--on-primary); text-underline-offset: 3px; }
.lead-form { display: grid; gap: 4px; padding: var(--space-lg); color: var(--ink); background: var(--background); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.lead-form label { margin-top: 12px; font-size: var(--text-label); font-weight: 600; line-height: 1.4; }
.lead-form label:first-child { margin-top: 0; }
.lead-form input, .lead-form select, .lead-form textarea { width: 100%; padding: 10px 12px; font: inherit; color: var(--ink); background: var(--background); border: 1px solid var(--muted); border-radius: var(--radius-sm); transition: border-color 160ms var(--ease); }
.lead-form input:hover, .lead-form select:hover, .lead-form textarea:hover { border-color: var(--ink); }
.lead-form input:focus-visible, .lead-form select:focus-visible, .lead-form textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.lead-form [aria-invalid="true"] { border-color: var(--primary); }
.lead-form input[dir="ltr"] { text-align: right; }
.lead-form textarea { resize: vertical; }
.lead-form .btn { margin-top: var(--space-md); width: 100%; }
/* the card is a light island inside a dark section: restore the light-surface button */
.lead-form .btn-primary { background: var(--primary); color: var(--on-primary); }
.lead-form .btn-primary:hover { background: var(--primary-hover); }
.lead-form .btn-primary:active { background: var(--primary-active); }
.lead-form :focus-visible { outline-color: var(--primary); }
.field-error { margin: 2px 0 0; font-size: var(--text-label); line-height: 1.5; color: var(--primary); font-weight: 600; }
.form-status { margin: var(--space-xs) 0 0; font-size: var(--text-label); line-height: 1.6; color: var(--primary); text-align: center; }
.form-status:empty { display: none; }
.form-note { margin: var(--space-xs) 0 0; font-size: var(--text-label); line-height: 1.6; color: var(--muted); text-align: center; }
.lead-form ::placeholder { color: var(--muted); opacity: 1; }

/* ---------- 9. Footer ---------- */
.site-footer { padding: var(--section) var(--gutter) var(--space-lg); color: rgba(255, 255, 255, 0.82); background: var(--ink); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-xl); }
.foot-logo { height: 28px; width: auto; margin-bottom: var(--space-sm); }
.foot-grid p { max-width: 40ch; margin: 0; }
.site-footer h3 { margin: 0 0 var(--space-sm); font-size: var(--text-label); font-weight: 600; color: var(--on-primary); }
.site-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); }
.site-footer a { color: rgba(255, 255, 255, 0.82); text-decoration: none; transition: color 160ms var(--ease); }
.site-footer a:hover { color: var(--on-primary); text-decoration: underline; text-underline-offset: 3px; }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: var(--space-md); margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: var(--text-label); }
.foot-legal > p { margin: 0; }
.credits summary { cursor: pointer; color: rgba(255, 255, 255, 0.82); list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.credits summary::-webkit-details-marker { display: none; }
.credits[open] { flex-basis: 100%; }
.credits p, .credits ul { max-width: 90ch; margin: var(--space-sm) 0 0; line-height: 1.7; }
.credits ul { gap: 4px; }
.credits a { text-decoration: underline; text-underline-offset: 3px; }

.tag { flex: none; padding: 2px 8px; font-size: var(--text-label); font-weight: 600; line-height: 1.6; color: var(--primary); background: var(--background); border: 1px solid var(--line); border-radius: var(--radius-sm); }

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  :root { --gutter: 16px; --section: 56px; }
  .site-header { padding-block: var(--space-sm); }
  .site-header nav { display: none; }
  .stage { height: auto; min-height: 92vh; }
  .stage::after { background: linear-gradient(to top, rgba(66, 1, 31, 0.92) 0%, rgba(66, 1, 31, 0.7) 45%, rgba(66, 1, 31, 0.15) 100%); }
  .hero-text { justify-content: flex-end; min-height: 92vh; padding-bottom: 120px; }
  .facts-card { margin-inline: var(--gutter); padding: var(--space-md); }
  .facts { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-md); }
  .facts li:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }

  .about { display: block; min-height: 0; padding-top: 240px; }
  .about-photos { bottom: auto; height: 260px; }
  .about::before { background: linear-gradient(to top, #ffffff 0%, #ffffff calc(100% - 260px), rgba(255, 255, 255, 0.35) calc(100% - 120px), rgba(255, 255, 255, 0) 100%); }
  .pillars { grid-template-columns: 1fr; gap: var(--space-md); }

  .services { grid-template-columns: 1fr; gap: var(--space-lg); }
  .services-intro { position: static; }
  .stage-group { grid-template-columns: 1fr; gap: var(--space-xs); padding: var(--space-md) 0; }
  .services .services-photos { bottom: auto; height: 220px; }
  .services::before { background: linear-gradient(to top, var(--surface) 0%, var(--surface) calc(100% - 220px), rgba(246, 246, 246, 0.4) calc(100% - 90px), rgba(246, 246, 246, 0) 100%); }
  .services { padding-top: 200px; }

  /* Steps become a vertical timeline on the start edge */
  .timeline { margin-top: var(--space-lg); }
  .span-note { width: auto; padding: 0 var(--space-md) 0 0; margin-bottom: var(--space-sm); }
  .span-note::after { display: none; }
  .step-list { grid-template-columns: 1fr; gap: 0; padding-inline-start: var(--space-md); border-inline-start: 1px solid rgba(255, 255, 255, 0.3); }
  .step-list li { padding: 0 0 var(--space-md); border-top: 0; }
  .step-list li::before { inset-inline-start: calc(-1 * var(--space-md) - 5px); top: 0.6em; }
  .step-list .num { display: inline; font-size: var(--text-body); margin-inline-end: var(--space-xs); }
  .step-list p { display: inline; margin: 0; }
  .step-list li:nth-child(4) { padding-bottom: var(--space-lg); }

  .uni-mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; gap: var(--space-xs); }
  .uni-tile, .uni-tile--lg, .uni-tile--md { grid-column: span 1; grid-row: span 1; }
  .uni-tile--lg, .uni-tile--md { grid-column: span 2; grid-row: span 1; }
  .uni-tile--lg .uni-name, .uni-tile--md .uni-name { font-size: var(--text-body); }
  .uni-tile--third { grid-column: span 1; }
  .uni-tile--third:last-child { grid-column: span 2; }
  .uni-count { inset-inline-start: 8px; top: 8px; padding: 2px 8px; }
  .gallery { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .gallery[open] { display: flex; flex-direction: column; }
  .gallery-stage { margin-block: auto; }
  .gallery-thumbs { scrollbar-width: none; }
  .gallery-stage { padding-inline: 0; }
  .gallery-stage figcaption { padding-inline: var(--space-sm); }
  .gallery-stage img { border-radius: 0; max-height: 52vh; }
  .gallery-nav { width: 40px; height: 40px; margin-inline: 8px; }
  .uni-label { inset-inline: 12px; bottom: 12px; gap: var(--space-xs); }
  .uni-logo { width: 36px; height: 36px; }
  /* Testimonials: swipeable row */
  .clips { display: flex; gap: var(--space-sm); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter)); padding: 8px var(--gutter) var(--space-xs); scrollbar-width: none; }
  .clips::-webkit-scrollbar { display: none; }
  .clips li, .clips--scroll > li { flex: 0 0 68%; scroll-snap-align: start; }
  /* Tablets: three cards per view instead of one giant card */
  @media (min-width: 561px) { .clips--scroll > li { flex-basis: calc((100% - 2 * var(--space-sm)) / 3); } }
  .clips-nav { width: 40px; height: 40px; }
  #clips-prev { inset-inline-start: 4px; }
  #clips-next { inset-inline-end: 4px; }
  .clips--wide li { flex-basis: 86%; }

  .faq { grid-template-columns: 1fr; gap: var(--space-lg); }

  .contact { grid-template-columns: 1fr; gap: var(--space-lg); }
  .contact::before { background: linear-gradient(to top, rgba(66, 1, 31, 0.96) 0%, rgba(66, 1, 31, 0.9) 60%, rgba(66, 1, 31, 0.6) 100%); }
  .lead-form { padding: var(--space-md); }
  .foot-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .faq-list summary { font-size: var(--text-body); padding-block: var(--space-sm); }
  .team { margin-top: var(--space-lg); }
  .photo-note { top: 220px; bottom: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .clips--scroll { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0ms !important; transition-delay: 0ms !important; }
  .js .about-photos li, .js .services .services-photos li { opacity: 1; transform: none; }
}

/* 404 page */
.notfound { min-height: 100vh; display: grid; place-items: center; background: var(--surface); }
.notfound-main { max-width: 560px; padding: var(--space-xl) var(--gutter); text-align: center; }
.notfound-main img { height: 40px; width: auto; margin: 0 auto var(--space-lg); }
.notfound-main .lead { margin-inline: auto; }