/* kaner.it — shared geometry, surface transitions and restrained motion. */
:root { --ease:cubic-bezier(.22,1,.36,1) }
.site-header { background:var(--paper) }
.identity-mark { width:42px; height:35px }
.identity-mark rect:nth-last-child(-n+2) { fill:#c35a32 }
.brand { gap:12px }
.wordmark .dot { color:inherit }
.wordmark .brand-it { color:var(--accent) }
.main-nav>a:not(.nav-contact) { position:relative }
.main-nav>a:not(.nav-contact)::after { content:""; position:absolute; left:0; right:0; bottom:-8px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease) }
.main-nav>a:hover::after,.main-nav>a[aria-current]::after { transform:scaleX(1) }
/* The current section is marked by the underline alone; a weight change would shift the other links between pages. */
.hero-grid { gap:48px; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) }
.hero-description { max-width:460px }
.hero-copy { animation:none }
.brand-stage { min-width:0; position:relative; color:var(--ink); padding:14px 0 10px }
.signature-meta { display:flex; justify-content:space-between; gap:16px; border-top:1px solid var(--line); padding-top:16px; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted) }
.signature-meta>span:last-child { letter-spacing:.06em }
.signature-svg { width:100%; height:auto; overflow:visible; margin:13px 0 -5px }
.signature-guides { opacity:.17 }
.signature-measure { opacity:.3 }
.signature-piece { transform-box:fill-box; transform-origin:center }
.identity-word { opacity:0; pointer-events:none }
.identity-word text { font:500 92px var(--serif); letter-spacing:-5px; fill:currentColor }
.identity-word .glyph-6 { fill:#c35a32 }
.typing-caret { stroke:var(--accent); stroke-width:1.3 }
.brand-stage figcaption { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:44px; color:var(--muted); font-size:10px }
.identity-replay { display:none; align-items:center; gap:8px; min-height:44px; border:0; padding:4px 0 4px 8px; background:transparent; color:inherit; font-size:11px }
.identity-replay svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.3; transition:transform .5s var(--ease) }
.identity-replay:hover svg { transform:rotate(-40deg) }
.identity-replay[aria-disabled=true] { opacity:.55; cursor:default }
.motion-enabled .identity-replay { display:inline-flex }
.is-playing .identity-word { animation:word-exit 4.2s both }
.is-playing .word-glyph { animation:glyph-write .01s both; animation-delay:calc(.14s + var(--glyph-index)*.115s) }
.glyph-0 { --glyph-index:0 }.glyph-1 { --glyph-index:1 }.glyph-2 { --glyph-index:2 }.glyph-3 { --glyph-index:3 }.glyph-4 { --glyph-index:4 }.glyph-5 { --glyph-index:5 }.glyph-6 { --glyph-index:6 }.glyph-7 { --glyph-index:7 }
.is-playing .typing-caret { animation:caret 1.7s steps(1) both }
.is-playing .signature-piece { animation:piece-arrive 1.8s var(--ease) both; animation-delay:1.9s }
.is-playing .signature-stem { --from-x:-28px; --from-y:32px; --from-r:-8deg }
.is-playing .signature-upper { --from-x:56px; --from-y:-36px; --from-r:12deg; animation-delay:2.05s }
.is-playing .signature-lower { --from-x:38px; --from-y:44px; --from-r:-12deg; animation-delay:2.15s }
.is-playing .signature-i { --from-x:0px; --from-y:36px; --from-r:0deg; animation-delay:2.3s }
.is-playing .signature-dot { --from-x:0px; --from-y:-20px; --from-r:90deg; animation-delay:2.4s }
.is-playing .signature-guides { animation:guide-arrive 4.2s both }
.is-playing .signature-detail,.is-playing .signature-measure { animation:detail-arrive 4.2s both }
@keyframes glyph-write { from { opacity:0 } to { opacity:1 } }
@keyframes word-exit { 0%,37% { opacity:1; transform:translateY(0) } 48%,100% { opacity:0; transform:translateY(-5px) } }
@keyframes caret { 0%,15%,35%,55%,75% { opacity:0 } 5%,25%,45%,65%,85% { opacity:1 } 100% { opacity:0 } }
@keyframes piece-arrive { from { opacity:0; transform:translate(var(--from-x),var(--from-y)) rotate(var(--from-r)) } to { opacity:1; transform:none } }
@keyframes guide-arrive { 0%,40% { opacity:0; transform:scale(.97); transform-origin:center } 100% { opacity:.17; transform:none } }
@keyframes detail-arrive { 0%,74% { opacity:0 } 100% { opacity:.25 } }

/* Three disciplines, expressed with the same elementary shapes. */
.sectors { background:#f1f3f3; padding-block:80px 88px; border:0 }
.sectors-heading { display:grid; grid-template-columns:1.2fr .8fr; gap:25px 80px; align-items:end; margin-bottom:48px }
.sectors-heading .eyebrow { grid-column:1/-1; font-size:10px }
.sectors-heading h2 { font-size:clamp(38px,3.4vw,51px) }
.sectors-heading>p:last-child { font-size:14px; line-height:1.85; color:var(--muted); max-width:400px; padding-bottom:3px }
.sectors-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) }
.sector { display:flex; flex-direction:column; border-top:1px solid var(--line); padding:28px 35px 0 0; margin-right:35px; min-width:0 }
.sector:last-child { margin-right:0; padding-right:0 }
.sector-top { display:flex; flex-direction:column; align-items:flex-start; gap:24px; margin-bottom:26px }
.sector-top>span { font-size:9px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted) }
.sector-motif { width:100px; height:94px; fill:var(--ink); transition:transform .6s var(--ease) }
.sector:nth-child(2) .sector-motif { fill:#a9c3dd }
.sector:nth-child(3) .sector-motif { fill:var(--accent) }
.sector-motif .motif-line { fill:none; stroke:var(--paper); stroke-width:1 }
.sector:nth-child(2) .motif-line { stroke:var(--ink) }
.sector:nth-child(3) .motif-line { stroke:var(--ink) }
.sector:hover .sector-motif { transform:translateY(-4px) }
.sector h3 { font-size:clamp(26px,2.5vw,35px); line-height:1.15; margin-bottom:20px }
.sector>p { font-size:13px; color:var(--muted); line-height:1.85; margin-bottom:30px; max-width:340px }
.sector-link { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:11px; margin-top:auto; padding-block:12px; border-bottom:1px solid var(--line) }
.sector-link>span { font-size:21px; transition:transform .35s var(--ease) }
.sector-link:hover>span { transform:translate(3px,-3px) }
.workflow-tab-copy strong { font-size:clamp(21px,1.9vw,28px) }
.workflow-tab { padding-block:25px }
.workflow-tab[aria-selected=true] { color:#e8ab86; border-bottom-color:#e8ab86 }
.workflow-tab[aria-selected=true] .workflow-number,.workflow-tab:hover { color:#e8ab86 }
.practice-panel { min-height:485px; padding:36px; color:#f5f7fa }
.practice-panel h3 { font-size:36px }
.practice-panel>p { font-size:14px }
.practice-steps strong { font-size:13px }
.practice-steps small { font-size:12px }
.practice-bottom>span { font-size:10px }
.practice-bottom .text-link { font-size:11px }
.module p,.process p { font-size:13px }
.module-index { font-size:9px }
.principle p { font-size:14px }
.trust-copy>p { font-size:15px }
.capacity { background:transparent; border-radius:0 }
.capacity p { font-size:12px }
.faq-items summary { font-size:14px }
.faq-items details p { font-size:13px }

/* Berlin: expertise. Vilnius: development and company seat. */
.presence { background:#243c66; padding-block:100px }
.presence-grid { grid-template-columns:minmax(0,1.13fr) minmax(0,1fr); gap:64px }
.presence h2 { font-size:clamp(39px,3.6vw,54px) }
.presence-intro { max-width:540px }
.location-list { display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-top:40px }
.location { border-top:1px solid #ffffff35; padding-top:22px; min-width:0 }
.location-number { font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:#c0d3e9 }
.location h3 { font-size:37px; margin:14px 0 10px }
.location h4 { font:500 12px/1.6 var(--sans); margin-bottom:14px; min-height:39px }
.location p { font-size:12px; line-height:1.85; color:#c9d7e9 }
.hosting-note { font-size:11px; line-height:1.85; color:#c9d7e9; margin-top:32px; padding-top:20px; border-top:1px solid #ffffff35; max-width:550px }
.presence-visual::before { display:none }
.presence-visual>svg { width:100%; height:auto; overflow:visible }
.presence-visual figcaption { display:flex; justify-content:space-between; gap:14px; color:#c9d7e9; font-size:11px; line-height:1.7; border-top:1px solid #ffffff35; padding-top:16px }
.map-land { fill:#a9c3df; opacity:.35 }
.map-pin { fill:#e6a17b }
.map-ring { fill:none; stroke:#e6a17b; stroke-width:.6 }
.map-marker text { fill:#f5f7fa; font:12px var(--sans); letter-spacing:.01em }
.map-connection { fill:none; stroke:#e6a17b; stroke-width:1; stroke-dasharray:3 5 }
.footer-locations { font-size:12px; line-height:1.85; color:#b7cbd6; margin-top:27px }
.footer-brand .wordmark .brand-it { color:#e6a17b }

/* A common background plane; foreground colors are calculated with it. */
/* A light/dark band change switches at the section boundary (identity.js); this short crossfade softens it. */
.ambient-enabled body { background:var(--ambient-bg,var(--paper)); transition:background-color .2s ease }
.ambient-enabled [data-surface] { --ink:var(--ambient-ink); --ink-soft:var(--ambient-ink); --muted:var(--ambient-muted); --line:var(--ambient-rule); --accent:var(--ambient-accent); background:transparent; color:var(--ambient-ink); border-color:var(--ambient-rule) }
.ambient-enabled [data-surface] h2 em { color:var(--ambient-accent) }
.ambient-enabled :is(.section-label,.section-head>p,.hero-copy>.eyebrow,.demo-heading,.step-summary p,.caption,.workflow-number,.sectors-heading>p:last-child,.presence .eyebrow,.presence-intro,.location-number,.location p,.hosting-note,.presence-visual figcaption,.contact-copy>.eyebrow,.contact-copy>p:not(.eyebrow):not(.contact-note),.contact-note,.direct-contact .eyebrow,.direct-contact>a>span) { color:var(--ambient-muted) }
.ambient-enabled :is(.section-label,.caption,.step-tabs,.principle,.location,.hosting-note,.presence-visual figcaption,.direct-contact>a) { border-color:var(--ambient-rule) }
.ambient-enabled .section-label>span:first-child { color:var(--ambient-ink) }
.ambient-enabled :is(.principle-number,.process-number,.workflow-tab[aria-selected=true],.workflow-tab[aria-selected=true] .workflow-number,.workflow-tab:hover,.module h4>span) { color:var(--ambient-accent) }
.ambient-enabled .workflow-tab[aria-selected=true] { border-bottom-color:var(--ambient-accent) }
.ambient-enabled .step-tabs { background:transparent }
.ambient-enabled .step-tabs button,.ambient-enabled .step-tabs button>span { color:var(--ambient-ink) }
.ambient-enabled .step-tabs button[aria-selected=true] { background:#1b2454; color:#fff }
.ambient-enabled .step-tabs button[aria-selected=true]>span { color:#b5d0eb }
.ambient-enabled .map-land { fill:var(--ambient-ink); opacity:.24 }
.ambient-enabled .map-marker text { fill:var(--ambient-ink) }
.ambient-enabled :is(.map-pin) { fill:var(--ambient-accent) }
.ambient-enabled :is(.map-ring,.map-connection) { stroke:var(--ambient-accent) }
.ambient-enabled .presence-visual svg text { stroke:var(--ambient-bg) }
.ambient-enabled .process-number>span { color:var(--ambient-muted) }
.ambient-enabled .signature-stem,.ambient-enabled .signature-lower { fill:var(--ambient-ink) }
.ambient-enabled .signature-i,.ambient-enabled .signature-dot { fill:var(--ambient-accent) }
/* Foregrounds must track the background immediately, including while scrolling. */
.ambient-enabled [data-surface] :is(a,button) { transition-property:transform,opacity }
/* Independent reading surfaces stay stable during a page transition. */
.ambient-enabled .frame,.ambient-enabled .contact form { --ink:#1b2454; --ink-soft:#37446d; --muted:#596680; --line:#d0d5df; --accent:#bd542e; color:#1b2454 }
.ambient-enabled .practice-panel { --ink:#f5f7fa; --muted:#b8cbe0; --line:#456188; --accent:#e8ab86; color:#f5f7fa }

.reveal { opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease),transform .8s var(--ease); transition-delay:var(--reveal-delay,0ms) }
.reveal.is-visible { opacity:1; transform:none }
.reveal:focus-within { opacity:1; transform:none }

@media (max-width:1200px) {
  .hero-grid { gap:40px }
  .sector { padding-right:25px; margin-right:25px }
  .presence-grid { gap:40px }
  .location-list { gap:22px }
  .location h4 { font-size:11px }
}
@media (max-width:960px) {
  .hero-grid { gap:30px }
  .signature-meta { font-size:7px; letter-spacing:.06em }
  .brand-stage figcaption { font-size:8px }.identity-replay { font-size:8px; gap:5px }
  .sectors { padding-block:66px }
  .sectors-heading { gap:24px 50px }.sectors-heading>p:last-child { font-size:13px }
  .sector { padding-right:20px; margin-right:20px }.sector-top>span { font-size:8px }.sector h3 { font-size:28px }.sector>p { font-size:12px }.sector-link { font-size:10px }
  .practice-panel { padding:26px }.practice-panel h3 { font-size:30px }.practice-panel>p { font-size:12px }.practice-steps strong { font-size:11px }.practice-steps small { font-size:10px }
  .presence { padding-block:76px }.presence-grid { grid-template-columns:1fr; gap:45px }.presence h2 { font-size:48px }.presence-intro { max-width:520px }
  .location-list { max-width:700px; gap:45px }.location h4 { min-height:0; font-size:13px }.location p { font-size:13px }.hosting-note { max-width:700px }
  .presence-visual { max-width:620px; width:100%; margin-inline:auto }
}
@media (max-width:760px) {
  .identity-mark { width:35px; height:29px }.brand { gap:10px }
  .hero-grid { grid-template-columns:1fr; gap:36px }
  .brand-stage { max-width:540px; width:100%; margin-inline:auto; padding-top:0 }
  .signature-meta { font-size:9px }.brand-stage figcaption { font-size:10px }.identity-replay { font-size:10px }
  .hero-bottom { margin-top:22px }
  .hero-description { font-size:14px }
  .main-nav>a:not(.nav-contact)::after { display:none }
  .main-nav>a[aria-current]:not(.nav-contact) { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px }
  .sectors { padding-block:60px }
  .sectors-heading { grid-template-columns:1fr; gap:23px; margin-bottom:35px }.sectors-heading .eyebrow { font-size:9px }.sectors-heading h2 { font-size:40px }.sectors-heading>p:last-child { font-size:14px }
  .sectors-grid { grid-template-columns:1fr }
  .sector { padding:25px 0 0; margin:0 0 32px; position:relative }.sector:last-child { margin-bottom:0 }
  .sector-top { flex-direction:row; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:0; min-height:94px }.sector-top>span { font-size:9px; padding-top:3px }
  .sector-motif { width:80px; height:76px; flex:none }
  .sector h3 { font-size:34px; margin-bottom:19px; margin-top:-28px; max-width:75% }.sector>p { font-size:14px; max-width:470px; margin-bottom:12px }.sector-link { font-size:12px; min-height:48px }
  .workflow-tab-copy strong { font-size:25px }.workflow-tab { padding-block:23px }
  .practice-panel { min-height:0; padding:28px }.practice-panel h3 { font-size:35px }.practice-panel>p { font-size:14px }.practice-steps strong { font-size:12px }.practice-steps small { font-size:11px }
  .module p,.process p { font-size:13px }
  .presence { padding-block:64px }.presence h2 { font-size:42px }.presence-grid { gap:35px }
  .location-list { gap:30px; margin-top:32px }.location h3 { font-size:34px }.location h4 { font-size:12px; min-height:39px }.location p { font-size:12px }
  .map-marker text { font-size:13px }
}
@media (max-width:440px) {
  .signature-meta { font-size:8px }.brand-stage figcaption { font-size:8px }.identity-replay { font-size:9px }
  .hero h1 { font-size:clamp(47px,12.4vw,55px) }
  .sector-top>span { max-width:190px; font-size:8px }.sector h3 { font-size:31px; max-width:78% }.sector-motif { width:68px; height:64px }
  .workflow-tab-copy strong { font-size:22px }.practice-panel { padding:24px }.practice-panel h3 { font-size:31px }.practice-panel>p { font-size:13px }
  .presence h2 { font-size:37px }.location-list { grid-template-columns:1fr; gap:28px }.location h4 { min-height:0; font-size:13px }.location p { font-size:13px; max-width:320px }.location h3 { font-size:37px }.location-number { font-size:10px }
  .hosting-note { font-size:12px }.presence-visual figcaption { flex-direction:column; gap:4px }
}
@media (prefers-reduced-motion:reduce) {
  .reveal { opacity:1; transform:none }
  .identity-replay { display:none!important }
}
@media print {
  .reveal { opacity:1; transform:none }.identity-replay { display:none!important }
  .utility,.brand-stage { display:none }
  .ambient-enabled body,.ambient-enabled [data-surface] { background:white; color:#1b2454; --ambient-ink:#1b2454; --ambient-muted:#37446d; --ambient-rule:#d0d5df; --ambient-accent:#bd542e }
  #main [data-surface],#main [data-surface] * { color:#1b2454!important; background-color:transparent!important; border-color:#cbd1dd!important }
  .map-marker text { fill:#1b2454; stroke:white }.map-land { fill:#1b2454 }
}
/* Focus stays visible (>=3:1) on every ambient band; demo and desk panels keep their own ring on their own surfaces. */
.ambient-enabled [data-surface] :focus-visible:not(.product-demo *,.review-desk *) { outline-color:var(--ambient-focus,#357995) }
/* Touch screens and narrow desktops show only the replay icon: it keeps a 44px target.
   The compound selector outranks the compact-signature sizing in products.css. */
@media (max-width:1200px),(pointer:coarse) {
  .brand-stage.compact-signature .identity-replay { min-width:44px; min-height:44px; justify-content:center; padding:0 }
}