/* ============================================================
   Product Testing page (page-testing.php)
   Design system: bg #0a0a0a / gold #F1B300 / white / Roboto
   ============================================================ */

.tp-page { background:#0a0a0a; color:#fff; overflow:hidden; }
.tp-inner { width:min(1350px,100%); margin:0 auto; padding:0 32px; }
.tp-ph {
    display:block; width:100%; height:100%; min-height:200px;
    background:linear-gradient(135deg,#141414 0%,#1d1d1d 55%,#141414 100%);
}
.tp-ph--tall { min-height:420px; }

.tp-btn {
    display:inline-flex; align-items:center; justify-content:center;
    padding:13px 30px; border-radius:3px; border:1px solid transparent;
    font-size:13px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase;
    text-decoration:none; line-height:1; cursor:pointer;
    transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.tp-btn--primary { background:#F1B300; color:#0a0a0a; border-color:#F1B300; }
.tp-btn--primary:hover { background:#ffc21f; border-color:#ffc21f; transform:translateY(-2px); }

.tp-sec-title {
    color:#fff; font-size:clamp(22px,3vw,34px); font-weight:800;
    letter-spacing:2px; text-transform:uppercase; text-align:center; margin:0 0 14px;
}
.tp-sec-desc {
    color:#a2a2a2; font-size:14px; line-height:1.8; text-align:center;
    max-width:860px; margin:0 auto 44px;
}

/* ---------- Hero ---------- */
.tp-hero { position:relative; padding:150px 0 88px; overflow:hidden; background:#0d0d0d; }
.tp-hero__bg {
    position:absolute; inset:0 0 0 44%; background-size:cover; background-position:center right;
    background-repeat:no-repeat;
}
.tp-hero::before {
    content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(90deg, rgba(8,8,8,.96) 0%, rgba(8,8,8,.9) 40%, rgba(8,8,8,.55) 70%, rgba(8,8,8,.72) 100%);
}
.tp-hero__inner { position:relative; z-index:2; }
.tp-hero__title {
    color:#F1B300; font-size:clamp(30px,4.6vw,54px); font-weight:900;
    line-height:1.1; letter-spacing:.4px; margin:0 0 22px; max-width:620px;
}
.tp-hero__desc { color:#b8b8b8; font-size:14px; line-height:1.85; max-width:500px; margin:0 0 34px; }

/* ---------- Built around real use ---------- */
.tp-built { position:relative; padding:92px 0 88px; }
.tp-built__inner { text-align:center; }
.tp-built__title {
    display:flex; align-items:center; justify-content:center; gap:34px;
    color:#fff; font-size:clamp(22px,3vw,34px); font-weight:800;
    letter-spacing:2px; text-transform:uppercase; margin:0 auto 20px;
}
.tp-built__title > span { white-space:nowrap; }
.tp-built__title::before,
.tp-built__title::after {
    content:""; display:block; height:1px; flex:0 0 auto;
    width:clamp(30px,16vw,260px);
}
.tp-built__title::before { background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.34) 100%); }
.tp-built__title::after  { background:linear-gradient(90deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 100%); }
.tp-built__desc { color:#b0b0b0; font-size:14px; line-height:1.85; max-width:760px; margin:0 auto; }
.tp-built__media {
    margin:46px auto 0; max-width:1180px;
    border:1px solid rgba(255,255,255,.10); background:#0d0d0d;
    overflow:hidden; box-shadow:0 26px 60px rgba(0,0,0,.5);
}
.tp-built__media img { width:100%; height:auto; display:block; }

/* ---------- Card grids ---------- */
.tp-who { padding:84px 0 66px; }
.tp-who .tp-sec-title::after {
    content:""; display:block; width:56px; height:3px;
    background:#F1B300; margin:16px auto 0;
}
.tp-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tp-card {
    text-align:left; padding:26px 28px;
    background:#101010; border:1px solid rgba(241,179,0,.28); border-radius:6px;
}
.tp-card__title {
    color:#fff; font-size:15px; font-weight:800; letter-spacing:1px; line-height:1.3;
    text-transform:uppercase; margin:0 0 12px;
}
.tp-card__desc { color:#9c9c9c; font-size:13px; line-height:1.7; margin:0; text-align:left; }

.tp-eval { padding:20px 0 92px; }
.tp-eval .tp-sec-title::after {
    content:""; display:block; width:56px; height:3px;
    background:#F1B300; margin:14px auto 0;
}
.tp-evalgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.tp-evalcard {
    display:flex; align-items:flex-start; gap:16px; text-align:left;
    padding:22px 20px; background:#0e0e0e;
    border:1px solid rgba(255,255,255,.14); border-radius:6px;
}
.tp-evalcard__icon {
    display:block; width:44px; height:44px; flex:0 0 44px;
    color:#F1B300; margin:0;
}
.tp-evalcard__icon svg { width:100%; height:100%; display:block; }
.tp-evalcard__body { flex:1 1 auto; min-width:0; }
.tp-evalcard__title {
    color:#fff; font-size:13px; font-weight:800; letter-spacing:1px;
    line-height:1.35; text-transform:uppercase; margin:0 0 10px; text-align:left;
}
.tp-evalcard__desc { color:#9c9c9c; font-size:12px; line-height:1.7; margin:0; text-align:left; }

/* ---------- Split sections ---------- */
.tp-split {
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:stretch; gap:22px;
    width:min(1350px,100%); margin:0 auto; padding:0 32px 76px;
}
.tp-split__media { position:relative; overflow:hidden; border-radius:4px; }
.tp-split__media img { width:100%; height:100%; display:block; object-fit:cover; aspect-ratio:16 / 11; }
.tp-split__body {
    display:flex; flex-direction:column; justify-content:center;
    padding:36px 40px;
    background:#101010; border:1px solid rgba(255,255,255,.14); border-radius:6px;
}
.tp-split__title {
    color:#fff; font-size:clamp(22px,2.6vw,40px); font-weight:800;
    letter-spacing:.3px; margin:0 0 16px;
}
.tp-split__title::after {
    content:""; display:block; width:44px; height:3px; background:#F1B300; margin:12px 0 0;
}
.tp-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.tp-list li { display:flex; gap:12px; align-items:flex-start; color:#a8a8a8; font-size:13.7px; line-height:2.3; }
.tp-list strong { color:#e8e8e8; font-weight:700; }
.tp-check { display:block; width:20px; height:20px; color:#F1B300; flex:0 0 auto; margin-top:1px; }
.tp-check svg { width:100%; height:100%; display:block; }

/* ---------- Apply to join ---------- */
.tp-apply { padding:16px 0 92px; }
.tp-apply__inner {
    display:grid; grid-template-columns:minmax(0,0.92fr) minmax(0,1fr);
    gap:46px; align-items:start;
}
.tp-apply__media { position:relative; overflow:hidden; border-radius:2px; }
.tp-apply__media img { width:100%; height:100%; display:block; object-fit:cover; }
.tp-apply__title {
    color:#fff; font-size:clamp(22px,2.8vw,32px); font-weight:800;
    letter-spacing:.3px; text-align:center; margin:0 0 26px;
}
.tp-form { display:flex; flex-direction:column; gap:14px; }
.tp-field { display:grid; grid-template-columns:150px 1fr; gap:14px; align-items:center; }
.tp-field--top { align-items:start; }
.tp-field--top > label { padding-top:14px; }
.tp-field > label {
    color:#dcdcdc; font-size:13px; font-weight:600; line-height:1.4;
}
.tp-field__dual { display:grid; grid-template-columns:74px 1fr; gap:8px; }
.tp-form input[type="text"],
.tp-form input[type="email"],
.tp-form select,
.tp-form textarea {
    width:100%; box-sizing:border-box;
    background:#111; border:1px solid #333; border-radius:3px;
    color:#fff; font-size:13px; font-family:inherit; padding:12px 14px;
    transition:border-color .25s ease, box-shadow .25s ease;
}
.tp-form input::placeholder,
.tp-form textarea::placeholder { color:#6f6f6f; }
.tp-form input:focus,
.tp-form select:focus,
.tp-form textarea:focus {
    outline:none; border-color:#F1B300; box-shadow:0 0 0 2px rgba(241,179,0,.25);
}
.tp-form textarea { resize:vertical; min-height:120px; }
.tp-selectwrap { position:relative; }
.tp-selectwrap::after {
    content:""; position:absolute; right:15px; top:50%; width:6px; height:6px;
    border-right:2px solid #8a8a8a; border-bottom:2px solid #8a8a8a;
    transform:translateY(-70%) rotate(45deg); pointer-events:none;
}
.tp-selectwrap select { appearance:none; -webkit-appearance:none; cursor:pointer; color:#b5b5b5; }
.tp-selectwrap select:has(option[value=""]:checked) { color:#6f6f6f; }
.tp-cc { text-align:center; }
.tp-submit {
    margin-top:8px; width:100%; border:0; border-radius:3px; cursor:pointer;
    background:#F1B300; color:#0a0a0a;
    font-size:13.5px; font-weight:900; letter-spacing:1.6px; text-transform:uppercase;
    padding:15px 20px; display:flex; align-items:center; justify-content:center; gap:10px;
    transition:background .3s ease, transform .3s ease;
}
.tp-submit:hover { background:#ffc21f; transform:translateY(-2px); }
.tp-submit__arrow { font-size:19px; line-height:1; }
.tp-msg { border-radius:3px; padding:12px 16px; font-size:13.5px; margin:0 0 14px; line-height:1.6; }
.tp-msg--ok { background:rgba(241,179,0,.14); border:1px solid rgba(241,179,0,.55); color:#F1B300; }
.tp-msg--err { background:rgba(220,60,60,.14); border:1px solid rgba(220,60,60,.55); color:#ff8a8a; }

/* ---------- IPSC ---------- */
.tp-ipsc { padding:88px 0 104px; text-align:center; }
.tp-ipsc__title {
    color:#F1B300; font-size:clamp(32px,5vw,62px); font-weight:900;
    letter-spacing:2px; text-transform:uppercase; margin:0 0 28px; line-height:1.08;
}
.tp-ipsc__desc { color:#cfcfcf; font-size:15px; line-height:1.85; max-width:940px; margin:0 auto; }

/* ---------- Responsive ---------- */
@media (max-width:1099px) {
    .tp-hero { padding:120px 0 64px; }
    .tp-hero__bg { inset:0; }
    .tp-cards { grid-template-columns:repeat(2,1fr); }
    .tp-evalgrid { grid-template-columns:repeat(2,1fr); }
    .tp-split { grid-template-columns:1fr; gap:20px; }
    .tp-split__media { order:-1; }
    .tp-split__body { padding:28px 24px; max-width:none; }
    .tp-apply__inner { grid-template-columns:1fr; gap:32px; }
    .tp-apply__media { max-width:640px; }
}
@media (max-width:680px) {
    .tp-inner { padding-left:20px; padding-right:20px; }
    .tp-hero { padding:104px 0 52px; }
    .tp-cards { grid-template-columns:1fr; gap:30px; }
    .tp-evalgrid { grid-template-columns:1fr; gap:30px; }
    .tp-built { padding:64px 0 58px; }
    .tp-built__title { gap:0; }
    .tp-built__title::before, .tp-built__title::after { display:none; }
    .tp-built__media { margin-top:30px; }
    .tp-who { padding:60px 0 44px; }
    .tp-eval { padding-bottom:64px; }
    .tp-split { padding-bottom:56px; }
    .tp-apply { padding-bottom:64px; }
    .tp-field { grid-template-columns:1fr; gap:7px; }
    .tp-field--top > label { padding-top:0; }
    .tp-ipsc { padding:56px 0 70px; }
}