@font-face{font-family:"Archivo";src:url(assets/fonts/archivo-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Archivo";src:url(assets/fonts/archivo-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Manrope";src:url(assets/fonts/manrope-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Manrope";src:url(assets/fonts/manrope-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Manrope";src:url(assets/fonts/manrope-700.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--light:#F5F5FA;--orange:#E63E23;--orange-d:#C9311A;--navy:#08232F;--grey:#8A8F92;--grey-l:#D1D8DB;--white:#fff;--text:#08232F;--muted:#4C5A61;
--wrap:1180px;--pad:clamp(20px,5vw,40px);--hfont:"Archivo",system-ui,sans-serif;--bfont:"Manrope",system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--bfont);font-size:17px;line-height:1.6;color:var(--text);background:var(--white);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--hfont);font-weight:600;line-height:1.08;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(2.6rem,9vw,4.9rem)}
h2{font-size:clamp(1.85rem,5.2vw,3rem);max-width:20ch}
h3{font-size:1.15rem;letter-spacing:-.01em;line-height:1.25}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--orange);color:#fff;padding:10px 16px;z-index:100;text-decoration:none;font-weight:700}
.skip:focus{left:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.eyebrow{font-family:var(--bfont);font-weight:700;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin-bottom:18px}
.accent{color:var(--orange)}
.intro{max-width:56ch;color:var(--muted);margin-top:18px;font-size:1.05rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:52px;padding:0 26px;background:var(--orange);color:#fff;font-family:var(--bfont);font-weight:700;font-size:1rem;text-decoration:none;border:2px solid var(--orange);border-radius:2px;transition:background .15s,border-color .15s}
.btn:hover{background:var(--orange-d);border-color:var(--orange-d)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.45)}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:#fff}
.btn-sm{min-height:42px;padding:0 18px;font-size:.92rem}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.08)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand img{height:40px;width:auto}
.nav{display:flex;align-items:center;gap:28px}
.nav a{color:#fff;text-decoration:none;font-weight:600;font-size:.95rem}
.nav a:not(.btn):hover{color:var(--orange)}
.nav a:not(.btn){display:none}

/* hero */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;padding:44px 0 56px}
.hero-k{position:absolute;top:-6%;right:-58%;width:180%;max-width:none;height:auto;opacity:.12;pointer-events:none}
.hero-grid{position:relative;display:grid;gap:40px}
.hero h1{max-width:12ch}
.lede{font-size:1.15rem;color:#DCE2E5;margin-top:22px;max-width:40ch}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.cta-row .btn{flex:1 1 220px}
.hero-photo{position:relative}
.hero-photo img:not(.hero-piece){width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 60%}
.hero-piece{position:absolute;right:-6px;bottom:-22px;width:44px;height:auto}

/* sections */
.section{padding:72px 0;position:relative}
.light{background:var(--light)}
.dark{background:var(--navy);color:#fff;overflow:hidden}
.dark .intro{color:#C9D1D5}

.services{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:1px;background:var(--grey-l);border:1px solid var(--grey-l)}
.service{background:#fff;padding:24px 22px}
.service p{color:var(--muted);margin-top:8px;font-size:.98rem}
.service.feature{background:var(--navy);color:#fff}
.service.feature p{color:#C9D1D5}
.service.feature img{width:40px;height:40px;margin-bottom:16px}
.service.feature h3{font-size:1.45rem}

.why-k{position:absolute;bottom:-10%;right:-70%;width:170%;max-width:none;opacity:.08;pointer-events:none}
.reasons{list-style:none;margin:44px 0 0;padding:0;display:grid;gap:0;position:relative}
.reasons li{position:relative;padding:26px 0 26px 44px;border-top:1px solid rgba(255,255,255,.16)}
.reasons li:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.reasons li::before{content:"";position:absolute;left:0;top:30px;width:14px;height:28px;background:url(assets/img/kalix_shape_right-piece_orange.svg) no-repeat center/contain}
.reasons p{color:#C9D1D5;margin-top:8px;max-width:52ch}

.gallery{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.shot{margin:0;position:relative;background:var(--light)}
.shot img{width:100%;aspect-ratio:3/4;object-fit:cover}
.shot figcaption{font-family:var(--bfont);font-weight:700;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:14px 0 0;color:var(--navy)}
.shot figcaption::before{content:"";display:inline-block;width:18px;height:2px;background:var(--orange);vertical-align:middle;margin-right:10px}

.steps{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:14px;counter-reset:s}
.steps li{background:#fff;padding:26px 22px;border-top:3px solid var(--orange)}
.num{display:block;font-family:var(--hfont);font-weight:600;font-size:.95rem;color:var(--orange);letter-spacing:.06em;margin-bottom:14px}
.steps p{color:var(--muted);margin-top:8px;font-size:.98rem}

.contact-grid{display:grid;gap:36px}
.place{margin-top:22px;font-weight:600;color:#fff}
.place::before{content:"";display:inline-block;width:10px;height:20px;background:url(assets/img/kalix_shape_right-piece_orange.svg) no-repeat center/contain;vertical-align:-4px;margin-right:10px}
.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.contact-btn{display:flex;flex-direction:column;gap:2px;padding:18px 22px;border:1px solid rgba(255,255,255,.28);text-decoration:none;color:#fff;transition:border-color .15s,background .15s;border-radius:2px}
.contact-btn:hover{border-color:#fff;background:rgba(255,255,255,.05)}
.contact-btn.primary{background:var(--orange);border-color:var(--orange)}
.contact-btn.primary:hover{background:var(--orange-d);border-color:var(--orange-d)}
.contact-btn .label{font-size:.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.contact-btn .value{font-family:var(--hfont);font-weight:600;font-size:clamp(1.15rem,4.6vw,1.45rem);letter-spacing:-.01em;overflow-wrap:anywhere}

.site-footer{background:var(--navy);color:#AEB8BD;border-top:1px solid rgba(255,255,255,.12);padding:36px 0 104px;font-size:.92rem}
.footer-inner{display:grid;gap:12px}
.footer-inner img{height:24px;width:auto;margin-bottom:6px}
.small{font-size:.82rem;color:#8FA0A8}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{text-decoration:underline}

.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1fr 1.25fr;background:var(--navy);border-top:1px solid rgba(255,255,255,.14);padding-bottom:env(safe-area-inset-bottom)}
.mobile-bar a{display:flex;align-items:center;justify-content:center;min-height:56px;color:#fff;text-decoration:none;font-weight:700;font-size:.95rem;border-right:1px solid rgba(255,255,255,.12)}
.mobile-bar a.hl{background:var(--orange);border-right:0}

@media (min-width:600px){
  .services{grid-template-columns:1fr 1fr}
  .service.feature{grid-column:1/-1}
  .gallery{gap:16px}
  .steps{grid-template-columns:1fr 1fr}
}
@media (min-width:900px){
  body{font-size:18px}
  .nav a:not(.btn){display:inline}
  .header-inner{height:84px}
  .brand img{height:46px}
  .hero{padding:88px 0 104px}
  .hero-grid{grid-template-columns:1.05fr .95fr;align-items:center;gap:64px}
  .hero-photo img:not(.hero-piece){aspect-ratio:4/5}
  .hero-k{right:-30%;top:-20%;width:110%}
  .hero-piece{width:56px;right:-28px;bottom:48px}
  .section{padding:112px 0}
  .services{grid-template-columns:repeat(4,1fr)}
  .service.feature{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;justify-content:flex-end;padding:36px}
  .service.feature h3{font-size:2rem}
  .why-k{right:-25%;bottom:-30%;width:80%}
  .reasons{grid-template-columns:1fr 1fr;column-gap:64px}
  .reasons li:nth-last-child(2){border-bottom:1px solid rgba(255,255,255,.16)}
  .gallery{grid-template-columns:repeat(var(--cols,3),1fr);gap:20px}
  .shot figcaption{font-size:.78rem;letter-spacing:.18em}
  .steps{grid-template-columns:repeat(4,1fr)}
  .contact-grid{grid-template-columns:1fr 1fr;align-items:center;gap:64px}
  .footer-inner{grid-template-columns:auto 1fr auto;align-items:center;gap:28px}
  .footer-inner img{margin:0}
  .site-footer{padding:32px 0}
  .mobile-bar{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* multi-page additions */
.sub-h{font-size:1.25rem;margin-top:48px}
.services{margin-top:24px}
.more{margin-top:32px}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.nav a[aria-current="page"]{color:var(--orange)}
.page-head{position:relative;background:var(--navy);color:#fff;overflow:hidden;padding:44px 0 52px}
.page-head .wrap{position:relative}
.page-head h1{font-size:clamp(2.4rem,8vw,4.2rem)}
.contact-page{min-height:60vh}
.contact-page h1{font-size:clamp(2.2rem,7vw,3.6rem)}
.contact .cta-row{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:899px){
  .header-inner{gap:12px}
  .brand img{width:132px;height:auto}
  .nav{gap:14px}
  .nav a:not(.btn){display:inline;font-size:.88rem}
  .nav .btn-sm{display:none}
}
@media (min-width:900px){
  .page-head{padding:88px 0 96px}
}

/* brand booklet alignment (audit 2026-10-26) */
h1,h2{font-weight:500}
h1,h2,h3{letter-spacing:0}
.btn,.contact-btn{border-radius:6px}
.btn-sm{border-radius:5px}
.btn{font-weight:600}
.eyebrow,.shot figcaption,.contact-btn .label{font-weight:600;letter-spacing:.12em}
.lede,.dark .intro,.service.feature p,.reasons p{color:var(--grey-l)}
.site-footer{color:var(--grey-l)}
.hero-k{opacity:1;top:auto;bottom:-6%;right:-62%;width:120%;z-index:0}
.hero-grid{z-index:1}
.page-head .hero-k{bottom:-40%;right:-48%;width:95%}
.why-k{display:none}
.hero-photo img:not(.hero-piece){clip-path:polygon(0 0,100% 0,100% 84%,82% 100%,0 100%)}
.hero-photo{background:transparent}
@media (max-width:899px){
  .brand img{width:auto;height:30px}
}
@media (min-width:900px){
  .header-inner{height:88px}
  .hero-k{bottom:-20%;right:-38%;width:75%}
  .page-head .hero-k{bottom:-55%;right:-12%;width:48%}
}

.hero-piece{display:none}
.page-head{padding-bottom:64px}
.page-head .lede{max-width:28ch}
.page-head .hero-k{bottom:-78%;right:-66%;width:80%}
@media (min-width:900px){ .page-head .hero-k{bottom:-70%;right:-14%;width:44%} .page-head .lede{max-width:40ch} }

.lang-switch{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;letter-spacing:.06em;color:rgba(255,255,255,.5)}
.lang-switch a{color:#fff;text-decoration:none;display:inline!important;padding:6px 2px}
.lang-switch a[aria-current="page"]{color:var(--orange)}
@media (max-width:899px){ .nav{gap:12px} .nav a:not(.btn){font-size:.85rem} .lang-switch{font-size:.78rem;gap:4px} }

/* How we work: process stages */
.stage{margin-top:48px}
.stage-h{display:flex;align-items:baseline;gap:12px;color:var(--navy);padding-top:18px;border-top:1px solid rgba(0,0,0,.08)}
.stage-h .num{display:inline;margin:0}
.stage-grid{margin-top:20px}
.stage-grid>.shot:first-child:nth-last-child(odd){grid-column:span 2}
.stage-grid>.shot:first-child:nth-last-child(odd) img{aspect-ratio:4/3}
@media (min-width:900px){
  .stage{margin-top:64px}
  .stage-grid{grid-template-columns:repeat(4,1fr)}
  .stage-grid>.shot:first-child:nth-last-child(5){grid-row:span 2}
  .stage-grid>.shot:first-child:nth-last-child(5) img{aspect-ratio:auto;height:100%;min-height:0}
  .stage-grid>.shot:first-child:nth-last-child(5) picture{display:block;height:calc(100% - 40px)}
}
/* Home: process preview */
.process-preview{margin-top:36px}
.process-preview .gallery{margin-top:0}
.process-preview .more{margin-top:20px}
@media (min-width:900px){.process-preview .gallery{grid-template-columns:repeat(4,1fr)}}

/* contact icons */
.contact-btn{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center}
.contact-btn .ico{grid-row:1 / span 2;width:28px;height:28px;color:#E63E23}
.contact-btn.primary .ico{color:#fff}
.contact-btn .label,.contact-btn .value{grid-column:2}

/* scroll animations */
.anim .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.anim .rv.in{opacity:1;transform:none}
.anim .gallery .shot.rv{transform:translateY(26px) scale(.97)}
.anim .gallery .shot.rv.in{transform:none}
.hero-photo picture{display:block;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 84%,82% 100%,0 100%)}
.hero-photo img:not(.hero-piece){clip-path:none!important}
.hero-photo img:not(.hero-piece){transition:transform .2s linear;will-change:transform}
.anim .hero .rv.in{transition-duration:.9s}
.btn{transition:transform .2s ease,background .15s,border-color .15s}
.btn:hover{transform:translateY(-2px)}
.gallery .shot img{transition:transform .5s ease}
.gallery .shot:hover img{transform:scale(1.04)}
.gallery .shot{overflow:hidden}
.service{transition:transform .25s ease, box-shadow .25s ease}
.service:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(8,35,47,.10)}
@media (prefers-reduced-motion: reduce){.anim .rv{opacity:1!important;transform:none!important;transition:none!important}}

.shot.wide{grid-column:span 2}
.shot.wide img{aspect-ratio:4/3}

/* hero without photo (Oct 26) */
@media (max-width:899px){ .hero{padding-bottom:250px} .hero-k{bottom:-4%;right:-30%;width:88%} }

/* feature card fuller (Oct 26) */
.service.feature{padding:32px 28px}
.service.feature .feat-ico{width:88px;height:88px;margin-bottom:22px;display:block}
.service.feature h3{font-size:2rem;line-height:1.1;margin-bottom:10px}
.service.feature p{font-size:1.2rem;line-height:1.45}
@media (min-width:900px){ .service.feature .feat-ico{width:120px;height:120px} .service.feature h3{font-size:2.6rem} .service.feature p{font-size:1.35rem;max-width:22ch} }