/* Client refinements: portrait footage, stepped edges and neutral glass. */
:root{
  --glass-alpha:.5;
  --glass:rgba(26,29,32,var(--glass-alpha));
  --glass-sheen:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.025) 48%,rgba(255,255,255,.06));
  --glass-shadow:0 16px 36px -16px rgba(30,12,22,.4);
  --glass-blur:12px;
  --glass-saturation:1.15;
  /* Dock icons: a near-white at partial strength reads as frosted glass and keeps
     contrast over pink; the flat #b4b6b8 grey went muddy on the clear material. */
  --dock-icon:#f1f2f3;   /* a breath off white at rest; pure white on hover and for the current section */
  --dock-icon-on:#fff;
  --tile-width:min(10vw,15vh);
  --aura-a:rgba(255,168,204,.9);
  --aura-b:rgba(255,230,240,.62);
  --aura-c:rgba(238,110,165,.85);
}
:root[data-theme="dark"]{
  /* Night uses the same clear glass as day. The original night recipe (a vertical
     top-lit sheen over a heavy tint) read as a glossy reflection band; on a dark page
     any white highlight shows far more, so the sheen here is fainter still. */
  --glass:rgba(26,29,32,.6);
  --glass-sheen:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.012) 48%,rgba(255,255,255,.03));
  --glass-saturation:1.15;
  --glass-shadow:0 16px 36px -16px rgba(0,0,0,.6)}
[data-glass="clear"]{--glass:rgba(26,29,32,var(--glass-alpha,.3));--glass-blur:12px;--glass-saturation:1.15}
[data-glass="frost"]{--glass:rgba(50,52,56,.62);--glass-blur:32px;--glass-saturation:.5}
[data-glass="smoke"]{--glass:rgba(29,30,31,.76);--glass-blur:24px;--glass-saturation:.65}
[data-glass="pearl"]{--glass:rgba(116,118,123,.62);--glass-blur:28px;--glass-saturation:.4}
[data-glass="liquid"]{--glass:rgba(29,30,33,.6);--glass-blur:18px;--glass-saturation:.7;--glass-sheen:linear-gradient(160deg,rgba(255,255,255,.24),rgba(255,255,255,.025) 28%,rgba(255,255,255,.02) 70%,rgba(255,255,255,.13));--glass-shadow:0 16px 36px -16px rgba(30,12,22,.4),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(255,255,255,.14)}
body{overflow-x:clip}
.glass{background:var(--glass-sheen),var(--glass);box-shadow:var(--glass-shadow);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation))}
.aura i:nth-child(1){animation-duration:5.4s;animation-delay:-2.3s}
.aura i:nth-child(2){animation-duration:6.9s;animation-delay:-3.8s}
.aura i:nth-child(3){animation-duration:8.5s;animation-delay:-3.1s}
/* Page edges: a progressive blur, Apple's scroll-edge treatment. Four thin layers, each
   blurring a little more and reaching a little less far, so content softens smoothly
   toward the edge instead of smearing under one heavy blur. The parent carries no
   opacity, mask or filter of its own: any of those makes it a backdrop root and the
   layers would blur nothing. JS fades them in through --veil. */
.topveil,.botveil{opacity:1;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;-webkit-mask:none;mask:none;will-change:auto}
.topveil{height:calc(var(--pin-y) + 46px)}
.botveil{height:64px}
.topveil i,.botveil i{position:absolute;inset:0;opacity:var(--veil,0)}
.topveil i:nth-child(1),.botveil i:nth-child(1){backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px)}
.topveil i:nth-child(2),.botveil i:nth-child(2){backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.topveil i:nth-child(3),.botveil i:nth-child(3){backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.topveil i:nth-child(4),.botveil i:nth-child(4){backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.topveil i:nth-child(1){-webkit-mask:linear-gradient(#000 55%,transparent);mask:linear-gradient(#000 55%,transparent)}
.topveil i:nth-child(2){-webkit-mask:linear-gradient(#000 35%,transparent 75%);mask:linear-gradient(#000 35%,transparent 75%)}
.topveil i:nth-child(3){-webkit-mask:linear-gradient(#000 15%,transparent 50%);mask:linear-gradient(#000 15%,transparent 50%)}
.topveil i:nth-child(4){-webkit-mask:linear-gradient(#000,transparent 30%);mask:linear-gradient(#000,transparent 30%)}
.botveil i:nth-child(1){-webkit-mask:linear-gradient(to top,#000 55%,transparent);mask:linear-gradient(to top,#000 55%,transparent)}
.botveil i:nth-child(2){-webkit-mask:linear-gradient(to top,#000 35%,transparent 75%);mask:linear-gradient(to top,#000 35%,transparent 75%)}
.botveil i:nth-child(3){-webkit-mask:linear-gradient(to top,#000 15%,transparent 50%);mask:linear-gradient(to top,#000 15%,transparent 50%)}
.botveil i:nth-child(4){-webkit-mask:linear-gradient(to top,#000,transparent 30%);mask:linear-gradient(to top,#000,transparent 30%)}
/* a breath of the ground colour behind the pinned wordmark only; the bottom stays clear */
.topveil::before{content:"";position:absolute;inset:0;opacity:var(--veil,0);background:linear-gradient(rgba(var(--bg-rgb),.42),rgba(var(--bg-rgb),.12) 60%,rgba(var(--bg-rgb),0))}

/* The lower tiles remain intact beyond the sticky frame. The margin reserves
   their physical height plus the deliberate pause before the brands. */
.hero{margin-bottom:clamp(150px,19vw,320px)}
.hero-stick{overflow:visible;overflow-x:clip}
.floaters{mask:none;-webkit-mask:none}
.floaters .float{width:var(--tile-width)}
.floaters .float:has(.chip){width:auto}
/* A slow, constant float: each clip bobs ~6px and drifts ~3px and back, eased at both
   ends, each on its own duration and starting point (--fd, set in index.html) so the
   wall never moves in step. */
.fl-i{animation:bob var(--dur,10s) ease-in-out var(--fd,0s) infinite}
@keyframes bob{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(calc(var(--dx,4px) * .5),calc(var(--dy,-11px) * .55),0)}
}
.chip.logo .lg-img{max-width:9em}
.mainvideo .frame{isolation:isolate}
.mainvideo .mimg,.mainvideo .mv{object-fit:contain}
.mainvideo:focus-visible{outline:2px solid var(--strong);outline-offset:6px;border-radius:22px}
.mainvideo .mv{z-index:2}
.boardstat{top:calc(53% + min(26vh,290px) + 26px);bottom:auto;display:flex;gap:clamp(25px,4vw,64px);align-items:start;white-space:nowrap;opacity:0;color:var(--strong);text-shadow:none;transition:opacity .35s ease;pointer-events:none}
.boardstat b{font-size:clamp(1.65rem,3vw,2.7rem);font-weight:400}
.boardstat span{display:block;margin-top:8px;font-size:11px;letter-spacing:.04em;color:var(--strong);text-transform:uppercase}
.hero-controls{position:absolute;z-index:5;inset:auto 0 0;padding:24px 12px 12px;background:linear-gradient(transparent,rgba(0,0,0,.68));opacity:0;pointer-events:none;transition:opacity .18s ease}
.mainvideo:hover .hero-controls,.mainvideo:focus-within .hero-controls,.mainvideo.controls-visible .hero-controls{opacity:1;pointer-events:auto}
.hero-control-row{display:flex;align-items:center;gap:6px}
.hero-controls button{display:grid;place-items:center;width:44px;height:44px;padding:10px;flex:none;color:#fff;border-radius:50%}
.hero-controls button:hover{background:rgba(255,255,255,.16)}
.hero-controls button:focus-visible,.hero-controls input:focus-visible{outline:2px solid #fff;outline-offset:1px}
.hero-controls svg{width:20px;height:20px}
#heroTime{font-size:.7rem;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
#heroMute{margin-left:auto}
.hero-controls .pause-icon,.hero-controls .sound-on{display:none}
.mainvideo.is-playing .play-icon,.mainvideo.sound-enabled .sound-off{display:none}
.mainvideo.is-playing .pause-icon,.mainvideo.sound-enabled .sound-on{display:block}
#heroSeek{display:block;appearance:none;-webkit-appearance:none;width:100%;height:20px;margin:0;background:transparent;cursor:pointer;--seek:0%}
#heroSeek::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(to right,#fff var(--seek),rgba(255,255,255,.3) var(--seek))}
#heroSeek::-moz-range-track{height:3px;border-radius:3px;background:rgba(255,255,255,.3)}
#heroSeek::-moz-range-progress{height:3px;background:#fff}
#heroSeek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:9px;height:9px;margin-top:-3px;border-radius:50%;background:#fff}
#heroSeek::-moz-range-thumb{width:9px;height:9px;border:0;border-radius:50%;background:#fff}
#heroSeek:disabled{opacity:.5;cursor:default}
.hero-error{position:absolute;z-index:6;inset:auto 12px 94px;margin:0;padding:12px;border-radius:12px;background:rgba(20,20,20,.88);font-size:.78rem;color:#fff;line-height:1.4}
.hero-error button{padding:8px 0;text-decoration:underline}

/* Four consistent logo slots on desktop, two on phones. */
.brands{padding:0 0 clamp(124px,16.4vw,262px)}
.gallery>.sr-only+.catsec{margin-top:0}
.marquee{width:min(72%,1060px);--fade:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.marquee-track{width:calc(100% * 28 / 3.4);gap:0;animation-duration:84s}
.bm{width:calc(100% / 28);flex:none;height:100px;justify-content:center;padding:0 clamp(24px,3.5vw,64px)}
.bm img{width:100%;max-width:240px;height:55px}
.bm.h-tall img{height:78px}.bm.h-mid img{height:64px}.bm.h-low img{height:56px}.bm.h-long img{height:48px}
.gallery{padding-top:0}
.catsec{margin-top:clamp(70px,9vw,130px)}
.catsec:first-child{margin-top:0}
.cases{padding-top:clamp(110px,13vw,190px);padding-bottom:0}
.says{padding-top:clamp(110px,13vw,190px);padding-bottom:0}
.cta{padding-top:clamp(110px,13vw,190px);padding-bottom:clamp(110px,13vw,190px)}
.sec-head{margin-bottom:42px}
.section[id]{scroll-margin-top:110px}

/* Full portrait imagery with independent, readable frosted overlays. */
.case-gal{--case-gap:28px}
.case{position:relative;isolation:isolate;overflow:hidden;min-height:680px;aspect-ratio:9/13;padding:28px;gap:0;border:0;border-radius:32px;background:none;box-shadow:none;justify-content:flex-end;opacity:1}
.case .thumb{background:none;box-shadow:none}
.case.fg:hover{translate:none}
.case .thumb{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:inherit;scale:1;z-index:-1}
.case .thumb .mimg{object-position:center;object-fit:cover}
.case .thumb::after{background:linear-gradient(transparent 25%,rgba(0,0,0,.18))}
.case-brand{position:absolute;top:28px;left:28px;max-width:calc(100% - 56px);padding:16px 28px;border-radius:999px;font-size:clamp(1rem,2vw,1.55rem);font-weight:600;background:rgba(15,16,17,.65);backdrop-filter:blur(22px) saturate(.8);-webkit-backdrop-filter:blur(22px) saturate(.8);box-shadow:none;color:#fff}
.case-info{background:rgba(18,19,20,.76);backdrop-filter:blur(26px) saturate(.8);-webkit-backdrop-filter:blur(26px) saturate(.8);padding:26px;border-radius:26px;box-shadow:none}
.case .body h3{font-family:"Satoshi",system-ui,sans-serif;font-size:clamp(1.25rem,2vw,1.7rem);font-weight:500;line-height:1.2;letter-spacing:-.02em;margin-bottom:12px;text-wrap:balance}
.case .body p{color:#ddd;line-height:1.45;font-size:1rem}
.case .metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px;padding-top:20px;border-color:rgba(255,255,255,.12)}
.case .metric b{font-family:"Satoshi",system-ui,sans-serif;font-size:clamp(1.05rem,1.9vw,1.5rem);font-weight:600;letter-spacing:-.02em}
.case .metric span{display:block;font-size:11px;letter-spacing:0;color:#ccc;margin-top:7px}
.case-arrow{z-index:3;background:rgba(20,20,20,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:1;width:44px;height:44px}
.case-prev{left:12px}.case-next{right:12px}
.case-dot{height:44px;min-width:32px}
/* The dark base lives on the aurora layer, not the card: a clipped canvas over a dark card
   background leaves a thin dark rim at the rounded edge (Safari), which read as a frame. */
.cta-card{border:0;background:transparent;box-shadow:none;isolation:isolate;
  /* a crisp edge, no drawn frame: the dark base lives on .cta-aura, and a solid (fully
     opaque) mask makes Safari clip the canvas to the rounded corners exactly instead of
     leaving a hairline of whatever sits underneath. It blurs nothing. */
  -webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000)}
.cta-aura{background:rgba(10,6,8,.94)}
.cta-aura canvas{inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);opacity:.78}
:root[data-theme="dark"] .cta-card{background:transparent}
:root[data-theme="dark"] .cta-aura{background:rgba(21,14,18,.94)}

/* One moving selection surface, with a neutral tint that resists pink bleed. */
.dock-inner{position:relative;isolation:isolate}
.dock-indicator{position:absolute;left:0;top:8px;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.14);box-shadow:none;transition:transform .28s cubic-bezier(.2,.8,.2,1);pointer-events:none;z-index:-1}
.dock button{color:var(--dock-icon);transition:color .18s ease}
.dock button.active{background:none;color:var(--dock-icon-on)}
.dock button:hover{background:none;transform:none;color:var(--dock-icon-on)}
.dock button:focus-visible{outline:2px solid #ddd;outline-offset:1px}
.dock .tip{translate:-50% 0;transform:translateY(4px)}
.dock button:hover .tip,.dock button:focus-visible .tip{opacity:1;transform:translateY(0)}
.dock .sep{background:rgba(255,255,255,.13)}

/* Details are collapsed at each opening. Only the brand list itself scrolls. */
.search{padding-top:20vh;overflow-y:auto;overscroll-behavior:contain}
.search-panel{width:min(1104px,100%);max-height:calc(100dvh - 20vh - 24px);overflow-y:auto;padding:3px}
.search-panel::-webkit-scrollbar{width:2px}.search-panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:2px}
.search-groups{align-items:start}
.sgroup{padding:0;border:0;border-radius:18px;overflow:hidden}
.sgroup .ghead{list-style:none;width:100%;margin:0;padding:20px;min-height:60px;font-size:.86rem;letter-spacing:.01em;text-transform:none;color:#eee;cursor:pointer}
.sgroup .ghead::-webkit-details-marker{display:none}
.sgroup .ghead svg{transition:transform .2s ease;color:#999}
.sgroup[open] .ghead svg{transform:rotate(180deg)}
.sgroup[open] .ghead{padding-bottom:14px}
.sgroup summary:focus-visible{outline:2px solid #ddd;outline-offset:-4px}
.sgroup #sgCats,.sgroup .sdim{margin-inline:20px}
.sgroup #sgCats{padding-bottom:14px}
.sgroup .sdim:last-child{margin-bottom:14px}
.brand-alphabet{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:0;padding:0 16px 10px}
.brand-alphabet button{min-width:0;flex:none;height:22px;padding:0 2px;font-size:10px;line-height:22px;letter-spacing:.02em;color:#8e8e8e;border-radius:11px;transition:color .18s,background .18s}
.brand-alphabet button:first-child{padding:0 6px}
.brand-alphabet button:hover,.brand-alphabet button[aria-pressed="true"]{background:rgba(255,255,255,.1);color:#fff}
.brand-alphabet button:focus-visible{outline:1px solid #ddd;outline-offset:-2px}
.brand-scroll{direction:rtl;max-height:288px;overflow-y:auto;overscroll-behavior:contain;margin:0 14px 18px 12px;padding-left:8px;}
#sgBrands{direction:ltr}
.brand-scroll::-webkit-scrollbar{width:2px}
.brand-scroll::-webkit-scrollbar-track{background:transparent}
.brand-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border:0;border-radius:2px}
.sgroup a{height:48px;font-size:.87rem}
.sgroup a[hidden]{display:none}
.sgroup a:hover{transform:translateX(3px)}
.sgroup a .n{color:#a6a19c}
.sgroup a:focus-visible{outline-color:#ddd}

@media(max-width:1120px){
  .floaters .float{width:var(--tile-width)}
  .float.hide-md{display:block}
  .case{min-height:610px;padding:22px}
  .case-info{padding:22px}
}
@media(max-width:900px){
  .case{min-height:650px;max-height:850px;aspect-ratio:9/12}
  .search-groups{grid-template-columns:1fr;gap:10px}
  .brand-alphabet button{min-width:22px;height:30px;line-height:30px;font-size:11px}
}
@media(max-width:560px){
  .hero{margin-bottom:120px}
  .floaters .float{display:none}
  .floaters .pA,.floaters .pB,.floaters .pC,.floaters .pD,.floaters .pE{display:block;width:min(26vw,13vh);left:var(--mobile-x)!important;top:var(--mobile-y)!important}
  .floaters .pC{--mobile-x:2%;--mobile-y:4%}
  .floaters .pD{--mobile-x:36.5%;--mobile-y:-2%}
  .floaters .pE{--mobile-x:71%;--mobile-y:4%}
  .floaters .pA{--mobile-x:2%;--mobile-y:60%}
  .floaters .pB{--mobile-x:71%;--mobile-y:60%}
  .mainvideo{--mvh:min(60dvh,110vw);height:var(--mvh);top:calc(7.5% + 40px + var(--mvh)/2)}
  .boardstat{top:calc(7.5% + 60px + min(60dvh,110vw));gap:32px}
  .boardstat b{font-size:1.8rem}
  .boardstat span{font-size:11px;letter-spacing:0;text-transform:none}
  .hero-controls{padding-inline:10px}
  .marquee{width:94%}
  .marquee-track{width:1400%}
  .bm{padding-inline:24px;height:80px}
  .bm img{height:40px}.bm.h-tall img{height:64px}.bm.h-mid img{height:52px}.bm.h-low img{height:44px}.bm.h-long img{height:34px}
  .brands{padding-bottom:90px}
  .cases,.says,.cta{padding-top:100px}
  .sec-head{margin-bottom:28px}
  .case{min-height:570px;aspect-ratio:9/15;padding:18px;border-radius:26px}
  .case-brand{top:20px;left:20px;padding:12px 22px;font-size:1.15rem}
  .case-info{padding:20px;border-radius:22px}
  .case .body p{font-size:.9rem}
  .case .metrics{gap:8px;padding-top:18px;margin-top:20px}
  .case .metric span{font-size:11px}
  .dock{bottom:max(18px,env(safe-area-inset-bottom))}
  .dock-indicator{width:46px;height:46px}
  .search{padding:8vh 16px 20px}
  .search-field{padding:16px;gap:10px}
  .search-field>svg{width:20px;height:20px}
  .search-close{width:44px;height:44px}
  .search-nav a{padding:10px 15px;font-size:.84rem}
}
@media(prefers-reduced-motion:reduce){
  .aura i,.fl-i,.marquee-track{animation:none!important}
  .dock-indicator,.boardstat,.hero-controls{transition:none}
}
@supports not (backdrop-filter:blur(1px)){
  .glass,.case-info,.case-brand{background:rgba(29,30,31,.96)}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Desktop wall: JS places every tile in one balanced grid (see cacheCells). Only the
   slots it fills are shown; logos take short slots centred in their column. */
.floaters.wall .float{display:none}
.floaters.wall .float.slotted{display:block}
.floaters.wall .float.logo-slot .fl-i{height:100%;display:flex;align-items:center;justify-content:center}
.floaters.wall .float.logo-slot .chip.logo .lg-img{max-width:100%}

/* Count and title share one baseline. overflow:hidden makes the h3 a scroll container,
   and some engines then put its baseline at the box's bottom edge, dropping the count. */
.cat-title{align-items:baseline}
.cat-head h3{overflow:clip}

/* Chrome ignores ::-webkit-scrollbar once scrollbar-width is set, which is what made the
   bars wide and bright; the standard properties are for Firefox alone. */
@supports not selector(::-webkit-scrollbar){
  .brand-scroll,.search-panel{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
}

/* Mehr: the same glass as the dock instead of an ink pill */
.mehr{background:var(--glass-sheen),var(--glass);box-shadow:var(--glass-shadow);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation))}
.mehr:hover{box-shadow:var(--glass-shadow)}

/* While the rail is moving its edges take a faint dark shade, never transparency: a
   see-through card let the pink page show through it. Cards stay solid. The shade
   sits on the cards' band (the rail pads 12px above, 16px below) with their corners. */
.case-view::before,.case-view::after{content:"";position:absolute;top:12px;bottom:16px;width:64px;z-index:2;
  pointer-events:none;opacity:0;transition:opacity .45s cubic-bezier(.2,.7,.2,1)}
.case-view::before{left:0;border-radius:32px 0 0 32px;background:linear-gradient(90deg,rgba(14,9,12,.2),rgba(14,9,12,.07) 45%,transparent)}
.case-view::after{right:0;border-radius:0 32px 32px 0;background:linear-gradient(270deg,rgba(14,9,12,.2),rgba(14,9,12,.07) 45%,transparent)}
.case-view:has(.case-rail.is-moving)::before,.case-view:has(.case-rail.is-moving)::after{opacity:1;transition-duration:.2s}

/* Footer: white type, pink accents */
.foot-top,.foot-cols a,.foot-bottom,.foot-social a{color:#fff}
.foot-top .dim,.foot-cols h4{color:var(--pink)}
.foot-cols a{opacity:.86}
.foot-cols a:hover{opacity:1;color:#fff}
.foot-bottom{border-top-color:rgba(255,255,255,.12)}
/* the bottom only keeps room for the floating dock (its height + its offset + a breath) */
.foot{padding-bottom:calc(max(18px,env(safe-area-inset-bottom)) + 64px + 22px)}

/* The headline figures are parked for now (topic open); the space goes back to the wall. */
.boardstat{display:none!important}

/* Search: glass panels like the rest of the site, and lighter page pills */
.search-field,.sgroup,.sres-empty{border:0;background:var(--glass-sheen),var(--glass);box-shadow:var(--glass-shadow);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation))}
.search-field input::placeholder{color:rgba(255,255,255,.55)}
.search-field>svg{color:rgba(255,255,255,.75)}
.search-close{background:rgba(255,255,255,.12)}
.sgroup a{border-bottom-color:rgba(255,255,255,.08)}
.search-nav{gap:8px;margin-top:12px}
.search-nav a{border:0;padding:8px 16px;font-family:"Satoshi",system-ui,sans-serif;font-size:.84rem;font-weight:500;letter-spacing:.01em;
  background:var(--glass-sheen),var(--glass);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur))}
.search-nav a:hover{background:rgba(255,255,255,.2);color:#fff;transform:none}

/* no drawn frames on floating surfaces */
.quote{border:0;color:#fff;background:var(--glass-sheen),var(--glass);box-shadow:var(--glass-shadow);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation))}
.quote .who span{color:rgba(255,255,255,.7)}

/* Search, round 4: lower on the page, everything 20% larger, darker and more opaque glass */
.search{--sglass:rgba(12,13,15,.76)}
.search-field,.sgroup,.sres-empty{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015) 48%,rgba(255,255,255,.035)),var(--sglass)}
.search-nav a{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015) 48%,rgba(255,255,255,.035)),var(--sglass)}
.search-nav a:hover{background:rgba(255,255,255,.18)}
.search-field{border-radius:26px;padding:26px 31px;gap:19px}
.search-field>svg{width:31px;height:31px}
.search-field input{font-size:clamp(1.56rem,4.1vw,2.64rem)}
.search-close{width:48px;height:48px}
.search-close svg{width:19px;height:19px}
.search-groups{gap:19px;margin-top:19px}
.sgroup{border-radius:22px}
.sgroup .ghead{padding:24px;min-height:72px;font-size:1.03rem}
.sgroup .ghead svg{width:19px;height:19px}
.sgroup[open] .ghead{padding-bottom:17px}
.sgroup #sgCats,.sgroup .sdim{margin-inline:24px}
.sgroup #sgCats{padding-bottom:17px}
.sgroup a{height:58px;font-size:1.04rem}
.sgroup a .n,.sgroup .sdim .n{font-size:.96rem}
.sgroup .sdim{font-size:1.04rem;padding:13px 5px}
.brand-alphabet{padding:0 19px 12px}
.brand-alphabet button{height:26px;line-height:26px;font-size:12px;border-radius:13px}
.brand-scroll{max-height:346px}
.search-nav{gap:10px;margin-top:14px}
.search-nav a{padding:10px 19px;font-size:1rem}
.sres-empty{border-radius:24px;padding:31px}
@media(max-width:900px){
  .search{padding:14vh 16px 20px}
  .search-panel{max-height:calc(100dvh - 14vh - 20px)}
  .search-field{padding:19px;gap:12px}
  .search-field>svg{width:24px;height:24px}
  .search-close{width:48px;height:48px}
  .search-groups{gap:12px}
  .search-nav a{padding:12px 18px;font-size:1rem}
}
@media(max-width:480px){
  .search-nav{gap:6px;flex-wrap:nowrap}
  .search-nav a{padding:11px 12px;font-size:.92rem;white-space:nowrap}
}
@media(max-width:380px){.search-nav a{padding:11px 8px;font-size:.9rem}}

/* ---- Phones & small tablets: each category is a swipe row, Instagram-style ----
   All five clips stay; the row runs edge to edge and the next clip peeks in at the
   right, which is the cue that it scrolls. The page itself never scrolls sideways:
   the row is exactly the viewport wide (it cancels the .wrap gutter it sits in). */
@media (max-width:860px){
  .cat-row{--gut:clamp(20px,5vw,56px);display:grid;grid-auto-flow:column;grid-template-columns:none;
    grid-auto-columns:calc((100% - 2*var(--gut) - 2*14px) / 3.35);gap:14px;
    /* the tiles' drop shadow reaches ~66px below them; a scroller clips at its padding
       box, so it gets that room (and gives it back with the margin) or the shadow is cut
       into a hard line that reads as a box behind the row */
    margin:-10px calc(-1*var(--gut)) -72px;padding:10px var(--gut) 72px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cat-row::-webkit-scrollbar{display:none}
  .cat-row .vcard,.cat-row .vcard:nth-child(n+3),.cat-row .vcard:nth-child(n+4),.cat-row .vcard:nth-child(n+5){display:block}
  .cat-row .vcard{scroll-snap-align:start}
}
@media (max-width:620px){
  /* two and a bit in view: big enough to read the clip, small enough to show there is more */
  .cat-row{gap:12px;grid-auto-columns:calc((100% - 2*var(--gut) - 12px) / 2.3)}
}
@media (hover:none){ .cat-row .vcard:hover{transform:none} }

/* Phone opening: three clips above the wordmark and three below it, mirrored about it.
   Each side pair sits the same gap from the mark (its ~61px plate + 34px); the centre clip
   of each row sits 30px further out, a lens around the name, all fully on screen. */
@media(max-width:560px){
  /* tile width: 26vw, or less on a short phone so the top row still clears the rail
     (rail bottom ~7.5% + 21px; top row top = 42% - 65px - tile height) */
  .floaters{--tw:min(26vw,calc(19.4vh - 53px));--t:calc(var(--tw) * 16 / 9);--o:65px;--lens:30px}
  .floaters .pA,.floaters .pB,.floaters .pC,.floaters .pD,.floaters .pE{width:var(--tw)}
  .floaters .pF{display:block;width:var(--tw);left:var(--mobile-x)!important;top:var(--mobile-y)!important}
  .floaters .pE{display:block}
  /* mirrored across the centre line whatever the tile width */
  .floaters .pC,.floaters .pA{--mobile-x:2%}
  .floaters .pE,.floaters .pB{--mobile-x:calc(98% - var(--tw))}
  .floaters .pD,.floaters .pF{--mobile-x:calc(50% - var(--tw) / 2)}
  .floaters .pC,.floaters .pE{--mobile-y:calc(42% - var(--o) - var(--t))}
  .floaters .pD{--mobile-y:calc(42% - var(--o) - var(--t) - var(--lens))}
  .floaters .pA,.floaters .pB{--mobile-y:calc(42% + var(--o))}
  .floaters .pF{--mobile-y:calc(42% + var(--o) + var(--lens))}
  /* The Hauptvideo sits centred between the pinned mark (7.5% + ~16px) and the dock
     (~84px from the bottom), with equal room above and below it. */
  .mainvideo{--mvh:min(62dvh,112vw);top:calc(53.75% - 34px);will-change:transform,opacity}
  /* +18vh of scroll in which the finished stage rests (see HOLD in index.html); no
     scroll-snap — on iOS a snap point felt like the page grabbing the finger */
  .hero{height:180vh}
}

/* Touch screens draw their own scroll indicator at the right edge of the brand list and
   it cannot be moved to the left there (the rtl trick only works for desktop bars), so
   the list keeps its right edge free and the counts sit clear of the indicator. */
@media (hover:none){
  .brand-scroll{direction:ltr;padding-left:0;padding-right:14px}
}

/* Search boxes: one maximum height for all three when open (Kategorie's — Brands' list
   scrolls inside the same height, Typ is simply shorter). No drop shadow and no own
   backdrop blur: the panel scrolls, so a shadow was clipped into a hard edge around the
   boxes, and re-blurring on top of the already blurred scrim flashed on open. */
.brand-scroll{max-height:309px}
#sgCats{max-height:365px;overflow-y:auto;scrollbar-width:none}
#sgCats::-webkit-scrollbar{display:none}
.search-field,.sgroup,.sres-empty,.search-nav a{box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}

/* The social rail behaves exactly like the dock: the same resting grey, white on hover,
   no hover pill and no lift. */
.social-rail a,.social-rail button{color:var(--dock-icon);transition:color .18s ease}
.social-rail a:hover,.social-rail button:hover{background:none;transform:none;color:var(--dock-icon-on)}

/* iOS Safari flashes its own tap highlight — a square-cornered grey box, inflated a few px
   past the element — on anything tappable; on the search boxes it showed as a hard
   rectangle behind the rounded glass. It is off everywhere; the box headers press softly
   instead, so a tap still answers. */
html{-webkit-tap-highlight-color:transparent}
.sgroup .ghead{transition:background-color .15s ease}
.sgroup .ghead:active{background-color:rgba(255,255,255,.06)}