/* Vael Partners — page section styles (shared across Home / About / Services / Contact / Start) */

/* ===== Card icon (shared) =====
   Monoline SVG icons used in the Industries cards and Services rows.
   stroke="currentColor" in the markup, so color is set here. */
.card-icon {
  display: inline-flex;
  margin-bottom: var(--space-4);
  color: var(--accent);
}
.card-icon svg { width: 40px; height: 40px; display: block; }

/* ===== Hero ===== */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 6rem;
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.hero-copy .eyebrow { margin-bottom: var(--space-4); }
/* Scoped smaller ceiling than the generic h1 clamp: the home hero's line
   ("The bridge for regulated, premium brands moving between the U.S. and
   the Gulf.") runs 3-4 lines once the copy column was widened, and at the
   full 5.25rem ceiling that reads oversized rather than confident. */
.hero-copy h1 { margin-bottom: var(--space-5); font-size: clamp(2.25rem, 3.3vw + 1rem, 4.4rem); line-height: 1.05; }
.hero-actions { margin-top: var(--space-7); display: flex; gap: var(--space-4); flex-wrap: wrap; }

.hero-mark {
  justify-self: end;
  text-align: right;
  opacity: 0.9;
}
.hero-mark-word {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 9vw, 7.5rem);
  color: var(--ink);
  line-height: 0.95;
}
.hero-mark-word .dot { color: var(--accent); }
.hero-mark-sub {
  display: block;
  font-size: 0.85rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: 0.6rem;
}

/* Homepage hero image (replaces the .hero-mark wordmark treatment above,
   kept in place in case the wordmark is reused elsewhere). */
.hero-image {
  justify-self: end;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.scroll-cue {
  position: absolute;
  bottom: clamp(1.5rem, 4vw, 3rem);
  left: clamp(1.25rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--muted-2);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.scroll-cue svg { animation: cueBob 2.2s var(--ease-out-quart) infinite; }
@keyframes cueBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue svg { animation: none; } }

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-mark { justify-self: start; text-align: left; margin-top: var(--space-7); }
  .hero-image { justify-self: start; max-width: 280px; margin-top: var(--space-7); }
  .scroll-cue { display: none; }
}

/* ===== Gap section (why Vael) ===== */
.gap-section h2 { max-width: 20ch; margin-block: var(--space-4) var(--space-8); }
.gap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.gap-card {
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.gap-card h3 { margin-bottom: var(--space-3); font-size: 1.15rem; }
.gap-card--vael {
  background: var(--surface-2);
  border-color: oklch(0.730 0.095 82.0 / 0.35);
}
@media (max-width: 880px) { .gap-grid { grid-template-columns: 1fr; } }

/* ===== Industries ===== */
.industries-section .wrap { margin-bottom: var(--space-6); }
.industries-section h2 { margin-block: var(--space-4) var(--space-3); max-width: 22ch; }
/* Compound selector deliberately: Swiper's own bundled CSS sets a bare
   `.swiper { padding: 0 }` and loads after this stylesheet, so an
   equal-specificity `.industries-swiper { padding-inline: ... }` rule
   was silently losing that cascade fight (last same-specificity rule
   wins) and the carousel rendered edge-to-edge with no gutter — a real
   bug caught from a live screenshot, not a style choice. The extra
   ancestor here outranks Swiper's rule regardless of link order.
   overflow stays at Swiper's default `hidden` (removed my earlier
   `visible` override, which was also being overridden the same way,
   and hidden is actually correct for clipping off-screen slides). */
.industries-section .industries-swiper { padding-inline: clamp(1.25rem, 4vw, calc((100vw - var(--content-max)) / 2 + 3rem)); }
.industries-swiper .swiper-wrapper { padding-bottom: 0.5rem; }
.industry-card {
  height: auto;
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.industry-card:hover { border-color: var(--border-strong); background: var(--surface-2); }
.industry-card h3 { margin-bottom: var(--space-3); }

/* ===== Process ===== */
.process-section h2 { margin-block: var(--space-4) var(--space-8); max-width: 20ch; }
.process-list { display: flex; flex-direction: column; }
.process-item {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: var(--space-6);
  padding-block: var(--space-6);
  border-top: 1px solid var(--border);
}
.process-item:last-child { border-bottom: 1px solid var(--border); }
.process-number {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--accent);
  opacity: 0.85;
}
.process-item h3 { margin-bottom: var(--space-2); }
@media (max-width: 640px) {
  .process-item { grid-template-columns: 3rem 1fr; gap: var(--space-4); }
}

/* ===== Founder teaser ===== */
.founder-teaser-grid {
  display: grid;
  grid-template-columns: 0.4fr 0.6fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.founder-photo {
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.founder-photo span {
  font-family: var(--font-display);
  font-size: 3.5rem;
  color: var(--muted-2);
}
.founder-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.founder-teaser h2 { margin-block: 0 var(--space-3); max-width: 16ch; }
.founder-name { font-size: 0.95rem; font-weight: 600; color: var(--accent); margin-bottom: var(--space-4); }
.founder-teaser .btn { margin-top: var(--space-6); }
@media (max-width: 880px) {
  .founder-teaser-grid { grid-template-columns: 1fr; }
  .founder-photo { max-width: 220px; }
}

/* ===== Generic page hero (About / Services / Contact / Start) ===== */
.page-hero { padding-top: clamp(8rem, 14vw, 11rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.page-hero .eyebrow { margin-bottom: var(--space-4); }
.page-hero-title { margin-bottom: var(--space-5); max-width: 850px; }

/* ===== About: founder full ===== */
.founder-full-grid {
  display: grid;
  grid-template-columns: 0.42fr 0.58fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.founder-photo--lg { aspect-ratio: 4/5; }
.founder-full-grid h2 { margin-bottom: var(--space-2); }
.founder-full-grid .founder-name { margin-bottom: var(--space-5); }
@media (max-width: 880px) {
  .founder-full-grid { grid-template-columns: 1fr; }
  .founder-photo--lg { max-width: 260px; }
}

/* ===== About: story ===== */
.story-section .body-text { margin-bottom: var(--space-5); font-size: 1.05rem; }
.story-section .body-text:last-child { margin-bottom: 0; }

/* ===== About: values ===== */
.values-section h2 { margin-bottom: var(--space-7); max-width: 18ch; }
.values-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-7); }
.values-item { padding-top: var(--space-5); border-top: 1px solid var(--border); }
.values-item h3 { margin-bottom: var(--space-3); }
@media (max-width: 640px) { .values-grid { grid-template-columns: 1fr; } }

/* ===== Services ===== */
.service-row {
  display: grid;
  grid-template-columns: 0.9fr 1.5fr;
  gap: var(--space-6);
  padding-block: var(--space-7);
  border-top: 1px solid var(--border);
}
.services-list .wrap > .service-row:last-child { border-bottom: 1px solid var(--border); }
.service-row-head h2 { font-size: clamp(1.5rem, 1.6vw + 1rem, 2.1rem); }
.service-row-body .body-text { margin-bottom: var(--space-4); max-width: 60ch; }
.service-for { font-size: 0.92rem; color: var(--muted-2); }
.service-for strong { color: var(--muted); font-weight: 600; }
@media (max-width: 880px) {
  .service-row { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* ===== Contact ===== */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.contact-card { padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.contact-card h3 { margin-bottom: var(--space-3); }
.contact-card .body-text { margin-bottom: var(--space-4); }
.contact-link { display: block; color: var(--accent); font-weight: 600; margin-top: 0.4rem; }
.contact-link:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

/* ===== CTA band ===== */
.cta-band { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cta-band-inner { text-align: center; max-width: 640px; }
.cta-band-inner h2 { margin-bottom: var(--space-4); }
.cta-band-inner .lede { margin-inline: auto; margin-bottom: var(--space-6); }