/* Screen-reader only — hides visually but keeps text crawlable */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ===================== DESIGN TOKENS ===================== */
:root {
  --ink: #0a0a0a;
  --ink-light: #141414;
  --cream: #f5f0e8;
  --warm: #e8e0d4;
  --accent: #c65a2c; /* was #c4572a; nudged to reach 4.5:1 contrast on --ink */
  --accent-light: #d4764f;
  --accent-glow: rgba(196,87,42,0.4);
  --gold: #b8965a;
  --gold-light: #d4b47a;
  --slate: #3a3a3a;
  --muted: #7a7570;
  --white: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Outfit', sans-serif;
  background: var(--ink);
  color: var(--cream);
  overflow-x: hidden;
}

::selection {
  background: var(--accent);
  color: var(--white);
}

/* ===================== CURSOR GLOW (desktop) ===================== */
.cursor-glow {
  position: fixed;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196,87,42,0.04), transparent 70%);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease, opacity 0.3s ease, background 0.4s ease;
  opacity: 0;
}

body:hover .cursor-glow { opacity: 1; }

/* Reactive states */
.cursor-glow.glow-link {
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(196,87,42,0.08), transparent 70%);
}

.cursor-glow.glow-card {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(196,87,42,0.06), transparent 65%);
}

.cursor-glow.glow-cta {
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(255,255,255,0.06), transparent 70%);
}

.cursor-glow.glow-text {
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(196,87,42,0.03), transparent 70%);
}

.cursor-glow.glow-image {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(196,87,42,0.05), transparent 60%);
}

/* ===================== NAVIGATION ===================== */
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 1.25rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

#navbar.scrolled {
  background: rgba(10, 10, 10, 0.88);
  backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
  padding: 0.9rem 3rem;
}

.logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cream);
  transition: color 0.5s;
  text-decoration: none;
  cursor: pointer;
}

#navbar.scrolled .logo { color: var(--cream); }
.logo span { color: var(--accent); }

.nav-links {
  display: flex;
  gap: 2.5rem;
  align-items: center;
  list-style: none;
}

.nav-links a {
  text-decoration: none;
  color: rgba(245,240,232,0.6);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.3s;
  position: relative;
}

#navbar.scrolled .nav-links a { color: rgba(245,240,232,0.6); }

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  inset-inline-start: 0;
  width: 0;
  height: 1.5px;
  background: var(--accent);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-links a:hover { color: var(--accent) !important; }
.nav-links a:hover::after { width: 100%; }

.nav-cta {
  background: var(--accent) !important;
  color: var(--white) !important;
  padding: 0.6rem 1.5rem !important;
  border-radius: 2px;
  transition: all 0.3s !important;
}

.nav-cta::after { display: none !important; }
.nav-cta:hover { background: var(--accent-light) !important; transform: translateY(-1px); box-shadow: 0 4px 20px var(--accent-glow); }

/* Mobile-only nav pieces: hidden on desktop, styled in the mobile block */
.nav-right,
.nav-contact { display: none; }

/* ===================== HERO ===================== */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: var(--ink);
}

#hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(10,10,10,0.6) 100%);
  pointer-events: none;
}

.hero-scanlines {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.03;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255,255,255,0.1) 2px,
    rgba(255,255,255,0.1) 4px
  );
}

.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 950px;
  padding: 2rem;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 0.5rem 0;
  margin-bottom: 2.5rem;
  opacity: 0.7;
}

.hero-tag::before, .hero-tag::after {
  content: '';
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.hero-tag::after {
  background: linear-gradient(90deg, var(--gold), transparent);
}

.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3rem, 7.5vw, 6rem);
  font-weight: 400;
  color: var(--cream);
  line-height: 1.18;
  margin-bottom: 1.5rem;
}

.hero h1 .line {
  display: block;
  overflow: visible;
}

.hero h1 .line-inner {
  display: block;
  letter-spacing: -0.02em;
}

/* Word-reveal animation */
.hero h1 .word {
  display: inline-block;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

.hero h1 .verb {
  letter-spacing: 0.06em;
  background: linear-gradient(180deg, var(--v-clr) 0%, var(--v-shadow) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero h1 .word.lit { transform: translateY(-3px); }
.hero h1 .word.settled { transform: translateY(0); }

/* Verb color tokens */
.hero h1 .v-design  { --v-clr: #f5f0e8; --v-shadow: #b0a898; }
.hero h1 .v-print   { --v-clr: #f5f0e8; --v-shadow: #b0a898; }
.hero h1 .v-cut     { --v-clr: #f5f0e8; --v-shadow: #b0a898; }
.hero h1 .v-install { --v-clr: #c4784e; --v-shadow: #7a3d28; }

/* Subtitle sub-lines */
.hero-sub {
  max-width: 560px;
  margin: 0 auto 3rem;
}

.sub-line {
  text-align: center;
  font-weight: 300;
  line-height: 1.6;
}

.sub-services {
  font-size: 1rem;
  color: transparent;
  letter-spacing: 0.02em;
  margin-bottom: 0.35rem;
}

.sub-closer {
  font-size: 0.95rem;
  color: transparent;
}

/* Button bounce-in (JS-controlled) */
.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-buttons .btn {
  opacity: 0;
  transform: translateY(24px) scale(0.92);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease,
              background 0.4s ease;
}

.hero-buttons .btn.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ===================== BUTTONS ===================== */
.btn {
  display: inline-block;
  padding: 0.95rem 2.4rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.1);
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover effects are for mice only: on a touch screen the hover state sticks after a tap and
   iOS can treat the first tap on a hover-styled button as "hover" instead of a click. */
@media (hover: hover) {
  .btn:hover::before { transform: translateX(0); }
}

.btn-primary {
  background: var(--accent);
  color: var(--white);
}

@media (hover: hover) {
  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(196,87,42,0.35);
  }
}

.btn-outline {
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(245,240,232,0.2);
}

@media (hover: hover) {
  .btn-outline:hover {
    border-color: rgba(245,240,232,0.5);
    background: rgba(245,240,232,0.04);
    transform: translateY(-2px);
  }
}

.btn-dark {
  background: var(--cream);
  color: var(--ink);
  padding: 1.05rem 2.8rem;
  position: relative;
}

.btn-dark:active { background: var(--accent); color: var(--white); }
@media (hover: hover) {
  .btn-dark:hover {
    background: var(--accent);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(196,87,42,0.3);
  }
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  z-index: 10;
  opacity: 0;
  animation: fadeUp 0.8s 1.5s forwards;
}

.scroll-indicator span {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.25);
}

.scroll-mouse {
  width: 20px;
  height: 32px;
  border: 1.5px solid rgba(245,240,232,0.2);
  border-radius: 10px;
  position: relative;
}

.scroll-mouse::after {
  content: '';
  width: 2px;
  height: 6px;
  background: var(--accent);
  border-radius: 1px;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  animation: scrollWheel 2s ease-in-out infinite;
}

@keyframes scrollWheel {
  0%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); }
  50% { opacity: 0.3; transform: translateX(-50%) translateY(10px); }
}

/* ===================== MARQUEE STRIP ===================== */
.marquee-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: transparent;
  padding: 1rem 0;
  overflow: hidden;
  border-top: 1px solid rgba(196,87,42,0.15);
}

.marquee-track {
  display: flex;
  gap: 3rem;
  animation: marquee 30s linear infinite;
  white-space: nowrap;
  width: max-content;
}

.marquee-track span {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 3rem;
}

.marquee-track span::after {
  content: '\25C6';
  color: var(--accent);
  font-size: 0.4rem;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===================== CAPABILITIES ===================== */
/* Links under the service cards to the walk-in pages (student printing, stationery shop) */
.also-links {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin: 1.75rem auto 0;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
}
.also-links span { color: var(--gold); opacity: 0.7; }
.also-links a {
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  transition: color 0.3s;
}
.also-links a:hover { color: var(--accent-light); }
:lang(ar) .also-links { letter-spacing: 0; }

.capabilities {
  padding: 2rem 3rem 2.5rem;
  background: var(--ink);
  position: relative;
  scroll-margin-top: 5rem;
  overflow: hidden;
}

.capabilities .liquid-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  filter: blur(35px);
}

/* Touch screens: liquid-bg.js draws this on a tiny canvas that the browser scales up smoothly,
   so the (expensive, scroll-stuttering) blur filter isn't needed. */
.capabilities .liquid-bg.liquid-lite { filter: none; }

.capabilities .showcase-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.capabilities::before,
.capabilities::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 120px;
  z-index: 1;
  pointer-events: none;
}
.capabilities::before {
  top: 0;
  background: linear-gradient(to bottom, var(--ink) 0%, transparent 100%);
}
.capabilities::after {
  bottom: 0;
  background: linear-gradient(to top, var(--ink) 0%, transparent 100%);
}

.section-header {
  text-align: center;
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 2;
}

.section-label {
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
  display: block;
  font-weight: 500;
}

.section-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 400;
  color: var(--cream);
  line-height: 1.2;
}

.section-header h2 em {
  font-style: italic;
  color: var(--accent);
}

.section-line {
  width: 40px;
  height: 1.5px;
  background: var(--accent);
  margin: 0.6rem auto 0;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.category-card {
  background: var(--ink-light);
  border-radius: 10px;
  padding: 8px 8px 6px;
  text-align: start;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(24px);
  text-decoration: none;
  color: inherit;
  display: block;
}

.category-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.category-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}

.category-card .card-visual {
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  margin: 0 auto;
  display: block;
  border-radius: 8px;
}

.card-text {
  padding: 10px 10px 6px;
}

.card-text h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: -0.01em;
  margin-bottom: 3px;
}

.card-text p {
  font-size: 0.8rem;
  color: var(--cream);
  opacity: 0.7;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* ===================== SECTION GLOW DIVIDER ===================== */
.section-glow {
  position: relative;
  height: 1px;
  background: rgba(196,87,42,0.08);
  overflow: visible;
}

.section-glow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scaleX(0);
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--gold) 50%, var(--accent) 70%, transparent);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
  opacity: 0;
}

.section-glow.lit::before {
  transform: translate(-50%, -50%) scaleX(1);
  opacity: 1;
}

.section-glow::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scaleX(0);
  width: 60%;
  height: 40px;
  background: radial-gradient(ellipse at center, rgba(196,87,42,0.15) 0%, transparent 70%);
  filter: blur(12px);
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, opacity 1s ease 0.1s;
  opacity: 0;
  pointer-events: none;
}

.section-glow.lit::after {
  transform: translate(-50%, -50%) scaleX(1);
  opacity: 1;
}

/* ===================== SHOWCASE SECTION (dark) ===================== */
.showcase {
  padding: 7rem 3rem;
  background: #030303;
  position: relative;
  overflow: hidden;
}

.showcase-grain {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px;
  z-index: 1;
  pointer-events: none;
}

.showcase-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  position: relative;
  z-index: 2;
}

.showcase-text .section-label { text-align: start; }

.showcase-text h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 400;
  color: var(--cream);
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.showcase-text h2 em { font-style: italic; color: var(--accent-light); }

/* Flow steps */
.flow-visual { display: flex; flex-direction: column; gap: 0; }

.flow-step {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.2rem 1.5rem;
  border: 1px solid rgba(245,240,232,0.04);
  border-bottom: none;
  transition: background 0.5s ease, border-color 0.5s ease;
  cursor: default;
}

.flow-step:last-child {
  border-bottom: 1px solid rgba(245,240,232,0.04);
}

/* Bordered state */
.flow-visual.bordered .flow-step {
  border-color: rgba(196,87,42,0.10);
  background: rgba(196,87,42,0.02);
}
.flow-visual.bordered .flow-step:last-child {
  border-bottom-color: rgba(196,87,42,0.10);
}

.flow-step:hover { background: rgba(196,87,42,0.05); }

.flow-num {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--accent);
  opacity: 0.4;
  width: 24px;
  flex-shrink: 0;
  transition: opacity 0.5s ease;
}

.flow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(196,87,42,0.2);
  flex-shrink: 0;
  transition: all 0.5s ease;
  box-shadow: 0 0 0 0 transparent;
}

.flow-step span {
  color: rgba(245,240,232,0.5);
  font-size: 0.9rem;
  font-weight: 400;
  transition: color 0.5s ease;
}

.flow-step:hover span { color: var(--cream); }

/* ===== LADDER LIGHTING ===== */
.flow-step.lit .flow-num { opacity: 1; }
.flow-step.lit .flow-dot {
  background: var(--accent);
  box-shadow: 0 0 10px rgba(196,87,42,0.5), 0 0 25px rgba(196,87,42,0.15);
}
.flow-step.lit span { color: rgba(245,240,232,0.85); }
.flow-step.lit { background: rgba(196,87,42,0.04); }

/* After glow passes — settled state */
.flow-step.lit-done .flow-dot {
  background: var(--accent);
  box-shadow: 0 0 4px rgba(196,87,42,0.2);
}
.flow-step.lit-done .flow-num { opacity: 0.7; }
.flow-step.lit-done span { color: rgba(245,240,232,0.65); }
.flow-step.lit-done { background: rgba(196,87,42,0.02); }

/* Last step holds a pulse */
.flow-step.lit-hold .flow-dot {
  background: var(--accent);
  animation: holdPulse 3s ease-in-out infinite;
}
.flow-step.lit-hold .flow-num { opacity: 1; }
.flow-step.lit-hold span { color: var(--cream); }

@keyframes holdPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(196,87,42,0.4); }
  50% { box-shadow: 0 0 16px rgba(196,87,42,0.6), 0 0 30px rgba(196,87,42,0.12); }
}

/* ===================== STATS COUNTER ===================== */
.stats {
  padding: 5rem 3rem;
  background: var(--ink-light);
  position: relative;
  overflow: hidden;
}

.stats::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196,87,42,0.15), transparent);
}

.stats-grid {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}

.stat-item {
  padding: 1.5rem;
  position: relative;
}

.stat-item::after {
  content: '';
  position: absolute;
  inset-inline-end: 0;
  top: 25%;
  height: 50%;
  width: 1px;
  background: rgba(255,255,255,0.06);
}

.stat-item:last-child::after { display: none; }

.stat-item h3 {
  font-family: 'Playfair Display', serif;
  font-size: 3.2rem;
  font-weight: 400;
  color: var(--cream);
  position: relative;
  display: inline-block;
}

.stat-item h3 .stat-num { display: inline; }
.stat-item h3 .stat-suffix { color: var(--accent); }

.stat-item p {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.4);
  margin-top: 0.6rem;
  font-weight: 500;
}

/* ===================== HOME FAQ ===================== */
.home-faq {
  padding: 4rem 3rem 5rem;
  background: var(--ink);
}

.home-faq .section-header { margin-bottom: 2rem; }

.faq-list {
  max-width: 760px;
  margin: 0 auto;
}

.home-faq .faq-item { border-bottom: 1px solid rgba(255,255,255,0.06); }

.home-faq .faq-item summary {
  cursor: pointer;
  list-style: none;
  padding-block: 1.1rem;
  padding-inline: 0 2rem;
  position: relative;
  font-size: 0.95rem;
  color: rgba(245,240,232,0.85);
  transition: color 0.3s;
}
.home-faq .faq-item summary::-webkit-details-marker { display: none; }
.home-faq .faq-item summary::after {
  content: '+';
  position: absolute;
  inset-inline-end: 0;
  color: var(--accent);
  transition: transform 0.3s;
}
.home-faq .faq-item[open] summary::after { transform: rotate(45deg); }
.home-faq .faq-item summary:hover { color: #fff; }

.home-faq .faq-item p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(245,240,232,0.6);
  font-weight: 300;
  padding-bottom: 1.25rem;
}

.home-faq .faq-item a {
  color: var(--accent-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 768px) {
  .home-faq { padding: 3rem 1.25rem 4rem; }
}

/* ===================== EQUIPMENT MARQUEE ===================== */
.equipment {
  padding: 4rem 3rem;
  background: var(--ink);
  text-align: center;
  overflow: hidden;
}

.equipment .section-label { margin-bottom: 2rem; }

.equip-logos {
  display: flex;
  justify-content: center;
  gap: 4rem;
  flex-wrap: wrap;
  align-items: center;
}

.equip-item {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.85);
  transition: all 0.4s;
  cursor: pointer;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  border: 1px solid rgba(245,240,232,0.22);
  background: rgba(245,240,232,0.03);
  position: relative;
}

.equip-item:hover {
  color: var(--accent);
  transform: scale(1.05);
  border-color: rgba(196,87,42,0.3);
  background: rgba(196,87,42,0.05);
}

.equip-item.active {
  color: var(--accent);
  background: rgba(196,87,42,0.1);
  transform: scale(1.05);
}

/* Info panel */
.equip-info-panel {
  max-width: 640px;
  margin: 0 auto;
  margin-top: 2rem;
  padding: 2rem 2.5rem;
  background: rgba(196,87,42,0.06);
  border: 1px solid rgba(196,87,42,0.2);
  border-radius: 8px;
  text-align: start;
  position: relative;
  opacity: 0;
  transform: translateY(-10px);
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease, margin 0.4s ease, padding 0.4s ease;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
}

.equip-info-panel.visible {
  opacity: 1;
  transform: translateY(0);
  max-height: 300px;
  margin-top: 2rem;
  padding: 2rem 2.5rem;
}

.equip-info-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.75rem 0;
}

.equip-info-text {
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(245,240,232,0.7);
  margin: 0;
}

.equip-info-close {
  position: absolute;
  top: 0.75rem;
  inset-inline-end: 1rem;
  background: none;
  border: none;
  color: rgba(245,240,232,0.4);
  font-size: 1.4rem;
  cursor: pointer;
  transition: color 0.3s;
  line-height: 1;
  padding: 0;
}

.equip-info-close:hover {
  color: var(--accent);
}

/* Phones/tablets: partners become accordion rows. JS moves the info panel
   directly under the tapped row so the text opens where the user tapped. */
@media (max-width: 768px) {
  .equipment { padding: 3rem 1.25rem; }
  .equip-logos {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid rgba(245,240,232,0.1);
  }
  .equip-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: start;
    padding: 1rem 0.25rem;
    border: none;
    border-bottom: 1px solid rgba(245,240,232,0.1);
    border-radius: 0;
    background: none;
  }
  .equip-item::after {
    content: '+';
    color: var(--accent);
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 0;
    transition: transform 0.3s;
  }
  .equip-item:hover,
  .equip-item.active {
    transform: none;
    background: none;
    border-color: rgba(245,240,232,0.1);
  }
  .equip-item.active { border-bottom-color: transparent; }
  .equip-item.active::after { transform: rotate(45deg); }

  .equip-info-panel {
    max-width: none;
    border: none;
    border-bottom: 1px solid rgba(245,240,232,0.1);
    border-radius: 0;
    background: none;
  }
  .equip-info-panel.visible {
    margin-top: 0;
    padding: 0 0.25rem 1.1rem;
    max-height: 400px;
  }
  .equip-info-title,
  .equip-info-close { display: none; }
}

/* ===================== CTA ===================== */
.cta-section {
  padding: 8rem 3rem;
  text-align: center;
  background: var(--ink);
  position: relative;
  overflow: hidden;
}

.cta-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cta-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(10,10,10,0.6) 100%);
  pointer-events: none;
}

.cta-section .reveal {
  position: relative;
  z-index: 3;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  z-index: 3;
}

.cta-section h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  font-weight: 400;
  color: var(--cream);
  margin-bottom: 1rem;
}

.cta-section h2 em { font-style: italic; color: var(--accent); }

.cta-section p {
  color: rgba(245,240,232,0.6);
  font-size: 1rem;
  font-weight: 300;
  margin-bottom: 2.5rem;
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

/* ===================== FOOTER ===================== */
footer {
  background: var(--ink);
  padding: 1.5rem 3rem 1rem;
  position: relative;
  border-top: 2px solid var(--accent);
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(245,240,232,0.06);
}

.footer-brand .logo {
  font-size: 1.6rem;
  display: inline-block;
  margin-bottom: 0.5rem;
  color: var(--cream);
}

.footer-col {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.footer-col a {
  color: rgba(245,240,232,0.5);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 400;
  transition: color 0.3s;
}

.footer-col a:hover { color: var(--accent); }

.footer-contact { gap: 0.75rem; }

.footer-col .contact-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(245,240,232,0.12);
  border-radius: 50%;
  color: rgba(245,240,232,0.7);
  transition: color 0.3s, border-color 0.3s;
}

.footer-col .contact-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-bottom span {
  font-size: 0.75rem;
  color: rgba(245,240,232,0.5);
  font-weight: 300;
}

/* ===================== VIEW TRANSITIONS (cross-page crossfade) ===================== */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: vt-fade-out 0.25s ease-out both;
}
::view-transition-new(root) {
  animation: vt-fade-in 0.3s ease-in both;
}

@keyframes vt-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes vt-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Kill loader on service pages — crossfade handles transition */
body.service-page .loader {
  display: none;
}

/* ===================== ANIMATIONS ===================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(25px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Scroll reveal system */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger children */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.stagger-children.visible > *:nth-child(1) { transition-delay: 0s; }
.stagger-children.visible > *:nth-child(2) { transition-delay: 0.08s; }
.stagger-children.visible > *:nth-child(3) { transition-delay: 0.16s; }
.stagger-children.visible > *:nth-child(4) { transition-delay: 0.24s; }
.stagger-children.visible > *:nth-child(5) { transition-delay: 0.32s; }
.stagger-children.visible > *:nth-child(6) { transition-delay: 0.40s; }
.stagger-children.visible > *:nth-child(7) { transition-delay: 0.48s; }

.stagger-children.visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ===================== MOBILE ===================== */
@media (max-width: 768px) {
  /* anchor jumps (tap "Services", or arrive via /#services) stop below the floating nav */
  html { scroll-padding-top: 72px; }

  /* ---- Floating glass nav: a pill that grows into a card ---- */
  #navbar,
  #navbar.scrolled {
    top: 12px;
    left: 12px;
    right: 12px;
    height: 60px;
    padding: 0;
    border-radius: 30px;
    overflow: hidden;
    flex-wrap: wrap;
    align-content: flex-start;
    background: rgba(34, 30, 27, 0.66);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid rgba(245,240,232,0.16);
    box-shadow: 0 14px 40px rgba(0,0,0,0.45);
    transition: height 0.65s cubic-bezier(0.32, 0.72, 0, 1);
  }
  #navbar.menu-open { height: 350px; }

  #navbar .logo {
    height: 58px;
    padding-inline-start: 20px;
    font-size: 1.2rem;
    line-height: 58px;
    white-space: nowrap;
  }

  .nav-right {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 58px;
    padding-inline-end: 6px;
  }

  .nav-pill {
    display: inline-flex;
    align-items: center;
    height: 36px;
    max-width: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 999px;
    background: transparent;
    /* inset ring, not a border, so the collapsed pill is truly zero-width */
    box-shadow: inset 0 0 0 1.5px var(--accent-light);
    color: var(--cream);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: max-width 0.5s cubic-bezier(0.32, 0.72, 0, 1), padding 0.5s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s, visibility 0s 0.5s;
  }
  /* Shown only once the hero (which has its own Get a Quote) has scrolled away */
  #navbar.show-quote .nav-pill {
    max-width: 160px;
    padding: 0 14px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: max-width 0.5s cubic-bezier(0.32, 0.72, 0, 1), padding 0.5s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.4s 0.1s, visibility 0s 0s;
  }
  #navbar.show-quote .nav-pill:hover,
  #navbar.show-quote .nav-pill:active { background: rgba(196,87,42,0.16); }
  /* The open menu has its own big Get a Quote button */
  #navbar.menu-open .nav-pill {
    max-width: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: max-width 0.4s cubic-bezier(0.32, 0.72, 0, 1), padding 0.4s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s, visibility 0s 0.4s;
  }

  /* Menu body */
  .nav-links {
    display: flex;
    flex: 0 0 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 20px 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s;
  }
  #navbar.menu-open .nav-links {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.4s ease 0.2s, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s, visibility 0s 0s;
  }

  .nav-links a.nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    border-top: 1px solid rgba(245,240,232,0.14);
    color: var(--cream) !important;
    font-family: 'Playfair Display', serif;
    font-size: 1.9rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
  }
  /* reuse the desktop underline pseudo-element as a trailing arrow */
  .nav-links a.nav-row::after,
  .nav-links a.nav-row:hover::after {
    position: static;
    width: 22px;
    height: 22px;
    background: var(--accent-light);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: none;
  }

  .nav-links .nav-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    margin-top: 16px;
    padding: 0 !important;
    border-radius: 999px;
    background: #b84e22 !important;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--white) !important;
    box-shadow: 0 10px 30px rgba(196,87,42,0.38);
  }

  .nav-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
  }
  .nav-contact-icons { display: flex; gap: 10px; }
  .nav-contact-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(245,240,232,0.26);
    border-radius: 50%;
    color: var(--cream) !important;
  }
  .nav-contact-icons a::after { display: none; }
  .nav-contact-loc {
    color: rgba(245,240,232,0.66);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
  }

  /* dim + blur the page behind the open menu; tapping it closes the menu */
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0,0,0,0.5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s, visibility 0s 0.4s;
  }
  body.menu-open::after {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.5s, visibility 0s 0s;
  }

  .hamburger { display: block !important; }
  .hero-content { padding: 1.5rem; }
  /* Size the hero to the *visible* screen (svh), not the full-screen height (vh), so the
     services strip pinned to its bottom edge isn't hidden behind Safari's toolbar. The
     extra bottom padding keeps the text clear of that strip and nudges it up a little. */
  .hero { min-height: 100vh; min-height: 100svh; padding: 72px 0 96px; }
  /* 3rem is only just wide enough for "Cut and Install." on a 402px phone; below that it
     wrapped to a third line and pushed the whole hero past the screen */
  .hero h1 { font-size: min(3rem, 11.4vw); }
  @media (max-height: 700px) { .hero { padding-bottom: 72px; } }
  .showcase-inner { grid-template-columns: 1fr; gap: 3rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .stat-item::after { display: none; }
  footer { padding: 2rem 1.5rem 1.25rem; }
  .footer-inner { flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; }
  .footer-brand .logo { white-space: nowrap; margin-bottom: 0; }
  .footer-col { order: 2; flex-wrap: wrap; justify-content: center; gap: 0 1.5rem; }
  .footer-col a { padding: 0.6rem 0; }
  .footer-contact { order: 1; gap: 0.75rem; }
  .footer-col .contact-link { width: 48px; height: 48px; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 0.25rem; }
  .capabilities, .showcase, .cta-section { padding: 4rem 1.5rem; }
  .categories-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .card-text h3 { font-size: 1.2rem; }
  .card-text p { font-size: 0.82rem; }
  .cursor-glow { display: none; }
}

/* Phones: services as one row each (thumbnail, title, line, arrow) so all six
   are visible at once after tapping "Services". Row height scales with the
   screen so it still fits on shorter phones. */
@media (max-width: 600px) {
  .capabilities { padding: 1.75rem 1rem 1.5rem; }
  .capabilities .section-header { margin-bottom: 0.9rem; }
  .capabilities .section-header h2 { font-size: 1.45rem; }
  /* the section's 120px bottom fade would sit on top of the last row and dim it */
  .capabilities::after { height: 24px; }

  .categories-grid {
    --row-h: 92px;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  @supports (height: 100svh) {
    .categories-grid { --row-h: clamp(66px, calc((100svh - 272px) / 6), 92px); }
  }

  .category-card {
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--row-h);
    padding-block: 8px;
    padding-inline: 8px 14px;
    border-radius: 14px;
  }
  .category-card .card-visual {
    flex: none;
    width: calc(var(--row-h) - 16px);
    height: calc(var(--row-h) - 16px);
    max-height: none;
    margin: 0;
  }
  .category-card .card-text { flex: 1; min-width: 0; padding: 0; }
  .category-card .card-text h3 { font-size: 1.06rem; line-height: 1.15; margin-bottom: 3px; }
  .category-card .card-text p { font-size: 0.75rem; line-height: 1.3; }
  .category-card::after {
    content: '';
    flex: none;
    width: 20px;
    height: 20px;
    background: var(--accent-light);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}

/* Small phones: keep logo + pill + hamburger on one line */
@media (max-width: 375px) {
  #navbar .logo { padding-inline-start: 16px; font-size: 1.1rem; }
  #navbar.show-quote .nav-pill { padding: 0 12px; }
}
/* Very small phones (320px): the menu itself still has Get a Quote */
@media (max-width: 340px) {
  #navbar .nav-pill { display: none; }
  .nav-contact-loc { display: none; }
}

.hamburger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 10;
}
.hamburger span {
  position: absolute;
  left: 11px;
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--cream);
  transition: top 0.45s cubic-bezier(0.7, 0, 0.2, 1), transform 0.45s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.2s;
}
.hamburger span:nth-child(1) { top: 15px; }
.hamburger span:nth-child(2) { top: 21px; }
.hamburger span:nth-child(3) { top: 27px; }
.menu-open .hamburger span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.menu-open .hamburger span:nth-child(2) { opacity: 0; }
.menu-open .hamburger span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* ===================== LOADER ===================== */
.loader {
  position: fixed;
  inset: 0;
  background: var(--ink);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s, visibility 0.6s;
}

.loader.done {
  opacity: 0;
  visibility: hidden;
}

.loader-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: var(--cream);
  opacity: 0;
  animation: loaderFade 0.8s 0.2s forwards;
}

.loader-text span { color: var(--accent); }

@keyframes loaderFade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.loader-bar {
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  height: 2px;
  background: var(--accent);
  animation: loaderBar 1.2s 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  width: 0;
}

@keyframes loaderBar {
  to { width: 100%; }
}

/* ===================== ARABIC / RTL ===================== */
/* Arabic letters must join, so no tracking, capitals or italics on Arabic pages.
   !important beats the many component rules that set letter-spacing. */
:lang(ar),
:lang(ar) * {
  letter-spacing: 0 !important;
  text-transform: none !important;
}
:lang(ar) em,
:lang(ar) i { font-style: normal !important; }
/* Labels rely on capitals + tracking at a tiny size in English; Arabic needs real size. */
:lang(ar) .section-label { font-size: 0.85rem; }

/* Hero verbs paint their gradient only inside each word's box (background-clip: text),
   and El Messiri's tails and marks reach past it. Pad the box, then cancel the padding
   with negative margins so the layout doesn't move. */
:lang(ar) .hero h1 { line-height: 1.45; }
:lang(ar) .hero h1 .verb {
  padding: 0.3em 0.12em;
  margin: -0.3em -0.12em;
}

/* Header keeps the English arrangement (logo left, menu right) on Arabic pages. */
[dir="rtl"] #navbar { direction: ltr; }

/* Motion that logical properties can't express */
[dir="rtl"] .btn::before { transform: translateX(100%); }
@media (hover: hover) {
  [dir="rtl"] .btn:hover::before { transform: translateX(0); }
}
[dir="rtl"] .category-card::after { transform: scaleX(-1); }
[dir="rtl"] .marquee-track { animation-name: marquee-rtl; }
@keyframes marquee-rtl {
  0% { transform: translateX(0); }
  100% { transform: translateX(50%); }
}

/* ===================== LANGUAGE SWITCH ===================== */
/* Markup is filled in by scripts/build-ar.mjs (scripts/lib/lang-switch.mjs).
   Desktop: one bordered link to the other language in the header.
   Phone: a pill in the header at the top of the homepage, which hands its spot to the
   quote pill once the hero scrolls away, plus an English | العربية toggle in the menu. */
.lang-switch[hidden],
.nav-lang[hidden] { display: none !important; }
.lang-switch { display: none; }
.nav-links .nav-lang a {
  color: var(--cream);
  border: 1px solid rgba(245,240,232,0.25);
  border-radius: 4px;
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  letter-spacing: 0;
  text-transform: none;
}
.nav-links .nav-lang a::after { display: none; }
.nav-links .nav-lang a:hover { border-color: var(--accent); }
.nav-lang a[aria-current] { display: none; }

@media (max-width: 768px) {
  .lang-switch {
    display: inline-flex;
    align-items: center;
    height: 36px;
    max-width: 120px;
    padding: 0 14px;
    overflow: hidden;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1.5px rgba(245,240,232,0.32);
    color: var(--cream);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: max-width 0.5s cubic-bezier(0.32, 0.72, 0, 1), padding 0.5s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.4s 0.1s, visibility 0s 0s;
  }
  #navbar.show-quote .lang-switch,
  #navbar.menu-open .lang-switch {
    max-width: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: max-width 0.5s cubic-bezier(0.32, 0.72, 0, 1), padding 0.5s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s, visibility 0s 0.5s;
  }

  .nav-lang { order: -1; margin: 2px 0 14px; }
  .nav-lang .lang-seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(245,240,232,0.22);
    direction: ltr;
  }
  .nav-links .nav-lang a,
  .nav-links .nav-lang a[aria-current] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    color: rgba(245,240,232,0.75) !important;
    font-size: 0.9rem;
    font-weight: 600;
  }
  .nav-links .nav-lang a[aria-current] { background: var(--accent); color: #fff !important; }
  #navbar.menu-open:has(.nav-lang:not([hidden])) { height: 412px; }
}

/* One-time offer of the Arabic page to visitors whose browser prefers Arabic (js/main.js) */
.lang-offer {
  position: fixed;
  z-index: 1001;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 10px;
  direction: rtl;
  padding: 12px 10px 12px 16px;
  background: rgba(20,19,18,0.96);
  border: 1px solid var(--accent);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.5);
  font-family: 'Outfit', sans-serif;
}
.lang-offer p { margin: 0; flex: 1; color: var(--cream); font-size: 0.9rem; line-height: 1.5; }
.lang-offer a {
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.lang-offer button { background: none; border: 0; color: rgba(245,240,232,0.6); font-size: 1.3rem; line-height: 1; padding: 4px 6px; cursor: pointer; }
@media (min-width: 769px) {
  .lang-offer { left: auto; right: 24px; bottom: 24px; max-width: 400px; }
}