/* ============================================================
   ADITYA ENTERPRISES — DESIGN SYSTEM
   Structural-grid concept: content is organised like a PEB frame —
   horizontal "beams" (rules) divide sections, vertical "bays" divide
   columns, and stat data reads like nameplates riveted to steel.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800;900&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* --- colour tokens --- */
  --ink:        #12161C;
  --steel-900:  #171F28;
  --steel-800:  #202B37;
  --steel-700:  #2E3D4E;
  --steel-500:  #52697C;
  --steel-300:  #9AAEBB;
  --steel-200:  #C7D2D9;
  --amber:      #E36414;
  --amber-deep: #B84B0A;
  --amber-glow: #F2A65A;
  --paper:      #F3F1EA;
  --paper-dim:  #EAE6DC;
  --card:       #FFFFFF;
  --line:       rgba(18,22,28,0.13);
  --line-soft:  rgba(18,22,28,0.07);
  --line-dark:  rgba(243,241,234,0.16);

  /* --- accent colour tokens (trend layer) --- */
  --teal:       #17BFA5;
  --teal-deep:  #0E9382;
  --teal-glow:  #6BE3D0;
  --violet:     #7C6CF2;
  --grad-warm:  linear-gradient(115deg, var(--amber) 0%, #F2953D 45%, var(--teal) 100%);
  --grad-cool:  linear-gradient(115deg, var(--teal-deep) 0%, var(--teal) 50%, var(--teal-glow) 100%);
  --grad-line:  linear-gradient(90deg, var(--amber) 0%, var(--teal) 100%);

  /* --- type tokens --- */
  --f-display: 'Big Shoulders Display', sans-serif;
  --f-body:    'IBM Plex Sans', sans-serif;
  --f-mono:    'IBM Plex Mono', monospace;

  --container: 1220px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--f-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

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

/* ---------- eyebrow / tag / mono labels ---------- */
.eyebrow{
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 14px;
  font-weight:500;
}
.eyebrow::before{
  content:"";
  width: 22px;
  height: 2px;
  background: var(--amber);
  display:inline-block;
}

h1,h2,h3,h4{
  font-family: var(--f-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: uppercase;
}
h1{ font-size: clamp(2.6rem, 5.6vw, 5rem); }
h2{ font-size: clamp(2rem, 4vw, 3.1rem); }
h3{ font-size: clamp(1.35rem, 2.4vw, 1.8rem); }
h4{ font-size: 1.1rem; letter-spacing: 0.01em;}

p.lead{
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--steel-700);
  max-width: 62ch;
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(23,31,40,0.97);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line-dark);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height: 76px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  color: var(--paper);
}
.brand-mark{
  width:42px; height:42px;
  border:2px solid var(--amber);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--f-display);
  font-weight:900;
  font-size:1.05rem;
  color:var(--amber);
  flex-shrink:0;
  position:relative;
}
.brand-mark::after{
  content:"";
  position:absolute; inset:5px;
  border:1px solid rgba(227,100,20,0.35);
}
.brand-text{
  display:flex; flex-direction:column; line-height:1.15;
}
.brand-text strong{
  font-family: var(--f-display);
  font-weight:800;
  font-size:1.18rem;
  letter-spacing:0.01em;
  text-transform:uppercase;
}
.brand-text span{
  font-family: var(--f-mono);
  font-size:10.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color: var(--amber-glow);
}
.main-nav{
  display:flex;
  align-items:center;
  gap:34px;
}
.main-nav a{
  color: var(--steel-200);
  font-size: 14.5px;
  font-weight:500;
  letter-spacing:0.01em;
  position:relative;
  padding:4px 0;
  transition: color .15s ease;
}
.main-nav a:hover, .main-nav a.active{ color: var(--paper); }
.main-nav a.active::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px;
  height:2px; background:var(--amber);
}
.header-cta{
  display:flex; align-items:center; gap:14px;
}
.header-phone{
  display:flex; flex-direction:column; align-items:flex-end;
  color:var(--steel-300);
  font-size:12px;
  line-height:1.3;
}
.header-phone strong{
  font-family: var(--f-mono);
  color:var(--paper);
  font-size:14px;
  letter-spacing:0.02em;
}
.nav-toggle{
  display:none;
  background:none; border:1px solid var(--line-dark);
  width:44px; height:44px;
  color:var(--paper);
  align-items:center; justify-content:center;
  font-size: 1.3rem;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform: uppercase;
  padding: 14px 26px;
  border: 1.5px solid transparent;
  white-space:nowrap;
  transition: all .18s ease;
}
.btn-amber{
  background: var(--amber);
  color: #fff;
  border-color: var(--amber);
}
.btn-amber:hover{ background: var(--amber-deep); border-color: var(--amber-deep); transform: translateY(-1px);}
.btn-outline-dark{
  border-color: var(--line-dark);
  color: var(--paper);
}
.btn-outline-dark:hover{ border-color: var(--amber); color:var(--amber-glow); }
.btn-outline-ink{
  border-color: var(--ink);
  color: var(--ink);
}
.btn-outline-ink:hover{ background: var(--ink); color: var(--paper); }
.btn-block{ width:100%; justify-content:center; }
.btn-sm{ padding:10px 18px; font-size:11.5px; }
.btn svg{width:15px; height:15px; flex-shrink:0;}

/* ============================================================
   STRUCTURAL SECTION FRAME — "beam" rule + bay ticks
   ============================================================ */
.beam-top{
  border-top: 1px solid var(--line);
  position:relative;
}
.beam-top::before{
  content:"";
  position:absolute; top:-1px; left:0;
  width: 64px; height:3px;
  background: var(--amber);
}
section{ padding: 100px 0; position:relative; }
section.tight{ padding: 64px 0; }
.section-dark{ background: var(--steel-900); color: var(--paper); }
.section-dark h2, .section-dark h3, .section-dark h4{ color: var(--paper); }
.section-dark .beam-top{ border-top-color: var(--line-dark); }
.section-mid{ background: var(--paper-dim); }

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 40px;
  margin-bottom: 56px;
}
.section-head .lead{ margin-top:14px; }
.section-head-single{ max-width: 720px; margin: 0 auto 56px; text-align:center; }
.section-head-single .eyebrow{ justify-content:center; }
.section-head-single .eyebrow::before{ display:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height: 92vh;
  display:flex;
  align-items:flex-end;
  background: var(--steel-900);
  overflow:hidden;
  padding-top: 76px;
}
.hero-img{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center 62%;
  filter: saturate(0.92) brightness(0.55);
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(23,31,40,0.35) 0%, rgba(23,31,40,0.55) 40%, rgba(23,31,40,0.96) 100%);
}
.hero-inner{
  position:relative; z-index:2;
  padding-bottom: 76px;
  width:100%;
}
.hero-tag{
  font-family: var(--f-mono);
  color: var(--amber-glow);
  font-size:13px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  margin-bottom:22px;
  display:flex; align-items:center; gap:12px;
}
.hero-tag .dot{ width:7px; height:7px; background:var(--amber); border-radius:50%; }
.hero h1{
  color:#fff;
  max-width: 15ch;
  margin-bottom: 26px;
}
.hero h1 em{
  font-style:normal;
  color: var(--amber-glow);
}
.hero .lead{
  color: var(--steel-200);
  max-width: 52ch;
  margin-bottom:38px;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

.hero-stats{
  position:relative; z-index:2;
  border-top:1px solid var(--line-dark);
  margin-top: 64px;
}
.hero-stats .wrap{
  display:grid;
  grid-template-columns: repeat(4,1fr);
}
.hstat{
  padding: 22px 28px;
  border-right: 1px solid var(--line-dark);
}
.hstat:last-child{ border-right:none; }
.hstat b{
  display:block;
  font-family: var(--f-display);
  font-weight:800;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  color:#fff;
  line-height:1;
  margin-bottom:6px;
}
.hstat span{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color: var(--steel-300);
}

/* generic page hero (inner pages) */
.page-hero{
  position:relative;
  min-height: 52vh;
  display:flex;
  align-items:flex-end;
  background: var(--steel-900);
  overflow:hidden;
  padding-top:76px;
}
.page-hero .hero-img{ background-position:center 55%; }
.page-hero .hero-inner{ padding-bottom:56px; }
.page-hero h1{ color:#fff; max-width:22ch; margin-bottom:16px; }
.page-hero .lead{ color:var(--steel-200); max-width:56ch; }
.crumb{
  font-family: var(--f-mono);
  font-size:12px;
  letter-spacing:0.06em;
  color: var(--steel-300);
  text-transform:uppercase;
  margin-bottom:18px;
  display:flex; gap:8px;
}
.crumb a:hover{ color:var(--amber-glow); }

/* ============================================================
   BAY GRID — service / stat / card grids with tick markers
   ============================================================ */
.bay-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.bay-grid.cols-4{ grid-template-columns: repeat(4,1fr); }
.bay{
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding: 38px 34px;
  position:relative;
  transition: background .18s ease;
}
.bay:hover{ background: rgba(227,100,20,0.045); }
.bay-num{
  font-family: var(--f-mono);
  font-size:12px;
  color: var(--amber);
  letter-spacing:0.06em;
  margin-bottom:20px;
  display:block;
}
.bay h4{ margin-bottom:12px; text-transform:none; letter-spacing:0; font-weight:700;}
.bay p{ color:var(--steel-700); font-size:14.5px; }
.bay a.bay-link{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:16px;
  font-family:var(--f-mono);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color: var(--ink);
  border-bottom:1px solid var(--ink);
  padding-bottom:2px;
}
.bay a.bay-link:hover{ color:var(--amber-deep); border-color:var(--amber-deep); }

.section-dark .bay-grid{ border-color: var(--line-dark); }
.section-dark .bay{ border-color: var(--line-dark); }
.section-dark .bay p{ color: var(--steel-300); }
.section-dark .bay-link{ color:var(--paper); border-color:var(--paper); }

/* stat plates (manufacturing numbers) */
.plate-grid{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:1px;
  background: var(--line-dark);
  border:1px solid var(--line-dark);
}
.plate{
  background: var(--steel-800);
  padding: 30px 26px;
}
.plate b{
  display:block;
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(1.7rem,2.6vw,2.3rem);
  color: var(--amber-glow);
  line-height:1;
  margin-bottom:10px;
}
.plate span{
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--steel-300);
  display:block;
  line-height:1.4;
}

/* ============================================================
   BUILD SEQUENCE — signature element
   ============================================================ */
.sequence{
  overflow-x:auto;
  scrollbar-width: thin;
  scrollbar-color: var(--amber) var(--steel-800);
  padding-bottom: 20px;
}
.sequence::-webkit-scrollbar{ height:6px; }
.sequence::-webkit-scrollbar-track{ background: var(--steel-800); }
.sequence::-webkit-scrollbar-thumb{ background: var(--amber); }
.sequence-track{
  display:flex;
  gap:0;
  min-width: max-content;
  position:relative;
}
.seq-stage{
  width: 300px;
  flex-shrink:0;
  border-right: 1px solid var(--line-dark);
  padding-right:28px;
  margin-right:28px;
  position:relative;
}
.seq-stage:last-child{ border-right:none; }
.seq-line{
  position:absolute;
  top:14px; left:0; right:28px;
  height:1px;
  background: var(--line-dark);
}
.seq-stage::before{
  content:"";
  position:absolute;
  top:10px; left:0;
  width:9px; height:9px;
  background: var(--amber);
  border-radius:50%;
  z-index:2;
}
.seq-num{
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--amber-glow);
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin:34px 0 14px;
  display:block;
}
.seq-stage img{
  width:100%;
  height:190px;
  object-fit:cover;
  margin-bottom:16px;
  filter: saturate(0.95);
}
.seq-stage h4{ color:#fff; margin-bottom:8px; font-size:1.02rem; }
.seq-stage p{ color:var(--steel-300); font-size:13.5px; }

/* ============================================================
   PROJECT / PORTFOLIO CARDS
   ============================================================ */
.filter-bar{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-bottom: 44px;
}
.filter-btn{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:10px 18px;
  border:1px solid var(--line);
  background:transparent;
  color: var(--steel-700);
  transition: all .15s ease;
}
.filter-btn:hover{ border-color: var(--ink); color:var(--ink); }
.filter-btn.active{ background: var(--ink); border-color:var(--ink); color:#fff; }

.proj-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.proj-card{
  background: var(--card);
  border:1px solid var(--line);
  overflow:hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.proj-card:hover{ box-shadow: 0 18px 34px rgba(18,22,28,0.14); transform: translateY(-3px); }
.proj-media{ position:relative; overflow:hidden; height:230px; }
.proj-media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.proj-card:hover .proj-media img{ transform: scale(1.06); }
.proj-tag{
  position:absolute; top:14px; left:14px;
  background: rgba(23,31,40,0.88);
  color: var(--amber-glow);
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:6px 10px;
}
.proj-body{ padding:22px 24px 26px; }
.proj-loc{
  font-family:var(--f-mono);
  font-size:11.5px;
  color: var(--amber-deep);
  letter-spacing:0.04em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.proj-body h4{ text-transform:none; letter-spacing:0; margin-bottom:8px; }
.proj-body p{ font-size:13.5px; color:var(--steel-700); }

/* ============================================================
   PROCESS / TIMELINE (Why Us)
   ============================================================ */
.timeline{
  display:flex;
  flex-direction:column;
}
.tl-row{
  display:grid;
  grid-template-columns: 90px 1fr;
  gap: 28px;
  padding: 30px 0;
  border-top:1px solid var(--line);
}
.tl-row:last-child{ border-bottom:1px solid var(--line); }
.tl-num{
  font-family: var(--f-display);
  font-weight:800;
  font-size:2.2rem;
  color: var(--steel-200);
  line-height:1;
}
.tl-body h4{ margin-bottom:8px; text-transform:none; letter-spacing:0; }
.tl-body p{ color:var(--steel-700); font-size:14.5px; max-width:60ch; }

/* ============================================================
   TESTIMONIAL / CTA BAND
   ============================================================ */
.cta-band{
  background: var(--steel-900);
  color:#fff;
  padding: 84px 0;
  position:relative;
  overflow:hidden;
}
.cta-band::before{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(243,241,234,0.035) 80px);
}
.cta-inner{
  position:relative; z-index:1;
  display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap;
}
.cta-inner h2{ color:#fff; max-width:14ch; }
.cta-inner .lead{ color: var(--steel-300); margin-top:14px; max-width:44ch; }
.cta-actions{ display:flex; gap:16px; flex-wrap:wrap; }

/* ============================================================
   FORMS
   ============================================================ */
.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-grid .full{ grid-column: 1 / -1; }
.field label{
  display:block;
  font-family: var(--f-mono);
  font-size:11.5px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color: var(--steel-500);
  margin-bottom:8px;
}
.field input, .field select, .field textarea{
  width:100%;
  border:1px solid var(--line);
  background: var(--card);
  padding: 13px 14px;
  font-family: var(--f-body);
  font-size:14.5px;
  color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-color: var(--amber);
}
.field textarea{ resize:vertical; min-height:110px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background: var(--steel-900);
  color: var(--steel-300);
  padding-top: 76px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line-dark);
}
.footer-brand p{ margin-top:18px; font-size:14px; max-width:34ch; color:var(--steel-300); }
.footer-col h4{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#fff;
  font-weight:600;
  margin-bottom:18px;
}
.footer-col ul li{ margin-bottom:11px; }
.footer-col a{ font-size:14px; color:var(--steel-300); transition:color .15s; }
.footer-col a:hover{ color: var(--amber-glow); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding: 26px 0;
  font-size:12.5px;
  color: var(--steel-500);
  flex-wrap:wrap; gap:10px;
}
.footer-bottom a:hover{ color:var(--amber-glow); }

/* whatsapp / call fixed mobile bar */
.mobile-bar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background: var(--steel-900);
  border-top:1px solid var(--line-dark);
}
.mobile-bar .wrap{ display:flex; padding:0; max-width:none; }
.mobile-bar a{
  flex:1;
  text-align:center;
  padding:16px 8px;
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:#fff;
  border-right:1px solid var(--line-dark);
}
.mobile-bar a:last-child{ border-right:none; }
.mobile-bar a.wa{ background: var(--amber); }

/* ============================================================
   UTILITIES
   ============================================================ */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.text-center{ text-align:center; }
.mt-lg{ margin-top:64px; }
.tag-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.tag-pill{
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  border:1px solid var(--line);
  padding:7px 14px;
  color:var(--steel-700);
}
.img-frame{ border:1px solid var(--line); overflow:hidden; }
.img-frame img{ width:100%; height:100%; object-fit:cover; }

.note-box{
  border-left:3px solid var(--amber);
  background: var(--paper-dim);
  padding: 22px 26px;
  font-size:14px;
  color: var(--steel-700);
}
.note-box strong{ color:var(--ink); }

/* reveal-on-scroll */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px){
  .main-nav{ display:none; }
  .header-phone{ display:none; }
  .nav-toggle{ display:flex; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .bay-grid{ grid-template-columns: repeat(2,1fr); }
  .bay-grid.cols-4{ grid-template-columns: repeat(2,1fr); }
  .plate-grid{ grid-template-columns: repeat(2,1fr); }
  .proj-grid{ grid-template-columns: repeat(2,1fr); }
  .hero-stats .wrap{ grid-template-columns: repeat(2,1fr); }
  .hstat:nth-child(2){ border-right:none; }
  .grid-2{ grid-template-columns:1fr; gap:36px; }
  .mobile-bar{ display:block; }
  body{ padding-bottom: 54px; }
}
@media (max-width: 640px){
  section{ padding: 64px 0; }
  .bay-grid, .bay-grid.cols-4{ grid-template-columns: 1fr; }
  .plate-grid{ grid-template-columns: repeat(2,1fr); }
  .proj-grid{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; gap:34px; }
  .section-head{ flex-direction:column; align-items:flex-start; }
  .cta-inner{ flex-direction:column; align-items:flex-start; }
  .hero-stats .wrap{ grid-template-columns: repeat(2,1fr); }
}

/* mobile nav drawer */
.mobile-nav{
  position:fixed; inset:0; z-index:150;
  background: var(--steel-900);
  transform: translateX(100%);
  transition: transform .3s ease;
  padding: 100px 32px 40px;
  overflow-y:auto;
}
.mobile-nav.open{ transform: translateX(0); }
.mobile-nav a{
  display:block;
  font-family: var(--f-display);
  font-weight:700;
  font-size:1.7rem;
  text-transform:uppercase;
  color: var(--paper);
  padding: 16px 0;
  border-bottom:1px solid var(--line-dark);
}
.mobile-nav a:hover{ color: var(--amber-glow); }
.mobile-nav .btn{ margin-top:30px; }

/* ============================================================
   TREND LAYER — gradient accents, glow, motion, micro-interaction
   (layered on top of the structural design system above)
   ============================================================ */

/* ---------- scroll progress bar ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:300;
  background: var(--grad-line);
  transform-origin:left;
  transform: scaleX(0);
  transition: transform .08s linear;
  pointer-events:none;
}

/* ---------- header: glass state after scroll ---------- */
.site-header{ transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease; }
.site-header.is-scrolled{
  background: rgba(18,22,28,0.86);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
}

/* ---------- gradient accents replacing flat amber lines ---------- */
.beam-top::before{ background: var(--grad-line); }
.eyebrow::before{ background: var(--grad-line); }
.hero-tag .dot{
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(227,100,20,0.55);
  animation: dotPulse 2.2s ease-out infinite;
}
@keyframes dotPulse{
  0%   { box-shadow: 0 0 0 0 rgba(227,100,20,0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(227,100,20,0); }
  100% { box-shadow: 0 0 0 0 rgba(227,100,20,0); }
}

/* ---------- gradient headline word ---------- */
.hero h1 em{
  font-style:normal;
  background: linear-gradient(100deg, var(--amber-glow) 10%, var(--teal-glow) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position:relative;
}

/* ---------- animated hero glow field ---------- */
.hero, .page-hero{ isolation:isolate; }
.hero::before, .page-hero::before{
  content:"";
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(560px 420px at 14% 18%, rgba(227,100,20,0.30), transparent 60%),
    radial-gradient(620px 460px at 88% 82%, rgba(23,191,165,0.26), transparent 62%);
  mix-blend-mode: screen;
  animation: glowDrift 14s ease-in-out infinite alternate;
}
@keyframes glowDrift{
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(1.5%, -2%, 0) scale(1.06); }
}

/* ---------- buttons: shine sweep + lift + glow ---------- */
.btn{ position:relative; overflow:hidden; }
.btn::before{
  content:"";
  position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-18deg);
  transition: left .55s ease;
  pointer-events:none;
}
.btn:hover::before{ left:130%; }
.btn-amber{
  background: var(--grad-warm);
  background-size: 180% 180%;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(227,100,20,0.28);
  transition: box-shadow .25s ease, transform .18s ease, background-position .5s ease;
}
.btn-amber:hover{
  background-position: 100% 0;
  box-shadow: 0 10px 26px rgba(227,100,20,0.4);
  transform: translateY(-2px);
}
.btn-outline-dark:hover, .btn-outline-ink:hover{ transform: translateY(-2px); }

/* ---------- stat numbers: gradient + tabular alignment for counters ---------- */
.hstat b, .plate b{
  font-variant-numeric: tabular-nums;
}
.hstat{ transition: transform .25s ease; }
.hstat:hover{ transform: translateY(-3px); }

/* ---------- bay cards: gradient border glow + lift ---------- */
.bay{
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.bay:hover{
  background: rgba(227,100,20,0.05);
  transform: translateY(-4px);
  box-shadow: inset 0 3px 0 0 var(--amber), 0 16px 30px rgba(18,22,28,0.08);
  z-index:2;
}
.section-dark .bay:hover{
  box-shadow: inset 0 3px 0 0 var(--teal-glow), 0 16px 30px rgba(0,0,0,0.35);
}
.bay-num{
  background: var(--grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- project cards: richer hover ---------- */
.proj-card{ transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease; }
.proj-card:hover{
  box-shadow: 0 22px 40px rgba(18,22,28,0.18);
  transform: translateY(-6px);
  border-color: rgba(227,100,20,0.35);
}
.proj-tag{ background: linear-gradient(120deg, rgba(23,31,40,0.92), rgba(23,31,40,0.78)); }

/* ---------- plate grid: gradient number + hover pop ---------- */
.plate{ transition: background .25s ease, transform .25s ease; position:relative; overflow:hidden; }
.plate::after{
  content:""; position:absolute; inset:0;
  background: var(--grad-cool); opacity:0;
  transition: opacity .3s ease;
}
.plate:hover{ transform: translateY(-3px); }
.plate:hover::after{ opacity:0.08; }
.plate b{
  background: var(--grad-cool);
  -webkit-background-clip: text;
  background-clip:text;
  color:transparent;
  position:relative; z-index:1;
}
.plate span{ position:relative; z-index:1; }

/* ---------- build sequence: animated dot + gradient line ---------- */
.seq-stage::before{
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(227,100,20,0.18);
}
.seq-line{ background: linear-gradient(90deg, var(--amber), var(--teal), transparent); opacity:.55; }
.seq-stage img{ transition: transform .5s ease, filter .3s ease; }
.seq-stage:hover img{ transform: scale(1.04); filter: saturate(1.05); }

/* ---------- CTA band: animated gradient shimmer ---------- */
.cta-band{
  background: linear-gradient(120deg, var(--steel-900) 0%, #1B2A33 50%, var(--steel-900) 100%);
  background-size:220% 220%;
  animation: ctaShift 10s ease infinite;
}
@keyframes ctaShift{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
.cta-band::before{
  background:
    repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(243,241,234,0.035) 80px),
    radial-gradient(420px 260px at 85% 20%, rgba(23,191,165,0.16), transparent 65%);
}

/* ---------- filter buttons: gradient active state ---------- */
.filter-btn.active{
  background: var(--grad-warm);
  border-color: transparent;
  color:#fff;
}

/* ---------- capability marquee (homepage) ---------- */
.marquee{
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
  background: var(--steel-900);
  overflow:hidden;
  padding: 18px 0;
  position:relative;
}
.marquee-track{
  display:flex;
  width:max-content;
  gap:0;
  animation: marqueeScroll 32s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state: paused; }
.marquee-item{
  display:flex; align-items:center; gap:12px;
  font-family: var(--f-mono);
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color: var(--steel-300);
  padding: 0 36px;
  white-space:nowrap;
}
.marquee-item::before{
  content:"◆";
  color: var(--amber);
  font-size:9px;
}
@keyframes marqueeScroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; }
  .hero::before, .page-hero::before{ animation:none; }
  .cta-band{ animation:none; }
}

/* ---------- staggered reveal (children fade up in sequence) ---------- */
.bay-grid .bay, .proj-grid .proj-card, .plate-grid .plate, .sequence-track .seq-stage{
  opacity:0; transform: translateY(18px);
  animation: staggerIn .6s ease forwards;
  animation-play-state: paused;
}
.reveal.in .bay,        .reveal.in .proj-card,
.reveal.in .plate,      .reveal.in .seq-stage,
.in .bay, .in .proj-card, .in .plate, .in .seq-stage{
  animation-play-state: running;
}
.bay-grid .bay:nth-child(1),.proj-grid .proj-card:nth-child(1),.plate-grid .plate:nth-child(1),.sequence-track .seq-stage:nth-child(1){ animation-delay:.02s; }
.bay-grid .bay:nth-child(2),.proj-grid .proj-card:nth-child(2),.plate-grid .plate:nth-child(2),.sequence-track .seq-stage:nth-child(2){ animation-delay:.10s; }
.bay-grid .bay:nth-child(3),.proj-grid .proj-card:nth-child(3),.plate-grid .plate:nth-child(3),.sequence-track .seq-stage:nth-child(3){ animation-delay:.18s; }
.bay-grid .bay:nth-child(4),.plate-grid .plate:nth-child(4),.sequence-track .seq-stage:nth-child(4){ animation-delay:.26s; }
.bay-grid .bay:nth-child(5),.sequence-track .seq-stage:nth-child(5){ animation-delay:.34s; }
.bay-grid .bay:nth-child(6){ animation-delay:.42s; }
.bay-grid .bay:nth-child(7){ animation-delay:.50s; }
.bay-grid .bay:nth-child(8){ animation-delay:.58s; }
.bay-grid .bay:nth-child(9){ animation-delay:.66s; }
@keyframes staggerIn{
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .bay-grid .bay, .proj-grid .proj-card, .plate-grid .plate, .sequence-track .seq-stage{
    opacity:1; transform:none; animation:none;
  }
}

/* ---------- form fields: focus glow ---------- */
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(23,191,165,0.16);
}

/* ---------- footer link underline sweep ---------- */
.footer-col a, .brand{ position:relative; }
.footer-col a{ display:inline-block; }
.footer-col a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px;
  background: var(--grad-line);
  transition: right .25s ease;
}
.footer-col a:hover::after{ right:0; }

/* ---------- back-to-top ---------- */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:200;
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  background: var(--grad-warm);
  color:#fff;
  border-radius:50%;
  box-shadow: 0 10px 24px rgba(18,22,28,0.28);
  font-size:18px;
  opacity:0; transform: translateY(12px);
  pointer-events:none;
  transition: opacity .25s ease, transform .25s ease;
}
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ transform: translateY(-3px); }
@media (max-width:980px){ .to-top{ bottom:70px; } }