:root {
    --ink: #080b0d;
    --paper: #ffffff;
    --navy: #153242;
    --navy-rgb: 21, 50, 66;
    --mist: #eef3f6;
    --cyan: #67c9ff;
    --line: rgba(21, 50, 66, 0.14);
    --muted: #65727a;
    --container: 1200px;
    --ease: cubic-bezier(.2, .8, .2, 1);
    --ease-soft: cubic-bezier(.22, 1, .36, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.container {
    width: min(calc(100% - 40px), var(--container));
    margin-inline: auto;
}

.section {
    position: relative;
    padding: clamp(76px, 9vw, 140px) 0;
}

.section--tight {
    padding-top: clamp(58px, 7vw, 94px);
    padding-bottom: clamp(74px, 8vw, 118px);
}

.eyebrow {
    margin: 0 0 16px;
    color: var(--navy);
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .30em;
    text-transform: uppercase;
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 12px;
    left: 12px;
    transform: translateY(-150%);
    padding: 10px 14px;
    background: var(--ink);
    color: var(--paper);
    text-decoration: none;
}

.skip-link:focus { transform: translateY(0); }

.site-header {
    position: sticky;
    z-index: 100;
    top: 0;
    background: rgba(255,255,255,.84);
    border-bottom: 1px solid rgba(21,50,66,.06);
    backdrop-filter: blur(18px);
}

.site-header__inner {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    color: var(--ink);
    font-size: clamp(1.7rem, 3vw, 2.45rem);
    font-weight: 340;
    letter-spacing: -.045em;
    text-decoration: none;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 20px;
    border: 1px solid var(--navy);
    text-decoration: none;
    font-size: .74rem;
    font-weight: 750;
    letter-spacing: .055em;
    text-transform: uppercase;
    transition: transform .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease);
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(21,50,66,.12);
}

.button--primary { color: #fff; background: var(--navy); }

.hero {
    min-height: calc(100svh - 80px);
    overflow: clip;
    padding-top: clamp(64px, 8vw, 110px);
}

.hero__ambient {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(18px);
}

.hero__ambient--one {
    width: 62vw;
    height: 62vw;
    max-width: 900px;
    max-height: 900px;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(65, 149, 203, .13), rgba(65,149,203,0) 62%);
}

.hero__ambient--two {
    width: 34vw;
    height: 34vw;
    max-width: 520px;
    max-height: 520px;
    right: -5%;
    top: 20%;
    background: radial-gradient(circle, rgba(21, 50, 66, .07), rgba(21,50,66,0) 65%);
}

.hero__content { text-align: center; }

.hero__title {
    max-width: 1020px;
    margin: 0 auto;
    font-size: clamp(3rem, 6.6vw, 7rem);
    line-height: .94;
    font-weight: 390;
    letter-spacing: -.058em;
}

.hero__title span {
    color: var(--navy);
    font-weight: 360;
}

.hero__lead {
    max-width: 720px;
    margin: 28px auto 0;
    color: var(--muted);
    font-size: clamp(1rem, 1.5vw, 1.16rem);
}

.reveal {
    opacity: 0;
    transform: translateY(16px);
    animation: revealIn .8s var(--ease-soft) forwards;
}

.reveal--delay-1 { animation-delay: .08s; }
.reveal--delay-2 { animation-delay: .16s; }
.reveal--delay-3 { animation-delay: .24s; }

.book-stage {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --parallax-x: 0px;
    --parallax-y: 0px;
    position: relative;
    width: min(100%, 1080px);
    height: clamp(560px, 61vw, 760px);
    margin: 26px auto 0;
    perspective: 1500px;
    transform: translate(var(--parallax-x), var(--parallax-y));
    transition: transform .18s linear;
}

.book-stage__grid {
    position: absolute;
    inset: 33% 3% 4%;
    background:
        linear-gradient(rgba(21,50,66,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(21,50,66,.035) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: radial-gradient(circle, #000 24%, transparent 75%);
    opacity: .75;
}

.book-stage__halo {
    position: absolute;
    inset: 26% 12% 5%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(84, 184, 239, .18), rgba(84,184,239,0) 70%);
    filter: blur(28px);
}

.digital-book {
    position: absolute;
    left: 50%;
    top: 62%;
    width: clamp(320px, 44vw, 560px);
    aspect-ratio: 1.34;
    transform:
        translate(-50%, -50%)
        rotateX(calc(59deg + var(--tilt-x)))
        rotateZ(calc(-2.5deg + var(--tilt-y)));
    transform-style: preserve-3d;
    transition: transform .42s var(--ease-soft);
    will-change: transform;
}

.digital-book__shadow {
    position: absolute;
    inset: 30% -6% -20%;
    transform: translateZ(-80px);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(7, 28, 40, .22), transparent 68%);
    filter: blur(18px);
}

.digital-book__page-stack {
    position: absolute;
    border: 1px solid rgba(85,155,196,.42);
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.55), rgba(116,188,228,.08));
    box-shadow: inset 0 0 28px rgba(120,201,245,.08);
}

.digital-book__page-stack--back {
    inset: 8% -4% -8%;
    transform: translateZ(-44px);
    opacity: .52;
}

.digital-book__page-stack--mid {
    inset: 4% -2% -4%;
    transform: translateZ(-20px);
    opacity: .72;
}

.digital-book__cover {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 1px solid rgba(104, 182, 226, .72);
    border-radius: 26px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.78), rgba(176,218,241,.12)),
        repeating-linear-gradient(90deg, rgba(25,74,105,.07) 0 1px, transparent 1px 28px),
        repeating-linear-gradient(0deg, rgba(25,74,105,.055) 0 1px, transparent 1px 28px);
    box-shadow:
        0 52px 88px rgba(9,33,47,.16),
        inset 0 0 90px rgba(111,200,255,.12),
        inset 0 0 0 1px rgba(255,255,255,.35);
    backdrop-filter: blur(18px);
}

.digital-book__scan {
    position: absolute;
    left: -10%;
    top: -10%;
    width: 120%;
    height: 14%;
    background: linear-gradient(180deg, transparent, rgba(103,201,255,.18), transparent);
    animation: scan 5.8s linear infinite;
}

.digital-book__reflection {
    position: absolute;
    width: 230px;
    height: 230px;
    left: var(--reflect-x, 42%);
    top: var(--reflect-y, 32%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.86), rgba(255,255,255,.14) 30%, transparent 68%);
    mix-blend-mode: screen;
    opacity: .52;
    filter: blur(3px);
}

.digital-book__frame {
    position: absolute;
    border: 1px solid rgba(72,156,207,.34);
    border-radius: 18px;
}

.digital-book__frame--outer { inset: 5%; }
.digital-book__frame--inner { inset: 11%; opacity: .55; }

.digital-book__mark,
.digital-book__submark {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(21,50,66,.9);
    text-align: center;
}

.digital-book__mark {
    top: 35%;
    font-size: clamp(1.55rem, 3vw, 2.85rem);
    font-weight: 480;
    letter-spacing: .16em;
}

.digital-book__submark {
    top: 53%;
    font-size: clamp(.46rem, .7vw, .68rem);
    letter-spacing: .32em;
}

.digital-book__circuit {
    position: absolute;
    width: 30%;
    height: 22%;
    top: 62%;
    opacity: .38;
}

.digital-book__circuit--left {
    left: 10%;
    border-top: 1px solid rgba(50,144,198,.52);
    border-right: 1px solid rgba(50,144,198,.32);
}

.digital-book__circuit--right {
    right: 10%;
    border-top: 1px solid rgba(50,144,198,.52);
    border-left: 1px solid rgba(50,144,198,.32);
}

.digital-book__core {
    position: absolute;
    left: 50%;
    bottom: 10%;
    width: 66px;
    height: 66px;
    transform: translateX(-50%);
    border-radius: 50%;
    border: 1px solid rgba(70,156,210,.6);
    background:
        radial-gradient(circle, #e7f8ff 0 6%, #7fd5ff 7% 10%, rgba(88,182,235,.18) 11% 36%, transparent 37%);
    box-shadow: 0 0 42px rgba(82,185,244,.55);
}

.digital-book__core span {
    position: absolute;
    inset: 10px;
    border: 1px dashed rgba(72,156,207,.52);
    border-radius: 50%;
    animation: spin 10s linear infinite;
}

.digital-book__spine {
    position: absolute;
    left: -3%;
    top: 7%;
    bottom: 2%;
    width: 8%;
    border: 1px solid rgba(84,153,195,.46);
    border-radius: 24px 8px 8px 24px;
    background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(32,88,121,.13));
    transform: translateZ(-10px);
}

.connectors {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.connectors path {
    fill: none;
    stroke: rgba(21,50,66,.12);
    stroke-width: 1.3;
    stroke-dasharray: 5 8;
    transition: stroke .3s var(--ease), stroke-width .3s var(--ease), filter .3s var(--ease);
}

.book-stage[data-active="tax"] [data-connector="tax"],
.book-stage[data-active="bookkeeping"] [data-connector="bookkeeping"],
.book-stage[data-active="erp"] [data-connector="erp"],
.book-stage[data-active="automation"] [data-connector="automation"] {
    stroke: rgba(75,179,237,.95);
    stroke-width: 2.1;
    filter: url(#glow);
    animation: dashFlow 1.7s linear infinite;
}

.service-modules {
    position: absolute;
    inset: 0;
}

.service-module {
    --lift: 0px;
    position: absolute;
    width: clamp(150px, 17vw, 205px);
    min-height: 145px;
    padding: 20px;
    border: 1px solid rgba(21,50,66,.13);
    border-radius: 20px;
    color: var(--navy);
    background: linear-gradient(150deg, rgba(255,255,255,.84), rgba(225,241,249,.38));
    backdrop-filter: blur(17px);
    box-shadow:
        0 18px 54px rgba(18,53,73,.07),
        inset 0 0 0 1px rgba(255,255,255,.42);
    cursor: pointer;
    text-align: left;
    transform-style: preserve-3d;
    transition:
        transform .35s var(--ease-soft),
        opacity .3s var(--ease),
        border-color .3s var(--ease),
        box-shadow .3s var(--ease);
}

.service-module__glass {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.service-module__glass::after {
    content: "";
    position: absolute;
    width: 60%;
    height: 180%;
    top: -40%;
    left: -70%;
    transform: rotate(24deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
    transition: left .7s var(--ease-soft);
}

.service-module:hover .service-module__glass::after,
.service-module[aria-pressed="true"] .service-module__glass::after {
    left: 110%;
}

.service-module:nth-child(1) {
    left: 4%;
    top: 23%;
    transform: translateY(var(--lift)) translateZ(55px) rotateY(10deg) rotateZ(-5deg);
}

.service-module:nth-child(2) {
    left: 25%;
    top: 7%;
    transform: translateY(var(--lift)) translateZ(85px) rotateY(5deg) rotateZ(-1.5deg);
}

.service-module:nth-child(3) {
    right: 25%;
    top: 7%;
    transform: translateY(var(--lift)) translateZ(85px) rotateY(-5deg) rotateZ(1.5deg);
}

.service-module:nth-child(4) {
    right: 4%;
    top: 23%;
    transform: translateY(var(--lift)) translateZ(55px) rotateY(-10deg) rotateZ(5deg);
}

.service-module:hover,
.service-module[aria-pressed="true"] {
    --lift: -10px;
    border-color: rgba(79,181,238,.75);
    box-shadow: 0 24px 68px rgba(44,145,203,.18);
}

.book-stage[data-active="tax"] .service-module:not([data-service="tax"]),
.book-stage[data-active="bookkeeping"] .service-module:not([data-service="bookkeeping"]),
.book-stage[data-active="erp"] .service-module:not([data-service="erp"]),
.book-stage[data-active="automation"] .service-module:not([data-service="automation"]) {
    opacity: .38;
}

.service-module__index {
    display: block;
    margin-bottom: 18px;
    color: rgba(21,50,66,.46);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .18em;
}

.service-module__label {
    display: block;
    font-size: .95rem;
    font-weight: 820;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.service-module__mini {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: .66rem;
}

.service-module__signal {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(21,50,66,.24);
}

.service-module[aria-pressed="true"] .service-module__signal {
    background: var(--cyan);
    box-shadow: 0 0 14px rgba(103,201,255,.8);
}

.book-stage__status {
    position: absolute;
    left: 50%;
    bottom: 2.2%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: rgba(21,50,66,.62);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.book-stage__status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 12px rgba(103,201,255,.75);
}

.hero__hint {
    margin: -6px 0 0;
    color: var(--muted);
    font-size: .72rem;
    letter-spacing: .06em;
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 34px;
}

.section-heading__meta {
    margin: 0;
    color: var(--muted);
    font-size: .84rem;
}

.solution-panel {
    border-top: 1px solid var(--line);
    background:
        linear-gradient(180deg, rgba(238,243,246,.48), rgba(255,255,255,0));
}

.solution-detail {
    display: none;
    grid-template-columns: minmax(0,.82fr) minmax(0,1.6fr);
    gap: clamp(36px, 6vw, 92px);
    align-items: start;
    animation: solutionIn .38s var(--ease);
}

.solution-detail.is-active { display: grid; }

.solution-detail__intro {
    position: relative;
    padding-top: 16px;
}

.solution-detail__number {
    position: absolute;
    right: 0;
    top: 0;
    color: rgba(21,50,66,.1);
    font-size: clamp(4rem, 8vw, 8rem);
    line-height: 1;
    font-weight: 760;
}

.solution-detail h2,
.story-step h2,
.about h2 {
    margin: 0;
    font-weight: 410;
    letter-spacing: -.045em;
}

.solution-detail h2 {
    position: relative;
    font-size: clamp(2.8rem, 5vw, 5.5rem);
}

.solution-detail__eyebrow {
    color: var(--navy);
    font-weight: 660;
}

.solution-detail__intro > p:last-child {
    color: var(--muted);
}

.subservices {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}

.subservice-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 82px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    text-decoration: none;
    background: rgba(255,255,255,.86);
    transition: transform .24s var(--ease), border-color .24s var(--ease), box-shadow .24s var(--ease);
}

.subservice-card:hover {
    transform: translateY(-3px);
    border-color: rgba(21,50,66,.38);
    box-shadow: 0 12px 26px rgba(21,50,66,.06);
}

.subservice-card__arrow {
    transition: transform .24s var(--ease);
}

.subservice-card:hover .subservice-card__arrow {
    transform: translate(3px,-3px);
}

.story {
    overflow: clip;
}

.story__layout {
    display: grid;
    grid-template-columns: minmax(340px,.9fr) minmax(0,1.1fr);
    gap: clamp(44px, 8vw, 120px);
}

.story__sticky { align-self: stretch; }

.story-book {
    position: sticky;
    top: 120px;
    display: grid;
    place-items: center;
    min-height: 76vh;
}

.story-book__glow {
    position: absolute;
    width: 82%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(82,185,244,.14), transparent 66%);
    filter: blur(22px);
}

.story-book__surface {
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%,460px);
    aspect-ratio: 1.35;
    overflow: hidden;
    border: 1px solid rgba(101,174,214,.42);
    border-radius: 26px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.82), rgba(187,226,247,.18)),
        linear-gradient(rgba(21,50,66,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(21,50,66,.04) 1px, transparent 1px);
    background-size: auto, 30px 30px, 30px 30px;
    box-shadow: 0 36px 82px rgba(9,41,58,.11);
    transform: rotateX(58deg) rotateZ(-3deg);
    transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}

.story-book__surface span {
    font-size: clamp(1.7rem, 4vw, 3.4rem);
    letter-spacing: .12em;
}

.story-book__surface small {
    color: var(--navy);
    font-weight: 800;
    letter-spacing: .22em;
}

.story-book__flow {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.story-book__flow i {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 12px rgba(103,201,255,.8);
    animation: orbit 5s linear infinite;
}

.story-book__flow i:nth-child(1) { left: 22%; top: 28%; animation-delay: 0s; }
.story-book__flow i:nth-child(2) { right: 22%; top: 24%; animation-delay: -1.2s; }
.story-book__flow i:nth-child(3) { left: 30%; bottom: 22%; animation-delay: -2.4s; }
.story-book__flow i:nth-child(4) { right: 28%; bottom: 25%; animation-delay: -3.6s; }

.story-step {
    position: relative;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid var(--line);
}

.story-step__line {
    width: 42px;
    height: 1px;
    margin-bottom: 20px;
    background: var(--navy);
}

.story-step h2 {
    font-size: clamp(3rem, 6vw, 6.2rem);
}

.story-step p:not(.eyebrow) {
    max-width: 580px;
    color: var(--muted);
    font-size: 1.08rem;
}

.about {
    border-top: 1px solid var(--line);
}

.about__grid {
    display: grid;
    grid-template-columns: .65fr 1.35fr;
    gap: clamp(40px,7vw,110px);
}

.about__line {
    display: block;
    width: 42px;
    height: 1px;
    background: var(--navy);
}

.about h2 {
    max-width: 760px;
    font-size: clamp(2.5rem,5vw,5rem);
    line-height: 1;
}

.about p:not(.eyebrow) {
    max-width: 720px;
    color: var(--muted);
}

.site-footer {
    padding: 34px 0 28px;
    color: #fff;
    background: var(--navy);
}

.site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(24px,5vw,72px);
}

.site-footer__inner a {
    text-decoration: none;
    font-size: .74rem;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.site-footer__copyright {
    margin-top: 24px;
    text-align: center;
    opacity: .68;
    font-size: .7rem;
}

.prose-page { padding-block: 80px; }

@keyframes revealIn {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes solutionIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes dashFlow {
    to { stroke-dashoffset: -26; }
}

@keyframes scan {
    from { transform: translateY(-20%); }
    to { transform: translateY(760%); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes orbit {
    0%,100% { transform: translate3d(0,0,0); opacity: .35; }
    50% { transform: translate3d(10px,-14px,0); opacity: 1; }
}

@media (max-width: 820px) {
    .site-header__inner { min-height: 68px; }

    .button--header {
        min-height: 40px;
        padding-inline: 14px;
        font-size: .66rem;
    }

    .hero { min-height: auto; }

    .hero__title br { display: none; }

    .book-stage {
        height: 700px;
        transform: none !important;
    }

    .digital-book {
        top: 57%;
        width: min(82vw, 440px);
    }

    .service-module {
        width: calc(50% - 18px);
        min-height: 118px;
        padding: 14px;
    }

    .service-module:nth-child(1),
    .service-module:nth-child(2),
    .service-module:nth-child(3),
    .service-module:nth-child(4) {
        transform: none;
    }

    .service-module:nth-child(1) { left: 0; top: 3%; }
    .service-module:nth-child(2) { left: auto; right: 0; top: 3%; }
    .service-module:nth-child(3) { left: 0; top: auto; bottom: 2%; }
    .service-module:nth-child(4) { right: 0; top: auto; bottom: 2%; }

    .connectors { opacity: .42; }

    .book-stage__status { bottom: 14%; }

    .solution-detail,
    .about__grid,
    .story__layout {
        grid-template-columns: 1fr;
    }

    .story__sticky { display: none; }

    .story-step { min-height: 55vh; }

    .section-heading {
        align-items: start;
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    .container { width: min(calc(100% - 28px), var(--container)); }

    .brand { font-size: 1.55rem; }

    .hero__title { font-size: clamp(2.55rem,13vw,4rem); }

    .book-stage { height: 660px; }

    .service-module__mini { display: none; }

    .subservices { grid-template-columns: 1fr; }

    .site-footer__inner {
        gap: 18px;
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .digital-book,
    .story-book__surface {
        transform: none !important;
    }

    .book-stage { transform: none !important; }
}


/* ===== ONEBOOK v0.3: compact hero + in-viewport service drawer ===== */

@media (min-width: 821px) {
    .hero {
        min-height: auto;
        padding-top: clamp(44px, 5vw, 72px);
        padding-bottom: clamp(58px, 6vw, 88px);
    }

    .hero__title {
        max-width: 940px;
        font-size: clamp(2.8rem, 5.4vw, 5.8rem);
    }

    .hero__lead {
        margin-top: 20px;
    }

    .book-stage {
        height: clamp(470px, 48vw, 610px);
        margin-top: 10px;
    }

    .digital-book {
        top: 63%;
        width: clamp(300px, 39vw, 500px);
    }

    .service-module {
        width: clamp(142px, 15vw, 188px);
        min-height: 128px;
        padding: 16px;
    }

    .service-module:nth-child(1) { left: 6%; top: 24%; }
    .service-module:nth-child(2) { left: 27%; top: 8%; }
    .service-module:nth-child(3) { right: 27%; top: 8%; }
    .service-module:nth-child(4) { right: 6%; top: 24%; }

    .book-stage__status {
        bottom: 1%;
    }

    .hero__hint {
        margin-top: -2px;
    }
}

.service-drawer {
    width: min(100%, 1120px);
    margin: 22px auto 0;
    border: 1px solid rgba(21,50,66,.13);
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.92), rgba(232,244,250,.58));
    box-shadow:
        0 22px 60px rgba(21,50,66,.07),
        inset 0 0 0 1px rgba(255,255,255,.55);
    backdrop-filter: blur(18px);
    overflow: hidden;
}

.service-drawer__panel {
    display: none;
    grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr);
    gap: clamp(26px,4vw,56px);
    align-items: center;
    padding: clamp(22px,3vw,34px);
    animation: drawerIn .34s var(--ease-soft);
}

.service-drawer__panel.is-active {
    display: grid;
}

.service-drawer__copy {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: start;
}

.service-drawer__number {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(21,50,66,.18);
    border-radius: 13px;
    color: var(--navy);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.service-drawer__eyebrow {
    margin: 0 0 6px;
    color: var(--navy);
    font-size: .68rem;
    font-weight: 760;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.service-drawer__copy h2 {
    margin: 0;
    font-size: clamp(1.8rem,3vw,3rem);
    line-height: 1;
    font-weight: 430;
    letter-spacing: -.04em;
}

.service-drawer__copy p:last-child {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: .9rem;
}

.service-drawer__links {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
}

.service-drawer__chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid rgba(21,50,66,.12);
    border-radius: 13px;
    background: rgba(255,255,255,.68);
    text-decoration: none;
    font-size: .78rem;
    transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}

.service-drawer__chip:hover {
    transform: translateY(-2px);
    border-color: rgba(21,50,66,.35);
    background: rgba(255,255,255,.95);
}

@keyframes drawerIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 820px) {
    .service-drawer {
        margin-top: 18px;
    }

    .service-drawer__panel {
        grid-template-columns: 1fr;
    }

    .service-drawer__links {
        grid-template-columns: 1fr;
    }
}


/* ===== ONEBOOK v0.4: new logo, tighter hero, refined copy ===== */

.site-header__inner {
    min-height: 72px;
}

.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.brand img {
    display: block;
    width: auto;
    height: clamp(30px, 3.2vw, 42px);
}

.button--header {
    min-height: 42px;
    padding-inline: 18px;
    font-size: .68rem;
}

.hero {
    min-height: auto;
    padding-top: clamp(38px, 4vw, 56px);
    padding-bottom: clamp(56px, 6vw, 82px);
}

.hero__title {
    max-width: 860px;
    font-size: clamp(2.55rem, 4.9vw, 5.2rem);
    line-height: .95;
}

.hero__title span {
    display: inline-block;
}

.hero__lead,
.hero .eyebrow,
.hero__hint {
    display: none;
}

.book-stage {
    height: clamp(410px, 42vw, 520px);
    margin-top: 10px;
}

.digital-book {
    top: 62%;
    width: clamp(280px, 35vw, 460px);
}

.service-module {
    width: clamp(134px, 14vw, 170px);
    min-height: 112px;
    padding: 14px;
}

.service-module__label {
    font-size: .88rem;
}

.service-module__mini {
    margin-top: 7px;
    font-size: .61rem;
}

.service-module:nth-child(1) { left: 7%; top: 22%; }
.service-module:nth-child(2) { left: 28%; top: 6%; }
.service-module:nth-child(3) { right: 28%; top: 6%; }
.service-module:nth-child(4) { right: 7%; top: 22%; }

.book-stage__status {
    bottom: 2%;
}

.service-drawer {
    width: min(100%, 1040px);
    margin-top: 16px;
    border-radius: 18px;
}

.service-drawer__panel {
    gap: clamp(20px, 3vw, 40px);
    padding: clamp(18px, 2.2vw, 26px);
}

.service-drawer__copy h2 {
    font-size: clamp(1.55rem, 2.5vw, 2.4rem);
}

.service-drawer__copy p:last-child {
    font-size: .84rem;
    margin-top: 10px;
}

.service-drawer__links {
    gap: 8px;
}

.service-drawer__chip {
    min-height: 46px;
    padding: 10px 13px;
    font-size: .75rem;
}

.story {
    padding-top: clamp(58px, 6vw, 84px);
}

.about {
    padding-top: clamp(72px, 8vw, 120px);
}

.about__statement {
    max-width: 820px;
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.35rem, 2vw, 1.9rem);
    line-height: 1.45;
    letter-spacing: -.02em;
    font-weight: 380;
}

@media (max-height: 820px) and (min-width: 821px) {
    .hero {
        padding-top: 28px;
        padding-bottom: 52px;
    }

    .hero__title {
        font-size: clamp(2.35rem, 4.5vw, 4.6rem);
    }

    .book-stage {
        height: 390px;
    }

    .digital-book {
        width: clamp(260px, 31vw, 410px);
    }

    .service-module {
        width: 144px;
        min-height: 104px;
    }

    .service-drawer__panel {
        padding: 16px 20px;
    }
}

@media (max-width: 820px) {
    .site-header__inner {
        min-height: 64px;
    }

    .brand img {
        height: 28px;
    }

    .hero {
        padding-top: 26px;
        padding-bottom: 56px;
    }

    .hero__title {
        font-size: clamp(2.15rem, 10.5vw, 3.4rem);
        max-width: 92%;
    }

    .book-stage {
        height: 600px;
    }

    .service-module {
        width: calc(50% - 14px);
        min-height: 108px;
    }

    .about__statement {
        font-size: 1.18rem;
        line-height: 1.55;
    }
}


/* ===== ONEBOOK v0.5: tagline in header, visual-first hero, balanced about ===== */

.site-header__inner {
    min-height: 76px;
}

.brand-group {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.brand-divider {
    width: 1px;
    height: 28px;
    flex: 0 0 auto;
    background: rgba(21, 50, 66, .18);
}

.brand-tagline {
    margin: 0;
    color: rgba(21, 50, 66, .68);
    font-size: clamp(.68rem, .86vw, .82rem);
    font-weight: 520;
    letter-spacing: .035em;
    white-space: nowrap;
}

.hero {
    padding-top: clamp(22px, 2.5vw, 36px);
    padding-bottom: clamp(54px, 6vw, 82px);
}

.hero__content {
    text-align: center;
}

.hero__title {
    display: none !important;
}

.book-stage {
    height: clamp(430px, 44vw, 540px);
    margin-top: 0;
}

.digital-book {
    top: 61%;
}

.service-drawer {
    margin-top: 10px;
}

.about {
    padding-top: clamp(58px, 6vw, 90px);
    padding-bottom: clamp(58px, 6vw, 90px);
}

.about__grid {
    grid-template-columns: minmax(180px, .42fr) minmax(0, 1.58fr);
    gap: clamp(42px, 6vw, 82px);
    align-items: start;
}

.about .eyebrow {
    margin-bottom: 14px;
    font-size: clamp(.84rem, 1.05vw, 1rem);
    letter-spacing: .22em;
}

.about__line {
    width: 48px;
}

.about__statement {
    max-width: 900px;
    color: #4f5c64;
    font-size: clamp(1.45rem, 1.9vw, 2rem);
    line-height: 1.5;
    letter-spacing: -.022em;
    font-weight: 380;
}

.site-footer {
    padding-top: 28px;
}

.site-footer__inner {
    gap: clamp(28px, 4vw, 54px);
}

@media (max-height: 820px) and (min-width: 821px) {
    .site-header__inner {
        min-height: 70px;
    }

    .hero {
        padding-top: 12px;
    }

    .book-stage {
        height: 400px;
    }

    .service-drawer {
        margin-top: 6px;
    }
}

@media (max-width: 980px) {
    .brand-tagline {
        max-width: 310px;
        white-space: normal;
        line-height: 1.25;
    }
}

@media (max-width: 820px) {
    .site-header__inner {
        min-height: 64px;
    }

    .brand-group {
        gap: 10px;
    }

    .brand-divider,
    .brand-tagline {
        display: none;
    }

    .hero {
        padding-top: 12px;
    }

    .book-stage {
        height: 590px;
    }

    .about__grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .about__statement {
        font-size: 1.18rem;
        line-height: 1.6;
    }
}


/* ===== ONEBOOK v0.6: connector tuning, cleaner modules, mobile tagline visible ===== */

.digital-book__logo {
    position: absolute;
    top: 40%;
    left: 50%;
    width: clamp(170px, 18vw, 330px);
    transform: translate(-50%, -50%);
    opacity: .92;
    filter: saturate(.8) contrast(1.02);
    pointer-events: none;
}

.digital-book__mark {
    display: none !important;
}

.story-book__logo {
    display: block;
    width: clamp(140px, 18vw, 220px);
    max-width: 72%;
    margin: 0 auto 14px;
    opacity: .92;
}

.story-book__surface > span {
    display: none !important;
}

.service-module {
    min-height: 102px;
}

.service-module__label {
    margin-top: 2px;
}

.service-module__mini {
    margin-top: 8px;
}

.service-module__index,
.book-stage__status,
.service-drawer__number {
    display: none !important;
}

.service-drawer__copy {
    display: block;
}

.service-drawer__copy h2 {
    margin-top: 6px;
}

.service-drawer__copy p:last-child {
    margin-top: 10px;
}

.book-stage {
    height: clamp(420px, 43vw, 520px);
}

.service-module:nth-child(1) { left: 7%; top: 20%; }
.service-module:nth-child(2) { left: 26%; top: 4%; }
.service-module:nth-child(3) { right: 26%; top: 4%; }
.service-module:nth-child(4) { right: 7%; top: 18%; }

.about__statement {
    max-width: 760px;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.8;
    letter-spacing: 0;
    font-weight: 400;
}

.story-step p,
.about__statement {
    font-size: 1rem;
}

.brand-tagline {
    white-space: nowrap;
}

@media (max-width: 820px) {
    .site-header__inner {
        align-items: flex-start;
        gap: 12px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .brand-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .brand-divider {
        display: none;
    }

    .brand-tagline {
        display: block;
        max-width: 205px;
        white-space: normal;
        line-height: 1.25;
        font-size: .58rem;
        letter-spacing: .03em;
    }

    .button--header {
        min-height: 38px;
        padding-inline: 14px;
        font-size: .62rem;
    }

    .digital-book__logo {
        width: min(60vw, 240px);
    }

    .story-book__logo {
        width: min(52vw, 190px);
        margin-bottom: 10px;
    }
}

@media (max-height: 820px) and (min-width: 821px) {
    .book-stage {
        height: 390px;
    }

    .service-module:nth-child(1) { left: 8%; top: 18%; }
    .service-module:nth-child(2) { left: 28%; top: 2%; }
    .service-module:nth-child(3) { right: 28%; top: 2%; }
    .service-module:nth-child(4) { right: 8%; top: 16%; }
}


/* ===== ONEBOOK v0.7: connector tuning, cleaner book logo, mobile cleanup ===== */

.digital-book__submark {
    display: none !important;
}

.digital-book__logo {
    top: 42%;
    width: clamp(155px, 17vw, 300px);
}

.service-module {
    min-height: 114px;
    padding: 17px 18px 16px;
}

.service-module__label {
    font-size: .84rem;
    line-height: 1.08;
}

.service-module__mini {
    line-height: 1.28;
}

.service-module:nth-child(2),
.service-module:nth-child(3) {
    min-height: 122px;
}

.service-drawer {
    width: min(100%, 1010px);
}

@media (max-width: 820px) {
    .site-header__inner {
        align-items: flex-start;
    }

    .brand-tagline {
        max-width: 210px;
        font-size: .6rem;
        line-height: 1.22;
    }

    .book-stage {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        height: auto;
        min-height: 0;
        padding-top: 10px;
        padding-bottom: 8px;
    }

    .connectors {
        display: none !important;
    }

    .digital-book {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: min(82vw, 320px) !important;
        margin: 0 auto;
        transform: none !important;
        order: 1;
    }

    .digital-book__logo {
        width: min(54vw, 180px);
        top: 42%;
    }

    .service-modules {
        position: relative;
        order: 2;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: min(100%, 360px);
        margin: 0 auto;
    }

    .service-module {
        position: relative !important;
        inset: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        min-height: 82px !important;
        padding: 12px 12px 10px !important;
        transform: none !important;
        border-radius: 22px;
    }

    .service-module:nth-child(2),
    .service-module:nth-child(3) {
        min-height: 82px !important;
    }

    .service-module__label {
        font-size: .76rem;
    }

    .service-module__mini {
        margin-top: 6px;
        font-size: .54rem;
        line-height: 1.22;
    }

    .service-drawer {
        width: 100%;
        margin-top: 18px;
    }

    .service-drawer__panel {
        padding: 16px;
    }

    .service-drawer__copy h2 {
        font-size: 1.9rem;
    }

    .service-drawer__copy p:last-child {
        font-size: .92rem;
        line-height: 1.55;
    }

    .story-book__logo {
        width: min(48vw, 170px);
    }
}


/* ===== ONEBOOK v0.8: responsive satellite / fan layout ===== */
/* Desktop intentionally unchanged. */

/* Tablet: keep the book central, position services as satellites */
@media (min-width: 561px) and (max-width: 820px) {
    .hero {
        padding-top: 14px;
    }

    .book-stage {
        position: relative;
        display: block;
        width: min(100%, 760px);
        height: 610px;
        padding: 0;
        margin: 0 auto;
    }

    .digital-book {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: min(54vw, 390px) !important;
        margin: 0 !important;
        transform:
            translate(-50%, -50%)
            rotateX(55deg)
            rotateZ(-1.5deg) !important;
    }

    .connectors {
        display: none !important;
    }

    .service-modules {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
    }

    .service-module {
        position: absolute !important;
        width: clamp(150px, 25vw, 190px) !important;
        min-height: 102px !important;
        padding: 14px 15px 12px !important;
        border-radius: 24px;
        backdrop-filter: blur(15px);
    }

    .service-module:nth-child(1) {
        left: 1.5% !important;
        top: 18% !important;
        right: auto !important;
        bottom: auto !important;
        transform: rotate(-3deg) !important;
    }

    .service-module:nth-child(2) {
        left: 3.5% !important;
        top: 57% !important;
        right: auto !important;
        bottom: auto !important;
        transform: rotate(2deg) !important;
    }

    .service-module:nth-child(3) {
        right: 1.5% !important;
        top: 18% !important;
        left: auto !important;
        bottom: auto !important;
        transform: rotate(3deg) !important;
    }

    .service-module:nth-child(4) {
        right: 3.5% !important;
        top: 57% !important;
        left: auto !important;
        bottom: auto !important;
        transform: rotate(-2deg) !important;
    }

    .service-module:hover,
    .service-module[aria-pressed="true"] {
        transform: translateY(-6px) scale(1.025) !important;
    }

    .service-drawer {
        margin-top: 8px;
    }

    .brand-tagline {
        max-width: 260px;
        font-size: .62rem;
    }
}

/* Mobile: organic fan/orbit composition rather than a rigid 2 x 2 grid */
@media (max-width: 560px) {
    .site-header__inner {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .brand img {
        height: 34px;
    }

    .brand-tagline {
        max-width: 185px;
        font-size: .56rem;
        line-height: 1.18;
    }

    .button--header {
        min-height: 36px;
        padding-inline: 12px;
        font-size: .58rem;
    }

    .hero {
        padding-top: 10px;
    }

    .book-stage {
        position: relative;
        display: block;
        width: 100%;
        height: 650px;
        padding: 0;
        margin: 0 auto;
    }

    .digital-book {
        position: absolute !important;
        left: 50% !important;
        top: 28% !important;
        width: min(88vw, 340px) !important;
        margin: 0 !important;
        transform: translate(-50%, -50%) !important;
    }

    .digital-book__logo {
        width: min(56vw, 190px);
    }

    .connectors {
        display: none !important;
    }

    .service-modules {
        position: absolute;
        left: 50%;
        top: 48%;
        width: min(100%, 390px);
        height: 300px;
        margin: 0;
        transform: translateX(-50%);
        display: block;
    }

    .service-module {
        position: absolute !important;
        width: clamp(138px, 42vw, 170px) !important;
        min-height: 88px !important;
        padding: 13px 13px 11px !important;
        border-radius: 26px;
        background: linear-gradient(150deg, rgba(255,255,255,.86), rgba(225,241,249,.36));
        box-shadow:
            0 16px 42px rgba(18,53,73,.055),
            inset 0 0 0 1px rgba(255,255,255,.44);
        backdrop-filter: blur(14px);
    }

    .service-module__label {
        font-size: .78rem;
    }

    .service-module__mini {
        font-size: .52rem;
        line-height: 1.18;
    }

    .service-module:nth-child(1) {
        left: 2% !important;
        top: 16px !important;
        right: auto !important;
        bottom: auto !important;
        transform: rotate(-4deg) !important;
    }

    .service-module:nth-child(2) {
        right: 0 !important;
        top: 0 !important;
        left: auto !important;
        bottom: auto !important;
        transform: rotate(3deg) !important;
    }

    .service-module:nth-child(3) {
        left: 9% !important;
        top: 142px !important;
        right: auto !important;
        bottom: auto !important;
        transform: rotate(2.5deg) !important;
    }

    .service-module:nth-child(4) {
        right: 5% !important;
        top: 158px !important;
        left: auto !important;
        bottom: auto !important;
        transform: rotate(-3.5deg) !important;
    }

    .service-module:hover,
    .service-module[aria-pressed="true"] {
        transform: translateY(-6px) scale(1.035) rotate(0deg) !important;
        z-index: 3;
    }

    .service-module[aria-pressed="true"] {
        box-shadow:
            0 22px 54px rgba(44,145,203,.16),
            inset 0 0 0 1px rgba(255,255,255,.6);
    }

    .service-drawer {
        margin-top: 0;
        border-radius: 24px;
    }

    .service-drawer__panel {
        padding: 17px 15px;
    }

    .service-drawer__copy {
        text-align: left;
    }

    .service-drawer__copy h2 {
        font-size: 1.75rem;
    }

    .service-drawer__links {
        grid-template-columns: 1fr;
    }
}


/* ===== ONEBOOK v0.9: hover-preview detail sync + tablet compacting + mobile service rail ===== */

/* Tablet: reduce dead space and bring satellites closer to the book */
@media (min-width: 561px) and (max-width: 820px) {
    .hero {
        padding-top: 8px;
        min-height: auto;
    }

    .book-stage {
        width: min(100%, 760px);
        height: 500px;
        margin-top: 14px;
    }

    .digital-book {
        width: min(49vw, 360px) !important;
        top: 50% !important;
    }

    .service-modules {
        inset: 0;
    }

    .service-module {
        width: clamp(142px, 23vw, 176px) !important;
        min-height: 94px !important;
        padding: 13px 14px 12px !important;
        border-radius: 22px;
    }

    .service-module:nth-child(1) {
        left: 4% !important;
        top: 15% !important;
        transform: rotate(-4deg) !important;
    }

    .service-module:nth-child(2) {
        left: 8% !important;
        top: 58% !important;
        transform: rotate(2deg) !important;
    }

    .service-module:nth-child(3) {
        right: 4% !important;
        top: 15% !important;
        transform: rotate(4deg) !important;
    }

    .service-module:nth-child(4) {
        right: 8% !important;
        top: 58% !important;
        transform: rotate(-2deg) !important;
    }

    .service-drawer {
        margin-top: 0;
    }

    .service-drawer__panel {
        padding-top: 26px;
        padding-bottom: 24px;
    }
}

/* Mobile: replace floating cards with a lighter service rail under the book */
@media (max-width: 560px) {
    .hero {
        min-height: auto;
        padding-top: 8px;
    }

    .book-stage {
        position: relative;
        width: 100%;
        height: auto;
        margin-top: 8px;
        padding-bottom: 0;
        transform: none !important;
    }

    .book-stage__grid,
    .book-stage__halo {
        display: none;
    }

    .digital-book {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: min(86vw, 340px) !important;
        margin: 0 auto !important;
        transform: rotateX(55deg) rotateZ(-2deg) !important;
    }

    .digital-book__logo {
        width: min(54vw, 186px);
    }

    .connectors {
        display: none !important;
    }

    .service-modules {
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        margin-top: 14px;
        padding: 0 14px 6px;
        transform: none !important;
        display: flex !important;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .service-modules::-webkit-scrollbar {
        display: none;
    }

    .service-module {
        position: relative !important;
        inset: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        flex: 0 0 auto;
        width: auto !important;
        min-width: max-content;
        min-height: 54px !important;
        padding: 11px 16px !important;
        border-radius: 999px !important;
        transform: none !important;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        white-space: nowrap;
        scroll-snap-align: start;
        background: rgba(255,255,255,.74);
        box-shadow:
            0 10px 24px rgba(18,53,73,.05),
            inset 0 0 0 1px rgba(255,255,255,.52);
        backdrop-filter: blur(14px);
    }

    .service-module__glass {
        display: none;
    }

    .service-module__label {
        font-size: .74rem;
        line-height: 1;
        letter-spacing: .06em;
    }

    .service-module__mini {
        display: none;
    }

    .service-module__signal {
        width: 8px;
        height: 8px;
        margin-left: 2px;
    }

    .service-module:hover,
    .service-module[aria-pressed="true"] {
        transform: none !important;
        box-shadow:
            0 12px 28px rgba(44,145,203,.10),
            inset 0 0 0 1px rgba(79,181,238,.38);
    }

    .service-module[aria-pressed="true"] {
        color: var(--navy);
        border-color: rgba(79,181,238,.45);
        background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(220,240,251,.62));
    }

    .service-drawer {
        width: calc(100% - 24px);
        margin-top: 14px;
        border-radius: 22px;
    }

    .service-drawer__panel {
        padding: 16px 14px;
    }

    .service-drawer__copy {
        text-align: left;
    }

    .service-drawer__copy h2 {
        font-size: 1.8rem;
    }

    .service-drawer__copy p:last-child {
        font-size: .92rem;
        line-height: 1.58;
    }

    .service-drawer__links {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .service-drawer__chip {
        min-height: 48px;
        padding: 0 14px;
        border-radius: 16px;
    }
}


/* ===== ONEBOOK v0.10: responsive arrow switcher + compact tablet + clean mobile ===== */

.service-switcher {
    display: none;
}

/* Tablet */
@media (min-width: 561px) and (max-width: 820px) {
    .book-stage {
        height: 410px;
        margin-top: 2px;
    }

    .digital-book {
        width: min(46vw, 330px) !important;
        top: 49% !important;
    }

    .service-module {
        width: clamp(136px, 22vw, 168px) !important;
        min-height: 88px !important;
        padding: 12px 13px 11px !important;
    }

    .service-module:nth-child(1) {
        left: 5% !important;
        top: 13% !important;
    }

    .service-module:nth-child(2) {
        left: 7% !important;
        top: 60% !important;
    }

    .service-module:nth-child(3) {
        right: 5% !important;
        top: 13% !important;
    }

    .service-module:nth-child(4) {
        right: 7% !important;
        top: 60% !important;
    }

    .service-switcher {
        position: sticky;
        top: 72px;
        z-index: 35;
        width: min(calc(100% - 36px), 520px);
        min-height: 54px;
        margin: -2px auto 10px;
        padding: 6px 8px;
        display: grid;
        grid-template-columns: 46px 1fr 46px;
        align-items: center;
        gap: 8px;
        border: 1px solid rgba(21,50,66,.12);
        border-radius: 999px;
        background: rgba(255,255,255,.86);
        box-shadow: 0 10px 28px rgba(21,50,66,.06);
        backdrop-filter: blur(18px);
    }

    .service-switcher__arrow {
        width: 42px;
        height: 42px;
        border: 0;
        border-radius: 50%;
        background: rgba(21,50,66,.055);
        color: var(--navy);
        cursor: pointer;
        font-size: 1.05rem;
    }

    .service-switcher__current {
        min-width: 0;
        display: grid;
        grid-template-columns: auto auto;
        justify-content: center;
        align-items: baseline;
        column-gap: 9px;
        row-gap: 3px;
        text-align: center;
    }

    .service-switcher__label {
        font-size: .82rem;
        font-weight: 800;
        letter-spacing: .07em;
        text-transform: uppercase;
    }

    .service-switcher__count {
        color: var(--muted);
        font-size: .64rem;
    }

    .service-switcher__dots {
        grid-column: 1 / -1;
        display: flex;
        justify-content: center;
        gap: 5px;
    }

    .service-switcher__dots i {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(21,50,66,.16);
        transition: transform .2s var(--ease), background .2s var(--ease);
    }

    .service-switcher__dots i.is-active {
        transform: scale(1.35);
        background: var(--cyan);
    }

    .service-drawer {
        margin-top: 0;
    }
}

/* Mobile */
@media (max-width: 560px) {
    .hero {
        padding-top: 4px;
        padding-bottom: 46px;
    }

    .book-stage {
        height: auto !important;
        margin-top: 4px;
        padding: 0 0 4px;
    }

    .digital-book {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: min(88vw, 330px) !important;
        margin: 0 auto !important;
        transform: none !important;
    }

    .book-stage__grid,
    .book-stage__halo,
    .connectors,
    .service-modules {
        display: none !important;
    }

    .service-switcher {
        position: sticky;
        top: 76px;
        z-index: 40;
        width: calc(100% - 24px);
        min-height: 58px;
        margin: 12px auto 12px;
        padding: 7px 8px;
        display: grid;
        grid-template-columns: 44px minmax(0,1fr) 44px;
        align-items: center;
        gap: 8px;
        border: 1px solid rgba(21,50,66,.12);
        border-radius: 999px;
        background: rgba(255,255,255,.91);
        box-shadow: 0 10px 26px rgba(21,50,66,.055);
        backdrop-filter: blur(18px);
    }

    .service-switcher__arrow {
        width: 42px;
        height: 42px;
        border: 0;
        border-radius: 50%;
        background: rgba(21,50,66,.055);
        color: var(--navy);
        font-size: 1.08rem;
        cursor: pointer;
    }

    .service-switcher__current {
        min-width: 0;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: baseline;
        column-gap: 8px;
        row-gap: 3px;
    }

    .service-switcher__label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
        font-size: .76rem;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .service-switcher__count {
        color: var(--muted);
        font-size: .61rem;
        white-space: nowrap;
    }

    .service-switcher__dots {
        grid-column: 1 / -1;
        display: flex;
        gap: 5px;
    }

    .service-switcher__dots i {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(21,50,66,.15);
    }

    .service-switcher__dots i.is-active {
        background: var(--cyan);
        box-shadow: 0 0 8px rgba(103,201,255,.55);
    }

    .service-drawer {
        width: calc(100% - 24px);
        margin: 0 auto;
        border: 0;
        border-top: 1px solid rgba(21,50,66,.12);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }

    .service-drawer__panel {
        padding: 22px 2px 0;
    }

    .service-drawer__copy {
        text-align: left;
    }

    .service-drawer__eyebrow {
        font-size: .64rem;
    }

    .service-drawer__copy h2 {
        margin-top: 5px;
        font-size: 1.9rem;
    }

    .service-drawer__copy p:last-child {
        margin-top: 11px;
        color: var(--muted);
        font-size: .93rem;
        line-height: 1.62;
    }

    .service-drawer__links {
        margin-top: 16px;
        display: block;
    }

    .service-drawer__chip {
        min-height: 54px;
        padding: 0 4px;
        border: 0;
        border-bottom: 1px solid rgba(21,50,66,.10);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        font-size: .86rem;
    }

    .service-drawer__chip:hover {
        transform: none;
        background: transparent;
        border-color: rgba(21,50,66,.18);
        box-shadow: none;
    }
}


/* ===== ONEBOOK v0.11: floating arrows + compact tablet + mobile swipe scene ===== */

/* Hide old v0.10 switcher if any stale markup survives browser/cache */
.service-switcher {
    display: none !important;
}

/* Shared book navigation */
.book-nav {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 12;
}

.book-nav__arrow {
    position: absolute;
    top: 58%;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(21,50,66,.12);
    border-radius: 50%;
    background: rgba(255,255,255,.76);
    color: var(--navy);
    box-shadow: 0 10px 28px rgba(21,50,66,.055);
    backdrop-filter: blur(16px);
    cursor: pointer;
    pointer-events: auto;
    transition:
        transform .2s var(--ease),
        border-color .2s var(--ease),
        background .2s var(--ease),
        opacity .2s var(--ease);
}

.book-nav__arrow:hover {
    transform: translateY(-2px) scale(1.04);
    border-color: rgba(79,181,238,.42);
    background: rgba(255,255,255,.94);
}

.book-nav__arrow--prev {
    left: 14.5%;
}

.book-nav__arrow--next {
    right: 14.5%;
}

.book-nav__scene {
    display: none;
}

/* Desktop keeps the existing floating modules; arrows are just an alternative navigation method. */
@media (min-width: 821px) {
    .book-nav__arrow {
        opacity: .52;
    }

    .book-stage:hover .book-nav__arrow {
        opacity: .92;
    }
}

/* Tablet: denser satellite composition, no large navigation bar */
@media (min-width: 561px) and (max-width: 820px) {
    .hero {
        min-height: auto;
        padding-top: 4px;
    }

    .book-stage {
        width: min(100%, 740px);
        height: 350px;
        margin-top: 0;
    }

    .digital-book {
        width: min(44vw, 315px) !important;
        top: 51% !important;
    }

    .service-module {
        width: clamp(128px, 21vw, 158px) !important;
        min-height: 82px !important;
        padding: 11px 12px 10px !important;
    }

    .service-module__label {
        font-size: .73rem;
    }

    .service-module__mini {
        font-size: .52rem;
        line-height: 1.18;
    }

    .service-module:nth-child(1) {
        left: 5% !important;
        top: 11% !important;
        transform: rotate(-4deg) !important;
    }

    .service-module:nth-child(2) {
        left: 8% !important;
        top: 59% !important;
        transform: rotate(2deg) !important;
    }

    .service-module:nth-child(3) {
        right: 5% !important;
        top: 11% !important;
        transform: rotate(4deg) !important;
    }

    .service-module:nth-child(4) {
        right: 8% !important;
        top: 59% !important;
        transform: rotate(-2deg) !important;
    }

    .book-nav__arrow {
        top: 50%;
        width: 38px;
        height: 38px;
        opacity: .72;
    }

    .book-nav__arrow--prev {
        left: 26%;
    }

    .book-nav__arrow--next {
        right: 26%;
    }

    .service-drawer {
        margin-top: -2px;
    }
}

/* Mobile becomes one swipeable transparent book scene. */
@media (max-width: 560px) {
    .hero {
        min-height: auto;
        padding-top: 4px;
        padding-bottom: 42px;
    }

    .book-stage {
        position: relative;
        width: 100%;
        height: 330px !important;
        margin-top: 2px;
        padding: 0;
        perspective: 1200px;
        touch-action: pan-y;
        overflow: visible;
    }

    .book-stage__grid,
    .book-stage__halo,
    .connectors,
    .service-modules {
        display: none !important;
    }

    .digital-book {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: min(88vw, 335px) !important;
        margin: 0 !important;
        transform:
            translate(-50%, -50%)
            rotateX(58deg)
            rotateZ(-2deg) !important;
        transform-origin: center center;
    }

    .digital-book__logo {
        width: min(55vw, 188px);
    }

    .digital-book__shadow {
        opacity: .72;
    }

    .book-nav {
        display: block;
    }

    .book-nav__arrow {
        top: 50%;
        width: 40px;
        height: 40px;
        opacity: .82;
        background: rgba(255,255,255,.66);
    }

    .book-nav__arrow--prev {
        left: 5px;
    }

    .book-nav__arrow--next {
        right: 5px;
    }

    .book-nav__scene {
        position: absolute;
        left: 50%;
        bottom: 8px;
        transform: translateX(-50%);
        min-width: 164px;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: baseline;
        column-gap: 8px;
        row-gap: 5px;
        padding: 8px 13px;
        border: 1px solid rgba(21,50,66,.10);
        border-radius: 999px;
        background: rgba(255,255,255,.48);
        backdrop-filter: blur(13px);
        pointer-events: none;
    }

    .book-nav__scene-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--navy);
        font-size: .7rem;
        font-weight: 800;
        letter-spacing: .065em;
        text-transform: uppercase;
    }

    .book-nav__scene-count {
        color: var(--muted);
        font-size: .59rem;
        white-space: nowrap;
    }

    .book-nav__dots {
        grid-column: 1 / -1;
        display: flex;
        gap: 5px;
    }

    .book-nav__dots i {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(21,50,66,.14);
    }

    .book-nav__dots i.is-active {
        background: var(--cyan);
        box-shadow: 0 0 8px rgba(103,201,255,.58);
    }

    .service-drawer {
        width: calc(100% - 24px);
        margin: 0 auto;
        border: 0;
        border-top: 1px solid rgba(21,50,66,.12);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }

    .service-drawer__panel {
        padding: 22px 2px 0;
    }

    .service-drawer__copy {
        text-align: left;
    }

    .service-drawer__eyebrow {
        font-size: .63rem;
    }

    .service-drawer__copy h2 {
        margin-top: 5px;
        font-size: 1.9rem;
    }

    .service-drawer__copy p:last-child {
        margin-top: 11px;
        color: var(--muted);
        font-size: .92rem;
        line-height: 1.6;
    }

    .service-drawer__links {
        margin-top: 16px;
        display: block;
    }

    .service-drawer__chip {
        min-height: 54px;
        padding: 0 4px;
        border: 0;
        border-bottom: 1px solid rgba(21,50,66,.10);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        font-size: .86rem;
    }

    .service-drawer__chip:hover {
        transform: none;
        background: transparent;
        border-color: rgba(21,50,66,.18);
        box-shadow: none;
    }
}


/* ===== ONEBOOK v0.12: arrows beside result + mobile background state ===== */

/* Old book navigation is fully retired. */
.book-nav,
.service-switcher {
    display: none !important;
}

.mobile-service-backdrop {
    display: none;
}

/* Result navigation is positioned relative to the result area. */
.service-drawer {
    position: relative;
}

.service-result-nav {
    pointer-events: none;
}

.service-result-nav__arrow {
    pointer-events: auto;
    border: 1px solid rgba(21,50,66,.12);
    background: rgba(255,255,255,.78);
    color: var(--navy);
    box-shadow: 0 10px 28px rgba(21,50,66,.055);
    backdrop-filter: blur(16px);
    cursor: pointer;
    transition:
        transform .2s var(--ease),
        border-color .2s var(--ease),
        background .2s var(--ease),
        opacity .2s var(--ease);
}

.service-result-nav__arrow:hover {
    transform: translateY(-2px) scale(1.04);
    border-color: rgba(79,181,238,.42);
    background: rgba(255,255,255,.95);
}

.service-result-nav__current {
    display: none;
}

/* DESKTOP: only floating arrows beside the result card. */
@media (min-width: 821px) {
    .service-result-nav {
        position: absolute;
        inset: 0;
        z-index: 20;
    }

    .service-result-nav__arrow {
        position: absolute;
        top: 50%;
        width: 42px;
        height: 42px;
        margin-top: -21px;
        border-radius: 50%;
        opacity: .62;
    }

    .service-drawer:hover .service-result-nav__arrow {
        opacity: .95;
    }

    .service-result-nav__arrow--prev {
        left: -58px;
    }

    .service-result-nav__arrow--next {
        right: -58px;
    }
}

/* TABLET: compact hero + arrows directly beside the result panel. */
@media (min-width: 561px) and (max-width: 820px) {
    .hero {
        min-height: auto;
        padding-top: 0;
    }

    .book-stage {
        width: min(100%, 720px);
        height: 305px;
        margin-top: -2px;
    }

    .digital-book {
        width: min(42vw, 300px) !important;
        top: 50% !important;
    }

    .service-module {
        width: clamp(122px, 20vw, 150px) !important;
        min-height: 76px !important;
        padding: 10px 11px 9px !important;
    }

    .service-module__label {
        font-size: .69rem;
    }

    .service-module__mini {
        margin-top: 5px;
        font-size: .49rem;
    }

    .service-module:nth-child(1) {
        left: 6% !important;
        top: 8% !important;
    }

    .service-module:nth-child(2) {
        left: 8% !important;
        top: 61% !important;
    }

    .service-module:nth-child(3) {
        right: 6% !important;
        top: 8% !important;
    }

    .service-module:nth-child(4) {
        right: 8% !important;
        top: 61% !important;
    }

    .service-drawer {
        width: calc(100% - 90px);
        margin-top: -6px;
    }

    .service-result-nav {
        position: absolute;
        inset: 0;
        z-index: 20;
    }

    .service-result-nav__arrow {
        position: absolute;
        top: 50%;
        width: 38px;
        height: 38px;
        margin-top: -19px;
        border-radius: 50%;
        opacity: .82;
    }

    .service-result-nav__arrow--prev {
        left: -47px;
    }

    .service-result-nav__arrow--next {
        right: -47px;
    }
}

/* MOBILE:
   - no card grid
   - one translucent service backdrop behind the 3D book
   - arrows live with the result, so navigation remains available after scrolling
*/
@media (max-width: 560px) {
    .hero {
        min-height: auto;
        padding-top: 0;
        padding-bottom: 34px;
    }

    .book-stage {
        position: relative;
        width: 100%;
        height: 255px !important;
        margin-top: 0;
        padding: 0;
        perspective: 1200px;
        touch-action: pan-y;
        overflow: visible;
    }

    .book-stage__grid,
    .book-stage__halo,
    .connectors,
    .service-modules {
        display: none !important;
    }

    .mobile-service-backdrop {
        position: absolute;
        display: block;
        z-index: 1;
        left: 50%;
        top: 48%;
        width: min(82vw, 310px);
        height: 150px;
        padding: 18px 20px;
        overflow: hidden;
        border: 1px solid rgba(79,181,238,.22);
        border-radius: 34px;
        transform:
            translate(-50%, -50%)
            rotate(-3deg)
            translateY(20px);
        background:
            linear-gradient(145deg, rgba(255,255,255,.28), rgba(179,224,248,.16));
        box-shadow:
            0 30px 60px rgba(21,50,66,.055),
            inset 0 0 0 1px rgba(255,255,255,.30);
        backdrop-filter: blur(14px);
        opacity: .48;
        transition:
            transform .35s var(--ease-soft),
            opacity .35s var(--ease-soft),
            border-color .35s var(--ease-soft);
    }

    .mobile-service-backdrop::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(rgba(21,50,66,.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(21,50,66,.035) 1px, transparent 1px);
        background-size: 28px 28px;
        pointer-events: none;
    }

    .book-stage[data-active="bookkeeping"] .mobile-service-backdrop {
        transform:
            translate(-50%, -50%)
            rotate(2.5deg)
            translateY(20px);
    }

    .book-stage[data-active="erp"] .mobile-service-backdrop {
        transform:
            translate(-50%, -50%)
            rotate(-1.5deg)
            translateY(20px);
    }

    .book-stage[data-active="automation"] .mobile-service-backdrop {
        transform:
            translate(-50%, -50%)
            rotate(3deg)
            translateY(20px);
    }

    .mobile-service-backdrop__label {
        position: absolute;
        left: 20px;
        bottom: 31px;
        color: rgba(21,50,66,.52);
        font-size: .86rem;
        font-weight: 800;
        letter-spacing: .065em;
        text-transform: uppercase;
    }

    .mobile-service-backdrop__mini {
        position: absolute;
        left: 20px;
        bottom: 16px;
        color: rgba(21,50,66,.34);
        font-size: .52rem;
    }

    .digital-book {
        position: absolute !important;
        z-index: 3;
        left: 50% !important;
        top: 46% !important;
        width: min(86vw, 325px) !important;
        margin: 0 !important;
        transform:
            translate(-50%, -50%)
            rotateX(59deg)
            rotateZ(-2deg) !important;
        transform-origin: center center;
    }

    .digital-book__logo {
        width: min(53vw, 182px);
    }

    /* Bring result closer to the book to remove dead space. */
    .service-drawer {
        width: calc(100% - 24px);
        margin: -12px auto 0;
        border: 0;
        border-top: 1px solid rgba(21,50,66,.12);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        overflow: visible;
    }

    /* Navigation stays attached to the active result. */
    .service-result-nav {
        position: sticky;
        top: 78px;
        z-index: 45;
        width: 100%;
        min-height: 56px;
        margin: 0 0 14px;
        display: grid;
        grid-template-columns: 44px minmax(0,1fr) 44px;
        align-items: center;
        gap: 8px;
        padding: 6px 0;
        background: rgba(255,255,255,.90);
        border-bottom: 1px solid rgba(21,50,66,.09);
        backdrop-filter: blur(16px);
        pointer-events: auto;
    }

    .service-result-nav__arrow {
        width: 42px;
        height: 42px;
        border-radius: 50%;
    }

    .service-result-nav__current {
        min-width: 0;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: baseline;
        column-gap: 8px;
        row-gap: 4px;
    }

    .service-result-nav__label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--navy);
        font-size: .75rem;
        font-weight: 800;
        letter-spacing: .065em;
        text-transform: uppercase;
    }

    .service-result-nav__count {
        color: var(--muted);
        font-size: .6rem;
        white-space: nowrap;
    }

    .service-result-nav__dots {
        grid-column: 1 / -1;
        display: flex;
        gap: 5px;
    }

    .service-result-nav__dots i {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(21,50,66,.14);
    }

    .service-result-nav__dots i.is-active {
        background: var(--cyan);
        box-shadow: 0 0 8px rgba(103,201,255,.55);
    }

    .service-drawer__panel {
        padding: 4px 2px 0;
    }

    .service-drawer__copy {
        text-align: left;
    }

    .service-drawer__eyebrow {
        font-size: .63rem;
    }

    .service-drawer__copy h2 {
        margin-top: 5px;
        font-size: 1.9rem;
    }

    .service-drawer__copy p:last-child {
        margin-top: 11px;
        color: var(--muted);
        font-size: .92rem;
        line-height: 1.6;
    }

    .service-drawer__links {
        margin-top: 16px;
        display: block;
    }

    .service-drawer__chip {
        min-height: 54px;
        padding: 0 4px;
        border: 0;
        border-bottom: 1px solid rgba(21,50,66,.10);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        font-size: .86rem;
    }

    .service-drawer__chip:hover {
        transform: none;
        background: transparent;
        border-color: rgba(21,50,66,.18);
        box-shadow: none;
    }
}


/* ===== ONEBOOK v0.13: visible result arrows + compact tablet + mobile side controller ===== */

/* Desktop / tablet: allow arrows outside result box to remain visible */
@media (min-width: 561px) {
    .service-drawer {
        overflow: visible !important;
    }

    .service-result-nav {
        overflow: visible !important;
    }

    .service-result-nav__arrow {
        z-index: 60;
    }
}

/* Desktop: floating result arrows, clearly visible but still subtle */
@media (min-width: 821px) {
    .service-result-nav__arrow {
        opacity: .78 !important;
        background: rgba(255,255,255,.90);
        box-shadow:
            0 12px 34px rgba(21,50,66,.08),
            0 0 0 1px rgba(255,255,255,.55) inset;
    }

    .service-result-nav__arrow--prev {
        left: -50px !important;
    }

    .service-result-nav__arrow--next {
        right: -50px !important;
    }

    .service-drawer:hover .service-result-nav__arrow {
        opacity: 1 !important;
    }
}

/* Tablet: remove more dead space and keep arrows close to the result box */
@media (min-width: 561px) and (max-width: 820px) {
    .hero {
        padding-top: 0 !important;
        padding-bottom: 56px !important;
    }

    .book-stage {
        height: 270px !important;
        margin-top: -8px !important;
    }

    .digital-book {
        width: min(40vw, 280px) !important;
        top: 50% !important;
    }

    .service-module {
        width: clamp(116px, 19vw, 142px) !important;
        min-height: 72px !important;
        padding: 9px 10px 8px !important;
    }

    .service-module__label {
        font-size: .66rem !important;
    }

    .service-module__mini {
        font-size: .47rem !important;
        line-height: 1.12 !important;
    }

    .service-module:nth-child(1) {
        left: 7% !important;
        top: 7% !important;
    }

    .service-module:nth-child(2) {
        left: 9% !important;
        top: 61% !important;
    }

    .service-module:nth-child(3) {
        right: 7% !important;
        top: 7% !important;
    }

    .service-module:nth-child(4) {
        right: 9% !important;
        top: 61% !important;
    }

    .service-drawer {
        width: calc(100% - 78px) !important;
        margin-top: -10px !important;
    }

    .service-result-nav__arrow {
        width: 36px !important;
        height: 36px !important;
        margin-top: -18px !important;
        opacity: .92 !important;
        background: rgba(255,255,255,.92);
    }

    .service-result-nav__arrow--prev {
        left: -43px !important;
    }

    .service-result-nav__arrow--next {
        right: -43px !important;
    }
}

/* Mobile: move the selector from a horizontal strip into a vertical side controller */
@media (max-width: 560px) {
    .hero {
        padding-bottom: 28px !important;
    }

    .book-stage {
        height: 238px !important;
    }

    .mobile-service-backdrop {
        width: min(78vw, 292px) !important;
        height: 136px !important;
        opacity: .38 !important;
        transform:
            translate(-50%, -50%)
            rotate(-4deg)
            translateY(15px) !important;
    }

    .book-stage[data-active="bookkeeping"] .mobile-service-backdrop {
        transform:
            translate(-50%, -50%)
            rotate(3deg)
            translateY(15px) !important;
    }

    .book-stage[data-active="erp"] .mobile-service-backdrop {
        transform:
            translate(-50%, -50%)
            rotate(-2deg)
            translateY(15px) !important;
    }

    .book-stage[data-active="automation"] .mobile-service-backdrop {
        transform:
            translate(-50%, -50%)
            rotate(4deg)
            translateY(15px) !important;
    }

    .digital-book {
        width: min(84vw, 316px) !important;
        top: 45% !important;
    }

    .service-drawer {
        position: relative !important;
        width: calc(100% - 24px) !important;
        margin: -8px auto 0 !important;
        padding-right: 0 !important;
        border-top: 1px solid rgba(21,50,66,.10) !important;
        overflow: visible !important;
    }

    /* reserve space on the right for the vertical controller */
    .service-drawer__panel {
        position: relative;
        padding: 18px 70px 0 2px !important;
    }

    .service-result-nav {
        position: sticky !important;
        float: right;
        top: 82px !important;
        z-index: 50;
        width: 54px !important;
        min-height: 164px !important;
        margin: 12px 0 -164px 0 !important;
        padding: 7px 5px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: 44px minmax(54px,1fr) 44px !important;
        align-items: center;
        justify-items: center;
        gap: 5px !important;
        border: 1px solid rgba(21,50,66,.10);
        border-radius: 28px !important;
        background: rgba(255,255,255,.88) !important;
        box-shadow: 0 12px 30px rgba(21,50,66,.065);
        backdrop-filter: blur(16px);
        pointer-events: auto;
    }

    .service-result-nav__arrow {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        font-size: .95rem;
    }

    /* previous points upward, next points downward: fits the vertical control */
    .service-result-nav__arrow--prev span,
    .service-result-nav__arrow--next span {
        font-size: 0;
    }

    .service-result-nav__arrow--prev span::before {
        content: "↑";
        font-size: 1rem;
    }

    .service-result-nav__arrow--next span::before {
        content: "↓";
        font-size: 1rem;
    }

    .service-result-nav__current {
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px !important;
    }

    .service-result-nav__label {
        display: none !important;
    }

    .service-result-nav__count {
        font-size: .57rem !important;
        color: var(--muted);
        white-space: nowrap;
    }

    .service-result-nav__dots {
        display: flex !important;
        flex-direction: column;
        gap: 4px !important;
    }

    .service-result-nav__dots i {
        width: 5px !important;
        height: 5px !important;
    }

    .service-drawer__copy {
        max-width: 100%;
        text-align: left !important;
    }

    .service-drawer__eyebrow {
        max-width: 100%;
        font-size: .62rem !important;
        line-height: 1.35;
    }

    .service-drawer__copy h2 {
        font-size: 1.86rem !important;
        line-height: 1.02;
    }

    .service-drawer__copy p:last-child {
        font-size: .9rem !important;
        line-height: 1.58 !important;
    }

    .service-drawer__links {
        margin-top: 16px !important;
    }

    .service-drawer__chip {
        min-height: 52px !important;
        padding: 0 2px !important;
    }
}


/* ===== ONEBOOK v0.14: tablet swipe + compact mobile service visual ===== */

.service-mobile-visual {
    display: none;
}

/* Tablet: keep the approved layout, just make touch swipe explicitly natural. */
@media (min-width: 561px) and (max-width: 820px) {
    .book-stage,
    .service-drawer {
        touch-action: pan-y;
    }
}

/* Mobile:
   - remove the large book scene completely
   - use a compact service-specific mini visual beside the active title
   - return arrows to the same left/right language used on desktop/tablet
   - result itself remains swipeable
*/
@media (max-width: 560px) {
    .hero {
        padding-top: 0 !important;
        padding-bottom: 28px !important;
    }

    .book-stage {
        display: none !important;
    }

    .mobile-service-backdrop {
        display: none !important;
    }

    .service-drawer {
        position: relative !important;
        width: calc(100% - 26px) !important;
        margin: 18px auto 0 !important;
        padding: 0 !important;
        border: 1px solid rgba(21,50,66,.11) !important;
        border-radius: 24px !important;
        background:
            linear-gradient(155deg, rgba(255,255,255,.96), rgba(244,249,251,.82)) !important;
        box-shadow:
            0 18px 48px rgba(21,50,66,.055) !important;
        backdrop-filter: blur(14px);
        overflow: visible !important;
        touch-action: pan-y;
    }

    .service-drawer__panel {
        position: relative;
        padding: 20px 42px 22px !important;
        display: none;
        grid-template-columns: 96px minmax(0,1fr) !important;
        column-gap: 16px !important;
        row-gap: 18px !important;
        align-items: center !important;
    }

    .service-drawer__panel.is-active {
        display: grid !important;
    }

    .service-mobile-visual {
        display: block;
        width: 96px;
        perspective: 700px;
    }

    .service-mobile-visual__surface {
        position: relative;
        width: 96px;
        aspect-ratio: 1.32;
        overflow: hidden;
        border: 1px solid rgba(79,181,238,.28);
        border-radius: 18px;
        background:
            linear-gradient(145deg, #ffffff, #eef8fc);
        box-shadow:
            0 13px 25px rgba(21,50,66,.07),
            inset 0 0 0 1px rgba(255,255,255,.8);
        transform:
            rotateX(54deg)
            rotateZ(-4deg);
        transform-origin: center center;
        transition:
            transform .28s var(--ease-soft),
            border-color .28s var(--ease-soft),
            box-shadow .28s var(--ease-soft);
    }

    .service-drawer__panel[data-drawer="bookkeeping"] .service-mobile-visual__surface {
        transform: rotateX(54deg) rotateZ(3deg);
    }

    .service-drawer__panel[data-drawer="erp"] .service-mobile-visual__surface {
        transform: rotateX(54deg) rotateZ(-2deg);
    }

    .service-drawer__panel[data-drawer="automation"] .service-mobile-visual__surface {
        transform: rotateX(54deg) rotateZ(4deg);
    }

    .service-mobile-visual__surface::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(rgba(21,50,66,.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(21,50,66,.035) 1px, transparent 1px);
        background-size: 16px 16px;
        pointer-events: none;
    }

    .service-mobile-visual__surface img {
        position: absolute;
        left: 50%;
        top: 28%;
        width: 67px;
        transform: translateX(-50%);
        opacity: .9;
    }

    .service-mobile-visual__surface span {
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 10px;
        color: rgba(21,50,66,.68);
        font-size: .53rem;
        font-weight: 800;
        letter-spacing: .07em;
        text-align: center;
        text-transform: uppercase;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .service-mobile-visual__surface i {
        position: absolute;
        right: 9px;
        top: 9px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--cyan);
        box-shadow: 0 0 8px rgba(103,201,255,.6);
    }

    .service-drawer__copy {
        min-width: 0;
        display: block !important;
        text-align: left !important;
    }

    .service-drawer__eyebrow {
        margin-bottom: 7px !important;
        font-size: .58rem !important;
        line-height: 1.28 !important;
    }

    .service-drawer__copy h2 {
        margin: 0 !important;
        font-size: clamp(1.58rem, 7vw, 1.9rem) !important;
        line-height: 1.02 !important;
    }

    .service-drawer__copy p:last-child {
        grid-column: 1 / -1;
        margin-top: 10px !important;
        color: var(--muted);
        font-size: .88rem !important;
        line-height: 1.58 !important;
    }

    /* Put the description under both thumbnail and title. */
    .service-drawer__copy > div {
        display: contents;
    }

    .service-drawer__copy > div > .service-drawer__eyebrow,
    .service-drawer__copy > div > h2 {
        grid-column: 2;
    }

    .service-drawer__copy > div > p:last-child {
        grid-column: 1 / -1;
    }

    /* Links span the full panel width below the header visual. */
    .service-drawer__links {
        grid-column: 1 / -1 !important;
        margin-top: 0 !important;
        display: block !important;
    }

    .service-drawer__chip {
        min-height: 52px !important;
        padding: 0 2px !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(21,50,66,.10) !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: .84rem !important;
    }

    /* Same left/right arrow language as desktop/tablet, positioned beside the result. */
    .service-result-nav {
        position: absolute !important;
        inset: 0 !important;
        z-index: 50;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        pointer-events: none;
    }

    .service-result-nav__arrow {
        position: absolute !important;
        top: 78px !important;
        width: 38px !important;
        height: 38px !important;
        margin: 0 !important;
        border-radius: 50% !important;
        background: rgba(255,255,255,.94) !important;
        box-shadow: 0 10px 24px rgba(21,50,66,.07) !important;
        pointer-events: auto;
    }

    .service-result-nav__arrow--prev {
        left: -10px !important;
    }

    .service-result-nav__arrow--next {
        right: -10px !important;
    }

    /* Undo the v0.13 vertical-arrow glyph replacement. */
    .service-result-nav__arrow--prev span,
    .service-result-nav__arrow--next span {
        font-size: .95rem !important;
    }

    .service-result-nav__arrow--prev span::before,
    .service-result-nav__arrow--next span::before {
        content: none !important;
    }

    /* Keep 1/4 + dots as a small, quiet state indicator beside the title. */
    .service-result-nav__current {
        position: absolute;
        top: 23px;
        right: 45px;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px !important;
        pointer-events: none;
    }

    .service-result-nav__label {
        display: none !important;
    }

    .service-result-nav__count {
        font-size: .55rem !important;
        color: var(--muted);
    }

    .service-result-nav__dots {
        display: flex !important;
        flex-direction: row !important;
        gap: 4px !important;
    }

    .service-result-nav__dots i {
        width: 5px !important;
        height: 5px !important;
    }
}


/* ===== ONEBOOK v0.15: mobile title-left / visual-right composition ===== */

.service-mobile-description {
    display: none;
}

@media (max-width: 560px) {
    .service-drawer__panel {
        padding: 22px 42px 24px !important;
        grid-template-columns: minmax(0, 1fr) 102px !important;
        grid-template-rows: auto auto auto !important;
        column-gap: 15px !important;
        row-gap: 14px !important;
        align-items: center !important;
    }

    .service-mobile-visual {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 102px !important;
        justify-self: end;
        align-self: center;
    }

    .service-mobile-visual__surface {
        width: 102px !important;
        border-radius: 18px !important;
    }

    .service-drawer__panel[data-drawer="tax"] .service-mobile-visual__surface {
        transform: rotateX(54deg) rotateZ(4deg) !important;
    }

    .service-drawer__panel[data-drawer="bookkeeping"] .service-mobile-visual__surface {
        transform: rotateX(54deg) rotateZ(-3deg) !important;
    }

    .service-drawer__panel[data-drawer="erp"] .service-mobile-visual__surface {
        transform: rotateX(54deg) rotateZ(2deg) !important;
    }

    .service-drawer__panel[data-drawer="automation"] .service-mobile-visual__surface {
        transform: rotateX(54deg) rotateZ(-4deg) !important;
    }

    .service-drawer__copy {
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-width: 0;
        display: block !important;
        align-self: center;
        text-align: left !important;
    }

    .service-drawer__copy > div {
        display: block !important;
    }

    .service-drawer__eyebrow {
        margin: 0 0 8px !important;
        font-size: .58rem !important;
        line-height: 1.28 !important;
    }

    .service-drawer__copy h2 {
        margin: 0 !important;
        font-size: clamp(1.58rem, 7vw, 1.95rem) !important;
        line-height: 1.02 !important;
    }

    .service-drawer__copy > div > p:last-child {
        display: none !important;
    }

    .service-mobile-description {
        display: block !important;
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        margin: 0 !important;
        color: var(--muted);
        font-size: .9rem !important;
        line-height: 1.6 !important;
        text-align: left;
    }

    .service-drawer__links {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        margin-top: 0 !important;
        display: block !important;
    }

    .service-drawer__chip {
        min-height: 52px !important;
        padding: 0 2px !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(21,50,66,.10) !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: .84rem !important;
    }

    /* Keep arrows as left/right controls, aligned with the header row. */
    .service-result-nav__arrow {
        top: 53px !important;
        width: 38px !important;
        height: 38px !important;
    }

    .service-result-nav__arrow--prev {
        left: -10px !important;
    }

    .service-result-nav__arrow--next {
        right: -10px !important;
    }

    /* Put the quiet state indicator under the right-side visual. */
    .service-result-nav__current {
        top: 103px !important;
        right: 49px !important;
        align-items: center !important;
    }

    .service-result-nav__count {
        font-size: .54rem !important;
    }

    .service-result-nav__dots {
        flex-direction: row !important;
    }
}


/* ===== ONEBOOK v0.16: mobile spacing fix + sticky arrows + dots-only indicator ===== */

@media (max-width: 560px) {
    /* 1) Give title and mini visual truly separate columns so they never overlap. */
    .service-drawer__panel {
        padding: 22px 22px 24px !important;
        grid-template-columns: minmax(0, 1fr) 82px !important;
        column-gap: 18px !important;
        row-gap: 15px !important;
        align-items: center !important;
    }

    .service-mobile-visual {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 82px !important;
        justify-self: end !important;
        align-self: center !important;
        overflow: visible;
    }

    .service-mobile-visual__surface {
        width: 82px !important;
        border-radius: 16px !important;
    }

    .service-mobile-visual__surface img {
        width: 56px !important;
    }

    .service-mobile-visual__surface span {
        left: 7px !important;
        right: 7px !important;
        bottom: 8px !important;
        font-size: .46rem !important;
    }

    .service-drawer__copy {
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        padding-right: 0 !important;
    }

    .service-drawer__eyebrow {
        max-width: 100% !important;
        overflow-wrap: anywhere;
    }

    .service-drawer__copy h2 {
        max-width: 100% !important;
        overflow-wrap: anywhere;
        font-size: clamp(1.48rem, 6.8vw, 1.82rem) !important;
    }

    .service-mobile-description {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        padding-right: 0 !important;
    }

    .service-drawer__links {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
    }

    /* 2) Keep arrow navigation available while reading long service lists.
       Sticky is bounded by .service-drawer, so it stops when the service section ends. */
    .service-drawer {
        overflow: visible !important;
    }

    .service-result-nav {
        position: sticky !important;
        top: calc(50vh - 20px) !important;
        z-index: 70 !important;
        width: 100% !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        pointer-events: none !important;
        overflow: visible !important;
    }

    .service-result-nav__arrow {
        position: absolute !important;
        top: 0 !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        border-radius: 50% !important;
        background: rgba(255,255,255,.94) !important;
        box-shadow:
            0 10px 26px rgba(21,50,66,.08),
            inset 0 0 0 1px rgba(255,255,255,.65) !important;
        pointer-events: auto !important;
    }

    .service-result-nav__arrow--prev {
        left: -10px !important;
    }

    .service-result-nav__arrow--next {
        right: -10px !important;
    }

    /* 3) Remove 1/4, 2/4, etc. Keep only four tiny dots as a quiet carousel cue. */
    .service-result-nav__current {
        position: absolute !important;
        top: 15px !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        min-width: 0 !important;
        display: block !important;
        pointer-events: none !important;
    }

    .service-result-nav__label,
    .service-result-nav__count {
        display: none !important;
    }

    .service-result-nav__dots {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        justify-content: center;
        gap: 5px !important;
    }

    .service-result-nav__dots i {
        width: 4px !important;
        height: 4px !important;
        opacity: .68;
    }

    .service-result-nav__dots i.is-active {
        width: 6px !important;
        height: 6px !important;
        opacity: 1;
        background: var(--cyan) !important;
        box-shadow: 0 0 8px rgba(103,201,255,.58) !important;
    }

    /* Keep swipe natural on the entire result area. */
    .service-drawer,
    .service-drawer__panel {
        touch-action: pan-y;
    }
}


/* ===== ONEBOOK v0.17: compact mobile table-like composition ===== */

@media (max-width: 560px) {
    /* Fix the empty area inherited from the older vertical controller. */
    .service-result-nav {
        min-height: 0 !important;
        height: 0 !important;
    }

    .service-drawer {
        width: calc(100% - 24px) !important;
        margin: 12px auto 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        border-radius: 22px !important;
    }

    /* Requested structure:
       [ title                  ][ mini visual ]
       [          point / eyebrow             ]
       [             description              ]
       [              subservice              ]
    */
    .service-drawer__panel {
        position: relative !important;
        padding: 20px 24px 24px !important;
        grid-template-columns: minmax(0, 1fr) 82px !important;
        grid-template-rows: auto auto auto auto !important;
        column-gap: 14px !important;
        row-gap: 13px !important;
        align-items: center !important;
        min-height: 0 !important;
    }

    .service-drawer__panel.is-active {
        display: grid !important;
    }

    /* Let the existing wrapper disappear from layout so its children
       can be placed exactly in the requested rows. */
    .service-drawer__copy,
    .service-drawer__copy > div {
        display: contents !important;
    }

    /* Row 1 — service title at left */
    .service-drawer__copy h2 {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: center !important;
        margin: 0 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: clamp(1.42rem, 6.4vw, 1.78rem) !important;
        line-height: 1.05 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    /* Row 1 — compact 3D visual at right */
    .service-mobile-visual {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 82px !important;
        justify-self: end !important;
        align-self: center !important;
    }

    .service-mobile-visual__surface {
        width: 82px !important;
        border-radius: 15px !important;
    }

    .service-mobile-visual__surface img {
        width: 55px !important;
    }

    .service-mobile-visual__surface span {
        left: 6px !important;
        right: 6px !important;
        bottom: 7px !important;
        font-size: .43rem !important;
    }

    /* Row 2 — point / category full width */
    .service-drawer__eyebrow {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        margin: 0 !important;
        max-width: 100% !important;
        color: var(--navy) !important;
        font-size: .61rem !important;
        line-height: 1.35 !important;
        letter-spacing: .075em !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
    }

    /* Hide the normal desktop description inside the original wrapper. */
    .service-drawer__copy > div > p:last-child {
        display: none !important;
    }

    /* Row 3 — description full width */
    .service-mobile-description {
        display: block !important;
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        margin: 0 !important;
        color: var(--muted) !important;
        font-size: .9rem !important;
        line-height: 1.62 !important;
        text-align: left !important;
    }

    /* Row 4 — subservices full width */
    .service-drawer__links {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
        margin: 1px 0 0 !important;
        display: block !important;
    }

    .service-drawer__chip {
        min-height: 51px !important;
        padding: 0 2px !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(21,50,66,.10) !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: .84rem !important;
    }

    /* Sticky navigation follows the user through a long service result.
       Height/min-height are zero so it no longer creates a blank zone. */
    .service-result-nav {
        position: sticky !important;
        top: 50vh !important;
        z-index: 80 !important;
        width: 100% !important;
        min-height: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        pointer-events: none !important;
        transform: translateY(-20px);
    }

    .service-result-nav__arrow {
        position: absolute !important;
        top: 0 !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        border-radius: 50% !important;
        background: rgba(255,255,255,.95) !important;
        box-shadow:
            0 10px 26px rgba(21,50,66,.08),
            inset 0 0 0 1px rgba(255,255,255,.65) !important;
        pointer-events: auto !important;
    }

    .service-result-nav__arrow--prev {
        left: -12px !important;
    }

    .service-result-nav__arrow--next {
        right: -12px !important;
    }

    /* Remove label/count and split the four dots:
       two beneath the left arrow, two beneath the right arrow. */
    .service-result-nav__current,
    .service-result-nav__dots {
        position: static !important;
        display: contents !important;
    }

    .service-result-nav__label,
    .service-result-nav__count {
        display: none !important;
    }

    .service-result-nav__dots i {
        position: absolute !important;
        top: 46px !important;
        width: 5px !important;
        height: 5px !important;
        border-radius: 50% !important;
        opacity: .58;
        background: rgba(21,50,66,.18) !important;
        transition:
            transform .2s var(--ease),
            opacity .2s var(--ease),
            background .2s var(--ease);
    }

    .service-result-nav__dots i:nth-child(1) {
        left: 0 !important;
    }

    .service-result-nav__dots i:nth-child(2) {
        left: 9px !important;
    }

    .service-result-nav__dots i:nth-child(3) {
        right: 9px !important;
    }

    .service-result-nav__dots i:nth-child(4) {
        right: 0 !important;
    }

    .service-result-nav__dots i.is-active {
        width: 6px !important;
        height: 6px !important;
        opacity: 1 !important;
        background: var(--cyan) !important;
        box-shadow: 0 0 8px rgba(103,201,255,.58) !important;
        transform: translateY(-.5px);
    }

    /* Swipe remains enabled over the result. */
    .service-drawer,
    .service-drawer__panel {
        touch-action: pan-y;
    }
}


/* ===== ONEBOOK v0.18: remove divider gap + mobile title/image spacing ===== */

/* Remove the unused story section that creates the large blank area before
   "Tentang ONEBOOK", and remove the top divider above the about section. */
.story {
    display: none !important;
}

.about {
    border-top: 0 !important;
    padding-top: clamp(28px, 4vw, 48px) !important;
}

/* Mobile: give the title and mini visual more breathing room */
@media (max-width: 560px) {
    .service-drawer {
        margin-top: 8px !important;
    }

    .service-drawer__panel {
        grid-template-columns: minmax(0, 1fr) 70px !important;
        column-gap: 18px !important;
        row-gap: 12px !important;
        padding: 20px 28px 24px !important;
    }

    .service-drawer__copy h2 {
        padding-right: 8px !important;
        font-size: clamp(1.34rem, 5.8vw, 1.7rem) !important;
        line-height: 1.08 !important;
    }

    .service-mobile-visual {
        width: 70px !important;
        margin-top: 2px !important;
    }

    .service-mobile-visual__surface {
        width: 70px !important;
        border-radius: 14px !important;
    }

    .service-mobile-visual__surface img {
        width: 48px !important;
    }

    .service-mobile-visual__surface span {
        left: 5px !important;
        right: 5px !important;
        bottom: 6px !important;
        font-size: .40rem !important;
        letter-spacing: .16em !important;
    }
}


/* ===== ONEBOOK v0.19: service panel simplification + stronger mobile visual ===== */

/* 1) Sub-services are now plain list items (not fake links). */
.service-drawer__chip {
    cursor: default !important;
    text-decoration: none !important;
}

.service-drawer__chip span:last-child {
    display: none !important;
}

/* 2) On desktop + tablet, remove the repeated eyebrow above the title.
      The category cue remains only inside the floating service card. */
@media (min-width: 561px) {
    .service-drawer__eyebrow {
        display: none !important;
    }

    .service-drawer__copy h2 {
        margin-top: 0 !important;
    }

    /* Also tighten the gap before the About section a bit more,
       so the section below does not feel like something is missing. */
    .about {
        padding-top: clamp(22px, 3vw, 36px) !important;
    }
}

/* 3) Mobile: make the mini service visual feel more premium / epic,
      while keeping it safely separated from the title. */
@media (max-width: 560px) {
    .service-drawer__panel {
        grid-template-columns: minmax(0, 1fr) 96px !important;
        column-gap: 18px !important;
        row-gap: 14px !important;
        padding: 22px 18px 24px !important;
    }

    .service-drawer__copy h2 {
        font-size: clamp(1.48rem, 7vw, 2rem) !important;
        line-height: 1.04 !important;
        margin: 0 !important;
    }

    .service-mobile-visual {
        width: 96px !important;
        justify-self: end !important;
        align-self: start !important;
        margin-top: 1px !important;
    }

    .service-mobile-visual__surface {
        width: 96px !important;
        border-radius: 18px !important;
        background:
            linear-gradient(145deg, rgba(255,255,255,.98), rgba(234,246,252,.94)) !important;
        box-shadow:
            0 14px 32px rgba(21,50,66,.11),
            0 2px 8px rgba(103,201,255,.12),
            inset 0 0 0 1px rgba(255,255,255,.84) !important;
        transform: perspective(760px) rotateX(56deg) rotateZ(-6deg) translateY(-1px) !important;
    }

    .service-drawer__panel[data-drawer="tax"] .service-mobile-visual__surface {
        transform: perspective(760px) rotateX(56deg) rotateZ(-5deg) translateY(-1px) !important;
    }

    .service-drawer__panel[data-drawer="bookkeeping"] .service-mobile-visual__surface {
        transform: perspective(760px) rotateX(56deg) rotateZ(4deg) translateY(-1px) !important;
    }

    .service-drawer__panel[data-drawer="erp"] .service-mobile-visual__surface {
        transform: perspective(760px) rotateX(56deg) rotateZ(-3deg) translateY(-1px) !important;
    }

    .service-drawer__panel[data-drawer="automation"] .service-mobile-visual__surface {
        transform: perspective(760px) rotateX(56deg) rotateZ(5deg) translateY(-1px) !important;
    }

    .service-mobile-visual__surface img {
        width: 61px !important;
        top: 27% !important;
        opacity: .96 !important;
        filter: drop-shadow(0 2px 4px rgba(21,50,66,.08));
    }

    .service-mobile-visual__surface span {
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        font-size: .48rem !important;
        letter-spacing: .11em !important;
        color: rgba(21,50,66,.74) !important;
    }

    .service-mobile-visual__surface i {
        right: 8px !important;
        top: 8px !important;
        width: 7px !important;
        height: 7px !important;
        box-shadow: 0 0 10px rgba(103,201,255,.52) !important;
    }

    /* keep the mobile eyebrow, but make it calmer */
    .service-drawer__eyebrow {
        margin: 0 0 8px !important;
        font-size: .62rem !important;
        line-height: 1.35 !important;
        letter-spacing: .085em !important;
        color: var(--navy) !important;
    }

    /* subservice list should look like a clean list, not tappable link rows */
    .service-drawer__links {
        margin-top: 2px !important;
    }

    .service-drawer__chip {
        min-height: 48px !important;
        padding: 0 2px !important;
        display: flex !important;
        align-items: center !important;
    }
}


/* ===== ONEBOOK v0.20: restore story section, plain subservice list, richer mobile mini-card ===== */

/* Restore the section before "Tentang ONEBOOK" that was removed earlier. */
.story {
    display: block !important;
    padding-top: clamp(26px, 4vw, 46px) !important;
    padding-bottom: clamp(30px, 5vw, 64px) !important;
}

.about {
    padding-top: clamp(20px, 3.2vw, 34px) !important;
}

/* Plain list behavior for sub-services */
.service-drawer__chip {
    cursor: default !important;
    text-decoration: none !important;
    pointer-events: none !important;
}

.service-drawer__chip span:last-child {
    display: none !important;
}

/* Desktop + tablet: eyebrow only on the floating service card, not repeated again above title */
@media (min-width: 561px) {
    .service-drawer__eyebrow {
        display: none !important;
    }

    .service-drawer__copy h2 {
        margin-top: 0 !important;
    }
}

/* Mobile mini-card: make it feel more like a small 3D object */
@keyframes onebookMiniFloat {
    0%   { transform: perspective(760px) rotateX(58deg) rotateZ(-5deg) translate3d(0,0,0); }
    25%  { transform: perspective(760px) rotateX(60deg) rotateZ(-3deg) translate3d(0,-3px,0); }
    50%  { transform: perspective(760px) rotateX(57deg) rotateZ(-6deg) translate3d(0,0,0); }
    75%  { transform: perspective(760px) rotateX(61deg) rotateZ(-2deg) translate3d(0,-2px,0); }
    100% { transform: perspective(760px) rotateX(58deg) rotateZ(-5deg) translate3d(0,0,0); }
}

@keyframes onebookMiniPulse {
    0%, 100% { opacity: .22; transform: scale(1); }
    50% { opacity: .38; transform: scale(1.07); }
}

.service-mobile-visual__surface {
    position: relative;
    overflow: visible !important;
}

.service-mobile-visual__surface::before {
    content: "";
    position: absolute;
    inset: 10% -4% -10% -4%;
    border-radius: 22px;
    background: radial-gradient(circle at 50% 56%, rgba(103,201,255,.22), transparent 68%);
    filter: blur(12px);
    z-index: -1;
    animation: onebookMiniPulse 5s ease-in-out infinite;
}

@media (max-width: 560px) {
    .service-mobile-visual {
        width: 100px !important;
    }

    .service-mobile-visual__surface {
        width: 100px !important;
        border-radius: 19px !important;
        background:
            linear-gradient(145deg, rgba(255,255,255,.99), rgba(233,246,252,.96)) !important;
        box-shadow:
            0 18px 36px rgba(21,50,66,.10),
            0 5px 14px rgba(103,201,255,.14),
            inset 0 0 0 1px rgba(255,255,255,.92) !important;
        animation: onebookMiniFloat 6.2s ease-in-out infinite !important;
        transform-style: preserve-3d;
    }

    .service-drawer__panel[data-drawer="bookkeeping"] .service-mobile-visual__surface {
        animation-duration: 6.8s !important;
    }
    .service-drawer__panel[data-drawer="erp"] .service-mobile-visual__surface {
        animation-duration: 5.9s !important;
    }
    .service-drawer__panel[data-drawer="automation"] .service-mobile-visual__surface {
        animation-duration: 6.4s !important;
    }

    .service-mobile-visual__surface img {
        width: 63px !important;
        top: 26% !important;
        opacity: .97 !important;
        filter: drop-shadow(0 2px 5px rgba(21,50,66,.09));
    }

    .service-mobile-visual__surface span {
        bottom: 8px !important;
        font-size: .49rem !important;
        letter-spacing: .12em !important;
        color: rgba(21,50,66,.78) !important;
    }

    .service-mobile-visual__surface i {
        width: 7px !important;
        height: 7px !important;
        top: 8px !important;
        right: 8px !important;
        box-shadow: 0 0 12px rgba(103,201,255,.62) !important;
    }

    /* keep the visual clear but not oversized */
    .service-drawer__panel {
        grid-template-columns: minmax(0,1fr) 100px !important;
    }
}


/* ===== ONEBOOK v0.21: How ONEBOOK Connects + touch-reactive mobile 3D card ===== */

/* ---------------------------------------------------------
   HOW ONEBOOK CONNECTS
   Replaces the old repeated service storytelling section.
--------------------------------------------------------- */

.story--connect {
    display: block !important;
    padding-top: clamp(34px, 5vw, 68px) !important;
    padding-bottom: clamp(42px, 6vw, 86px) !important;
    overflow: hidden;
}

.connect-flow__header {
    width: min(100%, 920px);
    margin: 0 auto clamp(34px, 5vw, 58px);
    text-align: center;
}

.connect-flow__header .eyebrow {
    margin: 0 0 14px;
}

.connect-flow__header h2 {
    margin: 0;
    font-size: clamp(1.7rem, 3vw, 3.2rem);
    line-height: 1.08;
    letter-spacing: -.035em;
    font-weight: 400;
}

.connect-flow {
    position: relative;
    width: min(100%, 1180px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2.4vw, 30px);
}

.connect-flow__step {
    position: relative;
    min-height: 220px;
    padding: 28px 22px 24px;
    border: 1px solid rgba(21,50,66,.10);
    border-radius: 24px;
    background:
        linear-gradient(155deg, rgba(255,255,255,.94), rgba(239,248,252,.66));
    box-shadow:
        0 20px 50px rgba(21,50,66,.045),
        inset 0 0 0 1px rgba(255,255,255,.58);
    backdrop-filter: blur(14px);
}

.connect-flow__index {
    display: block;
    margin-bottom: 42px;
    color: rgba(21,50,66,.42);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.connect-flow__step h3 {
    margin: 0;
    color: var(--navy);
    font-size: 1rem;
    letter-spacing: .025em;
}

.connect-flow__step p {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.58;
}

.connect-flow__node {
    position: absolute;
    left: 22px;
    top: 62px;
    z-index: 3;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(21,50,66,.17);
    box-shadow: 0 0 0 7px rgba(255,255,255,.88);
}

.connect-flow__step:first-child .connect-flow__node {
    background: var(--cyan);
    box-shadow:
        0 0 0 7px rgba(255,255,255,.9),
        0 0 18px rgba(103,201,255,.46);
}

.connect-flow__line {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 67px;
    height: 1px;
    background: rgba(21,50,66,.11);
    pointer-events: none;
}

.connect-flow__line span {
    display: block;
    width: 17%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    box-shadow: 0 0 8px rgba(103,201,255,.28);
    animation: onebookConnectFlow 5.5s ease-in-out infinite;
}

@keyframes onebookConnectFlow {
    0%   { transform: translateX(-10%); opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translateX(500%); opacity: 0; }
}

/* Sub-services: preserve v0.19 visual language, but never behave like links. */
.service-drawer__chip {
    cursor: default !important;
    pointer-events: none !important;
    text-decoration: none !important;
}

/* ---------------------------------------------------------
   Touch-reactive 3D mobile mini-card
--------------------------------------------------------- */

@media (max-width: 560px) {
    .service-mobile-visual {
        perspective: 900px !important;
    }

    .service-mobile-visual__surface {
        --mini-rx: 0deg;
        --mini-ry: 0deg;
        --mini-tx: 0px;
        --mini-ty: 0px;

        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
        cursor: grab;

        transform:
            perspective(900px)
            rotateX(calc(58deg + var(--mini-rx)))
            rotateY(var(--mini-ry))
            rotateZ(-5deg)
            translate3d(var(--mini-tx), var(--mini-ty), 0) !important;

        transition:
            transform .42s cubic-bezier(.2,.8,.2,1),
            box-shadow .28s ease,
            border-color .28s ease !important;

        animation: none !important;
        will-change: transform;
    }

    .service-drawer__panel[data-drawer="bookkeeping"] .service-mobile-visual__surface {
        transform:
            perspective(900px)
            rotateX(calc(58deg + var(--mini-rx)))
            rotateY(var(--mini-ry))
            rotateZ(4deg)
            translate3d(var(--mini-tx), var(--mini-ty), 0) !important;
    }

    .service-drawer__panel[data-drawer="erp"] .service-mobile-visual__surface {
        transform:
            perspective(900px)
            rotateX(calc(58deg + var(--mini-rx)))
            rotateY(var(--mini-ry))
            rotateZ(-3deg)
            translate3d(var(--mini-tx), var(--mini-ty), 0) !important;
    }

    .service-drawer__panel[data-drawer="automation"] .service-mobile-visual__surface {
        transform:
            perspective(900px)
            rotateX(calc(58deg + var(--mini-rx)))
            rotateY(var(--mini-ry))
            rotateZ(5deg)
            translate3d(var(--mini-tx), var(--mini-ty), 0) !important;
    }

    .service-mobile-visual__surface.is-touching {
        cursor: grabbing;
        transition:
            transform .04s linear,
            box-shadow .18s ease !important;
        box-shadow:
            0 24px 48px rgba(21,50,66,.15),
            0 8px 20px rgba(103,201,255,.18),
            inset 0 0 0 1px rgba(255,255,255,.92) !important;
    }
}

@media (min-width: 561px) and (max-width: 820px) {
    .connect-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .connect-flow__line {
        display: none;
    }

    .connect-flow__step {
        min-height: 180px;
    }

    .connect-flow__index {
        margin-bottom: 28px;
    }
}

@media (max-width: 560px) {
    .story--connect {
        padding-top: 30px !important;
        padding-bottom: 44px !important;
    }

    .connect-flow__header {
        margin-bottom: 24px;
        text-align: left;
    }

    .connect-flow__header h2 {
        font-size: 1.65rem;
        line-height: 1.12;
    }

    .connect-flow {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .connect-flow__line {
        display: none;
    }

    .connect-flow__step {
        min-height: 0;
        padding: 20px 20px 18px 52px;
        border-radius: 20px;
    }

    .connect-flow__index {
        position: absolute;
        left: 18px;
        top: 22px;
        margin: 0;
    }

    .connect-flow__node {
        left: 20px;
        top: 49px;
        width: 7px;
        height: 7px;
        box-shadow: 0 0 0 5px rgba(255,255,255,.9);
    }

    .connect-flow__step h3 {
        font-size: .92rem;
    }

    .connect-flow__step p {
        font-size: .83rem;
        line-height: 1.54;
    }
}


/* ===== ONEBOOK v0.22: Vertical Connect Flow + stronger mobile mini-card interaction ===== */

.story--connect {
    padding-top: clamp(34px, 5vw, 74px) !important;
    padding-bottom: clamp(34px, 5vw, 76px) !important;
}

.connect-vertical {
    display: grid;
    grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 70px);
    align-items: start;
}

.connect-vertical__left {
    position: relative;
}

.connect-vertical__sticky {
    position: sticky;
    top: 108px;
    min-height: 520px;
    padding: 26px 26px 26px 32px;
    border: 1px solid rgba(21,50,66,.10);
    border-radius: 28px;
    background: linear-gradient(155deg, rgba(255,255,255,.95), rgba(239,248,252,.74));
    box-shadow: 0 20px 50px rgba(21,50,66,.045), inset 0 0 0 1px rgba(255,255,255,.58);
    backdrop-filter: blur(14px);
    overflow: hidden;
}

.connect-vertical__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid rgba(103,201,255,.34);
    background: rgba(255,255,255,.78);
    color: var(--navy);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .18em;
}

.connect-vertical__sticky h2 {
    margin: 18px 0 16px;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: .98;
    letter-spacing: -.04em;
    font-weight: 400;
}

.connect-vertical__sticky p {
    position: relative;
    z-index: 2;
    max-width: 26ch;
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.72;
}

.connect-vertical__energy {
    position: absolute;
    left: 32px;
    top: 168px;
    bottom: 28px;
    width: 18px;
}

.connect-vertical__energy-line {
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, rgba(21,50,66,.10), rgba(21,50,66,.06));
}

.connect-vertical__energy-spark {
    position: absolute;
    left: 4px;
    width: 9px;
    height: 64px;
    border-radius: 999px;
    background: linear-gradient(180deg, transparent, rgba(103,201,255,.95), transparent);
    filter: blur(.2px);
    box-shadow: 0 0 14px rgba(103,201,255,.38);
    animation: onebookVerticalEnergy 4.8s ease-in-out infinite;
}

@keyframes onebookVerticalEnergy {
    0% { transform: translateY(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(calc(100% - 64px)); opacity: 0; }
}

.connect-vertical__right {
    position: relative;
    padding-left: 34px;
}

.connect-vertical__right::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: linear-gradient(180deg, rgba(21,50,66,.10), rgba(21,50,66,.04));
}

.connect-vertical__step {
    position: relative;
    min-height: 220px;
    margin-bottom: 20px;
    padding: 28px 26px 24px;
    border: 1px solid rgba(21,50,66,.10);
    border-radius: 26px;
    background: linear-gradient(155deg, rgba(255,255,255,.94), rgba(239,248,252,.64));
    box-shadow: 0 20px 50px rgba(21,50,66,.04), inset 0 0 0 1px rgba(255,255,255,.56);
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.connect-vertical__step:last-child {
    margin-bottom: 0;
}

.connect-vertical__step::before {
    content: "";
    position: absolute;
    left: -31px;
    top: 34px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(21,50,66,.17);
    box-shadow: 0 0 0 6px rgba(255,255,255,.92);
}

.connect-vertical__step.is-active {
    border-color: rgba(103,201,255,.34);
    transform: translateX(4px);
    box-shadow: 0 24px 54px rgba(21,50,66,.065), 0 0 0 1px rgba(103,201,255,.14);
}

.connect-vertical__step.is-active::before {
    background: var(--cyan);
    box-shadow: 0 0 0 6px rgba(255,255,255,.94), 0 0 16px rgba(103,201,255,.34);
}

.connect-vertical__step-index {
    display: block;
    margin-bottom: 16px;
    color: rgba(21,50,66,.42);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.connect-vertical__step h3 {
    margin: 0;
    color: var(--navy);
    font-size: 1.05rem;
    letter-spacing: .02em;
}

.connect-vertical__step p {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: .93rem;
    line-height: 1.65;
}

/* Make sure the mini-card can always capture touch directly, including TAX */
.service-mobile-visual__surface {
    pointer-events: auto !important;
    z-index: 3;
}

.service-mobile-visual__surface img,
.service-mobile-visual__surface span,
.service-mobile-visual__surface i,
.service-mobile-visual__surface::before {
    pointer-events: none !important;
}

@media (min-width: 821px) {
    .connect-vertical__right {
        padding-top: 42px;
    }
}

@media (max-width: 820px) {
    .connect-vertical {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .connect-vertical__sticky {
        position: sticky;
        top: 88px;
        min-height: 0;
        padding: 22px 22px 22px 26px;
    }

    .connect-vertical__sticky h2 {
        font-size: clamp(1.7rem, 5vw, 2.5rem);
    }

    .connect-vertical__sticky p {
        max-width: none;
        font-size: .95rem;
        line-height: 1.66;
    }

    .connect-vertical__energy {
        top: 148px;
        bottom: 18px;
        left: auto;
        right: 18px;
    }

    .connect-vertical__right {
        padding-left: 24px;
    }

    .connect-vertical__right::before {
        left: 7px;
    }

    .connect-vertical__step {
        min-height: 0;
        padding: 22px 20px 20px;
        margin-bottom: 14px;
    }

    .connect-vertical__step::before {
        left: -22px;
        top: 28px;
    }
}

@media (max-width: 560px) {
    .story--connect {
        padding-top: 28px !important;
        padding-bottom: 42px !important;
    }

    .connect-vertical__left .eyebrow {
        margin-bottom: 12px;
    }

    .connect-vertical__sticky {
        top: 76px;
        padding: 18px 18px 18px 20px;
        border-radius: 22px;
    }

    .connect-vertical__index {
        min-width: 48px;
        height: 28px;
        font-size: .64rem;
    }

    .connect-vertical__sticky h2 {
        margin: 12px 0 10px;
        font-size: 1.8rem;
    }

    .connect-vertical__sticky p {
        font-size: .9rem;
        line-height: 1.58;
    }

    .connect-vertical__energy {
        display: none;
    }

    .connect-vertical__right {
        padding-left: 18px;
    }

    .connect-vertical__right::before {
        left: 6px;
    }

    .connect-vertical__step {
        padding: 18px 16px 16px;
        border-radius: 20px;
    }

    .connect-vertical__step::before {
        left: -17px;
        top: 24px;
        width: 8px;
        height: 8px;
        box-shadow: 0 0 0 5px rgba(255,255,255,.92);
    }

    .connect-vertical__step-index {
        margin-bottom: 10px;
        font-size: .66rem;
    }

    .connect-vertical__step h3 {
        font-size: .96rem;
    }

    .connect-vertical__step p {
        margin-top: 8px;
        font-size: .86rem;
        line-height: 1.56;
    }
}


/* ===== ONEBOOK v0.23: restore simple vertical connect flow + fix subservice text + stronger TAX mini-card ===== */

/* 1) Subservice text must always stay visible in every view. */
.service-drawer__chip span,
.service-drawer__chip span:last-child {
    display: inline !important;
}

/* 2) Simpler vertical "How Onebook Connects" like earlier versions.
      Left = changing title, Right = explanation cards only. */
.story--connect {
    padding-top: clamp(30px, 4vw, 52px) !important;
    padding-bottom: clamp(30px, 4vw, 56px) !important;
}

.connect-simple {
    display: grid;
    grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
    gap: clamp(24px, 3.8vw, 56px);
    align-items: start;
}

.connect-simple__left {
    position: relative;
}

.connect-simple__sticky {
    position: sticky;
    top: 108px;
    min-height: 280px;
    padding: 18px 18px 18px 0;
}

.connect-simple__sticky h2 {
    position: relative;
    z-index: 2;
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.15rem);
    line-height: .98;
    letter-spacing: -.04em;
    font-weight: 400;
    max-width: 10ch;
}

.connect-simple__energy {
    position: absolute;
    left: 4px;
    top: 72px;
    bottom: 10px;
    width: 18px;
}

.connect-simple__energy-line {
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, rgba(21,50,66,.10), rgba(21,50,66,.04));
}

.connect-simple__energy-spark {
    position: absolute;
    left: 4px;
    width: 9px;
    height: 60px;
    border-radius: 999px;
    background: linear-gradient(180deg, transparent, rgba(103,201,255,.92), transparent);
    box-shadow: 0 0 14px rgba(103,201,255,.34);
    animation: onebookSimpleEnergy 4.6s ease-in-out infinite;
}

@keyframes onebookSimpleEnergy {
    0% { transform: translateY(0); opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { transform: translateY(calc(100% - 60px)); opacity: 0; }
}

.connect-simple__right {
    position: relative;
    padding-left: 28px;
}

.connect-simple__right::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: linear-gradient(180deg, rgba(21,50,66,.10), rgba(21,50,66,.04));
}

.connect-simple__step {
    position: relative;
    min-height: 180px;
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    padding: 34px 30px;
    border-radius: 28px;
    border: 1px solid rgba(21,50,66,.10);
    background: linear-gradient(155deg, rgba(255,255,255,.95), rgba(239,248,252,.74));
    box-shadow: 0 20px 50px rgba(21,50,66,.045), inset 0 0 0 1px rgba(255,255,255,.56);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, opacity .3s ease;
}

.connect-simple__step:last-child { margin-bottom: 0; }

.connect-simple__step::before {
    content: "";
    position: absolute;
    left: -24px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(21,50,66,.16);
    box-shadow: 0 0 0 6px rgba(255,255,255,.94);
    transform: translateY(-50%);
}

.connect-simple__step.is-active {
    border-color: rgba(103,201,255,.34);
    box-shadow: 0 22px 54px rgba(21,50,66,.06), 0 0 0 1px rgba(103,201,255,.14);
    transform: translateX(4px);
}

.connect-simple__step.is-active::before {
    background: var(--cyan);
    box-shadow: 0 0 0 6px rgba(255,255,255,.95), 0 0 16px rgba(103,201,255,.34);
}

.connect-simple__step p {
    margin: 0;
    color: var(--muted);
    font-size: clamp(1rem, 1.35vw, 1.22rem);
    line-height: 1.78;
    max-width: 50ch;
}

/* 3) Ensure the mobile mini-card is always draggable, including TAX. */
.service-mobile-visual,
.service-mobile-visual__surface {
    touch-action: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

.service-mobile-visual__surface {
    pointer-events: auto !important;
    position: relative;
    z-index: 3;
}

.service-drawer__panel[data-drawer="tax"] .service-mobile-visual,
.service-drawer__panel[data-drawer="tax"] .service-mobile-visual__surface {
    pointer-events: auto !important;
}

@media (max-width: 820px) {
    .connect-simple {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .connect-simple__sticky {
        position: sticky;
        top: 88px;
        min-height: 0;
        padding: 8px 0 10px;
    }

    .connect-simple__sticky h2 {
        max-width: none;
        font-size: clamp(1.7rem, 6vw, 2.3rem);
    }

    .connect-simple__energy {
        display: none;
    }

    .connect-simple__right {
        padding-left: 18px;
    }

    .connect-simple__right::before {
        left: 6px;
    }

    .connect-simple__step {
        min-height: 0;
        padding: 22px 18px;
        margin-bottom: 14px;
        border-radius: 22px;
    }

    .connect-simple__step::before {
        left: -16px;
        width: 8px;
        height: 8px;
        box-shadow: 0 0 0 5px rgba(255,255,255,.94);
    }

    .connect-simple__step p {
        font-size: .95rem;
        line-height: 1.68;
    }
}

@media (max-width: 560px) {
    .connect-simple__sticky {
        position: relative;
        top: auto;
        padding: 2px 0 4px;
    }

    .connect-simple__sticky h2 {
        font-size: 1.52rem;
        line-height: 1.02;
    }

    .connect-simple__right {
        padding-left: 14px;
    }

    .connect-simple__right::before {
        left: 4px;
    }

    .connect-simple__step {
        padding: 18px 14px;
        border-radius: 18px;
    }

    .connect-simple__step::before {
        left: -13px;
        width: 7px;
        height: 7px;
        box-shadow: 0 0 0 4px rgba(255,255,255,.94);
    }

    .connect-simple__step p {
        font-size: .9rem;
        line-height: 1.6;
    }
}


/* ===== ONEBOOK v0.24: true sticky left scrollytelling + TAX mini-card drag fix ===== */

/* Keep the left side physically fixed while the right column scrolls.
   The parent must stretch to the full height of the right-side content
   or position:sticky has no scroll range. */
@media (min-width: 821px) {
    .connect-simple {
        align-items: stretch !important;
    }

    .connect-simple__left {
        position: relative;
        align-self: stretch !important;
        min-height: 100%;
    }

    .connect-simple__sticky {
        position: sticky !important;
        top: 108px !important;
        min-height: 300px;
        padding-top: 8px !important;
    }

    .connect-simple__sticky h2 {
        margin-top: 0 !important;
    }

    /* Keep the flowing-energy effect vertical beside the fixed title. */
    .connect-simple__energy {
        top: 78px !important;
        bottom: 12px !important;
    }
}

/* Remove any residual spacing that belonged to the removed section label. */
.connect-simple__left > .eyebrow {
    display: none !important;
}

/* TAX drag bug:
   An older TAX-specific !important transform had higher specificity than
   the generic interactive transform, so CSS variables changed but the
   TAX card did not visually move. Re-declare TAX with the interactive
   variables at the same/higher specificity. */
@media (max-width: 560px) {
    .service-drawer__panel[data-drawer="tax"] .service-mobile-visual__surface {
        --mini-rx: 0deg;
        --mini-ry: 0deg;
        --mini-tx: 0px;
        --mini-ty: 0px;

        transform:
            perspective(900px)
            rotateX(calc(58deg + var(--mini-rx)))
            rotateY(var(--mini-ry))
            rotateZ(-5deg)
            translate3d(var(--mini-tx), var(--mini-ty), 0) !important;

        touch-action: none !important;
        pointer-events: auto !important;
        will-change: transform;
    }

    .service-drawer__panel[data-drawer="tax"] .service-mobile-visual__surface.is-touching {
        transition:
            transform .04s linear,
            box-shadow .18s ease !important;
    }
}


/* ===== ONEBOOK v0.25: centered sticky title + clearer state changes ===== */

/* Desktop: keep the left title visually centered in the viewport,
   instead of appearing stuck to the upper-left corner. */
@media (min-width: 821px) {
    .connect-simple {
        align-items: stretch !important;
        gap: clamp(54px, 6vw, 92px) !important;
    }

    .connect-simple__left {
        position: relative !important;
        align-self: stretch !important;
    }

    .connect-simple__sticky {
        position: sticky !important;
        top: 50vh !important;
        min-height: 0 !important;
        padding: 0 18px 0 0 !important;
        transform: translateY(-50%);
    }

    .connect-simple__sticky h2 {
        margin: 0 !important;
        max-width: 9ch !important;
        font-size: clamp(2.4rem, 4.6vw, 4rem) !important;
        line-height: .98 !important;
    }

    /* More breathing room between right-side states,
       so the left title change is visually obvious. */
    .connect-simple__step {
        min-height: 260px !important;
        margin-bottom: 44px !important;
        padding: 42px 36px !important;
    }

    .connect-simple__step:last-child {
        margin-bottom: 0 !important;
    }

    .connect-simple__right {
        padding-top: 8vh !important;
        padding-bottom: 8vh !important;
    }

    /* Energy line remains vertical and visually tied to the sticky title. */
    .connect-simple__energy {
        left: 6px !important;
        top: calc(100% + 18px) !important;
        bottom: auto !important;
        height: 180px !important;
    }

    .connect-simple__energy-line {
        top: 0 !important;
        bottom: auto !important;
        height: 180px !important;
    }

    .connect-simple__energy-spark {
        animation-duration: 4.2s !important;
    }
}

/* A subtle title transition makes state changes easier to notice. */
@keyframes onebookConnectTitleSwitch {
    0% {
        opacity: .28;
        transform: translateY(9px);
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.connect-simple__sticky h2.is-switching {
    animation: onebookConnectTitleSwitch .34s cubic-bezier(.2,.8,.2,1);
}

/* Tablet: keep the sticky title high enough to stay readable but not glued to the top. */
@media (min-width: 561px) and (max-width: 820px) {
    .connect-simple__sticky {
        position: sticky !important;
        top: 34vh !important;
        transform: translateY(-30%);
    }

    .connect-simple__step {
        min-height: 190px !important;
        margin-bottom: 26px !important;
    }
}


/* ===== ONEBOOK v0.26: reliable sticky left title ===== */

/* The v0.25 translateY(-50%) centering could move the sticky content above
   the viewport while the right-side cards continued scrolling.
   Use a fixed viewport-relative top offset instead, without transform. */
@media (min-width: 821px) {
    .connect-simple {
        align-items: stretch !important;
    }

    .connect-simple__left {
        position: relative !important;
        align-self: stretch !important;
        min-height: 100% !important;
    }

    .connect-simple__sticky {
        position: sticky !important;
        top: 32vh !important;
        transform: none !important;
        min-height: 260px !important;
        padding: 0 18px 0 0 !important;
        z-index: 3;
    }

    .connect-simple__sticky h2 {
        margin: 0 !important;
        max-width: 10ch !important;
    }

    .connect-simple__energy {
        left: 6px !important;
        top: 92px !important;
        bottom: auto !important;
        height: 170px !important;
    }

    .connect-simple__energy-line {
        height: 170px !important;
    }

    /* Ensure the right column provides enough scroll range for sticky behavior. */
    .connect-simple__right {
        padding-top: 4vh !important;
        padding-bottom: 10vh !important;
    }
}

/* Tablet: same principle; no transform-based sticky positioning. */
@media (min-width: 561px) and (max-width: 820px) {
    .connect-simple__sticky {
        position: sticky !important;
        top: 24vh !important;
        transform: none !important;
    }
}


/* ===== ONEBOOK v0.27: robust sticky left column + better service-card sizing ===== */

/* Sticky was still being affected by old overflow rules from the Story section.
   Remove clipping completely for this section. */
.story.story--connect,
.story--connect {
    overflow: visible !important;
}

/* DESKTOP:
   Make the whole left column sticky instead of only the title box.
   This is much more reliable because the right column defines the section height. */
@media (min-width: 821px) {
    .connect-simple {
        align-items: start !important;
    }

    .connect-simple__left {
        position: sticky !important;
        top: 78px !important;
        height: calc(100vh - 78px) !important;
        align-self: start !important;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        z-index: 4;
    }

    .connect-simple__sticky {
        position: relative !important;
        top: auto !important;
        transform: none !important;
        width: 100%;
        min-height: 310px !important;
        padding: 0 22px 0 0 !important;
    }

    .connect-simple__sticky h2 {
        margin: 0 !important;
        max-width: 10ch !important;
        font-size: clamp(2.4rem, 4.6vw, 4rem) !important;
        line-height: .98 !important;
    }

    .connect-simple__energy {
        left: 7px !important;
        top: 104px !important;
        bottom: auto !important;
        height: 180px !important;
    }

    .connect-simple__energy-line {
        height: 180px !important;
    }

    /* Give enough scroll distance for each state to feel distinct. */
    .connect-simple__right {
        padding-top: 6vh !important;
        padding-bottom: 10vh !important;
    }

    .connect-simple__step {
        min-height: 270px !important;
        margin-bottom: 46px !important;
        padding: 42px 38px !important;
    }

    /* Slightly larger floating service cards on desktop,
       particularly helpful around 820–1100 px widths. */
    .service-module {
        width: clamp(172px, 16vw, 220px) !important;
        min-height: 150px !important;
        padding: 21px !important;
    }

    .service-module__label {
        font-size: clamp(.84rem, .92vw, 1rem) !important;
    }

    .service-module__mini {
        font-size: clamp(.59rem, .64vw, .68rem) !important;
        line-height: 1.22 !important;
    }
}

/* TABLET:
   Enlarge all four service cards a little so Bookkeeping does not feel cramped,
   while preserving the approved tablet composition. */
@media (min-width: 561px) and (max-width: 820px) {
    .service-module {
        width: clamp(138px, 22vw, 160px) !important;
        min-height: 84px !important;
        padding: 11px 12px 10px !important;
    }

    .service-module__label {
        font-size: .72rem !important;
        line-height: 1.12 !important;
    }

    .service-module__mini {
        font-size: .51rem !important;
        line-height: 1.18 !important;
    }

    /* Keep slightly more breathing room from the viewport edges. */
    .service-module:nth-child(1) {
        left: 5% !important;
    }

    .service-module:nth-child(2) {
        left: 7% !important;
    }

    .service-module:nth-child(3) {
        right: 5% !important;
    }

    .service-module:nth-child(4) {
        right: 7% !important;
    }
}


/* ===== ONEBOOK v0.28: v0.16-style sticky + balanced service-card size ===== */

/* IMPORTANT:
   Return to the proven v0.16 sticky pattern:
   - left COLUMN stretches with the section
   - only its inner content is sticky
   - sticky content has a 76vh visual stage
   - right steps each consume ~80vh
   This makes the left side feel truly stationary while the right side moves.
*/
@media (min-width: 821px) {
    .story.story--connect,
    .story--connect {
        overflow: visible !important;
    }

    .connect-simple {
        align-items: stretch !important;
        grid-template-columns: minmax(330px, .9fr) minmax(0, 1.1fr) !important;
        gap: clamp(44px, 7vw, 104px) !important;
    }

    .connect-simple__left {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        min-height: 0 !important;
        align-self: stretch !important;
        display: block !important;
    }

    .connect-simple__sticky {
        position: sticky !important;
        top: 104px !important;
        min-height: 76vh !important;
        height: auto !important;
        transform: none !important;

        display: flex !important;
        flex-direction: column;
        justify-content: center !important;
        align-items: flex-start !important;

        padding:
            0
            clamp(18px, 2vw, 30px)
            0
            clamp(28px, 4vw, 64px) !important;

        z-index: 4;
    }

    .connect-simple__sticky h2 {
        margin: 0 !important;
        max-width: 9ch !important;
        font-size: clamp(2.35rem, 4.4vw, 3.85rem) !important;
        line-height: .98 !important;
    }

    .connect-simple__energy {
        left: clamp(32px, 4vw, 68px) !important;
        top: calc(50% + 68px) !important;
        bottom: auto !important;
        height: 170px !important;
    }

    .connect-simple__energy-line {
        height: 170px !important;
    }

    .connect-simple__right {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .connect-simple__step {
        min-height: 80vh !important;
        margin-bottom: 0 !important;
        padding: 42px 38px !important;

        display: flex !important;
        align-items: center !important;
    }

    .connect-simple__step p {
        max-width: 48ch !important;
    }

    /* Floating service modules: smaller than v0.27, but still roomier than older builds. */
    .service-module {
        width: clamp(148px, 14.5vw, 188px) !important;
        min-height: 118px !important;
        padding: 16px 17px 15px !important;
    }

    .service-module__label {
        font-size: clamp(.82rem, .86vw, .92rem) !important;
        line-height: 1.08 !important;
    }

    .service-module__mini {
        margin-top: 7px !important;
        font-size: clamp(.57rem, .6vw, .64rem) !important;
        line-height: 1.24 !important;
    }

    /* Give Bookkeeping / ERP only a little extra height for two-line copy,
       without making the whole set look oversized. */
    .service-module:nth-child(2),
    .service-module:nth-child(3) {
        min-height: 124px !important;
    }
}

/* Tablet: trim v0.27's enlarged boxes to a cleaner middle size. */
@media (min-width: 561px) and (max-width: 820px) {
    .service-module {
        width: clamp(132px, 20vw, 150px) !important;
        min-height: 78px !important;
        padding: 10px 11px 9px !important;
    }

    .service-module__label {
        font-size: .68rem !important;
        line-height: 1.1 !important;
    }

    .service-module__mini {
        font-size: .49rem !important;
        line-height: 1.16 !important;
    }

    .service-module:nth-child(2),
    .service-module:nth-child(3) {
        min-height: 84px !important;
    }
}


/* ===== ONEBOOK v0.29
   Desktop: rail -> connector -> floating explanation panel
   Tablet : horizontal sticky title + full-width explanation stages
   Mobile : intentionally unchanged
============================================================= */

/* ----------------------------------------------------------
   DESKTOP
---------------------------------------------------------- */
@media (min-width: 821px) {

    /* Preserve the v0.28 sticky behavior that already works. */
    .connect-simple {
        grid-template-columns: minmax(310px, .86fr) minmax(0, 1.14fr) !important;
        gap: clamp(50px, 7vw, 108px) !important;
        align-items: stretch !important;
    }

    .connect-simple__left {
        position: relative !important;
        align-self: stretch !important;
    }

    .connect-simple__sticky {
        position: sticky !important;
        top: 104px !important;
        min-height: 76vh !important;
        display: flex !important;
        justify-content: center !important;
        padding-left: clamp(28px, 4vw, 64px) !important;
    }

    /* Right side becomes a scroll stage, not a giant card. */
    .connect-simple__right {
        position: relative !important;
        padding: 0 !important;
    }

    .connect-simple__right::before {
        left: 8px !important;
        top: 7vh !important;
        bottom: 7vh !important;
        background: linear-gradient(
            180deg,
            rgba(21,50,66,.10),
            rgba(21,50,66,.045)
        ) !important;
    }

    .connect-simple__step {
        position: relative !important;
        min-height: 76vh !important;
        margin: 0 !important;
        padding: 0 0 0 62px !important;

        display: flex !important;
        align-items: center !important;

        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }

    /* Rail dot */
    .connect-simple__step::before {
        left: 3px !important;
        top: 50% !important;
        width: 10px !important;
        height: 10px !important;
        transform: translateY(-50%) !important;
        background: rgba(21,50,66,.16) !important;
        box-shadow: 0 0 0 7px rgba(255,255,255,.95) !important;
        z-index: 3;
    }

    /* Connector from rail to floating panel */
    .connect-simple__step::after {
        content: "" !important;
        position: absolute;
        left: 15px;
        top: 50%;
        width: 34px;
        height: 1px;
        transform: translateY(-50%);
        background: rgba(21,50,66,.10);
        transition:
            width .35s ease,
            background .35s ease,
            box-shadow .35s ease;
    }

    /* The paragraph itself becomes the floating card. */
    .connect-simple__step p {
        width: min(100%, 760px) !important;
        max-width: none !important;
        margin: 0 !important;
        padding: clamp(26px, 3vw, 38px) clamp(28px, 3.2vw, 44px) !important;

        border: 1px solid rgba(21,50,66,.09);
        border-radius: 26px;
        background:
            linear-gradient(
                150deg,
                rgba(255,255,255,.96),
                rgba(240,248,252,.74)
            );
        box-shadow:
            0 18px 44px rgba(21,50,66,.045),
            inset 0 0 0 1px rgba(255,255,255,.62);

        font-size: clamp(1rem, 1.25vw, 1.18rem) !important;
        line-height: 1.72 !important;

        transition:
            transform .35s ease,
            border-color .35s ease,
            box-shadow .35s ease,
            background .35s ease;
    }

    .connect-simple__step.is-active::before {
        background: var(--cyan) !important;
        box-shadow:
            0 0 0 7px rgba(255,255,255,.96),
            0 0 18px rgba(103,201,255,.40) !important;
    }

    .connect-simple__step.is-active::after {
        width: 42px !important;
        background: rgba(103,201,255,.72) !important;
        box-shadow: 0 0 10px rgba(103,201,255,.22);
    }

    .connect-simple__step.is-active p {
        transform: translateX(8px);
        border-color: rgba(103,201,255,.34);
        background:
            linear-gradient(
                150deg,
                rgba(255,255,255,.98),
                rgba(238,249,254,.84)
            );
        box-shadow:
            0 24px 54px rgba(21,50,66,.065),
            0 0 0 1px rgba(103,201,255,.10),
            inset 0 0 0 1px rgba(255,255,255,.72);
    }

    /* Service modules: balanced between v0.26 and v0.27.
       Enough room for Bookkeeping, but not oversized. */
    .service-module {
        width: clamp(142px, 13.6vw, 178px) !important;
        min-height: 110px !important;
        padding: 15px 16px 14px !important;
    }

    .service-module:nth-child(2),
    .service-module:nth-child(3) {
        min-height: 116px !important;
    }

    .service-module__label {
        font-size: clamp(.78rem, .83vw, .89rem) !important;
    }

    .service-module__mini {
        font-size: clamp(.55rem, .58vw, .62rem) !important;
        line-height: 1.22 !important;
    }
}


/* ----------------------------------------------------------
   TABLET
   Instead of forcing desktop's two-column composition,
   use a sticky horizontal title and full-width explanation.
---------------------------------------------------------- */
@media (min-width: 561px) and (max-width: 820px) {

    .story.story--connect,
    .story--connect {
        overflow: visible !important;
    }

    .connect-simple {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        align-items: start !important;
    }

    /* The entire title row sticks inside the section. */
    .connect-simple__left {
        position: sticky !important;
        top: 78px !important;
        z-index: 20 !important;

        margin: 0 -6px 16px !important;
        padding: 12px 16px 13px !important;

        border-bottom: 1px solid rgba(21,50,66,.08);
        background: rgba(255,255,255,.91);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .connect-simple__sticky {
        position: relative !important;
        top: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .connect-simple__sticky h2 {
        margin: 0 !important;
        max-width: none !important;
        font-size: clamp(1.55rem, 4.2vw, 2.05rem) !important;
        line-height: 1.04 !important;
        letter-spacing: -.035em !important;
    }

    /* Horizontal cyan energy/progress line */
    .connect-simple__energy {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;

        width: 100% !important;
        height: 12px !important;
        margin-top: 9px !important;
    }

    .connect-simple__energy-line {
        position: absolute !important;
        left: 0 !important;
        top: 5px !important;
        width: 100% !important;
        height: 1px !important;
        background: rgba(21,50,66,.08) !important;
    }

    .connect-simple__energy-spark {
        position: absolute !important;
        top: 2px !important;
        left: 0 !important;
        width: 74px !important;
        height: 7px !important;
        border-radius: 999px !important;
        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(103,201,255,.92),
                transparent
            ) !important;
        box-shadow: 0 0 12px rgba(103,201,255,.25) !important;
        animation: onebookTabletEnergy 4.5s ease-in-out infinite !important;
    }

    @keyframes onebookTabletEnergy {
        0%   { transform: translateX(-20%); opacity: 0; }
        12%  { opacity: 1; }
        88%  { opacity: 1; }
        100% { transform: translateX(calc(100vw - 150px)); opacity: 0; }
    }

    .connect-simple__right {
        padding: 0 !important;
    }

    .connect-simple__right::before {
        display: none !important;
    }

    .connect-simple__step {
        min-height: 52vh !important;
        margin: 0 0 18px !important;
        padding: 18px 4px !important;

        display: flex !important;
        align-items: center !important;

        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .connect-simple__step::before {
        display: none !important;
    }

    .connect-simple__step p {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 28px 28px !important;

        border: 1px solid rgba(21,50,66,.09);
        border-radius: 24px;
        background:
            linear-gradient(
                150deg,
                rgba(255,255,255,.97),
                rgba(240,248,252,.76)
            );
        box-shadow:
            0 16px 38px rgba(21,50,66,.04),
            inset 0 0 0 1px rgba(255,255,255,.62);

        font-size: .98rem !important;
        line-height: 1.68 !important;
    }

    .connect-simple__step.is-active p {
        border-color: rgba(103,201,255,.32);
        box-shadow:
            0 20px 44px rgba(21,50,66,.055),
            0 0 0 1px rgba(103,201,255,.08);
    }

    /* Tablet service cards: slightly cleaner/smaller than v0.28. */
    .service-module {
        width: clamp(126px, 19vw, 142px) !important;
        min-height: 74px !important;
        padding: 9px 10px 8px !important;
    }

    .service-module:nth-child(2),
    .service-module:nth-child(3) {
        min-height: 80px !important;
    }

    .service-module__label {
        font-size: .65rem !important;
    }

    .service-module__mini {
        font-size: .47rem !important;
        line-height: 1.16 !important;
    }
}


/* ===== ONEBOOK v0.30
   Desktop frozen.
   Tablet keeps generous storytelling gaps and fills them with Ambient Data Flow.
   Mobile gets a compact sticky active-state header.
============================================================= */

/* Default: progress dots are only needed on mobile. */
.connect-mobile-state__dots {
    display: none;
}

/* ----------------------------------------------------------
   TABLET — KEEP THE GAP, FILL IT WITH AMBIENT DATA FLOW
---------------------------------------------------------- */
@media (min-width: 561px) and (max-width: 820px) {

    /* Keep the existing generous 52vh storytelling rhythm. */
    .connect-simple__step {
        min-height: 52vh !important;
        position: relative !important;
        isolation: isolate;
        overflow: visible !important;

        /* faint ambient atmosphere in the open space */
        background:
            radial-gradient(
                circle at 50% 50%,
                rgba(103,201,255,.075) 0,
                rgba(103,201,255,.025) 24%,
                transparent 56%
            ) !important;
    }

    /* Vertical ambient data rail running through the empty stage space.
       The explanation panel sits above it. */
    .connect-simple__step::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        left: 50% !important;
        top: 7% !important;
        bottom: 7% !important;
        width: 1px !important;
        height: auto !important;
        transform: translateX(-50%) !important;
        border-radius: 999px;
        background:
            linear-gradient(
                180deg,
                transparent,
                rgba(21,50,66,.055) 18%,
                rgba(103,201,255,.12) 50%,
                rgba(21,50,66,.055) 82%,
                transparent
            ) !important;
        box-shadow: none !important;
        z-index: -2 !important;
        opacity: 1 !important;
    }

    /* Moving cyan data particle through the whitespace. */
    .connect-simple__step::after {
        content: "" !important;
        position: absolute;
        left: 50%;
        top: 7%;
        width: 7px;
        height: 46px;
        border-radius: 999px;
        transform: translateX(-50%);
        background:
            linear-gradient(
                180deg,
                transparent,
                rgba(103,201,255,.95),
                transparent
            );
        filter: blur(.15px);
        box-shadow:
            0 0 14px rgba(103,201,255,.28),
            0 0 28px rgba(103,201,255,.12);
        opacity: .78;
        z-index: -1;
        animation: onebookTabletAmbientDrop 5.4s ease-in-out infinite;
        animation-delay: calc(var(--ambient-delay, 0) * 1s);
    }

    .connect-simple__step:nth-child(1) { --ambient-delay: 0; }
    .connect-simple__step:nth-child(2) { --ambient-delay: .8; }
    .connect-simple__step:nth-child(3) { --ambient-delay: 1.6; }
    .connect-simple__step:nth-child(4) { --ambient-delay: 2.4; }

    @keyframes onebookTabletAmbientDrop {
        0% {
            transform: translate(-50%, 0);
            opacity: 0;
        }
        12% { opacity: .8; }
        50% { opacity: .95; }
        88% { opacity: .75; }
        100% {
            transform: translate(-50%, calc(45vh - 58px));
            opacity: 0;
        }
    }

    /* Add very subtle ambient motes around the active panel. */
    .connect-simple__step p {
        position: relative;
        z-index: 2;
    }

    .connect-simple__step.is-active p {
        box-shadow:
            0 20px 44px rgba(21,50,66,.055),
            0 0 0 1px rgba(103,201,255,.08),
            0 0 52px rgba(103,201,255,.07) !important;
    }

    /* Keep the already-approved sticky tablet title. */
    .connect-mobile-state {
        display: block;
    }
}


/* ----------------------------------------------------------
   MOBILE — STICKY ACTIVE TITLE SO THE CHANGE IS ALWAYS VISIBLE
---------------------------------------------------------- */
@media (max-width: 560px) {

    .story.story--connect,
    .story--connect {
        overflow: visible !important;
    }

    .connect-simple {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    /* The title becomes a compact sticky state bar. */
    .connect-simple__left {
        position: sticky !important;
        top: 92px !important;
        z-index: 30 !important;

        margin: 0 0 10px !important;
        padding: 9px 14px 10px !important;

        border: 1px solid rgba(21,50,66,.075);
        border-radius: 17px;
        background: rgba(255,255,255,.92);
        box-shadow:
            0 10px 28px rgba(21,50,66,.055),
            inset 0 0 0 1px rgba(255,255,255,.65);

        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
    }

    .connect-simple__sticky {
        position: relative !important;
        top: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .connect-mobile-state {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
    }

    .connect-simple__sticky h2 {
        margin: 0 !important;
        max-width: none !important;
        font-size: 1.03rem !important;
        line-height: 1.08 !important;
        letter-spacing: -.025em !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .connect-mobile-state__dots {
        display: flex !important;
        flex: 0 0 auto;
        align-items: center;
        gap: 5px;
    }

    .connect-mobile-state__dots span {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(21,50,66,.13);
        transition:
            width .25s ease,
            background .25s ease,
            box-shadow .25s ease;
    }

    .connect-mobile-state__dots span.is-active {
        width: 14px;
        border-radius: 999px;
        background: var(--cyan);
        box-shadow: 0 0 9px rgba(103,201,255,.35);
    }

    /* Energy line is redundant inside the compact mobile state bar. */
    .connect-simple__energy {
        display: none !important;
    }

    .connect-simple__right {
        padding-top: 2px !important;
    }

    /* Keep cards scrolling naturally below the sticky state. */
    .connect-simple__step {
        min-height: auto !important;
        margin: 0 0 16px !important;
        padding: 0 !important;
        background: transparent !important;
    }

    .connect-simple__step p {
        position: relative;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 24px 20px !important;

        border-radius: 22px !important;
        border: 1px solid rgba(21,50,66,.09) !important;
        background:
            linear-gradient(
                150deg,
                rgba(255,255,255,.98),
                rgba(240,248,252,.78)
            ) !important;
        box-shadow:
            0 14px 34px rgba(21,50,66,.038),
            inset 0 0 0 1px rgba(255,255,255,.60) !important;

        font-size: .91rem !important;
        line-height: 1.62 !important;
    }

    .connect-simple__step.is-active p {
        border-color: rgba(103,201,255,.33) !important;
        box-shadow:
            0 18px 38px rgba(21,50,66,.05),
            0 0 0 1px rgba(103,201,255,.08),
            0 0 28px rgba(103,201,255,.055) !important;
    }
}


/* ===== ONEBOOK v0.31
   MOBILE ONLY: Guided Ambient Vertical Journey
   Desktop + tablet remain exactly as v0.30.
============================================================= */

@media (max-width: 560px) {

    /* Give each stage more breathing room.
       The extra gap is intentional and becomes part of the storytelling. */
    .connect-simple__step {
        position: relative !important;
        margin-bottom: 62px !important;
        overflow: visible !important;
        isolation: isolate;
    }

    .connect-simple__step:last-child {
        margin-bottom: 0 !important;
    }

    /* Faint vertical data rail that lives in the transition gap. */
    .connect-simple__step:not(:last-child)::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        left: 50% !important;
        top: calc(100% + 8px) !important;
        width: 1px !important;
        height: 42px !important;
        transform: translateX(-50%) !important;
        border-radius: 999px;
        background:
            linear-gradient(
                180deg,
                rgba(21,50,66,.025),
                rgba(103,201,255,.18),
                rgba(21,50,66,.025)
            ) !important;
        box-shadow: none !important;
        z-index: 0 !important;
    }

    /* Moving light through the gap. */
    .connect-simple__step:not(:last-child)::after {
        content: attr(data-mobile-transition) !important;
        display: flex !important;
        align-items: flex-end;
        justify-content: center;

        position: absolute !important;
        left: 50% !important;
        top: calc(100% + 8px) !important;
        width: 106px !important;
        height: 43px !important;
        transform: translateX(-50%) !important;

        color: rgba(21,50,66,.22);
        font-size: .52rem;
        font-weight: 800;
        letter-spacing: .18em;
        line-height: 1;
        white-space: nowrap;

        background:
            radial-gradient(
                circle at 50% 20%,
                rgba(103,201,255,.20),
                rgba(103,201,255,.055) 24%,
                transparent 58%
            );

        z-index: 1 !important;
        opacity: .82;
        pointer-events: none;
    }

    /* Separate animated light particle layered on top of the rail. */
    .connect-simple__step:not(:last-child) p::after {
        content: "" !important;
        position: absolute;
        left: 50%;
        bottom: -51px;
        width: 7px;
        height: 18px;
        border-radius: 999px;
        transform: translateX(-50%);
        background:
            linear-gradient(
                180deg,
                transparent,
                rgba(103,201,255,.96),
                transparent
            );
        box-shadow:
            0 0 10px rgba(103,201,255,.35),
            0 0 22px rgba(103,201,255,.14);
        animation: onebookMobileAmbientTravel 3.8s ease-in-out infinite;
        opacity: 0;
        pointer-events: none;
    }

    .connect-simple__step:nth-child(1) p::after { animation-delay: 0s; }
    .connect-simple__step:nth-child(2) p::after { animation-delay: .65s; }
    .connect-simple__step:nth-child(3) p::after { animation-delay: 1.3s; }

    @keyframes onebookMobileAmbientTravel {
        0% {
            transform: translate(-50%, -8px);
            opacity: 0;
        }
        18% {
            opacity: .9;
        }
        52% {
            opacity: 1;
        }
        86% {
            opacity: .75;
        }
        100% {
            transform: translate(-50%, 22px);
            opacity: 0;
        }
    }

    /* The card itself gently comes into focus as it becomes the active stage. */
    .connect-simple__step p {
        transition:
            transform .42s cubic-bezier(.2,.8,.2,1),
            opacity .36s ease,
            border-color .34s ease,
            box-shadow .34s ease,
            background .34s ease !important;

        transform: translateY(7px);
        opacity: .78;
    }

    .connect-simple__step.is-active p {
        transform: translateY(0) !important;
        opacity: 1 !important;

        box-shadow:
            0 18px 38px rgba(21,50,66,.05),
            0 0 0 1px rgba(103,201,255,.08),
            0 0 34px rgba(103,201,255,.07) !important;
    }

    /* Small ambient pulse near the next stage entrance. */
    .connect-simple__step:not(:last-child) {
        background:
            radial-gradient(
                circle at 50% calc(100% + 30px),
                rgba(103,201,255,.055),
                transparent 38%
            ) !important;
    }

    /* Keep the sticky state bar readable above the ambient motion. */
    .connect-simple__left {
        box-shadow:
            0 10px 28px rgba(21,50,66,.055),
            0 0 30px rgba(103,201,255,.025),
            inset 0 0 0 1px rgba(255,255,255,.65) !important;
    }

    /* Accessibility: keep motion quiet for users who prefer reduced motion. */
    @media (prefers-reduced-motion: reduce) {
        .connect-simple__step:not(:last-child) p::after {
            animation: none !important;
            opacity: .42 !important;
        }

        .connect-simple__step p {
            transition: none !important;
            transform: none !important;
            opacity: 1 !important;
        }
    }
}


/* ===== ONEBOOK v0.32
   MOBILE ONLY: wider ambient gaps, no card rise/pop-up motion.
   Desktop + tablet remain exactly as v0.31.
============================================================= */

@media (max-width: 560px) {

    /* More breathing room between stages. */
    .connect-simple__step {
        margin-bottom: 96px !important;
    }

    .connect-simple__step:last-child {
        margin-bottom: 0 !important;
    }

    /* Longer transition rail to occupy the larger gap. */
    .connect-simple__step:not(:last-child)::before {
        top: calc(100% + 12px) !important;
        height: 68px !important;
        background:
            linear-gradient(
                180deg,
                rgba(21,50,66,.018),
                rgba(103,201,255,.16) 45%,
                rgba(21,50,66,.018)
            ) !important;
    }

    /* Ambient label sits in the middle of the larger transition space. */
    .connect-simple__step:not(:last-child)::after {
        top: calc(100% + 14px) !important;
        width: 118px !important;
        height: 68px !important;

        align-items: center !important;

        color: rgba(21,50,66,.17) !important;
        font-size: .50rem !important;
        letter-spacing: .20em !important;

        background:
            radial-gradient(
                circle at 50% 50%,
                rgba(103,201,255,.11),
                rgba(103,201,255,.025) 30%,
                transparent 62%
            ) !important;
    }

    /* Light travels through the whole transition gap. */
    .connect-simple__step:not(:last-child) p::after {
        bottom: -77px !important;
        height: 22px !important;
        animation: onebookMobileAmbientTravelV32 4.3s ease-in-out infinite !important;
    }

    @keyframes onebookMobileAmbientTravelV32 {
        0% {
            transform: translate(-50%, -12px);
            opacity: 0;
        }
        18% {
            opacity: .72;
        }
        50% {
            opacity: .92;
        }
        82% {
            opacity: .62;
        }
        100% {
            transform: translate(-50%, 48px);
            opacity: 0;
        }
    }

    /* Remove the previous rise/fade effect completely.
       Cards stay physically still; only the ambient flow moves. */
    .connect-simple__step p,
    .connect-simple__step.is-active p {
        transform: none !important;
        opacity: 1 !important;

        transition:
            border-color .32s ease,
            box-shadow .32s ease,
            background .32s ease !important;
    }

    /* Active state becomes quieter: no pop-up feel, just a subtle edge response. */
    .connect-simple__step.is-active p {
        border-color: rgba(103,201,255,.28) !important;
        box-shadow:
            0 14px 32px rgba(21,50,66,.035),
            0 0 0 1px rgba(103,201,255,.055) !important;
    }

    /* Keep ambient emphasis in the gap, not on the card itself. */
    .connect-simple__step:not(:last-child) {
        background:
            radial-gradient(
                circle at 50% calc(100% + 48px),
                rgba(103,201,255,.045),
                transparent 42%
            ) !important;
    }
}


/* ===== ONEBOOK v0.33
   MOBILE ONLY: wider ambient gap + remove layered card look.
   Desktop and tablet remain unchanged.
============================================================= */

@media (max-width: 560px) {

    /* 1) Slightly larger storytelling gap. */
    .connect-simple__step {
        margin-bottom: 118px !important;
    }

    .connect-simple__step:last-child {
        margin-bottom: 0 !important;
    }

    /* 2) Extend the ambient bridge so the bigger gap feels intentional. */
    .connect-simple__step:not(:last-child)::before {
        top: calc(100% + 14px) !important;
        height: 82px !important;
        background:
            linear-gradient(
                180deg,
                rgba(21,50,66,.015),
                rgba(103,201,255,.14) 46%,
                rgba(21,50,66,.015)
            ) !important;
    }

    .connect-simple__step:not(:last-child)::after {
        top: calc(100% + 20px) !important;
        width: 126px !important;
        height: 82px !important;
        color: rgba(21,50,66,.15) !important;
        background:
            radial-gradient(
                circle at 50% 50%,
                rgba(103,201,255,.085),
                rgba(103,201,255,.018) 30%,
                transparent 64%
            ) !important;
    }

    .connect-simple__step:not(:last-child) p::after {
        bottom: -92px !important;
        height: 24px !important;
        animation: onebookMobileAmbientTravelV33 4.8s ease-in-out infinite !important;
    }

    @keyframes onebookMobileAmbientTravelV33 {
        0% {
            transform: translate(-50%, -12px);
            opacity: 0;
        }
        18% { opacity: .68; }
        50% { opacity: .88; }
        82% { opacity: .58; }
        100% {
            transform: translate(-50%, 58px);
            opacity: 0;
        }
    }

    /* 3) Remove the layered / double-card feel.
       Keep only a single clean card surface. */
    .connect-simple__step p,
    .connect-simple__step.is-active p {
        border: 1px solid rgba(21,50,66,.08) !important;
        background: linear-gradient(
            180deg,
            rgba(251,253,254,.98),
            rgba(244,249,252,.92)
        ) !important;
        box-shadow: none !important;
    }

    /* Subtle active state without making it feel like a separate stacked layer. */
    .connect-simple__step.is-active p {
        border-color: rgba(103,201,255,.34) !important;
    }

    /* Keep the atmosphere in the gap, not around the card edges. */
    .connect-simple__step:not(:last-child) {
        background:
            radial-gradient(
                circle at 50% calc(100% + 58px),
                rgba(103,201,255,.032),
                transparent 44%
            ) !important;
    }
}


/* ===== ONEBOOK v0.34
   MOBILE ONLY: remove the real source of the double-layer card.
   The outer .connect-simple__step still inherited its original border/background.
============================================================= */

@media (max-width: 560px) {

    /* Outer stage is now completely invisible.
       Only the inner paragraph card remains visible. */
    .connect-simple__step,
    .connect-simple__step.is-active {
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        outline: 0 !important;
    }

    /* Keep only the ambient background in the transition gap;
       never draw a panel around the whole stage. */
    .connect-simple__step {
        background: transparent !important;
    }

    .connect-simple__step:not(:last-child) {
        background:
            radial-gradient(
                circle at 50% calc(100% + 58px),
                rgba(103,201,255,.032),
                transparent 44%
            ) !important;
    }

    /* Single visible card surface. */
    .connect-simple__step p,
    .connect-simple__step.is-active p {
        border-radius: 22px !important;
        border: 1px solid rgba(21,50,66,.08) !important;
        outline: none !important;
        box-shadow: none !important;

        background:
            linear-gradient(
                180deg,
                rgba(251,253,254,.98),
                rgba(244,249,252,.92)
            ) !important;
    }

    .connect-simple__step.is-active p {
        border-color: rgba(103,201,255,.34) !important;
    }
}


/* ===== ONEBOOK v0.35
   DIGITAL BOOK PRECISION CLEANUP
   Keep 3 intentional glass layers, remove the stray protruding side piece.
============================================================= */

/* The small left-side protrusion was the decorative spine.
   Remove it so the book reads as one precise stacked-glass object. */
.digital-book__spine {
    display: none !important;
}

/* Keep exactly three visual planes:
   1. cover
   2. mid glass layer
   3. back glass layer

   Layers now follow the same perspective footprint instead of expanding
   beyond the cover on the left/right. */
.digital-book__page-stack {
    border-color: rgba(85,155,196,.34) !important;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.42),
            rgba(116,188,228,.055)
        ) !important;
    box-shadow:
        inset 0 0 24px rgba(120,201,245,.055) !important;
}

/* Middle plane: close to the cover, slightly inset and lower. */
.digital-book__page-stack--mid {
    inset: 2.2% 1.1% -3.6% !important;
    transform: translateZ(-22px) translateY(1px) !important;
    border-radius: 25px !important;
    opacity: .60 !important;
}

/* Rear plane: deeper, slightly narrower, consistently offset downward. */
.digital-book__page-stack--back {
    inset: 4.4% 2.2% -7.2% !important;
    transform: translateZ(-46px) translateY(2px) !important;
    border-radius: 24px !important;
    opacity: .40 !important;
}

/* Keep the main cover visually dominant. */
.digital-book__cover {
    z-index: 3;
}

/* The two depth planes stay behind the cover in a predictable order. */
.digital-book__page-stack--mid {
    z-index: 2;
}

.digital-book__page-stack--back {
    z-index: 1;
}

/* Slightly cleaner depth shadow: centered beneath the three-layer stack. */
.digital-book__shadow {
    inset: 34% 1% -18% !important;
    opacity: .82;
    filter: blur(20px) !important;
}


/* ===== ONEBOOK v0.36
   FROM COMPLEXITY TO CLARITY — 5 STEP PROCESS
============================================================= */

.connect-process-heading {
    margin: 0 0 clamp(24px, 3vw, 40px);
    text-align: center;
}

.connect-process-heading p {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.15rem, 2vw, 1.65rem);
    font-weight: 500;
    letter-spacing: -.025em;
}

/* Five-step title labels are intentionally compact / system-like. */
.connect-simple__sticky h2 {
    letter-spacing: -.045em;
}

/* Tablet ambient timing now supports all five stages. */
@media (min-width: 561px) and (max-width: 820px) {
    .connect-simple__step:nth-child(1) { --ambient-delay: 0; }
    .connect-simple__step:nth-child(2) { --ambient-delay: .65; }
    .connect-simple__step:nth-child(3) { --ambient-delay: 1.3; }
    .connect-simple__step:nth-child(4) { --ambient-delay: 1.95; }
    .connect-simple__step:nth-child(5) { --ambient-delay: 2.6; }

    .connect-process-heading {
        margin-bottom: 22px;
    }

    .connect-process-heading p {
        font-size: 1.25rem;
    }
}

/* Mobile transition light now covers the fourth bridge too. */
@media (max-width: 560px) {
    .connect-simple__step:nth-child(1) p::after { animation-delay: 0s; }
    .connect-simple__step:nth-child(2) p::after { animation-delay: .55s; }
    .connect-simple__step:nth-child(3) p::after { animation-delay: 1.1s; }
    .connect-simple__step:nth-child(4) p::after { animation-delay: 1.65s; }

    .connect-process-heading {
        margin: 0 0 18px;
        text-align: left;
        padding: 0 4px;
    }

    .connect-process-heading p {
        font-size: 1.12rem;
    }
}


/* ===== ONEBOOK v0.41
   Services heading + mobile Workflow refinements
   ------------------------------------------------
   Important: these rules live in main.css because main.css is the stylesheet
   actually enqueued by the theme.
============================================================= */

/* ----------------------------------------------------------
   OUR SERVICES — same visual language as WORKFLOW
---------------------------------------------------------- */
.service-section-kicker {
    display: block !important;
    position: relative !important;
    z-index: 20 !important;

    margin:
        clamp(24px, 2.6vw, 34px)
        0
        clamp(22px, 2.4vw, 32px) !important;
    padding: 0 !important;

    text-align: center !important;
    color: var(--ink) !important;
    font-size: clamp(1.15rem, 2vw, 1.65rem) !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    letter-spacing: -.025em !important;
    text-transform: none !important;

    background: transparent !important;
}

/* Desktop: the drawer should begin AFTER the heading,
   never overlap it. */
@media (min-width: 821px) {
    .service-section-kicker {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }

    .service-drawer {
        margin-top: 0 !important;
    }
}

/* Tablet: older versions used a negative drawer margin.
   Cancel that here and give Our Services its own visual row. */
@media (min-width: 561px) and (max-width: 820px) {
    .service-section-kicker {
        z-index: 80 !important;
        margin-top: 28px !important;
        margin-bottom: 26px !important;
        padding: 5px 0 !important;
        font-size: 1.25rem !important;
        line-height: 1.1 !important;
    }

    .service-drawer {
        margin-top: 0 !important;
    }
}

/* ----------------------------------------------------------
   MOBILE — WORKFLOW HEADING
---------------------------------------------------------- */
@media (max-width: 560px) {
    .connect-process-heading {
        width: 100% !important;
        margin: 0 0 22px !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .connect-process-heading p {
        display: block !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        text-align: center !important;

        font-size: 1.12rem !important;
        font-weight: 500 !important;
        line-height: 1.1 !important;
        letter-spacing: -.025em !important;
    }

    .service-section-kicker {
        margin-top: 18px !important;
        margin-bottom: 18px !important;
        font-size: 1.12rem !important;
    }
}

/* ----------------------------------------------------------
   MOBILE — WORKFLOW TIMELINE DOTS
   The earlier ambient design reused ::before for the center transition rail,
   which caused the left-hand dots to disappear for steps 1–4.
   Add a dedicated dot on every description card instead.
---------------------------------------------------------- */
@media (max-width: 560px) {

    /* Keep the card physically still while scrolling.
       No horizontal "slide" when a stage becomes active. */
    .connect-simple__step,
    .connect-simple__step.is-active {
        transform: none !important;
    }

    .connect-simple__step p,
    .connect-simple__step.is-active p {
        transform: none !important;
    }

    /* Hide the legacy left dot on the final stage so it does not duplicate
       the dedicated dot below. Ambient center rails for earlier stages remain. */
    .connect-simple__step:last-child::before {
        display: none !important;
    }

    /* One left timeline dot for EVERY workflow description. */
    .connect-simple__step p::before {
        content: "" !important;
        display: block !important;

        position: absolute !important;
        left: -17px !important;
        top: 50% !important;

        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        transform: translateY(-50%) !important;

        background: rgba(21,50,66,.15) !important;
        box-shadow:
            0 0 0 5px rgba(255,255,255,.95) !important;

        opacity: 1 !important;
        z-index: 5 !important;
        pointer-events: none !important;

        transition:
            background .28s ease,
            box-shadow .28s ease,
            transform .28s ease !important;
    }

    /* Elegant active state:
       card remains stationary; only the timeline dot + edge light respond. */
    .connect-simple__step.is-active p::before {
        background: var(--cyan) !important;
        box-shadow:
            0 0 0 5px rgba(255,255,255,.96),
            0 0 13px rgba(103,201,255,.40) !important;
    }

    .connect-simple__step p {
        box-shadow: none !important;
    }

    .connect-simple__step.is-active p {
        border-color: rgba(103,201,255,.32) !important;
        background:
            linear-gradient(
                180deg,
                rgba(252,254,255,.99),
                rgba(244,250,253,.94)
            ) !important;

        /* no movement / pop-up: a subtle cyan edge is enough */
        box-shadow:
            inset 2px 0 0 rgba(103,201,255,.22) !important;
    }
}


/* ===== ONEBOOK v0.42
   Tighten desktop + tablet gap above Our Services
============================================================= */

/* Desktop: bring the section title slightly closer to the hero */
@media (min-width: 821px) {
    .service-section-kicker {
        margin-top: 8px !important;
        margin-bottom: 16px !important;
    }
}

/* Tablet: same idea, but still keep enough room so it never overlaps */
@media (min-width: 561px) and (max-width: 820px) {
    .service-section-kicker {
        margin-top: 12px !important;
        margin-bottom: 18px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}


/* ===== ONEBOOK v0.43 — Functional & SEO foundation ===== */
.site-footer__placeholder {
    color: inherit;
    opacity: .58;
    cursor: default;
}