/* ==========================================================================
   Fooldi — front end styles
   Palette and type sampled from the reference design.
   ========================================================================== */

:root {
  --green:       #7cb342;
  --green-dark:  #689f2e;
  --green-soft:  #a5cf7a;
  --yellow:      #e9da5d;
  --yellow-dark: #ddcb44;
  --slate:       #5c6373;
  --slate-deep:  #4c5464;
  --ink:         #1c1c1c;
  --body:        #7d7d7d;
  --white:       #ffffff;
  --grey:        #f5f5f5;
  --grey-soft:   #f1f1f1;
  --line:        #e6e6e6;
  --red:         #f96365;
  --badge-new:   #8ea3a8;

  --font-head: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script: 'Kalam', 'Segoe Script', cursive;

  --container: 1170px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --shadow: 0 10px 40px rgba(28, 28, 28, .08);
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font: 300 15px/1.9 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
/* .card and .tool__count both set `display`, which would otherwise beat the
   hidden attribute the shop filter and the cart badge toggle. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-family: var(--font-head); font-weight: 700; line-height: 1.2; }
p { margin: 0; }
svg { width: 1em; height: 1em; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.container { width: min(100% - 48px, var(--container)); margin-inline: auto; }

/* ------------------------------------------------------- shared bits ---- */
.section { padding: 100px 0; }

.section__title {
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.section__title, .slide__title, .shop-hero__title,
.promo__title, .promo__sm-title, .map__title, .footer__heading {
  overflow-wrap: anywhere;
  hyphens: auto;
}
.section__title--center { text-align: center; }

/* the handwritten accent used above every section heading */
.script {
  font-family: var(--font-script); font-weight: 700;
  font-size: 19px; line-height: 1.4; color: var(--green);
  letter-spacing: .01em; margin-bottom: 6px;
}
.script--center { text-align: center; }

.section__title--center + .tabs { margin-top: 34px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 40px;
  font-family: var(--font-head); font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.btn--yellow { background: var(--yellow); }
.btn--yellow:hover { background: var(--ink); color: var(--white); }
.btn--green { background: var(--green); color: var(--white); }
.btn--green:hover { background: var(--ink); color: var(--white); }
.btn--ghost { color: var(--white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
.btn--ghost:hover { background: var(--white); color: var(--ink); }

.round-btn {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--yellow); color: var(--ink);
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.round-btn svg { width: 17px; height: 17px; }
.round-btn:hover { background: var(--ink); color: var(--white); transform: translateX(3px); }
.round-btn--green { background: var(--green); color: var(--white); }
.round-btn--green:hover { background: var(--ink); }

/* prev / next used by hero, testimonials and blog */
.slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  padding: 0 0 6px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink); opacity: .55; transition: opacity .25s var(--ease);
}
.slider-arrow::after { content: ''; position: absolute; left: 0; right: 22%; bottom: 0; height: 1px; background: currentColor; }
.slider-arrow:hover { opacity: 1; }
.slider-arrow--prev { left: 26px; }
.slider-arrow--next { right: 26px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 12px 20px; background: var(--ink); color: var(--white);
  font-family: var(--font-head); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* EN / FR switch — pills in the header, full names in the mobile drawer */
.lang { display: flex; align-items: center; gap: 2px; }
.lang__link {
  display: inline-block; padding: 5px 9px; border-radius: 4px;
  font-family: var(--font-head); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--body);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.lang__link:hover { color: var(--ink); background: var(--grey); }
.lang__link.is-active { background: var(--green); color: var(--white); }
.lang--stacked { display: none; }

.socials { display: flex; gap: 14px; }
.socials a {
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid currentColor; border-radius: 50%;
  color: var(--slate); transition: .25s var(--ease);
}
.socials svg { width: 14px; height: 14px; }
.socials a:hover { background: var(--green); border-color: var(--green); color: var(--white); }
.socials--sm a { width: 30px; height: 30px; }

/* =========================================================== HEADER ===== */
.header { position: relative; z-index: 60; background: var(--white); }
.header.is-stuck {
  position: fixed; inset: 0 0 auto; box-shadow: 0 4px 22px rgba(28, 28, 28, .1);
  animation: drop .3s var(--ease);
}
@keyframes drop { from { transform: translateY(-100%); } to { transform: none; } }

.header__inner { display: flex; align-items: center; gap: 26px; min-height: 96px; }

.logo { display: inline-flex; align-items: center; }
.logo__img { display: block; height: 46px; width: auto; flex: none; }

.nav { margin-inline: auto; }
.nav__list { display: flex; flex-wrap: wrap; gap: 26px; }
.nav__item { position: relative; }
.nav__link {
  display: inline-block; padding: 14px 0;
  font-family: var(--font-head); font-size: 11.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
  transition: color .2s var(--ease);
}
.nav__link.is-active, .nav__item:hover > .nav__link { color: var(--green); }

.dropdown {
  position: absolute; left: -22px; top: 100%; z-index: 70;
  min-width: 205px; padding: 12px 0;
  background: var(--white); box-shadow: var(--shadow);
  border-top: 2px solid var(--green);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: .25s var(--ease);
}
.nav__item:hover > .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown a {
  display: block; padding: 8px 22px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  transition: .2s var(--ease);
}
.dropdown a:hover { color: var(--green); padding-left: 28px; }

.header__tools { display: flex; align-items: center; gap: 18px; }
.tool { position: relative; display: grid; place-items: center; color: var(--ink); transition: color .2s var(--ease); }
.tool svg { width: 19px; height: 19px; }
.tool:hover { color: var(--green); }
.tool__count {
  position: absolute; top: -7px; right: -9px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--green); color: var(--white);
  border-radius: 999px; font-size: 10px; font-weight: 700;
}

.burger { display: none; flex-direction: column; gap: 5px; width: 36px; height: 36px; align-items: center; justify-content: center; }
.burger span { width: 22px; height: 2px; background: var(--ink); transition: .25s var(--ease); }
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================= HERO =====
   Every slide occupies the same grid cell, so the section is exactly as tall
   as its tallest slide — no fixed height to clip against. The product render
   is a cut-out sized by max-width/max-height only, so it is scaled down but
   never cropped at any viewport width. */
.hero { position: relative; overflow: hidden; }
.hero__slides { display: grid; }

.slide {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transition: opacity .7s var(--ease), visibility .7s;
}
.slide.is-active { opacity: 1; visibility: visible; }

.slide--green { background: linear-gradient(135deg, #8cc152 0%, #689f2e 100%); }
.slide--red   { background: linear-gradient(135deg, #f4703f 0%, #d5372e 100%); }
.slide--slate { background: linear-gradient(135deg, #5c6373 0%, #3d4453 100%); }

.slide__inner {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center; gap: 40px;
  min-height: clamp(430px, 44vw, 560px);
  padding-block: 56px 74px;
}
.slide__body { position: relative; z-index: 2; color: var(--white); max-width: 36rem; min-width: 0; }
.slide__eyebrow { color: rgba(255, 255, 255, .95); font-size: 20px; margin-bottom: 6px; }
.slide__title {
  color: var(--white);
  font-size: clamp(28px, 5.1vw, 70px); font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase; line-height: .98;
}
/* Set by index.php for titles longer than the text column can hold at the size
   above — a guard so a longer headline added later cannot break mid-word. */
.slide__title--long { font-size: clamp(24px, 4vw, 54px); }
.slide__subtitle {
  color: var(--white);
  font-family: var(--font-head); font-size: clamp(14px, 1.5vw, 19px); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; margin: 12px 0 14px;
}
.slide__text { color: rgba(255, 255, 255, .9); font-size: 15px; max-width: 42ch; margin-bottom: 28px; }
/* The two calls to action sit side by side; they only stack once the column
   is genuinely too narrow for them, which is the phone layout. */
.slide__actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Slightly tighter tracking and padding than the site default, so the pair
   fits on one row wherever the hero is still two columns. Below that the
   column really is too narrow and they stack, which is right on a phone. */
.slide__actions .btn { padding-inline: 26px; letter-spacing: .14em; }

.slide__media { display: grid; place-items: center; min-width: 0; }
.slide__product {
  width: auto; height: auto;
  max-width: 100%; max-height: clamp(230px, 30vw, 420px);
  margin-inline: auto;
  filter: drop-shadow(0 24px 34px rgba(20, 26, 16, .22));
}

.hero__nav {
  position: absolute; left: 0; right: 0; bottom: 24px; z-index: 5;
  display: flex; align-items: center; justify-content: center; gap: 26px;
}
.hero .slider-arrow {
  position: relative; top: auto; left: auto; right: auto; transform: none;
  color: var(--white); opacity: .78;
}
.hero__dots { display: flex; align-items: center; gap: 10px; }
.hero__dot {
  width: 9px; height: 9px; padding: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .45); transition: .25s var(--ease);
}
.hero__dot.is-active { background: var(--white); transform: scale(1.3); }

/* ============================================================ ABOUT ===== */
.about__inner { display: grid; grid-template-columns: 1.3fr 1fr; align-items: start; gap: 50px; }
/* The software row sits under the distribution one and mirrors it: copy on the
   left, illustration on the right. The ratio is flipped so both images keep the
   same width and line up as a pair. */
.about__inner--tech {
  grid-template-columns: 1fr 1.3fr;
  margin-top: 56px; padding-top: 52px; border-top: 1px solid var(--line);
}
.about__media { display: grid; place-items: center; min-width: 0; }
.about__media img { max-width: 100%; max-height: 520px; width: auto; height: auto; }
.about__body .section__title { margin-bottom: 22px; }
.about__text { max-width: 46ch; margin-bottom: 26px; }
.about__points { display: grid; gap: 11px; margin-bottom: 32px; }
.about__points li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.7; }
.about__points svg { width: 18px; height: 18px; flex: none; margin-top: 5px; color: var(--green); }
/* the software side of the business, sitting under the distribution points */
.about__services { margin: 0 0 26px; }
.about__services-title {
  font-size: 14px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px;
}
.about__services-text { font-size: 14px; line-height: 1.8; margin-bottom: 20px; max-width: 46ch; }
.about__services-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.aservice { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.aservice__icon {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--grey); color: var(--green-dark);
}
.aservice__icon svg { width: 17px; height: 17px; }
.aservice__body { min-width: 0; }
.aservice__name {
  display: block; font-family: var(--font-head); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: 3px;
  overflow-wrap: anywhere;
}
.aservice__note { display: block; font-size: 13px; line-height: 1.6; color: var(--body); }

.about__sign { display: flex; align-items: center; gap: 20px; }

/* ======================================================== WHY US band === */
.why {
  position: relative; overflow: hidden;
  background: var(--slate); color: rgba(255, 255, 255, .78);
  padding: 78px 0 90px;
}
.why::before {
  content: ''; position: absolute; inset: auto 0 0; height: 78%;
  background: var(--silhouette) center bottom / cover no-repeat;
  opacity: .8; pointer-events: none;
}
.why__eyebrow, .why__heading { position: relative; z-index: 1; }
.why__heading { color: var(--white); margin-bottom: 46px; }
.why__grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; }
.why__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.why__num {
  font-family: var(--font-head); font-size: 40px; font-weight: 700;
  color: rgba(255, 255, 255, .22); line-height: 1;
}
.why__icon { color: var(--green-soft); }
.why__icon svg { width: 46px; height: 46px; stroke-width: 1.5; }
.why__title {
  color: var(--white); font-size: 15px; letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: 12px;
}
.why__text { font-size: 13.5px; line-height: 1.85; }

/* ============================================================= TABS ===== */
.tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px;
  position: relative; margin: 0 auto 48px; padding-bottom: 14px;
  max-width: 960px;
}
.tabs::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
.tab {
  position: relative; padding-bottom: 14px;
  font-family: var(--font-head); font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--body);
  transition: color .2s var(--ease);
}
.tab::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 2;
  background: var(--green); transform: scaleX(0); transition: transform .3s var(--ease);
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--green); }
.tab.is-active::after { transform: scaleX(1); }

/* ============================================== SHOP / PRODUCT CARDS ===== */
.shop__lede { max-width: 58ch; margin: 16px auto 0; text-align: center; font-size: 14.5px; }
.shop__lede + .tabs { margin-top: 34px; }
.shop__empty { text-align: center; padding: 40px 0; font-size: 15px; }
.shop__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 18px; margin-top: 52px; text-align: center;
}
.shop__note { font-size: 15px; }

.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.product-grid > .card { min-width: 0; }

.card {
  display: flex; flex-direction: column; background: var(--grey);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }

.card__media {
  --media-h: 250px;
  --media-pad: 26px;
  position: relative; height: var(--media-h); padding: var(--media-pad);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.card__media img {
  /* explicit px cap — a percentage would resolve against the flex line */
  max-height: calc(var(--media-h) - var(--media-pad) * 2);
  max-width: 100%; width: auto; height: auto;
  transition: transform .45s var(--ease);
}
.card:hover .card__media img { transform: scale(1.07); }

.badge {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  padding: 3px 12px; border-radius: 3px;
  font-family: var(--font-head); font-size: 9.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--white);
}
.badge--sale { background: var(--red); }
.badge--new  { background: var(--badge-new); }

.card__body {
  display: flex; flex-direction: column; flex: 1;
  padding: 6px 18px 26px; text-align: center;
}
.card__sku {
  font-family: var(--font-head); font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: #a8a8a8; margin-bottom: 8px;
}
.card__title {
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 4px;
}
.card__title a { transition: color .2s var(--ease); }
.card__title a:hover { color: var(--green); }
.card__fr { font-size: 13px; font-style: italic; color: #9c9c9c; margin-bottom: 10px; }
.card__format {
  font-size: 12.5px; letter-spacing: .04em; color: var(--body);
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line);
}
.card__price { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.price { font-size: 17px; font-weight: 600; color: var(--green); }
.price--old { font-size: 14px; font-weight: 400; color: #b9b9b9; }
.card__unit { font-size: 12.5px; color: var(--body); margin-top: 2px; }

.btn--cart {
  width: 100%; gap: 10px; margin-top: auto; padding: 13px 16px;
  background: var(--ink); color: var(--white); font-size: 10.5px;
}
.btn--cart svg { width: 16px; height: 16px; }
.btn--cart:hover { background: var(--green); color: var(--white); }
.btn--cart.is-added { background: var(--green); color: var(--white); }
.btn--quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn--quiet:hover { background: var(--ink); color: var(--white); box-shadow: none; }
.card__blurb { font-size: 13px; line-height: 1.7; color: var(--body); margin-bottom: 14px; }
/* margin-top:auto on the button lines the CTAs up across a row whatever the
   blurb length; this keeps a floor under it when the body is short. */
.card__unit { margin-bottom: 18px; }
.card__format:last-of-type { margin-bottom: 18px; }

/* ===================================================== TESTIMONIALS ===== */
.clients { position: relative; overflow: hidden; background: var(--grey-soft); padding: 100px 0 110px; }
.clients__deco { position: absolute; z-index: 0; opacity: .3; pointer-events: none; }
.clients__deco img { width: 100%; }
.clients__deco--tl { top: 56px;   left: 46px;   width: 82px;  transform: rotate(-22deg); }
.clients__deco--tr { top: 88px;   right: 58px;  width: 74px;  transform: rotate(17deg); }
.clients__deco--bl { bottom: 54px; left: 96px;  width: 90px;  transform: rotate(12deg); }
.clients__deco--br { bottom: 66px; right: 86px; width: 78px;  transform: rotate(-14deg); }

.quotes { position: relative; max-width: 760px; margin: 44px auto 0; min-height: 330px; }
.quote {
  position: absolute; inset: 0; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 56px 70px; text-align: center;
  background: var(--white); border-radius: 22px;
  box-shadow: 0 18px 60px rgba(28, 28, 28, .07);
  opacity: 0; visibility: hidden; transform: scale(.97);
  transition: .5s var(--ease);
}
.quote.is-active { opacity: 1; visibility: visible; transform: none; }
/* the two stacked cards peeking out behind the active quote */
.quotes::before, .quotes::after {
  content: ''; position: absolute; top: 18px; bottom: 18px; z-index: -1;
  background: var(--white); border-radius: 22px; opacity: .55;
}
.quotes::before { left: -34px; right: 34px; }
.quotes::after  { left: 34px; right: -34px; }

.quote__mark { color: var(--green-soft); margin-bottom: 18px; }
.quote__mark svg { width: 40px; height: 40px; stroke-width: 1.3; }
.quote__text { margin: 0 0 26px; font-size: 15px; line-height: 1.95; max-width: 46ch; }
.quote__meta { display: flex; align-items: center; gap: 14px; }
.quote__avatar {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(140deg, var(--green), var(--green-dark));
  color: var(--white); font-family: var(--font-head); font-size: 18px; font-weight: 700;
}
.quote__meta strong {
  display: block; font-family: var(--font-head); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink); text-align: left;
}
.quote__meta .script { display: block; font-size: 15px; font-style: normal; margin: 0; text-align: left; }
.quotes .slider-arrow--prev { left: -110px; }
.quotes .slider-arrow--next { right: -110px; }

/* ======================================================== WHOLESALE =====
   Brand-coloured blocks with contained cut-outs, so nothing is cropped by a
   background-size:cover crop the way the old deal tiles were. */
.wholesale__grid { display: grid; grid-template-columns: 1.06fr 1fr; gap: 30px; margin-top: 46px; }

.promo { position: relative; overflow: hidden; color: var(--white); }
.promo--green { background: linear-gradient(135deg, #8cc152 0%, #689f2e 100%); }
.promo--red   { background: linear-gradient(135deg, #f4703f 0%, #d5372e 100%); }
.promo--slate { background: linear-gradient(135deg, #5c6373 0%, #3d4453 100%); }

.promo--main {
  display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 24px;
  padding: 36px; min-height: 560px;
}
.promo__media { display: grid; place-items: center; min-height: 0; }
.promo__media img {
  max-width: 100%; max-height: clamp(190px, 24vw, 320px); width: auto; height: auto;
  filter: drop-shadow(0 18px 26px rgba(20, 26, 16, .22));
}
.promo__panel {
  background: var(--white); color: var(--body); text-align: center;
  padding: 32px 30px 34px;
}
.promo__panel .script { margin-bottom: 2px; }
.promo__title { font-size: 25px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
.promo__amount {
  display: flex; align-items: flex-start; justify-content: center;
  color: rgba(28, 28, 28, .16); line-height: .9; margin-bottom: 16px;
}
.promo__num { font-family: var(--font-head); font-size: clamp(64px, 8vw, 100px); font-weight: 800; letter-spacing: -.04em; }
.promo__unit { font-family: var(--font-head); font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; margin-top: 6px; }
.promo__off {
  align-self: flex-end; font-family: var(--font-head); font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px;
}
.promo__text { font-size: 14px; line-height: 1.8; }
.promo__panel .promo__text { max-width: 34ch; margin: 0 auto 22px; }

.wholesale__stack { display: grid; grid-template-rows: 1fr 1fr; gap: 30px; }
.promo--sm {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  align-items: center; gap: 22px; padding: 32px 34px; min-height: 265px;
}
.promo__sm-body { display: grid; justify-items: start; gap: 9px; min-width: 0; }
.promo__kicker {
  font-family: var(--font-head); font-size: 12px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .82);
}
.promo__sm-title {
  color: var(--white); font-size: clamp(21px, 2.4vw, 30px);
  letter-spacing: .06em; text-transform: uppercase;
}
.promo--sm .promo__text { color: rgba(255, 255, 255, .88); max-width: 32ch; }
.promo__link {
  font-family: var(--font-head); font-size: 10.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--white);
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
  transition: color .2s var(--ease);
}
.promo__link:hover { color: var(--yellow); }
.promo__sm-media { display: grid; place-items: center; min-width: 0; }
.promo__sm-media img {
  max-width: 100%; max-height: 190px; width: auto; height: auto;
  filter: drop-shadow(0 14px 20px rgba(20, 26, 16, .24));
}

/* ============================================================= TEAM ===== */
.team { background: var(--grey-soft); }
.team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 46px; }
.member { text-align: center; }
/* No portraits in the asset set — a monogram plate keeps the row calm. */
.member__photo {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 1 / 1.12; margin-bottom: 20px;
  background: #e9e9e9;
  color: var(--green-dark); font-family: var(--font-head); font-size: 76px; font-weight: 800;
}
.member__photo::after {
  content: ''; position: absolute; right: -34px; bottom: -40px; width: 150px; height: 150px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237cb342'><path d='M20.5 3.5C10 3.5 4 8 4 14.5A6 6 0 0010 20.5c7 0 10.5-6.5 10.5-17z'/></svg>") center / contain no-repeat;
  opacity: .12; transform: rotate(-18deg);
}
.member__name { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.member__role { font-size: 16px; margin: 2px 0 14px; }
.member .socials { justify-content: center; }

/* ============================================================== FAQ ===== */
.faq__inner { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 70px; }
.faq__media { display: grid; place-items: center; min-width: 0; }
.faq__media img { max-width: 100%; max-height: 430px; width: auto; height: auto; }
.faq__body .section__title { margin-bottom: 30px; }

.acc__item { border-bottom: 1px solid var(--line); }
.acc__head {
  display: flex; align-items: center; gap: 18px; width: 100%;
  padding: 20px 0; text-align: left;
}
.acc__toggle {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; background: var(--yellow); color: var(--ink);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.acc__toggle svg { width: 15px; height: 15px; }
.acc__item.is-open .acc__toggle { transform: rotate(180deg); background: var(--green); color: var(--white); }
.acc__q { font-family: var(--font-head); font-size: 14px; font-weight: 600; color: var(--ink); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel > p { overflow: hidden; padding: 0 0 22px 50px; font-size: 14px; }
.acc__item:not(.is-open) .acc__panel > p { padding-bottom: 0; }

/* =========================================================== BRANDS =====
   A horizontal scroll rail. `.rail` is generic so any section can use it;
   `.brand` is the card. Overflow lives inside the rail, never on the page. */
.brands { position: relative; }
.brands__lede { max-width: 56ch; margin: 16px auto 0; text-align: center; font-size: 14.5px; }

.rail {
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; scroll-behavior: smooth; scroll-snap-type: x proximity;
  margin-top: 46px; padding-block: 6px;
}
.rail::-webkit-scrollbar { display: none; }
.rail:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.rail__track {
  display: flex; gap: 26px;
  /* `safe` keeps the cards centred while they fit and falls back to flex-start
     once they overflow — plain `center` would make the first card unreachable */
  justify-content: safe center;
}

/* A logo strip: artwork plus one small label, nothing else. Cards are narrow
   so several brands read at once. */
.brand { flex: 0 0 clamp(168px, 17vw, 208px); scroll-snap-align: start; }
.brand__inner {
  display: flex; flex-direction: column; height: 100%;
  background: var(--white); box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.brand__inner:hover {
  box-shadow: inset 0 0 0 1px transparent, var(--shadow);
  transform: translateY(-4px);
}

.brand__media {
  display: grid; place-items: center;
  flex: 1; min-height: 132px; padding: 22px 20px 14px;
}
.brand__media img {
  max-width: 100%; max-height: 96px; width: auto; height: auto;
  transition: transform .45s var(--ease);
}
.brand__inner:hover .brand__media img { transform: scale(1.06); }
/* a brand with no artwork yet still reads as a card */
.brand__wordmark {
  font-family: var(--font-head); font-size: 17px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: #b9b9b9;
  text-align: center; overflow-wrap: break-word;
}

.brand__kind {
  margin: 0 14px 16px; padding: 5px 10px; border-radius: 999px;
  font-family: var(--font-head); font-size: 9.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; text-align: center;
  background: #eee; color: #8a8a8a; overflow-wrap: break-word;
}
.brand--own .brand__kind { background: #e7f3dc; color: var(--green-dark); }

/* the arrows sit under the rail, so they can never cover the end cards */
.rail__nav { display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 30px; }
.rail__nav .slider-arrow {
  position: relative; top: auto; left: auto; right: auto; transform: none;
}

/* ======================================================== SHOP PAGE ===== */
.shop-hero { background: linear-gradient(135deg, #8cc152 0%, #689f2e 100%); color: var(--white); }
.shop-hero__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  align-items: center; gap: 40px; padding-block: 64px 70px;
}
.shop-hero__eyebrow { color: rgba(255, 255, 255, .95); font-size: 20px; }
.shop-hero__title {
  color: var(--white); font-size: clamp(26px, 5vw, 62px); font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase; line-height: 1;
}
.shop-hero__text { color: rgba(255, 255, 255, .92); font-size: 15px; max-width: 46ch; margin: 18px 0 28px; }
.shop-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.shop-hero__media { display: grid; place-items: center; min-width: 0; }
.shop-hero__media img {
  width: auto; height: auto; max-width: 100%; max-height: clamp(200px, 26vw, 340px);
  filter: drop-shadow(0 22px 30px rgba(20, 26, 16, .24));
}
.shop-hero + .shop { padding-top: 62px; }
.shop-hero__unlocked {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 22px; font-size: 14px; color: rgba(255, 255, 255, .92);
}
.shop-hero__unlocked svg { width: 18px; height: 18px; flex: none; }

/* ---- account: how it works ---- */
.steps__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px; margin-top: 46px;
}
.step { position: relative; padding-top: 6px; }
.step__num {
  display: block; font-family: var(--font-head); font-size: 46px; font-weight: 800;
  line-height: 1; color: var(--green-soft); margin-bottom: 14px;
}
.step__title { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
.step__text { font-size: 14px; line-height: 1.85; }

/* ---- price unlock (modal) ----
   A native <dialog>: the browser supplies focus trapping, Escape-to-close and
   the ::backdrop, so the only script needed is showModal()/close(). */
.modal {
  width: min(100% - 32px, 560px);
  padding: 0; border: 0; border-radius: 4px;
  background: var(--white); color: var(--body);
  box-shadow: 0 24px 70px rgba(20, 24, 33, .28);
  overflow: visible;
}
.modal::backdrop { background: rgba(16, 18, 14, .62); }
.modal[open] { animation: modal-in .28s var(--ease); }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .modal[open] { animation: none; } }

.modal__dismiss { position: absolute; top: 0; right: 0; margin: 0; }
.modal__close {
  display: grid; place-items: center; width: 44px; height: 44px;
  font-size: 26px; line-height: 1; color: var(--body);
  transition: color .2s var(--ease);
}
.modal__close:hover { color: var(--ink); }

.modal__body { padding: 34px 36px 32px; }
.modal__eyebrow { margin-bottom: 2px; }
.modal__title {
  font-size: clamp(22px, 3.4vw, 30px); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; margin-bottom: 12px;
  overflow-wrap: break-word;
}
.modal__text { font-size: 14.5px; line-height: 1.8; margin-bottom: 22px; }
.modal__privacy {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 16px; font-size: 12.5px; line-height: 1.6; color: #9a9a9a;
}
.modal__privacy svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--green); }

/* the form is shared with the account page, so only the modal tweaks live here */
.modal .unlock__form { background: none; padding: 0; }
.unlock__form { background: var(--white); padding: 32px 30px 34px; }
.unlock__form .field { margin-bottom: 16px; }
.unlock__form .opt { font-weight: 400; letter-spacing: 0; text-transform: none; color: #a5a5a5; font-size: 11.5px; }
.unlock__submit { width: 100%; }
.unlock__msg { min-height: 22px; margin-top: 12px; font-size: 13.5px; color: var(--green-dark); }
.unlock__msg.is-error { color: #d8382f; }

/* name and phone sit side by side while there is room */
.modal .field--half { display: inline-block; width: calc(50% - 7px); vertical-align: top; }
.modal .field--half + .field--half { margin-left: 10px; }

/* the price slot on a locked card */
.card__locked {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: auto; padding: 14px 0 4px;
  font-family: var(--font-head); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: #a8a8a8;
}
.card__locked svg { width: 15px; height: 15px; }
.card__locked + .btn--cart { margin-top: 10px; }

/* ---- product quick view ---- */
.modal--product { width: min(100% - 32px, 860px); }
.pv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 34px 36px 36px; }

.pv__media { min-width: 0; }
.pv__stage {
  position: relative; display: grid; place-items: center;
  min-height: 280px; padding: 20px; background: var(--grey); border-radius: 3px;
}
.pv__stage img { max-width: 100%; max-height: 260px; width: auto; height: auto; }
.pv__badge {
  position: absolute; top: 14px; right: 14px;
  padding: 3px 12px; border-radius: 3px;
  font-family: var(--font-head); font-size: 9.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--white);
  background: var(--badge-new);
}
.pv__thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.pv__thumb {
  display: grid; place-items: center; width: 62px; height: 62px; padding: 6px;
  background: var(--grey); border-radius: 3px;
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .2s var(--ease);
}
.pv__thumb img { max-width: 100%; max-height: 48px; width: auto; height: auto; }
.pv__thumb:hover { box-shadow: inset 0 0 0 1px var(--line); }
.pv__thumb.is-active { box-shadow: inset 0 0 0 2px var(--green); }

.pv__info { min-width: 0; display: flex; flex-direction: column; }
.pv__sku {
  font-family: var(--font-head); font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: #a8a8a8; margin-bottom: 8px;
}
.pv__name {
  font-size: clamp(20px, 2.6vw, 27px); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px;
  overflow-wrap: anywhere;
}
.pv__format { font-size: 13px; color: var(--body); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.pv__blurb { font-size: 14.5px; line-height: 1.85; margin: 16px 0 20px; }
.pv__price-row { display: flex; align-items: baseline; gap: 12px; }
.pv__price-row .price { font-size: 26px; }
.pv__unit { font-size: 13px; color: var(--body); margin-top: 2px; }
.pv__locked {
  display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px;
  font-family: var(--font-head); font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: #8a8a8a; background: var(--grey);
}
.pv__actions { margin-top: auto; padding-top: 22px; }
.pv__actions .btn { width: 100%; }
.pv__error { padding: 40px 36px; text-align: center; font-size: 15px; color: #d8382f; }

/* the card image is the trigger */
.card__view {
  display: grid; place-items: center; width: 100%; height: 100%; padding: 0;
  background: none; border: 0; cursor: pointer;
}
.card__view img { max-height: calc(var(--media-h) - var(--media-pad) * 2); }
.card__view-hint {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 9px 0;
  font-family: var(--font-head); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--white); background: rgba(28, 28, 28, .78);
  opacity: 0; transform: translateY(100%); transition: .25s var(--ease);
}
.card:hover .card__view-hint,
.card__view:focus-visible .card__view-hint { opacity: 1; transform: none; }

/* ---- basket ---- */
.cart__empty { text-align: center; font-size: 15.5px; margin-top: 34px; }
.cart__empty a { color: var(--green); border-bottom: 1px solid currentColor; }

.cart__grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 44px; align-items: start; margin-top: 40px;
}
.cart__table { width: 100%; border-collapse: collapse; }
.cart__table th {
  padding: 0 10px 12px; text-align: left; border-bottom: 1px solid var(--line);
  font-family: var(--font-head); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--body);
}
.cart__table td { padding: 16px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cart__table .num { text-align: right; }

.cart__pic { width: 76px; }
.cart__pic img { width: 60px; height: 68px; object-fit: contain; }
.cart__info { min-width: 0; }
.cart__name {
  display: block; font-family: var(--font-head); font-size: 12.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.cart__meta { display: block; font-size: 12.5px; color: var(--body); margin-top: 4px; }
.cart__each { display: block; font-size: 13px; color: var(--green); margin-top: 4px; }

.cart__qty { white-space: nowrap; }
.cart__step {
  width: 30px; height: 30px; font-size: 16px; line-height: 1;
  background: var(--grey); color: var(--ink); border-radius: 3px;
  transition: background .2s var(--ease);
}
.cart__step:hover { background: var(--ink); color: var(--white); }
.cart__count {
  width: 52px; margin: 0 6px; padding: 6px 4px; text-align: center;
  border: 1px solid var(--line); border-radius: 3px;
  font: 400 14px var(--font-body); color: var(--ink);
}
.cart__count:focus { outline: none; border-color: var(--green); }
.cart__line { font-size: 15px; font-weight: 600; color: var(--ink); }
.cart__rm { width: 40px; }
.cart__remove { font-size: 20px; line-height: 1; color: #b9b9b9; transition: color .2s var(--ease); }
.cart__remove:hover { color: var(--red); }

.cart__locked {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-top: 22px; padding: 16px 18px; background: var(--grey); border-radius: 3px;
  font-size: 14px; color: var(--body);
}
.cart__locked svg { width: 17px; height: 17px; flex: none; color: #a8a8a8; }
.cart__locked .btn { width: auto; margin-left: auto; }

.cart__summary { background: var(--grey); padding: 28px 26px 30px; }
.cart__summary-title {
  font-size: 16px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 18px;
}
.cart__totals { display: grid; gap: 10px; margin-bottom: 22px; }
.cart__totals > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 14.5px; }
.cart__totals dt { color: var(--body); }
.cart__totals dd { margin: 0; color: var(--ink); }
.cart__grand {
  padding-top: 12px; border-top: 1px solid var(--line);
  font-family: var(--font-head); font-weight: 700;
}
.cart__grand dd { font-size: 20px; color: var(--green); }

.cart__checkout .field { margin-bottom: 14px; }
.cart__pay-label {
  font-family: var(--font-head); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin: 20px 0 10px;
}
.cart__pay { display: grid; gap: 10px; }
.cart__pay .btn { width: 100%; }
.btn--paypal { background: #ffc439; color: #003087; }
.btn--paypal:hover { background: #003087; color: var(--white); }
.cart__msg { min-height: 20px; margin-top: 12px; font-size: 13.5px; color: var(--green-dark); }
.cart__msg.is-error { color: #d8382f; }
.cart__testmode { margin-top: 10px; font-size: 12px; color: #a08a2a; }
.cart__note { font-size: 14px; line-height: 1.8; margin-bottom: 16px; }
.cart__continue {
  display: inline-block; margin-top: 18px; font-size: 13px;
  color: var(--body); border-bottom: 1px solid var(--line);
}
.cart__continue:hover { color: var(--green); border-color: currentColor; }

/* ---- receipt ---- */
.receipt__inner { max-width: 620px; margin-inline: auto; text-align: center; }
.receipt__mark {
  display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%;
  margin: 0 auto 22px; background: var(--grey); color: var(--body);
}
.receipt__mark svg { width: 28px; height: 28px; }
.receipt__mark--paid { background: #e7f3dc; color: var(--green-dark); }
.receipt__mark--cancelled { background: #fdecea; color: #a2231c; }
.receipt__text { font-size: 15.5px; line-height: 1.9; margin: 14px 0 8px; }
.receipt__detail { font-size: 13px; color: #a2231c; margin-bottom: 8px; }
.receipt__ref { font-size: 14px; color: var(--body); margin-bottom: 26px; }
.receipt__table { width: 100%; border-collapse: collapse; text-align: left; margin-bottom: 26px; }
.receipt__table td { padding: 11px 8px; border-bottom: 1px solid var(--line); font-size: 14px; }
.receipt__table .num { text-align: right; white-space: nowrap; }
.receipt__table tfoot td { border-bottom: 0; padding-top: 14px; }
.receipt__total td { font-family: var(--font-head); font-weight: 700; color: var(--ink); font-size: 16px; }
.muted-sku { color: #a8a8a8; font-size: 12px; }
.receipt__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.btn--ghost-dark { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn--ghost-dark:hover { background: var(--ink); color: var(--white); box-shadow: none; }

/* ---- request an account ---- */
.request { background: var(--grey-soft); padding: 92px 0; }
.request__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 54px; align-items: start;
}
.request__text { font-size: 15px; line-height: 1.9; margin: 18px 0 26px; max-width: 52ch; }
.request__contact { display: grid; gap: 12px; }
.request__contact li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; }
.request__contact svg { width: 18px; height: 18px; flex: none; margin-top: 5px; color: var(--green); }
.request__contact a { color: var(--ink); border-bottom: 1px solid var(--line); }
.request__contact a:hover { color: var(--green); border-color: currentColor; }

.request__form { background: var(--white); padding: 38px 36px 40px; box-shadow: var(--shadow); }
.request__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.field { margin-bottom: 20px; }
.field label {
  display: block; margin-bottom: 8px;
  font-family: var(--font-head); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.field input, .field textarea {
  width: 100%; padding: 13px 16px;
  border: 1px solid var(--line); border-radius: 2px; background: var(--white);
  font: 300 15px/1.6 var(--font-body); color: var(--ink);
  transition: border-color .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 104px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--green); }
.field input::placeholder, .field textarea::placeholder { color: #b3b3b3; }

.request__list {
  border: 1px dashed var(--line); border-radius: 3px;
  padding: 18px 20px; margin-bottom: 22px; font-size: 14px;
}
.request__list.is-empty { color: #a0a0a0; text-align: center; }
.request__list-head {
  font-family: var(--font-head); font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px;
}
.request__list ul { display: grid; gap: 8px; }
.request__list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 8px; border-bottom: 1px solid var(--grey);
}
.request__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.request__list strong { flex: none; font-size: 13px; color: var(--green); }
.request__clear {
  margin-top: 14px; padding: 0 0 2px;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--body); border-bottom: 1px solid var(--line);
}
.request__clear:hover { color: var(--red); border-color: currentColor; }

.request__submit { width: 100%; }
.request__msg { min-height: 22px; margin-top: 12px; font-size: 13.5px; color: var(--green-dark); }
.request__msg.is-error { color: #d8382f; }

/* ========================================================== CONTACT ===== */
.contact__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 60px; align-items: start;
}
.contact__lede { font-size: 15px; line-height: 1.9; margin: 16px 0 30px; max-width: 48ch; }

.contact__list { display: grid; gap: 20px; margin-bottom: 30px; }
.contact__list li { display: flex; align-items: flex-start; gap: 14px; font-size: 14.5px; line-height: 1.7; }
.contact__list svg { width: 20px; height: 20px; flex: none; margin-top: 4px; color: var(--green); }
.contact__list strong {
  display: block; font-family: var(--font-head); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-bottom: 3px;
}
.contact__list a { color: var(--body); border-bottom: 1px solid var(--line); }
.contact__list a:hover { color: var(--green); border-color: currentColor; }
.contact__socials { margin-top: 4px; }

.contact__form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px;
  background: var(--white); padding: 36px 34px 38px; box-shadow: var(--shadow);
}
.contact__form > * { grid-column: 1 / -1; }
.contact__form .field--half { grid-column: span 1; }
.contact__form-title {
  font-size: 19px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 22px;
}
.contact__form select {
  width: 100%; padding: 13px 16px;
  border: 1px solid var(--line); border-radius: 2px; background: var(--white);
  font: 300 15px/1.6 var(--font-body); color: var(--ink);
}
.contact__form select:focus { outline: none; border-color: var(--green); }
.contact__submit { width: 100%; }
.contact__msg { min-height: 22px; margin-top: 12px; font-size: 13.5px; color: var(--green-dark); }
.contact__msg.is-error { color: #d8382f; }

/* ============================================================== MAP ===== */
.map { position: relative; background: #e8eef0; }
.map iframe { display: block; width: 100%; height: 470px; border: 0; filter: grayscale(.3); }
.map__overlay {
  position: absolute; inset: 0; display: grid; align-content: center;
  justify-items: start; pointer-events: none;
}
.map__card {
  pointer-events: auto; background: var(--white); padding: 40px 44px;
  max-width: 380px; box-shadow: var(--shadow);
}
.map__title { font-size: 24px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 18px; }
.map__cta { margin-top: 20px; }
.map__list li { display: flex; gap: 12px; margin-bottom: 10px; font-size: 14px; }
.map__list svg { width: 17px; height: 17px; flex: none; margin-top: 6px; color: var(--green); }
.map__list a:hover { color: var(--green); }
.map__cta { margin-top: 18px; }

/* =========================================================== FOOTER ===== */
.footer { background: var(--slate-deep); color: rgba(255, 255, 255, .68); }
/* ---- other services ----
   A band above the link columns: each venture gets a line of explanation,
   which a sixth link column would not have had room for. */
.footer__services { border-bottom: 1px solid rgba(255, 255, 255, .1); padding: 46px 0 42px; }
.footer__services-head { margin-bottom: 24px; }
.footer__services-lede { font-size: 13.5px; color: rgba(255, 255, 255, .55); margin-top: -12px; }
.footer__services-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 18px 30px;
}
.fservice { min-width: 0; }
.fservice__inner {
  display: flex; gap: 14px; align-items: flex-start; height: 100%;
  padding: 16px 18px; border-radius: 4px;
  background: rgba(255, 255, 255, .05);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.fservice__inner:hover { background: rgba(255, 255, 255, .075); }
.fservice__icon {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, .08); color: var(--green-soft);
}
.fservice__icon svg { width: 19px; height: 19px; }
.fservice__body { display: block; min-width: 0; }
.fservice__name {
  display: block; font-family: var(--font-head); font-size: 12.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--white); margin-bottom: 5px;
}
.fservice__note { display: block; font-size: 13px; line-height: 1.65; color: rgba(255, 255, 255, .62); }
/* one button per app the service ships under; the muted pill below means it
   is not out yet */
.fservice__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.fservice__label {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  font-family: var(--font-head); font-size: 11px; font-weight: 700;
  /* no text-transform here: these are product names and their own casing is
     part of them — uppercasing turns "SmartTAG" into "SMARTTAG" */
  letter-spacing: .03em;
  background: var(--green); color: var(--white);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.fservice__label:hover { background: var(--yellow); color: var(--ink); }
.fservice__label:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.fservice__soon {
  display: inline-block; margin-top: 9px; padding: 3px 9px; border-radius: 999px;
  font-family: var(--font-head); font-size: 9px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7);
}

.footer__grid {
  display: grid; grid-template-columns: 1.5fr .8fr .8fr .8fr minmax(230px, 1.2fr);
  gap: 34px; padding: 78px 0 62px;
}
.footer__brand .logo { margin-bottom: 20px; }
.footer__about { font-size: 14px; line-height: 1.9; margin-bottom: 22px; max-width: 34ch; }
.footer .socials a { color: rgba(255, 255, 255, .5); }
.footer .socials a:hover { color: var(--white); }

.footer__heading {
  color: var(--white); font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; margin-bottom: 22px;
}
.footer__links li { margin-bottom: 10px; }
.footer__links a { font-size: 14px; transition: .2s var(--ease); }
.footer__links a:hover { color: var(--green-soft); padding-left: 5px; }

.subscribe { display: flex; background: rgba(255, 255, 255, .08); }
.subscribe input {
  flex: 1; min-width: 0; padding: 14px 18px; border: 0; background: transparent;
  font: 300 14px var(--font-body); color: var(--white);
}
.subscribe input::placeholder { color: rgba(255, 255, 255, .45); }
.subscribe input:focus { outline: none; }
.subscribe button { width: 52px; display: grid; place-items: center; background: var(--green); color: var(--white); transition: background .2s var(--ease); }
.subscribe button svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.subscribe button:hover { background: var(--yellow); color: var(--ink); }
.subscribe__msg { min-height: 20px; margin-top: 8px; font-size: 13px; color: var(--green-soft); }
.subscribe__msg.is-error { color: #ff9a9a; }

.footer__bottom { border-top: 1px solid rgba(255, 255, 255, .1); }
.footer__bottom-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; min-height: 66px; font-size: 13px;
}
.footer__bottom ul { display: flex; gap: 26px; }
.footer__bottom a:hover { color: var(--white); }

/* ====================================================== RESPONSIVE ====== */
@media (max-width: 1200px) {
  .quotes .slider-arrow--prev { left: -18px; }
  .quotes .slider-arrow--next { right: -18px; }
}

@media (max-width: 1200px) {
  .nav__list { gap: 18px; }
  .nav__link { font-size: 11px; letter-spacing: .14em; }
}

@media (max-width: 1100px) {
  .nav__list { gap: 15px; }
  .why__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 34px; }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; row-gap: 46px; }
}

@media (max-width: 991px) {
  .section { padding: 72px 0; }
  .burger { display: flex; }
  .header__tools .tool:last-of-type { display: none; }  /* burger replaces the list toggle */
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--white); box-shadow: var(--shadow);
    max-height: 0; overflow: hidden; transition: max-height .35s var(--ease);
  }
  .nav.is-open { max-height: 80vh; overflow-y: auto; }
  .nav__list { flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 10px 24px 20px; }
  .nav__link { font-size: 11.5px; letter-spacing: .18em; }
  .nav__item { border-bottom: 1px solid var(--line); }
  .nav__link { display: block; padding: 15px 0; }
  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border-top: 0; padding: 0 0 10px 14px;
    max-height: 0; overflow: hidden; transition: max-height .3s var(--ease);
  }
  .nav__item.is-open > .dropdown { max-height: 420px; }

  .about__inner, .faq__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .about__media img { max-height: 460px; }
  .about__inner--tech { margin-top: 40px; padding-top: 38px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .slide__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; text-align: center; padding-block: 48px 76px; }
  .slide__body { max-width: none; margin-inline: auto; }
  .slide__text { margin-inline: auto; }
  .slide__actions { justify-content: center; }
  .wholesale__grid { grid-template-columns: minmax(0, 1fr); }
  .promo--main { min-height: 460px; }
  .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote { padding: 44px 34px; }
  /* the ±34px peeking cards have no room left to peek into */
  .quotes::before, .quotes::after { display: none; }
  .map__overlay { position: static; padding-block: 34px; }
  .map__card { max-width: none; padding: 0; box-shadow: none; }
  .map iframe { height: 340px; }

  .shop-hero__inner { grid-template-columns: minmax(0, 1fr); text-align: center; gap: 28px; }
  .shop-hero__text { margin-inline: auto; }
  .shop-hero__actions { justify-content: center; }
  .request__inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .cart__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .contact__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .steps__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 34px; }
  .request { padding: 72px 0; }

  /* the pill switch moves into the drawer as full language names */
  .header__tools .lang { display: none; }
  .lang--stacked {
    display: flex; gap: 10px; padding: 14px 24px 18px;
    border-top: 1px solid var(--line);
  }
  .lang--stacked .lang__link { padding: 8px 14px; font-size: 12px; background: var(--grey); }
  .lang--stacked .lang__link.is-active { background: var(--green); color: var(--white); }
}

@media (max-width: 640px) {
  .container { width: min(100% - 32px, var(--container)); }
  .header__inner { gap: 14px; min-height: 76px; }
  .logo__img { height: 34px; }
  .header__tools { gap: 14px; }
  .tabs { gap: 22px; }
  .why__grid { grid-template-columns: minmax(0, 1fr); }
  .about__services-grid { grid-template-columns: minmax(0, 1fr); }
  .card__media { --media-h: 200px; --media-pad: 16px; }
  .card__body { padding: 4px 10px 22px; }
  .promo--main { padding: 22px; }
  .promo__panel { padding: 28px 20px 30px; }
  .promo--sm { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 30px 22px; }
  .promo__sm-body { justify-items: center; }
  .promo--sm .promo__text { max-width: none; }
  .promo__sm-media img { max-height: 150px; }
  .shop__foot { flex-direction: column; gap: 14px; }
  .team__grid { grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; }
  .clients__deco { display: none; }
  .quotes .slider-arrow { top: auto; bottom: -46px; transform: none; }
  .quotes .slider-arrow--prev { left: 50%; margin-left: -74px; }
  .quotes .slider-arrow--next { right: 50%; margin-right: -74px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__services { padding: 36px 0 32px; }
  .footer__services-grid { grid-template-columns: minmax(0, 1fr); }
  .footer__brand, .footer__newsletter { grid-column: 1 / -1; }
  .footer__bottom-inner { flex-direction: column; align-items: flex-start; padding: 18px 0; }
}

@media (max-width: 460px) {
  .product-grid { grid-template-columns: minmax(0, 1fr); max-width: 330px; margin-inline: auto; }
  .request__form { padding: 26px 20px 28px; }
  .cart__pic { display: none; }
  .cart__summary { padding: 22px 18px 24px; }
  .pv { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 26px 22px 28px; }
  .pv__stage { min-height: 200px; }
  .pv__stage img { max-height: 190px; }
  .contact__form { padding: 26px 20px 28px; grid-template-columns: minmax(0, 1fr); }
  .contact__form .field--half { grid-column: 1 / -1; }
  .modal__body { padding: 28px 22px 26px; }
  .modal .field--half { display: block; width: 100%; }
  .modal .field--half + .field--half { margin-left: 0; }
  .tabs { gap: 16px 18px; }
}