/* =========================================================
   REDOVAR — BUSINESS
========================================================= */


/* =========================================================
   BASE
========================================================= */

main {
  overflow:
    clip;
}


section {
  scroll-margin-top:
    calc(
      var(--header-h)
      +
      20px
    );
}


h1,
h2,
h3,
p {
  text-wrap:
    pretty;
}


/* =========================================================
   INDEX H2 SYSTEM
   EXACT SAME SCALE AS HOMEPAGE + CAMPS
========================================================= */

main h2 {
  margin:
    0;

  color:
    var(--light-text);

  font-size:
    clamp(
      42px,
      4.7vw,
      68px
    );

  line-height:
    .96;

  letter-spacing:
    -.055em;

  font-weight:
    500;
}


section p {
  margin:
    20px
    0
    0;

  max-width:
    590px;

  color:
    var(--light-secondary);

  font-size:
    clamp(
      15px,
      1.2vw,
      17px
    );

  line-height:
    1.68;
}


/* =========================================================
   BUTTON
========================================================= */

.business-button {
  min-height:
    44px;

  padding:
    0
    17px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    0;

  border-radius:
    var(--radius);

  font-size:
    12px;

  line-height:
    1;

  font-weight:
    600;

  cursor:
    pointer;

  transition:
    background-color
    150ms
    ease,
    color
    150ms
    ease,
    transform
    150ms
    ease;
}


.business-button:active {
  transform:
    translateY(
      1px
    );
}


.business-button--terracotta {
  background:
    var(--redovar-terracotta);

  color:
    #FFFFFF;
}


.business-button--terracotta:hover,
.business-button--terracotta:focus-visible {
  background:
    #A83D0D;
}


/* =========================================================
   QUIET REVEALS
========================================================= */

.business-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 450ms ease,
    transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

.business-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* =========================================================
   HERO
========================================================= */

.business-hero {
  position:
    relative;

  min-height:
    100svh;

  padding-top:
    var(--header-h);

  overflow:
    hidden;

  isolation:
    isolate;

  background:
    #111111;

  color:
    #F5F5F3;
}


/* =========================================================
   HERO IMAGE
========================================================= */

.business-hero-image,
.business-hero-shade {
  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;
}


.business-hero-image {
  z-index:
    -3;

  background-image:
    url("../../../assets/images/hero-business.PNG");

  background-size:
    cover;

  background-position:
    center
    center;

  background-repeat:
    no-repeat;

  transform:
    scale(
      1.001
    );
}


/* =========================================================
   HERO SHADE
========================================================= */

.business-hero-shade {
  z-index:
    -2;

  background:
    linear-gradient(
      180deg,
      rgba(7, 7, 7, .28)
      0%,
      rgba(7, 7, 7, .39)
      48%,
      rgba(7, 7, 7, .38)
      100%
    );
}


/* =========================================================
   HERO INNER
========================================================= */

.business-hero-inner {
  min-height:
    calc(
      100svh
      -
      var(--header-h)
    );

  padding:
    clamp(
      90px,
      9vw,
      144px
    )
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;
}


/* =========================================================
   HERO COPY
========================================================= */

.business-hero-copy {
  width:
    min(
      100%,
      1040px
    );

  margin-inline:
    auto;
}


.business-hero h1 {
  margin:
    0
    auto;

  max-width:
    1040px;

  color:
    #FFFFFF;

  font-size:
    clamp(
      60px,
      6.3vw,
      96px
    );

  line-height:
    .92;

  letter-spacing:
    -.064em;

  font-weight:
    500;
}


.business-hero-copy > p {
  margin:
    30px
    auto
    0;

  max-width:
    650px;

  color:
    rgba(
      245,
      245,
      243,
      .72
    );

  font-size:
    clamp(
      16px,
      1.25vw,
      18px
    );

  line-height:
    1.66;
}


/* =========================================================
   HERO ACTIONS
========================================================= */

.business-hero-actions {
  margin-top:
    34px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    24px;

  flex-wrap:
    wrap;
}


.business-hero-link {
  padding:
    8px
    0;

  color:
    rgba(
      245,
      245,
      243,
      .80
    );

  font-size:
    12px;

  line-height:
    1;

  font-weight:
    550;

  transition:
    color
    160ms
    ease;
}


.business-hero-link:hover,
.business-hero-link:focus-visible {
  color:
    #FFFFFF;
}


/* =========================================================
   DEVICE
========================================================= */

.business-device {
  padding:
    clamp(
      124px,
      11vw,
      188px
    )
    0;

  background:
    var(--light-surface);
}


/* =========================================================
   DEVICE GRID
========================================================= */

.business-device-grid {
  display:
    grid;

  grid-template-columns:
    minmax(
      470px,
      1.08fr
    )
    minmax(
      400px,
      .92fr
    );

  gap:
    clamp(
      80px,
      10vw,
      160px
    );

  align-items:
    start;
}


/* =========================================================
   DEVICE CONTENT
========================================================= */

.business-device-content {
  min-width:
    0;

  padding-bottom:
    clamp(
      180px,
      22vh,
      280px
    );
}


.business-device-head {
  max-width:
    720px;
}


/* =========================================================
   DEVICE LIST
========================================================= */

.business-device-list {
  margin-top:
    clamp(
      56px,
      6vw,
      78px
    );

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    12px;
}


/* =========================================================
   DEVICE ITEM
========================================================= */

.business-device-item {
  min-height:
    178px;

  padding:
    28px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  gap:
    44px;

  border-radius:
    var(--radius);

  background:
    #FFFFFF;

  transition:
    transform
    220ms
    var(--ease),
    background-color
    220ms
    ease;
}


.business-device-item:hover {
  transform:
    translateY(
      -3px
    );

  background:
    #FDFDFC;
}


.business-device-item > img {
  width:
    21px;

  height:
    21px;

  display:
    block;

  object-fit:
    contain;

  filter:
    brightness(
      0
    );

  opacity:
    .72;
}


.business-device-item > div {
  display:
    grid;

  gap:
    7px;
}


.business-device-item strong {
  color:
    var(--light-text);

  font-size:
    15px;

  line-height:
    1.2;

  font-weight:
    550;
}


.business-device-item span {
  max-width:
    270px;

  color:
    var(--light-secondary);

  font-size:
    11px;

  line-height:
    1.58;
}


/* =========================================================
   DEVICE VISUAL — STICKY
========================================================= */

.business-device-visual {
  position:
    sticky;

  top:
    calc(
      var(--header-h)
      +
      28px
    );

  min-height:
    calc(
      100svh
      -
      var(--header-h)
      -
      56px
    );

  max-height:
    780px;

  display:
    grid;

  place-items:
    center;

  align-self:
    start;
}


.business-device-visual img {
  width:
    min(
      100%,
      570px
    );

  height:
    min(
      70svh,
      690px
    );

  display:
    block;

  object-fit:
    contain;

  object-position:
    center;

  filter:
    drop-shadow(
      0
      30px
      54px
      rgba(
        0,
        0,
        0,
        .07
      )
    );
}


/* =========================================================
   SCHEDULE
========================================================= */

.business-schedule {
  padding:
    clamp(
      124px,
      11vw,
      188px
    )
    0;

  background:
    #FFFFFF;
}


/* =========================================================
   SCHEDULE HEAD
========================================================= */

.business-schedule-head {
  display:
    grid;

  grid-template-columns:
    minmax(
      430px,
      1fr
    )
    minmax(
      320px,
      .65fr
    );

  column-gap:
    clamp(
      80px,
      10vw,
      170px
    );

  align-items:
    end;
}


.business-schedule-head h2 {
  max-width:
    780px;
}


.business-schedule-head p {
  width:
    min(
      100%,
      460px
    );

  max-width:
    460px;

  margin:
    0
    0
    6px;

  justify-self:
    end;
}


/* =========================================================
   SCHEDULE STAGE
========================================================= */

.business-schedule-stage {
  width:
    100%;

  margin-top:
    clamp(
      64px,
      7vw,
      96px
    );

  background:
    var(--light-surface);
}


.business-schedule-inner {
  width:
    min(
      100%,
      var(--max)
    );

  margin-inline:
    auto;

  padding:
    12px
    var(--gutter)
    0;
}


/* =========================================================
   SCHEDULE TOOLBAR
========================================================= */

.business-schedule-toolbar {
  min-height:
    78px;

  padding:
    0
    22px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    26px;

  border-radius:
    var(--radius)
    var(--radius)
    0
    0;

  background:
    #FFFFFF;
}


.business-schedule-toolbar > div {
  display:
    flex;

  align-items:
    baseline;

  gap:
    14px;
}


.business-schedule-toolbar strong {
  color:
    var(--light-text);

  font-size:
    13px;

  font-weight:
    550;
}


.business-schedule-toolbar > div > span {
  color:
    var(--light-soft);

  font-size:
    10px;
}


/* =========================================================
   SCHEDULE CHANGE BUTTON
========================================================= */

.business-schedule-change {
  position:
    relative;

  min-width:
    142px;

  min-height:
    38px;

  padding:
    0
    14px;

  overflow:
    hidden;

  border:
    0;

  border-radius:
    var(--radius);

  background:
    #ECECEA;

  color:
    #111111;

  font-size:
    10px;

  font-weight:
    600;

  cursor:
    pointer;

  isolation:
    isolate;

  transition:
    background-color
    180ms
    ease,
    color
    180ms
    ease;
}


.business-schedule-change:hover:not(.is-loading):not(.is-complete),
.business-schedule-change:focus-visible:not(.is-loading):not(.is-complete) {
  background:
    #E5E5E2;
}


.business-schedule-change:disabled {
  cursor:
    default;
}


.business-schedule-change > span {
  position:
    relative;

  z-index:
    2;
}


.business-schedule-change::before {
  content:
    "";

  position:
    absolute;

  z-index:
    1;

  inset:
    0;

  width:
    0;

  background:
    rgba(
      11,
      54,
      154,
      .10
    );
}


.business-schedule-change.is-loading {
  background:
    #E9EEFB;

  color:
    var(--redovar-blue);
}


.business-schedule-change.is-loading::before {
  animation:
    businessScheduleFill
    900ms
    cubic-bezier(
      .22,
      1,
      .36,
      1
    )
    forwards;
}


.business-schedule-change.is-complete {
  background:
    #E3EAFB;

  color:
    var(--redovar-blue);
}


@keyframes businessScheduleFill {

  from {
    width:
      0;
  }

  to {
    width:
      100%;
  }

}


/* =========================================================
   SCHEDULE TABLE WRAP
========================================================= */

.business-schedule-table-wrap {
  overflow-x:
    auto;
}


/* =========================================================
   SCHEDULE TABLE
========================================================= */

.business-schedule-table {
  min-width:
    860px;

  background:
    #FFFFFF;
}


.business-schedule-row {
  min-height:
    70px;

  display:
    grid;

  grid-template-columns:
    minmax(
      230px,
      1.25fr
    )
    minmax(
      180px,
      .85fr
    )
    minmax(
      200px,
      1fr
    )
    minmax(
      160px,
      .7fr
    );

  border-top:
    1px
    solid
    var(--light-border);
}


.business-schedule-row > div {
  padding:
    15px
    18px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    4px;

  border-left:
    1px
    solid
    var(--light-border);

  color:
    var(--light-secondary);

  font-size:
    10px;

  transition:
    background-color
    180ms
    ease,
    box-shadow
    180ms
    ease;
}


.business-schedule-row > div:first-child {
  border-left:
    0;
}


/* =========================================================
   SCHEDULE HEAD ROW
========================================================= */

.business-schedule-row--head {
  min-height:
    46px;

  border-top:
    0;

  background:
    var(--redovar-blue);

  color:
    #FFFFFF;
}


.business-schedule-row--head > div {
  padding-top:
    0;

  padding-bottom:
    0;

  border-left-color:
    rgba(
      255,
      255,
      255,
      .16
    );

  color:
    rgba(
      255,
      255,
      255,
      .88
    );

  font-size:
    10px;

  font-weight:
    600;
}


.business-schedule-row strong {
  color:
    var(--light-text);

  font-size:
    12px;

  font-weight:
    550;
}


.business-schedule-row span {
  color:
    var(--light-secondary);

  font-size:
    9px;
}


/* =========================================================
   OPERATIONS LOCATION
========================================================= */

.business-operations-location {
  box-shadow:
    inset
    3px
    0
    0
    var(--redovar-terracotta);
}


.business-operations-location.is-updated {
  background:
    #F4F7FE;

  box-shadow:
    inset
    3px
    0
    0
    var(--redovar-blue);
}


/* =========================================================
   SCHEDULE FOOT
========================================================= */

.business-schedule-foot {
  min-height:
    66px;

  padding:
    0
    22px;

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap:
    24px;

  align-items:
    center;

  color:
    var(--light-soft);

  font-size:
    10px;
}


.business-schedule-foot > span {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;
}


.business-schedule-foot img {
  width:
    15px;

  height:
    15px;

  flex:
    0
    0
    15px;

  display:
    block;

  object-fit:
    contain;

  filter:
    brightness(
      0
    );

  opacity:
    .42;
}


/* =========================================================
   COMMUNICATION
========================================================= */

.business-communication {
  --communication-left-x:
    -18px;

  --communication-right-x:
    18px;

  padding:
    clamp(
      132px,
      12vw,
      202px
    )
    0;

  background:
    #111111;

  color:
    #F5F5F3;
}


/* =========================================================
   COMMUNICATION HEAD
========================================================= */

.business-communication-head {
  display:
    grid;

  grid-template-columns:
    minmax(
      440px,
      1fr
    )
    minmax(
      340px,
      .72fr
    );

  column-gap:
    clamp(
      80px,
      10vw,
      170px
    );

  align-items:
    end;
}


.business-communication-head h2 {
  max-width:
    760px;

  color:
    #F5F5F3;
}


.business-communication-head p {
  width:
    min(
      100%,
      470px
    );

  max-width:
    470px;

  margin:
    0
    0
    6px;

  justify-self:
    end;

  color:
    rgba(
      245,
      245,
      243,
      .60
    );
}


/* =========================================================
   COMMUNICATION GRID
========================================================= */

.business-communication-grid {
  margin-top:
    clamp(
      68px,
      7vw,
      104px
    );

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap:
    10px;
}


/* =========================================================
   COMMUNICATION CARD
========================================================= */

.business-communication-card {
  --communication-card-x:
    0px;

  --communication-card-y:
    0px;

  min-height:
    320px;

  padding:
    clamp(
      30px,
      3vw,
      40px
    );

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  gap:
    72px;

  border-radius:
    var(--radius);

  background:
    rgba(
      255,
      255,
      255,
      .055
    );

  transform:
    translate3d(
      var(--communication-card-x),
      var(--communication-card-y),
      0
    );

  will-change:
    transform;

  transition:
    transform
    90ms
    linear,
    background-color
    220ms
    ease;
}


.business-communication-card:first-child {
  --communication-card-x:
    var(--communication-left-x);
}


.business-communication-card:last-child {
  --communication-card-x:
    var(--communication-right-x);
}


.business-communication-card:hover {
  --communication-card-y:
    -3px;

  background:
    rgba(
      255,
      255,
      255,
      .075
    );
}


/* =========================================================
   WALKIE CARD
========================================================= */

.business-communication-card--walkie {
  background:
    var(--redovar-blue);
}


.business-communication-card--walkie:hover {
  --communication-card-y:
    -3px;

  background:
    var(--redovar-blue);
}


/* =========================================================
   COMMUNICATION ICON
========================================================= */

.business-communication-icon {
  width:
    46px;

  height:
    46px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    rgba(
      255,
      255,
      255,
      .08
    );
}


.business-communication-icon img {
  width:
    20px;

  height:
    20px;

  display:
    block;

  object-fit:
    contain;

  filter:
    brightness(
      0
    )
    invert(
      1
    );

  opacity:
    .70;
}


/* =========================================================
   WALKIE ICON
========================================================= */

.business-communication-card--walkie
.business-communication-icon {
  background:
    rgba(
      255,
      255,
      255,
      .96
    );
}


.business-communication-card--walkie
.business-communication-icon img {
  opacity:
    1;

  filter:
    brightness(
      0
    )
    saturate(
      100%
    )
    invert(
      18%
    )
    sepia(
      62%
    )
    saturate(
      3380%
    )
    hue-rotate(
      218deg
    )
    brightness(
      80%
    )
    contrast(
      105%
    );
}


/* =========================================================
   COMMUNICATION COPY
========================================================= */

.business-communication-card > div:last-child {
  display:
    grid;

  gap:
    11px;
}


.business-communication-card span {
  color:
    rgba(
      245,
      245,
      243,
      .42
    );

  font-size:
    9px;
}


.business-communication-card h3 {
  margin:
    0;

  max-width:
    380px;

  color:
    #FFFFFF;

  font-size:
    clamp(
      25px,
      2.35vw,
      36px
    );

  line-height:
    1;

  letter-spacing:
    -.043em;

  font-weight:
    500;
}


.business-communication-card p {
  margin:
    4px
    0
    0;

  max-width:
    330px;

  color:
    rgba(
      245,
      245,
      243,
      .58
    );

  font-size:
    12px;

  line-height:
    1.62;
}


.business-communication-card--walkie span {
  color:
    rgba(
      255,
      255,
      255,
      .58
    );
}


.business-communication-card--walkie p {
  color:
    rgba(
      255,
      255,
      255,
      .72
    );
}


/* =========================================================
   DEVICE MANAGEMENT
========================================================= */

.business-fleet {
  padding:
    clamp(
      124px,
      11vw,
      188px
    )
    0;

  background:
    var(--light-hover);
}


/* =========================================================
   DEVICE MANAGEMENT GRID
========================================================= */

.business-fleet-grid {
  display:
    grid;

  grid-template-columns:
    minmax(
      360px,
      .78fr
    )
    minmax(
      560px,
      1.22fr
    );

  gap:
    clamp(
      80px,
      10vw,
      160px
    );

  align-items:
    start;
}


/* =========================================================
   DEVICE MANAGEMENT HEAD
========================================================= */

.business-fleet-head {
  position:
    sticky;

  top:
    calc(
      var(--header-h)
      +
      42px
    );
}


.business-fleet-head h2 {
  max-width:
    680px;
}


.business-fleet-head p {
  max-width:
    500px;
}


/* =========================================================
   FLEET PANEL
========================================================= */

.business-fleet-panel {
  min-width:
    0;

  overflow:
    hidden;

  border-radius:
    var(--radius);

  background:
    #FFFFFF;
}


/* =========================================================
   FLEET PANEL HEAD
========================================================= */

.business-fleet-panel-head {
  min-height:
    78px;

  padding:
    0
    24px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    24px;
}


.business-fleet-panel-head > div {
  display:
    flex;

  align-items:
    baseline;

  gap:
    12px;
}


.business-fleet-panel-head strong {
  color:
    var(--light-text);

  font-size:
    13px;

  font-weight:
    550;
}


.business-fleet-panel-head span,
.business-fleet-panel-head small {
  color:
    var(--light-soft);

  font-size:
    9px;
}


/* =========================================================
   FLEET TABLE
========================================================= */

.business-fleet-table {
  overflow-x:
    auto;

  background:
    var(--light-surface);
}


.business-fleet-row {
  min-width:
    640px;

  min-height:
    72px;

  display:
    grid;

  grid-template-columns:
    minmax(
      150px,
      .85fr
    )
    minmax(
      170px,
      1fr
    )
    minmax(
      110px,
      .55fr
    )
    minmax(
      150px,
      .75fr
    );

  align-items:
    stretch;

  background:
    #FFFFFF;

  transition:
    background-color
    200ms
    ease;
}


.business-fleet-row + .business-fleet-row {
  border-top:
    1px
    solid
    var(--light-border);
}


.business-fleet-row > div {
  padding:
    14px
    16px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  justify-content:
    center;

  gap:
    4px;

  color:
    var(--light-secondary);

  font-size:
    10px;
}

/* =========================================================
   FLEET ACTION ALIGNMENT
========================================================= */

.business-fleet-row > div:last-child {
  align-items:
    center;
}


.business-fleet-row--head > div:last-child {
  align-items:
    center;
}


.business-fleet-row strong {
  color:
    var(--light-text);

  font-size:
    11px;

  font-weight:
    550;
}


.business-fleet-row span {
  color:
    var(--light-soft);

  font-size:
    9px;
}


/* =========================================================
   FLEET HEAD ROW
========================================================= */

.business-fleet-row--head {
  min-height:
    42px;

  background:
    var(--redovar-blue);
}


.business-fleet-row--head > div {
  padding-top:
    0;

  padding-bottom:
    0;

  color:
    rgba(
      255,
      255,
      255,
      .88
    );

  font-size:
    9px;

  font-weight:
    600;
}


/* =========================================================
   PRIMARY DEVICE
========================================================= */

.business-fleet-row--primary {
  background:
    #FCF8F5;
}


.business-fleet-row--primary.is-available {
  background:
    #F4F7FE;
}


/* =========================================================
   FLEET STATUS ICONS

   No pills.
   No background.
   Icon only.
========================================================= */

.business-fleet-status-mark,
.business-fleet-mark {
  width:
    24px;

  height:
    24px;

  display:
    grid;

  place-items:
    center;
}


.business-fleet-status-icon,
.business-fleet-mark-icon {
  width:
    19px;

  height:
    19px;

  display:
    block;

  object-fit:
    contain;
}


/* =========================================================
   ONLINE — GREEN
========================================================= */

.business-fleet-status-icon--online {
  filter:
    brightness(
      0
    )
    saturate(
      100%
    )
    invert(
      48%
    )
    sepia(
      72%
    )
    saturate(
      553%
    )
    hue-rotate(
      84deg
    )
    brightness(
      91%
    )
    contrast(
      88%
    );
}


/* =========================================================
   READY — SOFT GRAY
========================================================= */

.business-fleet-status-icon--ready {
  filter:
    brightness(
      0
    );

  opacity:
    .28;
}


/* =========================================================
   ASSIGNED — BLUE
========================================================= */

.business-fleet-mark-icon--assigned {
  filter:
    brightness(
      0
    )
    saturate(
      100%
    )
    invert(
      18%
    )
    sepia(
      62%
    )
    saturate(
      3380%
    )
    hue-rotate(
      218deg
    )
    brightness(
      80%
    )
    contrast(
      105%
    );
}


/* =========================================================
   UNASSIGNED — RED
========================================================= */

.business-fleet-mark-icon--unassigned {
  filter:
    brightness(
      0
    )
    saturate(
      100%
    )
    invert(
      25%
    )
    sepia(
      89%
    )
    saturate(
      2479%
    )
    hue-rotate(
      350deg
    )
    brightness(
      91%
    )
    contrast(
      91%
    );
}


/* =========================================================
   RESET DEVICE ACTION
========================================================= */

.business-fleet-action {
  width:
    36px;

  height:
    36px;

  padding:
    0;

  display:
    grid;

  place-items:
    center;

  border:
    0;

  border-radius:
    var(--radius);

  background:
    #ECECEA;

  cursor:
    pointer;

  transition:
    background-color
    180ms
    ease,
    transform
    160ms
    ease;
}


.business-fleet-action:hover,
.business-fleet-action:focus-visible {
  background:
    #E9EEFB;
}


.business-fleet-action:active {
  transform:
    translateY(
      1px
    );
}


.business-fleet-action:disabled {
  cursor:
    default;
}


.business-fleet-action img {
  width:
    16px;

  height:
    16px;

  display:
    block;

  object-fit:
    contain;

  filter:
    brightness(
      0
    )
    saturate(
      100%
    )
    invert(
      18%
    )
    sepia(
      62%
    )
    saturate(
      3380%
    )
    hue-rotate(
      218deg
    )
    brightness(
      80%
    )
    contrast(
      105%
    );
}


.business-fleet-action.is-loading {
  background:
    #E9EEFB;
}


.business-fleet-action.is-loading img {
  animation:
    businessFleetResetSpin
    720ms
    cubic-bezier(
      .22,
      1,
      .36,
      1
    );
}


@keyframes businessFleetResetSpin {

  from {
    transform:
      rotate(
        0deg
      );
  }

  to {
    transform:
      rotate(
        -360deg
      );
  }

}


/* =========================================================
   FLEET FOOT
========================================================= */

.business-fleet-foot {
  min-height:
    86px;

  padding:
    0
    24px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;
}


.business-fleet-foot strong {
  color:
    var(--light-text);

  font-size:
    12px;

  font-weight:
    550;
}


/* =========================================================
   CLOSING
========================================================= */

.business-closing {
  padding:
    clamp(
      132px,
      12vw,
      202px
    )
    0;

  background:
    #FFFFFF;
}


.business-closing-inner {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    60px;
}


.business-closing h2 {
  width:
    max-content;

  max-width:
    100%;

  display:
    grid;

  gap:
    0;
}


.business-closing h2 span {
  display:
    block;

  white-space:
    nowrap;
}



/* =========================================================
   RESPONSIVE — 1100
========================================================= */

@media (max-width: 1100px) {

  .business-device-grid,
  .business-fleet-grid {
    gap:
      70px;
  }


  .business-communication-card h3 {
    font-size:
      clamp(
        24px,
        2.5vw,
        34px
      );
  }

}


/* =========================================================
   RESPONSIVE — 900
========================================================= */

@media (max-width: 900px) {

  .business-device-grid,
  .business-fleet-grid {
    grid-template-columns:
      1fr;

    gap:
      56px;
  }


  /* =======================================================
     DEVICE
  ======================================================== */

  .business-device-content {
    padding-bottom:
      0;
  }


  .business-device-visual {
    position:
      static;

    top:
      auto;

    min-height:
      520px;

    max-height:
      none;
  }


  .business-device-visual img {
    height:
      auto;

    max-height:
      620px;
  }


  /* =======================================================
     SCHEDULE HEAD
  ======================================================== */

  .business-schedule-head {
    grid-template-columns:
      1fr;

    row-gap:
      28px;
  }


  .business-schedule-head p {
    width:
      min(
        100%,
        560px
      );

    max-width:
      560px;

    margin:
      0;

    justify-self:
      start;
  }


  /* =======================================================
     COMMUNICATION
  ======================================================== */

  .business-communication-head {
    grid-template-columns:
      1fr;

    row-gap:
      28px;
  }


  .business-communication-head p {
    width:
      min(
        100%,
        560px
      );

    max-width:
      560px;

    margin:
      0;

    justify-self:
      start;
  }


  .business-communication-grid {
    grid-template-columns:
      1fr;
  }


  .business-communication {
    --communication-left-x:
      0px;

    --communication-right-x:
      0px;
  }


  .business-communication-card {
    min-height:
      260px;
  }


  /* =======================================================
     FLEET
  ======================================================== */

  .business-fleet-head {
    position:
      static;

    top:
      auto;
  }

}


/* =========================================================
   RESPONSIVE — 700
========================================================= */

@media (max-width: 700px) {

  main h2 {
    font-size:
      clamp(
        38px,
        10.5vw,
        54px
      );
  }


  /* =======================================================
     HERO
  ======================================================== */

  .business-hero {
    min-height:
      760px;
  }


  .business-hero-inner {
    min-height:
      calc(
        760px
        -
        var(--header-h)
      );

    padding:
      90px
      0;
  }


  .business-hero h1 {
    font-size:
      clamp(
        50px,
        13.5vw,
        70px
      );
  }


  .business-hero-copy > p {
    max-width:
      520px;
  }


  /* =======================================================
     DEVICE
  ======================================================== */

  .business-device-visual {
    min-height:
      440px;
  }


  .business-device-visual img {
    max-height:
      520px;
  }


  .business-device-list {
    grid-template-columns:
      1fr;
  }


  .business-device-item {
    min-height:
      140px;

    padding:
      26px;

    gap:
      38px;
  }


  /* =======================================================
     SCHEDULE
  ======================================================== */

  .business-schedule-toolbar {
    padding:
      18px;

    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .business-schedule-toolbar > div {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      4px;
  }


  .business-schedule-change {
    width:
      100%;
  }


  .business-schedule-foot {
    padding:
      18px;

    grid-template-columns:
      1fr
      1fr;
  }


  /* =======================================================
     COMMUNICATION
  ======================================================== */

  .business-communication-head {
    row-gap:
      22px;
  }


  .business-communication-head p {
    max-width:
      470px;
  }


  /* =======================================================
     CLOSING
  ======================================================== */

  .business-closing-inner {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

}


/* =========================================================
   RESPONSIVE — 520
========================================================= */

@media (max-width: 520px) {

  .business-hero {
    min-height:
      720px;
  }


  .business-hero-inner {
    min-height:
      calc(
        720px
        -
        var(--header-h)
      );
  }


  .business-hero h1 {
    font-size:
      clamp(
        46px,
        13vw,
        60px
      );
  }


  .business-hero-actions {
    flex-direction:
      column;

    gap:
      14px;
  }


  .business-hero-link {
    width:
      max-content;
  }


  .business-device-visual {
    min-height:
      360px;
  }


  .business-device-visual img {
    max-height:
      430px;
  }


  .business-device-item {
    min-height:
      126px;

    padding:
      24px;
  }


  .business-schedule-foot {
    grid-template-columns:
      1fr;

    gap:
      16px;
  }


  .business-communication-card {
    min-height:
      230px;

    padding:
      27px;
  }


  .business-communication-card h3 {
    font-size:
      28px;
  }


  .business-fleet-panel-head {
    padding:
      0
      18px;
  }


  .business-fleet-foot {
    min-height:
      78px;

    padding:
      0
      18px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .business-reveal {
    opacity:
      1;

    transform:
      none;

    transition:
      none;
  }


  .business-device-item,
  .business-communication-card {
    transition:
      none;
  }


  .business-communication {
    --communication-left-x:
      0px;

    --communication-right-x:
      0px;
  }


  .business-schedule-change.is-loading::before {
    animation:
      none;

    width:
      100%;
  }


  .business-fleet-action.is-loading img {
    animation:
      none;
  }

}