:root{--hero-full: 100dvh; --hero-shrunk: 60vh; --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);}
*, *::before, *::after{margin: 0; padding: 0; box-sizing: border-box;}
html{scroll-behavior: smooth; font-size:var(--fs-root); overflow-x: hidden;}
body{font-family: var(--font-body);
  color:var(--display-ink);
  background:var(--display-surface);
  line-height: 1.6;
  overflow-x: hidden;}
.container{max-width: var(--container); margin: 0 auto; padding: 0 2rem;}
.nav{position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-height); display: flex; align-items: center; padding: 0 2rem;
  transition: background 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
  
  background: linear-gradient(to bottom, var(--c-0f141e-a82), var(--c-0f141e-a68));}
.nav.scrolled{background: var(--charcoal-a95);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 40px var(--black-a15);}
.nav-inner{max-width: var(--container); width: 100%; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;}
.nav-logo img{height: 44px; width: auto;}
.nav-links{display: flex; align-items: center; gap: 0.25rem; list-style: none;}
.nav-links a{font-family: var(--font-display); font-size: var(--fs-0_8rem); font-weight: 500;
  color: var(--white-a85); padding: 0.5rem 0.75rem; border-radius: 6px;
  transition: all 0.25s ease; letter-spacing: 0.02em;}
.nav-cta{font-family: var(--font-display) !important; font-size: var(--fs-0_8rem) !important;
  font-weight: 600 !important; color: var(--white) !important;
  background: var(--cta-bg) !important; padding: 0.6rem 1.25rem !important;
  border-radius: 8px !important; transition: all 0.3s var(--ease-out-expo) !important;
  white-space: nowrap;}
@media (hover: hover) and (pointer: fine){.nav-cta:hover{background: var(--cta-bg-hover) !important; transform: translateY(-1px);
  box-shadow: 0 4px 20px var(--orange-a30);}}
.hero{position: relative; width: 100%; height: var(--hero-full);
  overflow: hidden; transition: height 0.8s var(--ease-out-expo);
  contain: layout style;
  will-change: height;}
.hero.shrunk{height: var(--hero-shrunk);}
.hero-slide{position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 2.2s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;}
.hero-slide.active{opacity: 1;}
.hero-slide.fading-out{opacity: 0;}
.hero-slide img{width: 100%; height: 100%; object-fit: cover; object-position: center;
  will-change: transform;
  animation: none;}
.hero-slide.active img{animation: kenBurns 8s ease-out forwards;}
.hero-slide video{width: 100%; height: 100%; object-fit: cover; object-position: center;}
@keyframes kenBurns {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}
.hero-overlay{position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg,
    var(--charcoal-a45) 0%, var(--charcoal-a25) 40%,
    var(--charcoal-a50) 80%, var(--charcoal-a85) 100%);}
.hero-grain{position: absolute; inset: 0; z-index: 3; opacity: 0.06; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;}
.hero-particles{position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden;}
.dust{position: absolute; width: 3px; height: 3px;
  background: var(--white-a40); border-radius: 50%;
  animation: dustFloat linear infinite;}
@keyframes dustFloat {
  0% { transform: translateY(100vh) translateX(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 0.6; }
  100% { transform: translateY(-10vh) translateX(80px) rotate(360deg); opacity: 0; }
}
.hero-light-leak{position: absolute; top: -20%; right: -10%; width: 60%; height: 60%;
  background: radial-gradient(ellipse, var(--orange-a08) 0%, transparent 70%);
  z-index: 3; animation: lightLeak 12s ease-in-out infinite alternate; pointer-events: none;}
@keyframes lightLeak {
  0% { transform: translate(0,0) scale(1); opacity: 0.6; }
  100% { transform: translate(-5%,10%) scale(1.2); opacity: 0.3; }
}
.hero-content{position: absolute; bottom: 0; left: 0; right: 0; z-index: 10;
  padding: 0 2rem 4rem; max-width: var(--container); margin: 0 auto;}
.hero-title{font-family: var(--font-display); font-size: var(--fs-fluid-10);
  font-weight: 800; color: var(--white); line-height: 1.05;
  max-width: 800px; margin-bottom: 1.25rem;}
.hero-title .word{display: inline-block;
  opacity: 1;
  transform: translateY(40px) rotateX(-15deg);
  animation: wordReveal 0.7s var(--ease-out-expo) forwards;}
@keyframes wordReveal {
  from { transform: translateY(40px) rotateX(-15deg); }
  to { transform: translateY(0) rotateX(0); }
}
.hero-title .accent{color: var(--orange);}
.shimmer{background: linear-gradient(
    90deg, var(--orange) 0%, var(--c-ffd700) 35%, var(--orange) 70%, var(--c-ffd700) 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerSweep 4s ease-in-out infinite;}
@keyframes shimmerSweep {
  0% { background-position: 100% 0; }
  50% { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}
.hero-sub{font-size: var(--fs-1_15rem); color: var(--white-a75);
  max-width: 560px; line-height: 1.6; margin-bottom: 2rem;
  opacity: 1; animation: fadeInUp 0.8s 1.2s var(--ease-out-expo) forwards;}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-actions{display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  opacity: 0; animation: fadeInUp 0.8s 1.5s var(--ease-out-expo) forwards;}
.btn-primary{display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-size: var(--fs-0_95rem); font-weight: 600;
  color: var(--white); background:var(--cta-bg);
  padding: 1rem 2rem; border-radius: 10px; border: none; cursor: pointer;
  transition: all 0.3s var(--ease-out-expo); text-decoration: none;}
@media (hover: hover) and (pointer: fine){.btn-primary:hover{background:var(--cta-bg-hover); transform: translateY(-2px);
  box-shadow: 0 8px 30px var(--orange-a35);}}
.btn-secondary{display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-size: var(--fs-0_95rem); font-weight: 600;
  color: var(--white); background: transparent;
  padding: 1rem 2rem; border-radius: 10px; border: 1.5px solid var(--white-a30);
  cursor: pointer; transition: all 0.3s ease; text-decoration: none;}
@media (hover: hover) and (pointer: fine){.btn-secondary:hover{border-color: var(--white); background: var(--white-a08);}}
.hero-pause-toggle{position: absolute; bottom: 1.5rem; right: 1.5rem; z-index: 5;
  width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--white-a40);
  background: var(--c-0f141e-a50); color: var(--white); display: flex;
  align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.2s, border-color 0.2s;}
.hero-pause-toggle:focus-visible{background: var(--c-0f141e-a75); border-color: var(--white-a70);}
@media (hover: hover) and (pointer: fine){.hero-pause-toggle:hover{background: var(--c-0f141e-a75); border-color: var(--white-a70);}}
.hero-pause-toggle.is-paused .icon-pause{display: none;}
.hero-pause-toggle.is-paused .icon-play{display: block !important;}
@media (max-width: 768px){.hero-pause-toggle{bottom: 1rem; right: 1rem;}}
.dci-clip{clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);}
.dci-notch{position: relative;}
.dci-notch::after{content: ""; position: absolute; bottom: 0; right: 0;
  width: 28px; height: 28px; background: var(--orange);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);}
.dci-block-accent{position: relative; padding-left: 1rem;}
.dci-block-accent::before{content: ""; position: absolute; top: 0; left: -4px;
  width: 4px; height: 12px; background: var(--orange);}
.parallax-layer{position: absolute; pointer-events: none; will-change: transform;}
.parallax-fg{z-index: 5;}
.parallax-mg{z-index: 2;}
.parallax-bg{z-index: 0;}
.geo-shape{position: absolute; pointer-events: none; will-change: transform;}
.geo-shape--triangle{width: 0; height: 0;
  border-left: 30px solid transparent; border-right: 30px solid transparent;
  border-bottom: 52px solid var(--blue);
  opacity: 0.06;}
.geo-shape--rect{width: 80px; height: 24px;
  background: var(--orange);
  opacity: 0.04;
  transform: rotate(-12deg);}
.geo-shape--ring{width: 100px; height: 100px;
  border: 3px solid var(--blue);
  border-radius: 50%;
  opacity: 0.05;}
.geo-shape--dci-notch{width: 60px; height: 60px;
  border: 2px solid var(--orange);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
  opacity: 0.06;}
.geo-shape--dot-grid{width: 120px; height: 120px;
  background-image: radial-gradient(circle, var(--blue) 1.5px, transparent 1.5px);
  background-size: 16px 16px;
  opacity: 0.06;}
.stats-bar{background: var(--charcoal); padding: 3rem 2rem;
  position: relative; overflow: hidden;}
.stats-grid{max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
  position: relative; z-index: 1;}
.stat-item{text-align: center; position: relative;}
.stat-item + .stat-item::before{content: ""; position: absolute; left: -1rem; top: 15%;
  height: 70%; width: 1px; background: var(--white-a12);}
.stat-number{font-family: var(--font-display); font-size: var(--fs-2_75rem); font-weight: 800;
  color: var(--white); line-height: 1; margin-bottom: 0.25rem;}
.stat-number .orange{color: var(--orange);}
.stat-label{font-family: var(--font-mono); font-size: var(--fs-0_7rem); color:var(--gray-light);
  letter-spacing: 0.12em; text-transform: uppercase;}
section{padding: 6rem 0; position: relative; overflow: hidden;}
.section-title{font-family: var(--font-display); font-size: var(--fs-fluid-11);
  font-weight: 700; color:var(--display-ink); line-height: 1.15; margin-bottom: 1rem;}
.section-title .blue{color:var(--display-link);}
.section-title .orange{color: var(--orange);}
.section-desc{font-size: var(--fs-1_05rem); color:var(--display-muted); max-width: 600px;
  line-height: 1.7; margin-bottom: 3rem;}
.services{position: relative; overflow: hidden;}
.industries{position: relative; overflow: hidden;}

.services{background:var(--display-surface-soft);}
.services-bento{display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1.25rem;}
.service-card{background:var(--display-surface); border-radius: 16px; overflow: hidden;
  position: relative; transition: all 0.4s var(--ease-out-expo); cursor: pointer;}
@media (hover: hover) and (pointer: fine){.service-card:hover{transform: translateY(-4px); box-shadow: 0 20px 60px var(--black-a08);}}
.service-card.featured{grid-row: 1 / 3;}
.service-card-img{width: 100%; height: 200px; object-fit: cover;
  transition: transform 0.6s var(--ease-out-expo);}
.service-card.featured .service-card-img{height: 100%; min-height: 440px;}
@media (hover: hover) and (pointer: fine){.service-card:hover .service-card-img{transform: scale(1.04);}}
.service-card-content{padding: 1.5rem;}
.service-card.featured .service-card-content{position: absolute; bottom: 0; left: 0; right: 0; padding: 2.5rem;
  background: linear-gradient(transparent, var(--charcoal-a92)); color: var(--white);}
.service-card-title{font-family: var(--font-display); font-size: var(--fs-1_15rem); font-weight: 700;
  margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem;}
.service-card.featured .service-card-title{font-size: var(--fs-1_5rem); color: var(--white);}
.service-card-title .dci-icon{width: 28px; height: 28px; background: var(--blue); border-radius: 6px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);}
.service-card-text{font-size: var(--fs-0_9rem); color:var(--display-muted); line-height: 1.6;}
.service-card.featured .service-card-text{color: var(--white-a70);}
.service-card-link{display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--font-display); font-size: var(--fs-0_82rem); font-weight: 600;
  color:var(--display-link); margin-top: 0.75rem; transition: gap 0.3s ease;}
.service-card.featured .service-card-link{color: var(--orange);}
@media (hover: hover) and (pointer: fine){.service-card:hover .service-card-link{gap: 0.65rem;}}
.services-row-bottom{grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;}
.projects{background:var(--display-surface);}
.projects-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;}
.project-card{position: relative; border-radius: 16px; overflow: hidden;
  aspect-ratio: 4/3; cursor: pointer;}
.project-card img{width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease-out-expo);}
@media (hover: hover) and (pointer: fine){.project-card:hover img{transform: scale(1.06);}}
.project-card-overlay{position: absolute; inset: 0;
  background: linear-gradient(transparent 40%, var(--charcoal-a85) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.5rem; transition: background 0.3s ease;}
@media (hover: hover) and (pointer: fine){.project-card:hover .project-card-overlay{background: linear-gradient(transparent 20%, var(--blue-a85) 100%);}}
.project-type{font-family: var(--font-mono); font-size: var(--fs-0_65rem); color: var(--orange);
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.25rem;}
.project-name{font-family: var(--font-display); font-size: var(--fs-1_1rem); font-weight: 700; color: var(--white);}
.project-card::after{content: ""; position: absolute; top: 12px; right: 12px;
  width: 20px; height: 20px; border: 2px solid var(--white-a30);
  clip-path: polygon(0 0, 100% 0, 100% 100%); transition: border-color 0.3s ease;}
@media (hover: hover) and (pointer: fine){.project-card:hover::after{border-color: var(--orange);}}
.project-lightbox{position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: var(--charcoal-a00);
  opacity: 0; pointer-events: none;
  transition: background 0.5s ease, opacity 0.4s ease;
  padding: 2rem;}
.project-lightbox.open{opacity: 1; pointer-events: all;
  background: var(--charcoal-a92);}
.project-lightbox-inner{position: relative;
  max-width: 900px; width: 100%;
  border-radius: 20px; overflow: hidden;
  background: var(--charcoal);
  transform: scale(0.85) translateY(30px);
  transition: transform 0.5s var(--ease-out-expo);
  box-shadow: 0 40px 100px var(--black-a50);}
.project-lightbox.open .project-lightbox-inner{transform: scale(1) translateY(0);}
.project-lightbox-image{width: 100%; aspect-ratio: 16/9; overflow: hidden;}
.project-lightbox-image img{width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s var(--ease-out-expo);}
.project-lightbox.open .project-lightbox-image img{transform: scale(1.02);}
.project-lightbox-details{padding: 2rem 2.5rem 2.5rem;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.6s var(--ease-out-expo) 0.2s, opacity 0.5s ease 0.2s;}
.project-lightbox.open .project-lightbox-details{transform: translateY(0); opacity: 1;}
.project-lightbox-type{font-family: var(--font-mono); font-size: var(--fs-0_7rem);
  color: var(--orange); letter-spacing: 0.15em;
  text-transform: uppercase; margin-bottom: 0.5rem;
  display: flex; align-items: center; gap: 0.5rem;}
.project-lightbox-type::before{content: ""; width: 20px; height: 2px; background: var(--orange);}
.project-lightbox-name{font-family: var(--font-display); font-size: var(--fs-1_75rem);
  font-weight: 700; color: var(--white); margin-bottom: 0.75rem;}
.project-lightbox-desc{font-size: var(--fs-0_95rem); color: var(--gray-light); line-height: 1.7;
  margin-bottom: 1.25rem;}
.project-lightbox-meta{display: flex; gap: 2rem; flex-wrap: wrap;}
.project-lightbox-meta-item{display: flex; flex-direction: column; gap: 0.15rem;}
.project-lightbox-meta-label{font-family: var(--font-mono); font-size: var(--fs-0_65rem);
  color:var(--display-muted); letter-spacing: 0.1em; text-transform: uppercase;}
.project-lightbox-meta-value{font-family: var(--font-display); font-size: var(--fs-0_95rem);
  font-weight: 600; color: var(--white);}
.project-lightbox-close{position: absolute; top: 1rem; right: 1rem; z-index: 10;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--charcoal-a70); border: 1px solid var(--white-a15);
  color: var(--white); font-size: var(--fs-1_25rem);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; backdrop-filter: blur(8px);
  transition: background 0.3s, transform 0.3s;}
@media (hover: hover) and (pointer: fine){.project-lightbox-close:hover{background: var(--orange); transform: scale(1.05);}}
@media (max-width: 640px){.project-lightbox{padding: 1rem;}}
@media (max-width: 640px){.project-lightbox-inner{border-radius: 14px;}}
@media (max-width: 640px){.project-lightbox-details{padding: 1.25rem 1.5rem 1.75rem;}}
@media (max-width: 640px){.project-lightbox-name{font-size: var(--fs-1_35rem);}}
@media (max-width: 640px){.project-lightbox-meta{gap: 1.25rem;}}
.why-drake{background: var(--charcoal); color: var(--white); overflow: hidden;}
.why-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;}
.why-image-stack{position: relative; height: 500px;}
.why-img-main{width: 85%; height: 380px; object-fit: cover; border-radius: 16px;
  position: relative; z-index: 2;}
.why-img-accent{position: absolute; bottom: 0; right: 0; width: 55%; height: 240px;
  object-fit: cover; border-radius: 12px; border: 4px solid var(--charcoal); z-index: 3;}
.why-image-stack::before{content: ""; position: absolute; top: -20px; left: -20px;
  width: 100px; height: 100px; border: 3px solid var(--blue); opacity: 0.3;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%); z-index: 1;}
.why-image-stack::after{content: ""; position: absolute; bottom: 20px; left: 40%;
  width: 60px; height: 60px; background: var(--orange); opacity: 0.15;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%); z-index: 1;}
.why-content{position: relative; z-index: 2;}
.why-features{display: flex; flex-direction: column; gap: 1.75rem; margin-top: 2rem;}
.why-feature{display: flex; gap: 1rem; align-items: flex-start;}
.why-feature-icon{width: 44px; height: 44px; min-width: 44px;
  background: var(--blue-a15); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-1_2rem);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);}
.why-feature h3{font-family: var(--font-display); font-size: var(--fs-1rem); font-weight: 600; margin-bottom: 0.2rem;}
.why-feature p{font-size: var(--fs-0_88rem); color: var(--gray-light); line-height: 1.5;}
.industries{background:var(--display-surface-soft);}
.industries-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;}
.industry-card{background:var(--display-surface); border-radius: 14px; padding: 2rem 1.5rem;
  position: relative; overflow: hidden; transition: all 0.35s var(--ease-out-expo);
  border: 1px solid transparent;}
@media (hover: hover) and (pointer: fine){.industry-card:hover{border-color: var(--blue); transform: translateY(-3px);
  box-shadow: 0 12px 40px var(--black-a06);}}
.industry-icon{margin-bottom: 1rem; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue); border-radius: 8px; flex-shrink: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);}
.industry-card h3{font-family: var(--font-display); font-size: var(--fs-1_05rem); font-weight: 700; margin-bottom: 0.4rem;}
.industry-card p{font-size: var(--fs-0_88rem); color:var(--display-muted); line-height: 1.55;}
.industry-card::after{content: ""; position: absolute; bottom: 0; right: 0; width: 32px; height: 32px;
  background: var(--blue-a05); clip-path: polygon(100% 0, 100% 100%, 0 100%);
  transition: background 0.3s ease;}
@media (hover: hover) and (pointer: fine){.industry-card:hover::after{background: var(--orange-a10);}}
.fresno-section{background:var(--display-surface); position: relative;}
.fresno-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;}
.fresno-image{position: relative; border-radius: 16px; overflow: hidden;}
.fresno-image img{width: 100%; height: 400px; object-fit: cover; border-radius: 16px;}
.fresno-image::after{content: ""; position: absolute; bottom: -1px; right: -1px;
  width: 80px; height: 80px; background:var(--display-surface);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);}
.fresno-content .section-desc{margin-bottom: 1.5rem;}
.fresno-highlights{display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2rem;}
.fresno-highlight{display: flex; align-items: center; gap: 0.6rem; font-size: var(--fs-0_92rem); color:var(--display-ink);}
.fresno-highlight .check{width: 20px; height: 20px; min-width: 20px;
  background: var(--blue-a10); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-0_65rem); color:var(--display-link);}
.process{background:var(--display-surface-soft);}
.process-steps{display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative;}
.process-steps::before{content: ""; position: absolute; top: 28px; left: 12.5%; right: 12.5%;
  height: 2px; background: linear-gradient(90deg, var(--blue), var(--orange)); z-index: 0;}
.process-step{text-align: center; position: relative; z-index: 1; padding: 0 1rem;}
.step-number{width: 56px; height: 56px; margin: 0 auto 1.25rem;
  background:var(--display-surface); border: 3px solid var(--blue); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: var(--fs-1_1rem); font-weight: 800;
  color:var(--display-link); position: relative;}
.process-step:last-child .step-number{border-color: var(--orange); color: var(--orange);}
.process-step h3{font-family: var(--font-display); font-size: var(--fs-1rem); font-weight: 700; margin-bottom: 0.4rem;}
.process-step p{font-size: var(--fs-0_85rem); color:var(--display-muted); line-height: 1.5;}
.reviews{background: var(--charcoal); color: var(--white); padding: 5rem 0;
  position: relative; overflow: hidden;}
.reviews-header{text-align: center; margin-bottom: 3rem;}
.reviews-header .section-title{color: var(--white);}
.google-badge{display: inline-flex; align-items: center; gap: 0.75rem;
  background: var(--white-a06); border: 1px solid var(--white-a10);
  border-radius: 12px; padding: 0.75rem 1.5rem; margin-bottom: 2rem;}
.google-badge-icon{width: 36px; height: 36px; border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  font-size: var(--fs-1_4rem);}
.google-badge-text{font-family: var(--font-display); font-size: var(--fs-0_85rem); color: var(--gray-light);}
.google-badge-text strong{display: block; color: var(--white); font-size: var(--fs-1_1rem);}
.google-badge-stars{color: var(--c-fbbc04); font-size: var(--fs-1_1rem); letter-spacing: 0.05em;}
.reviews-grid{max-width: 900px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;}
.review-card{background: var(--charcoal-light); border-radius: 20px; padding: 2.5rem;
  border: 1px solid var(--white-a06); position: relative;
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);}
@media (hover: hover) and (pointer: fine){.review-card:hover{transform: translateY(-4px);
  box-shadow: 0 20px 60px var(--black-a20);}}
.review-stars{color: var(--c-fbbc04); font-size: var(--fs-1_1rem); margin-bottom: 1.25rem; letter-spacing: 0.1em;}
.review-stars svg, .google-badge-stars svg{vertical-align: -0.1em;}
.review-quote{font-size: var(--fs-1_1rem); color: var(--white-a90); line-height: 1.7;
  margin-bottom: 1.5rem; font-style: italic; position: relative;
  padding-left: 1.5rem;}
.review-quote::before{content: "“"; position: absolute; left: -0.25rem; top: -0.5rem;
  font-size: var(--fs-3_5rem); color:var(--display-link); opacity: 0.3;
  font-family: var(--font-display); font-style: normal; line-height: 1;}
.review-author{display: flex; align-items: center; gap: 0.75rem;
  border-top: 1px solid var(--white-a08); padding-top: 1.25rem;}
.review-avatar{width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: var(--fs-1rem); font-weight: 700; color: var(--white);}
.review-author-info{flex: 1;}
.review-author-name{font-family: var(--font-display); font-size: var(--fs-0_9rem); font-weight: 600; color: var(--white);}
.review-author-meta{font-size: var(--fs-0_75rem); color:var(--gray-light); line-height: 1.4;}
.cta-banner{background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
  padding: 5rem 0; position: relative; overflow: hidden;}
.cta-inner{text-align: center; position: relative; z-index: 2;}
.cta-inner .section-title{color: var(--white); margin-bottom: 0.75rem;}
.cta-inner .section-desc{color: var(--white-a70); max-width: 500px; margin: 0 auto 2rem;}
.cta-inner .btn-primary{font-size: var(--fs-1_05rem); padding: 1.1rem 2.5rem;}
.cta-phone{font-family: var(--font-display); font-size: var(--fs-1rem);
  color: var(--white-a70); margin-top: 1.25rem;}
.cta-phone a{color: var(--white); font-weight: 600;
  border-bottom: 1px solid var(--white-a30); transition: border-color 0.2s ease;}
@media (hover: hover) and (pointer: fine){.cta-phone a:hover{border-color: var(--white);}}
.cta-form{max-width:560px;margin:0 auto 1.5rem;text-align:left}
.cta-form-row{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin-bottom:0.75rem}
.cta-form input,.cta-form select,.cta-form textarea{width:100%;padding:0.875rem 1rem;font-family:var(--font-body);font-size:var(--fs-fluid-12);background:var(--white-a10);border:1px solid var(--white-a20);border-radius:6px;color:var(--white);transition:border-color 0.2s,background 0.2s;box-sizing:border-box}
.cta-form input::placeholder,.cta-form textarea::placeholder{color:var(--white-a50)}
.cta-form select{appearance:none;cursor:pointer;color:var(--white-a50);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
.cta-form select option{background:var(--charcoal);color:var(--white)}
.cta-form input:focus,.cta-form select:focus,.cta-form textarea:focus{outline:none;border-color:var(--orange);background:var(--white-a15)}
.cta-form textarea{margin-bottom:1rem;resize:vertical;min-height:80px}
.cta-form .btn-primary{width:100%;justify-content:center;text-align:center}
@media (max-width: 640px){.cta-form-row{grid-template-columns:1fr}}
.cta-shape-1, .cta-shape-2, .cta-shape-3{position: absolute; border: 2px solid var(--white-a08); pointer-events: none;}
.cta-shape-1{top: 10%; left: 5%; width: 80px; height: 80px;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%); transform: rotate(-15deg);}
.cta-shape-2{bottom: 15%; right: 8%; width: 60px; height: 60px;
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%); transform: rotate(10deg);}
.cta-shape-3{top: 30%; right: 15%; width: 40px; height: 40px;
  background: var(--orange-a10); border: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%);}
.footer{background: var(--charcoal); color: var(--white-a65); padding: 4rem 0 2rem;}
.footer-grid{display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem;}
.footer-links{list-style: none; display: flex; flex-direction: column; gap: 0.5rem;}
.footer-links a{font-size: var(--fs-0_88rem); transition: color 0.2s ease;}
.footer-bottom{border-top: 1px solid var(--white-a08); padding-top: 2rem;
  display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-0_78rem);}
@media (max-width: 640px){.footer-bottom{flex-direction:column;gap:.5rem;text-align:center}}
.footer-license{font-family: var(--font-mono); font-size: var(--fs-0_72rem); color: var(--gray-light);}
.reveal{opacity: 0; transform: translateY(30px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);}
.reveal.visible{opacity: 1; transform: translateY(0);}
@media (max-width: 1024px){.services-bento{grid-template-columns: 1fr;}}
@media (max-width: 1024px){.service-card.featured{grid-row: auto;}}
@media (max-width: 1024px){.service-card.featured .service-card-img{min-height: 280px;}}
@media (max-width: 1024px){.services-row-bottom{grid-template-columns: 1fr 1fr;}}
@media (max-width: 1024px){.projects-grid{grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 1024px){.why-grid, .fresno-grid{grid-template-columns: 1fr; gap: 2rem;}}
@media (max-width: 1024px){.why-image-stack{height: 350px;}}
@media (max-width: 1024px){.industries-grid{grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 1024px){.process-steps{grid-template-columns: repeat(2, 1fr); gap: 2rem;}}
@media (max-width: 1024px){.process-steps::before{display: none;}}
@media (max-width: 1024px){.footer-grid{grid-template-columns: 1fr 1fr;}}
@media (max-width: 1024px){.reviews-grid{grid-template-columns: 1fr; max-width: 500px;}}
@media (max-width: 1024px){.geo-shape{display: none;}}
@media (max-width: 640px){.nav-links{display: none;}}
@media (max-width: 640px){.services-bento{grid-template-columns: 1fr;}}
@media (max-width: 640px){.services-row-bottom{grid-template-columns: 1fr;}}
@media (max-width: 640px){.projects-grid{grid-template-columns: 1fr;}}
@media (max-width: 640px){.industries-grid{grid-template-columns: 1fr;}}
@media (max-width: 640px){.process-steps{grid-template-columns: 1fr;}}
@media (max-width: 640px){.stats-grid{grid-template-columns: 1fr;}}
@media (max-width: 640px){.hero-title{font-size: var(--fs-2rem);}}
.nav-hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;cursor:pointer;z-index:1001;background:none;border:none}
.mobile-menu{position:fixed;top:0;right:-100%;width:min(340px,85vw);height:100vh;height:100dvh;background:var(--charcoal-a98);backdrop-filter:blur(20px);z-index:999;padding:calc(var(--nav-height) + 1rem) 2rem 2rem;transition:right .4s var(--ease-out-expo),visibility .4s;visibility:hidden;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem}
.mobile-overlay{position:fixed;inset:0;background:var(--black-a50);z-index:998;opacity:0;pointer-events:none;transition:opacity .3s}
.mobile-overlay.open{opacity:1;pointer-events:auto}
@media (max-width: 1024px){.nav-hamburger{display:flex}}
@media (max-width: 1024px){.nav-links{display:none}}
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--blue);color:var(--white);padding:0.75rem 1.5rem;border-radius:0 0 6px 6px;font-family:var(--font-display);font-weight:600;font-size:var(--fs-0_9rem);z-index:10000;text-decoration:none;transition:top 0.2s}
*:focus-visible{outline:3px solid var(--blue-light);outline-offset:2px;border-radius:3px}
@media print{.container{max-width:100%;padding:0}}
@media print{.footer-bottom{text-align:center;padding:1rem 0;border-top:1px solid var(--c-cccccc)}}
.sticky-cta{display:none}
@media (max-width: 768px){.sticky-cta{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:900;background:var(--charcoal);padding:0;box-shadow:0 -4px 20px var(--black-a30)}}
.faq-list{max-width:800px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--c-e5e7eb)}
.faq-question{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;cursor:pointer;font-family:var(--font-body);font-size:var(--fs-1_05rem);color:var(--display-ink);text-align:left;padding:1.1rem 0.5rem;gap:1rem;transition:color 0.2s}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.35s ease}