:root {
  color-scheme: light dark;
  --brand-blue: #24648E;
  --brand-orange: #FF5A00;
  --bridge: #177BA6;
  --node: #949EAB;
  --ink: #10202D;
  --field: #F4F4F5;
  --bg: #F6F8FA;
  --surface: #FFFFFF;
  --surface-soft: #F7F9FB;
  --surface-2: #EFF4F8;
  --line: #DCE4EB;
  --line-soft: #E9EEF3;
  --text: #10202D;
  --text-2: #33485C;
  --muted: #5A6B7A;
  --heading: #24648E;
  --accent: #F75200;
  --link: #177BA6;
  --ok: #1E7A5A;
  --warn: #B45309;
  --danger: #B42318;
  --radius: 14px;
  --shadow: 0 8px 26px rgba(16,32,45,.045);
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B151E;
    --surface: #111E2A;
    --surface-soft: #111E2A;
    --surface-2: #16242F;
    --line: #25394B;
    --line-soft: #1C2E3D;
    --text: #E7EDF3;
    --text-2: #C2D0DC;
    --muted: #93A5B5;
    --heading: #7CBBDC;
    --accent: #FF7233;
    --link: #5FB3D9;
    --ok: #4FBF95;
    --warn: #E0A54A;
    --danger: #FF8B83;
    --shadow: 0 8px 26px rgba(0,0,0,.13);
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; color:var(--text); background:var(--bg); font: 14px/1.6 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:var(--link); text-decoration:none; }
a:hover { text-decoration:underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline:3px solid color-mix(in srgb, var(--accent) 52%, transparent); outline-offset:2px; }
button, input, select, textarea { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:252px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:27px 16px 16px; border-right:1px solid var(--line); background:var(--surface); }
.brand { display:flex; flex-direction:column; padding:3px 12px 31px; text-decoration:none!important; }
.wordmark { display:inline-flex; gap:0; align-items:baseline; font-weight:800; font-size:26px; letter-spacing:-1.2px; line-height:1.1; }
.wordmark span:first-child { color:var(--brand-blue); }
.wordmark span:last-child { color:var(--brand-orange); }
.brand-sub { margin-top:8px; font-size:9px; letter-spacing:1.55px; color:var(--muted); font-weight:800; }
.nav-label, .eyebrow { color:var(--muted); font-size:10px; font-weight:800; letter-spacing:1.1px; text-transform:uppercase; }
.nav-label { padding:0 12px 11px; }
.primary-nav { display:grid; gap:4px; }
.nav-link { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:9px; color:var(--text-2); font-weight:600; transition:background .12s ease,color .12s ease; }
.nav-link:hover { background:var(--surface-2); color:var(--heading); text-decoration:none; }
.nav-link.active { color:var(--brand-blue); background:color-mix(in srgb, var(--brand-blue) 10%, var(--surface)); box-shadow:inset 3px 0 var(--brand-orange); }
@media (prefers-color-scheme:dark) { .nav-link.active { color:#A7D9F2; background:#162D3D; } }
.nav-icon { display:grid; place-items:center; width:21px; height:21px; flex:none; }
.sidebar-bottom { margin-top:auto; border-top:1px solid var(--line-soft); padding:17px 8px 3px; }
.user-box { display:flex; align-items:center; gap:10px; padding:3px 2px 12px; min-width:0; }
.avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:#fff; background:var(--brand-blue); font-weight:800; flex:none; }
.user-meta { min-width:0; display:flex; flex-direction:column; }
.user-meta strong { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-meta span { font-size:11px; color:var(--muted); overflow-wrap:anywhere; }
.account-link, .logout-link { display:flex; width:100%; align-items:center; justify-content:space-between; padding:8px 7px; font-size:12px; color:var(--muted); border-radius:7px; }
.account-link:hover, .logout-link:hover { background:var(--surface-2); color:var(--heading); text-decoration:none; }
.sidebar-bottom form { margin:0; }
.logout-link { border:0; background:transparent; text-align:left; }
.main-area { min-width:0; display:flex; flex-direction:column; }
.topbar { height:62px; padding:0 clamp(20px,3vw,42px); display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--surface); border-bottom:1px solid var(--line); }
.crumb { display:flex; gap:11px; align-items:center; color:var(--muted); font-size:12px; }
.crumb strong { color:var(--text); font-weight:700; }
.crumb-sep { color:var(--node); }
.role-pill { border:1px solid var(--line); padding:5px 10px; border-radius:30px; font-weight:700; font-size:10px; letter-spacing:.2px; }
.role-admin { color:var(--brand-blue); background:color-mix(in srgb, var(--brand-blue) 7%, var(--surface)); }
.role-partner { color:var(--text-2); background:var(--surface-soft); }
.page-content { width:100%; max-width:1420px; padding:30px clamp(20px,3vw,42px) 50px; flex:1; margin:0 auto; }
.footer { display:flex; justify-content:space-between; gap:14px; padding:19px clamp(20px,3vw,42px); border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
.page-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin:4px 0 24px; }
.page-heading .eyebrow { color:var(--accent); margin-bottom:7px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(28px,3.1vw,38px); line-height:1.13; letter-spacing:-1.2px; color:var(--heading); margin-bottom:7px; font-weight:800; }
h2 { color:var(--heading); font-size:18px; line-height:1.3; letter-spacing:-.35px; margin-bottom:0; font-weight:750; }
h3 { font-size:15px; line-height:1.35; letter-spacing:-.15px; margin:0 0 8px; }
.page-lede { color:var(--muted); margin:0; max-width:690px; font-size:13px; }
.heading-actions { flex:none; }
.welcome-line { display:flex; align-items:center; gap:9px; color:var(--text-2); font-size:12px; margin:-7px 0 20px; }
.welcome-dot { width:7px; height:7px; background:var(--ok); border-radius:50%; box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 13%, transparent); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:39px; padding:9px 14px; border-radius:8px; border:1px solid transparent; text-decoration:none!important; font-weight:750; font-size:12px; line-height:1.25; transition:transform .1s ease, background .1s ease; }
.button:hover { transform:translateY(-1px); }
.button-primary { background:var(--brand-orange); color:#fff; border-color:var(--brand-orange); }
.button-primary:hover { background:#DC4900; color:#fff; }
.button-secondary { color:var(--heading); background:var(--surface); border-color:var(--line); }
.button-secondary:hover { background:var(--surface-2); }
.button-small { min-height:32px; padding:7px 10px; font-size:11px; }
.button-full { width:100%; margin-top:8px; min-height:45px; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(265px,.8fr); gap:20px; align-items:start; }
.dashboard-main, .dashboard-aside { min-width:0; display:grid; gap:19px; align-content:start; }
.metrics-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:1px; }
.metrics-three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.metric-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:17px 17px 15px; box-shadow:var(--shadow); position:relative; overflow:hidden; }
.metric-card::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--brand-blue); }
.metric-orange::before { background:var(--brand-orange); }
.metric-label { color:var(--muted); font-size:11px; font-weight:650; }
.metric-value { font-size:30px; line-height:1.18; font-weight:800; letter-spacing:-1.1px; color:var(--heading); margin:8px 0 6px; font-variant-numeric:tabular-nums; }
.metric-note { font-size:10px; color:var(--muted); }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; min-width:0; box-shadow:var(--shadow); }
.panel-title-row { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }
.panel-title-row .eyebrow { color:var(--accent); margin-bottom:5px; }
.subtle-link { font-size:11px; font-weight:750; white-space:nowrap; }
.small-count { color:var(--muted); font-size:10px; white-space:nowrap; }
.table-wrap { width:100%; overflow-x:auto; }
.data-table { width:100%; border-collapse:collapse; font-size:12px; min-width:530px; }
.data-table th { text-align:left; padding:10px 12px; color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; white-space:nowrap; background:var(--surface-soft); border-bottom:1px solid var(--line); }
.data-table td { padding:13px 12px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.data-table tr:last-child td { border-bottom:0; }
.table-primary { color:var(--text); font-weight:750; }
.table-secondary { margin-top:3px; color:var(--muted); font-size:10px; }
.table-action { white-space:nowrap; text-align:right; }
.table-action a { font-size:11px; font-weight:750; }
.status-pill { display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border-radius:30px; font-size:10px; font-weight:750; white-space:nowrap; }
.status-pill::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.status-new { background:color-mix(in srgb, var(--brand-orange) 12%, var(--surface)); color:var(--brand-orange); }
.status-progress { background:color-mix(in srgb, var(--bridge) 13%, var(--surface)); color:var(--bridge); }
.status-waiting { background:color-mix(in srgb, var(--warn) 13%, var(--surface)); color:var(--warn); }
.status-closed { background:color-mix(in srgb, var(--ok) 12%, var(--surface)); color:var(--ok); }
.status-neutral { background:var(--surface-2); color:var(--muted); }
.announcement-list { display:grid; gap:12px; }
.announcement-card { border:1px solid var(--line-soft); background:var(--surface-soft); border-radius:10px; padding:15px 16px; }
.announcement-inactive { opacity:.7; }
.announcement-top, .announcement-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mini-label { color:var(--accent); font-weight:800; letter-spacing:.9px; font-size:9px; }
.announcement-card h3 { margin:7px 0 6px; color:var(--heading); }
.announcement-card p { color:var(--text-2); font-size:12px; margin:0; white-space:normal; overflow-wrap:anywhere; }
.announcement-meta { border-top:1px solid var(--line); padding-top:10px; margin-top:11px; color:var(--muted); font-size:10px; }
.announcement-meta form { margin:0; }
.text-button { border:0; background:transparent; color:var(--link); padding:3px 0; font-size:11px; font-weight:750; white-space:nowrap; }
.text-button:hover { text-decoration:underline; }
.status-panel { background:linear-gradient(145deg,var(--surface) 60%,color-mix(in srgb, var(--brand-blue) 5%, var(--surface))); }
.status-copy { color:var(--text-2); margin:12px 0 6px; font-size:13px; overflow-wrap:anywhere; }
.panel-foot { color:var(--muted); font-size:10px; border-top:1px solid var(--line-soft); margin-top:14px; padding-top:11px; }
.icon-chip { width:35px; height:35px; display:grid; place-items:center; color:var(--brand-orange); border-radius:10px; background:color-mix(in srgb, var(--brand-orange) 10%, var(--surface)); }
.icon-chip svg { width:18px;height:18px; }
.inline-editor { border-top:1px solid var(--line); margin-top:14px; padding-top:11px; }
.inline-editor summary { cursor:pointer; color:var(--link); font-weight:750; font-size:11px; }
.compact-form { margin-top:13px; }
.quick-link-list { display:grid; }
.quick-link-list a { display:flex; align-items:center; gap:11px; padding:12px 0; color:var(--text); border-bottom:1px solid var(--line-soft); }
.quick-link-list a:last-child { border-bottom:0; padding-bottom:0; }
.quick-link-list a:hover { text-decoration:none; }
.quick-link-list a:hover strong { color:var(--link); }
.quick-link-list strong { display:block; font-size:12px; }
.quick-link-list small { display:block; color:var(--muted); font-size:10px; margin-top:1px; }
.quick-icon { display:grid; place-items:center; width:32px; height:32px; background:var(--surface-2); color:var(--link); border-radius:9px; font-size:17px; flex:none; }
.quick-arrow { margin-left:auto; color:var(--muted); }
.future-card { border:1px dashed color-mix(in srgb, var(--brand-blue) 35%, var(--line)); border-radius:var(--radius); padding:21px; background:color-mix(in srgb, var(--brand-blue) 3%, var(--surface)); }
.future-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; color:var(--brand-blue); background:color-mix(in srgb, var(--brand-blue) 10%, var(--surface)); font-size:20px; margin-bottom:17px; }
.future-card .eyebrow { color:var(--accent); margin-bottom:6px; }
.future-card h2 { margin-bottom:7px; }
.future-card p { color:var(--muted); font-size:12px; margin-bottom:12px; }
.future-tag { display:inline-block; color:var(--muted); border:1px solid var(--line); padding:4px 8px; border-radius:5px; font-size:9px; font-weight:750; }
.empty-state { padding:35px 18px; text-align:center; color:var(--muted); }
.empty-state strong { display:block; color:var(--text); font-size:13px; }
.empty-state p { max-width:380px; margin:5px auto 0; font-size:11px; }
.empty-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; margin:0 auto 12px; background:var(--surface-2); color:var(--link); font-size:18px; }
.empty-inline { padding:16px; background:var(--surface-soft); border-radius:8px; color:var(--muted); font-size:12px; }
.form-panel { margin-bottom:20px; }
.form-stack { display:grid; gap:9px; }
.form-stack .field-label:not(:first-child) { margin-top:6px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.form-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.full-width { grid-column:1/-1; }
.field-label { display:block; color:var(--text-2); font-size:11px; font-weight:750; margin-bottom:0; }
.input { width:100%; min-height:41px; padding:10px 11px; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:8px; outline:none; }
.input:focus { border-color:var(--bridge); box-shadow:0 0 0 3px color-mix(in srgb, var(--bridge) 13%, transparent); }
.textarea { min-height:88px; resize:vertical; }
.field-help { color:var(--muted); font-size:10px; line-height:1.5; }
.file-input { padding:7px 9px; }
.detail-grid { display:grid; grid-template-columns:minmax(230px,.75fr) minmax(0,1.25fr); gap:20px; align-items:start; }
.ticket-detail { position:sticky; top:20px; }
.ticket-detail-top { display:flex; gap:10px; justify-content:space-between; align-items:center; margin-bottom:23px; }
.ticket-detail h2 { font-size:14px; margin-bottom:10px; }
.ticket-description { color:var(--text-2); white-space:normal; overflow-wrap:anywhere; }
.partner-chip { border:1px solid var(--line); padding:3px 7px; font-size:10px; color:var(--muted); border-radius:5px; }
.status-update-form { display:grid; gap:8px; border-top:1px solid var(--line); padding-top:15px; margin-top:20px; }
.conversation-panel { min-width:0; }
.comment-list { display:grid; gap:10px; }
.comment { background:var(--surface-soft); border:1px solid var(--line-soft); border-radius:10px; padding:13px 14px; }
.comment-original { border-left:3px solid var(--brand-orange); }
.comment-admin { border-left:3px solid var(--bridge); }
.comment-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:8px; }
.comment-head strong { color:var(--text); font-size:11px; }
.comment-head span { color:var(--muted); font-size:9px; text-align:right; }
.comment p { color:var(--text-2); font-size:12px; margin:0; overflow-wrap:anywhere; }
.comment-form { display:grid; gap:8px; border-top:1px solid var(--line); margin-top:17px; padding-top:17px; }
.comment-form .button { justify-self:start; }
.closed-note { margin-top:16px; padding:12px; border-radius:8px; background:var(--surface-2); font-size:11px; color:var(--muted); }
.resource-list { display:grid; gap:0; }
.resource-card { display:flex; align-items:center; gap:14px; padding:15px 0; border-bottom:1px solid var(--line-soft); }
.resource-card:last-child { border-bottom:0; }
.resource-icon { display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:10px; font-size:12px; font-weight:800; }
.file-type { color:var(--brand-blue); background:color-mix(in srgb, var(--brand-blue) 10%, var(--surface)); }
.link-type { color:var(--brand-orange); background:color-mix(in srgb, var(--brand-orange) 10%, var(--surface)); font-size:19px; }
.resource-body { flex:1; min-width:0; }
.resource-name { color:var(--text); font-size:13px; font-weight:750; }
.resource-body p { color:var(--muted); font-size:11px; margin:3px 0 4px; overflow-wrap:anywhere; }
.resource-meta { display:flex; gap:11px; flex-wrap:wrap; color:var(--muted); font-size:9px; }
.resource-actions { display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:none; }
.resource-actions form { margin:0; }
.two-column-forms { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-bottom:20px; align-items:start; }
.partner-users { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
.user-tag { color:var(--muted); border:1px solid var(--line); border-radius:5px; padding:2px 5px; font-size:9px; }
.alert { border:1px solid var(--line); border-left-width:3px; border-radius:8px; padding:11px 14px; margin:0 0 20px; font-size:12px; background:var(--surface); }
.alert-success { border-left-color:var(--ok); }
.alert-error { border-left-color:var(--danger); color:var(--danger); }
.alert-warning { border-left-color:var(--warn); color:var(--warn); }
.alert-info { border-left-color:var(--bridge); }
.narrow-panel { max-width:590px; }
.tiny { font-size:10px!important; }
.muted { color:var(--muted); }
.login-body { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(ellipse at top left,color-mix(in srgb, var(--brand-blue) 10%, transparent),transparent 48%),var(--bg); }
.login-wrap { width:min(100%,420px); }
.login-brand { display:flex; flex-direction:column; align-items:center; margin-bottom:24px; }
.login-card { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:30px; box-shadow:0 18px 60px rgba(16,32,45,.08); }
.login-card .eyebrow { color:var(--accent); margin-bottom:7px; }
.login-card h1 { font-size:27px; margin-bottom:6px; }
.login-card .muted { font-size:12px; margin-bottom:20px; }
.login-foot { margin:16px 0 0; color:var(--muted); text-align:center; font-size:10px; }
.error-wrap { max-width:540px; margin:12vh auto; padding:28px; }
.error-wrap h1 { margin-top:26px; }
.error-wrap p { color:var(--muted); margin-bottom:20px; }
@media (max-width:1150px) {
  .app-shell { grid-template-columns:220px minmax(0,1fr); }
  .dashboard-grid { grid-template-columns:minmax(0,1fr); }
  .dashboard-aside { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .status-panel { grid-row:span 2; }
  .metrics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .app-shell { display:block; }
  .sidebar { position:static; height:auto; padding:12px 12px 8px; border-right:0; border-bottom:1px solid var(--line); }
  .brand { padding:0 5px 11px; }
  .wordmark { font-size:23px; }
  .brand-sub { margin-top:4px; }
  .nav-label, .sidebar-bottom { display:none; }
  .primary-nav { display:flex; overflow-x:auto; gap:4px; padding-bottom:1px; }
  .nav-link { font-size:11px; padding:8px 10px; white-space:nowrap; }
  .nav-link.active { box-shadow:inset 0 -3px var(--brand-orange); }
  .nav-icon { display:none; }
  .topbar { height:52px; padding:0 17px; }
  .page-content { padding:24px 15px 32px; }
  .footer { padding:15px; flex-wrap:wrap; }
  .page-heading { align-items:flex-start; flex-direction:column; gap:14px; }
  .heading-actions { width:100%; }
  .heading-actions .button { width:100%; }
  .dashboard-aside { display:grid; grid-template-columns:minmax(0,1fr); }
  .status-panel { grid-row:auto; }
  .two-column-forms, .detail-grid { grid-template-columns:minmax(0,1fr); }
  .ticket-detail { position:static; }
  .form-grid { grid-template-columns:minmax(0,1fr); }
  .full-width { grid-column:auto; }
  .panel { padding:16px; }
  .metric-card { padding:14px; }
  .metric-value { font-size:26px; }
  .resource-card { align-items:flex-start; flex-wrap:wrap; }
  .resource-actions { margin-left:56px; flex-direction:row; align-items:center; }
}
@media (max-width:400px) {
  .metrics-grid, .metrics-three { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .metrics-three .metric-card:last-child { grid-column:1/-1; }
  .role-pill { display:none; }
  .login-card { padding:23px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }


/* Doek Works partner portal branding */
.brand-logo {
  display: inline-flex;
  align-items: center;
  width: min(100%, 196px);
  text-decoration: none !important;
}
.brand-logo img {
  display: block;
  width: 100%;
  height: auto;
}
.brand-logo-error { width: min(100%, 280px); }

/* Backward compatibility for views that still render the old TeamHub wordmark. */
.wordmark {
  display: block;
  width: 196px;
  height: 39px;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  background: url("doekworks-logo.png") left center / contain no-repeat;
}
.wordmark span { display: none; }
.login-brand .wordmark {
  width: 260px;
  height: 52px;
  background-position: center;
}
.brand-sub::before { content: "DOEK WORKS"; }
.brand-sub { font-size: 0; }
.brand-sub::after {
  content: " PARTNER PORTAL";
  font-size: 9px;
}
.brand-sub::before {
  font-size: 9px;
}
@media (max-width:760px) {
  .wordmark { width: 172px; height: 34px; }
  .login-brand .wordmark { width: 230px; height: 46px; }
}

/* Huub explainer */
.huub-explainer {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  align-items: end;
  padding: 18px 20px 18px 12px;
  margin: 18px 0;
  border: 1px solid rgba(36, 100, 142, .18);
  border-left: 4px solid var(--brand-orange);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(36, 100, 142, .08), rgba(255,255,255,.98));
  box-shadow: 0 8px 24px rgba(16, 55, 80, .08);
}
.huub-explainer__mascot {
  display: block;
  width: 100%;
  height: auto;
  align-self: end;
}
.huub-explainer__label {
  display: block;
  margin-bottom: 4px;
  color: var(--brand-orange);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.huub-explainer__title {
  margin: 0 0 4px;
  color: var(--brand-blue);
  font-size: 1rem;
  line-height: 1.25;
}
.huub-explainer__text {
  margin: 0;
  color: var(--text, #263746);
  font-size: .92rem;
  line-height: 1.55;
}
@media (max-width: 560px) {
  .huub-explainer {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }
}