:root {
    --service-teal: #0f766e;
    --service-teal-dark: #115e59;
    --service-emerald: #10b981;
    --service-mint: #14b8a6;
    --service-blue: #2563eb;
    --service-navy: #0f172a;
    --service-slate: #475569;
    --service-muted: #64748b;
    --service-warm: #fff7ed;
    --service-soft: #f0fdfa;
    --service-border: rgba(20, 184, 166, .22);
    --service-shadow: 0 24px 70px rgba(15, 23, 42, .12);
}

.towa-service-page {
    background: #fff;
    color: var(--service-navy);
    overflow: hidden;
}

.service-container {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
}

.service-hero {
    position: relative;
    padding: 90px 0 74px;
    background:
        radial-gradient(circle at 15% 12%, rgba(16, 185, 129, .17), transparent 34%),
        radial-gradient(circle at 88% 20%, rgba(251, 146, 60, .16), transparent 34%),
        linear-gradient(180deg, #fffaf2 0%, #f0fdfa 54%, #ffffff 100%);
}

.service-hero-glow {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(12px);
    opacity: .72;
}

.service-hero-glow-one {
    width: 260px;
    height: 260px;
    background: rgba(20, 184, 166, .16);
    right: -90px;
    top: 70px;
}

.service-hero-glow-two {
    width: 210px;
    height: 210px;
    background: rgba(251, 146, 60, .14);
    left: -70px;
    bottom: 80px;
}

.service-kicker,
.service-section-head span,
.service-side-label,
.service-detail-no {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--service-teal);
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .82rem;
}

.service-kicker {
    padding: 10px 16px;
    border: 1px solid rgba(20, 184, 166, .22);
    border-radius: 999px;
    background: rgba(20, 184, 166, .09);
    margin-bottom: 24px;
}

.service-kicker span {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--service-teal), var(--service-emerald));
    box-shadow: 0 0 0 6px rgba(20, 184, 166, .12);
}

.service-hero-title {
    font-size: clamp(2.45rem, 5.7vw, 4.95rem);
    line-height: 1.04;
    letter-spacing: -.055em;
    font-weight: 900;
    margin: 0 0 26px;
}

.service-hero-lead {
    color: var(--service-slate);
    font-size: clamp(1.02rem, 1.8vw, 1.22rem);
    line-height: 2;
    max-width: 740px;
    margin-bottom: 30px;
}

.service-hero-actions,
.service-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.service-primary-btn,
.service-outline-btn {
    border-radius: 999px;
    padding: 14px 24px;
    font-weight: 850;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.service-primary-btn {
    color: #fff;
    border: none;
    background: linear-gradient(135deg, var(--service-teal), var(--service-emerald));
    box-shadow: 0 16px 34px rgba(15, 118, 110, .25);
}

.service-primary-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 20px 44px rgba(15, 118, 110, .34);
}

.service-outline-btn {
    color: var(--service-teal);
    border: 1px solid rgba(15, 118, 110, .24);
    background: rgba(255,255,255,.82);
}

.service-outline-btn:hover {
    color: var(--service-teal-dark);
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
}

.service-outline-btn.light {
    color: #fff;
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.28);
}

.service-outline-btn.light:hover {
    color: #fff;
    background: rgba(255,255,255,.18);
}

.service-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.service-hero-tags a {
    display: inline-flex;
    text-decoration: none;
    padding: 10px 14px;
    border: 1px solid rgba(20, 184, 166, .2);
    border-radius: 999px;
    background: rgba(255,255,255,.78);
    color: #334155;
    font-weight: 750;
    font-size: .92rem;
    transition: transform .25s ease, color .25s ease, border-color .25s ease;
}

.service-hero-tags a:hover {
    color: var(--service-teal);
    border-color: rgba(15, 118, 110, .35);
    transform: translateY(-2px);
}

.service-stack-card {
    position: relative;
    border: 1px solid rgba(20,184,166,.22);
    border-radius: 34px;
    padding: 24px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.84)),
        radial-gradient(circle at top right, rgba(16,185,129,.16), transparent 38%);
    box-shadow: var(--service-shadow);
    backdrop-filter: blur(18px);
}

.service-stack-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 34px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(15,118,110,.36), rgba(251,146,60,.26), transparent);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.service-stack-top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.service-stack-top span {
    display: block;
    color: var(--service-teal);
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .76rem;
    margin-bottom: 4px;
}

.service-stack-top strong {
    font-size: 1rem;
}

.service-live-badge {
    white-space: nowrap;
    font-size: .78rem;
    font-weight: 850;
    color: #c2410c;
    background: rgba(251, 146, 60, .16);
    padding: 8px 12px;
    border-radius: 999px;
}

.service-stack-main {
    color: #fff;
    border-radius: 26px;
    padding: 24px;
    background: linear-gradient(135deg, #134e4a 0%, #0f766e 56%, #10b981 100%);
    margin-bottom: 16px;
}

.service-stack-main span,
.service-stack-main p {
    opacity: .84;
}

.service-stack-main h2 {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    font-weight: 900;
    letter-spacing: -.04em;
    margin: 8px 0 12px;
}

.service-stack-main p {
    margin: 0;
    line-height: 1.85;
}

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

.service-stack-grid div {
    border: 1px solid rgba(20,184,166,.2);
    border-radius: 18px;
    padding: 15px;
    background: rgba(255,255,255,.72);
}

.service-stack-grid i {
    color: var(--service-teal);
    font-size: 1.2rem;
}

.service-stack-grid span,
.service-stack-grid strong {
    display: block;
}

.service-stack-grid span {
    color: var(--service-muted);
    font-size: .78rem;
    margin-top: 8px;
}

.service-stack-grid strong {
    font-size: .96rem;
    margin-top: 2px;
}

.service-stack-note {
    display: flex;
    gap: 10px;
    align-items: center;
    color: #334155;
    font-weight: 750;
    background: rgba(20,184,166,.07);
    border: 1px solid rgba(20,184,166,.14);
    border-radius: 18px;
    padding: 14px 16px;
    margin-top: 16px;
}

.service-stack-note i {
    color: var(--service-teal);
}

.service-section {
    padding: 84px 0;
}

.service-position-section {
    background: #fff;
}

.service-section-head {
    max-width: 780px;
    margin: 0 auto 42px;
}

.service-section-head h2,
.service-side-title,
.service-detail-panel h2 {
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.18;
    margin: 14px 0 16px;
}

.service-section-head h2 {
    font-size: clamp(2rem, 4vw, 3.3rem);
}

.service-side-title,
.service-detail-panel h2 {
    font-size: clamp(2rem, 4vw, 3.05rem);
}

.service-section-head p,
.service-side-text,
.service-detail-panel p {
    color: var(--service-slate);
    line-height: 2;
    font-size: 1.02rem;
}

.service-value-card,
.service-lineup-card,
.service-point-card,
.service-flow-card {
    height: 100%;
    border: 1px solid var(--service-border);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 16px 44px rgba(15,23,42,.07);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.service-value-card:hover,
.service-lineup-card:hover,
.service-point-card:hover,
.service-flow-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 70px rgba(15,23,42,.12);
    border-color: rgba(15,118,110,.28);
}

.service-value-card {
    padding: 28px;
}

.service-value-icon,
.service-lineup-card > i,
.service-point-card i,
.service-flow-card div,
.service-tour-grid i {
    width: 56px;
    height: 56px;
    border-radius: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--service-teal);
    background: rgba(20,184,166,.1);
    font-size: 1.35rem;
    margin-bottom: 20px;
}

.service-value-card h3,
.service-lineup-card h3,
.service-point-card h3,
.service-flow-card h3,
.service-tour-grid h3 {
    font-size: 1.22rem;
    font-weight: 900;
    margin-bottom: 12px;
}

.service-value-card p,
.service-lineup-card p,
.service-point-card p,
.service-flow-card p,
.service-tour-grid p {
    color: var(--service-slate);
    line-height: 1.9;
    margin: 0;
}

.service-lineup-section {
    background:
        radial-gradient(circle at 12% 18%, rgba(251,146,60,.11), transparent 30%),
        radial-gradient(circle at 86% 25%, rgba(20,184,166,.1), transparent 32%),
        linear-gradient(180deg, #fff7ed, #ecfdf5);
}

.service-lineup-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.service-lineup-card {
    position: relative;
    padding: 28px;
    text-decoration: none;
    color: var(--service-navy);
    overflow: hidden;
}

.service-lineup-card::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    right: -72px;
    top: -72px;
    border-radius: 999px;
    background: rgba(20,184,166,.08);
}

.service-lineup-card span {
    display: inline-flex;
    color: var(--service-teal);
    font-weight: 900;
    letter-spacing: .08em;
    font-size: .78rem;
    margin-bottom: 12px;
}

.service-lineup-card em {
    display: inline-flex;
    margin-top: 18px;
    color: var(--service-teal);
    font-weight: 900;
    font-style: normal;
}

.service-detail-section {
    background: #fff;
}

.service-detail-alt {
    background: #f7fffb;
}

.service-detail-panel {
    border: 1px solid var(--service-border);
    border-radius: 34px;
    padding: clamp(26px, 4vw, 46px);
    background:
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.9)),
        radial-gradient(circle at top right, rgba(20,184,166,.08), transparent 35%);
    box-shadow: 0 18px 54px rgba(15,23,42,.08);
}

.service-point-grid,
.service-two-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.service-point-card {
    padding: 22px;
    box-shadow: none;
}

.service-point-card i {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    font-size: 1.05rem;
    margin-bottom: 14px;
}

.service-detail-btn {
    margin-top: 26px;
}

.service-two-list > div {
    border: 1px solid var(--service-border);
    border-radius: 24px;
    padding: 24px;
    background: #fff;
}

.service-two-list h3 {
    font-size: 1.08rem;
    font-weight: 900;
    margin-bottom: 14px;
}

.service-two-list ul,
.service-clean-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-two-list li,
.service-clean-list li {
    position: relative;
    padding-left: 24px;
    color: #334155;
    line-height: 1.8;
    margin-bottom: 10px;
}

.service-two-list li::before,
.service-clean-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--service-teal);
    font-weight: 950;
}

.service-tour-section {
    background:
        radial-gradient(circle at 84% 12%, rgba(251,146,60,.12), transparent 30%),
        radial-gradient(circle at 16% 36%, rgba(20,184,166,.11), transparent 34%),
        #fffaf2;
}

.service-tour-board {
    border: 1px solid var(--service-border);
    border-radius: 34px;
    padding: 20px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,251,235,.88)),
        radial-gradient(circle at top right, rgba(251,146,60,.14), transparent 38%);
    box-shadow: var(--service-shadow);
}

.service-tour-main {
    border-radius: 28px;
    padding: 28px;
    color: #fff;
    background:
        radial-gradient(circle at 90% 10%, rgba(255,255,255,.22), transparent 32%),
        linear-gradient(135deg, #7c2d12 0%, #ea580c 55%, #14b8a6 100%);
    margin-bottom: 16px;
}

.service-tour-main i {
    width: 56px;
    height: 56px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.15);
    font-size: 1.45rem;
    margin-bottom: 18px;
}

.service-tour-main span {
    display: block;
    opacity: .78;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .78rem;
    margin-bottom: 8px;
}

.service-tour-main h3 {
    font-weight: 900;
    letter-spacing: -.03em;
    font-size: clamp(1.5rem, 3vw, 2.15rem);
    margin-bottom: 12px;
}

.service-tour-main p {
    color: rgba(255,255,255,.8);
    line-height: 1.9;
    margin: 0;
}

.service-tour-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.service-tour-grid div {
    border: 1px solid var(--service-border);
    border-radius: 22px;
    padding: 20px;
    background: rgba(255,255,255,.84);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.service-tour-grid div:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 48px rgba(15,23,42,.1);
    border-color: rgba(15,118,110,.28);
}

.service-tour-grid i {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    font-size: 1.15rem;
    margin-bottom: 14px;
}

.service-platform-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.service-platform-grid span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 62px;
    border: 1px solid var(--service-border);
    border-radius: 18px;
    background: #fff;
    color: var(--service-teal);
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(15,23,42,.05);
}

.service-flow-section {
    background:
        radial-gradient(circle at 10% 20%, rgba(20,184,166,.09), transparent 28%),
        #f8fafc;
}

.service-flow-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.service-flow-card {
    padding: 26px;
    text-align: left;
}

.service-flow-card div {
    color: var(--service-teal);
    font-weight: 900;
    font-size: 1rem;
}

.service-cta-section {
    padding: 0 0 92px;
    background: #f8fafc;
}

.service-cta-card {
    display: flex;
    justify-content: space-between;
    gap: 32px;
    align-items: center;
    border-radius: 36px;
    padding: clamp(32px, 5vw, 58px);
    color: #fff;
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,.18), transparent 30%),
        linear-gradient(135deg, #134e4a 0%, #0f766e 50%, #10b981 100%);
    box-shadow: 0 28px 80px rgba(15,118,110,.25);
}

.service-cta-card span {
    display: inline-flex;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .82;
    margin-bottom: 12px;
}

.service-cta-card h2 {
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 900;
    letter-spacing: -.045em;
    line-height: 1.16;
    margin-bottom: 16px;
}

.service-cta-card p {
    max-width: 680px;
    margin: 0;
    color: rgba(255,255,255,.76);
    line-height: 2;
}

.reveal-service {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
}

.reveal-service.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.service-delay-1 {
    transition-delay: .08s;
}

.service-delay-2 {
    transition-delay: .16s;
}

.service-delay-3 {
    transition-delay: .24s;
}

.service-delay-4 {
    transition-delay: .32s;
}

@media (max-width: 991.98px) {
    .service-hero {
        padding: 64px 0 56px;
    }

    .service-lineup-grid,
    .service-flow-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-cta-card {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 767.98px) {
    .service-container {
        width: min(100% - 24px, 1120px);
    }

    .service-section {
        padding: 62px 0;
    }

    .service-stack-card {
        border-radius: 26px;
        padding: 18px;
    }

    .service-stack-card::before {
        border-radius: 26px;
    }

    .service-stack-grid,
    .service-lineup-grid,
    .service-point-grid,
    .service-two-list,
    .service-tour-grid,
    .service-platform-grid,
    .service-flow-grid {
        grid-template-columns: 1fr;
    }

    .service-hero-actions,
    .service-cta-actions {
        width: 100%;
    }

    .service-primary-btn,
    .service-outline-btn {
        width: 100%;
        justify-content: center;
    }

    .service-cta-section {
        padding-bottom: 64px;
    }
}

/* Text color fix: make key dark-gradient copy white */
.service-stack-main h2,
.service-stack-main span,
.service-stack-main p,
.service-tour-main h3,
.service-tour-main span,
.service-tour-main p,
.service-cta-card h2,
.service-cta-card span {
    color: #fff !important;
}

.service-stack-main p,
.service-tour-main p,
.service-cta-card p {
    color: rgba(255, 255, 255, .86) !important;
}