/* ============================================================
   SPACING ULTIMATE — fix clipped card text + global air system
   Screenshot bug: titles/CTAs cut on card edges (overflow+pad)
   ============================================================ */

:root{
  /* 8pt grid */
  --sp-1: 8px;
  --sp-2: 12px;
  --sp-3: 16px;
  --sp-4: 20px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 48px;
  --sp-9: 64px;

  --pad-card-x: clamp(18px, 2.2vw, 24px);
  --pad-card-y: clamp(18px, 2vw, 22px);
  --gap-cards: clamp(18px, 2.5vw, 28px);
  --gutter-page: clamp(20px, 4.5vw, 40px);
  --radius-card: 22px;
}

/* —— Page shell —— */
.container{
  padding-inline: var(--gutter-page) !important;
}

/* —— GRID: real gaps, no crush —— */
.grid-3,
.grid-2,
.services-bento,
.steps,
.secrecy{
  gap: var(--gap-cards) !important;
  align-items: stretch;
}

@media (min-width: 901px) {
  .grid-3,
  .grid-3.services-bento{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 900px) and (min-width: 561px) {
  .grid-3.services-bento{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 560px) {
  .grid-3,
  .grid-3.services-bento,
  .grid-2{
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* —— CARDS: fix clipping (root cause) ——
   overflow:hidden on whole card + tight pad = Arabic glyphs cut.
   Solution: clip ONLY the media, never the text body.
*/
.card{
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;           /* CRITICAL — was clipping Arabic */
  border-radius: var(--radius-card) !important;
  min-width: 0 !important;                /* grid blowout fix */
  height: 100%;
  background: linear-gradient(165deg, rgba(26,34,56,.98), rgba(12,18,32,.99)) !important;
  border: 1px solid rgba(201,168,108,.18) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.35) !important;
  transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s, border-color .28s !important;
  /* contain hover scale paint without clipping body text */
  contain: layout style;
}
/* defeat ultimate/premium overflow:hidden */
.card,
a.card,
.services-bento .card{
  overflow: visible !important;
}
.card:hover{
  transform: translateY(-6px) !important;
  border-color: rgba(201,168,108,.42) !important;
  box-shadow: 0 22px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(201,168,108,.12) !important;
}

/* media wrapper clips image only */
.card > img,
.card .card-media{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: var(--radius-card) var(--radius-card) 0 0 !important;
  overflow: hidden;
}
/* if img is direct child, wrap behavior via clip on a pseudo-stack */
.card{
  /* isolate image round corners without clipping body */
}
.card > img{
  flex-shrink: 0;
  /* clip image corners by masking */
  border-radius: var(--radius-card) var(--radius-card) 0 0 !important;
  overflow: hidden;
  transform: translateZ(0); /* contain paint */
}
.card:hover > img{
  transform: scale(1.03) !important;
  transform-origin: center center;
}

/* TEXT ZONE — generous padding, never clip */
.card-body{
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: var(--pad-card-y) var(--pad-card-x) calc(var(--pad-card-y) + 4px) !important;
  min-width: 0 !important;
  overflow: visible !important;
  text-align: start !important;
  box-sizing: border-box !important;
  position: relative;
  z-index: 2;
  background: transparent !important;
}
.card-body h3{
  margin: 0 !important;
  padding: 0 !important;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem) !important;
  line-height: 1.45 !important;
  color: #F0E6D2 !important;
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: manual !important;
}
.card-body p{
  margin: 0 !important;
  padding: 0 !important;
  font-size: .95rem !important;
  line-height: 1.75 !important;
  color: #C4B8A4 !important;
  overflow: visible !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  flex: 1 1 auto;
}
.card-body .more{
  margin-top: 8px !important;
  padding: 4px 0 0 !important;
  display: inline-block !important;
  max-width: 100% !important;
  font-size: .9rem !important;
  line-height: 1.5 !important;
  color: #E0C47A !important;
  overflow: visible !important;
  white-space: normal !important;
  transform: none !important; /* was causing edge clip on hover */
  letter-spacing: .02em !important;
}
.card:hover .card-body .more{
  transform: none !important;
  color: #F0E0B0 !important;
}

/* Kill shine overlays that paint over text */
.card::after{
  display: none !important;
}
.card::before{
  /* keep subtle top sheen on image area only via gradient on border */
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Seals — top of IMAGE, start side (right in RTL), never over text */
.card .seal-num{
  position: absolute !important;
  top: 12px !important;
  z-index: 5 !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  font-family: var(--font-d), sans-serif !important;
  color: #1a1208 !important;
  background: linear-gradient(145deg, #F0E0B0, #C9A86C) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.4), 0 0 0 2px rgba(7,11,22,.35) !important;
}
html[dir=rtl] .card .seal-num,
[dir=rtl] .card .seal-num{
  right: 12px !important;
  left: auto !important;
  inset-inline-start: auto !important;
}
html[dir=ltr] .card .seal-num,
[dir=ltr] .card .seal-num{
  left: 12px !important;
  right: auto !important;
}

/* If seal is inside card-body by mistake, pull it out visually */
.card-body > .seal-num{
  position: absolute !important;
  top: auto !important;
  bottom: calc(100% + 12px) !important;
  inset-inline-start: 12px !important;
}

/* —— Section heads —— */
.section-head{
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem) !important;
  padding-inline: 4px !important;
}
.section-head h2,
.section-head p{
  overflow: visible !important;
  padding-inline: 2px !important;
}

/* —— Steps / plans / secrecy —— */
.step,
.plan,
.secrecy-item,
.metric{
  padding: var(--pad-card-y) var(--pad-card-x) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  min-width: 0 !important;
}
.step h3, .plan h3, .secrecy-item h3,
.step p, .plan p, .secrecy-item p{
  overflow-wrap: break-word !important;
  overflow: visible !important;
}

/* —— Hero text —— */
.hero-grid > div{
  min-width: 0 !important;
  max-width: 100% !important;
  padding-inline: 0 !important;
}
.hero h1, .lead, .hero-cta, .trust-row, .metrics{
  max-width: 100% !important;
  overflow: visible !important;
}
.hero-cta{
  gap: 12px !important;
}
.pill{
  padding: 8px 14px !important;
}

/* —— Prose / articles —— */
.prose{
  min-width: 0 !important;
  overflow: visible !important;
  padding-inline: 0 !important;
}
.prose h1, .prose h2, .prose h3, .prose p, .prose li{
  overflow-wrap: break-word !important;
  word-break: normal !important;
  padding-inline: 0 !important;
}
.ai-summary, .blog-toc, .faq details{
  box-sizing: border-box !important;
  padding: 16px 18px !important;
  overflow: visible !important;
}
.faq summary{
  overflow: visible !important;
  white-space: normal !important;
  line-height: 1.5 !important;
  gap: 12px !important;
}

/* —— Chips —— */
.chips{
  gap: 10px !important;
  padding: 4px 0 !important;
}
.chip{
  padding: 10px 16px !important;
  overflow: visible !important;
  white-space: normal !important;
  text-align: center;
  line-height: 1.4 !important;
}

/* —— CTA band —— */
.cta-band .inner{
  padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 4vw, 2rem) !important;
  box-sizing: border-box !important;
}
.cta-band h2, .cta-band p{
  overflow-wrap: break-word !important;
  padding-inline: 4px !important;
}

/* —— Nav —— */
.nav{
  padding-inline: var(--gutter-page) !important;
}
.nav-inner{
  padding: 10px 12px 10px 14px !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}

/* —— Dock —— */
.dock{
  padding: 12px var(--gutter-page) calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}
.dock a{
  padding: 12px 8px !important;
  overflow: visible !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
}

/* —— Drawer —— */
.drawer{
  padding: max(20px, env(safe-area-inset-top)) var(--gutter-page) calc(28px + env(safe-area-inset-bottom)) !important;
}
.drawer-nav a{
  padding: 14px 18px !important;
  overflow: visible !important;
  white-space: normal !important;
}

/* —— Page hero —— */
.page-hero .container{
  padding-inline: var(--gutter-page) !important;
}
.page-hero h1{
  overflow-wrap: break-word !important;
  padding-inline: 0 !important;
  line-height: 1.35 !important;
}

/* —— Footer —— */
.foot-grid{
  gap: var(--sp-6) !important;
}
footer .container{
  padding-inline: var(--gutter-page) !important;
}

/* —— Disable transforms that clip text near rounded edges —— */
.card:hover .card-body .more,
[dir=rtl] .card:hover .card-body .more{
  transform: none !important;
}

/* Image hover scale contained — only scale img, card stays overflow visible
   so we clip img via border-radius + separate stacking */
.card > img{
  transition: transform .5s cubic-bezier(.16,1,.3,1), filter .35s !important;
}
/* Wrap paint: use clip-path on image only */
.card > img{
  clip-path: inset(0 round var(--radius-card) var(--radius-card) 0 0);
}

/* Story block air */
.story{
  padding: clamp(1.25rem, 3vw, 1.75rem) !important;
  gap: clamp(1.25rem, 3vw, 2rem) !important;
  overflow: visible !important;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .card:hover,
  .card:hover > img{
    transform: none !important;
  }
}