/* Auto-extracted from page.tsx files. See src/sections/* for the React components. */


/* ============================================================
   PAGE: home  (extracted from src/app/page.tsx)
   ============================================================ */
body { background: var(--by-sand); }

  /* ===== HERO (cinematic full-screen video) ===== */
  .hero-video { position: relative; min-height: 100vh; width: 100%; overflow: hidden; background: var(--by-ink); color: #fff; isolation: isolate; }
  .hero-video .video-fallback { position: absolute; inset: 0; z-index: 0;
    background:
      radial-gradient(80% 60% at 70% 20%, rgba(229,156,244,0.22), transparent 60%),
      radial-gradient(60% 50% at 30% 90%, rgba(225,228,166,0.18), transparent 60%),
      linear-gradient(160deg, #361F44 0%, #151515 50%, #4A4B30 100%);
  }
  .hero-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
  .hero-video .ovl { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
  .ovl-dark   { background: rgba(0,0,0,0.28); }
  .ovl-brand  { background: linear-gradient(135deg, rgba(185,112,208,0.18) 0%, rgba(175,177,113,0.10) 50%, rgba(21,21,21,0.45) 100%); }
  .ovl-bottom { background: linear-gradient(to top, rgba(21,21,21,0.82) 0%, rgba(21,21,21,0.40) 30%, transparent 62%); }
  .ovl-grain  { background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px); background-size: 3px 3px; mix-blend-mode: overlay; opacity: 0.7; }

  .hero-content { position: relative; z-index: 3; max-width: 1280px; margin: 0 auto; padding: 160px 32px 200px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
  .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 9px 18px; border-radius: var(--r-pill);
    background: rgba(255,255,255,0.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22); font-weight: 600; font-size: 13px; color: #fff; }
  .hero-eyebrow .en { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 14px; letter-spacing: -0.02em; }
  .hero-eyebrow .en span { color: var(--by-purple-hi); }
  .hero-eyebrow .pip { width: 8px; height: 8px; border-radius: 50%; background: var(--by-green-hi); box-shadow: 0 0 0 4px rgba(225,228,166,0.25); }

  .hero-title { font-family: var(--font-ar-display); font-weight: 900; font-size: clamp(44px, 7vw, 108px); line-height: 1.05; letter-spacing: -0.012em; color: #fff; margin: 22px 0 24px; max-width: 18ch; text-wrap: pretty; text-shadow: 0 4px 28px rgba(0,0,0,0.35); }
  .hero-title .accent { color: var(--by-purple-hi); position: relative; display: inline-block; }
  .hero-title .accent::after { content: ""; position: absolute; right: 0; left: 0; bottom: -2px; height: 10px; background: var(--by-green-hi); opacity: 0.35; border-radius: 8px; z-index: -1; }
  .hero-sub { font-size: clamp(16px, 1.5vw, 21px); line-height: 1.85; color: rgba(255,255,255,0.92); max-width: 56ch; margin: 0 0 36px; text-shadow: 0 2px 16px rgba(0,0,0,0.4); }
  .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
  .hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
  .hero-badges .b { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--r-pill);
    background: rgba(255,255,255,0.10); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); font-weight: 600; font-size: 13.5px; color: #fff;
    animation: float-soft 4.5s ease-in-out infinite; }
  .hero-badges .b:nth-child(2) { animation-delay: .4s; }
  .hero-badges .b:nth-child(3) { animation-delay: .8s; }
  .hero-badges .b:nth-child(4) { animation-delay: 1.2s; }
  .hero-badges .b:nth-child(5) { animation-delay: 1.6s; }
  .hero-badges .b i { width: 14px; height: 14px; color: var(--by-green-hi); }
  .hero-badges .b:nth-child(2n) i { color: var(--by-purple-hi); }

  .hero-strip-wrap { position: absolute; left: 0; right: 0; bottom: 32px; z-index: 3; padding: 0 32px; pointer-events: none; }
  .hero-strip { pointer-events: auto; max-width: 1280px; margin: 0 auto; background: rgba(255,255,255,0.95);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.6);
    border-radius: var(--r-pill); padding: 8px; display: grid; grid-template-columns: 1fr 1fr 1fr auto;
    align-items: center; box-shadow: 0 22px 60px -16px rgba(21,21,21,0.45); }
  .hero-strip .seg { padding: 10px 22px; border-inline-end: 1px dashed var(--border-strong); cursor: pointer; transition: background var(--t-base); border-radius: var(--r-pill); position: relative; }
  .hero-strip .seg:last-of-type { border-inline-end: none; }
  .hero-strip .seg:hover { background: var(--sand-50); }
  .hero-strip .seg.is-open { background: var(--sand-50); }
  .hero-strip .seg .lab { display: block; font-size: 11px; letter-spacing: 0.1em; font-weight: 700; color: var(--fg-subtle); text-transform: uppercase; }
  .hero-strip .seg .v { font-family: var(--font-ar-display); font-weight: 700; font-size: 15.5px; color: var(--by-ink); margin-top: 4px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .hero-strip .seg .v .txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hero-strip .seg .v .chev { width: 14px; height: 14px; color: var(--fg-subtle); stroke-width: 2.2; transition: transform var(--t-base); flex: 0 0 14px; }
  .hero-strip .seg.is-open .v .chev { transform: rotate(180deg); color: var(--by-purple); }
  .hero-strip .seg.has-value .v .txt { color: var(--by-purple); }
  .hero-strip .go { background: var(--by-purple); color: #fff; border: none; border-radius: var(--r-pill); padding: 16px 24px;
    font-family: var(--font-ar-sans); font-weight: 700; font-size: 15px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--sh-purple);
    transition: transform var(--t-base) var(--ease-out-quart), background var(--t-base); }
  .hero-strip .go:hover { background: var(--purple-600); transform: translateY(-1px); }

  /* Hero-strip popover dropdown — opens UPWARD (strip is at bottom of hero) */
  .hero-pop { position: absolute; bottom: calc(100% + 14px); right: 0; min-width: 260px; max-width: 320px;
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: 0 -24px 60px -12px rgba(21,21,21,0.32), 0 8px 24px -8px rgba(21,21,21,0.12);
    padding: 8px;
    z-index: 20; display: none; flex-direction: column; gap: 2px;
    transform-origin: bottom right; animation: hero-pop-in 0.22s var(--ease-out-quart); }
  .hero-strip .seg.is-open .hero-pop { display: flex; }
  @keyframes hero-pop-in { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
  /* little caret pointing down to the seg */
  .hero-pop::after { content: ""; position: absolute; bottom: -7px; right: 32px;
    width: 14px; height: 14px; background: #fff; border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border); transform: rotate(45deg); }
  .hero-pop button { background: transparent; border: none; padding: 11px 14px; border-radius: var(--r-md);
    text-align: start; font-family: var(--font-ar-sans); font-weight: 600; font-size: 14.5px; color: var(--by-ink);
    cursor: pointer; display: flex; align-items: flex-start; gap: 10px; transition: background var(--t-fast); width: 100%; }
  .hero-pop button:hover { background: var(--purple-100); color: var(--by-purple); }
  .hero-pop button.is-selected { background: var(--by-purple); color: #fff; }
  .hero-pop button.is-selected:hover { background: var(--purple-600); color: #fff; }
  .hero-pop button .ic { width: 18px; height: 18px; flex: 0 0 18px; color: var(--by-purple); margin-top: 2px; }
  .hero-pop button.is-selected .ic { color: #fff; }
  .hero-pop button > span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; }
  .hero-pop button .meta { display: block; font-size: 11.5px; font-weight: 500; color: var(--fg-subtle); margin-top: 2px; }
  .hero-pop button.is-selected .meta { color: rgba(255,255,255,0.85); }

  .hero-scroll { position: absolute; bottom: 110px; left: 32px; z-index: 3; color: rgba(255,255,255,0.8);
    font-family: "Bricolage Grotesque", sans-serif; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    writing-mode: vertical-rl; display: flex; align-items: center; gap: 12px; }
  .hero-scroll .line { width: 1px; height: 56px; background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent); }

  /* ===== INTRO ===== */
  .intro { padding: 110px 0 80px; background: var(--by-sand); position: relative; }
  .intro .grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
  .intro h2 { font-family: var(--font-ar-display); font-weight: 800; font-size: clamp(34px, 4vw, 56px); line-height: 1.15; color: var(--by-ink); margin: 14px 0 0; text-wrap: pretty; }
  .intro h2 em { font-style: normal; color: var(--by-purple); }
  .intro .copy { font-size: 18px; line-height: 1.95; color: var(--fg-muted); }
  .intro .copy p + p { margin-top: 16px; }
  .intro .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
  .intro .stats .s { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px 16px; box-shadow: var(--sh-xs); }
  .intro .stats .n { font-family: var(--font-ar-display); font-weight: 800; font-size: 28px; color: var(--by-ink); }
  .intro .stats .n em { font-style: normal; color: var(--by-purple); }
  .intro .stats .s:nth-child(2) .n em { color: var(--green-700); }
  .intro .stats .lb { font-size: 12.5px; color: var(--fg-subtle); margin-top: 4px; }

  /* ===== SERVICES ===== */
  .services { padding: 80px 0; }
  .services .head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 32px; gap: 24px; }
  .services .head .right { display: flex; align-items: center; gap: 14px; }
  .services .head .right a { font-weight: 700; font-size: 14px; color: var(--by-ink); display: inline-flex; align-items: center; gap: 6px; }
  .services .head .right a:hover { color: var(--by-purple); }

  .svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .svc { position: relative; background: #fff; border-radius: var(--r-card); overflow: hidden;
    border: 1px solid var(--border); box-shadow: var(--sh-sm);
    transition: transform var(--t-slow) var(--ease-out-quart), box-shadow var(--t-slow);
    text-decoration: none; color: inherit; display: flex; flex-direction: column; min-height: 380px; }
  .svc:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
  .svc .visual { height: 180px; position: relative; overflow: hidden; }
  .svc .visual::after { content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 3px 3px; mix-blend-mode: overlay; }
  .svc .visual::before { content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(21,21,21,0.55) 100%); }
  .svc.events .visual    { background: linear-gradient(155deg, #B970D0 0%, #57306A 70%, #151515 100%); }
  .svc.religious .visual { background: linear-gradient(155deg, #AFB171 0%, #4A4B30 70%, #151515 100%); }
  .svc.umrah .visual     { background: linear-gradient(155deg, #E1E4A6 0%, #8E905B 60%, #2A2B1B 100%); }
  .svc.tourism .visual   { background: linear-gradient(155deg, #D5BB97 0%, #645541 70%, #151515 100%); }
  .svc .label { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,0.95); color: var(--by-ink);
    font-weight: 700; font-size: 11px; letter-spacing: 0.12em; padding: 6px 12px; border-radius: var(--r-pill); }
  .svc .ico { position: absolute; right: 22px; bottom: 22px; width: 56px; height: 56px; border-radius: 50%;
    background: rgba(255,255,255,0.95); color: var(--by-ink);
    display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); }
  .svc .ico i { width: 28px; height: 28px; stroke-width: 1.6; }
  .svc.events .ico    { color: var(--by-purple); }
  .svc.religious .ico { color: var(--green-700); }
  .svc.umrah .ico     { color: var(--green-700); }
  .svc.tourism .ico   { color: var(--sand-700); }
  .svc .body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
  .svc .body h3 { font-family: var(--font-ar-display); font-weight: 800; font-size: 22px; color: var(--by-ink); margin: 0; }
  .svc .body p { font-size: 14.5px; color: var(--fg-muted); line-height: 1.75; margin: 0; flex: 1; }
  .svc .more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13.5px; color: var(--by-ink); margin-top: 8px; }
  .svc:hover .more { color: var(--by-purple); }
  .svc.religious:hover .more, .svc.umrah:hover .more { color: var(--green-700); }
  .svc.tourism:hover .more { color: var(--sand-700); }

  /* ===== WHY US ===== */
  .whyus { padding: 80px 0; background: linear-gradient(180deg, var(--by-sand) 0%, #FBF8F2 100%); }
  .whyus .head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
  .whyus .head h2 { text-align: center; }
  .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .why-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-card); padding: 26px;
    box-shadow: var(--sh-sm); position: relative; transition: transform var(--t-base); }
  .why-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
  .why-card .ic { width: 54px; height: 54px; border-radius: var(--r-md); background: var(--purple-100);
    color: var(--by-purple); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
  .why-card .ic i { width: 26px; height: 26px; stroke-width: 1.6; }
  .why-card:nth-child(2n) .ic { background: var(--green-100); color: var(--green-700); }
  .why-card:nth-child(3n) .ic { background: var(--sand-200); color: var(--sand-700); }
  .why-card h3 { font-family: var(--font-ar-display); font-weight: 800; font-size: 20px; color: var(--by-ink); margin: 0 0 8px; }
  .why-card p { font-size: 14.5px; color: var(--fg-muted); line-height: 1.75; margin: 0; }
  .why-card .num { position: absolute; top: 18px; left: 22px; font-family: "JetBrains Mono", monospace;
    font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: var(--fg-subtle); }

  /* ===== GALLERY ===== */
  .gallery-sec { position: relative; padding: 120px 0 96px; overflow: hidden;
    background: radial-gradient(60% 50% at 80% 10%, rgba(229,156,244,0.10), transparent 70%),
                radial-gradient(50% 40% at 10% 90%, rgba(225,228,166,0.16), transparent 70%), var(--by-sand); }
  .gallery-sec .pattern { position: absolute; inset: 0;
    background-image: url("/assets/pattern-dunes-dots.svg"); background-size: 420px;
    background-repeat: repeat; opacity: 0.10; pointer-events: none; }

  /* Polaroid composition */
  .gallery-sec .stamp-bg { position: absolute; top: 80px; left: -40px; width: 320px; height: 360px; z-index: 1; pointer-events: none; transform: rotate(-6deg); }
  .gallery-sec .stamp-bg .orbit { position: absolute; inset: 10px; border-radius: 50%;
    border: 1.5px dashed rgba(21,21,21,0.18); animation: orbit-spin 28s linear infinite; }
  .gallery-sec .stamp-bg .orbit::before, .gallery-sec .stamp-bg .orbit::after {
    content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%;
    background: var(--by-purple); top: -7px; left: 50%; transform: translateX(-50%);
    box-shadow: 0 0 0 4px rgba(185,112,208,0.22); }
  .gallery-sec .stamp-bg .orbit::after { background: var(--by-green); top: auto; bottom: -7px;
    box-shadow: 0 0 0 4px rgba(175,177,113,0.22); }
  @keyframes orbit-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
  .gallery-sec .stamp-bg .pol-stack { position: absolute; top: 50%; left: 50%; width: 170px; height: 200px; transform: translate(-50%, -50%); }
  .gallery-sec .stamp-bg .pol { position: absolute; inset: 0; background: #fff; border-radius: 6px;
    box-shadow: 0 14px 40px -10px rgba(21,21,21,0.35); padding: 8px 8px 26px;
    transform-origin: center bottom; display: flex; flex-direction: column; }
  .gallery-sec .stamp-bg .pol .photo { flex: 1; border-radius: 3px; position: relative; overflow: hidden; }
  .gallery-sec .stamp-bg .pol .photo::after { content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px);
    background-size: 3px 3px; mix-blend-mode: overlay; }
  .gallery-sec .stamp-bg .pol .cap { font-family: var(--font-ar-display); font-weight: 800; font-size: 9px;
    letter-spacing: 0.14em; color: var(--by-ink); text-align: center; margin-top: 4px; text-transform: uppercase; }
  .gallery-sec .stamp-bg .pol-1 { transform: rotate(-14deg) translate(-22px, 8px); animation: pol-1 7s ease-in-out infinite; }
  .gallery-sec .stamp-bg .pol-1 .photo { background: linear-gradient(160deg, #B970D0 0%, #57306A 60%, #151515 100%); }
  .gallery-sec .stamp-bg .pol-2 { transform: rotate(2deg) translate(0, 0); animation: pol-2 7s ease-in-out infinite; z-index: 2; }
  .gallery-sec .stamp-bg .pol-2 .photo { background: linear-gradient(160deg, #E1E4A6 0%, #AFB171 40%, #4A4B30 100%); }
  .gallery-sec .stamp-bg .pol-3 { transform: rotate(16deg) translate(24px, 6px); animation: pol-3 7s ease-in-out infinite; }
  .gallery-sec .stamp-bg .pol-3 .photo { background: linear-gradient(160deg, #D5BB97 0%, #645541 60%, #151515 100%); }
  @keyframes pol-1 { 0%, 100% { transform: rotate(-14deg) translate(-22px, 8px); } 50% { transform: rotate(-12deg) translate(-26px, 2px); } }
  @keyframes pol-2 { 0%, 100% { transform: rotate(2deg) translate(0, 0); } 50% { transform: rotate(4deg) translate(0, -4px); } }
  @keyframes pol-3 { 0%, 100% { transform: rotate(16deg) translate(24px, 6px); } 50% { transform: rotate(18deg) translate(28px, 0); } }
  .gallery-sec .stamp-bg .corner-stamp { position: absolute; top: 12px; right: 22px;
    background: var(--by-ink); color: var(--by-purple-hi);
    font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 10.5px;
    letter-spacing: 0.18em; padding: 6px 12px; border-radius: var(--r-pill);
    transform: rotate(8deg); box-shadow: var(--sh-md); text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 6px; z-index: 3; }
  .gallery-sec .stamp-bg .corner-stamp .dot { width: 5px; height: 5px; border-radius: 50%;
    background: var(--by-green-hi); animation: pulse 1.6s ease-in-out infinite; }
  @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: 0.5; } }

  .gallery-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; position: relative; z-index: 2; }
  .gallery-head .left { max-width: 760px; }
  .gallery-head .label-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
  .gallery-head .index-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill);
    background: var(--by-ink); color: #fff; font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 12px; letter-spacing: 0.16em; }
  .gallery-head .index-pill .num { color: var(--by-purple-hi); }
  .gallery-head .index-pill .total { color: rgba(255,255,255,0.5); }
  .gallery-head h2 { font-family: var(--font-ar-display); font-weight: 800; font-size: clamp(32px, 4vw, 60px);
    line-height: 1.1; color: var(--by-ink); margin: 8px 0 0; text-wrap: pretty; letter-spacing: -0.005em; }
  .gallery-head h2 em { font-style: normal; color: var(--by-purple); position: relative; display: inline-block; }
  .gallery-head h2 em::after { content: ""; position: absolute; left: -6px; right: -6px; bottom: 6px;
    height: 10px; background: var(--by-green-hi); opacity: 0.55; border-radius: 6px; z-index: -1; }
  .gallery-head .sub { margin-top: 14px; max-width: 56ch; font-size: 16.5px; color: var(--fg-muted); line-height: 1.75; }

  /* Bottom-centered nav */
  .gallery-nav-bottom { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; position: relative; z-index: 2; }
  .gal-btn { width: 56px; height: 56px; border-radius: 50%; border: none; background: var(--by-purple);
    color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: var(--sh-purple); transition: all var(--t-base) var(--ease-out-quart); }
  .gal-btn i { width: 22px; height: 22px; stroke-width: 1.8; }
  .gal-btn:hover { background: var(--purple-600); transform: translateY(-2px) scale(1.05);
    box-shadow: 0 18px 44px -10px rgba(185,112,208,0.65); }
  .gal-btn.gal-next { background: var(--by-green); color: var(--by-ink); box-shadow: var(--sh-green); }
  .gal-btn.gal-next:hover { background: var(--green-600); color: #fff;
    box-shadow: 0 18px 44px -10px rgba(175,177,113,0.65); }

  /* Swiper */
  .gal-swiper { width: 100%; padding: 30px 0 30px; overflow: visible; position: relative; z-index: 2; }
  .gal-swiper .swiper-slide { width: 380px; height: 520px; transition: opacity 0.6s var(--ease-out-quart); }
  .gal-swiper .swiper-slide:not(.swiper-slide-active) { opacity: 0.62; }
  .gal-swiper .swiper-slide-active { opacity: 1; }
  .gal-card { position: relative; width: 100%; height: 100%; border-radius: var(--r-card-lg); overflow: hidden;
    box-shadow: var(--sh-lg); cursor: pointer; color: #fff; isolation: isolate; --mx: 50%; --my: 50%; }
  .gal-card .img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1.1s var(--ease-out-quart); }
  .gal-card:hover .img { transform: scale(1.08); }
  .gal-card::before { content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px); background-size: 3px 3px;
    mix-blend-mode: overlay; opacity: 0.55; z-index: 1; pointer-events: none; }
  .gal-card::after { content: ""; position: absolute; inset: 0;
    background: radial-gradient(280px circle at var(--mx) var(--my), rgba(229,156,244,0.30) 0%, transparent 60%),
                linear-gradient(180deg, transparent 38%, rgba(21,21,21,0.82) 100%);
    z-index: 1; pointer-events: none; }
  .gal-card .cat { position: absolute; top: 18px; right: 18px; z-index: 2; background: rgba(255,255,255,0.95);
    color: var(--by-ink); font-family: var(--font-ar-display); font-weight: 800; font-size: 12px;
    padding: 7px 14px; border-radius: var(--r-pill); letter-spacing: 0.04em; box-shadow: var(--sh-md);
    transform: rotate(-3deg); display: inline-flex; align-items: center; gap: 7px; }
  .gal-card .cat .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--by-purple); }
  .gal-card.is-trip .cat .dot { background: var(--green-700); }
  .gal-card .num { position: absolute; top: 22px; left: 22px; z-index: 2;
    font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.22em;
    color: rgba(255,255,255,0.92); background: rgba(21,21,21,0.55); backdrop-filter: blur(8px);
    padding: 5px 10px; border-radius: var(--r-pill); }
  .gal-card .floor { position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 2; }
  .gal-card .floor .eb { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.22em; opacity: 0.9; text-transform: uppercase; }
  .gal-card .floor .ttl { font-family: var(--font-ar-display); font-weight: 800; font-size: 28px; line-height: 1.18; margin-top: 6px; text-wrap: pretty; }
  .gal-card .zoom-hint { position: absolute; bottom: 22px; right: 22px; z-index: 2;
    width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.95);
    color: var(--by-ink); display: inline-flex; align-items: center; justify-content: center;
    box-shadow: var(--sh-md); opacity: 0; transform: scale(0.7);
    transition: opacity var(--t-base), transform var(--t-base); }
  .gal-card .zoom-hint i { width: 20px; height: 20px; }
  .gal-card:hover .zoom-hint { opacity: 1; transform: scale(1); }

  /* Photo backgrounds (Picsum seeded) */
  .gal-bg-1 { background: linear-gradient(160deg,rgba(123,64,144,0.30),rgba(21,21,21,0.25)), url("https://picsum.photos/seed/backyard-riyadh-rooftop/900/1200"); background-size: cover; background-position: center; }
  .gal-bg-2 { background: linear-gradient(160deg,rgba(76,87,52,0.35),rgba(21,21,21,0.25)), url("https://picsum.photos/seed/backyard-alula-sunrise/900/1200"); background-size: cover; background-position: center; }
  .gal-bg-3 { background: linear-gradient(160deg,rgba(123,64,144,0.35),rgba(21,21,21,0.25)), url("https://picsum.photos/seed/backyard-diriyah-night/900/1200"); background-size: cover; background-position: center; }
  .gal-bg-4 { background: linear-gradient(160deg,rgba(74,64,52,0.3),rgba(21,21,21,0.2)), url("https://picsum.photos/seed/backyard-road-makkah/900/1200"); background-size: cover; background-position: center; }
  .gal-bg-5 { background: linear-gradient(160deg,rgba(74,75,48,0.3),rgba(21,21,21,0.2)), url("https://picsum.photos/seed/backyard-abha-mist/900/1200"); background-size: cover; background-position: center; }
  .gal-bg-6 { background: linear-gradient(160deg,rgba(123,64,144,0.35),rgba(21,21,21,0.25)), url("https://picsum.photos/seed/backyard-desert-night/900/1200"); background-size: cover; background-position: center; }
  .gal-bg-7 { background: linear-gradient(160deg,rgba(123,64,144,0.3),rgba(21,21,21,0.2)), url("https://picsum.photos/seed/backyard-jeddah-corniche/900/1200"); background-size: cover; background-position: center; }
  .gal-bg-8 { background: linear-gradient(160deg,rgba(108,110,69,0.3),rgba(21,21,21,0.2)), url("https://picsum.photos/seed/backyard-family/900/1200"); background-size: cover; background-position: center; }

  /* Marquee */
  .gallery-marquee { margin-top: 40px; overflow: hidden; padding: 12px 0;
    border-top: 1px dashed var(--border-strong); border-bottom: 1px dashed var(--border-strong);
    background: rgba(255,255,255,0.4); position: relative; }
  .marquee-track { display: flex; gap: 14px; width: max-content; animation: marquee-slide 38s linear infinite; }
  [dir="rtl"] .marquee-track { animation-name: marquee-slide-rtl; }
  @keyframes marquee-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @keyframes marquee-slide-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
  .gallery-marquee:hover .marquee-track { animation-play-state: paused; }
  .marq-chip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: var(--r-pill);
    background: #fff; border: 1px solid var(--border); font-weight: 600; font-size: 14.5px; color: var(--by-ink);
    white-space: nowrap; flex-shrink: 0; box-shadow: var(--sh-xs); transition: transform var(--t-base); }
  .marq-chip:hover { transform: translateY(-2px); border-color: var(--by-purple); }
  .marq-chip .sw { width: 10px; height: 10px; border-radius: 50%; background: var(--by-purple); }
  .marq-chip.green .sw { background: var(--by-green); }
  .marq-chip.beige .sw { background: var(--by-beige); }
  .marq-chip.ink   .sw { background: var(--by-ink); }

  .gallery-foot { display: flex; justify-content: center; align-items: center; margin-top: 22px; }
  .gallery-foot .pagination { display: inline-flex; align-items: center; gap: 8px; }
  .gallery-foot .pagination .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong);
    transition: width var(--t-base), background var(--t-base); cursor: pointer; }
  .gallery-foot .pagination .dot.is-active { background: var(--by-purple); width: 22px; border-radius: var(--r-pill); }

  /* ===== GLightbox — branded, no bottom whitespace ===== */
  .glightbox-open { overflow: hidden; }
  .goverlay { background: rgba(10, 8, 6, 0.96) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .glightbox-container { padding: 24px !important; }

  .glightbox-clean .gslide-inner-content { width: auto !important; max-width: min(1180px, 96vw) !important; }
  .glightbox-clean .ginner-container { width: auto !important; max-width: min(1180px, 96vw) !important; height: auto !important; position: relative; display: inline-block; font-size: 0; line-height: 0; vertical-align: top; }
  .glightbox-clean .gslide-media { vertical-align: top; display: inline-flex !important; flex-direction: column; align-items: center; box-shadow: 0 40px 100px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06); border-radius: 18px; overflow: hidden; background: var(--by-ink); position: relative; line-height: 0; }
  .glightbox-clean .gslide-image img { max-height: min(86vh, 1000px); max-width: min(1180px, 96vw); width: auto !important; height: auto !important; border-radius: 18px; display: block; }

  .glightbox-clean .gslide-description {
    position: absolute !important;
    left: 0; right: 0; bottom: 0;
    padding: 80px 36px 28px;
    background: linear-gradient(to top, rgba(10,8,6,0.92) 0%, rgba(10,8,6,0.7) 55%, rgba(10,8,6,0) 100%);
    border-radius: 0 0 18px 18px;
    max-width: 100% !important;
    width: 100% !important;
    pointer-events: none;
    z-index: 2;
    text-align: start;
  }
  .glightbox-clean .gdesc-inner { max-width: 100%; padding: 0; }
  .glightbox-clean .gslide-title {
    font-family: var(--font-ar-display);
    font-weight: 800;
    font-size: clamp(20px, 2.2vw, 28px);
    line-height: 1.3;
    color: #fff;
    margin: 0 0 8px;
    text-wrap: pretty;
  }
  .glightbox-clean .gslide-desc {
    font-family: "JetBrains Mono", monospace;
    color: rgba(255,255,255,0.72);
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0;
    max-width: 60ch;
    direction: ltr;
    text-align: right;
  }

  /* Nav buttons — branded round */
  .gprev, .gnext, .gclose {
    background: rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.16) !important;
    width: 52px !important; height: 52px !important;
    border-radius: 50% !important;
    top: 50% !important; transform: translateY(-50%) !important;
    transition: background 220ms ease, border-color 220ms ease, transform 220ms ease !important;
    margin: 0 !important;
  }
  .gprev { left: 28px !important; }
  .gnext { right: 28px !important; }
  .gprev:hover, .gnext:hover { background: var(--by-purple) !important; border-color: var(--by-purple) !important; transform: translateY(-50%) scale(1.06) !important; }
  .gclose {
    top: 24px !important; right: 24px !important; left: auto !important;
    transform: none !important;
    width: 46px !important; height: 46px !important;
  }
  .gclose:hover { background: var(--by-purple) !important; border-color: var(--by-purple) !important; transform: rotate(90deg) !important; }
  .gprev svg, .gnext svg, .gclose svg { width: 20px !important; height: 20px !important; }
  /* In RTL, swap visual direction so left arrow goes prev (next-in-RTL) feels natural */
  [dir="rtl"] .gprev svg, [dir="rtl"] .gnext svg { transform: scaleX(-1); }

  /* Slide counter chip */
  .glightbox-clean .gnumber, .glightbox-container .gcounter {
    top: 26px !important; left: 26px !important; right: auto !important;
    font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 12px; letter-spacing: 0.18em;
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.08); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.14);
    padding: 7px 14px; border-radius: 999px;
    text-transform: uppercase;
  }

  @media (max-width: 720px) {
    .glightbox-container { padding: 12px !important; }
    .glightbox-clean .gslide-description { padding: 60px 20px 18px; }
    .gprev { left: 12px !important; }
    .gnext { right: 12px !important; }
    .gprev, .gnext { width: 44px !important; height: 44px !important; }
    .gclose { top: 14px !important; right: 14px !important; width: 40px !important; height: 40px !important; }
    .glightbox-container .gcounter { top: 16px !important; left: 16px !important; font-size: 11px; padding: 6px 11px; }
  }

  .cta-wrap { padding: 32px 0 0; }

  /* ===== TESTIMONIALS ===== */
  .testimonials { position: relative; padding: 110px 0 96px; overflow: hidden;
    background: linear-gradient(180deg, var(--by-sand) 0%, #FBF8F2 60%, var(--by-sand) 100%); }
  .testimonials .pattern { position: absolute; inset: 0; opacity: 0.07; pointer-events: none;
    background-image: radial-gradient(var(--by-ink) 1.2px, transparent 1.2px); background-size: 22px 22px; }
  .testimonials .blob-a { position: absolute; top: 80px; left: -120px; width: 360px; height: 360px;
    border-radius: 50%; background: radial-gradient(circle, rgba(185,112,208,0.20), transparent 70%);
    filter: blur(20px); pointer-events: none; }
  .testimonials .blob-b { position: absolute; bottom: 40px; right: -100px; width: 320px; height: 320px;
    border-radius: 50%; background: radial-gradient(circle, rgba(175,177,113,0.22), transparent 70%);
    filter: blur(20px); pointer-events: none; }

  .testimonials .t-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; position: relative; z-index: 2; }
  .testimonials .t-head .left { max-width: 720px; }
  .testimonials .t-head .label-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
  .testimonials .rating-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px;
    border-radius: var(--r-pill); background: var(--by-ink); color: #fff;
    font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 12px; letter-spacing: 0.1em; }
  .testimonials .rating-pill .stars { color: var(--by-purple-hi); letter-spacing: 0; font-size: 13px; }
  .testimonials .rating-pill .sep { opacity: 0.4; }
  .testimonials .t-head h2 { font-family: var(--font-ar-display); font-weight: 800;
    font-size: clamp(32px, 4vw, 60px); line-height: 1.1; color: var(--by-ink);
    margin: 6px 0 0; text-wrap: pretty; letter-spacing: -0.005em; }
  .testimonials .t-head h2 em { font-style: normal; color: var(--by-purple); position: relative; display: inline-block; }
  .testimonials .t-head h2 em::after { content: ""; position: absolute; left: -6px; right: -6px; bottom: 6px;
    height: 10px; background: var(--by-green-hi); opacity: 0.55; border-radius: 6px; z-index: -1; }
  .testimonials .t-head .sub { margin-top: 14px; max-width: 56ch; font-size: 16.5px; color: var(--fg-muted); line-height: 1.75; }

  .t-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: auto auto;
    gap: 18px; position: relative; z-index: 2; }
  .t-card { position: relative; background: #fff; border: 1px solid var(--border);
    border-radius: var(--r-card); padding: 28px 26px 24px; box-shadow: var(--sh-sm);
    display: flex; flex-direction: column; transition: transform var(--t-base) var(--ease-out-quart), box-shadow var(--t-base); }
  .t-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
  .t-card .qmark { position: absolute; top: 18px; left: 22px; font-family: var(--font-ar-display);
    font-weight: 800; font-size: 84px; line-height: 1; color: var(--purple-100);
    font-style: italic; pointer-events: none; z-index: 0; }
  .t-card .stars { display: inline-flex; gap: 2px; color: var(--by-purple); font-size: 14px;
    letter-spacing: 1px; margin-bottom: 12px; position: relative; z-index: 1; }
  .t-card .quote { font-family: var(--font-ar-sans); font-weight: 500; font-size: 16px;
    line-height: 1.85; color: var(--by-ink); margin: 0 0 20px; position: relative; z-index: 1; flex: 1; text-wrap: pretty; }
  .t-card .author { display: flex; align-items: center; gap: 12px; padding-top: 18px;
    border-top: 1px dashed var(--border-strong); position: relative; z-index: 1; }
  .t-card .avatar { width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, var(--by-purple), var(--purple-700));
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-ar-display); font-weight: 800; font-size: 18px; flex-shrink: 0; }
  .t-card .author .meta { display: flex; flex-direction: column; line-height: 1.3; flex: 1; min-width: 0; }
  .t-card .author .name { font-family: var(--font-ar-display); font-weight: 800; font-size: 15.5px; color: var(--by-ink); }
  .t-card .author .sub { font-family: "JetBrains Mono", monospace; font-weight: 600; font-size: 10.5px;
    letter-spacing: 0.1em; color: var(--fg-subtle); margin-top: 3px; text-transform: uppercase; }
  .t-card .stamp { position: absolute; top: -10px; right: 20px; padding: 6px 14px;
    background: var(--by-ink); color: #fff; font-family: var(--font-ar-display); font-weight: 800;
    font-size: 11.5px; letter-spacing: 0.06em; border-radius: var(--r-pill);
    transform: rotate(-2deg); box-shadow: var(--sh-md); z-index: 2;
    display: inline-flex; align-items: center; gap: 6px; }
  .t-card .stamp .d { width: 6px; height: 6px; border-radius: 50%; background: var(--by-purple-hi); }

  /* Featured (large) card */
  .t-card.featured { grid-row: span 2; background: var(--by-ink); color: #fff;
    border-color: var(--by-ink); padding: 36px 32px 30px; overflow: hidden; }
  .t-card.featured::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(80% 60% at 100% 0%, rgba(185,112,208,0.25), transparent 60%),
                radial-gradient(60% 50% at 0% 100%, rgba(175,177,113,0.18), transparent 60%); }
  .t-card.featured .qmark { color: rgba(229,156,244,0.18); font-size: 140px; top: 24px; left: 28px; }
  .t-card.featured .stars { color: var(--by-purple-hi); font-size: 16px; margin-bottom: 18px; }
  .t-card.featured .quote { font-family: var(--font-ar-display); font-weight: 700;
    font-size: clamp(20px, 1.7vw, 26px); line-height: 1.55; color: #fff; margin-bottom: 28px; letter-spacing: -0.005em; }
  .t-card.featured .author { border-top-color: rgba(255,255,255,0.18); padding-top: 22px; }
  .t-card.featured .avatar { width: 52px; height: 52px; font-size: 20px;
    background: linear-gradient(135deg, var(--by-purple-hi), var(--by-purple)); color: var(--by-ink); }
  .t-card.featured .author .name { color: #fff; font-size: 17px; }
  .t-card.featured .author .sub { color: rgba(255,255,255,0.6); }
  .t-card.featured .stamp { background: var(--by-purple); color: #fff; transform: rotate(3deg); }
  .t-card.featured .stamp .d { background: var(--by-green-hi); }
  .t-card.featured .trip-strip { display: inline-flex; align-items: center; gap: 10px;
    margin-top: 18px; padding: 8px 14px; border-radius: var(--r-pill);
    background: rgba(255,255,255,0.10); backdrop-filter: blur(8px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
    font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 11.5px;
    letter-spacing: 0.14em; text-transform: uppercase; align-self: flex-start; }
  .t-card.featured .trip-strip i { width: 14px; height: 14px; color: var(--by-green-hi); }

  /* Card accent variants */
  .t-card.green .avatar { background: linear-gradient(135deg, var(--by-green), var(--green-700)); color: var(--by-ink); }
  .t-card.green .stamp { background: var(--green-700); }
  .t-card.green .stamp .d { background: var(--by-green-hi); }
  .t-card.green .stars { color: var(--green-700); }
  .t-card.green .qmark { color: var(--green-100); }
  .t-card.sand .avatar { background: linear-gradient(135deg, var(--by-beige), var(--sand-700)); color: var(--by-ink); }
  .t-card.sand .stamp { background: var(--sand-700); }
  .t-card.sand .stamp .d { background: var(--by-beige); }
  .t-card.sand .qmark { color: var(--sand-200); }

  /* Stats strip */
  .t-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 32px;
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-card);
    overflow: hidden; box-shadow: var(--sh-sm); position: relative; z-index: 2; }
  .t-stats .cell { padding: 24px 20px; border-inline-end: 1px dashed var(--border-strong); text-align: center; }
  .t-stats .cell:last-child { border-inline-end: none; }
  .t-stats .n { font-family: var(--font-ar-display); font-weight: 800; font-size: clamp(28px, 3vw, 38px);
    color: var(--by-ink); line-height: 1; letter-spacing: -0.01em; }
  .t-stats .n em { font-style: normal; color: var(--by-purple); }
  .t-stats .cell:nth-child(2) .n em { color: var(--green-700); }
  .t-stats .cell:nth-child(3) .n em { color: var(--by-purple); }
  .t-stats .cell:nth-child(4) .n em { color: var(--green-700); }
  .t-stats .lb { font-family: "JetBrains Mono", monospace; font-weight: 600; font-size: 11px;
    letter-spacing: 0.14em; color: var(--fg-subtle); margin-top: 8px; text-transform: uppercase; }

  @media (max-width: 1080px) {
    .t-grid { grid-template-columns: 1fr 1fr; }
    .t-card.featured { grid-row: span 1; grid-column: span 2; }
    .t-stats { grid-template-columns: repeat(2, 1fr); }
    .t-stats .cell:nth-child(2) { border-inline-end: none; }
    .t-stats .cell:nth-child(3), .t-stats .cell:nth-child(4) { border-top: 1px dashed var(--border-strong); }
  }
  @media (max-width: 640px) {
    .t-grid { grid-template-columns: 1fr; }
    .t-card.featured { grid-column: span 1; }
    .t-stats { grid-template-columns: 1fr; }
    .t-stats .cell { border-inline-end: none; border-top: 1px dashed var(--border-strong); }
    .t-stats .cell:first-child { border-top: none; }
  }

  @media (max-width: 1080px) {
    .svc-grid { grid-template-columns: repeat(2, 1fr); }
    .why-grid { grid-template-columns: 1fr; }
    .intro .grid { grid-template-columns: 1fr; gap: 32px; }
    .hero-strip { grid-template-columns: 1fr 1fr; gap: 6px; }
    .hero-strip .seg { border-inline-end: none; }
    .hero-strip .go { grid-column: span 2; width: 100%; justify-content: center; }
    .hero-scroll { display: none; }
  }
  @media (max-width: 720px) {
    .gal-swiper .swiper-slide { width: 280px; height: 380px; }
    .gal-card .floor .ttl { font-size: 22px; }
    .gallery-sec .stamp-bg { display: none; }
  }
  @media (max-width: 640px) {
    .hero-content { padding: 130px 24px 220px; text-align: start; }
    .hero-title { font-size: clamp(36px, 9vw, 56px); }
    .hero-sub { font-size: 16px; }
    .hero-ctas { flex-direction: column; align-items: stretch; }
    .hero-ctas .btn { justify-content: center; }
    .hero-strip { grid-template-columns: 1fr; padding: 12px; border-radius: var(--r-lg); }
    .hero-strip .seg { padding: 12px 16px; }
    .svc-grid { grid-template-columns: 1fr; }
  }

/* ============================================================
   PAGE: about  (extracted from src/app/about/page.tsx)
   ============================================================ */
body { background: var(--by-sand); }
  .section-title { text-align: center; max-width: 760px; margin: 0 auto 48px; }
  .section-title h2 { text-align: center; }
  .section-title .lede { margin: 14px auto 0; }

  .about-hero {
    position: relative;
    padding: 150px 0 80px;
    background:
      radial-gradient(50% 60% at 80% 20%, rgba(185,112,208,0.16), transparent 70%),
      radial-gradient(50% 50% at 20% 80%, rgba(175,177,113,0.16), transparent 70%),
      var(--by-sand);
    overflow: hidden;
  }
  .about-hero .grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 56px;
    align-items: center;
  }
  .about-hero h1 {
    font-family: var(--font-ar-display);
    font-weight: 800;
    font-size: clamp(40px, 5.4vw, 72px);
    line-height: 1.12;
    margin: 14px 0 18px;
    color: var(--by-ink);
    max-width: 14ch;
    text-wrap: pretty;
  }
  .about-hero h1 em { font-style: normal; color: var(--by-purple); }

  /* Side card — image as CSS background */
  .about-hero .stage {
    position: relative;
    border-radius: var(--r-card-lg);
    overflow: hidden;
    box-shadow: var(--sh-xl);
    aspect-ratio: 4 / 5;
    width: 100%;
    max-width: 460px;
    justify-self: end;
    background-image: url("/assets/camel-branded.png");
    background-size: cover;
    background-position: 62% center;
    background-repeat: no-repeat;
    background-color: #151515;
  }
  /* Overlay: dual-color brand wash + bottom fade */
  .about-hero .stage::before {
    content: "";
    position: absolute; inset: 0;
    background:
      linear-gradient(135deg, rgba(185,112,208,0.22) 0%, rgba(0,0,0,0) 45%, rgba(175,177,113,0.22) 100%),
      linear-gradient(180deg, transparent 40%, rgba(21,21,21,0.45) 78%, rgba(21,21,21,0.78) 100%);
    pointer-events: none;
  }
  /* subtle grain */
  .about-hero .stage::after {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 3px 3px;
    mix-blend-mode: overlay;
    opacity: 0.6;
    pointer-events: none;
  }

  .about-hero .stage .badge {
    position: absolute;
    top: 18px; right: 18px;
    background: rgba(255,255,255,0.96);
    color: var(--by-ink);
    font-family: var(--font-ar-display);
    font-weight: 800; font-size: 12px;
    padding: 7px 14px;
    border-radius: var(--r-pill);
    box-shadow: var(--sh-md);
    transform: rotate(-3deg);
    z-index: 2;
    display: inline-flex; align-items: center; gap: 7px;
  }
  .about-hero .stage .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--by-purple); }
  .about-hero .stage .floor {
    position: absolute;
    left: 22px; right: 22px; bottom: 22px;
    color: #fff; z-index: 2;
  }
  .about-hero .stage .floor .eb {
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px; letter-spacing: 0.22em;
    opacity: 0.92;
    text-transform: uppercase;
  }
  .about-hero .stage .floor .ttl {
    font-family: var(--font-ar-display);
    font-weight: 800;
    font-size: 22px;
    line-height: 1.2;
    margin-top: 6px;
    text-wrap: pretty;
  }

  @media (max-width: 960px) {
    .about-hero .grid { grid-template-columns: 1fr; gap: 40px; }
    .about-hero .stage { max-width: 100%; aspect-ratio: 3 / 4; margin: 0; }
  }

  .vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .vm {
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--r-card-lg);
    padding: 40px;
    box-shadow: var(--sh-sm);
    position: relative; overflow: hidden;
  }
  .vm.vision { border-top: 3px solid var(--by-purple); }
  .vm.mission { border-top: 3px solid var(--by-green); }
  .vm .ic {
    width: 56px; height: 56px;
    border-radius: var(--r-md);
    background: var(--purple-100); color: var(--by-purple);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
  }
  .vm.mission .ic { background: var(--green-100); color: var(--green-700); }
  .vm .ic i { width: 28px; height: 28px; }
  .vm h3 { font-family: var(--font-ar-display); font-weight: 800; font-size: 26px; color: var(--by-ink); margin: 0 0 12px; }
  .vm p { font-size: 17px; line-height: 1.85; color: var(--fg-muted); margin: 0; }

  .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .value {
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--r-card); padding: 26px; box-shadow: var(--sh-xs);
    transition: transform var(--t-base);
  }
  .value:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
  .value .num {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
    color: var(--by-purple); margin-bottom: 10px;
  }
  .value h3 { font-family: var(--font-ar-display); font-weight: 800; font-size: 22px; color: var(--by-ink); margin: 0 0 6px; }
  .value p { font-size: 14.5px; color: var(--fg-muted); line-height: 1.7; margin: 0; }

  @media (max-width: 960px) {
    .vm-grid, .values-grid { grid-template-columns: 1fr; }
  }

/* ============================================================
   PAGE: contact  (extracted from src/app/contact/page.tsx)
   ============================================================ */
body { background: var(--by-sand); }
  .section-title { text-align: center; max-width: 760px; margin: 0 auto 48px; }
  .section-title h2 { text-align: center; }
  .section-title .lede { margin: 14px auto 0; }

  .contact-hero {
    position: relative;
    padding: 150px 0 70px;
    background:
      radial-gradient(45% 60% at 85% 30%, rgba(229,156,244,0.22), transparent 70%),
      radial-gradient(45% 50% at 15% 90%, rgba(225,228,166,0.28), transparent 70%),
      var(--by-sand);
    overflow: hidden;
  }
  .contact-hero h1 { font-family: var(--font-ar-display); font-weight: 800;
    font-size: clamp(40px, 5.6vw, 76px); line-height: 1.1; margin: 14px 0 18px;
    color: var(--by-ink); max-width: 16ch; }
  .contact-hero h1 em { font-style: normal; color: var(--by-purple); }
  .contact-hero .lede { max-width: 56ch; font-size: 19px; }

  .contact-grid {
    display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px;
    align-items: start;
  }

  /* form */
  .form-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-card-lg);
    padding: 40px;
    box-shadow: var(--sh-md);
  }
  .form-card .head { margin-bottom: 24px; }
  .form-card h2 { font-family: var(--font-ar-display); font-weight: 800;
    font-size: 30px; color: var(--by-ink); margin: 10px 0 6px; }
  .form-card .head p { font-size: 14.5px; color: var(--fg-muted); margin: 0; }

  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .field { margin-bottom: 14px; display: block; }
  .field label {
    display: block;
    font-size: 13px; font-weight: 700;
    color: var(--by-ink);
    margin-bottom: 6px;
  }
  .field label .req { color: var(--by-purple); margin-inline-start: 4px; }
  .field input, .field select, .field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    background: #FBF8F2;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--by-ink);
    transition: border-color var(--t-base), background var(--t-base);
  }
  .field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--by-purple);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(185,112,208,0.14);
  }
  .field textarea { resize: vertical; min-height: 120px; }
  .field-actions {
    display: flex; gap: 12px; align-items: center; margin-top: 8px;
  }
  .field-actions .submit {
    background: var(--by-purple); color: #fff; border: none;
    border-radius: var(--r-pill);
    padding: 15px 28px;
    font-family: inherit; font-weight: 700; font-size: 15px;
    cursor: pointer; box-shadow: var(--sh-purple);
    display: inline-flex; align-items: center; gap: 8px;
    transition: transform var(--t-base), background var(--t-base);
  }
  .field-actions .submit:hover { background: var(--purple-600); transform: translateY(-1px); }
  .field-actions .wa-alt {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 22px;
    border-radius: var(--r-pill);
    background: var(--by-green); color: var(--by-ink);
    font-weight: 700; font-size: 14.5px;
    box-shadow: var(--sh-green);
    text-decoration: none;
    transition: transform var(--t-base);
  }
  .field-actions .wa-alt:hover { transform: translateY(-1px); }

  /* contact methods sidebar */
  .methods {
    display: flex; flex-direction: column; gap: 12px;
  }
  .method {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-xs);
    text-decoration: none; color: inherit;
    transition: transform var(--t-base), box-shadow var(--t-base);
  }
  .method:hover { transform: translateY(-2px); box-shadow: var(--sh-sm); }
  .method .ic { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
    background: var(--purple-100); color: var(--by-purple);
    display: inline-flex; align-items: center; justify-content: center; }
  .method.green .ic { background: var(--green-100); color: var(--green-700); }
  .method.sand .ic { background: var(--sand-200); color: var(--sand-700); }
  .method .ttl { font-family: var(--font-ar-display); font-weight: 700; font-size: 16px; color: var(--by-ink); margin: 0; }
  .method .v { font-size: 14px; color: var(--fg-muted); margin-top: 2px; direction: ltr; text-align: right; }

  .info-card {
    background: var(--by-ink); color: #F6F1E8;
    border-radius: var(--r-card-lg);
    padding: 32px;
    margin-top: 16px;
  }
  .info-card h3 { font-family: var(--font-ar-display); font-weight: 800;
    font-size: 22px; color: #fff; margin: 0 0 10px; }
  .info-card p { font-size: 14.5px; color: #C9BFAE; line-height: 1.8; margin: 0; }

  @media (max-width: 960px) {
    .contact-grid { grid-template-columns: 1fr; }
    .form-card { padding: 28px 22px; }
    .field-row { grid-template-columns: 1fr; }
    .field-actions { flex-direction: column; align-items: stretch; }
    .field-actions .submit, .field-actions .wa-alt { justify-content: center; }
  }

  /* Prefilled-from-hero highlight */
  .field input.is-prefilled,
  .field select.is-prefilled,
  .field textarea.is-prefilled {
    border-color: var(--by-purple) !important;
    background: var(--purple-50);
    box-shadow: 0 0 0 4px rgba(185,112,208,0.15);
    animation: prefill-flash 2.4s ease-out;
  }
  @keyframes prefill-flash {
    0%   { background: var(--by-purple-hi); box-shadow: 0 0 0 6px rgba(185,112,208,0.35); }
    20%  { background: var(--purple-50); box-shadow: 0 0 0 4px rgba(185,112,208,0.18); }
    100% { background: var(--purple-50); box-shadow: 0 0 0 4px rgba(185,112,208,0.15); }
  }

/* ============================================================
   PAGE: events  (extracted from src/app/events/page.tsx)
   ============================================================ */
body { background: var(--by-sand); padding-top: 0; }
  /* shared inner page extras */
  .hero-mark {
    position: absolute; top: 24px; left: 32px;
    z-index: 1;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px; letter-spacing: 0.2em;
    color: var(--fg-subtle);
    text-transform: uppercase;
  }
  .section-title {
    text-align: center; max-width: 760px; margin: 0 auto 48px;
  }
  .section-title h2 { text-align: center; }
  .section-title .lede { margin: 14px auto 0; }

  .type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .type-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    padding: 24px;
    transition: transform var(--t-base), box-shadow var(--t-base);
    box-shadow: var(--sh-xs);
    position: relative;
  }
  .type-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
  .type-card .ic {
    width: 48px; height: 48px;
    border-radius: var(--r-sm);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--purple-100); color: var(--by-purple);
    margin-bottom: 14px;
  }
  .type-card.green .ic { background: var(--green-100); color: var(--green-700); }
  .type-card.sand  .ic { background: var(--sand-200); color: var(--sand-700); }
  .type-card .ic i { width: 22px; height: 22px; }
  .type-card h3 {
    font-family: var(--font-ar-display);
    font-weight: 700; font-size: 17px;
    color: var(--by-ink); margin: 0 0 4px;
  }
  .type-card p { font-size: 13.5px; color: var(--fg-muted); line-height: 1.65; margin: 0; }

  .offer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .offer {
    display: flex; gap: 16px; align-items: flex-start;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 18px 20px;
    box-shadow: var(--sh-xs);
  }
  .offer .n {
    flex: 0 0 38px;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--by-ink); color: #fff;
    font-family: "JetBrains Mono", monospace;
    font-weight: 700; font-size: 13px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .offer.green .n { background: var(--green-700); }
  .offer .ttl {
    font-family: var(--font-ar-display);
    font-weight: 700; font-size: 16.5px;
    color: var(--by-ink);
    margin-bottom: 2px;
  }
  .offer .desc { font-size: 13.5px; color: var(--fg-muted); line-height: 1.65; margin: 0; }

  @media (max-width: 1080px) {
    .type-grid { grid-template-columns: repeat(2, 1fr); }
    .offer-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 560px) {
    .type-grid { grid-template-columns: 1fr; }
  }

/* ============================================================
   PAGE: gallery  (extracted from src/app/gallery/page.tsx)
   ============================================================ */
body { background: var(--by-sand); }

  /* ========================================================
     FILTER BAR — sticky under header
     ======================================================== */
  .gallery-filters {
    position: sticky;
    top: 76px;
    z-index: 30;
    background: rgba(246,241,232,0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
    padding: 14px 0;
  }
  .filter-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 32px;
    scrollbar-width: none;
    max-width: 1280px;
    margin: 0 auto;
  }
  .filter-row::-webkit-scrollbar { display: none; }
  .pill {
    background: #fff;
    border: 1.5px solid var(--border-strong);
    color: var(--by-ink);
    font-family: inherit;
    font-weight: 700;
    font-size: 13.5px;
    padding: 9px 18px;
    border-radius: var(--r-pill);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--t-base) var(--ease-out-quart);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  .pill:hover { border-color: var(--by-ink); }
  .pill.on { background: var(--by-ink); color: #fff; border-color: var(--by-ink); }
  .pill.on .pc { color: var(--by-purple-hi); }
  .pill .pc {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--fg-subtle);
    font-weight: 600;
  }

  /* ========================================================
     MASONRY GALLERY
     ======================================================== */
  .gallery-section { padding: 64px 0 96px; }
  .gallery-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 32px;
    flex-wrap: wrap;
  }
  .gallery-head h2 {
    font-family: var(--font-ar-display);
    font-weight: 800;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.15;
    margin: 8px 0 0;
    color: var(--by-ink);
    letter-spacing: -0.005em;
  }
  .gallery-head h2 em { font-style: normal; color: var(--by-purple); }
  .gallery-head .count {
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
    color: var(--fg-muted);
    font-weight: 700;
    letter-spacing: 0.1em;
    background: #fff;
    border: 1px solid var(--border);
    padding: 8px 14px;
    border-radius: var(--r-pill);
  }
  .gallery-head .count .n { color: var(--by-purple); }

  .masonry {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 180px;
    gap: 14px;
    grid-auto-flow: dense;
  }
  .gtile {
    position: relative;
    border-radius: var(--r-card);
    overflow: hidden;
    cursor: pointer;
    color: #fff;
    transition: transform var(--t-slow) var(--ease-out-quart),
                box-shadow var(--t-slow) var(--ease-out-quart);
    text-decoration: none;
  }
  .gtile::before {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
    background-size: 3px 3px;
    mix-blend-mode: overlay;
    z-index: 1;
    pointer-events: none;
  }
  .gtile::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(21,21,21,0.78) 100%);
    z-index: 1;
    transition: opacity 0.3s;
    pointer-events: none;
  }
  .gtile:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-lg);
  }
  .gtile:hover .g-bg { transform: scale(1.06); }
  .gtile:hover::after { opacity: 0.9; }
  .g-bg {
    position: absolute; inset: 0;
    transition: transform 0.8s var(--ease-out-quart);
  }
  .g-content {
    position: absolute;
    right: 16px; left: 16px; bottom: 14px;
    z-index: 2;
  }
  .g-content .cat {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 4px;
  }
  .g-content h4 {
    font-family: var(--font-ar-display);
    font-weight: 800;
    font-size: 17px;
    line-height: 1.2;
    margin: 0;
    text-wrap: balance;
  }
  .g-tag {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 2;
    background: rgba(255,255,255,0.95);
    color: var(--by-ink);
    font-weight: 800;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    padding: 5px 10px;
    border-radius: var(--r-pill);
    backdrop-filter: blur(6px);
  }
  .g-zoom {
    position: absolute;
    top: 14px; left: 14px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(21,21,21,0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
    transform: scale(0.8);
  }
  .gtile:hover .g-zoom { opacity: 1; transform: scale(1); }

  /* Tile size variants for mixed masonry */
  .tile-sq    { grid-row: span 2; }
  .tile-tall  { grid-row: span 3; }
  .tile-wide  { grid-column: span 2; grid-row: span 2; }
  .tile-big   { grid-column: span 2; grid-row: span 3; }

  /* Gradient placeholders (used when no photo) */
  .bg-a { background: linear-gradient(155deg, #B970D0 0%, #7B4090 60%, #361F44 100%); }
  .bg-b { background: linear-gradient(160deg, #D5BB97 0%, #8B7559 60%, #43392C 100%); }
  .bg-c { background: linear-gradient(155deg, #AFB171 0%, #6C6E45 60%, #2A2B1B 100%); }
  .bg-d { background: linear-gradient(170deg, #E59CF4 0%, #B970D0 60%, #57306A 100%); }
  .bg-e { background: linear-gradient(160deg, #E1E4A6 0%, #AFB171 60%, #4A4B30 100%); }
  .bg-f { background: linear-gradient(150deg, #7B4090 0%, #361F44 70%, #151515 100%); }
  .bg-g { background: linear-gradient(165deg, #BCBE7E 0%, #6C6E45 60%, #43392C 100%); }
  .bg-h { background: linear-gradient(155deg, #D389E2 0%, #7B4090 60%, #151515 100%); }
  .bg-i { background: linear-gradient(160deg, #43392C 0%, #1B1916 60%, #151515 100%); }
  .bg-j { background: linear-gradient(170deg, #F6E0FB 0%, #B970D0 60%, #57306A 100%); }
  .bg-k { background: linear-gradient(155deg, #645541 0%, #43392C 60%, #1B1916 100%); }
  .bg-l { background: linear-gradient(160deg, #ECC1F6 0%, #B970D0 50%, #361F44 100%); }
  .bg-m { background: linear-gradient(155deg, #CCD089 0%, #8E905B 60%, #43392C 100%); }
  .bg-n { background: linear-gradient(170deg, #B59A77 0%, #645541 60%, #2A241C 100%); }

  /* Empty state */
  .empty-state {
    text-align: center;
    padding: 96px 24px;
    color: var(--fg-muted);
    display: none;
  }
  .empty-state.show { display: block; }
  .empty-state .ic {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--purple-100);
    color: var(--by-purple);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
  }
  .empty-state .ic i { width: 32px; height: 32px; }
  .empty-state h3 {
    font-family: var(--font-ar-display);
    font-weight: 800;
    font-size: 22px;
    color: var(--by-ink);
    margin: 0 0 6px;
  }

  /* ========================================================
     LIGHTBOX
     ======================================================== */
  .lb-modal {
    position: fixed; inset: 0;
    z-index: 100;
    background: rgba(10,8,8,0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
    align-items: center; justify-content: center;
    padding: 24px;
    animation: fade-in 0.25s ease-out;
  }
  .lb-modal.on { display: flex; }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

  .lb-stage {
    position: relative;
    max-width: 1100px; width: 100%;
    display: flex; flex-direction: column;
    gap: 14px;
  }
  .lb-bar {
    display: flex; justify-content: space-between; align-items: center;
    color: #F6F1E8;
  }
  .lb-bar .counter {
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.1em;
    background: rgba(246,241,232,0.08);
    border: 1px solid rgba(246,241,232,0.15);
    padding: 7px 13px;
    border-radius: var(--r-pill);
  }
  .lb-controls { display: flex; gap: 8px; }
  .lb-icon {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(246,241,232,0.08);
    border: 1px solid rgba(246,241,232,0.15);
    color: #F6F1E8;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
  }
  .lb-icon:hover { background: var(--by-purple); border-color: var(--by-purple); color: #fff; }
  .lb-icon.close:hover { background: var(--error); border-color: var(--error); }
  .lb-image {
    aspect-ratio: 16/10;
    border-radius: var(--r-card-lg);
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 80px -10px rgba(0,0,0,0.8);
    animation: lb-zoom 0.35s var(--ease-out-quart);
  }
  @keyframes lb-zoom {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
  }
  .lb-image::before {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 3px 3px;
    mix-blend-mode: overlay;
  }
  .lb-image::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.65));
  }
  .lb-cap {
    position: absolute;
    right: 28px; left: 28px; bottom: 28px;
    color: #fff;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
  }
  .lb-cap .left { display: flex; flex-direction: column; gap: 8px; }
  .lb-cap .cat-tag {
    background: var(--by-purple);
    color: #fff;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.1em;
    padding: 6px 13px;
    border-radius: var(--r-pill);
    align-self: flex-start;
  }
  .lb-cap h3 {
    font-family: var(--font-ar-display);
    font-weight: 900;
    font-size: clamp(22px, 2.4vw, 32px);
    margin: 0;
    line-height: 1.15;
    text-wrap: balance;
  }
  .lb-cap .loc {
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.08em;
    opacity: 0.85;
  }
  .lb-cap .right { display: flex; gap: 10px; align-items: center; }
  .lb-wa {
    background: var(--by-purple);
    color: #fff;
    border: none;
    border-radius: var(--r-pill);
    padding: 11px 18px;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    transition: all 0.2s;
    text-decoration: none;
  }
  .lb-wa:hover { background: #fff; color: var(--by-purple); }
  .lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 54px; height: 54px;
    border-radius: 50%;
    background: rgba(246,241,232,0.12);
    border: 1px solid rgba(246,241,232,0.2);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(8px);
    z-index: 5;
    transition: all 0.2s;
  }
  .lb-nav:hover { background: var(--by-purple); border-color: var(--by-purple); }
  .lb-prev { left: -72px; }
  .lb-next { right: -72px; }
  @media (max-width: 1200px) {
    .lb-prev { left: 12px; }
    .lb-next { right: 12px; }
  }

  /* ========================================================
     RESPONSIVE
     ======================================================== */
  @media (max-width: 960px) {
    .gallery-filters { top: 72px; }
    .masonry { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 160px; }
    .gallery-section { padding: 48px 0 64px; }
  }
  @media (max-width: 640px) {
    .masonry { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; gap: 10px; }
    .tile-wide { grid-column: span 2; }
    .tile-big { grid-column: span 2; grid-row: span 3; }
    .lb-cap { right: 18px; left: 18px; bottom: 18px; }
  }

/* ============================================================
   PAGE: religious  (extracted from src/app/religious/page.tsx)
   ============================================================ */
body { background: var(--by-sand); padding-top: 0; }
  /* shared inner page extras */
  .hero-mark {
    position: absolute; top: 24px; left: 32px;
    z-index: 1;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px; letter-spacing: 0.2em;
    color: var(--fg-subtle);
    text-transform: uppercase;
  }
  .section-title {
    text-align: center; max-width: 760px; margin: 0 auto 48px;
  }
  .section-title h2 { text-align: center; }
  .section-title .lede { margin: 14px auto 0; }

  .type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .type-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    padding: 24px;
    transition: transform var(--t-base), box-shadow var(--t-base);
    box-shadow: var(--sh-xs);
    position: relative;
  }
  .type-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
  .type-card .ic {
    width: 48px; height: 48px;
    border-radius: var(--r-sm);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--purple-100); color: var(--by-purple);
    margin-bottom: 14px;
  }
  .type-card.green .ic { background: var(--green-100); color: var(--green-700); }
  .type-card.sand  .ic { background: var(--sand-200); color: var(--sand-700); }
  .type-card .ic i { width: 22px; height: 22px; }
  .type-card h3 {
    font-family: var(--font-ar-display);
    font-weight: 700; font-size: 17px;
    color: var(--by-ink); margin: 0 0 4px;
  }
  .type-card p { font-size: 13.5px; color: var(--fg-muted); line-height: 1.65; margin: 0; }

  .offer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .offer {
    display: flex; gap: 16px; align-items: flex-start;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 18px 20px;
    box-shadow: var(--sh-xs);
  }
  .offer .n {
    flex: 0 0 38px;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--by-ink); color: #fff;
    font-family: "JetBrains Mono", monospace;
    font-weight: 700; font-size: 13px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .offer.green .n { background: var(--green-700); }
  .offer .ttl {
    font-family: var(--font-ar-display);
    font-weight: 700; font-size: 16.5px;
    color: var(--by-ink);
    margin-bottom: 2px;
  }
  .offer .desc { font-size: 13.5px; color: var(--fg-muted); line-height: 1.65; margin: 0; }

  @media (max-width: 1080px) {
    .type-grid { grid-template-columns: repeat(2, 1fr); }
    .offer-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 560px) {
    .type-grid { grid-template-columns: 1fr; }
  }

/* ============================================================
   PAGE: tourism  (extracted from src/app/tourism/page.tsx)
   ============================================================ */
body { background: var(--by-sand); }
  .section-title { text-align: center; max-width: 760px; margin: 0 auto 48px; }
  .section-title h2 { text-align: center; }
  .section-title .lede { margin: 14px auto 0; }

  .type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .type-card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-card);
    padding: 24px; transition: transform var(--t-base), box-shadow var(--t-base);
    box-shadow: var(--sh-xs); position: relative;
  }
  .type-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
  .type-card .ic { width: 48px; height: 48px; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center;
    background: var(--purple-100); color: var(--by-purple); margin-bottom: 14px; }
  .type-card.green .ic { background: var(--green-100); color: var(--green-700); }
  .type-card.sand  .ic { background: var(--sand-200); color: var(--sand-700); }
  .type-card .ic i { width: 22px; height: 22px; }
  .type-card h3 { font-family: var(--font-ar-display); font-weight: 700; font-size: 17px; color: var(--by-ink); margin: 0 0 4px; }
  .type-card p { font-size: 13.5px; color: var(--fg-muted); line-height: 1.65; margin: 0; }

  .offer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .offer { display: flex; gap: 16px; align-items: flex-start; background: #fff;
    border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px 20px; box-shadow: var(--sh-xs); }
  .offer .n { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
    background: var(--by-ink); color: #fff; font-family: "JetBrains Mono", monospace;
    font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
  .offer.green .n { background: var(--green-700); }
  .offer .ttl { font-family: var(--font-ar-display); font-weight: 700; font-size: 16.5px; color: var(--by-ink); margin-bottom: 2px; }
  .offer .desc { font-size: 13.5px; color: var(--fg-muted); line-height: 1.65; margin: 0; }

  @media (max-width: 1080px) {
    .type-grid { grid-template-columns: repeat(2, 1fr); }
    .offer-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 560px) {
    .type-grid { grid-template-columns: 1fr; }
  }


  .dest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .dest {
    aspect-ratio: 3/4;
    border-radius: var(--r-card);
    overflow: hidden;
    position: relative;
    color: #fff;
    cursor: pointer;
    box-shadow: var(--sh-sm);
    transition: transform var(--t-base);
  }
  .dest:hover { transform: translateY(-4px); }
  .dest::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(21,21,21,0.78) 100%); }
  .dest::before { content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 3px 3px; mix-blend-mode: overlay; }
  .dest .lab { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; }
  .dest .lab .eb { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.2em; opacity: 0.85; text-transform: uppercase; }
  .dest .lab .ttl { font-family: var(--font-ar-display); font-weight: 800; font-size: 22px; margin-top: 4px; line-height: 1.15; }
  .dest.d1 { background: linear-gradient(160deg, #D5BB97, #43392C); }
  .dest.d2 { background: linear-gradient(160deg, #8B7559, #151515); }
  .dest.d3 { background: linear-gradient(160deg, #AFB171, #2A2B1B); }
  .dest.d4 { background: linear-gradient(160deg, #E1E4A6, #6C6E45); }
  .dest.d5 { background: linear-gradient(160deg, #B970D0, #361F44); }
  .dest.d6 { background: linear-gradient(160deg, #6C6E45, #2A2B1B); }
  .dest.d7 { background: linear-gradient(160deg, #645541, #2A241C); }
  .dest.d8 { background: linear-gradient(160deg, #BCBE7E, #4A4B30); }

  @media (max-width: 1080px) { .dest-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px)  { .dest-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .dest .lab .ttl { font-size: 16px; } }

/* ============================================================
   PAGE: umrah  (extracted from src/app/umrah/page.tsx)
   ============================================================ */
body { background: var(--by-sand); }
  .section-title { text-align: center; max-width: 760px; margin: 0 auto 48px; }
  .section-title h2 { text-align: center; }
  .section-title .lede { margin: 14px auto 0; }

  .type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .type-card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-card);
    padding: 24px; transition: transform var(--t-base), box-shadow var(--t-base);
    box-shadow: var(--sh-xs); position: relative;
  }
  .type-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
  .type-card .ic { width: 48px; height: 48px; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center;
    background: var(--purple-100); color: var(--by-purple); margin-bottom: 14px; }
  .type-card.green .ic { background: var(--green-100); color: var(--green-700); }
  .type-card.sand  .ic { background: var(--sand-200); color: var(--sand-700); }
  .type-card .ic i { width: 22px; height: 22px; }
  .type-card h3 { font-family: var(--font-ar-display); font-weight: 700; font-size: 17px; color: var(--by-ink); margin: 0 0 4px; }
  .type-card p { font-size: 13.5px; color: var(--fg-muted); line-height: 1.65; margin: 0; }

  .offer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .offer { display: flex; gap: 16px; align-items: flex-start; background: #fff;
    border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px 20px; box-shadow: var(--sh-xs); }
  .offer .n { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
    background: var(--by-ink); color: #fff; font-family: "JetBrains Mono", monospace;
    font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
  .offer.green .n { background: var(--green-700); }
  .offer .ttl { font-family: var(--font-ar-display); font-weight: 700; font-size: 16.5px; color: var(--by-ink); margin-bottom: 2px; }
  .offer .desc { font-size: 13.5px; color: var(--fg-muted); line-height: 1.65; margin: 0; }

  @media (max-width: 1080px) {
    .type-grid { grid-template-columns: repeat(2, 1fr); }
    .offer-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 560px) {
    .type-grid { grid-template-columns: 1fr; }
  }


  .umrah-hero {
    position: relative;
    padding: 160px 0 80px;
    background:
      linear-gradient(180deg, rgba(239,241,207,0) 0%, var(--by-sand) 100%),
      radial-gradient(60% 50% at 80% 20%, rgba(175,177,113,0.22), transparent 70%),
      radial-gradient(50% 40% at 20% 80%, rgba(225,228,166,0.4), transparent 70%),
      #F4F5DE;
    overflow: hidden;
  }
  .umrah-hero .pattern {
    position: absolute; inset: 0;
    background-image: url("/assets/pattern-dunes-dots.svg");
    background-size: 480px; background-repeat: repeat;
    opacity: 0.18; pointer-events: none;
  }
  .umrah-hero .grid {
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: end;
    position: relative; z-index: 1;
  }
  .umrah-hero .visual {
    aspect-ratio: 4/5;
    border-radius: var(--r-card-lg);
    background:
      linear-gradient(180deg, transparent 40%, rgba(21,21,21,0.55) 100%),
      radial-gradient(circle at 50% 40%, rgba(225,228,166,0.5), transparent 60%),
      linear-gradient(160deg, #6C6E45 0%, #2A2B1B 100%);
    position: relative; overflow: hidden;
    box-shadow: var(--sh-lg);
  }
  .umrah-hero .visual::after {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 3px 3px; mix-blend-mode: overlay;
  }
  .umrah-hero .visual .stamp {
    position: absolute; top: 24px; right: 24px;
    background: rgba(255,255,255,0.96); color: var(--green-800);
    font-family: var(--font-ar-display); font-weight: 800;
    font-size: 13px; padding: 9px 16px; border-radius: var(--r-pill);
    letter-spacing: 0.04em;
    transform: rotate(-3deg);
  }
  .umrah-hero .visual .floor { position: absolute; left: 28px; right: 28px; bottom: 28px; color: #fff; z-index: 1; }
  .umrah-hero .visual .floor .eb { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.2em; opacity: 0.85; }
  .umrah-hero .visual .floor .ttl { font-family: var(--font-ar-display); font-weight: 800; font-size: 30px; line-height: 1.15; margin-top: 6px; }

  .note-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    padding: 22px 24px;
    margin-top: 28px;
    display: flex; gap: 16px; align-items: flex-start;
    box-shadow: var(--sh-sm);
  }
  .note-card .ic { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
    background: var(--green-100); color: var(--green-700);
    display: inline-flex; align-items: center; justify-content: center; }
  .note-card .ttl { font-family: var(--font-ar-display); font-weight: 700; font-size: 16px; color: var(--by-ink); margin: 0 0 4px; }
  .note-card p { margin: 0; font-size: 14px; color: var(--fg-muted); line-height: 1.7; }

  .package-include {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-card-lg);
    padding: 40px 44px;
  }
  .package-include .head { margin-bottom: 24px; }
  .package-include ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .package-include ul li {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: var(--r-md);
    background: var(--green-50);
    font-weight: 600; font-size: 15px; color: var(--by-ink);
  }
  .package-include ul li i { color: var(--green-700); width: 18px; height: 18px; }
  .package-include .footnote { margin-top: 18px; font-size: 13px; color: var(--fg-subtle); }

  @media (max-width: 960px) {
    .umrah-hero .grid { grid-template-columns: 1fr; }
    .package-include { padding: 28px 24px; }
    .package-include ul { grid-template-columns: 1fr; }
  }

/* ============================================================
   HOME — Mobile optimization pass
   Layered below the per-section rules above. Order: tablet → phone → narrow.
   ============================================================ */

/* iOS Safari URL-bar friendly hero height. */
@supports (height: 100svh) {
  .hero-video { min-height: 100svh; }
  .hero-content { min-height: 100svh; }
}

/* --- Tablet (≤900px) ----------------------------------------- */
@media (max-width: 900px) {
  /* Section paddings — bring everything in tighter on tablet. */
  .intro          { padding: 80px 0; }
  .services       { padding: 80px 0; }
  .whyus          { padding: 80px 0; }
  .gallery-sec    { padding: 80px 0; }
  .testimonials   { padding: 80px 0; }
  .cta-wrap       { padding: 48px 0 80px; }

  /* Intro grid — let the headline sit above the copy. */
  .intro .grid    { grid-template-columns: 1fr; gap: 32px; }
  .intro .stats   { grid-template-columns: repeat(3, 1fr); gap: 14px; }

  /* Services head — eyebrow + heading on top, "team" link below. */
  .services .head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .services .head .right { align-self: flex-start; }

  /* Why us — 2 columns reads better than an endless 1-col stack. */
  .why-grid       { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  /* Testimonials — head reflows column on tablet already. */
  .t-grid         { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .t-card.featured { grid-column: span 2; }
  .t-stats        { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* CTA band — stack copy above actions, actions go full row. */
  .cta-band       { grid-template-columns: 1fr; padding: 36px 28px; gap: 24px; }
  .cta-band .actions { justify-content: flex-start !important; flex-wrap: wrap; }
}

/* --- Phone (≤640px) ----------------------------------------- */
@media (max-width: 640px) {
  /* Smaller hero typography on phone. */
  .hero-eyebrow    { font-size: 11.5px; padding: 6px 12px; }
  .hero-eyebrow .en { font-size: 12px; }
  .hero-title      { font-size: clamp(22px, 6.2vw, 30px); line-height: 1.15; margin: 12px 0 10px; max-width: 16ch; }
  .hero-title .accent::after { height: 5px; }
  .hero-sub        { font-size: 13.5px; line-height: 1.65; margin: 0 0 16px; }

  /* Hide badges entirely on phone — the hero stays clean & compact. */
  .hero-badges     { display: none !important; }

  /* Hero strip — minimal mobile form: flat rows, hairline dividers, no chrome. */
  .hero-video                 { min-height: auto; overflow: visible; }
  .hero-content               { padding: 100px 18px 16px; min-height: auto; }
  .hero-strip-wrap            { position: relative !important; left: auto; right: auto; bottom: auto;
                                padding: 0 18px 24px; pointer-events: auto; overflow: visible; }
  .hero-strip                 { display: flex; flex-direction: column; gap: 0;
                                padding: 0; border-radius: 14px;
                                background: rgba(255,255,255,0.97);
                                box-shadow: 0 14px 36px -14px rgba(21,21,21,0.45);
                                overflow: visible; }

  /* Each input = a flat full-width row with a hairline below it. */
  .hero-strip .seg            { padding: 12px 16px;
                                border-inline-end: none; border-top: none;
                                border-bottom: 1px solid var(--border);
                                border-radius: 0; background: transparent;
                                min-height: 0; }
  .hero-strip .seg:last-of-type { border-bottom: none; }
  .hero-strip .seg.is-open    { background: var(--sand-50); }
  .hero-strip .seg .lab       { font-size: 10px; letter-spacing: 0.12em; opacity: 0.7; }
  .hero-strip .seg .v         { font-size: 13.5px; margin-top: 2px; }
  .hero-strip .seg .v .chev   { width: 12px; height: 12px; }

  /* Submit — slim, full-width, joins the bottom flush. */
  .hero-strip .go             { width: 100%; justify-content: center;
                                padding: 12px 20px; min-height: 44px;
                                font-size: 13.5px; margin: 0;
                                border-radius: 0 0 14px 14px;
                                box-shadow: none; }

  /* Popovers — open upward, full-row width, no decoration. */
  .hero-pop                   { left: 0 !important; right: 0 !important;
                                min-width: 0; max-width: none;
                                bottom: calc(100% + 4px); top: auto;
                                transform-origin: bottom center;
                                max-height: 55vh; overflow-y: auto;
                                padding: 4px; border-radius: 10px;
                                z-index: 30;
                                box-shadow: 0 -16px 40px -10px rgba(21,21,21,0.28),
                                            0 6px 18px -6px rgba(21,21,21,0.12); }
  .hero-pop::after            { display: none; }
  .hero-pop button            { padding: 9px 10px; font-size: 13px;
                                gap: 8px; min-height: 40px;
                                border-radius: 8px; }
  .hero-pop button .meta      { font-size: 11px; }
  .hero-pop button .ic        { width: 16px; height: 16px; flex: 0 0 16px; }
  /* First segment: open DOWNWARD (no room above when it's the top row). */
  .hero-strip .seg:first-of-type .hero-pop {
    bottom: auto; top: calc(100% + 4px);
    transform-origin: top center;
  }

  /* Hero badges — tighter, cleaner wrap (no awkward scroll, no overflow). */
  .hero-badges                { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                                gap: 8px; margin-top: 24px; }
  .hero-badges .b             { padding: 8px 12px; font-size: 12px; gap: 6px;
                                justify-content: flex-start; animation: none; }
  .hero-badges .b i           { width: 12px; height: 12px; }
  .hero-badges .b:nth-child(5) { grid-column: span 2; justify-content: center; }

  /* Hero CTAs — even smaller, stacked, full-width. */
  .hero-ctas       { flex-direction: column; align-items: stretch; gap: 7px; }
  .hero-ctas .btn  { justify-content: center; min-height: 38px;
                     padding: 9px 16px; font-size: 12.5px; gap: 7px; }
  .hero-ctas .btn i { width: 13px; height: 13px; }

  /* Hero scroll indicator — already hidden ≤1080, keep it that way. */
  .hero-scroll { display: none; }

  /* Intro stats — 1 column avoids cramping the Arabic numerals. */
  .intro .stats   { grid-template-columns: 1fr; gap: 10px; }

  /* Services — 1 col, no hover lift (kills phantom hover on touch). */
  .svc-grid       { grid-template-columns: 1fr; }
  .svc            { transition: none; }
  .svc:hover      { transform: none; }

  /* Why us — 1 col on phone. */
  .why-grid       { grid-template-columns: 1fr; }

  /* Gallery coverflow — slide a hair smaller so neighbors hint into view. */
  .gal-swiper .swiper-slide { width: 240px; height: 320px; }
  .gallery-head             { flex-direction: column; align-items: flex-start; gap: 16px; }
  .gallery-marquee          { display: none; } /* save scroll height, marquee not critical on phone */

  /* Testimonials — desktop grid hidden; 3D coverflow slider takes over. */
  .t-grid--desktop { display: none; }
  .t-stats         { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .t-stats .cell   { padding: 18px 14px; }
  .t-stats .cell .n em { font-size: 26px; }
  .t-stats .cell .lb { font-size: 11.5px; }

  /* CTA buttons full-width, stacked. */
  .cta-band .actions { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
  .cta-band .actions .btn { width: 100%; justify-content: center; min-height: 48px; }
  .cta-band h2     { font-size: clamp(28px, 7vw, 36px); }

  /* Generic touch-target floor for any inline buttons. */
  .btn-lg          { min-height: 48px; }

  /* Page-level wrap padding (matches `<div class="wrap">` everywhere). */
  .intro .wrap,
  .services .wrap,
  .whyus .wrap,
  .gallery-sec .wrap,
  .testimonials .wrap,
  .cta-wrap .wrap { padding-inline: 20px; }
}

/* --- Narrow phone (≤380px, iPhone SE 1st-gen etc.) ----------- */
@media (max-width: 380px) {
  .hero-content     { padding: 100px 16px 24px; }
  .hero-title       { font-size: clamp(30px, 11vw, 44px); }
  .hero-sub         { font-size: 15px; }
  .hero-eyebrow     { font-size: 12px; padding: 7px 14px; }
  .hero-strip-wrap  { padding: 0 16px 24px; }
  .gal-swiper .swiper-slide { width: 220px; height: 300px; }
  .why-card         { padding: 22px 18px; }
  .t-card           { padding: 22px 18px; }
  .cta-band         { padding: 28px 20px; }
}

/* --- Touch device — kill all hover-translate to avoid sticky lifted state - */
@media (hover: none) and (pointer: coarse) {
  .svc:hover,
  .why-card:hover,
  .t-card:hover,
  .gal-card:hover,
  .type-card:hover,
  .offer:hover,
  .method:hover,
  .value:hover { transform: none; box-shadow: var(--sh-xs); }
}

/* ============================================================
   Testimonials — 3D coverflow slider (every breakpoint)
   Every card is the same size. Featured/tone variants get distinct accents
   without breaking the uniform footprint.
   ============================================================ */

/* Legacy CSS grid no longer rendered; force-hide if any old markup persists. */
.t-grid { display: none !important; }

.t-swiper-wrap {
  display: block;
  position: relative;
  z-index: 2;
  margin: 0 0 32px;
  padding: 24px 0 12px;
  perspective: 1600px;
}

.t-swiper { overflow: visible !important; padding: 12px 0 32px; }

/* === Same-size slides across the whole carousel ============================ */
.t-swiper .swiper-slide {
  width: 440px;
  height: 480px;
  display: flex;
  align-items: stretch;
  transition: opacity 0.45s var(--ease-out-quart);
}
.t-swiper .swiper-slide-active { z-index: 3; }
.t-swiper .swiper-slide:not(.swiper-slide-active) { opacity: 0.45; }

/* === Card chrome =========================================================== */
.t-swiper .t-card {
  flex: 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  padding: 40px 36px 28px;
  border-radius: 24px;
  background:
    radial-gradient(140% 90% at 0% 0%, rgba(185,112,208,0.10), transparent 55%),
    radial-gradient(120% 80% at 100% 100%, rgba(175,177,113,0.10), transparent 55%),
    #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 44px 90px -32px rgba(21,21,21,0.45),
    0 16px 36px -14px rgba(21,21,21,0.18),
    inset 0 0 0 1px rgba(21,21,21,0.04);
}

/* Top accent strip — gradient, brand-coloured. */
.t-swiper .t-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--by-purple) 0%, var(--by-green) 100%);
  border-radius: 24px 24px 0 0;
  z-index: 2;
}

/* Oversized decorative quote glyph behind the content. */
.t-swiper .t-card > .qmark {
  position: absolute;
  top: -30px;
  left: 18px;
  font-family: var(--font-ar-display), serif;
  font-weight: 900;
  font-size: 220px;
  line-height: 1;
  color: var(--by-purple);
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
  letter-spacing: -0.05em;
}

/* Active-slide sheen — subtle highlight on the centered card. */
.t-swiper .swiper-slide-active .t-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(185,112,208,0.10), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Inner content layers above the decorations. */
.t-swiper .t-card > .stamp,
.t-swiper .t-card > .stars,
.t-swiper .t-card > .quote,
.t-swiper .t-card > .trip-strip,
.t-swiper .t-card > .author { position: relative; z-index: 1; }

/* Stamp pinned to the top-right edge, slightly tilted. */
.t-swiper .t-card .stamp {
  position: absolute;
  top: 18px;
  right: 22px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--by-ink);
  color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transform: rotate(2deg);
  box-shadow: 0 6px 16px -6px rgba(21,21,21,0.4);
}
.t-swiper .t-card .stamp .d {
  width: 6px; height: 6px; border-radius: 50%; background: var(--by-purple-hi);
}

/* Stars row */
.t-swiper .t-card .stars {
  display: inline-block;
  margin: 32px 0 14px;
  color: var(--by-purple);
  font-size: 17px;
  letter-spacing: 2px;
}

/* Quote — the main copy, flex-grows so the author always sits at the bottom. */
.t-swiper .t-card .quote {
  font-family: var(--font-ar-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.75;
  color: var(--by-ink);
  margin: 0 0 18px;
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
}

/* Trip strip — pill-shaped meta row above author. */
.t-swiper .t-card .trip-strip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--sand-50);
  color: var(--fg-muted);
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 18px;
  align-self: flex-start;
}
.t-swiper .t-card .trip-strip i,
.t-swiper .t-card .trip-strip svg { width: 14px; height: 14px; }

/* Author block pinned to bottom by virtue of `.quote { flex: 1 }`. */
.t-swiper .t-card .author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(21,21,21,0.08);
  margin-top: auto;
}
.t-swiper .t-card .avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--by-purple), var(--by-green));
  color: #fff;
  font-family: var(--font-ar-display);
  font-weight: 800;
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  box-shadow: 0 8px 20px -8px rgba(185,112,208,0.5);
}
.t-swiper .t-card .author .meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}
.t-swiper .t-card .author .name {
  font-family: var(--font-ar-display);
  font-weight: 800;
  font-size: 16.5px;
  color: var(--by-ink);
}
.t-swiper .t-card .author .sub {
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* === Variant: featured (dark dramatic) ===================================== */
.t-swiper .t-card.featured {
  background:
    radial-gradient(140% 90% at 0% 0%, rgba(185,112,208,0.4), transparent 50%),
    radial-gradient(120% 80% at 100% 100%, rgba(175,177,113,0.3), transparent 50%),
    linear-gradient(160deg, #261331 0%, #151515 55%, #2E2A20 100%);
  color: #fff;
}
.t-swiper .t-card.featured > .qmark { color: var(--by-purple-hi); opacity: 0.22; }
.t-swiper .t-card.featured::after {
  background: linear-gradient(90deg, var(--by-green-hi) 0%, var(--by-purple-hi) 100%);
}
.t-swiper .t-card.featured .stamp { background: var(--by-purple); }
.t-swiper .t-card.featured .stamp .d { background: var(--by-green-hi); }
.t-swiper .t-card.featured .stars { color: var(--by-purple-hi); }
.t-swiper .t-card.featured .quote { color: #fff; }
.t-swiper .t-card.featured .trip-strip {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.88);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}
.t-swiper .t-card.featured .trip-strip i,
.t-swiper .t-card.featured .trip-strip svg { color: var(--by-green-hi); }
.t-swiper .t-card.featured .author { border-top-color: rgba(255,255,255,0.18); }
.t-swiper .t-card.featured .author .name { color: #fff; }
.t-swiper .t-card.featured .author .sub { color: rgba(255,255,255,0.55); }

/* === Variant: green ======================================================== */
.t-swiper .t-card.green::after {
  background: linear-gradient(90deg, var(--green-700) 0%, var(--by-purple) 100%);
}
.t-swiper .t-card.green .stars { color: var(--green-700); }
.t-swiper .t-card.green .avatar {
  background: linear-gradient(135deg, var(--green-700), var(--by-purple-hi));
}

/* === Variant: sand ========================================================= */
.t-swiper .t-card.sand {
  background:
    radial-gradient(140% 90% at 0% 0%, rgba(225,228,166,0.30), transparent 55%),
    radial-gradient(120% 80% at 100% 100%, rgba(185,112,208,0.10), transparent 55%),
    #fff;
}
.t-swiper .t-card.sand::after {
  background: linear-gradient(90deg, var(--sand-700) 0%, var(--by-green) 100%);
}
.t-swiper .t-card.sand .stars { color: var(--sand-700); }

/* === Pagination dots ======================================================= */
.t-swiper-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  padding-inline: 20px;
}
.t-swiper-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(21,21,21,0.18);
  opacity: 1;
  transition: width 0.3s var(--ease-out-quart), background 0.3s;
  cursor: pointer;
}
.t-swiper-pagination .swiper-pagination-bullet-active {
  width: 32px;
  border-radius: 999px;
  background: var(--by-purple);
}

/* === Tablet (≤1024) ======================================================== */
@media (max-width: 1024px) {
  .t-swiper .swiper-slide { width: 400px; height: 460px; }
  .t-swiper .t-card { padding: 36px 30px 26px; }
  .t-swiper .t-card > .qmark { font-size: 190px; top: -22px; }
}

/* === Phone (≤720) ========================================================== */
@media (max-width: 720px) {
  .t-swiper-wrap { margin: 0 -20px 32px; padding: 16px 0 8px; }
  .t-swiper .swiper-slide { width: 320px; height: 460px; }
  .t-swiper .t-card {
    padding: 32px 24px 22px;
    border-radius: 20px;
    box-shadow:
      0 28px 60px -22px rgba(21,21,21,0.45),
      0 10px 24px -10px rgba(21,21,21,0.18);
  }
  .t-swiper .t-card > .qmark { font-size: 160px; top: -18px; left: 12px; }
  .t-swiper .t-card .stamp { font-size: 10px; padding: 6px 12px; top: 14px; right: 16px; }
  .t-swiper .t-card .stars { font-size: 15px; margin: 28px 0 12px; }
  .t-swiper .t-card .quote {
    font-size: 15.5px;
    line-height: 1.7;
    margin: 0 0 14px;
    -webkit-line-clamp: 6;
  }
  .t-swiper .t-card .trip-strip { font-size: 11.5px; padding: 6px 12px; margin-bottom: 14px; }
  .t-swiper .t-card .trip-strip i,
  .t-swiper .t-card .trip-strip svg { width: 12px; height: 12px; }
  .t-swiper .t-card .author { gap: 12px; padding-top: 14px; }
  .t-swiper .t-card .avatar { width: 42px; height: 42px; font-size: 17px; flex-basis: 42px; }
  .t-swiper .t-card .author .name { font-size: 15px; }
  .t-swiper .t-card .author .sub { font-size: 10.5px; }
  .t-swiper-pagination .swiper-pagination-bullet-active { width: 24px; }
}

/* === Narrow phone (≤380) =================================================== */
@media (max-width: 380px) {
  .t-swiper .swiper-slide { width: 280px; height: 440px; }
  .t-swiper .t-card { padding: 28px 20px 20px; }
}

/* ============================================================
   MOBILE MENU — creative animated side panel
   ============================================================ */

/* Base — always present in the DOM so transitions can run; hidden via
   opacity/visibility/pointer-events until `.is-open` flips them. */
.mobile-menu {
  display: flex !important;
  flex-direction: column;
  position: fixed; inset: 0;
  z-index: 90;
  padding: 0;
  background: linear-gradient(160deg, #1A1024 0%, #151515 55%, #2E2A20 100%);
  color: #fff;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.02);
  transform-origin: top right;
  transition: opacity 0.4s var(--ease-out-quart),
              transform 0.4s var(--ease-out-quart),
              visibility 0s linear 0.4s;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
  transition: opacity 0.4s var(--ease-out-quart),
              transform 0.4s var(--ease-out-quart);
}

/* Decorative atmosphere — orbs fade in on open. */
.mobile-menu__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mobile-menu__orb {
  position: absolute; border-radius: 50%;
  filter: blur(48px);
  opacity: 0;
  transition: opacity 0.8s 0.15s var(--ease-out-quart),
              transform 0.8s 0.15s var(--ease-out-quart);
}
.mobile-menu__orb--a {
  width: 360px; height: 360px; top: -140px; right: -100px;
  background: radial-gradient(circle, rgba(185,112,208,0.55), transparent 60%);
  transform: translate(40px, -40px);
}
.mobile-menu__orb--b {
  width: 320px; height: 320px; bottom: -120px; left: -80px;
  background: radial-gradient(circle, rgba(175,177,113,0.5), transparent 60%);
  transform: translate(-40px, 40px);
}
.mobile-menu.is-open .mobile-menu__orb {
  opacity: 1;
  transform: translate(0, 0);
}
.mobile-menu__grain {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  opacity: 0.4;
}

/* Header — brand wordmark + close button. */
.mobile-menu__header {
  position: relative; z-index: 2;
  padding: 22px 24px;
  display: flex; justify-content: space-between; align-items: center;
}
.mobile-menu__brand {
  font-family: "Bricolage Grotesque", "DM Sans", sans-serif;
  font-weight: 800; font-size: 14px; letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,0.85);
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.5s 0.25s var(--ease-out-quart),
              transform 0.5s 0.25s var(--ease-out-quart);
}
.mobile-menu__brand-line {
  width: 28px; height: 1px;
  background: rgba(255,255,255,0.45);
}
.mobile-menu__brand-dot { color: var(--by-purple-hi); }
.mobile-menu.is-open .mobile-menu__brand { opacity: 1; transform: translateX(0); }

.mobile-menu .close {
  position: relative;
  top: auto; left: auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: rotate(-90deg) scale(0.7);
  transition: opacity 0.4s 0.3s var(--ease-out-quart),
              transform 0.5s 0.3s var(--ease-out-quart),
              background 0.25s;
}
.mobile-menu.is-open .close {
  opacity: 1;
  transform: rotate(0) scale(1);
}
.mobile-menu .close:hover {
  background: rgba(255,255,255,0.14);
  transform: rotate(90deg);
}

/* Nav — staggered slide-in items. */
.mobile-menu__nav {
  flex: 1;
  position: relative; z-index: 2;
  padding: 24px 24px 8px;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.mobile-menu__link {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  text-decoration: none;
  opacity: 0;
  transform: translateX(36px);
  transition: opacity 0.55s var(--ease-out-quart),
              transform 0.55s var(--ease-out-quart),
              border-color 0.25s;
  transition-delay: calc(var(--i, 0) * 60ms + 200ms);
}
.mobile-menu.is-open .mobile-menu__link {
  opacity: 1;
  transform: translateX(0);
}
.mobile-menu__link::before {
  content: "";
  position: absolute; inset: 0 -24px 0 auto; width: 0;
  background: linear-gradient(270deg,
                              rgba(185,112,208,0.18),
                              rgba(185,112,208,0.06) 60%,
                              transparent);
  transition: width 0.4s var(--ease-out-quart);
  pointer-events: none;
}
.mobile-menu__link:hover::before,
.mobile-menu__link.is-active::before {
  width: calc(100% + 48px);
}
.mobile-menu__link:hover {
  border-bottom-color: rgba(185,112,208,0.4);
}

.mobile-menu__num {
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.4);
  position: relative; z-index: 1;
  transition: color 0.25s, transform 0.25s var(--ease-out-quart);
}
.mobile-menu__link:hover .mobile-menu__num {
  color: var(--by-green-hi);
  transform: scale(1.12);
}

.mobile-menu__label {
  font-family: var(--font-ar-display);
  font-weight: 800; font-size: 26px; letter-spacing: -0.01em;
  line-height: 1.05;
  position: relative; z-index: 1;
  background: linear-gradient(180deg, #fff 0%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  transition: background 0.35s var(--ease-out-quart);
}
.mobile-menu__link:hover .mobile-menu__label,
.mobile-menu__link.is-active .mobile-menu__label {
  background: linear-gradient(180deg, var(--by-purple-hi) 0%, var(--by-green-hi) 100%);
  -webkit-text-fill-color: transparent;
}

.mobile-menu__arrow {
  color: rgba(255,255,255,0.3);
  position: relative; z-index: 1;
  transition: transform 0.3s var(--ease-out-quart), color 0.25s;
}
/* Arrow icons are picked per locale at the component level (ArrowLeft for AR,
   ArrowRight for EN), so no CSS mirroring is needed. The hover state nudges
   the arrow toward the trailing edge in both directions. */
.mobile-menu__link:hover .mobile-menu__arrow {
  color: var(--by-purple-hi);
  transform: translateX(6px);
}
[dir="rtl"] .mobile-menu__link:hover .mobile-menu__arrow {
  transform: translateX(-6px);
}

/* CTA row — slides up at the end of the stagger. */
.mobile-menu .wa-row {
  position: relative; z-index: 2;
  margin-top: 0;
  padding: 20px 24px max(28px, env(safe-area-inset-bottom, 28px));
  display: flex; gap: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s 0.6s var(--ease-out-quart),
              transform 0.5s 0.6s var(--ease-out-quart);
}
.mobile-menu.is-open .wa-row {
  opacity: 1;
  transform: translateY(0);
}
.mobile-menu .wa-row .btn {
  flex: 1;
  justify-content: center;
  padding: 12px 16px;
  font-size: 13px;
  min-height: 44px;
  border-radius: 12px;
  gap: 8px;
}
.mobile-menu .wa-row .btn i,
.mobile-menu .wa-row .btn svg {
  width: 14px; height: 14px;
}

/* Reduce motion users — skip the choreography. */
@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu__orb,
  .mobile-menu__brand,
  .mobile-menu .close,
  .mobile-menu__link,
  .mobile-menu .wa-row {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

/* ============================================================
   GSAP support — disable CSS keyframes when GSAP is active so
   we don't double-animate, plus the dynamically-injected scroll
   progress bar and page-load curtain from Animations.tsx.
   ============================================================ */
html.has-gsap .anim-up { animation: none !important; }

.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 200;
  background: linear-gradient(90deg, var(--by-purple, #b970d0), var(--by-green, #afb171));
  transform: scaleX(0);
  transform-origin: right center;
  pointer-events: none;
}
[dir="rtl"] .scroll-progress { transform-origin: left center; }

/* ============================================================
   Commercial Registration footer badge + lightbox
   ============================================================ */
/* Sits at the bottom of the contact column, directly after the links. */
.site-footer .col--contact .cr-badge {
  margin-top: 14px;
  width: auto;
  align-self: flex-start;
}

.cr-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  color: inherit;
  cursor: pointer;
  transition: background var(--t-base), border-color var(--t-base), transform var(--t-base);
  font: inherit;
}
.cr-badge:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-1px);
}

.cr-badge__thumb {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  flex: 0 0 28px;
}
.cr-badge__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cr-badge__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  gap: 1px;
}
.cr-badge__title {
  font-family: var(--font-ar-display);
  font-weight: 700;
  font-size: 11.5px;
}
.cr-badge__num {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

/* === Lightbox =============================================== */
.cr-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 4, 14, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 32px 24px;
  animation: cr-lightbox-in 0.25s var(--ease-out-quart);
}
@keyframes cr-lightbox-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cr-lightbox__stage {
  position: relative;
  max-width: min(960px, 100%);
  max-height: 100%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.6);
  background: #fff;
  animation: cr-stage-in 0.32s var(--ease-out-quart);
}
@keyframes cr-stage-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.cr-lightbox__stage img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 86vh;
  object-fit: contain;
}

.cr-lightbox__close {
  position: absolute;
  top: 18px;
  inset-inline-end: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-base), transform var(--t-base);
}
.cr-lightbox__close:hover {
  background: rgba(255,255,255,0.18);
  transform: rotate(90deg);
}

@media (max-width: 640px) {
  .site-footer .col--contact .cr-badge { margin-top: 12px; }
  .cr-badge { padding: 4px 10px 4px 4px; gap: 7px; border-radius: 9px; }
  .cr-badge__thumb { width: 26px; height: 26px; flex-basis: 26px; border-radius: 5px; }
  .cr-badge__title { font-size: 11px; }
  .cr-badge__num { font-size: 9.5px; }
  .cr-lightbox { padding: 24px 16px; }
  .cr-lightbox__close { top: 14px; left: 14px; width: 36px; height: 36px; }
}

/* ============================================================
   Page: team-building — modern scroll-reveal choreography
   PageScrollReveal adds `.is-revealed` once each section enters viewport.
   Initial state hides everything; the staggered transitions fade + lift.
   ============================================================ */
main[data-page="team-building"] > section,
main[data-page="team-building"] [data-reveal] {
  opacity: 0;
  transform: translateY(56px);
  filter: blur(4px);
  transition:
    opacity 0.9s var(--ease-out-quart),
    transform 0.9s var(--ease-out-quart),
    filter 0.9s var(--ease-out-quart);
  will-change: opacity, transform, filter;
}
main[data-page="team-building"] > section.is-revealed,
main[data-page="team-building"] [data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Stagger inner cards/items by group inside each section. The grid children
   slide in fractionally after the section header. */
main[data-page="team-building"] > section .why-card,
main[data-page="team-building"] > section .svc,
main[data-page="team-building"] > section .type-card,
main[data-page="team-building"] > section .offer,
main[data-page="team-building"] > section .chip,
main[data-page="team-building"] > section .feature-list li,
main[data-page="team-building"] > section .stat,
main[data-page="team-building"] > section .ph-stat {
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  transition:
    opacity 0.6s var(--ease-out-quart),
    transform 0.6s var(--ease-out-quart);
  transition-delay: calc(160ms + var(--reveal-child-i, 0) * 70ms);
}
main[data-page="team-building"] > section.is-revealed .why-card,
main[data-page="team-building"] > section.is-revealed .svc,
main[data-page="team-building"] > section.is-revealed .type-card,
main[data-page="team-building"] > section.is-revealed .offer,
main[data-page="team-building"] > section.is-revealed .chip,
main[data-page="team-building"] > section.is-revealed .feature-list li,
main[data-page="team-building"] > section.is-revealed .stat,
main[data-page="team-building"] > section.is-revealed .ph-stat {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Auto-stagger children using nth-child without needing JS to set indices. */
main[data-page="team-building"] > section.is-revealed > .wrap > .why-grid > *:nth-child(n),
main[data-page="team-building"] > section.is-revealed > .wrap > .svc-grid > *:nth-child(n),
main[data-page="team-building"] > section.is-revealed > .wrap > .type-grid > *:nth-child(n),
main[data-page="team-building"] > section.is-revealed > .wrap > .offer-grid > *:nth-child(n) {
  --reveal-child-i: 0;
}
main[data-page="team-building"] > section.is-revealed .why-grid > *:nth-child(1),
main[data-page="team-building"] > section.is-revealed .svc-grid > *:nth-child(1),
main[data-page="team-building"] > section.is-revealed .type-grid > *:nth-child(1),
main[data-page="team-building"] > section.is-revealed .offer-grid > *:nth-child(1) { --reveal-child-i: 0; }
main[data-page="team-building"] > section.is-revealed .why-grid > *:nth-child(2),
main[data-page="team-building"] > section.is-revealed .svc-grid > *:nth-child(2),
main[data-page="team-building"] > section.is-revealed .type-grid > *:nth-child(2),
main[data-page="team-building"] > section.is-revealed .offer-grid > *:nth-child(2) { --reveal-child-i: 1; }
main[data-page="team-building"] > section.is-revealed .why-grid > *:nth-child(3),
main[data-page="team-building"] > section.is-revealed .svc-grid > *:nth-child(3),
main[data-page="team-building"] > section.is-revealed .type-grid > *:nth-child(3),
main[data-page="team-building"] > section.is-revealed .offer-grid > *:nth-child(3) { --reveal-child-i: 2; }
main[data-page="team-building"] > section.is-revealed .why-grid > *:nth-child(4),
main[data-page="team-building"] > section.is-revealed .svc-grid > *:nth-child(4),
main[data-page="team-building"] > section.is-revealed .type-grid > *:nth-child(4),
main[data-page="team-building"] > section.is-revealed .offer-grid > *:nth-child(4) { --reveal-child-i: 3; }
main[data-page="team-building"] > section.is-revealed .why-grid > *:nth-child(5),
main[data-page="team-building"] > section.is-revealed .svc-grid > *:nth-child(5),
main[data-page="team-building"] > section.is-revealed .type-grid > *:nth-child(5),
main[data-page="team-building"] > section.is-revealed .offer-grid > *:nth-child(5) { --reveal-child-i: 4; }
main[data-page="team-building"] > section.is-revealed .why-grid > *:nth-child(6),
main[data-page="team-building"] > section.is-revealed .svc-grid > *:nth-child(6),
main[data-page="team-building"] > section.is-revealed .type-grid > *:nth-child(6) { --reveal-child-i: 5; }

/* Hero animation lives in Animations.tsx (GSAP) — no CSS keyframe here. */

@media (prefers-reduced-motion: reduce) {
  main[data-page="team-building"] > section,
  main[data-page="team-building"] > section .why-card,
  main[data-page="team-building"] > section .svc,
  main[data-page="team-building"] > section .type-card,
  main[data-page="team-building"] > section .offer,
  main[data-page="team-building"] [data-reveal],
  main[data-page="team-building"] .ph-eyebrow,
  main[data-page="team-building"] .ph-title .line,
  main[data-page="team-building"] .ph-lede,
  main[data-page="team-building"] .ph-stat,
  main[data-page="team-building"] .ph-cta .btn,
  main[data-page="team-building"] .ph-stage {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

/* ============================================================
   Team-building: when GSAP is in charge, disable the CSS initial
   hidden state. GSAP `.from()` captures the visible state and
   animates IN, so CSS must not pre-hide anything.
   ============================================================ */
html.has-gsap main[data-page="team-building"] > section,
html.has-gsap main[data-page="team-building"] [data-reveal],
html.has-gsap main[data-page="team-building"] > section .why-card,
html.has-gsap main[data-page="team-building"] > section .svc,
html.has-gsap main[data-page="team-building"] > section .type-card,
html.has-gsap main[data-page="team-building"] > section .offer,
html.has-gsap main[data-page="team-building"] > section .chip,
html.has-gsap main[data-page="team-building"] > section .feature-list li,
html.has-gsap main[data-page="team-building"] > section .stat,
html.has-gsap main[data-page="team-building"] > section .ph-stat,
html.has-gsap main[data-page="team-building"] .ph-eyebrow,
html.has-gsap main[data-page="team-building"] .ph-title .line,
html.has-gsap main[data-page="team-building"] .ph-lede,
html.has-gsap main[data-page="team-building"] .ph-stat,
html.has-gsap main[data-page="team-building"] .ph-cta .btn,
html.has-gsap main[data-page="team-building"] .ph-stage {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;
}

/* ============================================================
   Footer brand block — eyebrow chip, layered description with
   stamp badge, and gradient rule. Loaded via SiteFooter.tsx;
   editors author the copy in the ACF Options page.
   ============================================================ */
.site-footer .brand {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: start;
  max-width: 560px;
}

.site-footer .brand-mark {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
}

.site-footer .brand-mark .logo-img {
  width: 88px;
  height: auto;
  display: block;
}

.site-footer .brand-stamp {
  position: absolute;
  inset-block-start: -10px;
  inset-inline-start: -14px;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  pointer-events: none;
  transform: rotate(-12deg);
}

.site-footer .brand-stamp__ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1.5px dashed color-mix(in oklab, var(--by-purple, #b970d0) 70%, transparent);
  background: radial-gradient(
    circle at 30% 30%,
    color-mix(in oklab, var(--by-purple, #b970d0) 22%, transparent),
    transparent 70%
  );
  animation: brand-stamp-spin 24s linear infinite;
}

.site-footer .brand-stamp__word {
  position: relative;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--by-ink, #151515);
  background: color-mix(in oklab, var(--by-green, #afb171) 18%, white);
  border-radius: 6px;
  padding: 2px 8px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

@keyframes brand-stamp-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer .brand-stamp__ring { animation: none; }
}

.site-footer .brand-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-inline-start: 16px;
  border-inline-start: 2px solid color-mix(in oklab, var(--by-purple, #b970d0) 50%, transparent);
}

.site-footer .brand-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--by-ink, #151515) 65%, transparent);
}

.site-footer .brand-eyebrow__pip {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--by-green, #afb171);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--by-green, #afb171) 18%, transparent);
}

.site-footer .brand-tag {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.65;
  color: #fff;
  font-weight: 500;
}

.site-footer .brand-tag em {
  font-style: normal;
  background: linear-gradient(
    180deg,
    transparent 60%,
    color-mix(in oklab, var(--by-green, #afb171) 35%, transparent) 60%,
    color-mix(in oklab, var(--by-green, #afb171) 35%, transparent) 92%,
    transparent 92%
  );
  padding: 0 2px;
}

.site-footer .brand-tag strong {
  font-weight: 700;
  color: var(--by-purple, #b970d0);
}

.site-footer .brand-rule {
  display: block;
  width: 72px;
  height: 2px;
  margin-top: 4px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--by-purple, #b970d0),
    var(--by-green, #afb171),
    transparent
  );
}

@media (max-width: 600px) {
  .site-footer .brand {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: none;
  }
  .site-footer .brand-mark .logo-img { width: 72px; }
  .site-footer .brand-stamp { width: 48px; height: 48px; inset-inline-start: -8px; }
}

/* ============================================================
   BenefitsBlock — responsive split layout
   Desktop: headline left (narrow) + features right (wider).
   Tablet: stack — headline above, full-width feature list below.
   ============================================================ */
.benefits-split {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: start;
}
.benefits-split__head { max-width: 520px; }

@media (max-width: 960px) {
  .benefits-split {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .benefits-split__head { max-width: none; }
}

/* Make feature-list items stack more comfortably on phones. */
@media (max-width: 640px) {
  .benefits-split .feature-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .benefits-split .feature-list li {
    padding: 14px 14px;
    gap: 12px;
    align-items: flex-start;
  }
  .benefits-split .feature-list li b {
    font-size: 14.5px;
    line-height: 1.4;
  }
  .benefits-split .feature-list li small {
    font-size: 12.5px;
    line-height: 1.65;
  }
  .benefits-split .feature-list li .tick {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
  }
  .benefits-split .feature-list li .tick svg {
    width: 14px;
    height: 14px;
  }
}

/* ============================================================
   FOOTER BACKDROP — animated desert scene
   ============================================================ */
.site-footer { position: relative; overflow: hidden; isolation: isolate; }
.site-footer .row { position: relative; z-index: 2; }

.footer-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.35;
  mask-image: linear-gradient(to top, #000 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, #000 60%, transparent 100%);
}

.footer-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 78% 12%, rgba(196,154,108,0.18), transparent 60%),
    radial-gradient(ellipse 80% 60% at 20% 90%, rgba(138,92,55,0.18), transparent 70%),
    linear-gradient(to bottom, rgba(20,16,28,0) 0%, rgba(46,28,40,0.35) 55%, rgba(78,46,28,0.4) 100%);
}

.footer-backdrop__sky {
  position: absolute;
  inset: 0;
  height: 55%;
}

.fb-moon {
  position: absolute;
  top: 18%;
  left: 32%;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fffbe8 0%, #f4dca8 55%, #c69b6b 100%);
  box-shadow:
    0 0 24px rgba(255, 236, 190, 0.85),
    0 0 60px rgba(255, 220, 160, 0.55),
    0 0 140px rgba(255, 200, 130, 0.35),
    0 0 240px rgba(255, 190, 110, 0.18);
  filter: blur(0.3px);
  animation: fb-moon-float 14s ease-in-out infinite, fb-moon-pulse 6s ease-in-out infinite;
  will-change: transform, box-shadow;
}
.fb-moon::before {
  content: "";
  position: absolute;
  inset: -45%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 232, 180, 0.35) 0%, rgba(255, 220, 150, 0.12) 40%, rgba(255, 200, 120, 0) 70%);
  filter: blur(6px);
  z-index: -1;
  animation: fb-moon-halo 6s ease-in-out infinite;
}
.fb-moon::after {
  content: "";
  position: absolute;
  inset: -120%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 220, 160, 0.18) 0%, rgba(255, 200, 130, 0.06) 35%, rgba(255, 180, 110, 0) 65%);
  filter: blur(14px);
  z-index: -2;
  pointer-events: none;
}

@keyframes fb-moon-float {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-6px, -10px); }
}
@keyframes fb-moon-pulse {
  0%, 100% {
    box-shadow:
      0 0 24px rgba(255, 236, 190, 0.85),
      0 0 60px rgba(255, 220, 160, 0.55),
      0 0 140px rgba(255, 200, 130, 0.35),
      0 0 240px rgba(255, 190, 110, 0.18);
  }
  50% {
    box-shadow:
      0 0 32px rgba(255, 240, 200, 1),
      0 0 80px rgba(255, 224, 170, 0.7),
      0 0 180px rgba(255, 206, 140, 0.5),
      0 0 300px rgba(255, 194, 120, 0.28);
  }
}
@keyframes fb-moon-halo {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.18); }
}

.fb-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff5d8;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 240, 200, 0.9);
  animation: fb-twinkle 3.2s ease-in-out infinite;
}
.fb-star--a { top: 14%; left: 8%; animation-delay: 0s; }
.fb-star--b { top: 22%; left: 22%; animation-delay: 0.7s; }
.fb-star--c { top: 10%; left: 42%; animation-delay: 1.4s; }
.fb-star--d { top: 28%; left: 58%; animation-delay: 0.3s; }
.fb-star--e { top: 16%; left: 72%; animation-delay: 1.9s; }
.fb-star--f { top: 30%; left: 88%; animation-delay: 1.1s; }

@keyframes fb-twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.4); }
}

.fb-layer {
  position: absolute;
  inset-inline: 0;
  width: 100%;
  height: auto;
  display: block;
}
.fb-layer--mountains  { bottom: 38%; color: #1a1426; opacity: 0.95; }
.fb-layer--dunes-far  { bottom: 26%; color: #2a1b2c; }
.fb-layer--dunes-mid  { bottom: 12%; color: #3a2230; }
.fb-layer--dunes-near { bottom: 0;   color: #4a2a30; }

/* Caravan of camels — drifts slowly across mid dunes */
.fb-caravan {
  position: absolute;
  bottom: 32%;
  left: -260px;
  display: flex;
  align-items: flex-end;
  gap: 28px;
  color: #120c1a;
  animation: fb-caravan-walk 65s linear infinite;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.4));
}
.fb-camel { width: 110px; height: auto; }
.fb-camel--small { width: 74px; opacity: 0.85; }

.fb-camel__body {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: fb-camel-bob 0.9s ease-in-out infinite;
}
.fb-camel--small .fb-camel__body { animation-duration: 0.75s; }

.fb-camel__leg {
  transform-box: fill-box;
  transform-origin: top center;
}
.fb-camel__leg--bl,
.fb-camel__leg--fl {
  animation: fb-camel-step-a 0.9s ease-in-out infinite;
}
.fb-camel__leg--br,
.fb-camel__leg--fr {
  animation: fb-camel-step-b 0.9s ease-in-out infinite;
}
.fb-camel--small .fb-camel__leg { animation-duration: 0.75s; }

@keyframes fb-caravan-walk {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(100vw + 320px)); }
}

@keyframes fb-camel-step-a {
  0%, 100% { transform: rotate(14deg); }
  50%      { transform: rotate(-14deg); }
}
@keyframes fb-camel-step-b {
  0%, 100% { transform: rotate(-14deg); }
  50%      { transform: rotate(14deg); }
}
@keyframes fb-camel-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.2px); }
}

/* Range Rover crossing closer dune line */
.fb-rover {
  position: absolute;
  bottom: 13%;
  left: -220px;
  color: #0a0a0a;
  animation: fb-rover-drive 28s linear infinite;
  animation-delay: -8s;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,0.5));
}
.fb-rover svg { width: 130px; height: auto; display: block; }
.fb-rover::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 16%;
  width: 14px;
  height: 14px;
  background: radial-gradient(circle, rgba(255,210,122,0.9) 0%, rgba(255,210,122,0) 70%);
  filter: blur(2px);
}
.fb-dust {
  position: absolute;
  bottom: 0;
  left: -30px;
  width: 60px;
  height: 12px;
  background: radial-gradient(ellipse, rgba(220,196,160,0.55) 0%, rgba(220,196,160,0) 70%);
  filter: blur(3px);
  animation: fb-dust-puff 1.4s ease-out infinite;
}

@keyframes fb-rover-drive {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(100vw + 300px)); }
}
@keyframes fb-dust-puff {
  0%   { opacity: 0.7; transform: translateX(0) scaleX(1); }
  100% { opacity: 0;   transform: translateX(-40px) scaleX(2); }
}

/* Camp — tent + flickering fire, near the front-right */
.fb-camp {
  position: absolute;
  bottom: 4%;
  inset-inline-end: 14%;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  color: #2c1820;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,0.5));
}
.fb-tent { width: 70px; height: auto; }

.fb-fire {
  position: relative;
  width: 18px;
  height: 26px;
}
.fb-fire__flame {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 14px;
  height: 22px;
  border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
  background: radial-gradient(ellipse at 50% 100%, #ffd27a 0%, #ff8a3d 45%, #c63a18 90%);
  transform: translateX(-50%);
  animation: fb-fire-flicker 0.35s ease-in-out infinite alternate;
  filter: blur(0.4px);
  box-shadow: 0 0 14px rgba(255, 138, 61, 0.7);
}
.fb-fire__glow {
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 60px;
  height: 26px;
  background: radial-gradient(ellipse, rgba(255,160,80,0.4) 0%, rgba(255,160,80,0) 70%);
  transform: translateX(-50%);
  animation: fb-fire-glow 1.2s ease-in-out infinite alternate;
}

@keyframes fb-fire-flicker {
  0%   { transform: translateX(-50%) scale(1, 1)     skewX(-2deg); opacity: 0.95; }
  100% { transform: translateX(-50%) scale(1.1, 0.9) skewX(3deg);  opacity: 1; }
}
@keyframes fb-fire-glow {
  0%   { opacity: 0.45; transform: translateX(-50%) scale(1); }
  100% { opacity: 0.75; transform: translateX(-50%) scale(1.15); }
}

/* Drifting sand grains */
.fb-sand {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 78%, rgba(230,210,170,0.55), transparent 50%),
    radial-gradient(1px 1px at 28% 64%, rgba(230,210,170,0.4),  transparent 50%),
    radial-gradient(1px 1px at 44% 82%, rgba(230,210,170,0.5),  transparent 50%),
    radial-gradient(1px 1px at 62% 72%, rgba(230,210,170,0.45), transparent 50%),
    radial-gradient(1px 1px at 78% 86%, rgba(230,210,170,0.5),  transparent 50%),
    radial-gradient(1px 1px at 92% 70%, rgba(230,210,170,0.4),  transparent 50%);
  animation: fb-sand-drift 18s linear infinite;
  opacity: 0.5;
}

@keyframes fb-sand-drift {
  0%   { transform: translateX(0)     translateY(0); }
  50%  { transform: translateX(-30px) translateY(-6px); }
  100% { transform: translateX(0)     translateY(0); }
}

@media (max-width: 720px) {
  .footer-backdrop { opacity: 0.28; }
  .fb-rover svg   { width: 96px; }
  .fb-camel       { width: 72px; }
  .fb-camel--small{ width: 48px; }
  .fb-tent        { width: 54px; }
  .fb-moon        { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .fb-caravan,
  .fb-camel__body,
  .fb-camel__leg,
  .fb-rover,
  .fb-dust,
  .fb-fire__flame,
  .fb-fire__glow,
  .fb-star,
  .fb-sand,
  .fb-moon,
  .fb-moon::before {
    animation: none !important;
  }
}

/* ============================================================
   FLOATING WHATSAPP — modern, expanding glass pill
   ============================================================ */
.wa-fab {
  position: fixed;
  inset-block-end: 24px;
  inset-inline-start: 24px;
  z-index: 60;
  height: 60px;
  min-width: 60px;
  padding: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
  overflow: hidden;
  box-shadow:
    0 10px 30px rgba(18, 140, 126, 0.45),
    0 4px 12px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: min-width 360ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 200ms ease,
              box-shadow 240ms ease;
  isolation: isolate;
  animation: wa-fab-bob 4.5s ease-in-out infinite;
}

.wa-fab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
  z-index: 1;
}

.wa-fab__ring,
.wa-fab__pulse {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
}
.wa-fab__ring {
  border: 2px solid rgba(37, 211, 102, 0.55);
  animation: wa-fab-ring 2.4s ease-out infinite;
}
.wa-fab__pulse {
  background: rgba(37, 211, 102, 0.35);
  animation: wa-fab-ring 2.4s ease-out infinite;
  animation-delay: 1.2s;
}

.wa-fab__icon {
  position: relative;
  z-index: 2;
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wa-fab__icon svg {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
  animation: wa-fab-wiggle 6s ease-in-out infinite;
  transform-origin: center;
}

.wa-fab__label {
  position: relative;
  z-index: 2;
  font-family: var(--font-ar-sans, inherit);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  padding-inline-end: 22px;
  padding-inline-start: 4px;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transform: translateX(-6px);
  transition: opacity 220ms ease 60ms,
              max-width 360ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 280ms ease;
}

.wa-fab:hover,
.wa-fab:focus-visible {
  min-width: 230px;
  transform: translateY(-2px);
  box-shadow:
    0 16px 38px rgba(18, 140, 126, 0.55),
    0 6px 14px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  outline: none;
}
.wa-fab:hover .wa-fab__label,
.wa-fab:focus-visible .wa-fab__label {
  opacity: 1;
  max-width: 200px;
  transform: translateX(0);
}

.wa-fab__status {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #34d97a;
  border: 2px solid #ffffff;
  z-index: 3;
  box-shadow: 0 0 0 0 rgba(52, 217, 122, 0.6);
  animation: wa-fab-status 1.8s ease-out infinite;
}

@keyframes wa-fab-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.wa-fab:hover { animation-play-state: paused; }

@keyframes wa-fab-ring {
  0%   { transform: scale(1);    opacity: 0.55; }
  80%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

@keyframes wa-fab-wiggle {
  0%, 86%, 100% { transform: rotate(0); }
  88%           { transform: rotate(-12deg); }
  92%           { transform: rotate(10deg); }
  96%           { transform: rotate(-6deg); }
}

@keyframes wa-fab-status {
  0%   { box-shadow: 0 0 0 0   rgba(52, 217, 122, 0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(52, 217, 122, 0); }
  100% { box-shadow: 0 0 0 0   rgba(52, 217, 122, 0); }
}

@media (max-width: 720px) {
  .wa-fab {
    inset-block-end: 16px;
    inset-inline-start: 16px;
    height: 56px;
    min-width: 56px;
  }
  .wa-fab__icon { width: 56px; height: 56px; }
  .wa-fab:hover,
  .wa-fab:focus-visible { min-width: 56px; }
  .wa-fab__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-fab,
  .wa-fab__ring,
  .wa-fab__pulse,
  .wa-fab__icon svg,
  .wa-fab__status {
    animation: none !important;
  }
}