:root{
      --orange:#ff5e12;
      --orange-hover:#ff6e28;
      --black:#101010;
      --black-2:#171717;
      --paper:#f3f2ee;
      --paper-2:#e9e8e3;
      --white:#fff;
      --text:#181818;
      --muted:#686863;
      --line:rgba(16,16,16,.13);
      --line-dark:rgba(255,255,255,.16);
      --container: min(1380px, calc(100% - 72px));
      --radius:24px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:var(--paper);
      color:var(--text);
      font-family:"Manrope",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      -webkit-font-smoothing:antialiased;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%}
    button{font:inherit}
    .container{width:var(--container);margin-inline:auto}

    /* ---------- HEADER ---------- */
    .site-header{
      position:absolute;
      inset:0 0 auto;
      z-index:50;
      color:#fff;
      transition:background .25s ease, backdrop-filter .25s ease, box-shadow .25s ease;
    }
    .site-header.is-scrolled{
      position:fixed;
      background:rgba(12,12,12,.82);
      -webkit-backdrop-filter:blur(14px);
      backdrop-filter:blur(14px);
      box-shadow:0 1px 0 rgba(255,255,255,.08);
    }
    .nav{
      min-height:104px;
      display:grid;
      grid-template-columns:245px 1fr 215px;
      align-items:center;
      gap:28px;
    }
    .brand{
      display:flex;
      align-items:center;
      justify-self:start;
    }
    .brand img{
      width:225px;
      height:auto;
      max-height:72px;
      object-fit:contain;
      object-position:left center;
      filter:drop-shadow(0 2px 16px rgba(0,0,0,.38));
    }
    .nav-links{
      display:flex;
      justify-content:center;
      align-items:center;
      gap:34px;
      font-size:13px;
      font-weight:700;
    }
    .nav-links a{
      position:relative;
      padding:34px 0;
      text-shadow:0 2px 12px rgba(0,0,0,.35);
    }
    .nav-links a::after{
      content:"";
      position:absolute;
      left:0;right:100%;bottom:25px;
      height:2px;
      background:var(--orange);
      transition:right .2s ease;
    }
    .nav-links a:hover::after{right:0}
    .nav-cta{
      justify-self:end;
      display:inline-flex;
      align-items:center;
      gap:10px;
      min-height:46px;
      padding:0 19px;
      background:var(--orange);
      color:#fff;
      border-radius:999px;
      font-size:12px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.05em;
      transition:background .2s ease, transform .2s ease;
      box-shadow:0 10px 28px rgba(0,0,0,.16);
    }
    .nav-cta:hover{background:var(--orange-hover);transform:translateY(-1px)}
    .nav-cta .arrow{font-size:16px}
    .menu-btn{
      display:none;
      justify-self:end;
      width:44px;height:44px;
      padding:0;border:0;background:none;color:#fff;cursor:pointer;
    }
    .menu-btn span,.menu-btn span::before,.menu-btn span::after{
      content:"";
      display:block;
      width:25px;height:2px;
      background:currentColor;
      position:relative;
      transition:.2s ease;
    }
    .menu-btn span::before{position:absolute;top:-7px}
    .menu-btn span::after{position:absolute;top:7px}
    .mobile-menu-cta{display:none!important}

    /* Mobile menu icon animation */
    .site-header.menu-open .menu-btn span{background:transparent}
    .site-header.menu-open .menu-btn span::before{
      top:0;
      transform:rotate(45deg);
    }
    .site-header.menu-open .menu-btn span::after{
      top:0;
      transform:rotate(-45deg);
    }

    /* ---------- HERO ---------- */
    .hero{
      position:relative;
      min-height:100svh;
      height:100vh;
      min-height:720px;
      overflow:hidden;
      background:#111;
      color:#fff;
      isolation:isolate;
    }
    .hero-video{
      position:absolute;
      inset:0;
      z-index:-3;
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center;
      background:#111;
    }
    .hero-overlay{
      position:absolute;
      inset:0;
      z-index:-2;
      background:
        linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.64) 37%,rgba(0,0,0,.28) 68%,rgba(0,0,0,.22) 100%),
        linear-gradient(0deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.08) 50%,rgba(0,0,0,.26) 100%);
    }
    .hero-noise{
      position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.12;
      background-image:radial-gradient(rgba(255,255,255,.85) .55px,transparent .55px);
      background-size:4px 4px;
      mix-blend-mode:soft-light;
    }
    .hero-inner{
      height:100%;
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
      padding:150px 0 66px;
    }
    .hero-content{
      width:min(930px,78%);
    }
    .eyebrow{
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:22px;
      font-size:11px;
      line-height:1.2;
      font-weight:800;
      letter-spacing:.18em;
      text-transform:uppercase;
    }
    .eyebrow::before{
      content:"";
      width:34px;height:2px;
      flex:0 0 auto;
      background:var(--orange);
    }
    .hero h1{
      margin:0;
      max-width:980px;
      font-family:"Space Grotesk",sans-serif;
      font-size:clamp(58px,7.05vw,106px);
      line-height:.91;
      letter-spacing:-.062em;
      text-transform:uppercase;
      text-wrap:balance;
    }
    .hero h1 .orange{color:var(--orange)}
    .hero-lead{
      max-width:680px;
      margin:26px 0 0;
      font-size:clamp(16px,1.4vw,20px);
      line-height:1.65;
      color:rgba(255,255,255,.82);
    }
    .hero-actions{
      display:flex;
      align-items:center;
      gap:12px;
      margin-top:30px;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:50px;
      padding:0 20px;
      border-radius:999px;
      font-size:11px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
      transition:.2s ease;
    }
    .btn-orange{background:var(--orange);color:#fff}
    .btn-orange:hover{background:var(--orange-hover);transform:translateY(-1px)}
    .hero-bottom{
      display:flex;
      justify-content:space-between;
      align-items:end;
      gap:30px;
      margin-top:46px;
      padding-top:18px;
      border-top:1px solid rgba(255,255,255,.22);
      color:rgba(255,255,255,.64);
      font-size:10px;
      text-transform:uppercase;
      letter-spacing:.16em;
      font-weight:700;
    }

    /* ---------- GENERIC ---------- */
    section{position:relative}
    .section-label{
      display:flex;align-items:center;gap:11px;
      font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
    }
    .section-label::before{content:"";width:30px;height:2px;background:var(--orange)}
    .section-title{
      margin:18px 0 0;
      font-family:"Space Grotesk",sans-serif;
      font-size:clamp(42px,5.5vw,78px);
      line-height:.94;
      letter-spacing:-.055em;
      text-transform:uppercase;
    }
    .section-title .orange{color:var(--orange)}
    .copy{color:var(--muted);line-height:1.8;font-size:15px}
    .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
    .reveal.visible{opacity:1;transform:none}

    /* ---------- ABOUT ---------- */
    .about{padding:116px 0}
    .about-grid{
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(360px,.78fr);
      gap:86px;
      align-items:center;
    }
    .about-copy p{max-width:700px;margin:28px 0 0}
    .about-markets{
      max-width:700px;
      margin-top:30px;
      padding-top:20px;
      border-top:1px solid var(--line);
    }
    .about-markets span{
      display:block;
      margin-bottom:9px;
      font-size:10px;
      font-weight:800;
      letter-spacing:.16em;
      text-transform:uppercase;
      color:var(--orange);
    }
    .about-markets p{
      margin:0;
      max-width:none;
      color:var(--muted);
      font-size:13px;
      line-height:1.7;
    }
    .about-card{
      position:relative;
      border-radius:var(--radius);
      overflow:hidden;
      min-height:570px;
      background:#222;
    }
    .about-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
    .about-card::after{
      content:"";position:absolute;inset:0;
      background:linear-gradient(0deg,rgba(0,0,0,.38),transparent 58%);
    }
    .about-badge{
      position:absolute;left:24px;bottom:24px;z-index:2;
      max-width:255px;
      padding:18px 19px;
      background:rgba(17,17,17,.84);
      backdrop-filter:blur(9px);
      color:#fff;
      border-radius:16px;
      font-size:12px;line-height:1.65;
      border:1px solid rgba(255,255,255,.12);
    }
    .about-badge strong{display:block;margin-bottom:5px;font-size:14px}

    /* ---------- SECTORS ---------- */
    /* The sectors section has no top padding; compensate only for anchor jumps
       so its heading stays clear of the fixed header without changing the layout. */
    #sectors{scroll-margin-top:116px}
    .sectors{padding:0 0 116px}
    .sectors-head{
      display:grid;
      grid-template-columns:1fr .62fr;
      gap:60px;
      align-items:end;
      margin-bottom:34px;
    }
    .sectors-head .copy{margin:0 0 7px}
    .sector-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
    .sector-card{
      position:relative;
      min-height:590px;
      border-radius:var(--radius);
      overflow:hidden;
      color:#fff;
      isolation:isolate;
      display:flex;
      align-items:flex-end;
      padding:34px;
      background:#222;
    }
    .sector-card img{
      position:absolute;inset:0;z-index:-2;
      width:100%;height:100%;object-fit:cover;
      transition:transform .55s ease;
    }
    .sector-card::before{
      content:"";position:absolute;inset:0;z-index:-1;
      background:linear-gradient(0deg,rgba(0,0,0,.80),rgba(0,0,0,.06) 68%);
    }
    .sector-card:hover img{transform:scale(1.035)}
    .sector-no{
      position:absolute;top:27px;right:29px;
      font-size:10px;font-weight:800;letter-spacing:.18em;
      color:rgba(255,255,255,.68);
    }
    .sector-card h3{
      margin:0 0 10px;
      font:600 clamp(34px,4vw,58px)/.98 "Space Grotesk",sans-serif;
      letter-spacing:-.045em;
      text-transform:uppercase;
    }
    .sector-card p{margin:0;max-width:570px;line-height:1.7;color:rgba(255,255,255,.74);font-size:14px}

    /* ---------- SERVICES ---------- */
    .services{padding:116px 0;background:var(--black);color:#fff}
    .services-head{
      display:grid;grid-template-columns:1fr .62fr;gap:60px;align-items:end;
      margin-bottom:38px;
    }
    .services .copy{color:rgba(255,255,255,.58);margin:0}
    .services-list{border-top:1px solid var(--line-dark)}
    .service{
      display:grid;
      grid-template-columns:74px .9fr 1.1fr;
      gap:38px;
      padding:34px 0;
      border-bottom:1px solid var(--line-dark);
      align-items:start;
    }
    .service-no{color:var(--orange);font-size:11px;font-weight:800;letter-spacing:.16em;padding-top:6px}
    .service h3{
      margin:0;
      font:600 clamp(24px,2.5vw,36px)/1.08 "Space Grotesk",sans-serif;
      letter-spacing:-.035em;text-transform:uppercase;
    }
    .service p{margin:0;color:rgba(255,255,255,.58);font-size:14px;line-height:1.75;max-width:560px}

    /* ---------- DIFFERENCE ---------- */
    .difference{padding:116px 0}
    .difference-grid{
      display:grid;
      grid-template-columns:.72fr 1.28fr;
      gap:90px;
      align-items:start;
    }
    .difference-intro{position:sticky;top:130px}
    .difference-intro .copy{margin:26px 0 0;max-width:480px}
    .points{border-top:1px solid var(--line)}
    .point{
      display:grid;grid-template-columns:62px 1fr;gap:18px;
      padding:30px 0;border-bottom:1px solid var(--line);
    }
    .point-no{color:var(--orange);font-size:10px;font-weight:800;letter-spacing:.16em;padding-top:6px}
    .point h3{
      margin:0 0 7px;
      font:600 23px/1.18 "Space Grotesk",sans-serif;
      text-transform:uppercase;letter-spacing:-.025em;
    }
    .point p{margin:0;color:var(--muted);font-size:14px;line-height:1.75;max-width:650px}

    /* ---------- GALLERY ---------- */
    .gallery{padding:0 0 116px}
    .gallery-head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:32px}
    .gallery-head .copy{max-width:430px;margin:0}
    .gallery-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr .8fr;
      gap:16px;
      min-height:500px;
    }
    .gallery-item{border-radius:20px;overflow:hidden;background:#ddd;min-height:360px}
    .gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
    .gallery-item:hover img{transform:scale(1.025)}

    /* ---------- CTA ---------- */
    .cta{padding:0 0 116px}
    .cta-panel{
      position:relative;overflow:hidden;
      min-height:530px;
      border-radius:var(--radius);
      background:var(--orange);
      color:#fff;
      padding:48px;
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
    }
    .cta-panel::before{
      content:"PROPIPING";
      position:absolute;top:28px;right:-22px;
      font:700 clamp(100px,17vw,250px)/.8 "Space Grotesk",sans-serif;
      letter-spacing:-.08em;
      color:rgba(0,0,0,.09);
      pointer-events:none;
    }
    .cta-panel h2{
      position:relative;
      z-index:1;
      margin:0;
      max-width:980px;
      font:600 clamp(46px,6.5vw,92px)/.93 "Space Grotesk",sans-serif;
      letter-spacing:-.06em;
      text-transform:uppercase;
    }
    .cta-panel p{
      position:relative;z-index:1;
      max-width:620px;margin:22px 0 0;
      color:rgba(255,255,255,.83);line-height:1.7;
    }

    /* ---------- CONTACT ---------- */
    .contact{padding:104px 0 54px;background:var(--paper-2)}
    .contact-grid{
      display:grid;grid-template-columns:1.25fr .75fr;gap:84px;align-items:end;
    }
    .contact h2{
      margin:17px 0 0;
      max-width:900px;
      font:600 clamp(45px,6.2vw,90px)/.92 "Space Grotesk",sans-serif;
      letter-spacing:-.06em;text-transform:uppercase;
    }
    .contact h2 .orange{color:var(--orange)}
    .contact-card{
      padding:26px;border:1px solid var(--line);
      border-radius:20px;background:rgba(255,255,255,.55);
    }
    .contact-card p{margin:0 0 20px;color:var(--muted);font-size:14px;line-height:1.75}
    .contact-card .btn{
      width:100%;background:var(--black);color:#fff;min-height:52px
    }
    .contact-card .btn:hover{background:var(--orange)}

    footer{
      padding:26px 0 30px;background:var(--paper-2);
      border-top:1px solid var(--line);
      color:#6d6d67;font-size:11px;
    }
    .footer-row{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
    .footer-brand{display:flex;align-items:center;gap:12px;color:#1a1a1a;font-weight:700}
    .footer-brand img{width:118px;height:auto}

    /* ---------- RESPONSIVE ---------- */
    @media(max-width:1080px){
      :root{--container:min(100% - 40px,1380px)}
      .nav{grid-template-columns:220px 1fr 190px;gap:18px}
      .nav-links{gap:22px;font-size:12px}
      .brand img{width:205px;max-height:66px}
      .hero-content{width:86%}
      .about-grid{gap:55px}
      .service{grid-template-columns:54px .8fr 1.2fr;gap:24px}
    }

    @media(max-width:860px){
      #sectors{scroll-margin-top:92px}
      :root{--container:min(100% - 28px,1380px)}
      .nav{
        min-height:74px;
        grid-template-columns:1fr auto;
        gap:12px;
      }
      .brand img{
        width:170px;
        height:auto;
        max-height:none;
        object-fit:contain;
        object-position:left center;
      }
      .nav-links,.nav-cta{display:none}
      .menu-btn{
        display:grid;
        place-items:center;
        width:44px;
        height:44px;
        position:relative;
        z-index:4;
      }

      .site-header.menu-open{
        position:fixed;
        inset:0 0 auto;
        background:rgba(12,12,12,.97);
        -webkit-backdrop-filter:blur(18px);
        backdrop-filter:blur(18px);
      }
      .site-header.menu-open .nav-links{
        display:flex;
        position:fixed;
        top:74px;
        left:0;
        right:0;
        bottom:0;
        min-height:calc(100svh - 74px);
        padding:22px 28px max(28px, env(safe-area-inset-bottom));
        flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start;
        gap:0;
        overflow-y:auto;
        background:rgba(12,12,12,.97);
        border-top:1px solid rgba(255,255,255,.08);
      }
      .site-header.menu-open .nav-links > a:not(.mobile-menu-cta){
        width:100%;
        padding:18px 0;
        font:600 25px/1.15 "Space Grotesk",sans-serif;
        letter-spacing:-.025em;
        border-bottom:1px solid rgba(255,255,255,.10);
        text-shadow:none;
      }
      .site-header.menu-open .nav-links a::after{display:none}
      .site-header.menu-open .mobile-menu-cta{
        display:flex!important;
        width:100%;
        min-height:52px;
        margin-top:auto;
        padding:0 20px;
        align-items:center;
        justify-content:center;
        gap:10px;
        border:0;
        border-radius:999px;
        background:var(--orange);
        color:#fff;
        font-size:12px;
        font-weight:800;
        letter-spacing:.06em;
        text-transform:uppercase;
      }
      .hero{min-height:680px;height:100svh}
      .hero-inner{padding:120px 0 38px}
      .hero-content{width:100%}
      .hero h1{font-size:clamp(50px,11vw,82px)}
      .hero-bottom{margin-top:35px}
      .about-grid,.sectors-head,.services-head,.difference-grid,.contact-grid{grid-template-columns:1fr}
      .about-grid{gap:45px}
      .about-card{min-height:500px}
      .sectors-head,.services-head{gap:24px}
      .sector-grid{grid-template-columns:1fr}
      .service{grid-template-columns:48px 1fr}
      .service p{grid-column:2}
      .difference-intro{position:static}
      .gallery-grid{grid-template-columns:1fr 1fr}
      .gallery-item:first-child{grid-column:1/-1;min-height:480px}
    }

    @media(max-width:600px){
      #sectors{scroll-margin-top:82px}
      :root{--container:min(100% - 22px,1380px);--radius:18px}
      .nav{min-height:64px}
      .menu-btn{width:40px;height:40px}
      .site-header.menu-open .nav-links{
        top:64px;
        min-height:calc(100svh - 64px);
        padding:18px 18px max(22px, env(safe-area-inset-bottom));
      }
      .site-header.menu-open .nav-links > a:not(.mobile-menu-cta){
        padding:16px 0;
        font-size:23px;
      }
      .hero{min-height:690px}
      .hero-inner{padding:112px 0 28px}
      .hero h1{font-size:clamp(46px,15vw,66px);line-height:.92}
      .eyebrow{font-size:9px;letter-spacing:.14em}
      .hero-lead{font-size:15px;line-height:1.58}
      .hero-actions{flex-direction:column;align-items:stretch}
      .hero-actions .btn{width:100%}
      .hero-bottom{font-size:8px}
      .hero-bottom > div:first-child{max-width:65%}
      .about,.services,.difference{padding:82px 0}
      .sectors,.gallery,.cta{padding-bottom:82px}
      .section-title{font-size:clamp(39px,12vw,58px)}
      .about-card{min-height:420px}
      .sector-card{min-height:440px;padding:24px}
      .service{grid-template-columns:38px 1fr;padding:25px 0}
      .gallery-grid{grid-template-columns:1fr}
      .gallery-item:first-child{grid-column:auto;min-height:360px}
      .gallery-item{min-height:330px}
      .gallery-head{align-items:flex-start;flex-direction:column}
      .cta-panel{min-height:480px;padding:28px}
      .contact{padding-top:80px}
    }

    @media(max-width:370px){
      .brand img{width:155px}
    }

    @media(prefers-reduced-motion:reduce){
      *{scroll-behavior:auto!important;transition:none!important}
      .hero-video{display:none}
      .hero{
        background:
          linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.28)),
          url("../images/hero/propiping-hero-poster.webp") center/cover no-repeat;
      }
      .reveal{opacity:1;transform:none}
    }
  
    /* ==============================================================
       PROPIPING — MOBILE MENU ENHANCEMENT
       Scope: only <= 860px. No hero/layout/logo changes.
       ============================================================== */
    .mobile-menu-meta{
      display:none;
    }

    @media(max-width:860px){

      /* Keep the panel mounted so clip-path can actually animate. */
      .site-header .nav-links{
        display:flex;
        position:fixed;
        top:74px;
        left:0;
        right:0;
        bottom:0;
        min-height:calc(100svh - 74px);
        padding:22px 28px max(28px, env(safe-area-inset-bottom));
        flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start;
        gap:0;
        overflow-y:auto;

        background:rgba(10,10,10,.965);
        -webkit-backdrop-filter:blur(18px);
        backdrop-filter:blur(18px);

        visibility:hidden;
        pointer-events:none;
        clip-path:circle(0% at calc(100% - 32px) -6px);
        -webkit-clip-path:circle(0% at calc(100% - 32px) -6px);

        transition:
          clip-path .58s cubic-bezier(.16,1,.3,1),
          -webkit-clip-path .58s cubic-bezier(.16,1,.3,1),
          visibility 0s linear .58s;
        isolation:isolate;
      }

      .site-header.menu-open .nav-links{
        visibility:visible;
        pointer-events:auto;
        clip-path:circle(155% at calc(100% - 32px) -6px);
        -webkit-clip-path:circle(155% at calc(100% - 32px) -6px);
        transition:
          clip-path .62s cubic-bezier(.16,1,.3,1),
          -webkit-clip-path .62s cubic-bezier(.16,1,.3,1),
          visibility 0s linear 0s;
      }

      /* Header bar itself fades into the same dark surface. */
      .site-header{
        transition:
          background .32s ease,
          backdrop-filter .32s ease,
          -webkit-backdrop-filter .32s ease;
      }

      .site-header.menu-open{
        background:rgba(10,10,10,.965);
        -webkit-backdrop-filter:blur(18px);
        backdrop-filter:blur(18px);
      }

      /* Hamburger -> X, with a slightly more deliberate motion. */
      .menu-btn{
        transition:transform .45s cubic-bezier(.16,1,.3,1);
        transform-origin:center;
      }

      .menu-btn span,
      .menu-btn span::before,
      .menu-btn span::after{
        transition:
          transform .42s cubic-bezier(.16,1,.3,1),
          top .34s cubic-bezier(.16,1,.3,1),
          opacity .22s ease,
          background .22s ease;
      }

      .site-header.menu-open .menu-btn{
        transform:rotate(90deg);
      }



      /* Navigation rows. */
      .site-header .nav-links > a:not(.mobile-menu-cta){
        position:relative;
        display:grid;
        grid-template-columns:44px minmax(0,1fr) auto;
        align-items:center;
        gap:6px;
        width:100%;
        margin:0;
        padding:18px 0 19px;
        border-bottom:1px solid rgba(255,255,255,.11);

        font-family:"Space Grotesk",sans-serif;
        font-size:clamp(25px,7.2vw,33px);
        line-height:1.03;
        font-weight:600;
        letter-spacing:-.035em;
        text-transform:uppercase;
        color:#fff;
        text-shadow:none;

        opacity:0;
        transform:translateY(20px);
        transition:
          opacity .44s cubic-bezier(.16,1,.3,1),
          transform .44s cubic-bezier(.16,1,.3,1),
          padding-left .2s ease,
          color .2s ease;
      }

      .site-header .nav-links > a:not(.mobile-menu-cta)::before{
        display:block;
        width:auto;
        height:auto;
        background:none;
        font-family:"Manrope",sans-serif;
        font-size:10px;
        line-height:1;
        font-weight:800;
        letter-spacing:.14em;
        color:var(--orange);
      }

      .site-header .nav-links > a:not(.mobile-menu-cta)::after{
        content:"↗";
        position:static;
        display:block;
        width:auto;
        height:auto;
        background:none;
        font-family:"Manrope",sans-serif;
        font-size:16px;
        line-height:1;
        color:rgba(255,255,255,.58);
        opacity:1;
        transform:none;
        transition:transform .2s ease,color .2s ease;
      }

      .site-header .nav-links > a:nth-of-type(1)::before{content:"01"}
      .site-header .nav-links > a:nth-of-type(2)::before{content:"02"}
      .site-header .nav-links > a:nth-of-type(3)::before{content:"03"}
      .site-header .nav-links > a:nth-of-type(4)::before{content:"04"}
      .site-header .nav-links > a:nth-of-type(5)::before{content:"05"}

      /* Stagger only when the menu is open. */
      .site-header.menu-open .nav-links > a:not(.mobile-menu-cta){
        opacity:1;
        transform:translateY(0);
      }
      .site-header.menu-open .nav-links > a:nth-of-type(1){transition-delay:.13s}
      .site-header.menu-open .nav-links > a:nth-of-type(2){transition-delay:.18s}
      .site-header.menu-open .nav-links > a:nth-of-type(3){transition-delay:.23s}
      .site-header.menu-open .nav-links > a:nth-of-type(4){transition-delay:.28s}
      .site-header.menu-open .nav-links > a:nth-of-type(5){transition-delay:.33s}

      .site-header.menu-open .nav-links > a:not(.mobile-menu-cta):active{
        padding-left:7px;
      }

      .site-header.menu-open .nav-links > a:not(.mobile-menu-cta):active::after{
        color:var(--orange);
        transform:translate(3px,-3px);
      }

      /* Existing orange CTA, now enters after the navigation rows. */
      .site-header .mobile-menu-cta{
        opacity:0;
        transform:translateY(14px);
      }

      .site-header.menu-open .mobile-menu-cta{
        display:flex!important;
        opacity:0;
        transform:translateY(14px);
        animation:propipingCtaIn .5s .40s cubic-bezier(.16,1,.3,1) forwards;
        box-shadow:0 14px 34px rgba(0,0,0,.22);
      }

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

      /* Small footer below the CTA. */
      .site-header.menu-open .mobile-menu-meta{
        display:flex;
        justify-content:space-between;
        align-items:flex-end;
        gap:18px;
        width:100%;
        margin-top:14px;
        padding-top:15px;
        border-top:1px solid rgba(255,255,255,.10);

        font-size:6.7px;
        line-height:1.45;
        font-weight:700;
        letter-spacing:.12em;
        text-transform:uppercase;
        color:rgba(255,255,255,.40);

        opacity:0;
        animation:propipingMetaIn .42s .48s ease forwards;
      }

      .site-header.menu-open .mobile-menu-meta > span:first-child{
        max-width:62%;
      }

      .site-header.menu-open .mobile-menu-meta > span:last-child{
        text-align:right;
        white-space:nowrap;
      }

      @keyframes propipingMetaIn{
        to{opacity:1}
      }
    }

    @media(max-width:600px){
      .site-header .nav-links{
        top:64px;
        min-height:calc(100svh - 64px);
        padding:16px 18px max(22px, env(safe-area-inset-bottom));
        clip-path:circle(0% at calc(100% - 28px) -4px);
        -webkit-clip-path:circle(0% at calc(100% - 28px) -4px);
      }

      .site-header.menu-open .nav-links{
        clip-path:circle(160% at calc(100% - 28px) -4px);
        -webkit-clip-path:circle(160% at calc(100% - 28px) -4px);
      }

      .site-header .nav-links > a:not(.mobile-menu-cta){
        grid-template-columns:38px minmax(0,1fr) auto;
        padding:15px 0 16px;
        font-size:clamp(23px,7.6vw,29px);
      }


      .site-header.menu-open .mobile-menu-meta{
        font-size:6.2px;
      }
    }

    @media(prefers-reduced-motion:reduce){
      .site-header .nav-links,
      .site-header.menu-open .nav-links{
        clip-path:none!important;
        -webkit-clip-path:none!important;
        transition:none!important;
      }

      .site-header .nav-links > a:not(.mobile-menu-cta),
      .site-header.menu-open .nav-links > a:not(.mobile-menu-cta),
      .site-header.menu-open .mobile-menu-cta,
      .site-header.menu-open .mobile-menu-meta{
        transition:none!important;
        animation:none!important;
        opacity:1!important;
        transform:none!important;
      }

      .site-header.menu-open .menu-btn{
        transform:none!important;
      }
    }


    /* ==============================================================
       PROPIPING — VISUAL POLISH / MICROINTERACTIONS
       Visual only. No content/layout structure changes.
       ============================================================== */

    :root{
      --motion-fast:.22s;
      --motion-med:.48s;
      --motion-slow:.75s;
      --ease-premium:cubic-bezier(.16,1,.3,1);
    }

    /* ---------- GLOBAL LINK / BUTTON FEEL ---------- */
    a,
    .btn,
    .nav-cta{
      -webkit-tap-highlight-color:transparent;
    }

    .btn,
    .nav-cta{
      position:relative;
      overflow:hidden;
      isolation:isolate;
    }

    .btn::before,
    .nav-cta::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:-1;
      background:rgba(255,255,255,.10);
      transform:translateX(-105%);
      transition:transform .42s var(--ease-premium);
    }

    @media(hover:hover){
      .btn:hover::before,
      .nav-cta:hover::before{
        transform:translateX(0);
      }

      .btn:hover span,
      .nav-cta:hover span{
        transform:translate(3px,-3px);
      }
    }

    .btn span,
    .nav-cta span{
      display:inline-block;
      transition:transform .28s var(--ease-premium);
    }

    .btn:active,
    .nav-cta:active{
      transform:translateY(1px) scale(.992);
    }

    /* ---------- SECTION LABELS ---------- */
    .section-label,
    .eyebrow{
      overflow:hidden;
    }

    .section-label::before,
    .eyebrow::before{
      transform-origin:left center;
      transform:scaleX(.22);
      opacity:.58;
      transition:
        transform .7s .08s var(--ease-premium),
        opacity .45s ease;
    }

    .reveal.visible .section-label::before,
    .reveal.visible.eyebrow::before,
    .reveal.visible .eyebrow::before,
    .hero-content.visible .eyebrow::before{
      transform:scaleX(1);
      opacity:1;
    }

    /* ---------- ORANGE WORD REVEAL ---------- */
    .section-title .orange,
    .hero h1 .orange,
    .contact h2 .orange{
      display:inline-block;
      position:relative;
      /* Give accented capitals/diacritics vertical breathing room during the reveal. */
      clip-path:inset(-.18em 100% -.18em 0);
      -webkit-clip-path:inset(-.18em 100% -.18em 0);
      transition:
        clip-path .85s .10s var(--ease-premium),
        -webkit-clip-path .85s .10s var(--ease-premium);
    }

    .reveal.visible .section-title .orange,
    .hero-content.visible .hero h1 .orange,
    .hero-content.visible h1 .orange,
    .reveal.visible .contact h2 .orange,
    .reveal.visible h2 .orange{
      clip-path:inset(-.18em 0 -.18em 0);
      -webkit-clip-path:inset(-.18em 0 -.18em 0);
    }

    /* ---------- TITLES: SMALL PREMIUM LIFT ---------- */
    .section-title,
    .service h3,
    .point h3,
    .sector-card h3,
    .cta-panel h2{
      transition:
        transform .55s var(--ease-premium),
        letter-spacing .55s var(--ease-premium);
    }

    .reveal.visible .section-title{
      transform:translateY(0);
    }

    /* ---------- SECTOR CARDS ---------- */
    .sector-card{
      --card-shift:0px;
      transition:
        transform .45s var(--ease-premium),
        box-shadow .45s var(--ease-premium);
    }

    .sector-card img{
      transform:scale(1.002);
      transition:
        transform 1.1s var(--ease-premium),
        filter .65s ease;
      will-change:transform;
    }

    .sector-card::after{
      content:"";
      position:absolute;
      left:34px;
      bottom:24px;
      width:0;
      height:2px;
      z-index:3;
      background:var(--orange);
      transition:width .55s var(--ease-premium);
      pointer-events:none;
    }

    .sector-no{
      transition:
        color .3s ease,
        transform .42s var(--ease-premium);
    }

    @media(hover:hover){
      .sector-card:hover{
        transform:translateY(-5px);
        box-shadow:0 24px 60px rgba(0,0,0,.14);
      }

      .sector-card:hover img{
        transform:scale(1.035);
        filter:saturate(1.03) contrast(1.02);
      }

      .sector-card:hover h3{
        transform:translateY(-4px);
      }

      .sector-card:hover .sector-no{
        color:var(--orange);
        transform:translateY(-2px);
      }

      .sector-card:hover::after{
        width:58px;
      }
    }

    .sector-card:active{
      transform:scale(.995);
    }

    /* ---------- ABOUT IMAGE ---------- */
    .about-card{
      transition:
        transform .5s var(--ease-premium),
        box-shadow .5s var(--ease-premium);
    }

    .about-card img{
      transform:scale(1.002);
      transition:transform 1.15s var(--ease-premium), filter .6s ease;
    }

    .about-badge{
      transition:
        transform .45s var(--ease-premium),
        background .35s ease,
        border-color .35s ease;
    }

    @media(hover:hover){
      .about-card:hover{
        transform:translateY(-4px);
        box-shadow:0 24px 60px rgba(0,0,0,.11);
      }

      .about-card:hover img{
        transform:scale(1.025);
      }

      .about-card:hover .about-badge{
        transform:translateY(-4px);
        background:rgba(17,17,17,.90);
        border-color:rgba(255,255,255,.18);
      }
    }

    /* ---------- SERVICES LIST ---------- */
    .service{
      position:relative;
      transition:
        padding-left .38s var(--ease-premium),
        background .3s ease;
    }

    .service::before{
      content:"";
      position:absolute;
      left:0;
      top:0;
      bottom:0;
      width:2px;
      background:var(--orange);
      transform:scaleY(0);
      transform-origin:top;
      transition:transform .44s var(--ease-premium);
    }

    .service-no{
      transition:
        transform .35s var(--ease-premium),
        color .3s ease;
    }

    @media(hover:hover){
      .service:hover{
        padding-left:14px;
        background:rgba(255,255,255,.022);
      }

      .service:hover::before{
        transform:scaleY(1);
      }

      .service:hover .service-no{
        transform:translateX(3px);
      }

      .service:hover h3{
        transform:translateX(3px);
      }
    }

    /* ---------- "WHY PROPIPING" POINTS ---------- */
    .point{
      position:relative;
      transition:
        padding-left .38s var(--ease-premium),
        background .3s ease;
    }

    .point::before{
      content:"";
      position:absolute;
      left:0;
      top:50%;
      width:0;
      height:1px;
      background:var(--orange);
      transition:width .42s var(--ease-premium);
    }

    .point-no{
      transition:
        transform .38s var(--ease-premium),
        color .28s ease;
    }

    @media(hover:hover){
      .point:hover{
        padding-left:15px;
      }

      .point:hover::before{
        width:7px;
      }

      .point:hover .point-no{
        transform:translateX(2px);
      }

      .point:hover h3{
        transform:translateX(3px);
      }
    }

    /* ---------- GALLERY ---------- */
    .gallery-item{
      position:relative;
      transition:
        transform .48s var(--ease-premium),
        box-shadow .48s var(--ease-premium);
    }

    .gallery-item::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.12));
      opacity:0;
      transition:opacity .4s ease;
      pointer-events:none;
    }

    .gallery-item img{
      transform:scale(1.002);
      transition:transform 1.1s var(--ease-premium), filter .55s ease;
    }

    @media(hover:hover){
      .gallery-item:hover{
        transform:translateY(-4px);
        box-shadow:0 20px 48px rgba(0,0,0,.11);
      }

      .gallery-item:hover img{
        transform:scale(1.03);
        filter:saturate(1.03);
      }

      .gallery-item:hover::after{
        opacity:1;
      }
    }

    /* ---------- CTA PANEL ---------- */
    .cta-panel{
      transition:
        transform .48s var(--ease-premium),
        box-shadow .48s var(--ease-premium);
    }

    .cta-panel::after{
      content:"";
      position:absolute;
      left:-20%;
      top:-25%;
      width:45%;
      height:150%;
      background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.08),
        transparent
      );
      transform:skewX(-14deg) translateX(-180%);
      transition:transform 1s var(--ease-premium);
      pointer-events:none;
    }

    @media(hover:hover){
      .cta-panel:hover{
        transform:translateY(-4px);
        box-shadow:0 22px 55px rgba(0,0,0,.10);
      }

      .cta-panel:hover::after{
        transform:skewX(-14deg) translateX(390%);
      }
    }

    /* ---------- CONTACT CARD ---------- */
    .contact-card{
      transition:
        transform .42s var(--ease-premium),
        box-shadow .42s var(--ease-premium),
        border-color .35s ease;
    }

    @media(hover:hover){
      .contact-card:hover{
        transform:translateY(-4px);
        box-shadow:0 18px 44px rgba(0,0,0,.08);
        border-color:rgba(255,94,18,.30);
      }
    }

    /* ---------- SCROLL REVEAL: LESS GENERIC ---------- */
    .reveal{
      transform:translateY(24px);
      filter:blur(2px);
      transition:
        opacity .7s var(--ease-premium),
        transform .7s var(--ease-premium),
        filter .7s var(--ease-premium);
    }

    .reveal.visible{
      transform:none;
      filter:blur(0);
    }

    /* Slight staggering inside grids/lists */
    .sector-grid .reveal:nth-child(2),
    .gallery-grid .reveal:nth-child(2),
    .services-list .reveal:nth-child(2),
    .points .reveal:nth-child(2){
      transition-delay:.06s;
    }

    .gallery-grid .reveal:nth-child(3),
    .services-list .reveal:nth-child(3),
    .points .reveal:nth-child(3){
      transition-delay:.12s;
    }

    .points .reveal:nth-child(4){
      transition-delay:.18s;
    }

    /* ---------- MOBILE: TOUCH FEEDBACK WITHOUT HOVER DEPENDENCY ---------- */
    @media(max-width:860px){
      .sector-card,
      .about-card,
      .gallery-item,
      .contact-card,
      .cta-panel{
        -webkit-tap-highlight-color:transparent;
      }

      .sector-card:active,
      .about-card:active,
      .gallery-item:active{
        transform:scale(.992);
      }

      .service:active,
      .point:active{
        background:rgba(255,255,255,.025);
      }

      /* Keep mobile performant: no heavy blur on every animated card */
      .reveal{
        filter:none;
      }
    }

    /* ---------- REDUCED MOTION ---------- */
    @media(prefers-reduced-motion:reduce){
      .reveal,
      .reveal.visible,
      .sector-card,
      .sector-card img,
      .about-card,
      .about-card img,
      .gallery-item,
      .gallery-item img,
      .service,
      .point,
      .cta-panel,
      .contact-card,
      .btn,
      .nav-cta,
      .section-label::before,
      .eyebrow::before,
      .section-title .orange,
      .hero h1 .orange,
      .contact h2 .orange{
        transition:none!important;
        animation:none!important;
        transform:none!important;
        filter:none!important;
        clip-path:none!important;
        -webkit-clip-path:none!important;
      }
    }


    /* ==============================================================
       "NO TERRENO" — controlled title wrapping.
       Keeps the editorial line breaks without duplicate breakpoint rules.
       ============================================================== */
    .gallery-title-a,
    .gallery-title-b,
    .gallery-title-c,
    .gallery-title-d{display:inline}

    @media(max-width:1080px){
      .gallery-head{
        flex-direction:column;
        align-items:flex-start;
        gap:22px;
      }
      .gallery-head .copy{max-width:620px}
      .gallery-title{
        max-width:780px;
        font-size:clamp(44px,6.3vw,62px);
        line-height:.95;
        letter-spacing:-.052em;
        text-wrap:initial;
      }
      .gallery-title-a,
      .gallery-title-b{display:inline}
      .gallery-title-b,
      .gallery-title-c{white-space:nowrap}
      .gallery-title-c{display:block}
      .gallery-title-d{display:inline}
    }

    @media(max-width:600px){
      .gallery-head{gap:26px}
      .gallery-title{
        width:100%;
        max-width:none;
        font-size:clamp(37px,10.6vw,43px);
        line-height:.98;
        letter-spacing:-.048em;
      }
      .gallery-title-a,
      .gallery-title-b,
      .gallery-title-c,
      .gallery-title-d{display:block}
      .gallery-title-b,
      .gallery-title-c{white-space:nowrap}
      .gallery-head .copy{
        max-width:100%;
        margin-top:8px;
      }
    }

    @media(max-width:370px){
      .gallery-title{font-size:36px}
    }

/* ---------- ACCESSIBILITY + PRODUCTION HARDENING ---------- */
/* Content remains visible when JavaScript is unavailable. */
html:not(.js) .reveal{
  opacity:1!important;
  transform:none!important;
  transition:none!important;
}

.skip-link{
  position:fixed;
  z-index:1000;
  top:12px;
  left:12px;
  padding:11px 15px;
  border-radius:10px;
  background:#fff;
  color:#101010;
  font-size:13px;
  font-weight:800;
  transform:translateY(-160%);
  transition:transform .18s ease;
}
.skip-link:focus{transform:translateY(0)}

:where(a, button):focus-visible{
  outline:3px solid #fff;
  outline-offset:4px;
  box-shadow:0 0 0 6px #101010;
}

main:focus{outline:none}

/* ---------- FOOTER COMPANY DETAILS ---------- */
.footer-row{
  display:grid;
  grid-template-columns:118px minmax(280px,1fr) auto;
  align-items:start;
  gap:26px 36px;
}
.footer-company{
  max-width:650px;
  line-height:1.65;
}
.footer-company strong{
  display:block;
  margin-bottom:3px;
  color:#1a1a1a;
  font-weight:800;
}
.footer-company address{
  margin:0;
  font:inherit;
  font-style:normal;
}
.footer-meta{
  display:grid;
  gap:5px;
  justify-items:end;
  text-align:right;
  line-height:1.5;
}
.footer-legal{
  font-weight:600;
}

@media(max-width:860px){
  .footer-row{
    grid-template-columns:1fr;
    gap:16px;
  }
  .footer-company{max-width:none}
  .footer-meta{
    justify-items:start;
    text-align:left;
  }
}

/* ==============================================================
   PHASE 1 — STATS + SPECIALIZED PROFILES
   New sections preserve the existing editorial/industrial language.
   ============================================================== */

/* ---------- STATS ---------- */
.stats{
  padding:0 0 116px;
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.stat{
  position:relative;
  min-width:0;
  padding:42px 28px 38px;
}

.stat:first-child{padding-left:0}
.stat:last-child{padding-right:0}

.stat + .stat::before{
  content:"";
  position:absolute;
  top:28px;
  bottom:28px;
  left:0;
  width:1px;
  background:var(--line);
}

.stat-value{
  display:flex;
  align-items:center;
  gap:3px;
  font-family:"Space Grotesk",sans-serif;
  line-height:.82;
  letter-spacing:-.065em;
  white-space:nowrap;
}

.stat-plus{
  margin-top:0;
  color:var(--orange);
  font-size:clamp(31px,3vw,48px);
  font-weight:600;
  letter-spacing:-.04em;
}

.stat-number{
  color:var(--black);
  font-size:clamp(62px,7.1vw,108px);
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

.stat-label{
  margin-top:17px;
  font-size:10px;
  line-height:1.3;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

/* A very subtle entrance rhythm. The actual count is JS-driven. */
.js .stats-grid.reveal .stat{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .52s var(--ease-premium),transform .52s var(--ease-premium);
}
.js .stats-grid.reveal.visible .stat{
  opacity:1;
  transform:none;
}
.js .stats-grid.reveal.visible .stat:nth-child(1){transition-delay:.02s}
.js .stats-grid.reveal.visible .stat:nth-child(2){transition-delay:.09s}
.js .stats-grid.reveal.visible .stat:nth-child(3){transition-delay:.16s}
.js .stats-grid.reveal.visible .stat:nth-child(4){transition-delay:.23s}

/* ---------- SPECIALIZED PROFILES ---------- */
.profiles{
  padding:0 0 116px;
}

.profiles-head{
  display:grid;
  grid-template-columns:1fr .62fr;
  gap:60px;
  align-items:end;
  margin-bottom:46px;
}

.profiles-head .section-title{
  max-width:930px;
}

.profiles-head .copy{
  margin:0 0 7px;
  max-width:560px;
}

.profiles-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.profile-group{
  position:relative;
  min-width:0;
  padding:39px 42px 42px 0;
}

.profile-group + .profile-group{
  padding-left:42px;
  padding-right:0;
  border-left:1px solid var(--line);
}

.profile-group-head{
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  align-items:start;
  gap:14px;
  margin-bottom:28px;
}

.profile-no{
  padding-top:7px;
  color:var(--orange);
  font-size:10px;
  line-height:1;
  font-weight:800;
  letter-spacing:.16em;
}

.profile-group h3{
  margin:0;
  max-width:620px;
  font:600 clamp(31px,3.4vw,52px)/.98 "Space Grotesk",sans-serif;
  letter-spacing:-.045em;
  text-transform:uppercase;
}

.profile-list{
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--line);
}

.profile-list li{
  position:relative;
  display:flex;
  align-items:center;
  min-height:49px;
  padding:12px 12px 12px 0;
  border-bottom:1px solid var(--line);
  color:var(--text);
  font-size:14px;
  line-height:1.45;
  font-weight:600;
  transition:padding-left .3s var(--ease-premium),color .25s ease;
}

.profile-list li::before{
  content:"";
  width:0;
  height:1px;
  margin-right:0;
  background:var(--orange);
  transition:width .3s var(--ease-premium),margin-right .3s var(--ease-premium);
}

@media(hover:hover){
  .profile-list li:hover{
    padding-left:3px;
  }
  .profile-list li:hover::before{
    width:18px;
    margin-right:10px;
  }
}

.welding{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-top:31px;
  padding-top:23px;
}

.welding-label{
  font-size:9px;
  line-height:1.3;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

.welding strong{
  text-align:right;
  font:600 clamp(19px,2vw,27px)/1.1 "Space Grotesk",sans-serif;
  letter-spacing:-.03em;
  text-transform:uppercase;
}

.welding strong span{color:var(--orange)}

/* List cascade: subtle enough to keep the section readable first. */
.js .profile-group.reveal .profile-list li,
.js .profile-group.reveal .welding{
  opacity:0;
  transform:translateY(7px);
  transition:
    opacity .38s var(--ease-premium),
    transform .38s var(--ease-premium),
    padding-left .3s var(--ease-premium),
    color .25s ease;
}

.js .profile-group.reveal.visible .profile-list li,
.js .profile-group.reveal.visible .welding{
  opacity:1;
  transform:none;
}

.js .profile-group.reveal.visible .profile-list li:nth-child(1){transition-delay:.08s}
.js .profile-group.reveal.visible .profile-list li:nth-child(2){transition-delay:.12s}
.js .profile-group.reveal.visible .profile-list li:nth-child(3){transition-delay:.16s}
.js .profile-group.reveal.visible .profile-list li:nth-child(4){transition-delay:.20s}
.js .profile-group.reveal.visible .profile-list li:nth-child(5){transition-delay:.24s}
.js .profile-group.reveal.visible .profile-list li:nth-child(6){transition-delay:.28s}
.js .profile-group.reveal.visible .profile-list li:nth-child(7){transition-delay:.32s}
.js .profile-group.reveal.visible .profile-list li:nth-child(8){transition-delay:.36s}
.js .profile-group.reveal.visible .welding{transition-delay:.40s}

/* ---------- CONFIRMED CONTACT DATA ---------- */
.contact-details{
  display:grid;
  gap:11px;
  margin:-1px 0 23px;
}
.contact-detail{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  color:var(--black);
  font-size:12px;
  line-height:1.35;
  font-weight:800;
}
.contact-detail address{
  margin:0;
  font:inherit;
}
.contact-detail-icon{
  display:grid;
  place-items:center;
  flex:0 0 18px;
  width:18px;
  height:18px;
  color:var(--orange);
}
.contact-detail-icon svg{
  display:block;
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.contact-detail-text{
  position:relative;
  min-width:0;
}
.contact-details a.contact-detail{
  width:max-content;
  max-width:100%;
  justify-self:start;
}
a.contact-detail .contact-detail-text::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-3px;
  height:1px;
  background:var(--orange);
  transition:right .24s ease;
}
@media(hover:hover){
  a.contact-detail:hover .contact-detail-text::after{right:0}
}
.footer-company a{transition:color .2s ease}
@media(hover:hover){.footer-company a:hover{color:var(--orange)}}

@media(max-width:860px){
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat{padding:34px 24px}
  .stat:first-child{padding-left:0}
  .stat:nth-child(2){padding-right:0}
  .stat:nth-child(3){padding-left:0;border-top:1px solid var(--line)}
  .stat:nth-child(4){padding-right:0;border-top:1px solid var(--line)}
  .stat:nth-child(3)::before{display:none}
  .stat + .stat::before{top:22px;bottom:22px}

  .profiles-head{grid-template-columns:1fr;gap:24px}
  .profiles-grid{grid-template-columns:1fr}
  .profile-group{padding:34px 0 38px}
  .profile-group + .profile-group{
    padding:38px 0 34px;
    border-left:0;
    border-top:1px solid var(--line);
  }
  .profile-group-head{grid-template-columns:46px minmax(0,1fr)}
}

@media(max-width:600px){
  .stats,.profiles{padding-bottom:82px}
  .stat{padding:28px 13px 26px}
  .stat:first-child,.stat:nth-child(3){padding-left:0}
  .stat:nth-child(2),.stat:nth-child(4){padding-right:0}
  .stat-value{gap:1px}
  .stat-number{font-size:clamp(52px,17vw,72px)}
  .stat-plus{font-size:clamp(24px,8vw,34px)}
  .stat-label{margin-top:13px;font-size:8px;letter-spacing:.13em}

  .profiles-head{margin-bottom:32px}
  .profile-group-head{grid-template-columns:37px minmax(0,1fr);gap:10px;margin-bottom:23px}
  .profile-group h3{font-size:clamp(31px,10vw,43px)}
  .profile-list li{min-height:46px;font-size:13px}
  .welding{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
    margin-top:25px;
  }
  .welding strong{text-align:left}
}

@media(prefers-reduced-motion:reduce){
  .stat,
  .profile-list li,
  .welding{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}

/* ---------- CONTACT CARD DESKTOP POSITION ----------
   Keep the card's original visual starting point as its content grows:
   move the card down, and add the same space to the section bottom so
   the extra height grows toward the footer instead of toward the heading. */
@media(min-width:861px){
  .contact{padding-bottom:104px}
  .contact-card{position:relative;top:50px}
}

/* ==============================================================
   LANGUAGE SWITCHER
   Desktop: flag + language code integrated in the main navigation.
   Mobile: independent control in the header, immediately before the
   hamburger, so language selection stays outside the full-screen menu.
   ============================================================== */
.language-switcher{
  position:relative;
  flex:0 0 auto;
}
.language-switcher--desktop{
  margin-left:2px;
  padding-left:17px;
  border-left:1px solid rgba(255,255,255,.16);
}
.language-switcher--mobile{display:none}
.language-trigger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:62px;
  min-height:40px;
  padding:0 2px;
  border:0;
  background:transparent;
  color:#fff;
  font:800 10px/1 "Manrope",sans-serif;
  letter-spacing:.10em;
  cursor:pointer;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.language-flag{
  display:block;
  width:18px;
  height:12px;
  flex:0 0 auto;
  object-fit:cover;
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.18),0 2px 6px rgba(0,0,0,.22);
}
.language-current{display:block}
.language-chevron{
  width:8px;
  height:6px;
  flex:0 0 auto;
  fill:none;
  stroke:var(--orange);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .22s ease;
}
.language-switcher.is-open .language-chevron{transform:rotate(180deg)}
.language-trigger:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:4px;
  border-radius:4px;
}
.language-menu{
  position:absolute;
  z-index:80;
  top:calc(100% + 10px);
  right:-7px;
  display:grid;
  min-width:108px;
  padding:6px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:rgba(16,16,16,.98);
  box-shadow:0 18px 45px rgba(0,0,0,.28);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .2s ease,transform .2s var(--ease-premium),visibility 0s linear .2s;
}
.language-switcher.is-open .language-menu{
  opacity:1;
  visibility:visible;
  transform:none;
  transition:opacity .2s ease,transform .2s var(--ease-premium),visibility 0s linear 0s;
}
.language-menu a,
.nav-links .language-menu a{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:9px;
  min-height:36px;
  padding:0 10px;
  border-radius:6px;
  color:rgba(255,255,255,.68);
  font:800 9px/1 "Manrope",sans-serif;
  letter-spacing:.10em;
  text-shadow:none;
  transition:background .18s ease,color .18s ease;
}
.nav-links .language-menu a::after{display:none}
.language-menu a.is-active{
  color:#fff;
  background:rgba(255,94,18,.14);
}
@media(hover:hover){
  .language-trigger:hover{color:var(--orange)}
  .language-menu a:hover{
    color:#fff;
    background:rgba(255,255,255,.07);
  }
}

@media(max-width:1080px) and (min-width:861px){
  .language-switcher--desktop{padding-left:12px;margin-left:-4px}
  .language-trigger{min-width:58px;font-size:9px;gap:6px}
  .language-flag{width:17px;height:11px}
}

@media(max-width:860px){
  /* Header becomes brand | language | hamburger. */
  .nav{
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:5px;
  }

  /* The desktop copy lives inside the full-screen nav, so remove it entirely
     on mobile. The independent header copy remains available at all times. */
  .site-header .language-switcher--desktop{display:none!important}
  .site-header .language-switcher--mobile{
    display:block;
    justify-self:end;
    align-self:center;
    margin:0;
    padding:0;
    border:0;
    z-index:6;
  }
  .site-header .language-switcher--mobile .language-trigger{
    min-width:60px;
    min-height:42px;
    padding:0 3px;
    gap:6px;
    font-size:9px;
    letter-spacing:.09em;
  }
  .site-header .language-switcher--mobile .language-flag{
    width:18px;
    height:12px;
  }
  .site-header .language-switcher--mobile .language-menu{
    top:calc(100% + 8px);
    right:0;
    min-width:118px;
    padding:7px;
    border-radius:11px;
    background:rgba(10,10,10,.985);
    box-shadow:0 18px 38px rgba(0,0,0,.32);
  }
  .site-header .language-switcher--mobile .language-menu a{
    min-height:44px;
    padding:0 11px;
    gap:10px;
    font-size:10px;
  }
  .site-header .language-switcher--mobile .language-menu .language-flag{
    width:20px;
    height:13px;
  }
  .site-header .menu-btn{margin-left:0}
}

@media(max-width:370px){
  .site-header .language-switcher--mobile .language-trigger{
    min-width:55px;
    padding:0 2px;
    gap:5px;
    font-size:8px;
  }
  .site-header .language-switcher--mobile .language-flag{
    width:17px;
    height:11px;
  }
}

@media(prefers-reduced-motion:reduce){
  .language-menu,
  .language-chevron{transition:none!important}
}


/* ---------- FOOTER LEGAL LINK ---------- */
.footer-legal a{
  color:inherit;
  text-decoration:none;
  transition:color .2s ease;
}
.footer-legal a:hover{color:var(--black)}
.footer-legal a:focus-visible{outline:2px solid var(--orange);outline-offset:4px}

/* ---------- PRIVACY / LEGAL HEADER ---------- */
.legal-body .site-header{
  position:fixed;
  background:rgba(12,12,12,.94);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}

/* ---------- PRIVACY / LEGAL PAGE ---------- */
.legal-page{padding:150px 0 110px;background:var(--paper)}
.legal-wrap{max-width:980px}
.legal-title{
  margin:18px 0 28px;
  font-family:"Space Grotesk",sans-serif;
  font-size:clamp(48px,6.2vw,86px);
  line-height:.98;
  letter-spacing:-.055em;
  text-transform:uppercase;
}
.legal-intro{max-width:780px;margin:0 0 54px;color:var(--muted);font-size:17px;line-height:1.75}
.legal-content{border-top:1px solid var(--line)}
.legal-section{padding:34px 0;border-bottom:1px solid var(--line)}
.legal-section h2{margin:0 0 14px;font:700 22px/1.25 "Space Grotesk",sans-serif;letter-spacing:-.025em}
.legal-section p,.legal-section li{color:var(--muted);font-size:15px;line-height:1.8}
.legal-section p{margin:0 0 12px}
.legal-section p:last-child{margin-bottom:0}
.legal-section ul{margin:10px 0 0;padding-left:22px}
.legal-section a{color:var(--black);text-decoration-thickness:1px;text-underline-offset:3px}
.legal-updated{margin-top:34px;color:var(--muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
@media(max-width:860px){.legal-page{padding:118px 0 90px}.legal-wrap{max-width:none}.legal-title{font-size:clamp(42px,9vw,64px)}}
@media(max-width:600px){.legal-page{padding:96px 0 72px}.legal-title{font-size:clamp(38px,11vw,52px);line-height:1}.legal-intro{font-size:15px;margin-bottom:38px}.legal-section{padding:26px 0}.legal-section h2{font-size:20px}.legal-section p,.legal-section li{font-size:14px;line-height:1.75}}

/* ---------- 404 PAGE (V21) ---------- */
.error-page{
  min-height:calc(100svh - 150px);
  padding:168px 0 105px;
  display:flex;
  align-items:center;
  background:var(--paper);
}
.error-wrap{
  display:grid;
  grid-template-columns:minmax(250px,.72fr) minmax(0,1fr);
  gap:clamp(48px,8vw,130px);
  align-items:end;
  width:100%;
}
.error-code{
  margin:0;
  color:var(--orange);
  font:700 clamp(128px,20vw,310px)/.72 "Space Grotesk",sans-serif;
  letter-spacing:-.085em;
}
.error-copy{padding-bottom:10px}
.error-title{
  max-width:760px;
  margin:18px 0 24px;
  font-family:"Space Grotesk",sans-serif;
  font-size:clamp(46px,5.7vw,82px);
  line-height:.95;
  letter-spacing:-.055em;
  text-transform:uppercase;
}
.error-text{
  max-width:610px;
  margin:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.75;
}
.error-actions{margin-top:30px}
.error-actions .btn{min-width:168px}

@media(max-width:860px){
  .error-page{min-height:100svh;padding:126px 0 82px;align-items:flex-start}
  .error-wrap{grid-template-columns:1fr;gap:42px}
  .error-code{font-size:clamp(118px,35vw,220px)}
  .error-copy{padding-bottom:0}
  .error-title{font-size:clamp(42px,10vw,64px)}
}
@media(max-width:600px){
  .error-page{padding:108px 0 68px}
  .error-wrap{gap:34px}
  .error-code{font-size:clamp(108px,39vw,170px)}
  .error-title{margin:15px 0 20px;font-size:clamp(38px,11vw,52px);line-height:1}
  .error-text{font-size:15px;line-height:1.7}
  .error-actions{margin-top:26px}
}


/* ==============================================================
   V26 — RESPONSIVE HARDENING
   Targeted fixes only. Normal desktop/mobile layouts stay unchanged.

   1) Stabilise the desktop header around the two breakpoint edges where
      long translated navigation labels can otherwise become too cramped.
   2) Compact the hero only when desktop viewport height is genuinely short
      (Windows display scaling, browser zoom/toolbars, small laptop screens).
   3) Compact hero rhythm on short mobile-landscape viewports.
   ============================================================== */

/* Desktop header transition: avoid the 1080px breakpoint cliff without
   changing the content grids below the header. */
@media (min-width:1081px) and (max-width:1180px){
  :root{--container:min(100% - 40px,1380px)}
  .nav{
    grid-template-columns:220px minmax(0,1fr) 190px;
    gap:18px;
  }
  .brand img{
    width:205px;
    max-height:66px;
  }
  .nav-links{
    gap:20px;
    font-size:11px;
  }
  .language-switcher--desktop{
    padding-left:10px;
    margin-left:-2px;
  }
  .language-trigger{
    min-width:54px;
    gap:6px;
    font-size:9px;
  }
}

/* High browser zoom / narrow desktop: preserve the full text navigation,
   but remove the redundant header CTA before the layout reaches the mobile
   hamburger breakpoint. The Contact nav item remains available. */
@media (min-width:861px) and (max-width:1000px){
  .nav{
    min-height:88px;
    grid-template-columns:170px minmax(0,1fr);
    gap:14px;
  }
  .brand img{
    width:165px;
    max-height:58px;
  }
  .nav-links{
    justify-content:flex-end;
    gap:12px;
    font-size:10px;
  }
  .nav-links > a:not(.mobile-menu-cta){
    padding:28px 0;
    white-space:nowrap;
  }
  .nav-links > a:not(.mobile-menu-cta)::after{bottom:20px}
  .nav-cta{display:none}
  .language-switcher--desktop{
    padding-left:8px;
    margin-left:0;
  }
  .language-trigger{
    min-width:50px;
    gap:5px;
    font-size:8px;
  }
  .language-flag{
    width:16px;
    height:11px;
  }
}

/* Short desktop viewport: this is the Windows 125% / 150% scaling fix.
   Width-only breakpoints cannot solve it because the real constraint is the
   available vertical CSS viewport. Normal desktop heights remain untouched. */
@media (min-width:861px) and (max-height:820px){
  .hero-inner{
    padding:112px 0 30px;
  }
  .hero-content{
    width:min(980px,86%);
  }
  .hero h1{
    max-width:980px;
    font-size:clamp(58px,5.7vw,88px);
    line-height:.92;
  }
  .eyebrow{
    margin-bottom:12px;
  }
  .hero-lead{
    margin-top:16px;
    font-size:clamp(15px,1.2vw,18px);
    line-height:1.5;
  }
  .hero-actions{
    margin-top:18px;
  }
  .hero-bottom{
    margin-top:22px;
    padding-top:12px;
  }
}

/* Phones/tablets rotated to landscape have plenty of width but very little
   height. Keep the existing 680/690px hero safety floor, only compact the
   typography/rhythm so translated headings cannot climb into the header. */
@media (max-width:860px) and (max-height:500px){
  .hero-inner{
    padding:94px 0 24px;
  }
  .hero h1{
    font-size:clamp(44px,9vw,58px);
    line-height:.93;
  }
  .eyebrow{
    margin-bottom:12px;
  }
  .hero-lead{
    margin-top:16px;
    line-height:1.5;
  }
  .hero-actions{
    margin-top:18px;
  }
  .hero-bottom{
    margin-top:22px;
    padding-top:12px;
  }
}

/* ---------- V26: NARROW-CONTENT OVERFLOW GUARDS ----------
   Grid tracks default to min-width:auto, which can let long translated words
   force a mobile column wider than its container. minmax(0,1fr) keeps the
   editorial layout intact while allowing the text column to wrap normally. */
@media (max-width:860px){
  .about-grid,
  .sectors-head,
  .services-head,
  .difference-grid,
  .contact-grid,
  .profiles-head,
  .profiles-grid{
    grid-template-columns:minmax(0,1fr);
  }

  .service{
    grid-template-columns:48px minmax(0,1fr);
  }

  .point{
    grid-template-columns:62px minmax(0,1fr);
  }

  .difference-intro,
  .profiles-head > *,
  .profile-group,
  .points,
  .point > *,
  .service > *{
    min-width:0;
  }

  /* German has a single compound-word legal title. Keep it on one line on
     tablets where possible; allow a safe wrap only when the screen is narrow. */
  html[lang^="de"] .legal-title{
    font-size:clamp(40px,7.2vw,58px);
    overflow-wrap:anywhere;
    hyphens:auto;
  }
}

@media (max-width:600px){
  .service{
    grid-template-columns:38px minmax(0,1fr);
  }

  .profile-group h3,
  .service h3,
  .legal-title{
    overflow-wrap:anywhere;
    hyphens:auto;
  }

  /* The French profiles heading contains the longest single word in this
     title set. A small, language-specific reduction prevents clipping while
     leaving every other language and section title unchanged. */
  html[lang^="fr"] .profiles-head .section-title{
    font-size:clamp(35px,11vw,56px);
  }
}

@media (max-width:370px){
  /* Keep the longest German hero word inside the 320–370px content width
     without introducing arbitrary mid-word breaks. */
  .hero h1{
    font-size:clamp(45px,14.5vw,64px);
  }

  /* Recover text width for long translated point titles on very small phones. */
  .point{
    grid-template-columns:38px minmax(0,1fr);
    gap:14px;
  }
}

/* ==============================================================
   PROPIPING V27 — iOS SAFARI MOBILE MENU VIEWPORT FIX
   The Safari address/tab bars dynamically change the visual viewport height.
   Use the dynamic viewport (and a VisualViewport-fed CSS variable when JS is
   available) so the full-screen menu always covers the actually visible area.
   ============================================================== */
@media (max-width:860px){
  html.menu-scroll-locked{
    overflow:hidden;
    overscroll-behavior:none;
  }

  .site-header .nav-links,
  .site-header.menu-open .nav-links{
    top:74px;
    bottom:auto;
    height:calc(100vh - 74px); /* legacy fallback */
    height:calc(100dvh - 74px);
    height:calc(var(--menu-viewport-height, 100dvh) - 74px);
    min-height:0;
    max-height:none;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
  }
}

@media (max-width:600px){
  .site-header .nav-links,
  .site-header.menu-open .nav-links{
    top:64px;
    height:calc(100vh - 64px); /* legacy fallback */
    height:calc(100dvh - 64px);
    height:calc(var(--menu-viewport-height, 100dvh) - 64px);
  }
}

/* ==============================================================
   PROPIPING V28 — MOBILE EDGE-CASE HARDENING
   Target only failure modes found in mobile stress testing. Normal portrait,
   tablet and desktop presentation remains unchanged.
   ============================================================== */

/* Very short viewports (typically phone landscape or heavily reduced browser
   height): the hero retains its existing minimum-height safety floor, but the
   content must begin below the header instead of being anchored to the bottom
   of a much taller hero and therefore starting outside the first viewport. */
@media (max-height:500px){
  .hero-inner{
    justify-content:flex-start;
  }
}

/* A six-language menu can be taller than the usable viewport on short mobile
   screens. Keep its normal size whenever it fits; otherwise scroll only the
   dropdown, not the page behind it. */
@media (max-width:860px){
  .site-header .language-switcher--mobile .language-menu{
    max-height:calc(100vh - 84px); /* legacy fallback */
    max-height:calc(100dvh - 84px - env(safe-area-inset-bottom));
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
}

/* Once the gallery header stacks, explicitly constrain its children to the
   content column. This prevents long translated title fragments from creating
   hidden horizontal document overflow on very narrow phones. */
@media (max-width:600px){
  .gallery-head > *{
    width:100%;
    min-width:0;
    max-width:100%;
  }
}

/* Extra guard for the smallest + shortest portrait viewports and slow-font
   first paint. It only activates when both dimensions are constrained, so the
   approved mobile typography on ordinary phones is untouched. */
@media (max-width:370px) and (max-height:650px){
  .hero-inner{
    padding-top:96px;
    padding-bottom:24px;
  }
  .hero h1{
    font-size:clamp(42px,13.2vw,58px);
    line-height:.93;
  }
  .eyebrow{
    margin-bottom:10px;
  }
  .hero-lead{
    margin-top:14px;
    line-height:1.48;
  }
  .hero-actions{
    margin-top:17px;
  }
  .hero-bottom{
    margin-top:20px;
    padding-top:11px;
  }
}