/* ===================================================================
   EXCAVĂRI TULCEA — design system
   Palette sampled directly from the client's own creatives.
=================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700;800&family=Caveat:wght@600&display=swap');

:root{
  --yellow:#F0AC00;
  --yellow-deep:#C98A00;
  --yellow-bright:#FFC727;
  --orange:#E96F1C;
  --black:#0E0E0E;
  --black-soft:#1A1A1A;
  --black-card:#222020;
  --paper:#F4F1EA;
  --white:#FFFFFF;
  --gray:#9A938A;
  --gray-dark:#55504A;

  --display:'Anton', sans-serif;
  --label:'Oswald', sans-serif;
  --body:'Inter', sans-serif;
  --script:'Caveat', cursive;

  --container: 1180px;
  --radius: 4px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--black);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,p{margin:0;}
button{font-family:inherit;border:none;background:none;cursor:pointer;}

.wrap{max-width:var(--container);margin:0 auto;padding:0 20px;}

/* noise texture for dark sections */
.grain{position:relative;}
.grain::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}

.eyebrow{
  font-family:var(--label);
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.78rem;
}

/* focus accessibility */
a:focus-visible, button:focus-visible{
  outline:3px solid var(--yellow-bright);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
  html{scroll-behavior:auto;}
}

/* ================= REVEAL ANIMATION ================= */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .65s ease, transform .65s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}
.reveal-stagger > *{opacity:0; transform:translateY(22px); transition:opacity .55s ease, transform .55s ease;}
.reveal-stagger.is-visible > *{opacity:1; transform:translateY(0);}
.reveal-stagger.is-visible > *:nth-child(1){transition-delay:.03s;}
.reveal-stagger.is-visible > *:nth-child(2){transition-delay:.09s;}
.reveal-stagger.is-visible > *:nth-child(3){transition-delay:.15s;}
.reveal-stagger.is-visible > *:nth-child(4){transition-delay:.21s;}
.reveal-stagger.is-visible > *:nth-child(5){transition-delay:.27s;}
.reveal-stagger.is-visible > *:nth-child(n+6){transition-delay:.33s;}

/* ================= BUTTONS ================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:.02em;
  border-radius:var(--radius);
  padding:16px 26px;
  font-size:1.05rem;
  transition:transform .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-call{
  background:var(--yellow);
  color:var(--black);
  box-shadow:0 6px 0 var(--yellow-deep);
}
.btn-call:hover{background:var(--yellow-bright);}
.btn-call:active{box-shadow:0 3px 0 var(--yellow-deep); transform:translateY(3px) scale(.99);}
.btn-dark{
  background:var(--black);
  color:var(--white);
}
.btn-dark:hover{background:var(--black-soft);}
.btn-small{padding:10px 16px; font-size:.85rem; gap:8px;}

/* ================= HEADER ================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(14,14,14,.92);
  backdrop-filter:blur(6px);
  border-bottom:3px solid var(--yellow);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:62px;
}
.logo{
  display:flex; align-items:center; gap:9px;
  color:var(--white);
  font-family:var(--display);
  line-height:1;
}
.logo svg{flex-shrink:0;}
.logo .lock{display:flex; flex-direction:column;}
.logo .lock .l1{font-size:.6rem; letter-spacing:.16em; color:var(--gray); font-family:var(--label); font-weight:600;}
.logo .lock .l2{font-size:1.15rem; color:var(--white);}
.logo .lock .l2 span{color:var(--yellow);}

/* ================= HERO ================= */
.hero{
  position:relative;
  background:var(--black);
  color:var(--white);
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background-image:url('images/hero-excavator.jpg');
  background-size:cover;
  background-position:60% 50%;
  opacity:.85;
}
.hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(0,0,0,.96) 18%, rgba(0,0,0,.78) 42%, rgba(0,0,0,.25) 75%);
}
.hero-chevrons{
  position:absolute; top:0; right:0; z-index:1;
  width:90px; opacity:.5;
}
.hero-inner{
  position:relative; z-index:2;
  padding:24px 0 40px;
}

/* hero split-layout for logo + content */
.hero-visual{
  display:flex; align-items:center; justify-content:center;
  margin-bottom:10px;
}
.hero-logo{
  width: min(160px, 42vw);
  height: auto;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.55));
  opacity:0;
  transform: scale(.6) rotate(-6deg);
  animation: heroLogoIn .55s cubic-bezier(.35,1.7,.4,1) 1.05s forwards,
             logoFloat 4s ease-in-out 1.6s infinite alternate;
}
@keyframes heroLogoIn {
  0%   { opacity:0; transform: scale(.6) rotate(-6deg); }
  60%  { opacity:1; transform: scale(1.06) rotate(2deg); }
  100% { opacity:1; transform: scale(1) rotate(0); }
}

.btn-cta-large{
  font-size:1.1rem;
  padding:18px 22px;
  width:100%;
  max-width:380px;
}
.hero p.sub strong{
  color:var(--yellow);
  font-weight:700;
}

/* header logo image helper */
.logo-img{
  width:38px; height:38px;
  display:block;
}
.hero-tag{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--black);
  border:2px solid var(--yellow);
  color:var(--yellow);
  font-family:var(--label); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase;
  font-size:.72rem;
  padding:7px 14px;
  border-radius:30px;
  margin-bottom:22px;
}
.hero h1{
  font-family:var(--display);
  text-transform:uppercase;
  line-height:.96;
  font-size:clamp(2.6rem, 11vw, 5.2rem);
  letter-spacing:.01em;
}
.hero h1 .line1{color:var(--white); display:block;}
.hero h1 .line2{
  display:inline-block;
  color:var(--yellow);
  text-shadow: 3px 3px 0 rgba(0,0,0,.5);
  transform:skewX(-3deg);
}
.hero .badge-line{
  display:inline-block; margin-top:6px;
  background:var(--black);
  border-left:5px solid var(--yellow);
  color:var(--white);
  font-family:var(--display);
  text-transform:uppercase;
  font-size:clamp(1.3rem,5vw,2.1rem);
  padding:6px 16px 8px;
}
.hero p.sub{
  margin-top:22px;
  max-width:480px;
  color:#D8D3C8;
  font-size:1.05rem;
  line-height:1.55;
}
.hero-ctas{margin-top:34px; display:flex; flex-wrap:wrap; gap:14px; align-items:center;}
.hero-note{
  margin-top:16px;
  font-family:var(--label); font-size:.82rem; color:var(--gray);
  letter-spacing:.03em;
}

/* ================= SERVICII EXCAVATOR PANEL ================= */
.svc-panel{
  background:var(--black);
  color:var(--white);
  position:relative;
}
.svc-grid{
  display:grid;
  grid-template-columns:1fr;
}
.svc-text{padding:60px 20px 40px; max-width:var(--container); margin:0 auto; width:100%;}
.svc-text h2{
  font-family:var(--display);
  text-transform:uppercase;
  font-size:clamp(2rem,7vw,3rem);
  line-height:1;
}
.svc-text h2 .hl{color:var(--yellow);}
.checklist{margin-top:26px; display:flex; flex-direction:column; gap:13px;}
.checklist li{
  display:flex; align-items:flex-start; gap:12px;
  font-family:var(--label); font-weight:600;
  text-transform:uppercase;
  font-size:1rem;
  letter-spacing:.01em;
}
.checklist .tick{
  flex-shrink:0; width:24px; height:24px;
  border-radius:50%;
  border:2.5px solid var(--yellow);
  display:flex; align-items:center; justify-content:center;
  margin-top:1px;
}
.checklist .tick svg{width:13px; height:13px;}
.svc-photo{
  position:relative;
  min-height:260px;
  background-image:url('images/services-rubble.jpg');
  background-size:cover;
  background-position:center;
}
.svc-photo::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,14,14,.85), rgba(14,14,14,0) 35%, rgba(14,14,14,.15) 70%, rgba(14,14,14,.9));
}

/* ================= DIAGONAL STRIP CAROUSEL ================= */
.strip-wrap{
  background:var(--black);
  padding:14px 0 22px;
}
.strip-head{
  max-width:var(--container); margin:0 auto;
  padding:0 20px 16px;
  display:flex; align-items:baseline; justify-content:space-between;
}
.strip-head h3{
  font-family:var(--display); color:var(--white); text-transform:uppercase;
  font-size:1.5rem;
}
.strip-head span{color:var(--yellow);}
.strip-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  gap:2px;
  padding:0 0 4px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.strip-track::-webkit-scrollbar{display:none;}
.strip-card{
  position:relative;
  flex:0 0 78%;
  scroll-snap-align:start;
  aspect-ratio: 3/4;
  background-size:cover;
  background-position:center;
}
.strip-card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.92) 100%);
}
.strip-card .lbl{
  position:absolute; left:14px; bottom:14px; z-index:2;
  font-family:var(--display);
  color:var(--white);
  text-transform:uppercase;
  font-style:italic;
  transform:skewX(-6deg);
  font-size:1.4rem;
  border-bottom:4px solid var(--yellow);
  padding-bottom:4px;
}
.strip-dots{
  display:flex; justify-content:center; gap:7px; margin-top:14px;
}
.strip-dots button{
  width:8px; height:8px; border-radius:50%;
  background:var(--gray-dark);
  transition:background .2s, transform .2s;
}
.strip-dots button.active{background:var(--yellow); transform:scale(1.3);}

/* ================= SERVICES GRID (10 cards) ================= */
.grid-section{padding:64px 0 50px; background:var(--paper);}
.section-head{text-align:center; margin-bottom:40px;}
.section-head .rule{
  display:flex; align-items:center; gap:14px; justify-content:center;
  margin-bottom:10px;
}
.section-head .rule span{height:2px; width:46px; background:var(--yellow);}
.section-head h2{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.9rem,6vw,2.6rem);
}
.svc-grid-10{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
.svc-card{
  background:var(--white);
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 2px 14px rgba(0,0,0,.07);
  display:flex; flex-direction:column;
}
.svc-card .icon-row{
  display:flex; align-items:center; gap:10px;
  padding:13px 12px;
}
.icon-badge{
  flex-shrink:0;
  width:38px; height:38px;
  background:var(--yellow);
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
}
.icon-badge svg{width:21px; height:21px;}
.svc-card .icon-row h4{
  font-family:var(--label); font-weight:700;
  text-transform:uppercase;
  font-size:.74rem; line-height:1.18;
  letter-spacing:.01em;
}
.svc-card .photo{
  aspect-ratio:4/3;
  background-size:cover; background-position:center;
}

/* ================= CHECKLIST + BEFORE/AFTER ================= */
.proof-section{
  background:var(--black-soft);
  color:var(--white);
  padding:60px 0;
}
.proof-grid{display:grid; grid-template-columns:1fr; gap:40px;}
.proof-text h2{
  font-family:var(--display); text-transform:uppercase;
  color:var(--yellow);
  font-size:clamp(1.7rem,5.5vw,2.2rem);
  margin-bottom:22px;
}
.proof-list{display:flex; flex-direction:column; gap:12px;}
.proof-list li{
  display:flex; gap:11px; align-items:flex-start;
  font-size:.96rem; line-height:1.4; color:#E4E0D8;
}
.proof-list .tick{flex-shrink:0; width:20px; height:20px; margin-top:2px;}
.proof-list .tick svg{width:100%; height:100%;}

.ba-slider{
  position:relative;
  aspect-ratio:5/3.4;
  border-radius:8px;
  overflow:hidden;
  touch-action:none;
  user-select:none;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.ba-slider img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  pointer-events:none;
}
.ba-after{z-index:1;}
.ba-before-wrap{
  position:absolute; inset:0; z-index:2;
  overflow:hidden;
  width:50%;
}
.ba-before-wrap img{width:100%; height:100%; object-fit:cover;}
.ba-divider{
  position:absolute; top:0; bottom:0; left:50%; z-index:3;
  width:4px; background:var(--yellow);
  transform:translateX(-2px);
}
.ba-handle{
  position:absolute; top:50%; left:50%; z-index:4;
  width:46px; height:46px; border-radius:50%;
  background:var(--yellow);
  transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px rgba(0,0,0,.4);
  cursor:grab;
}
.ba-handle svg{width:20px; height:20px;}
.ba-tag{
  position:absolute; top:12px; z-index:4;
  font-family:var(--display); text-transform:uppercase;
  font-size:.78rem;
  background:var(--black); color:var(--yellow);
  padding:5px 12px;
  border-radius:3px;
}
.ba-tag.before{left:12px;}
.ba-tag.after{right:12px;}

/* ================= TEAM + FLEET ================= */
.team-section{padding:60px 0; background:var(--paper);}
.team-grid{display:grid; grid-template-columns:1fr; gap:30px; align-items:center;}
.team-photo-frame, .fleet-photo-frame{
  border-radius:6px; overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  aspect-ratio: 16/9;
}
.team-photo-frame img, .fleet-photo-frame img{
  width:100%; height:100%; object-fit:cover;
}
.team-text .eyebrow{color:var(--yellow-deep);}
.team-text h2{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.7rem,5.5vw,2.3rem);
  margin:8px 0 14px;
}
.team-text p{color:var(--gray-dark); line-height:1.6; font-size:1rem;}

/* ================= TRUST ICONS BANNER ================= */
.trust-banner{background:var(--black); padding:38px 0;}
.trust-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px;
  text-align:center;
}
.trust-item svg{width:30px; height:30px; color:var(--yellow);}
.trust-item p{
  margin-top:10px;
  font-family:var(--label); font-weight:600; text-transform:uppercase;
  font-size:.78rem; letter-spacing:.02em;
  color:var(--white);
}

/* ================= COVERAGE ================= */
.coverage{padding:54px 0; background:var(--paper); text-align:center;}
.coverage h2{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.6rem,5vw,2.1rem);
}
.coverage p.lead{margin-top:8px; color:var(--gray-dark);}
.chips{margin-top:22px; display:flex; flex-wrap:wrap; gap:9px; justify-content:center;}
.chip{
  font-family:var(--label); font-weight:600;
  font-size:.82rem;
  border:1.5px solid var(--black);
  padding:7px 14px;
  border-radius:30px;
}
.chip.active{background:var(--yellow); border-color:var(--yellow);}

/* ================= FINAL CTA ================= */
.final-cta{
  position:relative;
  background:var(--black);
  color:var(--white);
  overflow:hidden;
}
.final-bg{
  position:absolute; inset:0;
  background-image:url('images/cta-excavator.jpg');
  background-size:cover; background-position:left center;
  opacity:.55;
}
.final-bg::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,14,14,.55), rgba(14,14,14,.97) 75%);
}
.final-inner{
  position:relative; z-index:2;
  padding:70px 0 76px;
  text-align:center;
}
.final-inner .eyebrow{color:var(--white); display:block; margin-bottom:8px;}
.final-inner h2{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(2.4rem,10vw,3.6rem);
  line-height:1;
}
.final-inner h2 .y{color:var(--yellow);}
.final-check{
  display:inline-flex; margin-top:14px;
}
.final-check svg{width:34px; height:34px; color:var(--yellow);}
.final-inner .btn-call{
  margin-top:30px;
  font-size:1.5rem;
  padding:20px 36px;
}

/* ================= FOOTER ================= */
.site-footer{background:var(--black-soft); color:var(--white); padding:46px 0 26px;}
.footer-top{
  display:flex; flex-direction:column; gap:24px;
  padding-bottom:26px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-logo{font-family:var(--display); font-size:1.3rem; text-transform:uppercase;}
.footer-logo span{color:var(--yellow);}
.footer-contact{display:flex; flex-direction:column; gap:10px;}
.footer-contact a{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--label); font-weight:600; font-size:1.1rem;
}
.footer-contact .wa{color:#3CD25A;}
.footer-contact .ph{color:var(--yellow);}
.thanks{font-family:var(--script); font-size:1.6rem; color:var(--yellow); margin-top:4px;}
.footer-bottom{
  padding-top:20px;
  display:flex; flex-direction:column; gap:8px;
  font-size:.78rem; color:var(--gray);
}

/* ================= STICKY MOBILE ACTION BAR ================= */
.mobile-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; gap:8px;
  padding:10px 12px;
  background:var(--black);
  border-top:3px solid var(--yellow);
}
.mobile-bar .btn-call{
  flex:1;
  font-size:.95rem;
  padding:13px 10px;
  box-shadow:0 4px 0 var(--yellow-deep);
}
.mobile-bar .wa-btn{
  flex-shrink:0;
  width:50px;
  display:flex; align-items:center; justify-content:center;
  background:#25D366;
  border-radius:var(--radius);
}
.mobile-bar .wa-btn svg{width:24px; height:24px; fill:#fff;}
body{padding-bottom:78px;}

/* desktop: hide mobile bar, show nothing extra */
@media (min-width: 860px){
  .mobile-bar{display:none;}
  body{padding-bottom:0;}
}

/* ================= RESPONSIVE: tablet/desktop ================= */
@media (min-width: 640px){
  .trust-grid{grid-template-columns:repeat(5,1fr);}
  .svc-grid-10{grid-template-columns:repeat(3,1fr);}
}

@media (min-width: 860px){
  .hero-inner{
    padding:140px 0 110px;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:50px;
    align-items:center;
  }
  .hero-visual{
    order:2;
    margin-bottom:0;
  }
  .hero-logo{ width:min(440px, 100%); }
  .hero-content{ order:1; }
  .btn-cta-large{ width:auto; max-width:none; }

  .svc-grid{grid-template-columns:1fr 1fr;}
  .svc-text{padding:70px 50px; text-align:left;}
  .svc-photo{min-height:auto;}
  .strip-card{flex:0 0 19.5%;}
  .strip-dots{display:none;}
  .svc-grid-10{grid-template-columns:repeat(5,1fr);}
  .proof-grid{grid-template-columns:1.1fr 1fr; align-items:center;}
  .team-grid{grid-template-columns:1fr 1fr;}
  .chips{max-width:760px; margin-left:auto; margin-right:auto;}
  .footer-top{flex-direction:row; justify-content:space-between; align-items:flex-start;}
  .footer-top > div:first-child{max-width:420px;}
}

@media (min-width: 1100px){
  .hero h1{font-size:5.4rem;}
}

/* ============================================================
   HIGH-IMPACT ANIMATIONS
   ============================================================ */

/* ---------- 1) INTRO OVERLAY ---------- */
body.intro-active{ overflow:hidden; }
.intro{
  position:fixed; inset:0; z-index:9999;
  background:radial-gradient(ellipse at center, #1A1A1A 0%, var(--black) 70%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px;
  overflow:hidden;
  animation: introExit .5s ease 1.5s forwards;
}
.intro.skip{ animation: introExit .3s ease forwards; }
.intro-bg-tape{
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(135deg,
    transparent 0 60px,
    rgba(240,172,0,.08) 60px 80px);
  opacity:0;
  animation: tapeIn .4s ease .1s forwards;
}
.intro-logo{
  position:relative; z-index:3;
  width: min(360px, 56vw);
  height: auto;
  opacity:0;
  transform: scale(.3) rotate(-15deg);
  filter: drop-shadow(0 20px 30px rgba(0,0,0,.5));
  animation: logoSlam .55s cubic-bezier(.35, 1.7, .4, 1) .15s forwards,
             logoFloat 3s ease-in-out .75s infinite alternate;
}
.intro-title{
  position:relative; z-index:3;
  font-family:var(--display);
  text-transform:uppercase;
  font-size:clamp(1.4rem, 5.5vw, 2.5rem);
  color:var(--yellow);
  text-shadow: 3px 3px 0 #000;
  letter-spacing:.04em;
  text-align:center;
  line-height:.95;
  opacity:0;
  transform: translateY(20px);
  animation: fadeUp .45s ease .7s forwards;
}
.intro-title small{
  display:block;
  font-family:var(--label);
  font-weight:600;
  font-size:.42em;
  letter-spacing:.3em;
  color:var(--paper);
  text-shadow:none;
  margin:6px 0;
}
.intro-flash{
  position:absolute; inset:0;
  background:var(--paper);
  opacity:0;
  pointer-events:none;
  animation: flashBurst .32s ease .25s forwards;
}
.intro-dust{
  position:absolute; inset:0;
  pointer-events:none;
  overflow:hidden;
}
.intro-dust span{
  position:absolute;
  width:6px; height:6px;
  background:var(--yellow);
  border-radius:50%;
  top:50%;
  left:50%;
  opacity:0;
  animation: dustBurst .9s cubic-bezier(.2,.6,.4,1) .35s forwards;
}

@keyframes logoSlam {
  0%   { opacity:0; transform: scale(.3) rotate(-15deg); }
  55%  { opacity:1; transform: scale(1.08) rotate(3deg); }
  75%  { transform: scale(.97) rotate(-1deg); }
  100% { opacity:1; transform: scale(1) rotate(0); }
}
@keyframes logoFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-8px); }
}
@keyframes flashBurst {
  0%   { opacity:0; }
  40%  { opacity:.85; }
  100% { opacity:0; }
}
@keyframes tapeIn {
  to { opacity:1; }
}
@keyframes dustBurst {
  0%   { opacity:0; transform: translate(-50%,-50%) scale(.4); }
  20%  { opacity:1; }
  100% { opacity:0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -180px))) scale(1.4); }
}
@keyframes introExit {
  to { opacity:0; visibility:hidden; }
}
@keyframes fadeUp {
  from { opacity:0; transform: translateY(15px); }
  to   { opacity:1; transform: translateY(0); }
}

/* impact shake the page receives when intro slams */
@keyframes pageShake {
  0%, 100% { transform: translate3d(0,0,0); }
  20% { transform: translate3d(-6px,3px,0); }
  40% { transform: translate3d(5px,-3px,0); }
  60% { transform: translate3d(-3px,2px,0); }
  80% { transform: translate3d(3px,-1px,0); }
}
body.shake main{
  animation: pageShake .35s cubic-bezier(.36,.07,.19,.97);
}

/* ---------- 2) HERO TEXT SLAM-IN ---------- */
.hero-tag{
  opacity:0;
  animation: fadeUp .5s ease 1.1s forwards;
}
.hero h1 .word{
  display:inline-block;
  opacity:0;
  transform: translateY(-90px) rotate(-3deg);
  animation: slamWord .5s cubic-bezier(.4,1.7,.4,1) forwards;
}
.hero h1 .word.w1{ animation-delay:1.3s; }
.hero h1 .word.w2{ animation-delay:1.42s; color:var(--yellow); text-shadow: 3px 3px 0 rgba(0,0,0,.5); }
.hero h1 .word.w3{ animation-delay:1.54s; }
.hero h1 .word.w4{ animation-delay:1.66s; color:var(--yellow); text-shadow: 3px 3px 0 rgba(0,0,0,.5); }
.hero p.sub{
  opacity:0;
  animation: fadeUp .5s ease 1.9s forwards;
}
.hero-ctas{
  opacity:0;
  animation: fadeUp .5s ease 2.1s forwards;
}
.hero-note{
  opacity:0;
  animation: fadeUp .5s ease 2.3s forwards;
}

@keyframes slamWord {
  60%  { opacity:1; transform: translateY(10px) rotate(1deg); }
  100% { opacity:1; transform: translateY(0) rotate(0); }
}
@keyframes paintIn {
  to { opacity:1; transform: scaleX(1); }
}

/* ---------- 3) KEN BURNS BACKGROUND ---------- */
.hero-bg{
  animation: kenBurns 22s ease-in-out infinite alternate;
}
@keyframes kenBurns {
  from { transform: scale(1) translateX(0); }
  to   { transform: scale(1.12) translateX(-4%); }
}

/* ---------- 4) HERO CHEVRONS PULSE ---------- */
.hero-chevrons path:nth-child(1){ animation: chevPulse 2s ease-in-out infinite; }
.hero-chevrons path:nth-child(2){ animation: chevPulse 2s ease-in-out .3s infinite; }
.hero-chevrons path:nth-child(3){ animation: chevPulse 2s ease-in-out .6s infinite; }
@keyframes chevPulse {
  0%,100% { opacity:.15; transform: translateX(0); }
  50%     { opacity:.6;  transform: translateX(6px); }
}

/* ---------- 5) DUST AMBIENT PARTICLES ---------- */
.hero-dust{
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.hero-dust span{
  position:absolute;
  bottom:-10px;
  width:5px; height:5px;
  background:var(--yellow);
  border-radius:50%;
  opacity:0;
  animation: drift linear infinite;
}
@keyframes drift {
  0%   { transform: translateY(0) translateX(0); opacity:0; }
  15%  { opacity:.65; }
  85%  { opacity:.4; }
  100% { transform: translateY(-110vh) translateX(var(--drift, 30px)); opacity:0; }
}

/* ---------- 6) PULSING GLOW ON PHONE BUTTON ---------- */
.btn-call{
  position:relative;
  overflow:visible;
}
.btn-call::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  box-shadow: 0 0 0 0 rgba(240,172,0,.6);
  animation: ctaPing 2.2s cubic-bezier(.2,.6,.4,1) infinite;
  pointer-events:none;
}
@keyframes ctaPing {
  0%   { box-shadow: 0 0 0 0 rgba(240,172,0,.55); }
  70%  { box-shadow: 0 0 0 20px rgba(240,172,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(240,172,0,0); }
}
.btn-call svg{
  animation: phoneWiggle 2.6s ease-in-out infinite;
  transform-origin: 50% 50%;
}
@keyframes phoneWiggle {
  0%, 60%, 100% { transform: rotate(0); }
  65% { transform: rotate(-18deg); }
  70% { transform: rotate(15deg); }
  75% { transform: rotate(-10deg); }
  80% { transform: rotate(8deg); }
  85% { transform: rotate(0); }
}

/* ---------- 7) SCROLL INDICATOR ---------- */
.scroll-indicator{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:5;
  display:flex; flex-direction:column; align-items:center;
  gap:6px;
  opacity:0;
  animation: fadeUp .5s ease 2.6s forwards, bounce 1.8s ease 3s infinite;
  font-family:var(--label);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--yellow);
}
.scroll-indicator svg{ width:18px; height:18px; }
@keyframes bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 10px); }
}

/* ---------- 8) MARQUEE STRIP ---------- */
.marquee{
  background:var(--yellow);
  color:var(--black);
  padding:18px 0;
  overflow:hidden;
  border-top:3px solid var(--black);
  border-bottom:3px solid var(--black);
  position:relative;
}
.marquee::before, .marquee::after{
  content:"";
  position:absolute; top:0; bottom:0;
  width:60px; z-index:2;
  pointer-events:none;
}
.marquee::before{ left:0; background:linear-gradient(90deg, var(--yellow), rgba(240,172,0,0)); }
.marquee::after { right:0; background:linear-gradient(-90deg, var(--yellow), rgba(240,172,0,0)); }
.marquee-track{
  display:flex;
  white-space:nowrap;
  animation: scroll 28s linear infinite;
  will-change:transform;
}
.marquee-track:hover{ animation-play-state:paused; }
.marquee-track span{
  font-family:var(--display);
  font-size:clamp(1.4rem, 4.5vw, 2.3rem);
  text-transform:uppercase;
  padding:0 22px;
  display:inline-flex; align-items:center; gap:18px;
}
.marquee-track span::after{
  content:"";
  width:9px; height:9px;
  border-radius:50%;
  background:var(--black);
}
@keyframes scroll {
  to { transform: translateX(-50%); }
}

/* ---------- 9) SERVICE CARDS HOVER LIFT ---------- */
.svc-card{
  transition: transform .25s ease, box-shadow .25s ease;
}
@media (hover:hover){
  .svc-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(0,0,0,.18);
  }
  .svc-card:hover .photo{ filter: brightness(1.05); }
}

/* ---------- 10) FINAL CHECKMARK DRAW-IN ---------- */
.final-check svg{
  width:54px; height:54px;
  color: var(--yellow);
}
.final-check svg rect{
  stroke-dasharray:76; stroke-dashoffset:76;
}
.final-check svg polyline{
  stroke-dasharray:24; stroke-dashoffset:24;
}
.final-cta.in-view .final-check svg rect{
  animation: drawStroke .55s cubic-bezier(.4,.7,.3,1) .15s forwards;
}
.final-cta.in-view .final-check svg polyline{
  animation: drawStroke .45s cubic-bezier(.4,.7,.3,1) .7s forwards;
}
@keyframes drawStroke {
  to { stroke-dashoffset: 0; }
}

/* ---------- 11) DIAGONAL STRIP TILT ON HOVER ---------- */
.strip-card{ transition: transform .3s ease; }
@media (hover:hover){
  .strip-card:hover{ transform: scale(1.03); z-index:2; }
}
.strip-card .lbl{
  transition: border-bottom-color .2s ease, transform .25s ease;
}
@media (hover:hover){
  .strip-card:hover .lbl{ transform: skewX(-6deg) translateY(-3px); border-bottom-color: var(--yellow-bright); }
}

/* ---------- 12) REDUCED MOTION KILL SWITCH ---------- */
@media (prefers-reduced-motion: reduce){
  .intro{ animation: introExit .2s ease 0s forwards; }
  .intro-logo, .intro-title, .intro-flash, .intro-dust span{ animation:none; opacity:1; transform:none; }
  .hero h1 .word, .hero p.sub, .hero-ctas, .hero-tag, .hero-note,
  .scroll-indicator, .hero-logo{ opacity:1; transform:none; animation:none; }
  .hero-bg, .marquee-track, .btn-call::after, .btn-call svg, .hero-chevrons path,
  .hero-dust span{ animation:none; }
}