/* ==========================================================================
   EGELİF Textile — main stylesheet
   Structure: 1 Tokens · 2 Base · 3 Components · 4 Header / footer
              5 Home sections · 6 Motion · 7 Responsive
   Colour use: two calm grounds only — paper and flax — alternating section by
   section with no gradients. Navy (from the logo) is kept for type and for a
   few accents (rib panel, fabric panel, closing band); bronze marks details.
   Imagery carries the colour.
   ========================================================================== */

/* 1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Palette derived from logo.png: navy lettering + cotton-boll bronze */
  --ink: #071c2e;
  --ink-2: #0e2a43;
  --ink-soft: #1d3349;
  --text: #1c2a37;
  --stone: #455463;
  --bronze: #b47a2c;
  --bronze-deep: #8f5f22;
  --bronze-soft: #d9bc92;
  --mist: #e9edf1;
  --flax: #f4efe7;
  --paper: #fbfaf7;
  --line: rgba(7, 28, 46, 0.14);
  --line-light: rgba(255, 255, 255, 0.18);

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;

  --header-h: 84px;
  --gutter: max(16px, calc((100vw - 1320px) / 2 + 12px)); /* matches .container-xl edge */
  --section-pad: clamp(3.5rem, 2rem + 4.5vw, 4rem);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow: 0 30px 60px -30px rgba(7, 28, 46, 0.45);
}

/* 2. Base
   -------------------------------------------------------------------------- */
html { scroll-padding-top: var(--header-h); }
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "lnum" 1; /* full-height figures in the Playfair Display headings */
  overflow-x: hidden;
  overflow-x: clip; /* stops sideways panning on phones without breaking sticky/fixed elements */
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }
p { max-width: 62ch; }

h1, h2, h3, h4 {
  color: var(--ink);
  font-family: var(--font-display);
  font-optical-sizing: auto;
}

::selection { background: var(--bronze-soft); color: var(--ink); }

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 2000;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* Display type shared by the big section titles */
.design__title,
.process__title,
.fabric__title,
.production__title,
.quality__title,
.closing__title,
.cat-slide__title {
  font-weight: 650;
  font-variation-settings: "wdth" 88;
  letter-spacing: -0.03em;
  line-height: 0.98;
}

.kicker { margin-bottom: 1rem; font-weight: 700; font-size: 0.95rem; color: var(--bronze-deep); }
.kicker--light { color: var(--bronze-soft); }

/* Split headline words (built by main.js). Padding keeps Turkish
   diacritics (İ, Ş, Ğ) from being clipped by the mask. */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.12em 0 0.1em; margin: -0.12em 0 -0.1em; }
.w__i { display: inline-block; will-change: transform; }

/* Image frames: parallax images are taller than their frame */
.frame { position: relative; overflow: hidden; border-radius: 4px; background: var(--mist); }
.frame > img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; }
.frame figcaption {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 1;
  padding: 0.4rem 0.75rem;
  background: rgba(252, 252, 251, 0.92);
  border-radius: 2px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  max-width: calc(100% - 2rem);
}

/* 3. Components
   -------------------------------------------------------------------------- */

/* Buttons — the hover draws an inner "stitch" line, like a top-stitched edge */
.btn-egelif {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0.85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.btn-egelif::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed currentColor;
  border-radius: 1px;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  pointer-events: none;
}
.btn-egelif:hover::after,
.btn-egelif:focus-visible::after { opacity: 0.55; transform: scale(1); }

.btn-egelif--ink { background: var(--ink); color: #fff; }
.btn-egelif--ink:hover { background: var(--ink-soft); color: #fff; }
.btn-egelif--line { border-color: var(--ink); color: var(--ink); }
.btn-egelif--line:hover { background: var(--ink); color: #fff; }
.btn-egelif--light { background: var(--paper); color: var(--ink); }
.btn-egelif--light:hover { background: var(--bronze-soft); color: var(--ink); }
.btn-egelif--ghost { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.btn-egelif--ghost:hover { background: #fff; color: var(--ink); }

/* Text link with a dashed seam underline */
.text-link {
  display: inline-block;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline dashed var(--bronze);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: color 0.25s var(--ease), text-underline-offset 0.25s var(--ease);
}
.text-link:hover { color: var(--bronze-deep); text-underline-offset: 9px; }

/* Knit lens (created by main.js on .js-lens hover) */
.js-lens { position: relative; display: block; overflow: hidden; }
.knit-lens {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 150px;
  height: 150px;
  border: 2px solid #fff;
  border-radius: 50%;
  background-repeat: no-repeat;
  box-shadow: 0 10px 30px -8px rgba(7, 28, 46, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease);
}
.knit-lens.is-on { opacity: 1; }

/* Fabric swatch patterns */
.swatch--jersey {
  background-color: #e9e2d6;
  background-image:
    repeating-linear-gradient(60deg, transparent 0 4px, rgba(7, 28, 46, 0.18) 4px 5px),
    repeating-linear-gradient(-60deg, transparent 0 4px, rgba(7, 28, 46, 0.18) 4px 5px);
}
.swatch--rib { background-color: #0b2740; background-image: repeating-linear-gradient(90deg, #0b2740 0 4px, #2a4865 4px 6px, #0b2740 6px 8px); }
.swatch--interlock {
  background-color: var(--mist);
  background-image: radial-gradient(rgba(7, 28, 46, 0.38) 1px, transparent 1.4px);
  background-size: 5px 5px;
}
.swatch--pique {
  background-color: #f6f3ee;
  background-image: radial-gradient(circle at 50% 50%, transparent 2px, rgba(7, 28, 46, 0.3) 2.5px, transparent 3.2px);
  background-size: 8px 7px;
}
.swatch--terry {
  background-color: #c9d3dd;
  background-image: radial-gradient(circle, transparent 1.5px, rgba(7, 28, 46, 0.32) 2px, transparent 2.6px);
  background-size: 6px 6px;
}
.swatch--jacquard {
  background-color: var(--bronze-soft);
  background-image:
    linear-gradient(45deg, rgba(7, 28, 46, 0.35) 25%, transparent 25% 75%, rgba(7, 28, 46, 0.35) 75%),
    linear-gradient(45deg, rgba(7, 28, 46, 0.35) 25%, transparent 25% 75%, rgba(7, 28, 46, 0.35) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
}

/* 4. Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1030;
  height: var(--header-h);
  background: rgba(252, 252, 251, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: height 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), background-color 0.35s var(--ease);
}
/* Always visible; after scrolling it gets slightly shorter with a soft shadow.
   The header is fixed, so its height change never moves the page content. */
.site-header.is-scrolled {
  --header-h: 70px;
  background: rgba(252, 252, 251, 0.94);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -22px rgba(7, 28, 46, 0.45);
}

.site-header__inner {
  position: relative; /* anchors the mega panels */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 100%;
}
.site-header__brand img { width: auto; height: 52px; transition: height 0.35s var(--ease); }
.site-header.is-scrolled .site-header__brand img { height: 42px; }

.site-header__actions { display: flex; align-items: center; gap: 0.75rem; }
.site-header__actions .btn-egelif { min-height: 44px; padding: 0.55rem 1.2rem; font-size: 0.95rem; }

/* Language switch */
.lang-switch { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 2px; }
.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 34px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--stone);
  text-decoration: none;
  border-radius: 1px;
  transition: background-color 0.25s, color 0.25s;
}
.lang-switch a:hover { color: var(--ink); }
.lang-switch a.is-active { background: var(--ink); color: #fff; }

.main-nav { height: 100%; }
.main-nav__list {
  display: flex;
  align-items: stretch;
  gap: clamp(1rem, 0.2rem + 1.3vw, 1.9rem);
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Items fill the header height so the pointer never "falls" between link and panel */
.main-nav__item { position: relative; display: flex; align-items: center; }
/* every dropdown (sub-menu or mega panel) is anchored to its own menu item */

.main-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 0;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
/* Stitch underline: a dashed line that sews itself in on hover / active */
.main-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.35rem;
  height: 1.5px;
  background: repeating-linear-gradient(90deg, var(--bronze) 0 5px, transparent 5px 9px);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.main-nav__link:hover::after,
.main-nav__item:focus-within > .main-nav__link::after,
.main-nav__link.is-active::after { transform: scaleX(1); }

.has-sub > .main-nav__link::before {
  content: "";
  order: 2;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
}

.sub-menu,
.mega {
  position: absolute;
  top: 100%;
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.main-nav__item:hover > .sub-menu,
.main-nav__item:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.main-nav__item:hover > .mega,
.main-nav__item:focus-within > .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

.sub-menu { left: -1.25rem; min-width: 260px; width: max-content; max-width: min(420px, 90vw); padding: 0.75rem; list-style: none; }
.sub-menu a { white-space: nowrap; }
.sub-menu a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 2px;
  font-size: 0.975rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  transition: background-color 0.2s, padding-left 0.25s var(--ease);
}
.sub-menu a:hover { background: var(--mist); padding-left: 1rem; }

/* Collections mega panel: centred under its own menu item. Each category
   (Menswear / Womenswear) with its season links, beside one image that
   cross-fades to the hovered / focused category (main.js toggles .is-active). */
.mega {
  left: 50%;
  transform: translate(-50%, 8px);
  width: min(500px, 92vw);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 1.5rem;
  padding: 1.5rem;
}
.mega__links { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.mega ul { margin: 0; padding: 0; list-style: none; }
.mega li { padding: 0.6rem 0 0.8rem; border-bottom: 1px solid var(--line); }
.mega li:last-child { border-bottom: 0; }
.mega li > a {
  display: block;
  padding: 0.2rem 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s, padding-left 0.3s var(--ease);
}
.mega li > a:hover,
.mega li > a.is-active { color: var(--bronze); padding-left: 0.5rem; }
.mega__seasons { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.3rem; }
.mega__seasons a { font-size: 0.85rem; font-weight: 600; color: var(--stone); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; }
.mega__seasons a:hover { color: var(--bronze-deep); border-bottom-color: var(--bronze); }
.mega__visual { position: relative; height: 240px; overflow: hidden; border-radius: 999px 999px 4px 4px; background: var(--mist); }
.mega__media { display: block; height: 100%; }
.mega__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: opacity 0.18s var(--ease), transform 0.9s var(--ease); }
.mega__media img.is-swapping { opacity: 0; transform: scale(1.04); }
.mega:hover .mega__media img:not(.is-swapping) { transform: scale(1.03); }

/* Burger */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: transparent;
}
.nav-toggle span { display: block; height: 1.5px; background: var(--ink); }
.nav-toggle span:last-child { width: 60%; margin-left: auto; }

/* Mobile offcanvas */
.mobile-nav { --bs-offcanvas-width: min(420px, 100vw); background: var(--paper); }
.mobile-nav__logo { height: 44px; width: auto; }
.mobile-nav__list { margin: 0; padding: 0; list-style: none; }
.mobile-nav__list > li { border-bottom: 1px solid var(--line); }
.mobile-nav__list > li > a,
.mobile-nav__row > a {
  display: block;
  padding: 0.95rem 0;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
}
.mobile-nav__list a.is-active { color: var(--bronze); }
.mobile-nav__row { display: flex; align-items: center; justify-content: space-between; }
.mobile-nav__expand { position: relative; width: 44px; height: 44px; border: 0; background: transparent; }
.mobile-nav__expand::before,
.mobile-nav__expand::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease);
}
.mobile-nav__expand::after { transform: translate(-50%, -50%) rotate(90deg); }
.mobile-nav__expand[aria-expanded="true"]::after { transform: translate(-50%, -50%) rotate(0); }
.mobile-nav__sub { display: none; margin: 0 0 1rem; padding: 0 0 0 1rem; list-style: none; border-left: 1px dashed var(--bronze); }
.mobile-nav__sub a { display: block; padding: 0.45rem 0; color: var(--stone); font-weight: 500; text-decoration: none; }
.mobile-nav__seasons { display: flex; flex-wrap: wrap; gap: 0 1rem; margin: -0.2rem 0 0.35rem; padding: 0; list-style: none; }
.mobile-nav__seasons a { padding: 0.2rem 0; font-size: 0.85em; font-weight: 600; color: var(--bronze-deep); }

/* Footer — light ground so the (unaltered) navy logo stays legible */
.site-footer {
  padding: clamp(3.5rem, 2.5rem + 3vw, 4rem) 0 2rem;
  background: var(--flax);
  border-top: 1px solid var(--line);
  font-size: 0.975rem;
}
.site-footer__logo { width: 190px; height: auto; margin-bottom: 1.25rem; }
.site-footer__motto { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.02em; color: var(--ink); }
.site-footer__heading { margin-bottom: 1rem; font-family: var(--font-body); font-size: 0.975rem; font-weight: 700; color: var(--bronze-deep); }
.site-footer__links { margin: 0; padding: 0; list-style: none; }
.site-footer__links li + li { margin-top: 0.4rem; }
.site-footer a { text-decoration: none; transition: color 0.2s; }
.site-footer a:hover { color: var(--bronze-deep); }
.site-footer__address { margin-bottom: 1rem; font-style: normal; }
.site-footer__facilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; margin: 0; }
.site-footer__facilities dt { font-weight: 600; }
.site-footer__facilities dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 768px) and (max-width: 991.98px) { .site-footer__facilities { grid-template-columns: 1fr; } }
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px dashed rgba(7, 28, 46, 0.25);
  font-size: 0.875rem;
  color: var(--stone);
}
.site-footer__legal p { margin: 0; max-width: none; }

/* 5. Home sections
   -------------------------------------------------------------------------- */

/* ---- Hero slider (paper) ---- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: max(640px, 100svh);
  padding-top: var(--header-h);
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}
.hero__slides { position: relative; flex: 1; display: grid; }
.hero-slide { grid-area: 1 / 1; visibility: hidden; }
.hero-slide.is-active { visibility: visible; }

/* Every slide: a navy text panel and ONE image. The image column takes the
   image's own ratio (--ratio on .cat-slide, width / height), so the photo is
   shown whole at full slide height and never stretched. New slides only need
   the same markup and their own --ratio. */
.cat-slide {
  --photo-w: calc((max(640px, 100svh) - var(--header-h)) * var(--ratio, 680 / 980));
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(var(--photo-w), 52vw);
  min-height: 100%;
}
.cat-slide__panel { position: relative; display: grid; grid-template-rows: 1fr auto; min-width: 0; overflow: hidden; color: rgba(255, 255, 255, 0.85); }

/* Fixed slider background: the rib-fabric photo under a navy gradient, behind
   every slide's text panel. It is outside the slides, so it never animates. */
.hero__bg { position: absolute; inset: var(--header-h) 0 0 0; z-index: 0; overflow: hidden; background: var(--ink); }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 80%; }
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 28, 46, 0.97) 0%, rgba(7, 28, 46, 0.93) 48%, rgba(7, 28, 46, 0.6) 76%, rgba(7, 28, 46, 0.2) 100%),
    linear-gradient(90deg, rgba(7, 28, 46, 0.35) 0%, rgba(7, 28, 46, 0) 60%);
}
.hero__slides { z-index: 1; }
.cat-slide__copy,
.cat-slide__icons { position: relative; z-index: 1; }
.cat-slide__copy { align-self: center; padding: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(1.5rem, 1rem + 3vw, 4.5rem) 1.5rem var(--gutter); }
.cat-slide__eyebrow { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.4rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; color: var(--bronze-soft); }
.cat-slide__eyebrow::before { content: ""; width: 44px; height: 1.5px; background: var(--bronze); }
.cat-slide__eyebrow span:first-child { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.08em; color: #fff; }
.cat-slide__title { margin-bottom: 1.4rem; font-size: clamp(2.4rem, 0.96rem + 4vw, 5.28rem); color: #fff; text-wrap: balance; }
.cat-slide__sub {
  margin-bottom: 0.9rem;
  max-width: 30ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.6rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: rgba(255, 255, 255, 0.92);
}
.cat-slide__motto { margin-bottom: 1.9rem; font-style: italic; font-size: 1.1rem; color: var(--bronze-soft); }

/* icons sit as light "labels" over the fabric, not as a solid bar */
.cat-slide__icons { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; padding: 0 var(--gutter) clamp(1.25rem, 1rem + 1.5vw, 2.25rem); list-style: none; }
.cat-slide__icons li {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 1rem 0.35rem 0.35rem;
  background: rgba(7, 28, 46, 0.5);
  border: 1px solid rgba(217, 188, 146, 0.35);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
}
.cat-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--bronze); border-radius: 50%; }
.cat-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--bronze-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cat-slide__photo { position: relative; height: 100%; overflow: hidden; background: var(--ink-soft); }
.cat-slide__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* a soft seam where the panel meets the photo */
.cat-slide__photo::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: 1; width: 14%; background: linear-gradient(90deg, rgba(7, 28, 46, 0.45), rgba(7, 28, 46, 0)); pointer-events: none; }
.hero-slide__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Slider controls sit on a paper pill, top-right of the slide on desktop
   (clear of the icon labels at the bottom and of the floating buttons) */
.hero__ui {
  position: absolute;
  right: calc(var(--gutter) + 64px);
  top: calc(var(--header-h) + 1.25rem);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.35rem 0.4rem 0.35rem 1.1rem;
  background: rgba(251, 250, 247, 0.95);
  border-radius: 999px;
  box-shadow: 0 12px 30px -18px rgba(7, 28, 46, 0.55);
}
.hero__ui .hero__arrow { width: 40px; height: 40px; border-color: transparent; }
.hero__counter { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--stone); font-variant-numeric: tabular-nums; }
.hero__current { color: var(--ink); }
.hero__dots { display: flex; gap: 0.5rem; }
.hero__dot { width: 64px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.hero__dot span { position: relative; display: block; height: 2px; background: var(--line); overflow: hidden; }
/* the "thread" fill shows the time left on the active slide */
.hero__dot span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bronze);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
}
.hero__arrows { display: flex; gap: 0.5rem; margin-left: auto; }
.hero__arrow {
  position: relative;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  transition: background-color 0.3s, border-color 0.3s;
}
.hero__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-top: 1.5px solid var(--ink);
  border-right: 1.5px solid var(--ink);
  transform: translate(-65%, -50%) rotate(45deg);
}
.hero__arrow--prev::before { transform: translate(-35%, -50%) rotate(-135deg); }
.hero__arrow:hover { background: var(--flax); border-color: var(--ink); }

/* ---- Four strengths (catalogue page 1), joined to the hero ---- */
.strengths { background: var(--paper); padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.strengths__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: clamp(1.75rem, 1rem + 2vw, 2.75rem) 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.strength { padding: 0 clamp(1rem, 0.4rem + 1.6vw, 2.25rem); }
.strength:first-child { padding-left: 0; }
.strength:last-child { padding-right: 0; }
.strength + .strength { border-left: 1px solid var(--line); }
/* Line icon in a bronze ring, as in the catalogue */
.strength__icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 1.25rem;
  border: 1.5px solid var(--bronze);
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px rgba(180, 122, 44, 0.25);
  transition: transform 0.5s var(--ease), background-color 0.4s var(--ease);
}
.strength__icon svg { width: 46px; height: 46px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.strength:hover .strength__icon { transform: rotate(-8deg) scale(1.06); background: var(--flax); }
.strength__title {
  margin-bottom: 0.5rem;
  font-weight: 650;
  font-size: 1.2rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.strength p { margin: 0; font-size: 0.975rem; color: var(--stone); }

/* ---- About: full-bleed production photo, copy on a soft paper overlay ---- */
.about { position: relative; overflow: hidden; padding: var(--section-pad) 0 0; background: var(--ink); }
.about__bg { position: absolute; inset: 0; overflow: hidden; }
.about__bg img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; }
.about__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(251, 250, 247, 0.97) 0%, rgba(251, 250, 247, 0.93) 40%, rgba(251, 250, 247, 0.55) 62%, rgba(251, 250, 247, 0.05) 85%);
}
.about__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: clamp(2rem, 1rem + 5vw, 6rem); }
.about__copy { max-width: 600px; }
.about__title { margin-bottom: 1rem; font-weight: 650; font-size: clamp(2.08rem, 1.12rem + 3.52vw, 4.48rem); font-variation-settings: "wdth" 85; letter-spacing: -0.035em; line-height: 0.95; }
.about__sub { margin-bottom: 1.5rem; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); letter-spacing: -0.015em; color: var(--bronze-deep); }
.about__lead { font-size: 1.15rem; color: var(--text); }
.about__copy > p { margin-bottom: 1rem; }
.about__copy .btn-egelif { margin-top: 0.75rem; }
.about__aside { position: relative; justify-self: end; width: min(100%, 420px); }
.about__card { overflow: hidden; border: 6px solid var(--paper); border-radius: 4px; box-shadow: var(--shadow); }
.about__card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.about__badge {
    position: absolute;
    left: -2.5rem;
    bottom: -1.75rem;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0;
    padding: 0.9rem 1.3rem;
    background: var(--ink);
    border-radius: 4px;
    box-shadow: var(--shadow);
    color: rgba(255, 255, 255, 0.85);
    align-items: center;
}
.about__badge strong { font-family: var(--font-display); font-weight: 750; font-size: 2.6rem; line-height: 1; letter-spacing: -0.03em; color: var(--bronze-soft); }
.about__badge span { max-width: 11ch; font-size: 0.85rem; line-height: 1.25; }
.about__caps-wrap { position: relative; z-index: 1; margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.about__caps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 1.25rem 0;
  list-style: none;
  background: rgba(251, 250, 247, 0.9);
  border-radius: 6px 6px 0 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.about__caps li { display: flex; align-items: center; gap: 0.75rem; padding: 0.25rem 1.5rem; font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.about__caps li + li { border-left: 1px solid var(--line); }
.about__caps .cat-icon svg { stroke: var(--ink); }

/* The oversized, knit-striped "25" (home figures + corporate page) */
.experience__figure { display: flex; align-items: flex-end; gap: 1rem; }
.experience__number {
  display: inline-block;
  min-width: 2ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(6.75rem, 2.25rem + 16.5vw, 16.5rem);
  font-variation-settings: "wdth" 75;
  /* the striped fill is clipped to the text: keep the whole glyph inside the painted box */
  padding: 0.08em 0.1em 0.06em 0.02em;
  margin: -0.08em -0.1em -0.06em -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 0.78;
  letter-spacing: -0.015em;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(180, 122, 44, 0) 45%, rgba(180, 122, 44, 0.55) 100%),
    repeating-linear-gradient(90deg, var(--ink) 0 7px, #24435f 7px 10px, var(--ink) 10px 12px, var(--bronze) 12px 13px);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.experience__unit {
  padding-bottom: 0.4rem;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: clamp(1.3rem, 1rem + 1vw, 2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--bronze-deep);
}

/* ---- EGELİF in numbers: navy board, mixed alignments, hairlines and a stitched ring ---- */
.figures { position: relative; overflow: hidden; padding: var(--section-pad) 0; background: var(--ink); color: rgba(255, 255, 255, 0.78); }
.figures__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.figures__title { margin: 0; font-family: var(--font-body); font-size: 0.975rem; font-weight: 700; color: var(--bronze-soft); }
.figures__motto { margin: 0; font-style: italic; color: rgba(255, 255, 255, 0.6); }
.figures__board {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "h h h h h h h a a a a a"
    "h h h h h h h b b b b b"
    "c c c c d d d d e e e e";
}
.fig { position: relative; padding: clamp(1.25rem, 1rem + 1.2vw, 2rem) clamp(1rem, 0.5rem + 1.5vw, 2rem); }
/* hairlines are drawn by ::before and sweep in when the board enters view */
.fig::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(217, 188, 146, 0.35); transform-origin: left; transition: transform 1.2s var(--ease); }
.fig--hero { grid-area: h; display: flex; flex-direction: column; justify-content: flex-end; padding-left: 0; border-right: 1px solid rgba(217, 188, 146, 0.35); }
.fig--hero::before { display: none; }
.fig--a { grid-area: a; text-align: right; }
.fig--a::before { display: none; }
.fig--b { grid-area: b; text-align: right; }
.fig--c { grid-area: c; padding-left: 0; }
.fig--d { grid-area: d; text-align: center; border-left: 1px solid rgba(217, 188, 146, 0.35); border-right: 1px solid rgba(217, 188, 146, 0.35); }
.fig--e { grid-area: e; text-align: right; padding-right: 0; }
.fig--a, .fig--b { padding-right: 0; }

.fig__ring {
  position: absolute;
  left: 12%;
  top: 50%;
  width: clamp(240px, 26vw, 420px);
  aspect-ratio: 1;
  border: 1.5px dashed rgba(217, 188, 146, 0.4);
  border-radius: 50%;
  transform: translateY(-55%);
  animation: spin 60s linear infinite;
  pointer-events: none;
}
.fig__big { position: relative; display: flex; align-items: flex-start; margin: 0; line-height: 0.8; }
.figures .experience__number {
  font-size: clamp(6.5rem, 2.2rem + 13vw, 14rem);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 50%),
    repeating-linear-gradient(90deg, var(--bronze-soft) 0 7px, var(--bronze) 7px 10px, var(--bronze-soft) 10px 12px, #fff 12px 13px);
  -webkit-background-clip: text;
  background-clip: text;
}
.fig__plus { margin-left: 0.3rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 1.5rem + 5vw, 6rem); line-height: 1; color: var(--bronze); }
.fig__label { margin: 0.75rem 0 0; font-size: 0.95rem; color: rgba(255, 255, 255, 0.68); }
.fig__label--hero { position: relative; max-width: 34ch; margin-top: 1.5rem; font-size: 1.05rem; }
.fig__label--hero strong { display: block; margin-bottom: 0.35rem; font-family: var(--font-display); font-weight: 650; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); letter-spacing: -0.02em; color: #fff; }
.fig__num {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 1.6rem + 3vw, 4.8rem);
  font-variation-settings: "wdth" 82;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #fff;
  transition: color 0.3s;
}
.fig__num small { font-size: 0.38em; font-weight: 600; letter-spacing: 0; color: var(--bronze-soft); }
.fig:hover .fig__num { color: var(--bronze-soft); }
.motion .figures__board:not(.is-in) .fig::before { transform: scaleX(0); }

/* ---- Product design (flax): one image, one clear story ---- */
.design { padding: var(--section-pad) 0; background: var(--flax); }
.design__layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(2rem, 1rem + 5vw, 6rem); }
.design__photo { aspect-ratio: 4 / 5; box-shadow: var(--shadow); }
.design__title { margin: 0 0 1.25rem; font-size: clamp(2.08rem, 1.12rem + 3.52vw, 4.48rem); }
.design__lead {
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 1rem + 0.7vw, 1.6rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.design__points { margin: 2rem 0 2.25rem; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.design__points li { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 0.25rem 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.design__points h3 { margin: 0; font-weight: 650; font-size: 1.2rem; letter-spacing: -0.015em; }
.design__points p { margin: 0; font-size: 0.975rem; color: var(--stone); }

/* ---- Process (paper): four-step grid, every element in normal flow ---- */
.process { padding: var(--section-pad) 0; background: var(--paper); }
.process__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 3rem;
  margin-bottom: clamp(2rem, 1rem + 2.5vw, 3rem);
}
.process__title { margin: 0; font-size: clamp(1.92rem, 1.12rem + 2.88vw, 4rem); }
.process__head p { margin: 0; color: var(--stone); max-width: 44ch; }
.process__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 0.5rem + 2vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.step { display: flex; flex-direction: column; min-width: 0; counter-increment: step; }
.step__media { margin-bottom: 1.25rem; overflow: hidden; border-radius: 4px; }
.step__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: scale 0.9s var(--ease); }
.step:hover .step__media img { scale: 1.05; }
.step__body::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 0.9rem;
  padding-bottom: 0.6rem;
  font-family: var(--font-display);
  font-weight: 750;
  font-size: clamp(2rem, 1.5rem + 1.4vw, 3.2rem);
  font-variation-settings: "wdth" 78;
  line-height: 0.9;
  color: var(--bronze);
  /* the seam that links the steps */
  background: repeating-linear-gradient(90deg, var(--bronze) 0 6px, transparent 6px 11px) left bottom / 100% 1px no-repeat;
}
.step__title { margin-bottom: 0.5rem; font-weight: 650; font-size: 1.35rem; letter-spacing: -0.02em; }
.step__body p { margin: 0; font-size: 0.975rem; color: var(--stone); }

/* ---- Picks from the collection: Swiper slider (2 per view on phones, up to 4 on desktop) ---- */
.picks { background: var(--paper); }
.lookbook { padding: var(--section-pad) 0; }
.lookbook__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.lookbook__title { margin: 0 0 0.5rem; font-weight: 650; font-size: clamp(1.76rem, 1.12rem + 2.4vw, 3.52rem); font-variation-settings: "wdth" 88; letter-spacing: -0.03em; line-height: 0.98; }
.lookbook__head p { margin: 0; color: var(--stone); }
.lookbook__nav { display: flex; gap: 0.5rem; }
.lookbook__nav .hero__arrow.swiper-button-disabled { opacity: 0.3; cursor: default; background: transparent; border-color: var(--line); }
.picks__swiper { overflow: hidden; }
.lookbook__track { margin: 0; padding: 0; list-style: none; }
.look { height: auto; }
.look a { display: block; text-decoration: none; }
.look__media { aspect-ratio: 4 / 5; border-radius: 4px; background: var(--mist); }
.look__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; user-select: none; }
.look__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.6rem; margin-top: 0.75rem; color: var(--stone); font-size: 0.925rem; }
.look__meta strong { font-family: var(--font-display); font-weight: 650; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--ink); }
.look a:hover .look__meta strong { color: var(--bronze-deep); }
.picks__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 1.5rem; }
.picks__links { display: flex; gap: 0.5rem 0.75rem; }
/* bullets: thin bronze "stitches"; Swiper's dynamic bullets keep the row short however many products */
.picks__pagination { position: relative; display: flex; align-items: center; gap: 6px; min-height: 12px; }
.picks__pagination .swiper-pagination-bullet { width: 18px; height: 3px; margin: 0 !important; border-radius: 2px; background: var(--line); opacity: 1; transition: width 0.3s var(--ease), background-color 0.3s; }
.picks__pagination .swiper-pagination-bullet-active { width: 36px; background: var(--bronze); }
.picks__pagination.swiper-pagination-bullets-dynamic { overflow: hidden; }
/* without Swiper the row still scrolls natively */
.is-static .lookbook__track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; }
.is-static .look { flex: 0 0 calc(50% - 0.5rem); scroll-snap-align: start; }
@media (min-width: 768px) { .is-static .look { flex-basis: calc(33.333% - 0.7rem); } }
/* ---- Fabric: full-bleed band + overlapping panel + swatches ---- */
.fabric { padding-bottom: var(--section-pad); background: var(--flax); }
.fabric__band { position: relative; height: clamp(440px, 76vh, 720px); overflow: hidden; }
.fabric__band > img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; }
/* a single scrim keeps the title legible over the photo */
.fabric__band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 28, 46, 0.78) 0%, rgba(7, 28, 46, 0.2) 60%, rgba(7, 28, 46, 0) 85%);
}
.fabric__band-copy { position: absolute; left: 0; right: 0; bottom: clamp(7rem, 5rem + 5vw, 10rem); z-index: 1; }
.fabric__title { margin: 0; font-size: clamp(2.08rem, 1.04rem + 3.84vw, 4.96rem); max-width: 12ch; color: #fff; }

.fabric__panel {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: -5.5rem;
  background: #fff;
  border-radius: 6px;
  box-shadow: var(--shadow);
}
.fabric__panel > * { padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.fabric__panel > * + * { border-left: 1px dashed var(--line); }
.fabric__intro { background: var(--ink); color: rgba(255, 255, 255, 0.8); border-radius: 6px 0 0 6px; }
.fabric__intro h3 { margin-bottom: 0.9rem; font-weight: 650; font-size: 1.75rem; letter-spacing: -0.025em; color: #fff; }
.fabric__cap h4 { margin-bottom: 0.75rem; font-weight: 650; font-size: 1.5rem; letter-spacing: -0.02em; }
.fabric__cap p { color: var(--stone); }

.swatch-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2rem 1.25rem;
  margin: clamp(3rem, 2rem + 3vw, 4.5rem) 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.swatch-item h3 { margin: 1rem 0 0.35rem; font-weight: 650; font-size: 1.25rem; letter-spacing: -0.02em; }
.swatch-item p { margin: 0 auto; font-size: 0.925rem; color: var(--stone); max-width: 22ch; }
/* Circular swatches echo the magnified-detail circles in the product photography */
.swatch {
  display: block;
  width: clamp(84px, 6vw + 30px, 120px);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 5px #fff, 0 14px 28px -16px rgba(7, 28, 46, 0.5);
  transition: transform 0.6s var(--ease);
}
.swatch-item:hover .swatch { transform: scale(1.1) rotate(10deg); }
.fabric__materials { margin: 2.5rem auto 0; text-align: center; color: var(--stone); max-width: 80ch; }
.fabric__materials strong { color: var(--ink); }

/* ---- Production gallery (paper) ---- */
.production {
  position: relative;
  padding: var(--section-pad) 0;
  background: var(--paper);
  color: var(--stone);
}
.production__head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: end;
  gap: 1.5rem 3rem;
  margin-bottom: clamp(2rem, 1rem + 2.5vw, 3rem);
}
.production__title { margin: 0; font-size: clamp(2.24rem, 1.12rem + 4vw, 5.28rem); color: var(--ink); }
.production__intro p { margin-bottom: 1.25rem; }
.production__sites { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 0; }
.production__sites dt { font-size: 0.875rem; font-weight: 600; color: var(--bronze-deep); }
.production__sites dd { margin: 0.15rem 0 0; font-family: var(--font-display); font-weight: 650; font-size: 1.25rem; color: var(--ink); }

/* Gallery: one lead image + equal 4:3 tiles in a regular grid (4 cols desktop,
   3 tablet, 2 phone). Every tile opens the Fancybox gallery; a zoom badge shows on hover/focus. */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.5rem, 0.3rem + 0.8vw, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tile { position: relative; overflow: hidden; border-radius: 4px; background: var(--mist); aspect-ratio: 4 / 3; }
.tile--lead { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.tile__open { position: absolute; inset: 0; display: block; color: var(--ink); text-decoration: none; cursor: zoom-in; }
.tile__open img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.1s var(--ease); }
/* zoom badge */
.tile__open::before {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(251, 250, 247, 0.94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071c2e' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center / 20px no-repeat;
  box-shadow: 0 8px 20px -10px rgba(7, 28, 46, 0.6);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.tile__caption {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 1;
  max-width: calc(100% - 1.5rem);
  padding: 0.35rem 0.7rem;
  background: rgba(252, 252, 251, 0.94);
  border-radius: 2px;
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--ink);
}
.tile__open:hover img,
.tile__open:focus-visible img { scale: 1.06; }
.tile__open:hover::before,
.tile__open:focus-visible::before { opacity: 1; transform: scale(1); }
@media (hover: none) { .tile__open::before { opacity: 1; transform: none; width: 34px; height: 34px; background-size: 17px; } }
.production__more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); padding-top: 1.5rem; border-top: 1px solid var(--line); }
.production__more p { margin: 0; }

/* ---- Quality (flax) ---- */
.quality {
  padding: var(--section-pad) 0 calc(var(--section-pad) * 0.6);
  background: var(--flax);
}
.quality__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2rem clamp(2rem, 1rem + 4vw, 5rem); }
.quality__title { margin-bottom: 1.25rem; font-size: clamp(1.76rem, 1.12rem + 2.4vw, 3.36rem); }
.quality__intro p { color: var(--stone); }
.quality__block { padding: 1.4rem 0; border-top: 1px dashed var(--line); }
.quality__block:first-child { border-top: 0; padding-top: 0.4rem; }
.quality__block h3 { font-weight: 650; font-size: 1.45rem; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.quality__block p { margin: 0; color: var(--stone); }

/* Brand experience: boxed wordmarks */
.brands { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); padding-top: 2rem; border-top: 1px solid var(--line); }
.brands__title { margin: 0 0 1.25rem; font-family: var(--font-body); font-size: 0.975rem; font-weight: 700; color: var(--bronze-deep); }
.brand-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.6rem, 0.3rem + 1vw, 1rem);
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
}
.brand-grid:last-child { margin-bottom: 0; }
.brand-box {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  transition: transform 0.45s var(--ease), border-color 0.3s, box-shadow 0.45s var(--ease);
}
/* a bronze thread sews in along the bottom edge on hover */
.brand-box::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--bronze);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.brand-box__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 0.8rem + 1.6vw, 2.3rem);
  font-variation-settings: "wdth" 80;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
  color: var(--ink);
  transition: color 0.3s;
}
.brand-box__country { position: absolute; left: 1rem; bottom: 0.85rem; font-size: 0.8rem; font-weight: 500; color: var(--stone); }
.brand-box:hover { transform: translateY(-4px); border-color: rgba(180, 122, 44, 0.5); box-shadow: var(--shadow); }
.brand-box:hover::after { transform: scaleX(1); }
.brand-box:hover .brand-box__name { color: var(--bronze-deep); }
.brand-grid--end .brand-box { aspect-ratio: 2 / 1; background: var(--paper); }

/* Brand slider: equal 2:1 boxes; the swiper gets a little top/bottom room
   so the hover lift and shadow are not clipped. */
.brands__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin-bottom: 0.75rem; }
.brands__head .brands__title { margin: 0; }
.brands__nav { display: flex; gap: 0.5rem; }
.brands__nav .hero__arrow.swiper-button-disabled { opacity: 0.3; cursor: default; background: transparent; border-color: var(--line); }
.brand-slider__swiper { overflow: hidden; padding: 6px 0 1.25rem; }
.brand-slider__swiper .swiper-slide { height: auto; }
.brand-slider__swiper .brand-box { width: 100%; aspect-ratio: 2 / 1; background: var(--paper); }
.brand-slider__pagination { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 12px; }
.brand-slider__pagination .swiper-pagination-bullet { width: 18px; height: 3px; margin: 0 !important; border-radius: 2px; background: var(--line); opacity: 1; transition: width 0.3s var(--ease), background-color 0.3s; }
.brand-slider__pagination .swiper-pagination-bullet-active { width: 36px; background: var(--bronze); }
/* without Swiper the boxes sit in a plain grid */
.is-static .brand-slider__swiper .swiper-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 768px) { .is-static .brand-slider__swiper .swiper-wrapper { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- Closing: ordering + CTA over a full-bleed image ---- */
.closing { position: relative; overflow: hidden; padding: var(--section-pad) 0; color: #fff; }
.closing__bg { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; }
.closing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    rgba(7, 28, 46, 0.84);
}
.closing__inner { position: relative; z-index: 2; }
.closing__cta { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: end; gap: 2rem 4rem; padding-top: 2.5rem; border-top: 1px solid var(--line-light); }
.closing__title { margin: 0; font-size: clamp(1.84rem, 1.12rem + 2.72vw, 3.84rem); color: #fff; }
.closing__cta p { color: rgba(255, 255, 255, 0.82); font-size: 1.125rem; }
.closing__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* title + text on the left, buttons on the right (bottom-aligned with the text) */
.closing__copy p { margin: 1.25rem 0 0; max-width: 52ch; }
.closing__cta > .closing__actions { justify-content: flex-end; }
@media (min-width: 992px) {
  .closing__cta { grid-template-columns: minmax(0, 1fr) auto;align-items:center; }
  .closing__cta > .closing__actions { flex-wrap: nowrap; }
}

/* 5b. Header extras, inner pages (listing, product detail, corporate)
   -------------------------------------------------------------------------- */

/* E-catalogue link: bronze text + document icon sets it apart from page links */
/* Header E-catalogue button (replaces the former "start a project" button) */
.btn-catalog {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.55rem 1.1rem 0.55rem 0.9rem;
  border-radius: 2px;
  background: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s var(--ease);
}
.btn-catalog__icon { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease); }
.btn-catalog:hover,
.btn-catalog:focus-visible { background: var(--bronze-deep); color: #fff; }
.btn-catalog:hover .btn-catalog__icon { transform: translateY(2px); }
.site-footer__tagline { margin-top: -0.25rem; font-style: italic; color: var(--bronze-deep); }

/* Breadcrumb */
/* Breadcrumb: its own section at the top of every inner page; it carries the
   fixed-header offset, so the section after it starts with normal spacing */
.breadcrumb-bar { padding-top: var(--header-h); background: var(--paper); }
.breadcrumb-bar .crumbs { margin: 0; padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
.breadcrumb-bar + .page-hero { padding-top: clamp(1.75rem, 1rem + 2vw, 3rem); }
.breadcrumb-bar + .product { padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.crumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1.5rem; padding: 0; list-style: none; font-size: 0.9rem; color: var(--stone); }
.crumbs li + li::before { content: "/"; margin-right: 0.4rem; color: #a3adb7; }
.crumbs a { color: var(--stone); text-decoration: none; transition: color 0.2s; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* Page hero (inner pages) */
.page-hero { padding: calc(var(--header-h) + clamp(2rem, 1rem + 3vw, 4rem)) 0 clamp(2.5rem, 1.5rem + 3vw, 4rem); background: var(--paper); }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: clamp(2rem, 1rem + 4vw, 5rem); }
.page-hero__title {
  margin-bottom: 1.25rem;
  font-weight: 650;
  font-size: clamp(2.4rem, 1.12rem + 4.8vw, 6rem);
  font-variation-settings: "wdth" 85;
  letter-spacing: -0.035em;
  line-height: 0.95;
}
.page-hero__lead { font-size: 1.2rem; color: var(--stone); max-width: 46ch; }
.page-hero__motto { margin-top: 1rem; padding-left: 1rem; border-left: 2px solid var(--bronze); font-style: italic; color: var(--bronze-deep); }
.page-hero__facts { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin: 2rem 0 0; }
.page-hero__facts dt { font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; line-height: 1; color: var(--ink); }
.page-hero__facts dd { margin: 0.35rem 0 0; font-size: 0.9rem; color: var(--stone); }
.page-hero__facts div { display: flex; flex-direction: column-reverse; }
.page-hero__media { justify-self: end; width: min(100%, 460px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px 4px 4px; box-shadow: var(--shadow); }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }

/* Product listing */
.catalog-list { padding-bottom: var(--section-pad); background: var(--paper); }
.catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(2rem, 1rem + 2vw, 3rem);
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.filter-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.filter-chip span { font-size: 0.8rem; font-weight: 500; color: var(--stone); }
.filter-chip:hover { border-color: var(--ink); color: var(--ink); }
.filter-chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.filter-chip.is-active span { color: rgba(255, 255, 255, 0.7); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2.5rem, 1.5rem + 2vw, 4rem) clamp(1rem, 0.5rem + 1.5vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.product-grid > li:nth-child(3n + 2) { margin-top: 4rem; } /* editorial stagger */
.product-card a { display: block; color: inherit; text-decoration: none; }
.product-card__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: var(--mist); cursor: zoom-in; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: scale 0.9s var(--ease); }
.product-card a:hover .product-card__media img { scale: 1.05; }
.product-card .knit-lens { width: 120px; height: 120px; }
.product-card__badge {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 1;
  padding: 0.3rem 0.65rem;
  background: rgba(251, 250, 247, 0.94);
  border-radius: 2px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
}
.product-card__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0.2rem 1rem; padding-top: 1rem; }
.product-card__name { margin: 0; font-family: var(--font-display); font-weight: 650; font-size: 1.6rem; letter-spacing: -0.025em; color: var(--ink); transition: color 0.25s; }
.product-card a:hover .product-card__name { color: var(--bronze-deep); }
.product-card__page { font-size: 0.8rem; color: var(--stone); white-space: nowrap; }
.product-card__line { grid-column: 1 / -1; margin: 0; font-size: 0.95rem; color: var(--stone); }
.product-card__swatches { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.6rem 0 0; padding: 0; list-style: none; }

/* Colour dot: --c, plus --c2 for two-tone colourways */
.dot {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(7, 28, 46, 0.2);
}
.dot--two { background: linear-gradient(135deg, var(--c) 50%, var(--c2) 50%); }

.catalog-band { padding: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0; background: var(--flax); }
.catalog-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.catalog-band h2 { margin: 0 0 0.35rem; font-weight: 650; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); letter-spacing: -0.025em; }
.catalog-band p { margin: 0; color: var(--stone); }
.catalog-band__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Product detail */
.product { padding: calc(var(--header-h) + clamp(1.5rem, 1rem + 2vw, 3rem)) 0 var(--section-pad); background: var(--paper); }
.product__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: start; gap: clamp(2rem, 1rem + 4vw, 5rem); }
.product__gallery { display: grid; gap: 1rem; }
.product__main { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: var(--mist); cursor: zoom-in; }
.product__main img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.product__sheet { position: relative; display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.product__sheet img { width: 100%; transition: scale 0.9s var(--ease); }
.product__sheet:hover img { scale: 1.03; }
.product__sheet-label {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  padding: 0.45rem 0.85rem;
  background: var(--ink);
  border-radius: 2px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
}
.product__info { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.product__kicker { margin-bottom: 0.6rem; font-weight: 700; color: var(--bronze-deep); }
.product__title {
  margin-bottom: 1.25rem;
  font-weight: 700;
  font-size: clamp(2.4rem, 1.28rem + 3.6vw, 4.8rem);
  font-variation-settings: "wdth" 85;
  letter-spacing: -0.035em;
  line-height: 0.92;
}
.product__desc { font-size: 1.1rem; color: var(--text); }
.product__tagline { font-style: italic; font-size: 1.1rem; color: var(--bronze-deep); }
.product__h { margin: 2rem 0 0.9rem; font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; color: var(--bronze-deep); }
.spec-table { width: 100%; margin: 1.5rem 0 0; border-collapse: collapse; }
.spec-table th,
.spec-table td { padding: 0.8rem 0; border-top: 1px solid var(--line); vertical-align: top; }
.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: 1px solid var(--line); }
.spec-table th { width: 34%; padding-right: 1rem; font-size: 0.9rem; font-weight: 600; color: var(--stone); text-align: left; }
.spec-table td { color: var(--ink); }
.detail-list { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.detail-list li { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; padding-left: 1rem; border-left: 2px dashed var(--bronze); }
.detail-list strong { color: var(--ink); }
.detail-list span { color: var(--stone); }
.colour-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.colour { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.7rem; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.colour .dot { flex: none; width: 28px; height: 28px; }
.colour b { display: block; font-size: 0.9rem; color: var(--ink); }
.colour small { display: block; margin-top: 0.15rem; font-size: 0.8rem; line-height: 1.35; color: var(--stone); }
.feature-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.feature-chips li { padding: 0.4rem 0.85rem; border-radius: 999px; background: var(--flax); font-size: 0.875rem; color: var(--ink); }
.product__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }
.product__pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.product__pager a { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.product__pager a:last-child { text-align: right; }
.product__pager small { color: var(--stone); }
.product__pager strong { font-family: var(--font-display); font-weight: 650; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--ink); transition: color 0.25s; }
.product__pager a:hover strong { color: var(--bronze-deep); }
.related { padding: var(--section-pad) 0; background: var(--flax); }
.related__title { margin-bottom: 2rem; font-weight: 650; font-size: clamp(1.44rem, 1.04rem + 1.28vw, 2.24rem); letter-spacing: -0.03em; }
.related .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.related .product-grid > li:nth-child(3n + 2) { margin-top: 0; }
.related .product-card__swatches { display: none; }

/* Corporate page */
.profile { padding: var(--section-pad) 0; background: var(--flax); }
.profile__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2rem clamp(2rem, 1rem + 4vw, 5rem); }
.profile__title { margin-bottom: 1.25rem; font-weight: 650; font-size: clamp(1.76rem, 1.12rem + 2.4vw, 3.36rem); letter-spacing: -0.03em; line-height: 1; }
.profile__body p { font-size: 1.1rem; }
.profile__media { margin-top: 2rem; overflow: hidden; border-radius: 4px; }
.profile__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.value { padding: var(--section-pad) 0; background: var(--paper); }
.value__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem clamp(2rem, 1rem + 4vw, 5rem); margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.value__grid h3 { margin-bottom: 0.75rem; font-weight: 650; font-size: 1.75rem; letter-spacing: -0.025em; }
.value__grid p { color: var(--stone); }
.capacity { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); }
.capacity div { padding: 1.5rem 1.25rem 0 0; }
.capacity div + div { padding-left: 1.25rem; border-left: 1px dashed var(--line); }
.capacity dt { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.capacity dd { margin: 0.5rem 0 0; color: var(--stone); }
.section-intro { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: end; gap: 1rem clamp(2rem, 1rem + 4vw, 5rem); margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.section-intro .profile__title { margin: 0; }
.section-intro .page-hero__lead { margin: 0; }
.value .strengths__list { margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.value .strengths__list:last-child { margin-bottom: 0; }
.capacity__title { margin-bottom: 1rem; font-family: var(--font-body); font-size: 0.975rem; font-weight: 700; color: var(--bronze-deep); }
.company { padding: var(--section-pad) 0; background: var(--paper); }
.company__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2rem clamp(2rem, 1rem + 4vw, 5rem); }
.company__title { font-weight: 650; font-size: clamp(1.6rem, 1.12rem + 1.6vw, 2.56rem); letter-spacing: -0.03em; }
.company-table { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); margin: 0; }
.company-table dt,
.company-table dd { margin: 0; padding: 0.85rem 0; border-top: 1px solid var(--line); }
.company-table dt { padding-right: 1rem; font-size: 0.9rem; font-weight: 600; color: var(--stone); }
.company-table dd { color: var(--ink); }
.company-table a { color: var(--ink); }

/* Floating contact + back-to-top buttons (fixed, right edge, visible from load) */
.float-actions {
  position: fixed;
  right: clamp(12px, 1.5vw, 24px);
  bottom: clamp(12px, 2vw, 28px);
  z-index: 1025; /* under the header (1030) and the offcanvas menu (1045) */
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.float-btn {
  --size: 52px;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(251, 250, 247, 0.96);
  color: var(--ink);
  box-shadow: 0 14px 30px -14px rgba(7, 28, 46, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.35s var(--ease), background-color 0.3s, color 0.3s, border-color 0.3s;
}
.float-btn svg { width: 22px; height: 22px; }
.float-btn--wa svg { fill: #1fa855; }
.float-btn--tel svg,
.float-btn--top svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.float-btn:hover,
.float-btn:focus-visible { transform: translateX(-3px); background: var(--ink); border-color: var(--ink); color: #fff; }
.float-btn--wa:hover,
.float-btn--wa:focus-visible { background: #1fa855; border-color: #1fa855; }
.float-btn--wa:hover svg,
.float-btn--wa:focus-visible svg { fill: #fff; }
/* label slides out to the left on hover (pointer devices) */
.float-btn__tip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  padding: 0.4rem 0.75rem;
  background: var(--ink);
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
  opacity: 0;
  transform: translate(6px, -50%);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  pointer-events: none;
}
.float-btn:hover .float-btn__tip,
.float-btn:focus-visible .float-btn__tip { opacity: 1; transform: translate(0, -50%); }

/* Corporate page: Rib-Start signature */
.signature { padding: var(--section-pad) 0; background: var(--paper); }
.signature__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 1rem + 5vw, 6rem); }
.signature__title { margin-bottom: 0.75rem; font-weight: 700; font-size: clamp(2.72rem, 1.28rem + 4.8vw, 6rem); font-variation-settings: "wdth" 85; letter-spacing: -0.035em; line-height: 0.92; }
.signature__title sup { top: -1.4em; font-size: 0.25em; color: var(--bronze); }
.signature__sub { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 1rem + 0.7vw, 1.55rem); line-height: 1.25; letter-spacing: -0.02em; color: var(--bronze-deep); }
.signature__qualities { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0 1.5rem; padding: 0; list-style: none; }
.signature__qualities li { display: grid; justify-items: start; gap: 0.6rem; font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.signature__qualities .cat-icon svg { stroke: var(--ink); }
.signature__media { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 1rem; }
.signature__main { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.signature__detail { overflow: hidden; border-radius: 4px; background: #fff; border: 1px solid var(--line); }
.signature__detail img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.signature__detail figcaption { padding: 0.7rem 0.85rem; font-size: 0.85rem; color: var(--stone); }
.signature__detail strong { display: block; color: var(--ink); }
/* 5c. Production, design and contact pages
   -------------------------------------------------------------------------- */
.page-hero--compact .page-hero__title { max-width: 18ch; font-size: clamp(2.08rem, 1.12rem + 3.52vw, 3.48rem); }

/* Split section: photo + copy, with a row of info columns below */
.split { padding: var(--section-pad) 0; background: var(--paper); }
.split--alt { background: var(--flax); }
.split__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 1rem + 5vw, 6rem); }
.split__grid--reverse .split__media { order: 2; }
.split__media { aspect-ratio: 4 / 3.4; box-shadow: var(--shadow); }
.split__title { margin-bottom: 1rem; font-weight: 650; font-size: clamp(1.76rem, 1.12rem + 2.4vw, 3.36rem); font-variation-settings: "wdth" 88; letter-spacing: -0.03em; line-height: 1; }
.split__lead { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); letter-spacing: -0.015em; color: var(--bronze-deep); }
.split__copy > p:not(.kicker):not(.split__lead) { color: var(--stone); }
.spec-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 1.75rem 0 0; border-top: 1px solid var(--line); }
.spec-list div { padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--line); }
.spec-list div:nth-child(even) { padding-left: 1rem; border-left: 1px dashed var(--line); }
.spec-list dt { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.spec-list dd { margin: 0.4rem 0 0; font-size: 0.9rem; color: var(--stone); }
.info-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem clamp(1.25rem, 0.5rem + 2vw, 2.5rem); margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); padding-top: 1.75rem; border-top: 1px solid var(--line); }
.info-cols h3 { margin-bottom: 0.5rem; font-weight: 650; font-size: 1.15rem; letter-spacing: -0.015em; }
.info-cols p { margin: 0; font-size: 0.95rem; color: var(--stone); }

/* Full production gallery */
.production--page { background: var(--paper); }
.gallery-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.gallery-filter .filter-chip { cursor: pointer; }
.gallery-filter .filter-chip:not(.is-active) { background: transparent; }
.gallery--full .tile { aspect-ratio: 4 / 3; }
.tile[hidden] { display: none; }

/* Design service grid */
.service { padding: var(--section-pad) 0; background: var(--paper); }
.service-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.service-item { display: grid; justify-items: start; align-content: start; gap: 0.85rem; padding: 1.5rem 1rem 1.5rem 0; }
.service-item + .service-item { padding-left: 1rem; border-left: 1px solid var(--line); }
.service-item .cat-icon svg { stroke: var(--ink); }
.service-item h3 { margin: 0; font-weight: 650; font-size: 1rem; line-height: 1.25; letter-spacing: -0.01em; }
.process--flax { background: var(--flax); }
.process__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Contact */
.locations { padding: 0 0 var(--section-pad); background: var(--paper); }
.loc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem); }
.loc { display: grid; align-content: start; gap: 0.6rem; padding: clamp(1.25rem, 1rem + 1vw, 2rem); background: #fff; border: 1px solid var(--line); border-radius: 6px; transition: border-color 0.3s, box-shadow 0.4s var(--ease); }
.loc:hover { border-color: rgba(180, 122, 44, 0.5); box-shadow: var(--shadow); }
.loc .cat-icon svg { stroke: var(--ink); }
.loc h3 { margin: 0.4rem 0 0; font-weight: 650; font-size: 1.3rem; letter-spacing: -0.02em; }
.loc address { margin: 0; font-style: normal; color: var(--stone); }
.loc__links { margin: 0.25rem 0 0; padding: 0; list-style: none; overflow-wrap: anywhere; }
.loc__links a { font-weight: 600; color: var(--ink); text-decoration: none; }
.loc__links a:hover { color: var(--bronze-deep); }
.enquiry { padding: var(--section-pad) 0; background: var(--flax); }
.enquiry__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.enquiry__title { margin-bottom: 0.5rem; font-weight: 650; font-size: clamp(1.6rem, 1.12rem + 1.6vw, 2.56rem); letter-spacing: -0.03em; }
.enquiry__note { margin-bottom: 1.75rem; font-size: 0.95rem; color: var(--stone); }
.enquiry__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.field { display: grid; gap: 0.4rem; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(7, 28, 46, 0.22);
  border-radius: 4px;
  background: #fff;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: 0; border-color: var(--bronze); box-shadow: 0 0 0 3px rgba(180, 122, 44, 0.2); }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: 0.6rem; }
.field--check input { width: 20px; height: 20px; min-height: 0; margin-top: 0.15rem; accent-color: var(--ink); }
.field--check label { font-weight: 400; font-size: 0.875rem; color: var(--stone); }
.field--check .field__error { grid-column: 1 / -1; }
.field.has-error input,
.field.has-error textarea { border-color: #b3261e; }
.field__error { margin: 0; font-size: 0.85rem; color: #b3261e; }
.form-status { grid-column: 1 / -1; margin: 0; font-size: 0.95rem; }
.form-status.is-ok { padding: 0.85rem 1rem; background: #fff; border-left: 3px solid var(--bronze); color: var(--ink); }
.enquiry__form .btn-egelif { grid-column: 1 / -1; justify-self: start; }
.map-frame { overflow: hidden; aspect-ratio: 4 / 3.6; border-radius: 6px; border: 1px solid var(--line); background: var(--mist); box-shadow: var(--shadow); }
.map-frame iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(0.35) contrast(1.05); }
.enquiry__quick { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.enquiry__quick .btn-egelif { flex: 1 1 0; }
.enquiry__web { margin: 1rem 0 0; font-family: var(--font-display); font-weight: 600; color: var(--stone); }

/* Products landing: two large category panels (image, title, text, link) */
.cat-panels { padding: 0 0 var(--section-pad); background: var(--paper); }
.cat-panels__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.75rem, 0.25rem + 2vw, 2.5rem); }
.cat-panel__link { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; }
.cat-panel__media { position: relative; width: 100%; max-height: min(74vh, 640px); margin: 0; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 999px 999px 6px 6px; background: var(--mist); }
.cat-panel__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(7, 28, 46, 0.28)); opacity: 0; transition: opacity 0.5s var(--ease); }
.cat-panel__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transition: transform 1.1s var(--ease); }
.cat-panel__body { padding-top: clamp(1rem, 0.6rem + 1vw, 1.75rem); }
.cat-panel__title { margin: 0 0 0.5rem; font-weight: 650; font-size: clamp(1.2rem, 0.8rem + 1.6vw, 2.4rem); font-variation-settings: "wdth" 88; letter-spacing: -0.03em; line-height: 1; transition: color 0.3s; }
.cat-panel__text { margin: 0 0 1rem; max-width: 44ch; color: var(--stone); }
.cat-panel__more { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; color: var(--ink); border-bottom: 1.5px solid var(--bronze); padding-bottom: 0.2rem; }
.cat-panel__more::after { content: "\2192"; transition: transform 0.35s var(--ease); }
.cat-panel__link:hover .cat-panel__media img,
.cat-panel__link:focus-visible .cat-panel__media img { transform: scale(1.05); }
.cat-panel__link:hover .cat-panel__media::after { opacity: 1; }
.cat-panel__link:hover .cat-panel__title { color: var(--bronze-deep); }
.cat-panel__link:hover .cat-panel__more::after { transform: translateX(4px); }

/* E-Catalogue list: Bootstrap row of col-6 cards (cover, meta, title, text, actions) */
.ecat { padding: 0 0 var(--section-pad); background: var(--paper); }
.ecat-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; transition: border-color 0.3s, box-shadow 0.45s var(--ease), transform 0.45s var(--ease); }
.ecat-card:hover { border-color: rgba(180, 122, 44, 0.5); box-shadow: var(--shadow); transform: translateY(-4px); }
.ecat-card__cover { display: block; overflow: hidden; background: var(--mist); }
.ecat-card__cover img { width: 100%; height: 100%;transition: transform 1s var(--ease); }
.ecat-card:hover .ecat-card__cover img { transform: scale(1.03); }
.ecat-card__body { display: flex; flex: 1; flex-direction: column; padding: clamp(1rem, 0.6rem + 1.4vw, 2rem); }
.ecat-card__meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.75rem; }
.ecat-card__meta span { padding: 0.15rem 0.55rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.78rem; font-weight: 600; color: var(--stone); }
.ecat-card__title { margin: 0 0 0.5rem; font-weight: 650; font-size: clamp(1.15rem, 0.9rem + 1.2vw, 2rem); letter-spacing: -0.025em; line-height: 1.1; }
.ecat-card__text { margin: 0 0 1.25rem; color: var(--stone); }
.ecat-card__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; }
@media (min-width: 992px) {
  .ecat-card { flex-direction: row; }
  .ecat-card__cover { flex: 1; align-self: stretch; }
  .ecat-card__body { justify-content: center; }
  .ecat-card__actions { margin-top: 0.5rem; }
}

/* Content from EGELIF_Website_Content_Reordered.docx */
.page-hero__text { margin-top: 1rem; max-width: 52ch; color: var(--stone); }
.section-intro > div > .split__lead { margin: 0.75rem 0 0; }
.section-intro > div > .page-hero__lead + .page-hero__lead { margin-top: 1rem; }
.profile__body .split__lead,
.quality__intro .split__lead { margin-bottom: 1rem; }
.value__grid article { min-width: 0; }
.strength__sub { margin: -0.25rem 0 0.5rem !important; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem !important; color: var(--bronze-deep) !important; }
.split__title--md { font-size: clamp(1.44rem, 0.96rem + 1.6vw, 2.4rem); }
.signature__qualities li small { display: block; font-size: 0.85rem; font-weight: 400; line-height: 1.45; color: var(--stone); }
.process__grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Collections landing: season links under each category panel */
.cat-panel__seasons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.cat-panel__seasons a { display: inline-flex; align-items: center; min-height: 40px; padding: 0.4rem 1rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.875rem; font-weight: 600; color: var(--ink); text-decoration: none; transition: border-color 0.2s, background-color 0.2s, color 0.2s; }
.cat-panel__seasons a:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

/* Listing: a season with no styles yet */
.product-grid > li.product-grid__empty { grid-column: 1 / -1; margin: 0 !important; padding: 2rem 1.5rem; border: 1px dashed var(--line); border-radius: 6px; text-align: center; color: var(--stone); }

/* E-Catalog: a season without an approved catalogue yet */
.ecat-card--soon { background: var(--paper); }
.ecat-card--soon:hover { transform: none; box-shadow: none; border-color: var(--line); }
.ecat-card__cover--soon { display: grid; place-items: center; background: var(--mist); }
.ecat-card__cover--soon img { width: 52%; height: auto; object-fit: contain; opacity: 0.35; filter: grayscale(1); }
.ecat-card--soon .ecat-card__meta span:last-child { border-color: var(--bronze); color: var(--bronze-deep); }

/* Desktop: E-Katalog is a main-menu item, so the header button is for smaller screens */
@media (min-width: 992px) {
  .site-header__actions .btn-catalog { display: none; }
}
@media (min-width: 992px) and (max-width: 1399.98px) {
  .main-nav__list { gap: 0.8rem; }
  .main-nav__link { font-size: 0.88rem; }
}
@media (max-width: 1199.98px) {
  .process__grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .process__grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-slide__copy:last-child { padding-bottom: 4.75rem; } /* slides without icon labels: room for the slider controls */
  .cat-slide__photo { background: transparent; }   /* the fixed slider background shows around the whole photo */
  .closing__cta > .closing__actions { justify-content: flex-start; }
}
@media (max-width: 575.98px) {
  .cat-panel__seasons { gap: 0.35rem; }
  [data-filter-chips] { gap: 0.35rem; }
  [data-filter-chips] .filter-chip { min-height: 38px; padding: 0.4rem 0.7rem; font-size: 0.8rem; white-space: nowrap; }
}
@media (max-width: 374.98px) {
  [data-filter-chips] { gap: 0.25rem; }
  [data-filter-chips] .filter-chip { padding: 0.35rem 0.5rem; font-size: 0.74rem; }
  .cat-panel__seasons a { min-height: 34px; padding: 0.3rem 0.65rem; font-size: 0.75rem; }
  .strength__sub { font-size: 0.85rem !important; }
  .signature__qualities li small { font-size: 0.78rem; }
  .page-hero__text { font-size: 0.9rem; }
}

@media (max-width: 1199.98px) {
  .service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .service-item:nth-child(4n + 1) { padding-left: 0; border-left: 0; }
  .service-item:nth-child(n + 5) { border-top: 1px solid var(--line); }
}
@media (max-width: 991.98px) {
  .split__grid,
  .enquiry__grid { grid-template-columns: 1fr; }
  .split__grid--reverse .split__media { order: 0; }
  .info-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-frame { aspect-ratio: 16 / 10; }
    .gallery-filter{justify-content:center;}
}
@media (max-width: 575.98px) {
  .page-hero--compact .page-hero__title { font-size: clamp(1.8rem, 1.08rem + 3.6vw, 2.34rem); }
  .gallery-filter .filter-chip { min-height: 38px; padding: 0.35rem 0.8rem; font-size: 0.85rem; }
  .split__title { font-size: clamp(1.8rem, 1.08rem + 3.6vw, 2.34rem); }
  .spec-list dt { font-size: 1.5rem; }
  .spec-list dd { font-size: 0.8rem; }
  .info-cols { gap: 1.25rem 1rem; }
  .info-cols h3 { font-size: 1rem; }
  .info-cols p { font-size: 0.82rem; line-height: 1.5; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-item { padding: 1rem 0.75rem !important; border-left: 0 !important; border-top: 1px solid var(--line); }
  .service-item:nth-child(even) { border-left: 1px solid var(--line) !important; }
  .service-item:nth-child(-n + 2) { border-top: 0; }
  .service-item h3 { font-size: 0.9rem; }
  .loc-grid { grid-template-columns: 1fr 1fr; }
  .loc { padding: 1rem; }
  .loc h3 { font-size: 1.05rem; }
  .loc address,
  .loc__links { font-size: 0.8rem; overflow-wrap: anywhere; }
  .enquiry__form { grid-template-columns: 1fr 1fr; gap: 0.85rem 0.75rem; }
  .field input,
  .field select,
  .field textarea { min-height: 46px; padding: 0.6rem 0.7rem; font-size: 16px; }
  .field label { font-size: 0.82rem; }
  .enquiry__form .btn-egelif { justify-self: stretch; }
  .cat-panel__text { font-size: 0.85rem; line-height: 1.5; }
  .cat-panel__more { font-size: 0.85rem; }
  .ecat-card__body { padding: 0.85rem; }
  .ecat-card__meta span { padding: 0.1rem 0.45rem; font-size: 0.7rem; }
  .ecat-card__text { font-size: 0.85rem; line-height: 1.5; }
  .ecat-card__actions .btn-egelif { flex: 1 1 100%; min-height: 42px; padding: 0.5rem 0.6rem; font-size: 0.85rem; }
}
/* 6. Motion
   GSAP drives reveals, parallax and the slider (main.js). These CSS rules only
   set starting states while .motion is on, so content is never hidden when
   scripts or GSAP are missing (main.js / the head script remove .motion).
   -------------------------------------------------------------------------- */
.motion [data-reveal] { opacity: 0; transform: translateY(28px); }
.motion [data-reveal-img] { clip-path: inset(100% 0 0 0); }
.motion .hero-slide.is-active .cat-slide__photo { clip-path: inset(0 0 100% 0); }

/* Product cards: CSS entrance, staggered by --i (set by catalog.js for the visible cards) */
.motion .product-card { animation: card-in 0.8s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
.product-grid > li[hidden] { display: none; }
@keyframes card-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* 7. Responsive
   Phones follow a two-up rule: cards, icon features, figures, gallery tiles
   and paired buttons sit side by side wherever they fit.
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .main-nav__list { gap: 0.95rem; }
  .main-nav__link { font-size: 0.92rem; }
  .swatch-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cat-slide__icons li { font-size: 0.8rem; }
  .about__caps li { padding: 0.25rem 1rem; font-size: 0.875rem; }
}

@media (max-width: 991.98px) {
  :root { --header-h: 70px; --section-pad: clamp(2.75rem, 2rem + 3vw, 4rem); }
  .site-header__brand img { height: 42px; }

  /* Hero: paper slides stack image over copy; the catalogue slide stacks photo over panel */
  .cat-slide { grid-template-columns: 1fr; }
  /* phones/tablets: the photo sits above the copy, shown whole (no crop) on the navy ground */
  .cat-slide__photo { order: -1; height: min(52svh, 520px); }
  .cat-slide__photo img { object-fit: contain; }
  .cat-slide__photo::before { inset: auto 0 0 0; width: auto; height: 22%; background: linear-gradient(0deg, rgba(7, 28, 46, 0.6), rgba(7, 28, 46, 0)); }
  .cat-slide__copy { padding: 1.75rem var(--gutter) 1rem; }
  .cat-slide__title { max-width: 100%; }
    .fig__big {
    justify-content:center;
    }
    .cat-slide__icons {
        padding-bottom: 4.75rem;
    } /* room for the slider controls */
  .hero__ui { top: auto; right: auto; left: var(--gutter); bottom: 1rem; }

  .strengths__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .strength:nth-child(odd) { padding-left: 0; border-left: 0; }
  .strength:nth-child(even) { padding-right: 0; }

  /* About: copy over a stronger overlay, card + badge below */
  .about__bg::after { background: linear-gradient(180deg, rgba(251, 250, 247, 0.96) 0%, rgba(251, 250, 247, 0.9) 55%, rgba(251, 250, 247, 0.6) 100%); }
  .about__inner { grid-template-columns: 1fr; }
  .about__aside { justify-self: start; width: min(100%, 380px); margin-left: 2.5rem; }
  .about__caps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0.75rem; }
  .about__caps li:nth-child(3) { border-left: 0; }

  /* Figures: the board becomes two columns */
  .figures__board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "h h"
      "a b"
      "c d"
      "e e";
  }
  .fig--hero { border-right: 0; padding-bottom: 2rem; }
  .fig--a { text-align: left; padding-left: 0; }
  .fig--a::before { display: block; }
  .fig--b { text-align: right; }
  .fig--c, .fig--d { text-align: left; border: 0; }
  .fig--d { text-align: right; }
  .fig--e { text-align: left; padding-left: 0; }
  .fig__ring { left: 30%; }

  .design__layout { grid-template-columns: 1fr; }
  .design__photo { max-width: 520px; }

  .process__grid { row-gap: 2.25rem; }

  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .fabric__panel { grid-template-columns: 1fr; }
  .fabric__panel > * + * { border-left: 0; border-top: 1px dashed var(--line); }
  .fabric__intro { border-radius: 6px 6px 0 0; }

  .production__head,
  .quality__grid,
  .closing__cta { grid-template-columns: 1fr; }

  .page-hero__grid,
  .product__grid,
  .profile__grid,
  .company__grid,
  .section-intro,
  .signature__grid { grid-template-columns: 1fr; }
  .page-hero__media { justify-self: start; width: min(100%, 380px); order: -1; }
  .product__info { position: static; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-grid > li:nth-child(3n + 2) { margin-top: 0; }
  .product-grid > li:nth-child(even) { margin-top: 2.5rem; }
  .related .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related .product-grid > li:nth-child(even) { margin-top: 0; }
  .capacity { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.5rem; }
  .capacity div:nth-child(3) { padding-left: 0; border-left: 0; }
}

@media (max-width: 767.98px) {
  :root { --section-pad: 2.75rem; }
  body { font-size: 1rem; }

  /* Slider controls: no arrows (swipe instead); the dots collapse into a single
     progress bar for the active slide, so any number of slides fits */
  .hero__arrows { display: none; }
  .hero__ui { right: calc(var(--gutter) + 52px); gap: 0.75rem; padding: 0.45rem 1rem; }
  .hero__dots { flex: 1; min-width: 0; }
  .hero__dot { display: none; width: auto; flex: 1; }
  .hero__dot.is-active { display: block; }

  .lookbook__nav,
  .brands__nav { display: none; }

  .swatch-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .design__points li { grid-template-columns: 1fr; }
  .signature__qualities { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .process__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 0.85rem; }
  .step__media { margin-bottom: 0.85rem; }
  .step__media img { aspect-ratio: 1; }
  .step__body::before { margin-bottom: 0.6rem; padding-bottom: 0.4rem; font-size: 1.6rem; }
  .step__title { font-size: 1.05rem; }
  .step__body p { font-size: 0.85rem; line-height: 1.5; }

  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--lead { grid-row: auto; aspect-ratio: 16 / 10; }
  .tile__caption { left: 0.5rem; bottom: 0.5rem; max-width: calc(100% - 1rem); padding: 0.25rem 0.5rem; font-size: 0.75rem; }
  .production__sites { gap: 0.75rem; }
  .production__more { justify-content: flex-start; }

  .value__grid { grid-template-columns: 1fr; }
  .product-grid > li:nth-child(even) { margin-top: 1.5rem; }
  .product-card__name { font-size: 1.2rem; }
  .product-card__page { display: none; }
  .product-card__badge { left: 0.5rem; top: 0.5rem; font-size: 0.72rem; }


  /* Hero copy keeps a lane free for the floating buttons on the right */
  .cat-slide__copy,
  .cat-slide__icons { padding-right: calc(var(--gutter) + 46px); }

  /* Floating buttons: smaller, no hover labels; footer keeps clear of them */
  .float-actions { right: 8px; bottom: 10px; gap: 8px; }
  .float-btn { --size: 42px; }
  .float-btn svg { width: 19px; height: 19px; }
  .float-btn__tip { display: none; }
  .site-footer { padding-bottom: 6rem; }
}

@media (max-width: 575.98px) {
  :root { --section-pad: 2.5rem; }
  .container-xl { padding-inline: 16px; }
  .site-header__actions { gap: 0.4rem; }
  .lang-switch a { min-width: 32px; height: 32px; }
  .btn-catalog { min-height: 40px; padding: 0.4rem 0.65rem 0.4rem 0.55rem; gap: 0.35rem; font-size: 0.85rem; }
  .btn-catalog__icon { width: 18px; height: 18px; }
  .nav-toggle { width: 40px; height: 40px; padding: 0 10px; }

  /* Section titles: one compact scale on phones */
  .about__title,
  .design__title,
  .process__title,
  .production__title,
  .quality__title,
  .closing__title,
  .fabric__title,
  .lookbook__title,
  .page-hero__title,
  .signature__title,
  .profile__title { font-size: clamp(1.8rem, 1.08rem + 3.6vw, 2.34rem); }
  .cat-slide__title,
  .kicker { margin-bottom: 0.6rem; font-size: 0.85rem; }
  .about__lead,
  .design__lead { font-size: 1rem; }

  /* Paired buttons stay side by side */
  .hero-slide__cta,
  .closing__actions,
  .catalog-band__actions,
  .product__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .hero-slide__cta .btn-egelif,
  .closing__actions .btn-egelif,
  .catalog-band__actions .btn-egelif,
  .product__actions .btn-egelif { flex: 1 1 calc(50% - 0.25rem); min-width: 0; min-height: 46px; padding: 0.65rem 0.6rem; font-size: 0.85rem; line-height: 1.2; text-align: center; }
  .catalog-band__actions .btn-egelif:first-child:nth-last-child(3) { flex-basis: 100%; } /* 3 buttons: first full, two below */

  .cat-slide__sub { font-size: 1.05rem; }
  .cat-slide__motto { margin-bottom: 1.25rem; font-size: 0.95rem; }
  .cat-slide__icons { gap: 0.4rem; }
  .cat-slide__icons li { gap: 0.4rem; padding: 0.25rem 0.7rem 0.25rem 0.25rem; font-size: 0.72rem; }
  .cat-icon { width: 30px; height: 30px; }
  .cat-icon svg { width: 18px; height: 18px; }

  /* Strengths: 2 × 2 */
  .strengths__list { gap: 1.5rem 1rem; padding-top: 1.5rem; }
  .strength { padding: 0 !important; border-left: 0 !important; }
  .strength__icon { width: 48px; height: 48px; margin-bottom: 0.75rem; }
  .strength__icon svg { width: 30px; height: 30px; }
  .strength__title { font-size: 1rem; }
  .strength p { font-size: 0.85rem; line-height: 1.5; }

  /* About: smaller card, caps 2 × 2 */
  .about__aside { width: min(calc(100% - 1.5rem), 300px); margin-left: 1.5rem; }
  .about__badge { left: -1.5rem; bottom: -1.25rem; padding: 0.7rem 1rem; }
  .about__badge strong { font-size: 2rem; }
  .about__caps { padding: 0.75rem 0; row-gap: 0.5rem; }
  .about__caps li { gap: 0.5rem; padding: 0.25rem 0.75rem; font-size: 0.8rem; line-height: 1.25; }
  .about__caps li:nth-child(odd) { border-left: 0; }
  .about__caps .cat-icon { width: 34px; height: 34px; }

  /* Figures: hero full width, the rest two up */
  .figures__head { margin-bottom: 1.25rem; }
  /* left-aligned two-up rows; the long GSM range gets its own row */
  .figures__board { grid-template-areas: "h h" "a c" "b b" "d e"; }
  .fig--a, .fig--b, .fig--c, .fig--d, .fig--e { text-align: left; border: 0; }
  .figures .experience__number { font-size: clamp(5.5rem, 3rem + 14vw, 7.5rem); }
  .fig__plus { font-size: 3rem; }
  .fig { padding: 1.1rem 0.5rem; }
  .fig--a, .fig--b, .fig--d { padding-left: 0; }
  .fig--c, .fig--e { padding-right: 0; }
  .fig__num { font-size: clamp(1.9rem, 1.3rem + 3vw, 2.5rem); }
  .fig__label { margin-top: 0.4rem; font-size: 0.8rem; }
  .fig__label--hero { margin-top: 1rem; font-size: 0.9rem;max-width:100%;text-align:center }

  .swatch { width: 72px; }
  .swatch-item h3 { font-size: 1.05rem; }
  .swatch-item p { font-size: 0.8rem; }
  .brand-box__name { font-size: 1.15rem; }
  .brand-box__country { left: 0.6rem; bottom: 0.5rem; font-size: 0.7rem; }

  .look__meta { gap: 0 0.4rem; font-size: 0.78rem; }
  .look__meta strong { font-size: 1.05rem; }
  .picks__foot { flex-direction: column; align-items: flex-start; }

  .product-grid { gap: 1.75rem 0.75rem; }
  .product-card__line { font-size: 0.8rem; }
  .company-table { grid-template-columns: 1fr; }
  .company-table dd { padding-top: 0; border-top: 0; }
  .signature__qualities { gap: 0.75rem; }
  .signature__qualities li { font-size: 0.85rem; }
}

@media (max-width: 359.98px) {
  .btn-catalog span { display: none; } /* icon-only on very narrow phones; label stays in aria-label */
  .lang-switch a { min-width: 28px; }
  .hero-slide__cta .btn-egelif,
  .closing__actions .btn-egelif,
  .catalog-band__actions .btn-egelif,
  .product__actions .btn-egelif { font-size: 0.8rem; padding-inline: 0.4rem; }
}

/* 8. Mobile refinements
   Centred section headings, a compact type scale, paired buttons side by side,
   a minimal offcanvas menu, a tighter footer and centred hero pagination.
   Kept last so it overrides the general responsive rules above.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .catalog-band{
        padding-top:0;
    }
    /* --- Centred headings: kicker, title, sub-title and lead --- */
    .kicker,
    .page-hero__title,
    .page-hero__lead,
    .page-hero__motto,
    .about__title,
    .about__sub,
    .about__lead,
    .about__copy > p,
    .design__content > .kicker,
    .design__title,
    .design__lead,
    .process__title,
    .process__head p,
    .production__title,
    .production__intro > p,
    .quality__title,
    .quality__intro p,
    .lookbook__title,
    .lookbook__head p,
    .profile__title,
    .section-intro .page-hero__lead,
    .split__title,
    .split__lead,
    .split__copy > p,
    .signature__title,
    .signature__sub,
    .signature__copy > p,
    .fabric__title,
    .closing__title,
    .closing__cta p,
    .company__title,
    .enquiry__title,
    .enquiry__note,
    .related__title,
    .brands__title,
    .catalog-band h2,
    .catalog-band p,
    .cat-panel__body,
    .cat-slide__copy {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
  .page-hero__motto { padding-left: 0; border-left: 0; }
  .page-hero__media { justify-self: center; }
  .page-hero__facts { justify-content: center; text-align: center; }
  .about__copy { margin-inline: auto; text-align: center; }

  /* flex / grid heads stack and centre */
  .lookbook__head,
  .figures__head,
  .process__head,
  .production__head,
  .production__more,
  .catalog-band__inner,
  .brands__head {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .lookbook__head > div,
  .process__head > div,
  .production__head > *,
  .catalog-band__inner > * { width: 100%; }
  .catalog-band__actions,
  .closing__actions,
  .hero-slide__cta,
  .picks__links,
  .production__sites { justify-content: center; }
  .production__sites { text-align: center; }
  .picks__foot { align-items: center; }
  .cat-panel__seasons { justify-content: center; }

  /* hero copy: symmetric padding, centred eyebrow and icon labels */
  .cat-slide__copy,
  .cat-slide__icons { padding-left: var(--gutter); padding-right: var(--gutter); }
  .cat-slide__eyebrow { justify-content: center; }
  .cat-slide__eyebrow::before { display: none; }
  .cat-slide__icons { justify-content: center; }
  .cat-slide__title,
  .cat-slide__sub { margin-left: auto; margin-right: auto; }

  /* --- Paired buttons: always side by side, equal width --- */
  .hero-slide__cta,
  .closing__actions,
  .enquiry__quick,
  .product__actions,
  .ecat-card__actions { display: flex; flex-wrap: nowrap; gap: 0.5rem; width: 100%; }
  .hero-slide__cta .btn-egelif,
  .closing__actions .btn-egelif,
  .enquiry__quick .btn-egelif,
  .product__actions .btn-egelif,
  .ecat-card__actions .btn-egelif {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding: 0.55rem 0.5rem;
    font-size: 0.82rem;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .hero-slide__cta .btn-egelif:only-child { flex: 0 1 auto; padding-inline: 1.5rem; }

  /* --- Minimal mobile menu --- */
  .mobile-nav { --bs-offcanvas-width: min(340px, 88vw); }
  .mobile-nav .offcanvas-header { padding: 0.9rem 1.25rem; }
  .mobile-nav .offcanvas-body { padding: 0.25rem 1.25rem 1.25rem; }
  .mobile-nav__logo { height: 34px; }
  .mobile-nav__list > li > a,
  .mobile-nav__row > a { padding: 0.62rem 0; font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; }
  .mobile-nav__expand { width: 34px; height: 34px; }
  .mobile-nav__expand::before,
  .mobile-nav__expand::after { width: 11px; }
  .mobile-nav__sub { margin: 0 0 0.6rem; padding-left: 0.85rem; }
  .mobile-nav__sub a { padding: 0.3rem 0; font-size: 0.88rem; }
  .mobile-nav .btn-egelif { min-height: 42px; margin-top: 1rem !important; padding: 0.5rem 1rem; font-size: 0.88rem; }

  /* --- Footer: tighter spacing --- */
  .site-footer { padding: 2.25rem 0 1rem; font-size: 0.9rem; }
  .site-footer .row { --bs-gutter-y: 1.5rem; }
    .site-footer .row > :first-child {
        text-align: center;
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
    }
  .site-footer__logo { width: 140px; margin-bottom: 0.75rem; }
  .site-footer__motto { margin-bottom: 0.35rem; font-size: 1.05rem; }
  .site-footer__tagline { margin: 0; font-size: 0.88rem; }
  .site-footer__heading { margin-bottom: 0.6rem; font-size: 0.88rem; }
  .site-footer__links li + li { margin-top: 0.2rem; }
  .site-footer__address { margin-bottom: 0.6rem; }
  .site-footer__facilities { gap: 0.75rem 1rem; }
  .site-footer__legal { flex-direction: column; align-items: center; gap: 0.25rem; margin-top: 1.5rem; padding-top: 1rem; font-size: 0.78rem; text-align: center; }

  /* --- Hero pagination: centred pill, every dot visible and tappable --- */
  .hero__ui { left: 50%; right: auto; bottom: 0.9rem; width: max-content; max-width: calc(100% - 2 * var(--gutter)); transform: translateX(-50%); gap: 0.6rem; padding: 0.3rem 0.9rem; }
  .hero__counter { font-size: 0.82rem; white-space: nowrap; }
  .hero__dots { flex: none; gap: 0.35rem; }
  .hero__dot { display: block; width: 28px; height: 22px; flex: none; }
  .hero__dot span { height: 2px; }
  .hero__dot.is-active { width: 44px; }
  .cat-slide__icons { padding-bottom: 4rem; }
}

@media (max-width: 575.98px) {
  /* --- Compact type scale on phones --- */
  .about__title,
  .design__title,
  .process__title,
  .production__title,
  .quality__title,
  .closing__title,
  .fabric__title,
  .lookbook__title,
  .page-hero__title,
  .page-hero--compact .page-hero__title,
  .signature__title,
  .profile__title,
  .split__title,
  .company__title,
  .enquiry__title { font-size: clamp(1.4rem, 2rem + 2.52vw, 1.8rem); line-height: 1.05; }
  .signature__title { font-size: clamp(1.98rem, 1.26rem + 3.6vw, 2.52rem); }
  .related__title { font-size: 1.45rem; }
  .cat-slide__title { font-size: clamp(1.67rem, 1.08rem + 3.06vw, 2.07rem); margin-bottom: 0.9rem; }
  .product__title { font-size: clamp(1.53rem, 0.99rem + 2.7vw, 1.98rem); }

  .kicker { margin-bottom: 0.5rem; font-size: 0.78rem; }
  .cat-slide__eyebrow { margin-bottom: 0.9rem; font-size: 0.75rem; }
  .cat-slide__eyebrow span:first-child { font-size: 0.85rem; }
  .page-hero__lead,
  .about__lead,
  .design__lead,
  .closing__cta p { font-size: 0.92rem; line-height: 1.55; }
  .about__sub,
  .split__lead,
  .signature__sub,
  .cat-slide__sub { font-size: 0.98rem; }
  .cat-slide__motto { margin-bottom: 1rem; font-size: 0.85rem; }
  .page-hero__motto { font-size: 0.88rem; }
  .about__copy > p,
  .split__copy > p:not(.kicker):not(.split__lead),
  .signature__copy > p,
  .quality__intro p,
  .production__intro > p,
  .process__head p,
  .lookbook__head p,
  .catalog-band p { font-size: 0.88rem; line-height: 1.55; }
  .catalog-band h2 { font-size: 1.45rem; }
  .cat-panel__title { font-size: 1.3rem; }
  .ecat-card__title { font-size: 1.05rem; }

  .cat-slide__photo { height: min(44svh, 420px); }
  .cat-slide__copy { padding-top: 1.25rem; }
}