/* Owry site styles, shared by / (EN) and /de/ (DE). */
:root{
  --brand-blue:#1b4dff; --brand-blue-hover:#0a37d6; --on-brand:#fff;
  --surface:#f9f9f7; --surface-raised:#fff; --ink:#1a1a1a; --ink-muted:#6b6b6b;
  --border:#e4e4e0; --border-charcoal:#2e2e2e; --muted-num:#9a9a9a; --hairline-blue:rgba(255,255,255,0.3);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface);color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;line-height:1.6}
img,video{max-width:100%}
a{color:var(--brand-blue);text-decoration:none}
a:hover{color:var(--brand-blue-hover)}
::selection{background:var(--brand-blue);color:#fff}
:focus-visible{outline:2px solid var(--brand-blue);outline-offset:2px}
h1,h2,h3,p,ol,ul{margin:0}

.container{max-width:1160px;margin:0 auto;padding:0 clamp(24px,5vw,48px)}
.section{padding:clamp(72px,9vw,120px) 0}
.label{font-size:12px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-muted)}
.h2{font-size:clamp(32px,4.4vw,48px);line-height:1.1;font-weight:700;letter-spacing:-0.01em;text-wrap:balance}
.muted{color:var(--ink-muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;border-radius:6px;font:600 15px/1 Inter,sans-serif;background:var(--brand-blue);color:#fff;border:1px solid var(--brand-blue);cursor:pointer;transition:background 150ms,border-color 150ms}
.btn:hover{background:var(--brand-blue-hover);border-color:var(--brand-blue-hover);color:#fff;text-decoration:none}
.btn-dark{height:36px;padding:0 18px;font-size:14px;background:var(--ink);border-color:var(--ink)}
.btn-dark:hover{background:var(--brand-blue-hover);border-color:var(--brand-blue-hover)}
.btn-block{width:100%}

/* Header */
header{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--border)}
.nav{max-width:1160px;margin:0 auto;padding:14px clamp(24px,5vw,48px);display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-links{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:500}
.nav-links a:not(.btn){color:var(--ink)}
.nav-links a:not(.btn):hover{color:var(--brand-blue-hover)}
@media(max-width:760px){ .nav-links a:not(.btn){display:none} }

/* Hero */
.hero{padding:clamp(32px,4.5vw,56px) 0 clamp(56px,7vw,88px);overflow:hidden}
.hero-top{max-width:880px}
h1.hero-title{font-size:clamp(42px,6vw,80px);line-height:1.02;font-weight:600;letter-spacing:-0.025em;max-width:13ch;text-wrap:balance}
.hero-sub{margin-top:24px;font-size:clamp(17px,1.6vw,20px);line-height:1.5;color:var(--ink-muted);max-width:44ch;text-wrap:pretty}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--border)}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:var(--ink)}

/* Slideshow */
.showcase{margin-top:clamp(28px,3.5vw,44px)}
.stage{display:flex;flex-direction:column;gap:16px}
.slide{position:relative;margin:0;border:1px solid var(--border);border-radius:6px;overflow:hidden;background:#fff;aspect-ratio:16/9}
.slide .media{display:block;width:100%;height:100%;object-fit:contain;background:#fff}
.slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;font-size:14px;line-height:1.5;color:var(--ink-muted);background:rgba(249,249,247,.92);border-top:1px solid var(--border)}
.slide figcaption strong{color:var(--ink);font-weight:600}
.slide-hit{display:none}
.stage-foot{display:none}

.showcase.enhanced .stage{position:relative;display:block;width:min(960px,84vw);aspect-ratio:16/9;margin:0 auto;touch-action:pan-y;user-select:none;gap:0}
.showcase.enhanced .slide{position:absolute;inset:0;aspect-ratio:auto}
.showcase.enhanced .slide figcaption{display:none}
.showcase.enhanced .slide-hit{display:block;position:absolute;inset:0;border:0;background:transparent;cursor:pointer;padding:0}
.showcase.enhanced .stage-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:start;max-width:1008px;margin:20px auto 0;padding:0 24px}
.indicators{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ind{display:flex;flex-direction:column;gap:4px;text-align:left;padding:12px 0 0;border:0;border-top:2px solid var(--border);background:transparent;cursor:pointer;font-family:inherit;min-width:0}
.ind .n{font-size:12px;font-weight:600;color:var(--ink-muted)}
.ind .t{font-size:14px;font-weight:600;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ind[aria-current="true"]{border-top-color:var(--brand-blue)}
.ind[aria-current="true"] .n{color:var(--brand-blue)}
.ind[aria-current="true"] .t{color:var(--ink)}
.arrows{display:flex;gap:6px;padding-top:14px}
.arrow{width:40px;height:40px;border:1px solid var(--border);border-radius:6px;background:#fff;cursor:pointer;font-size:18px;color:var(--ink);line-height:1}
.arrow:hover{border-color:var(--ink)}
.active-caption{grid-column:1 / -1;font-size:15px;line-height:1.55;color:var(--ink-muted);max-width:70ch}
@media(max-width:480px){ .ind .t{display:none} }

/* Clients */
.clients{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.clients-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));align-items:stretch}
.clients-lead{padding:32px 32px 32px 0;display:flex;flex-direction:column;justify-content:center}
.client{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 32px;border-left:1px solid var(--border);color:var(--ink)}
.client:hover{background:var(--surface);text-decoration:none;color:var(--ink)}
.client .arrow-mark{font-size:13px;color:var(--ink-muted)}

/* Positioning (charcoal) */
.band-dark{background:var(--ink);color:#fff}
.cmp{width:100%;border-collapse:collapse;margin-top:56px;font-size:15px;line-height:1.5}
.cmp caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cmp th,.cmp td{text-align:left;padding:14px 16px 14px 0;border-top:1px solid var(--border-charcoal);vertical-align:top;font-weight:400}
.cmp thead th{border-top:0;padding-bottom:14px;vertical-align:bottom}
.cmp thead .col-detect{font-size:15px;font-weight:600}
.cmp thead .col-detect small{display:block;font-size:13px;font-weight:400;color:var(--muted-num)}
.cmp thead .col-owry{font-size:15px;font-weight:600}
.cmp tbody th{font-weight:400}
.cmp .dash{color:var(--muted-num)}
.cmp .yes-owry{font-weight:600}

/* Hairline grids */
.hairgrid{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:6px;overflow:hidden;margin-top:56px}
.cell{background:#fff;padding:32px}
.cell-blue{background:var(--brand-blue);color:#fff}
.cell-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.cell h3{font-size:20px;font-weight:700}
.steps{list-style:none;margin:24px 0 0;padding:0}
.steps li{display:grid;grid-template-columns:36px 1fr;padding:14px 0;border-top:1px solid var(--border);font-size:15px;line-height:1.5}
.steps li .num{color:var(--ink-muted)}
.cell-blue .steps li{border-top-color:var(--hairline-blue)}
.cell-blue .steps li .num{color:#fff}

/* Clash types */
.clash-cell{background:#fff;padding:32px;display:flex;flex-direction:column;gap:16px;min-height:240px}
.clash-cell.now{box-shadow:inset 0 0 0 2px var(--brand-blue)}
.clash-label-now{font-size:12px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--brand-blue)}
.clash-img-wrap{margin-top:8px;height:190px;display:flex;align-items:center;justify-content:center}
.clash-img{display:block;width:100%;max-width:220px;height:190px;object-fit:contain}
.clash-img.next{filter:grayscale(1) opacity(0.45)}
.clash-cell h3{margin:auto 0 0;font-size:24px;font-weight:700}
.clash-cell p{font-size:16px;line-height:1.6;color:var(--ink-muted)}

/* Offer */
.offer-cell{background:#fff;padding:32px;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:16px;row-gap:8px;align-content:start}
.offer-cell .num{grid-row:span 2;font-size:13px;font-weight:600;color:var(--brand-blue);padding-top:4px}
.offer-cell h3{font-size:20px;line-height:1.3;font-weight:700}
.offer-cell p{font-size:16px;line-height:1.6;color:var(--ink-muted);max-width:40ch;text-wrap:pretty}
.start{margin-top:72px}
.start h3{font-size:24px;line-height:1.25;font-weight:700}
.start-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border-top:2px solid var(--ink);margin-top:24px}
.start-steps .num{font-size:13px;font-weight:600;color:var(--brand-blue)}
.start-steps .st{padding:20px 24px 0 0}
.start-steps .st div:last-child{margin-top:10px;font-size:16px;font-weight:600}

/* Articles */
.articles-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.article-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));margin-top:40px;border:1px solid var(--border);border-radius:6px;overflow:hidden;color:var(--ink);background:#fff}
.article-card:hover{border-color:var(--ink);text-decoration:none;color:var(--ink)}
.article-card img{width:100%;height:100%;min-height:280px;object-fit:cover;display:block;background:var(--surface)}
.article-card .body{padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;justify-content:center}
.article-meta{display:flex;gap:12px;align-items:center;font-size:13px;color:var(--ink-muted)}
.tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border:1px solid var(--border);border-radius:9999px;font-size:12px;font-weight:500;color:var(--ink);background:var(--surface)}
.article-card h3{margin-top:20px;font-size:clamp(22px,2.4vw,28px);line-height:1.25;font-weight:700;text-wrap:balance}
.article-card .read{margin-top:24px;font-size:15px;font-weight:600;color:var(--brand-blue)}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(24px,5vw,64px)}
.faq-list{grid-column:span 2}
details.faq{border-top:1px solid var(--border)}
details.faq:last-child{border-bottom:1px solid var(--border)}
details.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:baseline;padding:22px 0;font-size:18px;font-weight:600}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary .plus{flex:none;color:var(--brand-blue);font-weight:700;transition:transform 150ms}
details.faq[open] summary .plus{transform:rotate(45deg)}
details.faq p{margin:0 0 22px;font-size:16px;line-height:1.6;color:var(--ink-muted);max-width:70ch}

/* Contact */
.contact{background:var(--brand-blue);color:#fff}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:64px;align-items:center}
.contact p{font-size:17px;line-height:1.6;max-width:44ch}
.contact a.email{color:#fff;text-decoration:underline}
.form-panel{background:#fff;color:var(--ink);padding:32px}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
.field input{width:100%;height:44px;padding:0 14px;border:1px solid var(--border);border-radius:6px;font:400 15px Inter,sans-serif;color:var(--ink);background:#fff}
.field input:focus-visible{outline:2px solid var(--brand-blue);outline-offset:2px;border-color:var(--brand-blue)}
.field .hint{margin-top:8px;font-size:13px;color:var(--ink-muted)}
.field .error{margin-top:8px;font-size:13px;color:var(--brand-blue);font-weight:600}
.form-panel .btn{margin-top:16px}
.form-ok h2{font-size:24px;font-weight:700}
.form-ok p{color:var(--ink-muted);font-size:16px;margin-top:8px}

/* Footer */
footer{background:var(--ink);color:#fff}
.footer-inner{max-width:1160px;margin:0 auto;padding:40px clamp(24px,5vw,48px);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px}
.footer-links{display:flex;gap:28px;font-size:14px;font-weight:500;flex-wrap:wrap}
.footer-links a{color:#fff}
.footer-links a:hover{color:#fff;text-decoration:underline}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Language switch */
.lang{font-size:13px;font-weight:600;letter-spacing:0.04em;color:var(--ink-muted)!important;border:1px solid var(--border);border-radius:6px;padding:6px 9px;line-height:1}
.lang:hover{border-color:var(--ink);color:var(--ink)!important}
@media(max-width:760px){ .nav-links a.lang{display:inline-flex} }

/* Lead paragraph under section titles */
.lead{margin-top:20px;font-size:18px;line-height:1.6;color:var(--ink-muted);max-width:62ch;text-wrap:pretty}
.band-dark .lead{color:#c9c9c4}

/* Intent story (23 → 22 → 1) */
.funnel{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.funnel .f{padding:28px 32px;background:#fff}
.funnel .f .big{font-size:clamp(40px,5vw,56px);line-height:1;font-weight:700;letter-spacing:-0.02em}
.funnel .f .big.blue{color:var(--brand-blue)}
.funnel .f p{margin-top:12px;font-size:15px;line-height:1.5;color:var(--ink-muted)}

/* Status labels on clash types */
.clash-label-dev{font-size:12px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-muted)}
.clash-cell .term{font-size:13px;color:var(--ink-muted);margin-top:-8px}

/* Trust block */
.trust-cell{background:#fff;padding:28px 32px}
.trust-cell h3{font-size:17px;font-weight:700;line-height:1.3}
.trust-cell p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--ink-muted)}

/* Founding partner strip */
.fp-strip{margin-top:56px;display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;padding:28px 32px;border:2px solid var(--ink);border-radius:6px;background:#fff}
.fp-strip p{font-size:17px;line-height:1.5;max-width:60ch}
.fp-strip strong{font-weight:700}

/* Long German compounds: hyphenate instead of overflowing on phones */
.cmp th,.cmp td,.h2,.hero-title,.clash-cell h3,.trust-cell h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
@media(max-width:480px){ .cmp{font-size:13px;table-layout:fixed} .cmp th,.cmp td{padding-right:10px;overflow-wrap:anywhere} }

/* Hero eyebrow: who the site is for */
.hero-eyebrow{margin-bottom:20px;color:var(--brand-blue)}

/* Project types (roads, bridges, railways) */
.sector-cell{background:#fff;padding:32px}
.sector-cell h3{font-size:24px;font-weight:700;line-height:1.2}
.sector-cell p{margin-top:10px;font-size:16px;line-height:1.55;color:var(--ink-muted)}
.sector-cell .eg{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);font-size:14px;color:var(--ink)}

/* Today vs With Owry diagram (problem section) */
.flow-panel{margin-top:48px;background:#fff;color:var(--ink);border-radius:6px;padding:clamp(20px,3vw,32px)}
.flow-title{font-size:16px;font-weight:600;line-height:1.4;margin-bottom:20px;max-width:60ch}
.flow-panel svg{display:block;height:auto}
.flow-stacked{display:none!important;max-width:420px}
@media(max-width:640px){ .flow-wide{display:none!important} .flow-stacked{display:block!important} }

/* Article teaser without an image */
.article-card.no-img{grid-template-columns:1fr}
.article-card.no-img + .article-card{margin-top:16px}