/* ============================================================
   Bayside Holiday Lighting
   Palette pulled from the logo: deep navy ground, warm bulb-amber accent.
   Red/green appear only as small accents — leaning on them is what makes
   competitor sites read as clipart.
   ============================================================ */

:root{
  --navy-900:#081625;
  --navy-850:#0B1E33;
  --navy-800:#122E4A;
  --navy-700:#1B4571;   /* logo navy */
  --navy-600:#23558A;
  --navy-500:#3A72AD;

  --amber-500:#E8A32C;
  --amber-400:#F5B942;  /* bulb glow */
  --amber-300:#FFD27D;

  --cream:#FAF7F2;
  --cream-2:#F2ECE3;
  --ink:#16212E;
  --ink-soft:#4A5A6B;
  --line:#DFD6C8;

  --holly:#B4232A;
  --pine:#2E7D4F;

  --serif:'Cinzel',Georgia,'Times New Roman',serif;
  --sans:'Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --wrap:1180px;
  --r:4px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
/* The canvas behind the page is what shows during overscroll bounce. Without an
   explicit background here it inherits body's cream and flashes a white bar
   above the dark hero. Navy matches both the hero and the footer. */
html{
  scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:#081625;
  /* Kills the rubber-band region at the top and bottom. Without this the browser
     briefly paints its own white canvas there before repainting with the navy
     above — a flash you only see on a fast fling to the top. */
  overscroll-behavior-y:none;
}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;overscroll-behavior-y:none;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px}

/* ---------- Type ---------- */
.eyebrow{
  font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--amber-400);margin:0 0 18px;
}
.eyebrow-dark{color:var(--navy-600)}
.sec-title{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(30px,4.2vw,50px);line-height:1.12;
  letter-spacing:-.01em;margin:0 0 20px;color:var(--navy-800);
}
.sec-title.light{color:var(--cream)}
.sec-lede{font-size:clamp(17px,1.6vw,19px);color:var(--ink-soft);max-width:58ch;margin:0}
.sec-lede.light{color:rgba(250,247,242,.72)}
.sec-head{margin-bottom:64px;max-width:760px}
.section{padding:clamp(80px,10vw,132px) 0}
/* Fixed header would otherwise cover the section heading on anchor jumps */
section[id]{scroll-margin-top:84px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:600;font-size:15px;
  letter-spacing:.03em;padding:15px 30px;border-radius:var(--r);
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease),transform .25s var(--ease);
}
.btn-primary{background:var(--amber-400);color:var(--navy-900);border-color:var(--amber-400)}
.btn-primary:hover{background:var(--amber-300);border-color:var(--amber-300);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--cream);border-color:rgba(250,247,242,.4)}
.btn-ghost:hover{border-color:var(--cream);background:rgba(250,247,242,.08)}
.btn-sm{padding:11px 22px;font-size:14px}
.btn-call{gap:10px;font-size:16.5px;letter-spacing:.01em}
.btn-call svg{width:17px;height:17px;fill:currentColor;stroke:none;flex:0 0 17px}
.btn-quote{gap:7px;flex-wrap:wrap}
.btn-sub{font-weight:400;opacity:.72;font-size:.92em}
.btn-block{width:100%;padding:17px}

/* ============ HEADER ============ */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  transition:background .35s var(--ease),box-shadow .35s var(--ease),padding .35s var(--ease);
  padding:10px 0;
}
.site-header.scrolled{
  background:rgba(8,22,37,.94);backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(255,255,255,.08);padding:2px 0;
}
.header-inner{display:flex;align-items:center;gap:32px}
.brand{flex:0 0 auto}
.brand-mark{height:62px;width:auto;transition:height .35s var(--ease)}
.site-header.scrolled .brand-mark{height:50px}
.nav{display:flex;gap:30px;margin-left:auto}
.nav a{
  color:rgba(250,247,242,.85);text-decoration:none;font-size:14.5px;font-weight:500;
  letter-spacing:.02em;position:relative;padding:6px 0;transition:color .2s var(--ease);
}
.nav a::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--amber-400);transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav a:hover{color:#fff}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.header-actions{display:flex;align-items:center;gap:20px}
.header-phone{
  color:var(--cream);text-decoration:none;font-weight:600;font-size:15px;
  letter-spacing:.02em;white-space:nowrap;
}
.header-phone:hover{color:var(--amber-300)}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.menu-toggle span{display:block;width:24px;height:2px;background:var(--cream);transition:transform .3s var(--ease),opacity .3s var(--ease)}
.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{
  display:none;flex-direction:column;background:rgba(8,22,37,.98);
  backdrop-filter:blur(12px);padding:8px 28px 28px;
}
.mobile-nav a{color:var(--cream);text-decoration:none;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.09);font-size:16px}
.mobile-nav .mobile-phone{color:var(--amber-300);font-weight:600;border-bottom:0}
.mobile-nav.open{display:flex}

/* ============ HERO ============ */
/* Slightly under a full viewport: crops dead image off the bottom and lets the
   before/afters peek up, so the page reads as continuing rather than stopping. */
.hero{
  position:relative;min-height:90svh;display:flex;align-items:center;
  overflow:hidden;background:var(--navy-900);
}
.hero-media{position:absolute;inset:0}
.hero-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);
}
/* The signature move: the lit layer sweeps in across the roofline,
   so the lights appear to switch on rather than crossfade. */
.hero-after{
  -webkit-mask-image:linear-gradient(100deg,#000 0%,#000 32%,rgba(0,0,0,0) 52%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(100deg,#000 0%,#000 32%,rgba(0,0,0,0) 52%,rgba(0,0,0,0) 100%);
  -webkit-mask-size:280% 100%;mask-size:280% 100%;
  -webkit-mask-position:100% 0;mask-position:100% 0;
  opacity:0;
}
.hero-lit .hero-after{
  animation:lightsOn 2.4s var(--ease) .45s forwards;
}
@keyframes lightsOn{
  0%{-webkit-mask-position:100% 0;mask-position:100% 0;opacity:0}
  8%{opacity:1}
  100%{-webkit-mask-position:0% 0;mask-position:0% 0;opacity:1}
}
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to right,rgba(8,22,37,.93) 0%,rgba(8,22,37,.78) 38%,rgba(8,22,37,.28) 68%,rgba(8,22,37,.42) 100%),
    linear-gradient(to top,rgba(8,22,37,.85) 0%,rgba(8,22,37,0) 45%);
}
.hero-content{position:relative;z-index:2;padding-top:118px;padding-bottom:74px}
.hero-title{
  font-family:var(--serif);font-weight:600;color:var(--cream);
  font-size:clamp(38px,6.4vw,80px);line-height:1.04;letter-spacing:-.015em;
  margin:0 0 28px;max-width:15ch;
}
.hero-title span{display:block}
.hero-title em{font-style:italic;color:var(--amber-300);font-weight:500}
.hero-sub{
  color:rgba(250,247,242,.8);font-size:clamp(17px,1.8vw,20px);
  max-width:56ch;margin:0 0 38px;line-height:1.6;
}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.hero-note{
  color:rgba(250,247,242,.55);font-size:14px;letter-spacing:.04em;margin:0;
}

/* ============ TRUST ============ */
/* Sits directly under the service area, which is also navy — step the tone down
   so the two read as separate sections rather than one long dark block. */
.trust{background:var(--navy-850);padding:74px 0;position:relative}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:44px}
.trust-item h3{
  font-family:var(--sans);font-size:16px;font-weight:700;letter-spacing:.01em;
  color:var(--cream);margin:0 0 9px;
}
.trust-item p{color:rgba(250,247,242,.63);font-size:14.5px;line-height:1.6;margin:0}
.ico{
  width:26px;height:26px;margin-bottom:16px;
  fill:none;stroke:var(--amber-400);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.ico .chk{stroke:var(--amber-300)}

/* ============ INCLUDED ============ */
.included{background:var(--cream)}
.included-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.inc{
  display:grid;grid-template-columns:92px 1fr;gap:32px;
  padding:34px 0;border-bottom:1px solid var(--line);align-items:start;
}
.inc-num{
  font-family:var(--serif);font-size:26px;font-weight:600;
  color:var(--amber-500);line-height:1;padding-top:4px;
}
.inc h3{
  font-family:var(--serif);font-size:clamp(20px,2.2vw,25px);font-weight:600;
  color:var(--navy-800);margin:0 0 10px;letter-spacing:-.005em;
}
.inc p{margin:0;color:var(--ink-soft);max-width:66ch;font-size:16.5px}

/* ============ GALLERY ============ */
/* Pulled tighter than the standard section rhythm so the before/afters sit
   close under the hero without crowding it. */
.gallery{background:var(--navy-850);padding-top:clamp(54px,6vw,86px)}
/* Lead image runs full width, the pair sits beneath it — gives the strongest
   shot room to land instead of flattening all three into equal tiles. */
.ba-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:34px}
.ba{margin:0}
.ba-feature{grid-column:1 / -1}
.ba-frame{
  position:relative;overflow:hidden;border-radius:var(--r);
  aspect-ratio:16/9;cursor:ew-resize;user-select:none;
  box-shadow:0 18px 50px rgba(0,0,0,.42);background:var(--navy-900);
  /* pan-y promises the browser that vertical scrolling is never cancelled here,
     so a swipe scrolls instantly instead of stalling to see what the JS does.
     Horizontal drags still reach the slider handler. */
  touch-action:pan-y;
}
.ba-frame img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none;
}
/* clip-path on a full-size image keeps both layers pixel-aligned at any viewport */
.ba-before{clip-path:inset(0 50% 0 0);z-index:2}
/* will-change only while actually dragging — four permanently promoted
   layers per slider is real GPU pressure for zero benefit at rest */
.ba-frame.dragging .ba-before{will-change:clip-path}
.ba-frame.dragging .ba-handle{will-change:left}
.ba-handle{
  position:absolute;top:0;bottom:0;left:50%;width:2px;
  background:rgba(250,247,242,.9);transform:translateX(-1px);z-index:3;
}
.ba-handle span{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;
  background:var(--cream);box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.ba-handle span::before,.ba-handle span::after{
  content:'';position:absolute;top:50%;width:0;height:0;
  border-top:5px solid transparent;border-bottom:5px solid transparent;
}
.ba-handle span::before{left:11px;transform:translateY(-50%);border-right:6px solid var(--navy-700)}
.ba-handle span::after{right:11px;transform:translateY(-50%);border-left:6px solid var(--navy-700)}
.ba-handle:focus-visible{outline:2px solid var(--amber-400);outline-offset:3px}
.ba-tag{
  position:absolute;bottom:14px;z-index:2;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 12px;border-radius:2px;
  background:rgba(8,22,37,.72);color:rgba(250,247,242,.9);backdrop-filter:blur(4px);
}
.ba-tag-l{left:14px}
.ba-tag-r{right:14px}
.ba figcaption{
  margin-top:15px;font-size:14px;color:rgba(250,247,242,.55);letter-spacing:.02em;
}
.disclosure{
  margin:52px auto 0;max-width:70ch;text-align:center;
  font-size:13.5px;line-height:1.65;color:rgba(250,247,242,.42);
  border-top:1px solid rgba(250,247,242,.12);padding-top:24px;
}

/* ============ PROCESS ============ */
.process{background:var(--cream-2)}
.steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:26px;align-items:start}
.step-num{
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:19px;font-weight:600;
  background:var(--navy-700);color:var(--amber-300);margin-bottom:20px;
}
.step h3{
  font-family:var(--serif);font-size:21px;font-weight:600;
  color:var(--navy-800);margin:0 0 10px;
}
.step p{margin:0;color:var(--ink-soft);font-size:16px}
.step-line{height:1px;background:var(--line);margin-top:23px;min-width:40px}

/* ============ AREA ============ */
.area{background:var(--navy-800)}
.area-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.cities{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:38px 0 24px}
.cities h4{
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--amber-400);margin:0 0 14px;
}
.cities ul{list-style:none;margin:0;padding:0}
.cities li{
  color:rgba(250,247,242,.78);font-size:15.5px;padding:5px 0;
  border-bottom:1px solid rgba(250,247,242,.08);
}
.area-note{color:rgba(250,247,242,.5);font-size:14.5px;font-style:italic;margin:0}
.area-map{
  background:var(--cream);border-radius:var(--r);padding:26px;
  box-shadow:0 18px 50px rgba(0,0,0,.3);
}

/* ============ FAQ ============ */
.faq{background:var(--cream)}
.faq-wrap{max-width:860px}
.faq-list{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative;
  font-family:var(--serif);font-size:clamp(17px,2vw,20px);font-weight:600;
  color:var(--navy-800);transition:color .2s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--navy-600)}
.faq summary::after{
  content:'';position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--amber-500);border-bottom:1.5px solid var(--amber-500);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details>div{padding:0 44px 26px 0}
.faq details p{margin:0;color:var(--ink-soft);font-size:16.5px}

/* ============ QUOTE ============ */
.quote{background:var(--navy-850)}
.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.quote-points{list-style:none;margin:32px 0;padding:0}
.quote-points li{
  color:rgba(250,247,242,.8);font-size:16px;padding:9px 0 9px 30px;position:relative;
}
.quote-points li::before{
  content:'';position:absolute;left:0;top:17px;width:13px;height:7px;
  border-left:2px solid var(--amber-400);border-bottom:2px solid var(--amber-400);
  transform:rotate(-45deg);
}
/* Direct contact — deliberately louder than the form beside it.
   Calls convert better than form fills for this business. */
.direct{
  margin:0;padding:26px 28px;border-radius:var(--r);
  background:rgba(255,255,255,.045);border:1px solid rgba(250,247,242,.13);
}
.direct-label{
  margin:0 0 9px;font-size:13px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--amber-400);
}
.direct-copy{
  margin:0 0 18px;font-size:15.5px;line-height:1.6;
  color:rgba(250,247,242,.68);max-width:44ch;
}
.direct-line{
  display:flex;align-items:center;gap:13px;
  text-decoration:none;color:var(--cream);
  font-size:clamp(19px,2.3vw,23px);font-weight:600;letter-spacing:.01em;
  padding:9px 0;transition:color .2s var(--ease);
}
.direct-line svg{
  width:21px;height:21px;flex:0 0 21px;fill:var(--amber-400);stroke:none;
}
.direct-email{font-size:clamp(15px,1.7vw,18px);font-weight:500;word-break:break-all}
.direct-email svg{
  fill:none;stroke:var(--amber-400);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.direct-line:hover{color:var(--amber-300)}
.direct-line:hover svg{fill:var(--amber-300)}
.direct-email:hover svg{fill:none;stroke:var(--amber-300)}

.quote-form{
  background:var(--cream);padding:38px;border-radius:var(--r);
  box-shadow:0 22px 60px rgba(0,0,0,.34);
}
.quote-form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.quote-form label{
  display:block;margin-bottom:16px;font-size:13px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--navy-700);
}
/* "(Call or Text)" / "(optional)" — present but not competing with the field name */
.lbl-note{font-weight:400;text-transform:none;letter-spacing:.01em;color:var(--ink-soft);font-size:12.5px}
.quote-form input,.quote-form select,.quote-form textarea{
  width:100%;margin-top:7px;padding:13px 14px;
  border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--sans);font-size:16px;font-weight:400;
  letter-spacing:normal;text-transform:none;color:var(--ink);
  background:#fff;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.quote-form textarea{resize:vertical;min-height:84px}
.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{
  outline:none;border-color:var(--navy-600);box-shadow:0 0 0 3px rgba(35,85,138,.14);
}
.quote-form input:invalid:not(:placeholder-shown){border-color:var(--holly)}
/* Netlify honeypot — bots fill it in, humans never see it */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-fine{font-size:12.5px;color:var(--ink-soft);text-align:center;margin:14px 0 0}
.form-status{
  font-size:14.5px;margin:12px 0 0;text-align:center;font-weight:600;min-height:1.4em;
}
.form-status.ok{color:var(--pine)}
.form-status.err{color:var(--holly)}

/* ============ FOOTER ============ */
.site-footer{background:var(--navy-900);color:rgba(250,247,242,.62);padding:70px 0 0}
.footer-inner{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px;padding-bottom:52px;
}
.footer-mark{height:76px;width:auto;margin-bottom:14px}
.footer-tag{
  font-family:var(--serif);font-size:13px;letter-spacing:.06em;
  color:rgba(250,247,242,.5);margin:0;
}
.footer-col h4{
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--amber-400);margin:0 0 14px;
}
.footer-col p{margin:0;font-size:15px;line-height:1.9}
.footer-col a{text-decoration:none;transition:color .2s var(--ease)}
.footer-col a:hover{color:var(--amber-300)}
.footer-base{
  border-top:1px solid rgba(250,247,242,.1);padding-top:24px;padding-bottom:30px;
}
.footer-base p{margin:0;font-size:13px;color:rgba(250,247,242,.4)}

/* ============ SCROLL REVEAL ============ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.hero .reveal{transition-delay:.15s}
.hero .d1{transition-delay:.30s}.hero .d2{transition-delay:.42s}
.hero .d3{transition-delay:.54s}.hero .d4{transition-delay:.70s}
.hero .d5{transition-delay:.82s}.hero .d6{transition-delay:.94s}

/* ============ RESPONSIVE ============ */
@media(max-width:1000px){
  /* Solid from the start, not just once scrolled. iOS Safari tints the strip
     behind the status bar by sampling the colour at the very top of the page —
     a transparent header gives it nothing to read and it falls back to white.
     A solid bar also drops the blur, which cost real frames while scrolling. */
  .site-header,
  .site-header.scrolled{background:#081625;-webkit-backdrop-filter:none;backdrop-filter:none}
  .mobile-nav{background:#081625;-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav,.header-phone{display:none}
  .menu-toggle{display:flex}
  .header-inner{gap:16px}
  .header-actions{margin-left:auto}
  .trust-grid{grid-template-columns:1fr 1fr;gap:36px}
  .area-grid,.quote-grid{grid-template-columns:1fr;gap:48px}
  .footer-inner{grid-template-columns:1fr 1fr;gap:36px}
  .steps{grid-template-columns:1fr;gap:34px}
  .step-line{display:none}
  .ba-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  /* the hero fills the viewport, so generous bottom padding just leaves a
     dead band of dark image between the copy and the next section */
  .hero{min-height:100svh}
  /* A landscape photo in a portrait frame shows its full height, which parks the
     roofline in the top third. Zoom in and nudge it down so the lights land
     nearer the middle of the phone screen. */
  .hero-img{transform:scale(1.32) translateY(11%)}
  /* Text shifts down with the photo so the headline doesn't ride over the roofline */
  /* Shift the copy down with asymmetric padding, not transform. Padding is part
     of layout, so on a short phone the hero grows instead of clipping the text. */
  .hero-content{padding-top:130px;padding-bottom:6px}
  .section{padding:64px 0}
  .gallery{padding-top:46px}
  .hero-title{max-width:none}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .trust-grid{grid-template-columns:1fr;gap:30px}
  .inc{grid-template-columns:1fr;gap:10px}
  .inc-num{font-size:20px}
  .cities{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
  .quote-form{padding:26px}
  .quote-form .row{grid-template-columns:1fr;gap:0}
  .sec-head{margin-bottom:44px}
  .brand-mark{height:50px}
}

/* ============ MOTION / PRINT ============ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .hero-after{opacity:1;-webkit-mask-image:none;mask-image:none}
}
:focus-visible{outline:2px solid var(--amber-400);outline-offset:3px}