/* =========================================================================
   ETYC — Site (institutional)
   Layout primitives, header, footer, hero, editorial sections.
   Sits on top of tokens.css + components.css. Mobile-first.
   ========================================================================= */

/* ---------- Base reset on top of tokens ---------- */
body {
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
}

img { max-width: 100%; display: block; }

/* ---------- Layout primitives ---------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}
@media (max-width: 720px) {
  .container { padding-left: 20px; padding-right: 20px; }
}

.section {
  padding: 96px 0;
}
.section--tight   { padding: 64px 0; }
.section--loose   { padding: 128px 0; }
.section--alt     { background: var(--color-accent-pale); }
.section--soft    { background: #EEF7F8; }
.section--primary { background: var(--color-primary); color: #fff; }
.section--primary h1, .section--primary h2, .section--primary h3 { color: #fff; }
.section--primary p { color: rgba(255,255,255,0.82); }

@media (max-width: 720px) {
  .section { padding: 64px 0; }
  .section--loose { padding: 80px 0; }
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-soft);
  margin: 0 0 16px;
  display: inline-block;
}
.eyebrow--coral { color: var(--color-cta); }
.section--primary .eyebrow { color: #FFC9B5; }

/* ---------- Typography scale (site) ---------- */
.h-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 6.2vw, 84px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--color-primary);
  text-wrap: balance;
}
.h-display .signature {
  font-style: italic;
  font-weight: 400;
  color: var(--color-cta);
}

.h-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  text-wrap: balance;
}
.h-title .signature {
  font-style: italic;
  color: var(--color-cta);
}

.h-section {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-primary);
}

.lede {
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 60ch;
}


/* ---------- Header ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(248, 253, 255, 0.88);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  gap: 24px;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-primary);
}
.nav__brand-mark {
  width: 36px;
  height: 36px;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav__links a {
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  border-radius: var(--radius-full);
  transition:
    background 320ms cubic-bezier(0.4, 0, 0.2, 1),
    color 360ms cubic-bezier(0.4, 0, 0.2, 1);
}
.nav__links a:hover { background: var(--color-bg-base); color: var(--color-primary); }
.nav__links a.is-active {
  color: var(--color-primary);
  font-weight: 600;
}
.nav__cta { display: flex; align-items: center; gap: 8px; }

/* Partners CTA — single source for the Partners entry, always visible.
   Sits in .nav__cta next to the lang switcher and the demo button. On
   mobile (<=480px) the label is hidden so only the icon remains. */
.nav__cta-partners {
  display: inline-flex;
  gap: 6px;
}
.nav__cta-partners-icon { flex-shrink: 0; }
.nav__cta-partners[aria-current="page"] {
  background: var(--color-accent-pale);
  color: var(--color-primary);
}
@media (max-width: 480px) {
  .nav__cta-partners { padding: 0 12px; }
  .nav__cta-partners-label { display: none; }
}

/* Nav primary CTA — at 14px on a translucent off-white nav, coral never
   resolves cleanly. Switch to brand Ink default → Deep Teal hover.
   Both are official brand tokens; both clear 12:1 contrast with white. */
/* No override — header "Book a demo" inherits the canonical coral btn--primary,
   so the CTA color stays identical across the whole site. */
/* Hero large primary buttons — coral works on light backgrounds; keep
   the default coral → coral-dark hover from components.css. */

/* CTA strip primary buttons sit on the Ink (#0A1F22) background. The default
   coral has enough contrast, but on hover going to coral-dark blends into the
   dark surface. Solution: add a soft white border so the button is always
   defined, and bump it on hover for clear feedback. */
.cta-strip__ctas .btn--primary {
  border-color: rgba(255, 255, 255, 0.20);
}
.cta-strip__ctas .btn--primary:hover:not(:disabled) {
  background: var(--color-cta-hover);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10);
}

/* Language switcher */
.lang {
  display: inline-flex;
  padding: 3px;
  background: var(--color-bg-base);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}
.lang a {
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--color-text-muted);
  transition:
    background 360ms cubic-bezier(0.4, 0, 0.2, 1),
    color 360ms cubic-bezier(0.4, 0, 0.2, 1);
}
.lang a:hover { color: var(--color-primary); }
.lang a.is-active {
  background: var(--color-primary);
  color: #fff;
}
@media (max-width: 540px) {
  .lang { display: none; }
}

.nav__menu-btn {
  display: none;
  background: transparent;
  border: 1px solid var(--color-border);
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  color: var(--color-primary);
  align-items: center; justify-content: center;
  cursor: pointer;
}
@media (max-width: 920px) {
  .nav__links { display: none; }
  .nav__menu-btn { display: inline-flex; }
}

/* mobile drawer */
.nav__drawer {
  display: none;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 16px 32px 24px;
}
.nav__drawer.is-open { display: block; }
.nav__drawer a:not(.btn) {
  display: block;
  padding: 14px 0;
  font-size: 17px;
  color: var(--color-primary);
  font-weight: 500;
  border-bottom: 1px solid var(--color-border);
}
.nav__drawer .btn {
  margin-top: 16px;
  width: 100%;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--color-bg-dark);
  color: #EAF1F2;
  padding: 96px 0 32px;
}
.footer__tagline {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 22ch;
  margin: 0 0 64px;
  text-wrap: balance;
}
.footer__tagline .signature {
  font-style: italic;
  color: #FFC9B5;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 48px;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 48px;
}
@media (max-width: 880px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 540px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer { padding-top: 64px; }
}
.footer__col h5 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin: 0 0 16px;
}
.footer__col a, .footer__col p {
  display: block;
  color: rgba(234,241,242,0.78);
  font-size: 14px;
  padding: 6px 0;
}
.footer__col a {
  position: relative;
  width: fit-content;
  transition: color 360ms cubic-bezier(0.4, 0, 0.2, 1);
}
.footer__col a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 4px;
  height: 1px;
  width: 100%;
  background: rgba(255, 255, 255, 0.55);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}
.footer__col a:hover { color: #fff; }
.footer__col a:hover::after { transform: scaleX(1); }

.footer__brand-line {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.footer__brand-sub {
  font-size: 13px;
  color: rgba(234,241,242,0.6);
  max-width: 32ch;
  line-height: 1.55;
}

.footer__legal {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: rgba(234,241,242,0.55);
}
.footer__legal a {
  color: rgba(234,241,242,0.7);
  transition: color 360ms cubic-bezier(0.4, 0, 0.2, 1);
}
.footer__legal a:hover { color: #fff; }
.footer__legal-links { display: flex; gap: 20px; }

/* ---------- Hero ---------- */
.hero {
  padding: 88px 0 96px;
  position: relative;
  overflow: hidden;
}
.hero__eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 8px;
  background: rgba(222, 72, 79, 0.08);
  color: var(--color-cta);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 24px;
  font-style: italic;
  font-family: var(--font-display);
}
.hero__eyebrow-badge::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-cta);
  margin-left: 4px;
}
.hero__sub {
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--color-text-muted);
  max-width: 56ch;
  margin: 24px 0 36px;
  line-height: 1.55;
}
.hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
/* ---------- Standards strip ---------- */
.standards {
  padding: 40px 0;
  background: #fff;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.standards__inner {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 720px) {
  .standards__inner { grid-template-columns: 1fr; gap: 16px; }
}
.standards__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.standards__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.standards__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.standards__pill {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--color-accent-pale);
  color: var(--color-primary);
  transition:
    background 280ms cubic-bezier(0.4, 0, 0.2, 1),
    color 280ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 340ms cubic-bezier(0.22, 1, 0.36, 1);
  cursor: default;
}
.standards__pill:hover {
  background: var(--color-accent);
  box-shadow: 0 6px 16px -10px rgba(0, 95, 97, 0.35);
}
.standards__pill--alt {
  background: rgba(222,72,79,0.08);
  color: var(--color-cta);
}
.standards__pill--alt:hover {
  background: rgba(222,72,79,0.18);
  box-shadow: 0 6px 16px -10px rgba(222, 72, 79, 0.35);
}

/* ---------- Sans / Avec comparison ---------- */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  position: relative;
  isolation: isolate;
}
@media (max-width: 820px) { .compare { grid-template-columns: 1fr; gap: 16px; } }

/* Vertical divider between the columns — coral→teal hairline */
.compare::after {
  content: "";
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(222, 72, 79, 0.45) 22%, rgba(0, 95, 97, 0.45) 78%, transparent 100%);
  pointer-events: none;
}
@media (max-width: 820px) { .compare::after { display: none; } }

.compare__col {
  padding: 48px 40px;
  background: transparent;
  border: 0;
  border-radius: 0;
  position: relative;
}
.compare__col--bad { background: transparent; }
.compare__col--good {
  background: linear-gradient(135deg, var(--color-primary) 0%, #00484b 100%);
  color: #fff;
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px -24px rgba(0, 95, 97, 0.40);
  margin: -8px 0;
}
.compare__col--good h3 { color: #fff; }
.compare__col h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  margin-bottom: 28px;
  letter-spacing: -0.015em;
  position: relative;
  padding-bottom: 16px;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.compare__col--bad h3 { color: var(--color-text-muted); }
.compare__col--bad h3::before {
  content: "✗";
  color: var(--color-cta);
  font-style: italic;
  font-weight: 600;
}
.compare__col--good h3::before {
  content: "✓";
  color: #FFC9B5;
  font-style: italic;
  font-weight: 600;
}
.compare__col h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 2px;
  background: var(--color-cta);
  transition: width 540ms cubic-bezier(0.22, 1, 0.36, 1);
}
.compare__col--good h3::after { background: rgba(255, 201, 181, 0.85); }
.compare__col:hover h3::after { width: 140px; }
.compare__list { list-style: none; padding: 0; margin: 0; }
.compare__list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--color-border);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-muted);
}
.compare__list li:first-child { border-top: none; }
.compare__col--good .compare__list li {
  border-top-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
}
.compare__icon {
  width: 20px; height: 20px;
  flex: none;
  margin-top: 2px;
  color: var(--color-text-muted);
}
.compare__col--good .compare__icon { color: #FFC9B5; }

/* ---------- Trust strip (compact partner logos) ---------- */
.trust-strip {
  background: var(--color-bg-base);
  padding: 28px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.trust-strip__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.trust-strip__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  flex: none;
}
.trust-strip__logos {
  display: flex;
  align-items: center;
  gap: 36px;
  flex-wrap: wrap;
  flex: 1;
  justify-content: flex-end;
}
.trust-strip__logos img {
  max-height: 32px;
  max-width: 110px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.55;
  transition:
    filter 380ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.trust-strip__logos img:hover {
  filter: grayscale(0);
  opacity: 1;
}
@media (max-width: 720px) {
  .trust-strip__inner { gap: 20px; }
  .trust-strip__logos { justify-content: flex-start; gap: 24px; }
}

/* ---------- Levers ---------- */
.levers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 880px) { .levers { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .levers { grid-template-columns: 1fr; } }
.lever {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition:
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 380ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.lever:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent);
}
.lever__icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: var(--color-accent-pale);
  color: var(--color-primary);
}
.lever h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--color-primary);
}
.lever p {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* ---------- Verticals ---------- */
.verticals {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 24px;
}
@media (max-width: 880px) {
  .verticals { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .verticals { grid-template-columns: 1fr; }
}
.vertical {
  border-radius: var(--radius-xl);
  padding: 32px 28px;
  background: #fff;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 280px;
}
.vertical--lead {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.vertical__tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary-soft);
}
.vertical h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-primary);
}
.vertical p {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.55;
  flex: 1;
}
/* Lead variant overrides — placed AFTER generic rules so they win on source order. */
.vertical--lead h3 { color: #fff; }
.vertical--lead p  { color: rgba(255,255,255,0.82); }
.vertical--lead .vertical__tag { color: #FFC9B5; }
.vertical__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.vertical__tags span {
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--color-bg-base);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  transition:
    background 280ms cubic-bezier(0.4, 0, 0.2, 1),
    color 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.vertical:hover .vertical__tags span {
  background: var(--color-accent-pale);
  color: var(--color-primary);
}
.vertical--lead .vertical__tags span {
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.78);
}
.vertical--lead:hover .vertical__tags span {
  background: rgba(255,255,255,0.18);
  color: #fff;
}

/* ---------- Story / quote ----------
   NOTE: All .story styles are defined in home.css (single source of truth).
   The previous rules here have been removed to avoid cascade conflicts
   (circular portrait, teal ring, white card). Do not re-add story rules here. */

/* ---------- CTA strip ---------- */
.cta-strip {
  background: var(--color-bg-dark);
  color: #fff;
  padding: 96px 0;
  text-align: center;
}
.cta-strip h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4.5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 auto 32px;
  max-width: 22ch;
  text-wrap: balance;
}
.cta-strip h2 .signature {
  font-style: italic;
  color: #FFC9B5;
}
.cta-strip__ctas { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ---------- Page header (for sub-pages) ---------- */
.page-header {
  padding: 72px 0 56px;
  background: var(--color-bg-base);
  border-bottom: 1px solid var(--color-border);
}
.page-header__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: end;
}
@media (max-width: 880px) {
  .page-header__inner { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Generic two-col split ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- Small inline link arrow ---------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--color-cta);
}
.link-arrow {
  transition: color 360ms cubic-bezier(0.4, 0, 0.2, 1);
}
.link-arrow:hover { color: var(--color-cta-hover); }
.link-arrow svg { transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1); }
.link-arrow:hover svg { transform: translateX(3px); }

/* =========================================================================
   HERO — Cinematic, full-bleed (shared across every page).
   Photo background + teal-to-ink gradient overlay. Content centred,
   white typography. Loaded from site.css so every page that uses
   .hero--cinematic gets the rules without depending on home.css.
   ========================================================================= */

.hero.hero--cinematic {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  min-height: 720px;
  background: var(--color-bg-dark, #0A1F22);
}

.hero-cine__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: -2;
  transform: scale(1.0);
  transform-origin: 50% 55%;
  animation: hero-cine-zoom 30s ease-out 200ms 1 forwards;
  will-change: transform;
}

@keyframes hero-cine-zoom {
  from { transform: scale(1.0); }
  to   { transform: scale(1.04); }
}

.hero-cine__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      135deg,
      rgba(0, 95, 97, 0.78) 0%,
      rgba(10, 31, 34, 0.88) 100%
    ),
    radial-gradient(
      ellipse at 50% 100%,
      rgba(10, 31, 34, 0.25) 0%,
      transparent 60%
    );
}

.hero-cine__container {
  position: relative;
  z-index: 1;
  max-width: 880px;
  padding-top: 120px;
  padding-bottom: 120px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-cine__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FFC9B5;
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(8px);
  animation: hero-cine-fade-up 700ms cubic-bezier(0.22, 1, 0.36, 1) 60ms forwards;
}

.hero-cine__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 6.4vw, 88px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: #ffffff;
  text-wrap: balance;
  margin: 0 0 28px;
  max-width: 18ch;
}
.hero-cine__title .signature {
  font-style: italic;
  font-weight: 400;
  color: var(--color-cta);
}

.hero-cine__sub {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  max-width: 58ch;
  margin: 0 0 36px;
  opacity: 0;
  transform: translateY(8px);
  animation: hero-cine-fade-up 700ms cubic-bezier(0.22, 1, 0.36, 1) 200ms forwards;
}

.hero-cine__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  opacity: 0;
  transform: translateY(8px);
  animation: hero-cine-fade-up 700ms cubic-bezier(0.22, 1, 0.36, 1) 340ms forwards;
}

@keyframes hero-cine-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

/* Quiet text-only credibility line on the home cinematic hero. No chip, no
   medal — just a small accolade reference. */
.hero-cine__accolade {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 32px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  transition:
    color 280ms cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: translateY(8px);
  animation: hero-cine-fade-up 700ms cubic-bezier(0.22, 1, 0.36, 1) 480ms forwards;
}
.hero-cine__accolade:hover,
.hero-cine__accolade:focus-visible {
  color: #ffffff;
}
.hero-cine__accolade:focus-visible {
  outline: 2px solid #FFC9B5;
  outline-offset: 4px;
  border-radius: 2px;
}
.hero-cine__accolade-mark {
  color: #FFC9B5;
  font-size: 13px;
  line-height: 1;
}

/* ----- Tablet ----- */
@media (max-width: 980px) {
  .hero.hero--cinematic {
    min-height: 86vh;
    max-height: 920px;
  }
  .hero-cine__container {
    padding-top: 96px;
    padding-bottom: 96px;
  }
  .hero-cine__overlay {
    background:
      linear-gradient(
        160deg,
        rgba(0, 95, 97, 0.80) 0%,
        rgba(10, 31, 34, 0.92) 100%
      );
  }
}

/* ----- Mobile ----- */
@media (max-width: 640px) {
  .hero.hero--cinematic {
    min-height: 88vh;
    max-height: 880px;
  }
  .hero-cine__container {
    padding-top: 88px;
    padding-bottom: 72px;
  }
  .hero-cine__title { max-width: none; margin-bottom: 22px; }
  .hero-cine__sub   { margin-bottom: 28px; }
  .hero-cine__accolade { margin-top: 28px; }
}

@media (max-width: 480px) {
  .hero-cine__ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 10px;
  }
  .hero-cine__ctas .btn { width: 100%; justify-content: center; }
  .hero-cine__accolade {
    font-size: 12px;
    text-align: left;
    max-width: 100%;
  }
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  .hero-cine__bg { animation: none; transform: scale(1.0); }
  .hero-cine__eyebrow,
  .hero-cine__sub,
  .hero-cine__ctas,
  .hero-cine__accolade {
    animation: none;
    opacity: 1;
    transform: none;
  }
}