/* =====================================================================
   SweBend - new header (staging trial)
   sections/01-header.css from the no-Avada homepage rebuild, carried over
   verbatim below the preamble. Everything it depended on from tokens.css -
   the brand tokens, the reset, the button - is restated here scoped under
   .s-nav, so nothing in this file can reach the rest of the Avada page.

   Source of truth: marketing/pages/homepage-rebuild/sections/01-header.css
   Edit there first, then mirror. Do not diverge silently.
   ===================================================================== */

/* Own family names, so they cannot shadow the Poppins and Bebas Neue that
   Avada registers through fusion-gfonts. Same files and same names as
   swebend-new-footer, so a page carrying both downloads each face once. */
@font-face{font-family:"SWB Bebas Neue";src:url("fonts/BebasNeue-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"SWB Poppins";src:url("fonts/Poppins-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"SWB Poppins";src:url("fonts/Poppins-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* Retire the Avada Layouts header. The inline script in header.html removes
   the node; this is the no-JavaScript fallback. */
.fusion-tb-header{display:none!important}

/* THE OVERLAY IS NOT UNIVERSAL, and this is the one thing the rebuild could not
   have known: it was built for a single page that opens with a full-bleed hero.
   swebend.com has two kinds of template.

   The front page opens with the hero, so the bar floats over it - that is the
   look, and reserving space for it instead puts the bar on a strip of page
   background where its own dark gradient turns grey and the white wordmark
   stops reading.

   Every interior template opens with a breadcrumb and body copy on white. There
   the floating bar covers the breadcrumb, and a bar that only goes solid after
   40px of scroll spends that first screen as grey text on white. So those get
   the height reserved AND the solid treatment from the first frame.

   The class comes from is_front_page() in the PHP rather than the theme's own
   `home` body class, so the rule says what it means and survives a template
   change. */
.fusion-wrapper{padding-top:var(--swb-nav-h)}
body.swb-nav-overlay .fusion-wrapper{padding-top:0}

body:not(.swb-nav-overlay) .s-nav .s-nav__bar{
  background:color-mix(in srgb, var(--steel) 90%, transparent);
  -webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);
  box-shadow:inset 0 -1px 0 var(--hair);
}
body:not(.swb-nav-overlay) .s-nav .s-nav__bar::before{opacity:0;transition:none}

/* One place to change the bar height: the offset above and the bar itself
   have to agree or the page opens with a gap or a covered first line. */
:root{--swb-nav-h:72px}

/* ---- tokens + local reset ---- */
.s-nav{
  --yellow:#F9EC4B;
  --white:#FFFFFF;
  --iron:#101820;
  --steel:#0F2E4C;
  --steel-deep:#0A2237;
  --on-dark:#BCC5D0;
  --green-bright:#4FC3BD;
  --display:"SWB Bebas Neue","Bebas Neue","Arial Narrow",sans-serif;
  --text:"SWB Poppins","Poppins","Helvetica Neue",Arial,sans-serif;
  --margin:clamp(1.4rem,5vw,5.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
  --nav-h:var(--swb-nav-h);
  font-family:var(--text);font-weight:300;font-size:16px;line-height:1.65;
  letter-spacing:normal;text-align:left;color:var(--on-dark);
}
.s-nav,.s-nav *,.s-nav *::before,.s-nav *::after{box-sizing:border-box}
.s-nav p{margin:0;padding:0}
.s-nav ul{margin:0;padding:0;list-style:none}
.s-nav li{margin:0;padding:0;list-style:none;background:none}
.s-nav li::before,.s-nav li::marker{content:none}
.s-nav a{color:inherit;text-decoration:none;border:0;box-shadow:none;background:none}
.s-nav a:hover,.s-nav a:focus{text-decoration:none}
.s-nav img,.s-nav svg{max-width:100%;height:auto;display:block;border:0}
.s-nav button{font:inherit;color:inherit;margin:0;text-transform:none}
.s-nav :focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* .btn/.btn-primary in the rebuild are global primitives from tokens.css and
   Avada has its own .btn, so the pill is renamed rather than borrowed. */
.s-nav .s-nav__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:48px;padding:.85rem 1.7rem;border-radius:999px;border:1px solid transparent;
  background:var(--yellow);color:var(--iron);
  font-family:var(--text);font-weight:500;font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;white-space:nowrap;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.s-nav .s-nav__btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(249,236,75,.75)}

/* ==========================================================================
   01 - Header: sticky nav, dropdowns, mobile drawer, scroll progress
   ========================================================================== */
.s-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  --panel:var(--steel-deep);
  --navtext:#E6EBF1;
  --hair:rgba(255,255,255,.13);
  --dim:color-mix(in srgb, var(--on-dark) 92%, transparent);
}

/* ---- scroll progress ---- */
.s-nav__progress{position:absolute;top:0;left:0;right:0;height:3px;z-index:3;pointer-events:none}
.s-nav__progress-fill{
  display:block;height:100%;background:var(--yellow);
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;
}

/* ---- bar ---- */
.s-nav__bar{
  position:relative;z-index:2;height:var(--nav-h);
  display:flex;align-items:center;gap:1.2rem;
  padding:0 var(--margin);
  transition:background .35s var(--ease),box-shadow .35s var(--ease);
}
.s-nav__bar::before{
  content:"";position:absolute;inset:0 0 auto;height:150px;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--steel-deep) 66%, transparent) 0%,
    color-mix(in srgb, var(--steel-deep) 28%, transparent) 46%,
    color-mix(in srgb, var(--steel-deep) 0%, transparent) 100%);
  transition:opacity .35s var(--ease);
}
.s-nav--solid .s-nav__bar{
  background:color-mix(in srgb, var(--steel) 90%, transparent);
  -webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);
  box-shadow:inset 0 -1px 0 var(--hair);
}
/* The 150px top-down band is hero furniture. Over the six light and mist
   sections it is a grey smudge along the top edge, so the solid state kills
   it outright - and kills its own fade too, or the swap paints the smudge
   back in for the length of the transition. */
.s-nav--solid .s-nav__bar::before{opacity:0;transition:none}

/* A programmatic jump - anchor nav, bfcache restore, skip-link - moves the
   scroll position faster than a .35s fade can follow, so the bar paints
   translucent mid-grey frames carrying a white wordmark over a white
   section. 01-header.js sets this class for one frame around any jump. */
.s-nav--nofade .s-nav__bar,
.s-nav--nofade .s-nav__bar::before{transition:none}

.s-nav__brand{display:flex;align-items:center;flex:none;min-height:44px}
.s-nav__brand img{height:24px;width:auto}

/* ---- desktop nav ---- */
.s-nav__desk{display:none;margin-left:auto}
.s-nav__list{display:flex;align-items:center;gap:clamp(1rem,2.1vw,2rem)}
.s-nav__item{position:relative;display:flex}
.s-nav__link{
  position:relative;display:inline-flex;align-items:center;gap:.4rem;
  height:var(--nav-h);padding:0 1px;
  font-family:var(--text);font-weight:500;font-size:.76rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--navtext);transition:color .25s var(--ease);
}
.s-nav__link::after{
  content:"";position:absolute;left:0;bottom:20px;height:2px;width:0;
  background:linear-gradient(90deg,var(--yellow) 0 6px,var(--green-bright) 6px);
  transition:width .3s var(--ease);
}
.s-nav__item:hover > .s-nav__link,
.s-nav__link:focus-visible,
.s-nav__item--open > .s-nav__link{color:#fff}
.s-nav__item:hover > .s-nav__link::after,
.s-nav__link:focus-visible::after,
.s-nav__item--open > .s-nav__link::after{width:100%}
.s-nav__caret{width:9px;height:6px;flex:none;opacity:.7;transition:transform .3s var(--ease)}
.s-nav__item:hover > .s-nav__link .s-nav__caret,
.s-nav__item--open > .s-nav__link .s-nav__caret{transform:rotate(180deg);opacity:1}

/* ---- dropdown panel ---- */
.s-nav__panel{
  position:absolute;top:calc(var(--nav-h) - 12px);left:-1.15rem;min-width:262px;
  background:var(--panel);border:1px solid var(--hair);border-top:2px solid var(--yellow);
  padding:.5rem 0;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s;
}
.s-nav__item:hover > .s-nav__panel,
.s-nav__item:focus-within > .s-nav__panel,
.s-nav__item--open > .s-nav__panel{opacity:1;visibility:visible;transform:none}
.s-nav__prow{
  display:flex;align-items:center;gap:.9rem;min-height:46px;padding:.35rem 1.3rem .35rem 1.15rem;
  position:relative;transition:background .2s var(--ease)}
.s-nav__prow::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--yellow);
  transform:scaleY(0);transform-origin:50% 50%;transition:transform .22s var(--ease)}
.s-nav__prow:hover,.s-nav__prow:focus-visible{background:rgba(255,255,255,.045)}
.s-nav__prow:hover::before,.s-nav__prow:focus-visible::before{transform:scaleY(1)}
.s-nav__pnum{
  font-family:var(--display);font-size:.85rem;letter-spacing:.08em;color:var(--green-bright);
  opacity:.6;flex:none;width:1.4rem}
.s-nav__plabel{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:1.06rem;letter-spacing:.045em;line-height:1.1;color:#fff}

/* ---- CTA + burger ---- */
.s-nav__end{display:flex;align-items:center;gap:.7rem;margin-left:auto;flex:none}
.s-nav__cta{min-height:44px;padding:.62rem 1.25rem;font-size:.75rem;letter-spacing:.11em}
.s-nav__burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;margin-right:-10px;flex:none;color:#fff}
.s-nav__burger-box{display:block;width:22px}
.s-nav__burger-box i{
  display:block;height:2px;background:currentColor;border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s var(--ease)}
.s-nav__burger-box i + i{margin-top:5px}
.s-nav__burger-box i:nth-child(2){width:15px;margin-left:auto;background:var(--yellow)}

/* ---- backdrop ---- */
.s-nav__scrim{
  position:fixed;inset:0;background:color-mix(in srgb, var(--steel-deep) 78%, transparent);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  z-index:4;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .38s var(--ease),visibility .38s}
.s-nav--drawer .s-nav__scrim{opacity:1;visibility:visible;pointer-events:auto}

/* ---- drawer ---- */
.s-nav__drawer{
  position:fixed;top:0;right:0;z-index:5;width:min(86vw,400px);
  height:100vh;height:100dvh;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  display:flex;flex-direction:column;
  background:var(--panel);border-left:1px solid var(--hair);
  padding:0 var(--margin) calc(1.4rem + env(safe-area-inset-bottom,0px));
  transform:translateX(102%);visibility:hidden;
  /* visibility is stepped, not faded: `visible` the instant the panel opens so
     the close button can take focus in the same task as the click, and held
     until the slide-out has finished on the way back. Transitioning it instead
     meant the panel was still computed hidden on the opening frame and
     closeBtn.focus() silently no-opped, leaving focus on the body. */
  transition:transform .42s var(--ease),visibility 0s linear .42s;
  box-shadow:-30px 0 70px -34px rgba(0,0,0,.95)}
.s-nav--drawer .s-nav__drawer,.s-nav__drawer:target{
  transform:none;visibility:visible;pointer-events:auto;
  transition:transform .42s var(--ease),visibility 0s;
}
/* visibility is on the transition list, so it stays `visible` for the whole
   slide-out; without this a closed, off-canvas drawer still swallows taps over
   the right edge of the page. 01-header.js pairs this with `inert`, which
   covers the keyboard. */
.s-nav__drawer{pointer-events:none}
/* The drawer carries no decoration. A bend arc lived here to fill the space
   under the last row; once the rows breathe there is nothing to fill, and any
   arc large enough to read crossed either a link row or its toggle button. */

/* Sticky: opening a submenu scrolls the toggle into view, which used to carry
   the header - and the only close button - off the top of the drawer. */
.s-nav__dhead{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--nav-h);flex:none;position:sticky;top:0;z-index:4;
  background:var(--panel)}
.s-nav__dhead img{height:22px;width:auto}
.s-nav__close{
  width:48px;height:48px;margin-right:-12px;flex:none;
  display:inline-grid;place-items:center;background:none;border:0;cursor:pointer;color:#fff}
.s-nav__close svg{width:20px;height:20px}
.s-nav__close:hover{color:var(--yellow)}

/* Rows keep their natural pitch. Stretching them to fill the drawer floated
   46px of air between each label and its hairline; the surplus now goes to the
   footer's padding-top instead, and the footer still pins to the bottom. */
.s-nav__dnav{position:relative;z-index:2;padding:.6rem 0 2rem;flex:none;display:flex}
.s-nav__dnav > ul{flex:1;display:flex;flex-direction:column}
/* The row pitch is set here, not on the link: the link keeps its 52-56px tap
   box and the surplus becomes dead zone at the row boundary, so a thumb cannot
   reach two full-width targets at once. */
.s-nav__ditem{min-height:76px;border-top:1px solid var(--hair);flex:none;display:flex;flex-direction:column;justify-content:center}
.s-nav__drow{display:flex;align-items:center;gap:.5rem}
.s-nav__dlink{
  flex:1;min-height:56px;display:flex;align-items:center;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:1.6rem;letter-spacing:.035em;color:#fff}
.s-nav__dtog{
  width:44px;height:44px;flex:none;display:inline-grid;place-items:center;
  background:none;border:1px solid var(--hair);cursor:pointer;color:var(--green-bright)}
.s-nav__dtog svg{width:12px;height:12px;transition:transform .3s var(--ease)}
.s-nav__dtog[aria-expanded="true"] svg{transform:rotate(45deg)}
.s-nav__dsub{padding:0 0 .85rem .1rem}
.s-nav__dsub a{
  display:flex;align-items:center;gap:.75rem;min-height:44px;
  font-size:.95rem;font-weight:300;color:var(--dim)}
.s-nav__dsub a::before{
  content:"";width:12px;height:2px;background:var(--green-bright);flex:none;
  transition:width .22s var(--ease)}
.s-nav__dsub a:hover,.s-nav__dsub a:focus-visible{color:#fff}
.s-nav__dsub a:hover::before{width:22px}
.s-nav__dfoot{
  position:relative;z-index:2;margin-top:auto;padding-top:clamp(1.35rem,6vh,3.2rem);
  border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:1.15rem}
.s-nav__dcontact{display:flex;flex-direction:column;gap:.4rem}
.s-nav__dplace{
  font-size:.9rem;font-weight:300;line-height:1.5;color:var(--dim);margin:0;max-width:28ch}
.s-nav__dmail{
  display:inline-flex;align-items:center;min-height:44px;align-self:flex-start;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:1.12rem;letter-spacing:.045em;color:#fff;
  box-shadow:inset 0 -2px 0 var(--yellow);transition:color .22s var(--ease)}
.s-nav__dmail:hover,.s-nav__dmail:focus-visible{color:var(--yellow)}
.s-nav__dcta{width:100%}

/* JS present: submenus start collapsed, expand on request */
.s-nav[data-js="on"] .s-nav__dsub{display:none}
.s-nav[data-js="on"] .s-nav__dsub.is-open{display:block}

/* ---- breakpoints ---- */
/* Below the desktop breakpoint the bar must survive a 200% text zoom. Every
   rem-based width here (the --margin padding, the bar gap, the CTA's own type
   and padding) doubles with the root font size, which pushed the bar to 477px
   inside a 390px viewport and carried the burger past the clipped edge - the
   menu became unreachable. These caps are viewport-relative, so the bar's
   furniture keeps its size at any zoom level and only the burger's neighbours
   give way. The burger itself stays flex:none and is never the item squeezed. */
@media (max-width:1023px){
  .s-nav__bar{gap:min(1.2rem,4vw);padding-inline:min(var(--margin),5.5vw)}
  .s-nav__drawer{padding-inline:min(var(--margin),7vw)}
  .s-nav__dhead img{max-width:52vw;object-fit:contain;object-position:left center}
  .s-nav__end{min-width:0;gap:min(.7rem,3vw)}
  .s-nav__burger{flex:none}
  .s-nav__cta{
    flex:0 1 auto;min-width:0;
    font-size:min(.75rem,3.1vw);
    padding:min(.62rem,2.8vw) min(1.25rem,5.2vw);
    letter-spacing:.08em;white-space:nowrap;
  }
}
/* At the narrowest widths there is no room for both, and the drawer carries its
   own Get a quote button, so the pill goes rather than the way into the menu. */
@media (max-width:359px){
  .s-nav__cta{display:none}
}

@media (min-width:1024px){
  .s-nav__desk{display:block}
  .s-nav__burger{display:none}
  .s-nav__end{margin-left:clamp(1rem,2.4vw,2.2rem)}
  .s-nav__end::before{content:"";width:1px;height:26px;background:var(--hair);margin-right:.6rem}
  .s-nav__brand img{height:26px}
  .s-nav__cta{font-size:.76rem;padding:.66rem 1.5rem}
}
@media (max-width:420px){
  .s-nav__drawer{width:100vw;border-left:0}
  .s-nav__brand img{height:21px}
  .s-nav__cta{padding:min(.6rem,2.8vw) min(1rem,5.2vw)}
  .s-nav__dlink{font-size:1.42rem;min-height:52px}
  .s-nav__ditem{min-height:72px}
}
@media (prefers-reduced-motion:reduce){
  .s-nav__drawer,.s-nav__panel,.s-nav__scrim,.s-nav__progress-fill{transition:none}
}

/* The drawer locks body scrolling by setting overflow:hidden on <body>. Avada
   also sets overflow on its own containers, so the lock is reinforced here
   rather than left to whichever declaration happens to win. */
body:has(.s-nav.s-nav--drawer){overflow:hidden}