/* 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}

/* ---------- 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"])) .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"])) .pftr::before{display:none}
:is(body:has(.sort-link.active[href*="/category/elements"]),body:has(.article-page a.breadcrumbs-item[href*="/category/elements"])) .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"])) .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"])) .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"])) .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"])) .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"])) .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"])) .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}
}