/* ==========================================================================
   SarTrade — custom styles
   Values are taken directly from the Figma design (Desktop 1280 / Mobile 375).
   Layout order:  tokens · base · topbar · header · hero · stats ·
                  inventory · deliveries · how it works · footer · responsive
   ========================================================================== */

/* ----------------------------------------------------------------- tokens */
:root {
  /* brand palette */
  --navy-deep:   #013363;
  --navy:        #2a5e97;
  --blue:        #0061a0;
  --yellow:      #ffe300;
  --grey:        #d9d9d9;
  --white:       #ffffff;
  --red:         #ed1c24;

  --topbar-bg:     rgba(217, 217, 217, .30);
  --topbar-border: rgba(0, 0, 0, .15);
  --card-border:   rgba(0, 0, 0, .10);
  --label-muted:   rgba(0, 0, 0, .55);

  /* type */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* metrics */
  --page-max:  1280px;
  --gutter:    64px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;

  --card-shadow: 0 6px 12px rgba(0, 0, 0, .031), 0 4px 8px rgba(0, 0, 0, .02);
}

/* ------------------------------------------------------------------- base */
body {
  font-family: var(--font);
  color: var(--navy);
  background: var(--white);
  overflow-x: hidden;
}

h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; }
a { text-decoration: none; color: inherit; }

.st-container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 12px 20px;
  background: var(--yellow);
  color: var(--navy);
  font-weight: 600;
}
.skip-link:focus { left: 8px; top: 8px; }

/* Consistent focus ring across the custom controls. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------- topbar */
.topbar {
  background: var(--topbar-bg);
  border: 1px solid var(--topbar-border);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-height: 33px;
}
.topbar__item {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--navy);
}
.topbar__glyph { font-size: 14px; }
.topbar__item--end { font-size: 14px; text-align: right; }

/* ----------------------------------------------------------------- header */
.site-header { background: var(--white); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 89px;
  padding-block: 24px;
  flex-wrap: nowrap;
}

.site-header__logo img { display: block; width: 272px; height: auto; }

/* Bootstrap's .navbar-collapse grows to fill the row, so the list is pushed
   to its right-hand end — keeping the nav flush to the 64px gutter as drawn,
   regardless of how many items it holds. */
.site-header__collapse { justify-content: flex-end; }

.nav-list {
  display: flex;
  align-items: center;
}

/* Thin yellow rules bracket and separate every nav item (Figma "Line 4–17"). */
.nav-list__item {
  display: flex;
  align-items: center;
  border-left: 1px solid var(--yellow);
}
.nav-list__item:last-child { border-right: 1px solid var(--yellow); }

.nav-link-st {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.005em;
  color: var(--navy);
  white-space: nowrap;
  transition: color .18s ease;
}
.nav-link-st:hover,
.nav-link-st:focus-visible,
.nav-list__item.show > .nav-link-st { color: var(--blue); }

.nav-link-st--icon { padding-inline: 14px; }
.nav-link-st--icon img { display: block; }

/* Yellow caret marking the four items that open a menu. */
.nav-caret {
  position: absolute;
  left: 50%;
  bottom: -13px;
  width: 20px;
  height: 9px;
  margin-left: -10px;
  background: var(--yellow);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition: transform .18s ease;
}
.nav-list__item.show .nav-caret { transform: rotate(180deg); }

.st-dropdown {
  --bs-dropdown-min-width: 232px;
  --bs-dropdown-padding-y: 8px;
  --bs-dropdown-border-color: var(--card-border);
  --bs-dropdown-border-radius: var(--radius-md);
  --bs-dropdown-link-color: var(--navy);
  --bs-dropdown-link-hover-bg: var(--yellow);
  --bs-dropdown-link-hover-color: var(--navy);
  --bs-dropdown-link-active-bg: var(--yellow);
  --bs-dropdown-link-active-color: var(--navy);
  margin-top: 14px;
  box-shadow: var(--card-shadow);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.02em;
}
.st-dropdown .dropdown-item { padding: 8px 20px; }

/* hamburger */
.st-toggler {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: none;
}
.st-toggler:focus { box-shadow: none; }
.st-toggler__bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
}

/* ------------------------------------------------------------------- hero */
.hero {
  display: flex;
  align-items: stretch;
  background: var(--navy-deep);
}

/* Panel is 546 wide with a 469 content column — i.e. 64 left / 13 right, as
   laid out in Figma. Height is fixed at 540 with the content centred, which is
   how the frame resolves there (its stated 120 padding would not fit). */
.hero__panel {
  flex: 0 0 546px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  min-height: 540px;
  padding: 40px 13px 40px 64px;
  background-image: url("../assets/images/hero-panel-texture.png");
  background-size: cover;
  background-position: center;
}

.hero__media { flex: 1 1 auto; min-width: 0; }
.hero__media img {
  display: block;
  width: 100%;
  height: 540px;
  object-fit: cover;
}

.hero__text { display: flex; flex-direction: column; gap: 24px; }

.hero__title {
  font-size: 50px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--white);
}
.hero__title-accent { color: var(--yellow); }

.hero__lede {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.005em;
  color: var(--white);
}

.hero__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

.btn-st {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 200px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.005em;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.btn-st img { display: block; flex: none; }
.btn-st:active { transform: translateY(1px); }

.btn-st--primary { background: var(--yellow); color: var(--navy); }
.btn-st--primary:hover, .btn-st--primary:focus-visible { background: #ffec4d; }

.btn-st--secondary { border: 2px solid var(--yellow); color: var(--yellow); }
.btn-st--secondary:hover, .btn-st--secondary:focus-visible { background: var(--yellow); color: var(--navy-deep); }
/* Recolour the outline icon to navy on hover so it stays legible on yellow. */
.btn-st--secondary:hover img,
.btn-st--secondary:focus-visible img { filter: brightness(0) saturate(100%) invert(11%) sepia(58%) saturate(3316%) hue-rotate(197deg) brightness(96%) contrast(99%); }

/* ------------------------------------------------------------------ stats */
.stats { padding-block: 48px; }

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.stat-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--card-shadow);
}

.stat-card__img {
  display: block;
  width: 100%;
  height: 90px;
  object-fit: cover;
}

/* Body is yellow in the design — white paint sits underneath a yellow one. */
.stat-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 1;
  padding: 24px;
  background: var(--yellow);
}

.stat-card__text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.stat-card__value {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -.02em;
  color: var(--navy);
}

.stat-card__label {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.005em;
  color: var(--label-muted);
}
.stat-card__label--sm { font-size: 11px; }

.stat-card__icon { flex: none; align-self: center; }

/* -------------------------------------------------------------- inventory */
.inventory {
  padding-block: 40px 53px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .23) 0%, rgba(119, 122, 124, 0) 100%);
}

.inventory__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 37px;
}

.inventory__title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--navy);
}

.inventory__more {
  flex: none;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--navy);
  border-bottom: 2px solid transparent;
  transition: border-color .18s ease;
}
.inventory__more:hover, .inventory__more:focus-visible { border-bottom-color: var(--yellow); }

.inventory__carousel {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: 26px;
}

.inventory__viewport { flex: 1; overflow: hidden; }

.inventory__track {
  display: flex;
  gap: 21px;
}
.inventory__track.is-sliding { transition: transform .38s ease; }

.equip-card {
  flex: 0 0 calc((100% - 42px) / 3);
  display: flex;
  min-width: 0;
  height: 135px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--white);
}

.equip-card__img {
  flex: 0 0 147px;
  width: 147px;
  height: 100%;
  object-fit: cover;
}

.equip-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 16px 16px 16px 24px;
}

.equip-card__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #000;
}

.equip-card__meta {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #000;
}

/* Yellow triangles either side of the row. */
.carousel-arrow {
  flex: none;
  width: 32px;
  height: 64px;
  padding: 0;
  border: 0;
  background: var(--yellow);
  transition: opacity .18s ease;
}
.carousel-arrow:hover { opacity: .75; }
.carousel-arrow--prev { clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.carousel-arrow--next { clip-path: polygon(100% 50%, 0 0, 0 100%); }

/* ------------------------------------------------------------- deliveries */
.deliveries { padding-block: 26px 0; background: var(--navy); }

.deliveries__head { text-align: center; margin-bottom: 22px; }

.deliveries__eyebrow {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--white);
}

.deliveries__title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--white);
}

/* Full-bleed strip: in the design the third card runs past the 1280 edge,
   so it scrolls horizontally rather than wrapping. */
.deliveries__strip {
  display: flex;
  overflow-x: auto;
  /* proximity, not mandatory: the strip's last snap point sits beyond its
     maximum scroll offset, and mandatory snapping would yank it back to 0. */
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--yellow) var(--navy);
}
.deliveries__strip::-webkit-scrollbar { height: 6px; }
.deliveries__strip::-webkit-scrollbar-track { background: var(--navy); }
.deliveries__strip::-webkit-scrollbar-thumb { background: var(--yellow); }

.delivery {
  flex: none;
  display: flex;
  scroll-snap-align: start;
  border-left: 6px solid var(--navy);
}
.delivery:first-child { border-left: 0; }

.delivery__icon {
  flex: 0 0 205px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 125px;
  padding: 12px;
  background: var(--grey);
}
.delivery__icon img { max-height: 100%; width: auto; }

.delivery__body {
  flex: 0 0 285px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 16px 24px;
  background: var(--yellow);
}

.delivery__place,
.delivery__what,
.delivery__when {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
}
.delivery__place { color: var(--blue); }
.delivery__place--alt { color: var(--navy); }
.delivery__what  { color: var(--navy-deep); }
.delivery__when  { color: var(--navy); }

/* ----------------------------------------------------------- how it works */
.how { padding-block: 36px 50px; background: var(--navy-deep); }

/* Title sits in a gap between two yellow rules (Figma "Vector" lines). */
.how__title {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}
.how__title::before,
.how__title::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--yellow);
}
.how__title span {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--grey);
  white-space: nowrap;
}

.how__steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.how-step { flex: 0 1 auto; min-width: 0; }
.how-step img { display: block; width: 100%; height: auto; }
.how-step__arrow { flex: none; }

/* ----------------------------------------------------------------- footer */
.site-footer { padding-block: 48px; background: var(--grey); }

.site-footer__inner {
  display: grid;
  grid-template-columns: 396px 167px 217px 1fr;
  gap: 32px;
}

.site-footer__brand img { display: block; width: 209px; height: auto; }

.site-footer__about,
.site-footer__legal {
  max-width: 243px;
  margin-top: 19px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--blue);
}
.site-footer__legal { margin-top: 32px; }

.site-footer__heading {
  margin-bottom: 15px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--navy);
}

.site-footer__list { display: flex; flex-direction: column; gap: 15px; }

.site-footer__list a {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--navy);
  transition: color .18s ease;
}
.site-footer__list a:hover, .site-footer__list a:focus-visible { color: var(--navy-deep); }

/* ------------------------------------------------------------- newsletter
   Not in the Figma file — added at the client's request. Sits between the
   navy "How it Works" band and the grey footer, so it takes the page white
   to keep those two apart, and borrows the hero's primary button. */
.newsletter-section {
  padding-block: 56px;
  background: var(--white);
}

.newsletter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 24px 40px;
}

.newsletter__intro { flex: 1 1 320px; min-width: 0; }

.newsletter__heading {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--navy);
}

.newsletter__blurb {
  max-width: 420px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--blue);
}

.newsletter__form {
  flex: 1 1 380px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  min-width: 0;
}

.newsletter__field { flex: 1; min-width: 0; }

.newsletter__label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--navy);
}

.newsletter__input {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 1px solid rgba(0, 0, 0, .25);
  border-radius: var(--radius-md);
  background: var(--white);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--navy-deep);
}
.newsletter__input::placeholder { color: rgba(0, 0, 0, .4); }
.newsletter__input:focus-visible { outline: 3px solid var(--yellow); outline-offset: 1px; }
.newsletter__input[aria-invalid="true"] { border-color: var(--red); }

.newsletter__submit { flex: none; min-width: 150px; height: 50px; }

.newsletter__status {
  flex: 1 0 100%;
  min-height: 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--navy-deep);
}
.newsletter__status--error { color: var(--red); }

/* --------------------------------------------------------- cookie consent */
.cookie-card {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 1080;
  width: min(400px, calc(100vw - 48px));
  padding: 24px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}
.cookie-card[hidden] { display: none; }

.cookie-card__heading {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--navy);
}

.cookie-card__text {
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.02em;
  color: var(--blue);
}

.cookie-card__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.cookie-card__btn {
  min-width: 0;
  flex: 1 1 auto;
  height: 44px;
  padding-inline: 14px;
  border: 0;
  font-size: 14px;
  cursor: pointer;
}

.cookie-card__btn--ghost {
  border: 2px solid var(--navy);
  background: none;
  color: var(--navy);
}
.cookie-card__btn--ghost:hover,
.cookie-card__btn--ghost:focus-visible { background: var(--navy); color: var(--white); }

.cookie-card__link {
  display: inline-block;
  margin-top: 14px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--navy);
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--navy);
  cursor: pointer;
}
.cookie-card__link:hover { color: var(--navy-deep); border-bottom-color: var(--navy-deep); }

/* Persistent tag to reopen preferences (Figma: trigger TAG, bottom-left). */
.cookie-tag {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 1070;
  padding: 10px 16px;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--navy);
  cursor: pointer;
}
.cookie-tag[hidden] { display: none; }
.cookie-tag:hover { background: var(--yellow); }

.cookie-modal {
  width: min(520px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--navy);
}
.cookie-modal::backdrop { background: rgba(1, 51, 99, .55); }

.cookie-modal__form { padding: 28px; }

.cookie-modal__heading {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--navy);
}

.cookie-modal__list { display: flex; flex-direction: column; gap: 8px; }

.cookie-opt {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--card-border);
}

.cookie-opt__name {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--navy);
}

.cookie-opt__desc {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.02em;
  color: var(--blue);
}

.cookie-switch { flex: none; position: relative; display: block; width: 46px; height: 26px; }
.cookie-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.cookie-switch input:disabled { cursor: not-allowed; }

.cookie-switch__track {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: rgba(0, 0, 0, .22);
  transition: background-color .18s ease;
  pointer-events: none;
}
.cookie-switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--white);
  transition: transform .18s ease;
}
.cookie-switch input:checked ~ .cookie-switch__track { background: var(--navy); }
.cookie-switch input:checked ~ .cookie-switch__track::after { transform: translateX(20px); }
.cookie-switch input:disabled ~ .cookie-switch__track { background: var(--yellow); }
.cookie-switch input:disabled ~ .cookie-switch__track::after { background: var(--white); }
.cookie-switch input:focus-visible ~ .cookie-switch__track { outline: 3px solid var(--yellow); outline-offset: 2px; }

.cookie-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}
.cookie-modal__actions .cookie-card__btn { flex: 0 0 auto; min-width: 160px; }

/* ==========================================================================
   Responsive
   The Figma file defines only Desktop (1280) and Mobile (375). Tablet and the
   intermediate widths follow the conventions agreed with the client:
   2-up grids from 768–1199, nav collapses below 992, single column below 768.
   ========================================================================== */

/* --- large desktop: keep the 1280 design centred, widen gutters only ----- */
@media (min-width: 1400px) {
  .inventory__carousel { padding-inline: 26px; }
}

/* --- laptop: tighten the gutter before anything has to reflow ------------ */
@media (max-width: 1279.98px) {
  :root { --gutter: 40px; }
  .hero__panel { flex-basis: 46%; padding-inline: 40px; }
  .hero__media img { height: 100%; min-height: 540px; }
}

/* --- below the 1280 design width: 2-up grids ----------------------------- */
@media (max-width: 1199.98px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  .equip-card { flex-basis: calc((100% - 21px) / 2); }

  /* The desktop footer tracks are fixed pixel widths taken from the Figma
     x-positions, so they cannot shrink — go flexible below 1200. */
  .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
  .site-footer__brand { grid-column: 1 / -1; }

  .how__steps { flex-wrap: wrap; justify-content: center; gap: 28px; }
  .how-step { flex: 0 0 calc((100% - 100px) / 2); }
  .how-step img { margin-inline: auto; max-width: 220px; }
}

/* --- small laptop / large tablet: nav still fits, but tightened ---------- */
@media (max-width: 1199.98px) and (min-width: 992px) {
  .site-header__logo img { width: 210px; }
  .nav-link-st { padding: 0 11px; font-size: 14px; }
  .hero__title { font-size: 42px; }
}

/* --- tablet: hamburger, 2-up grids -------------------------------------- */
@media (max-width: 991.98px) {
  :root { --gutter: 32px; }

  .st-toggler { display: flex; }

  .site-header__inner { flex-wrap: wrap; }
  .site-header__collapse { flex-basis: 100%; }

  /* Stacked menu: drop the vertical rules, use full-width rows instead. */
  .nav-list {
    flex-direction: column;
    align-items: stretch;
    padding-block: 8px 16px;
  }
  .nav-list__item {
    border-left: 0;
    border-bottom: 1px solid var(--yellow);
  }
  .nav-list__item:last-child { border-right: 0; }

  .nav-link-st { padding: 14px 0; }
  .nav-link-st--has-menu { justify-content: space-between; }

  /* Caret moves inline to the right of the label. */
  .nav-caret {
    position: static;
    margin: 0 0 0 10px;
    align-self: center;
  }

    .st-dropdown {
        margin-top: 0;
        margin-bottom: 8px;
        border: 0;
        box-shadow: none;
        background: rgb(255 227 0);
    }

  /* column-reverse puts the photo above the copy, as the 375 frame draws it,
     while keeping the heading first in the document for assistive tech. */
  .hero { flex-direction: column-reverse; }
  .hero__panel { flex-basis: auto; min-height: 0; padding: 56px 32px; }
  .hero__media img { height: 340px; min-height: 0; }
}

/* --- phone: single column ------------------------------------------------ */
@media (max-width: 767.98px) {
  :root { --gutter: 24px; }

  .topbar__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding-block: 32px;
  }
  .topbar__item--end { font-size: 12px; text-align: left; }

  .site-header__inner { padding-block: 32px; min-height: 0; }
  .site-header__logo img { width: 200px; }

  /* Mobile hero puts the photo first, then centred copy — as drawn in the
     375 frame — with full-width stacked buttons. */
  .hero__panel { padding: 23px 24px 56px; text-align: center; }
  .hero__media img { height: 298px; }
  .hero__title { font-size: 38px; }
  .hero__text { gap: 16px; }
  .hero__buttons { flex-direction: column; align-items: stretch; }
  .btn-st { width: 100%; }

  .stats { padding-block: 40px; }
  .stats__grid { grid-template-columns: 1fr; gap: 24px; }
  .stat-card__img { height: 130px; }

  .inventory { padding-block: 40px; }
  .inventory__head { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 24px; }
  .inventory__title { font-size: 30px; }
  .inventory__carousel { gap: 12px; padding-inline: 16px; }
  .equip-card { flex-basis: 100%; height: auto; min-height: 135px; }
  .equip-card__img { flex-basis: 120px; width: 120px; }
  .equip-card__body { padding: 16px; }
  .carousel-arrow { width: 22px; height: 44px; }

  .deliveries { padding-block: 40px 0; }
  .deliveries__title { font-size: 30px; }
  .delivery__icon { flex-basis: 120px; height: 110px; }
  .delivery__body { flex-basis: 220px; padding: 14px 16px; }
  .delivery__place, .delivery__what, .delivery__when { font-size: 13px; }

  .how { padding-block: 40px; }
  .how__steps { flex-direction: column; gap: 20px; }
  .how-step { flex: none; width: 100%; }
  .how-step img { max-width: 200px; }
  /* Point the connectors down once the steps are stacked. */
  .how-step__arrow img { transform: rotate(90deg); }

  .site-footer { padding-block: 40px; }
  .site-footer__inner { grid-template-columns: 1fr; gap: 32px; }
  .site-footer__about, .site-footer__legal { max-width: none; }

  .newsletter-section { padding-block: 40px; }
  .newsletter__form { flex-direction: column; align-items: stretch; gap: 16px; }
  .newsletter__submit { width: 100%; }

  .cookie-card { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 20px; }
  .cookie-card__actions { flex-direction: column; }
  .cookie-card__btn { width: 100%; }
  .cookie-tag { left: 12px; bottom: 12px; }
  .cookie-modal__form { padding: 22px; }
  .cookie-modal__actions { flex-direction: column-reverse; }
  .cookie-modal__actions .cookie-card__btn { width: 100%; }
}

/* --- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .inventory__track.is-sliding { transition: none !important; }
  .deliveries__strip { scroll-behavior: auto; }
}