/* brandmax — menu chip + full-screen menu sheet. Stage one: the opening.
   The sheet is the page's ink poured from the top edge — a flat panel whose
   leading edge is an SVG bulge that swells while the sheet moves fast and
   relaxes as it lands, so the whole thing reads as liquid rather than a
   sliding rectangle. js/menu.js drives all sheet motion with GSAP; the only
   CSS animation here is the chip's own morph and the rail's yield.

   Layering: sheet 55 — above the page and the rail's 10, below the estimate
   modal's 60 and the loader's 100. The rail is lifted to 56 while the menu
   is up, so the chip stays reachable as the close control.

   Cascade note: this sheet must come AFTER pricing.css's <link> in the head —
   several rules below override chip rules of equal specificity. */

/* THE CHIP ICON ----------------------------------------------------------- */

/* Two bars standing in for the label, duplicated into the flood layer the
   same way the text chips duplicate their copy — so the existing launch,
   flood and wipe mechanics run unmodified. Sized to the chip's 1em line so
   the rail's three chips stay one height. */
.mn-ico {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.34em;
  width: 1.5em;
  height: 1em;
}

.mn-bar {
  display: block;
  width: 100%;
  height: 0.115em;
  min-height: 1.5px;
  border-radius: 99px;
  background: currentColor;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* the X: each bar travels half the centre-to-centre gap (0.34em gap +
   0.115em bar = 0.455em) and turns 45° — both copies of the icon morph,
   so the flood's duplicate can never show stale bars */
.mn-toggle.is-x .mn-bar:nth-child(1) { transform: translateY(0.2275em) rotate(45deg); }
.mn-toggle.is-x .mn-bar:nth-child(2) { transform: translateY(-0.2275em) rotate(-45deg); }

/* THE CHIP WHILE THE MENU IS UP ------------------------------------------- */

/* The ink chip would dissolve into the ink sheet, so the open state swaps
   the dials to a paper chip — the pricing chip's palette — and lets the
   outset ring go: a paper silhouette needs no edge on ink. .is-open is
   held until the sheet has fully left (js/menu.js removes it in the close
   timeline's onComplete), so the chip never ghosts against the sheet. */
.mn-toggle { transition: color 0.4s ease; }

.mn-toggle .pricing-btn__outer {
  transition:
    background-color 0.4s ease,
    box-shadow 0.4s ease,
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.mn-toggle:active .pricing-btn__outer { transform: scale(0.95); }

.mn-toggle.is-open {
  --chip-bg: #e3e5ea;
  --chip-fg: #1d1d1d;
  --ring: transparent;
}
.mn-toggle.is-open .pricing-btn__outer { box-shadow: 0 0 0 1px rgba(227, 229, 234, 0); }

/* the flood is the closed chip's gesture; while open the chip answers with
   the morph alone. opacity added to the base transition so suppression
   fades rather than pops. */
.mn-toggle .pricing-btn__hover {
  transition:
    clip-path 0.55s cubic-bezier(0.19, 1, 0.22, 1) 0.18s,
    opacity 0.3s ease;
}
.mn-toggle.is-open .pricing-btn__hover { opacity: 0; }

@media (hover: hover) {
  /* outranks pricing.css's launch (three classes + hover there, four here):
     with the flood suppressed, a launched icon would leave an empty chip */
  .mn-toggle.is-open:hover .pricing-btn__inner .pricing-btn__text {
    transform: none;
    transition: transform 0.3s ease;
  }
  .mn-toggle.is-open:hover .pricing-btn__hover {
    clip-path: ellipse(80% 50% at 50% 152%);
  }
}

/* THE RAIL'S YIELD --------------------------------------------------------- */

/* While the menu is up the rail rides above the sheet and the two working
   chips step aside — opacity/transform on their __outer, never on the
   buttons themselves, which js/main.js styles inline on the phone tier.
   Base delays here are the RETURN (class removed after the sheet has left);
   the .is-mn-open delays are the exit stagger. */
.cta-w.is-mn-open { z-index: 56; }

.cta-w .pricing-btn:not(.mn-toggle) .pricing-btn__outer {
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}
.cta-w .pricing-btn[data-talk-open] .pricing-btn__outer { transition-delay: 0.12s; }

.cta-w.is-mn-open .pricing-btn:not(.mn-toggle) { pointer-events: none; }
.cta-w.is-mn-open .pricing-btn:not(.mn-toggle) .pricing-btn__outer {
  opacity: 0;
  transform: translateY(-10px);
  transition-delay: 0.04s;
}
.cta-w.is-mn-open .pricing-btn[data-talk-open] .pricing-btn__outer { transition-delay: 0s; }

/* THE SHEET ---------------------------------------------------------------- */

.mn-w {
  position: fixed;
  inset: 0;
  z-index: 55;
  visibility: hidden;      /* js/menu.js flips this for the run of the open */
  pointer-events: none;
}
.mn-w.is-open { pointer-events: auto; }

/* Parked at -120%, not -100%: the curve hangs 18vh below the bottom edge,
   and at -100% its flattening tail would still show at the viewport top.
   The ground is not flat ink: a tonal fall from raised charcoal into near
   black, with two faint paper blooms answering the hero field's light —
   the sheet reads as an atmosphere, not a rectangle. The gradient's LAST
   stop is the sheet's leading edge, so the curve below states the same
   colour and the seam disappears. */
.mn-sheet {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(110% 80% at 88% -8%, rgba(227, 229, 234, 0.08) 0%, rgba(227, 229, 234, 0) 55%),
    radial-gradient(130% 90% at 6% 112%, rgba(227, 229, 234, 0.05) 0%, rgba(227, 229, 234, 0) 58%),
    linear-gradient(180deg, #1e1f22 0%, #141416 100%);
  transform: translateY(-120%);
  will-change: transform;
}

/* film grain over the whole sheet, content included — one texture unifying
   type, card and ground. Painted after the children by ::after's place in
   paint order; at this opacity it is felt, not seen. */
.mn-sheet::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.05;
  pointer-events: none;
}

/* the ghost of the orb: two concentric hairlines falling off the lower
   right, seating the menu in the page's own iconography */
.mn-orb {
  position: absolute;
  right: -14vh;
  bottom: -36vh;
  width: 94vh;
  height: 94vh;
  border: 1px solid rgba(227, 229, 234, 0.07);
  border-radius: 50%;
  pointer-events: none;
}
.mn-orb::before {
  content: "";
  position: absolute;
  inset: 9vh;
  border: 1px solid rgba(227, 229, 234, 0.045);
  border-radius: 50%;
}

/* the liquid edge: a quadratic whose control point js/menu.js pumps between
   0 (flat) and ~90 (full bulge). Overlapped 1px onto the sheet so the seam
   between div and path never shows at fractional transforms. */
.mn-curve {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  width: 100%;
  height: 18vh;
  display: block;
  pointer-events: none;
}
.mn-curve path { fill: #141416; }

/* THE INTERIOR -------------------------------------------------------------

   A primary rank in the display serif, the featured card beneath it, four
   secondary groups under mono eyebrows across two columns, a footer rule.
   Every line sits in a .mn-line mask and moves via its .mn-line-in — GSAP
   owns the inner's transform, so hover styling stays on the anchors and
   card surfaces around the masks, never on the moving element itself. */
.mn-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  color: #e3e5ea;
  padding: max(88px, 11vh) max(24px, 1.9em) max(24px, 3.5vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Two rows on desktop: the lead column spans both while the web flagship
   takes the first row of the services field and the marketing columns the
   second. Row gap is its own clamp — the column gap's 88px ceiling is a
   reading gutter, far too tall as a vertical beat. */
.mn-grid {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: 1.45fr 1fr 1fr;
  gap: clamp(30px, 4.5vh, 52px) clamp(28px, 4vw, 88px);
  align-content: center;
  width: 100%;
  max-width: 1508px;
  margin-inline: auto;
}

.mn-mast     { grid-column: 1 / 4; grid-row: 1; }
.mn-col--lead { grid-column: 1; grid-row: 2; }
.mn-col--a    { grid-column: 2; grid-row: 2; }
.mn-col--b    { grid-column: 3; grid-row: 2; }

/* THE MASTHEAD --------------------------------------------------------------
   The web practice opens the sheet at display scale — the 60% of the
   studio stated typographically, everything below reading against it.
   The face ships one weight, so "bold" is the statement body's hairline
   stroke, the site's own way of thickening a cut. Its rule sits on the
   masthead's bottom edge and is drawn in by js/menu.js like the foot's. */
.mn-mast {
  position: relative;
  min-width: 0;
  padding-bottom: clamp(20px, 3.2vh, 32px);
}
.mn-mast .mn-eyebrow { margin-bottom: 14px; }

/* the two leads stand as one column, pill-spacing carried by the gap */
.mn-mast-leads {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

/* the masthead's shelf: display type left, the two working chips seated
   on its baseline in the band's empty right end; narrow frames wrap the
   chips under the line */
.mn-mast-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 28px;
  min-width: 0;
}

/* the chips' mask breathes 3px — a tight mask would shave the talk chip's
   1px outset ring */
.mn-cta-w {
  padding: 3px;
  margin: -3px;
}
/* two classes on purpose: the element is also a .mn-line-in, whose later
   `display: block` would flatten a single-class flex into a stack */
.mn-cta.mn-line-in {
  display: flex;
  align-items: stretch;
  gap: 10px;
  /* optical seat: chip bottoms just above the serif's descender line */
  padding-bottom: clamp(6px, 1vh, 12px);
}
.mn-mast .mn-rule {
  top: auto;
  bottom: 0;
}

/* The two leads speak the same voice as every other link — the menu is one
   type system (lusion's): the grotesque, uppercase, roll and pill. Only
   scale separates the ranks: 42 / 26 / 13.5. */
.mn-link--mast {
  font-family: "At Aero Retina", "Helvetica Neue", "Nimbus Sans", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 2.9vw, 42px);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.mn-line { display: block; overflow: hidden; }
.mn-line-in { display: block; transform: translateY(115%); }

/* one grid cell: the lead column stacks rank over card, the others stack
   two groups; the gap is the beat between the stacked blocks */
.mn-col {
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 4.5vh, 46px);
  min-width: 0;
}

/* primary rank: the page's own display serif at menu scale */
.mn-primary {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mn-link { display: inline-block; }

/* THE ROLL — lusion.co's link hover, copied mechanism-for-mechanism: two
   stacked copies of the label in an overflow-hidden inner; hover rolls the
   resting copy up -100% while the clone rides in from +100%, both on the
   same 0.4s cubic-bezier(0.4, 0, 0.1, 1). The pill behind (--pill links)
   is their -background div: a full-radius plate scaling 0.85→1 into 10%
   opacity. The roll lives INSIDE .mn-line-in, so GSAP's reveal transform
   and the hover transform never share an element. */
.mn-roll {
  position: relative;
  display: grid;            /* both copies share one cell, so the roll is as
                               wide as its WIDEST label — a parked link's
                               "Coming soon" clone sets the mask's width
                               instead of being clipped to the short label */
  justify-items: start;
  overflow: hidden;
  z-index: 1;
}
.mn-roll-text,
.mn-roll-clone {
  grid-area: 1 / 1;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.1, 1);
}
.mn-roll-clone {
  transform: translate3d(0, 100%, 0);
}

.mn-link--pill {
  position: relative;
  padding: 0.5em 0.9em;
  margin: -0.5em -0.9em;    /* the pill breathes without moving the text */
}
.mn-link--pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 99em;
  background: #e3e5ea;
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity 0.3s,
    transform 0.4s cubic-bezier(0.4, 0, 0.1, 1);
}

/* a parked link's click plays the roll by class — the clone says
   "Coming soon", and touch gets the same answer hover gives a mouse */
.mn-link--roll.is-soon .mn-roll-text { transform: translate3d(0, -100%, 0); }
.mn-link--roll.is-soon .mn-roll-clone { transform: translate3d(0, 0, 0); }

@media (hover: hover) {
  .mn-link--roll:hover .mn-roll-text { transform: translate3d(0, -100%, 0); }
  .mn-link--roll:hover .mn-roll-clone { transform: translate3d(0, 0, 0); }
  .mn-link--pill:hover::before {
    opacity: 0.1;
    transform: scale(1);
  }
}

/* lusion's current-page mark: a dot standing in the link's right padding */
.mn-link--pill[aria-current="page"]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.18em;
  width: 0.28em;
  height: 0.28em;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%);
}

/* the rank in lusion's menu voice: the grotesque, uppercase, compact —
   26px/1 at rest, one register below the serif masthead */
.mn-link--xl {
  font-family: "At Aero Retina", "Helvetica Neue", "Nimbus Sans", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* secondary groups */
.mn-eyebrow {
  font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(227, 229, 234, 0.45);
  margin-bottom: 16px;
}

/* An eyebrow that is itself a page (Organic Marketing, Content Creation)
   carries the outbound arrow and answers hover — the plain labels do not.
   Block, not the anchor's inline default: an inline box drops the
   eyebrow's bottom margin; fit-content keeps the hover on the words. */
.mn-eyebrow--link {
  display: block;
  width: fit-content;
  transition: color 0.3s ease;
}
.mn-eyebrow--link .talk-arrow {
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.55em;
  vertical-align: -0.08em;
}
@media (hover: hover) {
  .mn-eyebrow--link:hover { color: #e3e5ea; }
}

.mn-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.mn-link--sm {
  font-family: "At Aero Retina", "Helvetica Neue", "Nimbus Sans", Helvetica, Arial, sans-serif;
  font-size: 13.5px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(227, 229, 234, 0.85);
}

/* THE FEATURED CARD ---------------------------------------------------------
   The one filled element on the sheet — a paper plate on the ink, which is
   exactly what makes it read as featured; nothing else here may take a
   background. GSAP owns the card's transform (it rides its mask like any
   line), so hover answers with surface and arrow, never with movement. */
.mn-card {
  display: block;
  max-width: 340px;
  padding: 18px 20px 16px;
  background: #e3e5ea;
  color: #1d1d1d;
  border-radius: 12px;
  /* lifted off the gradient — the one object standing on the sheet */
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  transition: background-color 0.35s ease;
}
@media (hover: hover) {
  .mn-card:hover { background: #fff; }
  .mn-card:hover .talk-arrow { transform: translate(2px, -2px); }
}

.mn-card-eyebrow {
  display: block;
  font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(29, 29, 29, 0.55);
  margin-bottom: 10px;
}

.mn-card-title {
  display: block;
  font-family: "PP Grafier", Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 1.9vw, 29px);
  line-height: 1.05;
  margin-bottom: 7px;
}

.mn-card-sub {
  display: block;
  font-family: "At Aero Retina", "Helvetica Neue", "Nimbus Sans", Helvetica, Arial, sans-serif;
  font-size: 13.5px;
  line-height: 1.35;
  color: rgba(29, 29, 29, 0.65);
  margin-bottom: 14px;
}

.mn-card-cta {
  display: inline-flex;
  align-items: center;
  font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mn-card-cta .talk-arrow {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* the footer rule draws itself (GSAP scaleX) rather than arriving whole */
.mn-foot {
  flex: 0 0 auto;
  width: 100%;
  max-width: 1508px;
  margin-inline: auto;
  padding-top: 18px;
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: clamp(20px, 3.5vh, 48px);
  font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(227, 229, 234, 0.6);
}

.mn-rule {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(227, 229, 234, 0.16);
  transform: scaleX(0);
  transform-origin: left;
}

.mn-foot-link { transition: color 0.3s ease; }
@media (hover: hover) {
  .mn-foot-link:hover { color: #e3e5ea; }
}

/* One gesture deep on a phone: the grid stacks — the masthead leads, then
   rank, card and the groups — and the interior scrolls. The card spans
   the measure, and every desktop grid seat reverts to the single flow. */
@media only screen and (max-width: 900px) {
  .mn-inner { padding-top: max(86px, 11vh); }
  .mn-grid {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 36px;
  }
  .mn-mast,
  .mn-col--lead,
  .mn-col--a,
  .mn-col--b {
    grid-column: 1;
    grid-row: auto;
  }
  .mn-mast { padding-bottom: 18px; }
  .mn-mast-row { gap: 16px 20px; }
  .mn-cta.mn-line-in { padding-bottom: 0; }
  .mn-col { gap: 34px; }
  .mn-link--mast { font-size: clamp(24px, 6.6vw, 30px); }
  .mn-mast-leads { gap: 12px; }
  .mn-link--xl { font-size: 20px; }
  .mn-card { max-width: none; }
  .mn-orb {
    right: -30vh;
    bottom: -46vh;
  }
}

/* SCROLL LOCK -------------------------------------------------------------- */

/* same shape as html.pm-lock: native scroll frozen, layout held where the
   scrollbar was; js/menu.js pairs it with the Lenis stop */
html.mn-lock {
  overflow: hidden;
  padding-right: var(--mn-sbw, 0px);
}

/* REDUCED MOTION ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .mn-bar,
  .mn-toggle,
  .mn-toggle .pricing-btn__outer,
  .mn-toggle .pricing-btn__hover,
  .cta-w .pricing-btn:not(.mn-toggle) .pricing-btn__outer,
  .mn-link { transition: none; }
  /* js/menu.js swaps its timelines for plain fades on the same query */
  .mn-line-in { transform: none; }
}