/* ==========================================================================
   Hero & Mobile Experience Polish — Additive Layer (load AFTER mobile.css)
   ========================================================================== */

/* 1) Hero Headline: Strictly 2 lines on all mobile viewports */
.m-hero-headline {
  font-size: clamp(24px, 7.1vw, 33px) !important;
  line-height: 1.32 !important;
}
.m-hero-line-1 {
  display: block !important;
  white-space: nowrap !important;
}
.m-hero-highlight {
  isolation: isolate;
  display: inline-block !important;
  white-space: nowrap !important;
}
.m-hero-highlight-bar {
  bottom: 5px;
  height: 9px;
  opacity: 0.38;
  border-radius: 3px;
}

/* 2) Headline word-by-word reveal (words only — never letters, to keep Arabic joined) */
.hp-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-block: 0.12em;
  margin-block: -0.12em;
}
.hp-word > span {
  display: inline-block;
  will-change: transform;
}

/* 3) Hero 3 Pillars: Strictly 2 lines of Arabic text + animated top accent bar */
.m-pillar {
  position: relative;
  padding-top: 8px;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.m-pillar::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--accent-sandstone, #C49A6C);
  transform-origin: right center;
  transition: width 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.m-pillar:active {
  transform: translateY(-2px);
}
.m-pillar:active::before {
  width: 48px;
}
.m-pillar-text {
  font-size: clamp(11.5px, 3.25vw, 13px) !important;
  line-height: 1.45 !important;
  white-space: nowrap !important;
  display: block;
}

/* 4) Portrait: squarer so the face AND the pillars are visible together */
.m-hero-portrait-wrap {
  aspect-ratio: 1 / 1;
  max-height: 46svh;
}
.m-hero-portrait-img {
  object-position: center 12%;
}

/* 5) Floating glass tags on the portrait */
.hp-chip {
  position: absolute;
  z-index: 3;
  padding: 6px 12px;
  font-family: var(--font-latin);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #F7F4EE;
  background: rgba(37, 41, 35, 0.62);
  border: 1px solid rgba(247, 244, 238, 0.22);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(37, 41, 35, 0.18);
  pointer-events: none;
  white-space: nowrap;
}
.hp-chip::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline-end: 8px;
  border-radius: 50%;
  background: var(--accent-sandstone, #C49A6C);
  vertical-align: 1px;
}
.hp-chip--1 { bottom: 14px; right: 14px; }
.hp-chip--2 { bottom: 62px; right: 14px; }
.hp-chip--3 { display: none; }

/* 6) Marquee strip under the hero */
.hp-marquee {
  direction: ltr;
  overflow: hidden;
  margin: 24px -20px 0;
  padding-block: 14px;
  border-block: 1px solid var(--border-hairline, rgba(37, 41, 35, 0.12));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.hp-marquee-track {
  display: flex;
  width: max-content;
  animation: hp-marquee 26s linear infinite;
}
.hp-marquee-track span {
  flex: none;
  padding-inline: 14px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-charcoal, #252923);
  white-space: nowrap;
}
.hp-marquee-track span.hp-sep {
  color: var(--accent-sandstone, #C49A6C);
  padding-inline: 0;
}
@keyframes hp-marquee {
  to { transform: translateX(-50%); }
}

/* 7) Selected Work Descriptions: Strictly 2 lines on cards and sheet */
.m-project-desc {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.62 !important;
  min-height: calc(1.62em * 2) !important;
  max-height: calc(1.62em * 2) !important;
  margin-bottom: 14px !important;
}
#m-sheet-summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 8) About Quote & Interactive Skill Chips + Timeline Cards */
.m-about-quote {
  white-space: nowrap !important;
  font-size: clamp(13.5px, 4.2vw, 19px) !important;
}
.m-skill-chip {
  position: relative;
  gap: 7px;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 220ms ease,
              box-shadow 220ms ease,
              background-color 220ms ease !important;
}
.m-skill-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent-sandstone-ink, #845830);
  flex-shrink: 0;
  animation: hp-dot-pulse 2.4s ease-in-out infinite;
}
.m-skill-chip:nth-child(2)::before { animation-delay: 0.4s; }
.m-skill-chip:nth-child(3)::before { animation-delay: 0.8s; }
.m-skill-chip:nth-child(4)::before { animation-delay: 1.2s; }
.m-skill-chip:active,
.m-skill-chip.is-active-chip {
  transform: translateY(-2px) scale(1.01);
  border-color: var(--accent-sandstone-ink, #845830);
  background-color: #EFE8DC;
  box-shadow: 0 6px 16px rgba(132, 88, 48, 0.12);
}

@keyframes hp-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  50% { transform: scale(1.35); opacity: 1; }
}

/* Process Timeline active step card polish */
.m-process-content {
  padding: 12px 14px !important;
  background-color: rgba(231, 223, 211, 0.36) !important;
  border: 1px solid var(--border-hairline, rgba(37, 41, 35, 0.12)) !important;
  border-radius: 10px !important;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 280ms ease,
              background-color 280ms ease,
              box-shadow 280ms ease;
}
.m-process-step.is-step-focused .m-process-content {
  background-color: #EFE9DF !important;
  border-color: rgba(132, 88, 48, 0.45) !important;
  box-shadow: 0 6px 18px rgba(37, 41, 35, 0.06);
  transform: translateX(-3px);
}
.m-process-circle.is-active-step {
  box-shadow: 0 0 0 4px rgba(196, 154, 108, 0.25);
  border-color: var(--accent-sandstone, #C49A6C);
}

/* 9) 3 Guarantee Cards — Distinctive Editorial Trust Cards with Scroll Progression */
.m-guarantees-list {
  gap: 14px !important;
}
.m-guarantee-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #FAF7F1 0%, #F1ECE2 100%) !important;
  border: 1px solid rgba(132, 88, 48, 0.2) !important;
  border-radius: 14px !important;
  padding: 16px 18px 15px 16px !important;
  box-shadow: 0 3px 10px rgba(37, 41, 35, 0.04) !important;
  transform: scale(0.985);
  transition: transform 340ms cubic-bezier(0.16, 1, 0.3, 1),
              background 340ms ease,
              border-color 340ms ease,
              box-shadow 340ms ease !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m-guarantee-accent-bar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3.5px;
  background: linear-gradient(90deg, #3E4F3C 0%, #C49A6C 50%, #845830 100%);
  transform-origin: right center;
  transform: scaleX(var(--card-progress, 0.24));
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.m-guarantee-card.is-highlighted,
.m-guarantee-card:active,
.m-guarantee-card:focus-visible {
  background: linear-gradient(145deg, #FFFDF9 0%, #EFE3D0 100%) !important;
  transform: translateY(-4px) scale(1.012);
  border-color: rgba(132, 88, 48, 0.72) !important;
  box-shadow: 0 14px 30px rgba(132, 88, 48, 0.16), inset -4px 0 0 #845830 !important;
}
.m-guarantee-card.is-highlighted .m-guarantee-accent-bar,
.m-guarantee-card:active .m-guarantee-accent-bar,
.m-guarantee-card:focus-visible .m-guarantee-accent-bar {
  transform: scaleX(1) !important;
}
.m-guarantee-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.m-guarantee-badge {
  margin-bottom: 0 !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  transition: color 260ms ease, transform 260ms ease;
}
.m-guarantee-card.is-highlighted .m-guarantee-badge {
  color: #6E4520 !important;
}
.m-guarantee-pill {
  font-size: 11.5px;
  font-weight: 700;
  color: #845830;
  background-color: rgba(196, 154, 108, 0.18);
  border: 1px solid rgba(132, 88, 48, 0.25);
  padding: 2.5px 11px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color 280ms ease,
              color 280ms ease,
              border-color 280ms ease,
              transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.m-guarantee-card.is-highlighted .m-guarantee-pill,
.m-guarantee-card:active .m-guarantee-pill {
  background-color: #3E4F3C;
  border-color: #3E4F3C;
  color: #F7F4EE;
  transform: scale(1.05);
}
.m-guarantee-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.m-guarantee-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 11px;
  background-color: rgba(196, 154, 108, 0.16);
  border: 1px solid rgba(132, 88, 48, 0.22);
  color: #845830;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 340ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 260ms ease,
              color 260ms ease,
              box-shadow 260ms ease;
}
.m-guarantee-icon svg {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
}
.m-guarantee-card.is-highlighted .m-guarantee-icon,
.m-guarantee-card:active .m-guarantee-icon {
  background-color: #845830;
  color: #F7F4EE;
  transform: scale(1.09) rotate(-6deg);
  box-shadow: 0 6px 16px rgba(132, 88, 48, 0.28);
}
.m-guarantee-copy {
  flex: 1;
  min-width: 0;
}
.m-guarantee-title {
  font-size: 15.5px !important;
  line-height: 1.35 !important;
  margin-bottom: 4px !important;
  transition: color 240ms ease;
}
.m-guarantee-card.is-highlighted .m-guarantee-title {
  color: #845830 !important;
}
.m-guarantee-desc {
  font-size: 13.5px !important;
  line-height: 1.58 !important;
  color: var(--text-secondary) !important;
  margin: 0 !important;
}
.m-guarantee-desc strong {
  color: var(--text-charcoal);
  font-weight: 700;
}

/* 10) WhatsApp Direct Button above Instagram: Strictly 1 line + ambient sheen */
.m-btn-whatsapp {
  position: relative;
  overflow: hidden;
  white-space: nowrap !important;
  padding-inline: 14px !important;
  font-size: clamp(13.5px, 3.8vw, 15px) !important;
  gap: 8px !important;
}
.m-btn-whatsapp-inner {
  white-space: nowrap !important;
  gap: 8px !important;
  min-width: 0;
}
.m-btn-whatsapp-inner span {
  white-space: nowrap !important;
}
.m-btn-whatsapp-phone {
  white-space: nowrap !important;
  flex-shrink: 0;
  font-size: 12.5px !important;
}
.m-btn-whatsapp::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: translateX(220%) skewX(-20deg);
  animation: hp-btn-sheen 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hp-btn-sheen {
  0%, 70%, 100% { transform: translateX(220%) skewX(-20deg); }
  35% { transform: translateX(-260%) skewX(-20deg); }
}

/* 11) Hardware-Accelerated Scroll Reveal from Bottom to Top */
.hp-reveal {
  opacity: 0;
  transform: translateY(38px) scale(0.985);
  transition: opacity 640ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 640ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.hp-reveal.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .hp-marquee-track,
  .m-skill-chip::before,
  .m-btn-whatsapp::after {
    animation: none !important;
  }
  .hp-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}