/* LiveOak Fiber — public site
   Single dark theme, built on the brand guide (6 Sept 2022):
     navy #151269 · red #C00000 · gray #58595B

   Brand tokens are injected as CSS variables from CMS Settings (see page.ejs):
   --navy (primary), --navy-deep (page base), --red (accent), --surface-1 (panels).

   Two constraints from the palette drive everything below, both measured against
   the page background:
     - brand navy is 1.22:1 on --navy-deep. It is a FILL only; as text or an icon
       it is invisible. Accents use --navy-tint, a lightened navy at 6.30:1.
     - brand red is 2.99:1 on the background, so it also fails as text. It is the
       primary fill: white on #C00000 is 6.48:1, comfortably AA.
   Never place red on navy — the two brand colours are 2.4:1 against each other
   and only ever sit adjacent on white, as they do inside the logo. */
*,*::before,*::after{box-sizing:border-box}
:root{
  --white:#ffffff;
  --gray:#58595B;          /* brand neutral, per the guide */
  --navy-tint:#8B87F0;     /* derived: accent text/borders, 6.30:1 on --navy-deep */
  --mist:#a9adcf;          /* derived: muted text, 8.83:1 */
  --radius:14px;
  --shadow:0 12px 34px rgba(0,0,0,.55);
  --font-display:"Montserrat","Trebuchet MS",system-ui,sans-serif;
  --font-body:"Montserrat","Trebuchet MS",system-ui,sans-serif;

  /* semantic */
  --bg:var(--navy-deep);
  --surface:var(--surface-1);
  --surface-2:#201f49;
  --text:#e9eaf7;
  --heading:#f3f4fc;
  --muted:var(--mist);
  --border:#2c2a57;
  --band:var(--navy);        /* brand-navy bands: topbar, footer, cta */
  --brand:var(--red);        /* primary fills — white on red is 6.48:1 */
  --brand-ink:var(--navy-tint);  /* brand-flavoured text/borders/accents */
  --link:var(--navy-tint);

  /* per-section hero photo (overridden per body.sec-* below) */
  --hero-img:url('/img/hero-desktop.webp');
}

/* per-section hero imagery */
body.sec-business{--hero-img:url('/img/hero-business.webp')}
body.sec-locations{--hero-img:url('/img/hero-locations.webp')}
body.sec-hoa-mdu{--hero-img:url('/img/hero-community.webp')}

html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);color:var(--text);background:var(--bg);line-height:1.6;transition:background-color .25s ease,color .25s ease}
img{max-width:100%;display:block}
a{color:var(--link)}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.15;color:var(--heading);margin:0 0 .5em}
h1{font-size:clamp(2rem,4.5vw,3.4rem);font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:700}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.wrap-narrow{max-width:820px}
.skip{position:absolute;left:-999px;top:0;background:var(--band);color:#fff;padding:8px 14px;z-index:99}
.skip:focus{left:8px}

/* buttons */
.btn{display:inline-block;padding:11px 22px;border-radius:999px;font-weight:600;text-decoration:none;border:2px solid transparent;font-family:var(--font-display);font-size:.95rem;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-lg{padding:14px 30px;font-size:1.05rem}
.btn-primary{background:var(--brand);color:#fff}
.btn-ghost{background:transparent;border-color:var(--brand-ink);color:var(--brand-ink)}
.hero .btn-ghost,.cta-banner .btn-ghost,.site-footer .btn-ghost{border-color:#fff;color:#fff}

/* top bar + header */
.topbar{background:var(--band);color:#dfe3f5;font-size:.82rem}
.topbar a{color:#dfe3f5;text-decoration:none;margin-right:18px}
.topbar a:hover{color:var(--red)}
.topbar-in{display:flex;justify-content:space-between;padding-top:7px;padding-bottom:7px;flex-wrap:wrap;gap:4px}
.site-header{background:var(--surface);position:sticky;top:0;z-index:50;box-shadow:0 2px 14px rgba(0,0,0,.10);transition:background-color .25s ease}
.header-in{display:flex;align-items:center;gap:26px;padding-top:14px;padding-bottom:14px}
.brand img{height:44px;width:auto}
.main-nav{flex:1}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px}
/* Label and caret on one line. As inline content in a block link they wrapped,
   which pushed the arrow under the text and made the taller items 91px. */
.main-nav > ul > li > a{display:flex;align-items:center;gap:5px;white-space:nowrap;padding:10px 11px;text-decoration:none;color:var(--heading);font-weight:600;font-size:.9rem;border-radius:8px}
.main-nav > ul > li > a:hover{background:var(--surface-2)}
.main-nav > ul > li > a.is-active{color:var(--red)}
.caret{font-size:.6em;opacity:.65;line-height:1;flex:none;position:relative;top:1px}
.has-sub{position:relative}
.has-sub .sub{display:none;position:absolute;left:0;top:100%;background:var(--surface);min-width:280px;border-radius:12px;box-shadow:var(--shadow);padding:10px;flex-direction:column;gap:0;border-top:3px solid var(--brand-ink)}
.has-sub:hover .sub,.has-sub:focus-within .sub{display:flex}
.sub a{display:block;padding:9px 12px;border-radius:8px;text-decoration:none;color:var(--text);font-size:.9rem}
.sub a:hover{background:var(--surface-2);color:var(--brand-ink)}

/* mega-menu (link columns + featured image panel) */
.has-sub .sub.mega{padding:16px;min-width:300px;max-width:calc(100vw - 40px)}
.has-sub .sub.mega.has-feature{grid-template-columns:minmax(0,1fr) 240px;gap:22px;align-items:stretch;width:720px}
.has-sub:hover .sub.mega,.has-sub:focus-within .sub.mega{display:block}
.has-sub:hover .sub.mega.has-feature,.has-sub:focus-within .sub.mega.has-feature{display:grid}
.sub .mega-links{display:block;list-style:none;margin:0;padding:0;align-self:start}
.sub .mega-links.two-col{columns:2;column-gap:22px}
.sub .mega-links li{break-inside:avoid;margin:0}
.sub .mega-links a{display:block;white-space:normal;line-height:1.25}
.sub a.mega-feature{position:relative;display:flex;align-items:flex-end;min-height:190px;border-radius:12px;overflow:hidden;background-size:cover;background-position:center;padding:16px;text-decoration:none;color:#fff}
.mega-feature .mega-feature-in{position:relative;z-index:1}
.mega-feature strong{display:block;font-family:var(--font-display);font-size:1rem;line-height:1.25;color:#fff;margin-bottom:12px}
.mega-cta{display:inline-block;background:var(--red);color:#fff;font-family:var(--font-display);font-weight:600;font-size:.8rem;padding:8px 15px;border-radius:999px}
.mega-feature:hover .mega-cta{filter:brightness(1.08)}
/* keep right-most dropdowns inside the viewport */
.main-nav > ul > li:nth-last-child(-n+2) .sub.mega{left:auto;right:0}
.nav-toggle{display:none;background:none;border:0;width:42px;height:38px;cursor:pointer}
.nav-toggle span{display:block;height:3px;background:var(--heading);margin:6px 8px;border-radius:2px}

/* hero */
.hero{background:
  radial-gradient(1100px 500px at 85% -10%, rgba(192,0,0,.28), transparent 60%),
  linear-gradient(160deg, rgba(14,11,77,.94) 0%, rgba(21,18,105,.80) 90%),
  var(--hero-img) center/cover no-repeat;
  color:#fff;padding:72px 0 84px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto 0 -2px 0;height:60px;background:var(--bg);clip-path:ellipse(75% 100% at 50% 100%)}
.hero h1{color:#fff}
.hero-sub{font-size:1.12rem;max-width:52ch;color:#e6e8f7}
.hero-grid{display:grid;grid-template-columns:1.2fr .9fr;gap:48px;align-items:center;position:relative;z-index:1}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.hero-note{font-size:.8rem;color:#cfd3ea;margin-top:16px}
.hero-small{padding:56px 0 64px;text-align:center}
.hero-small .hero-sub{margin:0 auto}

/* hero slider (rotating background photos, fixed copy) */
.hero-has-slider{background:var(--navy)}
.hero-slides{position:absolute;inset:0;z-index:0}
.hero-slide{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:0;transition:opacity .9s ease}
.hero-slide.is-active{opacity:1}
.hero-has-slider::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(1100px 500px at 85% -10%, rgba(192,0,0,.28), transparent 60%),
  linear-gradient(160deg, rgba(14,11,77,.94) 0%, rgba(21,18,105,.80) 90%)}
.hero-has-slider .hero-grid{position:relative;z-index:2}
.hero-dots{position:absolute;z-index:2;left:0;right:0;bottom:76px;display:flex;gap:10px;justify-content:center}
.hero-dots button{width:11px;height:11px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:background .2s ease,transform .2s ease}
.hero-dots button:hover{background:rgba(255,255,255,.75)}
.hero-dots button.is-active{background:#fff;transform:scale(1.15)}
@media (prefers-reduced-motion:reduce){ .hero-slide{transition:none} }
.address-card{background:var(--surface);color:var(--text);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.address-card h3{margin-top:0}

/* forms */
.lead-form label{display:block;font-size:.82rem;font-weight:600;color:var(--heading);margin-bottom:12px}
.lead-form input,.lead-form select{width:100%;padding:11px 12px;margin-top:5px;border:1.5px solid var(--border);border-radius:9px;font:inherit;background:var(--surface);color:var(--text)}
.lead-form input:focus,.lead-form select:focus{outline:2px solid var(--brand-ink);outline-offset:1px;border-color:var(--brand-ink)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-msg{min-height:1.2em;font-size:.9rem;font-weight:600}
.form-msg.ok{color:var(--brand-ink)}
.form-msg.err{color:#FF8A85}
.card-form{background:var(--surface);padding:28px;border-radius:var(--radius);box-shadow:var(--shadow)}

/* sections */
.section{padding:64px 0}
.section-title{text-align:center}
.section-intro{text-align:center;max-width:70ch;margin:0 auto 34px;color:var(--muted)}

/* imported content -----------------------------------------------------------
   Pages scraped from liveoakfiber.com keep that site's markup and class names.
   Everything here is scoped to .imported so hand-built blocks are untouched.

   Three problems it solves:
   1. Gutter. .container is the source site's layout wrapper and has no rules
      here, so imported copy sat on the 22px .wrap padding alone and read as
      edge-to-edge next to the rest of the site.
   2. Collisions. .hero and .btn are defined earlier in this file, so imported
      markup was inheriting the page hero's gradient, its 72px/84px padding and
      its clip-path ellipse — the full-width slab on /residential-offer.
   3. Light-mode leftovers. The source site is light and sets white panel
      backgrounds inline; against this dark theme that stranded light text on
      white. The scraper now strips those on import, and the rule below covers
      content imported before that fix. */
.imported > .wrap{max-width:1240px}
.imported .container{width:100%;max-width:1040px;margin-inline:auto;padding-inline:clamp(14px,3vw,28px)}
.imported section{padding-block:clamp(36px,5vw,60px)}
.imported section:first-child{padding-block-start:0}
.imported section:last-child{padding-block-end:0}
.imported figure{margin-inline:0}

/* collision resets */
.imported .hero{background:none;color:inherit;overflow:visible;min-height:0;padding-block:clamp(36px,5vw,60px)}
.imported .hero::after,.imported .hero::before{content:none}
.imported .hero h1,.imported .hero h2{color:var(--heading)}

/* Layout utilities carried by the scraped markup. Values are taken from
   liveoakfiber.com's own generatepress-child stylesheet so spacing and wrapping
   match the source, with two deliberate changes: the source sizes buttons in vw
   (0.83vw text, 1.35vw/1.82vw padding, 12.5vw min-width) which only works
   against its own fluid scale, and its .flex-btns is flex-wrap:nowrap, which
   overflows narrow screens. Fixed sizes and wrap are used instead. */
.imported .flex{display:flex;flex-wrap:wrap;width:100%}
.imported .flex.flex-space-between{justify-content:space-between}
.imported .flex-align-center{align-items:center}
.imported .half{flex:1 1 320px;min-width:0}
.imported .center-text{text-align:center}
.imported .container.wide-container{max-width:1240px}

/* Button rows. The source uses three different shapes across these pages —
   <ul class="flex flex-btns">, a plain <ul> of <li>, and buttons sitting inline
   in <div class="center-text"> — and only the first carries a class worth
   targeting. Of 201 containers holding two or more buttons, 12 are ul.flex, 65
   are unclassed lists and 124 are centred divs. Lists become real rows; the
   margin catches every inline case so nothing can touch regardless of wrapper. */
.imported .btn{margin:5px}
.imported ul.flex,.imported ul.flex-btns,.imported ul:has(> li > .btn){
  display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:16px 0;padding:0}
.imported ul.flex > li,.imported ul.flex-btns > li,.imported ul:has(> li > .btn) > li{
  margin:0;list-style:none}
.imported ul:has(> li > .btn) .btn{margin:0}       /* gap owns the spacing here */
.imported .flex-btns{justify-content:flex-start}
.imported .center-text .flex-btns,.imported .flex-btns.center-text{justify-content:center}

/* .btn matches the source's shape — uppercase, near-square corners, red fill —
   rather than this site's pill, so imported CTAs read as they do today. */
.imported .btn{display:inline-block;background:var(--brand);color:#fff;border:0;border-radius:4px;
  font-weight:700;text-transform:uppercase;font-size:.9rem;line-height:1;text-align:center;
  padding:18px 22px;min-width:200px;flex:0 1 auto;box-sizing:border-box}
.imported .btn:hover{background:#d90000;filter:none}
/* secondary variant: white fill, red label */
.imported .btn.white,.imported .btn.pure-white{background:#fff;color:var(--red);box-shadow:none}
.imported .btn.white:hover,.imported .btn.pure-white:hover{background:#fff;opacity:.85}
.imported .btn i{margin-right:5px}

@media (max-width:520px){
  /* The <li> is the flex item, so it has to stretch — sizing the <a> alone just
     fills a content-width list item. */
  .imported ul.flex > li,.imported ul.flex-btns > li,.imported ul:has(> li > .btn) > li{flex:1 1 100%}
  .imported .btn{min-width:0;width:100%;margin-left:0;margin-right:0}
}

/* neutralise inline white panels carried over from the light source site */
.imported [style*="#fff"],.imported [style*="#FFF"],
.imported [style*="background:white"],.imported [style*="background-color:white"],
.imported [style*="background: white"],.imported [style*="background-color: white"]{background-color:transparent!important}

/* plans — color-coded slider */
.plans-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:28px;flex-wrap:wrap}
.plans-head .section-title{text-align:left;margin:0}
.plans-nav{display:flex;gap:10px}
.plans-arrow{width:52px;height:40px;border-radius:12px;border:1.5px solid var(--navy);background:var(--navy);color:#fff;font-size:1.2rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:filter .15s ease,opacity .15s ease}
.plans-arrow.is-next{background:transparent;color:var(--heading);border-color:var(--border)}
.plans-arrow:hover{filter:brightness(1.1)}
.plans-arrow:disabled{opacity:.35;cursor:default}
.plans-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 2px 18px;-webkit-overflow-scrolling:touch}
.plans-track::-webkit-scrollbar{height:8px}
.plans-track::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}
.plan-card{flex:0 0 300px;scroll-snap-align:start;background:var(--surface);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;border:2px solid transparent}
.plan-card.is-popular{border-color:var(--navy)}
/* The "most popular" flag used to sit in flow, making that card's head 155px
   against 117px elsewhere, so the coloured heads did not line up across the row.
   Every head now reserves the badge strip and the flag is positioned into it. */
.plan-head{position:relative;color:#fff;padding:46px 22px 22px}
/* Plan-tier heads. The guide gives three colours, so the fourth is a derived
   mid-navy rather than an invented hue. White text on each: 15.9 / 11.6 / 6.5 / 7.0. */
.color-navy .plan-head{background:var(--navy)}
.color-navy-mid .plan-head{background:#2A2596}
.color-red .plan-head{background:var(--red)}
.color-gray .plan-head{background:var(--gray)}
.plan-flag{position:absolute;top:15px;left:22px;display:inline-block;background:#fff;color:var(--red);font-size:.66rem;font-weight:700;letter-spacing:.06em;padding:3px 10px;border-radius:999px;font-family:var(--font-display);text-transform:uppercase}
.plan-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.plan-name{margin:0;font-size:1.05rem;color:#fff}
.plan-speed{font-family:var(--font-display);font-weight:600;font-size:.9rem;color:#fff;margin-top:4px;opacity:.95}
.plan-speed span{font-size:2rem;font-weight:800;letter-spacing:-.03em}
.plan-price{font-family:var(--font-display);font-weight:600;color:#fff;white-space:nowrap}
.plan-price span{font-size:1.9rem;font-weight:800}
.plan-body{padding:22px;display:flex;flex-direction:column;flex:1}
.plan-blurb{font-size:.9rem;color:var(--muted);min-height:3.4em;margin-top:0}
.plan-perks{list-style:none;margin:6px 0 22px;padding:0;display:flex;gap:6px}
.plan-perks li{flex:1;text-align:center;font-size:.7rem;color:var(--muted);line-height:1.2;padding-top:36px;position:relative}
.plan-perks li::before{content:"\2713";position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:28px;border-radius:50%;background:var(--red);color:#fff;font-size:.85rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.plan-actions{margin-top:auto}
.plan-cta{display:block;text-align:center;width:100%}

/* image/text split */
.it-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.img-left .it-copy{order:2}
.eyebrow{font-family:var(--font-display);font-weight:700;letter-spacing:.12em;font-size:.75rem;color:var(--brand-ink);text-transform:uppercase}
.checklist{list-style:none;padding:0;margin:14px 0 22px}
.checklist li{padding:6px 0 6px 30px;position:relative}
.checklist li::before{content:"";position:absolute;left:0;top:11px;width:18px;height:18px;border-radius:50%;background:var(--red);clip-path:polygon(14% 44%,0 62%,42% 100%,100% 16%,84% 4%,40% 70%)}
.or-call{font-size:.9rem;margin-top:14px}
.media-slot{background:linear-gradient(140deg,var(--border),var(--surface-2));border:2px dashed var(--border);border-radius:var(--radius);min-height:320px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.9rem}
.it-media img{border-radius:var(--radius);box-shadow:var(--shadow)}

/* tabs */
.tab-list{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:8px 0 30px}
.tab-list button{font-family:var(--font-display);font-weight:600;padding:10px 24px;border-radius:999px;border:2px solid var(--brand-ink);background:transparent;color:var(--brand-ink);cursor:pointer}
.tab-list button.active{background:var(--brand);color:#fff}
.tab-panel{display:none;max-width:760px;margin:0 auto;background:var(--surface);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow)}
.tab-panel.active{display:block}

/* testimonials */
.testimonials{background:linear-gradient(180deg,transparent,rgba(21,18,105,.06))}
.quote-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:32px}
.quote-card{margin:0;background:var(--surface);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);border-left:5px solid var(--red)}
.quote-card blockquote{margin:0 0 14px;font-size:.98rem}
.quote-card figcaption{font-weight:700;font-family:var(--font-display);color:var(--heading);font-size:.9rem}
.quote-card figcaption span{display:block;font-weight:400;font-family:var(--font-body);color:var(--muted);font-size:.8rem}

/* cta banner */
.cta-banner{background:var(--band);color:#fff;margin-top:20px}
.cta-banner h2{color:#fff}
.cta-banner p{color:#dfe3f5;max-width:60ch}
.cta-in{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}

/* faq */
.faq-item{background:var(--surface);border-radius:12px;box-shadow:var(--shadow);margin-bottom:12px;padding:4px 20px}
.faq-item summary{font-family:var(--font-display);font-weight:600;color:var(--heading);padding:14px 0;cursor:pointer}
.faq-item p{margin:0 0 16px}

/* coverage */
.coverage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;margin-top:30px}
.coverage-group{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;border-top:4px solid var(--brand-ink)}
.coverage-group h3{font-size:1rem;margin-bottom:10px}
.coverage-group h3 a{color:var(--heading);text-decoration:none}
.coverage-group ul{list-style:none;margin:0;padding:0}
.coverage-group li a{display:block;padding:5px 0;text-decoration:none;color:var(--text);font-size:.92rem}
.coverage-group li a:hover{color:var(--brand-ink)}

/* rich text */
.rich-text p{font-size:1.02rem}

/* footer */
.site-footer{background:var(--band);color:#cfd3ea;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;padding-top:52px;padding-bottom:28px}
.footer-brand p{font-size:.92rem;max-width:42ch}
.footer-phones a{color:var(--red);text-decoration:none}
.socials a{color:#cfd3ea;margin-right:16px;font-size:.85rem}
.footer-links ul{list-style:none;margin:0;padding:0;columns:3;column-gap:34px}
.footer-links a{display:block;color:#cfd3ea;text-decoration:none;font-size:.88rem;padding:4px 0}
.footer-links a:hover{color:var(--red)}
.footer-legal{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);padding-top:18px;padding-bottom:26px;font-size:.82rem}

@media (max-width:940px){
  .hero-grid,.it-grid,.footer-grid{grid-template-columns:1fr}
  .img-left .it-copy{order:0}
  .nav-toggle{display:block;margin-left:auto}
  .header-cta{display:none}
  .main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);box-shadow:var(--shadow);padding:12px}
  body.nav-open .main-nav{display:block}
  .main-nav ul{flex-direction:column}
  .has-sub .sub{display:block;position:static;box-shadow:none;border:0;padding-left:18px}
  .has-sub .sub.mega,.has-sub:hover .sub.mega.has-feature,.has-sub:focus-within .sub.mega.has-feature{display:block;width:auto;max-width:none;padding:0 0 0 18px}
  .mega-links,.mega-links.two-col{grid-template-columns:1fr}
  .mega-feature{display:none}
  .footer-links ul{columns:2}
  .cta-in{flex-direction:column;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
  body{transition:none}
}