@charset "UTF-8";
/* =====================================================================
   SisBird — main stylesheet
   Hand-written, no framework, no build step. Organised as:
   01 Reset & tokens · 02 Typography · 03 Layout · 04 Buttons & forms
   05 Header & nav   · 06 Footer     · 07 Hero   · 08 Sections & cards
   09 Data displays  · 10 Services   · 11 Blog   · 12 Utilities
   Brand colours arrive as CSS custom properties from the admin panel
   (see inc/enqueue.php → sisbird_css_variables), so every shade below
   is derived and nothing is hard-coded to one palette.
   ===================================================================== */

/* -------------------------------------------------- 01 Reset & tokens */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;font-family:'Inter var','Inter fallback',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;font-size:var(--sb-root-size,16px);line-height:1.65;color:var(--sb-ink);background:var(--sb-bg);-webkit-font-smoothing:antialiased;font-feature-settings:'cv05' 1,'ss01' 1}
img,svg,video,canvas{max-width:100%;height:auto;display:block}
figure{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:root{
  --sb-ink:#16232f;
  --sb-ink-2:#3d5265;
  --sb-ink-3:#647689;
  --sb-bg:#ffffff;
  --sb-surface:#f6f9fb;
  --sb-surface-2:#eef4f8;
  --sb-line:rgba(15,59,95,.12);
  --sb-line-strong:rgba(15,59,95,.2);
  --sb-shadow-sm:0 1px 2px rgba(8,35,54,.05),0 1px 3px rgba(8,35,54,.06);
  --sb-shadow:0 4px 6px -2px rgba(8,35,54,.05),0 12px 24px -6px rgba(8,35,54,.1);
  --sb-shadow-lg:0 24px 60px -18px rgba(8,35,54,.28);
  --sb-mono:ui-monospace,'SFMono-Regular','SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
  --sb-max:1220px;
  --sb-gutter:20px;
  --sb-section:clamp(44px,5vw,76px);
  --sb-ease:cubic-bezier(.2,.7,.3,1);
}
::selection{background:var(--sb-orange);color:var(--sb-deep)}
:focus-visible{outline:3px solid var(--sb-orange);outline-offset:2px;border-radius:4px}
hr{border:0;border-top:1px solid var(--sb-line);margin:32px 0}

/* -------------------------------------------------- 02 Typography */
h1,h2,h3,h4,h5,h6{margin:0 0 .6em;font-weight:750;line-height:1.16;letter-spacing:-.021em;color:var(--sb-navy)}
h1{font-size:clamp(2rem,1.2rem + 2.6vw,3.1rem);letter-spacing:-.028em}
h2{font-size:clamp(1.6rem,1.12rem + 1.6vw,2.35rem);letter-spacing:-.026em}
h3{font-size:clamp(1.2rem,1.04rem + .55vw,1.45rem)}
h4{font-size:1.0625rem}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
a{color:var(--sb-blue);text-decoration-color:rgba(var(--sb-blue-rgb),.35);text-underline-offset:3px;transition:color .15s var(--sb-ease)}
a:hover{color:var(--sb-blue-600)}
strong,b{font-weight:700;color:var(--sb-navy)}
small{font-size:.875rem}
code,kbd,samp,pre{font-family:var(--sb-mono);font-size:.9em}
code{background:var(--sb-navy-050);border:1px solid var(--sb-line);padding:.12em .4em;border-radius:5px;color:var(--sb-navy-700)}
pre{background:var(--sb-deep);color:#dbe9f2;padding:20px 22px;border-radius:var(--sb-radius);overflow:auto;line-height:1.6}
pre code{background:none;border:0;color:inherit;padding:0}
blockquote{margin:28px 0;padding:4px 0 4px 22px;border-left:3px solid var(--sb-orange);color:var(--sb-ink-2);font-size:1.06rem}
blockquote p:last-child{margin-bottom:0}
.sb-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--sb-blue);margin:0 0 14px}
.sb-eyebrow::before{content:"";width:20px;height:2px;background:var(--sb-orange);border-radius:2px;flex:0 0 auto}
.sb-eyebrow--light{color:rgba(255,255,255,.72)}
.sb-lead{font-size:clamp(1.02rem,.96rem + .3vw,1.18rem);color:var(--sb-ink-2);line-height:1.68}
.sb-balance{text-wrap:balance}

/* -------------------------------------------------- 03 Layout */
.sb-container{width:100%;max-width:var(--sb-max);margin-inline:auto;padding-inline:var(--sb-gutter)}
.sb-container--narrow{max-width:840px}
.sb-container--mid{max-width:1020px}
.sb-section{padding-block:var(--sb-section)}
.sb-section--tight{padding-block:clamp(28px,3vw,44px)}
.sb-section--alt{background:var(--sb-surface)}
.sb-section--deep{background:var(--sb-deep);color:#e7f0f7}
.sb-art--band{display:block;width:100%;height:auto}
/* The landing page's own hero figure. Deliberately NOT .sb-hero__art:
   that class already belongs to the home hero's route-status panel. */
.sb-hero__figure{margin-top:32px;max-width:560px}

/* Glassy hero panels. The illustrations paint their own backdrop rect and read
   their colours from these four custom properties instead of hard-coding them,
   so the same artwork works on a light page and inside a dark hero. In a hero
   the panel becomes a dark translucent pane with a backdrop blur: the gradient
   behind shows through frosted, white cards float on it, and every label drawn
   straight onto the panel flips to light ink. Browsers with no backdrop-filter
   still get a clean dark panel, just without the blur. */
.sb-phero .sb-art:not(.sb-art--mesh),.sb-hero .sb-art:not(.sb-art--mesh){
  --sb-art-bg:rgba(9,22,33,.46);
  --sb-art-stroke:rgba(255,255,255,.16);
  --sb-art-ink:rgba(255,255,255,.86);
  --sb-art-ink-soft:rgba(255,255,255,.55);
  --sb-art-line:rgba(255,255,255,.16);
  --sb-art-accent:var(--sb-blue-200);
  --sb-art-danger:var(--sb-alert-300);
  border-radius:19px;
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 26px 60px -28px rgba(3,12,20,.8)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sb-phero .sb-art:not(.sb-art--mesh),.sb-hero .sb-art:not(.sb-art--mesh){--sb-art-bg:rgba(9,22,33,.78)}
}
/* Artwork already drawn for a dark ground keeps its own tint. */
.sb-phero .sb-art--ondark:not(.sb-art--mesh),.sb-hero .sb-art--ondark:not(.sb-art--mesh){
  --sb-art-bg:rgba(255,255,255,.06);--sb-art-stroke:rgba(255,255,255,.16)}
.sb-art--onlight{border-radius:19px;backdrop-filter:none;-webkit-backdrop-filter:none}
.sb-phero__bg .sb-art,.sb-hero__bg .sb-art{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-radius:0}
@media(min-width:1024px){.sb-hero__pitch{position:sticky;top:96px;align-self:start}}
.sb-hero__figure svg{width:100%;height:auto;display:block}
@media(max-width:939px){.sb-hero__figure{display:none}}
.sb-section--dark{background:var(--sb-deep);color:#d7e5ee}
.sb-section--dark h2,.sb-section--dark h3,.sb-section--dark h4{color:#fff}
.sb-section--dark .sb-lead{color:rgba(255,255,255,.74)}
.sb-section__head{max-width:720px;margin:0 0 30px}
.sb-section__head--center{margin-inline:auto;text-align:center}
/* A heading row that runs the full width with its "see all" link on the right.
   Centred heads stacked down a whole page are the single most dating thing a
   layout can do, so only the FAQ and the offer band still centre. */
.sb-section__head--split{max-width:none;display:grid;gap:18px 40px;align-items:end}
@media(min-width:900px){
  .sb-section__head--split{grid-template-columns:minmax(0,1fr) auto}
  .sb-section__head--split .sb-section__head-main{max-width:760px}
}
.sb-section__head-link{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  padding:11px 18px;border-radius:999px;border:1px solid var(--sb-line-strong);
  font-weight:650;font-size:.9rem;color:var(--sb-navy);text-decoration:none;background:#fff;
  transition:border-color .16s var(--sb-ease),color .16s var(--sb-ease),transform .16s var(--sb-ease)}
.sb-section__head-link svg{width:16px;height:16px;color:var(--sb-orange);transition:transform .16s var(--sb-ease)}
.sb-section__head-link:hover{border-color:var(--sb-blue);color:var(--sb-blue)}
.sb-section__head-link:hover svg{transform:translateX(3px)}
.sb-section__head-link--light{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);color:#fff}
.sb-section__head-link--light:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.sb-grid{display:grid;gap:22px}
.sb-grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.sb-grid--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.sb-grid--4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
/* Start-aligned by default: centring two columns of different heights is
   what produced the dead space above short columns. */
.sb-split{display:grid;gap:clamp(28px,4vw,54px);align-items:start;grid-template-columns:1fr}
.sb-split--center{align-items:center}
@media(min-width:900px){.sb-split{grid-template-columns:1.05fr .95fr}.sb-split--flip>*:first-child{order:2}}
.sb-split--top{align-items:start}
.sb-stack{display:flex;flex-direction:column;gap:16px}
@media(min-width:900px){.sb-stack--sticky{position:sticky;top:96px}}
.sb-cluster{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* -------------------------------------------------- 04 Buttons & forms */
.sb-btn{--btn-bg:var(--sb-orange);--btn-fg:#12202b;--btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:calc(var(--sb-radius) - 4px);border:1px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);font-weight:700;font-size:.95rem;letter-spacing:-.006em;
  text-decoration:none;cursor:pointer;line-height:1.2;white-space:nowrap;
  transition:transform .16s var(--sb-ease),box-shadow .16s var(--sb-ease),background .16s var(--sb-ease),color .16s var(--sb-ease);
  box-shadow:0 1px 2px rgba(8,35,54,.12)}
.sb-btn:hover{--btn-bg:var(--sb-orange-600);color:var(--btn-fg);transform:translateY(-1px);box-shadow:0 8px 18px -6px rgba(var(--sb-orange-rgb),.55)}
.sb-btn:active{transform:translateY(0)}
.sb-btn svg{width:17px;height:17px;flex:0 0 auto}
.sb-btn--primary{--btn-bg:var(--sb-navy);--btn-fg:#fff}
.sb-btn--primary:hover{--btn-bg:var(--sb-navy-700);color:#fff;box-shadow:0 8px 18px -6px rgba(var(--sb-navy-rgb),.5)}
.sb-btn--ghost{--btn-bg:transparent;--btn-fg:var(--sb-navy);--btn-bd:var(--sb-line-strong);box-shadow:none}
/* A ghost button inherits navy ink, which disappears on the dark bands. */
.sb-section--dark .sb-btn--ghost,.sb-phero .sb-btn--ghost,.sb-hero .sb-btn--ghost,
.sb-cta .sb-btn--ghost{--btn-fg:#fff;--btn-bd:rgba(255,255,255,.3)}
.sb-section--dark .sb-btn--ghost:hover,.sb-phero .sb-btn--ghost:hover,
.sb-hero .sb-btn--ghost:hover,.sb-cta .sb-btn--ghost:hover{--btn-bg:rgba(255,255,255,.12);--btn-bd:#fff}
.sb-btn--ghost:hover{--btn-bg:var(--sb-navy-050);--btn-bd:var(--sb-navy-300);color:var(--sb-navy);box-shadow:none}
.sb-btn--onDark{--btn-bg:rgba(255,255,255,.08);--btn-fg:#fff;--btn-bd:rgba(255,255,255,.24);box-shadow:none;backdrop-filter:blur(6px)}
.sb-btn--onDark:hover{--btn-bg:rgba(255,255,255,.16);color:#fff;box-shadow:none}
.sb-btn--lg{padding:16px 30px;font-size:1rem}
.sb-btn--sm{padding:9px 16px;font-size:.85rem}
.sb-btn--block{width:100%}
.sb-link{display:inline-flex;align-items:center;gap:7px;font-weight:650;text-decoration:none;color:var(--sb-blue)}
.sb-link svg{width:15px;height:15px;transition:transform .18s var(--sb-ease)}
.sb-link:hover svg{transform:translateX(3px)}
.sb-link--light{color:#fff}

label{font-weight:600;font-size:.9rem;color:var(--sb-navy);display:block;margin-bottom:6px}
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],input[type=search],input[type=password],input[type=date],select,textarea{
  width:100%;padding:12px 14px;border:1px solid var(--sb-line-strong);border-radius:calc(var(--sb-radius) - 5px);
  background:#fff;color:var(--sb-ink);font-size:.95rem;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--sb-blue);box-shadow:0 0 0 3px rgba(var(--sb-blue-rgb),.16)}
textarea{min-height:132px;resize:vertical}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23647689' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
::placeholder{color:#93a3b2}

/* -------------------------------------------------- 05 Header & nav */
.sb-skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--sb-orange);color:var(--sb-deep);padding:12px 20px;border-radius:0 0 8px 0;font-weight:700;text-decoration:none}
.sb-skip:focus{left:0}

.sb-topbar{background:var(--sb-deep);color:rgba(255,255,255,.8);font-size:.8125rem;padding:9px 0;position:relative;z-index:70}
.sb-topbar__inner{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between}
.sb-topbar__msg{display:flex;align-items:center;gap:9px;margin:0}
.sb-topbar__dot{width:7px;height:7px;border-radius:50%;background:var(--sb-ok);animation:sb-pulse 2.6s infinite}
@keyframes sb-pulse{0%{box-shadow:0 0 0 0 rgba(var(--sb-ok-rgb),.55)}70%{box-shadow:0 0 0 8px rgba(var(--sb-ok-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--sb-ok-rgb),0)}}
.sb-topbar a{color:#fff;text-decoration:none;font-weight:600}
.sb-topbar a:hover{color:var(--sb-orange)}
.sb-topbar__links{display:flex;gap:18px;align-items:center;margin:0;padding:0;list-style:none}
@media(max-width:719px){.sb-topbar__links{display:none}}

.sb-header{position:relative;z-index:60;background:#fff;border-bottom:1px solid var(--sb-line)}
/* On dark pages the header, the announcement bar and the hero read as one
   block, so the header carries the same deep background rather than floating
   over the hero as a transparent overlay. */
.sb--dark-header .sb-header{background:var(--sb-deep);border-bottom-color:rgba(255,255,255,.08)}
.sb--sticky .sb-header{position:sticky;top:0}
body.admin-bar .sb-header.is-pinned{top:32px}
@media screen and (max-width:782px){body.admin-bar .sb-header.is-pinned{top:46px}}
.sb-header.is-pinned{position:fixed;top:0;left:0;right:0;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(14px);border-bottom-color:var(--sb-line);box-shadow:0 6px 24px -14px rgba(8,35,54,.35);animation:sb-drop .28s var(--sb-ease)}
@keyframes sb-drop{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.sb-header__inner{display:flex;align-items:center;gap:20px;min-height:76px}
.sb-logo{display:flex;align-items:center;gap:11px;flex:0 0 auto;text-decoration:none;color:var(--sb-navy)}
.sb-logo img{width:auto;max-height:46px}
.sb-logo__mark{width:42px;height:42px;object-fit:contain;flex:0 0 auto}
.sb-logo--lockup img{max-height:40px}
.sb--dark-header .sb-header:not(.is-pinned) .sb-logo__mark,.sb-footer .sb-logo__mark{filter:brightness(1.12)}
.sb-logo__text{display:flex;flex-direction:column;line-height:1.05;justify-content:center}
.sb-logo__name{font-weight:800;font-size:1.62rem;letter-spacing:-.035em;line-height:1}
/* The wordmark distributes its letters across the tagline's width, so the two
   lines of the lockup measure the same however the tagline is worded. The
   trailing negative margin cancels the space flexbox would otherwise leave
   after the last letter, keeping the right edges flush. */
.sb-logo__name--fit{display:flex;justify-content:space-between;letter-spacing:0}
.sb-logo__name--fit>i{font-style:normal;display:block}
.sb-logo__tag{font-size:.525rem;letter-spacing:.028em;text-transform:uppercase;color:var(--sb-ink-3);font-weight:700;line-height:1.25;margin-top:3px}
.sb--dark-header .sb-header:not(.is-pinned) .sb-logo{color:#fff}
.sb--dark-header .sb-header:not(.is-pinned) .sb-logo__name{color:#fff}
.sb--dark-header .sb-header:not(.is-pinned) .sb-logo__tag{color:rgba(255,255,255,.6)}

.sb-nav{margin-left:auto}
.sb-nav__list{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.sb-nav__list a{display:flex;align-items:center;gap:5px;padding:10px 13px;border-radius:9px;font-size:.94rem;font-weight:600;color:var(--sb-navy);text-decoration:none;transition:background .15s,color .15s}
.sb-nav__list a:hover,
.sb-nav__list .current-menu-item>a,
.sb-nav__list .current-menu-parent>a,
.sb-nav__list .current-menu-ancestor>a,
.sb-nav__list .current_page_item>a,
.sb-nav__list .current_page_parent>a,
.sb-nav__list .current_page_ancestor>a{background:var(--sb-navy-050);color:var(--sb-navy)}
.sb--dark-header .sb-header:not(.is-pinned) .sb-nav__list a{color:rgba(255,255,255,.88)}
.sb--dark-header .sb-header:not(.is-pinned) .sb-nav__list a:hover,
.sb--dark-header .sb-header:not(.is-pinned) .sb-nav__list .current-menu-item>a,
.sb--dark-header .sb-header:not(.is-pinned) .sb-nav__list .current-menu-parent>a,
.sb--dark-header .sb-header:not(.is-pinned) .sb-nav__list .current-menu-ancestor>a,
.sb--dark-header .sb-header:not(.is-pinned) .sb-nav__list .current_page_item>a,
.sb--dark-header .sb-header:not(.is-pinned) .sb-nav__list .current_page_parent>a,
.sb--dark-header .sb-header:not(.is-pinned) .sb-nav__list .current_page_ancestor>a{background:rgba(255,255,255,.1);color:#fff}
.sb-nav__caret{width:12px;height:12px;opacity:.6;transition:transform .2s var(--sb-ease)}
.sb-nav__list li.menu-item-has-children{position:relative}
.sb-nav__list li.menu-item-has-children:hover>a .sb-nav__caret,
.sb-nav__list li.menu-item-has-children:focus-within>a .sb-nav__caret{transform:rotate(180deg)}
/* The transition is spelled out property by property, and `all` is never used
   here, because `all` includes `visibility`. A visibility transition runs from
   the UA's initial `visible` on the very first style computation, so the panel
   was painting open and then fading shut on every page load — the dropdown
   appearing by itself for a moment after each navigation. Visibility now flips
   in 0s: instantly on open, and delayed to the end of the fade on close so the
   fade is still seen. */
.sb-nav__list .sub-menu{position:absolute;top:calc(100% + 10px);left:0;min-width:308px;background:#fff;border:1px solid var(--sb-line);border-radius:var(--sb-radius);box-shadow:var(--sb-shadow-lg);padding:10px;margin:0;list-style:none;opacity:0;visibility:hidden;transform:translateY(8px);z-index:80;
  transition:opacity .2s var(--sb-ease),transform .2s var(--sb-ease),visibility 0s linear .2s}
.sb-nav__list li:hover>.sub-menu,.sb-nav__list li:focus-within>.sub-menu,.sb-nav__list li.is-open>.sub-menu{opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .2s var(--sb-ease),transform .2s var(--sb-ease),visibility 0s}
.sb-nav__list .sub-menu::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.sb-nav__list .sub-menu a{flex-direction:column;align-items:flex-start;gap:2px;padding:11px 13px;border-radius:9px;color:var(--sb-navy)!important;background:transparent!important}
.sb-nav__list .sub-menu a:hover{background:var(--sb-navy-050)!important}
/* The page you are on, marked inside the dropdown too.
   The blanket .sub-menu a rule above sets colour and background with
   !important so the dark-header inversion cannot bleed into a white panel —
   which also flattened the current item, leaving the submenu with no sense of
   where you were. These restore it at the same weight. The walker already
   writes aria-current="page"; this is the visible half of it. */
.sb-nav__list .sub-menu .current-menu-item>a,
.sb-nav__list .sub-menu .current_page_item>a{
  background:var(--sb-navy-050)!important;
  box-shadow:inset 3px 0 0 var(--sb-orange)}
.sb-nav__list .sub-menu .current-menu-item>a .sb-nav__label,
.sb-nav__list .sub-menu .current_page_item>a .sb-nav__label{color:var(--sb-orange-600)}
.sb-nav__desc{display:block;font-size:.78rem;font-weight:450;color:var(--sb-ink-3);line-height:1.45}
.sb-nav__label{display:block}

/* ---- Mega panel ----------------------------------------------------------
   The parent <li> goes position:static so the panel resolves against the
   header and can span the full container width instead of the menu item. */
@media(min-width:1024px){
  .sb-nav__list li.sb-mega{position:static}
  .sb-nav__list .sb-mega__panel{
    left:0;right:0;margin-inline:auto;
    width:min(980px,calc(100vw - 48px));min-width:0;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) 256px;
    grid-auto-rows:min-content;align-content:start;
    gap:4px 6px;padding:16px;transform:translateY(10px)}
  /* Explicit columns: auto-placement would otherwise flow service cards into
     the third track, on top of the promo rail. */
  .sb-mega__panel>li:not(.sb-mega__aside):nth-of-type(odd){grid-column:1}
  .sb-mega__panel>li:not(.sb-mega__aside):nth-of-type(even){grid-column:2}
  .sb-nav__list li.sb-mega:hover>.sb-mega__panel,
  .sb-nav__list li.sb-mega:focus-within>.sb-mega__panel,
  .sb-nav__list li.sb-mega.is-open>.sb-mega__panel{transform:translateY(0)}
  .sb-mega__panel::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
  .sb-mega__panel>li>a{
    display:grid!important;grid-template-columns:38px 1fr;gap:2px 12px;
    align-items:start;align-content:start;
    padding:12px 14px!important;border-radius:11px}
  .sb-mega__icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
    background:linear-gradient(140deg,var(--sb-blue-050),var(--sb-navy-050));
    border:1px solid var(--sb-line);color:var(--sb-blue);
    grid-column:1;grid-row:1 / span 2;align-self:start}
  .sb-mega__panel>li>a>.sb-nav__label{grid-column:2;grid-row:1;font-size:.94rem;font-weight:650;color:var(--sb-navy)}
  /* Current item in the mega panel: the icon carries the accent as well, so
     the row reads as current at a glance rather than on a shade of grey. */
  .sb-mega__panel>li.current-menu-item>a>.sb-nav__label{color:var(--sb-orange-600)}
  .sb-mega__panel>li.current-menu-item>a>.sb-mega__icon{
    background:linear-gradient(140deg,var(--sb-orange-100),#fff);
    border-color:rgba(var(--sb-orange-rgb),.4);color:var(--sb-orange-600)}
  .sb-mega__panel>li>a>.sb-nav__desc{grid-column:2;grid-row:2;margin-top:2px}

  /* The rail is lifted out of the grid flow: as a spanning grid item it would
     dictate the height of the first row and blow a gap through the cards. The
     third column track stays in the template to reserve its space. */
  .sb-mega__aside{position:absolute;top:16px;right:16px;bottom:16px;width:256px;
    background:var(--sb-navy-050);border:1px solid var(--sb-line);border-radius:12px;
    padding:18px;display:flex;flex-direction:column;gap:10px}
  .sb-mega__aside-label{font-size:.95rem;font-weight:700;color:var(--sb-navy);line-height:1.3}
  .sb-mega__aside p{font-size:.82rem;color:var(--sb-ink-2);line-height:1.55;margin:0}
  .sb-mega__aside .sb-btn{margin-top:2px}
  .sb-mega__links{list-style:none;margin:auto 0 0;padding:12px 0 0;display:grid;gap:8px;
    border-top:1px solid var(--sb-line)}
  .sb-mega__links a{display:flex!important;flex-direction:row!important;align-items:center;gap:8px;
    padding:5px 0!important;font-size:.85rem;font-weight:600;background:none!important}
  .sb-mega__links a:hover{background:none!important;color:var(--sb-blue)!important}
  .sb-mega__links svg{color:var(--sb-orange);flex:0 0 auto}
}
@media(max-width:1023px){
  /* On small screens the panel is just a nested list again. */
  .sb-mega__aside{display:none}
  .sb-mega__icon{display:none}
}
.sb-header__cta{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.sb-header__phone{display:inline-flex;align-items:center;gap:7px;font-weight:650;font-size:.9rem;color:var(--sb-navy);text-decoration:none}
.sb--dark-header .sb-header:not(.is-pinned) .sb-header__phone{color:#fff}
.sb-header__phone svg{width:16px;height:16px;color:var(--sb-orange)}
@media(max-width:1099px){.sb-header__phone{display:none}}

.sb-burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--sb-line-strong);border-radius:10px;background:transparent;cursor:pointer;color:var(--sb-navy)}
.sb--dark-header .sb-header:not(.is-pinned) .sb-burger{color:#fff;border-color:rgba(255,255,255,.28)}
.sb-burger i{display:block;width:19px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:.2s var(--sb-ease)}
.sb-burger i::before,.sb-burger i::after{content:"";position:absolute;left:0;width:19px;height:2px;background:currentColor;border-radius:2px;transition:.2s var(--sb-ease)}
.sb-burger i::before{top:-6px}.sb-burger i::after{top:6px}
.sb-burger[aria-expanded=true] i{background:transparent}
.sb-burger[aria-expanded=true] i::before{top:0;transform:rotate(45deg)}
.sb-burger[aria-expanded=true] i::after{top:0;transform:rotate(-45deg)}
@media(max-width:1023px){
  /* ------------------------------------------------- The drawer
     A dark panel in the brand's own language rather than a white
     sheet: the same navy-to-deep ground as the hero, one warm glow
     behind it, and rows separated by hairlines instead of boxes.
     Items arrive in sequence, which reads as the panel opening
     rather than as a list appearing all at once. */
  .sb-burger{display:inline-flex}
  .sb-header__cta{margin-left:auto}
  .sb-header__cta .sb-btn{display:none}

  /* A full-height drawer, the pattern every phone user already knows.
     Two earlier attempts got this wrong: padding the top by the header height
     left a tall empty band, and anchoring below the header left the panel
     hanging off a bar it did not own. The standard answer is that the drawer
     covers the screen and carries its own bar — brand on the left so you know
     where you are, close on the right where the burger was. */
  .sb-nav{
    position:fixed;top:0;right:0;bottom:0;left:auto;
    width:min(400px,90vw);margin-left:0;z-index:120;
    display:flex;flex-direction:column;
    padding:0 0 max(28px,env(safe-area-inset-bottom));
    overflow-y:auto;overscroll-behavior:contain;
    background:linear-gradient(200deg,var(--sb-navy),var(--sb-deep) 62%);
    transform:translateX(100%);transition:transform .34s var(--sb-ease);
    box-shadow:-24px 0 60px rgba(8,35,54,.34)}
  .sb-nav::before{content:"";position:absolute;inset:auto -40% 12% -20%;height:340px;pointer-events:none;
    background:radial-gradient(60% 60% at 40% 100%,rgba(var(--sb-orange-rgb),.2),transparent 70%)}
  .sb-nav>*{position:relative;flex:none}
  .sb-nav.is-open{transform:translateX(0)}

  /* The drawer's own bar. Sticky, so the way out stays reachable however far
     down the menu you have scrolled. Its height matches the site header so
     the brand does not jump as the panel slides across it. */
  .sb-nav__top{
    position:sticky;top:0;z-index:2;display:flex;align-items:center;
    justify-content:space-between;gap:16px;min-height:74px;
    padding:calc(env(safe-area-inset-top) + 4px) 18px 4px 22px;
    background:var(--sb-navy);
    border-bottom:1px solid rgba(255,255,255,.12)}
  .sb-nav__top .sb-logo{gap:9px}
  .sb-nav__top .sb-logo img{max-height:36px}
  .sb-nav__top .sb-logo__name{color:#fff}
  .sb-nav__top .sb-logo__tag{color:rgba(255,255,255,.6)}
  .sb-nav__top .sb-logo__mark{width:36px;height:36px;filter:brightness(1.12)}
  .sb-nav__close{
    flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
    border:1px solid rgba(255,255,255,.24);border-radius:11px;background:transparent;
    color:#fff;cursor:pointer;transition:background .15s,border-color .15s}
  .sb-nav__close:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}
  .sb-nav__list{margin-top:8px}

  .sb-nav__list{flex-direction:column;align-items:stretch;gap:0;padding-inline:22px}
  .sb-nav__list>li{border-top:1px solid rgba(255,255,255,.1)}
  .sb-nav__list>li:first-child{border-top:0}
  .sb-nav__list>li>a{
    color:#fff!important;background:transparent!important;
    padding:16px 2px;font-size:1.06rem;font-weight:650;letter-spacing:-.01em;
    justify-content:space-between;border-radius:0}
  .sb-nav__list>li>a:hover,
  .sb-nav__list>li.current-menu-item>a,
  .sb-nav__list>li.current-menu-parent>a,
  .sb-nav__list>li.current_page_item>a{color:var(--sb-orange)!important;background:transparent!important}
  .sb-nav__caret{color:rgba(255,255,255,.5)}

  /* Sub-menus: a quiet indented column, opened by the row's own toggle. */
  .sb-nav__list .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    background:transparent;border:0;border-left:1px solid rgba(var(--sb-orange-rgb),.42);
    border-radius:0;margin:0 0 14px 4px;padding:2px 0 2px 16px;min-width:0;display:none}
  .sb-nav__list li.is-open>.sub-menu{display:block}
  .sb-nav__list .sub-menu a{
    color:rgba(255,255,255,.76)!important;background:transparent!important;
    padding:9px 0!important;font-size:.94rem;font-weight:550}
  .sb-nav__list .sub-menu a:hover{color:#fff!important}
  /* Same marker in the drawer, in the drawer's own palette. The desktop rule
     tints the current row with a pale navy wash, which on this dark panel
     painted a near-white block over the row and swallowed the description
     text with it. Here the accent is carried by the rail and the type. */
  .sb-nav__list .sub-menu .current-menu-item>a,
  .sb-nav__list .sub-menu .current_page_item>a{
    color:var(--sb-orange)!important;font-weight:650;
    background:transparent!important;box-shadow:none}
  .sb-nav__list .sub-menu .current-menu-item>a .sb-nav__label,
  .sb-nav__list .sub-menu .current_page_item>a .sb-nav__label{color:var(--sb-orange)}
  .sb-nav__list .sub-menu .current-menu-item>a .sb-nav__desc,
  .sb-nav__list .sub-menu .current_page_item>a .sb-nav__desc{color:rgba(255,255,255,.62)}
  /* The indent rail brightens for the length of the current row, which is what
     actually reads as "you are here" once the row has no box of its own. */
  .sb-nav__list .sub-menu li.current-menu-item,
  .sb-nav__list .sub-menu li.current_page_item{
    position:relative;margin-left:-17px;padding-left:17px}
  .sb-nav__list .sub-menu li.current-menu-item::before,
  .sb-nav__list .sub-menu li.current_page_item::before{
    content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;
    background:var(--sb-orange);border-radius:2px}
  .sb-nav__list .sub-menu .sb-nav__desc{color:rgba(255,255,255,.45);font-size:.8rem}

  /* Staggered entrance. Reduced-motion users get the panel with no
     choreography — the global rule at the end of the file zeroes it. */
  .sb-nav.is-open .sb-nav__list>li{animation:sbNavIn .34s var(--sb-ease) backwards}
  .sb-nav.is-open .sb-nav__list>li:nth-child(1){animation-delay:.04s}
  .sb-nav.is-open .sb-nav__list>li:nth-child(2){animation-delay:.08s}
  .sb-nav.is-open .sb-nav__list>li:nth-child(3){animation-delay:.12s}
  .sb-nav.is-open .sb-nav__list>li:nth-child(4){animation-delay:.16s}
  .sb-nav.is-open .sb-nav__list>li:nth-child(5){animation-delay:.2s}
  .sb-nav.is-open .sb-nav__list>li:nth-child(6){animation-delay:.24s}
  .sb-nav.is-open .sb-nav__mobile-cta{animation:sbNavIn .34s var(--sb-ease) .28s backwards}

  /* The action block sits on its own ground so it reads as the end
     of the panel rather than another menu row. */
  .sb-nav__mobile-cta{
    margin:26px 16px 0;padding:20px 18px;display:grid;gap:10px;
    border-radius:var(--sb-radius);background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12)}
  .sb-nav__mobile-cta .sb-btn--ghost{--btn-fg:#fff;--btn-bd:rgba(255,255,255,.26);--btn-bg:transparent}
  .sb-nav__mobile-cta .sb-btn--ghost:hover{--btn-bg:rgba(255,255,255,.12);--btn-bd:#fff}
  /* Scoped to .sb-nav: the shared .sb-nav__handles rules are defined later in
     this file for the light footer context, and at equal specificity the last
     one wins — which painted these dark grey on a dark panel. */
  .sb-nav .sb-nav__handles{margin-top:4px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);
    display:grid;gap:9px}
  .sb-nav .sb-nav__handles a,.sb-nav .sb-nav__handles>span{
    display:flex;align-items:center;gap:9px;font-size:.86rem;
    color:rgba(255,255,255,.78);text-decoration:none}
  .sb-nav .sb-nav__handles a:hover{color:#fff}
  .sb-nav .sb-nav__handles svg{color:var(--sb-orange);flex:none}

}
@keyframes sbNavIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
/* The admin bar paints at 99999 over everything, and the page is scroll-locked
   while the drawer is open, so an admin who opened the menu could not reach the
   close button underneath it. Start the drawer below the bar instead — 46px on
   phones, 32px from 783px up, matching core's own two heights. */
@media(max-width:1023px){body.admin-bar .sb-nav{top:46px}}
@media(min-width:783px) and (max-width:1023px){body.admin-bar .sb-nav{top:32px}}
@media(min-width:1024px){.sb-nav__mobile-cta,.sb-nav__top{display:none}}
/* Same rule as the dropdown above: a bare `transition` shorthand means `all`,
   which animates visibility from the UA default and flashes the whole overlay
   dark for a moment on every page load. */
.sb-scrim{position:fixed;inset:0;background:rgba(8,35,54,.5);opacity:0;visibility:hidden;z-index:110;backdrop-filter:blur(2px);
  transition:opacity .28s var(--sb-ease),visibility 0s linear .28s}
.sb-scrim.is-open{opacity:1;visibility:visible;transition:opacity .28s var(--sb-ease),visibility 0s}
/* The drawer and the scrim are both children of the header, which owns the
   stacking context they share: inside it the scrim (110) sits under the drawer
   (120), and the header as a whole is lifted clear of the page — including the
   floating WhatsApp and back-to-top buttons at 74 and 75 — while open. */
body.sb-noscroll .sb-header{z-index:95}
/* backdrop-filter makes an element the containing block for position:fixed
   children, so a pinned header would trap the drawer inside its own 77px box.
   Dropping the filter needs an opaque ground to replace the blur. */
body.sb-noscroll .sb-header{backdrop-filter:none;-webkit-backdrop-filter:none}
body.sb-noscroll .sb-header.is-pinned{background:#fff}
body.sb--dark-header.sb-noscroll .sb-header.is-pinned{background:var(--sb-deep)}
/* The burger needs no open state of its own: the drawer covers the screen and
   carries its own close button, so the burger is never visible while open. */

/* -------------------------------------------------- 06 Footer */
.sb-footer{background:var(--sb-deep);color:rgba(255,255,255,.66);padding-top:clamp(42px,4.6vw,64px);position:relative;overflow:hidden}
.sb-footer::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);background-size:26px 26px;pointer-events:none}
.sb-footer>*{position:relative}
.sb-footer__grid{display:grid;gap:30px;grid-template-columns:1fr;padding-bottom:34px}
@media(min-width:640px){.sb-footer__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.sb-footer__grid{grid-template-columns:1.4fr repeat(3,1fr)}}
@media(min-width:1160px){.sb-footer__grid{grid-template-columns:1.5fr .85fr .85fr .85fr 1.15fr}}
.sb-footer__contact-col .sb-footer__contact{margin-top:0}
.sb-footer h2,.sb-footer h3{color:#fff;font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;margin:0 0 16px;font-weight:700}
.sb-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.sb-footer a{color:rgba(255,255,255,.68);text-decoration:none;font-size:.93rem}
.sb-footer a:hover{color:var(--sb-orange)}
.sb-footer__brand .sb-logo{color:#fff;margin-bottom:16px}
.sb-footer__brand p{font-size:.93rem;line-height:1.65;max-width:38ch}
.sb-footer__contact{display:grid;gap:10px;margin-top:20px;font-size:.92rem}
.sb-footer__contact>a,.sb-footer__contact>span{display:flex;align-items:flex-start;gap:9px;line-height:1.45}
.sb-footer__contact svg{width:16px;height:16px;color:var(--sb-orange);flex:0 0 auto;margin-top:3px}
.sb-social{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.sb-social a{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:10px;transition:.18s var(--sb-ease)}
.sb-social a:hover{background:var(--sb-orange);border-color:var(--sb-orange);color:#12202b;transform:translateY(-2px)}
.sb-social svg{width:17px;height:17px}
.sb-footer__note{border-top:1px solid rgba(255,255,255,.1);padding:16px 0;font-size:.82rem;line-height:1.6;color:rgba(255,255,255,.5)}
/* Widgets dropped into the footer inherit the dark ground rather than punching
   a white card through it — including block widgets, which ignore before_title. */
.sb-footer .sb-widget{background:none;border:0;padding:0;margin-bottom:20px}
.sb-footer .sb-widget h2,.sb-footer .sb-widget h3,.sb-footer .sb-widget .wp-block-heading{
  color:#fff;font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;margin:0 0 12px;font-weight:700}
.sb-footer .sb-widget ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.sb-footer .sb-widget a{color:rgba(255,255,255,.68);font-size:.9rem}
.sb-footer .sb-widget a:hover{color:var(--sb-orange)}
.sb-footer .sb-widget select{max-width:280px}
.sb-footer__bar{border-top:1px solid rgba(255,255,255,.1);padding:16px 0 22px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;font-size:.85rem}
.sb-footer__bar ul{display:flex;flex-wrap:wrap;gap:8px 20px}

/* -------------------------------------------------- 07 Hero */
.sb-hero{position:relative;background:var(--sb-deep);color:#e7f0f7;overflow:hidden;isolation:isolate}
.sb-hero__bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.sb-hero__bg>svg{width:100%;height:100%;object-fit:cover}
.sb-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 70% at 76% 26%,rgba(var(--sb-blue-rgb),.34),transparent 62%),
             radial-gradient(46% 58% at 8% 88%,rgba(var(--sb-orange-rgb),.16),transparent 65%)}
.sb-hero__inner{display:grid;gap:clamp(30px,4vw,52px);align-items:center;grid-template-columns:1fr;padding-block:clamp(44px,5.6vw,80px)}
@media(min-width:980px){.sb-hero__inner{grid-template-columns:1.06fr .94fr}}
.sb-hero__inner--top{align-items:start}
.sb-hero__badge{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 9px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);border-radius:999px;font-size:.8rem;font-weight:600;color:#fff;margin-bottom:20px;backdrop-filter:blur(6px)}
.sb-hero__badge b{color:var(--sb-orange);font-weight:800}
.sb-hero__title{font-size:clamp(2.05rem,1.15rem + 3.1vw,3.5rem);line-height:1.07;letter-spacing:-.03em;font-weight:800;margin:0 0 20px;color:#fff;text-wrap:balance}
.sb-hero__title em{font-style:normal;color:var(--sb-orange)}
.sb-hero__text{font-size:clamp(1.02rem,.96rem + .35vw,1.18rem);color:rgba(255,255,255,.76);max-width:56ch;margin:0 0 30px;line-height:1.66}
.sb-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px}
@media(max-width:600px){
  .sb-hero__actions{flex-direction:column;align-items:stretch}
  .sb-hero__actions .sb-btn{justify-content:center;width:100%}
}
.sb-hero__proof{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:.86rem;color:rgba(255,255,255,.66);list-style:none;margin:0;padding:0}
.sb-hero__proof li{display:flex;align-items:center;gap:8px}
.sb-hero__proof svg{width:15px;height:15px;color:var(--sb-ok);flex:0 0 auto}

.sb-hero__art{position:relative}
.sb-hero__art>svg,.sb-hero__art .sb-art{width:100%;height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.4))}

/* Live route panel — the technical "proof" object beside the hero copy */
.sb-panel{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:var(--sb-radius-lg);padding:20px;backdrop-filter:blur(12px);box-shadow:var(--sb-shadow-lg)}
.sb-panel__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.11);margin-bottom:14px}
.sb-panel__title{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62);font-weight:700;margin:0}
.sb-panel__live{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;font-weight:700;color:var(--sb-ok);text-transform:uppercase;letter-spacing:.06em}
.sb-panel__live i{width:7px;height:7px;border-radius:50%;background:var(--sb-ok);animation:sb-pulse 2.6s infinite}
.sb-routes{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.sb-route{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:11px 12px;border-radius:10px;font-size:.87rem;transition:background .16s}
.sb-route:hover{background:rgba(255,255,255,.05)}
.sb-route__name{display:flex;align-items:center;gap:10px;color:#fff;font-weight:600;min-width:0}
.sb-route__flag{width:26px;height:19px;border-radius:3px;flex:0 0 auto;box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.sb-route__type{font-family:var(--sb-mono);font-size:.72rem;color:rgba(255,255,255,.55);letter-spacing:.02em}
.sb-route__stat{font-family:var(--sb-mono);font-size:.82rem;color:var(--sb-orange);font-weight:600;text-align:right}
.sb-panel__foot{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.11);font-size:.78rem;color:rgba(255,255,255,.5);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Page hero (interior pages) */
.sb-phero{background:var(--sb-deep);color:#e7f0f7;position:relative;overflow:hidden;isolation:isolate}
.sb-phero::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 100% at 82% 0%,rgba(var(--sb-blue-rgb),.32),transparent 60%)}
.sb-phero__bg{position:absolute;inset:0;z-index:-1;opacity:.55}
.sb-phero__bg>svg{width:100%;height:100%;object-fit:cover}
.sb-phero__inner{padding-block:clamp(36px,4.4vw,62px);display:grid;gap:32px;grid-template-columns:1fr;align-items:center}
@media(min-width:940px){.sb-phero__inner--art{grid-template-columns:1.1fr .9fr}}
.sb-phero h1{color:#fff;margin:0 0 16px;text-wrap:balance}
.sb-phero__text{color:rgba(255,255,255,.76);font-size:clamp(1rem,.95rem + .3vw,1.12rem);max-width:62ch;margin:0 0 26px}
.sb-phero__meta{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.85rem;color:rgba(255,255,255,.6);margin:0 0 24px;list-style:none;padding:0}
.sb-phero__meta li{display:flex;align-items:center;gap:7px}
.sb-phero__meta svg{width:15px;height:15px;color:var(--sb-orange)}

/* ---- Illustration motion -------------------------------------------------
   Animation lives in CSS rather than SMIL so a single media query can switch
   all of it off. Every illustration uses the same four primitives, staggered
   with an inline --d delay, which keeps the artwork alive without turning any
   page into a light show. */
@keyframes sb-flow{to{stroke-dashoffset:0}}
@keyframes sb-pulse-node{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.28);opacity:.45}}
@keyframes sb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes sb-blink{0%,45%{opacity:1}55%,100%{opacity:.25}}
@keyframes sb-sweep{0%{opacity:0;transform:translateX(calc(var(--dx,16px) * -1))}14%{opacity:1}86%{opacity:1}100%{opacity:0;transform:translateX(var(--dx,16px))}}

.sb-art .sb-flow{stroke-dasharray:var(--len,220);stroke-dashoffset:var(--len,220);
  animation:sb-flow var(--dur,3.2s) linear infinite;animation-delay:var(--d,0s)}
.sb-art .sb-node{transform-box:fill-box;transform-origin:center;
  animation:sb-pulse-node var(--dur,3s) ease-in-out infinite;animation-delay:var(--d,0s)}
.sb-art .sb-drift{transform-box:fill-box;transform-origin:center;
  animation:sb-float var(--dur,5s) ease-in-out infinite;animation-delay:var(--d,0s)}
.sb-art .sb-blink{animation:sb-blink var(--dur,2.4s) steps(1,end) infinite;animation-delay:var(--d,0s)}
.sb-art .sb-packet{transform-box:fill-box;transform-origin:center;
  animation:sb-sweep var(--dur,3.4s) ease-in-out infinite;animation-delay:var(--d,0s)}

@media (prefers-reduced-motion: reduce){
  .sb-art .sb-flow,.sb-art .sb-node,.sb-art .sb-drift,.sb-art .sb-blink,.sb-art .sb-packet{
    animation:none;stroke-dashoffset:0}
}

/* Conceptual illustrations: always fluid. Flag chips and inline icons keep the
   intrinsic size their own classes give them. */
.sb-art{width:100%;height:auto;display:block}
.sb-art--boxed{border-radius:var(--sb-radius-lg);overflow:hidden}
.sb-table__flag,.sb-route__flag{width:27px;height:20px;flex:0 0 auto}
.sb-icon{flex:0 0 auto}

/* -------------------------------------------------- 08 Sections & cards */
.sb-card{background:#fff;border:1px solid var(--sb-line);border-radius:var(--sb-radius);padding:26px;box-shadow:var(--sb-shadow-sm);transition:transform .2s var(--sb-ease),box-shadow .2s var(--sb-ease),border-color .2s var(--sb-ease);position:relative;display:flex;flex-direction:column}
.sb-card:hover{transform:translateY(-3px);box-shadow:var(--sb-shadow);border-color:var(--sb-navy-300)}
.sb-card__icon{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(140deg,var(--sb-blue-050),var(--sb-navy-050));border:1px solid var(--sb-line);margin-bottom:18px;color:var(--sb-blue)}
.sb-card__icon svg{width:26px;height:26px}
.sb-card--accent .sb-card__icon{background:linear-gradient(140deg,var(--sb-orange-100),#fff);color:var(--sb-orange-600)}
.sb-card h3{font-size:1.14rem;margin:0 0 9px}
.sb-card p{color:var(--sb-ink-2);font-size:.94rem;margin:0 0 16px}
.sb-card__foot{margin-top:auto;padding-top:4px}
.sb-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;padding:0;list-style:none}
.sb-tag{display:inline-block;font-size:.72rem;font-weight:650;letter-spacing:.02em;padding:4px 9px;border-radius:6px;background:var(--sb-navy-050);color:var(--sb-navy-700);border:1px solid var(--sb-line);font-family:var(--sb-mono)}
.sb-tag--live{background:var(--sb-ok-050);border-color:var(--sb-ok);color:var(--sb-ok-deep)}
.sb-card--link{text-decoration:none;color:inherit}
.sb-card--dark{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12);box-shadow:none}
.sb-card--dark:hover{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.2)}
.sb-card--dark p{color:rgba(255,255,255,.68)}
.sb-card--dark .sb-card__icon{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:var(--sb-orange)}
.sb-card--dark .sb-tag{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.8)}

.sb-feature{display:flex;gap:15px;align-items:flex-start}
.sb-feature__icon{width:42px;height:42px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;background:var(--sb-navy-050);color:var(--sb-blue);border:1px solid var(--sb-line)}
.sb-feature__icon svg{width:21px;height:21px}
.sb-feature h3{font-size:1.02rem;margin:0 0 5px}
.sb-feature p{font-size:.91rem;color:var(--sb-ink-2);margin:0}
.sb-section--dark .sb-feature__icon{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:var(--sb-orange)}
.sb-section--dark .sb-feature p{color:rgba(255,255,255,.68)}

.sb-check{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sb-check li{display:flex;gap:11px;align-items:flex-start;font-size:.95rem;color:var(--sb-ink-2)}
.sb-check svg{width:20px;height:20px;flex:0 0 auto;color:var(--sb-orange);margin-top:1px}
.sb-check strong{display:block;color:var(--sb-navy)}
.sb-section--dark .sb-check li{color:rgba(255,255,255,.72)}
.sb-section--dark .sb-check strong{color:#fff}

.sb-steps{list-style:none;counter-reset:sbstep;margin:0;padding:0;display:grid;gap:24px}
@media(min-width:820px){.sb-steps{grid-template-columns:repeat(4,1fr);gap:20px}}
.sb-steps li{counter-increment:sbstep;position:relative;padding-top:52px}
.sb-steps li::before{content:counter(sbstep,decimal-leading-zero);position:absolute;top:0;left:0;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-family:var(--sb-mono);font-size:.86rem;font-weight:700;background:var(--sb-navy);color:#fff}
.sb-steps li::after{content:"";position:absolute;top:20px;left:52px;right:-20px;height:1px;background:linear-gradient(90deg,var(--sb-line-strong),transparent)}
@media(max-width:819px){.sb-steps li::after{display:none}}
.sb-steps li:last-child::after{display:none}
.sb-steps h3{font-size:1.04rem;margin:0 0 7px}
.sb-steps p{font-size:.92rem;color:var(--sb-ink-2);margin:0}
.sb-section--dark .sb-steps li::before{background:var(--sb-orange);color:#12202b}
.sb-section--dark .sb-steps p{color:rgba(255,255,255,.68)}

/* -------------------------------------------------- 09 Data displays */
.sb-stats{display:grid;gap:1px;background:var(--sb-line);border:1px solid var(--sb-line);border-radius:var(--sb-radius);overflow:hidden;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.sb-stats{grid-template-columns:repeat(4,1fr)}}
.sb-stat{background:#fff;padding:24px 20px;text-align:center}
.sb-stat__value{font-size:clamp(1.6rem,1.2rem + 1.2vw,2.2rem);font-weight:800;letter-spacing:-.03em;color:var(--sb-navy);line-height:1;margin:0 0 7px;font-variant-numeric:tabular-nums}
.sb-stat__label{font-size:.82rem;color:var(--sb-ink-3);margin:0;line-height:1.4}
.sb-section--dark .sb-stats{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.12)}
.sb-section--dark .sb-stat{background:var(--sb-deep)}
.sb-section--dark .sb-stat__value{color:#fff}
.sb-section--dark .sb-stat__label{color:rgba(255,255,255,.6)}
.sb-stat--accent .sb-stat__value{color:var(--sb-orange)}

/* The strip appears under every hero now, so it has to sit tight against the
   dark hero above it and against whatever section follows, without adding a
   third horizontal rule to the stack. */
.sb-trustbar{border-bottom:1px solid var(--sb-line);background:var(--sb-surface);padding:16px 0}
.sb-phero + .sb-trustbar,.sb-hero + .sb-trustbar{border-top:0}
.sb-trustbar + .sb-section{padding-top:clamp(34px,3.6vw,56px)}
.sb-trustbar__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 42px}
/* Wrapped flex leaves a ragged last row on a phone; a two-up grid reads as a
   deliberate list instead. */
@media(max-width:719px){
  .sb-trustbar__inner{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;justify-items:start}
  .sb-trustbar__label{grid-column:1 / -1;justify-self:center}
  .sb-trustbar__item{font-size:.84rem}
  .sb-trustbar__item svg{width:17px;height:17px}
}
.sb-trustbar__label{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--sb-ink-3);font-weight:700}
.sb-trustbar__item{display:flex;align-items:center;gap:8px;font-size:.86rem;font-weight:650;color:var(--sb-navy)}
.sb-trustbar__item svg{width:19px;height:19px;color:var(--sb-blue)}

/* Coverage explorer */
.sb-coverage__tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:22px}
.sb-coverage__search{position:relative;flex:1 1 260px;max-width:380px}
.sb-coverage__search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--sb-ink-3);pointer-events:none}
.sb-coverage__search input{padding-left:41px}
.sb-filters{display:flex;flex-wrap:wrap;gap:7px}
.sb-filter{padding:8px 14px;border:1px solid var(--sb-line-strong);background:#fff;border-radius:999px;font-size:.85rem;font-weight:650;color:var(--sb-ink-2);cursor:pointer;transition:.16s var(--sb-ease)}
.sb-filter:hover{border-color:var(--sb-navy-300);color:var(--sb-navy)}
.sb-filter[aria-pressed=true]{background:var(--sb-navy);border-color:var(--sb-navy);color:#fff}
.sb-table-wrap{overflow-x:auto;border:1px solid var(--sb-line);border-radius:var(--sb-radius);background:#fff;-webkit-overflow-scrolling:touch}
table.sb-table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:640px}
.sb-table .sb-table thead th{text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;color:var(--sb-ink-3);font-weight:700;padding:14px 18px;background:var(--sb-surface);border-bottom:1px solid var(--sb-line);white-space:nowrap}
.sb-table tbody th{text-align:left;font-weight:600;padding:14px 18px;border-bottom:1px solid var(--sb-line);text-transform:none;letter-spacing:0;font-size:.92rem;background:none}
.sb-table tbody tr:last-child th{border-bottom:0}
.sb-table td{padding:14px 18px;border-bottom:1px solid var(--sb-line);vertical-align:middle;color:var(--sb-ink-2)}
.sb-table tr:last-child td{border-bottom:0}
.sb-table tbody tr:hover{background:var(--sb-navy-050)}
.sb-table__country{display:flex;align-items:center;gap:11px;font-weight:650;color:var(--sb-navy);white-space:nowrap;text-decoration:none}
.sb-table__country:hover{color:var(--sb-blue)}
.sb-table__flag{width:27px;height:18px;border-radius:3px;flex:0 0 auto;overflow:hidden;
  box-shadow:0 0 0 1px var(--sb-line)}
/* Real flags carry their own hairline, so they do not need the ring as well.
   On the dark route-status panel the ring would read as a light box. */
.sb-table__flag--real{box-shadow:0 1px 3px rgba(0,0,0,.35)}
.sb-table__mcc{font-family:var(--sb-mono);font-size:.8rem;color:var(--sb-ink-3)}
.sb-dot{display:inline-flex;align-items:center;gap:7px;font-size:.84rem;font-weight:650;white-space:nowrap}
.sb-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:#c7d2dc}
.sb-dot--yes{color:var(--sb-ok-deep)}.sb-dot--yes::before{background:var(--sb-ok-deep)}
.sb-dot--partial{color:#a86413}.sb-dot--partial::before{background:var(--sb-orange)}
.sb-dot--no{color:var(--sb-ink-3)}
.sb-empty{padding:40px 20px;text-align:center;color:var(--sb-ink-3);font-size:.94rem}

/* Comparison / spec table */
.sb-specs{list-style:none;margin:0;padding:0;border:1px solid var(--sb-line);border-radius:var(--sb-radius);overflow:hidden;background:#fff}
.sb-specs li{display:grid;grid-template-columns:1fr;gap:2px;padding:14px 18px;border-bottom:1px solid var(--sb-line);font-size:.93rem}
@media(min-width:540px){.sb-specs li{grid-template-columns:minmax(160px,38%) 1fr;gap:16px;align-items:baseline}}
.sb-specs li:last-child{border-bottom:0}
.sb-specs dt,.sb-specs__k{color:var(--sb-ink-3);font-weight:650;font-size:.84rem;letter-spacing:.02em}
.sb-specs__v{color:var(--sb-navy);font-weight:650;font-family:var(--sb-mono);font-size:.9rem}

/* FAQ accordion — native <details>, zero JS */
.sb-faq{display:grid;gap:10px}
.sb-faq details{border:1px solid var(--sb-line);border-radius:var(--sb-radius);background:#fff;overflow:hidden;transition:border-color .18s,box-shadow .18s}
.sb-faq details[open]{border-color:var(--sb-navy-300);box-shadow:var(--sb-shadow-sm)}
.sb-faq summary{cursor:pointer;list-style:none;padding:18px 54px 18px 20px;font-weight:650;color:var(--sb-navy);position:relative;font-size:1rem;line-height:1.5}
.sb-faq summary::-webkit-details-marker{display:none}
.sb-faq summary::after{content:"";position:absolute;right:20px;top:50%;width:11px;height:11px;margin-top:-6px;border-right:2px solid var(--sb-blue);border-bottom:2px solid var(--sb-blue);transform:rotate(45deg);transition:transform .2s var(--sb-ease)}
.sb-faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.sb-faq summary:hover{background:var(--sb-navy-050)}
.sb-faq__body{padding:0 20px 20px;color:var(--sb-ink-2);font-size:.95rem}
.sb-faq__body>*:last-child{margin-bottom:0}

/* Testimonials */
.sb-quote{background:#fff;border:1px solid var(--sb-line);border-radius:var(--sb-radius);padding:28px;display:flex;flex-direction:column;gap:18px;box-shadow:var(--sb-shadow-sm)}
.sb-quote__mark{width:30px;height:30px;color:var(--sb-orange);opacity:.9}
.sb-quote blockquote{margin:0;padding:0;border:0;font-size:1rem;color:var(--sb-ink-2);line-height:1.68}
.sb-quote__who{display:flex;align-items:center;gap:12px;margin-top:auto}
.sb-quote__avatar{width:44px;height:44px;border-radius:50%;background:var(--sb-navy-050);display:grid;place-items:center;font-weight:800;color:var(--sb-navy);font-size:.95rem;flex:0 0 auto;border:1px solid var(--sb-line)}
.sb-quote__name{font-weight:700;color:var(--sb-navy);font-size:.94rem;line-height:1.3}
.sb-quote__role{font-size:.83rem;color:var(--sb-ink-3)}

/* CTA band */
.sb-cta{position:relative;overflow:hidden;background:var(--sb-navy);color:#fff;isolation:isolate}
.sb-cta::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 120% at 88% 10%,rgba(var(--sb-orange-rgb),.3),transparent 58%),radial-gradient(60% 110% at 4% 96%,rgba(var(--sb-blue-rgb),.4),transparent 60%)}
.sb-cta__inner{padding-block:clamp(38px,4.6vw,64px);display:grid;gap:28px;align-items:center;grid-template-columns:1fr}
@media(min-width:900px){.sb-cta__inner{grid-template-columns:1.35fr auto}}
.sb-cta h2{color:#fff;margin:0 0 12px;max-width:22ch;text-wrap:balance}
.sb-cta p{color:rgba(255,255,255,.78);margin:0;max-width:56ch}
.sb-cta__actions{display:flex;flex-wrap:wrap;gap:12px}

/* Logo / integration strip */
.sb-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.sb-chip{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border:1px solid var(--sb-line);border-radius:999px;background:#fff;font-weight:650;font-size:.9rem;color:var(--sb-navy);box-shadow:var(--sb-shadow-sm)}
.sb-chip svg{width:19px;height:19px;color:var(--sb-blue)}
.sb-section--dark .sb-chip{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#fff}
.sb-section--dark .sb-chip svg{color:var(--sb-orange)}
.sb-strip--light{justify-content:flex-start;gap:9px;margin-top:22px}
.sb-strip--light .sb-chip{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.86);
  padding:8px 15px;font-size:.83rem;box-shadow:none;text-decoration:none;transition:background .16s var(--sb-ease)}
.sb-strip--light .sb-chip:hover{background:rgba(255,255,255,.14);color:#fff}
.sb-nav__handles{margin-top:22px;padding-top:18px;border-top:1px solid var(--sb-line);
  display:grid;gap:12px;font-size:.86rem;color:var(--sb-ink-2)}
.sb-nav__handles a,.sb-nav__handles>span{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.sb-nav__handles a:hover{color:var(--sb-blue)}
.sb-nav__handles svg{width:15px;height:15px;color:var(--sb-orange);flex:none}

/* -------------------------------------------------- 10 Breadcrumbs, pagination, misc */
.sb-crumbs{font-size:.83rem;color:var(--sb-ink-3);padding:14px 0}
.sb-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;align-items:center}
.sb-crumbs li{display:flex;align-items:center;gap:7px}
.sb-crumbs li+li::before{content:"/";color:var(--sb-line-strong)}
.sb-crumbs a{color:var(--sb-ink-3);text-decoration:none}
.sb-crumbs a:hover{color:var(--sb-blue)}
.sb-crumbs [aria-current]{color:var(--sb-navy);font-weight:650}
.sb-phero .sb-crumbs,.sb-hero .sb-crumbs{color:rgba(255,255,255,.55)}
.sb-phero .sb-crumbs a,.sb-hero .sb-crumbs a{color:rgba(255,255,255,.62)}
.sb-phero .sb-crumbs a:hover{color:#fff}
.sb-phero .sb-crumbs [aria-current]{color:#fff}
.sb-phero .sb-crumbs li+li::before{color:rgba(255,255,255,.28)}

.sb-pagination{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:44px}
.sb-pagination .page-numbers{display:grid;place-items:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--sb-line);border-radius:10px;text-decoration:none;font-weight:650;font-size:.9rem;color:var(--sb-navy);background:#fff}
.sb-pagination .page-numbers:hover{border-color:var(--sb-navy-300);background:var(--sb-navy-050)}
.sb-pagination .current{background:var(--sb-navy);border-color:var(--sb-navy);color:#fff}

.sb-notice{display:flex;gap:13px;padding:18px 20px;border-radius:var(--sb-radius);border:1px solid var(--sb-line);background:var(--sb-surface);font-size:.93rem;color:var(--sb-ink-2)}
.sb-notice svg{width:20px;height:20px;flex:0 0 auto;color:var(--sb-blue);margin-top:2px}
.sb-notice--warn{background:var(--sb-orange-100);border-color:rgba(var(--sb-orange-rgb),.32)}
.sb-notice--warn svg{color:var(--sb-orange-600)}
.sb-notice strong{display:block;margin-bottom:3px}

/* Floating WhatsApp */
.sb-float{position:fixed;right:18px;bottom:18px;z-index:75;display:inline-flex;align-items:center;gap:9px;padding:12px 18px 12px 14px;border-radius:999px;background:#25d366;color:#04321a;font-weight:700;font-size:.9rem;text-decoration:none;box-shadow:0 12px 30px -8px rgba(37,211,102,.6);transition:transform .18s var(--sb-ease)}
.sb-float:hover{transform:translateY(-2px);color:#04321a}
.sb-float svg{width:21px;height:21px}
@media(max-width:600px){.sb-float{padding:14px;bottom:14px;right:14px}.sb-float span{display:none}}

/* Back to top */
.sb-top{position:fixed;right:18px;bottom:88px;z-index:74;width:44px;height:44px;display:grid;
  place-items:center;border-radius:12px;border:1px solid var(--sb-line-strong);
  background:rgba(255,255,255,.94);color:var(--sb-navy);cursor:pointer;
  box-shadow:var(--sb-shadow);backdrop-filter:blur(8px);
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .2s var(--sb-ease),transform .2s var(--sb-ease),background .16s}
.sb-top.is-visible{opacity:1;transform:none;pointer-events:auto}
.sb-top:hover{background:var(--sb-navy);border-color:var(--sb-navy);color:#fff}
.sb-top[hidden]{display:none}
@media(max-width:600px){.sb-top{right:15px;bottom:80px;width:42px;height:42px}}

/* 404 / search */
.sb-blank{text-align:center;max-width:620px;margin-inline:auto;padding-block:clamp(60px,8vw,110px)}
.sb-blank__code{font-family:var(--sb-mono);font-size:clamp(3.4rem,2rem + 6vw,6rem);font-weight:800;color:var(--sb-navy-100);line-height:1;letter-spacing:-.05em;margin:0 0 8px}
.sb-blank__art{max-width:460px;margin:0 auto 24px}
.sb-blank__art svg{width:100%;height:auto;display:block}

/* Service card. Icon sits on the title's line rather than stacked above it, so
   the card starts with a name instead of an ornament; the catalogue numeral is a
   quiet editorial marker; and the whole card is the target through a stretched
   link, with the arrow purely decorative. */
.sb-svc{position:relative;display:flex;flex-direction:column;gap:10px;isolation:isolate;
  padding:24px 26px 20px;border-radius:var(--sb-radius-lg);background:#fff;
  border:1px solid var(--sb-line);overflow:hidden;
  transition:border-color .2s var(--sb-ease),box-shadow .2s var(--sb-ease),transform .2s var(--sb-ease)}
.sb-svc::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(70% 90% at 0% 0%,rgba(var(--sb-blue-rgb),.1),transparent 70%);
  transition:opacity .22s var(--sb-ease)}
.sb-svc::after{content:"";position:absolute;left:0;top:26px;bottom:26px;width:3px;border-radius:0 3px 3px 0;
  background:var(--sb-orange);transform:scaleY(0);transform-origin:top;
  transition:transform .24s var(--sb-ease)}
.sb-svc:hover{border-color:var(--sb-navy-300);box-shadow:var(--sb-shadow);transform:translateY(-3px)}
.sb-svc:hover::before{opacity:1}
.sb-svc:hover::after{transform:scaleY(1)}
.sb-svc:focus-within{border-color:var(--sb-blue)}

.sb-svc__num{position:absolute;top:16px;right:20px;font-family:var(--sb-mono);font-size:1.5rem;
  font-weight:800;color:var(--sb-navy);opacity:.09;letter-spacing:-.04em;pointer-events:none}
.sb-svc__head{display:flex;align-items:center;gap:12px;padding-right:34px}
.sb-svc__icon{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:11px;
  background:linear-gradient(140deg,var(--sb-blue-050),var(--sb-navy-050));
  border:1px solid var(--sb-line);color:var(--sb-blue);
  transition:background .2s var(--sb-ease),color .2s var(--sb-ease)}
.sb-svc__icon svg{width:20px;height:20px}
.sb-svc:hover .sb-svc__icon{background:var(--sb-navy);border-color:var(--sb-navy);color:#fff}
.sb-svc__head h3{margin:0;font-size:1.05rem;line-height:1.3}
.sb-svc__head h3 a{color:var(--sb-navy);text-decoration:none}
.sb-svc p{margin:0;color:var(--sb-ink-2);font-size:.93rem;line-height:1.6}

.sb-svc__foot{margin-top:auto;padding-top:14px;display:flex;align-items:center;
  justify-content:space-between;gap:12px}
.sb-svc__go{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;
  border:1px solid var(--sb-line-strong);color:var(--sb-navy);margin-left:auto;
  transition:background .2s var(--sb-ease),border-color .2s var(--sb-ease),color .2s var(--sb-ease)}
.sb-svc__go svg{width:16px;height:16px;transition:transform .2s var(--sb-ease)}
.sb-svc:hover .sb-svc__go{background:var(--sb-orange);border-color:var(--sb-orange);color:var(--sb-deep)}
.sb-svc:hover .sb-svc__go svg{transform:translateX(2px)}
.sb-svc__link{position:absolute;inset:0;z-index:1}
.sb-svc__link:focus-visible{outline:3px solid var(--sb-orange);outline-offset:-4px;border-radius:inherit}

.sb-svc--dark{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12)}
.sb-svc--dark .sb-svc__head h3 a{color:#fff}
.sb-svc--dark p{color:rgba(255,255,255,.68)}
.sb-svc--dark .sb-svc__num{color:#fff;opacity:.12}
.sb-svc--dark .sb-svc__icon{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:var(--sb-orange)}
.sb-svc--dark .sb-svc__go{border-color:rgba(255,255,255,.22);color:#fff}
@media (prefers-reduced-motion:reduce){
  .sb-svc,.sb-svc::before,.sb-svc::after,.sb-svc__icon,.sb-svc__go,.sb-svc__go svg{transition:none}
  .sb-svc:hover{transform:none}
}

/* Protocol picker. Radios plus :has() rather than JavaScript, so the section
   works before any script runs. Without :has() every panel stays hidden, which
   would be worse than useless, so the @supports fallback pins the first panel
   open and the picker simply becomes a legend. */
.sb-proto{margin-top:6px}
.sb-proto__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.sb-proto__radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sb-proto__tab{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:10px 17px;border-radius:999px;border:1px solid var(--sb-line-strong);background:#fff;
  font-size:.88rem;font-weight:650;color:var(--sb-ink-2);
  transition:border-color .16s var(--sb-ease),background .16s var(--sb-ease),color .16s var(--sb-ease)}
.sb-proto__tab svg{width:18px;height:18px;color:var(--sb-blue)}
.sb-proto__tab:hover{border-color:var(--sb-blue);color:var(--sb-navy)}
.sb-proto__radio:checked + .sb-proto__tab{background:var(--sb-navy);border-color:var(--sb-navy);color:#fff}
.sb-proto__radio:checked + .sb-proto__tab svg{color:var(--sb-orange)}
.sb-proto__radio:focus-visible + .sb-proto__tab{outline:3px solid var(--sb-orange);outline-offset:2px}

.sb-proto__panel{display:none;gap:26px;grid-template-columns:1fr;align-items:start;
  padding:26px;border-radius:var(--sb-radius-lg);background:#fff;border:1px solid var(--sb-line)}
@media(min-width:940px){.sb-proto__panel{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:34px;padding:30px 32px}}
.sb-proto:has(.sb-proto__radio:nth-of-type(1):checked) .sb-proto__panel:nth-child(1){display:grid}
.sb-proto:has(.sb-proto__radio:nth-of-type(2):checked) .sb-proto__panel:nth-child(2){display:grid}
.sb-proto:has(.sb-proto__radio:nth-of-type(3):checked) .sb-proto__panel:nth-child(3){display:grid}
.sb-proto:has(.sb-proto__radio:nth-of-type(4):checked) .sb-proto__panel:nth-child(4){display:grid}
.sb-proto:has(.sb-proto__radio:nth-of-type(5):checked) .sb-proto__panel:nth-child(5){display:grid}
.sb-proto:has(.sb-proto__radio:nth-of-type(6):checked) .sb-proto__panel:nth-child(6){display:grid}
.sb-proto:has(.sb-proto__radio:nth-of-type(7):checked) .sb-proto__panel:nth-child(7){display:grid}
.sb-proto:has(.sb-proto__radio:nth-of-type(8):checked) .sb-proto__panel:nth-child(8){display:grid}
@supports not (selector(:has(*))){
  .sb-proto__panel:first-child{display:grid}
}
.sb-proto__summary{margin:0 0 16px;font-size:1rem;color:var(--sb-ink-2);line-height:1.6}
.sb-proto__specs{margin:0 0 16px;display:grid;gap:0}
.sb-proto__specs>div{display:grid;gap:2px 18px;padding:9px 0;border-top:1px solid var(--sb-line)}
@media(min-width:520px){.sb-proto__specs>div{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);align-items:baseline}}
.sb-proto__specs>div:first-child{border-top:0;padding-top:0}
.sb-proto__specs dt{font-size:.82rem;font-weight:700;color:var(--sb-ink-3);
  text-transform:uppercase;letter-spacing:.06em}
.sb-proto__specs dd{margin:0;font-family:var(--sb-mono);font-size:.86rem;color:var(--sb-navy)}
.sb-proto__code{border-radius:var(--sb-radius);overflow:hidden;border:1px solid var(--sb-deep)}
.sb-proto__code pre{border-radius:0;margin:0;max-height:290px;font-size:.8rem}
.sb-proto__art{opacity:.9}
.sb-proto__art svg{width:100%;height:auto;display:block}

/* Coverage: three claim chips over a full-width table. */
.sb-covclaims{display:grid;gap:14px;margin-bottom:26px}
@media(min-width:820px){.sb-covclaims{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
.sb-covclaim{display:flex;gap:13px;align-items:flex-start;padding:18px 20px;
  border-radius:var(--sb-radius);background:var(--sb-navy-050);border:1px solid var(--sb-line)}
.sb-covclaim__icon{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:11px;
  background:#fff;border:1px solid var(--sb-line);color:var(--sb-blue)}
.sb-covclaim__icon svg{width:20px;height:20px}
.sb-covclaim strong{display:block;font-size:.96rem;color:var(--sb-navy);margin-bottom:4px}
.sb-covclaim p{margin:0;font-size:.87rem;color:var(--sb-ink-2);line-height:1.55}
.sb-covtable__foot{margin:18px 0 0;text-align:right}

/* Insights as a dated index. Rules between rows rather than boxes around them,
   so the section reads as a list of writing rather than a third card grid. */
.sb-notes{list-style:none;margin:0;padding:0;display:grid;gap:0}
.sb-note{position:relative;display:grid;gap:6px 24px;padding:22px 0;
  border-top:1px solid var(--sb-line);align-items:start;
  transition:background .18s var(--sb-ease)}
@media(min-width:820px){
  .sb-note{grid-template-columns:150px minmax(0,1fr) auto;align-items:center;
    padding:22px 18px;margin-inline:-18px;border-radius:var(--sb-radius)}
}
.sb-note:first-child{border-top:0}
.sb-note:hover{background:var(--sb-navy-050)}
.sb-note__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  font-family:var(--sb-mono);font-size:.76rem;color:var(--sb-ink-3)}
.sb-note__cat{color:var(--sb-blue);font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.sb-note__body h3{margin:0 0 5px;font-size:1.1rem;line-height:1.35}
.sb-note__body h3 a{color:var(--sb-navy);text-decoration:none}
.sb-note:hover .sb-note__body h3 a{color:var(--sb-blue)}
.sb-note__body p{margin:0;font-size:.93rem;color:var(--sb-ink-2);line-height:1.6;max-width:70ch}
.sb-note__go{display:flex;align-items:center;gap:14px;
  font-family:var(--sb-mono);font-size:.76rem;color:var(--sb-ink-3);white-space:nowrap}
.sb-note__arrow{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;
  border:1px solid var(--sb-line-strong);color:var(--sb-navy);
  transition:background .18s var(--sb-ease),border-color .18s var(--sb-ease),color .18s var(--sb-ease)}
.sb-note__arrow svg{width:16px;height:16px;transition:transform .18s var(--sb-ease)}
.sb-note:hover .sb-note__arrow{background:var(--sb-orange);border-color:var(--sb-orange);color:var(--sb-deep)}
.sb-note:hover .sb-note__arrow svg{transform:translateX(2px)}

/* The newest entry keeps a picture and gets the room for it. */
.sb-note--lead{padding-top:0}
@media(min-width:820px){
  .sb-note--lead{grid-template-columns:230px 150px minmax(0,1fr) auto;padding-block:20px}
}
.sb-note__media{display:block;overflow:hidden;border-radius:var(--sb-radius);
  aspect-ratio:16/10;background:var(--sb-navy-050)}
.sb-note__media svg,.sb-note__media img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:819px){.sb-note__media{margin-bottom:12px}}
@media (prefers-reduced-motion:reduce){
  .sb-note,.sb-note__arrow,.sb-note__arrow svg{transition:none}
}

/* -------------------------------------------------- 10c Home layout
   Three layouts that replace what used to be three near-identical card grids
   stacked down the page. */

/* "Why operators stay": sticky argument on the left, commitments scrolling on
   the right. */
.sb-why{display:grid;gap:34px}
@media(min-width:1000px){.sb-why{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:start}}
.sb-why__intro .sb-section__head{margin-bottom:22px}
@media(min-width:1000px){.sb-why__intro{position:sticky;top:104px}}
.sb-why__list{list-style:none;counter-reset:sbwhy;margin:0;padding:0;display:grid;gap:0}
.sb-why__item{counter-increment:sbwhy;position:relative;display:grid;gap:16px;
  grid-template-columns:auto minmax(0,1fr);align-items:start;
  padding:22px 0;border-top:1px solid rgba(255,255,255,.13)}
.sb-why__item:first-child{border-top:0;padding-top:0}
.sb-why__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;flex:none;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:var(--sb-orange)}
.sb-why__icon svg{width:20px;height:20px}
.sb-why__item h3{margin:0 0 6px;font-size:1.04rem;color:#fff;
  display:flex;align-items:baseline;gap:11px}
.sb-why__item h3::before{content:counter(sbwhy,decimal-leading-zero);
  font-family:var(--sb-mono);font-size:.74rem;font-weight:700;color:var(--sb-orange);opacity:.85}
.sb-why__item p{margin:0;font-size:.94rem;color:rgba(255,255,255,.7);line-height:1.6}

/* Onboarding steps on a continuous rail rather than four detached boxes. */
@media(min-width:820px){
  .sb-steps--rail{position:relative}
  .sb-steps--rail::before{content:"";position:absolute;top:20px;left:20px;right:20px;height:1px;
    background:linear-gradient(90deg,var(--sb-line-strong),var(--sb-orange),var(--sb-line-strong))}
  .sb-steps--rail li::after{display:none}
  .sb-steps--rail li::before{box-shadow:0 0 0 6px var(--sb-bg,#fff)}
}

/* FAQ: the question set is the content, so it gets the wide column. */
.sb-faqsplit{display:grid;gap:30px}
@media(min-width:1000px){.sb-faqsplit{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}}
@media(min-width:1000px){.sb-faqsplit__intro{position:sticky;top:104px}}
.sb-faqsplit__intro .sb-section__head{margin-bottom:20px}
.sb-faqsplit__ask{display:flex;gap:14px;padding:20px 22px;border-radius:var(--sb-radius-lg);
  background:#fff;border:1px solid var(--sb-line)}
.sb-faqsplit__ask-icon{display:grid;place-items:center;width:44px;height:44px;flex:none;
  border-radius:13px;background:rgba(var(--sb-orange-rgb),.12);color:var(--sb-orange)}
.sb-faqsplit__ask strong{display:block;font-size:.98rem;color:var(--sb-navy)}
.sb-faqsplit__ask p{margin:5px 0 10px;font-size:.9rem;color:var(--sb-ink-2)}

/* Service specification as a card deck rather than a list beside a paragraph.
   Engineers want the values; the explanation of why we publish them was for us. */
.sb-specgrid{display:grid;gap:1px;margin:0;background:var(--sb-line);
  border:1px solid var(--sb-line);border-radius:var(--sb-radius);overflow:hidden;
  grid-template-columns:1fr}
@media(min-width:640px){.sb-specgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.sb-specgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sb-specgrid__cell{background:#fff;padding:20px 22px;display:flex;flex-direction:column;gap:7px}
.sb-specgrid dt{font-family:var(--sb-mono);font-size:.68rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--sb-ink-3)}
.sb-specgrid dd{margin:0;font-size:.95rem;font-weight:600;color:var(--sb-navy);line-height:1.5}

/* Service benefits: wide rows with the icon inline, so they do not repeat the
   shape of the product cards higher up the same page. */
.sb-benefits{display:grid;gap:16px}
@media(min-width:820px){.sb-benefits{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 26px}}
.sb-benefit{position:relative;padding:22px 24px 22px 26px;border-radius:var(--sb-radius-lg);
  background:#fff;border:1px solid var(--sb-line);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 15px;align-items:start}
.sb-benefit__icon{grid-row:span 2;display:grid;place-items:center;width:42px;height:42px;
  border-radius:12px;background:var(--sb-blue-050);border:1px solid var(--sb-line);color:var(--sb-blue)}
.sb-benefit__icon svg{width:22px;height:22px}
.sb-benefit h3{margin:0;font-size:1.02rem;line-height:1.35;color:var(--sb-navy)}
.sb-benefit p{margin:0;font-size:.92rem;color:var(--sb-ink-2);line-height:1.6}

/* Contact desks. Each says who it is for before it says how to reach it, and
   the incident desk is marked so an outage does not get mailed to sales. */
.sb-desk{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;
  padding:22px 24px;border-radius:var(--sb-radius-lg);background:#fff;border:1px solid var(--sb-line);
  transition:border-color .18s var(--sb-ease)}
.sb-desk:hover{border-color:var(--sb-navy-300)}
.sb-desk__icon{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:13px;
  background:var(--sb-blue-050);border:1px solid var(--sb-line);color:var(--sb-blue)}
.sb-desk__icon svg{width:20px;height:20px}
.sb-desk__for{margin:0 0 3px;font-family:var(--sb-mono);font-size:.66rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--sb-ink-3)}
.sb-desk__body h3{margin:0 0 6px;font-size:1.04rem;color:var(--sb-navy)}
.sb-desk__text{margin:0 0 10px;font-size:.92rem;color:var(--sb-ink-2);line-height:1.55}
.sb-desk__link{display:flex;align-items:center;gap:9px;font-size:.92rem;font-weight:650;
  color:var(--sb-blue);text-decoration:none;padding:3px 0}
.sb-desk__link svg{width:15px;height:15px;flex:none}
.sb-desk__link:hover{text-decoration:underline}
.sb-desk__address{font-style:normal;color:var(--sb-ink-2);font-size:.94rem;line-height:1.6}
.sb-desk--urgent{border-color:rgba(var(--sb-orange-rgb),.4);background:linear-gradient(160deg,#fff9f3,#fff)}
.sb-desk--urgent .sb-desk__icon{background:rgba(var(--sb-orange-rgb),.13);
  border-color:rgba(var(--sb-orange-rgb),.3);color:var(--sb-orange-600)}
.sb-desk--quiet{background:var(--sb-navy-050)}

/* Numbered headings for long editorial pages that carry a contents rail. */
.sb-prose--numbered{counter-reset:sbsec}
.sb-prose--numbered h2{counter-increment:sbsec;position:relative;
  padding-top:.6em;margin-top:2.4em;border-top:1px solid var(--sb-line)}
.sb-prose--numbered h2:first-child{margin-top:0;padding-top:0;border-top:0}
.sb-prose--numbered h2::before{content:counter(sbsec,decimal-leading-zero);
  display:block;margin-bottom:6px;font-family:var(--sb-mono);font-size:.72rem;
  font-weight:700;letter-spacing:.12em;color:var(--sb-orange)}
.sb-prose--numbered>p:first-of-type{font-size:1.14rem;line-height:1.7;color:var(--sb-navy-700)}

/* -------------------------------------------------- 10a Bento
   The services grid. Two lead tiles at double width carrying their own
   illustration, then compact cards. The lead tile crops its artwork rather than
   scaling it down, so the illustration reads as a texture at the edge of the
   card instead of a shrunken diagram nobody can parse. */
.sb-bento{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:700px){.sb-bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1060px){
  .sb-bento{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .sb-bento__lead{grid-column:span 2}
}
.sb-bento__lead{position:relative;display:flex;overflow:hidden;
  border-radius:var(--sb-radius-lg);background:#fff;border:1px solid var(--sb-line-strong);
  transition:border-color .18s var(--sb-ease),box-shadow .18s var(--sb-ease),transform .18s var(--sb-ease)}
.sb-bento__lead:hover{border-color:var(--sb-blue);box-shadow:var(--sb-shadow);transform:translateY(-2px)}
.sb-bento__lead-body{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;
  gap:11px;padding:28px 30px;flex:1 1 auto;min-width:0}
.sb-bento__lead-body h3{margin:0;font-size:1.24rem;line-height:1.28}
.sb-bento__lead-body h3 a{color:var(--sb-navy);text-decoration:none}
.sb-bento__lead-body h3 a:hover{color:var(--sb-blue)}
.sb-bento__lead-body p{margin:0;color:var(--sb-ink-2);font-size:.95rem;max-width:40ch}
@media(min-width:1060px){.sb-bento__lead-body{max-width:62%}}
.sb-bento__lead-body .sb-link{margin-top:auto;padding-top:6px}
.sb-bento__lead-body .sb-card__tags{margin:0}
.sb-bento__lead-art{position:absolute;inset:0 -14% -20% 52%;z-index:0;opacity:.26;pointer-events:none;
  -webkit-mask-image:linear-gradient(100deg,transparent,#000 58%);mask-image:linear-gradient(100deg,transparent,#000 58%)}
.sb-bento__lead-art svg{width:100%;height:100%;object-fit:cover}
@media(max-width:860px){.sb-bento__lead-art{display:none}}
.sb-bento .sb-svc{margin:0}
@media (prefers-reduced-motion:reduce){
  .sb-bento__lead{transition:none}
  .sb-bento__lead:hover{transform:none}
}

/* -------------------------------------------------- 10b Offers
   The one deliberately loud band on the site. It earns the volume by being
   time-limited and specific; everything else stays sober. The glow is a single
   radial gradient rather than an image, and the lead card is the only place on
   the site where orange is used as a surface instead of an accent. */
/* -------------------------------------------------- 10b The offer band
   Light and warm, deliberately. The first version of this band was dark navy
   with an aurora, which put it two sections away from a hero built the same way
   and made the page look like it repeated itself. Inverting it solves that: a
   warm ivory ground is the only one of its kind on the page, so the offer reads
   as an interruption rather than as more of the hero. The quantity still carries
   the section; it just does it in orange on light now. */
.sb-promo{position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(168deg,#fff8f0,#fdf3e8 46%,#f7f4ef);
  padding-block:clamp(46px,5.4vw,84px);
  border-block:1px solid rgba(var(--sb-orange-rgb),.22)}
.sb-promo__aurora{position:absolute;inset:-40% -20%;z-index:-2;
  background:
    radial-gradient(34% 44% at 16% 26%,rgba(var(--sb-orange-rgb),.3),transparent 66%),
    radial-gradient(36% 46% at 84% 72%,rgba(var(--sb-blue-rgb),.16),transparent 66%);
  animation:sb-aurora 30s ease-in-out infinite alternate}
.sb-promo__grid{position:absolute;inset:0;z-index:-1;opacity:.7;
  background-image:linear-gradient(rgba(var(--sb-navy-rgb),.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--sb-navy-rgb),.05) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(72% 80% at 50% 50%,#000,transparent);
  mask-image:radial-gradient(72% 80% at 50% 50%,#000,transparent)}
@keyframes sb-aurora{
  from{transform:translate3d(-2%,-1%,0) scale(1)}
  to{transform:translate3d(3%,2%,0) scale(1.07)}
}

.sb-promo__inner{display:grid;gap:36px;align-items:center}
@media(min-width:1000px){.sb-promo__inner{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:60px}}

.sb-promo__eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;
  font-family:var(--sb-mono);font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sb-orange-600)}
.sb-promo__live{width:8px;height:8px;border-radius:50%;background:var(--sb-ok-deep);
  box-shadow:0 0 0 0 rgba(var(--sb-ok-rgb),.6);animation:sb-pulse 2.6s infinite}

/* The quantity. Gradient-filled with a solid colour underneath, so a browser
   that cannot clip a background to text still gets orange rather than nothing. */
.sb-promo__figure{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;margin:0 0 14px}
.sb-promo__value{font-size:clamp(3.4rem,2rem + 6.4vw,6.4rem);font-weight:800;line-height:.88;
  letter-spacing:-.055em;color:var(--sb-orange);
  background:linear-gradient(158deg,var(--sb-orange) 8%,var(--sb-orange-600) 62%,var(--sb-navy));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  padding-right:.06em}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .sb-promo__value{-webkit-text-fill-color:currentColor;background:none}
}
.sb-promo__unit{font-size:clamp(.95rem,.9rem + .2vw,1.08rem);font-weight:650;
  color:var(--sb-ink-2);max-width:22ch;line-height:1.35}

.sb-promo__title{margin:0 0 12px;color:var(--sb-navy);
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem);line-height:1.2;letter-spacing:-.02em;max-width:20ch}
.sb-promo__text{margin:0 0 26px;color:var(--sb-ink-2);font-size:1.02rem;line-height:1.65;max-width:56ch}

.sb-promo__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.sb-promo__more{display:inline-flex;align-items:center;gap:8px;font-weight:650;font-size:.94rem;
  color:var(--sb-navy);text-decoration:none;border-bottom:1px solid var(--sb-line-strong);
  padding-bottom:2px;transition:color .16s var(--sb-ease),border-color .16s var(--sb-ease)}
.sb-promo__more svg{width:15px;height:15px;color:var(--sb-orange);transition:transform .16s var(--sb-ease)}
.sb-promo__more:hover{color:var(--sb-blue);border-color:var(--sb-blue)}
.sb-promo__more:hover svg{transform:translateX(3px)}
.sb-promo__ends{display:inline-flex;align-items:center;gap:8px;margin:20px 0 0;
  font-family:var(--sb-mono);font-size:.76rem;color:var(--sb-ink-3)}
.sb-promo__ends svg{width:14px;height:14px;color:var(--sb-orange)}

/* The panel: how the offer scales, or what it includes. */
.sb-promo__panel{padding:26px 28px;border-radius:var(--sb-radius-lg);background:#fff;
  border:1px solid rgba(var(--sb-orange-rgb),.26);
  box-shadow:0 26px 54px -34px rgba(var(--sb-navy-rgb),.45)}
.sb-promo__panel-head{margin:0 0 16px;font-family:var(--sb-mono);font-size:.72rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sb-ink-3)}
.sb-ladder{list-style:none;counter-reset:sbrung;margin:0;padding:0;display:grid;gap:0}
.sb-ladder li{counter-increment:sbrung;position:relative;display:grid;gap:3px;
  padding:14px 0 14px 30px;border-top:1px solid var(--sb-line)}
.sb-ladder li:first-child{border-top:0;padding-top:2px}
.sb-ladder li::before{content:"";position:absolute;left:6px;top:50%;width:9px;height:9px;
  border-radius:50%;transform:translateY(-50%);
  background:var(--sb-orange);opacity:calc(.35 + (.22 * counter(sbrung)))}
.sb-ladder li::after{content:"";position:absolute;left:10px;top:0;bottom:0;width:1px;
  background:var(--sb-line);z-index:-1}
.sb-ladder li:first-child::after{top:50%}
.sb-ladder li:last-child::after{bottom:50%}
.sb-ladder__qty{font-family:var(--sb-mono);font-size:.88rem;font-weight:700;color:var(--sb-navy);
  font-variant-numeric:tabular-nums}
.sb-ladder__reward{font-size:.9rem;color:var(--sb-ink-2);line-height:1.45}

.sb-promo__points{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.sb-promo__points li{display:flex;gap:11px;align-items:flex-start;font-size:.95rem;
  color:var(--sb-ink-2);line-height:1.5}
.sb-promo__points svg{width:15px;height:15px;flex:none;margin-top:4px;color:var(--sb-ok-deep)}

@media (prefers-reduced-motion:reduce){
  .sb-promo__aurora,.sb-promo__live{animation:none}
  .sb-promo__more,.sb-promo__more svg{transition:none}
}

/* -------------------------------------------------- 10b2 Offer cards
   The offers page. A dark band under the dark hero, with the offers as glass
   cards over it: the featured one takes the larger tile, the rest sit beside it.
   Each card carries its own tiers and conditions, so nothing a buyer compares
   between offers is hidden behind a link. */
.sb-offers{position:relative;overflow:hidden;background:var(--sb-deep);color:#e7f0f7;isolation:isolate}
.sb-offers__glow{position:absolute;inset:-20% -10% auto -10%;height:120%;z-index:-1;
  background:radial-gradient(46% 58% at 20% 12%,rgba(var(--sb-orange-rgb),.28),transparent 62%),
             radial-gradient(50% 60% at 84% 78%,rgba(var(--sb-blue-rgb),.32),transparent 64%)}
.sb-offers--page{padding-top:clamp(34px,3.6vw,56px)}

.sb-offers__all{display:grid;gap:20px;grid-template-columns:1fr;align-items:start}
@media(min-width:820px){.sb-offers__all{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1160px){
  .sb-offers__all{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  .sb-offers__all>.sb-offer--lead{grid-column:span 1;grid-row:span 2}
}
@media(min-width:820px) and (max-width:1159px){
  .sb-offers__all>.sb-offer--lead{grid-column:1 / -1}
}

.sb-offer{position:relative;display:flex;flex-direction:column;gap:12px;height:100%;
  padding:24px 26px;border-radius:var(--sb-radius-lg);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  transition:border-color .2s var(--sb-ease),transform .2s var(--sb-ease)}
.sb-offer:hover{border-color:rgba(255,255,255,.28);transform:translateY(-2px)}
.sb-offer--lead{padding:30px 32px;background:rgba(255,255,255,.1);
  border-color:rgba(var(--sb-orange-rgb),.5);
  box-shadow:0 28px 66px -34px rgba(0,0,0,.85)}

.sb-offer__top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sb-offer__icon{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:12px;
  background:rgba(var(--sb-orange-rgb),.16);color:var(--sb-orange)}
.sb-offer--lead .sb-offer__icon{width:48px;height:48px;background:var(--sb-orange);color:var(--sb-deep)}
.sb-offer__badge{display:inline-flex;align-items:center;padding:5px 11px;border-radius:999px;
  font-family:var(--sb-mono);font-size:.66rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.85)}
.sb-offer--lead .sb-offer__badge{background:rgba(var(--sb-orange-rgb),.2);
  border-color:rgba(var(--sb-orange-rgb),.5);color:var(--sb-orange)}

.sb-offer__value{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:2px 0 0}
.sb-offer__value span{font-size:clamp(1.9rem,1.4rem + 1.6vw,2.5rem);font-weight:800;line-height:1;
  letter-spacing:-.035em;color:var(--sb-orange)}
.sb-offer--lead .sb-offer__value span{font-size:clamp(2.4rem,1.7rem + 2.4vw,3.3rem)}
.sb-offer__value small{font-size:.85rem;color:rgba(255,255,255,.64);font-weight:600;max-width:22ch}

.sb-offer__title{margin:0;font-size:1.1rem;line-height:1.3}
.sb-offer--lead .sb-offer__title{font-size:1.38rem}
.sb-offer__title a{color:#fff;text-decoration:none}
.sb-offer__title a:hover{color:var(--sb-orange)}
.sb-offer__text{margin:0;color:rgba(255,255,255,.86);font-size:.93rem;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sb-offer--lead .sb-offer__text{-webkit-line-clamp:4}

.sb-offer__points{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.92rem}
.sb-offer__points li{display:flex;gap:10px;align-items:flex-start;color:#fff;line-height:1.5;font-weight:550}
.sb-offer__points svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--sb-ok);stroke-width:2.6}

.sb-offer__subhead{margin:0 0 8px;font-family:var(--sb-mono);font-size:.66rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.sb-offer__tiers{padding:16px 18px;border-radius:var(--sb-radius);
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.1)}
.sb-offer__terms{display:flex;gap:9px;align-items:flex-start;margin:0;
  font-size:.83rem;color:rgba(255,255,255,.72);line-height:1.55}
.sb-offer__terms svg{width:14px;height:14px;flex:none;margin-top:3px;color:var(--sb-orange)}

.sb-offer__foot{margin-top:auto;padding-top:14px;display:flex;flex-wrap:wrap;
  align-items:center;gap:12px 18px}
.sb-offer__ends{display:inline-flex;align-items:center;gap:7px;margin:0;
  font-family:var(--sb-mono);font-size:.74rem;color:rgba(255,255,255,.72)}
.sb-offer__ends svg{width:14px;height:14px;color:var(--sb-orange)}
.sb-offer .sb-btn--ghost{--btn-fg:#fff;--btn-bd:rgba(255,255,255,.3);--btn-bg:transparent}
.sb-offer .sb-btn--ghost:hover{--btn-bg:rgba(255,255,255,.12);--btn-bd:#fff}

/* The same cards on a light section, used under a single offer. */
.sb-offers__all--light .sb-offer{background:#fff;border-color:var(--sb-line);backdrop-filter:none}
.sb-offers__all--light .sb-offer__title a{color:var(--sb-navy)}
.sb-offers__all--light .sb-offer__text{color:var(--sb-ink-2)}
.sb-offers__all--light .sb-offer__points li{color:var(--sb-ink-2)}
.sb-offers__all--light .sb-offer__points svg{color:var(--sb-ok-deep)}
.sb-offers__all--light .sb-offer__badge{background:var(--sb-navy-050);
  border-color:var(--sb-line);color:var(--sb-navy-700)}
.sb-offers__all--light .sb-offer__tiers{background:var(--sb-navy-050);border-color:var(--sb-line)}
.sb-offers__all--light .sb-offer__subhead,
.sb-offers__all--light .sb-offer__terms,
.sb-offers__all--light .sb-offer__ends{color:var(--sb-ink-3)}
.sb-offers__all--light .sb-offer .sb-btn--ghost{--btn-fg:var(--sb-navy);--btn-bd:var(--sb-line-strong)}
.sb-offers__all--light .sb-tiers__row{border-top-color:var(--sb-line)}
.sb-offers__all--light .sb-tiers dd{color:var(--sb-ink-2)}
.sb-offers__all--light .sb-tiers dd small,
.sb-offers__all--light .sb-tiers__more{color:var(--sb-ink-3)}

@media (prefers-reduced-motion:reduce){
  .sb-offer{transition:none}
  .sb-offer:hover{transform:none}
}

/* Volume tiers. Offers here are usually quantity based, so the bands are the
   substance of the offer, not a footnote: a monospace quantity on the left so
   the figures line up down the column, and the reward in prose on the right. */
.sb-tiers{margin:6px 0 0;display:grid;gap:0}
.sb-tiers__row{display:grid;gap:2px 16px;padding:9px 0;border-top:1px solid rgba(255,255,255,.12)}
@media(min-width:520px){.sb-tiers__row{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:baseline}}
.sb-tiers__row:first-child{border-top:0;padding-top:2px}
.sb-tiers dt{font-family:var(--sb-mono);font-size:.84rem;font-weight:700;color:var(--sb-orange);
  font-variant-numeric:tabular-nums}
.sb-tiers dd{margin:0;font-size:.92rem;color:rgba(255,255,255,.9)}
.sb-tiers dd small{display:block;font-size:.78rem;color:rgba(255,255,255,.66);margin-top:2px}
.sb-tiers__more{margin:8px 0 0;font-family:var(--sb-mono);font-size:.74rem;color:rgba(255,255,255,.66)}

/* On a light page the same list needs the light-ground colours. */
.sb-tiers-block{margin:0 0 34px;padding:24px 26px;border-radius:var(--sb-radius-lg);
  background:var(--sb-navy-050);border:1px solid var(--sb-line)}
.sb-tiers-block h2{margin:0 0 12px;font-size:1.16rem}
.sb-tiers-block .sb-tiers__row{border-top-color:var(--sb-line)}
.sb-tiers-block .sb-tiers dd{color:var(--sb-ink-2)}
.sb-tiers-block .sb-tiers dd small{color:var(--sb-ink-3)}
.sb-tiers-block .sb-tiers__more{color:var(--sb-ink-3)}

/* The single-offer hero shows the quantity instead of an illustration. */
.sb-offer__hero-value{position:relative;display:grid;place-items:center;gap:10px;
  padding:52px 34px;text-align:center;overflow:hidden;
  border-radius:var(--sb-radius-lg);background:rgba(255,255,255,.06);
  border:1px solid rgba(var(--sb-orange-rgb),.4);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.sb-offer__hero-value::before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 70% at 50% 20%,rgba(var(--sb-orange-rgb),.28),transparent 70%)}
.sb-offer__hero-value span{position:relative;font-size:clamp(3rem,2rem + 4vw,4.6rem);
  font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--sb-orange);
  background:linear-gradient(150deg,#fff 6%,var(--sb-orange) 52%,var(--sb-orange-600));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .sb-offer__hero-value span{-webkit-text-fill-color:currentColor;background:none}
}
.sb-offer__hero-value small{position:relative;font-size:.95rem;color:rgba(255,255,255,.72);max-width:26ch}
.sb-card .sb-offer__points{gap:10px}
.sb-card .sb-offer__points li{font-size:.93rem;color:var(--sb-ink-2)}
.sb-card .sb-offer__points svg{color:var(--sb-ok-deep)}

/* -------------------------------------------------- 11 Services & blog */
.sb-service-nav{position:sticky;top:76px;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--sb-line)}
.sb-service-nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
.sb-service-nav ul::-webkit-scrollbar{display:none}
.sb-service-nav a{display:block;padding:15px 14px;font-size:.88rem;font-weight:650;color:var(--sb-ink-2);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}
.sb-service-nav a:hover,.sb-service-nav a.is-active{color:var(--sb-navy);border-bottom-color:var(--sb-orange)}

.sb-toc{border:1px solid var(--sb-line);border-radius:var(--sb-radius);background:var(--sb-surface);padding:20px 22px;margin:0 0 32px}
.sb-toc h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.11em;color:var(--sb-ink-3);margin:0 0 12px}
.sb-toc ol{margin:0;padding-left:20px;display:grid;gap:8px;font-size:.92rem}
.sb-toc a{text-decoration:none;color:var(--sb-navy)}
.sb-toc a:hover{color:var(--sb-blue);text-decoration:underline}
.sb-toc ol ol{margin-top:8px;padding-left:18px;font-size:.88rem}

/* Legal document layout: sticky contents rail beside the prose */
.sb-doc{display:grid;gap:34px;grid-template-columns:1fr;align-items:start}
@media(min-width:1000px){.sb-doc{grid-template-columns:286px minmax(0,1fr);gap:52px}}
.sb-doc--plain{grid-template-columns:1fr}
.sb-doc__railinner{position:sticky;top:96px}
.sb-doc__rail .sb-toc{margin:0}
@media(min-width:1000px){
  .sb-doc__rail .sb-toc{max-height:calc(100vh - 220px);overflow:auto;scrollbar-width:thin}
}
.sb-doc__ask{display:flex;align-items:center;gap:10px;margin-top:14px;padding:14px 16px;
  border:1px solid var(--sb-line);border-radius:var(--sb-radius);background:#fff;
  font-size:.88rem;font-weight:600;color:var(--sb-navy);text-decoration:none;
  transition:border-color .16s var(--sb-ease),box-shadow .16s var(--sb-ease)}
.sb-doc__ask svg{width:16px;height:16px;color:var(--sb-orange);flex:none}
.sb-doc__ask:hover{border-color:var(--sb-blue);box-shadow:var(--sb-shadow)}
.sb-doc .sb-prose{max-width:74ch}
.sb-doc--plain .sb-prose{max-width:none}
.sb-prose--legal{max-width:78ch}
.sb-prose--legal h2{font-size:1.22rem;padding-top:.35em;border-top:1px solid var(--sb-line);margin-top:2.2em}
.sb-prose--legal h2:first-child{border-top:0;margin-top:0;padding-top:0}

/* Code sample with a labelled bar */
.sb-codeblock{margin-top:34px;border-radius:var(--sb-radius);overflow:hidden;border:1px solid var(--sb-deep)}
.sb-codeblock__bar{display:flex;align-items:center;gap:9px;padding:11px 18px;background:#0b1a24;
  color:rgba(255,255,255,.72);font-family:var(--sb-mono);font-size:.76rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase}
.sb-codeblock__bar svg{width:16px;height:16px;color:var(--sb-orange)}
.sb-codeblock pre{border-radius:0;margin:0}
.sb-stamp{display:inline-flex;align-items:center;gap:8px;margin:0;padding:7px 13px;border-radius:999px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  font-family:var(--sb-mono);font-size:.76rem;color:rgba(255,255,255,.72)}
.sb-stamp svg{width:15px;height:15px;color:var(--sb-orange)}

.sb-post-meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.85rem;color:var(--sb-ink-3);list-style:none;margin:0 0 26px;padding:0}
.sb-post-meta li{display:flex;align-items:center;gap:7px}
.sb-post-meta svg{width:15px;height:15px;opacity:.7}
.sb-phero .sb-post-meta{color:rgba(255,255,255,.62)}

.sb-prose{font-size:1.03rem;line-height:1.75;color:var(--sb-ink-2);max-width:74ch}
.sb-prose h2{margin-top:2em;scroll-margin-top:110px}
.sb-prose h3{margin-top:1.6em;scroll-margin-top:110px}
.sb-prose ul,.sb-prose ol{padding-left:22px;margin:0 0 1.2em}
.sb-prose li{margin-bottom:.5em}
.sb-prose li::marker{color:var(--sb-orange)}
.sb-prose img,.sb-prose figure{border-radius:var(--sb-radius);margin:2em 0}
.sb-prose figcaption{font-size:.84rem;color:var(--sb-ink-3);margin-top:9px;text-align:center}
.sb-prose table{width:100%;border-collapse:collapse;margin:2em 0;font-size:.94rem}
.sb-prose th{background:var(--sb-surface);text-align:left;padding:12px 15px;border:1px solid var(--sb-line);color:var(--sb-navy);font-weight:700}
.sb-prose td{padding:12px 15px;border:1px solid var(--sb-line)}
.sb-prose a{font-weight:600}
.sb-prose>*:first-child{margin-top:0}

.sb-blog-layout{display:grid;gap:clamp(32px,4vw,56px);grid-template-columns:1fr}
@media(min-width:1040px){.sb-blog-layout{grid-template-columns:minmax(0,1fr) 300px}}
.sb-blog-side{position:sticky;top:100px;align-self:start;display:grid;gap:22px}
.sb-widget{border:1px solid var(--sb-line);border-radius:var(--sb-radius);padding:20px;background:#fff}
.sb-widget__title{font-size:.78rem;text-transform:uppercase;letter-spacing:.11em;color:var(--sb-ink-3);margin:0 0 14px}
.sb-widget ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:.92rem}
.sb-widget a{text-decoration:none;color:var(--sb-navy)}
.sb-widget a:hover{color:var(--sb-blue)}

.sb-postcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--sb-line);border-radius:var(--sb-radius);overflow:hidden;transition:transform .2s var(--sb-ease),box-shadow .2s var(--sb-ease)}
.sb-postcard:hover{transform:translateY(-3px);box-shadow:var(--sb-shadow)}
.sb-postcard__media{aspect-ratio:16/10;background:var(--sb-navy-050);overflow:hidden;position:relative}
.sb-postcard__media img,.sb-postcard__media svg{width:100%;height:100%;object-fit:cover}
.sb-postcard__body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.sb-postcard__cat{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sb-blue)}
.sb-postcard h3{font-size:1.08rem;margin:0;line-height:1.35}
.sb-postcard h3 a{color:var(--sb-navy);text-decoration:none}
.sb-postcard h3 a:hover{color:var(--sb-blue)}
.sb-postcard p{font-size:.91rem;color:var(--sb-ink-2);margin:0}
.sb-postcard__foot{margin-top:auto;padding-top:12px;display:flex;gap:14px;font-size:.8rem;color:var(--sb-ink-3);border-top:1px solid var(--sb-line)}

.sb-share{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:36px;padding-top:24px;border-top:1px solid var(--sb-line)}
.sb-share span{font-size:.82rem;font-weight:700;color:var(--sb-ink-3);text-transform:uppercase;letter-spacing:.09em}
.sb-share a{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--sb-line);border-radius:10px;color:var(--sb-navy);transition:.16s}
.sb-share a:hover{background:var(--sb-navy);border-color:var(--sb-navy);color:#fff}
.sb-share svg{width:17px;height:17px}

/* -------------------------------------------------- 12 Contact Form 7 */
.sb-form{background:#fff;border:1px solid var(--sb-line);border-radius:var(--sb-radius-lg);padding:clamp(22px,3vw,34px);box-shadow:var(--sb-shadow)}
.sb-form__title{font-size:1.28rem;margin:0 0 6px}
.sb-form__note{font-size:.88rem;color:var(--sb-ink-3);margin:0 0 22px}
.sb-form .wpcf7-form{display:grid;gap:16px}
.sb-form .sb-form__row{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:600px){.sb-form .sb-form__row--2{grid-template-columns:1fr 1fr}}
.wpcf7 form .wpcf7-response-output{margin:14px 0 0;padding:13px 16px;border-radius:calc(var(--sb-radius) - 5px);border-width:1px;font-size:.9rem}
.wpcf7 form.sent .wpcf7-response-output{border-color:var(--sb-ok-deep);background:var(--sb-ok-050);color:var(--sb-ok-deep)}
.wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.failed .wpcf7-response-output{border-color:#e05252;background:rgba(224,82,82,.07);color:#a02b2b}
.wpcf7-not-valid-tip{color:#c0392b;font-size:.82rem;margin-top:5px;display:block}
.wpcf7-not-valid{border-color:#e05252!important}
.wpcf7-spinner{margin:0 0 0 10px}
.sb-form .wpcf7-list-item{margin:0}
.sb-form .wpcf7-acceptance label,.sb-form .wpcf7-checkbox label{display:flex;gap:10px;align-items:flex-start;font-weight:450;font-size:.86rem;color:var(--sb-ink-3);line-height:1.55;cursor:pointer}
.sb-form input[type=checkbox]{width:17px;height:17px;margin-top:2px;accent-color:var(--sb-orange);flex:0 0 auto}
.sb-form .sb-form__hint{font-size:.8rem;color:var(--sb-ink-3);margin:5px 0 0}
.sb-form__badges{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;padding-top:18px;border-top:1px solid var(--sb-line);font-size:.79rem;color:var(--sb-ink-3)}
.sb-form__badges span{display:inline-flex;align-items:center;gap:6px}
.sb-form__badges svg{width:14px;height:14px;color:var(--sb-ok-deep)}

/* -------------------------------------------------- 13 Utilities & a11y */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal}
.screen-reader-text:focus{background:#fff;clip:auto;clip-path:none;color:var(--sb-navy);display:block;font-size:.9rem;height:auto;left:6px;padding:14px 22px;top:6px;width:auto;z-index:100000;border-radius:8px;box-shadow:var(--sb-shadow)}
.sb-hidden{display:none!important}
.sb-center{text-align:center}
.sb-mt-0{margin-top:0}.sb-mb-0{margin-bottom:0}
.sb-mt-lg{margin-top:28px}
.sb-noscroll{overflow:hidden}
.sb-reveal{opacity:0;transform:translateY(14px)}
.sb-reveal.is-in{opacity:1;transform:none;transition:opacity .55s var(--sb-ease),transform .55s var(--sb-ease)}
.alignwide{max-width:1100px;margin-inline:auto}
.alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}
.wp-caption{max-width:100%}
.aligncenter{margin-inline:auto}
.alignleft{float:left;margin:0 24px 18px 0}
.alignright{float:right;margin:0 0 18px 24px}
@media(max-width:600px){.alignleft,.alignright{float:none;margin:0 0 18px}}

/* ---------------------------------------------------------------------
   17. Blog archive with a rail

   The archive main column and the sticky rail. The rail is a real column
   only from 1040px up; below that it drops under the posts and the
   widgets sit side by side while there is room for two, then stack.
   --------------------------------------------------------------------- */
.sb-blog{display:grid;gap:clamp(32px,4vw,52px);grid-template-columns:1fr;align-items:start}
@media(min-width:1040px){.sb-blog{grid-template-columns:minmax(0,1fr) 312px}}
.sb-blog__main{min-width:0}
.sb-blog__main .sb-grid--3{grid-template-columns:repeat(auto-fill,minmax(min(100%,264px),1fr))}

.sb-sidebar{display:grid;gap:20px;align-content:start;min-width:0}
@media(min-width:1040px){.sb-sidebar{position:sticky;top:96px}}
@media(min-width:600px) and (max-width:1039px){
  .sb-sidebar{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}

.sb-sidebar .sb-widget{
  position:relative;border:1px solid var(--sb-line);border-radius:var(--sb-radius);
  padding:22px;background:#fff;box-shadow:0 1px 2px rgba(15,59,95,.04)
}
.sb-sidebar .sb-widget__title{
  font-size:.74rem;text-transform:uppercase;letter-spacing:.13em;font-weight:700;
  color:var(--sb-ink-3);margin:0 0 14px;display:flex;align-items:center;gap:9px
}
.sb-sidebar .sb-widget__title::after{content:"";flex:1;height:1px;background:var(--sb-line)}

/* Search */
.sb-widget--search .sb-searchform input[type=search]{
  min-width:0;flex:1;font-size:.92rem;padding:10px 12px
}
.sb-widget--search .sb-btn{padding-inline:14px;flex:none}

/* Topics: name on the left, count as a quiet chip on the right. */
.sb-widget__cats{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.sb-widget__cats a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 10px;margin-inline:-10px;border-radius:10px;
  font-size:.93rem;font-weight:600;color:var(--sb-navy);text-decoration:none;
  transition:background .18s ease,color .18s ease
}
.sb-widget__cats a:hover{background:var(--sb-blue-050,rgba(27,127,181,.08));color:var(--sb-blue)}
.sb-widget__cats em{
  font-style:normal;font-size:.75rem;font-weight:700;color:var(--sb-ink-3);
  background:var(--sb-surface-2,#f3f6f9);border-radius:999px;padding:2px 9px;flex:none
}
.sb-widget__cats a:hover em{background:#fff;color:var(--sb-blue)}

/* Latest: title over date, separated by hairlines. */
.sb-widget__posts{list-style:none;margin:0;padding:0;display:grid;gap:0}
.sb-widget__posts li{padding:12px 0;border-top:1px solid var(--sb-line)}
.sb-widget__posts li:first-child{padding-top:0;border-top:0}
.sb-widget__posts li:last-child{padding-bottom:0}
.sb-widget__posts a{
  display:block;font-size:.94rem;font-weight:600;line-height:1.4;
  color:var(--sb-navy);text-decoration:none
}
.sb-widget__posts a:hover{color:var(--sb-blue)}
.sb-widget__posts time{
  display:block;margin-top:5px;font-size:.76rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--sb-ink-3)
}

/* The one dark card in the rail, so the CTA is not just another box. */
.sb-sidebar .sb-widget--cta{
  border-color:transparent;color:#fff;overflow:hidden;
  background:linear-gradient(158deg,var(--sb-navy),var(--sb-deep) 70%)
}
.sb-sidebar .sb-widget--cta::after{
  content:"";position:absolute;inset:auto -30% -55% auto;width:190px;height:190px;
  border-radius:50%;background:radial-gradient(circle,rgba(229,135,43,.32),transparent 68%);
  pointer-events:none
}
.sb-widget__cta-icon{
  display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:12px;margin-bottom:14px;color:var(--sb-orange);
  background:rgba(229,135,43,.16);border:1px solid rgba(229,135,43,.3)
}
.sb-sidebar .sb-widget--cta .sb-widget__title{color:rgba(255,255,255,.62)}
.sb-sidebar .sb-widget--cta .sb-widget__title::after{background:rgba(255,255,255,.16)}
.sb-sidebar .sb-widget--cta p{
  position:relative;margin:0 0 16px;font-size:.9rem;line-height:1.6;color:rgba(255,255,255,.78)
}
.sb-sidebar .sb-widget--cta .sb-btn{position:relative}

/* ---------------------------------------------------------------------
   18. Service page: next step

   Two columns that stay level. The lead column carries the three stages
   and the direct channels so it has real height beside a tall form, and
   it sticks once the form is taller than the viewport, which is what
   stops the hole opening under it on a long page.
   --------------------------------------------------------------------- */
.sb-next{position:relative;overflow:hidden;background:var(--sb-surface);isolation:isolate}
.sb-next__glow{position:absolute;inset:auto -12% -40% -12%;height:420px;pointer-events:none;z-index:-1;
  background:radial-gradient(60% 100% at 30% 0,rgba(var(--sb-blue-rgb),.12),transparent 72%)}
.sb-next__grid{display:grid;gap:clamp(28px,3.4vw,48px);grid-template-columns:1fr;align-items:start}
@media(min-width:960px){
  .sb-next__grid{grid-template-columns:minmax(0,1fr) minmax(0,.92fr)}
  .sb-next__lead{position:sticky;top:96px}
}
.sb-next__lead .sb-section__head{margin-bottom:26px}

.sb-nextsteps{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:0;counter-reset:none}
.sb-nextsteps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 16px;
  padding:16px 0;border-top:1px solid var(--sb-line)}
.sb-nextsteps li:first-child{border-top:0;padding-top:0}
.sb-nextsteps__n{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;font-family:var(--sb-mono);font-size:.8rem;
  font-weight:700;color:var(--sb-blue);background:var(--sb-blue-050);
  border:1px solid rgba(var(--sb-blue-rgb),.26)}
.sb-nextsteps strong{display:block;font-size:1rem;color:var(--sb-navy);margin-bottom:4px}
.sb-nextsteps span:not(.sb-nextsteps__n){display:block;font-size:.92rem;line-height:1.55;color:var(--sb-ink-2)}

.sb-next__direct{padding:18px 20px;border-radius:var(--sb-radius);
  background:#fff;border:1px solid var(--sb-line)}
.sb-next__direct>p{margin:0 0 12px;font-size:.74rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--sb-ink-3)}
.sb-next__direct ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sb-next__direct a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;
  border-radius:999px;font-size:.89rem;font-weight:600;text-decoration:none;
  color:var(--sb-navy);background:var(--sb-surface-2);border:1px solid transparent;
  transition:background .18s ease,border-color .18s ease,color .18s ease}
.sb-next__direct a:hover{background:#fff;border-color:var(--sb-blue);color:var(--sb-blue)}
.sb-next__direct svg{width:16px;height:16px;flex:none;color:var(--sb-blue)}
.sb-next__form{min-width:0}

/* ---------------------------------------------------------------------
   19. Coverage: reveal the rest

   The table opens on a handful of destinations. The control is a label
   for a real checkbox, so the reveal works with JavaScript off and the
   state is announced; the search script ticks the same box when a query
   is active so a hidden row can never swallow a match.
   --------------------------------------------------------------------- */
.sb-covreveal__toggle{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.sb-covreveal tr[data-coverage-extra]{display:none}
/* :not([hidden]) is doing real work: the search script hides non-matching rows
   with the hidden attribute, and without the guard this rule would out-specify
   that and show every extra row whatever was typed. */
.sb-covreveal__toggle:checked ~ .sb-table-wrap tr[data-coverage-extra]:not([hidden]){display:table-row}

.sb-covreveal__more{margin:0;padding:16px 0 0;display:flex;justify-content:center}
.sb-covreveal__more .sb-btn{cursor:pointer}
.sb-covreveal__more svg{transition:transform .2s ease}
.sb-covreveal__show,.sb-covreveal__hide{display:inline-flex;align-items:center;gap:8px}
.sb-covreveal__hide{display:none}
.sb-covreveal__toggle:checked ~ .sb-covreveal__more .sb-covreveal__show{display:none}
.sb-covreveal__toggle:checked ~ .sb-covreveal__more .sb-covreveal__hide{display:inline-flex}
.sb-covreveal__toggle:checked ~ .sb-covreveal__more svg{transform:rotate(180deg)}
/* Keyboard users must still see where focus is, even though the box is hidden. */
.sb-covreveal__toggle:focus-visible ~ .sb-covreveal__more .sb-btn{
  outline:2px solid var(--sb-blue);outline-offset:3px}

/* Service heroes carry the longest copy on the site, and at the shared H1
   size a nine-word headline plus a four-line standfirst pushed the whole
   first screen down. Here the type steps down a notch, the standfirst is
   held to three lines, and the block breathes less, so the hero stays a
   hero instead of becoming a page of its own. */
.single-sb_service .sb-phero h1{font-size:clamp(1.8rem,1.15rem + 1.9vw,2.5rem)}
.single-sb_service .sb-phero__inner{padding-block:clamp(30px,3.2vw,46px)}
.single-sb_service .sb-phero__text{font-size:clamp(.98rem,.94rem + .2vw,1.06rem);
  margin-bottom:20px;max-width:56ch;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.single-sb_service .sb-hero__proof{gap:8px 22px;margin-bottom:20px!important}

/* ---------------------------------------------------------------------
   20. Hero panel: the offer

   The panel used to be a route-status readout. It now carries the
   promotion, so each row can name the deal on that destination and the
   whole panel gets its own call to action. Everything in it is typed by
   the client; nothing here invents a claim.
   --------------------------------------------------------------------- */
.sb-panel--offer{border-color:rgba(var(--sb-orange-rgb),.34);
  background:linear-gradient(168deg,rgba(255,255,255,.08),rgba(255,255,255,.035))}
.sb-panel--offer::before{content:"";position:absolute;inset:-1px;border-radius:inherit;
  pointer-events:none;background:radial-gradient(70% 50% at 80% 0,rgba(var(--sb-orange-rgb),.16),transparent 68%)}
.sb-panel--offer{position:relative;isolation:isolate}
.sb-panel--offer>*{position:relative}
.sb-panel__eyebrow{margin:0 0 4px;font-family:var(--sb-mono);font-size:.66rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--sb-orange)}
.sb-panel--offer .sb-panel__title{font-size:1.05rem;letter-spacing:-.01em;
  text-transform:none;color:#fff;font-weight:750}

.sb-route--offer{grid-template-columns:minmax(0,1fr) auto}
.sb-route--offer .sb-route__type{grid-column:1;font-size:.7rem}
.sb-route--offer .sb-route__name{grid-row:1}
.sb-route__offer{grid-row:1 / span 2;display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;white-space:nowrap;
  font-size:.74rem;font-weight:700;letter-spacing:.01em;color:#ffd7ab;
  background:rgba(var(--sb-orange-rgb),.18);border:1px solid rgba(var(--sb-orange-rgb),.42)}
.sb-route__offer svg{width:12px;height:12px;flex:none;color:var(--sb-orange)}
.sb-route--offer{align-items:center;row-gap:2px;padding-block:9px}

.sb-panel__cta{margin-top:16px}
@media(max-width:420px){
  .sb-route--offer{grid-template-columns:minmax(0,1fr)}
  .sb-route__offer{grid-row:auto;grid-column:1;justify-self:start;margin-top:4px}
}

/* ---------------------------------------------------------------------
   21. Integrations: connection sheets

   One wide sheet per connection method, summary on the left and the
   client's own spec pairs on the right, so the page reads as a
   comparison rather than a set of teasers.
   --------------------------------------------------------------------- */
.sb-connlist{display:grid;gap:18px;margin-bottom:clamp(40px,5vw,64px)}
.sb-conn{position:relative;overflow:hidden;display:grid;gap:22px 34px;
  grid-template-columns:1fr;align-items:start;
  padding:clamp(22px,2.4vw,30px);border-radius:var(--sb-radius-lg);
  background:#fff;border:1px solid var(--sb-line);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
@media(min-width:860px){.sb-conn{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.sb-conn:hover{border-color:rgba(var(--sb-blue-rgb),.4);box-shadow:var(--sb-shadow);transform:translateY(-2px)}

/* The numeral is decoration, not a grid item, so it must stay out of the
   flow: :not() keeps the stacking rule below from putting it back in. */
.sb-conn__n{position:absolute;top:2px;right:18px;font-family:var(--sb-mono);
  font-size:clamp(3rem,5vw,4.6rem);font-weight:800;line-height:1;pointer-events:none;
  color:var(--sb-surface-2);z-index:0}
.sb-conn>:not(.sb-conn__n){position:relative;z-index:1}

.sb-conn__icon{display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:13px;margin-bottom:14px;color:var(--sb-blue);
  background:var(--sb-blue-050);border:1px solid rgba(var(--sb-blue-rgb),.2)}
.sb-conn__proto{margin:0 0 6px;font-family:var(--sb-mono);font-size:.72rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--sb-ink-3)}
.sb-conn__title{margin:0 0 10px;font-size:clamp(1.15rem,1rem + .5vw,1.42rem);line-height:1.25}
.sb-conn__title a{color:var(--sb-navy);text-decoration:none}
.sb-conn:hover .sb-conn__title a{color:var(--sb-blue)}
.sb-conn__text{margin:0 0 14px;font-size:.95rem;line-height:1.6;color:var(--sb-ink-2)}
.sb-conn__link{margin:0}

.sb-conn__specs{margin:0;display:grid;gap:0;align-self:center;
  border-radius:var(--sb-radius);border:1px solid var(--sb-line);overflow:hidden}
.sb-conn__specs>div{display:grid;gap:2px 18px;padding:13px 16px;
  border-top:1px solid var(--sb-line);background:var(--sb-surface)}
.sb-conn__specs>div:first-child{border-top:0}
@media(min-width:480px){
  .sb-conn__specs>div{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:baseline}
}
.sb-conn__specs dt{font-family:var(--sb-mono);font-size:.68rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--sb-ink-3)}
.sb-conn__specs dd{margin:0;font-size:.92rem;line-height:1.45;color:var(--sb-navy);font-weight:600}

/* The decision panel: the question integrators actually arrive with. */
.sb-pick{position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(28px,3.4vw,44px);border-radius:var(--sb-radius-lg);color:#fff;
  background:linear-gradient(152deg,var(--sb-navy),var(--sb-deep) 72%)}
.sb-pick::after{content:"";position:absolute;inset:auto -8% -60% auto;width:360px;height:360px;
  border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(var(--sb-orange-rgb),.22),transparent 66%)}
.sb-pick__title{margin:0 0 22px;color:#fff;font-size:clamp(1.3rem,1.1rem + .8vw,1.8rem)}
.sb-pick__list{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:0}
.sb-pick__list li{display:grid;gap:4px;padding:16px 0;border-top:1px solid rgba(255,255,255,.14)}
@media(min-width:760px){
  .sb-pick__list li{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:4px 28px;align-items:baseline}
}
.sb-pick__list li:first-child{border-top:0;padding-top:0}
.sb-pick__list strong{font-size:1.02rem;color:#fff}
.sb-pick__list span{font-size:.93rem;line-height:1.6;color:rgba(255,255,255,.8)}

/* ---------------------------------------------------------------------
   22. Service page: the technical brief

   The long read on a service page. A sticky contents rail on the left,
   the editor's own prose on the right with numbered headings and a lead
   paragraph set larger, so the block reads as a document rather than as
   a wall of text dropped between two designed sections.
   --------------------------------------------------------------------- */
.sb-brief{background:var(--sb-surface);border-block:1px solid var(--sb-line)}
.sb-brief__grid{display:grid;gap:clamp(28px,3.6vw,54px);grid-template-columns:1fr;align-items:start}
@media(min-width:1000px){
  .sb-brief__grid{grid-template-columns:250px minmax(0,1fr)}
  .sb-brief__rail{position:sticky;top:150px}
}
.sb-brief__grid--solo{max-width:74ch;margin-inline:auto}

.sb-brief__eyebrow{margin:0 0 6px;font-family:var(--sb-mono);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sb-orange)}
.sb-brief__navtitle{margin:0 0 14px;font-size:1.02rem;color:var(--sb-navy)}

.sb-brief__toc{list-style:none;margin:0 0 20px;padding:0;counter-reset:sbtoc;display:grid;gap:0}
.sb-brief__toc li{counter-increment:sbtoc;border-top:1px solid var(--sb-line)}
.sb-brief__toc li:first-child{border-top:0}
.sb-brief__toc a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;
  padding:11px 0;font-size:.92rem;line-height:1.45;font-weight:600;
  color:var(--sb-ink-2);text-decoration:none;transition:color .18s ease}
.sb-brief__toc a::before{content:counter(sbtoc,decimal-leading-zero);
  font-family:var(--sb-mono);font-size:.72rem;font-weight:700;color:var(--sb-ink-3);
  padding-top:.25em;transition:color .18s ease}
.sb-brief__toc a:hover{color:var(--sb-blue)}
.sb-brief__toc a:hover::before{color:var(--sb-orange)}
.sb-brief__ask{margin:0;padding-top:16px;border-top:1px solid var(--sb-line)}

.sb-brief__body{max-width:70ch}
.sb-brief__body>h2{scroll-margin-top:150px}
/* The prose sits on the tinted band, so its own surfaces need to lift off it. */
.sb-brief__body blockquote,.sb-brief__body table,.sb-brief__body pre{background:#fff}

.sb-faq__more{margin:22px 0 0;text-align:center}
.sb-why__about{margin:16px 0 0}
.sb-why__about--center{margin:26px 0 0;text-align:center}
.sb-faq__onward{margin:26px 0 0;padding:20px 22px;border:1px solid var(--sb-line);border-radius:var(--sb-radius);background:var(--sb-navy-050)}
.sb-faq__onwardtitle{margin:0 0 10px;font-weight:700;color:var(--sb-navy);font-size:.95rem}
.sb-faq__onward ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 26px}
.sb-faq__onward li{margin:0}

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

@media print{
  .sb-header,.sb-topbar,.sb-footer,.sb-cta,.sb-float,.sb-share,.sb-service-nav{display:none!important}
  body{color:#000;font-size:11pt}
  .sb-hero,.sb-phero{background:none;color:#000}
  .sb-hero h1,.sb-phero h1{color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}