/* 2.2 / 2.1 / 2.4 / 3 / 4 hero-scrim rev swap — CSS layer for round 15 */
.hero-card{height:clamp(520px,38vw,660px);margin-top:34px}
.hero-card > .hd-head{padding:56px 0 56px 52px;justify-content:center}
.hero-card .hd-sub{margin-top:20px}
.hero-card .hero-cta{margin-top:20px}

/* --- header: one strong element only --- */
.header-actions{display:flex;align-items:center;gap:22px}
.tel-link{display:inline-flex;align-items:center;gap:7px;background:none;border:0;border-radius:0;
  padding:0;font:500 14px/1 var(--font);color:#16235C;transition:color .16s}
.tel-link:hover,.tel-link:focus-visible{color:#0f6b5c;background:none;border:0}
.tel-link .wa-ico{width:16px;height:16px;flex:0 0 16px;transition:color .16s}
.lang.lang-wrap{position:relative;display:inline-flex}
.lang-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;background:none;border:0;
  border-radius:8px;color:#16235C;font:600 13px/1 var(--font);min-height:0;transition:background .16s}
.lang-btn:hover{background:rgba(22,35,92,.06)}
.lang-btn .globe{width:16px;height:16px;flex:0 0 16px;color:#16235C;pointer-events:none}
.lang-btn > svg,.lang-btn > span{pointer-events:none}
.lang-btn svg.flag,.lang-btn .flag{width:18px;height:12px;flex:0 0 18px;border-radius:2px}
.lang-btn .caret{font-size:9px;opacity:.5}

/* --- panel anchored to the button: no margin, no transform, same relative parent --- */
.lang-panel{position:absolute;top:calc(100% + 8px);right:0;left:auto;margin:0;transform:none;
  width:238px;max-height:min(60vh,364px);overflow-y:auto;z-index:80;background:#fff;
  border:1px solid #e3e8ef;border-radius:12px;box-shadow:0 12px 32px rgba(14,17,22,.12);
  padding:6px;list-style:none}
.lang-panel[hidden]{display:none}
/* beat the generic [hidden]{display:none!important} utility so the anchored panel can open */
.lang-panel[hidden]{display:none!important}
.lang-panel:not([hidden]){display:block!important}
.lang-panel ul{margin:0;padding:0;list-style:none}
.lang-panel a{display:grid;grid-template-columns:20px 1fr auto 14px;align-items:center;gap:10px;
  padding:9px 10px;border-radius:8px;font:500 13.5px/1.2 var(--font);color:#1d2534;text-decoration:none}
.lang-panel a:hover{background:#f4f6f9}

/* --- mobile language sheet --- */

/* --- brand mark: the SVG file itself, no extra frame --- */
.brand-mark{width:40px;height:40px;display:block;border-radius:0;background:none;box-shadow:none;
  border:0;object-fit:none;flex:0 0 40px}
.brand:hover .brand-mark{filter:none}

/* --- sections: one rhythm --- */
:root{--space-section:88px}
.section{padding-block:var(--space-section)}
.hero-card + .desk-stand{margin-top:18px}

/* --- bento card density --- */
.bcard{min-height:232px;padding:18px}

/* --- no empty section before the footer --- */
main > .section:last-child{margin-bottom:0}
main > section:last-child{padding-bottom:var(--space-section)}

@media(max-width:979.98px){
  :root{--space-section:52px}
  .hero-card{height:auto;margin-top:16px}
  .hero-card > .hd-head{padding:32px 22px}
  .hero-card + .desk-stand{margin-top:26px}
}
@media(max-width:767.98px){
  .header-actions{gap:10px}
  .header-actions .tel-link{display:none}
  .header-actions .lang.lang-wrap{display:none}
  .header-actions > .header-apply{display:inline-flex!important;width:72px;height:36px;min-height:36px;
    padding:0;font-size:13px;line-height:1;align-items:center;justify-content:center;flex:0 0 72px}
  .brand-mark{width:32px;height:32px;flex:0 0 32px}
  .brand-name{font-size:15px}
  .bcard{min-height:auto;padding:16px}
}

/* --- trust bar (no card network logos, text only) --- */
.trust-bar{background:#fff;border-bottom:1px solid #e3e8ef}
.trust-bar .container{padding-block:24px}
.trust-items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.trust-items li{display:flex;align-items:center;gap:10px;font:500 14px/1.35 var(--font);color:#2B3551}
.trust-items li::before{content:"";width:16px;height:16px;flex:0 0 16px;border-radius:50%;
  background:#0f6b5c;box-shadow:inset 0 0 0 4px #fff;border:2px solid #0f6b5c}
@media(max-width:767.98px){
  .trust-items{grid-template-columns:1fr;gap:12px}
  .trust-bar .container{padding-block:20px}
}

/* --- manifesto sits right under the hero card: tight top rhythm --- */
.manifesto{padding-block:var(--space-section) 0}
.hero-card + .desk-stand + .trust-bar{margin-top:0}
/* --- hero band rhythm: card bottom -> next block <= 96px desktop / 56px mobile --- */
.hero-desk{padding-block:72px 56px}
.hero-desk + .trust-bar{margin-top:0}
@media(max-width:979.98px){ .hero-desk{padding-block:44px 56px} }
/* --- the live sample desk is auxiliary: compact on wide screens, its own small block --- */
.desk-stand{border-radius:18px;overflow:hidden;margin-top:14px}
.desk-stand .desk{padding:20px 22px 22px;border-radius:0;
  box-shadow:none;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14)}
.desk-stand .desk-log{margin-top:10px}
.desk-stand .bubble{padding:8px 12px;font-size:13px;line-height:1.45}
.desk-stand .bubble--us{display:block}
.desk-stand .bubble--us .mini,.desk-stand .bubble--us .avatar{display:none}
.desk-stand .bubble--us p{margin:0}
.desk-stand .dcard dl{gap:4px}
.desk-stand .chat{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start}
.desk-stand .chat .desk-label{grid-column:1 / -1;margin:0}
.desk-stand .bubble{border-radius:12px}

.desk-stand .out-foot{font-size:11.5px}
@media(min-width:980px){
  .desk-stand .desk{grid-template-columns:minmax(0,1fr) 268px;gap:18px;align-items:start}
  .desk-stand .desk-label{font-size:10px;letter-spacing:.14em;margin:0 0 2px}
  .desk-stand .dcard dl>div{padding:3px 0}
  .desk-stand .dcard dt,.desk-stand .dcard dd{font-size:12.5px}
  .desk-stand .out-foot{font-size:11px;line-height:1.35;margin-top:6px}
}
/* the desk wrapper keeps its own trimmed rhythm (beats earlier .desk-stand margin) */
.hero-desk .desk-stand{margin-top:12px !important}
/* mobile header: exactly logo + Apply + burger */
@media(max-width:767.98px){
  .header-actions{gap:8px}
  .header-actions > .btn-primary{display:inline-flex!important}
  .header-actions > .lang.lang-wrap{display:none!important}
  .header-actions > .tel-link{display:none!important}
  .drawer[data-open="true"] .container{display:grid}
  .drawer .drawer-lang{margin-top:10px;border-top:1px solid #e3e8ef;padding-top:10px}
  .drawer .drawer-lang .drawer-lang-title{margin:0 0 6px;font:600 11px/1 var(--font);
    letter-spacing:.14em;text-transform:uppercase;color:#6b7488}
  .drawer .lang-list a{display:grid;min-height:44px;padding:0 6px;border-radius:8px;border-bottom:0}
}
.drawer .drawer-lang{margin-top:10px;border-top:1px solid #e3e8ef;padding-top:10px}
.drawer .drawer-lang-title{margin:0 0 6px;font:600 11px/1 var(--font);letter-spacing:.14em;
  text-transform:uppercase;color:#6b7488}
.drawer .lang-list{list-style:none;margin:0;padding:0}
.drawer .lang-list a{display:grid;grid-template-columns:20px 1fr auto 16px;align-items:center;
  gap:10px;min-height:44px;padding:0 6px;border-radius:8px;text-decoration:none;color:#1d2534;
  border-bottom:0!important}
/* drawer language entry (button that opens the sheet) */
/* focus ring only for keyboard users; the captured green box was the pointer-focus ring */
.lang-btn:focus{outline:none}
.lang-btn:focus-visible{outline:2px solid #0f6b5c;outline-offset:2px}
.lang-btn:hover{background:rgba(22,35,92,.06)}
/* diagrams on the ink band: original colour art, faint plate only */
.section--ink .rail-art{background:rgba(255,255,255,.04);border-radius:10px;padding:8px;
  box-sizing:content-box}
/* hero card -> next band: tight, no dead air (<=96px desktop, <=56px mobile) */
.hero-desk{padding-block:72px 56px}
.desk-band{background:#070b18;padding-block:0 var(--space-section)}
.desk-band .container{padding-top:0}
.hero-desk + .desk-band{margin-top:0}
@media(max-width:767.98px){
  .hero-desk{padding-block:40px 36px}
  .desk-band{padding-block:0 40px}
}
/* desk band contrast floor: alpha text was measured below 4.5:1 on #0b1224 */
.desk-band{background:#0a1020}
.desk-band .desk-label{color:rgba(255,255,255,.92);font-size:10.5px;letter-spacing:.16em}
.desk-band .bubble--us{color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18)}
.desk-band .bubble--us p{color:#fff}
.desk-band .dcard dt{color:rgba(255,255,255,.82)}
.desk-band .out-foot{color:rgba(255,255,255,.8);font-size:11.5px}
.desk-band .desk{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.055)}