/* ==========================================================================
   Bcallvn — Page sections
   ========================================================================== */

/* --------------------------------------------------------------------------
   Home hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3.5rem, 7vw, 6rem);
  background: var(--bg);
}

/* Ambient brand glow behind the hero */
.hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 130%;
  background: var(--glow);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { order: -1; }
}

.hero__title {
  font-size: var(--fs-4xl);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin-bottom: var(--sp-5);
}

.hero__text {
  font-size: var(--fs-md);
  color: var(--text-muted);
  max-width: 34rem;
  margin-bottom: var(--sp-7);
  line-height: 1.7;
}

.hero__rule {
  width: 100%;
  max-width: 26rem;
  height: 1px;
  background: linear-gradient(90deg, var(--border-strong), transparent);
  margin-bottom: var(--sp-6);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}

.hero__meta-item strong {
  display: block;
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.hero__meta-item span {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}

/* --------------------------------------------------------------------------
   Hero visual — a layered product mock drawn entirely in CSS (no image
   dependency). A soft coral→orange blob sits behind a floating dashboard
   panel, with two glass cards drifting in front. Echoes the reference's
   "product interface" aesthetic while staying original and lightweight.
   -------------------------------------------------------------------------- */
.hero__visual {
  position: relative;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}

.hero__stage {
  position: relative;
  aspect-ratio: 5 / 4;
  width: 100%;
}

/* Organic gradient backdrop */
.hero__blob {
  position: absolute;
  inset: 4% 2% 8% 6%;
  background: var(--brand-gradient);
  border-radius: 42% 58% 56% 44% / 48% 42% 58% 52%;
  filter: blur(2px);
  opacity: 0.92;
  box-shadow: 0 40px 90px rgba(var(--brand-red-rgb), 0.28);
  animation: hero-blob 14s var(--ease) infinite;
}

@keyframes hero-blob {
  0%, 100% { border-radius: 42% 58% 56% 44% / 48% 42% 58% 52%; transform: translateY(0) rotate(0deg); }
  50%      { border-radius: 56% 44% 46% 54% / 42% 56% 44% 58%; transform: translateY(-10px) rotate(-1.5deg); }
}

/* The dashboard card */
.hero__panel {
  position: absolute;
  top: 16%;
  left: 8%;
  width: 72%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: hero-float 9s var(--ease) infinite;
}

.hero__panel-bar {
  display: flex;
  gap: 0.4rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.hero__panel-bar span {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--border-strong);
}

.hero__panel-bar span:first-child { background: var(--brand-red); }
.hero__panel-bar span:nth-child(2) { background: var(--brand-orange); }

.hero__panel-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }

.hero__metric { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.hero__metric-label { font-size: var(--fs-xs); color: var(--text-subtle); font-weight: 600; }
.hero__metric-value {
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  background: var(--brand-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero__bars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: end;
  gap: 0.5rem;
  height: 5.5rem;
}

.hero__bars i {
  display: block;
  height: var(--h, 50%);
  border-radius: var(--r-sm) var(--r-sm) 2px 2px;
  background: linear-gradient(180deg, var(--brand-orange), var(--brand-red));
  opacity: 0.85;
}

.hero__bars i:last-child { opacity: 1; box-shadow: 0 6px 16px rgba(var(--brand-orange-rgb), 0.4); }

.hero__panel-rows { display: flex; flex-direction: column; gap: 0.5rem; }

.hero__panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 0.55rem 0.75rem;
  border-radius: var(--r-sm);
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
}

.hero__panel-row span { color: var(--text-muted); }
.hero__panel-row b { color: var(--accent); font-weight: 700; }

/* Floating glass cards */
.hero__float {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.95rem;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  animation: hero-float 7s var(--ease) infinite;
}

.hero__float--1 { top: 8%; right: -2%; animation-delay: 1s; }
.hero__float--2 { bottom: 9%; left: 0; animation-delay: 2.4s; }

.hero__float b { display: block; line-height: 1.15; }
.hero__float small { color: var(--text-subtle); font-weight: 500; font-size: 0.72rem; }

.hero__float-icon {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border-radius: var(--r-sm);
  background-image: var(--brand-gradient-r);
  color: var(--on-brand);
}

.hero__float-icon svg { width: 1rem; height: 1rem; }

.hero__float-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background-image: var(--brand-gradient-r);
  flex: none;
}

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

@media (max-width: 560px) {
  .hero__float { font-size: 0.7rem; padding: 0.5rem 0.7rem; }
  .hero__float--1 { right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__blob, .hero__panel, .hero__float { animation: none; }
}

/* --------------------------------------------------------------------------
   Page hero (interior pages)
   -------------------------------------------------------------------------- */

.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.75rem, 6vw, 5rem);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: -60% -20% auto auto;
  width: 45rem;
  height: 45rem;
  background: var(--glow);
  pointer-events: none;
}

.page-hero__inner { position: relative; }

.page-hero h1 {
  font-size: var(--fs-3xl);
  margin-block: var(--sp-4) var(--sp-4);
}

/* .page-hero .lead { max-width: 44rem; } */

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* --------------------------------------------------------------------------
   Marquee — trusted-by / capability strip
   -------------------------------------------------------------------------- */

/* Trusted-by / capability band wrapper */
.trust-strip {
  padding-block: clamp(2rem, 4vw, 3rem);
  border-block: 1px solid var(--border);
  background: var(--bg-alt);
}

.trust-strip__label {
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: var(--sp-5);
}

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee__track {
  display: flex;
  gap: var(--sp-8);
  width: max-content;
  animation: marquee 34s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

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

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-subtle);
  white-space: nowrap;
}

.marquee__item svg { width: 1.1rem; height: 1.1rem; color: var(--brand-orange); }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Split feature section (image/visual + copy)
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.split--reverse > *:first-child { order: 2; }

@media (max-width: 860px) {
  .split--reverse > *:first-child { order: 0; }
}

.check-list {
  list-style: none;
  padding: 0;
  margin: var(--sp-5) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.check-list svg {
  width: 1.2rem;
  height: 1.2rem;
  flex: none;
  margin-top: 0.18rem;
  color: var(--brand-orange);
}

/* Decorative panel used opposite copy blocks */
.visual-panel {
  position: relative;
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background:
    radial-gradient(130% 110% at 15% 0%, var(--accent-soft) 0%, transparent 55%),
    var(--surface);
  padding: var(--sp-7);
  overflow: hidden;
  min-height: 20rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-4);
}

.visual-panel::after {
  content: "";
  position: absolute;
  right: -25%;
  bottom: -35%;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  background: var(--brand-gradient);
  opacity: 0.16;
  filter: blur(28px);
}

/* Mini code/spec rows inside a visual panel */
.spec-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 0.85rem 1.1rem;
  border-radius: var(--r-md);
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: var(--fs-sm);
}

.spec-row span:first-child { color: var(--text-muted); }
.spec-row span:last-child { font-weight: 700; color: var(--text); }

/* --------------------------------------------------------------------------
   Process / timeline
   -------------------------------------------------------------------------- */

.process {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--sp-5);
  counter-reset: step;
}

.process__step {
  position: relative;
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: all var(--t-base) var(--ease);
}

.process__step:hover {
  border-color: var(--brand-orange);
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.process__num {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 800;
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}

.process__step:hover .process__num {
  background-image: var(--brand-gradient-r);
  color: var(--on-brand);
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-2xl);
  padding: clamp(2.5rem, 5vw, 4rem);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(214, 0, 255, 0.22) 0%, transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(123, 44, 255, 0.22) 0%, transparent 55%),
    var(--surface);
  border: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1.5fr auto;
  align-items: center;
  gap: var(--sp-6);
}

@media (max-width: 820px) {
  .cta-band { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}

.cta-band h2 { font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }
.cta-band p { max-width: 40rem; margin: 0; }

.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.quote-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  height: 100%;
}

.quote-card__mark {
  font-size: 3rem;
  line-height: 0.7;
  font-weight: 800;
  background: var(--brand-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.quote-card blockquote {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.75;
  flex: 1;
}

.quote-card__author {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

.avatar {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  border-radius: var(--r-pill);
  background-image: var(--brand-gradient-r);
  color: var(--on-brand);
  font-weight: 700;
  font-size: var(--fs-sm);
}

.quote-card__name { font-weight: 700; font-size: var(--fs-sm); color: var(--text); }
.quote-card__role { font-size: var(--fs-xs); color: var(--text-subtle); }

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: var(--sp-5);
  align-items: stretch;
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-7) var(--sp-6);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: all var(--t-base) var(--ease);
}

.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

.price-card--featured {
  border-color: var(--brand-orange);
  box-shadow: var(--shadow-accent);
}

.price-card__flag {
  position: absolute;
  top: -0.8rem;
  left: 50%;
  translate: -50% 0;
  padding: 0.3rem 0.9rem;
  border-radius: var(--r-pill);
  background-image: var(--brand-gradient-r);
  color: var(--on-brand);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}

.price-card__name { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }

.price-card__desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  min-height: 3rem;
  margin-bottom: var(--sp-5);
}

.price-card__amount {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-bottom: var(--sp-2);
}

.price-card__amount strong {
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.price-card__amount span { font-size: var(--fs-sm); color: var(--text-subtle); }

.price-card__note {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  margin-bottom: var(--sp-5);
}

.price-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
}

.price-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.price-card__features svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  margin-top: 0.2rem;
  color: var(--brand-orange);
}

/* Currency switch */
.switch {
  display: inline-flex;
  padding: 0.28rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  gap: 0.2rem;
}

.switch button {
  padding: 0.45rem 1.1rem;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--t-fast) var(--ease);
}

.switch button[aria-pressed="true"] {
  background-image: var(--brand-gradient-r);
  color: var(--on-brand);
}

/* --------------------------------------------------------------------------
   Article / long-form content
   -------------------------------------------------------------------------- */

.article-body { max-width: var(--container-prose); font-size: var(--fs-md); }

.body-post {max-width: 80ch;}

.article-body > * + * { margin-top: var(--sp-5); }

.article-body h2 {
  font-size: var(--fs-xl);
  margin-top: var(--sp-8);
  scroll-margin-top: 6rem;
}

.article-body h3 {
  font-size: var(--fs-lg);
  margin-top: var(--sp-6);
  scroll-margin-top: 6rem;
}

.article-body p { line-height: 1.8; }

.article-body ul,
.article-body ol {
  padding-left: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  color: var(--text-muted);
}

.article-body li::marker { color: var(--brand-orange); }

.article-body blockquote {
  margin: var(--sp-6) 0;
  padding: var(--sp-5) var(--sp-6);
  border-left: 3px solid var(--brand-orange);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--surface-2);
  font-size: var(--fs-md);
  color: var(--text);
}

.article-body a { text-decoration: underline; text-underline-offset: 3px; }

.article-body img { border-radius: var(--r-lg); margin-block: var(--sp-6); }

.article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.article-body th,
.article-body td {
  border: 1px solid var(--border);
  padding: 0.7rem 0.9rem;
  text-align: left;
}

.article-body th { background: var(--surface-2); font-weight: 700; }

/* Legal documents: wide article column + fixed sidebar */
.legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.legal-layout .legal-aside {
  position: sticky;
  top: 6rem;
}

@media (max-width: 960px) {
  .legal-layout {
    grid-template-columns: 1fr;
  }
  .legal-layout .legal-aside {
    position: static;
    top: auto;
  }
}

/* Legal documents get tighter numbering */
.legal-body { max-width: 80ch; }
.legal-body h2 { font-size: var(--fs-lg); margin-top: var(--sp-8); }
.legal-body h3 { font-size: var(--fs-md); margin-top: var(--sp-5); }
.legal-body p,
.legal-body li { font-size: var(--fs-sm); line-height: 1.8; }

/* --------------------------------------------------------------------------
   Blog / post meta
   -------------------------------------------------------------------------- */

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}

.post-meta__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

/* Filter bar */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-bottom: var(--sp-6);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--border);
}

/* Search sits to the right of the category chips on wide screens and drops to
   its own full-width row when there is no space, so it never overflows. */
.blog-search {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
  min-width: min(16rem, 100%);
}

.blog-search .input { min-width: 0; flex: 1; }

@media (max-width: 560px) {
  .blog-search { margin-left: 0; width: 100%; }
}

/* --------------------------------------------------------------------------
   Careers
   -------------------------------------------------------------------------- */

.job-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: all var(--t-base) var(--ease);
}

.job-row:hover {
  border-color: var(--brand-orange);
  transform: translateX(4px);
}

@media (max-width: 700px) {
  .job-row { grid-template-columns: 1fr; }
}

.job-row__title { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.job-row__title a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--text);
}
.job-row:hover .job-row__title a { color: var(--accent); }

.job-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}

.job-row__meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.job-row__meta svg { width: 0.95rem; height: 0.95rem; }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.contact-card {
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
}

.contact-item {
  display: flex;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--hairline);
}

.contact-item:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-item:first-of-type { padding-top: 0; }

.contact-item__icon {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  flex: none;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--brand-orange);
}

.contact-item__icon svg { width: 1.25rem; height: 1.25rem; }

.contact-item__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--text-subtle);
  margin-bottom: 0.25rem;
}

.contact-item__value { font-size: var(--fs-sm); color: var(--text); font-weight: 500; }
.contact-item__value a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--text);
}
.contact-item__value a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   404 / error
   -------------------------------------------------------------------------- */

.error-page {
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--sp-10);
}

.error-page__code {
  font-size: clamp(5rem, 18vw, 11rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.05em;
  background: var(--brand-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Breadcrumbs sit directly above the eyebrow in the interior hero; give them
   room so the two do not read as one block on narrow screens. */
.page-hero__inner .breadcrumbs { margin-bottom: var(--sp-5); }

/* --------------------------------------------------------------------------
   Client portal
   -------------------------------------------------------------------------- */

.portal {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

@media (max-width: 860px) {
  .portal { grid-template-columns: 1fr; }
}

.portal__nav {
  position: sticky;
  top: calc(var(--header-h) + 1rem);
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

@media (max-width: 860px) {
  .portal__nav { position: static; }
}

.portal__user {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.portal__user-name { font-weight: 700; font-size: var(--fs-sm); line-height: 1.2; }
.portal__user-sub  { font-size: var(--fs-xs); color: var(--text-subtle); }

.portal__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.portal__link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.portal__link:hover { background: var(--surface-2); color: var(--text); }

.portal__link.is-active {
  background-image: var(--brand-gradient-r);
  color: var(--on-brand);
  font-weight: 600;
}

.portal__link svg { width: 1.1rem; height: 1.1rem; flex: none; }

.portal__main { min-width: 0; }

/* Summary tiles */
.portal-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.portal-stat {
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.portal-stat__value {
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.portal-stat__label { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 0.35rem; }

/* ==========================================================================
   Home page — "bc-" design system
   --------------------------------------------------------------------------
   Standalone component set used by resources/views/pages/home.blade.php.
   Built entirely on the shared theme tokens in base.css so it tracks the
   light / dark toggle automatically.
   ========================================================================== */

.bc-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Shared section rhythm ---------------------------------------------------- */

.bc-section { padding-block: var(--section-y); }
.bc-section--soft { background: var(--bg-alt); }

.bc-label {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-4);
}

.bc-label--light { color: var(--brand-orange); }

/* Buttons ------------------------------------------------------------------ */

.bc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}

.bc-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.85em 1.6em;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-base) var(--ease),
              background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

.bc-btn:hover { transform: translateY(-2px); }

.bc-btn--primary {
  background: var(--brand-gradient);
  color: var(--on-brand);
  box-shadow: var(--shadow-accent);
}
.bc-btn--primary:hover { color: var(--on-brand); }

.bc-btn--outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.bc-btn--outline:hover { color: var(--text); border-color: var(--accent); }

.bc-btn--white {
  background: #ffffff;
  color: #262638;
}
.bc-btn--white:hover { color: #262638; }

.bc-btn--dark {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
}
.bc-btn--dark:hover { color: #ffffff; border-color: #ffffff; }

.bc-text-link {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--accent);
  white-space: nowrap;
}

/* Section headings --------------------------------------------------------- */

.bc-heading-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
}

.bc-heading-row h2 { font-size: var(--fs-2xl); }
.bc-heading-row > p { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.bc-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem);
  background: var(--bg);
}

.bc-hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 130%;
  background: var(--glow);
  pointer-events: none;
}

.bc-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.bc-hero__title {
  font-size: var(--fs-3xl);
  line-height: 1.02;
  margin-bottom: var(--sp-4);
}

.bc-hero__title span {
  background: var(--brand-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.bc-hero__subtitle {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--sp-4);
  line-height: 35px;
}

.bc-hero__text {
  font-size: var(--fs-md);
  max-width: 48ch;
  margin-bottom: var(--sp-6);
}

.bc-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: var(--sp-8);
}

.bc-hero__stats div { display: flex; flex-direction: column; }
.bc-hero__stats strong {
  font-size: var(--fs-2xl);
  background: var(--brand-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.bc-hero__stats span { font-size: var(--fs-sm); color: var(--text-subtle); }

/* --------------------------------------------------------------------------
   Hero visual — centred orbital "+" composition
   Layer 1: background (page)   Layer 2: orbit rings
   Layer 3: animated + buttons  Layer 4: central card
   Configurable via the custom properties below.
   -------------------------------------------------------------------------- */
.bc-hero__visual {
  --orbit-size: clamp(260px, 30vw, 380px);   /* diameter of the + orbit ring   */
  --orbit-duration: 11s;                       /* one full loop (8–12s)          */
  --plus-size: 36px;                           /* + button diameter (34–38px)    */
  --plus-purple: var(--accent);
  --plus-glow: rgba(123, 44, 255, 0.45);

  position: relative;
  min-height: 460px;
  display: grid;
  place-items: center;
  isolation: isolate;
}

/* Layer 2 — orbit rings, perfectly centred on the composition. */
.bc-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  translate: -50% -50%;
  z-index: 1;
  pointer-events: none;
}
.bc-orbit--one {
  width: var(--orbit-size);
  height: var(--orbit-size);
  border: 1.5px dashed var(--border-strong);
  opacity: 0.55;
}
.bc-orbit--two {
  width: calc(var(--orbit-size) * 0.66);
  height: calc(var(--orbit-size) * 0.66);
  border: 1px solid var(--accent-soft);
  opacity: 0.6;
}

/* Layer 3 — a centred, rotating track that carries the four buttons. */
.bc-orbit-track {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--orbit-size);
  height: var(--orbit-size);
  translate: -50% -50%;
  z-index: 3;
  will-change: transform;
  animation: bc-orbit-spin var(--orbit-duration) linear infinite;
}

@keyframes bc-orbit-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* The four + buttons sit at 12/3/6/9 o'clock on the track edge. */
.bc-orbit-plus {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--plus-size);
  height: var(--plus-size);
  margin: calc(var(--plus-size) / -2) 0 0 calc(var(--plus-size) / -2);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: var(--on-brand);
  box-shadow: 0 6px 16px var(--plus-glow), var(--shadow-accent);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  will-change: transform;
}

/* Position each button on the ring, then run an independent, subtle pulse.
   The radius is half the orbit; translate keeps them on the circle edge. */
.bc-orbit-plus--top    { transform: rotate(0deg)   translateY(calc(var(--orbit-size) / -2)) rotate(0deg); }
.bc-orbit-plus--right  { transform: rotate(90deg)  translateY(calc(var(--orbit-size) / -2)) rotate(-90deg); }
.bc-orbit-plus--bottom { transform: rotate(180deg) translateY(calc(var(--orbit-size) / -2)) rotate(-180deg); }
.bc-orbit-plus--left   { transform: rotate(270deg) translateY(calc(var(--orbit-size) / -2)) rotate(-270deg); }

/* Counter-rotate the whole track's spin so the "+" glyph stays upright. */
.bc-orbit-plus__icon {
  display: block;
  font-size: calc(var(--plus-size) * 0.55);
  font-weight: 700;
  line-height: 1;
  animation: bc-orbit-counter var(--orbit-duration) linear infinite;
  will-change: transform;
}
@keyframes bc-orbit-counter {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* Subtle pulse layer — a soft glow ring that breathes, no layout impact. */
.bc-orbit-plus::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 var(--plus-glow);
  animation: bc-orbit-pulse 3.2s var(--ease) infinite;
}
.bc-orbit-plus--right::after  { animation-delay: 0.8s; }
.bc-orbit-plus--bottom::after { animation-delay: 1.6s; }
.bc-orbit-plus--left::after   { animation-delay: 2.4s; }

@keyframes bc-orbit-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--plus-glow); opacity: 0.9; }
  50%      { box-shadow: 0 0 0 8px rgba(123, 44, 255, 0); opacity: 1; }
}

.bc-orbit-plus:hover,
.bc-orbit-plus:focus-visible {
  box-shadow: 0 8px 22px var(--plus-glow), var(--shadow-accent);
}
.bc-orbit-plus:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 3px;
}

.bc-dashboard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-5);
}

/* Layer 4 — central card, above the orbit + buttons, visually stable. */
.bc-dashboard--main {
  position: relative;
  z-index: 4;
  width: min(72%, 300px);
}

.bc-dashboard__top { display: flex; gap: 6px; margin-bottom: var(--sp-4); }
.bc-dashboard__top span {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface-hover);
}
.bc-dashboard__top span:first-child { background: var(--brand-red); }
.bc-dashboard__top span:nth-child(2) { background: var(--warning); }
.bc-dashboard__top span:nth-child(3) { background: var(--success); }

.bc-dashboard__body small { color: var(--text-subtle); font-size: var(--fs-xs); }
.bc-dashboard__body strong { display: block; font-size: var(--fs-xl); margin-bottom: var(--sp-4); }

.bc-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 90px;
}
.bc-chart i {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: var(--brand-gradient);
  opacity: 0.85;
}

/* Companion stat cards — same full card style as .bc-dashboard--main
   (dot header, muted caption, large heading), just positioned around it and
   sized a little smaller. */
.bc-dashboard--small {
  bottom: 6%;
  left: 0;
  width: min(52%, 210px);
}

.bc-dashboard--floating {
  top: 2%;
  right: 0;
  width: min(52%, 210px);
}
/* Keep the shared body typography from .bc-dashboard__body, but drop the
   bottom margin on the heading since these cards have no chart beneath it. */
.bc-dashboard--small .bc-dashboard__body strong,
.bc-dashboard--floating .bc-dashboard__body strong {
  margin-bottom: 0;
}

/* Accessibility — honour reduced-motion: freeze the orbit + pulse but keep
   the composition intact and the buttons usable. */
@media (prefers-reduced-motion: reduce) {
  .bc-orbit-track,
  .bc-orbit-plus__icon,
  .bc-orbit-plus::after {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Mini nav / trust strip
   -------------------------------------------------------------------------- */

.bc-mini-nav {
  border-block: 1px solid var(--border);
  background: var(--bg-alt);
}
.bc-mini-nav__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 4vw, 3rem);
  padding-block: var(--sp-5);
}
.bc-mini-nav__inner span {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   Feature blocks (image + content)
   -------------------------------------------------------------------------- */

.bc-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.bc-feature--reverse .bc-feature__visual { order: 2; }

.bc-feature__content h2 { font-size: var(--fs-2xl); margin-bottom: var(--sp-4); }
.bc-feature__content h2 span {
  display: block;
  background: var(--brand-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.bc-feature__content > p { margin-bottom: var(--sp-6); font-size: var(--fs-md); }

.bc-feature__points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.bc-feature__points div {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.bc-feature__points strong {
  font-size: var(--fs-md);
  color: var(--accent);
}
.bc-feature__points span { color: var(--text-muted); font-size: var(--fs-sm); }

/* Browser mock */
.bc-browser {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.bc-browser__bar {
  display: flex;
  gap: 6px;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.bc-browser__bar span {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface-hover);
}
.bc-browser__screen {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
}
.bc-screen-card {
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--brand-gradient);
  color: var(--on-brand);
}
.bc-screen-card small { font-size: var(--fs-xs); opacity: 0.85; color: inherit; }
/* Explicit colour: the global `strong` rule sets --text (dark navy in light
   mode) which is otherwise unreadable on the violet gradient fill. */
.bc-screen-card strong { display: block; font-size: var(--fs-lg); color: inherit; }
.bc-screen-card span { font-size: var(--fs-sm); color: inherit; }
.bc-screen-stat {
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.bc-screen-stat strong { display: block; font-size: var(--fs-xl); color: var(--accent); }
.bc-screen-stat small { color: var(--text-subtle); font-size: var(--fs-xs); }
.bc-screen-footer {
  display: flex;
  gap: var(--sp-4);
  color: var(--text-subtle);
  font-size: var(--fs-xs);
}

/* Check list */
.bc-check-list {
  list-style: none;
  padding: 0;
  margin-bottom: var(--sp-6);
  display: grid;
  gap: var(--sp-3);
}
.bc-check-list li {
  position: relative;
  padding-left: 1.8rem;
  color: var(--text-muted);
}
.bc-check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.25rem; height: 1.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Benefits grid
   -------------------------------------------------------------------------- */

.bc-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.bc-benefit {
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.bc-benefit:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}
.bc-benefit__icon {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  margin-bottom: var(--sp-4);
}
.bc-benefit h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.bc-benefit p { font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   Services grid
   -------------------------------------------------------------------------- */

.bc-services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
.bc-service-card {
  position: relative;
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.bc-service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}
.bc-service-card__number {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-subtle);
  margin-bottom: var(--sp-3);
}
.bc-service-card__icon {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: var(--sp-4);
}
/* Constrain the inline SVG icon (component emits no intrinsic size) */
.bc-service-card__icon svg { width: 26px; height: 26px; }

.bc-service-card h3 { font-size: var(--fs-md); margin-bottom: var(--sp-3); }
.bc-service-card h3 a { color: var(--text); }
.bc-service-card h3 a:hover { color: var(--accent); }
.bc-service-card p { font-size: var(--fs-sm); }
.bc-service-card__arrow {
  display: inline-flex;
  margin-top: var(--sp-4);
  width: 34px; height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--accent);
  font-weight: 700;
}
.bc-service-card:hover .bc-service-card__arrow {
  background: var(--brand-gradient);
  color: var(--on-brand);
}

/* --------------------------------------------------------------------------
   Dark sections (travel, global presence)
   -------------------------------------------------------------------------- */

.bc-dark-section {
  background: #1e1e2c;
  color: #ffffff;
  padding-block: var(--section-y);
}
.bc-dark-section h2 { color: #ffffff; }
.bc-dark-section p { color: rgba(255, 255, 255, 0.72); }

.bc-travel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.bc-travel__content h2 { font-size: var(--fs-2xl); margin-bottom: var(--sp-4); }
.bc-travel__content > p { margin-bottom: var(--sp-5); max-width: 46ch; }

.bc-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-pill);
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  margin-bottom: var(--sp-5);
}
.bc-search span { color: rgba(255, 255, 255, 0.6); font-size: var(--fs-sm); }
.bc-search button {
  border: 0;
  border-radius: var(--r-pill);
  padding: 0.65em 1.4em;
  background: var(--brand-gradient);
  color: var(--on-brand);
  font-weight: 600;
  cursor: pointer;
}

.bc-travel__tags,
.bc-marketplace__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.bc-travel__tags span {
  padding: 0.4em 1em;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--fs-sm);
}

.bc-travel__visual {
  position: relative;
  min-height: 320px;
}
.bc-travel-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  backdrop-filter: blur(6px);
}
.bc-travel-card small { color: rgba(255, 255, 255, 0.6); font-size: var(--fs-xs); }
.bc-travel-card strong { display: block; font-size: var(--fs-lg); color: #fff; }
.bc-travel-card span { color: var(--brand-orange); font-size: var(--fs-sm); }
.bc-travel-card--large { top: 10%; left: 6%; width: 60%; }
.bc-travel-card--top { top: 0; right: 4%; width: 42%; }
.bc-travel-card--bottom { bottom: 4%; right: 12%; width: 42%; }

/* Global presence */
.bc-global__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.bc-global__locations {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.bc-global__locations div {
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.bc-global__locations span { color: var(--brand-orange); }
.bc-global__locations strong { display: block; color: #fff; }
.bc-global__locations small { color: rgba(255, 255, 255, 0.55); font-size: var(--fs-xs); }

.bc-map {
  position: relative;
  min-height: 260px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 30% 40%, rgba(123,44,255,0.14), transparent 40%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.bc-map-dot {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--brand-orange);
  box-shadow: 0 0 0 6px rgba(123, 44, 255, 0.22);
}
.bc-map-dot--one { top: 30%; left: 25%; }
.bc-map-dot--two { top: 45%; left: 60%; }
.bc-map-dot--three { top: 65%; left: 40%; }
.bc-map-dot--four { top: 20%; left: 72%; }

/* --------------------------------------------------------------------------
   Visa card mock
   -------------------------------------------------------------------------- */

.bc-visa-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-6);
  max-width: 380px;
  margin-inline: auto;
}
.bc-visa-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-5);
}
.bc-visa-card__header span { color: var(--success); }
.bc-visa-progress {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.bc-visa-progress span {
  flex: 1;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-hover);
}
.bc-visa-progress span.active { background: var(--brand-gradient); }
.bc-visa-row {
  display: flex;
  justify-content: space-between;
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.bc-visa-row span { color: var(--text-subtle); font-size: var(--fs-sm); }
.bc-visa-button {
  margin-top: var(--sp-5);
  text-align: center;
  padding: 0.85em;
  border-radius: var(--r-pill);
  background: var(--brand-gradient);
  color: var(--on-brand);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Property grid (real estate)
   -------------------------------------------------------------------------- */

.bc-property-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.bc-property-card {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.bc-property-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.bc-property-card__image {
  position: relative;
  height: 170px;
  background: var(--brand-gradient);
}
.bc-property-card__image span {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  padding: 0.25em 0.7em;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.85);
  color: #262638;
  font-size: var(--fs-xs);
  font-weight: 700;
}
.bc-property-card__body { padding: var(--sp-5); }
.bc-property-card__body small { color: var(--text-subtle); font-size: var(--fs-xs); }
.bc-property-card__body h3 { font-size: var(--fs-md); margin-block: var(--sp-1) var(--sp-4); }
.bc-property-card__body > div {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.bc-property-card__body strong { margin-left: auto; color: var(--accent); }

/* --------------------------------------------------------------------------
   Ecommerce mock
   -------------------------------------------------------------------------- */

.bc-commerce {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-6);
}
.bc-commerce__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-5);
}
.bc-commerce__header span { color: var(--success); }
.bc-commerce__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.bc-commerce__stats div {
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.bc-commerce__stats small { display: block; color: var(--text-subtle); font-size: var(--fs-xs); }
.bc-commerce__stats strong { font-size: var(--fs-md); color: var(--accent); }
.bc-commerce__chart {
  height: 90px;
  border-radius: var(--r-md);
  margin-bottom: var(--sp-5);
  background:
    linear-gradient(180deg, var(--accent-soft), transparent),
    repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px 40px);
}
.bc-commerce__buttons {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.bc-commerce__buttons span {
  width: 40px; height: 8px;
  border-radius: var(--r-pill);
  background: var(--surface-hover);
}
.bc-commerce__buttons b {
  margin-left: auto;
  width: 60px; height: 28px;
  border-radius: var(--r-pill);
  background: var(--brand-gradient);
}

/* --------------------------------------------------------------------------
   Marketplace
   -------------------------------------------------------------------------- */

.bc-marketplace {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.bc-marketplace__card {
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.bc-marketplace__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.bc-marketplace__icon {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-lg);
  font-weight: 700;
  margin-bottom: var(--sp-4);
}
.bc-marketplace__card h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.bc-marketplace__card p { font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.bc-marketplace__card span { color: var(--accent); font-weight: 600; font-size: var(--fs-sm); }

.bc-marketplace__chips { justify-content: center; }
.bc-marketplace__chips span {
  padding: 0.4em 1em;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.bc-testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.bc-testimonial {
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}
.bc-stars { color: var(--warning); margin-bottom: var(--sp-3); letter-spacing: 2px; }
.bc-testimonial blockquote {
  font-size: var(--fs-md);
  color: var(--text);
  margin-bottom: var(--sp-5);
}
.bc-testimonial__author { display: flex; align-items: center; gap: var(--sp-3); }
.bc-avatar {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: var(--on-brand);
  font-weight: 700;
}
.bc-testimonial__author strong { display: block; }
.bc-testimonial__author small { color: var(--text-subtle); font-size: var(--fs-xs); }

/* --------------------------------------------------------------------------
   Insights
   -------------------------------------------------------------------------- */

.bc-insights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.bc-insight {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.bc-insight:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.bc-insight__image {
  position: relative;
  height: 150px;
  background: var(--brand-gradient);
}
.bc-insight__image span {
  position: absolute;
  bottom: var(--sp-3);
  left: var(--sp-3);
  padding: 0.25em 0.7em;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.85);
  color: #262638;
  font-size: var(--fs-xs);
  font-weight: 700;
}
.bc-insight__body { padding: var(--sp-5); }
.bc-insight__meta { color: var(--text-subtle); font-size: var(--fs-xs); margin-bottom: var(--sp-2); }
.bc-insight__body h3 { font-size: var(--fs-md); margin-bottom: var(--sp-3); }
.bc-insight__body h3 a { color: var(--text); }
.bc-insight__body h3 a:hover { color: var(--accent); }
.bc-insight__body p { font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.bc-insight__body > a { color: var(--accent); font-weight: 600; font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   Final CTA
   -------------------------------------------------------------------------- */

.bc-final-cta { padding-block: var(--section-y); }

.bc-final-cta__band {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: var(--r-2xl);
  /* Dark base with a warm brand glow bleeding in from the right, matching
     the reference design. */
  background:
    radial-gradient(90% 140% at 90% 60%, rgba(214, 0, 255, 0.55) 0%, rgba(214, 0, 255, 0) 55%),
    radial-gradient(70% 120% at 100% 100%, rgba(123, 44, 255, 0.5) 0%, rgba(123, 44, 255, 0) 50%),
    linear-gradient(105deg, #140f22 0%, #1a1430 45%, #2a1244 100%);
}

.bc-final-cta__text { max-width: 44ch; }
.bc-final-cta__band h2 {
  font-size: var(--fs-2xl);
  color: #ffffff;
  margin-bottom: var(--sp-3);
}
.bc-final-cta__band p { color: rgba(255, 255, 255, 0.72); }

/* Contact info cards under the band */
.bc-contact-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.bc-contact-card {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}
.bc-contact-card small {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: var(--sp-2);
}
.bc-contact-card strong {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Footer support strip
   -------------------------------------------------------------------------- */

.bc-footer-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--section-y) var(--gutter);
}
.bc-footer-links > div { display: grid; gap: var(--sp-2); }
.bc-footer-links strong { margin-bottom: var(--sp-2); }
.bc-footer-links span {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .bc-services { grid-template-columns: repeat(2, 1fr); }
  .bc-benefits { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .bc-hero__grid,
  .bc-feature,
  .bc-travel,
  .bc-global__grid { grid-template-columns: 1fr; }

  .bc-feature--reverse .bc-feature__visual { order: 0; }
  .bc-hero__visual,
  .bc-travel__visual { min-height: 360px; }

  /* Tablet — scale the orbit + card proportionally. */
  .bc-hero__visual {
    --orbit-size: clamp(240px, 52vw, 340px);
    min-height: 380px;
  }

  .bc-property-grid,
  .bc-marketplace,
  .bc-testimonials,
  .bc-insights { grid-template-columns: 1fr; }

  .bc-footer-links { grid-template-columns: repeat(2, 1fr); }
  .bc-final-cta__band { flex-direction: column; align-items: flex-start; }
  .bc-contact-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .bc-services,
  .bc-benefits,
  .bc-feature__points { grid-template-columns: 1fr; }

  .bc-heading-row { flex-direction: column; align-items: flex-start; }

  /* Mobile — shrink orbit + buttons, keep the card readable, no overflow. */
  .bc-hero__visual {
    --orbit-size: clamp(200px, 74vw, 300px);
    --plus-size: 32px;
    min-height: 320px;
  }
}






/* ==========================================================================
   Contact page (redesign) — hero, form, sidebar, HQ, final CTA
   Class names match resources/views/pages/contact.blade.php.
   ========================================================================== */

.contact-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   Contact hero — top band (breadcrumb + eyebrow + heading + lead)

   The hero markup reuses the about-page hero classes (.about-hero,
   .about-container, .about-breadcrumb, .about-hero-copy) but about.css is not
   loaded on the contact page, so these are defined here to give the hero its
   container gutter and typographic hierarchy. Without them the content renders
   flush against the viewport's left edge.
   -------------------------------------------------------------------------- */
.about-hero {
  position: relative;
  padding-block: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  background: var(--glow), var(--bg);
  overflow: hidden;
}

.about-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.about-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-subtle);
  margin-bottom: var(--sp-6);
}
.about-breadcrumb a { color: var(--text-subtle); }
.about-breadcrumb a:hover { color: var(--accent); }
.about-breadcrumb strong { color: var(--text); font-weight: 700; }

.about-hero-copy h1 {
  font-size: var(--fs-3xl);
  line-height: 1.04;
  margin-block: var(--sp-4) var(--sp-4);
}
.about-hero-copy h1 span {
  background: var(--brand-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.about-hero-copy .contact-hero-lead { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Contact hero
   -------------------------------------------------------------------------- */

.contact-hero { padding-block: clamp(2.5rem, 6vw, 3rem); }

/* Form band sits directly below the shared page-hero. It shares the hero's
   light surface so the two read as one continuous section. */
.contact-form-section {
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.contact-hero-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

@media (max-width: 980px) {
  .contact-hero-grid { grid-template-columns: 1fr; }
  .contact-hero-visual { order: -1; }
}

/* --------------------------------------------------------------------------
   Contact — left info column (info card + "what happens next")
   -------------------------------------------------------------------------- */
.contact-info-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.contact-info-card,
.contact-next-card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

.contact-info-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.contact-info-row:first-child { padding-top: 0; }
.contact-info-row:last-child { padding-bottom: 0; border-bottom: 0; }

.contact-info-icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
}
.contact-info-icon svg { width: 1.15rem; height: 1.15rem; }

.contact-info-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 0.35rem;
}
.contact-info-row p {
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.55;
  margin: 0 0 0.25rem;
}
.contact-info-row p:last-child { margin-bottom: 0; }
.contact-info-row a { color: var(--text); font-weight: 600; word-break: break-word; }
.contact-info-row a:hover { color: var(--accent); }
.contact-info-note { color: var(--text-subtle); font-weight: 400; font-size: var(--fs-xs); }

/* "Follow us" social row inside the info card. The base .socials styling is
   tuned for the dark footer, so this variant restyles the tiles for the light
   card: accent-tinted squares that fill with the brand gradient on hover. */
.contact-info-social .socials--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.contact-info-social .socials--inline a {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--accent-soft);
  color: var(--accent);
  transition: all var(--t-base) var(--ease);
}
.contact-info-social .socials--inline a:hover {
  background-image: var(--brand-gradient-r);
  border-color: transparent;
  color: var(--accent-contrast);
  transform: translateY(-2px);
}
.contact-info-social .socials--inline svg { width: 1.05rem; height: 1.05rem; }

/* "What happens next" card — soft accent-tinted background. */
.contact-next-card {
  background:
    radial-gradient(120% 100% at 0% 0%, var(--accent-soft) 0%, transparent 55%),
    var(--surface);
}
.contact-next-card h3 {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--sp-4);
}
.contact-next-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.contact-next-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.5;
}
.contact-next-list li svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  margin-top: 0.15rem;
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Contact — right form card
   -------------------------------------------------------------------------- */
.contact-form-card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.contact-form-head { margin-bottom: var(--sp-6); }
.contact-form-head h2 {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-2);
}
.contact-form-head p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 52ch;
}
/* Full-width submit inside the card, overriding the earlier left-align rule. */
.contact-form-card .contact-field-full .btn.btn--block { align-self: stretch; justify-content: center; }

.contact-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-4);
}

.contact-eyebrow span {
  width: 1.75rem;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--accent);
}

.contact-hero-content h1 {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-4);
}

.contact-hero-content h1 span {
  display: block;
  background: var(--brand-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.contact-hero-lead {
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 46ch;
  margin-bottom: var(--sp-7);
}

/* Mini info cards — four items sit in a clean 2×2 grid so nothing is orphaned. */
.contact-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}

@media (max-width: 620px) {
  .contact-mini-grid { grid-template-columns: 1fr; }
}

.contact-mini-card {
  display: block;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
}

.contact-mini-card .mini-icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--brand-orange);
  margin-bottom: 10px;
}

.contact-mini-card .mini-icon svg { width: 1.15rem; height: 1.15rem; }

.contact-mini-card .mini-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 0.2rem;
}

.contact-mini-card a,
.contact-mini-card strong {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text);
  font-weight: 600;
  word-break: break-word;
}

.contact-mini-card a:hover { color: var(--accent); }

.contact-mini-card small {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  margin-top: 0.2rem;
}

/* Hero visual cards */
.contact-hero-visual {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.project-status-card,
.growth-card,
.visual-bottom {
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}



.visual-card-header,
.growth-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
}

.visual-card-header span,
.growth-heading span {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 0.3rem;
}

.visual-card-header strong { color: var(--success, #34c759); font-size: var(--fs-sm); }
.growth-heading strong { font-size: var(--fs-xl); color: var(--text); }
.growth-heading b { font-size: var(--fs-xs); color: var(--brand-orange); font-weight: 700; }

.status-check {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--bg-alt);
  color: var(--text);
  font-size: var(--fs-sm);
}

.progress-line {
  margin-top: var(--sp-4);
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--bg-alt);
  overflow: hidden;
}

.progress-line span {
  display: block;
  height: 100%;
  width: 92%;
  border-radius: inherit;
  background: var(--brand-gradient-r);
}

/* The growth card holds the bar chart plus a dark "destination" card that
   floats over the top-right corner of the chart, matching the reference. */
.growth-card { position: relative; min-height: 210px; }

.growth-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  height: 110px;
  margin-top: var(--sp-5);
}

.growth-bars i {
  flex: 1;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--surface-hover);
}

/* Last three bars carry the brand colour so the chart reads as "trending up". */
.growth-bars i:nth-last-child(-n+3) { background: var(--brand-gradient-r); }

.destination-card {
  position: absolute;
  top: 3.6rem;
  right: var(--sp-5);
  width: min(58%, 15rem);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: #282a3c;
  box-shadow: var(--shadow-md);
}

.destination-card .destination-icon {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--brand-orange);
}

.destination-card span { display: block; font-size: var(--fs-sm); font-weight: 600; color: #ffffff; }
.destination-card small { display: block; font-size: var(--fs-xs); color: #97a5b8; }
.destination-card em { margin-left: auto; font-style: normal; font-size: var(--fs-xs); color: #97a5b8; white-space: nowrap; }

.visual-bottom {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.avatar-stack { display: flex; }
.avatar-stack span {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--surface);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text);
  margin-left: -0.6rem;
}
.avatar-stack span:first-child { margin-left: 0; }

.visual-bottom > strong { font-size: var(--fs-sm); color: var(--text); }
.visual-bottom > strong small { color: var(--text-subtle); font-weight: 400; }

.visual-bottom button {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 0;
  background: var(--text);
  color: var(--bg);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease);
}
.visual-bottom button:hover { transform: translateX(2px); }

/* --------------------------------------------------------------------------
   Form + sidebar
   -------------------------------------------------------------------------- */

.contact-main { padding-block: clamp(2rem, 4vw, 3.5rem); }

.contact-main-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
}

@media (max-width: 980px) {
  .contact-main-grid { grid-template-columns: 1fr; }
}

.contact-form-card {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.form-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.form-card-heading h2 { font-size: var(--fs-xl); margin-bottom: 0.35rem; }
.form-card-heading p { font-size: var(--fs-sm); color: var(--text-muted); }

.form-heading-icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--brand-orange);
}
.form-heading-icon svg { width: 1.2rem; height: 1.2rem; }

.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}

@media (max-width: 560px) {
  .contact-form-grid { grid-template-columns: 1fr; }
}

.contact-field { display: flex; flex-direction: column; }
.contact-field-full { grid-column: 1 / -1; }

/* The submit button should size to its content and sit left-aligned, not
   stretch to the full width of the form column. */
.contact-field-full .btn { align-self: flex-start; }

@media (max-width: 560px) {
  .contact-field-full .btn { align-self: stretch; justify-content: center; }
}

.contact-field label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 0.5rem;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.7rem 0.85rem;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.contact-field textarea { min-height: 80px; resize: vertical; }

.contact-field input::placeholder,
.contact-field textarea::placeholder { color: var(--text-subtle); }

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.contact-field .is-invalid { border-color: var(--brand-red); }

.form-error {
  margin-top: 0.4rem;
  font-size: var(--fs-xs);
  color: var(--brand-red);
}

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent-label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.consent-label input { width: auto; margin-top: 0.15rem; accent-color: var(--brand-orange); }
.consent-label a { color: var(--accent); text-decoration: underline; }

.contact-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  cursor: pointer;
  padding: 0.85rem 1.6rem;
  border-radius: var(--r-pill);
  font: inherit;
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--accent-contrast);
  background: var(--brand-gradient-r);
  box-shadow: var(--shadow-accent);
  transition: transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}
.contact-submit:hover { transform: translateY(-1px); filter: brightness(1.05); }
.contact-submit span { transition: transform var(--t-fast) var(--ease); }
.contact-submit:hover span { transform: translateX(3px); }

.privacy-note {
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}

/* Sidebar */
.contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.sidebar-card {
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.sidebar-card-heading h3,
.sidebar-title-row h3 { font-size: var(--fs-md); margin-bottom: 0.35rem; }
.sidebar-card-heading p { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-4); }

.sidebar-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.orange-icon { color: var(--brand-orange); }

.quick-email,
.whatsapp-button,
.schedule-button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--sp-3);
}

.quick-email {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text);
  word-break: break-all;
}
.quick-email span {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--brand-orange);
}
.quick-email span svg { width: 1rem; height: 1rem; }
.quick-email b { margin-left: auto; color: var(--text-subtle); }
.quick-email:hover { border-color: var(--accent); color: var(--text); }

.whatsapp-button {
  justify-content: center;
  background: var(--text);
  color: var(--bg);
}
.whatsapp-button:hover { color: var(--bg); filter: brightness(0.95); }

.schedule-button {
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  margin-bottom: 0;
}
.schedule-button:hover { border-color: var(--accent); color: var(--text); }

.presence-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.presence-grid > div {
  padding: 0.75rem;
  border-radius: var(--r-md);
  background: var(--bg-alt);
  border: 1px solid var(--border);
}
.presence-grid strong { display: block; font-size: var(--fs-sm); color: var(--text); }
.presence-grid small { display: block; font-size: 0.65rem; letter-spacing: 0.06em; color: var(--text-subtle); margin-top: 0.2rem; }

.mini-map {
  position: relative;
  height: 130px;
  border-radius: var(--r-md);
  background: radial-gradient(circle at 50% 40%, var(--surface-2), var(--bg-alt));
  border: 1px solid var(--border);
  overflow: hidden;
}
.map-point {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-orange);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.map-point.point-1 { top: 35%; left: 25%; }
.map-point.point-2 { top: 55%; left: 55%; }
.map-point.point-3 { top: 30%; left: 70%; }
.map-point.point-4 { top: 65%; left: 40%; }
.map-label {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-subtle);
}
.map-regions {
  position: absolute;
  bottom: 0.6rem;
  right: 0.6rem;
  font-size: 0.62rem;
  color: var(--text-subtle);
}

.reason-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.reason-card {
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--bg-alt);
  border: 1px solid var(--border);
}
.reason-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.reason-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--brand-orange);
}
.reason-top b { font-size: var(--fs-sm); color: var(--text-subtle); font-weight: 700; }
.reason-card strong { display: block; font-size: var(--fs-sm); color: var(--text); margin-bottom: 0.2rem; }
.reason-card small { display: block; font-size: var(--fs-xs); color: var(--text-subtle); }

/* --------------------------------------------------------------------------
   Contact — offices + trust strip polish
   -------------------------------------------------------------------------- */

/* Office cards: clearer hierarchy — bold city name, muted address, accent email. */
.office-card { gap: var(--sp-2); }
.office-card h3 {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.35rem;
}
.office-card p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 0.4rem;
}
.office-card p a { color: var(--accent); font-weight: 600; word-break: break-word; }
.office-card p a:hover { text-decoration: underline; }

/* Dark "Offices" band — matches the "How we work" reference: dark-navy section,
   slightly lighter dark cards with a subtle border, white headings, muted grey
   body text and a violet eyebrow. Colours are pinned to the dark palette so the
   band looks identical regardless of the active light/dark theme. */
.contact-offices--dark {
  background: #191922;
  color: #ffffff;
}
.contact-offices--dark .eyebrow { color: #9b5cff; }
.contact-offices--dark .eyebrow::before { background: #9b5cff; }
.contact-offices--dark h2 { color: #ffffff; }
.contact-offices--dark .office-card {
  background: #262638;
  border: 1px solid #33334a;
  box-shadow: none;
}
.contact-offices--dark .office-card h3 { color: #ffffff; }
.contact-offices--dark .office-card p { color: #c9cbdb; }
.contact-offices--dark .office-card p a { color: #b58cff; }
.contact-offices--dark .office-card p a:hover { color: #ffffff; }

/* Trust strip: give each card an icon and enough contrast so it reads as a
   distinct tile instead of vanishing into the page background. */
.trust-card {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-3);
  background: var(--bg-alt);
}
.trust-card__icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
}
.trust-card__icon svg { width: 1.2rem; height: 1.2rem; }
.trust-card p { font-size: var(--fs-sm); color: var(--text); line-height: 1.5; }

/* --------------------------------------------------------------------------
   Headquarters (dark band)
   -------------------------------------------------------------------------- */

/* The HQ band is always dark navy regardless of theme (matches the reference
   design: light hero/form on top, dark bands below). Inner colours are pinned
   to the dark palette so text stays readable in light mode too. */
.hq-section {
  --hq-navy:        #1e1e2c;
  --hq-surface:     #282a3c;
  --hq-surface-2:   #313349;
  --hq-border:      #3a3a52;
  --hq-text:        #ffffff;
  --hq-text-muted:  #c7d0da;
  --hq-text-subtle: #97a5b8;

  background: var(--hq-navy);
  color: var(--hq-text);
  padding-block: clamp(3rem, 6vw, 5rem);
  margin-top: clamp(2rem, 5vw, 4rem);
}

.hq-top {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-bottom: var(--sp-7);
}

@media (max-width: 900px) {
  .hq-top { grid-template-columns: 1fr; }
}

.dark-eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-orange);
  margin-bottom: var(--sp-3);
}

.hq-copy h2 { font-size: var(--fs-2xl); color: var(--hq-text); margin-bottom: var(--sp-3); }
.hq-copy p { font-size: var(--fs-sm); color: var(--hq-text-muted); margin-bottom: var(--sp-2); }
.hq-copy p a { color: var(--brand-orange); }

.hq-buttons { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.hq-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--hq-border);
  background: var(--hq-surface);
  color: var(--hq-text);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.hq-button:hover { border-color: var(--brand-orange); color: var(--hq-text); }

.hq-map {
  height: 300px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--hq-border);
  background: var(--hq-surface);
}
.hq-map iframe { width: 100%; height: 100%; border: 0; display: block; }

.hq-map-placeholder {
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--sp-3);
  background: radial-gradient(circle at 50% 40%, var(--hq-surface-2), var(--hq-surface));
  color: var(--hq-text-muted);
}
.hq-location-pin {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--brand-gradient-r);
  color: var(--accent-contrast);
  font-size: 1.3rem;
}

.hq-location-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 760px) {
  .hq-location-grid { grid-template-columns: 1fr; }
}
.hq-location {
  position: relative;
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--hq-border);
  background: var(--hq-surface);
}
.hq-location .location-status {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34c759;
}
.hq-location strong { display: block; font-size: var(--fs-md); color: var(--hq-text); margin-bottom: 0.25rem; }
.hq-location small { display: block; font-size: var(--fs-xs); color: var(--hq-text-subtle); margin-bottom: 0.6rem; }
.hq-location a { font-size: var(--fs-sm); color: var(--brand-orange); word-break: break-all; }

/* --------------------------------------------------------------------------
   Final CTA
   -------------------------------------------------------------------------- */

.contact-final-section { padding-block: clamp(2rem, 5vw, 4rem); }

/* Final CTA is always dark navy, matching the reference and the HQ band. */
.contact-final {
  --cf-navy:        #1e1e2c;
  --cf-surface:     #282a3c;
  --cf-surface-2:   #313349;
  --cf-border:      #3a3a52;
  --cf-text:        #ffffff;
  --cf-text-subtle: #97a5b8;

  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--r-xl);
  background: var(--cf-navy);
  color: var(--cf-text);
  border: 1px solid var(--cf-border);
}

@media (max-width: 900px) {
  .contact-final { grid-template-columns: 1fr; }
}

.final-eyebrow { margin-bottom: var(--sp-3); color: var(--brand-orange); }

.final-content h2 { font-size: var(--fs-2xl); color: var(--cf-text); margin-bottom: var(--sp-5); }
.final-content h2 span {
  background: var(--brand-gradient-r);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.final-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-6); }

.final-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--accent-contrast);
  background: var(--brand-gradient-r);
  box-shadow: var(--shadow-accent);
}
.final-primary:hover { color: var(--accent-contrast); filter: brightness(1.05); }

.final-secondary {
  display: inline-flex;
  align-items: center;
  padding: 0.8rem 1.5rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--cf-border);
  background: var(--cf-surface);
  color: var(--cf-text);
  font-weight: 600;
  font-size: var(--fs-sm);
}
.final-secondary:hover { border-color: var(--brand-orange); color: var(--cf-text); }

.final-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 560px) {
  .final-meta { grid-template-columns: 1fr; }
}
.final-meta small { display: block; font-size: var(--fs-xs); color: var(--cf-text-subtle); margin-bottom: 0.25rem; }
.final-meta strong { display: block; font-size: var(--fs-sm); color: var(--cf-text); word-break: break-word; }

.project-snapshot {
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
}
.snapshot-heading span {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cf-text-subtle);
}
.snapshot-progress {
  margin-block: var(--sp-4);
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--cf-navy);
  overflow: hidden;
}
.snapshot-progress span {
  display: block;
  height: 100%;
  width: 70%;
  background: var(--brand-gradient-r);
}
.snapshot-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.snapshot-steps > div {
  padding: 0.6rem;
  border-radius: var(--r-sm);
  background: var(--cf-navy);
  text-align: center;
}
.snapshot-steps small { display: block; font-size: 0.6rem; letter-spacing: 0.06em; color: var(--cf-text-subtle); margin-bottom: 0.2rem; }
.snapshot-steps strong { display: block; font-size: var(--fs-xs); color: var(--cf-text); }
.snapshot-steps .snapshot-active { background: var(--accent-soft); }
.snapshot-steps .snapshot-active strong { color: var(--brand-orange); }
.project-snapshot > p { font-size: var(--fs-xs); color: var(--cf-text-subtle); }

/* ==========================================================================
   Home — commitments list (§3.5)
   ========================================================================== */
.bc-commitments {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.bc-commitment {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.bc-commitment .tick {
  color: var(--brand-orange, #fb7185);
  font-weight: 700;
  flex: 0 0 auto;
}
.bc-commitment strong { display: block; margin-bottom: 0.25rem; }
.bc-commitment p { margin: 0; font-size: var(--fs-sm); color: var(--text-subtle); }
.bc-commitments__closing { margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--text-subtle); }

@media (max-width: 720px) {
  .bc-commitments { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Our Work — engagement timeline (§8.1)
   ========================================================================== */
.timeline-list {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  border-left: 2px solid var(--border, rgba(255, 255, 255, 0.12));
  padding-left: var(--sp-5);
}
.timeline-row { position: relative; }
.timeline-row::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--sp-5) - 6px);
  top: 0.5rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-orange, #fb7185);
}
.timeline-row h3 { margin: 0 0 0.35rem; }
.timeline-row p { margin: 0; color: var(--text-subtle); }

/* ==========================================================================
   Service tags (used on Industries tiles and Services overview cards)
   ========================================================================== */
.service-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.service-tags span,
.service-tags a {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--surface-2, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  color: var(--text-subtle);
  text-decoration: none;
}
.service-tags a:hover { color: var(--text); border-color: var(--brand-orange, #fb7185); }

/* ==========================================================================
   Legal — common header block (§15)
   ========================================================================== */
.legal-header-block {
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: var(--r-md, 12px);
  padding: var(--sp-4, 1rem) var(--sp-5, 1.25rem);
  margin-bottom: var(--sp-6, 1.75rem);
  background: var(--surface, rgba(255, 255, 255, 0.03));
}
.legal-header-block p { margin: 0.15rem 0; font-size: var(--fs-sm); }

/* ==========================================================================
   FAQ page — native details/summary accordion (§13)
   ========================================================================== */
.faq-list { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.faq-item {
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: var(--r-md, 12px);
  background: var(--surface, rgba(255, 255, 255, 0.03));
  overflow: hidden;
}
.faq-item > summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.25rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+";
  font-size: 1.25rem;
  line-height: 1;
  color: var(--brand-orange, #fb7185);
  flex: 0 0 auto;
}
.faq-item[open] > summary::after { content: "\2212"; }
.faq-item__body { padding: 0 1.25rem 1.1rem; }
.faq-item__body p { margin: 0; color: var(--text-subtle); }