:root {
    --etp-blue: #0758c9;
    --etp-dark: #1d1d1d;
    --etp-soft: #eef8ff;
    --etp-red: #ff4b4b;
}

.etp-about-hero,
.etp-about-section {
    --etp-animation-distance: 34px;
    --etp-animation-duration: 750ms;
    --etp-animation-delay: 0ms;
    --etp-hover-lift: 8px;
    --etp-hover-duration: 350ms;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    font-family: inherit;
}

.etp-about-hero *,
.etp-about-section * {
    box-sizing: border-box;
}

.etp-about-shell {
    width: min(calc(100% - 40px), 1180px);
    max-width: 1180px;
    margin-inline: auto;
}

/* Entrance animation system. Content remains visible if JavaScript is blocked. */
.etp-js [data-etp-animate="true"] {
    opacity: 0;
    transition:
        opacity var(--etp-animation-duration) cubic-bezier(.2,.75,.25,1) var(--etp-animation-delay),
        transform var(--etp-animation-duration) cubic-bezier(.2,.75,.25,1) var(--etp-animation-delay),
        filter var(--etp-animation-duration) ease var(--etp-animation-delay);
    will-change: opacity, transform;
}

.etp-js [data-etp-animate="true"][data-etp-animation="fade-up"] { transform: translate3d(0, var(--etp-animation-distance), 0); }
.etp-js [data-etp-animate="true"][data-etp-animation="fade-down"] { transform: translate3d(0, calc(var(--etp-animation-distance) * -1), 0); }
.etp-js [data-etp-animate="true"][data-etp-animation="fade-left"] { transform: translate3d(calc(var(--etp-animation-distance) * -1), 0, 0); }
.etp-js [data-etp-animate="true"][data-etp-animation="fade-right"] { transform: translate3d(var(--etp-animation-distance), 0, 0); }
.etp-js [data-etp-animate="true"][data-etp-animation="zoom-in"] { transform: scale(.94); filter: blur(3px); }
.etp-js [data-etp-animate="true"][data-etp-animation="soft-pop"] { transform: translate3d(0, 18px, 0) scale(.97); filter: saturate(.85); }

.etp-js [data-etp-animate="true"] .etp-animate-item {
    opacity: 0;
    transition:
        opacity var(--etp-animation-duration) cubic-bezier(.2,.75,.25,1) var(--etp-item-delay, 0ms),
        transform var(--etp-animation-duration) cubic-bezier(.2,.75,.25,1) var(--etp-item-delay, 0ms),
        filter var(--etp-animation-duration) ease var(--etp-item-delay, 0ms);
    transform: translate3d(0, calc(var(--etp-animation-distance) * .55), 0);
    filter: blur(2px);
    will-change: opacity, transform;
}

.etp-js [data-etp-animate="true"].etp-is-visible,
.etp-js [data-etp-animate="true"].etp-is-visible .etp-animate-item {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: none;
}

/* Modern hover motion. Disabled automatically for touch/reduced-motion users. */
@media (hover: hover) and (pointer: fine) {
    [data-etp-hover="yes"] .etp-step__card,
    [data-etp-hover="yes"] .etp-value,
    [data-etp-hover="yes"] .etp-quote,
    [data-etp-hover="yes"] .etp-cta,
    [data-etp-hover="yes"] .etp-polaroid {
        transition:
            transform var(--etp-hover-duration) cubic-bezier(.2,.75,.25,1),
            box-shadow var(--etp-hover-duration) ease,
            border-color var(--etp-hover-duration) ease;
    }

    [data-etp-hover="yes"] .etp-step__card:hover,
    [data-etp-hover="yes"] .etp-value:hover,
    [data-etp-hover="yes"] .etp-quote:hover,
    [data-etp-hover="yes"] .etp-cta:hover {
        transform: translateY(calc(var(--etp-hover-lift) * -1));
    }

    [data-etp-hover="yes"] .etp-step:hover .etp-step__icon,
    [data-etp-hover="yes"] .etp-value:hover .etp-value__icon {
        transform: translateY(-4px) scale(1.06);
    }

    [data-etp-hover="yes"] .etp-polaroid:hover img,
    [data-etp-hover="yes"] .etp-quote:hover {
        filter: saturate(1.05);
    }
}

/* Hero */
.etp-about-hero {
    position: relative;
    overflow: clip;
    display: flex;
    align-items: center;
    min-height: 650px;
    background: linear-gradient(180deg, #e9f7ff 0%, #f8fdff 64%, #eef9ff 100%);
}

.etp-about-hero::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 42%;
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(170,225,248,.42));
    clip-path: polygon(0 28%, 18% 34%, 39% 21%, 63% 34%, 83% 20%, 100% 26%, 100% 100%, 0 100%);
}

.etp-hero__wave {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 12%, rgba(255,255,255,.92), transparent 35%),
        linear-gradient(135deg, rgba(255,255,255,.55), transparent 45%);
    pointer-events: none;
}

.etp-hero__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 44%) minmax(0, 56%);
    align-items: center;
    gap: 70px;
    min-width: 0;
    padding: 80px 0;
}

.etp-hero__content,
.etp-hero__visual { min-width: 0; }
.etp-hero__content { position: relative; z-index: 5; }
.etp-hero__visual { position: relative; min-height: 510px; }

.etp-hero__eyebrow {
    display: inline-block;
    margin-bottom: 2px;
    font-size: clamp(38px, 4vw, 54px);
    line-height: 1;
    font-family: "Brush Script MT", "Segoe Script", cursive;
    transform: rotate(-3deg);
}

.etp-hero__title {
    margin: 0 0 22px;
    font-size: clamp(48px, 5.2vw, 68px);
    line-height: .93;
    letter-spacing: -2px;
    overflow-wrap: anywhere;
    font-weight: 900;
    font-family: Impact, "Arial Black", sans-serif;
}

.etp-hero__title-accent { font-size: 1.22em; }
.etp-hero__description { max-width: 560px; margin: 0 0 28px; font-size: 18px; line-height: 1.65; }

.etp-hero__button,
.etp-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    max-width: 100%;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-weight: 800;
    border-radius: 999px;
    padding: 16px 25px;
    box-shadow: 0 12px 28px rgba(7,88,201,.25);
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
}

.etp-hero__button:hover,
.etp-cta__button:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(7,88,201,.32);
}

.etp-polaroid {
    position: absolute;
    margin: 0;
    overflow: visible;
    background: #fff;
    padding: 13px 13px 32px;
    border: 1px solid rgba(0,0,0,.05);
    box-shadow: 0 18px 35px rgba(31,66,91,.25);
}

.etp-polaroid img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter .35s ease, scale .35s ease;
}

.etp-polaroid--owners { width: 47%; height: 330px; left: 8%; top: 15px; transform: rotate(1.8deg); z-index: 2; }
.etp-polaroid--bikes { width: 72%; height: 320px; right: 0; bottom: 5px; transform: rotate(4deg); z-index: 3; }

.etp-tape {
    position: absolute;
    width: 88px;
    height: 27px;
    top: -15px;
    left: 50%;
    z-index: 4;
    background: rgba(232,199,145,.78);
    transform: translateX(-50%) rotate(-1deg);
}

.etp-hero__route {
    position: absolute;
    z-index: 1;
    opacity: .8;
    border-top: 3px dashed var(--etp-blue);
}
.etp-hero__route--top { width: 190px; right: -45px; top: 145px; transform: rotate(-24deg); border-radius: 50%; }
.etp-hero__route--bottom { width: 260px; left: -120px; bottom: 35px; transform: rotate(16deg); border-radius: 50%; }

/* Shared sections */
.etp-about-section { position: relative; overflow: clip; padding: 75px 0; background: #fff; }
.etp-about-section--compact { padding: 38px 0; }
.etp-about-section--last { padding-bottom: 80px; }

/* Journey */
.etp-journey { background: linear-gradient(180deg, #fff 0%, #fbfdff 100%); }
.etp-journey::before,
.etp-journey::after {
    content: "";
    position: absolute;
    bottom: -20px;
    width: 190px;
    height: 340px;
    opacity: .4;
    background:
        radial-gradient(ellipse at center, rgba(7,88,201,.08) 0 18%, transparent 19%),
        linear-gradient(90deg, transparent 48%, rgba(7,88,201,.06) 49% 51%, transparent 52%);
}
.etp-journey::before { left: -85px; }
.etp-journey::after { right: -85px; transform: scaleX(-1); }

.etp-journey__head { max-width: 900px; margin: 0 auto 58px; text-align: center; }
.etp-journey__eyebrow { margin-bottom: 10px; font-size: 15px; font-weight: 900; letter-spacing: 2px; }
.etp-journey__title { margin: 0 0 18px; font-size: clamp(32px, 4vw, 44px); line-height: 1.15; font-weight: 900; }
.etp-journey__description { margin: 0; font-size: 17px; line-height: 1.75; }

.etp-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    min-width: 0;
}
.etp-steps::before { content: ""; position: absolute; top: 55px; left: 12.5%; right: 12.5%; z-index: 0; border-top: 2px dashed var(--etp-blue); }
.etp-step { position: relative; z-index: 1; min-width: 0; text-align: center; }

.etp-step__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 108px;
    margin: 0 auto 14px;
    font-size: 38px;
    color: var(--etp-blue);
    background: #fff;
    border: 2px solid var(--etp-blue);
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(7,88,201,.08);
    transition: transform .3s ease, box-shadow .3s ease;
}
.etp-step__icon svg { width: 42px; height: 42px; fill: currentColor; }
.etp-step__dot { position: relative; z-index: 2; display: block; width: 12px; height: 12px; margin: 0 auto -6px; background: #fff; border: 3px solid var(--etp-blue); border-radius: 50%; }
.etp-step__card { width: 100%; min-height: 230px; padding: 30px 22px 25px; background: #fff; border: 1px solid #e6edf5; border-radius: 12px; box-shadow: 0 10px 25px rgba(18,50,78,.08); }
.etp-step__title { margin: 0 0 14px; font-size: 17px; font-weight: 900; overflow-wrap: anywhere; }
.etp-step__text { margin: 0; font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }

/* Quote */
.etp-quote {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 420px;
    overflow: hidden;
    background-position: center;
    background-size: cover;
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(20,63,96,.15);
}
.etp-quote__overlay { position: absolute; inset: 0; pointer-events: none; }
.etp-quote__content { position: relative; z-index: 2; width: 42%; min-width: 0; padding: 46px 55px; }
.etp-quote__mark { font-size: clamp(80px, 9vw, 110px); line-height: .6; font-family: Georgia, serif; font-weight: 700; }
.etp-quote__text { font-size: clamp(34px, 4vw, 45px); line-height: 1.12; overflow-wrap: anywhere; font-family: "Brush Script MT", "Segoe Script", cursive; }
.etp-quote__heart { margin-top: 8px; font-size: clamp(38px, 5vw, 55px); line-height: 1; }

/* Values */
.etp-values { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 26px; min-width: 0; }
.etp-value { display: flex; align-items: flex-start; gap: 16px; min-width: 0; padding: 0; border-radius: 14px; }
.etp-value__copy { flex: 1; min-width: 0; }
.etp-value__icon {
    flex: 0 0 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    font-size: 25px;
    color: var(--etp-blue);
    background: #eef6ff;
    border: 1.5px solid var(--etp-blue);
    border-radius: 50%;
    transition: transform .3s ease, box-shadow .3s ease;
}
.etp-value__icon svg { width: 25px; height: 25px; fill: currentColor; }
.etp-value__title { margin: 3px 0 7px; font-size: 14px; line-height: 1.3; font-weight: 900; overflow-wrap: anywhere; }
.etp-value__text { margin: 0; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }

/* CTA */
.etp-cta {
    display: grid;
    grid-template-columns: 120px minmax(0,1fr) auto;
    align-items: center;
    gap: 28px;
    min-width: 0;
    padding: 28px 34px;
    background: #f6fbff;
    border: 1.5px dashed var(--etp-blue);
    border-radius: 18px;
}
.etp-cta__icon { display: flex; align-items: center; justify-content: center; width: 90px; height: 90px; font-size: 64px; text-align: center; }
.etp-cta__icon svg { width: 70px; height: 70px; fill: currentColor; }
.etp-cta__copy { min-width: 0; }
.etp-cta__title { margin: 0 0 6px; font-size: 25px; font-weight: 900; overflow-wrap: anywhere; }
.etp-cta__text { margin: 0; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.etp-cta__button { white-space: nowrap; padding: 16px 28px; }

/* Large laptop */
@media (max-width: 1200px) {
    .etp-about-shell { width: min(calc(100% - 48px), 1120px); }
    .etp-hero__grid { gap: 44px; }
    .etp-polaroid--owners { width: 54%; }
    .etp-polaroid--bikes { width: 78%; }
    .etp-values { gap: 20px; }
}

/* Tablet landscape */
@media (max-width: 1024px) {
    .etp-about-hero,
    .etp-about-section { --etp-animation-distance: 26px; --etp-hover-lift: 6px; }
    .etp-about-shell { width: min(calc(100% - 40px), 960px); }
    .etp-hero__grid { grid-template-columns: minmax(0, 46%) minmax(0, 54%); gap: 30px; }
    .etp-hero__visual { min-height: 470px; }
    .etp-polaroid--owners { width: 60%; height: 300px; left: 1%; }
    .etp-polaroid--bikes { width: 86%; height: 285px; }
    .etp-steps { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 34px 24px; }
    .etp-steps::before { display: none; }
    .etp-values { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .etp-quote__content { width: 58%; }
    .etp-cta { grid-template-columns: 90px minmax(0,1fr) auto; gap: 20px; }
}

/* Tablet portrait: stack the hero to avoid cramped images/text. */
@media (max-width: 900px) {
    .etp-about-hero { min-height: auto; }
    .etp-hero__grid { grid-template-columns: 1fr !important; gap: 26px; padding-block: 64px 48px; }
    .etp-hero__content { max-width: 680px; margin-inline: auto; text-align: center; }
    .etp-hero__description { margin-inline: auto; }
    .etp-hero__visual { width: min(100%, 720px); min-height: 500px; margin-inline: auto; }
    .etp-polaroid--owners { width: 48%; height: 315px; left: 6%; }
    .etp-polaroid--bikes { width: 70%; height: 300px; right: 3%; }
    .etp-quote__content { width: 68%; }
    .etp-cta { grid-template-columns: 80px minmax(0,1fr); }
    .etp-cta__button { grid-column: 1 / -1; justify-self: center; }
}

/* Mobile */
@media (max-width: 767px) {
    .etp-about-hero,
    .etp-about-section { --etp-animation-distance: 18px; --etp-hover-lift: 0px; }
    .etp-about-shell { width: min(calc(100% - 28px), 680px); }
    .etp-hero__grid { padding: 54px 0 36px; }
    .etp-hero__eyebrow { font-size: clamp(36px, 12vw, 44px); }
    .etp-hero__title { font-size: clamp(42px, 13vw, 54px); letter-spacing: -1px; }
    .etp-hero__description { font-size: 16px; line-height: 1.65; }
    .etp-hero__button,
    .etp-cta__button { white-space: normal; min-height: 48px; }
    .etp-hero__visual { min-height: 430px; }
    .etp-polaroid--owners { width: 58%; height: 260px; left: 1%; top: 8px; }
    .etp-polaroid--bikes { width: 80%; height: 245px; right: 0; bottom: 0; }
    .etp-hero__route--top { right: -90px; }
    .etp-hero__route--bottom { left: -160px; }

    .etp-about-section { padding: 54px 0; }
    .etp-about-section--compact { padding: 28px 0; }
    .etp-about-section--last { padding-bottom: 54px; }
    .etp-journey__head { margin-bottom: 38px; }
    .etp-journey__title { font-size: clamp(30px, 9vw, 38px); }
    .etp-journey__description { font-size: 15px; }
    .etp-steps { grid-template-columns: 1fr !important; gap: 30px; }
    .etp-step__card { min-height: 0; }

    .etp-quote { min-height: 370px; background-position: 64% center; }
    .etp-quote__content { width: 78%; padding: 35px 26px; }
    .etp-quote__text { font-size: clamp(32px, 10vw, 40px); }

    .etp-values { grid-template-columns: 1fr !important; gap: 22px; }
    .etp-value { width: 100%; }

    .etp-cta { grid-template-columns: 1fr !important; gap: 18px; padding: 28px 22px; text-align: center; }
    .etp-cta__icon { margin-inline: auto; }
    .etp-cta__button { grid-column: auto; justify-self: center; width: min(100%, 320px); }
}

/* Small phones */
@media (max-width: 480px) {
    .etp-about-shell { width: min(calc(100% - 22px), 460px); }
    .etp-hero__grid { padding-top: 46px; }
    .etp-hero__title { font-size: clamp(38px, 12vw, 48px); }
    .etp-hero__visual { min-height: 360px; }
    .etp-polaroid { padding: 8px 8px 22px; }
    .etp-polaroid--owners { width: 62%; height: 215px; left: 0; }
    .etp-polaroid--bikes { width: 86%; height: 205px; right: 0; }
    .etp-tape { width: 64px; height: 20px; top: -11px; }
    .etp-journey__eyebrow { letter-spacing: 1.5px; }
    .etp-step__icon { width: 92px; height: 92px; }
    .etp-step__icon svg { width: 36px; height: 36px; }
    .etp-step__card { padding: 26px 18px 22px; }
    .etp-quote { min-height: 330px; background-position: 68% center; }
    .etp-quote__content { width: 88%; padding: 28px 20px; }
    .etp-value { gap: 13px; }
    .etp-value__icon { flex-basis: 52px; width: 52px; height: 52px; }
    .etp-cta { padding-inline: 18px; }
}

/* Very narrow phones */
@media (max-width: 360px) {
    .etp-about-shell { width: calc(100% - 18px); }
    .etp-hero__title { font-size: 36px; }
    .etp-hero__visual { min-height: 320px; }
    .etp-polaroid--owners { height: 190px; }
    .etp-polaroid--bikes { height: 180px; }
    .etp-quote__content { width: 100%; }
    .etp-value { align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
    .etp-js [data-etp-animate="true"],
    .etp-js [data-etp-animate="true"] .etp-animate-item,
    [data-etp-hover="yes"] * {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
        animation: none !important;
    }
}

/* Preserve interactive transforms after reveal animation completes. */
@media (hover: hover) and (pointer: fine) {
    .etp-js [data-etp-animate="true"].etp-is-visible[data-etp-hover="yes"] .etp-value.etp-animate-item:hover,
    .etp-js [data-etp-animate="true"].etp-is-visible[data-etp-hover="yes"] .etp-cta:hover,
    .etp-js [data-etp-animate="true"].etp-is-visible[data-etp-hover="yes"] .etp-quote:hover {
        transform: translateY(calc(var(--etp-hover-lift) * -1));
    }
}

@media (prefers-reduced-motion: reduce) {
    .etp-js [data-etp-animate="true"],
    .etp-js [data-etp-animate="true"] .etp-animate-item,
    .etp-js [data-etp-animate="true"].etp-is-visible[data-etp-hover="yes"] .etp-value.etp-animate-item:hover,
    .etp-js [data-etp-animate="true"].etp-is-visible[data-etp-hover="yes"] .etp-cta:hover,
    .etp-js [data-etp-animate="true"].etp-is-visible[data-etp-hover="yes"] .etp-quote:hover {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
        animation: none !important;
    }
}