/* About: one panel, shared by the park (over the frozen park) and the standalone page (over a still of the same view).
   Desktop: a light panel on the left, the Believin symbol in the park on the right. Phone: the park in a window at the
   top, the panel scrolls up over it. Same type and greys as the case panel, so it reads as one family. */
.a-wrap{position:fixed;z-index:9;left:var(--g);top:calc(var(--g) + 56px);bottom:var(--g);width:min(640px,50vw);border-radius:20px;overflow:hidden;
  background:#fff;box-shadow:0 50px 140px -40px rgba(40,10,10,.55);color:var(--ink)}
.a-scroll{height:100%;overflow-y:auto;overscroll-behavior:contain}
.a-wrap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none}   /* more below */
.a-close{position:absolute;top:14px;right:14px;z-index:2;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 0 0 1px #e6e3e0}
.a-close::before,.a-close::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.5px;background:var(--ink);translate:-50% -50%;rotate:45deg}
.a-close::after{rotate:-45deg}
.a-close:hover,.a-close:focus-visible{outline:1px solid var(--acc);outline-offset:0}

.about{--px:clamp(22px,4vw,52px);container-type:inline-size;padding:0 var(--px) clamp(48px,6vw,72px);display:grid;gap:clamp(40px,5vw,60px)}
.about .cap{margin:0;font:500 11px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:#6d6f71}
.about .cap b{color:var(--ink);font-weight:500}

/* hero: the brand book's B&W portrait across the full panel, the face large; the line sits in white on the dark shirt */
.a-hero{position:relative;margin:0 calc(-1 * var(--px));aspect-ratio:1;overflow:hidden;background:#1d1f21;color:var(--paper)}
.a-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.a-hero::after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(rgba(3,5,4,0),rgba(3,5,4,.82) 62%)}   /* keeps the line readable over the arms */
.a-say{position:absolute;z-index:1;left:var(--px);right:var(--px);bottom:clamp(24px,3.4vw,40px)}
.a-say .cap{color:rgba(255,255,255,.7)} .a-say .cap b{color:var(--paper)}
.a-hero h1{margin:12px 0 0;font-weight:300;font-size:clamp(28px,2.9vw,44px);line-height:1.02;letter-spacing:-.035em}
.a-hero h1 span{color:rgba(255,255,255,.6)}
.a-hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* why one beats a crowd: five short differences, two to a row */
.a-why{display:grid;gap:18px}
.a-why h2{margin:0;font-weight:300;font-size:clamp(24px,2.3vw,32px);line-height:1.08;letter-spacing:-.03em;color:var(--ink)}
.a-why h2 span{color:#8a8c8e}
.a-why h2 small{display:block;margin-top:8px;font-size:.56em;line-height:1.25;letter-spacing:-.015em;color:#8a8c8e}   /* the punchline, smaller, under the claim */
.a-why ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.a-why li{padding:18px 18px 17px;border:1px solid #e6e3e0;border-radius:14px}
.a-why .ic{display:block;width:24px;height:24px;margin-bottom:14px;fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.a-why .ic .f{fill:var(--ink);stroke:none}
.a-why li b{display:block;margin-bottom:6px;font-weight:500;font-size:16px;line-height:1.25;color:var(--ink)}
.a-why li span{display:block;font-size:15px;line-height:1.45;color:#55575a}


/* the road here, short: one line of story, then five stops whose marks thicken from hairline to the solid circle */
.a-road{display:grid;gap:18px;padding-top:28px;border-top:1px solid #e6e3e0}
.a-road > p{margin:0;font-size:clamp(16px,1.2vw,18px);line-height:1.45;color:#3c3e40}
.a-road h2{margin:0;font-size:clamp(16px,1.2vw,18px);font-weight:500;line-height:1.3;letter-spacing:0}
.a-logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden}
.a-logos li{height:78px;padding:15px 14px;margin:0 -1px -1px 0;border:solid #ebe8e5;border-width:0 1px 1px 0;display:flex}   /* hairlines between the cells only: the outer ones fall off the edge */
.a-logos li:nth-child(n+13){display:none}
.a-logos img{display:block;width:100%;height:100%;object-fit:contain;filter:grayscale(1);transition:filter .25s}   /* one tone, so the brands don't compete; the real colours on hover */
.a-logos img:is([alt="Movu"],[alt="Televic"],[alt="Neuhaus"]){filter:grayscale(1) brightness(.6)}   /* pale colours turn too light in grey */
@media (hover:hover){.a-logos li:hover img{filter:none}}
.a-wall{position:relative;display:grid;gap:18px}
.a-all{position:absolute;left:50%;top:0;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}   /* the panel carries no script: a checkbox holds "show all"; focusing it scrolls to it, so it sits at the top of the wall */
.a-all:checked ~ .a-logos li:nth-child(n+13){display:flex;animation:a-in .45s ease-out both}
@keyframes a-in{from{opacity:0;translate:0 6px}}
.a-more{justify-self:center;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid #cfcdcb;border-radius:999px;font-size:14px;color:var(--ink);cursor:pointer;transition:border-color .2s}
.a-more:hover,.a-all:focus-visible ~ .a-more{border-color:var(--acc)}
.a-more .on,.a-all:checked ~ .a-more .off{display:none}
.a-all:checked ~ .a-more .on{display:inline}
.a-more svg{transition:rotate .25s}
.a-all:checked ~ .a-more svg{rotate:180deg}
@media (prefers-reduced-motion:reduce){.a-all:checked ~ .a-logos li:nth-child(n+13){animation:none}}

/* two places, one person */

.a-row{display:flex;gap:10px;flex-wrap:wrap}
.a-row-top{margin-top:22px}   /* the call to action under the opening text, as in a case */
.a-row a{font:400 15px/1 var(--f);color:var(--ink);border:1px solid #cfcdcb;border-radius:999px;padding:14px 18px;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.a-row a.full{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.a-row a:hover,.a-row a:focus-visible{border-color:var(--acc);outline:none}

@container (max-width:520px){
  .a-hero{aspect-ratio:4/5}   /* narrow: a little taller, so the line fits below the face */
  .a-why ul{grid-template-columns:minmax(0,1fr)}
  .a-logos{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* phone: the park stays in a window at the top, the panel scrolls up over it */
@media (max-width:760px){
  .a-wrap{left:0;right:0;top:0;bottom:0;width:auto;border-radius:0;background:none;box-shadow:none;overflow:visible}
  .a-wrap::after{display:none}
  .a-scroll{-webkit-overflow-scrolling:touch}
  .about{margin-top:40vh;min-height:60vh;background:#fff;border-radius:20px 20px 0 0;overflow:hidden;box-shadow:0 -30px 80px -40px rgba(40,10,10,.5)}
  .a-close{position:sticky;display:block;top:12px;right:auto;margin:calc(40vh + 12px) 12px calc(-40vh - 60px) auto;z-index:3}   /* rides on the panel's top corner, then stays at the top of the screen */
}

/* Contact shares this panel: a title, then the call and the mail as two big taps. */
.w-head{display:grid;gap:14px;padding-top:clamp(64px,7vw,88px)}
.w-head h1{margin:0;font-weight:300;font-size:clamp(30px,3.1vw,46px);line-height:1.02;letter-spacing:-.035em;color:var(--ink)}
.w-head h1 span{color:#8a8c8e}
.w-head h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.w-why{margin:4px 0 0;font-size:clamp(17px,1.3vw,19px);color:#3c3e40}
.c-ways{display:grid;gap:10px}
.c-way{display:grid;gap:8px;padding:22px 22px 20px;border-radius:16px;background:var(--ink);color:var(--paper);text-decoration:none;transition:transform .25s}
.c-way .cap{color:rgba(255,255,255,.6)}
.c-way b{font-weight:300;font-size:clamp(26px,2.6vw,38px);letter-spacing:-.03em;line-height:1.05}
.c-way + .c-way{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px #e6e3e0} .c-way + .c-way .cap{color:#6d6f71}
.c-way:hover,.c-way:focus-visible{transform:translateY(-2px);outline:none}
.c-note{margin:0;font-size:clamp(16px,1.2vw,18px);line-height:1.45;color:#55575a}

/* What I make shares the About cards, with a low-poly illustration on each instead of a line icon. */
.a-why .m-ill{display:block;width:128px;height:128px;margin:-8px 0 8px -12px}