/* Below the hero (Simone 2026-11-13, "add everything, it's ready"): Claudia's homepage sections from 03-sito/index.html,
   kept as she made them (her styles copied unchanged from that page; shared ones come from site.css), plus the client
   folders built on her stacked-cards deck (idee-alternative.html Idea 3) and the two-word titles (maze-title.js). */
#below { position: relative; z-index: 1; background: var(--perla); padding-top: var(--s-9); }

/* ——— Claudia: intro panels ——— */
.intro-panels{padding-top:var(--s-3)}
.talk{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-7)}
.talk p{font-size:var(--t-lead);line-height:1.5}
/* ——— Claudia: three views ——— */
.views-scene{position:relative;height:300vh;padding:0 var(--margin)}
.views-sticky{position:sticky;top:88px;height:calc(100vh - 104px);height:calc(100svh - 104px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);align-items:center;max-width:calc(var(--max) - 2 * var(--margin));margin:0 auto;padding:0 clamp(28px,3.6vw,60px);background:var(--g7);border-radius:28px;box-shadow:0 1px 0 var(--line);overflow:hidden}
.views-text{grid-column:1 / span 5}
.views-art{grid-column:6 / span 7;position:relative;height:min(64vh,620px)}
.views-art canvas{position:absolute;inset:0;width:100%;height:100%}
.views-list{display:grid;gap:0;padding:0;margin-top:var(--s-8);border-top:1px solid var(--line)}
.views-list li{list-style:none;display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--s-4);padding:var(--s-5) 0;border-bottom:1px solid var(--line);color:var(--g4);transition:color var(--d-3)}
.views-list li b{font-family:var(--font-display);font-weight:800;font-size:28px;line-height:1}
.views-list li strong{display:block;font-weight:600;font-size:17px}
.views-list li span{font-size:14px;line-height:1.5}
.views-list li.on{color:var(--g1)}
.views-list li.on span{color:var(--g3)}
/* ——— Claudia: method ——— */
.moves{list-style:none;padding:0;margin-top:16px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.moves li{min-height:clamp(300px,26vw,380px);display:flex;flex-direction:column}
.moves .no{font-size:14px;color:var(--g3)}
.moves b{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(48px,5vw,80px);line-height:.85;margin-top:clamp(28px,4vw,56px)}   /* titles on one line across the cards (the texts differ in length) */
.moves p{font-size:16px;line-height:1.55;color:var(--g3);margin-top:var(--s-4);max-width:26ch}
.moves .iri{opacity:0;transition:opacity var(--d-3)}
.moves li:hover .iri{opacity:.95}
/* ——— Claudia: book a call ——— */
.cta-panel{min-height:clamp(520px,60vh,680px);display:flex;align-items:center}
.cta-panel .cta-in{position:relative;z-index:1}
.cta-panel .lines{position:absolute;inset:0;pointer-events:none}
.cta-panel .lines svg{position:absolute;left:max(56%,640px);top:50%;width:min(60vw,820px);height:auto;transform:translateY(-50%)}
#below footer{padding-top:var(--s-9)}

/* ——— two-word titles (reference 03): the block, tilted back in depth until it rises ——— */
.maze{display:block;perspective:900px;perspective-origin:50% 0;margin-top:var(--s-4)}
.maze .maze-tilt{display:block;transform-origin:50% 100%;will-change:transform}
.maze svg{display:block;width:min(100%,calc(2.3em * var(--ar)));aspect-ratio:var(--ar);height:auto;overflow:visible}
.pnl h2.ttl.maze{font-size:clamp(64px,8vw,132px)}
.pnl h2.ttl.m.maze{font-size:clamp(56px,6.2vw,100px)}
.tile b.maze{font-size:clamp(40px,3.6vw,58px);margin-top:0}
.tile b.maze svg{width:min(100%,calc(2.1em * var(--ar)))}

/* the mark as a divider between what we sell and who we made it for (Simone 2026-11-13): line, the turning coin, line */
.divider{padding:clamp(40px,6vw,88px) 0}
.divider .wrap{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px)}
.divider i{flex:1;height:1px;background:rgba(53,53,54,.18)}
#bigCoin{width:64px;height:64px;flex:none;display:block;color:#353536}

/* services: three tiles now (the 'Not sure yet?' tile is out, Simone 2026-11-13) */
#services .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){#services .tiles{grid-template-columns:1fr}}

/* ——— client folders, on Claudia's deck: each folder closes onto the same line as the previous one, its tab in its own slot
   (Simone 2026-11-14: attached when closed, like 04 and 05; no name may cover another) ——— */
.files{padding:var(--s-9) 0 var(--s-10)}
.deck-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);align-items:end;margin-bottom:var(--s-8)}
.deck-head > div{grid-column:span 7}.deck-head > p{grid-column:9 / span 4}
.deck-head h2{font-size:clamp(64px,8vw,132px)}
.file{--tab:40px;--n:5;--slot:calc((100% - 56px - (var(--n) - 1) * 6px) / var(--n));--peek:30px;--dwell:30vh;position:sticky;top:calc(124px + var(--tab) + var(--i) * var(--peek));margin-top:calc(var(--tab) + 28px + var(--dwell));border-radius:28px;min-height:min(72vh,620px);padding:clamp(24px,3.4vw,52px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);align-content:start;box-shadow:0 -30px 60px -40px rgba(58,35,64,.5);color:var(--g7)}
.file:first-child{margin-top:var(--tab)}
.file .tab{position:absolute;bottom:100%;left:calc(28px + var(--i) * (var(--slot) + 6px));width:var(--slot);box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;height:var(--tab);padding:0 clamp(8px,1.1vw,16px);border-radius:16px 16px 0 0;background:inherit;display:flex;align-items:center;gap:clamp(5px,.7vw,10px);font:600 clamp(10px,1.04vw,13px)/1 var(--font-text);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.file .tab em{font-style:normal;opacity:.6;font-variant-numeric:tabular-nums}
.file .iri{position:absolute;left:28px;right:28px;top:0;height:3px;background:linear-gradient(90deg,transparent,#ff7ab6 18%,#ffb36b 32%,#e9f07a 44%,#6fe3b4 56%,#6aa8ff 70%,#b07cff 84%,transparent);opacity:.9}
.file .meta{grid-column:span 12;display:flex;justify-content:space-between;gap:var(--s-4);font-size:14px;opacity:.85;flex-wrap:wrap}
.file .meta code{font-family:ui-monospace,Menlo,monospace}
.file .shot{grid-column:span 7;margin:0;border-radius:18px;overflow:hidden;background:var(--g7);box-shadow:0 30px 60px -30px rgba(58,35,64,.6);align-self:start}
.file .shot .bar{height:30px;display:flex;align-items:center;gap:6px;padding:0 12px;background:var(--g7);border-bottom:1px solid var(--line)}
.file .shot .bar i{width:9px;height:9px;border-radius:50%;background:var(--g6)}
.file .shot img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.file .shot .m-web{box-shadow:none;border-radius:0}
.file .info{grid-column:span 5;display:flex;flex-direction:column;gap:var(--s-4)}
.file .name{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(48px,5.4vw,92px);line-height:.84}
.file .info p{font-size:16px;line-height:1.55;color:var(--plum-veil);max-width:40ch}
.file .chips span{background:rgba(251,252,252,.12)}
.ga{margin-top:auto;border-radius:18px;background:rgba(251,252,252,.08);box-shadow:inset 0 0 0 1px rgba(251,252,252,.12);padding:18px}
.ga-h{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.ga-h em{font-style:normal;letter-spacing:.02em;text-transform:none;font-size:12.5px;padding:5px 10px;border-radius:999px;background:rgba(251,252,252,.12)}
.ga-k{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
.ga-k small{display:block;font-size:11.5px;opacity:.75;line-height:1.3}
.ga-k b{display:block;font-family:var(--font-display);font-weight:800;font-size:34px;line-height:1;margin-top:6px;font-variant-numeric:tabular-nums}
.ga-k .up{font-size:12px;opacity:.8}
.ga svg{display:block;width:100%;height:46px;margin-top:12px}
.ga-n{font-size:13px!important;line-height:1.45!important;margin-top:12px;opacity:.8}
.fc1{background:var(--plum-design)}.fc2{background:var(--plum-deploy)}.fc3{background:var(--plum-market)}
.fc4{background:var(--plum-veil);color:var(--plum-design)}
.fc5{background:#353536;color:#E9E1EA}   /* the Digital Library: ours, in Claudia's G1 grey */
.fc4 .info p{color:rgba(58,35,64,.8)}
.fc4 .ask{grid-column:span 12;display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-6);flex-wrap:wrap;margin-top:auto}

@media (max-width:900px){
  .views-scene{padding:0 12px}
  .views-sticky{padding:var(--s-6) var(--s-5);top:80px;height:calc(100svh - 92px);grid-template-columns:1fr;align-content:center;gap:var(--s-5)}
  .views-text,.views-art{grid-column:1 / -1}
  .views-art{height:34vh;order:-1}
  .views-list{margin-top:var(--s-6)}
  .views-list li{padding:var(--s-4) 0}
  .views-list li span{display:none}
  .moves{grid-template-columns:1fr 1fr}
  .cta-panel .lines{display:none}
  .deck-head > *{grid-column:1 / -1!important}
  .file{grid-template-columns:1fr;--peek:20px;--dwell:26vh;top:calc(90px + var(--tab) + var(--i) * var(--peek));--tab:34px;min-height:auto;--slot:calc((100% - 32px - (var(--n) - 1) * 4px) / var(--n))}
  .file .shot,.file .info,.file .meta,.fc4 .ask{grid-column:1 / -1}
  .file .tab{left:calc(16px + var(--i) * (var(--slot) + 4px));padding:0 8px;font-size:10px;gap:5px;letter-spacing:.04em}
  .ga-k{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){.moves{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .views-scene{height:auto}.views-sticky{position:relative;height:auto;padding-top:var(--section);padding-bottom:var(--section)}
  .file{position:relative;top:auto}
}

/* ——— services as one bar (prism.js), with the Let's talk strip, all on one screen (Simone 2026-11-13) ——— */
.prism-scene{position:relative;height:720vh}   /* slow: about two full screens of scrolling per service (Simone: not in one scroll) */
.prism-sticky{position:sticky;top:76px;height:calc(100vh - 92px);height:calc(100svh - 92px)}
.pstack{height:100%;display:flex;flex-direction:column;gap:14px}
/* Let's talk, made short: one strip */
.talk-strip{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(18px,3vw,48px);padding:clamp(18px,2.4vw,32px) clamp(22px,3vw,44px)}
.talk-strip .eyebrow{display:block}
.talk-strip h2.ttl.m.maze{font-size:clamp(30px,3.2vw,46px);margin-top:8px}
.talk-strip p{font-size:var(--t-lead);line-height:1.4;color:var(--g6);margin:0}
/* the coloured panel: Claudia's tile colours, it changes with the service (prism.js sets --svc) */
.svc-panel{--svc:#3A2340;flex:1;min-height:0;border-radius:28px;background:var(--svc);display:flex;flex-direction:column;justify-content:center;
  padding:clamp(20px,3vw,48px);overflow:hidden;position:relative}
.svc-panel::after{content:"";position:absolute;left:28px;right:28px;top:0;height:3px;background:linear-gradient(90deg,transparent,#ff7ab6 18%,#ffb36b 32%,#e9f07a 44%,#6fe3b4 56%,#6aa8ff 70%,#b07cff 84%,transparent);opacity:.9}
/* the bar is a real block turning under the panel's skin (Simone 2026-11-13: "it needs to look like a block... the corners
   need to be pointy... the words engraved inside the block... it literally looks like it's under the skin"):
   - sharp edges and corners, no fading; it runs edge to edge, so its ends disappear under the panel's sides;
   - the faces are the panel's own material, lit from above (each face shades from its lit edge to its far edge);
   - the words are cut INTO the block: darker than the surface, a shadow on the upper inner wall, light caught on the lower lip;
   - the skin: the panel surface lifts with the block (a soft light rising above it, a soft shade falling below it), and
     stretches a little while it turns. */
.pskin{position:relative;isolation:isolate}
/* neumorphism, like the buttons: the block sits in the panel's own colour with a soft light on its upper left and a soft
   shade on its lower right, so it reads as pushed up out of the surface */
.pskin{--h:clamp(96px,13vw,200px)}
.pstage{height:calc(var(--h) * 1.6);display:grid;place-items:center;perspective:1800px;position:relative;z-index:1}
/* the tent: the skin rising over the block in a soft arch on every side (top, bottom and both ends), like the buttons.
   It is the panel's own colour with Neumorphism's two shadows (light upper-left, dark lower-right), and prism.js resizes it
   every frame to the block's outline, which changes as the block turns. */
.pmound{position:absolute;left:50%;top:50%;width:var(--mw,60%);height:var(--mh,140px);transform:translate(-50%,-50%);z-index:0;pointer-events:none;
  border-radius:var(--mr,70px);background:radial-gradient(120% 140% at 40% 30%,color-mix(in srgb,var(--svc,#3A2340) 90%,#E9E1EA),var(--svc,#3A2340) 60%);
  box-shadow:-14px -14px 26px rgba(233,225,234,.12),16px 18px 30px rgba(53,53,54,.5),inset 0 0 0 1px rgba(233,225,234,.04)}
.pbar{position:relative;width:min(100%,calc(var(--h) * 4));height:var(--h);   /* "DEPLOYMENT" is about 3.1 bar-heights wide: the ends sit just past it */transform-style:preserve-3d;transform:rotateX(45deg)}
.pface{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;overflow:hidden;
  transform:rotateX(calc(var(--i) * -90deg)) translateZ(calc(var(--h) / 2));
  background:linear-gradient(180deg,color-mix(in srgb,var(--svc,#3A2340) 86%,#E9E1EA) 0%,var(--svc,#3A2340) 50%,color-mix(in srgb,var(--svc,#3A2340) 80%,#353536) 100%);
  filter:brightness(var(--lit,1));
  font:800 calc(var(--h) * .58)/1 "Big Shoulders Display",sans-serif;letter-spacing:.07em;text-transform:uppercase;
  /* engraved: the cut is darker than the surface, its upper wall in shadow, its lower lip catching the light */
  color:color-mix(in srgb,var(--svc,#3A2340) 48%,#353536);
  text-shadow:0 -2px 1px rgba(53,53,54,.8),0 1.5px 0 rgba(233,225,234,.62),0 3px 2px rgba(233,225,234,.2)}
.pface::after{content:"";position:absolute;inset:-20% 0;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(233,225,234,calc(var(--spec,0) * .2)) var(--sy,50%),transparent 100%)}
.pdescs{position:relative;height:4.4em;margin-top:clamp(18px,3vw,40px);max-width:52ch}
.pdesc{position:absolute;inset:0;margin:0;opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .6s cubic-bezier(.16,1,.3,1);font-size:var(--t-lead);line-height:1.45;color:#E9E1EA}
.pdesc b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#E9E1EA;opacity:.75;margin-bottom:8px}
.pdesc.on{opacity:1;transform:none}
@media (max-width:900px){.talk-strip{grid-template-columns:1fr}.talk-strip .nbtn{justify-self:start}}
@media (prefers-reduced-motion:reduce){.prism-scene{height:auto}.prism-sticky{position:relative;height:auto;top:auto}.svc-panel{min-height:70vh}}

/* the services relief (relief.js): one lit surface in the panel's colour; the block is shading, not boxes */
.svc-panel .relief{display:block;width:calc(100% + 2 * clamp(20px,3vw,48px));margin:0 calc(-1 * clamp(20px,3vw,48px));height:clamp(220px,32vw,420px)}

/* ——— Why us (2026-11-13): four checkable facts; each line lies flat on the floor and stands up as it reaches you ——— */
.why{padding:var(--s-9) 0 var(--s-9)}
.why h2.maze{font-size:clamp(64px,8vw,132px)}
.why-lead{font-size:var(--t-lead);line-height:1.5;max-width:34ch;margin-top:var(--s-5);color:var(--g2)}
.why-list{list-style:none;padding:0;margin-top:var(--s-8);perspective:1100px;perspective-origin:50% 0;border-top:1px solid var(--line)}
.why-list li{display:grid;grid-template-columns:clamp(70px,11vw,170px) minmax(0,1fr);gap:var(--gutter);padding:clamp(28px,4vw,56px) 0;border-bottom:1px solid var(--line);
  transform-origin:50% 100%;transform:rotateX(80deg);opacity:0;transition:transform 1.2s cubic-bezier(.16,1,.3,1),opacity .7s ease}
.why-list li.up{transform:none;opacity:1}
.why-list .no{font-family:var(--font-display);font-weight:800;font-size:clamp(56px,7vw,120px);line-height:.8;color:var(--plum-market)}
.why-list b{display:block;font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(36px,4.4vw,72px);line-height:.9;color:var(--g1)}
.why-list p{font-size:17px;line-height:1.6;color:var(--g3);max-width:56ch;margin:var(--s-4) 0 var(--s-5)}
@media (prefers-reduced-motion: reduce){.why-list li{transform:none;opacity:1;transition:none}}
@media (max-width:760px){.why-list li{grid-template-columns:1fr;gap:var(--s-3)}}

/* ——— Services v2 (2026-11-13): an anamorphosis. Every letter is cut into strips floating at their own depth; from one
   point of view per service they line up into the word (anamorph.js turns the point of view with the scroll) ——— */
.ana{position:relative;flex:1;min-height:clamp(240px,34vw,470px);perspective-origin:50% 50%}
.ana-g{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.ana-p{position:absolute;left:0;top:0;line-height:1;white-space:pre;color:#E9E1EA;text-transform:uppercase;transform-origin:0 0;backface-visibility:hidden;pointer-events:none}

/* ——— Depth (Simone 2026-11-13: "more depth, like the hotel site", not curtains): headings, text and cards tip up out of
   the page as they reach you (a short stagger between neighbours); client screenshots drift inside their frames ——— */
.rv{opacity:0;transform:perspective(900px) translateY(46px) rotateX(-16deg);transform-origin:50% 0;
  transition:opacity .9s ease var(--rvd,0s),transform 1.25s cubic-bezier(.16,1,.3,1) var(--rvd,0s)}
.rv.in{opacity:1;transform:none}
.file .shot img{display:block;width:100%;transform:scale(1.12) translateY(var(--py,0%));will-change:transform}
@media (prefers-reduced-motion: reduce){.rv{opacity:1;transform:none;transition:none}.file .shot img{transform:none}}

/* services quick jump (2026-11-14, v2 after Simone: "way too generic, way smaller"): three small numbers, the same type as the
   "01 · From above" line; the one you are on is bright with a short line under it, like a point of view being marked */
.svc-jump{position:absolute;right:clamp(18px,2.6vw,36px);bottom:clamp(20px,2.8vw,38px);display:flex;gap:14px;z-index:3}
.svc-jump button{position:relative;border:0;background:none;padding:4px 0;font:600 12px/1 var(--font-text);letter-spacing:.14em;color:#E9E1EA;opacity:.42;cursor:pointer;transition:opacity .3s ease}
.svc-jump button::after{content:"";position:absolute;left:0;right:.14em;bottom:-3px;height:1.5px;background:#E9E1EA;transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.svc-jump button:hover,.svc-jump button:focus-visible{opacity:.85}
.svc-jump button.on{opacity:1}.svc-jump button.on::after{transform:none}
.svc-jump button:focus-visible{outline:1px solid #E9E1EA;outline-offset:4px}
@media (max-width:760px){.svc-jump{left:auto;right:16px;transform:none;bottom:14px;gap:12px}}

@media (max-width:760px){.svc-panel{padding-bottom:40px}}
@media (min-width:761px){.svc-panel .pdescs{max-width:min(52ch,calc(100% - 160px))}}