/* Blue Digital Solutions (/Solutions/): only what the main site's site/sections/pages.css don't already
   cover. Tokens are the main site's (site.css :root); classes for Solutions-only pieces use bds-.
   The 3D hero (Assets/Solutions/sol-hero.js + sol-pc.js, three.js; a deliberate exception, brief §21) is the BD-Solutions hero restyled:
   tint grid ground, Questrial regular headings, red-bar kicker, house buttons and cards. */

/* ---------- "Part of Blue Digital" pill in the utility strip (.bd-util a in site.css would make it inline-block) ---------- */
.bd-util .bds-parent{white-space:nowrap;display:inline-flex;margin-block:0;align-items:center;gap:8px;color:#fff;text-decoration:none;font-size:13.5px;border:1px solid rgba(255,255,255,.3);border-radius:var(--r-pill);padding:4px 12px;transition:background-color var(--t-hover-colour) ease}
.bd-util .bds-parent:hover{background:rgba(255,255,255,.12)}
.bd-util .bds-parent .bd-icon{width:14px;height:14px}

/* ---------- 3D hero ---------- */
.bds-hero{
  --bds-logo:min(54vmin,460px,38vw);
  --glide-max:calc(min(80vw,var(--container)) / 2 - var(--bds-logo) / 2);
  position:relative;color:var(--text);
  background-color:#E8EEF8;
  background-image:linear-gradient(rgba(1,43,101,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(1,43,101,.045) 1px,transparent 1px);
  background-size:32px 32px;
}
.bds-hero__stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--bds-logo);grid-template-areas:"intro logo" "pc pc";align-items:center;column-gap:48px;width:min(80%,var(--container));margin:0 auto;padding:72px 0 190px}
.bds-hero__intro{grid-area:intro;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.bds-hero__title{font-size:clamp(34px,4.4vw,58px);line-height:1.04;max-width:12ch}
.bds-hero__lead{font-size:18px;max-width:46ch}
.bds-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

.bds-hero__logo{grid-area:logo;display:grid;place-items:center}
.bds-logo{width:var(--bds-logo);aspect-ratio:1}
.bds-logo__glide,.bds-logo__dock{width:100%;height:100%}
.bds-logo__glide{--glide:1}
.bds-logo__dock{transform-origin:center}
.bds-logo svg{display:block;width:100%;height:100%;overflow:visible}
.bd-piece,.bd-piece__hover,.bd-piece__idle,#bd-ring{transform-box:fill-box;transform-origin:center}
#bd-ring-text{transform-box:view-box;transform-origin:250px 250px}

.bds-hero__canvas{display:none}
.bds-hero__pc{grid-area:pc;margin-top:48px}
.bds-hero__poster{width:min(100%,640px);aspect-ratio:1.6;margin:0 auto;overflow:hidden}
.bds-hero__poster img{display:block;width:210%;max-width:none;height:auto;margin:-30.8% 0 0 -63.2%}

/* Static layout (phones, reduced motion, no WebGL): one house card per service, the whole card is the link */
.bds-hero__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:36px 0 0;padding:0;list-style:none}
.bds-hero-card{position:relative;display:flex;gap:16px;align-items:flex-start;padding:22px 22px 24px;background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);border-bottom:4px solid transparent;transition:transform var(--t-hover) var(--ease),border-color var(--t-hover-colour) ease,box-shadow var(--t-hover) ease}
.bds-hero-card:hover,.bds-hero-card:focus-within{transform:translateY(-6px);border-color:var(--brand-2);box-shadow:var(--shadow-h)}
.bds-hero-card__icon{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--brand-1);color:#fff}
.bds-hero-card__icon .bd-icon{width:24px;height:24px}
.bds-hero-card__icon .bd-icon .bd-acc{stroke:#FF8A8E}
.bds-hero-card__body{display:flex;flex-direction:column;gap:6px;min-width:0}
.bds-hero-card__title{font-size:20px}
.bds-hero-card__title a{color:var(--ink);text-decoration:none}
.bds-hero-card__title a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.bds-hero-card__title a:focus-visible{outline:none}
.bds-hero-card__title a:focus-visible::after{outline:3px solid var(--focus);outline-offset:4px}
.bds-hero-card__text{font-size:15px;line-height:1.55}
.bds-hero-card__price{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--kicker)}
.bds-hero__cue,.bds-hero__outro{display:none}

.js-anim .bds-hero-card,.js-anim .bd-piece,.js-anim #bd-ring,.js-anim #bd-ring-text{opacity:0}
.js-anim .bd-piece{will-change:transform}

/* Anime.js onScroll can't see the hero as in view when html/body clip overflow (site.css), so the 3D
   page lifts that clip; its sections clip their own overflow (.bd-section, .bd-split, .bd-has-bg). */
html.js-3d,html.js-3d body{overflow-x:visible}
.js-3d .bds-ovl,.js-3d .bd-split,.js-3d .bd-cta,.js-3d .bd-ftr{overflow-x:clip}
/* The closing line sits under the assembled PC, so the quick-help strip only just overlaps the pinned hero */
.js-3d .bds-ovl{margin-top:-40px}

/* Desktop 3D: pinned stage, PC on the canvas, each card becomes a label beside its part */
@media (min-width:981px){
  .js-3d .bds-hero{height:440vh}
  .js-3d .bds-hero__stage{position:sticky;top:var(--header-h);display:block;width:auto;height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h));padding:0;overflow:hidden}
  .js-3d .bds-hero__canvas{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:0}
  .js-3d .bds-hero__intro{position:absolute;z-index:3;top:0;bottom:0;left:calc((100% - min(80%,var(--container))) / 2);width:calc(min(80%,var(--container)) - var(--bds-logo) - 48px);justify-content:center}
  .js-3d .bds-hero__logo{position:absolute;inset:0;z-index:1;pointer-events:none}
  .js-3d .bds-logo__glide{transform:translateX(calc(var(--glide-max) * var(--glide)))}
  .js-3d .bds-logo__dock{will-change:transform}
  .js-3d .bds-hero__pc{position:absolute;inset:0;z-index:2;margin:0;pointer-events:none}
  .js-3d .bds-hero__poster{display:none}
  .js-3d .bds-hero__cards{display:block;margin:0}
  /* label: plain text (no card) with the red connector on the side facing its part; a soft halo in the
     page's grid colour keeps it readable where a part passes behind (2026-10-22, Hunter: text, not cards) */
  .js-3d .bds-hero-card{position:absolute;top:0;left:0;display:block;width:286px;padding:6px 0;background:none;border:0;border-radius:0;box-shadow:none;text-shadow:0 0 10px #EEF3FB,0 0 4px #EEF3FB;will-change:translate,transform,opacity}
  /* a 16px gap between the text and the connector, on the side facing the part */
  .js-3d .bds-hero-card--left{text-align:right;padding-right:16px}
  .js-3d .bds-hero-card--right{padding-left:16px}
  .js-3d .bds-hero-card:hover,.js-3d .bds-hero-card:focus-within{transform:none;box-shadow:none}
  .js-3d .bds-hero-card__icon{display:none}
  .js-3d .bds-hero-card__title{font-size:19px;margin-bottom:2px}
  .js-3d .bds-hero-card__text{font-size:14px}
  .js-3d .bds-hero-card::before{content:"";position:absolute;top:calc(50% - 1px);width:44px;height:2px;background:var(--brand-2);display:none}
  .js-3d .bds-hero-card--left::before{display:block;left:100%}
  .js-3d .bds-hero-card--right::before{display:block;right:100%}
  .js-3d .bds-hero-card.is-hot{box-shadow:none}
  .js-3d .bds-hero-card__price{display:inline-block;margin-top:2px}
  .js-3d .bds-hero-card.is-hot .bds-hero-card__title a{color:var(--brand-2)}

  .js-3d .bds-hero.is-cards .bds-hero-card{pointer-events:auto}
  .js-3d .bds-hero.is-cards .bds-hero__intro{pointer-events:none}
  .js-3d .bds-hero:not(.is-outro) .bds-hero__outro{pointer-events:none}
  .js-3d .bds-hero__outro{position:absolute;left:0;right:0;bottom:96px;z-index:3;display:flex;align-items:center;justify-content:center;gap:24px;opacity:0}
  .bds-hero__outro-title{font-size:clamp(26px,2.6vw,38px);color:var(--ink)}

  .js-3d .bds-hero__cue{position:absolute;left:0;right:0;bottom:72px;z-index:1;display:flex;flex-direction:row;align-items:center;gap:14px;width:max-content;margin:0 auto;padding:12px 24px 12px 16px;color:#fff;background:var(--brand-1);border-radius:var(--r-pill);box-shadow:0 14px 30px -10px rgba(1,43,101,.55);pointer-events:none;--cue:0;transform:translate(calc(var(--cue) * (min(80vw,1080px) / 2 - 50%)),calc(var(--cue) * 48px));font-size:14px;letter-spacing:.14em;text-transform:uppercase}
  /* a slow bob so the cue reads as "scroll"; translate is separate from the transform the timeline moves */
  .js-3d .bds-hero__cue{animation:bds-cue-bob 2.4s ease-in-out infinite}
  .bds-hero__mouse{position:relative;flex:none;width:24px;height:36px;border:2px solid currentColor;border-radius:12px}
  .bds-hero__mouse::after{content:"";position:absolute;left:50%;top:6px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--brand-2);animation:bds-cue 1.6s ease-in-out infinite}
}
@keyframes bds-cue{0%,100%{transform:translateY(0);opacity:1}60%{transform:translateY(8px);opacity:.3}}
@keyframes bds-cue-bob{0%,100%{translate:0 0}50%{translate:0 -6px}}
@media (prefers-reduced-motion:reduce){ .js-3d .bds-hero__cue,.bds-hero__mouse::after{animation:none} }

@media (max-width:980px){
  .bds-hero{--bds-logo:min(64vw,360px)}
  .bds-hero__stage{display:block;width:min(88%,640px);padding:44px 0 160px}
  .bds-hero__logo{margin:36px 0 0}
  .bds-hero__cards{grid-template-columns:1fr;gap:14px}
}
@media (max-width:767px){
  .bds-hero__lead{font-size:16px}
  /* the first screen's "Get in touch" stays clear of the cookie sheet on a 390 x 760 phone (release check §1) */
  .bds-hero__stage{padding-top:24px}
  .bds-hero__intro{gap:12px}
  .bds-hero__actions{margin-top:4px}
}
@media (prefers-reduced-motion:reduce){
  .js-anim .bds-hero-card,.js-anim .bd-piece,.js-anim #bd-ring,.js-anim #bd-ring-text{opacity:1}
}

/* ---------- quick-help strip over the end of the hero (HOUSE-C overlap, main .bd-ovl) ---------- */
.bds-ovl .bd-ovl__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.bds-ovl .bd-ovl__card a{margin-top:auto;font-size:14px;letter-spacing:.06em;color:var(--brand-1);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.bds-ovl .bd-ovl__card a:hover{color:var(--brand-2)}
.bds-ovl .bd-ovl__card a .bd-icon{width:18px;height:18px;color:inherit}
.bds-ovl .bd-ovl__card--navy{background:var(--brand-1);color:var(--on-band-soft)}
.bds-ovl .bd-ovl__card--navy h2,.bds-ovl .bd-ovl__card--navy a,.bds-ovl .bd-ovl__card--navy .bd-icon{color:#fff}
@media (max-width:980px){ .bds-ovl .bd-ovl__grid{grid-template-columns:1fr} }

/* ---------- why choose: icon columns flanking a photo (house §10) ---------- */
.bds-flank{display:grid;grid-template-columns:1fr minmax(0,360px) 1fr;gap:40px;align-items:center;margin-top:56px}
.bds-flank__col{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:36px}
.bds-flank__item{display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:start}
.bds-flank__col--left .bds-flank__item{grid-template-columns:1fr 56px;text-align:right}
.bds-flank__col--left .bds-flank__ic{order:2}
.bds-flank__ic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--surface-tint);color:var(--brand-1);transition:background-color var(--t-hover-colour) ease,color var(--t-hover-colour) ease}
.bds-flank__item:hover .bds-flank__ic{background:var(--brand-1);color:#fff}
.bds-flank__ic .bd-icon{width:26px;height:26px}
.bds-flank__item h3{font-size:19px;margin-bottom:6px}
.bds-flank__item p{font-size:15px;line-height:1.6}
.bds-flank__img{border-radius:var(--r-img);overflow:hidden;box-shadow:var(--shadow-h);aspect-ratio:3/4}
.bds-flank__img img{width:100%;height:100%;object-fit:cover}
@media (max-width:980px){
  .bds-flank{grid-template-columns:1fr}
  .bds-flank__img{max-width:420px;aspect-ratio:4/3;order:-1}
  .bds-flank__col--left .bds-flank__item{grid-template-columns:56px 1fr;text-align:left}
  .bds-flank__col--left .bds-flank__ic{order:0}
}

/* ---------- process: 4 steps on the main .bd-proc track ---------- */
.bds-proc4 .bd-proc__list{grid-template-columns:repeat(4,minmax(0,1fr))}
.bds-proc3 .bd-proc__list{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:767px){ .bds-proc4 .bd-proc__list,.bds-proc3 .bd-proc__list{grid-template-columns:1fr} }

/* ---------- remote band: navy veil over a photo ---------- */
.bds-remote{padding-block:104px}
.bds-remote .bd-wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:48px;align-items:center}
.bds-remote h2{color:#fff;font-size:var(--fs-h2)}
.bds-remote .bd-kicker{color:#FF8A8E}
.bds-remote p{color:var(--on-band-soft);max-width:52ch}
.bds-remote__copy{display:flex;flex-direction:column;gap:16px}
.bds-remote__tools{display:flex;flex-direction:column;gap:12px}
.bds-remote__tool{display:flex;align-items:center;gap:14px;background:rgba(1,24,58,.72);border:1px solid rgba(255,255,255,.22);border-radius:var(--r-card);padding:16px 18px;color:#fff;text-decoration:none;transition:background-color var(--t-hover-colour) ease,transform var(--t-hover) var(--ease)}
.bds-remote__tool:hover{background:rgba(1,43,101,.9);transform:translateX(4px)}
.bds-remote__tool small{display:block;color:var(--on-band-soft);font-size:13px}
.bds-remote__tool .bd-icon{width:24px;height:24px;flex:none}
.bds-remote__price{display:inline-flex;align-items:baseline;gap:8px;color:#fff;font-size:15px}
.bds-remote__price b{font-weight:400;font-size:30px}
@media (max-width:980px){ .bds-remote .bd-wrap{grid-template-columns:1fr} }

/* ---------- service page ---------- */
.bds-incl{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.bds-incl .bd-featgrid{grid-template-columns:1fr 1fr;margin-top:0}
.bds-who{margin-top:40px}
.bds-related{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:52px}
.bds-enq .bd-form-card{color:var(--text)}
.bds-enq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.bds-enq .bd-head{position:sticky;top:calc(var(--header-h) + 32px)}
.bds-enq__call{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.bds-enq__call a{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-size:17px}
.bds-enq__call .bd-icon{color:#FF8A8E}
@media (max-width:980px){
  .bds-incl,.bds-enq{grid-template-columns:1fr;gap:32px}
  .bds-enq .bd-head{position:static}
  .bds-related{grid-template-columns:1fr}
}
@media (max-width:600px){ .bds-incl .bd-featgrid{grid-template-columns:1fr} }

/* ---------- small shared pieces ---------- */
.bds-more{margin-top:36px;font-size:15.5px;text-align:center}
.bds-ccards3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bd-form-status--ok{background:#E9F6EF;border-left-color:#1A7F4B;color:#14532D}
.bd-featgrid .bd-feat:last-child:nth-child(odd){grid-column:1/-1}
@media (max-width:767px){ .bds-ccards3{grid-template-columns:1fr} }

/* ---------- services hub: problem -> service guide ---------- */
.bds-guide{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.bds-guide__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.bds-guide__item{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--card);border-radius:var(--r-card);box-shadow:var(--shadow);padding:18px 22px;color:var(--text);text-decoration:none;border-left:4px solid transparent;transition:transform var(--t-hover) var(--ease),border-color var(--t-hover-colour) ease,box-shadow var(--t-hover) ease}
.bds-guide__item:hover,.bds-guide__item:focus-visible{transform:translateX(6px);border-left-color:var(--brand-2);box-shadow:var(--shadow-h)}
.bds-guide__item b{font-weight:400;color:var(--brand-1);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.bds-guide__item .bd-icon{width:18px;height:18px}
@media (max-width:980px){ .bds-guide{grid-template-columns:1fr;gap:32px} }
@media (max-width:600px){ .bds-guide__item{flex-direction:column;align-items:flex-start;gap:6px} }

/* ---------- remote support: hero note, tool tabs, six drawn steps, safety cards ---------- */
/* a photo hero with the overlap strip after it keeps its last line clear of the strip */
.bds-ph--strip{padding-bottom:170px}
.bds-rs-call{flex-basis:100%;margin-top:6px;font-size:15px;color:var(--on-band-soft)}
.bds-rs-call a{color:#fff}
.bds-tabs{margin-top:44px}
.bds-tabs__list{display:none}
.js .bds-tabs__list{display:flex;gap:6px;width:max-content;max-width:100%;margin:0 auto 44px;padding:6px;border-radius:var(--r-pill);background:var(--card);box-shadow:var(--shadow)}
.bds-tabs__tab{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:230px;padding:12px 26px;border:0;border-radius:var(--r-pill);background:transparent;cursor:pointer;font:400 16px/1.2 var(--font);color:var(--brand-1);transition:background-color var(--t-hover-colour) ease,color var(--t-hover-colour) ease}
.bds-tabs__tab small{font-size:12.5px;color:var(--muted);transition:color var(--t-hover-colour) ease}
.bds-tabs__tab:hover{background:var(--surface-tint)}
.bds-tabs__tab[aria-selected="true"]{background:var(--brand-1);color:#fff}
.bds-tabs__tab[aria-selected="true"] small{color:var(--on-band-soft)}
.bds-tabs__panel{scroll-margin-top:calc(var(--header-h) + 100px)}
.bds-tabs__panel:focus-visible{outline-offset:8px}
.bds-tabs__panel + .bds-tabs__panel{margin-top:72px}
.js .bds-tabs__panel + .bds-tabs__panel{margin-top:0}

.bds-rs-tool{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 40px;margin-bottom:48px;padding:26px 30px;border-radius:var(--r-lg);background:var(--surface-soft)}
.bds-rs-tool p{max-width:520px}
.bds-rs-tool__title{font-size:24px;margin-bottom:4px}

.bds-rs-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 36px}
.bds-rs-step{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow)}
.bds-rs-step:not(:nth-child(3n))::after{content:"";position:absolute;top:88px;right:-36px;width:36px;border-top:2px dashed #B9C6E4}
.bds-rs-step__screen{padding:18px 18px 0}
.bds-rs-step__body{position:relative;padding:30px 24px 24px}
.bds-rs-step__body p{font-size:15px;line-height:1.6}
.bds-rs-step__body strong{font-weight:400;color:var(--ink)}
.bds-rs-step__num{position:absolute;top:-20px;left:24px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--brand-2);color:#fff;box-shadow:0 0 0 5px var(--card)}
.bds-rs-step__title{font-size:18px;margin-bottom:8px}

.bds-mock{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:150px;padding:30px 14px 14px;border-radius:var(--r-card);background:#F1F4FA;border:1px solid #E0E6F2;overflow:hidden;font-size:12px;color:var(--ink)}
.bds-mock--dark{background:#202124;border-color:#202124;color:#E8EAED}
.bds-mock__bar{position:absolute;left:0;right:0;top:0;padding:4px 10px 4px 34px;background:rgba(0,0,0,.06);font-size:10px;color:#6B7385;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bds-mock__bar::before{content:"";position:absolute;left:10px;top:50%;width:16px;height:6px;margin-top:-3px;background:radial-gradient(circle,#C4CAD6 2px,transparent 2.5px) 0 0/6px 6px repeat-x}
.bds-mock--dark .bds-mock__bar{background:rgba(255,255,255,.08);color:#9AA0A6}
.bds-mock__text{max-width:200px;text-align:center;line-height:1.4}
.bds-mock__head{font-size:15px}
.bds-mock__btn{padding:6px 14px;border-radius:6px;font-size:11.5px}
.bds-mock__btn--outline{border:1px solid #5F6368;color:#E8EAED}
.bds-mock__btn--blue{background:#1A73E8;color:#fff}
.bds-mock__fab{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#1A73E8;color:#fff}
.bds-mock__fab .bd-icon{width:20px;height:20px}
.bds-mock__fab .bd-icon .bd-acc,.bds-mock__file > .bd-icon .bd-acc{stroke:#fff}
.bds-mock__file{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08);text-align:left}
.bds-mock__file > .bd-icon{width:16px;height:16px;padding:4px;border-radius:6px;background:#1A73E8;color:#fff;box-sizing:content-box}
.bds-mock__file small{display:block;color:#6B7385}
.bds-mock__ask{font-size:10.5px;color:#6B7385}
.bds-mock__ask b{font-weight:400;margin-left:6px;padding:2px 10px;border-radius:4px;background:#1A73E8;color:#fff}
.bds-mock__code{padding:6px 12px;border-radius:6px;background:#fff;font:400 16px/1 ui-monospace,Consolas,monospace;letter-spacing:1px}
.bds-mock__ring{outline:2.5px solid var(--brand-2);outline-offset:4px}
.bds-mock__btn--anydesk{background:#EF443B;color:#fff}
.bds-mock__btn--plain{color:#6B7385}
.bds-mock__file--anydesk > .bd-icon{background:#EF443B}
.bds-mock--anydesk{align-items:flex-start;justify-content:flex-end;padding:34px 18px 16px}
.bds-mock--anydesk .bds-mock__ring{align-self:flex-start}
.bds-mock__app{position:absolute;left:0;right:0;top:0;padding:5px 12px;background:#EF443B;color:#fff;font-size:10.5px;letter-spacing:.3px}
.bds-mock__label{font-size:11px;color:#6B7385;text-transform:uppercase;letter-spacing:.5px}
.bds-mock__call{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--brand-1);color:#fff}
.bds-mock__call .bd-icon{width:20px;height:20px}
.bds-mock__dialog{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;padding:12px 14px;border-radius:10px;background:#fff;box-shadow:0 4px 14px rgba(1,43,101,.14);text-align:center}
.bds-mock__dialog p{flex-basis:100%;margin-bottom:2px;font-size:11.5px;line-height:1.3}

.bds-rs-safe{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.bds-rs-safe__card{padding:30px 28px;border-radius:var(--r-lg);background:var(--card);border:2px solid transparent;box-shadow:var(--shadow)}
.bds-rs-safe__card p{font-size:15px;line-height:1.6}
.bds-rs-safe__card strong{font-weight:400;color:var(--ink)}
.bds-rs-safe__card--alert{border-color:var(--brand-2)}
.bds-rs-safe__title{font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px}
.bds-rs-safe__card--alert .bds-rs-safe__title{color:var(--kicker)}

@media (max-width:980px){
  .bds-rs-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bds-rs-step:not(:nth-child(3n))::after{display:none}
  .bds-rs-safe{grid-template-columns:1fr;gap:16px}
  .bds-tabs__tab{min-width:0}
}
@media (max-width:767px){
  .bds-rs-steps{grid-template-columns:1fr;gap:36px}
  .js .bds-tabs__list{width:100%}
  .bds-tabs__tab{flex:1;padding:10px 12px;font-size:14.5px}
  .bds-rs-tool{padding:22px}
}

/* ---------- Phase 4 audit (userinterface-wiki), same conventions as site.css ---------- */
/* Press feedback (physics-active-state): a slight squash while pressed, released at once */
.bds-hero-card:active,.bds-guide__item:active,.bds-remote__tool:active,.bd-util .bds-parent:active,.bds-tabs__tab:active{transform:scale(.98);transition-duration:var(--t-press)}
.js-3d .bds-hero-card:active{transform:none}
/* Target size (WCAG 2.5.8, ux-fitts-hit-area): the strip's text links get a 44px tap area without moving */
.bds-ovl .bd-ovl__card a{padding-block:12px;margin-block:-12px}
/* Reduced motion: no lifts or slides on hover or press */
@media (prefers-reduced-motion:reduce){
  .bds-hero-card:hover,.bds-hero-card:focus-within,.bds-guide__item:hover,.bds-guide__item:focus-visible,.bds-remote__tool:hover,
  .bds-hero-card:active,.bds-guide__item:active,.bds-remote__tool:active,.bd-util .bds-parent:active,.bds-tabs__tab:active{transform:none}
}

/* ---------- Release checks (workflow release-hygiene-checks.md) ---------- */
/* §8 targets: the "Part of Blue Digital" pill is 44px tall; §2: on narrow phones the strip wraps so it never runs off the edge */
.bd-util .bds-parent{min-height:44px;padding-inline:14px;padding-block:0}
@media (max-width:480px){ .bd-util .bd-wrap--wide{flex-wrap:wrap;row-gap:0;padding-block:2px} }

/* ---------- Website Rescue (2026-10-22): four services ---------- */
/* All four service cards: 4 across, 2 by 2 on tablets, one column on phones (cards unchanged) */
.bd-cards.bds-cards4{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
@media (max-width:1180px){ .bd-cards.bds-cards4{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px} }
@media (max-width:600px){ .bd-cards.bds-cards4{grid-template-columns:1fr} }
/* Hero cards without the 3D PC (phones, reduced motion, no WebGL): 2 by 2 */
@media (min-width:981px){ .bds-hero__cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* Eyebrow above a service page H1, and the line under the included list */
.bds-ph-kicker{display:block;margin:0 0 12px}
.bds-incl__note{margin:22px 0 0;font-size:15.5px;color:var(--muted)}
.bds-more + .bds-more{margin-top:10px}