/* ============================================================
   khyzr.com — the bar's menu: Green room (the nav lab's direction C,
   picked by Cisco on 21 Oct 2026: "Ok the our brands one make it
   black and push this live").
   The bar stays paper with its live wordmark; under its hairline a
   room of khyzr's forest green drops open. Every panel stands on one
   skeleton, on the bar's own column: the head in the first three
   columns (the title in two lines, then its ways in), the body from
   the fourth. What we do and Case studies: a ruled list of six and
   one picture as tall as the list. Our brands: khyzr.ai and
   khyzr.studio as two containers on their own grounds, the home's
   products art in panel form, in a room of ink rather than green.
   The brand's green rule draws along the foot. Phones and tablets:
   the same room as a sheet as tall as what it holds, over a darker
   veil. Built by nav.js from data.js; without JavaScript the bar's
   entries stay links to their sections.
   Everything here is prefixed mn-. Values are the system's tokens; every
   spacing step is on its scale (--space-1 to --space-6).
   ============================================================ */

/* ---------- the room's colours: the system's greens, with the text lifted to hold AA ---------- */
:root{
  --mn-ground:var(--forest);
  --mn-well:var(--green-900);         /* a picture's ground before it loads, a phone section's well */
  --mn-mint:var(--mint);              /* 4.7:1 on forest */
  --mn-body:var(--on-dark-body);      /* 7:1 */
  --mn-dim:.6;                        /* the rows not in hand while the pointer is on the list: white at .6 (5:1) */
  --mn-hair:rgba(255,255,255,.14);
  --mn-edge:var(--on-dark-border);    /* a picture's frame */
  --mn-rule:var(--khyzr-green);
  --mn-ease:var(--ease-drift);        /* in */
  --mn-out:cubic-bezier(.4,0,.7,.2);  /* out: shorter, and gone */
  --mn-bar:4rem;
  --mn-gap:var(--space-3);
  --mn-fx:var(--space-1);             /* a row's box runs this far past its words, so its focus ring has air */
  --mn-pt:var(--space-5);             /* the panel's top and bottom */
  --mn-nfs:clamp(1.625rem,2.5*var(--u,1vw),2.375rem);   /* a discipline's name */
  --mn-cfs:clamp(1rem,1.4*var(--u,1vw),1.25rem);        /* a case's row: its client and its title, one size */
  --mn-cs:clamp(1.625rem,2.5*var(--u,1vw),2.375rem);    /* a cover's mark, before the case pages' weighting */
  /* the room's measure, read off the panel's own column (a container): a column, the picture's width, and a row */
  --mn-colw:calc((100cqw - 11 * var(--mn-gap)) / 12);
  --mn-picw:calc(3 * var(--mn-colw) + 2 * var(--mn-gap));
  /* What we do: a sixth of the photograph's 4:5 height (60px at 1440), never under 48px */
  --mn-rh:max(3rem,round(nearest,calc(var(--mn-picw) * 1.25 / 6),1px));
}
@media (max-width:1199px){:root{--mn-pt:var(--space-4)}}
/* Our brands stands on ink instead of green (Cisco, 21 Oct 2026): the room (and the phone's sheet, while that section
   is open) turns black under it, the two containers keep their own grounds, and the foot's rule stays khyzr green */
.mn-field[data-mn-cur="brands"],.mn-sheet[data-mn-x="brands"]{--mn-ground:var(--ink);--mn-well:var(--ink)}

/* ---------- the bar: one line from 1001px up; the new entries are buttons, drawn as the live pills ---------- */
.nav-mid a,.nav-mid .mn-trig{white-space:nowrap}
@media (min-width:1001px) and (max-width:1199px){
  .nav-mid{gap:0}
  .nav-mid a,.nav-mid .mn-trig{padding-left:var(--space-1);padding-right:var(--space-1)}
}
.nav-mid .mn-trig{position:relative;margin:0;border:0;background:none;font:inherit;font-size:.875rem;font-weight:var(--fw-ui);line-height:normal;color:var(--muted);
  padding:.5625rem .9375rem;border-radius:999px;cursor:pointer;-webkit-appearance:none;appearance:none;transition:color .2s ease,background .2s ease}
@media (min-width:1001px) and (max-width:1199px){.nav-mid .mn-trig{padding-left:var(--space-1);padding-right:var(--space-1)}}
@media (hover:hover){.nav-mid .mn-trig:hover{color:var(--ink);background:var(--surface-2)}}
/* the live bar's light under the section on screen (the home) or the page you are on (a subpage) */
.nav-mid .mn-trig::after{content:"";position:absolute;left:50%;bottom:.1875rem;width:.25rem;height:.25rem;margin-left:-2px;border-radius:50%;background:var(--green);
  opacity:0;transform:scale(.3);transition:opacity .3s ease,transform .5s cubic-bezier(.34,1.56,.64,1),background-color .2s ease}
.nav-mid .mn-trig[data-mn-here],.nav-mid .mn-trig[aria-current="true"]{color:var(--ink)}
.nav-mid .mn-trig[data-mn-here]::after,.nav-mid .mn-trig[aria-current="true"]::after{opacity:1;transform:none}
.nav.ink .nav-mid .mn-trig{color:rgba(255,255,255,.78)}
.nav.ink .nav-mid .mn-trig::after{background:var(--green-bright)}
.nav.ink .nav-mid .mn-trig[data-mn-here],.nav.ink .nav-mid .mn-trig[aria-current="true"]{color:#fff}
@media (hover:hover){.nav.ink .nav-mid .mn-trig:hover{color:#fff;background:rgba(255,255,255,.09)}}
.nav.ink button:focus-visible{outline-color:#fff}

/* open: the bar stays itself (paper, or ink over a dark band) and draws its hairline; the open panel's trigger holds the pill */
header.nav.mn-open{transition:background .2s ease,border-color .2s ease}
header.nav.mn-open:not(.ink){background:#fff;border-bottom-color:var(--hair)}
header.nav.mn-open .nav-mid .mn-trig[aria-expanded="true"]{color:var(--ink);background:var(--surface-2)}
header.nav.ink.mn-open .nav-mid .mn-trig[aria-expanded="true"]{color:#fff;background:rgba(255,255,255,.1)}
/* closing goes quicker than the live bar's own flip */
header.nav.mn-out{transition:background .14s ease,border-color .14s ease}

/* ---------- the page behind: a light ink veil, so only the panel is coloured ---------- */
.mn-veil{position:fixed;left:0;right:0;bottom:0;top:var(--mn-bar);z-index:59;background:rgb(10 10 10 / 10%);opacity:0;visibility:hidden;
  transition:opacity .14s ease,visibility 0s linear .14s}
.mn-veil.mn-on{opacity:1;visibility:visible;transition:opacity .24s ease,visibility 0s}

/* ---------- the field: one room under the bar's hairline, as wide as the window ---------- */
.mn-field{position:fixed;left:0;right:0;top:var(--mn-bar);z-index:0;height:var(--mn-h,0px);max-height:calc(100vh - var(--mn-bar) - 1.5rem);
  background:var(--mn-ground);color:#fff;overflow:hidden;visibility:hidden;clip-path:inset(0 0 100% 0);
  transition:clip-path .16s var(--mn-out),height .24s var(--mn-ease),background-color .2s ease,visibility 0s linear .16s}
.mn-field.mn-on{visibility:visible;clip-path:inset(0 0 0 0);
  transition:clip-path .28s var(--mn-ease),height .24s var(--mn-ease),background-color .2s ease,visibility 0s}
.mn-field.mn-instant{transition:none!important}
.mn-field :focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:var(--radius-s)}

/* the brand's rule along the foot: khyzr green, drawn once as the field lands */
.mn-rule{position:absolute;left:0;right:0;bottom:0;z-index:4;height:3px;background:var(--mn-rule);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.mn-field.mn-on .mn-rule{transform:none;transition:transform .26s var(--mn-ease) .04s}

/* a panel: a layer of the field; the field takes the height of the one shown */
.mn-panel{position:absolute;left:0;right:0;top:0;max-height:calc(100vh - var(--mn-bar) - 1.5rem);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  padding:0 var(--gx);visibility:hidden;opacity:0;transition:opacity .1s ease,visibility 0s linear .1s;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}
.mn-panel.mn-cur{visibility:visible;opacity:1;transition:opacity .16s ease .04s,visibility 0s}
/* one skeleton: the head in columns 1-3, the body from column 4; the columns share one top and one bottom */
.mn-in{position:relative;max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--mn-gap);
  align-items:stretch;padding:var(--mn-pt) 0;container-type:inline-size}

/* the arrival: the head, the body and the picture rise 8px in reading order, and land by 320ms */
.mn-field .mn-k{opacity:0;transform:translateY(8px)}
.mn-field.mn-on .mn-cur .mn-k{opacity:1;transform:none;
  transition:opacity .2s ease calc(var(--k,0) * 30ms + 40ms),transform .22s var(--mn-ease) calc(var(--k,0) * 30ms + 40ms)}

/* a zero-size mark on a line's baseline, which the script reads to set the caption on the last row's baseline */
.mn-bp{display:inline-block;width:0;height:0;vertical-align:baseline}

/* ---------- the head, one for all three: the title in two lines, a quiet line, the ways in, and (What we do) the caption ---------- */
.mn-lead{grid-column:1/span 3;display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding-right:var(--space-3)}
.mn-title{font:var(--fw-display) clamp(1.375rem,1.8*var(--u),1.6875rem)/1.1 var(--font-display);letter-spacing:-.024em;color:#fff;text-wrap:balance}
.mn-title .mn-g{color:var(--mn-mint)}
.mn-lead .mn-title .mn-g{display:block}
/* Our brands: the head is the way to the section, and its arrow rides with the last word */
.mn-hl{color:inherit;text-decoration:none;border-radius:var(--radius-s)}
.mn-hl .mn-arr{display:inline-block;width:.8em;height:.8em;margin-left:.25em;vertical-align:-.06em;color:#fff}
.mn-nw{white-space:nowrap}
@media (hover:hover){.mn-hl:hover .mn-arr{transform:translateX(3px)}}
.mn-note{margin-top:var(--space-1);font:var(--fw-text) .9375rem/1.5 var(--font-text);color:var(--mn-body)}
.mn-links{margin-top:var(--space-3);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.mn-a{position:relative;display:inline-flex;align-items:center;gap:.5em;font:var(--fw-ui) 1rem/1.4 var(--font-text);color:#fff;text-decoration:none;border-radius:var(--radius-s)}
.mn-a::after{content:"";position:absolute;inset:calc(.7em - 22px) -.375rem}   /* 44px tall to the pointer; two stacked never overlap */
.mn-arr{flex:none;width:1.05em;height:1.05em;transition:transform .18s var(--mn-ease)}
@media (hover:hover){.mn-a:hover .mn-arr{transform:translateX(3px)}}
/* the caption: one slot at the head's foot, its last line on the last row's baseline (the script measures the lift) */
.mn-caps{display:grid;width:100%;margin-top:auto;padding-top:var(--space-3);margin-bottom:var(--mn-capb,0px)}
.mn-cap{grid-area:1/1;align-self:end;margin:0;max-width:34ch;font:var(--fw-text) .875rem/1.5 var(--font-text);color:var(--mn-body);text-wrap:pretty;
  opacity:0;transition:opacity .08s ease}
.mn-cap.mn-show{opacity:1;transition:opacity .14s ease .05s}

/* ---------- a list: ruled rows of one height that never move ---------- */
.mn-list{grid-column:4/span 6;min-width:0;padding-right:var(--space-2)}
.mn-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--mn-hair)}
.mn-rows > li{border-bottom:1px solid var(--mn-hair)}
.mn-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);height:calc(var(--mn-rh) - 1px);
  margin:0 calc(-1 * var(--mn-fx));padding:0 var(--mn-fx);color:#fff;text-decoration:none;border-radius:var(--radius-s)}
.mn-nm{min-width:0;white-space:nowrap;font:var(--fw-ui) var(--mn-nfs)/1.08 var(--font-display);letter-spacing:-.028em;color:#fff;transition:color .16s ease}
/* the row in hand: an arrow after its name and its icon lit; while the pointer is on the list the others dim */
.mn-nx{display:inline-block;width:.6em;height:.6em;margin:0 0 .06em .32em;vertical-align:middle;color:var(--mn-mint);opacity:0;transform:translateX(-.25em);
  transition:opacity .12s ease,transform .18s var(--mn-ease)}
.mn-item.mn-act .mn-nx{opacity:1;transform:none}
.mn-rows.mn-hot .mn-item:not(.mn-act) .mn-nm,.mn-rows.mn-hot .mn-item:not(.mn-act) .mn-ct{color:rgba(255,255,255,var(--mn-dim))}
.mn-ic{flex:none;display:block;width:1.5rem;height:1.5rem;color:var(--mn-mint);opacity:.5;transition:opacity .16s ease}
.mn-ic svg{display:block;width:100%;height:100%}
.mn-item.mn-act .mn-ic{opacity:1}
/* the page you are on: the bar's light, beside its name */
.mn-item[aria-current="page"] .mn-nt::after,.mn-item[aria-current="page"] .mn-ctt::after{content:"";display:inline-block;width:.375rem;height:.375rem;margin:0 0 .22em .45em;border-radius:50%;background:var(--mn-mint);vertical-align:middle}
.mn-item[aria-current="page"] .mn-ctt::after{margin-bottom:.16em}
.mn-item:focus-visible{outline-offset:-1px}

/* ---------- Case studies: one line a row, one size, two tones: the client in mint, then the title in white ---------- */
/* the rows are a sixth of the cover's width, so the cover is square (289 at 1440); never under 45px, so the link inside
   the rule is 44 */
#mn-p-work{--mn-rh:max(45px,round(nearest,calc(var(--mn-picw) / 6),1px))}
.mn-item.mn-case{justify-content:flex-start;gap:var(--space-1);font:var(--fw-ui) var(--mn-cfs)/1.25 var(--font-display);letter-spacing:-.012em}
.mn-case .mn-cl{flex:none;white-space:nowrap;color:var(--mn-mint)}
.mn-case .mn-ct{position:relative;min-width:0;white-space:nowrap;color:#fff;transition:color .16s ease}
.mn-ct .mn-nx{position:absolute;left:100%;top:50%;width:.75em;height:.75em;margin:-.375em 0 0 .3em}
/* under 1200px the client goes over its title, each on its own line */
@media (max-width:1199px){
  #mn-p-work{--mn-rh:3.5rem}
  .mn-item.mn-case{flex-direction:column;align-items:flex-start;justify-content:center;gap:0}
  .mn-case .mn-ct{max-width:calc(100% - 1.25em)}
}

/* ---------- the picture: as tall as the list; a photograph or a cover, in a frame with the on-dark edge ---------- */
.mn-pic{grid-column:10/span 3;min-width:0}
.mn-frame{position:relative;height:calc(6 * var(--mn-rh) + 1px);border-radius:var(--radius-m);overflow:hidden;isolation:isolate;background:var(--mn-well)}
.mn-frame::after{content:"";position:absolute;inset:0;z-index:30;border:1px solid var(--mn-edge);border-radius:inherit;pointer-events:none}
.mn-ph,.mn-tile{position:absolute;inset:0;opacity:0;transition:opacity .18s ease}
.mn-ph{display:block;width:100%;height:100%;object-fit:cover}
.mn-ph.mn-show,.mn-tile.mn-show{opacity:1}

/* a case's cover, as its page draws it: its ground from khyzr's palette, its mark at the top at the page's weighting,
   and where the study has a figure, the figure on the foot in white with what it measures under it. The mark keeps one
   place from cover to cover, so moving down the list changes the mark, never where it sits */
.mn-tile{--fg2:var(--on-dark-soft);display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:var(--space-3);
  background:radial-gradient(120% 90% at 88% 8%,rgba(255,255,255,.07),transparent 62%),var(--g)}
.mn-tile.is-light{--fg2:rgba(10,10,10,.74)}
.mn-tile img{display:block;flex:none;height:calc(var(--mn-cs) * var(--e,1));width:auto;max-width:72%;object-fit:contain;object-position:0 0;user-select:none}
.mn-tile img.inv,.mn-tt img.inv{filter:brightness(0) invert(1)}
.mn-cf{align-self:stretch;display:flex;flex-direction:column;align-items:flex-start}
.mn-cf .n{font:var(--fw-display) clamp(1.75rem,2.6*var(--u),2.25rem)/1 var(--font-display);letter-spacing:-.035em;color:#fff;white-space:nowrap}
.mn-cf .l{margin-top:var(--space-1);font:var(--fw-text) .875rem/1.3 var(--font-text);color:var(--fg2)}

/* ---------- Our brands: khyzr.ai and khyzr.studio, each one container on its own ground, the whole of it one link ---------- */
.mn-brands{grid-column:4/span 9;align-self:start;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--mn-gap);min-width:0}
/* each product's ground, text and rings, as the home's products art sets them (assets/home/products/products.css) */
.mn-brand{--b-g:#022853;--b-fg:#E0E9F0;--b-mu:#A7B6C7;--b-fo:#43F0F4;--b-hair:rgba(224,233,240,.16);--k1:#7280FC;--k2:#62A5FA;--k3:#43F0F4;
  --logo-word:var(--b-fg);--logo-accent:#7280FC;--b-g2:color-mix(in srgb,var(--b-g) 90%,var(--b-fg));--b-pad:var(--space-4);--b-sym:8rem;
  position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:var(--b-pad);border-radius:var(--radius-m);overflow:hidden;isolation:isolate;
  background:var(--b-g);color:var(--b-fg);text-decoration:none;transition:background-color .2s ease}
.mn-brand--studio{--b-g:#3B2300;--b-fg:#EDE7DF;--b-mu:#CFC6BC;--b-fo:#F7CD3A;--b-hair:rgba(237,231,223,.16);--k1:#CC3E66;--k2:#F38239;--k3:#F7CD3A;--logo-accent:#F7CD3A}
/* the inner hairline, in the brand's light, over everything in it: navy and brown keep their edge on the room */
.mn-brand::after{content:"";position:absolute;inset:0;z-index:2;border:1px solid var(--b-hair);border-radius:inherit;pointer-events:none}
.mn-brand > :not(.mn-sym){position:relative;z-index:1}
/* hover and focus: the ground lightens a step and the arrow nudges; nothing else moves */
@media (hover:hover){.mn-brand:hover{background:var(--b-g2)}}
.mn-field .mn-brand:focus-visible,.mn-sheet .mn-brand:focus-visible{background:var(--b-g2);outline:2px solid var(--b-fo);outline-offset:3px;border-radius:var(--radius-m)}
.mn-brand .mn-go .mn-arr{transition:transform .18s var(--mn-ease)}
@media (hover:hover){.mn-brand:hover .mn-go .mn-arr{transform:translateX(3px)}}
.mn-brand:focus-visible .mn-go .mn-arr{transform:translateX(3px)}
.mn-wm{display:block;line-height:0}
.mn-wm svg{display:block;height:clamp(1.75rem,2.4*var(--u),2.25rem);width:auto;overflow:visible}
.mn-wm .logo-word{fill:var(--logo-word)}
.mn-wm .logo-suffix{fill:var(--logo-accent)}
.mn-bt{margin-top:var(--space-3);font:var(--fw-display) clamp(1.25rem,1.6*var(--u),1.4375rem)/1.15 var(--font-display);letter-spacing:-.02em;color:var(--b-fg);text-wrap:balance}
.mn-bl{margin-top:var(--space-1);max-width:32ch;font:var(--fw-text) .9375rem/1.55 var(--font-text);color:var(--b-mu);text-wrap:pretty}
.mn-go{margin-top:auto;padding-top:var(--space-3);display:inline-flex;align-items:center;gap:.5em;font:var(--fw-ui) 1rem/1.3 var(--font-text);color:var(--b-fg)}
/* the product's cut of the symbol, whole, as a picture in the container's foot corner (the home's tile, smaller): its
   foot and side on the container's edges, its ground the container's own, so it lightens with it; the line and the link
   keep a gap clear of it */
.mn-sym{position:absolute;z-index:0;right:0;bottom:0;width:var(--b-sym);height:var(--b-sym);pointer-events:none}
.mn-sym .k1{fill:var(--k1)}
.mn-sym .k2{fill:var(--k2)}
.mn-sym .k3{fill:var(--k3)}
.mn-brand > .mn-bl{max-width:min(32ch,calc(100% + var(--b-pad) - var(--b-sym) - var(--space-3)))}
.mn-brand > .mn-go{max-width:calc(100% + var(--b-pad) - var(--b-sym) - var(--space-3))}
/* a narrower container (1000-1199px, the phone): the cut steps down to sit beside the link alone, and the line keeps
   its measure above it */
@media (max-width:1199px){
  .mn-brand{--b-sym:4.5rem}
  .mn-brand > .mn-bl{max-width:32ch}
  .mn-brand > .mn-go{padding-top:var(--space-4)}
}

/* ---------- the phone and tablet sheet (1000px and under, where the bar hides its links) ---------- */
.mn-burger{display:none}
.mn-sheet{display:none}
@media (max-width:1000px){
  .mn-field{display:none}
  /* under the sheet the page steps right back, so it never reads as more menu */
  .mn-veil{background:rgb(10 10 10 / 48%)}
  .nav-in > .brand{margin-right:auto}
  .js .mn-burger{position:relative;display:block;flex:none;width:2.75rem;height:2.75rem;margin:0 0 0 var(--space-1);padding:0;border:1px solid rgba(10,10,10,.14);border-radius:50%;
    background:transparent;color:var(--ink);cursor:pointer;-webkit-appearance:none;appearance:none;transition:border-color .2s ease,color .2s ease,background-color .2s ease}
  @media (hover:hover){.mn-burger:hover{background:var(--surface-2);border-color:rgba(10,10,10,.22)}}
  .mn-burger i{position:absolute;left:50%;top:50%;width:1rem;height:1.5px;margin:-.75px 0 0 -.5rem;border-radius:2px;background:currentColor;transition:transform .24s var(--mn-ease)}
  .mn-burger i:first-child{transform:translateY(-3.5px)}
  .mn-burger i:last-child{transform:translateY(3.5px)}
  .mn-burger[aria-expanded="true"] i:first-child{transform:rotate(45deg)}
  .mn-burger[aria-expanded="true"] i:last-child{transform:rotate(-45deg)}
  .nav.ink .mn-burger{color:#fff;border-color:rgba(255,255,255,.3)}
  @media (hover:hover){.nav.ink .mn-burger:hover{background:rgba(255,255,255,.1);border-color:#fff}}
  /* the sheet's foot carries the action while it is open */
  header.nav.mn-sheet-on .btn-nav{opacity:0;visibility:hidden;transition:opacity .12s ease,visibility 0s linear .12s}

  /* as tall as what it holds (up to the window), so the top level ends at About and the action, not in empty green */
  .mn-sheet{position:fixed;left:0;right:0;top:var(--mn-bar);z-index:0;display:flex;flex-direction:column;max-height:calc(100vh - var(--mn-bar));max-height:calc(100dvh - var(--mn-bar));
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--mn-ground);color:#fff;visibility:hidden;clip-path:inset(0 0 100% 0);
    transition:clip-path .18s var(--mn-out),background-color .2s ease,visibility 0s linear .18s}
  .mn-sheet.mn-on{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .3s var(--mn-ease),background-color .2s ease,visibility 0s}
  .mn-sheet :focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:var(--radius-s)}
  .mn-sheet-in{flex:none;padding:0 var(--gx)}
  .mn-sheet .mn-k{opacity:0;transform:translateY(8px)}
  .mn-sheet.mn-on .mn-k{opacity:1;transform:none;transition:opacity .18s ease calc(var(--k,0) * 16ms + 30ms),transform .2s var(--mn-ease) calc(var(--k,0) * 16ms + 30ms)}

  .mn-acc{list-style:none;margin:0;padding:0}
  .mn-acc > li{border-bottom:1px solid var(--mn-hair)}
  .mn-acc-b,.mn-acc-a{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%;min-height:4.25rem;margin:0;padding:var(--space-1) 0;border:0;background:none;
    color:#fff;font:var(--fw-ui) clamp(1.75rem,7.4vw,2.625rem)/1.08 var(--font-display);letter-spacing:-.026em;text-align:left;text-decoration:none;cursor:pointer;
    -webkit-appearance:none;appearance:none;border-radius:var(--radius-s);transition:color .16s ease}
  /* a section opens with + turning to −; a page goes with an arrow */
  .mn-pm{position:relative;flex:none;width:1.375rem;height:1.375rem}
  .mn-pm::before,.mn-pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;border-radius:2px;background:currentColor;transition:transform .24s var(--mn-ease),opacity .16s ease}
  .mn-pm::after{transform:rotate(90deg)}
  .mn-acc-i.mn-x .mn-pm::after{transform:rotate(180deg);opacity:0}
  .mn-acc-a .mn-arr{width:1.375rem;height:1.375rem;color:rgba(255,255,255,.55)}
  .mn-acc-i.mn-x > .mn-acc-b{color:#fff}
  .mn-acc.mn-some .mn-acc-i:not(.mn-x) > .mn-acc-b,.mn-acc.mn-some .mn-acc-a{color:rgba(255,255,255,var(--mn-dim))}
  .mn-acc-a[aria-current="page"] .mn-at::after{content:"";display:inline-block;width:.375rem;height:.375rem;margin:0 0 .2em .4em;border-radius:50%;background:var(--mn-mint);vertical-align:middle}

  /* a section's body: a deeper well, its title and the way to the section first, then its pages */
  .mn-acc-p{display:grid;grid-template-rows:0fr;margin:0 calc(-1 * var(--gx));visibility:hidden;transition:grid-template-rows .2s var(--mn-out),visibility 0s linear .2s}
  .mn-acc-i.mn-x .mn-acc-p{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .26s var(--mn-ease),visibility 0s}
  .mn-sheet.mn-instant .mn-acc-p{transition:none!important}
  .mn-acc-w{min-height:0;overflow:hidden}
  .mn-well{padding:var(--space-3) var(--gx) var(--space-2);background:var(--mn-well)}
  .mn-acc > li.mn-x{border-bottom-color:transparent}
  .mn-intro{display:flex;flex-direction:column;align-items:flex-start;padding-bottom:var(--space-1)}
  .mn-intro .mn-title{font-size:clamp(1.25rem,5.2vw,1.75rem)}
  .mn-intro .mn-a{min-height:2.75rem}
  .mn-intro .mn-a::after{display:none}
  .mn-intro .mn-hl{display:inline-block;padding:var(--space-1) 0;margin:calc(-1 * var(--space-1)) 0}
  .mn-intro--hl{padding-bottom:var(--space-3)}
  .mn-intro--hl .mn-note{margin-top:var(--space-1)}
  .mn-sl{list-style:none;margin:0;padding:0;border-top:1px solid var(--mn-hair)}
  .mn-sl > li + li{border-top:1px solid var(--mn-hair)}
  .mn-sl a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:var(--space-2);min-height:4.5rem;padding:var(--space-1) 0;color:#fff;text-decoration:none;border-radius:var(--radius-s)}
  .mn-th{position:relative;display:block;width:3.5rem;height:3.5rem;border-radius:var(--radius-s);overflow:hidden;background:var(--mn-ground);box-shadow:inset 0 0 0 1px var(--mn-edge)}
  .mn-th img{display:block;width:100%;height:100%;object-fit:cover}
  .mn-sn{font:var(--fw-ui) 1.1875rem/1.2 var(--font-display);letter-spacing:-.014em}
  .mn-sl .mn-arr{width:1.125rem;height:1.125rem;color:rgba(255,255,255,.5)}
  .mn-sl a[aria-current="page"] .mn-sn::after,.mn-sl a[aria-current="page"] .mn-st::after{content:"";display:inline-block;width:.3125rem;height:.3125rem;margin:0 0 .2em .4em;border-radius:50%;background:var(--mn-mint);vertical-align:middle}
  .mn-tt{display:grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:var(--radius-s);background:radial-gradient(120% 90% at 88% 8%,rgba(255,255,255,.07),transparent 62%),var(--g);
    box-shadow:inset 0 0 0 1px var(--mn-edge)}
  .mn-tt img{display:block;height:calc(.9375rem * var(--e,1));width:auto;max-width:78%;object-fit:contain}
  /* a case: its client in mint over its title in white, one size */
  .mn-sc{display:block;min-width:0;font:var(--fw-ui) 1.0625rem/1.25 var(--font-display);letter-spacing:-.01em}
  .mn-sc .mn-cl{display:block;color:var(--mn-mint)}
  .mn-sc .mn-st{display:block;color:#fff;text-wrap:balance}
  /* Our brands: the same two containers, stacked and full width */
  .mn-sbr{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
  .mn-sbr .mn-brand{--b-pad:var(--space-3);--b-sym:4rem}
  .mn-sbr .mn-wm svg{height:1.75rem}
  .mn-sbr .mn-bt{font-size:1.25rem}

  /* the foot: the action, and the brand's rule under it; it stays in reach while a long section scrolls */
  .mn-foot{position:sticky;bottom:0;z-index:2;flex:none;padding:var(--space-2) var(--gx) calc(var(--space-2) + env(safe-area-inset-bottom,0px));background:var(--mn-ground);
    border-bottom:3px solid var(--mn-rule);transition:background-color .2s ease}
  .mn-foot::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:var(--space-3);background:linear-gradient(to top,var(--mn-ground),transparent);pointer-events:none;
    opacity:0;transition:opacity .16s ease}
  .mn-sheet.mn-scrolls .mn-foot::before{opacity:1}
  .mn-cta{display:flex;align-items:center;justify-content:center;gap:.55em;width:100%;height:3.25rem;border-radius:999px;background:#fff;color:var(--ink);
    font:var(--fw-ui) 1rem/1 var(--font);text-decoration:none;transition:transform .16s var(--mn-ease)}
  .mn-cta:active{transform:scale(.98)}
  .mn-sheet .mn-cta:focus-visible{outline-color:#fff;outline-offset:3px;border-radius:999px}

  html.mn-lock,html.mn-lock body{overflow:hidden}
}
/* the tablet: the same sheet, section names at poster scale, the pages two to a row, the action at its own width */
@media (min-width:600px) and (max-width:1000px){
  .mn-sheet-in{padding-top:var(--space-1)}
  .mn-acc-b,.mn-acc-a{min-height:6.25rem;font-size:clamp(2.625rem,6.8vw,4rem);transition:color .16s ease,font-size .2s var(--mn-ease),min-height .2s var(--mn-ease)}
  /* while a section is open, the other names step down to 32px, so its pages lead */
  .mn-acc.mn-some .mn-acc-i:not(.mn-x) > .mn-acc-b,.mn-acc.mn-some .mn-acc-a{min-height:4.5rem;font-size:2rem}
  .mn-sl a{min-height:5.5rem}
  .mn-sn,.mn-sc{font-size:1.375rem;line-height:1.2}
  .mn-well{padding-top:var(--space-4)}
  .mn-sl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--mn-gap)}
  .mn-sl > li + li{border-top:0}
  .mn-sl > li:nth-child(n+3){border-top:1px solid var(--mn-hair)}
  .mn-th,.mn-tt{width:4.5rem;height:4.5rem}
  .mn-tt img{height:calc(1.125rem * var(--e,1))}
  .mn-sbr .mn-brand{--b-pad:var(--space-4);--b-sym:8rem}
  .mn-sbr .mn-brand > .mn-bl{max-width:min(32ch,calc(100% + var(--b-pad) - var(--b-sym) - var(--space-3)))}
  .mn-sbr .mn-brand > .mn-go{padding-top:var(--space-3)}
  .mn-sbr .mn-wm svg{height:2.25rem}
  .mn-sbr .mn-bt{font-size:1.5rem}
  .mn-foot{padding-top:var(--space-3);padding-bottom:calc(var(--space-3) + env(safe-area-inset-bottom,0px))}
  .mn-cta{width:auto;display:inline-flex;padding:0 var(--space-4)}
}

/* ---------- reduced motion: nothing moves; the room fades in 120ms, the pictures cut ---------- */
@media (prefers-reduced-motion:reduce){
  .mn-field,.mn-field.mn-on,.mn-sheet,.mn-sheet.mn-on{clip-path:none;opacity:0;transition:opacity .12s ease,visibility 0s linear .12s}
  .mn-field.mn-on,.mn-sheet.mn-on{opacity:1;transition:opacity .12s ease,visibility 0s}
  .mn-field .mn-k,.mn-sheet .mn-k{opacity:1;transform:none;transition:none!important}
  .mn-rule{transform:none;transition:none!important}
  .mn-nm,.mn-ct,.mn-nx,.mn-ic,.mn-arr,.mn-ph,.mn-tile,.mn-cap,.mn-brand,.nav-mid .mn-trig::after,.mn-acc-p,.mn-pm::before,.mn-pm::after,.mn-burger i,
  .mn-foot,.mn-foot::before,.mn-acc-b,.mn-acc-a,.mn-cta{transition:none!important}
  .mn-nx{transform:none}
  .mn-arr{transform:none!important}
}
@media (forced-colors:active){.mn-wm .logo-word,.mn-wm .logo-suffix,.mn-sym path{fill:currentColor}}