/* Knight Shot / HOME = portfolio / brand page (08.11.2026, premium-web-builder v11).
   Standalone (does not load ks.css): tokens + header/footer copied from ks.css, everything else home-only.
   Signature: "the record on a table rail" (hero). System: brass hairline opener + rail diamonds as separators.
   One warm accent: brass on "Enter the shop". No shop amounts on this page. */

/* LCP-Fix 08.11.2026: core subset (characters / uses) + full Latin file for the rest, same as tools/build_shop.py core_faces() */
@font-face{font-family:"Spline Sans";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("/fonts/spline-sans/core-wght.woff2") format("woff2");
  unicode-range:U+0020-007E,U+00A0,U+00A9,U+00AE,U+00B0-00B2,U+00B7,U+00BC-00BE,U+00C9,U+00D7-00D8,U+00E5,U+00E8-00E9,U+00ED,U+00F6,U+00F8,U+2011,U+2013-2014,U+2019,U+201C-201D,U+2022,U+2026,U+202F,U+2032-2033,U+203A,U+2122,U+2212;}
@font-face{font-family:"Spline Sans";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("/fonts/spline-sans/latin-wght.woff2") format("woff2");
  unicode-range:U+00A1-00A8,U+00AA-00AD,U+00AF,U+00B3-00B6,U+00B8-00BB,U+00BF-00C8,U+00CA-00D6,U+00D9-00E4,U+00E6-00E7,U+00EA-00EC,U+00EE-00F5,U+00F7,U+00F9-00FF,U+0131,U+0152-0153,U+2000-2010,U+2012,U+2015-2018,U+201A-201B,U+201E-2021,U+2023-2025,U+2027-202E,U+2030-2031,U+2034-2039,U+203B-206F,U+2074,U+20AC,U+FEFF,U+FFFD;}

:root{
  --ink:#09100C; --ink-2:#0D1610;
  --felt:#0B2A1D; --felt-2:#0E3626; --felt-line:#1C4B38;
  --cream:#F3EFE6; --cream-2:#E8E2D5; --paper-ink:#132017; --paper-dim:#4E5A51;
  --brass:#CBA253; --brass-lo:#9C7A34; --brass-hi:#F0D79A;
  --fg:#EDEAE2; --fg-dim:#B4BAB1; --fg-faint:#848C85;
  --line:rgba(203,162,83,.28); --glass:rgba(255,255,255,.05); --glass-edge:rgba(255,255,255,.12);
  --font-d:"Commissioner","Commissioner FB",system-ui,sans-serif;
  --font-u:"Spline Sans","Spline Sans FB",system-ui,sans-serif;
  --mx:clamp(18px,5vw,88px); --maxw:1320px; --r:22px; --r-s:14px;
  --dur-tap:120ms; --dur-ui:260ms; --dur-fade:520ms;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark;-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{background:var(--ink);color:var(--fg);font-family:var(--font-u);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
::selection{background:var(--brass);color:var(--ink)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--brass);color:var(--ink);padding:10px 16px;border-radius:8px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--mx)}
.num{font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:var(--font-d);font-variation-settings:"FLAR" 40;letter-spacing:-.02em;text-wrap:balance}
.d-l{font-weight:760;font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1}
.lead{font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.55;color:var(--fg-dim);max-width:48ch}
.idx{font-weight:500;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint)}

/* system: brass hairline of light opens every section */
.op{display:flex;align-items:center;gap:16px;margin-bottom:clamp(18px,2.6vw,30px)}
.op::before{content:"";flex:0 0 clamp(40px,7vw,104px);height:2px;background:linear-gradient(90deg,transparent,var(--brass));box-shadow:0 0 14px rgba(203,162,83,.5)}
.op-ink .idx{color:var(--paper-dim)}
.op-ink::before{box-shadow:none;background:linear-gradient(90deg,transparent,var(--brass-lo))}
.sec{padding:clamp(64px,8vw,120px) 0}
.sec-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px 56px;align-items:end;margin-bottom:clamp(26px,3.4vw,44px)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font-weight:600;font-size:1rem;line-height:1.2;
  padding:.85em 1.5em;border-radius:999px;border:1px solid transparent;white-space:nowrap;
  transition:transform var(--dur-tap) var(--ease),box-shadow var(--dur-ui) var(--ease),background var(--dur-ui) var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-brass{background:linear-gradient(180deg,var(--brass-hi),var(--brass));color:#20160A;
  box-shadow:0 8px 26px -10px rgba(203,162,83,.75),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-brass:hover{box-shadow:0 10px 34px -8px rgba(203,162,83,.95),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-ghost{background:rgba(12,18,14,.55);color:var(--fg);border-color:var(--glass-edge)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-s{padding:.6em 1.15em;font-size:.92rem}
.ql{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--brass);
  background:linear-gradient(currentColor,currentColor) 0 calc(50% + .8em)/100% 1px no-repeat}

/* header (same pattern as the flagships) */
.hdr{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px var(--mx) 26px;background:linear-gradient(180deg,rgba(7,12,9,.85) 0%,rgba(7,12,9,.5) 52%,transparent)}
.hdr .logo{display:flex;align-items:center;gap:11px;font-family:var(--font-d);font-weight:740;font-size:1.12rem;letter-spacing:-.01em;text-shadow:0 1px 10px rgba(5,9,6,.6)}
.hdr .logo svg{width:26px;height:30px;color:var(--brass)}
.hdr .logo small{display:block;font-family:var(--font-u);font-weight:500;font-size:.75rem;letter-spacing:.12em;color:var(--fg-faint);text-transform:uppercase;margin-top:1px}
.hdr nav{display:flex;align-items:center;gap:8px}
.hdr .lnk{font-weight:600;font-size:.95rem;padding:.55em .9em;border-radius:999px;transition:color var(--dur-tap);text-shadow:0 1px 10px rgba(5,9,6,.6)}
.hdr .lnk:hover{color:var(--brass)}

/* =================== HERO: "Take the shot" (owner wish 09.11.2026: the scroll animation is back; B11.4 juror fix-r1: A) ===================
   Sticky pin. First viewport = the owner-approved real tournament photo + copy. Scrolling takes the shot: the photo pulls back into a
   framed print, the rendered break (72 frames, home.js) plays 1:1 with native scroll under the brass pendant, the H1 travels up into the
   light and stays the one message. --p = pin progress 0..1 (home.js). html.hb-on = motion allowed (set in <head> before the first paint);
   without it (reduced motion, no JS) the hero is one static screen: photo + full copy, no pin, no frames. */
.hb{position:relative;background:#060a08;height:100svh;min-height:600px}
html.hb-on .hb{height:205svh}
@media (max-width:760px){html.hb-on .hb{height:172svh}}
@media (max-width:380px){html.hb-on .hb{height:132svh}}
.hb-pin{position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden;isolation:isolate}

/* layer 1: the rendered break (poster = frame 0 until the canvas is live) */
.hb-stage{position:absolute;inset:0;z-index:-4;background:#060a08}
.hb-stage img,.hb-seq{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hb-seq{opacity:0}
.hb-stage.live .hb-seq{opacity:1}
.hb-stage.live .hb-poster{visibility:hidden;transition:visibility 0s linear .6s}
@media (prefers-reduced-motion:no-preference){.hb-seq{transition:opacity .5s var(--ease)}}
html:not(.hb-on) .hb-stage{display:none}

/* layer 2: the light, a brass linear pendant over the table (same lamp as the showroom plate and the products stage) */
.hb-lamp{position:absolute;left:50%;top:0;width:clamp(200px,28vw,440px);height:100%;transform:translateX(-50%);z-index:-3;pointer-events:none;--ly:clamp(54px,9vh,88px)}
.hb-lamp::before{content:"";position:absolute;left:12%;right:12%;top:0;height:var(--ly);border-inline:1px solid rgba(240,215,154,.28)}
.hb-lamp i{position:absolute;left:0;right:0;top:var(--ly);height:7px;border-radius:4px;
  background:linear-gradient(180deg,#F7E3AE,#C99F4E 60%,#8A6A2C);box-shadow:0 0 18px 2px rgba(240,215,154,.55),0 10px 40px 6px rgba(240,215,154,.22)}
.hb-lamp::after{content:"";position:absolute;left:-30%;right:-30%;top:calc(var(--ly) + 6px);height:78%;
  background:linear-gradient(180deg,rgba(247,224,170,.15),rgba(247,224,170,.045) 55%,transparent);
  clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);filter:blur(6px)}
html:not(.hb-on) .hb-lamp{display:none}

/* layer 3: the real photo, full-bleed at p=0, a framed print once the shot is taken */
.hb-photo{position:absolute;inset:0;z-index:-2;margin:0;transform-origin:0 100%;--ps:.22;--pg:clamp(28px,5vh,52px)}
.hb-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 100%} /* Jayson Shaw photo (Farheen #49813): bottom-anchored = player above the copy, table + knightshot.com visible */
.hb-photo::after{content:"";position:absolute;inset:0;border:9px solid #D9BC7A;opacity:0;box-shadow:0 40px 80px -20px rgba(0,0,0,.9)}
.hb-cap{position:absolute;left:var(--mx);z-index:2;margin:0;max-width:min(30vw,420px);font-size:.82rem;line-height:1.4;color:#d8d2c4;opacity:0;
  --ps:.22;--pg:clamp(28px,5vh,52px);bottom:calc(var(--pg) + var(--ps) * var(--ph,100svh) + 10px);padding:7px 11px;border-radius:4px;background:rgba(9,16,12,.84)}
.hb-cap span{display:block}
.hb-cap b{display:block;font-family:var(--font-d);font-weight:700;font-size:.95rem;color:var(--fg)}
html:not(.hb-on) .hb-cap{display:none}

.hb-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,16,12,.55) 0,transparent 16%,transparent 44%,rgba(9,16,12,.68) 66%,rgba(9,16,12,.93) 90%),
             radial-gradient(ellipse 50% 46% at 72% 82%,rgba(9,16,12,.68),transparent 74%), /* calms the bright banners behind the side copy (#49813) */
             linear-gradient(90deg,rgba(9,16,12,.5) 0,transparent 42%)}

/* copy (owner-approved first viewport, unchanged wording) */
.hb-copy{position:absolute;left:var(--mx);right:var(--mx);bottom:clamp(40px,8vh,92px);z-index:2;
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:22px clamp(28px,4vw,64px);pointer-events:none}
.hb-copy a{pointer-events:auto}
.hx-h1{flex:none;margin:0;font-weight:250;font-size:clamp(3.4rem,8.6vw,8.6rem);line-height:.86;letter-spacing:-.05em;transform-origin:0 0;
  font-variation-settings:"FLAR" 100;color:#F6F2E8;text-shadow:0 2px 18px rgba(9,16,12,.45)}
.hx-h1 b{font-weight:780;letter-spacing:-.045em;color:var(--brass-hi)}
.hx-side{flex:1 1 340px;max-width:440px;padding-bottom:.4rem}
.hx-sub{font-family:var(--font-d);font-variation-settings:"FLAR" 40;font-weight:720;font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1.15;letter-spacing:-.015em;color:var(--fg)}
.hx-lead{margin-top:10px;font-size:.98rem;line-height:1.5;color:#d8d2c4}
.hx-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.hx-sub,.hx-lead,.hx-dealer>span:first-child{text-shadow:0 1px 2px rgba(5,9,6,.6),0 2px 16px rgba(5,9,6,.85)} /* busy Jayson Shaw photo (#49813): copy stays readable over the banners */
.hx-dealer{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin-top:18px;font-size:.82rem;color:var(--fg-dim)}
/* Farheen #49655/#49689-92 (14.11.2026): 9 gold logos under the label; heights tuned for optically equal weight */
.hx-lgs{display:flex;flex-wrap:wrap;align-items:center;gap:5px 15px;max-width:100%}
.hx-lgs .lg-br{flex-basis:100%;height:0}
.hx-dealer img{width:auto;opacity:.95;flex:none}
.hx-dealer .lg-p{height:23px}
.hx-dealer .lg-j{height:13.5px}
.hx-dealer .lg-r{height:11.5px}
.hx-dealer .lg-s{height:17px}
.hx-dealer .lg-a{height:12.5px}
.hx-dealer .lg-k{height:14.5px}
.hx-dealer .lg-v{height:18px}
.hx-dealer .lg-c{height:8.5px}
.hx-dealer .lg-u{height:21px}
/* below 1440: label above + 2 rows 5+4 (as on phones) – a single line or an inline label would run into "Scroll to break" at 1280-1439 */
/* Farheen #49701: from 1440 all 9 in ONE line, label above; logos scale with the free width up to the "Scroll to break" hint (>=40px clear): 0.86 at 1440, ~0.94 at 1536, max 1.12 from ~1745 */
@media (min-width:1440px){.hx-dealer{gap:8px}.hx-lgs{--u:calc((100vw - 1440px) * .00085);flex-wrap:nowrap;max-width:none;width:max-content;gap:0 clamp(8.6px,calc(8.6px + var(--u) * 10),11.2px)}.hx-lgs .lg-br{display:none}
  .hx-dealer .lg-p{height:clamp(19.78px,calc(19.78px + var(--u) * 23),25.76px)}.hx-dealer .lg-j{height:clamp(11.61px,calc(11.61px + var(--u) * 13.5),15.12px)}.hx-dealer .lg-r{height:clamp(9.89px,calc(9.89px + var(--u) * 11.5),12.88px)}.hx-dealer .lg-s{height:clamp(14.62px,calc(14.62px + var(--u) * 17),19.04px)}.hx-dealer .lg-a{height:clamp(10.75px,calc(10.75px + var(--u) * 12.5),14.00px)}.hx-dealer .lg-k{height:clamp(12.47px,calc(12.47px + var(--u) * 14.5),16.24px)}.hx-dealer .lg-v{height:clamp(15.48px,calc(15.48px + var(--u) * 18),20.16px)}.hx-dealer .lg-c{height:clamp(7.31px,calc(7.31px + var(--u) * 8.5),9.52px)}.hx-dealer .lg-u{height:clamp(18.06px,calc(18.06px + var(--u) * 21),23.52px)}}

/* end state: under the H1 (which has travelled into the light), one line + the same two actions */
.hb-end{position:absolute;left:var(--mx);top:var(--endy,200px);z-index:2;max-width:min(62vw,860px);opacity:0;pointer-events:none}
.hb-end-s{font-size:clamp(.98rem,1.2vw,1.1rem);line-height:1.45;color:#e2dccf;text-shadow:0 1px 14px rgba(0,0,0,.85)}
.hb-end .hx-cta{margin-top:12px}
.hb-end-m{display:none}
html:not(.hb-on) .hb-end{display:none}

/* "Scroll to break": a real control (cue ball). Click = scroll to the end of the break (user-initiated, instant under reduced motion) */
.hb-hint{position:absolute;right:var(--mx);bottom:clamp(40px,8vh,92px);z-index:3;display:none;align-items:center;gap:10px;min-height:44px;padding:0 4px;
  font-weight:600;font-size:.95rem;color:var(--fg);text-shadow:0 1px 12px rgba(0,0,0,.9)}
.hb-hint i{width:20px;height:20px;border-radius:50%;flex:none;background:radial-gradient(circle at 34% 30%,#fff,#e9e3d4 40%,#a59d8a);box-shadow:0 0 12px rgba(240,215,154,.55)}
.hb-hint:hover{color:var(--brass-hi)}
html.hb-on .hb-hint{display:flex}

/* scroll coupling (motion allowed only). k = H1 travel, out = side copy leaves, in = end line arrives, a = photo becomes a print */
html.hb-on .hb{--k:clamp(0,(var(--p,0) - .03) / .24,1);--out:clamp(0,(var(--p,0) - .02) / .07,1);--in:clamp(0,(var(--p,0) - .2) / .12,1);--a:clamp(0,var(--p,0) / .3,1)}
html.hb-on .hx-h1{transform:translateY(calc(var(--h1y,0px) * var(--k))) scale(calc(1 - (1 - var(--h1s,1)) * var(--k)))}
html.hb-on .hx-side,html.hb-on .hb-shade{opacity:calc(1 - var(--out))}
html.hb-on .hx-side{transform:translateY(calc(var(--out) * -30px))}
html.hb-on .hb-end{opacity:var(--in);transform:translateY(calc((1 - var(--in)) * 14px))}
html.hb-on .hb-hint{opacity:calc(1 - clamp(0,var(--p,0) / .08,1))}
html.hb-on .hb-photo{transform:translate(calc(var(--mx) * var(--a)),calc(var(--pg) * var(--a) * -1)) scale(calc(1 - (1 - var(--ps)) * var(--a)))}
html.hb-on .hb-photo::after{opacity:clamp(0,(var(--p,0) - .03) / .1,1)}
html.hb-on .hb-cap{opacity:clamp(0,(var(--p,0) - .24) / .08,1)}
.hb[data-g=true] .hb-cap{opacity:1}
.hb[data-c=false] .hx-side{pointer-events:none}
.hb[data-e=true] .hb-end .hx-cta{pointer-events:auto}
.hb[data-h=false] .hb-hint{pointer-events:none}

/* the light lands: a warm pool on the cloth once the table is seen from above */
.hb-pool{position:absolute;inset:0;z-index:-3;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 34% 30% at 50% 60%,rgba(255,226,160,.16),rgba(255,226,160,.05) 55%,transparent 75%)}
html.hb-on .hb-pool{opacity:clamp(0,(var(--p,0) - .55) / .3,1)}
html:not(.hb-on) .hb-pool{display:none}

/* the end state is playable: tap a pocket or drag the cue ball; each pocket holds a year of the record (print + caption follow) */
.hb-play{position:absolute;inset:0;z-index:-3;opacity:0;pointer-events:none}  /* above lamp + light pool, below the print (the print lies on the table corner) */
html:not(.hb-on) .hb-play{display:none}
html.hb-on .hb-play{opacity:clamp(0,(var(--p,0) - .86) / .08,1)}
.hb-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hb[data-g=true] .aim-cb,.hb[data-g=true] .aim-pk circle{pointer-events:auto}
.aim-pk circle{fill:rgba(240,215,154,0);stroke:rgba(240,215,154,.38);stroke-width:2;cursor:pointer;transition:fill var(--dur-ui),stroke var(--dur-ui)}
.aim-pk circle:hover{stroke:rgba(240,215,154,.8)}
.aim-pk circle.on{fill:rgba(240,215,154,.22);stroke:#F0D79A;stroke-width:3;filter:drop-shadow(0 0 10px rgba(240,215,154,.9))}
.aim-pk circle.potted{fill:rgba(240,215,154,.5)}
.aim-ln{stroke:#E9C873;stroke-width:3;stroke-linecap:round;stroke-dasharray:2 9;opacity:0;filter:drop-shadow(0 0 6px rgba(240,215,154,.8))}
.aim-ln.on{opacity:1}
.aim-gh{fill:none;stroke:rgba(255,248,230,.85);stroke-width:2;opacity:0}
.aim-gh.on{opacity:1}
.aim-cb{fill:rgba(240,215,154,.06);stroke:#F0D79A;stroke-width:2.5;cursor:grab;touch-action:none;outline:none;filter:drop-shadow(0 0 8px rgba(240,215,154,.8))}
.aim-cb:focus-visible{stroke:#fff;stroke-width:4}
.aim-yr{fill:#E9C873;font-family:var(--font-u);font-weight:700;letter-spacing:.02em;paint-order:stroke;stroke:rgba(9,16,12,.85);stroke-width:4px;pointer-events:none}
.aim-pk .off,.aim-yr.off{display:none}
.aim-cb.off{opacity:0;pointer-events:none}

@media (max-width:1023px){.hx-side{max-width:520px}}
@media (max-width:760px){
  .hb-shade{background:linear-gradient(180deg,rgba(9,16,12,.45) 0,transparent 14%,transparent 46%,rgba(9,16,12,.6) 64%,rgba(9,16,12,.86) 84%)}
  .hb-copy{bottom:16px;gap:12px}
  .hx-h1{font-size:clamp(3rem,14.6vw,4.6rem);width:100%}
  .hx-side{flex:1 1 100%;max-width:none;padding:0}
  .hx-sub{font-size:1.08rem}
  .hx-lead{display:none}
  .hx-cta{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .hx-cta .btn{padding-inline:.6em}
  .hx-cta .btn-link{justify-content:center}
  .hx-dealer{margin-top:12px}
  .hx-h1,.hx-sub,.hx-dealer{text-shadow:0 2px 14px rgba(5,9,6,.85)}
  /* phone: the copy stays (one message, actions always in reach); the print goes to the top left, the break plays above the copy */
  html.hb-on .hx-h1,html.hb-on .hx-side{transform:none}
  html.hb-on .hx-side,html.hb-on .hb-shade{opacity:1}
  .hb:not(.hb-zm)[data-c=false] .hx-side{pointer-events:auto}
  .hb:not(.hb-zm) .hb-end{display:none}
  .hb-end{top:auto;bottom:16px;left:calc(var(--mx) + 24vw + 10px);right:var(--mx);max-width:none}
  .hb-end-s{display:none}
  .hb-photo{transform-origin:0 0;--ps:.24}
  .hb-photo img{object-position:50% 50%}
  .hb-photo::after{border-width:12px}
  /* phone end state (critic r3, 09.11. evening): the table is turned straight and fills the space under the lamp, the print travels
     from the top left down to the bottom left with its caption, the copy fades (the header keeps "Enter the shop"). --z* from home.js */
  html.hb-on .hb{--z:clamp(0,(var(--p,0) - .55) / .35,1)}
  html.hb-on .hb-photo{transform:translate(calc(var(--mx) * var(--a)),calc(84px * var(--a) + var(--zpy,0px) * var(--z))) scale(calc(1 - (1 - var(--ps)) * var(--a)))}
  .hb-cap{left:calc(var(--mx) + 24vw + 10px);right:var(--mx);top:84px;bottom:auto;max-width:none;font-size:.75rem}
  html.hb-on .hb-cap{transform:translateY(calc(var(--zpy,0px) * var(--z)))}
  .hb-cap b{font-size:.84rem}
  .hb-seq{filter:brightness(1.24) saturate(1.1)}
  .hb-stage,.hb-play{transform-origin:var(--zo,52% 58%)}
  html.hb-on .hb-stage,html.hb-on .hb-play{transform:translate(calc(var(--zx,0px) * var(--z)),calc(var(--zy,0px) * var(--z))) rotate(calc(var(--zr,0deg) * var(--z))) scale(calc(1 + (var(--zs,1) - 1) * var(--z)))}
  html.hb-on .hb-zm .hb-copy{opacity:clamp(0,1 - 2 * var(--z),1)}
  html.hb-on .hb-zm .hb-end{opacity:clamp(0,(var(--z) - .5) / .3,1);transform:none}
  .hb-zm .hb-end .btn-brass::before{display:none}
  .hb-zm .hb-end-d{display:none}
  .hb-zm .hb-end-m{display:inline-flex}
  .hb-lamp{--ly:clamp(78px,9vh,88px)}
  .hb-zm[data-g=true] .hb-copy{visibility:hidden}
  html.hb-on .hb-zm .hb-shade{opacity:calc(1 - .85 * var(--z))}
  .hb-pool{background:radial-gradient(ellipse 46% 30% at 50% 44%,rgba(255,226,160,.2),rgba(255,226,160,.06) 55%,transparent 75%)}
  .hb-hint{bottom:auto;top:80px;font-size:.85rem}
}
@media (max-width:370px){.hx-h1{font-size:3rem}.hx-dealer{margin-top:8px}}
@media (max-width:420px){.hx-dealer{gap:6px}.hx-lgs{gap:5px 13px}}


/* widefix 14.11.2026 (Hasnat #51627/#51631): desktop end state = the whole table below the header, right of the print column (home.js deskEnd).
   Only > 1024 px; the frame edges that come into view fade into the room colour. */
@media (min-width:1025px){
  .hb-fit .hb-pin{background:#0a0806}
  html.hb-on .hb-fit{--z:clamp(0,(var(--p,0) - .55) / .35,1)}
  .hb-fit .hb-stage,.hb-fit .hb-play{inset:auto;left:var(--sx,0px);top:var(--sy,0px);width:var(--sw,100%);height:var(--sh,100%);transform-origin:var(--zo,50% 50%)}
  html.hb-on .hb-fit .hb-stage,html.hb-on .hb-fit .hb-play{transform:translate(calc(var(--zx,0px) * var(--z)),calc(var(--zy,0px) * var(--z))) scale(calc(1 + (var(--zs,1) - 1) * var(--z)))}
  html.hb-on .hb-fit .hb-stage{-webkit-mask-image:linear-gradient(90deg,transparent,#000 calc(5% * var(--z)),#000 calc(100% - 5% * var(--z)),transparent),linear-gradient(180deg,transparent,#000 calc(6% * var(--z)),#000 calc(100% - 1.6% * var(--z)),transparent);
    -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 calc(5% * var(--z)),#000 calc(100% - 5% * var(--z)),transparent),linear-gradient(180deg,transparent,#000 calc(6% * var(--z)),#000 calc(100% - 1.6% * var(--z)),transparent);mask-composite:intersect}
  html.hb-on .hb-fit .hb-lamp{transform:translateX(calc(-50% + var(--lx,0px) * var(--z)))}
  html.hb-on .hb-fit .hb-pool{transform:translateX(calc(var(--lx,0px) * var(--z)))}
  .hb-fit .hb-end{max-width:max(22vw,280px)}
  .hb-fit .hb-lamp{--ly:max(clamp(54px,9vh,88px),calc(var(--hh,0px) + 12px))}   /* the pendant hangs below the (now one-row) header */
}


/* =================== PROJECTS =================== */
.pj{background:radial-gradient(ellipse 60% 40% at 80% 0,rgba(203,162,83,.08),transparent 70%),linear-gradient(180deg,var(--ink),var(--felt) 38%,#0a2419)}
.pj-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.chip{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--glass-edge);background:var(--glass);font-size:.9rem;font-weight:600;color:var(--fg-dim);
  transition:background var(--dur-tap),color var(--dur-tap),border-color var(--dur-tap)}
.chip:hover{color:var(--fg)}
.chip.is-on{background:var(--fg);color:var(--ink);border-color:var(--fg)}
.pj-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;grid-auto-flow:dense}
.pc{position:relative;display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:rgba(6,20,13,.6);border:1px solid rgba(255,255,255,.06);min-width:0}
.pc[hidden]{display:none}
.pc img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pc-c{padding:14px 16px 18px;display:flex;flex-direction:column;gap:4px}
.pc-m{font-size:.78rem;color:var(--brass-hi);opacity:.9}
.pc h3{font-weight:700;font-size:1.06rem;line-height:1.2;letter-spacing:-.01em}
.pc p{font-size:.88rem;line-height:1.45;color:var(--fg-dim)}
.pc small{font-size:.75rem;color:var(--fg-faint)}
.pc-big{grid-column:span 2;grid-row:span 2}
.pc-big img{position:absolute;inset:0;height:100%;aspect-ratio:auto}
.pc-big::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(5,12,8,.92));pointer-events:none}
.pc-big .pc-c{position:relative;z-index:1;margin-top:auto;padding:24px 26px 26px;min-height:520px;justify-content:flex-end}
.pc-big h3{font-size:clamp(1.4rem,2.2vw,2rem);font-weight:760}
.pc-big p{font-size:1rem;color:var(--fg);max-width:40ch}
.pj-more{margin-top:24px;font-size:.92rem;color:var(--fg-dim);max-width:80ch}

/* =================== CLIENTS (light block) =================== */
.cl{background:var(--cream);color:var(--paper-ink);padding:clamp(56px,7vw,104px) 0}
.cl-h{font-weight:500;font-size:clamp(1rem,1.4vw,1.2rem);letter-spacing:0;color:var(--paper-dim);margin-bottom:14px;font-family:var(--font-u)}
.cl-wall{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px .5em}
.cl-wall li{display:inline-block;font-family:var(--font-d);font-variation-settings:"FLAR" 40;font-weight:760;letter-spacing:-.025em;
  font-size:clamp(1.55rem,3.7vw,3.3rem);line-height:1.12}
.cl-wall li.w{font-weight:340;color:#3c4a40}
.cl-note{margin-top:22px;font-size:.95rem;color:var(--paper-dim)}

/* =================== KNIGHT SHOT OPEN =================== */
.ko{background:radial-gradient(ellipse 50% 50% at 18% 30%,rgba(203,162,83,.12),transparent 70%),var(--ink)}
.ko-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center}
.ko-fig{position:relative}
.ko-fig img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);box-shadow:0 30px 70px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06)}
.ko-fig figcaption{margin-top:12px;font-size:.85rem;color:var(--fg-dim)}
.ko-txt .lead{margin-top:16px}
.ko-facts{margin-top:26px;border-top:1px solid var(--felt-line)}
.ko-facts div{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:4px 22px;padding:12px 0;border-bottom:1px solid var(--felt-line)}
.ko-facts dt{font-weight:600;font-size:.92rem}
.ko-facts dd{font-size:.92rem;color:var(--fg-dim);line-height:1.5}
.ko-row{display:grid;grid-template-columns:3fr 2fr;gap:14px;margin-top:22px;align-items:stretch}
.ko-row img{width:100%;height:190px;object-fit:cover;border-radius:var(--r-s)}
.ko-row img:last-child{object-position:50% 30%}

/* =================== BRANDS =================== */
.br{background:linear-gradient(180deg,var(--ink),#0b1d14)}
.br-dealers{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.br-plaque{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:22px;padding:26px 28px;border-radius:var(--r);
  background:radial-gradient(ellipse 70% 120% at 20% 0,rgba(240,215,154,.14),transparent 60%),linear-gradient(160deg,var(--felt-2),var(--felt));
  border:1px solid var(--line);transition:border-color var(--dur-ui),transform var(--dur-tap)}
.br-plaque:hover{border-color:var(--brass)}
.br-plaque img{width:132px;height:auto}
.br-plaque img.jf{width:150px}
.br-t{display:flex;flex-direction:column}
.br-t b{font-family:var(--font-d);font-weight:760;font-size:1.5rem;letter-spacing:-.02em}
.br-t span{font-size:.88rem;color:var(--brass-hi)}
.br-go{font-weight:600;font-size:.92rem;color:var(--fg);min-height:44px;display:inline-flex;align-items:center}
/* 13.11.2026 Farheen #47765: the other makers sit on one walnut cue rack = seamless, slow CSS marquee (no JS).
   HTML holds the list twice (2nd copy aria-hidden, links tabindex=-1); the track moves -50% = exactly one list.
   Pauses on hover/focus; prefers-reduced-motion = static wrapped row. Logos ~1.6x (42 -> 67 px), fixed boxes = no layout shift.
   Knight Shot item = official mark, ALWAYS white (CSS mask like .ks-mark, never brass). */
.br-car{margin-top:20px;padding:6px;border-radius:var(--r);background:linear-gradient(180deg,#24170c,#170f08);
  box-shadow:inset 0 1px 0 rgba(255,220,170,.12),0 22px 40px -26px rgba(0,0,0,.9);border:1px solid rgba(203,162,83,.22)}
.br-vp{overflow:hidden;border-radius:12px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.br-track{display:flex;width:max-content}
.br-row{display:flex;margin:0;padding:0;list-style:none}
.br-row li{flex:0 0 184px;width:184px;border-right:1px solid rgba(203,162,83,.16)} /* width too: the max-content size of the row uses it (without it the 2nd row overlapped the 1st, 14.11.) */
.br-row a{display:flex;align-items:center;justify-content:center;height:112px;border-radius:12px;transition:background-color var(--dur-ui)}
.br-row a:hover,.br-row a:focus-visible{background:rgba(240,215,154,.06)}
.br-row img{width:108px;height:67px;object-fit:contain;filter:brightness(0) invert(1);opacity:.85}
.br-row .br-ks{display:block;width:57px;height:67px;background:#fff;-webkit-mask:url(/img/ks-logo.svg) center/contain no-repeat;mask:url(/img/ks-logo.svg) center/contain no-repeat}
@media (prefers-reduced-motion:no-preference){
  .br-track{animation:br-marquee 70s linear infinite} /* 14.11. (#49893): rows now really 11x184px wide (overlap bug fixed) -> 70s = the same ~29 px/s Farheen approved at "47s" */
  .br-car:hover .br-track,.br-car:focus-within .br-track{animation-play-state:paused}
}
@keyframes br-marquee{to{transform:translateX(-50%)}}
@media (max-width:620px){
  .br-car{padding:4px;border-radius:14px}
  .br-row li{flex-basis:140px;width:140px}
  .br-row a{height:92px}
  .br-row img{width:112px;height:69px}
  .br-row .br-ks{width:59px;height:69px}
}
@media (prefers-reduced-motion:reduce){
  .br-track{width:auto}.br-track>.br-row[aria-hidden]{display:none}
  .br-row{flex-wrap:wrap;justify-content:center}.br-row li{flex-basis:clamp(96px,25%,184px)}
  .br-vp{-webkit-mask-image:none;mask-image:none}
}

/* =================== PRODUCT WORLDS (light block) =================== */
.pw-s,.pw{color:var(--paper-ink)}
section.pw{background:linear-gradient(180deg,var(--cream),var(--cream-2))}
section.pw .lead{color:var(--paper-dim)}
.pw-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
a.pw{display:flex;flex-direction:column;height:100%;border-radius:var(--r);background:#fff;overflow:hidden;
  box-shadow:0 1px 0 rgba(19,32,23,.06),0 18px 34px -26px rgba(19,32,23,.5);transition:transform var(--dur-ui) var(--ease),box-shadow var(--dur-ui) var(--ease)}
a.pw:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(19,32,23,.06),0 26px 44px -26px rgba(19,32,23,.6)}
a.pw img{width:100%;aspect-ratio:4/3;object-fit:contain;padding:8% 9% 2%;mix-blend-mode:multiply}
a.pw span{padding:4px 18px 18px;font-family:var(--font-d);font-weight:720;font-size:1.12rem;letter-spacing:-.01em}
.pw-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px}
section.pw .ql{color:#6d5520}

/* =================== LOCATIONS / SHOP GATEWAY =================== */
.lc{background:radial-gradient(ellipse 50% 60% at 90% 10%,rgba(203,162,83,.10),transparent 70%),linear-gradient(180deg,#0b2419,var(--felt) 50%,var(--ink))}
.lc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lc-card{position:relative;display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:rgba(6,20,13,.7);border:1px solid rgba(255,255,255,.07);
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease)}
.lc-card img,.lc-mark{width:100%;aspect-ratio:3/2;object-fit:cover}
.lc-card img{transition:transform .45s var(--ease),filter .45s var(--ease)}
.lc-mark{display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse 60% 70% at 50% 0,rgba(240,215,154,.28),transparent 70%),linear-gradient(170deg,var(--felt-2),#071a12)}
.lc-mark svg{width:28%;height:auto;color:var(--brass);opacity:.9;filter:drop-shadow(0 0 24px rgba(240,215,154,.35))}
.lc-b{display:flex;flex-direction:column;gap:2px;padding:18px 20px 20px}
.lc-city{font-family:var(--font-d);font-weight:760;font-size:1.8rem;letter-spacing:-.02em;line-height:1.1}
.lc-m{font-size:.9rem;color:var(--fg-dim)}
.lc-go{margin-top:10px;font-weight:600;color:var(--brass-hi);display:inline-flex;align-items:center;gap:8px;min-height:44px;transition:color .4s var(--ease)}
.lc-go::after{content:"";width:18px;height:1px;background:currentColor;transition:width .4s var(--ease),transform .4s var(--ease)}
/* Farheen #49760 (14.11.2026): calm premium hover, mouse only (no sticky hover on touch) + the same on keyboard focus. No "selected city" state exists –
   the gold outline in her screenshot was this hover. Lift + deeper shadow + gold edge, photo zooms inside the card, "Shop from …" line grows, text brighter. */
@media (hover:hover) and (pointer:fine){
  .lc-card:hover{transform:translateY(-4px);border-color:rgba(203,162,83,.9);box-shadow:0 0 0 1px rgba(203,162,83,.3),0 22px 44px -20px rgba(0,0,0,.8),0 0 34px -10px rgba(240,215,154,.32)}
  .lc-card:hover img{transform:scale(1.05);filter:brightness(1.06)}
  .lc-card:hover .lc-go{color:#FFE6A8}
  .lc-card:hover .lc-go::after{width:40px;transform:translateX(2px)}
}
.lc-card:focus-visible{outline:2px solid var(--brass-hi);outline-offset:3px;transform:translateY(-4px);border-color:rgba(203,162,83,.9);box-shadow:0 22px 44px -20px rgba(0,0,0,.8),0 0 34px -10px rgba(240,215,154,.32)}
.lc-card:focus-visible img{transform:scale(1.05);filter:brightness(1.06)}
.lc-card:focus-visible .lc-go{color:#FFE6A8}
.lc-card:focus-visible .lc-go::after{width:40px;transform:translateX(2px)}
@media (prefers-reduced-motion:reduce){.lc-card:hover,.lc-card:focus-visible,.lc-card:hover img,.lc-card:focus-visible img{transform:none}.lc-card,.lc-card img{transition:border-color .2s,box-shadow .2s,filter .2s}.lc-card .lc-go::after{transition:none}}
.lc-note{position:absolute;left:12px;top:12px;padding:5px 9px;border-radius:4px;background:rgba(6,14,10,.74);font-size:.75rem;line-height:1.2;color:#d8d2c4}
.lc-clubs{margin-top:22px;font-size:.92rem;color:var(--fg-dim);max-width:80ch}

/* =================== FINAL CTA =================== */
.cta{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(460px,64vh,620px);display:flex;align-items:center}
.cta-bg{position:absolute;inset:0;z-index:-2}
.cta-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 72%}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(9,16,12,.92) 0,rgba(9,16,12,.7) 42%,rgba(9,16,12,.15) 80%),linear-gradient(180deg,var(--ink),transparent 22%,transparent 80%,var(--ink))}
.cta-in{width:100%}
.cta h2{max-width:14ch}
.cta .lead{margin-top:16px;color:var(--fg)}
.cta-b{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* =================== FOOTER (copied pattern) =================== */
.ftr{background:var(--ink);border-top:1px solid var(--line);padding:56px 0 40px}
.ftr-top{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:28px}
.ftr .logo{display:flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:740;font-size:1.15rem}
.ftr .logo svg{width:24px;height:28px;color:var(--brass)}
.ftr p{color:var(--fg-dim);font-size:.9rem;margin-top:12px;max-width:34ch}
.ftr h4{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:12px}
.ftr ul{display:flex;flex-direction:column;gap:9px}
.ftr a{color:var(--fg-dim);font-size:.92rem;transition:color var(--dur-tap)}
.ftr a:hover{color:var(--brass)}
.ftr-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:20px;border-top:1px solid var(--felt-line);font-size:.8rem;color:var(--fg-faint)}

/* =================== motion (input-driven only) =================== */
@media (prefers-reduced-motion:no-preference){
}

/* =================== responsive =================== */
@media (max-width:1200px){
  .pj-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1023px){
  .sec-head{grid-template-columns:1fr;gap:12px}
  .ftr-top{grid-template-columns:1fr 1fr}
  .ko-grid{grid-template-columns:minmax(0,4fr) minmax(0,6fr)}
  .br-dealers{grid-template-columns:1fr}
  .pw-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
}
@media (max-width:1024px){
  .btn,.chip{min-height:44px}
  .ftr a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
  .ftr ul{gap:0}
  .hdr .logo{padding-block:9px;margin-block:-9px}
}
@media (min-width:621px) and (max-width:1024px){.hdr .lnk{min-height:44px;display:inline-flex;align-items:center}}
@media (max-width:760px){
  .pj-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(-1*var(--mx));padding:2px var(--mx) 8px;scrollbar-width:none;overscroll-behavior-x:contain}
  .pj-grid::-webkit-scrollbar{display:none}
  .pc,.pc-big{flex:0 0 80%;scroll-snap-align:start;grid-column:auto;grid-row:auto}
  .pc-big img{position:static;height:auto;aspect-ratio:4/3}
  .pc-big::after{display:none}
  .pc-big .pc-c{min-height:0;padding:14px 16px 18px}
  .pc-big h3{font-size:1.06rem;font-weight:700}
  .pc-big p{font-size:.88rem;color:var(--fg-dim)}
  .pj-filter{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1*var(--mx));padding:0 var(--mx) 2px;scrollbar-width:none}
  .pj-filter::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .ko-grid{grid-template-columns:1fr;gap:22px}
  .ko-fig img{aspect-ratio:16/10;object-position:50% 16%}
  .ko-fig figcaption{margin-top:8px;font-size:.8rem}
  .ko-facts div{grid-template-columns:1fr;gap:2px}
  .ko-row{display:none}
  .pw-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin-inline:calc(-1*var(--mx));padding:2px var(--mx) 14px;scrollbar-width:none}
  .pw-grid::-webkit-scrollbar{display:none}
  .pw-grid li{flex:0 0 42%;scroll-snap-align:start}
  .lc-grid{grid-template-columns:1fr;gap:10px}
  .lc-card{display:grid;grid-template-columns:128px minmax(0,1fr);align-items:center}
  .lc-card img,.lc-mark{height:100%;min-height:100px;aspect-ratio:auto}
  .lc-b{padding:12px 16px}
  .lc-city{font-size:1.35rem}
  .lc-go{margin-top:2px}
  .lc-note{position:static;order:3;padding:0;background:none;color:var(--fg-faint)}
  .cta{align-items:flex-end;min-height:430px}
  .cta::before{background:linear-gradient(180deg,var(--ink) 0,rgba(9,16,12,.2) 26%,rgba(9,16,12,.55) 54%,rgba(9,16,12,.94) 78%)}
  .cta-in{padding-bottom:40px}
}
@media (max-width:620px){
  body{font-size:16px}
  .hdr{padding-block:12px 22px}
  .hdr .lnk{display:none}
  .hdr .logo small{display:none}
  .sec{padding:56px 0}
  .br-dealers{grid-template-columns:1fr 1fr;gap:10px}
  .br-plaque{grid-template-columns:1fr;padding:16px 14px 6px;gap:8px}
  .br-plaque img{width:96px;height:60px;object-fit:contain;object-position:left center}.br-plaque img.jf{width:104px}
  .br-t b{font-size:1.15rem}
  .br-t span{font-size:.8rem}
  .m-hide{display:none}
  .cl-wall li{font-size:clamp(1.3rem,6.4vw,1.7rem)}
  a.pw span{font-size:.98rem;padding:2px 12px 14px}
  .ftr{padding:26px 0 16px}
  .ftr-top{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px}
  .ftr-top>div:first-child{grid-column:1/-1;order:-1}
  .ftr p{font-size:.84rem;line-height:1.45;margin-top:6px;max-width:44ch}
  .ftr h4{font-size:.75rem;letter-spacing:.1em;margin-bottom:0}
  .ftr a{font-size:.84rem;line-height:1.25}
  .ftr-guides{grid-column:1/-1;display:flex;align-items:center;gap:14px;order:9}
  .ftr-guides h4{margin:0}
  .ftr-guides ul{flex-direction:row}
  .ftr-guides li:not(:last-child){display:none}
  .ftr-bot{margin-top:12px;padding-top:10px;gap:0 14px;font-size:.75rem;line-height:1.5}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:1ms!important}}
@media (forced-colors:active){.btn-brass{forced-color-adjust:none}}
/* perf: sections below the hero are rendered (and their lazy images fetched) only when they approach the viewport */
/* R4: content-visibility:auto removed - below-hero sections stayed blank in full-page renders; content must never depend on the browser skipping paint */
/* estimates close to the measured heights so the page length does not jump (auto = remembered after first render) */
.pj{contain-intrinsic-size:auto 1970px}.cl{contain-intrinsic-size:auto 594px}.ko{contain-intrinsic-size:auto 981px}.br{contain-intrinsic-size:auto 720px}
section.pw{contain-intrinsic-size:auto 1035px}.lc{contain-intrinsic-size:auto 918px}.cta{contain-intrinsic-size:auto 576px}.ftr{contain-intrinsic-size:auto 531px}
@media (max-width:760px){.pj{contain-intrinsic-size:auto 720px}.cl{contain-intrinsic-size:auto 380px}.ko{contain-intrinsic-size:auto 820px}.br{contain-intrinsic-size:auto 520px}
  section.pw{contain-intrinsic-size:auto 500px}.lc{contain-intrinsic-size:auto 740px}.cta{contain-intrinsic-size:auto 400px}.ftr{contain-intrinsic-size:auto 440px}}
/* very small phones: tighter section rhythm (kept last: source order wins over the 620 px block) */
@media (max-width:370px){.sec{padding:46px 0}.sec-head{margin-bottom:20px}}

/* ===== critic r1 fixes (08.11.2026) — appended last on purpose (source order) ===== */
/* [K23] own action form: a brass rail plaque with a diamond inlay (no glow pill), secondary action = text link */
.btn{border-radius:8px}
.btn-brass{background:linear-gradient(180deg,#F3DDA2 0,#D7B266 46%,#BE954A 100%);color:#1E1408;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(90,60,20,.35),0 6px 14px -8px rgba(0,0,0,.7)}
.btn-brass:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 0 rgba(90,60,20,.35),0 8px 18px -8px rgba(0,0,0,.8);filter:brightness(1.04)}
.btn-brass::before{content:"";width:7px;height:7px;transform:rotate(45deg);background:#2a1c0b;box-shadow:0 1px 0 rgba(255,255,255,.35);flex:none}
.btn-link{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-weight:600;color:var(--fg);
  background:linear-gradient(var(--brass),var(--brass)) 4px calc(50% + .85em)/calc(100% - 8px) 1px no-repeat}
.btn-link:hover{color:var(--brass-hi)}
/* [OG-K10] header: one solid ink plate (no gradient band over the cream blocks), no letter-spaced descriptor */
.hdr{background:rgba(9,16,12,.94);padding:12px var(--mx);border-bottom:1px solid rgba(203,162,83,.18)}
.hdr .logo small{display:none}
/* [K23][A11] no eyebrow system: sections open with the H2 itself; head stacked, not H2-left/lead-right */
.op{display:none}
.sec-head{grid-template-columns:minmax(0,1fr);gap:14px;align-items:start;max-width:900px}
.sec-head .lead{max-width:60ch}
/* [OG-K1] J.Flowers mark never upscaled */
.br-plaque img.jf{width:124px}

/* ===== design push 09.11.2026 (owner: "zu eng/generisch, noch nicht ausgearbeitet") — appended last on purpose (source order) ===== */
/* more air between and inside the sections (desktop/tablet; phones keep their tighter rhythm) */
@media (min-width:761px){
  .sec{padding:clamp(88px,10vw,156px) 0}
  .sec-head{margin-bottom:clamp(34px,4.4vw,64px)}
  .pj-grid{gap:20px}
  .pc-c{padding:18px 20px 22px;gap:6px}
  .pc h3{font-size:1.16rem}
  .pc p{font-size:.92rem}
  .pc-big .pc-c{min-height:600px;padding:30px 32px 32px}
}
/* products: a lit showroom floor, not a white tile wall. Pool tables = the big lit stage (same brass pendant as the hero), one closing tile with the real count + action */
.pw-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense}
a.pw{position:relative;isolation:isolate;background:radial-gradient(ellipse 62% 30% at 50% 74%,rgba(160,128,64,.16),transparent 72%),linear-gradient(180deg,#FBF8F1,#F2ECDF)}
a.pw img{mix-blend-mode:multiply}
.pw-big{grid-column:span 2;grid-row:span 2}
.pw-big a.pw{background:radial-gradient(ellipse 50% 34% at 50% 70%,rgba(176,136,60,.26),transparent 72%),linear-gradient(180deg,#F7F1E4,#EADFC8)}
.pw-big a.pw::before{content:"";position:absolute;left:31%;right:31%;top:8%;height:6px;border-radius:3px;z-index:1;
  background:linear-gradient(180deg,#F7E3AE,#C99F4E 60%,#8A6A2C);box-shadow:0 0 14px 2px rgba(214,170,80,.55)}
.pw-big a.pw::after{content:"";position:absolute;left:10%;right:10%;top:calc(8% + 5px);height:64%;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(236,196,110,.34),rgba(236,196,110,.08) 60%,transparent);clip-path:polygon(29% 0,71% 0,100% 100%,0 100%)}
.pw-big a.pw img{flex:1;aspect-ratio:auto;min-height:0;padding:18% 8% 2%}
.pw-big a.pw span{font-size:clamp(1.4rem,2.2vw,2rem);font-weight:760;padding:0 28px 28px}
.pw-all{display:flex}
.pw-all-in{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:6px;width:100%;padding:24px 22px 18px;border-radius:var(--r);
  background:radial-gradient(ellipse 70% 60% at 80% 0,rgba(240,215,154,.18),transparent 70%),linear-gradient(170deg,var(--felt-2),var(--felt));color:var(--fg)}
.pw-n{font-family:var(--font-d);font-variation-settings:"FLAR" 100;font-weight:250;font-size:clamp(2.6rem,4.4vw,4rem);line-height:.9;letter-spacing:-.04em;color:var(--brass-hi)}
.pw-t{font-size:.92rem;color:var(--fg-dim);margin-bottom:10px}
.pw-all-in .ql{color:var(--brass-hi)}
@media (max-width:1023px) and (min-width:761px){.pw-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pw-big{grid-column:span 2;grid-row:span 2}}
@media (max-width:760px){
  .pw-big,.pw-all{grid-column:auto;grid-row:auto}
  .pw-big a.pw img{flex:none;aspect-ratio:4/3;padding:18% 8% 2%}
  .pw-big a.pw span{font-size:.98rem;font-weight:720;padding:2px 12px 14px}
  .pw-big a.pw::before{top:6%;height:4px}
  .pw-grid{align-items:flex-start}
  .pw-grid a.pw{height:auto}
  .pw-grid li.pw-all{display:none}
}
/* brands: dealer plaques larger (walnut rack = carousel, see BRANDS block) */
@media (min-width:761px){.br-plaque{padding:34px 34px;gap:28px}.br-plaque img{width:164px}.br-plaque img.jf{width:137px}.br-t b{font-size:1.8rem}}

/* phones: no empty cream under the product row (critic r1 kill 8) */
@media (max-width:620px){section.pw{padding-bottom:30px}}

/* 11.11.2026 Hasnat #42371/#42373: Knight Shot logo = trademark, ONLY black & white (never brass/gold). Header logo bigger and slowly turning on every page, pure CSS (cannot "stop working"); still for prefers-reduced-motion. */
.hdr .logo,.shdr .logo,.kf-brand .logo{perspective:700px}
.hdr .logo svg,.shdr .logo svg,.kf-brand .logo svg{width:38px;height:44px;color:#fff;transform-style:preserve-3d;animation:ks-logo-turn 9s linear infinite;will-change:transform;filter:drop-shadow(0 0 6px rgba(255,255,255,.18))}
.ftr .logo svg,.sfoot .logo svg{color:#fff}
@keyframes ks-logo-turn{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
@media (max-width:700px){.hdr .logo svg,.shdr .logo svg,.kf-brand .logo svg{width:30px;height:35px}}
@media (prefers-reduced-motion:reduce){.hdr .logo svg,.shdr .logo svg,.kf-brand .logo svg{animation:none}}

/* 11.11.2026 Hasnat #42400: logo bigger and hanging down out of the black strip into the green area, left aligned (desktop/tablet) */
@media (min-width:901px){
  .hdr .logo,.shdr .logo{position:relative;z-index:45;align-items:flex-start}
  .hdr .logo svg,.shdr .logo svg{width:68px;height:80px;margin:-10px 0 -46px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.55)) drop-shadow(0 0 8px rgba(255,255,255,.16))}
  .hdr .logo span,.shdr .logo span{align-self:center}
}

/* 11.11.2026 Hasnat #42409: logo a little bigger still */
@media (min-width:901px){ .hdr .logo svg{width:84px;height:99px;margin:-12px 0 -63px} }

/* maximal round 12.11.2026: "Shop" dropdown in the old header (CSS only: hover and keyboard focus) */
.hdd{position:relative}.hdd-p{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:230px;display:none;flex-direction:column;padding:10px;margin-top:2px;background:#0b120d;border:1px solid rgba(203,162,83,.4);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.5);z-index:60}
.hdd:hover .hdd-p,.hdd:focus-within .hdd-p{display:flex}
.hdd-p a{padding:.6em .9em;border-radius:8px;color:var(--fg);font-weight:600;font-size:.92rem;min-height:40px;display:flex;align-items:center}.hdd-p a:hover,.hdd-p a:focus-visible{background:rgba(203,162,83,.14);color:var(--brass)}
.hdd-sep{height:1px;background:rgba(255,255,255,.12);margin:6px 4px}.hdd-p .hdd-all{color:var(--brass)}
@media (max-width:620px){.hdd{display:none}}

/* R2-fix1 (12.11.2026, critic 8): the hero starts BELOW the 100-px header, so its first screen is 100svh minus the header. The copy block and the hint are
   lifted by the header height: H1 (both lines), sub-line and "Enter the shop" are fully above the fold at 1440 and 390. --hh = header height (home.js keeps it exact). */
.hb{--hh:110px}
@media (max-width:900px){.hb{--hh:108px}}
.hb-copy{bottom:calc(var(--hh) + clamp(20px,3.5vh,48px))}
.hb-hint{bottom:calc(var(--hh) + clamp(20px,3.5vh,48px))}
@media (max-width:760px){ .hb-copy{bottom:calc(var(--hh) + 12px)} }
.hb-pin{min-height:520px}
/* touch: no "Scroll to break" label floating over the picture (the break plays with the normal scroll) */
@media (hover:none),(pointer:coarse){ html.hb-on .hb-hint{display:none} }

/* =================== R5 12.11.2026 =================== */
/* 1 clients: one calm muted row, only names documented in Knight Shot's own material (hasnat-wissen: knightshot.com client list); no logos (no files) */
.cl{padding:clamp(40px,5vw,72px) 0}
.cl-h{font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim);margin-bottom:14px}
.cl-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 2.4em;list-style:none;margin:0;padding:0}
.cl-row li{font-family:var(--font-u);font-weight:500;font-size:clamp(.86rem,1.1vw,1rem);letter-spacing:.06em;font-variant-caps:all-small-caps;color:#55635a;line-height:1.3;white-space:nowrap}
.cl-note{margin-top:16px}
/* 2 hero runway: shorter pin, poster as CSS fallback while the frames/JS are slow (class hb-poster is set 1.2 s after load by the head script) */
html.hb-on .hb{height:162svh}
@media (max-width:760px){html.hb-on .hb{height:148svh}}
@media (max-width:380px){html.hb-on .hb{height:132svh}}
html.hb-poster .hb-stage{background:#060a08 url(/img/hero-poster-1600.webp?v=4) 50% 50%/cover no-repeat}
@media (max-aspect-ratio:4/5){html.hb-poster .hb-stage{background-image:url(/img/hero-poster-m.webp?v=4)}}
/* hero phone: more air between the headline and the buttons */
@media (max-width:760px){
  .hb-copy{gap:24px}
  .hx-cta{margin-top:18px}
}
/* venue grid: first 5 (big + 4 = two full rows), "See all" for the rest; no JS = everything visible */
.pj-all{margin-top:22px;display:none}
@media (min-width:1024px){
  .js #pj-grid:not(.all) .pc:nth-child(n+6){display:none}
  .js .pj-grid:not(.all) ~ .pj-all{display:block}
}
@media (min-width:761px) and (max-width:1023px){
  .js #pj-grid:not(.all) .pc:nth-child(n+7){display:none}
  .js .pj-grid:not(.all) ~ .pj-all{display:block}
}

/* ===== R6 12.11.2026 ===== */
html{scrollbar-gutter:stable}
/* 7 clients: bigger type, fewer names per line (grid), 2 columns on phones */
.cl-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 28px}
.cl-row li{white-space:normal;font-size:clamp(1.1rem,1.5vw,1.4rem);letter-spacing:.04em;color:#3c4a40;line-height:1.25;font-weight:600}
@media (max-width:1023px){.cl-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.cl-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}.cl-row li{font-size:1.02rem}}
/* 8 hero desktop: one column to the headline's right edge, readable copy, quiet scroll hint */
@media (min-width:1024px){
  .hx-side{flex:0 1 520px;max-width:520px;padding-bottom:.9rem}
  .hx-sub{font-size:clamp(1.4rem,1.9vw,1.7rem)}
  .hx-lead{font-size:1.15rem;line-height:1.5;margin-top:12px;color:#e2dccf}
  .hx-cta{margin-top:22px}
  .hx-dealer{font-size:.9rem}
  .hb-hint{min-height:32px;font-size:.8rem;color:var(--fg-dim)}
  .hb-hint i{width:12px;height:12px;box-shadow:0 0 8px rgba(240,215,154,.4)}
}

/* ===== R7 (12.11.2026) phones: Every game = 2-column grid; project chips with edge fade + snap ===== */
@media (max-width:760px){
  .pw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;overflow:visible;margin-inline:0;padding:2px 0 6px;scroll-snap-type:none}
  .pw-grid li{flex:none;min-width:0}
  .pj-filter{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);scroll-snap-type:x proximity;scroll-padding-inline:var(--mx);padding-right:56px}
  .pj-filter .chip{scroll-snap-align:start}
}

/* ===== R8 Royal (13.11.2026, Hasnat #47050): the first screen is the Royal World Cup table. ===== */
.ry{position:relative;background:#070b09;isolation:isolate;border-bottom:1px solid rgba(255,255,255,.06)}
.ry-top{position:relative;min-height:0;display:grid;grid-template-columns:minmax(0,4.7fr) minmax(0,7.3fr);align-items:center;gap:0 clamp(8px,2vw,32px);padding:clamp(24px,3.2vw,48px) var(--mx) clamp(24px,3vw,44px);max-width:calc(var(--maxw) + 2 * var(--mx));margin:0 auto}
.ry-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse 58% 62% at 66% 54%,rgba(203,162,83,.17),rgba(203,162,83,.05) 46%,transparent 72%),radial-gradient(ellipse 90% 40% at 62% 100%,rgba(14,54,38,.55),transparent 70%)}
.ry-bgw{position:absolute;inset:0;z-index:-2;background:#070b09}
.ry-mark{display:none!important;position:absolute;right:calc(var(--mx) + 8px);top:7%;width:clamp(86px,9vw,140px);aspect-ratio:506/592;background:#fff;opacity:.09;-webkit-mask:url(/img/ks-logo.svg) center/contain no-repeat;mask:url(/img/ks-logo.svg) center/contain no-repeat}
.ry-copy{position:relative;z-index:2;max-width:560px}
.ry-eye{display:flex;align-items:center;gap:10px;font-size:.8rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-hi)}
.ry-eye i{display:inline-block;width:14px;height:16px;background:#fff;opacity:.88;-webkit-mask:url(/img/ks-logo.svg) center/contain no-repeat;mask:url(/img/ks-logo.svg) center/contain no-repeat;flex:none}
.ry-h{margin:14px 0 0;font-family:var(--font-d);font-weight:250;font-size:clamp(2.6rem,5.6vw,5.6rem);line-height:.92;letter-spacing:-.045em;color:var(--fg)}
.ry-h b{font-weight:780;color:var(--brass-hi);letter-spacing:-.045em}
.ry-sub{margin-top:clamp(14px,1.6vw,22px);font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.5;color:var(--fg-dim);max-width:34em}
.ry-sub b{color:var(--fg);font-weight:600}
.ry-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:clamp(18px,2vw,28px)}
.ry-fig{position:relative;margin:0;z-index:1;align-self:center;justify-self:center;width:min(100%,54vw);display:flex;flex-direction:column;align-items:center}
.ry-fig::before{content:"";position:absolute;left:8%;right:2%;bottom:-3%;height:20%;background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.72),rgba(0,0,0,0) 68%);filter:blur(10px);z-index:0}
.ry-fig picture,.ry-fig img{display:block;position:relative;z-index:1;width:100%;height:auto}
.ry-fig img{filter:drop-shadow(0 22px 30px rgba(0,0,0,.55))}
.ry-fig .ry-bk{display:none}
html.ry-b .ry-fig .ry-bn{display:none}
html.ry-b .ry-fig .ry-bk{display:block}
html.ry-b .ry-fig{width:min(100%,50vw)}
.ry-sw{display:none;position:relative;order:5;margin-top:14px;z-index:3;gap:2px;padding:3px;border:1px solid var(--glass-edge);border-radius:999px;background:rgba(7,11,9,.7);backdrop-filter:blur(6px)}
html.ry-pv .ry-sw{display:inline-flex}
.ry-sw button{min-height:36px;padding:0 14px;border-radius:999px;font-size:.84rem;font-weight:600;color:var(--fg-dim)}
.ry-sw button[aria-pressed=true]{background:var(--brass);color:#1E1408}
.ry-foot{border-top:1px solid rgba(255,255,255,.07);background:linear-gradient(180deg,#0a110d,#070b09)}
.ry-foot-in{max-width:calc(var(--maxw) + 2 * var(--mx));margin:0 auto;padding:clamp(22px,3vw,40px) var(--mx);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,48px);align-items:center}
.ry-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,30px);list-style:none}
.ry-facts li{border-top:2px solid var(--brass);padding-top:12px}
.ry-facts b{display:block;font-family:var(--font-d);font-weight:600;font-size:clamp(1.05rem,1.5vw,1.35rem);color:var(--fg);letter-spacing:-.01em}
.ry-facts span{display:block;margin-top:6px;font-size:.92rem;line-height:1.45;color:var(--fg-dim)}
.ry-pl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0;list-style:none}
.ry-pl figure{margin:0}
.ry-pl img{width:100%;height:auto;border-radius:10px;border:1px solid rgba(255,255,255,.1);box-shadow:0 14px 30px -14px rgba(0,0,0,.8)}
.ry-pl figcaption{margin-top:8px;font-size:.78rem;line-height:1.35;color:var(--fg-faint)}
.ry-pl figcaption b{color:var(--fg-dim);font-weight:600}
@media (max-width:1023px){
  .ry-top{grid-template-columns:minmax(0,1fr);min-height:0;padding-top:20px;gap:0}
  .ry-copy{max-width:none;display:contents}
  .ry-eye{order:1}.ry-h{order:2;margin-top:10px}.ry-fig{order:3;margin:10px 0 0}.ry-sub{order:4}.ry-cta{order:5}
  .ry-foot-in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .ry-top{padding:16px var(--mx) 22px}
  .ry-h{font-size:clamp(2.5rem,12.4vw,3.6rem)}
  .ry-sub{font-size:.98rem;margin-top:6px;order:4}
  .ry-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
  .ry-cta .btn{padding-inline:.6em}.ry-cta .btn-link{justify-content:center}
  .ry-fig{margin:2px calc(-1 * var(--mx)) 0}
  html.ry-b .ry-fig{margin:2px calc(-1 * var(--mx)) 0}
  .ry-mark{top:4%;right:var(--mx);width:72px;opacity:.1}
  .ry-sw{bottom:-8px;right:var(--mx)}
  .ry-facts{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:no-preference){
  .ry-fig img{animation:ry-in .9s var(--ease) both}
  @keyframes ry-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* ===== R9 (13.11.2026): hero composition - no watermark, table inset from the right edge, tight height, switch under the image, preview note ===== */
.ry-pvn{display:none;order:6;margin:10px 0 0;max-width:34em;text-align:center;font-size:.82rem;line-height:1.4;color:var(--fg-faint)}
html.ry-b .ry-pvn{display:block}
.ry-fig img{max-width:100%}
.ry-fig::before{left:12%;right:12%}
@media (max-width:1023px){
  .ry-fig,html.ry-b .ry-fig{width:100%;margin:6px 0 0}
}
@media (max-width:760px){
  .ry-fig,html.ry-b .ry-fig{margin:4px 0 0}
  .ry-sw{margin-top:10px}
}

/* 13.11.2026 Hasnat #47258: Startseite grosses haengendes Logo (84x99 ab 901 px, Freigabe 11.11. #42409); Marken-Menue rueckt neben das Logo */
@media (min-width:901px){.shdr .logo .ks-mark{width:112px;height:132px;margin:-4px 0 -100px}.shdr,.shdr-row{overflow:visible}.shdr .logo{position:relative;z-index:30}.bnav .snav-row{padding-left:calc(var(--mx) + 112px)}}
.bnav a{color:var(--fg);font-weight:600}

/* 13.11.2026 Farheen #47921: Kundenlogos statt Namen */
.cl-logos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px 36px;list-style:none;margin:8px 0 0;padding:0;align-items:center}
.cl-logos li{display:flex;align-items:center;justify-content:center;height:72px}
.cl-logos img{max-width:100%;max-height:56px;width:auto;height:auto;object-fit:contain}
.cl-more{margin-top:22px;font-size:.92rem;color:var(--paper-dim)}
@media (max-width:1023px){.cl-logos{grid-template-columns:repeat(3,minmax(0,1fr))}} /* 15 tiles (Farheen #49752): 3 columns = 5 full rows */
@media (max-width:620px){.cl-logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 18px}.cl-logos li{height:56px}.cl-logos img{max-height:44px}}
.cl-logos li{height:84px}.cl-logos img[src*="transguard"]{max-height:80px}
@media (max-width:620px){.cl-logos li{height:64px}.cl-logos img[src*="transguard"]{max-height:62px}}

/* 13.11.2026 Farheen #47989: Clients lebendiger – Karten, Hover-Licht, gestaffeltes Einblenden */
.cl-sub{margin:-6px 0 26px;color:var(--paper-dim);font-size:1.02rem;max-width:44ch}
.cl-logos{gap:16px;margin-top:0}
.cl-logos li{position:relative;overflow:hidden;height:118px;padding:20px 22px;background:#fff;border-radius:16px;box-shadow:0 1px 2px rgba(18,32,24,.06),0 10px 28px -16px rgba(18,32,24,.28);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.cl-logos li::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(203,162,83,.22) 50%,transparent 65%);transform:translateX(-130%);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.cl-logos li::before{content:"";position:absolute;left:18%;right:18%;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#CBA253,transparent);opacity:0;transition:opacity .45s}
.cl-logos img{max-height:62px;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.cl-logos img[src*="transguard"]{max-height:82px}
/* Farheen #49752: stacked/square marks need more height to read as big as the wordmarks */
.cl-logos img[src*="marriott"],.cl-logos img[src*="sheraton"],.cl-logos img[src*="/aud."]{max-height:76px}
@media (hover:hover){.cl-logos li:hover{transform:translateY(-6px);box-shadow:0 2px 4px rgba(18,32,24,.06),0 22px 40px -18px rgba(120,90,30,.45)}.cl-logos li:hover::after{transform:translateX(130%)}.cl-logos li:hover::before{opacity:1}.cl-logos li:hover img{transform:scale(1.06)}}
.cl-logos.rv li{opacity:0;transform:translateY(22px) scale(.97)}
.cl-logos.rv.in li{opacity:1;transform:none;transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .45s;transition-delay:calc(var(--i,0)*70ms)}
.cl-logos.rv.in li:hover{transition-delay:0s}
@media (max-width:620px){.cl-logos{gap:10px}.cl-logos li{height:84px;padding:12px;border-radius:12px}.cl-logos img{max-height:46px}.cl-logos img[src*="transguard"]{max-height:62px}.cl-logos img[src*="marriott"],.cl-logos img[src*="sheraton"],.cl-logos img[src*="/aud."]{max-height:52px}}
@media (prefers-reduced-motion:reduce){.cl-logos.rv li{opacity:1;transform:none}.cl-logos li,.cl-logos li::after,.cl-logos img{transition:none}}
/* 13.11.2026 Farheen #48111: Jayson weiter nach rechts (Desktop) – Bild beginnt bei 24 %, linker Rand weich ausgeblendet */
@media (min-width:761px){.cta-bg{left:24%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%);mask-image:linear-gradient(90deg,transparent,#000 18%)}.cta-bg img{object-position:50% 80%}}
/* Farheen #49893 (14.11.2026): four dealer plaques (Predator, J.Flowers, Rasson, Kamui), stacked plaque layout;
   4 in a row from 1024, 2x2 on tablet, 2 per row on phones (phone rules above unchanged) */
@media (min-width:621px){
  .br-dealers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .br-plaque{grid-template-columns:minmax(0,1fr);grid-template-rows:84px auto auto;align-items:start;gap:10px;padding:26px 26px 16px}
  .br-plaque img,.br-plaque img.jf{width:auto;max-width:100%;align-self:center;object-fit:contain;object-position:left center}
  .br-plaque img.lg-pr{height:84px}.br-plaque img.jf{height:31px}.br-plaque img.lg-ra{height:27px}.br-plaque img.lg-ka{height:44px}
  .br-t b{font-size:1.6rem}
  .br-go{min-height:40px}
}
@media (min-width:1024px){.br-dealers{grid-template-columns:repeat(4,minmax(0,1fr))}}


/* ===== Responsive-Pass 14.11.2026 (Startseite, /projects/, /clubs-events/) – Messung tools/responsive-check.mjs; Rueckweg: Block loeschen ===== */
:root{--mx:max(clamp(18px,5vw,88px),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))}
/* Lesbarkeit am Handy: Footer-Text/-Links und Bildunterschriften mind. 14 px (vorher 12-13,4 px); Copyright-Zeile bleibt klein */
@media (max-width:620px){
  html body .ftr p,html body .ftr a{font-size:.875rem}
  html body .ko-fig figcaption,html body .hb-cap span{font-size:.875rem}
}
/* Footer-Links am Rechner: Klickflaeche 25 px statt 17 px, Optik unveraendert */
@media (min-width:1025px){ html body .ftr li a{display:inline-block;padding-block:4px;margin-block:-4px} }