body {
        background: #f5f3ef;
      }

      .home-hero {
        min-height: 72vh;
        display: grid;
        place-items: center;
        padding: 42px clamp(18px, 4vw, 48px);
        position: relative;
        overflow: hidden;
        background:
          linear-gradient(180deg, rgba(5, 24, 22, .2), rgba(5, 24, 22, .1)),
    url("../assets/core-hero-background.png"),
          #082f2b;
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        color: white;
        text-align: center;
      }

      .home-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(0, 0, 0, .12), transparent 26%, transparent 74%, rgba(0, 0, 0, .16));
        opacity: .6;
      }

      .home-hero::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 18%;
        z-index: 0;
        height: 1px;
        pointer-events: none;
        background: linear-gradient(90deg, transparent 8%, rgba(255, 255, 255, .08) 22%, rgba(255, 255, 255, .08) 78%, transparent 92%);
        opacity: .72;
      }

      .hero-brand-watermark {
        position: absolute;
        left: max(33px, calc(-2vw + 75px));
        top: 52%;
        z-index: 0;
        width: min(820px, 60vw);
        max-height: 68vh;
        object-fit: contain;
        opacity: .18;
        filter: saturate(.8) brightness(.9);
        transform: translateY(-50%);
        pointer-events: none;
        user-select: none;
      }

      .hero-envelope-art {
        position: absolute;
        top: clamp(106px, calc(12vh + 30px), 154px);
        right: clamp(72px, calc(3vw + 90px), 142px);
        z-index: 0;
        width: min(520px, 38vw);
        max-height: 40vh;
        object-fit: contain;
        opacity: .34;
        filter: saturate(.85) brightness(.96);
        transform: rotate(-2deg);
        pointer-events: none;
        user-select: none;
      }

      .home-hero-inner {
        position: relative;
        z-index: 1;
        width: min(780px, 100%);
        display: grid;
        justify-items: center;
        text-align: center;
        transform: translateY(56px);
        opacity: 0;
        animation: homeHeroRise .9s cubic-bezier(.16, .84, .22, 1) .18s forwards;
      }

      .home-hero-inner .eyebrow,
      .home-hero-inner h1,
      .home-hero-inner p,
      .home-hero-inner .home-actions {
        transform: translateY(18px);
        opacity: 0;
        animation: homeHeroItemRise .72s cubic-bezier(.16, .84, .22, 1) forwards;
      }

      .home-hero-inner .eyebrow {
        animation-delay: .18s;
      }

      .home-hero-inner h1 {
        animation-delay: .26s;
      }

      .home-hero-inner p {
        animation-delay: .36s;
      }

      .home-hero-inner .home-actions {
        animation-delay: .48s;
      }

      @keyframes homeHeroRise {
        0% {
          transform: translateY(56px);
          opacity: 0;
        }
        100% {
          transform: translateY(0);
          opacity: 1;
        }
      }

      @keyframes homeHeroItemRise {
        to {
          transform: translateY(0);
          opacity: 1;
        }
      }

      .home-hero h1 {
        display: inline-block;
        width: fit-content;
        max-width: 100%;
        margin: 0 auto;
        font-size: clamp(38px, 7vw, 82px);
        line-height: 1.03;
        letter-spacing: -.03em;
        transform: translateX(-.02em);
      }

      .home-hero p {
        max-width: 620px;
        margin: 18px auto 28px;
        color: rgba(255, 255, 255, .86);
        font-size: 18px;
        line-height: 1.7;
      }

      .home-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
      }

      .home-actions .button {
        width: auto;
      }

      #goToOrderButton {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        border-color: rgba(203, 255, 226, .56);
        box-shadow:
          0 0 0 1px rgba(255, 255, 255, .16),
          0 0 18px rgba(157, 255, 205, .28),
          0 12px 26px rgba(0, 0, 0, .2);
        animation: orderButtonPulse 3s ease-in-out infinite;
      }

      #goToOrderButton::before {
        content: "";
        position: absolute;
        inset: -2px;
        z-index: 1;
        border-radius: inherit;
        padding: 2px;
        pointer-events: none;
        background: conic-gradient(
          from 0deg,
          transparent 0deg 240deg,
          rgba(190, 255, 215, .18) 266deg,
          rgba(255, 255, 255, .96) 286deg,
          rgba(146, 255, 190, .96) 300deg,
          transparent 326deg 360deg
        );
        -webkit-mask:
          linear-gradient(#000 0 0) content-box,
          linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        animation: orderButtonEnergy 3s linear infinite;
      }

      #goToOrderButton::after {
        content: "";
        position: absolute;
        inset: 1px;
        z-index: -1;
        border-radius: inherit;
        background: radial-gradient(circle at 50% 0%, rgba(212, 255, 228, .18), transparent 42%);
        opacity: .9;
      }

      @keyframes orderButtonEnergy {
        to {
          transform: rotate(360deg);
        }
      }

      @keyframes orderButtonPulse {
        0%, 68%, 100% {
          filter: brightness(1) saturate(1);
          box-shadow:
            0 0 0 1px rgba(255, 255, 255, .16),
            0 0 14px rgba(157, 255, 205, .22),
            0 12px 26px rgba(0, 0, 0, .2);
        }
        78%, 88% {
          filter: brightness(1.24) saturate(1.1);
          box-shadow:
            0 0 0 1px rgba(226, 255, 237, .5),
            0 0 24px rgba(172, 255, 205, .56),
            0 0 44px rgba(255, 255, 255, .2),
            0 14px 30px rgba(0, 0, 0, .24);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        #goToOrderButton,
        #goToOrderButton::before {
          animation: none;
        }
      }

      .home-section {
        padding: 34px clamp(18px, 4vw, 48px) 48px;
      }

      .business-footer {
        padding: 22px clamp(18px, 4vw, 48px) 28px;
        border-top: 1px solid #ddd8cf;
        background: #ebe7df;
        color: #5f666d;
      }

      .business-footer-inner {
        width: min(1380px, 100%);
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 8px 18px;
        align-items: center;
        font-size: 13px;
        line-height: 1.7;
      }

      .business-footer-inner strong {
        color: #2f363d;
        font-size: 14px;
        font-weight: 900;
      }

      .business-footer-copyright {
        flex-basis: 100%;
        color: #737b82;
        font-size: 12px;
      }

      .public-order-panel {
        min-width: 0;
        max-width: none;
        margin: 0;
      }

      .public-order-layout {
        width: min(1380px, 100%);
        display: grid;
        grid-template-columns: minmax(0, 1fr) 345px;
        gap: 18px;
        align-items: start;
        margin: 0 auto;
      }

      .order-live-summary {
        position: sticky;
        top: 82px;
        align-self: start;
        width: 100%;
        min-width: 320px;
        overflow: hidden;
        border-radius: 8px;
        border: 1px solid rgba(20, 184, 166, .22);
        background: linear-gradient(180deg, #0b5f59 0%, #084a45 58%, #073b37 100%);
        color: #ffffff;
        box-shadow: 0 18px 38px rgba(5, 36, 33, .26);
      }

      .order-summary-section {
        position: relative;
        display: grid;
        gap: 9px;
        min-height: 87px;
        padding: 18px 21px;
        border-bottom: 1px solid rgba(199, 255, 234, .16);
      }

      .order-summary-section[hidden] {
        display: none !important;
      }

      .order-summary-section:last-of-type {
        border-bottom: 0;
      }

      .order-summary-section strong {
        padding-right: 28px;
        font-size: 15px;
        font-weight: 900;
        white-space: nowrap;
        word-break: keep-all;
      }

      .order-summary-section span,
      .order-summary-section small {
        color: rgba(255, 255, 255, .9);
        font-size: 14px;
        line-height: 1.55;
        overflow-wrap: anywhere;
      }

      .order-summary-section small {
        color: rgba(255, 255, 255, .76);
      }

      .order-summary-section span:empty,
      .order-summary-section small:empty,
      .order-summary-chip:empty {
        display: none;
      }

      .order-summary-check {
        position: absolute;
        top: 18px;
        right: 18px;
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .18);
        box-shadow: none;
        font-size: 0;
      }

      .order-summary-section.is-complete .order-summary-check {
        background: #4ade80;
        box-shadow:
          0 0 0 3px rgba(74, 222, 128, .15),
          0 0 16px rgba(74, 222, 128, .82);
      }

      .order-summary-chip-row {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
      }

      .order-summary-chip {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        border-radius: 6px;
        padding: 0 10px;
        background: rgba(235, 255, 247, .95);
        color: #073b37 !important;
        font-size: 14px;
        font-weight: 900;
      }

      .order-summary-chip.is-muted {
        background: rgba(255, 255, 255, .22);
        color: rgba(255, 255, 255, .58) !important;
      }

      .order-live-summary .button {
        width: calc(100% - 32px);
        margin: 16px;
        min-height: 53px;
        background: rgba(255, 255, 255, .18);
        border-color: rgba(255, 255, 255, .24);
        color: #ffffff;
        opacity: .55;
        cursor: not-allowed;
      }

      .order-live-summary .button:not(:disabled) {
        background: #0f766e;
        border-color: #14b8a6;
        opacity: 1;
        cursor: pointer;
        box-shadow:
          0 0 0 1px rgba(196, 255, 246, .18),
          0 0 16px rgba(20, 184, 166, .32);
      }

      .order-live-summary .button:not(:disabled):hover {
        background: #0d635d;
      }

      .signup-cta .auth-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(140px, 1fr));
        gap: 10px;
      }

      .signup-cta .auth-actions.logged-in {
        grid-template-columns: minmax(140px, 180px);
        justify-content: end;
      }

      .signup-cta .auth-actions .button {
        width: 100%;
        min-width: 0;
      }

      #showCustomerSignup {
        background: var(--brand);
        color: white;
      }

      #showCustomerLogin {
        background: #d97706;
        color: white;
      }

      #showCustomerLogin:hover {
        background: #b45309;
      }

      #homeLogout {
        color: #b42318;
        font-weight: 900;
      }

      #homeLogout:hover {
        border-color: #b42318;
        color: #8f1d14;
      }

      .hidden-admin-entry {
        position: fixed;
        left: 14px;
        bottom: 14px;
        z-index: 40;
        width: 24px;
        height: 24px;
        display: inline-grid;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        opacity: .42;
      }

      .hidden-admin-entry img {
        width: 7px;
        height: 7px;
        display: block;
      }

      .hidden-admin-entry:hover,
      .hidden-admin-entry:focus-visible {
        opacity: .86;
        outline: none;
      }

      .delivery-type-options {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
      }

      .delivery-type-options .vehicle-card {
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr);
        align-items: start;
        min-height: 78px;
        padding: 11px 12px;
      }

      .delivery-type-options .vehicle-card strong,
      .delivery-type-options .vehicle-card small {
        grid-column: 2;
      }

      .delivery-type-options .vehicle-card strong {
        font-size: 15px;
      }

      .delivery-type-options .vehicle-card small {
        font-size: 11px;
      }

      .delivery-type-options .vehicle-card.option-disabled {
        background: #f2f5f4;
        border-color: #d8e0dd;
        color: #8b9793;
        cursor: not-allowed;
        opacity: .72;
      }

      .delivery-type-options .vehicle-card.option-disabled strong,
      .delivery-type-options .vehicle-card.option-disabled small {
        color: #8b9793;
      }

      .delivery-type-options .vehicle-card.option-disabled input {
        cursor: not-allowed;
      }

      .vehicle-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
      }

      .vehicle-grid .vehicle-card {
        min-height: 96px;
      }

      .vehicle-grid .vehicle-card {
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr);
        align-items: start;
      }

      .vehicle-grid .vehicle-card-illustrated {
        grid-template-columns: 22px minmax(0, 1fr) 86px;
        overflow: hidden;
      }

      .vehicle-grid .vehicle-card strong,
      .vehicle-grid .vehicle-card small {
        grid-column: 2;
      }

      .vehicle-grid .vehicle-card small {
        margin-top: 4px;
      }

      .vehicle-card-image {
        grid-column: 3;
        grid-row: 1 / span 2;
        align-self: center;
        justify-self: end;
        width: 92px;
        max-width: 100%;
        height: auto;
        margin: -6px -8px -8px 4px;
        pointer-events: none;
      }

      .vehicle-card-image.motorcycle-photo {
        width: 104px;
        margin: 0 -10px -6px 0;
      }

      .vehicle-card-image.damas-photo {
        width: 108px;
        max-width: none;
        margin: 2px -9px -6px 0;
      }

      .vehicle-card-image.labo-photo {
        width: 117px;
        max-width: none;
        margin: 4px -4px -6px 0;
      }

      .vehicle-card-image.truck-photo {
        width: 121px;
        max-width: none;
        margin: 6px -6px -6px 0;
      }

      .vehicle-grid.vehicle-carousel {
        position: relative;
        display: flex;
        grid-template-columns: none;
        align-items: center;
        justify-content: center;
        height: 188px;
        min-height: 188px;
        gap: 0;
        padding: 0 54px;
        overflow: hidden;
        isolation: isolate;
        touch-action: pan-y;
      }

      .vehicle-carousel .vehicle-card {
        position: absolute;
        top: 50%;
        left: 50%;
        width: min(280px, calc(100% - 112px));
        min-height: 134px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 108px;
        align-items: center;
        padding: 16px;
        overflow: hidden;
        border-radius: 8px;
        transform: translate(-50%, -50%) translateX(0) scale(.76);
        opacity: .28;
        z-index: 1;
        transition: transform 320ms ease, opacity 320ms ease, box-shadow 320ms ease;
        will-change: transform, opacity;
      }

      .vehicle-carousel .vehicle-card input {
        position: absolute;
        width: 1px;
        min-height: 1px;
        margin: 0;
        opacity: 0;
        pointer-events: none;
      }

      .vehicle-carousel .vehicle-card strong,
      .vehicle-carousel .vehicle-card small {
        grid-column: 1;
        position: relative;
        z-index: 2;
      }

      .vehicle-carousel .vehicle-card strong {
        font-size: 20px;
      }

      .vehicle-carousel .vehicle-card small {
        max-width: 128px;
        margin-top: 7px;
        font-size: 12px;
      }

      .vehicle-carousel .vehicle-card-image {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
        justify-self: end;
        max-width: none;
      }

      .vehicle-carousel .vehicle-card.active,
      .vehicle-carousel .vehicle-card.selected {
        transform: translate(-50%, -50%) translateX(0) scale(1);
        opacity: 1;
        z-index: 10;
        border-color: var(--brand);
        background: var(--soft);
        box-shadow: 0 14px 30px rgba(15, 118, 110, .18);
      }

      .vehicle-carousel .vehicle-card.left-1 {
        transform: translate(-50%, -50%) translateX(-104px) scale(.9);
        opacity: .7;
        z-index: 6;
      }

      .vehicle-carousel .vehicle-card.left-2 {
        transform: translate(-50%, -50%) translateX(-154px) scale(.82);
        opacity: .46;
        z-index: 4;
      }

      .vehicle-carousel .vehicle-card.left-3 {
        transform: translate(-50%, -50%) translateX(-190px) scale(.76);
        opacity: .3;
        z-index: 2;
      }

      .vehicle-carousel .vehicle-card.right-1 {
        transform: translate(-50%, -50%) translateX(104px) scale(.9);
        opacity: .7;
        z-index: 6;
      }

      .vehicle-carousel .vehicle-card.right-2 {
        transform: translate(-50%, -50%) translateX(154px) scale(.82);
        opacity: .46;
        z-index: 4;
      }

      .vehicle-carousel .vehicle-card.right-3 {
        transform: translate(-50%, -50%) translateX(190px) scale(.76);
        opacity: .3;
        z-index: 2;
      }

      .vehicle-carousel-button {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 20;
        width: 41px;
        min-height: 41px;
        display: inline-grid;
        place-items: center;
        border: 0;
        border-radius: 6px;
        background: var(--brand);
        color: #fff;
        font-size: 36px;
        font-weight: 900;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 10px 20px rgba(15, 118, 110, .18);
        pointer-events: auto;
      }

      .vehicle-carousel-button:hover,
      .vehicle-carousel-button:focus-visible {
        background: var(--brand-dark);
        color: #fff;
        outline: 0;
      }

      .vehicle-carousel-button:disabled {
        opacity: .35;
        cursor: default;
        box-shadow: none;
      }

      .vehicle-carousel-button:disabled:hover {
        background: var(--brand);
      }

      .vehicle-carousel-button span {
        transform: translateY(-5px);
      }

      .vehicle-carousel:focus-visible {
        outline: 3px solid rgba(15, 118, 110, .2);
        outline-offset: 3px;
      }

      .vehicle-carousel-prev {
        transform: translate(calc(-50% - 300px), -50%);
      }

      .vehicle-carousel-next {
        transform: translate(calc(-50% + 300px), -50%);
      }

      .freight-detail-panel {
        display: block;
      }

      .freight-detail-panel[hidden] {
        display: none !important;
      }

      .freight-detail-grid {
        display: grid;
        grid-template-columns: minmax(340px, .95fr) minmax(320px, 1.05fr);
        gap: 14px;
        align-items: stretch;
      }

      .freight-left-fields {
        display: grid;
        gap: 12px;
        align-content: start;
      }

      .freight-load-field {
        justify-self: start;
        width: min(180px, 100%);
      }

      .freight-method-fields {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        align-items: end;
      }

      .freight-method-fields.is-linked-delivery-fixed select:disabled {
        background: #eef6f4;
        color: var(--ink);
        cursor: not-allowed;
        opacity: 1;
      }

      .freight-method-fields[hidden],
      .freight-item-detail-field[hidden] {
        display: none !important;
      }

      .freight-item-detail-field {
        min-width: 0;
        padding-left: 14px;
        border-left: 1px solid var(--line);
      }

      .freight-item-detail-field textarea {
        min-height: 108px;
        resize: vertical;
      }

      .truck-detail-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        gap: 12px;
        align-items: end;
      }

      .truck-detail-grid label:nth-child(-n + 2) select {
        width: 33.333%;
        min-width: 96px;
      }

      .truck-lift-field {
        display: inline-grid;
        gap: 8px;
        justify-items: center;
        align-content: end;
        width: max-content;
        cursor: pointer;
      }

      .truck-lift-field span {
        white-space: nowrap;
      }

      .truck-lift-field input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        display: grid;
        place-content: center;
        width: 27px;
        height: 27px;
        margin: 0;
        border: 2px solid #cfd8d5;
        border-radius: 7px;
        background: #ffffff;
        cursor: pointer;
        transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
      }

      .truck-lift-field input[type="checkbox"]::after {
        content: "";
        width: 7px;
        height: 13px;
        border: solid #ffffff;
        border-width: 0 3px 3px 0;
        transform: rotate(45deg) scale(0);
        transform-origin: center;
        transition: transform .14s ease;
      }

      .truck-lift-field input[type="checkbox"]:checked {
        border-color: var(--brand);
        background: var(--brand);
      }

      .truck-lift-field input[type="checkbox"]:checked::after {
        transform: rotate(45deg) scale(1);
      }

      .truck-lift-field input[type="checkbox"]:focus-visible {
        outline: 3px solid rgba(15, 118, 110, .18);
        outline-offset: 2px;
      }

      .service-detail-row {
        display: grid;
        grid-template-columns: minmax(220px, .45fr) minmax(360px, .55fr);
        gap: 12px;
        align-items: end;
      }

      .service-detail-group {
        display: grid;
        gap: 10px;
        padding: 14px;
        border: 1px solid #d8d4cc;
        border-radius: 8px;
        background: #fbfaf7;
      }

      .service-detail-group legend {
        padding: 0 4px;
        color: #69717a;
        font-size: 12px;
        font-weight: 900;
      }

      .service-detail-fields {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }

      .waypoint-panel {
        display: grid;
        gap: 14px;
      }

      .waypoint-panel[hidden] {
        display: none !important;
      }

      .waypoint-action-group {
        display: grid;
        gap: 8px;
        margin: 0;
        border: 0;
        padding: 0;
      }

      .waypoint-action-group legend {
        color: #69717a;
        font-size: 12px;
        font-weight: 900;
      }

      .segmented-options {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .segmented-options label {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #ffffff;
        color: var(--text);
        font-weight: 900;
        cursor: pointer;
      }

      .segmented-options label:has(input:checked) {
        border-color: var(--brand);
        background: var(--soft);
        color: var(--brand-dark);
      }

      .time-label-row {
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }

      .time-info-tooltip {
        position: relative;
        width: 17px;
        height: 17px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #0f766e;
        border-radius: 50%;
        background: #eef8f6;
        color: #0b5f59;
        cursor: help;
        font-size: 11px;
        font-weight: 900;
        line-height: 1;
      }

      .time-info-tooltip::after {
        content: attr(data-tooltip);
        position: absolute;
        left: 50%;
        bottom: calc(100% + 9px);
        z-index: 30;
        width: min(340px, calc(100vw - 40px));
        transform: translateX(-50%);
        border: 1px solid #b8dad6;
        border-radius: 8px;
        padding: 12px 14px;
        background: #ffffff;
        box-shadow: 0 14px 34px rgba(27, 37, 44, .16);
        color: #1f2428;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.55;
        white-space: pre-line;
        opacity: 0;
        pointer-events: none;
        transition: opacity .16s ease, transform .16s ease;
      }

      .time-info-tooltip:hover::after,
      .time-info-tooltip:focus-visible::after {
        opacity: 1;
        transform: translateX(-50%) translateY(-2px);
      }

      .cargo-grid.columns-four {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 10px;
        row-gap: 12px;
        align-items: start;
      }

      .cargo-column {
        display: grid;
        gap: 12px;
        align-content: start;
      }

      .cargo-group-card {
        display: grid;
        gap: 12px;
        align-content: start;
        border: 1px solid rgba(15, 118, 110, .28);
        border-radius: 10px;
        padding: 12px;
        background: #f7fbf9;
      }

      .cargo-group-card.is-expanded {
        border-color: rgba(15, 118, 110, .46);
        background: #f3faf7;
      }

      .cargo-category-head {
        min-height: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(15, 118, 110, .18);
      }

      .cargo-category-spacer {
        visibility: visible;
      }

      .cargo-category-label {
        color: #0f766e;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0;
      }

      .cargo-stepper {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(48px, 1fr) auto;
        gap: 10px;
        align-items: stretch;
        min-height: 120px;
        width: 100%;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 16px 18px;
        background: white;
      }

      .cargo-stepper.is-selected {
        border-color: var(--brand);
        background: #f2faf6;
        box-shadow: 0 0 0 3px rgba(15, 118, 110, .14), 0 10px 22px rgba(12, 67, 62, .12);
      }

      .cargo-stepper.is-selected .cargo-copy strong {
        color: var(--brand-dark);
      }

      .cargo-stepper.is-selected .cargo-controls span {
        border-color: var(--brand);
        background: var(--brand);
        color: #ffffff;
      }

      .cargo-collapse-item[hidden] {
        display: none !important;
      }

      .cargo-toggle-button {
        position: relative;
        display: inline-grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border: 1px solid #cfd8d5;
        border-radius: 8px;
        background: #ffffff;
        color: var(--brand-dark);
        font-size: 0;
        font-weight: 900;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(12, 67, 62, .06);
      }

      .cargo-toggle-button::before {
        content: "▾";
        position: absolute;
        left: 50%;
        top: 50%;
        display: grid;
        place-items: center;
        width: 1em;
        height: 1em;
        transform: translate(calc(-50% - .5px), -50%);
        color: inherit;
        font-size: 28px;
        font-weight: 900;
        line-height: 1;
        pointer-events: none;
      }

      .cargo-toggle-button:hover {
        border-color: var(--brand);
        background: var(--soft);
      }

      .cargo-toggle-button[aria-expanded="false"] {
        border-color: var(--brand);
        background: var(--brand);
        color: #ffffff;
      }

      .cargo-toggle-button[aria-expanded="false"]:hover {
        border-color: var(--brand-dark);
        background: var(--brand-dark);
      }

      .cargo-toggle-button[aria-expanded="true"] {
        background: #ffffff;
        border-color: #cfd8d5;
        color: var(--brand-dark);
      }

      .cargo-toggle-button[aria-expanded="true"]::before {
        content: "▴";
        font-size: 28px;
      }

      .cargo-toggle-button[data-cargo-toggle="shopping"]::before,
      .cargo-toggle-button[data-cargo-toggle="bag"]::before {
        transform: translate(-50%, -50%);
      }

      .cargo-toggle-row {
        display: flex;
        justify-content: flex-end;
        min-height: 34px;
      }

      .cargo-category-head .cargo-toggle-row {
        min-height: 0;
      }

      .cargo-copy {
        min-width: 0;
        display: grid;
        gap: 4px;
      }

      .cargo-copy strong {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 15px;
        line-height: 1.2;
        white-space: nowrap;
      }

      .cargo-copy small {
        color: var(--muted);
        font-size: 11.5px;
        line-height: 1.45;
        min-height: 18px;
      }

      .cargo-controls {
        display: inline-grid;
        grid-template-columns: 32px 38px 32px;
        gap: 5px;
        align-items: center;
        width: 112px;
        justify-self: start;
        flex-shrink: 0;
      }

      .cargo-controls button,
      .cargo-controls span {
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fbfaf7;
        font-weight: 800;
      }

      .cargo-controls button {
        background: white;
        cursor: pointer;
      }

      .cargo-controls button:disabled {
        opacity: .42;
        cursor: not-allowed;
      }

      .guest-verification-rows {
        display: grid;
        gap: 12px;
      }

      .inline-field-action {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 154px;
        gap: 10px;
        align-items: center;
      }

      .inline-field-action .button {
        width: 100%;
        min-height: 48px;
      }

      @media (max-width: 760px) {
        .home-hero {
          background-attachment: scroll;
        }

        .public-order-layout {
          grid-template-columns: 1fr;
        }

        .order-live-summary {
          position: static;
          order: -1;
          min-width: 0;
        }

        .hero-brand-watermark {
          left: -43px;
          width: 490px;
          opacity: .12;
        }

        .hero-envelope-art {
          top: 110px;
          right: 26px;
          width: 310px;
          opacity: .2;
        }

        .home-hero::after {
          bottom: 16%;
          opacity: .58;
        }

        .delivery-type-options,
        .vehicle-grid,
        .truck-detail-grid,
        .service-detail-row,
        .service-detail-fields,
        .cargo-grid.columns-four {
          grid-template-columns: 1fr;
        }

        .cargo-controls {
          justify-self: start;
        }

        .inline-field-action {
          grid-template-columns: 1fr;
        }

        .freight-detail-grid {
          grid-template-columns: 1fr;
        }

        .freight-method-fields {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .freight-load-field {
          width: 100%;
        }

        .truck-detail-grid label:nth-child(-n + 2) select {
          width: min(180px, 100%);
        }

        .freight-item-detail-field {
          padding-top: 14px;
          padding-left: 0;
          border-top: 1px solid var(--line);
          border-left: 0;
        }

        .vehicle-grid.vehicle-carousel {
          height: 166px;
          min-height: 166px;
          padding: 0 38px;
          overflow: hidden;
        }

        .vehicle-carousel .vehicle-card {
          width: min(224px, calc(100% - 76px));
          min-height: 122px;
          grid-template-columns: minmax(0, 1fr) 84px;
          padding: 13px;
        }

        .vehicle-carousel .vehicle-card strong {
          font-size: 18px;
        }

        .vehicle-carousel .vehicle-card small {
          max-width: 108px;
          font-size: 11px;
        }

        .vehicle-carousel .vehicle-card-image {
          width: 92px;
        }

        .vehicle-carousel .vehicle-card-image.motorcycle-photo {
          width: 94px;
        }

        .vehicle-carousel .vehicle-card-image.damas-photo {
          width: 94px;
        }

        .vehicle-carousel .vehicle-card-image.labo-photo {
          width: 98px;
        }

        .vehicle-carousel .vehicle-card-image.truck-photo {
          width: 101px;
        }

        .vehicle-carousel .vehicle-card.left-1 {
          transform: translate(-50%, -50%) translateX(-58px) scale(.88);
          opacity: .66;
        }

        .vehicle-carousel .vehicle-card.right-1 {
          transform: translate(-50%, -50%) translateX(58px) scale(.88);
          opacity: .66;
        }

        .vehicle-carousel .vehicle-card.left-2 {
          transform: translate(-50%, -50%) translateX(-92px) scale(.8);
          opacity: .28;
        }

        .vehicle-carousel .vehicle-card.right-2 {
          transform: translate(-50%, -50%) translateX(92px) scale(.8);
          opacity: .28;
        }

        .vehicle-carousel .vehicle-card.left-3 {
          transform: translate(-50%, -50%) translateX(-118px) scale(.74);
          opacity: .2;
        }

        .vehicle-carousel .vehicle-card.right-3 {
          transform: translate(-50%, -50%) translateX(118px) scale(.74);
          opacity: .2;
        }

        .vehicle-carousel-button {
          width: 36px;
          min-height: 36px;
          font-size: 31px;
        }

      }