/* Burkes Mechanical — V2 stylesheet — Bold Industrial / Dark */
:root{
  --red:#c8102e;
  --red-dark:#8c0b20;
  --red-bright:#e51e3a;
  --red-text:#ff3355; /* AA-compliant (5.5:1 on black) red for small/normal text; red-bright is reserved for backgrounds/borders/large text */
  --black:#0a0a0a;
  --gray-950:#111111;
  --gray-900:#161616;
  --gray-800:#202020;
  --gray-700:#2c2c2c;
  --gray-600:#54534f;
  --gray-400:#8f8e89;
  --gray-300:#bcbbb6;
  --gray-100:#e9e8e4;
  --white:#ffffff;
  --font:'Arial','Helvetica Neue',Helvetica,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;max-width:100%;overflow-x:hidden;}
.anchor-target{scroll-margin-top:var(--header-h, 84px);}
body{
  margin:0;
  font-family:var(--font);
  color:var(--gray-300);
  background:var(--black);
  line-height:1.6;
  max-width:100%;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.container{max-width:1200px;margin:0 auto;padding:0 24px;}

/* Accessibility: visible keyboard focus + skip-to-content link */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:3px solid var(--red-bright);outline-offset:2px;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--red);color:var(--white);padding:14px 22px;font-weight:800;
  text-transform:uppercase;letter-spacing:1px;
}
.skip-link:focus{left:12px;top:12px;}
h1,h2,h3,h4{color:var(--white);text-transform:uppercase;letter-spacing:-.5px;font-weight:900;}
p{color:var(--gray-300);}
strong{color:var(--white);}

/* Header */
body{padding-top:var(--header-h, 88px);}
body.hero-page{padding-top:0;}
.site-header{
  position:fixed;top:0;left:0;right:0;width:100%;z-index:100;
  border-bottom:2px solid transparent;
  transition:border-color .25s ease;
}
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(10,10,10,.55);backdrop-filter:blur(6px);
  transition:background-color .25s ease;
}
.site-header.scrolled{border-bottom-color:var(--red);}
.site-header.scrolled::before{background:rgba(6,6,6,.97);}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1200px;margin:0 auto;padding:16px 24px;
}
.logo{display:flex;align-items:center;}
.logo-img{height:56px;width:auto;display:block;}
.logo span{display:none;}
nav.main-nav ul{list-style:none;display:flex;gap:30px;margin:0;padding:0;align-items:center;}
nav.main-nav{display:flex;align-items:center;gap:24px;}
nav.main-nav > ul > li{position:relative;}
nav.main-nav a{font-weight:700;font-size:.82rem;color:var(--white);text-transform:uppercase;letter-spacing:1.3px;}
nav.main-nav > ul > li > a:hover{color:var(--red-text);}
.dropdown{display:none;position:absolute;top:100%;left:0;background:var(--gray-950);border:1px solid var(--gray-700);border-top:2px solid var(--red);min-width:210px;box-shadow:0 12px 30px rgba(0,0,0,.5);padding:6px 0;}
nav.main-nav > ul > li:hover .dropdown,
nav.main-nav > ul > li:focus-within .dropdown{display:block;}
.dropdown a{display:block;padding:10px 18px;font-weight:600;letter-spacing:.5px;color:var(--gray-300);text-transform:none;font-size:.88rem;}
.dropdown a:hover{background:var(--gray-800);color:var(--red-text);}
.header-ctas{display:flex;gap:12px;align-items:center;}

.btn{
  display:inline-block;padding:14px 28px;font-weight:800;font-size:.8rem;
  text-transform:uppercase;letter-spacing:1.3px;cursor:pointer;
  clip-path:polygon(0 0,100% 0,92% 100%,0 100%);
  transition:transform .15s ease, background-color .15s ease, color .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--red);color:var(--white);}
.btn-primary:hover{background:var(--red-bright);}
/* Outline buttons can't use a plain CSS border here — clip-path slices the
   corner off the box, but the border stroke is only computed for the four
   original rectangular edges, so the diagonal cut edge is left with no
   line and the outline never closes. An SVG background traces the exact
   clipped outline (including the diagonal) as one continuous stroke. */
.btn-outline{
  color:var(--white);background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='1,1 99,1 91,99 1,99' fill='none' stroke='%23ffffff' stroke-width='2.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  background-size:100% 100%;background-repeat:no-repeat;
}
.btn-outline:hover{background-color:var(--white);background-image:none;color:var(--black);}
.btn-white{background:var(--white);color:var(--red);}
.btn-white:hover{background:var(--red-dark);color:var(--white);}
.header-ctas .btn{padding:11px 20px;font-size:.72rem;}

/* Generic dark hero (legacy .hero small used on a couple of non-redesigned pages) */
.hero{
  background:linear-gradient(135deg, var(--gray-950) 0%, var(--black) 60%, var(--red-dark) 160%);
  color:var(--white);padding:110px 0 70px;text-align:left;
}
.hero.small{padding:70px 0 54px;}
.hero h1{font-size:2.8rem;margin:0 0 16px;line-height:1.05;}
.hero p{font-size:1.15rem;max-width:640px;color:var(--gray-300);margin:0 0 28px;text-transform:none;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.eyebrow{text-transform:uppercase;letter-spacing:2.5px;color:var(--red-text);font-weight:800;font-size:.78rem;margin-bottom:14px;display:inline-block;background:rgba(200,16,46,.14);padding:6px 14px;}

/* Hero background video (homepage) — full bold treatment */
.hero-video-section{
  position:relative;overflow:hidden;background:var(--black);
  padding:240px 0 130px;
}
.hero-video{
  position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;object-position:center;z-index:0;filter:contrast(1.12) saturate(.88);
}
.hero-video-overlay{
  position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(5,5,5,.93) 12%, rgba(10,10,10,.6) 52%, rgba(200,16,46,.32) 135%);
  z-index:1;
}
.hero-video-section::after{
  content:"";position:absolute;right:0;top:0;bottom:0;width:16%;background:var(--red);
  clip-path:polygon(55% 0,100% 0,100% 100%,15% 100%);z-index:2;opacity:.92;
}
.hero-content{position:relative;z-index:3;}
.hero-video-section .hero-content{text-align:left;display:flex;flex-direction:column;align-items:flex-start;max-width:820px;}
.hero-video-section .hero-content p{max-width:600px;text-transform:none;font-size:1.2rem;}
.hero-video-section h1{font-size:4.4rem;line-height:.98;}
.hero-video-section .hero-actions{justify-content:flex-start;}

.video-toggle{
  position:absolute;z-index:4;right:24px;bottom:24px;
  width:44px;height:44px;border-radius:50%;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.6);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:.85rem;transition:background-color .15s ease;
}
.video-toggle:hover{background:rgba(0,0,0,.75);}

.stat-strip{background:var(--red);display:flex;flex-wrap:wrap;justify-content:space-around;padding:30px 24px;position:relative;z-index:3;}
.stat-strip div{text-align:center;padding:8px 20px;}
.stat-strip .num{display:block;font-size:2.4rem;font-weight:900;color:var(--white);line-height:1;}
.stat-strip .lbl{font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.88);font-weight:700;}

@media (max-width:700px){
  .hero{padding:60px 0 44px;}
  .hero.small{padding:52px 0 40px;}
  .hero h1{font-size:2rem;}
  .hero p{font-size:1.02rem;}
  .hero-video-section{padding:130px 0 90px;}
  .hero-video-section h1{font-size:2.4rem;}
  .hero-video-section::after{display:none;}
  .stat-strip{gap:6px;}
  .stat-strip .num{font-size:1.6rem;}
}

/* Full-bleed hero image on inner pages */
.hero-image-section{
  position:relative;overflow:hidden;background:var(--black);
  padding:calc(var(--header-h, 88px) + 90px) 0 70px;
  color:var(--white);
}
.hero-bg-img{
  position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;object-position:center;z-index:0;filter:contrast(1.1) saturate(.85) grayscale(.15);
}
.hero-image-overlay{
  position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(5,5,5,.92) 10%, rgba(10,10,10,.62) 52%, rgba(200,16,46,.35) 135%);
  z-index:1;
}
.hero-image-section::after{
  content:"";position:absolute;right:0;top:0;bottom:0;width:14%;background:var(--red);
  clip-path:polygon(55% 0,100% 0,100% 100%,15% 100%);z-index:2;opacity:.9;
}
.hero-image-section .hero-content{max-width:700px;}
.hero-image-section h1{font-size:3.2rem;margin:0 0 18px;line-height:1.02;}
.hero-image-section p{font-size:1.15rem;color:var(--gray-300);margin:0 0 20px;text-transform:none;}
.hero-image-section .btn-primary{margin-top:4px;}

@media (max-width:700px){
  .hero-image-section{padding:calc(var(--header-h, 76px) + 44px) 0 44px;}
  .hero-image-section h1{font-size:2.1rem;}
  .hero-image-section p{font-size:1.02rem;}
  .hero-image-section::after{display:none;}
}

/* Sections */
section{padding:80px 0;}
section.alt{background:var(--gray-950);}
h2{font-size:2.2rem;margin:0 0 14px;}
h3{font-size:1.25rem;margin:0 0 8px;text-transform:none;letter-spacing:0;}
.section-intro{max-width:720px;margin:0 0 44px;}
.section-intro p{color:var(--gray-400);font-size:1.05rem;}

.about-split{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;margin-bottom:16px;}
.about-split img{width:100%;height:100%;object-fit:cover;filter:grayscale(.25) contrast(1.05);max-height:420px;border-left:4px solid var(--red);}
@media (max-width:900px){.about-split{grid-template-columns:1fr;}.about-split img{max-height:300px;}}

.page-banner-img{width:100%;height:360px;object-fit:cover;display:block;}
@media (max-width:700px){.page-banner-img{height:220px;}}

/* Grid cards */
.grid{display:grid;gap:24px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

.card{
  background:var(--gray-950);border:1px solid var(--gray-700);border-top:3px solid var(--red);padding:28px;
  transition:transform .2s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-4px);border-color:var(--red);}
.card h3{color:var(--white);}
.card-dark{background:var(--black);color:var(--white);}
.card-dark h3{color:var(--white);}

.service-tile{overflow:hidden;border:1px solid var(--gray-700);background:var(--gray-950);transition:border-color .2s ease, transform .2s ease;}
.service-tile:hover{border-color:var(--red);transform:translateY(-4px);}
.service-tile .tile-body{padding:22px;}
.service-tile h3{color:var(--white);margin-bottom:8px;}
.service-tile h3::before{content:"";display:inline-block;width:10px;height:10px;background:var(--red);margin-right:10px;vertical-align:middle;}
.service-tile img{height:190px;width:100%;object-fit:cover;background:var(--gray-800);filter:grayscale(.55) contrast(1.05);transition:filter .3s ease;}
.service-tile:hover img{filter:grayscale(0) contrast(1.05);}
.service-tile a{color:var(--red-text);font-weight:800;font-size:.85rem;text-transform:uppercase;letter-spacing:.5px;}

ul.capabilities{list-style:none;padding:0;margin:0;}
ul.capabilities li{
  padding:12px 0 12px 28px;border-bottom:1px solid var(--gray-800);position:relative;color:var(--gray-300);
}
ul.capabilities li:before{
  content:"";position:absolute;left:0;top:18px;width:12px;height:12px;background:var(--red);clip-path:polygon(0 0,100% 0,70% 100%,0 100%);
}

/* Stats / certifications table */
.cert-table{width:100%;border-collapse:collapse;text-align:center;margin:16px 0;}
.cert-table th,.cert-table td{border:1px solid var(--gray-700);padding:12px;font-weight:800;color:var(--white);}
.cert-table th{background:var(--red);color:var(--white);text-transform:uppercase;font-size:.85rem;letter-spacing:.5px;}
.cert-table td{background:var(--gray-950);}

/* Timeline */
.timeline{border-left:3px solid var(--red);padding-left:26px;margin-left:8px;}
.timeline-item{margin-bottom:30px;}
.timeline-item h3{color:var(--red-text);margin-bottom:4px;text-transform:uppercase;letter-spacing:1px;font-size:1.1rem;}

/* Quote */
.quote-block{background:var(--gray-950);color:var(--white);padding:64px 0;text-align:center;border-top:1px solid var(--gray-800);border-bottom:1px solid var(--gray-800);}
.quote-block blockquote{font-size:1.4rem;max-width:800px;margin:0 auto 18px;font-style:italic;color:var(--gray-100);}
.stars{color:var(--red-text);font-size:1.3rem;letter-spacing:3px;}

/* FAQ */
details{border-bottom:1px solid var(--gray-800);padding:16px 0;}
summary{font-weight:800;cursor:pointer;font-size:1.05rem;color:var(--white);}
details p{color:var(--gray-400);margin:12px 0 0;}

/* CTA banner */
.cta-banner{background:var(--red);color:var(--white);padding:64px 0;text-align:center;position:relative;overflow:hidden;}
.cta-banner::before{content:"";position:absolute;left:-5%;top:0;bottom:0;width:20%;background:rgba(0,0,0,.14);clip-path:polygon(30% 0,100% 0,70% 100%,0 100%);}
.cta-banner h2{margin-bottom:18px;color:var(--white);}
.cta-banner p{color:rgba(255,255,255,.9);}

/* Contact cards */
.contact-card{border:1px solid var(--gray-700);border-left:3px solid var(--red);background:var(--gray-950);padding:26px;}
.contact-card h3{color:var(--white);text-transform:uppercase;font-size:1rem;letter-spacing:.5px;}
.contact-card .role{color:var(--gray-400);margin-bottom:14px;}

/* Locations */
.loc-card{border:1px solid var(--gray-700);border-left:3px solid var(--red);background:var(--gray-950);padding:24px;margin-bottom:16px;}
.loc-tag{text-transform:uppercase;font-size:.75rem;font-weight:800;color:var(--red-text);letter-spacing:1.5px;}

/* Table simple */
table.simple{width:100%;border-collapse:collapse;}
table.simple td, table.simple th{border:1px solid var(--gray-800);padding:12px;vertical-align:top;color:var(--gray-300);}
table.simple th{background:var(--gray-950);color:var(--white);text-transform:uppercase;font-size:.85rem;letter-spacing:.5px;}

/* Footer */
footer{background:var(--black);color:var(--gray-400);padding:56px 0 24px;border-top:3px solid var(--red);}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:36px;}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr;}}
footer h4{color:var(--white);font-size:.85rem;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:16px;}
footer ul{list-style:none;padding:0;margin:0;}
footer li{margin-bottom:10px;}
footer a:hover{color:var(--red-text);}
.footer-bottom{border-top:1px solid var(--gray-800);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.82rem;align-items:center;}
.footer-logo{margin-bottom:18px;}
.footer-logo img{height:46px;width:auto;display:block;}

/* Mobile nav toggle */
.nav-toggle{
  display:none;background:none;border:none;font-size:1.8rem;line-height:1;cursor:pointer;color:var(--white);
  padding:6px 4px;
}
body.nav-locked{overflow:hidden;}

@media (max-width:960px){
  .header-inner{padding:12px 20px;flex-wrap:wrap;}
  .logo-img{height:48px;}
  .header-ctas{gap:10px;}
  .header-ctas .btn{padding:10px 14px;font-size:.68rem;}
  .header-ctas .btn-outline{display:none;}
  .nav-toggle{display:block;}

  nav.main-nav{
    display:none;
    position:fixed;top:var(--header-h,72px);left:0;right:0;bottom:0;
    width:100%;max-width:100vw;box-sizing:border-box;
    background:var(--black);z-index:99;
    overflow-x:hidden;overflow-y:auto;padding:8px 0 24px;
  }
  nav.main-nav.nav-open{display:block;}
  nav.main-nav ul{
    display:block;gap:0;width:100%;
  }
  nav.main-nav > ul > li{
    display:block;width:100%;border-bottom:1px solid var(--gray-800);
  }
  nav.main-nav > ul > li > a{
    display:block;padding:18px 24px;font-size:1rem;
  }
  .dropdown{
    display:none;position:static;border:none;box-shadow:none;
    background:var(--gray-950);padding:0;min-width:0;
  }
  li.dropdown-open .dropdown{display:block;}
  .dropdown a{padding:14px 40px;font-size:.9rem;}
}

/* Sector chips */
.sector-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width:700px){.sector-list{grid-template-columns:1fr;}}
.sector-chip{border:1px solid var(--gray-700);border-top:3px solid var(--red);background:var(--gray-950);padding:20px;transition:transform .2s ease;}
.sector-chip:hover{transform:translateY(-3px);}
.sector-chip h3{font-size:1.05rem;color:var(--white);margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px;}
.sector-chip p{color:var(--gray-400);font-size:.92rem;margin:0;}

/* Form */
form.contact-form{display:grid;gap:18px;max-width:640px;}
form.contact-form label{font-weight:800;font-size:.8rem;display:block;margin-bottom:8px;color:var(--white);text-transform:uppercase;letter-spacing:1px;}
form.contact-form input, form.contact-form textarea, form.contact-form select{
  width:100%;padding:12px 14px;border:1px solid var(--gray-700);background:var(--gray-950);color:var(--white);font-family:inherit;font-size:1rem;
}
.form-required-note{font-size:.85rem;color:var(--gray-400);margin:-4px 0 4px;}
.required-mark{color:var(--red-text);}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
form.contact-form input:focus, form.contact-form textarea:focus, form.contact-form select:focus{border-color:var(--red);}
form.contact-form input:focus-visible, form.contact-form textarea:focus-visible, form.contact-form select:focus-visible{outline:3px solid var(--red-bright);outline-offset:1px;}

/* Social icons (footer) */
.social-icons{display:flex;gap:10px;}
.social-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--gray-900);border:1px solid var(--gray-700);color:var(--white);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.social-icon svg{width:22px;height:22px;}
.social-icon:hover{background:var(--red);color:var(--white);border-color:var(--red);}

/* Locations map (homepage) */
.locations-map{
  max-width:100%;border:1px solid var(--gray-700);filter:contrast(1.05);
}

/* Serving America's Essential Industries — split panel */
.sectors-split{
  display:grid;grid-template-columns:1fr 1fr;padding:0;
}
@media (max-width:900px){.sectors-split{grid-template-columns:1fr;}}
.sectors-left{
  background:
    linear-gradient(120deg, rgba(5,5,5,.92), rgba(60,10,15,.8)),
    linear-gradient(135deg, var(--gray-950) 0%, var(--black) 55%, var(--red-dark) 150%),
    url('../assets/images/sectors-bg.jpg');
  background-size:cover;background-position:center;
  color:var(--white);padding:80px 56px;display:flex;flex-direction:column;justify-content:center;
}
.sectors-left .eyebrow{color:var(--red-text);background:rgba(255,255,255,.08);}
.sectors-left h2{color:var(--white);}
.sectors-tagline{font-weight:800;font-size:1.1rem;color:var(--white);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px;}
.sectors-left p{color:var(--gray-300);text-transform:none;}
.sectors-left .btn{margin-top:14px;align-self:flex-start;}

.sectors-right{
  background:var(--black);color:var(--white);padding:80px 56px;
}
.sectors-right h2{color:var(--white);margin-bottom:28px;}

@media (max-width:700px){
  .sectors-left, .sectors-right{padding:44px 24px;}
}

/* Responsive tables: scroll horizontally instead of squeezing on mobile */
@media (max-width:700px){
  .cert-table, table.simple{
    display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;
  }
}

.sector-accordion{max-width:100%;}
.sector-accordion details{
  border-bottom:1px solid rgba(255,255,255,.15);padding:18px 0;
}
.sector-accordion summary{
  font-weight:700;font-size:1.05rem;list-style:none;cursor:pointer;color:var(--white);
  display:flex;align-items:center;justify-content:space-between;
  transition:color .15s ease;text-transform:uppercase;letter-spacing:.5px;
}
.sector-accordion summary:hover{color:var(--red-text);}
.sector-accordion summary::-webkit-details-marker{display:none;}
.sector-accordion .chev{
  color:var(--gray-400);font-size:1.4rem;transition:transform .2s ease;
}
.sector-accordion details[open] .chev{transform:rotate(90deg);color:var(--red-text);}
.sector-accordion details p{color:var(--gray-400);margin:14px 0 0;font-size:.95rem;text-transform:none;}

/* Scroll-reveal animation (JS toggles .is-visible) */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease, transform .6s ease;}
.reveal.is-visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}

/* Back-to-top button — angular, matches the site's clipped-corner buttons.
   The tooltip lives on a sibling element, not inside the button: clip-path
   on the button would otherwise clip a ::after tooltip clean off the screen. */
.back-to-top-wrap{
  position:fixed;left:24px;bottom:24px;z-index:90;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.back-to-top-wrap.is-visible{opacity:1;visibility:visible;transform:translateY(0);}
.back-to-top{
  width:52px;height:52px;
  background:var(--red);color:var(--white);border:none;
  clip-path:polygon(0 0,100% 0,100% 78%,78% 100%,0 100%);
  font-size:1.3rem;line-height:1;cursor:pointer;font-weight:900;
  transition:background-color .15s ease;
}
.back-to-top:hover{background:var(--red-bright);}
.back-to-top-tip{
  position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(-6px);
  background:var(--black);color:var(--white);font-size:.75rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.8px;
  padding:9px 14px;white-space:nowrap;border-left:3px solid var(--red);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.back-to-top-wrap:hover .back-to-top-tip, .back-to-top:focus-visible ~ .back-to-top-tip{
  opacity:1;visibility:visible;transform:translateY(-50%) translateX(0);
}
@media (max-width:700px){
  .back-to-top-wrap{left:16px;bottom:16px;}
  .back-to-top{width:46px;height:46px;font-size:1.1rem;}
  .back-to-top-tip{font-size:.7rem;padding:8px 12px;left:calc(100% + 8px);}
}