/* hero: branded gradient placeholder (real shop interior photo goes here when it lands).
     The box/packaging render is reserved for a shipping/order page, not the hero. */
  .hero .bg{
    background:
      radial-gradient(120% 90% at 72% -10%, rgba(215,59,132,.38), transparent 58%),
      radial-gradient(90% 85% at 0% 120%, rgba(8,169,212,.28), transparent 58%),
      radial-gradient(70% 58% at 20% -10%, rgba(244,200,28,.17), transparent 62%),
      linear-gradient(160deg,#16181f,#0c0d11);
  }
  .hero{min-height:380px}
  .hero .inner{padding-top:22px;padding-bottom:50px;position:relative;z-index:2}
  @media(max-width:600px){.hero{min-height:320px}}
  /* CMYK ink drips begin at the strip and flow down behind/under it (40% opacity) */
  .strip{position:relative;overflow:visible;background:transparent;border:none}
  .strip .in{position:relative;z-index:1;text-align:left}
  .dripband{position:absolute;top:0;left:0;right:0;height:150px;background:url("drips.webp") left top/auto 100% repeat-x;opacity:.55;pointer-events:none;z-index:0;filter:drop-shadow(0 12px 9px rgba(0,0,0,.95)) drop-shadow(0 4px 4px rgba(0,0,0,.75))}
  @media(max-width:600px){.dripband{height:104px}}
  .logomark{height:43.2px;width:auto;display:block;filter:drop-shadow(0 3px 5px rgba(0,0,0,.8))}
  header{background:#0c0d11 url("header.webp") center top/cover}
  .brandgrad{background:linear-gradient(90deg,#08a9d4,#d73b84);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
  .wmarrow{height:.58em;width:auto;margin:0 5px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
  .brand .nm{display:inline-flex;align-items:center;line-height:1}
  .lockup{display:flex;flex-direction:column;gap:2px;line-height:1}
  .subline{font-family:var(--font-display);font-size:10px;letter-spacing:3.2px;color:var(--t2);text-transform:uppercase}
  .tagline{font-size:8px;letter-spacing:1.4px;color:var(--t3);text-transform:uppercase;font-weight:700}
  @media(max-width:600px){.tagline{display:none}.subline{font-size:8.5px;letter-spacing:2px}}
  /* CMYK yellow balance: tricolor section underline + strip highlight */
  .sec-h::after{width:76px;height:3px;background:linear-gradient(90deg,#08a9d4,#d73b84 55%,#f4c81c)}
  .strip b{color:#f4c81c}
  /* CMYK spread across elements */
  /* buttons ARE the printed fabric: colored polyester swatches (full swatch, small = no zoom) */
  .btn:not(.ghost){background-color:var(--coral);background-image:url("sw-magenta.webp");background-repeat:repeat;background-size:80px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 3px rgba(0,0,0,.6);box-shadow:0 4px 11px rgba(0,0,0,.5);transition:box-shadow .18s ease,transform .18s ease,filter .18s ease}
  .btn.cyan{background-color:var(--wood);background-image:url("sw-cyan.webp")}
  .btn.sun{background-color:var(--sun);background-image:url("sw-yellow.webp")}
  .btn.grad{background-color:var(--coral);background-image:url("sw-magenta.webp")}
  .pill.cart{background-image:url("sw-magenta.webp");background-repeat:repeat;background-size:62px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 3px rgba(0,0,0,.6);box-shadow:0 3px 9px rgba(0,0,0,.45)}
  .btn:not(.ghost):hover{filter:brightness(1.08);background-image:url("sw-magenta.webp");box-shadow:0 7px 16px rgba(0,0,0,.6);transform:translateY(-1px)}
  .btn.cyan:hover{background-image:url("sw-cyan.webp")}
  .btn.sun:hover{background-image:url("sw-yellow.webp")}
  /* somber navy fabric + accents for homegoing/funeral areas */
  .btn.somber{background-color:var(--somber);background-image:url("sw-navy.webp")}
  .btn.somber:hover{background-image:url("sw-navy.webp")}
  #view-partners .eyebrow{color:var(--dove)}
  #view-partners .stepn{background:var(--somber)}
  .tplbtn.somber{border-left:3px solid var(--somber)}
  .tile.lane{border-top:3px solid var(--acc,var(--coral))}
  /* polyester weave on KEY elements only, not every surface */
  .tile.lane, .dz-stage{background-image:url("tex-poly.webp");background-repeat:repeat;background-size:300px;background-blend-mode:soft-light}
  .rrow{display:flex;gap:8px;align-items:center;margin-bottom:8px}
  @media(max-width:520px){.rrow{flex-wrap:wrap}}
  .stepn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;
    background:var(--coral);color:#fff;font-family:var(--font-display);font-weight:700;font-size:16px}
  .lane-ic{height:58px;width:auto;display:block;margin:0 0 6px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
  .studio-card{background:linear-gradient(160deg,var(--cardHi),var(--card));border:1px solid var(--line);border-radius:18px;padding:22px}
  /* cards: drop shadow (all) + Apple-style frosted glass with a light contour (non-fabric cards) */
  .tile, .studio-card, .workcard, .tier{box-shadow:0 8px 22px rgba(0,0,0,.45)}
  .tile:not(.lane), .studio-card, .workcard, .tier{
    background:rgba(22,25,32,.5);
    backdrop-filter:blur(15px) saturate(1.3);
    -webkit-backdrop-filter:blur(15px) saturate(1.3);
    border:1px solid rgba(255,255,255,.13);
    box-shadow:0 8px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.17);
  }
  /* gallery cards behind the flip shirts: smaller footprint + deeper shadow */
  .workcard{background:rgba(11,13,18,.64);box-shadow:0 20px 46px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.1)}
  /* thin, luxury neon edge on framed cards (cyan default; navy in funeral areas) */
  :root{--neon:8,169,212}
  .studio-card,.dz-stage,.tier{border-color:rgba(var(--neon),.42);
    box-shadow:0 12px 30px rgba(0,0,0,.5), 0 0 16px -5px rgba(var(--neon),.5), inset 0 0 0 1px rgba(var(--neon),.3)}
  #view-partners{--neon:118,140,182}
  /* funeral areas: somber navy/dove holographic shimmer instead of CMYK */
  #view-partners .studio-card::after{background:linear-gradient(115deg,transparent 22%,rgba(118,140,182,.2) 40%,rgba(174,182,196,.15) 55%,transparent 78%)}
  /* holographic shimmer + cursor sheen on the glass cards (immersive) */
  .tile:not(.lane), .studio-card, .tier{overflow:hidden;transition:transform .25s ease, box-shadow .18s ease}
  .tile:not(.lane)::after, .studio-card::after, .tier::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:linear-gradient(115deg,transparent 22%,rgba(8,169,212,.16) 36%,rgba(215,59,132,.16) 50%,rgba(244,200,28,.16) 64%,transparent 78%);
    background-size:260% 260%;mix-blend-mode:screen;opacity:.5;animation:holo 8s linear infinite}
  .tile:not(.lane)::before, .studio-card::before, .tier::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:radial-gradient(circle at var(--hx,50%) var(--hy,50%),rgba(255,255,255,.16),transparent 45%);mix-blend-mode:screen;opacity:0;transition:opacity .35s}
  .tile:not(.lane):hover::before, .studio-card:hover::before, .tier:hover::before{opacity:1}
  @keyframes holo{to{background-position:260% 50%}}
  @media(prefers-reduced-motion:reduce){.tile:not(.lane)::after,.studio-card::after,.tier::after{animation:none}.tile,.studio-card,.tier,.flipinner{transition:none}}
  /* phone-landscape: the nav drawer must scroll to reach the last link */
  #menu{max-height:calc(100vh - 62px);overflow-y:auto}
  /* keyboard: visible focus ring on the dark theme */
  a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--wood);outline-offset:2px;border-radius:4px}
  /* click-to-open 3D shirt viewer */
  .workcard{cursor:pointer;position:relative}
  .w3d{position:absolute;top:10px;right:10px;z-index:2;background:rgba(0,0,0,.55);color:#fff;font-size:10px;font-weight:800;letter-spacing:.6px;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.28)}
  .v3d{position:fixed;inset:0;z-index:70;background:rgba(6,7,10,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center}
  .v3d.open{display:flex}
  .v3d canvas{width:min(92vw,540px);height:min(78vh,640px);touch-action:none;cursor:grab}
  .v3d canvas:active{cursor:grabbing}
  .v3d-close{position:absolute;top:14px;right:22px;font-size:34px;line-height:1;color:#fff;cursor:pointer;z-index:2}
  .v3d-name{position:absolute;top:20px;left:22px;color:var(--t2);font-weight:800;letter-spacing:1px;text-transform:uppercase;font-size:13px}
  .v3d-hint{position:absolute;bottom:24px;left:0;right:0;text-align:center;color:var(--t3);font-size:12px;letter-spacing:.5px}
  .workgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:18px}
  .workcard{background:rgba(11,13,18,.64);border:1px solid var(--line);border-radius:14px;padding:14px;margin:0;flex:0 1 200px;display:flex;flex-direction:column;align-items:center;gap:10px;content-visibility:auto;contain-intrinsic-size:200px 262px}
  /* shirt-shaped cards with a diagonal front -> back flip */
  .flipcard{width:100%;height:210px;perspective:1100px}
  .flipinner{position:relative;width:100%;height:100%;transition:transform 1.5s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
  /* hover-flip only on mouse devices; touch uses the tap toggle alone (sticky :hover would strand the card) */
  @media(hover:hover){
    .workcard:hover .flipinner{transform:rotate3d(1,-1,0,180deg)}
    .workcard:nth-child(even):hover .flipinner{transform:rotate3d(1,1,0,180deg)}
  }
  .workcard.flipped .flipinner{transform:rotate3d(1,-1,0,180deg)}
  .workcard:nth-child(even).flipped .flipinner{transform:rotate3d(1,1,0,180deg)}
  .workcard:nth-child(even) .face.back{transform:rotate3d(1,1,0,180deg) scaleX(-1)}
  .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
    background-size:cover;background-repeat:no-repeat;background-position:center;filter:drop-shadow(0 12px 20px rgba(0,0,0,.55));
    clip-path:polygon(30% 2%,38% 9%,62% 9%,70% 2%,74% 2%,100% 16%,90% 36%,78% 28%,78% 98%,22% 98%,22% 28%,10% 36%,0% 16%,26% 2%)}
  .face.back{transform:rotate3d(1,-1,0,180deg) scaleX(-1)}
  .workcard .wc{font-size:12px;color:var(--t2);font-weight:700;letter-spacing:.4px;text-transform:uppercase}
  /* ---- design studio ---- */
  .dz-wrap{display:grid;grid-template-columns:260px 1fr;gap:18px;align-items:start;margin-top:14px}
  @media(max-width:760px){.dz-wrap{grid-template-columns:1fr}}
  .dz-panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
  /* no justify-content:center here: centering an overflowing flex child clips its start side
     off the scrollable region on phones; margin:auto centers when room exists and stays reachable */
  .dz-stage{position:relative;background:#15171e;border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;overflow:auto}
  .dz-hold{position:relative;margin:auto}
  .dz-guides{position:absolute;inset:0;pointer-events:none}
  .dz-guides .bleed{position:absolute;inset:0;border:2px dashed rgba(185,190,198,.55);border-radius:2px}
  .dz-guides .safe{position:absolute;inset:8%;border:1px dashed var(--coral)}
  .tplbtn{display:block;width:100%;text-align:left;background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--t1);
    border-radius:10px;padding:10px 12px;margin:6px 0;cursor:pointer;font-family:inherit;font-weight:600;font-size:14px}
  .tplbtn:hover{border-color:var(--coral)}
  .dpibadge{font-weight:800;font-size:12px;padding:6px 10px;border-radius:999px;display:inline-block}

/* multi-page build: buttons that became real links keep their button look */
a.btn,a.pill{text-decoration:none;display:inline-block;text-align:center}
a.brand{display:flex;text-decoration:none;color:inherit;align-items:center;gap:10px;cursor:pointer}
#menu a[aria-current="page"]{color:var(--coral)}