/* ==========================================================================
   TENSEC — shared design system
   Every page loads this one file. Change a colour, spacing value or section
   pattern here and all pages update together.
   ========================================================================== */

/* --- 1. FONTS (self-hosted, no external requests) ------------------------ */

@font-face{
  font-family:"Chakra Petch";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/chakra-petch-600.woff2") format("woff2")}
@font-face{
  font-family:"Chakra Petch";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/chakra-petch-700.woff2") format("woff2")}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/inter-400.woff2") format("woff2")}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/inter-500.woff2") format("woff2")}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/inter-600.woff2") format("woff2")}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/inter-700.woff2") format("woff2")}


/* --- 2. TOKENS ----------------------------------------------------------- */

:root{
  --bg:#000000; --bg-navy:#0a1826; --bg-black:#0a1826; --white:#ffffff;
  --ink:#f3f2ec; --ink-dim:#aeb4cb; --dim:#7f89aa;
  --head-dark:#0d1322; --body-dark:#4b5167;
  --accent:#ec7322;
  --line:rgba(243,242,236,.10); --line-2:rgba(243,242,236,.18);
  --display:"Chakra Petch",sans-serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --pad:clamp(22px,6vw,110px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;
  line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* keyboard focus — visible on every interactive element */
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 18px;
  background:var(--ink);color:#000;font-size:14px;font-weight:600}
.skip:focus{left:12px;top:12px}


/* --- 3. NAVIGATION ------------------------------------------------------- */

nav.top{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;padding:clamp(15px,2.2vw,24px) var(--pad);
  background:linear-gradient(180deg,rgba(2,4,13,.55) 0%,rgba(2,4,13,0) 100%);
  transition:background .3s}
nav.top.solid{background:rgba(2,4,13,.92);backdrop-filter:blur(8px)}

/* lasindikator: orange linje langs nederkanten som vaxer med scrollen.
   Syns bara nar navigationen ar solid, alltsa efter att sidan borjat scrollas. */
/* Lasindikator. Linjen borjar i linje med logotypens vansterkant, sa att den
   underskryker ordmarket i toppen av sidan, och vaxer at hoger vid scroll.
   Vanstermarginal och bredd sätts av site.js, som mater logotypen.          */
/* linjen ligger en bit upp fran navigationens nederkant, sa att en remsa av
   den morka bakgrunden syns under den                                       */
nav.top .progress{position:absolute;bottom:clamp(3px,0.28vw,4px);height:2px;left:0;width:0;
  background:var(--accent);opacity:.92;pointer-events:none}
/* logotypen: nagot storre, och forskjuten in fran kanten samt nagot ned,
   sa att den inte klistrar i horner                                        */
nav.top .logo{height:clamp(46px,5vw,64px);width:auto;
  margin-left:clamp(6px,1.4vw,26px);margin-top:clamp(4px,.7vw,10px)}

.navlinks{display:flex;gap:clamp(14px,1.9vw,30px);align-items:center}
.navlinks a{font-size:15px;font-weight:500;letter-spacing:.005em;color:var(--ink-dim);
  transition:color .2s;white-space:nowrap}
.navlinks a:hover,.navlinks a.here{color:var(--ink)}

.menu-btn{display:none;font-size:13px;font-weight:500;color:var(--ink-dim);
  background:none;border:1px solid var(--line-2);padding:8px 14px;cursor:pointer;
  font-family:var(--sans)}
.menu-btn:hover{color:var(--ink)}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:70;display:none;flex-direction:column;
  justify-content:center;gap:6px;padding:var(--pad);background:rgba(2,4,13,.98)}
.drawer.open{display:flex}
.drawer a{font-family:var(--display);font-weight:600;font-size:clamp(24px,7vw,38px);
  line-height:1.9;color:var(--ink-dim)}
.drawer a:hover,.drawer a.here{color:var(--ink)}
.drawer .close{position:absolute;top:clamp(15px,2.2vw,24px);right:var(--pad);
  font-size:13px;font-weight:500;color:var(--ink-dim);background:none;
  border:1px solid var(--line-2);padding:8px 14px;cursor:pointer;font-family:var(--sans)}


/* --- 4. HERO ------------------------------------------------------------- */

.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:
    radial-gradient(98% 82% at 50% 90%, rgba(46,82,148,.50), transparent 64%),
    radial-gradient(80% 66% at 50% 56%, rgba(34,62,116,.30), transparent 70%),
    radial-gradient(120% 100% at 50% 22%, #16181f 0%, transparent 60%),
    linear-gradient(180deg, #11141a 0%, #0b0c11 46%, #060608 74%, #000000 100%)}

/* shorter hero for interior pages — the homepage keeps the full-height version */
.hero.inner-hero{height:auto;min-height:0;padding:clamp(150px,20vh,240px) 0 clamp(90px,12vh,150px)}

.fx-grid{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    repeating-linear-gradient(0deg, rgba(243,242,236,.045) 0 1px, transparent 1px clamp(70px,9vw,150px)),
    repeating-linear-gradient(90deg, rgba(243,242,236,.045) 0 1px, transparent 1px clamp(70px,9vw,150px))}
.fx-tel{position:absolute;inset:0;pointer-events:none;font-family:var(--sans);
  font-size:10px;letter-spacing:.06em;color:rgba(174,180,203,.22)}
.fx-tel span{position:absolute;white-space:nowrap}
.t1{top:18%;left:12%}.t2{top:30%;left:78%}.t3{top:60%;left:8%}.t4{top:70%;left:64%}
.t5{top:42%;left:88%}.t6{top:80%;left:30%}.t7{top:24%;left:46%}.t8{top:76%;left:58%}
.fx-grain{position:absolute;inset:-60%;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.3s steps(3) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}
  66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}
.fx-vig{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 42%, transparent 42%, rgba(0,0,0,.8) 100%)}

.hero-inner{position:relative;z-index:10;padding:0 var(--pad);max-width:1080px}
.hero h1{font-family:var(--display);font-weight:600;line-height:1.06;letter-spacing:.004em;
  font-size:clamp(30px,5vw,70px);opacity:0;animation:rise 1s .2s ease both}
.hero .sub{margin:clamp(20px,2.9vh,32px) auto 0;max-width:56ch;font-weight:400;text-wrap:balance;
  font-size:clamp(16px,1.7vw,24px);line-height:1.5;color:var(--ink-dim);
  opacity:0;animation:rise 1s .4s ease both}
/* Tredje raden i heron: ort och artal, direkt under underrubriken. Foljer
   textflodet i stallet for att sitta fast i heronsbotten.                    */
.hero .cred{margin:clamp(6px,0.9vh,11px) auto 0;text-align:center;
  font-family:var(--display);font-weight:600;
  font-size:clamp(12px,1.05vw,15px);letter-spacing:.15em;text-transform:uppercase;
  color:var(--dim);
  opacity:0;animation:rise 1s .6s ease both}
.hero .cred .sep{color:var(--accent);opacity:.9;margin:0 .85em;font-style:normal}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* interior-page heroes use a smaller display size */
.hero.inner-hero h1{font-size:clamp(30px,4.2vw,56px)}

/* Underrubrik som ska bryta i samma bredd som rubriken ovanfor. Balanserad
   radbrytning stangs av, annars fordelas orden jamnt over raderna i stallet
   for att fylla den forsta.                                                  */
.hero .sub.match{max-width:clamp(360px,54.5vw,752px);text-wrap:wrap}

/* Rubrik som behover en aning mindre grad for att den manuella radbrytningen
   ska halla. Anvands pa Anti-Drone, dar forsta raden annars bryts vid
   bindestrecket i "radio-based".                                             */
.hero.inner-hero h1.tight{font-size:clamp(28px,3.8vw,51px)}

/* brodsmula ovanfor rubriken pa innersidorna. Dampad ton, inte accentfargen,
   eftersom raden ar orientering och inte ett pastaende.                       */
.hero .crumb{margin:0 0 clamp(14px,1.7vh,22px);font-family:var(--sans);font-weight:500;
  font-size:clamp(12px,1.05vw,14px);letter-spacing:.01em;color:var(--dim);
  opacity:0;animation:rise 1s .1s ease both}
.hero .crumb a{color:var(--dim);transition:color .2s}
.hero .crumb a:hover{color:var(--ink-dim)}
.hero .crumb .sep{margin:0 .55em;opacity:.6}

/* forsta bandet pa en innersida har ingen rubrik, bara ingress */
.band .inner > p.lead:first-child,.bandblue .inner > p.lead:first-child{margin-top:0}


/* --- 5. CONTENT BANDS ---------------------------------------------------- */

.band{padding:clamp(54px,6.5vw,92px) var(--pad);text-align:center;background:var(--white)}
.band .inner{max-width:860px;margin:0 auto}
.band h2{font-family:var(--sans);font-weight:700;line-height:1.14;letter-spacing:-.02em;
  font-size:clamp(26px,2.9vw,38px);color:var(--head-dark);max-width:30ch;margin:0 auto}
.band p.lead{margin-top:clamp(16px,1.7vw,22px);font-size:clamp(16px,1.35vw,21px);
  color:var(--body-dark);max-width:78ch;margin-left:auto;margin-right:auto;line-height:1.6}

.bandblue{padding:clamp(54px,6.5vw,92px) var(--pad);text-align:center;background:var(--bg-navy);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bandblue .inner{max-width:860px;margin:0 auto}
.bandblue h2{font-family:var(--sans);font-weight:700;line-height:1.16;letter-spacing:-.018em;
  font-size:clamp(25px,2.8vw,37px);color:var(--ink);max-width:32ch;margin:0 auto}
.bandblue p.lead{margin-top:clamp(16px,1.7vw,22px);font-size:clamp(16px,1.35vw,21px);
  color:var(--ink-dim);max-width:78ch;margin-left:auto;margin-right:auto;line-height:1.6}

/* selected headings set in the display face */
.band h2.dh,.bandblue h2.dh{font-family:var(--display);font-weight:600;letter-spacing:.004em}

/* second paragraph inside a band */
.band p.lead + p.lead,.bandblue p.lead + p.lead{margin-top:clamp(16px,1.8vw,24px)}


/* --- 6. SYSTEMS PANELS --------------------------------------------------- */
/* v1 runs without photography, so panel height is set to fit the text rather
   than to frame an image. Restore the taller setting when images arrive.     */

.systems{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--white)}
.panel{position:relative;display:block;min-height:clamp(440px,52vh,520px);
  overflow:hidden;isolation:isolate}
.panel .plate{position:absolute;inset:0;z-index:0;
  transition:transform .8s cubic-bezier(.2,.6,.2,1),filter .5s}

.panel.in:hover .plate{transform:scale(1.05);filter:brightness(.97)}

/* v1 kor panelerna ljusa. De tre produkterna gar fran ljusare till nagot
   djupare ton i jamna steg, uppsamlaren ligger apart i neutralt gratt.       */
.panel .plate{background:linear-gradient(165deg,#fbfcfe 0%,#eaeff6 55%,#dde5f0 100%)}

/* harlinjer mellan panelerna, annars flyter de ihop till ett vitt falt */
.panel + .panel{border-left:1px solid rgba(13,19,34,.10)}
.systems{border-top:1px solid rgba(13,19,34,.10);border-bottom:1px solid rgba(13,19,34,.10)}

.panel .plate::after{content:"";position:absolute;inset:0;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.panel .grid{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.6;
  background:
    repeating-linear-gradient(0deg, rgba(13,19,34,.045) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(13,19,34,.045) 0 1px, transparent 1px 64px)}
.panel .scrim{position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.35) 46%,
    rgba(255,255,255,.86) 78%,rgba(255,255,255,.96) 100%)}
/* rubrikerna ska ligga pa samma hojd i alla fyra panelerna. Brodtexten far
   darfor en fast hojd som racker for den langsta, och rubriken skjuts upp
   ovanfor den i stallet for att flyta med textmangden.                       */
.panel .label{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;padding:clamp(24px,2.4vw,40px)}
.panel h3{min-height:2.12em;display:flex;align-items:flex-start}
.panel h3{font-family:var(--sans);font-weight:700;font-size:clamp(21px,2vw,30px);
  line-height:1.06;letter-spacing:-.015em;color:var(--head-dark)}
.panel p{margin-top:14px;font-size:clamp(13px,.92vw,15px);color:var(--body-dark);
  line-height:1.55}



/* --- 6b. PRODUKTSIDOR ---------------------------------------------------- */
/* Innersidorna anvander en enklare sats an startsidan: tva spalter med rubrik
   till vanster och brodtext till hoger, atskilda av harlinjer. Ingen fargplatta
   och inga fargband, sa att strukturen ensam bar sidan.                       */

.doc{background:var(--white);padding:clamp(40px,5vw,72px) var(--pad) 0}
.doc .inner{max-width:1040px;margin:0 auto}

/* ingressen star ensam ovanfor forsta harlinjen */
/* Ingressen ar halvfet och nagot morkare an brodtexten, sa att den laser som
   en ingang i stallet for som ett lost stycke fore forsta rubriken.          */
.doc .intro{max-width:74ch;margin:0 0 clamp(34px,4vw,56px);
  font-size:clamp(17px,1.45vw,22px);font-weight:500;line-height:1.55;color:#2c3345}
/* Bara forsta stycket ar ingress. Foljande stycken behaller sin plats i copyn
   men satts som vanlig brodtext, eftersom ett kort stycke i halvfet blir stumt. */
.doc .intro + .intro{margin-top:clamp(-20px,-2vw,-14px);
  font-weight:400;color:var(--body-dark);font-size:clamp(16px,1.3vw,20px);line-height:1.6}

.doc .row{display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);
  padding:clamp(28px,3.4vw,46px) 0;border-top:1px solid rgba(13,19,34,.12)}
.doc .row:last-child{border-bottom:1px solid rgba(13,19,34,.12)}

.doc .row h2{font-family:var(--sans);font-weight:700;letter-spacing:-.014em;line-height:1.16;
  font-size:clamp(20px,1.75vw,26px);color:var(--head-dark);margin:0}
.doc .row p{margin:0;max-width:72ch;font-size:clamp(16px,1.3vw,20px);
  line-height:1.6;color:var(--body-dark)}

/* flera stycken i samma avsnitt */
.doc .row p + p{margin-top:clamp(14px,1.4vw,20px)}

/* punktlista med etikett och forklaring, anvands pa Video Tracking */
.doc .row ul{margin:0;padding:0;list-style:none;max-width:72ch}
.doc .row li{padding:clamp(12px,1.2vw,16px) 0;border-top:1px solid rgba(13,19,34,.09);
  font-size:clamp(16px,1.3vw,20px);line-height:1.55;color:var(--body-dark)}
.doc .row li:first-child{border-top:0;padding-top:0}
.doc .row li:last-child{padding-bottom:0}
.doc .row li b{font-weight:600;color:var(--head-dark)}

/* Kontaktavsnittet ar en sluten ruta: radens egna harlinjer upptill och nedtill
   sluts av lodrata linjer i kanterna. Samma tunna vikt som ovriga linjer.     */
.doc .row.contact{border-left:1px solid rgba(13,19,34,.12);
  border-right:1px solid rgba(13,19,34,.12);
  padding-left:clamp(22px,2.6vw,38px);padding-right:clamp(22px,2.6vw,38px)}

/* kontaktuppgifter: etikett och varde, en rad per uppgift */
.doc .details{margin:0;padding:0;list-style:none;max-width:62ch}
.doc .details li{display:grid;grid-template-columns:minmax(0,128px) minmax(0,1fr);
  gap:clamp(16px,2vw,28px);align-items:baseline;
  padding:clamp(14px,1.4vw,18px) 0;border-top:1px solid rgba(13,19,34,.09)}
.doc .details li:first-child{border-top:0;padding-top:0}
.doc .details li:last-child{padding-bottom:0}
.doc .details .k{font-size:clamp(13px,1vw,15px);font-weight:600;letter-spacing:.02em;
  color:var(--dim)}
.doc .details .v{font-size:clamp(16px,1.3vw,20px);line-height:1.5;color:var(--head-dark)}
.doc .details .v a{border-bottom:1px solid rgba(236,115,34,.55);transition:border-color .2s}
.doc .details .v a:hover{border-bottom-color:var(--accent)}

/* pa smal skarm faller spalterna under varandra */
@media(max-width:820px){
  .doc .row{grid-template-columns:1fr;gap:12px}
  .doc .details li{grid-template-columns:1fr;gap:4px}
}

/* --- 7. FOOTER ----------------------------------------------------------- */

footer{padding:clamp(48px,5.5vw,76px) var(--pad) clamp(34px,4vw,50px);background:var(--white);
  color:var(--body-dark)}
.foot-cta{max-width:760px;margin:0 auto;text-align:center}
.foot-cta h2{font-family:var(--sans);font-weight:700;line-height:1.5;letter-spacing:0;
  font-size:clamp(16px,1.5vw,20px);color:var(--head-dark);margin:0 auto}
.foot-cta p{margin:clamp(4px,.6vw,8px) auto 0;max-width:52ch;font-size:clamp(16px,1.5vw,20px);
  font-weight:400;line-height:1.5;color:var(--body-dark)}
/* CTA-lank i sidfoten. Typografisk, ingen knapp, eftersom sajten inte har nagra. */
.foot-cta .cta{display:inline-flex;align-items:center;gap:.6em;
  margin-top:clamp(20px,2.4vw,30px);padding-bottom:4px;
  font-family:var(--sans);font-weight:600;font-size:clamp(15px,1.25vw,18px);
  color:var(--head-dark);border-bottom:2px solid var(--accent);
  transition:gap .25s ease,color .2s ease}
.foot-cta .cta span{transition:transform .25s ease}
.foot-cta .cta:hover span{transform:translateX(4px)}

.foot-bottom{max-width:1240px;margin:clamp(46px,6vw,82px) auto 0;padding-top:clamp(24px,3vw,34px);
  border-top:1px solid rgba(13,19,34,.12);display:flex;justify-content:space-between;
  align-items:center;gap:16px;flex-wrap:wrap}
/* utan CTA-block behover bottenraden ingen egen toppmarginal */
.foot-cta + .foot-bottom{margin-top:clamp(46px,6vw,82px)}
footer > .foot-bottom:first-child{margin-top:0}
.foot-bottom .meta{font-size:12.5px;font-weight:500;color:#5d6478}
.foot-bottom .fl{display:flex;gap:24px;flex-wrap:wrap}
.foot-bottom .fl a{font-size:13px;font-weight:500;color:var(--body-dark)}
.foot-bottom .fl a:hover{color:var(--head-dark)}


/* --- 8. UTILITIES -------------------------------------------------------- */

.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

/* panelerna tonar in en efter en i stallet for samtidigt */
.panel{opacity:0;transform:translateY(30px);
  transition:opacity 1.05s ease,transform 1.05s cubic-bezier(.2,.7,.3,1)}
.panel.in{opacity:1;transform:none}
.panel.p1{transition-delay:0s}
.panel.p2{transition-delay:.34s}
.panel.p3{transition-delay:.68s}
.panel.p4{transition-delay:1.02s}


/* --- 9. BREAKPOINTS ------------------------------------------------------ */

@media(max-width:1180px){
  .navlinks{display:none}
  .menu-btn{display:block}
}
/* nar de fyra panelerna star i rad ska rubrikerna ligga pa samma hojd. Textblocket
   far darfor en lagsta hojd som racker for det langsta, uppmatt over hela
   intervallet 1101 till 1920 px. Under 1101 staplas panelerna och da spelar
   linjeringen ingen roll, sa regeln galler bara har.                          */
@media(min-width:1101px){
  .panel p{min-height:18.7em}
  .panel{min-height:clamp(520px,60vh,600px)}
}
/* tvakolumnslaget: samma princip, uppmatt till 10.9em som mest vid 881 px */
@media(min-width:881px) and (max-width:1100px){
  .systems{grid-template-columns:repeat(2,1fr)}
  .panel{min-height:clamp(400px,46vh,460px)}
  .panel p{min-height:11em}
}
@media(max-width:1100px){
  .systems{grid-template-columns:repeat(2,1fr)}
  .panel{min-height:clamp(380px,44vh,440px)}
}
@media(max-width:880px){
  .systems{grid-template-columns:1fr}
  .panel{min-height:clamp(320px,38vh,380px)}
}
/* pa telefon far rubriken bryta sig sjalv, den manuella brytningen ger for smal text.
   Trovardighetsraden far ocksa bryta fritt i stallet for pa given rad.            */
@media(max-width:600px){
  .hero h1 br{display:none}
  .hero h1{text-wrap:balance}
}
/* pa smal skarm upptar den centrerade texten nastan hela bredden, sa
   telemetrimarkorerna flyttas ut mot kanterna och bort fran mitthojden */
@media(max-width:820px){
  .t1{top:11%;left:7%}   .t2{top:21%;left:72%}
  .t3{top:75%;left:5%}   .t5{top:30%;left:79%}
  .t6{top:87%;left:22%}  .t8{top:81%;left:66%}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  nav.top .progress{transition:none}
  .reveal{opacity:1;transform:none}
  .panel{opacity:1;transform:none;transition-delay:0s}
  .hero h1,.hero .sub,.hero .cred,.hero .crumb{opacity:1}
  html{scroll-behavior:auto}
}