:root{
    --bg-dark:#12181F;
    --bg-dark-2:#1A222B;
    --bg-light:#EDEFF2;
    --steel:#3A4550;
    --accent:#C4630A;
    --accent-2:#E07A1F;
    --meta:#8A97A3;
    --white:#F7F8F9;
    --radius:14px;
    --maxw:1180px;
    --ease:cubic-bezier(.16,.84,.44,1);
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    font-family:'Inter',sans-serif;
    color:var(--steel);
    background:var(--bg-light);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    text-align:center;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  ul{ margin:0; padding:0; list-style:none; }
  h1,h2,h3{ margin:0; font-family:'Space Grotesk',sans-serif; }

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

  *:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

  /* ---------- SCROLL PROGRESS ---------- */
  .scroll-progress{
    position:fixed; top:0; left:0;
    height:3px; width:0%;
    background:linear-gradient(90deg, var(--accent), var(--accent-2));
    z-index:200;
    transition:width .12s linear;
  }

  /* ---------- NAV ---------- */
  .nav{
    position:sticky; top:14px; z-index:100;
    margin:14px 20px 0;
    border-radius:16px;
    border:2px solid var(--accent-2);
    background:rgba(18,24,31,0.94);
    backdrop-filter:blur(8px);
  }
  .nav .wrap{
    display:flex; align-items:center; justify-content:space-between;
    height:64px;
  }
  .logo{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700; font-size:1.15rem;
    letter-spacing:0.08em;
    color:var(--white);
    transition:letter-spacing .3s var(--ease);
  }
  .logo:hover{ letter-spacing:0.14em; }
  .nav-links{ display:flex; gap:32px; }
  .nav-links a{
    position:relative;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.78rem; letter-spacing:0.06em;
    color:var(--meta);
    text-transform:uppercase;
    transition:color .2s var(--ease);
  }
  .nav-links a::after{
    content:""; position:absolute; left:50%; right:50%; bottom:-8px; height:1px;
    background:var(--accent-2);
    transition:left .25s var(--ease), right .25s var(--ease);
  }
  .nav-links a:hover{ color:var(--accent-2); }
  .nav-links a:hover::after{ left:0; right:0; }
  .nav-right{ display:flex; align-items:center; gap:24px; }

  .lang-switch{ position:relative; }
  .lang-toggle{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.78rem; letter-spacing:0.06em;
    color:var(--white);
    background:transparent;
    border:1px solid rgba(138,151,163,0.35);
    border-radius:6px;
    padding:7px 12px;
    cursor:pointer;
    display:flex; align-items:center; gap:6px;
  }
  .lang-toggle:hover{ border-color:var(--accent); }
  .lang-menu{
    position:absolute; top:calc(100% + 8px); right:0;
    background:var(--bg-dark-2);
    border:1px solid rgba(138,151,163,0.25);
    border-radius:8px;
    overflow:hidden;
    min-width:140px;
    box-shadow:0 12px 28px rgba(0,0,0,0.35);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  }
  .lang-menu.open{ opacity:1; visibility:visible; transform:translateY(0); }
  .lang-menu button{
    display:flex; width:100%; align-items:center; justify-content:space-between;
    padding:10px 14px;
    background:none; border:none;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.8rem; letter-spacing:0.04em;
    color:var(--meta);
    cursor:pointer; text-align:left;
  }
  .lang-menu button:hover, .lang-menu button.active{ background:rgba(196,99,10,0.12); color:var(--white); }

  @media (max-width:720px){ .nav-links{ display:none; } }

  /* ---------- DIMENSION LINE (signature element) ---------- */
  .dim-line{
    display:flex; align-items:center; gap:10px;
    color:var(--meta);
    font-family:'IBM Plex Mono',monospace;
    font-size:0.7rem; letter-spacing:0.12em;
    text-transform:uppercase;
    margin:0 0 20px 0;
  }
  .dim-line::before, .dim-line::after{
    content:""; flex:1; height:1px;
    background:repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 8px);
    opacity:0.55;
    transform:scaleX(0);
    transition:transform .9s var(--ease);
  }
  .dim-line::before{ transform-origin:right; }
  .dim-line::after{ transform-origin:left; }
  .dim-line.visible::before, .dim-line.visible::after{ transform:scaleX(1); }
  .dim-line span{ white-space:nowrap; }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    background:var(--bg-dark);
    overflow:hidden;
    padding:140px 0 120px;
  }
  .hero{ --px:0px; --py:0px; }
  .hero::before{
    content:"";
    position:absolute;
    top:-10%; right:-18%;
    width:62%; height:150%;
    background:linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 100%);
    transform:rotate(-11deg) translate(var(--px), var(--py));
    opacity:0.94;
    z-index:0;
    transition:transform .4s var(--ease);
  }
  .hero::after{
    content:"";
    position:absolute; inset:0;
    background:radial-gradient(ellipse at 20% 20%, rgba(255,255,255,0.04), transparent 60%);
    z-index:0;
  }
  .sparks{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
  .spark{
    position:absolute; bottom:-10px;
    width:3px; height:3px; border-radius:50%;
    background:var(--accent-2);
    opacity:0;
    animation:sparkRise linear infinite;
    box-shadow:0 0 6px 1px rgba(224,122,31,0.6);
  }
  @keyframes sparkRise{
    0%{ transform:translateY(0) translateX(0) scale(1); opacity:0; }
    12%{ opacity:1; }
    85%{ opacity:.5; }
    100%{ transform:translateY(-340px) translateX(var(--drift,20px)) scale(.3); opacity:0; }
  }

  /* ---------- SCROLL CUE ---------- */
  .scroll-cue{
    position:absolute; left:50%; bottom:32px; transform:translateX(-50%);
    width:26px; height:42px;
    border:1.5px solid rgba(247,248,249,0.45);
    border-radius:20px;
    z-index:2;
  }
  .scroll-cue span{
    position:absolute; top:8px; left:50%; transform:translateX(-50%);
    width:4px; height:8px; border-radius:2px;
    background:var(--accent-2);
    animation:scrollCue 1.7s ease infinite;
  }
  @keyframes scrollCue{
    0%{ opacity:1; top:8px; }
    70%{ opacity:0; top:22px; }
    100%{ opacity:0; top:8px; }
  }
  .hero .wrap{ position:relative; z-index:1; }
  .hero-eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.78rem; letter-spacing:0.18em; text-transform:uppercase;
    color:var(--accent-2);
    margin-bottom:22px;
    opacity:0; transform:translateY(14px);
    animation:fadeUp .7s var(--ease) .1s forwards;
  }
  .hero h1{
    color:var(--white);
    font-size:clamp(2.4rem, 6.4vw, 5.2rem);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.01em;
    line-height:1.04;
    max-width:820px;
    margin:0 auto;
  }
  .hero h1 span{ display:block; opacity:0; transform:translateY(28px); }
  .hero h1 span:nth-child(1){ animation:fadeUp .8s var(--ease) .22s forwards; }
  .hero h1 span:nth-child(2){ animation:fadeUp .8s var(--ease) .36s forwards; }
  .hero h1 span:nth-child(3){ animation:fadeUp .8s var(--ease) .5s forwards; color:var(--bg-dark); -webkit-text-stroke:1.5px var(--white); }

  .hero-desc{
    color:var(--meta);
    max-width:520px;
    font-size:1.05rem;
    margin:28px auto 0;
    opacity:0; transform:translateY(14px);
    animation:fadeUp .8s var(--ease) .68s forwards;
  }
  .hero-markets{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.82rem; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--white);
    margin-top:26px;
    opacity:0; transform:translateY(14px);
    animation:fadeUp .8s var(--ease) .8s forwards;
  }
  .hero-markets em{ color:var(--accent-2); font-style:normal; }

  .btn{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.82rem; letter-spacing:0.08em; text-transform:uppercase;
    padding:14px 26px;
    border:1.5px solid var(--white);
    border-radius:999px;
    color:var(--white);
    background:transparent;
    transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
  }
  .btn:hover{ background:var(--white); color:var(--bg-dark); transform:translateY(-3px); }
  .btn:active{ transform:translateY(-1px) scale(.97); }
  .btn-primary{
    border-color:var(--accent-2);
    background:var(--accent-2);
    color:var(--bg-dark);
  }
  .btn-primary:hover{ background:var(--white); border-color:var(--white); box-shadow:0 12px 28px rgba(196,99,10,0.35); }

  .hero-cta{
    margin-top:44px; display:flex; gap:16px; flex-wrap:wrap;
    justify-content:center;
    opacity:0; transform:translateY(14px);
    animation:fadeUp .8s var(--ease) .92s forwards;
  }

  @keyframes fadeUp{ to{ opacity:1; transform:translateY(0); } }

  /* ---------- SECTION GENERIC ---------- */
  section{ padding:110px 0; scroll-margin-top:90px; }
  .section-light{ background:var(--bg-light); }
  .section-dark{ background:var(--bg-dark); color:var(--meta); }
  .section-dark h2{ color:var(--white); }
  .section-dark .dim-line{ color:var(--meta); }

  #references{
    margin:0 20px;
    border-radius:20px;
    border:2px solid var(--accent-2);
  }

  .eyebrow-row{ display:flex; align-items:baseline; gap:18px; margin-bottom:18px; }
  .eyebrow-num{
    font-family:'IBM Plex Mono',monospace;
    color:var(--accent);
    font-weight:600; font-size:0.95rem;
  }
  h2.title{
    font-size:clamp(1.9rem, 3.4vw, 2.7rem);
    text-transform:uppercase;
    letter-spacing:0.01em;
    max-width:640px;
    margin:0 auto;
  }

  .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
  .reveal.visible{ opacity:1; transform:none; }

  /* ---------- ABOUT ---------- */
  .about-grid{
    display:grid; grid-template-columns:1.3fr 1fr; gap:70px;
    margin-top:46px; align-items:start;
  }
  .about-body p{ font-size:1.03rem; max-width:560px; margin:0 auto; }
  .about-body p + p{ margin-top:18px; }

  .stat-panel{
    border:1px solid rgba(58,69,80,0.25);
    border-radius:var(--radius);
    background:#fff;
    padding:26px 28px;
    margin-bottom:16px;
    transition:transform .3s var(--ease), border-color .3s var(--ease);
  }
  .stat-panel:hover{ transform:translateY(-4px); border-color:var(--accent); }
  .stat-number{
    font-family:'IBM Plex Mono',monospace;
    font-size:2.6rem; font-weight:600;
    color:var(--accent);
    line-height:1;
  }
  .stat-label{
    margin-top:8px;
    font-size:0.88rem;
    letter-spacing:0.02em;
    color:var(--steel);
  }

  @media (max-width:860px){
    .about-grid{ grid-template-columns:1fr; gap:36px; }
  }

  /* ---------- SERVICES ---------- */
  .services-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:26px;
    margin-top:48px;
  }
  .service-card{
    background:#fff;
    border:2px solid var(--accent-2);
    border-radius:var(--radius);
    padding:32px 28px;
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .service-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(18,24,31,0.1); }
  .service-num{
    font-family:'IBM Plex Mono',monospace;
    font-size:2.1rem; font-weight:600;
    color:var(--accent);
    margin-bottom:14px;
    display:inline-block;
    transition:transform .35s var(--ease);
  }
  .service-card:hover .service-num{ transform:scale(1.12) rotate(-4deg); }
  .service-card h3{
    font-size:1.18rem;
    text-transform:uppercase;
    letter-spacing:0.01em;
    margin-bottom:12px;
  }
  .service-card p{ font-size:0.94rem; color:var(--steel); margin-bottom:16px; }
  .service-list{ }
  .service-list li{
    font-size:0.86rem;
    color:var(--meta);
    margin-bottom:7px;
    opacity:0; transform:translateY(6px);
    transition:opacity .5s var(--ease), transform .5s var(--ease);
  }
  .reveal.visible .service-list li{ opacity:1; transform:none; }
  .service-list li:nth-child(1){ transition-delay:.05s; }
  .service-list li:nth-child(2){ transition-delay:.12s; }
  .service-list li:nth-child(3){ transition-delay:.19s; }
  .service-list li:nth-child(4){ transition-delay:.26s; }
  .service-list li::before{
    content:"—"; color:var(--accent); font-weight:600;
    margin-right:6px;
  }
  .card-line{
    height:2px; width:0; background:var(--accent);
    transition:width .35s var(--ease);
    margin:18px auto 0;
  }
  .service-card:hover .card-line{ width:52px; }

  .service-featured{
    grid-column:1 / -1;
    background:var(--bg-dark);
    color:var(--meta);
    border-radius:var(--radius);
    padding:40px 40px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:36px;
    align-items:center;
    border:2px solid var(--accent-2);
  }
  .service-featured .service-num{ color:var(--accent-2); font-size:2.6rem; }
  .service-featured h3{ color:var(--white); font-size:1.4rem; }
  .service-featured p{ color:var(--meta); max-width:480px; }
  .service-featured .service-list li{ color:#aeb8c2; }
  .service-featured .service-list li::before{ background:var(--accent-2); }
  .featured-tag{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--accent-2);
    border:1px solid var(--accent-2);
    border-radius:999px;
    padding:6px 14px;
    white-space:nowrap;
    height:fit-content;
  }

  @media (max-width:900px){
    .services-grid{ grid-template-columns:1fr; }
    .service-featured{ grid-template-columns:1fr; }
  }

  /* ---------- REFERENCES ---------- */
  .ref-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
    margin-top:48px;
  }
  .ref-card{
    border:2px solid var(--accent-2);
    border-radius:var(--radius);
    overflow:hidden;
    background:var(--bg-dark-2);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .ref-visual{
    position:relative;
    height:170px;
    overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    background:
      repeating-linear-gradient(135deg, rgba(196,99,10,0.14) 0 18px, transparent 18px 36px),
      var(--bg-dark-2);
    border-bottom:1px solid rgba(224,122,31,0.25);
  }
  .ref-illustration{
    width:78%; height:78%;
    transition:transform .5s var(--ease);
  }
  .ref-card:hover{ transform:translateY(-5px); box-shadow:0 18px 36px rgba(0,0,0,0.35); }
  .ref-card:hover .ref-illustration{ transform:scale(1.06); }
  .ref-body{ padding:24px 26px; }
  .ref-loc{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--accent-2);
    margin-bottom:10px;
  }
  .ref-body h3{ color:var(--white); font-size:1.05rem; margin-bottom:10px; }
  .ref-body p{ font-size:0.86rem; color:var(--meta); }

  @media (max-width:900px){ .ref-grid{ grid-template-columns:1fr; } }

  /* ---------- CONTACT ---------- */
  .contact-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:40px;
    margin-top:48px;
  }
  .contact-card{
    background:#fff;
    border:1px solid rgba(58,69,80,0.18);
    border-radius:var(--radius);
    padding:34px 32px;
    transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  }
  .contact-card:hover{ transform:translateY(-5px); box-shadow:0 16px 34px rgba(18,24,31,0.1); border-color:var(--accent); }
  .contact-market{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.74rem; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--accent);
    margin-bottom:16px;
  }
  .contact-card h3{ font-size:1.2rem; margin-bottom:6px; }
  .contact-addr{ font-size:0.9rem; color:var(--meta); margin-bottom:20px; }
  .contact-person{ font-size:0.95rem; font-weight:600; color:var(--steel); }
  .contact-title{ font-size:0.84rem; color:var(--meta); margin-bottom:12px; }
  .contact-line{ display:flex; align-items:center; justify-content:center; gap:10px; font-size:0.92rem; margin-bottom:8px; }
  .contact-line a{ border-bottom:1px solid transparent; transition:border-color .2s; }
  .contact-line a:hover{ border-color:var(--accent); color:var(--accent); }

  @media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }

  /* ---------- FOOTER ---------- */
  footer{
    background:var(--bg-dark);
    color:var(--meta);
    padding:44px 0;
    margin:0 20px 20px;
    border-radius:16px;
    border:2px solid var(--accent-2);
  }
  .footer-row{
    display:flex; justify-content:center; align-items:center;
    flex-direction:column;
    flex-wrap:wrap; gap:10px;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.76rem; letter-spacing:0.03em;
  }
  .footer-legal{ color:#6b7683; max-width:640px; margin:16px auto 0; line-height:1.7; }

  /* ---------- REDUCED MOTION ---------- */
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .hero-eyebrow, .hero h1 span, .hero-desc, .hero-markets, .hero-cta{
      animation:none !important; opacity:1 !important; transform:none !important;
    }
    .spark{ display:none; }
    .scroll-cue span{ animation:none !important; opacity:1; }
    .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
    .dim-line::before, .dim-line::after{ transform:none !important; transition:none !important; }
    .service-list li{ opacity:1 !important; transform:none !important; transition-delay:0s !important; }
    .service-card:hover .service-num{ transform:none; }
    .btn:hover{ transform:none; }
    .ref-card:hover, .contact-card:hover, .stat-panel:hover{ transform:none; }
    .ref-illustration{ transition:none !important; }
    .ref-card:hover .ref-illustration{ transform:none; }
  }