/* ─── RESET & BASE ───────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  background:#0e0e0e;color:#e4e4e0;font-family:'DM Sans',sans-serif;
  overflow-x:hidden;max-width:100vw;
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
}
img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
a,button{-webkit-user-drag:none}
/* Permite seleção apenas em campos de formulário */
input,textarea,select{-webkit-user-select:text;-moz-user-select:text;user-select:text}

/* grain overlay */
.grain{position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

a{text-decoration:none;color:inherit}
.wrap{width:min(1180px,84vw);margin:auto}

/* ─── LABELS & KICKER ───────────────────────────────────────────────── */
.label,.kicker{font-size:9px;font-weight:700;letter-spacing:.22em;color:#666;text-transform:uppercase}
.label:before{content:'// ';color:#c8a96e}

/* ─── HEADER ────────────────────────────────────────────────────────── */
header{position:fixed;z-index:50;top:0;left:0;right:0;height:100px;padding:0 4vw;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:rgba(10,10,10,.9);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.07)}
.logo{display:flex;align-items:center;justify-content:flex-start;width:fit-content}
.logo img{width:320px;height:78px;object-fit:cover;object-position:left center;display:block}
.nav-links{display:flex;align-items:center;gap:4px;font-family:'Space Grotesk',sans-serif;justify-content:center}
.nav-links a{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#999;padding:8px 16px;border-radius:3px;transition:color .2s,background .2s}
.nav-links a:hover{color:#f0ede6;background:rgba(255,255,255,.06)}
.nav-cta{display:flex;align-items:center;justify-content:flex-end}
.nav-button{background:#c8a96e;color:#0e0e0e;padding:10px 22px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:3px;transition:background .2s,transform .2s;display:inline-flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif}
.nav-button:hover{background:#d4b97e;transform:translateY(-2px)}

/* Botão entrar (desktop) */
.nav-login-btn{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#999;padding:8px 14px;border-radius:3px;border:1px solid rgba(255,255,255,.12);transition:color .2s,border-color .2s,background .2s;font-family:'Space Grotesk',sans-serif;margin-right:10px}
.nav-login-btn:hover{color:#f0ede6;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.05)}

/* Avatar de perfil */
.nav-avatar{margin-right:10px}
.avatar-link{display:flex;align-items:center;gap:8px;text-decoration:none;padding:5px 10px;border-radius:3px;transition:background .2s}
.avatar-link:hover{background:rgba(255,255,255,.06)}
.avatar-circle{
  width:32px;height:32px;border-radius:50%;
  background:#c8a96e;color:#0a0a0a;
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.avatar-name{font-size:11px;font-weight:500;color:#ccc;letter-spacing:.02em;max-width:80px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Link painel no menu mobile */
.nav-painel-mobile{font-weight:600 !important}
.hamb{display:none;border:0;background:none;cursor:pointer;padding:4px}
.hamb i{display:block;width:22px;height:2px;background:#e4e4e0;margin:5px 0;transition:.3s}
.hamb.active i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamb.active i:nth-child(2){opacity:0}
.hamb.active i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ─── PAGE INTRO ANIMATION ──────────────────────────────────────────── */

/* Tudo começa invisível */
body.loading header,
body.loading main,
body.loading footer{opacity:0}

/* Curtain — dois painéis que abrem para os lados */
.curtain{position:fixed;inset:0;z-index:200;display:flex;pointer-events:none}
.curtain-left,.curtain-right{flex:1;background:#0a0a0a;transition:transform .85s cubic-bezier(.77,0,.18,1)}
.curtain-left{transform-origin:left}
.curtain-right{transform-origin:right}
.curtain.open .curtain-left{transform:scaleX(0);transform-origin:left}
.curtain.open .curtain-right{transform:scaleX(0);transform-origin:right}

/* Logotipo central no loader */
.curtain-logo{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:210;font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;letter-spacing:.35em;color:#c8a96e;text-transform:uppercase;pointer-events:none;opacity:0;animation:curtain-logo-in .55s .1s ease forwards,curtain-logo-out .4s .8s ease forwards}
@keyframes curtain-logo-in{from{opacity:0;letter-spacing:.6em}to{opacity:1;letter-spacing:.35em}}
@keyframes curtain-logo-out{from{opacity:1}to{opacity:0}}

/* Header entry */
.header-reveal{animation:header-slide .6s .05s cubic-bezier(.22,1,.36,1) both}
@keyframes header-slide{from{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:translateY(0)}}

/* Hero text — cada linha animada individualmente */
.hero-line{overflow:hidden;display:block}
.hero-line-inner{display:block;transform:translateY(110%);opacity:0}

/* Kicker */
.kicker{opacity:0;transform:translateY(14px)}

/* Paragraph + buttons */
.hero-left>p,.hero-buttons{opacity:0;transform:translateY(20px)}

/* Machine card */
.hero-right{opacity:0;transform:translateX(40px)}

/* Triggered when .animate é adicionado — cascata suave mas perceptível */
.animate .kicker{animation:fade-up .55s 0s cubic-bezier(.22,1,.36,1) forwards}
.animate .hero-line-inner:nth-child(1){animation:line-reveal .7s .12s cubic-bezier(.22,1,.36,1) forwards}
.animate .hero-line-inner:nth-child(2){animation:line-reveal .7s .26s cubic-bezier(.22,1,.36,1) forwards}
.animate .hero-left>p{animation:fade-up .65s .42s cubic-bezier(.22,1,.36,1) forwards}
.animate .hero-buttons{animation:fade-up .65s .55s cubic-bezier(.22,1,.36,1) forwards}
.animate .hero-right{animation:card-reveal .8s .2s cubic-bezier(.22,1,.36,1) forwards}

@keyframes line-reveal{from{transform:translateY(110%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes fade-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes card-reveal{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}

/* ─── HERO ──────────────────────────────────────────────────────────── */
.hero{min-height:100vh;position:relative;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;padding:135px 8vw 90px;overflow:hidden;background:linear-gradient(135deg,#141414 0%,#0a0a0a 50%,#121212 100%)}
.hero-lines{position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 9.8%,rgba(255,255,255,.04) 10%,transparent 10.1% 89.9%,rgba(255,255,255,.04) 90%,transparent 90.1%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px);background-size:100% 100%,100% 100px;mask-image:linear-gradient(to bottom,#000,transparent)}
.hero-left{position:relative;z-index:2}
.kicker span{display:inline-block;width:28px;height:1px;background:#c8a96e;margin-right:10px;vertical-align:middle}
.hero h1{font:600 clamp(65px,9vw,132px)/.82 'Space Grotesk';letter-spacing:-.075em;margin:30px 0;color:#f0ede6}
.hero h1 em{font-style:normal;color:#c8a96e}
.hero-left>p{max-width:520px;color:#8a8a84;font-size:15px;line-height:1.7}
.hero-buttons{display:flex;align-items:center;gap:25px;margin-top:35px}
.btn{display:inline-flex;align-items:center;gap:28px;padding:16px 21px;text-transform:uppercase;font-size:9px;font-weight:700;letter-spacing:.13em;border:1px solid #444;transition:.25s;color:#e4e4e0}
.btn.black{background:#c8a96e;color:#0e0e0e;border-color:#c8a96e}
.btn.black:hover{transform:translateY(-3px);background:#d4b97e;border-color:#d4b97e}
.under{font-size:9px;text-transform:uppercase;letter-spacing:.13em;border-bottom:1px solid #555;padding-bottom:7px;color:#999}
.under span{margin-left:13px}
.hero-index{position:absolute;bottom:28px;left:8vw}
.hero-index span{display:inline-block;width:45px;height:1px;background:#555;vertical-align:middle;animation:scan-line 2.4s ease-in-out infinite}
@keyframes scan-line{0%,100%{width:24px;opacity:.4}50%{width:54px;opacity:.9}}

/* ─── HERO ENGINEERING VISUAL ────────────────────────────────────────── */
.hero-right{position:relative;height:590px;display:flex;align-items:center;justify-content:center;overflow:visible}
.eng-drawing{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.eng-drawing svg{width:100%;max-width:520px;height:auto;filter:drop-shadow(0 0 40px rgba(200,169,110,.08))}
/* floating spec tags */
.spec-tag{position:absolute;font-family:'Space Grotesk',sans-serif;font-size:7.5px;letter-spacing:.18em;color:#666;text-transform:uppercase;line-height:1.9;pointer-events:none}
.spec-tag b{display:block;color:#c8a96e;font-size:9px;letter-spacing:.1em}
.spec-tag::before{content:'';position:absolute;background:#333}
.st-tl{top:12%;left:2%}
.st-tr{top:14%;right:0}
.st-bl{bottom:22%;left:0}
.st-br{bottom:18%;right:2%}

/* ─── MANIFESTO ─────────────────────────────────────────────────────── */
.manifesto{padding:135px 0;background:#111;border-top:1px solid rgba(255,255,255,.06)}
.manifesto-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:11vw;margin-top:50px}
.manifesto h2,.section-top h2,.process h2,.contact h2,.quote h2{font:500 clamp(44px,5.6vw,76px)/.98 'Space Grotesk';letter-spacing:-.06em;color:#f0ede6}
.manifesto h2 span,.section-top h2 span,.process h2 span,.contact h2 span,.quote h2 span{color:#c8a96e}
.manifesto-copy .big{font-size:19px;line-height:1.55;color:#ccc}
.manifesto-copy p+ p{font-size:13px;line-height:1.8;color:#777;margin-top:20px}
.arrow-link{display:inline-block;margin-top:34px;font-size:9px;text-transform:uppercase;letter-spacing:.15em;border-bottom:1px solid #c8a96e;padding-bottom:8px;color:#c8a96e}
.arrow-link span{margin-left:20px}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);margin-top:105px;border-top:1px solid #2a2a2a}
.metrics>div{padding:25px 17px;border-right:1px solid #2a2a2a}
.metrics>div:last-child{border:0}
.metrics b{display:block;color:#c8a96e;font:12px 'Space Grotesk';margin-bottom:18px}
.metrics strong{display:block;font-size:10px;letter-spacing:.14em;color:#e4e4e0}
.metrics span{display:block;font-size:10px;color:#666;margin-top:7px}

/* ─── SOLUTIONS ─────────────────────────────────────────────────────── */
.solutions{padding:125px 0;background:linear-gradient(135deg,#0a0a0a,#161616 50%,#0d0d0d);color:#e4e4e0}
.solutions .label{color:#666}
.solutions .label:before{color:#c8a96e}
.section-top{display:flex;align-items:end;justify-content:space-between;gap:50px}
.section-top p{max-width:340px;font-size:12px;color:#666;line-height:1.7}
.solution-list{margin-top:55px;border-top:1px solid #222}
.solution-list article{display:grid;grid-template-columns:55px 90px 1fr 45px;align-items:center;gap:25px;min-height:180px;border-bottom:1px solid #222;transition:.3s}
.solution-list article:hover{padding-left:15px;background:linear-gradient(90deg,rgba(200,169,110,.07),transparent)}
.solution-list .num{font:11px 'Space Grotesk';color:#444}
.sol-icon{width:52px;height:52px;flex-shrink:0;color:#c8a96e;opacity:.85}
.sol-icon svg{width:100%;height:100%}
.solution-list h3{font:500 27px 'Space Grotesk';letter-spacing:-.03em;color:#f0ede6}
.solution-list p{font-size:12px;color:#777;max-width:580px;margin-top:7px}
.solution-list article>a{font-size:25px;color:#c8a96e;text-align:right;opacity:.7;transition:.2s}
.solution-list article:hover>a{opacity:1}

/* ─── CAPABILITY ────────────────────────────────────────────────────── */
.capability{display:grid;grid-template-columns:1fr 1fr;background:#0d0d0d}
.cap-image{min-height:700px;position:relative;overflow:hidden;background:#0a0a0a;display:flex;align-items:center;justify-content:center;padding:40px}
.cap-svg{width:100%;max-width:480px;height:auto}
.cap-code{position:absolute;left:35px;bottom:35px;color:#666;font:600 11px 'Space Grotesk';letter-spacing:.2em}
.cap-code small{font-size:7px;color:#444}
.cap-copy{padding:115px 9vw;background:#111}
.cap-copy h2{margin:30px 0}
.cap-copy>p{font-size:13px;color:#666;line-height:1.8;max-width:490px}
.check{display:flex;gap:20px;padding:23px 0;border-bottom:1px solid #222}
.check:first-of-type{margin-top:35px;border-top:1px solid #222}
.check>span{font:11px 'Space Grotesk';color:#c8a96e}
.check b,.check small{display:block}
.check b{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#e4e4e0}
.check small{font-size:10px;color:#666;margin-top:4px}

/* ─── PROCESS ───────────────────────────────────────────────────────── */
.process{padding:125px 0;background:#0e0e0e}
.process-head{display:grid;grid-template-columns:1fr .6fr;gap:80px;margin-top:50px;align-items:end}
.process-head p{font-size:12px;color:#666;max-width:280px}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);margin-top:75px;border-top:1px solid #222}
.timeline>div{position:relative;padding:28px 20px 20px 0;border-right:1px solid #222;min-height:210px}
.timeline>div+div{padding-left:25px}
.timeline>div:last-child{border:0}
.timeline span{display:block;font:11px 'Space Grotesk';color:#c8a96e;margin-bottom:45px}
.timeline h3{font:500 22px 'Space Grotesk';color:#f0ede6}
.timeline p{font-size:11px;color:#666;line-height:1.6;margin-top:7px;max-width:210px}

/* ─── QUOTE ─────────────────────────────────────────────────────────── */
.quote{padding:135px 0;background:linear-gradient(135deg,#111,#0a0a0a);position:relative;overflow:hidden}
.quote:after{content:'C&M';position:absolute;right:-20px;bottom:-100px;font:700 330px 'Space Grotesk';color:rgba(200,169,110,.05);letter-spacing:-.1em}
.quote-mark{font:110px Georgia;color:#c8a96e;line-height:0;display:block;margin-bottom:15px;opacity:.7}
.quote .btn{margin-top:38px}

/* ─── CONTACT ───────────────────────────────────────────────────────── */
.contact{padding:125px 0;background:#111}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:10vw}
.contact h2{margin-top:30px}
.contact> .wrap>div>p{color:#666;font-size:13px;line-height:1.7;max-width:400px;margin-top:25px}
.contact-info{margin-top:32px;display:flex;flex-direction:column;gap:16px}
.contact-info>div{display:flex;flex-direction:column;gap:3px}
.contact-info span{font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:#555;font-family:'Space Grotesk',sans-serif}
.contact-info b{font-size:13px;font-weight:500;color:#e4e4e0}
.contact-info b a{color:#e4e4e0;transition:color .2s}
.contact-info b a:hover{color:#c8a96e}
.contact-info em{font-style:normal;font-size:11px;color:#666;line-height:1.5}
.contact form{display:grid;grid-template-columns:1fr 1fr;gap:28px 22px}
.contact label{font-size:8px;color:#666;text-transform:uppercase;letter-spacing:.16em}
.contact input,.contact textarea{display:block;width:100%;border:0;border-bottom:1px solid #2e2e2e;background:transparent;padding:14px 0 12px;outline:0;color:#e4e4e0;font-size:13px;margin-top:7px;transition:.2s;font-family:inherit}
.contact input:focus,.contact textarea:focus{border-color:#c8a96e}
.contact input::placeholder,.contact textarea::placeholder{color:#444}
.contact .wide{grid-column:1/-1}
.contact form .btn{width:max-content}
.contact small{align-self:center;font-size:10px;color:#666}

/* ─── MOUSE GLOW ─────────────────────────────────────────────────────── */
.glow-card{position:relative;overflow:hidden}
.glow-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(
    600px circle at var(--mx,50%) var(--my,50%),
    rgba(200,169,110,.10) 0%,
    rgba(200,169,110,.04) 30%,
    transparent 70%
  );
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
  z-index:0;
}
.glow-card:hover::before{opacity:1}
/* garante que conteúdo fique acima do glow */
.glow-card>*{position:relative;z-index:1}

/* ─── SCROLL REVEAL ──────────────────────────────────────────────────── */

[data-reveal]{
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .65s cubic-bezier(.22,1,.36,1),
              transform .65s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
[data-reveal="left"]{
  opacity: 0;
  transform: translateX(-48px);
  transition: opacity .75s cubic-bezier(.22,1,.36,1),
              transform .75s cubic-bezier(.22,1,.36,1);
}
[data-reveal="right"]{
  opacity: 0;
  transform: translateX(48px);
  transition: opacity .75s cubic-bezier(.22,1,.36,1),
              transform .75s cubic-bezier(.22,1,.36,1);
}
[data-reveal].is-visible,
[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible{
  opacity: 1;
  transform: translate(0, 0);
}
/* saindo pelo topo — desce de volta */
[data-reveal].exit-top{
  opacity: 0;
  transform: translateY(-28px);
  transition: opacity .45s cubic-bezier(.22,1,.36,1),
              transform .45s cubic-bezier(.22,1,.36,1);
}
[data-reveal="left"].exit-top{
  opacity: 0;
  transform: translateX(-48px);
  transition: opacity .45s cubic-bezier(.22,1,.36,1),
              transform .45s cubic-bezier(.22,1,.36,1);
}
[data-reveal="right"].exit-top{
  opacity: 0;
  transform: translateX(48px);
  transition: opacity .45s cubic-bezier(.22,1,.36,1),
              transform .45s cubic-bezier(.22,1,.36,1);
}

/* ─── FOOTER ────────────────────────────────────────────────────────── */
footer{background:#080808;color:#e4e4e0;padding:72px 0 0;border-top:1px solid rgba(255,255,255,.06)}

/* Topo: 3 colunas */
.footer-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1.4fr;
  gap:48px;
  padding-bottom:56px;
  align-items:center;
}

/* Coluna 1 — Marca */
.footer-brand img{
  width:160px;height:auto;
  display:block;margin-bottom:18px;
}
.footer-tagline{
  font-family:'Space Grotesk',sans-serif;
  font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:#c8a96e;
  margin-bottom:14px;
}
.footer-location{
  font-size:11px;color:#555;line-height:1.85;
}

/* Coluna 2 e 3 — título */
.footer-col-title{
  font-size:8px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:#444;
  margin-bottom:20px;
  font-family:'Space Grotesk',sans-serif;
}
.footer-col-title::before{content:'// ';color:#c8a96e}

/* Coluna 2 — Nav */
.footer-nav{
  display:flex;flex-direction:column;gap:2px;
}
.footer-nav a{
  display:inline-block;
  font-size:12px;color:#666;padding:5px 0;
  transition:color .2s,padding-left .2s;
}
.footer-nav a:hover{color:#e4e4e0;padding-left:6px}

/* Coluna 3 — Contatos */
.footer-contacts{display:flex;flex-direction:column;gap:14px}
.footer-contacts > *{display:flex;flex-direction:column;gap:3px}
.footer-contacts a{transition:color .2s}
.footer-contacts a:hover .fc-value{color:#c8a96e}
.fc-label{font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:#444;font-family:'Space Grotesk',sans-serif}
.fc-value{font-size:12px;color:#888;margin-top:1px}

/* Divisória */
.footer-divider{
  border:0;border-top:1px solid rgba(255,255,255,.05);
}

/* Rodapé inferior */
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 0 24px;gap:16px;flex-wrap:wrap;
}
.footer-copy{font-size:9px;letter-spacing:.1em;color:#333}
.footer-top-link{
  font-size:9px;text-transform:uppercase;letter-spacing:.14em;
  color:#444;transition:color .2s;
}
.footer-top-link:hover{color:#c8a96e}

/* formMsg */
#formMsg{display:block;margin-top:4px;font-size:11px;min-height:16px}

/* ─── RESPONSIVE 850px ──────────────────────────────────────────────── */
@media(max-width:850px){
  /* Navbar: logo esquerda, hamb direita — grid simples */
  header{
    height:64px;
    grid-template-columns:1fr auto;
    padding:0 5vw;
    gap:0;
  }
  .logo{justify-content:flex-start;grid-column:1}
  .logo img{width:160px;height:44px;object-position:left center}
  .nav-links{
    display:none;position:fixed;top:64px;left:0;right:0;
    background:#0d0d0d;padding:16px 6vw 24px;
    flex-direction:column;align-items:flex-start;gap:2px;
    border-bottom:1px solid #222;z-index:100;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 4px;width:100%;font-size:13px}
  .nav-cta{display:none}
  .hamb{display:flex;grid-column:2;flex-direction:column;justify-content:center;align-items:center;padding:8px}
  .nav-avatar{display:none !important}
  .nav-login-btn{display:none !important}

  /* Hero */
  .hero{grid-template-columns:1fr;padding:100px 5vw 70px;overflow:hidden}
  .hero h1{font-size:clamp(40px,12vw,68px);letter-spacing:-.05em}
  .hero-left>p{font-size:14px;max-width:100%}
  .hero-right{height:auto;margin-top:28px;overflow:hidden;width:100%}
  .eng-drawing{overflow:hidden;width:100%}
  .eng-drawing svg{max-width:100%;overflow:hidden}
  .spec-tag{display:none}

  /* Seções */
  .manifesto-grid,.capability,.contact-grid{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr 1fr}
  .metric-last{border-top:1px solid #2a2a2a}
  .cap-image{min-height:380px}
  .cap-copy{padding:70px 7vw}
  .section-top,.process-head{display:block}
  .section-top p,.process-head p{margin-top:20px}
  .solution-list article{grid-template-columns:35px 52px 1fr 28px;gap:16px}
  .timeline{grid-template-columns:1fr 1fr}
  .timeline>div{border-bottom:1px solid #222}
  .timeline>div:nth-child(2){border-right:0}

  /* Footer */
  .footer-top{grid-template-columns:1fr}
  .footer-nav{flex-direction:row;flex-wrap:wrap;gap:0}
  .footer-nav a{padding:4px 12px 4px 0}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ─── RESPONSIVE 520px ──────────────────────────────────────────────── */
@media(max-width:520px){
  .wrap{width:90vw}
  header{height:60px;padding:0 4vw}
  .logo img{width:140px;height:38px}
  .hero{padding:90px 4vw 60px;overflow:hidden}
  .hero h1{font-size:clamp(36px,10.5vw,56px);letter-spacing:-.04em}
  .hero-left>p{font-size:13px}
  .hero-right{overflow:hidden;width:100%}
  .eng-drawing{overflow:hidden;width:100%}
  .eng-drawing svg{overflow:hidden;width:100%}
  .hero-buttons{flex-direction:column;align-items:flex-start;gap:14px}
  .btn{gap:16px}
  .solution-list article{grid-template-columns:28px 1fr 26px;gap:12px}
  .sol-icon{display:none}
  .solution-list p{padding-right:5px}
  .solution-list h3{font-size:20px}
  .timeline{grid-template-columns:1fr}
  .timeline>div,.timeline>div+div{padding-left:0;border-right:0}
  .metrics{grid-template-columns:1fr}
  .metrics>div{border-right:0;border-bottom:1px solid #2a2a2a}
  .contact form{grid-template-columns:1fr}
  .contact .wide{grid-column:auto}
  .quote{padding:80px 0}
  .quote:after{display:none}
  .manifesto-copy .big{font-size:16px}
  .cap-image{min-height:280px}
  .cap-copy{padding:55px 5vw}
}