/* =====================================================
   Bayut Ajmal — Sections (v1.1)
   ===================================================== */

/* ---------- Section header ---------- */
.section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--sp-7);
  margin-block-end: var(--sp-9);
}
.section-head h2 {
  font-size: var(--fs-h2);
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: var(--c-ink);
}
.section-head h2 em {
  font-family: var(--ff-arabic);
  font-style: normal;
  font-weight: 300;
  color: var(--c-clay);
}
.section-head .lede { max-width: 44ch; color: var(--c-ink-mute); }

/* Services section-head */
.section-head--services {
  display: block;
  text-align: center;
  padding-block-start: clamp(32px, 6vw, 80px);
  margin-block-end: clamp(36px, 5vw, 64px);
}

.section-head__title {
  font-family: var(--ff-arabic);
  font-size: clamp(1.9rem, 4.5vw, 2.625rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--c-ink);
  -webkit-text-fill-color: var(--c-ink);
  margin: 0 0 clamp(10px, 1.4vw, 18px);
}

.section-head__deco {
  display: block;
  width: clamp(200px, 40vw, 420px);
  height: 12px;
  margin-inline: auto;
  margin-block-end: clamp(18px, 2.5vw, 32px);
}

.section-head__sub {
  font-family: var(--ff-arabic);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 400;
  line-height: 1.85;
  color: var(--c-ink-mute);
  max-width: 58ch;
  margin-inline: auto;
}

@media (max-width: 768px) {
  .section-head {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    margin-block-end: var(--sp-6);
  }
  .section-head--services { margin-block-end: 32px; }
  .section-head__title    { font-size: clamp(1.8rem, 8vw, 2.35rem); }
  .section-head__deco     { width: clamp(140px, 55vw, 240px); height: 12px; }
  .section-head__sub      { font-size: 0.95rem; max-width: 100%; }
}


/* =====================================================
   HERO — Full-bleed editorial slider
   Image fills the screen, copy lives in a glass card overlay,
   stats sit at the bottom, controls and scroll-cue tucked in corners.
   ===================================================== */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 720px;
  max-height: 1100px;
  background: var(--c-ink);
  color: var(--c-cream);
  overflow: hidden;
  isolation: isolate;
}

/* Background swiper fills the entire hero */
.hero .hero-swiper {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.hero .hero-swiper .swiper-wrapper,
.hero .hero-swiper .swiper-slide { height: 100%; width: 100%; }
.hero-slide {
  position: relative;
  overflow: hidden;
}
.hero-slide__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.08);
  will-change: transform;
}
.hero .swiper-slide-active .hero-slide__img {
  animation: heroKenBurns 9s var(--ease-out-smooth) forwards;
}
@keyframes heroKenBurns {
  from { transform: scale(1.08); }
  to   { transform: scale(1.0); }
}

/* Scrim — readable text over any image */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(95deg, rgba(20,19,15,.85) 0%, rgba(20,19,15,.55) 38%, rgba(20,19,15,.18) 60%, rgba(20,19,15,.4) 100%),
    linear-gradient(180deg, rgba(20,19,15,.45) 0%, rgba(20,19,15,0) 28%, rgba(20,19,15,.55) 100%);
}
.is-rtl .hero__scrim {
  background:
    linear-gradient(265deg, rgba(20,19,15,.85) 0%, rgba(20,19,15,.55) 38%, rgba(20,19,15,.18) 60%, rgba(20,19,15,.4) 100%),
    linear-gradient(180deg, rgba(20,19,15,.45) 0%, rgba(20,19,15,0) 28%, rgba(20,19,15,.55) 100%);
}

/* Container holds copy + stats with proper spacing */
.hero__container {
  position: relative;
  z-index: 3;
  height: 100%;
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: calc(var(--header-h) + var(--top-strip-h) + 60px) clamp(28px, 5vw, 80px) 180px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--sp-7);
}

/* Copy area — slides stack absolutely, only active is visible.
   Width constrained so the bottom stats card never overlaps the lede. */
.hero__copy {
  position: relative;
  width: min(100%, 560px);
  min-height: 240px;
  margin-block-start: auto;
  margin-block-end: 0;
}
.is-rtl .hero__copy { margin-inline-start: 0; }

.hero__slide-content {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 600ms var(--ease-out), visibility 0s linear 600ms;
}
.hero__slide-content.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 800ms var(--ease-out) 200ms, visibility 0s;
}
.hero__title .word {
  perspective: 700px;
}

/* Hero entrance — CSS transitions triggered by .is-animating class (added by JS on slide change) */
.hero__kicker {
  opacity: 0;
  transition: opacity 0.45s ease;
}
.hero__title,
.hero__lede {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.hero__slide-content.is-active.is-animating .hero__kicker {
  opacity: 1;
  transition-delay: 0.1s;
}
.hero__slide-content.is-active.is-animating .hero__title {
  opacity: 1; transform: none;
  transition-delay: 0.25s;
}
.hero__slide-content.is-active.is-animating .hero__lede {
  opacity: 1; transform: none;
  transition-delay: 0.42s;
}

.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  color: var(--c-clay-soft);
  margin-block-end: var(--sp-6);
  padding: 8px 18px;
  background: rgba(193,139,98,.14);
  border: 1px solid rgba(193,139,98,.32);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(6px);
}
.hero__kicker-text {
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding-inline-end: 18px;
  border-inline-end: 1px solid rgba(193,139,98,.4);
}
.hero__kicker-num {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--c-clay);
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  min-width: 42px;
  justify-content: center;
  padding-inline-start: 18px;
}
html[dir="ltr"] .hero__kicker,
html[lang^="en"] .hero__kicker {
  direction: ltr;
}
html[dir="ltr"] .hero__kicker-num,
html[lang^="en"] .hero__kicker-num {
  order: -1;
  padding-inline-start: 0;
  padding-inline-end: 18px;
  border-inline-end: 1px solid rgba(193,139,98,.4);
}
html[dir="ltr"] .hero__kicker-text,
html[lang^="en"] .hero__kicker-text {
  padding-inline-start: 18px;
  padding-inline-end: 0;
  border-inline-end: 0;
}
.is-rtl .hero__kicker-num,
html[dir="rtl"] .hero__kicker-num {
  order: -1;
  padding-inline-start: 0;
  padding-inline-end: 18px;
}
.is-rtl .hero__kicker-text,
html[dir="rtl"] .hero__kicker-text {
  padding-inline-end: 0;
  border-inline-end: 0;
  padding-inline-start: 18px;
  border-inline-start: 1px solid rgba(193,139,98,.4);
}

.hero__title {
  font-family: var(--ff-arabic);
  font-weight: 700;
  font-size: clamp(2.75rem, 5.5vw, 4.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--c-cream);
  margin-block-end: var(--sp-5);
  text-shadow: 0 4px 30px rgba(20,19,15,.4);
}
.hero__title em { display: inline-block; }
.hero__title br { display: block; content: ""; margin-block-start: var(--sp-2); }
.hero__title .word { line-height: inherit; padding-block: 4px; }
.hero__title em {
  font-family: var(--ff-arabic);
  font-style: normal;
  font-weight: 300;
  color: var(--c-clay-soft);
}
.hero__title br { display: block; }
/* Split-text helpers (GSAP) */
.hero__title .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.hero__title .word > span {
  display: inline-block;
  will-change: transform;
}

.hero__lede {
  font-size: var(--fs-lede);
  color: rgba(250,246,238,.88);
  max-width: 38ch;
  line-height: 1.8;
  margin-block-end: var(--sp-7);
  text-shadow: 0 2px 16px rgba(20,19,15,.35);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Stats strip — flows below the copy, never overlaps */
.hero__stats {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-self: flex-end;
  align-items: center;
  gap: var(--sp-7);
  background: rgba(20,19,15,.55);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border: 1px solid rgba(250,246,238,.12);
  padding: var(--sp-5) var(--sp-7);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-width: 100%;
}
.hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  position: relative;
  padding-inline: var(--sp-4);
}
.hero__stat strong { justify-content: center; }
.hero__stat:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-end: calc(var(--sp-7) * -.5 - 1px);
  top: 50%;
  width: 1px;
  height: 48px;
  margin-top: -24px;
  background: rgba(250,246,238,.16);
}
.hero__stat strong {
  display: inline-flex;
  align-items: flex-end;
  direction: ltr;
  unicode-bidi: isolate;
  font-family: 'Marcellus', 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(3.35rem, 5.3vw, 5.25rem);
  line-height: .82;
  color: var(--c-clay-soft);
  letter-spacing: -0.035em;
}
.hero__stat strong sup {
  display: inline-block;
  font-size: .38em;
  color: var(--c-clay);
  vertical-align: super;
  margin-inline-start: 4px;
  margin-block-end: .12em;
  transform-origin: center;
}
.hero__stat .stats__digits {
  display: inline-flex;
  align-items: flex-end;
}
.hero__stat .stats__digit {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  padding-block: .04em .1em;
}
.hero__stat .stats__digit-reel {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.hero__stat .stats__digit-reel > span {
  display: block;
  height: 1em;
  line-height: 1;
}
.hero__stat span {
  display: block;
  font-size: .7rem;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(250,246,238,.62);
  white-space: nowrap;
}

/* Slider controls — bottom right */
.hero-controls {
  position: absolute;
  bottom: 60px;
  inset-inline-end: clamp(28px, 5vw, 80px);
  z-index: 5;
  display: flex; align-items: center; gap: var(--sp-5);
  color: var(--c-cream);
  opacity: 1;
  visibility: visible;
}
.hero-counter {
  font-family: var(--ff-arabic);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: var(--tracking-wide);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 90px;
}
.hero-counter .current { color: var(--c-cream); font-size: 1.1rem; }
.hero-counter .total { color: rgba(250,246,238,.5); font-size: .9rem; }
.hero-counter .divider {
  width: 24px; height: 1px;
  background: rgba(250,246,238,.4);
}

.hero-progress {
  position: relative;
  width: 120px;
  height: 2px;
  background: rgba(250,246,238,.18);
  overflow: hidden;
  border-radius: 2px;
}
.hero-progress__bar {
  position: absolute;
  inset: 0;
  background: var(--c-clay);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .2s linear;
}
.is-rtl .hero-progress__bar { transform-origin: left; }
.hero-progress.is-running .hero-progress__bar {
  animation: heroProgress 6s linear forwards;
}
@keyframes heroProgress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.hero-arrows { display: flex; gap: var(--sp-3); }
.hero-arrow {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(250,246,238,.3);
  border-radius: 50%;
  color: var(--c-cream);
  background: rgba(20,19,15,.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.hero-arrow::before {
  content: "";
  display: block;
  width: 10px; height: 10px;
  border-top: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
}
/* Geometric centering: arrow tip is offset because borders are only on 2 sides;
   nudge the pseudo-element by a fraction so the visual center matches the circle center. */
.hero-prev::before { transform: rotate(-45deg)  translate(2px,  2px); }
.hero-next::before { transform: rotate(135deg)  translate(2px,  2px); }
.is-rtl .hero-prev::before { transform: rotate(135deg)  translate(2px,  2px); }
.is-rtl .hero-next::before { transform: rotate(-45deg)  translate(2px,  2px); }
.hero-arrow:hover {
  background: var(--c-clay);
  border-color: var(--c-clay);
  transform: scale(1.05);
}

/* Scroll cue — animated SVG mouse, centered horizontally */
.hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  color: rgba(250,246,238,.78);
  font-size: .68rem;
  letter-spacing: var(--tracking-widest);
  font-weight: 600;
  transition: color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.hero-scroll__btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
}
.hero-scroll__mouse {
  width: 24px;
  height: 38px;
  display: block;
}
.hero-scroll__wheel {
  transform-origin: 14px 13px;
  animation: heroScrollWheel 1.8s var(--ease-out-smooth) infinite;
}
.hero-scroll__arrows {
  width: 18px;
  height: 14px;
  display: block;
  opacity: .85;
}
.hero-scroll__arrows path {
  animation: heroScrollArrows 1.8s var(--ease-out-smooth) infinite;
}
.hero-scroll__arrows path:nth-child(2) { animation-delay: .25s; }
@keyframes heroScrollWheel {
  0%   { transform: translateY(-6px); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(8px);  opacity: 0; }
}
@keyframes heroScrollArrows {
  0%, 100% { opacity: .25; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(3px); }
}
.hero-scroll:hover { color: var(--c-cream); transform: translateX(-50%) translateY(-2px); }

/* Light-on-dark ghost button (used in hero) */
.btn--ghost-light {
  --btn-color: var(--c-cream);
  background: transparent;
  color: var(--c-cream);
  border-color: rgba(250,246,238,.4);
  backdrop-filter: blur(6px);
}
.btn--ghost-light:hover {
  --btn-color: var(--c-ink);
  background: var(--c-cream);
  color: var(--c-ink);
  border-color: var(--c-cream);
}

/* ---------- Mobile / tablet ---------- */
@media (max-width: 1024px) {
  .hero { min-height: 640px; height: 92vh; }
  .hero__container { padding-bottom: 120px; gap: var(--sp-5); }
  .hero__stats { gap: var(--sp-5); padding: var(--sp-4) var(--sp-5); }
  .hero__stat strong { font-size: clamp(2.55rem, 4.8vw, 3.8rem); }
  .hero__stat:not(:last-child)::after { height: 38px; margin-top: -19px; }
}
@media (max-width: 768px) {
  .hero { min-height: 100vh; height: auto; }
  .hero__container {
    min-height: 100svh;
    padding: calc(var(--header-h) + 34px) var(--gutter) 88px;
    gap: var(--sp-4);
    justify-content: flex-end;
  }
  .hero__copy { min-height: 0; width: 100%; }
  .hero__title { font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 1.1; margin-block-end: var(--sp-3); }
  .hero__kicker { font-size: .68rem; padding: 6px 14px; margin-block-end: var(--sp-3); }
  .hero__lede { font-size: .95rem; line-height: 1.7; margin-block-end: var(--sp-4); }
  .hero__cta { gap: var(--sp-2); }
  .hero__cta .btn { flex: 1 1 auto; padding: 12px 18px; font-size: .8rem; }
  .hero__stats {
    align-self: stretch;
    justify-content: space-around;
    gap: var(--sp-3);
    padding: var(--sp-3);
  }
  .hero__stat { padding-inline: var(--sp-2); flex: 1 1 0; min-width: 0; }
  .hero__stat strong { font-size: clamp(2.1rem, 10vw, 3rem); }
  .hero__stat span { font-size: .6rem; white-space: normal; }
  .hero__stat:not(:last-child)::after {
    inset-inline-end: calc(var(--sp-3) * -.5);
    height: 24px;
    margin-top: -12px;
  }
  .hero-controls {
    bottom: 24px;
    inset-inline-end: var(--gutter);
    gap: var(--sp-2);
  }
  .hero-arrow { width: 40px; height: 40px; }
  .hero-progress { width: 50px; }
  .hero-counter { min-width: auto; font-size: .78rem; }
  .hero-counter .divider { width: 14px; }
  .hero-scroll { display: none; }
}
@media (max-width: 480px) {
  .hero {
    min-height: 620px;
  }
  .hero__container {
    padding-bottom: 82px;
  }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  .hero__stat span { font-size: .55rem; }
  .hero-controls {
    display: none;
  }
}

/* Local Swiper safety net. Keeps carousels usable if CDN CSS is delayed. */
.swiper {
  display: block;
  overflow: hidden;
  position: relative;
}
.swiper-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  box-sizing: content-box;
}
.swiper-slide {
  flex-shrink: 0;
}
.services-swiper .swiper-wrapper,
.portfolio-swiper .swiper-wrapper,
.testimonials-swiper .swiper-wrapper {
  align-items: stretch;
}
.swiper:not(.swiper-initialized) .swiper-wrapper {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.swiper:not(.swiper-initialized) .swiper-slide {
  scroll-snap-align: start;
}

/* =====================================================
   Marquee
   ===================================================== */
.marquee {
  background: var(--c-bone);
  border-block: 1px solid var(--c-line-soft);
  overflow: hidden;
  padding-block: var(--sp-5);
}
.marquee__track {
  display: inline-flex;
  gap: var(--sp-7);
  white-space: nowrap;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--fs-h3);
  color: var(--c-ink);
  will-change: transform;
}
.marquee__track span { display: inline-flex; align-items: center; gap: var(--sp-7); }
.marquee__track .dot { width: 8px; height: 8px; background: var(--c-clay); border-radius: 50%; display: inline-block; }

/* =====================================================
   Section base
   ===================================================== */
.section {
  padding-block: clamp(80px, 10vw, 160px);
}
.section--lg { padding-block: clamp(120px, 14vw, 220px); }
.section--sm { padding-block: clamp(48px, 6vw, 80px); }
.section--cream { background: var(--c-cream); }
.section--sand  { background: var(--c-sand); }
.section--ink   { background: var(--c-ink); color: var(--c-cream); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--c-cream); }
.section--ink .lede { color: rgba(250,246,238,.7); }

/* =====================================================
   Intro split — about preview on home
   ===================================================== */
.intro-split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
@media (max-width: 900px) { .intro-split { grid-template-columns: 1fr; } }
.intro-split__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.intro-split__media img { width: 100%; height: 100%; object-fit: cover; }
.intro-split__media::after {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px solid rgba(250,246,238,.45);
  border-radius: var(--radius-sm);
  pointer-events: none;
}
.intro-split__copy h2 {
  font-size: var(--fs-h1);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  margin-block-end: var(--sp-5);
}
.intro-split__copy h2 em {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  color: var(--c-clay);
}
.intro-split__copy .lede {
  margin-block-end: var(--sp-5);
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--c-ink-soft);
}
.intro-split__list {
  display: grid; gap: var(--sp-4);
  list-style: none; padding: 0; margin: var(--sp-5) 0 var(--sp-7);
}
.intro-split__list li {
  display: flex; gap: var(--sp-3);
  font-size: 1rem;
  color: var(--c-ink);
  padding-block: var(--sp-3);
  border-block-end: 1px solid var(--c-line-soft);
}
.intro-split__list li::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--c-clay);
  margin-block-start: 13px;
  flex-shrink: 0;
}

/* =====================================================
   Services — modern grid (replaces the rail)
   ===================================================== */
.services {
  position: relative;
  background: var(--c-cream);
  overflow-x: clip;
  padding-block-start: 0;
}

/* Wave separators */
.section-wave {
  position: relative;
  z-index: 2;
  margin-block-start: -48px;
  line-height: 0;
  pointer-events: none;
}
.section-wave--bone {
  margin-block-start: 0;
  background: var(--c-cream);
}
.section-wave svg {
  display: block;
  width: 100%;
  height: clamp(36px, 5vw, 60px);
}
@media (max-width: 768px) {
  .section-wave {
    margin-block-start: -28px;
    margin-block-end: -1px;
    background: transparent;
  }
  .section-wave svg {
    height: 34px;
  }
  .section-wave + .section {
    padding-block-start: clamp(44px, 11vw, 64px);
  }
}
@media (max-width: 480px) {
  .section-wave {
    margin-block-start: -22px;
  }
  .section-wave svg {
    height: 28px;
  }
}

/* Dot pattern */
.services::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: clamp(180px, 28vw, 340px);
  background-image:
    radial-gradient(circle, rgba(193,139,98,.18) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.services-swiper {
  overflow: visible;
  padding-block-end: var(--sp-7);
}
.services-swiper .swiper-slide { height: auto; }
.services__cta {
  display: flex;
  justify-content: center;
  margin-block: clamp(8px, 2vw, 20px) clamp(18px, 3vw, 30px);
}
.services__cta .btn {
  min-width: clamp(220px, 28vw, 340px);
}
.section-wave--services-bottom {
  margin-block-start: clamp(-44px, -3vw, -24px);
  margin-block-end: 0;
  background: var(--c-cream);
}
.section-wave--portfolio-bottom {
  margin-block-start: clamp(-24px, -2.5vw, -12px);
  margin-block-end: 0;
  background: var(--c-bone);
}
.section-wave--testimonials-bottom {
  margin-block-start: clamp(-24px, -2.5vw, -12px);
  margin-block-end: 0;
  background: var(--c-sand);
}
.section-wave--faq-bottom {
  margin-block-start: clamp(-24px, -2.5vw, -12px);
  margin-block-end: 0;
  background: var(--c-cream);
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-4);
}
.service-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  display: flex; flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-7);
  color: var(--c-cream);
  isolation: isolate;
  min-height: 460px;
  height: 100%;
  transition: transform var(--t-base) var(--ease-out);
  background: var(--c-ink);
}
.service-card:hover { transform: translateY(-4px); }
.service-card img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease-out-smooth);
}
.service-card:hover img { transform: scale(1.06); }
.service-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,19,15,.05) 0%, rgba(20,19,15,.55) 55%, rgba(20,19,15,.9) 100%);
}
.service-card .num {
  position: absolute;
  top: var(--sp-5);
  inset-inline-end: var(--sp-5);
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 1.6rem;
  color: rgba(250,246,238,.5);
}
.service-card .sub {
  font-size: .72rem;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--c-clay-soft);
  margin-block-end: var(--sp-3);
}
.service-card h3 {
  color: var(--c-cream);
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
  line-height: 1.22;
  margin-block-end: var(--sp-3);
}
.service-card p {
  color: rgba(250,246,238,.85);
  margin-block-end: var(--sp-5);
  max-width: 36ch;
}
.service-card .more {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: .9rem; font-weight: 600;
  color: var(--c-cream);
  letter-spacing: var(--tracking-wide);
  position: relative; padding-bottom: 4px;
}
.service-card .more::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px;
  background: currentColor;
  transform: scaleX(.5); transform-origin: right;
  transition: transform var(--t-base) var(--ease-out);
}
.is-rtl .service-card .more::after { transform-origin: left; }
.service-card:hover .more::after { transform: scaleX(1); }
.service-card .more svg, .service-card .more i { width: 14px; height: 14px; font-size: 12px; }
.is-rtl .service-card .more svg, .is-rtl .service-card .more i { transform: none; }

/* Asymmetric layout */
.service-card--feat   { grid-column: span 7; min-height: 600px; }
.service-card--small  { grid-column: span 5; min-height: 600px; }
.service-card--third  { grid-column: span 4; }
.service-card--two    { grid-column: span 8; }

@media (max-width: 1024px) {
  .service-card--feat, .service-card--small, .service-card--third, .service-card--two { grid-column: span 6; min-height: 420px; }
}
@media (max-width: 600px) {
  .services__grid { grid-template-columns: 1fr; }
  .service-card {
    padding: 26px 20px;
  }
  .service-card--feat, .service-card--small, .service-card--third, .service-card--two { grid-column: 1; min-height: 340px; }
}

/* =====================================================
   Trust strip
   ===================================================== */
.trust-strip {
  background: var(--c-ink);
  color: var(--c-cream);
  border-block-start: 1px solid rgba(250,246,238,.1);
}
.trust-strip__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(250,246,238,.1);
  padding-block: 1px;
}
.trust-strip__item {
  background: var(--c-ink);
  padding: var(--sp-6) var(--sp-5);
  display: grid;
  gap: var(--sp-2);
}
.trust-strip__item strong {
  font-family: var(--ff-display);
  font-size: var(--fs-display);
  line-height: 1;
  color: var(--c-clay-soft);
}
.trust-strip__item span {
  font-size: .82rem;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(250,246,238,.68);
}
@media (max-width: 760px) {
  .trust-strip__inner { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================
   Portfolio — Swiper carousel + gallery grid (paginated tabs)
   ===================================================== */
.portfolio { background: var(--c-bone); }
.portfolio {
  padding-block-start: clamp(60px, 8vw, 110px);
  padding-block-end: 90px;
}
.section-head--portfolio .section-head__title {
  font-size: clamp(2rem, 4.8vw, 2.625rem);
  line-height: 0.92;
}

.portfolio__more {
  display: inline-flex;
  margin-inline: auto;
  margin-block-start: 18px;
}

.portfolio__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-block-end: clamp(22px, 3vw, 40px);
}
.portfolio__filter button {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid rgba(193,139,98,.28);
  background: rgba(255,255,255,.75);
  font-family: var(--ff-arabic);
  font-size: .9rem;
  font-weight: 600;
  color: var(--c-ink-soft);
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.portfolio__filter button:hover {
  border-color: rgba(193,139,98,.64);
  transform: translateY(-1px);
}
.portfolio__filter button.is-active {
  background: linear-gradient(120deg, rgba(193,139,98,.88), rgba(154,111,74,.96));
  border-color: transparent;
  color: var(--c-cream);
  box-shadow: 0 8px 24px rgba(154,111,74,.2);
}

.portfolio-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-block-end: 0;
}
.portfolio-item {
  width: auto;
  margin: 0;
}
.portfolio-grid.is-isotope {
  display: block;
  margin-inline: -6px;
}
.portfolio-grid.is-isotope .portfolio-item {
  width: 25%;
  padding: 6px;
  box-sizing: border-box;
}

.portfolio-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 8px;
  background: var(--c-sand);
  border: 1px solid rgba(193,139,98,.2);
  box-shadow: 0 10px 30px rgba(22,20,14,.08);
  cursor: zoom-in;
}
.portfolio-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out-smooth), filter var(--t-base) var(--ease-out);
}
.portfolio-tile:hover img { transform: scale(1.05); filter: brightness(.9); }

.portfolio-tile__cat {
  position: absolute;
  inset-inline-start: 12px;
  top: 12px;
  padding: 6px 12px;
  background: rgba(250,246,238,.92);
  color: var(--c-ink);
  border-radius: 999px;
  font-size: .73rem;
  letter-spacing: .03em;
  border: 1px solid rgba(193,139,98,.28);
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.portfolio-tile:hover .portfolio-tile__cat {
  background: rgba(193,139,98,.96);
  color: var(--c-cream);
  border-color: rgba(193,139,98,.92);
}
.portfolio-tile__caption {
  position: absolute;
  inset-inline-end: 12px;
  inset-inline-start: auto;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: rgba(250,246,238,.94);
  color: var(--c-ink);
  border-radius: 50%;
  font-size: .92rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.portfolio-tile:hover .portfolio-tile__caption { opacity: 1; transform: none; }
.portfolio-tile__caption i { width: 16px; height: 16px; font-size: 13px; }

@media (max-width: 1024px) {
  .portfolio-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portfolio-grid.is-isotope .portfolio-item { width: 33.3333%; }
}
@media (max-width: 760px) {
  .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-grid.is-isotope .portfolio-item { width: 50%; }
}
@media (max-width: 640px) {
  .section-head--portfolio .section-head__title {
    font-size: clamp(1.8rem, 9vw, 2.25rem);
  }

  .portfolio-grid { grid-template-columns: 1fr; }
  .portfolio-item { width: auto; }
  .portfolio-grid.is-isotope .portfolio-item { width: 100%; }
  .portfolio__filter { gap: 8px; }
  .portfolio__filter button {
    padding: 9px 14px;
    font-size: .82rem;
  }
}

.swiper-progress {
  position: relative;
  height: 2px;
  background: var(--c-line-soft);
  margin-top: var(--sp-5);
  overflow: hidden;
}
.swiper-progress__bar {
  position: absolute; inset: 0;
  background: var(--c-clay);
  transform: scaleX(0);
  transform-origin: left;
}
.is-rtl .swiper-progress__bar { transform-origin: right; }

/* Masonry (full portfolio page) */
.masonry {
  column-count: 3;
  column-gap: var(--sp-4);
}
@media (max-width: 900px) { .masonry { column-count: 2; } }
@media (max-width: 540px) { .masonry { column-count: 1; } }
.masonry > * { break-inside: avoid; margin-block-end: var(--sp-4); }

.tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--c-sand);
  cursor: zoom-in;
  display: block;
}
.tile img {
  width: 100%; height: auto; display: block;
  transition: transform 1.4s var(--ease-out-smooth), filter var(--t-base) var(--ease-out);
}
.tile:hover img { transform: scale(1.06); filter: brightness(.92); }
.tile::after {
  content: "↗";
  position: absolute;
  top: 14px; inset-inline-end: 14px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.94);
  color: var(--c-ink);
  border-radius: 50%;
  font-weight: 600;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.tile:hover::after { opacity: 1; transform: none; }

/* =====================================================
   Process
   ===================================================== */
.process { background: var(--c-bone); }
.process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-7);
}
@media (max-width: 900px) { .process__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); } }
@media (max-width: 540px) { .process__grid { grid-template-columns: 1fr; } }
.process__step {
  position: relative;
  padding-block-start: var(--sp-6);
  border-block-start: 1px solid var(--c-ink);
}
.process__step .num {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 4rem;
  line-height: 1;
  color: var(--c-clay);
  margin-block-end: var(--sp-4);
}
.process__step h3 { font-size: 1.5rem; margin-block-end: var(--sp-3); }
.process__step p { color: var(--c-ink-mute); }

/* =====================================================
   Materials / values strip
   ===================================================== */
.materials { background: var(--c-sand); }
.materials__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
}
@media (max-width: 900px) { .materials__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .materials__grid { grid-template-columns: 1fr; } }
.material {
  background: var(--c-cream);
  padding: var(--sp-7) var(--sp-6);
  border-radius: var(--radius-md);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.material:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.material__icon {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  background: var(--c-bone);
  border: 1px solid var(--c-line-soft);
  border-radius: 50%;
  color: var(--c-clay);
}
.material__icon svg, .material__icon i { width: 28px; height: 28px; font-size: 24px; }
.material h3 { font-size: 1.25rem; }
.material p { color: var(--c-ink-mute); font-size: .95rem; }

/* =====================================================
   Before / after
   ===================================================== */
.before-after {
  background:
    radial-gradient(70% 80% at 95% 0%, rgba(193,139,98,.16), transparent 58%),
    var(--c-cream);
}
.before-after__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}
.ba-card {
  background: var(--c-bone);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.ba-card__media {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--c-line-soft);
}
.ba-card figure {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-sand);
}
.ba-card img { width: 100%; height: 100%; object-fit: cover; }
.ba-card figcaption {
  position: absolute;
  top: var(--sp-4);
  inset-inline-start: var(--sp-4);
  margin: 0;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(20,19,15,.72);
  color: var(--c-cream);
  font-size: .72rem;
  letter-spacing: var(--tracking-widest);
}
.ba-card__copy {
  padding: var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.ba-card__copy h3 { font-size: 1.35rem; }
.ba-card__copy p { color: var(--c-ink-mute); font-size: .95rem; }
@media (max-width: 900px) {
  .before-after__grid { grid-template-columns: 1fr; }
}

/* =====================================================
   Stats — counters
   ===================================================== */
.stats {
  background: var(--c-ink);
  color: var(--c-cream);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.stats::before {
  content: ""; position: absolute; inset: 0; opacity: .15;
  background: radial-gradient(60% 50% at 50% 0%, var(--c-clay) 0%, transparent 70%);
  pointer-events: none;
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  border-block-start: 1px solid rgba(250,246,238,.12);
  border-block-end: 1px solid rgba(250,246,238,.12);
  position: relative;
}
@media (max-width: 700px) { .stats__grid { grid-template-columns: repeat(2, 1fr); } }
.stats__item {
  padding: var(--sp-9) var(--sp-4);
  border-inline-end: 1px solid rgba(250,246,238,.12);
}
.stats__item:last-child { border-inline-end: 0; }
@media (max-width: 700px) {
  .stats__item:nth-child(2n) { border-inline-end: 0; }
  .stats__item:nth-child(-n+2) { border-block-end: 1px solid rgba(250,246,238,.12); }
}
.stats__num {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 1;
  color: var(--c-cream);
  margin-block-end: var(--sp-3);
  display: inline-flex;
  align-items: baseline;
  letter-spacing: 0;
}
.stats__digits {
  display: inline-flex;
  align-items: flex-end;
}
.stats__digit {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  padding-block: .04em .1em;
}
.stats__digit-reel {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.stats__digit-reel > span {
  display: block;
  height: 1em;
  line-height: 1;
}
.stats__digit--comma {
  width: .28em;
  margin-inline: .02em .08em;
}
.stats__num sup {
  display: inline-block;
  font-size: .35em;
  color: var(--c-clay);
  margin-inline-start: 6px;
  transform-origin: center;
}
.stats__label {
  font-size: .85rem;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(250,246,238,.6);
}

/* =====================================================
   Testimonials — Swiper carousel
   ===================================================== */
.testimonials {
  background: var(--c-sand);
  padding-block-start: clamp(26px, 3.2vw, 48px);
}
.testimonials-swiper { padding-block-end: var(--sp-7); overflow: hidden; }
.testimonials-swiper .swiper-slide {
  height: auto;
  min-width: 0;
}

.quote {
  background: var(--c-cream);
  border-radius: var(--radius-md);
  padding: var(--sp-8);
  display: flex; flex-direction: column; gap: var(--sp-5);
  position: relative;
  height: 100%;
  border: 1px solid var(--c-line-soft);
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.quote::before {
  content: "”";
  position: absolute;
  top: 16px; inset-inline-start: var(--sp-6);
  font-family: var(--ff-display);
  font-size: 6.5rem;
  line-height: 1;
  color: var(--c-clay);
  opacity: .35;
}
.quote p {
  font-family: var(--ff-arabic);
  font-size: var(--fs-lede);
  line-height: 1.85;
  color: var(--c-ink);
  position: relative;
  z-index: 1;
  overflow-wrap: anywhere;
  word-break: normal;
}
.quote__by {
  border-block-start: 1px solid var(--c-line-soft);
  padding-block-start: var(--sp-4);
}
.quote__by strong { display: block; font-size: 1rem; font-weight: 600; }
.quote__by span   { font-size: .82rem; color: var(--c-ink-mute); letter-spacing: var(--tracking-wide); }

.testimonials-controls {
  display: flex; align-items: center; justify-content: space-between;
  margin-block-start: var(--sp-7);
  gap: var(--sp-5);
}
.testi-arrows { display: flex; gap: var(--sp-3); }
.testi-arrow {
  width: 56px; height: 56px;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-cream);
  color: var(--c-ink);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.testi-arrow:hover { background: var(--c-ink); color: var(--c-cream); border-color: var(--c-ink); }
.testi-arrow svg, .testi-arrow i { width: 18px; height: 18px; font-size: 14px; }

/* =====================================================
   Offers carousel
   ===================================================== */
.offers-carousel {
  background: var(--c-bone);
  padding-block-start: clamp(54px, 7vw, 96px);
  padding-block-end: clamp(82px, 9vw, 136px);
}
.offers-carousel__head {
  margin-block-end: clamp(28px, 4vw, 54px);
}
.offers-swiper {
  overflow: hidden;
  padding-block-end: var(--sp-7);
}
.offers-swiper .swiper-pagination { display: none; }
.offers-swiper .swiper-slide {
  height: auto;
  min-width: 0;
}
.offer-slide {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(193,139,98,.22);
  border-radius: 8px;
  background: var(--c-ink);
  box-shadow: 0 16px 42px rgba(22,20,14,.07);
  transition:
    transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    border-color var(--t-fast) var(--ease-out);
}
.offer-slide__media {
  position: relative;
  display: block;
  min-height: clamp(300px, 29vw, 430px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--c-ink);
  width: 100%;
  padding: 0;
  border: none;
  cursor: pointer;
  text-align: inherit;
}
.offer-slide__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.25s var(--ease-out-smooth), filter var(--t-base) var(--ease-out);
}
.offer-slide__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, rgba(250,246,238,.10) .4px, transparent .6px),
    linear-gradient(180deg, rgba(20,19,15,.04) 0%, rgba(20,19,15,.74) 100%);
  background-size: 10px 10px, 100% 100%;
  opacity: .95;
}
.offer-slide__overlay {
  position: absolute;
  z-index: 1;
  inset-inline: 18px;
  bottom: 18px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  color: var(--c-cream);
}
.offer-slide__overlay strong {
  color: var(--c-cream);
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.22;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.offer-slide__overlay em {
  flex: 0 0 auto;
  padding: 8px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(250,246,238,.42);
  background: rgba(250,246,238,.92);
  color: var(--c-ink);
  font-size: .78rem;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}
.offer-slide:hover {
  transform: translateY(-6px);
  border-color: rgba(193,139,98,.42);
  box-shadow: var(--shadow-md);
}
.offer-slide:hover .offer-slide__media img {
  transform: scale(1.06);
  filter: brightness(.92);
}
.offers-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-block-start: var(--sp-7);
}
.offers-arrows {
  display: flex;
  gap: var(--sp-3);
}
.offer-arrow {
  width: 56px;
  height: 56px;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--c-cream);
  color: var(--c-ink);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.offer-arrow:hover {
  background: var(--c-ink);
  color: var(--c-cream);
  border-color: var(--c-ink);
}
.offer-arrow i {
  width: 18px;
  height: 18px;
  font-size: 14px;
}

@media (max-width: 640px) {
  .offers-controls {
    align-items: stretch;
    flex-direction: column;
  }
  .offers-arrows {
    justify-content: center;
  }
  .offer-slide__overlay {
    align-items: start;
    flex-direction: column;
  }
  .offer-slide__media {
    min-height: 280px;
  }
  .offer-slide__overlay em {
    white-space: normal;
  }
}
@media (max-width: 420px) {
  .offer-slide__media,
  .offer-slide--page .offer-slide__media {
    min-height: 250px;
  }
}

/* =====================================================
   Offers page
   ===================================================== */
.offers-page-intro {
  padding-block-end: clamp(70px, 8vw, 116px);
}
.offers-page-list {
  padding-block-start: clamp(62px, 7vw, 104px);
}
.offers-page-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
}
.offer-slide--page .offer-slide__media {
  min-height: clamp(320px, 31vw, 460px);
}
@media (max-width: 1100px) {
  .offers-page-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .offers-page-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   Single Offer Page (osp-*)
   ===================================================== */

/* Hero */
.osp-hero {
  position: relative;
  min-height: clamp(400px, 55vw, 640px);
  background: var(--c-ink) center/cover no-repeat;
  display: flex; align-items: flex-end;
  padding-top: calc(var(--header-h) + var(--top-strip-h));
  isolation: isolate;
}
.osp-hero__scrim {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(170deg, rgba(20,19,15,.22) 0%, rgba(20,19,15,.82) 100%);
}
.osp-hero__inner {
  position: relative; z-index: 1;
  padding-block: clamp(48px, 7vw, 96px);
  color: var(--c-cream);
  max-width: 720px;
}
.osp-hero__kicker {
  display: inline-block;
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-clay-light, #d4a574);
  background: rgba(193,139,98,.18);
  border: 1px solid rgba(193,139,98,.35);
  border-radius: 100px;
  padding: 5px 14px;
  margin-bottom: var(--sp-4);
}
.osp-hero__title {
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  color: var(--c-cream);
  line-height: 1.15;
  margin-bottom: var(--sp-4);
}
.osp-hero__lede {
  font-size: clamp(1rem, 2vw, 1.18rem);
  opacity: .82;
  max-width: 580px;
  line-height: 1.7;
}
/* Unified brand bg when no image */
.osp-hero--brand {
  background:
    radial-gradient(60% 80% at 80% 10%, rgba(193,139,98,.35), transparent 55%),
    radial-gradient(50% 60% at 10% 90%, rgba(156,107,69,.25), transparent 55%),
    var(--c-ink);
}
.osp-hero__scroll {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(250,246,238,.3);
  color: var(--c-cream);
  margin-top: var(--sp-6);
  animation: ospBounce 2s ease-in-out infinite;
}
@keyframes ospBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

/* Body grid */
.osp-body { background: var(--c-cream); }
.osp-body__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

/* Visual */
.osp-body__visual { position: relative; }
.osp-body__img-wrap {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 32px 64px rgba(20,19,15,.18);
  aspect-ratio: 4 / 3;
}
.osp-body__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.osp-body__badge {
  position: absolute;
  inset-inline-start: -12px;
  bottom: 24px;
  background: var(--c-clay);
  color: #fff;
  font-size: .82rem; font-weight: 700; letter-spacing: .06em;
  padding: 8px 18px 8px 14px;
  border-radius: 0 100px 100px 0;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 8px 24px rgba(193,139,98,.4);
}
[dir="ltr"] .osp-body__badge {
  inset-inline-start: auto;
  inset-inline-end: -12px;
  border-radius: 100px 0 0 100px;
}

/* Form card */
.osp-form-card {
  background: #fff;
  border: 1px solid var(--c-line-soft);
  border-radius: 20px;
  padding: clamp(24px, 4vw, 40px);
  box-shadow: 0 16px 48px rgba(20,19,15,.08);
}
.osp-form-card__head {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--c-line-soft);
}
.osp-form-card__head > i {
  font-size: 1.8rem; color: var(--c-clay);
  flex-shrink: 0; margin-top: 4px;
}
.osp-form-card__head h2 { font-size: clamp(1.2rem, 2.5vw, 1.55rem); margin-bottom: 4px; }
.osp-form-card__head p  { color: var(--c-muted); font-size: .9rem; margin: 0; }

.osp-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.osp-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.osp-form__field { display: flex; flex-direction: column; gap: 6px; }
.osp-form__field label { font-size: .83rem; font-weight: 600; color: var(--c-ink); }
.osp-form__field input,
.osp-form__field textarea {
  width: 100%; padding: 13px 16px;
  border: 1.5px solid var(--c-line);
  border-radius: 10px;
  background: var(--c-cream);
  font-size: .95rem; font-family: inherit; color: var(--c-ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.osp-form__field input:focus,
.osp-form__field textarea:focus {
  outline: none;
  border-color: var(--c-clay);
  box-shadow: 0 0 0 3px rgba(193,139,98,.15);
}
.osp-form__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-2); }
.osp-form__actions .btn { flex: 1; justify-content: center; min-width: 140px; gap: 8px; }

.offer-single-form__success {
  text-align: center; padding: var(--sp-6) 0 var(--sp-2); color: var(--c-clay);
}
.offer-single-form__success[hidden] { display: none; }
.offer-single-form__success i { font-size: 3rem; display: block; margin-bottom: var(--sp-3); }
.offer-single-form__success p { font-size: 1.05rem; color: var(--c-ink); font-weight: 500; }

/* Gravity Form inside offer card */
.osp-form-card .gform_wrapper { margin: 0; }
.osp-form-card .gform_fields { display: flex; flex-direction: column; gap: var(--sp-4); }
.osp-form-card .gfield { margin: 0 !important; }
.osp-form-card .gfield_label { font-size: .83rem; font-weight: 600; color: var(--c-ink); margin-bottom: 6px; }
.osp-form-card .ginput_container input,
.osp-form-card .ginput_container select,
.osp-form-card .ginput_container textarea {
  width: 100%; padding: 13px 16px;
  border: 1.5px solid var(--c-line) !important;
  border-radius: 10px !important;
  background: var(--c-cream) !important;
  font-size: .95rem; font-family: inherit; color: var(--c-ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.osp-form-card .ginput_container input:focus,
.osp-form-card .ginput_container select:focus,
.osp-form-card .ginput_container textarea:focus {
  outline: none !important;
  border-color: var(--c-clay) !important;
  box-shadow: 0 0 0 3px rgba(193,139,98,.15) !important;
}
.osp-form-card .gform_footer,
.osp-form-card .gform_page_footer { margin-top: var(--sp-4); padding: 0; }
.osp-form-card .gform_button,
.osp-form-card input[type="submit"],
.osp-form-card button[type="submit"] {
  width: 100% !important; padding: 16px 28px !important;
  background: var(--c-clay) !important; color: #fff !important;
  border: none !important; border-radius: 100px !important;
  font-size: 1rem !important; font-weight: 700 !important; font-family: inherit !important;
  cursor: pointer !important; letter-spacing: .02em !important;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast) !important;
  box-shadow: 0 6px 24px rgba(193,139,98,.35) !important;
  display: block !important;
}
.osp-form-card .gform_button:hover,
.osp-form-card input[type="submit"]:hover,
.osp-form-card button[type="submit"]:hover {
  background: #9c6b45 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 32px rgba(193,139,98,.45) !important;
}
.osp-form-card .gform_confirmation_message {
  text-align: center; padding: var(--sp-5) 0;
  color: var(--c-clay); font-weight: 600; font-size: 1rem;
}
.osp-wa-btn {
  width: 100%; justify-content: center;
  gap: 8px; margin-top: var(--sp-3);
}

.osp-form-card__trust {
  display: flex; gap: var(--sp-4); flex-wrap: wrap;
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line-soft);
  list-style: none; padding-inline-start: 0;
}
.osp-form-card__trust li {
  display: flex; align-items: center; gap: 6px;
  font-size: .8rem; color: var(--c-muted); font-weight: 500;
}
.osp-form-card__trust li i { color: var(--c-clay); font-size: .85rem; }

/* More offers strip */
.osp-more { background: var(--c-bone, #F4EFE6); }
.osp-more__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.osp-more__card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--c-line-soft);
  text-decoration: none; color: inherit;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
  display: flex; flex-direction: column;
}
.osp-more__card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.osp-more__img { aspect-ratio: 4/3; overflow: hidden; }
.osp-more__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease-out); }
.osp-more__card:hover .osp-more__img img { transform: scale(1.06); }
.osp-more__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.osp-more__body strong { font-size: 1rem; display: block; }
.osp-more__body p { font-size: .85rem; color: var(--c-muted); line-height: 1.6; margin: 0; }
.osp-more__cta { font-size: .82rem; color: var(--c-clay); font-weight: 600; margin-top: auto; display: flex; align-items: center; gap: 6px; }
[dir="ltr"] .osp-more__cta i { transform: scaleX(-1); }

/* Responsive */
@media (max-width: 900px) {
  .osp-body__grid { grid-template-columns: 1fr; }
  .osp-form__row  { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .osp-form__actions { flex-direction: column; }
  .osp-form__actions .btn { width: 100%; }
}

/* =====================================================
   FAQ — accordion
   ===================================================== */
.faq {
  background: var(--c-cream);
  overflow-x: clip;
}
.faq__split {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 900px) { .faq__split { grid-template-columns: 1fr; gap: var(--sp-7); } }
.faq__intro,
.faq__list {
  min-width: 0;
}
.faq__intro {
  position: sticky;
  top: calc(var(--header-h) + var(--top-strip-h) + 18px);
  background: rgba(250,246,238,.6);
  border: 1px solid var(--c-line-soft);
  border-radius: 10px;
  padding: clamp(20px, 2.8vw, 34px);
  box-shadow: 0 10px 28px rgba(20,19,15,.05);
}
.faq__intro h2 {
  font-size: clamp(2rem, 3.4vw, 3.45rem);
  line-height: 1.12;
  letter-spacing: 0;
  text-wrap: balance;
  overflow-wrap: anywhere;
  margin-block-end: clamp(14px, 2vw, 22px);
}
.faq__intro h2 em { font-family: var(--ff-arabic); font-style: normal; font-weight: 300; color: var(--c-clay); }
.faq__intro p {
  color: var(--c-ink-mute);
  max-width: 34ch;
  font-size: clamp(.95rem, 1.15vw, 1.05rem);
  line-height: 1.85;
  overflow-wrap: anywhere;
  margin-block-end: clamp(18px, 2.4vw, 28px);
}

.faq__list {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,.46);
  border: 1px solid var(--c-line-soft);
  border-radius: 10px;
  padding-inline: clamp(14px, 2vw, 24px);
}
.faq-item {
  border-block-end: 1px solid var(--c-line-soft);
  min-width: 0;
}
.faq-item:last-child { border-block-end: 0; }
.faq-item__head {
  width: 100%;
  background: transparent;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-5) 0;
  font-family: var(--ff-arabic);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--c-ink);
  text-align: start;
  cursor: pointer;
  letter-spacing: var(--tracking-tight);
  gap: var(--sp-4);
}
.faq-item__head > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.faq-item__icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  position: relative;
  transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.faq-item__icon::before, .faq-item__icon::after {
  content: ""; position: absolute;
  width: 14px; height: 1.5px;
  background: currentColor;
  transition: transform var(--t-base) var(--ease-out);
}
.faq-item__icon::after { transform: rotate(90deg); }
.faq-item.is-open .faq-item__icon { background: var(--c-clay); color: var(--c-cream); border-color: var(--c-clay); }
.faq-item.is-open .faq-item__icon::after { transform: rotate(0deg); }
.faq-item__body {
  max-height: 0;
  overflow: hidden;
  color: var(--c-ink-mute);
  font-size: 1rem;
  line-height: 1.8;
  transition: max-height var(--t-base) var(--ease-out);
}
.faq-item__body p { padding-block-end: var(--sp-5); padding-inline-end: 50px; }
.faq-item.is-open .faq-item__body { max-height: 400px; }
.faq-item:not(.is-open) .faq-item__head:hover {
  color: var(--c-clay-deep);
}
.faq-item:not(.is-open) .faq-item__head:hover .faq-item__icon {
  border-color: var(--c-clay);
  background: rgba(193,139,98,.08);
}

@media (max-width: 900px) {
  .faq__intro {
    position: static;
    border-radius: 8px;
    padding: 18px;
  }
  .faq__intro h2 {
    font-size: clamp(1.85rem, 8vw, 2.65rem);
    line-height: 1.16;
  }
  .faq__intro p {
    max-width: 100%;
    font-size: .95rem;
  }
  .faq__list {
    border-radius: 8px;
    padding-inline: 14px;
  }
}

/* =====================================================
   Instagram strip
   ===================================================== */
.instagram-strip {
  background: var(--c-bone);
  padding-block: clamp(64px, 8vw, 120px);
  overflow: hidden;
}
.instagram-strip__head {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  margin-block-end: var(--sp-6);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-5);
}
.instagram-strip__head h2 { font-size: var(--fs-h2); }
.instagram-strip__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(180px, 1fr));
  gap: var(--sp-3);
  width: min(1800px, calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
}
.instagram-tile {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--c-sand);
  display: block;
}
.instagram-tile:nth-child(even) { transform: translateY(var(--sp-5)); }
.instagram-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out-smooth), filter var(--t-base) var(--ease-out);
}
.instagram-tile:hover img { transform: scale(1.08); filter: saturate(1.05) contrast(1.03); }
@media (max-width: 980px) {
  .instagram-strip__grid { grid-template-columns: repeat(3, 1fr); }
  .instagram-tile:nth-child(even) { transform: none; }
}
@media (max-width: 560px) {
  .instagram-strip__head { display: grid; align-items: start; }
  .instagram-strip__grid { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================
   CTA banner
   ===================================================== */
.cta-banner {
  position: relative;
  background: var(--c-ink);
  color: var(--c-cream);
  overflow: hidden;
  isolation: isolate;
}
.cta-banner__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-8);
  align-items: center;
  padding-block: clamp(80px, 10vw, 140px);
}
@media (max-width: 768px) { .cta-banner__inner { grid-template-columns: 1fr; } }
.cta-banner h2 {
  font-size: var(--fs-h1);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--c-cream);
  max-width: 14ch;
}
.cta-banner h2 em {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  color: var(--c-clay);
}
.cta-banner__side { display: flex; flex-direction: column; gap: var(--sp-5); }
.cta-banner__side p { color: rgba(250,246,238,.8); max-width: 38ch; line-height: 1.75; }
.cta-banner::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  opacity: .18;
  background:
    radial-gradient(60% 50% at 80% 20%, var(--c-clay) 0%, transparent 55%),
    radial-gradient(50% 50% at 20% 90%, var(--c-olive) 0%, transparent 55%);
}
.cta-banner__decor {
  position: absolute;
  inset-inline-end: -120px;
  bottom: -120px;
  width: 380px; height: 380px;
  border: 1px solid rgba(193,139,98,.25);
  border-radius: 50%;
  pointer-events: none;
}
@media (max-width: 600px) {
  .cta-banner__inner {
    padding-block: clamp(56px, 14vw, 82px);
    gap: var(--sp-5);
  }
  .cta-banner h2 {
    max-width: 100%;
    font-size: clamp(1.9rem, 9vw, 2.45rem);
  }
  .cta-banner__side .btn,
  .cta-banner__side {
    align-items: stretch;
  }
}

/* =====================================================
   Contact Modal
   ===================================================== */
.cta-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
.cta-modal[hidden] { display: none; }
.cta-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20,19,15,.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}
.cta-modal__box {
  position: relative;
  z-index: 1;
  background: var(--c-cream);
  border-radius: 16px;
  padding: clamp(28px, 5vw, 48px);
  width: 100%;
  max-width: 480px;
  box-shadow: 0 32px 80px rgba(20,19,15,.28);
  animation: modalIn .28s var(--ease-out) both;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.cta-modal__close {
  position: absolute;
  inset-inline-end: 16px;
  top: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--c-line-soft);
  background: transparent;
  color: var(--c-ink);
  cursor: pointer;
  display: grid; place-items: center;
  font-size: 15px;
  transition: background var(--t-fast), color var(--t-fast);
}
.cta-modal__close:hover { background: var(--c-ink); color: var(--c-cream); }
.cta-modal__box h3 {
  font-size: clamp(1.2rem, 3vw, 1.55rem);
  margin-bottom: var(--sp-2);
  padding-inline-end: 40px;
}
.cta-modal__box > p {
  color: var(--c-muted);
  font-size: .93rem;
  margin-bottom: var(--sp-5);
}
.cta-modal__form { display: flex; flex-direction: column; gap: var(--sp-4); }
.cta-modal__field { display: flex; flex-direction: column; gap: 6px; }
.cta-modal__field label { font-size: .85rem; font-weight: 600; color: var(--c-ink); }
.cta-modal__field input,
.cta-modal__field select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: #fff;
  font-size: .95rem;
  font-family: inherit;
  color: var(--c-ink);
  transition: border-color var(--t-fast);
}
.cta-modal__field input:focus,
.cta-modal__field select:focus {
  outline: none;
  border-color: var(--c-clay);
}
.cta-modal__submit { width: 100%; margin-top: var(--sp-2); justify-content: center; }
.cta-modal__success {
  text-align: center;
  padding: var(--sp-6) 0 var(--sp-2);
  color: var(--c-clay);
}
.cta-modal__success[hidden] { display: none; }
.cta-modal__success i { font-size: 2.5rem; margin-bottom: var(--sp-3); display: block; }
.cta-modal__success p { font-size: 1rem; color: var(--c-ink); }

/* =====================================================
   Page hero (interior pages)
   ===================================================== */
.page-hero {
  position: relative;
  padding: calc(var(--header-h) + var(--top-strip-h) + 100px) var(--gutter) clamp(80px, 10vw, 160px);
  background: var(--c-cream);
  border-block-end: 1px solid var(--c-line-soft);
  isolation: isolate;
  overflow: hidden;
}
.page-hero__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: end;
  gap: var(--sp-7);
}
@media (max-width: 768px) { .page-hero__inner { grid-template-columns: 1fr; } }
.page-hero h1 {
  font-size: var(--fs-h1);
  line-height: 1.1;
  letter-spacing: -0.025em;
  max-width: 16ch;
}
.page-hero h1 em {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  color: var(--c-clay);
}
.page-hero__crumbs {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: .78rem;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--c-ink-mute);
  margin-block-end: var(--sp-5);
}
.page-hero__crumbs a:hover { color: var(--c-clay-deep); }
.page-hero__crumbs span { color: var(--c-line); }
.page-hero__lede { color: var(--c-ink-mute); max-width: 44ch; font-size: 1.1rem; line-height: 1.75; }

/* =====================================================
   About page v3
   ===================================================== */
.about-v3-cover {
  position: relative;
  min-height: min(86svh, 900px);
  padding: calc(var(--header-h) + var(--top-strip-h) + 88px) var(--gutter) clamp(84px, 9vw, 140px);
  display: grid;
  align-items: end;
  background-position: center;
  background-size: cover;
  color: var(--c-cream);
}
.about-v3-cover__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--c-ink);
}
.about-v3-cover__video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(130vw, 1800px);
  height: max(73.125vw, 1012px);
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  opacity: 0;
  animation: aboutHeroVideoReveal 700ms ease-out 1800ms forwards;
}
@keyframes aboutHeroVideoReveal {
  to { opacity: 1; }
}
.about-v3-cover__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle, rgba(20,19,15,.52) .65px, transparent .9px),
    radial-gradient(60% 80% at 88% 0%, rgba(193,139,98,.4), transparent 60%),
    linear-gradient(180deg, rgba(20,19,15,.52), rgba(20,19,15,.86));
  background-size: 6px 6px, 100% 100%, 100% 100%;
}
.about-v3-cover__inner {
  position: relative;
  z-index: 2;
  max-width: 980px;
}
.about-v3-cover__crumbs {
  color: rgba(250,246,238,.78);
}
.about-v3-cover__crumbs a:hover {
  color: var(--c-cream);
}
.about-v3-cover__title {
  max-width: 12ch;
  margin-block: 12px 18px;
  color: var(--c-cream);
  font-size: clamp(2.5rem, 6vw, 5.4rem);
  line-height: .95;
  letter-spacing: 0;
  overflow: hidden;
}
.about-v3-cover__title span {
  display: inline-block;
  transform: translateY(112%);
  opacity: 0;
  animation: aboutTitleRise 900ms cubic-bezier(.2, .9, .2, 1) 450ms forwards;
}
.about-v3-cover__title::after {
  content: "";
  display: block;
  width: min(170px, 52%);
  height: 2px;
  margin-block-start: 18px;
  background: linear-gradient(90deg, rgba(250,246,238,.95), rgba(193,139,98,.2));
  transform: scaleX(0);
  transform-origin: right center;
  animation: aboutTitleLine 760ms cubic-bezier(.2, .9, .2, 1) 1050ms forwards;
}
@keyframes aboutTitleRise {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes aboutTitleLine {
  to { transform: scaleX(1); }
}
.about-v3-cover p {
  max-width: 48ch;
  color: rgba(250,246,238,.82);
  line-height: 1.9;
  font-size: clamp(1rem, 1.25vw, 1.16rem);
}

.about-v3-story {
  background: var(--c-cream);
}
.about-v3-story__grid {
  display: grid;
  grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr);
  gap: clamp(28px, 5vw, 74px);
  align-items: center;
}
.about-v3-story__copy {
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.about-v3-story__copy h2 {
  color: var(--c-ink);
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.06;
  margin-block-end: 16px;
}
.about-v3-story__copy p {
  color: var(--c-ink-soft);
  line-height: 1.9;
  max-width: 48ch;
}
.about-v3-story__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-block-start: 26px;
}
.about-v3-story__media {
  position: relative;
  /* height driven by the main image; accent overhangs at bottom */
  padding-bottom: clamp(80px, 14vw, 130px);
}
.about-v3-story__blob { display: none; }

/* Main image — large, top-right, landscape */
.about-v3-story__main-wrap {
  position: relative;
  width: 78%;
  margin-inline-start: auto;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(20,19,15,.2);
}
.about-v3-story__main {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 1s var(--ease-out-smooth);
}
.about-v3-story__main-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(20,19,15,.28) 100%);
  pointer-events: none;
}

/* Accent image — smaller, bottom-start, overlaps main */
.about-v3-story__accent-wrap {
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 52%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  border: 5px solid var(--c-cream);
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(20,19,15,.2);
  transform: none;
}
.about-v3-story__accent {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.about-v3-story__media:hover .about-v3-story__main { transform: scale(1.04); }
.about-v3-story__media:hover .about-v3-story__accent-wrap { transform: translateY(-4px); }

.about-v3-trust {
  background: var(--c-bone);
}
.about-v3-trust .section-head--services,
.about-v3-vision .section-head--services,
.about-v3-location .section-head--services {
  padding-block-start: 0;
}
.about-v3-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}
.about-v3-trust__item {
  background: rgba(255,255,255,.7);
  border-radius: 8px;
  padding: 22px 18px;
  text-align: center;
}
.about-v3-trust__item strong {
  display: block;
  color: var(--c-clay-deep);
  font-family: var(--ff-display);
  font-size: clamp(1.8rem, 2.6vw, 2.8rem);
  line-height: 1;
  margin-block-end: 10px;
}
.about-v3-trust__item span {
  color: var(--c-ink);
  font-size: .92rem;
  font-weight: 700;
}

.about-v3-vision {
  background: var(--c-sand);
}
.about-v3-vision__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.about-v3-vision__item {
  background: rgba(255,255,255,.78);
  border-radius: 8px;
  padding: 20px 18px;
}
.about-v3-vision__item h3 {
  color: var(--c-clay-deep);
  margin: 0 0 10px;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
}
.about-v3-vision__item p {
  margin: 0;
  color: var(--c-ink-soft);
  line-height: 1.9;
  font-weight: 700;
}

.about-v3-contact-strip {
  background: var(--c-cream);
}
.about-v3-contact-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.about-v3-contact-strip__col {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  background: linear-gradient(155deg, rgba(255,255,255,.94), rgba(250,246,238,.86));
  border: 1px solid rgba(193,139,98,.18);
  border-radius: 8px;
  padding: clamp(18px, 2.6vw, 28px);
  box-shadow: 0 14px 32px rgba(20,19,15,.08);
  min-height: 100%;
}
.about-v3-contact-strip__col::after {
  content: "";
  position: absolute;
  inset-inline: 18px;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(193,139,98,.8), rgba(154,111,74,.35));
  border-radius: 999px;
}
.about-v3-contact-strip__col h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 18px;
  color: var(--c-ink);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.2;
  min-height: 1.2em;
}
.about-v3-contact-strip__col h3 i {
  color: var(--c-clay);
  font-size: .95em;
}
.about-v3-contact-strip__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  color: var(--c-ink-soft);
  line-height: 1.85;
}
.about-v3-contact-strip__map {
  margin-top: 2px;
  height: 260px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(193,139,98,.2);
}
.about-v3-contact-strip__social {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-block-end: 14px;
}
.about-v3-contact-strip__social a {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-ink);
  background: rgba(193,139,98,.14);
  border: 1px solid rgba(193,139,98,.22);
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.about-v3-contact-strip__social a:hover {
  transform: translateY(-2px);
  background: var(--c-clay);
  color: var(--c-cream);
}
.about-v3-contact-strip__facts,
.about-v3-contact-strip__meta {
  margin-block-end: 14px !important;
}
.about-v3-contact-strip__facts li,
.about-v3-contact-strip__meta li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  text-align: start;
}
.about-v3-contact-strip__facts i,
.about-v3-contact-strip__meta i {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-clay);
  background: rgba(193,139,98,.12);
}
.about-v3-contact-strip__facts span {
  min-width: 0;
}
.about-v3-contact-strip__meta strong {
  display: block;
  margin-block-end: 2px;
  color: var(--c-ink);
  font-size: .82rem;
  line-height: 1.35;
}
.about-v3-contact-strip__meta a {
  color: var(--c-ink);
}
.about-v3-contact-strip .btn {
  margin-block-start: auto;
  min-width: 148px;
  align-self: center;
}
.about-v3-contact-strip__col:first-child ul {
  margin-top: 2px;
}
.about-v3-contact-strip__col:first-child .about-v3-contact-strip__facts li + li {
  margin-top: 2px;
}
.about-v3-contact-strip__col:last-child {
  justify-content: flex-start;
}
.about-v3-contact-strip__col:last-child .about-v3-contact-strip__meta li + li {
  margin-top: 2px;
}

.about-v3-location {
  background: var(--c-cream);
}
.about-v3-location__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  gap: clamp(18px, 2.8vw, 28px);
}
.about-v3-location__map,
.about-v3-location__info {
  border: 1px solid var(--c-line-soft);
  border-radius: 8px;
  padding: clamp(18px, 3vw, 32px);
  background: rgba(255,255,255,.8);
}
.about-v3-location__frame {
  height: 320px;
}
.about-v3-location__info {
  display: grid;
  align-content: center;
}
.about-v3-location__info ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.about-v3-location__info li,
.about-v3-location__info li a {
  color: var(--c-ink);
}
.about-v3-location__actions {
  margin-block-start: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 980px) {
  .about-v3-story__grid,
  .about-v3-location__grid,
  .about-v3-contact-strip__grid {
    grid-template-columns: 1fr;
  }
  .about-v3-trust__grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .about-v3-vision__grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .about-v3-cover__title {
    max-width: 13ch;
  }
  .about-v3-cover {
    min-height: 620px;
    padding-block-end: 72px;
  }
  .about-v3-story__main-wrap { width: 82%; }
  .about-v3-story__accent-wrap { width: 56%; }
  .about-v3-location__frame {
    height: 250px;
  }
}
@media (max-width: 480px) {
  .about-v3-cover {
    min-height: 540px;
    padding-block-end: 58px;
  }
  .about-v3-cover__title {
    font-size: clamp(2.15rem, 13vw, 3.1rem);
  }
  .about-v3-story__actions,
  .about-v3-location__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .about-v3-story__main-wrap { width: 88%; }
  .about-v3-story__accent-wrap { width: 60%; }
}

/* =====================================================
   Single post
   ===================================================== */
.post-hero {
  padding: calc(var(--header-h) + var(--top-strip-h) + 80px) var(--gutter) var(--sp-8);
  max-width: var(--container-narrow);
  margin-inline: auto;
}
.post-hero h1 { margin-block-end: var(--sp-5); }
.post-meta { color: var(--c-ink-mute); font-size: .9rem; letter-spacing: var(--tracking-wide); }

.post-thumb {
  margin-block: var(--sp-7);
  max-width: var(--container-wide);
  margin-inline: auto;
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* =====================================================
   404
   ===================================================== */
.error-404 {
  padding: calc(var(--header-h) + var(--top-strip-h) + 100px) var(--gutter) var(--sp-9);
  text-align: center;
  max-width: var(--container-narrow);
  margin-inline: auto;
}
.error-404 .display-num {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 12rem;
  line-height: 1;
  color: var(--c-clay);
  margin-block-end: var(--sp-5);
}

/* =====================================================
   Interior design page
   ===================================================== */

/* Hero — full-bleed photo, title centred */
.id-hero {
  position: relative;
  height: 76svh;
  min-height: 480px;
  max-height: 760px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.id-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle, rgba(8,8,7,.11) .38px, transparent .72px),
    linear-gradient(180deg, rgba(20,19,15,.46) 0%, rgba(20,19,15,.28) 42%, rgba(20,19,15,.58) 100%);
  background-size: 10px 10px, 100% 100%;
  background-position: 0 0, center;
}
.id-hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-inline: var(--gutter);
}
.id-hero h1 {
  color: var(--c-cream);
  font-size: clamp(2.15rem, 4.8vw, 4.25rem);
  line-height: 1.05;
  margin: 0;
  letter-spacing: 0;
  text-shadow: 0 4px 32px rgba(20,19,15,.5);
}
.id-hero p {
  display: none;
}

/* Intro — centred, feature cards, no images */
.id-intro { background: var(--c-cream); }
.id-intro__cta {
  text-align: center;
  margin-block-start: clamp(28px, 4vw, 48px);
}

.id-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 20px);
  margin-block-start: clamp(28px, 4vw, 48px);
}
.id-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: clamp(22px, 3vw, 36px) clamp(16px, 2vw, 24px);
  background: var(--c-bone);
  border: 1px solid rgba(193,139,98,.18);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(22,20,14,.05);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.id-feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(22,20,14,.1);
}
.id-feature__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(193,139,98,.12);
  border: 1px solid rgba(193,139,98,.28);
  color: var(--c-clay-deep);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.id-feature strong {
  font-size: clamp(.95rem, 1.2vw, 1.05rem);
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.3;
}
.id-feature p {
  margin: 0;
  font-size: .88rem;
  color: var(--c-ink-mute);
  line-height: 1.75;
}

/* Gallery — responsive image grid */
.id-gallery { background: var(--c-bone); }
.id-gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
  margin-block-start: clamp(16px, 2.5vw, 28px);
}
.id-gallery__item {
  display: block;
  width: 100%;
  margin: 0;
}
.id-gallery__tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 8px;
  background: var(--c-sand);
  border: 1px solid rgba(193,139,98,.2);
  box-shadow: 0 8px 24px rgba(22,20,14,.08);
  cursor: zoom-in;
}
.id-gallery__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.3s var(--ease-out-smooth), filter 1.3s var(--ease-out-smooth);
}
.id-gallery__tile:hover img { transform: scale(1.055); filter: saturate(1.04) contrast(1.02); }
.id-gallery__zoom {
  position: absolute;
  inset-inline-end: 10px;
  bottom: 10px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(250,246,238,.92);
  color: var(--c-ink);
  font-size: .78rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.id-gallery__tile:hover .id-gallery__zoom { opacity: 1; transform: none; }

/* After sales */
.after-sales-flow {
  background: var(--c-bone);
}
.after-sales-flow__grid {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
}
.after-sales-flow__copy h2 {
  margin: 10px 0 0;
  color: var(--c-ink);
  font-size: clamp(1.8rem, 3vw, 3.15rem);
  line-height: 1.15;
}
.after-sales-flow__copy p {
  max-width: 46ch;
  margin: 18px 0 26px;
  color: var(--c-ink-mute);
  line-height: 1.85;
}
.after-sales-steps {
  display: grid;
  gap: 14px;
}
.after-sales-step {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: clamp(18px, 2.2vw, 26px);
  border-radius: 10px;
  background: var(--c-cream);
  border: 1px solid rgba(193,139,98,.18);
  box-shadow: 0 10px 28px rgba(22,20,14,.05);
}
.after-sales-step strong {
  color: var(--c-clay);
  font-family: var(--ff-display);
  font-size: 2.1rem;
  line-height: 1;
}
.after-sales-step h3 {
  margin: 0;
  color: var(--c-ink);
  font-size: 1.1rem;
  line-height: 1.35;
}
.after-sales-step p {
  margin: 8px 0 0;
  color: var(--c-ink-mute);
  line-height: 1.75;
}
.after-sales-contact {
  background: var(--c-cream);
}
.after-sales-contact__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 4vw, 56px);
  padding: clamp(24px, 4vw, 46px);
  border-radius: 10px;
  background: var(--c-bone);
  border: 1px solid rgba(193,139,98,.2);
  box-shadow: 0 14px 38px rgba(22,20,14,.07);
}
.after-sales-contact h2 {
  margin: 8px 0 0;
  color: var(--c-ink);
  font-size: clamp(1.55rem, 2.5vw, 2.6rem);
  line-height: 1.2;
}
.after-sales-contact p {
  margin: 12px 0 0;
  color: var(--c-ink-mute);
  line-height: 1.8;
}
.after-sales-contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Responsive */
@media (max-width: 1024px) {
  .id-features { grid-template-columns: repeat(2, 1fr); }
  .id-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .after-sales-flow__grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .id-features { grid-template-columns: repeat(2, 1fr); }
  .id-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .after-sales-contact__inner {
    align-items: stretch;
    flex-direction: column;
  }
}
@media (max-width: 480px) {
  .id-hero {
    height: 58svh;
    min-height: 360px;
  }
  .id-hero h1 { font-size: clamp(1.9rem, 8vw, 2.75rem); }
  .id-features { grid-template-columns: 1fr; }
  .id-gallery__grid { grid-template-columns: 1fr; }
  .after-sales-step { grid-template-columns: 54px minmax(0, 1fr); }
  .after-sales-contact__actions { flex-direction: column; }
}

/* =====================================================
   Contact split
   ===================================================== */
.contact-split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--sp-9);
  align-items: start;
}
@media (max-width: 900px) { .contact-split { grid-template-columns: 1fr; gap: var(--sp-7); } }
.contact-info dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--sp-5);
  row-gap: var(--sp-3);
  margin: 0;
}
.contact-info dt {
  font-size: .78rem;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--c-ink-mute);
  padding-block-start: 4px;
}
.contact-info dd {
  margin: 0;
  font-size: 1.05rem;
  color: var(--c-ink);
}
@media (max-width: 560px) {
  .contact-info dl {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }
  .contact-info dd + dt {
    margin-block-start: 12px;
  }
}

.contact-page {
  background: var(--c-cream);
}
.contact-page__layout {
  display: grid;
  grid-template-columns: minmax(300px, .95fr) minmax(0, 1.05fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
  margin-block-start: clamp(32px, 5vw, 64px);
}
.contact-page__details {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}
.contact-page__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.contact-page-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 18px;
  border-radius: 8px;
  background: var(--c-bone);
  border: 1px solid rgba(193,139,98,.18);
  box-shadow: 0 8px 24px rgba(22,20,14,.05);
}
.contact-page-card__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(193,139,98,.12);
  color: var(--c-clay-deep);
}
.contact-page-card strong {
  display: block;
  color: var(--c-ink);
  line-height: 1.35;
}
.contact-page-card p {
  margin: 6px 0 0;
  color: var(--c-ink-mute);
  font-size: .92rem;
  line-height: 1.7;
}
.contact-page-card a {
  color: var(--c-clay-deep);
  font-weight: 800;
}
.contact-page__map {
  height: clamp(300px, 34vw, 460px);
  border-radius: 10px;
  box-shadow: 0 14px 38px rgba(22,20,14,.08);
}
@media (max-width: 980px) {
  .contact-page__layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .contact-page__cards {
    grid-template-columns: 1fr;
  }
  .contact-page-card {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .contact-page-card__icon {
    width: 40px;
    height: 40px;
  }
  .contact-page__map {
    height: 280px;
  }
}

/* =====================================================
   Design request / recruitment forms
   ===================================================== */
.request-page {
  background: var(--c-cream);
}
.request-page--jobs {
  background: var(--c-bone);
}
.request-layout {
  display: grid;
  grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
  margin-block-start: clamp(32px, 5vw, 64px);
}
.request-aside {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}
.request-aside__panel {
  padding: clamp(24px, 3vw, 36px);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(250,246,238,.96), rgba(244,239,230,.86)),
    var(--c-cream);
  color: var(--c-ink);
  border: 1px solid rgba(193,139,98,.22);
  box-shadow: 0 14px 38px rgba(22,20,14,.07);
}
.request-aside__panel .eyebrow {
  color: var(--c-clay-deep);
}
.request-aside__panel h3 {
  margin: 10px 0 0;
  color: var(--c-ink);
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1.3;
}
.request-aside__panel p {
  margin: 14px 0 0;
  color: var(--c-ink-mute);
  line-height: 1.85;
}
.request-steps {
  display: grid;
  gap: 12px;
}
.request-step {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px 14px;
  align-items: start;
  padding: 18px;
  border-radius: 8px;
  background: var(--c-bone);
  border: 1px solid rgba(193,139,98,.18);
}
.request-page--jobs .request-step {
  background: var(--c-cream);
}
.request-step span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(193,139,98,.12);
  color: var(--c-clay-deep);
}
.request-step strong {
  color: var(--c-ink);
  line-height: 1.35;
}
.request-step p {
  grid-column: 2;
  margin: -6px 0 0;
  color: var(--c-ink-mute);
  font-size: .9rem;
  line-height: 1.75;
}
.request-form {
  position: relative;
  padding: clamp(22px, 3vw, 40px);
  border-radius: 10px;
  background:
    radial-gradient(80% 64% at 88% 0%, rgba(193,139,98,.12), transparent 62%),
    linear-gradient(180deg, rgba(250,246,238,.82), rgba(244,239,230,.96)),
    var(--c-bone);
  border: 1px solid rgba(193,139,98,.2);
  box-shadow: 0 20px 54px rgba(22,20,14,.09);
  overflow: hidden;
}
.request-form::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--c-clay), var(--c-gold), transparent);
  opacity: .9;
}
.request-page--jobs .request-form {
  background:
    linear-gradient(180deg, rgba(255,255,255,.52), rgba(250,246,238,.94)),
    var(--c-cream);
}
.request-form__missing {
  margin: 0;
  color: var(--c-ink-mute);
  line-height: 1.8;
}
.request-form .gform_wrapper {
  position: relative;
  direction: rtl;
  text-align: right;
}
html[lang^="en"] .request-form .gform_wrapper,
html[dir="ltr"] .request-form .gform_wrapper {
  direction: ltr;
  text-align: left;
}
.request-form .gform_wrapper.gravity-theme .gform_heading,
.request-form .gform_wrapper .gform_heading {
  display: none;
}
.request-form .gform_wrapper.gravity-theme .gform_fields,
.request-form .gform_wrapper .gform_fields {
  grid-column-gap: 16px;
  grid-row-gap: 20px;
  align-items: start;
}
.request-form .gform_wrapper.gravity-theme fieldset,
.request-form .gform_wrapper fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}
.request-form .gform_wrapper.gravity-theme .gfield_label,
.request-form .gform_wrapper.gravity-theme .gform-field-label,
.request-form .gform_wrapper .gfield_label,
.request-form .gform_wrapper .gform-field-label {
  display: block;
  margin-block-end: 9px;
  color: var(--c-ink);
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.45;
  text-align: inherit;
}
.request-form .gform_wrapper.gravity-theme .gfield_description,
.request-form .gform_wrapper.gravity-theme .gfield_header_item,
.request-form .gform_wrapper.gravity-theme .ginput_complex label,
.request-form .gform_wrapper .gfield_description,
.request-form .gform_wrapper .gfield_header_item,
.request-form .gform_wrapper .ginput_complex label {
  color: var(--c-ink-mute);
  font-size: .8rem;
  line-height: 1.6;
  text-align: inherit;
}
.request-form .gform_wrapper.gravity-theme .ginput_complex,
.request-form .gform_wrapper .ginput_complex {
  gap: 12px;
}
.request-form .gform_wrapper.gravity-theme input[type="text"],
.request-form .gform_wrapper.gravity-theme input[type="email"],
.request-form .gform_wrapper.gravity-theme input[type="tel"],
.request-form .gform_wrapper.gravity-theme input[type="url"],
.request-form .gform_wrapper.gravity-theme input[type="number"],
.request-form .gform_wrapper.gravity-theme input[type="file"],
.request-form .gform_wrapper.gravity-theme select,
.request-form .gform_wrapper.gravity-theme textarea,
.request-form .gform_wrapper input[type="text"],
.request-form .gform_wrapper input[type="email"],
.request-form .gform_wrapper input[type="tel"],
.request-form .gform_wrapper input[type="url"],
.request-form .gform_wrapper input[type="number"],
.request-form .gform_wrapper input[type="file"],
.request-form .gform_wrapper select,
.request-form .gform_wrapper textarea {
  width: 100%;
  min-height: 58px;
  border: 1px solid rgba(193,139,98,.26);
  border-radius: 14px;
  background: rgba(255,255,255,.9);
  color: var(--c-ink);
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.5;
  padding: 14px 16px;
  text-align: inherit;
  direction: inherit;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 1px 0 rgba(20,19,15,.04);
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.request-form .gform_wrapper.gravity-theme textarea,
.request-form .gform_wrapper textarea {
  min-height: 146px;
  resize: vertical;
}
.request-form .gform_wrapper.gravity-theme select,
.request-form .gform_wrapper select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 7L9 11.5L13.5 7' stroke='%23a6754a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: left 18px center;
  background-size: 18px 18px;
  background-repeat: no-repeat;
  padding-inline-start: 48px;
}
html[lang^="en"] .request-form .gform_wrapper select,
html[dir="ltr"] .request-form .gform_wrapper select {
  background-position: right 18px center;
  padding-inline-start: 16px;
  padding-inline-end: 48px;
}
.request-form .gform_wrapper.gravity-theme input[type="file"],
.request-form .gform_wrapper input[type="file"] {
  min-height: 58px;
  padding: 10px 14px;
  border-style: dashed;
  background: rgba(250,246,238,.86);
  line-height: 36px;
}
.request-form .gform_wrapper.gravity-theme input[type="file"]::file-selector-button,
.request-form .gform_wrapper input[type="file"]::file-selector-button {
  margin-inline-end: 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--c-clay);
  color: var(--c-cream);
  font-family: var(--ff-body);
  font-weight: 800;
  line-height: 1;
  padding: 12px 18px;
  cursor: pointer;
}
.request-form .gform_wrapper.gravity-theme .gfield_checkbox,
.request-form .gform_wrapper.gravity-theme .gfield_radio,
.request-form .gform_wrapper .gfield_checkbox,
.request-form .gform_wrapper .gfield_radio {
  display: grid;
  gap: 10px;
}
.request-form .gform_wrapper.gravity-theme .gchoice,
.request-form .gform_wrapper .gchoice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid rgba(193,139,98,.2);
  border-radius: 12px;
  background: rgba(255,255,255,.78);
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.request-form .gform_wrapper.gravity-theme .gchoice:hover,
.request-form .gform_wrapper .gchoice:hover {
  border-color: rgba(193,139,98,.38);
  background: var(--c-white);
  box-shadow: 0 8px 20px rgba(22,20,14,.05);
}
.request-form .gform_wrapper.gravity-theme .gchoice input,
.request-form .gform_wrapper .gchoice input {
  width: 19px;
  height: 19px;
  accent-color: var(--c-clay);
  flex: 0 0 auto;
}
.request-form .gform_wrapper.gravity-theme .gchoice label,
.request-form .gform_wrapper .gchoice label {
  margin: 0;
  color: var(--c-ink);
  font-weight: 700;
  line-height: 1.5;
}
.request-form .gform_wrapper.gravity-theme input:focus,
.request-form .gform_wrapper.gravity-theme select:focus,
.request-form .gform_wrapper.gravity-theme textarea:focus,
.request-form .gform_wrapper input:focus,
.request-form .gform_wrapper select:focus,
.request-form .gform_wrapper textarea:focus {
  border-color: var(--c-clay);
  background: var(--c-white);
  box-shadow: 0 0 0 4px rgba(193,139,98,.16), 0 12px 28px rgba(22,20,14,.08);
  transform: translateY(-1px);
}
.request-form .gform_wrapper.gravity-theme ::placeholder,
.request-form .gform_wrapper ::placeholder {
  color: rgba(107,101,90,.62);
  text-align: inherit;
}
.request-form .gform_wrapper.gravity-theme .gfield_required,
.request-form .gform_wrapper.gravity-theme .validation_message,
.request-form .gform_wrapper.gravity-theme .gform_validation_errors,
.request-form .gform_wrapper .gfield_required,
.request-form .gform_wrapper .validation_message,
.request-form .gform_wrapper .gform_validation_errors {
  color: #9c3f32;
}
.request-form .gform_wrapper.gravity-theme .gform_validation_errors,
.request-form .gform_wrapper .gform_validation_errors {
  margin-block-end: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(156,63,50,.22);
  border-radius: 14px;
  background: rgba(156,63,50,.07);
  box-shadow: none;
  text-align: inherit;
}
.request-form .gform_wrapper.gravity-theme .gfield_error input,
.request-form .gform_wrapper.gravity-theme .gfield_error select,
.request-form .gform_wrapper.gravity-theme .gfield_error textarea,
.request-form .gform_wrapper .gfield_error input,
.request-form .gform_wrapper .gfield_error select,
.request-form .gform_wrapper .gfield_error textarea {
  border-color: rgba(156,63,50,.58);
  box-shadow: 0 0 0 3px rgba(156,63,50,.08);
}
.request-form .gform_wrapper.gravity-theme .gform_footer,
.request-form .gform_wrapper .gform_footer {
  justify-content: stretch;
  margin-block-start: 28px;
  padding: 0;
}
.request-form .gform_wrapper.gravity-theme .gform_button,
.request-form .gform_wrapper.gravity-theme input[type="submit"],
.request-form .gform_wrapper .gform_button,
.request-form .gform_wrapper input[type="submit"] {
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: var(--radius-pill);
  background:
    linear-gradient(135deg, var(--c-clay), var(--c-clay-deep));
  color: var(--c-cream) !important;
  -webkit-text-fill-color: var(--c-cream);
  font-family: var(--ff-body);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0;
  padding: 0 38px;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(156,107,69,.24);
  transition: box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), filter var(--t-fast) var(--ease-out);
}
.request-form .gform_wrapper.gravity-theme .gform_button:hover,
.request-form .gform_wrapper.gravity-theme input[type="submit"]:hover,
.request-form .gform_wrapper .gform_button:hover,
.request-form .gform_wrapper input[type="submit"]:hover {
  color: var(--c-cream) !important;
  -webkit-text-fill-color: var(--c-cream);
  filter: brightness(.96) saturate(1.05);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(156,107,69,.3);
}
.request-form .gform_wrapper.gravity-theme .gform_button:focus-visible,
.request-form .gform_wrapper.gravity-theme input[type="submit"]:focus-visible,
.request-form .gform_wrapper .gform_button:focus-visible,
.request-form .gform_wrapper input[type="submit"]:focus-visible {
  outline: 3px solid rgba(193,139,98,.34);
  outline-offset: 3px;
}
@media (max-width: 900px) {
  .request-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .request-form,
  .request-aside__panel {
    padding: 20px;
  }
  .request-layout {
    margin-block-start: 28px;
  }
  .request-step {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .request-step span {
    width: 40px;
    height: 40px;
  }
  .request-form .gform_wrapper.gravity-theme .gform_fields,
  .request-form .gform_wrapper .gform_fields {
    grid-row-gap: 16px;
  }
  .request-form .gform_wrapper.gravity-theme input[type="text"],
  .request-form .gform_wrapper.gravity-theme input[type="email"],
  .request-form .gform_wrapper.gravity-theme input[type="tel"],
  .request-form .gform_wrapper.gravity-theme input[type="url"],
  .request-form .gform_wrapper.gravity-theme input[type="number"],
  .request-form .gform_wrapper.gravity-theme input[type="file"],
  .request-form .gform_wrapper.gravity-theme select,
  .request-form .gform_wrapper.gravity-theme textarea,
  .request-form .gform_wrapper input[type="text"],
  .request-form .gform_wrapper input[type="email"],
  .request-form .gform_wrapper input[type="tel"],
  .request-form .gform_wrapper input[type="url"],
  .request-form .gform_wrapper input[type="number"],
  .request-form .gform_wrapper input[type="file"],
  .request-form .gform_wrapper select,
  .request-form .gform_wrapper textarea {
    min-height: 52px;
    font-size: .95rem;
    padding: 12px 14px;
  }
  .request-form .gform_wrapper.gravity-theme textarea,
  .request-form .gform_wrapper textarea {
    min-height: 120px;
  }
  .request-form .gform_wrapper.gravity-theme .gform_button,
  .request-form .gform_wrapper.gravity-theme input[type="submit"],
  .request-form .gform_wrapper .gform_button,
  .request-form .gform_wrapper input[type="submit"] {
    min-height: 54px;
  }
}

/* Map */
.map-embed {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--c-line-soft);
  height: 420px;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* =====================================================
   GSAP — initial states (so flashes don't happen)
   ===================================================== */
.gs-fade  { opacity: 0; }
.gs-up    { opacity: 0; transform: translateY(40px); }
.gs-right { opacity: 0; transform: translateX(40px); }
.gs-left  { opacity: 0; transform: translateX(-40px); }
.is-rtl .gs-right { transform: translateX(-40px); }
.is-rtl .gs-left  { transform: translateX(40px); }
.gs-scale { opacity: 0; transform: scale(.96); }

@media (prefers-reduced-motion: reduce) {
  .gs-fade, .gs-up, .gs-right, .gs-left, .gs-scale { opacity: 1; transform: none; }
}

/* =====================================================
   Home page hover polish
   ===================================================== */
.home .btn,
.home .btn-link,
.home .offer-slide,
.home .portfolio-tile,
.home .service-card,
.home .quote,
.home .faq-item__head,
.home .instagram-tile,
.home .hero-arrow,
.home .offer-arrow,
.home .testi-arrow {
  transition:
    transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    background-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out),
    filter var(--t-base) var(--ease-out);
}

.home .hero__cta .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px -16px rgba(250,246,238,.45);
}

.home .service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}
.home .service-card h3,
.home .service-card p,
.home .service-card .more {
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out);
}
.home .service-card:hover h3 { transform: translateY(-2px); }
.home .service-card:hover p { transform: translateY(-1px); opacity: .95; }
.home .service-card:hover .more { transform: translateX(-3px); }
.home.is-rtl .service-card:hover .more { transform: translateX(3px); }

.home .portfolio-tile:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}
.home .portfolio-tile__caption {
  transition:
    opacity var(--t-base) var(--ease-out),
    transform var(--t-base) var(--ease-out),
    background-color var(--t-fast) var(--ease-out);
}
.home .portfolio-tile:hover .portfolio-tile__caption {
  background: rgba(250,246,238,.98);
  transform: translateY(0);
}

.home .quote:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-line);
}

.home .faq-item__head:hover {
  color: var(--c-clay-deep);
}
.home .faq-item__head:hover .faq-item__icon {
  border-color: var(--c-clay);
  background: rgba(193,139,98,.08);
}

.home .instagram-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* =====================================================
   Floating Widgets — WhatsApp bubble + Design Quiz
   ===================================================== */

/* Stack */
.float-widgets {
  position: fixed;
  inset-block-end: clamp(154px, 14vw, 220px);
  inset-inline-end: clamp(16px, 3vw, 28px);
  z-index: 900;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 12px;
}

/* Base button */
.float-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
  transition: transform .25s, box-shadow .25s;
  outline-offset: 3px;
}
.float-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.float-btn i {
  font-size: 1.45rem;
  color: #fff;
  line-height: 1;
}

/* Tooltip */
.float-btn__tooltip {
  position: absolute;
  inset-inline-end: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: var(--c-ink);
  color: #fff;
  font-size: .75rem;
  padding: 4px 10px;
  border-radius: 20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
.float-btn:hover .float-btn__tooltip,
.float-btn:focus-visible .float-btn__tooltip {
  opacity: 1;
}

/* WhatsApp */
.float-btn--wa {
  background: #25d366;
}
.float-btn--wa:hover {
  background: #1ebe5d;
}

/* Quiz */
.float-btn--quiz {
  background: var(--c-clay);
}
.float-btn--quiz:hover {
  background: var(--c-clay-deep);
}

/* Nudge pulse (after 8s) */
@keyframes float-nudge {
  0%,100% { box-shadow: 0 4px 16px rgba(0,0,0,.22); }
  50%      { box-shadow: 0 0 0 10px rgba(193,139,98,.15), 0 4px 16px rgba(0,0,0,.22); }
}
.float-btn--quiz.is-nudge {
  animation: float-nudge 1.4s ease-in-out 3;
}

/* ---- Quiz Modal ---- */
.quiz-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quiz-modal[hidden] { display: none; }

.quiz-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20,16,12,.55);
  backdrop-filter: blur(4px);
}

.quiz-modal__box {
  position: relative;
  z-index: 1;
  width: min(520px, 94vw);
  max-height: 90dvh;
  overflow-y: auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  padding: clamp(24px, 5vw, 44px) clamp(20px, 4vw, 40px) clamp(28px, 5vw, 48px);
  animation: quiz-slide-in .35s cubic-bezier(.22,1,.36,1);
}
@keyframes quiz-slide-in {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.quiz-modal__close {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--c-cream, #faf6ee);
  color: var(--c-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background .2s;
}
.quiz-modal__close:hover { background: var(--c-line, #e8e2d8); }

/* Progress bar */
.quiz-progress {
  height: 4px;
  background: var(--c-cream, #f0ebe2);
  border-radius: 2px;
  overflow: hidden;
  margin-block-end: clamp(20px, 3vw, 32px);
}
.quiz-progress__bar {
  height: 100%;
  background: var(--c-clay);
  border-radius: 2px;
  transition: width .4s ease;
}

/* Steps */
.quiz-step { display: none; }
.quiz-step.is-active { display: block; }

.quiz-step__num {
  font-size: .8rem;
  color: var(--c-ink-mute);
  margin: 0 0 6px;
  letter-spacing: .04em;
}

.quiz-step__q {
  font-family: var(--ff-arabic);
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  font-weight: 700;
  color: var(--c-ink);
  margin: 0 0 clamp(18px, 3vw, 28px);
  line-height: 1.3;
}

/* Options grid */
.quiz-step__opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.quiz-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 10px;
  border: 2px solid var(--c-line, #e8e2d8);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .18s;
  text-align: center;
}
.quiz-opt:hover {
  border-color: var(--c-clay);
  background: rgba(193,139,98,.06);
  transform: translateY(-2px);
}
.quiz-opt.is-selected {
  border-color: var(--c-clay);
  background: rgba(193,139,98,.12);
}
.quiz-opt__icon {
  font-size: 1.75rem;
  line-height: 1;
}
.quiz-opt__label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.2;
}

/* Result step */
.quiz-step--result {
  text-align: center;
}

/* Profile summary */
.quiz-result__profile {
  margin-block-end: 20px;
}
.quiz-result__icon {
  font-size: 2.8rem;
  margin-block-end: 8px;
}
.quiz-result__title {
  font-family: var(--ff-arabic);
  font-size: clamp(1.15rem, 3vw, 1.45rem);
  font-weight: 800;
  color: var(--c-ink);
  margin: 0 0 8px;
}
.quiz-result__desc {
  color: var(--c-ink-mute);
  font-size: .88rem;
  line-height: 1.55;
  max-width: 38ch;
  margin: 0 auto;
}

/* Inline contact form */
.quiz-result__form {
  background: var(--c-cream, #faf6ee);
  border-radius: 14px;
  padding: 18px 16px 16px;
  margin-block-end: 14px;
  text-align: start;
}
.quiz-result__form-intro {
  font-size: .82rem;
  color: var(--c-ink-mute);
  margin: 0 0 12px;
  text-align: center;
}
.quiz-form__row {
  margin-block-end: 10px;
}
.quiz-form__label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--c-ink);
  margin-block-end: 4px;
}
.quiz-form__input {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--c-line, #e8e2d8);
  border-radius: 8px;
  font-size: .9rem;
  background: #fff;
  color: var(--c-ink);
  transition: border-color .2s;
  box-sizing: border-box;
}
.quiz-form__input:focus {
  outline: none;
  border-color: var(--c-clay);
}
.quiz-form__submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding: 11px 20px;
  background: var(--c-clay);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: .93rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, transform .18s;
}
.quiz-form__submit:hover {
  background: var(--c-clay-deep);
  transform: translateY(-1px);
}
.quiz-form__success {
  text-align: center;
  padding: 16px 0 4px;
}
.quiz-form__success-icon { font-size: 2.2rem; margin-block-end: 8px; }
.quiz-form__success p {
  font-size: .9rem;
  color: var(--c-ink);
  line-height: 1.5;
}

.quiz-result__restart {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-ink-mute);
  font-size: .82rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color .2s;
}
.quiz-result__restart:hover { color: var(--c-clay); }

/* Mobile */
@media (max-width: 480px) {
  .quiz-step__opts {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .quiz-opt {
    padding: 12px 6px;
  }
  .quiz-opt__icon { font-size: 1.4rem; }
  .quiz-result__cta { flex-direction: column; }
}