:root {
      --orange: #F05A1A;
      --orange-dark: #C8440E;
      --steel: #1A1F2E;
      --steel-mid: #252B3B;
      --steel-light: #2E3650;
      --silver: #8B95A8;
      --white: #F5F6FA;
      --text: #C8D0E0;
    }
    * { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior:smooth; overflow-x:hidden; }
    body { overflow-x:hidden; }
    body { font-family:'Barlow',sans-serif; background:var(--steel); color:var(--text); overflow-x:hidden; }

    /* NAV */
    .site-nav { position:fixed; top:0; left:0; width:100%; z-index:1000; padding:16px 40px; display:flex; align-items:center; justify-content:flex-end; gap:24px; transition:all 0.4s; background:transparent; }
    .site-nav.scrolled { background:rgba(15,18,30,0.97); padding:10px 40px; box-shadow:0 2px 30px rgba(0,0,0,0.4); border-bottom:1px solid rgba(240,90,26,0.3); }
    .nav-links { display:flex; gap:4px; align-items:center; list-style:none; }
    .nav-links a { color:var(--white); text-decoration:none; font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:13px; letter-spacing:2px; text-transform:uppercase; padding:8px 16px; border-radius:2px; transition:all 0.25s; position:relative; }
    .nav-links a::after { content:''; position:absolute; bottom:4px; left:16px; right:16px; height:2px; background:var(--orange); transform:scaleX(0); transition:transform 0.25s; }
    .nav-links a:hover::after { transform:scaleX(1); }
    .nav-links a:hover { color:var(--orange); }
    /* Active section indicator */
    .nav-links a.nav-active { color:var(--orange); }
    .nav-links a.nav-active::after { transform:scaleX(1); }
    /* Don't apply underline to the CTA button */
    .nav-links a.nav-cta.nav-active::after { display:none; }
    .nav-cta { background:var(--orange)!important; color:#fff!important; border-radius:3px!important; padding:10px 22px!important; }
    .nav-cta:hover { background:var(--orange-dark)!important; }
    .nav-cta::after { display:none!important; }
    /* ── HAMBURGER BUTTON ── */
    .nav-hamburger {
      display: none;
      cursor: pointer;
      width: 44px; height: 44px;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 5px;
      flex-shrink: 0;
      z-index: 1100;
      position: relative;
    }
    /* drawer-lang: hidden globally — only shown inside the mobile drawer */
    li.drawer-lang { display: none !important; }

    .nav-hamburger span {
      display: block;
      width: 26px; height: 2px;
      background: white;
      border-radius: 2px;
      transition: transform 0.35s cubic-bezier(.4,0,.2,1),
                  opacity  0.25s ease,
                  width    0.3s ease;
      transform-origin: center;
    }
    /* Morph to × when open */
    body.nav-open .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    body.nav-open .nav-hamburger span:nth-child(2) { opacity: 0; width: 0; }
    body.nav-open .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ── HERO ──
       Hero fills the full viewport. Content is vertically centred with
       auto top/bottom padding so it never hides behind the navbar (top)
       or the scroll indicator (bottom). The stats bar is NOT inside the
       hero anymore — it lives right after it in the DOM as a normal flow
       element, so there is zero collision on any screen size.
    */
    #hero {
      height: 100vh;
      min-height: 600px;
      position: relative;
      display: flex;
      align-items: center;
      overflow: hidden;
    }
    .hero-bg { position:absolute; inset:0; background: linear-gradient(135deg, rgba(10,13,22,0.93) 0%, rgba(15,20,35,0.75) 50%, rgba(10,13,22,0.9) 100%), url('imagenes/hero/first.jpeg') center/cover no-repeat; }
    .hero-bg::before { content:''; position:absolute; inset:0; background-image: linear-gradient(rgba(240,90,26,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(240,90,26,0.06) 1px, transparent 1px); background-size:60px 60px; animation:gridMove 20s linear infinite; }
    @keyframes gridMove { 0%{background-position:0 0} 100%{background-position:60px 60px} }

    /* Push content down so it clears the fixed navbar (80px) and leave
       breathing room at the bottom for the scroll indicator */
    .hero-content {
      position: relative;
      z-index: 2;
      padding: 100px 60px 80px; /* top: navbar clearance | bottom: scroll-indicator clearance */
      max-width: 900px;
      width: 100%;
    }
    .hero-eyebrow { display:inline-flex; align-items:center; gap:12px; font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:600; letter-spacing:4px; text-transform:uppercase; color:var(--orange); margin-bottom:24px; opacity:0; animation:fadeUp 0.8s 0.3s forwards; }
    .hero-eyebrow::before { content:''; width:40px; height:2px; background:var(--orange); }
    .hero-headline { font-family:'Bebas Neue',sans-serif; font-size:clamp(58px,9vw,130px); line-height:0.9; color:var(--white); letter-spacing:2px; margin-bottom:10px; opacity:0; animation:fadeUp 0.8s 0.5s forwards; }
    .hero-headline .accent { color:var(--orange); }

    /* Big brand logo — replaces the headline text on the landing page.
       <h1 class="hero-logo"> wraps the <img> so the alt text still serves as
       the page H1 for SEO/crawlers. Falls back to a big wordmark if the
       image fails (see .hero-logo.is-fallback below). */
    .hero-logo {
      display: block;
      margin: 0 0 14px;
      padding: 0;
      opacity: 0;
      animation: fadeUp 0.8s 0.5s forwards;
      line-height: 0;  /* kill inline-img gap below */
      font-family: inherit; /* reset the default h1 font */
      font-weight: normal;
    }
    .hero-logo img {
      display: block;
      height: clamp(140px, 20vw, 300px);
      width: auto;
      max-width: 100%;
      filter: drop-shadow(0 10px 30px rgba(0,0,0,0.55))
              drop-shadow(0 0 18px rgba(240,90,26,0.15));
    }
    /* Fallback wordmark (if logo image fails to load) — looks like the
       original .hero-headline treatment */
    .hero-logo-fallback {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(58px, 9vw, 130px);
      line-height: 0.9;
      color: var(--white);
      letter-spacing: 2px;
    }
    .hero-logo-fallback .accent { color: var(--orange); }
    .hero-logo.is-fallback { line-height: 1; }
    .hero-sub { font-family:'Bebas Neue',sans-serif; font-size:clamp(22px,3.5vw,48px); color:var(--silver); letter-spacing:4px; margin-bottom:28px; opacity:0; animation:fadeUp 0.8s 0.7s forwards; }
    .hero-desc { font-size:16px; line-height:1.7; color:var(--text); max-width:520px; margin-bottom:44px; opacity:0; animation:fadeUp 0.8s 0.9s forwards; }
    .hero-actions { display:flex; gap:16px; flex-wrap:wrap; opacity:0; animation:fadeUp 0.8s 1.1s forwards; }

    .btn-primary-rig { background:var(--orange); color:white; border:none; padding:16px 36px; font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:700; letter-spacing:3px; text-transform:uppercase; text-decoration:none; border-radius:3px; transition:all 0.3s; display:inline-flex; align-items:center; gap:10px; clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px)); }
    .btn-primary-rig:hover { background:var(--orange-dark); color:white; transform:translateY(-2px); box-shadow:0 8px 30px rgba(240,90,26,0.4); }
    .btn-outline-rig { background:transparent; color:white; border:1px solid rgba(255,255,255,0.4); padding:16px 36px; font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:700; letter-spacing:3px; text-transform:uppercase; text-decoration:none; border-radius:3px; transition:all 0.3s; display:inline-flex; align-items:center; gap:10px; }
    .btn-outline-rig:hover { border-color:var(--orange); color:var(--orange); text-decoration:none; transform:translateY(-2px); }

    /* Scroll indicator – anchored inside hero, won't conflict */
    .scroll-indicator { position:absolute; bottom:28px; right:50px; display:flex; flex-direction:column; align-items:center; gap:8px; z-index:3; opacity:0; animation:fadeIn 1s 2s forwards; }
    .scroll-indicator span { font-family:'Barlow Condensed',sans-serif; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--silver); writing-mode:vertical-rl; }
    .scroll-line { width:1px; height:50px; background:linear-gradient(to bottom,var(--orange),transparent); animation:scrollPulse 2s ease-in-out infinite; }
    @keyframes scrollPulse { 0%,100%{transform:scaleY(1);opacity:1} 50%{transform:scaleY(0.6);opacity:0.5} }
    @keyframes fadeUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
    @keyframes fadeIn { from{opacity:0} to{opacity:1} }

    /* ── HERO STATS BAR ──
       Now a standalone block BELOW the hero — no absolute positioning,
       no collision, fully responsive.
    */
    .hero-stats-bar {
      background: rgba(12,15,25,0.98);
      border-top: 3px solid var(--orange);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      display: flex;
      justify-content: center;
      flex-wrap: wrap;          /* wraps on small screens */
      opacity: 0;
      animation: fadeUp 0.8s 1.5s forwards;
    }
    .hero-stat-item {
      padding: 28px 20px;
      text-align: center;
      border-right: 1px solid rgba(255,255,255,0.07);
      flex: 1 1 160px;           /* grows but has a sane minimum */
      min-width: 140px;
      max-width: 260px;
    }
    .hero-stat-item:last-child { border-right: none; }
    .stat-number { font-family:'Bebas Neue',sans-serif; font-size:clamp(36px,4vw,52px); color:var(--orange); line-height:1; display:block; }
    .stat-label  { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--silver); margin-top:6px; line-height:1.4; }

    /* Collapse to 2-per-row on phones */
    @media(max-width:600px){
      .hero-stat-item { flex-basis:50%; border-right:1px solid rgba(255,255,255,0.07); border-bottom:1px solid rgba(255,255,255,0.07); max-width:100%; }
      .hero-stat-item:nth-child(2n){ border-right:none; }
      .hero-stat-item:nth-last-child(-n+2){ border-bottom:none; }
    }

    /* SECTION COMMON */
    section { padding:100px 0; }
    .section-label { font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:600; letter-spacing:5px; text-transform:uppercase; color:var(--orange); display:flex; align-items:center; gap:12px; margin-bottom:16px; }
    .section-label::before { content:''; width:30px; height:2px; background:var(--orange); }
    .section-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(40px,5vw,70px); color:var(--white); letter-spacing:2px; line-height:1; margin-bottom:20px; }
    .section-desc { font-size:16px; line-height:1.8; color:var(--silver); max-width:520px; }

    /* SERVICES */
    #services { background:var(--steel-mid); scroll-margin-top: 78px; }

    /* Center only the #services title block and remove the small eyebrow/tag. */
    #services .container[data-aos] {
      text-align: center;
    }

    #services .section-label {
      display: none;
    }

    #services .section-title {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }
    .services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:60px; }
    .service-card { background:var(--steel); padding:48px 36px; position:relative; overflow:hidden; transition:all 0.4s; }
    .service-card::before { content:''; position:absolute; bottom:0; left:0; height:3px; width:0; background:var(--orange); transition:width 0.4s; }
    .service-card:hover::before { width:100%; }
    .service-card:hover { background:var(--steel-light); transform:translateY(-4px); }
    .service-icon { width:64px; height:64px; margin-bottom:24px; }
    .service-icon svg { width:100%; height:100%; transition:transform 0.3s; }
    .service-card:hover .service-icon svg { transform:scale(1.1); }
    .service-num { position:absolute; top:24px; right:24px; font-family:'Bebas Neue',sans-serif; font-size:60px; color:rgba(255,255,255,0.04); line-height:1; }
    .service-name { font-family:'Barlow Condensed',sans-serif; font-size:22px; font-weight:700; letter-spacing:1px; color:var(--white); text-transform:uppercase; margin-bottom:12px; }
    .service-text { font-size:14px; line-height:1.7; color:var(--silver); }

    /* ── AUTOMOTIVE MAP (3D Mexico) ── */
    #automotive-map {
      background: linear-gradient(180deg, var(--steel) 0%, var(--steel-mid) 50%, var(--steel) 100%);
      padding: 100px 0 120px;
      position: relative;
      overflow: hidden;
    }
    #automotive-map::before {
      content:'';
      position:absolute;
      inset:0;
      background-image:
        linear-gradient(rgba(240,90,26,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(240,90,26,0.035) 1px, transparent 1px);
      background-size: 80px 80px;
      pointer-events:none;
    }
    #automotive-map .container { position:relative; z-index:1; }
    .automap-header { text-align:center; max-width:760px; margin:0 auto 50px; }
    .automap-header .section-label { justify-content:center; }
    .automap-header .section-label::before { display:none; }
    .automap-header .section-label::after {
      content:''; width:30px; height:2px; background:var(--orange);
    }
    .automap-header .section-desc { margin:0 auto; }

    .automap-wrap {
      position:relative;
      width:100%;
      max-width:1200px;
      margin:0 auto;
      aspect-ratio: 16 / 10;
      background:
        radial-gradient(ellipse at center, rgba(240,90,26,0.08) 0%, transparent 60%),
        linear-gradient(180deg, rgba(10,13,22,0.4) 0%, rgba(26,31,46,0.2) 100%);
      border: 1px solid rgba(240,90,26,0.15);
      border-radius: 4px;
      overflow: hidden;
    }
    .automap-wrap::before,
    .automap-wrap::after {
      content:'';
      position:absolute;
      width:24px; height:24px;
      border:2px solid var(--orange);
      z-index:3; pointer-events:none;
    }
    .automap-wrap::before { top:-1px; left:-1px; border-right:none; border-bottom:none; }
    .automap-wrap::after  { bottom:-1px; right:-1px; border-left:none; border-top:none; }

    #automap-canvas {
      display:block;
      width:100%;
      height:100%;
      cursor: grab;
      touch-action: pan-y;
    }
    #automap-canvas:active { cursor: grabbing; }

    .automap-loader {
      position:absolute;
      inset:0;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:18px;
      background:rgba(10,13,22,0.85);
      z-index:4;
      transition: opacity 0.6s;
    }
    .automap-loader.hidden { opacity:0; pointer-events:none; }
    .automap-loader .spinner {
      width:44px; height:44px;
      border:3px solid rgba(240,90,26,0.2);
      border-top-color: var(--orange);
      border-radius:50%;
      animation: automapSpin 0.9s linear infinite;
    }
    @keyframes automapSpin { to { transform:rotate(360deg); } }
    .automap-loader .lbl {
      font-family:'Barlow Condensed',sans-serif;
      font-size:13px;
      letter-spacing:4px;
      text-transform:uppercase;
      color:var(--silver);
    }

    .automap-hud {
      position:absolute;
      top:20px; left:20px;
      z-index:2;
      pointer-events:none;
      font-family:'Barlow Condensed',sans-serif;
      color: var(--silver);
      font-size:11px;
      letter-spacing:2px;
      text-transform:uppercase;
      line-height:1.8;
    }
    .automap-hud .hud-dot {
      display:inline-block; width:8px; height:8px; border-radius:50%;
      background:var(--orange);
      box-shadow: 0 0 10px var(--orange);
      margin-right:8px; vertical-align:middle;
      animation: hudPulse 1.6s ease-in-out infinite;
    }
    @keyframes hudPulse {
      0%,100% { opacity:0.4; transform:scale(0.85); }
      50%     { opacity:1;   transform:scale(1.1); }
    }
    .automap-hud .hud-count {
      color: var(--orange); font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:2px;
    }

    .automap-hint {
      position:absolute;
      bottom:18px; left:50%;
      transform:translateX(-50%);
      z-index:2;
      pointer-events:none;
      font-family:'Barlow Condensed',sans-serif;
      font-size:11px;
      letter-spacing:3px;
      text-transform:uppercase;
      color: rgba(200,208,224,0.55);
      white-space:nowrap;
    }
    .automap-hint i { color: var(--orange); margin:0 6px; }

    .automap-tooltip {
      position:absolute;
      pointer-events:none;
      background: rgba(10,13,22,0.95);
      border:1px solid var(--orange);
      padding:10px 14px;
      font-family:'Barlow Condensed',sans-serif;
      color:var(--white);
      font-size:13px;
      letter-spacing:2px;
      text-transform:uppercase;
      white-space:nowrap;
      z-index:5;
      opacity:0;
      transition:opacity 0.15s;
      transform: translate(-50%, -130%);
    }
    .automap-tooltip.show { opacity:1; }
    .automap-tooltip::after {
      content:''; position:absolute;
      bottom:-6px; left:50%; transform:translateX(-50%);
      border-left:6px solid transparent; border-right:6px solid transparent;
      border-top:6px solid var(--orange);
    }
    .automap-tooltip .tt-state { color: var(--orange); font-weight:700; }
    .automap-tooltip .tt-brands { display:block; font-size:10px; color:var(--silver); margin-top:2px; letter-spacing:1.5px; }

    /* ── PLANT MODAL ── */
    .plant-modal {
      position:fixed;
      inset:0;
      z-index: 2000;
      display:none;
      align-items:center;
      justify-content:center;
      padding:20px;
      background: rgba(5,7,14,0.85);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      opacity:0;
      transition: opacity 0.3s;
    }
    .plant-modal.open { display:flex; opacity:1; }
    .plant-modal-box {
      position:relative;
      width: 100%;
      max-width: 900px;
      max-height: 90vh;
      background: var(--steel);
      border: 1px solid rgba(240,90,26,0.4);
      border-radius: 4px;
      overflow:hidden;
      display:flex;
      flex-direction:column;
      transform: scale(0.96) translateY(12px);
      transition: transform 0.35s cubic-bezier(.4,0,.2,1);
      box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(240,90,26,0.1);
    }
    .plant-modal.open .plant-modal-box { transform: scale(1) translateY(0); }
    .plant-modal-box::before,
    .plant-modal-box::after {
      content:'';
      position:absolute;
      width:28px; height:28px;
      border:2px solid var(--orange);
      pointer-events:none;
      z-index:2;
    }
    .plant-modal-box::before { top:-1px; left:-1px; border-right:none; border-bottom:none; }
    .plant-modal-box::after  { bottom:-1px; right:-1px; border-left:none; border-top:none; }

    .plant-modal-header {
      position:relative;
      padding: 36px 60px 28px 40px;
      background: linear-gradient(135deg, var(--steel-mid) 0%, var(--steel) 100%);
      border-bottom: 1px solid rgba(240,90,26,0.2);
    }
    .plant-modal-header::after {
      content:''; position:absolute; bottom:-1px; left:40px; width:60px; height:3px; background:var(--orange);
    }
    .plant-modal-eyebrow {
      font-family:'Barlow Condensed',sans-serif;
      font-size:11px;
      letter-spacing:4px;
      text-transform:uppercase;
      color: var(--orange);
      margin-bottom:8px;
    }
    .plant-modal-state {
      font-family:'Bebas Neue',sans-serif;
      font-size: clamp(32px, 4vw, 48px);
      color: var(--white);
      letter-spacing:2px;
      line-height:1;
      margin-bottom:12px;
    }
    .plant-modal-sub {
      font-family:'Barlow',sans-serif;
      font-size:14px;
      color: var(--silver);
      line-height:1.6;
      max-width:600px;
    }
    .plant-modal-close {
      position:absolute;
      top:20px; right:20px;
      width:40px; height:40px;
      background: transparent;
      border: 1px solid rgba(240,90,26,0.4);
      color: var(--orange);
      cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      font-size:16px;
      transition: all 0.25s;
      z-index:3;
      border-radius:2px;
    }
    .plant-modal-close:hover {
      background: var(--orange);
      color:#fff;
      transform: rotate(90deg);
    }

    .plant-modal-body {
      overflow-y: auto;
      padding: 28px 40px 36px;
      flex:1;
    }
    .plant-modal-body::-webkit-scrollbar { width:6px; }
    .plant-modal-body::-webkit-scrollbar-track { background: var(--steel-mid); }
    .plant-modal-body::-webkit-scrollbar-thumb { background: var(--orange); border-radius:3px; }

    .plant-brands-row {
      display:flex;
      flex-wrap:wrap;
      gap: 10px;
      margin-bottom: 28px;
      padding-bottom:24px;
      border-bottom: 1px solid rgba(240,90,26,0.12);
    }
    .plant-brand-chip {
      font-family:'Barlow Condensed',sans-serif;
      font-size:12px;
      font-weight:700;
      letter-spacing:2px;
      text-transform:uppercase;
      color: var(--white);
      background: rgba(240,90,26,0.08);
      border:1px solid rgba(240,90,26,0.3);
      padding: 7px 14px;
      border-radius: 2px;
    }

    .plant-section-title {
      font-family:'Barlow Condensed',sans-serif;
      font-size:12px;
      font-weight:700;
      letter-spacing:4px;
      text-transform:uppercase;
      color: var(--orange);
      margin-bottom:18px;
      display:flex;
      align-items:center;
      gap:10px;
    }
    .plant-section-title::before {
      content:''; width:24px; height:2px; background:var(--orange);
    }

    .plant-projects {
      display:flex;
      flex-direction:column;
      gap:16px;
    }
    .plant-project {
      background: var(--steel-mid);
      border-left: 3px solid var(--orange);
      padding: 20px 24px;
      position:relative;
      transition: transform 0.25s, background 0.25s;
    }
    .plant-project:hover {
      background: var(--steel-light);
      transform: translateX(4px);
    }
    .plant-project-header {
      display:flex; justify-content:space-between; align-items:flex-start;
      gap:16px; margin-bottom:10px; flex-wrap:wrap;
    }
    .plant-project-name {
      font-family:'Barlow Condensed',sans-serif;
      font-size:18px;
      font-weight:700;
      letter-spacing:1px;
      text-transform:uppercase;
      color: var(--white);
    }
    .plant-project-year {
      font-family:'Bebas Neue',sans-serif;
      font-size:20px;
      letter-spacing:2px;
      color: var(--orange);
      flex-shrink:0;
    }
    .plant-project-client {
      font-family:'Barlow Condensed',sans-serif;
      font-size:12px;
      letter-spacing:2px;
      text-transform:uppercase;
      color: var(--silver);
      margin-bottom:10px;
    }
    .plant-project-desc {
      font-size:14px;
      line-height:1.7;
      color: var(--text);
    }
    .plant-project-scope {
      display:flex; flex-wrap:wrap; gap:6px; margin-top:14px;
    }
    .plant-project-scope span {
      font-family:'Barlow Condensed',sans-serif;
      font-size:10px;
      letter-spacing:1.5px;
      text-transform:uppercase;
      color: var(--silver);
      background: rgba(139,149,168,0.08);
      border: 1px solid rgba(139,149,168,0.2);
      padding: 4px 10px;
      border-radius: 2px;
    }

    .plant-no-projects {
      background: var(--steel-mid);
      border: 1px dashed rgba(240,90,26,0.3);
      padding: 32px 24px;
      text-align:center;
    }
    .plant-no-projects .icon { color: var(--orange); font-size:28px; margin-bottom:12px; }
    .plant-no-projects .title {
      font-family:'Barlow Condensed',sans-serif;
      font-size:16px; font-weight:700; letter-spacing:2px;
      text-transform:uppercase; color: var(--white); margin-bottom:8px;
    }
    .plant-no-projects .msg { font-size:13px; color:var(--silver); line-height:1.7; max-width:440px; margin:0 auto 18px; }
    .plant-no-projects .cta {
      display:inline-block;
      padding: 10px 22px;
      background: var(--orange);
      color: #fff;
      font-family:'Barlow Condensed',sans-serif;
      font-size:12px; font-weight:700; letter-spacing:3px;
      text-transform:uppercase; text-decoration:none;
      border-radius: 2px;
      transition: background 0.25s;
    }
    .plant-no-projects .cta:hover { background: var(--orange-dark); color:#fff; }

    /* ════════════════════════════════════════════════════════════
       GALLERY MODAL — unified two-pane (home + state) system
       Reuses .plant-project, .plant-brand-chip, .plant-section-title,
       .plant-no-projects styles for the state pane content.
       ════════════════════════════════════════════════════════════ */
    .gallery-modal {
      position: fixed;
      inset: 0;
      z-index: 2100;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(5,7,14,0.88);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      opacity: 0;
      transition: opacity 0.3s;
    }
    .gallery-modal.open { display: flex; opacity: 1; }
    .gallery-modal-box {
      position: relative;
      width: 100%;
      max-width: 1100px;
      /* IMPORTANT: definite height (not just max-height) so the flex:1
         .gallery-viewport has a real target to distribute. The two panes
         inside are position:absolute, so they contribute zero intrinsic
         height — without an explicit height here, the viewport collapses
         to 0px and nothing below the topbar renders on desktop.
         Cap at 820px so the modal doesn't feel sparse on tall monitors. */
      height: 92vh;
      max-height: 820px;
      min-height: 520px;
      background: var(--steel);
      border: 1px solid rgba(240,90,26,0.4);
      border-radius: 4px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transform: scale(0.96) translateY(14px);
      transition: transform 0.35s cubic-bezier(.4,0,.2,1);
      box-shadow: 0 30px 80px rgba(0,0,0,0.75), 0 0 0 1px rgba(240,90,26,0.1);
    }
    .gallery-modal.open .gallery-modal-box { transform: scale(1) translateY(0); }
    .gallery-modal-box::before,
    .gallery-modal-box::after {
      content: '';
      position: absolute;
      width: 28px; height: 28px;
      border: 2px solid var(--orange);
      pointer-events: none;
      z-index: 10;
    }
    .gallery-modal-box::before { top:-1px; left:-1px; border-right:none; border-bottom:none; }
    .gallery-modal-box::after  { bottom:-1px; right:-1px; border-left:none; border-top:none; }

    /* ── Top bar (breadcrumb + close) ── */
    .gallery-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 24px;
      background: rgba(26,31,46,0.98);
      border-bottom: 1px solid rgba(240,90,26,0.15);
      flex-shrink: 0;
      z-index: 3;
    }
    .gallery-breadcrumb {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 12px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--silver);
      flex: 1;
      min-width: 0;
      overflow: hidden;
    }
    .gallery-crumb {
      background: transparent;
      border: none;
      color: var(--silver);
      cursor: pointer;
      padding: 6px 10px;
      font-family: inherit;
      font-size: inherit;
      letter-spacing: inherit;
      text-transform: inherit;
      font-weight: 600;
      border-radius: 2px;
      transition: color 0.2s, background 0.2s;
      white-space: nowrap;
    }
    .gallery-crumb:hover,
    .gallery-crumb:focus-visible {
      color: var(--orange);
      background: rgba(240,90,26,0.08);
      outline: none;
    }
    .gallery-crumb.current {
      color: var(--white);
      cursor: default;
      pointer-events: none;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 60vw;
    }
    .gallery-crumb-sep {
      color: rgba(240,90,26,0.4);
      font-size: 10px;
      flex-shrink: 0;
    }
    .gallery-modal-close {
      width: 40px; height: 40px;
      background: transparent;
      border: 1px solid rgba(240,90,26,0.4);
      color: var(--orange);
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px;
      transition: all 0.25s;
      border-radius: 2px;
      flex-shrink: 0;
      margin-left: 12px;
    }
    .gallery-modal-close:hover {
      background: var(--orange);
      color: #fff;
      transform: rotate(90deg);
    }

    /* ── Pane viewport (slides between home / state) ── */
    .gallery-viewport {
      position: relative;
      flex: 1 1 auto;
      overflow: hidden;
      min-height: 0;
    }
    .gallery-pane {
      position: absolute;
      inset: 0;
      overflow-y: auto;
      overflow-x: hidden;
      opacity: 0;
      visibility: hidden;
      transform: translateX(40px);
      transition: opacity 0.32s ease, transform 0.36s cubic-bezier(.4,0,.2,1), visibility 0s linear 0.36s;
    }
    .gallery-pane.active {
      opacity: 1;
      visibility: visible;
      transform: translateX(0);
      transition: opacity 0.32s ease, transform 0.36s cubic-bezier(.4,0,.2,1), visibility 0s;
    }
    .gallery-pane.active-back { /* reverse direction when going Home */ }
    .gallery-pane::-webkit-scrollbar { width: 6px; }
    .gallery-pane::-webkit-scrollbar-track { background: var(--steel-mid); }
    .gallery-pane::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 3px; }

    /* ── HOME PANE ── */
    .gallery-home-header {
      padding: 32px 40px 24px;
      background: linear-gradient(135deg, var(--steel-mid) 0%, var(--steel) 100%);
      border-bottom: 1px solid rgba(240,90,26,0.15);
      position: relative;
    }
    .gallery-home-header::after {
      content: ''; position: absolute; bottom: -1px; left: 40px; width: 60px; height: 3px; background: var(--orange);
    }
    .gallery-home-eyebrow {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 11px;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 8px;
    }
    .gallery-home-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(30px, 4vw, 44px);
      color: var(--white);
      letter-spacing: 2px;
      line-height: 1;
      margin-bottom: 12px;
    }
    .gallery-home-desc {
      font-size: 14px;
      color: var(--silver);
      line-height: 1.7;
      max-width: 720px;
    }

    .gallery-home-stats {
      display: flex;
      gap: 30px;
      padding: 16px 40px;
      background: var(--steel-mid);
      border-bottom: 1px solid rgba(240,90,26,0.12);
    }
    .gallery-home-stats .stat-item {
      display: flex;
      align-items: baseline;
      gap: 8px;
    }
    .gallery-home-stats .stat-num {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 22px;
      color: var(--orange);
      letter-spacing: 1px;
    }
    .gallery-home-stats .stat-lbl {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--silver);
    }

    .gallery-home-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 14px;
      padding: 26px 40px 40px;
    }

    .gallery-state-card {
      position: relative;
      background: var(--steel-mid);
      border: 1px solid rgba(240,90,26,0.15);
      padding: 22px 22px 20px;
      cursor: pointer;
      transition: transform 0.25s, background 0.25s, border-color 0.25s;
      text-align: left;
      font-family: inherit;
      color: inherit;
      overflow: hidden;
    }
    .gallery-state-card::before {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 3px;
      background: var(--orange);
      transform: scaleY(0.25);
      transform-origin: top;
      transition: transform 0.35s cubic-bezier(.4,0,.2,1);
    }
    .gallery-state-card:hover,
    .gallery-state-card:focus-visible {
      background: var(--steel-light);
      border-color: rgba(240,90,26,0.45);
      transform: translateY(-2px);
      outline: none;
    }
    .gallery-state-card:hover::before,
    .gallery-state-card:focus-visible::before { transform: scaleY(1); }

    .gallery-state-card .card-eyebrow {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 10px;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 6px;
    }
    .gallery-state-card .card-name {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 24px;
      color: var(--white);
      letter-spacing: 1.5px;
      line-height: 1.05;
      margin-bottom: 4px;
    }
    .gallery-state-card .card-city {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 12px;
      color: var(--text);
      letter-spacing: 1px;
      margin-bottom: 14px;
      opacity: 0.85;
    }
    .gallery-state-card .card-brands {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-bottom: 14px;
    }
    .gallery-state-card .card-brand {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--silver);
      background: rgba(139,149,168,0.06);
      border: 1px solid rgba(139,149,168,0.18);
      padding: 3px 8px;
      border-radius: 2px;
    }
    .gallery-state-card .card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 12px;
      border-top: 1px dashed rgba(240,90,26,0.15);
    }
    .gallery-state-card .card-count {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--silver);
    }
    .gallery-state-card .card-count strong { color: var(--orange); font-weight: 700; font-size: 14px; }
    .gallery-state-card .card-arrow {
      color: var(--orange);
      font-size: 14px;
      transition: transform 0.25s;
    }
    .gallery-state-card:hover .card-arrow,
    .gallery-state-card:focus-visible .card-arrow { transform: translateX(4px); }

    .gallery-state-card.is-home {
      background: linear-gradient(135deg, var(--steel-light) 0%, var(--steel-mid) 100%);
      border-color: rgba(240,90,26,0.45);
    }
    .gallery-state-card.is-home .card-eyebrow::after {
      content: ' · HQ';
      color: var(--orange);
    }
    .gallery-state-card.is-empty .card-count { color: rgba(139,149,168,0.6); }
    .gallery-state-card.is-empty .card-count strong {
      color: var(--silver);
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 11px;
      letter-spacing: 2px;
      font-weight: 700;
    }

    .gallery-empty-msg {
      grid-column: 1 / -1;
      text-align: center;
      padding: 60px 20px;
      color: var(--silver);
      font-size: 14px;
    }

    /* ── STATE PANE ── */
    .gallery-state-header {
      position: relative;
      padding: 30px 40px 24px;
      background: linear-gradient(135deg, var(--steel-mid) 0%, var(--steel) 100%);
      border-bottom: 1px solid rgba(240,90,26,0.2);
    }
    .gallery-state-header::after {
      content: ''; position: absolute; bottom: -1px; left: 40px; width: 60px; height: 3px; background: var(--orange);
    }
    .gallery-state-eyebrow {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 11px;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 8px;
    }
    .gallery-state-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(30px, 4vw, 44px);
      color: var(--white);
      letter-spacing: 2px;
      line-height: 1;
      margin-bottom: 12px;
    }
    .gallery-state-sub {
      font-size: 14px;
      color: var(--silver);
      line-height: 1.65;
      max-width: 720px;
    }
    .gallery-state-body {
      padding: 26px 40px 40px;
    }
    .gallery-state-body .plant-brands-row { margin-top: 4px; }

    /* Permanent footer CTA (always visible under projects) */
    .gallery-footer-cta {
      margin-top: 28px;
    }

    /* ── Search bar on home pane ── */
    .gallery-search-wrap {
      padding: 16px 40px;
      background: var(--steel);
      border-bottom: 1px solid rgba(240,90,26,0.08);
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .gallery-search {
      flex: 1;
      background: var(--steel-mid);
      border: 1px solid rgba(240,90,26,0.18);
      color: var(--white);
      padding: 10px 14px 10px 38px;
      font-family: 'Barlow', sans-serif;
      font-size: 13px;
      letter-spacing: 0.5px;
      border-radius: 2px;
      transition: border-color 0.2s;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F05A1A' stroke-width='2'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16' y2='16'/></svg>");
      background-repeat: no-repeat;
      background-position: 12px center;
      background-size: 16px;
    }
    .gallery-search:focus {
      outline: none;
      border-color: var(--orange);
    }
    .gallery-search::placeholder { color: var(--silver); }
    .gallery-filter-chips {
      display: flex;
      gap: 6px;
    }
    .gallery-filter-chip {
      background: transparent;
      border: 1px solid rgba(139,149,168,0.25);
      color: var(--silver);
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 11px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      padding: 8px 14px;
      cursor: pointer;
      border-radius: 2px;
      transition: all 0.2s;
    }
    .gallery-filter-chip:hover { color: var(--white); border-color: rgba(240,90,26,0.4); }
    .gallery-filter-chip.active {
      background: var(--orange);
      color: #fff;
      border-color: var(--orange);
    }

    /* ── Mobile responsive ── */
    @media (max-width: 768px) {
      #automotive-map { padding:70px 0 80px; }
      .automap-wrap { aspect-ratio: 4 / 5; }
      .automap-hud { top:12px; left:12px; font-size:10px; }
      .automap-hint { font-size:10px; bottom:12px; }
      .plant-modal-header { padding: 28px 54px 22px 24px; }
      .plant-modal-body { padding: 22px 24px 28px; }
      .plant-project { padding: 16px 18px; }

      /* Gallery modal mobile — clear all desktop height constraints */
      .gallery-modal { padding: 0; }
      .gallery-modal-box { max-height: 100vh; height: 100vh; min-height: 0; max-width: 100%; border-radius: 0; }
      .gallery-topbar { padding: 12px 14px; }
      .gallery-breadcrumb { font-size: 10px; letter-spacing: 2px; gap: 6px; }
      .gallery-crumb { padding: 5px 7px; }
      .gallery-crumb.current { max-width: 48vw; }
      .gallery-modal-close { width: 36px; height: 36px; font-size: 14px; margin-left: 8px; }
      .gallery-home-header,
      .gallery-state-header { padding: 22px 20px 18px; }
      .gallery-home-header::after,
      .gallery-state-header::after { left: 20px; }
      .gallery-home-stats { padding: 12px 20px; gap: 20px; flex-wrap: wrap; }
      .gallery-search-wrap { padding: 12px 20px; flex-direction: column; align-items: stretch; }
      .gallery-filter-chips { overflow-x: auto; padding-bottom: 2px; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
      .gallery-filter-chip { white-space: nowrap; flex-shrink: 0; }
      .gallery-home-grid { grid-template-columns: 1fr; padding: 18px 20px 28px; gap: 10px; }
      .gallery-state-body { padding: 20px 20px 28px; }
      .gallery-state-card { padding: 18px 18px 16px; }
    }
    /* Disable page scrollbar when modal is open */
    body.plant-modal-locked { overflow:hidden; }
    body.gallery-modal-locked { overflow:hidden; }
    body.rigcs-lightbox-locked { overflow:hidden; }

    /* ════════════════════════════════════════════════════════════
       PROJECT THUMBNAIL STRIP  (inside .plant-project cards)
       Auto-discovered images appear as a compact grid with a
       "+N more" overflow tile and a "View all N photos" button.
       ════════════════════════════════════════════════════════════ */
    .plant-project-thumbs {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid rgba(139,149,168,0.12);
    }

    /* ── Loading skeleton ── */
    .plant-project-thumbs.is-loading .thumbs-loading {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 0;
      color: var(--silver);
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase;
    }
    .thumbs-loading-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--orange);
      opacity: 0.3;
      animation: rigcsThumbsPulse 1.2s infinite ease-in-out;
    }
    .thumbs-loading-dot:nth-child(2) { animation-delay: 0.15s; }
    .thumbs-loading-dot:nth-child(3) { animation-delay: 0.30s; }
    @keyframes rigcsThumbsPulse {
      0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
      40%           { opacity: 1;   transform: scale(1.2); }
    }
    .thumbs-loading-text { margin-left: 4px; }

    /* ── Empty state ── */
    .thumbs-empty {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      background: rgba(139,149,168,0.05);
      border: 1px dashed rgba(139,149,168,0.18);
      border-radius: 2px;
      color: var(--silver);
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 12px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }
    .thumbs-empty i {
      color: var(--orange);
      opacity: 0.6;
      font-size: 14px;
    }

    /* ── Thumb grid ── */
    .thumbs-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
      gap: 6px;
      margin-bottom: 12px;
    }
    .thumb {
      position: relative;
      aspect-ratio: 1 / 1;
      padding: 0;
      margin: 0;
      border: 1px solid rgba(240,90,26,0.12);
      background: var(--steel);
      overflow: hidden;
      cursor: pointer;
      transition: border-color 0.2s, transform 0.2s;
      border-radius: 2px;
    }
    .thumb::after {
      /* Subtle orange corner accent, matches the site's industrial vibe */
      content: '';
      position: absolute;
      top: 0; right: 0;
      width: 8px; height: 8px;
      border-top: 2px solid transparent;
      border-right: 2px solid transparent;
      transition: border-color 0.25s;
      pointer-events: none;
    }
    .thumb img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.35s ease, filter 0.25s;
      filter: brightness(0.92) saturate(0.9);
    }
    .thumb.heic-loading img,
    .thumb.heic-pending img {
      opacity: 0;
      filter: none;
    }
    .thumb.heic-ready img {
      opacity: 1;
    }
    .thumb.heic-loading:not(.heic-ready)::before,
    .thumb.heic-pending:not(.heic-ready)::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      width: 24px;
      height: 24px;
      margin-left: -12px;
      margin-top: -12px;
      border: 2px solid rgba(240,90,26,0.18);
      border-top-color: var(--orange);
      border-radius: 50%;
      animation: rigcsLbSpin 0.82s linear infinite;
      z-index: 2;
      pointer-events: none;
    }
    .thumb.heic-loading:not(.heic-ready)::after,
    .thumb.heic-pending:not(.heic-ready)::after {
      border-top-color: transparent;
      border-right-color: transparent;
    }
    .thumb.heic-failed::before {
      content: '\f071';
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--orange);
      background: rgba(5,7,14,0.38);
      z-index: 2;
      pointer-events: none;
    }
    .thumb:hover,
    .thumb:focus-visible {
      outline: none;
      border-color: var(--orange);
      transform: translateY(-1px);
    }
    .thumb:hover::after,
    .thumb:focus-visible::after {
      border-top-color: var(--orange);
      border-right-color: var(--orange);
    }
    .thumb:hover img,
    .thumb:focus-visible img {
      transform: scale(1.08);
      filter: brightness(1.05) saturate(1.1);
    }

    /* Overflow tile: last visible thumb acts as "+N more" */
    .thumb-overflow {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      background: rgba(5,7,14,0.72);
      color: var(--white);
      font-family: 'Bebas Neue', sans-serif;
      letter-spacing: 2px;
      pointer-events: none;
    }
    .thumb-overflow strong {
      font-size: 24px;
      line-height: 1;
      color: var(--orange);
      font-weight: 700;
    }
    .thumb-overflow span {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--silver);
    }

    /* ── "View all N photos" button ── */
    .thumbs-footer {
      display: flex;
      justify-content: flex-start;
    }
    .thumbs-viewall {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: transparent;
      border: 1px solid rgba(240,90,26,0.35);
      color: var(--white);
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 7px 14px;
      cursor: pointer;
      border-radius: 2px;
      transition: all 0.2s;
    }
    .thumbs-viewall i { color: var(--orange); font-size: 11px; }
    .thumbs-viewall:hover,
    .thumbs-viewall:focus-visible {
      outline: none;
      background: var(--orange);
      border-color: var(--orange);
      color: #fff;
    }
    .thumbs-viewall:hover i,
    .thumbs-viewall:focus-visible i { color: #fff; }

    /* Entire card becomes clickable when it has photos loaded */
    .plant-project:has(.plant-project-thumbs:not(.is-loading):not(:empty)) {
      cursor: pointer;
    }

    /* ════════════════════════════════════════════════════════════
       LIGHTBOX  (full-screen image viewer, layered over everything)
       ════════════════════════════════════════════════════════════ */
    .rigcs-lightbox {
      position: fixed;
      inset: 0;
      z-index: 3000;
      display: none;
      flex-direction: column;
      background: rgba(5,7,14,0.96);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      opacity: 0;
      transition: opacity 0.25s ease;
      user-select: none;
      -webkit-user-select: none;
    }
    .rigcs-lightbox.open {
      display: flex;
      opacity: 1;
    }

    /* ── Top bar ── */
    .rigcs-lightbox .lb-topbar {
      position: relative;
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px 24px;
      background: linear-gradient(to bottom, rgba(5,7,14,0.9), rgba(5,7,14,0));
      pointer-events: auto;
    }
    .rigcs-lightbox .lb-title {
      flex: 1;
      min-width: 0;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--white);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .rigcs-lightbox .lb-counter {
      flex-shrink: 0;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 16px;
      letter-spacing: 3px;
      color: var(--orange);
      padding: 4px 10px;
      border: 1px solid rgba(240,90,26,0.35);
      border-radius: 2px;
    }
    .rigcs-lightbox .lb-close {
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: 1px solid rgba(240,90,26,0.35);
      color: var(--white);
      font-size: 16px;
      cursor: pointer;
      border-radius: 2px;
      transition: all 0.2s;
    }
    .rigcs-lightbox .lb-close:hover,
    .rigcs-lightbox .lb-close:focus-visible {
      outline: none;
      background: var(--orange);
      border-color: var(--orange);
      color: #fff;
    }

    /* ── Stage (image area) ── */
    .rigcs-lightbox .lb-stage {
      flex: 1;
      min-height: 0;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding: 20px 80px;
    }
    .rigcs-lightbox .lb-image {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
      opacity: 0;
      transition: opacity 0.25s ease;
      -webkit-user-drag: none;
      pointer-events: none; /* click falls through to .lb-stage for backdrop-close */
    }
    .rigcs-lightbox .lb-image.loaded { opacity: 1; }

    .rigcs-lightbox .lb-spinner {
      position: absolute;
      width: 38px; height: 38px;
      border: 2px solid rgba(240,90,26,0.2);
      border-top-color: var(--orange);
      border-radius: 50%;
      animation: rigcsLbSpin 0.85s linear infinite;
    }
    @keyframes rigcsLbSpin { to { transform: rotate(360deg); } }

    /* ── Nav buttons (prev / next) ── */
    .rigcs-lightbox .lb-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 52px;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(26,31,46,0.7);
      border: 1px solid rgba(240,90,26,0.25);
      color: var(--white);
      font-size: 18px;
      cursor: pointer;
      border-radius: 2px;
      transition: all 0.2s;
      z-index: 1;
    }
    .rigcs-lightbox .lb-prev { left: 16px; }
    .rigcs-lightbox .lb-next { right: 16px; }
    .rigcs-lightbox .lb-nav:hover,
    .rigcs-lightbox .lb-nav:focus-visible {
      outline: none;
      background: var(--orange);
      border-color: var(--orange);
      color: #fff;
      transform: translateY(-50%) scale(1.05);
    }

    /* ── Caption ── */
    .rigcs-lightbox .lb-caption {
      padding: 14px 24px 20px;
      text-align: center;
      color: var(--silver);
      font-family: 'Barlow', sans-serif;
      font-size: 13px;
      letter-spacing: 0.5px;
      background: linear-gradient(to top, rgba(5,7,14,0.9), rgba(5,7,14,0));
      min-height: 20px;
    }

    /* ── Lightbox mobile ── */
    @media (max-width: 768px) {
      .rigcs-lightbox .lb-topbar { padding: 10px 14px; gap: 10px; }
      .rigcs-lightbox .lb-title { font-size: 10px; letter-spacing: 2px; }
      .rigcs-lightbox .lb-counter { font-size: 13px; padding: 3px 7px; letter-spacing: 2px; }
      .rigcs-lightbox .lb-close { width: 36px; height: 36px; font-size: 14px; }

      .rigcs-lightbox .lb-stage { padding: 10px 10px; }
      /* On phones the arrow buttons fight with swipe; shrink them and
         dim them since the primary nav is swipe. */
      .rigcs-lightbox .lb-nav {
        width: 40px; height: 40px; font-size: 14px;
        background: rgba(26,31,46,0.55);
      }
      .rigcs-lightbox .lb-prev { left: 6px; }
      .rigcs-lightbox .lb-next { right: 6px; }
      .rigcs-lightbox .lb-caption { padding: 10px 14px 16px; font-size: 12px; }
    }

    /* ── Thumbnail strip mobile ── */
    @media (max-width: 768px) {
      .thumbs-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 4px; }
      .thumb-overflow strong { font-size: 20px; }
    }

    /* ABOUT */
    #about { background:var(--steel); }
    .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
    .about-img-wrapper { position:relative; }
    .about-img-wrapper img { width:100%; border-radius:2px; display:block; }
    .about-img-accent { position:absolute; bottom:-20px; right:-20px; width:60%; height:60%; border:2px solid var(--orange); border-radius:2px; z-index:-1; }
    .about-badge { position:absolute; top:-20px; left:-20px; background:var(--orange); padding:20px; text-align:center; clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px)); }
    .about-badge .badge-num { font-family:'Bebas Neue',sans-serif; font-size:42px; color:white; line-height:1; display:block; }
    .about-badge .badge-text { font-size:11px; letter-spacing:1px; color:rgba(255,255,255,0.85); text-transform:uppercase; }
    .pillars { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:40px; }
    .pillar { display:flex; gap:16px; align-items:flex-start; }
    .pillar-icon { width:44px; height:44px; background:rgba(240,90,26,0.12); border:1px solid rgba(240,90,26,0.3); border-radius:3px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--orange); font-size:18px; }
    .pillar-title { font-family:'Barlow Condensed',sans-serif; font-size:15px; font-weight:700; letter-spacing:1px; color:var(--white); text-transform:uppercase; margin-bottom:4px; }
    .pillar-text { font-size:13px; color:var(--silver); line-height:1.6; }

    /* STATS */
    #stats { background:var(--orange); padding:80px 0; position:relative; overflow:hidden; }
    #stats::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(0,0,0,0.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.08) 1px,transparent 1px); background-size:40px 40px; }
    .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; z-index:1; }
    .stat-block { text-align:center; padding:20px; border-right:1px solid rgba(255,255,255,0.2); }
    .stat-block:last-child { border-right:none; }
    .stat-big { font-family:'Bebas Neue',sans-serif; font-size:80px; color:white; line-height:1; display:inline-block; }
    .stat-unit { font-family:'Bebas Neue',sans-serif; font-size:50px; color:rgba(255,255,255,0.7); }
    .stat-name { font-family:'Barlow Condensed',sans-serif; font-size:14px; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,0.8); margin-top:8px; }

    /* PROJECTS */
    #projects { background:var(--steel-mid); }
    .projects-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:50px; }
    .gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:260px 260px; gap:4px; }
    .gallery-item { position:relative; overflow:hidden; background:var(--steel-light); }
    .gallery-item:first-child { grid-row:span 2; }
    .gallery-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.6s; filter:brightness(0.7) saturate(0.8); }
    .gallery-item:hover img { transform:scale(1.06); filter:brightness(0.5) saturate(0.8); }
    .gallery-overlay { position:absolute; inset:0; display:flex; align-items:flex-end; padding:24px; background:linear-gradient(to top,rgba(10,13,22,0.8) 0%,transparent 60%); opacity:0; transition:opacity 0.3s; }
    .gallery-item:hover .gallery-overlay { opacity:1; }
    .gallery-label { font-family:'Barlow Condensed',sans-serif; font-size:16px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:white; }

    /* PROCESS */
    #process { background:var(--steel); }
    .process-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:60px; position:relative; }
    .process-steps::before { content:''; position:absolute; top:36px; left:12.5%; right:12.5%; height:1px; background:linear-gradient(90deg,var(--orange),rgba(240,90,26,0.2)); z-index:0; }
    .process-step { padding:0 24px; text-align:center; position:relative; z-index:1; }
    .step-circle { width:72px; height:72px; border-radius:50%; background:var(--steel-mid); border:2px solid var(--orange); display:flex; align-items:center; justify-content:center; margin:0 auto 24px; font-size:22px; color:var(--orange); transition:all 0.3s; }
    .process-step:hover .step-circle { background:var(--orange); color:white; transform:scale(1.1); }
    .step-title { font-family:'Barlow Condensed',sans-serif; font-size:17px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--white); margin-bottom:10px; }
    .step-text { font-size:13px; color:var(--silver); line-height:1.6; }

    /* SHOWCASE */
    #showcase { background:var(--steel-mid); padding:100px 0; }
    .showcase-inner { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
    .slider-container-fixed { position:relative; border-radius:2px; overflow:hidden; }
    .slider-fixed { position:relative; aspect-ratio:4/3; background:var(--steel-light); }
    .slider-fixed img.mySlides { width:100%; height:100%; object-fit:cover; display:none; filter:brightness(0.9); }
    .slider-btn { position:absolute; top:50%; transform:translateY(-50%); background:rgba(240,90,26,0.85); color:white; border:none; width:44px; height:44px; font-size:18px; cursor:pointer; z-index:10; transition:background 0.2s; display:flex; align-items:center; justify-content:center; }
    .slider-btn:hover { background:var(--orange-dark); }
    .slider-btn-prev { left:12px; }
    .slider-btn-next { right:12px; }
    .slider-dots-container { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:8px; }
    .dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.4); cursor:pointer; transition:background 0.3s; }
    .dot.active { background:var(--orange); }
    .project-tag { display:inline-block; font-family:'Barlow Condensed',sans-serif; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--orange); border:1px solid rgba(240,90,26,0.4); padding:4px 12px; border-radius:2px; margin-bottom:20px; }

    /* LOCATION */
    #location { background:var(--steel); padding:80px 0 0; }
    .map-header { text-align:center; margin-bottom:50px; }
    .map-wrapper { position:relative; }
    .map-wrapper iframe { display:block; width:100%; height:520px; border:none; filter:grayscale(20%) contrast(1.05); }
    .map-info-overlay { position:absolute; top:30px; left:40px; background:rgba(15,18,28,0.95); border:1px solid rgba(240,90,26,0.3); border-left:3px solid var(--orange); padding:24px 28px; max-width:280px; }
    .map-info-overlay h4 { font-family:'Barlow Condensed',sans-serif; font-size:16px; letter-spacing:2px; text-transform:uppercase; color:var(--white); margin-bottom:10px; }
    .map-info-overlay p { font-size:13px; color:var(--silver); line-height:1.7; }
    .map-info-overlay a { color:var(--orange); font-size:13px; text-decoration:none; display:block; margin-top:12px; }

    /* CONTACT */
    #contact { background:var(--steel-mid); padding:100px 0; }
    .contact-grid { display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:60px; align-items:start; }
    .contact-card { background:var(--steel); border:1px solid rgba(255,255,255,0.06); border-top:3px solid var(--orange); padding:36px 28px; }
    .contact-icon { font-size:28px; color:var(--orange); margin-bottom:16px; }
    .contact-card h4 { font-family:'Barlow Condensed',sans-serif; font-size:15px; letter-spacing:3px; text-transform:uppercase; color:var(--white); margin-bottom:12px; }
    .contact-card p, .contact-card a { font-size:14px; color:var(--silver); line-height:1.7; text-decoration:none; }
    .contact-card a:hover { color:var(--orange); }
    .modern-form { width:100%; }
    .form-group { margin-bottom:18px; }
    .form-group label { display:block; font-family:'Barlow Condensed',sans-serif; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--silver); margin-bottom:8px; }
    .form-input { width:100%; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:2px; padding:12px 16px; color:var(--white); font-family:'Barlow',sans-serif; font-size:14px; transition:border-color 0.25s; }
    .form-input:focus { outline:none; border-color:var(--orange); background:rgba(240,90,26,0.04); }
    .form-textarea { resize:vertical; min-height:120px; }
    .submit-btn { width:100%; background:var(--orange); color:white; border:none; padding:14px; font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:700; letter-spacing:3px; text-transform:uppercase; cursor:pointer; transition:background 0.25s; clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px)); }
    .submit-btn:hover { background:var(--orange-dark); }

    /* FOOTER */
    footer { background:rgb(8,10,18); padding:60px 0 30px; border-top:1px solid rgba(240,90,26,0.3); }
    .footer-inner { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:50px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,0.06); margin-bottom:30px; }
    .footer-brand p { font-size:13px; color:var(--silver); line-height:1.7; margin-top:16px; max-width:260px; }
    .footer-col h4 { font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--white); margin-bottom:20px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,0.08); }
    .footer-col ul { list-style:none; }
    .footer-col ul li { margin-bottom:10px; }
    .footer-col ul li a { font-size:13px; color:var(--silver); text-decoration:none; transition:color 0.2s; display:flex; align-items:center; gap:6px; }
    .footer-col ul li a::before { content:'›'; color:var(--orange); font-size:16px; }
    .footer-col ul li a:hover { color:var(--orange); }
    .social-links { display:flex; gap:10px; }
    .social-links a { width:38px; height:38px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:2px; display:flex; align-items:center; justify-content:center; color:var(--silver); text-decoration:none; font-size:16px; transition:all 0.25s; }
    .social-links a:hover { background:var(--orange); border-color:var(--orange); color:white; }
    .footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
    .footer-bottom p { font-size:12px; color:var(--silver); }
    .footer-bottom a { color:var(--orange); text-decoration:none; }

    /* BACK TO TOP */
    #return-to-top { position:fixed; bottom:30px; left:30px; width:48px; height:48px; background:var(--orange); color:white; display:flex; align-items:center; justify-content:center; font-size:18px; text-decoration:none; z-index:999; opacity:0; pointer-events:none; transition:opacity 0.3s; clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px)); }
    #return-to-top.visible { opacity:1; pointer-events:all; }
    #return-to-top:hover { background:var(--orange-dark); color:white; }

    /* MOBILE */
    @media(max-width:992px){
      .hero-content{padding:90px 30px 60px;}
      .scroll-indicator{right:20px;}
      .services-grid{grid-template-columns:1fr 1fr;}
      .stats-grid{grid-template-columns:repeat(2,1fr);}
      .about-grid,.showcase-inner{grid-template-columns:1fr;gap:40px;}
      .process-steps{grid-template-columns:1fr 1fr;}
      .process-steps::before{display:none;}
      .contact-grid{grid-template-columns:1fr;}
      .footer-inner{grid-template-columns:1fr 1fr;}
      .nav-links { display: flex !important; }   /* always in DOM – use transform to show/hide */
      .nav-hamburger { display: flex; }
      .gallery-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto;}
      .gallery-item:first-child{grid-row:span 1;}
      .map-info-overlay{display:none;}
    }
    @media(max-width:576px){
      .hero-content{padding:80px 22px 50px;}
      .hero-headline{font-size:clamp(48px,14vw,72px);}
      .hero-logo img { height: clamp(110px, 32vw, 180px); }
      .services-grid{grid-template-columns:1fr;}
      .stats-grid{grid-template-columns:1fr 1fr;}
      .gallery-grid{grid-template-columns:1fr;}
      .footer-inner{grid-template-columns:1fr;}
      .projects-header{flex-direction:column;gap:20px;align-items:flex-start;}
      .site-nav{padding:14px 20px;}
      .scroll-indicator{display:none;}
      .btn-primary-rig,.btn-outline-rig{padding:14px 24px;font-size:13px;}
    }
    @media(max-width:400px){
      .hero-headline{font-size:48px;}
      .hero-logo img { height: 110px; }
      .hero-sub{font-size:20px;}
    }
    /* ── MOBILE NAV DRAWER — transform-based, zero strip bug ── */

    /* Backdrop overlay */
    #nav-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(5,7,15,0.72);
      /* Must be BELOW site-nav (z-index:1000) so drawer is always clickable */
      z-index: 990;
      opacity: 0;
      transition: opacity 0.35s ease;
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
    }
    body.nav-open #nav-overlay {
      display: block;
      opacity: 1;
    }

    @media(max-width:992px){
      /* Drawer: always fixed, starts off-screen to the right */
      .nav-links {
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important; right: 0 !important; bottom: 0 !important;
        width: min(300px, 82vw) !important;
        background: rgba(12,15,24,0.99) !important;
        border-left: 2px solid var(--orange) !important;
        z-index: 1100 !important;
        padding: 0 !important;
        gap: 0 !important;
        /* Hidden off-screen – NO display:none, so no strip flicker */
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.38s cubic-bezier(.4,0,.2,1), visibility 0s 0.38s;
        overflow-y: auto;
        overflow-x: hidden;
      }
      body.nav-open .nav-links {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.38s cubic-bezier(.4,0,.2,1), visibility 0s 0s;
      }
      /* Drawer header */
      .nav-links::before {
        content: '';
        display: block;
        height: 70px;
        flex-shrink: 0;
        background: rgba(240,90,26,0.08);
        border-bottom: 1px solid rgba(240,90,26,0.2);
      }
      .nav-links a {
        font-size: 15px !important;
        padding: 16px 28px !important;
        border-bottom: 1px solid rgba(255,255,255,0.06) !important;
        width: 100% !important;
        display: flex !important;
        align-items: center;
        gap: 10px;
        border-radius: 0 !important;
      }
      .nav-links a::after { display: none !important; }
      .nav-links a.nav-active { background: rgba(240,90,26,0.1); border-left: 3px solid var(--orange); padding-left: 25px !important; }
      .nav-links a.nav-cta {
        margin: 20px 28px 10px !important;
        width: calc(100% - 56px) !important;
        border-radius: 3px !important;
        justify-content: center;
        clip-path: polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
      }
      /* Lang switcher inside drawer */
      .nav-links .drawer-lang {
        display: flex !important;   /* override global display:none — only shown in mobile drawer */
        gap: 10px;
        padding: 20px 28px 28px;
        margin-top: auto;
        border-top: 1px solid rgba(255,255,255,0.06);
      }
      .nav-links .drawer-lang button {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 3px;
        padding: 10px 8px;
        font-family: 'Barlow Condensed', sans-serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--silver);
        cursor: pointer;
        transition: all 0.25s;
      }
      .nav-links .drawer-lang button.active {
        background: var(--orange);
        border-color: var(--orange);
        color: white;
      }
      .nav-links .drawer-lang button .flag {
        font-size: 16px;
        font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
      }
    }

    /* Prevent body scroll when drawer is open */
    @media(max-width:992px){ body.nav-open { overflow: hidden; } }

    /* ── LANGUAGE SWITCHER — floats inside hero, right side ── */
    .hero-lang {
      position: absolute;
      right: 44px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      display: flex;
      flex-direction: column;
      gap: 10px;
      opacity: 0;
      animation: fadeIn 0.8s 1.3s forwards;
    }
    .lang-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(10,13,22,0.55);
      border: 1px solid rgba(255,255,255,0.18);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      cursor: pointer;
      padding: 10px 18px;
      border-radius: 4px;
      transition: all 0.25s;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.7);
      white-space: nowrap;
      min-width: 130px;
    }
    .lang-btn .flag {
      font-size: 20px;
      line-height: 1;
      font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
      flex-shrink: 0;
    }
    .lang-btn:hover {
      border-color: rgba(240,90,26,0.6);
      color: var(--white);
      background: rgba(10,13,22,0.75);
    }
    .lang-btn.active {
      background: var(--orange);
      border-color: var(--orange);
      color: white;
      box-shadow: 0 4px 20px rgba(240,90,26,0.45);
    }
    .lang-btn.active:hover { background: var(--orange-dark); border-color: var(--orange-dark); }

    /* Hero language switcher is DESKTOP-ONLY.
       On tablet/mobile (≤992px) the language switcher lives inside the
       mobile nav drawer (.drawer-lang), so hide the hero overlay there. */
    @media(max-width:992px){
      .hero-lang { display: none !important; }
    }

/* ═══════════════════════════════════════════════════════════════════
   REV 0.1.3 — HERO CAPABILITY TEASER + FABRICATION CATALOG MODAL
   ───────────────────────────────────────────────────────────────────
   Replaces the long hero subtitle/description with a compact, animated
   capability strip and a primary CTA that opens the catalog modal.
   The descriptive paragraph now lives under .services-intro inside the
   #services section instead of the hero.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Services intro paragraph (moved from hero) ── */
.services-intro {
  max-width: 760px;
  margin: 18px auto 0;
  text-align: center;
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
  opacity: 0.92;
}
@media (max-width: 600px) {
  .services-intro { font-size: 15px; line-height: 1.65; padding: 0 4px; }
}

/* ── Hero tagline now uses .hero-sub but tightened ── */
.hero-sub {
  margin-bottom: 36px !important; /* tighter than the original 28px desc gap */
}

/* ── HERO CAPABILITY CHIPS ──
   Four minimalist buttons sitting where the long paragraph used to live.
   Each chip has a number, a label, and a scanning shimmer line that
   sweeps left→right behind the label. Tapping a chip opens the catalog
   modal at the matching category via data-fab-open. */
.hero-caps {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 36px;
  max-width: 640px;
  opacity: 0;
  animation: fadeUp 0.8s 0.9s forwards;
}
.hero-cap {
  position: relative;
  flex: 1 1 calc(50% - 12px);
  min-width: 140px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(240,90,26,0.25);
  border-radius: 3px;
  color: var(--white);
  font-family: 'Barlow Condensed', sans-serif;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
  /* Notched corners matching the .btn-primary-rig style */
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.hero-cap:hover,
.hero-cap:focus-visible {
  border-color: var(--orange);
  background: rgba(240,90,26,0.08);
  transform: translateY(-2px);
  outline: none;
}
.hero-cap-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: var(--orange);
  letter-spacing: 1px;
  line-height: 1;
}
.hero-cap-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}
/* Scanning shimmer line — runs behind the label, staggered per chip */
.hero-cap-line {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(240,90,26,0) 20%,
    var(--orange) 50%,
    rgba(240,90,26,0) 80%,
    transparent 100%);
  transform: translateX(-100%);
  animation: heroCapScan 3.2s ease-in-out infinite;
}
.hero-cap:nth-child(1) .hero-cap-line { animation-delay: 0s; }
.hero-cap:nth-child(2) .hero-cap-line { animation-delay: 0.6s; }
.hero-cap:nth-child(3) .hero-cap-line { animation-delay: 1.2s; }
.hero-cap:nth-child(4) .hero-cap-line { animation-delay: 1.8s; }
@keyframes heroCapScan {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
.hero-cap:hover .hero-cap-line { animation-duration: 1.4s; }

/* Mobile: chips stack 2-up then 1-up on very small phones */
@media (max-width: 768px) {
  .hero-caps { gap: 10px; margin-bottom: 28px; }
  .hero-cap { flex: 1 1 calc(50% - 10px); padding: 12px 14px; min-width: 120px; }
  .hero-cap-num { font-size: 18px; }
  .hero-cap-label { font-size: 12px; letter-spacing: 2px; }
}
@media (max-width: 380px) {
  .hero-cap { flex: 1 1 100%; }
}

/* The hero CTA link keeps the same button styling while routing to #services. */
.hero-fab-cta {
  background: var(--orange);
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════
   FAB-MODAL — shares the visual language of .gallery-modal but lives
   on its own ID/class namespace so the two never collide.
   ═══════════════════════════════════════════════════════════════════ */
.fab-modal {
  position: fixed;
  inset: 0;
  z-index: 2200; /* above gallery so a chip-open-while-gallery-is-open still wins */
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 20px;
  background: rgba(5,7,14,0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s;
  overscroll-behavior: contain;
}
.fab-modal.open { display: flex; opacity: 1; }
.fab-modal-box {
  position: relative;
  width: 100%;
  max-width: 1100px;
  height: min(calc(var(--rigcs-fab-vh, 100vh) - 40px), 820px);
  height: min(92dvh, 820px);
  max-height: 820px;
  min-height: 520px;
  background: var(--steel);
  border: 1px solid rgba(240,90,26,0.4);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(0.96) translateY(14px);
  transition: transform 0.35s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 30px 80px rgba(0,0,0,0.75), 0 0 0 1px rgba(240,90,26,0.1);
}
.fab-modal.open .fab-modal-box { transform: scale(1) translateY(0); }
.fab-modal-box::before,
.fab-modal-box::after {
  content: '';
  position: absolute;
  width: 28px; height: 28px;
  border: 2px solid var(--orange);
  pointer-events: none;
  z-index: 10;
}
.fab-modal-box::before { top:-1px; left:-1px; border-right:none; border-bottom:none; }
.fab-modal-box::after  { bottom:-1px; right:-1px; border-left:none; border-top:none; }

/* Top bar */
.fab-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: rgba(26,31,46,0.98);
  border-bottom: 1px solid rgba(240,90,26,0.15);
  flex-shrink: 0;
  position: relative;
  z-index: 40;
}
.fab-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--silver);
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.fab-crumb {
  background: transparent;
  border: none;
  color: var(--silver);
  cursor: pointer;
  padding: 6px 10px;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  font-weight: 600;
  border-radius: 2px;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}
.fab-crumb:hover,
.fab-crumb:focus-visible { color: var(--orange); background: rgba(240,90,26,0.08); outline: none; }
.fab-crumb.current {
  color: var(--white);
  cursor: default;
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60vw;
}
.fab-crumb-sep { color: rgba(240,90,26,0.4); font-size: 10px; flex-shrink: 0; }
.fab-modal-close {
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid rgba(240,90,26,0.4);
  color: var(--orange);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: all 0.25s;
  border-radius: 2px;
  flex-shrink: 0;
  margin-left: 12px;
  position: relative;
  z-index: 60;
  -webkit-tap-highlight-color: transparent;
}
.fab-modal-close i { display: none; pointer-events: none; }
.fab-modal-close::before {
  content: '×';
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-1px);
}
.fab-modal-close:hover { background: var(--orange); color: #fff; transform: rotate(90deg); }
.fab-modal-close:focus-visible { outline: 2px solid rgba(240,90,26,0.65); outline-offset: 3px; }

/* Viewport — holds two panes; only the .active one is visible */
.fab-viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.fab-pane {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  overflow-anchor: none;
  padding: 32px 36px;
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(.4,0,.2,1);
}
.fab-pane.active { opacity: 1; transform: translateX(0); pointer-events: auto; }
.fab-pane#fabPaneHome { transform: translateX(0); } /* home enters from same side */
.fab-pane:not(.active)#fabPaneHome { transform: translateX(-20px); }

/* ─── HOME PANE: header + grid ─── */
.fab-home-header { text-align: center; margin-bottom: 28px; }
.fab-home-eyebrow {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 10px;
  padding-left: 28px;
  position: relative;
}
.fab-home-eyebrow::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 20px; height: 2px;
  background: var(--orange);
}
.fab-home-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 4vw, 42px);
  color: var(--white);
  letter-spacing: 2px;
  margin: 0 0 10px;
  line-height: 1;
}
.fab-home-desc {
  color: var(--text);
  max-width: 620px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.65;
}

.fab-home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.fab-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(240,90,26,0.18);
  border-radius: 3px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  color: var(--white);
  text-align: left;
  font-family: 'Barlow', sans-serif;
  transition: border-color 0.25s, background 0.25s, transform 0.25s;
  opacity: 0;
  animation: fabCardIn 0.5s ease-out forwards;
}
@keyframes fabCardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fab-card:hover,
.fab-card:focus-visible {
  border-color: var(--orange);
  background: rgba(240,90,26,0.07);
  transform: translateY(-3px);
  outline: none;
}
.fab-card-icon {
  flex-shrink: 0;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(240,90,26,0.07);
  border: 1px solid rgba(240,90,26,0.25);
  border-radius: 3px;
}
.fab-card-icon svg { width: 36px; height: 36px; }
.fab-card-body { flex: 1; min-width: 0; }
.fab-card-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 1.5px;
  color: var(--white);
  margin-bottom: 4px;
  line-height: 1.1;
}
.fab-card-desc {
  font-size: 13px;
  color: var(--silver);
  line-height: 1.5;
}
.fab-card-arrow {
  color: var(--orange);
  font-size: 14px;
  opacity: 0.5;
  flex-shrink: 0;
  transition: transform 0.25s, opacity 0.25s;
}
.fab-card:hover .fab-card-arrow { opacity: 1; transform: translateX(4px); }

/* ─── DETAIL PANE ─── */
.fab-detail-header {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(240,90,26,0.15);
}
.fab-detail-icon {
  flex-shrink: 0;
  width: 88px; height: 88px;
  background: rgba(240,90,26,0.07);
  border: 1px solid rgba(240,90,26,0.3);
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
}
.fab-detail-icon svg { width: 56px; height: 56px; }
.fab-detail-headtext { flex: 1; min-width: 0; }
.fab-detail-eyebrow {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 6px;
}
.fab-detail-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(26px, 3.6vw, 36px);
  color: var(--white);
  letter-spacing: 2px;
  line-height: 1;
  margin: 0 0 10px;
}
.fab-detail-desc {
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
}

.fab-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 28px;
}
.fab-spec {
  background: rgba(255,255,255,0.02);
  border-left: 2px solid var(--orange);
  padding: 12px 14px;
}
.fab-spec-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 4px;
  font-weight: 700;
}
.fab-spec-value { color: var(--white); font-size: 14px; line-height: 1.5; }

.fab-thumbs-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: 12px;
}
.fab-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  min-height: 80px;
}
.fab-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(240,90,26,0.15);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.25s, transform 0.25s;
  contain: layout paint;
}
.fab-thumb img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, opacity 0.3s;
  opacity: 0;
  animation: fabThumbIn 0.5s ease-out 0.05s forwards;
  will-change: opacity;
}
.fab-thumb.fab-thumb-pending img { opacity: 0; animation: none; }
.fab-thumb.fab-thumb-loaded img { opacity: 1; }
.fab-thumb.fab-thumb-failed img { opacity: .25; }
@keyframes fabThumbIn { from { opacity: 0; } to { opacity: 1; } }
.fab-thumb:hover { border-color: var(--orange); transform: translateY(-2px); }
.fab-thumb:hover img { transform: scale(1.06); }
.fab-thumb-zoom {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,13,22,0.55);
  color: var(--orange);
  font-size: 20px;
  opacity: 0;
  transition: opacity 0.25s;
}
.fab-thumb:hover .fab-thumb-zoom,
.fab-thumb:focus-visible .fab-thumb-zoom { opacity: 1; }

.fab-load-more-wrap {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 18px 0 4px;
  margin: 0;
}
.fab-load-more {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 216px;
  max-width: calc(100vw - 88px);
  height: 34px;
  min-height: 34px;
  padding: 0 28px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, #f06a2f 0%, #df5421 100%);
  color: #fff;
  cursor: pointer;
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .8px;
  line-height: 1;
  text-align: center;
  text-transform: none;
  text-shadow: 0 1px 0 rgba(0,0,0,.22);
  box-shadow: 0 7px 0 rgba(8,10,17,.42), 0 14px 26px rgba(0,0,0,.20);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.fab-load-more::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 7px;
  background: rgba(10,12,18,.38);
  pointer-events: none;
}
.fab-load-more span {
  display: block;
  transform: translateY(-1px);
  white-space: nowrap;
}
.fab-load-more:hover,
.fab-load-more:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 8px 0 rgba(8,10,17,.44), 0 18px 32px rgba(0,0,0,.24);
  outline: 1px solid rgba(240,90,26,.46);
  outline-offset: 4px;
}
.fab-load-more:active {
  transform: translateY(3px);
  box-shadow: 0 4px 0 rgba(8,10,17,.42), 0 10px 18px rgba(0,0,0,.18);
}

.fab-thumbs-loading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--silver);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 18px 0;
}
.fab-tl-dot {
  width: 6px; height: 6px;
  background: var(--orange);
  border-radius: 50%;
  animation: fabPulse 1.2s ease-in-out infinite;
}
.fab-tl-dot:nth-child(2) { animation-delay: 0.15s; }
.fab-tl-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes fabPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%      { opacity: 1;   transform: scale(1.1); }
}
.fab-thumbs-empty {
  grid-column: 1 / -1;
  padding: 22px;
  text-align: center;
  color: var(--silver);
  font-size: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(240,90,26,0.2);
  border-radius: 3px;
}

.fab-thumb.heic-loading img,
.fab-thumb.heic-pending img {
  opacity: 0;
  filter: none;
}

.fab-thumb.heic-ready img {
  opacity: 1;
}

.fab-thumb.heic-loading:not(.heic-ready)::before,
.fab-thumb.heic-pending:not(.heic-ready)::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  margin-top: -12px;
  border: 2px solid rgba(240, 90, 26, 0.18);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: rigcsLbSpin 0.82s linear infinite;
  z-index: 2;
  pointer-events: none;
}

.fab-thumb.heic-failed::before {
  content: '\f071';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  background: rgba(5, 7, 14, 0.38);
  z-index: 2;
  pointer-events: none;
}

.fab-detail-cta {
  margin-top: 28px;
  display: flex;
  justify-content: flex-start;
}

/* Lock body scroll while modal is open */
html.fab-modal-locked,
body.fab-modal-locked {
  overflow: hidden;
  overscroll-behavior: none;
}
body.fab-modal-locked { width: 100%; }

/* ─── Mobile responsive — full screen below 768px, matches gallery modal pattern ─── */
@media (max-width: 768px) {
  .fab-modal {
    align-items: stretch;
    justify-content: stretch;
    min-height: var(--rigcs-fab-vh, 100dvh);
    padding: 0;
  }
  .fab-modal-box {
    width: 100%;
    max-width: 100%;
    height: var(--rigcs-fab-vh, 100dvh);
    max-height: none;
    min-height: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .fab-topbar {
    padding: calc(10px + env(safe-area-inset-top, 0px)) calc(14px + env(safe-area-inset-right, 0px)) 10px calc(14px + env(safe-area-inset-left, 0px));
    min-height: calc(58px + env(safe-area-inset-top, 0px));
    position: relative;
    z-index: 70;
  }
  .fab-breadcrumb { font-size: 11px; letter-spacing: 2px; }
  .fab-crumb { padding: 4px 6px; }
  .fab-modal-close {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    font-size: 15px;
    margin-left: 8px;
    position: relative;
    z-index: 80;
  }

  .fab-pane {
    padding: 22px max(18px, env(safe-area-inset-right, 0px)) calc(30px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
    overscroll-behavior-y: contain;
  }

  .fab-home-grid { grid-template-columns: 1fr; gap: 10px; }
  .fab-card { padding: 14px; gap: 12px; }
  .fab-card-icon { width: 48px; height: 48px; }
  .fab-card-icon svg { width: 30px; height: 30px; }
  .fab-card-name { font-size: 18px; }
  .fab-card-desc { font-size: 12.5px; }

  .fab-detail-header {
    flex-direction: column;
    gap: 14px;
    padding-bottom: 18px;
    margin-bottom: 18px;
  }
  .fab-detail-icon { width: 64px; height: 64px; }
  .fab-detail-icon svg { width: 40px; height: 40px; }

  .fab-specs { grid-template-columns: 1fr; gap: 8px; margin-bottom: 22px; }
  .fab-thumbs { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
  .fab-load-more-wrap { padding: 20px 0 6px; }
  .fab-load-more { width: 216px; max-width: min(216px, calc(100vw - 72px)); height: 36px; min-height: 36px; font-size: 19px; }

  .fab-detail-cta { justify-content: stretch; }
  .fab-detail-cta .btn-primary-rig { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
  .fab-home-title { font-size: 26px; }
  .fab-detail-title { font-size: 24px; }
}

/* Honour reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hero-cap-line { animation: none; }
  .fab-card, .fab-thumb img { animation: none; opacity: 1; transform: none; }
  .fab-modal-box, .fab-pane { transition: none; }
}

/* =========================================================
   DESKTOP HERO LANGUAGE SWITCHER ALIGNMENT
   Desktop only. Mobile keeps using the drawer language buttons.
   ========================================================= */

/* Default: keep hero language hidden outside desktop logic */
.hero-lang {
  display: none;
}

/* Desktop only */
@media (min-width: 993px) {
  #hero {
    --hero-side-gutter: clamp(36px, 4vw, 64px);
  }

  /* Keep Scroll / Desplazar on the same right-side column */
  .scroll-indicator {
    right: var(--hero-side-gutter);
  }

  /* Move English / Español to the right side of the hero */
  .hero-lang {
    position: absolute;
    right: var(--hero-side-gutter);
    bottom: 175px;
    z-index: 10;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;

    opacity: 0;
    animation: fadeIn 0.8s 1.3s forwards;
  }
}

/* Tablet/mobile: do not affect current mobile behavior */
@media (max-width: 992px) {
  .hero-lang {
    display: none !important;
  }
}
/* ═══════════════════════════════════════════════════════════════════
   REV 0.1.8 — WHITE / ORANGE CONTRAST SYSTEM
   Purpose: convert the main visual contrast from dark/orange to
   white/orange without touching layout, JS, i18n, galleries, or modal flow.
   This block intentionally lives at the end of main.css so it overrides
   the old dark tokens and hard-coded dark surfaces safely.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --orange: #F05A1A;
  --orange-dark: #C8440E;
  --steel: #FFFFFF;
  --steel-mid: #F7F8FB;
  --steel-light: #EEF2F6;
  --silver: #5D6675;
  --white: #151922;
  --text: #2E3642;
  --paper: #FFFFFF;
  --paper-muted: #F7F8FB;
  --ink: #151922;
  --line: rgba(21,25,34,0.12);
  --line-strong: rgba(21,25,34,0.18);
  --line-orange: rgba(240,90,26,0.22);
  --soft-shadow: 0 18px 45px rgba(21,25,34,0.08);
  --soft-shadow-strong: 0 24px 70px rgba(21,25,34,0.14);
}

html,
body {
  background: var(--paper);
  color: var(--text);
}

/* NAV — transparent hero state stays readable over the now-light hero. */
.site-nav.scrolled {
  background: rgba(255,255,255,0.96);
  border-bottom: 1px solid var(--line-orange);
  box-shadow: 0 10px 34px rgba(21,25,34,0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav-links a:not(.nav-cta) { color: var(--ink); }
.nav-links a:hover,
.nav-links a.nav-active { color: var(--orange); }
.nav-hamburger span { background: var(--ink); }
#nav-overlay { background: rgba(21,25,34,0.30); }

@media(max-width:992px){
  .nav-links {
    background: rgba(255,255,255,0.99) !important;
    border-left: 2px solid var(--orange) !important;
    box-shadow: -22px 0 60px rgba(21,25,34,0.16) !important;
  }
  .nav-links::before {
    background: rgba(240,90,26,0.06) !important;
    border-bottom: 1px solid var(--line-orange) !important;
  }
  .nav-links a {
    color: var(--ink) !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .nav-links a:hover,
  .nav-links a.nav-active {
    color: var(--orange) !important;
    background: rgba(240,90,26,0.07) !important;
  }
  .nav-links a.nav-cta { color: #fff !important; }
  .nav-links .drawer-lang { border-top: 1px solid var(--line) !important; }
  .nav-links .drawer-lang button {
    background: var(--paper-muted) !important;
    border: 1px solid var(--line) !important;
    color: var(--silver) !important;
  }
  .nav-links .drawer-lang button.active {
    background: var(--orange) !important;
    border-color: var(--orange) !important;
    color: #fff !important;
  }
}

/* HERO — keep the industrial photo, but remove the heavy dark veil. */
.hero-bg {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.38) 48%, rgba(247,248,251,0.58) 100%),
    url('imagenes/hero/first.jpeg') center/cover no-repeat;
}

.hero-bg::before {
  background-image:
    linear-gradient(rgba(240,90,26,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,90,26,0.045) 1px, transparent 1px);
}
.hero-logo img {
  filter: drop-shadow(0 14px 30px rgba(21,25,34,0.16))
          drop-shadow(0 0 18px rgba(240,90,26,0.10));
}
.hero-logo-fallback,
.hero-headline,
.hero-sub,
.hero-desc,
.hero-cap-label { color: var(--ink); }
.hero-sub { color: var(--silver); }
.hero-desc { color: var(--text); }
.hero-cap {
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--line-orange);
  color: var(--ink);
  box-shadow: 0 14px 34px rgba(21,25,34,0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero-cap:hover,
.hero-cap:focus-visible {
  background: rgba(240,90,26,0.065);
  box-shadow: 0 18px 40px rgba(240,90,26,0.11);
}
.btn-outline-rig {
  background: rgba(255,255,255,0.74);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  box-shadow: 0 12px 30px rgba(21,25,34,0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-outline-rig:hover {
  background: rgba(240,90,26,0.07);
  border-color: var(--orange);
  color: var(--orange);
}
.scroll-indicator span { color: var(--silver); }

/* Desktop language switcher on hero */
.lang-btn {
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--line);
  color: var(--silver);
  box-shadow: 0 12px 30px rgba(21,25,34,0.06);
}
.lang-btn:hover {
  background: rgba(255,255,255,0.94);
  border-color: rgba(240,90,26,0.45);
  color: var(--ink);
}
.lang-btn.active {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

/* COMMON SECTIONS */
section { background: var(--paper); }
#services,
#projects,
#showcase,
#contact { background: var(--paper-muted); }
#about,
#process { background: var(--paper); }
.section-title,
.service-name,
.pillar-title,
.step-title,
.contact-card h4,
.footer-col h4 { color: var(--ink); }
.section-desc,
.service-text,
.pillar-text,
.step-text,
.contact-card p,
.contact-card a,
.footer-brand p,
.footer-col ul li a,
.footer-bottom p { color: var(--silver); }

/* Cards / panels */
.hero-stats-bar,
.service-card,
.contact-card,
.step-circle,
.fab-card,
.gallery-state-card,
.plant-project,
.plant-no-projects,
.fab-spec,
.fab-thumbs-empty {
  box-shadow: var(--soft-shadow);
}
.hero-stats-bar {
  background: var(--paper);
  border-top: 3px solid var(--orange);
  border-bottom: 1px solid var(--line);
}
.hero-stat-item { border-right: 1px solid var(--line); }
@media(max-width:600px){
  .hero-stat-item { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
}
.service-card {
  background: var(--paper);
  border: 1px solid var(--line);
}
.service-card:hover { background: #fff; box-shadow: var(--soft-shadow-strong); }
.service-num { color: rgba(21,25,34,0.06); }
.pillar-icon,
.step-circle,
.fab-card-icon,
.fab-detail-icon {
  background: rgba(240,90,26,0.08);
  border-color: var(--line-orange);
}
.step-circle { background: var(--paper); }

/* AUTOMOTIVE MAP — keep 3D canvas intact, only lighten chrome around it. */
#automotive-map {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-muted) 50%, var(--paper) 100%);
}
#automotive-map::before {
  background-image:
    linear-gradient(rgba(240,90,26,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,90,26,0.035) 1px, transparent 1px);
}
.automap-wrap {
  background:
    radial-gradient(ellipse at center, rgba(240,90,26,0.08) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(247,248,251,0.92) 100%);
  border: 1px solid var(--line-orange);
  box-shadow: var(--soft-shadow);
}
.automap-loader {
  background: rgba(255,255,255,0.88);
}
.automap-hint { color: rgba(93,102,117,0.72); }
.automap-tooltip {
  background: rgba(255,255,255,0.98);
  color: var(--ink);
  box-shadow: 0 18px 45px rgba(21,25,34,0.16);
}

/* MODALS — white panels with orange borders. Backdrop remains dim for focus. */
.plant-modal,
.gallery-modal,
.fab-modal { background: rgba(21,25,34,0.36); }
.plant-modal-box,
.gallery-modal-box,
.fab-modal-box {
  background: var(--paper);
  box-shadow: var(--soft-shadow-strong), 0 0 0 1px rgba(240,90,26,0.08);
}
.plant-modal-header,
.gallery-topbar,
.gallery-home-header,
.gallery-state-header,
.fab-topbar {
  background: linear-gradient(135deg, var(--paper-muted) 0%, var(--paper) 100%);
  border-color: var(--line-orange);
}
.gallery-pane::-webkit-scrollbar-track,
.plant-modal-body::-webkit-scrollbar-track,
.gallery-modal-body::-webkit-scrollbar-track { background: var(--paper-muted); }
.gallery-crumb.current,
.fab-crumb.current,
.gallery-home-title,
.gallery-state-title,
.plant-modal-state,
.plant-brand-chip,
.plant-project-name,
.plant-no-projects .title,
.fab-home-title,
.fab-detail-title,
.fab-card-name,
.fab-spec-value { color: var(--ink); }
.gallery-home-desc,
.gallery-state-sub,
.fab-home-desc,
.fab-detail-desc,
.plant-modal-sub,
.plant-project-desc,
.fab-card-desc { color: var(--text); }
.gallery-state-card,
.fab-card,
.plant-project,
.plant-no-projects,
.fab-spec,
.fab-thumbs-empty {
  background: var(--paper-muted);
  border-color: var(--line-orange);
}
.gallery-state-card:hover,
.gallery-state-card:focus-visible,
.fab-card:hover,
.fab-card:focus-visible,
.plant-project:hover {
  background: #fff;
  box-shadow: var(--soft-shadow-strong);
}
.plant-project-scope span,
.gallery-state-card .card-brand,
.plant-brand-chip {
  background: rgba(240,90,26,0.07);
  border-color: var(--line-orange);
}
.gallery-search,
.form-input {
  background: #fff;
  border-color: var(--line);
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(21,25,34,0.04);
}
.gallery-search:focus,
.form-input:focus {
  background: #fff;
  border-color: var(--orange);
}
.gallery-filter-chip,
.thumbs-viewall,
.fab-load-more {
  box-shadow: 0 8px 20px rgba(240,90,26,0.10);
}

/* Gallery thumbnails / map overlays */
.thumb,
.fab-thumb {
  background: var(--paper-muted);
  border-color: var(--line-orange);
}
.thumb::after { border-color: var(--orange); }
.map-info-overlay {
  background: rgba(255,255,255,0.94);
  border-left: 3px solid var(--orange);
  box-shadow: var(--soft-shadow);
}
.map-info-overlay h4 { color: var(--ink); }

/* Contact / footer */
.contact-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--orange);
}
.footer-inner,
.footer-col h4 { border-color: var(--line); }
.social-links a {
  background: #fff;
  border-color: var(--line);
  color: var(--silver);
}
.social-links a:hover { color: #fff; }

/* Image lightbox stays intentionally darker so photos remain the focus. */
.rigcs-lightbox { background: rgba(10,12,18,0.94); }
.rigcs-lightbox .lb-topbar,
.rigcs-lightbox .lb-caption { background: rgba(10,12,18,0.86); }
.rigcs-lightbox .lb-title { color: rgba(255,255,255,0.88); }

/* ═══════════════════════════════════════════════════════════════════
   REV 0.1.9 — WHITE SECTIONS + BLACK HERO SPLIT
   Purpose: keep the white/orange contrast system for every section
   after the hero, while restoring the hero to a black/orange industrial
   contrast. This block intentionally lives after REV 0.1.8 so it only
   overrides hero/nav states and does not break the white section system.
   ═══════════════════════════════════════════════════════════════════ */

/* Transparent navbar on the dark hero must be light; once scrolled, it
   returns to the white/orange section mode. */
.site-nav:not(.scrolled) .nav-links a:not(.nav-cta) {
  color: rgba(245,246,250,0.92);
  text-shadow: 0 8px 22px rgba(0,0,0,0.34);
}
.site-nav:not(.scrolled) .nav-links a:hover,
.site-nav:not(.scrolled) .nav-links a.nav-active {
  color: var(--orange);
}
.site-nav:not(.scrolled) .nav-hamburger span {
  background: rgba(245,246,250,0.94);
}
.site-nav.scrolled .nav-links a:not(.nav-cta) {
  color: var(--ink);
  text-shadow: none;
}
.site-nav.scrolled .nav-links a:hover,
.site-nav.scrolled .nav-links a.nav-active {
  color: var(--orange);
}
.site-nav.scrolled .nav-hamburger span {
  background: var(--ink);
}
body.nav-open .site-nav .nav-hamburger span {
  background: var(--ink);
  text-shadow: none;
}

/* Hero-only black/orange contrast. The rest of the site keeps the white
   tokens defined in REV 0.1.8. */
#hero {
  background: #0A0D16;
  color: #F5F6FA;
}
#hero .hero-bg {
  background:
    linear-gradient(135deg, rgba(10,13,22,0.88) 0%, rgba(10,13,22,0.54) 48%, rgba(10,13,22,0.90) 100%),
    url('imagenes/hero/first.jpeg') center/cover no-repeat;
}
#hero .hero-bg::before {
  background-image:
    linear-gradient(rgba(240,90,26,0.060) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,90,26,0.060) 1px, transparent 1px);
  background-size: 60px 60px;
}
#hero .hero-logo img {
  filter: drop-shadow(0 12px 34px rgba(0,0,0,0.72))
          drop-shadow(0 0 18px rgba(240,90,26,0.18));
}
#hero .hero-logo-fallback,
#hero .hero-headline,
#hero .hero-cap-label {
  color: #F5F6FA;
}
#hero .hero-sub {
  color: var(--orange) !important;
  text-shadow: 0 12px 28px rgba(0,0,0,0.48);
}
#hero .hero-desc {
  color: rgba(245,246,250,0.82);
}
#hero .hero-cap {
  background: rgba(10,13,22,0.60);
  border: 1px solid rgba(240,90,26,0.36);
  color: #F5F6FA;
  box-shadow: 0 16px 42px rgba(0,0,0,0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#hero .hero-cap:hover,
#hero .hero-cap:focus-visible {
  background: rgba(240,90,26,0.13);
  border-color: var(--orange);
  box-shadow: 0 18px 46px rgba(240,90,26,0.18);
}
#hero .hero-cap-num {
  color: var(--orange);
}
#hero .btn-outline-rig {
  background: rgba(10,13,22,0.38);
  color: #F5F6FA;
  border: 1px solid rgba(255,255,255,0.42);
  box-shadow: 0 16px 42px rgba(0,0,0,0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#hero .btn-outline-rig:hover {
  background: rgba(240,90,26,0.13);
  border-color: var(--orange);
  color: var(--orange);
}
#hero .scroll-indicator span {
  color: rgba(245,246,250,0.72);
  text-shadow: 0 8px 18px rgba(0,0,0,0.42);
}

/* Hero language buttons stay dark on desktop over the black hero. */
#hero .lang-btn {
  background: rgba(10,13,22,0.72);
  border: 1px solid rgba(255,255,255,0.20);
  color: rgba(245,246,250,0.86);
  box-shadow: 0 14px 34px rgba(0,0,0,0.24);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#hero .lang-btn:hover {
  background: rgba(240,90,26,0.16);
  border-color: rgba(240,90,26,0.58);
  color: #fff;
}
#hero .lang-btn.active {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  box-shadow: 0 10px 28px rgba(240,90,26,0.32);
}

/* Keep all non-hero sections explicitly white/orange. */
body > section:not(#hero),
#services,
#about,
#process,
#projects,
#showcase,
#contact,
#automotive-map {
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════
   REV 0.1.10 — MOBILE HAMBURGER DRAWER STABILITY FIX
   Purpose: make the mobile menu use one reliable open/closed state,
   prevent the hidden drawer from catching taps, and keep drawer content
   above the overlay but below the close button.
   ═══════════════════════════════════════════════════════════════════ */
.nav-hamburger {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

@media(max-width:992px){
  .site-nav {
    z-index: 1200;
  }

  .nav-hamburger {
    display: flex !important;
    z-index: 1230;
  }

  #nav-overlay {
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: 1190;
    transition: opacity 0.35s ease, visibility 0s 0.35s;
  }

  body.nav-open #nav-overlay {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.35s ease, visibility 0s 0s;
  }

  .nav-links {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: min(320px, 86vw) !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    transform: translate3d(105%, 0, 0) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 1210 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    will-change: transform;
    transition:
      transform 0.38s cubic-bezier(.4,0,.2,1),
      opacity 0.25s ease,
      visibility 0s 0.38s !important;
  }

  body.nav-open .nav-links {
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition:
      transform 0.38s cubic-bezier(.4,0,.2,1),
      opacity 0.25s ease,
      visibility 0s 0s !important;
  }

  .nav-links > li {
    width: 100%;
    flex-shrink: 0;
  }

  .nav-links a {
    min-height: 52px;
  }

  .nav-links .drawer-lang {
    width: 100%;
    flex-shrink: 0;
  }

  body.nav-open {
    overflow: hidden;
    touch-action: none;
  }
}

@media(min-width:993px){
  #nav-overlay {
    display: none !important;
  }

  body.nav-open {
    overflow-x: hidden;
    overflow-y: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   REV 0.1.11 — MOBILE HERO TOP ALIGNMENT
   Purpose: on shorter mobile displays, keep the hero content closer to
   the navbar instead of vertically centering it too low on the screen.
   Desktop/tablet hero spacing is intentionally untouched.
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width: 576px) {
  #hero {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    align-items: flex-start;
  }

  #hero .hero-content {
    padding-top: clamp(64px, 10svh, 86px) !important;
    padding-right: 22px;
    padding-bottom: clamp(34px, 6svh, 48px) !important;
    padding-left: 22px;
  }

  #hero .hero-logo {
    margin-bottom: 8px;
  }

  #hero .hero-logo img {
    height: clamp(96px, 29vw, 140px);
  }

  #hero .hero-sub {
    margin-bottom: 18px;
  }

  #hero .hero-caps {
    margin-bottom: 22px;
  }
}

@media(max-width: 400px), (max-height: 720px) and (max-width: 576px) {
  #hero .hero-content {
    padding-top: clamp(56px, 8svh, 72px) !important;
    padding-bottom: 30px !important;
  }

  #hero .hero-logo img {
    height: clamp(88px, 27vw, 120px);
  }

  #hero .hero-sub {
    font-size: clamp(18px, 5.2vw, 22px);
    line-height: 1.25;
    margin-bottom: 16px;
  }

  #hero .hero-actions {
    gap: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   REV 0.1.12 — MOBILE HERO IDENTITY CENTERING
   Purpose: center only the logo and main hero subtitle on phones while
   keeping the desktop/tablet hero composition and CTA layout untouched.
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width: 576px) {
  #hero .hero-logo {
    width: 100%;
    text-align: center;
  }

  #hero .hero-logo img {
    margin-left: auto;
    margin-right: auto;
  }

  #hero .hero-logo-fallback {
    display: inline-block;
    text-align: center;
  }

  #hero .hero-sub {
    width: 100%;
    max-width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   REV 0.1.13 — MOBILE HERO VISUAL BALANCE
   Purpose: keep the mobile identity block visually centered by nudging
   the logo optical center slightly right and centering the narrower
   secondary quote CTA under the primary CTA. Desktop/tablet unchanged.
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width: 576px) {
  #hero .hero-logo img {
    transform: translateX(clamp(8px, 2.4vw, 14px));
  }

  #hero .hero-logo.is-fallback {
    transform: translateX(0);
  }

  #hero .hero-actions {
    width: 100%;
    justify-content: center;
  }

  #hero .hero-actions .btn-primary-rig,
  #hero .hero-actions .btn-outline-rig {
    justify-content: center;
  }

  #hero .hero-actions .btn-outline-rig {
    align-self: center;
    margin-left: auto;
    margin-right: auto;
  }
}

@media(max-width: 400px), (max-height: 720px) and (max-width: 576px) {
  #hero .hero-logo img {
    transform: translateX(clamp(6px, 2vw, 10px));
  }
}

/* ═══════════════════════════════════════════════════════════════════
   REV 0.1.14 — MOBILE LOGO OPTICAL CENTER
   Purpose: the real logo artwork has more visual weight on the left side
   than the centered subtitle below it. On phones, shift only the rendered
   logo artwork further right so its visual center matches the centered
   Rigging/Construction line. CTA buttons and desktop/tablet stay unchanged.
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width: 576px) {
  #hero .hero-logo img {
    transform: translateX(clamp(24px, 7.2vw, 34px)) !important;
  }

  #hero .hero-logo.is-fallback,
  #hero .hero-logo.is-fallback img {
    transform: translateX(0) !important;
  }
}

@media(max-width: 400px), (max-height: 720px) and (max-width: 576px) {
  #hero .hero-logo img {
    transform: translateX(clamp(20px, 6vw, 28px)) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   REV 0.1.15 — MOBILE HERO HIGHER STACK + BOTTOM QUOTE CTA
   Purpose: on phones, raise the hero identity/action stack closer to the
   hamburger area and place the secondary Request Quote CTA near the bottom
   of the hero for a cleaner, minimal mobile composition.
   Desktop/tablet behavior remains untouched.
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width: 576px) {
  #hero {
    min-height: 100vh;
    min-height: 100svh;
    position: relative;
  }

  #hero .hero-content {
    padding-top: clamp(24px, 4svh, 42px) !important;
    padding-bottom: calc(clamp(130px, 18svh, 180px) + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* The logo artwork carries transparent vertical space inside the PNG.
     These negative margins remove that optical dead zone only on phones,
     making the visible logo feel closer to the hamburger without changing
     the approved horizontal centering. */
  #hero .hero-logo {
    margin-top: clamp(-60px, -7.8svh, -40px) !important;
    margin-bottom: clamp(-34px, -5.2svh, -22px) !important;
  }

  #hero .hero-sub {
    margin-bottom: 16px !important;
  }

  #hero .hero-caps {
    margin-bottom: 18px !important;
  }

  /* Use a simple opacity-only reveal on mobile so the absolute bottom CTA
     can anchor to #hero instead of being affected by the parent fadeUp
     transform animation. */
  #hero .hero-actions {
    animation: fadeIn 0.8s 1.1s forwards !important;
    position: static !important;
  }

  #hero .hero-actions .btn-outline-rig {
    position: absolute !important;
    left: 50% !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(22px, 5svh, 44px)) !important;
    width: min(360px, 74vw) !important;
    min-height: 52px;
    padding: 13px 22px !important;
    margin: 0 !important;
    justify-content: center !important;
    text-align: center !important;
    transform: translateX(-50%) !important;
    z-index: 4;
    background: rgba(10, 13, 22, 0.34);
  }

  #hero .hero-actions .btn-outline-rig:hover,
  #hero .hero-actions .btn-outline-rig:focus-visible {
    transform: translate(-50%, -2px) !important;
  }
}

@media(max-width: 400px), (max-height: 720px) and (max-width: 576px) {
  #hero .hero-content {
    padding-top: clamp(18px, 3svh, 32px) !important;
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #hero .hero-logo {
    margin-top: clamp(-54px, -7svh, -36px) !important;
    margin-bottom: clamp(-30px, -4.8svh, -20px) !important;
  }

  #hero .hero-caps {
    margin-bottom: 16px !important;
  }

  #hero .hero-actions .btn-outline-rig {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 18px) !important;
    width: min(340px, 76vw) !important;
    min-height: 50px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   REV 0.1.16 — MOBILE HERO SEPARATED STACK + TRUE BOTTOM QUOTE CTA
   Purpose: preserve the approved high logo position, separate the tagline
   and hero controls from the logo artwork, and anchor the secondary quote
   CTA to the bottom of the hero instead of the hero-content box.
   Desktop/tablet behavior remains untouched.
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width: 576px) {
  /* Keep the raised logo progress, but stop using a negative bottom margin
     that lets the tagline climb over the logo artwork. */
  #hero .hero-logo {
    margin-top: clamp(-60px, -7.8svh, -40px) !important;
    margin-bottom: clamp(14px, 2.8svh, 28px) !important;
  }

  /* The outline CTA is nested inside .hero-content. Because .hero-content
     was position:relative, the absolute button was anchoring to that content
     box, not to the real hero bottom. Make the mobile positioning context
     become #hero, which is already position:relative. */
  #hero .hero-content {
    position: static !important;
    padding-top: clamp(24px, 4svh, 42px) !important;
    padding-bottom: calc(clamp(190px, 24svh, 250px) + env(safe-area-inset-bottom, 0px)) !important;
  }

  #hero .hero-sub {
    margin-top: 0 !important;
    margin-bottom: clamp(18px, 2.8svh, 26px) !important;
    position: relative;
    z-index: 3;
  }

  #hero .hero-caps {
    margin-bottom: clamp(22px, 3.4svh, 32px) !important;
    position: relative;
    z-index: 3;
  }

  #hero .hero-actions {
    position: static !important;
    z-index: 4;
  }

  #hero .hero-actions .btn-primary-rig {
    position: relative;
    z-index: 4;
  }

  #hero .hero-actions .btn-outline-rig {
    position: absolute !important;
    left: 50% !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(34px, 6.2svh, 58px)) !important;
    width: min(390px, 78vw) !important;
    min-height: 54px;
    padding: 13px 22px !important;
    margin: 0 !important;
    justify-content: center !important;
    text-align: center !important;
    transform: translateX(-50%) !important;
    z-index: 5;
    background: rgba(10, 13, 22, 0.42);
  }

  #hero .hero-actions .btn-outline-rig:hover,
  #hero .hero-actions .btn-outline-rig:focus-visible {
    transform: translate(-50%, -2px) !important;
  }
}

@media(max-width: 400px), (max-height: 720px) and (max-width: 576px) {
  #hero .hero-logo {
    margin-top: clamp(-54px, -7svh, -36px) !important;
    margin-bottom: clamp(10px, 2.4svh, 20px) !important;
  }

  #hero .hero-content {
    position: static !important;
    padding-top: clamp(18px, 3svh, 32px) !important;
    padding-bottom: calc(170px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #hero .hero-sub {
    margin-bottom: 18px !important;
  }

  #hero .hero-caps {
    margin-bottom: 22px !important;
  }

  #hero .hero-actions .btn-outline-rig {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 28px) !important;
    width: min(360px, 78vw) !important;
    min-height: 52px;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   REV 0.1.17 — MOBILE HERO BOTTOM ACTION STACK
   Purpose: on phone displays, detach the orange Explore CTA from the
   upper identity/capability stack and place it directly above the
   Request Quote CTA, creating the bottom two-button layout shown in the
   requested mobile reference. Desktop/tablet behavior remains unchanged.
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width: 576px) {
  #hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
  }

  /* Reserve enough lower space so the absolute bottom CTA group never
     overlaps the capability strip on short mobile browser viewports. */
  #hero .hero-content {
    position: static !important;
    padding-bottom: calc(clamp(215px, 31svh, 295px) + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Make the two hero CTAs a single anchored bottom stack. This replaces
     the previous behavior where only Request Quote was pinned and the
     orange Explore CTA stayed in the normal content flow. */
  #hero .hero-actions {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(30px, 5.4svh, 50px)) !important;
    width: min(390px, calc(100vw - 44px)) !important;
    max-width: min(390px, calc(100vw - 44px)) !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    transform: translateX(-50%) !important;
    z-index: 6 !important;
    animation: fadeIn 0.8s 1.1s forwards !important;
  }

  #hero .hero-actions .btn-primary-rig,
  #hero .hero-actions .btn-outline-rig {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    min-height: 54px;
    margin: 0 !important;
    padding: 13px 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    transform: none !important;
  }

  #hero .hero-actions .btn-outline-rig {
    background: rgba(10, 13, 22, 0.42);
  }

  #hero .hero-actions .btn-primary-rig:hover,
  #hero .hero-actions .btn-primary-rig:focus-visible,
  #hero .hero-actions .btn-outline-rig:hover,
  #hero .hero-actions .btn-outline-rig:focus-visible {
    transform: translateY(-2px) !important;
  }
}

@media(max-width: 400px), (max-height: 720px) and (max-width: 576px) {
  #hero .hero-content {
    padding-bottom: calc(180px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #hero .hero-actions {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 24px) !important;
    width: min(360px, calc(100vw - 42px)) !important;
    max-width: min(360px, calc(100vw - 42px)) !important;
    gap: 10px !important;
  }

  #hero .hero-actions .btn-primary-rig,
  #hero .hero-actions .btn-outline-rig {
    min-height: 50px;
    padding: 12px 18px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   REV 0.1.18 — HERO SUBTITLE CONTRAST UPGRADE
   Purpose: improve the readability of "Rigging And Construction
   Services · Since 2011" on top of mixed bright/dark industrial image
   zones without adding pulse/hover effects or changing layout spacing.
   ═══════════════════════════════════════════════════════════════════ */
#hero .hero-sub {
  color: var(--orange) !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16),
    0 2px 0 rgba(0, 0, 0, 0.74),
    0 7px 16px rgba(0, 0, 0, 0.74),
    0 0 12px rgba(246, 91, 18, 0.28);
  -webkit-text-stroke: 0.35px rgba(255, 255, 255, 0.38);
  paint-order: stroke fill;
  text-rendering: geometricPrecision;
}

@media(max-width: 576px) {
  #hero .hero-sub {
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.18),
      0 2px 0 rgba(0, 0, 0, 0.82),
      0 7px 17px rgba(0, 0, 0, 0.8),
      0 0 14px rgba(246, 91, 18, 0.32);
    -webkit-text-stroke: 0.45px rgba(255, 255, 255, 0.46);
  }
}



/* ═══════════════════════════════════════════════════════════════════
   REV 0.1.19 — HERO CAPABILITY BUTTON TEXT CENTERING
   Purpose: center the Steel manufacturing capability label inside its
   button on desktop and mobile without moving the hero block, changing
   the button action, or touching the shimmer scan line. Placed at the
   end of the stylesheet so it wins over earlier hero/mobile revisions.
   ═══════════════════════════════════════════════════════════════════ */
#hero .hero-caps {
  align-items: stretch;
}

#hero .hero-cap {
  justify-content: center !important;
  text-align: center !important;
}

#hero .hero-cap-label {
  display: block;
  width: 100%;
  min-width: 0;
  text-align: center !important;
}

@media (max-width: 768px) {
  #hero .hero-cap {
    justify-content: center !important;
    text-align: center !important;
  }

  #hero .hero-cap-label {
    text-align: center !important;
    white-space: normal;
    line-height: 1.25;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   REV 0.1.20 — MOBILE LOGO SIZE + TOP COMPENSATION
   Purpose:
   Make the hero logo larger on mobile while moving the identity block
   upward to consume the existing top gap instead of pushing the whole
   hero layout downward.

   Logic:
   1. Increase only the mobile logo image height.
   2. Reduce the top padding of the hero content.
   3. Use a stronger negative margin on .hero-logo to compensate for:
      - the larger rendered logo size
      - the transparent vertical space inside the PNG
      - the visual gap below the mobile hamburger area
   4. Preserve the existing horizontal optical correction.
   5. Use a smaller version on very narrow or short screens.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 576px) {
  #hero {
    min-height: 100vh;
    min-height: 100svh;
    align-items: flex-start;
  }

  #hero .hero-content {
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(14px, 2.8svh, 30px)) !important;
    padding-bottom: calc(clamp(215px, 31svh, 295px) + env(safe-area-inset-bottom, 0px)) !important;
  }

  #hero .hero-logo {
    margin-top: clamp(-92px, -10.5svh, -68px) !important;
    margin-bottom: clamp(8px, 2svh, 18px) !important;
  }

  #hero .hero-logo img {
    height: clamp(150px, 43vw, 210px) !important;
    width: auto;
    max-width: 100%;
    transform: translateX(clamp(24px, 7.2vw, 34px)) !important;
  }

  #hero .hero-logo.is-fallback,
  #hero .hero-logo.is-fallback img {
    transform: translateX(0) !important;
  }
}

/* Tighter phones / shorter browser viewports */
@media (max-width: 400px), (max-height: 720px) and (max-width: 576px) {
  #hero .hero-content {
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(10px, 2.2svh, 24px)) !important;
  }

  #hero .hero-logo {
    margin-top: clamp(-84px, -9.4svh, -60px) !important;
    margin-bottom: clamp(6px, 1.6svh, 14px) !important;
  }

  #hero .hero-logo img {
    height: clamp(138px, 40vw, 185px) !important;
    transform: translateX(clamp(20px, 6vw, 28px)) !important;
  }
}

/* DESKTOP NAV CLICK FIX */
@media (min-width: 993px) {
  #nav-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.nav-open {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: auto !important;
  }

  .site-nav {
    z-index: 5000 !important;
    pointer-events: auto !important;
  }

  .site-nav .nav-links {
    display: flex !important;
    position: relative !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 5001 !important;
  }

  .site-nav .nav-links a {
    pointer-events: auto !important;
  }
}
/* ═══════════════════════════════════════════════════════════════════
   REV 0.2.5 — LIGHTBOX ZOOM + ALWAYS-VISIBLE CONTROLS
   Applies to the catalog image preview opened from fab-catalog.js.
   - Double-click/double-tap zoom uses JS in assets/js/lightbox.js.
   - The image receives pointer events so clicks no longer fall through
     to the stage and accidentally close the viewer.
   - Navigation and close controls keep strong contrast without hover.
   ═══════════════════════════════════════════════════════════════════ */
.rigcs-lightbox .lb-close {
  background: #d95a2b;
  border-color: #d95a2b;
  color: #fff;
  opacity: 1;
  box-shadow: 0 12px 28px rgba(0,0,0,0.42);
}
.rigcs-lightbox .lb-close:hover,
.rigcs-lightbox .lb-close:focus-visible {
  background: #f06a2f;
  border-color: #f06a2f;
  color: #fff;
  transform: translateY(-1px);
}
.rigcs-lightbox .lb-nav {
  background: rgba(240,90,26,0.88);
  border-color: rgba(255,255,255,0.40);
  color: #fff;
  opacity: 1;
  z-index: 5;
  box-shadow: 0 14px 34px rgba(0,0,0,0.48), 0 0 0 1px rgba(0,0,0,0.22);
}
.rigcs-lightbox .lb-nav:hover,
.rigcs-lightbox .lb-nav:focus-visible {
  background: #f06a2f;
  border-color: #fff;
  color: #fff;
}
.rigcs-lightbox .lb-image {
  pointer-events: auto;
  transform-origin: center center;
  will-change: transform, opacity;
  transition: opacity 0.25s ease, transform 0.18s ease;
  cursor: zoom-in;
}
.rigcs-lightbox.is-zoomed .lb-stage,
.rigcs-lightbox.is-zoomed .lb-image { cursor: grab; }
.rigcs-lightbox.is-panning .lb-stage,
.rigcs-lightbox.is-panning .lb-image { cursor: grabbing; }
.rigcs-lightbox.is-panning .lb-image { transition: opacity 0.25s ease; }
@media (max-width: 768px) {
  .rigcs-lightbox .lb-close { width: 42px; height: 42px; }
  .rigcs-lightbox .lb-nav {
    width: 44px;
    height: 44px;
    background: rgba(240,90,26,0.92);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   REV 0.2.8 — PRODUCTION LIGHTBOX/NAV ISOLATION
   Scope is intentionally narrow: hide/disable only the global navbar
   while the existing image lightbox owns the screen. No .lb-* control,
   image, transform, transition, hover, zoom, or pointer behavior is
   overwritten here, so the lightbox's native arrows, close button,
   hover states, keyboard handling, and double-click zoom stay intact.
   ═══════════════════════════════════════════════════════════════════ */
.rigcs-lightbox {
  z-index: 10000 !important;
}

body.rigcs-lightbox-locked .site-nav,
body.rigcs-image-preview-open .site-nav,
html.rigcs-image-preview-open .site-nav {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.rigcs-lightbox-locked #nav-overlay,
body.rigcs-image-preview-open #nav-overlay,
html.rigcs-image-preview-open #nav-overlay {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}