/*
 * AKIJ Homeware — corporate site design system.
 * Clean, light, editorial-minimal. Rebuilt to match the client wireframe
 * (header, video hero, About, Product Showcase, Company Environment,
 * Stats, Certifications & Partners, CTA row, Contact + LinkedIn).
 */

:root {
  --radius: 0.5rem;

  /* brand scale */
  --ink: oklch(0.16 0.005 90);
  --stone: oklch(0.48 0.008 85);
  --copper: oklch(0.62 0.15 42);

  /* Dynamic brand colours — managed from Admin → Settings → Business.
     Default to the design's own palette; overridden per-request via an
     inline <style> in resources/views/frontend/layouts/master.blade.php
     whenever the business has custom Primary/Secondary Colour values. */
  --color-primary: var(--ink);
  --color-secondary: var(--copper);

  --white: oklch(1 0 0);
  --soft: #F3EBDF;
  --soft-2: oklch(0.95 0.004 85);
  --border: oklch(0.16 0.005 90 / 12%);

  --background: var(--white);
  --foreground: var(--ink);
  --muted-foreground: var(--stone);

  --container: 1280px;
}

/* ---------- Reset (minimal) ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-color: var(--border);
}

html {
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  /* keep anchored sections clear of the sticky header */
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background-color: #ffffff;
  color: var(--foreground);
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  overflow-x: hidden;
}

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

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

ul,
dl,
dd,
h1,
h2,
h3,
h4,
p {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

::selection {
  background: var(--color-secondary);
  color: var(--white);
}

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

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Typography / layout utilities ---------- */
.label {
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted-foreground);
}

.display-sm {
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
}

.shell {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}

section {
  margin-bottom: 12px;
}

section:last-of-type {
  margin-bottom: 0;
}

/* .section {
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
} */

.section--soft {
  background: var(--soft);
}

.section-head {
  max-width: 42rem;
}

.section-head p {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}

.section-head--center {
  max-width: 38rem;
  margin-inline: auto;
  text-align: center;
}

/* scroll-reveal (IntersectionObserver toggles .is-visible) */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease, transform 700ms ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* GSAP-driven reveals (hero entrance, staggered grids, banner scale) —
   hidden until animations.js runs; degrades to visible if JS never loads. */
[data-gsap],
[data-gsap-item] {
  opacity: 0;
}

.no-js [data-gsap],
.no-js [data-gsap-item] {
  opacity: 1;
}

/* ================================================================
   Header
   ================================================================ */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 8px oklch(0.16 0.005 90 / 6%);
}

.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Figma spec: 1536px frame, 44px row height, 180px inline padding, 10px block spacing — scales down proportionally on smaller viewports. */
  min-height: 2.75rem;
  padding-block: 0.625rem;
  padding-inline: clamp(1rem, 11.7vw, 180px);
  max-width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
}

.brand {
  display: inline-flex;
  align-items: center;
  font-family: "Instrument Serif", ui-serif, Georgia, serif;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.brand__logo {
  display: block;
  height: 2.25rem;
  width: auto;
  max-width: 12rem;
  object-fit: contain;
  filter: none;
}

/* ================================================================
   Hero — full-bleed autoplay video with headline overlay
   ================================================================ */
.hero {
  position: relative;
  width: 100%;
  height: 75vh;
  overflow: hidden;
  opacity: 1;
}

@media (max-width: 768px) {
  .hero {
    height: 100vh;
    /* dvh = the *currently visible* viewport height, so the bottom-aligned
       hero copy isn't hidden under the mobile browser address bar on load.
       `100vh` above stays as the fallback for browsers without dvh. */
    height: 100dvh;
  }
}

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,
      oklch(0.16 0.005 90 / 78%) 0%,
      oklch(0.16 0.005 90 / 32%) 38%,
      transparent 62%);
}

.hero__content {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(2.25rem, 6vw, 4.5rem);
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 44rem;
}

.hero__title {
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  color: var(--white);
}

.hero__subtitle {
  max-width: 34rem;
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  line-height: 1.65;
  color: oklch(1 0 0 / 82%);
}

.hero__actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.75rem;
}

.hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.5rem;
  border-radius: calc(var(--radius) - 2px);
  background: var(--color-secondary);
  color: var(--white);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: opacity 200ms ease;
}

.hero__btn:hover {
  opacity: 0.88;
}

.hero__btn svg {
  width: 1rem;
  height: 1rem;
}

.hero__play {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 600;
}

.hero__play-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: oklch(1 0 0 / 18%);
  border: 1px solid oklch(1 0 0 / 55%);
  transition: background-color 200ms ease;
}

.hero__play-icon svg {
  width: 0.85rem;
  height: 0.85rem;
  margin-left: 0.1rem;
}

.hero__play:hover .hero__play-icon {
  background: oklch(1 0 0 / 30%);
}

/* ================================================================
   Editorial split — About / Heritage (image + copy, mirrorable)
   ================================================================ */
.editorial {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.editorial__media {
  border-radius: var(--radius);
  overflow: hidden;
}

.editorial__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

.editorial__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.editorial__eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: var(--color-secondary);
}

.editorial__title {
  margin-top: 1.5rem;
}

.editorial__copy {
  margin-top: 1.25rem;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--muted-foreground);
}

.editorial .btn-outline {
  margin-top: 2rem;
}

.editorial__facts {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
}

.editorial__fact-num {
  font-family: "Instrument Serif", ui-serif, Georgia, serif;
  font-size: 1.75rem;
  color: var(--ink);
}

.editorial__fact-label {
  margin-top: 0.2rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

@media (min-width: 900px) {
  .editorial {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  .editorial--reverse .editorial__media {
    order: 2;
  }

  .editorial--reverse .editorial__body {
    order: 1;
  }
}

/* ================================================================
   About split — premium redesign
   Eyebrow + title left | photo right with floating badge
   Taller section, stat cards with accent borders, full responsive
   ================================================================ */

/* ── Section ── */
.about-section {
  background: var(--soft);
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 8vw, 6.25rem) 0;
}




/* ── Two-column grid ── */
.about-split {
  display: grid;
  grid-template-columns: 1fr;

  align-items: center;
}

@media (min-width: 900px) {
  .about-split {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "body  media"
      "facts media";
    column-gap: clamp(3.5rem, 7vw, 6rem);
    row-gap: 0;
    align-items: center;
  }

  .about-split__body {
    grid-area: body;
  }

  .about-split__media {
    grid-area: media;
  }

  .about-split__facts {
    grid-area: facts;
  }
}

/* ── Body / copy column ── */
.about-split__body {
  display: flex;
  flex-direction: column;
  order: 0;
}

/* ── Eyebrow label ── */
.about-split__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: 1rem;
}

.about-split__eyebrow::before {
  content: "";
  display: block;
  width: 1.75rem;
  height: 2px;
  background: var(--color-secondary);
  border-radius: 999px;
  flex-shrink: 0;
}

/* ── Title ── */
.about-split__title {
  display: inline-block;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--color-primary);
  padding-bottom: 1rem;
  position: relative;
  word-break: break-word;
  overflow-wrap: break-word;
}

.about-split__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 3rem;
  height: 3px;
  border-radius: 999px;
  background: var(--color-secondary);
}

/* ── Lead text (hidden per reference design) ── */
.about-split__lead {
  display: none;
}

/* ── Body copy ── */
.about-split__copy {
  margin-top: 1.1rem;
  font-size: clamp(0.85rem, 1.1vw, 0.93rem);
  line-height: 1.82;
  color: var(--muted-foreground);
}

.about-split__copy+.about-split__copy {
  margin-top: 0.65rem;
}

/* ── Stats row ──
   DOM order is body → facts → media; on mobile `order` drops the stats
   below the image (copy → image → stats), on desktop grid-areas put them
   back under the copy in the left column. */
.about-split__facts {
  order: 2;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;

}

/* Single-column layout: the grid `gap` already spaces the stats off the
   image, so drop the extra top margin. */
@media (max-width: 899px) {
  .about-split__facts {
    margin-top: 0;
  }
}

/* ── Individual stat card ── */
.about-split__fact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0;
  flex: 1;
  min-width: 7rem;
  padding: 1.5rem 0;
  position: relative;
}

/* Vertical divider between cards (except first) — sits centred in the 60px gap */
.about-split__fact+.about-split__fact::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  height: 60%;
  border-left: 1.5px solid var(--border);
}

/* ── Stat icon ── (centered in the cell; value + label stay left-aligned) */
.about-split__fact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
 
  color: var(--color-secondary);
  margin-bottom: 0.75rem;
}

.about-split__fact-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke: currentColor;
}

/* ── Stat value ── */
.about-split__fact-title {
  font-size: clamp(1rem, 2vw, 1.0rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  line-height: 1.2;
  margin-bottom: 0.3rem;
}

.about-split__fact-title--accent {
  color: var(--color-primary);
}

/* ── Stat label ── */
.about-split__fact-label {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--muted-foreground);
  line-height: 1.4;
}

/* ── Image column ── */
.about-split__media {
  position: relative;
  border-radius: calc(var(--radius) * 2);
  overflow: hidden;
  box-shadow:
    0 2rem 4rem -1rem oklch(0.16 0.005 90 / 25%),
    0 0.5rem 1.25rem -0.5rem oklch(0.16 0.005 90 / 12%);
  order: 1;
}

@media (min-width: 900px) {
  .about-split__media {
    order: unset;
  }
}

.about-split__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: transform 700ms ease;
}

@media (min-width: 900px) {
  .about-split__media img {
    aspect-ratio: 3 / 2;
    /* taller on desktop */
  }
}

/* Mobile: fixed 200px band, cropped around the centre of the photo */
@media (max-width: 768px) {
  .about-split__media img {
    height: 200px;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center;
  }
}

/* ================================================================
   About — mobile layout that fits the fixed 500px section:
   copy  →  200px image (no shadow)  →  stats pinned to the bottom.
   Everything below is tuned so the typical content clears 500px;
   the copy is line-clamped as a safety net against long admin text.
   ================================================================ */
@media (max-width: 768px) {
  .about-section {
    padding: 1rem 0;
  }

  .about-split {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 25.7px;
    height: 100%;
  }

  .about-split__title {
    font-size: 1.15rem;
padding-bottom: 1.1rem;
  }

  .about-split__copy {
    margin-top: 20px;
    font-size: 0.95rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
  }

  .about-split__copy+.about-split__copy {
    margin-top: 0.4rem;
  }

  .about-split__media {
    box-shadow: none;
    flex-shrink: 0;
  }

  /* stats sit at the bottom edge of the 500px box, 3 equal columns
     that never overflow, no vertical dividers */
  .about-split__facts {
    
    flex-wrap: nowrap;
   
  }

  .about-split__fact {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.55rem 0 0 0;
  }

  .about-split__fact+.about-split__fact {
    padding-left: 0;
    border-left: 0 !important;
  }

  .about-split__fact+.about-split__fact::before {
    display: none;
  }

  .about-split__fact-title,
  .about-split__fact-label {
    overflow-wrap: anywhere;
  }

  .about-split__fact-icon {
    margin-bottom: 0.3rem;
  }

  .about-split__fact-icon svg {
    width: 1.15rem;
    height: 1.15rem;
  }
}

.about-split__media:hover img {
  transform: scale(1.03);
}

/* ── Floating years badge ── */
.about-split__media-badge {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: oklch(1 0 0 / 92%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid oklch(1 0 0 / 60%);
  border-radius: calc(var(--radius) + 2px);
  padding: 0.6rem 1rem;
  box-shadow: 0 0.5rem 1.5rem oklch(0.16 0.005 90 / 15%);
  animation: badgePop 500ms 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes badgePop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.about-split__media-badge-num {
  font-family: "Instrument Serif", ui-serif, Georgia, serif;
  font-size: 2rem;
  line-height: 1;
  color: var(--color-secondary);
  font-weight: 400;
}

.about-split__media-badge-num sup {
  font-size: 0.9rem;
  vertical-align: super;
}

.about-split__media-badge-txt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ink);
}

/* ── Tablet (640–899px) ── */
@media (min-width: 640px) and (max-width: 899px) {
  .about-split__facts {
    flex-wrap: nowrap;
  }
}

/* ── Mobile (<640px) ── */
@media (max-width: 639px) {
  .about-split__facts {
    flex-wrap: nowrap;
    gap: 35px;
    justify-content: center;
  }

  .about-split__fact {
    flex: 0 1 auto;
    min-width: 0;
    align-items: flex-start;
    text-align: left;
    padding: 0.5rem 0 0 0;
  }

  .about-split__fact+.about-split__fact {
    padding-left: 0;
    border-left: 0 !important;
  }

  .about-split__fact+.about-split__fact::before {
    display: none;
  }

  .about-split__fact-title {
    font-size: clamp(0.8rem, 3vw, 0.95rem);
    /* smaller text to fit 3 cols */
  }

  .about-split__fact-label {
    font-size: 0.62rem;
    line-height: 1.3;
  }

  .about-split__media-badge {
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
  }

  .about-split__media-badge-num {
    font-size: 1.6rem;
  }
}

/* ── Extra-small phones (<420px) ── */
@media (max-width: 420px) {
  .about-split__fact {
    padding: 0.5rem 0 0 0;
  }

  .about-split__fact+.about-split__fact {
    padding-left: 0;
  }

  .about-split__fact-icon svg {
    width: 1.1rem;
    height: 1.1rem;
  }
}

/* ================================================================
   Section head with an inline action (Browse Categories / etc.)
   ================================================================ */
.section-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}

/* ================================================================
   Company Environment — full-bleed aerial layout
   ================================================================ */
.env-section {
  position: relative;
  padding: 0;
  background: var(--background);
}

.env-header {
  position: absolute;
  top: clamp(3rem, 6vw, 5rem);
  left: 0;
  right: 0;
  z-index: 2;
  max-width: 76rem;
  margin-inline: auto;
  text-align: center;

}

.env-header__title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}

.env-header__sub {
  margin-top: 1rem;
  font-size: 0.9rem;
  line-height: 1.75;
  color: #000000;
}

.env-photo {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.env-photo__fade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to bottom, #F3EBDF 59%, transparent 91%);
  z-index: 1;
  pointer-events: none;
}

.env-photo__img {
  display: block;
  width: 100%;
  height: clamp(22rem, 55vw, 42rem);
  object-fit: cover;
  object-position: center 40%;
}

/* ── Environment section — responsive (≤768) ──────────────────────
   Same composition as desktop: the header stays absolutely positioned
   over the photo, sitting on the cream `.env-photo__fade`, which covers
   the top 50% of the image. The fade stays solid through most of that
   half so the text keeps full contrast, and the type is scaled down so
   the default copy fits inside the scrim. */
@media (max-width: 768px) {
  .env-header {
    top: 0;
    max-width: none;
    padding: 1.75rem 1.25rem 0;
  }

  .env-header__title {
    font-size: 1.5rem;
  }

  .env-header__sub {
    margin-top: 0.6rem;
    font-size: 0.82rem;
    line-height: 1.6;
  }

  .env-photo__fade {
    height: 50%;
    background: linear-gradient(to bottom, #F3EBDF 80%, transparent 100%);
  }

  .env-photo__img {
    height: 540px;
  }
}

/* ================================================================
   Employee Engagement & Training section
   ================================================================ */
.engage-section {
  background: #F3EBDF;
  width: 100%;
  min-height: 522px;
  padding-top: 53px;
  opacity: 1;
  padding: 10px 0 10px 0;
}

.engage-header {
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 5vw, 3.5rem);
}

.engage-header__title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-primary);

}

.engage-header__sub {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(0.875rem, 1.2vw, 0.9375rem);
  /* 15px at design width */
  font-weight: 400;
  font-style: normal;
  line-height: 1.6;
  /* 160% */
  letter-spacing: 0;
  text-align: center;
  color: var(--stone);
  margin-top: 1rem;
  max-width: 42rem;
  margin-inline: auto;
}

/* ── Slider wrapper ── */
.engage-slider-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

/* The scrollable track */
.engage-slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* hide scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 12px;
}

.engage-slider::-webkit-scrollbar {
  display: none;
}

/* ── Each slide — full width, one at a time ── */
.engage-slide {
  position: relative;
  flex: 0 0 585.7px;
  width: 585.7px;
  height: 313px;
  scroll-snap-align: start;
  overflow: hidden;
  border-radius: 5.62px;
  background: oklch(0.2 0.02 205);
}

.engage-slide__media {
  position: absolute;
  inset: 0;
}

.engage-slide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms ease;
}

.engage-slide__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      transparent 40%,
      oklch(0.1 0.02 205 / 75%) 100%);
  pointer-events: none;
}

.engage-slide__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 4vw, 2.5rem);
  color: var(--white);
  text-align: center;
}

/* Figma: Helvetica Neue · Medium 500 · 18px · centered.
   Capped at 2 lines so long titles wrap cleanly instead of overflowing. */
.engage-slide__line1 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Same typography as line 1 (Helvetica Neue · Medium 500 · 18px) */
.engage-slide__line2 {
  display: block;
  margin-top: 0.3rem;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  font-style: normal;
  color: #ffffff;
}

/* ── Dot indicators ── */
.engage-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 1.25rem;
  padding-bottom: 0.5rem;
}

.engage-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0.25;
  transition: opacity 300ms ease, transform 300ms ease;
}

.engage-dot--active {
  opacity: 1;
  transform: scale(1.4);
}

/* ── Engagement carousel — responsive (≤640 phone) ─────────────────
   Additive only: desktop is unchanged. Desktop slides are a fixed
   585.7×313 peek-carousel; on phones a single slide is wider than the
   viewport, so below 640px the slide width becomes viewport-relative
   while preserving the exact 585.7:313 aspect ratio (same shape, just
   scaled down). All children are absolutely positioned, so aspect-ratio
   supplies the height that the fixed `height` previously did. */
@media (max-width: 640px) {
  .engage-slide {
    flex-basis: 86vw;
    width: 86vw;
    height: auto;
    aspect-ratio: 585.7 / 313;
  }
}

/* ================================================================
   Photo card grid — shared by Categories
   ================================================================ */
.card-grid {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  gap: 1.5rem 2rem;
  grid-template-columns: 1fr;
}

.card-grid__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--soft-2);
}

.card-grid__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}

.card-grid__item:hover .card-grid__media img {
  transform: scale(1.04);
}

.card-grid__caption {
  margin-top: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.card-grid__caption p {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink);
}



/* ---------- Categories: image + white body card ---------- */
.card-grid--categories .card-grid__item {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px oklch(0.16 0.005 90 / 8%);
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.card-grid--categories .card-grid__item:hover {
  box-shadow: 0 8px 20px oklch(0.16 0.005 90 / 12%);
  transform: translateY(-2px);
}

.card-grid--categories .card-grid__media {
  border-radius: 0;
  aspect-ratio: 12 / 5;
}

.card-grid--categories .card-grid__caption {
  margin-top: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 1.25rem 1.5rem 1.5rem;
}

.card-grid--categories .card-grid__caption p {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-primary);
}

.card-grid--categories .card-grid__desc {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted-foreground);
}

/* ---------- Centered accent heading (Company Environment, Product Showcase, ...) ---------- */
.section-heading {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}

.section-heading__title {
  display: inline-block;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-primary);
  padding-bottom: 0.85rem;
  position: relative;
}

.section-heading__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3rem;
  height: 3px;
  border-radius: 999px;
  background: var(--color-secondary);
}

.section-heading__sub {
  margin-top: 0.6rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}

@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .card-grid--categories {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ================================================================
   Product category bento grid — full-bleed photo tiles.
   Mirrors the Figma "ProductShowcase" layout: two even rows of
   2 tiles, then an asymmetric row (2 stacked + 1 tall) for any
   5th–7th category. Degrades to a single column on small screens
   and to plain auto-placement past the 7th item.
   ================================================================ */
.bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
}

.bento-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0;
  background: var(--soft);
  aspect-ratio: 762 / 510;
  opacity: 1;
  padding-top: 53px;
  padding-bottom: 30px;
}

.bento-tile__media {
  position: absolute;
  inset: 0;
}

.bento-tile__media img,
.bento-tile__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}

.bento-tile:hover .bento-tile__media img,
.bento-tile:hover .bento-tile__media video {
  transform: scale(1.05);
}

.bento-tile__scrim {
  display: none;
}

.bento-tile__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem 1.75rem;
  color: var(--color-primary);
  text-align: center;
}

.bento-tile__caption p {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.bento-tile__desc {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-primary);
  opacity: 0.8;
}

@media (min-width: 640px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Row 3 & 4: items 5–6 stack in the left column, item 7 spans
     both rows in the right column — the tall "hero" tile. */
  .bento-tile:nth-child(5) {
    grid-column: 1;
    grid-row: 3;
  }

  .bento-tile:nth-child(6) {
    grid-column: 1;
    grid-row: 4;
  }

  .bento-tile:nth-child(7) {
    grid-column: 2;
    grid-row: 3 / span 2;
    aspect-ratio: auto;
  }
}

/* Mobile (single column): each tile is a fixed 500px tall image */
@media (max-width: 639px) {
  .bento-tile {
    aspect-ratio: auto;
    height: 500px;
  }
}

/* Products section — full-bleed override */
.section--products {
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
  width: 100%;
  min-height: 1032px;
  opacity: 1;
  background: var(--white);
}

/* ── Fixed section heights — responsive (≤900) ────────────────────
   Additive only: desktop (>900px) is unchanged. `.section--products`
   (min-height 1032px) and `.engage-section` (min-height 522px) reserve
   a fixed vertical slot sized to the desktop Figma frame. With the
   default content the desktop grids/slider already exceed those
   heights, so this changes nothing there; but on tablet/mobile — or
   whenever an editor reduces the number of tiles/slides — the fixed
   minimum leaves a band of empty background below the content. Below
   900px the minimum simply relaxes to the content height. */
@media (max-width: 900px) {
  .section--products {
    min-height: 0;
  }

  .engage-section {
    min-height: 0;
  }
}

/* ================================================================
   Textural banner — "Materiality with Intention"
   ================================================================ */
.material-banner {
  position: relative;
  height: clamp(18rem, 32vw, 28rem);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.material-banner__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.material-banner__scrim {
  position: absolute;
  inset: 0;
  background: oklch(0.16 0.005 90 / 42%);
}

.material-banner__content {
  position: relative;
  text-align: center;
  padding-inline: 1.5rem;
  color: var(--white);
}

.material-banner__title {
  font-weight: 300;
  letter-spacing: -0.01em;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
}

.material-banner__sub {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(1 0 0 / 78%);
}

/* ================================================================
   Stats
   ================================================================ */
.stats-grid {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: 1.75rem 1.25rem;
  grid-template-columns: repeat(2, 1fr);
  background: var(--color-primary);
  border-radius: 1rem;
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 2rem);
}

.stats-grid>div {
  text-align: center;
}

.stats-grid__num {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--white);
}

.stats-grid__label {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: oklch(1 0 0 / 75%);
}

@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ================================================================
   Trust bar — certifications & standards
   ================================================================ */
.certs {
  padding: 100px 0 100px 0;
  text-align: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.certs-heading {
  max-width: 34rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.certs-heading__eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.certs-heading__title {
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.certs-logos {
  margin-top: 2.75rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 93.33px;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}

.certs-logos::-webkit-scrollbar {
  display: none;
}

.cert-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Plain logo — no circle, no background, no border */
.cert-badge__img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 4px;
  opacity: 1;
  transition: transform 200ms ease;
}

.cert-badge:hover .cert-badge__img-wrap {
  transform: translateY(-2px);
}

.cert-badge__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Text wordmark badge (Sedex, REX) — no circle, no background, no border */
.cert-badge__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 4px;
  opacity: 1;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
  transition: transform 200ms ease;
  text-align: center;
  line-height: 1;
}

/* NSF: filled badge removes border */
.cert-badge__mark[style*="background"] {
  border-color: transparent;
}

/* .cert-badge:hover .cert-badge__mark {
  border-color: var(--color-secondary);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -10px oklch(0.16 0.005 90 / 25%);
} */
.cert-badge__mark--underline {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cert-badge__sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.7;
}

.cert-badge__dot {
  color: inherit;
  opacity: 1;
  font-size: 0.85em;
}

.certs-divider {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--border);
}

.certs .tabs {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* ── Certifications strip — responsive (≤768) ─────────────────────
   Additive only: desktop is unchanged. The badge row stays a
   horizontal scroll strip (its intended pattern), but on phones the
   fixed 93.33px gaps make it ~1540px wide — tedious to scroll. Below
   768px the gap tightens and the section's 100px vertical padding
   drops to something proportional to a phone screen. Badge size,
   colours and the scroll behaviour are untouched. */
@media (max-width: 768px) {
  .certs {
    padding: 56px 0;
  }

  .certs-logos {
    gap: 2rem;
    margin-top: 2rem;
    flex-wrap: wrap;
    justify-content: center;
  }
}

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

/* ================================================================
   Catalogue & Resources — quick-link buttons + document table
   ================================================================ */
.tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}

.tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-width: 15rem;
  padding: 1.1rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  background: var(--white);
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.tab-btn svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.tab-btn:hover {
  border-color: var(--color-secondary);
  transform: translateY(-2px);
}

.tab-btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--white);
}

.tab-btn.is-active svg {
  color: #d15632;
  /* Orange accent color from the image */
}

@media (max-width: 768px) {
  .tabs {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 0 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tab-btn {
           flex-direction: column;
        min-width: 0;
        flex: 1 1 0px;
        margin: 0px 0px 0px 0px;
        padding: 2px;
        gap: 8px;
        font-size: 0.8rem;
        text-align: center;
        /* border-radius: 8px; */
        line-height: 1.2;
  }

  .tab-btn svg {
  margin-top: 2px;
        width: 25px;
        height: 19px;
  }
}

.tab-panels {
  margin-top: 1.75rem;
}

.doc-group__desc {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.doc-table-wrap {
  margin-top: 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 1px 2px oklch(0.16 0.005 90 / 4%), 0 12px 28px -18px oklch(0.16 0.005 90 / 18%);
}

.doc-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.doc-table thead th {
  text-align: left;
  padding: 1rem 1.5rem;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted-foreground);
  background: var(--soft);
  border-bottom: 1px solid var(--border);
}

.doc-table__actions-head {
  text-align: right;
}

.doc-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background-color 200ms ease;
}

.doc-table tbody tr:last-child {
  border-bottom: 0;
}

.doc-table tbody tr:hover {
  background: var(--soft);
}

.doc-table td {
  padding: 1.1rem 1.5rem;
  vertical-align: middle;
  font-size: 0.9rem;
}

.doc-table__name {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}

.file-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: calc(var(--radius) - 2px);
}

.file-badge svg {
  width: 1.1rem;
  height: 1.1rem;
}

.file-badge--pdf {
  background: color-mix(in oklab, var(--color-secondary) 14%, transparent);
  color: var(--color-secondary);
}

.file-badge--zip {
  background: oklch(0.16 0.005 90 / 8%);
  color: var(--ink);
}

.file-badge--youtube {
  background: oklch(0.63 0.24 29 / 14%);
  color: oklch(0.55 0.22 29);
}

.file-badge--link {
  background: oklch(0.16 0.005 90 / 8%);
  color: var(--ink);
}

.doc-table__empty {
  padding: 2.5rem 1.5rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted-foreground);
}

.doc-table__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  transition: border-color 200ms ease, color 200ms ease;
  white-space: nowrap;
}

.btn-ghost:hover {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

.btn-ghost svg {
  width: 0.9rem;
  height: 0.9rem;
}

.btn-solid-sm {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: opacity 200ms ease;
  white-space: nowrap;
}

.btn-solid-sm:hover {
  opacity: 0.85;
}

.btn-solid-sm svg {
  width: 0.9rem;
  height: 0.9rem;
}

/* Mobile: resource table collapses to Name + Actions, and the action
   buttons become icon-only squares. The button text is visually hidden
   (not display:none) so screen readers still get "View" / "Download". */
@media (max-width: 768px) {
  .doc-table {
    min-width: 0;
  }

  .doc-table__meta {
    display: none;
  }

  .doc-table thead th,
  .doc-table td {
    padding: 0.85rem 1rem;
  }

  .doc-table__name {
    gap: 0.65rem;
    font-size: 0.85rem;
    overflow-wrap: anywhere;
  }

  .doc-table__actions {
    gap: 0.45rem;
  }

  .doc-table__actions .btn-ghost,
  .doc-table__actions .btn-solid-sm {
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    gap: 0;
  }

  .doc-table__actions .btn-ghost svg,
  .doc-table__actions .btn-solid-sm svg {
    width: 1rem;
    height: 1rem;
  }

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

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--white);
  transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease;
}

.btn-outline:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--white);
}

.btn-outline svg {
  width: 1rem;
  height: 1rem;
}

/* ================================================================
   Contact
   ================================================================ */
#contact.section {
  --contact-bg: oklch(0.32 0.035 205);
  background: var(--contact-bg);
  color: oklch(1 0 0 / 85%);
  position: relative;
  overflow: hidden;
  /* min- not max-: `overflow: hidden` + max-height hard-clips the form */
  min-height: 510px;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

/* Large decorative logo — left side watermark */
.contact-deco-logo {
  position: absolute;
  left: 0px;
  top: 67%;
  transform: translateY(-50%);
  width: 1238.5985107421875px;
  height: 1066.67431640625px;
  max-width: none;
  filter: brightness(0) invert(1);
  opacity: 0.12;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ── Contact watermark — responsive (≤768) ───────────────────────
   Additive only: desktop is unchanged. The decorative logo is a fixed
   1238×1067px element anchored to the left edge (clipped by the
   section's `overflow: hidden`). On desktop it reads as a left-side
   watermark; on a phone it is several times the section width and
   fills the whole panel. Below 768px it scales to the viewport and
   keeps its aspect ratio. Purely visual — aria-hidden, non-interactive,
   behind the content at 0.12 opacity. */
@media (max-width: 768px) {
  .contact-deco-logo {
    width: 130vw;
    height: auto;
  }
}

.contact-section-wrap .shell {
  position: relative;
  z-index: 1;
}

.contact-grid {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}



.field label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.45rem;
}

.field input,
.field textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background: var(--white);
  padding: 0.75rem 0.9rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
}

.field input::placeholder,
.field textarea::placeholder {
  color: color-mix(in oklab, var(--muted-foreground) 80%, transparent);
}

.field textarea {
  resize: vertical;
  min-height: 8rem;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-secondary);
}

/* Dark-bg overrides for contact section */
#contact .field label {
  color: oklch(1 0 0 / 85%);
}

#contact .field input,
#contact .field textarea {
  background: var(--white);
  border-color: var(--border);
  color: var(--ink);
}

#contact .field input::placeholder,
#contact .field textarea::placeholder {
  color: var(--muted-foreground);
}

#contact .field input:focus,
#contact .field textarea:focus {
  border-color: var(--copper);
  background: var(--white);
}

#contact .btn-solid {
  background: var(--copper);
  border-color: var(--copper);
  color: var(--white);
}

#contact .btn-solid:hover {
  opacity: 0.9;
}

.field-error {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: oklch(0.577 0.245 27.325);
  min-height: 1em;
}

/* Honeypot — invisible to sighted users and screen readers, but present
   in the DOM for bots that blindly fill every field to trip. Positioned
   off-screen rather than display:none, which some bots skip over. */
.field-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-title {
  font-weight: 800;
  line-height: 1.05;
  color: var(--ink);
}

#contact .contact-title {
  color: var(--white);
}

/* Sub-line under the section title */
.contact-sub {
  margin-top: 0.65rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted-foreground);
  max-width: 34rem;
}

#contact .contact-sub {
  color: oklch(1 0 0 / 62%);
}

/* LinkedIn blurb — full paragraph by default, short line on phones */
.linkedin-card__short {
  display: none;
}

.btn-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.5rem;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: var(--white);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: opacity 200ms ease;
}

.btn-solid:hover {
  opacity: 0.85;
}

.btn-solid--block {
  display: flex;
  width: 100%;
}

.form-note {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

/* only takes space once it actually has a message */
.form-note:not(:empty) {
  margin-top: 0.9rem;
}

.form-note.is-success {
  color: var(--color-secondary);
}

#contact .form-note {
  color: oklch(1 0 0 / 55%);
}

.linkedin-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 2);
  padding: 2.5rem 2rem;
  text-align: center;
  background: var(--white);
  align-self: start;
  width: 100%;
  max-width: 440px;
  height: auto;
}

.linkedin-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: calc(var(--radius) - 1px);
  background: var(--soft-2);
  color: oklch(0.32 0.035 205);
}

.linkedin-card__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.linkedin-card__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.linkedin-card h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.linkedin-card p {
  padding-bottom: 20px;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--muted-foreground);
  margin: 0;
}

.linkedin-card .btn-outline {
  width: 100%;
  justify-content: center;
  border-color: var(--ink);
  margin: 0;
}

/* LinkedIn card dark-bg override */
#contact .linkedin-card {
  background: var(--white);
  border: 0.8px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 30px -15px oklch(0.16 0.005 90 / 15%);
}

#contact .linkedin-card__icon {
  background: var(--soft-2);
  color: oklch(0.32 0.035 205);
}

#contact .linkedin-card h3 {
  color: var(--ink);
}

#contact .linkedin-card p {
  color: var(--muted-foreground);
}

#contact .linkedin-card .btn-outline {
  border-color: oklch(0.32 0.035 205);
  color: oklch(0.32 0.035 205);
  background: transparent;
  font-weight: 700;
}

#contact .linkedin-card .btn-outline:hover {
  background: oklch(0.32 0.035 205);
  color: var(--white);
  border-color: oklch(0.32 0.035 205);
}

/* ── Contact — phone only (≤767px) ───────────────────────────────
   One column, flex form, LinkedIn shown as a compact pill under the
   Send button. Tablet (768–1023px) keeps the default grid layout. ── */
@media (max-width: 767px) {
  #contact.section {
    /* min-height, not max-height — the section is 600px tall but still
       grows instead of clipping if the admin text runs longer. */
    min-height: 600px;
    padding-block: 24px;
  }

  #contact .shell {
    padding-inline: 16px;
  }

  #contact .contact-title {
    font-size: 1.75rem;
  }

  #contact .contact-sub {
    margin-top: 10px;
    font-size: 0.85rem;
    line-height: 1.5;
  }

  #contact .contact-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px;
  }

  #contact .contact-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  #contact .field label {
    margin-bottom: 6px;
  }

  /* don't reserve an empty line under every input — it added ~20px per
     field and pushed the Send / LinkedIn buttons off the first screen */
  #contact .field-error {
    margin-top: 0;
    min-height: 0;
    font-size: 0.72rem;
  }

  #contact .field-error:not(:empty) {
    margin-top: 4px;
  }

  #contact .field textarea {
    min-height: 5.5rem;
  }

  /* Mobile: a compact translucent pill under "Send Message" — the whole
     pill links to LinkedIn (the invisible .btn-outline covers it). */
  /* Phones show only the short line. Selectors must out-rank
     `#contact .linkedin-card p` below, hence the p.<class> form. */
  #contact .linkedin-card p.linkedin-card__long {
    display: none;
  }

  #contact .linkedin-card p.linkedin-card__short {
    display: block;
  }

  #contact .linkedin-card {
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    /* compact pill — width fills the shell, content vertically centred */
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 48px;
    gap: 12px;
    padding: 8px 14px;
    background: oklch(1 0 0 / 9%);
    border: 1px solid oklch(1 0 0 / 22%);
    border-radius: 8px;
    box-shadow: none;
    margin: 0;
  }

  /* Always visible on phones — the scroll-reveal fade was leaving it at
     opacity 0 when the observer didn't fire for this element. */
  #contact .linkedin-card[data-reveal] {
    opacity: 1;
    transform: none;
  }

  #contact .linkedin-card__icon {
    /* 32 + 8px padding top/bottom = the 48px hug height */
    width: 32px;
    height: 32px;
    align-self: center;
    background: transparent;
    border: 1px solid oklch(1 0 0 / 35%);
    border-radius: 50%;
    color: var(--white);
    flex-shrink: 0;
  }

  #contact .linkedin-card__icon svg {
    width: 1rem;
    height: 1rem;
  }

  /* text block sits in the vertical middle of the pill */
  #contact .linkedin-card__text {
    align-items: flex-start;
    justify-content: center;
    align-self: center;
    gap: 1px;
  }

  #contact .linkedin-card h3 {
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
  }

  #contact .linkedin-card p {
    color: oklch(1 0 0 / 65%);
    font-size: 0.72rem;
    line-height: 1.3;
    /* drop the base 20px bottom padding — it pushed the text block up,
       off the pill's vertical centre */
    padding-bottom: 0;
  }

  /* invisible full-cover link — makes the whole pill tappable */
  #contact .linkedin-card .btn-outline {
    position: absolute;
    inset: 0;
    width: auto;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0;
  }
}


@media (min-width: 1024px) {
  #contact.section {
    padding-block: 44px;
  }

  /* Title + subtitle share the grid's centred 1120px column, so their
     left edge lines up with the form's left edge. */
  #contact .section-head {
    max-width: 1120px;
    margin-inline: auto;
  }

  /* Form (left, on the dark ground) + LinkedIn card (right, white).
     Both sit at their natural height, top-aligned. */
  .contact-grid {
    grid-template-columns: minmax(0, 1fr) 420px;
    justify-content: center;
    align-items: start;
    gap: 40px;
    max-width: 1120px;
    margin: 20px auto 0;
  }

  /* keeps the base `display: grid` — just a tighter gap on desktop */
  #contact .contact-form {
    gap: 18px;
  }

  #contact .field textarea {
    min-height: 2.75rem;
  }

  /* Only the LinkedIn side is a card */
  #contact .linkedin-card {
    width: 100%;
    max-width: none;
    height: auto;
            margin-top: 22px;
    min-height: 0;
           padding: 37px 40px;
    border: 0.8px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    box-shadow: 0 10px 30px -15px oklch(0.16 0.005 90 / 15%);
  }
}

/* ================================================================
   Follow us — "Atelier in Context" gallery
   ================================================================ */
.gallery-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.gallery-head a {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  transition: color 200ms ease;
}

.gallery-head a:hover {
  color: var(--color-secondary);
}

.gallery-grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.gallery-grid__item {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
}

.gallery-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}

.gallery-grid__item:hover img {
  transform: scale(1.06);
}

@media (min-width: 640px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ================================================================
   Footer
   ================================================================ */
.site-footer {
  --footer-bg: oklch(0.32 0.035 205);
  position: relative;
  overflow: hidden;
  background: var(--footer-bg);
  color: oklch(1 0 0 / 68%);
  border-top: 1px solid oklch(1 0 0 / 12%);
}

.footer-watermark {
  position: absolute;
  top: -8%;
  right: -6%;
  width: min(64rem, 80vw);
  height: auto;
  opacity: 0.5;
  pointer-events: none;
}

.footer-hero,
.footer-columns,
.footer-bottom {
  position: relative;
  z-index: 1;
}

.footer-hero {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: 1px solid oklch(1 0 0 / 14%);
}

.footer-hero__eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: oklch(1 0 0 / 58%);
}

.footer-hero__row {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.footer-hero__title {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(2.25rem, 6vw, 4.25rem);
  color: var(--white);
}

.footer-hero__arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(3.5rem, 6vw, 5rem);
  height: clamp(3.5rem, 6vw, 5rem);
  border-radius: 9999px;
  border: 1px solid oklch(1 0 0 / 30%);
  color: var(--white);
  transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.footer-hero__arrow:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--footer-bg);
  transform: scale(1.06);
}

.footer-hero__arrow svg {
  width: 1.5rem;
  height: 1.5rem;
}

.footer-columns {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid oklch(1 0 0 / 14%);
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}

.footer-col__label {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--white);
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.footer-brand__logo {
  height: 1.85rem;
  width: auto;
  max-width: 2.5rem;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.footer-brand__name {
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 1.15rem;
  color: var(--white);
}

.footer-address {
  margin-top: 1.1rem;
  max-width: 24rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: oklch(1 0 0 / 62%);
}

.footer-links {
  margin-top: 1.5rem;
  display: grid;
  gap: 0.25rem;
}

.footer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid oklch(1 0 0 / 16%);
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--white);
  transition: color 200ms ease;
}

.footer-link:hover {
  color: oklch(0.85 0.05 90);
}

.footer-link svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform 200ms ease, opacity 200ms ease;
}

.footer-link:hover svg {
  opacity: 1;
  transform: translateX(3px);
}

.footer-newsletter {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid oklch(1 0 0 / 35%);
  padding-bottom: 0.75rem;
}

.footer-newsletter input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 0.9rem;
  color: var(--white);
}

.footer-newsletter input::placeholder {
  color: oklch(1 0 0 / 50%);
}

.footer-newsletter button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: var(--white);
  color: var(--footer-bg);
  transition: opacity 200ms ease;
}

.footer-newsletter button:hover {
  opacity: 0.85;
}

.footer-newsletter button svg {
  width: 1rem;
  height: 1rem;
}

.footer-newsletter-note {
  margin-top: 0.85rem;
  font-size: 0.75rem;
  color: oklch(1 0 0 / 50%);
}

.footer-newsletter-note a {
  color: oklch(1 0 0 / 75%);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-newsletter-note a:hover {
  color: var(--white);
}

.footer-bottom {
  padding-block: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 0.75rem;
  color: oklch(1 0 0 / 45%);
  text-align: center;
}

.footer-bottom__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 9999px;
  border: 1px solid oklch(1 0 0 / 30%);
  color: oklch(1 0 0 / 65%);
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
  flex-shrink: 0;
}

.footer-bottom__social:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--footer-bg);
}

.footer-bottom__social svg {
  width: 0.85rem;
  height: 0.85rem;
}


@media (min-width: 900px) {
  .footer-columns {
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: 3rem;
  }
}

/* ============================================================
   Employee Engagement — Stats Strip  (Figma spec)
   Container: max-width 1176px · pt 56px · pb 20px · gap 24px
   Card:      276×161px · br 8px · border 1px · padding 32px · gap 12px
   ============================================================ */

.engage-stats-section {
  width: 100%;
  min-height: 486px;
  background: #F3EBDF;
}

.engage-stats {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  width: 100%;
  max-width: 1536px;
  margin: 0 auto;
  min-height: 486px;
  box-sizing: border-box;
  padding-block: 20px;
  padding-inline: clamp(1rem, 4vw, 24px);
  gap: 24px;
}

.engage-stat-card {
  background: var(--color-primary);
  border-radius: 8px;
  border: 1px solid var(--color-primary);
  box-sizing: border-box;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 16px;
  /* grow to fill the row, but drop to a 2-up grid once 4 can't sit at ≥260px */
  flex: 1 1 260px;
  min-height: 191px;
}

.engage-stat-card__icon {
  width: auto;
  height: 48px;
  /* Safe default for icons */
  object-fit: contain;
}

.engage-stat-card__value {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.03em;
}

.engage-stat-card__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: oklch(1 0 0 / 70%);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* ── Stats strip — responsive (≤768 tablet, ≤480 phone) ─────────────
   Additive only: desktop (>768px) rendering is unchanged. Desktop
   centres 4 cards in a fixed 486px-tall row; below 768px that row
   cannot hold 4 cards without crushing them, so they wrap to a 2×2
   grid (then a single column on small phones) and the fixed height
   relaxes to fit the content. No colour/typography/desktop changes. */
@media (max-width: 768px) {
  .engage-stats-section {
    min-height: 0;
  }

  .engage-stats {
    align-items: stretch;
    min-height: 0;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    gap: 16px;
  }

  .engage-stat-card {
    flex: 1 1 calc(50% - 8px);
    padding: 24px;
  }
}

@media (max-width: 480px) {
  .engage-stats {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
  }

  .engage-stat-card {
    flex: 1 1 calc(50% - 6px);
    width: auto;
    padding: 16px;
    height: 232px;
  }
}

/* ================================================================
   Mobile section sizing
   Fixed / minimum heights keep the mobile rhythm consistent.
   Scroll-snap was removed — `proximity` snapping made scrolling jerky.
   ================================================================ */
@media (max-width: 768px) {

  .hero {
    height: 500px;
  }

  /* About grows with its content so the photo isn't cropped */
  .about-section {
    min-height: 510px;
  }

  /* Main sections — a consistent minimum height */
  .env-section,
  .engage-stats-section,
  #certifications,
  #contact.section {
    min-height: 500px;
  }

  /* These two stay natural height */
  .section--products,
  .engage-section {
    min-height: 0;
  }

  .site-footer {
    min-height: auto;
  }

}