/* ============================================================
   CARPETPRINTER — style.css  (EN-first, red brand)
   Reines CSS. Performance-Regeln aus DS-Handoff §5 beibehalten:
   - Sticky-Header DECKEND (#fff), kein backdrop-blur.
   - translateZ NUR auf Hero-Media (eigener GPU-Layer), NICHT auf .head.
   - Header-Höhe konstant, Logo nur per scale() schrumpfen.
   - Roboto lokal gehostet (DSGVO).
   ============================================================ */
@font-face{font-family:'Roboto';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../font/Roboto.woff2') format('woff2')}

:root{
  --ink:#34363a;--ink-2:#2b2d30;--ink-soft:#52555b;--muted:#878c93;
  --line:#e6e7e9;--paper:#ffffff;--paper-2:#f4f5f6;--grey:#ececef;
  --red:#e20612;--red-deep:#b00510;--red-bright:#ff2a32;
  --grad:linear-gradient(100deg,var(--red-deep),var(--red) 55%,var(--red-bright));
  --shadow-1:0 2px 10px rgba(52,54,58,.07);--shadow-2:0 24px 60px -24px rgba(52,54,58,.4);
  --ease:cubic-bezier(.22,.61,.36,1);--wrap:1280px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Roboto,system-ui,Arial,sans-serif;color:var(--ink);background:var(--paper);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.lock{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(100% - 48px,var(--wrap));margin-inline:auto}

/* ---------- Brand eyebrow (halftone dots = Logo-Signatur) ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:.72rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.bars{display:inline-flex;align-items:center;gap:3px}
.bars i{display:block;border-radius:50%;background:var(--red)}
.bars i:nth-child(1){width:5px;height:5px;opacity:.45}
.bars i:nth-child(2){width:7px;height:7px;opacity:.75}
.bars i:nth-child(3){width:9px;height:9px}

/* ---------- Header ---------- */
.head{position:sticky;top:0;z-index:80;background:#fff;border-bottom:1px solid transparent;
  transition:box-shadow .35s var(--ease),border-color .35s var(--ease)}
.head .topline{height:4px;background:var(--grad)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:10px 24px;width:min(100%,calc(var(--wrap) + 48px));margin-inline:auto}
.head.scrolled{box-shadow:var(--shadow-1);border-bottom-color:var(--line)}
.brand img{height:92px;width:auto;transition:transform .35s var(--ease);transform-origin:left center}
.head.scrolled .brand img{transform:scale(.86)}
.nav{display:flex;align-items:center;gap:32px}
.nav a:not(.cta){position:relative;font-weight:500;font-size:1rem;padding:6px 0;transition:color .2s var(--ease)}
.nav a:not(.cta)::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.nav a:not(.cta):hover{color:var(--red)}
.nav a:not(.cta):hover::after,.nav a.active::after{transform:scaleX(1)}
.nav .cta{background:var(--grad);color:#fff;padding:11px 22px;border-radius:999px;font-weight:700;
  box-shadow:0 8px 20px -8px var(--red-deep);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.nav .cta:hover{transform:translateY(-2px);box-shadow:0 14px 26px -10px var(--red-deep)}
.burger{display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:12px;background:#fff;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;z-index:90}
.burger span{width:22px;height:2px;background:var(--ink);transition:.3s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.scrim{position:fixed;inset:0;background:rgba(20,21,23,.45);opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease);z-index:70}
.scrim.show{opacity:1;pointer-events:auto}

/* ---------- Language switch ---------- */
.lang{position:relative;margin-left:10px}
.lang-btn{display:inline-flex;align-items:center;gap:6px;font:inherit;line-height:1;cursor:pointer;
  color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 9px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.lang-btn:hover{border-color:var(--muted)}
.lang-cur{font-size:.74rem;font-weight:700;letter-spacing:.06em}
.lang-globe{width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round}
.lang-chev{width:13px;height:13px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
.lang.open .lang-chev{transform:rotate(180deg)}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:152px;display:none;flex-direction:column;gap:2px;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px;z-index:90;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.28)}
.lang.open .lang-menu{display:flex}
.lang-menu a{display:flex;align-items:center;gap:11px;padding:8px 14px;border-radius:8px;font-size:.86rem;
  color:var(--ink-soft);transition:background .15s var(--ease),color .15s var(--ease)}
.lang-menu a b{min-width:22px;font-size:.7rem;font-weight:800;letter-spacing:.04em;color:var(--muted)}
.lang-menu a:hover{background:var(--paper-2);color:var(--ink)}
.lang-menu a:hover b{color:var(--ink)}
.lang-menu a.on,.lang-menu a.on b{color:var(--red)}

/* rounded flag pills (pure CSS, no emoji — renders identically on Windows) */
.flag{flex:none;width:21px;height:15px;border-radius:5px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.flag-fr{background:linear-gradient(90deg,#0055A4 0 33.34%,#fff 33.34% 66.67%,#EF4135 66.67%)}
.flag-it{background:linear-gradient(90deg,#008C45 0 33.34%,#fff 33.34% 66.67%,#CD212A 66.67%)}
.flag-de{background:linear-gradient(180deg,#000 0 33.34%,#DD0000 33.34% 66.67%,#FFCE00 66.67%)}
.flag-es{background:linear-gradient(180deg,#AA151B 0 25%,#F1BF00 25% 75%,#AA151B 75%)}
.flag-gb{background:#012169 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='40' viewBox='0 0 60 40'%3E%3Cpath d='M0,0 L60,40 M60,0 L0,40' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M30,0 V40 M0,20 H60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0 V40 M0,20 H60' stroke='%23C8102E' stroke-width='6'/%3E%3Cpath d='M0,0 L60,40 M60,0 L0,40' stroke='%23C8102E' stroke-width='2'/%3E%3C/svg%3E") center/cover no-repeat}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:999px;font-weight:700;
  font-size:1rem;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 12px 30px -12px var(--red)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 36px -14px var(--red)}
.btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.35)}
.btn-ghost:hover{background:rgba(255,255,255,.1);transform:translateY(-3px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{transform:translateY(-3px);background:var(--ink-2)}
.btn .arr{transition:transform .25s var(--ease)}.btn:hover .arr{transform:translateX(4px)}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;background:var(--ink);overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media video,.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.6;transform:scale(1.06) translateZ(0);will-change:transform;backface-visibility:hidden}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(52,54,58,.88) 24%,rgba(52,54,58,.5) 70%,rgba(176,5,16,.34))}
.hero-in{padding-block:clamp(70px,12vw,140px);max-width:900px}
.hero .eyebrow{color:var(--red-bright)}
.hero h1{color:#fff;font-weight:900;letter-spacing:-.025em;line-height:1.02;
  font-size:clamp(2.5rem,7vw,5.4rem);margin:.35em 0 .55em}
.hero h1 em{font-style:normal;color:var(--red-bright)}
.hero p{color:#dfe2e3;font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:640px;font-weight:300}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.hero-strip{position:relative;z-index:2;background:rgba(255,255,255,.06);border-top:1px solid rgba(255,255,255,.12)}
.hero-strip-in{display:flex;flex-wrap:wrap;gap:14px 34px;padding-block:20px}
.hero-strip .hs{display:inline-flex;align-items:center;gap:10px;font-size:.92rem;font-weight:600;
  color:#eef0f1;letter-spacing:.01em}
.hero-strip .hs b{font-weight:800;color:#fff}
.hero-strip .hs svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--red-bright);
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hero-strip .hs.eu svg{width:26px;height:26px;fill:#fff;stroke:none}

/* ---------- Section base ---------- */
.sec{padding-block:clamp(66px,8.5vw,116px);position:relative}
.sec-head{max-width:700px;margin-bottom:48px}
.sec-head h1,.sec-head h2{font-weight:900;letter-spacing:-.02em;line-height:1.05;font-size:clamp(2rem,4.4vw,3.4rem);margin:.3em 0 .35em}
.sec-head p{color:var(--ink-soft);font-size:1.1rem;font-weight:300}
.sec-head h1 .hl,.sec-head h2 .hl{color:var(--red)}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}

/* ---------- Made-in badges ---------- */
.madein{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--line);
  padding:6px 13px;border-radius:999px}
.madein svg{width:18px;height:13px;border-radius:2px;flex:none}

/* ============ HOME: quality tiles ============ */
.qtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.qtile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:424px;
  padding:26px;border-radius:20px;overflow:hidden;background:var(--ink);color:#fff;box-shadow:var(--shadow-1);
  contain:paint;   /* the tile already clips; this tells the browser so, and keeps
                      the hover repaint from leaking into the rest of the section */
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.qtile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;
  transition:transform .6s var(--ease)}
.qtile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(52,54,58,.15) 0%,transparent 34%,rgba(22,23,26,.34) 72%,rgba(20,21,23,.6) 100%)}
.qtile>*{position:relative;z-index:1}
.qtile:hover{transform:translateY(-6px);box-shadow:var(--shadow-2)}
.qtile:hover img{transform:scale(1.06);will-change:transform}   /* promoted on hover only, never for all four at once */
.qtile .qnum{align-self:flex-start;font-size:.68rem;font-weight:700;letter-spacing:.12em;color:#fff;
  background:rgba(52,54,58,.55);padding:5px 11px;border-radius:999px;margin-bottom:auto}
.qbody{position:relative;margin:0 -26px -26px;padding:6px 26px 24px;border-radius:0 0 20px 20px;
  background:linear-gradient(180deg,rgba(12,13,15,0),rgba(12,13,15,0) 36%,rgba(12,13,15,.8) 70%,rgba(12,13,15,.93) 100%)}
.qtile h3{font-size:1.5rem;font-weight:800;margin:0 0 6px;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.qtile p{font-size:.94rem;color:#eceef0;font-weight:300;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.qtile .qgo{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-weight:700;font-size:.92rem;color:#fff}
.qtile .qgo .arr{transition:transform .25s var(--ease)}
.qtile:hover .qgo .arr{transform:translateX(4px)}

/* ============ HOME: showcase feature rows ============ */
.feature.alt{background:var(--paper-2)}
.feature .band-in{align-items:center}
/* Wider media column for the events collage. This used to be an inline
   style on the div -- and an inline style outranks every media query, so
   the layout never collapsed on mobile: the copy stayed pinned in a 1fr
   column next to the images. As a class it collapses with the rest. */
.band-in.band-media-wide{grid-template-columns:1.6fr 1fr}
.feature h2{color:var(--ink);font-weight:900;letter-spacing:-.02em;line-height:1.06;font-size:clamp(1.7rem,3.4vw,2.6rem);margin:.3em 0 .4em}
.feature p{color:var(--ink-soft);font-weight:300;max-width:520px}
.feat-img{width:100%;object-fit:cover;border-radius:18px;box-shadow:var(--shadow-1);aspect-ratio:4/3}
/* Feature-Aufzaehlung: Grid statt Flex. Der alte Selektor `.feat-points span`
   traf auch das innere Text-Span und machte <b> + Beschreibung zu zwei
   Flex-Items -> Folgezeilen sprangen unter den Gedankenstrich. */
.feat-points{display:grid;gap:12px;margin:20px 0 24px}
.feat-points > span{display:grid;grid-template-columns:7px 1fr;column-gap:12px;align-items:start;text-align:left;color:var(--ink-soft);font-size:.96rem;font-weight:300;line-height:1.55}
.feat-points > span > span{display:block}
.feat-points b{color:var(--ink);font-weight:700}
.feat-points > span > .dot{display:block;width:7px;height:7px;border-radius:50%;background:var(--red);transform:none;margin-top:calc((.96rem * 1.55 - 7px) / 2)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.stack{display:grid;gap:14px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px}
.duo img,.stack img,.trio img{width:100%;object-fit:cover;border-radius:16px;box-shadow:var(--shadow-1)}
.stack img{aspect-ratio:4/3}
.duo img{aspect-ratio:5/7}
.duo img:last-child{margin-top:36px}
.trio img{aspect-ratio:2/3;object-position:center 95%}
#events{padding-block:clamp(44px,5.5vw,80px)}
.freestanding img{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 22px 38px rgba(52,54,58,.26))}

/* ============ HOME: signature red diagonal band ============ */
.redband{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding-block:clamp(64px,8vw,120px)}
.redband-fill{position:absolute;inset:0 38% 0 0;background:var(--grad);clip-path:polygon(0 0,100% 0,calc(100% - 80px) 100%,0 100%)}
.redband-fill::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.6) 2.4px,transparent 2.7px);background-size:21px 21px;-webkit-mask:linear-gradient(90deg,#000,transparent 40%);mask:linear-gradient(90deg,#000,transparent 40%);opacity:.5}
.redband-in{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.redband .eyebrow{color:#fff}.redband .eyebrow .bars i{background:#fff}
.redband-copy h2{font-weight:900;letter-spacing:-.02em;line-height:1.05;font-size:clamp(1.9rem,3.8vw,3rem);margin:.25em 0 .45em}
.redband-copy p{color:#ffeced;font-weight:300;max-width:480px;margin-bottom:24px}
.redband-media img{width:100%;border-radius:18px;box-shadow:0 30px 70px -25px rgba(0,0,0,.6)}
/* two views, crossfaded. Opacity only: the compositor handles it on its own
   layer, with no 3D context, no perspective and nothing promoted permanently.
   The arrow steps through, and it drifts by itself only while actually on
   screen (see main.js) -- offscreen or in a background tab it does nothing. */
.xfade{position:relative;margin-left:-6%}
.xfade .xf{display:block;opacity:0;transition:opacity .5s var(--ease)}
.xfade .xf.on{opacity:1}
.xfade .xf:not(:first-of-type){position:absolute;inset:0;height:100%;object-fit:cover}
.xf-nav{position:absolute;right:14px;bottom:14px;width:46px;height:46px;border-radius:50%;
  border:0;cursor:pointer;background:rgba(255,255,255,.94);color:var(--ink);
  display:grid;place-items:center;box-shadow:0 8px 22px rgba(0,0,0,.35);
  transition:transform .2s var(--ease),background .2s var(--ease)}
.xf-nav:hover{transform:translateX(3px);background:#fff}
.xf-nav:focus-visible{outline:3px solid #fff;outline-offset:3px}
.xf-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
.xf-dots{position:absolute;left:18px;bottom:26px;display:inline-flex;gap:7px}
.xf-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45);
  transition:background .3s var(--ease),transform .3s var(--ease)}
.xf-dots i.on{background:#fff;transform:scale(1.25)}
@media (prefers-reduced-motion:reduce){.xfade .xf{transition:none}}

/* ============ HOME: teaser bands ============ */
.band{position:relative;color:#fff;overflow:hidden}
.band.red{background:var(--ink)}
.band.red::before{content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(120% 140% at 100% 0%,rgba(226,6,18,.55),transparent 56%)}
.band-in{position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;
  padding-block:clamp(56px,7vw,96px)}
.band h2{font-weight:900;letter-spacing:-.02em;line-height:1.06;font-size:clamp(1.8rem,3.6vw,2.8rem);margin:.3em 0 .4em}
.band p{color:#dfe2e3;font-weight:300;max-width:520px}
.band .eyebrow{color:var(--red-bright)}
.band-media{border-radius:20px;overflow:hidden;box-shadow:var(--shadow-2)}
.band-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.band-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.bstat{display:flex;flex-direction:column-reverse;   /* label sits FIRST in the DOM so a
     screen reader says "Made in — The EU", not "The EU — Made in"; the visual
     order stays value-on-top via column-reverse */
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:20px}
.bstat b{display:block;font-size:1.8rem;font-weight:900}
.bstat span{font-size:.85rem;color:#cdd0d2}
/* Carpets: sample-set freistanding image, overflowing the band top */
#samples{overflow:visible}
.sample-media{align-self:center}
.sample-media img{width:100%;height:auto;object-fit:contain;
  margin-block:clamp(-96px,-7vw,-48px) clamp(-40px,-3vw,-16px);
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.5))}

/* ============ CARPETS: sticky sub-nav ============ */
.cat-nav{position:sticky;z-index:60;background:#fff;border-bottom:1px solid var(--line)}
.cat-nav-in{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  width:min(100% - 48px,var(--wrap));margin-inline:auto;padding:10px 0}
.cat-nav-in::-webkit-scrollbar{display:none}
.cat-nav a{white-space:nowrap;font-size:.92rem;font-weight:600;color:var(--ink-soft);
  padding:9px 16px;border-radius:999px;transition:.22s var(--ease)}
.cat-nav a:hover{color:var(--ink);background:var(--paper-2)}
.cat-nav a.active{background:var(--ink);color:#fff}

/* ============ CARPETS: sections ============ */
.csec{padding-block:clamp(60px,7.5vw,104px);border-bottom:1px solid var(--line);scroll-margin-top:130px}
.csec:nth-child(even){background:var(--paper-2)}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.csec:nth-child(even) .cgrid{direction:rtl}.csec:nth-child(even) .cgrid>*{direction:ltr}
.cshot{position:relative;border-radius:22px;overflow:hidden;background:#fff;box-shadow:var(--shadow-2);
  border:1px solid var(--line);aspect-ratio:4/3;cursor:zoom-in}
.cshot img{width:100%;height:100%;object-fit:cover;transition:transform .1s linear}
.cshot.zoomed img{transition:none}
.cshot .zhint{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.92);display:grid;place-items:center;box-shadow:var(--shadow-1);color:var(--ink)}
.cshot.zoomed .zhint{opacity:0}
.cshot .zhint svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ccopy h2{font-weight:900;letter-spacing:-.02em;line-height:1.05;font-size:clamp(1.9rem,3.8vw,3rem);margin:.25em 0 .4em}
.ccopy h2 .hl{color:var(--red)}
.ccopy>p{color:var(--ink-soft);font-size:1.08rem;font-weight:300;max-width:520px;margin-bottom:18px}
.cspecs{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 22px}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:600;color:var(--ink);
  background:#fff;border:1px solid var(--line);padding:7px 13px;border-radius:999px}
.csec:nth-child(even) .chip{background:#fff}
.chip b{color:var(--red);font-weight:800}
.ccopy .madein{margin-bottom:18px}

/* ---------- Footer ---------- */
.foot{background:var(--ink);color:#cdd0d2;padding-block:clamp(48px,6vw,80px) 28px;position:relative}
.foot .topline{height:4px;background:var(--grad);position:absolute;top:0;left:0;right:0}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:36px}
.foot-brand img{height:80px;width:auto;display:block}
.foot-logo{display:inline-block;margin-bottom:16px;transition:opacity .2s var(--ease)}
.foot-logo:hover{opacity:.82}
.foot-loc{font-size:.9rem;line-height:1.5;color:#9aa0a6;margin:0}
.foot-loc-dim{color:#7f858c;margin-top:2px}
.foot-brand .brandof{font-size:.82rem;color:#9aa0a6;line-height:1.45;margin:0 0 10px}
.foot h4{color:#fff;font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}
.foot-col a:not(.foot-mail){position:relative;display:block;width:fit-content;color:#cdd0d2;padding:5px 0;transition:color .2s var(--ease)}
.foot-col a:not(.foot-mail)::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.foot-col a:not(.foot-mail):hover{color:#fff}
.foot-col a:not(.foot-mail):hover::after{transform:scaleX(1)}
.foot .small{font-size:.86rem;line-height:1.65;color:#9aa0a6}
.foot-contact .small{margin:14px 0 0;max-width:236px}
.foot-col a.foot-mail{display:inline-flex;width:auto;align-items:center;gap:9px;color:#fff;font-weight:700;font-size:.98rem;
  border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:11px 15px;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
.foot-col a.foot-mail:hover{border-color:#fff;background:rgba(255,255,255,.07);transform:translateY(-1px)}
.foot-mail-i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.foot-mail .foot-arr{transition:transform .2s var(--ease)}
.foot-col a.foot-mail:hover .foot-arr{transform:translateX(3px)}
.foot-bar{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:.84rem;color:#8b9097}
.foot-bar-r{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap}
.foot-bar a{display:inline;padding:0;color:#8b9097;text-decoration:underline;text-underline-offset:2px;transition:color .2s var(--ease)}
.foot-bar a:hover{color:#fff}
.foot-bar a#cp-consent-open::before{content:"·";margin-right:14px;color:#5f646b;text-decoration:none;display:inline-block}

/* ---------- To-top ---------- */
.toTop{position:fixed;right:28px;bottom:28px;width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;
  background:var(--grad);color:#fff;display:grid;place-items:center;box-shadow:0 14px 30px -10px var(--red-deep);
  opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .3s var(--ease),transform .3s var(--ease);z-index:65}
.toTop.show{opacity:1;pointer-events:auto;transform:none}
.toTop svg{stroke:#fff;fill:none}

/* ---------- Gallery page-nav arrows (< >) ---------- */
.pagenav{position:fixed;top:50%;transform:translateY(-50%);z-index:55;width:72px;height:150px;
  display:grid;place-items:center;color:#cfd2d6;
  transition:color .2s var(--ease),transform .2s var(--ease)}
.pagenav:hover{color:var(--red)}
.pagenav.prev{left:6px}.pagenav.prev:hover{transform:translateY(-50%) translateX(-3px)}
.pagenav.next{right:6px}.pagenav.next:hover{transform:translateY(-50%) translateX(3px)}
.pagenav svg{width:56px;height:56px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Carpets: macro/photo 2-state toggle ---------- */
.cswap{position:absolute;right:12px;bottom:12px;width:74px;height:74px;padding:0;cursor:pointer;
  border:2px solid #fff;border-radius:14px;overflow:hidden;line-height:0;background:#fff;
  box-shadow:0 6px 18px rgba(52,54,58,.32);z-index:2;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.cswap img{width:100%;height:100%;object-fit:cover;display:block;transform:none!important}
.cswap:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 10px 24px rgba(52,54,58,.4)}
.cswap:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.cswap::after{content:"";position:absolute;inset:0;border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.cshot.zoomed .cswap{opacity:1}   /* stays put: it is the only way onto the macro */
.cswap-tag{position:absolute;right:12px;bottom:92px;z-index:2;
  background:rgba(255,255,255,.94);color:var(--ink);border-radius:999px;
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 10px;box-shadow:var(--shadow-1);pointer-events:none}
.cshot.zoomed .cswap-tag{opacity:1}
@media (max-width:560px){
  .cswap{width:62px;height:62px}
  .cswap-tag{bottom:80px;font-size:.63rem}
}

/* ============ Responsive ============ */
@media(max-width:1040px){
  .qtiles{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .nav{position:fixed;inset:0 0 0 auto;width:min(82vw,360px);background:#fff;flex-direction:column;
    align-items:flex-start;justify-content:flex-start;gap:6px;padding:96px 28px 28px;
    transform:translateX(100%);transition:transform .38s var(--ease);box-shadow:-20px 0 50px -20px rgba(0,0,0,.3);z-index:85}
  .nav.open{transform:none}
  .nav a:not(.cta){font-size:1.15rem;padding:10px 0;width:100%}
  .nav .cta{margin-top:10px}
  .lang{margin:16px 0 0;width:100%}
  .lang-btn{display:none}
  .lang-menu{position:static;display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;
    min-width:0;padding:0;border:0;box-shadow:none}
  .lang-menu a{border:1px solid var(--line);border-radius:10px;padding:9px 13px;font-size:.95rem}
  .lang-menu a b{min-width:0}
  .burger{display:flex}
  .cgrid,.band-in,.band-in.band-media-wide{grid-template-columns:1fr;gap:32px}
  .redband-in{grid-template-columns:1fr;gap:28px}
  .redband-fill{inset:0;clip-path:none}
  .redband-fill::after{-webkit-mask:linear-gradient(180deg,#000,transparent 65%);mask:linear-gradient(180deg,#000,transparent 65%)}
  .redband-media img,.redband-media .xfade{margin-left:0}
  .sample-media img{margin-block:clamp(-56px,-9vw,-24px) 0;max-width:340px;margin-inline:auto}
  .csec:nth-child(even) .cgrid{direction:ltr}
  .trio{grid-template-columns:1fr 1fr}
  .pagenav{display:none}
}
@media(max-width:560px){
  .qtiles{grid-template-columns:1fr}
  .trio{grid-template-columns:1fr}
  .duo{grid-template-columns:1fr;gap:16px}
  .duo img{aspect-ratio:16/10}
  .duo img:last-child{margin-top:0}
  .foot-grid{grid-template-columns:1fr}
  .brand img{height:70px}
}
/* ============ CONTACT / ENQUIRY ============ */
.enquiry-sec{padding-top:clamp(44px,6vw,90px)}
.enquiry-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,64px);align-items:start}
.enquiry-info .mail{display:inline-block;font-size:1.35rem;font-weight:900;color:var(--red);
  margin-bottom:26px;letter-spacing:-.01em}
.enquiry-info .mail:hover{color:var(--red-deep)}
.eq-list{display:grid;gap:20px}
.eq-list>div{display:flex;gap:13px}
.eq-list .bars{align-self:flex-start;margin-top:7px;flex:none}   /* without align-self the flex item stretches to full block height
      and .bars{align-items:center} then parks the dots in the middle */
.eq-list b{display:block;color:var(--ink);font-size:.96rem;margin-bottom:2px}
.eq-list span{color:var(--ink-soft);font-size:.92rem;font-weight:300;line-height:1.6}

.form{display:grid;gap:16px;background:var(--paper-2);border:1px solid var(--line);
  border-radius:22px;padding:clamp(22px,3vw,34px);box-shadow:var(--shadow-1)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:.82rem;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.field input,.field select,.field textarea{font:inherit;font-size:.98rem;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:100%;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.field textarea{min-height:132px;resize:vertical;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);
  box-shadow:0 0 0 3px rgba(226,6,18,.12)}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2352555b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:14px}
.sample{display:inline-flex;gap:10px;align-items:center;font-size:.92rem;font-weight:600;color:var(--ink);cursor:pointer}
.sample input{accent-color:var(--red);width:17px;height:17px;flex:none}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--ink-soft);
  font-weight:300;line-height:1.5}
.consent input{margin-top:3px;accent-color:var(--red);width:16px;height:16px;flex:none}
.consent a{color:var(--red);font-weight:600}
.form .btn{justify-self:start;margin-top:4px}
.form-note{border-radius:12px;padding:13px 16px;font-size:.92rem;font-weight:500;margin-bottom:16px}
.form-note.ok{background:#e9f7ec;border:1px solid #b6e3c0;color:#1c6b32}
.form-note.err{background:#fdeced;border:1px solid #f5bcc0;color:#a3111c}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media(max-width:860px){
  .enquiry-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
}

/* ============ LEGAL PAGES ============ */
.legal-hero{padding-block:clamp(40px,6vw,84px) clamp(24px,3vw,40px);border-bottom:1px solid var(--line)}
.legal-hero h1{font-size:clamp(2rem,4.6vw,3rem);font-weight:900;letter-spacing:-.02em;margin:.32em 0 .34em}
.legal-hero p{color:var(--ink-soft);max-width:62ch;font-weight:300;line-height:1.6}
.legal{padding-block:clamp(40px,6vw,80px)}
.legal-body{max-width:820px}
.legal-toc{display:flex;flex-wrap:wrap;gap:8px 10px;padding:16px 18px;margin-bottom:38px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:16px}
.legal-toc a{font-size:.85rem;font-weight:600;color:var(--ink-soft);padding:5px 11px;border-radius:999px;
  background:#fff;border:1px solid var(--line);transition:color .2s var(--ease),border-color .2s var(--ease)}
.legal-toc a:hover{color:var(--red);border-color:var(--red)}
.legal-body h2{font-size:1.4rem;font-weight:800;color:var(--ink);margin:1.85em 0 .5em;
  display:flex;gap:.5em;align-items:baseline;scroll-margin-top:96px}
.legal-body h2 .num{color:var(--red);font-weight:900}
.legal-body h3{font-size:1.05rem;font-weight:700;color:var(--ink);margin:1.5em 0 .4em}
.legal-body p,.legal-body li{color:var(--ink-soft);font-weight:300;line-height:1.75;font-size:.98rem}
.legal-body a{color:var(--red);font-weight:600}
.legal-body ul,.legal-body ol{margin:.6em 0 .6em 1.35em;display:grid;gap:.55em}
.legal-body ol.alpha{list-style:lower-alpha}
.legal-card{background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--red);
  border-radius:14px;padding:20px 22px;margin:1.3em 0;display:grid;gap:4px}
.legal-card .lbl{font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.legal-card .biz{font-size:1.15rem;font-weight:900;color:var(--ink);letter-spacing:.02em}
.legal-card .owner{font-weight:600;color:var(--ink)}
.legal-card .brandof{font-size:.86rem;color:var(--ink-soft);font-weight:400;margin-top:-1px}
.legal-card p{margin:0;color:var(--ink-soft);line-height:1.6}
.legal-card a{color:var(--red);font-weight:600}
.legal-updated{margin-top:2.4em;font-size:.85rem;color:var(--muted);font-style:italic}

/* ---------- Scroll parallax (JS-driven, cheap translate) ---------- */
[data-parallax]{will-change:transform}
@media (prefers-reduced-motion:reduce){[data-parallax]{transform:none!important}}

/* ---------- Tight section (less vertical breathing room) ---------- */
.sec.tight{padding-block:clamp(40px,5.5vw,72px)}

/* ---------- Mini gallery (dirt-barrier feature) ---------- */
.gallery{display:flex;flex-direction:column;gap:14px}
.gallery-main{border-radius:18px;overflow:hidden;box-shadow:var(--shadow-1)}
.gallery-main img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:opacity .3s var(--ease)}
.gallery-main.fading img{opacity:.12}
.gallery-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gthumb{padding:0;border:2px solid transparent;border-radius:12px;overflow:hidden;cursor:pointer;
  background:none;line-height:0;transition:border-color .2s var(--ease),transform .2s var(--ease)}
.gthumb img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;transition:opacity .2s var(--ease)}
.gthumb:not(.active) img{opacity:.6}
.gthumb:hover{transform:translateY(-2px)}
.gthumb:hover img{opacity:.85}
.gthumb.active{border-color:var(--red)}
.gthumb:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ---------- Consent banner (Google Ads opt-in) ---------- */
.cp-consent{position:fixed;left:0;right:0;bottom:0;z-index:1200;background:var(--paper);
  border-top:1px solid var(--line);box-shadow:0 -18px 40px -24px rgba(52,54,58,.35);
  transform:translateY(110%);transition:transform .4s var(--ease)}
.cp-consent::before{content:"";display:block;height:3px;background:var(--grad)}
.cp-consent.show{transform:translateY(0)}
.cp-consent-in{width:min(100% - 48px,var(--wrap));margin-inline:auto;padding:16px 0;
  display:flex;gap:18px 28px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cp-consent-txt{margin:0;flex:1 1 340px;font-size:.9rem;line-height:1.55;color:var(--ink-soft)}
.cp-consent-txt a{color:var(--red);font-weight:600}
.cp-consent-btns{display:flex;gap:10px;flex:none}
.cp-btn{font:inherit;font-weight:700;font-size:.9rem;padding:10px 22px;border-radius:999px;
  cursor:pointer;border:1px solid transparent;transition:transform .2s var(--ease),box-shadow .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.cp-btn-ghost{background:#fff;border-color:var(--line);color:var(--ink-soft)}
.cp-btn-ghost:hover{color:var(--ink);border-color:var(--muted)}
.cp-btn-solid{background:var(--grad);color:#fff;box-shadow:0 8px 20px -8px var(--red-deep)}
.cp-btn-solid:hover{transform:translateY(-2px);box-shadow:0 14px 26px -10px var(--red-deep)}
@media (max-width:560px){
  .cp-consent-in{flex-direction:column;align-items:stretch;gap:14px}
  .cp-consent-btns{justify-content:flex-end}
}
@media (prefers-reduced-motion:reduce){.cp-consent{transition:none}}

/* ---------- Events media collage: tall portrait video + two staggered landscape stills ---------- */
.evmedia{display:grid;grid-template-columns:.82fr 1fr;gap:22px;align-items:center}
.ev-vid{border-radius:16px;overflow:hidden;box-shadow:var(--shadow-1);aspect-ratio:9/16;background:#0b0b0c}
.ev-vid video{width:100%;height:100%;object-fit:cover;display:block}
.ev-stills{display:flex;flex-direction:column;gap:20px}   /* will-change comes from [data-parallax] */
.ev-stills img{aspect-ratio:4/3;object-fit:cover;border-radius:16px;box-shadow:var(--shadow-1);display:block}
.ev-stills img:first-child{width:94%;align-self:flex-start}
.ev-stills img:last-child{width:80%;align-self:flex-end}
@media (max-width:780px){
  .evmedia{grid-template-columns:1fr;gap:16px}
  .ev-vid{aspect-ratio:5/6;max-height:66vh}
  .ev-stills{flex-direction:row}
  .ev-stills img{width:50%!important;align-self:auto!important;aspect-ratio:4/3}
}

/* ---------- Exhibitions ---------- */
/* uses the shared .gallery styles (see mini gallery block) */
/* ---------- Language suggestion toast (soft hint, no redirect) ---------- */
/* Sits under the header, top right -- deliberately NOT a bottom bar, so it
   never collides with the consent banner. Fixed, so it costs no CLS. */
.cp-lang{position:fixed;top:128px;right:24px;z-index:1150;
  width:min(calc(100vw - 48px),380px);
  display:flex;align-items:center;gap:12px;
  padding:12px 12px 12px 16px;border-radius:14px;
  background:var(--paper);border:1px solid var(--line);
  box-shadow:0 22px 46px -22px rgba(52,54,58,.42);
  opacity:0;transform:translateY(-10px);pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.cp-lang.show{opacity:1;transform:translateY(0);pointer-events:auto}
.cp-lang .flag{flex:none}
.cp-lang-txt{margin:0;flex:1 1 auto;font-size:.86rem;line-height:1.4;color:var(--ink-soft)}
.cp-lang-go{flex:none;font-weight:700;font-size:.86rem;color:var(--red);
  padding:6px 12px;border-radius:999px;border:1px solid var(--line);
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.cp-lang-go:hover{border-color:var(--red);background:var(--paper-2)}
.cp-lang-x{flex:none;width:26px;height:26px;display:grid;place-items:center;
  background:none;border:0;cursor:pointer;color:var(--muted);border-radius:50%;
  transition:color .2s var(--ease),background .2s var(--ease)}
.cp-lang-x:hover{color:var(--ink);background:var(--grey)}
.cp-lang-x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cp-lang-go:focus-visible,.cp-lang-x:focus-visible{outline:2px solid var(--red);outline-offset:2px}
@media (max-width:860px){
  .cp-lang{top:106px;right:16px;left:16px;width:auto}
}
@media (prefers-reduced-motion:reduce){.cp-lang{transition:none}}