:root{
  --charcoal:#0a0a0b;
  --plate:#1c1f22;
  --plate-light:#33383d;
  --steel-pale:#e9edef;
  --steel-white:#f8f9fa;
  --steel-silver:#c7cbce;
  --laser-cyan:#2aa8f2;
  --spark-orange:#ffa83d;
  --spark-orange-deep:#a8560f;
  --ink:#101315;
  --line:rgba(255,255,255,0.12);
  --line-dark:rgba(16,19,21,0.14);

  --font-display:'Big Shoulders Display', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--steel-white);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px;}
@media(max-width:640px){.wrap{padding:0 20px;}}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;letter-spacing:0.01em;line-height:0.98;}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--spark-orange-deep);
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--spark-orange-deep);}
.on-dark .eyebrow{color:var(--spark-orange);}
.on-dark .eyebrow::before{background:var(--spark-orange);}

.dashed-rule{border:none;border-top:2px dashed var(--line-dark);width:100%;}
.dashed-rule.on-dark{border-top:2px dashed var(--line);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}
:focus-visible{outline:2px solid var(--laser-cyan); outline-offset:3px;}

/* ---------- SCROLL REVEAL ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.16,.8,.3,1), transform .8s cubic-bezier(.16,.8,.3,1);
  transition-delay:var(--reveal-delay, 0s);
  will-change:opacity, transform;
}
.reveal.in-view{opacity:1; transform:translateY(0);}
.reveal-scale{opacity:0; transform:scale(0.94); transition:opacity .8s ease, transform .8s ease; transition-delay:var(--reveal-delay, 0s);}
.reveal-scale.in-view{opacity:1; transform:scale(1);}

.services-grid.reveal-group .service-card,
.process-list.reveal-group .process-step,
.stats-grid.reveal-group .stat,
.gallery-grid.reveal-group .gallery-item{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);
}
.services-grid.reveal-group.in-view .service-card,
.process-list.reveal-group.in-view .process-step,
.stats-grid.reveal-group.in-view .stat,
.gallery-grid.reveal-group.in-view .gallery-item{opacity:1; transform:translateY(0);}
.services-grid.reveal-group .service-card:nth-child(1),.process-list.reveal-group .process-step:nth-child(1),.stats-grid.reveal-group .stat:nth-child(1),.gallery-grid.reveal-group .gallery-item:nth-child(1){transition-delay:.05s;}
.services-grid.reveal-group .service-card:nth-child(2),.process-list.reveal-group .process-step:nth-child(2),.stats-grid.reveal-group .stat:nth-child(2),.gallery-grid.reveal-group .gallery-item:nth-child(2){transition-delay:.12s;}
.services-grid.reveal-group .service-card:nth-child(3),.process-list.reveal-group .process-step:nth-child(3),.stats-grid.reveal-group .stat:nth-child(3),.gallery-grid.reveal-group .gallery-item:nth-child(3){transition-delay:.19s;}
.services-grid.reveal-group .service-card:nth-child(4),.process-list.reveal-group .process-step:nth-child(4),.stats-grid.reveal-group .stat:nth-child(4),.gallery-grid.reveal-group .gallery-item:nth-child(4){transition-delay:.26s;}
.services-grid.reveal-group .service-card:nth-child(5),.gallery-grid.reveal-group .gallery-item:nth-child(5){transition-delay:.33s;}
.services-grid.reveal-group .service-card:nth-child(6),.gallery-grid.reveal-group .gallery-item:nth-child(6){transition-delay:.40s;}
.services-grid.reveal-group .service-card:nth-child(7){transition-delay:.47s;}
.services-grid.reveal-group .service-card:nth-child(8){transition-delay:.54s;}

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-scale, .services-grid.reveal-group .service-card, .process-list.reveal-group .process-step,
  .stats-grid.reveal-group .stat, .gallery-grid.reveal-group .gallery-item{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}

/* header shadow once page is scrolled */
header.scrolled{box-shadow:0 8px 30px rgba(0,0,0,0.35);}

/* ---------- FLOATING CALL / WHATSAPP ---------- */
.float-actions{position:fixed; right:22px; bottom:26px; z-index:200; display:flex; flex-direction:column; gap:14px;}
.float-btn{width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(0,0,0,0.4); transition:transform .2s ease, box-shadow .2s ease; position:relative;}
.float-btn:hover{transform:translateY(-3px) scale(1.06);}
.float-btn svg{width:26px; height:26px;}
.float-btn.call{background:var(--laser-cyan);}
.float-btn.call svg{fill:var(--charcoal);}
.float-btn.whatsapp{background:#25d366;}
.float-btn.whatsapp svg{fill:#fff;}
.float-tip{position:absolute; right:68px; top:50%; transform:translateY(-50%); background:var(--charcoal); color:var(--steel-white); font-family:var(--font-mono); font-size:12px; letter-spacing:0.03em; padding:8px 12px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s ease, right .2s ease;}
.float-btn:hover .float-tip{opacity:1; right:66px;}
@media(max-width:640px){
  .float-actions{right:16px; bottom:18px; gap:12px;}
  .float-btn{width:50px; height:50px;}
  .float-btn svg{width:23px; height:23px;}
  .float-tip{display:none;}
}

/* ---------- HEADER / NAV ---------- */
header{position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(10,10,11,0.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:box-shadow .3s ease;}
.nav{display:flex; align-items:center; justify-content:space-between; height:76px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand-mark{
  height:72px; width:auto; flex-shrink:0; object-fit:contain;
  filter:
    drop-shadow(0 0 6px rgba(42,168,242,0.65))
    drop-shadow(0 0 14px rgba(42,168,242,0.45))
    drop-shadow(0 0 26px rgba(42,168,242,0.25));
  transition:filter .25s ease;
}
.brand:hover .brand-mark{
  filter:
    drop-shadow(0 0 8px rgba(42,168,242,0.8))
    drop-shadow(0 0 18px rgba(42,168,242,0.55))
    drop-shadow(0 0 32px rgba(42,168,242,0.3));
}
@media(max-width:640px){.brand-mark{height:54px;}}
.brand-name{font-family:var(--font-display); font-weight:800; font-size:19px; color:var(--steel-white); letter-spacing:0.02em; line-height:1.1;}
.brand-name span{display:block; font-family:var(--font-mono); font-weight:400; font-size:10px; letter-spacing:0.14em; color:#9aa6ab; text-transform:uppercase; margin-top:2px;}

.nav-links{display:flex; align-items:center; gap:8px;}
.nav-item{position:relative;}
.nav-links > .nav-item > a{
  font-size:14px; font-weight:500; color:#c7cfd2; padding:10px 14px; display:flex; align-items:center; gap:6px;
  transition:color .2s ease;
}
.nav-links > .nav-item > a:hover, .nav-links > .nav-item > a.active{color:var(--steel-white);}
.nav-links > .nav-item > a.active{color:var(--laser-cyan);}
.caret{width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .2s ease;}
.nav-item.has-dropdown:hover .caret{transform:rotate(225deg); margin-top:3px;}

.dropdown{
  position:absolute; top:100%; left:0; min-width:280px;
  background:var(--plate); border:1px solid var(--line); border-top:2px solid var(--laser-cyan);
  padding:8px; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  box-shadow:0 20px 40px rgba(0,0,0,0.4);
}
.nav-item.has-dropdown:hover .dropdown,
.nav-item.has-dropdown:focus-within .dropdown{opacity:1; visibility:visible; transform:translateY(0);}
.dropdown a{
  display:block; padding:11px 14px; font-size:13.5px; color:#c7cfd2; border-radius:2px;
  font-family:var(--font-body);
}
.dropdown a:hover{background:rgba(42,168,242,0.12); color:var(--steel-white);}
.dropdown a.active{color:var(--laser-cyan);}

.nav-cta{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em;
  background:var(--laser-cyan); color:var(--charcoal); padding:11px 20px; font-weight:600;
  clip-path:polygon(8px 0,100% 0,100% 100%,0 100%,0 8px);
  transition:transform .2s ease, box-shadow .2s ease; white-space:nowrap; margin-left:8px;
}
.nav-cta:hover{transform:translateY(-2px); box-shadow:0 6px 20px rgba(42,168,242,0.35);}

.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px;}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--steel-white); margin:5px 0;}

@media(max-width:980px){
  .nav-links{
    position:fixed; top:76px; left:0; right:0; bottom:0; background:var(--charcoal);
    flex-direction:column; align-items:stretch; gap:0; padding:12px 24px 32px;
    transform:translateX(-100%); transition:transform .3s ease; overflow-y:auto;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-item{width:100%; border-bottom:1px solid var(--line);}
  .nav-links > .nav-item > a{width:100%; padding:16px 0; font-size:16px; justify-content:space-between;}
  .dropdown{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:none; background:none; max-height:0; overflow:hidden; padding:0;
    transition:max-height .25s ease;
  }
  .nav-item.dd-open .dropdown{max-height:600px; padding:4px 0 12px;}
  .dropdown a{padding:12px 10px; color:#aeb8bc;}
  .nav-cta{margin:16px 0 0; text-align:center;}
  .nav-toggle{display:block;}
}

/* ---------- HERO (home) ---------- */
.hero{background:var(--charcoal); padding:150px 0 90px; position:relative; overflow:hidden;}
.hero.has-photo{
  background-image:
    linear-gradient(100deg, rgba(10,10,11,0.86) 0%, rgba(10,10,11,0.74) 40%, rgba(10,10,11,0.5) 65%, rgba(10,10,11,0.4) 100%),
    url('../images/about-hero.jpg');
  background-size:cover;
  background-position:center;
}
.hero.has-photo h1, .hero.has-photo p.lead{text-shadow:0 2px 18px rgba(0,0,0,0.65);}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 700px 500px at 12% 20%, rgba(42,168,242,0.16), transparent 60%),
    radial-gradient(ellipse 600px 500px at 78% 60%, rgba(255,168,61,0.08), transparent 60%);
}
.hero::after{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px; opacity:0.35; pointer-events:none;
  mask-image:radial-gradient(ellipse at 30% 30%, black, transparent 70%);
}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center;}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr; gap:56px;}}
.hero h1{font-size:clamp(38px,6vw,70px); color:var(--steel-white); margin:18px 0 22px; text-transform:uppercase;}
.hero h1 em{font-style:normal; color:var(--laser-cyan);}
.hero p.lead{font-size:17px; line-height:1.65; color:#b7c0c4; max-width:480px; margin-bottom:34px;}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}
.btn-primary{
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.06em; font-weight:600;
  background:var(--spark-orange); color:var(--steel-white); padding:16px 26px;
  clip-path:polygon(10px 0,100% 0,100% 100%,0 100%,0 10px);
  transition:transform .2s ease, box-shadow .2s ease; display:inline-block;
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(255,106,26,0.35);}
.btn-secondary{
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.06em; font-weight:600;
  color:var(--steel-white); padding:16px 8px; border-bottom:2px solid var(--laser-cyan);
  display:inline-flex; align-items:center; gap:8px; transition:gap .2s ease;
}
.btn-secondary:hover{gap:14px;}

.hero-panel{position:relative; background:linear-gradient(150deg, var(--plate-light), var(--plate)); border:1px solid rgba(255,255,255,0.18); box-shadow:0 30px 70px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:20px;}
.hero-panel svg{width:100%; height:100%;}
.panel-tag{position:absolute; bottom:14px; left:14px; right:14px; display:flex; justify-content:space-between; align-items:center; font-family:var(--font-mono); font-size:10px; color:#7d8a8f; letter-spacing:0.08em; border-top:1px dashed var(--line); padding-top:10px;}
.panel-tag b{color:var(--laser-cyan); font-weight:600;}

.cut-path-ghost{fill:none; stroke:rgba(255,255,255,0.14); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
.cut-path{fill:none; stroke:var(--laser-cyan); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:2200; stroke-dashoffset:2200; animation:draw 13s linear forwards 0.6s; filter:drop-shadow(0 0 6px rgba(0,217,232,0.55));}
.cut-fill{fill:#3a4650; opacity:0; animation:fillIn 1.4s ease forwards 13.8s;}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes fillIn{to{opacity:1;}}
@media (prefers-reduced-motion: reduce){.cut-path{stroke-dashoffset:0;} .cut-fill{opacity:1;}}

/* ---------- PAGE HERO (inner pages) ---------- */
.page-hero{background:var(--charcoal); padding:150px 0 56px; position:relative; overflow:hidden;}
.page-hero.has-photo{
  background-image:
    linear-gradient(180deg, rgba(10,10,11,0.90), rgba(10,10,11,0.78) 55%, rgba(10,10,11,0.95)),
    url('../images/about-hero.jpg');
  background-size:cover;
  background-position:center;
}
.page-hero::after{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px; opacity:0.3; pointer-events:none;
  mask-image:radial-gradient(ellipse at 20% 0%, black, transparent 65%);
}
.breadcrumb{position:relative; z-index:1; font-family:var(--font-mono); font-size:12px; letter-spacing:0.04em; color:#8a949899; display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px;}
.breadcrumb a{color:#9aa6ab;}
.breadcrumb a:hover{color:var(--laser-cyan);}
.breadcrumb .sep{color:#4d565a;}
.breadcrumb .current{color:var(--steel-white);}
.page-hero h1{position:relative; z-index:1; font-size:clamp(32px,5vw,52px); color:var(--steel-white); text-transform:uppercase; margin-bottom:14px;}
.page-hero p.lead{position:relative; z-index:1; font-size:16px; color:#b7c0c4; max-width:640px; line-height:1.6;}

/* ---------- TICKER ---------- */
.ticker-band{background:var(--laser-cyan); overflow:hidden; white-space:nowrap; padding:12px 0;}
.ticker-track{display:inline-flex; animation:scroll 26s linear infinite;}
.ticker-track span{font-family:var(--font-mono); font-size:13px; font-weight:600; letter-spacing:0.08em; color:var(--charcoal); text-transform:uppercase; padding:0 28px; border-right:1px solid rgba(16,19,21,0.3);}
@keyframes scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){.ticker-track{animation:none;}}

/* ---------- SECTIONS ---------- */
section{padding:96px 0;}
@media(max-width:640px){section{padding:64px 0;}}
.sec-head{max-width:640px; margin-bottom:56px;}
.sec-head h2{font-size:clamp(28px,4vw,44px); margin-top:14px; text-transform:uppercase;}
.sec-head p{font-size:16px; color:#555f63; margin-top:16px; line-height:1.6;}
.on-dark .sec-head h2{color:var(--steel-white);}
.on-dark .sec-head p{color:#aeb8bc;}

/* ---------- SERVICES / PRODUCTS GRID ---------- */
.services-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark);}
@media(max-width:980px){.services-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.services-grid{grid-template-columns:1fr;}}
.service-card{background:var(--steel-white); padding:30px 24px; transition:background .25s ease; display:flex; flex-direction:column;}
.service-card:hover{background:var(--steel-pale);}
.service-card .s-icon{width:44px; height:44px; margin-bottom:16px;}
.service-card .s-icon svg{width:100%; height:100%;}
.service-card h3{font-size:20px; margin-bottom:10px; text-transform:uppercase; letter-spacing:0.01em;}
.service-card p{font-size:14px; color:#5b6469; line-height:1.55; margin-bottom:18px; flex:1;}
.service-card .s-link{font-family:var(--font-mono); font-size:12px; letter-spacing:0.05em; color:var(--spark-orange-deep); display:inline-flex; align-items:center; gap:6px; transition:gap .2s ease;}
.service-card:hover .s-link{gap:11px;}

.services-grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark);}
@media(max-width:900px){.services-grid-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.services-grid-3{grid-template-columns:1fr;}}

/* ---------- PROCESS ---------- */
.process{background:var(--charcoal);}
.process-list{display:grid; grid-template-columns:repeat(4,1fr); gap:0;}
@media(max-width:860px){.process-list{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.process-list{grid-template-columns:1fr;}}
.process-step{padding:0 24px 0 0; border-right:1px dashed var(--line);}
.process-list > *:last-child{border-right:none;}
.process-step .num{
  font-family:var(--font-display); font-size:52px; font-weight:800; line-height:1;
  background:linear-gradient(160deg, #8fddff 0%, #2aa8f2 45%, #1c6fb0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 10px rgba(42,168,242,0.25));
}
.process-step h4{font-family:var(--font-body); font-weight:600; font-size:16px; color:var(--steel-white); margin:14px 0 8px;}
.process-step p{font-size:13.5px; color:#98a2a6; line-height:1.55;}
@media(max-width:860px){.process-step{border-right:none; border-bottom:1px dashed var(--line); padding:24px 0;}}

/* ---------- STATS ---------- */
.stats{background:var(--steel-pale); border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0;}
@media(max-width:760px){.stats-grid{grid-template-columns:1fr 1fr;}}
.stat{padding:36px 24px; border-right:1px dashed var(--line-dark); text-align:left;}
.stats-grid > *:last-child{border-right:none;}
@media(max-width:760px){.stat{border-right:1px dashed var(--line-dark); border-bottom:1px dashed var(--line-dark);}}
.stat .num{font-family:var(--font-display); font-weight:800; font-size:38px; color:var(--ink);}
.stat .num span{color:var(--spark-orange-deep);}
.stat .label{font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:#5b6469; margin-top:6px;}

/* ---------- CTA BANNER ---------- */
.cta-banner{background:linear-gradient(120deg, var(--plate), var(--charcoal)); padding:80px 0; text-align:center;}
.cta-banner h2{color:var(--steel-white); font-size:clamp(26px,4.4vw,44px); text-transform:uppercase; max-width:680px; margin:16px auto 30px;}
.cta-banner .hero-ctas{justify-content:center;}

/* ---------- DETAIL PAGE ---------- */
.detail-grid{display:grid; grid-template-columns:1.3fr 0.9fr; gap:56px;}
@media(max-width:940px){.detail-grid{grid-template-columns:1fr;}}
.detail-body h2{font-size:26px; text-transform:uppercase; margin:34px 0 14px;}
.detail-body h2:first-child{margin-top:0;}
.detail-body p{font-size:15.5px; line-height:1.7; color:#3d4448; margin-bottom:14px;}
.feature-list{display:flex; flex-direction:column; gap:10px; margin:8px 0 4px;}
.feature-list li{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:#3d4448; line-height:1.5;}
.feature-list li::before{content:"—"; color:var(--laser-cyan); font-family:var(--font-mono); flex-shrink:0;}
.spec-panel{background:var(--charcoal); padding:30px 26px; position:sticky; top:100px; align-self:start;}
.spec-panel h4{font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--laser-cyan); margin-bottom:18px;}
.spec-row{display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px dashed var(--line); font-size:13.5px;}
.spec-row:last-of-type{border-bottom:none;}
.spec-row .k{color:#8a949899; font-family:var(--font-mono); font-size:12px;}
.spec-row .v{color:var(--steel-white); text-align:right;}
.spec-panel .btn-primary{width:100%; text-align:center; margin-top:22px;}
.spec-panel .btn-outline{
  display:block; width:100%; text-align:center; margin-top:10px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.05em; color:var(--steel-white);
  border:1px solid var(--line); padding:14px 18px;
}
.spec-panel .btn-outline:hover{border-color:var(--laser-cyan); color:var(--laser-cyan);}

.hero-icon-panel{background:var(--plate); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; padding:40px; aspect-ratio:16/9; max-width:340px; margin-left:auto;}
@media(max-width:940px){.hero-icon-panel{margin:0 0 8px;}}
.hero-icon-panel svg{width:70%; height:70%;}

.related-strip{background:var(--steel-pale); padding:56px 0;}
.related-strip h3{font-size:13px; font-family:var(--font-mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--spark-orange-deep); margin-bottom:22px;}
.related-links{display:flex; gap:14px; flex-wrap:wrap;}
.related-links a{
  font-size:13.5px; padding:12px 18px; background:var(--steel-white); border:1px solid var(--line-dark);
  transition:border-color .2s ease, color .2s ease;
}
.related-links a:hover{border-color:var(--laser-cyan); color:var(--laser-cyan-deep, #1c7cb0);}

/* ---------- GALLERY (home) ---------- */
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.gallery-grid{grid-template-columns:1fr;}}
.gallery-item{border:1px solid var(--line-dark); background:var(--steel-pale); aspect-ratio:4/3; display:flex; flex-direction:column; justify-content:space-between; padding:18px; position:relative; overflow:hidden;}
.gallery-item svg{width:60%; margin:auto; opacity:0.9;}
.gallery-item .g-label{font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:#5b6469; display:flex; justify-content:space-between;}
.gallery-item .g-label b{color:var(--ink);}

/* ---------- ABOUT PAGE ---------- */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;}}
.value-list{display:flex; flex-direction:column; gap:22px;}
.value-item{display:flex; gap:16px;}
.value-item .v-num{font-family:var(--font-display); font-weight:800; font-size:28px; color:var(--laser-cyan); flex-shrink:0; width:44px;}
.value-item h4{font-size:16px; margin-bottom:6px; text-transform:uppercase;}
.value-item p{font-size:14px; color:#5b6469; line-height:1.55;}

/* chip tags used for What We Do / Industries We Serve */
.chip-grid{display:flex; flex-wrap:wrap; gap:10px;}
.chip{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 17px; background:var(--steel-white); border:1px solid var(--line-dark);
  font-size:13.5px; color:var(--ink); font-weight:500; transition:border-color .2s ease, transform .2s ease;
}
.chip .dot{width:6px; height:6px; border-radius:50%; background:var(--laser-cyan); flex-shrink:0;}
.chip.amber .dot{background:var(--spark-orange-deep);}
.chip:hover{border-color:var(--laser-cyan); transform:translateY(-2px);}
.chip.amber:hover{border-color:var(--spark-orange-deep);}

/* photo + text feature block */
.photo-feature{display:grid; grid-template-columns:0.95fr 1.05fr; gap:56px; align-items:center;}
@media(max-width:900px){.photo-feature{grid-template-columns:1fr;}}
.photo-feature .pf-image{position:relative; border:1px solid var(--line-dark); overflow:hidden;}
.photo-feature .pf-image img{width:100%; height:100%; object-fit:cover; aspect-ratio:5/4; display:block;}
.photo-feature .pf-tag{
  position:absolute; bottom:0; left:0; right:0; background:rgba(10,10,11,0.82); backdrop-filter:blur(4px);
  padding:12px 16px; font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; color:var(--steel-white); text-transform:uppercase;
  display:flex; justify-content:space-between; border-top:1px solid rgba(255,255,255,0.15);
}
.photo-feature .pf-tag b{color:var(--laser-cyan);}
.photo-feature.reverse .pf-image{order:2;}
@media(max-width:900px){.photo-feature.reverse .pf-image{order:0;}}

/* strengths grid */
.strength-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark);}
@media(max-width:860px){.strength-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.strength-grid{grid-template-columns:1fr;}}
.strength-card{background:var(--steel-white); padding:22px 20px; display:flex; gap:13px; align-items:flex-start;}
.strength-card svg{width:19px; height:19px; flex-shrink:0; fill:var(--laser-cyan); margin-top:2px;}
.strength-card span{font-size:14px; color:var(--ink); font-weight:500; line-height:1.4;}

/* mission / vision */
.mv-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line);}
@media(max-width:760px){.mv-grid{grid-template-columns:1fr;}}
.mv-card{background:var(--charcoal); padding:44px 36px;}
.mv-card .mv-icon{width:42px; height:42px; margin-bottom:20px; color:var(--laser-cyan);}
.mv-card .mv-icon svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.5;}
.mv-card h3{color:var(--steel-white); font-size:22px; text-transform:uppercase; margin-bottom:12px; letter-spacing:0.01em;}
.mv-card p{color:#aeb8bc; font-size:14.5px; line-height:1.7;}

/* quality commitment callout */
.quality-block{background:var(--steel-pale); padding:44px 48px; border-left:3px solid var(--laser-cyan);}
@media(max-width:640px){.quality-block{padding:30px 24px;}}
.quality-block p{font-size:16px; line-height:1.75; color:#3d4448; margin-bottom:14px;}
.quality-block p:last-child{margin-bottom:0;}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px;}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr; gap:48px;}}
.info-block{margin-bottom:26px;}
.info-block .k{font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--spark-orange-deep); margin-bottom:8px;}
.info-block .v{font-size:16px; line-height:1.6; color:var(--ink);}
.info-block a.v{color:var(--ink); border-bottom:1px solid var(--line-dark);}

form{display:flex; flex-direction:column; gap:18px;}
.field label{display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:#5b6469; margin-bottom:8px;}
.field input, .field textarea, .field select{width:100%; border:1px solid var(--line-dark); background:var(--steel-white); padding:13px 14px; font-family:var(--font-body); font-size:14.5px; color:var(--ink); transition:border-color .2s ease;}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--laser-cyan); outline:none;}
.field textarea{resize:vertical; min-height:110px;}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media(max-width:480px){.row-2{grid-template-columns:1fr;}}
.submit-btn{
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.06em; font-weight:600;
  background:var(--charcoal); color:var(--steel-white); padding:16px 26px; border:none; cursor:pointer;
  clip-path:polygon(10px 0,100% 0,100% 100%,0 100%,0 10px); transition:background .2s ease; align-self:flex-start;
}
.submit-btn:hover{background:var(--plate);}
.form-note{font-size:12.5px; color:#7a8388; margin-top:-4px;}
.map-embed{border:1px solid var(--line-dark); aspect-ratio:16/10; margin-top:26px; overflow:hidden;}
.map-embed iframe{width:100%; height:100%; border:0;}

/* ---------- FOOTER ---------- */
footer{background:var(--charcoal); padding:0 0 28px; color:#8a949899; position:relative;}
footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--laser-cyan) 25%, var(--spark-orange) 75%, transparent);
  opacity:0.55;
}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1.15fr; gap:48px; padding:64px 0 44px;}
@media(max-width:980px){.footer-grid{grid-template-columns:1fr 1fr; gap:44px 32px;}}
@media(max-width:620px){.footer-grid{grid-template-columns:1fr; gap:38px;}}

.footer-brand .brand{margin-bottom:16px; display:inline-flex;}
.footer-tagline{font-size:13.5px; line-height:1.65; color:#93a0a5; max-width:300px; margin-bottom:22px;}
.footer-pills{display:flex; gap:10px; flex-wrap:wrap;}
.footer-pill{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; letter-spacing:0.03em; font-weight:600;
  padding:10px 16px; border:1px solid rgba(42,168,242,0.5); color:var(--laser-cyan);
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.footer-pill svg{width:14px; height:14px; fill:currentColor; flex-shrink:0;}
.footer-pill:hover{border-color:var(--laser-cyan); color:var(--charcoal); background:var(--laser-cyan);}

.footer-col h5{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:#7d8a8f;
  padding-bottom:12px; margin-bottom:16px; border-bottom:1px solid var(--line);
}
.footer-col a, .footer-col p{display:block; font-size:13.5px; color:#b7c0c4; margin-bottom:11px; line-height:1.5;}
.footer-col a{transition:color .2s ease, padding-left .2s ease;}
.footer-col a:hover{color:var(--laser-cyan); padding-left:4px;}

.footer-contact-item{display:flex; gap:10px; align-items:flex-start; margin-bottom:14px;}
.footer-contact-item svg{width:15px; height:15px; flex-shrink:0; margin-top:2px; fill:var(--laser-cyan);}
.footer-contact-item span, .footer-contact-item a{font-size:13.5px; color:#b7c0c4; line-height:1.55;}
.footer-contact-item a:hover{color:var(--laser-cyan);}

.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding-top:24px; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:11.5px; color:#6d777b;
}
.footer-bottom a{color:#6d777b; border-bottom:1px solid transparent; transition:color .2s ease, border-color .2s ease;}
.footer-bottom a:hover{color:var(--laser-cyan); border-color:var(--laser-cyan);}