/* =============================================================================
   home.css (home area): front page sections and the modals only the home page
   opens (journal panel, stories viewer, newsletter panel).
   Spec: docs/reference/02-home.md (measurements at 1440 unless noted).
   ============================================================================= */

/* Home one-offs (02 §15.2): colours used by the home page only. */
:root {
  --c-map: #c8beb8;         /* map: served territory (second fill is --c-taupe) */
  --c-accent-red: #ed0014;  /* "accent" story disc */
  --c-story-ph: #dedede;    /* story frame placeholder */
  --home-cursor-prev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='65' height='16' viewBox='0 0 65 16'%3E%3Cpath d='M64 8H1.5M8.5 1 1.5 8l7 7' fill='none' stroke='white' stroke-width='1.3'/%3E%3C/svg%3E") 32 8;
  --home-cursor-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='65' height='16' viewBox='0 0 65 16'%3E%3Cpath d='M1 8h62.5M56.5 1l7 7-7 7' fill='none' stroke='white' stroke-width='1.3'/%3E%3C/svg%3E") 32 8;
}

.home-page { overflow-x: clip; }

/* ============================================================================
   1. HERO SLIDER (02 §2)
   ============================================================================ */
.home-hero {
  position: relative;
  z-index: 0;
  height: calc(100vh - 132px);
  min-height: 460px;
  margin-top: calc(-1 * var(--header-h));
  overflow: hidden;
  color: var(--c-white);
  background: var(--c-taupe);
}
.home-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: var(--scrim-hero);
  pointer-events: none;
}
.home-hero:focus { outline: 0; }
.home-hero__slides { position: absolute; inset: 0; }
.home-hero__slide {
  position: absolute; inset: 0;
  display: block;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
.home-hero__slide.is-active { opacity: 1; }
.home-hero__slide img, .home-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Click halves: previous / next with white line-arrow cursors. */
.home-hero__half {
  position: absolute; top: 0; z-index: 2;
  width: 50%; height: 100%;
}
.home-hero__half--prev { left: 0; cursor: var(--home-cursor-prev), w-resize; }
.home-hero__half--next { right: 0; cursor: var(--home-cursor-next), e-resize; }
.home-hero__half:focus-visible { outline: 2px solid var(--c-white); outline-offset: -12px; }

/* Content: one block per slide, stacked bottom-left; only the active one shows. */
.home-hero__content {
  position: absolute; left: 0; bottom: 104px; z-index: 3;
  padding: 0 var(--unit);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-1) var(--ease);
}
.home-hero__content.is-active { opacity: 1; pointer-events: auto; }
.home-hero__title {
  max-width: 12.9em;
  margin-bottom: 32px;
  font-size: var(--fs-hero);
  color: var(--c-white);
}
/* Only the active slide's CTA takes clicks: every slide's button sits in the same spot. */
.home-hero__content:not(.is-active) .home-hero__btn { pointer-events: none; }

/* Journal trigger (right, 58 % from the bottom). */
.home-hero__news {
  position: absolute; right: var(--unit); bottom: 58%; z-index: 3;
  display: flex; align-items: center;
  color: var(--c-white);
}
.home-hero__news-circle {
  position: relative;
  width: 32px; height: 32px;
  margin-left: 24px;
  border: 1px solid var(--c-taupe);
  border-radius: var(--r-round);
}
.home-hero__news-circle::before {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 24px; height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: var(--r-round);
  background: var(--c-taupe);
  transition: transform .3s var(--ease-out);
}
.home-hero__news:hover .home-hero__news-circle::before { transform: scale(.88); }
.home-hero__news:focus-visible { outline-color: var(--c-white); outline-offset: 6px; }

/* Dots */
.home-hero__dots {
  position: absolute; left: var(--unit); bottom: 40px; z-index: 3;
  display: flex; align-items: center;
  margin-left: -16px;
}
.home-hero__dots li { display: flex; align-items: center; height: calc(var(--lh-body) * 1em); margin-left: 16px; } /* one body line tall, as decaro: dots sit 6.6px higher */
.home-hero__dot {
  position: relative;
  width: 12px; height: 12px;
  border: 1px solid transparent;
  border-radius: var(--r-round);
  transition: transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.home-hero__dot::before {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 6px; height: 6px;
  border-radius: var(--r-round);
  background: var(--c-white);
  opacity: .3;
  transform: translate(-50%, -50%) scale(1.3);
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.home-hero__dot::after { content: ""; position: absolute; inset: -8px; } /* larger tap target */
.home-hero__dot.is-active { border-color: var(--c-white); }
.home-hero__dot.is-active::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.home-hero__dot:not(.is-active):hover { transform: scale(1.2); }
.home-hero__dot:not(.is-active):hover::before { opacity: 1; }
.home-hero__dot:focus-visible { outline-color: var(--c-white); }

/* First paint: images fade in, then the active text, dots and trigger rise in. */
@media (prefers-reduced-motion: no-preference) {
  html.js .home-hero__slides { opacity: 0; transition: opacity .4s ease-in-out .6s; }
  html.js .home-hero.is-animated .home-hero__slides { opacity: 1; }
  html.js .home-hero__content.is-active > *,
  html.js .home-hero__dots,
  html.js .home-hero__news {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity var(--dur-3) var(--ease-hero) .7s, transform var(--dur-3) var(--ease-hero) .7s;
  }
  html.js .home-hero.is-animated .home-hero__content.is-active > *,
  html.js .home-hero.is-animated .home-hero__dots,
  html.js .home-hero.is-animated .home-hero__news { opacity: 1; transform: none; }
}

@media (max-width: 500px) {
  .home-hero { height: 100vh; height: 100svh; min-height: 520px; }
  .home-hero__half { display: none; }
  .home-hero__content {
    inset: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    padding: 0 24px;
  }
  .home-hero__title { max-width: none; }
  .home-hero__btn { --btn-w: 164px; padding: 0; }
  .home-hero__news { flex-direction: column; align-items: flex-end; right: 24px; bottom: 96px; }
  .home-hero__news-circle { width: 40px; height: 40px; margin: 8px 0 0; }
  .home-hero__news-circle::before { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
  .home-hero__dots { left: 24px; }
}

/* ============================================================================
   2. STORIES ROW (02 §3.2–3.3)
   ============================================================================ */
.stories-strip { padding: 40px var(--unit) 64px; overflow: hidden; }
.stories-strip__swiper { overflow: visible; }
.stories-strip__item { width: auto; }
.stories-strip__btn { display: block; margin: 0 auto; text-align: center; color: var(--c-ink); }
.stories-strip__ring {
  display: flex; align-items: center; justify-content: center;
  width: 76px; height: 76px;
  margin: 0 auto; /* decaro: the name's 25.6px line box sits flush under the ring (glyphs ~5px below) */
  border: 2px solid var(--c-ink);
  border-radius: var(--r-round);
  transition: transform var(--dur-1) var(--ease);
}
.stories-strip__btn:hover .stories-strip__ring { transform: scale(.96); }
.stories-strip__img {
  display: block;
  width: calc(100% - 8px); aspect-ratio: 1;
  border-radius: var(--r-round);
  overflow: hidden;
  background: var(--c-surface-150);
}
.stories-strip__img img { width: 100%; height: 100%; object-fit: cover; }
.stories-strip__img--accent,
.stories__avatar--accent {
  display: flex; align-items: center; justify-content: center;
  background: var(--c-accent-red);
  color: var(--c-white);
  font-size: 11px; font-weight: var(--fw-medium); line-height: 1;
  letter-spacing: var(--ls-caps-tight); text-transform: uppercase;
}
.stories-strip__name {
  display: block;
  font-size: var(--fs-14); font-weight: var(--fw-medium); line-height: calc(var(--lh-body) * 1rem);
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  html.js [data-observe="stories"] .stories-strip__btn {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
    transition-delay: var(--delay, 0s);
  }
  html.js [data-observe="stories"].visible .stories-strip__btn { opacity: 1; transform: none; }
}
@media (max-width: 990px) {
  .stories-strip { padding: 40px 0 40px var(--unit); }
}
@media (max-width: 500px) {
  .stories-strip__ring { width: 68px; height: 68px; }
  .stories-strip__name { font-size: var(--fs-12); }
}

/* ============================================================================
   3. MARQUEES (02 §4, §12)
   ============================================================================ */
.ticker-wrap { width: 100%; background: var(--c-surface-150); }
@media (min-width: 1920px) { .ticker-wrap { padding-inline: calc((100% - 1920px) / 2); } }
.ticker { display: flex; overflow: hidden; padding: 16px 0; white-space: nowrap; }
.ticker__track { display: flex; flex-shrink: 0; will-change: transform; }
.ticker__list { display: flex; flex-shrink: 0; }
.ticker__item {
  display: inline-flex; align-items: center;
  font-size: var(--fs-16); font-weight: var(--fw-medium); line-height: 1;
  letter-spacing: var(--ls-caps-tight); text-transform: uppercase;
  color: var(--c-ink);
}
.ticker__item::before {
  content: "";
  flex-shrink: 0;
  width: 6px; height: 6px;
  margin: 0 16px;
  border-radius: var(--r-round);
  background: var(--c-ink);
}
.ticker__link { display: block; color: inherit; line-height: 1; text-transform: inherit; letter-spacing: inherit; }
.ticker__link:focus-visible { outline-offset: 4px; }
.ticker--newsletter .ticker__item { font-size: var(--fs-12); }
.ticker--newsletter .ticker__item::before { width: 3px; height: 3px; margin: 0 8px; }
.ticker.is-static { overflow-x: auto; scrollbar-width: none; }
.ticker.is-static::-webkit-scrollbar { display: none; }
@media (max-width: 990px) {
  .ticker__item { font-size: var(--fs-10); font-weight: var(--fw-bold); }
  .ticker__item::before { width: 3px; height: 3px; margin: 0 8px; }
  .ticker--newsletter .ticker__item { font-size: var(--fs-12); }
}

/* ============================================================================
   4. FOUR COLUMNS (02 §5)
   ============================================================================ */
.home-usp { padding: 160px 0 160px var(--unit); overflow: hidden; }
.home-usp__swiper { overflow: visible; }
.home-usp__slide {
  width: calc(3 * var(--column-and-gutter-unit) - var(--gutter-unit));
  min-width: calc(3 * var(--column-and-gutter-unit) - var(--gutter-unit));
  height: auto;
  margin-right: 24px;
  transition: opacity var(--dur-1) var(--ease);
}
.usp-text__title {
  display: block;
  max-width: 14.66em;
  margin-bottom: 16px;
  font-size: var(--fs-lead); font-weight: var(--fw-medium); line-height: 1;
  letter-spacing: 0;
}
.usp-text p { max-width: 22em; font-size: var(--fs-16); line-height: 1.5; }
.usp-text p + p { margin-top: 16px; }
@media (min-width: 1301px) {
  .home-usp__wrapper { cursor: default; }
}
@media (min-width: 2240px) {
  .home-usp { max-width: 2240px; margin: 0 auto; padding-inline: 160px; }
  .home-usp__wrapper { justify-content: space-between; }
  .home-usp__slide { margin-right: 0; }
}
@media (max-width: 1300px) {
  .home-usp { padding: 80px 0 80px var(--unit); }
  .home-usp__slide { width: 246px; min-width: 246px; margin-right: 32px; }
}
@media (max-width: 990px) {
  .home-usp { padding-top: 64px; padding-bottom: 64px; }
  .usp-text p { font-size: var(--fs-14); }
}
@media (max-width: 500px) {
  .home-usp { padding-left: 0; }
  .home-usp__slide:not(.swiper-slide-active) { opacity: .5; }
}

/* Swiper measures a slide's CSS margins as part of its size and then adds
   spaceBetween on top, so the static-layout margins must go once a carousel runs. */
.home-usp.is-carousel .home-usp__slide,
.home-services.is-carousel .home-services__slide { margin-right: 0; }

/* Shared carousel dots (≤500) */
.home-dots { display: flex; justify-content: center; padding-top: 16px; }
.home-dots[hidden] { display: none; }
.home-dots__dot {
  position: relative;
  width: 8px; height: 8px;
  margin: 0 8px;
  border-radius: var(--r-round);
  background: var(--c-ink);
  opacity: .2;
  transition: opacity var(--dur-1) var(--ease);
}
.home-dots__dot::after { content: ""; position: absolute; inset: -8px; }
.home-dots__dot.is-active { opacity: 1; }

/* ============================================================================
   5. COLLAGE + CERTIFIED QUALITY + PARTNER TEXT (02 §6, §7.1)
   ============================================================================ */
.home-about__images {
  position: relative;
  margin: 0 0 120px calc(var(--column-unit) + var(--gutter-unit));
}
.home-about__img { position: relative; overflow: hidden; background: var(--c-surface-150); }
.home-about__img img { position: absolute; left: 0; width: 100%; object-fit: cover; will-change: transform; }
.home-about__img--a {
  width: calc(6 * var(--column-and-gutter-unit) - var(--gutter-unit));
  aspect-ratio: 5 / 3;
}
.home-about__img--a img { top: -24px; height: calc(100% + 48px); }
.home-about__img--b {
  position: absolute; top: 75%;
  left: calc(-1 * (var(--unit) + var(--column-unit) + var(--gutter-unit)));
  width: calc(3 * var(--column-unit) + 3 * var(--gutter-unit));
  aspect-ratio: 100 / 128;
}
.home-about__img--b img { top: -40px; height: calc(100% + 80px); }

.home-about__text--right {
  max-width: calc(6 * var(--column-and-gutter-unit) - var(--gutter-unit));
  margin: 0 0 144px calc(5 * var(--column-and-gutter-unit) - var(--gutter-unit));
}
.home-about__text--left {
  position: relative; z-index: 1; /* the map section overlaps it by 96px */
  max-width: calc(5 * var(--column-and-gutter-unit) - var(--gutter-unit));
}
.home-about__title { margin-bottom: 32px; }
.home-about__p { margin-bottom: 16px; font-size: var(--fs-body); line-height: var(--lh-body); }
.home-about__p:last-of-type { margin-bottom: 40px; }

/* Certification marks with their captions */
.cert-marks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: -8px 0 48px;
}
.cert-marks__item { display: flex; flex-direction: column; align-items: flex-start; }
.cert-marks__img { width: auto; height: 44px; max-width: 100%; object-fit: contain; object-position: left center; }
.cert-marks__caption {
  display: block;
  margin-top: 12px;
  font-size: var(--fs-12); line-height: 1.35;
  color: var(--c-text-muted);
}

@media (max-width: 990px) {
  .home-about__images { margin: 0 0 64px; }
  .home-about__img--a { width: 70.66vw; margin-left: 12.8vw; }
  .home-about__img--b {
    position: relative; top: auto; left: auto;
    width: 33.33vw;
    margin: -15% 0 0 calc(-1 * var(--unit));
    aspect-ratio: 100 / 147.2;
  }
  .home-about__img img { top: 0; height: 100%; }
  .home-about__text--right {
    max-width: none;
    margin: 0 0 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--c-line);
  }
  .home-about__text--left { max-width: none; }
  .home-about__title { margin-bottom: 24px; }
  .home-about__p:last-of-type { margin-bottom: 32px; }
  .cert-marks { gap: 16px; margin-bottom: 40px; }
  .cert-marks__img { height: 36px; }
}
@media (max-width: 500px) {
  .cert-marks { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
}

/* ============================================================================
   6. PARTNER MAP + COUNTERS (02 §7.2–7.5)
   The UK and Ireland outline is tall, so the figures sit beside it (left)
   rather than over it; the block keeps decaro's width, overlap and centring.
   ============================================================================ */
.home-map {
  position: relative;
  margin-top: -96px;
  padding-bottom: 40px;
  overflow: hidden;
}
.home-map__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(4 * var(--column-and-gutter-unit) - var(--gutter-unit));
  align-items: center;
  width: calc(10 * var(--column-and-gutter-unit) - var(--gutter-unit));
  margin: 0 auto;
}
.home-map__figure { grid-column: 2; grid-row: 1; }
.home-map__svg { display: block; width: 100%; height: auto; }
.home-map__land--main { fill: var(--c-map); }
.home-map__land--near { fill: var(--c-taupe); }
.home-map__text {
  grid-column: 1; grid-row: 1;
  display: flex; flex-direction: column; align-items: center;
  padding-right: var(--gutter-unit);
  text-align: center;
}
.home-map__title { margin-bottom: 24px; }
.home-map__counters { display: flex; margin-bottom: 40px; line-height: 1; text-align: left; }
.home-map__counter:not(:last-child) { padding-right: 40px; margin-right: 40px; border-right: 1px solid var(--c-line); }
.home-map__num {
  display: flex; align-items: baseline;
  font-size: 48px; font-weight: var(--fw-medium); line-height: 1;
  letter-spacing: var(--ls-stat);
  font-variant-numeric: tabular-nums;
}
.home-map__num b { font-weight: inherit; }
.home-map__label { margin-top: 4px; font-size: var(--fs-16); line-height: 1.2; white-space: nowrap; }
.home-map__btn {
  --btn-w: 200px;
  --btn-h: var(--btn-h-md);
}
.home-map__btn .btn__bg { border-color: var(--c-line); }
@media (min-width: 1440px) { .home-map__num { font-size: 3.33333vw; } }
@media (min-width: 1920px) { .home-map__num { font-size: calc(1.26984vw + 39.61905px); } }
@media (min-width: 2550px) { .home-map__num { font-size: 72px; } }
@media (max-width: 1300px) {
  .home-map__counter:not(:last-child) { padding-right: 32px; margin-right: 32px; }
  .home-map__label { white-space: normal; }
}
@media (max-width: 990px) {
  .home-map { margin-top: 0; padding: 32px 0 0; }
  .home-map__inner { grid-template-columns: 1fr; width: auto; padding: 0 var(--unit); }
  .home-map__figure { grid-column: 1; grid-row: 1; width: min(54vw, 300px); margin: 0 auto; }
  .home-map__text { grid-column: 1; grid-row: 2; padding: 32px 0 0; }
  .home-map__title { font-size: 20px; }
  .home-map__counters { margin-bottom: 32px; }
  .home-map__counter:not(:last-child) { padding-right: 32px; margin-right: 32px; }
  .home-map__num { font-size: calc(3.05344vw + 24.54962px); }
  .home-map__label { font-size: var(--fs-12); }
  .home-map__btn { font-size: var(--fs-10); }
}
@media (max-width: 500px) {
  .home-map__counter:not(:last-child) { padding-right: 20px; margin-right: 20px; }
  .home-map__label { white-space: normal; }
}

/* ============================================================================
   7. CATEGORY TILES + SAMPLE SERVICE TICKET (02 §9)
   ============================================================================ */
.home-cats { padding: 160px 0 120px; overflow: hidden; }
.home-cats__list { display: flex; flex-wrap: wrap; margin: -56px 0 0 -56px; }
.home-cats__item { display: flex; width: calc(33.333% - 56px); margin: 56px 0 0 56px; }
.cat-tile {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--c-surface-150);
  color: var(--c-ink);
}
.home-cats__item--top .cat-tile::before { content: ""; display: block; padding-top: 53.33%; }
.home-cats__item--bottom .cat-tile { min-height: 320px; }
.cat-tile__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-4) var(--ease);
}
.cat-tile:hover .cat-tile__img { transform: scale(var(--img-hover-scale)); }
.cat-tile__label {
  position: absolute; right: 0; bottom: 0; z-index: 1;
  height: 64px;
  padding: 0 64px;
  background: var(--c-white);
  font-size: var(--fs-lead); font-weight: var(--fw-medium); line-height: 64px;
  white-space: nowrap;
}

.sample-card {
  position: relative;
  display: flex;
  width: 100%;
  background: var(--c-terracotta);
  color: var(--c-white);
}
.sample-card__inner {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  width: 100%;
  padding: 32px 64px 56px 20%;
  text-align: left;
}
/* Ticket notch (white half-circle) and perforation (white dots every 16px). */
.sample-card__inner::before {
  content: "";
  position: absolute; top: 50%; left: 0;
  width: 40px; height: 40px;
  border-radius: var(--r-round);
  background: var(--c-white);
  transform: translate(-50%, -50%);
}
.sample-card__inner::after {
  content: "";
  position: absolute; top: 0; left: 56px;
  width: 4px; height: 100%;
  background: radial-gradient(circle, var(--c-white) 2px, transparent 2.5px) 0 0 / 4px 16px repeat-y;
}
.sample-card__icon { flex-shrink: 0; width: auto; height: 92px; margin: 0 0 56px auto; color: var(--c-white); }
.sample-card__flutes { fill: var(--c-terracotta); }
.sample-card__title { display: block; margin-bottom: 16px; font-size: 30px; font-weight: var(--fw-medium); line-height: 1; }
.sample-card__text { display: block; font-size: var(--fs-16); line-height: 1.2; }
.sample-card:focus-visible { outline-offset: -6px; outline-color: var(--c-white); }

@media (prefers-reduced-motion: no-preference) {
  html.js [data-observe="cats"] .cat-tile,
  html.js [data-observe="cats"] .sample-card { opacity: 0; transition: opacity var(--dur-3) var(--ease) var(--delay, 0s); }
  html.js [data-observe="cats"].visible .cat-tile,
  html.js [data-observe="cats"].visible .sample-card { opacity: 1; }
}
@media (max-width: 1620px) {
  .sample-card__inner { padding: 32px 32px 32px max(20%, 88px); }
  .sample-card__icon { height: 72px; margin-bottom: 24px; }
}
@media (max-width: 990px) {
  .home-cats { padding: 120px 0 80px; }
  .home-cats__list { margin: -16px 0 0 -16px; }
  .home-cats__item { width: calc(50% - 16px); margin: 16px 0 0 16px; }
  .home-cats__item .cat-tile::before { content: ""; display: block; padding-top: 100%; }
  .home-cats__item--bottom .cat-tile { min-height: 0; }
  .cat-tile__label { height: 32px; min-width: 120px; padding: 0 24px; font-size: var(--fs-14); line-height: 32px; text-align: center; }
  .sample-card::before { content: ""; display: block; padding-top: 100%; }
  .sample-card__inner { position: absolute; inset: 0; padding: 24px var(--unit) 24px 30px; }
  .sample-card__inner::before { width: 24px; height: 24px; }
  .sample-card__inner::after { left: 20px; width: 2px; background-size: 2px 8px; background-image: radial-gradient(circle, var(--c-white) 1px, transparent 1.5px); }
  .sample-card__icon { height: 72px; margin: 0 0 40px auto; }
  .sample-card__title { margin: auto 0 0; font-size: 18px; }
  .sample-card__text { display: none; }
}
@media (max-width: 360px) {
  .sample-card__icon { height: 64px; margin-bottom: 24px; }
  .sample-card__title { font-size: 16px; }
}

/* ============================================================================
   8. SERVICES (02 §10)
   ============================================================================ */
.home-services { padding-bottom: 144px; overflow: hidden; }
.home-services__title { margin: 0 var(--unit) 48px; }
.home-services__list { padding-left: var(--unit); }
.home-services__swiper { overflow: visible; }
.home-services__slide { width: 240px; min-width: 240px; margin-right: 24px; }
.service { display: flex; flex-direction: column; align-items: center; text-align: center; }
.service__img {
  position: relative;
  display: block;
  width: 88%; max-width: 280px;
  margin-bottom: 32px;
  border-radius: var(--r-round);
  overflow: hidden;
  background: var(--c-surface-150);
}
.service__img::before { content: ""; display: block; padding-top: 100%; }
.service__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.service__title {
  display: flex; align-items: center; justify-content: center;
  min-height: 40px;
  margin-bottom: 16px;
  font-size: var(--fs-card-title); font-weight: var(--fw-bold); line-height: 1;
  letter-spacing: 0;
}
.service__title, .service__btn { transition: opacity var(--dur-1) var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  html.js [data-observe="services"] .service { opacity: 0; transition: opacity var(--dur-3) var(--ease) var(--delay, 0s); }
  html.js [data-observe="services"].visible .service { opacity: 1; }
}
@media (min-width: 1920px) {
  .home-services__list { padding-right: var(--unit); }
  .home-services__slide { width: calc(2 * var(--column-and-gutter-unit) - var(--gutter-unit)); min-width: 0; }
  .home-services__wrapper { justify-content: space-between; }
}
@media (max-width: 990px) {
  .home-services { padding-bottom: 64px; }
}
@media (max-width: 500px) {
  .home-services__title { margin: 0 24px 32px; text-align: center; }
  .home-services__list { padding-left: 0; }
  .home-services__slide { width: 66.133vw; min-width: 0; padding: 0 24px; }
  .home-services__slide .service__img { width: 200px; max-width: 100%; margin: 0 auto 32px; }
  .home-services__slide .service__title { font-size: 18px; }
  .home-services .home-services__list .home-services__slide:not(.swiper-slide-active) .service { opacity: .2; pointer-events: none; }
  .home-services__slide:not(.swiper-slide-active) .service__title,
  .home-services__slide:not(.swiper-slide-active) .service__btn { opacity: 0; }
}

/* ============================================================================
   9. ACCANTO TRADE (02 §11)
   ============================================================================ */
.home-trade { background: var(--c-black); color: var(--c-white); }
.home-trade__inner { display: flex; align-items: center; }
.home-trade__img { position: relative; width: 50%; height: 100vh; min-height: 560px; overflow: hidden; background: var(--c-ink); }
.home-trade__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-trade__text { width: 50%; padding: 0 var(--unit) 0 calc(var(--column-unit) + var(--gutter-unit)); }
.home-trade__title {
  display: flex; align-items: center; flex-wrap: wrap;
  margin-bottom: 24px;
  font-size: var(--fs-h3); font-weight: var(--fw-regular); line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--c-white);
}
.trade-wordmark { display: block; width: 3.4em; height: auto; margin-left: 8px; color: var(--c-white); }
.home-trade__p { margin-bottom: 40px; font-size: var(--fs-body); line-height: var(--lh-body); }
.home-trade__p + .home-trade__p { margin-top: -24px; }
.home-trade__buttons { display: flex; }
.home-trade__btn { --btn-fg: var(--c-white); font-size: var(--fs-btn); }
.home-trade__btn .btn__bg { border-color: transparent; }
.home-trade__btn--bordered { margin-right: 8px; border-radius: var(--r-md); }
.home-trade__btn--bordered .btn__bg { border-color: var(--c-white); border-radius: var(--r-md); }
.home-trade__btn:hover { color: var(--c-white); }
.home-trade__btn:hover .btn__bg { background: var(--c-ink); }
@media (max-width: 990px) {
  .home-trade__inner { display: block; }
  .home-trade__img { width: 100%; height: auto; min-height: 0; }
  .home-trade__img::before { content: ""; display: block; padding-top: 83.2%; }
  .home-trade__text { width: 100%; padding: 104px var(--unit) 120px; }
  .home-trade__title { margin-bottom: 16px; }
  .home-trade__btn { --btn-w: 164px; }
}
@media (max-width: 500px) {
  .home-trade__btn { --btn-w: 50%; padding: 0 16px; }
  .home-trade__btn--bordered { margin-right: 0; }
}

/* ============================================================================
   10. JOURNAL PANEL (02 §13)
   ============================================================================ */
@media (min-width: 991px) {
  .modal--news .modal__container { width: 675px; max-width: 100%; }
}
.news-panel { padding: 40px 0 32px 48px; }
.news-panel__heading { margin-bottom: 48px; font-size: var(--fs-lead); font-weight: var(--fw-bold); line-height: var(--lh-body); letter-spacing: 0; }
.news-panel__title { display: inline-flex; align-items: center; font: inherit; letter-spacing: inherit; color: var(--c-ink); }
.news-panel__back { display: none; width: 24px; height: 24px; margin-right: 8px; transform: rotate(90deg); }
.news-item { border-bottom: 1px solid var(--c-line); }
.news-item__link { display: flex; padding: 32px 32px 32px 0; color: var(--c-ink); }
.news-item__img {
  position: relative;
  flex: 0 0 250px;
  min-width: 250px;
  margin-right: 24px;
  overflow: hidden;
  background: var(--c-surface-150);
}
.news-item__img::before { content: ""; display: block; padding-top: 64%; }
.news-item__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-4) var(--ease); }
.news-item__link:hover .news-item__img img { transform: scale(var(--img-hover-scale)); }
.news-item__text { display: block; margin-bottom: 16px; font-size: 18px; line-height: 1.2; }
.news-item__date { display: inline-flex; align-items: center; font-size: var(--fs-14); line-height: 1; }
.news-item__date::before { content: ""; width: 6px; height: 6px; margin-right: 8px; border-radius: var(--r-round); background: var(--c-ink-20); }
.news-panel__footer { padding: 40px 48px 0 0; }
.news-panel__empty { padding-right: 48px; }
.news-panel__empty p { max-width: 30em; margin-bottom: 32px; font-size: var(--fs-body); line-height: var(--lh-body); }
@media (max-width: 990px) {
  .news-panel__back { display: block; }
}
@media (max-width: 500px) {
  .news-panel { padding: 32px 0 32px 24px; }
  .news-item__link { padding: 16px 16px 16px 0; }
  .news-item__img { flex-basis: 32%; min-width: 0; margin-right: 16px; }
  .news-item__img::before { padding-top: 100%; }
  .news-item__text { margin-bottom: 8px; font-size: var(--fs-16); }
  .news-panel__footer { padding-right: 24px; }
  .news-panel__footer .btn, .news-panel__empty .btn { width: calc(100% - 24px); }
  .news-panel__empty { padding-right: 24px; }
}

/* ============================================================================
   11. NEWSLETTER PANEL (02 §12)
   ============================================================================ */
.newsletter-panel {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 100%;
  padding: 100px clamp(24px, calc(10.2128vw - 27.06px), 120px) 80px;
  border-top: 8px solid var(--c-sage);
}
.newsletter-form--panel .newsletter-form__title {
  margin-bottom: 64px; padding: 0;
  font-size: var(--fs-lead); font-weight: var(--fw-bold); line-height: 1.6;
  letter-spacing: 0; text-transform: none; text-align: center;
}
.newsletter-form--panel .input { margin-bottom: 32px; }
.newsletter-form--panel .newsletter-form__btn { width: 100%; }
.newsletter-panel__text { margin-top: 32px; font-size: var(--fs-14); line-height: var(--lh-copy-sm); color: var(--c-text-muted); }
.newsletter-panel__consent { margin-top: 16px; }

/* ============================================================================
   12. STORIES VIEWER (02 §3.4)
   ============================================================================ */
.modal--stories .modal__overlay { background: var(--overlay-modal); }
.modal--stories .modal__container {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-expo);
}
.modal--stories.modal--active .modal__container { opacity: 1; }
.stories { --story-w: max(320px, calc(3 * var(--column-unit) + 3 * var(--gutter-unit))); }
.stories__swiper { width: 100%; overflow: visible; }
.stories__story { width: var(--story-w); cursor: pointer; }
.stories__story.swiper-slide-active { cursor: default; }
.stories__inner {
  position: relative;
  transform: scale(.85);
  transition: transform var(--dur-2) var(--ease-expo);
}
.swiper-slide-active .stories__inner { transform: none; }
.stories__info {
  display: flex; align-items: center;
  height: 48px;
  margin-bottom: 16px;
  color: var(--c-white);
  line-height: 1.2;
}
.stories__avatar {
  flex-shrink: 0;
  width: 48px; height: 48px;
  margin-right: 8px;
  border-radius: var(--r-round);
  overflow: hidden;
  background: var(--c-story-ph);
}
.stories__avatar img { width: 100%; height: 100%; object-fit: cover; }
.stories__avatar.stories__avatar--accent { font-size: 8px; background: var(--c-accent-red); }
.stories__name { font-size: var(--fs-16); }
.stories__media { position: relative; padding-top: 177.77%; overflow: hidden; background: var(--c-story-ph); }
.stories__frames { position: absolute; inset: 0; }
.stories__frame { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.stories__frame.is-active { opacity: 1; }
.stories__img, .stories__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.stories__img:not([src]) { visibility: hidden; }
.stories__link {
  position: absolute; left: 50%; bottom: 24px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--pill-h);
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--glass-white-80);
  color: var(--c-ink);
  font-size: var(--fs-14); font-weight: var(--fw-medium); line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: background-color var(--dur-1) var(--ease), opacity var(--dur-2) var(--ease-expo);
}
.stories__link:hover { background: var(--c-white); }
.stories__progress { display: flex; gap: 4px; padding-top: 16px; }
.stories__bar { position: relative; flex: 1; height: 3px; overflow: hidden; background: var(--glass-white-20); }
.stories__bar.is-done { background: var(--glass-white-80); }
.stories__bar span { position: absolute; inset: 0; background: var(--glass-white-80); transform: scaleX(0); transform-origin: 0 50%; }
.stories__bar.is-current span { animation: adt-story-bar var(--frame-ms, 15000ms) linear forwards; }
.stories.is-paused .stories__bar.is-current span,
.stories.is-static .stories__bar.is-current span { animation-play-state: paused; }
.stories.is-static .stories__bar.is-current span { animation: none; transform: scaleX(1); }
@keyframes adt-story-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.stories__arrow {
  position: absolute; top: 50%; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  color: var(--c-white);
  transform: translateY(-50%);
}
.stories__arrow .icon { opacity: .4; transition: opacity var(--dur-1) var(--ease); }
.stories__arrow:hover .icon, .stories__arrow:focus-visible .icon { opacity: 1; }
.stories__arrow:focus-visible { outline-color: var(--c-white); }
.stories__arrow--prev { left: -40px; }
.stories__arrow--prev .icon { transform: rotate(180deg); }
.stories__arrow--next { right: -40px; }
.stories__story:not(.swiper-slide-active) :is(.stories__info, .stories__progress, .stories__arrow, .stories__link) {
  opacity: 0;
  pointer-events: none;
}
.stories__info, .stories__progress { transition: opacity var(--dur-2) var(--ease-expo); }
.stories__close {
  position: absolute; top: 48px; right: 64px; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  color: var(--c-white);
  opacity: .4;
  transition: opacity var(--dur-1) var(--ease);
}
.stories__close:hover, .stories__close:focus-visible { opacity: 1; outline-color: var(--c-white); }

@media (max-width: 500px) {
  .stories { --story-w: 100vw; }
  .stories__story { height: 100vh; height: 100dvh; }
  .stories__inner { height: 100%; transform: none; }
  .stories__inner::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; z-index: 2;
    height: 0;
    box-shadow: 0 0 60px 50px rgba(0, 0, 0, .5);
    pointer-events: none;
  }
  .stories__media { position: absolute; inset: 0; padding-top: 0; }
  .stories__progress { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 3; gap: 2px; padding: 0; }
  .stories__bar { background: var(--glass-white-20); }
  .stories__bar:not(.is-done) { background: rgba(255, 255, 255, .4); }
  .stories__info { position: absolute; top: 24px; left: 8px; z-index: 3; height: 40px; margin: 0; }
  .stories__avatar { width: 40px; height: 40px; }
  .stories__name { font-size: var(--fs-14); }
  .stories__close { top: 24px; right: 8px; opacity: 1; }
  .stories__arrow {
    top: auto; bottom: 0;
    width: 50%; height: calc(100% - 64px);
    transform: none;
  }
  .stories__arrow--prev { left: 0; }
  .stories__arrow--next { right: 0; }
  .stories__arrow .icon { display: none; }
  .stories__link { bottom: 40px; }
}