/* ==================================================================
   Device frames + demo concept site designs
   Sizes inside a screen use --u: one "virtual pixel".
   Desktop screens are drawn at 1440 x 900, phones at 390 x 844.
   ================================================================== */

.frame { container-type: inline-size; position: relative; }

.frame--browser .frame__body {
  background: #fff;
  border-radius: max(5px, 0.9cqw);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(17, 17, 17, 0.07),
    0 1px 2px rgba(17, 17, 17, 0.05),
    0 30px 60px -28px rgba(17, 17, 17, 0.32);
}
.frame__bar {
  display: flex;
  align-items: center;
  gap: 2cqw;
  height: max(14px, 3.4cqw);
  padding: 0 1.6cqw;
  background: #F4F4F2;
  border-bottom: 1px solid rgba(17, 17, 17, 0.06);
}
.frame__dots { display: flex; gap: 0.7cqw; flex: 1; }
.frame__dots i { width: max(4px, 0.9cqw); aspect-ratio: 1; border-radius: 50%; background: #D9D9D5; }
.frame__url {
  flex: 0 1 34%;
  min-width: 0;
  text-align: center;
  font: 500 max(6px, 1.15cqw)/1 var(--font-sans, system-ui);
  color: #8A8A85;
  background: #fff;
  border-radius: 99px;
  padding: 0.7cqw 1.4cqw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0;
}
.frame__sp { flex: 1; }

.frame--phone .frame__body {
  position: relative;
  background: #111;
  border-radius: 15cqw;
  padding: 3cqw;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 2px 4px rgba(17, 17, 17, 0.12),
    0 40px 70px -30px rgba(17, 17, 17, 0.5);
}
.frame--phone .frame__body::after {
  content: "";
  position: absolute;
  top: 6cqw;
  left: 50%;
  translate: -50% 0;
  width: 27cqw;
  height: 7.5cqw;
  border-radius: 99px;
  background: #111;
  z-index: 3;
}

.screen { container-type: inline-size; position: relative; overflow: hidden; }
.screen--desktop { aspect-ratio: 1440 / 900; }
.screen--phone { aspect-ratio: 390 / 844; border-radius: 12.4cqw; }
.screen--phone .m { padding-top: calc(var(--u) * 44); }

.m {
  --u: calc(100cqw / 1440);
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: calc(var(--u) * 14);
  line-height: 1.4;
  text-align: left;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
.screen--phone .m { --u: calc(100cqw / 390); }
.m h3, .m p, .m ul { margin: 0; }
.m ul { list-style: none; padding: 0; }
.m [class$="-burger"] { display: none; }
.screen--phone .m [class$="-burger"] {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 5);
  margin-left: auto;
  justify-self: end;
}
.m [class$="-burger"] i { display: block; width: calc(var(--u) * 22); height: calc(var(--u) * 1.6); background: currentColor; }

/* ------------------------------------------------------------------
   1. Maison Lumière — hair salon
   ------------------------------------------------------------------ */
.m-salon { background: #F3ECE4; color: #2B211C; font-family: var(--font-sans, system-ui); }
.ms-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: calc(var(--u) * 84);
  padding: 0 calc(var(--u) * 56);
  border-bottom: calc(var(--u) * 1) solid rgba(43, 33, 28, 0.12);
}
.ms-links { display: flex; gap: calc(var(--u) * 32); font-size: calc(var(--u) * 11); letter-spacing: 0.16em; text-transform: uppercase; }
.ms-logo { font-family: "Instrument Serif", Georgia, serif; font-size: calc(var(--u) * 32); letter-spacing: -0.01em; }
.ms-book {
  justify-self: end;
  border: calc(var(--u) * 1) solid currentColor;
  border-radius: 999px;
  padding: calc(var(--u) * 10) calc(var(--u) * 22);
  font-size: calc(var(--u) * 11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ms-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: calc(var(--u) * 40);
  height: calc(var(--u) * 620);
  padding: calc(var(--u) * 48) calc(var(--u) * 56) 0;
}
.ms-copy { align-self: center; padding-bottom: calc(var(--u) * 40); }
.ms-kicker { display: block; margin-bottom: calc(var(--u) * 28); font-size: calc(var(--u) * 11); letter-spacing: 0.2em; text-transform: uppercase; color: #8A7568; }
.ms-title { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: calc(var(--u) * 124); line-height: 0.92; letter-spacing: -0.02em; }
.ms-title em { color: #B26F52; }
.ms-lede { max-width: calc(var(--u) * 420); margin: calc(var(--u) * 32) 0 calc(var(--u) * 36) !important; font-size: calc(var(--u) * 17); line-height: 1.55; color: #6E5A4E; }
.ms-ctas { display: flex; align-items: center; gap: calc(var(--u) * 28); font-size: calc(var(--u) * 13); }
.ms-btn { background: #2B211C; color: #F3ECE4; padding: calc(var(--u) * 16) calc(var(--u) * 28); border-radius: 999px; }
.ms-link { border-bottom: calc(var(--u) * 1) solid currentColor; padding-bottom: calc(var(--u) * 3); }
.ms-visual { position: relative; }
.ms-arch {
  position: absolute;
  right: 0;
  top: 0;
  width: calc(var(--u) * 500);
  height: calc(var(--u) * 600);
  border-radius: calc(var(--u) * 250) calc(var(--u) * 250) 0 0;
  background: linear-gradient(172deg, #EBD3C3 0%, #DDAA8C 52%, #B8775A 100%);
  overflow: hidden;
}
.ms-sun {
  position: absolute;
  top: calc(var(--u) * 80);
  left: calc(var(--u) * 110);
  width: calc(var(--u) * 280);
  height: calc(var(--u) * 280);
  border-radius: 50%;
  background: radial-gradient(circle, #FFF3EA 0%, rgba(255, 243, 234, 0) 68%);
}
.ms-wave {
  position: absolute;
  left: calc(var(--u) * -160);
  top: calc(var(--u) * 300);
  width: calc(var(--u) * 760);
  height: calc(var(--u) * 760);
  border-radius: 50%;
  border: calc(var(--u) * 2) solid rgba(255, 255, 255, 0.38);
}
.ms-wave--2 { left: calc(var(--u) * -60); top: calc(var(--u) * 360); border-color: rgba(255, 255, 255, 0.2); }
.ms-arch--small {
  right: calc(var(--u) * 430);
  top: calc(var(--u) * 340);
  width: calc(var(--u) * 190);
  height: calc(var(--u) * 260);
  border-radius: calc(var(--u) * 95) calc(var(--u) * 95) 0 0;
  background: linear-gradient(180deg, #4A372D, #2B211C);
}
.ms-ring { position: absolute; right: calc(var(--u) * 410); top: calc(var(--u) * 40); width: calc(var(--u) * 150); height: calc(var(--u) * 150); }
.ms-ring text { font: 500 8.6px var(--font-sans, system-ui); letter-spacing: 2.2px; fill: #2B211C; }
.ms-menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 calc(var(--u) * 56);
  border-top: calc(var(--u) * 1) solid rgba(43, 33, 28, 0.15);
}
.ms-menu div { display: flex; justify-content: space-between; align-items: baseline; padding: calc(var(--u) * 30) calc(var(--u) * 40) 0 0; }
.ms-menu div + div { padding-left: calc(var(--u) * 32); border-left: calc(var(--u) * 1) solid rgba(43, 33, 28, 0.15); }
.ms-menu span { font-family: "Instrument Serif", Georgia, serif; font-size: calc(var(--u) * 30); }
.ms-menu b { font-weight: 500; font-size: calc(var(--u) * 11); letter-spacing: 0.14em; text-transform: uppercase; color: #8A7568; }

.screen--phone .ms-nav { grid-template-columns: 1fr auto; height: calc(var(--u) * 60); padding: 0 calc(var(--u) * 20); }
.screen--phone .ms-links, .screen--phone .ms-book, .screen--phone .ms-menu { display: none; }
.screen--phone .ms-logo { font-size: calc(var(--u) * 25); }
.screen--phone .ms-hero { display: flex; flex-direction: column; height: auto; gap: 0; padding: calc(var(--u) * 16) calc(var(--u) * 20) 0; }
.screen--phone .ms-visual { order: -1; height: calc(var(--u) * 330); }
.screen--phone .ms-arch { left: 0; width: 100%; height: calc(var(--u) * 330); border-radius: calc(var(--u) * 175) calc(var(--u) * 175) 0 0; }
.screen--phone .ms-sun { top: calc(var(--u) * 40); left: calc(var(--u) * 60); width: calc(var(--u) * 220); height: calc(var(--u) * 220); }
.screen--phone .ms-wave { top: calc(var(--u) * 170); width: calc(var(--u) * 520); height: calc(var(--u) * 520); }
.screen--phone .ms-arch--small { left: calc(var(--u) * 16); right: auto; top: calc(var(--u) * 200); width: calc(var(--u) * 96); height: calc(var(--u) * 130); }
.screen--phone .ms-ring { right: calc(var(--u) * 12); top: calc(var(--u) * 12); width: calc(var(--u) * 92); height: calc(var(--u) * 92); }
.screen--phone .ms-copy { padding: calc(var(--u) * 26) 0 0; }
.screen--phone .ms-kicker { margin-bottom: calc(var(--u) * 14); font-size: calc(var(--u) * 10); }
.screen--phone .ms-title { font-size: calc(var(--u) * 56); }
.screen--phone .ms-lede { margin: calc(var(--u) * 16) 0 calc(var(--u) * 22) !important; font-size: calc(var(--u) * 14.5); }
.screen--phone .ms-ctas { font-size: calc(var(--u) * 13); gap: calc(var(--u) * 20); }
.screen--phone .ms-btn { padding: calc(var(--u) * 14) calc(var(--u) * 22); }

/* ------------------------------------------------------------------
   2. Ember & Oak — restaurant
   ------------------------------------------------------------------ */
.m-rest { background: #17120E; color: #F2E8D8; font-family: var(--font-sans, system-ui); }
.mr-nav { display: flex; align-items: center; gap: calc(var(--u) * 48); height: calc(var(--u) * 84); padding: 0 calc(var(--u) * 56); }
.mr-logo { font-family: "Fraunces", Georgia, serif; font-size: calc(var(--u) * 28); letter-spacing: -0.01em; }
.mr-logo i { color: #E0663A; }
.mr-links { display: flex; gap: calc(var(--u) * 32); margin-left: auto; font-size: calc(var(--u) * 13); color: #CDBFAE; }
.mr-btn { background: #E0663A; color: #17120E; padding: calc(var(--u) * 11) calc(var(--u) * 22); font-size: calc(var(--u) * 13); font-weight: 600; border-radius: calc(var(--u) * 2); }
.mr-hero { display: grid; grid-template-columns: 1.05fr 1fr; height: calc(var(--u) * 816); }
.mr-photo {
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(98deg, rgba(255, 255, 255, 0.018) 0 calc(var(--u) * 2), transparent calc(var(--u) * 2) calc(var(--u) * 22)),
    radial-gradient(ellipse at 35% 40%, #3D2C20 0%, #1D1611 72%);
}
.mr-plate {
  position: absolute;
  left: calc(var(--u) * 60);
  top: calc(var(--u) * 70);
  width: calc(var(--u) * 620);
  height: calc(var(--u) * 620);
  border-radius: 50%;
  background: radial-gradient(circle, #EEE5D6 0 53%, #D9CCB7 54% 55.5%, #EAE0D0 57% 69%, #CBBCA5 71%);
  box-shadow: 0 calc(var(--u) * 50) calc(var(--u) * 90) rgba(0, 0, 0, 0.6);
}
.mr-food {
  position: absolute;
  left: calc(var(--u) * 150);
  top: calc(var(--u) * 238);
  width: calc(var(--u) * 310);
  height: calc(var(--u) * 84);
  border-radius: calc(var(--u) * 42);
  background: linear-gradient(90deg, #2E2015, #8C4A24 28%, #C9773A 58%, #6A4224 88%, #3B2A1C);
  transform: rotate(-24deg);
  box-shadow: inset 0 calc(var(--u) * -12) calc(var(--u) * 20) rgba(0, 0, 0, 0.35), 0 calc(var(--u) * 10) calc(var(--u) * 18) rgba(0, 0, 0, 0.18);
}
.mr-food--2 {
  left: calc(var(--u) * 200);
  top: calc(var(--u) * 318);
  width: calc(var(--u) * 260);
  height: calc(var(--u) * 62);
  background: linear-gradient(90deg, #26301A, #5F7034 35%, #B9B57A 75%, #E7E1BE);
  transform: rotate(-19deg);
}
.mr-sauce {
  position: absolute;
  left: calc(var(--u) * 120);
  top: calc(var(--u) * 120);
  width: calc(var(--u) * 380);
  height: calc(var(--u) * 380);
  border-radius: 50%;
  border: calc(var(--u) * 16) solid transparent;
  border-bottom-color: rgba(163, 66, 30, 0.7);
  transform: rotate(18deg);
}
.mr-herb {
  position: absolute;
  left: calc(var(--u) * 270);
  top: calc(var(--u) * 250);
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 9);
  border-radius: 50%;
  background: #4E7A2E;
  box-shadow: calc(var(--u) * 40) calc(var(--u) * 30) 0 #5E8A35, calc(var(--u) * 90) calc(var(--u) * -10) 0 #446B27, calc(var(--u) * -30) calc(var(--u) * 70) 0 #5E8A35;
}
.mr-herb--2 { left: calc(var(--u) * 360); top: calc(var(--u) * 330); transform: rotate(40deg); }
.mr-herb--3 { left: calc(var(--u) * 220); top: calc(var(--u) * 360); transform: rotate(-30deg); }
.mr-glass {
  position: absolute;
  right: calc(var(--u) * -50);
  top: calc(var(--u) * 40);
  width: calc(var(--u) * 190);
  height: calc(var(--u) * 190);
  border-radius: 50%;
  background: radial-gradient(circle at 42% 40%, rgba(132, 22, 36, 0.95), rgba(64, 10, 16, 0.95) 58%, rgba(255, 255, 255, 0.1) 60%, rgba(255, 255, 255, 0.03) 72%);
}
.mr-copy { padding: calc(var(--u) * 104) calc(var(--u) * 72) 0; }
.mr-kicker { font-size: calc(var(--u) * 12); letter-spacing: 0.18em; text-transform: uppercase; color: #E0663A; }
.mr-title { margin: calc(var(--u) * 24) 0 calc(var(--u) * 44) !important; font-family: "Fraunces", Georgia, serif; font-weight: 300; font-size: calc(var(--u) * 90); line-height: 0.98; letter-spacing: -0.025em; }
.mr-title em { color: #E9B48F; }
.mr-list { margin-bottom: calc(var(--u) * 48) !important; border-top: calc(var(--u) * 1) solid rgba(242, 232, 216, 0.15); }
.mr-list li { display: flex; align-items: baseline; gap: calc(var(--u) * 12); padding: calc(var(--u) * 16) 0; border-bottom: calc(var(--u) * 1) solid rgba(242, 232, 216, 0.15); font-size: calc(var(--u) * 16); }
.mr-list span { font-family: "Fraunces", Georgia, serif; font-size: calc(var(--u) * 20); }
.mr-list i { flex: 1; border-bottom: calc(var(--u) * 1) dotted rgba(242, 232, 216, 0.3); }
.mr-list b { font-weight: 400; color: #CDBFAE; }
.mr-ctas { display: flex; align-items: center; gap: calc(var(--u) * 28); }
.mr-btn--lg { padding: calc(var(--u) * 16) calc(var(--u) * 28); font-size: calc(var(--u) * 14); }
.mr-hours { font-size: calc(var(--u) * 13); color: #A8998A; }
.mr-bar { display: none; }

.screen--phone .mr-nav { height: calc(var(--u) * 56); padding: 0 calc(var(--u) * 20); }
.screen--phone .mr-links, .screen--phone .mr-nav > .mr-btn, .screen--phone .mr-ctas { display: none; }
.screen--phone .mr-logo { font-size: calc(var(--u) * 24); }
.screen--phone .mr-hero { grid-template-columns: 1fr; height: auto; }
.screen--phone .mr-photo { height: calc(var(--u) * 320); }
.screen--phone .mr-plate { left: calc(var(--u) * 22); top: calc(var(--u) * -6); transform: scale(0.56); transform-origin: top left; }
.screen--phone .mr-glass { right: calc(var(--u) * -34); top: calc(var(--u) * 196); width: calc(var(--u) * 120); height: calc(var(--u) * 120); }
.screen--phone .mr-copy { padding: calc(var(--u) * 26) calc(var(--u) * 22); }
.screen--phone .mr-kicker { font-size: calc(var(--u) * 10); }
.screen--phone .mr-title { margin: calc(var(--u) * 14) 0 calc(var(--u) * 22) !important; font-size: calc(var(--u) * 46); }
.screen--phone .mr-list li { padding: calc(var(--u) * 12) 0; font-size: calc(var(--u) * 13); }
.screen--phone .mr-list span { font-size: calc(var(--u) * 16); }
.screen--phone .mr-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  height: calc(var(--u) * 66);
  padding-bottom: calc(var(--u) * 10);
  background: #17120E;
  border-top: calc(var(--u) * 1) solid rgba(242, 232, 216, 0.15);
  font-size: calc(var(--u) * 14);
  font-weight: 600;
}
.screen--phone .mr-bar span { display: grid; place-items: center; }
.screen--phone .mr-bar span:first-child { background: #E0663A; color: #17120E; }

/* ------------------------------------------------------------------
   3. Forge Athletic — fitness
   ------------------------------------------------------------------ */
.m-fit { background: #0D0D0D; color: #F5F5F0; font-family: "Helvetica Neue", Arial, sans-serif; }
.mf-nav { display: flex; align-items: center; gap: calc(var(--u) * 40); height: calc(var(--u) * 84); padding: 0 calc(var(--u) * 48); border-bottom: calc(var(--u) * 1) solid #262626; }
.mf-logo { display: flex; align-items: baseline; gap: calc(var(--u) * 8); font-family: "Anton", Impact, sans-serif; font-size: calc(var(--u) * 30); letter-spacing: 0.02em; }
.mf-logo small { font-family: "Helvetica Neue", Arial, sans-serif; font-size: calc(var(--u) * 10); font-weight: 700; letter-spacing: 0.3em; color: #D7FF3D; }
.mf-links { display: flex; gap: calc(var(--u) * 30); margin-left: auto; font-size: calc(var(--u) * 12); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #BDBDB5; }
.mf-btn { background: #D7FF3D; color: #0D0D0D; padding: calc(var(--u) * 12) calc(var(--u) * 22); font-size: calc(var(--u) * 12); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.mf-burger { color: #D7FF3D; }
.mf-hero { position: relative; display: grid; grid-template-columns: 1fr calc(var(--u) * 400); gap: calc(var(--u) * 48); height: calc(var(--u) * 700); padding: calc(var(--u) * 36) calc(var(--u) * 48); }
.mf-title { display: flex; flex-direction: column; font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: calc(var(--u) * 200); line-height: 0.86; text-transform: uppercase; position: relative; z-index: 1; }
.mf-outline { color: transparent; -webkit-text-stroke: calc(var(--u) * 2) #F5F5F0; }
.mf-title i { color: #D7FF3D; font-style: normal; }
.mf-panel { align-self: end; margin-bottom: calc(var(--u) * 20); padding: calc(var(--u) * 28); background: #D7FF3D; color: #0D0D0D; }
.mf-panel-k { display: block; margin-bottom: calc(var(--u) * 10); font-size: calc(var(--u) * 11); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.mf-panel li { display: grid; grid-template-columns: calc(var(--u) * 54) calc(var(--u) * 70) 1fr; align-items: baseline; padding: calc(var(--u) * 13) 0; border-bottom: calc(var(--u) * 1.5) solid rgba(13, 13, 13, 0.2); font-size: calc(var(--u) * 14); font-weight: 600; }
.mf-panel b { font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: calc(var(--u) * 18); text-transform: uppercase; }
.mf-panel em { font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.mf-panel-cta { display: block; margin-top: calc(var(--u) * 22); font-size: calc(var(--u) * 13); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.mf-stripes { position: absolute; right: calc(var(--u) * 490); top: calc(var(--u) * 64); width: calc(var(--u) * 210); height: calc(var(--u) * 210); background: repeating-linear-gradient(-45deg, #D7FF3D 0 calc(var(--u) * 5), transparent calc(var(--u) * 5) calc(var(--u) * 18)); }
.mf-ticker { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: calc(var(--u) * 28); height: calc(var(--u) * 116); padding-left: calc(var(--u) * 48); border-top: calc(var(--u) * 1) solid #262626; font-family: "Anton", Impact, sans-serif; font-size: calc(var(--u) * 46); text-transform: uppercase; white-space: nowrap; }
.mf-ticker i { font-style: normal; font-size: calc(var(--u) * 22); color: #D7FF3D; }

.screen--phone .mf-nav { height: calc(var(--u) * 58); padding: 0 calc(var(--u) * 18); }
.screen--phone .mf-links, .screen--phone .mf-nav > .mf-btn { display: none; }
.screen--phone .mf-logo { font-size: calc(var(--u) * 26); }
.screen--phone .mf-logo small { font-size: calc(var(--u) * 8); }
.screen--phone .mf-hero { grid-template-columns: 1fr; gap: calc(var(--u) * 26); height: auto; padding: calc(var(--u) * 28) calc(var(--u) * 18); }
.screen--phone .mf-title { font-size: calc(var(--u) * 104); }
.screen--phone .mf-outline { -webkit-text-stroke-width: calc(var(--u) * 1.5); }
.screen--phone .mf-stripes { right: calc(var(--u) * 18); top: calc(var(--u) * 34); width: calc(var(--u) * 92); height: calc(var(--u) * 92); background: repeating-linear-gradient(-45deg, #D7FF3D 0 calc(var(--u) * 3), transparent calc(var(--u) * 3) calc(var(--u) * 10)); }
.screen--phone .mf-panel { margin: 0; padding: calc(var(--u) * 20); }
.screen--phone .mf-panel li { grid-template-columns: calc(var(--u) * 44) calc(var(--u) * 60) 1fr; padding: calc(var(--u) * 10) 0; font-size: calc(var(--u) * 12.5); }
.screen--phone .mf-panel b { font-size: calc(var(--u) * 15); }
.screen--phone .mf-ticker { height: calc(var(--u) * 70); padding-left: calc(var(--u) * 18); gap: calc(var(--u) * 16); font-size: calc(var(--u) * 28); }
.screen--phone .mf-ticker i { font-size: calc(var(--u) * 14); }

/* ------------------------------------------------------------------
   4. Hartley & Partners — professional services
   ------------------------------------------------------------------ */
.m-pro { background: #fff; color: #13294B; font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; }
.mp-util { display: flex; justify-content: space-between; align-items: center; height: calc(var(--u) * 36); padding: 0 calc(var(--u) * 56); background: #13294B; color: #C9D3E3; font-size: calc(var(--u) * 12); }
.mp-nav { display: flex; align-items: center; gap: calc(var(--u) * 40); height: calc(var(--u) * 80); padding: 0 calc(var(--u) * 56); border-bottom: calc(var(--u) * 1) solid #E3E8EF; }
.mp-logo { display: flex; align-items: center; gap: calc(var(--u) * 12); font-size: calc(var(--u) * 18); font-weight: 600; }
.mp-logo b { display: grid; place-items: center; width: calc(var(--u) * 40); height: calc(var(--u) * 40); background: #13294B; color: #fff; font-size: calc(var(--u) * 13); }
.mp-links { display: flex; gap: calc(var(--u) * 32); margin-left: auto; font-size: calc(var(--u) * 14); color: #41546F; }
.mp-btn { background: #1F6F5C; color: #fff; padding: calc(var(--u) * 12) calc(var(--u) * 20); font-size: calc(var(--u) * 14); font-weight: 500; border-radius: calc(var(--u) * 4); }
.mp-hero { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 64); height: calc(var(--u) * 560); padding: calc(var(--u) * 64) calc(var(--u) * 56) calc(var(--u) * 48); }
.mp-kicker { display: flex; align-items: center; gap: calc(var(--u) * 10); font-size: calc(var(--u) * 13); font-weight: 600; color: #1F6F5C; }
.mp-kicker::before { content: ""; width: calc(var(--u) * 24); height: calc(var(--u) * 2); background: currentColor; }
.mp-title { max-width: calc(var(--u) * 560); margin: calc(var(--u) * 20) 0 calc(var(--u) * 22) !important; font-size: calc(var(--u) * 64); font-weight: 600; line-height: 1.04; letter-spacing: -0.02em; }
.mp-lede { max-width: calc(var(--u) * 480); margin-bottom: calc(var(--u) * 32) !important; font-size: calc(var(--u) * 18); line-height: 1.55; color: #55657D; }
.mp-ctas { display: flex; gap: calc(var(--u) * 14); }
.mp-ghost { border: calc(var(--u) * 1) solid #C4CEDB; padding: calc(var(--u) * 12) calc(var(--u) * 20); font-size: calc(var(--u) * 14); border-radius: calc(var(--u) * 4); }
.mp-ticks { display: flex; gap: calc(var(--u) * 24); margin-top: calc(var(--u) * 36) !important; font-size: calc(var(--u) * 13); color: #41546F; }
.mp-ticks li::before { content: "✓"; margin-right: calc(var(--u) * 8); color: #1F6F5C; font-weight: 700; }
.mp-visual { position: relative; overflow: hidden; background: linear-gradient(180deg, #D9E3EF, #EEF2F7); border-radius: calc(var(--u) * 4); }
.mp-building { position: absolute; left: calc(var(--u) * 70); right: calc(var(--u) * 70); top: calc(var(--u) * 56); bottom: calc(var(--u) * -10); display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 10); padding: calc(var(--u) * 22); background: #1B3560; box-shadow: calc(var(--u) * 24) 0 0 #142A4D; }
.mp-building i { background: linear-gradient(160deg, #6D8DBE 0%, #2C4B7C 45%, #213F6D 100%); }
.mp-card { position: absolute; left: calc(var(--u) * 32); bottom: calc(var(--u) * 32); display: flex; flex-direction: column; gap: calc(var(--u) * 4); width: calc(var(--u) * 280); padding: calc(var(--u) * 20) calc(var(--u) * 22); background: #fff; border-radius: calc(var(--u) * 6); box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 40) rgba(19, 41, 75, 0.2); }
.mp-card-k { font-size: calc(var(--u) * 11); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #6B7A90; }
.mp-card b { font-size: calc(var(--u) * 20); font-weight: 600; }
.mp-card-d { font-size: calc(var(--u) * 14); color: #55657D; }
.mp-bar { height: calc(var(--u) * 6); margin-top: calc(var(--u) * 12); background: #E3E8EF; border-radius: 99px; overflow: hidden; }
.mp-bar i { display: block; width: 68%; height: 100%; background: #1F6F5C; }
.mp-row { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 calc(var(--u) * 56); border-top: calc(var(--u) * 1) solid #E3E8EF; }
.mp-row div { display: flex; flex-direction: column; gap: calc(var(--u) * 6); padding: calc(var(--u) * 28) calc(var(--u) * 24) 0 0; }
.mp-row b { font-size: calc(var(--u) * 16); font-weight: 600; }
.mp-row span { font-size: calc(var(--u) * 13.5); color: #55657D; }

.screen--phone .mp-util { height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 18); font-size: calc(var(--u) * 10.5); }
.screen--phone .mp-util span:last-child, .screen--phone .mp-links, .screen--phone .mp-nav > .mp-btn, .screen--phone .mp-row { display: none; }
.screen--phone .mp-nav { height: calc(var(--u) * 60); padding: 0 calc(var(--u) * 18); }
.screen--phone .mp-logo { font-size: calc(var(--u) * 15); }
.screen--phone .mp-logo b { width: calc(var(--u) * 32); height: calc(var(--u) * 32); font-size: calc(var(--u) * 11); }
.screen--phone .mp-hero { grid-template-columns: 1fr; gap: calc(var(--u) * 28); height: auto; padding: calc(var(--u) * 28) calc(var(--u) * 18); }
.screen--phone .mp-title { font-size: calc(var(--u) * 38); }
.screen--phone .mp-lede { font-size: calc(var(--u) * 15); margin-bottom: calc(var(--u) * 22) !important; }
.screen--phone .mp-ctas .mp-btn, .screen--phone .mp-ghost { font-size: calc(var(--u) * 13.5); }
.screen--phone .mp-ticks { gap: calc(var(--u) * 14); margin-top: calc(var(--u) * 22) !important; font-size: calc(var(--u) * 12); }
.screen--phone .mp-visual { height: calc(var(--u) * 250); }
.screen--phone .mp-building { left: calc(var(--u) * 40); right: calc(var(--u) * 40); top: calc(var(--u) * 28); gap: calc(var(--u) * 6); padding: calc(var(--u) * 14); }
.screen--phone .mp-card { left: calc(var(--u) * 16); bottom: calc(var(--u) * 16); width: calc(var(--u) * 210); padding: calc(var(--u) * 14) calc(var(--u) * 16); }
.screen--phone .mp-card b { font-size: calc(var(--u) * 16); }

/* ------------------------------------------------------------------
   5. Field Goods — retail & lifestyle
   ------------------------------------------------------------------ */
.m-shop { background: #ECE6DA; color: #23251E; font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; }
.mg-note { display: grid; place-items: center; height: calc(var(--u) * 34); background: #3E4730; color: #E4E0CF; font-size: calc(var(--u) * 12); }
.mg-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: calc(var(--u) * 76); padding: 0 calc(var(--u) * 48); }
.mg-logo { font-size: calc(var(--u) * 28); font-weight: 600; letter-spacing: -0.045em; }
.mg-links { display: flex; gap: calc(var(--u) * 32); font-size: calc(var(--u) * 14); }
.mg-bag { justify-self: end; font-size: calc(var(--u) * 14); }
.mg-hero { display: grid; grid-template-columns: calc(var(--u) * 420) 1fr; gap: calc(var(--u) * 24); height: calc(var(--u) * 470); padding: calc(var(--u) * 4) calc(var(--u) * 48) calc(var(--u) * 24); }
.mg-copy { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: calc(var(--u) * 12); }
.mg-kicker { font-size: calc(var(--u) * 12); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #B05A36; }
.mg-title { margin: calc(var(--u) * 16) 0 calc(var(--u) * 28) !important; font-size: calc(var(--u) * 76); font-weight: 500; line-height: 0.95; letter-spacing: -0.045em; }
.mg-btn { align-self: flex-start; background: #23251E; color: #ECE6DA; padding: calc(var(--u) * 14) calc(var(--u) * 24); font-size: calc(var(--u) * 14); border-radius: 999px; }
.mg-feature { position: relative; overflow: hidden; border-radius: calc(var(--u) * 4); background: radial-gradient(ellipse at 80% 10%, #EFE6D6 0%, #D8CDB9 60%); }
.mg-shelf { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--u) * 120); background: linear-gradient(180deg, #C4B59B, #CBBDA4); }
.mg-vase, .mg-bowl { position: absolute; bottom: calc(var(--u) * 110); box-shadow: calc(var(--u) * 26) calc(var(--u) * 12) calc(var(--u) * 30) rgba(60, 45, 25, 0.16); }
.mg-vase { left: calc(var(--u) * 300); width: calc(var(--u) * 150); height: calc(var(--u) * 240); background: linear-gradient(90deg, #9C4B2A, #C96F48 42%, #DC8C64 58%, #AC5733); border-radius: 46% 46% 32% 32% / 34% 34% 22% 22%; }
.mg-vase::before { content: ""; position: absolute; left: 50%; top: calc(var(--u) * -34); translate: -50% 0; width: calc(var(--u) * 52); height: calc(var(--u) * 56); background: linear-gradient(90deg, #9C4B2A, #C96F48 42%, #DC8C64 58%, #AC5733); border-radius: calc(var(--u) * 6) calc(var(--u) * 6) 0 0; }
.mg-vase--2 { left: calc(var(--u) * 480); width: calc(var(--u) * 110); height: calc(var(--u) * 168); background: linear-gradient(90deg, #47502F, #6F7B4F 48%, #58633F); border-radius: 50% 50% 42% 42%; }
.mg-vase--2::before { display: none; }
.mg-bowl { left: calc(var(--u) * 120); width: calc(var(--u) * 150); height: calc(var(--u) * 66); background: linear-gradient(90deg, #E2D8C6, #F8F3EA 50%, #D9CFBC); border-radius: 0 0 calc(var(--u) * 75) calc(var(--u) * 75); }
.mg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 24); padding: 0 calc(var(--u) * 48); }
.mg-item { display: grid; grid-template-columns: 1fr auto; gap: calc(var(--u) * 10) calc(var(--u) * 8); font-size: calc(var(--u) * 14); }
.mg-item b { font-weight: 500; }
.mg-tile { grid-column: 1 / -1; position: relative; display: grid; place-items: center; height: calc(var(--u) * 220); border-radius: calc(var(--u) * 4); }
.mg-tile.t1 { background: #E2D8C6; } .mg-tile.t2 { background: #CFC6B0; } .mg-tile.t3 { background: #DCD3C2; } .mg-tile.t4 { background: #C9BEA6; }
.mg-tile i { display: block; box-shadow: calc(var(--u) * 14) calc(var(--u) * 8) calc(var(--u) * 18) rgba(60, 45, 25, 0.14); }
.mg-cup { width: calc(var(--u) * 72); height: calc(var(--u) * 62); background: linear-gradient(90deg, #E7DFD0, #FAF6EE 50%, #DED4C2); border-radius: calc(var(--u) * 4) calc(var(--u) * 4) calc(var(--u) * 30) calc(var(--u) * 30); }
.mg-jug { width: calc(var(--u) * 130); height: calc(var(--u) * 84); border-radius: calc(var(--u) * 6); background: repeating-linear-gradient(0deg, #7D8462 0 calc(var(--u) * 4), #888F6C calc(var(--u) * 4) calc(var(--u) * 8)); }
.mg-plate { width: calc(var(--u) * 124); height: calc(var(--u) * 124); border-radius: 50%; background: radial-gradient(circle, #F4EFE6 0 54%, #E3DACA 56% 60%, #F1EBE0 62%); }
.mg-candle { width: calc(var(--u) * 72); height: calc(var(--u) * 92); border-radius: calc(var(--u) * 6); background: linear-gradient(90deg, #343C27, #4A5436 50%, #3A432B); }

.screen--phone .mg-note { height: calc(var(--u) * 30); font-size: calc(var(--u) * 10.5); }
.screen--phone .mg-nav { grid-template-columns: 1fr auto; height: calc(var(--u) * 56); padding: 0 calc(var(--u) * 18); }
.screen--phone .mg-links { display: none; }
.screen--phone .mg-logo { font-size: calc(var(--u) * 22); }
.screen--phone .mg-bag { font-size: calc(var(--u) * 13); }
.screen--phone .mg-hero { grid-template-columns: 1fr; gap: calc(var(--u) * 22); height: auto; padding: 0 calc(var(--u) * 18); }
.screen--phone .mg-feature { order: -1; height: calc(var(--u) * 290); }
.screen--phone .mg-shelf { height: calc(var(--u) * 76); }
.screen--phone .mg-vase, .screen--phone .mg-bowl { bottom: calc(var(--u) * 68); }
.screen--phone .mg-bowl { left: calc(var(--u) * 26); width: calc(var(--u) * 104); height: calc(var(--u) * 46); }
.screen--phone .mg-vase { left: calc(var(--u) * 144); width: calc(var(--u) * 104); height: calc(var(--u) * 168); }
.screen--phone .mg-vase::before { top: calc(var(--u) * -24); width: calc(var(--u) * 36); height: calc(var(--u) * 40); }
.screen--phone .mg-vase--2 { left: calc(var(--u) * 264); width: calc(var(--u) * 72); height: calc(var(--u) * 110); }
.screen--phone .mg-copy { padding: 0; }
.screen--phone .mg-kicker { font-size: calc(var(--u) * 11); }
.screen--phone .mg-title { margin: calc(var(--u) * 10) 0 calc(var(--u) * 18) !important; font-size: calc(var(--u) * 46); }
.screen--phone .mg-btn { font-size: calc(var(--u) * 13); }
.screen--phone .mg-grid { grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 14); padding: calc(var(--u) * 28) calc(var(--u) * 18); }
.screen--phone .mg-item { font-size: calc(var(--u) * 12.5); }
.screen--phone .mg-tile { height: calc(var(--u) * 150); }
.screen--phone .mg-jug { width: calc(var(--u) * 104); height: calc(var(--u) * 66); }
.screen--phone .mg-plate { width: calc(var(--u) * 100); height: calc(var(--u) * 100); }