/* Shared inner-page layer (loaded on every page EXCEPT the homepage). Tokens/typography come from style.css. */
.kri-main{position:relative;overflow-x:clip;background:var(--carbon);color:#fff}
/* pre-hide animated elements until JS has set their start state (no flash); safety net adds .kri-ready after 3.5 s */
.js:not(.kri-ready) [data-reveal],.js:not(.kri-ready) [data-split],.js:not(.kri-ready) [data-mask]{visibility:hidden}
[data-mask]{overflow:hidden}
.kri-sec{position:relative;padding:var(--kri-sec,clamp(96px,11vw,180px)) 0}
.kri-pad{padding-left:var(--pad);padding-right:var(--pad)}
.kri-k{display:flex;gap:12px;align-items:center;margin-bottom:26px}
.kri-h2{font:400 clamp(38px,5.4vw,92px)/1 var(--display);text-transform:uppercase;letter-spacing:.003em}
.kri-h2 em{font:italic 400 1.02em/.9 var(--serif);text-transform:none;color:var(--or)}
.kri-lead{font:400 clamp(20px,2vw,32px)/1.25 var(--serif);letter-spacing:-.005em}
.kri-link{display:inline-flex;align-items:center;gap:10px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid currentColor;padding:6px 0;transition:color .3s}
.kri-link:hover{color:var(--or)}
.btn.kri-btn-dark{background:var(--ink);color:#fff}.btn.kri-btn-dark:hover{background:var(--or)}
button.btn{border:0;cursor:pointer;font-family:var(--mono)}
.kri-outline-btn{background:none;box-shadow:inset 0 0 0 1px currentColor}
.kri-outline-btn:hover{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1px var(--ink)}
@media (prefers-reduced-motion:reduce){[data-reveal],[data-split],[data-mask]{visibility:visible!important}}

/* ===== shared inner-page components (added with the full site build) ===== */
.kri-pg .logo,.kri-pg .menu-btn{mix-blend-mode:normal;transition:filter .3s,color .3s}
.kri-pg.hd-dark .logo{filter:brightness(0)}
.kri-pg.hd-dark .menu-btn{color:var(--ink)}.kri-pg.hd-dark .menu-btn .mb-ico b{background:var(--ink)}
.kri-pg.menu-open .logo{filter:none!important}.kri-pg.menu-open .menu-btn{color:#fff!important}.kri-pg.menu-open .menu-btn .mb-ico b{background:#fff!important}
/* breadcrumb — a quiet mono line inside each hero, never a banner */
.kri-crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:clamp(18px,3vh,30px)}
.kri-crumb a{color:var(--steel);transition:color .3s}.kri-crumb a:hover{color:var(--or)}
.kri-crumb [aria-current]{color:var(--or)}
.kri-crumb i{font-style:normal;opacity:.5}
/* enquiry button row */
.kri-act{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.kri-act .btn.ghost{color:inherit}
.kri-feat{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.kri-feat li{font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:9px 12px;border:1px solid currentColor;border-radius:99px;opacity:.85}
/* related categories — large type rows with a hover image */
.kri-rel{background:var(--carbon);color:#fff}
.kri-rel .kri-h2{max-width:11em}
.kri-rel-list{list-style:none;margin-top:clamp(36px,5vw,70px);border-top:1px solid rgba(255,255,255,.16)}
.kri-rel-list li{position:relative;border-bottom:1px solid rgba(255,255,255,.16)}
.kri-rel-list a{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:16px;align-items:center;padding:clamp(20px,2.6vw,38px) 0;transition:padding .5s var(--ease),color .3s}
.kri-rel-list .mono{color:var(--or)}
.kri-rel-list b{font:400 clamp(34px,5.4vw,92px)/1 var(--display);text-transform:uppercase;font-weight:400;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.55);transition:color .4s,-webkit-text-stroke-color .4s}
.kri-rel-list small{font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);text-align:right}
.kri-rel-list a:hover,.kri-rel-list a:focus-visible{padding-left:clamp(10px,2vw,30px)}
.kri-rel-list a:hover b,.kri-rel-list a:focus-visible b{color:#fff;-webkit-text-stroke-color:#fff}
.kri-rel-thumb{position:absolute;right:clamp(90px,14vw,260px);top:50%;width:clamp(120px,13vw,200px);aspect-ratio:1;transform:translateY(-50%) scale(.85) rotate(-4deg);opacity:0;pointer-events:none;transition:opacity .35s,transform .6s var(--ease);background:radial-gradient(ellipse at 50% 20%,#fff,#dcdfe2 60%,#8f949b);display:grid;place-items:center;padding:12px;z-index:2}
.kri-rel-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.kri-rel-list li:hover .kri-rel-thumb,.kri-rel-list a:focus-visible+.kri-rel-thumb{opacity:1;transform:translateY(-50%) scale(1) rotate(-4deg)}
@media (hover:none),(max-width:900px){.kri-rel-thumb{display:none}.kri-rel-list a{grid-template-columns:34px minmax(0,1fr)}.kri-rel-list small{display:none}}
/* image zoom overlay */
.kri-zoom{position:fixed;inset:0;z-index:180;background:rgba(8,9,10,.94);display:grid;place-items:center;visibility:hidden;opacity:0;padding:5vh 5vw}
.kri-zoom.on{visibility:visible}
.kri-zoom-box{width:min(88vw,900px);max-height:84vh;display:grid;place-items:center;background:var(--zbg,#e8e3d8);overflow:hidden}
.kri-zoom-box img{max-width:100%;max-height:84vh;object-fit:contain}
.kri-zoom button{position:absolute;right:var(--pad);top:22px;color:#fff;font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:14px}
.kri-zoom button:hover{color:var(--or)}
.kri-zoom p{position:absolute;left:0;right:0;bottom:2.5vh;text-align:center;color:var(--steel)}
[data-zoom]{cursor:zoom-in}
/* phones: a soft scrim keeps the fixed logo / menu readable over page content */
@media (max-width:900px){
  .kri-pg:before{content:"";position:fixed;left:0;right:0;top:0;height:84px;background:linear-gradient(rgba(11,12,14,.97) 0,rgba(11,12,14,.97) 62%,transparent);z-index:90;pointer-events:none}
  .kri-pg.hd-dark:before{background:linear-gradient(rgba(232,227,216,.98) 0,rgba(232,227,216,.98) 62%,transparent)}
  .kri-pg.menu-open:before{display:none}
}