/* Marvans top bar (Sir, Nov 1): liquid glass in Shoji White #F5F4EE, deep black #0B0B0B and burgundy #800020.
   A floating pill. Chromium bends what is behind its edges through the #mv-lens filter (html.lg, js/liquid.js);
   Safari / Firefox get the same pill as frosted glass. */
:root{--shoji:#F5F4EE;--ink-deep:#0B0B0B;--burg:#800020}
html body .gnav,html body.menu-open .gnav,html body .menu-open .gnav{background:transparent;border:0;box-shadow:none;color:var(--ink-deep);
  -webkit-backdrop-filter:none;backdrop-filter:none;height:auto;padding:10px 16px 0}
html body .gnav-in{position:relative;isolation:isolate;height:56px;max-width:1120px;padding-inline:22px 10px;border-radius:999px;
  background:linear-gradient(180deg,rgba(245,244,238,.78) 0%,rgba(245,244,238,.52) 55%,rgba(245,244,238,.66) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 1px rgba(255,255,255,.4),inset 0 10px 16px -12px rgba(255,255,255,.9),
             0 1px 2px rgba(11,11,11,.06),0 14px 34px -14px rgba(11,11,11,.28),0 18px 40px -26px rgba(128,0,32,.35)}
/* rim: bright shoji highlight top-left fading to a hint of burgundy bottom-right */
html body .gnav-in::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  background:linear-gradient(135deg,rgba(255,255,255,1) 0%,rgba(245,244,238,.7) 25%,rgba(11,11,11,.12) 55%,rgba(128,0,32,.35) 85%,rgba(255,255,255,.8) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
/* lens (Chromium): bends the page behind the bar's edges */
html.lg body .gnav-in{-webkit-backdrop-filter:none;backdrop-filter:none}
html.lg body .gnav-in::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  -webkit-backdrop-filter:url(#mv-lens) blur(6px) saturate(170%) brightness(1.04);backdrop-filter:url(#mv-lens) blur(6px) saturate(170%) brightness(1.04)}
/* contents in deep black, burgundy accents */
html body .gnav-links a{color:var(--ink-deep);opacity:.78;font-size:13px;font-weight:600;position:relative;padding:8px 4px;transition:opacity .2s,color .2s}
html body .gnav-links a::after{content:"";position:absolute;left:4px;right:4px;bottom:2px;height:2px;border-radius:2px;background:var(--burg);
  transform:scaleX(0);transform-origin:50% 50%;transition:transform .35s cubic-bezier(.22,1,.36,1)}
html body .gnav-links a[aria-current]{opacity:1;color:var(--burg)}
html body .gnav-links a[aria-current]::after{transform:scaleX(1)}
@media (hover:hover){html body .gnav-links a:hover{opacity:1}html body .gnav-links a:hover::after{transform:scaleX(1)}}
html body :is(.gnav-cta,.gnav-bag){color:var(--ink-deep);opacity:1}
html body .gnav-end{display:flex;align-items:center;gap:4px;justify-self:end}
html body .gnav-cta{width:40px;height:40px;margin:0;border-radius:50%;background:var(--ink-deep);color:var(--shoji);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 14px -6px rgba(11,11,11,.5);transition:transform .3s cubic-bezier(.34,1.45,.5,1),background .2s}
@media (hover:hover){html body .gnav-cta:hover{transform:scale(1.08);background:var(--burg)}}
html body .bag-n{background:var(--burg);color:var(--shoji)}
html body .burger i{background:var(--ink-deep)}
/* phone dropdown: a shoji glass sheet under the pill */
html body .menu{top:76px;inset-inline:12px;bottom:auto;border-radius:24px;color:var(--ink-deep);
  background:linear-gradient(180deg,rgba(245,244,238,.94),rgba(245,244,238,.86));
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  box-shadow:inset 0 1px 0 #fff,0 24px 50px -20px rgba(11,11,11,.35);padding:18px 24px 22px}
html body .menu nav a{color:var(--ink-deep)}
html body .menu .menu-foot{color:rgba(11,11,11,.6)}
@media (max-width:833px){html body .gnav-in{height:52px;padding-inline:18px 6px}}
@media (prefers-reduced-transparency:reduce){html body .gnav-in{background:var(--shoji)}html.lg body .gnav-in::after{display:none}}
/* Sir: keep the shoji white bar, but make its border clearly visible on the white page:
   a solid deep-black hairline + a crisp burgundy-to-black rim + a firmer shadow */
html body .gnav-in{outline:1px solid rgba(11,11,11,.16);outline-offset:-1px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 1px rgba(255,255,255,.4),inset 0 10px 16px -12px rgba(255,255,255,.9),
             0 0 0 1px rgba(11,11,11,.06),0 2px 6px rgba(11,11,11,.10),0 16px 36px -14px rgba(11,11,11,.32),0 18px 40px -24px rgba(128,0,32,.4)}
html body .gnav-in::before{padding:1.5px;background:linear-gradient(135deg,rgba(255,255,255,1) 0%,rgba(11,11,11,.35) 30%,rgba(11,11,11,.22) 55%,rgba(128,0,32,.75) 85%,rgba(11,11,11,.3) 100%)}
/* Sir: no burgundy in the border or shadow - neutral black rim only */
html body .gnav-in::before{background:linear-gradient(135deg,rgba(255,255,255,1) 0%,rgba(11,11,11,.35) 30%,rgba(11,11,11,.22) 55%,rgba(11,11,11,.38) 85%,rgba(11,11,11,.3) 100%)}
html body .gnav-in{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 1px rgba(255,255,255,.4),inset 0 10px 16px -12px rgba(255,255,255,.9),
             0 0 0 1px rgba(11,11,11,.06),0 2px 6px rgba(11,11,11,.10),0 16px 36px -14px rgba(11,11,11,.32)}
/* Sir: logo in deep black + burgundy, on the LEFT, vertically centred in the bar */
html body .gnav .brand{grid-column:1;justify-self:start;display:flex;align-items:center;height:100%;padding-top:0}
html body .gnav .brand img{width:100px;height:auto;display:block}
/* Sir: logo centred inside the LEFT part of the bar (between the bar's left edge and the links) */
@media (min-width:834px){html body .gnav .brand{justify-self:center}}
@media (min-width:834px){html body .gnav .brand{margin-left:-22px}}
/* Sir: logo all the way to the left, and a little up */
html body .gnav .brand,html body .gnav .brand{justify-self:start;margin-left:0}
@media (min-width:834px){html body .gnav .brand{justify-self:start;margin-left:0}}
html body .gnav .brand img{transform:translateY(-3px)}
/* Sir: the line sits UNDER the word, in deep black; link text deep black too */
html body .gnav-links a{color:var(--ink-deep) !important;opacity:1;display:inline-flex;flex-direction:column;align-items:center;line-height:1.2;padding:6px 2px}
html body .gnav-links a::after{position:static !important;top:auto !important;bottom:auto !important;left:auto;right:auto;
  display:block;width:100%;height:2px;margin-top:4px;border-radius:2px;background:var(--ink-deep) !important;box-shadow:none;
  transform:scaleX(0);transition:transform .35s cubic-bezier(.22,1,.36,1)}
html body .gnav-links a[aria-current]{color:var(--ink-deep) !important}
html body .gnav-links a[aria-current]::after{transform:scaleX(1)}
@media (hover:hover){html body .gnav-links a:hover::after{transform:scaleX(1)}}
/* Sir: WhatsApp icon plain like the bag icon - no black circle */
html body .gnav-cta{width:40px;height:40px;background:none !important;color:var(--ink-deep) !important;box-shadow:none;border-radius:0}
@media (hover:hover){html body .gnav-cta:hover{background:none !important;color:var(--ink-deep) !important;transform:scale(1.08)}}
html body :is(.gnav-cta,.gnav-bag) svg{width:20px;height:20px}
/* Sir: icons a little to the right */
html body .gnav-end{margin-right:-6px}
html body .gnav-in{padding-right:4px}
/* Sir: more depth on the border - a bevelled glass edge: bright lip on top, darker lip underneath,
   a slightly thicker rim and a deeper, layered shadow (neutral, no burgundy) */
html body .gnav-in{outline:1px solid rgba(11,11,11,.20);outline-offset:-1px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,1),
    inset 0 -2px 0 rgba(11,11,11,.10),
    inset 2px 0 0 rgba(255,255,255,.6),
    inset -2px 0 0 rgba(11,11,11,.06),
    inset 0 12px 18px -12px rgba(255,255,255,.95),
    inset 0 -10px 16px -12px rgba(11,11,11,.14),
    0 1px 0 rgba(11,11,11,.08),
    0 3px 6px rgba(11,11,11,.12),
    0 10px 20px -6px rgba(11,11,11,.18),
    0 26px 48px -18px rgba(11,11,11,.38)}
html body .gnav-in::before{padding:2px;background:linear-gradient(170deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.55) 22%,rgba(11,11,11,.14) 50%,rgba(11,11,11,.42) 80%,rgba(11,11,11,.28) 100%)}
/* Sir: icons a bit more to the LEFT (away from the bar's end) */
html body .gnav-end{margin-right:14px}
/* Sir: make everything inside the bar sharper (not the border).
   Crisp text rendering, firmer weight, thicker icon strokes, and no sub-pixel transforms that soften the logo. */
html body .gnav-in{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision}
html body .gnav-links a{font-weight:650;font-size:13.5px;letter-spacing:-.005em}
html body .gnav .brand img{transform:none;margin-top:-3px;image-rendering:-webkit-optimize-contrast}
html body :is(.gnav-cta,.gnav-bag) svg{stroke-width:2;shape-rendering:geometricPrecision}
html body :is(.gnav-cta,.gnav-bag,.gnav-links a){will-change:auto}
/* ---- Sir picked all 3 upgrades (Nov 1) ---- */
/* 1. "Book now": deep black glass pill at the end of the bar */

html body .gnav-end{margin-right:4px}

/* 2. smaller + clearer after you scroll */
html body .gnav-in{transition:height .45s cubic-bezier(.22,1,.36,1),max-width .45s cubic-bezier(.22,1,.36,1),background .45s ease}
html body .gnav{transition:padding .45s cubic-bezier(.22,1,.36,1)}
html body .gnav.is-scrolled{padding-top:8px}
html body .gnav.is-scrolled .gnav-in{height:48px;max-width:1040px;
  background:linear-gradient(180deg,rgba(245,244,238,.66) 0%,rgba(245,244,238,.42) 55%,rgba(245,244,238,.56) 100%)}

/* 3. glass bubble that slides behind the hovered link */
html body .gnav-links{position:relative}
html body .nav-bubble{position:absolute;left:0;top:50%;height:34px;border-radius:999px;pointer-events:none;z-index:-1;opacity:0;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(245,244,238,.55));
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(11,11,11,.08),0 0 0 1px rgba(11,11,11,.10),0 4px 10px -4px rgba(11,11,11,.25);
  transition:transform .45s cubic-bezier(.22,1,.36,1),width .45s cubic-bezier(.22,1,.36,1),opacity .25s ease}
html body .gnav-links.has-bubble .nav-bubble{opacity:1}
html body .gnav-links a{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){html body :is(.gnav-in,.gnav,.nav-bubble,.gnav-book){transition:none}}
/* Sir: "Book now" removed; keep the scroll shrink + hover bubble but smoother */

html body .gnav-in{transition:height .7s cubic-bezier(.16,1,.3,1),max-width .7s cubic-bezier(.16,1,.3,1),background .7s ease,box-shadow .7s ease}
html body .gnav{transition:padding .7s cubic-bezier(.16,1,.3,1)}
html body .gnav-links{z-index:1;isolation:isolate}
html body .nav-bubble{z-index:0;transition:transform .55s cubic-bezier(.16,1,.3,1),width .55s cubic-bezier(.16,1,.3,1),opacity .35s ease}
html body .gnav-links a{z-index:1}
/* Sir: remove the underline, keep only the glass bubble */
html body .gnav-links a::after{display:none !important}
/* Sir: smoother. The scroll shrink now moves only transform + opacity-like paint (no height/width relayout),
   so it glides on the GPU; one long soft ease for everything in the bar. */
html body .gnav,html body .gnav.is-scrolled{padding-top:10px;transition:none}
html body .gnav-in,html body .gnav.is-scrolled .gnav-in{height:56px;max-width:1120px}
html body .gnav-in{transform-origin:50% 0;will-change:transform;
  transition:transform .9s cubic-bezier(.16,1,.3,1),background .9s cubic-bezier(.16,1,.3,1),box-shadow .9s cubic-bezier(.16,1,.3,1)}
html body .gnav.is-scrolled .gnav-in{transform:translateY(-2px) scale(.94)}
html body .nav-bubble{will-change:transform,width;transition:transform .6s cubic-bezier(.16,1,.3,1),width .6s cubic-bezier(.16,1,.3,1),opacity .4s ease}
html body .gnav-links a{transition:color .4s ease}
@media (max-width:833px){html body .gnav-in,html body .gnav.is-scrolled .gnav-in{height:52px}}
@media (prefers-reduced-motion:reduce){html body .gnav-in{transition:none}}
/* Sir: the bubble in Marvans magenta #DF1078 (glassy), and the word on it turns shoji white so it reads */
html body .nav-bubble{background:linear-gradient(180deg,rgba(240,60,150,.95) 0%,#DF1078 55%,rgba(190,10,100,.95) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(11,11,11,.18),0 0 0 1px rgba(223,16,120,.35),0 6px 14px -6px rgba(223,16,120,.6)}
html body .gnav-links a.on-bubble{color:#F5F4EE !important}
/* Sir: magenta bubble as LIQUID GLASS, and calmer (it was too bright):
   see-through, slightly deeper magenta tint, bright rim on top, lens bending on Chromium */
html body .nav-bubble{
  background:linear-gradient(180deg,rgba(223,16,120,.42) 0%,rgba(190,12,100,.52) 60%,rgba(170,10,90,.58) 100%);
  -webkit-backdrop-filter:blur(6px) saturate(160%);backdrop-filter:blur(6px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 1px rgba(11,11,11,.18),inset 0 8px 12px -8px rgba(255,255,255,.35),
             0 0 0 1px rgba(170,10,90,.28),0 4px 10px -5px rgba(170,10,90,.45)}
html.lg body .nav-bubble{-webkit-backdrop-filter:url(#mv-lens) blur(3px) saturate(160%);backdrop-filter:url(#mv-lens) blur(3px) saturate(160%)}
/* Sir: bubble = REAL liquid glass with a magenta border.
   Clear centre with only a whisper of magenta, a thick bright-to-magenta rim (::before),
   a specular shine on top (::after), stronger lens bending on Chromium. */
html body .nav-bubble{overflow:visible;
  background:radial-gradient(120% 140% at 30% 0%,rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 45%,rgba(223,16,120,.10) 100%);
  -webkit-backdrop-filter:blur(2px) saturate(190%) brightness(1.06);backdrop-filter:blur(2px) saturate(190%) brightness(1.06);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9),inset 0 -2px 3px rgba(223,16,120,.22),inset 3px 0 6px -3px rgba(255,255,255,.6),
             0 6px 16px -8px rgba(223,16,120,.55),0 1px 2px rgba(11,11,11,.08)}
html.lg body .nav-bubble{-webkit-backdrop-filter:url(#mv-lens) blur(1px) saturate(190%) brightness(1.06);backdrop-filter:url(#mv-lens) blur(1px) saturate(190%) brightness(1.06)}
html body .nav-bubble::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.95) 0%,rgba(240,90,165,.9) 30%,#DF1078 60%,rgba(170,10,90,.95) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
html body .nav-bubble::after{content:"";position:absolute;left:12%;right:12%;top:2px;height:40%;border-radius:999px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0))}
/* clear glass now, so the word on it stays deep black to read well */
html body .gnav-links a.on-bubble{color:#0B0B0B !important}
/* Sir (Nov 1): remove the hero player bar, the hours line and the photo-credit line from the top section.
   The carousel still moves by itself, swipes and works with the arrow keys; credits stay in the footer. */
html body #fix :is(.mfx-nav,.mfx-hours,.mfx-fine){display:none !important}
/* Sir: two different whites at the top. The home hero now runs up under the floating bar, so it's one shoji white. */
html body.home .gnav{margin-bottom:-76px;z-index:70}
html body.home #fix{padding-top:calc(76px + clamp(34px,4.4vw,56px))}
html body.home{background:#F5F4EE}
/* Sir: the two hero buttons sit on the right */
html body #fix .mfx-foot{display:flex;justify-content:flex-end}
html body #fix .mfx-buy{margin-left:auto;margin-right:clamp(16px,4vw,64px);justify-content:flex-end}
@media (max-width:760px){html body #fix .mfx-buy{margin-right:0}}
@media (min-width:761px){html body #fix .mfx-buy{margin-right:0}html body #fix .mfx-foot{padding-right:0;margin-right:calc(-1 * var(--gut,22px) + 24px)}}
/* Sir: hero buttons as real LIQUID GLASS (same family as the nav bubble).
   Book a Repair = smoky deep-black liquid glass, Ask Imis = clear shoji liquid glass.
   Clear-ish body, bright rim (::before), specular shine on the top half (::after), lens bending on Chromium. */
html body :is(#fix .mfx-buy,.duo-tile .ctas) .pill{position:relative;isolation:isolate;overflow:visible;border:0 !important;
  -webkit-backdrop-filter:blur(8px) saturate(180%) brightness(1.04);backdrop-filter:blur(8px) saturate(180%) brightness(1.04);
  transition:transform .45s cubic-bezier(.34,1.45,.5,1),box-shadow .35s ease}
html.lg body :is(#fix .mfx-buy,.duo-tile .ctas) .pill{-webkit-backdrop-filter:url(#mv-lens) blur(3px) saturate(180%) brightness(1.04);backdrop-filter:url(#mv-lens) blur(3px) saturate(180%) brightness(1.04)}
html body :is(#fix .mfx-buy,.duo-tile .ctas) .pill::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
html body :is(#fix .mfx-buy,.duo-tile .ctas) .pill::after{content:"";position:absolute;left:10%;right:10%;top:2px;height:45%;border-radius:999px;pointer-events:none;z-index:1}
/* smoky deep black */
html body #fix #mfx-cta{color:#F5F4EE !important;
  background:linear-gradient(180deg,rgba(40,40,40,.72) 0%,rgba(11,11,11,.66) 55%,rgba(24,24,24,.74) 100%) !important;
  box-shadow:inset 0 1px 0 rgba(245,244,238,.35),inset 0 -2px 3px rgba(0,0,0,.45),0 10px 22px -10px rgba(11,11,11,.6),0 2px 4px rgba(11,11,11,.15) !important}
html body #fix #mfx-cta::before{background:linear-gradient(135deg,rgba(255,255,255,.75) 0%,rgba(245,244,238,.18) 35%,rgba(11,11,11,.4) 70%,rgba(245,244,238,.35) 100%)}
html body #fix #mfx-cta::after{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0))}
/* clear shoji */
html body #fix #mfx-ask{color:#0B0B0B !important;
  background:radial-gradient(120% 140% at 30% 0%,rgba(255,255,255,.75) 0%,rgba(255,255,255,.25) 50%,rgba(245,244,238,.35) 100%) !important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -2px 3px rgba(11,11,11,.10),0 10px 22px -12px rgba(11,11,11,.35),0 1px 2px rgba(11,11,11,.08) !important}
html body #fix #mfx-ask::before{background:linear-gradient(135deg,#fff 0%,rgba(255,255,255,.6) 30%,rgba(11,11,11,.22) 70%,rgba(11,11,11,.35) 100%)}
html body #fix #mfx-ask::after{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0))}
@media (hover:hover){html body :is(#fix .mfx-buy,.duo-tile .ctas) .pill:hover{transform:translateY(-2px) scale(1.04)}}
html body :is(#fix .mfx-buy,.duo-tile .ctas) .pill:active{transform:scale(.97)}
/* Sir: Book a Repair the SAME as Ask Imis, and make both really liquid glass.
   Liquid-glass recipe: almost clear body, thick bright rim (light top-left, shade bottom-right), inner edge glow that
   reads as glass thickness, a curved specular highlight, a soft caustic glow underneath, and a highlight that follows
   the pointer (js below). Lens bending on Chromium. */
html body :is(#fix .mfx-buy,.duo-tile .ctas) .pill,html body #fix #mfx-cta,html body #fix #mfx-ask{color:#0B0B0B !important;font-weight:650;
  background:
    radial-gradient(80% 120% at var(--lx,30%) var(--ly,0%),rgba(255,255,255,.85) 0%,rgba(255,255,255,.25) 40%,rgba(255,255,255,0) 70%),
    linear-gradient(180deg,rgba(255,255,255,.35) 0%,rgba(245,244,238,.12) 50%,rgba(220,218,210,.28) 100%) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 1.5px 0 0 rgba(255,255,255,.7),
    inset 0 -2px 0 rgba(11,11,11,.10),
    inset -1px 0 0 rgba(11,11,11,.06),
    inset 0 0 14px rgba(255,255,255,.55),
    inset 0 -8px 12px -8px rgba(11,11,11,.18),
    0 1px 1px rgba(11,11,11,.08),
    0 8px 16px -6px rgba(11,11,11,.22),
    0 18px 30px -16px rgba(11,11,11,.30) !important}
html body :is(#fix .mfx-buy,.duo-tile .ctas) .pill::before{padding:1.5px;
  background:linear-gradient(135deg,#fff 0%,rgba(255,255,255,.75) 25%,rgba(11,11,11,.10) 55%,rgba(11,11,11,.30) 85%,rgba(255,255,255,.6) 100%) !important}
html body :is(#fix .mfx-buy,.duo-tile .ctas) .pill::after{left:8%;right:8%;top:2px;height:48%;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.15) 70%,rgba(255,255,255,0)) !important;
  -webkit-mask:radial-gradient(120% 100% at 50% 0%,#000 55%,transparent 75%);mask:radial-gradient(120% 100% at 50% 0%,#000 55%,transparent 75%)}
html body :is(#fix .mfx-buy,.duo-tile .ctas) .pill{-webkit-backdrop-filter:blur(10px) saturate(200%) brightness(1.06) contrast(1.05);backdrop-filter:blur(10px) saturate(200%) brightness(1.06) contrast(1.05)}
html.lg body :is(#fix .mfx-buy,.duo-tile .ctas) .pill{-webkit-backdrop-filter:url(#mv-lens) blur(4px) saturate(200%) brightness(1.06);backdrop-filter:url(#mv-lens) blur(4px) saturate(200%) brightness(1.06)}
/* Sir's reference glass pill (measured): pure light body, a thin dark rim (top ~#5D-#84, sides ~#C6, bottom ~#79),
   an inner grey ring that fades from ~#DADADA at the rim to white about 25px in (the glass thickness),
   and a darker lip along the bottom-left edge. Shoji instead of pure white to stay in Marvans colours. */
html body :is(#fix .mfx-buy,.duo-tile .ctas) .pill,html body #fix #mfx-cta,html body #fix #mfx-ask{
  color:#0B0B0B !important;font-size:15px;font-weight:600;padding:0 28px;height:50px;
  background:#F7F6F1 !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  box-shadow:
    inset 0 0 0 1px rgba(11,11,11,.42),
    inset 0 1px 0 1px rgba(11,11,11,.18),
    inset 0 0 14px 2px rgba(11,11,11,.13),
    inset 0 0 4px 0 rgba(11,11,11,.10),
    -1.5px 2px 0 -0.5px rgba(11,11,11,.72),
    0 6px 14px -8px rgba(11,11,11,.30) !important}
html body :is(#fix .mfx-buy,.duo-tile .ctas) .pill::before,html body :is(#fix .mfx-buy,.duo-tile .ctas) .pill::after{display:none !important}
@media (hover:hover){html body :is(#fix .mfx-buy,.duo-tile .ctas) .pill:hover{transform:translateY(-2px) scale(1.03);
  box-shadow:inset 0 0 0 1px rgba(11,11,11,.5),inset 0 1px 0 1px rgba(11,11,11,.2),inset 0 0 16px 2px rgba(11,11,11,.15),inset 0 0 4px 0 rgba(11,11,11,.12),
             -1.5px 3px 0 -0.5px rgba(11,11,11,.78),0 10px 20px -10px rgba(11,11,11,.35) !important}}
html body :is(#fix .mfx-buy,.duo-tile .ctas) .pill:active{transform:scale(.97)}
/* Sir: the nav bubble the SAME as the hero buttons (his reference glass pill): light body, thin dark rim,
   inner grey thickness ring, darker lip bottom-left. */
html body .nav-bubble{
  background:#F7F6F1 !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  box-shadow:
    inset 0 0 0 1px rgba(11,11,11,.42),
    inset 0 1px 0 1px rgba(11,11,11,.18),
    inset 0 0 12px 2px rgba(11,11,11,.13),
    inset 0 0 4px 0 rgba(11,11,11,.10),
    -1.5px 2px 0 -0.5px rgba(11,11,11,.72),
    0 5px 12px -7px rgba(11,11,11,.30) !important}
html body .nav-bubble::before,html body .nav-bubble::after{display:none !important}
/* Sir: take ALL the magenta (and burgundy) out - only the logo keeps its magenta star.
   Hero accent -> soft shoji grey on the black cards; nav accent -> deep black. */
:root{--burg:#0B0B0B}
html body #fix{--mag:#B9B7AF}
html body #fix .mfx-cq{color:rgba(245,244,238,.62) !important}
@media (hover:hover) and (pointer:fine){html body #fix .mfx-item.is-mid .mfx-pic:hover .mfx-plus{background:rgba(11,11,11,.75) !important}}
html body #fix .mfx-card-k i{box-shadow:0 0 0 3px rgba(185,183,175,.25) !important}
html body .bag-n{background:#0B0B0B !important;color:#F5F4EE !important}
/* Sir: no "+" button on the carousel cards */
html body #fix .mfx-plus{display:none !important}
/* Sir: carousel cards more liquid glass, like the buttons (his reference pill), in the dark version:
   thin crisp rim, a light inner "thickness" ring that fades inward, a bright curved highlight across the top,
   a deeper-black lip on the bottom-left edge, and a soft floor shadow. Still no backdrop blur (it glitches on the turned cards). */
html body #fix .mfx-glass{
  background:
    radial-gradient(130% 60% at 50% -8%,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 45%,rgba(255,255,255,0) 70%),
    linear-gradient(165deg,#272726 0%,#141413 45%,#0B0B0B 100%) !important;
  border:1px solid rgba(245,244,238,.34) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.55),
    inset 0 1.5px 0 rgba(255,255,255,.38),
    inset 1.5px 0 0 rgba(255,255,255,.14),
    inset 0 0 22px 3px rgba(245,244,238,.07),
    inset 0 0 6px 0 rgba(245,244,238,.10),
    inset 0 -10px 18px -10px rgba(0,0,0,.65),
    -2px 3px 0 -1px rgba(0,0,0,.85),
    0 6px 14px rgba(11,11,11,.18),
    0 36px 64px -28px rgba(11,11,11,.6) !important}
/* the photo panel inside gets the same glass edge (light version, like the buttons) */
html body #fix .mfx-pic{box-shadow:inset 0 0 0 1px rgba(11,11,11,.35),inset 0 0 12px 2px rgba(11,11,11,.10),inset 0 1px 0 rgba(255,255,255,.9),-1.5px 2px 0 -.5px rgba(0,0,0,.6)}
/* Sir: carousel cards WHITE, the same as the buttons (his reference glass pill, light version) */
html body #fix .mfx-glass{
  background:#F7F6F1 !important;
  border:0 !important;
  box-shadow:
    inset 0 0 0 1px rgba(11,11,11,.42),
    inset 0 1px 0 1px rgba(11,11,11,.16),
    inset 0 0 26px 4px rgba(11,11,11,.11),
    inset 0 0 6px 0 rgba(11,11,11,.10),
    -2px 3px 0 -1px rgba(11,11,11,.72),
    0 8px 18px -10px rgba(11,11,11,.28),
    0 36px 60px -30px rgba(11,11,11,.35) !important}
html body #fix .mfx-cq{color:rgba(11,11,11,.55) !important}
html body #fix .mfx-ca{color:#0B0B0B !important}
html body #fix .mfx-cl{color:rgba(11,11,11,.62) !important}
html body #fix .mfx-pic{background:#fff;box-shadow:inset 0 0 0 1px rgba(11,11,11,.18),inset 0 0 10px 1px rgba(11,11,11,.06) !important}
/* Sir: cards deep black again, with the button's glass recipe INVERTED (white <-> black):
   deep black body, thin shoji rim, a light inner thickness ring, and a light lip on the bottom-left. */
html body #fix .mfx-glass{
  background:#0B0B0B !important;
  border:0 !important;
  box-shadow:
    inset 0 0 0 1px rgba(245,244,238,.42),
    inset 0 1px 0 1px rgba(245,244,238,.16),
    inset 0 0 26px 4px rgba(245,244,238,.11),
    inset 0 0 6px 0 rgba(245,244,238,.10),
    -2px 3px 0 -1px rgba(245,244,238,.72),
    0 8px 18px -10px rgba(11,11,11,.35),
    0 36px 60px -30px rgba(11,11,11,.45) !important}
html body #fix .mfx-cq{color:rgba(245,244,238,.55) !important}
html body #fix .mfx-ca{color:#F5F4EE !important}
html body #fix .mfx-cl{color:rgba(245,244,238,.66) !important}
/* Sir: hero background deep black too (cards keep the inverted glass: shoji rim + light lip) */
html body #fix{background:#0B0B0B !important}
html body.home{background:#0B0B0B}
html body #fix .mfx-glass{background:#121211 !important}
/* black page: side cards fade toward black, not shoji */
html body #fix .mfx-glass::after{background:#0B0B0B !important}
/* Sir: the photo panels deep black too (photos are now transparent cut-outs in img/hero/cut/),
   and the part POPS UP when you hover the card (springy lift + scale + soft shadow under it). */
html body #fix .mfx-pic{background:radial-gradient(70% 60% at 50% 45%,#1b1b1a 0%,#0B0B0B 100%) !important;
  box-shadow:inset 0 0 0 1px rgba(245,244,238,.16),inset 0 0 14px 2px rgba(245,244,238,.05) !important}
html body #fix .mfx-pic img{transition:transform .55s cubic-bezier(.34,1.56,.64,1),filter .45s ease;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.55))}
@media (hover:hover) and (pointer:fine){
  html body #fix .mfx-item.is-mid:hover .mfx-pic img,html body #fix .mfx-item.is-mid .mfx-pic:hover img{
    transform:translateY(-4%) scale(1.08);filter:drop-shadow(0 22px 22px rgba(0,0,0,.7))}}
html body #fix .mfx-item.is-mid .mfx-pic:active img{transform:translateY(-2%) scale(1.04)}
/* Sir: hero background back to shoji white (cards stay deep black); side cards fade toward shoji again */
html body #fix{background:#F5F4EE !important}
html body.home{background:#F5F4EE}
html body #fix .mfx-glass::after{background:#F5F4EE !important}
/* Sir: the top bar the same as the button (his reference glass pill): light body, thin dark rim,
   inner grey thickness ring, darker lip on the bottom-left. */
html body .gnav-in,html body .gnav.is-scrolled .gnav-in{
  background:#F7F6F1 !important;outline:0 !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  box-shadow:
    inset 0 0 0 1px rgba(11,11,11,.42),
    inset 0 1px 0 1px rgba(11,11,11,.16),
    inset 0 0 18px 3px rgba(11,11,11,.12),
    inset 0 0 5px 0 rgba(11,11,11,.10),
    -2px 3px 0 -1px rgba(11,11,11,.72),
    0 8px 18px -10px rgba(11,11,11,.30) !important}
html body .gnav-in::before{display:none !important}
html.lg body .gnav-in::after{display:none !important}
/* Sir: the carousel cards with the SAME glass effect as his reel crop (measured: card = page colour lifted ~10%
   and softened, thin bright rim strongest on top, slightly darker edge on the left, soft deep shadow).
   On our shoji page that is light frosted glass; text deep black. */
html body #fix .mfx-glass{
  background:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.42) 55%,rgba(255,255,255,.50) 100%) !important;
  border:0 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.75),
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 1px 0 0 rgba(11,11,11,.06),
    inset 0 -1px 0 rgba(11,11,11,.06),
    0 0 0 1px rgba(11,11,11,.06),
    0 2px 6px rgba(11,11,11,.06),
    0 26px 50px -22px rgba(11,11,11,.30) !important}
html body #fix .mfx-cq{color:rgba(11,11,11,.5) !important}
html body #fix .mfx-ca{color:#0B0B0B !important}
html body #fix .mfx-cl{color:rgba(11,11,11,.6) !important}
/* photo panel: a slightly clearer pane of the same glass, like the poster area in the reel */
html body #fix .mfx-pic{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.6)) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 1px 3px rgba(11,11,11,.08) !important}
html body #fix .mfx-pic img{filter:drop-shadow(0 8px 12px rgba(11,11,11,.22))}
@media (hover:hover) and (pointer:fine){
  html body #fix .mfx-item.is-mid:hover .mfx-pic img,html body #fix .mfx-item.is-mid .mfx-pic:hover img{filter:drop-shadow(0 20px 20px rgba(11,11,11,.3))}}
/* Sir: hero background a darker white (warm shoji grey) so the light glass cards stand out */
html body #fix{background:#E6E4DC !important}
html body.home{background:#E6E4DC}
html body #fix .mfx-glass::after{background:#E6E4DC !important}
/* Sir: carousel card BORDERS = deep black liquid glass (frosted body stays):
   a crisp deep-black rim, a glossy highlight line just inside it on top, a dark inner thickness ring that fades
   into the frosted glass, and the deep-black lip on the bottom-left like the buttons. */
html body #fix .mfx-glass{
  box-shadow:
    inset 0 0 0 1.5px rgba(11,11,11,.85),
    inset 0 2.5px 0 0 rgba(255,255,255,.75),
    inset 2px 0 0 0 rgba(255,255,255,.35),
    inset 0 0 0 3px rgba(11,11,11,.18),
    inset 0 0 18px 4px rgba(11,11,11,.14),
    -2.5px 3.5px 0 -1px rgba(11,11,11,.85),
    0 2px 6px rgba(11,11,11,.08),
    0 26px 50px -22px rgba(11,11,11,.32) !important}
/* Sir: the INSIDE border (photo panel) the same deep black liquid glass edge */
html body #fix .mfx-pic{
  box-shadow:
    inset 0 0 0 1.5px rgba(11,11,11,.85),
    inset 0 2.5px 0 0 rgba(255,255,255,.8),
    inset 2px 0 0 0 rgba(255,255,255,.35),
    inset 0 0 0 3px rgba(11,11,11,.16),
    inset 0 0 14px 3px rgba(11,11,11,.12),
    -2px 3px 0 -1px rgba(11,11,11,.8),
    0 2px 5px rgba(11,11,11,.08) !important}
/* Sir: background a little more grey (less warm) */
html body #fix{background:#DCDBD7 !important}
html body.home{background:#DCDBD7}
html body #fix .mfx-glass::after{background:#DCDBD7 !important}
/* Sir: hero background deep black */
html body #fix{background:#0B0B0B !important}
html body.home{background:#0B0B0B}
html body #fix .mfx-glass::after{background:#0B0B0B !important}
/* Sir: background Porsche "Sport Classic Grey" (paint 63A, solid medium grey) - #969E9D per colors.stuttcars.com (approximate screen value) */
html body #fix{background:#969E9D !important}
html body.home{background:#969E9D}
html body #fix .mfx-glass::after{background:#969E9D !important}
/* Sir: cards CRYSTAL-like with reflections - static, no animation.
   A clearer body, a broad diagonal reflection sweep across the top-left, a thin sharp glint line,
   bright crystal edges, and a faint mirror reflection along the bottom. */
html body #fix .mfx-glass{
  background:
    linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.26) 100%) !important}
html body #fix .mfx-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  background:
    linear-gradient(118deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 16%,rgba(255,255,255,.18) 24%,rgba(255,255,255,0) 34%),
    linear-gradient(118deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.7) 39%,rgba(255,255,255,0) 40.5%),
    linear-gradient(180deg,rgba(255,255,255,0) 82%,rgba(255,255,255,.22) 96%,rgba(255,255,255,.4) 100%),
    radial-gradient(60% 30% at 20% 0%,rgba(255,255,255,.5),rgba(255,255,255,0) 70%);
  mix-blend-mode:screen}
html body #fix .mfx-glass{box-shadow:
    inset 0 0 0 1.5px rgba(11,11,11,.85),
    inset 0 2.5px 0 0 rgba(255,255,255,.95),
    inset 2px 0 0 0 rgba(255,255,255,.6),
    inset -1.5px 0 0 0 rgba(255,255,255,.25),
    inset 0 -2px 0 0 rgba(255,255,255,.35),
    inset 0 0 0 3px rgba(11,11,11,.14),
    inset 0 0 22px 4px rgba(255,255,255,.18),
    -2.5px 3.5px 0 -1px rgba(11,11,11,.85),
    0 2px 6px rgba(11,11,11,.12),
    0 30px 56px -22px rgba(11,11,11,.45) !important}
/* Sir: the top bar must be LIQUID glass again - keep the button's rim / thickness ring / dark lip,
   but make the body see-through again with blur, and bring back the lens bending (Chromium). */
html body .gnav-in,html body .gnav.is-scrolled .gnav-in{
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(247,246,241,.38) 55%,rgba(247,246,241,.48) 100%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(180%) brightness(1.04) !important;backdrop-filter:blur(14px) saturate(180%) brightness(1.04) !important}
html.lg body .gnav-in{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
html.lg body .gnav-in::after{display:block !important;content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  -webkit-backdrop-filter:url(#mv-lens) blur(6px) saturate(180%) brightness(1.04);backdrop-filter:url(#mv-lens) blur(6px) saturate(180%) brightness(1.04)}
/* Sir: remove the diagonal (cross) glint line on the cards - keep the soft reflection sweep, edges and bottom reflection */
html body #fix .mfx-glass::before{
  background:
    linear-gradient(118deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 16%,rgba(255,255,255,.18) 24%,rgba(255,255,255,0) 34%),
    linear-gradient(180deg,rgba(255,255,255,0) 82%,rgba(255,255,255,.22) 96%,rgba(255,255,255,.4) 100%),
    radial-gradient(60% 30% at 20% 0%,rgba(255,255,255,.5),rgba(255,255,255,0) 70%) !important}
/* Sir: frosted (milky) glass doesn't look good -> clear crystal glass: almost no white fill, the grey shows
   straight through, the look comes from the crisp edges, reflections and the deep-black rim. */
html body #fix .mfx-glass{
  background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 50%,rgba(255,255,255,.07) 100%) !important}
html body #fix .mfx-glass::before{
  background:
    linear-gradient(118deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.30) 14%,rgba(255,255,255,.08) 24%,rgba(255,255,255,0) 32%),
    linear-gradient(180deg,rgba(255,255,255,0) 86%,rgba(255,255,255,.18) 97%,rgba(255,255,255,.32) 100%) !important}
html body #fix .mfx-cq{color:rgba(11,11,11,.55) !important}
html body #fix .mfx-ca{color:#0B0B0B !important}
html body #fix .mfx-cl{color:rgba(11,11,11,.7) !important}
/* Sir: card text only deep black (no grey) */
html body #fix .mfx-cq,html body #fix .mfx-ca,html body #fix .mfx-cl{color:#0B0B0B !important}
/* Sir: hero background shoji white */
html body #fix{background:#F5F4EE !important}
html body.home{background:#F5F4EE}
html body #fix .mfx-glass::after{background:#F5F4EE !important}
/* Sir: smoother carousel - keep every card on its own GPU layer and drop the costly blend on the reflection layer */
html body #fix .mfx-glass::before{mix-blend-mode:normal !important}
/* Sir: hero background deep black */
html body #fix{background:#0B0B0B !important}
html body.home{background:#0B0B0B}
html body #fix .mfx-glass::after{background:#0B0B0B !important}
/* black background: deep black card text became unreadable on the clear glass -> shoji white text */
html body #fix .mfx-cq,html body #fix .mfx-ca,html body #fix .mfx-cl{color:#F5F4EE !important}
html body #fix .mfx-cq,html body #fix .mfx-cl{opacity:.8}
/* Sir: even smoother - each card on its own GPU layer (transform only; no 'contain', it breaks the 3D row) */
html body #fix .mfx-item{will-change:transform}
html body #fix .mfx-glass::after{will-change:opacity}
/* Sir: top bar a little lighter (more white in the glass) */
html body .gnav-in,html body .gnav.is-scrolled .gnav-in{
  background:linear-gradient(180deg,rgba(255,255,255,.80) 0%,rgba(247,246,241,.66) 55%,rgba(247,246,241,.74) 100%) !important}
html.lg body .gnav-in::after{-webkit-backdrop-filter:url(#mv-lens) blur(6px) saturate(160%) brightness(1.18) !important;backdrop-filter:url(#mv-lens) blur(6px) saturate(160%) brightness(1.18) !important}
html body .gnav-in,html body .gnav.is-scrolled .gnav-in{
  background:linear-gradient(180deg,rgba(255,255,255,.93) 0%,rgba(247,246,241,.85) 55%,rgba(247,246,241,.9) 100%) !important}
/* Sir: top bar matches the carousel's clear crystal liquid glass:
   almost-clear body over the black, crisp deep-black rim, glossy white highlight on top, soft reflection sweep,
   bright crystal edges, light lip; shoji text, white logo with the magenta star. */
html body.home .gnav-in,html body.home .gnav.is-scrolled .gnav-in{
  background:linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.04) 50%,rgba(255,255,255,.08) 100%) !important;
  -webkit-backdrop-filter:blur(12px) saturate(160%) !important;backdrop-filter:blur(12px) saturate(160%) !important;
  box-shadow:
    inset 0 0 0 1.5px rgba(11,11,11,.85),
    inset 0 2.5px 0 0 rgba(255,255,255,.55),
    inset 2px 0 0 0 rgba(255,255,255,.3),
    inset -1.5px 0 0 0 rgba(255,255,255,.15),
    inset 0 -2px 0 0 rgba(255,255,255,.2),
    inset 0 0 0 3px rgba(11,11,11,.14),
    inset 0 0 18px 3px rgba(255,255,255,.08),
    -2px 3px 0 -1px rgba(245,244,238,.35),
    0 10px 24px -12px rgba(0,0,0,.6) !important}
html body.home .gnav-in::before{display:block !important;content:"";position:absolute;inset:0;border-radius:inherit;padding:0;pointer-events:none;z-index:0;
  -webkit-mask:none;mask:none;
  background:
    linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.22) 10%,rgba(255,255,255,.06) 18%,rgba(255,255,255,0) 26%),
    linear-gradient(180deg,rgba(255,255,255,0) 70%,rgba(255,255,255,.12) 100%) !important}
html body.home .gnav-links a,html body.home .gnav-links a[aria-current]{color:#F5F4EE !important}
html body.home .gnav-links a.on-bubble{color:#0B0B0B !important}
html body.home :is(.gnav-cta,.gnav-bag){color:#F5F4EE !important}
html body.home .burger i{background:#F5F4EE !important}
html body.home .bag-n{background:#F5F4EE !important;color:#0B0B0B !important}
/* logo: white version on the home page (black hero), deep-black version on the light inner pages */
html body .gnav .brand .logo-on-dark{display:none}
html body.home .gnav .brand .logo-on-dark{display:block}
html body.home .gnav .brand .logo-on-light{display:none}
/* Sir: the hero buttons the same crystal liquid glass as the top bar + cards, shoji text, and they POP UP on hover
   (springy lift + slight grow + brighter rim + glow underneath; press = sink). */
html body :is(#fix .mfx-buy,.duo-tile .ctas) .pill,html body #fix #mfx-cta,html body #fix #mfx-ask{
  position:relative;color:#F5F4EE !important;
  background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 50%,rgba(255,255,255,.10) 100%) !important;
  -webkit-backdrop-filter:blur(12px) saturate(160%) !important;backdrop-filter:blur(12px) saturate(160%) !important;
  box-shadow:
    inset 0 0 0 1.5px rgba(11,11,11,.85),
    inset 0 2.5px 0 0 rgba(255,255,255,.6),
    inset 2px 0 0 0 rgba(255,255,255,.3),
    inset 0 -2px 0 0 rgba(255,255,255,.2),
    inset 0 0 0 3px rgba(11,11,11,.14),
    inset 0 0 14px 2px rgba(255,255,255,.08),
    -2px 3px 0 -1px rgba(245,244,238,.35),
    0 8px 18px -10px rgba(0,0,0,.6) !important;
  transition:transform .55s cubic-bezier(.34,1.56,.64,1),box-shadow .4s ease,background .4s ease !important}
@media (hover:hover) and (pointer:fine){
  html body :is(#fix .mfx-buy,.duo-tile .ctas) .pill:hover{transform:translateY(-6px) scale(1.07) !important;
    background:linear-gradient(180deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.14) 100%) !important;
    box-shadow:
      inset 0 0 0 1.5px rgba(11,11,11,.85),
      inset 0 2.5px 0 0 rgba(255,255,255,.85),
      inset 2px 0 0 0 rgba(255,255,255,.45),
      inset 0 -2px 0 0 rgba(255,255,255,.3),
      inset 0 0 0 3px rgba(11,11,11,.14),
      inset 0 0 18px 3px rgba(255,255,255,.14),
      -2px 3px 0 -1px rgba(245,244,238,.5),
      0 18px 30px -12px rgba(0,0,0,.75),
      0 0 26px -6px rgba(245,244,238,.25) !important}}
html body :is(#fix .mfx-buy,.duo-tile .ctas) .pill:active{transform:translateY(-1px) scale(.97) !important;transition-duration:.15s !important}
/* Sir: the top-bar bubble matches the rest (crystal liquid glass, home page) - text on it stays shoji */
html body.home .nav-bubble{
  background:linear-gradient(180deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.07) 50%,rgba(255,255,255,.12) 100%) !important;
  box-shadow:
    inset 0 0 0 1.5px rgba(11,11,11,.85),
    inset 0 2px 0 0 rgba(255,255,255,.65),
    inset 1.5px 0 0 0 rgba(255,255,255,.3),
    inset 0 -1.5px 0 0 rgba(255,255,255,.22),
    inset 0 0 10px 2px rgba(255,255,255,.10),
    -1.5px 2.5px 0 -1px rgba(245,244,238,.4),
    0 6px 14px -8px rgba(0,0,0,.6) !important}
html body.home .gnav-links a.on-bubble{color:#F5F4EE !important}
/* Sir: duo section = the same crystal liquid glass as the hero, but different:
   black section, one big clear glass panel whose reflection is a soft DOME of light from the top centre
   (the hero uses a diagonal sweep), a thin bright top lip, deep-black rim, light lip bottom-left;
   crystal pill buttons that pop up. */
html body #main .duo-tile{background:#0B0B0B !important}
html body #main .duo-tile .duo-glass{
  background:
    radial-gradient(60% 38% at 50% 0%,rgba(255,255,255,.18) 0%,rgba(255,255,255,.06) 45%,rgba(255,255,255,0) 75%),
    linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.02) 55%,rgba(255,255,255,.05) 100%) !important;
  border:0 !important;
  box-shadow:
    inset 0 0 0 1.5px rgba(11,11,11,.9),
    inset 0 2.5px 0 0 rgba(255,255,255,.6),
    inset 2px 0 0 0 rgba(255,255,255,.22),
    inset -2px 0 0 0 rgba(255,255,255,.22),
    inset 0 0 0 3px rgba(11,11,11,.14),
    inset 0 0 40px 6px rgba(255,255,255,.05),
    -2.5px 3.5px 0 -1px rgba(245,244,238,.3),
    0 30px 60px -30px rgba(0,0,0,.8) !important}
html body #main .duo-tile .pill,html body #main .duo-tile .pill-line{
  color:#F5F4EE !important;
  background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 50%,rgba(255,255,255,.10) 100%) !important;
  -webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);
  box-shadow:
    inset 0 0 0 1.5px rgba(11,11,11,.85),
    inset 0 2.5px 0 0 rgba(255,255,255,.6),
    inset 2px 0 0 0 rgba(255,255,255,.3),
    inset 0 -2px 0 0 rgba(255,255,255,.2),
    inset 0 0 14px 2px rgba(255,255,255,.08),
    -2px 3px 0 -1px rgba(245,244,238,.35),
    0 8px 18px -10px rgba(0,0,0,.6) !important;
  transition:transform .55s cubic-bezier(.34,1.56,.64,1),box-shadow .4s ease !important}
@media (hover:hover) and (pointer:fine){
  html body #main .duo-tile :is(.pill,.pill-line):hover{transform:translateY(-6px) scale(1.07) !important;
    box-shadow:
      inset 0 0 0 1.5px rgba(11,11,11,.85),
      inset 0 2.5px 0 0 rgba(255,255,255,.85),
      inset 2px 0 0 0 rgba(255,255,255,.45),
      inset 0 -2px 0 0 rgba(255,255,255,.3),
      inset 0 0 18px 3px rgba(255,255,255,.14),
      -2px 3px 0 -1px rgba(245,244,238,.5),
      0 18px 30px -12px rgba(0,0,0,.75),
      0 0 26px -6px rgba(245,244,238,.25) !important}}
html body #main .duo-tile :is(.pill,.pill-line):active{transform:translateY(-1px) scale(.97) !important}
/* no white strips between the black home sections */
html body.home #main{background:#0B0B0B !important}
/* Sir: remove the duo fine-print line (the Apple trademark note stays in the footer),
   and the duo glass panel was cut off at the bottom -> give it a bottom edge with its rounded corners */
html body #main .duo-tile .duo-fine{display:none !important}
html body #main .duo-tile{padding-bottom:clamp(14px,2vw,24px) !important}
html body #main .duo-tile .duo-glass{bottom:clamp(14px,2vw,24px) !important}
html body #main .duo-tile .duo-stage{padding-bottom:clamp(26px,3vw,40px)}
/* Sir: inside the duo phone the same crystal liquid glass, and the phone in DARK MODE:
   deep-black wallpaper with a soft dark sheen, every widget a clear crystal glass tile (deep-black rim,
   glossy top highlight, light lip), shoji white text. */
html body #main .duo3 .d-paper{background:radial-gradient(90% 60% at 30% 0%,#2a2a29 0%,#141413 45%,#0B0B0B 100%) !important}
html body #main .duo3 .d-w{
  background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.05) 50%,rgba(255,255,255,.09) 100%) !important;
  -webkit-backdrop-filter:blur(10px) saturate(150%);backdrop-filter:blur(10px) saturate(150%);
  border:0 !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.85),
    inset 0 1.5px 0 0 rgba(255,255,255,.5),
    inset 1px 0 0 0 rgba(255,255,255,.22),
    inset 0 -1px 0 0 rgba(255,255,255,.16),
    inset 0 0 10px 1px rgba(255,255,255,.06),
    -1px 1.5px 0 -.5px rgba(245,244,238,.28),
    0 6px 14px -8px rgba(0,0,0,.7) !important}
html body #main .duo3 .d-w :is(b,em,span),html body #main .duo3 .d-w{color:#F5F4EE !important;-webkit-text-fill-color:#F5F4EE}
html body #main .duo3 .d-w :is(em,span){opacity:.72}
html body #main .duo3 .d-ad i{background:rgba(245,244,238,.14) !important;color:#F5F4EE !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.45) !important}
html body #main .duo3 .d-tick{background:#F5F4EE !important}
html body #main .duo3 :is(.d-time,.d-dots i){color:#F5F4EE !important}
/* Sir: the top two sections ONLY deep black + shoji white.
   - hero accent dots/bars (were grey #B9B7AF) -> shoji
   - duo phone body (graphite greys #333-#5A) -> deep black shades, notches deep black
   - any leftover dark-grey text -> shoji */
html body #fix{--mag:#F5F4EE}
html body #fix :is(.mfx-card-k i,.mfx-eq i,.mfx-bar b){background:#F5F4EE !important;box-shadow:none !important}
html body #main .duo3 .d-layer{background:#0B0B0B !important}
html body #main .duo3 .d-layer:nth-child(odd){background:#121212 !important}
html body #main .duo3 :is(.d-notch,.d-frame){background:#0B0B0B !important}
html body #fix span[style*="29,29,31"],html body #fix .mfx-card-x{color:#F5F4EE !important;border-color:rgba(245,244,238,.6) !important}
/* Sir: the duo phone's cover logo white (shoji, magenta star) and its tagline shoji, on the dark-mode phone */
html body #main .duo3 .d-cover-logo span{color:rgba(245,244,238,.75) !important;border-color:rgba(245,244,238,.6) !important}
/* Sir: 3rd section (iPhone 18 Pro & Pro Max) the same as the duo: deep black, a big clear crystal glass panel
   (dome of light from the top, deep-black rim, glossy top lip, light lip bottom-left), shoji text,
   crystal pill buttons that pop up. */
html body #main .pro-tile{background:#0B0B0B !important;position:relative;isolation:isolate;color:#F5F4EE}
html body #main .pro-tile::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:clamp(14px,2vw,24px) clamp(12px,2.4vw,32px);border-radius:clamp(26px,3vw,40px);
  background:
    radial-gradient(60% 38% at 50% 0%,rgba(255,255,255,.18) 0%,rgba(255,255,255,.06) 45%,rgba(255,255,255,0) 75%),
    linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.02) 55%,rgba(255,255,255,.05) 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(11,11,11,.9),
    inset 0 2.5px 0 0 rgba(255,255,255,.6),
    inset 2px 0 0 0 rgba(255,255,255,.22),
    inset -2px 0 0 0 rgba(255,255,255,.22),
    inset 0 0 0 3px rgba(11,11,11,.14),
    inset 0 0 40px 6px rgba(255,255,255,.05),
    -2.5px 3.5px 0 -1px rgba(245,244,238,.3),
    0 30px 60px -30px rgba(0,0,0,.8)}
html body #main .pro-tile :is(.pro-h,.t-sub,h2,p,.pro-sub){color:#F5F4EE !important;-webkit-text-fill-color:#F5F4EE}
html body #main .pro-tile :is(.pill,.pill-line){
  color:#F5F4EE !important;
  background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 50%,rgba(255,255,255,.10) 100%) !important;
  -webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);
  box-shadow:
    inset 0 0 0 1.5px rgba(11,11,11,.85),
    inset 0 2.5px 0 0 rgba(255,255,255,.6),
    inset 2px 0 0 0 rgba(255,255,255,.3),
    inset 0 -2px 0 0 rgba(255,255,255,.2),
    inset 0 0 14px 2px rgba(255,255,255,.08),
    -2px 3px 0 -1px rgba(245,244,238,.35),
    0 8px 18px -10px rgba(0,0,0,.6) !important;
  transition:transform .55s cubic-bezier(.34,1.56,.64,1),box-shadow .4s ease !important}
@media (hover:hover) and (pointer:fine){
  html body #main .pro-tile :is(.pill,.pill-line):hover{transform:translateY(-6px) scale(1.07) !important;
    box-shadow:
      inset 0 0 0 1.5px rgba(11,11,11,.85),
      inset 0 2.5px 0 0 rgba(255,255,255,.85),
      inset 2px 0 0 0 rgba(255,255,255,.45),
      inset 0 -2px 0 0 rgba(255,255,255,.3),
      inset 0 0 18px 3px rgba(255,255,255,.14),
      -2px 3px 0 -1px rgba(245,244,238,.5),
      0 18px 30px -12px rgba(0,0,0,.75),
      0 0 26px -6px rgba(245,244,238,.25) !important}}
html body #main .pro-tile :is(.pill,.pill-line):active{transform:translateY(-1px) scale(.97) !important}
/* Sir: the MARVANS reflection was cut off below the glass panel -> taller section so the whole reflection
   sits inside the panel, fading out before the panel's bottom edge */
html body #main .pro-tile{height:auto !important;min-height:692px;padding-bottom:clamp(150px,16vw,230px) !important;overflow:hidden}
html body #main .pro-tile::before{bottom:clamp(14px,2vw,24px)}
@media (max-width:833px){html body #main .pro-tile{min-height:650px;padding-bottom:clamp(90px,22vw,140px) !important}}
/* Sir: every home section fills the screen (the short ones grow to a full screen, content centred) */
html body.home #fix{min-height:100svh !important}
html body.home #main :is(.duo-tile,.pro-tile,.hhow){min-height:100svh !important;box-sizing:border-box;display:flex !important;flex-direction:column;justify-content:center}
html body.home #main .pro-tile{justify-content:center}
/* ---- Section 4 (The Marvans promise) - something different: the REVERSE of the sections above.
   Shoji white section; every card is POLISHED OBSIDIAN glass (deep black, mirror-like): a vertical sheen streak,
   a bright shoji rim with a glossy top edge, a reflection at the bottom, shoji text and icons (no gold).
   Buttons: deep-black crystal pills that pop up. */
html body.home #main .hpm{background:#F5F4EE !important}
html body.home #main .hpm :is(.hpm-h,.hpm-copy,.hpm-eyebrow){color:#0B0B0B !important;-webkit-text-fill-color:#0B0B0B}
html body.home #main .hpm .hpm-link{color:#0B0B0B !important}
html body.home #main .hpm-card .hpm-face{
  background:
    linear-gradient(100deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.10) 26%,rgba(255,255,255,.02) 33%,rgba(255,255,255,0) 40%),
    linear-gradient(180deg,rgba(255,255,255,0) 70%,rgba(255,255,255,.07) 100%),
    linear-gradient(160deg,#1c1c1b 0%,#0B0B0B 55%,#141413 100%) !important;
  box-shadow:
    inset 0 0 0 1.5px rgba(245,244,238,.42),
    inset 0 2.5px 0 0 rgba(255,255,255,.55),
    inset 2px 0 0 0 rgba(255,255,255,.18),
    inset 0 -2px 0 0 rgba(255,255,255,.14),
    inset 0 0 26px 4px rgba(245,244,238,.06),
    -2.5px 3.5px 0 -1px rgba(11,11,11,.9),
    0 26px 50px -24px rgba(11,11,11,.55) !important}
html body.home #main .hpm-card .hpm-logo{background:linear-gradient(180deg,#fff 0%,#F5F4EE 50%,#d9d8d2 100%) !important;filter:none !important}
html body.home #main .hpm-card .hpm-chip{background:#F5F4EE !important;filter:drop-shadow(0 0 6px rgba(245,244,238,.25)) !important}
html body.home #main .hpm-card :is(.hpm-l,.hpm-v,.hpm-b){color:#F5F4EE !important;-webkit-text-fill-color:#F5F4EE;background:none !important;text-shadow:none !important}
html body.home #main .hpm-card :is(.hpm-l,.hpm-b){opacity:.75}
html body.home #main .hpm :is(.hpm-pill,.hpm-pad){
  color:#F5F4EE !important;
  background:linear-gradient(180deg,#2a2a29 0%,#0B0B0B 55%,#161615 100%) !important;
  box-shadow:
    inset 0 0 0 1.5px rgba(245,244,238,.35),
    inset 0 2px 0 0 rgba(255,255,255,.45),
    inset 0 -1.5px 0 0 rgba(255,255,255,.12),
    -2px 3px 0 -1px rgba(11,11,11,.85),
    0 10px 20px -10px rgba(11,11,11,.55) !important;
  transition:transform .55s cubic-bezier(.34,1.56,.64,1),box-shadow .4s ease !important}
html body.home #main .hpm :is(.hpm-pad) svg{stroke:#F5F4EE}
@media (hover:hover) and (pointer:fine){html body.home #main .hpm :is(.hpm-pill,.hpm-pad):hover{transform:translateY(-5px) scale(1.07) !important;
  box-shadow:inset 0 0 0 1.5px rgba(245,244,238,.5),inset 0 2px 0 0 rgba(255,255,255,.7),inset 0 -1.5px 0 0 rgba(255,255,255,.18),-2px 3px 0 -1px rgba(11,11,11,.9),0 18px 28px -12px rgba(11,11,11,.6) !important}}
html body.home #main .hpm :is(.hpm-pill,.hpm-pad):active{transform:scale(.96) !important}
html body.home #main .hpm .hpm-dot{background:rgba(11,11,11,.25) !important}
html body.home #main .hpm .hpm-dot[aria-current="true"],html body.home #main .hpm .hpm-dot.on{background:#0B0B0B !important}

/* ---- Top bar on the home page switches itself: crystal-dark over black sections, light glass over light sections ---- */
html body.home.nav-light .gnav-in,html body.home.nav-light .gnav.is-scrolled .gnav-in{
  background:linear-gradient(180deg,rgba(255,255,255,.93) 0%,rgba(247,246,241,.85) 55%,rgba(247,246,241,.9) 100%) !important;
  box-shadow:inset 0 0 0 1px rgba(11,11,11,.42),inset 0 1px 0 1px rgba(11,11,11,.16),inset 0 0 18px 3px rgba(11,11,11,.12),inset 0 0 5px 0 rgba(11,11,11,.10),-2px 3px 0 -1px rgba(11,11,11,.72),0 8px 18px -10px rgba(11,11,11,.30) !important}
html body.home.nav-light .gnav-in::before{display:none !important}
html body.home.nav-light .gnav-links a,html body.home.nav-light :is(.gnav-cta,.gnav-bag){color:#0B0B0B !important}
html body.home.nav-light .burger i{background:#0B0B0B !important}
html body.home.nav-light .gnav .brand .logo-on-dark{display:none}
html body.home.nav-light .gnav .brand .logo-on-light{display:block}
html body.home.nav-light .nav-bubble{background:#F7F6F1 !important;box-shadow:inset 0 0 0 1px rgba(11,11,11,.42),inset 0 1px 0 1px rgba(11,11,11,.18),inset 0 0 12px 2px rgba(11,11,11,.13),-1.5px 2px 0 -.5px rgba(11,11,11,.72) !important}
html body.home.nav-light .gnav-links a.on-bubble{color:#0B0B0B !important}
html body.home .gnav-in,html body.home .gnav-links a{transition:background .5s ease,box-shadow .5s ease,color .4s ease}
/* Sir: the light bar, but LIQUID glass: see-through body, strong blur, the page behind brightened so the bar
   stays light even over black, lens bending on Chromium; rim / thickness ring / dark lip kept. */
html body.home.nav-light .gnav-in,html body.home.nav-light .gnav.is-scrolled .gnav-in,html body .gnav-in{
  background:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(247,246,241,.46) 55%,rgba(247,246,241,.55) 100%) !important;
  -webkit-backdrop-filter:blur(16px) saturate(180%) brightness(1.6) !important;backdrop-filter:blur(16px) saturate(180%) brightness(1.6) !important}
html.lg body .gnav-in{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
html.lg body .gnav-in::after,html.lg body.home .gnav-in::after{display:block !important;content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  -webkit-backdrop-filter:url(#mv-lens) blur(10px) saturate(180%) brightness(1.6) !important;backdrop-filter:url(#mv-lens) blur(10px) saturate(180%) brightness(1.6) !important}
html body.home.nav-light .gnav-in,html body.home.nav-light .gnav.is-scrolled .gnav-in,html body .gnav-in{
  background:linear-gradient(180deg,rgba(255,255,255,.80) 0%,rgba(247,246,241,.68) 55%,rgba(247,246,241,.74) 100%) !important}
/* Sir: "it's just white" - make it read as real FROSTED glass: much more see-through, heavy blur,
   a fine frost grain over it, and a light inner glow; text stays deep black. */
html body.home.nav-light .gnav-in,html body.home.nav-light .gnav.is-scrolled .gnav-in,html body .gnav-in{
  background:linear-gradient(180deg,rgba(255,255,255,.58) 0%,rgba(247,246,241,.40) 55%,rgba(247,246,241,.50) 100%) !important;
  -webkit-backdrop-filter:blur(22px) saturate(170%) brightness(1.25) !important;backdrop-filter:blur(22px) saturate(170%) brightness(1.25) !important}
html.lg body .gnav-in::after,html.lg body.home .gnav-in::after{
  -webkit-backdrop-filter:url(#mv-lens) blur(16px) saturate(170%) brightness(1.25) !important;backdrop-filter:url(#mv-lens) blur(16px) saturate(170%) brightness(1.25) !important}
html body .gnav-in::before,html body.home.nav-light .gnav-in::before{display:block !important;content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;padding:0;
  -webkit-mask:none;mask:none;opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E") !important}
html body .gnav-in > *{position:relative;z-index:1}
/* Sir: logo a little up */
html body .gnav .brand img{margin-top:-7px !important}
/* Sir: the "Marvans" word itself centred top-to-bottom on the left (measured: word was 26px from top, 18px from bottom) */
html body .gnav .brand img{margin-top:-11px !important}
html body .gnav .brand img{margin-top:-15px !important}
/* Sir: 4th section background deep black, the SAME crystal pill buttons as the sections above,
   and the cards get a fine premium grain texture (like bead-blasted metal / frosted glass). */
html body.home #main .hpm{background:#0B0B0B !important}
html body.home #main .hpm :is(.hpm-h,.hpm-copy,.hpm-eyebrow,.hpm-link){color:#F5F4EE !important;-webkit-text-fill-color:#F5F4EE}
html body.home #main .hpm :is(.hpm-pill,.hpm-pad){
  color:#F5F4EE !important;
  background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 50%,rgba(255,255,255,.10) 100%) !important;
  -webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);
  box-shadow:
    inset 0 0 0 1.5px rgba(11,11,11,.85),
    inset 0 2.5px 0 0 rgba(255,255,255,.6),
    inset 2px 0 0 0 rgba(255,255,255,.3),
    inset 0 -2px 0 0 rgba(255,255,255,.2),
    inset 0 0 14px 2px rgba(255,255,255,.08),
    -2px 3px 0 -1px rgba(245,244,238,.35),
    0 8px 18px -10px rgba(0,0,0,.6) !important}
@media (hover:hover) and (pointer:fine){html body.home #main .hpm :is(.hpm-pill,.hpm-pad):hover{transform:translateY(-6px) scale(1.07) !important;
  box-shadow:inset 0 0 0 1.5px rgba(11,11,11,.85),inset 0 2.5px 0 0 rgba(255,255,255,.85),inset 2px 0 0 0 rgba(255,255,255,.45),inset 0 -2px 0 0 rgba(255,255,255,.3),inset 0 0 18px 3px rgba(255,255,255,.14),-2px 3px 0 -1px rgba(245,244,238,.5),0 18px 30px -12px rgba(0,0,0,.75),0 0 26px -6px rgba(245,244,238,.25) !important}}
html body.home #main .hpm .hpm-dot{background:rgba(245,244,238,.3) !important}
html body.home #main .hpm .hpm-dot[aria-current="true"],html body.home #main .hpm .hpm-dot.on{background:#F5F4EE !important}
/* cards: crystal glass on black + fine grain */
html body.home #main .hpm-card .hpm-face{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(70% 40% at 30% 0%,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 70%),
    linear-gradient(160deg,#232322 0%,#121211 55%,#191918 100%) !important;
  box-shadow:
    inset 0 0 0 1.5px rgba(11,11,11,.9),
    inset 0 2.5px 0 0 rgba(255,255,255,.5),
    inset 2px 0 0 0 rgba(255,255,255,.2),
    inset 0 -2px 0 0 rgba(255,255,255,.14),
    inset 0 0 0 3px rgba(245,244,238,.06),
    inset 0 0 26px 4px rgba(245,244,238,.05),
    -2.5px 3.5px 0 -1px rgba(245,244,238,.3),
    0 26px 50px -24px rgba(0,0,0,.8) !important}
/* Sir: a real design texture on the 4th-section cards: a fine CARBON-FIBRE weave (fits a phone-repair shop),
   kept subtle and only in black/shoji tones, plus the grain, the soft top-left light and the glass rim. */
html body.home #main .hpm-card .hpm-face{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(70% 45% at 25% 0%,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 70%),
    linear-gradient(180deg,rgba(11,11,11,0) 55%,rgba(11,11,11,.55) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23262625'/%3E%3Cstop offset='.5' stop-color='%23101010'/%3E%3Cstop offset='1' stop-color='%23202020'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23262625'/%3E%3Cstop offset='.5' stop-color='%23101010'/%3E%3Cstop offset='1' stop-color='%23202020'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='6' height='6' fill='url(%23a)'/%3E%3Crect x='6' y='6' width='6' height='6' fill='url(%23a)'/%3E%3Crect x='6' width='6' height='6' fill='url(%23b)'/%3E%3Crect y='6' width='6' height='6' fill='url(%23b)'/%3E%3C/svg%3E") 0 0/12px 12px,
    #121211 !important}
/* Sir: a DIFFERENT texture on every card, and the logo on the cards keeps its magenta star */
html body.home #main .hpm-card .hpm-logo{-webkit-mask:none !important;mask:none !important;filter:none !important;
  background:url(../img/logo-shoji-orig.svg) left center/contain no-repeat !important}
html body.home #main .hpm-card .hpm-face{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  --light:radial-gradient(70% 45% at 25% 0%,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 70%);
  --floor:linear-gradient(180deg,rgba(11,11,11,0) 55%,rgba(11,11,11,.55) 100%)}
/* 1 - carbon fibre weave (kept from before) : .hpm-bur */
/* 2 - brushed metal: fine horizontal streaks */
html body.home #main .hpm-card.hpm-graphite .hpm-face{background:var(--grain),var(--light),var(--floor),
  repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,rgba(0,0,0,.05) 1px 2px,rgba(255,255,255,0) 2px 3px),
  linear-gradient(90deg,#141413,#1d1d1c 30%,#121211 60%,#1a1a19) !important}
/* 3 - honeycomb */
html body.home #main .hpm-card.hpm-silver .hpm-face{background:var(--grain),var(--light),var(--floor),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5'%3E%3Cpath d='M14 0l14 8.08v16.17L14 32.33 0 24.25V8.08zM14 32.33v16.17M0 48.5' fill='none' stroke='%23F5F4EE' stroke-opacity='.07' stroke-width='1'/%3E%3C/svg%3E") 0 0/28px 48.5px,
  #121211 !important}
/* 4 - knurled diamond grip (like a camera dial) */
html body.home #main .hpm-card.hpm-ti .hpm-face{background:var(--grain),var(--light),var(--floor),
  repeating-linear-gradient(45deg,rgba(245,244,238,.05) 0 1px,transparent 1px 7px),
  repeating-linear-gradient(-45deg,rgba(245,244,238,.05) 0 1px,transparent 1px 7px),
  #121211 !important}
/* 5 - fine dot matrix (like a speaker grille) */
html body.home #main .hpm-card.hpm-wine .hpm-face{background:var(--grain),var(--light),var(--floor),
  radial-gradient(circle at 50% 50%,rgba(245,244,238,.10) 0 1px,transparent 1.4px) 0 0/8px 8px,
  #121211 !important}
/* Sir: 3rd section text higher - it was overlapping the MARVANS artwork. Copy sits at the top of the panel,
   artwork below it. */
html body.home #main .pro-tile{justify-content:flex-start !important;padding-top:clamp(84px,9vw,120px) !important}
html body.home #main .pro-tile .tile-copy{position:relative;z-index:2;margin-bottom:clamp(18px,3vw,40px)}
/* Sir: remove the 4th-section control row (arrows + dots + grey box); the card stack keeps moving by itself */
html body.home #main .hpm .hpm-nav{display:none !important}
/* Sir: 5th section (scroll movie) changed - something different:
   deep black, the pinned screen sits in a big crystal glass frame, a SPLIT layout (words left in their own
   crystal card, the turning phone right), the phone's square backdrop faded away so no box edge shows,
   and no dots (the movie is driven by scrolling). */
html body.home #main .hsy{background:#0B0B0B !important}
html body.home #main .hsy .hsy-pin{position:sticky}
html body.home #main .hsy .hsy-pin::before{content:"";position:absolute;z-index:0;pointer-events:none;
  inset:clamp(70px,8vw,96px) clamp(12px,2.4vw,32px) clamp(14px,2vw,24px);border-radius:clamp(26px,3vw,40px);
  background:
    radial-gradient(55% 45% at 72% 50%,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 70%),
    linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.02) 55%,rgba(255,255,255,.04) 100%);
  box-shadow:inset 0 0 0 1.5px rgba(11,11,11,.9),inset 0 2.5px 0 0 rgba(255,255,255,.55),inset 2px 0 0 0 rgba(255,255,255,.2),
    inset -2px 0 0 0 rgba(255,255,255,.2),inset 0 0 40px 6px rgba(255,255,255,.04),-2.5px 3.5px 0 -1px rgba(245,244,238,.28),0 30px 60px -30px rgba(0,0,0,.8)}
html body.home #main .hsy .hsy-in{position:relative;z-index:1;display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;gap:clamp(24px,5vw,80px);width:min(1180px,calc(100% - 2*clamp(40px,7vw,110px)));margin-inline:auto;text-align:left}
html body.home #main .hsy .hsy-caps{text-align:left;padding:clamp(24px,3vw,40px);border-radius:clamp(20px,2.4vw,30px);
  background:linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.04) 50%,rgba(255,255,255,.08) 100%);
  box-shadow:inset 0 0 0 1.5px rgba(11,11,11,.85),inset 0 2.5px 0 0 rgba(255,255,255,.55),inset 2px 0 0 0 rgba(255,255,255,.25),
    inset 0 -2px 0 0 rgba(255,255,255,.16),inset 0 0 22px 3px rgba(255,255,255,.06),-2.5px 3.5px 0 -1px rgba(245,244,238,.3),0 24px 44px -22px rgba(0,0,0,.8)}
html body.home #main .hsy .hsy-caps *{text-align:left !important;color:#F5F4EE !important;-webkit-text-fill-color:#F5F4EE}
html body.home #main .hsy .hsy-stage{justify-self:center;
  -webkit-mask:radial-gradient(60% 52% at 50% 48%,#000 62%,transparent 100%);mask:radial-gradient(60% 52% at 50% 48%,#000 62%,transparent 100%)}
html body.home #main .hsy .hsy-ctl{display:none !important}
@media (max-width:833px){
  html body.home #main .hsy .hsy-in{grid-template-columns:1fr;gap:18px;width:calc(100% - 48px)}
  html body.home #main .hsy .hsy-caps{padding:18px 20px}}
/* Sir: the scroll-movie shots were getting cut (hard edges + my oval fade). No mask; the movie's pure-black
   background blends into the glass panel (lighten), so wide close-ups have no visible edges. */
html body.home #main .hsy .hsy-stage{-webkit-mask:none !important;mask:none !important;mix-blend-mode:lighten}
html body.home #main .hsy .hsy-stage *{mix-blend-mode:lighten}
/* the movie frames have a pure #000 background: make the panel behind them pure black too, so there is no box.
   The glass look stays in the rim, top lip and side highlights (no wash over the middle). */
html body.home #main .hsy{background:#000 !important}
html body.home #main .hsy .hsy-pin::before{background:radial-gradient(60% 18% at 50% 0%,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 100%),#000 !important}
html body.home #main .hsy .hsy-stage,html body.home #main .hsy .hsy-stage *{mix-blend-mode:normal !important}
/* close-up shots fill the movie's full width: fade the side and bottom edges softly instead of a hard cut */
html body.home #main .hsy .hsy-stage{
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(180deg,#000 0,#000 86%,transparent 100%) !important;
  -webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%) intersect,linear-gradient(180deg,#000 0,#000 86%,transparent 100%) !important}
/* Sir: make each section DIFFERENT (they all had the same big glass frame).
   - Duo: no frame. A spotlight from above and a polished glass FLOOR (plinth) the device stands on, with its reflection.
   - iPhone 18 Pro: no frame. Full-bleed, with a wide frosted glass BAND running behind the MARVANS word (like a shelf),
     bright hairlines on its top and bottom edges.
   - Scroll movie keeps its framed split layout; the promise section keeps its textured cards. */
html body #main .duo-tile .duo-glass{display:none !important}
html body #main .duo-tile{background:
  radial-gradient(38% 55% at 50% 0%,rgba(245,244,238,.13) 0%,rgba(245,244,238,.04) 45%,rgba(245,244,238,0) 75%),#0B0B0B !important}
html body #main .duo-tile .duo-stage{position:relative}
html body #main .duo-tile .duo-stage::after{content:"";position:absolute;left:50%;bottom:-6px;translate:-50% 0;z-index:-1;pointer-events:none;
  width:min(760px,82%);height:clamp(54px,7vw,90px);border-radius:50%;
  background:radial-gradient(closest-side,rgba(245,244,238,.16) 0%,rgba(245,244,238,.06) 55%,rgba(245,244,238,0) 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35)}
html body #main .pro-tile::before{inset:auto 0 auto 0 !important;top:42% !important;height:clamp(190px,24vw,330px) !important;border-radius:0 !important;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 60%,rgba(255,255,255,.05)) !important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.45),inset 0 -1.5px 0 rgba(255,255,255,.18),0 0 0 0 transparent !important}
/* Sir: the glass floor under the duo phone rounder and bigger */
html body #main .duo-tile .duo-stage::after{width:min(980px,96%) !important;height:clamp(140px,17vw,240px) !important;bottom:-60px !important;
  background:radial-gradient(closest-side,rgba(245,244,238,.18) 0%,rgba(245,244,238,.08) 50%,rgba(245,244,238,0) 100%) !important;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.28) !important}
html body #main .duo-tile .duo-stage::after{width:min(1000px,78vw) !important;height:clamp(150px,19vw,260px) !important;bottom:-70px !important}
/* Sir: iPhone 18 Pro section = just plain deep black, no band, no lines, no gradient */
html body #main .pro-tile::before{display:none !important}
html body #main .pro-tile{background:#0B0B0B !important}
/* Sir: when the Duo unfolds it SPINS once (so you see the back), and the back has the right camera:
   TWO lenses side by side (horizontal) in a deep-black glass bump, plus a small flash. */
html body #main .duo3 .d-rear{position:absolute;inset:0;transform:translateZ(calc(-1 * var(--T))) rotateY(180deg);backface-visibility:hidden;
  border-radius:var(--R) 0 0 var(--R);
  background:linear-gradient(160deg,#1c1c1b 0%,#0B0B0B 55%,#151514 100%);
  box-shadow:inset 0 0 0 calc(.6*var(--mm)) rgba(245,244,238,.12),inset 0 calc(.6*var(--mm)) 0 rgba(255,255,255,.18)}
html body #main .duo3 .d-cam{position:absolute;left:calc(6*var(--mm));top:calc(6*var(--mm));display:flex;align-items:center;gap:calc(2.6*var(--mm));
  padding:calc(2.2*var(--mm)) calc(2.6*var(--mm));border-radius:calc(6*var(--mm));
  background:linear-gradient(180deg,#232322,#0B0B0B);
  box-shadow:inset 0 0 0 calc(.35*var(--mm)) rgba(245,244,238,.22),inset 0 calc(.4*var(--mm)) 0 rgba(255,255,255,.25),0 calc(.8*var(--mm)) calc(2*var(--mm)) rgba(0,0,0,.6)}
html body #main .duo3 .d-lens{display:block;width:calc(9*var(--mm));aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 40% 38%,rgba(150,170,210,.45) 0 8%,transparent 22%),radial-gradient(circle,#050505 0 46%,#1b1b1a 47% 60%,#0B0B0B 61% 70%,#2a2a29 71% 100%);
  box-shadow:0 0 0 calc(.35*var(--mm)) rgba(245,244,238,.35),inset 0 0 0 calc(.25*var(--mm)) rgba(0,0,0,.9)}
html body #main .duo3 .d-flash{display:block;width:calc(2.6*var(--mm));aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#F5F4EE 0 35%,#9a9890 70%,#3a3a38 100%)}
@keyframes duoSpin{0%{transform:rotateY(0deg)}100%{transform:rotateY(360deg)}}
html body #main .duo3.open{animation:duoSpin 2.4s cubic-bezier(.65,0,.35,1) 3.3s 1 both}
@media (prefers-reduced-motion:reduce){html body #main .duo3.open{animation:none}}
/* the Duo's back was black-on-black: lighter graphite glass back with a clear rim so it reads during the spin */
html body #main .duo3 .d-rear{background:linear-gradient(160deg,#3a3a39 0%,#232322 45%,#2c2c2b 100%) !important;
  box-shadow:inset 0 0 0 calc(.5*var(--mm)) rgba(245,244,238,.35),inset 0 calc(.6*var(--mm)) 0 rgba(255,255,255,.35),inset 0 0 calc(8*var(--mm)) rgba(245,244,238,.06) !important}
html body #main .duo3 .d-back::before{background:#1a1a19 !important}
/* Sir: no spin on the Duo */
html body #main .duo3.open{animation:none !important}
/* Sir: 6th section (repair tiles) - different again: deep black section; tiles alternate SHOJI FROSTED glass and
   BLACK CRYSTAL glass; a soft light FOLLOWS THE MOUSE across each tile; the part photo lifts on hover;
   buttons = crystal pills that pop (light tiles get deep-black pills). */
html body.home #main .hgrid{background:#0B0B0B !important}
html body.home #main .hgrid-tile{position:relative;isolation:isolate;overflow:hidden;
  transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s ease}
html body.home #main .hgrid-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.16),rgba(255,255,255,0) 70%)}
@media (hover:hover) and (pointer:fine){html body.home #main .hgrid-tile:hover::after{opacity:1}
  html body.home #main .hgrid-tile:hover{transform:translateY(-6px)}
  html body.home #main .hgrid-tile:hover .hgrid-pic{transform:translateY(-10px) scale(1.04)}}
html body.home #main .hgrid-pic{transition:transform .7s cubic-bezier(.34,1.56,.64,1)}
/* light tiles: shoji frosted glass */
html body.home #main .hgrid-tile.hgrid-light{background:linear-gradient(180deg,#F5F4EE 0%,#ECEAE3 100%) !important;
  box-shadow:inset 0 0 0 1.5px rgba(11,11,11,.55),inset 0 2.5px 0 rgba(255,255,255,1),inset 0 0 30px 6px rgba(11,11,11,.06),
    -2.5px 3.5px 0 -1px rgba(245,244,238,.25),0 24px 50px -26px rgba(0,0,0,.8) !important}
html body.home #main .hgrid-tile.hgrid-light *{color:#0B0B0B;-webkit-text-fill-color:#0B0B0B}
html body.home #main .hgrid-tile.hgrid-light::after{background:radial-gradient(260px circle at var(--mx,50%) var(--my,30%),rgba(11,11,11,.07),rgba(11,11,11,0) 70%)}
/* dark tiles: black crystal glass */
html body.home #main .hgrid-tile.hgrid-dark{background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.02) 50%,rgba(255,255,255,.05) 100%),#0B0B0B !important;
  box-shadow:inset 0 0 0 1.5px rgba(245,244,238,.22),inset 0 2.5px 0 rgba(255,255,255,.45),inset 2px 0 0 rgba(255,255,255,.15),
    inset 0 0 30px 6px rgba(255,255,255,.04),-2.5px 3.5px 0 -1px rgba(245,244,238,.3),0 24px 50px -26px rgba(0,0,0,.8) !important}
html body.home #main .hgrid-tile.hgrid-dark .hgrid-copy *{color:#F5F4EE;-webkit-text-fill-color:#F5F4EE}
/* buttons */
html body.home #main .hgrid-tile :is(.hgrid-pill,.hgrid-pill-2){transition:transform .55s cubic-bezier(.34,1.56,.64,1),box-shadow .4s ease !important}
html body.home #main .hgrid-tile.hgrid-dark :is(.hgrid-pill,.hgrid-pill-2){color:#F5F4EE !important;-webkit-text-fill-color:#F5F4EE;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05) 50%,rgba(255,255,255,.10)) !important;
  box-shadow:inset 0 0 0 1.5px rgba(11,11,11,.85),inset 0 2.5px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(255,255,255,.2),-2px 3px 0 -1px rgba(245,244,238,.35),0 8px 18px -10px rgba(0,0,0,.6) !important}
html body.home #main .hgrid-tile.hgrid-light :is(.hgrid-pill,.hgrid-pill-2){color:#F5F4EE !important;-webkit-text-fill-color:#F5F4EE;
  background:linear-gradient(180deg,#2a2a29 0%,#0B0B0B 55%,#161615 100%) !important;
  box-shadow:inset 0 0 0 1.5px rgba(245,244,238,.3),inset 0 2px 0 rgba(255,255,255,.4),-2px 3px 0 -1px rgba(11,11,11,.85),0 8px 18px -10px rgba(11,11,11,.5) !important}
@media (hover:hover) and (pointer:fine){html body.home #main .hgrid-tile :is(.hgrid-pill,.hgrid-pill-2):hover{transform:translateY(-5px) scale(1.07) !important}}
/* Sir: the light repair tiles in shiny CHROME SILVER (polished metal): bright chrome bands with darker silver
   between them, a fine brushed grain, bright top edge; text deep black. */
html body.home #main .hgrid-tile.hgrid-light{
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,rgba(0,0,0,.03) 1px 2px,transparent 2px 3px),
    linear-gradient(165deg,#F1F0EF 0%,#CDCBCA 18%,#ECEBEA 34%,#A9A7A6 52%,#DEDDDC 68%,#B9B7B6 84%,#E8E7E6 100%) !important;
  box-shadow:inset 0 0 0 1.5px rgba(11,11,11,.55),inset 0 2.5px 0 rgba(255,255,255,1),inset 2px 0 0 rgba(255,255,255,.6),
    inset 0 -2px 0 rgba(11,11,11,.12),inset 0 0 30px 6px rgba(255,255,255,.12),
    -2.5px 3.5px 0 -1px rgba(245,244,238,.3),0 24px 50px -26px rgba(0,0,0,.85) !important}
html body.home #main .hgrid-tile.hgrid-light .hgrid-pic{filter:drop-shadow(0 18px 22px rgba(11,11,11,.35))}
/* Sir: 7th section (Why Marvans) - different again: deep black; black crystal cards; each card gets a BIG shiny
   CHROME SILVER number (01-05) in its corner; the icons become chrome silver line art; crystal arrow pills. */
html body.home #main .hwhy{background:#0B0B0B !important}
html body.home #main .hwhy :is(.hwhy-h,.hwhy-h *,.hwhy-link){color:#F5F4EE !important;-webkit-text-fill-color:#F5F4EE}
html body.home #main .hwhy .hwhy-link svg{stroke:#F5F4EE}
html body.home #main .hwhy-track{counter-reset:why}
html body.home #main .hwhy-card{counter-increment:why;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.02) 50%,rgba(255,255,255,.05) 100%),#0B0B0B !important;
  box-shadow:inset 0 0 0 1.5px rgba(245,244,238,.2),inset 0 2.5px 0 rgba(255,255,255,.45),inset 2px 0 0 rgba(255,255,255,.14),
    inset 0 0 30px 6px rgba(255,255,255,.035),-2.5px 3.5px 0 -1px rgba(245,244,238,.28),0 26px 50px -26px rgba(0,0,0,.85) !important}
html body.home #main .hwhy-card.hwhy-clone{counter-increment:none}
html body.home #main .hwhy-card::after{content:counter(why,decimal-leading-zero);position:absolute;right:22px;bottom:6px;pointer-events:none;
  font-size:clamp(110px,10vw,150px);font-weight:700;letter-spacing:-.06em;line-height:1;
  background:linear-gradient(180deg,#F1F0EF 0%,#CDCBCA 35%,#8E8C8B 55%,#E2E1E0 75%,#A9A7A6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.6));opacity:.9}
html body.home #main .hwhy-card :is(.hwhy-label,.hwhy-title,.hwhy-body){color:#F5F4EE !important;-webkit-text-fill-color:#F5F4EE;position:relative;z-index:1}
html body.home #main .hwhy-card :is(.hwhy-label,.hwhy-body){opacity:.72}
html body.home #main .hwhy-ic{background:linear-gradient(160deg,#2a2a29,#0B0B0B) !important;border-radius:14px;padding:10px;
  box-shadow:inset 0 0 0 1px rgba(245,244,238,.25),inset 0 1.5px 0 rgba(255,255,255,.4) !important;z-index:1}
html body.home #main .hwhy-ic svg{stroke:#CDCBCA !important;width:40px;height:40px}
html body.home #main .hwhy-paddle{color:#F5F4EE !important;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05) 50%,rgba(255,255,255,.10)) !important;
  box-shadow:inset 0 0 0 1.5px rgba(11,11,11,.85),inset 0 2.5px 0 rgba(255,255,255,.6),-2px 3px 0 -1px rgba(245,244,238,.35),0 8px 18px -10px rgba(0,0,0,.6) !important;
  transition:transform .55s cubic-bezier(.34,1.56,.64,1) !important}
html body.home #main .hwhy-paddle svg{stroke:#F5F4EE;fill:none}
@media (hover:hover) and (pointer:fine){html body.home #main .hwhy-paddle:hover{transform:translateY(-4px) scale(1.08) !important}}
html body.home #main .hwhy-card::after{z-index:2;filter:none !important;-webkit-text-fill-color:transparent}
html body.home #main .hwhy .hwhy-card::after{inset:auto 22px 6px auto !important;width:auto !important;height:auto !important;
  background:linear-gradient(180deg,#F1F0EF 0%,#CDCBCA 35%,#8E8C8B 55%,#E2E1E0 75%,#A9A7A6 100%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;-webkit-text-fill-color:transparent !important;
  opacity:.9 !important;box-shadow:none !important;border-radius:0 !important}
html body.home #main .hwhy .hwhy-card::after{left:auto !important;top:auto !important;width:max-content !important;max-width:none !important;white-space:nowrap !important;
  display:block !important;overflow:visible !important;text-align:right !important;padding:0 .04em 0 0 !important}
html body.home #main .hwhy .hwhy-card::after{background-size:100% 100% !important;background-position:0 0 !important;background-repeat:no-repeat !important;
  -webkit-mask:none !important;mask:none !important;animation:none !important;transform:none !important;clip-path:none !important}
/* Sir: Why-Marvans cards got cut when they lift on hover - give the sideways scroller room above and below
   (padding), pulled back with negative margin so the layout doesn't move */
html body.home #main .hwhy-scroller{padding-top:36px !important;padding-bottom:52px !important;margin-top:-36px !important;margin-bottom:-36px !important}
/* Sir: remove the big chrome numbers on the Why-Marvans cards */
html body.home #main .hwhy .hwhy-card::after{content:none !important;display:none !important}
/* Sir: 8th section (How it works) - different again: deep black; the 4 steps joined like a PATH -
   a thin shoji line runs through shiny CHROME number discs across the top of the cards; black crystal step cards
   that lift on hover. */
html body.home #main .hhow{background:#0B0B0B !important}
html body.home #main .hhow :is(.hhow-titles *,.hhow-link){color:#F5F4EE !important;-webkit-text-fill-color:#F5F4EE}
html body.home #main .hhow-steps{position:relative;padding-top:34px !important;overflow:visible}
html body.home #main .hhow-steps::before{content:"";position:absolute;left:calc(12.5% - 10px);right:calc(12.5% - 10px);top:33px;height:1.5px;z-index:0;
  background:linear-gradient(90deg,rgba(245,244,238,0),rgba(245,244,238,.55) 8%,rgba(245,244,238,.55) 92%,rgba(245,244,238,0))}
html body.home #main .hhow-card{position:relative;overflow:visible;padding-top:46px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.02) 50%,rgba(255,255,255,.05) 100%),#0B0B0B !important;
  box-shadow:inset 0 0 0 1.5px rgba(245,244,238,.2),inset 0 2.5px 0 rgba(255,255,255,.45),inset 2px 0 0 rgba(255,255,255,.14),
    inset 0 0 26px 5px rgba(255,255,255,.035),-2.5px 3.5px 0 -1px rgba(245,244,238,.28),0 24px 46px -24px rgba(0,0,0,.85) !important;
  transition:transform .6s cubic-bezier(.22,1,.36,1) !important}
@media (hover:hover) and (pointer:fine){html body.home #main .hhow-card:hover{transform:translateY(-6px) !important}}
html body.home #main .hhow-card .hhow-n{position:absolute;left:50%;top:0;translate:-50% -50%;z-index:2;
  width:44px;height:44px;border-radius:50%;display:grid !important;place-items:center;font-size:17px;font-weight:700;
  color:#0B0B0B !important;-webkit-text-fill-color:#0B0B0B;
  background:linear-gradient(160deg,#F1F0EF 0%,#CDCBCA 35%,#8E8C8B 58%,#E2E1E0 80%,#A9A7A6 100%) !important;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9),inset 0 -1.5px 0 rgba(0,0,0,.25),0 0 0 4px #0B0B0B,0 6px 14px -4px rgba(0,0,0,.8) !important}
html body.home #main .hhow-card :is(.hhow-t,.hhow-p){color:#F5F4EE !important;-webkit-text-fill-color:#F5F4EE;text-align:center}
html body.home #main .hhow-card .hhow-p{opacity:.72}
html body.home #main .hhow-card::before,html body.home #main .hhow-card::after{display:none !important}
@media (max-width:833px){html body.home #main .hhow-steps::before{display:none}}
/* Sir: remove the line joining the step numbers */
html body.home #main .hhow-steps::before{display:none !important}
/* Sir: 9th section (Visit the shop) + the shop photo was getting cut.
   - Whole photo shown (no crop), inside a polished CHROME SILVER frame.
   - Deep black section, black crystal cards, the phone number in big shiny chrome, crystal pills that pop. */
html body.home #main .hvisit{background:#0B0B0B !important}
html body.home #main .hvisit :is(.hvisit-eyebrow,.hvisit-h,.hvisit-h *,.hvisit-sub){color:#F5F4EE !important;-webkit-text-fill-color:#F5F4EE}
html body.home #main .hvisit-photo{padding:10px;border-radius:30px;
  background:linear-gradient(160deg,#F1F0EF 0%,#CDCBCA 22%,#8E8C8B 45%,#E2E1E0 62%,#A9A7A6 82%,#DEDDDC 100%) !important;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9),inset 0 -1.5px 0 rgba(0,0,0,.3),0 30px 60px -28px rgba(0,0,0,.9) !important;overflow:hidden}
html body.home #main .hvisit-photo img{height:auto !important;aspect-ratio:980/876;object-fit:contain !important;border-radius:21px;display:block;width:100%}
html body.home #main .hvisit-photo figcaption{left:10px;right:10px;bottom:10px;border-radius:0 0 21px 21px}
html body.home #main .hvisit-card{
  background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.02) 50%,rgba(255,255,255,.05) 100%),#0B0B0B !important;
  box-shadow:inset 0 0 0 1.5px rgba(245,244,238,.2),inset 0 2.5px 0 rgba(255,255,255,.45),inset 2px 0 0 rgba(255,255,255,.14),
    inset 0 0 30px 6px rgba(255,255,255,.035),-2.5px 3.5px 0 -1px rgba(245,244,238,.28),0 26px 50px -26px rgba(0,0,0,.85) !important}
html body.home #main .hvisit-card :is(.hvisit-label,.hvisit-body,.hvisit-facts,.hvisit-facts *,.hvisit-hours,.hvisit-hours *,.hvisit-copy p,.hvisit-copy h3,.hvisit-row *){color:#F5F4EE;-webkit-text-fill-color:#F5F4EE}
html body.home #main .hvisit-big,html body.home #main .hvisit-tel{
  background:linear-gradient(180deg,#F1F0EF 0%,#CDCBCA 38%,#8E8C8B 58%,#E2E1E0 80%,#A9A7A6 100%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;-webkit-text-fill-color:transparent !important}
html body.home #main .hvisit :is(.hvisit-pill,.hvisit-pill-line){color:#F5F4EE !important;-webkit-text-fill-color:#F5F4EE;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05) 50%,rgba(255,255,255,.10)) !important;
  box-shadow:inset 0 0 0 1.5px rgba(11,11,11,.85),inset 0 2.5px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(255,255,255,.2),-2px 3px 0 -1px rgba(245,244,238,.35),0 8px 18px -10px rgba(0,0,0,.6) !important;
  transition:transform .55s cubic-bezier(.34,1.56,.64,1) !important}
@media (hover:hover) and (pointer:fine){html body.home #main .hvisit :is(.hvisit-pill,.hvisit-pill-line):hover{transform:translateY(-5px) scale(1.07) !important}}
html body.home #main .hvisit-hours .hvisit-row:first-child,html body.home #main .hvisit-row.is-today{background:rgba(245,244,238,.08) !important;box-shadow:inset 0 0 0 1px rgba(245,244,238,.22),inset 0 1px 0 rgba(255,255,255,.3) !important}
html body.home #main .hvisit-open{background:rgba(245,244,238,.12) !important;color:#F5F4EE !important;-webkit-text-fill-color:#F5F4EE}
html body.home #main .hvisit-dot{background:#F5F4EE !important}
/* Sir: Visit section fits the screen -> two full screens:
   screen 1 = heading + the whole shop photo sized to fit; screen 2 = both cards together, centred. */
@media (min-width:834px){
  html body.home #main .hvisit{padding-top:clamp(84px,9vh,110px) !important}
  html body.home #main .hvisit-photo{width:auto !important;max-width:100%;margin-inline:auto;
    height:calc(100svh - clamp(84px,9vh,110px) - 119px - 70px) !important;aspect-ratio:auto}
  html body.home #main .hvisit-photo img{height:100% !important;width:auto !important;max-width:100%;aspect-ratio:980/876;margin-inline:auto}
  html body.home #main .hvisit-cards{row-gap:0 !important}
  html body.home #main .hvisit-card--shop{margin-top:calc(70px + clamp(40px,8vh,90px)) !important;scroll-margin-top:clamp(70px,9vh,100px)}
  html body.home #main .hvisit-card--shop,html body.home #main .hvisit-card--split{max-height:calc(50svh - 60px)}
  html body.home #main .hvisit-card--split{margin-top:24px !important;margin-bottom:clamp(40px,8vh,90px) !important}
  html body.home #main .hvisit-photo{display:block}
}
/* Sir: the photo was too small - make it WIDE (full content width) while still fitting the screen;
   it fills the frame, keeping the sign and the shop door in view (only plain wall/floor trimmed) */
@media (min-width:834px){
  html body.home #main .hvisit-photo{width:min(1180px,calc(100vw - 2*clamp(20px,4vw,64px))) !important;max-width:none !important}
  html body.home #main .hvisit-photo img{width:100% !important;height:100% !important;aspect-ratio:auto !important;object-fit:cover !important;object-position:50% 30% !important}
  html body.home #main .hvisit-cards{max-width:none !important;width:min(1180px,calc(100vw - 2*clamp(20px,4vw,64px))) !important;margin-inline:auto}
}
/* Sir: the wide photo got cut -> show the WHOLE photo (contain) in the middle of the wide chrome frame,
   and fill the sides with a soft, darker, blurred copy of the same photo. Nothing cut, still wide, still fits. */
@media (min-width:834px){
  html body.home #main .hvisit-photo{position:relative;isolation:isolate}
  html body.home #main .hvisit-photo::before{content:"";position:absolute;inset:10px;border-radius:21px;z-index:0;pointer-events:none;
    background:url(../img/shop-front.webp?v=1) center/cover no-repeat;filter:blur(26px) brightness(.55) saturate(.9);transform:scale(1.08)}
  html body.home #main .hvisit-photo img{position:relative;z-index:1;object-fit:contain !important;object-position:50% 50% !important;background:transparent !important}
  html body.home #main .hvisit-photo figcaption{z-index:2}
}
/* Sir: the edge between the photo and the blurred sides was too sharp -> fade the photo's left/right edges
   softly into the blur */
@media (min-width:834px){
  html body.home #main .hvisit-photo img{
    -webkit-mask:linear-gradient(90deg,transparent calc(50% - min(48%, 42vh)),#000 calc(50% - min(48%,42vh) + 70px),#000 calc(50% + min(48%,42vh) - 70px),transparent calc(50% + min(48%,42vh)));
            mask:linear-gradient(90deg,transparent calc(50% - min(48%, 42vh)),#000 calc(50% - min(48%,42vh) + 70px),#000 calc(50% + min(48%,42vh) - 70px),transparent calc(50% + min(48%,42vh)))}
}
@media (min-width:834px){
  html body.home #main .hvisit-photo{display:flex !important;justify-content:center;align-items:stretch}
  html body.home #main .hvisit-photo img{width:auto !important;height:100% !important;aspect-ratio:980/876 !important;object-fit:fill !important;margin:0 auto;flex:none;
    -webkit-mask:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%) !important;
            mask:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%) !important}
  html body.home #main .hvisit-photo figcaption{position:absolute}
}
/* Sir: the Visit cards must fit the screen on his (shorter) screen too:
   each card is exactly half of the space under the top bar; text, gaps and buttons scale with screen height. */
@media (min-width:834px){
  html body.home #main .hvisit-card--shop{margin-top:calc(100svh - 100% ) }
  html body.home #main .hvisit-card--shop,html body.home #main .hvisit-card--split{
    height:calc((100svh - 96px - 3vh - 16px) / 2) !important;max-height:none !important;min-height:0 !important;overflow:hidden}
  html body.home #main .hvisit-card--shop{margin-top:calc(70px + 9vh) !important;scroll-margin-top:calc(96px + 1.5vh)}
  html body.home #main .hvisit-card--split{margin-top:16px !important;margin-bottom:calc(70px + 9vh) !important}
  html body.home #main .hvisit-card .hvisit-copy{padding:clamp(14px,3vh,40px) clamp(18px,3vw,44px) !important;justify-content:center;display:flex;flex-direction:column;gap:clamp(4px,1vh,12px)}
  html body.home #main .hvisit-card :is(.hvisit-title){font-size:clamp(18px,3.6vh,40px) !important;line-height:1.1 !important}
  html body.home #main .hvisit-card :is(.hvisit-body,.hvisit-facts li,.hvisit-copy p){font-size:clamp(11px,1.75vh,16px) !important;line-height:1.35 !important;margin:0 !important}
  html body.home #main .hvisit-card .hvisit-facts{margin:clamp(2px,.8vh,10px) 0 !important}
  html body.home #main .hvisit-card .hvisit-facts li{padding:clamp(1px,.4vh,4px) 0 !important}
  html body.home #main .hvisit-big,html body.home #main .hvisit-tel{font-size:clamp(24px,6.2vh,64px) !important;line-height:1.05 !important}
  html body.home #main .hvisit-card :is(.hvisit-pill,.hvisit-pill-line){height:clamp(32px,5vh,48px) !important;font-size:clamp(13px,1.9vh,17px) !important;padding:0 clamp(14px,1.8vw,24px) !important}
  html body.home #main .hvisit-card .hvisit-row{padding:clamp(4px,1vh,12px) clamp(10px,1.4vw,18px) !important;font-size:clamp(13px,2.3vh,22px) !important}
  html body.home #main .hvisit-card .hvisit-map{height:100% !important}
  html body.home #main .hvisit-card .hvisit-map iframe{height:100% !important}
}
@media (min-width:834px){
  /* only the big number is chrome + large; the landline stays normal text */
  html body.home #main .hvisit-card .hvisit-tel{font-size:inherit !important;background:none !important;color:#F5F4EE !important;-webkit-text-fill-color:#F5F4EE !important}
  html body.home #main .hvisit-card .hvisit-big,html body.home #main .hvisit-card .hvisit-big .hvisit-tel{font-size:clamp(24px,6.2vh,64px) !important;
    background:linear-gradient(180deg,#F1F0EF 0%,#CDCBCA 38%,#8E8C8B 58%,#E2E1E0 80%,#A9A7A6 100%) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;-webkit-text-fill-color:transparent !important}
  /* shop card: on short screens drop the 3 small facts so "Get directions" always fits */
  html body.home #main .hvisit-card--shop .hvisit-copy{justify-content:center}
}
@media (min-width:834px) and (max-height:820px){html body.home #main .hvisit-card--shop .hvisit-facts{display:none !important}}
/* Sir: shop card content higher - "Get directions" was cut. Content starts higher and the 3 facts sit
   side by side on one line, so everything fits on any screen. */
@media (min-width:834px){
  html body.home #main .hvisit-card--shop .hvisit-copy{justify-content:safe center !important;padding-top:clamp(14px,2.6vh,30px) !important;padding-bottom:clamp(14px,2.6vh,30px) !important;gap:clamp(4px,.8vh,10px) !important}
  html body.home #main .hvisit-card--shop .hvisit-facts{display:flex !important;flex-wrap:wrap;gap:2px 18px;margin:2px 0 6px !important;padding:0 !important}
  html body.home #main .hvisit-card--shop .hvisit-facts li{padding:0 !important;margin:0 !important;line-height:1.5 !important}
}
@media (min-width:834px) and (max-height:820px){html body.home #main .hvisit-card--shop .hvisit-facts{display:flex !important}}
@media (min-width:834px){
  /* the shop name shares the "big" class with the phone number - keep it a normal heading size here */
  html body.home #main .hvisit-card--shop .hvisit-title,html body.home #main .hvisit-card--shop .hvisit-title.hvisit-big{font-size:clamp(18px,3.4vh,36px) !important;margin-top:4px !important;line-height:1.08 !important}
  html body.home #main .hvisit-card--shop .hvisit-copy{height:100% !important;box-sizing:border-box}
}
/* Sir: 10th section = the footer, something different: a GIANT shiny chrome-silver MARVANS wordmark across the
   bottom of the footer (the real logo shape, chrome metal gradient), the magenta star kept as its own colour;
   the empty black gap above the footer removed. */
html body:not(.staff) footer.foot .foot-in{position:relative;padding-bottom:calc(clamp(110px,15vw,240px) + 28px) !important}
html body:not(.staff) footer.foot .foot-in::after{content:"";position:absolute;left:0;right:0;bottom:22px;height:clamp(96px,14vw,220px);pointer-events:none;
  background:linear-gradient(180deg,#F1F0EF 0%,#CDCBCA 30%,#8E8C8B 52%,#E2E1E0 72%,#A9A7A6 100%);
  -webkit-mask:url(../img/logo-old-allwhite.svg) center bottom/contain no-repeat;mask:url(../img/logo-old-allwhite.svg) center bottom/contain no-repeat;opacity:.95}
html body:not(.staff) footer.foot .foot-in::before{content:"";position:absolute;bottom:22px;left:50%;width:clamp(96px,14vw,220px);height:clamp(96px,14vw,220px);pointer-events:none;z-index:1;
  translate:calc(clamp(96px,14vw,220px) * 1.38) 0;
  background:url(../img/logo-star.svg) right top/contain no-repeat;opacity:0}
html body.home #main .hvisit-card--split{margin-bottom:clamp(30px,5vh,60px) !important}
/* footer wordmark: the WORD in chrome, the STAR in its own magenta (same box, so they line up) */
html body:not(.staff) footer.foot .foot-in::after{-webkit-mask:url(../img/logo-word-only.svg) center bottom/contain no-repeat !important;mask:url(../img/logo-word-only.svg) center bottom/contain no-repeat !important}
html body:not(.staff) footer.foot .foot-in::before{left:0 !important;right:0 !important;width:auto !important;translate:none !important;height:clamp(96px,14vw,220px) !important;
  background:url(../img/logo-star-only.svg) center bottom/contain no-repeat !important;opacity:1 !important;z-index:1}

/* ---- Sir: the same bubbly glass border was on everything. Each section now has its OWN border style ---- */
/* 1 hero cards: crystal rim + lip (keeps the signature) */
/* 3 iPhone 18 Pro buttons: thin CHROME OUTLINE pills, clear inside, no lip */
html body #main .pro-tile :is(.pill,.pill-line){background:transparent !important;-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:none !important;border:1.5px solid transparent !important;
  background:linear-gradient(#0B0B0B,#0B0B0B) padding-box,linear-gradient(135deg,#F1F0EF,#8E8C8B 45%,#E2E1E0 70%,#A9A7A6) border-box !important}
/* 4 promise cards: one quiet hairline, no lip; buttons solid shoji with black text */
html body.home #main .hpm-card .hpm-face{box-shadow:inset 0 0 0 1px rgba(245,244,238,.16),0 30px 60px -30px rgba(0,0,0,.9) !important}
html body.home #main .hpm :is(.hpm-pill){background:#F5F4EE !important;color:#0B0B0B !important;-webkit-text-fill-color:#0B0B0B;box-shadow:0 8px 20px -10px rgba(245,244,238,.35) !important}
/* 6 repair tiles: NO border at all - bigger rounding and a soft floating shadow */
html body.home #main .hgrid-tile.hgrid-light,html body.home #main .hgrid-tile.hgrid-dark{border-radius:34px !important}
html body.home #main .hgrid-tile.hgrid-dark{box-shadow:0 30px 60px -28px rgba(0,0,0,.95) !important}
html body.home #main .hgrid-tile.hgrid-light{box-shadow:inset 0 2px 0 rgba(255,255,255,.9),0 30px 60px -28px rgba(0,0,0,.95) !important}
/* 7 Why-Marvans cards: no rim, no lip - a soft light glowing from the top-left corner only */
html body.home #main .hwhy-card{box-shadow:0 30px 60px -32px rgba(0,0,0,.95) !important;
  background:radial-gradient(70% 45% at 0% 0%,rgba(245,244,238,.13),rgba(245,244,238,0) 70%),linear-gradient(180deg,#151514,#0B0B0B) !important}
/* 8 How-it-works cards: PRESSED-IN (carved into the page) instead of raised */
html body.home #main .hhow-card{background:#0B0B0B !important;
  box-shadow:inset 6px 6px 14px rgba(0,0,0,.9),inset -4px -4px 12px rgba(245,244,238,.06),inset 0 0 0 1.5px rgba(245,244,238,.85) !important}
/* 9 Visit cards: a framed DOUBLE line border (outer + inner hairline), no lip */
html body.home #main .hvisit-card{box-shadow:inset 0 0 0 1px rgba(245,244,238,.28),inset 0 0 0 6px #0B0B0B,inset 0 0 0 7px rgba(245,244,238,.12),0 26px 50px -28px rgba(0,0,0,.9) !important;
  background:#0B0B0B !important}
html body.home #main .hvisit :is(.hvisit-pill,.hvisit-pill-line){box-shadow:none !important;border:1px solid rgba(245,244,238,.45) !important;background:transparent !important}

/* ===== Nov 1: no more shared crystal lip below the hero — each section its own edge ===== */
/* 2 Duo: soft frosted, no rim, no lip */
html:root body.home main#main#main .duo-tile .pill,html:root body.home main#main#main .duo-tile .d-w{box-shadow:0 10px 24px -14px rgba(0,0,0,.8) !important;border:0 !important;
  background:rgba(245,244,238,.10) !important;-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
html:root body.home main#main#main .duo-tile .pill::before,html:root body.home main#main#main .duo-tile .pill::after{display:none !important}
/* 4 Promise arrows: solid shoji circles */
html:root body.home main#main#main .hpm .hpm-pad{background:#F5F4EE !important;color:#0B0B0B !important;box-shadow:0 8px 20px -10px rgba(0,0,0,.8) !important;border:0 !important}
html:root body.home main#main#main .hpm .hpm-pad::before,html:root body.home main#main#main .hpm .hpm-pad::after{display:none !important}
/* 5 Scroll movie: thin chrome line edge (gradient stroke), no lip */
html:root body.home main#main#main .hsy .hsy-pin::before,html:root body.home main#main#main .hsy .hsy-caps{box-shadow:none !important;border:1px solid transparent !important;
  background:linear-gradient(#000,#000) padding-box,linear-gradient(160deg,#F1F0EF,#8E8C8B 35%,#2a2a2a 60%,#A9A7A6) border-box !important}
/* 6 Repair tiles buttons: flat solid black, no rim */
html:root body.home main#main#main .hgrid .hgrid-pill{box-shadow:none !important;border:0 !important;background:#0B0B0B !important;color:#F5F4EE !important;-webkit-text-fill-color:#F5F4EE}
html:root body.home main#main#main .hgrid .hgrid-pill::before,html:root body.home main#main#main .hgrid .hgrid-pill::after{display:none !important}
/* 7 Why arrows: thin white outline circles */
html:root body.home main#main#main .hwhy .hwhy-paddle{box-shadow:none !important;border:1px solid rgba(245,244,238,.7) !important;background:transparent !important}
html:root body.home main#main#main .hwhy .hwhy-paddle::before,html:root body.home main#main#main .hwhy .hwhy-paddle::after{display:none !important}
/* Footer: no panel rim, just one hairline on top */
html body.home footer.foot::before{box-shadow:none !important;background:none !important;border:0 !important;border-top:1px solid rgba(245,244,238,.16) !important;border-radius:0 !important}
/* Sir "are you sure everything is diff" — 3 look-alike pairs split */
/* 3 Pro buttons: SOLID chrome fill, black text (scroll movie keeps the thin chrome line) */
html:root body.home main#main#main .pro-tile :is(.pill,.pill-line){border:0 !important;box-shadow:0 10px 24px -12px rgba(0,0,0,.9) !important;
  background:linear-gradient(180deg,#F1F0EF,#CDCBCA 45%,#8E8C8B 55%,#E2E1E0) !important;color:#0B0B0B !important;-webkit-text-fill-color:#0B0B0B}
html:root body.home main#main#main .pro-tile :is(.pill,.pill-line)::before,html:root body.home main#main#main .pro-tile :is(.pill,.pill-line)::after{display:none !important}
/* 4 Promise cards: no outline — one bright line on the TOP edge only, fading at the sides */
html:root body.home main#main#main .hpm-card .hpm-face{box-shadow:0 30px 60px -30px rgba(0,0,0,.9) !important}
html:root body.home main#main#main .hpm-card .hpm-face::after{content:"" !important;display:block !important;position:absolute;left:12%;right:12%;top:0;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,rgba(245,244,238,0),rgba(245,244,238,.9),rgba(245,244,238,0)) !important;-webkit-mask:none !important;mask:none !important;opacity:1 !important;inset:0 12% auto 12% !important;z-index:3;pointer-events:none}
/* 9 Visit buttons: no line — black pill with a soft white glow around it */
html:root body.home main#main#main .hvisit :is(.hvisit-pill,.hvisit-pill-line){border:0 !important;background:#151514 !important;
  box-shadow:0 0 18px -2px rgba(245,244,238,.28),0 0 2px rgba(245,244,238,.35) !important}
/* (Sir, Nov 1: "make this liquid glass like the other") iPhone Duo buttons = exactly the hero's liquid-glass pills */
html body .duo-tile .ctas .pill,html body .duo-tile .ctas .pill.pill-line{
  background:linear-gradient(rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 50%,rgba(255,255,255,.1) 100%) !important;
  box-shadow:rgba(11,11,11,.85) 0 0 0 1.5px inset,rgba(255,255,255,.6) 0 2.5px 0 0 inset,rgba(255,255,255,.3) 2px 0 0 0 inset,
    rgba(255,255,255,.2) 0 -2px 0 0 inset,rgba(11,11,11,.14) 0 0 0 3px inset,rgba(255,255,255,.08) 0 0 14px 2px inset,
    rgba(245,244,238,.35) -2px 3px 0 -1px,rgba(0,0,0,.6) 0 8px 18px -10px !important;
  color:#F5F4EE !important;font-weight:600}
/* (Sir, Nov 1: "center it, too up") the shop card's text box = exactly the card's height, so "safe center" really centres */
@media (min-width:834px){
  html body.home #main .hvisit-card--shop{grid-template-rows:minmax(0,1fr) !important}
  html body.home #main .hvisit-card--shop .hvisit-copy{height:100% !important;max-height:100% !important;min-height:0 !important;box-sizing:border-box !important}
}
/* (Sir, Nov 1: "one motion, not smooth") the shrink follows the scroll (js/nav-shoji.js sets --nav-p 0..1) */
html body .gnav .gnav-in:not(#_a),html body .gnav.is-scrolled .gnav-in:not(#_a){
  transform:translateY(calc(var(--nav-p,0) * -2px)) scale(calc(1 - var(--nav-p,0) * .06));
  transition:background .9s cubic-bezier(.16,1,.3,1),box-shadow .9s cubic-bezier(.16,1,.3,1)}
/* (Sir, Nov 1: "still not smooth") the top bar drops the bending lens for good and keeps the frosted glass: the lens
   had to switch off while scrolling (a visible pop at every start/stop) and was the heaviest thing on screen */
html.lg body .gnav-in:not(#_a){-webkit-backdrop-filter:blur(22px) saturate(170%) brightness(1.25) !important;backdrop-filter:blur(22px) saturate(170%) brightness(1.25) !important}
html.lg body .gnav-in:not(#_a)::after,html.lg body .gnav:not(#_a)::after,html.lg body .nav-bubble:not(#_a){-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
html.lg body .gnav-in:not(#_a)::after{display:none !important}