/* RF Engineering — rfengineering.tech */

@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/space-grotesk-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/space-grotesk-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#F3F2EF;--bg2:#E8E6E1;--ink:#45474B;--mut:#62615F;--accent:#A3233A;--accent-text:#A3233A;--accent-surface:#A3233A;--white:#F3F2EF;--on-dark:#F3A5B1;
  --line:rgba(69,71,75,.18);--gut:18px;--hd:60px;
  --ease:cubic-bezier(.7,0,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--hd);scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 16px/1.55 "Space Grotesk",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ink{fill:var(--ink)}.accent{fill:var(--accent)}
.skip{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--ink);color:var(--white);padding:10px 14px;text-decoration:none}
.skip:focus{left:8px}
.label{font-size:11.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--mut)}

/* ---------- header ---------- */
.hd{position:fixed;inset:0 0 auto;z-index:20;height:var(--hd);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gut);transition:background .4s,box-shadow .4s}
.hd::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.2px;background-image:repeating-linear-gradient(90deg,var(--header-dash,#A3233A) 0 var(--header-dash-size,6px),transparent var(--header-dash-size,6px) 12px);background-repeat:repeat-x;animation:header-dash-flow .7s linear infinite;pointer-events:none}
@keyframes header-dash-flow{to{background-position:-12px 0}}
.past .hd{background:rgba(243,242,239,.72);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);box-shadow:0 1px 0 rgba(69,71,75,.08)}
.hd-brand{display:flex;align-items:center;gap:10px;text-decoration:none;width:min(185px,calc(100vw - 120px));flex:none}
.hd-brand img{display:block;height:auto}
.hd-symbol{width:32px;flex:none;transition:opacity .5s,transform .5s var(--ease)}
.hd-logotype{width:calc(100% - 50px);min-width:0;transform:scale(.88);transform-origin:left center}
.js .hd-symbol{opacity:0;transform:translateX(-8px)}
.js.composed .hd-symbol,.js.past .hd-symbol{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.hd-symbol{transition:none}}
.hd-nav{display:none;gap:18px;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.hd-nav a{text-decoration:none;position:relative;isolation:isolate;padding:10px 14px;transition:color .4s var(--ease)}
.hd-nav a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent-surface);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.hd-nav a:hover,.hd-nav a:focus-visible{color:var(--white)}
.hd-nav a:hover::before,.hd-nav a:focus-visible::before{transform:scaleX(1)}
.hd-menu{display:flex;align-items:center;gap:10px;min-height:44px;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;padding:10px 0 10px 10px;position:relative;z-index:31}
.hd-menu i{width:18px;height:8px;position:relative}
.hd-menu i::before,.hd-menu i::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .35s var(--ease),top .35s var(--ease)}
.hd-menu i::before{top:0}.hd-menu i::after{top:6.5px}
.hd-menu[aria-expanded="true"]{color:var(--white)}
.hd-menu[aria-expanded="true"] i::before{top:3.25px;transform:rotate(45deg)}
.hd-menu[aria-expanded="true"] i::after{top:3.25px;transform:rotate(-45deg)}
html:not(.js) .hd-menu{display:none}

/* ---------- menu mobile ---------- */
.menu{position:fixed;inset:0;z-index:30;background:var(--ink);color:var(--white);display:flex;flex-direction:column;justify-content:space-between;gap:28px;overflow-y:auto;padding:calc(var(--hd) + 40px) var(--gut) 32px;opacity:0;transition:opacity .35s}
.menu[hidden]{display:none}
.menu.open{opacity:1}
.menu nav{display:grid;flex-shrink:0}
.menu nav a{display:flex;align-items:baseline;gap:16px;text-decoration:none;font-size:clamp(40px,12vw,64px);font-weight:300;letter-spacing:-.03em;line-height:1.1;padding:10px 14px;border-bottom:0;position:relative;isolation:isolate;transform:translateY(16px);opacity:0;transition:transform .5s var(--ease),opacity .5s,color .4s var(--ease)}
.menu nav a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent-surface);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.menu nav a small{font-size:12px;letter-spacing:.1em;color:#B6B2AC}
.menu nav a:hover,.menu nav a:focus-visible{color:var(--white)}
.menu nav a:hover::before,.menu nav a:focus-visible::before{transform:scaleX(1)}
.menu.open nav a{transform:none;opacity:1}
.menu.open nav a:nth-child(2){transition-delay:.06s}
.menu.open nav a:nth-child(3){transition-delay:.12s}
.menu.open nav a:nth-child(4){transition-delay:.18s}
.menu-mail{font-size:18px;text-decoration:none;border-bottom:2px solid var(--accent);align-self:flex-start;flex-shrink:0;padding-bottom:4px}
.lock{overflow:hidden}
.lock .hd{z-index:31;background:var(--ink);box-shadow:none}
.lock .hd-brand{visibility:hidden}

/* ---------- hero: il marchio si compone ---------- */
.stage{position:relative;height:100vh;height:100svh;background:var(--bg)}
.js .stage{height:320vh}
.sticky{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;overflow:hidden;padding:var(--hd) 0 150px}
.mark{--hero-ink:#45474B;position:relative;width:min(78vw,560px,calc((100svh - 260px)*1.333));aspect-ratio:4/3}
.mark .ink{fill:var(--hero-ink)}
.mark .ly,.ghost{position:absolute;inset:0}
.mark svg{width:100%;height:100%;display:block;overflow:visible}
.mark .ly{will-change:transform}
.js .mark .ly{visibility:hidden}
.js.ready .mark .ly{visibility:visible}
.ghost{display:none;pointer-events:none}
.js .ghost{display:block}
.ghost path{fill:none;stroke:var(--hero-ink);stroke-opacity:.38;stroke-width:1.2;stroke-dasharray:6 6;vector-effect:non-scaling-stroke;animation:dash 1.6s linear infinite}
.ghost path.t{stroke:var(--accent);stroke-opacity:.7}
@keyframes dash{to{stroke-dashoffset:-24}}
.cap{position:absolute;left:var(--gut);right:64px;bottom:28px}
.cap h1{font-weight:300;font-size:clamp(30px,6.4vw,56px);line-height:1.02;letter-spacing:-.03em}
.cap p{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);margin-top:14px}
.cue{display:none;position:absolute;right:var(--gut);bottom:28px;flex-direction:column;align-items:center;gap:10px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase}
.js .cue{display:flex}
.cue span{writing-mode:vertical-rl;transform:rotate(180deg)}
.cue i{width:1px;height:56px;background:var(--line);position:relative;overflow:hidden}
.cue i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--accent);animation:drop 1.8s cubic-bezier(.6,0,.3,1) infinite}
@keyframes drop{to{top:100%}}

/* ---------- manifesto ---------- */
.intro{padding:88px var(--gut) 56px;max-width:1100px;margin:0 auto}
.intro .big{font-size:clamp(24px,5.4vw,44px);font-weight:300;line-height:1.18;letter-spacing:-.02em}
.intro .big span{color:var(--mut)}
.intro .small{margin-top:28px;max-width:46ch;color:var(--mut);font-size:16px}

/* ---------- competenze ---------- */
.list{max-width:1100px;margin:0 auto;padding:24px 0 96px}
.list .label{padding:0 var(--gut) 18px}
.row{position:relative;border-top:1px solid var(--line);overflow:hidden}
.row:last-child{border-bottom:1px solid var(--line)}
.row::before{content:"";position:absolute;inset:0;background:var(--accent-surface);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.row>*{position:relative}
.row *{transition:color .4s,border-color .4s,background .4s}
.row-h{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:10px;padding:24px var(--gut) 12px}
.row .n{font-size:12px;color:var(--mut);align-self:start;padding-top:10px}
.row h3{font-weight:500;font-size:clamp(34px,9vw,76px);line-height:1;letter-spacing:-.035em}
.row-b{padding:0 var(--gut) 26px calc(var(--gut) + 54px)}
.row-b p{color:var(--mut);font-size:15px;max-width:52ch}
.row-b ul{list-style:none;margin-top:14px;display:grid;gap:2px}
.row-b li{font-size:14.5px;padding:8px 0;border-top:1px solid var(--line);display:flex;gap:10px}
.row-b li::before{content:"";width:8px;height:2px;background:var(--accent);margin-top:10px;flex:none;transition:background .4s}
/* rosso al passaggio del mouse; sul telefono la riga al centro dello schermo */
.row.on::before{transform:scaleX(1)}
.row.on *{color:var(--white)}
.row.on .row-b li{border-color:rgba(243,242,239,.3)}
.row.on .row-b li::before{background:var(--white)}
@media (hover:hover){
  .row:hover::before{transform:scaleX(1)}
  .row:hover *{color:var(--white)}
  .row:hover .row-b li{border-color:rgba(243,242,239,.3)}
  .row:hover .row-b li::before{background:var(--white)}
}

/* ---------- metodo, laboratorio e destinatari ---------- */
.editorial{max-width:1100px;margin:0 auto;padding:64px var(--gut)}
.section-lead{font-size:clamp(28px,5vw,48px);font-weight:300;line-height:1.12;letter-spacing:-.025em;margin-top:24px}
.steps{list-style:none;display:grid;gap:28px;margin-top:36px}
.steps li{border-top:1px solid var(--line);padding-top:18px}
.step-n{display:block;font-size:12px;letter-spacing:.12em;color:var(--accent-text);margin-bottom:18px}
.editorial h3{font-size:20px;font-weight:500;line-height:1.25;letter-spacing:-.02em}
.steps p,.audience-grid p{font-size:15px;color:var(--mut);margin-top:12px;max-width:48ch}
.method{padding-top:0;padding-bottom:72px}
.lab{background:var(--bg2)}
.lab-copy{display:grid;gap:28px;margin-top:24px}
.lab-copy .section-lead{margin-top:0}
.lab-body{min-width:0}
.lab-body p{color:var(--mut);max-width:52ch}
.lab-body p+p{margin-top:18px}
.text-link{display:inline-block;margin-top:24px;text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:4px}
.text-link:hover{color:var(--accent-text)}
.audience-grid{display:grid;gap:28px;margin-top:36px}
.audience-grid article{border-top:1px solid var(--line);padding-top:20px}
.about{padding-top:0}
.about-intro{display:grid;gap:18px;margin-top:28px}
.about-intro p,.founders p,.about-choice p,.project>p:not(.project-kind),.section-note{font-size:15px;color:var(--mut);max-width:58ch}
.founders{display:grid;gap:32px;margin-top:36px}
.founders article{border-top:1px solid var(--line);padding-top:20px;min-width:0}
.founder-initial{display:block;font-size:38px;font-weight:500;line-height:1;color:var(--accent);margin-bottom:20px}
.founders p{margin-top:14px}
.about-choice{border-left:2px solid var(--accent);padding-left:22px;margin-top:36px}
.about-choice p{margin-top:12px;max-width:76ch}
.section-note{margin-top:20px}
.project-grid{display:grid;gap:36px;margin-top:36px}
.project{border-top:1px solid var(--line);padding-top:20px;min-width:0}
.project-kind{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);margin-bottom:16px}
.project h3{font-size:clamp(23px,3vw,30px);max-width:26ch}
.project>p:not(.project-kind){margin-top:16px}
.project-controls{display:none}
@media (max-width:819px){
  .project-grid{grid-auto-flow:column;grid-auto-columns:100%;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;padding-bottom:16px;scrollbar-width:thin;scrollbar-color:var(--accent) transparent}
  .project{scroll-snap-align:start;overflow-wrap:anywhere}
  .project-controls:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:28px}
  .project-controls p{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
  #projectCount{display:block;margin-top:6px;color:var(--ink);font-variant-numeric:tabular-nums}
  .project-buttons{display:flex;gap:8px;flex:none}
  .project-buttons button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--line);font-size:22px;line-height:1;transition:background .2s,color .2s}
  .project-buttons svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  .project-buttons button:enabled:hover{background:var(--accent-surface);color:var(--white)}
  .project-buttons button:disabled{opacity:.35;cursor:default}
  .project-controls:not([hidden])+.project-grid{margin-top:20px}
}
@media (prefers-reduced-motion:reduce){.project-grid{scroll-behavior:auto}}

/* ---------- contatti ---------- */
.end{background:var(--ink);color:var(--white);padding:80px var(--gut) 28px}
.end-in{max-width:1100px;margin:0 auto}
.end h2{font-weight:300;font-size:clamp(38px,10vw,104px);line-height:.98;letter-spacing:-.04em}
.end-in>p{color:#B6B2AC;margin-top:22px;max-width:40ch}
.end-in>.contact-guide{font-size:15px;max-width:60ch;margin-top:18px}
.mail{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:30px}
.mail a{font-size:clamp(20px,5vw,32px);text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:4px;transition:color .2s}
.mail a:hover{color:var(--on-dark)}
.copy{min-height:44px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;border:1px solid rgba(243,242,239,.3);padding:9px 14px;transition:border-color .2s,color .2s}
.copy:hover{border-color:var(--on-dark);color:var(--on-dark)}
.ft{max-width:1100px;margin:88px auto 0;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#B6B2AC;padding-top:20px;border-top:1px solid rgba(243,242,239,.12)}
.ft-logo{display:block;width:104px;height:auto;object-fit:contain}
.ft .todo{color:var(--on-dark)}
.toast{position:fixed;left:50%;bottom:24px;z-index:40;transform:translate(-50%,20px);background:var(--white);color:var(--ink);font-size:13px;padding:10px 16px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- desktop ---------- */
@media (min-width:820px){
  :root{--gut:32px;--hd:72px}
  .hd-brand{width:225px}
  .hd-nav{display:flex}
  .hd-menu{display:none}
  .cap{right:120px;bottom:40px}
  .cue{bottom:40px}
  .intro{padding:150px var(--gut) 80px}
  .editorial{padding:88px var(--gut)}
  .method{padding-top:0;padding-bottom:88px}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:48px}
  .lab-copy{grid-template-columns:1fr 1fr;gap:40px;margin-top:32px}
  .audience-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 48px;margin-top:48px}
  .about{padding-top:0}
  .about-intro,.founders,.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
  .founders,.project-grid{margin-top:48px}
  .row{display:grid;grid-template-columns:1fr 1fr;align-items:center}
  .row-h{grid-template-columns:90px 1fr;padding:30px 0 30px var(--gut)}
  .row h3{font-size:clamp(34px,5.5vw,64px)}
  .row-b{padding:30px var(--gut) 30px 0}
  .row-b ul{grid-template-columns:1fr 1fr;column-gap:20px}
  .end{padding:130px var(--gut) 36px}
}

/* ---------- pagina 404 ---------- */
.nf-in{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:40px var(--gut);max-width:1100px;margin:0 auto}
.nf-mark{width:120px;height:auto;margin-bottom:40px}
.nf h1{font-weight:300;font-size:clamp(40px,10vw,96px);line-height:1;letter-spacing:-.04em;margin:16px 0 32px}
.nf a{align-self:flex-start;text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:4px;font-size:18px}
.nf a:hover{color:var(--accent)}