[hidden]{display:none!important}
:root{
  --petrol:#2e96a8;--petrol-dark:#1f7a8a;--petrol-light:#4bbdd0;
  --ink:#0f2126;--paper:#f4f7f9;--line:#dce6ea;--tile:#ffffff;
  --muted:#5d7f8a;--faint:#8ba4ad;
}
html[data-theme="dark"]{
  --ink:#e2eef2;--paper:#0b1518;--line:#1a2d34;--tile:#0f1e23;
  --muted:#7aaab5;--faint:#4e7480;
}
html[data-theme="light"]{
  --ink:#0f2126;--paper:#f4f7f9;--line:#dce6ea;--tile:#ffffff;
  --muted:#5d7f8a;--faint:#8ba4ad;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Inter',system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.6;font-size:16px}
a{color:var(--petrol);text-decoration:none}
a:hover{text-decoration:underline}

/* ── HEADER ── */
.site-header{
  position:sticky;top:0;z-index:10;
  background:color-mix(in srgb,var(--paper) 94%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  padding:12px clamp(16px,4vw,52px);
}


nav{display:flex;gap:2px;flex-wrap:wrap;justify-content:center}
nav a{padding:8px 11px;color:var(--ink);font-size:13px;font-weight:500;border-radius:4px;transition:background .15s,color .15s}
nav a:hover{background:var(--line);text-decoration:none}
nav a[aria-current=page]{background:var(--petrol);color:#fff}
.header-tools{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.theme-toggle{border:1px solid var(--line);background:var(--tile);color:var(--ink);padding:7px 12px;font-family:'Inter',sans-serif;font-size:12px;font-weight:600;border-radius:4px;cursor:pointer;transition:background .15s}
.theme-toggle:hover{background:var(--line)}
.language-select{display:flex;align-items:center;gap:6px}
.language-select span{position:absolute;left:-9999px}
.language-select select{border:1px solid var(--line);background:var(--tile);color:var(--ink);padding:7px 28px 7px 10px;font-family:'Inter',sans-serif;font-size:12px;border-radius:4px;cursor:pointer}
.menu-toggle{display:none;background:var(--tile);border:1px solid var(--line);padding:8px 12px;color:var(--ink);border-radius:4px;cursor:pointer;font-size:16px}

/* ── HERO ── */
.hero,.page-head{padding:clamp(52px,9vw,110px) clamp(20px,6vw,80px) 36px}
.hero h1,.page-head h1{
  font-size:clamp(36px,6.5vw,78px);line-height:.96;
  margin:0 0 20px;font-weight:800;letter-spacing:-1.5px;max-width:860px
}
.hero p,.page-head p{font-size:clamp(16px,1.8vw,20px);max-width:680px;color:var(--muted);font-weight:400}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;color:var(--petrol);font-weight:700;font-size:12px;margin-bottom:12px;display:block}
.button{display:inline-block;border:0;background:var(--petrol);color:#fff;padding:13px 22px;font-weight:700;font-family:'Inter',sans-serif;font-size:14px;letter-spacing:.02em;border-radius:3px;margin-top:18px;transition:background .15s}
.button:hover{background:var(--petrol-dark);text-decoration:none}
.button.secondary{background:var(--tile);color:var(--ink);border:1px solid var(--line)}
.button.secondary:hover{background:var(--line)}

/* ── METRO TILE GRID ── */
.metro-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(155px,1fr));
  gap:2px;padding:2px clamp(20px,6vw,80px);
  background:var(--line);
}
.tile{
  aspect-ratio:1/1;background:var(--tile);
  padding:20px;display:flex;flex-direction:column;justify-content:space-between;
  color:var(--ink);position:relative;overflow:hidden;
  border-top:2px solid var(--petrol);
  transition:background .15s;text-decoration:none;
}
.tile:nth-child(2){border-top-color:#2a8fa0}
.tile:nth-child(3){border-top-color:#1f7a8a}
.tile:nth-child(4){border-top-color:#3aafc2}
.tile:nth-child(5){border-top-color:#2e96a8}
.tile:nth-child(6){border-top-color:#2a8fa0}
.tile:hover{background:var(--paper);text-decoration:none}
.tile strong{font-size:17px;font-weight:700;display:block;margin-top:auto}
.tile small{color:var(--muted);font-size:12px;font-weight:400;margin-top:4px;display:block}

/* ── TILE ICONS ── */
.tile-icon{width:32px;height:32px;flex-shrink:0}
.tile-icon svg{width:32px;height:32px;fill:none;stroke:var(--petrol);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}

/* Brands: staggered pop on hover */
.tile:hover .ico-brands .b1{animation:popIn .22s .00s ease both}
.tile:hover .ico-brands .b2{animation:popIn .22s .07s ease both}
.tile:hover .ico-brands .b3{animation:popIn .22s .14s ease both}
.tile:hover .ico-brands .b4{animation:popIn .22s .21s ease both}
@keyframes popIn{0%{transform:scale(.4);opacity:0}65%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}

/* Capabilities: always visible, redraws on hover */
.ico-cap .capline{stroke-dasharray:64;stroke-dashoffset:0}
.tile:hover .ico-cap .capline{animation:drawLine .55s ease forwards}
@keyframes drawLine{0%{stroke-dashoffset:64}100%{stroke-dashoffset:0}}

/* Cases: lines appear */
.ico-cases .cline1{stroke-dasharray:11;stroke-dashoffset:11;transition:stroke-dashoffset .2s .2s}
.ico-cases .cline2{stroke-dasharray:8;stroke-dashoffset:8;transition:stroke-dashoffset .2s .3s}
.ico-cases .cpage{transition:transform .2s}
.tile:hover .ico-cases .cpage{transform:translateY(-2px)}
.tile:hover .ico-cases .cline1{stroke-dashoffset:0}
.tile:hover .ico-cases .cline2{stroke-dashoffset:0}

/* Media: camera ↔ mic crossfade */
.ico-media-wrap{position:relative;width:32px;height:32px}
.ico-media-cam,.ico-media-mic{position:absolute;top:0;left:0;width:32px;height:32px;fill:none;stroke:var(--petrol);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:opacity .3s,transform .3s}
.ico-media-mic{opacity:0;transform:translateY(8px)}
.tile:hover .ico-media-cam{opacity:0;transform:translateY(-8px)}
.tile:hover .ico-media-mic{opacity:1;transform:translateY(0)}

/* Press: package + van animation */
.ico-press-scene{width:38px;height:32px;position:relative}
.ico-press-scene svg{position:absolute;top:0;left:0;width:52px;height:38px;fill:none;stroke:var(--petrol);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ps-van-g{transform:translateX(-60px);opacity:0}
.tile:hover .ps-pkg-g{animation:pkgFly2 2.4s ease forwards}
.tile:hover .ps-van-g{animation:vanAnim2 2.4s ease forwards}
@keyframes pkgFly2{0%{transform:translate(0,0) scale(1);opacity:1}32%{transform:translate(0,0) scale(1);opacity:1}54%{transform:translate(-18px,6px) scale(.2);opacity:.8}58%{opacity:0}100%{opacity:0}}
@keyframes vanAnim2{0%{transform:translateX(-60px);opacity:0}5%{opacity:1}36%{transform:translateX(0px);opacity:1}58%{transform:translateX(0px);opacity:1}100%{transform:translateX(70px);opacity:1}}

/* Contact: bounce */
.ico-contact .bubble{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.tile:hover .ico-contact .bubble{transform:scale(1.12) translateY(-2px)}

/* ── STATS ── */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px;background:var(--line);
  margin:0 clamp(20px,6vw,80px) 2px;
}
.stats div{background:var(--tile);padding:24px 20px;border-left:2px solid var(--petrol)}
.stats strong{display:block;font-size:30px;font-weight:800;color:var(--petrol);letter-spacing:-1px}
.stats span{color:var(--muted);font-size:13px}

/* ── SECTIONS ── */
section{padding:28px clamp(20px,6vw,80px)}
.text-band{background:var(--tile);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px clamp(20px,6vw,80px)}
.text-band h2{font-size:clamp(18px,2.5vw,26px);font-weight:700;margin:0 0 10px;max-width:820px}
.text-band p{color:var(--muted);max-width:820px;margin:0}
.legal,.about-panel,.case-list article{background:var(--tile);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ── CASES ── */
.case-grid,.case-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px;background:var(--line)}
.case-grid article,.case-list article{background:var(--tile);padding:20px;border-left:2px solid var(--petrol)}
.case-grid h3,.case-list h3{font-size:16px;font-weight:700;margin:0 0 8px;color:var(--petrol)}

/* ── ABOUT ── */
.about-panel{display:grid;grid-template-columns:minmax(200px,340px) 1fr;gap:40px;align-items:start;padding:clamp(20px,6vw,80px)}
.about-panel img{width:100%;height:auto;display:block;max-height:580px;object-fit:cover;object-position:center top}

/* ── SERVICES ── */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px;background:var(--line)}
.service-card{background:var(--tile);padding:24px;border-top:2px solid var(--petrol)}
.service-card h3{font-size:15px;font-weight:700;margin:0 0 10px;color:var(--petrol)}
.service-card ul{margin:0;padding-left:18px;color:var(--muted);font-size:14px;line-height:1.8}

/* ── BRANDS ── */
.brand-tools{display:flex;gap:10px;flex-wrap:wrap;padding:0 clamp(20px,6vw,80px) 14px}
.brand-tools input,.brand-tools select,.form input,.form textarea,.form select{width:100%;padding:11px 14px;border:1px solid var(--line);background:var(--tile);color:var(--ink);font-family:'Inter',sans-serif;font-size:14px;border-radius:3px}
.brand-tools input:focus,.brand-tools select:focus,.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--petrol);outline-offset:1px}
.brand-tools input{flex:2;min-width:220px}
.brand-tools select{flex:1;min-width:200px}
.brand-logo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:2px;padding:0 clamp(20px,6vw,80px) 20px;background:var(--line) 0 0/100% 100%}
.brand-logo{background:var(--tile);padding:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;border:2px solid transparent;min-height:72px;transition:border-color .15s,background .15s}
.brand-logo:hover{background:var(--paper)}
.brand-logo[aria-pressed=true]{border-color:var(--petrol)}
.brand-logo strong{font-size:13px;font-weight:700;color:var(--petrol);text-align:center}
.brand-logo span{font-size:11px;color:var(--muted)}
.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px;background:var(--line)}
.product-card{background:var(--tile);padding:16px;display:flex;flex-direction:column;min-height:120px}
.product-card strong{font-size:14px;font-weight:700;color:var(--petrol)}
.product-card small{margin-top:auto;color:var(--muted);font-size:12px}
.products-collapsed{display:none}

/* ── MEDIA ── */
.youtube-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px;background:var(--line)}
.youtube-card{background:var(--tile);display:flex;flex-direction:column;color:var(--ink);text-decoration:none;border-left:2px solid var(--petrol);transition:border-color .15s}
.youtube-card:hover{border-color:var(--petrol-light);text-decoration:none}
.video-frame{aspect-ratio:16/9;background:#0a1a20;display:flex;align-items:center;justify-content:center;position:relative}
.play-badge{width:56px;height:40px;background:var(--petrol);position:relative;border-radius:3px}
.play-badge::after{content:'';position:absolute;left:22px;top:12px;border-left:16px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.youtube-link{display:block;padding:14px 16px;font-weight:600;font-size:14px;color:var(--ink);border-top:1px solid var(--line)}
.youtube-card:hover .youtube-link{color:var(--petrol)}

/* ── FORM ── */
.form{max-width:720px;margin:0 clamp(20px,6vw,80px) 36px;background:var(--tile);border:1px solid var(--line);padding:24px;display:grid;gap:16px;border-radius:3px}
.form label{display:grid;gap:6px;font-weight:600;font-size:14px}
.form .check{display:block;font-weight:400}
.form-note{margin:0;color:var(--muted);font-size:13px}

/* ── FOOTER ── */
footer{border-top:1px solid var(--line);padding:28px clamp(20px,6vw,80px);display:flex;gap:20px;justify-content:space-between;color:var(--muted);font-size:13px}
.footer-links{display:flex;gap:14px;flex-wrap:wrap}
.footer-links a{color:var(--muted);font-size:13px}
.footer-links a:hover{color:var(--petrol)}

/* ── MISC ── */
.note{padding:0 clamp(20px,6vw,80px) 28px;color:var(--muted);font-size:13px}
.skip-link{position:absolute;left:16px;top:-80px;z-index:999;background:var(--ink);color:var(--paper);padding:10px 14px;font-weight:700;border-radius:3px}
.skip-link:focus{top:12px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--petrol);outline-offset:3px}
main:focus{outline:0}
.hidden{position:absolute;left:-9999px}
.brand-instruction{flex-basis:100%;margin:0;color:var(--muted);font-size:13px}
.search-label{flex:2;min-width:220px}
.search-label span{position:absolute;left:-9999px}
.brand-tools #brandFilter{position:absolute;left:-9999px}
.product-grid[aria-live]{scroll-margin-top:110px}
.legal p,.legal li{max-width:860px;color:var(--muted);font-size:15px}
.legal h2{margin-top:28px;font-size:18px;font-weight:700}
.legal h3{margin-top:18px;font-size:15px;font-weight:700}

@media(max-width:820px){
  .site-header{grid-template-columns:1fr auto}
  .menu-toggle{display:block}
  nav{display:none;grid-column:1/-1;flex-direction:column;padding:8px 0}
  nav a{padding:11px 14px}
  .site-header.open nav{display:flex}
  .header-tools{grid-column:1/-1;justify-content:flex-start}
  .about-panel{grid-template-columns:1fr}
  .hero,.page-head{padding-top:40px}
  .metro-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  footer{flex-direction:column;gap:14px}
  .stats{margin-left:clamp(20px,6vw,80px);margin-right:clamp(20px,6vw,80px)}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}

/* PNG logo dark mode: invert lightness, keep hue */


/* ── CSS logo (no PNG/SVG font issues) ── */
.db-logo-wrap{display:inline-flex;flex-direction:column;align-items:stretch;line-height:1;text-decoration:none}
.db-logo-top{font-family:'Inter',system-ui,sans-serif;font-weight:800;font-size:32px;color:var(--logo-top);display:block;letter-spacing:-0.5px;white-space:nowrap}
.db-logo-sub{font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:10.5px;color:var(--logo-sub);display:block;letter-spacing:0.25em;text-transform:uppercase;white-space:nowrap;width:100%}
:root{--logo-top:#2e96a8;--logo-sub:#9cb0b8}
html[data-theme="dark"]{--logo-top:#4bbdd0;--logo-sub:#7aaab5}
/* make sub same visual width as top via inline-block stretch */
.db-logo-sub{display:block;text-align:justify;text-align-last:justify}

/* ── Media page ── */
.media-section{padding:0 clamp(20px,6vw,80px) 40px}
.media-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2px;background:var(--line)}
.media-card{background:var(--tile);display:flex;flex-direction:column}
.media-thumb-wrap{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0a1a20}
.media-thumb{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.media-card:hover .media-thumb{transform:scale(1.03)}
.media-thumb-link{display:block;width:100%;height:100%;position:relative}
.media-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;transition:transform .2s}
.media-card:hover .media-play-btn{transform:translate(-50%,-50%) scale(1.1)}
.media-thumb-ext{background:#0f1a20}
.media-ext-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:160px}
.media-ext-icon{font-size:40px}
.media-ext-source{font-size:13px;font-weight:700;color:var(--petrol);text-transform:uppercase;letter-spacing:.1em}
.media-info{padding:16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.media-title{font-size:15px;font-weight:700;margin:0;color:var(--ink);line-height:1.3}
.media-desc{font-size:13px;color:var(--muted);margin:0;line-height:1.5;flex:1}
.media-link{font-size:13px;font-weight:600;color:var(--petrol);text-decoration:none;margin-top:4px;display:inline-block}
.media-link:hover{text-decoration:underline}
@media(max-width:600px){.media-grid{grid-template-columns:1fr}}

/* ── Press articles section ── */
.press-section{padding:0 clamp(20px,6vw,80px) 40px}
.press-section-h{font-size:clamp(20px,2.5vw,28px);font-weight:700;margin:0 0 16px;padding-top:20px;border-top:1px solid var(--line)}
.press-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2px;background:var(--line)}
.press-card{background:var(--tile);padding:20px;display:flex;flex-direction:column;gap:8px;border-left:2px solid var(--petrol)}
.press-outlet{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--petrol)}
.press-title{font-size:15px;font-weight:700;margin:0;line-height:1.3}
.press-title a{color:var(--ink);text-decoration:none}
.press-title a:hover{color:var(--petrol);text-decoration:underline}
.press-desc{font-size:13px;color:var(--muted);margin:0;line-height:1.5}