html,body{margin:0;padding:0}

:root {
  --bg:            #f3efea;
  --bg-sunk:       #e8dfd5;
  --bg-raised:     #ffffff;
  --bg-dark:       #101112;

  --ink:           #000000;
  --ink-soft:      #323232;
  --ink-muted:     #4e4e4e;
  --on-dark:       #ffffff;
  --on-dark-muted: rgba(255, 255, 255, 0.62);
  --hairline:      #ddd3c7;

  --green:  #48f08b;
  --blue:   #5e9bff;
  --pink:   #ffbdf9;
  --indigo: #7182ff;
  --amber:  #ffc95e;



  --terrain-grey: #b9b7b2;

  --brand-navy:  #20384c;
  --brand-cream: #ebe2b2;

  --radius-card: 26px;
  --radius-pill: 999px;

  --font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-sunk);
  color: var(--ink-soft);
  font-family: var(--font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 500; line-height: 1.06; letter-spacing: -0.03em; }
p { margin: 0; }
button { font: inherit; }

.visually-hidden:not(:focus) {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body.clean .teardown {
  display: flex;
  max-width: none;
  padding: 0;

  min-height: 100vh;
}
body.clean .teardown > .stage { flex: 1; display: flex; flex-direction: column; justify-content: center; }
body.clean .stage { border-radius: 0; }
body.clean .showreel { min-height: 100vh; }
body.clean .contact { border-radius: clamp(26px, 4vw, 48px); }

.teardown {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  max-width: 1700px;
  margin-inline: auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem) 3.5rem;
}
@media (min-width: 1100px) { .teardown { grid-template-columns: minmax(0, 1fr) 25rem; align-items: start; } }

.stage { position: relative; border-radius: var(--radius-card); background: var(--bg); overflow: hidden; }
.stage-dark { background: var(--bg-dark); }
.divider { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px dashed var(--hairline); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }

.pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 1.05rem 2.2rem;
  border: 0; border-radius: var(--radius-pill);
  background: var(--bg); color: var(--ink);
  font-size: clamp(1rem, 1.05vw, 1.2rem); font-weight: 500; text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 300ms ease;
}
.pill:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .pill:hover { background: #fff; } }

.pill-stores { padding-right: 1.1rem; }
.store-marks {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-left: 0.15rem;
  padding-left: 0.7rem;
  border-left: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}
.store-marks svg { width: 16px; height: 16px; fill: currentColor; display: block; }

.round {
  display: grid; place-items: center;
  width: clamp(3rem, 3.6vw, 3.9rem); height: clamp(3rem, 3.6vw, 3.9rem);
  border: 1px solid currentColor; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.round:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .round:hover { background: color-mix(in srgb, currentColor 12%, transparent); } }
.round:disabled { opacity: 0.35; cursor: not-allowed; }

.eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }

.floating-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem clamp(1.25rem, 3vw, 2.75rem);
  color: #fff;
  transition: color 400ms ease;
}

.floating-header.surface-light { color: var(--ink); }

.blur-stack { position: absolute; inset: 0 0 -18px; pointer-events: none; z-index: -1; }
.blur-stack span {
  position: absolute; inset: 0;
  display: block;
  backdrop-filter: blur(var(--b));
  -webkit-backdrop-filter: blur(var(--b));
  -webkit-mask-image: var(--m);
  mask-image: var(--m);
}

.header-social { display: flex; gap: 0.55rem; justify-self: end; }
.header-social svg { width: 45%; height: 45%; fill: currentColor; display: block; }
.header-social a {
  display: grid; place-items: center;
  width: clamp(2.5rem, 2.9vw, 3.1rem); height: clamp(2.5rem, 2.9vw, 3.1rem);
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 50%;
  color: inherit; text-decoration: none;
  transition: transform 160ms var(--ease-out), background-color 250ms ease;
}
.header-social a:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .header-social a:hover { background: color-mix(in srgb, currentColor 14%, transparent); } }

.showreel { position: relative; min-height: 620px; display: grid; isolation: isolate; }
.showreel-slide {
  grid-area: 1 / 1;
  position: relative;
  display: grid; place-items: center;
  padding: 6rem 2rem 7rem;

  z-index: 0;
  pointer-events: none;
}
.showreel-slide[data-active="true"] { z-index: 2; pointer-events: auto; }
.showreel-slide[data-prev="true"]   { z-index: 1; }

.showreel-slide:not([data-active="true"]) .showreel-copy { opacity: 0; }

.video-plane {
  position: absolute; inset: 0;
  overflow: hidden;
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.video-plane video,
.video-plane img {
  width: 100%; height: 100%;
  object-fit: cover;

  object-position: center 28%;
  display: block;
}

.video-plane::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.2) 45%, rgba(0,0,0,0.75));
  pointer-events: none;
}

.spatial-labels { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.spatial-label {
  position: absolute;
  left: var(--x); top: var(--y);
  display: inline-flex; align-items: center;
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
}

.showreel-slide[data-active="true"] .spatial-label {
  animation: label-drift 5s var(--ease-out) var(--delay) 1 both;
}
@keyframes label-drift {
  0%   { opacity: 0; transform: translate3d(calc(var(--drift) * -0.35), 0, 0); }
  12%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--drift), 0, 0); }
}

.showreel-slide[data-active="true"] .showreel-copy {
  animation: copy-in 460ms var(--ease-out) 420ms both;
}
@keyframes copy-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

.terrain { position: absolute; inset: 0; overflow: hidden; background: var(--terrain-grey); }

.terrain-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.terrain::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(52% 46% at 50% 46%, rgba(214,212,206,0.82) 0%, rgba(214,212,206,0.35) 55%, rgba(214,212,206,0) 100%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .terrain-svg animateMotion { display: none; }
}

.showreel-slide[data-tone="light"] .video-plane::after {
  background: linear-gradient(180deg,
    rgba(243, 239, 234, 0.45) 0%,
    rgba(243, 239, 234, 0.12) 38%,
    rgba(0, 0, 0, 0.10) 62%,
    rgba(0, 0, 0, 0.45) 100%);
}

.showreel-slide[data-tone="light"] { align-items: start; padding-top: 9rem; padding-bottom: 5rem; }

.showreel-slide[data-tone="light"] .showreel-copy { color: var(--ink); }
.showreel-slide[data-tone="light"] .showreel-copy h2 { color: var(--ink); }
.showreel-slide[data-tone="light"] .showreel-copy p { color: var(--ink-soft); }

.showreel-slide[data-tone="light"] .pill { background: #fff; color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .showreel-slide[data-tone="light"] .pill:hover { background: var(--bg-sunk); }
}
.showreel-slide[data-tone="light"] .spatial-label {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(0, 0, 0, 0.18);
  color: var(--ink);
}

.collage-plane {
  position: absolute; inset: 0;

  background-image: url("https://assets.moedatech.net/terrain-plate.jpg");
  background-size: cover;
  background-position: 50% 50%;
  overflow: hidden;
}
.collage-plane::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 50%, rgba(16,17,18,0.82) 0%, rgba(16,17,18,0.92) 70%, rgba(16,17,18,0.97) 100%);
  pointer-events: none;
}

.collage-plane::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--bg-dark);
  -webkit-mask-image: var(--shape-out, none);
          mask-image: var(--shape-out, none);

  -webkit-mask-size: 94% 96%;
          mask-size: 94% 96%;
  -webkit-mask-position: 50% 50%;
          mask-position: 50% 50%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  pointer-events: none;
}

.fragments { position: absolute; inset: 0; }

.frag {
  position: absolute;
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 0.9rem;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  background: rgba(255,255,255,0.055);


  animation: frag-drift 22s ease-in-out var(--d, 0s) infinite;
}

.frag-shot {
  width: clamp(150px, 15vw, 240px);
  padding: 0;
  overflow: hidden;
  border-radius: 26px;
  background: transparent;
  backdrop-filter: none;
}
.frag-shot img { display: block; width: 100%; height: auto; opacity: 0.72; }
.frag-wide { width: clamp(300px, 38vw, 640px); border-radius: 14px; }
.frag-band { width: clamp(240px, 26vw, 420px); border-radius: 12px; }
.frag-phone { width: clamp(150px, 15vw, 230px); aspect-ratio: 9 / 17; border-radius: 26px; }
.frag-card  { width: clamp(170px, 17vw, 260px); }
.frag-panel { width: clamp(230px, 26vw, 400px); }
.frag-strip { width: clamp(180px, 20vw, 300px); }

.fl { display: block; height: 9px; border-radius: 999px; background: rgba(255,255,255,0.22); }
.fl.w80 { width: 80%; } .fl.w70 { width: 70%; } .fl.w60 { width: 60%; }
.fl.bar   { height: 34px; border-radius: 10px; width: 100%; background: rgba(255,255,255,0.12); }
.fl.map   { height: 46%; border-radius: 12px; width: 100%;
            background: linear-gradient(135deg, rgba(94,155,255,0.35), rgba(72,240,139,0.18)); }
.fl.chart { height: 74px; border-radius: 10px; width: 100%;
            background: repeating-linear-gradient(90deg, rgba(255,255,255,0.22) 0 8px, transparent 8px 18px); }
.fl.pillish { height: 26px; width: 55%; border-radius: 999px; background: rgba(255,255,255,0.28); }
.sw { display: inline-block; width: 26px; height: 26px; border-radius: 8px; background: var(--c); opacity: 0.75; margin-right: 0.35rem; }

@keyframes frag-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -14px, 0); }
}
@keyframes frag-drift-alt {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, 12px, 0); }
}

.frag:nth-of-type(even) { animation-name: frag-drift-alt; }

.showreel-slide[data-mode="collage"] .showreel-copy { color: #fff; }

.showreel-slide[data-mode="collage"] { background: var(--bg-dark); }
.showreel-slide[data-tone="light"]   { background: var(--terrain-grey); }

.frag-bidflow {
  width: clamp(260px, 27vw, 400px);
  padding: 1.1rem 1.2rem 1rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(22, 23, 25, 0.86);
  color: #fff;
  z-index: 2;
}

.bid-head { display: flex; align-items: center; gap: 0.55rem; }
.bid-title { font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em; }
.bid-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);

  animation: bid-pulse 8s ease-in-out infinite;
}
@keyframes bid-pulse {
  0%, 12%, 100% { opacity: 1; transform: scale(1); }
  6%            { opacity: 0.5; transform: scale(1.5); }
}

.bid-meta {
  margin-top: 0.3rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
}

.bid-rows {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.bid-rows li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.72);

  opacity: 0;
  animation: bid-in 8s linear infinite;
  animation-delay: calc(0.9s + var(--i) * 1.1s);
}
.bid-rows b { color: #fff; font-weight: 500; }
@keyframes bid-in {
  0%   { opacity: 0; transform: translate3d(0, 8px, 0); }
  5%   { opacity: 1; transform: none; }
  74%  { opacity: 1; transform: none; }
  82%  { opacity: 0; transform: translate3d(0, -5px, 0); }
  100% { opacity: 0; }
}

.bid-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
}

.bid-count { position: relative; display: inline-block; min-width: 4.5rem; height: 1em; }
.bid-count i {
  position: absolute; inset: 0;
  font-style: normal;
  opacity: 0;
  animation: bid-slot 8s linear infinite;
  animation-delay: calc(0.9s + var(--i) * 1.1s);
}
@keyframes bid-slot {
  0%, 4%   { opacity: 0; }
  5%, 26%  { opacity: 1; }
  27%      { opacity: 0; }
  100%     { opacity: 0; }
}
.bid-count i:last-child { animation-name: bid-slot-last; }
@keyframes bid-slot-last {
  0%, 4%  { opacity: 0; }
  5%, 74% { opacity: 1; }
  82%     { opacity: 0; }
  100%    { opacity: 0; }
}

.bid-best { color: rgba(255, 255, 255, 0.5); }
.bid-best b {
  color: var(--green);
  font-weight: 500;
  opacity: 0;
  animation: bid-in 8s linear infinite;
  animation-delay: 4.2s;
}

@media (max-width: 760px) { .frag-bidflow { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .bid-rows li, .bid-count i, .bid-best b, .bid-dot { animation: none; opacity: 1; transform: none; }
  .bid-count i:not(:last-child) { opacity: 0; }
}

@media (max-width: 760px) {

  .frag:nth-of-type(n + 3) { display: none; }
}

.showreel-copy { position: relative; z-index: 2; text-align: center; color: #fff; }
.showreel-copy h2 { color: #fff; font-size: clamp(2.5rem, 7vw, 6rem); font-weight: 400; letter-spacing: -0.04em; }
.showreel-copy p { margin: 1.5rem auto 2.5rem; max-width: 34ch; font-size: clamp(1.1rem, 1.5vw, 1.6rem); color: rgba(255,255,255,0.86); }

.showreel-controls {
  position: absolute; left: 50%; bottom: 2.6rem; z-index: 3;
  display: flex; align-items: center; gap: 1.75rem;
  transform: translateX(-50%);
  color: #fff;
}
.showreel-controls .round { background: rgba(0,0,0,0.4); backdrop-filter: blur(6px); }
.showreel-progress { display: flex; align-items: center; gap: 1rem; }
.showreel-track { position: relative; width: clamp(9rem, 13vw, 15rem); height: 4px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.3); overflow: hidden; }
.showreel-fill { position: absolute; inset: 0; background: #fff; transform-origin: left center; transform: scaleX(0); }
.showreel-fill[data-running="true"] { animation: fill var(--dwell, 6000ms) linear forwards; }
@keyframes fill { to { transform: scaleX(1); } }
.showreel-dots { display: flex; gap: 0.5rem; }
.showreel-dots button {
  width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,0.4); cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.showreel-dots button[aria-current="true"] { background: #fff; transform: scale(1.25); }

.skip-link {
  position: absolute; left: 50%; bottom: 0.5rem; z-index: 4;
  transform: translateX(-50%);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  background: #fff; color: var(--ink);
  font-size: 0.8125rem; text-decoration: none;
}

.rail-section { position: relative; padding: 4rem 0 3.5rem; isolation: isolate; }

.shape-field { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.shape-field span { position: absolute; display: block; }
.shape-field .f1 { left: -8%; top: 38%; width: 26%; aspect-ratio: 1; border-radius: 50%; background: var(--blue); }
.shape-field .f2 { right: -6%; top: -18%; width: 34%; aspect-ratio: 1; border-radius: 42% 58% 54% 46% / 56% 44% 56% 44%; background: var(--green); }

.rail-head { position: relative; padding-inline: clamp(1.5rem, 4vw, 3.5rem); text-align: center; }
.rail-title { position: relative; display: inline-block; font-size: clamp(2.25rem, 6.5vw, 5rem); letter-spacing: -0.04em; }

.rail-title .layer, .rail-blob { position: absolute; inset: 0; margin: 0; pointer-events: none; }
.rail-blob, .rail-title .layer-accent { clip-path: ellipse(34% 44% at 76% 55%); }
.rail-blob { background: var(--green); z-index: 0; }
.rail-title .layer-accent { color: #a80063; z-index: 2; }
.rail-title .layer-base { position: relative; z-index: 1; }

.rail-viewport {
  margin-top: 3rem;
  padding: 1.5rem clamp(1.5rem, 4vw, 3.5rem);
  display: flex; gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;

  scroll-padding-inline: clamp(1.5rem, 4vw, 3.5rem);
  scrollbar-width: none;
}
.rail-viewport::-webkit-scrollbar { display: none; }

.rail-card {
  flex: 0 0 clamp(15rem, 26vw, 20rem);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  padding: 1rem 1rem 1.5rem;
  border-radius: var(--radius-card);
  background: var(--bg-raised); color: var(--ink-muted);
  text-decoration: none;

  transform: rotate(var(--tilt, 0deg));
  transition: transform 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .rail-card:hover { transform: rotate(0deg) translateY(-4px); } }
.rail-card:active { transform: rotate(0deg) scale(0.99); }
.rail-thumb { position: relative; height: 10rem; border-radius: 18px; background: var(--thumb, var(--blue)); overflow: hidden; }
.rail-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rail-card h3 { margin: 1.25rem 0 0.5rem; font-size: 1.25rem; }
.rail-card p { font-size: 0.9375rem; }
.rail-more { margin-top: 1.25rem; font-size: 0.9375rem; font-weight: 500; color: var(--ink); }
.rail-more .arrow { display: inline-block; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .rail-card:hover .rail-more .arrow { transform: translateX(3px); } }

.rail-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; color: var(--ink); }
.rail-count { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-muted); min-width: 6rem; text-align: center; }

.stage-rent {
  background: linear-gradient(180deg, #b9b7b2 0%, #cbc8c2 18%, var(--bg) 46%, var(--bg) 100%);
}
.stage-rent .rail-head { text-align: center; }
.stage-rent .rail-title {
  display: block;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  letter-spacing: -0.035em;
  margin-top: 0.9rem;
}
.rail-sub { margin: 1rem auto 0; max-width: 46ch; color: var(--ink-muted); font-size: clamp(1rem, 1.15vw, 1.2rem); }

.rent-card {
  flex: 0 0 clamp(17rem, 25vw, 23rem);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  border-radius: var(--radius-card);
  background: var(--bg-raised);
  overflow: hidden;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 220ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .rent-card:hover { transform: rotate(0deg) translateY(-5px); }
}

.rent-media {
  display: block;
  aspect-ratio: 4 / 3;
  background: #d9d6d0;
  overflow: hidden;
}
.rent-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rent-media-empty {
  display: block; width: 100%; height: 100%;
  background: repeating-linear-gradient(135deg, #d9d6d0 0 14px, #d2cfc9 14px 28px);
}

.rent-body { display: flex; flex-direction: column; gap: 1rem; padding: 1.4rem 1.4rem 1.6rem; flex: 1; }
.rent-head { display: block; }
.rent-head h3 { font-size: clamp(1.25rem, 1.5vw, 1.6rem); }
.rent-note { display: block; margin-top: 0.2rem; color: var(--ink-muted); font-size: 0.9375rem; }

.rent-sizes { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rent-sizes button {
  padding: 0.42rem 0.8rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink-muted);
  font: inherit; font-size: 0.8125rem; font-weight: 500;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, transform 140ms var(--ease-out);
}
.rent-sizes button:active { transform: scale(0.96); }
.rent-sizes button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

.rent-price { display: flex; align-items: baseline; gap: 0.5rem; }
.rent-price b {
  font-size: clamp(1.35rem, 1.8vw, 1.9rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);

  transition: opacity 160ms var(--ease-out);
}
.rent-price.is-swapping b { opacity: 0.25; }
.rent-price em { font-style: normal; font-size: 0.875rem; color: var(--ink-muted); }

.rent-cta {
  margin-top: auto;
  align-self: flex-start;
  font-size: 0.9688rem; font-weight: 500;
  color: var(--ink); text-decoration: none;
}
.rent-cta .arrow { display: inline-block; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .rent-card:hover .rent-cta .arrow { transform: translateX(4px); }
}
.rent-card-soon { opacity: 0.55; }
.rent-card-soon .rent-body { min-height: 8rem; }

@media (prefers-reduced-motion: reduce) {
  .rent-card, .rent-sizes button, .rent-cta .arrow { transition-property: background-color, color, opacity; }
  .rent-card:hover, .rent-sizes button:active { transform: rotate(var(--tilt, 0deg)); }
}

.grad { position: relative; padding: 4.5rem clamp(1.5rem, 4vw, 3.5rem) 4rem; text-align: center; isolation: isolate; }
.grad .shape-field .f1 { left: auto; right: -10%; top: 6%; width: 30%; background: var(--pink); border-radius: 50%; }
.grad .shape-field .f2 { left: -10%; top: auto; bottom: -12%; width: 24%; background: var(--amber); border-radius: 50%; }
.grad h2 { margin: 1rem 0 1.5rem; font-size: clamp(2rem, 5vw, 3.75rem); }
.grad-body { max-width: 60ch; margin-inline: auto; font-size: clamp(1rem, 1.4vw, 1.25rem); color: var(--ink-soft); }

.grad-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1rem; margin-top: 3.5rem; text-align: left; }
.grad-card { position: relative; border-radius: var(--radius-card); background: var(--card, var(--bg-dark)); color: var(--on-dark-muted); overflow: hidden; }
.grad-media { position: relative; height: 11rem; }
.grad-media video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.75; }
.grad-names { position: absolute; top: 1rem; left: 1rem; z-index: 2; display: flex; align-items: center; gap: 0.4rem; }
.name-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.18); color: #fff;
  font-size: 0.8125rem; font-weight: 500;
  backdrop-filter: blur(6px);
}
.name-pill.was { opacity: 0.7; text-decoration: line-through; }
.name-pill.now { background: rgba(255,255,255,0.3); }
.grad-body-block { padding: 1.5rem; }
.grad-card h3 { color: #fff; font-size: 1.25rem; margin-bottom: 0.5rem; }
.grad-card p { font-size: 0.9375rem; }
.grad-card .pill { margin-top: 1.25rem; }

.stage-posts { background: var(--bg); }
.posts { padding: clamp(4rem, 9vh, 6.5rem) clamp(1.5rem, 4vw, 3.5rem); }
.posts-head { max-width: 46ch; margin-inline: auto; text-align: center; }
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 1.25rem;
  margin: 3rem 0 2.5rem;
}
.post-card {
  display: flex; flex-direction: column;
  border-radius: var(--radius-card);
  background: var(--bg-raised);
  overflow: hidden;
  transition: transform 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .post-card:hover { transform: translateY(-4px); }
}
.post-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-sunk); }
.post-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;

  filter: saturate(0.55) contrast(1.03);
  transition: transform 400ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .post-card:hover .post-media img { transform: scale(1.03); }
}
.post-body { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.3rem 1.35rem 1.5rem; flex: 1; }
.post-kicker {
  font-family: var(--mono); font-size: 0.6875rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted);
}
.post-card h3 { font-size: clamp(1.1rem, 1.35vw, 1.35rem); line-height: 1.18; }
.post-card h3 a { color: var(--ink); text-decoration: none; }
.post-card p { color: var(--ink-muted); font-size: 0.9375rem; }
.post-meta { margin-top: auto; font-family: var(--mono); font-size: 0.6875rem; color: var(--ink-muted); }
.pill-ghost {
  display: inline-flex; margin-inline: auto;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.posts > .pill-ghost { display: flex; width: fit-content; }

.stage-founder { background: var(--bg-sunk); }
.founder {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(4rem, 9vh, 6.5rem) clamp(1.5rem, 4vw, 3.5rem) clamp(2rem, 4vh, 3rem);
}
@media (min-width: 900px) { .founder { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); } }

.founder-shot { margin: 0; border-radius: var(--radius-card); overflow: hidden; background: var(--bg); }
.founder-shot img {
  display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  filter: saturate(0.5) contrast(1.04);
}

.founder-quote { margin: 0; }
.founder-quote p {

  font-size: clamp(1.35rem, 2.6vw, 2.4rem);
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-indent: -0.42em;
}
.founder-quote footer { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 1.75rem; }
.founder-name { font-weight: 500; color: var(--ink); }
.founder-role { color: var(--ink-muted); font-size: 0.9375rem; }

.partners {
  padding: 0 clamp(1.5rem, 4vw, 3.5rem) clamp(3rem, 7vh, 5rem);
  text-align: center;
}
.partner-row {
  list-style: none;
  margin: 1.25rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.25rem, 4vw, 3.5rem);
}

.partner-row li {
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-muted);
}

.signup { padding: 4.5rem clamp(1.5rem, 4vw, 3.5rem); }
.signup h2 { max-width: 20ch; font-size: clamp(1.75rem, 4vw, 3rem); }
.signup-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; margin-top: 2.5rem; }
.tile {
  display: grid; gap: 0.35rem;
  padding: 2rem 1.75rem;
  border-radius: var(--radius-card);
  background: var(--bg-raised); color: var(--ink-muted);
  text-decoration: none;
  transition: transform 200ms var(--ease-out), background-color 300ms ease;
}
.tile:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .tile:hover { transform: translateY(-3px); } }

.tile-primary { background: var(--ink); color: var(--on-dark-muted); }
.tile-primary h3 { color: #fff; }
.tile h3 { font-size: 1.375rem; }
.tile .cost { margin-top: 1rem; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; }
.signup-social { display: flex; gap: 0.5rem; margin-top: 2rem; }
.signup-social a {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: var(--bg-raised); color: var(--ink);
  font-family: var(--mono); font-size: 0.6875rem; text-decoration: none;
  transition: transform 160ms var(--ease-out);
}
.signup-social a:active { transform: scale(0.94); }

.shape-band { position: relative; height: 320px; overflow: hidden; }
.shape-band span { position: absolute; display: block; }
.shape-band .s1 { left: -4%;  bottom: -55%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--blue); }
.shape-band .s2 { left: 28%;  bottom: -70%; width: 44%; aspect-ratio: 1; border-radius: 46% 54% 50% 50% / 55% 48% 52% 45%; background: var(--pink); }
.shape-band .s3 { right: -6%; bottom: -45%; width: 30%; aspect-ratio: 1; border-radius: 50%; background: var(--amber); }

.util { padding: 3rem clamp(1.5rem, 4vw, 3.5rem) 2rem; }
.util-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 2rem; }
.util-cols h4 { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.9rem; }
.util-cols ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.util-cols a { color: var(--ink-muted); font-size: 0.9375rem; text-decoration: none; transition: color 300ms ease; }
@media (hover: hover) and (pointer: fine) { .util-cols a:hover { color: var(--ink); } }

.util-wordmark { margin-top: 3rem; }

.util-wordmark img { display: block; width: auto; height: clamp(64px, 9vw, 132px); }

.util-socket {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
  margin-top: 1.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-muted);
}
.util-socket a { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .util-socket a:hover { color: var(--ink); } }
.util-socket button {
  margin-left: auto;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--hairline); border-radius: var(--radius-pill);
  background: transparent; color: inherit;
  font-size: inherit; letter-spacing: inherit; text-transform: inherit;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 250ms ease;
}
.util-socket button:active { transform: scale(0.97); }
.util-lockup { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; letter-spacing: -0.02em; text-transform: none; color: var(--ink); font-size: 0.875rem; }
.util-lockup i { width: 14px; height: 14px; border-radius: 5px 5px 5px 1px; background: var(--ink); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.stage-dark :focus-visible, .showreel :focus-visible, .floating-header:not(.surface-light) :focus-visible { outline-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .showreel-slide { transition: opacity 200ms ease; }
  .showreel-fill[data-running="true"] { animation: none; transform: scaleX(1); }

  .showreel-slide[data-active="true"] .spatial-label { animation: none; opacity: 1; transform: none; }
  .video-plane video { transition: none; }
}

#lgm {

  --c-ink:       #ffffff;
  --c-dim:       rgb(255 255 255 / 0.62);
  --c-faint:     rgb(255 255 255 / 0.16);
  --c-card:      #101112;
  --c-edge:      rgb(255 255 255 / 0.14);
  --c-field:     rgb(255 255 255 / 0.08);
  --c-field-2:   rgb(255 255 255 / 0.14);
  --c-seg:       rgb(255 255 255 / 0.08);
  --c-accent:    #f3efea;
  --c-on-accent: #000000;
  --c-star:      #ffc95e;
  --c-ok:        #48f08b;
  --c-photo: url("https://assets.moedatech.net/lgm-panel-1920.jpg");
}

.lgm {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
}
.lgm[hidden] { display: none; }

.lgm-scrim {
  position: absolute; inset: 0;
  background: rgb(16 17 18 / 0.62);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

.lgm-card {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr;
  width: min(820px, 100%);
  min-height: min(520px, 80vh);
  max-height: 92vh; overflow: auto;
  background: var(--c-card) var(--c-photo) no-repeat 0% 50% / cover;
  border: 1px solid var(--c-edge);
  border-radius: var(--radius-card);
  box-shadow: 0 30px 70px rgb(0 0 0 / 0.5);
  color: var(--c-ink);
  animation: lgmUp 260ms var(--ease-out) both;
}
@keyframes lgmUp { from { opacity: 0; transform: translateY(10px) scale(0.985); } }

.lgm-x {
  position: absolute; top: 0.9rem; right: 0.9rem; z-index: 3;
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgb(255 255 255 / 0.1); color: var(--c-ink);
  font: inherit; line-height: 1;
}
.lgm-x:hover { background: rgb(255 255 255 / 0.2); }

.lgm-form { display: block; max-width: 56%; padding: 36px 32px; }
.lgm-form[hidden] { display: none; }
.lgm-form > svg { display: block; width: 90px; height: 34px; color: var(--c-ink); margin-bottom: 20px; }
.lgm-form h2 {
  margin: 0 0 7px; font-size: 26px; line-height: 31px;
  font-weight: 500; letter-spacing: -0.65px; color: var(--c-ink);
}
.lgm-sub {
  margin: 0 0 20px; font-size: 13.5px; line-height: 20px; font-weight: 400;
  letter-spacing: -0.14px; color: var(--c-dim);
}
.lgm-sub b { color: var(--c-ink); font-weight: 600; }
.lgm-form label {
  display: block; margin-bottom: 4px;
  font-size: 12.5px; line-height: 20px; font-weight: 600; color: var(--c-ink);
}
.lgm-foot, .lgm-note {
  margin: 16px 0 0; font-size: 12.5px; line-height: 19px;
  color: var(--c-dim); text-align: center;
}

.lgm-seg {
  display: grid; grid-template-columns: 1fr 1fr;
  height: 50px; margin-bottom: 18px; padding: 4px;
  border-radius: 999px;
  background: var(--c-seg);
  box-shadow: inset 0 0 0 1px var(--c-faint);
}
.lgm-seg button {
  border: 0; border-radius: 999px; cursor: pointer;
  padding: 0; font: inherit; font-size: 13.5px; line-height: 20px; font-weight: 600;
  background: transparent; color: var(--c-dim);
  transition: background-color 180ms ease, color 180ms ease;
}
.lgm-seg button:hover { color: var(--c-ink); }
.lgm-seg button.on { background: var(--c-accent); color: var(--c-on-accent); }

.lgm-row { display: grid; grid-template-columns: auto 1fr; gap: 9px; }
.lgm-inp, .lgm-ccb {
  height: 50px; font: inherit; font-size: 14.5px; line-height: 20px;
  color: var(--c-ink);
  background: var(--c-field);
  border: 1px solid var(--c-faint);
  border-radius: 14px;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.lgm-inp { width: 100%; padding: 0 16px; }
.lgm-inp::placeholder { color: rgb(255 255 255 / 0.34); }
.lgm-inp:focus, .lgm-ccb:focus-visible {
  outline: none; border-color: var(--c-accent); background: var(--c-field-2);
}
.lgm-cc { position: relative; }
.lgm-ccb {
  display: inline-flex; align-items: center; gap: 7px; padding: 0 10px;
  cursor: pointer; white-space: nowrap;
}
.lgm-ccb img { width: 20px; height: auto; border-radius: 3px; display: block; }
.lgm-ccb b { font-weight: 600; }
.lgm-ccb svg { width: 0.85rem; height: 0.85rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.lgm-ccb[aria-expanded="true"] { border-color: var(--c-accent); }

.lgm-ccl {
  position: fixed; z-index: 9200; width: 260px;
  border-radius: 14px; overflow: hidden;
  background: var(--c-card);
  border: 1px solid var(--c-faint);
  box-shadow: 0 18px 44px rgb(0 0 0 / 0.55);
}
.lgm-ccl[hidden] { display: none; }
.lgm-ccs { max-height: 264px; overflow: auto; padding: 6px; }
.lgm-ccs button {
  display: grid; grid-template-columns: 20px auto 1fr; align-items: center; gap: 9px;
  width: 100%; padding: 9px 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--c-ink); font: inherit; font-size: 14.5px;
  cursor: pointer; text-align: left;
}
.lgm-ccs button:hover { background: rgb(255 255 255 / 0.08); }
.lgm-ccs button img { width: 20px; height: auto; border-radius: 3px; display: block; }
.lgm-ccs button b { font-weight: 600; }
.lgm-ccs button span {
  color: var(--c-dim); font-size: 13.5px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lgm-ccs button[aria-selected="true"] { color: var(--c-accent); }
.lgm-cch {
  position: absolute; left: 0; right: 0; height: 34px; pointer-events: none;
  display: grid; place-items: center; color: var(--c-dim);
}
.lgm-cch svg { width: 0.8rem; height: 0.8rem; fill: none; stroke: currentColor; stroke-width: 2; }
.lgm-cch--up { top: 0; background: linear-gradient(rgb(16 17 18) 35%, rgb(16 17 18 / 0)); }
.lgm-cch--dn { bottom: 0; background: linear-gradient(rgb(16 17 18 / 0), rgb(16 17 18) 65%); }
.lgm-cch[hidden] { display: none; }

.lgm-go {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; height: 50px; margin-top: 18px; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--c-accent); color: var(--c-on-accent);
  font: inherit; font-size: 15px; line-height: 20px; font-weight: 600;
  transition: filter 160ms ease, opacity 160ms ease;
}
.lgm-go svg {
  width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.lgm-go:hover { filter: brightness(1.08); }
.lgm-go[disabled] { opacity: 0.45; cursor: default; filter: none; }

.lgm-back, .lgm-resend {
  padding: 4px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; color: var(--c-dim);
  display: inline-flex; align-items: center; gap: 6px;
}
.lgm-back:hover, .lgm-resend:hover { color: var(--c-ink); }
.lgm-back svg {
  width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.lgm-resend { display: block; margin: 12px auto 0; }
.lgm-resend[disabled] { opacity: 0.45; cursor: default; }
.lgm-resend[disabled]:hover { color: var(--c-dim); }

.otps { display: grid; grid-auto-flow: column; gap: 11px; }
.otp { position: relative; }
.otp input {
  width: 100%; height: 60px; text-align: center;
  font: inherit; font-size: 22px; font-weight: 600; color: var(--c-ink);
  background: var(--c-field);
  border: 1px solid var(--c-faint); border-radius: 14px;
  transition: border-color 160ms ease;
}
.otp input:focus { outline: none; border-color: var(--c-accent); }
.otp.filled input { border-color: rgb(255 255 255 / 0.42); }
.otp .sweep {
  position: absolute; inset: 0; border-radius: 14px; pointer-events: none;
  background: linear-gradient(90deg, rgb(255 255 255 / 0) 0%,
                                     rgb(255 255 255 / 0.10) 50%,
                                     rgb(255 255 255 / 0) 100%);
  opacity: 0;
}
.otps.live .otp .sweep { animation: lgmSweep 1.1s linear infinite; }
@keyframes lgmSweep {
  0%   { opacity: 0; transform: translateX(-60%); }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(60%); }
}
.otps.done .otp input { border-color: var(--c-ok); }

.lgm-sent {
  position: relative; margin: 12px 0 0; text-align: center;
  color: var(--c-ok); font-size: 13.5px; opacity: 0;
  transition: opacity 200ms ease;
}
.lgm-sent.on { opacity: 1; }
.lgm-sent i { display: inline-grid; place-items: center; vertical-align: -2px; margin-right: 5px; }
.lgm-sent i svg {
  width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.lgm-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.lgm-burst b {
  position: absolute; left: 0; top: 0; width: 5px; height: 5px; border-radius: 50%;
  background: var(--c-ok); opacity: 0;
}
.lgm-burst b:nth-child(even) { width: 4px; height: 4px; background: var(--c-star); }
.lgm-sent.pop .lgm-burst b { animation: lgmBurst 620ms var(--ease-out) both; }
@keyframes lgmBurst {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--bx, 0), var(--by, 0)) scale(0.4); }
}

.lgm-rate {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 4px; padding: 20px 0 0;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  color: var(--c-ink);
}
.lgm-rate > div { display: grid; gap: 2px; }
.lgm-rate p { margin: 0; font-size: 12px; color: rgb(255 255 255 / 0.82); }
.lgm-rate-s { display: inline-flex; align-items: center; gap: 6px; }

.lgm-rate-s b { font-size: 14px; font-weight: 700; color: var(--c-star); }
.lgm-rate-s img { height: 14px; width: auto; display: block; }
.lgm-avs { display: inline-flex; }
.lgm-avs img {
  width: 31px; height: 31px; border-radius: 50%; object-fit: cover; display: block;
  border: 2px solid var(--c-card); margin-inline-start: -9px;
}
.lgm-avs img:first-child { margin-inline-start: 0; }

.lgm-pane { display: none; }

.lgm-stage { position: absolute; z-index: 2; pointer-events: none; will-change: transform; }
.lgm-strip { position: absolute; left: 0; overflow: hidden; }
.lgm-strip > .lgm-card { position: absolute; left: 0; margin: 0; animation: none; }
.lgm-card.warping { opacity: 0; }

@media (max-width: 720px) {
  .lgm-form { max-width: 100%; }
  .lgm-card { background-image: none; background-color: var(--c-card); min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lgm-card { animation: none; }
  .otps.live .otp .sweep,
  .lgm-sent.pop .lgm-burst b { animation: none; }
}

.floating-header > .hdr-profile { justify-self: start; }
.floating-header > .topnav      { justify-self: center; }
.floating-header > .hdr-ctl     { justify-self: end; }

.nv--logo { padding: 0 0.9rem; }

.hv4-logo { display: block; height: clamp(1.8rem, 2.4vw, 2.5rem); width: auto; }
.floating-header .hv4-logo--ink                 { display: none; }
.floating-header.surface-light .hv4-logo--white { display: none; }
.floating-header.surface-light .hv4-logo--ink   { display: block; }

.nv--logo:hover { background: transparent; }
.nv--logo:hover .hv4-logo { opacity: 0.8; }

.topnav { display: flex; align-items: center; gap: 0.25rem; }
.nvi    { position: relative; }

.nv {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1.15rem;
  border-radius: var(--radius-pill);
  color: inherit; text-decoration: none;
  font-size: clamp(0.95rem, 1.05vw, 1.15rem); font-weight: 500;
  white-space: nowrap;
  transition: background-color 250ms ease;
}
.nv:hover, .nvi:focus-within .nv { background: color-mix(in srgb, currentColor 14%, transparent); }
.nv svg {
  width: 1.05em; height: 1.05em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

:root {
  --glass-veil:    rgba(255, 255, 255, 0.74);
  --glass-edge:    rgba(255, 255, 255, 0.58);
  --glass-blur:    blur(22px) saturate(1.35);
  --glass-shadow:  0 24px 60px -20px rgba(0, 0, 0, 0.35);
  --glass-inset:   inset 0 1px 0 rgba(255, 255, 255, 0.62);
  --glass-divider: rgba(0, 0, 0, 0.10);
  --glass-hover:   rgba(255, 255, 255, 0.55);
}

.nvi {

  --mm-gap: 0.5rem;
  --mm-close-delay: 160ms;
}
.mm {
  position: absolute; top: calc(100% + var(--mm-gap)); left: 50%;
  transform: translateX(-50%) translateY(-6px);

  z-index: 59;
  min-width: 28rem;
  opacity: 0; visibility: hidden; pointer-events: none;

  transition: opacity 200ms var(--ease-out) var(--mm-close-delay),
              transform 260ms var(--ease-out) var(--mm-close-delay),
              visibility 0s linear calc(200ms + var(--mm-close-delay));
}

.mm::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(-1 * (var(--mm-gap) + 2px));
  height: calc(var(--mm-gap) + 2px);
}

.nvi:hover .mm, .nvi:focus-within .mm {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  z-index: 60;
  transition-delay: 0s;
}
.mm-in {
  display: grid; gap: 0.35rem;
  padding: 0.6rem;
  background: var(--glass-veil);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-card);
  box-shadow: var(--glass-shadow), var(--glass-inset);

  color: var(--ink);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mm-in { background: var(--bg-raised); border-color: var(--hairline); }
}
.mm-list { display: grid; gap: 0.15rem; }

.mm-row {
  display: grid; grid-template-columns: auto 1fr; gap: 0.75rem;
  align-items: start;
  padding: 0.7rem 0.8rem;
  border-radius: calc(var(--radius-card) - 12px);
  color: inherit; text-decoration: none;
  transition: background-color 200ms ease;
}
.mm-row:hover { background: var(--glass-hover); }
.mm-ic {
  width: 1.25rem; height: 1.25rem; margin-top: 0.15rem;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.mm-row span { display: grid; gap: 0.15rem; min-width: 0; }
.mm-row b    { font-size: 0.95rem; font-weight: 500; }
.mm-row i    { font-style: normal; font-size: 0.85rem; color: var(--ink-muted); }

.mm-feat {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.9rem 1rem;

  background: rgba(0, 0, 0, 0.045);
  box-shadow: inset 0 0 0 1px var(--glass-divider);
  border-radius: calc(var(--radius-card) - 12px);
  color: inherit; text-decoration: none;
  transition: background-color 200ms ease;
}
.mm-feat:hover { background: rgba(0, 0, 0, 0.075); }
.mm-feat b { grid-column: 1; font-size: 0.95rem; font-weight: 500; }
.mm-feat i { grid-column: 1; font-style: normal; font-size: 0.85rem; color: var(--ink-muted); }
.mm-go {
  grid-column: 2; grid-row: 1 / span 2;
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: var(--ink); color: var(--bg);
}
.mm-go svg {
  width: 0.9rem; height: 0.9rem;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

.hdr-ctl { display: flex; align-items: center; gap: 0.55rem; }

.hdr-profile {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: var(--radius-pill);
  background: transparent; color: inherit;
  font-family: inherit; font-size: 0.95rem; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background-color 250ms ease, transform 160ms var(--ease-out);
}
.hdr-profile:hover  { background: color-mix(in srgb, currentColor 18%, transparent); }
.hdr-profile:active { transform: scale(0.97); }
.hdr-profile svg {
  width: 1.05em; height: 1.05em;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

.hdr-ctl .header-social { justify-self: auto; }

.navbtn {
  display: none;
  width: clamp(2.25rem, 2.6vw, 2.75rem); height: clamp(2.25rem, 2.6vw, 2.75rem);
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer;
  position: relative;
}
.navbtn i {
  position: absolute; top: 50%; left: 50%;
  width: 1rem; height: 1.5px; background: currentColor;
  transform: translate(-50%, -50%);
}
.navbtn i::before, .navbtn i::after {
  content: ''; position: absolute; left: 0;
  width: 100%; height: 100%; background: currentColor;
}
.navbtn i::before { top: -5px; }
.navbtn i::after  { top: 5px; }

@media (max-width: 60rem) {
  .topnav { display: none; }
  .navbtn { display: grid; place-items: center; }
  .hdr-profile span { display: none; }
  .hdr-profile { padding: 0.6rem 0.7rem; }
}

[data-empty] {
  background-color: var(--bg-sunk);
  background-image: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--ink) 5%, transparent) 0 1px,
    transparent 1px 9px
  );
  box-shadow: inset 0 0 0 1px var(--hairline);

  min-height: 2rem;
}
img[data-empty] { object-fit: cover; color: transparent; }

.showreel-copy h1 {
  color: #fff;
  font-size: clamp(2.5rem, 7vw, 6rem);
  font-weight: 400;
  letter-spacing: -0.04em;
}
.showreel-slide[data-tone="light"] .showreel-copy h1 { color: var(--ink); }

.video-plane .hero-video {
  position: absolute;
  inset: 0;

  object-fit: cover;
  object-position: center bottom;
}

.showreel-slide:nth-of-type(2) .collage-plane {
  background-image: url('https://assets.moedatech.net/collage-grid.jpg');
}
.showreel-slide:nth-of-type(2) .collage-plane::before {
  background: radial-gradient(120% 80% at 50% 50%,
    rgba(16, 17, 18, 0.10) 0%,
    rgba(16, 17, 18, 0.45) 70%,
    rgba(16, 17, 18, 0.70) 100%);
}

.showreel-slide[data-mode="collage"] .collage-plane::after { display: none; }

.showreel-slide:nth-of-type(3) .collage-plane > .os-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.showreel-slide:nth-of-type(3) .collage-plane::before {
  background: radial-gradient(120% 80% at 50% 50%,
    rgba(16, 17, 18, 0.45) 0%,
    rgba(16, 17, 18, 0.62) 70%,
    rgba(16, 17, 18, 0.78) 100%);
  z-index: 1;
}

.showreel-slide:nth-of-type(3) .fragments { z-index: 2; }
.showreel-slide:nth-of-type(3) .showreel-copy { position: relative; z-index: 2; }

#utility-footer { min-height: 0; }

.util-wordmark svg {
  display: block;
  width: min(100%, 880px);
  height: auto;

  margin-inline: auto;
  color: var(--ink);
}

.founder-cutout {
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
.founder-cutout img {
  aspect-ratio: auto;
  object-fit: contain;
  filter: none;
}

.showreel-slide:not([data-active="true"]):not([data-prev="true"]) {
  opacity: 0;
  visibility: hidden;
}

/* Backed by - exactly three at a time.
   This used to be an endless marquee of the same five logos looping past. Now the row is
   three even thirds, stepped by bare chevrons, so no logo ever recurs and the
   spacing is the column itself rather than a fixed gap that left the wide logos crowding
   their neighbours. */
.partners .backers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.25rem, 1.5vw, 1rem);
  max-width: 900px;
  margin: 0 auto;
}
.partners .backers-view {
  flex: 1 1 auto;
  overflow: hidden;
}
.partners .backers-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.partners .backers-track > li {
  /* one third each, so three sit evenly whatever their own widths happen to be */
  flex: 0 0 33.3333%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(0.4rem, 1.4vw, 1.1rem);
}

/* Bare chevrons - no button chrome. The site's .round pill was too much furniture for a
   logo strip, so these are just the marks, weighted back so they read as controls rather
   than content. They never disable: the strip loops, so there is no dead end to signal. */
.partners .backers-arrow {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0 clamp(0.35rem, 1.2vw, 0.9rem);
  font: inherit;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1;
  color: var(--ink);
  opacity: 0.38;
  cursor: pointer;
  transition: opacity 200ms ease, transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .partners .backers-arrow:hover { opacity: 0.92; }
}
.partners .backers-arrow:active { transform: scale(0.9); opacity: 1; }

/* Unchanged from the marquee, deliberately: black by default, its own colours on hover. */
.partners .backers img {
  height: 58px;
  width: auto;
  max-width: 100%;
  opacity: 0.78;

  filter: grayscale(1) brightness(0.45) contrast(1.1);
  transition: opacity 300ms ease, filter 300ms ease;
}
.partners .backers img:hover {
  opacity: 1;
  filter: none;
}

.partners .eyebrow { display: block; margin-bottom: 30px; }

@media (max-width: 720px) {
  .partners .backers img { height: 40px; }
  .partners .backers-track > li { padding: 0 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .partners .backers-track { transition: none; }
}

#signup-split { min-height: 0; }

.founder-name {
  font-family: 'Kalam', 'Segoe Print', cursive;
  font-weight: 700;
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.founder-quote footer { margin-top: 1.5rem; gap: 0.75rem; }

#why-us {
  --bg:          #e8dfd5;   
  --paper:       #f7f4ef;
  --raised:      #ffffff;
  --ink:         #17140f;
  --ink-soft:    #323232;
  --ink-muted:   #6b6357;
  --edge:        #d5cabb;
  --warn-bg:     #f6e7e0;
  --warn-edge:   #cf8d76;
  --warn-ink:    #8f3620;
  --ok-bg:       #e7f2ea;
  --ok-edge:     #9dc4a6;
  --ok-ink:      #1d6b39;
  --wa:          #1d6b39;   
  --wa-bg:       #e9f3ec;
  --cta:         #101112;
  --pill:        999px;
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  box-sizing: border-box;
}
#why-us *, #why-us *::before, #why-us *::after { box-sizing: border-box; }

.dr-section {
  background: var(--bg);
  color: var(--ink);
  font-family: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.dr-flat-more { color: var(--ink); font-weight: 500; }

html:not(.dr-js) #why-us .dr-stage { display: none; }
html:not(.dr-js) #why-us .dr-flat  { display: block; }
html:not(.dr-js) #why-us .dr-track { height: auto !important; }

#why-us .dr-track { position: relative; }

#why-us .dr-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: clamp(20px, 3vh, 40px) clamp(18px, 3vw, 52px) clamp(16px, 2.4vh, 34px);
}

#why-us .dr-ruler { position: relative; z-index: 6; }

#why-us .dr-ruler-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 10px;
}

#why-us .dr-eyebrow {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

#why-us .dr-days {
  font-family: var(--mono);
  font-size: clamp(0.75rem, 1vw, 0.875rem);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#why-us .dr-days b {
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.02em;
}
#why-us .dr-days.is-good b { color: var(--ok-ink); }

#why-us .dr-rule {
  position: relative;
  height: 3px;
  border-radius: 2px;
  background: rgba(23,20,15,0.13);
}
#why-us .dr-ticks {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  justify-content: space-between;
}
#why-us .dr-tick {
  width: 1px;
  height: 7px;
  background: var(--edge);
}
#why-us .dr-tick[data-major] { height: 13px; background: var(--ink); opacity: 0.55; }

#why-us .dr-nums {
  position: absolute;
  inset: 15px 0 auto 0;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.625rem;
  color: var(--ink-muted);
}

#why-us .dr-head {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 0;
  will-change: transform;
}
#why-us .dr-head::after {
  content: "";
  position: absolute;
  top: -5px; left: -5px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ink);
}
#why-us .dr-head.is-good, #why-us .dr-head.is-good::after { background: var(--ok-ink); }

#why-us .dr-burn {
  position: absolute;
  top: 0; left: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--ink);
  opacity: 0.9;
  transform-origin: 0 50%;
  will-change: transform;
}

#why-us .dr-win {
  position: absolute;
  top: 7px; left: 0;
  height: 4px;
  width: 0;
  border-radius: 2px;
  background: var(--ok-ink);
  opacity: 0;
  will-change: width, opacity;
}
#why-us .dr-win::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 9px);
  top: -4px;
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ok-ink);
  white-space: nowrap;
}

#why-us .dr-more {
  position: absolute;
  left: 50%; top: calc(50% + 30px);
  transform: translate(-50%, 0);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(23,20,15,0.34);
  padding-bottom: 2px;
  z-index: 18;
  will-change: opacity, transform;
}
#why-us .dr-more:hover { border-bottom-color: var(--ink); }

#why-us .dr-head-row {
  
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: clamp(70px, 12vh, 150px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 6;
}
#why-us .dr-titles {
  position: relative;
  width: 100%;
  min-height: clamp(40px, 6.4vh, 74px);
}
#why-us .dr-title {
  position: absolute;
  inset: 0;
  margin: 0 auto;
  font-size: clamp(1.35rem, 2.9vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.032em;
  line-height: 1.1;
  max-width: 26ch;
  color: var(--ink);
  pointer-events: none;
  will-change: opacity, transform;
}
#why-us .dr-note {
  margin: clamp(4px, 0.9vh, 10px) auto 0;
  font-size: clamp(0.8125rem, 1.02vw, 0.9688rem);
  color: var(--ink-muted);
  max-width: 54ch;
  min-height: 1.4em;
  will-change: opacity, transform;
}

#why-us .dr-note:empty { display: none; }

#why-us .dr-title .w { display: inline-block; will-change: transform, opacity; }

#why-us .dr-beatno {
  position: absolute;
  top: 0; right: 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
}

#why-us .dr-field {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
}
#why-us .dr-scene {
  position: relative;
  width: min(1180px, 94vw);
  height: min(58vh, 580px);
  
}

#why-us .dr-machine {
  position: absolute;
  top: 50%;
  margin: 0;
  color: var(--ink);
  will-change: transform, opacity;
}
.dr-machine svg,
#why-us .dr-machine img {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
#why-us .dr-machine.is-drawn { width: clamp(230px, 30vw, 430px); }

#why-us .dr-machine.is-photo { width: clamp(210px, 27vw, 400px); }
#why-us .dr-machine.is-photo.is-small { width: clamp(122px, 15.5vw, 230px); }

#why-us .dr-machine figcaption {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
  margin-top: 6px;
}

#why-us .dr-hub {
  position: absolute;
  left: 50%; top: 50%;
  width: clamp(96px, 11vw, 134px);
  aspect-ratio: 1;
  margin: 0;
  border-radius: 50%;
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--edge), 0 14px 40px -22px rgba(0,0,0,0.45);
  display: grid;
  place-items: center;
  text-align: center;
  z-index: 14;                 
  will-change: transform, opacity;
}
#why-us .dr-hub span {
  font-size: 0.5938rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.3;
}
#why-us .dr-hub small {
  display: block;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.5625rem;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--ink-muted);
  margin-top: 3px;
}
#why-us .dr-hub-ring {
  position: absolute;
  left: 50%; top: 50%;
  border-radius: 50%;
  border: 1px dashed rgba(23,20,15,0.28);
  z-index: 2;
  will-change: transform, opacity;
  pointer-events: none;
}

#why-us .dr-wire {
  position: absolute;
  top: 0;
  width: 1px;
  height: 0;
  background: linear-gradient(rgba(23,20,15,0), rgba(23,20,15,.8));
  transform: translateX(-50%);
  pointer-events: none;
  will-change: height, opacity;
}

#why-us .dr-chan {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 6;
  will-change: transform, opacity;
}

#why-us .dr-mail {
  width: 178px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--edge), 0 10px 22px -16px rgba(0,0,0,0.4);
  display: grid;
  grid-template-columns: 17px 1fr;
  gap: 9px;
  align-items: center;
}
#why-us .dr-mail .g { color: var(--ink-soft); }
#why-us .dr-mail .g svg { width: 17px; height: 17px; display: block; }
#why-us .dr-mail .bars { display: grid; gap: 4px; }
#why-us .dr-mail .bars i { display: block; height: 4px; border-radius: 2px;
                   background: rgba(23,20,15,.20); }
#why-us .dr-mail .bars i:last-child { width: 58%; background: rgba(23,20,15,.11); }
#why-us .dr-mail.is-dead { background: transparent;
                   box-shadow: inset 0 0 0 1px rgba(23,20,15,.18); }
#why-us .dr-mail.is-dead .bars i { background: rgba(23,20,15,.12); }

#why-us .dr-chat {
  width: 236px;
  border-radius: 12px;
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--edge), 0 16px 34px -22px rgba(0,0,0,0.42);
  overflow: hidden;
}
#why-us .dr-chat .top {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--wa-bg);
  box-shadow: inset 0 -1px 0 var(--ok-edge);
}
#why-us .dr-chat .top .g { width: 20px; height: 20px; color: var(--wa); flex: 0 0 auto; }
#why-us .dr-chat .top .g svg { width: 20px; height: 20px; display: block; }
#why-us .dr-chat .top b { font-size: 0.6875rem; font-weight: 700; color: var(--ink); }
#why-us .dr-chat .top em { font-family: var(--mono); font-size: 0.5625rem; font-style: normal;
                   color: var(--ink-muted); margin-left: auto; }
#why-us .dr-chat .thread {
  padding: 9px 10px 11px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
#why-us .dr-chat .msg {
  width: 74%;
  padding: 6px 8px;
  border-radius: 9px 9px 9px 3px;
  background: #eef1f4;
}
#why-us .dr-chat .msg.out { align-self: flex-end; border-radius: 9px 9px 3px 9px;
                    background: var(--wa-bg); }
#why-us .dr-chat .msg i { display: block; width: 100%; height: 4px; border-radius: 2px;
                  background: rgba(23,20,15,.20); }
#why-us .dr-chat .msg i + i { margin-top: 4px; width: 62%; }

#why-us .dr-chat .msg.empty { background: transparent;
                      box-shadow: inset 0 0 0 1px rgba(23,20,15,.16); }
#why-us .dr-chat .msg.empty i { background: rgba(23,20,15,.12); width: 34%; }

#why-us .dr-phone {
  position: relative;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--edge), 0 8px 18px -12px rgba(0,0,0,0.4);
  display: grid; place-items: center;
  color: #2b5573;
}
#why-us .dr-phone svg { width: 19px; height: 19px; display: block; }
#why-us .dr-phone.is-missed { background: var(--warn-bg); color: var(--warn-ink);
                      box-shadow: inset 0 0 0 1px var(--warn-edge); }
#why-us .dr-phone b {
  position: absolute; top: -5px; right: -8px;
  font-family: var(--mono); font-size: 0.5625rem; font-weight: 700;
  background: var(--warn-ink); color: #fff;
  border-radius: var(--pill); padding: 1px 5px;
}

#why-us .dr-notif {
  position: absolute;
  left: 50%; top: 50%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 7px;
  border-radius: var(--pill);
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--edge), 0 8px 18px -12px rgba(0,0,0,0.38);
  font-family: var(--mono);
  font-size: 0.5938rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  white-space: nowrap;
  z-index: 9;
  will-change: transform, opacity;
}
#why-us .dr-notif::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--warn-ink);
  flex: 0 0 auto;
}
#why-us .dr-notif.is-quiet { color: var(--ink-muted); }
#why-us .dr-notif.is-quiet::before { background: var(--ink-muted); opacity: .5; }

#why-us .dr-doc {
  position: absolute; left: 50%; top: 50%;
  width: 218px;
  padding: 11px 12px 12px;
  border-radius: 10px;
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--edge), 0 18px 38px -26px rgba(0,0,0,0.45);
  z-index: 8;
  will-change: transform, opacity;
}
#why-us .dr-doc h4 {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 7px;
}
#why-us .dr-doc h4 .g { color: var(--ink-muted); flex: 0 0 auto; }
#why-us .dr-doc h4 .g svg { width: 15px; height: 15px; display: block; }
#why-us .dr-doc .lines { display: grid; gap: 5px; margin-bottom: 10px; }
#why-us .dr-doc .lines i { display: block; height: 4px; border-radius: 2px;
                   background: rgba(23,20,15,.15); }
#why-us .dr-doc .lines i:nth-child(2) { width: 82%; }
#why-us .dr-doc .lines i:nth-child(3) { width: 54%; }
#why-us .dr-doc .stamp {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 0.5625rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  border-radius: var(--pill); padding: 3px 8px;
}
#why-us .dr-doc .stamp::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor;
}
#why-us .dr-doc .stamp.ok { background: var(--ok-bg);   color: var(--ok-ink); }
#why-us .dr-doc .stamp.no { background: var(--warn-bg); color: var(--warn-ink); }
#why-us .dr-doc .stamp.missing { background: transparent; color: var(--ink-muted);
                         box-shadow: inset 0 0 0 1px var(--edge); }

#why-us .dr-size {
  position: absolute;
  display: flex;
  align-items: center;
  transform: translateY(-50%);
  pointer-events: none;
  white-space: nowrap;
}
#why-us .dr-size::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(23,20,15,0.72);
  transform: translate(-50%, -50%);
}
#why-us .dr-size i {
  display: block;
  width: var(--lead, 100px);
  height: 1px;
  background: rgba(23,20,15,0.5);
  flex: 0 0 auto;
}
#why-us .dr-size b {
  font-family: var(--mono);
  font-size: clamp(0.6875rem, 0.95vw, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink);
  margin-left: 9px;
}

#why-us .dr-hub .word, #why-us .dr-hub .ico { grid-area: 1 / 1; will-change: opacity, transform; }
#why-us .dr-hub .ico { display: grid; place-items: center; color: var(--ink); width: 100%; }
#why-us .dr-hub .ico svg { width: 42%; min-width: 34px; height: auto; display: block; }

#why-us .dr-siren {
  position: absolute;
  left: 50%; top: 50%;
  width: clamp(52px, 5.4vw, 76px);
  color: var(--warn-ink);
  z-index: 12;
  will-change: transform, opacity, color;
}
#why-us .dr-siren svg { width: 100%; height: auto; display: block; }
#why-us .dr-siren .rays { will-change: opacity; }

#why-us .dr-flag {
  position: absolute;
  left: 50%; top: 50%;
  white-space: nowrap;
  font-size: clamp(1rem, 1.7vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--warn-ink);
  will-change: transform, opacity;
}
#why-us .dr-flag::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 11px;
  vertical-align: 0.14em;
}

#why-us .dr-line {
  position: absolute;
  left: 50%; top: 50%;
  height: 4px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(23,20,15,.06), 0 10px 30px -12px rgba(0,0,0,.35);
  z-index: 17;
  will-change: width, opacity;
}
#why-us .dr-logo-wrap {
  position: absolute;
  left: 50%; top: 50%;
  width: clamp(220px, 26vw, 360px);
  height: 0;
  overflow: hidden;
  transform: translate(-50%, -100%);
  display: flex;
  align-items: flex-end;
  z-index: 18;
  will-change: height, opacity;
}
#why-us .dr-logo-wrap img { width: 100%; height: auto; display: block; }

#why-us .dr-solve {
  position: absolute;
  left: 50%; top: 50%;
  width: min(560px, 84%);
  transform: translate(-50%, -50%);
  background: var(--raised);
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px var(--edge), 0 30px 70px -40px rgba(0,0,0,0.5);
  padding: clamp(18px, 2.4vw, 30px);
  z-index: 16;
  will-change: transform, opacity;
}
#why-us .dr-solve h3 {
  margin: 0 0 4px;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}
#why-us .dr-solve p { margin: 0; font-size: 0.875rem; color: var(--ink-muted); }
#why-us .dr-solve .rows { margin-top: 14px; display: grid; gap: 0; }
#why-us .dr-solve .row {
  display: grid;
  grid-template-columns: 18px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid rgba(0,0,0,0.09);
  font-size: 0.8125rem;
}
#why-us .dr-solve .row:first-child { border-top: 0; }
#why-us .dr-solve .row b { font-weight: 500; }
#why-us .dr-solve .row span.k { font-family: var(--mono); font-size: 0.6875rem; color: var(--ink-muted); }
#why-us .dr-solve .row span.v { font-family: var(--mono); font-size: 0.8125rem; }
#why-us .dr-solve .row .ok {
  font-family: var(--mono); font-size: 0.5625rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--ok-bg); color: var(--ok-ink);
  border-radius: var(--pill); padding: 2px 7px;
}
#why-us .dr-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ok-bg); color: var(--ok-ink);
  border-radius: var(--pill);
  box-shadow: inset 0 0 0 1px var(--ok-edge);
  padding: 4px 11px;
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}

#why-us .dr-flat { display: none; padding: 8vh clamp(18px, 4vw, 48px); }
#why-us .dr-flat h2 { font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 500; letter-spacing: -0.03em; }
#why-us .dr-flat ol { margin: 1.4rem 0 0; padding-left: 1.1rem; max-width: 62ch; }
#why-us .dr-flat li { margin: 0 0 0.7rem; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-soft); }
#why-us .dr-flat li b { color: var(--ink); }

html.dr-static #why-us .dr-track { height: auto !important; }
html.dr-static #why-us .dr-stage { display: none; }
html.dr-static #why-us .dr-flat { display: block; }
html.dr-static #why-us .runway { display: none; }

@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  #why-us .dr-track { height: auto !important; }
  #why-us .dr-stage { display: none; }
  #why-us .dr-flat { display: block; }
  #why-us .runway { display: none; }
}


/* ============================================================
   BACKED BY - ARROWS REMOVED, ALL FIVE SHOWN
   ------------------------------------------------------------
   Appended rather than edited in place, so the carousel rules above are
   left exactly as they were and nothing of that work is lost. Equal
   specificity plus later position is enough to win; the only !important
   is on transform, which has to beat the paging script's inline style.

   Why the arrows existed: each li was flex 0 0 33.3333%, a three-per-page
   strip, so five logos were 1.66 pages and two always sat off-screen.

   Measured on staging, strip 900px wide:
     five logos      113 + 107 + 111 + 201 + 98 = 629px
     the two arrows plus their gaps              = 112px
   Dropping the arrows leaves 900px for 629px of logo, so all five fit at
   full height with about 68px between them and there is nothing left to
   page through.
   ============================================================ */
.partners .backers-arrow { display: none; }

.partners .backers-view {
  overflow: visible;
  width: 100%;
}

.partners .backers-track {
  transform: none !important;
  width: 100%;
  justify-content: space-between;
  gap: 20px;
}

.partners .backers-track > li {
  flex: 0 0 auto;
  padding: 0;
  width: auto;
}

/* five across stops fitting on a narrow screen: wrap, never clip or scroll */
@media (max-width: 960px) {
  .partners .backers-track {
    flex-wrap: wrap;
    justify-content: center;
    gap: 26px 40px;
  }
}

/* ============================================================
   BACKED BY - LABEL SIZE
   ------------------------------------------------------------
   Chosen treatment: option 03 from the ladder, set in capitals.

   The label was already uppercase, 700, and full ink from the shared
   .eyebrow rule, so only two things actually change:

     font-size       0.75rem -> 1.4rem   (12px -> 22px)
     letter-spacing  0.1em   -> 0.05em

   The tracking has to come DOWN as the size goes up. 0.1em is right for a
   12px label but at 22px it reads airy and disconnected; capitals still need
   positive tracking though, so it does not go to zero or negative - the
   sentence-case version of this step used -0.02em, which would have cramped
   the caps badly.

   Scoped to .partners so the shared .eyebrow used by the other section heads
   ("FIELD JOURNAL", "MOST RENTED") is untouched. Centring is already handled
   by .partners { text-align: center }.

   THEN SOFTENED, because at 700 in pure black it read as written ON the page
   rather than in it and took the whole section's attention:

     font-weight  700       -> 500
     color        --ink     -> #5c5347   (a warm secondary already used in
                                          this project, biased toward the warm
                                          #e8dfd5 ground rather than a neutral
                                          grey, which goes dead on warm paper)
     letter-spacing 0.05em  -> 0.06em    (a lighter weight can carry slightly
                                          more air without falling apart)

   The SIZE is deliberately left alone - the size was chosen and is not what
   made it loud. Weight and contrast were. #5c5347 on #e8dfd5 measures 5.73:1,
   so it is still comfortably legible; pure black was about 15:1, which is
   heading emphasis on a label that is meant to introduce, not announce.
   ============================================================ */
.partners .eyebrow {
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.1;
  color: #5c5347;
}

@media (max-width: 720px) {
  .partners .eyebrow { font-size: 1.15rem; }
}


/* ===================================================================
   RAIL CARD — three sizes, the way to the rest, and the depth behind it
   ===================================================================
   A card shows three sizes instead of five (company, 23 Aug 2026). Two
   additions carry that: a link to the full set, and the supplier count that
   makes a short list read as a sample rather than the whole inventory. */

/* Not a chip. It sits in the chip row but takes the whole line, so it can
   never be mistaken for a fourth size you could press — no pill, no fill,
   just ink and an arrow, the same grammar as "Rent this" below it. */
.rent-more {
  flex: 0 0 100%;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color 200ms ease;
}
.rent-more .arrow { display: inline-block; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .rent-more:hover { color: var(--ink); }
  .rent-more:hover .arrow { transform: translateX(3px); }
}

/* Proof, not a price. .rent-body runs on a 1rem gap, which reads as a new
   thought — this line belongs to the number above it, so it is pulled back
   under the price and kept in the muted voice. The SAR figure stays the only
   loud type on the card. */
.rent-supply {
  display: block;
  margin-top: -0.62rem;
  color: var(--ink-muted);
  font-size: 0.8125rem;
  line-height: 1.3;
}
.rent-supply b { font-weight: 600; color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .rent-more .arrow { transition-property: color; }
  .rent-more:hover .arrow { transform: none; }
}


/* ==========================================================================
   MOBILE FIXES - home-v4 at 390px                                2026-08-26
   Appended, not regenerated (see DO_NOT_PASTE.txt).

   Four defects, all measured in a 390px viewport rather than guessed:

   1. THE MENU BUTTON DID NOTHING. .navbtn toggles aria-expanded and puts
      .nav-open on <html>, and this stylesheet had no rule for .nav-open
      anywhere - so the button was a dead control. Opening it produced no
      navigation at all.

   2. NO LOGO ON MOBILE. The wordmark is .nv--logo, a child of .topnav, and
      .topnav was display:none below 60rem - so hiding the nav took the logo
      with it.

   3. GET STARTED WAS AN EMPTY CIRCLE. The rule below collapses .hdr-profile
      to an icon on mobile by hiding its <span>. That works on pages whose
      button carries an SVG; home-v4's button is text-only, so it rendered as
      a blank 24px blob.

   4. THE THREE macOS SHOTS COLLIDED. .osw-a/b/c are placed by percentage for
      a wide viewport; at 390 they landed on the headline and over the CTA.
   ========================================================================== */

@media (max-width: 60rem) {

  /* --- 2. the bar keeps the logo; only the four groups go behind the button */
  .floating-header > .topnav {
    display: flex;
    justify-content: center;
    min-width: 0;
  }
  .topnav > .nvi { display: none; }
  .topnav > .nv--logo { display: inline-flex; }

  /* --- 3. no icon to fall back to, so the label stays */
  .floating-header > .hdr-profile span { display: inline; }
  .floating-header > .hdr-profile {
    padding: 0.5rem 0.85rem;
    font-size: 0.8125rem;
    white-space: nowrap;
  }

  /* The three social icons are the widest thing in the bar (243px of it) and
     they are repeated in the footer. Dropping them here is what buys room for
     the logo and a readable CTA; language and menu stay. */
  .hdr-ctl .header-social a { display: none; }

  /* --- 4. decorative, and unplaceable at this width without covering the
     headline. The map, the headline and the CTA carry the slide alone. */
  .osw { display: none !important; }

  /* --- 1. the menu, opened -------------------------------------------------
     A sheet under the bar. The bar itself is lifted above it so the button
     that closes it is always reachable, even if the bar's height changes. */
  .floating-header { z-index: 70; }

  html.nav-open .floating-header > .topnav {
    position: fixed;
    inset: 66px 0 0 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 16px 18px 32px;
    background: var(--bg);
    border-top: 1px solid var(--hairline);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* keeps a flick at the end of the sheet from scrolling the page behind */
    overscroll-behavior: contain;
  }
  /* the logo is already in the bar above; a second one in the sheet is noise */
  html.nav-open .topnav > .nv--logo { display: none; }
  html.nav-open .topnav > .nvi { display: block; }
  html.nav-open .topnav .nv {
    width: 100%;
    justify-content: space-between;
    padding: 0.7rem 0.25rem;
    font-size: 1rem;
  }
  html.nav-open .topnav .nv:hover { background: transparent; }

  /* A hover popover cannot open on a touch screen, and tapping the group
     header follows its link instead. So the rows sit inline and always open -
     the sheet scrolls, which is the honest trade for no JavaScript. */
  html.nav-open .topnav .mm {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* 448px was the min-width - 58px wider than the screen. */
    min-width: 0;
    width: 100%;
    max-width: none;
    padding: 0 0 10px 12px;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  html.nav-open .topnav .mm-in { display: block; padding: 0; }
  html.nav-open .topnav .mm-list { display: block; }
  html.nav-open .topnav .mm-row { padding: 0.55rem 0; }
  html.nav-open .topnav .mm-feat { margin-top: 0.5rem; }

  /* nav-open sheet ink.
     .floating-header sets colour:#fff for the dark hero it normally floats
     over, and .nv inherits it. Inside the sheet that ground is cream, so the
     group labels came out white-on-cream - measured unreadable. The sheet
     restates ink for itself and its links. */
  html.nav-open .floating-header > .topnav { color: var(--ink); }
  html.nav-open .topnav .nv,
  html.nav-open .topnav .nv span { color: var(--ink); }
  html.nav-open .topnav .nv svg { stroke: var(--ink-muted); }

  /* the page behind must not scroll under an open sheet */
  html.nav-open, html.nav-open body { overflow: hidden; }
}


/* ==========================================================================
   WHY-US ON MOBILE                                               2026-08-26
   The pinned scroll story was switched off below 900px: a media query hid
   .dr-stage and showed the flat list instead, and whyus.js bailed out at the
   same width. Both now run on a phone.

   Kept as fallbacks, deliberately:
     - prefers-reduced-motion still gets the flat list
     - html.dr-static still gets the flat list (the review/debug switch)
     - html:not(.dr-js) still gets it, so a failed script degrades correctly

   The track height is set inline-important by the script, which is the only
   thing that knows how many beats there are; the rule it has to beat is the
   `height:auto !important` that holds the flat version up.
   ========================================================================== */

@media (max-width: 900px) {
  html.dr-js:not(.dr-static) #why-us .dr-stage { display: grid; }
  html.dr-js:not(.dr-static) #why-us .dr-flat { display: none; }
  html.dr-js:not(.dr-static) #why-us .runway { display: block; }

  /* the stage is a pinned 100vh grid; on a phone the ruler needs less of it
     so the scene keeps room to read */
  html.dr-js:not(.dr-static) #why-us .dr-stage {
    padding: 14px 16px 18px;
  }
  html.dr-js:not(.dr-static) #why-us .dr-scene {
    width: 100%;
    height: min(62vh, 520px);
  }
}

/* a stated preference for less motion wins over all of the above */
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  html.dr-js #why-us .dr-stage { display: none; }
  html.dr-js #why-us .dr-flat { display: block; }
  html.dr-js #why-us .runway { display: none; }
}

/* ==========================================================================
   ARABIC FOUNDER QUOTE - ACCENT RULE SIDE                        2026-08-26
   Appended, not regenerated (see DO_NOT_PASTE.txt).

   .founder-quote is a real <blockquote>, so it inherits Webflow's built-in
   `border-left: 5px solid #e2e2e2`. That is a PHYSICAL border, so in Arabic
   the accent rule sat on the left - the end of the line - instead of leading
   it on the right. Measured: border-left 4.66667px rgb(226,226,226),
   border-right 0, identical in both locales.

   The head field already carries an attempt at this:
       html[lang="ar"] body .founder-quote::before{left:auto;right:0;...}
   but the accent is not a pseudo-element - computed `content` on ::before is
   `none` - so that rule has never had anything to act on. Left in place; it
   is harmless and belongs to another session's block.
   ========================================================================== */
html[lang="ar"] body .founder-quote {
  border-inline-start: 4.66667px solid rgb(226, 226, 226);
  border-left-width: 0;                  /* drop Webflow's physical edge */
}

/* ==========================================================================
   ARABIC FOUNDER QUOTE - OPTICAL SIZE                            2026-08-26
   Appended, not regenerated (see DO_NOT_PASTE.txt).

   Fixing the wrapping was not enough. Side by side at 390px the Arabic pull
   quote read as a weak caption next to the English one, because both are set
   at the same computed 21.6px and Arabic ink sits far smaller than Latin at
   the same px - the same reason the nav was already bumped 15 -> 17 in the
   head block. The Latin scale is clamp(1.35rem, 2.6vw, 2.4rem); this is that
   scale x1.30, which lands on 28px where the Latin lands on 21.6px and holds
   the same ratio all the way up.

   Leading comes down slightly from the inherited 1.6 because the type is now
   bigger; Arabic still wants more air than the Latin 1.24.
   ========================================================================== */
html[lang="ar"] body .founder-quote p {
  font-size: clamp(1.75rem, 3.4vw, 3.1rem);
  line-height: 1.5;
}

/* ==========================================================================
   ARABIC FOUNDER QUOTE - STACK IT ON A PHONE                     2026-08-26
   Appended, not regenerated (see DO_NOT_PASTE.txt).

   Lives here, immediately after the type rule above, because the two are one
   fix. They were previously split across v4mobile.css and this file, and a
   phone that held a stale copy of one showed half the fix: the corrected
   larger Arabic type inside the OLD two-column phone layout, i.e. 28px words
   stacked one per line in a 110px column. Worse than the original bug.

   The head field's Arabic block mirrors the founder layout with NO media
   query, so it applies on a phone too:

     html[lang="ar"] body .founder            { grid-template-columns:1fr 352px }
     html[lang="ar"] body .founder>.founder-quote { grid-column:1; grid-row:1 }
     html[lang="ar"] body .founder>.founder-shot  { grid-column:2; grid-row:1 }

   At 390px the fixed 352px photo track plus the 24px gap leaves the quote
   column ~110px, and 352+24+110 overflows the 375px stage - which under RTL
   spills LEFT, clipping the photograph off the side of the screen. Exactly
   what Hisham photographed.

   Resetting grid-template-columns alone is NOT enough: the explicit
   grid-column on each child creates the implicit second track on its own, so
   the children have to be reset too.

   !important because this has now failed twice on a real device. The rule
   only has to beat a no-media-query declaration of the same specificity, and
   this removes any dependence on stylesheet order or on which file a phone
   happens to have cached.
   ========================================================================== */
@media (max-width: 900px) {
  html[lang="ar"] body .founder {
    grid-template-columns: 1fr !important;
  }
  html[lang="ar"] body .founder > .founder-quote,
  html[lang="ar"] body .founder > .founder-shot {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

/* ==========================================================================
   BACKED BY - PLUG AND PLAY                                      2026-08-26
   Appended, not regenerated. NOTE: the Backed By carousel exists ONLY in the
   deployed artefacts - running make_deploy.py reverts the whole strip to the
   old marquee. See DO_NOT_PASTE.txt and the asset-host notes.

   The sixth backer needs its own size and its own tone. Neither is a
   preference; both were measured.

   SIZE. The supplied file was 144x40 with 38% of that height as empty
   padding - the real ink is 132 x 24.8, a ratio of 5.26, so the artwork was
   re-cropped to its ink box (backer-plug-and-play.svg). Dropped in at the
   shared height:58px it renders 305px wide, which puts the row at 934px
   inside a 900px strip - it overflows and the gaps go negative.

   And height is the wrong thing to match anyway. Every other logo is a
   LOCKUP: its 58px box holds a symbol plus a line or two of type, so the
   actual letters are only ~16-18px tall. Plug and Play is a bare wordmark,
   so its box height IS its cap height. Matching the box would have made its
   letters twice the size of everyone else's. 22px matches the CAP HEIGHT of
   the type in the other marks, which is what the eye actually compares.
   Row is then 745px in 900px, ~31px between logos, nothing clipped.

   TONE. Sampled ink luminance of the five existing logos averages ~120 on
   0-255 with ~25% ink coverage. This artwork is #070e34 - luminance 15, and
   51% coverage, so twice the ink at a fraction of the brightness. The shared
   `brightness(0.45)` MULTIPLIES, so it drives 15 -> ~7 (solid black) while it
   lands the others near 54. The correction has to run the other way:
   brightness 3.4 lifts 15 -> ~51, alongside the rest. Opacity drops 0.78 ->
   0.72 to pay for the doubled ink coverage.

   Hover still reveals the true brand navy, exactly like the other five - but
   it needs its own rule, because the shared `img:hover` cannot beat the
   attribute selector above it.
   ========================================================================== */
.partners .backers img[src*="plug-and-play"] {
  height: 22px;
  filter: grayscale(1) brightness(3.4) contrast(1.05);
  opacity: 0.72;
}
.partners .backers img[src*="plug-and-play"]:hover {
  filter: none;
  opacity: 1;
}
/* the shared mobile rule drops 58px -> 40px; hold the same 0.69 ratio here */
@media (max-width: 720px) {
  .partners .backers img[src*="plug-and-play"] { height: 16px; }
}

/* ==========================================================================
   HEADER LOGO - NO PLATE BEHIND IT                               2026-08-26
   Appended, not regenerated (see DO_NOT_PASTE.txt).

   The wordmark sits in the middle of the nav row as .nv--logo, which is also
   a .nv - so it inherited the nav-link hover fill and lit up as a rounded
   grey plate behind the logo:

     line 1133:  .nv:hover, .nvi:focus-within .nv
                 { background: color-mix(in srgb, currentColor 14%, transparent) }

   Over the #101112 hero that composites to about #1E1E1E - the exact plate in
   Hisham's screenshot.

   This was ALREADY the intent thirteen lines earlier:

     line 1118:  .nv--logo:hover { background: transparent }

   but both selectors carry one class plus one pseudo-class, so specificity
   ties and the LATER rule wins. That earlier line has therefore never had any
   effect. Being at the end of the file is what makes this one stick.

   Worth knowing WHY it looked permanent rather than momentary: .nv:hover is
   not wrapped in `@media (hover: hover)` the way `.header-social a:hover` on
   line 158 is, so on a touch screen the hover state latches after a tap and
   the plate simply stays there.

   The logo keeps its feedback - line 1119 already fades the mark to 0.8 on
   hover, which is the right signal for a brand mark. A logo is not a nav
   item; it should not wear a button.
   ========================================================================== */
.nv--logo:hover,
.nv--logo:focus,
.nv--logo:focus-visible,
.nv--logo:active,
.nvi:focus-within .nv--logo {
  background: transparent;
}

/* ============================================================================
   SIGN-IN MODAL, ARABIC: mirror the photo                        2026-08-27

   The card is one column with the form pinned to the inline-END and the photo
   as the card's background. In English that puts the form over the photo's
   out-of-focus left side and leaves the excavator arm visible on the right. In
   Arabic the form mirrors to the RIGHT - but the photo did not - so the form sat
   directly on top of the arm and the empty blurred half was wasted on the left.

   PANNING CANNOT FIX THIS. The arm is a fixed feature of the frame, so no
   background-position moves it to the other side; the image itself has to be
   mirrored. Measured before doing it, rather than assumed: per-column
   high-frequency energy is 45,488 on the right half against 8,872 on the left,
   so the sharp subject really is on the right.

   Two declarations, because a mirror alone is not enough:
     1. the flipped file, so the arm is on the left and the soft side on the right
     2. position 100% instead of 0%, so the SAME crop survives. `cover` on a
        1920x1072 photo in an 820x546 card scales to 978px wide and discards
        158px from the un-anchored edge. Mirroring while still anchoring left
        would reveal the strip English crops and crop the strip English shows -
        a different composition, not a mirror of it. Anchoring to the far edge
        of the flipped file reproduces the English framing exactly, mirrored.

   Keyed on the ID because --c-photo is declared on #lgm; a class-only selector
   would lose to it however many classes it carried.
   ========================================================================== */
html[dir="rtl"] #lgm,
html[lang="ar"] #lgm {
  --c-photo: url("https://assets.moedatech.net/lgm-panel-1920-rtl.jpg");
}
html[dir="rtl"] #lgm .lgm-card,
html[lang="ar"] #lgm .lgm-card {
  background-position: 100% 50%;
}

/* ----------------------------------------------------------------------------
   SIGN-IN MODAL, ARABIC: the phone controls read in English order

   Two separate faults, both from the row inheriting dir=rtl:

   1. The country button's CONTENTS mirrored. Measured paint order in Arabic was
      chevron | +966 | flag, against flag | +966 | chevron in English. Hisham:
      "just the inside of the button, not the whole" - so `direction: ltr` goes
      on the button, which reorders its three children and leaves the button
      itself where RTL put it, on the inline-end of the row.

   2. "+966" rendered as "966+". The plus is bidi-neutral, so in an RTL run it
      attaches to the wrong end of the digits. Setting the button LTR fixes the
      one in the button; the dropdown rows need their own rule because each row
      keeps its Arabic country name and must stay RTL - only the Latin dial-code
      run is isolated, not the row.

   The number field already ships dir="ltr", so digits already start from the
   left; the alignment is pinned here anyway so it cannot inherit `end` from a
   future change to the row.
   -------------------------------------------------------------------------- */
html[dir="rtl"] #lgm .lgm-ccb,
html[lang="ar"] #lgm .lgm-ccb {
  direction: ltr;
}
html[dir="rtl"] #lgm .lgm-ccs b,
html[lang="ar"] #lgm .lgm-ccs b {
  direction: ltr;
  unicode-bidi: isolate;
}
html[dir="rtl"] #lgm .lgm-inp,
html[lang="ar"] #lgm .lgm-inp {
  direction: ltr;
  text-align: left;
}

/* ----------------------------------------------------------------------------
   SIGN-IN MODAL: the country dropdown                            2026-08-27

   THE BUG. `.lgm-ccl` is `position: fixed` and the modal's JS gives it VIEWPORT
   coordinates (measured: top 480 / left 343 - exactly the button's viewport
   position). But those coordinates were being resolved against the CARD, so the
   list rendered 143px down and 310px across from where it belonged - precisely
   the card's own offset. Measured fallout in English: list at (653, 624) instead
   of (343, 480), and because it then overflowed a box with `overflow: auto` the
   card's scrollHeight jumped 537 -> 745 and the modal grew a scrollbar. In
   Arabic the same arithmetic pushed it outside the card, where `overflow`
   clipped it away completely - so the button looked dead.

   WHY THE OBVIOUS FIX FAILED, because it will be tempting to retry it. The card
   is a containing block for fixed descendants, and the cause is its entrance
   animation: a WAAPI animation on `transform` with `fill: both`. Overriding
   `transform: none !important` DOES win the computed value - getComputedStyle
   reported `none`, and so did translate/scale/rotate/perspective/filter/
   contain/will-change, every one of them - and the list STILL resolved against
   the card. A filling animation on transform keeps the containing block even
   when the resolved value is none. Do not go down that road again.

   THE FIX. Stop depending on the containing block at all. `.lgm-cc` is already
   `position: relative`, so the list is anchored to the BUTTON with absolute
   positioning and the JS's viewport coordinates are overridden. Logical
   properties, so it flips for Arabic with no second code path.

   `overflow: visible` on the card, only while the list is open, is what lets it
   escape. Safe because the card measures 537px against a 759px max-height, so
   it is not scrolling in the first place - checked before relying on it.

   Deliberately NOT reparenting the list to <body>, which would also fix the
   containing block: it lives inside `.lgm-cc`, and the modal's own
   click-outside handler almost certainly tests containment against that
   wrapper. Moving it would close the list the instant anyone clicked a country.
   -------------------------------------------------------------------------- */
#lgm .lgm-ccl {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  bottom: auto !important;
  inset-inline-start: 0 !important;
  inset-inline-end: auto !important;
  max-width: min(260px, 78vw);
}
#lgm .lgm-card:has(.lgm-ccl:not([hidden])) {
  overflow: visible !important;
}

/* ----------------------------------------------------------------------------
   COUNTRY-CODE LIST: no native scrollbar                          2026-08-28
   A 16px platform scrollbar was sitting inside a 260px dark panel and reading
   as a bright vertical bar (measured: offsetWidth - clientWidth = 16).

   Scrolling itself is untouched - wheel, trackpad, touch and keyboard all still
   work. The list keeps its affordance through the two chevrons at the top and
   bottom edges, which only now actually toggle; see the matching block in
   v4-arrows.js. Do not hide the bar without that, or the list loses every cue
   that there is more to see.
   -------------------------------------------------------------------------- */
#lgm .lgm-ccs {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* legacy Edge */
}
#lgm .lgm-ccs::-webkit-scrollbar { width: 0; height: 0; }

/* ----------------------------------------------------------------------------
   GEAR STRIP: kill the sideways scroll on home-v4                 2026-08-28
   The whole page could be dragged left/right, showing an empty gutter.

   CAUSE. The strip breaks out of its wrapper with
       .v4pit { width: 100vw; margin-left: calc(50% - 50vw); }
   and 100vw INCLUDES the vertical scrollbar. Measured at this width: 100vw is
   1440px while the content area is 1425px, so the strip is 15px too wide, and
   the centring calc() splits that into 8px off the left and 7px off the right -
   which is the horizontal scrollbar on every page position, and the "small
   space" visible once you scroll across.

   FIX. The breakout is not needed at all: the strip's wrapper (.w-embed) is a
   direct child of <body> and already measures the full 1425px with no padding.
   So width:auto simply fills it, edge to edge, with nothing to overflow.

   WHY IT IS OVERRIDDEN FROM HERE. The gear strip exists in exactly ONE place -
   home-v4's "Before </body>" field - with no hosted or local copy, and a past
   session already wiped it once. Editing it there also costs a publish. This
   override needs (0,2,2) to win because the strip injects its <style> inside
   the body, AFTER this head-linked file, so an equal-specificity rule loses.

   If the embed is ever moved inside a padded container, the strip will stop
   reaching the page edges - reinstate a breakout then, but base it on the
   scrollbar-free width, never on vw.
   -------------------------------------------------------------------------- */
html[data-wf-site] body .v4pit {
  width: auto !important;
  margin-inline: 0 !important;
  max-width: 100% !important;
}

/* ============================================================================
   OTP STEP: reconnect the animations the port left dangling        2026-08-28
   Hisham reported that v3's ring around the code boxes and the resend
   confirmation both stopped appearing in v4.

   Nothing was missing. Every keyframe, every element and every class-add
   survived the v3 -> v4 port - but FOUR of them were wired to names the other
   half never used, so they sat there doing nothing:

     1. JS puts `live` on the individual .otp cell (on focus);
        CSS listened on `.otps.live` - the CONTAINER. Never matched.
     2. JS adds `pop` to a cell on every digit typed;
        NO rule styles `.otp.pop` anywhere. v3's otpPop keyframes were dropped.
     3. JS adds `go` to #lgmSent on resend;
        CSS only knew `.lgm-sent.on`, so the element unhid at opacity 0 -
        present in the DOM, invisible on screen. This is the whole of the
        "resend does nothing" report.
     4. @keyframes lgmBurst travels to translate(var(--bx), var(--by)),
        but the markup sets `--a` (an ANGLE) on each of the 12 dots. Both
        customs resolved to their 0 fallback, so every dot would have burst
        to exactly where it started, even once 3 was fixed.

   Fixed entirely from here: these are all NEW selectors, so there is no
   specificity fight with the login's own <style> (which is inline in the body
   and would otherwise win ties against this head-linked file), and the page
   embed does not need reopening or republishing.

   Deliberately NOT touching the inline embed: the login markup and CSS live in
   home-v4's Code Embed, editing it costs a publish, and the shared publish
   button is not mine to press.

   Easings are written out rather than var(--ease-out), because that custom
   property is defined inside the embed and is not guaranteed to be in scope
   for a rule that arrives from this file.
   ========================================================================= */

/* --- 1. the active box: shine while it is the one being filled ----------- */
@keyframes v4otpLive {
  0%   { opacity: 0; transform: translateX(-60%); }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(60%); }
}
.otp.live .sweep { animation: v4otpLive 1100ms linear infinite; }

/* --- 2. each digit lands with a pop (v3's exact curve and duration) ------ */
@keyframes v4otpPop {
  0%   { transform: scale(0.4); opacity: 0.2; }
  100% { transform: scale(1);   opacity: 1; }
}
.otp.pop input { animation: v4otpPop 300ms cubic-bezier(.2, 1.5, .4, 1); }

/* --- 3. all four complete: one staggered sweep across the row ------------
   v3's payoff moment, and the reason the four boxes read as a single field
   rather than four inputs. Beats the .otp.live rule on specificity (0,4,0
   against 0,3,0), so the focused box stops looping and joins the row. */
@keyframes v4otpDone {
  0%   { opacity: 0; transform: translateX(-120%); }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(120%); }
}
.otps.done .otp .sweep {
  animation: v4otpDone 750ms cubic-bezier(.4, 0, .2, 1) both;
}
.otps.done .otp:nth-child(2) .sweep { animation-delay: 70ms; }
.otps.done .otp:nth-child(3) .sweep { animation-delay: 140ms; }
.otps.done .otp:nth-child(4) .sweep { animation-delay: 210ms; }

/* --- 4. resend: make the confirmation visible, and the dots actually fly --
   `.go` is the class the JS really adds; aliasing it here is what turns the
   invisible element into a visible one. The burst is re-expressed as
   rotate(angle) + translateX so it can use the `--a` the markup provides,
   instead of the --bx/--by that nothing ever sets. */
.lgm-sent.go { opacity: 1; }
@keyframes v4lgmBurst {
  0%   { opacity: 1; transform: rotate(var(--a, 0deg)) translateX(2px)  scale(1); }
  70%  { opacity: 0.85; }
  100% { opacity: 0; transform: rotate(var(--a, 0deg)) translateX(34px) scale(0.35); }
}
.lgm-sent.go .lgm-burst b {
  animation: v4lgmBurst 620ms cubic-bezier(.16, 1, .3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .otp.live .sweep,
  .otp.pop input,
  .otps.done .otp .sweep,
  .lgm-sent.go .lgm-burst b { animation: none; }
  .lgm-sent.go { opacity: 1; }   /* the message must still be readable */
}

/* --- 5. Arabic: the shine must travel with the reading direction ---------
   translateX is physical, so the sweeps above run left-to-right in both
   locales. In Arabic that fights the row: the stagger follows DOM order,
   which in RTL reads right-to-left, so the shine and the stagger would
   travel in opposite directions across the same four boxes.

   Only animation-name is overridden - duration, easing and iteration count
   still come from the base rules, so the two stay in step by construction.
   Specificity is (0,4,1) and (0,5,1), clearing the (0,3,0) and (0,4,0) above. */
@keyframes v4otpLiveRtl {
  0%   { opacity: 0; transform: translateX(60%); }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-60%); }
}
@keyframes v4otpDoneRtl {
  0%   { opacity: 0; transform: translateX(120%); }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-120%); }
}
html[dir="rtl"] .otp.live .sweep,
html[lang="ar"] .otp.live .sweep { animation-name: v4otpLiveRtl; }
html[dir="rtl"] .otps.done .otp .sweep,
html[lang="ar"] .otps.done .otp .sweep { animation-name: v4otpDoneRtl; }

/* ============================================================================
   SIGN-IN: THE DUMP TRUCK IS THE CODE FIELD                       2026-08-29
   Pairs with the block appended to v4-arrows.js (source: truck_prod.js).
   Everything is behind .tk-mode, which only the script adds, so this CSS on
   its own changes nothing and the two can be rolled back in either order.
   ========================================================================= */
#lgmS2{ position:relative; }
#lgm .lgm-card.tk-clip{ overflow:hidden !important; }
#lgmS2 .tkwrap{ position:relative; }
#lgmS2 .tk{
  position:absolute; z-index:0; pointer-events:none;
  user-select:none; -webkit-user-drag:none;
  /* NO will-change:transform. It promotes the machine to its own compositor
     layer at build() time, before the bitmap has decoded, and the layer was
     not always repainted when decoding finished - the artwork loaded, sized
     and positioned correctly and still painted nothing. Any forced repaint
     (even setting an outline) brought it back, which is the tell. The
     animation is one short transform on a small element; the compositor
     promotes it for the duration anyway. */
  /* Webflow's normalize sets img{max-width:100%}. That clamped the rig from
     372px to 296px and slid the curtain 15px off the digits - measured, not
     guessed: -73.19 + (0.19659 x 296) = -15.0 exactly. The prototype page has
     no such rule, which is precisely why this only showed up on the site. */
  max-width:none; height:auto;
}
#lgmOtp{ position:relative; z-index:2; }

/* The wrapper's geometry is written INLINE by build(): this bed sits 23% down
   the artwork, so the margins depend on the machine's height and cannot be the
   fixed percentages the trailer used. */
#lgmS2.tk-mode .otps{ grid-auto-columns:1fr; gap:0; width:auto; }
#lgmS2.tk-mode .otp{ width:auto; position:relative; }
#lgmS2.tk-mode .otp:not(:last-child){ box-shadow:inset -1px 0 0 rgb(20 24 28 / .28); }
/* The bed and the bays are the same tone in the artwork, so the code field
   needs its own plate and a defined edge - without them the digits have
   nothing to sit on and the field reads as painted onto the bodywork rather
   than slotted into the bed. font-size is set inline by build(), scaled to
   the bay. */
#lgmS2.tk-mode .otp{ background:#e6ebef; }
/* NOTHING OF THE CODE FIELD SHOWS BEFORE THE MACHINE LANDS.
   The plate and its edge used to paint the instant the step opened - a bare
   light strip with a hard line, floating with no machine behind it, for the
   whole flight in. The cells' own fade could not prevent it: they are painted
   by CSS before the script has created any animation, and the row's edge was
   never part of that fade at all. Both are held until .tk-ready, which the
   script adds as the bays come in. */
#lgmS2.tk-mode .otp{ opacity:0; }
#lgmS2.tk-mode.tk-ready .otp{ opacity:1; }
#lgmS2.tk-mode #lgmOtp{ border-radius:3px; }
#lgmS2.tk-mode.tk-ready #lgmOtp{
  box-shadow:inset 0 0 0 1px rgb(20 24 28 / .16), 0 1px 0 rgb(255 255 255 / .55);
}
#lgmS2.tk-mode .otp input{
  background:transparent; border:0; border-radius:0; height:100%;
  color:#14181c; caret-color:#14181c; font-weight:700;
}
#lgmS2.tk-mode .otp input:focus{ outline:none; }
#lgmS2.tk-mode .otp .sweep{ display:none; }

/* 2 - empty slots: four blank white panels read as finished, not waiting */
#lgmS2.tk-mode .otp:not(.filled)::before{
  content:''; position:absolute; left:50%; bottom:18%; width:46%; height:3px;
  transform:translateX(-50%); border-radius:2px;
  /* .32 at 2px was technically rendering and practically invisible on white
     bodywork - it has to read as an instruction across the room, not survive
     a code inspection */
  background:rgb(20 24 28 / .55); pointer-events:none;
}
/* 4 - active bay: the panel being typed into stops looking printed */
#lgmS2.tk-mode .otp.live{
  background:#fbfcfd;
  box-shadow:inset 0 2px 7px rgb(20 24 28 / .15), inset -1px 0 0 rgb(20 24 28 / .28);
}
#lgmS2.tk-mode .otp.live::after{
  content:''; position:absolute; left:16%; right:16%; bottom:7px; height:3px;
  border-radius:2px; background:#14181c; pointer-events:none;
}

/* a rejected code - inert until real verification exists */
#lgmS2.tk-bad .otp{ background:rgb(255 77 94 / .16); }
#lgmS2.tk-bad .otp input{ color:#7d0f1c; }

/* ---------------------------------------------------------------------------
   The design-preview disclaimer, removed from view.
   "Design preview - no code is sent and nothing is stored." was a placeholder
   for the panel's unfinished state and must not be seen by a real visitor.

   Hidden from here rather than deleted from the page, because deleting it
   means editing the Code Embed and publishing the page - and the publish
   button is shared with another session. display:none also takes it out of
   the accessibility tree, so a screen reader does not announce it either.

   NOT truck-related: a truck rollback restores this line to the page. The
   markup is still in the embed and should be deleted properly at the next
   deliberate publish.
   ------------------------------------------------------------------------ */
#lgm .lgm-note{ display:none; }

/* In Arabic the tick was mirroring to the right of the label along with the
   text direction. Reversing the button's own flex order puts it back on the
   left, where it is wanted, without touching the label or the icon markup. */
html[dir="rtl"] #lgm .lgm-go{ flex-direction:row-reverse; }

/* ============================================================================
   ARABIC LAYOUT FIXES                                              2026-08-30
   A SEPARATE appended block, deliberately not part of the truck block, so a
   truck rollback does not take these with it.

   v4.css is assembled as:  baseline + truck_prod.css + ar_fixes.css
   Rebuild with the same order or the file drifts.
   ========================================================================= */

/* The showreel control reads [line][dots] in English, with the dots on the
   right. Mirroring for Arabic swung the dots to the LEFT of the line, which
   is not wanted here: the dots should stay on the right, ahead of the timer
   line in Arabic reading order. Reversing the flex order restores that
   without touching the DOM, which belongs to the page embed. */
html[dir="rtl"] .showreel-progress{ flex-direction:row-reverse; }


/* =============================================================================
   EQUIPMENT CARD - THE WHOLE CARD IS THE LINK                       2026-09-07
   Company feedback: "Equipment card in home page should be clickable."

   Each card already ends in a "Rent this ->" link. Rather than wrap the card in
   a SECOND anchor - which would give every card two identical destinations in
   the tab order and read twice to a screen reader - that existing link grows an
   invisible overlay the size of the card. The photo, the machine name, the
   note, the price and every blank part of the card now follow it, to the same
   /en/home-v4-browse the link already pointed at.

   No markup changes, so this ships from the asset host with no Webflow paste
   and no publish.

   WHAT IS DELIBERATELY LEFT ALONE, because it is not navigation:
     .rent-sizes button   the three size chips - they change the price shown on
                          the card and must NOT take the visitor anywhere
     .rent-more           "All N sizes ->" - a real link, to its own place
   Both are lifted above the overlay so they keep receiving their own clicks.

   The rail scrolls with native scroll-snap and the two arrow buttons - there is
   no drag-to-scroll on it - so a full-card link cannot fire at the end of a
   swipe. Checked before shipping this.

   Nothing here re-introduces motion: the card's hover lift was removed earlier
   on purpose, so the pointer is the only new affordance.
   ============================================================================= */
.rent-card{position:relative;cursor:pointer}
.rent-card .rent-cta::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.rent-card .rent-sizes button,
.rent-card .rent-more{position:relative;z-index:2}

/* =============================================================================
   NO TEXT WRAPPING - 2026-09-13, company rule
   Headlines and the slide sub-lines sit on ONE line. They were capped by
   character-width limits (34ch on the slide sub-line, 26ch on the why-us
   titles, 46ch on the journal head) that pushed a last word like "site." onto a
   line of its own. Two why-us titles were also shortened in whyus.js.
   On narrow screens one line cannot fit, so there the lines are BALANCED
   instead: never a single orphan word on the second line.
   ============================================================================= */
@media (min-width: 900px) {
  .showreel-copy p { max-width: none; white-space: nowrap; }
  #why-us .dr-title { max-width: none; white-space: nowrap; }
  .posts-head { max-width: none; }
  .posts-head .section-title { white-space: nowrap; }
}
@media (max-width: 899px) {
  .showreel-copy p,
  #why-us .dr-title,
  .posts-head .section-title { text-wrap: balance; }
}

/* ==========================================================================
   2026-09-22  ·  THE MOBILE MENU COULD BE OPENED BUT NOT CLOSED
   Hisham, on a real phone: "if you open it you cannot close it again."
   Reproduced at 390px. Three separate faults, all in this file's own
   @media (max-width: 60rem) block above. Appended rather than edited in
   place, per the house rule.

   1. THE CLOSE BUTTON WAS BURIED UNDER THE SHEET.
      The block above says "The bar itself is lifted above it so the button
      that closes it is always reachable" and sets `.floating-header{z-index:70}`
      to do it. That cannot work: the open sheet IS `.floating-header > .topnav`,
      a CHILD of the element being lifted, so both move together. Inside the
      header's own stacking context the sheet is positioned with z-index 60
      while its sibling `.hdr-ctl` is static/auto — and a positioned element
      always paints over a static sibling. Measured: elementFromPoint at the
      button's centre returned `a.mm-feat`, a link inside the sheet.
      The z-index has to go on the SIBLING, not the parent.

   2. THE TOP OF THE MENU WAS UNREACHABLE.
      The same media block sets `justify-content:center` on `.topnav` for the
      collapsed bar, and the open-sheet rule switches `flex-direction` to
      column without resetting it. A centred flex column whose content is
      taller than its box overflows BOTH ends, and the part above the start
      edge cannot be scrolled to — scrollTop is already 0. Measured: content
      1093px in a 777px sheet, first group at top -233, i.e. 233px of menu
      that no amount of scrolling would reveal.

   3. THE BURGER NEVER BECAME AN X.
      There was no `nav-open` state for `.navbtn`, so even once it is
      reachable it still reads as "open the menu". Three lines below.
   ========================================================================== */

@media (max-width: 60rem) {

  /* 1 — the bar's controls sit above the sheet (61 beats the sheet's 60) */
  html.nav-open body .floating-header > .hdr-ctl {
    position: relative;
    z-index: 61;
  }

  /* 2 — start the stack at the top so all of it can be scrolled to */
  html.nav-open body .floating-header > .topnav {
    justify-content: flex-start;
  }

  /* 3 — hamburger becomes a cross */
  html.nav-open body .navbtn i { background: transparent; }
  html.nav-open body .navbtn i::before,
  html.nav-open body .navbtn i::after { top: 0; }
  html.nav-open body .navbtn i::before { transform: rotate(45deg); }
  html.nav-open body .navbtn i::after  { transform: rotate(-45deg); }
  body .navbtn i,
  body .navbtn i::before,
  body .navbtn i::after {
    transition: transform .2s cubic-bezier(.23,1,.32,1),
                top .2s cubic-bezier(.23,1,.32,1),
                background-color .2s linear;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .navbtn i, body .navbtn i::before, body .navbtn i::after { transition: none; }
}

/* --------------------------------------------------------------------------
   2026-09-22 (same pass) — and once the button WAS reachable, it was white
   on cream.

   Measured with the sheet open: `.floating-header` runs 52->142, the sheet
   starts at 66, so the bar's controls (76->118) sit INSIDE the sheet's cream
   area while still inheriting `color:#fff` from the dark hero behind the bar.
   The X, the globe and "Get Started" were all there and all invisible.

   Two halves, and they belong together: the bar takes the sheet's own
   surface so the two read as one panel, and the sheet starts BELOW the bar
   instead of under it. The sheet's top is measured by v4mobile.js into
   --mt-navsheet-top, because the bar's height moves with the National Day
   banner and the app strip; 66px stays as the fallback.
   -------------------------------------------------------------------------- */

@media (max-width: 60rem) {

  html.nav-open body .floating-header {
    background: var(--bg);
    color: var(--ink);
  }
  html.nav-open body .floating-header .hdr-ctl,
  html.nav-open body .floating-header .hdr-profile,
  html.nav-open body .floating-header .navbtn,
  html.nav-open body .floating-header .hdr-ctl a {
    color: var(--ink);
  }

  html.nav-open body .floating-header > .topnav {
    top: var(--mt-navsheet-top, 66px);
  }

  /* the page must not scroll away behind an open sheet - it also keeps the
     measured --mt-navsheet-top true, since .floating-header is absolute */
  html.nav-open, html.nav-open body { overflow: hidden; }
}

/* --------------------------------------------------------------------------
   2026-09-22  ·  MEGA-MENU ICONS SAT ON THE EDGE OF THE CARD (mobile)
   Hisham: "the icons are not in the right place in the mega menu mobile."

   `html.nav-open .topnav .mm-in { padding: 0 }` (the mobile block above)
   strips the card's inner padding, so the row starts at the card's own edge.
   Measured at 390px: card left 30, icon left 31 — a ONE pixel inset on a
   card with a 26px border-radius, so the top row's icon is pushed at by the
   rounded corner and the feature strip runs edge to edge.

   Desktop, same menu, for reference: card padding 9.6px, row inset a further
   13px, icon 23px clear of the card, and `.mm-feat` inset 10px with its own
   14px radius. Mobile now gets the same treatment at a phone's scale — 10px
   on the card, 10px on the row, so the icon clears the corner by 20px.
   padding-inline, not padding-left: the Arabic menu mirrors.
   -------------------------------------------------------------------------- */

@media (max-width: 60rem) {
  html.nav-open body .topnav .mm-in   { padding: 10px; }
  html.nav-open body .topnav .mm-row  { padding-inline: 10px; }
  html.nav-open body .topnav .mm-feat { border-radius: 14px; }
}

/* ==========================================================================
   Discovery rail: the "View all" card that closes the row        2026-09-23
   The rail is now the six machines from Hisham's price list plus this. It
   carries no data-rent, so the size/price script in embed 4 skips it.
   ========================================================================== */
.rent-card--all { background: var(--bg-raised); }
.rent-card--all .rent-media { display: none; }
.rent-all {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  height: 100%;
  padding: 2.25rem 1.75rem 1.75rem;
  color: inherit;
  text-decoration: none;
}
.rent-all-k {
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.rent-all-t {
  font-size: 1.875rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--ink);
}
.rent-all-s {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 24ch;
}
.rent-all-go {
  margin-top: auto;
  font-size: 0.9688rem;
  font-weight: 500;
  color: var(--ink);
}
.rent-all-go .arrow { display: inline-block; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .rent-card--all:hover .rent-all-go .arrow { transform: translateX(4px); }
}

/* ============================================================
   Landing page: the registration line             2026-09-23
   Every other page gets its CR and VAT from the site-wide
   footer. home-v4 builds its own footer, so it had neither.
   Same two marks and the same label wording as v4footer.js, at
   the quieter weight this footer uses.
   ============================================================ */
.util-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 2rem;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline, #ddd3c7);
}
.util-entity {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-muted, #4e4e4e);
  margin-inline-end: auto;
}
.util-reg { display: inline-flex; align-items: center; gap: 0.55rem; }
.util-reg img { display: block; width: 32px; height: 32px; object-fit: contain; flex: none; }
.util-reg-vat { width: 34px; height: 34px; }
.util-reg-t { display: grid; gap: 1px; line-height: 1.25; }
.util-reg-t small {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted, #4e4e4e);
}
[lang="ar"] .util-reg-t small { letter-spacing: 0; text-transform: none; font-size: 0.75rem; }
.util-reg-t b {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink, #0e0f10);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .util-legal { gap: 0.75rem 1.25rem; }
  .util-entity { flex: 1 1 100%; margin-inline-end: 0; }
}

/* ============================================================
   "Get Started" is a LINK now                     2026-09-23
   Hisham: the header button should take you to the web app
   instead of opening the sign-in popup. A real <a> gives
   middle-click, open-in-new-tab and a crawlable destination,
   which a <button> never did.
   Three UA differences had to be cancelled for the anchor to
   land on exactly the same 117x44 box as the button it
   replaces - measured on the live page, not guessed.
   ============================================================ */
a.hdr-profile { text-decoration: none; line-height: 1.55; letter-spacing: normal; }

/* ============================================================
   Day ruler: the size callouts read LTR in both  2026-09-23
   languages.
   `.dr-size` is a flex row of <i> (leader line) then <b> (the
   tonnage), pinned to the machine by `left: bx%`. It inherited
   `direction: rtl` from the Arabic page, which reversed the two
   and put the figure on the machine with the line running off
   into space - and re-ordered "20 T" to "T 20" while it was
   there. The callout is not meant to mirror: the machines keep
   the same order in both languages and the leads are tuned to
   land in the gaps to their right.
   ============================================================ */
#why-us .dr-size { direction: ltr; }

/* ============================================================
   Landing footer                                 2026-09-23
   Third pass, from the visitsaudi reference Hisham sent: the
   legal links leave the page background for a black bar that
   closes the page, the rule above the registrations goes, and
   the logotype lifts to make room.

      columns
      commercial registration + VAT
      L O G O T Y P E
      [ black bar: copyright . privacy terms help . cookies ]

   EVERY rule is scoped to .util-v2 or .util-bar, classes that
   exist only on this markup. assets.moedatech.net/v4.css is ONE
   file and production loads it too, so an unscoped .util-legal
   rule would restyle the live footer the moment it deployed.
   ============================================================ */
.util-v2 { padding-bottom: 0; }

/* --- the registrations ------------------------------------------------ */
/* No rule above them: with the links gone from this band there is nothing
   left to divide, and the hairline only cut the footer in half. */
.util-v2 .util-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 0;
  border-top: 0;
}
/* No plate. Hisham, 2026-09-23: "make them like the other pages - they are
   blank". Every value below is measured off the site-wide footer's .mtf-reg
   on /about-us, so the landing page and the other 56 pages now print the two
   registrations identically: 12px gap, a 40px mark, a 12.5px sentence-case
   label over a 13.5px semibold number, nothing around either. */
.util-v2 .util-regs { display: flex; flex-wrap: wrap; gap: 0.75rem 2.25rem; }
.util-v2 .util-reg {
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.util-v2 .util-reg img,
.util-v2 .util-reg .util-reg-vat { width: 40px; height: 40px; }
/* beats [lang="ar"] .util-reg-t small (0,2,1) with 0,3,0 */
.util-v2 .util-reg-t small {
  font-size: 0.78125rem;
  letter-spacing: normal;
  text-transform: none;
}
.util-v2 .util-reg-t b { font-size: 0.84375rem; letter-spacing: 0.01em; }

/* --- the logotype ----------------------------------------------------- */
/* Lifted: the bar now closes the page, so the logotype no longer has to
   carry the bottom of the layout on its own. */
.util-v2 .util-wordmark { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.util-v2 .util-wordmark svg { max-width: 100%; }
#utility-footer > .stage { min-width: 0; }

/* --- the black bar ---------------------------------------------------- */
/* A sibling of .util, not a child, so it runs the full width of the page
   the way the reference's does. */
.util-bar {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  padding: 1.15rem clamp(1.5rem, 4vw, 3.5rem);
  background: var(--bg-dark, #101112);
  color: rgba(255, 255, 255, 0.68);
}
.util-bar .util-socket {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
}
.util-rights { margin-inline-end: auto; letter-spacing: 0.04em; }
.util-bar .util-socket a { color: inherit; text-decoration: none; transition: color 250ms ease; }
@media (hover: hover) and (pointer: fine) {
  .util-bar .util-socket a:hover { color: #fff; }
}
.util-bar .util-socket button {
  margin-left: 0;
  padding: 0.4rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-pill, 999px);
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: border-color 250ms ease, color 250ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .util-bar .util-socket button:hover { border-color: rgba(255, 255, 255, 0.7); color: #fff; }
}

@media (max-width: 640px) {
  .util-v2 .util-legal { margin-top: 2rem; }
  .util-v2 .util-regs { gap: 0.6rem; }
  .util-v2 .util-wordmark { margin-top: 1.75rem; }
  .util-bar { padding-block: 1.1rem; }
  .util-bar .util-socket { gap: 0.9rem 1.25rem; }
  .util-rights { flex: 1 1 100%; margin-inline-end: 0; }
  .util-bar .util-socket button { margin-inline-start: auto; }
}