/* KRIVA service archetypes, five art directions, one system. */

/* Shared product frame */
.arch-frame{background:var(--ink);border:1px solid var(--ink-line);overflow:hidden;box-shadow:var(--shadow-product)}
.arch-frame img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover;object-position:top}
.arch-chrome{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#12181E;border-bottom:1px solid var(--ink-line);font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#717F8C}
.arch-chrome i{width:7px;height:7px;border-radius:50%;background:#2A333C}
.arch-show{padding:clamp(48px,6vw,88px) 0;background:var(--ink);color:#DDE2E7}
.arch-show .wrap{display:grid;gap:clamp(20px,3vw,36px)}
.arch-show .k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.arch-show h2{color:#fff;font-family:var(--f-display);font-weight:700;font-size:clamp(1.8rem,3.4vw,2.8rem);letter-spacing:-.03em;max-width:16ch}
.arch-layer{position:relative}
.arch-layer .side{position:absolute;right:4%;bottom:-10%;width:min(38%,340px);border:1px solid var(--ink-line);box-shadow:var(--shadow-lift);background:var(--ink)}
.arch-layer .side img{aspect-ratio:4/3}
@media(max-width:720px){.arch-layer .side{position:relative;right:auto;bottom:auto;width:72%;margin:-32px 0 0 auto}}

/* 01 Product design, editorial, product below */
body.arch-product .hero{background:var(--paper)}
body.arch-product .hero .d1{font-size:clamp(2rem,4.8vw,4.05rem);max-width:12ch}
body.arch-product .chal{background:transparent;border:0;gap:clamp(16px,2vw,28px)}
body.arch-product .chal article{background:transparent;border-top:1px solid var(--rule);padding-inline:0}

/* 02 SaaS / dashboard, dark hero canvas */
body.arch-saas .hero{background:var(--ink);color:#DDE2E7}
body.arch-saas .hero .d1,body.arch-saas .hero h1{color:#fff}
body.arch-saas .hero .lede,body.arch-saas .hero .eyebrow{color:#8C98A4}
body.arch-saas .crumbs,body.arch-saas .crumbs a{color:#8C98A4}
body.arch-saas .crumbs li[aria-current]{color:#fff}
body.arch-saas .tag{border-color:#3A444E;color:#B9C3CC}
body.arch-saas .mob-chips{background:rgba(14,18,22,.94);border-color:var(--ink-line)}
body.arch-saas .chal article{background:#12181E;color:#DDE2E7}
body.arch-saas .chal{background:var(--ink-line);border-color:var(--ink-line)}
body.arch-saas #challenges{background:var(--ink);color:#DDE2E7}
body.arch-saas #challenges .d2{color:#fff}
body.arch-saas #challenges .lede,body.arch-saas #challenges .eyebrow{color:#8C98A4}

/* 03 Branding, type-led, paper, no ops chrome */
body.arch-brand .hero .d1{font-size:clamp(2.1rem,5vw,4.4rem);max-width:14ch;line-height:.9}
body.arch-brand .hero{background:var(--white)}
body.arch-brand .chal{gap:0;background:transparent;border:0}
body.arch-brand .chal article{background:var(--paper);border:0;padding:clamp(28px,3vw,48px)}
body.arch-brand .approach{border-top:0}
body.arch-brand .ap-row{grid-template-columns:minmax(0,.3fr) minmax(0,1fr);border-bottom:0;border-top:1px solid var(--rule)}
body.arch-brand .ap-row .idx{color:var(--cta);font-size:clamp(2.4rem,5vw,4rem)}

/* 04 Website, dual presentation */
body.arch-web .hero{background:var(--paper-2)}
body.arch-web .shot{box-shadow:var(--shadow-product)}
body.arch-web .chal article{background:var(--white)}

/* 05 Industry / specialized, workflow emphasis */
body.arch-industry .hero{background:var(--paper)}
body.arch-industry .fit-rail{margin-top:clamp(36px,5vw,64px);border-top:1px solid var(--rule)}
body.arch-industry .fit-rail article{padding-top:22px}
body.arch-industry #desks,body.arch-industry .sect--rule{background:var(--white)}