:root {
  --accent: #3aa142;       /* active title underline */
  --inactive-opacity: 0.3; /* faded report sections */
}
.pp-security,
.pp-modalities {
    --pp-green: rgba(28, 147, 35, 1);
    --pp-green-dark: rgba(59, 163, 65, 1);
    --pp-ink: rgba(14, 14, 14, 1);
    --pp-muted: rgba(107, 107, 107, 1);
    --pp-card-radius: 12px;
    --pp-mod-per: 3;
    --pp-mod-gap: 26px;
}
.pp-accent {
    color: var(--pp-green);
}
.pp-media-card {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 5 / 6;
    border-radius: var(--pp-card-radius);
    overflow: hidden;
}
.pp-media-card--wide {
    aspect-ratio: 36 / 25;
    min-height: 320px;
}
.pp-media-card__img {
    position: absolute;
    inset: 0;
    object-fit: cover;
    object-position: center;
    display: block;
}
.pp-media-card__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(6 10 7 / 0.94) 0%, rgb(6 10 7 / 0.8) 20%, rgb(6 10 7 / 0.3) 42%, #fff0 62%);
}
.pp-media-card--wide .pp-media-card__scrim {
    background: linear-gradient(
        to top,
        rgb(6 10 7 / 0.94) 0%,
        rgb(6 10 7 / 0.82) 18%,
        rgb(6 10 7 / 0.36) 38%,
        #fff0 58%
    );
}
.pp-media-card__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 28px 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pp-media-card--wide .pp-media-card__body {
    padding: clamp(22px, 2.4vw, 34px) clamp(22px, 2.6vw, 38px) clamp(24px, 2.6vw, 36px);
    gap: 12px;
}
.pp-media-card__title {
    margin: 0;
    font-family: "Inter";
    font-weight: 400;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.01em;
    color: #fff;
}
.pp-media-card__text {
    margin: 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.01em;
    color: rgb(233 233 233);
    text-wrap: pretty;
}
.pp-media-card--wide .pp-media-card__text {
    max-width: 620px;
}
.pp-security {
    background: #fff;
    padding: clamp(60px, 7vw, 104px) 0 clamp(40px, 5vw, 64px);
    color: var(--pp-ink);
}
.pp-security .pp-center-title {
    margin-bottom: clamp(36px, 4vw, 60px);
}
.pp-sec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(20px, 2.2vw, 30px);
}
.pp-modalities {
    background: #fff;
    padding: clamp(56px, 6vw, 96px) 0 clamp(60px, 7vw, 104px);
    color: var(--pp-ink);
    overflow: hidden;
}
.pp-mod-head {
    margin-bottom: clamp(36px, 4vw, 56px);
}
.pp-mod-slider {
    position: relative;
    width: 100%;
    outline: none;
    container-type: inline-size;
}
.pp-mod-viewport {
    overflow: hidden;
    padding-left: 0;
    margin-right: calc((100% - 100vw) / 2);
    touch-action: pan-y;
}
.pp-mod-track {
    display: flex;
    gap: var(--pp-mod-gap);
    margin: 0;
    padding: 4px 0 8px;
    list-style: none;
    transform: translate3d(0, 0, 0);
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}
.pp-mod-slide {
    flex: 0 0 auto;
    min-width: 240px;
    width: calc((100cqw - (var(--pp-mod-gap) * (var(--pp-mod-per) - 1))) / var(--pp-mod-per));
}
.pp-mod-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-top: clamp(28px, 3vw, 40px);
}
.pp-mod-arrow {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--pp-ink);
    border: 1px solid rgb(15 23 42 / 0.12);
    cursor: pointer;
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        background 0.25s ease;
}
.pp-mod-arrow:hover {
    transform: translateY(-2px);
    border-color: rgb(28 147 35 / 0.4);
    color: var(--pp-green);
}
.pp-mod-arrow--primary {
    background: var(--pp-green);
    color: #fff;
    border-color: var(--pp-green);
    box-shadow: 0 10px 24px rgb(28 147 35 / 0.32);
}
.pp-mod-arrow--primary:hover {
    background: var(--pp-green-dark);
    color: #fff;
    border-color: var(--pp-green-dark);
}

.tat-section{padding:100px 0;}
.tat-container{max-width:1200px;}

.tat-title{
  font-size:32px;font-weight:400;line-height:40px;
  letter-spacing:-1%;color:rgba(14, 14, 14, 1);margin:0;text-wrap:balance;
}
.tat-desc{
  margin:14px 0 0;max-width:560px;font-weight: 400;
  font-size:18px;line-height:24px;color:rgba(107, 107, 107, 1);text-wrap:pretty;letter-spacing: -1.5%;
}

.tat-feats{list-style:none;margin:65px 0 0;padding:0;display:flex;flex-direction:column;gap:20px;}
.tat-feat{display:flex;align-items:center;gap:12px;font-size:clamp(16px,1.3vw,18px);line-height:24px;color:#0e0e0e;}
.tat-feat svg{flex:none;width:24px;height:24px;fill:none;stroke:#009600;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}

.tat-media{
  width:100%;max-width:480px;margin-left:auto;
  aspect-ratio:480 / 580;border-radius:16px;overflow:hidden;background:#eef2f1;
}
.tat-media img{display:block;width:100%;height:100%;object-fit:cover;}

@media (max-width:991.98px){
  .tat-media{margin:0 auto;}
  .tat-desc{max-width:none;}
}

@media (max-width: 991px) {
    .pp-modalities {
        --pp-mod-per: 2;
    }
    .pp-media-card__title {
        font-size: 28px;
        line-height: 36px;
    }
}
@media (max-width: 767px) {
    .pp-security,
    .pp-modalities {
        --pp-mod-gap: 16px;
    }
}
@media (max-width: 599px) {
    .pp-modalities {
        --pp-mod-per: 1;
    }
    .pp-mod-slide {
        width: calc(100cqw - 36px);
    }
    .pp-media-card--wide {
        aspect-ratio: 4 / 3;
    }
    .pp-media-card__body,
    .pp-media-card--wide .pp-media-card__body {
        padding: 20px 20px 24px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .pp-mod-track {
        transition: none;
    }
}


/* -----report-format-------- */

.tox { padding: 100px 24px; display: flex; flex-direction: column; align-items: center; gap: 64px; }
.tox-img img { display: block; width: 100%; }
/* ---------- Desktop ---------- */
.tox-grid {
  width: 100%; max-width: 1240px;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 9fr); column-gap: 56px;
}
.tox-card {
  grid-column: 2; grid-row: 1 / span 7;
  background: #fff; border-radius: 16px;
  box-shadow: 0 10px 50px rgba(20, 30, 60, .08), 0 1px 3px rgba(20, 30, 60, .05);
}
.tox-intro { grid-column: 1; grid-row: 1; padding-top: 32px; }
.tox-intro h2 { margin: 0; font-size: 42px; line-height: 110.00000000000001%; font-weight: 500; letter-spacing: -2%; text-wrap: pretty;font-family: var(--pp-serif); }
.tox-head { grid-column: 2; grid-row: 1; padding: 42px 36px 8px; display: flex; flex-direction: column; gap: 8px; position: relative; }

.tox-row { display: contents; }
.tox-text { grid-column: 1; grid-row: var(--row); margin: 16px 0 16px -28px; padding: 24px 28px; min-height: 30vh; cursor: pointer; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; align-self: start; border-radius: 16px; transition: background .5s, box-shadow .5s, transform .5s cubic-bezier(.2,.7,.2,1); }
.tox-row.is-active .tox-text { background: color-mix(in oklch, var(--accent) 9%, #fff); transform: translateX(8px); }
.tox-text h3 {
  margin: 0; padding-bottom: 6px; font-size: 24px; font-weight: 500; color: rgba(14, 14, 14, 1); transition: color .4s;
}
.tox-text p { margin: 0; font-size: 16px; line-height: 24px; color: rgba(107, 107, 107, 1); max-width: 420px; text-wrap: pretty;font-weight: 400; }
.tox-img { grid-column: 2; grid-row: var(--row); padding: 24px 36px; position: relative; align-self: start; }
.tox-img img { background: #fff; border-radius: 4px; opacity: var(--inactive-opacity); filter: grayscale(.6); transition: opacity .5s ease, filter .5s; }
.tox-row.is-last .tox-text { min-height: 0; }
.tox-row.is-last .tox-img { padding-bottom: 56px; }

.tox-row.is-active .tox-img img { opacity: 1; filter: none; }

/* ---------- CTA ---------- */
.tox-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.btn { color: #fff; text-decoration: none; font-size: 16px; font-weight: 500; padding: 14px 28px; border-radius: 999px; transition: background .2s; }
.btn:hover { color: #fff; }
.btn-blue { background: #3aa142; }
.btn-blue:hover { background: #2e8535; }
.btn-green { background: #3aa142; }
.btn-green:hover { background: #2e8535; }

/* ---------- Mobile ---------- */
@media (max-width: 899px) {
  .tox-grid { display: flex; flex-direction: column; gap: 28px; max-width: 720px; }
  .tox-card, .tox-head { display: none; }
  .tox-intro { padding: 0; }
  .tox-intro h2 { font-size: 32px; line-height: 1.35; text-align: center; text-wrap: balance; margin-bottom: 12px; }
  .tox-row {
    display: flex; flex-direction: column; gap: 20px;
    border: 1px solid #e4e6ea; border-radius: 16px; padding: 24px 18px; background: #fff;
    opacity: 0; transform: translateY(40px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
  }
  .tox-row.is-seen { opacity: 1; transform: none; }
  .tox-text, .tox-row.is-last .tox-text, .tox-row.is-active .tox-text { margin: 0; padding: 0; min-height: 0; gap: 6px; cursor: default; background: none; box-shadow: none; transform: none; }
.tox-num,   .tox-text h3, .tox-row.is-active .tox-text h3 { font-size: 22px; font-weight: 700; color: #1a1a1a; padding: 0; border: 0; }
  .tox-text p { font-size: 16px; line-height: 1.5; color: #555; }
  .tox-img, .tox-row.is-last .tox-img { padding: 0; }
  .tox-img img { opacity: 1; filter: none; }
}