:root{
--bg:#f4f3ee;--paper:#faf9f5;--ink:#11120f;--muted:#686963;--line:#d8d7d0;
--brand:#575552;--accent:#eff31f;--accent-dark:#aab000;--dark:#171a17;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:"DM Sans",Arial,sans-serif;line-height:1.45}a{color:inherit;text-decoration:none}
.container{width:min(1160px,calc(100% - 64px));margin-inline:auto}.site-header{height:94px;background:var(--brand);color:#fff;position:sticky;top:0;z-index:30;border-bottom:1px solid rgba(255,255,255,.1)}
.nav{height:94px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;font-weight:700}.brand img{width:42px;height:42px;object-fit:contain}.brand>span{font-size:20px;letter-spacing:.08em;line-height:.9}.brand small{display:block;font-size:7px;letter-spacing:.28em;margin-top:5px}.desktop-nav{display:flex;gap:42px;margin-left:auto;margin-right:70px}.desktop-nav a{font-size:15px}.desktop-nav a:hover{opacity:.65}.nav-cta,.btn{border:0;border-radius:999px;font-weight:700}.nav-cta{background:var(--accent);color:var(--ink);padding:17px 27px;font-size:15px}.nav-cta b{margin-left:8px}.menu-btn,.mobile-menu{display:none}

.hero{padding:60px 0 0}.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);column-gap:60px;align-items:start}.eyebrow{font-size:11px;letter-spacing:.16em;font-weight:700;color:#60625d;margin:0 0 24px}.yellow{color:var(--accent)}.hero h1{font-size:clamp(54px,5.8vw,82px);line-height:.97;letter-spacing:-.06em;margin:0;max-width:690px}.hero h1 em,.about h2 em{font-style:normal;color:var(--accent-dark)}.hero-lede{font-size:20px;line-height:1.45;color:var(--muted);max-width:670px;margin:30px 0}.actions{display:flex;align-items:center;gap:30px}.btn{display:inline-flex;align-items:center;gap:12px;padding:16px 23px}.btn.dark{background:var(--brand);color:#fff}.link{font-size:14px;font-weight:700}.link:hover{opacity:.62}

.roadmap{background:#deded8;border-radius:26px;padding:27px 27px 22px;min-height:425px;box-shadow:0 18px 45px rgba(35,38,33,.08)}.roadmap-head{display:flex;justify-content:space-between;font-size:14px;margin-bottom:24px}.roadmap-head span{font-size:13px;color:#758000}.roadmap-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.roadmap-columns label{font-size:10px;letter-spacing:.14em;color:#73766e}.road-item{background:#faf9f5;border:1px solid #e6e5de;border-radius:11px;padding:13px 11px;margin-top:9px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.road-item:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#c9cbc3;margin-right:7px}.road-item.active:before{background:#b4bd00}.metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px;border-top:1px solid #c9c9c2;padding-top:18px}.metric-row>div{position:relative;padding:0 10px}.metric-row>div+div{border-left:1px solid #c9c9c2}.metric-row span{display:block;font-size:15px;margin-bottom:7px;color:#7b8200}.metric-row small{font-size:8px;letter-spacing:.11em;color:#666961;display:block}.metric-row strong{font-size:25px;display:block;line-height:1.05;margin-top:5px}.metric-row p{font-size:9px;color:#777a73;margin:5px 0 0}

.principles{width:100%;grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);margin-top:42px;padding-bottom:48px}.principles>div{display:flex;gap:14px;align-items:flex-start;padding-right:20px}.principles>div+div{border-left:1px solid var(--line);padding-left:25px}.principles i{font-style:normal;color:#adb400;font-size:25px;line-height:1}.principles strong{font-size:15px}.principles p{font-size:12px;color:var(--muted);margin:4px 0 0;max-width:145px}

.experience-strip{background:#30332f;color:#fff;padding:48px 0 58px}.project-grid{display:grid;grid-template-columns:1.15fr .925fr .925fr;gap:18px}.project-card{background:#41443f;border-radius:15px;overflow:hidden;border:1px solid #555852}.project-visual{height:190px;position:relative;overflow:hidden}.project-visual>span{position:absolute;left:18px;top:17px;font-weight:700;letter-spacing:.08em;font-size:12px;z-index:2}.livelox{background:linear-gradient(135deg,#202521,#5c6a5b)}.fake-map{position:absolute;inset:45px 20px 0;background:repeating-linear-gradient(135deg,transparent 0 17px,rgba(240,243,31,.25) 18px 20px);border:1px solid rgba(255,255,255,.15);border-radius:8px}.eoc{background:linear-gradient(135deg,#24332a,#788f72)}.italy{background:linear-gradient(135deg,#33483d,#b3c3a2)}.project-body{padding:21px}.project-body h3{font-size:20px;line-height:1.1;margin:0 0 7px;letter-spacing:-.025em}.project-body p{font-size:12px;color:#c4c8c1;margin:7px 0}.project-body .tag{color:var(--accent);font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}.project-body a{display:inline-block;color:var(--accent);font-size:12px;font-weight:700;margin-top:10px}.stats{display:flex;gap:30px;margin-top:22px}.stats b{display:block;font-size:23px}.stats small{display:block;font-size:9px;color:#b8bdb6}

.services{padding:88px 0;background:var(--bg)}.section-head{max-width:760px;margin-bottom:45px}.section-head h2{font-size:clamp(38px,4.2vw,56px);line-height:1.03;letter-spacing:-.05em;margin:0}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.service-grid article{padding:0 34px 0 0}.service-grid article+article{border-left:1px solid var(--line);padding-left:34px}.service-icon{font-size:29px;color:#b1b800;height:42px}.service-grid h3{font-size:22px;margin:18px 0 8px}.service-grid p{font-size:13px;color:var(--muted);max-width:320px}.service-grid ul{list-style:none;padding:0;margin:18px 0 0}.service-grid li{font-size:12px;padding:5px 0}.service-grid li:before{content:"•";color:#aab100;margin-right:8px}

.about{display:grid;grid-template-columns:280px 1fr 310px;gap:48px;align-items:center;padding-top:20px;padding-bottom:80px}.about-photo{background:#deddd7;border-radius:20px;height:355px;overflow:hidden;display:flex;align-items:flex-end;justify-content:center}.about-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;mix-blend-mode:multiply}.about-main h2{font-size:clamp(34px,3.4vw,49px);line-height:1.02;letter-spacing:-.045em;margin:0 0 22px}.about-main p{font-size:13px;color:var(--muted);max-width:510px;margin:8px 0}.about-points>div{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}.about-points i{font-style:normal;color:#b0b600;font-size:25px}.about-points strong{font-size:13px}.about-points p{font-size:13px;color:var(--muted);margin:4px 0}

.cta{background:var(--accent);border-radius:18px;display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;padding:24px 32px;margin-bottom:70px}.cta strong{font-size:24px;letter-spacing:-.03em}.cta p{font-size:12px;margin:0}.footer{background:var(--brand);color:#eee;padding:30px 0}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}.footer .brand>span{font-size:16px}.footer .brand img{width:36px;height:36px}.footer-inner>span,.footer-inner>a:last-child{font-size:13px;color:#d1d0cb}

@media(max-width:980px){
.container{width:min(100% - 42px,760px)}.desktop-nav{margin-right:25px}.hero-grid{grid-template-columns:1fr;gap:38px}.hero h1{max-width:760px}.roadmap{max-width:760px}.principles{margin-top:35px}.project-grid{grid-template-columns:1fr 1fr}.project-card.featured{grid-column:1/-1}.service-grid{grid-template-columns:1fr}.service-grid article{padding:0 0 30px}.service-grid article+article{border-left:0;border-top:1px solid var(--line);padding:30px 0 0}.about{grid-template-columns:230px 1fr}.about-points{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.about-points>div{border-bottom:0}.cta{grid-template-columns:1fr auto}
}
@media(max-width:680px){
.container{width:calc(100% - 30px)}.site-header,.nav{height:76px}.desktop-nav,.nav-cta{display:none}.nav{padding:0}.brand img{width:36px;height:36px}.brand>span{font-size:17px}.menu-btn{display:flex;flex-direction:column;gap:5px;background:transparent;border:0;padding:10px}.menu-btn span{display:block;width:24px;height:2px;background:#fff}.mobile-menu{display:flex;max-height:0;overflow:hidden;flex-direction:column;background:var(--brand);transition:max-height .25s ease}.mobile-menu.open{max-height:300px;padding:8px 15px 20px}.mobile-menu a{padding:13px 0;border-top:1px solid rgba(255,255,255,.12);font-size:14px}.mobile-menu a:last-child{color:var(--accent);font-weight:700}
.hero{padding-top:38px}.hero-grid{gap:28px}.eyebrow{font-size:9px;margin-bottom:17px}.hero h1{font-size:43px;line-height:.99}.hero-lede{font-size:16px;margin:22px 0}.actions{gap:18px;flex-wrap:wrap}.btn{padding:13px 18px;font-size:13px}.roadmap{padding:20px 17px;min-height:0;border-radius:20px}.roadmap-head{font-size:12px;margin-bottom:19px}.roadmap-columns{grid-template-columns:1fr;gap:13px}.roadmap-columns>div{display:grid;grid-template-columns:60px 1fr;gap:7px;align-items:center}.roadmap-columns label{grid-row:1/4}.road-item{margin-top:0;padding:10px;font-size:10px}.metric-row{grid-template-columns:1fr 1fr;gap:0;margin-top:18px;padding-top:15px}.metric-row>div{padding:8px 9px}.metric-row>div+div{border-left:0}.metric-row>div:last-child{grid-column:1/-1;border-top:1px solid #c9c9c2;margin-top:7px;padding-top:13px}.metric-row strong{font-size:21px}.principles{grid-template-columns:1fr 1fr;margin-top:5px;padding-bottom:30px;gap:0}.principles>div{padding:13px 8px 13px 0}.principles>div+div{padding-left:14px}.principles>div:nth-child(3){border-left:0;padding-left:0;border-top:1px solid var(--line)}.principles>div:nth-child(4){border-top:1px solid var(--line)}.principles i{font-size:21px}.principles strong{font-size:13px}.principles p{font-size:10px}.experience-strip{padding:35px 0 40px}.project-grid{grid-template-columns:1fr}.project-card.featured{grid-column:auto}.project-visual{height:155px}.project-body{padding:18px}.stats{gap:20px}.stats b{font-size:20px}.services{padding:65px 0}.section-head h2{font-size:38px}.service-grid h3{font-size:20px}.about{grid-template-columns:1fr;gap:28px;padding-bottom:55px}.about-photo{height:330px;max-width:330px}.about-main h2{font-size:38px}.about-points{grid-template-columns:1fr;gap:0}.about-points>div{border-bottom:1px solid var(--line);padding:13px 0}.cta{grid-template-columns:1fr;gap:12px;padding:22px 20px;margin-bottom:45px}.cta strong{font-size:22px}.cta .btn{justify-self:start}.footer-inner{align-items:flex-start;flex-direction:column;gap:15px}
}

html,body{max-width:100%;overflow-x:hidden}
.hero-grid>*,.project-grid>*,.service-grid>*,.about>*{min-width:0}
.hero-grid,.roadmap,.roadmap-columns,.metric-row{min-width:0}
.roadmap{width:100%}
.road-item{min-width:0}
img{max-width:100%}
@media(max-width:680px){
.container{width:calc(100% - 28px);max-width:none}
.nav{width:100%;padding:0 14px}
.hero{padding:32px 0 0}
.hero-grid{width:calc(100% - 28px);margin:auto;grid-template-columns:minmax(0,1fr);gap:26px}
.hero h1{font-size:clamp(39px,11.5vw,48px);max-width:100%}
.hero-lede{font-size:15px;max-width:100%}
.roadmap{padding:18px 15px 16px;border-radius:18px}
.roadmap-columns{display:flex;flex-direction:column;gap:10px}
.roadmap-columns>div{display:grid;grid-template-columns:54px minmax(0,1fr);grid-template-rows:repeat(3,minmax(0,auto));gap:7px}
.roadmap-columns label{grid-column:1;grid-row:1 / span 3;padding-top:9px}
.road-item{grid-column:2;width:100%;margin:0;padding:9px;font-size:10px}
.metric-row{grid-template-columns:1fr 1fr;margin-top:16px;padding-top:13px}
.metric-row>div{padding:7px 8px}
.metric-row>div:last-child{grid-column:1/-1}
.metric-row strong{font-size:20px}
.principles{width:100%;margin-top:2px;padding-bottom:28px}
.principles>div{min-width:0;padding:12px 8px 12px 0}
.principles>div+div{padding-left:12px}
.experience-strip .container,.services .container,.about,.cta{width:calc(100% - 28px)}
.project-card,.service-grid article,.about-main,.about-points{min-width:0}
.about-main h2{font-size:36px}
}
@media(max-width:390px){
.container,.experience-strip .container,.services .container,.about,.cta{width:calc(100% - 24px)}
.hero-grid{width:calc(100% - 24px)}
.hero h1{font-size:39px}
.hero-lede{font-size:14px}
.btn{padding:12px 16px}.link{font-size:13px}
.roadmap-columns>div{grid-template-columns:49px minmax(0,1fr)}
.road-item{font-size:9px;padding:8px}
.metric-row small{font-size:7px}.metric-row strong{font-size:18px}
.principles i{font-size:18px}.principles strong{font-size:12px}.principles p{font-size:9px}
}

/* V7 — make the logo a deliberate hero object, not a faded watermark */
.roadmap{position:relative;overflow:visible}
.brand-badge{
  position:absolute;
  right:-42px;
  bottom:-42px;
  width:154px;
  height:154px;
  border-radius:50%;
  background:#56534f;
  border:8px solid var(--bg);
  box-shadow:0 18px 38px rgba(25,27,24,.20);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:4;
  transform:rotate(-5deg);
}
.brand-badge-ring{
  position:absolute;
  inset:9px;
  border:1px solid rgba(239,243,31,.7);
  border-radius:50%;
}
.brand-badge img{
  width:105px;
  height:87px;
  object-fit:contain;
  opacity:1;
  position:relative;
  top:-5px;
}
.brand-badge>span{
  position:absolute;
  left:50%;
  bottom:15px;
  transform:translateX(-50%);
  color:var(--accent);
  font-weight:700;
  letter-spacing:.12em;
  font-size:9px;
  text-align:center;
  line-height:1;
}
.brand-badge small{
  color:#fff;
  font-size:5px;
  letter-spacing:.28em;
  display:block;
  margin-top:4px;
}
@media(max-width:680px){
  .roadmap{overflow:hidden}
  .brand-badge{
    width:102px;height:102px;
    right:10px;bottom:10px;
    border-width:5px;
    transform:rotate(-4deg);
  }
  .brand-badge-ring{inset:7px}
  .brand-badge img{width:68px;height:56px;top:-3px}
  .brand-badge>span{bottom:10px;font-size:6px}
  .brand-badge small{font-size:4px;margin-top:2px}
}

/* V8 — hero logo as a large brand composition, not a badge */
.brand-badge{display:none!important}
.roadmap{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.hero-logo-art{
  position:absolute;
  z-index:-1;
  width:470px;
  height:470px;
  right:-145px;
  bottom:-150px;
  transform:rotate(-7deg);
  pointer-events:none;
}
.hero-logo-art img{
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:.92;
  filter:drop-shadow(0 20px 30px rgba(17,18,15,.12));
}
.roadmap-head,.roadmap-columns,.metric-row{position:relative;z-index:2}
.roadmap:after{
  content:"";
  position:absolute;
  width:260px;height:260px;
  right:-90px;bottom:-100px;
  border-radius:50%;
  background:var(--accent);
  opacity:.15;
  z-index:0;
}
@media(max-width:680px){
  .hero-logo-art{
    width:270px;height:270px;
    right:-90px;bottom:-70px;
    opacity:.62;
  }
  .roadmap:after{width:170px;height:170px;right:-65px;bottom:-65px}
}

/* V9 — the wolf belongs to the hero, not the product UI */
.hero-grid{position:relative}
.hero-brand-art{
  position:absolute;
  left:39%;
  top:42%;
  width:min(330px,31vw);
  aspect-ratio:1;
  z-index:0;
  pointer-events:none;
  transform:translate(-50%,-50%) rotate(-5deg);
}
.hero-copy,.roadmap,.principles{position:relative;z-index:2}
.hero-brand-art .brand-art-circle{
  position:absolute;
  inset:9%;
  border-radius:50%;
  background:rgba(87,85,82,.10);
}
.hero-brand-art .brand-art-glow{
  position:absolute;
  width:75%;
  height:75%;
  left:12%;
  top:12%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(239,243,31,.28) 0%,rgba(239,243,31,.08) 45%,rgba(239,243,31,0) 72%);
  filter:blur(10px);
}
.hero-brand-art img{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:.92;
  filter:drop-shadow(0 20px 24px rgba(20,22,20,.10));
}
.hero-brand-art .brand-art-word{
  position:absolute;
  left:50%;
  bottom:7%;
  transform:translateX(-50%);
  font-weight:700;
  letter-spacing:.14em;
  color:var(--ink);
  font-size:13px;
  white-space:nowrap;
  text-align:center;
}
.hero-brand-art .brand-art-word small{
  display:block;
  font-size:6px;
  letter-spacing:.30em;
  margin-top:5px;
}
@media(min-width:981px){
  .hero-copy{z-index:3}
  .hero-brand-art{left:49%;top:48%;width:360px;opacity:.28}
  .roadmap{z-index:4}
}
@media(max-width:980px){
  .hero-brand-art{
    left:50%;
    top:45%;
    width:300px;
    opacity:.16;
  }
}
@media(max-width:680px){
  .hero-brand-art{
    position:absolute;
    left:auto;
    right:-45px;
    top:18%;
    width:220px;
    transform:rotate(-5deg);
    opacity:.11;
  }
  .hero-brand-art .brand-art-word{font-size:9px}
  .hero-brand-art .brand-art-word small{font-size:4px}
}

/* V10 — full-page hero wolf + replaceable project images */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero-wolf-bg{position:absolute;z-index:-1;left:13%;top:-30px;width:min(780px,55vw);opacity:.105;pointer-events:none;transform:rotate(-4deg)}
.hero-wolf-bg img{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(25,28,24,.08))}
.hero-grid{position:relative;z-index:1}
.roadmap{position:relative;z-index:3}
.project-visual{background:#dfe1da;overflow:hidden}
.project-visual img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:980px){
  .hero-wolf-bg{left:7%;top:70px;width:620px;opacity:.075}
}
@media(max-width:680px){
  .hero-wolf-bg{left:-75px;top:80px;width:390px;opacity:.07}
}

/* V11 — coherent Scalet SVG icon system */
.icon svg,
.service-icon svg,
.about-icon svg,
.metric-icon svg{
  display:block;
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.icon-process{
  font-style:normal;
  color:#aeb600;
  width:42px;
  min-width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.principles>div{gap:18px}
.service-icon{
  width:38px;
  height:38px;
  color:#aeb600;
  margin-bottom:4px;
}
.metric-icon{
  display:block;
  width:25px;
  height:25px;
  color:#aeb600;
  margin-bottom:9px;
}
.about-icon{
  font-style:normal;
  width:29px;
  min-width:29px;
  height:29px;
  color:#aeb600;
  display:block;
}
.about-points>div{gap:14px}

@media(max-width:680px){
  .icon-process{width:34px;min-width:34px;height:34px}
  .principles>div{gap:12px}
  .service-icon{width:34px;height:34px}
  .metric-icon{width:22px;height:22px}
  .about-icon{width:27px;min-width:27px;height:27px}
}
@media(max-width:390px){
  .icon-process{width:31px;min-width:31px;height:31px}
  .service-icon{width:32px;height:32px}
  .metric-icon{width:20px;height:20px}
}