/* ══ the menu ══
   Shared by all six pages so there is exactly one place to change it.

   What it replaces: a horizontally scrolling row of product links pinned under
   the rail. It worked, but it clipped its own last item at the edge — which
   reads as a fault, not as an affordance — and it held 49px of every screen
   permanently.

   What it is: a full screen made of the company's own photographs. A gate
   fabricator's menu should look like gates. The five products are the five
   pictures; everything else is a line of text underneath. */

/* The panel is position:fixed at inset:0, so it is sized by the initial
   containing block — and the ICB follows the document, not the viewport. Any
   overflow inside the panel grew the document, which grew the ICB, which grew
   the panel: a feedback loop that settled 45px wider than the screen. Clipping
   the document breaks it. `clip` rather than `hidden` so no scroll container is
   created and position:sticky keeps working. */
html{overflow-x:clip}
.menu{max-width:100vw}

.menub{display:none}

.menu{position:fixed;inset:0;z-index:80;background:var(--navy-deep);
  overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  opacity:0;visibility:hidden;transition:opacity .26s var(--e),visibility .26s}
.menu.on{opacity:1;visibility:visible}
.menu[hidden]{display:none}

.menu .mtop{display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;height:56px;padding-inline:var(--gut);
  border-bottom:1px solid rgba(255,255,255,.12)}
.menu .mtop img{display:block;height:18px;width:auto}
.menu .mtop img.mk{height:32px}
.menu .lg{display:flex;align-items:center;gap:9px;flex:none;min-width:0}
.menu .x{flex:none;width:46px;height:46px;border:1px solid rgba(255,255,255,.26);
  background:none;color:#fff;font-size:24px;line-height:1;border-radius:2px;cursor:pointer}
.menu .x:hover{background:#fff;color:var(--navy)}

.menu .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;padding:2px 0}
.menu .grid a{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--navy);
  display:block;min-width:0;opacity:0;transform:translateY(14px)}
.menu.on .grid a{opacity:1;transform:none;
  transition:opacity .5s var(--e),transform .55s var(--e);transition-delay:calc(var(--i)*55ms)}
.menu .grid img{width:100%;height:100%;object-fit:cover;filter:contrast(1.05) saturate(.92)}
.menu .grid .g{position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(8,21,31,.94) 2%,rgba(8,21,31,.4) 42%,transparent 78%)}
.menu .grid b{position:absolute;inset-block-end:11px;inset-inline:14px;color:#fff;
  font-family:var(--display);font-size:20px;font-weight:800;letter-spacing:-.035em}
.menu .grid a[aria-current]{outline:2px solid var(--azure-lite);outline-offset:-2px}
.menu .grid a[aria-current] b::after{content:"";display:inline-block;width:6px;height:6px;
  border-radius:50%;background:var(--azure-lite);margin-inline-start:8px;vertical-align:middle}
/* Span only when the last tile would sit alone. Five products need the
   fifth stretched; six do not, and forcing it stranded the fifth beside
   a hole. */
.menu .grid a:nth-child(odd):last-child{grid-column:span 2;aspect-ratio:16/7}

.menu .rest{padding:6px var(--gut) 0}
.menu .rest a{display:flex;align-items:center;min-height:54px;color:#fff;font-size:17px;
  font-weight:600;border-bottom:1px solid rgba(255,255,255,.1)}
.menu .rest a s{text-decoration:none;margin-inline-start:auto;font-family:Plex,monospace;
  font-size:11px;letter-spacing:.16em;color:var(--azure-lite)}

.menu .call{padding:22px var(--gut) calc(30px + var(--pad));display:grid;gap:8px}
.menu .call a{display:flex;align-items:center;justify-content:center;min-height:52px;
  font-weight:700;font-size:16px;border-radius:2px}
.menu .call .p{background:var(--azure);color:#fff}
.menu .call .s{border:1px solid rgba(255,255,255,.34);color:#fff;font-family:Plex,monospace}
.menu .call p{margin-top:6px;font-size:13.5px;color:#7e97ad;text-align:center}

@media(max-width:820px){
  /* A 1px outline box was the heaviest object in a 390px rail — it read as a
     form field parked next to the logo. A soft fill carries the same tap
     affordance at a fraction of the visual weight, and the azure rules tie the
     control to the brand instead of leaving it a grey utility. */
  .menub{display:flex;align-items:center;justify-content:center;gap:9px;flex:none;
    margin-inline-start:auto;min-height:44px;padding:0 15px;border:0;
    background:rgba(255,255,255,.09);color:#fff;font-family:var(--body);font-size:15px;
    font-weight:600;border-radius:3px;cursor:pointer;transition:background .2s}
  .menub:active{background:rgba(255,255,255,.16)}
  .menub i{display:grid;gap:3.5px;width:17px}
  .menub i b{display:block;height:2px;background:var(--azure-lite);border-radius:1px;
    transition:width .2s}
  .menub i b:last-child{width:64%;margin-inline-start:auto}
  /* logo + menu only. The number is already the primary button in the fixed
     bottom bar and the first action inside the menu; a third item in a 390px
     rail just clipped it. */
  .rail .tel{display:none}
  .menub{margin-inline-start:auto}
  .pbar{display:none!important}
}
/* The trigger and the close button sit at the same point on the screen, so on a
   phone the tap that opened the panel left its :hover on the × underneath —
   the panel opened with the close button already inverted to white. */
/* the rail cannot wrap, and at 320 the button was losing its left edge */
@media(max-width:360px){
  .menub{padding:0 12px;gap:7px;font-size:14.5px}
  .menub i{width:15px}
}
@media(hover:hover){
  .menub:hover{background:rgba(255,255,255,.16)}
  .menub:hover i b:last-child{width:100%}
}
@media(hover:none){
  .menu .x:hover{background:none;color:#fff}
}
@media(prefers-reduced-motion:reduce){
  .menu,.menu .grid a{transition:none}
  .menu .grid a{opacity:1;transform:none}
}