/* =============================================================================
   Site header for the standalone pages
   -----------------------------------------------------------------------------
   The brochures and the cutting table are whole documents of their own - they
   never used Site.master, so they had no site navigation. This file carries the
   header's CSS across.

   Which rules land here is DERIVED: every class that appears in the header
   markup is collected, and a rule is kept when it targets one of them. Two bugs
   are worth remembering, because both rendered a bar with no layout at all:
     * a hand-written filter matched `.header` with a word boundary, which
       silently dropped .header__inner, .header__logo, .header__actions,
       .header__phone and .header__search.
     * Site.master mentions "<style>" inside an ASP <%-- --%> comment, so a
       plain <style>([\s\S]*?)</style> search starts at the wrong place and
       returns markup as if it were CSS. The comments are stripped first now.

   Safe to drop onto a page that already has its own design because:
     * every selector is scoped under .fd-shell, the wrapper the markup sits in.
       These pages define their own .btn and .nav for their own controls.
     * shell.css's *, html, body, a and :root rules are deliberately NOT copied.
       They set the whole document's type and colour and would repaint the page.
     * the variables the rules need are set on .fd-shell itself, so the page's
       own palette is neither needed nor touched.
   ============================================================================= */
.fd-shell{
  position:relative; z-index:50;
  /* 50 is chosen against the cutting table, the busiest host: its own bar is 40
     and its overlays start at 60 (.veil), 70 (.flow), 80 (.dlgveil), 90
     (.toasts) and 200 (the lead gate). The header sits above the page's bar but
     under every dialog - a nav floating over an open modal would be a bug. */
  --border:rgba(184, 132, 58, 0.2);
  --cream:#faf7f2;
  --gold:#b8843a;
  --gold-pale:#f5ede0;
  --header-h:64px;
  --ink:#0f1923;
  --ink-light:#2a3a4a;
  --max:1240px;
  --radius:4px;
  --radius-lg:12px;
  --sans:'DM Sans', system-ui, sans-serif;
  --shadow-lg:0 20px 60px rgba(15, 25, 35, 0.14);
  --shadow-sm:0 2px 8px rgba(15, 25, 35, 0.06);
  --white:#ffffff;
}

.fd-shell .header{position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--header-h); background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); transition: background 0.3s, box-shadow 0.3s;}
.fd-shell .header.scrolled{background: rgba(255, 255, 255, 0.98); box-shadow: var(--shadow-sm);}
.fd-shell .header__inner{max-width: var(--max); margin: 0 auto; padding: 0 32px; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px;}
.fd-shell .header__logo{display: flex; align-items: center; gap: 10px; flex-shrink: 0;}
.fd-shell .nav{display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center;}
.fd-shell .nav__link{font-size: 0.875rem; font-weight: 500; color: var(--ink-light); padding: 8px 14px; border-radius: var(--radius); transition: color 0.2s, background 0.2s; display: flex; align-items: center; gap: 5px; white-space: nowrap;}
.fd-shell .nav__link:hover, .fd-shell .nav__link.active{color: var(--gold); background: var(--gold-pale);}
.fd-shell .nav__dropdown{position: relative;}
.fd-shell .nav__dropdown-menu{position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-8px); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 8px; min-width: 302px; opacity: 0; visibility: hidden; transition: all 0.2s; z-index: 100;}
.fd-shell .nav__dropdown:hover .nav__dropdown-menu{opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);}
.fd-shell .nav__dropdown-item{display: flex; align-items: center; gap: 12px; padding: 10px 16px; font-size: 0.875rem; color: var(--ink-light); border-radius: 6px; transition: all 0.2s;}
.fd-shell .nav__dropdown-item:hover{background: var(--gold-pale); color: var(--gold); padding-left: 20px;}
.fd-shell .nav__dropdown-thumb{width: 34px; height: 34px; flex: 0 0 34px; border-radius: 7px; object-fit: cover; background: var(--gold-pale); border: 1px solid var(--border); transition: transform 0.2s;}
.fd-shell .nav__dropdown-item:hover .nav__dropdown-thumb, .fd-shell .nav__submenu-item:hover .nav__dropdown-thumb{transform: scale(1.08);}
.fd-shell .nav__submenu-item .nav__dropdown-thumb{width: 28px; height: 28px; flex: 0 0 28px; border-radius: 6px;}
.fd-shell .nav__subwrap{position: relative;}
.fd-shell .nav__sub-caret{margin-left: auto; font-size: 0.62rem; opacity: 0.55;}
.fd-shell .nav__submenu{position: absolute; top: -8px; left: calc(100% + 6px); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 8px; min-width: 216px; opacity: 0; visibility: hidden; transform: translateX(-6px); transition: all 0.2s; z-index: 110;}
.fd-shell .nav__subwrap:hover .nav__submenu{opacity: 1; visibility: visible; transform: translateX(0);}
.fd-shell .nav__submenu-item{display: flex; align-items: center; gap: 10px; padding: 8px 16px; font-size: 0.875rem; color: var(--ink-light); border-radius: 6px; transition: all 0.2s;}
.fd-shell .nav__submenu-item:hover{background: var(--gold-pale); color: var(--gold); padding-left: 20px;}
.fd-shell .nav.active .nav__submenu{position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; background: rgba(0, 0, 0, 0.04); margin: 4px 0 4px 18px; padding: 4px; min-width: 0;}
.fd-shell .nav.active .nav__sub-caret{display: none;}
.fd-shell .header__actions{display: flex; align-items: center; gap: 12px; flex-shrink: 0;}
.fd-shell .btn{display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-weight: 500; font-size: 0.875rem; cursor: pointer; border: none; transition: all 0.25s; white-space: nowrap; letter-spacing: 0.01em;}
.fd-shell .btn--primary{background: var(--gold); color: var(--white); padding: 11px 28px; border-radius: 50px;}
.fd-shell .btn--primary:hover{background: #a07230; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(184, 132, 58, .35); color: white;}
.fd-shell .btn--outline:hover, .fd-shell .btn--outline.active{border-color: var(--gold); color: var(--gold);}
.fd-shell .hamburger{display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px;}
.fd-shell .hamburger span{display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: all 0.3s;}
@media (max-width: 768px){
  .fd-shell .nav{display: none;}
  .fd-shell .hamburger{display: flex; z-index: 2001;}
  .fd-shell .header__actions{display: none;}
  .fd-shell .header__logo img{height: 38px !important;}
  .fd-shell .header__inner{gap: 0 !important;}
  .fd-shell .nav.active{display: flex; position: fixed; top: 24px; left: 20px; right: 20px; width: auto !important; height: auto !important; max-height: calc(100vh - 48px); background: var(--cream) !important; flex-direction: column; padding: 48px 20px 24px 20px; gap: 8px; overflow-y: auto; z-index: 2000; align-items: stretch !important; justify-content: flex-start; border-radius: 12px; box-shadow: 0 0 0 100vh rgba(15, 25, 35, 0.4), 0 20px 40px rgba(0, 0, 0, 0.15) !important;}
  .fd-shell .nav.active .nav__link{padding: 12px 16px; width: 100%; font-size: 0.95rem; border-radius: 6px; color: var(--ink);}
  .fd-shell .nav__dropdown{width: 100%;}
  .fd-shell .nav.active .nav__dropdown-menu{position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; display: none !important; background: rgba(0, 0, 0, 0.04) !important; border-radius: 6px !important; margin-top: 4px !important; padding: 8px !important; box-shadow: none !important; border: none !important;}
  .fd-shell .nav.active .nav__dropdown.active .nav__dropdown-menu{display: block !important;}
  .fd-shell .nav.active .nav__dropdown.active > .nav__link{background: var(--gold-pale) !important; color: var(--gold) !important;}
  .fd-shell .nav.active .nav__dropdown-item{padding: 10px 16px; font-size: 0.85rem; border-radius: 4px; color: var(--ink-light);}
  .fd-shell .hamburger.active{position: fixed !important; top: 40px !important; right: 36px !important;}
  .fd-shell .hamburger.active span{background: var(--ink) !important;}
  .fd-shell .hamburger.active span:nth-child(1){transform: translateY(7px) rotate(45deg);}
  .fd-shell .hamburger.active span:nth-child(2){opacity: 0;}
  .fd-shell .hamburger.active span:nth-child(3){transform: translateY(-7px) rotate(-45deg);}
}
@media (min-width: 769px){
  .fd-shell .nav__link{padding-left: 9px; padding-right: 9px;}
}
.fd-shell .nav__link:hover{color: #b8843a; background: rgba(184, 132, 58, 0.10);}
.fd-shell .nav__link.active{color: #b8843a; background: transparent; box-shadow: none;}
.fd-shell .nav__link.active:hover{color: #b8843a; background: rgba(184, 132, 58, 0.10);}
.fd-shell .nav__dropdown-menu{min-width: 332px;}
.fd-shell .nav__submenu{min-width: 216px;}
.fd-shell .nav__dropdown-thumb{width: 34px;
            height: 34px;
            flex: 0 0 34px;
            border-radius: 7px;
            object-fit: cover;
            background: var(--gold-pale, #faf3e8);
            border: 1px solid var(--border, rgba(15, 25, 35, 0.08));
            transition: transform 0.2s ease;}
.fd-shell .nav__dropdown-item{display: flex; align-items: center; gap: 12px;}
.fd-shell .nav__dd-parent{width: 100%;
            border: 0;
            background: none;
            font: inherit;
            text-align: left;
            cursor: pointer;}
.fd-shell .nav__subwrap:focus-within .nav__submenu{opacity: 1;
            visibility: visible;
            transform: translateX(0);}
.fd-shell .nav__submenu--wear .nav__dropdown-thumb{width: 34px;
            height: 34px;
            flex: 0 0 34px;
            border-radius: 7px;
            object-fit: cover;
            background: var(--gold-pale, #faf3e8);
            padding: 0;}
.fd-shell .nav__submenu-item{display: flex; align-items: center; gap: 10px; padding: 8px 16px;}
.fd-shell .nav__submenu-item .nav__dropdown-thumb{width: 46px;
            height: 28px;
            flex: 0 0 46px;
            border-radius: 5px;
            object-fit: contain;
            background: #fff;
            border: 1px solid var(--border, rgba(15, 25, 35, 0.08));
            padding: 2px 3px;}
.fd-shell .nav__dropdown-item:hover .nav__dropdown-thumb, .fd-shell .nav__submenu-item:hover .nav__dropdown-thumb{transform: scale(1.08);}
@media (max-width: 768px){
  .fd-shell .nav__dropdown-menu{min-width: 0;}
  .fd-shell .nav__submenu{min-width: 0;}
}
.fd-shell .header__phone{display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 0.95rem;
            font-weight: 600;
            color: #0f1923;
            white-space: nowrap;
            padding: 8px 4px;
            text-decoration: none;
            transition: color 0.2s;}
.fd-shell .header__phone i{color: #b8843a; font-size: 0.85rem;}
.fd-shell .header__phone:hover{color: #b8843a;}
.fd-shell .header__phone i{display: inline-block;
            animation: fdPhoneBlink 2s steps(1, end) infinite;}
.fd-shell .header__phone:hover i{animation: none; opacity: 1;}
@media (prefers-reduced-motion: reduce){
  .fd-shell .header__phone i{animation: none; opacity: 1;}
}
.fd-shell .header__search{display: flex;
            align-items: center;
            border: 1px solid transparent;
            border-radius: 50px;
            transition: border-color .25s, background .25s;}
.fd-shell .header__search-input{width: 0;
            padding: 0;
            border: none;
            background: transparent;
            font-family: inherit;
            font-size: .875rem;
            color: #0f1923;
            transition: width .28s cubic-bezier(.22, .61, .36, 1), padding .28s;}
.fd-shell .header__search-input::placeholder{color: #9aa1a8;}
.fd-shell .header__search-input:focus{outline: none;}
.fd-shell .header__search:hover, .fd-shell .header__search:focus-within{border-color: rgba(184, 132, 58, .35);
            background: rgba(184, 132, 58, .06);}
.fd-shell .header__search:hover .header__search-input, .fd-shell .header__search:focus-within .header__search-input, .fd-shell .header__search-input:not(:placeholder-shown){width: 200px;
            padding: 8px 6px 8px 14px;}
.fd-shell .header__search-btn{background: none;
            border: none;
            cursor: pointer;
            color: #2a3a4a;
            padding: 8px 10px;
            font-size: .95rem;
            line-height: 1;
            transition: color .2s;}
.fd-shell .header__search-btn:hover{color: #b8843a;}
.fd-shell .header__search-input:-webkit-autofill{box-shadow: 0 0 0 30px #fff inset;}
.fd-shell .header__search-input::-webkit-search-cancel-button{cursor: pointer;}
.fd-shell .nav__search{display: none;}
@media (max-width: 768px){
  .fd-shell .nav.active .nav__search{display: flex;
                align-items: center;
                width: 100%;
                margin-bottom: 12px;
                background: #fff;
                border: 1px solid rgba(184, 132, 58, .35);
                border-radius: 50px;}
  .fd-shell .nav.active .nav__search input{flex: 1;
                min-width: 0;
                border: none;
                background: transparent;
                padding: 12px 6px 12px 18px;
                font-family: inherit;
                font-size: .95rem;
                color: #0f1923;}
  .fd-shell .nav.active .nav__search input:focus{outline: none;}
  .fd-shell .nav.active .nav__search button{border: none;
                background: none;
                cursor: pointer;
                color: #b8843a;
                padding: 12px 16px;
                font-size: 1rem;
                line-height: 1;}
}

/* ---------------------------------------------------------------------------
   Last on purpose: same specificity as the copied rules, so these only win by
   coming after them. On the rest of the site the header is a fixed overlay and
   every page leaves room for it with its own padding-top. These pages do not -
   they open with their own bar - so here it sits in the flow above it.
   --------------------------------------------------------------------------- */
.fd-shell .header{position:static}

/* shell.css resets every link with a document-wide `a{text-decoration:none}`,
   which is not copied here - it would restyle the whole page. Scoped to the
   header instead, otherwise the host page's own link styling underlines every
   nav item. */
.fd-shell a{text-decoration:none}

/* ---------------------------------------------------------------------------
   Class collisions with the host pages
   ---------------------------------------------------------------------------
   Scoping every selector under .fd-shell wins where both sides declare the same
   property, but it does nothing about a property the copied rules never set -
   the host's own rule is then the only one, and it applies.

   Two classes actually collide, measured across all nineteen pages:

   .nav   the cutting table uses it for the prev/next arrows of its image
          viewer: position:absolute, 48x84, translateY(-50%). The header's <nav>
          inherited all of that and was dragged out of the flow on top of the
          logo. Nothing here touches `display`, because the mobile rules hide
          the bar with it at the same specificity.

   .btn   every brochure sets text-transform:uppercase on its own buttons, which
          is why "Book Free Demo" was shouting.
   --------------------------------------------------------------------------- */
.fd-shell .nav{position:static; top:auto; left:auto; right:auto; bottom:auto;
  width:auto; height:auto; transform:none; background:none; border:0;
  border-radius:0; place-items:normal; backdrop-filter:none; opacity:1}
.fd-shell .btn{text-transform:none}