@import url('fonts.css');

/* ==========================================================================
   KAVLAK EISMANUFAKTUR — design system
   Palette, type, spacing and motion tokens are derived from the KAVLAK logo:
   concentric rings, angular mosaic fragments, turquoise + orange on graphite.
   ========================================================================== */

:root {
  /* ---- brand colour ---- */
  --ink:        #171616;
  --charcoal:   #333334;
  --graphite:   #5B5B5D;
  --graphite-2: #9A9A9E;   /* the on-dark grey: 6.2:1 against --ink */
  --turq:       #20BCC2;
  --green:      #4F9C55;   /* pistachio green, for the Platino & Vegan tier */
  --orange:     #FF941D;
  --paper:      #F7F7F4;
  --white:      #FFFFFF;

  /* ---- derived surfaces & lines ---- */
  --paper-2:    #F1F1ED;
  --stone:      #ECECE7;
  --ink-80:     rgba(23, 22, 22, .80);
  --ink-62:     rgba(23, 22, 22, .62);
  --ink-40:     rgba(23, 22, 22, .40);
  --rule:       rgba(23, 22, 22, .13);
  --rule-2:     rgba(23, 22, 22, .26);
  --rule-dark:  rgba(247, 247, 244, .16);
  --turq-soft:  rgba(32, 188, 194, .14);
  --orange-soft:rgba(255, 148, 29, .14);

  /* ---- type ---- */
  --display: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --text:    'Manrope', 'Helvetica Neue', Arial, sans-serif;

  --t-xs:   clamp(0.688rem, 0.67rem + 0.09vw, 0.75rem);
  --t-sm:   clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem);
  --t-base: clamp(0.938rem, 0.91rem + 0.14vw, 1.031rem);
  --t-md:   clamp(1.063rem, 1.01rem + 0.26vw, 1.25rem);
  --t-lg:   clamp(1.375rem, 1.24rem + 0.68vw, 1.875rem);
  --t-xl:   clamp(1.875rem, 1.55rem + 1.62vw, 3rem);
  --t-2xl:  clamp(2.5rem, 1.9rem + 3vw, 4.5rem);
  --t-3xl:  clamp(3rem, 1.9rem + 5.5vw, 7rem);

  /* ---- rhythm ---- */
  --r-xs:   8px;
  --r-sm:   14px;
  --r:      20px;
  --r-lg:   28px;
  --r-pill: 999px;

  --gutter: clamp(20px, 5vw, 72px);
  --shell:  1320px;
  --sec-y:  clamp(80px, 11vw, 168px);

  /* ---- motion ---- */
  --e-out:   cubic-bezier(.22, 1, .36, 1);
  --e-soft:  cubic-bezier(.4, 0, .2, 1);
  --dur:     .55s;
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  max-width: 100%;
  overscroll-behavior-x: none;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--t-base);
  line-height: 1.65;
  font-weight: 400;
  overflow-x: clip;
  max-width: 100%;
  overscroll-behavior-x: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
address { font-style: normal; }
ul, ol { list-style: none; }
::selection { background: var(--turq); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--turq);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--ink); color: var(--paper);
  padding: 12px 20px; font-size: var(--t-sm); font-weight: 700;
  transition: top .2s var(--e-out);
}
.skip:focus { top: 12px; }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */
.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}
.section { padding-block: var(--sec-y); position: relative; }
.section--tight { padding-block: clamp(56px, 7vw, 104px); }

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
.display {
  font-family: var(--display);
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.025em;
  text-transform: uppercase;
  text-wrap: balance;
}
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.02; letter-spacing: -.02em; }

.lede {
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--ink-80);
  max-width: 46ch;
  text-wrap: pretty;
}
p { text-wrap: pretty; }

.kicker {
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--graphite);
}

/* editorial section header ------------------------------------------------ */
.sec-head { max-width: 62ch; margin-bottom: clamp(40px, 5vw, 72px); }
.sec-head--wide { max-width: none; }

.sec-idx {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: clamp(18px, 2vw, 28px);
}
.sec-num {
  font-family: var(--display);
  font-size: var(--t-sm); font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
  padding: 4px 10px;
  border: 1.5px solid var(--ink);
  line-height: 1;
}
.sec-idx .sec-line {
  flex: 0 0 clamp(28px, 6vw, 72px);
  height: 1.5px; background: var(--ink);
  transform-origin: left; transform: scaleX(0);
  transition: transform .8s var(--e-out) .1s;
}
.sec-idx.is-in .sec-line, .is-in .sec-idx .sec-line { transform: scaleX(1); }
.sec-head .kicker { letter-spacing: .24em; }

.sec-title { font-size: var(--t-2xl); text-transform: uppercase; letter-spacing: -.025em; line-height: .95; }
.sec-title .accent { color: var(--graphite); }
.sec-head .lede { margin-top: clamp(16px, 2vw, 24px); }

/* accent underline used on single words in headlines */
.mark { position: relative; white-space: nowrap; }
.mark::after {
  content: ''; position: absolute;
  left: 0; right: 0; bottom: .06em; height: .1em;
  background: var(--orange);
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--e-out) .35s;
}
.mark.is-in::after, .is-in .mark::after { transform: scaleX(1); }
.mark--turq::after { background: var(--turq); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  --btn-fill: var(--ink);
  --btn-ink: var(--paper);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 28px;
  min-height: 52px;
  font-family: var(--display);
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  border: 1.5px solid var(--ink);
  color: var(--btn-ink);
  background: var(--btn-fill);
  transition: color .38s var(--e-soft), border-color .38s var(--e-soft);
  overflow: hidden;
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--turq);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .42s var(--e-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleY(1); }
.btn:hover, .btn:focus-visible { color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; transition: transform .34s var(--e-out); }
.btn:hover svg { transform: translateX(4px); }

.btn--ghost { --btn-fill: transparent; --btn-ink: var(--ink); }
.btn--accent { --btn-fill: var(--orange); --btn-ink: var(--ink); }
.btn--accent::before { background: var(--ink); }
.btn--accent:hover, .btn--accent:focus-visible { color: var(--paper); }
.btn--on-dark { --btn-fill: transparent; --btn-ink: var(--paper); border-color: var(--rule-dark); }
.btn--on-dark:hover, .btn--on-dark:focus-visible { color: var(--ink); border-color: var(--turq); }
.btn--sm { padding: 11px 18px; min-height: 42px; font-size: 10px; letter-spacing: .14em; }

/* text link with accent rule ---------------------------------------------- */
.tlink {
  position: relative; font-weight: 600;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--orange), var(--orange));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1.5px;
  transition: background-size .34s var(--e-out);
}
.tlink:hover, .tlink:focus-visible { background-size: 100% 40%; }

/* ==========================================================================
   BRAND SHAPES — discs, rings, fragments, mosaic
   ========================================================================== */

/* rotating circular caption badge */
.badge-ring {
  position: relative; display: grid; place-items: center;
  width: clamp(112px, 13vw, 150px); aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ink); color: var(--paper);
}
.badge-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 26s linear infinite; }
.badge-ring text { font-family: var(--display); font-size: 9.4px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; fill: var(--paper); }
.badge-ring .badge-core { font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.badge-ring .badge-core b { color: var(--orange); font-weight: 700; }

/* angular fragments lifted from the logo's mosaic ring */
.frag { position: absolute; pointer-events: none; z-index: 0; }
.frag svg { display: block; }

/* mosaic linework backdrop */
.mosaic {
  position: absolute; pointer-events: none; z-index: 0;
  color: var(--ink); opacity: .09;
  aspect-ratio: 1;
}
.mosaic--faint { opacity: .055; }

/* three-colour brand rule */
.brand-rule { display: flex; height: 3px; width: 100%; }
.brand-rule i { display: block; height: 100%; }
.brand-rule i:nth-child(1) { flex: 6; background: var(--ink); }
.brand-rule i:nth-child(2) { flex: 1; background: var(--turq); }
.brand-rule i:nth-child(3) { flex: 1; background: var(--orange); }

/* ==========================================================================
   REVEAL ANIMATION
   ========================================================================== */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--e-out), transform .7s var(--e-out); }
.rv.is-in { opacity: 1; transform: none; }
.rv[data-d="1"] { transition-delay: .08s; }
.rv[data-d="2"] { transition-delay: .16s; }
.rv[data-d="3"] { transition-delay: .24s; }
.rv[data-d="4"] { transition-delay: .32s; }
.rv[data-d="5"] { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rv { opacity: 1; transform: none; }
  .marquee__track { animation: none !important; }
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .4s var(--e-soft), box-shadow .4s var(--e-soft), padding .4s var(--e-soft);
  padding-block: clamp(14px, 1.6vw, 22px);
}
.nav::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--rule); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--e-out);
}
.nav.is-stuck { background: rgba(247, 247, 244, .88); backdrop-filter: blur(16px) saturate(1.4); padding-block: 10px; }
.nav.is-stuck::after { transform: scaleX(1); }

.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

.brand { display: inline-flex; align-items: center; gap: 14px; }
.brand__mark {
  width: clamp(46px, 5vw, 58px); aspect-ratio: 1;
  transition: transform .6s var(--e-out);
}
.brand:hover .brand__mark { transform: rotate(-8deg); }
.brand__type { display: grid; gap: 1px; }
.brand__name {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(.95rem, 1.4vw, 1.15rem);
  letter-spacing: .16em; text-transform: uppercase; line-height: 1;
}
.brand__sub {
  font-size: 9px; font-weight: 600; letter-spacing: .3em;
  text-transform: uppercase; color: var(--graphite); line-height: 1;
}
@media (max-width: 400px) { .brand__type { display: none; } }

.nav__links { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); }
.nav__link {
  position: relative;
  font-family: var(--display);
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  padding-block: 6px;
  color: var(--charcoal);
  transition: color .3s var(--e-soft);
}
.nav__link::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px;
  background: var(--orange);
  transform: scaleX(0); transform-origin: right;
  transition: transform .38s var(--e-out);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--ink); }
.nav__link:hover::after, .nav__link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="true"] { color: var(--ink); }
.nav__link[aria-current="true"]::after { transform: scaleX(1); background: var(--turq); }

.nav__cta { margin-left: 8px; }

/* burger ------------------------------------------------------------------ */
.burger {
  display: none;
  width: 50px; height: 50px;
  border: 1.5px solid var(--ink);
  place-items: center;
  background: transparent;
  transition: background .3s var(--e-soft);
  position: relative; z-index: 2;
}
.burger:hover { background: var(--turq); }
.burger i {
  display: block; width: 20px; height: 1.6px; background: var(--ink);
  position: relative; transition: background .2s;
}
.burger i::before, .burger i::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 1.6px; background: var(--ink);
  transition: transform .34s var(--e-out);
}
.burger i::before { top: -6px; }
.burger i::after  { top: 6px; }

body.menu-open .burger { border-color: var(--paper); }
body.menu-open .burger:hover { background: transparent; }
body.menu-open .burger i { background: transparent; }
body.menu-open .burger i::before { background: var(--paper); transform: translateY(6px) rotate(45deg); }
body.menu-open .burger i::after  { background: var(--paper); transform: translateY(-6px) rotate(-45deg); }

/* mobile overlay ---------------------------------------------------------- */
.menu {
  position: fixed; inset: 0; z-index: 90;
  background: var(--ink); color: var(--paper);
  display: grid; grid-template-rows: 1fr auto;
  padding: clamp(96px, 18vh, 150px) var(--gutter) clamp(32px, 6vh, 56px);
  clip-path: circle(0% at calc(100% - 44px) 44px);
  transition: clip-path .72s var(--e-out);
  visibility: hidden;
  overflow-y: auto;
}
body.menu-open .menu { clip-path: circle(150% at calc(100% - 44px) 44px); visibility: visible; }
.menu__list { display: grid; gap: clamp(2px, 1vh, 10px); align-content: start; }
.menu__list a {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2rem, 9vw, 3.25rem);
  text-transform: uppercase; letter-spacing: -.02em; line-height: 1.1;
  display: flex; align-items: baseline; gap: 16px;
  padding-block: clamp(6px, 1.2vh, 12px);
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s var(--e-out), transform .5s var(--e-out), color .25s;
}
body.menu-open .menu__list a { opacity: 1; transform: none; }
body.menu-open .menu__list li:nth-child(1) a { transition-delay: .18s; }
body.menu-open .menu__list li:nth-child(2) a { transition-delay: .25s; }
body.menu-open .menu__list li:nth-child(3) a { transition-delay: .32s; }
body.menu-open .menu__list li:nth-child(4) a { transition-delay: .39s; }
.menu__list a:hover, .menu__list a:focus-visible { color: var(--turq); }
.menu__list em {
  font-family: var(--display); font-style: normal;
  font-size: .75rem; font-weight: 600; letter-spacing: .2em; color: var(--graphite);
}
.menu__foot {
  display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center;
  padding-top: 28px; border-top: 1px solid var(--rule-dark);
  font-size: var(--t-sm); color: rgba(247,247,244,.65);
  opacity: 0; transition: opacity .5s var(--e-out) .45s;
}
body.menu-open .menu__foot { opacity: 1; }
.menu__foot a:hover { color: var(--turq); }

@media (max-width: 980px) {
  .nav__links { display: none; }
  .burger { display: grid; }
}
@media (min-width: 981px) { .menu { display: none; } }

/* ==========================================================================
   TICKER
   ========================================================================== */
.ticker {
  background: var(--ink); color: var(--paper);
  padding-block: clamp(13px, 1.5vw, 18px);
  overflow: hidden;
  border-block: 1.5px solid var(--ink);
}
.marquee { display: flex; overflow: hidden; }
.marquee__track {
  display: flex; flex: none; align-items: center; gap: 0;
  animation: slide 46s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes slide { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

.ticker__item {
  display: inline-flex; align-items: center; gap: clamp(20px, 3vw, 44px);
  padding-inline: clamp(10px, 1.6vw, 22px);
  font-family: var(--display);
  font-size: clamp(.75rem, 1.1vw, .95rem); font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; white-space: nowrap;
}
.ticker__item i { display: block; width: 9px; height: 9px; flex: none; transform: rotate(45deg); background: var(--turq); }
.ticker__item:nth-child(even) i { background: var(--orange); border-radius: 50%; transform: none; }

/* ==========================================================================
   SORTEN
   ========================================================================== */
#sorten { background: var(--paper); }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
  margin-bottom: clamp(64px, 8vw, 112px);
}


/* ==========================================================================
   HANDWERK
   ========================================================================== */
#handwerk { background: var(--paper-2); overflow: hidden; }
.craft {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.craft__art { position: relative; }
.craft__art .mosaic { inset: -16% auto auto -16%; width: 132%; }
.craft__badge { position: absolute; right: -4%; bottom: 2%; z-index: 4; }
.craft__frag { top: -4%; left: -6%; width: clamp(46px, 6vw, 82px); }

.craft__copy p + p { margin-top: 16px; }
.craft__copy .lede { max-width: 52ch; }

.feats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 3vw, 44px);
  margin-block: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--rule);
}
.feat {
  display: grid; grid-template-columns: auto 1fr; gap: 14px;
  padding-block: 20px; border-bottom: 1px solid var(--rule);
}
.feat__ic {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1.5px solid var(--ink); color: var(--ink);
  transition: background .35s var(--e-soft), color .35s var(--e-soft), transform .35s var(--e-out);
}
.feat:nth-child(odd) .feat__ic:hover,  .feat:nth-child(odd):hover .feat__ic  { background: var(--turq); }
.feat:nth-child(even) .feat__ic:hover, .feat:nth-child(even):hover .feat__ic { background: var(--orange); }
.feat:hover .feat__ic { transform: translateY(-3px); }
.feat strong { display: block; font-family: var(--display); font-size: var(--t-base); font-weight: 600; letter-spacing: -.005em; }
.feat span { font-size: var(--t-sm); color: var(--graphite); line-height: 1.5; }

.craft__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px; }
.sign { font-family: var(--display); }
.sign b { display: block; font-size: var(--t-lg); font-weight: 700; letter-spacing: -.015em; line-height: 1; text-transform: uppercase; }
/* --- press mention (story wrap-up) ------------------------------------- */
.press {
  margin-block: clamp(32px, 4vw, 48px);
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--rule);
}
.press__eyebrow {
  font-family: var(--display); font-size: 10px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--graphite);
}
.press__quote { margin-top: clamp(14px, 1.6vw, 20px); }
.press__quote p {
  font-size: var(--t-md); line-height: 1.6; color: var(--ink-80);
  max-width: 46ch; text-wrap: pretty;
}
.press__link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: clamp(16px, 2vw, 22px);
  font-family: var(--display); font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
  padding-bottom: 3px; border-bottom: 1.5px solid var(--ink);
  transition: color .3s var(--e-soft), border-color .3s var(--e-soft);
}
.press__link svg { transition: transform .34s var(--e-out); }
.press__link:hover, .press__link:focus-visible { color: var(--graphite); border-color: var(--graphite); }
.press__link:hover svg { transform: translateX(3px); }

.sign span { display: block; margin-top: 5px; font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--graphite); }

/* ==========================================================================
   GALERIE
   ========================================================================== */
#galerie { padding-bottom: clamp(64px, 8vw, 120px); overflow: hidden; }
.gal { padding-block: clamp(28px, 4vw, 48px) 0; }

.gal__cta { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 64px); }

/* ==========================================================================
   FINDEN
   ========================================================================== */
#finden { background: var(--paper-2); }
.find {
  display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(40px, 5vw, 80px); align-items: start;
}
.info + .info { margin-top: clamp(30px, 3.4vw, 44px); }
.info__t {
  font-family: var(--display); font-size: 10px; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase; color: var(--graphite);
  padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1.5px solid var(--ink);
  display: flex; align-items: center; gap: 10px;
}
.info__t::before { content: ''; width: 8px; height: 8px; background: var(--turq); flex: none; }
.info__t.is-orange::before { background: var(--orange); border-radius: 50%; }
.info address, .info p { font-size: var(--t-md); line-height: 1.75; }

.hours { display: grid; }
.hours__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-block: 11px; border-bottom: 1px solid var(--rule);
  font-size: var(--t-base);
}
.hours__row:last-child { border-bottom: 0; }
.hours__row b { font-weight: 600; }
.hours__row span { color: var(--graphite); font-variant-numeric: tabular-nums; }
.hours__row.is-closed span { color: var(--ink-40); }
.find__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 3vw, 40px); }

/* map card ---------------------------------------------------------------- */
.map {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3.2;
  border: 1.5px solid var(--ink);
  background: var(--paper);
}
.map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); z-index: 3; color: var(--orange); filter: drop-shadow(0 4px 6px rgba(23,22,22,.25)); }
.map__ping {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; border: 1.5px solid var(--orange);
  animation: ping 2.8s var(--e-out) infinite;
}
@keyframes ping { 0% { transform: scale(.4); opacity: .9; } 70%, 100% { transform: scale(3.6); opacity: 0; } }
.map__tag {
  position: absolute; top: 16px; left: 16px; z-index: 3;
  background: var(--ink); color: var(--paper);
  padding: 7px 13px;
  font-family: var(--display); font-size: 9.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
}
.map__card {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 3;
  background: var(--white); border: 1.5px solid var(--ink);
  padding: 16px 18px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
}
.map__card b { display: block; font-family: var(--display); font-size: var(--t-md); font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.1; }
.map__card span { display: block; margin-top: 4px; font-size: var(--t-sm); color: var(--graphite); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--ink); color: rgba(247, 247, 244, .74); position: relative; }
.footer__inner { padding-block: clamp(56px, 7vw, 96px) 32px; }
.footer__grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(40px, 5vw, 64px);
}
.footer__brand { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 22px; }
.footer__brand picture { flex: none; }
.footer__brand img { width: clamp(60px, 7vw, 80px); height: auto; }
.footer__brand b { display: block; font-family: var(--display); font-size: 1.15rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--paper); line-height: 1.1; }
.footer__brand span { display: block; margin-top: 4px; font-size: 9px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--graphite); }
.footer__blurb { font-size: var(--t-sm); max-width: 34ch; }

.footer__ct {
  font-family: var(--display); font-size: 10px; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase; color: var(--paper);
  margin-bottom: 18px; display: flex; align-items: center; gap: 9px;
}
.footer__ct::before { content: ''; width: 7px; height: 7px; background: var(--turq); flex: none; }
.footer__col:nth-child(3) .footer__ct::before { background: var(--orange); border-radius: 50%; }
.footer__col:nth-child(4) .footer__ct::before { background: var(--paper); transform: rotate(45deg); }
.footer__col a, .footer__col p, .footer__col address, .footer__col li {
  font-size: var(--t-sm); line-height: 2; color: rgba(247, 247, 244, .62);
}
.footer__col a { transition: color .25s var(--e-soft); }
.footer__col a:hover, .footer__col a:focus-visible { color: var(--turq); }

.socials { display: flex; gap: 10px; margin-top: 20px; }
.soc {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1.5px solid var(--rule-dark); color: var(--paper);
  transition: background .3s var(--e-soft), color .3s var(--e-soft), border-color .3s var(--e-soft);
}
.soc:hover, .soc:focus-visible { background: var(--turq); color: var(--ink); border-color: var(--turq); }
.soc:last-child:hover { background: var(--orange); border-color: var(--orange); }

.footer__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
  padding-top: 26px; border-top: 1px solid var(--rule-dark);
  font-size: var(--t-xs); color: rgba(247, 247, 244, .42);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
  .hero__title .l2 { padding-left: 0; }
  .hero__lede { max-width: 52ch; }
  .craft { grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 7vw, 72px); }
  .craft__art { width: min(100%, 440px); }
  .find { grid-template-columns: minmax(0, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__col:first-child { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 44px); }
  .flavours { grid-template-columns: minmax(0, 1fr); }
  .index-head { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 620px) {
  :root { --sec-y: clamp(64px, 13vw, 96px); }
  .hero__title { font-size: clamp(2.6rem, 15vw, 4rem); }
  .hero__ctas .btn { flex: 1 1 100%; }
  .feats { grid-template-columns: minmax(0, 1fr); }
  .cat-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .cat { display: grid; grid-template-columns: 96px 1fr; gap: 20px; text-align: left; align-items: center; }
  .cat__img { margin-bottom: 0; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .map__card { flex-direction: column; align-items: flex-start; }
  .map__card .btn { width: 100%; }
}


/* ==========================================================================
   LOGO-MATCHED LAYER
   The KAVLAK logo is a heavy black ring around a grey mosaic band shot
   through with turquoise and orange shards. These rules carry that exact
   structure into the page instead of only quoting its colours.
   ========================================================================== */

/* --- the ring, unrolled: a shard band used as a structural divider ------- */
.shard-band {
  height: clamp(16px, 2vw, 24px);
  background-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%2224%22%20viewBox%3D%220%200%20240%2024%22%3E%3Crect%20width%3D%22240%22%20height%3D%2224%22%20fill%3D%22%23171616%22%2F%3E%3Cpolygon%20points%3D%22-32%2C24%20-24%2C0%200%2C0%20-8%2C24%22%20fill%3D%22%2388888C%22%2F%3E%3Cpolygon%20points%3D%22-8%2C24%200%2C0%2024%2C0%2016%2C24%22%20fill%3D%22%23F7F7F4%22%2F%3E%3Cpolygon%20points%3D%2216%2C24%2024%2C0%2048%2C0%2040%2C24%22%20fill%3D%22%23333334%22%2F%3E%3Cpolygon%20points%3D%2240%2C24%2048%2C0%2072%2C0%2064%2C24%22%20fill%3D%22%2388888C%22%2F%3E%3Cpolygon%20points%3D%2264%2C24%2072%2C0%2096%2C0%2088%2C24%22%20fill%3D%22%2388888C%22%2F%3E%3Cpolygon%20points%3D%2288%2C24%2096%2C0%20120%2C0%20112%2C24%22%20fill%3D%22%23333334%22%2F%3E%3Cpolygon%20points%3D%22112%2C24%20120%2C0%20144%2C0%20136%2C24%22%20fill%3D%22%23333334%22%2F%3E%3Cpolygon%20points%3D%22136%2C24%20144%2C0%20168%2C0%20160%2C24%22%20fill%3D%22%2320BCC2%22%2F%3E%3Cpolygon%20points%3D%22160%2C24%20168%2C0%20192%2C0%20184%2C24%22%20fill%3D%22%236E6E70%22%2F%3E%3Cpolygon%20points%3D%22184%2C24%20192%2C0%20216%2C0%20208%2C24%22%20fill%3D%22%23F7F7F4%22%2F%3E%3Cpolygon%20points%3D%22208%2C24%20216%2C0%20240%2C0%20232%2C24%22%20fill%3D%22%236E6E70%22%2F%3E%3Cpolygon%20points%3D%22232%2C24%20240%2C0%20264%2C0%20256%2C24%22%20fill%3D%22%23FF941D%22%2F%3E%3Cpolygon%20points%3D%22256%2C24%20264%2C0%20288%2C0%20280%2C24%22%20fill%3D%22%23333334%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: center;
}

/* --- alternating stone / paper sections, for the logo's grey mass -------- */
#handwerk { background: var(--stone); }
#finden   { background: var(--stone); }

/* --- section numbers carry the accent colours --------------------------- */
#sorten   .sec-num { background: var(--turq);   border-color: var(--ink); }
#handwerk .sec-num { background: var(--orange); border-color: var(--ink); }
#galerie  .sec-num { background: var(--turq);   border-color: var(--ink); }
#finden   .sec-num { background: var(--orange); border-color: var(--ink); }

/* --- category stamps alternate turquoise / orange ----------------------- */
.cat:nth-child(odd)  .cat__num { background: var(--turq); }
.cat:nth-child(even) .cat__num { background: var(--orange); }

/* --- feature icons are filled by default, not only on hover ------------- */
.feat:nth-child(odd)  .feat__ic { background: var(--turq); }
.feat:nth-child(even) .feat__ic { background: var(--orange); }
.feat:hover .feat__ic { background: var(--ink); color: var(--paper); }


/* --- mosaic linework reads as texture, not a whisper -------------------- */
.mosaic { color: var(--graphite); opacity: .2; }
.mosaic--faint { opacity: .13; }

/* --- ticker separators, larger and bolder -------------------------------- */
.ticker__item i { width: 11px; height: 11px; }

/* --- map: turquoise green space, orange pin ------------------------------ */
.map { border-width: 2.5px; }

.mosaic { opacity: .16; }

/* the flavour index that used to follow the category grid is gone — the grid
   is now the section's last block and no longer needs the trailing gap */
.cat-grid { margin-bottom: 0; }

/* ==========================================================================
   SMALL-SCREEN RECOMPOSITION
   Sections are re-laid out for touch, not just stacked.
   ========================================================================== */
@media (max-width: 620px) {
  /* category cards read as a compact list: image left, text right */
  .cat {
    grid-template-columns: 92px minmax(0, 1fr);
    grid-template-areas: "disc title" "disc desc";
    column-gap: 20px; row-gap: 4px;
    align-items: center;
  }
  .cat__img   { grid-area: disc; }
  .cat__title { grid-area: title; font-size: 1.4rem; margin-bottom: 0; }
  .cat__desc  { grid-area: desc; max-width: none; }

  /* the headline's accent word must never break mid-word */
  .hero__title > span { display: block; }
  .hero__eyebrow { flex-wrap: nowrap; font-size: 10px; letter-spacing: .16em; }
  .hero__ctas .btn { white-space: nowrap; letter-spacing: .12em; padding-inline: 20px; }

  /* stack the meta line rather than letting the separators orphan */
  .hero__meta { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hero__meta .sep { display: none; }

}

@media (max-width: 420px) {
  .cat { grid-template-columns: 76px minmax(0, 1fr); column-gap: 16px; }
  .cat__title { font-size: 1.25rem; }
}

/* keep decorative shapes inside the frame on small screens */
@media (max-width: 900px) {
  .craft__frag    { top: -2%; left: 0; }
  .craft__art .mosaic { inset: -10% auto auto -6%; width: 116%; }
}

/* the map needs room above its info card on a phone */
@media (max-width: 620px) {
  .map { aspect-ratio: 4 / 4.8; }
  .map__card { padding: 14px 15px; }
  .map__card b { font-size: var(--t-base); }
}

/* the wordmark sits above the open menu overlay, so it has to invert too */
body.menu-open .brand__name { color: var(--paper); }
body.menu-open .brand__sub  { color: var(--graphite); }

/* ==========================================================================
   ACCESSIBILITY CORRECTIONS
   ========================================================================== */

/* grey type on the black surfaces needs to be lighter to clear 4.5:1 */
.footer__brand span span,
.menu__list em { color: var(--graphite-2); }

/* touch targets: give inline links their full line box */
.footer__col a { display: inline-block; padding-block: 3px; }
.menu__foot a  { display: inline-block; padding-block: 6px; }

/* the mobile menu's <ul> now sits inside a <nav>, so the grid moves up a level */
.menu > nav { display: grid; align-content: start; }

/* gallery: align the caption baselines across the alternating plate sizes */
.gal .marquee__track { align-items: flex-end; }


@media (max-width: 900px) {
  /* the artwork is 16:9, so at phone widths it would collapse to a thin strip.
     Overscanning it past both edges keeps the shard clusters at the sides and
     the middle clear, without distorting the aspect ratio. */
}

@media (max-width: 620px) {
  .hero { padding-block: 104px 56px; }
  .hero__ctas .btn { flex: 1 1 100%; }
  .hero__meta { flex-direction: column; gap: 6px; }
  .hero__meta .sep { display: none; }
}

/* --- the slogan under the wordmark in the footer -------------------------- */
.footer__brand em {
  display: block; margin-top: 7px; font-style: normal;
  font-family: var(--display); font-weight: 500; font-size: 10px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--turq);
}

/* ==========================================================================
   FRAME — the rectangular image component
   The background artwork is built from straight edges, thin chords and angular
   shards, so photography is framed, not rounded. Circles are kept only where
   they carry meaning: the logo itself and the rotating seal.
   ========================================================================== */
.frame {
  --sh: var(--turq);
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--paper-2);
  box-shadow: 0 1px 0 rgba(23,22,22,.06), 0 18px 44px -18px rgba(23,22,22,.28);
}
.frame picture { display: block; width: 100%; height: 100%; }
.frame img { width: 100%; height: 100%; object-fit: cover; }

/* frames wipe open from the bottom edge rather than iris in */
.wipe-reveal { clip-path: inset(0 0 100% 0 round var(--r)); transition: clip-path 1s var(--e-out); }
.wipe-reveal.is-in, .is-in .wipe-reveal { clip-path: inset(0 round var(--r)); }
.wipe-reveal img { transform: scale(1.12); transition: transform 1.25s var(--e-out); }
.wipe-reveal.is-in img, .is-in .wipe-reveal img { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .wipe-reveal { clip-path: inset(0 round var(--r)); }
  .wipe-reveal img { transform: none; }
}

/* ==========================================================================
   CATEGORY CARDS — editorial, left-aligned, numbered
   ========================================================================== */
.cat { position: relative; }
.cat__img { aspect-ratio: 4 / 5; margin-bottom: 20px; }
.cat__img img { transition: transform .55s var(--e-out); }
.cat:hover .cat__img img { transform: scale(1.05); }
.cat__num {
  position: absolute; top: 0; left: 0; z-index: 3;
  width: clamp(34px, 3.4vw, 42px); aspect-ratio: 1;
  display: grid; place-items: center;
  background: var(--turq); color: var(--ink);
  border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink);
  font-family: var(--display); font-size: clamp(10px, 1.1vw, 12px); font-weight: 700;
  letter-spacing: .04em;
}
.cat:nth-child(even) .cat__num { background: var(--orange); }
.cat__title {
  font-size: var(--t-lg); text-transform: uppercase; letter-spacing: -.015em;
  padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1.5px solid var(--ink);
}
.cat__desc { font-size: var(--t-sm); color: var(--graphite); }

/* ==========================================================================
   HANDWERK VISUAL
   ========================================================================== */
.craft__shot { position: relative; z-index: 2; aspect-ratio: 4 / 4.8; }
.mosaic--arcs { opacity: .3; }

/* ==========================================================================
   GALLERY — mixed portrait / landscape plates on one baseline
   ========================================================================== */
.gal .marquee__track { gap: clamp(18px, 2.4vw, 40px); align-items: flex-end; }
.gal__item { flex: none; width: clamp(158px, 19vw, 244px); }
.gal__item .frame { aspect-ratio: 3 / 4; transition: transform .5s var(--e-out); }
.gal__item--wide { width: clamp(206px, 25vw, 326px); }
.gal__item--wide .frame { aspect-ratio: 4 / 3; }
.gal__item:hover .frame { transform: translateY(-6px); }
.gal__cap {
  margin-top: 12px;
  font-family: var(--display); font-size: 9.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--graphite);
}

/* ==========================================================================
   EDGE SHARDS — the artwork's fragments recurring at section corners
   ========================================================================== */
.edge { position: absolute; pointer-events: none; z-index: 0; }
.edge svg { display: block; width: 100%; height: auto; }

/* ==========================================================================
   SMALL SCREENS
   ========================================================================== */
@media (max-width: 620px) {
  .cat { grid-template-areas: "disc title" "disc desc"; align-items: start; }
  .cat__img { aspect-ratio: 4 / 5; margin-bottom: 0; }
  .cat__num { top: 0; left: 0; width: 28px; font-size: 9px; border-width: 2px; }
  .cat__title { padding-bottom: 8px; margin-bottom: 8px; }
  .frame { border-width: 2px; }
}

/* --- shard groups filling the open half of the wider section headers ------ */
.edge { display: block; }
.edge__arcs { position: absolute; inset: 0; width: 100%; height: auto; color: var(--graphite); opacity: .32; }
.edge--sorten  { top: clamp(24px, 4vw, 72px);  right: 2%;  width: clamp(190px, 26vw, 380px); aspect-ratio: 1; }
.edge--sorten  .edge__t2 { top: 58%;  right: 34%; width: 17%; }
.edge--galerie { top: clamp(20px, 3.5vw, 64px); right: 4%; width: clamp(200px, 27vw, 400px); aspect-ratio: 1; }

/* the shard groups only exist to fill the open half of a wide header —
   below that they would sit on top of the heading, so they go away */
@media (max-width: 900px) { .edge { display: none; } }

/* ==========================================================================
   SOFTENING PASS
   The angular language was reading too hard, so edges are rounded, the black
   outlines give way to light shadow, and the big headlines drop out of caps.
   The logo's geometry still shows in the accents — just quieter.
   ========================================================================== */

/* --- headlines in sentence case, with air ------------------------------- */
.hero__title,
.sec-title,
.cat__title,
.menu__list a,
.map__card b,
.sign b {
  text-transform: none;
  letter-spacing: -.018em;
}
.hero__title { line-height: .96; }
.sec-title   { line-height: 1.0; }
.display     { text-transform: none; letter-spacing: -.018em; line-height: .98; }

/* --- rounded controls ---------------------------------------------------- */
.btn { border-radius: var(--r-pill); border-width: 1.5px; }
.btn::before { border-radius: inherit; }
.btn--sm { border-radius: var(--r-pill); }
.burger { border-radius: var(--r-sm); }
.soc { border-radius: var(--r-pill); }
.sec-num { border-radius: var(--r-xs); border-width: 1.5px; }
.feat__ic { border-radius: var(--r-sm); border-width: 1.5px; }
.map__tag { border-radius: var(--r-pill); }


/* --- category cards ------------------------------------------------------ */
.cat__img { border-radius: var(--r); }
.cat__num {
  border: 0;
  border-radius: var(--r) 0 var(--r-sm) 0;
  width: clamp(38px, 3.6vw, 46px);
  box-shadow: 0 6px 18px -8px rgba(23,22,22,.45);
}
.cat__title { border-bottom: 0; padding-bottom: 0; margin-bottom: 10px; }
.cat__desc { line-height: 1.65; }

/* --- gallery: soft plates, colour carried by a hairline ------------------ */
.gal__item .frame { border-radius: var(--r); }
.frame--turq   { box-shadow: 0 0 0 2px var(--turq),   0 18px 44px -18px rgba(23,22,22,.28); }
.frame--orange { box-shadow: 0 0 0 2px var(--orange), 0 18px 44px -18px rgba(23,22,22,.28); }

/* --- handwerk ------------------------------------------------------------ */
.craft__shot { border-radius: var(--r-lg); }
.craft__shot.wipe-reveal { clip-path: inset(0 0 100% 0 round var(--r-lg)); }
.craft__shot.wipe-reveal.is-in { clip-path: inset(0 round var(--r-lg)); }
.craft__frag { opacity: .55; }

/* --- map ----------------------------------------------------------------- */
.map { border: 0; border-radius: var(--r-lg); box-shadow: 0 1px 0 rgba(23,22,22,.06), 0 24px 56px -24px rgba(23,22,22,.3); }
.map__card { border: 0; border-radius: var(--r-sm); box-shadow: 0 12px 30px -12px rgba(23,22,22,.35); }

/* --- ticker: dots instead of diamonds ------------------------------------ */
.ticker { border: 0; }
.ticker__item i { border-radius: 50%; transform: none; width: 8px; height: 8px; }

/* --- shard band: one, at the footer, and slimmer ------------------------- */
.shard-band { height: clamp(12px, 1.4vw, 18px); }

/* --- section decoration: arcs only, no hard triangles -------------------- */
.edge__arcs { opacity: .26; }

/* --- lockup + info markers ----------------------------------------------- */
.info__t::before { border-radius: 50%; }
.footer__ct::before { border-radius: 50%; transform: none; }
.hours__row { border-bottom-color: rgba(23,22,22,.09); }

@media (max-width: 620px) {
  .cat__num { width: 32px; border-radius: var(--r) 0 var(--r-sm) 0; }
}

/* --- final smoothing: rounded accent strokes, softer loose shapes -------- */
.mark::after { border-radius: var(--r-pill); height: .08em; bottom: -.05em; }
.craft__frag { width: clamp(38px, 4.6vw, 68px); opacity: .3; top: 2%; left: -3%; }
.sec-idx .sec-line { border-radius: var(--r-pill); }
.brand-rule i { border-radius: var(--r-pill); }
.cat__img img, .gal__item .frame img { border-radius: inherit; }

/* ==========================================================================
   HERO — split layout, cone framed by the logo's rings
   ========================================================================== */
.hero { padding-block: clamp(112px, 14vh, 156px) clamp(48px, 7vh, 88px); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  position: relative; z-index: 1;
}

.hero__kicker { display: grid; gap: 7px; margin-bottom: clamp(18px, 2.2vw, 26px); }
.hero__kicker > span:first-child {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(.7rem, .95vw, .8rem);
  letter-spacing: .26em; text-transform: uppercase; color: var(--charcoal);
}
.hero__slogan {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(.62rem, .82vw, .7rem);
  letter-spacing: .24em; text-transform: uppercase; color: var(--graphite);
}
.hero__slogan::before { content: ''; width: 14px; height: 2px; background: var(--orange); flex: none; }

.hero__title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.15rem, 4.5vw, 4.4rem);
  line-height: 1.02; letter-spacing: -.022em;
  text-transform: uppercase;
  margin-bottom: clamp(18px, 2.2vw, 28px);
  max-width: 11ch;
}
.hero__title .dot { color: var(--orange); }

.hero__lede { max-width: 34ch; margin-bottom: clamp(26px, 3vw, 36px); font-size: var(--t-base); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin-top: clamp(26px, 3vw, 38px); padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: var(--t-sm); color: var(--graphite);
}
.hero__meta .sep { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }

/* --- the cone stage ------------------------------------------------------ */
.stage { position: relative; aspect-ratio: 1; width: min(100%, 620px); margin-inline: auto; }
.stage__rings { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage__cone {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  height: 114%; width: auto; max-width: none; z-index: 2;
  filter: drop-shadow(0 26px 34px rgba(23, 22, 22, .22));
}
.stage__frag { position: absolute; z-index: 3; pointer-events: none; }
.stage__frag svg { display: block; width: 100%; height: auto; }
.stage__frag--a { top: 4%;   right: 6%;  width: clamp(44px, 6vw, 88px); }
.stage__frag--b { bottom: 12%; right: -2%; width: clamp(34px, 4.6vw, 68px); }
.stage__frag--c { top: 34%;  right: -5%; width: clamp(26px, 3.4vw, 50px); }
.stage__frag--d { bottom: 4%; left: 6%;  width: clamp(16px, 2.2vw, 32px); opacity: .9; }

@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 6vw, 56px); }
  .hero__title { max-width: 14ch; }
  .hero__lede { max-width: 46ch; }
  .stage { width: min(100%, 460px); }
}
@media (max-width: 620px) {
  .hero { padding-block: 100px 48px; }
  .hero__ctas .btn { flex: 1 1 100%; }
  .stage { width: min(100%, 340px); }
  .stage__frag--c, .stage__frag--d { display: none; }
}

/* ==========================================================================
   NAVIGATION — links centred, outlined CTA
   ========================================================================== */
.nav__links { flex: 1; justify-content: center; gap: clamp(18px, 2.4vw, 38px); }
.nav__link { font-weight: 500; letter-spacing: .14em; }
.nav__cta { flex: none; }
.btn--outline {
  --btn-fill: transparent; --btn-ink: var(--ink);
  border-color: var(--orange);
}
.btn--outline::before { background: var(--orange); }
.btn--outline:hover, .btn--outline:focus-visible { color: var(--ink); }

/* ==========================================================================
   SECTION HEADERS — ornament, title, accent dash
   ========================================================================== */
.orn { display: inline-flex; align-items: center; gap: 11px; margin-bottom: clamp(14px, 1.8vw, 20px); }
.orn i { display: block; width: clamp(22px, 3vw, 42px); height: 1.5px; background: var(--rule-2); }
.orn b { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }

.orn-dash {
  display: block; width: 56px; height: 2.5px;
  background: var(--turq); border-radius: var(--r-pill);
  margin-top: clamp(16px, 2vw, 22px);
}

.sec-title {
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  text-transform: uppercase; letter-spacing: .01em; line-height: 1.1;
  font-weight: 700;
}
.sec-head--center {
  text-align: center; max-width: 60ch;
  margin-inline: auto; margin-bottom: clamp(44px, 5.5vw, 80px);
  display: flex; flex-direction: column; align-items: center;
}
.sec-head--center .lede { margin-inline: auto; }

/* ==========================================================================
   CATEGORY CIRCLES
   ========================================================================== */
.cat { text-align: center; }
.cat__img {
  position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  margin: 0 auto clamp(20px, 2.4vw, 30px); width: min(100%, 260px);
  background: var(--paper-2);
  box-shadow: 0 0 0 1.5px rgba(23,22,22,.85), 0 0 0 9px var(--paper), 0 0 0 10px rgba(23,22,22,.2);
}
.cat__img picture { display: block; width: 100%; height: 100%; }
.cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--e-out); }
.cat:hover .cat__img img { transform: scale(1.06); }
.cat__num { display: none; }
.cat__title { font-size: var(--t-lg); text-transform: uppercase; letter-spacing: .01em; margin-bottom: 10px; }
.cat__desc { max-width: 30ch; margin-inline: auto; }

.mask-reveal img { clip-path: circle(66% at 50% 50%); transform: scale(1.1);
  transition: clip-path 1.05s var(--e-out), transform 1.2s var(--e-out); }
.mask-reveal.is-in img, .is-in .mask-reveal img { clip-path: circle(75% at 50% 50%); transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .mask-reveal img { clip-path: circle(75% at 50% 50%); transform: none; }
}

/* buttons follow the reference: crisp, only a hair of softness */
.btn { border-radius: 4px; }
.btn--sm { border-radius: 4px; }

@media (max-width: 620px) {
  .cat { display: grid; grid-template-columns: 96px minmax(0, 1fr);
         grid-template-areas: "disc title" "disc desc"; text-align: left; align-items: center; }
  .cat__img { width: 96px; margin: 0; }
  .cat__desc { margin-inline: 0; }
}

/* ==========================================================================
   HERO BACKGROUND — the client's shard artwork
   ========================================================================== */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--paper); }
.hero__bg {
  position: absolute; top: 0; left: 0; right: 0; z-index: -1;
  aspect-ratio: 1672 / 941;
  background-image: image-set(url('../img/brand/bg-shards.webp') type('image/webp'),
                              url('../img/brand/bg-shards.jpg')  type('image/jpeg'));
  background-image: -webkit-image-set(url('../img/brand/bg-shards.webp') type('image/webp'),
                                      url('../img/brand/bg-shards.jpg')  type('image/jpeg'));
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* pushed left so the artwork's heavy cluster clears the headline and the
     lighter right-hand shards frame the cone instead */
  width: 134%; left: -33%; right: auto;
}
/* the nav sits over the densest corner, so the top strip is veiled */
.hero__bg::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 130px; z-index: 1;
  background: linear-gradient(to bottom,
              rgba(247,247,244,.92) 0%, rgba(247,247,244,.7) 45%, rgba(247,247,244,0) 100%);
}
/* and it dissolves into the page rather than ending on a crop line */
.hero__bg::after {
  content: ''; position: absolute; inset: 58% 0 0 0;
  background: linear-gradient(to bottom, rgba(247,247,244,0) 0%, rgba(247,247,244,.7) 60%, var(--paper) 100%);
}

/* the cone should sit inside its rings, not overwhelm them */
.stage__cone { height: 104%; }

@media (max-width: 1000px) {
  /* overscanned past both edges so the shard clusters stay at the sides */
  .hero__bg { width: 168%; left: -34%; opacity: .8; }
}
@media (max-width: 620px) {
  .hero__bg { width: 172%; left: -36%; opacity: .7; }
}

/* a soft veil behind the copy column keeps the headline legible whatever the
   artwork does underneath it */
.hero__grid::before {
  content: ''; position: absolute; z-index: -1;
  inset: -14% 44% -14% -12%;
  background: linear-gradient(to right, var(--paper) 26%, rgba(247,247,244,.82) 66%, rgba(247,247,244,0) 100%);
  pointer-events: none;
}
@media (max-width: 1000px) {
  .hero__grid::before { inset: -8% -12% 40% -12%;
    background: linear-gradient(to bottom, var(--paper) 30%, rgba(247,247,244,.8) 70%, rgba(247,247,244,0) 100%); }
}

/* the accent full stop must never orphan onto its own line */
.hero__title .nb { white-space: nowrap; }

/* the header CTA duplicates what the mobile menu already offers */
@media (max-width: 980px) { .nav__cta { display: none; } }

/* ==========================================================================
   HERO TUNING — matching the supplied reference frame
   ========================================================================== */

/* the cone sits inside its rings with the tip breaking the lower edge */
.stage__cone { height: 88%; }

/* artwork placed so the left cluster falls behind the copy and the right one
   clears the ring entirely instead of crowding it */
.hero__bg { width: 154.5%; left: -23.3%; }
@media (max-width: 1000px) { .hero__bg { width: 178%; left: -39%; opacity: .8; } }
@media (max-width: 620px)  { .hero__bg { width: 186%; left: -43%; opacity: .68; } }

/* the reference marks the current page in orange */
.nav__link[aria-current="true"]::after { background: var(--orange); }
.brand__mark { width: clamp(52px, 4.6vw, 68px); }

/* nav sits above the artwork on a full-width row */
.nav__inner { gap: clamp(16px, 2vw, 32px); }

/* bring the left-hand shard cluster back behind the copy, keep the right one
   clear of the ring */
.hero__bg { width: 148%; left: -18%; }
.stage__cone { height: 92%; }
@media (max-width: 1000px) { .hero__bg { width: 176%; left: -38%; } }
@media (max-width: 620px)  { .hero__bg { width: 184%; left: -42%; } }

/* the accent full stop must never be orphaned onto its own line */
.nb { white-space: nowrap; }
.hero__title { text-wrap: normal; }
@media (max-width: 1000px) { .hero__title { max-width: 16ch; } }

/* ==========================================================================
   CONE ALIGNMENT
   The reference centres the *scoop* on the ring and lets the waffle hang out
   through the gap at the lower right. The scoop's optical centre sits 22.5%
   down the supplied artwork, so the cone is anchored on that point rather
   than on its own midpoint.
   ========================================================================== */
.stage { width: min(100%, 560px); }
.stage__cone {
  left: 50%; top: 50%;
  width: 50%; height: auto; max-width: none;
  transform: translate(-50%, -22.5%);
}
.hero { padding-bottom: clamp(96px, 15vh, 200px); }

@media (max-width: 1000px) {
  .stage { width: min(100%, 440px); }
  .hero { padding-bottom: clamp(80px, 12vh, 150px); }
}
@media (max-width: 620px) {
  .stage { width: min(100%, 330px); }
  .stage__cone { width: 54%; }
  .hero { padding-bottom: 96px; }
}

/* the waffle overhangs the stage by ~29% of its width, so the hero reserves
   that much below the composition and the tip never meets the ticker */
.stage__cone { width: 47%; }
.hero { padding-bottom: 190px; }
@media (max-width: 1000px) { .stage__cone { width: 47%; } .hero { padding-bottom: 150px; } }
@media (max-width: 620px)  { .stage__cone { width: 47%; } .hero { padding-bottom: 120px; } }


/* ==========================================================================
   HERO — matched to the client's reference: the cone reads large inside the
   ring and its waffle is cropped by the hero's lower edge rather than
   floating fully visible above the next section.
   ========================================================================== */
.hero { padding-bottom: 0; border-bottom: 1px solid rgba(23, 22, 22, .12); }
.hero__grid { align-items: center; padding-bottom: 0; }

.stage { width: min(100%, 680px); margin-bottom: -7%; }
.stage__cone {
  width: 54%;
  transform: translate(-50%, -31%);
  filter: drop-shadow(0 30px 40px rgba(23, 22, 22, .24));
}
/* the hero crops the overhang, so the tip must not be veiled by the fade */
.hero__bg::after { inset: 62% 0 0 0; }

@media (max-width: 1000px) {
  .stage { width: min(100%, 500px); margin-bottom: -7%; }
  .stage__cone { width: 54%; }
  .hero { padding-bottom: 0; }
}
@media (max-width: 620px) {
  .stage { width: min(100%, 380px); margin-bottom: -6%; }
  .stage__cone { width: 56%; }
  .hero { padding-bottom: 0; }
}


/* ==========================================================================
   HERO — the reference keeps the shard artwork visible around the copy: only
   a soft veil directly behind the text, and the left-hand cluster reads.
   ========================================================================== */
.hero__grid::before {
  inset: -10% 46% -6% -14%;
  background: radial-gradient(72% 62% at 34% 46%,
    rgba(247,247,244,.94) 0%, rgba(247,247,244,.72) 52%, rgba(247,247,244,0) 100%);
}
@media (max-width: 1000px) {
  .hero__grid::before { inset: -8% -12% 42% -12%;
    background: linear-gradient(to bottom, rgba(247,247,244,.95) 26%, rgba(247,247,244,.72) 68%, rgba(247,247,244,0) 100%); }
}
.hero__bg { width: 152%; left: -26%; opacity: 1; }
.hero__bg::before { height: 96px; }
@media (max-width: 1000px) { .hero__bg { width: 176%; left: -38%; opacity: .82; } }


/* the cone sits centred in the enlarged ring with clear air on every side */
.stage { width: min(100%, 700px); margin-bottom: -6%; }
.stage__cone { width: 44%; transform: translate(-50%, -30%); }
@media (max-width: 1000px) {
  .stage { width: min(100%, 520px); margin-bottom: -6%; }
  .stage__cone { width: 44%; }
}
@media (max-width: 620px) {
  .stage { width: min(100%, 380px); margin-bottom: -5%; }
  .stage__cone { width: 46%; }
}


/* ==========================================================================
   HERO ARTWORK — the client's supplied composition (shards + open rings).
   The cone is pinned to the ring that is part of the artwork, so the two stay
   registered at every width; the hero crops the waffle at its lower edge.
   ========================================================================== */

.hero__art { display: none; }

@media (min-width: 1001px) {
  .hero__art { display: block; }
  .hero {
    height: clamp(600px, 49vw, 900px);
    padding-block: 0;
    display: flex; align-items: center;
    overflow: hidden;
  }
  .hero__bg,
  .hero__art {
    position: absolute; top: 0; left: 0; z-index: -1;
    width: 100%; aspect-ratio: 1536 / 1024;
    opacity: 1;
  }
  .hero__bg {
    background: url("../img/brand/hero-art.png") top center / 100% 100% no-repeat;
  }
  .hero__bg::before, .hero__bg::after { display: none; }
  .hero__grid::before { display: none; }

  .hero__art { z-index: 0; pointer-events: none; }
  .hero__art-cone {
    position: absolute;
    left: 59.08%; top: 19.33%;
    width: 27.68%; height: auto;
    filter: drop-shadow(0 26px 34px rgba(23, 22, 22, .22));
  }

  .hero__grid { position: relative; z-index: 1; width: 100%; align-items: center; }
  .hero__grid .stage { display: none; }
  .hero__grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
  .hero__copy { padding-block: 0; }
}


/* the reference indents the hero copy well clear of the viewport edge */
@media (min-width: 1001px) {
  .hero__grid { padding-left: clamp(24px, 4.5vw, 90px); }
  .hero__copy { max-width: 30ch; }
  .hero__title { max-width: 12ch; }
  .hero__lede { max-width: 28ch; }
}


/* copy sits further in, and the two CTAs always share one line */
@media (min-width: 1001px) {
  .hero__grid { padding-left: clamp(48px, 8vw, 150px); }
}
.hero__ctas { flex-wrap: nowrap; align-items: center; }
.hero__ctas .btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 420px) {
  .hero__ctas { flex-wrap: wrap; }
  .hero__ctas .btn { flex: 1 1 100%; }
}


/* ==========================================================================
   HERO — mobile / tablet: the same artwork composition, zoomed on the ring and
   stacked under the copy. The cone is positioned in % of the artwork layer, so
   cone and ring stay registered whatever the width.
   ========================================================================== */
@media (min-width: 1001px) { .hero__artwrap { display: contents; } }

@media (max-width: 1000px) {
  .hero { display: flex; flex-direction: column; padding-block: 104px 0; height: auto; overflow: hidden; }
  .hero__bg { display: none; }
  .hero__grid { order: 1; }
  .hero__grid .stage { display: none; }
  .hero__grid::before { display: none; }

  .hero__artwrap {
    order: 2; position: relative; width: 100%; height: 86vw;
    margin-top: clamp(20px, 5vw, 44px); overflow: hidden;
  }
  .hero__art {
    display: block; position: absolute; top: -6vw; left: -57.4%;
    width: 150%; aspect-ratio: 1536 / 1024; z-index: 0;
    background: url("../img/brand/hero-art.png") 0 0 / 100% 100% no-repeat;
  }
  .hero__art-cone {
    position: absolute; left: 59.08%; top: 19.33%; width: 27.68%; height: auto;
    filter: drop-shadow(0 20px 28px rgba(23, 22, 22, .2));
  }
}


/* ==========================================================================
   LIEBLINGSSORTEN — three cups on linework rings
   ========================================================================== */
.fav-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(36px, 5vw, 64px);
}
.fav { text-align: center; }
.fav__stage { position: relative; aspect-ratio: 1; margin-bottom: clamp(18px, 2.4vw, 30px); }
.fav__rings { position: absolute; inset: 0; width: 100%; height: 100%; }
.fav__img {
  position: absolute; left: 50%; bottom: 4%;
  transform: translateX(-50%);
  width: 62%; height: auto;
  filter: drop-shadow(0 18px 26px rgba(23, 22, 22, .18));
}
.fav__frag { position: absolute; pointer-events: none; }
.fav__frag svg { display: block; width: 100%; height: auto; }
.fav__frag--a { top: 6%; right: 2%; width: clamp(16px, 2vw, 26px); }
.fav__frag--b { top: 26%; left: -2%; width: clamp(12px, 1.5vw, 20px); }
.fav__frag--c { bottom: 12%; right: -1%; width: clamp(20px, 2.4vw, 32px); }

.fav__num {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  letter-spacing: .18em; color: var(--orange); margin-bottom: 8px;
}
.fav__title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 10px;
}
.fav__desc {
  max-width: 26ch; margin: 0 auto clamp(16px, 2vw, 22px);
  font-size: var(--t-sm); color: var(--graphite);
  text-wrap: pretty;
}
.fav__link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 600;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
}
.fav__link svg { color: var(--orange); transition: transform .3s ease; }
.fav__link:hover svg { transform: translateX(4px); }

.fav-foot { display: flex; justify-content: center; margin-top: clamp(36px, 5vw, 60px); }

@media (max-width: 860px) {
  .fav-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; max-width: 420px; margin-inline: auto; }
}


/* the favourites section carries the same shard artwork as the hero, held to
   the outer edges so the cups stay on clean paper */
.section--fav { position: relative; isolation: isolate; overflow: hidden; }
.fav-bg {
  position: absolute; inset: -6% -2%; z-index: -1; pointer-events: none;
  background: url("../img/brand/hero-art.png") center / cover no-repeat;
  opacity: .55;
  -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.35) 16%, transparent 30%, transparent 70%, rgba(0,0,0,.35) 84%, #000 100%);
  mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.35) 16%, transparent 30%, transparent 70%, rgba(0,0,0,.35) 84%, #000 100%);
}
.section--fav > .shell { position: relative; z-index: 1; }

/* larger cups, tighter rings around them */
.fav__img { width: 78%; bottom: 2%; }
.fav__stage { margin-bottom: clamp(14px, 2vw, 24px); }
.fav__rings { transform: scale(1.04); }

@media (max-width: 860px) {
  .fav-bg { opacity: .4; inset: -3% -6%; }
  .fav__img { width: 72%; }
}


/* the cup is taller than it is wide, so the stage reserves its overhang and
   the rings sit on the lower square instead of the whole box */
.fav__stage { aspect-ratio: 1 / 1.2; }
.fav__rings {
  top: auto; bottom: 0; height: auto; aspect-ratio: 1;
  transform: none;
}
.fav__img { width: 74%; bottom: 3%; }
.fav-grid { margin-top: clamp(28px, 4vw, 52px); }
.fav__frag--a { top: 14%; }
.fav__frag--b { top: 34%; }
@media (max-width: 860px) { .fav__img { width: 70%; } }


/* cups centred on the ring and a touch larger */
.fav__stage { aspect-ratio: 1 / 1.16; }
.fav__img {
  width: 82%; bottom: auto;
  top: 50%; transform: translate(-50%, -50%);
}
.fav__rings { top: 50%; bottom: auto; transform: translateY(-50%); }
@media (max-width: 860px) { .fav__img { width: 78%; } }


/* the stage is tall enough for the whole cup, with a wider ring around it */
.fav__stage { aspect-ratio: 1 / 1.34; }
.fav__rings {
  left: -3%; right: -3%; width: 106%;
  top: 50%; bottom: auto; height: auto; aspect-ratio: 1;
  transform: translateY(-50%);
}
.fav__img {
  width: 80%; left: 50%; top: 50%; bottom: auto;
  transform: translate(-50%, -50%);
}
.fav__frag--a { top: 10%; right: -1%; }
.fav__frag--b { top: 30%; left: -4%; }
.fav__frag--c { bottom: 16%; right: -3%; }
.fav-grid { margin-top: clamp(24px, 3.4vw, 44px); }
@media (max-width: 860px) { .fav__img { width: 76%; } }

.fav__rings { transform: translateY(-50%) scale(1.12); transform-origin: 50% 50%; }

/* reserved tag row under every flavour title, so captions stay on one baseline */
.fav__tags {
  display: flex; justify-content: center; align-items: center;
  height: 26px; margin: 8px 0 0;
}
.fav__vegan {
  background: var(--ink); color: var(--paper);
  padding: 5px 9px;
  font-family: var(--display); font-size: 9.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
}


/* rings dropped from the cards: the cup itself fills the stage */
.fav__stage { aspect-ratio: 1 / 1.5; }
.fav__img {
  width: 100%; left: 50%; top: 50%; bottom: auto;
  transform: translate(-50%, -50%);
}
.fav__frag--a { top: 8%; right: -4%; }
.fav__frag--b { top: 28%; left: -7%; }
.fav__frag--c { bottom: 14%; right: -6%; }
@media (max-width: 860px) {
  .fav__img { width: 96%; }
  .fav-grid { max-width: 360px; }
}


/* the three cups are normalised to one silhouette height, so the stage matches
   the artwork's aspect and every caption starts on the same line */
.fav__stage { aspect-ratio: 1003 / 1601; }
.fav__num { margin-top: clamp(6px, 1vw, 12px); }
.fav__desc { min-height: 3.2em; }

.fav__stage { aspect-ratio: 818 / 1366; }


/* the brand name leads, the slogan sits under it a shade quieter */
.hero__kicker { gap: 10px; }
.hero__kicker > span:first-child {
  font-size: clamp(.86rem, 1.15vw, 1.05rem);
  letter-spacing: .22em;
}
.hero__slogan {
  font-size: clamp(.68rem, .82vw, .78rem);
  letter-spacing: .2em;
  color: var(--graphite);
}

@media (min-width: 1001px) { .hero__grid { padding-left: clamp(64px, 11vw, 210px); } }

.hero__kicker > span:first-child { font-size: clamp(1rem, 1.45vw, 1.3rem); }


/* gallery: hard-edged plates, all the same square format */
.gal__item, .gal__item--wide { width: clamp(158px, 19vw, 244px); }
.gal__item .frame, .gal__item--wide .frame { aspect-ratio: 1; border-radius: 0; }
.gal__item .frame img { border-radius: 0; }
.gal .marquee__track { align-items: flex-start; }

/* larger plates, slightly taller than square */
.gal__item, .gal__item--wide { width: clamp(210px, 25vw, 320px); }
.gal__item .frame, .gal__item--wide .frame { aspect-ratio: 4 / 5; }


/* gallery tuned to the hero / favourites vocabulary: paper, shard artwork at
   the edges, hard-edged plates, quiet display captions */
#galerie .gal, #galerie .shell { position: relative; z-index: 1; }
#galerie .fav-bg { opacity: .42; }
.gal__item .frame,
.gal__item--wide .frame {
  box-shadow: 0 20px 44px -22px rgba(23, 22, 22, .3);
  outline: 1px solid rgba(23, 22, 22, .1);
  outline-offset: 0;
}
.frame--turq   { box-shadow: 0 20px 44px -22px rgba(23,22,22,.3); }
.frame--orange { box-shadow: 0 20px 44px -22px rgba(23,22,22,.3); }
.gal__item:hover .frame { transform: translateY(-8px); }
.gal__cap {
  margin-top: 14px;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--graphite);
}
.gal__cta { margin-top: clamp(44px, 6vw, 72px); }

/* gallery keeps the shards but not the big ring arcs from the artwork */
#galerie .fav-bg {
  background-position: center 62%;
  background-size: 128% auto;
  opacity: .38;
  -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.3) 12%, transparent 24%, transparent 76%, rgba(0,0,0,.3) 88%, #000 100%);
  mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.3) 12%, transparent 24%, transparent 76%, rgba(0,0,0,.3) 88%, #000 100%);
}

/* shard-only artwork here — no rings */
#galerie .fav-bg {
  background-image: image-set(url("../img/brand/bg-shards.webp") type("image/webp"), url("../img/brand/bg-shards.jpg") type("image/jpeg"));
  background-size: cover; background-position: center;
  opacity: .5;
}

/* favourites: shard-only backdrop as well, no rings */
.section--fav .fav-bg {
  background-image: image-set(url("../img/brand/bg-shards.webp") type("image/webp"), url("../img/brand/bg-shards.jpg") type("image/jpeg"));
  background-size: cover; background-position: center;
  opacity: .5;
}

/* full-strength, un-faded shard artwork behind the gallery */
#galerie .fav-bg {
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
}

.gal__cap { display: none; }

/* subtle but sharp: the shard artwork at its native scale, edges only */
#galerie .fav-bg {
  inset: 0;
  background-image: image-set(url("../img/brand/hero-art.png") 1x);
  background-size: auto 118%;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .5;
  -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.25) 15%, transparent 32%, transparent 68%, rgba(0,0,0,.25) 85%, #000 100%);
  mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.25) 15%, transparent 32%, transparent 68%, rgba(0,0,0,.25) 85%, #000 100%);
  image-rendering: auto;
}

/* shard-only art, displayed at or below its native size so it stays crisp */
#galerie .fav-bg {
  background-image: image-set(url("../img/brand/bg-shards.webp") type("image/webp"), url("../img/brand/bg-shards.jpg") type("image/jpeg"));
  background-size: auto 100%;
  background-position: center;
  opacity: .42;
}

#galerie .fav-bg {
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
  background-size: auto 100%;
  filter: none;
}


/* gallery strip: crisp cover-cropped photos, no empty plates, framed band */
.gal__item .frame { overflow: hidden; background: #EDEDE8; }
.gal__item .frame img,
.gal__item--wide .frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.gal { border-block: 1px solid rgba(23, 22, 22, .1); padding-block: clamp(30px, 4vw, 52px); }
#galerie .fav-bg { background-size: cover; background-position: center; opacity: .5; }

#galerie .fav-bg { opacity: 1; background-size: auto 100%; -webkit-mask-image: none; mask-image: none; }


/* ==========================================================================
   HERO — phone / tablet: same side-by-side composition as desktop, scaled.
   The cone stays pinned to the ring inside the artwork layer.
   ========================================================================== */
@media (max-width: 1000px) {
  .hero {
    position: relative; display: flex; align-items: center;
    height: 96vw; min-height: 440px; max-height: 720px;
    padding: 92px 0 0; overflow: hidden;
  }
  .hero__bg { display: none; }
  .hero__artwrap { display: contents; }
  .hero__art {
    display: block; position: absolute; z-index: 0; pointer-events: none;
    top: 6vw; left: -14.6%; width: 121%; aspect-ratio: 1536 / 1024;
    background: url("../img/brand/hero-art.png") 0 0 / 100% 100% no-repeat;
  }
  .hero__art-cone {
    position: absolute; left: 59.08%; top: 19.33%; width: 27.68%; height: auto;
    filter: drop-shadow(0 18px 26px rgba(23, 22, 22, .2));
  }

  .hero__grid {
    position: relative; z-index: 1;
    grid-template-columns: minmax(0, 1fr);
    width: 60%; gap: 0;
    padding-left: clamp(16px, 5vw, 32px);
  }
  .hero__grid::before { display: none; }
  .hero__grid .stage { display: none; }

  .hero__kicker { gap: 6px; margin-bottom: 12px; }
  .hero__kicker > span:first-child { font-size: clamp(.66rem, 2.5vw, .9rem); letter-spacing: .18em; }
  .hero__slogan { font-size: clamp(.54rem, 2vw, .72rem); letter-spacing: .16em; }
  .hero__slogan::before { width: 10px; }
  .hero__title { font-size: clamp(1.45rem, 7.4vw, 2.7rem); max-width: 12ch; margin-bottom: 12px; }
  .hero__lede { font-size: clamp(.76rem, 2.9vw, .95rem); max-width: 24ch; margin-bottom: 18px; }
  .hero__ctas { flex-wrap: nowrap; gap: 8px; }
  .hero__ctas .btn {
    flex: 0 0 auto; white-space: nowrap;
    padding: 10px 14px; font-size: clamp(.56rem, 2.1vw, .68rem); letter-spacing: .1em;
  }
}
@media (max-width: 420px) {
  .hero__ctas { flex-wrap: wrap; }
  .hero__ctas .btn { flex: 1 1 auto; }
}

@media (max-width: 1000px) {
  .hero { max-height: none; }
  .hero__art { top: auto; bottom: 0; }
  .hero__grid { max-width: 56%; margin-inline: 0 auto; }
}

@media (max-width: 1000px) {
  /* the artwork carries more presence on small screens */
  .hero__art { width: 140%; left: -26.2%; bottom: 0; top: auto; }
  .hero__art-cone { filter: drop-shadow(0 26px 34px rgba(23, 22, 22, .26)); }
  .hero__grid { max-width: 52%; }
  .hero { height: 100vw; }
}

@media (max-width: 1000px) {
  /* the cone reads like the laptop view: large, softly shadowed, waffle cut by
     the hero edge rather than fully visible */
  .hero__art { bottom: -10vw; }
  .hero__art-cone {
    width: 29.5%;
    filter: drop-shadow(0 30px 42px rgba(23, 22, 22, .28));
  }
}

@media (max-width: 1000px) {
  /* lift the composition so the scoop sits level with the headline */
  .hero__art { bottom: -2vw; }
}

@media (max-width: 1000px) {
  .hero__art { bottom: -12vw; }
  .hero__art-cone { width: 27%; }
}

@media (max-width: 1000px) {
  .hero__art { bottom: 4vw; }
  .hero__art-cone { width: 23%; }
}

@media (max-width: 1000px) {
  .hero__art { bottom: 8vw; left: -24.6%; }
  .hero__art-cone { width: 30%; }
}

@media (max-width: 1000px) {
  /* the waffle is cut off by the hero edge, never fully shown */
  .hero__art { bottom: -2vw; }
  .hero__art-cone { width: 32%; }
}

@media (max-width: 1000px) {
  .hero__art { bottom: 8vw; }
  .hero__art-cone { width: 35%; }
}

@media (max-width: 1000px) {
  /* nudge the whole composition down so copy and cone sit centred in the hero */
  .hero { padding-top: 116px; }
  .hero__art { bottom: 3vw; }
}

@media (max-width: 1000px) {
  .hero { flex-direction: row; align-items: center; justify-content: flex-start; padding-top: 92px; }
}

@media (max-width: 1000px) { .hero__art { bottom: -11vw; } }

@media (max-width: 1000px) { .hero__art-cone { width: 29%; } }


/* content must never depend on JS to become visible */
html:not(.js) .rv,
html:not(.js) .sec-idx,
html:not(.js) .mask-reveal,
html:not(.js) .wipe-reveal,
html:not(.js) .mark { opacity: 1 !important; transform: none !important; clip-path: none !important; }


/* loaded in a hidden frame: land on the revealed state without transitioning */
html.no-anim .rv,
html.no-anim .sec-idx,
html.no-anim .mask-reveal,
html.no-anim .wipe-reveal,
html.no-anim .mark { transition: none !important; }
html.no-anim .rv.is-in { opacity: 1; transform: none; }


/* legible floors for the small-screen hero, and a real stack under 560px */
@media (max-width: 1000px) {
  .hero__title { font-size: clamp(1.75rem, 7.4vw, 2.7rem); }
  .hero__lede { font-size: clamp(.9rem, 2.9vw, 1rem); }
  .hero__kicker > span:first-child { font-size: clamp(.78rem, 2.5vw, .95rem); }
  .hero__slogan { font-size: clamp(.64rem, 2vw, .74rem); }
  .hero__ctas .btn {
    font-size: clamp(.7rem, 2.1vw, .8rem);
    min-height: 46px; padding: 12px 18px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}

@media (max-width: 560px) {
  /* phones: copy first at full width, artwork underneath with the cone in it */
  .hero {
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    height: auto; min-height: 0; padding: 104px 0 0;
  }
  .hero__grid { max-width: none; width: 100%; padding-inline: var(--gutter); }
  .hero__title { font-size: clamp(2.1rem, 11vw, 3rem); max-width: 14ch; }
  .hero__lede { max-width: 32ch; }
  .hero__artwrap {
    position: relative; width: 100%; height: 92vw;
    margin-top: 28px; overflow: hidden;
  }
  .hero__art {
    position: absolute; top: -4vw; bottom: auto; left: -52%; width: 156%;
  }
  .hero__art-cone { width: 27%; }
}

@media (max-width: 560px) {
  .hero__artwrap { display: block; }
  .hero__art { display: block; }
}


/* gallery decoration is vector, not a raster crop — sharp at any size */
#galerie { position: relative; isolation: isolate; }
.gal-art, .gal-frag { position: absolute; z-index: -1; pointer-events: none; }
.gal-art svg, .gal-frag svg { display: block; width: 100%; height: auto; }
.gal-art { width: clamp(220px, 30vw, 480px); aspect-ratio: 1; color: var(--graphite); opacity: .3; }
.gal-art--l { top: 6%; left: -12%; }
.gal-art--r { bottom: 2%; right: -12%; }
.gal-frag--1 { top: 12%; left: 4%; width: clamp(22px, 2.6vw, 40px); opacity: .9; }
.gal-frag--2 { bottom: 16%; right: 5%; width: clamp(18px, 2.2vw, 32px); opacity: .9; }
.gal-frag--3 { top: 26%; right: 8%; width: clamp(12px, 1.5vw, 22px); opacity: .8; }
@media (max-width: 860px) {
  .gal-art { width: clamp(180px, 42vw, 300px); opacity: .24; }
  .gal-frag--3 { display: none; }
}


/* ==========================================================================
   FOOTER — slimmer: tighter block padding, denser line rhythm, smaller mark
   ========================================================================== */
.footer__inner { padding-block: clamp(36px, 4vw, 56px) 20px; }
.footer__grid { gap: clamp(24px, 3vw, 40px); padding-bottom: clamp(24px, 3vw, 36px); }
.footer__brand { gap: 14px; margin-bottom: 14px; align-items: center; }
.footer__brand img { width: clamp(46px, 5vw, 58px); }
.footer__brand b { font-size: 1rem; letter-spacing: .14em; }
.footer__brand em { margin-top: 5px; }
.footer__blurb { font-size: .82rem; line-height: 1.65; max-width: 32ch; }
.footer__ct { margin-bottom: 10px; font-size: 9.5px; }
.footer__col a, .footer__col p, .footer__col address, .footer__col li {
  font-size: .82rem; line-height: 1.75;
}
.footer__col a { padding-block: 1px; }
.footer__bar { padding-top: 16px; }

/* the two round social buttons: perfectly circular, icon optically centred */
.socials { gap: 8px; margin-top: 14px; }
.soc {
  width: 38px; height: 38px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-width: 1px; border-radius: 50%;
  padding: 0; line-height: 0;
}
.soc svg { width: 16px; height: 16px; display: block; }
.shard-band { height: clamp(8px, 1vw, 12px); }

.soc { position: relative; }
.soc svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }


/* the location panel now shows the shop itself, with the maps link kept */
.map { overflow: hidden; }
.map__photo {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 3 / 2; object-fit: cover;
}
.map__tag { z-index: 2; }
.map__card { z-index: 2; }


/* the shop photo sits full width under the heading, details beneath it */
.find { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); }
.find > .map { order: -1; }
.map__photo { aspect-ratio: 21 / 9; }
@media (max-width: 720px) { .map__photo { aspect-ratio: 4 / 3; } }
.find > .rv > .info + .info { margin-top: clamp(20px, 2.6vw, 32px); }

.find > .map { aspect-ratio: 21 / 9; height: auto; min-height: 0; }
@media (max-width: 720px) { .find > .map { aspect-ratio: 4 / 3; } }


/* two shops, side by side */
.stores {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 36px);
}
.store .map { aspect-ratio: 3 / 2; height: auto; min-height: 0; overflow: hidden; }
.store .map__photo { aspect-ratio: 3 / 2; }
.store__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 20px; padding-top: 16px;
}
.store__foot b {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: .98rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.store__foot > span > span {
  display: block; margin-top: 4px; font-size: var(--t-sm); color: var(--graphite);
}
@media (max-width: 760px) { .stores { grid-template-columns: minmax(0, 1fr); } }

.info address + address { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(23,22,22,.09); }


/* store panels: hard corners, no captions beneath */
.store, .store .map, .store .map__photo, .map__tag { border-radius: 0; }
.store .map { aspect-ratio: 3 / 2; }
.store__foot { display: none; }

/* footer, thinner still */
.footer__inner { padding-block: clamp(26px, 3vw, 40px) 14px; }
.footer__grid { gap: clamp(18px, 2.2vw, 32px); padding-bottom: clamp(16px, 2vw, 26px); }
.footer__brand { margin-bottom: 10px; gap: 12px; }
.footer__brand img { width: clamp(38px, 4vw, 48px); }
.footer__brand b { font-size: .92rem; }
.footer__blurb { font-size: .78rem; line-height: 1.55; }
.footer__ct { margin-bottom: 8px; }
.footer__col a, .footer__col p, .footer__col address, .footer__col li { font-size: .78rem; line-height: 1.6; }
.footer__col a { padding-block: 0; }
.socials { margin-top: 10px; gap: 7px; }
.soc { width: 34px; height: 34px; }
.soc svg { width: 15px; height: 15px; }
.footer__bar { padding-top: 12px; font-size: .72rem; }
.shard-band { height: 7px; }


/* per-store maps link, sitting on the photo */
.store .map { position: relative; }
.map__link {
  position: absolute; right: 14px; bottom: 14px; z-index: 3;
  border-radius: 0; min-height: 40px;
  display: inline-flex; align-items: center;
}

/* taller store panels, held a touch narrower so the pair stays balanced */
.stores { max-width: 92%; margin-inline: auto; }
.store .map, .store .map__photo { aspect-ratio: 4 / 3.4; }
@media (max-width: 760px) {
  .stores { max-width: none; }
  .store .map, .store .map__photo { aspect-ratio: 4 / 3; }
}

/* both panels identical and taller: one fixed ratio, stretched to equal height */
.stores { align-items: stretch; }
.store { display: flex; }
.store .map {
  width: 100%; aspect-ratio: 4 / 4.2; height: auto; min-height: 0;
}
.store .map__photo { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
@media (max-width: 760px) { .store .map { aspect-ratio: 4 / 3.4; } }


/* more air between the two shops, and a single quiet contact row beneath */
.stores { gap: clamp(28px, 4vw, 56px); }
.find { gap: clamp(36px, 5vw, 64px); }
.find > .rv {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(18px, 3vw, 40px);
  padding-top: clamp(22px, 3vw, 34px);
  border-top: 1px solid rgba(23, 22, 22, .1);
}
.find > .rv > .info { margin: 0; }
.find > .rv > .info p:not(.info__t) { display: inline-block; margin-right: 22px; }
.find__btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

.stores { width: 92%; max-width: none; margin-inline: auto; }
@media (max-width: 760px) { .stores { width: 100%; } }

/* footer, tighter again */
.footer__inner { padding-block: 20px 10px; }
.footer__grid { gap: 14px 26px; padding-bottom: 14px; }
.footer__brand { margin-bottom: 8px; gap: 10px; }
.footer__brand img { width: 34px; }
.footer__brand b { font-size: .84rem; letter-spacing: .12em; }
.footer__brand em { margin-top: 3px; }
.footer__blurb { font-size: .74rem; line-height: 1.5; max-width: 30ch; }
.footer__ct { margin-bottom: 6px; font-size: 9px; }
.footer__col a, .footer__col p, .footer__col address, .footer__col li { font-size: .74rem; line-height: 1.5; }
.socials { margin-top: 8px; }
.soc { width: 30px; height: 30px; }
.soc svg { width: 13px; height: 13px; }
.footer__bar { padding-top: 10px; font-size: .68rem; }
.shard-band { height: 5px; }

/* both storefronts framed on their centre */
.store .map__photo { object-position: center center; }


/* footer as one compact band: four columns from tablet up, no stacked rows */
@media (min-width: 760px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: 12px 28px;
  }
  .footer__col:first-child { grid-column: auto; }
}
.footer__blurb { max-width: 26ch; }
.footer__col ul { display: grid; gap: 0; }
.footer__bar { gap: 6px 20px; }

/* contact row: label + number, two matching ghost buttons beside it */
.find > .rv > .info .info__t { margin-bottom: 6px; }
.find > .rv > .info p:not(.info__t) { margin-right: 0; font-size: .95rem; }
.find__btns .btn { min-height: 44px; display: inline-flex; align-items: center; gap: 9px; }

/* only the two action buttons remain under the shops */
.find > .rv { justify-content: center; }

/* footer: two locations listed, social buttons keep a 44px hit area */
.footer address + address { margin-top: 8px; }
.soc { position: relative; }
.soc::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}


/* the two action buttons match the site's square-edged button language */
.find__btns { gap: 14px; }
.find__btns .btn {
  border-radius: 0;
  min-height: 52px; padding: 0 26px;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  font-family: var(--display); font-weight: 600;
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  transition: background .3s var(--e-soft), color .3s var(--e-soft), border-color .3s var(--e-soft);
}
.find__btns .btn svg { color: currentColor; }
.find__btns .btn:hover,
.find__btns .btn:focus-visible { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.find__btns .btn:last-child:hover,
.find__btns .btn:last-child:focus-visible { background: var(--orange); border-color: var(--orange); color: var(--ink); }


/* "Eis mit Seele": the counter shot beside the copy, hard-edged like the rest */
.craft { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 72px); }
.craft__art { width: 100%; max-width: none; }
.craft__shot { border-radius: 0; overflow: hidden; }
.craft__shot img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0;
}
.craft__badge { z-index: 3; }
@media (max-width: 1180px) {
  .craft { grid-template-columns: minmax(0, 1fr); }
  .craft__art { width: 100%; }
  .craft__shot img { aspect-ratio: 16 / 10; }
}


/* the counter shot: real box, image fully inside it, copy alongside from 861px */
.craft__shot {
  position: relative; aspect-ratio: 4 / 3;
  width: 100%; height: auto; min-height: 0;
  overflow: hidden; border-radius: 0; clip-path: none;
}
.craft__shot img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none; min-width: 0;
  object-fit: cover; transform: none;
}
@media (min-width: 861px) {
  .craft {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center; gap: clamp(28px, 4vw, 64px);
  }
  .craft__art { width: 100%; }
}
@media (max-width: 860px) { .craft__shot { aspect-ratio: 16 / 10; } }

/* taller counter shot */
.craft__shot { aspect-ratio: 4 / 4.4; }
@media (max-width: 860px) { .craft__shot { aspect-ratio: 4 / 3; } }

/* a taller hero — same composition, just more room */
@media (min-width: 1001px) { .hero { height: clamp(660px, 55vw, 980px); } }

@media (min-width: 1001px) { .hero { height: clamp(600px, 49vw, 900px); } }


/* ==========================================================================
   PREISLISTE PAGE — page head, price tiers, delivery, flavour index
   ========================================================================== */
/* two pages only — the links get more air and the active page an orange rule */
.nav__links { gap: clamp(24px, 3.4vw, 48px); }
.nav__link.is-current { color: var(--ink); font-weight: 700; }
.nav__link.is-current::after { transform: scaleX(1); transform-origin: left; background: var(--orange); }

.phead {
  position: relative;
  padding-block: clamp(112px, 14vh, 156px) clamp(40px, 6vw, 72px);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.phead__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
}
.phead__kicker {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(.7rem, .95vw, .8rem);
  letter-spacing: .26em; text-transform: uppercase; color: var(--charcoal);
  margin-bottom: 12px;
}
.phead__title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.15rem, 4.5vw, 4rem);
  line-height: .98; letter-spacing: -.018em;
  text-transform: uppercase;
}
.phead .orn-dash { margin-block: clamp(18px, 2.2vw, 26px) clamp(16px, 2vw, 22px); }

.phead__facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
}
.phead__facts li {
  display: grid; gap: 4px; align-content: start;
  padding-top: 16px; border-top: 2px solid var(--ink);
}
.phead__facts span:first-child {
  font-family: var(--display); font-size: 10px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--graphite);
}
.phead__facts b {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.05; letter-spacing: -.02em;
}
.phead__facts em { font-style: normal; font-size: var(--t-sm); color: var(--ink-62); }

/* --- price tiers --------------------------------------------------------- */
#preise { background: linear-gradient(to bottom, var(--paper) 0%, var(--paper-2) 100%); }

.tiers {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
  align-items: stretch;
}
.tier {
  --accent: var(--turq);
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  padding: clamp(26px, 2.8vw, 38px) clamp(24px, 2.6vw, 34px) clamp(24px, 2.6vw, 32px);
  background: var(--white);
  border: 1px solid var(--rule);
  box-shadow: 0 1px 0 rgba(23,22,22,.04), 0 26px 60px -34px rgba(23,22,22,.30);
  transition: transform .42s var(--e-out), box-shadow .42s var(--e-out), border-color .42s var(--e-soft);
}
.tier::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; z-index: 2;
  background: var(--accent);
  transform: scaleX(.34); transform-origin: left;
  transition: transform .55s var(--e-out);
}
.tier:hover {
  transform: translateY(-4px);
  border-color: var(--rule-2);
  box-shadow: 0 1px 0 rgba(23,22,22,.04), 0 34px 70px -32px rgba(23,22,22,.34);
}
.tier:hover::before { transform: scaleX(1); }
.tier--mid { --accent: var(--orange); }
.tier--top { --accent: var(--ink); }

.tier__num {
  font-family: var(--display); font-size: 10px; font-weight: 700;
  letter-spacing: .22em; color: var(--graphite); margin-bottom: 14px;
}
/* two lines are reserved so the price rules line up across all three cards */
.tier__title {
  font-size: clamp(1.15rem, 1.55vw, 1.4rem);
  text-transform: uppercase; letter-spacing: .015em; line-height: 1.22;
  min-height: 2.44em;
  display: flex; align-items: flex-start;
}
.tier__price {
  display: flex; align-items: baseline; gap: 9px;
  margin-top: clamp(16px, 2vw, 22px);
  padding-bottom: clamp(18px, 2.2vw, 24px);
  border-bottom: 1px solid var(--rule);
}
.tier__price b {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.1rem, 3.4vw, 2.9rem); line-height: 1; letter-spacing: -.032em;
  font-variant-numeric: tabular-nums;
}
.tier__price span {
  font-family: var(--display); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--graphite);
}
.tier__desc {
  margin-top: clamp(16px, 2vw, 20px);
  color: var(--ink-80); font-size: var(--t-sm); line-height: 1.62;
}
.tier__link {
  display: inline-flex; align-items: center; gap: 9px;
  align-self: flex-start;
  margin-top: clamp(20px, 2.6vw, 28px);
  padding-top: clamp(16px, 2vw, 20px);
  border-top: 1px solid var(--rule);
  width: 100%;
  font-family: var(--display); font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  transition: color .3s var(--e-soft);
}
.tier__link { margin-top: auto; }
.tier__link svg { transition: transform .34s var(--e-out); }
.tier__link:hover { color: var(--graphite); }
.tier__link:hover svg { transform: translateX(3px); }

.note {
  margin-top: clamp(28px, 3.4vw, 44px);
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--rule);
  font-size: var(--t-sm); color: var(--ink-62); max-width: 78ch;
}

/* --- delivery ------------------------------------------------------------ */
.deliv {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 80px); align-items: start;
}
.deliv__copy > .rv > p + p { margin-top: 16px; }
.steps {
  display: grid; gap: clamp(14px, 1.8vw, 20px);
  margin-top: clamp(28px, 3.4vw, 42px);
}
.steps li { display: flex; gap: 16px; align-items: flex-start; }
.steps__n {
  flex: none; width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  font-family: var(--display); font-size: 12px; font-weight: 700;
}
.steps li:nth-child(2) .steps__n { background: var(--turq); color: var(--ink); }
.steps li:nth-child(3) .steps__n { background: var(--orange); color: var(--ink); }
.steps li > span:last-child { display: grid; gap: 3px; }
.steps strong {
  font-family: var(--display); font-size: var(--t-base); font-weight: 700;
  letter-spacing: -.01em;
}
.steps li span span { font-size: var(--t-sm); color: var(--ink-62); }
.deliv__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 3.4vw, 40px); }

.deliv__shot { aspect-ratio: 4 / 3; }
.deliv__facts { display: grid; gap: 0; margin-top: clamp(22px, 2.6vw, 30px); }
.deliv__facts li {
  display: flex; gap: 14px; align-items: flex-start;
  padding-block: clamp(14px, 1.8vw, 18px);
  border-bottom: 1px solid var(--rule);
}
.deliv__facts li:first-child { border-top: 1px solid var(--rule); }
.deliv__ic {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  border: 1.5px solid var(--rule-2); color: var(--ink);
}
.deliv__facts li > span:last-child { display: grid; gap: 3px; }
.deliv__facts strong {
  font-family: var(--display); font-size: var(--t-base); font-weight: 700; letter-spacing: -.01em;
}
.deliv__facts li span span { font-size: var(--t-sm); color: var(--ink-62); }

/* --- flavour index ------------------------------------------------------- */
.pcats { display: grid; gap: clamp(44px, 6vw, 80px); }
.pcat { display: grid; gap: clamp(24px, 3vw, 38px); }
.pcat__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px;
  padding-bottom: clamp(14px, 1.8vw, 20px);
  border-bottom: 2px solid var(--ink);
}
.pcat__name {
  font-size: var(--t-lg); text-transform: uppercase; letter-spacing: .01em; line-height: 1.1;
}
.pcat__hint { font-size: var(--t-sm); color: var(--ink-62); }
.pcat__block { display: grid; gap: clamp(14px, 1.8vw, 20px); }
.pcat__tier {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-family: var(--display); font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--graphite);
}
.pcat__tier b { color: var(--ink); letter-spacing: .1em; }

.flavs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0 clamp(24px, 3vw, 48px);
}
.flavs li {
  display: block;
  padding-block: 11px;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-base);
  color: var(--ink-80);
}
.flavs li em {
  display: block; font-style: normal;
  font-size: var(--t-xs); color: var(--graphite);
}

.pcats__foot {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--rule);
}

@media (max-width: 980px) {
  .phead__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .tiers { grid-template-columns: minmax(0, 1fr); }
  .tier__title { min-height: 0; }
  .deliv { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .phead__facts { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .phead__facts li { padding-top: 12px; }
  .deliv__btns .btn, .pcats__foot .btn { flex: 1 1 100%; }
  .flavs { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   FLAVOUR REEL — full-bleed pinned band, cup centred over oversized type
   ========================================================================== */
/* overflow: clip contains the bleed art without creating a scroll container,
   so the reel's sticky stage still pins to the page */
.section--fav { overflow: clip; }

.reel {
  position: relative;
  width: 100%;
  height: calc(100svh + var(--steps) * 88svh);
  margin-top: clamp(34px, 5vw, 72px);
  --acc: var(--orange);
}
.reel__stick {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  background: var(--ink); color: var(--paper);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  padding: clamp(16px, 3.2vh, 34px) clamp(18px, 4vw, 64px) 0;
  isolation: isolate;
}
.reel__glow {
  position: absolute; z-index: 0; left: 50%; top: 46%;
  width: min(78vw, 900px); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 50%, color-mix(in oklch, var(--acc) 46%, transparent) 0%, transparent 58%);
  opacity: .34; transition: background .7s var(--e-soft);
  pointer-events: none;
}
.reel__ring {
  position: absolute; z-index: 0; left: 50%; top: 47%;
  width: min(52vw, 520px); aspect-ratio: 1; transform: translate(-50%, -50%) rotate(0deg);
  border: 1px solid rgba(247, 247, 244, .16); border-radius: 50%;
  pointer-events: none;
}
.reel__ring::after {
  content: ''; position: absolute; inset: -9%;
  border: 1px dashed var(--acc); border-radius: 50%; opacity: .4;
  transition: border-color .7s var(--e-soft);
}

/* --- head row --- */
.reel__head { position: relative; z-index: 3; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.reel__eyebrow {
  font-family: var(--display); font-size: 10px; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase; color: var(--graphite-2);
}
.reel__count { display: flex; align-items: baseline; gap: 9px; font-family: var(--display); line-height: .9; }
.reel__count b {
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); font-weight: 700; letter-spacing: -.04em;
  color: var(--acc); transition: color .5s var(--e-soft);
  font-variant-numeric: tabular-nums;
}
.reel__count i {
  font-style: normal; font-size: 10px; font-weight: 700;
  letter-spacing: .24em; color: var(--graphite-2);
}

/* --- core: giant type + cups --- */
.reel__core { position: relative; z-index: 1; }
.reel__words {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center; overflow: hidden;
  margin: 0; padding: 0;
}
.reel__word {
  position: absolute; width: 100%;
  display: grid; justify-items: center; gap: min(23svh, 190px);
  font-family: var(--display); font-weight: 700;
  font-size: clamp(3.2rem, 13vw, 11rem);
  line-height: .82; letter-spacing: -.045em; text-transform: uppercase;
  color: var(--paper); white-space: nowrap;
  will-change: transform, opacity;
}
.reel__word span:last-child { color: var(--acc); transition: color .6s var(--e-soft); }

.reel__cups { position: absolute; inset: 0; z-index: 2; }
.reel__img {
  position: absolute; left: 50%; top: 50%;
  height: min(100%, 54svh); width: auto; max-width: 74vw;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  filter: drop-shadow(0 34px 60px rgba(0, 0, 0, .55));
}

/* --- foot: active card + cta --- */
.reel__foot {
  position: relative; z-index: 3;
  display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(16px, 4vw, 60px);
  padding-bottom: clamp(14px, 2.4vh, 26px);
}
.reel__cards { position: relative; flex: 1 1 auto; min-height: 5.4em; }
.reel__card { position: absolute; inset: 0; will-change: transform, opacity; }
.reel__label {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  letter-spacing: .06em; text-transform: uppercase;
}
.reel__label i {
  font-style: normal; font-size: 10px; letter-spacing: .2em; color: var(--acc);
  transition: color .5s var(--e-soft);
}
.reel__vegan {
  background: var(--paper); color: var(--ink); padding: 4px 9px;
  font-size: 9.5px; letter-spacing: .2em;
}
.reel__desc {
  margin-top: 10px; max-width: 42ch;
  font-size: var(--t-md); line-height: 1.55; color: var(--graphite-2);
}
.reel__cta {
  flex: none; display: inline-flex; align-items: center; gap: 10px;
  padding-bottom: 7px; border-bottom: 1.5px solid rgba(247, 247, 244, .3);
  font-family: var(--display); font-size: 10px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--paper); text-decoration: none;
  transition: border-color .3s var(--e-soft), color .3s var(--e-soft), gap .3s var(--e-out);
}
.reel__cta:hover { color: var(--acc); border-color: var(--acc); gap: 16px; }

/* --- progress bar --- */
.reel__bar {
  position: relative; z-index: 3;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border-top: 1px solid rgba(247, 247, 244, .18);
}
.reel__fill {
  position: absolute; left: 0; top: -1px; height: 2px; width: 0;
  background: var(--acc); transition: background .6s var(--e-soft);
}
.reel__seg {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: clamp(10px, 1.6vh, 16px) 0; text-align: left;
  display: flex; align-items: center; gap: 10px;
  color: var(--graphite-2);
  border-left: 1px solid rgba(247, 247, 244, .12);
  padding-left: 12px;
  transition: color .3s var(--e-soft), background .3s var(--e-soft);
}
.reel__seg:first-child { border-left: 0; padding-left: 0; }
.reel__seg em { font-style: normal; font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: .2em; }
.reel__seg i { display: block; width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); opacity: .5; }
.reel__seg:hover { color: var(--paper); }
.reel__seg.is-on { color: var(--paper); }
.reel__seg.is-on i { background: var(--acc); opacity: 1; }

@media (max-width: 900px) {
  .reel { height: calc(100svh + var(--steps) * 76svh); }
  .reel__stick { padding-inline: 18px; }
  .reel__word { font-size: clamp(2.2rem, 13vw, 5rem); letter-spacing: -.04em; }
  .reel__foot { flex-direction: column; align-items: flex-start; gap: 14px; }
  .reel__cards { min-height: 6.2em; width: 100%; }
  .reel__desc { font-size: var(--t-sm); }
  .reel__seg em { display: none; }
  .reel__seg { justify-content: center; padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .reel__img, .reel__word, .reel__card { transition: none !important; }
}


/* --- reel on paper: same composition, site's own light palette ------------ */
.reel__stick {
  background: var(--paper); color: var(--ink);
  border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
}
.reel__glow {
  background: radial-gradient(circle at 50% 50%, color-mix(in oklch, var(--acc) 30%, transparent) 0%, transparent 60%);
  opacity: .55;
}
.reel__ring { border-color: rgba(23, 22, 22, .12); }
.reel__ring::after { opacity: .5; }
.reel__eyebrow { color: var(--graphite); }
.reel__count i { color: var(--graphite); }
.reel__word { color: var(--ink); }
.reel__img { filter: drop-shadow(0 26px 44px rgba(23, 22, 22, .22)); }
.reel__desc { color: var(--charcoal); }
.reel__vegan { background: var(--ink); color: var(--paper); }
.reel__cta { color: var(--ink); border-bottom-color: var(--rule-2); }
.reel__bar { border-top-color: var(--rule-2); }
.reel__seg { color: var(--graphite); border-left-color: rgba(23, 22, 22, .12); }
.reel__seg:hover, .reel__seg.is-on { color: var(--ink); }


/* desktop: a touch more presence for the cup */
@media (min-width: 901px) {
  .reel__img { height: min(100%, 62svh); }
}


/* --- reel on phones: the cup keeps clear of both type lines --------------- */
@media (max-width: 900px) {
  .reel { height: calc(100svh + var(--steps) * 72svh); }
  .reel__word { gap: min(15svh, 118px); line-height: .86; }
  .reel__img { height: min(100%, 42svh); max-width: 62vw; }
  .reel__ring { width: min(74vw, 420px); }
  .reel__glow { width: min(104vw, 560px); }
  .reel__count b { font-size: 1.5rem; }
  .reel__head { align-items: center; }
  .reel__foot { padding-bottom: 12px; }
  .reel__label { font-size: 1rem; letter-spacing: .05em; gap: 9px; }
  .reel__desc { margin-top: 7px; max-width: 32ch; }
  .reel__cta { font-size: 9.5px; letter-spacing: .18em; }
  .reel__seg { padding-block: 12px; }
}
@media (max-width: 900px) and (max-height: 620px) {
  .reel__word { gap: min(11svh, 74px); font-size: clamp(1.9rem, 11vw, 3rem); }
  .reel__img { height: min(100%, 34svh); }
  .reel__cards { min-height: 5.2em; }
}


/* footer credit */
.footer__bar a { color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--rule-dark); transition: color .25s var(--e-soft), border-color .25s var(--e-soft); }
.footer__bar a:hover, .footer__bar a:focus-visible { color: var(--turq); border-color: var(--turq); }


/* press: second pull-quote line sits quieter under the headline quote */
.press__quote p + .press__quote-2 {
  margin-top: clamp(10px, 1.2vw, 14px);
  font-size: var(--t-sm); color: var(--graphite);
}


/* page header: statement left, manifesto right, facts as a strip beneath */
@media (min-width: 981px) {
  .phead__grid { align-items: start; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
}
.phead__text { display: grid; gap: clamp(11px, 1.3vw, 15px); max-width: 56ch; }
.phead__text p { font-size: var(--t-sm); line-height: 1.68; color: var(--charcoal); }
.phead__text p:first-child { margin-top: 2px; }
.phead__claim {
  margin-top: clamp(18px, 2.4vw, 28px);
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1rem, 1.7vw, 1.4rem);
  line-height: 1.2; letter-spacing: -.015em;
  text-wrap: balance; max-width: 22ch;
}
.phead__claim::before {
  content: ''; display: block; width: 46px; height: 2px;
  background: var(--orange); margin-bottom: clamp(10px, 1.2vw, 14px);
}
.phead__facts { margin-top: clamp(34px, 5vw, 62px); }

@media (max-width: 980px) {
  .phead__text { max-width: 62ch; }
  .phead__claim { max-width: none; }
}

/* two facts left after the becher entry was dropped */
.phead__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; }

/* tier accents: Classic = ink, Premium = orange, Platino & Vegan = green */
.tier { --accent: var(--ink); }
.tier--mid { --accent: var(--orange); }
.tier--top { --accent: var(--green); }


/* ==========================================================================
   LEGAL PAGES — Impressum, Datenschutz
   ========================================================================== */
.phead--legal { padding-bottom: clamp(20px, 3vw, 34px); }
.phead--legal .lede { max-width: 48ch; }

.legal { padding: clamp(28px, 4vw, 52px) 0 clamp(60px, 8vw, 110px); }
.legal__shell { max-width: 940px; }
.legal__block {
  padding: clamp(18px, 2.4vw, 28px) 0;
  border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
  gap: clamp(14px, 3vw, 44px); align-items: start;
}
.legal__block:first-child { border-top: 1.5px solid var(--ink); }
.legal__h {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(.82rem, 1.1vw, .95rem);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  line-height: 1.3;
}
.legal__body {
  font-style: normal; font-size: var(--t-sm); line-height: 1.7;
  color: var(--charcoal); max-width: 62ch;
}
.legal__block > .legal__h { grid-column: 1; grid-row: 1; }
.legal__block > *:not(.legal__h) { grid-column: 2; }
.legal__block { row-gap: clamp(10px, 1.2vw, 14px); }
.legal__body b { color: var(--ink); font-weight: 600; }
.legal__body a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-2); }
.legal__body a:hover, .legal__body a:focus-visible { color: var(--turq); border-color: var(--turq); }
.legal__note {
  margin-top: -2px;
  font-family: var(--display); font-size: 10px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--graphite);
}
.legal__foot {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(26px, 4vw, 44px);
  padding-top: clamp(20px, 3vw, 32px); border-top: 1.5px solid var(--ink);
}
.footer__bar a { white-space: nowrap; }

@media (max-width: 760px) {
  .legal__block { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .legal__block > .legal__h, .legal__block > *:not(.legal__h) { grid-column: 1; }
}

/* motto above the lede on the price page header */
.phead__motto {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  letter-spacing: -.015em; color: var(--ink);
  margin-bottom: clamp(6px, .8vw, 10px);
}


/* ==========================================================================
   STORY PAGE — geschichte.html
   Photo-led family story: centred statements, alternating photo/text rows,
   one dark frieze for the logo's five figures, vector shard accents only.
   ========================================================================== */

/* --- running furniture --------------------------------------------------- */
.sprog { position: fixed; top: 0; left: 0; right: 0; height: 2.5px; z-index: 95; pointer-events: none; }
.sprog i { display: block; height: 100%; background: var(--turq); transform: scaleX(0); transform-origin: left; }

.st-counter {
  position: fixed; left: clamp(14px, 2vw, 26px); bottom: clamp(14px, 2vw, 26px); z-index: 60;
  display: none; align-items: center; gap: 9px;
  background: var(--ink); color: var(--paper); padding: 9px 14px;
  font-family: var(--display); font-size: 10px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s var(--e-out), transform .4s var(--e-out);
  pointer-events: none;
}
.st-counter.is-on { opacity: 1; transform: none; }
.st-counter b { color: var(--turq); font-weight: 700; }
@media (min-width: 981px) { .st-counter { display: inline-flex; } }

/* --- vector shard accents (no raster artwork anywhere) ------------------- */
.shardfield { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.shardfield i { position: absolute; display: block; opacity: .85; }
.shardfield i svg { display: block; width: 100%; height: auto; }
.shardfield .sf-arc { position: absolute; border: 1.5px solid var(--rule); border-radius: 50%; aspect-ratio: 1; }
.shardfield .sf-arc--2 { border-color: var(--rule-2); border-width: 1px; }
.sf--1 { top: 20%; left: 2.5%;   width: clamp(26px, 3.2vw, 56px); }
.sf--2 { top: 46%; left: 6%;     width: clamp(16px, 1.9vw, 30px); }
.sf--3 { bottom: 16%; left: 3%;  width: clamp(18px, 2.2vw, 36px); }
.sf--4 { top: 24%; right: 3%;    width: clamp(22px, 2.6vw, 44px); }
.sf--5 { top: 56%; right: 2%;    width: clamp(28px, 3.6vw, 64px); }
.sf--6 { bottom: 12%; right: 7%; width: clamp(16px, 2vw, 32px); }
.sf-arc--1 { top: -62%; left: -30%; width: clamp(420px, 58vw, 940px); }
.sf-arc--2 { bottom: -66%; right: -28%; width: clamp(380px, 52vw, 860px); }
@media (max-width: 860px) { .sf--2, .sf--5, .sf-arc--2 { display: none; } }

/* --- shared type ---------------------------------------------------------- */
.st-kick {
  font-family: var(--display); font-size: 10px; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase; color: var(--graphite);
  display: flex; align-items: center; gap: 10px;
}
.st-kick::before { content: ''; width: 22px; height: 2px; background: var(--turq); flex: none; }
.st-kick--o::before { background: var(--orange); }
.st-kick--c { justify-content: center; }

.st-h {
  font-family: var(--display); font-weight: 700; color: var(--ink);
  font-size: clamp(1.7rem, 3.6vw, 2.9rem);
  line-height: 1.05; letter-spacing: -.03em; text-wrap: balance;
}
.st-p { font-size: var(--t-base); line-height: 1.8; color: var(--charcoal); text-wrap: pretty; }
.st-p + .st-p { margin-top: 1em; }
.st-lede { font-size: var(--t-md); line-height: 1.64; color: var(--ink-80); text-wrap: pretty; }

.st-num {
  display: block; font-family: var(--display); font-weight: 700; line-height: .8;
  letter-spacing: -.05em; color: var(--rule-2);
}
@supports (-webkit-text-stroke: 1px currentColor) {
  .st-num { color: transparent; -webkit-text-stroke: 1.5px var(--ink); opacity: .42; }
  .st-num--light { -webkit-text-stroke-color: var(--paper); opacity: .5; }
}

/* photographs get a soft radius, matching the home page's craft shot */
.st-img {
  display: block; width: 100%; height: auto;
  border-radius: clamp(10px, 1.4vw, 18px);
  background: var(--stone);
}
.st-cap {
  margin-top: 12px;
  font-family: var(--display); font-size: 9.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--graphite);
}

/* ==========================================================================
   OPENING — centred statement over a full-width photograph
   ========================================================================== */
.st-open {
  position: relative; isolation: isolate; overflow: hidden; background: var(--paper);
  padding-block: clamp(108px, 14vh, 164px) 0;
}
.st-open__inner { display: grid; justify-items: center; text-align: center; }
.st-open__title {
  margin-top: clamp(16px, 2.2vw, 24px);
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.3rem, 6.6vw, 5.4rem);
  line-height: 1.0; letter-spacing: -.035em;
  max-width: 15ch; text-wrap: balance;
}
.st-open__title .dot { color: var(--orange); }
.st-open__title .mark::after { height: .04em; bottom: .19em; }
.st-open__lede { margin-top: clamp(20px, 2.8vw, 32px); max-width: 52ch; }

.st-hero-shot {
  position: relative; width: 100%;
  margin-top: clamp(34px, 5vw, 64px);
  padding-bottom: clamp(52px, 7vw, 86px);
}
.st-hero-shot > img, .st-hero-shot .st-img { aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 45%; }
.st-hero-shot .seal {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  z-index: 2;
}
.st-hero-shot .seal__disc {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
}
.st-hero-shot .seal__disc::before { border-color: transparent; }

.st-stats {
  width: 100%; margin-top: clamp(30px, 4vw, 52px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1.5px solid var(--ink);
}
.st-stats li { padding-top: clamp(14px, 1.8vw, 20px); display: grid; gap: 3px; justify-items: center; text-align: center; }
.st-stats li + li { border-left: 1px solid var(--rule); }
.st-stats b {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1; letter-spacing: -.035em;
}
.st-stats span {
  font-family: var(--display); font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--graphite);
}
@media (max-width: 560px) {
  .st-stats { grid-template-columns: minmax(0, 1fr); }
  .st-stats li + li { border-left: 0; border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 12px; }
}

/* the logo as a seal ------------------------------------------------------- */
.st-portrait {
  margin: clamp(30px, 4vw, 48px) auto 0; width: min(420px, 78%);
  display: grid; gap: 12px; justify-items: center;
}
.st-portrait .st-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.st-portrait .st-cap { text-align: center; }
.seal { display: grid; justify-items: center; gap: 12px; }
.seal__disc {
  position: relative; width: clamp(104px, 12vw, 152px); aspect-ratio: 1;
  display: grid; place-items: center; border-radius: 50%;
}
.seal__disc::before, .seal__disc::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.seal__disc::before { inset: 0; border: 1.5px solid var(--rule-2); }
.seal__disc::after  { inset: 9%; border: 1px solid var(--rule); }
.seal picture { display: block; width: 78%; }
.st-hero-shot .seal picture { width: 86%; }
.st-hero-shot .seal img { object-fit: contain; aspect-ratio: 1; }
.seal img { position: relative; width: 100%; height: auto; display: block; }
.seal__cap {
  max-width: 24ch; text-align: center;
  font-family: var(--display); font-size: 10px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--graphite); line-height: 1.7;
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.st-sec { position: relative; isolation: isolate; overflow: hidden; background: var(--paper); padding-block: clamp(52px, 7.5vw, 104px); }
.st-sec--alt { background: var(--paper-2); }

/* centred statement block -------------------------------------------------- */
.st-say { display: grid; justify-items: center; text-align: center; }
.st-say .st-h { max-width: 19ch; margin-top: clamp(16px, 2.2vw, 24px); }
.st-say .st-lede { max-width: 54ch; margin-top: clamp(16px, 2.2vw, 24px); }
.st-say .st-body { max-width: 58ch; margin-top: clamp(16px, 2.2vw, 24px); }

/* alternating photo / text row --------------------------------------------- */
.st-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4.4vw, 70px); align-items: center;
}
.st-row + .st-row { margin-top: clamp(44px, 7vw, 100px); }
.st-row__text { max-width: 46ch; }
.st-row__text .st-h { margin-top: clamp(14px, 1.8vw, 20px); }
.st-row__text .st-p { margin-top: clamp(14px, 1.8vw, 20px); }
.st-row--flip .st-row__media { order: 2; }
.st-row__media { position: relative; }
.st-row__media img { aspect-ratio: 4 / 3; object-fit: cover; }
.st-row__badge {
  position: absolute; top: clamp(-10px, -1vw, -6px); left: clamp(-8px, -1vw, -6px);
  background: var(--ink); color: var(--paper);
  padding: 9px 14px;
  font-family: var(--display); font-size: 10px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
}
@media (max-width: 860px) {
  .st-row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .st-row--flip .st-row__media { order: 0; }
  .st-row__text { max-width: none; }
}

/* display lines ------------------------------------------------------------ */
.st-lines { margin-top: clamp(26px, 3.6vw, 44px); display: grid; gap: clamp(4px, .7vw, 9px); justify-items: center; }
.st-lines li {
  font-family: var(--display); font-weight: 700; color: var(--ink);
  white-space: nowrap;
  font-size: clamp(1.15rem, 2.6vw, 2.1rem);
  line-height: 1.14; letter-spacing: -.03em;
  opacity: 0; transform: translateY(16px);
  transition: opacity .7s var(--e-out), transform .7s var(--e-out);
}
.st-lines.is-in li { opacity: 1; transform: none; }
.st-lines li:nth-child(2) { transition-delay: .1s; }
.st-lines li:nth-child(3) { transition-delay: .2s; }
.st-lines li:nth-child(4) { transition-delay: .3s; }
.st-lines li:nth-child(5) { transition-delay: .4s; }
.st-lines li span { color: var(--turq); }
.st-lines li:nth-child(even) span { color: var(--orange); }
.st-lines.rv { opacity: 1; transform: none; }
html:not(.js) .st-lines li { opacity: 1; transform: none; }

/* quote -------------------------------------------------------------------- */
.st-quote { display: grid; justify-items: center; text-align: center; }
.st-quote p {
  font-family: var(--display); font-weight: 700; color: var(--ink);
  font-size: clamp(1.4rem, 3.4vw, 2.6rem);
  line-height: 1.14; letter-spacing: -.028em;
  max-width: 24ch; text-wrap: balance;
}
.st-quote cite {
  display: block; margin-top: clamp(14px, 1.6vw, 18px);
  font-style: normal; font-size: var(--t-sm); line-height: 1.6; color: var(--ink-62);
}
.st-quote .orn-dash { margin-bottom: clamp(18px, 2.4vw, 26px); }

/* photo strips -------------------------------------------------------------- */
.st-strip {
  width: 100%; margin-top: clamp(28px, 4vw, 52px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 22px);
}
.st-strip img { aspect-ratio: 3 / 4; object-fit: contain; object-position: 50% 100%; background: var(--paper-2, #F1F1EC); }
.st-tubs {
  width: 100%; margin-top: clamp(28px, 4vw, 52px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 18px);
}
.st-tubs img { aspect-ratio: 1; object-fit: cover; }
@media (max-width: 700px) {
  .st-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .st-tubs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  /* heading, then the photo, then the copy */
  .craft { display: grid; grid-template-columns: minmax(0, 1fr); }
  .craft__copy { display: contents; }
  .craft__copy > .sec-head { order: 1; margin-bottom: 0; }
  .craft__art { order: 2; margin-block: clamp(20px, 4vw, 32px); }
  .craft__copy > .rv:not(.sec-head) { order: 3; }
  .craft__copy > .feats { order: 4; }
}

/* ==========================================================================
   FRIEZE — the five figures, dark
   ========================================================================== */
.st-five { position: relative; background: var(--ink); color: rgba(247, 247, 244, .82); overflow: hidden; }
.st-five__inner { padding-block: clamp(56px, 8vw, 104px) clamp(48px, 7vw, 92px); display: grid; justify-items: center; text-align: center; }
.st-five .st-kick { color: var(--graphite-2); }
.st-five__title {
  margin-top: clamp(16px, 2.2vw, 24px);
  font-family: var(--display); font-weight: 700; color: var(--paper);
  font-size: clamp(1.9rem, 4.4vw, 3.3rem);
  line-height: 1.02; letter-spacing: -.03em; max-width: 16ch; text-wrap: balance;
}
.st-five__intro { margin-top: clamp(16px, 2.2vw, 26px); font-size: var(--t-base); line-height: 1.75; max-width: 58ch; text-wrap: pretty; }

.st-frieze {
  width: 100%; margin-top: clamp(32px, 4.6vw, 62px);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--rule-dark);
}
.st-fig {
  position: relative;
  padding: clamp(18px, 2.2vw, 28px) clamp(10px, 1.4vw, 18px) clamp(26px, 3vw, 38px);
  display: grid; gap: 9px; justify-items: center; align-content: start; text-align: center;
  transition: transform .5s var(--e-out);
}
.st-fig + .st-fig { border-left: 1px solid var(--rule-dark); }
.st-fig .st-num { font-size: clamp(2.2rem, 4.2vw, 3.4rem); }
.st-fig__role { font-family: var(--display); font-size: 9.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--graphite-2); }
.st-fig__name { font-family: var(--display); font-weight: 700; color: var(--paper); font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.1; letter-spacing: -.02em; }
.st-fig__line { font-size: var(--t-sm); line-height: 1.6; color: rgba(247, 247, 244, .7); max-width: 22ch; }
.st-fig__bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--turq); transform: scaleX(0); transition: transform .8s var(--e-out);
}
.st-fig:nth-child(even) .st-fig__bar { background: var(--orange); }
.st-fig.is-in .st-fig__bar { transform: scaleX(1); }
.st-fig:nth-child(2) .st-fig__bar { transition-delay: .08s; }
.st-fig:nth-child(3) .st-fig__bar { transition-delay: .16s; }
.st-fig:nth-child(4) .st-fig__bar { transition-delay: .24s; }
.st-fig:nth-child(5) .st-fig__bar { transition-delay: .32s; }
.st-fig:hover { transform: translateY(-5px); }
.st-five__foot {
  margin-top: clamp(28px, 3.6vw, 46px);
  font-family: var(--display); font-weight: 700; color: var(--paper);
  font-size: clamp(1.05rem, 2vw, 1.5rem); line-height: 1.3; letter-spacing: -.02em;
  max-width: 42ch; text-wrap: balance;
}
@media (max-width: 1000px) {
  .st-frieze { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-fig:nth-child(odd) { border-left: 0; }
  .st-fig:nth-child(n+3) { border-top: 1px solid var(--rule-dark); }
}
@media (max-width: 560px) {
  .st-frieze { grid-template-columns: minmax(0, 1fr); }
  .st-fig { border-left: 0 !important; }
  .st-fig + .st-fig { border-top: 1px solid var(--rule-dark); }
}

/* the four sensations ------------------------------------------------------ */
.st-quad {
  width: 100%; margin-top: clamp(26px, 3.6vw, 46px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1.5px solid var(--ink);
}
.st-quad li { padding: clamp(14px, 1.8vw, 22px) clamp(10px, 1.4vw, 18px) clamp(16px, 2vw, 24px); display: grid; gap: 8px; justify-items: center; align-content: start; text-align: center; }
.st-quad li + li { border-left: 1px solid var(--rule); }
.st-quad em { font-style: normal; font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: .2em; color: var(--graphite); }
.st-quad b {
  font-family: var(--display); font-weight: 700; color: var(--ink);
  font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: 1.16; letter-spacing: -.02em;
  hyphens: auto; overflow-wrap: break-word;
}
@media (max-width: 760px) {
  .st-quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-quad li:nth-child(odd) { border-left: 0; }
  .st-quad li:nth-child(n+3) { border-top: 1px solid var(--rule); }
}

.st-terms { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: clamp(18px, 2.4vw, 28px); }
.st-terms li {
  font-family: var(--display); font-size: 10px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
  border: 1.5px solid var(--ink); padding: 8px 14px; line-height: 1;
}

/* five becomes six ---------------------------------------------------------- */
.st-count { margin-top: clamp(22px, 3vw, 36px); display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 40px); }
.st-count b, .st-count i {
  font-family: var(--display); font-weight: 700; font-style: normal;
  font-size: clamp(3rem, 9vw, 7rem); line-height: .8; letter-spacing: -.05em;
}
.st-count b { color: var(--rule-2); }
@supports (-webkit-text-stroke: 1px currentColor) { .st-count b { color: transparent; -webkit-text-stroke: 2px var(--ink); opacity: .4; } }
.st-count i { color: var(--ink); }
.st-count svg { flex: none; color: var(--orange); }

/* ==========================================================================
   SEELE — the dark movement
   ========================================================================== */
.st-soul { position: relative; background: var(--ink); color: rgba(247, 247, 244, .82); overflow: hidden; }
.st-soul__inner { padding-block: clamp(60px, 9vw, 116px); display: grid; justify-items: center; text-align: center; }
.st-soul .st-kick { color: var(--graphite-2); }
.st-soul__title {
  margin-top: clamp(16px, 2.2vw, 26px);
  font-family: var(--display); font-weight: 700; color: var(--paper);
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1.01; letter-spacing: -.034em; max-width: 17ch; text-wrap: balance;
}
.st-soul__body { margin-top: clamp(22px, 3vw, 36px); max-width: 58ch; }
.st-soul__body p { font-size: var(--t-base); line-height: 1.8; text-wrap: pretty; }
.st-soul__body p + p { margin-top: 1em; }
.st-gives { margin-top: clamp(28px, 3.8vw, 48px); display: grid; justify-items: center; width: min(100%, 44ch); }
.st-gives li {
  width: 100%; display: flex; align-items: baseline; justify-content: center; gap: 12px;
  padding: clamp(10px, 1.2vw, 14px) 0; border-top: 1px solid var(--rule-dark);
  font-family: var(--display); font-weight: 600; color: var(--paper);
  font-size: clamp(.95rem, 1.6vw, 1.2rem); letter-spacing: -.015em;
}
.st-gives li:last-child { border-bottom: 1px solid var(--rule-dark); }
.st-gives em { font-style: normal; flex: none; width: 7px; height: 7px; background: var(--turq); transform: translateY(-2px); }
.st-gives li:nth-child(even) em { background: var(--orange); border-radius: 50%; }
.st-soul__closer {
  width: 100%; margin-top: clamp(34px, 5vw, 70px);
  padding-block: clamp(24px, 3.2vw, 40px); border-block: 1.5px solid var(--rule-dark);
}
.st-soul__closer p {
  font-family: var(--display); font-weight: 700; color: var(--paper);
  font-size: clamp(1.3rem, 3.2vw, 2.4rem); line-height: 1.12; letter-spacing: -.03em;
  max-width: 24ch; margin-inline: auto; text-wrap: balance;
}

/* ==========================================================================
   FINALE
   ========================================================================== */
.st-fin { position: relative; isolation: isolate; overflow: hidden; background: var(--paper); }
.st-fin__inner { padding-block: clamp(62px, 9vw, 126px); display: grid; justify-items: center; text-align: center; }
.st-fin__title {
  margin-top: clamp(22px, 3vw, 36px);
  font-family: var(--display); font-weight: 700; color: var(--ink);
  font-size: clamp(1.9rem, 4.8vw, 4rem);
  line-height: 1.02; letter-spacing: -.036em; max-width: 17ch; text-wrap: balance;
}
.st-fin__title i {
  display: block; font-style: normal;
  font-size: clamp(.95rem, 1.7vw, 1.3rem); font-weight: 600;
  line-height: 1.4; letter-spacing: -.005em; color: var(--charcoal);
  max-width: 34ch; margin: 0 auto clamp(14px, 1.8vw, 20px);
}
.st-fin__lines { margin-top: clamp(24px, 3.2vw, 36px); display: grid; gap: 4px; justify-items: center; }
.st-fin__lines li { font-family: var(--display); font-size: var(--t-md); font-weight: 600; letter-spacing: -.01em; color: var(--ink-80); }
.st-fin__sign { margin-top: clamp(24px, 3.2vw, 34px); }
.st-fin__sign b { font-size: var(--t-lg); }
.st-fin__sign span { display: block; margin-top: 5px; font-family: var(--text); font-size: var(--t-sm); color: var(--graphite); }
.st-fin__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(26px, 3.4vw, 42px); }
@media (max-width: 560px) { .st-fin__ctas .btn { flex: 1 1 100%; } }

@media (prefers-reduced-motion: reduce) {
  .st-lines li { opacity: 1; transform: none; }
  .st-fig__bar { transform: scaleX(1); }
}


/* --------------------------------------------------------------------------
   PHONES — legible floors for micro type and full-size tap targets
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .st-kick { font-size: 12px; letter-spacing: .2em; }
  .st-cap { font-size: 12px; letter-spacing: .06em; line-height: 1.45; }
  .seal__cap { font-size: 12px; }
  .st-fig__role { font-size: 11.5px; letter-spacing: .16em; }
  .st-stats span { font-size: 12px; letter-spacing: .12em; }
  .st-terms li { font-size: 12px; }
  .footer a, .menu__foot a { min-height: 44px; display: inline-flex; align-items: center; }
  .btn { min-height: 44px; }
  .phead__kicker { font-size: 12px; }
  .phead__facts span, .phead__facts em { font-size: 12px; }
  .tier__num { font-size: 12px; }
  .tier__list em, .tier b span { font-size: 12px; }
  .footer__blurb, .footer__ct, .footer a, .footer li, .footer__bar span, .footer__bar a { font-size: 12.5px; }
}


/* ==========================================================================
   HANDWERK — "EIS MIT SEELE" as an editorial spread
   Three bands instead of one lopsided two-column split: the story beside the
   counter, the four promises across the full measure, the press voice and the
   way in. Every band sets its own rhythm, so nothing floats in dead space.
   ========================================================================== */
.story { display: grid; gap: clamp(52px, 6.5vw, 108px); }

/* --- band 1: story + counter shot --------------------------------------- */
.story__lead { display: grid; gap: clamp(36px, 5vw, 76px); align-items: center; }
@media (min-width: 900px) {
  .story__lead { grid-template-columns: minmax(0, 1fr) minmax(0, .88fr); }
}
.story__intro { max-width: 56ch; }
.story__intro .sec-head { margin-bottom: clamp(22px, 2.6vw, 34px); max-width: none; }
.story__intro .lede { max-width: 46ch; }
.story__intro p + p { margin-top: 16px; }
.story__intro > .rv > p:not(.lede) { color: var(--ink-80); max-width: 52ch; }
.story__intro .sign {
  margin-top: clamp(26px, 3vw, 38px);
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--rule);
  display: inline-block;
}

.story__art { position: relative; }
.story__art .mosaic { inset: -13% -14% auto auto; width: 122%; }
.story__frag { top: -4%; right: -3%; width: clamp(46px, 6vw, 82px); opacity: .55; }
.story__shot {
  position: relative; z-index: 2;
  aspect-ratio: 4 / 4.2; width: 100%;
  border-radius: var(--r-lg); overflow: hidden;
}
.story__shot img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.story__shot.wipe-reveal { clip-path: inset(0 0 100% 0 round var(--r-lg)); }
.story__shot.wipe-reveal.is-in { clip-path: inset(0 round var(--r-lg)); }
.story__badge { position: absolute; z-index: 4; left: -5%; bottom: -6%; }
@media (max-width: 899px) {
  .story__art { width: min(100%, 520px); }
  .story__shot { aspect-ratio: 4 / 3.4; }
  .story__badge { left: auto; right: -3%; bottom: -7%; }
}

/* --- band 2: the four promises, one row across the spread ---------------- */
.story__feats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 2.6vw, 40px);
  margin: 0;
  padding-top: clamp(24px, 3vw, 38px);
  border-top: 1.5px solid var(--rule-2);
}
.story__feats .feat {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
  align-content: start;
  padding-block: 0; border-bottom: 0;
}
.story__feats .feat strong { font-size: var(--t-md); margin-bottom: 4px; }
.story__feats .feat > span:last-child > span { max-width: 22ch; }
@media (max-width: 1000px) { .story__feats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(28px, 4vw, 40px); } }
/* phones keep the promises two-up so the band stays compact */
@media (max-width: 560px) {
  .story__feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
  .story__feats .feat { gap: 10px; }
  .story__feats .feat strong { font-size: var(--t-base); }
  .story__feats .feat > span:last-child > span { max-width: none; }
}

/* --- band 3: press voice + the way in ------------------------------------ */
.story__close {
  display: grid; gap: clamp(30px, 4vw, 56px);
  align-items: start;
  padding-top: clamp(26px, 3.2vw, 40px);
  border-top: 1px solid var(--rule);
}
@media (min-width: 900px) {
  .story__close { grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); align-items: center; }
}
.story__close .press { margin: 0; padding-top: 0; border-top: 0; }
.story__close .press__quote { margin-top: 14px; }
.story__close .press__quote p {
  font-family: var(--display); font-weight: 600;
  font-size: var(--t-lg); line-height: 1.3; letter-spacing: -.015em;
  color: var(--ink); max-width: 26ch;
}
.story__close .press__quote p.press__quote-2 {
  margin-top: 12px;
  font-family: var(--text); font-weight: 400;
  font-size: var(--t-base); line-height: 1.6;
  color: var(--graphite); max-width: 42ch;
}
.story__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
@media (min-width: 900px) { .story__foot { justify-content: flex-end; } }


/* ==========================================================================
   SQUARED IMAGE BOXES — every photo, frame and card sits in a hard-edged box.
   Circles remain only where they are marks, not containers (seals, dots).
   ========================================================================== */
.frame,
.gal__item .frame,
.cat__img,
.story__shot,
.craft__shot,
.map,
.map__card,
.st-img,
.frame img,
.cat__img img,
.gal__item .frame img,
.story__shot img { border-radius: 0; }

.cat__num { border-radius: 0; }
@media (max-width: 620px) { .cat__num { border-radius: 0; } }

/* the feature tiles share the same hard edge as the photo above them */
.feat__ic, .burger { border-radius: 0; }

.story__shot.wipe-reveal { clip-path: inset(0 0 100% 0); }
.story__shot.wipe-reveal.is-in { clip-path: inset(0); }
.craft__shot.wipe-reveal { clip-path: inset(0 0 100% 0); }
.craft__shot.wipe-reveal.is-in { clip-path: inset(0); }


/* --- phone fallback toast (desktop: the number is copied) ---------------- */
.tel-toast {
  position: fixed; z-index: 200;
  left: 50%; bottom: 26px; transform: translate(-50%, 14px);
  background: var(--ink); color: var(--paper);
  font-family: var(--display); font-weight: 600;
  font-size: var(--t-sm); letter-spacing: .02em;
  padding: 13px 20px; border-radius: 0;
  box-shadow: 0 18px 44px -18px rgba(23,22,22,.5);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--e-soft), transform .4s var(--e-out);
}
.tel-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .tel-toast { transition: opacity .2s linear; } }


/* --- "Finden" actions: Instagram + TikTok share a line, call sits below ---- */
.find__btns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(100%, 520px);
  margin-inline: auto;
}
.find__btns .btn {
  border-radius: 4px;
  width: 100%;
  justify-content: center;
  padding-inline: 16px;
}
.find__btns #call-cta { order: 2; grid-column: 1 / -1; }


/* --- iOS Safari paints the cone's filter box grey until the first repaint,
       so small screens get the artwork without the CSS drop-shadow ---------- */
@media (max-width: 1000px) {
  .hero__art-cone { filter: none; }
}


/* --- phones: two shards at the top of the hero, nothing more --------------- */
@media (max-width: 1000px) {
  .hero::before, .hero::after {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
  }
  .hero::before {
    top: 84px; right: 7%;
    width: 30px; height: 26px;
    background: var(--turq);
    transform: rotate(14deg);
  }
  .hero::after {
    top: 132px; right: 20%;
    width: 15px; height: 13px;
    background: var(--orange);
    transform: rotate(-24deg);
  }
}


/* --- phones: one authoritative size for the cone inside the shard artwork,
       so no earlier override (or a stale cached sheet) can change it -------- */
@media (max-width: 1000px) {
  .hero__art-cone { width: 31.5%; left: 55.5%; }
}


/* --- phones: the flavour cups carry more presence --------------------- */
@media (max-width: 900px) {
  .reel__img { height: min(100%, 50svh); max-width: 74vw; }
}
@media (max-width: 900px) and (max-height: 620px) {
  .reel__img { height: min(100%, 40svh); }
}


/* --- desktop: original cone placement, shadow off ------------------------ */
@media (min-width: 1001px) {
  .hero__art-cone { width: 31.9%; left: 54.9%; top: 19.33%; filter: none; }
}