/* ============================================================================
   Swiss Regenerative Klinik — widgets.css
   Brand colours copied verbatim from the Lovable source. Single font: Inter.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. BOX SIZING
   -------------------------------------------------------------------------- */
[class^="srk-"], [class*=" srk-"],
[class^="srk-"] *, [class*=" srk-"] *,
[class^="srk-"] *::before, [class*=" srk-"] *::before,
[class^="srk-"] *::after,  [class*=" srk-"] *::after { box-sizing: border-box; }

/* ----------------------------------------------------------------------------
   2. SECTION-LEVEL CLIP — no element may blow out the viewport
   -------------------------------------------------------------------------- */
.srk-section, .srk-hero, .srk-tech, .srk-conditions, .srk-journey,
.srk-programs, .srk-how, .srk-pricing, .srk-consultation, .srk-footer {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

/* Outer guard: clip at the Elementor widget wrapper too, so transformed/rotated
   children (tech cards), the 3D journey carousel, and the blurred blobs/orbs can
   never push the page wider than the viewport. Scoped to our widgets only — the
   theme's body and any sticky theme header are left untouched. */
[class*="elementor-widget-srk-"] {
    max-width: 100%;
    overflow-x: clip;
}

/* ----------------------------------------------------------------------------
   3. GRID CHILDREN shrink below intrinsic width
   -------------------------------------------------------------------------- */
[class^="srk-"][class*="-grid"] > *,
[class^="srk-"][class*="-row"]  > * { min-width: 0; max-width: 100%; }

/* ----------------------------------------------------------------------------
   4. MEDIA never overflow
   -------------------------------------------------------------------------- */
[class^="srk-"] img, [class*=" srk-"] img,
[class^="srk-"] video, [class*=" srk-"] video,
[class^="srk-"] svg, [class*=" srk-"] svg { max-width: 100%; }
[class^="srk-"] img, [class*=" srk-"] img,
[class^="srk-"] video, [class*=" srk-"] video { height: auto; }

/* ----------------------------------------------------------------------------
   6. LONG STRINGS wrap
   -------------------------------------------------------------------------- */
[class^="srk-"] p, [class^="srk-"] a, [class^="srk-"] span,
[class^="srk-"] li, [class^="srk-"] [class*="email"],
[class^="srk-"] [class*="phone"] { overflow-wrap: anywhere; word-break: break-word; }

/* ============================================================================
   DESIGN TOKENS — exact hex from Lovable
   ========================================================================== */
:root {
    --srk-brand:        #113c56;  /* primary deep teal-navy   */
    --srk-brand-2:      #1e5d80;  /* lighter teal (hover)     */
    --srk-brand-accent: #2a7fa8;  /* light blue accent        */
    --srk-brand-mid:    #16486a;  /* conditions card mid stop */
    --srk-brand-mid2:   #185178;  /* consultation mid stop    */
    --srk-brand-dark:   #0a2a3d;  /* dark sections / footer   */
    --srk-brand-darker: #06192a;  /* hero base                */
    --srk-brand-soft:   #eaf1f6;  /* soft tint                */
    --srk-bg-soft:      #f6f9fc;
    --srk-bg-soft-2:    #f0f5f8;
    --srk-bg-slate:     #e2e8f0;
    --srk-sky:          #7dd3fc;
    --srk-sky-2:        #7ec5e8;

    --srk-text:    #0f172a;  /* slate-900 */
    --srk-text-2:  #334155;  /* slate-700 */
    --srk-muted:   #475569;  /* slate-600 */
    --srk-muted-2: #64748b;  /* slate-500 */

    --srk-font:         "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --srk-font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    --srk-radius:     1rem;
    --srk-radius-lg:  1.5rem;
    --srk-radius-xl:  2rem;

    /* Brand gradients — copied verbatim, tokenised for reuse */
    --srk-grad-icon:   linear-gradient(to bottom right, #113c56, #2a7fa8);
    --srk-grad-card:   linear-gradient(to bottom right, #113c56, #16486a, #0a2a3d);
    --srk-grad-banner: linear-gradient(to bottom right, #113c56, #185178, #2a7fa8);
}

/* Arabic (WPML) — switch body font to Cairo */
html[lang^="ar"] [class^="srk-"],
html[lang^="ar"] [class*=" srk-"],
body.rtl [class^="srk-"],
body.rtl [class*=" srk-"] {
    --srk-font:         "Cairo", "Tajawal", system-ui, sans-serif;
    --srk-font-display: "Cairo", "Tajawal", system-ui, sans-serif;
}

/* ============================================================================
   RTL / ARABIC DIRECTION (WPML)
   Source design is LTR English. When WPML switches to an RTL language it sets
   html[lang^="ar"] / body.rtl. We (1) flip each section root to rtl, (2) re-assert
   centered headings with enough specificity to beat the theme's RTL stylesheet,
   (3) flip the few intentionally left-aligned blocks to right, (4) loosen Arabic
   heading line-height + hero title/subtitle gap (Cairo runs tight).
   ========================================================================== */
html[lang^="ar"] .srk-hero,         body.rtl .srk-hero,
html[lang^="ar"] .srk-tech,         body.rtl .srk-tech,
html[lang^="ar"] .srk-conditions,   body.rtl .srk-conditions,
html[lang^="ar"] .srk-journey,      body.rtl .srk-journey,
html[lang^="ar"] .srk-programs,     body.rtl .srk-programs,
html[lang^="ar"] .srk-how,          body.rtl .srk-how,
html[lang^="ar"] .srk-pricing,      body.rtl .srk-pricing,
html[lang^="ar"] .srk-consultation, body.rtl .srk-consultation,
html[lang^="ar"] .srk-footer,       body.rtl .srk-footer {
    direction: rtl;
    text-align: right;
}

/* Re-assert centered headers / ledes / centered wrappers (override theme RTL) */
html[lang^="ar"] [class^="srk-"] h2,    body.rtl [class^="srk-"] h2,
html[lang^="ar"] .srk-eyebrow,          body.rtl .srk-eyebrow,
html[lang^="ar"] .srk-hero-inner,       body.rtl .srk-hero-inner,
html[lang^="ar"] .srk-tech-inner,       body.rtl .srk-tech-inner,
html[lang^="ar"] .srk-tech-lede,        body.rtl .srk-tech-lede,
html[lang^="ar"] .srk-conditions-lede,  body.rtl .srk-conditions-lede,
html[lang^="ar"] .srk-journey-lede,     body.rtl .srk-journey-lede,
html[lang^="ar"] .srk-how-lede,         body.rtl .srk-how-lede,
html[lang^="ar"] .srk-programs h2,      body.rtl .srk-programs h2,
html[lang^="ar"] .srk-cond-body,        body.rtl .srk-cond-body,
html[lang^="ar"] .srk-program,          body.rtl .srk-program,
html[lang^="ar"] .srk-how-step,         body.rtl .srk-how-step {
    text-align: center;
}

/* Flip the intentionally left-aligned content blocks to right in RTL */
html[lang^="ar"] .srk-tech-card,  body.rtl .srk-tech-card,
html[lang^="ar"] .srk-journey-cap,body.rtl .srk-journey-cap,
html[lang^="ar"] .srk-how-card,   body.rtl .srk-how-card,
html[lang^="ar"] .srk-footer-about,    body.rtl .srk-footer-about,
html[lang^="ar"] .srk-footer-links,    body.rtl .srk-footer-links,
html[lang^="ar"] .srk-footer-contact-col, body.rtl .srk-footer-contact-col {
    text-align: right;
}
@media (min-width: 768px) {
    html[lang^="ar"] .srk-consultation-row, body.rtl .srk-consultation-row { text-align: right; }
}

/* Arabic headings + hero spacing: Cairo metrics run tight → add breathing room */
html[lang^="ar"] [class^="srk-"] h1, body.rtl [class^="srk-"] h1,
html[lang^="ar"] [class^="srk-"] h2, body.rtl [class^="srk-"] h2,
html[lang^="ar"] [class^="srk-"] h3, body.rtl [class^="srk-"] h3 { line-height: 1.45; }
html[lang^="ar"] .srk-hero-title, body.rtl .srk-hero-title { line-height: 1.35; }
html[lang^="ar"] .srk-hero-sub,   body.rtl .srk-hero-sub   { margin-top: 2.25rem; }

/* ============================================================================
   TYPOGRAPHY BASELINE
   ========================================================================== */
[class^="srk-"], [class*=" srk-"] { font-family: var(--srk-font); }
[class^="srk-"] h1, [class^="srk-"] h2, [class^="srk-"] h3,
[class^="srk-"] h4, [class^="srk-"] h5, [class^="srk-"] h6 {
    font-family: var(--srk-font-display);
    line-height: 1.15;
    margin: 0;
}
[class^="srk-"] p { line-height: 1.65; margin: 0; }
body.rtl [class^="srk-"] p, html[lang^="ar"] [class^="srk-"] p { line-height: 1.85; }

/* ============================================================================
   UNIVERSAL ICON CONTAINER (covers built-in SVG and Elementor picker <i>/<svg>)
   ========================================================================== */
[class^="srk-"][class*="-icon"], [class*=" srk-"][class*="-icon"] {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; line-height: 1;
}
[class^="srk-"][class*="-icon"] svg, [class*=" srk-"][class*="-icon"] svg {
    width: 100%; height: 100%; display: block; color: inherit;
    fill: none; stroke: currentColor;
}
[class^="srk-"][class*="-icon"] i, [class*=" srk-"][class*="-icon"] i {
    font-size: 1.5rem; color: inherit; line-height: 1;
}

/* ============================================================================
   BUTTON SYSTEM — theme-proof (white pill + brand pill, matching Lovable CTAs)
   ========================================================================== */
.srk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: var(--srk-font); font-weight: 700; font-size: 1rem; line-height: 1.2;
    padding: .85rem 2rem; border-radius: 9999px; border: 2px solid transparent;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: transform .3s cubic-bezier(.4,0,.2,1), background-color .3s ease, box-shadow .3s ease;
}
/* Brand-filled pill */
a.srk-btn.srk-btn-primary, a.srk-btn.srk-btn-primary:link, a.srk-btn.srk-btn-primary:visited,
button.srk-btn.srk-btn-primary, .srk-btn.srk-btn-primary[class] {
    background: var(--srk-brand) !important; background-color: var(--srk-brand) !important;
    background-image: none !important; color: #fff !important;
    border-color: var(--srk-brand) !important;
    box-shadow: 0 10px 25px -10px rgba(17,60,86,.5);
    text-decoration: none !important;
}
a.srk-btn.srk-btn-primary:hover, a.srk-btn.srk-btn-primary:focus,
button.srk-btn.srk-btn-primary:hover, .srk-btn.srk-btn-primary[class]:hover {
    background: var(--srk-brand-2) !important; background-color: var(--srk-brand-2) !important;
    color: #fff !important;
}
.srk-btn.srk-btn-primary *, .srk-btn.srk-btn-primary span { color: #fff !important; }
/* White pill (on dark backgrounds) */
a.srk-btn.srk-btn-white, a.srk-btn.srk-btn-white:link, a.srk-btn.srk-btn-white:visited,
.srk-btn.srk-btn-white[class] {
    background: #fff !important; color: var(--srk-brand) !important;
    border-color: #fff !important; box-shadow: 0 12px 30px -12px rgba(0,0,0,.4);
    text-decoration: none !important;
}
a.srk-btn.srk-btn-white:hover, .srk-btn.srk-btn-white[class]:hover {
    background: var(--srk-brand-soft) !important; color: var(--srk-brand) !important;
}
.srk-btn.srk-btn-white *, .srk-btn.srk-btn-white span { color: var(--srk-brand) !important; }
.srk-btn-lift:hover { transform: scale(1.03); }

/* Shared section heading helpers */
.srk-eyebrow {
    display: inline-block; border-radius: 9999px; padding: .375rem 1rem;
    font-size: .8125rem; font-weight: 600; letter-spacing: .02em;
}
.srk-h2 { font-size: 1.75rem; font-weight: 800; color: var(--srk-brand); }
.srk-lede { font-size: 1rem; color: var(--srk-muted); }
@media (min-width: 768px) {
    .srk-h2   { font-size: 2.25rem; }
    .srk-lede { font-size: 1.125rem; }
}

/* Section headers/ledes are ALWAYS centered in every language. These elements
   inherit centering from their wrapper, but some themes set a direct text-align
   on h2/p which kills the inheritance — so we assert it on the elements directly.
   !important is intentional here: a deliberate, narrowly-scoped theme-override. */
.srk-h2,
.srk-eyebrow,
.srk-lede,
.srk-tech-eyebrow,
.srk-tech-h2,
.srk-tech-lede,
.srk-conditions-lede,
.srk-journey-lede,
.srk-how-lede { text-align: center !important; }

/* ============================================================================
   REVEAL-ON-SCROLL (+ Elementor editor / reduced-motion overrides)
   ========================================================================== */
.srk-reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s ease-out, transform .8s ease-out; }
.srk-reveal.srk-revealed { opacity: 1; transform: translateY(0); }
.srk-reveal-scale { opacity: 0; transform: translateY(28px) scale(.96); transition: opacity .8s ease-out, transform .8s ease-out; }
.srk-reveal-scale.srk-revealed { opacity: 1; transform: translateY(0) scale(1); }

.elementor-editor-active .srk-reveal, .elementor-editor-active .srk-reveal-scale,
body.elementor-editor-preview .srk-reveal, body.elementor-editor-preview .srk-reveal-scale {
    opacity: 1 !important; transform: none !important; transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
    .srk-reveal, .srk-reveal-scale,
    .srk-hero-anim-1, .srk-hero-anim-2, .srk-hero-anim-3, .srk-hero-anim-4 {
        opacity: 1 !important; transform: none !important; animation: none !important;
    }
}

/* ============================================================================
   HERO — dark video/image background, animated gradient text, float
   ========================================================================== */
.srk-hero {
    position: relative; isolation: isolate; overflow: hidden;
    background-color: var(--srk-brand-darker);
    background-size: cover; background-position: center;
    color: #fff;
}
.srk-hero-video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: .7; z-index: -2;
}
.srk-hero-overlay-1 {
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to bottom, rgba(6,25,42,.70), rgba(10,42,61,.55), rgba(6,25,42,.90));
}
.srk-hero-overlay-2 {
    position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(6,25,42,.65) 75%);
}
.srk-hero-inner {
    position: relative; margin: 0 auto; max-width: 72rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 6rem 1.5rem; min-height: 88vh; min-height: 88svh;
}
.srk-hero-badge {
    margin-bottom: 1.25rem; display: inline-block; border-radius: 9999px;
    border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.10);
    padding: .375rem 1rem; font-size: .75rem; font-weight: 600; letter-spacing: .02em;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.srk-hero-title {
    max-width: 56rem; font-size: 2.25rem; font-weight: 800; line-height: 1.15;
}
.srk-hero-title-grad {
    background: linear-gradient(110deg, #ffffff 0%, #7ec5e8 25%, #ffffff 50%, #2a7fa8 75%, #ffffff 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: srkHeroGradientShift 8s ease-in-out infinite;
}
.srk-hero-sub { margin-top: 1.5rem; max-width: 42rem; font-size: 1rem; color: rgba(255,255,255,.85); }
.srk-hero-cta-row { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
@media (min-width: 768px) {
    .srk-hero-badge { font-size: .875rem; }
    .srk-hero-title { font-size: 3.75rem; }
    .srk-hero-sub   { font-size: 1.125rem; }
}
@media (min-width: 1024px) { .srk-hero-title { font-size: 4.5rem; } }

/* Hero fade-up + float + gradient shift (verbatim from Lovable) */
@keyframes srkHeroFadeUp {
    0%   { opacity: 0; transform: translateY(22px); filter: blur(6px); }
    100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes srkHeroGradientShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes srkHeroFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.srk-hero-anim-1 { animation: srkHeroFadeUp .9s ease-out both; }
.srk-hero-anim-2 { animation: srkHeroFadeUp 1s ease-out .25s both; }
.srk-hero-anim-3 { animation: srkHeroFadeUp 1s ease-out .5s both; }
.srk-hero-anim-4 { animation: srkHeroFadeUp 1s ease-out .75s both; }
.srk-hero-float  { animation: srkHeroFloat 6s ease-in-out infinite; }

/* ============================================================================
   TECH — 3 rotated cards, gradient icon boxes, rise-in
   ========================================================================== */
.srk-tech { position: relative; background: var(--srk-bg-soft); padding: 5rem 0; }
@media (min-width: 768px) { .srk-tech { padding: 7rem 0; } }
.srk-tech-blob-1 { position: absolute; top: -6rem; right: 0; height: 18rem; width: 18rem;
    border-radius: 9999px; background: rgba(17,60,86,.05); filter: blur(64px); pointer-events: none; }
.srk-tech-blob-2 { position: absolute; bottom: -8rem; left: 0; height: 20rem; width: 20rem;
    border-radius: 9999px; background: rgba(42,127,168,.10); filter: blur(64px); pointer-events: none; }
.srk-tech-inner { position: relative; margin: 0 auto; max-width: 72rem; padding: 0 1.5rem; text-align: center; }
.srk-tech-eyebrow { border: 1px solid rgba(17,60,86,.2); background: #fff; color: var(--srk-brand); }
.srk-tech-h2 { margin: 1.25rem auto 0; max-width: 48rem; }
.srk-tech-lede { margin: 1rem auto 0; max-width: 42rem; }
.srk-tech-grid { margin-top: 4rem; display: grid; gap: 2rem; }
@media (min-width: 768px) { .srk-tech-grid { grid-template-columns: repeat(3, 1fr); } }
.srk-tech-card {
    position: relative; border-radius: 2rem; border: 2px solid rgba(17,60,86,.15);
    background: #fff; padding: 1.75rem; text-align: left;
    box-shadow: 0 10px 30px -15px rgba(17,60,86,.25);
    transition: transform .4s ease, border-color .3s ease, box-shadow .3s ease;
    animation: srkTechRise .8s ease-out both;
}
.srk-tech-card:hover {
    transform: translateY(-6px) rotate(0deg) !important;
    border-color: rgba(17,60,86,.4);
    box-shadow: 0 20px 50px -15px rgba(17,60,86,.35);
}
/* per-card initial rotation/offset from Lovable */
.srk-tech-card.is-1 { transform: rotate(-2deg); }
.srk-tech-card.is-2 { transform: rotate(1deg); }
.srk-tech-card.is-3 { transform: rotate(-1deg); }
@media (min-width: 768px) {
    .srk-tech-card.is-1 { transform: rotate(-2deg) translateY(-1rem); }
    .srk-tech-card.is-2 { transform: rotate(1deg)  translateY(1.5rem); }
    .srk-tech-card.is-3 { transform: rotate(-1deg) translateY(-.5rem); }
}
.srk-tech-accent {
    position: absolute; top: -1px; left: 2rem; height: .375rem; width: 4rem;
    border-radius: 0 0 9999px 9999px; background: linear-gradient(to right, #113c56, #2a7fa8);
}
.srk-tech-card-icon {
    margin-bottom: 1.25rem; width: 3.5rem; height: 3.5rem; border-radius: 1rem;
    background: var(--srk-grad-icon); color: #fff;
    box-shadow: 0 10px 20px -8px rgba(17,60,86,.25); padding: .875rem;
    transition: transform .3s ease;
}
.srk-tech-card:hover .srk-tech-card-icon { transform: scale(1.1) rotate(6deg); }
.srk-tech-card h3 { margin-bottom: .75rem; font-size: 1.25rem; font-weight: 700; color: var(--srk-brand); }
.srk-tech-card p  { font-size: .9375rem; line-height: 1.7; color: var(--srk-muted); }
@keyframes srkTechRise { 0% { opacity: 0; transform: translateY(28px) scale(.96); } 100% { opacity: 1; } }

/* ============================================================================
   CONDITIONS — 10 gradient cards, 3D tilt on hover, staggered reveal
   ========================================================================== */
.srk-conditions { background: #fff; padding: 5rem 0; }
@media (min-width: 768px) { .srk-conditions { padding: 7rem 0; } }
.srk-conditions-inner { margin: 0 auto; max-width: 80rem; padding: 0 1.5rem; }
.srk-conditions h2 { margin-bottom: .75rem; text-align: center; }
.srk-conditions-lede { margin: 0 auto 3rem; max-width: 42rem; text-align: center; color: var(--srk-muted); }
.srk-conditions-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
@media (min-width: 640px)  { .srk-conditions-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 768px)  { .srk-conditions-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.5rem; } }
@media (min-width: 1024px) { .srk-conditions-grid { grid-template-columns: repeat(5, minmax(0,1fr)); } }
.srk-cond-card {
    position: relative; overflow: hidden; border-radius: 1rem; padding: 1.25rem; color: #fff;
    background: var(--srk-grad-card);
    box-shadow: 0 10px 25px -10px rgba(17,60,86,.2);
    transition: box-shadow .3s ease, transform .15s ease-out;
    transform-style: preserve-3d; will-change: transform;
}
.srk-cond-card:hover { box-shadow: 0 25px 50px -12px rgba(17,60,86,.4); }
.srk-cond-spot {
    pointer-events: none; position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease;
}
.srk-cond-card:hover .srk-cond-spot { opacity: 1; }
.srk-cond-body { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.srk-cond-card-icon {
    margin-bottom: .75rem; width: 3.5rem; height: 3.5rem; border-radius: 1rem; padding: .875rem;
    background: rgba(255,255,255,.15); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
    backdrop-filter: blur(4px); color: #fff;
}
.srk-cond-card p { font-size: .875rem; font-weight: 600; line-height: 1.35; }
.srk-cond-bar {
    position: absolute; inset-inline: 0; bottom: 0; height: 4px; opacity: 0; transition: opacity .3s ease;
    background: linear-gradient(to left, #1e5d80, rgba(255,255,255,.6), #1e5d80);
}
.srk-cond-card:hover .srk-cond-bar { opacity: 1; }
.srk-conditions-cta { margin-top: 3rem; text-align: center; }

/* ============================================================================
   JOURNEY — 3D cover-flow carousel
   ========================================================================== */
.srk-journey { background: linear-gradient(to bottom, #fff, #f0f5f8); padding: 5rem 0; }
@media (min-width: 768px) { .srk-journey { padding: 7rem 0; } }
.srk-journey-inner { margin: 0 auto; max-width: 80rem; padding: 0 1rem; }
.srk-journey h2 { margin-bottom: .75rem; text-align: center; }
.srk-journey-lede { margin: 0 auto 2.5rem; max-width: 42rem; text-align: center; color: var(--srk-muted); }
.srk-journey-stage {
    position: relative; margin: 0 auto; display: flex; align-items: center; justify-content: center;
    overflow: hidden; perspective: 1100px;
}
.srk-journey-card {
    position: absolute; overflow: hidden; border-radius: 1.5rem; background: #fff;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,.4); box-shadow: inset 0 0 0 1px rgba(0,0,0,.05), 0 25px 50px -12px rgba(0,0,0,.4);
    transform-style: preserve-3d; cursor: pointer; border: 0; padding: 0;
    transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .4s ease;
    will-change: transform;
}
.srk-journey-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.srk-journey-cap {
    position: absolute; inset-inline: 0; bottom: 0; padding: 1.25rem; text-align: left; color: #fff;
    background: linear-gradient(to top, rgba(10,42,61,.95), rgba(10,42,61,.6), transparent);
}
.srk-journey-cap h3 { font-size: 1rem; font-weight: 700; }
@media (min-width: 768px) { .srk-journey-cap h3 { font-size: 1.125rem; } }
.srk-journey-cap p { margin-top: .375rem; font-size: .8125rem; line-height: 1.6; color: rgba(255,255,255,.85); }
.srk-journey-card:not(.is-active) .srk-journey-cap p { display: none; }
.srk-journey-controls { margin-top: 1.5rem; display: flex; align-items: center; justify-content: center; gap: .75rem; }
.srk-journey-arrow {
    border: 0; cursor: pointer; border-radius: 9999px; background: var(--srk-brand); color: #fff;
    padding: .5rem 1rem; font-size: 1.25rem; line-height: 1; transition: background-color .3s ease;
}
.srk-journey-arrow:hover { background: var(--srk-brand-2); }
.srk-journey-dots { display: flex; align-items: center; gap: .5rem; }
.srk-journey-dot { height: .5rem; width: .5rem; border: 0; cursor: pointer; border-radius: 9999px;
    background: rgba(17,60,86,.3); transition: width .3s ease, background-color .3s ease; padding: 0; }
.srk-journey-dot.is-active { width: 1.5rem; background: var(--srk-brand); }

/* ============================================================================
   PROGRAMS — 5 circular icon tiles
   ========================================================================== */
.srk-programs { background: #fff; padding: 5rem 0; }
@media (min-width: 768px) { .srk-programs { padding: 7rem 0; } }
.srk-programs-inner { margin: 0 auto; max-width: 72rem; padding: 0 1.5rem; }
.srk-programs h2 { margin-bottom: 3rem; text-align: center; }
.srk-programs-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.5rem; }
@media (min-width: 640px) { .srk-programs-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 768px) { .srk-programs-grid { grid-template-columns: repeat(5, minmax(0,1fr)); } }
.srk-program {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    border-radius: 1rem; padding: 1rem; transition: background-color .3s ease;
}
.srk-program:hover { background: var(--srk-brand-soft); }
.srk-program-icon {
    margin-bottom: .75rem; width: 4rem; height: 4rem; border-radius: 9999px; padding: 1rem;
    background: var(--srk-brand); color: #fff; box-shadow: 0 8px 16px -6px rgba(17,60,86,.3);
    transition: transform .3s ease;
}
.srk-program:hover .srk-program-icon { transform: scale(1.1); }
.srk-program p { font-size: .8125rem; font-weight: 600; line-height: 1.35; color: var(--srk-brand); }
@media (min-width: 768px) { .srk-program p { font-size: .875rem; } }
.srk-programs-cta { margin-top: 3rem; text-align: center; }

/* ============================================================================
   HOW — 5-step timeline with dotted connector + arrows
   ========================================================================== */
.srk-how { position: relative; isolation: isolate; background: var(--srk-bg-slate); padding: 5rem 0; }
@media (min-width: 768px) { .srk-how { padding: 7rem 0; } }
.srk-how-inner { margin: 0 auto; max-width: 80rem; padding: 0 1.5rem; }
.srk-how h2 { margin-bottom: .75rem; text-align: center; }
.srk-how-lede { margin: 0 auto 3.5rem; max-width: 42rem; text-align: center; color: var(--srk-muted); }
.srk-how-track { position: relative; }
.srk-how-line {
    position: absolute; left: 2rem; right: 2rem; top: 2.25rem; display: none;
    border-top: 2px dashed rgba(17,60,86,.3);
}
@media (min-width: 768px) { .srk-how-line { display: block; } }
.srk-how-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
@media (min-width: 768px) { .srk-how-grid { grid-template-columns: repeat(5, minmax(0,1fr)); } }
.srk-how-step { position: relative; display: flex; flex-direction: column; align-items: center; }
.srk-how-step-icon {
    position: relative; z-index: 1; margin-bottom: .75rem;
    width: 3.5rem; height: 3.5rem; border-radius: 9999px; padding: .875rem;
    background: #fff; box-shadow: 0 10px 20px -8px rgba(17,60,86,.2), 0 0 0 4px #fff;
    color: var(--srk-brand);
}
@media (min-width: 640px) { .srk-how-step-icon { width: 4.5rem; height: 4.5rem; margin-bottom: 1rem; padding: 1.125rem; } }
.srk-how-card {
    position: relative; width: 100%; border-radius: 1rem; border: 1px solid rgba(17,60,86,.1);
    background: #fff; padding: 1rem; text-align: left; box-shadow: 0 10px 20px -10px rgba(17,60,86,.1);
    transition: transform .3s ease;
}
@media (min-width: 640px) { .srk-how-card { padding: 1.25rem; } }
.srk-how-card:hover { transform: translateY(-4px); }
.srk-how-opt { margin-bottom: .375rem; font-size: .625rem; font-weight: 700; color: var(--srk-brand-2); }
@media (min-width: 640px) { .srk-how-opt { font-size: .75rem; } }
.srk-how-card h3 { margin-bottom: .375rem; font-size: .8125rem; font-weight: 800; color: var(--srk-brand); }
@media (min-width: 768px) { .srk-how-card h3 { font-size: 1rem; } }
.srk-how-card p { font-size: .6875rem; line-height: 1.6; color: var(--srk-muted); }
@media (min-width: 640px) { .srk-how-card p { font-size: .8125rem; } }
.srk-how-arrow {
    position: absolute; right: -.75rem; top: 44%; transform: translateY(-50%);
    display: none; height: 1.75rem; width: 1.75rem; align-items: center; justify-content: center;
    border-radius: 9999px; background: #fff; color: var(--srk-brand); box-shadow: 0 4px 10px rgba(0,0,0,.12);
}
@media (min-width: 768px) { .srk-how-arrow { display: flex; } }
.srk-how-cta { margin-top: 3rem; text-align: center; }

/* ============================================================================
   PRICING — 2 cards over background image
   ========================================================================== */
.srk-pricing { position: relative; isolation: isolate; overflow: hidden; padding: 5rem 0; }
@media (min-width: 768px) { .srk-pricing { padding: 7rem 0; } }
.srk-pricing-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.srk-pricing-overlay { position: absolute; inset: 0; z-index: -1; background: rgba(10,42,61,.9); }
.srk-pricing-inner { margin: 0 auto; max-width: 72rem; padding: 0 1.5rem; }
.srk-pricing h2 { margin-bottom: 3rem; text-align: center; color: #fff; }
.srk-pricing-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 1.5rem; }
@media (min-width: 768px) { .srk-pricing-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.srk-price-card { position: relative; overflow: hidden; border-radius: 1.5rem; padding: 2rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.4); }
.srk-price-card.is-gold { background: #fff; }
.srk-price-card.is-silver { border: 1px solid rgba(255,255,255,.15); background: rgba(10,42,61,.7); color: #fff;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.srk-price-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.srk-price-card.is-gold h3 { font-size: 1.25rem; font-weight: 800; color: var(--srk-brand); }
.srk-price-card.is-silver h3 { font-size: 1.25rem; font-weight: 800; color: #fff; }
.srk-price-card.is-gold .srk-price-tag { font-size: .875rem; color: var(--srk-muted-2); margin-top: .25rem; }
.srk-price-card.is-silver .srk-price-tag { font-size: .875rem; color: rgba(255,255,255,.7); margin-top: .25rem; }
.srk-price-badge { flex-shrink: 0; border-radius: 9999px; padding: .25rem .75rem; font-size: .75rem; font-weight: 700; }
.srk-price-card.is-gold .srk-price-badge { background: var(--srk-brand-soft); color: var(--srk-brand); }
.srk-price-card.is-silver .srk-price-badge { background: rgba(255,255,255,.15); color: #fff; }
.srk-price-amount { display: flex; align-items: baseline; gap: .5rem; margin: 1.5rem 0; }
.srk-price-amount b { font-size: 2.25rem; font-weight: 800; }
.srk-price-card.is-gold .srk-price-amount b { color: var(--srk-brand); }
.srk-price-amount span { font-size: .875rem; }
.srk-price-card.is-gold .srk-price-amount span { color: var(--srk-muted-2); }
.srk-price-card.is-silver .srk-price-amount span { color: rgba(255,255,255,.7); }
.srk-price-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.srk-price-list li { display: flex; align-items: center; gap: .75rem; font-size: .875rem; }
.srk-price-card.is-gold .srk-price-list li { color: var(--srk-text-2); }
.srk-price-card.is-silver .srk-price-list li { color: rgba(255,255,255,.9); }
.srk-price-check { flex-shrink: 0; width: 1.25rem; height: 1.25rem; border-radius: 9999px; padding: .25rem; }
.srk-price-card.is-gold .srk-price-check { background: var(--srk-brand); color: #fff; }
.srk-price-card.is-silver .srk-price-check { background: #fff; color: var(--srk-brand); }
.srk-price-cta { display: block; width: 100%; border-radius: 9999px; padding: .75rem; text-align: center;
    font-size: 1rem; font-weight: 700; text-decoration: none; transition: background-color .3s ease; }
.srk-price-card.is-gold .srk-price-cta { background: var(--srk-brand); color: #fff !important; }
.srk-price-card.is-gold .srk-price-cta:hover { background: var(--srk-brand-2); }
.srk-price-card.is-silver .srk-price-cta { background: #fff; color: var(--srk-brand) !important; }
.srk-price-card.is-silver .srk-price-cta:hover { background: var(--srk-brand-soft); }

/* ============================================================================
   CONSULTATION — gradient CTA banner
   ========================================================================== */
.srk-consultation { background: var(--srk-bg-soft); padding: 4rem 0; }
@media (min-width: 768px) { .srk-consultation { padding: 6rem 0; } }
.srk-consultation-inner { margin: 0 auto; max-width: 72rem; padding: 0 1.5rem; }
.srk-consultation-card {
    position: relative; overflow: hidden; border-radius: 2rem; padding: 2rem;
    background: var(--srk-grad-banner); box-shadow: 0 20px 60px -20px rgba(17,60,86,.45);
}
@media (min-width: 768px)  { .srk-consultation-card { padding: 3rem; } }
@media (min-width: 1024px) { .srk-consultation-card { padding: 4rem; } }
.srk-consultation-bg { pointer-events: none; position: absolute; inset: 0; opacity: .1;
    background-size: cover; background-position: center; mix-blend-mode: overlay; }
.srk-consultation-orb { pointer-events: none; position: absolute; border-radius: 9999px;
    background: rgba(255,255,255,.1); filter: blur(64px); }
.srk-consultation-orb.is-1 { left: -5rem; top: -5rem; height: 16rem; width: 16rem; }
.srk-consultation-orb.is-2 { right: -6rem; bottom: -6rem; height: 18rem; width: 18rem; }
.srk-consultation-row { position: relative; z-index: 1; display: flex; flex-direction: column;
    align-items: center; gap: 2rem; text-align: center; }
@media (min-width: 768px) { .srk-consultation-row { flex-direction: row; justify-content: space-between; text-align: left; } }
.srk-consultation-text { flex: 1; }
.srk-consultation-text h2 { margin-bottom: 1rem; font-size: 1.5rem; font-weight: 800; line-height: 1.2; color: #fff; }
@media (min-width: 768px)  { .srk-consultation-text h2 { font-size: 1.875rem; } }
@media (min-width: 1024px) { .srk-consultation-text h2 { font-size: 2.25rem; } }
.srk-consultation-stats { margin-bottom: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
    justify-content: center; font-size: .875rem; font-weight: 600; color: rgba(255,255,255,.9); }
@media (min-width: 768px) { .srk-consultation-stats { justify-content: flex-start; font-size: 1rem; } }
.srk-consultation-stat { display: inline-flex; align-items: center; gap: .375rem; }
.srk-consultation-dot { height: .375rem; width: .375rem; border-radius: 9999px; background: var(--srk-sky); }
.srk-consultation-text p { max-width: 42rem; margin: 0 auto; font-size: .875rem; font-weight: 500; color: rgba(255,255,255,.85); }
@media (min-width: 768px) { .srk-consultation-text p { margin: 0; font-size: 1rem; } }
.srk-consultation-cta { flex-shrink: 0; }

/* ============================================================================
   FOOTER
   ========================================================================== */
.srk-footer { background: var(--srk-brand-dark); color: rgba(255,255,255,.85); padding: 3rem 0 0; }
.srk-footer-grid { margin: 0 auto; max-width: 72rem; padding: 0 1.5rem; display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .srk-footer-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.srk-footer h3 { margin-bottom: 1rem; font-size: 1.125rem; font-weight: 800; color: #fff; }
.srk-footer h4 { margin-bottom: 1rem; font-size: 1rem; font-weight: 700; color: #fff; }
.srk-footer-about p { font-size: .875rem; line-height: 1.7; color: rgba(255,255,255,.7); }
.srk-footer-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; font-size: .875rem; }
.srk-footer-nav a { color: rgba(255,255,255,.8); text-decoration: none; transition: color .2s ease; }
.srk-footer-nav a:hover { color: #fff; }
.srk-footer-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; font-size: .875rem; }
.srk-footer-contact li { display: flex; align-items: center; gap: .5rem; }
.srk-footer-contact-icon { width: 1rem; height: 1rem; color: var(--srk-brand-2); }
.srk-footer-bottom { margin: 2.5rem auto 0; max-width: 72rem; padding: 1.5rem; text-align: center;
    border-top: 1px solid rgba(255,255,255,.1); font-size: .75rem; color: rgba(255,255,255,.5); }
.srk-agency-link { color: rgba(255,255,255,.7); text-decoration: underline; }
.srk-agency-link:hover { color: #fff; }