/* ============================================================================
   Example websites inside the build act (home page only).
   Four made-up businesses, each with its own design. Sizes are in em on a root
   that scales with the frame: 1em = 16px of a 1280px-wide desktop page. In a
   frame narrower than 600px the sites switch to their phone layout at 13px.
   ========================================================================== */

@font-face {
  font-family: "Figtree"; font-style: normal; font-display: swap; font-weight: 300 900;
  src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/figtree-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- frame -- */
.mu-view { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #FFFFFF; }
.mu-scroll { position: relative; will-change: transform; }
.mu-site { position: relative; display: none; }
.mu-view[data-branch="cafe"] [data-site="cafe"],
.mu-view[data-branch="coiffeur"] [data-site="coiffeur"],
.mu-view[data-branch="handwerk"] [data-site="handwerk"],
.mu-view[data-branch="praxis"] [data-site="praxis"] { display: block; }

.mu {
  position: relative; font-size: calc(100cqi / 80);
  font-family: "Archivo", Arial, sans-serif; font-weight: 400; font-stretch: 100%;
  line-height: 1.45; letter-spacing: 0; text-align: left;
  -webkit-font-smoothing: antialiased; overflow: hidden;
}
.mu--design { position: absolute; top: 0; left: 0; right: 0; }
.mu :is(p, h3, h4, dl, dd, ul, ol, figure) { margin: 0; padding: 0; list-style: none; }
.mu :is(h3, h4, strong, b) { font-weight: inherit; }
.mu i { font-style: normal; }
.mu-s { position: relative; }
.mu-rel { position: relative; }
.mu-ph { position: relative; display: block; overflow: hidden; background: rgb(0 0 0 / 0.08); }
.mu-ph img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.mu-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1em; }
.mu-btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.mu-nav { position: relative; z-index: 2; display: flex; align-items: center; gap: 3em; }
.mu-links { display: flex; gap: 2.4em; margin-left: auto; }
.mu-burger { display: none; }
.mu-ic { display: block; }
.mu-ic svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mu-foot { display: flex; align-items: center; justify-content: space-between; gap: 2em; }
.mu-foot .mu-links { margin-left: 0; }

/* ------------------------------------------------ wishes (fine-tuning) -- */
/* before and after share one grid cell. No state attribute = the finished site. */
.mu-swap { display: inline-grid; }
.mu-swap > * { grid-area: 1 / 1; align-self: center; transition: opacity 280ms var(--ease); }
.mu-ph.mu-swap { display: block; }
.mu-swap > .mu-b { opacity: 0; }
.mu:is([data-w1="0"], [data-w1="1"]) [data-swap="1"] > .mu-b,
.mu:is([data-w2="0"], [data-w2="1"]) [data-swap="2"] > .mu-b,
.mu:is([data-w3="0"], [data-w3="1"]) [data-swap="3"] > .mu-b { opacity: 1; }
.mu:is([data-w1="0"], [data-w1="1"]) [data-swap="1"] > .mu-a,
.mu:is([data-w2="0"], [data-w2="1"]) [data-swap="2"] > .mu-a,
.mu:is([data-w3="0"], [data-w3="1"]) [data-swap="3"] > .mu-a { opacity: 0; }

.mu-pin {
  position: absolute; left: 0; bottom: 100%; z-index: 6; margin-bottom: 9px;
  display: inline-flex; align-items: center; gap: 6px; width: max-content; max-width: calc(100cqi - 36px);
  padding: 6px 10px 6px 8px; border-radius: 8px; background: #F26B1D; color: #1A1A1A;
  font: 650 12px/1.25 "Archivo", Arial, sans-serif; font-stretch: 100%; letter-spacing: 0; text-transform: none; text-align: left; white-space: normal;
  box-shadow: 0 10px 22px -10px rgb(26 26 26 / 0.55);
  opacity: 0; transform: translateY(6px) scale(0.96); transform-origin: 0 100%;
  transition: opacity 180ms var(--ease), transform 240ms var(--ease), background-color 200ms var(--ease), color 200ms var(--ease);
  pointer-events: none;
}
.mu-pin b { font-weight: 650; }
.mu-pin svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mu-pin svg + svg { display: none; }
.mu-pin::after { content: ""; position: absolute; left: 14px; top: 100%; border: 6px solid transparent; border-bottom: 0; border-top-color: #F26B1D; transition: border-color 200ms var(--ease); }
.mu-pin--in { top: 16px; bottom: auto; left: 16px; margin: 0; transform-origin: 0 0; }
.mu-pin--in::after { display: none; }
.mu-pin--side { top: 50%; bottom: auto; left: 100%; margin: -13px 0 0 14px; transform-origin: 0 50%; }
.mu-pin--side::after { top: 50%; left: -6px; margin-top: -6px; border: 6px solid transparent; border-left: 0; border-right-color: #F26B1D; }
.mu:is([data-w1="1"], [data-w1="2"]) [data-pin="1"],
.mu:is([data-w2="1"], [data-w2="2"]) [data-pin="2"],
.mu:is([data-w3="1"], [data-w3="2"]) [data-pin="3"] { opacity: 1; transform: none; }
.mu[data-w1="2"] [data-pin="1"], .mu[data-w2="2"] [data-pin="2"], .mu[data-w3="2"] [data-pin="3"] { background: #1A1A1A; color: #FFFFFF; }
.mu[data-w1="2"] [data-pin="1"]::after, .mu[data-w2="2"] [data-pin="2"]::after, .mu[data-w3="2"] [data-pin="3"]::after { border-top-color: #1A1A1A; }
.mu[data-w3="2"] .mu-pin--side[data-pin="3"]::after { border-top-color: transparent; border-right-color: #1A1A1A; }
.mu[data-w1="2"] [data-pin="1"] svg, .mu[data-w2="2"] [data-pin="2"] svg, .mu[data-w3="2"] [data-pin="3"] svg { display: none; }
.mu[data-w1="2"] [data-pin="1"] svg + svg, .mu[data-w2="2"] [data-pin="2"] svg + svg, .mu[data-w3="2"] [data-pin="3"] svg + svg { display: block; color: #F26B1D; }

/* the line that paints the design over the wireframe */
.mu-line {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5; height: 2px; margin-top: -1px;
  background: #F26B1D; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.5), 0 -26px 30px -20px rgb(242 107 29 / 0.6);
  opacity: 0; pointer-events: none; will-change: transform, opacity;
}

/* ------------------------------------------------------------ wireframe -- */
.mu--wire { background: #FFFFFF; }
.mu--wire .mu-s {
  opacity: clamp(0, calc(var(--w, 1) * 6 - var(--i, 0)), 1);
  transform: translateY(calc((1 - clamp(0, calc(var(--w, 1) * 6 - var(--i, 0)), 1)) * 12px));
  outline: 1px dashed #E3DFDA; outline-offset: -8px;
}
.mu--wire, .mu--wire * {
  color: transparent !important; background-color: transparent !important; background-image: none !important;
  border-color: #E0DCD6 !important; box-shadow: none !important; text-shadow: none !important;
}
.mu--wire ::before, .mu--wire ::after { background: none !important; box-shadow: none !important; }
.mu--wire .mu-s:nth-child(even) { background-color: #FAF9F7 !important; }
.mu--wire .t { background-color: #E7E3DE !important; border-radius: 0.3em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mu--wire .mu-ph { background-color: #F1EEEA !important; outline: 1px dashed #D5D0CA; outline-offset: -1px; }
.mu--wire .mu-btn { box-shadow: inset 0 0 0 1px #D5D0CA !important; }
.mu--wire .mu-ic, .mu--wire i, .mu--wire .werk-n { visibility: hidden; }
.mu--wire .mu-label {
  position: absolute; top: 14px; right: 14px; z-index: 3; padding: 3px 8px; border-radius: 5px;
  background-color: #FFFFFF !important; box-shadow: 0 0 0 1px #DDD8D2 !important; color: #6F6962 !important;
  font: 600 11px/1.3 "Archivo", Arial, sans-serif; font-stretch: 100%; letter-spacing: 0.01em; text-transform: none; white-space: nowrap;
}

/* ================================================================= CAFÉ == */
.mu-cafe { --esp: #2A1A12; --esp-2: #1E120C; --cream: #F4EAD9; --cream-2: #EBDDC7; --car: #C27D40; --car-ink: #FFF6EA; --ink: #3A2A1F; --soft: #7B6757; background: var(--esp); color: var(--cream); }
.mu-cafe .mu-brand, .cafe-h, .cafe-h2, .cafe-h3 { font-family: "DM Serif Display", Georgia, serif; font-weight: 400; }
.cafe-hero { min-height: 47em; padding: 2.4em 5.5em 0; background: var(--esp); overflow: hidden; }
.cafe-hero__ph { position: absolute; top: 0; right: 0; bottom: 0; width: 66%; }
.cafe-hero__ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--esp) 0%, rgb(42 26 18 / 0.72) 26%, rgb(42 26 18 / 0) 62%); }
.mu-cafe .mu-brand { font-size: 2.5em; line-height: 1; }
.mu-cafe .mu-nav .mu-links { gap: 2.8em; margin-right: 1.4em; font-size: 1.1em; }
.cafe-btn { padding: 0.95em 1.9em; border-radius: 99em; background: var(--car); color: var(--car-ink); font-size: 1.1em; font-weight: 500; }
.cafe-btn--line { background: transparent; box-shadow: inset 0 0 0 1px rgb(244 234 217 / 0.7); color: var(--cream); }
.cafe-hero__copy { position: relative; z-index: 1; max-width: 36em; padding: 10em 0 7.5em; }
.cafe-h { font-size: 5.8em; line-height: 1.02; letter-spacing: -0.01em; }
.cafe-sub { margin-top: 1em; font-size: 1.4em; opacity: 0.92; }
.mu-cafe .mu-row { margin-top: 2.4em; }
.cafe-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 3.4em 5.5em; background: var(--cream); color: var(--ink); }
.cafe-val { display: grid; justify-items: center; gap: 0.7em; font-size: 1.35em; }
.cafe-val + .cafe-val { border-left: 1px solid rgb(58 42 31 / 0.16); }
.cafe-val .mu-ic { width: 1.9em; height: 1.9em; color: var(--car); }
.cafe-menu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 5.5em; align-items: center; padding: 6.5em 5.5em; background: var(--cream-2); color: var(--ink); }
.cafe-h2 { font-size: 3.7em; line-height: 1.05; }
.cafe-lead { margin-top: 0.5em; font-size: 1.25em; color: var(--soft); }
.cafe-list { margin-top: 2em; display: grid; gap: 0.95em; font-size: 1.22em; }
.cafe-list li { display: flex; align-items: baseline; gap: 0.6em; }
.cafe-list i { flex: 1; border-bottom: 2px dotted rgb(58 42 31 / 0.3); transform: translateY(-0.3em); }
.cafe-more { display: inline-block; margin-top: 1.8em; padding-bottom: 0.15em; border-bottom: 2px solid var(--car); font-size: 1.1em; font-weight: 600; }
.cafe-menu__ph { aspect-ratio: 5 / 4; border-radius: 0.7em; }
.cafe-gal { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.5em; padding: 6.5em 5.5em; background: var(--esp); color: var(--cream); }
.cafe-gal__head { grid-column: 1 / -1; display: flex; align-items: end; justify-content: space-between; gap: 3em; margin-bottom: 1em; }
.cafe-gal__head p { max-width: 24em; font-size: 1.2em; opacity: 0.8; }
.cafe-gal__a { aspect-ratio: 4 / 3; border-radius: 0.7em; }
.cafe-gal__b { border-radius: 0.7em; }
.cafe-visit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1.15fr); gap: 4em; padding: 6.5em 5.5em; background: var(--cream); color: var(--ink); }
.cafe-h3 { margin-bottom: 0.8em; font-size: 2.1em; line-height: 1.1; }
.cafe-hours { font-size: 1.18em; }
.cafe-hours > div { display: flex; justify-content: space-between; gap: 1em; padding: 0.75em 0; border-bottom: 1px solid rgb(58 42 31 / 0.14); }
.cafe-hours dd { text-align: right; }
.cafe-addr { font-size: 1.18em; line-height: 1.7; }
.cafe-book { display: grid; align-content: start; justify-items: start; gap: 1.1em; padding: 2.6em; border-radius: 0.9em; background: var(--esp); color: var(--cream); }
.cafe-book .cafe-h3 { margin: 0; }
.cafe-book p { font-size: 1.15em; opacity: 0.85; }
.cafe-foot { padding: 2.4em 5.5em; background: var(--esp-2); color: rgb(244 234 217 / 0.72); }
.cafe-foot .mu-brand { font-size: 1.7em; color: var(--cream); }

/* ================================================================ SALON == */
.mu-salon { --paper: #F7F4F1; --blush: #EADCD5; --blush-2: #F3EAE5; --char: #2E2B2A; --soft: #7C726D; --line: #D8CEC9; background: var(--paper); color: var(--char); }
.mu-salon .mu-brand { font-size: 1.55em; font-weight: 300; font-stretch: 125%; letter-spacing: 0.34em; text-transform: uppercase; white-space: nowrap; }
.mu-salon .mu-nav .mu-links { gap: 3em; margin-right: 2em; font-size: 1.1em; }
.salon-btn { padding: 1em 2.2em; background: var(--char); color: var(--paper); font-size: 1.05em; letter-spacing: 0.04em; }
.salon-hero { padding: 2em 5em 3em; }
.salon-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 4em; align-items: center; margin-top: 4.5em; }
.salon-h { font-weight: 250; font-stretch: 125%; text-transform: uppercase; line-height: 0.98; letter-spacing: 0.005em; }
.salon-h__line { display: block; font-size: 5.8em; white-space: nowrap; }
.salon-h__plain { display: block; font-size: 4.4em; font-weight: 450; font-stretch: 100%; text-transform: none; letter-spacing: -0.01em; line-height: 1.1; }
.salon-sub { margin-top: 1.8em; font-size: 1.25em; color: var(--soft); }
.salon-hero__copy > .salon-btn { margin-top: 1.8em; }
.salon-hero__ph { aspect-ratio: 10 / 9; }
.salon-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2em; padding: 1em 5em 5em; }
.salon-cat { display: grid; place-items: center; height: 4.6em; border: 1px solid var(--line); font-size: 1.2em; letter-spacing: 0.3em; text-transform: uppercase; }
.salon-prices { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 5em; padding: 6em 5em; background: #FFFFFF; }
.salon-h2 { font-size: 3.6em; font-weight: 250; font-stretch: 125%; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; }
.salon-lead { margin-top: 1.2em; max-width: 22em; font-size: 1.15em; color: var(--soft); }
.salon-list { font-size: 1.2em; }
.salon-list > div { display: flex; justify-content: space-between; gap: 1em; padding: 1em 0; border-bottom: 1px solid var(--line); }
.salon-list > div:first-child { border-top: 1px solid var(--char); }
.salon-list dd { text-align: right; font-variant-numeric: tabular-nums; }
.salon-team { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 5em; padding: 6em 5em; background: var(--blush-2); }
.salon-team__a { aspect-ratio: 4 / 3.2; }
.salon-people { margin: 2em 0; display: grid; gap: 1em; font-size: 1.2em; }
.salon-people li { display: flex; justify-content: space-between; gap: 1em; padding-bottom: 1em; border-bottom: 1px solid var(--line); }
.salon-people b { font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.salon-people span { color: var(--soft); }
.salon-team__b { aspect-ratio: 16 / 8; }
.salon-book { display: grid; justify-items: center; gap: 1.4em; padding: 6.5em 5em; background: var(--char); color: var(--paper); text-align: center; }
.salon-hours { font-size: 1.15em; letter-spacing: 0.06em; opacity: 0.75; }
.salon-btn--book {
  margin-top: 0.6em; padding: 1.15em 3em; background: var(--blush); color: var(--char);
  font-size: 1.15em; letter-spacing: 0.22em; text-transform: uppercase;
  transition: background-color 320ms var(--ease), color 320ms var(--ease), box-shadow 320ms var(--ease);
}
.mu-salon:is([data-w3="0"], [data-w3="1"]) .salon-btn--book { background: transparent; color: rgb(247 244 241 / 0.75); box-shadow: inset 0 0 0 1px rgb(247 244 241 / 0.3); }
.salon-foot { padding: 2.4em 5em; background: var(--paper); color: var(--soft); }
.salon-foot .mu-brand { font-size: 1.05em; color: var(--char); }

/* ========================================================== SCHREINEREI == */
.mu-werk { --char: #23262A; --char-2: #1B1D20; --concrete: #8C8D90; --oak: #B8895B; --yellow: #F2C230; --off: #F2F0EC; --soft: #B6B9BE; background: var(--char); color: var(--off); }
.mu-werk .mu-brand, .werk-h, .werk-h2, .werk-n, .werk-tile figcaption, .werk-steps strong { font-weight: 850; font-stretch: 62%; text-transform: uppercase; letter-spacing: 0; }
.werk-bar { padding: 1.4em 5em; border-bottom: 1px solid rgb(255 255 255 / 0.08); }
.werk-bar .mu-brand { position: relative; font-size: 1.9em; line-height: 0.92; }
.werk-sq { position: absolute; top: 0.08em; right: -0.85em; width: 0.55em; height: 0.55em; background: var(--yellow); }
.mu-werk .mu-nav .mu-links { gap: 2.6em; margin-right: 2em; font-size: 1.1em; color: rgb(242 240 236 / 0.85); }
.werk-btn { padding: 1em 1.8em; background: var(--yellow); color: #1C1D1F; font-size: 1.1em; font-weight: 600; }
.werk-btn--line { background: transparent; color: var(--off); box-shadow: inset 0 0 0 1.5px rgb(242 240 236 / 0.75); }
.werk-btn--dark { background: var(--char); color: var(--off); }
.werk-hero__stage { position: relative; min-height: 40em; overflow: hidden; }
.werk-hero__ph { position: absolute; top: 0; right: 0; bottom: 0; left: 30%; }
.werk-hero__ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--char) 0%, rgb(35 38 42 / 0.78) 24%, rgb(35 38 42 / 0.08) 64%); }
.werk-hero__copy { position: relative; z-index: 1; max-width: 60em; padding: 8.5em 5em 7em; }
.werk-h { font-size: 8.2em; line-height: 0.9; }
.werk-h__plain { display: block; font-size: 0.55em; font-weight: 650; font-stretch: 85%; line-height: 1.05; text-transform: none; }
.werk-sub { margin-top: 1em; font-size: 1.45em; }
.mu-werk .mu-row { margin-top: 2.2em; }
.werk-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2em; padding: 5em; background: var(--oak); transition: background-color 420ms var(--ease); }
.mu-werk:is([data-w2="0"], [data-w2="1"]) .werk-tiles { background: var(--concrete); }
.werk-tile { background: var(--char); }
.werk-tile__ph { aspect-ratio: 16 / 10; }
.werk-tile figcaption { padding: 0.7em 1em; font-size: 1.6em; }
.werk-process { padding: 6.5em 5em; background: var(--char); }
.werk-h2 { font-size: 4.8em; line-height: 0.92; }
.werk-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.4em; margin-top: 2.6em; }
.werk-steps li { display: grid; gap: 0.5em; padding-top: 1.2em; border-top: 2px solid rgb(242 240 236 / 0.18); }
.werk-n { font-size: 3.6em; line-height: 1; color: var(--yellow); }
.werk-steps strong { font-size: 1.9em; line-height: 1; }
.werk-steps span { font-size: 1.1em; color: var(--soft); }
.werk-region { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); background: var(--off); color: var(--char); }
.werk-region__ph { min-height: 30em; }
.werk-region__copy { align-self: center; padding: 4em 5em; }
.werk-region__copy p { margin-top: 1em; max-width: 24em; font-size: 1.3em; color: #555A60; }
.werk-offer { display: grid; justify-items: start; gap: 1.2em; padding: 6em 5em; background: var(--yellow); color: #1C1D1F; }
.werk-offer .werk-h2 { max-width: 12em; font-size: 5.6em; }
.werk-offer__sub { font-size: 1.45em; font-weight: 500; }
.werk-foot { padding: 2.2em 5em; background: var(--char-2); color: var(--soft); }
.werk-foot .mu-brand { font-size: 1.4em; color: var(--off); }

/* =============================================================== PHYSIO == */
.mu-physio { --mint: #EDF6F6; --mint-2: #D9EDED; --teal: #1C7C82; --deep: #134B58; --sand: #F4EEE6; --soft: #56707A; font-family: "Figtree", "Archivo", Arial, sans-serif; background: #FFFFFF; color: var(--deep); }
.physio-hero { padding: 2em 5em 5em; background: linear-gradient(180deg, #FFFFFF 0%, var(--mint) 26%); }
.mu-physio .mu-brand { display: inline-flex; align-items: center; gap: 0.45em; font-size: 1.6em; font-weight: 650; color: var(--teal); }
.physio-logo { width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--teal); box-shadow: inset 0 0 0 0.3em var(--teal), inset 0 0 0 0.46em #FFFFFF; }
.mu-physio .mu-nav .mu-links { gap: 2.8em; margin-right: 2em; font-size: 1.15em; color: #33535D; }
.physio-btn { padding: 1em 2em; border-radius: 99em; background: var(--teal); color: #FFFFFF; font-size: 1.1em; font-weight: 600; box-shadow: 0 0.7em 1.4em -0.9em rgb(28 124 130 / 0.8); }
.physio-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 4em; align-items: center; margin-top: 3em; }
.physio-h { font-size: 5.3em; font-weight: 560; line-height: 1.06; letter-spacing: -0.02em; }
.physio-sub { margin-top: 1em; font-size: 1.4em; color: var(--soft); }
.mu-physio .mu-row { margin-top: 2.2em; gap: 2em; }
.physio-link { font-size: 1.15em; font-weight: 600; color: var(--teal); border-bottom: 2px solid currentColor; }
.physio-arch { position: relative; padding: 1.5em 0 0 1.5em; }
.physio-circle { position: absolute; top: 0; right: -2em; width: 24em; height: 24em; border-radius: 50%; background: var(--mint-2); }
.physio-arch__ph { aspect-ratio: 5 / 5.1; border-radius: 50% 50% 1.6em 1.6em / 38% 38% 1.6em 1.6em; }
.physio-treat { padding: 6em 5em; background: #FFFFFF; }
.physio-h2 { font-size: 3.4em; font-weight: 600; line-height: 1.1; letter-spacing: -0.015em; }
.physio-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8em; margin-top: 2em; }
.physio-card { display: grid; align-content: start; gap: 0.6em; padding: 2.2em; border-radius: 1.6em; background: var(--mint-2); transition: background-color 420ms var(--ease), box-shadow 420ms var(--ease); }
.mu-physio:is([data-w2="0"], [data-w2="1"]) .physio-card { background: #FFFFFF; box-shadow: 0 0 0 1px #DCE7E8; }
.physio-card .mu-ic { width: 3.2em; height: 3.2em; padding: 0.7em; border-radius: 50%; background: #FFFFFF; color: var(--teal); }
.physio-card b { margin-top: 0.4em; font-size: 1.45em; font-weight: 650; }
.physio-card span { font-size: 1.1em; color: var(--soft); }
.physio-steps { padding: 6em 5em; background: var(--mint); }
.physio-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4em; margin-top: 2em; }
.physio-list li { display: grid; justify-items: start; gap: 0.5em; }
.physio-n { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--teal); color: #FFFFFF; font-size: 1.7em; font-weight: 700; line-height: 1; }
.physio-list strong { margin-top: 0.4em; font-size: 1.4em; font-weight: 650; }
.physio-list span { font-size: 1.1em; color: var(--soft); }
.physio-team { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 5em; align-items: center; padding: 6em 5em; background: #FFFFFF; }
.physio-team__ph { aspect-ratio: 4 / 4.4; border-radius: 1.8em; }
.physio-lead { margin-top: 0.9em; font-size: 1.3em; color: var(--soft); }
.physio-contact { padding: 5em; background: var(--sand); }
.physio-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 4em; align-items: center; padding: 3.2em 3.6em; border-radius: 2em; background: #FFFFFF; }
.physio-h3 { margin-bottom: 0.8em; font-size: 1.6em; font-weight: 650; }
.physio-hours { font-size: 1.15em; }
.physio-hours > div { display: flex; justify-content: space-between; gap: 1em; padding: 0.6em 0; border-bottom: 1px solid #E3ECEC; }
.physio-box .physio-lead { margin: 0; font-size: 1.15em; }
.physio-foot { padding: 2.2em 5em; background: var(--deep); color: rgb(255 255 255 / 0.75); }
.physio-foot .mu-brand { font-size: 1.3em; color: #FFFFFF; }

/* =========================================== phone layout, narrow frames == */
@container (max-width: 600px) {
  .mu { font-size: 13px; }
  .mu-nav .mu-links, .mu-cta { display: none; }
  .mu-burger { display: block; width: 1.7em; height: 1.1em; margin-left: auto; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
  .mu-foot { flex-direction: column; align-items: flex-start; gap: 0.6em; }
  .mu-foot .mu-links { gap: 1.2em; }

  .cafe-hero { min-height: 0; padding: 1.3em 1.4em 0; }
  .mu-cafe .mu-brand { font-size: 1.9em; }
  .cafe-hero__ph { position: relative; top: auto; right: auto; bottom: auto; width: auto; margin: 1.3em -1.4em 0; aspect-ratio: 4 / 3; }
  .cafe-hero__ph::after { background: linear-gradient(0deg, var(--esp) 0%, rgb(42 26 18 / 0) 45%); }
  .cafe-hero__copy { max-width: none; margin-top: -3em; padding: 0 0 2.6em; }
  .cafe-h { font-size: 2.7em; }
  .cafe-sub { font-size: 1.1em; }
  .cafe-btn { padding: 0.85em 1.5em; font-size: 1em; }
  .cafe-values { grid-template-columns: minmax(0, 1fr); padding: 0.4em 1.4em; }
  .cafe-val { grid-template-columns: 2.4em minmax(0, 1fr); justify-items: start; align-items: center; padding: 0.9em 0; font-size: 1.1em; }
  .cafe-val + .cafe-val { border-left: 0; border-top: 1px solid rgb(58 42 31 / 0.16); }
  .cafe-menu, .cafe-gal, .cafe-visit { grid-template-columns: minmax(0, 1fr); gap: 1.6em; padding: 2.6em 1.4em; }
  .cafe-h2 { font-size: 2.2em; }
  .cafe-list { font-size: 1.05em; }
  .cafe-gal__head { flex-direction: column; align-items: flex-start; gap: 0.6em; margin: 0; }
  .cafe-gal__b { aspect-ratio: 16 / 9; }
  .cafe-h3 { font-size: 1.6em; }
  .cafe-hours, .cafe-addr { font-size: 1.05em; }
  .cafe-book { padding: 1.6em; }
  .cafe-foot { padding: 1.6em 1.4em; }

  .salon-hero { padding: 1.3em 1.4em 2em; }
  .mu-salon .mu-brand { font-size: 1.15em; letter-spacing: 0.25em; }
  .salon-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 1.6em; margin-top: 2em; }
  .salon-h__line { display: inline; font-size: 3.2em; white-space: normal; }
  .salon-h__plain { font-size: 2.3em; }
  .salon-sub { margin-top: 1em; font-size: 1.05em; }
  .salon-cats { grid-template-columns: minmax(0, 1fr); gap: 0.8em; padding: 0 1.4em 2.4em; }
  .salon-cat { height: 3.4em; font-size: 1em; }
  .salon-prices, .salon-team { grid-template-columns: minmax(0, 1fr); gap: 1.6em; padding: 2.6em 1.4em; }
  .salon-h2 { font-size: 2em; }
  .salon-list, .salon-people { font-size: 1em; }
  .salon-book { padding: 3em 1.4em; }
  .salon-btn--book { padding: 1em 1.8em; font-size: 1em; }
  .salon-foot { padding: 1.6em 1.4em; }

  .werk-bar { padding: 1em 1.4em; }
  .werk-bar .mu-brand { font-size: 1.4em; }
  .werk-hero__stage { min-height: 0; }
  .werk-hero__ph { position: relative; top: auto; right: auto; bottom: auto; left: auto; aspect-ratio: 16 / 11; }
  .werk-hero__ph::after { background: linear-gradient(0deg, var(--char) 0%, rgb(35 38 42 / 0) 50%); }
  .werk-hero__copy { margin-top: -2.4em; padding: 0 1.4em 2.6em; }
  .werk-h { font-size: 3.6em; }
  .werk-sub { font-size: 1.1em; }
  .werk-btn { padding: 0.9em 1.3em; font-size: 1em; }
  .werk-tiles { grid-template-columns: minmax(0, 1fr); gap: 1em; padding: 3.6em 1.4em 2.4em; }
  .werk-tile figcaption { font-size: 1.3em; }
  .werk-process { padding: 2.8em 1.4em; }
  .werk-h2 { font-size: 2.6em; }
  .werk-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4em; margin-top: 1.4em; }
  .werk-n { font-size: 2.4em; }
  .werk-steps strong { font-size: 1.4em; }
  .werk-steps span { font-size: 0.95em; }
  .werk-region { grid-template-columns: minmax(0, 1fr); }
  .werk-region__ph { min-height: 0; aspect-ratio: 16 / 10; }
  .werk-region__copy { padding: 2.4em 1.4em; }
  .werk-region__copy p { font-size: 1.05em; }
  .werk-offer { padding: 2.8em 1.4em; }
  .werk-offer .werk-h2 { font-size: 2.8em; }
  .werk-offer__sub { font-size: 1.1em; }
  .werk-foot { padding: 1.6em 1.4em; }

  .physio-hero { padding: 1.3em 1.4em 2.6em; }
  .mu-physio .mu-brand { font-size: 1.3em; }
  .physio-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 1.8em; margin-top: 1.8em; }
  .physio-h { font-size: 2.5em; }
  .physio-sub { font-size: 1.1em; }
  .physio-btn { padding: 0.9em 1.6em; font-size: 1em; }
  .physio-arch { padding: 0; }
  .physio-circle { top: -1.5em; right: -2em; width: 14em; height: 14em; }
  .physio-arch__ph { aspect-ratio: 4 / 3.6; }
  .physio-treat, .physio-steps, .physio-team { padding: 2.6em 1.4em; }
  .physio-treat { padding-top: 3.6em; }
  .physio-h2 { font-size: 1.9em; }
  .physio-cards, .physio-list, .physio-team { grid-template-columns: minmax(0, 1fr); gap: 1em; }
  .physio-card { grid-template-columns: 2.8em minmax(0, 1fr); column-gap: 1em; padding: 1.3em; }
  .physio-card .mu-ic { grid-row: span 2; width: 2.8em; height: 2.8em; padding: 0.6em; }
  .physio-card b { margin: 0; font-size: 1.15em; }
  .physio-card span { font-size: 0.95em; }
  .physio-contact { padding: 2.4em 1.4em; }
  .physio-box { grid-template-columns: minmax(0, 1fr); gap: 1.6em; padding: 1.8em; }
  .physio-foot { padding: 1.6em 1.4em; }
  .physio-n { font-size: 1.2em; }
  /* phone layout: a note beside a line has no room, so it sits above like the others */
  .mu-pin--side { top: auto; bottom: 100%; left: 0; margin: 0 0 9px; transform-origin: 0 100%; }
  .mu-pin--side::after { top: 100%; left: 14px; margin: 0; border: 6px solid transparent; border-bottom: 0; border-top-color: #F26B1D; }
  .mu[data-w3="2"] .mu-pin--side[data-pin="3"]::after { border-right-color: transparent; border-top-color: #1A1A1A; }
}

@media (prefers-reduced-motion: reduce) {
  .mu-swap > *, .mu-pin, .werk-tiles, .physio-card, .salon-btn--book { transition: none; }
  .mu--wire .mu-s { transform: none; }
}