/* ==========================================================================
   كنبة (Kanaba) — تصميم داخلي | Warm Luxury / Editorial / Architectural
   ========================================================================== */

:root {
  --ivory: #F4F0E9;
  --beige: #D8CFC3;
  --walnut: #6B4B36;
  --charcoal: #171717;
  --bronze: #A98462;
  --white: #FFFFFF;

  --font-head: "Alexandria", "IBM Plex Sans Arabic", sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Tajawal", sans-serif;

  --safe-margin: 6vw;
  --header-h: 84px;

  --ease-out: cubic-bezier(.16,.8,.24,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 600; margin: 0; color: var(--charcoal); }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 var(--safe-margin); }
.container--wide { max-width: 1440px; }
.center { text-align: center; }

.eyebrow {
  font-family: var(--font-head);
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--bronze);
  margin-bottom: .75rem;
  font-weight: 600;
}
.section-title {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  max-width: 640px;
  margin: 0 auto 3rem;
}
.section-title:not(.center) { margin-inline: 0 auto; text-align: start; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .95rem 1.9rem;
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: .95rem;
  border: 1px solid transparent;
  transition: transform .35s var(--ease-out), background-color .35s, border-color .35s, color .35s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--walnut); color: var(--ivory); }
.btn-primary:hover { background: var(--bronze); }
.btn-ghost { background: transparent; border-color: rgba(23,23,23,.25); color: var(--charcoal); }
.btn-ghost:hover { border-color: var(--walnut); color: var(--walnut); }
.btn-small { padding: .65rem 1.3rem; font-size: .85rem; }
.btn-whatsapp { background: var(--charcoal); color: var(--ivory); }
.btn-whatsapp:hover { background: #2c2c2c; }

/* ==========================================================================
   Loader
   ========================================================================== */
.loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--ivory);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s var(--ease-out), visibility .6s;
}
.loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-inner { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.loader-logo { width: 120px; height: auto; }
.loader-bar { width: 220px; height: 2px; background: rgba(107,75,54,.2); border-radius: 2px; overflow: hidden; }
.loader-bar-fill { height: 100%; width: 0%; background: var(--bronze); transition: width .2s linear; }
.loader-percent { font-size: .75rem; color: var(--walnut); letter-spacing: .05em; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed; top: 0; inset-inline: 0; z-index: 500;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background-color .4s var(--ease-out), backdrop-filter .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(20,16,13,.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: rgba(255,255,255,.12);
}
/* soft dark gradient behind the transparent header, over the video only */
.header-contrast-overlay {
  position: absolute; inset: 0 0 auto 0;
  height: 170px; z-index: 4;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(15,12,10,.42) 0%, rgba(15,12,10,.16) 55%, rgba(15,12,10,0) 100%);
}
.header-inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--safe-margin);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
}
.logo { grid-column: 1; justify-self: start; display: flex; align-items: center; }
.logo-img {
  width: clamp(90px, 8vw, 125px); height: auto;
  filter: brightness(0) invert(1);
}
.footer-logo-img { height: 30px; width: auto; filter: brightness(0) invert(1); }
.main-nav {
  grid-column: 2; justify-self: center;
  display: flex; align-items: center; gap: clamp(22px, 2.3vw, 36px); font-size: .92rem;
}
.main-nav a {
  position: relative;
  color: #ffffff;
  font-size: clamp(17px, 1.2vw, 20px);
  font-weight: 600;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
  opacity: .92; transition: opacity .3s;
}
.main-nav a:hover { opacity: 1; }
.header-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 1rem; }
.header-cta {
  background: #7a533a; color: #ffffff;
  font-size: 18px; font-weight: 700;
  padding: 14px 28px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
}
.nav-toggle { display: none; }

/* ==========================================================================
   Hero + Scroll-Scrubbed Transformation
   ========================================================================== */
.hero-section { position: relative; height: 700vh; }
.hero-pin {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: var(--charcoal);
}

.stage { position: absolute; inset: 0; }
.stage-video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  background: var(--ivory);
}
/* text always sits on the right, so the dark read-contrast area must be on
   the right too — this used to flip (and invert) under dir="rtl", which put
   the dark side behind empty video instead of behind the text. Fixed here. */
.stage-veil {
  position: absolute; inset: 0;
  z-index: 2;
  background: linear-gradient(to left,
    rgba(19,15,12,.52) 0%,
    rgba(19,15,12,.28) 30%,
    rgba(19,15,12,.08) 55%,
    rgba(19,15,12,0) 76%);
  pointer-events: none;
}

/* ==========================================================================
   The unified text rail. Every stop in the video journey — hero, vision,
   the 4 services, the 3 why-us groups, delivery — renders inside THIS one
   slot, at the same right edge, same width, same alignment. Only the slot
   positions itself; the .story-copy children inside it never move
   horizontally, only fade/rise via GSAP (opacity, y, blur, scale).
   ========================================================================== */
.story-copy-slot {
  position: absolute;
  z-index: 5;
  inset-block: 0;
  right: clamp(60px, 6vw, 110px);
  left: auto;
  width: min(760px, 54vw);
  padding-top: 150px; /* clears the fixed header */
  direction: rtl;
  text-align: right;
  pointer-events: none;
}

.hero-copy,
.stage-copy {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  color: #ffffff;
  transition: opacity .4s ease, filter .4s ease;
  will-change: opacity, transform, filter;
}
.hero-copy .eyebrow { color: rgba(255,255,255,.88); text-shadow: 0 2px 14px rgba(0,0,0,.28); }
.hero-title {
  width: 100%; margin: 0;
  color: #ffffff;
  font-size: clamp(54px, 4.6vw, 76px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.025em;
  text-align: right;
  text-shadow: 0 3px 24px rgba(0,0,0,.28);
}
.hero-title__line { display: block; white-space: nowrap; }
.hero-title__line + .hero-title__line { margin-top: 10px; }
.hero-sub {
  margin-top: 1.25rem; font-size: 1.05rem; line-height: 1.9;
  color: rgba(255,255,255,.82); text-shadow: 0 2px 14px rgba(0,0,0,.28);
  max-width: 34em;
}
.hero-actions {
  display: flex; flex-direction: row; justify-content: flex-start; align-items: center;
  gap: 1rem; margin-top: 1.9rem; flex-wrap: wrap;
  direction: rtl;
}
.hero-actions.center { justify-content: center; }

.scroll-indicator {
  position: absolute; bottom: 2.6rem; inset-inline-start: 0;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  font-size: .75rem; color: var(--beige); letter-spacing: .03em;
}
.scroll-indicator-line { width: 1px; height: 42px; background: linear-gradient(to bottom, var(--bronze), transparent); }

/* stage copy panels: absolutely stacked within the slot, one visible at a
   time via JS-driven opacity/transform (never horizontal movement) */
.stage-copy-wrap { position: absolute; inset: 0; pointer-events: none; }
.stage-copy { opacity: 0; pointer-events: none; }
.stage-copy.is-active { pointer-events: auto; }
.stage-eyebrow, .stage-copy .stage-name {
  display: block;
  font-family: var(--font-head);
  color: #d8b99a;
  font-size: clamp(16px, 1.2vw, 19px);
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: .02em;
}
.stage-title, .stage-copy h2 {
  color: #ffffff;
  font-size: clamp(42px, 3.6vw, 58px);
  font-weight: 750;
  line-height: 1.3;
  text-align: right;
  text-shadow: 0 3px 20px rgba(0,0,0,.25);
  max-width: 680px;
}
.stage-copy h2 br { content: ""; display: block; margin-top: 6px; }
.stage-description, .stage-copy p {
  color: rgba(255,255,255,.84);
  font-size: clamp(18px, 1.35vw, 22px);
  line-height: 1.9;
  max-width: 620px;
  margin-top: 20px;
}
.stage-copy .trust-line { color: #d8b99a; font-size: 1rem; font-weight: 500; margin-top: 1.1rem; }
.stage-copy .whyus-points { margin-top: 1.1rem; display: flex; flex-direction: column; gap: .75rem; }
.stage-copy .whyus-points li {
  color: rgba(255,255,255,.84); font-size: clamp(18px, 1.2vw, 20px);
  padding-inline-start: 1.3rem; position: relative;
}
.stage-copy .whyus-points li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .6em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--bronze);
}
.stage-copy--final .stage-name { color: #d8b99a; }

/* vertical journey indicator */
.journey-indicator {
  position: absolute; inset-inline-end: var(--safe-margin); top: 50%;
  transform: translateY(-50%);
  z-index: 7;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  color: var(--beige);
}
.journey-track { width: 2px; height: 160px; background: rgba(244,240,233,.25); border-radius: 2px; position: relative; overflow: hidden; }
.journey-fill { position: absolute; top: 0; inset-inline: 0; width: 100%; height: 0%; background: var(--bronze); }
.journey-label { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; }
.journey-num { font-family: var(--font-head); font-size: 1.3rem; font-weight: 600; color: var(--white); }
.journey-name { font-size: .72rem; letter-spacing: .03em; max-width: 8ch; }

/* reduced-motion static fallback (hidden unless enabled by JS) */
.static-stages { display: none; padding: 6rem 0; background: var(--ivory); }
.static-stage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 2rem; margin-bottom: 3rem; }
.static-stage { padding: 1.6rem; background: var(--white); border-radius: 18px; border: 1px solid rgba(23,23,23,.06); }
.static-stage .stage-name { display: block; font-family: var(--font-head); font-size: .78rem; color: var(--bronze); margin-bottom: .6rem; font-weight: 600; }
.static-stage h3 { font-size: 1.15rem; margin-bottom: .6rem; }
.static-stage p { color: #4a4a4a; font-size: .95rem; }

body.reduced-motion .hero-section { height: auto !important; }
body.reduced-motion .hero-pin { height: 100vh; }
body.reduced-motion .stage-copy-wrap,
body.reduced-motion .journey-indicator,
body.reduced-motion .hero-copy .scroll-indicator { display: none; }
body.reduced-motion .static-stages { display: block; }

/* ==========================================================================
   Projects — horizontal scroller
   ========================================================================== */
.projects { padding: 7rem 0 5rem; background: var(--beige); }
.projects .container { margin-bottom: 3rem; }
.projects-scroller {
  display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 0 var(--safe-margin) 1.5rem;
  scrollbar-width: thin; scrollbar-color: var(--walnut) transparent;
}
.projects-scroller::-webkit-scrollbar { height: 6px; }
.projects-scroller::-webkit-scrollbar-thumb { background: var(--walnut); border-radius: 4px; }
.project-card {
  flex: 0 0 min(78vw, 380px); scroll-snap-align: start;
  background: var(--white); border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(23,23,23,.06);
}
.project-image { aspect-ratio: 4 / 3; width: 100%; overflow: hidden; }
.project-image img { width: 100%; height: 100%; object-fit: cover; }
.project-image.placeholder-image {
  background: repeating-linear-gradient(135deg, #cfc3b2, #cfc3b2 12px, #c3b6a3 12px, #c3b6a3 24px);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--charcoal); font-size: .85rem; padding: 1rem;
}
.project-info { padding: 1.4rem; }
.project-info h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.project-meta { font-size: .85rem; color: var(--walnut); margin-bottom: .5rem; }
.project-scope { font-size: .9rem; color: #4a4a4a; margin-bottom: 1.1rem; }

/* ==========================================================================
   Clients — animated logo marquee
   ========================================================================== */
.clients { padding: 5rem 0; background: var(--white); overflow: hidden; }
.clients .container { margin-bottom: 3rem; }
.clients-marquee {
  width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  direction: ltr;
  /* masked + animated content flickers on mobile WebKit unless it's its
     own promoted compositor layer */
  transform: translateZ(0);
}
.clients-track {
  display: flex; width: max-content;
  direction: ltr;
  animation: clients-scroll 42s linear infinite;
  will-change: transform;
  /* isolate the marquee's repaints from the rest of the page */
  contain: layout paint;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.clients-set { display: flex; align-items: center; gap: 3.2rem; padding-inline-end: 3.2rem; }
.clients-track img {
  height: 42px; width: auto; min-width: 60px; flex-shrink: 0;
  object-fit: contain;
  opacity: .8; transition: opacity .3s, transform .3s;
}
.clients-track img:hover { opacity: 1; transform: translateY(-3px); }
/* paused while the marquee is off-screen (see wireMarqueePause) so it stops
   compositing 46 logos during the heavy scroll-scrubbed hero */
.clients-track.is-paused { animation-play-state: paused; }
@keyframes clients-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .clients-track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
  .clients-set[aria-hidden="true"] { display: none; }
}

/* ==========================================================================
   Offer sections — المناسبات والفعاليات / تجهيز شقق التأجير قصير المدى
   Two standalone content blocks that sit between the project gallery and the
   client marquee. Deliberately static (no scroll-scrubbing, no filters) so
   they add nothing to the hero's per-frame work.
   ========================================================================== */
.offer { padding: 5rem 0; background: var(--ivory); }
.offer--rentals { background: var(--white); }
.offer-intro {
  max-width: 46em; margin: -1.6rem auto 3rem;
  color: #4a4a4a; font-size: 1rem; line-height: 1.9;
}

.offer-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
  margin-bottom: 3rem;
}
.offer-card {
  background: var(--white);
  border: 1px solid rgba(23,23,23,.08);
  border-radius: 20px;
  padding: 1.8rem 1.6rem;
  transition: border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.offer--rentals .offer-card { background: var(--ivory); }
.offer-card:hover { border-color: var(--bronze); transform: translateY(-3px); }
.offer-card-icon { font-size: 1.7rem; line-height: 1; display: block; margin-bottom: .9rem; }
.offer-card h3 { font-size: 1.12rem; margin-bottom: .55rem; }
.offer-card p { font-size: .92rem; color: #4a4a4a; line-height: 1.8; }

.rental-flow {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
  margin-bottom: 2.6rem;
}
.rental-step {
  border: 1px solid rgba(23,23,23,.1);
  border-radius: 20px;
  padding: 1.8rem 1.6rem;
  background: var(--ivory);
}
.rental-step-num {
  font-family: var(--font-head); font-size: .8rem; font-weight: 600;
  color: var(--bronze); letter-spacing: .06em;
  display: block; margin-bottom: .7rem;
}
.rental-step h3 { font-size: 1.1rem; margin-bottom: .55rem; }
.rental-step p { font-size: .92rem; color: #4a4a4a; line-height: 1.8; }

.rental-points {
  max-width: 46em; margin: 0 auto 3rem;
  display: flex; flex-direction: column; gap: .8rem;
}
.rental-points li {
  position: relative; padding-inline-start: 1.6rem;
  font-size: .95rem; color: #4a4a4a; line-height: 1.8;
}
.rental-points li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .65em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--bronze);
}

@media (max-width: 900px) {
  .offer-grid { grid-template-columns: repeat(2, 1fr); }
  .rental-flow { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .offer { padding: 3.5rem 0; }
  .offer-grid { grid-template-columns: 1fr; gap: 1rem; }
  .offer-intro { margin-bottom: 2.2rem; font-size: .95rem; }
}

/* ==========================================================================
   Blog preview (homepage teaser)
   ========================================================================== */
.blog-preview { padding: 2rem 0; background: var(--ivory); }
.blog-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; margin-bottom: 3rem; }
.blog-card {
  background: var(--white); border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(23,23,23,.06);
}
.blog-card-image.placeholder-image {
  aspect-ratio: 16 / 10; width: 100%;
  background: repeating-linear-gradient(135deg, #cfc3b2, #cfc3b2 12px, #c3b6a3 12px, #c3b6a3 24px);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--charcoal); font-size: .85rem; padding: 1rem;
}
.blog-card-body { padding: 1.5rem; }
.blog-card-meta { font-size: .8rem; color: var(--walnut); margin-bottom: .6rem; }
.blog-card-body h3 { font-size: 1.15rem; margin-bottom: .6rem; }
.blog-card-excerpt { font-size: .92rem; color: #4a4a4a; line-height: 1.7; margin-bottom: 1.1rem; }
.blog-card-link { color: var(--walnut); font-weight: 600; font-size: .92rem; transition: color .3s; }
.blog-card-link:hover { color: var(--bronze); }

/* ==========================================================================
   Simple page banner — used by standalone pages (e.g. the blog) that don't
   have the scroll-scrubbed video hero, but still sit under the transparent
   header, so it needs a dark background of its own.
   ========================================================================== */
.page-hero {
  padding: calc(var(--header-h) + 5rem) 0 5rem;
  background: linear-gradient(160deg, var(--charcoal) 0%, var(--walnut) 130%);
}
.page-hero .eyebrow { color: var(--bronze); }
.page-hero h1 { color: var(--white); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.25; max-width: 720px; }
.page-hero-sub { margin-top: 1.2rem; color: var(--beige); font-size: 1.05rem; line-height: 1.8; max-width: 42em; }

.blog-listing { padding: 5rem 0 7rem; background: var(--ivory); }
.blog-listing .blog-preview-grid { margin-bottom: 0; }
.blog-filters { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: 3rem; }
.blog-filters .ai-choice-chip.is-active { background: var(--walnut); color: var(--ivory); border-color: var(--walnut); }

/* image-backed variant of the page banner, for project & article detail pages */
.page-hero.page-hero--image {
  position: relative; background: var(--charcoal);
  background-size: cover; background-position: center;
  min-height: 46vh; display: flex; align-items: flex-end;
}
.page-hero--image::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,17,12,.15) 0%, rgba(23,17,12,.55) 70%, rgba(23,17,12,.82) 100%);
}
.page-hero--image .container { position: relative; z-index: 1; padding-bottom: 3rem; }
.page-hero--image .page-hero-sub { max-width: 46em; }

.detail-back-link {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--walnut); font-weight: 600; font-size: .92rem;
  margin-bottom: 2rem; transition: color .3s;
}
.detail-back-link:hover { color: var(--bronze); }

.detail-body { padding: 4.5rem 0; background: var(--ivory); }
.detail-body .container { max-width: 860px; }
.detail-lede { font-size: 1.15rem; line-height: 1.9; color: #3a3a3a; }
.detail-article { margin-top: 2rem; font-size: 1.02rem; line-height: 1.95; color: #4a4a4a; }
.detail-article h2 { font-size: 1.4rem; color: var(--charcoal); margin: 2.2rem 0 .9rem; }
.detail-article p { margin-bottom: 1.2rem; }
.detail-article ul { margin: 0 0 1.2rem; padding-inline-start: 1.4rem; list-style: disc; }
.detail-article li { margin-bottom: .5rem; }

.detail-gallery-section { padding: 0 0 5rem; background: var(--ivory); }
.detail-gallery-section .container { max-width: 1180px; }
.detail-gallery-section h2 { font-size: 1.4rem; margin-bottom: 1.6rem; }
.detail-gallery {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.detail-gallery img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 14px; border: 1px solid rgba(23,23,23,.06);
}

.detail-videos-section { padding: 0 0 5rem; background: var(--ivory); }
.detail-videos-section .container { max-width: 1180px; }
.detail-videos-section h2 { font-size: 1.4rem; margin-bottom: 1.6rem; }
.detail-videos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
.detail-videos video {
  width: 100%; border-radius: 14px; background: #000;
  aspect-ratio: 16 / 9; object-fit: contain;
}

/* ==========================================================================
   Process timeline
   ========================================================================== */
.process { padding: 3rem 0; background: var(--ivory); }
.timeline { position: relative; max-width: 640px; margin: 0 auto; padding-inline-start: 2.5rem; }
.timeline-line { position: absolute; inset-inline-start: 5px; top: 6px; bottom: 6px; width: 2px; background: rgba(107,75,54,.18); }
.timeline-line-fill { position: absolute; top: 0; inset-inline: 0; height: 0%; background: var(--bronze); transition: height .1s linear; }
.timeline-item { position: relative; padding-bottom: 2.4rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute; inset-inline-start: -2.5rem; top: 2px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--white);
  border: 2px solid var(--walnut);
  transition: background-color .4s var(--ease-out);
}
.timeline-item.is-visible .timeline-dot { background: var(--walnut); }
.timeline-num { font-family: var(--font-head); font-size: .78rem; color: var(--bronze); font-weight: 600; }
.timeline-item h3 { font-size: 1.1rem; margin-top: .3rem; }

/* ==========================================================================
   Reveal-on-scroll utility
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact { position: relative; padding: 7rem 0; overflow: hidden; }
.contact-bg { position: absolute; inset: 0; background: var(--charcoal) center/cover no-repeat; background-size: cover; }
.contact-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(23,17,12,.78), rgba(23,17,12,.9)); }
.contact-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1.1fr; gap: 3.5rem; align-items: start; }
.contact-intro h2 { color: var(--white); font-size: clamp(1.8rem, 3vw, 2.4rem); }
.contact-intro p { color: var(--beige); margin-top: 1rem; font-size: 1.05rem; }
.contact-details { margin-top: 2.2rem; display: flex; flex-direction: column; gap: .9rem; }
.contact-details li { display: flex; align-items: center; gap: .8rem; font-size: .95rem; color: var(--beige); }
.contact-details span { color: var(--bronze); min-width: 7em; flex: none; }
/* long values (portfolio URL, email) must wrap instead of being clipped by
   body's overflow-x guard — min-width:0 lets the flex item shrink below its
   intrinsic width, anywhere-breaking handles unbroken latin URLs */
.contact-details a { color: var(--white); min-width: 0; overflow-wrap: anywhere; }
.contact-instagram-link { display: inline-flex; align-items: center; gap: .5rem; transition: opacity .3s; }
.contact-instagram-link:hover { opacity: .8; }
.contact-instagram-link svg { width: 18px; height: 18px; fill: var(--white); flex-shrink: 0; }
.contact-details li .contact-instagram-link span { color: var(--white); min-width: 0; }

.contact-form {
  background: rgba(244,240,233,.08);
  border: 1px solid rgba(244,240,233,.18);
  backdrop-filter: blur(10px);
  border-radius: 22px;
  padding: 2rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem;
}
/* min-width:0 on both the grid items and the fields themselves is what keeps
   this form inside the viewport. A grid/flex item defaults to min-width:auto,
   i.e. it refuses to shrink below its content's intrinsic width — and a
   <select> reports the width of its LONGEST OPTION as that intrinsic width.
   One long option ("تجهيز شقق تأجير قصير المدى (Airbnb)") was therefore able
   to stretch the whole contact section past the screen edge on a phone. */
.contact-inner > * { min-width: 0; }
.form-row { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
/* the browser's own `[hidden] { display: none }` loses to `.form-row`'s
   display:flex, so the conditional rows need an author rule to actually hide */
.form-row[hidden] { display: none; }
.form-row--full { grid-column: 1 / -1; }
.form-row label { font-size: .85rem; color: var(--beige); }
.form-row input, .form-row select, .form-row textarea {
  background: rgba(255,255,255,.06); border: 1px solid rgba(244,240,233,.25);
  border-radius: 10px; padding: .75rem .9rem; color: var(--white); font-family: inherit; font-size: .95rem;
  width: 100%; min-width: 0; max-width: 100%;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: 2px solid var(--bronze); outline-offset: 1px;
}
/* The dropdown list is drawn by the OS on its own light background, but its
   options inherit the select's white text — leaving them invisible on desktop
   until hovered. Phones render a native picker that ignores these colors,
   which is why the bug only shows on laptops. */
.form-row select option {
  background: var(--white);
  color: var(--charcoal);
}
/* tells the browser to draw native widgets (the date picker's calendar icon,
   inner scrollbars) for a dark surface instead of a light one */
.form-row input[type="date"] { color-scheme: dark; }
.form-row textarea { resize: vertical; }
.form-actions { grid-column: 1 / -1; display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; }
.form-note { grid-column: 1 / -1; color: var(--bronze); font-size: .9rem; min-height: 1.2em; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--charcoal); color: var(--beige); padding: 2.4rem 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.footer-inner .logo { color: var(--ivory); }
.footer-inner p { font-size: .85rem; }
/* agency credit: sits beside the copyright on wide screens and drops to its
   own line on narrow ones, without ever splitting the two into separate rows
   of the footer's own flex layout */
.footer-credit { display: inline-block; margin-inline-start: .5rem; opacity: .85; }
.footer-credit a { color: var(--bronze); font-weight: 500; transition: color .3s; }
.footer-credit a:hover { color: var(--ivory); }
@media (max-width: 560px) {
  .footer-credit { display: block; margin-inline-start: 0; margin-top: .35rem; }
}
.footer-social { display: flex; align-items: center; gap: .9rem; }
.footer-social a {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(244,240,233,.25);
  transition: border-color .3s, background-color .3s;
}
.footer-social a:hover { border-color: var(--bronze); background: rgba(169,132,98,.12); }
.footer-social svg { width: 18px; height: 18px; fill: var(--beige); }

/* ==========================================================================
   Floating WhatsApp button
   ========================================================================== */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 900;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  transition: transform .3s var(--ease-out), box-shadow .3s;
}
.whatsapp-float:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 12px 30px rgba(0,0,0,.32); }
.whatsapp-float svg { width: 30px; height: 30px; fill: #ffffff; position: relative; z-index: 1; }
.whatsapp-float-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: #25D366;
  animation: whatsapp-pulse 2.4s ease-out infinite;
}
@keyframes whatsapp-pulse {
  0% { transform: scale(1); opacity: .55; }
  100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float-ring { animation: none; display: none; }
}

/* ==========================================================================
   AI Chat Widget
   ========================================================================== */
.ai-chat-float {
  position: fixed;
  bottom: 96px;
  left: 24px;
  z-index: 950;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--walnut);
  border: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  transition: transform .3s var(--ease-out), box-shadow .3s, background-color .3s;
  padding: 0;
}
.ai-chat-float:hover { transform: translateY(-4px) scale(1.05); background: var(--bronze); box-shadow: 0 12px 30px rgba(0,0,0,.32); }
.ai-chat-float svg { width: 28px; height: 28px; fill: var(--ivory); position: relative; z-index: 1; }
.ai-chat-float-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--walnut);
  animation: whatsapp-pulse 2.4s ease-out .6s infinite;
}
.ai-chat-float.is-open .ai-chat-float-ring { display: none; }

.ai-chat-tooltip {
  position: fixed;
  bottom: 100px;
  inset-inline-start: 92px;
  z-index: 949;
  max-width: 220px;
  background: var(--white);
  color: var(--charcoal);
  font-size: .82rem;
  line-height: 1.5;
  padding: .7rem 1rem;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
  pointer-events: none;
}
.ai-chat-tooltip.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

.ai-chat-panel {
  position: fixed;
  bottom: 96px;
  inset-inline-start: 24px;
  z-index: 951;
  width: min(360px, calc(100vw - 48px));
  height: min(540px, calc(100vh - 140px));
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform-origin: bottom var(--ai-chat-anchor, left);
  opacity: 0; transform: scale(.92) translateY(12px);
  pointer-events: none;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
html[dir="rtl"] .ai-chat-panel { --ai-chat-anchor: right; }
.ai-chat-panel.is-open { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }

.ai-chat-header {
  background: var(--walnut);
  color: var(--ivory);
  padding: 1rem 1.2rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem;
  flex: none;
}
.ai-chat-header-title { display: flex; flex-direction: column; gap: .1rem; }
.ai-chat-header-title strong { font-family: var(--font-head); font-size: .95rem; }
.ai-chat-header-title span { font-size: .75rem; opacity: .8; }
.ai-chat-close {
  background: none; border: none; color: var(--ivory); opacity: .8;
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; line-height: 1;
}
.ai-chat-close:hover { opacity: 1; background: rgba(255,255,255,.15); }

.ai-chat-messages {
  flex: 1; overflow-y: auto;
  padding: 1rem;
  display: flex; flex-direction: column; gap: .6rem;
  background: var(--ivory);
}
.ai-msg {
  max-width: 84%;
  padding: .6rem .9rem;
  border-radius: 14px;
  font-size: .87rem;
  line-height: 1.6;
}
.ai-msg--bot {
  align-self: flex-start;
  background: var(--white);
  border: 1px solid var(--beige);
  color: var(--charcoal);
  border-end-start-radius: 3px;
}
.ai-msg--user {
  align-self: flex-end;
  background: var(--walnut);
  color: var(--ivory);
  border-end-end-radius: 3px;
}
.ai-msg--note {
  align-self: stretch;
  background: rgba(169,132,98,.15);
  border: 1px solid var(--bronze);
  color: var(--walnut);
  font-size: .8rem;
}
.ai-msg img { display: block; max-width: 100%; border-radius: 10px; margin-top: .3rem; }
.ai-msg-typing { display: flex; gap: 4px; padding: .3rem 0; }
.ai-msg-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--bronze);
  animation: ai-typing 1.1s infinite ease-in-out;
}
.ai-msg-typing span:nth-child(2) { animation-delay: .15s; }
.ai-msg-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ai-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.ai-chat-input-area {
  flex: none;
  border-top: 1px solid var(--beige);
  padding: .75rem;
  display: flex; gap: .5rem; align-items: center;
  background: var(--white);
}
.ai-chat-input {
  flex: 1;
  /* an <input> carries an intrinsic default width (~20 chars); without this
     it refuses to shrink inside the flex row and pushes the send button out
     of the panel on narrow phones */
  min-width: 0;
  border: 1px solid var(--beige);
  border-radius: 999px;
  padding: .6rem 1rem;
  font-family: var(--font-body);
  font-size: .87rem;
  outline: none;
  background: var(--ivory);
  color: var(--charcoal);
}
.ai-chat-input:focus { border-color: var(--bronze); }
.ai-chat-send {
  flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--walnut); border: none; color: var(--ivory);
  display: flex; align-items: center; justify-content: center;
}
.ai-chat-send:hover { background: var(--bronze); }
.ai-chat-send:disabled { opacity: .4; }
.ai-chat-send svg { width: 18px; height: 18px; fill: currentColor; transform: rotate(180deg); }
html[dir="rtl"] .ai-chat-send svg { transform: none; }

.ai-chat-upload {
  flex: 1;
  border: 1.5px dashed var(--bronze);
  border-radius: 14px;
  padding: .7rem 1rem;
  background: var(--ivory);
  color: var(--walnut);
  font-family: var(--font-body);
  font-size: .85rem;
  text-align: center;
}
.ai-chat-upload:hover { background: rgba(169,132,98,.12); }

.ai-chat-actions { flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.ai-chat-actions .btn { width: 100%; }

.ai-chat-choices { flex-direction: row; flex-wrap: wrap; gap: .5rem; }
.ai-choice-chip {
  border: 1px solid var(--beige);
  background: var(--ivory);
  color: var(--walnut);
  border-radius: 999px;
  padding: .5rem 1rem;
  font-family: var(--font-body);
  font-size: .82rem;
  transition: border-color .25s, background-color .25s, color .25s;
}
.ai-choice-chip:hover { border-color: var(--bronze); background: rgba(169,132,98,.12); color: var(--charcoal); }

/* ==========================================================================
   AI Concept result page (ai.html)
   ========================================================================== */
.ai-result-section { padding: 1rem 0 6rem; background: var(--ivory); }

.ai-result-empty { text-align: center; padding: 4rem 0; max-width: 480px; margin: 0 auto; }
.ai-result-empty h2 { font-size: 1.4rem; margin-bottom: .8rem; }
.ai-result-empty p { color: #5a5a5a; margin-bottom: 1.8rem; line-height: 1.8; }

.ai-result-hero { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: start; margin-bottom: 3rem; }
.ai-result-image { border-radius: 20px; overflow: hidden; background: var(--beige); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; }
.ai-result-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-result-image-placeholder { color: var(--walnut); font-size: .85rem; text-align: center; padding: 2rem; line-height: 1.7; }
.ai-before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ai-ba-col { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--beige); }
.ai-ba-col img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-ba-label {
  position: absolute; top: .6rem; inset-inline-start: .6rem;
  background: rgba(23,17,12,.72); color: var(--white);
  font-size: .72rem; font-family: var(--font-head);
  padding: .3rem .8rem; border-radius: 999px;
}
.ai-ba-label--after { background: var(--walnut); }
@media (max-width: 560px) { .ai-before-after { grid-template-columns: 1fr; } }
.ai-result-gallery { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.ai-result-gallery img {
  width: 62px; height: 62px; object-fit: cover; border-radius: 10px; cursor: pointer;
  border: 2px solid transparent; opacity: .75; transition: opacity .25s, border-color .25s;
}
.ai-result-gallery img:hover { opacity: 1; }
.ai-result-gallery img.is-active { opacity: 1; border-color: var(--bronze); }
.ai-result-image-caption { margin-top: .7rem; font-size: .8rem; color: #7a7a7a; }
.ai-result-copy h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: .9rem; }
.ai-result-copy > p { font-size: 1rem; color: #4a4a4a; line-height: 1.85; }

.ai-result-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-bottom: 2rem; }
.ai-result-card { background: var(--white); border: 1px solid var(--beige); border-radius: 16px; padding: 1.6rem; }
.ai-result-card h3 { font-size: 1rem; margin-bottom: 1rem; }
.ai-result-card p { font-size: .87rem; color: #4a4a4a; line-height: 1.8; margin-bottom: .6rem; }
.ai-result-card p:last-child { margin-bottom: 0; }
.ai-result-card p strong { color: var(--charcoal); }

.ai-palette { display: flex; flex-wrap: wrap; gap: 1rem; }
.ai-palette-item { display: flex; flex-direction: column; align-items: center; gap: .4rem; font-size: .74rem; color: #555; width: 64px; text-align: center; }
.ai-palette-swatch { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }

.ai-result-disclaimer {
  background: rgba(169,132,98,.12); border: 1px solid var(--bronze); border-radius: 14px;
  padding: 1.2rem 1.5rem; font-size: .87rem; color: var(--walnut); line-height: 1.8; margin-bottom: 3rem;
}

.ai-cta-band {
  background: linear-gradient(160deg, var(--charcoal) 0%, var(--walnut) 130%);
  border-radius: 20px; padding: 2.8rem 2rem; text-align: center;
}
.ai-cta-band h2 { color: var(--white); font-size: clamp(1.4rem, 2.5vw, 1.9rem); margin-bottom: .7rem; }
.ai-cta-band p { color: var(--beige); margin-bottom: 1.6rem; }
.ai-cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

@media (max-width: 900px) {
  .ai-result-hero { grid-template-columns: 1fr; }
  .ai-result-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .ai-chat-float { width: 52px; height: 52px; bottom: 84px; left: 16px; }
  .ai-chat-float svg { width: 24px; height: 24px; }
  .ai-chat-panel {
    bottom: 84px; inset-inline-start: 12px;
    width: calc(100vw - 24px); height: min(70vh, 520px);
  }
  .ai-chat-tooltip { display: none; }
  /* tighter input row so the send button always stays inside the panel */
  .ai-chat-input-area { padding: .6rem; gap: .4rem; }
  .ai-chat-input { padding: .6rem .8rem; }
  .ai-chat-send { width: 38px; height: 38px; }
}

/* iOS Safari zooms the whole page when a focused field is under 16px, which
   breaks the pinned hero layout — keep every touch-focusable field at 16px */
@media (max-width: 768px) {
  .ai-chat-input,
  .form-row input, .form-row select, .form-row textarea { font-size: 16px; }
}

/* ==========================================================================
   Focus states
   ========================================================================== */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--bronze); outline-offset: 2px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .contact-inner { grid-template-columns: 1fr; }
  .contact-form { grid-template-columns: 1fr; }
  .blog-preview-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-gallery { grid-template-columns: repeat(2, 1fr); }
  .detail-videos { grid-template-columns: 1fr; }
}

/* tablet: same right-anchored rail, narrower */
@media (max-width: 1024px) and (min-width: 769px) {
  .story-copy-slot {
    right: 40px; left: auto;
    width: min(650px, calc(100vw - 80px));
  }
}

@media (max-width: 768px) {
  .main-nav {
    position: absolute; top: 100%; inset-inline: 0;
    background: rgba(20,16,13,.96);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 0 6vw; max-height: 0; overflow: hidden;
    transition: max-height .35s var(--ease-out);
  }
  .main-nav a { padding: .9rem 0; width: 100%; border-bottom: 1px solid rgba(255,255,255,.12); }
  .site-header.nav-open .main-nav { display: flex; max-height: 400px; }
  .site-header.nav-open { background: rgba(20,16,13,.96); }
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 44px; height: 44px; background: none; border: none; padding: 0;
  }
  .nav-toggle span { display: block; height: 3px; background: #ffffff; border-radius: 2px; }
  .header-cta.btn-small { padding: .6rem 1.1rem; font-size: .82rem; }

  /* a shorter journey on phones: the same video motion spread over less
     scroll distance means larger, less frequent seeks — mobile decoders
     stutter on a dense stream of tiny ones */
  .hero-section { height: 420vh; }
  .hero-pin { display: flex; flex-direction: column; }
  .stage { position: relative; height: 55vh; flex: 0 0 55vh; inset: auto; }

  /* blurring a translucent layer on every scroll frame, on top of a playing
     video, is one of the most expensive things a mobile GPU can be asked to
     do — a solid header reads the same and costs nothing */
  .site-header.is-scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(20,16,13,.92); }
  .contact-form { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(244,240,233,.1); }

  /* JS stops animating filter on phones (see updateStages), so promoting a
     filter layer for nine stacked text blocks only wastes GPU memory */
  .hero-copy, .stage-copy { will-change: opacity, transform; transition: opacity .4s ease; }
  .story-copy-slot {
    position: relative; inset: auto; flex: 1;
    top: auto; right: 20px; left: 20px;
    width: auto; max-width: calc(100vw - 40px);
    padding: 1.6rem 0 1rem;
  }
  .hero-title__line { white-space: normal; }
  .hero-title { font-size: clamp(38px, 11vw, 56px); }
  .hero-copy, .stage-copy { justify-content: flex-start; padding-top: .5rem; }
  .journey-indicator { display: none; }
  .journey-track { width: 90px; height: 2px; }
  .journey-label { flex-direction: row; gap: .5rem; }

  .contact-form { grid-template-columns: 1fr; }
  .blog-preview-grid { grid-template-columns: 1fr; }
  .detail-gallery { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .page-hero--image { min-height: 34vh; }

  .clients-track img { height: 32px; }
  .clients-set { gap: 2rem; padding-inline-end: 2rem; }

  .whatsapp-float { width: 52px; height: 52px; bottom: 16px; left: 16px; background: rgba(37,211,102,.2); box-shadow: none; }
  .whatsapp-float svg { width: 26px; height: 26px; }
  .whatsapp-float-ring { display: none; }
  .ai-chat-float { background: rgba(107,75,54,.2); box-shadow: none; }
  .ai-chat-float-ring { display: none; }

  /* label above value: a long portfolio URL or email can't share one row with
     a 7em label on a phone without being clipped */
  .contact-details li { flex-direction: column; align-items: flex-start; gap: .15rem; }
  .contact-details span { min-width: 0; font-size: .82rem; }
  .contact-details a { font-size: .95rem; }
  .contact-details li .contact-instagram-link { flex-direction: row; align-items: center; }
}

/* ==========================================================================
   Service Detail Page
   ========================================================================== */

/* --- Hero --- */
.srv-hero {
  padding: calc(var(--header-h) + 4rem) 0 4rem;
  background: linear-gradient(145deg, var(--charcoal) 0%, var(--walnut) 140%);
  color: var(--white);
}
.srv-hero .breadcrumbs { margin-bottom: 1.5rem; }
.srv-hero .breadcrumbs ol { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.srv-hero .breadcrumbs li { font-size: .85rem; }
.srv-hero .breadcrumbs li:not(:last-child)::after { content: "›"; margin-inline-start: .4rem; color: rgba(255,255,255,.4); }
.srv-hero .breadcrumbs a { color: var(--beige); transition: color .2s; }
.srv-hero .breadcrumbs a:hover { color: var(--white); }
.srv-hero .breadcrumbs span { color: rgba(255,255,255,.6); }
.srv-badge {
  display: inline-block;
  background: var(--bronze);
  color: var(--white);
  font-size: .78rem;
  font-weight: 600;
  padding: .35rem 1rem;
  border-radius: 999px;
  margin-bottom: 1rem;
  font-family: var(--font-head);
}
.srv-hero h1 {
  color: var(--white);
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.25;
  max-width: 720px;
}
.srv-hero-sub {
  margin-top: 1rem;
  color: var(--beige);
  font-size: 1.05rem;
  line-height: 1.8;
  max-width: 600px;
}
.srv-hero-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.srv-ghost-btn { border-color: rgba(255,255,255,.3) !important; color: var(--white) !important; }
.srv-ghost-btn:hover { border-color: rgba(255,255,255,.6) !important; }
.srv-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
  max-width: 700px;
}
.srv-stat-card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 1.2rem;
  text-align: center;
}
.srv-stat-card strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.5rem;
  color: var(--bronze);
  font-weight: 700;
}
.srv-stat-card span {
  font-size: .82rem;
  color: rgba(255,255,255,.7);
  margin-top: .3rem;
  display: block;
}

/* --- Introduction --- */
.srv-intro { padding: 4rem 0; background: var(--ivory); }
.srv-intro-box {
  border-right: 5px solid var(--walnut);
  padding-right: 2rem;
  max-width: 860px;
}
.srv-intro-content { font-size: 1.05rem; line-height: 1.95; color: #4a4a4a; }
.srv-intro-content h2 { font-size: 1.3rem; color: var(--charcoal); margin: 1.5rem 0 .7rem; }
.srv-intro-content p { margin-bottom: 1rem; }

/* --- Sections --- */
.srv-section { padding: 5rem 0; background: var(--ivory); }
.srv-section--alt { background: #f0ebe4; }

/* --- Benefits --- */
.srv-benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.srv-benefit-card {
  background: var(--white);
  border: 1px solid rgba(23,23,23,.06);
  border-radius: 16px;
  padding: 2rem;
  transition: transform .3s var(--ease-out), box-shadow .3s;
}
.srv-benefit-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.06); }
.srv-benefit-icon { font-size: 2rem; display: block; margin-bottom: .8rem; }
.srv-benefit-card h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.srv-benefit-card p { font-size: .92rem; color: #666; line-height: 1.7; }

/* --- Included Services --- */
.srv-included-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}
.srv-included-card {
  background: var(--white);
  border: 1px solid rgba(23,23,23,.06);
  border-radius: 16px;
  padding: 2rem;
  position: relative;
}
.srv-included-num {
  font-family: var(--font-head);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--bronze);
  opacity: .3;
  display: block;
  margin-bottom: .5rem;
}
.srv-included-card h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.srv-included-card p { font-size: .9rem; color: #666; line-height: 1.7; }

/* --- Features (dark band) --- */
.srv-features {
  padding: 5rem 0;
  background: linear-gradient(145deg, var(--charcoal) 0%, var(--walnut) 140%);
}
.srv-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem 2rem;
}
.srv-feature-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  color: rgba(255,255,255,.88);
  font-size: .95rem;
  line-height: 1.7;
  padding: .6rem 0;
}
.srv-check { width: 20px; height: 20px; flex-shrink: 0; color: var(--bronze); margin-top: 2px; }

/* --- Process Steps --- */
.srv-process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}
.srv-process-card {
  background: var(--white);
  border: 1px solid rgba(23,23,23,.06);
  border-radius: 16px;
  padding: 1.8rem;
}
.srv-process-num {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--walnut);
  display: block;
  margin-bottom: .5rem;
}
.srv-process-card h3 { font-size: 1rem; margin-bottom: .4rem; }
.srv-process-card p { font-size: .88rem; color: #666; line-height: 1.7; }

/* --- Service Types --- */
.srv-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}
.srv-type-card {
  background: var(--white);
  border: 1px solid rgba(23,23,23,.06);
  border-radius: 16px;
  padding: 1.8rem;
  transition: transform .3s var(--ease-out);
}
.srv-type-card:hover { transform: translateY(-3px); }
.srv-type-icon { font-size: 1.8rem; display: block; margin-bottom: .6rem; }
.srv-type-card h3 { font-size: 1rem; margin-bottom: .4rem; }
.srv-type-card p { font-size: .88rem; color: #666; line-height: 1.7; }

/* --- Investment Factors --- */
.srv-factors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: .8rem 2rem;
  max-width: 860px;
  margin: 0 auto;
}
.srv-factor-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .95rem;
  line-height: 1.7;
  color: #4a4a4a;
  padding: .4rem 0;
}

/* --- Why Choose Us --- */
.srv-whyus-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.srv-whyus-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: 1rem;
  line-height: 1.7;
  color: #4a4a4a;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(23,23,23,.06);
}
.srv-whyus-item:last-child { border-bottom: none; }

/* --- FAQ --- */
.srv-faq-list {
  max-width: 760px;
  margin: 0 auto;
}
.srv-faq-item {
  border: 1px solid rgba(23,23,23,.08);
  border-radius: 12px;
  margin-bottom: .8rem;
  background: var(--white);
  overflow: hidden;
}
.srv-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: none;
  border: none;
  padding: 1.2rem 1.5rem;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--charcoal);
  text-align: right;
  cursor: pointer;
  transition: color .2s;
}
.srv-faq-question:hover { color: var(--walnut); }
.srv-faq-arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--walnut);
  transition: transform .3s var(--ease-out);
}
.srv-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s var(--ease-out), padding .35s;
  padding: 0 1.5rem;
}
.srv-faq-answer p {
  font-size: .94rem;
  line-height: 1.85;
  color: #555;
}
.srv-faq-item.is-open .srv-faq-arrow { transform: rotate(180deg); }
.srv-faq-item.is-open .srv-faq-answer {
  max-height: 600px;
  padding: 0 1.5rem 1.3rem;
}

/* --- CTA --- */
.srv-cta {
  padding: 5rem 0;
  background: linear-gradient(145deg, var(--charcoal) 0%, var(--walnut) 140%);
  color: var(--white);
}
.srv-cta h2 {
  color: var(--white);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin-bottom: 1rem;
}
.srv-cta-desc {
  color: var(--beige);
  font-size: 1.05rem;
  line-height: 1.8;
  max-width: 580px;
  margin: 0 auto 2rem;
}

/* --- Related Services --- */
.srv-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.srv-related-card {
  background: var(--white);
  border: 1px solid rgba(23,23,23,.06);
  border-radius: 16px;
  padding: 2rem;
  transition: transform .3s var(--ease-out), box-shadow .3s;
  display: flex;
  flex-direction: column;
}
.srv-related-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.06); }
.srv-related-icon { font-size: 2rem; margin-bottom: .8rem; display: block; }
.srv-related-card h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.srv-related-card p { font-size: .9rem; color: #666; line-height: 1.7; flex: 1; }
.srv-related-link {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .9rem;
  color: var(--walnut);
  transition: color .2s;
}
.srv-related-card:hover .srv-related-link { color: var(--bronze); }

/* --- Mobile for service page --- */
@media (max-width: 768px) {
  .srv-hero { padding: calc(var(--header-h) + 2rem) 0 2.5rem; }
  .srv-stats { grid-template-columns: repeat(2, 1fr); }
  .srv-intro-box { padding-right: 1rem; border-right-width: 3px; }
  .srv-benefits-grid,
  .srv-included-grid,
  .srv-process-grid,
  .srv-types-grid { grid-template-columns: 1fr; }
  .srv-features-grid { grid-template-columns: 1fr; }
  .srv-factors-grid { grid-template-columns: 1fr; }
  .srv-related-grid { grid-template-columns: 1fr; }
  .srv-faq-question { font-size: .92rem; padding: 1rem 1.2rem; }
}

/* ==========================================================================
   Reduced motion (system-level, independent of JS toggle)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: opacity .3s linear; transform: none; }
  .btn:hover { transform: none; }
}