/* Service & product detail pages, styled with the KajKori Figma tokens:
   Manrope headings, Inter body, forest #123E32 / ivory #F6F5EE / orange #F65A30 / grey #EDEDED.
   Loaded only on those two pages, so the plain class names don't affect the rest of the site. */
.kk-dp,.kk-quote,.kk-pd--details{--forest:#123e32;--ivory:#f6f5ee;--orange:#f65a30;--grey:#ededed;--ink:#182b25;--muted:#52665c;--line:#e3e3dc}
.kk-dp .container{max-width:none;margin:0;padding:0 64px}
.kk-dp .grid{display:grid;gap:48px}
.kk-dp .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.kk-dp .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* page hero: breadcrumb, eyebrow, H1 and lead, left-aligned on ivory (Figma page hero) */
.page-hero.kk-dp{padding:40px 64px 24px;background:var(--ivory);color:var(--ink)}
.kk-crumbs{margin:0;font:400 13px/1.5 Inter,"Hind Siliguri",sans-serif;color:var(--muted)}
.kk-crumbs a{color:inherit;text-decoration:none}
.kk-crumbs a:hover{color:var(--orange)}
.page-hero.kk-dp .eyebrow{margin:32px 0 0;font:500 12px/1.4 Inter,"Hind Siliguri",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.page-hero.kk-dp h1{max-width:960px;margin:16px 0 0;font:700 clamp(34px,4vw,56px)/1.14 Manrope,"Hind Siliguri",sans-serif;letter-spacing:-.03em;color:var(--forest)}
.page-hero.kk-dp p:not(.eyebrow){max-width:720px;margin:16px 0 0;font:400 18px/1.6 Inter,"Hind Siliguri",sans-serif;color:var(--muted)}

/* gallery + summary */
.section.kk-dp{padding:24px 0 88px;background:var(--ivory);color:var(--ink)}
.section.kk-dp h2{margin:0;font:700 clamp(28px,3vw,40px)/1.2 Manrope,"Hind Siliguri",sans-serif;letter-spacing:-.02em;color:var(--forest)}
.section.kk-dp h3{margin:28px 0 10px;font:700 18px/1.3 Manrope,"Hind Siliguri",sans-serif;color:var(--forest)}
.kk-dp .lead{font:400 17px/1.65 Inter,"Hind Siliguri",sans-serif;color:var(--ink)}
.kk-dp ul.lead{margin:0;padding-left:22px}
.kk-dp ul.lead li{margin:4px 0}
.kk-dp ul.lead li::marker{color:var(--orange)}
.kk-dp .price{margin:28px 0 20px;font:700 34px/1.15 Manrope,"Hind Siliguri",sans-serif;letter-spacing:-.02em;color:var(--forest)}
.kk-dp .price small{display:block;margin-top:8px;font:500 14px/1.5 Inter,"Hind Siliguri",sans-serif;letter-spacing:0;color:var(--muted)}
.kk-dp .price s{margin-left:10px;font:500 18px Inter,sans-serif;color:var(--muted)}
.kk-dp .meta{margin:12px 0 0;font:400 14px/1.5 Inter,"Hind Siliguri",sans-serif;color:var(--muted)}
.kk-dp .meta b{color:var(--ink);font-weight:600}
.kk-dp .actions{display:flex;flex-wrap:wrap;gap:12px}
.kk-dp .btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:52px;padding:14px 24px;border:1.5px solid transparent;border-radius:8px;font:700 15px/1.2 Manrope,"Hind Siliguri",sans-serif;text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.kk-dp .btn-primary{background:var(--forest);color:#fff}
.kk-dp .btn-primary:hover{background:var(--orange)}
.kk-dp .btn-light{background:#fff;color:var(--forest);border-color:var(--line)}
.kk-dp .btn-light:hover{border-color:var(--forest)}

.kk-dp .service-hero-img{display:block;width:100%;height:460px;object-fit:cover;border-radius:24px}
.kk-dp .service-hero-img.is-contain{object-fit:contain;background:#fff}
.kk-dp .hero-missing{height:460px;border-radius:24px;overflow:hidden}
.kk-dp .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.kk-dp .gallery button{padding:0;border:2px solid transparent;border-radius:16px;background:none;cursor:pointer;overflow:hidden}
.kk-dp .gallery button.is-active{border-color:var(--forest)}
.kk-dp .gallery img{display:block;width:100%;height:150px;object-fit:cover;border-radius:14px}
/* 4 or more photos: four smaller thumbnails per row, so none sits alone on a line. */
.kk-dp .gallery:has(> :nth-child(4)){grid-template-columns:repeat(4,1fr)}
.kk-dp .gallery:has(> :nth-child(4)) img{height:110px}

/* Figma section header: "{ ★ } label" + H2 (+ line), centred */
.kk-kicker{max-width:760px;margin:0 auto 40px;text-align:center}
.kk-kicker--left{margin-left:0;text-align:left}
.kk-kicker__label{display:inline-flex;align-items:center;gap:6px;margin:0;font:600 13px/1 Inter,"Hind Siliguri",sans-serif;color:var(--ink,#182b25)}
.kk-kicker__label span{font-weight:700}
.kk-kicker__label img{margin-right:4px}
.kk-kicker h2{margin:14px 0 0;font:700 clamp(30px,3.4vw,40px)/1.2 Manrope,"Hind Siliguri",sans-serif;letter-spacing:-.03em;color:var(--forest,#123e32)}
.kk-kicker__sub{margin:12px 0 0;font:400 16px/1.6 Inter,"Hind Siliguri",sans-serif;color:var(--muted,#52665c)}
/* The section headers that use the kicker drop their old blog-style top margin. */
.journal-library .kk-kicker{margin-bottom:32px}

/* specifications + about panels (grey band, white cards) */
.kk-pd--details{background:var(--grey)}
.kk-pd--details .kk-pd-lower{margin-top:0}
.kk-pd--details .kk-pd-panel{border-radius:24px;padding:32px}
.kk-pd--details .kk-pd-heading{margin:0 0 20px;font:700 24px/1.25 Manrope,"Hind Siliguri",sans-serif;letter-spacing:-.01em;text-transform:none;color:var(--forest)}
.kk-pd--details .kk-pd-heading--gap{margin-top:32px}

/* FAQ: Figma rows, question above answer in white cards */
.section-soft.kk-dp{padding:88px 0;background:var(--ivory)}
.kk-dp .faq-rows{display:flex;flex-direction:column;gap:12px}
.kk-dp .faq-item{padding:24px 28px;border-radius:18px;background:#fff}
.kk-dp .faq-item h3{margin:0;font:700 19px/1.35 Manrope,"Hind Siliguri",sans-serif;color:var(--forest)}
.kk-dp .faq-item p{margin:8px 0 0;font:400 15.5px/1.65 Inter,"Hind Siliguri",sans-serif;color:var(--muted)}

/* "How it works" uses the home section markup; match its heading to the other section headers. */
.n-17-383 .n-17-385{font-family:Manrope,"Hind Siliguri",sans-serif;font-weight:700;font-size:clamp(30px,3.4vw,40px);line-height:1.2;letter-spacing:-.03em;color:#123e32}

/* quotation: forest advice card + white form card (Figma products page) */
.kk-quote{padding:88px 64px;background:var(--grey)}
.kk-quote__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px;align-items:stretch}
.kk-quote__advice{display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:32px;border-radius:24px;background:var(--forest);color:var(--ivory)}
.kk-quote__title{margin:0;font:700 clamp(26px,2.6vw,34px)/1.2 Manrope,"Hind Siliguri",sans-serif;letter-spacing:-.02em;color:#fff}
.kk-quote__advice p:not(.kk-quote__title){margin:14px 0 0;font:400 15px/1.6 Inter,"Hind Siliguri",sans-serif;color:rgba(246,245,238,.85)}
.kk-quote__actions{display:grid;gap:12px}
.kk-quote__btn{display:flex;align-items:center;justify-content:center;min-height:48px;padding:12px 20px;border-radius:8px;background:#fff;color:var(--forest);font:700 14px/1.2 Manrope,"Hind Siliguri",sans-serif;text-decoration:none;border:1px solid #fff;transition:background .2s,color .2s}
.kk-quote__btn--ghost{background:transparent;color:#fff;border-color:rgba(246,245,238,.4)}
.kk-quote__btn:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.kk-quote .kk-panel{border-radius:24px}

/* specifications: grouped rows with a clear label/value rhythm; the about card stays in view */
.kk-pd--details .kk-pd-lower{align-items:start}
.kk-pd--details .kk-pd-about{position:sticky;top:24px}
.kk-pd--details .kk-pd-specs{border-collapse:separate;border-spacing:0;font:400 15px/1.5 Inter,"Hind Siliguri",sans-serif}
.kk-pd--details .kk-pd-specs th{padding:10px 14px;border-radius:10px;background:var(--ivory);font:700 15px/1.3 Manrope,"Hind Siliguri",sans-serif;color:var(--forest)}
.kk-pd--details .kk-pd-specs th::before{content:"";display:inline-block;width:8px;height:8px;margin:0 10px 1px 0;border-radius:50%;background:var(--orange)}
.kk-pd--details .kk-pd-specs tr:not(:first-child) th{border-top:16px solid #fff}
.kk-pd--details .kk-pd-specs td{padding:13px 14px;border-bottom:1px solid #eef0ea;vertical-align:top}
.kk-pd--details .kk-pd-specs td:first-child{width:40%;color:var(--muted)}
.kk-pd--details .kk-pd-specs td:last-child{font-weight:500;color:var(--ink)}
.kk-pd--details .kk-pd-specs tr:hover td{background:#fafaf6}
.kk-pd--details .kk-pd-box{display:flex;flex-wrap:wrap;gap:8px}
.kk-pd--details .kk-pd-box span{padding:8px 14px;border-radius:999px;background:var(--ivory);font:500 14px/1.3 Inter,"Hind Siliguri",sans-serif;color:var(--ink)}
.kk-pd--details .kk-pd-note{margin-top:24px;padding:14px 16px;border-radius:12px;background:#e8efe3;font:400 14px/1.5 Inter,"Hind Siliguri",sans-serif;color:var(--forest)}

/* responsive.css already pads every section (32px under 1100px, 24px on phones), so the inner container adds none. */
@media (max-width:1100px){.kk-dp .container{padding:0}}
@media (max-width:900px){
 .kk-dp .grid-2,.kk-quote__grid{grid-template-columns:1fr}
 .kk-pd--details .kk-pd-about{position:static}
 .kk-dp .grid-3{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
 .kk-dp .grid{gap:32px}
 .kk-dp .grid-3{grid-template-columns:1fr}
 .page-hero.kk-dp .eyebrow{margin-top:20px}
 .page-hero.kk-dp h1{font-size:32px;line-height:40px}
 .page-hero.kk-dp p:not(.eyebrow){font-size:16px}
 .kk-quote__advice,.kk-pd--details .kk-pd-panel{padding:24px}
 .kk-pd--details .kk-pd-specs td{padding:11px 10px}
 .kk-pd--details .kk-pd-specs td:first-child{width:44%}
 .kk-dp .faq-item{padding:20px}
 .kk-dp .service-hero-img,.kk-dp .hero-missing{height:300px}
 .kk-dp .gallery img{height:96px}
 .kk-dp .gallery:has(> :nth-child(4)) img{height:72px}
 .kk-kicker h2{font-size:30px}
}