/* ============================================================
   Daily Work APL — design system "Il ritmo del lavoro"
   Tokens first. Orange = action only. Paper/ink alternate.
   ============================================================ */

/* ---------- Fonts (self-hosted) ---------- */
@font-face{font-family:'Gilroy';src:url('../fonts/gilroy/Gilroy-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Gilroy';src:url('../fonts/gilroy/Gilroy-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Gilroy';src:url('../fonts/gilroy/Gilroy-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Gilroy';src:url('../fonts/gilroy/Gilroy-ExtraBold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Bricolage';src:url('../fonts/bricolage/bricolage-grotesque-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Bricolage';src:url('../fonts/bricolage/bricolage-grotesque-latin-800-normal.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --ink:#1C1A17;
  --ink-soft:#57534B;
  --paper:#FCFBF9;
  --orange:#E8702A;
  --orange-deep:#B04E15; /* 5.15:1 on paper — AA for small bold labels */
  --amber:#F5A623;
  --mist:#EEF0F2;
  --line:#E3E1DC;
  --grad:linear-gradient(112deg,var(--amber) 0%,var(--orange) 72%);
  --font-body:'Gilroy',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Bricolage','Gilroy',system-ui,sans-serif;
  --step-0:1rem;
  --step-1:clamp(1.13rem,1rem + .5vw,1.3rem);
  --step-2:clamp(1.4rem,1.2rem + 1vw,1.85rem);
  --step-3:clamp(1.8rem,1.4rem + 1.9vw,2.6rem);
  --step-4:clamp(2.6rem,1.9rem + 3.4vw,5.2rem);
  --space:clamp(4rem,3rem + 5vw,8rem);
  --radius:14px;
  --shadow:0 10px 40px -18px rgba(28,26,23,.28);
  --wrap:74rem;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:var(--step-0);line-height:1.65;color:var(--ink);background:var(--paper)}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:2px}
::selection{background:var(--orange);color:var(--paper)}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.7rem 1.2rem;z-index:200}
.skip-link:focus{left:0}

/* ---------- Type ---------- */
h1,h2,h3,.display{font-family:var(--font-display);font-weight:800;line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-2);font-weight:700}
h4,h5{font-family:var(--font-body);font-weight:800;font-size:var(--step-1);line-height:1.3}
p{max-width:62ch}
.lede{font-size:var(--step-1);color:var(--ink-soft);font-weight:300}
.eyebrow{font-family:var(--font-body);font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-deep);display:flex;align-items:center;gap:.55rem;margin-bottom:1rem}
.eyebrow::before{content:'';width:2rem;height:2px;background:var(--grad);border-radius:2px}
.accent{color:var(--orange)}

/* ---------- Layout ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.5rem)}
.section{padding-block:var(--space)}
.section-head{max-width:44rem;margin-bottom:clamp(2.2rem,4vw,4rem)}
.split{display:grid;gap:clamp(2rem,5vw,5rem)}
@media(min-width:56em){
  .split{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}
  .split.rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .split.rev>:first-child{order:2}
}
.grid-3{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr))}
.dark{background:var(--ink);color:var(--paper)}
.dark .lede,.dark p{color:#B9B4AC}
.dark .eyebrow{color:var(--amber)}
.mist{background:var(--mist)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-weight:800;font-size:1rem;line-height:1;padding:1.02rem 1.7rem;border-radius:999px;border:2px solid transparent;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease;will-change:transform}
.btn-solid{background:var(--orange);color:var(--ink)} /* ink on orange: 5.6:1 AA */
.btn-solid:hover{background:var(--amber);transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(232,112,42,.65)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)}
.dark .btn-ghost{border-color:var(--paper);color:var(--paper)}
.dark .btn-ghost:hover{background:var(--paper);color:var(--ink)}
.btn .tick{transition:transform .18s ease}
.btn:hover .tick{transform:translateX(4px)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(252,251,249,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-header .bar{display:flex;align-items:center;gap:1.5rem;min-height:4.6rem}
.brand img{width:154px;height:54px;object-fit:contain}
.site-nav{margin-left:auto}
.site-nav ul{display:flex;gap:1.6rem;list-style:none;align-items:center}
.site-nav a{text-decoration:none;font-weight:700;font-size:.95rem;color:var(--ink-soft);padding:.4rem 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.site-nav a:hover{color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--ink);border-color:var(--orange)}
.header-cta{display:flex;gap:.7rem}
.header-cta .btn{padding:.72rem 1.25rem;font-size:.9rem}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;width:2.9rem;height:2.9rem;border-radius:10px}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;content:'';width:1.5rem;height:2px;background:var(--ink);border-radius:2px;position:relative;transition:transform .2s,opacity .2s;margin-inline:auto}
.nav-toggle span::before{position:absolute;top:-7px}
.nav-toggle span::after{position:absolute;top:7px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}
@media(max-width:62em){
  .nav-toggle{display:block}
  .site-nav{position:absolute;inset:100% 0 auto;background:var(--paper);border-bottom:1px solid var(--line);display:none;padding:1.2rem clamp(1.1rem,4vw,2.5rem) 1.8rem;margin:0}
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column;align-items:flex-start;gap:.4rem}
  .site-nav a{font-size:1.15rem;padding:.55rem 0}
  .header-cta .btn-ghost{display:none}
}

/* ---------- Hero: split dial ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(3.5rem,6vw,7rem)}
.hero-grid{display:grid;gap:3rem}
@media(min-width:56em){.hero-grid{grid-template-columns:minmax(0,6.5fr) minmax(0,5.5fr);align-items:center}}
.hero h1{margin-bottom:1.4rem}
.hero .lede{margin-bottom:2.2rem}
.hero-paths{display:flex;flex-wrap:wrap;gap:.9rem}
.dial{position:relative;margin-inline:auto;width:min(100%,30rem)}
.dial svg{width:100%;height:auto}
.dial-label{position:absolute;font-weight:800;font-size:.9rem;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem;box-shadow:var(--shadow);text-decoration:none;transition:border-color .15s,transform .15s}
.dial-label:hover{border-color:var(--orange);transform:translateY(-2px)}
.dial-label.l1{left:0;top:12%}
.dial-label.l2{right:0;bottom:12%}
.dial-label small{display:block;font-weight:400;color:var(--ink-soft);font-size:.78rem}
@keyframes arcdraw{to{stroke-dashoffset:0}}
@keyframes handsweep{from{transform:rotate(-118deg)}to{transform:rotate(0deg)}}
@keyframes corepulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.dial .arc{stroke-dasharray:640;stroke-dashoffset:640;animation:arcdraw 1.1s cubic-bezier(.6,0,.2,1) .15s forwards}
.dial .arc2{animation-delay:.4s}
.dial .hand{transform-origin:210px 210px;animation:handsweep 1.3s cubic-bezier(.65,0,.18,1) .2s both}
.dial .core{transform-origin:210px 210px;animation:corepulse 2.6s ease-in-out 1.6s 2}

/* ---------- Trust bar ---------- */
.trust{border-block:1px solid var(--line);background:var(--paper)}
.trust .row{display:flex;flex-wrap:wrap;gap:1.2rem 3rem;align-items:center;justify-content:space-between;padding-block:1.5rem}
.badge-auth{display:inline-flex;align-items:center;gap:.7rem;font-weight:800;font-size:.9rem}
.badge-auth .dot{width:.65rem;height:.65rem;border-radius:50%;background:var(--grad);flex:none}
.badge-auth small{display:block;font-weight:400;color:var(--ink-soft)}
.counters{display:flex;flex-wrap:wrap;gap:1.2rem 2.8rem;list-style:none}
.counters b{font-family:var(--font-display);font-weight:800;font-size:1.7rem;letter-spacing:-.02em;display:block;font-variant-numeric:tabular-nums}
.counters span{font-size:.85rem;color:var(--ink-soft)}

/* ---------- Job cards ---------- */
.job-card{position:relative;display:flex;flex-direction:column;gap:.65rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 1.5rem 1.3rem;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.mist .job-card{border-color:transparent}
.job-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--orange)}
.job-meta{display:flex;justify-content:space-between;gap:1rem;font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-deep)}
.job-meta time{color:var(--ink-soft);letter-spacing:0;font-weight:400;text-transform:none;font-size:.8rem}
.job-card h3{font-size:1.22rem;line-height:1.22;letter-spacing:-.01em}
.job-tags{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin-top:auto}
.job-tags li{font-size:.78rem;font-weight:700;color:var(--ink-soft);background:var(--mist);border-radius:999px;padding:.3rem .75rem}
.job-go{display:flex;align-items:center;gap:.5rem;font-weight:800;font-size:.9rem;color:var(--orange-deep);margin-top:.4rem}
.job-go svg{width:1.15rem;height:1.15rem}
.job-go .arc-h{stroke-dasharray:34;stroke-dashoffset:34;transition:stroke-dashoffset .35s ease}
.job-card:hover .arc-h{stroke-dashoffset:0}

/* ---------- Annunci filters ---------- */
.filters{display:grid;gap:.9rem;grid-template-columns:1fr;margin-bottom:2.2rem}
@media(min-width:48em){.filters{grid-template-columns:2fr 1.2fr 1.2fr auto}}
.field label{display:block;font-size:.8rem;font-weight:800;margin-bottom:.35rem}
.field input,.field select{width:100%;padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:10px;background:#fff;font:inherit;color:var(--ink)}
.field input:focus,.field select:focus{border-color:var(--orange);outline:none}
.filters .btn{align-self:end}
.results-info{font-size:.92rem;color:var(--ink-soft);margin-bottom:1.4rem}
.pagination{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:2.5rem;list-style:none}
.pagination a,.pagination b{display:grid;place-items:center;min-width:2.7rem;height:2.7rem;border-radius:10px;border:1.5px solid var(--line);text-decoration:none;font-weight:700;padding-inline:.6rem}
.pagination b{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pagination a:hover{border-color:var(--orange)}
.empty-state{text-align:center;padding:3.5rem 1rem;border:1.5px dashed var(--line);border-radius:var(--radius)}
.empty-state h3{margin-bottom:.5rem}
.empty-state p{margin-inline:auto}

/* ---------- Job detail ---------- */
.job-hero{padding-block:clamp(2.5rem,4vw,4.5rem)}
.breadcrumbs{font-size:.85rem;color:var(--ink-soft);margin-bottom:1.4rem}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem}
.breadcrumbs li+li::before{content:'/';margin-right:.4rem;color:var(--line)}
.breadcrumbs a{color:inherit}
.job-hero h1{font-size:var(--step-3);margin-bottom:1.1rem}
.job-facts{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin-bottom:1.8rem}
.job-facts li{font-size:.85rem;font-weight:700;background:var(--mist);border-radius:999px;padding:.42rem .95rem}
.job-facts li.hot{background:var(--grad);color:var(--ink)}
.job-body{display:grid;gap:3rem;padding-bottom:var(--space)}
@media(min-width:56em){.job-body{grid-template-columns:minmax(0,8fr) minmax(0,4fr);align-items:start}}
.prose h2,.prose h3{font-size:var(--step-2);margin:2rem 0 .8rem}
.prose p,.prose ul,.prose ol{margin-bottom:1rem}
.prose ul,.prose ol{padding-left:1.3rem}
.prose li{margin-bottom:.35rem}
.apply-box{position:sticky;top:6rem;background:var(--ink);color:var(--paper);border-radius:var(--radius);padding:1.8rem;box-shadow:var(--shadow)}
.apply-box h2{font-size:1.3rem;margin-bottom:.6rem}
.apply-box p{color:#B9B4AC;font-size:.95rem;margin-bottom:1.3rem}
.apply-box .btn{width:100%;justify-content:center}
.apply-box .meta{font-size:.8rem;color:#8F8A82;margin-top:1rem}

/* ---------- Service / value cards ---------- */
.svc{background:var(--paper);border-radius:var(--radius);padding:1.9rem;border:1px solid var(--line);display:flex;flex-direction:column;gap:.7rem}
.mist .svc{border-color:transparent;box-shadow:0 6px 24px -18px rgba(28,26,23,.25)}
.svc .glyph{width:2.9rem;height:2.9rem;color:var(--orange)}
.svc h3{font-size:1.25rem}
.svc p{font-size:.97rem;color:var(--ink-soft)}
.dark .svc{background:#26231F;border-color:#39352F}
.dark .svc p{color:#B9B4AC}
.num-list{list-style:none;display:grid;gap:1.6rem;counter-reset:step}
.num-list li{display:grid;grid-template-columns:3rem 1fr;gap:1.1rem;align-items:start}
.num-list li::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--orange);border-top:3px solid var(--orange);padding-top:.3rem}
.num-list h3{font-size:1.15rem;margin-bottom:.25rem}
.num-list p{font-size:.95rem;color:var(--ink-soft)}
.dark .num-list p{color:#B9B4AC}

/* ---------- AI match moment ---------- */
.match-visual{position:relative;margin-inline:auto;width:min(100%,26rem)}
.match-visual svg{width:100%;height:auto}

/* ---------- Sedi ---------- */
.sedi-grid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr))}
.sede{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem}
.sede h3{font-size:1.05rem;margin-bottom:.45rem;display:flex;align-items:center;gap:.5rem}
.sede h3::before{content:'';width:.55rem;height:.55rem;border-radius:50%;background:var(--grad)}
.sede p,.sede a{font-size:.9rem;color:var(--ink-soft);font-style:normal;text-decoration:none}
.sede a:hover{color:var(--orange-deep);text-decoration:underline}

/* ---------- Forms ---------- */
.form-grid{display:grid;gap:1.1rem}
@media(min-width:40em){.form-grid{grid-template-columns:1fr 1fr}.form-grid .full{grid-column:1/-1}}
textarea{resize:vertical;min-height:8rem}
.hint{font-size:.83rem;color:var(--ink-soft)}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#B9B4AC;font-size:.93rem}
.site-footer .cols{display:grid;gap:2.5rem;padding-block:var(--space);grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.site-footer h4{color:var(--paper);font-size:1rem;margin-bottom:1rem}
.site-footer ul{list-style:none;display:grid;gap:.5rem}
.site-footer a{color:inherit;text-decoration:none}
.site-footer a:hover{color:var(--amber)}
.site-footer .brandcol img{width:150px;filter:brightness(0) invert(1);margin-bottom:1rem}
.legal-line{border-top:1px solid #39352F;padding-block:1.4rem;display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;font-size:.82rem}
.socials{display:flex;gap:.8rem;margin-top:1.2rem}
.socials a{display:grid;place-items:center;width:2.5rem;height:2.5rem;border:1px solid #39352F;border-radius:50%;transition:border-color .15s,color .15s}
.socials a:hover{border-color:var(--amber);color:var(--amber)}
.socials svg{width:1.1rem;height:1.1rem}

/* ---------- Reveal on scroll (gated on .js: fully visible without JS) ---------- */
.reveal{transition:opacity .6s ease,transform .6s cubic-bezier(.4,0,.2,1)}
.js .reveal{opacity:0;transform:translateY(22px)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- Cookie banner ---------- */
.cookie-bar{position:fixed;inset:auto 1rem 1rem;z-index:150;max-width:26rem;background:var(--ink);color:var(--paper);border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow);display:none}
.cookie-bar.show{display:block}
.cookie-bar p{font-size:.88rem;color:#B9B4AC;margin-bottom:1rem}
.cookie-bar a{color:var(--amber)}
.cookie-actions{display:flex;flex-wrap:wrap;gap:.55rem}
.cookie-actions .btn{padding:.6rem 1.1rem;font-size:.85rem}

/* ---------- CV modal ---------- */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:160;display:grid;place-items:center;padding:1rem}
.modal .scrim{position:absolute;inset:0;background:rgba(28,26,23,.6)}
.modal .box{position:relative;background:var(--paper);border-radius:var(--radius);padding:2rem;max-width:26rem;width:100%;box-shadow:var(--shadow)}
.modal h2{font-size:1.4rem;margin-bottom:.5rem}
.modal .close{position:absolute;top:.9rem;right:.9rem;background:none;border:0;font-size:1.5rem;line-height:1;width:2.2rem;height:2.2rem;border-radius:8px}
.modal .close:hover{background:var(--mist)}

/* ---------- 404 ---------- */
.err-hero{text-align:center;padding-block:var(--space)}
.err-hero .big{font-family:var(--font-display);font-weight:800;font-size:clamp(5rem,14vw,11rem);line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Utilities ---------- */
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mb-1{margin-bottom:1rem}.mb-2{margin-bottom:2rem}
.center{text-align:center}
.center p{margin-inline:auto}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .dial .arc,.dial .arc2{stroke-dashoffset:0;animation:none}
  .dial .hand{animation:none;transform:none}
  .reveal,.js .reveal{opacity:1;transform:none}
  .job-go .arc-h{stroke-dashoffset:0}
}

/* ---------- Print ---------- */
@media print{.site-header,.site-footer,.cookie-bar,.apply-box .btn{display:none}}