/* Equal side columns keep the navigation centred independently of the logo width. */
.feer-nav-actions{display:contents}
@media(min-width:1200px){
  .feer-nav-inner{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:16px}
  .feer-brand{grid-column:1;grid-row:1;justify-self:start;margin-inline-end:0}
  .feer-navigation{grid-column:2;grid-row:1;justify-self:center;gap:24px}
  .feer-nav-actions{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:16px;margin-inline-end:56px}
  .feer-nav-actions .feer-language{margin-inline-start:0}
  .feer-nav .theme-toggle{grid-column:3;grid-row:1;justify-self:end;margin:0}
}

/* Inset header shared by every page using the common navigation. */
.feer-nav{width:calc(100% - 32px);max-width:1360px;margin:16px auto;top:12px;border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 30px color-mix(in srgb,var(--navy-deep) 12%,transparent)}
/* Nav material (glass fill, blur, rim, scroll firming, fallbacks) moved to feerasta.css "Glass chrome", 29 Oct 2026. */
.feer-nav-inner{min-height:72px;padding:10px 22px;border-radius:inherit}
@media(max-width:1199px){.feer-nav-inner{display:flex;flex-wrap:wrap;gap:12px}.feer-nav .feer-navigation{order:5;flex:1 0 100%;display:grid;grid-template-columns:1fr 1fr;gap:0 24px;max-height:65dvh;overflow:auto}.feer-nav .feer-navigation a{border-bottom:1px solid var(--line)}.feer-nav .feer-brand{margin-inline-end:auto}.feer-nav .feer-language{margin-inline-start:0}}
@media(max-width:600px){.feer-nav{width:calc(100% - 20px);margin-block:10px;top:8px;border-radius:14px}.feer-nav-inner{padding:9px 12px;gap:8px;min-height:64px}.feer-nav .feer-navigation{grid-template-columns:1fr}.feer-nav .feer-language{display:none}.feer-nav:has(.feer-menu-toggle[aria-expanded=true]) .feer-language{display:block}.feer-nav .precision-logo{font-size:15px}.feer-nav .feer-mobile-contact{display:block}}
@media(min-width:1200px) and (max-width:1399px){html:not([lang="en"]) .feer-nav-inner{display:flex;flex-wrap:wrap;gap:12px}html:not([lang="en"]) .feer-nav .feer-navigation{order:5;flex:1 0 100%;display:grid;grid-template-columns:1fr 1fr;max-height:65dvh;overflow:auto}html:not([lang="en"]) .feer-nav-actions{display:contents}html:not([lang="en"]) .feer-brand{margin-inline-end:auto}}

/* No layout jump before site-navigation.js runs: with scripting on, start from the collapsed mobile menu (the script reaches the same state). Without scripting the link list stays open. */
@media(scripting:enabled) and (max-width:1199px){
  .feer-nav:not(:has(.feer-menu-toggle[aria-expanded=true])) .feer-navigation{display:none}
  .feer-menu-toggle[hidden]{display:block}
}
@media(scripting:enabled) and (min-width:1200px) and (max-width:1399px){
  html:not([lang="en"]) .feer-nav:not(:has(.feer-menu-toggle[aria-expanded=true])) .feer-navigation{display:none}
  html:not([lang="en"]) .feer-menu-toggle[hidden]{display:block}
}
/* Scroll edge and vibrant menu text (2026-10-26, M approved). The bar loses its hard bottom line:
   the hairline fades out toward the bottom edge, and a soft fade sits under the bar only while
   content scrolls beneath it (html.feer-scrolled, set in site-navigation.js). Menu text goes one
   weight step up with +0.01em tracking, in the full ink colour, never a flat grey on glass.
   Reduced transparency and more contrast keep the solid bar and its full border (below). */
.feer-nav::after{content:"";position:absolute;left:18px;right:18px;top:100%;height:16px;pointer-events:none;border-radius:0 0 16px 16px;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--navy-deep) 34%,transparent),transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  -webkit-mask:linear-gradient(to bottom,#000,transparent);mask:linear-gradient(to bottom,#000,transparent);
  opacity:0;transition:opacity .25s ease}
:root[data-theme="light"] .feer-nav::after{background:linear-gradient(to bottom,rgba(20,31,51,.10),transparent)}
html.feer-scrolled .feer-nav::after{opacity:1}
.feer-navigation a,.feer-language summary{font-weight:var(--chrome-weight);letter-spacing:var(--chrome-track);color:var(--ivory)}
@media(prefers-reduced-motion:reduce){.feer-nav::after{transition:none}}
.feer-nav{position:sticky}
@media(prefers-reduced-transparency:reduce){:root[data-theme="light"] .feer-nav{border-color:rgba(20,31,51,.16)}}
@media(prefers-contrast:more){:root[data-theme="light"] .feer-nav{border-color:var(--ivory)}}

/* Header phone. Elegance pass 30 Oct 2026 (M: "the phone number at the top looks very chunky").
   The number now matches the nav links in size, is one weight lighter than before, uses tabular
   figures and sits in the muted ink, turning full ink on hover. The handset is a hairline drawn at
   the text's cap height. The hours stay a quiet second line from 1440px (English only), in the same
   muted ink at 13px. A hairline rule separates the phone from the centred links. The tap target
   stays 44px: a transparent layer on the link covers the whole two-line block. */
.feer-phone{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;line-height:1.2;min-width:0}
.feer-phone a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:var(--chrome-size);font-weight:var(--chrome-weight);letter-spacing:var(--chrome-track);font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1;color:var(--muted);white-space:nowrap;text-decoration:none;text-decoration-thickness:1px;text-underline-offset:4px;transition:color .2s ease}
.feer-phone a:hover,.feer-phone a:focus-visible{color:var(--ivory)}
.feer-phone a:focus-visible{text-decoration:underline}
.feer-phone small{display:none;font-size:var(--chrome-note-size);font-weight:400;letter-spacing:var(--chrome-note-track);white-space:nowrap;color:var(--muted)}
.feer-phone svg{flex:none;width:var(--chrome-icon);height:var(--chrome-icon);opacity:.85}
.feer-phone svg path{stroke-width:var(--chrome-icon-stroke)}
.gradient-home .feer-phone a,.gradient-home .feer-phone small{color:var(--muted)}
.gradient-home .feer-phone a:hover,.gradient-home .feer-phone a:focus-visible{color:var(--gradient-ink)}
@media(min-width:1200px){.feer-nav-actions .feer-phone{padding-inline-start:16px;border-inline-start:1px solid var(--line)}}
@media(prefers-reduced-motion:reduce){.feer-phone a{transition:none}}
/* The header button speaks at the same weight as the links it sits beside. */
.feer-nav .feer-contact{font-weight:var(--chrome-weight);letter-spacing:var(--chrome-track)}
/* Glass QA 30 Oct 2026: the hours line is one line or nothing. The bar stops growing at 1408px, so
   the English line (about 280px at 13px) only fits from 1440px, and the translated lines (300px+)
   never fit beside the number: at 1800px they wrapped to three lines and ran into the links.
   Translated pages keep the number; their hours are on the contact page. */
@media(min-width:1440px){.feer-nav{max-width:1408px}.feer-phone a{min-height:0}:root:lang(en) .feer-phone small{display:block}
  .feer-phone a::before{content:"";position:absolute;inset:-6px -8px -6px 8px}
  /* With the hours line the actions are wider than their 1fr column and ran up against "About".
     The column now never shrinks below its content, and a wider gap keeps the links clear. */
  .feer-nav-inner{grid-template-columns:minmax(0,1fr) auto minmax(max-content,1fr);column-gap:32px}}
@media(min-width:1200px) and (max-width:1399px){.feer-phone svg{display:none}}
/* Phones: the number stays in the top bar instead of a second row (the header was 142px
   tall at 390px). Hours drop out of the bar; under 480px the number is a 44px call button
   whose accessible name is still the number. 27 Oct 2026. */
@media(max-width:600px){
  .feer-nav .feer-phone{flex:0 0 auto;margin-inline-start:auto}
  .feer-nav .feer-phone small{display:none}
}
@media(max-width:479px){
  .feer-nav .feer-phone a{font-size:0;gap:0;min-width:44px;min-height:44px;justify-content:center;border:1px solid var(--line);border-radius:999px}
  .feer-nav .feer-phone svg{width:16px;height:16px;opacity:1}
  .feer-nav .feer-phone a{color:var(--ivory)}
}

/* Glass QA 30 Oct 2026.
   - Translated pages between 601px and 1439px use the collapsed menu like English under 1200px,
     so the controls pack to the end of the bar instead of floating mid-bar (an auto margin on the
     language picker split the free space in two). site-navigation.js uses the same 1439px edge.
   - Phones: the closed bar holds brand, Menu and the call button only (at 320px the theme button
     wrapped onto a second row). Opening the menu shows the links, then one row with the language
     picker and the theme button together. */
@media(min-width:1400px) and (max-width:1439px){html:not([lang="en"]) .feer-nav-inner{display:flex;flex-wrap:wrap;gap:12px}html:not([lang="en"]) .feer-nav .feer-navigation{order:5;flex:1 0 100%;display:grid;grid-template-columns:1fr 1fr;max-height:65dvh;overflow:auto}html:not([lang="en"]) .feer-nav-actions{display:contents}html:not([lang="en"]) .feer-brand{margin-inline-end:auto}html:not([lang="en"]) .feer-nav .feer-navigation a{border-bottom:1px solid var(--line)}html:not([lang="en"]) .feer-nav .feer-mobile-contact{display:block}}
@media(scripting:enabled) and (min-width:1400px) and (max-width:1439px){
  html:not([lang="en"]) .feer-nav:not(:has(.feer-menu-toggle[aria-expanded=true])) .feer-navigation{display:none}
  html:not([lang="en"]) .feer-menu-toggle[hidden]{display:block}
}
@media(min-width:601px) and (max-width:1439px){:root:not(:lang(en)) .feer-nav .feer-language{margin-inline-start:0}}
@media(max-width:600px){
  .feer-nav:not(:has(.feer-menu-toggle[aria-expanded=true])) .theme-toggle{display:none}
  .feer-nav:has(.feer-menu-toggle[aria-expanded=true]) .feer-language{order:6;flex:1 1 auto;margin:0;border-top:0}
  .feer-nav:has(.feer-menu-toggle[aria-expanded=true]) .theme-toggle{order:7;align-self:center;margin:0}
  .feer-nav:has(.feer-menu-toggle[aria-expanded=true]) .feer-language summary{justify-content:flex-start;gap:6px}
}
/* Small tablets (601 to 767px): brand, Menu, number, language, contact and theme need about 750px,
   so the bar wrapped to two rows (131px). The contact button is already a link in the menu, and the
   language picker moves into the open menu below the links, as on phones. */
@media(min-width:601px) and (max-width:767px){
  .feer-nav .feer-nav-actions .feer-contact{display:none}
  .feer-nav:not(:has(.feer-menu-toggle[aria-expanded=true])) .feer-language{display:none}
  .feer-nav:has(.feer-menu-toggle[aria-expanded=true]) .feer-language{order:6;flex:1 1 100%;margin:0;border-top:0}
}
/* Open menu under 768px: the language trigger's 10px inner padding is pulled back so its text
   lines up with the menu links above it. */
@media(max-width:767px){.feer-nav:has(.feer-menu-toggle[aria-expanded=true]) .feer-language-trigger{margin-inline-start:-10px}}

/* Motion kit, 30 Oct 2026 (usmannaveed.ca teardown, our own code, tokens only).
   1. Desktop links: colour warms to the accent and a 1px accent underline grows from the start
      edge on hover and keyboard focus (180ms); the current page keeps its underline.
   2. Menu button: a 44px target at every width; its "+" turns into a close mark when open.
   3. Phone and tablet menu: opens and closes with a smooth height and fade where the browser can
      interpolate to auto height (interpolate-size); elsewhere a short fade in, or a plain snap.
      site-navigation.js adds html.feer-menu-anim on the first press, so nothing animates on load. */
@media(min-width:1200px){
  .feer-navigation>a{position:relative;transition:color .18s ease-out}
  .feer-navigation>a::after{content:"";position:absolute;inset-inline:0;bottom:6px;height:1px;background:var(--accent);
    transform:scaleX(0);transform-origin:left center;transition:transform .18s cubic-bezier(.23,1,.32,1)}
  html[dir="rtl"] .feer-navigation>a::after{transform-origin:right center}
  .feer-navigation>a:is(:hover,:focus-visible){color:var(--accent)}
  .feer-navigation>a:is(:hover,:focus-visible,[aria-current="page"])::after{transform:scaleX(1)}
  .feer-navigation>a{background-image:none}
}
.feer-menu-toggle{min-height:44px;min-width:44px}
.feer-menu-toggle>span{display:inline-block;transition:transform .2s cubic-bezier(.23,1,.32,1)}
.feer-menu-toggle[aria-expanded="true"]>span{transform:rotate(45deg)}
@media(prefers-reduced-motion:no-preference){
  html.feer-menu-anim .feer-nav .feer-navigation{transition:opacity .2s ease-out,translate .2s cubic-bezier(.23,1,.32,1),display .24s allow-discrete}
  @starting-style{html.feer-menu-anim .feer-nav .feer-navigation{opacity:0;translate:0 -4px}}
  @supports (interpolate-size:allow-keywords){
    html.feer-menu-anim .feer-nav .feer-navigation{interpolate-size:allow-keywords;
      transition:height .26s cubic-bezier(.23,1,.32,1),opacity .2s ease-out,display .26s allow-discrete}
    html.feer-menu-anim .feer-nav .feer-navigation[hidden]{height:0;opacity:0;overflow:clip}
    html.feer-menu-anim .feer-nav.feer-menu-moving .feer-navigation{overflow:clip}
    @starting-style{html.feer-menu-anim .feer-nav .feer-navigation{height:0;opacity:0;translate:none}}
  }
}
@media(prefers-reduced-motion:reduce){.feer-menu-toggle>span,.feer-navigation>a,.feer-navigation>a::after{transition:none}}