/* Final framing and readability pass for desktop, laptop and wide displays. */
:root{--page-max:1760px;--page-edge:clamp(24px,3.25vw,58px)}
body{background:#020405;font-size:15px}
header,main,footer{width:min(100%,var(--page-max));margin-inline:auto}
header{padding-inline:var(--page-edge);box-shadow:0 14px 34px rgba(0,0,0,.25)}
main{background:#060a0c;box-shadow:0 0 70px rgba(0,0,0,.72)}
footer{background:#05090b;padding-inline:var(--page-edge)}
.footer-brand,.footer-line{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.ui-icon{display:inline-block;flex:0 0 auto;width:1.45em;height:1.45em;background:var(--g);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.ui-globe{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E")}
.ui-project{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M8 12h8M5 8l-3 4 3 4M19 8l3 4-3 4'/%3E%3Ccircle cx='9' cy='12' r='2.5'/%3E%3Ccircle cx='15' cy='12' r='2.5'/%3E%3C/svg%3E")}
.ui-chart{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M4 20V11h4v9M10 20V6h4v14M16 20V3h4v17M2 20h20'/%3E%3C/svg%3E")}
.ui-relations{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Ccircle cx='16' cy='8' r='3'/%3E%3Cpath d='M2.5 20v-2a5.5 5.5 0 0 1 9.5-3.8A5.5 5.5 0 0 1 21.5 18v2M12 14.2V20'/%3E%3C/svg%3E")}
.ui-target{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='11' cy='13' r='8'/%3E%3Ccircle cx='11' cy='13' r='4'/%3E%3Cpath d='m14 10 7-7M16 3h5v5'/%3E%3C/svg%3E")}
.ui-process{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19 12a7 7 0 0 0-.1-1l2-1.5-2-3.4-2.4 1A7 7 0 0 0 15 6.2L14.7 4h-5.4L9 6.2a7 7 0 0 0-1.5.9l-2.4-1-2 3.4 2 1.5a7 7 0 0 0 0 2l-2 1.5 2 3.4 2.4-1a7 7 0 0 0 1.5.9l.3 2.2h5.4l.3-2.2a7 7 0 0 0 1.5-.9l2.4 1 2-3.4-2-1.5c.1-.3.1-.7.1-1Z'/%3E%3C/svg%3E")}
.ui-briefcase{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 12h18M10 12v2h4v-2'/%3E%3C/svg%3E")}
.ui-growth{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M4 19V9M10 19v-6M16 19V8M3 20h18M5 13l5-5 4 3 6-7M15 4h5v5'/%3E%3C/svg%3E")}
.mini>span{display:inline-flex;align-items:center;gap:8px}
.mini b{font:inherit;color:inherit}
.mini .ui-icon{width:18px;height:18px}
.metric-icon.ui-icon{width:38px;height:38px}
.skill-group{flex:none}
.skill-row span:before{content:'';width:7px;height:7px;flex:0 0 auto;border:1px solid var(--g);transform:rotate(45deg);margin-right:10px}
.contact address a{display:flex;align-items:center;gap:10px}
.contact-symbol{display:inline-grid;place-items:center;min-width:28px;height:22px;border:1px solid rgba(229,172,77,.7);border-radius:3px;color:var(--g);font:700 8px/1 Inter,Arial;font-style:normal;letter-spacing:.02em}
.forma-wordmark{display:flex;flex-direction:column;align-items:flex-start;gap:1px;color:#fff;line-height:.86;letter-spacing:.08em}
.forma-wordmark span{font-size:20px;font-weight:800}
.forma-wordmark small{font-size:8px;font-weight:700;letter-spacing:.22em;color:#fff}

@media(min-width:801px){
  header{height:72px;gap:clamp(18px,2vw,34px)}
  .brand{font-size:19px;letter-spacing:-.4px}
  nav{gap:clamp(18px,2.15vw,38px);font-size:11px}
  .languages button{font-size:11px;padding:5px}
  .header-cta{font-size:10px;padding:10px 18px}

  .hero{min-height:clamp(570px,66vh,690px);padding:clamp(48px,5vh,66px) var(--page-edge) 108px;background:radial-gradient(circle at 28% 38%,#202522,transparent 31%),#060a0c}
  .hero-copy{width:49%;max-width:760px}
  .eyebrow,.label{font-size:13px;letter-spacing:.025em}
  h1{font-size:clamp(62px,5vw,84px);line-height:.86;letter-spacing:-3.5px;margin:22px 0 12px}
  .hero h2{font-size:clamp(24px,1.7vw,30px);letter-spacing:-.02em}
  .tags{font-size:clamp(13px,.86vw,15px);line-height:1.5}
  .intro{font-size:clamp(15px,1vw,18px);line-height:1.62;max-width:690px}
  .actions{gap:16px;margin-top:26px}
  .actions a{padding:14px 25px;font-size:12px}
  .hero-photo{inset:0 0 0 47%;background:#080c0e}
  .hero-photo img{object-fit:cover;object-position:50% 28%;filter:grayscale(1) contrast(1.04)}
  .hero:after{background:linear-gradient(90deg,#060a0c 0 35%,rgba(6,10,12,.92) 43%,rgba(6,10,12,.08) 63%,rgba(6,10,12,.64) 100%)}
  .hero-features{left:var(--page-edge);right:var(--page-edge);bottom:25px;gap:26px}
  .hero-features span{font-size:27px}
  .hero-features small{font-size:12px;line-height:1.35}

  .about{grid-template-columns:42% 58%;height:430px}
  .about-photo{height:430px;background:rgba(4,8,10,.6)}
  .about-photo img{object-fit:cover;object-position:50% 34%;filter:grayscale(1) contrast(1.04)}
  .about:before{background-image:none;filter:none;transform:none;opacity:0}
  .about:after{background:linear-gradient(90deg,rgba(3,7,8,.04) 0 35%,rgba(3,7,8,.84) 48%,rgba(3,7,8,.98) 100%)}
  .about-copy{padding:clamp(28px,3vw,52px) clamp(34px,4vw,70px);display:flex;flex-direction:column;justify-content:center}
  .about h2{font-size:clamp(28px,2.15vw,38px);line-height:1.18;max-width:820px;margin:15px 0 12px}
  .about-copy>p{font-size:clamp(15px,.96vw,17px);line-height:1.62;max-width:810px}
  .signature{font-size:clamp(44px,3.6vw,62px)!important;margin:18px 0 9px!important}
  .mini{gap:clamp(15px,1.6vw,28px);font-size:13px;margin-top:24px}

  .title{padding:13px var(--page-edge);gap:38px}
  .title b{font-size:21px}
  .title span{font-size:13px;letter-spacing:.025em}
  .result-grid{padding:8px var(--page-edge) 20px}
  .result-grid article{grid-template-columns:52px auto;padding:14px clamp(14px,1.7vw,30px);font-size:29px}
  .result-grid strong{font-size:clamp(28px,2vw,36px)}
  .result-grid span{font-size:13px;line-height:1.4}
  .metric-icon{font-size:38px}

  .cards{gap:12px;padding:5px var(--page-edge) 18px}
  .company-card{min-height:244px!important;padding:15px 17px!important}
  .cards time{font-size:11px}
  .cards h3{font-size:19px;line-height:1.15;margin:13px 0 7px}
  .cards h3 small{font-size:12px}
  .cards p{font-size:12px;line-height:1.35}
  .vasconi-name{font-size:23px!important}

  .skills{padding-bottom:18px}
  .skill-row span{font-size:12px;min-height:60px;flex-basis:clamp(190px,13vw,235px)}
  .contact{grid-template-columns:minmax(360px,1.25fr) minmax(300px,.9fr) auto;padding:30px var(--page-edge);gap:clamp(34px,5vw,90px)}
  .contact>div:first-child{min-width:0}
  .contact .actions{flex-wrap:wrap}
  .contact h2{font-size:20px}
  .contact p,.contact address{font-size:13px;line-height:1.5}
  .qr img{width:104px;height:104px}
  footer{font-size:10px;padding-top:19px;padding-bottom:19px}
}

@media(min-width:801px) and (max-width:1100px){
  .contact{grid-template-columns:1.15fr 1fr;gap:34px}
  .contact>div:first-of-type{grid-column:1}
  .contact address{grid-column:2}
  .contact .qr{grid-column:1/-1;justify-items:center;margin-top:4px}
}

@media(min-width:801px) and (max-width:1279px){
  :root{--page-edge:28px}
  body{font-size:14px}
  header{height:66px}
  nav{gap:16px;font-size:9px}
  .hero{min-height:560px;padding-top:44px}
  .hero-copy{width:53%}
  h1{font-size:clamp(57px,6.2vw,72px)}
  .hero h2{font-size:22px}
  .intro{font-size:15px}
  .hero-photo{left:48%}
  .hero-features small{font-size:10px}
  .about{height:400px;grid-template-columns:40% 60%}
  .about-photo{height:400px}
  .about-copy{padding:26px 34px}
  .about h2{font-size:28px}
  .about-copy>p{font-size:14px}
  .mini{font-size:11px}
  .cards{grid-template-columns:repeat(3,1fr)}
  .company-card{min-height:230px!important}
}

@media(min-width:1761px){
  header,main,footer{border-left:1px solid rgba(229,172,77,.16);border-right:1px solid rgba(229,172,77,.16)}
}

@media(max-width:800px){
  body{font-size:14px}
  header,main,footer{width:100%}
  .hero-photo{background:#080c0e}
  .hero-photo img{object-fit:cover;object-position:50% 24%;filter:grayscale(1) contrast(1.03)}
  .about:before{background-image:none;opacity:0}
  .about-photo img{object-fit:cover;object-position:50% 32%;filter:grayscale(1) contrast(1.03)}
  .intro{font-size:14px}
  .about-copy>p{font-size:14px}
  .cards p{font-size:12px;line-height:1.42}
  .hero-features .ui-icon{width:24px;height:24px}
  .result-grid article{grid-template-columns:46px minmax(125px,auto) 1fr;align-items:center}
  .result-grid strong{font-size:27px}
  .result-grid span{grid-column:3;font-size:11px;line-height:1.35}
  footer{padding:18px 20px;line-height:1.45}
  .footer-brand,.footer-line{white-space:normal}
  .company-link:after{display:none}
  .company-link,.company-card,.company-card:before{transform:none!important}
  .company-card{min-height:220px!important;background-color:#071014!important}
  .logo-mark img{width:min(165px,78%);max-height:48px}
  .forma-wordmark span{font-size:23px}
  .forma-wordmark small{font-size:9px}
}

@media(max-width:480px){
  .hero{padding-top:315px;min-height:770px}
  .hero-photo{height:330px}
  h1{font-size:clamp(43px,14vw,54px);letter-spacing:-2.5px}
  .hero h2{font-size:16px;line-height:1.25}
  .tags{font-size:11px;line-height:1.55}
  .actions{gap:9px}
  .actions a{padding:11px 15px;font-size:10px}
  .hero-features{gap:12px}
  .hero-features small{font-size:9px}
  .result-grid article{grid-template-columns:38px 96px 1fr;padding:10px 4px}
  .metric-icon.ui-icon{width:31px;height:31px}
  .result-grid strong{font-size:22px}
  .result-grid span{font-size:10px}
  .mini{gap:12px}
  .mini>span{flex-basis:calc(50% - 6px);font-size:10px}
  .contact-symbol{min-width:26px}
}