/* Site styles. Colours, fonts and radius come only from the tenant tokens (--cf-*), never hard-coded. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 5rem;
}

html, body {
  margin: 0;
  background: var(--cf-bg);
  color: var(--cf-ink);
  font-family: var(--cf-font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

main {
  flex: 1;
}

h1, h2, h3 {
  font-family: var(--cf-font-heading);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

a {
  color: var(--cf-primary);
}

img {
  max-width: 100%;
  height: auto;
}

/* Headings receive focus after navigation (screen readers); no visible ring for that programmatic focus. */
h1:focus,
[tabindex="-1"]:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--cf-primary);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--cf-ink);
  color: var(--cf-bg);
}

.skip-link:focus {
  top: 1rem;
}

.site-container {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 40rem) {
  .site-container {
    padding: 0 1.5rem;
  }
}

.wz-icon {
  flex: none;
  vertical-align: middle;
}

/* ---- Buttons ------------------------------------------------------------------------------------- */

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--cf-primary);
  border-radius: 999px;
  background: var(--cf-primary);
  color: #fff;
  font-family: var(--cf-font-heading);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 10px 24px -14px var(--cf-primary);
}

.cta:hover {
  border-color: var(--cf-primary-hover);
  background: var(--cf-primary-hover);
}

.cta:hover .wz-icon {
  transform: translateX(3px);
}

.cta .wz-icon {
  transition: transform 0.2s;
}

.cta:active {
  transform: scale(0.97);
}

.cta-small {
  min-height: 40px;
  padding: 0.5rem 1.125rem;
  font-size: 0.9375rem;
  box-shadow: none;
}

.cta-ghost {
  border-color: var(--cf-border);
  background: var(--cf-bg);
  color: var(--cf-ink);
  box-shadow: none;
}

.cta-ghost:hover {
  border-color: var(--cf-ink);
  background: var(--cf-bg);
}

.cta-light {
  border-color: var(--cf-bg);
  background: var(--cf-bg);
  color: var(--cf-primary);
  box-shadow: none;
}

.cta-light:hover {
  border-color: var(--cf-primary-tint);
  background: var(--cf-primary-tint);
}

.cta-outline-light {
  border-color: color-mix(in srgb, var(--cf-bg) 60%, transparent);
  background: transparent;
  color: var(--cf-bg);
  box-shadow: none;
}

.cta-outline-light:hover {
  border-color: var(--cf-bg);
  background: color-mix(in srgb, var(--cf-bg) 12%, transparent);
}

/* ---- Header -------------------------------------------------------------------------------------- */

/* Top bar: phone, language and sign-in above the header (the header itself keeps logo, menu and quote button). */
.site-topbar {
  border-bottom: 1px solid var(--cf-border);
  background: var(--cf-surface);
  font-size: 0.875rem;
}

.site-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  min-height: 2.5rem;
}

.site-topbar .site-phone,
.site-topbar .site-language a,
.site-account {
  min-height: 36px;
}

.site-topbar .site-phone {
  margin-right: auto;
}

/* "Register" next to "Sign in": filled, so the way into the parcel service stands out on every page. */
.site-signup {
  background: var(--cf-primary);
  color: #fff;
}

.site-signup:hover,
.site-signup:focus-visible {
  background: var(--cf-primary-hover);
  color: #fff;
}

/* The hidden attribute (set once signed in) must win over display: inline-flex. */
.site-account[hidden],
.site-menu-account[hidden] {
  display: none;
}

.site-topbar .site-phone-number {
  display: none;
}

.site-account {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  color: var(--cf-ink);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.site-account:hover {
  background: var(--cf-bg);
}

.site-account .wz-icon {
  color: var(--cf-primary);
}

/* Signed in: the first name, highlighted, links to "my account". */
.site-account.is-signed-in {
  background: var(--cf-primary-tint);
  color: var(--cf-primary);
}

@media (min-width: 40rem) {
  .site-topbar .site-phone-number {
    display: inline;
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--cf-border);
  background: color-mix(in srgb, var(--cf-bg) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.5rem;
}

.site-brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  color: var(--cf-ink);
  text-decoration: none;
}

.site-brand img {
  display: block;
  height: 48px;
  width: auto;
}

.site-wordmark {
  font-family: var(--cf-font-heading);
  font-size: 1.125rem;
  font-weight: 800;
  white-space: nowrap;
}

.site-wordmark::before {
  content: "";
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  margin-right: 0.5rem;
  border-radius: 3px;
  background: var(--cf-primary);
  transform: rotate(45deg) translateY(-2px);
}

.site-nav-desktop {
  display: none;
  flex: 1;
}

.site-nav-desktop ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav-desktop a {
  display: block;
  padding: 0.5rem 0.625rem;
  border-radius: 999px;
  color: var(--cf-ink);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav-desktop a:hover {
  background: var(--cf-surface);
}

.site-nav-desktop a[aria-current="page"] {
  background: var(--cf-primary-tint);
  color: var(--cf-primary);
}

.site-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.375rem;
  margin-left: auto;
}

.site-language a {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  min-height: 40px;
  border-radius: 999px;
  color: var(--cf-ink);
  font-family: var(--cf-font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
}

.site-language a:hover {
  background: var(--cf-surface);
}

.site-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 40px;
  min-height: 40px;
  padding: 0 0.5rem;
  border-radius: 999px;
  color: var(--cf-ink);
  font-weight: 600;
  text-decoration: none;
}

.site-phone:hover {
  background: var(--cf-surface);
}

.site-menu-account {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0;
  font-weight: 600;
}

.site-phone .wz-icon {
  color: var(--cf-primary);
}

.site-phone-number,
.site-header-cta {
  display: none;
}

/* Mobile menu: a <details> element, so it works without JavaScript. */
.site-menu {
  position: relative;
}

.site-menu-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
}

.site-menu-toggle::-webkit-details-marker {
  display: none;
}

.site-menu-toggle:hover {
  background: var(--cf-surface);
}

.site-menu-bars,
.site-menu-bars::before,
.site-menu-bars::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--cf-ink);
  transition: transform 0.2s, opacity 0.2s;
}

.site-menu-bars {
  position: relative;
}

.site-menu-bars::before,
.site-menu-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.site-menu-bars::before {
  top: -6px;
}

.site-menu-bars::after {
  top: 6px;
}

.site-menu[open] .site-menu-bars {
  background: transparent;
}

.site-menu[open] .site-menu-bars::before {
  transform: translateY(6px) rotate(45deg);
}

.site-menu[open] .site-menu-bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

.site-menu-panel {
  position: fixed;
  top: 4.5rem;
  right: 0;
  left: 0;
  display: grid;
  gap: 1rem;
  padding: 1rem 1rem 1.5rem;
  border-bottom: 1px solid var(--cf-border);
  background: var(--cf-bg);
  box-shadow: 0 24px 40px -24px rgb(0 0 0 / 0.25);
  animation: menu-in 0.2s ease-out;
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.site-menu-panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-menu-panel a:not(.cta) {
  display: block;
  padding: 0.875rem 0.25rem;
  border-bottom: 1px solid var(--cf-border);
  color: var(--cf-ink);
  font-family: var(--cf-font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
}

.site-menu-panel a[aria-current="page"] {
  color: var(--cf-primary);
}

@media (min-width: 48rem) {
  .site-header-cta {
    display: inline-flex;
  }
}

/* The number itself only where it fits next to the full menu; below that the icon still calls. */
@media (min-width: 100rem) {
  .site-phone-number {
    display: inline;
  }
}

@media (min-width: 80rem) {
  .site-nav-desktop {
    display: block;
  }

  .site-menu {
    display: none;
  }

  .site-actions {
    margin-left: 0;
  }
}

/* ---- Hero ---------------------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 3rem 0 3.5rem;
  background:
    radial-gradient(50rem 26rem at 100% 0%, var(--cf-primary-soft), transparent 62%),
    var(--cf-primary-tint);
}

.hero-large {
  padding: 4rem 0 5rem;
}

.hero-arc {
  position: absolute;
  right: -6rem;
  bottom: -8rem;
  width: 36rem;
  fill: none;
  stroke: var(--cf-ink);
  stroke-width: 2;
  opacity: 0.08;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  display: grid;
  align-items: center;
  gap: 2.5rem;
}

@media (min-width: 56rem) {
  .hero-large .hero-inner,
  .hero.has-image .hero-inner {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.hero-eyebrow {
  display: inline-block;
  margin: 0 0 0.875rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--cf-bg);
  color: var(--cf-primary);
  font-family: var(--cf-font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-title {
  max-width: 40rem;
  margin: 0;
  font-size: clamp(2rem, 1.4rem + 2.8vw, 3.25rem);
  letter-spacing: -0.02em;
}

.hero-large .hero-title {
  font-size: clamp(2.25rem, 1.4rem + 3.8vw, 4rem);
}

.hero-lead {
  max-width: 38rem;
  margin: 1rem 0 0;
  color: var(--cf-muted);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 2rem;
}

.hero-cta-note {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--cf-muted);
  font-size: 0.9375rem;
}

.hero-cta-note .wz-icon {
  color: var(--cf-accent);
}

.hero-media {
  margin: 0;
}

.hero-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--cf-radius);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.4);
}

.hero-illustration {
  display: none;
}

@media (min-width: 56rem) {
  .hero-illustration {
    display: block;
  }
}

.hero-illustration svg {
  width: 100%;
  max-width: 26rem;
  margin-left: auto;
  overflow: visible;
}

.hero-illustration .route {
  fill: none;
  stroke: var(--cf-primary);
  stroke-width: 3;
  stroke-dasharray: 2 10;
  stroke-linecap: round;
  animation: route 30s linear infinite;
}

@keyframes route {
  to {
    stroke-dashoffset: -400;
  }
}

.hero-illustration .dot {
  fill: var(--cf-ink);
}

.hero-illustration .pin path {
  fill: var(--cf-primary);
}

.hero-illustration .pin circle {
  fill: var(--cf-bg);
}

.hero-illustration .ship {
  fill: none;
  stroke: var(--cf-ink);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* ---- Sections ------------------------------------------------------------------------------------ */

.section {
  padding: 3.5rem 0;
}

@media (min-width: 48rem) {
  .section {
    padding: 4.5rem 0;
  }
}

.section-tint {
  background: var(--cf-surface);
}

.section-title {
  margin: 0 0 2rem;
  font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
}

.section-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 5px;
  margin-top: 0.75rem;
  border-radius: 999px;
  background: var(--cf-primary);
}

.section-lead {
  max-width: 40rem;
  margin: -1rem 0 2rem;
  color: var(--cf-muted);
  font-size: 1.0625rem;
}

.section-more {
  margin: 2rem 0 0;
}

.section-more a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 700;
  text-decoration: none;
}

/* Service cards (home). */
.service-cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: 1.5rem;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius);
  background: var(--cf-bg);
  color: var(--cf-ink);
  text-decoration: none;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.service-card:hover {
  border-color: var(--cf-primary-soft);
  box-shadow: 0 24px 40px -28px rgb(0 0 0 / 0.35);
  transform: translateY(-4px);
}

.service-icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 0.5rem;
  border-radius: calc(var(--cf-radius) * 0.7);
  background: var(--cf-primary-tint);
  color: var(--cf-primary);
}

.service-title {
  font-family: var(--cf-font-heading);
  font-size: 1.25rem;
  font-weight: 800;
}

.service-lead {
  flex: 1;
  color: var(--cf-muted);
}

.service-more {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.5rem;
  color: var(--cf-primary);
  font-weight: 700;
}

.service-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.125rem;
  border: 1px solid var(--cf-border);
  border-radius: 999px;
  background: var(--cf-bg);
  color: var(--cf-ink);
  font-weight: 700;
  text-decoration: none;
}

.service-links a:hover {
  border-color: var(--cf-primary);
  color: var(--cf-primary);
}

/* Highlights (distinguishing points). */
.highlights {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.highlight {
  padding: 1.5rem;
  border-radius: var(--cf-radius);
  background: var(--cf-bg);
}

.section:not(.section-tint) .highlight {
  border: 1px solid var(--cf-border);
}

.highlight-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: var(--cf-primary);
  color: #fff;
}

.highlight-title {
  margin: 0 0 0.375rem;
  font-size: 1.125rem;
}

.highlight p {
  margin: 0;
  color: var(--cf-muted);
}

/* Numbered steps (how it works). */
.steps {
  position: relative;
  display: grid;
  gap: 0;
  max-width: 44rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.25rem;
  padding-bottom: 1.75rem;
}

.step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 3rem;
  bottom: 0.25rem;
  left: calc(1.5rem - 1px);
  width: 2px;
  background: linear-gradient(var(--cf-primary-soft), var(--cf-border));
}

.step-number {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: var(--cf-primary);
  color: #fff;
  font-family: var(--cf-font-heading);
  font-size: 1.125rem;
  font-weight: 800;
  box-shadow: 0 0 0 6px var(--cf-primary-tint);
}

.step-title {
  margin: 0.625rem 0 0.25rem;
  font-size: 1.125rem;
}

.step p {
  margin: 0;
  color: var(--cf-muted);
}

/* Reviews. */
.reviews {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.review {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  border-radius: var(--cf-radius);
  background: var(--cf-bg);
}

.review-stars {
  color: var(--cf-border);
  font-size: 1.125rem;
  letter-spacing: 0.1em;
}

.review-stars .is-on {
  color: #e8a33d;
}

.review blockquote {
  flex: 1;
  margin: 0;
  font-size: 1.0625rem;
}

.review-author {
  margin: 0;
  color: var(--cf-muted);
}

/* Prose: Markdown body texts. */
.prose {
  max-width: 46rem;
  font-size: 1.0625rem;
}

.prose h2 {
  margin: 2.25rem 0 0.75rem;
  font-size: 1.5rem;
}

.prose h3 {
  margin: 1.75rem 0 0.5rem;
  font-size: 1.1875rem;
}

.prose > :first-child {
  margin-top: 0;
}

.prose p,
.prose ul,
.prose ol {
  margin: 0 0 1rem;
}

.prose li {
  margin-bottom: 0.375rem;
}

.prose ul li::marker {
  color: var(--cf-primary);
}

.prose strong {
  color: var(--cf-ink);
}

.prose table {
  width: 100%;
  margin: 0 0 1rem;
  border-collapse: collapse;
}

.prose th,
.prose td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--cf-border);
  text-align: left;
}

/* Contact. */
.contact-details {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-details li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
}

.contact-details .wz-icon {
  margin-top: 0.125rem;
  color: var(--cf-primary);
}

.contact-details li > span {
  display: flex;
  flex-direction: column;
}

.contact-label {
  color: var(--cf-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.contact-details a {
  font-weight: 600;
}

.contact-route {
  margin-top: 0.25rem;
  font-size: 0.9375rem;
}

.contact-details.is-compact {
  gap: 0.625rem;
}

.contact-strip .contact-details {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.contact-layout {
  display: grid;
  gap: 2rem;
}

@media (min-width: 56rem) {
  .contact-layout {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: start;
  }
}

.contact-card {
  padding: 1.75rem;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius);
  box-shadow: 0 20px 40px -32px rgb(0 0 0 / 0.35);
}

.contact-quote {
  margin-top: 1.5rem;
  padding: 1.75rem;
  border-radius: var(--cf-radius);
  background: var(--cf-primary-tint);
}

.contact-quote h2 {
  margin: 0 0 0.5rem;
  font-size: 1.375rem;
}

.contact-quote p {
  margin: 0 0 1.25rem;
  color: var(--cf-muted);
}

/* Closing call to action. */
.cta-band {
  padding: 3.5rem 0;
  background:
    radial-gradient(40rem 20rem at 0% 100%, color-mix(in srgb, var(--cf-bg) 12%, transparent), transparent 60%),
    var(--cf-primary);
  color: var(--cf-bg);
}

.cta-band-inner {
  display: grid;
  align-items: center;
  gap: 1.5rem;
}

@media (min-width: 56rem) {
  .cta-band-inner {
    grid-template-columns: 1fr auto;
  }
}

.cta-band-title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}

.cta-band p {
  margin: 0;
  opacity: 0.9;
}

.cta-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ---- Footer -------------------------------------------------------------------------------------- */

.site-footer {
  padding: 3rem 0 1.5rem;
  background: var(--cf-ink);
  color: color-mix(in srgb, var(--cf-bg) 78%, transparent);
  font-size: 0.9375rem;
}

.site-footer a {
  color: inherit;
}

.site-footer a:hover {
  color: var(--cf-bg);
}

.site-footer-grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 48rem) {
  .site-footer-grid {
    grid-template-columns: 1.3fr 1fr 1fr;
  }
}

.site-footer-name {
  margin: 0;
  color: var(--cf-bg);
  font-family: var(--cf-font-heading);
  font-size: 1.25rem;
  font-weight: 800;
}

.site-footer-tagline {
  margin: 0.375rem 0 1.25rem;
}

.site-footer-heading {
  margin: 0 0 0.875rem;
  color: var(--cf-bg);
  font-family: var(--cf-font-heading);
  font-weight: 700;
}

.site-footer .contact-details .wz-icon {
  color: var(--cf-primary-soft);
}

.site-footer .contact-details a {
  font-weight: 400;
}

.site-footer-links {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer-links a {
  text-decoration: none;
}

.site-footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--cf-bg) 15%, transparent);
  font-size: 0.8125rem;
}

.site-footer-languages {
  display: flex;
  gap: 1rem;
}

.site-footer-languages a[aria-current="true"] {
  color: var(--cf-bg);
  font-weight: 700;
  text-decoration: none;
}

/* ---- Request page -------------------------------------------------------------------------------- */

.quote-hero {
  padding: 2.5rem 0 5.5rem;
  background:
    radial-gradient(40rem 20rem at 100% 0%, var(--cf-primary-soft), transparent 65%),
    var(--cf-primary-tint);
}

.quote-hero-inner {
  max-width: 46rem;
  text-align: center;
}

.quote-eyebrow {
  display: inline-block;
  margin: 0 0 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--cf-bg);
  color: var(--cf-primary);
  font-family: var(--cf-font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.quote-title {
  margin: 0;
  font-size: clamp(1.875rem, 1.4rem + 2.5vw, 2.75rem);
  letter-spacing: -0.02em;
}

.quote-intro {
  margin: 0.75rem auto 1.25rem;
  max-width: 36rem;
  color: var(--cf-muted);
  font-size: 1.0625rem;
}

.quote-usps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  font-weight: 600;
}

.quote-usps li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.quote-usps .wz-icon {
  color: var(--cf-accent);
}

.quote-body {
  margin-top: -3.5rem;
  margin-bottom: 4rem;
}

.quote-noscript {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1rem;
  border-radius: var(--cf-radius);
  background: var(--cf-surface);
  text-align: center;
}

/* Skeleton while the WebAssembly island loads: the host only holds Blazor's comment markers until then. */
.wz-host:empty {
  max-width: 46rem;
  min-height: 24rem;
  margin: 0 auto;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius);
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--cf-bg) 70%, transparent), transparent) 0 0 / 40% 100% no-repeat,
    linear-gradient(var(--cf-surface) 0 0) 2.5rem 2.5rem / 30% 0.875rem no-repeat,
    linear-gradient(var(--cf-surface) 0 0) 2.5rem 4rem / 60% 1.75rem no-repeat,
    linear-gradient(var(--cf-surface) 0 0) 2.5rem 7rem / calc(50% - 3rem) 4.5rem no-repeat,
    linear-gradient(var(--cf-surface) 0 0) calc(100% - 2.5rem) 7rem / calc(50% - 3rem) 4.5rem no-repeat,
    linear-gradient(var(--cf-surface) 0 0) 2.5rem 12.5rem / calc(50% - 3rem) 4.5rem no-repeat,
    linear-gradient(var(--cf-surface) 0 0) calc(100% - 2.5rem) 12.5rem / calc(50% - 3rem) 4.5rem no-repeat,
    var(--cf-bg);
  box-shadow: 0 8px 24px -12px rgb(0 0 0 / 0.12);
  animation: skeleton 1.4s ease-in-out infinite;
}

@keyframes skeleton {
  from { background-position-x: -150%, 2.5rem, 2.5rem, 2.5rem, calc(100% - 2.5rem), 2.5rem, calc(100% - 2.5rem); }
  to { background-position-x: 250%, 2.5rem, 2.5rem, 2.5rem, calc(100% - 2.5rem), 2.5rem, calc(100% - 2.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Guest supplement page ----------------------------------------------------------------------- */

.guest-card {
  max-width: 34rem;
  margin: 0 auto 4rem;
  padding: 2rem 1.5rem;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius);
  background: var(--cf-bg);
  box-shadow: 0 8px 24px -12px rgb(0 0 0 / 0.12);
}

.guest-card h2 {
  margin-top: 0;
}

.guest-intro,
.guest-sent {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0 0 1.25rem;
  color: var(--cf-muted);
}

.guest-intro .wz-icon,
.guest-sent .wz-icon {
  color: var(--cf-accent);
}

.guest-label {
  display: block;
  margin-bottom: 0.375rem;
  font-weight: 600;
}

.guest-input {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--cf-border);
  border-radius: 12px;
  font: inherit;
  font-size: 1rem;
}

.guest-input:focus {
  outline: none;
  border-color: var(--cf-primary);
  box-shadow: 0 0 0 4px var(--cf-primary-tint);
}

.guest-code {
  max-width: 12rem;
  font-family: var(--cf-font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-align: center;
}

.guest-hint {
  margin: 0.375rem 0 1.25rem;
  color: var(--cf-muted);
  font-size: 0.875rem;
}

.guest-card form .cta {
  margin-top: 1rem;
}

.guest-error {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--cf-primary);
  border-radius: 6px;
  background: var(--cf-primary-tint);
  font-weight: 600;
}

.guest-resend {
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
}

/* Customer registration (parcel service). */
.guest-check {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 1rem 0;
  line-height: 1.4;
}

.guest-check input {
  margin-top: 0.2rem;
  flex: none;
}

.customer-number {
  font-size: 2rem;
  letter-spacing: 0.08em;
  margin: 0.25rem 0 1rem;
}

.account-details {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 0 0 20px;
}

.account-details dt {
  font-weight: 600;
}

.account-details dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.account-address {
  white-space: pre-line;
}

/* The address for web shops: lines are <br>-separated, shown as a label to copy. */
.customer-warehouse-address {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--cf-primary);
  border-radius: 8px;
  background: var(--cf-primary-tint);
  font-style: normal;
  line-height: 1.6;
  white-space: normal;
}

@media (max-width: 480px) {
  .account-details {
    grid-template-columns: 1fr;
  }

  .account-details dd {
    margin-bottom: 8px;
  }
}

.account-signout {
  margin-top: 16px;
}

/* The contact form: room to write; the card on the contact page sits above the request card. */
.contact-message {
  min-height: 9rem;
  resize: vertical;
}

.contact-message-card {
  margin-bottom: 1.25rem;
}

/* "My details": each change folds out under its own heading (details/summary, no script). */
.account-section {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--cf-border);
}

.account-section > h2 {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
}

.account-current {
  margin: 0 0 0.75rem;
  overflow-wrap: anywhere;
}

.account-edit > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--cf-primary);
  list-style: none;
}

.account-edit > summary::-webkit-details-marker {
  display: none;
}

.account-edit[open] > summary {
  margin-bottom: 1rem;
}

.account-edit form {
  display: grid;
  gap: 0.25rem;
}

.account-edit form .cta {
  justify-self: start;
  margin-top: 0.75rem;
}

.account-danger .account-edit > summary {
  color: var(--cf-danger, #a11d1d);
}

.cta.cta-danger {
  background: var(--cf-danger, #a11d1d);
  border-color: var(--cf-danger, #a11d1d);
}

.account-open-items {
  margin: 0.5rem 0 1rem;
  padding-left: 1.25rem;
}

/* The request form for a signed-in customer with a draft begun on the website: the way to their account. */
.signed-in-notice:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  margin: 0 auto 1.25rem;
  max-width: 46rem;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--cf-primary);
  border-radius: var(--cf-radius);
  background: var(--cf-primary-tint);
  box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}

.signed-in-notice p {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
  font-weight: 600;
}

/* Show-password button (password-toggle.js): laid over the right edge of the field. */
.password-toggle-host {
  position: relative;
}

.has-password-toggle {
  padding-right: 3rem !important;
}

/* Edge shows its own reveal button: one eye is enough. */
.has-password-toggle::-ms-reveal,
.has-password-toggle::-ms-clear {
  display: none;
}

.password-toggle {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible {
  opacity: 1;
}

.password-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -4px;
  border-radius: 4px;
}

/* My parcels (customer portal) */
.parcel-announce {
  margin-bottom: 2rem;
}

.parcel-mode {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
}

.parcel-mode legend {
  width: 100%;
}

.parcel-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.parcel-item {
  padding: 1rem 0;
  border-top: 1px solid var(--cf-border);
}

.parcel-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.parcel-tracking {
  overflow-wrap: anywhere;
}

.parcel-status {
  padding: 0 0.6rem;
  border-radius: 999px;
  background: var(--cf-border);
  font-size: 0.875rem;
  white-space: nowrap;
}

.parcel-shipped .parcel-status,
.parcel-cancelled .parcel-status {
  color: var(--cf-muted);
}

.parcel-details {
  margin-bottom: 0.5rem;
}

.parcel-cancel {
  padding: 0;
  border: 0;
  background: none;
  color: var(--cf-accent);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

.parcel-back {
  margin: 1.5rem 0 0;
}

/* Registration: one address in the format of the country chosen under "Where do you live?". register-address.js sets
   data-kind (origin: postcode first; island: street first, no postcode); before a country is chosen the address waits. */
.register-address {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
  margin: 1rem 0 0;
  padding: 0;
  border: 0;
}

.register-address legend {
  grid-column: 1 / -1;
  padding: 0;
  font-weight: 700;
}

.register-field,
.register-hint,
.register-lookup {
  grid-column: 1 / -1;
  min-width: 0;
}

[data-field="postcode"] { order: 1; grid-column: auto; }
[data-field="number"] { order: 2; grid-column: auto; }
[data-field="street"] { order: 3; }
[data-field="place"] { order: 4; }
.register-hint { order: 5; }
.register-lookup { order: 3; margin: -0.5rem 0 0.25rem; min-height: 1.25rem; }
.register-lookup.is-found { color: var(--cf-accent); font-weight: 600; }

[data-kind="island"] [data-field="street"] { order: 1; grid-column: auto; }
[data-kind="island"] [data-field="number"] { order: 2; }
[data-kind="island"] [data-field="place"] { order: 3; }

[data-kind=""] .register-address,
[data-kind=""] [data-for],
[data-kind="origin"] [data-for="island"],
[data-kind="island"] [data-for="origin"],
[data-kind="island"] [data-field="postcode"] {
  display: none;
}

.site-footer-credit {
  font-size: 0.75rem;
  opacity: 0.7;
  color: inherit;
}

/* ---- Customer portal ----------------------------------------------------------------------------- */
/* A tinted bar under the website menu with the portal's own tabs (Overview, My parcels, Shipments, My details). */
.portal-nav {
  border-bottom: 1px solid var(--cf-border);
  background: var(--cf-primary-tint);
}

.portal-nav-inner {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.portal-tab {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.625rem;
  padding: 1.125rem 1.125rem 1rem;
  border-bottom: 3px solid transparent;
  color: var(--cf-ink);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.portal-tab:first-child {
  padding-left: 0.25rem;
}

.portal-help {
  margin-left: auto;
  padding-right: 0.25rem;
  font-size: 0.9375rem;
}

.portal-tab:hover {
  color: var(--cf-primary);
}

.portal-tab.is-active {
  border-bottom-color: var(--cf-primary);
  color: var(--cf-primary);
  font-weight: 600;
}

/* The portal is a working screen: wider than the website's reading width, header and footer included, so they line up. */
body:has(.portal-nav) .site-container {
  max-width: 88rem;
  padding-inline: 1.5rem;
}

/* The portal pages sit on a light grey page with white cards. */
main:has(> .portal-page),
main:has(> .portal-nav) {
  background: var(--cf-surface);
}

.portal-page {
  padding-top: 2.5rem;
  padding-bottom: 4rem;
}

.portal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.portal-title {
  margin: 0 0 0.25rem;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.portal-intro,
.portal-eyebrow {
  margin: 0;
  color: var(--cf-muted);
}

.portal-eyebrow {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.portal-back {
  margin: 0 0 1rem;
}

.portal-back a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Four counters; each opens My parcels with the matching filter. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius);
  background: var(--cf-bg);
  box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
  color: var(--cf-ink);
  text-decoration: none;
}

.stat-card:hover {
  border-color: var(--cf-primary);
}

.stat-icon,
.portal-row-icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  border-radius: 999px;
  background: var(--cf-primary-tint);
  color: var(--cf-primary);
}

.stat-icon {
  width: 3.75rem;
  height: 3.75rem;
}

.portal-row-icon {
  width: 2.75rem;
  height: 2.75rem;
}

.portal-row-icon.is-solid {
  width: 2.25rem;
  height: 2.25rem;
  background: var(--cf-primary);
  color: #fff;
}

.stat-text {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.stat-label {
  color: var(--cf-ink);
  font-size: 0.9375rem;
  line-height: 1.3;
}

.stat-count {
  margin-top: 0.25rem;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
}

.stat-arrow,
.portal-row-arrow {
  flex: none;
  color: var(--cf-muted);
}

.portal-columns {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 56rem) {
  .portal-columns {
    grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
    align-items: start;
  }
}

.portal-main {
  display: grid;
  gap: 1.5rem;
  min-width: 0;
}

.portal-panel {
  padding: 1.5rem;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius);
  background: var(--cf-bg);
  box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}

.portal-panel h2 {
  margin: 0 0 1.25rem;
  font-size: 1.375rem;
}

.portal-narrow {
  max-width: 40rem;
}

.portal-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.portal-panel-head h2 {
  margin-bottom: 1.25rem;
}

/* Recent parcels (dashboard): a table with a tinted header row; on a phone each row folds into a card. */
.portal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.portal-table th {
  padding: 0.75rem;
  background: var(--cf-surface);
  color: var(--cf-muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
}

.portal-table th:first-child { border-radius: 8px 0 0 8px; }
.portal-table th:last-child { border-radius: 0 8px 8px 0; }

.portal-table th,
.portal-table-date {
  white-space: nowrap;
}

.portal-table td {
  padding: 0.875rem 0.75rem;
  border-bottom: 1px solid var(--cf-border);
  vertical-align: middle;
}

.portal-table tr:last-child td {
  border-bottom: 0;
}

.portal-number-cell,
.portal-destination {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.portal-number-cell strong {
  font-weight: 500;
  overflow-wrap: anywhere;
}

.portal-action {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.25rem;
  color: var(--cf-primary);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.portal-row .portal-action {
  font-size: 0.9375rem;
}

.portal-action:hover {
  text-decoration: underline;
}

.island-flag {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  overflow: hidden;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 8%);
}

.island-flag svg {
  width: 100%;
  height: 100%;
}

.island-flag-none {
  background: var(--cf-primary-tint);
  color: var(--cf-primary);
}

@media (max-width: 48rem) {
  .portal-table thead,
  .portal-table .portal-table-date {
    display: none;
  }

  .portal-table,
  .portal-table tbody,
  .portal-table tr,
  .portal-table td {
    display: block;
  }

  .portal-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem 1rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--cf-border);
  }

  .portal-table tr:last-child {
    border-bottom: 0;
  }

  .portal-table td {
    padding: 0;
    border: 0;
  }
}

.portal-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--cf-primary);
  font-weight: 600;
  text-decoration: none;
}

.portal-rows,
.quick-actions,
.parcel-cards {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-row,
.quick-actions a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--cf-border);
  border-radius: calc(var(--cf-radius) * 0.75);
  color: var(--cf-ink);
  text-decoration: none;
}

.portal-row:hover,
.quick-actions a:hover {
  border-color: var(--cf-primary);
}

.quick-actions a {
  padding-block: 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.portal-rows {
  gap: 0.75rem;
}

/* What a to-do is waiting for, as a grey pill before its action. */
.todo-pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--cf-status-grey-bg);
  color: var(--cf-status-grey);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.todo-pill::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: currentColor;
}

@media (max-width: 40rem) {
  .portal-row .todo-pill,
  .portal-row .portal-action {
    display: none;
  }
}

.quick-actions .portal-row-arrow {
  margin-left: auto;
}

.portal-row-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.portal-row-sub {
  display: block;
  overflow: hidden;
  color: var(--cf-muted);
  font-size: 0.875rem;
  text-overflow: ellipsis;
}

.portal-ok {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--cf-accent);
}

.portal-number {
  margin: 1.25rem 0 0;
  color: var(--cf-muted);
}

/* Status: blue announced, orange in the warehouse, green shipped, grey withdrawn. */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.status-pill::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: currentColor;
}

.status-announced { background: var(--cf-status-blue-bg); color: var(--cf-status-blue); }
.status-warehouse { background: var(--cf-status-amber-bg); color: var(--cf-status-amber); }
.status-shipped { background: var(--cf-status-green-bg); color: var(--cf-status-green); }
.status-cancelled { background: var(--cf-status-grey-bg); color: var(--cf-status-grey); }

/* My requests: blue received or in progress, orange waiting for the customer, green accepted, grey closed. */
.status-request-submitted, .status-request-inreview { background: var(--cf-status-blue-bg); color: var(--cf-status-blue); }
.status-request-awaitingcustomerinfo, .status-request-quoted { background: var(--cf-status-amber-bg); color: var(--cf-status-amber); }
.status-request-ordered { background: var(--cf-status-green-bg); color: var(--cf-status-green); }
.status-request-closed { background: var(--cf-status-grey-bg); color: var(--cf-status-grey); }
.request-row { align-items: center; }
.request-quote-link { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.25rem; font-weight: 600; font-size: 0.875rem; }

/* My parcels: search, filter chips and cards. */
.portal-announce summary {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  color: var(--cf-primary);
  font-size: 1.0625rem;
  font-weight: 700;
  cursor: pointer;
}

.portal-announce[open] summary {
  margin-bottom: 1rem;
}

.portal-announce .parcel-announce {
  max-width: 34rem;
}

.portal-page > .portal-panel,
.portal-page > .portal-announce {
  margin-bottom: 1.5rem;
}

.portal-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.875rem;
  border: 1px solid var(--cf-border);
  border-radius: calc(var(--cf-radius) * 0.75);
  color: var(--cf-muted);
}

.portal-search input {
  flex: 1;
  min-height: 46px;
  border: 0;
  background: transparent;
  color: var(--cf-ink);
  font: inherit;
  outline: none;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 1.25rem;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--cf-border);
  border-radius: 999px;
  color: var(--cf-ink);
  font-weight: 600;
  text-decoration: none;
}

.filter-chip.is-active {
  border-color: var(--cf-primary);
  background: var(--cf-primary-tint);
  color: var(--cf-primary);
}

.filter-count {
  color: var(--cf-muted);
  font-weight: 500;
}

.parcel-card {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem;
  border: 1px solid var(--cf-border);
  border-radius: calc(var(--cf-radius) * 0.75);
}

.parcel-card-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  min-width: 0;
}

.parcel-card-title {
  color: var(--cf-ink);
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
}

.parcel-card-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.5rem;
}

.parcel-card-actions a {
  color: var(--cf-muted);
}

/* Timeline: done (green check), current (brand colour), still to come (grey). */
.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline-step {
  position: relative;
  display: flex;
  gap: 0.875rem;
  padding-bottom: 1.25rem;
}

.timeline-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.5rem;
  bottom: 0.25rem;
  left: 0.6875rem;
  width: 2px;
  background: var(--cf-border);
}

.timeline-dot {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--cf-border);
  color: #fff;
}

.timeline-step div {
  display: flex;
  flex-direction: column;
}

.timeline-step.is-done .timeline-dot { background: var(--cf-accent); }
.timeline-step.is-current .timeline-dot { background: var(--cf-primary); box-shadow: 0 0 0 4px var(--cf-primary-tint); }
.timeline-step.is-current strong { color: var(--cf-primary); }
.timeline-step.is-todo strong { color: var(--cf-muted); }

.timeline-compact .timeline-step {
  padding-bottom: 0.875rem;
}

.shipment-card h2 {
  margin: 0 0 0.5rem;
}

.shipment-card h3 {
  margin: 1rem 0 0.75rem;
  font-size: 1rem;
}

.shipment-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.shipment-facts {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.25rem 1rem;
  margin: 0;
}

.shipment-facts dt {
  color: var(--cf-muted);
}

.shipment-facts dd {
  margin: 0;
  font-weight: 600;
}

/* The account menu in the top bar (a <details> element). */
.site-user-menu {
  position: relative;
}

.site-user-menu summary {
  cursor: pointer;
  list-style: none;
}

.site-user-menu summary::-webkit-details-marker {
  display: none;
}

.site-user-panel {
  position: absolute;
  right: 0;
  z-index: 40;
  display: grid;
  min-width: 14rem;
  margin-top: 0.375rem;
  padding: 0.5rem;
  border: 1px solid var(--cf-border);
  border-radius: calc(var(--cf-radius) * 0.75);
  background: var(--cf-bg);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.12);
}

.site-user-panel a,
.site-user-panel button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--cf-ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.site-user-panel a:hover,
.site-user-panel button:hover {
  background: var(--cf-surface);
}

.site-user-panel form {
  margin: 0.25rem 0 0;
  padding-top: 0.25rem;
  border-top: 1px solid var(--cf-border);
}

/* ---- Quotes (the link from the mail, and "My quotes") --------------------------------------------- */
.quote-card {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius);
  background: var(--cf-bg);
}

.quote-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.quote-card-head h2 {
  margin: 0;
  font-size: 1.25rem;
}

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

.quote-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.quote-table th,
.quote-table td {
  padding: 0.625rem 0.5rem;
  border-bottom: 1px solid var(--cf-border);
  text-align: left;
}

.quote-table th {
  background: var(--cf-surface);
  color: var(--cf-muted);
  font-weight: 500;
}

.quote-table .num {
  text-align: right;
  white-space: nowrap;
}

.quote-table tfoot td {
  border-bottom: 0;
}

.quote-total td {
  font-size: 1.0625rem;
  font-weight: 700;
}

.quote-notes {
  white-space: pre-line;
}

.quote-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}


/* WhatsApp: a round button at the bottom right on every page (a pill with text on wider screens). WhatsApp's own
   green, not the tenant colour, so visitors recognise it at once. */
.whatsapp-float {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  background: #25D366;
  color: #FFFFFF;
  text-decoration: none;
  box-shadow: 0 10px 24px -8px rgb(0 0 0 / 0.35);
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.whatsapp-float:hover {
  background: #1EBE5A;
  transform: translateY(-2px);
}

.whatsapp-float:focus-visible {
  outline: 3px solid #128C7E;
  outline-offset: 3px;
}

.whatsapp-float-text {
  display: none;
  font-weight: 600;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .whatsapp-float {
    right: 1.5rem;
    bottom: 1.5rem;
    width: auto;
    padding: 0 1.25rem 0 1rem;
  }

  .whatsapp-float-text {
    display: inline;
  }
}

/* Phones: above the wizard's sticky Next bar, and out of the way while the menu is open. */
@media (max-width: 767.98px) {
  body:has(.wz-actions) .whatsapp-float {
    bottom: calc(5.5rem + env(safe-area-inset-bottom));
  }

  body:has(.site-menu[open]) .whatsapp-float {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float {
    transition: none;
  }

  .whatsapp-float:hover {
    transform: none;
  }
}

@media print {
  .whatsapp-float {
    display: none;
  }
}

.contact-whatsapp-icon {
  display: inline-flex;
  margin-top: 0.125rem;
  color: #25D366;
}

/* Announcing a parcel: what the receipt will say (set by us) above the fields the customer may know. */
.parcel-receipt-auto { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 1rem 0; padding: 0.75rem 1rem; background: var(--cf-primary-tint); border-radius: 0.5rem; }
.parcel-receipt-auto dt { font-weight: 600; }
.parcel-receipt-auto dd { margin: 0; color: var(--cf-muted); }
.parcel-measure { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0 1rem; }
.parcel-dims { border: 0; padding: 0; margin: 0; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.parcel-dims .guest-input { width: 7rem; }

/* Light or dark switch in the top bar: the moon shows in light mode (to go dark), the sun in dark mode. */
.site-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--cf-border);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.site-theme-toggle:hover { border-color: var(--cf-primary); color: var(--cf-primary); }
.theme-icon-light { display: none; }
:root[data-theme=dark] .theme-icon-light { display: inline-flex; }
:root[data-theme=dark] .theme-icon-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .theme-icon-light { display: inline-flex; }
  :root:not([data-theme=light]) .theme-icon-dark { display: none; }
}

/* Status pills: soft colour behind dark text in light mode, deep colour behind light text in dark mode. */
:root {
  --cf-status-blue-bg: #e8f0fb; --cf-status-blue: #1f5fa8;
  --cf-status-amber-bg: #fdf0dc; --cf-status-amber: #9a5b00;
  --cf-status-green-bg: #e3f4ea; --cf-status-green: #1f7a4d;
  --cf-status-grey-bg: #eeeeee; --cf-status-grey: #666666;
}
:root[data-theme=dark] {
  --cf-status-blue-bg: #13294a; --cf-status-blue: #9cc3f5;
  --cf-status-amber-bg: #3d2a0a; --cf-status-amber: #f3c47a;
  --cf-status-green-bg: #0f3321; --cf-status-green: #8fd9b0;
  --cf-status-grey-bg: #26262b; --cf-status-grey: #c4c4cc;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --cf-status-blue-bg: #13294a; --cf-status-blue: #9cc3f5;
    --cf-status-amber-bg: #3d2a0a; --cf-status-amber: #f3c47a;
    --cf-status-green-bg: #0f3321; --cf-status-green: #8fd9b0;
    --cf-status-grey-bg: #26262b; --cf-status-grey: #c4c4cc;
  }
}

/* ---- Home page in the style of the design (Context: Styling 1): section titles with a bar in the brand colour,
   photo tiles, destination tiles, why-us circles and a contact band in the brand colour. Colours from the tokens. ---- */
.section-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.section-title::before {
  content: "";
  flex: 0 0 2.25rem;
  height: 4px;
  border-radius: 2px;
  background: var(--cf-primary);
}

.hero-accent { color: var(--cf-primary); }
.hero-large .hero-title::after {
  content: "";
  display: block;
  width: 6rem;
  height: 4px;
  margin-top: 1rem;
  border-radius: 2px;
  background: var(--cf-primary);
}

/* Service tiles with the service's photo: text over a dark fade, the icon in a brand-colour circle. */
.service-card.has-photo {
  position: relative;
  overflow: hidden;
  min-height: 15rem;
  justify-content: flex-end;
  color: #fff;
  background: #111;
  border-color: transparent;
}
.service-card.has-photo .service-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.service-card.has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 0) 25%, rgb(0 0 0 / 0.85) 100%);
}
.service-card.has-photo > :not(.service-photo) { position: relative; z-index: 1; }
.service-card.has-photo:hover .service-photo { transform: scale(1.04); }
.service-card.has-photo .service-icon {
  background: var(--cf-primary);
  color: #fff;
  border-radius: 999px;
}
.service-card.has-photo .service-lead,
.service-card.has-photo .service-more { color: rgb(255 255 255 / 0.85); }

/* Destinations: one tile per island. */
.destination-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.destination-tile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 5.5rem;
  padding: 1rem 1.25rem;
  border-radius: var(--cf-radius);
  background: linear-gradient(135deg, var(--cf-primary) 0%, var(--cf-primary-hover) 100%);
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  text-decoration: none;
  box-shadow: 0 12px 24px -16px rgb(0 0 0 / 0.5);
}
.destination-tile:hover { filter: brightness(1.08); }

/* Why us: round icons. */
.highlight-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  border: 2px solid var(--cf-border);
  background: var(--cf-surface);
  color: var(--cf-primary);
}

/* Contact band in the brand colour, with WhatsApp and call. */
.cta-band {
  background: linear-gradient(135deg, var(--cf-primary) 0%, var(--cf-primary-hover) 100%);
  color: #fff;
}
.cta-whatsapp {
  background: #25D366;
  color: #fff;
  border-color: #25D366;
}
.cta-whatsapp:hover { background: #1EBE5A; color: #fff; }

/* On the brand colour the light buttons stay white in both themes (the page background is dark in dark mode). */
.cta-band .cta-light { border-color: #fff; background: #fff; color: var(--cf-primary); }
.cta-band .cta-light:hover { border-color: #fff; background: rgb(255 255 255 / 0.9); }
.cta-band .cta-outline-light { border-color: rgb(255 255 255 / 0.7); color: #fff; }

/* Home hero with a photo: the photo fills a rounded card and the text stands on a dark fade over it. */
.hero-large.has-image {
  padding: 1.5rem 0 2.5rem;
  background: var(--cf-bg);
}
.hero-large.has-image .hero-inner {
  display: block;
  min-height: 28rem;
  padding: 3.5rem clamp(1.25rem, 4vw, 3.5rem);
  border-radius: calc(var(--cf-radius) * 1.5);
  overflow: hidden;
  color: #fff;
}
.hero-large.has-image .hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-large.has-image .hero-media img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
}
.hero-large.has-image .hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(0 0 0 / 0.82) 0%, rgb(0 0 0 / 0.55) 45%, rgb(0 0 0 / 0.1) 100%);
}
.hero-large.has-image .hero-text { position: relative; z-index: 1; max-width: 38rem; }
.hero-large.has-image .hero-lead,
.hero-large.has-image .hero-cta-note { color: rgb(255 255 255 / 0.88); }
.hero-large.has-image .hero-arc { display: none; }

/* "Register" stays white on the brand colour: .site-account (later, same weight) would make the text dark and the
   icon brand-coloured, i.e. invisible. */
.site-account.site-signup,
.site-account.site-signup:hover,
.site-account.site-signup:focus-visible,
.site-account.site-signup .wz-icon { color: #fff; }

/* The account menu on the website appears once account-name.js knows who is signed in. */
.site-user-menu[hidden] { display: none; }
.site-user-panel .site-user-signout { margin-top: 0.25rem; padding-top: 0.75rem; border-top: 1px solid var(--cf-border); border-radius: 0; }

/* "Register" looks like the quote button (same font, fill and hover), only smaller for the top bar; the general
   .site-account hover (light background) must not apply to it, or the white text disappears. */
.site-account.site-signup {
  padding: 0 1rem;
  border: 2px solid var(--cf-primary);
  background: var(--cf-primary);
  font-family: var(--cf-font-heading);
  font-weight: 700;
  box-shadow: 0 8px 18px -12px var(--cf-primary);
}
.site-account.site-signup:hover,
.site-account.site-signup:focus-visible {
  border-color: var(--cf-primary-hover);
  background: var(--cf-primary-hover);
}

/* Track & trace steps: a line of dots, done ones in the brand colour; the current one stands out. */
.tracking-steps { display: grid; gap: 0; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.tracking-steps li { position: relative; display: flex; align-items: center; gap: 0.75rem; padding: 0.35rem 0 0.35rem 0; color: var(--cf-muted); }
.tracking-steps li + li::before { content: ""; position: absolute; left: 0.45rem; top: -0.5rem; height: 1rem; border-left: 2px solid var(--cf-border); }
.tracking-steps li.is-done { color: var(--cf-ink); }
.tracking-steps li.is-done + li.is-done::before { border-color: var(--cf-primary); }
.tracking-dot { flex: 0 0 1rem; width: 1rem; height: 1rem; border-radius: 999px; border: 2px solid var(--cf-border); background: var(--cf-surface); }
.tracking-steps li.is-done .tracking-dot { border-color: var(--cf-primary); background: var(--cf-primary); }
.tracking-steps li[aria-current] .tracking-label { font-weight: 800; }
.tracking-date { margin-left: auto; font-size: 0.875rem; color: var(--cf-muted); }
.tracking-number { margin: 0 0 0.5rem; font-size: 1.25rem; }

/* "What we ship": white tiles (also in dark mode, as in the design), icon in ink, the short line in the brand colour. */
.showcase-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.showcase-tile { display: grid; justify-items: center; gap: 0.25rem; padding: 1rem 0.5rem; border-radius: var(--cf-radius); background: #fff; color: #111; text-align: center; box-shadow: 0 8px 20px -14px rgb(0 0 0 / 0.5); }
.showcase-tile strong { font-family: var(--cf-font-heading); font-size: 0.95rem; }
.showcase-tile span { color: var(--cf-primary); font-size: 0.8rem; font-weight: 600; }

/* Destination tiles with the island's photo: the name over a dark fade. */
.destination-tile.has-photo { position: relative; overflow: hidden; min-height: 7.5rem; align-items: flex-end; background: #111; }
.destination-tile.has-photo .destination-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.destination-tile.has-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0) 35%, rgb(0 0 0 / 0.75) 100%); }
.destination-tile.has-photo > :not(.destination-photo) { position: relative; z-index: 1; }