/* =====================================================================
   Santos Cesar Law — Homepage (redesigned)
   Scoped styles for the website UI kit. Imports colors_and_type tokens.
   ===================================================================== */
@import url('colors_and_type.css');

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* ---------- Layout primitives -------------------------------------- */
.scl-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-7); }
.scl-section { padding: var(--space-9) 0; }
.scl-section--0 { padding: 0 0 20px 0; }
.scl-section--paper { background: var(--scl-paper); }
.scl-section--white { background: #fff; }
.scl-section--navy  { background: var(--scl-navy-deep); color: var(--fg-inverse); }
.scl-section--conversion {
  background: var(--scl-gold-wash); position: relative; overflow: hidden;
  border-left: 1px solid var(--border); border-right: 1px solid var(--border);
}

.scl-section__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: var(--space-7); }
.scl-section__head--inverse .scl-eyebrow { color: var(--scl-gold); }
.scl-section__head-sub { max-width: 460px; margin: 0; }

/* ---------- Eyebrow ----------------------------------------------- */
.scl-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-ui); font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  font-weight: 600; color: var(--scl-gold-deep);
  margin-bottom: var(--space-4);
}
.scl-eyebrow--light { color: var(--scl-gold); }
.scl-eyebrow--100 { width: stretch;
    direction: rtl;
    margin: 20px 0; }
.scl-rule { display: inline-block; width: 32px; height: 1.5px; background: currentColor; }

/* ---------- Buttons ----------------------------------------------- */
.scl-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px; border-radius: 999px;
  font-family: var(--font-ui); font-weight: 600; font-size: 14px;
  letter-spacing: .01em; cursor: pointer; border: 1.5px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.scl-btn:active { transform: scale(.985); }
.scl-btn--sm { padding: 10px 18px; font-size: 13px; }
.scl-btn--lg { padding: 17px 28px; font-size: 15px; }

.scl-btn--primary { background: var(--scl-gold); color: var(--scl-navy-deep); box-shadow: var(--shadow-gold); }
.scl-btn--primary:hover { background: #C8961D; box-shadow: 0 16px 36px -12px rgba(218, 165, 32, .65); }

.scl-btn--secondary { background: transparent; color: var(--scl-navy); border-color: var(--scl-navy); }
.scl-btn--secondary:hover { background: var(--scl-navy); color: #fff; }

.scl-btn--ghost { background: transparent; color: var(--scl-navy); padding-inline: 16px; }
.scl-btn--ghost:hover { color: var(--scl-gold-deep); }

.scl-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.scl-btn--ghost-light:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); }

/* ---------- Header ------------------------------------------------- */
.scl-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--scl-navy-deep);
  transition: background var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.scl-header.is-scrolled { background: rgba(22, 32, 57, .86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: rgba(255,255,255,.08); }
.scl-header__inner { max-width: var(--container); margin: 0 auto; padding: 14px var(--space-7); display: flex; align-items: center; gap: 24px; }
.scl-header__brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.scl-header__mark { height: 38px; width: auto; filter: brightness(0) invert(1); }
.scl-header__wordmark { display: flex; flex-direction: column; line-height: 1; }
.scl-header__name { font-family: var(--font-display); color: #fff; font-size: 15px; letter-spacing: .2em; }
.scl-header__sub { font-family: var(--font-ui); color: var(--scl-steel-300); font-size: 9.5px; letter-spacing: .22em; margin-top: 5px; font-weight: 500; }

.scl-header__nav { display: flex; gap: 18px; margin-left: auto; }
.scl-header__link {
  font-family: var(--font-ui); font-size: 12.5px; letter-spacing: .09em; white-space: nowrap;
  text-transform: uppercase; color: rgba(255,255,255,.8); font-weight: 500;
  position: relative; padding: 8px 0; transition: color var(--dur) var(--ease);
}
.scl-header__link:hover { color: #fff; }
.scl-header__link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 4px; height: 1.5px; background: var(--scl-gold); transition: right var(--dur) var(--ease); }
.scl-header__link:hover::after { right: 0; }

.scl-header__actions { display: flex; align-items: center; gap: 16px; }
.scl-header__phone { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.85); font-family: var(--font-ui); font-size: 13px; font-weight: 500; }
.scl-header__phone:hover { color: #fff; }
.scl-header__menu { display: none; background: transparent; border: 0; color: #fff; padding: 8px; border-radius: 6px; cursor: pointer; }
.scl-header__menu:hover { background: rgba(255,255,255,.08); }

.scl-header__drawer { display: none; flex-direction: column; padding: 8px 24px 24px; gap: 4px; border-top: 1px solid rgba(255,255,255,.08); }
.scl-header__drawer-link { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; color: #fff; font-family: var(--font-ui); font-size: 15px; border-bottom: 1px solid rgba(255,255,255,.06); }

/* ---------- Language switch ---------------------------------------- */
.scl-lang-switch-wrap { display: contents; }
.scl-lang-switch-wrap--desktop { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.scl-lang-switch__label {
  font-family: var(--font-ui); font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 600; color: var(--scl-steel-300);
  line-height: 1;
}
.scl-lang-switch { display: flex; align-items: center; gap: 2px; font-family: var(--font-ui); font-size: 11px; letter-spacing: .06em; font-weight: 600; }
.scl-lang-switch__item { color: rgba(255,255,255,.5); padding: 4px 7px; border-radius: 4px; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
.scl-lang-switch__item:hover { color: #fff; }
.scl-lang-switch__item.is-active { color: var(--scl-gold); background: rgba(255,255,255,.07); }
.scl-lang-switch--drawer { gap: 8px; margin: 14px 0 4px; }
.scl-lang-switch--drawer .scl-lang-switch__item { color: rgba(255,255,255,.7); font-size: 13px; padding: 7px 12px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; }
.scl-lang-switch--drawer .scl-lang-switch__item.is-active { color: var(--scl-navy-deep); background: var(--scl-gold); border-color: var(--scl-gold); }
.scl-footer__link.is-active { color: var(--scl-gold); }

/* ---------- Hero --------------------------------------------------- */
.scl-hero {
  position: relative; background: var(--scl-navy-deep); color: #fff;
  /* padding: 168px 0 120px; overflow: hidden; */
  padding: 100px 0 100px; overflow: hidden;
}
.scl-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.scl-hero__watermark {
  position: absolute; right: -120px; top: 50%; transform: translateY(-50%);
  width: 720px; opacity: .04; filter: brightness(0) invert(1);
}
/* No more two-column grid reserving a side column for the seal: the 3D logo (.scl-hero__seal-frame)
   is now an absolutely positioned layer inside this same container, behind the text (z-index 0 vs
   .scl-hero__content's z-index 1) — so the headline/sub text flows and wraps at its own natural
   width and renders on top of the logo, instead of being squeezed by a sibling grid column. */
.scl-hero__inner { position: relative; z-index: 2; }
.scl-hero__content { position: relative; z-index: 1; max-width: 640px; }



.scl-hero__headline {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1.08; letter-spacing: -.015em; color: #fff; 
  /* margin: 16px 0 0; */
  font-size: 66px;
}
.scl-hero__headline-em {
  display: block; font-style: italic; color: var(--scl-gold);
  margin-top: 6px; 
  /* font-size: .82em; */
  font-size: .65em;
}

.scl-hero__sub {
  margin: 28px 0 0; max-width: 540px;
  font-size: var(--fs-lead); line-height: 1.65; color: rgba(255,255,255,.78);
}
.scl-hero__sub strong { color: #fff; font-weight: 700; }

.scl-hero__cta { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }

.scl-hero__trust {
  position: relative; overflow: hidden;
  margin-top: 56px; padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.12);
}
/* The trust strip scrolls horizontally (via the marquee below) with no fixed start/end — content
   is always flowing in from both edges, so both fades stay on permanently rather than reacting
   to scroll position, unlike .scl-carousel-fade elsewhere which tracks a real scrollable track.
   Same gradient technique as .scl-carousel-fade, just recolored to the Hero's own navy bg. */
.scl-hero__trust::before, .scl-hero__trust::after {
  content: ""; position: absolute; top: 28px; bottom: 0; width: 72px;
  pointer-events: none; z-index: 1;
}
.scl-hero__trust::before { left: 0; background: linear-gradient(to right, var(--scl-navy-deep), rgba(22,32,57,0)); }
.scl-hero__trust::after { right: 0; background: linear-gradient(to left, var(--scl-navy-deep), rgba(22,32,57,0)); }

.scl-hero__trust-track {
  display: flex; align-items: center; width: max-content;
  animation: scl-hero-trust-marquee 22s linear infinite;
}
.scl-hero__trust-set { display: flex; align-items: center; gap: 28px; margin-right: 28px; flex-shrink: 0; }
.scl-hero__trust-item { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.scl-hero__trust-num { font-family: var(--font-display); font-size: 30px; color: var(--scl-gold); line-height: 1; }
.scl-hero__trust-label { font-family: var(--font-ui); font-size: 12px; color: rgba(255,255,255,.65); line-height: 1.45; }
.scl-hero__trust-divider { width: 1px; height: 32px; background: rgba(255,255,255,.18); flex-shrink: 0; }
.scl-hero__trust-item--logo { justify-content: center; }
.scl-hero__trust-logo { height: 64px; width: auto; max-width: 160px; object-fit: contain; display: block; }

@keyframes scl-hero-trust-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .scl-hero__trust-track { animation: none; }
}

/* Positioned inside .scl-hero__inner (the same max-width: var(--container) box the text sits
   in) rather than the full-bleed .scl-hero__bg, so it stays anchored to the text's own column
   at any viewport width instead of drifting away from it on very wide screens. z-index: 0 (vs
   .scl-hero__content's z-index: 1) keeps it behind the text — a background the text flows over,
   not a column the text's width had to make room for. */
.scl-hero__seal-frame {
  /* Anchored to the bottom instead of vertically centered, so the circle's own bottom edge lands
     on the CTA row's horizontal line. 154px is .scl-hero__trust's rendered height below that line:
     56px margin-top + 1px border-top + 28px padding-top + ~69px for the trust-item row itself
     (30px number + 4px gap + two 12px/1.45 label lines). Revisit this number if that spacing
     changes. */
  position: absolute; bottom: 154px; right: 0; z-index: 0;
  width: 480px; aspect-ratio: 1; border-radius: 50%;
  /* background: rgba(218, 165, 32, .04);
  border: 1px solid rgba(218, 165, 32, .25); */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 36px;
}
.scl-hero__seal-frame::before, .scl-hero__seal-frame::after {
  content: ""; position: absolute; inset: 14px; border-radius: 50%;
  /* border: 1px solid rgba(218, 165, 32, .12); */
  z-index: 2;
}
.scl-hero__seal-frame::after { inset: 28px; border-color: rgba(218, 165, 32, .08); }

/* The 3D logo layer: fills the frame's circular area edge-to-edge as a background image,
   absolutely positioned within the frame (inset: 0) and clipped to a circle. pointer-events is
   off so it can never intercept clicks — the whole seal aside is decorative already. */
.scl-hero__seal-logo-wrap {
  position: absolute; inset: 0; z-index: 0;
  border-radius: 50%; overflow: hidden;
  pointer-events: none;
}
.scl-hero__seal-logo {
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
}
.scl-hero__seal-caption { text-align: center; margin-top: 8px; position: relative; z-index: 3; }
.scl-hero__seal-name { font-family: var(--font-display); color: #fff; font-size: 13px; letter-spacing: .28em; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.scl-hero__seal-tagline { font-family: var(--font-ui); color: var(--scl-gold); font-size: 9px; letter-spacing: .32em; margin-top: 8px; text-shadow: 0 1px 8px rgba(0,0,0,.6); }

.scl-hero__stamp {
  display: flex; gap: 10px; font-family: var(--font-ui); font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.6);
}
.scl-hero__stamp span:nth-child(2n) { color: var(--scl-gold); }

/* ---------- Page header (secondary content pages: FAQ, Links, etc.) --- */
.scl-page-header {
  position: relative; background: var(--scl-navy-deep); color: #fff;
  /* padding: 168px 0 64px; */
  padding: 100px 0 64px;
}
/* Links Hub only (see LinksPage.jsx's pageHeaderClassName prop): a compact 30px padding on all
   sides, overriding the shared 100px/64px above without touching .scl-page-header itself — every
   other page that uses PageHeader (Standard Extra, FAQ) keeps the original padding. */
.scl-links-page-header { padding: 30px; }
.scl-page-header__title {
  font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h1);
  line-height: var(--lh-tight); letter-spacing: var(--tracking-tight);
  color: #fff; margin: 20px 0 0; max-width: 720px;
}
.scl-page-header__lead {
  font-family: var(--font-body); font-size: var(--fs-lead); line-height: var(--lh-relaxed);
  color: rgba(255,255,255,.72); margin: 20px 0 0; max-width: 620px;
}

/* ---------- Content page prose (generic body copy for content pages) - */
.scl-content-page__prose { max-width: 760px; }
.scl-content-page__prose > * + * { margin-top: 16px; }

/* ---------- Authority --------------------------------------------- */
.scl-authority { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; }
.scl-authority__portrait { position: relative; }
.scl-authority__portrait-frame {
  aspect-ratio: 4 / 5; background: linear-gradient(155deg, #2d4060 0%, #162039 100%);
  border-radius: 8px; position: relative; overflow: hidden;
  box-shadow: var(--shadow-3);
}
.scl-authority__portrait-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.scl-authority__portrait-img.is-placeholder {
  object-fit: contain; padding: 22%; box-sizing: border-box;
  filter: brightness(0) invert(1); opacity: .3;
}
.scl-placeholder-tag {
  position: absolute; bottom: 14px; left: 14px; z-index: 1;
  font-family: var(--font-ui); font-size: 10px; letter-spacing: .18em;
  color: rgba(255,255,255,.7); text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.18); padding: 6px 10px; border-radius: 4px;
  background: rgba(22,32,57,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.scl-authority__card {
  position: absolute; right: -24px; bottom: -28px;
  background: #fff; border: 1px solid var(--border);
  padding: 20px 22px; border-radius: 12px; min-width: 240px;
  box-shadow: var(--shadow-2);
}

.scl-authority__name { margin-top: 6px; }
.scl-authority__role { font-family: var(--font-ui); color: var(--fg-muted); font-size: 14px; letter-spacing: .04em; margin-top: 10px; }
.scl-authority__bio { margin: 24px 0 36px; max-width: 580px; }

.scl-creds { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; max-width: 600px; }
/* Spans the full width of .scl-authority's grid (grid-column: 1 / -1) — below both the photo
   and the bio text, not confined to either column. 2 columns of 3, filled column-first (items
   1-3 down the left column, 4-6 down the right) via grid-auto-flow: column, rather than the
   default row-first order. */
.scl-creds--2col {
  grid-column: 1 / -1;
  max-width: none; margin-top: 40px;
  grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, auto);
  grid-auto-flow: column; column-gap: 48px; row-gap: 18px;
}
.scl-creds__item { /*display: grid;*/ grid-template-columns: 56px 1fr; gap: 20px; align-items: baseline; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.scl-creds__item:last-child { border-bottom: 0; }
/* Column-first layout means the bottom item of the *left* column (3rd in DOM order) is also a
   visual column-end, not just the 6th (already handled by :last-child above). */
.scl-creds--2col .scl-creds__item:nth-child(3) { border-bottom: 0; }
.scl-creds__num {
  font-family: var(--font-display); font-size: 13px; color: var(--scl-gold-deep);
  letter-spacing: .18em; font-style: italic;
}
.scl-creds__year { font-family: var(--font-ui); font-size: 12px; letter-spacing: .12em; color: var(--scl-gold-deep); text-transform: uppercase; font-weight: 600; }
.scl-creds__label { font-family: var(--font-display); font-size: 18px; color: var(--fg); margin-top: 4px; line-height: 1.35; }

/* ---------- Carousel (shared: Services, Testimonials smaller cards, Videos) ----- */
.scl-carousel-nav { display: flex; gap: 12px; }
.scl-carousel-nav--below { justify-content: center; margin-top: 28px; }
.scl-carousel-nav-btn {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1.5px solid var(--border); color: var(--scl-navy);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.scl-carousel-nav-btn:hover:not(:disabled) { border-color: var(--scl-gold-deep); color: var(--scl-gold-deep); }
.scl-carousel-nav-btn:active:not(:disabled) { transform: scale(.94); }
.scl-carousel-nav-btn:disabled { opacity: .3; cursor: not-allowed; }

/* "Next" carries the primary CTA treatment so it reads as the click target that advances the set */
.scl-carousel-nav-btn--next {
  background: var(--scl-gold); border-color: transparent; color: var(--scl-navy-deep);
  box-shadow: var(--shadow-gold);
}
.scl-carousel-nav-btn--next:hover:not(:disabled) { background: #C8961D; color: var(--scl-navy-deep); box-shadow: 0 16px 36px -12px rgba(218, 165, 32, .65); }
.scl-carousel-nav-btn--next:disabled { background: var(--scl-gold-wash); box-shadow: none; color: var(--scl-gold-deep); }

.scl-carousel-fade { position: relative; margin-top: 16px; }
.scl-carousel-fade::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 72px;
  background: linear-gradient(to right, rgba(255,255,255,0), var(--carousel-fade-color, #fff));
  pointer-events: none; opacity: 1; transition: opacity var(--dur) var(--ease);
}
.scl-carousel-fade.is-end::after { opacity: 0; }

.scl-carousel-card--edge { cursor: pointer; }
.scl-carousel-card--edge:hover { border-color: var(--scl-gold-deep); }

.scl-services {
  display: flex; gap: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 2px;
}
.scl-services::-webkit-scrollbar { display: none; }
.scl-service-card {
  margin-top:4px;
  scroll-snap-align: start;
  flex: 0 0 calc((100% - 3 * 24px) / 3.34);
  min-width: 0;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 32px; box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; gap: 16px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.scl-service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.scl-service-card__head { display: flex; align-items: center; justify-content: space-between; }
.scl-service-card__icon {
  width: 52px; height: 52px; border-radius: 50%; background: var(--scl-gold-wash);
  display: flex; align-items: center; justify-content: center; color: var(--scl-gold-deep);
}
.scl-service-card__num { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--scl-gold-deep); letter-spacing: .08em; }
.scl-service-card__title { font-family: var(--font-display); font-weight: 400; font-size: 26px; color: var(--scl-navy-ink); margin: 0; line-height: 1.2; }
.scl-service-card__desc { color: var(--fg-muted); font-size: 14.5px; line-height: 1.55; margin: 0; }
.scl-service-card__list { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 10px; }
.scl-service-card__list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 14px; line-height: 1.45; color: var(--scl-navy-ink); }
.scl-service-card__list svg { color: var(--scl-gold-deep); margin-top: 4px; }
.scl-service-card__link {
  margin-top: auto; padding-top: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-weight: 600; font-size: 13px;
  color: var(--scl-navy); letter-spacing: .02em;
  border-top: 1px solid var(--border);
  transition: color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.scl-service-card__link:hover { color: var(--scl-gold-deep); gap: 12px; }

.scl-services__cta-strip {
  margin-top: 56px; display: flex; gap: 24px; align-items: center; justify-content: space-between;
  padding: 24px 32px; background: var(--scl-navy-deep); border-radius: var(--radius-lg); color: #fff;
}
.scl-services__cta-strip .scl-h5 { color: #fff; }

/* ---------- WhyChoose (navy) -------------------------------------- */
.scl-diffs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;  border-top: 1px solid rgba(255,255,255,.1); }
.scl-diff { display: grid; grid-template-columns: 72px 1fr; gap: 24px; padding: 36px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.scl-diff:nth-child(odd) { padding-right: 40px; border-right: 1px solid rgba(255,255,255,.1); }
.scl-diff:nth-child(even) { padding-left: 40px; }
.scl-diff__num { font-family: var(--font-display); font-style: italic; font-size: 44px; color: var(--scl-gold); line-height: 1; }
.scl-diff__title { color: #fff; font-size: 24px; margin: 0; }
.scl-diff__text { color: rgba(255,255,255,.72); margin: 10px 0 0; font-size: 15px; line-height: 1.6; max-width: 36ch; }

/* ---------- Testimonials ------------------------------------------ */
.scl-testimonial {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px;
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: 20px;
}
.scl-testimonial--featured { background: var(--scl-navy-deep); color: #fff; border-color: transparent; padding: 48px 56px; }

/* Smaller testimonials ride the shared carousel; the featured quote stays a static block above it */
.scl-testimonials-carousel-wrap { margin-top: 24px; --carousel-fade-color: var(--scl-paper); }
.scl-testimonials-carousel {
  display: flex; gap: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 2px;
  cursor: grab;
}
.scl-testimonials-carousel::-webkit-scrollbar { display: none; }
.scl-testimonials-carousel.is-dragging {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}
.scl-testimonials-carousel .scl-testimonial {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - 3 * 24px) / 3.34);
  min-width: 0;
}
.scl-testimonial--featured svg { color: var(--scl-gold); }
.scl-testimonial--featured .scl-testimonial__quote { font-size: 32px; color: #fff; }
.scl-testimonial--featured .scl-testimonial__name { color: #fff; }
.scl-testimonial--featured .scl-testimonial__meta { color: rgba(255,255,255,.7); }
.scl-testimonial--featured .scl-testimonial__tag { background: rgba(218,165,32,.18); color: var(--scl-gold); }
.scl-testimonial--featured .scl-testimonial__avatar { background: rgba(255,255,255,.12); color: #fff; }

.scl-testimonial__quote {
  font-family: var(--font-display); font-style: italic; font-size: 18px; line-height: 1.5;
  color: var(--scl-navy-ink); margin: 0; flex: 1;
}
.scl-testimonial__by { display: flex; align-items: center; gap: 12px; }
.scl-testimonial__by__col { display: flex; align-items: flex-start; flex-direction: column; }

.scl-testimonial__avatar {
  width: 40px; height: 40px; border-radius: 50%; background: var(--scl-gold-wash);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-weight: 600; font-size: 13px; color: var(--scl-gold-deep);
}
.scl-testimonial__name { font-family: var(--font-ui); font-weight: 600; font-size: 14px; }
.scl-testimonial__meta { font-family: var(--font-ui); font-size: 12px; color: var(--fg-muted); letter-spacing: .04em; }
.scl-testimonial__by__col .scl-testimonial__tag {
  margin-left: initial;
}
.scl-testimonial__tag {
  margin-left: auto; padding: 6px 12px; border-radius: 999px;
  background: var(--scl-gold-wash); color: var(--scl-gold-deep);
  font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: .04em;
}

.scl-testimonial__stars { display: flex; gap: 3px; color: var(--scl-gold); }
.scl-testimonial__stars svg.is-empty { color: var(--border); }

.scl-testimonial__link {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border);
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-ui); font-weight: 600; font-size: 12.5px;
  color: var(--scl-navy); letter-spacing: .02em;
  transition: color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.scl-testimonial__link:hover { color: var(--scl-gold-deep); gap: 10px; }

.scl-testimonial__read-more {
  align-self: flex-end;
  background: none; border: none; padding: 0; margin: -10px 0 0; cursor: pointer;
  font-family: var(--font-ui); font-weight: 600; font-size: 12.5px;
  color: var(--scl-gold-deep); letter-spacing: .02em;
  transition: color var(--dur) var(--ease);
  font-style: italic;
}
.scl-testimonial__read-more:hover, .scl-testimonial__read-more:focus-visible { color: var(--scl-navy); text-decoration: underline; }
.scl-testimonial--featured .scl-testimonial__read-more { color: var(--scl-steel-300); }
.scl-testimonial--featured .scl-testimonial__read-more:hover, .scl-testimonial--featured .scl-testimonial__read-more:focus-visible { color: #fff; }

/* ---------- Testimonial dialog -------------------------------------- */
.scl-modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(22, 32, 57, .6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
  animation: scl-modal-fade var(--dur) var(--ease);
}
.scl-modal {
  position: relative; width: 100%; max-width: 560px; max-height: 85vh;
  background: #fff; color: var(--scl-navy-ink);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
  padding: 40px; display: flex; flex-direction: column; gap: 20px;
  animation: scl-modal-rise var(--dur-slow) var(--ease);
}
.scl-modal__close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
  background: #fff; color: var(--scl-navy);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.scl-modal__close:hover, .scl-modal__close:focus-visible { background: var(--scl-gold-wash); border-color: var(--scl-gold); }
.scl-modal__head { display: flex; align-items: center; justify-content: space-between; color: var(--scl-gold); padding-right: 40px; }
.scl-modal__body { overflow-y: auto; max-height: 50vh; padding-right: 4px; }
.scl-modal__quote {
  font-family: var(--font-display); font-style: italic; font-size: 22px; line-height: 1.55;
  color: var(--scl-navy-ink); margin: 0;
}
@keyframes scl-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes scl-modal-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .scl-modal-overlay, .scl-modal { animation: none; }
}
@media (max-width: 720px) {
  .scl-modal { padding: 28px 22px; max-height: 88vh; }
  .scl-modal__quote { font-size: 18px; }
}

.scl-testimonials__cta { margin-top: 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 0 0; border-top: 1px solid var(--border); }
.scl-testimonials__cta .scl-h5 { font-family: var(--font-display); font-weight: 400; font-size: 24px; color: var(--scl-navy-ink); }
.scl-testimonials__cta-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------- Videos (carousel) -------------------------------------- */
.scl-videos {
  display: flex; gap: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 2px;
}
.scl-videos::-webkit-scrollbar { display: none; }
.scl-video {
  display: block;
  scroll-snap-align: start;
  flex: 0 0 calc((100% - 3 * 24px) / 3.34);
  min-width: 0;
}
.scl-video__thumb {
  aspect-ratio: 16/10; border-radius: var(--radius-lg); overflow: hidden; position: relative;
  background: linear-gradient(165deg, #2d4060 0%, #162039 100%);
  transition: transform var(--dur) var(--ease);
}
.scl-video__thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scl-video__thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,32,57,.1) 0%, rgba(22,32,57,.4) 100%);
  pointer-events: none;
}
.scl-video:hover .scl-video__thumb { transform: translateY(-3px); }
.scl-video__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%; background: var(--scl-gold);
  display: flex; align-items: center; justify-content: center; color: var(--scl-navy-deep);
  box-shadow: var(--shadow-gold);
}
.scl-video__duration {
  position: absolute; bottom: 12px; right: 12px;
  padding: 5px 10px; border-radius: 4px;
  background: rgba(22, 32, 57, .8); color: #fff;
  font-family: var(--font-ui); font-size: 11px; letter-spacing: .05em;
}
.scl-video__meta { padding: 16px 4px 0; }
.scl-video__meta .scl-micro { color: var(--scl-gold-deep); }
.scl-video__title { font-family: var(--font-display); font-weight: 400; font-size: 19px; line-height: 1.3; margin-top: 6px; color: var(--scl-navy-ink); }

/* ---------- Timeline (SCL em movimento) ----------------------------- */
.scl-timeline .scl-section__head-sub { color: rgba(255,255,255,.72); }

.scl-timeline-scroll { overflow-x: auto; column-gap: 24px; scrollbar-width: none; -ms-overflow-style: none; }
.scl-timeline-scroll::-webkit-scrollbar { display: none; }

.scl-timeline-rail-track { position: relative; display: flex; align-items: flex-start; gap: 24px; width: max-content; }
.scl-timeline-rail { position: absolute; left: 0; right: 0; top: 12px; height: 1px; background: rgba(255,255,255,.16); z-index: 0; }

.scl-timeline-item { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 300px; flex: 0 0 auto; }
.scl-timeline-node-slot { height: 24px; width: 100%; display: flex; align-items: center; justify-content: center; }
.scl-timeline-node { width: 13px; height: 13px; border-radius: 50%; background: transparent; border: 2px solid rgba(255,255,255,.4); }
.scl-timeline-node--next { width: 19px; height: 19px; border: none; background: var(--scl-gold); box-shadow: 0 0 0 5px rgba(218,165,32,.22), 0 0 0 1px rgba(218,165,32,.6); }
.scl-timeline-node--upcoming { border: none; background: var(--scl-steel-700); }

.scl-timeline-connector { width: 1px; height: 14px; background: rgba(255,255,255,.18); }

.scl-timeline-badge {
  display: inline-flex; align-items: center; margin-bottom: 12px;
  padding: 4px 12px; border-radius: var(--radius-pill);
  font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.14);
}
.scl-timeline-badge--next { background: rgba(218,165,32,.15); color: var(--scl-gold); border-color: rgba(218,165,32,.4); }
.scl-timeline-badge--upcoming { background: rgba(170, 185, 71, 0.35); color: var(--scl-steel-300); border-color: rgba(162,184,199,.3); }

.scl-timeline-card {
  width: 100%; display: flex; flex-direction: column;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg); padding: 18px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
/* Date + icon + title stay together as a row up top; the description (a sibling of this,
   not nested in it) is free to run the full width of the card below, instead of being
   squeezed into just the space to the right of the date/icon column. */
.scl-timeline-card__top { display: flex; gap: 14px; align-items: flex-start; }
.scl-timeline-card--next { border-color: rgba(218,165,32,.35); background: rgba(218,165,32,.07); }
.scl-carousel-card--edge.scl-timeline-item .scl-timeline-card:hover { border-color: rgba(255,255,255,.28); }

/* Only items with a link look/act clickable — reuses the carousel edge-card hover language. */
.scl-timeline-card-link { display: block; cursor: pointer; }
.scl-timeline-card-link:hover .scl-timeline-card,
.scl-timeline-card-link:focus-visible .scl-timeline-card {
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.07);
}
.scl-timeline-card-link:hover .scl-timeline-card--next,
.scl-timeline-card-link:focus-visible .scl-timeline-card--next {
  border-color: rgba(218,165,32,.5);
  background: rgba(218,165,32,.11);
}

.scl-timeline-card__date { flex: 0 0 auto; min-width: 42px; display: flex; flex-direction: column; align-items: flex-start; }
.scl-timeline-card__day { font-family: var(--font-display); font-size: 26px; line-height: 1; color: var(--scl-gold); }
.scl-timeline-card__month { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: 4px; }
.scl-timeline-card__year { font-family: var(--font-ui); font-size: 11px; color: rgba(255,255,255,.4); }

.scl-timeline-card__icon {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; margin-top: 2px;
  background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; color: var(--scl-gold);
}
.scl-timeline-card__title { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 400; font-size: 18px; line-height: 1.3; color: #fff; margin: 0; }
.scl-timeline-card__desc { font-family: var(--font-body); font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.6); margin: 12px 0 0; }

/* ---------- Articles --------------------------------------------- */
/* (section removed — kept empty for future use) */

/* ---------- Conversion ------------------------------------------- */
.scl-conversion { position: relative; padding: 24px 0; }
.scl-conversion__watermark {
  position: absolute; right: -120px; top: 50%; transform: translateY(-50%);
  width: 640px; opacity: .07; pointer-events: none;
}
.scl-conversion__content { max-width: 720px; position: relative; }
.scl-conversion__headline { font-size: clamp(40px, 5vw, 64px); color: var(--scl-navy-ink); margin-top: 12px; }
.scl-conversion__headline em { color: var(--scl-gold-deep); font-style: italic; }
.scl-conversion__sub { margin: 24px 0 36px; max-width: 580px; color: var(--fg-muted); }
.scl-conversion__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.scl-conversion__bullets { list-style: none; padding: 0; margin: 36px 0 0; display: flex; flex-direction: column; gap: 12px; }
.scl-conversion__bullets li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--scl-navy-ink); }
.scl-conversion__bullets svg { color: var(--scl-gold-deep); flex: 0 0 auto; }

/* ---------- FAQ ------------------------------------------------------ */
.scl-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; margin-top: 16px; }
.scl-faq-item {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: #fff; overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}
.scl-faq-item.is-open { border-color: var(--scl-gold); }

.scl-faq-item__question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px; background: transparent; border: 0; cursor: pointer; text-align: left;
}
.scl-faq-item__q-text {
  font-family: var(--font-ui); font-weight: 700; font-size: 15px; line-height: 1.4;
  color: var(--scl-navy); display: flex; gap: 10px;
}
.scl-faq-item__num { color: var(--scl-navy); opacity: .45; flex: 0 0 auto; }

.scl-faq-item__toggle {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--scl-gold-wash); color: var(--scl-gold-deep);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.scl-faq-item.is-open .scl-faq-item__toggle { background: var(--scl-gold); color: #fff; }

.scl-faq-item__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease);
}
.scl-faq-item.is-open .scl-faq-item__panel { grid-template-rows: 1fr; }
.scl-faq-item__panel-inner { overflow: hidden; min-height: 0; }
.scl-faq-item__answer { margin: 0 22px 20px; }

/* ---------- Links Hub (Central de Links) -----------------------------
   Reuses the FAQ accordion's card chrome as-is (.scl-faq-grid / .scl-faq-item /
   .scl-faq-item__question / .scl-faq-item__toggle) so link items share the exact same visual
   language as FAQ questions — same grid, border, radius, padding, and toggle badge. Only what's
   actually different from a FAQ question is styled below: a square image tile instead of the
   numbered index, a two-line title/description stack instead of a single line of question text,
   and a hover border (FAQ items only turn gold once opened; link items are never "open", so they
   get the gold border on hover/focus instead — scoped to .scl-link-item so it never touches FAQ). */
/* The Links Hub page (LinksPage.jsx) wraps its content section in .scl-links-page so this
   navy-on-navy treatment stays scoped to that one page — it never touches the shared Simple
   Extra template, the Header, or the FAQ, which also renders .scl-faq-item cards but never
   carries this class. Header/PageHeader/Footer are already var(--scl-navy-deep); this just
   makes the page's own <main> section match them for a continuous navy surface, with the link
   cards one step lighter (var(--scl-navy) — the existing, less-dark step of the same navy scale). */
/* .scl-section's own shared padding (var(--space-9) top+bottom = 96px) stacked on top of
   .scl-links-page-header's bottom padding and the shared Footer's own top padding was producing
   a very large gap on both ends. Overriding the longhand top/bottom here (same specificity,
   declared later, so it wins over .scl-section's shorthand — no negative margins involved):
   top goes to 0 since .scl-links-page-header already provides the title-to-cards gap on its own;
   bottom is trimmed to --space-6 so there's still a real gap before the Footer's own top padding
   takes over, just without the doubled-up empty navy band. */
.scl-links-page { background: var(--scl-navy-deep); padding-top: 0; padding-bottom: var(--space-6); }

/* #root itself is transparent by default (only body/scl-section backgrounds paint), so any strip
   outside main's content (e.g. a sub-pixel gap during layout, or if content is shorter than the
   viewport) could show the page's default background instead of navy. Scoped to links/index.html
   only via the body class it sets — every other page's #root is untouched. */
body.scl-body--links #root { background: var(--scl-navy-deep); }

.scl-link-item { background: var(--scl-navy); }
.scl-link-item:hover, .scl-link-item:focus-visible {
  border-color: var(--scl-gold);
  background: var(--scl-steel-700);
}

.scl-link-item__media {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--radius-md);
  background: var(--scl-neutral-700); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* seal-only-black.png is a black silhouette — invert it to white so it reads against the dark
   tile, the same treatment this exact asset already gets in the Header/Footer marks. */
.scl-link-item__media img { width: 100%; height: 100%; object-fit: contain; object-position: center; filter: brightness(0) invert(1); }
.scl-link-item__media svg { color: var(--scl-gold-deep); }

.scl-link-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.scl-link-item__title { font-family: var(--font-ui); font-weight: 700; font-size: 15px; line-height: 1.4; color: #fff; }
.scl-link-item__desc { font-family: var(--font-body); font-size: var(--fs-small); line-height: var(--lh-normal); color: rgba(255,255,255,.72); }

/* ---------- Team ---------------------------------------------------- */
.scl-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 28px; margin-top: 16px; }
.scl-team-card { display: flex; flex-direction: column; gap: 7px; }
.scl-team-card__photo {
  aspect-ratio: 1 / 1; background: linear-gradient(155deg, #2d4060 0%, #162039 100%);
  border-radius: var(--radius-lg); position: relative; overflow: hidden;
  box-shadow: var(--shadow-2);
}
.scl-team-card__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  object-position: center 20%;
}
.scl-team-card__img.is-placeholder {
  object-fit: contain; padding: 22%; box-sizing: border-box;
  filter: brightness(0) invert(1); opacity: .3;
}
.scl-team-card__name { font-family: var(--font-display); font-weight: 400; font-size: 18px; color: var(--scl-navy-ink); margin: 0; line-height: 1.25; }
.scl-team-card__role { font-family: var(--font-ui); font-size: 12.5px; letter-spacing: .04em; color: var(--fg-muted); }

/* ---------- Footer ------------------------------------------------ */
.scl-footer { background: var(--scl-navy-deep); color: rgba(255,255,255,.78); padding: var(--space-8) 0 var(--space-7); margin-top: 0; }
.scl-footer__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.scl-footer__brand { display: flex; align-items: center; gap: 14px; }
.scl-footer__mark { height: 48px; filter: brightness(0) invert(1); }
.scl-footer__name { font-family: var(--font-display); color: #fff; font-size: 17px; letter-spacing: .22em; }
.scl-footer__sub { font-family: var(--font-ui); color: rgba(255,255,255,.55); font-size: 10px; letter-spacing: .24em; margin-top: 6px; }

.scl-footer__divider { display: block; height: 1px; background: rgba(255,255,255,.1); margin: 40px 0; }

.scl-footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; }
.scl-footer__col { display: flex; flex-direction: column; gap: 14px; }
.scl-footer__head { font-family: var(--font-ui); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--scl-gold); font-weight: 600; margin-bottom: 4px; }
.scl-footer__row, .scl-footer__link {
  display: inline-flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,.78); font-size: 13px;
  transition: color var(--dur) var(--ease);
}
.scl-footer__row--multiline { align-items: flex-start; }
.scl-footer__row--multiline svg { margin-top: 4px; flex: 0 0 auto; }
.scl-footer__row:hover, .scl-footer__link:hover { color: #fff; }
.scl-footer__social { display: flex; gap: 12px; margin-top: 4px; }
.scl-footer__social a {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18);
  display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.78);
  transition: all var(--dur) var(--ease);
}
.scl-footer__social a:hover { border-color: var(--scl-gold); color: var(--scl-gold); }

.scl-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* ---------- Sticky mobile CTA ------------------------------------- */
.scl-sticky-cta {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: none; align-items: center; gap: 8px;
  padding: 14px 20px; border-radius: 999px;
  background: var(--scl-gold); color: var(--scl-navy-deep);
  font-family: var(--font-ui); font-weight: 700; font-size: 14px;
  box-shadow: 0 16px 36px -12px rgba(218, 165, 32, .65);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.scl-sticky-cta.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ---------- Phone — clickable only on mobile --------------------- */
/* On desktop the phone number is just caption-style text (not clickable).
   On mobile (≤720px) it behaves as a normal tel: link / button.        */
@media (min-width: 721px) {
  .scl-phone-link {
    pointer-events: none;
    cursor: default;
  }
  .scl-phone-link:hover { color: inherit; }

  /* Strip the button chrome when the link is presented as a CTA */
  .scl-phone-cta {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    padding: 17px 4px;
    pointer-events: none;
    cursor: default;
    letter-spacing: .04em;
  }
  .scl-phone-cta:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: inherit;
  }
  .scl-phone-cta--light { color: rgba(255, 255, 255, .82); }
}

/* ---------- Responsive ------------------------------------------- */
@media (max-width: 1180px) {
  .scl-header__phone { display: none; }
}
/* Header switches to the hamburger drawer earlier than the general tablet
   breakpoint below: at 1024–1200px there isn't reliably enough room for the
   full nav + language switch + CTA in the longer PT/ES translations. */
@media (max-width: 1200px) {
  .scl-header__nav { display: none; }
  .scl-header__menu { display: inline-flex; }
  .scl-header__drawer { display: flex; background: var(--scl-navy-deep); }
  .scl-lang-switch--desktop { display: none; }
  .scl-lang-switch-wrap--desktop { display: none; }
  .scl-header__cta { display: none; }
}
@media (max-width: 1024px) {
  .scl-section { padding: var(--space-8) 0; }
  /* .scl-section's own responsive padding above would otherwise re-widen the trimmed Links Hub
     gaps at this breakpoint too, since it's declared later in the cascade at equal specificity. */
  .scl-links-page { padding-top: 0; padding-bottom: var(--space-6); }
  .scl-section__head { grid-template-columns: 1fr; gap: 16px; }
  .scl-service-card { flex-basis: calc((100% - 2 * 24px) / 2.34); }
  .scl-authority { grid-template-columns: 1fr; gap: 64px; }
  .scl-video { flex-basis: calc((100% - 2 * 24px) / 2.34); }
  .scl-hero__seal-frame { display: none; }
  .scl-diffs { grid-template-columns: 1fr; }
  .scl-diff:nth-child(odd), .scl-diff:nth-child(even) { padding: 28px 0; border-right: 0; }
  .scl-testimonials-carousel .scl-testimonial { flex-basis: calc((100% - 2 * 24px) / 2.34); }
  .scl-testimonial--featured { padding: 36px; }
  .scl-testimonial--featured .scl-testimonial__quote { font-size: 24px; }
  .scl-footer__grid { grid-template-columns: 1fr 1fr; }
  .scl-team { grid-template-columns: repeat(3, 1fr); }
  .scl-timeline-item { width: 260px; }
  .scl-faq-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .scl-container { padding: 0 var(--space-5); }
  .scl-section { padding: var(--space-7) 0; }
  .scl-section__head { margin-bottom: var(--space-6); }
  .scl-hero { padding: 132px 0 80px; }
  .scl-page-header { padding: 132px 0 48px; }
  .scl-page-header__title { font-size: var(--fs-h2); }
  /* Same reasoning as the 1024px step above — these two re-declare the shared rules again here. */
  .scl-links-page-header { padding: 30px; }
  .scl-links-page { padding-top: 0; padding-bottom: var(--space-5); }
  .scl-hero__cta { flex-direction: column; align-items: stretch; }
  .scl-hero__cta .scl-btn { justify-content: center; }
  .scl-hero__trust-set { gap: 16px; margin-right: 16px; }
  .scl-hero__trust-divider { display: none; }
  .scl-hero__headline {  font-size: 60px;}
  .scl-authority__card { position: relative; right: auto; bottom: auto; margin-top: 16px; }
  /* Two narrow columns get cramped on phones — back to a single column, so the 3rd item's
     border-bottom (only removed for the 2-col layout's column-end) needs reinstating too. */
  .scl-creds--2col { grid-template-columns: 1fr; grid-auto-flow: row; }
  .scl-creds--2col .scl-creds__item:nth-child(3) { border-bottom: 1px solid var(--border); }
  .scl-services__cta-strip { flex-direction: column; align-items: stretch; text-align: left; }
  .scl-services__cta-strip .scl-btn { justify-content: center; }
  .scl-testimonials__cta { flex-direction: column; align-items: stretch; }
  .scl-testimonials__cta-actions { flex-direction: column; align-items: stretch; }
  .scl-testimonials__cta-actions .scl-btn { justify-content: center; }
  .scl-services { gap: 16px; }
  .scl-service-card { flex-basis: calc((100% - 16px) / 1.34); padding: 26px; }
  .scl-carousel-fade::after { width: 44px; }
  .scl-hero__trust::before, .scl-hero__trust::after { width: 44px; }
  .scl-timeline-item { width: 230px; }
  .scl-faq-item__question { padding: 16px 18px; }
  .scl-faq-item__answer { margin: 0 18px 16px; }
  .scl-link-item__media { width: 40px; height: 40px; }
  .scl-timeline-rail-track { gap: 16px; }
  .scl-timeline-scroll { column-gap: 16px; }
  .scl-timeline-card { padding: 14px; gap: 10px; }
  .scl-timeline-card__top { gap: 10px; }
  .scl-testimonials-carousel { gap: 16px; }
  .scl-testimonials-carousel .scl-testimonial { flex-basis: calc((100% - 16px) / 1.34); padding: 22px; }
  .scl-testimonial--featured { padding: 28px; }
  .scl-testimonial--featured .scl-testimonial__quote { font-size: 20px; }
  .scl-videos { gap: 16px; }
  .scl-video { flex-basis: calc((100% - 16px) / 1.34); }
  .scl-footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .scl-footer__top { flex-direction: column; align-items: flex-start; }
  .scl-conversion__cta { flex-direction: column; align-items: stretch; }
  .scl-conversion__cta .scl-btn { justify-content: center; }
  .scl-sticky-cta { display: inline-flex; }
  .scl-diff { grid-template-columns: 56px 1fr; gap: 18px; }
  .scl-diff__num { font-size: 36px; }
  .scl-team { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}