/* ==========================================================================
   Wilson Contracting — Site Stylesheet
   Palette pulled from the company logo: safety orange + charcoal + white
   ========================================================================== */

:root{
  --orange: #FA7300;
  --orange-dark: #d9630a;
  --orange-light: #ff8c2e;
  --dark: #17181a;
  --charcoal: #272727;
  --charcoal-2: #303030;
  --white: #ffffff;
  --off-white: #f6f5f3;
  --gray: #6a6a6a;
  --gray-light: #e4e2de;
  --shadow: 0 20px 45px -15px rgba(0,0,0,.25);
  --shadow-sm: 0 8px 20px -8px rgba(0,0,0,.2);
  --radius: 14px;
  --container: 1220px;
  --header-h: 88px;

  /* Theme-aware surface tokens — light mode (default) */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #efeee9;
  --text: #272727;
  --text-heading: #17181a;
  --header-bg: rgba(255,255,255,.92);
  --header-border: rgba(0,0,0,.06);
  --topo-opacity: .55;
  --glow: none;
  color-scheme: light;
}

:root[data-theme="dark"]{
  --bg: #0a0b0c;
  --surface: #17181b;
  --surface-2: #1e2023;
  --text: #cfcfcd;
  --text-heading: #ffffff;
  --header-bg: rgba(10,11,12,.85);
  --header-border: rgba(250,115,0,.18);
  --shadow: 0 20px 45px -15px rgba(0,0,0,.7);
  --shadow-sm: 0 8px 20px -8px rgba(0,0,0,.6);
  --topo-opacity: .9;
  --glow: 0 0 24px rgba(250,115,0,.35);
  color-scheme: dark;

  /* Reused existing tokens, redefined for dark surfaces/text */
  --off-white: #131416;
  --gray-light: #2a2c2f;
  --gray: #93938f;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html, body{ background: var(--bg); }
body{
  margin:0;
  position:relative;
  z-index:0;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition: background .35s ease, color .35s ease;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

/* ---- Ambient topographic texture (survey/takeoff contour lines) ----
   Negative z-index so it paints above body's own background but below
   all normal-flow content — no need to touch any other element's
   stacking, so position:fixed overlays (loader, mobile nav) are unaffected. */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:-1;
  background-image:url('../img/topo-lines.svg');
  background-repeat:repeat;
  background-size:1400px auto;
  background-position: center top;
  opacity:.3;
  pointer-events:none;
  transition: opacity .35s ease;
}
[data-theme="dark"] body::before{ opacity:.45; }

.topo-band{ position:relative; overflow:hidden; }
.topo-band::after{
  content:"";
  position:absolute; inset:-10% -5%;
  background-image:url('../img/topo-lines.svg');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  opacity: var(--topo-opacity);
  pointer-events:none;
}
.topo-band > *{ position:relative; z-index:1; }
h1,h2,h3,h4{
  font-family:'Poppins', sans-serif;
  font-weight:700;
  line-height:1.15;
  margin:0 0 .5em;
  color: var(--text-heading);
}
p{ margin:0 0 1em; }
button{ font-family:inherit; cursor:pointer; }

.container{
  width:100%;
  max-width: var(--container);
  margin:0 auto;
  padding:0 24px;
}

.section{ padding: 96px 0; }
.section--tight{ padding: 64px 0; }
.section--dark{ background: var(--dark); color: #d8d8d8; }
.section--dark h2, .section--dark h3{ color: var(--white); }
.section--alt{ background: var(--off-white); }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  color: var(--orange);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.78rem;
  margin-bottom: 14px;
}
.eyebrow::before{
  content:"";
  width: 28px;
  height: 3px;
  background: var(--orange);
  display:inline-block;
  border-radius: 2px;
}

.section-head{ max-width: 680px; margin: 0 0 48px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
.section-head p{ color: var(--gray); font-size:1.06rem; }
.section--dark .section-head p{ color:#b7b7b7; }

/* ---- Buttons ---- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  padding: 15px 30px;
  border-radius: 999px;
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.02em;
  border:2px solid transparent;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  white-space:nowrap;
}
.btn:active{ transform: translateY(1px); }

/* 3D-pressed buttons — a solid "edge" layer beneath gives the button
   physical depth, like a real key; pressing it compresses the edge. */
.btn-primary{
  background: var(--orange);
  color: var(--white);
  box-shadow: 0 12px 24px -8px rgba(250,115,0,.55), 0 4px 0 0 var(--orange-dark);
  transition: transform .12s ease-out, box-shadow .12s ease-out, background .25s ease;
}
.btn-primary:hover{ background: var(--orange-dark); transform: translateY(-2px); box-shadow: 0 16px 30px -8px rgba(250,115,0,.6), 0 6px 0 0 #a34c07; }
.btn-primary:active{ transform: translateY(3px); box-shadow: 0 6px 14px -8px rgba(250,115,0,.5), 0 1px 0 0 #a34c07; }
[data-theme="dark"] .btn-primary{ box-shadow: 0 12px 24px -8px rgba(250,115,0,.55), 0 4px 0 0 var(--orange-dark), var(--glow); }
[data-theme="dark"] .btn-primary:hover{ box-shadow: 0 16px 30px -8px rgba(250,115,0,.6), 0 6px 0 0 #a34c07, 0 0 34px rgba(250,115,0,.55); }
[data-theme="dark"] .btn-primary:active{ box-shadow: 0 6px 14px -8px rgba(250,115,0,.5), 0 1px 0 0 #a34c07, 0 0 20px rgba(250,115,0,.4); }
[data-theme="dark"] .btn-outline:hover{ box-shadow: 0 0 20px rgba(255,255,255,.15); }

/* ---- HUD corner brackets (targeting-reticle framing) ---- */
.hud-frame{ position:relative; }
.hud-frame::before, .hud-frame::after{
  content:"";
  position:absolute;
  width:26px; height:26px;
  pointer-events:none;
  opacity:.85;
  z-index:3;
}
.hud-frame::before{
  top:18px; left:18px;
  border-top:2px solid var(--orange);
  border-left:2px solid var(--orange);
}
.hud-frame::after{
  bottom:18px; right:18px;
  border-bottom:2px solid var(--orange);
  border-right:2px solid var(--orange);
}
.btn-dark{
  background: var(--charcoal);
  color: var(--white);
  box-shadow: 0 4px 0 0 #0a0a0a;
  transition: transform .12s ease-out, box-shadow .12s ease-out, background .25s ease;
}
.btn-dark:hover{ background:#000; transform: translateY(-2px); box-shadow: 0 6px 0 0 #0a0a0a; }
.btn-dark:active{ transform: translateY(3px); box-shadow: 0 1px 0 0 #0a0a0a; }
.btn-outline{
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.6);
}
.btn-outline:hover{ background: rgba(255,255,255,.12); border-color:#fff; transform: translateY(-2px); }
.btn-outline-dark{
  background: transparent;
  color: var(--text);
  border-color: var(--text);
}
.btn-outline-dark:hover{ background: var(--text); color: var(--bg); }
.btn-block{ width:100%; }
.btn-sm{ padding: 10px 20px; font-size:.85rem; }

/* ==========================================================================
   Page loader (real jobsite video + progress bar, plays on first visit & refresh)
   ========================================================================== */
.page-loader{
  position:fixed; inset:0;
  z-index:9999;
  background: var(--dark);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  transition: opacity .5s ease, visibility .5s ease;
}
.page-loader.loader-hide{ opacity:0; visibility:hidden; pointer-events:none; }

.loader-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
  background: var(--dark);
}
.loader-overlay{
  position:absolute; inset:0;
  z-index:0;
  background: linear-gradient(180deg, rgba(10,10,10,.45) 0%, rgba(10,10,10,.62) 60%, rgba(10,10,10,.85) 100%);
}

.loader-sound-toggle{
  position:absolute;
  top:24px; right:24px;
  z-index:2;
  display:flex; align-items:center; gap:8px;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.3);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(4px);
  color:#fff;
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:600;
  cursor:pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.loader-sound-toggle:hover{ background: rgba(0,0,0,.55); border-color: rgba(255,255,255,.55); }
.loader-sound-toggle .ic-on{ display:none; }
.loader-sound-toggle.is-unmuted{ border-color: var(--orange); color: var(--orange-light); }
.loader-sound-toggle.is-unmuted .ic-off{ display:none; }
.loader-sound-toggle.is-unmuted .ic-on{ display:block; }

.loader-inner{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  gap:30px;
  width:min(360px, 78vw);
}
.loader-logo{
  height:60px; width:auto;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.5));
  animation: loaderPulse 1.3s ease-in-out infinite;
}
@keyframes loaderPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }

.loader-track{
  position:relative;
  width:100%;
  height:10px;
  background: rgba(255,255,255,.15);
  border-radius:999px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
}
.loader-fill{
  position:absolute; left:0; top:0; bottom:0;
  width:0%;
  background: linear-gradient(90deg, var(--orange-dark), var(--orange));
  border-radius:999px 0 0 999px;
}

.loader-text{
  color:#e2e2e2;
  font-size:.76rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  text-shadow: 0 2px 6px rgba(0,0,0,.5);
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */

/* ---- Dark mode toggle ---- */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px;
  border-radius:50%;
  border:1px solid currentColor;
  background:transparent;
  color:inherit;
  opacity:.7;
  flex:none;
  transition: opacity .2s, color .2s, border-color .2s, transform .3s ease;
}
.theme-toggle svg{ width:14px; height:14px; }
.theme-toggle:hover{ opacity:1; color: var(--orange); transform: rotate(-14deg); }
.theme-toggle .ic-moon{ display:none; }
[data-theme="dark"] .theme-toggle .ic-sun{ display:none; }
[data-theme="dark"] .theme-toggle .ic-moon{ display:block; }
[data-theme="dark"] .theme-toggle{ color: var(--orange-light); opacity:.9; }

.site-header{
  position: sticky;
  top:0;
  z-index: 500;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--header-border);
  transition: box-shadow .3s ease, padding .3s ease, background .35s ease, border-color .35s ease;
}
.site-header.scrolled{ box-shadow: 0 8px 30px -12px rgba(0,0,0,.25); }
.site-header::before{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  background-image:url('../img/topo-lines.svg');
  background-repeat:repeat;
  background-size:500px auto;
  background-position:center;
  opacity:.35;
  pointer-events:none;
}
[data-theme="dark"] .site-header::before{ opacity:.55; }

.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
  gap: 20px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height: 56px; width:auto; }
.brand-text{ font-family:'Poppins',sans-serif; line-height:1.1; }
.brand-text strong{ display:block; font-size:1.05rem; color: var(--text-heading); letter-spacing:.01em; }
.brand-text span{ display:block; font-size:.72rem; color: var(--orange); font-weight:600; letter-spacing:.08em; text-transform:uppercase; }

.nav-links{
  display:flex;
  align-items:center;
  gap: 6px;
}
.nav-links a{
  position:relative;
  padding: 10px 16px;
  font-weight:600;
  font-size:.95rem;
  color: var(--text);
  border-radius: 999px;
  transition: color .2s, background .2s;
}
.nav-links a:hover{ color: var(--orange); background: rgba(250,115,0,.08); }
.nav-links a.active{ color: var(--orange); }
.nav-links a.active::after{
  content:"";
  position:absolute;
  left:16px; right:16px; bottom:4px;
  height:2px;
  background: var(--orange);
  border-radius:2px;
}

.nav-cta{ display:flex; align-items:center; gap:12px; }

.nav-toggle{
  display:none;
  width: 46px; height: 46px;
  border-radius: 12px;
  border:1px solid var(--gray-light);
  background: var(--surface);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
}
.nav-toggle span{ width:20px; height:2px; background: var(--text); border-radius:2px; transition:.3s; }
.nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  min-height: 88vh;
  display:flex;
  align-items:center;
  color:#fff;
  isolation:isolate;
  overflow:hidden;
}
.hero-parallax{
  position:absolute; inset:-24px;
  z-index:0;
  will-change: transform;
  transition: transform .2s ease-out;
}
.hero-bg{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  transform: scale(1.13);
  will-change: transform;
}
body.loaded .hero-bg{
  animation: heroKenBurns 20s ease-out forwards;
}
@keyframes heroKenBurns{
  from{ transform: scale(1.13); }
  to{ transform: scale(1); }
}
.hero-bg-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  display:block;
}
@media (prefers-reduced-motion: reduce){
  .hero-bg-video{ display:none; }
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(115deg, rgba(10,10,10,.92) 15%, rgba(10,10,10,.68) 55%, rgba(250,115,0,.35) 130%);
  z-index:1;
}
.hero-inner{ position:relative; z-index:2; max-width: 720px; padding: 120px 0 80px; transition: transform .2s ease-out; }
.hero-inner .eyebrow{ color: var(--orange-light); }
.hero h1{
  color:#fff;
  font-size: clamp(2.3rem, 5.2vw, 3.6rem);
  margin-bottom:.4em;
}
.hero h1 em{ color: var(--orange); font-style:normal; }
.hero p.lead{ font-size:1.15rem; color:#e7e7e7; max-width: 560px; }
.hero-actions{
  display:flex; gap:16px; flex-wrap:wrap; margin-top: 34px;
  width:fit-content; margin-left:auto; margin-right:auto;
  justify-content:center;
  max-width:100%;
  background: rgba(10,10,10,.3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.65);
}

/* ---- Glass panel behind hero headline/lead text for legibility over photos ---- */
.hero-text-panel{
  display:inline-block;
  background: rgba(10,10,10,.3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 30px 34px;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.65);
}
.hero-text-panel .eyebrow{ margin-bottom: 12px; }
.hero-text-panel h1{ margin-bottom: .3em; }
.hero-text-panel p.lead{ margin-bottom: 0; }
@media (max-width: 620px){
  .hero-text-panel{ padding: 22px 22px; border-radius:16px; }
  .hero-actions{ padding: 12px; border-radius:14px; }
  .hero-stats{ padding: 16px 18px; border-radius:14px; gap:24px; }
}

.hero-stats{
  display:flex;
  gap: 40px;
  margin-top: 56px;
  flex-wrap:wrap;
  width:fit-content; margin-left:auto; margin-right:auto;
  justify-content:center;
  max-width:100%;
  background: rgba(10,10,10,.3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 22px 30px;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.65);
}

/* ---- Hero entrance choreography (held until the page-loader finishes, see .page-loader) ---- */
.hero-inner > *{
  opacity:0;
  transform: translateY(26px);
}
body.loaded .hero-inner > *{
  animation: heroFadeUp .9s cubic-bezier(.16,1,.3,1) forwards;
}
body.loaded .hero-inner > .hero-text-panel{ animation-delay:.15s; }
body.loaded .hero-inner > .hero-actions{ animation-delay:.5s; }
body.loaded .hero-inner > .hero-stats{ animation-delay:.66s; }
@keyframes heroFadeUp{ to{ opacity:1; transform:none; } }

body.loaded .hero-actions .btn-primary{
  animation: ctaPulse 1.6s ease-in-out 1.7s 2;
}
@keyframes ctaPulse{
  0%,100%{ box-shadow: 0 12px 24px -8px rgba(250,115,0,.55), 0 4px 0 0 var(--orange-dark); }
  50%{ box-shadow: 0 18px 40px -6px rgba(250,115,0,.85), 0 4px 0 0 var(--orange-dark); }
}

.site-header{ transform: translateY(-100%); opacity:0; }
body.loaded .site-header{ animation: navDropIn .7s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes navDropIn{ to{ transform:none; opacity:1; } }

@media (prefers-reduced-motion: reduce){
  .hero-bg{ animation:none !important; transform:none !important; }
  .hero-inner > *, .site-header{ opacity:1 !important; transform:none !important; }
  body.loaded .hero-inner > *, body.loaded .hero-actions .btn-primary, body.loaded .site-header{ animation:none !important; }
  .scroll-cue{ opacity:1 !important; }
  body.loaded .scroll-cue{ animation:none !important; }
}
.hero-stats .stat-num{ font-family:'Poppins',sans-serif; font-size:2rem; font-weight:800; color:#fff; }
.hero-stats .stat-num span{ color:#fff; }
.hero-stats .stat-label{ font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:#c9c9c9; }

.page-hero{ min-height: 46vh; }
.page-hero .hero-inner{ padding: 100px 0 60px; }

.scroll-cue{
  position:absolute;
  z-index:2;
  bottom: 14px; left:50%;
  transform: translateX(-50%);
  opacity:0;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:#e5e5e5; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
}
body.loaded .scroll-cue{ animation: scrollCueIn .9s ease forwards .95s; }
@keyframes scrollCueIn{ to{ opacity:1; } }
.scroll-cue .line{ width:1px; height: 34px; background: linear-gradient(#fff, transparent); animation: scrollcue 1.8s ease-in-out infinite; }
@keyframes scrollcue{ 0%{ opacity:0; transform: scaleY(.3); transform-origin: top;} 50%{opacity:1; transform:scaleY(1); transform-origin: top;} 100%{opacity:0; transform: scaleY(.3); transform-origin: bottom;} }

/* ---- Diagonal stripe divider (brand motif) ---- */
.stripe-divider{
  height: 26px;
  width:100%;
  background: repeating-linear-gradient(
    115deg,
    var(--charcoal) 0px, var(--charcoal) 26px,
    var(--orange) 26px, var(--orange) 52px
  );
}
.stripe-divider.thin{ height:10px; }

/* ==========================================================================
   Stat strip
   ========================================================================== */
.stat-strip{
  background: var(--charcoal);
  color:#fff;
  padding: 46px 0;
}
.stat-grid{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
  text-align:center;
}
.stat-grid .num{ font-family:'Poppins',sans-serif; font-weight:800; font-size: clamp(1.8rem,3vw,2.6rem); color: var(--orange); }
.stat-grid .lbl{ font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:#cfcfcf; margin-top:6px; }

.jt-stats{ margin-top:26px; }
.jt-stats > div{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
.jt-stats .btn{ margin-top:2px; }
.jt-marker{ cursor:pointer; }
#featured-projects{ scroll-margin-top: var(--header-h); }

/* ==========================================================================
   About split
   ========================================================================== */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items:center;
}
.split-media{ position:relative; }
.split-media img{ border-radius: var(--radius); box-shadow: var(--shadow); width:100%; aspect-ratio: 4/3.1; object-fit:cover; }
.split-media .badge{
  position:absolute;
  bottom:-24px; left:-24px;
  background: var(--orange);
  color:#fff;
  padding: 20px 24px;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  font-family:'Poppins',sans-serif;
}
.split-media .badge strong{ display:block; font-size:1.6rem; }
.split-media .badge span{ font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; opacity:.9; }

.check-list{ margin: 24px 0; display:grid; gap:12px; }
.check-list li{ display:flex; align-items:flex-start; gap:12px; font-weight:600; color: var(--text); }
.check-list li::before{
  content:"✓";
  flex:none;
  width: 24px; height:24px;
  border-radius:50%;
  background: rgba(250,115,0,.15);
  color: var(--orange);
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem;
  font-weight:900;
}

/* ==========================================================================
   Cards: Services / Projects / Equipment
   ========================================================================== */
.grid{ display:grid; gap: 28px; perspective: 1400px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }

/* Grid items shouldn't force their track wider than the fr share just
   because their content (long email/address strings, etc.) wants more room. */
.grid > *, .contact-grid > *, .split > *, .footer-grid > *,
.stat-grid > *, .form-grid > *, .hero-stats > * { min-width: 0; }

.card{
  position:relative;
  background: var(--surface);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid transparent;
  transition: transform .15s ease-out, box-shadow .35s ease, border-color .35s ease;
  transform-style: preserve-3d;
  will-change: transform;
  display:flex;
  flex-direction:column;
}
.card:hover{ transform: translateY(-8px); box-shadow: var(--shadow); }
[data-theme="dark"] .card{ border-color: var(--gray-light); }
[data-theme="dark"] .card:hover{ border-color: rgba(250,115,0,.5); box-shadow: var(--shadow), var(--glow); }

/* Holographic glare that tracks the cursor — see main.js .tilt-target handler */
.card::after{
  content:"";
  position:absolute; inset:0;
  z-index:5;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.3), transparent 55%);
  opacity:0;
  transition: opacity .35s ease;
  pointer-events:none;
}
.card:hover::after{ opacity:1; }
[data-theme="dark"] .card::after{
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(250,115,0,.42), transparent 55%);
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce), (hover:none){
  .card{ transform:none !important; }
}

.card-media{ position:relative; overflow:hidden; aspect-ratio: 4/3; background: var(--surface-2); }
.card-media img{ width:100%; height:100%; object-fit:cover; transition: transform .6s ease; }
.card:hover .card-media img{ transform: scale(1.08); }
.card-media .tag{
  position:absolute; top:14px; left:14px;
  background: var(--orange);
  color:#fff;
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding: 6px 12px;
  border-radius: 999px;
}
.card-media .icon-badge{
  position:absolute; top:14px; right:14px;
  width:42px; height:42px;
  border-radius:50%;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(4px);
  display:flex; align-items:center; justify-content:center;
  color: var(--orange);
  box-shadow: var(--shadow-sm);
  transition: transform .35s ease, background .35s ease, color .35s ease;
}
.card-media .icon-badge svg{ width:20px; height:20px; }
.card:hover .card-media .icon-badge{ background: var(--orange); color:#fff; transform: scale(1.08) rotate(8deg); }
.card-body{ padding: 24px; flex:1; display:flex; flex-direction:column; }
.card-body h3{ font-size:1.15rem; margin-bottom:.4em; }
.card-body p{ color: var(--gray); font-size:.94rem; flex:1; }
.card-link{
  display:inline-flex; align-items:center; gap:8px;
  color: var(--orange); font-weight:700; font-size:.88rem;
  margin-top: 10px;
}
.card-link .arrow{ transition: transform .25s; }
.card:hover .card-link .arrow{ transform: translateX(5px); }

.service-card-icon{
  width:56px; height:56px;
  border-radius: 14px;
  background: rgba(250,115,0,.12);
  color: var(--orange);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 16px;
  flex:none;
}
.service-card-icon svg{ width:28px; height:28px; }

.service-card.no-image .card-body{ padding: 28px 24px; }

/* Project card meta */
.project-meta{
  display:flex; align-items:center; gap:8px;
  font-size:.78rem; color: var(--orange); font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  margin-bottom:8px;
}
.project-meta::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background: var(--orange);
  flex:none;
}

/* ---- Interactive grading/elevation map (GPS Grade Control showcase) ---- */
.grading-map{
  position:relative;
  max-width: 900px;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow:hidden;
  background: #0d0e10;
  border: 1px solid rgba(250,115,0,.25);
  box-shadow: var(--shadow);
}
.grading-map-svg{ display:block; width:100%; height:auto; }

.elev-point{ cursor:pointer; }
.elev-pulse{
  animation: elevPulse 2.4s ease-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes elevPulse{
  0%{ transform: scale(.6); opacity:1; }
  100%{ transform: scale(2); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .elev-pulse{ animation:none; opacity:.6; }
}

.grading-scan{
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 0%, rgba(250,115,0,.16) 45%, rgba(250,115,0,.32) 50%, rgba(250,115,0,.16) 55%, transparent 100%);
  background-size: 100% 260%;
  background-repeat: no-repeat;
  animation: scanSweep 4.5s linear infinite;
  pointer-events:none;
  mix-blend-mode: screen;
}
@keyframes scanSweep{
  0%{ background-position: 0 -160%; }
  100%{ background-position: 0 260%; }
}
@media (prefers-reduced-motion: reduce){
  .grading-scan{ animation:none; opacity:.4; }
}

.grading-tooltip{
  position:absolute;
  z-index:10;
  top:0; left:0;
  transform: translate(-9999px,-9999px);
  background: rgba(10,11,12,.95);
  border:1px solid var(--orange);
  border-radius: 8px;
  padding: 8px 12px;
  font-family:'Courier New',monospace;
  font-size:.8rem;
  color:#fff;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transition: opacity .15s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,.4), 0 0 16px rgba(250,115,0,.3);
}
.grading-tooltip.show{ opacity:1; }
.grading-tooltip strong{ display:block; color: var(--orange-light); font-size:.95rem; }
.grading-tooltip span{ display:block; color:#c9c9c6; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; margin-top:2px; }

.grading-legend{
  display:flex; flex-wrap:wrap; justify-content:center; gap: 22px 32px;
  margin-top: 28px;
  font-size:.85rem;
  color:#c9c9c6;
}
.legend-item{ display:flex; align-items:center; gap:9px; }
.legend-item .swatch{ width:16px; height:16px; border-radius:4px; flex:none; }
.swatch.cut{ background: rgba(250,115,0,.45); border:1px solid #FA7300; }
.swatch.fill{ background: rgba(46,168,201,.45); border:1px solid #2ea8c9; }
.swatch.zero{ width:16px; height:0; border-top:2px dashed #fff; border-radius:0; }
.swatch.existing{ width:16px; height:0; border-top:1.5px solid #8a8a86; border-radius:0; }
.swatch.index{ width:16px; height:0; border-top:2.5px solid #c9c9c6; border-radius:0; }

.tin-model-badge{
  position:absolute; top:18px; right:18px; z-index:2;
  background: rgba(10,11,12,.85);
  border:1px solid rgba(250,115,0,.4);
  color:#c9c9c6;
  font-family:'Courier New',monospace;
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:5px 10px;
  border-radius:4px;
}
.tin-controls{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin-top:24px;
  flex-wrap:wrap;
}
.tin-state-label{
  font-family:'Courier New',monospace;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#c9c9c6;
}
.tin-legend{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-top:28px;
  font-family:'Courier New',monospace;
  font-size:.8rem;
  color:#c9c9c6;
  flex-wrap:wrap;
}
.tin-legend-bar{
  width:200px; height:12px; border-radius:6px; flex:none;
  background: linear-gradient(90deg, #2b5fa8, #2ea8c9, #3fae5c, #e8c93b, #f2892e, #d3432e);
  border:1px solid rgba(255,255,255,.15);
}
.tin-legend-value{ font-weight:700; color:#e5e5e2; }
.tin-legend-caption{ width:100%; text-align:center; font-size:.75rem; color:#8a8a86; text-transform:uppercase; letter-spacing:.04em; }

@media (max-width: 620px){
  .grading-legend{ gap: 12px 18px; font-size:.78rem; }
}

/* ---- Trust row (contact page) ---- */
.trust-row{
  background: var(--off-white);
  padding: 34px 0;
  border-bottom: 1px solid var(--gray-light);
}
.trust-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 32px 44px;
}
.trust-item{
  display:flex; align-items:center; gap:12px;
  font-weight:700;
  color: var(--text);
  font-size:.95rem;
}
.trust-item .ic{
  width:40px; height:40px;
  border-radius:50%;
  background: rgba(250,115,0,.12);
  color: var(--orange);
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.trust-item .ic svg{ width:20px; height:20px; }

/* ---- Value tag (dollar-figure project badges) ---- */
.card-media .tag-value{
  display:inline-flex; align-items:center; gap:5px;
  background: rgba(20,20,20,.85);
  backdrop-filter: blur(4px);
}
.card-media .tag-value svg{ width:11px; height:11px; }

/* ---- Testimonials ---- */
.testimonial-card .card-body{ padding: 32px 26px; }
.quote-mark{
  font-family:'Poppins',sans-serif;
  font-size: 3rem;
  line-height: 1;
  color: var(--orange);
  opacity: .35;
  display:block;
  margin-bottom: 2px;
}
.testimonial-text{ font-style: italic; color: var(--text) !important; }
.testimonial-author{ display:flex; align-items:center; gap:12px; margin-top: 18px; }
.testimonial-author .avatar-initials{
  width:44px; height:44px; border-radius:50%;
  background: rgba(250,115,0,.12); color: var(--orange);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.85rem; flex:none;
  font-family:'Poppins',sans-serif;
}
.testimonial-author strong{ display:block; font-size:.92rem; }
.testimonial-author span{ display:block; font-size:.8rem; color: var(--gray); }

/* ==========================================================================
   Equipment gallery + lightbox
   ========================================================================== */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  perspective: 1400px;
}
.gallery-item{
  position:relative;
  aspect-ratio: 1/1;
  border-radius: 12px;
  overflow:hidden;
  cursor: zoom-in;
  background: var(--surface-2);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .15s ease-out;
}
@media (prefers-reduced-motion: reduce), (hover:none){
  .gallery-item{ transform:none !important; }
}
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease, filter .5s ease; }
.gallery-item:hover img{ transform: scale(1.1); }
.gallery-item::before{
  content:"";
  position:absolute; inset:0;
  z-index:5;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.3), transparent 55%);
  opacity:0;
  transition: opacity .35s ease;
  pointer-events:none;
}
.gallery-item:hover::before{ opacity:1; }
[data-theme="dark"] .gallery-item::before{
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(250,115,0,.42), transparent 55%);
  mix-blend-mode: screen;
}
.gallery-item::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.45), transparent 45%);
  opacity:0;
  transition:.3s;
}
.gallery-item:hover::after{ opacity:1; }
.gallery-item .zoom-icon{
  position:absolute; right:10px; bottom:10px;
  width:34px; height:34px;
  border-radius:50%;
  background: rgba(255,255,255,.92);
  color: var(--charcoal);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform: scale(.7);
  transition:.3s;
}
.gallery-item:hover .zoom-icon{ opacity:1; transform:scale(1); }

.lightbox{
  position:fixed; inset:0; z-index:2000;
  background: rgba(10,10,10,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition: opacity .3s ease;
  padding: 40px;
}
.lightbox.active{ opacity:1; visibility:visible; }
.lightbox img{ max-width: min(90vw, 1100px); max-height: 85vh; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.lightbox-close, .lightbox-nav{
  position:absolute;
  background: rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  width:48px; height:48px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:.2s;
}
.lightbox-close:hover, .lightbox-nav:hover{ background: var(--orange); border-color: var(--orange); }
.lightbox-close{ top:24px; right:24px; }
.lightbox-nav.prev{ left:24px; top:50%; transform:translateY(-50%); }
.lightbox-nav.next{ right:24px; top:50%; transform:translateY(-50%); }

/* ==========================================================================
   CTA banner
   ========================================================================== */
.cta-banner{
  background: linear-gradient(120deg, var(--orange), var(--orange-dark));
  color:#fff;
  padding: 64px 0;
  position:relative;
  overflow:hidden;
}
.cta-banner::before{
  content:"";
  position:absolute; inset:0;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.06) 0 26px, transparent 26px 52px);
}
.cta-inner{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap: 30px; flex-wrap:wrap;
}
.cta-inner h2{ color:#fff; margin-bottom:.2em; font-size: clamp(1.5rem,2.6vw,2.1rem); }
.cta-inner p{ color: rgba(255,255,255,.9); margin:0; }
.cta-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-grid{
  display:grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 50px;
  align-items:flex-start;
}
.info-card{
  background: var(--charcoal);
  color:#fff;
  border-radius: var(--radius);
  padding: 40px 34px;
}
.info-card h3{ color:#fff; }
.info-row{
  display:flex; gap:16px; align-items:flex-start;
  padding: 18px 0;
  border-top:1px solid rgba(255,255,255,.1);
}
.info-row:first-of-type{ border-top:none; }
.info-row .ic{
  width:44px; height:44px; border-radius:12px;
  background: rgba(250,115,0,.18); color: var(--orange);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.info-row .lbl{ font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:#a9a9a9; margin-bottom:2px; }
.info-row a{ font-weight:600; color:#fff; overflow-wrap:anywhere; }
.info-row a:hover{ color: var(--orange); }

.map-embed{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); margin-top: 26px; }
.map-embed iframe{ width:100%; height: 260px; border:0; display:block; }

/* ---- Decorative topographic map of the US (Contact page) ---- */
.us-topo-map{
  position:relative;
  margin-top: 26px;
  border-radius: var(--radius);
  overflow:hidden;
  background: #0d0e10;
  border: 1px solid rgba(250,115,0,.25);
  box-shadow: var(--shadow-sm);
}
.us-topo-map-svg{ display:block; width:100%; height:auto; }
.us-map-directions{ margin-top: 16px; }

.form-card{
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 42px;
  border: 1px solid var(--gray-light);
}
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field{ display:flex; flex-direction:column; gap:8px; margin-bottom: 20px; }
.form-field.full{ grid-column: 1 / -1; }
.form-field label{ font-size:.85rem; font-weight:700; color: var(--text); }
.form-field input, .form-field select, .form-field textarea{
  border:1.5px solid var(--gray-light);
  border-radius: 10px;
  padding: 13px 16px;
  font-family: inherit;
  font-size: .96rem;
  color: var(--text);
  background: var(--off-white);
  transition: border-color .2s, background .2s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none;
  border-color: var(--orange);
  background: var(--surface);
}
.form-field textarea{ resize: vertical; min-height: 130px; }
.hp-field{ position:absolute; left:-9999px; }
.form-note{ font-size:.82rem; color: var(--gray); margin-top:14px; }
.form-success{
  display:none;
  background: rgba(45,160,90,.1);
  border: 1.5px solid rgba(45,160,90,.4);
  color: #1f7a45;
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 20px;
  font-weight:600;
}
.form-success.show{ display:block; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--dark); color:#b7b7b7; padding-top: 64px; }
.footer-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.footer-brand img{ height:52px; }
.footer-brand strong{ color:#fff; font-family:'Poppins',sans-serif; font-size:1.1rem; }
.site-footer h4{ color:#fff; font-size:.9rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:18px; }
.footer-links li{ margin-bottom: 11px; }
.footer-links a{ transition: color .2s; }
.footer-links a:hover{ color: var(--orange); }
.footer-contact li{ margin-bottom: 14px; display:flex; gap:10px; align-items:flex-start; }
.footer-contact .ic{ color: var(--orange); flex:none; margin-top:2px; }
.footer-contact li > *:last-child{ min-width:0; overflow-wrap:anywhere; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding: 22px 0; font-size:.82rem; flex-wrap:wrap; gap:10px;
}
.footer-bottom a{ color:#d8d8d8; }
.footer-bottom a:hover{ color: var(--orange); }

/* ==========================================================================
   Reveal-on-scroll animation
   ========================================================================== */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform:none; }
.reveal-delay-1.in-view{ transition-delay:.1s; }
.reveal-delay-2.in-view{ transition-delay:.2s; }
.reveal-delay-3.in-view{ transition-delay:.3s; }
.reveal-delay-4.in-view{ transition-delay:.4s; }

/* Mobile nav overlay */
.mobile-nav{
  position: fixed; inset:0; z-index:600;
  background: var(--dark);
  color:#fff;
  display:flex; flex-direction:column;
  padding: 100px 32px 40px;
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(.65,0,.35,1);
}
.mobile-nav::before{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  background-image:url('../img/topo-lines.svg');
  background-repeat:repeat;
  background-size:900px auto;
  background-position:center;
  opacity:.5;
  pointer-events:none;
}
.mobile-nav.open{ transform: translateX(0); }
.mobile-nav-close{
  position:absolute;
  top: 24px; right: 24px;
  width: 46px; height: 46px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.06);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.mobile-nav a{
  font-family:'Poppins',sans-serif;
  font-size:1.5rem;
  font-weight:700;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.mobile-nav a.active{ color: var(--orange); }
.mobile-nav .mob-cta{ margin-top: 30px; display:flex; flex-direction:column; gap:14px; }

/* ---- Cookie consent banner ---- */
.cookie-banner{
  position: fixed;
  left: 20px; right: 20px; bottom: 20px;
  z-index: 850;
  max-width: 640px;
  margin: 0 auto;
  background: var(--dark);
  color: #d8d8d8;
  border: 1px solid rgba(250,115,0,.3);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
  transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .5s ease;
}
.cookie-banner.show{ transform: translateY(0); opacity: 1; pointer-events: auto; }
.cookie-banner p{ margin:0; font-size:.88rem; line-height:1.5; flex:1; min-width: 220px; }
.cookie-banner-actions{ display:flex; gap:10px; flex:none; }
@media (max-width: 620px){
  .cookie-banner{ left:12px; right:12px; bottom:12px; padding:18px; }
}
@media (prefers-reduced-motion: reduce){
  .cookie-banner{ transition:none; }
}

/* ---- Quick-quote lead capture modal ---- */
.lead-modal{
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.lead-modal.show{ opacity: 1; pointer-events: auto; }
.lead-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(10,11,12,.6);
}
.lead-modal-panel{
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px 36px;
  transform: translateY(24px) scale(.97);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.lead-modal.show .lead-modal-panel{ transform: translateY(0) scale(1); }
.lead-modal-close{
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid var(--gray-light);
  background: var(--off-white);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
}
.lead-modal-body h3{ margin: 8px 0 10px; }
.lead-modal-body > p{ color: var(--gray); margin-bottom: 20px; }
.lead-modal-body .form-field{ margin-bottom: 16px; }
@media (max-width: 520px){
  .lead-modal-panel{ padding: 32px 22px; }
}
@media (prefers-reduced-motion: reduce){
  .lead-modal, .lead-modal-panel{ transition: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px){
  .grid-4{ grid-template-columns: repeat(3,1fr); }
  .gallery-grid{ grid-template-columns: repeat(3,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1180px){
  .nav-links, .nav-cta .btn-outline-dark{ display:none; }
  .nav-toggle{ display:flex; }
}

@media (max-width: 860px){
  .split{ grid-template-columns:1fr; gap:40px; }
  .split-media .badge{ left:16px; bottom:-20px; }
  .grid-3, .grid-2{ grid-template-columns: 1fr 1fr; }
  .stat-grid{ grid-template-columns: repeat(2,1fr); gap: 28px; }
  .contact-grid{ grid-template-columns: 1fr; }
  .cta-inner{ flex-direction:column; text-align:center; justify-content:center; }
}

@media (max-width: 620px){
  .section{ padding: 64px 0; }
  .grid-3, .grid-2, .grid-4{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: repeat(2,1fr); }
  .form-grid{ grid-template-columns: 1fr; }
  .hero-stats{ gap: 24px; }
  .footer-grid{ grid-template-columns: 1fr; }
  .navbar{ gap:10px; flex-wrap:nowrap; }
  .brand{ gap:8px; }
  .brand img{ height:48px; }
  .brand-text{ display:none; }
  .nav-cta .btn-primary{ padding:11px 16px; font-size:.82rem; }
  .form-card{ padding: 26px; }
  .info-card{ padding: 28px 22px; }
}