/* =========================================================
   MEDICA 2026 · INTCO Medical — landing page
   Design reference: 1920px wide artwork.
   Layout uses rem where 1rem = 10px of the reference design,
   so the whole composition scales fluidly with the viewport.
   ========================================================= */

:root {
  --navy: #111c3d;
  --navy-2: #12203f;
  --text: #4d5a6d;
  --muted: #7e8fa1;
  --blue: #3e9ffe;
  --blue-soft: #dbecfe;
  --pill-text: #0d1b4b;
  --grad: linear-gradient(90deg, #3fcdff 0%, #6073ff 100%);
  --border: #e9edf3;
  --divider: #eef2f7;
  --shadow-card: 0 0.8rem 3rem rgba(19, 48, 88, 0.08);
  --shadow-soft: 0 0.6rem 2rem rgba(19, 48, 88, 0.06);
  --font: "Inter", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }

html {
  /* 1920px design -> 10px root size, fluid below, clamped for legibility */
  font-size: clamp(4.4px, 0.52083vw, 10px);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
ul { list-style: none; margin: 0; padding: 0; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }

.container {
  width: 129.6rem;
  margin: 0 auto;
}
.container--wide { width: 140rem; }

/* ============ buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  height: 4.6rem;
  padding: 0 2.6rem;
  border-radius: 0.9rem;
  font-size: 1.7rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}
.btn--gradient {
  background: var(--grad);
  box-shadow: 0 0.6rem 1.6rem rgba(63, 165, 255, 0.28);
}
.btn--gradient:hover { transform: translateY(-0.2rem); box-shadow: 0 0.9rem 2rem rgba(63, 165, 255, 0.36); }
.btn--lg { height: 5rem; padding: 0 3.2rem; font-size: 1.8rem; }
.btn__arrow { font-size: 1.8rem; line-height: 1; transition: transform 0.25s ease; }
.btn:hover .btn__arrow { transform: translateX(0.4rem); }

/* ============ section titles ============ */
.section__title {
  margin: 0;
  font-size: 3.2rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--navy);
  text-align: center;
}
.section__title--left { text-align: left; }
.section__subtitle {
  margin: 1.4rem 0 0;
  font-size: 2rem;
  line-height: 1.5;
  color: #5b6b82;
  text-align: center;
  font-weight: 400;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  height: 68rem;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background: url("../images/medica2026 banner.webp") center top / cover no-repeat;
}
.hero__inner {
  position: relative;
  height: 100%;
  width: 100%;
}
.hero__title {
  position: absolute;
  top: 16.2rem;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: "Montserrat", var(--font);
  font-size: 16rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.005em;
  color: #fff;
  text-shadow: 0 0.6rem 3rem rgba(8, 32, 68, 0.42), 0 0.2rem 0.8rem rgba(8, 32, 68, 0.32);
}
.hero-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-info__item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  color: #fff;
}
.hero-info__label {
  font-size: 3.4rem;
  line-height: 1.1;
  font-weight: 600;
  text-shadow: 0 0.2rem 1rem rgba(8, 32, 68, 0.4);
}
.hero-info__value {
  font-size: 2rem;
  line-height: 1.6;
  font-weight: 400;
  text-shadow: 0 0.2rem 1rem rgba(8, 32, 68, 0.4);
}
.hero-info__value--xl {
  font-size: 6.2rem;
  line-height: 1.05;
  font-weight: 700;
}
.hero-info__divider {
  width: 1px;
  height: 8.8rem;
  background: rgba(255, 255, 255, 0.4);
  flex: none;
}
.hero-info__divider:nth-of-type(2) { margin: 0 16.8rem 0 8.8rem; }
.hero-info__divider:nth-of-type(4) { margin: 0 10.6rem 0 6.8rem; }

/* =========================================================
   WHAT DO WE HAVE
   ========================================================= */
.section--products { padding: 6.4rem 0 2.6rem; }

.tabs {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  margin-top: 4.4rem;
}
.tabs__btn {
  flex: 1 1 auto;            /* smaller labels no longer squeeze the row: let it grow back to full width */
  height: 5.6rem;
  padding: 0 2.1rem;
  border: 0;
  border-radius: 1.3rem;
  background: var(--blue-soft);
  color: var(--pill-text);
  font-size: 1.7rem;         /* the artwork sets the labels on one line */
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.tabs__btn:hover { transform: translateY(-0.2rem); }
.tabs__btn.is-active {
  background: var(--blue);
  color: #fff;
}

/* panel (product highlight card) */
.panels { margin-top: 3.8rem; }
.panel { display: none; }
.panel.is-active {
  display: flex;
  height: 26.1rem;
  border-radius: 2rem;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.panel__media { width: 62.2rem; flex: none; }
.panel__media img { width: 100%; height: 100%; object-fit: cover; }
.panel__body {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-left: 11.2rem;
  background: linear-gradient(150deg, #ececee 0%, #f5f5f7 42%, #fcfcfd 100%);
  overflow: hidden;
}
.panel__body::after {
  content: "";
  position: absolute;
  top: -18rem;
  right: -12rem;
  width: 60rem;
  height: 60rem;
  background-image:
    repeating-linear-gradient(45deg, rgba(120, 130, 150, 0.055) 0 0.1rem, transparent 0.1rem 1.1rem),
    repeating-linear-gradient(-45deg, rgba(120, 130, 150, 0.055) 0 0.1rem, transparent 0.1rem 1.1rem);
  transform: rotate(8deg);
  pointer-events: none;
}
.panel__title {
  position: relative;
  margin: 0;
  font-size: 3.8rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--navy-2);
}
.panel__body .btn { position: relative; margin-top: 3rem; }

/* product panels that use an exported artwork slice (1295x261) as the whole card background */
@media (min-width: 821px) {
  .panel[data-panel="gloves"],
  .panel[data-panel="pe"],
  .panel[data-panel="rehab"],
  .panel[data-panel="therapy"],
  .panel[data-panel="ecg"] {
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% 100%;
  }
  .panel[data-panel="gloves"] { background-image: url("../images/Disposable Gloves.webp"); }
  .panel[data-panel="pe"] { background-image: url("../images/PE-Nonwoven-Products.webp"); }
  .panel[data-panel="rehab"] { background-image: url("../images/Rehabilitation Equipment.webp"); }
  .panel[data-panel="therapy"] { background-image: url("../images/Physical Therapy Products.webp"); }
  .panel[data-panel="ecg"] { background-image: url("../images/ECG-Electrosurgery.webp"); }

  /* the slice already contains the photo and the pattern, so the body must stay see-through */
  .panel[data-panel="gloves"] .panel__body,
  .panel[data-panel="pe"] .panel__body,
  .panel[data-panel="rehab"] .panel__body,
  .panel[data-panel="therapy"] .panel__body,
  .panel[data-panel="ecg"] .panel__body { background: none; }
  .panel[data-panel="gloves"] .panel__body::after,
  .panel[data-panel="pe"] .panel__body::after,
  .panel[data-panel="rehab"] .panel__body::after,
  .panel[data-panel="therapy"] .panel__body::after,
  .panel[data-panel="ecg"] .panel__body::after { display: none; }
}

/* =========================================================
   carousel (shared)
   ========================================================= */
.carousel { position: relative; }
.carousel__viewport,
.carousel__window { overflow: hidden; }
.carousel__track {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

/* product cards row */
.carousel--cards { margin-top: 3.6rem; }
/* The cards carry a drop shadow, so the clipping viewport gets breathing room on
   every side (padding) while the negative margins keep the visible row exactly
   as wide as before — the card sizes are derived from the content box in JS. */
.carousel--cards .carousel__viewport {
  overflow: hidden;
  padding: 2.4rem 2rem 4.2rem;
  margin: -2.4rem -2rem 0;
}
.carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 4rem;
  height: 4rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}
.carousel__nav:hover { opacity: 1; }
.carousel__nav svg {
  width: 2.2rem;
  height: 2.2rem;
  fill: none;
  stroke: #9aa7b8;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.carousel__nav--prev { left: -4.4rem; }
.carousel__nav--next { right: -4.4rem; }

/* Four product types are visible at once (as in the artwork). The geometry is
   driven by --pcard-w / --pcard-h / --pcard-gap, set from JS so that exactly
   four cards always fill the viewport; the values here are the fallback. */
.pcard {
  position: relative;
  flex: none;
  width: var(--pcard-w, 29.8rem);
  height: var(--pcard-h, 31.2rem);
  margin-right: var(--pcard-gap, 3.4rem);
  border-radius: 1.6rem;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-card);
}
.pcard:last-child { margin-right: 0; }
/* a card that links out carries this invisible wrapper: it fills the whole card
   so the entire picture is clickable and opens the product page in a new tab */
.pcard__link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
/* cards of a category the visitor is not looking at are taken out of the row */
.pcard[hidden] { display: none; }
.pcard img { width: 100%; height: 100%; object-fit: cover; }
.pcard__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: var(--navy-2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.96) 42%, #fff 100%);
}

/* =========================================================
   ABOUT
   ========================================================= */
.section--about {
  position: relative;
  padding: 5.6rem 0 4.4rem;
  background: #fff url("../images/about-bg.jpg") center top / 100% 100% no-repeat;
  overflow: hidden;
}

.about-card {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 3.6rem;
}
.about-card__media { width: 54rem; flex: none; align-self: center; }
/* the hall photo keeps its own proportions (1096x648) — never stretched or
   cropped; it sits centred on the text panel's height so the two read as one
   horizontally aligned block */
.about-card__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.6rem;
}
/* only the text sits on the white panel: the photo laps its rounded left edge
   (the negative margin is cancelled by the extra left padding below) */
.about-card__body {
  flex: 1;
  margin-left: -6.2rem;
  padding: 3.6rem 5.2rem 3.6rem 6.4rem;
  border-radius: 2.4rem;
  background: #fff;
  box-shadow: var(--shadow-card);
}
.about-card__eyebrow {
  display: block;
  margin: 0 0 1.4rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.18rem;
  text-transform: uppercase;
  color: var(--blue);
}
.about-card__title {
  margin: 0;
  font-size: 3.2rem;
  line-height: 1.2;
  font-weight: 800;
  color: var(--navy);
}
.about-card__text {
  margin: 2rem 0 0;
  font-size: 1.9rem;
  line-height: 3.2rem;
  color: var(--text);
}
.about-card__text + .about-card__text { margin-top: 1.4rem; }
.about-card__body .btn { margin-top: 3.6rem; }

/* =========================================================
   VENUE + MAP
   ========================================================= */
.section--venue { padding: 4.8rem 0 5.6rem; }
/* the section heading ("Meet Us in Düsseldorf") sits above the venue card + map */
.section--venue .venue-grid { margin-top: 3.6rem; }
.venue-grid { display: flex; gap: 2.2rem; align-items: stretch; }

.venue-card {
  width: 48.5rem;
  flex: none;
  border: 1px solid var(--border);
  border-radius: 1.6rem;
  padding: 3.6rem 3.4rem 2.6rem 4.4rem;
  background: #fff;
  box-shadow: var(--shadow-card);
}
.venue-row { display: flex; gap: 1.6rem; padding-bottom: 1.8rem; margin-bottom: 1.8rem; border-bottom: 1px solid var(--divider); }
.venue-row:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.venue-row__icon {
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  margin-top: 0.2rem;
  object-fit: contain;
}
.venue-row__content { display: flex; flex-direction: column; gap: 0.6rem; }
.venue-row__label {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  color: #2c86e0;
}
.venue-row__value { font-size: 1.9rem; line-height: 1.4; font-weight: 500; color: #1b2437; }

.map-card {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 1.6rem;
  padding: 2.4rem 3.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: var(--shadow-card);
}
.map-card img { width: 100%; height: auto; border-radius: 1.2rem; }

/* =========================================================
   SCHEDULE
   ========================================================= */
.section--schedule {
  position: relative;
  padding: 7.4rem 0 3.4rem;
  background: #f7faff url("../images/Schedule a Meeting.jpg") center center / 100% 100% no-repeat;
  overflow: hidden;
}
.section--schedule .container { position: relative; text-align: center; }
.section--schedule .btn { margin-top: 3.9rem; }

/* =========================================================
   GALLERY
   ========================================================= */
.section--gallery {
  position: relative;
  padding: 4.5rem 0 0;
  /* the flat dark colour stays underneath as a fallback for the photo band */
  background: linear-gradient(180deg, #171c26 0%, #10141d 55%, #0b0e15 100%);
  overflow: hidden;
}
/* the band is filled with the wide shot of the centred photo: one layer per
   slide, cross-faded by the script. The scrim keeps the white text readable. */
.gallery__bg { position: absolute; inset: 0; z-index: 0; }
.gallery__bg-layer {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.gallery__bg-layer.is-on { opacity: 1; }
.gallery__bg-layer--1 { background-image: url("../images/MEDICA Exhibition Site 1.webp"); }
.gallery__bg-layer--2 { background-image: url("../images/MEDICA Exhibition Site 2.webp"); }
.gallery__bg-layer--3 { background-image: url("../images/MEDICA Exhibition Site 3.webp"); }
.gallery__bg-layer--4 { background-image: url("../images/MEDICA Exhibition Site 4.webp"); }
.gallery__bg-layer--5 { background-image: url("../images/MEDICA Exhibition Site 5.webp"); }
.gallery__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* the photo is only half dimmed now — light enough to read the pictures, dark
     enough to keep the white heading legible */
  background: linear-gradient(
    180deg,
    rgba(11, 14, 21, 0.55) 0%,
    rgba(11, 14, 21, 0.45) 45%,
    rgba(11, 14, 21, 0.6) 100%
  );
}
.gallery__head { position: relative; z-index: 1; text-align: center; }
.gallery__eyebrow {
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.gallery__title {
  margin: 1.5rem 0 0;
  font-size: 3.3rem;
  line-height: 1.2;
  font-weight: 700;
  color: #fff;
}
.carousel--gallery { position: relative; z-index: 1; margin-top: 3.3rem; }
/* js drives the row: whichever photo sits in the middle is the full size and the
   rest of the row is slightly smaller. The scaling is a transform on the card —
   not a change of its layout box — so JS keeps centring each slide on the exact
   same point and the carousel step maths is untouched.
   Each card also carries its matching wide venue shot (MEDICA Exhibition Site N.webp) as the
   backdrop; the sharp photo fills the card edge to edge on top of it. */
.gslide {
  position: relative;
  flex: none;
  width: 38rem;              /* the exported photos are 380x240, so 1:1 */
  height: 24rem;
  margin-right: 4rem;
  border-radius: 1.4rem;
  overflow: hidden;
  background: #1b2130 center / cover no-repeat;
  transform: scale(0.9);
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.gslide--1 { background-image: url("../images/MEDICA Exhibition Site 1.webp"); }
.gslide--2 { background-image: url("../images/MEDICA Exhibition Site 2.webp"); }
.gslide--3 { background-image: url("../images/MEDICA Exhibition Site 3.webp"); }
.gslide--4 { background-image: url("../images/MEDICA Exhibition Site 4.webp"); }
.gslide--5 { background-image: url("../images/MEDICA Exhibition Site 5.webp"); }
.gslide.is-active { z-index: 2; transform: scale(1); }
.gslide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2.3rem 0 2.6rem;
}
.dots__dot {
  width: 0.7rem;
  height: 0.7rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease, border-radius 0.3s ease;
}
.dots__dot.is-active { width: 2rem; border-radius: 0.5rem; background: #fff; }

/* =========================================================
   WORLDWIDE EXHIBITIONS
   ========================================================= */
.section--exhibitions { padding: 11rem 0 0; background: #fff; }
.exhibitions__head { text-align: center; }
.exhibitions__eyebrow {
  display: block;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: #93a0b2;
}
.exhibitions__title {
  margin: 1.4rem 0 0;
  font-size: 3.1rem;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--navy-2);
}

/* three cards per view; geometry comes from JS so they always fill the container */
.carousel--exhibitions { margin-top: 4.2rem; }
/* the row sits in a slightly narrower, centred block than the page container —
   as in the artwork — so the cards read a size smaller; JS derives the card
   width from this viewport, so everything scales automatically. The viewport's
   side bleed (2 × 3rem negative margins below) spreads OUTSIDE this box into
   the container's spare room, so the visible row equals this width exactly. */
.carousel--exhibitions {
  max-width: 110rem;
  margin-left: auto;
  margin-right: auto;
}
/* The artwork lifts every card off the page with a soft shadow. The viewport is the
   element that clips the row, so it has to carry the room the shadow paints into:
   vertical bleed in fixed px (the shadow is fixed px too) and a 3rem side bleed —
   just under the 3.2rem card gap, so the neighbouring card stays hidden while the
   hovered edge card's shadow fades out instead of being cut into a hard line.
   The matching negative margins cancel the padding again; JS reads the computed
   side padding, so the card maths follows automatically. */
.carousel--exhibitions .carousel__viewport {
  padding: 28px 3rem 18px;
  margin: -28px -3rem -18px;
}
.xcard {
  flex: none;
  width: var(--xcard-w, 41rem);
  margin-right: var(--xcard-gap, 3.2rem);
  background: #fff;
  border-radius: 1.4rem;
  /* bottom-only shadow: the negative spread pulls the shadow shape back inside
     the card (8px in on every side) and the matching y-offset pushes it back down,
     so all that stays visible is a soft block under the box. Spread >= blur keeps
     the left/right edges of the box completely free of shadow, so no halo pokes
     out beside the card and the gap between two cards stays white. */
  box-shadow: 0 8px 8px -8px rgba(19, 48, 88, 0.2);
  overflow: hidden;
  transform: scale(1);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease;
}
/* hovering lifts the card: slightly bigger and a deeper shadow (the transform
   scales around the centre, so the carousel row maths is untouched).
   Same bottom-only recipe — spread equals blur again, so the hovered card's
   shadow still never paints beside the box. */
.xcard:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 12px -12px rgba(19, 48, 88, 0.24);
}
.xcard:last-child { margin-right: 0; }
/* a card that links out carries this invisible wrapper: it fills the whole card
   so the poster and the text block are both clickable and open the exhibition
   page in a new tab */
.xcard__link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.xcard__img { display: block; width: 100%; height: auto; }
.xcard__body { padding: 1.7rem 2rem 2rem; }
.xcard__title {
  margin: 0;
  font-size: 2rem;
  line-height: 1.25;
  font-weight: 800;
  color: var(--navy-2);
  letter-spacing: -0.01em;
}
/* ordinal suffix ("140th") sits as a raised superscript without growing the
   title's line box — the cards must stay exactly the same height */
.xcard__title sup {
  font-size: 0.62em;
  vertical-align: super;
  line-height: 0;
}
.xcard__meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.9rem 0 0;
  font-size: 1.4rem;
  color: #8592a4;
}
.xcard__pin { display: flex; }
.xcard__pin svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.carousel__navs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
  margin-top: 4rem;
}
/* White circular buttons with a hairline border and a soft drop shadow, dark
   navy chevrons — matching the reference art. Hover still fills brand blue. */
.carousel--exhibitions .carousel__nav {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
  width: 3.6rem;
  height: 3.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e4eaf3;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 16px rgba(19, 48, 88, 0.08);
  opacity: 1;
  transition: background 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
}
.carousel--exhibitions .carousel__nav svg {
  width: 1.6rem;
  height: 1.6rem;
  stroke: #24304a;
  stroke-width: 2.4;
  transition: stroke 0.3s ease;
}
/* Both arrows rest in the same white circle — the chevrons keep pointing left /
   right and never mirror. A temporarily inactive arrow fades its chevron only;
   the hovered one fills with the brand blue and turns its chevron white. */
.carousel--exhibitions .carousel__nav.is-off { opacity: 0.55; }
.carousel--exhibitions .carousel__nav.is-off svg { stroke: #b9c3d3; }
.carousel--exhibitions .carousel__nav:hover { background: #2f6df6; opacity: 1; }
.carousel--exhibitions .carousel__nav:hover svg { stroke: #fff; }

/* =========================================================
   FAQ
   ========================================================= */
.section--faq { padding: 11rem 0 24rem; }
.faq-grid { display: flex; gap: 4.5rem; align-items: stretch; }

.faq-photo { width: 41rem; flex: none; }
/* the photo keeps its own proportions (820x864) — never stretched or cropped
   to match the text column's height */
.faq-photo img {
  width: 100%;
  height: auto;
  border-radius: 1.6rem;
}
.faq-body { flex: 1; min-width: 0; }

.faq { margin-top: 3.2rem; }
/* every row keeps its hairline divider — the open one is no longer a filled card */
.faq__item { border-bottom: 1px solid var(--divider); }
/* the question is a real <h3> (document outline / SEO); the heading box carries
   no type of its own, so the clickable bar keeps its original metrics */
.faq__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  padding: 1.3rem 2rem 1.3rem 1.8rem;
  border: 0;
  background: none;
  text-align: left;
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 600;
  color: #1b2b4d;
  cursor: pointer;
}
.faq__item.is-open .faq__q { padding-bottom: 0.8rem; }
.faq__icon {
  position: relative;
  width: 1.4rem;
  height: 1.4rem;
  flex: none;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background: #9aa6b6;
  border-radius: 0.2rem;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.faq__icon::before { top: 50%; left: 0; width: 100%; height: 0.16rem; margin-top: -0.08rem; }
.faq__icon::after { left: 50%; top: 0; height: 100%; width: 0.16rem; margin-left: -0.08rem; }
.faq__item.is-open .faq__icon::after { transform: scaleY(0); opacity: 0; }

/* the answer appears at once — no height animation, so a closing answer is never
   on screen at the same time as the one that opens (the script keeps a single
   item open anyway) */
.faq__a { display: none; }
.faq__item.is-open .faq__a { display: block; }
.faq__a-inner {
  padding: 0 2rem 1.3rem 1.8rem;
  font-size: 1.45rem;
  line-height: 2.2rem;
  color: var(--muted);
}
/* the answer text is plain: highlighted phrases are not bolded and keep the
   same grey and size as the rest of the sentence */
.faq__a-inner strong { font-weight: 400; color: inherit; font-size: inherit; }

/* =========================================================
   reveal on scroll
   ========================================================= */
.reveal { opacity: 0; transform: translateY(2.4rem); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .gslide { transition: none; }
  .gallery__bg-layer { transition: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   TABLET / MOBILE
   ========================================================= */
@media (max-width: 1024px) {
  .hero-info__divider:nth-of-type(2) { margin: 0 6rem 0 4rem; }
  .hero-info__divider:nth-of-type(4) { margin: 0 4rem 0 3rem; }
  .venue-grid { flex-direction: column; }
  .venue-card { width: 100%; }
}

@media (max-width: 820px) {
  html { font-size: 10px; }
  .container,
  .container--wide { width: auto; margin: 0 20px; }

  .hero { height: auto; padding: 60px 20px 40px; }
  .hero__bg { background-position: center bottom; }
  .hero__inner { display: flex; flex-direction: column; gap: 40px; }
  .hero__title { position: static; font-size: 52px; letter-spacing: 0.02em; }
  /* the banner copy is centred on phones — the stacked Booth / Time / Venue
     rows line up on a single axis under the title */
  .hero-info { position: static; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
  .hero-info__label { font-size: 22px; }
  .hero-info__value { font-size: 16px; }
  .hero-info__value--xl { font-size: 40px; }
  .hero-info__divider { display: none; }

  .section--products { padding-top: 48px; }
  .section__title { font-size: 26px; }
  .section__subtitle { font-size: 16px; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; gap: 10px; margin-top: 26px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs__btn { height: 44px; padding: 0 16px; font-size: 15px; border-radius: 10px; flex: none; }
  .panels { margin-top: 22px; }
  .panel.is-active { flex-direction: column; height: auto; }
  .panel__media { width: 100%; height: 220px; }
  .panel__body { padding: 28px 20px 32px; }
  .panel__title { font-size: 26px; }
  /* stacked layout: show the photo part of each exported slice inside the media box */
  .panel[data-panel="gloves"] .panel__media { background: url("../images/Disposable Gloves.webp") left center / cover no-repeat; }
  .panel[data-panel="pe"] .panel__media { background: url("../images/PE-Nonwoven-Products.webp") left center / cover no-repeat; }
  .panel[data-panel="rehab"] .panel__media { background: url("../images/Rehabilitation Equipment.webp") left center / cover no-repeat; }
  .panel[data-panel="therapy"] .panel__media { background: url("../images/Physical Therapy Products.webp") left center / cover no-repeat; }
  .panel[data-panel="ecg"] .panel__media { background: url("../images/ECG-Electrosurgery.webp") left center / cover no-repeat; }

  .carousel--cards { margin-top: 22px; }
  .carousel--cards .carousel__viewport { overflow: hidden; }
  /* still four product types at once while they stay readable (JS sets the vars),
     otherwise the row falls back to the swipeable 220px cards */
  .pcard { width: var(--pcard-w, 220px); height: var(--pcard-h, 230px); margin-right: var(--pcard-gap, 14px); }
  .pcard__label { height: 44px; font-size: 15px; line-height: 1.2; padding: 0 8px; text-align: center; }
  .carousel__nav { display: none; }

  .section--about {
    padding: 40px 0 24px;
    background-position: left top;
    background-size: 100% auto;
  }
  .about-card { flex-direction: column; gap: 22px; }
  .about-card__media,
  .about-card__media img { width: 100%; }
  .about-card__media img { height: auto; aspect-ratio: 1096 / 648; border-radius: 16px; }
  .about-card__body { margin-left: 0; padding: 26px 22px 24px; border-radius: 20px; }
  .about-card__eyebrow { font-size: 12px; letter-spacing: 1.4px; margin-bottom: 10px; }
  .about-card__title { font-size: 24px; }
  .about-card__text { font-size: 15px; line-height: 24px; margin-top: 12px; }
  .about-card__text + .about-card__text { margin-top: 10px; }
  .about-card__body .btn { margin-top: 22px; }

  .section--venue { padding: 32px 0; }
  .section--venue .venue-grid { margin-top: 22px; }
  .venue-card { padding: 24px 20px; }
  .venue-row__value { font-size: 16px; }
  .map-card { padding: 20px; }

  .section--schedule { padding: 44px 0 24px; }
  .section--schedule .btn { margin-top: 24px; }

  .gallery__title { font-size: 24px; }
  .gslide { width: 280px; height: 177px; margin-right: 16px; }
  .carousel--gallery { margin-top: 20px; }

  .section--exhibitions { padding: 56px 0 0; }
  .exhibitions__eyebrow { font-size: 13px; }
  .exhibitions__title { font-size: 24px; margin-top: 12px; }
  .carousel--exhibitions { margin-top: 24px; }
  /* phones: the card gap is only 16px, so the side bleed shrinks to 14px — still
     hides the neighbouring card, but leaves the hover shadow room to fade */
  .carousel--exhibitions .carousel__viewport {
    padding-left: 14px;
    padding-right: 14px;
    margin-left: -14px;
    margin-right: -14px;
  }
  .xcard:hover { box-shadow: 0 9px 9px -9px rgba(19, 48, 88, 0.24); }
  .xcard { width: var(--xcard-w, 264px); margin-right: var(--xcard-gap, 16px); border-radius: 12px; }
  .xcard__body { padding: 14px 16px 18px; }
  .xcard__title { font-size: 18px; }
  .xcard__meta { font-size: 14px; margin-top: 8px; }
  .carousel__navs { margin-top: 26px; gap: 16px; }
  .carousel--exhibitions .carousel__nav { width: 40px; height: 40px; }
  .carousel--exhibitions .carousel__nav svg { width: 17px; height: 17px; }

  .section--faq { padding: 48px 0 60px; }
  .faq-grid { flex-direction: column; gap: 24px; }
  .faq-photo,
  .faq-photo img { width: 100%; }
  .faq__q { font-size: 15px; padding: 14px 16px 14px 14px; }
  .faq__a-inner { font-size: 13.5px; line-height: 22px; padding: 0 16px 14px 14px; }
  .faq__item.is-open .faq__q { padding-bottom: 8px; }
  .faq__icon { width: 12px; height: 12px; }

  /* phones: the same cards are much narrower here, so the desktop corner radius
     reads too round — every card corner drops one notch
     (panel/about 20 -> 14, cards 16 -> 12, slides 14 -> 12, inner img 12 -> 10) */
  .panel.is-active { border-radius: 14px; }
  .pcard { border-radius: 12px; }
  .gslide { border-radius: 12px; }
  .xcard { border-radius: 10px; }
  .about-card__media img { border-radius: 12px; }
  .about-card__body { border-radius: 14px; }
  .venue-card { border-radius: 12px; }
  .map-card { border-radius: 12px; }
  .map-card img { border-radius: 10px; }
  .faq-photo img { border-radius: 12px; }
}