/* Homepage, Apple product-page layout. Scoped to body.ap-home. */
html body.ap-home .section { padding: clamp(6rem, 11vw, 10rem) 0 !important; }
html body.ap-home .section-header { text-align: center !important; max-width: 52rem !important; margin: 0 auto clamp(3rem, 6vw, 5rem) !important; }
html body.ap-home .section-header h2 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.5rem) !important; letter-spacing: -0.045em !important; line-height: 1.03 !important; font-weight: 700 !important; margin-bottom: 1.25rem !important; }
html body.ap-home .section-header p { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem) !important; line-height: 1.4 !important; color: var(--text-muted) !important; max-width: 40rem !important; margin: 0 auto !important; letter-spacing: -0.015em !important; }
html body.ap-home .section-chip { color: var(--brand-crimson) !important; font-weight: 600 !important; font-size: 1rem !important; letter-spacing: -0.01em !important; text-transform: none !important; }

/* Hero: cinematic, centred */
html body.ap-home .hero-section { min-height: calc(100vh - 70px) !important; display: flex !important; align-items: center !important; }
html body.ap-home .hero-title { font-size: clamp(2.8rem, 1.2rem + 5vw, 5.75rem) !important; letter-spacing: -0.05em !important; line-height: 1.0 !important; font-weight: 700 !important; }
html body.ap-home .hero-subtitle { font-size: clamp(1.2rem, 1rem + 0.8vw, 1.65rem) !important; letter-spacing: -0.018em !important; }
html body.ap-home .hero-cta-row .btn-primary, html body.ap-home .hero-cta-row .btn-secondary { padding: 1rem 2rem !important; font-size: 1.0625rem !important; }

/* Pillars: big tiles with generous space */
html body.ap-home #pillars { background: #FFFFFF !important; }
html body.ap-home #pillars .pillars-grid, html body.ap-home #side-effects .pillars-grid { gap: 1.25rem !important; }
html body.ap-home .pillar-card { background: var(--bg-main) !important; border: 0 !important; border-radius: var(--radius-xl) !important; padding: clamp(2rem, 3vw, 3rem) !important; box-shadow: none !important; }
html body.ap-home #side-effects .pillar-card { background: #FFFFFF !important; }
html body.ap-home .pillar-card h3 { font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem) !important; letter-spacing: -0.03em !important; margin: 1.5rem 0 0.5rem !important; }
html body.ap-home .pillar-tagline { font-size: 1.15rem !important; font-weight: 600 !important; letter-spacing: -0.015em !important; }
html body.ap-home .pillar-desc, html body.ap-home .pillar-card > p:not(.pillar-tagline) { color: var(--text-muted) !important; font-size: 1.0625rem !important; line-height: 1.5 !important; }
html body.ap-home .pillar-icon-wrap { width: 52px !important; height: 52px !important; border-radius: 14px !important; }
html body.ap-home .pillar-link { font-size: 1.0625rem !important; transition: transform .3s var(--ap-spring) !important; }
html body.ap-home .pillar-link:hover { transform: translateX(3px) !important; }

/* Model */
html body.ap-home #redowl-model { background: var(--bg-main) !important; }
html body.ap-home .process-step-item { background: #FFFFFF !important; border: 0 !important; border-radius: var(--radius-lg) !important; padding: 2rem !important; }
html body.ap-home .step-badge { color: var(--brand-crimson) !important; background: none !important; border: 0 !important; padding: 0 !important; font-weight: 600 !important; letter-spacing: 0 !important; }
html body.ap-home .process-step-item h4 { font-size: 1.35rem !important; letter-spacing: -0.025em !important; margin: 0.75rem 0 0.5rem !important; }

/* Case study: dark statement chapter, huge figures */
html body.ap-home #case-study { background: #0B0D12 !important; color: #F5F5F7 !important; }
html body.ap-home #case-study .case-study-card { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
html body.ap-home #case-study .case-study-card::before { display: none !important; }
html body.ap-home #case-study h2 { color: #F5F5F7 !important; font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.25rem) !important; letter-spacing: -0.045em !important; line-height: 1.04 !important; }
html body.ap-home #case-study p, html body.ap-home #case-study .stat-label { color: #A1A1A6 !important; }
html body.ap-home #case-study strong { color: #F5F5F7 !important; }
html body.ap-home #case-study .case-study-hero > div:last-child > div { background: #1C1C1E !important; border: 0 !important; border-radius: var(--radius-xl) !important; padding: 2.5rem !important; }
html body.ap-home #case-study .metric-cards-row { margin-top: clamp(3rem, 6vw, 5rem) !important; gap: 1.25rem !important; }
html body.ap-home #case-study .stat-box { background: #1C1C1E !important; border: 0 !important; border-radius: var(--radius-xl) !important; padding: 2.5rem 2rem !important; text-align: left !important; }
html body.ap-home #case-study .stat-number { color: #F5F5F7 !important; font-family: var(--font-sans) !important; font-size: clamp(3rem, 2rem + 3vw, 4.75rem) !important; font-weight: 300 !important; letter-spacing: -0.05em !important; line-height: 1 !important; }
html body.ap-home #case-study .stat-label { font-size: 1.0625rem !important; margin-top: 0.75rem !important; text-transform: none !important; letter-spacing: -0.01em !important; }

/* Calculator */
html body.ap-home #calculator-section { background: #FFFFFF !important; }
html body.ap-home .calculator-container { background: var(--bg-main) !important; border: 0 !important; border-radius: var(--radius-xl) !important; padding: clamp(2rem, 4vw, 4rem) !important; box-shadow: none !important; }
html body.ap-home .calc-results-col { background: #FFFFFF !important; border: 0 !important; border-radius: var(--radius-lg) !important; box-shadow: var(--ap-shadow-md) !important; }
html body.ap-home .result-big-number { font-family: var(--font-sans) !important; font-weight: 300 !important; letter-spacing: -0.05em !important; font-size: clamp(3rem, 2rem + 3vw, 4.5rem) !important; }

/* Video */
html body.ap-home #video-demo { background: var(--bg-main) !important; }
html body.ap-home .video-showcase-wrap { border-radius: var(--radius-xl) !important; overflow: hidden !important; box-shadow: var(--ap-shadow-lg) !important; border: 0 !important; }

/* Why RedOwl & stakeholders */
html body.ap-home #side-effects { background: var(--bg-main) !important; padding: clamp(6rem, 11vw, 10rem) 0 !important; }
html body.ap-home #stakeholders { background: #FFFFFF !important; }

/* Closing CTA: centred */
html body.ap-home .cta-banner-section { padding: clamp(6rem, 11vw, 10rem) 0 !important; background: var(--bg-main) !important; }
html body.ap-home .cta-banner-box { flex-direction: column !important; text-align: center !important; align-items: center !important; gap: 2rem !important; display: flex !important; }
html body.ap-home .cta-banner-box h2 { font-size: clamp(2.6rem, 1.4rem + 4vw, 5rem) !important; letter-spacing: -0.05em !important; line-height: 1.02 !important; }
html body.ap-home .cta-banner-box p { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem) !important; color: var(--text-muted) !important; max-width: 36rem !important; margin: 1rem auto 0 !important; }
html body.ap-home .cta-buttons-side { flex-direction: row !important; justify-content: center !important; flex-wrap: wrap !important; gap: 0.9rem !important; display: flex !important; }

@media (max-width: 768px) {
  html body.ap-home .hero-section { min-height: auto !important; }
  html body.ap-home .cta-buttons-side { flex-direction: column !important; width: 100% !important; }
}
html body.ap-home .cta-banner-section { background: #0B0D12 !important; }
html body.ap-home .cta-banner-box h2 { color: #F5F5F7 !important; }
html body.ap-home .cta-banner-box p { color: #A1A1A6 !important; }
html body.ap-home .cta-banner-box .btn-primary { background: var(--brand-crimson) !important; color: #FFFFFF !important; border: 0 !important; }
html body.ap-home .cta-banner-box .btn-secondary { background: transparent !important; color: #F5F5F7 !important; border: 1px solid rgba(255,255,255,.35) !important; }
html body.ap-home .pillar-icon-wrap { display: flex !important; margin-bottom: 0 !important; }
html body.ap-home .pillar-card { display: flex !important; flex-direction: column !important; align-items: flex-start !important; }
html body.ap-home .pillar-card .pillar-link { margin-top: auto !important; padding-top: 1rem; }
html body.ap-home #case-study .section-chip { background: none !important; border: 0 !important; padding: 0 !important; }
/* Case-study figures always on one line (figure + label = two lines) */
html body.ap-home #case-study .stat-box { container-type: inline-size; min-width: 0; }
html body.ap-home #case-study .stat-number { white-space: nowrap !important; font-size: min(clamp(3rem, 2rem + 3vw, 4.75rem), 19cqi) !important; }
html body.ap-home .process-steps-row { position: relative; z-index: 2; }
html body.ap-home #case-study .case-study-card { background: transparent !important; background-image: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 0 !important; outline: 0 !important; }
html body.ap-home #case-study .case-study-card::after { display: none !important; }

/* Why RedOwl: white section, grey cards, clear text spacing; stakeholders grey */
html body.ap-home #side-effects { background: #FFFFFF !important; }
html body.ap-home #side-effects .pillar-card { background: var(--bg-main) !important; }
html body.ap-home #side-effects .pillar-card h3 { line-height: 1.15 !important; margin: 1.5rem 0 1rem !important; }
html body.ap-home #side-effects .pillar-card > p { margin: 0 !important; line-height: 1.55 !important; }
html body.ap-home #side-effects .section-header p { margin-top: 1.25rem !important; }
html body.ap-home #stakeholders { background: var(--bg-main) !important; }
html body.ap-home #side-effects { padding: clamp(3rem, 5.5vw, 5rem) 0 !important; }

/* Pillar cards: icon sits beside the heading */
html body.ap-home #pillars .pillar-card { display: grid !important; grid-template-columns: auto 1fr !important; column-gap: 1rem !important; align-items: center !important; grid-template-rows: auto auto 1fr auto !important; }
html body.ap-home #pillars .pillar-card > * { grid-column: 1 / -1; }
html body.ap-home #pillars .pillar-card > .pillar-icon-wrap { grid-column: 1 !important; margin: 0 !important; }
html body.ap-home #pillars .pillar-card > h3 { grid-column: 2 !important; margin: 0 !important; text-align: left !important; }
html body.ap-home #pillars .pillar-card > .pillar-tagline { margin-top: 1.25rem !important; }
html body.ap-home #pillars .pillar-card > .pillar-link { align-self: end !important; justify-self: start !important; }
html body.ap-home #pillars .pillar-card > .pillar-desc { align-self: start !important; }

/* The RedOwl Model — Apple layer for the moving graphic and phases */
html body.ap-home #redowl-model .section-header h2 { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem) !important; letter-spacing: -0.04em !important; line-height: 1.05 !important; }
html body.ap-home #mg-hero.mg { border: 0 !important; border-radius: 28px !important; background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important; box-shadow: 0 30px 60px -20px rgba(15,23,42,.18), 0 2px 6px rgba(15,23,42,.05) !important; --mg-void-bg: #FFFFFF; }
html body.ap-home #mg-hero .mg-void { fill: #FFFFFF !important; }
html body.ap-home #mg-hero .mg-anchor-txt { background: rgba(255,255,255,.8) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 10px !important; padding: 2px 6px 3px 4px !important; }
html body.ap-home #mg-hero .mg-frag, html body.ap-home #mg-hero .mg-out { border-radius: 14px !important; box-shadow: 0 8px 24px -8px rgba(15,23,42,.16), 0 1px 2px rgba(15,23,42,.05) !important; -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); }
html body.ap-home #mg-hero .mg-frag { transition: background-color .6s var(--ap-spring, ease), border-color .45s ease, transform .5s var(--ap-spring, ease) !important; }
html body.ap-home #mg-hero .mg-trace { stroke-linecap: round; }
html body.ap-home #redowl-model .process-steps-row { gap: 1.25rem !important; position: relative; z-index: 1; }
html body.ap-home #redowl-model .process-step-item { background: #FFFFFF !important; border: 0 !important; border-radius: 22px !important; padding: clamp(1.75rem, 2.5vw, 2.25rem) !important; box-shadow: 0 12px 32px -12px rgba(15,23,42,.14), 0 1px 3px rgba(15,23,42,.05) !important; transition: transform .4s var(--ap-spring, ease), box-shadow .4s ease !important; }
html body.ap-home #redowl-model .process-step-item:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -14px rgba(15,23,42,.2) !important; }
html body.ap-home #redowl-model .step-badge { display: inline-block; border-radius: 999px !important; background: rgba(255,0,0,.08) !important; color: #FF0000 !important; border: 0 !important; padding: .35rem .8rem !important; font-size: .75rem !important; font-weight: 600 !important; letter-spacing: .02em !important; }
html body.ap-home #redowl-model .process-step-item h4 { font-size: 1.35rem !important; letter-spacing: -0.025em !important; margin: 1rem 0 .5rem !important; }
html body.ap-home #redowl-model .process-step-item p { color: var(--text-muted) !important; line-height: 1.55 !important; }
@media (prefers-reduced-motion: reduce) { html body.ap-home #redowl-model .process-step-item:hover { transform: none; } }
html body.ap-home #mg-hero.mg { margin-bottom: 1.5rem !important; }
html body.ap-home #mg-hero .mg-frag { border-color: rgba(15,23,42,.12) !important; }

/* Hero: mascot + text/buttons in one centred two-column box */
html body.ap-home .hero-section .hero-header-wrap { display: grid !important; grid-template-columns: auto auto !important; align-items: center !important; justify-content: center !important; column-gap: max(2rem, 3vw) !important; width: fit-content !important; max-width: 100% !important; margin: 0 auto 2.5rem !important; padding: 0 1.5rem !important; text-align: left !important; }
html body.ap-home .hero-section .hero-title-group { text-align: left !important; margin: 0 !important; max-width: 44rem !important; }
html body.ap-home .hero-section .hero-cta-row { justify-content: flex-start !important; }
@media (max-width: 768px) { html body.ap-home .hero-section .hero-header-wrap { grid-template-columns: 1fr !important; justify-items: center !important; text-align: center !important; } html body.ap-home .hero-section .hero-title-group { text-align: center !important; } html body.ap-home .hero-section .hero-cta-row { justify-content: center !important; } }