/* =============================================================
   Pocargil Group — global stylesheet
   Components, in order:
     1. Reset / base
     2. Typography
     3. Layout helpers
     4. Utilities
     5. Site header + primary nav (desktop)
     6. Mobile nav toggle + full-screen overlay
     7. Dark contact section (shared)
     8. Site footer (shared)
     9. Photography filter class
   Page components (added per phase):
    10. Hero — full-bleed image + headline (Home, Delivery)
    11. Client logo strip (Home)
    12. Stats bar (Home)
    13. Three differentiators (Home)
    14. Scale statement (Home)
    15. ESG line (Home)
    16. Section header pattern (shared)
    17. Steps (Delivery)
    18. Geography map — Component C (Delivery)
    19. Hero — typographic modifier (Group)
    20. Heritage (Group)
    21. Group structure — Component A (Group)
    22. Morocco network (Group)
    23. Origin (Group)
    24. Vertical integration (Delivery)
    25. Contact page — peak-end (Contact, Phase 6)
    99. Reduced motion
   Inside each component: layout → box → type → colour → state.
   ============================================================= */


/* 1. Reset / base ----------------------------------------------- */

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

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

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


/* 2. Typography ------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--type-h1); }
h2 { font-size: var(--type-h2); }
h3 { font-size: var(--type-h3); }

p {
  max-width: var(--content-max);
}

a:hover,
a:focus-visible {
  color: var(--color-accent);
}


/* 3. Layout helpers --------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

@media (max-width: 767px) {
  .container {
    padding-inline: var(--space-sm);
  }
}


/* 4. Utilities -------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-sm);
  z-index: 200;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-text);
  color: var(--color-text-dark);
  font-size: var(--type-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: top var(--transition-default);
}

.skip-link:focus {
  top: var(--space-sm);
}


/* 5. Site header + primary nav (desktop) ------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-accent-light);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-xs) var(--space-md);
}

.site-header__logo {
  display: flex;
  align-items: center;
  height: 22px;
  color: var(--color-text);
  transition: color var(--transition-default);
}

.site-header__logo svg,
.site-header__logo img {
  height: 100%;
  width: auto;
}

.site-header__logo:hover,
.site-header__logo:focus-visible {
  color: var(--color-accent);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.site-nav__link {
  display: inline-block;
  padding-block: var(--space-xs);
  font-size: var(--type-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text);
  border-bottom: 1px solid transparent;
  transition: color var(--transition-default), border-color var(--transition-default);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}


/* 6. Mobile nav toggle + full-screen overlay -------------------- */

.nav-toggle {
  display: none;
  width: 32px;
  height: 28px;
  padding: 0;
  position: relative;
}

.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-text);
  margin: 7px 0;
  transition: transform var(--transition-default), opacity var(--transition-default);
}

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding: var(--space-md) var(--space-sm);
  background: var(--color-bg);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--transition-default), visibility var(--transition-default);
}

.nav-overlay[aria-hidden="false"] {
  visibility: visible;
  opacity: 1;
}

.nav-overlay__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-overlay__logo {
  display: flex;
  align-items: center;
  height: 24px;
  color: var(--color-text);
}

.nav-overlay__logo svg,
.nav-overlay__logo img {
  height: 100%;
  width: auto;
}

.nav-overlay__close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-size: 2rem;
  line-height: 1;
  color: var(--color-text);
  transition: color var(--transition-default);
}

.nav-overlay__close:hover,
.nav-overlay__close:focus-visible {
  color: var(--color-accent);
}

.nav-overlay__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}

.nav-overlay__link {
  display: inline-block;
  padding-block: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--type-h2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text);
  transition: color var(--transition-default);
}

.nav-overlay__link:hover,
.nav-overlay__link:focus-visible {
  color: var(--color-accent);
}

@media (max-width: 767px) {
  .site-nav { display: none; }
  .nav-toggle { display: block; }
}

@media (min-width: 768px) {
  .nav-overlay { display: none; }
}


/* 7. Dark contact section --------------------------------------- */

.contact-section {
  padding-block: var(--space-xl);
  background: var(--color-bg-dark);
  color: var(--color-text-dark);
  text-align: center;
}

.contact-section__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.contact-section__title {
  margin-bottom: var(--space-md);
  font-size: var(--type-display);
  color: var(--color-text-dark);
}

.contact-section__email {
  display: inline-block;
  padding-block: var(--space-xs);
  font-size: var(--type-h3);
  color: var(--color-accent-dark);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-default);
}

.contact-section__email:hover,
.contact-section__email:focus-visible {
  color: var(--color-accent-dark);
  border-bottom-color: var(--color-accent-dark);
}

/* Colophon variant — used on the home page only. Drops the
   "Let's talk." imperative and lets the email itself be the
   action. HQ line below grounds it as a magazine sign-off
   instead of a CTA. */
.contact-section--colophon .contact-section__email {
  font-size: var(--type-h2);
  letter-spacing: var(--tracking-tight);
}

.contact-section--colophon .contact-section__meta {
  margin-top: var(--space-sm);
  font-size: var(--type-small);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-muted);
}


/* 8. Site footer ------------------------------------------------ */
/* Three-column institutional layout: Brand · Contact · Pages.
   Premium peers in this tier surface trust signals (full address,
   legal IDs, year established, LinkedIn) here, not just utility
   links. Bottom strip carries the legal entity + NIPC + EU VAT;
   compliance lockups sit beneath. */

.site-footer {
  padding-block: var(--space-xl);
  background: var(--color-bg);
  color: var(--color-text);
  border-top: 1px solid var(--color-accent-light);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-xl) var(--space-lg);
  align-items: start;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.site-footer__col {
  display: flex;
  flex-direction: column;
}

.site-footer__logo {
  display: inline-flex;
  align-items: center;
  height: 22px;
  color: var(--color-text);
}

.site-footer__logo svg,
.site-footer__logo img {
  height: 100%;
  width: auto;
}

.site-footer__tagline {
  margin: var(--space-md) 0 0;
  max-width: 22ch;
  font-size: var(--type-small);
  line-height: var(--leading-normal);
  color: var(--color-muted);
}

.site-footer__since {
  margin: var(--space-sm) 0 0;
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
}

.site-footer__col-title {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-muted);
}

.site-footer__list,
.site-footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__address {
  margin-top: var(--space-md);
  font-size: var(--type-small);
  font-style: normal;
  line-height: var(--leading-normal);
  color: var(--color-text);
}

.site-footer__email,
.site-footer__phone {
  font-size: var(--type-small);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text);
  border-bottom: 1px solid transparent;
  transition: color var(--transition-default), border-color var(--transition-default);
}

.site-footer__email:hover,
.site-footer__email:focus-visible,
.site-footer__phone:hover,
.site-footer__phone:focus-visible {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.site-footer__link {
  font-size: var(--type-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text);
  transition: color var(--transition-default);
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  color: var(--color-accent);
}

.site-footer__bottom {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  margin-top: var(--space-lg);
  padding-inline: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-accent-light);
}

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs) var(--space-sm);
  margin: 0;
  font-size: var(--type-small);
  color: var(--color-muted);
  text-align: center;
}

.site-footer__meta-sep {
  color: var(--color-accent);
}

/* EU / regional funding compliance lockups (Portuguese SME mandate). */
.site-footer__compliance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  margin-top: var(--space-md);
  padding: var(--space-md);
  border-top: 1px solid var(--color-accent-light);
}

.site-footer__compliance-logo {
  display: block;
  height: 44px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 767px) {
  .site-footer { padding-block: var(--space-lg); }

  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    padding-inline: var(--space-sm);
  }

  .site-footer__bottom { padding-inline: var(--space-sm); }

  .site-footer__compliance {
    gap: var(--space-md);
    padding: var(--space-md) var(--space-sm);
  }

  .site-footer__compliance-logo { height: 36px; }
}


/* 9. Photography filter (BRIEF.md §13) -------------------------- */

.photo--treated {
  filter: var(--photo-filter);
}


/* =============================================================
   PAGE COMPONENTS
   ============================================================= */


/* 10. Hero — full-bleed image + headline (Home + Delivery) ------ */
/* Base: image at top, copy below on white. Used by Delivery.
   Use .hero--overlay (Home) to overlay copy on the image with a scrim.
   Use .hero--typographic (Group) for a no-image typographic hero. */

.hero {
  position: relative;
  background: var(--color-bg);
}

.hero__media {
  width: 100%;
  height: clamp(360px, 65vh, 720px);
  overflow: hidden;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__copy {
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
  padding: var(--space-xl) var(--space-md);
}

.hero__title {
  max-width: 18ch;
  font-size: var(--type-display);
  letter-spacing: var(--tracking-tight);
}

.hero__subtitle {
  margin-top: var(--space-md);
  max-width: 40ch;
  font-family: var(--font-body);
  font-size: var(--type-h3);
  font-weight: 400;
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .hero__media { height: clamp(260px, 50vh, 440px); }
  .hero__copy  { padding-block: var(--space-lg); }
}


/* 10b. Hero — split modifier (Home) ----------------------------- */
/* Two-column composition: copy left on white, photo right at full
   bleed. Title in dark display serif. Replaces the overlay variant
   on the homepage; overlay rules below remain available for reuse. */

.hero--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--color-bg);
}

.hero--split .hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: none;
  /* Match the container's left edge so the headline aligns with
     the header logo above. On viewports < --container-max the
     value resolves to var(--space-md); above, it tracks the
     centred container's offset. */
  padding-left: max(var(--space-md), calc((100vw - var(--container-max)) / 2 + var(--space-md)));
  padding-right: var(--space-lg);
  padding-block: var(--space-lg);
}

.hero--split .hero__title {
  max-width: 14ch;
  font-size: var(--type-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.hero--split .hero__subtitle {
  margin-top: var(--space-md);
  max-width: 32ch;
  font-family: var(--font-body);
  font-size: var(--type-h3);
  font-weight: 400;
  color: var(--color-muted);
}

.hero--split .hero__media {
  height: clamp(380px, 60vh, 640px);
  overflow: hidden;
}

.hero--split .hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .hero--split { grid-template-columns: 1fr; }

  .hero--split .hero__copy {
    padding: var(--space-lg) var(--space-md);
  }

  .hero--split .hero__media {
    height: clamp(360px, 60vh, 520px);
  }
}


/* 10c. Hero — overlay modifier (legacy) ------------------------- */
/* Copy sits over the bottom of the image with a dark scrim. Title
   scales down to --type-h1 because overlaid type reads heavier than
   on white. Container width matches --container-max so the headline
   aligns with the header logo and sections below. */

.hero--overlay .hero__media {
  position: relative;
  height: clamp(440px, 70vh, 760px);
}

.hero--overlay .hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(13, 13, 13, 0.55) 0%,
    rgba(13, 13, 13, 0.32) 35%,
    rgba(13, 13, 13, 0.08) 70%,
    rgba(13, 13, 13, 0) 90%
  );
  pointer-events: none;
}

.hero--overlay .hero__copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: var(--container-max);
  padding: var(--space-lg) var(--space-md);
  color: var(--color-text-dark);
}

.hero--overlay .hero__title {
  max-width: 16ch;
  font-size: var(--type-h1);
  line-height: var(--leading-tight);
  color: var(--color-text-dark);
}

.hero--overlay .hero__subtitle {
  margin-top: var(--space-sm);
  max-width: 38ch;
  font-size: var(--type-body);
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent-light);
}

@media (max-width: 767px) {
  .hero--overlay .hero__media { height: clamp(360px, 60vh, 520px); }
  .hero--overlay .hero__copy  { padding: var(--space-md) var(--space-sm); }
}


/* 11. Client logo strip — Home (BRIEF.md §6) -------------------- */
/* No section title, no label. Halo effect: nothing between hero
   and logos. Static, never carousel. Identical optical height. */

.client-logos {
  padding-block: var(--space-xl);
  background: var(--color-bg);
}

.client-logos__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: var(--space-lg) var(--space-md);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.client-logos__item {
  display: flex;
  justify-content: center;
}

.client-logo {
  display: block;
  width: auto;
  max-width: 160px;
  height: var(--base-h, 28px);
  object-fit: contain;
  color: var(--color-text);
}

/* Optical height normalisation — wordmarks read at the same x-height even
   though their cap heights differ. Tuned per file; not perfect until real
   client-supplied SVG assets land (BRIEF.md §16). Stored as --base-h so
   the pinned takeover (below) can scale each logo while preserving the
   per-mark optical ratios. */
.client-logo--inditex   { --base-h: 22px; }
.client-logo--mango     { --base-h: 26px; }
.client-logo--next      { --base-h: 28px; }
.client-logo--costco    { --base-h: 28px; }
.client-logo--puma      { --base-h: 40px; } /* combined cat + wordmark, square ratio */
.client-logo--joma      { --base-h: 26px; }
.client-logo--ted-baker { --base-h: 36px; } /* two-line lockup */
.client-logo--desigual  { --base-h: 26px; }

/* Secondary brands — only rendered during the pinned takeover.
   Hidden in the resting/landing state via the list-level rule below. */
.client-logos__list--secondary { display: none; }

@media (max-width: 767px) {
  .client-logos { padding-block: var(--space-lg); }
  .client-logos__list--primary { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
  .client-logo--inditex   { --base-h: 18px; }
  .client-logo--mango     { --base-h: 22px; }
  .client-logo--next      { --base-h: 24px; }
  .client-logo--costco    { --base-h: 24px; }
  .client-logo--puma      { --base-h: 32px; }
  .client-logo--joma      { --base-h: 22px; }
  .client-logo--ted-baker { --base-h: 30px; }
  .client-logo--desigual  { --base-h: 22px; }
}

/* Pinned takeover — scrolly choreography (opt-in via JS). The primary
   strip sits at the top of the stage, in the same compact form the
   visitor lands on; the secondary 20 fade in below to fill the rest of
   the viewport, then fade back out so the visitor exits on the same 8.
   Only --secondary-opacity is animated; primary doesn't scale. */

.client-logos.has-pin {
  padding-block: 0;
}

.client-logos.has-pin .client-logos__scroller {
  position: relative;
  height: 280vh;
}

.client-logos.has-pin .client-logos__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  row-gap: var(--space-lg);
  padding: var(--space-xl) var(--space-md) var(--space-lg);
  overflow: hidden;
  box-sizing: border-box;
}

/* Primary in pin — exact same compact 4-col strip as the resting state.
   No scaling, no width override; it should read identically to the strip
   the visitor saw immediately after the hero on every previous build. */
.client-logos.has-pin .client-logos__list--primary {
  align-self: start;
}

/* Secondary in pin — 5-col grid of 20 marks. To make the spacing read
   evenly, every mark gets a uniform width × height box and the image
   itself is contained inside it via object-fit. PNG canvas variance
   stops affecting cell width, so the gaps between logos are equal. */
.client-logos.has-pin .client-logos__list--secondary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-items: center;
  align-content: space-evenly;
  width: 100%;
  max-width: min(1200px, 92vw);
  margin-inline: auto;
  padding-inline: 0;
  gap: 3vh 2vw;
  opacity: var(--secondary-opacity, 0);
  will-change: opacity;
}

.client-logos.has-pin .client-logos__list--secondary .client-logo {
  width: clamp(80px, 11vw, 160px);
  height: clamp(28px, 4.2vh, 48px);
  max-width: none;
  object-fit: contain;
  object-position: center;
}

/* Mobile pin — same structure, tighter padding, smaller boxes. */
@media (max-width: 767px) {
  .client-logos.has-pin .client-logos__scroller { height: 240vh; }
  .client-logos.has-pin .client-logos__stage {
    padding: var(--space-lg) var(--space-sm) var(--space-md);
    row-gap: var(--space-md);
  }
  .client-logos.has-pin .client-logos__list--secondary {
    grid-template-columns: repeat(4, 1fr);
    gap: 2vh 3vw;
    max-width: 100%;
  }
  .client-logos.has-pin .client-logos__list--secondary .client-logo {
    width: clamp(60px, 18vw, 90px);
    height: clamp(22px, 3.6vh, 32px);
  }
}


/* 12. Stats bar — Home (BRIEF.md §6) ---------------------------- */
/* Full-width strip on accent-light. Numbers only, no body copy. */

.stats-bar {
  padding-block: var(--space-lg);
  background: var(--color-accent-light);
  color: var(--color-text);
}

.stats-bar__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
  text-align: center;
}

.stats-bar__number {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.stats-bar__label {
  margin-top: var(--space-xs);
  font-size: var(--type-small);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .stats-bar__list { grid-template-columns: 1fr; gap: var(--space-md); }
}


/* 13. Three differentiators — Home ------------------------------ */

.differentiators {
  padding-block: var(--space-xl);
  background: var(--color-bg);
}

.differentiators__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.differentiator__number {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw + 1rem, 3.5rem);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

.differentiator__title {
  margin-bottom: var(--space-sm);
  font-size: var(--type-h3);
}

.differentiator__body {
  font-size: var(--type-body);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

@media (max-width: 767px) {
  .differentiators { padding-block: var(--space-lg); }
  .differentiators__list { grid-template-columns: 1fr; gap: var(--space-md); }
}


/* 14. Asia contrast — Home -------------------------------------- */
/* The differentiator IS a contrast: going direct vs going through
   us. Stacked vertically with deliberate whitespace — the reader
   physically scrolls past the problem ("Going direct", strikethrough)
   to reach the answer ("With us", which fades in on scroll). Sits
   on the cream accent-light tint as an editorial "page break"
   moment between the white sections above and below. No SaaS
   chrome — no boxes, no checks/crosses. */

.asia-contrast {
  padding-block: var(--space-2xl);
  background: var(--color-accent-light);
}

.asia-contrast__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.asia-contrast__heading {
  max-width: 18ch;
  margin: 0 0 var(--space-lg);
  font-family: var(--font-display);
  font-size: var(--type-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

/* Stacked vertical layout: "Going direct" sits above "With us"
   with deliberate whitespace between. The user physically scrolls
   past the problem to reach the answer — the page does the
   staging, no clever JS required. */
.asia-contrast__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  position: relative;
}

.asia-contrast__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 520px;
}

/* Short gold rule centered in the gap above the "With us" block —
   editorial cue marking the turn from problem to answer. */
.asia-contrast__col--for {
  position: relative;
}

.asia-contrast__col--for::before {
  content: "";
  position: absolute;
  top: calc(var(--space-2xl) * -0.5);
  left: 0;
  width: 64px;
  height: 1px;
  background: var(--color-accent);
}

.asia-contrast__label {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.asia-contrast__col--against .asia-contrast__label {
  color: var(--color-muted);
}

.asia-contrast__col--for .asia-contrast__label {
  color: var(--color-accent);
}

/* Strikethrough on the "Going direct" headlines — editorial cue for
   "wrong path" without leaving the locked palette. Thin muted line
   so it reads as crossed-out, not decorative. Sub-text stays plain
   so the consequence still reads as evidence. */
.asia-contrast__col--against .asia-contrast__line {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-muted);
  text-decoration-skip-ink: none;
}

/* ---- Pin mode (desktop, motion-OK) -----------------------------
   JS adds .has-pin to the section, which converts the stacked
   layout back into a side-by-side spread, then pins the stage
   for ~100vh of scroll. As scroll progress crosses the threshold,
   .is-revealed lands on the "With us" column and it slides in.
   No-JS / reduced-motion / mobile users never get .has-pin —
   they see the stacked layout above and skip the choreography. */

.asia-contrast.has-pin {
  padding-block: 0;
}

.asia-contrast.has-pin .asia-contrast__scroller {
  height: 280vh;
  position: relative;
}

.asia-contrast.has-pin .asia-contrast__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
}

/* Override the stacked grid back to side-by-side inside the pin */
.asia-contrast.has-pin .asia-contrast__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.asia-contrast.has-pin .asia-contrast__col {
  max-width: none;
}

/* Repurpose the gold rule: vertical between columns (instead of
   horizontal between stacked rows). Fades in alongside "With us". */
.asia-contrast.has-pin .asia-contrast__col--for::before {
  top: 0;
  left: calc(var(--space-xl) * -0.5);
  width: 1px;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease-out 0.1s;
}

.asia-contrast.has-pin .asia-contrast__col--for.is-revealed::before {
  opacity: 0.6;
}

/* The "With us" reveal itself: slide in from the right, fade up. */
.asia-contrast.has-pin .asia-contrast__col--for {
  opacity: 0;
  transform: translateX(48px);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

.asia-contrast.has-pin .asia-contrast__col--for.is-revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Scroll-driven strikethrough on "Going direct" headlines. The
   native text-decoration is suppressed inside the pin and replaced
   by a pseudo-element rule whose width is bound to --strike-progress
   (set by JS, 0..1). The user's scroll literally draws the line
   across the wrong path before the right one arrives. */
.asia-contrast.has-pin .asia-contrast__col--against .asia-contrast__line {
  position: relative;
  text-decoration: none;
  /* Shrink-wrap the block to its text so the absolutely-positioned
     ::after line measures its 100% against text width, not column width. */
  width: max-content;
  max-width: 100%;
}

.asia-contrast.has-pin .asia-contrast__col--against .asia-contrast__line::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: calc(100% * var(--strike-progress, 0));
  height: 1px;
  background: var(--color-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.asia-contrast__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.asia-contrast__item {
  display: block;
}

.asia-contrast__line {
  display: block;
  font-family: var(--font-display);
  font-size: var(--type-h3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.asia-contrast__sub {
  display: block;
  margin-top: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--leading-normal);
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .asia-contrast { padding-block: var(--space-lg); }
  .asia-contrast__heading { margin-bottom: var(--space-md); }
  .asia-contrast__grid { gap: var(--space-xl); }
  .asia-contrast__col { max-width: none; }
  .asia-contrast__col--for::before {
    top: calc(var(--space-xl) * -0.5);
  }
}


/* 15. Certification strip — Home (replaces .esg-line) ----------- */
/* Halo treatment, same lineage as .client-logos: no eyebrow, no
   preamble, just the proof. Format-agnostic per BRIEF.md §15 —
   object-fit: contain + fixed max-height normalises optical weight
   across SVG / PNG / JPG so the row reads even. ESG page remains
   one click away in the primary nav. */

.cert-strip {
  padding-block: var(--space-xl);
  background: var(--color-bg);
  border-top: 1px solid var(--color-accent-light);
  border-bottom: 1px solid var(--color-accent-light);
}

.cert-strip__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-md) var(--space-xl);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
  list-style: none;
}

.cert-strip__item {
  display: flex;
  justify-content: center;
}

.cert-strip__badge {
  display: block;
  width: auto;
  height: auto;
  max-height: 64px;
  max-width: 120px;
  object-fit: contain;
}

@media (max-width: 767px) {
  .cert-strip { padding-block: var(--space-lg); }
  .cert-strip__list { gap: var(--space-sm) var(--space-lg); }
  .cert-strip__badge { max-height: 48px; max-width: 96px; }
}


/* 16. Section header (shared across pages) ---------------------- */

.section-header {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  margin-bottom: var(--space-lg);
  padding-inline: var(--space-md);
}

.section-header__eyebrow {
  margin-bottom: var(--space-sm);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-muted);
}

.section-header__title {
  font-family: var(--font-display);
  font-size: var(--type-h1);
  letter-spacing: var(--tracking-tight);
}

.section-header__lead {
  margin-top: var(--space-md);
  max-width: var(--content-max);
  font-family: var(--font-body);
  font-size: var(--type-h3);
  font-weight: 400;
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .section-header { margin-bottom: var(--space-md); }
}


/* 17. Capabilities (was Component C geography map) ---------------- */
/* Editorial table-like layout: thumbnail | name | description | regions.
   Replaces the SVG world map per client revision — capabilities-first
   angle reads stronger for buyers than geography-first. White surface,
   photo-treated thumbnails standing in for ordinal numbers, gold-accent
   arrows, hairline dividers. */

.capabilities {
  padding-block: var(--space-xl);
  background: var(--color-bg);
  color: var(--color-text);
}

.capabilities__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.capabilities__header {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.capabilities__eyebrow {
  font-size: var(--type-small);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-muted);
}

.capabilities__title {
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: var(--type-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.capabilities__lead {
  margin-top: var(--space-md);
  max-width: 36ch;
  font-size: var(--type-small);
  line-height: var(--leading-normal);
  color: var(--color-muted);
}

@media (min-width: 900px) {
  .capabilities__header {
    grid-template-columns: 2fr 1fr;
    column-gap: var(--space-lg);
    align-items: end;
  }

  .capabilities__eyebrow {
    grid-column: 1 / -1;
    margin-bottom: var(--space-md);
  }

  .capabilities__title  { grid-column: 1; }

  .capabilities__lead {
    grid-column: 2;
    margin-top: 0;
    margin-bottom: 0.4em;
  }
}

.capabilities__list {
  border-top: 1px solid rgba(13, 13, 13, 0.12);
}

.capability {
  display: grid;
  grid-template-columns: 64px 1fr;
  column-gap: var(--space-md);
  row-gap: var(--space-xs);
  padding-block: var(--space-md);
  border-bottom: 1px solid rgba(13, 13, 13, 0.12);
}

.capability__thumb {
  grid-row: 1 / -1;
  grid-column: 1;
  align-self: stretch;
  /* Negative margin cancels the row's vertical padding so the image
     reaches the row's outer edges. Adjacent rows' thumbnails then sit
     flush with only the 1px hairline between them. */
  margin-block: calc(var(--space-md) * -1);
  width: 64px;
  height: 100%;
  object-fit: cover;
  display: block;
}

.capability__name {
  grid-row: 1;
  grid-column: 2;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.capability__description {
  grid-row: 2;
  grid-column: 2;
  max-width: 50ch;
  font-size: var(--type-small);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

.capability__regions {
  grid-row: 3;
  grid-column: 2;
  font-size: var(--type-small);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-muted);
}

.capability__arrow {
  margin-left: var(--space-xs);
  color: var(--color-accent);
}

@media (min-width: 900px) {
  .capability {
    grid-template-columns: 96px minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(160px, auto);
    column-gap: var(--space-lg);
    align-items: baseline;
    padding-block: var(--space-lg);
  }

  .capability__thumb       { width: 96px; margin-block: calc(var(--space-lg) * -1); }
  .capability__name        { grid-row: 1; grid-column: 2; }
  .capability__description { grid-row: 1; grid-column: 3; max-width: 44ch; }
  .capability__regions     { grid-row: 1; grid-column: 4; padding-top: 0.6em; text-align: right; }
}


/* 19. Hero — typographic-only modifier (Group) ------------------ */

.hero--typographic {
  padding-block: var(--space-2xl) var(--space-xl);
  background: var(--color-bg);
}

.hero--typographic .hero__copy {
  padding-block: 0;
}

.hero--typographic .hero__title {
  max-width: 22ch;
}

.hero--typographic .hero__subtitle {
  max-width: 50ch;
}

@media (max-width: 767px) {
  .hero--typographic { padding-block: var(--space-xl) var(--space-lg); }
}


/* 20. Heritage — Group ------------------------------------------ */

.heritage {
  padding-block: var(--space-xl);
  background: var(--color-bg);
  border-top: 1px solid var(--color-accent-light);
}

.heritage__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.heritage__copy p { max-width: 52ch; }
.heritage__copy p + p { margin-top: var(--space-md); }

.heritage__pull {
  display: block;
  margin-top: var(--space-md);
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--type-h3);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

.heritage__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.heritage__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .heritage { padding-block: var(--space-lg); }
  .heritage__inner { grid-template-columns: 1fr; gap: var(--space-md); }
  .heritage__media { aspect-ratio: 16 / 10; }
}


/* 21. Group structure — Component A (Group) --------------------- */
/* Horizontal organisational layout: parent left, tree connector
   centre, three entity rows right. Typographic on white per
   BRIEF.md §15 — surface fills removed on client request after the
   accent-light treatment read as visually heavy. Hierarchy per
   card: capacity number is the dominant gold-accent element;
   region, entity, lead-time read in supporting weight. */

.group-structure {
  padding-block: var(--space-xl);
  background: var(--color-bg);
  border-top: 1px solid var(--color-accent-light);
}

.group-structure__layout {
  display: grid;
  grid-template-columns: 1fr 80px 1.4fr;
  align-items: stretch;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.group-structure__parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: var(--space-md);
}

.group-structure__parent-name {
  font-family: var(--font-display);
  font-size: var(--type-h2);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.group-structure__parent-meta {
  margin-top: var(--space-xs);
  font-size: var(--type-small);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-muted);
}

.group-structure__capabilities {
  margin-top: var(--space-md);
  font-size: var(--type-body);
  color: var(--color-text);
}

.group-structure__capabilities li + li {
  margin-top: var(--space-xs);
}

.group-structure__tree {
  display: flex;
  align-self: stretch;
  color: var(--color-accent);
}

.group-structure__tree svg {
  width: 100%;
  height: 100%;
}

.group-structure__entities {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
}

.entity {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-md);
}

.entity + .entity {
  border-top: 1px solid var(--color-accent-light);
}

.entity__region {
  margin-bottom: var(--space-xs);
  font-size: var(--type-small);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-muted);
}

.entity__name {
  font-family: var(--font-display);
  font-size: var(--type-h3);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.entity__sub-region {
  margin-top: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--type-small);
  font-style: italic;
  color: var(--color-muted);
}

.entity__capacity {
  margin-top: var(--space-sm);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 3vw + 1rem, 3.5rem);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-accent);
}

.entity__capacity span {
  display: inline-block;
  margin-left: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--type-small);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  color: var(--color-muted);
  vertical-align: middle;
}

.entity__lead-time {
  margin-top: var(--space-xs);
  font-size: var(--type-small);
  letter-spacing: var(--tracking-wide);
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .group-structure { padding-block: var(--space-lg); }

  .group-structure__layout {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    padding-inline: var(--space-sm);
  }

  .group-structure__parent { padding-right: 0; }
  .group-structure__tree { display: none; }

  .group-structure__entities {
    grid-template-rows: none;
  }

  .entity {
    padding: var(--space-md) 0;
  }

  .entity:first-child {
    border-top: 1px solid var(--color-accent-light);
  }
}


/* 22. Morocco network — Group ----------------------------------- */

.morocco-network {
  padding-block: var(--space-xl);
  background: var(--color-accent-light);
  color: var(--color-text);
}

.morocco-network__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
  text-align: center;
}

.morocco-network__cities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.morocco-city__count {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw + 1rem, 5rem);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.morocco-city__name {
  margin-top: var(--space-xs);
  font-size: var(--type-small);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-muted);
}

.morocco-network__total {
  font-size: var(--type-small);
  letter-spacing: var(--tracking-wide);
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .morocco-network { padding-block: var(--space-lg); }
  .morocco-network__cities { grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
}


/* 23. Origin — Group -------------------------------------------- */

.origin {
  padding-block: var(--space-xl);
  background: var(--color-bg);
}

.origin__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.origin__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.origin__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.origin__body {
  font-family: var(--font-display);
  font-size: var(--type-h3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  max-width: 32ch;
}

@media (max-width: 767px) {
  .origin { padding-block: var(--space-lg); }
  .origin__inner { grid-template-columns: 1fr; gap: var(--space-md); }
  .origin__media { aspect-ratio: 16 / 10; }
}


/* 23b. ESG — pillars / certification grid / badges (ESG page) --- */
/* Three sections in sequence on /esg, each on its own surface so
   the eye walks: pillars → entity-by-entity certs → badge wall.   */

.esg-pillars {
  padding-block: var(--space-xl);
  background: var(--color-bg);
  border-top: 1px solid var(--color-accent-light);
}

.esg-pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.esg-pillar__title {
  font-family: var(--font-display);
  font-size: var(--type-h3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-sm);
}

.esg-pillar__body {
  color: var(--color-muted);
  max-width: 36ch;
}

.esg-grid {
  padding-block: var(--space-xl);
  background: var(--color-accent-light);
}

.esg-grid__entities {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
  list-style: none;
}

.esg-entity {
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  background: var(--color-bg);
}

.esg-entity__name {
  font-family: var(--font-display);
  font-size: var(--type-h3);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.esg-entity__region {
  margin-top: var(--space-xs);
  font-size: var(--type-small);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-muted);
}

.esg-entity__certs {
  margin-top: var(--space-md);
  padding: 0;
  list-style: none;
  font-size: var(--type-small);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

.esg-entity__certs li {
  padding-block: var(--space-xs);
  border-top: 1px solid var(--color-accent-light);
}

.esg-entity__certs li:first-child {
  border-top: none;
}

.esg-badges-section {
  padding-block: var(--space-xl);
  background: var(--color-bg);
  border-top: 1px solid var(--color-accent-light);
}

.esg-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md) var(--space-lg);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
  list-style: none;
}

.esg-badge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(72px, 6vw, 96px);
}

.esg-badge img {
  height: 100%;
  width: auto;
  max-width: clamp(140px, 12vw, 180px);
  object-fit: contain;
  mix-blend-mode: multiply;
}

@media (max-width: 1023px) {
  .esg-grid__entities { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .esg-pillars,
  .esg-grid,
  .esg-badges-section { padding-block: var(--space-lg); }
  .esg-pillars__grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .esg-grid__entities { grid-template-columns: 1fr; }
}


/* 24. Vertical integration — Delivery --------------------------- */

.vertical-integration {
  padding-block: var(--space-xl);
  background: var(--color-bg);
  border-top: 1px solid var(--color-accent-light);
}

.vertical-integration__inner {
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  padding-inline: var(--space-md);
  text-align: center;
}

.vertical-integration__statement {
  margin-bottom: var(--space-md);
  font-size: var(--type-h2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.vertical-integration__body {
  max-width: var(--content-max);
  margin-inline: auto;
  color: var(--color-muted);
}


/* 25. Contact page — peak-end (Contact) ------------------------- */
/* Whole page is the conversation. No dark section here — that
   pattern lives at the bottom of the OTHER pages as a teaser.
   Here we land warm and generous, light surface, no form. */

.contact-hero {
  padding-block: var(--space-2xl) var(--space-xl);
  background: var(--color-bg);
}

.contact-hero__inner {
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.contact-hero__title {
  margin-top: var(--space-sm);
  max-width: 22ch;
  font-size: var(--type-display);
  letter-spacing: var(--tracking-tight);
}

.contact-hero__lead {
  margin-top: var(--space-md);
  max-width: 50ch;
  font-family: var(--font-body);
  font-size: var(--type-h3);
  font-weight: 400;
  color: var(--color-muted);
}

.contact-details {
  padding-block: var(--space-xl);
  background: var(--color-bg);
  border-top: 1px solid var(--color-accent-light);
}

.contact-details__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.contact-detail__label {
  margin-bottom: var(--space-sm);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-muted);
}

.contact-detail__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--type-h3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  font-style: normal;
}

.contact-detail__value--link {
  border-bottom: 1px solid transparent;
  transition: color var(--transition-default), border-color var(--transition-default);
}

.contact-detail__value--link:hover,
.contact-detail__value--link:focus-visible {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.contact-detail__value--placeholder {
  color: var(--color-muted);
}

.contact-close {
  padding-block: var(--space-xl) var(--space-2xl);
  background: var(--color-accent-light);
}

.contact-close__text {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--type-h2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  text-align: center;
  color: var(--color-text);
}

@media (max-width: 767px) {
  .contact-hero { padding-block: var(--space-xl) var(--space-lg); }
  .contact-details { padding-block: var(--space-lg); }
  .contact-details__list { grid-template-columns: 1fr; gap: var(--space-md); }
  .contact-close { padding-block: var(--space-lg) var(--space-xl); }
}


/* 26. Homepage intro animation ---------------------------------- */
/* First-visit-only two-act brand reveal.
   Act 1: POCARGIL letters fade in stagger, hold, fade out.
   Act 2: tagline ("We produce clothing for leading brands.") fades
   in, holds, fades out.
   Panels then split to reveal the site. Skipped on prefers-reduced-
   motion or if seen this session. */

.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  pointer-events: none;
  display: none;
}

.intro.is-active { display: block; }

.intro__panel {
  position: absolute;
  left: 0;
  z-index: 4;
  width: 100%;
  height: 50%;
  background: var(--color-bg);
  transition: transform 1200ms cubic-bezier(0.83, 0, 0.17, 1);
}

.intro__panel--top    { top: 0; }
.intro__panel--bottom { bottom: 0; }

.intro.is-revealing .intro__panel--top    { transform: translateY(-100%); }
.intro.is-revealing .intro__panel--bottom { transform: translateY(100%); }

.intro__stage {
  position: absolute;
  inset: 0;
  z-index: 6;
}

/* --- Act 1: POCARGIL --- */

.intro__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 2px;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem);
  font-weight: 400;
  letter-spacing: 0.5em;
  color: var(--color-text);
  white-space: nowrap;
}

/* Base transition is the fade-OUT (slower, all letters together). */
.intro__logo span {
  opacity: 0;
  transition: opacity 400ms ease;
}

/* When act is live, transition is the fade-IN (snappy, staggered). */
.intro.is-act-logo .intro__logo span {
  opacity: 1;
  transition: opacity 80ms ease;
}

.intro.is-act-logo .intro__logo span:nth-child(1){ transition-delay: 0ms; }
.intro.is-act-logo .intro__logo span:nth-child(2){ transition-delay: 70ms; }
.intro.is-act-logo .intro__logo span:nth-child(3){ transition-delay: 140ms; }
.intro.is-act-logo .intro__logo span:nth-child(4){ transition-delay: 210ms; }
.intro.is-act-logo .intro__logo span:nth-child(5){ transition-delay: 280ms; }
.intro.is-act-logo .intro__logo span:nth-child(6){ transition-delay: 350ms; }
.intro.is-act-logo .intro__logo span:nth-child(7){ transition-delay: 420ms; }
.intro.is-act-logo .intro__logo span:nth-child(8){ transition-delay: 490ms; }

/* --- Act 2: main message --- */

.intro__tagline {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 24ch;
  padding: 0 var(--space-md);
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-h2);
  font-weight: 400;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  text-align: center;
  opacity: 0;
  transition: opacity 500ms ease;
}

.intro.is-act-tagline .intro__tagline { opacity: 1; }


/* 99. Reduced motion -------------------------------------------- */

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