:root{
  --ink:#0B0F14;
  --orange:#C4511F;
  --paper:#F5EEE4;
  --grey:#6B6B6B;
  /* Stesso hue/saturazione dell'arancio del brand, solo più scuro:
     garantisce 4.5:1 su sfondo chiaro per le etichette piccole (WCAG AA),
     senza introdurre un nuovo colore nella palette. */
  --orange-text:#B24A1C;
  --ease:cubic-bezier(.3,0,.2,1);
  --transition-fast:.16s;
  --transition:.22s;
  --focus-ring:0 0 0 0.1875rem rgba(196,81,31,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper)}
a{color:inherit;text-decoration:none;cursor:pointer}
button{font:inherit;cursor:pointer}

.skip-link{position:absolute;left:-999px;top:0;background:var(--orange);color:#fff;padding:.75rem 1.25rem;font:600 .8rem/1 'Sora',sans-serif;z-index:1000;border-radius:0 0 .375rem 0}
.skip-link:focus{left:0}

:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.m-cta:focus-visible,.m-arrow:focus-visible,.m-nav-toggle:focus-visible,.m-options button:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:var(--focus-ring)}
.mc:focus-visible,.m-options a:focus-visible,.m-projects article:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

.mockup{font-family:'DM Sans',Arial,sans-serif;background:var(--paper);color:var(--ink);overflow:hidden}
.mockup *{box-sizing:border-box}

.m-top{display:block}
.m-hero{background:linear-gradient(90deg,rgba(0,7,4,.78),rgba(0,7,4,.2));color:#fff;position:relative;padding:1.125rem 5.8%;min-height:28rem}
.m-nav{display:flex;gap:1.5rem;align-items:flex-start}
.m-logo{display:flex;gap:0.5rem;width:13.75rem;color:#fff;font:600 0.75rem/1.04 Sora,sans-serif;letter-spacing:.14em}
.m-logo img{width:2.5rem;height:2.5rem;object-fit:cover}
.m-logo b{font-size:0.5625rem;letter-spacing:.28em}
.m-logo small{display:block;font-size:0.375rem;letter-spacing:.08em;margin-top:0.1875rem}
.m-nav-toggle{display:none;background:none;border:0;color:#fff;padding:.5rem;border-radius:.375rem;transition:background-color var(--transition-fast) var(--ease)}
.m-nav-toggle:hover{background:rgba(255,255,255,.12)}
.m-nav-toggle svg{width:1.5rem;height:1.5rem;display:block}
.m-nav nav{display:flex;gap:1.3125rem;flex:1;padding-top:0.5rem;font-size:0.625rem;white-space:nowrap}
.m-nav nav a{color:#fff;padding-bottom:0.4375rem;transition:opacity var(--transition-fast) var(--ease)}
.m-nav nav a:hover{opacity:.75}
.m-nav .on{border-bottom:0.125rem solid var(--orange)}
.m-cta{display:inline-block;background:var(--orange);color:#fff;padding:0.625rem 1.0625rem;border-radius:6.1875rem;font-weight:700;font-size:0.5625rem;white-space:nowrap;transition:filter var(--transition-fast) var(--ease),transform var(--transition-fast) var(--ease)}
.m-cta:hover{filter:brightness(1.1)}
.m-cta:active{transform:scale(.96)}
.m-hero-copy{max-width:24.375rem;margin-top:1.375rem}
.m-hero-copy>p,.m-services>p,.m-method p,.m-challenge p,.m-projects p,.m-bottom p{font:600 0.5625rem Sora,sans-serif;letter-spacing:.18em}
.m-hero-copy h1{font:800 3.75rem/.93 Sora,sans-serif;letter-spacing:-.03em;margin:0.625rem 0 0.1875rem}
.m-hero-copy h1 b,.m-services h2 b,.m-method h2 b,.m-projects h2 b{color:var(--orange)}
.m-hero-copy h2{font:400 1.5625rem/1 Sora,sans-serif;margin:0 0 1rem}
.m-hero-copy>div{font-size:0.875rem;line-height:1.28;max-width:21.0625rem}
.m-hero-copy .m-cta{margin-top:0.875rem}
.m-play{font-size:0.625rem;margin-left:1.25rem;color:#fff}
.m-note{position:absolute;right:7%;bottom:2.625rem;text-align:center;font:italic 1.5625rem/1.15 'Playfair Display',serif;transform:rotate(-12deg);color:#fff}
.m-services{padding:4.5rem 5.8% 5rem}
.m-services>p,.m-method>div>p,.m-projects>div>p,.m-bottom p{color:var(--orange-text)}
.m-services h2{font:700 2.125rem/1.1 Sora,sans-serif;letter-spacing:-.025em;margin:0.75rem 0 1.125rem;max-width:40rem}
.m-services>div{font-size:1.0625rem;line-height:1.5;color:var(--grey);max-width:38rem}
.m-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.75rem}
.mc{min-height:14rem;color:#fff;padding:1.25rem;padding-bottom:1.375rem;display:flex;align-items:flex-end;justify-content:space-between;font-size:0.9375rem;font-weight:700;line-height:1.3;border-radius:0.75rem;background-size:cover!important;position:relative;overflow:hidden;isolation:isolate;transition:transform var(--transition) var(--ease),box-shadow var(--transition) var(--ease)}
.mc:hover,.mc:focus-visible{transform:translateY(-0.1875rem);box-shadow:0 0.625rem 1.5rem rgba(11,15,20,.22)}
.mc::after{content:'';position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.78));z-index:-1}
.mc i{z-index:1;border:0.0625rem solid #fff;width:2.125rem;height:2.125rem;border-radius:50%;display:grid;place-items:center;font-style:normal;flex:none;font-size:1rem;transition:background-color var(--transition-fast) var(--ease),color var(--transition-fast) var(--ease)}
.mc:hover i{background:var(--orange);border-color:var(--orange)}
.m-ecosystem{min-height:3.5rem;background:var(--ink);color:#fff;display:flex;justify-content:center;align-items:center}
.m-ecosystem span{min-width:8.75rem;height:1.75rem;padding:0 0.875rem;border-right:0.0625rem solid rgba(255,255,255,.21);display:flex;gap:0.625rem;align-items:center}
.m-ecosystem span:last-child{border-right:0}
.m-ecosystem svg{width:1.25rem;height:1.25rem;flex:none;color:var(--orange)}
.m-ecosystem b{font-size:0.5rem;line-height:1.1;font-weight:600}
.m-method{display:grid;grid-template-columns:36% 64%;grid-template-areas:"copy steps" "quote quote";gap:3rem;padding:4.5rem 5.8% 0}
.m-method-copy{grid-area:copy;padding:0;max-width:26rem}
.m-method h2,.m-projects h2,.m-bottom h2{font:700 1.75rem/1.12 Sora,sans-serif;letter-spacing:-.025em;margin:0.5rem 0 0.75rem}
.m-method-copy>div{font-size:0.9375rem;line-height:1.5;max-width:24rem;color:var(--grey)}
.m-method a,.m-projects a{display:block;color:var(--orange-text);font-size:0.8125rem;font-weight:700;margin-top:1rem;transition:gap var(--transition-fast) var(--ease),opacity var(--transition-fast) var(--ease)}
.m-method a:hover,.m-projects a:hover{opacity:.72}
.m-method ol{grid-area:steps;position:relative;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin:0;padding:2.75rem 0 0.5rem;background:radial-gradient(ellipse at 70% -30%,#f2d4bd,transparent 48%)}
.m-method-line{position:absolute;top:0.875rem;left:0;right:0;width:100%;height:1.875rem;color:var(--orange);opacity:.55}
.m-method li{font-size:0.8125rem;line-height:1.35}
.m-method li svg{width:1.75rem;height:1.75rem;color:var(--orange);display:block;margin-bottom:0.75rem}
.m-method li>b{display:block;color:var(--orange);font:600 1.25rem Sora,sans-serif}
.m-method li strong{display:block;font-size:0.875rem;margin:0.3125rem 0 0.4375rem}
.m-method figure{grid-area:quote;position:relative;overflow:hidden;isolation:isolate;margin:2rem calc(-1 * 5.8%) 0;padding:3.5rem 5.8%;min-height:16rem;display:flex;flex-direction:column;justify-content:center;color:#fff}
.m-method figure::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.28))}
.m-method blockquote{margin:0;max-width:34rem;font:italic 1.625rem/1.3 'Playfair Display',serif}
.m-method figcaption{margin-top:1.25rem;border-top:0.125rem solid var(--orange);padding-top:0.5625rem;width:6.5rem;font:600 0.625rem Sora,sans-serif;letter-spacing:.16em}
.m-challenge{min-height:10.4375rem;padding:1.6875rem 6%;color:#fff;display:grid;grid-template-columns:27% 73%;gap:1.25rem}
.m-challenge h2{font:700 1.625rem/1 Sora,sans-serif;letter-spacing:-.07em;margin:0.375rem 0}
.m-challenge>div>span{font-size:0.5rem;color:rgba(255,255,255,.75)}
.m-options{display:grid;grid-template-columns:repeat(4,1fr);gap:0.625rem;align-content:center}
.m-options a{border:0.0625rem solid rgba(255,255,255,.25);background:rgba(7,9,8,.5);border-radius:0.375rem;padding:0.75rem;font-size:1.125rem;color:var(--orange);min-height:2.75rem;transition:transform var(--transition-fast) var(--ease),border-color var(--transition-fast) var(--ease),background-color var(--transition-fast) var(--ease)}
.m-options a:hover{transform:translateY(-0.125rem);border-color:var(--orange);background:rgba(7,9,8,.68)}
.m-options a i{font-style:normal;display:block}
.m-options b,.m-options small{display:block;font-size:0.5625rem;color:#fff}
.m-options small{font-weight:400;color:#ddd;margin-top:0.125rem;font-size:0.5rem}
.m-options button{grid-column:1/-1;justify-self:center;background:transparent;border:0.0625rem solid var(--orange);border-radius:6.1875rem;color:#fff;padding:0.5625rem 1.5625rem;font-size:0.5625rem;min-height:2.75rem;transition:background-color var(--transition-fast) var(--ease),transform var(--transition-fast) var(--ease)}
.m-options button:hover{background:var(--orange)}
.m-options button:active{transform:scale(.96)}
.m-projects{display:grid;grid-template-columns:60% 40%;min-height:11.875rem;align-items:center}
.m-projects>div{padding:1.6875rem 0 1.25rem 3.625rem}
.m-projects h2{font-size:1.5625rem}
.m-projects span{display:block;font-size:0.5625rem;line-height:1.25;max-width:17.5rem;color:var(--grey)}
.m-project-card{position:relative;display:flex;align-items:center;gap:0.625rem;padding-right:1.25rem;height:100%}
.m-projects article{position:relative;flex:1;height:72%;align-self:center;margin:0;border-radius:0.5rem;background-size:cover!important;color:#fff;overflow:hidden}
.m-projects article section{position:absolute;bottom:0.875rem;left:1.25rem}
.m-projects h3{font-size:0.8125rem;margin:0 0 0.3125rem}
.m-projects small{font-size:0.4375rem;background:rgba(0,0,0,.5);border-radius:0.25rem;padding:0.1875rem 0.3125rem;margin-right:0.25rem}
.m-arrow{flex:none;width:2.75rem;height:2.75rem;border-radius:50%;background:#fff;border:0.0625rem solid rgba(11,15,20,.14);display:grid;place-items:center;font-size:0.875rem;color:var(--ink);box-shadow:0 0.125rem 0.375rem rgba(11,15,20,.1);transition:transform var(--transition-fast) var(--ease),box-shadow var(--transition-fast) var(--ease),background-color var(--transition-fast) var(--ease)}
.m-arrow:hover{background:var(--orange);color:#fff;box-shadow:0 0.25rem 0.625rem rgba(11,15,20,.2)}
.m-arrow:active{transform:scale(.92)}
.m-bottom{display:grid;grid-template-columns:22% 20% 17% 18% 14% 18%;min-height:13.75rem}
.m-bottom>div{min-height:13.75rem}
.m-about,.m-stories{padding:1.125rem 1.3125rem}
.m-bottom h2{font-size:1.1875rem}
.m-bottom span{display:block;font-size:0.5625rem;line-height:1.24;margin-bottom:0.5rem;color:var(--grey)}
.m-about a,.m-stories a{display:inline-block;color:var(--orange-text);border:0.0625rem solid var(--orange);border-radius:6.1875rem;padding:0.5rem 0.8125rem;font-size:0.5625rem;margin-top:0.375rem;transition:background-color var(--transition-fast) var(--ease),color var(--transition-fast) var(--ease)}
.m-about a:hover,.m-stories a:hover{background:var(--orange);color:#fff}
.m-contact{padding:1.125rem 1.375rem;background:var(--ink);color:#fff}
.m-contact .m-cta{margin-top:0.5rem}
.m-contact span{color:rgba(255,255,255,.78)}
.m-contact small{display:block;margin-top:1.1875rem;color:#ddd;font-size:0.5rem}

@media(min-width:1051px){
  html{font-size:calc(100vw / 96)}
  .m-hero{min-height:34rem}
  .m-hero-copy h1{font-size:3.625rem}
  .m-hero-copy h2{font-size:1.5625rem}
  .m-challenge{min-height:10.4375rem}
}

@media(max-width:1050px){
  .m-nav{position:relative;flex-wrap:wrap}
  .m-logo{flex:1}
  .m-nav-toggle{display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;order:2}
  .m-cta{order:3}
  .m-nav nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:0.5rem 1.25rem 1rem;background:var(--ink);border-radius:0 0 0.5rem 0.5rem;box-shadow:0 0.75rem 1.5rem rgba(0,0,0,.3);z-index:30;order:4;white-space:normal}
  .m-nav nav.is-open{display:flex}
  .m-nav nav a{padding:0.875rem 0;min-height:2.75rem;display:flex;align-items:center;border-bottom:0.0625rem solid rgba(255,255,255,.12)}
  .m-nav nav a:last-child{border-bottom:0}
  .m-method{grid-template-columns:38% 62%}
  .m-bottom{grid-template-columns:28% 24% 20% 28%}
  .m-tomatoes,.m-valley{display:none}
}

@media(max-width:680px){
  .m-projects,.m-bottom,.m-challenge{grid-template-columns:1fr}
  .m-method{grid-template-columns:1fr;grid-template-areas:"copy" "steps" "quote";gap:0;padding:0}
  .m-hero{min-height:35rem;padding:1.125rem 1.25rem}
  .m-nav{align-items:center}
  .m-logo{width:auto}
  .m-hero-copy{margin-top:4.25rem}
  .m-hero-copy h1{font-size:2.75rem}
  .m-hero-copy>div{max-width:18.125rem}
  .m-note{display:none}
  .m-services{padding:3rem 1.25rem 3.5rem}
  .m-services h2{font-size:1.75rem}
  .m-cards{grid-template-columns:repeat(2,1fr);gap:0.875rem}
  .mc{min-height:9.5rem;padding:0.875rem;font-size:0.75rem}
  .m-ecosystem{min-height:auto;display:grid;grid-template-columns:1fr 1fr;padding:0.75rem}
  .m-ecosystem span{border:0;min-width:0;font-size:1rem}
  .m-method-copy,.m-projects>div{padding:2rem 1.25rem}
  .m-method ol{padding:2.1875rem 1.25rem;grid-template-columns:1fr 1fr;gap:1.25rem}
  .m-method li{min-height:5.75rem}
  .m-method figure{margin:2rem 0 0;padding:2.5rem 1.25rem;min-height:13rem}
  .m-method blockquote{font-size:1.25rem}
  .m-challenge{padding:2rem 1.25rem}
  .m-options{margin-top:1.25rem;grid-template-columns:1fr 1fr}
  .m-projects article{height:14.375rem;margin:0 1.25rem 1.5625rem}
  .m-bottom>div{min-height:12.5rem}
  .m-shepherd,.m-tomatoes,.m-valley{display:block!important;min-height:15.625rem!important}
  .m-about,.m-stories,.m-contact{padding:2.1875rem 1.25rem}
}