:root
  {
    --navy:#12283F;
    --navy-2:#0A1A29;
    --steel:#2E75B6;
    --amber:#F0A324;
    --cream:#F3EFE3;
    --plate:#EAE4D3;
    --ink:#181D23;
    --silver:#C7CFD6;
    --silver-dim:#8C99A6;
    --line:rgba(199,207,214,0.18);

    --font-display:'Bebas Neue', 'Arial Narrow', sans-serif;
    --font-body:'IBM Plex Sans', system-ui, sans-serif;
    --font-mono:'IBM Plex Mono', 'Courier New', monospace;

    --space-1:0.5rem;
    --space-2:1rem;
    --space-3:1.5rem;
    --space-4:2.5rem;
    --space-5:4rem;
    --space-6:6rem;

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

  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  }

  .spark 
  {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    opacity: 0;
    animation: twinkle 3.8s linear infinite;
  }

  .spark-1 { width: 5px; height: 5px; top: 18%; left: 70%; animation-delay: 0s; }
  .spark-2 { width: 3px; height: 3px; top: 32%; left: 85%; animation-delay: 0.6s; }
  .spark-3 { width: 4px; height: 4px; top: 55%; left: 76%; animation-delay: 1.2s; }
  .spark-4 { width: 3px; height: 3px; top: 12%; left: 60%; animation-delay: 1.8s; }
  .spark-5 { width: 5px; height: 5px; top: 70%; left: 90%; animation-delay: 0.9s; }

  @keyframes twinkle {
    0%, 100% { opacity: 0; transform: scale(0.6); }
    30% { opacity: 1; transform: scale(1); }
    70% { opacity: 0.55; transform: scale(0.9); }
  }

  body{
    margin:0;
    font-family:var(--font-body);
    background:var(--cream);
    color:var(--ink);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }

  img,svg{display:block; max-width:100%;}
  a{color:inherit;}
  .wrap{max-width:var(--container); margin-inline:auto; padding-inline:var(--space-3);}

  .eyebrow
  {
    font-family:var(--font-mono);
    font-size:0.72rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:0.6em;
  }

  .eyebrow::before
  {
    content:"";
    width:22px; height:2px;
    background:var(--amber);
    display:inline-block;
  }

.eyebrow--accent 
  { 
    color: var(--amber); 
  }

  .h1,.h2,.h3
  {
    font-family:var(--font-display);
    letter-spacing:0.01em;
    line-height:0.96;
    margin:0;
    text-transform:uppercase;
  }

  /* ---------- Buttons ---------- */
  .btn{
    font-family:var(--font-mono);
    font-size:0.85rem;
    font-weight:600;
    letter-spacing:0.06em;
    text-transform:uppercase;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:0.6em;
    padding:0.9em 1.4em;
    border-radius:2px;
    border:1.5px solid transparent;
    cursor:pointer;
    transition:transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .btn:active{transform:translateY(1px);}
  .btn:focus-visible{outline:2px solid var(--amber); outline-offset:3px;}
  .btn--amber{background:var(--amber); color:var(--navy-2); border-color:var(--amber);}
  .btn--amber:hover{background:#ffb841;}
  .btn--outline{background:transparent; color:var(--cream); border-color:rgba(243,239,227,0.4);}
  .btn--outline:hover{border-color:var(--cream);}
  .btn--outline-dark{background:transparent; color:var(--navy); border-color:rgba(18,40,63,0.35);}
  .btn--outline-dark:hover{border-color:var(--navy);}

  /* ---------- Header ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(10,26,41,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid rgba(199,207,214,0.14);
  }
  .header-row{
    display:flex; align-items:center; justify-content:space-between;
    gap:var(--space-2);
    padding-block:0.75rem;
  }
  .brand{display:flex; align-items:center; gap:0.7rem; text-decoration:none; color:var(--cream);}
  .brand-mark{width:42px; height:42px; flex:none;}
  .brand-text{line-height:1.15;}
  .brand-text .name{
    font-family:var(--font-display);
    font-size:1.15rem;
    letter-spacing:0.03em;
    color:var(--cream);
  }
  .brand-text .sub{
    font-family:var(--font-mono);
    font-size:0.62rem;
    letter-spacing:0.1em;
    color:var(--silver-dim);
    text-transform:uppercase;
  }
  nav{display:flex; align-items:center; gap:var(--space-3);}
  nav .nav-links{display:flex; gap:var(--space-3); font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase;}
  nav .nav-links a{text-decoration:none; color:var(--silver); border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color 0.15s ease, color 0.15s ease;}
  nav .nav-links a:hover{color:var(--amber); border-color:var(--amber);}
  @media (max-width:640px){ nav .nav-links{display:none;} }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    background:
      radial-gradient(ellipse 60% 55% at 82% 15%, rgba(240,163,36,0.16), transparent 60%),
      linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
    color:var(--cream);
    overflow:hidden;
    padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 7vw, 5rem);
  }
  .hero .spark{
    position:absolute; border-radius:50%;
    background:var(--amber);
    box-shadow:0 0 8px 2px rgba(240,163,36,0.7);
    opacity:0.85;
    animation:spark-flicker 2.4s ease-in-out infinite;
  }
  @keyframes spark-flicker{
    0%,100%{opacity:0.15; transform:scale(0.7);}
    50%{opacity:0.9; transform:scale(1);}
  }
  .hero-grid{
    display:grid;
    grid-template-columns: 1.35fr 1fr;
    gap: var(--space-4);
    align-items:end;
    position:relative;
    z-index:2;
  }
  @media (max-width:820px){ .hero-grid{grid-template-columns:1fr;} }

  .hero h1{
    font-size:clamp(2.6rem, 7vw, 5.2rem);
    color:var(--cream);
  }
  .hero h1 span{color:var(--amber);}
  .hero .lede{
    font-family:var(--font-body);
    font-size:clamp(1rem, 1.6vw, 1.15rem);
    color:var(--silver);
    max-width:34em;
    margin-top:var(--space-2);
  }
  .hero .cta-row{display:flex; flex-wrap:wrap; gap:0.9rem; margin-top:var(--space-4);}

  .plate-card{
    background:rgba(243,239,227,0.05);
    border:1px solid rgba(199,207,214,0.22);
    border-radius:var(--radius);
    padding:var(--space-3);
    font-family:var(--font-mono);
  }
  .plate-card .row{
    display:flex; justify-content:space-between; gap:1rem;
    padding-block:0.55rem;
    border-bottom:1px dashed rgba(199,207,214,0.18);
    font-size:0.8rem;
  }
  .plate-card .row:last-child{border-bottom:none;}
  .plate-card .row dt{color:var(--silver-dim); text-transform:uppercase; letter-spacing:0.06em;}
  .plate-card .row dd{margin:0; color:var(--cream); text-align:right; font-weight:600;}

  /* ---------- Hazard stripe / conveyor motif ---------- */
  .stripe-thin{
    height:10px;
    background:repeating-linear-gradient(135deg, var(--amber) 0 18px, var(--navy-2) 18px 36px);
  }
  .marquee{
    background:var(--navy-2);
    overflow:hidden;
    border-top:1px solid rgba(199,207,214,0.12);
    border-bottom:1px solid rgba(199,207,214,0.12);
  }
  .marquee__track{
    display:flex;
    width:max-content;
    animation:marquee-scroll 26s linear infinite;
    padding-block:0.85rem;
  }
  .marquee__track span{
    font-family:var(--font-mono);
    font-size:0.82rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--silver);
    white-space:nowrap;
    padding-inline:1.1rem;
  }
  .marquee__track span.mark{color:var(--amber);}
  @keyframes marquee-scroll{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }

  /* ---------- Sections ---------- */
  section{padding-block: var(--space-6);}
  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end; gap:var(--space-3);
    margin-bottom:var(--space-4);
    flex-wrap:wrap;
  }
  .section-head h2{font-size:clamp(2rem, 4.2vw, 3rem); color:var(--navy);}
  .section-head p{font-family:var(--font-body); color:#4A5560; max-width:32em; margin:0.6rem 0 0;}

  /* ---------- Services grid (nameplates) ---------- */
  .services-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:var(--space-3);
  }
  .nameplate{
    position:relative;
    background:var(--plate);
    border:1px solid rgba(18,40,63,0.14);
    border-radius:var(--radius);
    padding: var(--space-3) var(--space-3) var(--space-3);
    transition:transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  }
  .nameplate:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 28px rgba(18,40,63,0.14);
    border-color:rgba(18,40,63,0.28);
  }
  .rivet{
    position:absolute; width:7px; height:7px; border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #fff, var(--silver-dim) 70%);
    box-shadow:0 1px 2px rgba(0,0,0,0.35);
  }
  .rivet.tl{top:9px; left:9px;} .rivet.tr{top:9px; right:9px;}
  .rivet.bl{bottom:9px; left:9px;} .rivet.br{bottom:9px; right:9px;}

  .nameplate .tag{
    font-family:var(--font-mono);
    font-size:0.66rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--steel);
    font-weight:600;
  }
  .nameplate .icon{
    width:46px; height:46px;
    color:var(--navy);
    margin-block:0.9rem 0.6rem;
  }
  .nameplate h3{
    font-size:1.7rem;
    color:var(--navy);
    letter-spacing:0.01em;
  }
  .nameplate .scope{
    font-family:var(--font-mono);
    font-size:0.72rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:#B0761B;
    font-weight:600;
    margin-top:0.3rem;
  }
  .nameplate .desc{
    font-family:var(--font-body);
    font-size:0.92rem;
    color:#3E4750;
    margin-top:0.6rem;
  }

  /* ---------- Trust strip ---------- */
  .trust{
    background:var(--navy);
    color:var(--cream);
  }
  .trust .wrap{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:var(--space-4);
  }
  @media (max-width:760px){ .trust .wrap{grid-template-columns:1fr;} }
  .trust-item .num{
    font-family:var(--font-display);
    font-size:2.2rem;
    color:var(--amber);
    letter-spacing:0.02em;
  }
  .trust-item p{font-family:var(--font-body); color:var(--silver); font-size:0.92rem; margin:0.3rem 0 0; max-width:26em;}

  /* ---------- Contact / dataplate ---------- */
  .contact{
    background:var(--cream);
  }
  .dataplate{
    background:linear-gradient(180deg, #17324D, var(--navy-2));
    border-radius:6px;
    color:var(--cream);
    padding:clamp(1.75rem, 4vw, 3rem);
    position:relative;
    overflow:hidden;
    border:1px solid rgba(199,207,214,0.15);
  }
  .dataplate::before{
    content:"";
    position:absolute; inset:10px;
    border:1px dashed rgba(199,207,214,0.18);
    border-radius:3px;
    pointer-events:none;
  }
  .dataplate-grid{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:var(--space-4);
  }
  @media (max-width:760px){ .dataplate-grid{grid-template-columns:1fr;} }
  .dataplate h2{font-size:clamp(1.9rem, 4vw, 2.6rem); color:var(--cream);}
  .dataplate .lede{font-family:var(--font-body); color:var(--silver); margin-top:0.6rem; max-width:30em;}
  .dataplate .cta-row{display:flex; flex-wrap:wrap; gap:0.9rem; margin-top:var(--space-3);}

  .dl-list{margin:0; padding:0; list-style:none; font-family:var(--font-mono);}
  .dl-list li{
    display:flex; flex-direction:column; gap:0.15rem;
    padding-block:0.8rem;
    border-top:1px solid rgba(199,207,214,0.16);
  }
  .dl-list li:first-child{border-top:none;}
  .dl-list .k{font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--silver-dim);}
  .dl-list .v{font-size:1rem; color:var(--cream); font-weight:600;}
  .dl-list .v a{text-decoration:none; color:var(--amber);}
  .dl-list .v a:hover{text-decoration:underline;}

  /* ---------- Footer ---------- */
  footer{
    background:var(--navy-2);
    color:var(--silver-dim);
    padding-block:var(--space-3);
    font-family:var(--font-mono);
    font-size:0.72rem;
    letter-spacing:0.04em;
  }
  footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.5rem;}

  :focus-visible{outline:2px solid var(--amber); outline-offset:2px;}