/* ===== Templates group: customer stories, blog posts, blog index =====
   Loaded after styles.css on those pages only. New classes are prefixed tp-.
   Restrained, editorial: type hierarchy, whitespace and 1px hairlines; no shadows, glows, lifts or stripes. */

/* ---------- Customer stories: hero ---------- */
.tp-hero{padding-block:clamp(64px,8vw,112px) clamp(56px,7vw,96px);}
.tp-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center;}
.tp-has-logo .tp-hero-grid{grid-template-columns:minmax(0,1fr) minmax(220px,320px);}
.tp-hero-main{display:flex;flex-direction:column;gap:clamp(28px,3.5vw,44px);min-width:0;}
.tp-hero-main > .wrap{padding-inline:0;max-width:none;margin:0;width:100%;}
.case-hero.tp-hero .case-grid + .case-grid{margin-top:0;}
.tp-hero .h1{max-width:22ch;}
.tp-hero .case-text{font-size:clamp(17px,1.5vw,19px);}
.tp-hero .case-text p{opacity:1;color:rgba(255,255,255,.74);max-width:62ch;}
.tp-hero .case-text h3{margin:0 0 4px;}

/* Customer logo: flat white tile */
.tp-hero-logo{display:flex;justify-content:flex-end;}
.case-hero .case-img.tp-logo{display:block;width:100%;max-width:320px;aspect-ratio:4/3;height:auto;object-fit:contain;background:#fff;border-radius:var(--radius-md);padding:clamp(24px,2.6vw,36px);}
.tp-hero-main .case-img.tp-logo{max-width:260px;aspect-ratio:auto;padding:22px 30px;}

/* Lead quote: large light type under a hairline rule */
.tp-hero .tp-quote{border-top:1px solid rgba(255,255,255,.28);padding-top:clamp(24px,3vw,32px);}
.tp-hero .tp-quote p:first-child{font-family:var(--font-display);font-weight:300;font-size:clamp(21px,2.3vw,28px);line-height:1.4;color:var(--ink-inverse);max-width:46ch;}
.tp-hero .tp-quote p:first-child em{font-style:normal;}
.tp-hero .tp-quote strong{display:block;margin-top:16px;font-family:var(--font-body);font-size:15px;font-weight:500;color:var(--ink-inverse);}
.tp-hero .tp-quote p + p{font-family:var(--font-body);font-size:15px;line-height:1.5;color:rgba(255,255,255,.66);}
.tp-hero .tp-quote p + p strong{margin-top:0;}

/* Portrait + quote rows (hero and in-page) */
.case-grid.tp-quote-row{grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start;}
.case-img.tp-portrait{width:clamp(88px,9vw,120px);height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;max-width:none;}
.tp-hero .tp-quote-row .tp-quote{border-top:0;padding-top:0;}

/* ---------- Customer stories: story band ---------- */
@media (min-width:861px){.tp-story .case-grid[style*="8fr 4fr"]{grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:clamp(40px,7vw,96px);}}
.tp-story .case-grid[style="--cols:12fr;"]{max-width:calc(72ch + 2 * max(24px,4vw));}
.tp-story .case-col{gap:28px;}
.case-text{font-size:17px;line-height:1.75;}
.tp-story .case-text,.tp-about-band .case-text,.tp-quote-band .case-text{max-width:72ch;}
.case-text > *{margin-bottom:18px;}
.case-text h2{font-family:var(--font-display);font-weight:400;font-size:clamp(24px,2.4vw,30px);line-height:1.25;margin:48px 0 14px;text-wrap:balance;}
.case-text h3{font-size:clamp(20px,1.9vw,23px);margin:36px 0 12px;color:var(--ink-primary);}
.case-text h3:empty{display:none;}
.case-col > .case-text + .case-text > h2:first-child,.case-col > .case-text + .case-text > h3:first-child{margin-top:28px;}
.case-text li{margin-bottom:8px;}
.case-text a{transition:color .15s ease;}
.case-text a:hover{color:var(--brand-orange);}
.case-divider{border-top-color:var(--border-soft);margin:16px 0;}

/* Aside: company facts box, sticky on desktop */
.case-aside{background:var(--surface-muted);border-radius:var(--radius-md);padding:clamp(24px,2.5vw,32px);gap:20px;}
.tp-story .case-aside{position:sticky;top:104px;}
.case-aside .case-text{font-size:15px;line-height:1.65;color:var(--ink-secondary);}
.case-aside .case-text > *{margin-bottom:14px;}
.case-aside .case-text > *:last-child{margin-bottom:0;}
.case-aside .case-text strong,.case-aside .case-text b{font-weight:600;color:var(--ink-primary);}
.case-aside .case-text h4,.case-aside .case-text h4 strong{font-family:var(--font-display);font-size:20px;font-weight:500;color:var(--ink-primary);margin:0 0 8px;}
.case-aside .case-text a{word-break:break-word;}
.case-aside > .case-divider:last-child{display:none;}
.case-aside .case-img.tp-portrait{width:88px;}
.case-aside .tp-quote p:first-child{font-family:var(--font-display);font-weight:300;font-size:19px;line-height:1.45;color:var(--ink-primary);}
@media (max-width:860px){.tp-story .case-aside{position:static;}}

/* Result highlights: plain items separated by hairlines, no boxes */
.case-blurb{background:none;border:0;border-top:1px solid var(--border-soft);border-radius:0;padding:20px 0 0;font-size:16px;line-height:1.65;color:var(--ink-secondary);}
.tp-highlights{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 40px;}
.tp-highlights .case-blurb h4{font-family:var(--font-body);font-weight:400;font-size:16px;line-height:1.65;color:var(--ink-secondary);margin:0;}
@media (max-width:640px){.tp-highlights{grid-template-columns:1fr;gap:20px;}}

/* Results band: three columns with a dark top rule */
.tp-results .case-text h2{margin:0;font-size:clamp(28px,3.6vw,42px);}
.case-grid.tp-results-grid{gap:clamp(24px,3vw,48px);align-items:stretch;}
.tp-results-grid .case-col{gap:0;}
.tp-results-grid .case-blurb{height:100%;border-top-color:var(--ink-primary);padding-top:24px;font-size:17px;line-height:1.65;}
.tp-results .case-grid + .case-grid{margin-top:clamp(28px,3vw,40px);}
@media (max-width:860px){.case-grid.tp-results-grid{grid-template-columns:1fr;gap:28px;}}

/* Person (portrait + name) */
.case-blurb:has(> img){border-top:0;padding:0;align-items:center;}
.case-blurb:has(> img) img{width:56px;height:56px;}
.case-blurb:has(> img) p{font-size:15px;line-height:1.5;color:var(--ink-muted);}
.case-blurb:has(> img) strong{color:var(--ink-primary);font-weight:600;}

/* In-page quote band (portrait + quote) */
.tp-quote-band{padding-top:0;}
.tp-quote-band .tp-quote-row{padding-top:clamp(28px,3.5vw,44px);}
.tp-quote-band .tp-quote p:first-child{font-family:var(--font-display);font-weight:300;font-size:clamp(21px,2.3vw,28px);line-height:1.42;color:var(--ink-primary);}
.tp-quote-band .tp-quote p + p{font-size:15px;color:var(--ink-muted);}
.tp-quote-band .tp-quote strong{color:var(--ink-primary);font-weight:600;}
@media (max-width:560px){.case-grid.tp-quote-row{grid-template-columns:1fr;}}

/* Company intro after the story, and intro logos in the flow */
.tp-about-band{padding-top:0;}
.tp-about-band .case-grid{padding-top:clamp(32px,4vw,48px);align-items:start;}
.case-img.tp-about-logo{max-width:220px;max-height:64px;width:auto;object-fit:contain;border-radius:0;}

/* Related customer story */
.tp-related .case-text h2{margin:0;font-size:clamp(28px,3.6vw,42px);}
.tp-related .case-grid + .case-grid{padding-top:clamp(28px,3.5vw,44px);gap:clamp(28px,5vw,72px);margin-top:clamp(28px,3vw,40px);}
.tp-related .case-text h3{font-family:var(--font-body);font-size:15px;font-weight:500;color:var(--ink-muted);margin:0;}
.tp-related .case-col > .case-img{max-width:200px;max-height:44px;width:auto;object-fit:contain;border-radius:0;}
.tp-related .case-col + .case-col > .case-text p{font-family:var(--font-display);font-weight:300;font-size:clamp(19px,1.9vw,23px);line-height:1.5;color:var(--ink-primary);}

/* Hairline rules aligned to the content edge (not the wrap padding) */
.tp-quote-band .tp-quote-row,.tp-about-band .case-grid,.tp-related .case-grid + .case-grid{position:relative;}
.tp-quote-band .tp-quote-row::before,.tp-about-band .case-grid::before,.tp-related .case-grid + .case-grid::before{content:"";position:absolute;top:0;left:max(24px,4vw);right:max(24px,4vw);height:1px;background:var(--ink-primary);}
.tp-about-band .case-grid::before{background:var(--border-soft);}
.tp-hero .case-text h3{font-family:var(--font-body);font-size:16px;font-weight:500;text-transform:none;letter-spacing:0;color:rgba(255,255,255,.66);}

/* Mobile hero */
@media (max-width:860px){
  .tp-has-logo .tp-hero-grid{grid-template-columns:1fr;gap:28px;}
  .tp-hero-logo{order:-1;justify-content:flex-start;}
  .case-hero .case-img.tp-logo{width:auto;max-width:200px;height:92px;aspect-ratio:auto;padding:16px 22px;}
}

/* ---------- Blog posts ---------- */
.tp-label{color:var(--brand-orange);text-align:left;}
.tp-post-hero{padding-block:clamp(56px,7vw,96px) clamp(48px,6vw,80px);}
.tp-post-head{max-width:calc(70ch * 18 / 16 + 2 * max(24px,4vw));display:flex;flex-direction:column;gap:18px;}
.tp-post-head .h1{font-size:clamp(34px,4.6vw,54px);line-height:1.1;}
.tp-post-date{margin:0;color:rgba(255,255,255,.6);font-size:15px;}
.tp-post-hero.tp-has-cover{padding-bottom:0;}
.tp-post-cover{max-width:calc(960px + 2 * max(24px,4vw));margin-top:clamp(40px,5vw,56px);margin-bottom:calc(-1 * clamp(64px,8vw,120px));position:relative;z-index:1;}
.tp-post-cover img{width:100%;aspect-ratio:1200/630;object-fit:cover;border-radius:var(--radius-md);border:1px solid var(--border-soft);background:var(--surface-muted);}
.tp-has-cover + * + .tp-post-main,.tp-has-cover + .tp-post-main{padding-top:calc(clamp(64px,8vw,120px) + clamp(48px,6vw,72px));}

.post-body.tp-article{max-width:calc(70ch + 2 * max(24px,4vw));margin:0 auto;font-size:18px;line-height:1.75;color:#2a2f31;}
.tp-article > *{margin:0 0 22px;}
.tp-article > p:first-child{font-size:20px;line-height:1.6;color:var(--ink-primary);}
.tp-article h2{font-size:clamp(25px,2.6vw,32px);font-weight:400;line-height:1.22;margin:56px 0 16px;text-wrap:balance;}
.tp-article h3{font-size:clamp(21px,2vw,24px);font-weight:400;margin:40px 0 12px;text-wrap:balance;}
.tp-article h4,.tp-article h5{font-size:19px;margin:32px 0 10px;}
.tp-article h2 + h3{margin-top:20px;}
.tp-article > h2:first-child,.tp-article > h3:first-child{margin-top:0;}
.tp-article strong{color:var(--ink-primary);font-weight:600;}
.tp-article ul,.tp-article ol{padding-left:24px;}
.tp-article li{margin-bottom:10px;padding-left:4px;}
.tp-article a{transition:color .15s ease;}
.tp-article a:hover{color:var(--brand-orange);}
.tp-article img,.tp-article video{width:100%;margin:36px 0;border-radius:var(--radius-md);border:1px solid var(--border-soft);background:var(--surface-muted);}
.tp-article p > img{margin:12px 0;}
.tp-article blockquote{margin:40px 0;padding:0 0 0 24px;border-left:1px solid var(--ink-primary);font-family:var(--font-display);font-weight:300;font-style:normal;font-size:clamp(20px,2vw,24px);line-height:1.45;color:var(--ink-primary);}
.tp-article blockquote p{margin:0 0 12px;}
.tp-article blockquote p:last-child{margin-bottom:0;}
.tp-article table{font-size:15px;margin:32px 0;}
.tp-article th{background:var(--surface-muted);}
.tp-article td,.tp-article th{border-color:var(--border-soft);padding:10px 14px;}

/* Author */
.tp-article .post-author{margin-top:64px;padding-top:32px;border-top:1px solid var(--ink-primary);gap:24px;align-items:center;}
.tp-article .post-author img{width:80px;height:80px;margin:0;border:0;border-radius:50%;background:none;}
.tp-article .post-author h4{font-family:var(--font-display);font-size:20px;font-weight:500;margin:0 0 8px;}
.tp-article .post-author p{font-size:15px;line-height:1.65;}
@media (max-width:560px){
  .tp-article{font-size:17px;}
  .tp-article > p:first-child{font-size:18px;}
  .tp-article .post-author{flex-direction:column;align-items:flex-start;}
  .tp-article .post-author img{width:64px;height:64px;}
}

/* ---------- Blog index ---------- */
.tp-blog-hero .wrap{display:flex;flex-direction:column;gap:18px;}
.tp-post-grid{gap:clamp(20px,2.4vw,32px);}
@media (min-width:861px) and (max-width:1100px){.tp-post-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
.tp-post-grid .post-card,.tp-post-grid .post-card:hover{border:1px solid var(--border-soft);border-radius:var(--radius-md);box-shadow:none;transform:none;gap:0;transition:border-color .15s ease;}
.tp-post-grid .post-card:hover{border-color:var(--ink-primary);}
.tp-post-grid .post-thumb{aspect-ratio:1200/630;object-fit:contain;background:#000;border-bottom:1px solid var(--border-soft);}
.tp-post-grid .post-card-body{padding:22px 24px 26px;gap:10px;}
.tp-post-grid .post-date{font-size:13px;color:var(--ink-muted);}
.tp-post-grid .h3{font-size:21px;line-height:1.3;transition:color .15s ease;}
.tp-post-grid .post-card:hover .h3{color:var(--brand-orange);}
.tp-post-grid .body{font-size:15px;line-height:1.6;-webkit-line-clamp:3;}
.tp-post-grid .read-more{margin-top:auto;padding-top:8px;}
.tp-post-cover.tp-cover-square{max-width:calc(70ch * 18 / 16 + 2 * max(24px,4vw));}
.tp-cover-square img{width:min(100%,440px);aspect-ratio:1;}