/* PERETZ site footer (since 2026-10-17; draft and history: ~/redesign-draft/footer-v6 on the server).
   A dusty dark night with a red cast and the Milky Way under a Schoeffel-like shimmer that melts out of the cream page;
   the challenge, three doors (client portal, partners, investors), the map of the site, the social cubes and the Z pepper (footer3d.js).
   Every class is pf- or pftr- prefixed and every rule is scoped, so nothing reaches the rest of the site. */
/* PERETZ footer draft v2 (www.peretz.top/v6). The site's own type (SF Pro Display) only, the home page palette:
   a dusty dark night with a red cast and the Milky Way, ivory text, the red of the 3D first screen; the cream page melts into it through a Schoeffel-like shimmer. */

.pftr,.pg,.pf-vars{
  --paper:#F9F6F0; --page-ink:#2D2D2D; --page-soft:#5E5853; --page-mute:#9A928B; --page-line:rgba(45,45,45,.12);
  --red:#BE2E24; --red-hi:#C8392D; --red-lo:#9A241C; --red-deep:#6E1611;
  --sans:'SF Pro Display',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --gut:max(16px,2.8vw);
  --e-fill:cubic-bezier(.45,.05,.2,1); --e-soft:cubic-bezier(.25,.1,.25,1); --e-out:cubic-bezier(.19,1,.22,1);
  /* the soft sheen of the home page buttons */
  --sheen:linear-gradient(90deg,rgba(214,74,60,.28) 0%,rgba(190,46,36,0) 30%,rgba(110,22,17,.3) 60%,rgba(190,46,36,0) 82%,rgba(214,74,60,.28) 100%);
}
/* footer palettes */
.pftr,.pg,.pf-vars{--bg:#170F12; --bg2:#0F0A0C; --ink:#EFE8DC; --soft:rgba(239,232,220,.66); --mute:rgba(239,232,220,.42); --line:rgba(239,232,220,.12); --card:rgba(239,232,220,.035); --mark:rgba(239,232,220,.05)}



.pftr *,.pftr *::before,.pftr *::after,.pg *,.pg *::before,.pg *::after{box-sizing:border-box}
/* resets without weight (:where), so the component rules below always win over them */
:where(.pftr,.pg) a{color:inherit;text-decoration:none}
:where(.pftr,.pg) ul{list-style:none;margin:0;padding:0}
:where(.pftr,.pg) :is(p,h1,h2,h3){margin:0;text-transform:none;color:inherit}
:where(.pftr) button{font:inherit;color:inherit}
.pf-eyebrow{font-size:10px;font-weight:400;letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.pftr{font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.5}

/* ---------- footer ---------- */
.pftr{content-visibility:auto;contain-intrinsic-size:auto 2200px;position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,var(--paper) 0,#F1E9E3 40px,#D4BDB5 120px,#9C7C78 210px,#5E4246 300px,#35232A 390px,#22161B 470px,var(--bg) 600px,var(--bg2) 100%);color:var(--ink);padding:0 var(--gut);font-size:13px}
/* the sky: a light fade from the page at the top, then dark nacre drifting slowly and the Milky Way (drawn once on a canvas) */
.pftr__sky{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.pftr__sky canvas{position:absolute;inset:0;width:100%;height:100%}
.pftr__sky::before{content:"";position:absolute;inset:-12%;
  background:radial-gradient(42% 50% at 16% 70%,rgba(84,40,52,.5),rgba(84,40,52,0) 70%),
    radial-gradient(40% 46% at 44% 36%,rgba(110,30,30,.32),rgba(110,30,30,0) 70%),
    radial-gradient(36% 46% at 70% 78%,rgba(96,74,68,.34),rgba(96,74,68,0) 70%),
    radial-gradient(40% 50% at 88% 40%,rgba(128,88,62,.24),rgba(128,88,62,0) 70%),
    radial-gradient(30% 40% at 56% 58%,rgba(70,46,58,.36),rgba(70,46,58,0) 70%);
  animation:skyDrift 26s ease-in-out infinite alternate}
.pftr__sky::after{content:"";position:absolute;inset:-12%;
  background:radial-gradient(34% 40% at 30% 30%,rgba(150,64,64,.32),rgba(150,64,64,0) 70%),
    radial-gradient(30% 36% at 76% 58%,rgba(120,92,120,.3),rgba(120,92,120,0) 70%),
    radial-gradient(36% 40% at 52% 86%,rgba(160,112,80,.24),rgba(160,112,80,0) 70%),
    radial-gradient(28% 34% at 12% 78%,rgba(190,46,36,.18),rgba(190,46,36,0) 70%);
  animation:skyDrift2 21s ease-in-out infinite alternate,flowFade 9s ease-in-out infinite alternate}
@keyframes skyDrift{0%{transform:translate3d(-7%,2%,0) rotate(0)}50%{transform:translate3d(5%,-4%,0) rotate(4deg)}100%{transform:translate3d(-3%,5%,0) rotate(-4deg)}}
@keyframes skyDrift2{0%{transform:translate3d(6%,-3%,0) rotate(3deg) scale(1.04)}100%{transform:translate3d(-6%,4%,0) rotate(-3deg) scale(1)}}
@keyframes flowFade{0%{opacity:.25}100%{opacity:1}}
/* the page flows into the night: cream at the very top, gone by the time the challenge starts */
.pftr::before{content:"";position:absolute;left:0;right:0;top:-1px;height:110px;z-index:1;pointer-events:none;background:linear-gradient(180deg,var(--paper) 0%,rgba(249,246,240,.9) 22%,rgba(249,246,240,.5) 55%,rgba(249,246,240,0) 100%)}
/* the shimmer, as in the Schoeffel footer: soft patches of cream, rose, sand, mauve and wine at different depths drift slowly,
   so the light page gives way to the night unevenly, never along a straight line */
.pftr__dusk{position:absolute;left:0;right:0;top:0;height:680px;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%)}
.pftr__dusk::before,.pftr__dusk>i{content:"";position:absolute;inset:-14% -12%}
.pftr__dusk::before{
  background:radial-gradient(26% 16% at 10% 6%,rgba(249,246,240,.95),rgba(249,246,240,0) 70%),
    radial-gradient(30% 20% at 46% 9%,rgba(246,238,232,.9),rgba(246,238,232,0) 70%),
    radial-gradient(22% 14% at 84% 4%,rgba(249,246,240,.95),rgba(249,246,240,0) 70%),
    radial-gradient(24% 22% at 64% 20%,rgba(236,214,204,.7),rgba(236,214,204,0) 70%),
    radial-gradient(18% 16% at 74% 15%,rgba(124,80,88,.5),rgba(124,80,88,0) 70%),
    radial-gradient(20% 22% at 20% 30%,rgba(244,232,224,.65),rgba(244,232,224,0) 70%),
    radial-gradient(22% 20% at 26% 24%,rgba(218,184,176,.6),rgba(218,184,176,0) 70%),
    radial-gradient(26% 22% at 90% 26%,rgba(206,176,150,.5),rgba(206,176,150,0) 70%),
    radial-gradient(24% 20% at 56% 38%,rgba(138,94,100,.55),rgba(138,94,100,0) 70%),
    radial-gradient(22% 22% at 14% 42%,rgba(118,48,50,.5),rgba(118,48,50,0) 70%),
    radial-gradient(26% 20% at 80% 46%,rgba(96,52,62,.55),rgba(96,52,62,0) 70%);
  animation:duskDrift 22s ease-in-out infinite alternate}
.pftr__dusk>i{display:block;
  background:radial-gradient(22% 18% at 30% 26%,rgba(236,196,186,.6),rgba(236,196,186,0) 70%),
    radial-gradient(20% 16% at 70% 22%,rgba(214,188,206,.5),rgba(214,188,206,0) 70%),
    radial-gradient(24% 18% at 50% 40%,rgba(170,70,64,.38),rgba(170,70,64,0) 70%),
    radial-gradient(20% 18% at 92% 34%,rgba(232,206,170,.5),rgba(232,206,170,0) 70%),
    radial-gradient(22% 20% at 8% 36%,rgba(150,104,120,.45),rgba(150,104,120,0) 70%);
  animation:duskDrift2 17s ease-in-out infinite alternate,flowFade 7s ease-in-out infinite alternate}
@keyframes duskDrift{0%{transform:translate3d(-8%,1%,0) rotate(0)}50%{transform:translate3d(6%,-3%,0) rotate(3deg)}100%{transform:translate3d(-3%,3%,0) rotate(-3deg)}}
@keyframes duskDrift2{0%{transform:translate3d(8%,-2%,0) scale(1.05)}100%{transform:translate3d(-8%,3%,0) scale(1)}}
.pftr__dusk::after{z-index:1;content:"";position:absolute;inset:0;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.pftr>*{position:relative;z-index:1}
.pftr>.pftr__sky{position:absolute;z-index:-1}
.pftr>.pftr__dusk{position:absolute;z-index:0}

/* 1. the challenge */
.pf-dare{padding:clamp(250px,24vw,360px) 0 clamp(48px,6vw,88px)}
.pf-dare .pf-eyebrow{display:flex;align-items:center;gap:12px;color:rgba(239,232,220,.78)}
.pf-dare .pf-eyebrow::before{content:"";width:28px;height:1px;background:var(--red)}
.pf-dare__h{display:block;margin:22px 0 0;font:400 clamp(44px,10.4vw,176px)/.88 var(--sans);letter-spacing:-.035em;text-transform:uppercase}
.pf-dare__h span{display:block}
/* the red line follows the cursor: the gradient slides under the letters */
.pf-dare__h .pf-hot{color:transparent;background-image:linear-gradient(90deg,var(--red-hi) 0%,var(--red) 18%,var(--red-lo) 34%,var(--red) 50%,var(--red-hi) 66%,var(--red-deep) 84%,var(--red) 100%);
  background-size:220% 100%;background-position:calc(var(--mx,.5) * 100%) 0;-webkit-background-clip:text;background-clip:text;transition:background-position 1.6s var(--e-out)}
.pf-dare__row{display:grid;grid-template-columns:minmax(0,1.1fr) auto;align-items:end;gap:28px 48px;margin-top:clamp(28px,3.4vw,52px)}
.pf-dare__row p{margin:0;max-width:52ch;font-size:clamp(15px,1.2vw,18px);line-height:1.55;color:rgba(239,232,220,.84)}
.pf-dare__acts{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;justify-content:flex-end}
.pf-pill{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:14px;height:56px;padding:0 30px;border-radius:999px;border:1px solid var(--red);
  font:400 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#FFF7EE;background:linear-gradient(100deg,#A8281F,var(--red) 50%,#AD2A20);transition:transform .6s var(--e-out)}
.pf-pill::before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--sheen);background-size:200% auto;background-position:100% center;transition:background-position 2.4s var(--e-fill)}
.pf-pill:hover::before{background-position:0 center}
.pf-pill i{font-style:normal;transition:transform .9s var(--e-out)}
.pf-pill:hover i{transform:translateX(5px)}
.pf-pill--ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.pf-pill--ghost::after{content:"";position:absolute;inset:0;z-index:-2;opacity:0;background:linear-gradient(100deg,#A8281F,var(--red) 50%,#AD2A20);transition:opacity 1.2s var(--e-fill)}
.pf-pill--ghost:hover{color:#FFF7EE;border-color:var(--red)}
.pf-pill--ghost:hover::after{opacity:1}
.pf-lnk{font-size:12.5px;color:rgba(239,232,220,.78);transition:color .8s var(--e-soft)}
.pf-lnk b{font-weight:400;color:var(--ink);background-image:linear-gradient(currentColor,currentColor);background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat;padding-bottom:3px}
.pf-lnk:hover b{color:var(--red-hi)}

/* 2. three doors: clients, partners, investors */
.pf-doors{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:16px;padding-bottom:clamp(48px,6vw,80px)}
.pf-door{position:relative;display:flex;flex-direction:column;gap:14px;padding:30px 28px 28px;border:1px solid var(--line);border-radius:4px;background:var(--card);overflow:hidden;isolation:isolate;transition:border-color 1s var(--e-soft)}
.pf-door:hover{border-color:rgba(190,46,36,.45)}
.pf-door::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--red-hi),var(--red-deep));transform:scaleX(0);transform-origin:0 0;transition:transform 1.2s var(--e-out)}
.pf-door:hover::after{transform:none}
.pf-door h3{margin:0;font:400 clamp(22px,2vw,28px)/1.15 var(--sans);letter-spacing:-.01em}
.pf-door p{margin:0;color:var(--soft);line-height:1.6;max-width:44ch}
.pf-door ul{display:grid;gap:9px;margin-top:2px}
.pf-door ul a{color:var(--ink)}
.pf-door .pf-soon{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:2px 7px;margin-left:8px;vertical-align:2px}
.pf-door .pf-acts{margin-top:auto;padding-top:12px}
.pf-door--clients{background:linear-gradient(160deg,rgba(190,46,36,.14),rgba(190,46,36,0) 60%),var(--card);border-color:rgba(190,46,36,.38)}
.pf-door--clients .pf-lock{width:15px;height:15px}
.pf-door--clients .pf-perks{display:flex;flex-wrap:wrap;gap:8px}
.pf-door--clients .pf-perks span{font-size:11px;color:var(--soft);border:1px solid var(--line);border-radius:999px;padding:5px 11px}

/* 3. the map of the site */
.pftr__top{display:grid;grid-template-columns:1.3fr repeat(4,minmax(0,1fr));gap:32px;padding-top:56px;border-top:1px solid var(--line)}
.pf-brand{display:grid;gap:16px;justify-items:start;align-content:start}
.pf-brand svg{width:96px;height:auto;color:var(--ink)}
.pf-brand .pf-tag{margin:0;font:400 20px/1.25 var(--sans);letter-spacing:-.01em;max-width:20ch}
.pf-brand .pf-tag em{font-style:normal;color:var(--red-hi)}
.pf-brand p{margin:0;max-width:30ch;font-size:12.5px;line-height:1.6;color:var(--soft)}
.pf-brand .pf-pepper{width:100%;max-width:240px;height:230px;margin-top:4px;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.pf-brand .pf-pepper.pf-is-grab{cursor:grabbing}
.pf-fcol summary{list-style:none;font-size:10px;font-weight:400;letter-spacing:.26em;text-transform:uppercase;color:var(--mute);margin-bottom:16px;pointer-events:none}
.pf-fcol summary::-webkit-details-marker{display:none}
.pf-fcol summary .pf-pm{display:none}
.pf-fcol ul{display:grid;gap:11px}
.pf-fcol .pf-sub{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--mute);margin-top:12px}
.pf-fcol .pf-all{font-weight:600}

/* 4. follow, reach, language */
.pftr__mid{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;margin-top:56px;padding-top:28px;border-top:1px solid var(--line)}
.pf-social{position:relative;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.pf-social .pf-eyebrow{margin-right:4px}
.pf-social a{position:relative;display:flex;width:28px;height:28px;align-items:center;justify-content:center;color:var(--ink);transition:color .8s var(--e-soft)}
.pf-social a:hover,.pf-social a:focus-visible{color:var(--red-hi)}
.pf-social svg{width:18px;height:18px;transition:opacity .6s}
.pf-social.pf-has-cubes a{width:40px;height:40px;touch-action:pan-y;-webkit-user-drag:none}
.pf-social.pf-has-cubes a svg{opacity:0}
/* the canvas where a project world assembles above the icon (drawn by footer3d.js) */
.pf-reach{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;font-size:12.5px;color:var(--soft)}
.pf-reach a{color:var(--ink)}
.pf-lang{display:flex;gap:14px;font-size:11px;letter-spacing:.12em}
.pf-lang a{color:var(--mute)}
.pf-lang a[aria-current]{color:var(--ink)}

/* 5. legal */
.pftr__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 20px;margin-top:28px;font-size:11px;color:var(--mute)}
.pftr__legal nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.pftr__legal a:hover{color:var(--ink)}

/* 6. the signature: the wordmark across the whole width, cut by the bottom edge */
.pf-sign{display:block;margin:clamp(40px,5vw,72px) 0 0;height:clamp(52px,12.4vw,214px);overflow:hidden;color:var(--mark)}
.pf-sign svg{display:block;width:100%;height:auto}
.pf-sign .pf-z{fill:var(--red);opacity:.45}

@media (hover:hover){
  .pf-fcol a,.pf-door ul a,.pf-reach a{background-image:linear-gradient(90deg,var(--red-hi),var(--red) 16%,var(--red-lo) 34%,var(--ink) 66.6%,var(--ink));background-size:300% 100%;background-repeat:no-repeat;background-position:100% 0;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:background-position 1s var(--e-soft)}
  .pf-fcol a:hover,.pf-door ul a:hover,.pf-reach a:hover{background-position:0 0}
}

@media (max-width:1100px){
  .pf-doors{grid-template-columns:1fr 1fr}
  .pf-door--clients{grid-column:1/-1}
  .pftr__top{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}
  .pf-brand{grid-column:1/-1;grid-template-columns:auto auto 1fr;align-items:center;gap:24px}
  .pf-brand p{justify-self:end;text-align:right}
  .pf-brand .pf-pepper{grid-column:1/-1;justify-self:center;max-width:280px;height:200px}
}
@media (max-width:860px){
  .pf-dare__row{grid-template-columns:1fr}
  .pf-dare__acts{justify-content:flex-start}
}
@media (max-width:760px){
  .pf-brand .pf-pepper{margin:0 auto;height:190px}
  .pf-doors{grid-template-columns:1fr}
  .pf-door{padding:24px 20px}
  .pf-pill{width:100%;justify-content:center}
  .pftr__top{grid-template-columns:1fr;gap:0;padding-top:40px}
  .pf-brand{grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px;margin-bottom:36px}
  .pf-brand p{justify-self:center;text-align:center}
  .pf-fcol{border-bottom:1px solid var(--line)}
  .pf-fcol:nth-child(2){border-top:1px solid var(--line)}
  .pf-fcol summary{display:flex;justify-content:space-between;align-items:center;min-height:54px;margin:0;color:var(--ink);font-size:10.5px;pointer-events:auto;cursor:pointer}
  .pf-fcol summary .pf-pm{display:inline-block;font-size:16px;font-weight:400;letter-spacing:0;transition:transform .5s var(--e-soft)}
  .pf-fcol[open] summary .pf-pm{transform:rotate(45deg)}
  .pf-fcol ul{grid-template-columns:1fr 1fr;gap:12px 16px;padding-bottom:20px;font-size:13.5px}
  .pf-fcol .pf-sub{grid-column:1/-1}
  .pftr__mid{flex-direction:column;align-items:center;text-align:center;margin-top:28px;padding-top:0;border-top:0}
  .pf-social{display:grid;grid-template-columns:repeat(5,44px);justify-items:center;gap:8px 12px}
  .pf-social .pf-eyebrow{grid-column:1/-1;margin:0 0 8px}
  .pf-social a{width:44px;height:40px}
  .pf-social svg{width:20px;height:20px}
  .pf-reach{flex-direction:column;gap:10px}
  .pftr__legal{flex-direction:column-reverse;align-items:center;text-align:center}
  .pftr__legal nav{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .pf-dare__h .pf-hot,.pf-pill::before,.pf-pill i,.pf-door::after{transition-duration:.01s}
  .pftr__sky::before,.pftr__sky::after,.pftr__dusk::before,.pftr__dusk>i{animation:none}
}

/* the 3D worlds of the footer (footer3d.js): one canvas over the window, it never takes a click */
canvas.pf-f3d{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:50}

/* the challenge and its button open the site's request form (call-popup), so they are buttons */
button.pf-dare__h{width:100%;background:none;border:0;padding:0;margin:22px 0 0;text-align:left;cursor:pointer;color:var(--ink)}
button.pf-pill{cursor:pointer}

/* the old footer parts the page scripts still talk to (project.js, article.js, clients.js, author.js, vacancy.js, contacts.js):
   they stay in the markup, the site's old styles for them are neutralised here, and "Read also" gets the new look */
html body .footer.pftr .top.pf-legacy{display:block;padding:0;margin:0;background:none!important;backdrop-filter:none!important;position:relative;grid-template-columns:none}
html body .footer.pftr .top.pf-legacy.next-active{padding:0}
html body .footer.pftr .top.pf-legacy .next-page.pf-next{position:relative;top:auto;right:auto;bottom:auto;left:auto;width:auto;display:block;margin:0;padding:clamp(28px,3vw,44px) 0 0;background:none!important;color:var(--page-ink)}
html body .footer.pftr .top.pf-legacy .next-page.pf-next.hidden{display:none!important}
html body .footer.pftr .top.pf-legacy .next-page.pf-next .content{display:flex;align-items:center;gap:22px;max-width:none}
html body .footer.pftr .top.pf-legacy .next-page.pf-next .text{margin:0}
html body .footer.pftr .top.pf-legacy .next-page.pf-next .text p{margin:0;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--page-mute)!important}
html body .footer.pftr .top.pf-legacy .next-page.pf-next h2{margin:6px 0 0;font:400 clamp(22px,2.4vw,34px)/1.1 var(--sans);letter-spacing:-.015em;color:var(--page-ink)!important;transition:color .8s var(--e-soft)}
html body .footer.pftr .top.pf-legacy .next-page.pf-next:hover h2{color:var(--red)!important}
html body .footer.pftr .top.pf-legacy .next-page.pf-next .img{position:static;transform:none;width:44px;height:44px;flex:0 0 44px}
.pf-legacy-shim{display:none!important}
/* "Read also" sits in the light top of the shimmer: the challenge starts a little lower then */
.footer.pftr .top.pf-legacy:has(.next-page.pf-next:not(.hidden))+.pf-dare{padding-top:clamp(150px,15vw,240px)}

/* the shimmer moves only while the footer is on screen (footer.js toggles .pf-on) */
.pftr:not(.pf-on) .pftr__sky::before,.pftr:not(.pf-on) .pftr__sky::after,.pftr:not(.pf-on) .pftr__dusk::before,.pftr:not(.pf-on) .pftr__dusk>i{animation-play-state:paused}
/* the door headings lead to their pages */
.pf-door h3 a{transition:color .8s var(--e-soft)}
.pf-door h3 a:hover{color:var(--red-hi)}

/* the 3D objects live in small canvases inside their places (footer3d.js), so they scroll with the page instead of being redrawn over it */
.pf-pepper{position:relative}
.pf-cv{position:absolute;display:block;pointer-events:none}
.pf-cv--pepper{left:-50%;top:-50%;width:200%;height:200%}
.pf-social a .pf-cv--cube{left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px}
.pf-fcol a[data-o]{position:relative}
.pf-cv--world{left:calc(100% + 6px);top:50%;width:150px;height:150px;margin-top:-75px;z-index:3}
canvas.pf-f3d{display:none}

/* also the Schoeffel partnership page (.pg-sch, /products/schoeffel): the project lives in ELEMENTS */
/* ---------- ELEMENTS (the blog category and its articles): the footer continues the section's white-blue sky ----------
   The same selectors as the section's own rules in pagestyle.css. The top stays clear so the section's sky shows through,
   then deepens through sky blue into an ultramarine night; every red accent takes the section's blues. footer.js / footer3d.js read --pf-theme. */
:is(body:has(.sort-link.active[href*="/category/elements"]),body:has(.article-page a.breadcrumbs-item[href*="/category/elements"]),body:has(.pg-sch)) .pftr{
  --pf-theme:elements;
  --bg:#0A1440; --bg2:#060C26; --ink:#EEF4FC; --soft:rgba(238,244,252,.68); --mute:rgba(238,244,252,.45); --line:rgba(238,244,252,.14); --card:rgba(238,244,252,.04); --mark:rgba(238,244,252,.06);
  --red:#1A4F9C; --red-hi:#3FA9E0; --red-lo:#123A7A; --red-deep:#0A1440;
  --sheen:linear-gradient(90deg,rgba(120,190,240,.32) 0%,rgba(26,79,156,0) 30%,rgba(10,20,64,.3) 60%,rgba(26,79,156,0) 82%,rgba(120,190,240,.32) 100%);
  background:linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(232,242,251,.55) 60px,#BFD9F3 140px,#7FA9DA 230px,#3E6DB0 320px,#1A4F9C 400px,#123A7A 480px,#0A1440 620px,#060C26 100%)}
:is(body:has(.sort-link.active[href*="/category/elements"]),body:has(.article-page a.breadcrumbs-item[href*="/category/elements"]),body:has(.pg-sch)) .pftr::before{display:none}
:is(body:has(.sort-link.active[href*="/category/elements"]),body:has(.article-page a.breadcrumbs-item[href*="/category/elements"]),body:has(.pg-sch)) .pftr__dusk::before{
  background:radial-gradient(26% 16% at 10% 6%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%),
    radial-gradient(30% 20% at 46% 9%,rgba(232,242,251,.85),rgba(232,242,251,0) 70%),
    radial-gradient(22% 14% at 84% 4%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%),
    radial-gradient(24% 22% at 64% 20%,rgba(205,227,249,.75),rgba(205,227,249,0) 70%),
    radial-gradient(18% 16% at 74% 15%,rgba(63,169,224,.45),rgba(63,169,224,0) 70%),
    radial-gradient(20% 22% at 20% 30%,rgba(214,232,250,.65),rgba(214,232,250,0) 70%),
    radial-gradient(26% 22% at 90% 26%,rgba(160,196,236,.55),rgba(160,196,236,0) 70%),
    radial-gradient(24% 20% at 56% 38%,rgba(26,79,156,.5),rgba(26,79,156,0) 70%),
    radial-gradient(22% 22% at 14% 42%,rgba(18,58,122,.5),rgba(18,58,122,0) 70%),
    radial-gradient(26% 20% at 80% 46%,rgba(22,41,107,.55),rgba(22,41,107,0) 70%)}
:is(body:has(.sort-link.active[href*="/category/elements"]),body:has(.article-page a.breadcrumbs-item[href*="/category/elements"]),body:has(.pg-sch)) .pftr__dusk>i{
  background:radial-gradient(22% 18% at 30% 26%,rgba(190,222,248,.6),rgba(190,222,248,0) 70%),
    radial-gradient(20% 16% at 70% 22%,rgba(210,226,255,.5),rgba(210,226,255,0) 70%),
    radial-gradient(24% 18% at 50% 40%,rgba(63,169,224,.35),rgba(63,169,224,0) 70%),
    radial-gradient(20% 18% at 92% 34%,rgba(232,242,251,.5),rgba(232,242,251,0) 70%),
    radial-gradient(22% 20% at 8% 36%,rgba(120,150,210,.45),rgba(120,150,210,0) 70%)}
:is(body:has(.sort-link.active[href*="/category/elements"]),body:has(.article-page a.breadcrumbs-item[href*="/category/elements"]),body:has(.pg-sch)) .pftr__sky::before{
  background:radial-gradient(42% 50% at 16% 70%,rgba(22,41,107,.55),rgba(22,41,107,0) 70%),
    radial-gradient(40% 46% at 44% 36%,rgba(26,79,156,.35),rgba(26,79,156,0) 70%),
    radial-gradient(36% 46% at 70% 78%,rgba(63,169,224,.18),rgba(63,169,224,0) 70%),
    radial-gradient(40% 50% at 88% 40%,rgba(40,60,140,.3),rgba(40,60,140,0) 70%),
    radial-gradient(30% 40% at 56% 58%,rgba(18,58,122,.4),rgba(18,58,122,0) 70%)}
:is(body:has(.sort-link.active[href*="/category/elements"]),body:has(.article-page a.breadcrumbs-item[href*="/category/elements"]),body:has(.pg-sch)) .pftr__sky::after{
  background:radial-gradient(34% 40% at 30% 30%,rgba(63,169,224,.22),rgba(63,169,224,0) 70%),
    radial-gradient(30% 36% at 76% 58%,rgba(120,140,220,.25),rgba(120,140,220,0) 70%),
    radial-gradient(36% 40% at 52% 86%,rgba(26,79,156,.3),rgba(26,79,156,0) 70%),
    radial-gradient(28% 34% at 12% 78%,rgba(10,20,64,.4),rgba(10,20,64,0) 70%)}
/* "Read also" on the section's sky: the section's own white glass on #footer .top is cleared here */
html body #footer.pftr.footer .top.pf-legacy{background:none!important;backdrop-filter:none!important}
html body #footer.pftr.footer .top.pf-legacy .next-page.pf-next{background:none!important;backdrop-filter:none!important}
/* on the blue sky the challenge line is a light azure, so it reads */
:is(body:has(.sort-link.active[href*="/category/elements"]),body:has(.article-page a.breadcrumbs-item[href*="/category/elements"]),body:has(.pg-sch)) .pf-dare__h .pf-hot{
  background-image:linear-gradient(90deg,#BFE3FF 0%,#7CC4EE 18%,#3FA9E0 34%,#9FD4FF 50%,#CDE3F9 66%,#3FA9E0 84%,#7CC4EE 100%)}
/* the buttons in the section's blues (their red gradient is written out in .pf-pill) */
:is(body:has(.sort-link.active[href*="/category/elements"]),body:has(.article-page a.breadcrumbs-item[href*="/category/elements"]),body:has(.pg-sch)) .pftr .pf-pill:not(.pf-pill--ghost){background:linear-gradient(100deg,#123A7A,#1A4F9C 50%,#2E7FC4);border-color:#1A4F9C}
:is(body:has(.sort-link.active[href*="/category/elements"]),body:has(.article-page a.breadcrumbs-item[href*="/category/elements"]),body:has(.pg-sch)) .pftr .pf-pill--ghost::after{background:linear-gradient(100deg,#123A7A,#1A4F9C 50%,#2E7FC4)}
/* no transitions until the footer has been on screen: otherwise its links play a colour change from the site's default link colour the first time they appear */
.pftr:not(.pf-ready) *,.pftr:not(.pf-ready) *::before,.pftr:not(.pf-ready) *::after{transition:none!important}

/* ELEMENTS in the Studio column, in the section's blues (lighter, to read on the night) */
.pftr .pf-fcol a.pf-elements{letter-spacing:.14em;text-transform:uppercase;font-size:12px;background-image:linear-gradient(90deg,#9FD4FF,#3FA9E0 45%,#7CC4EE 70%,#CDE3F9)!important;background-size:100% 100%!important;background-position:0 0!important;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.pftr .pf-fcol a.pf-elements:hover{filter:brightness(1.18)}

/* our products: a thin, quiet row */
.pf-products{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 36px;margin-top:56px;padding-top:28px;border-top:1px solid var(--line)}
.pf-products ul{display:flex;flex-wrap:wrap;gap:8px 34px}
.pf-products a,.pf-products span{font:100 clamp(20px,1.9vw,28px)/1.2 var(--sans);letter-spacing:.01em;color:var(--ink);transition:color .8s var(--e-soft)}
.pf-products span{color:var(--soft)}
.pf-products a:hover{color:var(--red-hi)}
.pf-products a i{font-style:normal;font-size:.6em;margin-left:6px;vertical-align:.5em;color:var(--mute)}
.pf-products+.pftr__mid{margin-top:36px}
@media (max-width:760px){
  .pf-products{flex-direction:column;align-items:center;text-align:center;margin-top:40px}
  .pf-products ul{justify-content:center}
}

/* "Further reading" with a preview of where it leads (site_footer.blade.php, 2026-10-17): the link on the left as before, the preview
   on the right: four services with their one line, the three latest projects, or the next project. One column on phones. */
html body .footer.pftr .top.pf-legacy .pf-next-wrap.has-more{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,3fr);gap:22px clamp(28px,4vw,64px);align-items:start;padding-top:clamp(28px,3vw,44px)}
html body .footer.pftr .top.pf-legacy .pf-next-wrap.has-more>.next-page.pf-next{padding-top:0}
html body .footer.pftr .top.pf-legacy .pf-next-wrap:has(>.next-page.hidden){display:none}
html body .footer.pftr .top.pf-legacy .pf-next-more{display:grid;color:var(--page-ink)}
html body .footer.pftr .top.pf-legacy .pf-next-more a{color:inherit;text-decoration:none}
/* Further reading, services (2026-10-18, owner: the white boxes over the footer gradient looked foreign): an editorial list
   on the paper, a red number, the name light and large, one line of description, a sliding arrow, hairlines, no boxes */
html body .footer.pftr .top.pf-legacy .pf-next-more--services{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,64px);background:none;border:0;counter-reset:pfnext}
html body .footer.pftr .top.pf-legacy .pf-next-card{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) 22px;grid-template-areas:"n t a" ". p .";gap:3px 10px;padding:11px 0 12px;background:none;border-top:1px solid rgba(45,45,45,.14);counter-increment:pfnext}
html body .footer.pftr .top.pf-legacy .pf-next-card::before{content:counter(pfnext,decimal-leading-zero);grid-area:n;padding-top:4px;font-size:9px;font-weight:600;letter-spacing:.16em;color:var(--red)}
/* the service names: regular weight, the light one read as hairlines (owner, 2026-10-22) */
html body .footer.pftr .top.pf-legacy .pf-next-card b{grid-area:t;font-weight:400;font-size:clamp(16px,1.25vw,19px);line-height:1.25;letter-spacing:-.015em;color:var(--page-ink);transition:color .5s var(--e-soft)}
html body .footer.pftr .top.pf-legacy .pf-next-card span{grid-area:p;font-size:12px;line-height:1.5;color:var(--page-soft);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
html body .footer.pftr .top.pf-legacy .pf-next-card i{grid-area:a;position:static;padding-top:1px;font-size:12px;font-style:normal;color:var(--red);transition:transform .9s var(--e-out)}
html body .footer.pftr .top.pf-legacy .pf-next-card:hover{background:none}
html body .footer.pftr .top.pf-legacy .pf-next-card:hover b{color:var(--red)}
html body .footer.pftr .top.pf-legacy .pf-next-card:hover i{transform:translateX(5px)}
html body .footer.pftr .top.pf-legacy .pf-next-more--projects{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
html body .footer.pftr .top.pf-legacy .pf-next-tile{display:flex;flex-direction:column;gap:10px}
html body .footer.pftr .top.pf-legacy .pf-next-tile__img{display:block;aspect-ratio:16/10;overflow:hidden;background:#EDE7DE}
html body .footer.pftr .top.pf-legacy .pf-next-tile__img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--e-out)}
html body .footer.pftr .top.pf-legacy .pf-next-tile:hover .pf-next-tile__img img,html body .footer.pftr .top.pf-legacy .pf-next-proj:hover .pf-next-tile__img img{transform:scale(1.04)}
html body .footer.pftr .top.pf-legacy .pf-next-tile b{font-weight:400;font-size:11px;letter-spacing:.18em;text-transform:uppercase;transition:color .5s var(--e-soft)}
html body .footer.pftr .top.pf-legacy .pf-next-tile:hover b{color:var(--red)}
html body .footer.pftr .top.pf-legacy .pf-next-proj{display:grid;grid-template-columns:minmax(160px,300px) minmax(0,1fr);gap:clamp(18px,2.4vw,36px);align-items:center;max-width:860px}
html body .footer.pftr .top.pf-legacy .pf-next-proj>span:last-child{font-size:15px;line-height:1.6;color:var(--page-soft)}
@media (max-width:900px){
  html body .footer.pftr .top.pf-legacy .pf-next-wrap.has-more{grid-template-columns:1fr}
}
@media (max-width:560px){
  html body .footer.pftr .top.pf-legacy .pf-next-more--services{grid-template-columns:1fr}
  html body .footer.pftr .top.pf-legacy .pf-next-card{grid-template-columns:26px minmax(0,1fr) 16px;padding:10px 0 11px}
  html body .footer.pftr .top.pf-legacy .pf-next-more--projects{gap:10px}
  html body .footer.pftr .top.pf-legacy .pf-next-tile b{font-size:9.5px;letter-spacing:.12em}
  html body .footer.pftr .top.pf-legacy .pf-next-proj{grid-template-columns:1fr}
}

/* Further reading with a preview (services, projects, the next case): the block sits on the paper, and the paper melts into the
   footer night right under it, the same soft way the footer starts elsewhere (2026-10-18) */
html body .footer.pftr .top.pf-legacy .pf-next-wrap.has-more{position:relative;z-index:2;padding-bottom:clamp(24px,3vw,40px)}
/* the heading of a block with a preview is smaller too */
html body .footer.pftr .top.pf-legacy .pf-next-wrap.has-more .next-page.pf-next h2{font-size:clamp(18px,1.7vw,24px)}
/* the paper behind the block, across the full width (sideways only, so it never covers the fade below) */
html body .footer.pftr .top.pf-legacy .pf-next-wrap.has-more::before{content:"";position:absolute;left:-100vmax;right:-100vmax;top:-120px;bottom:-1px;z-index:-1;pointer-events:none;background:var(--paper)}
html body .footer.pftr .top.pf-legacy .pf-next-wrap.has-more::after{content:"";position:absolute;left:-100vmax;right:-100vmax;top:calc(100% - 3px);height:260px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--paper) 0%,rgba(249,246,240,.96) 10%,rgba(246,240,235,.86) 22%,rgba(236,226,220,.7) 36%,rgba(214,194,187,.5) 52%,rgba(170,140,136,.28) 70%,rgba(110,80,84,.1) 86%,rgba(94,66,70,0) 100%)}

/* Further reading to the Portfolio (2026-10-18, owner): seven latest projects in a row that scrolls sideways and runs out to the right
   edge of the screen; the heading sits above it, larger, so it reads at once; arrows, a counter and a thin progress line on the right */
html body .footer.pftr .top.pf-legacy .pf-next-wrap.has-more:has(.pf-next-more--projects){grid-template-columns:minmax(0,1fr);gap:clamp(20px,2.4vw,32px)}
html body .footer.pftr .top.pf-legacy .pf-next-wrap.has-more:has(.pf-next-more--projects) .next-page.pf-next h2{font-weight:400;font-size:clamp(30px,3.4vw,52px);line-height:1;letter-spacing:-.02em}
html body .footer.pftr .top.pf-legacy .pf-next-wrap.has-more:has(.pf-next-more--projects) .next-page.pf-next .text p{color:var(--page-soft)!important}
html body .footer.pftr .top.pf-legacy .pf-next-more--projects{display:block;position:relative}
html body .footer.pftr .top.pf-legacy .pf-next-ctl{position:absolute;right:0;bottom:calc(100% + clamp(20px,2.4vw,32px));display:flex;align-items:center;gap:14px}
html body .footer.pftr .top.pf-legacy .pf-next-ctl button{width:40px;height:40px;padding:0;border:1px solid rgba(45,45,45,.2);border-radius:50%;background:none;font-size:15px;line-height:1;color:var(--page-ink);cursor:pointer;transition:border-color .5s var(--e-soft),color .5s var(--e-soft),opacity .5s var(--e-soft)}
html body .footer.pftr .top.pf-legacy .pf-next-ctl button:hover:not(:disabled){border-color:var(--red);color:var(--red)}
html body .footer.pftr .top.pf-legacy .pf-next-ctl button:disabled{opacity:.3;cursor:default}
html body .footer.pftr .top.pf-legacy .pf-next-count{min-width:44px;text-align:center;font-size:11px;letter-spacing:.14em;color:var(--page-mute)}
html body .footer.pftr .top.pf-legacy .pf-next-count b{font-weight:600;color:var(--page-ink)}
html body .footer.pftr .top.pf-legacy .pf-next-strip{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(240px,26vw,400px);gap:clamp(14px,1.6vw,24px);margin-right:calc(50% - 50vw);padding-right:5vw;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab}
html body .footer.pftr .top.pf-legacy .pf-next-strip::-webkit-scrollbar{display:none}
html body .footer.pftr .top.pf-legacy .pf-next-strip.is-drag{cursor:grabbing;scroll-snap-type:none}
html body .footer.pftr .top.pf-legacy .pf-next-strip.is-drag a{pointer-events:none}
html body .footer.pftr .top.pf-legacy .pf-next-strip>a{scroll-snap-align:start}
html body .footer.pftr .top.pf-legacy .pf-next-strip img{-webkit-user-drag:none;user-select:none}
html body .footer.pftr .top.pf-legacy .pf-next-bar{position:relative;height:1px;margin-top:clamp(18px,2vw,26px);background:rgba(45,45,45,.14);overflow:hidden}
html body .footer.pftr .top.pf-legacy .pf-next-bar i{position:absolute;left:0;top:0;bottom:0;width:var(--w,30%);background:var(--red);transform:translateX(var(--x,0));transition:transform .3s var(--e-soft)}
@media (max-width:767px){
  html body .footer.pftr .top.pf-legacy .pf-next-strip{grid-auto-columns:72vw;gap:12px}
  /* on phones the arrows go under the row, so they never meet the heading */
  html body .footer.pftr .top.pf-legacy .pf-next-more--projects{display:flex;flex-direction:column}
  html body .footer.pftr .top.pf-legacy .pf-next-bar{order:2}
  html body .footer.pftr .top.pf-legacy .pf-next-ctl{position:static;order:3;justify-content:flex-end;gap:8px;margin-top:14px}
  html body .footer.pftr .top.pf-legacy .pf-next-ctl button{width:34px;height:34px}
  html body .footer.pftr .top.pf-legacy .pf-next-tile b{font-size:10px}
}
/* the terms of use under the copyright line (owner, 2026-10-22) */
.pftr__legal .pftr__terms{display:block;margin-top:6px;max-width:92ch;line-height:1.55}

/* ---------- the paper footer (blog, articles, portfolio with its sections, industries and cases; owner, 2026-10-25) ----------
   The page colour all the way down: no night, no shimmer, no Milky Way (footer.js skips it), ink text; the reds and the 3D objects stay.
   site_footer.blade.php adds .pftr--paper (never on Elements, which keeps its blue night). */
.pftr.pftr--paper{--bg:var(--paper);--bg2:var(--paper);--ink:#2D2D2D;--soft:#5E5853;--mute:#736B64;--line:rgba(45,45,45,.12);--card:rgba(45,45,45,.025);--mark:rgba(45,45,45,.05);
  background:var(--paper);border-top:1px solid var(--line)}
.pftr.pftr--paper::before,.pftr.pftr--paper>.pftr__sky,.pftr.pftr--paper>.pftr__dusk{display:none}
.pftr.pftr--paper .pf-dare{padding-top:clamp(72px,8vw,128px)}
.footer.pftr.pftr--paper .top.pf-legacy:has(.next-page.pf-next:not(.hidden))+.pf-dare{padding-top:clamp(64px,7vw,112px)}
.pftr.pftr--paper .pf-dare .pf-eyebrow,.pftr.pftr--paper .pf-dare__row p,.pftr.pftr--paper .pf-lnk{color:var(--soft)}
.pftr.pftr--paper .pf-door--clients{background:linear-gradient(160deg,rgba(190,46,36,.07),rgba(190,46,36,0) 60%),var(--card)}
.pftr.pftr--paper .pf-fcol a.pf-elements{background-image:linear-gradient(90deg,#123A7A,#1A4F9C 45%,#2E7FC4 70%,#3FA9E0)!important}
html body .footer.pftr.pftr--paper .top.pf-legacy .pf-next-wrap.has-more::after{display:none}
.pftr.pftr--paper .pf-sign .pf-z{opacity:.35}
/* the outline buttons on the paper: the red sheen of .pf-pill showed through their clear fill, so it waits for the hover with the red */
.pftr.pftr--paper .pf-pill--ghost{border-color:rgba(45,45,45,.28)}
.pftr.pftr--paper .pf-pill--ghost::before{opacity:0;transition:opacity 1.2s var(--e-fill),background-position 2.4s var(--e-fill)}
.pftr.pftr--paper .pf-pill--ghost:hover::before{opacity:1}

/* Elements (owner, 2026-10-31): Further reading lies on the section's own white-blue sky, not on the paper, and the sky deepens softly
   into the footer's ultramarine night under it (the paper and its warm fade looked foreign there and the step was hard) */
:is(body:has(.sort-link.active[href*="/category/elements"]),body:has(.article-page a.breadcrumbs-item[href*="/category/elements"]),body:has(.pg-sch)) .footer.pftr .top.pf-legacy .pf-next-wrap.has-more::before{background:linear-gradient(180deg,rgba(226,238,250,0) 0,#E2EEFA 120px,#DCEAF8 100%)}
:is(body:has(.sort-link.active[href*="/category/elements"]),body:has(.article-page a.breadcrumbs-item[href*="/category/elements"]),body:has(.pg-sch)) .footer.pftr .top.pf-legacy .pf-next-wrap.has-more::after{display:block;height:340px;background:linear-gradient(180deg,#DCEAF8 0%,rgba(205,227,249,.94) 12%,rgba(170,204,240,.8) 26%,rgba(120,166,222,.6) 42%,rgba(62,109,176,.4) 60%,rgba(26,79,156,.2) 78%,rgba(18,58,122,0) 100%)}

/* Elements: the floating circle turns white over the blue footer night (footer.js sets html.fc-night; owner, 2026-10-31) */
html.fc-night #fixed svg path,html.fc-night #fixed svg text{fill:#fff!important}