/* Bookio follows the established editorial case-study layout. */
.bookio-page { --bk-space:clamp(80px,8vw,140px); --bk-gap:clamp(16px,2vw,32px); }
.bookio-page .bk-hero { padding-top:154px; padding-bottom:64px; }
.bookio-page .bk-hero .sp-breadcrumb { margin-bottom:52px; }
.bk-title-row { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:26px; }
.bk-client { font-size:18px; font-weight:500; line-height:1.4; }
.bk-client>span { display:inline-block; margin-left:25px; font-size:12px; font-weight:400; color:var(--sp-copy); }
.bk-project-label { font-size:12px; color:var(--sp-copy); }
.bookio-page .bk-hero h1 { max-width:1380px; font-size:clamp(62px,6.8vw,118px); line-height:1.02; font-weight:500; letter-spacing:-.055em; }
.bk-hero-bottom { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-top:42px; }
.bk-hero-bottom>p { max-width:760px; font-size:clamp(18px,1.5vw,23px); line-height:1.5; color:var(--sp-copy); text-wrap:pretty; }
.bk-down { display:grid; place-items:center; width:55px; height:55px; flex-shrink:0; border:1px solid #b7bfba; border-radius:50%; font-size:26px; transition:background .25s,transform .3s; }
.bk-down:hover { background:var(--accent); transform:translateY(4px); }
.bk-media { overflow:hidden; border-radius:8px; background:#fff; }
.bk-media>img { display:block; width:100%; height:auto; }
.bk-overview,.bk-story { display:grid; grid-template-columns:1fr 2fr; gap:clamp(40px,6vw,110px); padding-top:var(--bk-space); padding-bottom:var(--bk-space); }
.bk-facts { display:grid; align-content:start; gap:32px; }
.bk-facts dt,.bk-eyebrow,.bk-chapter { font-size:11px; line-height:1.4; text-transform:uppercase; letter-spacing:.07em; font-weight:500; }
.bk-facts dt { color:var(--sp-copy); margin-bottom:10px; }
.bk-facts dd { font-size:17px; line-height:1.6; }
.bk-overview-copy>.bk-eyebrow { margin-bottom:28px; }
.bookio-page .bk-overview h2,.bookio-page .bk-story h2,.bookio-page .bk-applications h2,.bookio-page .bk-onboarding h2 { font-size:clamp(36px,3.6vw,62px); line-height:1.1; letter-spacing:-.04em; font-weight:400; }
.bk-overview-copy>p:not(.bk-eyebrow) { max-width:800px; font-size:18px; line-height:1.65; color:var(--sp-copy); text-wrap:pretty; margin-top:24px; }
.bk-overview-copy>h2 { margin-bottom:32px; }
.bk-chapter { display:flex; gap:24px; align-items:baseline; padding-top:8px; }
.bk-chapter>span { color:var(--sp-copy); font-variant-numeric:tabular-nums; }
.bk-story-content { min-width:0; }
.bk-story-content>h2 { margin-bottom:32px; }
.bk-copy { max-width:800px; font-size:18px; line-height:1.65; color:var(--sp-copy); text-wrap:pretty; }
.bk-copy>p+p { margin-top:20px; }
.bk-gallery { display:grid; gap:var(--bk-gap); }
.bk-gallery--pair { grid-template-columns:repeat(2,minmax(0,1fr)); }
.bk-applications { padding-top:var(--bk-space); padding-bottom:var(--bk-space); }
.bk-section-head { display:grid; grid-template-columns:1fr 1fr; gap:24px 80px; margin-bottom:56px; }
.bk-section-head>.bk-eyebrow { grid-column:1/-1; margin-bottom:4px; }
.bk-section-head>.bk-copy { align-self:end; }
.bk-caption { color:var(--sp-copy); font-size:12px; line-height:1.5; margin-top:16px; }
.bk-web { padding-top:0; }
.bk-carousel-track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; border-radius:8px; background:#fff; }
.bk-carousel-track::-webkit-scrollbar { display:none; }
.bk-carousel-slide { flex:0 0 100%; min-width:0; margin:0; aspect-ratio:1906 / 1072; scroll-snap-align:start; scroll-snap-stop:always; }
.bk-carousel-slide>img { display:block; width:100%; height:100%; object-fit:contain; }
.bk-carousel-footer { display:flex; align-items:center; justify-content:space-between; gap:16px 32px; margin-top:20px; }
.bk-carousel-footer .bk-caption { margin-top:0; }
.bk-carousel-controls { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.bk-carousel-controls[hidden] { display:none; }
.bk-carousel-count { min-width:64px; margin-right:12px; font-size:13px; font-variant-numeric:tabular-nums; color:var(--sp-copy); }
.bk-carousel .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.bk-carousel-arrow { display:grid; place-items:center; width:48px; height:48px; padding:0; border:1px solid #b7bfba; border-radius:50%; background:transparent; color:var(--ink); cursor:pointer; transition:background .2s; }
.bk-carousel-arrow svg { width:24px; height:24px; }
.bk-carousel-arrow:disabled { opacity:.3; cursor:default; }
.bk-carousel-arrow:hover:not(:disabled) { background:var(--accent); }
.bk-carousel-arrow:focus-visible,.bk-carousel-track:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
.bk-onboarding { padding-top:var(--bk-space); padding-bottom:var(--bk-space); margin-top:var(--bk-space); background:#e7eae8; }
.bk-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin:0 0 60px; padding:0; list-style:none; }
.bk-steps li { border-top:1px solid #bec9c3; padding-top:20px; }
.bk-steps span { display:block; color:var(--sp-copy); font-size:12px; margin-bottom:12px; }
.bk-steps h3 { font-size:22px; font-weight:500; letter-spacing:-.02em; margin-bottom:12px; }
.bk-steps p { max-width:380px; color:var(--sp-copy); font-size:16px; line-height:1.6; }
.bk-screen { margin:0; }
.bk-screen+.bk-screen { margin-top:48px; }
.bk-screen .bk-media { border:8px solid #fff; border-radius:16px; box-shadow:0 16px 45px #19241d0d; }
.bk-screen figcaption { display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-top:16px; color:var(--sp-copy); font-size:12px; line-height:1.5; }
.bk-screen figcaption strong { color:var(--ink); font-weight:500; }
.bk-testimonial { padding-top:var(--bk-space); padding-bottom:var(--bk-space); }
.bk-testimonial figure { max-width:1050px; margin:0 auto; }
.bk-testimonial .bk-eyebrow { color:var(--sp-copy); margin-bottom:30px; }
.bk-testimonial blockquote { font-size:clamp(28px,3vw,48px); font-weight:400; line-height:1.3; letter-spacing:-.03em; text-wrap:pretty; }
.bk-testimonial figcaption { display:flex; flex-direction:column; gap:6px; margin-top:30px; font-size:15px; }
.bk-testimonial figcaption span { color:var(--sp-copy); font-size:12px; }
.bk-return { display:flex; justify-content:space-between; align-items:center; gap:24px; border-top:1px solid var(--sp-border); padding-top:35px; padding-bottom:35px; margin-top:var(--bk-space); }
.bk-return p { font-size:14px; color:var(--sp-copy); }
@media(min-width:1800px) { .bk-copy,.bk-overview-copy>p:not(.bk-eyebrow) { font-size:21px; } }
@media(max-width:1050px) { .bk-overview,.bk-story { grid-template-columns:1fr 2.3fr; gap:35px; } .bk-section-head { gap:25px 35px; } }
@media(max-width:900px) {
 .bookio-page .bk-hero { padding-top:130px; padding-bottom:38px; }
 .bookio-page .bk-hero .sp-breadcrumb { margin-bottom:35px; }
 .bk-client>span { display:block; margin:5px 0 0; }
 .bookio-page .bk-hero h1 { font-size:clamp(42px,8vw,72px); }
 .bk-hero-bottom { margin-top:32px; }
 .bk-hero-bottom>p { font-size:18px; }
 .bk-overview { grid-template-columns:1fr; }
 .bk-facts { grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; padding-bottom:30px; border-bottom:1px solid var(--sp-border); }
 .bk-story { grid-template-columns:1fr; gap:25px; }
 .bk-overview-copy>p:not(.bk-eyebrow),.bk-copy { font-size:17px; }
 .bk-section-head { grid-template-columns:1fr; gap:25px; margin-bottom:35px; }
 .bk-steps { gap:20px; }
 .bk-steps h3 { font-size:20px; }
 .bk-screen .bk-media { border-width:5px; border-radius:10px; }
}
@media(max-width:560px) {
 .bookio-page { --bk-space:65px; --bk-gap:14px; }
 .bk-project-label,.bk-down { display:none; }
 .bk-client { font-size:16px; }
 .bk-facts { grid-template-columns:1fr 1fr; }
 .bk-facts dd { font-size:15px; }
 .bk-gallery--pair,.bk-steps { grid-template-columns:1fr; }
 .bk-carousel-footer { flex-direction:column; align-items:stretch; margin-top:16px; }
 .bk-carousel-count { margin-right:auto; }
 .bk-steps { margin-bottom:40px; gap:26px; }
 .bk-screen+.bk-screen { margin-top:32px; }
 .bk-screen figcaption { display:block; }
 .bk-screen figcaption span { display:block; margin-top:5px; }
 .bk-return { align-items:start; flex-direction:column; }
}
@media(prefers-reduced-motion:reduce) { .bk-down,.bk-carousel-arrow { transition:none; } }