/*
 * ALIGN | Editorial UI polish — 09 Nov 2026
 * Deliberately non-destructive: copy, artwork, content order, CTA URLs, colors,
 * interaction states and the existing layout architecture are unchanged.
 * Heading family: Poppins 700. Body/UI family: Manrope.
 * This file is loaded AFTER style.css and infographic-system.css.
 */
:root {
  --font-headline: 'Poppins', 'Arial', sans-serif;
  --font-body: 'Manrope', 'Arial', sans-serif;
  --headline-tracking: -.045em;
}

/* 01 | True type consistency across all sections and both languages. */
html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body, button, input, textarea, select { font-family: var(--font-body); }
:is(h1, h2, h3, h4, h5, h6, .display-title),
:is(h1, h2, h3, h4, h5, h6, .display-title) :is(span, strong, em),
.hero .hero-left h1,
.hero .hero-left h1 :is(span, strong, em),
.signal-section .signal-head h2.display-title,
.signal-section .signal-head h2.display-title .headline-accent {
  font-family: var(--font-headline) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-synthesis: none;
}
:is(h1, h2, h3, h4, h5, h6, .display-title) {
  letter-spacing: var(--headline-tracking) !important;
  text-wrap: balance;
}
.hero .hero-left h1,
.hero .hero-left h1 :is(span, strong, em) {
  line-height: 1.105 !important;
  letter-spacing: -.048em !important;
}
.hero .hero-left h1 em { font-size: 1em !important; color: var(--orange); }
.hero .hero-left h1 { max-width: 850px; }
/* Minor headline-like elements inside the interactive alignment infographic. */
.orbital-core span,
.clarity-premium .cp-copy strong,
.clarity-premium .clarity-center strong,
.signal-section .cp-explainer-index,
.clarity-premium .cp-icon,
.statement-track {
  font-family: var(--font-headline) !important;
  font-weight: 700 !important;
}
/* Keep the product/brand mark untouched: it is an image asset. */

/* 02 | Editorial heading scale, consistent rhythm, and readable line lengths. */
.display-title,
.signal-section .signal-head h2.display-title {
  font-size: clamp(36px, 4.35vw, 66px) !important;
  line-height: 1.135 !important;
  letter-spacing: -.045em !important;
}
.portfolio-intro h2,
.paradox-intro h2,
.framework-section h2,
.ai-bridge h2,
.contact h2 {
  letter-spacing: -.045em !important;
  line-height: 1.145 !important;
}
.section-head { column-gap: clamp(32px, 6vw, 100px); margin-bottom: clamp(34px, 4vw, 56px); }
.section-num, .eyebrow, .entry-kicker { letter-spacing: .14em; }
.section-sub { max-width: 430px; line-height: 1.8; }
.hero-bottom > p { max-width: 565px; line-height: 1.75; }
.entry-card h3, .portfolio-card h3, .paradox-contrast h3,
.paradox-answer h3, .ai-method-heading h3 { line-height: 1.2; }
.entry-desc, .entry-pain, .entry-scope { line-height: 1.72; }

/* 03 | Layout discipline: clear CTA affordances and consistent interactive states. */
:is(.button, .entry-button, .portfolio-button, .header-cta, .ai-bridge-cta) {
  text-decoration: none;
}
:is(a, button, summary, [role='tab']):focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
}
:is(.entry-card, .portfolio-card, .capability-card) { min-width: 0; }
:is(.entry-desc, .entry-pain, .entry-scope, .portfolio-card p, .framework-content p) {
  overflow-wrap: break-word;
}
/* Stops navigation label and WhatsApp arrow from wrapping awkwardly on tablets. */
.header-cta { white-space: nowrap; }

/* 04 | Responsive refinement, without removing any copy or sections. */
@media (max-width: 980px) {
  .section-head { column-gap: 28px; }
  .masthead { gap: 16px; }
  .header-actions { gap: 14px; }
}
@media (max-width: 680px) {
  html { scroll-padding-top: 78px; }
  .masthead { padding-inline: 20px; }
  .header-actions { gap: 12px; }
  .header-cta { padding: 12px 13px; font-size: 11px; line-height: 1.25; }
  .hero .hero-left h1 { font-size: clamp(34px, 8.9vw, 48px); line-height: 1.11 !important; }
  .hero .hero-left h1 :is(span, strong, em) { line-height: 1.11 !important; }
  .display-title, .signal-section .signal-head h2.display-title {
    font-size: clamp(30px, 8.2vw, 43px) !important;
    line-height: 1.17 !important;
  }
  .section-head { gap: 20px; margin-bottom: 34px; }
  .section-sub { line-height: 1.73; }
  .entry-card h3 { font-size: clamp(26px, 7.4vw, 33px); }
  .entry-card { padding: 27px 23px; }
  .entry-card .entry-visual { margin-top: 8px; margin-bottom: 15px; }
  .ai-method-heading h3 { font-size: 22px; }
}
@media (max-width: 380px) {
  .masthead { padding-inline: 16px; }
  .header-actions { gap: 8px; }
  .header-cta { font-size: 10px; padding: 10px 9px; }
  .hero .hero-left h1 { font-size: clamp(32px, 8.7vw, 36px); }
}
@media (max-width: 380px) {
  /* The hero continues to carry the primary WhatsApp CTA at this size. */
  .masthead .header-cta { display: none; }
}

/* 05 | Respect reduced-motion and maintain legibility during keyboard use. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .statement-track { animation: none !important; }
  :is(.entry-card, .portfolio-card, .button, .header-cta) { transition-duration: .01ms !important; }
}

/* 06 | Compact navigation safety: no sideways scroll at phone widths. */
@media (max-width: 680px) {
  .masthead { gap: 8px; }
  .header-actions { gap: 8px; }
  .header-cta { padding-inline: 10px; font-size: 10.5px; }
  .brand { min-width: 0; }
}