/* DBENA public website — ported 1:1 from "DBENA Website.dc.html" (inline styles → classes) */
:root{--navy:#0A376A;--blue:#135AA8;--yl:#F7D710;--yld:#E5C500;--ink:#18212B;--mu:#4A5663;--bg2:#F6F8FA;--ln:#E1E7EF;--fd:#C9D3DF;--sky:#9DB8D9;--pale:#DCE6F2;--prs:#E8F0FA;--rd:#B42318;--gutter:clamp(20px,4vw,40px)}
html,body{margin:0;background:#fff;color:var(--ink);font-family:'DM Sans',system-ui,sans-serif;font-optical-sizing:auto;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:hidden}
*{box-sizing:border-box}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--navy);text-decoration:underline}
button,input,select,textarea{font-family:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
::selection{background:var(--yl);color:var(--ink)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
[x-cloak]{display:none!important}
svg{flex:none}
.wrap{max-width:1320px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.site{min-height:100vh;display:flex;flex-direction:column}
main{flex:1}

/* top bar */
.topbar{background:var(--navy);color:var(--pale);font-size:13px}
.topbar .wrap{padding-top:8px;padding-bottom:8px;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.topbar a,.topbar span{color:var(--pale);display:flex;gap:8px;align-items:center}
.topbar .l{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.topbar .r{display:flex;gap:16px;align-items:center}
.topbar .staff{color:var(--yl);font-weight:600;gap:6px}
.langsw{display:flex;border:1px solid #3B6597}
.langsw a{border:0;padding:4px 10px;font-size:12px;font-weight:600;color:var(--pale);text-decoration:none}
.langsw a.on{background:var(--yl);color:var(--ink)}

/* header */
.hdr{position:sticky;top:0;z-index:40;background:#fff;border-bottom:2px solid var(--navy)}
.hdr .wrap{height:80px;display:flex;align-items:center;gap:28px}
.logo{display:block;height:58px;aspect-ratio:1438/876;background-size:contain;background-repeat:no-repeat;background-position:left center}
.nav{display:flex;gap:4px;flex:1;height:80px;align-items:stretch}
.nav a{display:flex;align-items:center;padding:0 10px;white-space:nowrap;font-size:15px;font-weight:600;color:var(--ink);border-bottom:3px solid transparent;margin-bottom:-2px;text-decoration:none}
.nav a:hover{color:var(--blue)}
.nav a.on{color:var(--blue);border-bottom-color:var(--yl)}
.hdr-cta{display:flex;gap:10px}
.btn{display:inline-flex;gap:10px;align-items:center;font-weight:600;font-size:15px;cursor:pointer;border:0;text-decoration:none;line-height:1}
.btn:hover{text-decoration:none}
.btn-yl{background:var(--yl);color:var(--ink)}
.btn-yl:hover{background:var(--yld);color:var(--ink)}
.btn-ol{background:#fff;color:var(--blue);border:2px solid var(--blue)}
.btn-ol:hover{background:var(--prs);color:var(--blue)}
.btn-wh{background:transparent;color:#fff;border:2px solid #fff}
.btn-wh:hover{background:var(--blue);color:#fff}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--navy);color:#fff}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--blue);color:#fff}
.h46{height:46px;padding:0 18px}.h48{height:48px;padding:0 16px}.h50{height:50px;padding:0 20px}.h52{height:52px;padding:0 20px}.h54{height:54px;padding:0 20px;font-size:16px}.h56{height:56px;padding:0 22px;font-size:16px}
.burger{display:none;margin-left:auto;width:48px;height:48px;border:2px solid var(--navy);background:#fff;color:var(--navy);cursor:pointer;align-items:center;justify-content:center}
.mmenu{border-top:2px solid var(--navy);background:#fff;display:flex;flex-direction:column}
.mmenu a.item{border-bottom:1px solid var(--ln);padding:14px 20px;font-size:16px;font-weight:600;color:var(--ink);text-decoration:none}
.mmenu a.item.on{color:var(--blue)}
.mmenu .ctas{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px 20px}
.mmenu .ctas a{height:48px;padding:0 14px;display:flex;align-items:center;font-weight:600;text-decoration:none}

/* generic section heads */
.kick{font-size:12px;letter-spacing:.2em;font-weight:500;color:var(--blue);text-transform:uppercase}
.h2{margin:10px 0 0;font-size:clamp(28px,3vw,40px);line-height:1.1;color:var(--navy);font-weight:700}
.sechead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;border-bottom:2px solid var(--navy);padding-bottom:20px;margin-bottom:32px}
.more{border:0;background:none;color:var(--blue);font-weight:600;font-size:15px;cursor:pointer;display:flex;gap:8px;align-items:center;padding:8px 0;text-decoration:none}
.bgimg{background-size:cover;background-position:center;display:block;width:100%;height:100%}

/* hero */
.hero{background:var(--navy);color:#fff;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));border-bottom:2px solid var(--navy)}
.hero .txt{padding:clamp(40px,6vw,88px) var(--gutter) clamp(40px,5vw,72px) max(var(--gutter),calc((100vw - 1320px)/2 + 40px));display:flex;flex-direction:column;gap:28px;justify-content:center}
.hero .k{font-size:12px;letter-spacing:.24em;font-weight:500;color:var(--sky);text-transform:uppercase}
.hero h1{margin:0;font-size:clamp(36px,4.4vw,60px);line-height:1.04;text-wrap:balance;font-weight:800;letter-spacing:-.015em}
.bar72{width:72px;height:6px;background:var(--yl)}
.hero p{margin:0;font-size:18px;line-height:1.6;color:var(--pale);max-width:560px;text-wrap:pretty}
.hero .acts{display:flex;gap:12px;flex-wrap:wrap}
.hero .acts .q{min-width:220px;justify-content:space-between}
.hero .pic{position:relative;min-height:420px;background:var(--navy)}
.hero .pic .bgimg{position:absolute;inset:0}
.hero .badge{position:absolute;right:0;bottom:0;background:var(--navy);padding:20px 24px;border-top:6px solid var(--yl);max-width:300px}
.hero .badge div:first-child{font-size:12px;letter-spacing:.24em;color:var(--sky);font-weight:500}
.hero .badge div:last-child{font-size:18px;font-weight:600;margin-top:8px;line-height:1.35}

.caps{border-bottom:2px solid var(--navy);background:var(--navy)}
.caps .g{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px}
.cap{background:#fff;padding:28px clamp(20px,2vw,32px);display:flex;gap:16px;align-items:flex-start}
.cap .ic{width:44px;height:44px;flex:none;background:var(--yl);color:var(--navy);display:flex;align-items:center;justify-content:center}
.cap .t{font-weight:700;font-size:16px;color:var(--navy)}
.cap .s{font-size:14px;color:var(--mu);margin-top:4px;line-height:1.45}

.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:24px}
.pcard{border:0;background:#fff;padding:0;text-align:left;cursor:pointer;display:flex;flex-direction:column;border-bottom:2px solid var(--navy);color:inherit;text-decoration:none;width:100%}
.pcard:hover{background:var(--bg2);text-decoration:none}
.pcard .im{aspect-ratio:4/3;overflow:hidden;background:var(--ln);width:100%}
.pcard .row{padding:16px 0;display:flex;justify-content:space-between;gap:12px;align-items:center;width:100%}
.pcard .cat{font-size:12px;letter-spacing:.12em;color:var(--blue);font-weight:500;text-transform:uppercase}
.pcard .nm{font-weight:700;font-size:18px;color:var(--ink);margin-top:4px}
.pcard .arr{width:36px;height:36px;flex:none;border:2px solid var(--blue);color:var(--blue);display:flex;align-items:center;justify-content:center}

.about{background:var(--navy);color:#fff;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr))}
.about .txt{padding:clamp(40px,6vw,80px) var(--gutter) clamp(40px,6vw,80px) max(var(--gutter),calc((100vw - 1320px)/2 + 40px));display:flex;flex-direction:column;gap:22px}
.about .kick{color:var(--yl)}
.about h2{margin:0;font-size:clamp(28px,3vw,40px);line-height:1.1;font-weight:700}
.about p{margin:0;font-size:17px;line-height:1.65;color:var(--pale);max-width:560px;text-wrap:pretty}
.about .pic{min-height:360px;position:relative;background:#E9E6E1}
.about .pic .bgimg{position:absolute;inset:0}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.step{padding:28px 24px 32px 0;border-bottom:1px solid var(--fd);display:flex;flex-direction:column;gap:10px}
.step .n{font-variant-numeric:tabular-nums;font-size:40px;color:var(--blue);line-height:1}
.step .t{font-weight:700;font-size:19px}
.step .d{font-size:15px;color:var(--mu);line-height:1.55;text-wrap:pretty}

.segs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:24px}
.seg{position:relative;aspect-ratio:3/4;overflow:hidden;display:block;text-decoration:none}
.seg .bgimg{position:absolute;inset:0;transition:transform .4s}
.seg:hover .bgimg{transform:scale(1.03)}
.seg .cap2{position:absolute;left:0;right:0;bottom:0;background:var(--navy);color:#fff;padding:18px 20px;border-top:4px solid var(--yl)}
.seg .cap2 b{display:block;font-size:19px}
.seg .cap2 span{font-size:14px;color:var(--pale);display:block;margin-top:4px}

.bgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px}
.bcard{background:#fff;display:flex;flex-direction:column;border-top:4px solid var(--blue);color:inherit;text-decoration:none}
.bcard:hover{background:var(--prs);text-decoration:none}
.bcard.flat{border-top:0;border-bottom:2px solid var(--navy)}
.bcard.flat:hover{background:var(--bg2)}
.bcard .im{aspect-ratio:16/9;overflow:hidden}
.bcard .b{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px}
.bcard.flat .b{padding:20px 0 24px}
.bcard .m{font-size:12px;letter-spacing:.12em;color:var(--blue);font-weight:500;text-transform:uppercase}
.bcard .t{font-weight:700;font-size:19px;line-height:1.3;color:var(--ink)}
.bcard.flat .t{font-size:21px}
.bcard .e{font-size:15px;color:var(--mu);line-height:1.55}

/* page head */
.phead{background:var(--navy);color:#fff;border-bottom:6px solid var(--yl)}
.phead .wrap{padding-top:56px;padding-bottom:52px;display:flex;flex-direction:column;gap:14px}
.crumb{font-size:13px;color:var(--sky);display:flex;gap:8px;align-items:center}
.crumb a{color:var(--sky)}
.crumb span:last-child{color:#fff}
.phead h1{margin:0;font-size:clamp(32px,4vw,52px);line-height:1.08;max-width:900px;text-wrap:balance;font-weight:800;letter-spacing:-.015em}
.phead p{margin:0;font-size:18px;line-height:1.6;color:var(--pale);max-width:720px;text-wrap:pretty}

.cols2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:56px}
.vals{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.val{padding:28px 24px 28px 0;border-bottom:1px solid var(--fd)}
.val i{display:block;width:32px;height:4px;background:var(--yl);margin-bottom:16px}
.ci{background:#fff;border-top:2px solid var(--navy)}
.ci div.r{display:grid;grid-template-columns:minmax(120px,240px) 1fr;gap:16px;padding:16px 20px;border-bottom:1px solid var(--ln)}
.ci .k{font-weight:600;color:var(--mu);font-size:15px}
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:32px;padding:36px 0;border-bottom:2px solid var(--navy)}
.svc h3{margin:0;font-size:26px;line-height:1.2;color:var(--navy);font-weight:700}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:2px;background:var(--navy);border:2px solid var(--navy)}
.tiles>*{background:#fff;padding:22px 24px}
.filt{display:flex;border:2px solid var(--navy);width:fit-content;max-width:100%;overflow-x:auto;margin-bottom:32px}
.filt a,.filt button{border:0;padding:0 20px;height:44px;display:flex;align-items:center;font-weight:600;font-size:15px;cursor:pointer;white-space:nowrap;background:#fff;color:var(--navy);text-decoration:none}
.filt .on{background:var(--navy);color:#fff}
.pfgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));gap:32px}
.pf{display:flex;flex-direction:column;border-bottom:2px solid var(--navy)}
.pf .im{aspect-ratio:16/10;overflow:hidden;position:relative}
.pf .lbl{position:absolute;top:0;left:0;background:var(--yl);color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.1em;padding:6px 12px;text-transform:uppercase}
.contact-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:2px;background:var(--navy);border:2px solid var(--navy)}
.contact-g a{background:#fff;padding:28px 24px;display:flex;flex-direction:column;gap:10px;color:var(--ink);text-decoration:none}
.contact-g a:hover{background:var(--prs);text-decoration:none}
.contact-g .go{color:var(--blue);font-weight:600;font-size:14px}
.article p{margin:0;font-size:18px;line-height:1.75;text-wrap:pretty}
.check{width:64px;height:64px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center}

/* lead forms */
.leadsec{background:var(--bg2);border-top:2px solid var(--navy);scroll-margin-top:90px}
.leadsec .wrap{padding-top:72px;padding-bottom:72px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:32px;align-items:start}
.lform{background:#fff;border-top:6px solid var(--blue);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:20px;scroll-margin-top:96px}
.lform.cat{background:#FFFBE0;border-top-color:var(--yl);gap:18px}
.lform h2{margin:8px 0 6px;font-size:30px;line-height:1.15;color:var(--navy);font-weight:700}
.lform .sub{margin:0;font-size:15px;color:var(--mu);line-height:1.55}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px 18px}
.fld{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.fld input,.fld select,.fld textarea{height:48px;border:2px solid var(--fd);padding:0 14px;font-size:16px;background:#fff;border-radius:0;color:var(--ink);width:100%}
.fld select{padding:0 12px}
.fld textarea{height:auto;padding:12px 14px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--blue);outline:none}
.fld.bad input,.fld.bad select,.fld.bad textarea{border-color:var(--rd)}
.err{color:var(--rd);font-size:13px;font-weight:500}
.hint{font-size:13px;font-weight:400;color:var(--mu)}
.seg3{display:flex;border:2px solid var(--navy);width:fit-content;max-width:100%}
.seg3 button{border:0;height:42px;padding:0 18px;font-weight:600;font-size:14px;cursor:pointer;background:#fff;color:var(--navy)}
.seg3 button.on{background:var(--navy);color:#fff}
.drop{border:2px dashed var(--sky);padding:16px;display:flex;gap:12px;align-items:center;cursor:pointer;font-size:14px;color:var(--mu);font-weight:400}
.drop:hover{background:var(--prs)}
.chip{background:var(--prs);color:var(--navy);font-size:13px;padding:6px 10px;display:inline-flex;gap:8px;align-items:center}
.chip button{border:0;background:none;cursor:pointer;color:var(--navy);padding:0;font-size:15px;line-height:1}
.cb{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;cursor:pointer;font-weight:400}
.cb input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--blue);flex:none}
.perks{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--mu)}
.perks div{display:flex;gap:8px;align-items:center}
.submit{justify-content:space-between}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* footer */
.ftr{background:var(--navy);color:var(--pale);border-top:6px solid var(--yl)}
.ftr .top{background:#fff;border-bottom:1px solid var(--fd)}
.ftr .top .wrap{padding-top:22px;padding-bottom:22px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ftr .top .tag{font-size:12px;letter-spacing:.2em;font-weight:600;color:var(--navy)}
.ftr .mid{padding-top:56px;padding-bottom:32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:40px}
.ftr .col{display:flex;flex-direction:column;gap:12px;font-size:15px;line-height:1.55}
.ftr .col b{color:#fff;margin-bottom:4px}
.ftr .col a{color:var(--pale)}
.ftr .col a:hover{color:var(--yl)}
.ftr .bot{border-top:1px solid #2D5A8E}
.ftr .bot .wrap{padding-top:18px;padding-bottom:18px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--sky)}
.ftr .bot a{color:var(--sky)}
.wa-float{position:fixed;right:24px;bottom:24px;z-index:30;width:60px;height:60px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(10,55,106,.35)}
.wa-float:hover{background:#1EBE5A;color:#fff}
.tabs{display:none;position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:2px solid var(--navy);grid-template-columns:repeat(5,1fr);height:64px;padding-bottom:env(safe-area-inset-bottom)}
.tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:600;color:var(--mu);text-decoration:none}
.tabs a.on{color:var(--blue)}
.tabspace{display:none;height:68px}

/* modal + toast */
.modal{position:fixed;inset:0;z-index:60;background:rgba(10,24,43,.7);display:flex;align-items:center;justify-content:center;padding:20px}
.modal .dlg{background:#fff;max-width:980px;width:100%;max-height:calc(100vh - 40px);overflow:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));border-top:6px solid var(--yl)}
.modal .pic{min-height:300px;position:relative}
.modal .pic .bgimg{position:absolute;inset:0}
.modal .body{padding:32px;display:flex;flex-direction:column;gap:16px;position:relative}
.xbtn{position:absolute;top:12px;right:12px;width:44px;height:44px;border:2px solid var(--navy);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--navy)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:96px;z-index:70;background:var(--ink);color:#fff;padding:14px 20px;font-size:15px;border-top:4px solid var(--yl);max-width:90vw}

/* preview pick outline (website editor) */
.preview [data-edit]{cursor:pointer}
.preview [data-edit]:hover{outline:3px dashed var(--yl);outline-offset:-3px}

@media (max-width:1240px){.nav a{padding:0 7px;font-size:14px}.hdr .wrap{gap:18px}}
@media (max-width:1079px){
  .nav,.hdr-cta,.wa-float,.topbar .addr{display:none!important}
  .burger{display:flex}
  .tabs{display:grid}
  .tabspace{display:block}
  .toast{bottom:84px}
}
@media (max-width:560px){
  .hdr .wrap{height:68px}
  .logo{height:48px}
  .hero .pic{min-height:280px}
  .hero .acts .btn{width:100%}
  .hero .acts .q{justify-content:space-between}
  .hero .acts .q{min-width:0}
  .ci div.r{grid-template-columns:1fr;gap:4px}
  .modal{padding:0;align-items:flex-end}
  .modal .dlg{max-height:92vh}
  .modal .body{padding:24px 20px}
  .modal .pic{min-height:220px}
}