/* WordToJPG.id — Tentang Kami / Approved design */

.wt-about {
    --abt-navy: #102d40;
    --abt-deep: #06475a;
    --abt-teal: #078c80;
    --abt-mint: #0ca88c;
    --abt-muted: #496475;
    --abt-line: #e2ebeb;
    --abt-yellow: #ffda50;
    width: 100%;
    min-width: 0;
    overflow-x: clip;
    background: #fffefa;
    color: var(--abt-navy);
    font-family: 'Plus Jakarta Sans', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.wt-about, .wt-about *, .wt-about *::before, .wt-about *::after { box-sizing: border-box; }
.wt-about h1, .wt-about h2, .wt-about h3, .wt-about p, .wt-about ul, .wt-about ol { margin-top: 0; }
.wt-about a { text-decoration: none; }
.wt-about a:focus-visible { outline: 3px solid #0ca88c; outline-offset: 4px; }
.wt-about [id] { scroll-margin-top: 110px; }
.wt-about-shell { width: min(1220px, calc(100% - 64px)); margin-inline: auto; }
.wt-about-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 17px;
    padding: 8px 17px;
    border-radius: 100px;
    background: #a8eadb;
    color: #063d4a;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .055em;
}

/* Hero — left-aligned headline, right DOCX/JPG graphic */
.wt-about-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(112deg, #fbfff6 0%, #f8fdf5 49%, #e3f9f4 100%);
    border-bottom: 1px solid #e4f0e9;
}
.wt-about-hero::before, .wt-about-hero::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}
.wt-about-hero::before { width: 380px; height: 380px; background: rgba(166,235,217,.3); left: -250px; bottom: -230px; }
.wt-about-hero::after { width: 460px; height: 460px; background: rgba(157,226,216,.18); right: -260px; top: -270px; }
.wt-about-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.13fr) minmax(0, .87fr);
    align-items: center;
    gap: 38px;
    min-height: 430px;
    padding-block: 50px 54px;
}
.wt-about-hero__copy { position: relative; z-index: 2; min-width: 0; }
.wt-about-hero h1 {
    max-width: 690px;
    margin-bottom: 19px;
    color: #132f4d;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(35px, 4.35vw, 59px);
    font-weight: 700;
    letter-spacing: -.052em;
    line-height: 1.13;
}
.wt-about-hero h1 span { color: #008f80; }
.wt-about-hero__copy > p {
    max-width: 590px;
    margin-bottom: 23px;
    color: #354d62;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.85;
}
.wt-about-hero__facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 13px 19px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.wt-about-hero__facts li { display: inline-flex; align-items: center; gap: 7px; color: #203e51; font-size: 10px; font-weight: 750; white-space: nowrap; }
.wt-about-hero__facts i { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; color: #fff; background: #069d8b; font-size: 13px; }
.wt-about-hero__art {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    height: 350px;
    padding-inline: 7%;
}
.wt-about-hero__halo {
    position: absolute;
    z-index: -1;
    inset: 6% 1% 5%;
    border-radius: 47% 53% 62% 38% / 48% 46% 54% 52%;
    background: linear-gradient(135deg, #d5f2ec, #b4e9df 70%, #def6e5);
    transform: rotate(-12deg);
}
.wt-about-hero__document {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40%;
    height: 76%;
    min-width: 0;
}
.wt-about-hero__document--word { transform: rotate(-8deg) translateY(5px); }
.wt-about-hero__document--jpg { transform: rotate(8deg) translateY(12px); }
.wt-about-hero__paper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 20px;
    border: 1px solid #e7eef1;
    border-radius: 17px;
    background: linear-gradient(150deg, #fff, #f4fbfd);
    box-shadow: 0 18px 35px rgba(10,74,83,.16);
}
.wt-about-hero__paper::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 38px;
    height: 38px;
    border-radius: 0 14px 0 11px;
    background: #dbe7ee;
}
.wt-about-hero__paper > i { font-size: clamp(54px, 7vw, 92px); color: #1874d2; filter: drop-shadow(0 6px 6px rgba(0,85,142,.13)); }
.wt-about-hero__document--jpg .wt-about-hero__paper > i { color: #079f85; }
.wt-about-hero__line { display: block; width: 85%; height: 7px; border-radius: 10px; background: #d8e6ef; }
.wt-about-hero__line:nth-of-type(2) { width: 65%; }
.wt-about-hero__line:nth-of-type(3) { width: 76%; }
.wt-about-hero__doc-tag {
    position: absolute;
    bottom: 4%;
    right: -14%;
    padding: 9px 16px;
    border-radius: 8px;
    background: #146fce;
    color: #fff;
    font-size: 15px;
    font-weight: 850;
    box-shadow: 0 6px 13px rgba(16,85,153,.19);
}
.wt-about-hero__jpg-mark { position: absolute; bottom: 18px; font-size: 23px; color: #008a76; font-weight: 850; letter-spacing: .03em; }
.wt-about-hero__direction { position: relative; z-index: 2; display: grid; place-items: center; width: 15%; color: #07967e; font-size: 35px; filter: drop-shadow(0 3px 5px rgba(0,92,77,.14)); }

/* Purpose — cream content and four feature panels */
.wt-about-purpose { padding: 24px 0 16px; }
.wt-about-purpose__surface {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 45px;
    padding: 32px 34px;
    border-radius: 19px;
    background: #fcf9ef;
}
.wt-about-purpose__intro h2, .wt-about-benefits__copy h2 {
    max-width: 520px;
    margin-bottom: 15px;
    color: #133154;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(27px, 3.3vw, 41px);
    font-weight: 700;
    line-height: 1.13;
    letter-spacing: -.04em;
}
.wt-about-purpose__intro h2 em, .wt-about-benefits__copy h2 em { font-style: normal; color: #079380; }
.wt-about-purpose__intro > p, .wt-about-benefits__copy > p {
    max-width: 500px;
    margin-bottom: 0;
    color: #41576a;
    font-size: 12px;
    line-height: 1.9;
}
.wt-about-purpose__features, .wt-about-benefits__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wt-about-mini {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    min-height: 92px;
    padding: 16px 14px;
    border: 1px solid #ecf0ef;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(29,71,76,.045);
}
.wt-about-mini__icon {
    display: grid;
    place-items: center;
    flex: 0 0 49px;
    width: 49px;
    height: 49px;
    border-radius: 50%;
    font-size: 23px;
}
.wt-about-mini__icon--green { color: #079c78; background: #dff8ec; }
.wt-about-mini__icon--blue { color: #167de2; background: #e4f1ff; }
.wt-about-mini__icon--orange { color: #ef8e16; background: #fff0d9; }
.wt-about-mini__icon--purple { color: #9051de; background: #f2eaff; }
.wt-about-mini h3, .wt-about-fact h3 { margin: 0 0 5px; color: #162e49; font-size: 11.5px; font-weight: 800; line-height: 1.4; }
.wt-about-mini p, .wt-about-fact p { margin: 0; color: #4e6476; font-size: 10.5px; line-height: 1.6; }

/* Four-step horizontal timeline */
.wt-about-process {
    position: relative;
    padding: 50px 0 59px;
    background: linear-gradient(100deg, #edfbf5 0%, #f8fffc 48%, #eafaf4 100%);
    overflow: hidden;
}
.wt-about-process::before { content: ''; position: absolute; width: 230px; height: 230px; border-radius: 50%; background: rgba(117,216,191,.12); left: -135px; top: -100px; }
.wt-about-section-title { margin: 0 auto 39px; max-width: 830px; text-align: center; position: relative; }
.wt-about-section-title h2 { margin: 0 0 11px; color: #122f50; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(28px,3.2vw,41px); line-height: 1.23; letter-spacing: -.045em; }
.wt-about-section-title h2 em { color: #079380; font-style: normal; }
.wt-about-section-title > p { margin: 0; color: #506a7c; font-size: 12.5px; line-height: 1.8; }
.wt-about-process__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.wt-about-process__step { position: relative; min-width: 0; padding: 0 14px; text-align: center; }
.wt-about-process__step:not(:last-child)::after { content: ''; position: absolute; z-index: 0; height: 2px; width: calc(100% - 80px); top: 42px; left: calc(50% + 50px); background: repeating-linear-gradient(to right, #a6dfd5 0 7px, transparent 7px 15px); }
.wt-about-process__number { position: absolute; z-index: 2; top: 17px; left: calc(50% - 59px); display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: #02a98e; color: white; font-size: 11px; font-weight: 800; }
.wt-about-process__step:nth-child(2) .wt-about-process__number { background: #197bec; }
.wt-about-process__step:nth-child(3) .wt-about-process__number { background: #ffb61d; }
.wt-about-process__step:nth-child(4) .wt-about-process__number { background: #9650e8; }
.wt-about-process__symbol { position: relative; z-index: 1; display: grid; place-items: center; margin: 0 auto 19px; width: 88px; height: 88px; border-radius: 50%; background: #fff; box-shadow: 0 6px 20px rgba(15,86,92,.06); font-size: 35px; }
.wt-about-process__symbol--green { color: #02a98e; }
.wt-about-process__symbol--blue { color: #1781ef; }
.wt-about-process__symbol--orange { color: #f5a21d; }
.wt-about-process__symbol--purple { color: #9855e9; }
.wt-about-process__step h3 { margin: 0 0 8px; font-size: 14px; font-weight: 800; color: #17344c; }
.wt-about-process__step p { max-width: 210px; margin: 0 auto; color: #4f6678; font-size: 11.5px; line-height: 1.75; }

/* Why choose */
.wt-about-benefits { padding: 17px 0 12px; }
.wt-about-benefits__surface {
    display: grid;
    grid-template-columns: minmax(0, .91fr) minmax(0, 1.09fr);
    align-items: center;
    gap: 45px;
    padding: 32px 34px;
    border-radius: 19px;
    background: #f0f8fc;
}
.wt-about-benefits__copy > p { margin-bottom: 15px; }
.wt-about-inline-link { display: inline-flex; align-items: center; gap: 9px; color: #076e76; font-size: 11.5px; font-weight: 800; border-bottom: 1px solid #0b8680; padding-bottom: 4px; }
.wt-about-inline-link:hover { color: #0aa08a; }
.wt-about-inline-link i { font-size: 13px; }

/* Important information — four compact cards */
.wt-about-facts { padding: 2px 0 12px; }
.wt-about-facts__surface { padding: 24px 23px 22px; border-radius: 17px; background: #fdf9ec; border: 1px solid #f7f1e4; }
.wt-about-facts__header { margin-bottom: 16px; }
.wt-about-facts__header .wt-about-eyebrow { margin-bottom: 9px; background: #ffedb9; }
.wt-about-facts__header h2 { margin: 0; color: #193455; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(24px, 2.7vw, 33px); line-height: 1.25; letter-spacing: -.04em; }
.wt-about-facts__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.wt-about-fact { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 89px; padding: 14px; border: 1px solid #ebeeee; border-radius: 13px; background: #fff; }
.wt-about-fact .wt-about-mini__icon { flex-basis: 44px; width: 44px; height: 44px; font-size: 20px; }
.wt-about-facts__footnote { margin: 12px 0 0; color: #788086; font-size: 10px; line-height: 1.6; }

/* Final CTA */
.wt-about-final { padding: 0 0 58px; }
.wt-about-final__inner {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 26px;
    min-height: 151px;
    padding: 28px 37px;
    border-radius: 17px;
    overflow: hidden;
    color: white;
    background: linear-gradient(110deg, #034f59 0%, #06556b 55%, #006e67 100%);
}
.wt-about-final__inner::before { content: ''; position: absolute; z-index: -1; left: -100px; bottom: -150px; width: 280px; height: 230px; background: rgba(33,198,159,.21); border-radius: 50%; }
.wt-about-final__inner::after { content: ''; position: absolute; z-index: -1; right: -85px; top: -190px; width: 325px; height: 260px; background: rgba(33,198,159,.16); border-radius: 50%; }
.wt-about-final__mark { display: flex; align-items: center; gap: 9px; flex: 0 0 105px; justify-content: center; height: 88px; border-radius: 14px; background: rgba(255,255,255,.10); }
.wt-about-final__mark i { font-size: 35px; color: #f6ffff; }
.wt-about-final__mark i:last-child { color: #98ebcf; }
.wt-about-final__copy { flex: 1; min-width: 0; }
.wt-about-final__eyebrow { display: block; margin-bottom: 8px; color: #a6f5dd; font-size: 10px; font-weight: 800; letter-spacing: .07em; }
.wt-about-final__copy h2 { margin: 0 0 8px; font-family: Georgia, 'Times New Roman', serif; color: #fff; font-size: clamp(24px, 2.75vw, 35px); line-height: 1.2; letter-spacing: -.03em; }
.wt-about-final__copy p { margin: 0; color: #d7eae9; font-size: 11.5px; line-height: 1.7; }
.wt-about-final__button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex-shrink: 0; min-height: 52px; padding: 14px 24px; border-radius: 11px; background: var(--abt-yellow); color: #123849; font-size: 12px; font-weight: 800; text-align: center; box-shadow: 0 8px 18px rgba(0,0,0,.11); transition: background .2s ease, transform .2s ease; }
.wt-about-final__button:hover { background: #ffe98b; color: #123849; transform: translateY(-2px); }

/* Tablet */
@media (max-width: 980px) {
    .wt-about-shell { width: calc(100% - 44px); }
    .wt-about-hero__grid { gap: 18px; }
    .wt-about-hero h1 { font-size: clamp(35px, 4.6vw, 49px); }
    .wt-about-hero__art { height: 300px; }
    .wt-about-hero__paper { padding: 12px; }
    .wt-about-purpose__surface, .wt-about-benefits__surface { gap: 24px; padding: 26px; }
    .wt-about-mini { gap: 9px; padding: 12px; }
    .wt-about-mini__icon { flex-basis: 41px; width: 41px; height: 41px; font-size: 20px; }
    .wt-about-facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .wt-about-hero__grid { grid-template-columns: 1fr; gap: 10px; padding-block: 38px 46px; }
    .wt-about-hero__copy { text-align: center; }
    .wt-about-hero h1, .wt-about-hero__copy > p { margin-inline: auto; }
    .wt-about-hero__facts { justify-content: center; }
    .wt-about-hero__art { width: min(100%, 490px); height: 320px; margin: 4px auto 0; }
    .wt-about-purpose__surface, .wt-about-benefits__surface { grid-template-columns: 1fr; gap: 24px; }
    .wt-about-process__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 12px; }
    .wt-about-process__step:nth-child(2)::after { display: none; }
    .wt-about-process__step:not(:last-child)::after { width: calc(100% - 80px); }
    .wt-about-final__inner { flex-wrap: wrap; }
    .wt-about-final__copy { flex: 1 1 calc(100% - 140px); }
    .wt-about-final__button { margin-left: 131px; }
}

/* Mobile */
@media (max-width: 560px) {
    .wt-about-shell { width: calc(100% - 30px); }
    .wt-about [id] { scroll-margin-top: 86px; }
    .wt-about-eyebrow { margin-bottom: 14px; padding: 7px 13px; font-size: 9px; }
    .wt-about-hero__grid { padding-block: 28px 32px; }
    .wt-about-hero h1 { font-size: clamp(32px, 8vw, 43px); line-height: 1.14; }
    .wt-about-hero__copy > p { font-size: 12px; line-height: 1.75; }
    .wt-about-hero__facts { gap: 10px 16px; }
    .wt-about-hero__facts li { font-size: 9.5px; }
    .wt-about-hero__facts i { width: 25px; height: 25px; }
    .wt-about-hero__art { height: 260px; }
    .wt-about-hero__paper > i { font-size: 55px; }
    .wt-about-hero__paper::before { width: 27px; height: 27px; }
    .wt-about-hero__doc-tag { right: -12%; padding: 6px 10px; font-size: 11px; }
    .wt-about-hero__jpg-mark { bottom: 12px; font-size: 16px; }
    .wt-about-hero__direction { font-size: 24px; }
    .wt-about-hero__line { height: 5px; }
    .wt-about-purpose { padding: 16px 0 11px; }
    .wt-about-purpose__surface, .wt-about-benefits__surface { padding: 23px 17px; border-radius: 15px; }
    .wt-about-purpose__intro h2, .wt-about-benefits__copy h2 { font-size: 29px; }
    .wt-about-purpose__intro > p, .wt-about-benefits__copy > p { font-size: 11.5px; }
    .wt-about-purpose__features, .wt-about-benefits__grid { gap: 9px; }
    .wt-about-mini { flex-direction: column; align-items: flex-start; min-height: 0; gap: 10px; padding: 13px; }
    .wt-about-mini__icon { flex: 0 0 39px; width: 39px; height: 39px; font-size: 18px; }
    .wt-about-mini h3 { font-size: 11px; }
    .wt-about-mini p { font-size: 10px; }
    .wt-about-process { padding: 39px 0 45px; }
    .wt-about-section-title { margin-bottom: 30px; }
    .wt-about-section-title h2 { font-size: 28px; }
    .wt-about-section-title > p { font-size: 11.5px; }
    .wt-about-process__grid { gap: 30px 5px; }
    .wt-about-process__step { padding: 0 5px; }
    .wt-about-process__step::after { display: none; }
    .wt-about-process__number { left: calc(50% - 51px); top: 11px; width: 25px; height: 25px; font-size: 10px; }
    .wt-about-process__symbol { width: 76px; height: 76px; margin-bottom: 13px; font-size: 29px; }
    .wt-about-process__step h3 { font-size: 12px; }
    .wt-about-process__step p { font-size: 10.5px; }
    .wt-about-benefits { padding: 12px 0; }
    .wt-about-facts__surface { padding: 20px 15px; }
    .wt-about-facts__header h2 { font-size: 25px; }
    .wt-about-facts__grid { gap: 9px; }
    .wt-about-fact { flex-direction: column; align-items: flex-start; gap: 9px; min-height: 115px; padding: 13px; }
    .wt-about-fact .wt-about-mini__icon { flex: 0 0 39px; width: 39px; height: 39px; }
    .wt-about-fact h3 { font-size: 10.5px; }
    .wt-about-fact p { font-size: 10px; }
    .wt-about-final { padding-bottom: 43px; }
    .wt-about-final__inner { flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px 18px; }
    .wt-about-final__mark { flex: none; width: 85px; height: 64px; }
    .wt-about-final__mark i { font-size: 27px; }
    .wt-about-final__copy h2 { font-size: 26px; }
    .wt-about-final__button { width: 100%; margin-left: 0; padding-inline: 12px; font-size: 11px; }
}

@media (max-width: 370px) {
    .wt-about-shell { width: calc(100% - 24px); }
    .wt-about-hero h1 { font-size: 31px; }
    .wt-about-hero__art { height: 220px; }
    .wt-about-hero__paper > i { font-size: 44px; }
    .wt-about-purpose__features, .wt-about-benefits__grid { grid-template-columns: 1fr; }
    .wt-about-mini { flex-direction: row; }
}

@media (prefers-reduced-motion: reduce) {
    .wt-about *, .wt-about *::before, .wt-about *::after { transition: none !important; animation: none !important; }
}