:root {
  --tp-navy: #0e2443;
  --tp-blue: #1454b8;
  --tp-muted: #495d77;
  --tp-line: #d9e2ee;
  --tp-wash: #eaf2fc;
}

.tp-case { color: var(--tp-navy); background: #fff; padding-top: 96px; }
.tp-case :where(h1, h2, h3, p, figure), .tp-gallery-project :where(h2, h3, p, figure) { margin: 0; }
.tp-wrap { max-width: 1480px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 60px); }
.tp-crumbs { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; color: var(--tp-muted); font-size: .82rem; }
.tp-crumbs a:hover, .tp-facts a:hover, .tp-shot figcaption a:hover { color: var(--tp-blue); text-decoration: underline; }
.tp-label { color: var(--tp-blue); font: 700 .75rem/1.5 var(--font-mono, monospace); letter-spacing: .105em; text-transform: uppercase; }
.tp-hero { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 4vw, 68px); align-items: center; padding-block: clamp(54px, 7vw, 96px) clamp(42px, 6vw, 80px); }
.tp-hero-copy { display: grid; gap: 18px; align-content: center; }
.tp-hero h1 { font-size: clamp(3rem, 6.1vw, 6.4rem); line-height: .95; letter-spacing: -.077em; }
.tp-hero-copy > p:not(.tp-label):not(.tp-hero-lead), .tp-section-head > p, .tp-finish p:not(.tp-label) { color: var(--tp-muted); font-size: clamp(1rem, 1.4vw, 1.19rem); line-height: 1.6; }
.tp-hero .tp-hero-lead { font-size: clamp(1.32rem, 2.4vw, 2.05rem); font-weight: 650; letter-spacing: -.033em; line-height: 1.18; max-width: 23ch; }
.tp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 8px; }
.tp-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 47px; border: 1px solid transparent; border-radius: 8px; padding: 10px 16px; font-weight: 650; font-size: .9rem; }
.tp-button.tp-primary { color: #fff; background: var(--tp-blue); }
.tp-button.tp-primary:hover { color: #fff; background: #103d88; }
.tp-button.tp-secondary { color: var(--tp-navy); background: #fff; border-color: #c5d5e8; }
.tp-button.tp-secondary:hover { background: #edf4fc; }
.tp-devices { isolation: isolate; min-width: 0; position: relative; display: grid; align-items: end; grid-template-columns: minmax(0, 1fr) 18%; gap: 10px; padding: clamp(14px, 2.15vw, 34px); border-radius: 20px; background: linear-gradient(150deg, #f2f7ff, #d9e8fb); border: 1px solid var(--tp-line); }
.tp-desktop { overflow: hidden; background: #fff; border-radius: 9px; border: 1px solid #bacde6; box-shadow: 0 18px 33px #153b7320; }
.tp-desktop img, .tp-phone { width: 100%; height: auto; display: block; }
.tp-browser { display: flex; align-items: center; gap: 5px; padding: 5px 10px; color: var(--tp-muted); }
.tp-browser span { display: block; width: 5px; height: 5px; border-radius: 100%; background: #9eb3ce; }
.tp-browser small { margin-left: 6px; font: 600 9px/1.4 var(--font-mono, monospace); }
.tp-phone { border: 3px solid var(--tp-navy); border-radius: clamp(9px, 1.25vw, 18px); box-shadow: 0 10px 18px #153b7333; }
.tp-devices figcaption { grid-column: 1 / -1; padding-top: 8px; font-size: .75rem; color: var(--tp-muted); }
.tp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr); border-block: 1px solid var(--tp-line); }
.tp-facts > * { min-width: 0; padding: clamp(15px, 2.5vw, 30px); }
.tp-facts > * + * { border-left: 1px solid var(--tp-line); }
.tp-facts > div:first-child { padding-left: 0; }
.tp-facts strong { display: block; font-size: clamp(2rem, 4.2vw, 3.7rem); font-weight: 680; line-height: 1; letter-spacing: -.075em; }
.tp-facts span { display: block; margin-top: 8px; color: var(--tp-muted); font-size: .9rem; line-height: 1.35; }
.tp-facts nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px 16px; padding-right: 0; color: var(--tp-blue); font-size: .88rem; font-weight: 630; }
.tp-motion { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(20px, 4vw, 56px); align-items: center; margin-top: clamp(30px, 5vw, 62px); padding: clamp(22px, 4vw, 56px); border-radius: 20px; color: #f7fbff; background: radial-gradient(ellipse at 83% 16%, #244d7e, #10294a 66%); scroll-margin-top: 76px; }
.tp-motion .tp-label { color: #a9cffd; }
.tp-motion h2 { margin-top: 10px; max-width: 13ch; font-size: clamp(2rem, 4vw, 3.9rem); letter-spacing: -.062em; line-height: 1.03; }
.tp-motion-copy > p:not(.tp-label) { margin-top: 16px; max-width: 34ch; color: #d0e1f7; line-height: 1.6; }
.tp-motion-copy > a { display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; padding-block: 4px; border-bottom: 1px solid #a9cffd; color: #f7fbff; font-weight: 650; }
.tp-motion-copy > a:hover { color: #a9cffd; }
.tp-laptop { min-width: 0; padding-top: 11px; }
.tp-laptop-lid { position: relative; width: 91%; margin: auto; padding: clamp(6px, 1.3vw, 16px); border: 1px solid #98bde5; border-radius: clamp(8px, 1.5vw, 16px) clamp(8px, 1.5vw, 16px) 4px 4px; background: #132d50; box-shadow: 0 0 0 6px #ffffff12, 0 17px 40px #061c37a0; }
.tp-laptop-lid::before { content: ''; position: absolute; top: 4px; left: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%; background: #7da6cf; }
.tp-laptop-screen { position: relative; overflow: hidden; border-radius: 3px; background: #0e2443; aspect-ratio: 8 / 5; }
.tp-laptop-screen video { display: block; width: 100%; height: 100%; object-fit: contain; }
.tp-motion-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max-content; max-width: 90%; display: flex; align-items: center; gap: 11px; padding: 11px 17px; border: 1px solid #e5effc; border-radius: 8px; background: #f7fbff; color: #0e2443; box-shadow: 0 8px 22px #09183180; font: inherit; font-size: .93rem; font-weight: 700; cursor: pointer; }
.tp-motion-play[hidden] { display: none; }
.tp-motion-play:hover { background: #e1edfd; }
.tp-laptop-base { position: relative; width: 100%; height: clamp(8px, 1.2vw, 15px); border: 1px solid #98bde5; border-radius: 1px 1px 45% 45% / 1px 1px 70% 70%; background: linear-gradient(#587caa, #294970); }
.tp-laptop-base::after { content: ''; position: absolute; top: -1px; left: 42%; width: 16%; height: 40%; border-radius: 0 0 5px 5px; background: #a0bcdf; }
.tp-laptop figcaption { margin-top: 13px; text-align: center; color: #c2d8f4; font-size: .8rem; }
.tp-section { padding-block: clamp(55px, 8vw, 105px); border-bottom: 1px solid var(--tp-line); scroll-margin-top: 76px; }
.tp-section-head { display: grid; gap: 22px; margin-bottom: clamp(26px, 3.7vw, 48px); }
.tp-split { grid-template-columns: minmax(0, 1fr) minmax(0, .76fr); align-items: end; gap: 24px 54px; }
.tp-section-head h2, .tp-finish h2 { margin-top: 9px; font-size: clamp(2.05rem, 4.1vw, 4rem); letter-spacing: -.065em; font-weight: 690; line-height: 1.02; }
.tp-steps, .tp-review-grid, .tp-photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tp-steps article, .tp-review-grid article { min-width: 0; padding: clamp(18px, 2.8vw, 34px); border: 1px solid var(--tp-line); border-radius: 13px; background: #f6f9fe; }
.tp-review-grid article { background: #fff; border-top: 3px solid var(--tp-blue); }
.tp-review-grid h3 { margin-top: 12px; }
.tp-review-grid ul { margin: 13px 0 0; padding-left: 1.15rem; color: var(--tp-muted); }
.tp-review-grid li + li { margin-top: .55rem; }
.tp-review-grid li::marker { color: var(--tp-blue); }
.tp-photo-grid figure { overflow: hidden; border: 1px solid var(--tp-line); border-radius: 12px; }
.tp-photo-grid img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.tp-photo-grid figure:nth-child(2) img { object-position: 50% 55%; }
.tp-photo-grid figcaption { padding: 11px 15px; color: var(--tp-navy); font-weight: 650; }
.tp-steps article > span { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-bottom: 22px; border: 1px solid #cad9ee; border-radius: 50%; color: var(--tp-blue); font: 650 .78rem/1 var(--font-mono, monospace); }
.tp-section h3 { font-size: clamp(1.13rem, 2vw, 1.64rem); font-weight: 690; letter-spacing: -.032em; line-height: 1.2; }
.tp-section article p, .tp-mobile-study p:not(.tp-label) { margin-top: 10px; color: var(--tp-muted); line-height: 1.58; }
.tp-compare, .tp-screen-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.tp-shot { min-width: 0; overflow: hidden; border: 1px solid var(--tp-line); border-radius: 13px; background: #f7f9fc; display: flex; flex-direction: column; }
.tp-shot-new { border-color: #9dbce6; background: var(--tp-wash); }
.tp-shot-link { display: block; position: relative; overflow: hidden; min-width: 0; background: #fff; cursor: zoom-in; }
.tp-shot-link img { display: block; width: 100%; height: auto; }
.tp-shot-link:focus-visible, .tp-case a:focus-visible, .tp-lightbox button:focus-visible { outline: 3px solid #2287ff; outline-offset: -3px; }
.tp-shot figcaption { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 13px 17px; }
.tp-shot figcaption strong { font-size: clamp(1rem, 1.8vw, 1.22rem); font-weight: 680; }
.tp-shot figcaption a { flex-shrink: 0; color: var(--tp-blue); font-size: .83rem; font-weight: 650; }
.tp-shot figcaption p, .tp-section .tp-note { color: var(--tp-muted); font-size: .9rem; }
.tp-section .tp-note { margin-top: 12px; }
.tp-screen-grid .tp-shot-link { aspect-ratio: 8 / 5; display: grid; align-items: center; background: #fff; border-bottom: 1px solid var(--tp-line); }
.tp-screen-grid .tp-shot-link img { max-height: 100%; object-fit: contain; }
.tp-mobile-study { margin-top: 18px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 28px; padding: clamp(20px, 4vw, 52px); border-radius: 16px; background: var(--tp-wash); }
.tp-mobile-study h3 { margin-top: 10px; font-size: clamp(1.46rem, 3.6vw, 2.8rem); max-width: 16ch; }
.tp-mobile-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 200px)); justify-content: center; gap: clamp(10px, 3vw, 30px); }
.tp-mobile-pair a { border: 4px solid var(--tp-navy); border-radius: clamp(10px, 1.6vw, 19px); box-shadow: 0 12px 24px #153b731c; }
.tp-finish { margin-block: clamp(40px, 7vw, 82px); padding: clamp(24px, 4vw, 58px); border-radius: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 22px; background: var(--tp-wash); }
.tp-finish h2 { font-size: clamp(1.95rem, 3.5vw, 3.15rem); }
.tp-finish p:not(.tp-label) { margin-top: 11px; }
.tp-lightbox { position: fixed; max-width: min(96vw, 1320px); width: max-content; max-height: 94dvh; margin: auto; padding: 0; border: 0; border-radius: 12px; background: #0d203a; color: white; }
.tp-lightbox::backdrop { background: #081426e8; }
.tp-lightbox-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px; }
.tp-lightbox-bar p { margin: 0; font-size: .83rem; }
.tp-lightbox-controls { display: flex; align-items: center; gap: 5px; }
.tp-lightbox-controls button { width: 40px; height: 40px; border-radius: 7px; border: 1px solid #667c9a; background: #1a3457; color: white; font: inherit; font-size: 1.3rem; cursor: pointer; }
.tp-lightbox-controls button:hover { background: #31547e; }
.tp-lightbox img { display: block; max-width: 100%; max-height: calc(94dvh - 72px); height: auto; object-fit: contain; margin-inline: auto; }

.case-preview-grid .tp-home-feature { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); align-items: stretch; }
.case-preview-grid .tp-home-feature .case-preview-body { display: flex; flex-direction: column; justify-content: center; }
.case-preview-grid .tp-home-feature .case-preview-media, .live-project-card.tp-project-card .live-project-card-media { background: var(--tp-wash); }
.tp-gallery-project { padding-top: 0; }
.tp-gallery-project > a { display: grid; grid-template-columns: minmax(0, 1.17fr) minmax(0, .83fr); align-items: center; gap: clamp(18px, 4vw, 45px); background: var(--tp-wash); color: var(--tp-navy); padding: clamp(16px, 3.8vw, 40px); border: 1px solid var(--tp-line); border-radius: 18px; }
.tp-gallery-project img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid #bdcfe7; }
.tp-gallery-project h2 { margin-block: 6px; font-size: clamp(1.7rem, 4vw, 3.6rem); font-weight: 700; letter-spacing: -.06em; line-height: 1.07; }
.tp-gallery-project .tp-gallery-lead { color: var(--tp-muted); margin-top: 12px; max-width: 42ch; }
.tp-gallery-project strong { display: block; margin-top: 15px; font-size: .93rem; color: var(--tp-blue); }
.tp-gallery-project a:hover strong { text-decoration: underline; }

@media (max-width: 980px) {
  .tp-hero { grid-template-columns: 1fr; gap: 28px; }
  .tp-hero-copy { max-width: 680px; }
  .tp-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tp-facts nav { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--tp-line); justify-content: flex-start; padding: 12px 0; }
}

@media (max-width: 680px) {
  .tp-case { padding-top: 82px; }
  .tp-hero { padding-block: 36px; }
  .tp-hero h1 { font-size: clamp(2.25rem, 10.5vw, 4.35rem); }
  .tp-facts > * { padding-inline: 10px; }
  .tp-facts strong { font-size: 1.9rem; }
  .tp-facts span { font-size: .75rem; }
  .tp-split, .tp-steps, .tp-review-grid, .tp-photo-grid, .tp-motion, .tp-compare, .tp-screen-grid, .tp-mobile-study, .tp-gallery-project > a { grid-template-columns: 1fr; }
  .tp-steps article > span { margin-bottom: 10px; }
  .tp-laptop-lid::before { display: none; }
  .tp-motion-play { padding: 7px 10px; font-size: .79rem; }
  .case-preview-grid .tp-home-feature { display: block; }
  .tp-lightbox-bar p { font-size: .73rem; }
  .tp-lightbox-controls button { width: 35px; height: 35px; }
}