/* ============================================================================
   WebsiteRevamping.com — stylesheet
   ----------------------------------------------------------------------------
   Contents
     01  Design tokens
     02  Reset & base
     03  Shared primitives (wrap, section, eyebrow, buttons, icons)
     04  Navigation
     05  Hero + the before/after revamp slider
     06  Trust bar / stats
     07  Services
     08  What we build (filters, cards, mini mockups, dialog)
     09  Process
     10  Why choose us
     11  Pricing
     12  FAQ accordion
     13  About
     14  Contact + form
     15  Footer
     16  Scroll reveal & motion preferences
     17  Responsive
   ========================================================================== */


/* ============================================================================
   01  DESIGN TOKENS
   ========================================================================== */
:root {
  /* Palette — deep ink navy, cool porcelain, and a two-stop electric accent.
     The accent gradient (beam -> volt) is the "revamped" signal and is used
     sparingly: primary buttons, the slider handle, key numbers.            */
  --ink:        #050D2B;
  --ink-2:      #0A1642;
  --ink-3:      #122053;
  --beam:       #4D8BFF;
  --volt:       #35E6C8;
  --paper:      #FFFFFF;
  --porcelain:  #EEF3FA;
  --graphite:   #0B1330;
  --slate:      #5A6B8C;
  --line:       #DDE6F3;
  --line-dark:  rgba(150,180,255,.14);

  --sweep: linear-gradient(115deg, var(--beam) 0%, var(--volt) 100%);

  /* Type */
  --display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --body:    'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Layout */
  --maxw: 1220px;
  --pad: clamp(1.1rem, 4vw, 2.5rem);
  --nav-h: 76px;
  --r:    16px;
  --r-sm: 10px;
  --r-lg: 24px;

  /* Motion */
  --ease: cubic-bezier(.22, .9, .28, 1);
  --shadow-sm: 0 2px 8px rgba(9, 22, 60, .06);
  --shadow-md: 0 14px 40px -18px rgba(9, 22, 60, .28);
  --shadow-lg: 0 34px 80px -34px rgba(6, 16, 48, .45);
}


/* ============================================================================
   02  RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--graphite);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Locked while the mobile menu or a dialog is open */
body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.025em;
  margin: 0;
  text-wrap: balance;
}

p  { margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; padding: 0; cursor: pointer; }

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

/* Anchor targets clear the sticky navigation bar */
section[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  padding: .7rem 1.1rem;
  border-radius: var(--r-sm);
  background: var(--volt);
  color: var(--ink);
  font-weight: 700;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* The icon sprite itself is never rendered */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }


/* ============================================================================
   03  SHARED PRIMITIVES
   ========================================================================== */
.wrap {
  width: min(100% - (var(--pad) * 2), var(--maxw));
  margin-inline: auto;
}

/* The single source of section rhythm. Never override this padding —
   use a modifier class if a section genuinely needs different spacing. */
.section { padding-block: clamp(4.5rem, 8vw, 7.5rem); }

.section__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.section__head--split {
  display: grid;
  gap: clamp(1.25rem, 3vw, 3.5rem);
  align-items: end;
}

.section__head--center { text-align: center; max-width: 46rem; margin-inline: auto; }

.section__title {
  font-size: clamp(1.9rem, 4.1vw, 3rem);
  margin-bottom: 0;
}

.section__lead {
  color: var(--slate);
  font-size: 1.0625rem;
  max-width: 34rem;
  margin: 0;
}
.section__lead--center { margin-inline: auto; margin-top: 1.1rem; }

/* Mono eyebrow — reserved for labels that classify a section */
.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--beam);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: .65rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--sweep);
  border-radius: 2px;
  flex: none;
}
.eyebrow--onDark { color: var(--volt); }
.section__head--center .eyebrow { justify-content: center; }

/* Gradient text used once per page, on the hero headline */
.grad {
  background: var(--sweep);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.link {
  color: var(--beam);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s var(--ease);
}
.link:hover { color: var(--graphite); }
/* Only the links sitting on a dark ground flip to the accent */
.contact__pitch .link:hover, .footer .link:hover { color: var(--volt); }

/* Icons: every <svg class="ico"> inherits its colour from the parent */
.ico {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  --btn-y: .95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: var(--btn-y) 1.6rem;
  border-radius: 999px;
  font-family: var(--display);
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease);
}
.btn .ico { width: 1.05em; height: 1.05em; transition: transform .25s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }
.btn--sm   { --btn-y: .62rem; padding-inline: 1.15rem; font-size: .9rem; }
.btn--full { width: 100%; }

.btn--primary {
  position: relative;
  color: var(--ink);
  background: var(--sweep);
  box-shadow: 0 10px 26px -12px rgba(53, 230, 200, .75);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -14px rgba(53, 230, 200, .85);
}
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  color: #fff;
  border: 1px solid rgba(160, 190, 255, .3);
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  border-color: var(--volt);
  background: rgba(53, 230, 200, .1);
  transform: translateY(-2px);
}

.btn--outline {
  color: var(--graphite);
  border: 1.5px solid var(--line);
  background: #fff;
}
.btn--outline:hover {
  border-color: var(--beam);
  color: var(--beam);
  transform: translateY(-2px);
}


/* ============================================================================
   04  NAVIGATION
   ========================================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease),
              height .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav__inner {
  width: min(100% - (var(--pad) * 2), var(--maxw));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Solid state once the page has scrolled past the hero's top edge */
.nav.is-scrolled {
  height: 66px;
  background: rgba(5, 13, 43, .88);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line-dark);
  box-shadow: 0 12px 40px -24px rgba(0, 0, 0, .9);
}

/* --- Brand -------------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -.03em;
  color: #fff;
  flex: none;
}
/* The monogram carries the same hard diagonal split as the revamp slider */
.brand__mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
  background: linear-gradient(118deg, #1C2C63 0 47%, var(--beam) 47%, var(--volt) 100%);
  box-shadow: 0 6px 18px -8px rgba(53, 230, 200, .8);
}
.brand__tld { color: var(--volt); }

/* --- Links -------------------------------------------------------------- */
.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
}
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 1.8vw, 1.7rem);
}
.nav__link {
  position: relative;
  font-size: .93rem;
  font-weight: 500;
  color: rgba(228, 236, 255, .78);
  padding-block: .35rem;
  transition: color .2s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--sweep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav__link:hover { color: #fff; }
.nav__link:hover::after,
.nav__link.is-current::after { transform: scaleX(1); }
.nav__link.is-current { color: #fff; }

/* --- Hamburger ---------------------------------------------------------- */
.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--line-dark);
  background: rgba(255, 255, 255, .05);
}
.nav__bars { display: block; width: 20px; }
.nav__bars i {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform .3s var(--ease), opacity .2s var(--ease), width .3s var(--ease);
}
.nav__bars i + i { margin-top: 5px; }
.nav__bars i:nth-child(2) { width: 14px; margin-left: auto; }

.nav.is-open .nav__bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__bars i:nth-child(2) { opacity: 0; width: 20px; }
.nav.is-open .nav__bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ============================================================================
   05  HERO + REVAMP SLIDER
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  color: #fff;
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 5rem));
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
}

/* Ambient background: two slow-drifting aurora blooms over a faint grid.
   One motion idea, not three — the slider is where the attention goes. */
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
}
.hero__aurora--a {
  width: 46vw; height: 46vw;
  min-width: 380px; min-height: 380px;
  top: -18%; right: -8%;
  background: radial-gradient(circle, rgba(77, 139, 255, .75), transparent 70%);
  animation: drift-a 26s var(--ease) infinite alternate;
}
.hero__aurora--b {
  width: 38vw; height: 38vw;
  min-width: 320px; min-height: 320px;
  bottom: -22%; left: -10%;
  background: radial-gradient(circle, rgba(53, 230, 200, .5), transparent 70%);
  animation: drift-b 32s var(--ease) infinite alternate;
}
@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-7%, 9%, 0) scale(1.15); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(9%, -8%, 0) scale(.95); }
}
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 25%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 25%, #000 20%, transparent 78%);
  opacity: .8;
}

.hero__inner {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

.hero__title {
  font-size: clamp(2.35rem, 5.6vw, 4.05rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  margin-bottom: 1.5rem;
}
.hero__lead {
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  color: rgba(214, 226, 250, .8);
  max-width: 33rem;
  margin-bottom: 2rem;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-bottom: 1.9rem;
}
.hero__note {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  max-width: 34rem;
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .01em;
  color: rgba(190, 208, 240, .62);
  margin: 0;
}
.hero__note .ico { color: var(--volt); width: 1em; height: 1em; margin-top: .35em; stroke-width: 2.4; }

/* --- The revamp slider -------------------------------------------------- */
.rv { margin: 0; }

.rv__stage {
  --pos: 100%;              /* how much of the "after" layer is clipped away */
  --u: 5.6px;               /* fallback scale unit */
  --u: 1cqw;                /* scales the mock sites with the frame width   */
  container-type: inline-size;
  position: relative;
  aspect-ratio: 16 / 11.4;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(150, 180, 255, .16);
  touch-action: pan-y;      /* vertical page scroll stays native */
  cursor: ew-resize;
  user-select: none;
}

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

/* Explicit layer order matters: clip-path makes the "after" layer its own
   stacking context, so without these the "before" corner chips would paint
   over the revealed rebuild. */
.rv__layer--before { z-index: 1; }
.rv__layer--after  { z-index: 2; }

/* "After" sits on top and is revealed by shrinking the left inset */
.rv__layer--after {
  clip-path: inset(0 0 0 var(--pos));
  transition: clip-path 1.1s var(--ease);
}
.rv__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: var(--sweep);
  z-index: 3;
  touch-action: none;       /* the grip owns the gesture; the frame scrolls */
  transition: left 1.1s var(--ease);
}
.rv__stage.is-dragging .rv__layer--after,
.rv__stage.is-dragging .rv__handle { transition: none; }

.rv__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: var(--sweep);
  box-shadow: 0 8px 22px -6px rgba(5, 13, 43, .6);
  transition: scale .22s var(--ease);
}
.rv__grip .ico { width: 22px; height: 22px; stroke-width: 2.2; }
.rv__stage:hover .rv__grip,
.rv__handle:focus-visible .rv__grip { scale: 1.1; }
.rv__handle:focus-visible { outline: none; }
.rv__handle:focus-visible .rv__grip { outline: 2px solid #fff; outline-offset: 3px; }

/* One chip per side, carrying both the label and the numbers it earned.
   Sized in rem rather than cqw so they stay legible at any frame width. */
.rv__chip {
  position: absolute;
  bottom: .9rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .04em;
  padding: .38rem .75rem;
  border-radius: 999px;
  white-space: nowrap;
}
.rv__chip b {
  font-weight: 700;
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding-right: .5rem;
  border-right: 1px solid currentColor;
  opacity: .85;
}
.rv__chip--before {
  left: .9rem;
  background: rgba(64, 53, 36, .94);
  color: #EBD9B4;
}
.rv__chip--after {
  right: .9rem;
  background: rgba(5, 13, 43, .94);
  color: var(--volt);
  border: 1px solid rgba(53, 230, 200, .38);
}

/* The hint rides with the handle, so it can never collide with the chips */
.rv__hint {
  position: absolute;
  top: calc(50% + 40px);
  left: 50%;
  translate: -50% 0;
  pointer-events: none;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: .38rem .8rem;
  border-radius: 999px;
  background: rgba(5, 13, 43, .85);
  color: #fff;
  backdrop-filter: blur(4px);
  animation: hint-pulse 2.4s ease-in-out infinite;
  transition: opacity .4s var(--ease);
}
.rv__stage.is-touched .rv__hint { opacity: 0; }
@keyframes hint-pulse {
  0%, 100% { translate: -50% 0; }
  50%      { translate: -50% -4px; }
}

.rv__cap {
  margin-top: 1.1rem;
  font-size: .87rem;
  color: rgba(190, 208, 240, .62);
  text-align: center;
}
.rv__cap strong { color: var(--volt); font-weight: 600; }

/* --- Shared browser chrome for both mock sites -------------------------- */
.win { height: 100%; display: flex; flex-direction: column; }
.win__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.6);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
}
.win__dots { display: flex; gap: calc(var(--u) * .7); }
.win__dots i {
  width: calc(var(--u) * 1.15);
  height: calc(var(--u) * 1.15);
  border-radius: 50%;
  background: currentColor;
  opacity: .45;
}
.win__url {
  flex: 1;
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.5);
  padding: calc(var(--u) * .55) calc(var(--u) * 1.2);
  border-radius: calc(var(--u) * .8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.win--old { background: #D8D2C4; color: #6B6252; }
.win--old .win__bar { background: linear-gradient(#EDE8DC, #CFC7B4); border-bottom: 1px solid #A99F8A; }
.win__url--old { background: #FBFAF6; border: 1px solid #A99F8A; color: #7A6F5C; }

.win--new { background: var(--ink-2); color: #9FB4E8; }
.win--new .win__bar { background: #08123A; border-bottom: 1px solid var(--line-dark); }
.win__url--new { background: rgba(255, 255, 255, .06); border: 1px solid var(--line-dark); color: #C6D6FA; }
.win__url--new::first-letter { color: var(--volt); }

/* --- BEFORE: a site last touched in 2011 -------------------------------- */
.old {
  flex: 1;
  overflow: hidden;
  background: #FFFDF7;
  color: #2A2418;
  font-family: 'Times New Roman', Times, serif;
  padding: calc(var(--u) * 1.6);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.2);
  filter: saturate(.72);
}
.old__masthead {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.4);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 1.6);
  background: linear-gradient(#5B7DA8, #2E4C74);
  border: calc(var(--u) * .3) outset #8FA9C6;
  color: #FFF;
}
.old__logo {
  font-family: var(--mono);
  font-weight: 700;
  font-size: calc(var(--u) * 2.1);
  padding: calc(var(--u) * .5) calc(var(--u) * .9);
  background: #E8E2CE;
  color: #2E4C74;
  border: calc(var(--u) * .3) outset #FFF;
}
.old__name {
  font-size: calc(var(--u) * 2.7);
  font-weight: 700;
  letter-spacing: .02em;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .4);
}
.old__nav {
  font-size: calc(var(--u) * 1.6);
  text-align: center;
  color: #1A3E8C;
  text-decoration: underline;
  padding: calc(var(--u) * .5) 0;
  border-block: 1px solid #C9C1AB;
}
.old__cols {
  flex: 1;
  display: grid;
  grid-template-columns: 27% 1fr;
  gap: calc(var(--u) * 1.6);
  min-height: 0;
}
.old__side {
  background: #EFEADA;
  border: 1px solid #C9C1AB;
  padding: calc(var(--u) * 1.2);
  font-size: calc(var(--u) * 1.55);
}
.old__sideTitle {
  margin: 0 0 calc(var(--u) * .8);
  font-weight: 700;
  color: #6B3B00;
  text-decoration: underline;
}
.old__links li { color: #1A3E8C; line-height: 1.9; }
.old__counter {
  margin: calc(var(--u) * 1.6) 0 0;
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.25);
  text-align: center;
  color: #5B5344;
}
.old__counter b {
  display: inline-block;
  margin-top: calc(var(--u) * .5);
  padding: calc(var(--u) * .3) calc(var(--u) * .7);
  background: #14140C;
  color: #6FE06F;
  letter-spacing: .22em;
  font-size: calc(var(--u) * 1.5);
}
.old__main { position: relative; font-size: calc(var(--u) * 1.6); }
.old__main p { margin: 0 0 calc(var(--u) * 1.1); text-align: justify; line-height: 1.5; }
.old__h {
  font-family: 'Times New Roman', Times, serif;
  font-size: calc(var(--u) * 2.9);
  letter-spacing: 0;
  color: #8C1A1A;
  margin-bottom: calc(var(--u) * 1);
}
.old__new {
  position: absolute;
  right: 0;
  bottom: calc(var(--u) * .5);
  font-family: var(--mono);
  font-weight: 700;
  font-size: calc(var(--u) * 1.4);
  color: #B00;
  background: #FF0;
  padding: calc(var(--u) * .35) calc(var(--u) * .8);
  border: 1px solid #B00;
  transform: rotate(-6deg);
}
.old__foot {
  font-size: calc(var(--u) * 1.3);
  text-align: center;
  color: #7A7060;
  border-top: 1px solid #C9C1AB;
  padding-top: calc(var(--u) * .8);
}

/* --- AFTER: the same business, rebuilt ---------------------------------- */
.new {
  flex: 1;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 78% 0%, rgba(77, 139, 255, .3), transparent 70%),
    var(--ink-2);
  font-family: var(--body);
  color: #fff;
  padding: calc(var(--u) * 2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2.2);
}
.new__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 1.5);
  font-size: calc(var(--u) * 1.5);
}
.new__logo {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .8);
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(var(--u) * 1.9);
  letter-spacing: -.03em;
}
.new__logo i {
  width: calc(var(--u) * 1.9);
  height: calc(var(--u) * 1.9);
  border-radius: calc(var(--u) * .55);
  background: var(--sweep);
}
.new__links { display: flex; gap: calc(var(--u) * 1.6); color: rgba(210, 224, 255, .72); font-weight: 500; }
.new__links b { font-weight: 500; }
.new__cta {
  padding: calc(var(--u) * .7) calc(var(--u) * 1.4);
  border-radius: 999px;
  border: 1px solid rgba(160, 190, 255, .35);
  color: #fff;
  font-weight: 600;
}
.new__hero {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: calc(var(--u) * 2.5);
}
.new__heroCopy { display: flex; flex-direction: column; }
.new__eyebrow {
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.2);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--volt);
  margin: 0 0 calc(var(--u) * 1.2);
}
.new__h {
  font-size: calc(var(--u) * 4.6);
  line-height: 1.02;
  letter-spacing: -.04em;
  margin-bottom: calc(var(--u) * 1.2);
}
.new__p {
  font-size: calc(var(--u) * 1.6);
  color: rgba(206, 220, 250, .78);
  margin-bottom: calc(var(--u) * 1.8);
}

/* The live stock panel — the feature the case study says we built */
.new__panel {
  width: calc(var(--u) * 26);
  padding: calc(var(--u) * 1.5);
  border-radius: calc(var(--u) * 1.4);
  background: rgba(9, 20, 58, .82);
  border: 1px solid var(--line-dark);
  box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(0, 0, 0, .3);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * .9);
}
.new__panelHead {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * .7);
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.15);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(190, 208, 240, .7);
  padding-bottom: calc(var(--u) * .9);
  border-bottom: 1px solid var(--line-dark);
}
.new__panelHead i {
  width: calc(var(--u) * .8);
  height: calc(var(--u) * .8);
  border-radius: 50%;
  background: var(--volt);
  box-shadow: 0 0 0 calc(var(--u) * .4) rgba(53, 230, 200, .22);
}
.new__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--u) * 1.2);
  font-size: calc(var(--u) * 1.35);
}
.new__row b { font-weight: 500; color: rgba(206, 220, 250, .78); }
.new__row span {
  font-family: var(--mono);
  font-weight: 700;
  color: #fff;
}
.new__btn {
  align-self: flex-start;
  padding: calc(var(--u) * .95) calc(var(--u) * 1.9);
  border-radius: 999px;
  background: var(--sweep);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(var(--u) * 1.5);
}
.new__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1.2); }
.new__card {
  padding: calc(var(--u) * 1.3);
  border-radius: calc(var(--u) * 1.2);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line-dark);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * .3);
}
.new__card b {
  font-family: var(--display);
  font-size: calc(var(--u) * 2.1);
  letter-spacing: -.03em;
}
.new__card span {
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.1);
  color: rgba(190, 208, 240, .6);
}


/* ============================================================================
   06  TRUST BAR / STATS
   ========================================================================== */
.stats {
  background: var(--ink-2);
  border-block: 1px solid var(--line-dark);
  padding-block: clamp(2.5rem, 4.5vw, 3.5rem);
  color: #fff;
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1rem;
}
.stat { text-align: center; }
.stat__num {
  font-family: var(--display);
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  margin: 0 0 .5rem;
  background: var(--sweep);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__label {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(190, 208, 240, .62);
  margin: 0;
}


/* ============================================================================
   07  SERVICES
   ========================================================================== */
.services { background: linear-gradient(var(--porcelain), var(--paper) 70%); }

.svc {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}
.svc__card {
  position: relative;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  border-radius: var(--r);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.svc__card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  border-radius: var(--r) var(--r) 0 0;
  background: var(--sweep);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.svc__card:hover {
  transform: translateY(-5px);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}
/* Short cards sit beside a tall feature, so centre them in the stretched row */
.svc__card:not(.svc__card--wide):not(.svc__cta) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.svc__card:hover::after { opacity: 1; }

.svc__icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  margin-bottom: 1.15rem;
  color: var(--beam);
  background: linear-gradient(150deg, rgba(77, 139, 255, .13), rgba(53, 230, 200, .13));
  transition: color .3s var(--ease), background .3s var(--ease);
}
.svc__icon .ico { width: 25px; height: 25px; }
.svc__card:hover .svc__icon { color: var(--ink); background: var(--sweep); }

.svc__title { font-size: 1.24rem; margin-bottom: .6rem; }
.svc__text { color: var(--slate); font-size: .98rem; margin: 0; }

/* The two ways in — a new build and a rebuild — carry equal visual weight */
.svc__card--wide {
  display: flex;
  flex-direction: column;
  background: var(--ink);
  border-color: transparent;
  color: #fff;
  overflow: hidden;
}
.svc__kicker {
  position: absolute;
  top: clamp(1.5rem, 2.6vw, 2.1rem);
  right: clamp(1.5rem, 2.6vw, 2.1rem);
  padding: .28rem .7rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--sweep);
}

/* Conversion panel that closes out the grid */
.svc__cta {
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, rgba(77, 139, 255, .1), rgba(53, 230, 200, .1));
  border-color: rgba(77, 139, 255, .3);
}
.svc__cta .svc__text { flex: 1; }
.svc__cta .btn { margin-top: 1.2rem; }
.svc__cta:hover::after { opacity: 0; }
.svc__card--wide::before {
  content: "";
  position: absolute;
  width: 300px; height: 300px;
  right: -90px; top: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(53, 230, 200, .3), transparent 68%);
  pointer-events: none;
}
.svc__card--wide .svc__icon { color: var(--ink); background: var(--sweep); }
.svc__card--wide .svc__text { color: rgba(206, 220, 250, .78); }
.svc__card--wide:hover { box-shadow: var(--shadow-lg); }

.svc__points {
  margin: 1.2rem 0 1.4rem;
  display: grid;
  gap: .5rem;
}
.svc__points li {
  position: relative;
  padding-left: 1.5rem;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .01em;
  color: rgba(206, 220, 250, .72);
}
.svc__points li::before {
  content: "";
  position: absolute;
  left: 0; top: .52em;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--sweep);
}
.svc__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: .5rem;
  margin-top: auto;           /* stays pinned to the bottom of the tall cell */
  font-family: var(--display);
  font-weight: 600;
  font-size: .95rem;
  color: var(--volt);
}
.svc__link .ico { transition: transform .25s var(--ease); }
.svc__link:hover .ico { transform: translateX(4px); }


/* ============================================================================
   08  PORTFOLIO
   ========================================================================== */
.work { background: var(--paper); }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: 2rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1.05rem;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: #fff;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--slate);
  transition: color .22s var(--ease), border-color .22s var(--ease),
              background-color .22s var(--ease), transform .22s var(--ease);
}
.chip span {
  font-size: .68rem;
  padding: .1rem .35rem;
  border-radius: 5px;
  background: var(--porcelain);
  color: var(--slate);
  transition: background-color .22s var(--ease), color .22s var(--ease);
}
.chip:hover { border-color: var(--beam); color: var(--beam); transform: translateY(-1px); }
.chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.chip.is-active span { background: rgba(255, 255, 255, .13); color: var(--volt); }

.work__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.35rem;
}

.card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: transparent; box-shadow: var(--shadow-md); }
.card:focus-within { border-color: transparent; box-shadow: var(--shadow-md); }
.card.is-hidden { display: none; }

/* Cards that survive a filter change arrive together */
.card.is-enter { animation: card-in .45s var(--ease) backwards; }
@keyframes card-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.card__media {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  position: relative;
  container-type: inline-size;   /* the mockups inside scale from this width */
  background: var(--ink-2);
}

/* ============================================================================
   MOCKUPS
   Each card holds two complete websites — the dated one and the rebuild —
   stacked and cross-faded by the Before / After control.

   The rebuild is a WHOLE HOMEPAGE, not a hero crop: announcement strip, nav,
   hero, proof band, content band and footer. That is what makes it read as a
   screenshot of a real site rather than a wireframe. Body copy is greeked into
   bars, exactly as it looks at this scale in a real screenshot, while headings
   and prices stay legible.

   Everything scales from one unit (--u) tied to the card width, so the type
   stays in proportion at any card size. Photography is drawn as inline SVG
   from the art sprite. No image files, no network requests.
   ========================================================================== */
.mock {
  --u: 4.2px;                    /* fallback where container units are missing */
  --u: 1.32cqw;
  --px: calc(var(--u) * 2.3);    /* the mock site's own page gutter */
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.mock--before { opacity: 0; transform: scale(1.015); }
.mock--after  { opacity: 1; }
.card__media.show-before .mock--before { opacity: 1; transform: none; }
.card__media.show-before .mock--after  { opacity: 0; transform: scale(.985); }

/* Drawn artwork from the art sprite. Never inherits .ico's stroke. */
.scene { display: block; width: 100%; height: 100%; }

/* --- Shared browser chrome ------------------------------------------------ */
.mk__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.4);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 1.8);
  background: #0A1130;
  border-bottom: 1px solid rgba(150, 180, 255, .12);
}
.mk__bar i {
  width: calc(var(--u) * 1.1);
  height: calc(var(--u) * 1.1);
  border-radius: 50%;
  background: #6B7CA8;
  opacity: .5;
  flex: none;
}
.mk__bar span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.3);
  color: #8FA6D8;
  background: rgba(255, 255, 255, .06);
  border-radius: calc(var(--u) * .8);
  padding: calc(var(--u) * .45) calc(var(--u) * 1.1);
}
.mk__bar--old { background: #CFC7B4; border-bottom-color: #A99F8A; }
.mk__bar--old i { background: #6B6252; }
.mk__bar--old span { background: #FBFAF6; border: 1px solid #A99F8A; color: #7A6F5C; }


/* ============================================================================
   THE REBUILD
   ========================================================================== */
.mk__page {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--mk-paper, #fff);
  color: #0B1330;
  font-family: var(--body);
  display: flex;
  flex-direction: column;
}
.mk__page--dark { --mk-paper: #0B1226; color: #F2F6FF; }
.mk__page--warm { --mk-paper: #FBF7F1; }

/* --- Announcement strip --------------------------------------------------- */
.mk__ann {
  flex: none;
  padding: calc(var(--u) * .75) var(--px);
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.05);
  letter-spacing: .02em;
  text-align: center;
  color: var(--mk-annInk, #fff);
  background: var(--mk-ink, var(--ink));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Navigation ----------------------------------------------------------- */
.mk__nav {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.5);
  padding: calc(var(--u) * 1.45) var(--px);
  font-size: calc(var(--u) * 1.22);
  color: #6B7A97;
  white-space: nowrap;
  border-bottom: 1px solid rgba(11, 19, 48, .08);
}
.mk__page--dark .mk__nav { color: rgba(206, 220, 250, .62); border-bottom-color: rgba(255, 255, 255, .09); }
.mk__nav b {
  font-family: var(--display);
  font-size: calc(var(--u) * 1.85);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--graphite);
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * .7);
}
.mk__page--dark .mk__nav b { color: #fff; }
/* A small brand mark beside the wordmark — real sites nearly always have one */
.mk__nav b::before {
  content: "";
  width: calc(var(--u) * 1.9);
  height: calc(var(--u) * 1.9);
  border-radius: calc(var(--u) * .5);
  background: var(--mk-ink, var(--ink));
  flex: none;
}
.mk__nav em {
  font-style: normal;
  font-weight: 700;
  font-size: calc(var(--u) * 1.15);
  color: var(--mk-btnInk, #fff);
  background: var(--mk-ink, var(--ink));
  padding: calc(var(--u) * .6) calc(var(--u) * 1.25);
  border-radius: 999px;
}
.mk__nav u {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .5);
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.05);
  padding: calc(var(--u) * .5) calc(var(--u) * 1);
  border-radius: 999px;
  border: 1px solid rgba(11, 19, 48, .16);
}
.mk__page--dark .mk__nav u { border-color: rgba(255, 255, 255, .2); }

/* --- Shared: a framed piece of artwork ------------------------------------ */
.mk__shot {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--u) * 1.2);
  background: #E7EDF6;
  min-height: 0;
}

/* --- Hero A: copy beside a picture ---------------------------------------- */
.mk__hero {
  flex: 1.35 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.06fr 1fr;
  gap: calc(var(--u) * 2);
  align-items: stretch;
  padding: calc(var(--u) * 2.2) var(--px);
}
.mk__copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; }
.mk__eyebrow {
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.05);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--mk-ink, var(--beam));
  margin: 0 0 calc(var(--u) * .9);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.mk__h {
  font-family: var(--display);
  font-size: calc(var(--u) * 3.5);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -.035em;
  margin: 0 0 calc(var(--u) * 1);
}
.mk__sub {
  font-size: calc(var(--u) * 1.32);
  line-height: 1.45;
  color: #64748E;
  margin: 0 0 calc(var(--u) * 1.5);
}
.mk__page--dark .mk__sub { color: rgba(206, 220, 250, .7); }
.mk__btns { display: flex; align-items: center; gap: calc(var(--u) * 1) }
.mk__btn {
  font-family: var(--display);
  font-size: calc(var(--u) * 1.28);
  font-weight: 600;
  color: var(--mk-btnInk, #fff);
  background: var(--mk-ink, var(--ink));
  padding: calc(var(--u) * .9) calc(var(--u) * 1.7);
  border-radius: 999px;
  white-space: nowrap;
}
.mk__btn--ghost {
  background: none;
  color: inherit;
  border: 1px solid rgba(11, 19, 48, .22);
  padding: calc(var(--u) * .8) calc(var(--u) * 1.4);
}
.mk__page--dark .mk__btn--ghost { border-color: rgba(255, 255, 255, .26); }
.mk__hero .mk__shot { height: 100%; box-shadow: 0 calc(var(--u) * 1.4) calc(var(--u) * 3) rgba(9, 22, 60, .22); }

/* --- Hero B: full-bleed picture with copy laid over ------------------------ */
.mk__cover {
  position: relative;
  flex: 1.35 1 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.mk__cover > .scene { position: absolute; inset: 0; }
.mk__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 12, 30, .93) 4%, rgba(6, 12, 30, .68) 34%, rgba(6, 12, 30, .2) 72%, transparent 96%);
}
.mk__coverCopy {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: calc(var(--u) * 2) var(--px) calc(var(--u) * 2.1);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.mk__coverCopy .mk__eyebrow { color: #fff; opacity: .88; }
.mk__coverCopy .mk__eyebrow,
.mk__coverCopy .mk__h,
.mk__coverCopy .mk__sub { text-shadow: 0 calc(var(--u) * .2) calc(var(--u) * .9) rgba(6, 12, 30, .6); }
.mk__cover--book .mk__coverCopy { padding-bottom: calc(var(--u) * 7.5); }
.mk__coverCopy .mk__sub { color: rgba(255, 255, 255, .82); }
/* A floating badge — the sort of thing every real hero has somewhere */
.mk__badge {
  position: absolute;
  z-index: 2;
  top: calc(var(--u) * 1.8);
  right: var(--px);
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .6);
  font-family: var(--mono);
  font-size: calc(var(--u) * 1);
  letter-spacing: .04em;
  color: #0B1330;
  background: rgba(255, 255, 255, .93);
  padding: calc(var(--u) * .55) calc(var(--u) * 1.05);
  border-radius: 999px;
  box-shadow: 0 calc(var(--u) * .6) calc(var(--u) * 1.6) rgba(0, 0, 0, .28);
}
.mk__badge::before {
  content: "";
  width: calc(var(--u) * .8);
  height: calc(var(--u) * .8);
  border-radius: 50%;
  background: #2BB673;
  flex: none;
}

/* --- Greeked body copy ---------------------------------------------------- */
.mk__ln {
  display: block;
  height: calc(var(--u) * .62);
  border-radius: 999px;
  background: currentColor;
  opacity: .2;
  width: var(--w, 100%);
  margin-bottom: calc(var(--u) * .58);
}
.mk__ln:last-child { margin-bottom: 0; }

/* --- Proof strip ---------------------------------------------------------- */
.mk__strip {
  flex: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: center;
  padding: calc(var(--u) * 1.3) var(--px);
  background: var(--mk-strip, #F3F6FB);
  border-block: 1px solid rgba(11, 19, 48, .07);
}
.mk__page--dark .mk__strip { --mk-strip: rgba(255, 255, 255, .05); border-block-color: rgba(255, 255, 255, .08); }
.mk__strip > span {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * .15);
  padding-inline: calc(var(--u) * .9);
  min-width: 0;
}
.mk__strip > span + span { border-left: 1px solid rgba(11, 19, 48, .1); }
.mk__page--dark .mk__strip > span + span { border-left-color: rgba(255, 255, 255, .12); }
.mk__strip b {
  font-family: var(--display);
  font-size: calc(var(--u) * 1.85);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--mk-ink, var(--ink));
}
.mk__page--dark .mk__strip b { color: var(--mk-accent, var(--volt)); }
.mk__strip i {
  font-style: normal;
  font-family: var(--mono);
  font-size: calc(var(--u) * .95);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #7A88A3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Content band: three cards with artwork ------------------------------- */
.mk__cards {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 1.8) var(--px);
}
.mk__cards > span {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border-radius: calc(var(--u) * 1.2);
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(11, 19, 48, .09);
  box-shadow: 0 calc(var(--u) * .5) calc(var(--u) * 1.4) rgba(9, 22, 60, .06);
}
.mk__page--dark .mk__cards > span { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); }
.mk__cards .mk__shot { flex: 1 1 auto; border-radius: 0; }
.mk__cards em {
  font-style: normal;
  font-size: calc(var(--u) * 1.2);
  font-weight: 700;
  padding: calc(var(--u) * .8) calc(var(--u) * .9) calc(var(--u) * .3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mk__cards .mk__ln { margin-inline: calc(var(--u) * .9); }
.mk__cards .mk__ln:last-child { margin-bottom: calc(var(--u) * .9); }

/* --- Content band: a shop row --------------------------------------------- */
.mk__shop {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u) * 1.3);
  padding: calc(var(--u) * 1.8) var(--px);
}
.mk__prod { display: flex; flex-direction: column; min-height: 0; min-width: 0; position: relative; }
.mk__prod .mk__shot { flex: 1 1 auto; margin-bottom: calc(var(--u) * .7); }
.mk__prod b {
  font-size: calc(var(--u) * 1.2);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mk__prod u {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * .5);
  margin-top: calc(var(--u) * .28);
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.15);
  font-weight: 700;
  color: var(--mk-ink, var(--ink));
}
.mk__page--dark .mk__prod u { color: var(--mk-accent, var(--volt)); }
/* Stock / lead-time flag over the product image */
.mk__flag {
  position: absolute;
  top: calc(var(--u) * .7);
  left: calc(var(--u) * .7);
  z-index: 2;
  font-family: var(--mono);
  font-size: calc(var(--u) * .88);
  letter-spacing: .04em;
  color: #0B1330;
  background: rgba(255, 255, 255, .94);
  padding: calc(var(--u) * .3) calc(var(--u) * .7);
  border-radius: 999px;
}

/* Labels must never be squeezed below their own line height by the picture
   above them growing into the space. */
.mk__prod > :not(.mk__shot),
.mk__cards > span > :not(.mk__shot),
.mk__cols > span > :not(.mk__shot) { flex: none; }

/* --- Five-pointed rating stars -------------------------------------------- */
.mk__stars { display: inline-flex; gap: calc(var(--u) * .22); flex: none; }
.mk__stars i {
  width: calc(var(--u) * 1.05);
  height: calc(var(--u) * 1.05);
  background: #F2B01E;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.mk__stars i:last-child { background: #D8DEE9; }

/* --- Content band: gallery grid ------------------------------------------- */
.mk__gal {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1.35fr 1fr;
  gap: calc(var(--u) * .9);
  padding: calc(var(--u) * 1.6) var(--px);
}
.mk__gal .mk__shot { border-radius: calc(var(--u) * .8); }
.mk__gal .mk__shot:first-child { grid-column: span 2; }

/* --- Content band: list rows ---------------------------------------------- */
.mk__rows {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * .9);
  padding: calc(var(--u) * 1.6) var(--px);
}
.mk__rows > span {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: calc(var(--u) * 1.1);
  padding-bottom: calc(var(--u) * .9);
  border-bottom: 1px solid rgba(11, 19, 48, .1);
}
.mk__page--dark .mk__rows > span { border-bottom-color: rgba(255, 255, 255, .12); }
.mk__rows > span:last-child { border-bottom: 0; padding-bottom: 0; }
.mk__rows .mk__shot { width: calc(var(--u) * 8.5); height: 100%; border-radius: calc(var(--u) * .7); }
.mk__rows div { min-width: 0; }
.mk__rows b {
  display: block;
  font-family: var(--display);
  font-size: calc(var(--u) * 1.42);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-bottom: calc(var(--u) * .5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mk__rows i {
  font-style: normal;
  font-family: var(--mono);
  font-size: calc(var(--u) * 1);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8A96AE;
  flex: none;
}

/* --- Content band: journal masthead + lead story --------------------------- */
.mk__mast {
  flex: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--u) * 1.5);
  padding: calc(var(--u) * 1.7) var(--px) calc(var(--u) * 1.1);
  border-bottom: calc(var(--u) * .3) solid currentColor;
}
.mk__mast b {
  font-family: var(--display);
  font-size: calc(var(--u) * 2.7);
  font-weight: 700;
  letter-spacing: -.04em;
}
.mk__mast span {
  font-family: var(--mono);
  font-size: calc(var(--u) * 1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7A88A3;
  white-space: nowrap;
}
.mk__feature {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: calc(var(--u) * 1.5);
  align-items: stretch;
  padding: calc(var(--u) * 1.6) var(--px);
}
.mk__feature > div:first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
}
.mk__feature .mk__shot { height: 100%; }
.mk__kicker {
  font-family: var(--mono);
  font-size: calc(var(--u) * 1);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mk-ink, var(--beam));
  margin: 0 0 calc(var(--u) * .6);
}
.mk__ftitle {
  font-family: var(--display);
  font-size: calc(var(--u) * 2.05);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 0 0 calc(var(--u) * .9);
}

/* --- Content band: three-column article grid ------------------------------ */
.mk__cols {
  flex: .82 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 1.4) var(--px);
  border-top: 1px solid rgba(11, 19, 48, .1);
}
.mk__cols > span { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: calc(var(--u) * .5); }
.mk__cols .mk__shot { flex: 1 1 auto; min-height: calc(var(--u) * 4); }
.mk__cols b {
  font-size: calc(var(--u) * 1.12);
  font-weight: 700;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Content band: a booking widget --------------------------------------- */
.mk__book {
  flex: none;
  margin: calc(var(--u) * -5) var(--px) 0;
  position: relative;
  z-index: 3;
  padding: calc(var(--u) * 1.4);
  border-radius: calc(var(--u) * 1.4);
  background: #fff;
  box-shadow: 0 calc(var(--u) * 1.6) calc(var(--u) * 3.4) rgba(9, 22, 60, .22);
}
.mk__book > em {
  font-style: normal;
  display: block;
  font-family: var(--mono);
  font-size: calc(var(--u) * .95);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7A88A3;
  margin-bottom: calc(var(--u) * .85);
}
.mk__slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * .6); }
.mk__slots span {
  text-align: center;
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.02);
  padding: calc(var(--u) * .65) 0;
  border-radius: calc(var(--u) * .7);
  background: #F1F5FA;
  border: 1px solid rgba(11, 19, 48, .09);
  color: #4C5A78;
}
.mk__slots span.on {
  background: var(--mk-ink, var(--ink));
  border-color: transparent;
  color: var(--mk-btnInk, #fff);
  font-weight: 700;
}

/* --- Testimonial band ------------------------------------------------------ */
.mk__quote {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 1.4) var(--px);
  background: var(--mk-strip, #F3F6FB);
  border-top: 1px solid rgba(11, 19, 48, .07);
}
.mk__page--dark .mk__quote { --mk-strip: rgba(255, 255, 255, .05); border-top-color: rgba(255, 255, 255, .08); }
.mk__quote .mk__shot {
  flex: none;
  width: calc(var(--u) * 4.6);
  height: calc(var(--u) * 4.6);
  border-radius: 50%;
}
.mk__quote div { min-width: 0; flex: 1; }
.mk__quote b {
  display: block;
  font-family: var(--display);
  font-size: calc(var(--u) * 1.3);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin-bottom: calc(var(--u) * .35);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mk__quote i {
  font-style: normal;
  font-family: var(--mono);
  font-size: calc(var(--u) * .92);
  letter-spacing: .05em;
  color: #8A96AE;
}

/* --- Footer ---------------------------------------------------------------- */
.mk__foot {
  flex: none;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: calc(var(--u) * 1.3);
  padding: calc(var(--u) * 1.6) var(--px) calc(var(--u) * 1.3);
  background: var(--mk-foot, #0C1430);
  color: rgba(255, 255, 255, .55);
}
.mk__foot b {
  font-family: var(--display);
  font-size: calc(var(--u) * 1.5);
  font-weight: 700;
  letter-spacing: -.03em;
  color: #fff;
  display: block;
  margin-bottom: calc(var(--u) * .7);
}
.mk__foot .mk__ln { opacity: .32; }
.mk__foot em {
  font-style: normal;
  display: block;
  font-family: var(--mono);
  font-size: calc(var(--u) * .9);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
  margin-bottom: calc(var(--u) * .7);
}


/* ============================================================================
   THE DATED SITE — five distinct eras of bad, not one template
   ========================================================================== */
.dt {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #FFFDF7;
  color: #2A2418;
  font-family: 'Times New Roman', Times, serif;
  padding: calc(var(--u) * 1.5);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.1);
  filter: saturate(.72);
}

/* --- Era 1 · 1998 table site, grey and blue ------------------------------- */
.dt--table { background: #C0C0C0; }
.dt--table .dt__head {
  background: none;
  border: 0;
  color: #000080;
  text-shadow: none;
  font-size: calc(var(--u) * 2.5);
  justify-content: center;
  padding: 0;
}
.dt--table .dt__logo { background: #FFFF80; color: #800000; border: calc(var(--u) * .3) ridge #808080; }
.dt--table .dt__nav { background: #FFFFCC; border: calc(var(--u) * .25) inset #808080; color: #0000EE; }
.dt--table .dt__side { background: #E0E0E0; border: calc(var(--u) * .3) outset #fff; }
.dt--table .dt__main { background: #FFFFFF; border: calc(var(--u) * .3) inset #808080; padding: calc(var(--u) * 1); }

/* --- Era 2 · 2003 frameset, beige and boxed ------------------------------- */
.dt--frames { background: #E8E4D8; padding: calc(var(--u) * 1); }
.dt--frames .dt__head {
  background: #6B7F5A;
  border: 0;
  border-bottom: calc(var(--u) * .5) solid #3E4A34;
  font-size: calc(var(--u) * 2.2);
}
.dt--frames .dt__logo { background: #FFF; color: #3E4A34; border: 1px solid #3E4A34; }
.dt--frames .dt__nav { background: #D5CFBC; border: 1px solid #A39B84; color: #33569E; }
.dt--frames .dt__side { background: #F4F1E6; border: 1px solid #A39B84; }
.dt--frames .dt__main { background: #FFFEF8; border: 1px solid #A39B84; padding: calc(var(--u) * 1); }

/* --- Era 3 · Flash-era splash, black with a loader ------------------------ */
.dt--splash {
  background: #0A0A0A;
  color: #9A9A9A;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1.6);
  padding: calc(var(--u) * 3);
  filter: none;
}
.dt--splash .dt__splashLogo {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: calc(var(--u) * 3.6);
  letter-spacing: calc(var(--u) * .5);
  color: #D8D2C4;
  text-align: center;
  text-transform: uppercase;
}
.dt--splash .dt__splashSub {
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.2);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #6A6A6A;
}
.dt__loader {
  width: 55%;
  height: calc(var(--u) * 1.5);
  border: 1px solid #4A4A4A;
  background: #1A1A1A;
  padding: 1px;
}
.dt__loader i { display: block; height: 100%; width: 68%; background: #8A7A4A; }
.dt--splash .dt__enter {
  font-family: Arial, sans-serif;
  font-size: calc(var(--u) * 1.3);
  letter-spacing: .2em;
  color: #C9A227;
  border: 1px solid #6A5A2A;
  padding: calc(var(--u) * .7) calc(var(--u) * 1.8);
}
.dt--splash .dt__plugin {
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.05);
  color: #5A5A5A;
  text-align: center;
}

/* --- Era 4 · 2005 corporate, navy gradient and stock imagery -------------- */
.dt--corp { background: #F0F0F0; padding: 0; gap: 0; }
.dt--corp .dt__banner {
  flex: none;
  height: 26%;
  position: relative;
  background: linear-gradient(#1F3F7A, #4E76B8);
  border-bottom: calc(var(--u) * .6) solid #C8A233;
  display: flex;
  align-items: center;
  padding: 0 calc(var(--u) * 1.6);
  gap: calc(var(--u) * 1.2);
  overflow: hidden;
}
.dt--corp .dt__banner b {
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(var(--u) * 2.3);
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .6);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.dt--corp .dt__stock {
  margin-left: auto;
  width: 34%;
  height: 74%;
  border: calc(var(--u) * .3) solid #fff;
  background: linear-gradient(135deg, #8FA8C8, #4A6690);
  position: relative;
  overflow: hidden;
  flex: none;
}
.dt--corp .dt__stock::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 32% 58%, #D8B49A 0 16%, transparent 17%),
    radial-gradient(circle at 62% 58%, #D8B49A 0 16%, transparent 17%),
    linear-gradient(#2A3D5C 0 100%);
  opacity: .8;
}
.dt--corp .dt__nav {
  background: #1F3F7A;
  border: 0;
  color: #DCE6F5;
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(var(--u) * 1.3);
  text-decoration: none;
  padding: calc(var(--u) * .7) calc(var(--u) * 1.6);
  text-align: left;
}
.dt--corp .dt__body { padding: calc(var(--u) * 1.4); gap: calc(var(--u) * 1.4); }
.dt--corp .dt__side { background: #E4EAF4; border: 1px solid #A8BAD4; }
.dt--corp .dt__side b { color: #1F3F7A; }
.dt--corp .dt__main { font-family: Arial, Helvetica, sans-serif; font-size: calc(var(--u) * 1.32); }
.dt--corp .dt__main h4 { font-family: Arial, Helvetica, sans-serif; color: #1F3F7A; }
.dt--corp .dt__foot { background: #E0E0E0; border-top: 1px solid #B0B0B0; padding: calc(var(--u) * .7); }

/* --- Era 5 · 2012 free theme, sidebar widgets everywhere ------------------ */
.dt--theme { background: #F7F7F7; font-family: Georgia, 'Times New Roman', serif; padding: 0; gap: 0; }
.dt--theme .dt__themeHead {
  flex: none;
  padding: calc(var(--u) * 1.4) calc(var(--u) * 1.6);
  background: linear-gradient(#5D7A52, #3F5637);
  color: #EDE7D6;
  border-bottom: calc(var(--u) * .4) solid #2C3D26;
}
.dt--theme .dt__themeHead b {
  display: block;
  font-size: calc(var(--u) * 2.4);
  letter-spacing: .02em;
  font-weight: 400;
  font-style: italic;
}
.dt--theme .dt__themeHead i {
  font-style: normal;
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.05);
  color: rgba(237, 231, 214, .7);
}
.dt--theme .dt__nav {
  background: #2C3D26;
  color: #C9D6BE;
  border: 0;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(var(--u) * 1.25);
  text-align: left;
  padding: calc(var(--u) * .65) calc(var(--u) * 1.6);
}
.dt--theme .dt__body { padding: calc(var(--u) * 1.4); grid-template-columns: 1fr 32%; }
.dt--theme .dt__side { order: 2; background: #EDEDE5; border: 1px solid #CFCFC2; }
.dt--theme .dt__main { order: 1; }
.dt--theme .dt__widgets {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * .45);
  margin-top: calc(var(--u) * .9);
  padding-top: calc(var(--u) * .7);
  border-top: 1px dotted #B0B0A0;
}
.dt--theme .dt__widgets em {
  font-style: normal;
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(var(--u) * 1.15);
  color: #6A6A5A;
}
.dt--theme .dt__tags { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .35); }
.dt--theme .dt__tags span {
  font-family: Arial, Helvetica, sans-serif;
  color: #4A6EA8;
  line-height: 1;
}

/* Palette variants so the same era does not read as the same site twice */
.dt--corp.dt--teal .dt__banner { background: linear-gradient(#0C5C58, #2E9A90); border-bottom-color: #9AD3CC; }
.dt--corp.dt--teal .dt__nav { background: #0C5C58; }
.dt--corp.dt--teal .dt__side { background: #E2F1EF; border-color: #A6CCC7; }
.dt--corp.dt--teal .dt__side b,
.dt--corp.dt--teal .dt__main h4 { color: #0C5C58; }
.dt--corp.dt--teal .dt__stock { background: linear-gradient(135deg, #A8CFC9, #4E8A84); }

.dt--theme.dt--slate .dt__themeHead { background: linear-gradient(#4A5A78, #2E3A4E); border-bottom-color: #1E2634; }
.dt--theme.dt--slate .dt__nav { background: #1E2634; color: #C2CBDA; }
.dt--theme.dt--slate .dt__side { background: #ECEEF2; border-color: #C6CBD4; }

.dt--frames.dt--rust .dt__head { background: #8A4A2E; border-bottom-color: #522814; }
.dt--frames.dt--rust .dt__logo { color: #8A4A2E; border-color: #8A4A2E; }

.dt--corp .dt__foot,
.dt--theme .dt__foot { padding: calc(var(--u) * .6) calc(var(--u) * 1.6); }

.dt__news {
  margin-top: calc(var(--u) * .8);
  padding-top: calc(var(--u) * .6);
  border-top: 1px dotted #B8AF9A;
}
.dt__news b { display: block; color: #8C1A1A; font-size: calc(var(--u) * 1.5); margin-bottom: calc(var(--u) * .35); }
.dt__news i {
  display: block;
  font-style: normal;
  font-size: calc(var(--u) * 1.25);
  color: #1A3E8C;
  text-decoration: underline;
  margin-bottom: calc(var(--u) * .28);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dt__news em {
  font-style: normal;
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.05);
  color: #7A7060;
  text-decoration: none;
}
.dt__tbl {
  width: 100%;
  margin-top: calc(var(--u) * .7);
  margin-bottom: calc(var(--u) * .7);
  border-collapse: collapse;
  font-size: calc(var(--u) * 1.2);
  table-layout: fixed;
}
.dt__tbl td {
  border: 1px solid #A99F8A;
  padding: calc(var(--u) * .3) calc(var(--u) * .5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dt__tbl tr:first-child td { background: #DCD5C0; font-weight: 700; }
.dt--corp .dt__tbl tr:first-child td { background: #D3DEEE; }
.dt--table .dt__tbl tr:first-child td { background: #C0C0C0; }

.dt__addr {
  margin-top: calc(var(--u) * .8);
  padding-top: calc(var(--u) * .6);
  border-top: 1px dotted #B8AF9A;
  font-size: calc(var(--u) * 1.2);
  line-height: 1.5;
  color: #4A4438;
}
.dt__addr b { display: block; color: #6B3B00; text-decoration: underline; margin-bottom: calc(var(--u) * .2); }

/* --- Shared dated-site parts ---------------------------------------------- */
.dt__head {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.3);
  padding: calc(var(--u) * 1.2) calc(var(--u) * 1.5);
  background: linear-gradient(#5B7DA8, #2E4C74);
  border: calc(var(--u) * .3) outset #8FA9C6;
  color: #fff;
  font-size: calc(var(--u) * 2.1);
  font-weight: 700;
  letter-spacing: .02em;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .4);
  white-space: nowrap;
  overflow: hidden;
  flex: none;
}
.dt__logo {
  flex: none;
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.8);
  padding: calc(var(--u) * .4) calc(var(--u) * .8);
  background: #E8E2CE;
  color: #2E4C74;
  border: calc(var(--u) * .3) outset #fff;
  text-shadow: none;
}
.dt__nav {
  flex: none;
  font-size: calc(var(--u) * 1.4);
  text-align: center;
  color: #1A3E8C;
  text-decoration: underline;
  padding: calc(var(--u) * .4) 0;
  border-block: 1px solid #C9C1AB;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dt__body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 28% 1fr;
  gap: calc(var(--u) * 1.5);
}
.dt__side {
  background: #EFEADA;
  border: 1px solid #C9C1AB;
  padding: calc(var(--u) * 1.1);
  font-size: calc(var(--u) * 1.35);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * .4);
  min-width: 0;
  overflow: hidden;
}
.dt__side b { color: #6B3B00; text-decoration: underline; }
.dt__side i { color: #1A3E8C; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt__main { position: relative; font-size: calc(var(--u) * 1.4); min-width: 0; overflow: hidden; }
.dt__main h4 {
  font-family: inherit;
  font-size: calc(var(--u) * 2.4);
  letter-spacing: 0;
  color: #8C1A1A;
  margin-bottom: calc(var(--u) * .8);
}
.dt__main p { margin: 0 0 calc(var(--u) * .8); line-height: 1.45; text-align: justify; }
.dt__flag {
  display: inline-block;
  margin-top: calc(var(--u) * .6);
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.15);
  color: #B00;
  background: #FF0;
  padding: calc(var(--u) * .3) calc(var(--u) * .7);
  border: 1px solid #B00;
}
.dt__broken {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .5);
  margin-top: calc(var(--u) * .7);
  padding: calc(var(--u) * .7) calc(var(--u) * 1);
  border: 1px solid #999;
  background: #F4F4F4;
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(var(--u) * 1.1);
  color: #666;
}
.dt__broken::before {
  content: "";
  width: calc(var(--u) * 1.6);
  height: calc(var(--u) * 1.6);
  flex: none;
  border: 1px solid #B00;
  background:
    linear-gradient(45deg, transparent 44%, #B00 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, #B00 44% 56%, transparent 56%),
    #fff;
}
.dt__counter {
  margin-top: auto;
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.05);
  color: #444;
  text-align: center;
  line-height: 1.4;
}
.dt__counter b { display: block; color: #000; background: #000; color: #0F0; text-decoration: none; letter-spacing: .1em; }
.dt__foot {
  flex: none;
  font-size: calc(var(--u) * 1.15);
  text-align: center;
  color: #7A7060;
  border-top: 1px solid #C9C1AB;
  padding-top: calc(var(--u) * .6);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


/* ============================================================================
   PHOTOGRAPHY TREATMENT
   The single biggest tell that a mockup is fake is artwork that is too clean.
   Real photographs at this size have grain, soft edges and a little vignette.
   Every picture on the page gets the same pass, so they read as photographs
   shot by the same person rather than as illustrations.
   ========================================================================== */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mk__shot::after,
.mk__cover::before,
.ig__grid > span::after,
.ig__pfp::after,
.fb__cover::after,
.mhero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: var(--grain);
  background-size: calc(var(--u, 4px) * 26) calc(var(--u, 4px) * 26);
  opacity: .34;
  mix-blend-mode: overlay;
}
.mhero::before { background-size: 180px 180px; opacity: .28; }

/* A little corner falloff, the way a lens gives you */
.mk__shot, .mk__cover { box-shadow: inset 0 0 calc(var(--u) * 5) rgba(10, 14, 22, .16); }
.mk__cover { box-shadow: none; }
.mk__cover::before { box-shadow: inset 0 0 calc(var(--u) * 9) rgba(10, 14, 22, .3); }


/* ============================================================================
   PER-BUSINESS VOICE
   A nail studio, a plumber and a pizzeria do not share a typeface, a colour or
   a sense of urgency. Sharing one is what makes a set of mockups look
   generated. Each palette below sets its own display face, casing, tracking
   and colour, and the layouts differ underneath.
   ========================================================================== */
.mk__page { font-family: var(--mk-body, var(--body)); }
.mk__h, .mk__ftitle, .mk__nav b, .mk__mast b, .mk__strip b,
.mk__rows b, .mk__quote b, .mk__foot b, .mk__btn, .mk__urgent b, .mk__menu b {
  font-family: var(--mk-display, var(--display));
}
.mk__h {
  text-transform: var(--mk-case, none);
  letter-spacing: var(--mk-track, -.035em);
  font-weight: var(--mk-weight, 700);
}
.mk__nav b { text-transform: var(--mk-case, none); letter-spacing: var(--mk-track, -.03em); }

/* Not every brand has a square logo mark — several should just be a wordmark */
.mk__nav--plain b::before { display: none; }
.mk__nav--dot b::before { border-radius: 50%; }


/* ============================================================================
   NEW BANDS
   ========================================================================== */

/* Trades: the phone number is the whole point, so it gets a bar of its own */
.mk__urgent {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 1.15) var(--px);
  background: var(--mk-ink, var(--ink));
  color: var(--mk-btnInk, #fff);
}
.mk__urgent b { font-size: calc(var(--u) * 2.1); letter-spacing: -.02em; white-space: nowrap; }
.mk__urgent i {
  font-style: normal;
  font-family: var(--mono);
  font-size: calc(var(--u) * 1);
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mk__urgent em {
  font-style: normal;
  font-weight: 700;
  font-size: calc(var(--u) * 1.15);
  padding: calc(var(--u) * .6) calc(var(--u) * 1.3);
  border-radius: calc(var(--u) * .6);
  background: var(--mk-accent, #fff);
  color: #10141E;
  white-space: nowrap;
}

/* Trades again: the certifications are what actually wins the job */
.mk__badges {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * .8);
  padding: calc(var(--u) * 1.1) var(--px);
  background: #fff;
  border-bottom: 1px solid rgba(11, 19, 48, .1);
}
.mk__badges span {
  font-family: var(--mono);
  font-size: calc(var(--u) * .92);
  letter-spacing: .04em;
  color: #46536E;
  border: 1px solid rgba(11, 19, 48, .18);
  border-radius: calc(var(--u) * .5);
  padding: calc(var(--u) * .42) calc(var(--u) * .8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mk__badges span.on { border-color: transparent; background: var(--mk-ink); color: var(--mk-btnInk, #fff); }

/* Food: a menu, set as a menu — two columns with dotted leaders */
.mk__menu {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 calc(var(--u) * 2.4);
  align-content: space-evenly;
  padding: calc(var(--u) * 1.6) var(--px);
}
.mk__menu > em {
  grid-column: 1 / -1;
  font-style: normal;
  font-family: var(--mono);
  font-size: calc(var(--u) * .95);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mk-ink);
  margin-bottom: calc(var(--u) * .7);
}
.mk__menu > span {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * .5);
  padding-block: calc(var(--u) * .42);
  min-width: 0;
}
.mk__menu b {
  font-size: calc(var(--u) * 1.24);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mk__menu i {
  flex: 1;
  height: 1px;
  border-bottom: 1px dotted currentColor;
  opacity: .35;
  min-width: calc(var(--u) * 1.5);
}
.mk__menu u {
  text-decoration: none;
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.15);
  white-space: nowrap;
}

/* Salons: a treatment list with duration and price */
.mk__price {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--u) * .1);
  padding: calc(var(--u) * 1.5) var(--px);
}
.mk__price > span {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: calc(var(--u) * 1.2);
  padding-block: calc(var(--u) * .62);
  border-bottom: 1px solid rgba(11, 19, 48, .1);
  min-width: 0;
}
.mk__price > span:last-child { border-bottom: 0; }
.mk__price b {
  font-size: calc(var(--u) * 1.32);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mk__price i {
  font-style: normal;
  font-family: var(--mono);
  font-size: calc(var(--u) * 1);
  color: #8A96AE;
  white-space: nowrap;
}
.mk__price u {
  text-decoration: none;
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.18);
  font-weight: 700;
  color: var(--mk-ink);
  white-space: nowrap;
}

/* Everyone: three short reviews with a source, because that is what people read */
.mk__reviews {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u) * 1);
  padding: calc(var(--u) * 1.3) var(--px);
  background: var(--mk-strip, #F3F6FB);
  border-top: 1px solid rgba(11, 19, 48, .08);
}
.mk__reviews > span { min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * .35); }
.mk__reviews q {
  quotes: none;
  font-size: calc(var(--u) * 1.05);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mk__reviews i {
  font-style: normal;
  font-family: var(--mono);
  font-size: calc(var(--u) * .88);
  color: #8A96AE;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ============================================================================
   BEFORE — INSTAGRAM ONLY
   Most of these businesses do not have a bad website. They have no website,
   and everything lives on a profile they do not own, where the prices are in
   a story highlight and booking means sending a message.
   ========================================================================== */
.ig {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  color: #000;
  font-family: var(--body);
  display: flex;
  flex-direction: column;
}
.ig__chrome {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 1.1) var(--px);
  border-bottom: 1px solid #DBDBDB;
}
.ig__logo {
  font-family: 'Georgia', serif;
  font-size: calc(var(--u) * 2);
  font-style: italic;
  letter-spacing: -.01em;
  margin-right: auto;
}
.ig__search {
  width: 38%;
  height: calc(var(--u) * 2.4);
  border-radius: calc(var(--u) * .6);
  background: #EFEFEF;
}
.ig__icons { display: flex; gap: calc(var(--u) * .8); }
.ig__icons i {
  width: calc(var(--u) * 1.6);
  height: calc(var(--u) * 1.6);
  border: calc(var(--u) * .22) solid #262626;
  border-radius: calc(var(--u) * .35);
}
.ig__icons i:nth-child(2) { border-radius: 50%; }

.ig__head {
  flex: none;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(var(--u) * 2.2);
  padding: calc(var(--u) * 1.8) var(--px) calc(var(--u) * 1.2);
}
.ig__pfp {
  position: relative;
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
  border-radius: 50%;
  overflow: hidden;
  background: #EFEFEF;
}
.ig__meta { min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * .8); }
.ig__user { display: flex; align-items: center; gap: calc(var(--u) * .8); }
.ig__user b { font-size: calc(var(--u) * 1.7); font-weight: 400; }
.ig__user span {
  font-size: calc(var(--u) * 1.1);
  font-weight: 700;
  color: #fff;
  background: #0095F6;
  border-radius: calc(var(--u) * .5);
  padding: calc(var(--u) * .45) calc(var(--u) * 1.3);
}
.ig__user em {
  font-style: normal;
  font-size: calc(var(--u) * 1.1);
  font-weight: 700;
  background: #EFEFEF;
  border-radius: calc(var(--u) * .5);
  padding: calc(var(--u) * .45) calc(var(--u) * 1.1);
}
.ig__stats { display: flex; gap: calc(var(--u) * 2.2); font-size: calc(var(--u) * 1.2); }
.ig__stats b { font-weight: 700; }
.ig__bio { font-size: calc(var(--u) * 1.18); line-height: 1.45; }
.ig__bio b { display: block; font-weight: 700; }
.ig__bio a { color: #00376B; font-weight: 600; }

.ig__hl {
  flex: none;
  display: flex;
  gap: calc(var(--u) * 1.6);
  padding: calc(var(--u) * .4) var(--px) calc(var(--u) * 1.3);
}
.ig__hl span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * .4);
  font-size: calc(var(--u) * .95);
  color: #262626;
}
.ig__hl i {
  width: calc(var(--u) * 5.6);
  height: calc(var(--u) * 5.6);
  border-radius: 50%;
  background: #EFEFEF;
  border: calc(var(--u) * .25) solid #DBDBDB;
}
.ig__tabs {
  flex: none;
  display: flex;
  justify-content: center;
  gap: calc(var(--u) * 4);
  border-top: 1px solid #DBDBDB;
  font-family: var(--mono);
  font-size: calc(var(--u) * .95);
  letter-spacing: .1em;
  color: #8E8E8E;
}
.ig__tabs span { padding: calc(var(--u) * 1) 0; }
.ig__tabs span.on { color: #262626; box-shadow: inset 0 calc(var(--u) * .28) 0 #262626; }
.ig__grid {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u) * .5);
  padding: 0 var(--px) calc(var(--u) * 1.2);
}
.ig__grid > span { position: relative; overflow: hidden; background: #EFEFEF; min-height: 0; }


/* ============================================================================
   BEFORE — A FACEBOOK PAGE AND NOTHING ELSE
   ========================================================================== */
.fb {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #F0F2F5;
  color: #050505;
  font-family: var(--body);
  display: flex;
  flex-direction: column;
}
.fb__chrome {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 1) var(--px);
  background: #fff;
  border-bottom: 1px solid #DADDE1;
}
.fb__logo {
  width: calc(var(--u) * 2.6);
  height: calc(var(--u) * 2.6);
  border-radius: 50%;
  background: #1877F2;
  flex: none;
}
.fb__chrome .ig__search { background: #F0F2F5; margin-right: auto; }
.fb__cover {
  position: relative;
  flex: none;
  height: 26%;
  overflow: hidden;
  background: #D8DBDF;
}
.fb__id {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 1.4);
  padding: 0 var(--px);
  margin-top: calc(var(--u) * -3.4);
  background: #fff;
}
.fb__pfp {
  position: relative;
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 9);
  border-radius: 50%;
  overflow: hidden;
  border: calc(var(--u) * .5) solid #fff;
  background: #E4E6EB;
  flex: none;
}
.fb__name { padding-bottom: calc(var(--u) * .8); min-width: 0; }
.fb__name b { display: block; font-family: var(--display); font-size: calc(var(--u) * 2); font-weight: 700; letter-spacing: -.02em; }
.fb__name i { font-style: normal; font-size: calc(var(--u) * 1.05); color: #65676B; }
.fb__act { margin-left: auto; display: flex; gap: calc(var(--u) * .6); padding-bottom: calc(var(--u) * .9); }
.fb__act span {
  font-size: calc(var(--u) * 1.05);
  font-weight: 700;
  border-radius: calc(var(--u) * .5);
  padding: calc(var(--u) * .5) calc(var(--u) * 1.2);
  background: #E4E6EB;
  white-space: nowrap;
}
.fb__act span.on { background: #1877F2; color: #fff; }
.fb__tabs {
  flex: none;
  display: flex;
  gap: calc(var(--u) * 1.8);
  padding: calc(var(--u) * .2) var(--px) 0;
  background: #fff;
  border-bottom: 1px solid #DADDE1;
  font-size: calc(var(--u) * 1.08);
  color: #65676B;
}
.fb__tabs span { padding: calc(var(--u) * .9) 0; }
.fb__tabs span.on { color: #1877F2; box-shadow: inset 0 calc(var(--u) * -.28) 0 #1877F2; }
.fb__body {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  grid-auto-rows: min-content;
  gap: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 1.2) var(--px);
  align-content: start;
}
.fb__side, .fb__feed { min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1.2); }
.fb__card {
  background: #fff;
  border-radius: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 1.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
  min-width: 0;
}
.fb__card > b {
  display: block;
  font-family: var(--display);
  font-size: calc(var(--u) * 1.3);
  font-weight: 700;
  margin-bottom: calc(var(--u) * .7);
}
.fb__row {
  display: flex;
  gap: calc(var(--u) * .7);
  font-size: calc(var(--u) * 1.05);
  color: #65676B;
  padding-block: calc(var(--u) * .3);
  min-width: 0;
}
.fb__row i {
  flex: none;
  width: calc(var(--u) * 1.5);
  height: calc(var(--u) * 1.5);
  border-radius: 50%;
  background: #E4E6EB;
  margin-top: calc(var(--u) * .12);
}
.fb__row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb__post { display: flex; flex-direction: column; gap: calc(var(--u) * .6); }
.fb__poster { display: flex; align-items: center; gap: calc(var(--u) * .7); }
.fb__poster i { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); border-radius: 50%; background: #E4E6EB; flex: none; }
.fb__poster b { font-size: calc(var(--u) * 1.1); font-weight: 700; }
.fb__poster em { font-style: normal; font-family: var(--mono); font-size: calc(var(--u) * .88); color: #65676B; }
.fb__text { font-size: calc(var(--u) * 1.1); line-height: 1.45; }
.fb__eng {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #E4E6EB;
  padding-top: calc(var(--u) * .55);
  font-family: var(--mono);
  font-size: calc(var(--u) * .9);
  color: #65676B;
}


/* ============================================================================
   PER-BUSINESS PALETTE
   ========================================================================== */
[data-art="nails"] {
  --mk-ink: #3A2E30; --mk-accent: #D9B8A8; --mk-foot: #241C1E;
  --mk-paper: #FBF7F4; --mk-strip: #F2EAE4;
  --mk-display: 'Playfair Display', Georgia, serif; --mk-track: -.01em;
}
[data-art="dining"] {
  --mk-ink: #2E4034; --mk-accent: #C9A961; --mk-foot: #16201A;
  --mk-paper: #FAF7F0; --mk-strip: #F0EBE0;
  --mk-display: 'Playfair Display', Georgia, serif; --mk-track: -.015em;
}
[data-art="plumb"] {
  --mk-ink: #16447E; --mk-accent: #F5A623; --mk-foot: #0C2648; --mk-strip: #EDF3FA;
  --mk-display: 'Oswald', 'Arial Narrow', sans-serif; --mk-track: 0; --mk-weight: 600;
}
[data-art="roof"] {
  --mk-ink: #8A2B22; --mk-accent: #E8C48A; --mk-foot: #241412; --mk-strip: #F6EEEA;
  --mk-display: 'Oswald', 'Arial Narrow', sans-serif; --mk-case: uppercase; --mk-track: .005em; --mk-weight: 600;
}
[data-art="barber"] {
  --mk-ink: #B08A3E; --mk-accent: #E0C179; --mk-foot: #08080A; --mk-btnInk: #14140F;
  --mk-display: 'Oswald', 'Arial Narrow', sans-serif; --mk-case: uppercase; --mk-track: .04em; --mk-weight: 500;
}
[data-art="pizza"] {
  --mk-ink: #A32B22; --mk-accent: #F2D48A; --mk-foot: #1C0F0A;
  --mk-paper: #FDF8EE; --mk-strip: #F7EDDC;
  --mk-display: 'Playfair Display', Georgia, serif; --mk-track: -.02em;
}
[data-art="elec"] {
  --mk-ink: #16233E; --mk-accent: #F2C230; --mk-foot: #0A1121; --mk-strip: #EEF1F6;
  --mk-display: 'Space Grotesk', system-ui, sans-serif; --mk-track: -.03em;
}
[data-art="farm"] {
  --mk-ink: #46612E; --mk-accent: #D9C48E; --mk-foot: #1C2814;
  --mk-paper: #FBFAF3; --mk-strip: #F0F2E6;
  --mk-display: 'Playfair Display', Georgia, serif; --mk-track: -.015em;
}
[data-art="floral"] {
  --mk-ink: #6E4A56; --mk-accent: #E8CBD2; --mk-foot: #2A1E22;
  --mk-paper: #FCF9F8; --mk-strip: #F5EDEE;
  --mk-display: 'Playfair Display', Georgia, serif; --mk-track: -.005em;
}


/* --- Before / After control -----------------------------------------------
   Lives under the mockup rather than over it, so it never covers content. */
.card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.flip {
  display: flex;
  padding: 2px;
  border-radius: 999px;
  background: var(--porcelain);
  border: 1px solid var(--line);
}
.flip__btn {
  padding: .28rem .6rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.flip__btn:hover { color: var(--graphite); }
.flip__btn.is-on {
  color: #fff;
  background: var(--ink);
  font-weight: 700;
}

/* --- Card copy ------------------------------------------------------------ */
.card__body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.15rem 1.35rem 1.4rem;
  flex: 1;
}
.card__meta {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--beam);
}
.card__title { font-size: 1.14rem; margin: 0; }
.card__text { color: var(--slate); font-size: .92rem; line-height: 1.55; margin: 0; flex: 1; }
.card__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .55rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: .87rem;
  color: var(--graphite);
  transition: color .2s var(--ease);
}
.card__cta .ico { width: 1em; height: 1em; transition: transform .25s var(--ease); }
.card:hover .card__cta,
.card__cta:hover { color: var(--beam); }
.card:hover .card__cta .ico,
.card__cta:hover .ico { transform: translateX(4px); }

.work__foot {
  margin: 2.5rem 0 0;
  text-align: center;
  color: var(--slate);
  font-size: .96rem;
}

/* --- Project dialog ----------------------------------------------------- */
.modal {
  width: min(940px, 92vw);
  max-height: min(88vh, 920px);
  padding: 0;
  margin: auto;
  border: 0;
  border-radius: var(--r-lg);
  background: #fff;
  color: var(--graphite);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.modal::backdrop {
  background: rgba(5, 13, 43, .74);
  backdrop-filter: blur(6px);
}
.modal[open] { animation: modal-in .3s var(--ease); }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.modal__body { max-height: min(88vh, 920px); overflow-y: auto; }
.modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 5;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(5, 13, 43, .6);
  backdrop-filter: blur(6px);
  transition: background-color .22s var(--ease), transform .22s var(--ease);
}
.modal__close:hover { background: var(--ink); transform: rotate(90deg); }
.modal__close .ico { width: 18px; height: 18px; stroke-width: 2.2; }

/* The dialog banner reuses the card's art gradient, over a fine grid */
.mhero {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: linear-gradient(150deg, var(--ink-2), var(--beam));
}
.mhero > .scene { position: absolute; inset: 0; }
.mhero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .1) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 70% 10%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 90% at 70% 10%, #000, transparent 75%);
}
.mhero__scrim {
  position: absolute;
  inset: auto 0 0;
  padding: 3.5rem 1.6rem 1.4rem;
  background: linear-gradient(transparent, rgba(5, 13, 43, .92));
  color: #fff;
}
.mhero__meta {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--volt);
  margin: 0 0 .3rem;
}
.mhero__title { font-size: clamp(1.5rem, 3.4vw, 2.1rem); color: #fff; }

.mbody { padding: clamp(1.4rem, 3vw, 2.2rem); display: grid; gap: 2rem; }
.mbody h4 {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--beam);
  margin: 0 0 .6rem;
}
.mbody p { color: var(--slate); }
.mbody__did { display: grid; gap: .55rem; margin: 0 0 1.4rem; }
.mbody__did li {
  position: relative;
  padding-left: 1.65rem;
  font-size: .95rem;
  color: var(--graphite);
}
.mbody__did .ico {
  position: absolute;
  left: 0;
  top: .22em;
  width: 1.05em;
  height: 1.05em;
  color: var(--volt);
  stroke-width: 2.6;
}
/* "A good fit if" — plain checklist, no invented outcome numbers */
.mfit { display: grid; gap: .55rem; margin: 0; }
.mfit li {
  position: relative;
  padding-left: 1.1rem;
  font-size: .93rem;
  color: var(--slate);
}
.mfit li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--beam);
}
/* Needs to out-specify `.mbody h4`, which resets margin-top to 0 */
.mbody h4.mbody__h2 { margin-top: 1.8rem; }

.mfacts { margin-top: 1.2rem; display: grid; gap: .5rem; }
.mfacts div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .5rem;
  border-bottom: 1px solid var(--line);
  font-size: .88rem;
}
.mfacts dt { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.mfacts dd { margin: 0; font-weight: 600; text-align: right; }

.mcta {
  margin-top: 1.6rem;
  padding: 1.2rem 1.3rem;
  border-radius: var(--r);
  background: var(--ink);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.mcta p { margin: 0; font-size: .95rem; color: rgba(206, 220, 250, .82); max-width: 28rem; }


/* ============================================================================
   09  PROCESS
   ========================================================================== */
.process {
  background: var(--ink);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.process .section__head { max-width: 40rem; }
.process .section__title { color: #fff; }

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  position: relative;
}
.step {
  position: relative;
  padding: 1.9rem 1.5rem 1.7rem;
  border-radius: var(--r);
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--line-dark);
  transition: transform .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}
.step:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, .06);
  border-color: rgba(53, 230, 200, .4);
}
/* The connecting rail: this is a genuine sequence, so the numbers mean something */
.step::before {
  content: "";
  position: absolute;
  top: 2.6rem;
  left: -1.6rem;
  width: 1.6rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(53, 230, 200, .45));
  display: none;
}
.step__num {
  display: block;
  font-family: var(--mono);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  margin-bottom: .9rem;
  background: var(--sweep);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.step__when {
  display: inline-block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--volt);
  padding: .25rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(53, 230, 200, .3);
  margin-bottom: .8rem;
}
.step__title { font-size: 1.2rem; margin-bottom: .55rem; }
.step__text { color: rgba(206, 220, 250, .74); font-size: .94rem; margin: 0; }

.process__cta {
  margin-top: 3rem;
  padding: 1.6rem;
  border-radius: var(--r);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line-dark);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  text-align: center;
}
.process__cta p {
  margin: 0;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -.02em;
}


/* ============================================================================
   10  WHY CHOOSE US
   ========================================================================== */
.why { background: var(--paper); }

.why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}
.why__item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.6rem .25rem;
  border-bottom: 1px solid var(--line);
  transition: background-color .25s var(--ease);
}
.why__item:hover { background: var(--porcelain); }
.why__tick {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: var(--sweep);
  margin-top: .1rem;
}
.why__tick .ico { width: 15px; height: 15px; stroke-width: 2.8; }
.why__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.06rem;
  margin-bottom: .35rem;
}
.why__ico { width: 1.15em; height: 1.15em; color: var(--beam); }
.why__text { color: var(--slate); font-size: .94rem; margin: 0; }


/* ============================================================================
   11  PRICING
   ========================================================================== */
.pricing { background: var(--porcelain); }

.tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.35rem;
  align-items: start;
}
.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.7rem;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--line);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.tier:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

.tier--featured {
  background: var(--ink);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-lg);
}
.tier__flag {
  position: absolute;
  top: -.75rem;
  left: 1.7rem;
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .35rem .8rem;
  border-radius: 999px;
  background: var(--sweep);
  color: var(--ink);
}
.tier__name { font-size: 1.35rem; margin-bottom: .5rem; }
.tier__for {
  font-size: .9rem;
  color: var(--slate);
  min-height: 3.2em;
  margin-bottom: 1.2rem;
}
.tier--featured .tier__for { color: rgba(206, 220, 250, .78); }

/* No price sits here — every job is quoted individually. The anchor holds the
   thing that genuinely differs between packages: how long it takes to launch. */
.tier__anchor {
  margin: 0 0 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.tier__anchorLabel {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: .4rem;
}
.tier__anchorValue {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.6vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.05;
}
.tier--featured .tier__anchor { border-bottom-color: var(--line-dark); }
.tier--featured .tier__anchorLabel { color: rgba(190, 208, 240, .62); }
.tier--featured .tier__anchorValue {
  background: var(--sweep);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tier__list { display: grid; gap: .7rem; margin-bottom: 1.9rem; flex: 1; }
.tier__list li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: .93rem;
  line-height: 1.5;
}
.tier__list .ico {
  width: 1.05em;
  height: 1.05em;
  margin-top: .3em;
  color: var(--beam);
  stroke-width: 2.6;
}
.tier--featured .tier__list .ico { color: var(--volt); }

.pricing__note {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 2.5rem 0 0;
  text-align: center;
  font-size: .95rem;
  color: var(--slate);
}
.pricing__note .ico { color: var(--beam); }


/* ============================================================================
   12  FAQ — native <details>, no JavaScript involved
   ========================================================================== */
.faq { background: var(--paper); }

.faq__grid {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.qa { border-bottom: 1px solid var(--line); }

.qa__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem .25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--graphite);
  transition: color .2s var(--ease);
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q:hover { color: var(--beam); }

/* Plus that becomes a minus, drawn from two bars */
.qa__mark {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: .15rem;
  border-radius: 50%;
  background: var(--porcelain);
  transition: background .25s var(--ease), rotate .3s var(--ease);
}
.qa__mark::before,
.qa__mark::after {
  content: "";
  position: absolute;
  inset: 50% 25%;
  height: 1.5px;
  translate: 0 -50%;
  border-radius: 2px;
  background: var(--beam);
  transition: opacity .25s var(--ease);
}
.qa__mark::after { rotate: 90deg; }
.qa[open] .qa__mark { background: var(--ink); rotate: 180deg; }
.qa[open] .qa__mark::before,
.qa[open] .qa__mark::after { background: var(--volt); }
.qa[open] .qa__mark::after { opacity: 0; }

.qa__a { padding: 0 2.5rem 1.5rem .25rem; }
.qa__a p { margin: 0; color: var(--slate); font-size: .98rem; max-width: 62ch; }
.qa[open] .qa__a { animation: qa-open .32s var(--ease); }
@keyframes qa-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.faq__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 2.5rem 0 0;
  text-align: center;
  font-size: .95rem;
  color: var(--slate);
}
.faq__foot .ico { color: var(--beam); }


/* ============================================================================
   13  ABOUT
   ========================================================================== */
.about { background: var(--ink); color: #fff; }
.about__inner { display: grid; gap: clamp(2.2rem, 4vw, 4rem); align-items: center; }
.about .section__title { color: #fff; margin-bottom: 1.4rem; max-width: 20ch; }
.about__copy p { color: rgba(206, 220, 250, .78); max-width: 38rem; }
.about__copy .btn { margin-top: .9rem; }

.about__facts {
  border-top: 1px solid var(--line-dark);
  background: rgba(255, 255, 255, .03);
  border-radius: var(--r);
  padding: .4rem 1.3rem;
}
.about__facts li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line-dark);
}
.about__facts li:last-child { border-bottom: 0; }
.about__k {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(190, 208, 240, .6);
}
.about__v {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.02em;
  text-align: right;
}


/* ============================================================================
   14  CONTACT
   ========================================================================== */
.contact {
  position: relative;
  isolation: isolate;
  background: var(--ink-2);
  color: #fff;
  overflow: hidden;
}
.contact__glow {
  position: absolute;
  z-index: -1;
  top: -30%;
  left: 50%;
  translate: -50% 0;
  width: 120%;
  height: 90%;
  background:
    radial-gradient(ellipse 45% 60% at 30% 40%, rgba(77, 139, 255, .35), transparent 70%),
    radial-gradient(ellipse 40% 55% at 72% 55%, rgba(53, 230, 200, .28), transparent 70%);
  filter: blur(30px);
}
.contact__inner { display: grid; gap: clamp(2.2rem, 4vw, 3.5rem); align-items: start; }

.contact__title {
  font-size: clamp(2.1rem, 4.8vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  margin-bottom: 1.2rem;
}
.contact__lead {
  color: rgba(214, 226, 250, .8);
  max-width: 32rem;
  margin-bottom: 2rem;
}

.mailcard {
  display: block;
  padding: 1.15rem 1.35rem;
  border-radius: var(--r);
  border: 1px solid rgba(53, 230, 200, .3);
  background: rgba(53, 230, 200, .07);
  transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}
.mailcard:hover { border-color: var(--volt); background: rgba(53, 230, 200, .13); transform: translateY(-2px); }
.mailcard__label {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(190, 208, 240, .65);
  margin-bottom: .45rem;
}
.mailcard__addr {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.02rem, 2.3vw, 1.4rem);
  letter-spacing: -.03em;
  color: var(--volt);
  word-break: break-word;
}

.copybtn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .85rem;
  padding: .5rem .95rem;
  border-radius: 999px;
  border: 1px solid var(--line-dark);
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .04em;
  color: rgba(206, 220, 250, .78);
  transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.copybtn:hover { color: #fff; border-color: var(--volt); background: rgba(53, 230, 200, .08); }
.copybtn.is-done { color: var(--volt); border-color: var(--volt); }

.promises { margin-top: 2rem; display: grid; gap: .7rem; }
.promises li {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .93rem;
  color: rgba(206, 220, 250, .8);
}
.promises .ico { color: var(--volt); stroke-width: 2.6; width: 1.05em; height: 1.05em; }

/* --- Form --------------------------------------------------------------- */
.formcard {
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border-radius: var(--r-lg);
  background: #fff;
  color: var(--graphite);
  box-shadow: var(--shadow-lg);
}
.formcard__title { font-size: 1.4rem; margin-bottom: .4rem; }
.formcard__sub { font-size: .92rem; color: var(--slate); margin-bottom: 1.5rem; }

.field { margin-bottom: 1.05rem; }
.field label {
  display: block;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: .4rem;
}
.field label span { color: var(--beam); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .8rem .95rem;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--line);
  background: #FBFCFE;
  font-size: .96rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 108px; font-family: var(--body); }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B8C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 18px;
  padding-right: 2.6rem;
}
.field input::placeholder,
.field textarea::placeholder { color: #A6B3C9; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--beam);
  box-shadow: 0 0 0 4px rgba(77, 139, 255, .14);
}
.field.is-invalid input,
.field.is-invalid textarea { border-color: #E0574B; background: #FFF7F6; }
.field__error {
  display: none;
  margin: .4rem 0 0;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .02em;
  color: #C93B2E;
}
.field.is-invalid .field__error { display: block; }

.formcard .btn { margin-top: .5rem; }
.formcard__note {
  margin: 1rem 0 0;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--slate);
}
.formcard__note.is-sent {
  padding: .85rem 1rem;
  border-radius: var(--r-sm);
  background: rgba(53, 230, 200, .12);
  border: 1px solid rgba(53, 230, 200, .5);
  color: #0B6B5C;
  font-weight: 600;
}


/* ============================================================================
   15  FOOTER
   ========================================================================== */
.footer {
  background: var(--ink);
  color: rgba(206, 220, 250, .68);
  border-top: 1px solid var(--line-dark);
  font-size: .93rem;
}
.footer__top {
  display: grid;
  gap: 2.5rem;
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
}
.footer__brand .brand { margin-bottom: 1rem; }
.footer__blurb { max-width: 26rem; margin-bottom: 1.4rem; }

.social { display: flex; gap: .55rem; }
.social a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1px solid var(--line-dark);
  color: rgba(206, 220, 250, .8);
  transition: color .22s var(--ease), border-color .22s var(--ease),
              background-color .22s var(--ease), transform .22s var(--ease);
}
.social a:hover { color: var(--volt); border-color: var(--volt); background: rgba(53, 230, 200, .08); transform: translateY(-2px); }
.social .ico { width: 18px; height: 18px; }

.footer__col h3 {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1rem;
}
.footer__col ul { display: grid; gap: .55rem; }
.footer__col a { transition: color .2s var(--ease); }
.footer__col a:hover { color: var(--volt); }

.footer__mail {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.02em;
  color: var(--volt);
  margin-bottom: .8rem;
  word-break: break-word;
}
.footer__mail:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__contact p { margin-bottom: 1.3rem; }

.totop {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--line-dark);
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .06em;
  color: rgba(206, 220, 250, .85);
  transition: color .22s var(--ease), border-color .22s var(--ease), background-color .22s var(--ease);
}
.totop:hover { color: var(--ink); background: var(--volt); border-color: var(--volt); }
.totop .ico { width: 1em; height: 1em; transition: transform .25s var(--ease); }
.totop:hover .ico { transform: translateY(-3px); }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  padding-block: 1.4rem;
  border-top: 1px solid var(--line-dark);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: rgba(190, 208, 240, .5);
}
.footer__bar p { margin: 0; }
.footer__legal { display: flex; gap: .6rem; }
.footer__legal a:hover { color: var(--volt); }


/* ============================================================================
   16  SCROLL REVEAL & MOTION PREFERENCES
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__aurora { animation: none; }
}


/* ============================================================================
   17  RESPONSIVE
   ========================================================================== */

/* --- Small tablets ------------------------------------------------------ */
@media (min-width: 620px) {
  .svc { grid-template-columns: repeat(2, 1fr); }
  /* Two full-width features, four cards in pairs, CTA closes the grid */
  .svc__card--wide { grid-column: span 2; }
  .svc__cta { grid-column: span 2; }
  .work__grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .stats__grid { grid-template-columns: repeat(4, 1fr); }
  /* Hairline dividers between stats instead of card chrome */
  .stat + .stat { border-left: 1px solid var(--line-dark); }
  .mbody { grid-template-columns: 1.25fr .95fr; }
  .why__grid { grid-template-columns: repeat(2, 1fr); column-gap: 2.5rem; }
  .footer__top { grid-template-columns: repeat(2, 1fr); }
}

/* --- Tablet / small laptop ---------------------------------------------- */
@media (min-width: 900px) {
  .section__head--split { grid-template-columns: 1.2fr .95fr; }
  .tiers { grid-template-columns: repeat(3, 1fr); }
  .tier--featured { transform: scale(1.03); }
  .tier--featured:hover { transform: scale(1.03) translateY(-5px); }
  .faq__grid { grid-template-columns: repeat(2, 1fr); column-gap: clamp(2rem, 4vw, 4rem); }
  .about__inner { grid-template-columns: 1.25fr .8fr; }
  .contact__inner { grid-template-columns: 1fr 1fr; align-items: center; }
  .footer__top { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
}

/* --- Desktop ------------------------------------------------------------ */
@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: 1.02fr 1.15fr; }
  .svc { grid-template-columns: repeat(3, 1fr); }
  /* Two 2-wide features + 4 cards + CTA = 8 cells. Dense flow backfills the
     third column beside each feature so no gaps are left. */
  .svc { grid-auto-flow: dense; }
  .svc__card--wide { grid-column: span 2; }
  .svc__cta { grid-column: auto; }
  .work__grid { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
  .step::before { display: block; }
  .step:first-child::before { display: none; }
  .process__cta { justify-content: space-between; text-align: left; }
}

/* --- Mobile navigation ---------------------------------------------------
   Wider than the layout breakpoint: eight links plus a CTA need ~1100px
   before they stop crowding, even though the grids go wide at 1024. */
@media (max-width: 1099px) {
  :root { --nav-h: 66px; }

  .nav__toggle { display: grid; }

  .nav__menu {
    position: fixed;
    inset: var(--nav-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1.25rem var(--pad) 2rem;
    /* Solid, not glass — menu labels have to stay readable over the hero */
    background: var(--ink);
    border-bottom: 1px solid var(--line-dark);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  }
  .nav.is-open .nav__menu { opacity: 1; visibility: visible; transform: none; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    display: block;
    padding: .95rem .25rem;
    font-size: 1.05rem;
    font-family: var(--display);
    font-weight: 600;
    border-bottom: 1px solid var(--line-dark);
  }
  .nav__link::after { display: none; }
  .nav__link.is-current { color: var(--volt); }
  .nav__cta { margin-top: 1.35rem; --btn-y: .9rem; font-size: 1rem; }

  /* Once the menu is open the bar always needs a solid ground */
  .nav.is-open { background: var(--ink); }
}

/* --- Phones -------------------------------------------------------------- */
@media (max-width: 619px) {
  /* Headline line breaks are tuned for wide columns; let phones re-wrap */
  .section__title br, .contact__title br { display: none; }

  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }

  .rv__stage { aspect-ratio: 4 / 3.1; }
  .rv__grip { width: 40px; height: 40px; }
  .rv__chip { font-size: .55rem; padding: .3rem .6rem; gap: .4rem; bottom: .6rem; }
  .rv__chip b { font-size: .52rem; padding-right: .4rem; }
  .rv__chip--before { left: .6rem; }
  .rv__chip--after { right: .6rem; }
  .stats__grid { gap: 1.75rem 1rem; }
  .mhero { aspect-ratio: 16 / 10; }
  .mcta { flex-direction: column; align-items: stretch; }
  .mcta .btn { width: 100%; }
  .footer__bar { flex-direction: column; align-items: flex-start; }
}