/* ============================================================
   Initial Spark — main site layer
   Sits ON TOP of design-system/css/initial-spark.css.
   Everything here is derived from docs/design-pack.html:
     · proportion  — white/paper 64 · black 20 · blue 9 · red 5
     · the slant   — 11deg, every rule / tag / badge / cut edge
     · the panel   — angled off-white plate, the only way type
                     sits over a photograph
     · the bolt    — paired gold lightning divider, one per section
     · the burst   — one per composition, the loudest thing
   Bans carried over: no gradients (burst glow excepted), no
   rounded corners, no drop shadows, no second slant angle.
   ============================================================ */

/* ---------------- layout ---------------- */
.wrap{max-width:1140px;margin:0 auto;padding:0 var(--is-sp-4)}
.wrap--narrow{max-width:780px}
a{color:inherit}
body{overflow-x:hidden}

/* ---------------- the bolt divider ----------------
   Two lightning marks, gold, always paired, one per section. */
.is-bolt{display:flex;align-items:center;justify-content:center;gap:var(--is-sp-3);
  padding:var(--is-sp-8) 0}
.is-bolt svg{width:22px;height:22px;fill:var(--is-spark-gold);flex:none}
.is-bolt::before,.is-bolt::after{content:'';height:2px;background:var(--is-ink-12);flex:1;max-width:90px}
.is-on-black .is-bolt::before,.is-on-black .is-bolt::after{background:rgba(255,255,255,.18)}

/* ---------------- section label (uppercase, tracked) ---------------- */
.sec-label{display:inline-block;font-size:.7rem;font-weight:var(--is-fw-extrabold);
  font-style:italic;text-transform:uppercase;letter-spacing:.34em;
  color:var(--is-electrical-blue);margin-bottom:var(--is-sp-4)}
.is-on-black .sec-label{color:var(--is-spark-gold)}

/* ---------------- buttons: fill-on-hover ----------------
   The fill sweeps in from the left at the brand slant, then the
   spark fires at the moment it completes (JS listens for the
   transition end on ::before via a sibling element). */
.is-btn{position:relative;overflow:hidden;isolation:isolate;
  transition:color .38s cubic-bezier(.4,0,.2,1)}
.is-btn::before{content:'';position:absolute;z-index:-1;inset:-2px -14px;
  transform:translateX(-115%) skewX(-11deg);
  transition:transform .38s cubic-bezier(.4,0,.2,1)}
.is-btn:hover::before,.is-btn:focus-visible::before{transform:translateX(0) skewX(-11deg)}

/* primary: red -> black fill, gold text */
.is-btn--primary::before{background:var(--is-black)}
.is-btn--primary:hover,.is-btn--primary:focus-visible{color:var(--is-spark-gold);background:var(--is-spark-red)}
/* secondary: outline -> solid blue */
.is-btn--secondary::before{background:var(--is-electrical-blue)}
.is-btn--secondary:hover,.is-btn--secondary:focus-visible{color:#fff}
/* gold: gold -> black fill, gold text */
.is-btn--gold::before{background:var(--is-black)}
.is-btn--gold:hover,.is-btn--gold:focus-visible{color:var(--is-spark-gold)}
/* ghost on dark: transparent -> gold fill, black text */
.is-btn--ghost-dark::before{background:var(--is-spark-gold)}
.is-btn--ghost-dark:hover,.is-btn--ghost-dark:focus-visible{color:var(--is-black);border-color:var(--is-spark-gold)}

@media(prefers-reduced-motion:reduce){
  .is-btn::before{transition:none}
}

/* ---------------- site header ----------------
   Blue band. Blue is 9% of the page and this is where it earns it. */
.site-header{position:sticky;top:0;z-index:200;background:var(--is-electrical-blue);
  border-bottom:4px solid var(--is-spark-gold)}
.site-header .wrap{display:flex;align-items:center;gap:var(--is-sp-6);
  padding-top:var(--is-sp-3);padding-bottom:var(--is-sp-3)}
.site-header .is-logo{width:150px;flex:none}
.site-nav{display:flex;gap:var(--is-sp-6);align-items:center;margin-left:auto}
.site-nav a{color:#fff;font-weight:var(--is-fw-semibold);font-size:.94rem;
  text-decoration:none;position:relative;padding:var(--is-sp-1) 0}
.site-nav a::after{content:'';position:absolute;left:0;right:100%;bottom:-2px;height:3px;
  background:var(--is-spark-gold);transition:right .25s cubic-bezier(.4,0,.2,1)}
.site-nav a:hover::after,.site-nav a[aria-current="page"]::after{right:0}
.header-book{display:flex;align-items:center;gap:var(--is-sp-3);flex:none}
.header-tel{display:none;align-items:center;gap:7px;
  background:var(--is-spark-red);color:#fff;
  font-weight:var(--is-fw-extrabold);font-style:italic;font-size:.95rem;
  text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums;
  padding:var(--is-sp-2) var(--is-sp-4);border:2px solid var(--is-spark-red);
  transition:background .2s,color .2s,border-color .2s}
.header-tel svg{width:15px;height:15px;fill:currentColor;flex:none}
.header-tel:hover,.header-tel:focus-visible{
  background:var(--is-spark-gold);border-color:var(--is-spark-gold);color:var(--is-black)}
@media(min-width:1040px){.header-tel{display:inline-flex}}
@media(max-width:899px){
  .site-header .wrap{flex-wrap:wrap;padding-bottom:0}
  .site-header .is-logo{width:118px}
  .site-nav{order:3;width:100%;margin-left:0;overflow-x:auto;flex-wrap:nowrap;
    padding:var(--is-sp-3) 0;border-top:1px solid rgba(255,255,255,.22)}
  .site-nav a{white-space:nowrap;flex:none;margin-right:var(--is-sp-6)}
  .site-nav a:last-child{margin-right:0}
  .header-book{margin-left:auto}
}

/* ---------------- hero: full-bleed image + the panel ---------------- */
.hero{position:relative;background:var(--is-black);overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;display:block;opacity:.55}
.hero__scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.72) 45%,rgba(0,0,0,.25) 100%)}
.hero__inner{position:relative;padding:var(--is-sp-24) 0}
/* The panel — angled off-white plate, leading edge cut at 11deg.
   The one structural device not in the logo; it exists so type can
   sit over a photograph. */
.panel{position:relative;background:var(--is-paper);padding:var(--is-sp-8) var(--is-sp-8) var(--is-sp-8) var(--is-sp-6);
  max-width:660px}
.panel::before{content:'';position:absolute;top:0;bottom:0;right:-46px;width:90px;
  background:var(--is-paper);transform:skewX(-11deg)}
.panel > *{position:relative;z-index:1}
@media(max-width:700px){
  .panel{padding:var(--is-sp-6) var(--is-sp-4);margin-right:var(--is-sp-4)}
  .panel::before{right:-20px;width:44px}
  .hero__inner{padding:var(--is-sp-12) 0}
}
.hero .is-display{font-size:clamp(2.1rem,5.6vw,3.5rem)}
.hero__sub{max-width:52ch;color:var(--is-ink-90);margin-top:var(--is-sp-4)}
.hero__ctas{display:flex;gap:var(--is-sp-3);flex-wrap:wrap;margin-top:var(--is-sp-6)}

/* the electric heart — sits in the open space right of the hero panel.
   Bolts are generated in JS (fractal midpoint displacement) rather than
   drawn here, so this only handles the beat and the flash envelope.
   Note: the design pack bans glows and treats lightning as a fixed-job
   divider, so this is a deliberate client-directed exception. */
.hero__heart{position:absolute;top:50%;right:4%;width:min(38vw,430px);aspect-ratio:1;
  transform:translateY(-50%);pointer-events:none;z-index:1}
.hero__heart svg{width:100%;height:100%;display:block;overflow:visible}

.hero__heart .heart{transform-origin:210px 214px;
  animation:heart-beat 2.2s cubic-bezier(.4,0,.6,1) infinite}
@keyframes heart-beat{
  0%,100%{transform:scale(1)}
  7%{transform:scale(1.075)}      /* systole, fires with the discharge */
  16%{transform:scale(1.005)}
  24%{transform:scale(1.04)}      /* second, softer beat */
  38%{transform:scale(1)}
}

/* bolt visibility is animated per path in JS (grow, hold, decay), so the
   layers themselves stay on and simply hold whatever the paths are doing */

@media(max-width:900px){
  .hero__heart{width:min(52vw,260px);right:-4%;top:auto;bottom:6%;transform:none;opacity:.8}
}
@media(prefers-reduced-motion:reduce){
  .hero__heart .heart{animation:none}
}

/* ---------------- sections ---------------- */
.sec{padding:var(--is-sp-24) 0}
.sec--tight{padding:var(--is-sp-16) 0}
.sec--paper{background:var(--is-paper)}
.sec--black{background:var(--is-black);color:var(--is-paper)}
.sec--black h2,.sec--black h3{color:#fff}
.sec__lede{max-width:var(--is-measure);color:var(--is-ink-62);margin-top:var(--is-sp-3)}
.sec--black .sec__lede{color:rgba(255,255,255,.66)}
.sec__head{margin-bottom:var(--is-sp-12)}

/* ---------------- service cards ---------------- */
.svc-grid{display:grid;gap:var(--is-sp-4);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.svc{position:relative;display:block;background:var(--is-white);border:2px solid var(--is-ink-12);
  padding:var(--is-sp-6);text-decoration:none;overflow:hidden;
  transition:border-color .25s,transform .25s}
.svc::after{content:'';position:absolute;left:0;right:0;bottom:0;height:5px;
  background:var(--is-electrical-blue);transform:translateX(-101%) skewX(-11deg);
  transition:transform .3s cubic-bezier(.4,0,.2,1)}
.svc:hover{border-color:var(--is-black);transform:translateY(-3px)}
.svc:hover::after{transform:translateX(0) skewX(-11deg)}
.svc__num{font-size:.7rem;font-weight:var(--is-fw-extrabold);letter-spacing:.2em;
  color:var(--is-ink-38);font-style:italic}
.svc h3{margin:var(--is-sp-2) 0 var(--is-sp-2)}
.svc p{font-size:.92rem;color:var(--is-ink-62);margin:0}
.svc__more{display:inline-block;margin-top:var(--is-sp-4);font-size:.82rem;
  font-weight:var(--is-fw-bold);font-style:italic;text-transform:uppercase;
  letter-spacing:.1em;color:var(--is-electrical-blue)}

/* ---------------- stat strip (black + gold) ---------------- */
.stats{display:grid;gap:var(--is-sp-8);grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.stat__fig{font-size:clamp(2rem,5vw,3rem);font-weight:var(--is-fw-black);font-style:italic;
  letter-spacing:-.03em;color:var(--is-spark-gold);line-height:1}
.stat__label{margin-top:var(--is-sp-2);font-size:.86rem;color:rgba(255,255,255,.7)}

/* ---------------- steps ---------------- */
.steps{display:grid;gap:var(--is-sp-8);grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  counter-reset:step}
.step{counter-increment:step;position:relative;padding-top:var(--is-sp-8)}
.step::before{content:counter(step,decimal-leading-zero);position:absolute;top:0;left:0;
  font-size:1.5rem;font-weight:var(--is-fw-black);font-style:italic;color:var(--is-spark-gold)}
.step::after{content:'';position:absolute;top:6px;left:44px;right:0;height:2px;
  background:var(--is-ink-12)}
.sec--black .step::after{background:rgba(255,255,255,.18)}
.step h3{font-size:1.05rem;margin-bottom:var(--is-sp-2)}
.step p{font-size:.9rem;color:var(--is-ink-62);margin:0}
.sec--black .step p{color:rgba(255,255,255,.66)}

/* ---------------- why-us items ----------------
   Same rhythm as .step but rule-led instead of numbered, so the heading
   never collides with an absolutely-positioned counter. */
.whyitem{padding-top:var(--is-sp-4);border-top:3px solid var(--is-electrical-blue)}
.whyitem h3{font-size:1.05rem;margin-bottom:var(--is-sp-2);color:var(--is-electrical-blue)}
.whyitem p{font-size:.9rem;color:var(--is-ink-62);margin:0}

/* ---------------- area chips ---------------- */
.areas{display:flex;flex-wrap:wrap;gap:var(--is-sp-2)}
.area-chip{display:inline-block;padding:var(--is-sp-2) var(--is-sp-4);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  font-size:.9rem;font-weight:var(--is-fw-medium);text-decoration:none;color:#fff;
  transition:background .2s,border-color .2s,color .2s}
.area-chip:hover{background:var(--is-spark-gold);border-color:var(--is-spark-gold);color:var(--is-black)}

/* ---------------- sticky booking bar ---------------- */
.bookbar{position:fixed;left:0;right:0;bottom:0;z-index:300;background:var(--is-black);
  border-top:4px solid var(--is-spark-gold);
  transform:translateY(110%);transition:transform .35s cubic-bezier(.4,0,.2,1)}
.bookbar.is-visible{transform:translateY(0)}
.bookbar .wrap{display:flex;align-items:center;gap:var(--is-sp-4);
  padding-top:var(--is-sp-3);padding-bottom:var(--is-sp-3)}
.bookbar__text{color:#fff;font-weight:var(--is-fw-semibold);font-size:.94rem;flex:1;min-width:0}
.bookbar__text b{color:var(--is-spark-gold);display:block;font-style:italic;
  font-size:1.05rem;letter-spacing:-.01em}
.bookbar__actions{display:flex;gap:var(--is-sp-2);flex:none}
.bookbar .is-btn{min-height:46px;padding:var(--is-sp-2) var(--is-sp-5);font-size:.86rem}
@media(max-width:700px){
  .bookbar__text{display:none}
  .bookbar__actions{flex:1}
  .bookbar .is-btn{flex:1}
}
body{padding-bottom:0}

/* ---------------- footer ---------------- */
.site-footer{background:var(--is-black);color:rgba(255,255,255,.72);
  padding:var(--is-sp-16) 0 var(--is-sp-24);font-size:var(--is-fs-small)}
.site-footer h3{font-size:.7rem;text-transform:uppercase;letter-spacing:.24em;
  color:var(--is-spark-gold);margin-bottom:var(--is-sp-4);font-style:italic}
.site-footer a{color:rgba(255,255,255,.72);text-decoration:none;font-size:.95rem}
.site-footer a:hover{color:var(--is-spark-gold)}
.footer-grid{display:grid;gap:var(--is-sp-8);grid-template-columns:1fr;margin-bottom:var(--is-sp-12)}
@media(min-width:760px){.footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.footer-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--is-sp-3)}
.footer-legal{padding-top:var(--is-sp-6);border-top:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.45)}

/* ---------------- scroll progress rail ----------------
   A gold line down the left edge that grows as you scroll, with the
   logo's burst riding the leading end. Sits behind the header/bookbar. */
.scrollrail{position:fixed;left:0;top:0;bottom:0;width:6px;z-index:150;pointer-events:none;
  background:var(--is-ink-12)}
.scrollrail__fill{position:absolute;left:0;top:0;width:100%;height:0;
  background:var(--is-spark-gold)}
.scrollrail__spark{position:absolute;left:50%;top:0;width:26px;height:26px;
  transform:translate(-50%,-50%);will-change:transform}
.scrollrail__spark svg{width:100%;height:100%;display:block;fill:var(--is-spark-gold)}
/* the spark only spins while the user is actually scrolling */
.scrollrail.is-moving .scrollrail__spark svg{animation:rail-spin .9s linear infinite}
@keyframes rail-spin{to{transform:rotate(360deg)}}
@media(max-width:700px){.scrollrail{width:4px}.scrollrail__spark{width:18px;height:18px}}
@media(prefers-reduced-motion:reduce){
  .scrollrail.is-moving .scrollrail__spark svg{animation:none}
}

/* ---------------- spark burst particles ---------------- */
.is-spark-burst{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:999}
.is-spark-ray{position:absolute;left:0;top:0;width:7px;height:26px;margin:-26px -3.5px 0;
  background:var(--is-spark-gold);transform-origin:50% 100%;
  animation:is-spark-fly .75s cubic-bezier(.1,.7,.25,1) forwards}
@keyframes is-spark-fly{
  0%{transform:rotate(var(--a)) translateY(0) scaleY(.5);opacity:1}
  12%{transform:rotate(var(--a)) translateY(calc(-1 * var(--d) * .2)) scaleY(1.15);opacity:1}
  70%{opacity:1}
  100%{transform:rotate(var(--a)) translateY(calc(-1 * var(--d))) scaleY(.3);opacity:0}
}

/* ---------------- reveal on scroll ---------------- */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1)}
.reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------------- prose / inner pages ---------------- */
.page-hero{background:var(--is-black);color:var(--is-paper);position:relative;overflow:hidden}
.page-hero .wrap{padding-top:var(--is-sp-16);padding-bottom:var(--is-sp-16);position:relative}
.page-hero h1{color:#fff}
.page-hero p{color:rgba(255,255,255,.72);max-width:var(--is-measure);margin-top:var(--is-sp-4)}
.prose{max-width:var(--is-measure)}
.prose p{color:var(--is-ink-90)}
.detail{padding:var(--is-sp-12) 0;border-bottom:1px solid var(--is-ink-12)}
.detail:last-child{border-bottom:0}
.detail ul{color:var(--is-ink-62);padding-left:1.1rem;margin:var(--is-sp-4) 0 0}
.detail li{margin-bottom:var(--is-sp-2)}
.detail__media{margin-top:var(--is-sp-6);border:2px solid var(--is-ink-12)}
.detail__media img{width:100%;height:auto;display:block}
.detail__cap{font-size:var(--is-fs-legal);color:var(--is-ink-38);margin-top:var(--is-sp-2)}

/* ---------------- booking form (above footer, every page) ----------------
   Paper ground, not black: the page already carries plenty of black (stats
   band, areas band, footer) and the pack's proportion is 64% paper / 20%
   black. A lighter ground here also reads as an invitation rather than a
   wall. No skewed pseudo-element behind the card — that produced a visible
   diagonal bar on a block this tall; the slant lives in the gold top rule
   and the submit button instead. */
.bookform{background:var(--is-paper);border-top:1px solid var(--is-ink-12)}
.bookform .wrap{padding-top:var(--is-sp-16);padding-bottom:var(--is-sp-16)}
.bookform__grid{display:grid;gap:var(--is-sp-12);grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.bookform__grid{grid-template-columns:.85fr 1.15fr}}
.bookform .sec-label{color:var(--is-electrical-blue)}
.bookform__lede{color:var(--is-ink-62);max-width:42ch;margin-top:var(--is-sp-4)}
.bookform__points{list-style:none;padding:0;margin:var(--is-sp-8) 0 0;display:grid;gap:var(--is-sp-4)}
.bookform__points li{display:flex;gap:var(--is-sp-3);align-items:flex-start;
  color:var(--is-ink-90);font-size:.94rem}
.bookform__points svg{width:17px;height:17px;flex:none;margin-top:3px;fill:var(--is-electrical-blue)}

/* the card: plain white, squared, with the brand slant carried by a gold rule */
.bookform__plate{position:relative;background:var(--is-white);
  border:2px solid var(--is-ink-12);padding:var(--is-sp-8)}
.bookform__plate::before{content:'';position:absolute;top:-2px;left:-2px;right:-2px;height:6px;
  background:var(--is-spark-gold);transform:skewX(-11deg);transform-origin:left bottom}
@media(max-width:700px){.bookform__plate{padding:var(--is-sp-6) var(--is-sp-4)}}

.bf-row{display:grid;gap:var(--is-sp-4);grid-template-columns:1fr}
@media(min-width:560px){.bf-row--2{grid-template-columns:1fr 1fr}}
.bookform .is-field{margin-top:var(--is-sp-4)}
.bookform .is-field:first-child{margin-top:0}
.bookform label{color:var(--is-black)}
.bookform textarea{min-height:110px!important;resize:vertical;font-family:var(--is-font)}
.bf-optional{font-weight:var(--is-fw-regular);color:var(--is-ink-38)}

.bf-drop{border:2px dashed var(--is-ink-38);padding:var(--is-sp-5);text-align:center;
  background:var(--is-ink-06);cursor:pointer;transition:border-color .2s,background .2s}
.bf-drop:hover{border-color:var(--is-electrical-blue)}
.bf-drop.is-over{border-color:var(--is-electrical-blue);background:rgba(1,81,241,.06)}
.bf-drop p{margin:0;color:var(--is-ink-62);font-size:.9rem}
.bf-drop input[type=file]{display:none}
.bf-thumbs{display:flex;flex-wrap:wrap;gap:var(--is-sp-2);margin-top:var(--is-sp-3)}
.bf-thumb{position:relative;width:64px;height:64px;background:var(--is-ink-06);overflow:hidden}
.bf-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.bf-thumb button{position:absolute;top:2px;right:2px;background:var(--is-black);color:#fff;
  border:none;width:19px;height:19px;font-size:12px;line-height:1;cursor:pointer;padding:0}
.bf-note{font-size:var(--is-fs-legal);color:var(--is-ink-38);margin-top:var(--is-sp-3)}
.bf-done{display:none;text-align:center;padding:var(--is-sp-8) 0}
.bf-done .is-display{font-size:var(--is-fs-h2);color:var(--is-black)}

/* ---------------- nav dropdown ----------------
   Squared panel, gold top rule, hard border. No shadow and no rounded
   corners — both are brand bans, so separation comes from the border. */
.nav-item{position:relative;display:flex;align-items:center}
.nav-toggle{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:var(--is-sp-1) 0;
  color:#fff;font-family:var(--is-font);font-weight:var(--is-fw-semibold);font-size:.94rem;
  cursor:pointer;position:relative}
.nav-toggle::after{content:'';position:absolute;left:0;right:100%;bottom:-2px;height:3px;
  background:var(--is-spark-gold);transition:right .25s cubic-bezier(.4,0,.2,1)}
.nav-item:hover .nav-toggle::after,.nav-toggle[aria-expanded="true"]::after,
.nav-toggle.is-current::after{right:0}
.nav-caret{width:9px;height:9px;fill:currentColor;transition:transform .2s}
.nav-toggle[aria-expanded="true"] .nav-caret{transform:rotate(180deg)}

.nav-menu{position:absolute;top:calc(100% + var(--is-sp-3));left:0;min-width:232px;
  background:var(--is-white);border:2px solid var(--is-black);border-top:5px solid var(--is-spark-gold);
  padding:var(--is-sp-2) 0;display:none;z-index:210}
.nav-menu.is-open{display:block}
@media(hover:hover){.nav-item:hover .nav-menu{display:block}}
.nav-menu a{display:block;padding:var(--is-sp-3) var(--is-sp-4);color:var(--is-black);
  font-size:.92rem;font-weight:var(--is-fw-semibold);text-decoration:none}
.nav-menu a::after{display:none}
.nav-menu a:hover,.nav-menu a:focus-visible{background:var(--is-ink-06);color:var(--is-electrical-blue)}
.nav-menu__label{display:block;padding:var(--is-sp-2) var(--is-sp-4) var(--is-sp-1);
  font-size:.62rem;font-weight:var(--is-fw-extrabold);font-style:italic;letter-spacing:.24em;
  text-transform:uppercase;color:var(--is-ink-38)}
.nav-menu__sep{height:1px;background:var(--is-ink-12);margin:var(--is-sp-2) 0}

/* On the mobile nav strip the panel would overflow a horizontally scrolling
   row, so it opens as a full-width block under the strip instead. */
@media(max-width:899px){
  .nav-menu{position:fixed;left:0;top:auto;width:100%;min-width:0;border-left:0;border-right:0}
  .nav-item{position:static}
}