/*
 * 3by400 portfolio item details pages v1 (/portfolio/item/<slug>, ZOO item view). Shared by all 32 pages.
 * Loaded ONLY by the details content itself (<link> at the top of each ZOO item's Description), so it never loads elsewhere.
 * Every rule is scoped under the root <div id="tb4-pi" class="tb4-pi pd pp pi"> (or html/body/#tm-main/#yoo-zoo:has(#tb4-pi)).
 * Generated by src/build_css.py from the approved design CSS (home-v4-seo, home-v8/v9/v9b-full, home-landing-v1,
 * page-design-v1, page-portfolio-v1, page-portfolio-item-v1; in that order) + the reset/page-level block below.
 * PENDING COPY / CONFIRMED badges (.pi-pending) are styled as in the normal view; the ?clean view is not reproduced.
 * Managed by deploy-portfolio-items-build.php. ASCII-only.
 */
@font-face { font-family: "Lato"; src: url("/images/home-v4/fonts/Lato-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("/images/home-v4/fonts/Lato-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("/images/home-v4/fonts/Lato-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("/images/home-v4/fonts/LibreBaskerville-VariableFont_wght.ttf") format("truetype"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("/images/home-v4/fonts/LibreBaskerville-Italic-VariableFont_wght.ttf") format("truetype"); font-weight: 400 700; font-style: italic; font-display: swap; }

/* ---------- page level (only on a page that contains the details root) ---------- */
html:has(#tb4-pi), body:has(#tb4-pi) { overflow-x: clip; }
/* full-width bands: no YOOtheme section padding / container around the ZOO item */
#tm-main:has(#tb4-pi) { padding-top: 0; padding-bottom: 0; }
#tm-main:has(#tb4-pi) > .uk-container { max-width: none; padding-left: 0; padding-right: 0; }
#yoo-zoo:has(#tb4-pi) .floatbox { overflow: visible; }
#yoo-zoo .item .pos-description .element:has(> #tb4-pi) { margin: 0; padding: 0; border: 0; }
/* the old "FEATURED TRANSFORMATION" banner module (position fullscreen, assigned to the ZOO menu item) is not part of
   the details design: hidden on the details pages only (it stays on /portfolio and the tag pages) */
body:has(#tb4-pi) .tm-legacy-fullscreen { display: none !important; }

/* ---------- root + reset: start from browser defaults like the mock (theme/ZOO styles do not reach inside) ---------- */
#tb4-pi#tb4-pi { all: revert; display: block; margin: 0; padding: 0; font-size: 16px; line-height: normal; font-weight: 400; font-style: normal;
  letter-spacing: normal; word-spacing: normal; text-transform: none; text-align: start; text-indent: 0; white-space: normal;
  font-feature-settings: normal; font-variant: normal; font-kerning: auto; overflow-wrap: normal; hyphens: manual; }
#tb4-pi#tb4-pi :where(:not(svg, svg *, img)) { all: revert; }
#tb4-pi#tb4-pi :where(svg, img) { vertical-align: baseline; border: 0; border-radius: 0; box-shadow: none; object-fit: fill; max-width: none; }
#tb4-pi#tb4-pi :where(svg:not(:root)) { overflow: hidden; }

/* ---------- design rules (scoped) ---------- */
#tb4-pi#tb4-pi { --green: #3DB54A; --lime: #9FCC45; --yellow: #D7DF28; --ink: #231F20; --ink-soft: #3a3637; --muted: #5c5856; --cream: #ffffff; --cream-2: #f7f7f7; --line: #e8e8e8; --white: #ffffff; --serif: "Libre Baskerville", "Source Serif Pro", Georgia, serif; --sans: "Lato", "Albert Sans", "Helvetica Neue", Arial, sans-serif; }
#tb4-pi#tb4-pi, #tb4-pi#tb4-pi * { box-sizing: border-box; }
#tb4-pi#tb4-pi, #tb4-pi#tb4-pi { margin: 0; padding: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
#tb4-pi#tb4-pi img { max-width: 100%; height: auto; display: block; }
#tb4-pi#tb4-pi a { color: inherit; text-decoration: none; }
#tb4-pi#tb4-pi { max-width: 1120px; margin: 0 auto; padding: 0 28px 28px; background: var(--cream); }
#tb4-pi#tb4-pi .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 700; font-size: 14px; line-height: 1; border-radius: 6px; padding: 12px 18px; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; }
#tb4-pi#tb4-pi .btn-primary { background: var(--green); color: #fff; border-color: var(--green); padding: 13px 20px; font-size: 15px; }
#tb4-pi#tb4-pi .btn-primary:hover { filter: brightness(0.95); }
#tb4-pi#tb4-pi .text-link { color: var(--ink-soft); font-size: 14px; font-weight: 600; border-bottom: 1px solid transparent; }
#tb4-pi#tb4-pi .text-link:hover { color: var(--green); border-bottom-color: var(--green); }
#tb4-pi#tb4-pi .hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 28px; align-items: center; padding: 28px 0 22px; min-height: 360px; }
#tb4-pi#tb4-pi .hero h1 { margin: 0 0 14px; font-family: var(--serif); font-weight: 700; font-size: 42px; line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); max-width: 14ch; }
#tb4-pi#tb4-pi .subhead { margin: 0 0 10px; font-size: 17px; line-height: 1.45; color: var(--ink-soft); max-width: 38ch; }
#tb4-pi#tb4-pi .hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
#tb4-pi#tb4-pi .hero-art { display: flex; justify-content: center; align-items: center; }
#tb4-pi#tb4-pi .hero-art img { width: 100%; max-width: 580px; mix-blend-mode: multiply; }
#tb4-pi#tb4-pi .section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
#tb4-pi#tb4-pi .section-head h2 { margin: 0; font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
#tb4-pi#tb4-pi .tags { font-size: 12px !important; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted) !important; margin-bottom: 16px !important; }
@media (max-width: 860px) {
  #tb4-pi#tb4-pi { padding: 0 18px 24px; }
  #tb4-pi#tb4-pi .hero { grid-template-columns: 1fr; gap: 18px; padding: 28px 0 20px; }
  #tb4-pi#tb4-pi .hero h1 { font-size: 32px; max-width: none; }
  #tb4-pi#tb4-pi .hero-art { order: -1; }
  #tb4-pi#tb4-pi .hero-art img { max-width: 380px; margin: 0 auto; }
  #tb4-pi#tb4-pi .hero-ctas { gap: 10px; }
  #tb4-pi#tb4-pi .hero-ctas .text-link { width: 100%; margin-top: 4px; }
}
#tb4-pi#tb4-pi { --gut:max(40px, calc((100vw - 1200px)/2)); --tint:#F3F8E6; }
#tb4-pi#tb4-pi, #tb4-pi#tb4-pi { background:#fff; }
#tb4-pi#tb4-pi { max-width:none;padding:0;margin:0;background:#fff; }
#tb4-pi#tb4-pi .hero { padding:56px var(--gut) 60px;min-height:440px;gap:40px;grid-template-columns:1fr 1.05fr; }
#tb4-pi#tb4-pi .hero-art img { max-width:660px; }
#tb4-pi#tb4-pi .hero h1 { font-size:48px; }
#tb4-pi#tb4-pi .section-head { align-items:flex-end;margin-bottom:14px; }
#tb4-pi#tb4-pi .section-head h2 { font-family:var(--serif);font-size:36px;letter-spacing:-0.01em;text-transform:none;font-weight:700;position:relative;padding-top:18px; }
#tb4-pi#tb4-pi .section-head h2::before { content:"";position:absolute;left:0;top:0;width:56px;height:5px;border-radius:3px;background:linear-gradient(90deg,#D7DF28,#9FCC45,#3DB54A); }
#tb4-pi#tb4-pi .section-head .text-link { font-size:15px;color:#2f8f3a; }
@media (max-width:860px) {
  #tb4-pi#tb4-pi { --gut:20px; }
  #tb4-pi#tb4-pi { padding:0; }
  #tb4-pi#tb4-pi .hero { padding:32px var(--gut) 40px;min-height:0; }
  #tb4-pi#tb4-pi .hero h1 { font-size:34px; }
  #tb4-pi#tb4-pi .section-head { flex-direction:column;align-items:flex-start;gap:6px; }
  #tb4-pi#tb4-pi .section-head h2 { font-size:30px; }
  #tb4-pi#tb4-pi .hero { grid-template-columns:1fr; }
}
#tb4-pi#tb4-pi .lp-cta { background:#231F20;padding:72px var(--gut);position:relative;overflow:hidden; border-top:6px solid transparent;border-image:linear-gradient(90deg,#3DB54A,#9FCC45 50%,#D7DF28) 1; }
#tb4-pi#tb4-pi .lp-cta::after { content:"";position:absolute;right:-200px;top:-300px;width:800px;height:800px;border-radius:50%; background:radial-gradient(circle,rgba(159,204,69,.14),rgba(159,204,69,0) 70%);pointer-events:none; }
#tb4-pi#tb4-pi .lp-cta-inner { position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:40px; }
#tb4-pi#tb4-pi .lp-cta p { margin:0;font-size:17px;line-height:1.5;color:#c9c6c3;max-width:56ch; }
#tb4-pi#tb4-pi .lp-cta-actions { display:flex;flex-direction:column;align-items:center;gap:12px;flex:0 0 auto; }
#tb4-pi#tb4-pi .lp-cta .btn-primary { font-size:17px;padding:17px 30px; }
#tb4-pi#tb4-pi .lp-cta-phone { color:#9FCC45;font-weight:700;font-size:15px; }
@media (max-width:860px) {
  #tb4-pi#tb4-pi .lp-cta { padding:52px var(--gut); }
  #tb4-pi#tb4-pi .lp-cta-inner { flex-direction:column;align-items:flex-start;gap:26px; }
  #tb4-pi#tb4-pi .lp-cta-actions { align-items:stretch;width:100%; }
  #tb4-pi#tb4-pi .lp-cta .btn-primary { width:100%;min-height:54px; }
  #tb4-pi#tb4-pi .lp-cta-phone { text-align:center; }
}
#tb4-pi#tb4-pi .pd-hero { padding:48px var(--gut) 64px;min-height:0;grid-template-columns:1fr 1.05fr; }
#tb4-pi#tb4-pi .crumbs { margin:0 0 22px;font-size:13px;color:var(--muted); }
#tb4-pi#tb4-pi .crumbs a { color:#2f8f3a;font-weight:700; }
#tb4-pi#tb4-pi .crumbs span { margin:0 6px;color:#b7b3ae; }
#tb4-pi#tb4-pi .pd-hero h1 { max-width:13ch;margin-bottom:18px; }
#tb4-pi#tb4-pi .pd-hero .subhead { max-width:44ch;margin-bottom:28px; }
#tb4-pi#tb4-pi .pd-tiles { display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:10px; }
#tb4-pi#tb4-pi .pd-tile { display:block;background:#fff;border-radius:12px;overflow:hidden;border:1px solid #ececec;box-shadow:0 18px 40px -24px rgba(35,31,32,.35); }
#tb4-pi#tb4-pi .pd-tile img { width:100%;aspect-ratio:600/366;object-fit:cover;object-position:top;border-bottom:1px solid #ececec; }
#tb4-pi#tb4-pi .pd-tile-body { padding:20px 22px 22px; }
#tb4-pi#tb4-pi .pd-tile h3 { margin:0 0 8px;font-family:var(--serif);font-size:21px;line-height:1.25; }
#tb4-pi#tb4-pi .pd-tile p { margin:0 0 12px;font-size:15px;line-height:1.5;color:var(--ink-soft); }
#tb4-pi#tb4-pi .pd-tile .tags { display:block;margin:0 !important; }
#tb4-pi#tb4-pi .pd-cta-h { margin:0 0 10px; }
@media (max-width:860px) {
  #tb4-pi#tb4-pi .pd-hero { padding:24px var(--gut) 44px;grid-template-columns:1fr;gap:28px; }
  #tb4-pi#tb4-pi .pd-hero .hero-art img { max-width:360px; }
  #tb4-pi#tb4-pi .pd-hero .hero-art { order:0; }
  #tb4-pi#tb4-pi .pd-hero h1 { font-size:36px; }
  #tb4-pi#tb4-pi .crumbs { margin-bottom:16px; }
  #tb4-pi#tb4-pi .pd-hero .hero-ctas .btn { flex:1 1 0;min-height:48px; }
  #tb4-pi#tb4-pi .pd-tiles { grid-template-columns:1fr;gap:20px; }
}
#tb4-pi#tb4-pi .pf-tiles { margin-top:0;gap:26px; }
#tb4-pi#tb4-pi .pf-tile { display:flex;flex-direction:column;border:0;box-shadow:0 1px 2px rgba(35,31,32,.06),0 14px 30px -16px rgba(35,31,32,.28); }
#tb4-pi#tb4-pi .pf-img { display:block;overflow:hidden; }
#tb4-pi#tb4-pi .pf-tile img { aspect-ratio:600/366;object-fit:cover;object-position:top; }
#tb4-pi#tb4-pi .pf-tile .pd-tile-body { display:flex;flex-direction:column;flex:1; }
#tb4-pi#tb4-pi .pf-meta { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;min-height:24px; }
#tb4-pi#tb4-pi .pf-meta .tags { font-size:11.5px !important;margin:0 !important; }
#tb4-pi#tb4-pi .pf-plat { flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#1f6f2a;background:#E6F4D6;border-radius:20px;padding:4px 9px; }
#tb4-pi#tb4-pi .pf-tile h3 { font-size:21px; }
#tb4-pi#tb4-pi .pf-tile p { flex:1; }
@media (max-width:860px) {
  #tb4-pi#tb4-pi .pf-tiles { gap:20px; }
}
#tb4-pi#tb4-pi .pi-hero { grid-template-columns:.95fr 1.05fr;gap:48px;padding-bottom:72px;align-items:center; }
#tb4-pi#tb4-pi .pi-hero h1 { max-width:14ch;margin:10px 0 16px; }
#tb4-pi#tb4-pi .pi-hero .subhead { max-width:40ch;margin-bottom:28px; }
#tb4-pi#tb4-pi .pi-meta { display:flex;align-items:center;gap:12px;flex-wrap:wrap; }
#tb4-pi#tb4-pi .pi-meta .tags { margin:0 !important;font-size:12px !important;letter-spacing:.1em; }
#tb4-pi#tb4-pi .pi-ctas { display:flex;align-items:center;gap:22px;flex-wrap:wrap; }
#tb4-pi#tb4-pi .pi-ctas .btn-primary { display:inline-flex;align-items:center;gap:9px; }
#tb4-pi#tb4-pi .pi-back { font-size:15px;color:#2f8f3a; }
#tb4-pi#tb4-pi .pi-art { position:relative;width:100%;aspect-ratio:620/440;max-width:640px;justify-self:end; }
#tb4-pi#tb4-pi .pi-art img { max-width:none; }
#tb4-pi#tb4-pi .pi-leaves { position:absolute;inset:0;width:100%;height:100%;overflow:visible; }
#tb4-pi#tb4-pi .pi-lap { position:absolute;left:3%;top:11%;width:80%; }
#tb4-pi#tb4-pi .pi-lid { background:#2b2829;border-radius:4.2% 4.2% 1.4% 1.4% / 6.5% 6.5% 2% 2%;padding:2.6% 2.6% 3.2%;box-shadow:0 34px 60px -28px rgba(35,31,32,.6); }
#tb4-pi#tb4-pi .pi-scr { border-radius:5px;overflow:hidden;background:#fff; }
#tb4-pi#tb4-pi .pi-bar { height:20px;background:#f1f1f1;display:flex;align-items:center;gap:5px;padding:0 10px;border-bottom:1px solid #e3e3e3; }
#tb4-pi#tb4-pi .pi-bar i { width:7px;height:7px;border-radius:50%;background:#d6d6d6;display:block;flex:none; }
#tb4-pi#tb4-pi .pi-url { margin-left:10px;font:600 10px/1 var(--sans);color:#8a8582;background:#e7e7e7;border-radius:6px;padding:3px 10px;white-space:nowrap; }
#tb4-pi#tb4-pi .pi-scr img { display:block;width:100%;height:auto;aspect-ratio:1440/900;object-fit:cover;object-position:top; }
#tb4-pi#tb4-pi .pi-base { height:14px;margin:0 -7%;background:linear-gradient(#dcdcdc,#b9b9b9);border-radius:2px 2px 14px 14px;position:relative;box-shadow:0 20px 28px -14px rgba(35,31,32,.45); }
#tb4-pi#tb4-pi .pi-base::before { content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:18%;height:6px;background:#c4c4c4;border-radius:0 0 7px 7px; }
#tb4-pi#tb4-pi .pi-phone { background:#231F20;border-radius:26px;padding:9px;box-shadow:0 26px 44px -18px rgba(35,31,32,.6),0 0 0 1px rgba(255,255,255,.06) inset;position:relative; }
#tb4-pi#tb4-pi .pi-phone::before { content:"";position:absolute;left:50%;top:14px;transform:translateX(-50%);width:28%;height:6px;border-radius:6px;background:#3a3637;z-index:2; }
#tb4-pi#tb4-pi .pi-phone img { display:block;width:100%;height:auto;aspect-ratio:390/844;object-fit:cover;object-position:top;border-radius:18px; }
#tb4-pi#tb4-pi .pi-phone-hero { position:absolute;right:4%;bottom:0;width:21%;border-radius:18px;padding:6px; }
#tb4-pi#tb4-pi .pi-phone-hero::before { top:10px;height:4px; }
#tb4-pi#tb4-pi .pi-phone-hero img { border-radius:13px; }
#tb4-pi#tb4-pi .pi-chip { position:absolute;display:inline-flex;align-items:center;gap:9px;background:#fff;border-radius:40px;padding:9px 16px 9px 10px;font:700 14px/1 var(--sans);color:#231F20;white-space:nowrap;box-shadow:0 16px 32px -10px rgba(35,31,32,.32);z-index:3; }
#tb4-pi#tb4-pi .pi-chip b { width:24px;height:24px;border-radius:50%;background:#3DB54A;display:grid;place-items:center;flex:none; }
#tb4-pi#tb4-pi .pi-chip b svg { width:14px;height:14px; }
#tb4-pi#tb4-pi .pi-chip-1 { left:0;top:2%; }
#tb4-pi#tb4-pi .pi-chip-2 { left:26%;bottom:3%; }
#tb4-pi#tb4-pi .pi-pending { display:inline-block;vertical-align:middle;margin-left:10px;padding:3px 8px;border:1.5px dashed #b9a800;border-radius:5px;background:#FBFBD9; font:800 10px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#6d6300;white-space:nowrap; }
#tb4-pi#tb4-pi .pi-about { background:#F3F8E6;padding:76px var(--gut) 84px;display:grid;grid-template-columns:1.35fr .85fr;gap:64px;align-items:start; border-top:6px solid transparent;border-image:linear-gradient(90deg,#3DB54A,#9FCC45,#D7DF28) 1; }
#tb4-pi#tb4-pi .pi-about h2, #tb4-pi#tb4-pi .pi-screens h2, #tb4-pi#tb4-pi .pi-more h2 { margin:0 0 22px;font-family:var(--serif);font-weight:700;font-size:38px;line-height:1.2;letter-spacing:-.01em;position:relative;padding-top:20px; }
#tb4-pi#tb4-pi .pi-about h2::before, #tb4-pi#tb4-pi .pi-screens h2::before, #tb4-pi#tb4-pi .pi-more h2::before { content:"";position:absolute;left:0;top:0;width:56px;height:5px;border-radius:3px;background:linear-gradient(90deg,#D7DF28,#9FCC45,#3DB54A); }
#tb4-pi#tb4-pi .pi-about h2 .pi-pending { font-family:var(--sans); }
#tb4-pi#tb4-pi .pi-about-copy p { margin:0 0 18px;font-size:18px;line-height:1.7;color:var(--ink-soft);max-width:62ch; }
#tb4-pi#tb4-pi .pi-about-copy p:first-of-type { font-size:20px;color:var(--ink); }
#tb4-pi#tb4-pi .pi-facts { background:#fff;border-radius:14px;padding:28px 28px 26px;border-top:5px solid #3DB54A;box-shadow:0 1px 2px rgba(35,31,32,.05),0 20px 40px -24px rgba(35,31,32,.3); }
#tb4-pi#tb4-pi .pi-facts dl { margin:0 0 22px; }
#tb4-pi#tb4-pi .pi-facts dl div { display:grid;grid-template-columns:96px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid #eceee6; }
#tb4-pi#tb4-pi .pi-facts dl div:first-child { padding-top:0; }
#tb4-pi#tb4-pi .pi-facts dt { font:800 11.5px/1.6 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#6f8a3a; }
#tb4-pi#tb4-pi .pi-facts dd { margin:0;font-size:15.5px;line-height:1.5;font-weight:700;color:var(--ink); }
#tb4-pi#tb4-pi .pi-facts dd a { color:#2f8f3a;display:inline-flex;align-items:center;gap:6px; }
#tb4-pi#tb4-pi .pi-feat-h { margin:0 0 12px;font:800 11.5px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#6f8a3a; }
#tb4-pi#tb4-pi .pi-feat-h .pi-pending { margin-left:8px; }
#tb4-pi#tb4-pi .pi-feat { list-style:none;margin:0;padding:0;display:grid;gap:9px; }
#tb4-pi#tb4-pi .pi-feat li { display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:15px;line-height:1.45;color:var(--ink-soft); }
#tb4-pi#tb4-pi .pi-tick { width:20px;height:20px;padding:3px;border-radius:50%;background:#E6F4D6;color:#2f8f3a;margin-top:1px; }
#tb4-pi#tb4-pi .pi-screens { background:#231F20;padding:76px var(--gut) 84px;position:relative;overflow:hidden; border-top:6px solid transparent;border-image:linear-gradient(90deg,#D7DF28,#9FCC45,#3DB54A) 1; }
#tb4-pi#tb4-pi .pi-screens::after { content:"";position:absolute;left:-260px;bottom:-360px;width:820px;height:820px;border-radius:50%;background:radial-gradient(circle,rgba(159,204,69,.16),rgba(159,204,69,0) 65%);pointer-events:none; }
#tb4-pi#tb4-pi .pi-screens h2 { color:#fff; }
#tb4-pi#tb4-pi .pi-screens-head { position:relative;z-index:1;margin-bottom:34px; }
#tb4-pi#tb4-pi .pi-screens-grid { position:relative;z-index:1;display:grid;grid-template-columns:1fr 290px;gap:56px;align-items:end; }
#tb4-pi#tb4-pi .pi-screens figure { margin:0; }
#tb4-pi#tb4-pi .pi-screens figcaption { margin-top:16px;font:800 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#9FCC45; }
#tb4-pi#tb4-pi .pi-win { background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 40px 70px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08); }
#tb4-pi#tb4-pi .pi-win .pi-bar { height:26px;padding:0 14px;gap:6px; }
#tb4-pi#tb4-pi .pi-win .pi-bar i { width:9px;height:9px; }
#tb4-pi#tb4-pi .pi-win-view { position:relative;max-height:720px;overflow:hidden; }
#tb4-pi#tb4-pi .pi-win-view img { display:block;width:100%;height:auto; }
#tb4-pi#tb4-pi .pi-win-view::after { content:"";position:absolute;left:0;right:0;bottom:0;height:140px;background:linear-gradient(rgba(35,31,32,0),rgba(35,31,32,.9)); }
#tb4-pi#tb4-pi .pi-shot-mob .pi-phone { border-radius:40px;padding:12px;box-shadow:0 40px 70px -26px rgba(0,0,0,.85),0 0 0 2px #3a3637 inset; }
#tb4-pi#tb4-pi .pi-shot-mob .pi-phone img { border-radius:29px; }
#tb4-pi#tb4-pi .pi-more { padding:76px var(--gut) 84px;background:#fff;border-top:6px solid transparent;border-image:linear-gradient(90deg,#3DB54A,#9FCC45,#D7DF28) 1; }
#tb4-pi#tb4-pi .pi-more-head { display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px; }
#tb4-pi#tb4-pi .pi-more-head h2 { margin:0; }
#tb4-pi#tb4-pi .pi-more-tiles { margin-top:0; }
@media (max-width:860px) {
  #tb4-pi#tb4-pi .pi-hero { grid-template-columns:1fr;gap:26px;padding-bottom:48px; }
  #tb4-pi#tb4-pi .pi-hero h1 { margin-top:8px; }
  #tb4-pi#tb4-pi .pi-art { justify-self:stretch;max-width:none;order:0; }
  #tb4-pi#tb4-pi .pi-hero .hero-copy { order:-1; }
  #tb4-pi#tb4-pi .pi-chip { font-size:12px;padding:7px 12px 7px 8px;gap:7px; }
  #tb4-pi#tb4-pi .pi-chip b { width:20px;height:20px; }
  #tb4-pi#tb4-pi .pi-chip b svg { width:12px;height:12px; }
  #tb4-pi#tb4-pi .pi-bar { height:14px;padding:0 7px;gap:4px; }
  #tb4-pi#tb4-pi .pi-bar i { width:5px;height:5px; }
  #tb4-pi#tb4-pi .pi-url { font-size:7px;padding:2px 6px;margin-left:6px; }
  #tb4-pi#tb4-pi .pi-base { height:9px; }
  #tb4-pi#tb4-pi .pi-ctas { gap:14px; }
  #tb4-pi#tb4-pi .pi-ctas .btn-primary { width:100%;justify-content:center; }
  #tb4-pi#tb4-pi .pi-back { width:auto !important; }
  #tb4-pi#tb4-pi .pi-about { grid-template-columns:1fr;gap:34px;padding:52px var(--gut) 56px; }
  #tb4-pi#tb4-pi .pi-about h2, #tb4-pi#tb4-pi .pi-screens h2, #tb4-pi#tb4-pi .pi-more h2 { font-size:30px; }
  #tb4-pi#tb4-pi .pi-about-copy p { font-size:16.5px; }
  #tb4-pi#tb4-pi .pi-about-copy p:first-of-type { font-size:18px; }
  #tb4-pi#tb4-pi .pi-facts { padding:22px 20px; }
  #tb4-pi#tb4-pi .pi-screens { padding:52px var(--gut) 56px; }
  #tb4-pi#tb4-pi .pi-screens-head { margin-bottom:24px; }
  #tb4-pi#tb4-pi .pi-screens-grid { grid-template-columns:1fr;gap:36px;justify-items:center; }
  #tb4-pi#tb4-pi .pi-shot-desk { width:100%; }
  #tb4-pi#tb4-pi .pi-win .pi-bar { height:18px;padding:0 9px; }
  #tb4-pi#tb4-pi .pi-win .pi-bar i { width:6px;height:6px; }
  #tb4-pi#tb4-pi .pi-win-view { max-height:420px; }
  #tb4-pi#tb4-pi .pi-win-view::after { height:90px; }
  #tb4-pi#tb4-pi .pi-shot-mob { width:230px; }
  #tb4-pi#tb4-pi .pi-shot-mob .pi-phone { border-radius:32px;padding:9px; }
  #tb4-pi#tb4-pi .pi-shot-mob .pi-phone img { border-radius:23px; }
  #tb4-pi#tb4-pi .pi-screens figcaption { text-align:center; }
  #tb4-pi#tb4-pi .pi-more { padding:52px var(--gut) 56px; }
  #tb4-pi#tb4-pi .pi-more-head { flex-direction:column;align-items:flex-start;gap:10px; }
  #tb4-pi#tb4-pi .pi-more-tiles { display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory; margin:0 calc(-1*var(--gut));padding:4px var(--gut) 18px;scrollbar-width:none; }
  #tb4-pi#tb4-pi .pi-more-tiles .pf-tile { scroll-snap-align:start; }
}
#tb4-pi#tb4-pi .pi-art img { mix-blend-mode:normal; }
#tb4-pi#tb4-pi.pi .lp-cta .pd-cta-h { margin:0 0 10px !important;font-family:var(--serif);font-weight:700;font-size:40px !important;line-height:1.15;color:#fff !important;letter-spacing:-.01em;max-width:none; }
@media (max-width:860px) {
  #tb4-pi#tb4-pi.pi .lp-cta .pd-cta-h { font-size:32px !important; }
}
#tb4-pi#tb4-pi .pi-confirmed { border-color:#2f8f3a;background:#E6F4D6;color:#1f6e2a;border-style:solid; }
#tb4-pi#tb4-pi .pi-hero-nophone .pi-lap { left:6%;width:86%;top:12%; }
#tb4-pi#tb4-pi .pi-hero-nophone .pi-chip-2 { left:auto;right:4%;bottom:6%; }
#tb4-pi#tb4-pi .pi-short { align-items:center; }
#tb4-pi#tb4-pi .pi-short .pi-win-view::after { display:none; }