/* Sivke · the site system. Naslovna x Diptih: a magazine feature in facing pages.
   Host Grotesk only. White paper, a warm band, ink, ONE print red (CTA, selection, active state, one band, one word). */
:root{
  color-scheme: only light;
  --paper:#FFFFFF; --band:#F4F2EE; --band2:#E9E6DF; --ink:#0F0F0F; --ink2:#4A4742; --mute:#6E6A63; --grey:#CFCAC2;
  --red:#DC241C; --red2:#B81C15; --logo-dot:var(--red);
  --mar:clamp(16px,2.8vw,48px);
  --gut:clamp(12px,1.67vw,28px);
  --maxw:1680px;
  --e1:cubic-bezier(.76,0,.24,1);
  --e2:cubic-bezier(.16,1,.3,1);
  --e3:cubic-bezier(.22,1,.36,1);
  --body:clamp(17px,1.32vw,19px);
  --f:'Host Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.55 var(--f);font-kerning:normal;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
::selection{background:var(--red);color:#fff}
input::selection,textarea::selection,.on-red ::selection{background:var(--ink);color:#fff}
p,h1,h2,h3,ul,ol,blockquote,figure,dl,dd{margin:0}
h1,h2,h3{font-weight:inherit;font-size:inherit}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
picture{display:block;width:100%;height:100%}
img{display:block;width:100%;height:100%;object-fit:cover}
svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.skip{position:fixed;z-index:90;left:12px;top:-80px;padding:12px 18px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:16px}
.skip:focus{top:12px}

/* every section is a container: display type is sized to the columns it owns (100cqw = the section's width) */
main>section,.ft{container-type:inline-size}
/* the floating header is 76 px deep on desktop (14 + 62), 68 on phones: any anchor lands below it with air */
main [id],main>section{scroll-margin-top:100px}
@media (max-width:760px){main [id],main>section{scroll-margin-top:88px}}

/* the 12-column grid of a spread */
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);width:100%;
  max-width:calc(var(--maxw) + 2 * var(--mar));margin-inline:auto;padding-inline:var(--mar)}
/* the same 12 columns plus the two margins as tracks, so a photo can fill its half to the viewport edge:
   grid-column: m 8 / full-end = from column 8 to the right edge; full-start / m 7 = the left edge to column 6 */
.fg{display:grid;column-gap:var(--gut);
  grid-template-columns:[full-start] minmax(0,1fr) repeat(12,[m] minmax(0,calc((min(100%, var(--maxw) + 2 * var(--mar)) - 2 * var(--mar) - 11 * var(--gut)) / 12))) [m-end] minmax(0,1fr) [full-end]}

/* display type: lines rise out of their own masks; size = the width of its columns / the widest line (em) */
/* 30.10.2026 (Strahinja: „slova preblizu, stisnuto"): display tracking -.01 to -.02em (was -.035 to -.06) and leading
   .9 to 1 (was .78 to .9), on every page; the per-heading tracking is set inline by lib.hx() */
.hx{display:flex;flex-direction:column;font-weight:800;letter-spacing:-.01em;line-height:.98;
  --main:min(100cqw - 2 * var(--mar), var(--maxw));
  --w:calc((var(--main) - 11 * var(--gut)) * var(--span, 12) / 12 + (var(--span, 12) - 1) * var(--gut));
  font-size:min(var(--fmax, 220px), calc(var(--w) / var(--fd)))}
.hx em{font-style:normal;color:var(--red)}
.hx-d,.hx-m{display:flex;flex-direction:column}
.hx-m{display:none}
@media (max-width:760px){
  .hx{font-size:min(var(--fmaxm, 160px), calc(var(--main) * var(--spanm, 12) / 12 / var(--fm)))}
  .hx-d{display:none}
  .hx-m{display:flex}
}
/* 23.10.2026: the mask reaches .2em under the line (a g at .84 leading lost its bottom at .14) and a waiting line sits
   140% down (at 118% a deeper mask would show the tops of the letters before the reveal); _tools/sajt/leading.py proves
   both sides on every page */
.ln{display:block;overflow:hidden;padding:.16em .08em .2em 0;margin:-.16em -.08em -.2em 0}
.ln>span{display:inline-block;white-space:nowrap}
html.js .rv .ln>span,html.js .cv-h .ln>span{transform:translate3d(0,140%,0);transition:transform 1.3s var(--e3)}
html.js .rv.in .ln>span,html.js .cv.go .cv-h .ln>span{transform:none}
.hx .ln:nth-child(2)>span{transition-delay:.1s}
.hx .ln:nth-child(3)>span{transition-delay:.2s}
.hx .ln:nth-child(4)>span{transition-delay:.3s}

/* reveals: the hidden state exists only under html.js; .in comes from an IntersectionObserver; html.rv-all = failsafe */
html.js .rv-up{opacity:0;transform:translate3d(0,34px,0);transition:opacity .9s var(--e2),transform 1.15s var(--e2)}
html.js .rv-up.in{opacity:1;transform:none}
html.js .rv-clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--e1)}
html.js .rv-clip.in{clip-path:inset(0 0 0 0)}
html.js .rv-open{clip-path:inset(0 50% 0 50%);transition:clip-path 1.6s var(--e1)}
html.js .rv-open.in{clip-path:inset(0 0 0 0)}
html.js .rv-l{clip-path:inset(0 100% 0 0);transition:clip-path 1.4s var(--e1)}
html.js .rv-r{clip-path:inset(0 0 0 100%);transition:clip-path 1.4s var(--e1)}
html.js .rv-l.in,html.js .rv-r.in{clip-path:inset(0 0 0 0)}
html.rv-all .rv,html.rv-all .rvp{opacity:1 !important;transform:none !important;clip-path:none !important}
html.rv-all .ln>span{transform:none !important}

/* photo sequences: a mask wipe, the previous photo stays underneath */
.seq-s{position:absolute;inset:0;clip-path:inset(100% 0 0 0)}
.seq-s.is-on{clip-path:inset(0 0 0 0);z-index:2}
.seq-s.is-prev{clip-path:inset(0 0 0 0);z-index:1}
.seq-s.is-anim{transition:clip-path 1.2s var(--e1)}
/* a page's first screen: [data-hero] gets .go once fonts and its first photo are in (site.js) */
html.js [data-hero] .hx .ln>span{transform:translate3d(0,140%,0);transition:transform 1.3s var(--e3)}
html.js [data-hero].go .hx .ln>span{transform:none}
html.js [data-hero] .h-up{opacity:0;transform:translate3d(0,24px,0)}
html.js [data-hero].go .h-up{opacity:1;transform:none;transition:opacity .9s .5s,transform 1.1s var(--e2) .5s}
html.js [data-hero] .h-l{clip-path:inset(0 100% 0 0)}
html.js [data-hero] .h-r{clip-path:inset(0 0 0 100%)}
html.js [data-hero] .h-b{clip-path:inset(100% 0 0 0)}
html.js [data-hero] .h-t{clip-path:inset(0 0 100% 0)}
html.js [data-hero].go-ph .h-l,html.js [data-hero].go-ph .h-r,html.js [data-hero].go-ph .h-b,html.js [data-hero].go-ph .h-t{clip-path:inset(0 0 0 0);transition:clip-path 1.5s var(--e1)}
html.js [data-hero].go-ph .h-d1{transition-delay:.15s}
html.js [data-hero].go-ph .h-d2{transition-delay:.3s}
html.rv-all [data-hero] *{clip-path:none!important;opacity:1!important;transform:none!important}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 22px 0 26px;border-radius:999px;
  font-size:16px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;
  transition:background-color .3s,color .3s,transform .5s var(--e2)}
.btn svg{width:19px;height:19px;flex:none;transition:transform .45s var(--e2)}
.btn:hover svg{transform:translate(2px,-2px)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red2)}
.btn-soft{background:var(--band);color:var(--ink)}
.btn-soft:hover{background:var(--band2)}
.btn-soft:hover svg{transform:none}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:var(--band2)}

/* placeholder chips: a grey square = still to come (red is reserved for what is live) */
.chip{display:inline-flex;align-items:center;gap:.5em;padding:.34em .85em .38em .72em;border-radius:999px;background:var(--band);
  color:var(--ink2);font-weight:600;font-size:.78em;letter-spacing:0;line-height:1.1;white-space:nowrap;vertical-align:.1em}
.chip i{width:.52em;height:.52em;background:var(--grey);flex:none}

/* ============ header: a floating island that morphs into a compact pill ============ */
.hd{position:fixed;z-index:60;top:14px;left:0;right:0;display:flex;justify-content:center;padding-inline:10px;pointer-events:none}
.hd-pill{position:relative;display:flex;align-items:center;height:62px;padding:0 9px 0 28px;transition:transform .75s var(--e1)}
html.js .hd-pill{animation:hdIn 1s var(--e2) backwards}
@keyframes hdIn{from{opacity:.6;transform:translate3d(0,-18px,0)}to{opacity:1;transform:none}}
.hd-shape{position:absolute;inset:0;pointer-events:none;
  filter:drop-shadow(0 14px 22px rgba(15,15,15,.09)) drop-shadow(0 1px 1.5px rgba(15,15,15,.09))}
.hd-bg{position:absolute;inset:0;background:#fff;clip-path:inset(0 0 0 0 round 31px);transition:clip-path .75s var(--e1)}
.wm,.hd-nav,.hd-r{position:relative;pointer-events:auto}
.wm{display:inline-flex;align-items:center;height:48px;margin-right:34px;color:var(--ink)}
.wm .sivke-logo{height:28px}
/* the Sivke logo (rules of dist/brand/logo.css): letters = currentColor, the photo dot = --logo-dot, a shutter blink */
.sivke-logo{display:block;height:1em;width:auto;overflow:visible}
.sivke-logo__dot{fill:var(--logo-dot,#E8261C);transform-box:fill-box;transform-origin:50% 50%;animation:sivke-shutter 6s cubic-bezier(.6,0,.2,1) 1.2s infinite}
a:hover .sivke-logo__dot,.sivke-logo:hover .sivke-logo__dot{animation:sivke-shutter-now .5s cubic-bezier(.6,0,.2,1)}
@keyframes sivke-shutter{0%,86%,100%{transform:scaleY(1)}88%{transform:scaleY(.12)}90%{transform:scaleY(1)}92.5%{transform:scaleY(.12)}94.5%{transform:scaleY(1)}}
@keyframes sivke-shutter-now{0%,100%{transform:scaleY(1)}25%{transform:scaleY(.12)}50%{transform:scaleY(1)}75%{transform:scaleY(.12)}}
.hd-nav{display:flex;align-items:center;gap:22px;margin-right:26px;transition:opacity .4s,transform .75s var(--e1)}
.hd-nav a{position:relative;display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:500;letter-spacing:-.005em;white-space:nowrap;padding:12px 0;transition:opacity .25s}
.hd-nav a:hover{opacity:.5}
.hd-nav a[aria-current]::before{content:"";width:6px;height:6px;background:var(--red)}
.hd-r{display:flex;align-items:center;gap:8px;transition:transform .75s var(--e1)}
.lg{display:flex;align-items:center;height:44px;padding:0 2px;border-radius:999px;background:var(--band)}
.lg a{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;height:44px;min-width:42px;padding:0 11px;
  font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--mute);transition:color .3s}
.lg a::before{content:"";position:absolute;z-index:-1;inset:4px 2px;border-radius:999px;background:transparent;transition:background-color .3s,box-shadow .3s}
.lg a:hover{color:var(--ink)}
.lg a[aria-current]{color:var(--ink)}
.lg a[aria-current]::before{background:#fff;box-shadow:0 1px 3px rgba(15,15,15,.14)}
.hd-cta{height:44px;padding:0 17px 0 20px;font-size:15px}
.hd-cta svg{width:17px;height:17px}
.hd-menu{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--band);transition:background-color .3s,opacity .4s,transform .75s var(--e1)}
.hd-menu:hover{background:var(--band2)}
.bars{display:block;width:18px;height:10px;position:relative}
.bars i{position:absolute;left:0;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .5s var(--e1)}
.bars i:first-child{top:0}.bars i:last-child{bottom:0}
html.mn-open .bars i:first-child{transform:translateY(4px) rotate(45deg)}
html.mn-open .bars i:last-child{transform:translateY(-4px) rotate(-45deg)}
@media (min-width:1340px){
  .hd-menu{position:absolute;right:-52px;top:0;opacity:0;pointer-events:none;transform:scale(.6)}
  .hd.is-compact .hd-pill{transform:translate3d(calc(var(--R,0px) / 2),0,0)}
  .hd.is-compact .hd-bg{clip-path:inset(0 var(--R,0px) 0 0 round 31px)}
  .hd.is-compact .hd-nav{opacity:0;pointer-events:none;transform:translate3d(-16px,0,0)}
  .hd.is-compact .hd-r{transform:translate3d(calc(-1 * var(--N,0px)),0,0)}
  .hd.is-compact .hd-menu{opacity:1;pointer-events:auto;transform:none}
}
@media (max-width:1339px){
  .hd-nav{display:none}
  .wm{margin-right:24px}
}
@media (max-width:760px){
  .hd{top:10px}
  .hd-pill{height:58px;padding:0 7px 0 20px;width:100%;max-width:440px}
  .wm{margin-right:auto;padding-right:14px}
  .wm .sivke-logo{height:24px}
  .hd-cta{width:44px;padding:0}
  .hd-cta-t{display:none}
  .hd-cta svg{width:18px;height:18px}
  .lg a{min-width:36px;padding:0 8px}
}
@media (max-width:350px){
  .hd-pill{padding-left:15px}
  .wm{padding-right:8px}
  .wm .sivke-logo{height:22px}
  .hd-r{gap:5px}
  .lg{padding:0 1px}
  .lg a{min-width:33px;padding:0 6px;font-size:12.5px}
}

/* ============ menu: two halves slide in and meet at the seam (photo half on desktop) ============ */
.mn{position:fixed;inset:0;z-index:55;visibility:hidden;pointer-events:none;transition:visibility 0s linear .9s}
html.mn-open .mn{visibility:visible;pointer-events:auto;transition:none}
.mn-a,.mn-b{position:absolute;top:0;bottom:0;width:50.1%;transition:transform .8s var(--e1) .06s}
.mn-a{left:0;background:var(--paper);transform:translate3d(-101%,0,0)}
.mn-b{right:0;background:var(--band);transform:translate3d(101%,0,0);overflow:hidden}
html.mn-open .mn-a,html.mn-open .mn-b{transform:none;transition:transform .85s var(--e1)}
.mn-b picture{position:absolute;inset:0}
.mn-in{position:relative;height:100%;overflow:auto;overflow-x:hidden;overscroll-behavior:contain;display:grid;grid-template-columns:1fr 1fr;
  padding:120px var(--mar) 40px}
.mn-nav{grid-column:1;align-self:center;display:flex;flex-direction:column;align-items:flex-start;padding-right:var(--gut)}
.mn-nav a{display:inline-flex;align-items:center;gap:.22em;font-weight:800;font-size:clamp(36px,min(4.6vw,6.3vh),76px);letter-spacing:-.01em;line-height:1.02;transition:opacity .25s}
.mn-nav a:hover{opacity:.45}
.mn-nav a[aria-current]::after{content:"";width:.16em;height:.16em;background:var(--red);margin-top:.12em}
.mn .ln>span{transform:translate3d(0,112%,0);transition:transform .5s var(--e2)}
html.mn-open .mn .ln>span{transform:none;transition:transform 1s var(--e2) .3s}
html.mn-open .mn-nav a:nth-child(2) .ln>span{transition-delay:.34s}
html.mn-open .mn-nav a:nth-child(3) .ln>span{transition-delay:.38s}
html.mn-open .mn-nav a:nth-child(4) .ln>span{transition-delay:.42s}
html.mn-open .mn-nav a:nth-child(5) .ln>span{transition-delay:.46s}
html.mn-open .mn-nav a:nth-child(6) .ln>span{transition-delay:.5s}
html.mn-open .mn-nav a:nth-child(7) .ln>span{transition-delay:.54s}
html.mn-open .mn-nav a:nth-child(8) .ln>span{transition-delay:.58s}
.mn-ph{display:none}
.mn-side{grid-column:1;align-self:end;display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-top:40px;
  opacity:0;transform:translate3d(0,20px,0);transition:opacity .4s,transform .5s var(--e2)}
html.mn-open .mn-side{opacity:1;transform:none;transition:opacity .8s .5s,transform 1s var(--e2) .5s}
.mn-line{font-size:18px;color:var(--ink);max-width:24em}
.mn-soc{display:flex;flex-wrap:wrap;gap:4px 22px;font-size:16px;font-weight:600}
.mn-soc a{display:inline-flex;align-items:center;min-height:44px}
html.mn-open,html.mn-open body{overflow:hidden}
@media (max-width:899px){
  .mn-b{display:none}
  .mn-a{width:100%}
  .mn-in{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;padding:96px var(--mar) 28px}
  .mn-nav{align-self:start}
  .mn-nav a{font-size:clamp(32px,9.6vw,50px)}
  /* the space between the list and the bottom block is the page's photo, cut to whatever height is left */
  .mn-ph{display:block;position:relative;margin:26px calc(-1 * var(--mar)) 0;min-height:0;overflow:hidden;background:var(--band);
    clip-path:inset(100% 0 0 0);transition:clip-path .5s var(--e1)}
  .mn-ph picture{position:absolute;inset:0}
  html.mn-open .mn-ph{clip-path:inset(0 0 0 0);transition:clip-path 1.1s var(--e1) .45s}
  .mn-side{margin-top:24px}
  .mn-nav .ln>span{white-space:normal}
}

/* ============ footer: a colophon with the wordmark at full size ============ */
.ft{background:var(--band);padding:clamp(80px,8vw,130px) 0 clamp(36px,4vw,56px)}
.ft-g{align-items:start;grid-template-rows:auto 1fr auto}
.ft-wm{grid-column:1/7;grid-row:1;justify-self:start;color:var(--ink)}
.ft-wm .sivke-logo{height:clamp(72px,9.4vw,158px)}
.ft-line{grid-column:1/6;grid-row:2;margin-top:26px;font-size:var(--body);line-height:1.5;color:var(--ink);max-width:22em}
.ft-nav{grid-column:7/10;grid-row:1/3;display:flex;flex-direction:column;align-items:flex-start}
.ft-nav a,.ft-soc a,.ft-wa{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:16.5px;font-weight:500}
.ft-nav a[aria-current]::before{content:"";width:6px;height:6px;background:var(--red)}
.ft-nav a:hover,.ft-soc a:hover{opacity:.55}
.ft-soc{grid-column:10/13;grid-row:1/3;display:flex;flex-direction:column;align-items:flex-start}
.ft-soc b{font-weight:700}
.ft-wa{gap:10px}
.ft-wa .chip{background:#fff}
.ft-name{grid-column:1/5;grid-row:3;align-self:center;margin-top:clamp(64px,7vw,110px);font-size:15px;color:var(--ink2)}
.ft-lg{grid-column:7/10;grid-row:3;justify-self:start;margin-top:clamp(64px,7vw,110px);background:#fff}
.ft-lg a[aria-current]::before{background:var(--band)!important;box-shadow:none!important}
.ft-top{grid-column:10/13;grid-row:3;justify-self:start;align-self:center;margin-top:clamp(64px,7vw,110px);display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;font-size:16px}
.ft-top svg{width:18px;height:18px;transition:transform .45s var(--e2)}
.ft-top:hover svg{transform:translate3d(0,-3px,0)}
@media (max-width:899px){
  .ft-wm{grid-column:1/-1}
  .ft-wm .sivke-logo{height:clamp(64px,18vw,96px)}
  .ft-line{grid-column:1/-1}
  .ft-nav{grid-column:1/7;grid-row:3;margin-top:40px}
  .ft-soc{grid-column:7/13;grid-row:3;margin-top:40px}
  .ft-name{grid-column:1/-1;grid-row:4;margin-top:44px}
  .ft-lg{grid-column:1/7;grid-row:5;margin-top:18px}
  .ft-top{grid-column:7/13;grid-row:5;justify-self:end;margin-top:18px}
}
@media (max-width:480px){
  .ft-nav,.ft-soc{grid-column:1/-1}
  .ft-soc{grid-row:4;margin-top:22px}
  .ft-name{grid-row:5}
  .ft-lg{grid-row:6}
  .ft-top{grid-row:6}
}

/* ============ 26.10.2026 live: footer legal row, floating call / WhatsApp, cookie card ============ */
.ft{padding-bottom:clamp(128px,10vw,160px)}
.ft-legal{grid-column:1/-1;grid-row:4;margin-top:clamp(28px,3vw,40px);padding-top:clamp(14px,1.4vw,20px);border-top:1px solid var(--grey);
  display:flex;flex-wrap:wrap;gap:0 28px;font-size:15px;color:var(--ink2)}
.ft-legal a,.ft-legal button{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;transition:color .3s}
.ft-legal a:hover,.ft-legal button:hover,.ft-legal a[aria-current]{color:var(--ink)}
.ft-soc b{white-space:nowrap}
@media (max-width:899px){
  .ft-legal{grid-row:6;margin-top:22px}
  .ft-soc a{flex-wrap:wrap;column-gap:.35em;row-gap:0}
}
@media (max-width:480px){.ft-legal{grid-row:7}}

/* call + WhatsApp, bottom right on every page; under the header (60), the menu (55) and the photo viewer (80) */
.fab{position:fixed;z-index:50;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none;
  animation:fab-in .9s var(--e2) .9s both;transition:opacity .35s,visibility 0s linear 0s}
@keyframes fab-in{from{opacity:0;transform:translate3d(0,18px,0)}}
.fab-b{pointer-events:auto;position:relative;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;color:#fff;
  box-shadow:0 14px 34px -12px rgba(15,15,15,.5),0 2px 6px rgba(15,15,15,.16);transition:transform .5s var(--e2),background-color .3s}
.fab-tel{background:var(--ink)}
.fab-wa{background:#25D366}
.fab-tel svg{width:25px;height:25px;stroke:#fff;stroke-width:1.9}
.fab-wa svg{width:29px;height:29px;fill:#fff;stroke:none}
.fab-l{position:absolute;right:calc(100% + 12px);top:50%;padding:9px 15px;border-radius:999px;background:var(--ink);color:#fff;
  font-size:14.5px;font-weight:600;white-space:nowrap;pointer-events:none;opacity:0;transform:translate3d(8px,-50%,0);
  transition:opacity .3s,transform .45s var(--e2)}
@media (hover:hover) and (pointer:fine){
  .fab-b:hover{transform:translate3d(0,-3px,0)}
  .fab-tel:hover{background:#2a2a2a}
  .fab-wa:hover{background:#1ebe5b}
  .fab-b:hover .fab-l{opacity:1;transform:translate3d(0,-50%,0)}
}
.fab-b:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.fab-b:focus-visible .fab-l{opacity:1;transform:translate3d(0,-50%,0)}
html.mn-open .fab{opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s linear .25s}
@media (max-width:899px){
  .fab{gap:10px}
  .fab-b{width:54px;height:54px}
  html.ck-open .fab{opacity:0;visibility:hidden}
}

/* cookie card: bottom left; both choices the same size (refusing is as easy as accepting) */
.ck{position:fixed;z-index:57;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));
  width:min(420px,calc(100vw - 32px));padding:22px 22px 20px;border-radius:22px;background:#fff;color:var(--ink);
  box-shadow:0 26px 64px -22px rgba(15,15,15,.38),0 0 0 1px rgba(15,15,15,.07);animation:ck-in .8s var(--e2) .5s both}
.ck[hidden]{display:none}
@keyframes ck-in{from{opacity:0;transform:translate3d(0,22px,0)}}
.ck-h{display:flex;align-items:center;gap:.4em;font-weight:800;font-size:22px;letter-spacing:-.006em;line-height:1}
.ck-h::before{content:"";width:.5em;height:.34em;border-radius:2px;background:var(--red);flex:none}
.ck-p{margin-top:11px;font-size:15.5px;line-height:1.5;color:var(--ink2)}
.ck-p a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:var(--grey)}
.ck-p a:hover{text-decoration-color:var(--red)}
.ck-b{display:flex;gap:10px;margin-top:17px}
.ck-b button{flex:1 1 0;height:48px;padding:0 14px;border:0;border-radius:999px;font:inherit;font-size:15.5px;font-weight:600;cursor:pointer;
  transition:background-color .3s}
.ck-yes{background:var(--ink);color:#fff}
.ck-yes:hover{background:#2a2a2a}
.ck-no{background:var(--band);color:var(--ink)}
.ck-no:hover{background:var(--band2)}
.ck-b button:focus-visible{outline:3px solid var(--red);outline-offset:2px}
html.mn-open .ck{visibility:hidden}
@media (max-width:520px){
  .ck{left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));width:auto;padding:20px 18px 18px;border-radius:20px}
}