/* ==========================================================================
   DECO MEUBLE — style.css
   Single source of truth for the whole site. No inline styles, no <style>.
   --------------------------------------------------------------------------
   Table of contents
   1.  Design tokens (CSS custom properties)
   2.  Reset & base elements
   3.  Layout primitives (container, section, grid, measure)
   4.  Typography helpers
   5.  Components
       5.1  Buttons
       5.2  Site header / primary navigation
       5.3  Hero
       5.4  Bento image strip
       5.5  Cards
       5.6  Feature list / icon items
       5.7  Stats
       5.8  Accordion (FAQ)
       5.9  Gallery + filter + lightbox
       5.10 Testimonials
       5.11 Contact call-to-action
       5.12 Breadcrumb
       5.13 CTA band
       5.14 Site footer
       5.15 404
   6.  Utilities
   7.  Motion / reveal
   8.  Responsive breakpoints (mobile-first, min-width)
   9.  Reduced motion & print
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* --- Colour system: 2 brand + 1 support + neutrals ---------------------- */
  --color-bg:            #f6f4ef;   /* warm paper — page background          */
  --color-surface:       #ffffff;   /* cards, header                          */
  --color-surface-alt:   #efece3;   /* subtle alternating sections           */
  --color-primary:       #1c1a17;   /* near-black, warm — headings, dark UI  */
  --color-secondary:     #37423a;   /* deep forest — support accent          */
  --color-accent:        #a25e22;   /* walnut amber — CTA / links            */
  --color-accent-hover:  #8a4d18;
  --color-accent-soft:   #f2e7d8;   /* amber tint — badges, hovers          */
  --color-text:          #333333;   /* body copy (brief requirement)        */
  --color-muted:         #6f6960;   /* secondary text                        */
  --color-line:          #e2ddd2;   /* hairline borders                      */
  --color-line-strong:   #cfc8b8;
  --color-focus:         #1d6fb8;   /* focus ring — high contrast on paper  */

  /* --- Spacing scale: strict 4px base, no ad-hoc values ------------------ */
  --sp-1: 0.25rem;   /*  4px */
  --sp-2: 0.5rem;    /*  8px */
  --sp-3: 0.75rem;   /* 12px */
  --sp-4: 1rem;      /* 16px */
  --sp-5: 1.5rem;    /* 24px */
  --sp-6: 2rem;      /* 32px */
  --sp-7: 3rem;      /* 48px */
  --sp-8: 4rem;      /* 64px */
  --sp-9: 6rem;      /* 96px */

  /* --- Typography ------------------------------------------------------------
     Body: rem units. Headings: clamp() for fluid scaling.
     Modular scale ratio ≈ 1.25 (major third).                              */
  --font-sans: "Archivo", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fs-root: 100%;                 /* = 16px, never smaller for body        */
  --fs-body:   1rem;               /* 16px */
  --fs-sm:     0.875rem;           /* 14px — meta / labels only            */
  --fs-lead:   clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --fs-h6:     clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --fs-h5:     clamp(1.125rem, 1.05rem + 0.4vw,  1.35rem);
  --fs-h4:     clamp(1.35rem,  1.2rem  + 0.7vw,  1.75rem);
  --fs-h3:     clamp(1.7rem,   1.4rem  + 1.4vw,  2.4rem);
  --fs-h2:     clamp(2.1rem,   1.7rem  + 2vw,    3.25rem);
  --fs-h1:     clamp(2.4rem,   1.8rem  + 3vw,    4.75rem);
  --fs-display: clamp(2.5rem,  1.6rem  + 4.6vw,  6.5rem);

  --lh-tight:  1.08;
  --lh-heading: 1.15;
  --lh-body:   1.7;                /* 1.5–1.8 for paragraphs               */

  /* --- Layout ------------------------------------------------------------- */
  --container-width: 85%;          /* brief: whole site at 85% of screen   */
  --container-max: 1280px;
  --container-max-wide: 1480px;    /* unlock a little on 4K                */
  --measure: 65ch;                 /* text column ≤ ~70% of screen         */
  --header-h: 4.5rem;

  /* --- Shape & elevation ------------------------------------------------- */
  --radius-sm: 4px;
  --radius:    10px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(28, 26, 23, 0.05);
  --shadow-sm: 0 1px 2px rgba(28, 26, 23, 0.04), 0 6px 20px -14px rgba(28, 26, 23, 0.18);
  --shadow-md: 0 2px 6px rgba(28, 26, 23, 0.05), 0 18px 40px -24px rgba(28, 26, 23, 0.22);

  /* --- Motion ---------------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 600ms;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  font-size: var(--fs-root);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
  overflow-x: hidden; /* contains the off-canvas mobile nav; sticky header still works */
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a {
  color: var(--color-accent);
  text-decoration: none;
  text-underline-offset: 0.15em;
}
a:hover { color: var(--color-accent-hover); text-decoration: underline; }

ul, ol { padding: 0; list-style: none; }

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: var(--lh-heading);
  color: var(--color-primary);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.035em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.03em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

p { text-wrap: pretty; }

strong, b { font-weight: 700; }

/* Consistent, gentle rhythm for flowing prose blocks */
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { margin-top: var(--sp-8); }
.prose h3 { margin-top: var(--sp-6); }
.prose > :first-child { margin-top: 0; }
.prose p,
.prose li { max-width: var(--measure); }
.prose ul { list-style: none; }
.prose ul li {
  position: relative;
  padding-left: var(--sp-5);
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  border-radius: 2px;
}
.prose ul li + li { margin-top: var(--sp-2); }

/* Selection */
::selection { background: var(--color-accent); color: #fff; }

/* Focus — visible, high-contrast, never removed */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: var(--sp-3);
  z-index: 200;
  padding: var(--sp-2) var(--sp-4);
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-sm);
  transform: translateY(-160%);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translateY(0); color: #fff; text-decoration: none; }

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */
.container {
  width: var(--container-width);
  max-width: var(--container-max);
  margin-inline: auto;
}
.container--narrow { max-width: 760px; }

.section {
  padding-block: var(--sp-8);
  padding-top: var(--sp-9);
}
.section--tight { padding-block: var(--sp-7); }
.section--flush-top { padding-top: 0; }
.section--alt { background: var(--color-surface-alt); }
.section--dark {
  background: var(--color-primary);
  color: #d9d4c9;
}
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: #fff; }

.section__header {
  max-width: var(--measure);
  margin-bottom: var(--sp-6);
}
/* Roomier gap between the heading and the text beneath it */
.section__header h1 + .lead,
.section__header h2 + .lead,
.section__header h1 + p,
.section__header h2 + p { margin-top: var(--sp-4); }
.section__header--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--sp-3);
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: currentColor;
}
.section__header--center .eyebrow { justify-content: center; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--color-muted);
  max-width: var(--measure);
}

/* Wide page intro — header + lead span ~2/3 of the viewport on desktop.
   The 66vw cap is only sensible once there is room for it; below the tablet
   breakpoint it is released so intro copy uses the normal text measure. */
.page-intro .section__header,
.page-intro .lead { max-width: min(66vw, 72rem); }
@media (max-width: 767px) {
  .page-intro .section__header { max-width: 100%; }
  .page-intro .lead { max-width: var(--measure); }
}

/* Simple, predictable auto-grid. Cards never fall to a lonely 3+1:
   min track sizes chosen so 4 items land 2×2 on tablet. */
.grid {
  display: grid;
  gap: var(--sp-5);
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 599px) {
  :root { --container-width: 90%; } /* 85% is too tight on a phone */
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   4. TYPOGRAPHY HELPERS
   ========================================================================== */
.text-muted { color: var(--color-muted); }
.text-center { text-align: center; }
.measure { max-width: var(--measure); }

/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* 5.1 Buttons ------------------------------------------------------------- */
.btn {
  --btn-bg: var(--color-primary);
  --btn-fg: #fff;
  --btn-bd: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  min-height: 3rem;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:hover {
  text-decoration: none;
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.btn:active { transform: translateY(0); }

.btn--primary {
  --btn-bg: var(--color-accent);
  --btn-fg: #fff;
  --btn-bd: var(--color-accent);
}
.btn--primary:hover { --btn-bg: var(--color-accent-hover); --btn-bd: var(--color-accent-hover); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--color-primary);
  --btn-bd: var(--color-line-strong);
}
.btn--ghost:hover { --btn-bg: var(--color-surface); --btn-bd: var(--color-primary); --btn-fg: var(--color-primary); }

.btn--on-dark {
  --btn-bg: #fff;
  --btn-fg: var(--color-primary);
  --btn-bd: #fff;
}
.btn--on-dark:hover { --btn-fg: var(--color-primary); }

.btn--sm { min-height: 2.5rem; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); }
.btn--block { width: 100%; }

/* Text link with arrow — used site-wide for "read more" affordances */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  color: var(--color-primary);
}
.link-arrow i { transition: transform var(--dur) var(--ease); color: var(--color-accent); }
.link-arrow:hover { color: var(--color-primary); text-decoration: none; }
.link-arrow:hover i { transform: translateX(4px); }

/* 5.2 Site header ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Solid background (no backdrop-filter): a filtered header would become the
     containing block for the fixed mobile nav drawer and break it. */
  background: var(--color-bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--color-line);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--color-primary);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1.15rem;
}
.brand:hover { color: var(--color-primary); text-decoration: none; }
.brand__mark { width: 2rem; height: 2rem; flex: none; }
.brand__text { white-space: nowrap; }

/* Primary nav — desktop first defined at breakpoint; mobile = drawer */
.primary-nav ul {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.primary-nav a:not(.btn) {
  display: inline-block;
  padding: var(--sp-2) var(--sp-3);
  color: var(--color-primary);
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.primary-nav a:not(.btn):hover { color: var(--color-accent); text-decoration: none; }
.primary-nav a:not(.btn)[aria-current="page"] {
  color: var(--color-accent);
  box-shadow: inset 0 -2px 0 var(--color-accent);
  border-radius: 0;
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.6rem;
  background: transparent;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle__bar {
  width: 100%;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Language switcher — lives as the last item of the primary nav so it also
   appears inside the mobile drawer. */
.lang-switch {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.lang-switch a {
  display: inline-block;
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  border-radius: var(--radius-sm);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.lang-switch a:hover { color: var(--color-accent); text-decoration: none; }
.lang-switch a[aria-current="true"] { color: var(--color-accent); font-weight: 700; }

/* 5.3 Hero -------------------------------------------------------------------
   Layout inspired by the supplied reference: oversized left headline,
   supporting media + stat row on the right, full-bleed image strip below. */
.hero {
  padding-top: var(--sp-7);
  padding-bottom: 0;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
.hero__title {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: var(--color-primary);
  overflow-wrap: break-word;
  hyphens: none;
}
.hero__title .accent { color: var(--color-accent); }
.hero__intro {
  margin-top: var(--sp-5);
  font-size: var(--fs-lead);
  color: var(--color-muted);
  max-width: 46ch;
}
.hero__actions {
  margin-top: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.hero__aside { display: grid; gap: var(--sp-5); }
.hero__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--color-surface-alt);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center center; aspect-ratio: 1 / 1; }
.hero__media figcaption {
  position: absolute;
  left: var(--sp-4);
  bottom: var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #fff;
  background: color-mix(in srgb, var(--color-primary) 72%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-sm);
}

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5) var(--sp-6);
}
.hero__stats .stat { flex: 1 1 7rem; }
.stat__value {
  display: block;
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--color-primary);
  line-height: 1;
}
.stat__label {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--color-muted);
  max-width: 16ch;
}

/* 5.4 Bento image strip ---------------------------------------------------- */
.strip {
  margin-top: var(--sp-8);
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-1);
  background: var(--color-primary);
}
.strip__cell {
  position: relative;
  overflow: hidden;
  min-height: 200px;
  margin: 0;
}
.strip__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.strip__cell:hover img { transform: scale(1.05); }
.strip__tag {
  position: absolute;
  left: var(--sp-3);
  bottom: var(--sp-3);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #fff;
  background: var(--color-accent);
  border-radius: var(--radius-sm);
}
.strip__cta {
  /* Full-width band below the images until the desktop 6-col strip picks it
     up as an inline 2-col block (≥960px). Prevents the panel being crushed
     into a single fraction — and the empty dark cells that left beside it. */
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-6);
  color: #fff;
  background: var(--color-primary);
}
.strip__cta h2 { color: #fff; font-size: var(--fs-h4); }
.strip__cta p { color: #b9b2a4; font-size: var(--fs-sm); max-width: 32ch; }
.strip__cta .link-arrow { color: #fff; }
.strip__cta .link-arrow i { color: var(--color-accent); }

/* 5.5 Cards -------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: var(--color-line-strong); }
.card__media { position: relative; overflow: hidden; background: var(--color-surface-alt); }
.card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.card:hover .card__media img { transform: scale(1.04); }
.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  flex: 1;
}
.card__title { font-size: var(--fs-h5); }
.card__body p { color: var(--color-muted); flex: 1; }
.card__body .link-arrow { margin-top: var(--sp-2); }

/* 5.6 Feature / icon list --------------------------------------------------- */
.feature {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  font-size: 1.25rem;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border-radius: var(--radius);
}
.feature h3 { font-size: var(--fs-h5); }
.feature p { color: var(--color-muted); }

/* Compact list used on Machinery page */
.spec-list {
  display: grid;
  gap: var(--sp-3);
}
.spec-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}
.spec-list i { color: var(--color-accent); margin-top: 0.2em; flex: none; }

/* 5.7 Stat block (reused outside hero) ----------------------------------- */
.stat-band {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-5);
}
.stat-band .stat__value { font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem); }

/* 5.8 Accordion ---------------------------------------------------------------- */
.accordion {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
}
/* > 3 items → two columns (brief). Achieved with a modifier the markup adds. */
.accordion--split { gap: var(--sp-3) var(--sp-5); }

.accordion__item {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
  height: fit-content;
}
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  background: transparent;
  border: 0;
  text-align: left;
  font-size: var(--fs-h6);
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
}
.accordion__trigger:hover { color: var(--color-accent); }
.accordion__icon {
  flex: none;
  display: inline-flex;
  transition: transform var(--dur) var(--ease);
  color: var(--color-accent);
}
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(180deg); }
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
/* The trigger lives inside an <h3>, so target from the item, not a sibling. */
.accordion__item.is-open .accordion__panel,
.accordion__item:has(.accordion__trigger[aria-expanded="true"]) .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p {
  padding: 0 var(--sp-5) var(--sp-5);
  color: var(--color-muted);
  max-width: 60ch;
}

/* 5.9 Gallery + filter + lightbox ---------------------------------------- */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}
.filter__btn {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.filter__btn:hover { border-color: var(--color-primary); }
.filter__btn[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
.gallery__item {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-surface-alt);
}
.gallery__item button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.gallery__item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.gallery__item:hover img { transform: scale(1.05); }
.gallery__item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-5) var(--sp-3) var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #fff;
  background: linear-gradient(to top, rgba(28, 26, 23, 0.78), transparent);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.gallery__item:hover figcaption,
.gallery__item button:focus-visible + figcaption { opacity: 1; }
.gallery__item.is-hidden { display: none; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background: rgba(20, 18, 16, 0.9);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.lightbox[hidden] { display: none; }
.lightbox__img {
  max-width: min(1100px, 92vw);
  max-height: 84vh;
  width: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.lightbox__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--sp-5);
  text-align: center;
  color: #fff;
  font-size: var(--fs-sm);
}
.lightbox__btn {
  position: absolute;
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.24); }
.lightbox__close { top: var(--sp-5); right: var(--sp-5); }
.lightbox__prev { left: var(--sp-4); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: var(--sp-4); top: 50%; transform: translateY(-50%); }

/* 5.10 Testimonials ----------------------------------------------------------- */
.quote {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  height: 100%;
}
.quote__mark {
  font-size: 2rem;
  line-height: 1;
  color: var(--color-accent);
}
.quote blockquote { font-size: var(--fs-h6); color: var(--color-primary); font-weight: 500; }
.quote figcaption { font-size: var(--fs-sm); color: var(--color-muted); }
.quote--feature {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.quote--feature blockquote { color: #fff; }
.quote--feature figcaption { color: #b9b2a4; }
.quote--invite {
  background: color-mix(in srgb, var(--color-accent) 9%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-accent) 26%, var(--color-line));
}
.quote--invite blockquote { font-weight: 600; }

/* 5.11 Contact call-to-action panel ------------------------------------- */
.contact-cta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.contact-cta h2 { font-size: var(--fs-h4); }
.contact-cta p { color: var(--color-muted); }

/* Contact detail list */
.contact-list { display: grid; gap: var(--sp-4); }
.contact-list > div { display: flex; gap: var(--sp-4); align-items: flex-start; }
.contact-list i {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border-radius: var(--radius);
}
.contact-list dt { font-weight: 600; color: var(--color-primary); font-size: var(--fs-sm); }
.contact-list dd { color: var(--color-muted); }
.contact-list a { color: var(--color-accent); }

/* Small, unobtrusive workshop snapshot on the contact page (low-res source) */
.contact-photo { max-width: 30rem; }

/* Definition list for legal / company data */
.data-dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
.data-dl div {
  display: grid;
  gap: var(--sp-1);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--color-line);
}
.data-dl dt { font-size: var(--fs-sm); font-weight: 600; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.data-dl dd { color: var(--color-primary); font-weight: 500; }

/* 5.12 Breadcrumb -------------------------------------------------------------- */
.breadcrumb { padding-top: var(--sp-5); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--color-muted); }
.breadcrumb li { display: flex; gap: var(--sp-2); align-items: center; }
.breadcrumb li + li::before { content: "/"; color: var(--color-line-strong); }
.breadcrumb a { color: var(--color-muted); }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb [aria-current="page"] { color: var(--color-primary); font-weight: 600; }

/* 5.13 CTA band -------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 1rem + 5vw, 4.5rem);
  color: #fff;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(162, 94, 34, 0.35), transparent 60%),
    linear-gradient(120deg, var(--color-primary), var(--color-secondary));
}
.cta-band h2 { color: #fff; max-width: 20ch; }
.cta-band p { color: #d9d4c9; max-width: 52ch; margin-top: var(--sp-4); }
.cta-band .btn { margin-top: var(--sp-6); }

/* 5.14 Site footer -------------------------------------------------------------- */
.site-footer {
  background: var(--color-primary);
  color: #b9b2a4;
  padding-top: var(--sp-8);
  border-top: 4px solid var(--color-accent);
}
.site-footer a { color: #d9d4c9; }
.site-footer a:hover { color: #fff; }
.footer__grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  padding-bottom: var(--sp-7);
}
.footer__brand { max-width: 34ch; }
.footer__brand .brand { color: #fff; margin-bottom: var(--sp-3); }
.footer__brand .brand:hover { color: #fff; }
.footer__brand p { color: #b9b2a4; font-size: var(--fs-sm); }
.footer__col h2 {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #fff;
  margin-bottom: var(--sp-4);
}
.footer__col ul { display: grid; gap: var(--sp-2); font-size: var(--fs-sm); }
.footer__social {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  color: #d9d4c9;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.footer__social a:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; transform: translateY(-2px); }
.footer__legal {
  padding-block: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-sm);
  color: #8f887b;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  justify-content: space-between;
}
.footer__legal p { max-width: 70ch; }
.pending {
  color: #d9b98e;
  font-style: italic;
}

/* 5.15 404 ------------------------------------------------------------------ */
.notfound {
  min-height: 60vh;
  display: grid;
  place-content: center;
  text-align: center;
  gap: var(--sp-4);
  padding-block: var(--sp-9);
}
.notfound i { font-size: clamp(3.5rem, 2rem + 8vw, 6rem); color: var(--color-accent); }
.notfound p { color: var(--color-muted); margin-inline: auto; }
.notfound .btn-row { justify-content: center; }

/* ==========================================================================
   6. UTILITIES
   ========================================================================== */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.media-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--color-surface-alt);
}
.media-frame img { width: 100%; object-fit: cover; }
.ratio-16-10 img { aspect-ratio: 16 / 10; }
.ratio-4-3 img { aspect-ratio: 4 / 3; }
.ratio-1-1 img { aspect-ratio: 1 / 1; }
.ratio-21-9 img { aspect-ratio: 21 / 9; }

/* Two-column content + media block */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: center;
}
.split--reverse { direction: rtl; }
.split--reverse > * { direction: ltr; }

/* ==========================================================================
   7. MOTION / REVEAL
   ========================================================================== */
/* Hidden state applies only when JS is available (.js on <html>); without JS
   every [data-reveal] block stays fully visible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js [data-reveal][data-reveal-delay="1"] { transition-delay: 80ms; }
.js [data-reveal][data-reveal-delay="2"] { transition-delay: 160ms; }
.js [data-reveal][data-reveal-delay="3"] { transition-delay: 240ms; }

/* ==========================================================================
   8. RESPONSIVE — mobile-first, min-width breakpoints
   ========================================================================== */

/* ≥ 600px — small tablet */
@media (min-width: 600px) {
  .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .notfound .btn-row { flex-wrap: nowrap; }
}

/* ≥ 768px — tablet */
@media (min-width: 768px) {
  :root { --header-h: 5rem; }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero__stats { gap: var(--sp-6); }
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .field--row { gap: var(--sp-4); }
  .footer__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); }
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .accordion--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stat-band { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ≥ 960px — desktop: switch nav from drawer to inline bar */
@media (min-width: 960px) {
  .nav-toggle { display: none; }
  .primary-nav {
    position: static;
    inset: auto;
    height: auto;
    padding: 0;
    background: transparent;
    transform: none;
    visibility: visible;
    box-shadow: none;
  }
  .primary-nav ul { flex-direction: row; }
  .primary-nav a:not(.btn) { font-size: var(--fs-body); }
  .lang-switch { margin-left: var(--sp-2); padding-left: var(--sp-3); border-left: 1px solid var(--color-line); }

  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--sp-8); }
  .hero__title { font-size: var(--fs-display); }
  .strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .strip__cta { grid-column: span 2; }
  /* .grid--4 intentionally stays 2-up (2×2) at all sizes — never 3+1 */
  .split--wide { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  /* keep the media on the narrow side when the order is reversed */
  .split--wide.split--reverse { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

/* ≥ 1024px — below-drawer nav gets more breathing room */
@media (min-width: 1024px) {
  .primary-nav a:not(.btn) { padding-inline: var(--sp-4); }
}

/* < 960px — mobile navigation drawer */
@media (max-width: 959px) {
  .primary-nav {
    position: fixed;
    inset: var(--header-h) 0 0 auto;
    width: min(320px, 82vw);
    padding: var(--sp-6) var(--sp-5);
    background: var(--color-surface);
    border-left: 1px solid var(--color-line);
    box-shadow: var(--shadow-md);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--dur) var(--ease), visibility var(--dur) var(--ease);
    overflow-y: auto;
  }
  .primary-nav.is-open { transform: translateX(0); visibility: visible; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: var(--sp-1); }
  .primary-nav a:not(.btn) { padding: var(--sp-3) var(--sp-3); font-size: var(--fs-h6); }
  .primary-nav a:not(.btn)[aria-current="page"] { box-shadow: inset 3px 0 0 var(--color-accent); }
  .primary-nav .btn { margin-top: var(--sp-4); }
  .lang-switch { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--color-line); }
  .lang-switch a { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-h6); }
  body.nav-open { overflow: hidden; }
  .nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(20, 18, 16, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
  }
  .nav-scrim.is-open { opacity: 1; visibility: visible; }
}

/* ≤ 599px — mobile polish: tighter vertical rhythm, comfortable tap targets,
   full-width intro copy and CTAs, safe wrapping for long contact strings. */
@media (max-width: 599px) {
  /* Vertical rhythm — the desktop 96px section tops are wasteful on a phone */
  .section { padding-block: var(--sp-7); padding-top: var(--sp-8); }
  .section--tight { padding-block: var(--sp-6); }
  .section__header { margin-bottom: var(--sp-5); }

  /* Hero */
  .hero { padding-top: var(--sp-6); }
  .hero__grid { gap: var(--sp-5); }
  .hero__title { font-size: clamp(2.25rem, 1.1rem + 6vw, 3.25rem); }
  .hero__intro { margin-top: var(--sp-4); }
  .hero__actions { margin-top: var(--sp-5); }
  .hero__actions .btn { flex: 1 1 100%; }   /* stack full-width, easier to tap */
  .hero__stats { gap: var(--sp-4) var(--sp-5); }

  /* Bento strip */
  .strip { margin-top: var(--sp-7); }
  .strip__cta { padding: var(--sp-5); }

  /* CTA band — let the copy use the full width, not a narrow ragged column */
  .cta-band { padding: var(--sp-6) var(--sp-5); }
  .cta-band h2,
  .cta-band p { max-width: none; }

  /* Comfortable tap targets */
  .primary-nav a:not(.btn) {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: var(--sp-2) var(--sp-4);
  }
  .filter__btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .accordion__trigger { min-height: 56px; }

  /* Never let a long e-mail or URL push the layout sideways */
  .contact-list dd,
  .footer__col li,
  .footer__legal p { overflow-wrap: break-word; }

  /* Lightbox controls clear of the image on a narrow screen */
  .lightbox { padding: var(--sp-3); }
  .lightbox__btn { width: 2.75rem; height: 2.75rem; }
  .lightbox__prev { left: var(--sp-2); }
  .lightbox__next { right: var(--sp-2); }
}

/* ≥ 1600px — large desktop / entry-level 4K: allow the grid to breathe */
@media (min-width: 1600px) {
  :root {
    --container-width: 82%;
    --container-max: var(--container-max-wide);
  }
}

/* ≥ 2200px — true 4K: cap measure growth, keep line lengths sane */
@media (min-width: 2200px) {
  :root {
    --container-max: 1600px;
    --fs-root: 112.5%; /* 18px base so text stays readable at viewing distance */
  }
}

/* ==========================================================================
   9. REDUced MOTION & PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .nav-scrim, .cta-band, .strip { display: none !important; }
  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
}