body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: #292825;
    color: #f7f3ea;
  }
  .display {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 800;
  }
  
  .hero-sticky-container {
    position: sticky;
    top: 76px;
    z-index: 10;
    height: calc(100vh - 76px);
    min-height: 580px;
  }
  
  .content-overlap-wrapper {
    position: relative;
    z-index: 20;
    background: #292825;
    border-top-left-radius: 36px;
    border-top-right-radius: 36px;
    box-shadow: 0 -25px 60px rgba(0, 0, 0, 0.6);
    margin-top: -40px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .reveal-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }

  @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap');

  :root {
    --app-font-sans: 'Manrope', sans-serif;
    --app-font-serif: 'Bricolage Grotesque', sans-serif;
    --app-font-mono: 'DM Mono', monospace;
    --shadow-sm: 0 8px 24px rgba(47, 35, 24, 0.08);
    --shadow-md: 0 20px 50px rgba(47, 35, 24, 0.15);
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  
  button, a, input, select, textarea { font: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; cursor: pointer; }
  button { background: none; border: none; }
  a { text-decoration: none; color: inherit; }
  img { max-width: 100%; display: block; }

  .display i { font-style: normal; }
  .mono { font-family: var(--app-font-mono); }

  .grain::after {
    content: '';
    position: fixed;
    pointer-events: none;
    inset: 0;
    opacity: .035;
    z-index: 20;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  }

  /* ---------- Header: floating rounded bar + entrance animation ---------- */
  .site-header {
    animation: header-drop .7s cubic-bezier(.2,.75,.25,1) both;
  }
  @keyframes header-drop {
    from { opacity: 0; transform: translateY(-16px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .site-header-bar {
    margin: 10px auto 0;
    max-width: calc(1440px - 32px);
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(41,40,37,.75);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 18px 44px rgba(0,0,0,.35);
    transition: border-radius .35s ease, box-shadow .35s ease, background-color .35s ease;
  }
  @media (max-width: 1023px) {
    .site-header-bar { margin: 0; border-radius: 0 0 20px 20px; background: rgba(35,34,31,.94); }
  }

  .nav-toggle-btn {
    border-radius: 14px;
    transition: background-color .25s ease, transform .25s cubic-bezier(.2,.75,.25,1), rotate .3s ease;
  }
  .nav-toggle-btn:hover { background: rgba(255,255,255,.08); transform: scale(1.06); }
  .nav-toggle-btn:active { transform: scale(.92); }

  /* ---------- Modern pill navbar with sliding highlight ---------- */
  .nav-modern-shell {
    position: relative;
    overflow: hidden;
    padding: .35rem;
    border: 1px solid rgba(239, 230, 216, .16);
    border-radius: 999px;
    background: rgba(24, 24, 24, .3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 30px rgba(0,0,0,.12);
    transition: box-shadow .35s ease, border-color .35s ease;
  }
  .nav-modern-shell:hover {
    border-color: rgba(239, 230, 216, .3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 38px rgba(0,0,0,.22), 0 0 0 1px rgba(110,197,190,.2);
  }
  /* continuous soft sheen sweeping across the pill background */
  .nav-modern-shell::after {
    content: '';
    position: absolute;
    top: 0;
    left: -30%;
    width: 28%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.16), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
    z-index: 0;
    animation: nav-shell-sheen 5s ease-in-out infinite;
  }
  @keyframes nav-shell-sheen {
    0%   { left: -30%; }
    45%  { left: 115%; }
    100% { left: 115%; }
  }

  /* sliding pill that glides beneath the hovered / active link */
  .nav-slider {
    position: absolute;
    top: .35rem;
    left: .35rem;
    height: calc(100% - .7rem);
    width: 86px;
    border-radius: 999px;
    background: linear-gradient(120deg, #838585, #525252, #656767);
    background-size: 220% 220%;
    box-shadow: 0 3px 10px rgba(191, 191, 191, 0.5), inset 0 1px 0 rgba(255,255,255,.3);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: transform .4s cubic-bezier(.22,1,.36,1), width .4s cubic-bezier(.22,1,.36,1), opacity .25s ease;
    animation: nav-slider-glow 3.5s ease-in-out infinite;
  }
  .nav-modern-shell.is-ready .nav-slider { opacity: 1; }
  @keyframes nav-slider-glow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }

  .nav-animated-link,
  .nav-animated-link *,
  .nav-animated-link::before,
  .nav-animated-link::after { box-sizing: border-box; }
  .nav-animated-link {
    position: relative;
    z-index: 2;
    overflow: hidden;
    display: inline-flex;
    min-width: 86px;
    justify-content: center;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: .64rem 1.25rem;
    color: #D9D9D9;
    background: transparent;
    font-family: var(--app-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: color .25s ease, transform .25s cubic-bezier(.2,.75,.25,1);
  }
  .nav-animated-link:hover { color: #14201f; transform: translateY(-1px) scale(1.02); }
  .nav-animated-link.active { color: #14201f; }
  .nav-animated-text { position: relative; z-index: 2; overflow: hidden; display: block; }
  .nav-animated-text > span { display: block; position: relative; transition: transform .3s cubic-bezier(.2,.75,.25,1); }
  .nav-animated-link:hover .nav-animated-text > span { transform: translateY(-2px); }

  .scroll-rail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .45rem;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .35s ease, transform .35s cubic-bezier(.2,.75,.25,1), visibility .35s ease;
    visibility: visible;
  }
  .scroll-rail.is-footer-visible { pointer-events: none; opacity: 0; transform: translateY(12px); visibility: hidden; }
  .scroll-social-links {
    display: flex; flex-direction: column; align-items: center; gap: .35rem;
    padding: .45rem; border: 1px solid rgba(239, 230, 216, .18); border-radius: 999px;
    background: #7c766c; box-shadow: 0 12px 30px rgba(31, 23, 17, .3);
  }
  .scroll-social-link {
    display: grid; width: 34px; height: 34px; place-items: center; border-radius: 999px;
    color: #f5efe4; transition: color .25s ease, background-color .25s ease, transform .35s cubic-bezier(.2,.75,.25,1);
  }
  .scroll-social-link:hover { color: #f5efe4; transform: translateY(-3px) scale(1.08); }
  .scroll-marker {
    display: flex; align-items: center; padding: .45rem;
    border: 1px solid rgba(239, 230, 216, .45); border-radius: 999px;
    background: #f1ede4; color: #3f3f3f; box-shadow: 0 12px 30px rgba(31, 23, 17, .22);
  }
  .scroll-marker-square {
    position: relative; overflow: hidden; display: block; width: 32px; height: 32px;
    border-radius: 8px; background: #ffffff;
    transition: transform .35s cubic-bezier(.2,.75,.25,1), filter .35s ease;
  }
  .scroll-marker-fill { position: absolute; right: 0; bottom: 0; left: 0; background: #3f3f3f; transition: height .2s ease-out; }
  .scroll-marker:hover .scroll-marker-square { transform: rotate(-8deg) scale(1.08); filter: contrast(1.15); }

  .footer-social-link {
    display: grid; width: 32px; height: 32px; place-items: center; border-radius: 999px;
    background: #7c766c; color: #f5efe4 !important;
    transition: color .25s ease, background-color .25s ease, transform .35s cubic-bezier(.2,.75,.25,1);
  }
  .footer-social-link:hover { color: #f5efe4 !important; transform: translateY(-4px) scale(1.08); }

  /* ---------- Home social rail: hover-reveal animation (Uiverse-inspired) ---------- */
  .social-reveal {
    position: relative;
    max-height: 48px;
    overflow: hidden;
    transition: max-height .5s cubic-bezier(.2,.75,.25,1), transform .3s cubic-bezier(.2,.75,.25,1);
  }
  .social-reveal:hover,
  .social-reveal.is-open { max-height: 240px; transform: scale(1.06); }
  .social-reveal-badge {
    position: absolute; top: .45rem; left: .45rem; right: .45rem; height: 34px; z-index: 5;
    display: grid; place-items: center; border-radius: 999px;
    background: #7c766c; color: #f5efe4;
    transition: opacity .4s ease, transform .45s cubic-bezier(.2,.75,.25,1), background-color .25s ease;
  }
  .social-reveal:hover .social-reveal-badge,
  .social-reveal.is-open .social-reveal-badge { opacity: 0; transform: scale(.6) rotate(20deg); pointer-events: none; }
  .social-reveal .scroll-social-link {
    opacity: 0; transform: scale(.4) rotate(-16deg);
    transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1), color .25s ease, background-color .25s ease;
  }
  .social-reveal:hover .scroll-social-link,
  .social-reveal.is-open .scroll-social-link { opacity: 1; transform: scale(1) rotate(0deg); }
  .social-reveal .scroll-social-link:nth-of-type(1) { transition-delay: .06s; }
  .social-reveal .scroll-social-link:nth-of-type(2) { transition-delay: .14s; }
  .social-reveal .scroll-social-link:nth-of-type(3) { transition-delay: .22s; }
  .social-reveal .scroll-social-link:nth-of-type(4) { transition-delay: .30s; }
  .social-reveal .scroll-social-link:nth-of-type(5) { transition-delay: .38s; }

  /* ---------- Mobile floating social toggle (bottom-right, pops upward above the Contact tab) ---------- */
  .mobile-social-toggle {
    bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
    width: 44px;
    height: 44px;
  }
  .mobile-social-badge {
    position: absolute; inset: 0; z-index: 5;
    display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: 999px;
    background: #7c766c; color: #f5efe4;
    box-shadow: 0 10px 26px rgba(31,23,17,.4);
    transition: opacity .35s ease, transform .4s cubic-bezier(.2,.75,.25,1);
  }
  .mobile-social-toggle.is-open .mobile-social-badge,
  .mobile-social-toggle:hover .mobile-social-badge {
    opacity: 0; transform: scale(.6) rotate(20deg); pointer-events: none;
  }
  .mobile-social-icon {
    position: absolute; left: 3px; bottom: 3px;
    width: 38px; height: 38px; border-radius: 999px;
    display: grid; place-items: center;
    background: #7c766c; color: #f5efe4;
    box-shadow: 0 8px 20px rgba(31,23,17,.35);
    opacity: 0; pointer-events: none;
    transform: translateY(0) scale(.4) rotate(-16deg);
    transition: opacity .4s ease, transform .45s cubic-bezier(.34,1.56,.64,1), color .25s ease, background-color .25s ease;
  }
  .mobile-social-icon:hover { color: #f5efe4; background: #8a8377; }
  .mobile-social-toggle.is-open .mobile-social-icon,
  .mobile-social-toggle:hover .mobile-social-icon { pointer-events: auto; opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
  .mobile-social-icon:nth-of-type(1) { transition-delay: .22s; }
  .mobile-social-icon:nth-of-type(2) { transition-delay: .18s; }
  .mobile-social-icon:nth-of-type(3) { transition-delay: .14s; }
  .mobile-social-icon:nth-of-type(4) { transition-delay: .10s; }
  .mobile-social-icon:nth-of-type(5) { transition-delay: .06s; }
  .mobile-social-toggle.is-open .mobile-social-icon:nth-of-type(1),
  .mobile-social-toggle:hover .mobile-social-icon:nth-of-type(1) { transform: translateY(-52px) scale(1) rotate(0deg); }
  .mobile-social-toggle.is-open .mobile-social-icon:nth-of-type(2),
  .mobile-social-toggle:hover .mobile-social-icon:nth-of-type(2) { transform: translateY(-104px) scale(1) rotate(0deg); }
  .mobile-social-toggle.is-open .mobile-social-icon:nth-of-type(3),
  .mobile-social-toggle:hover .mobile-social-icon:nth-of-type(3) { transform: translateY(-156px) scale(1) rotate(0deg); }
  .mobile-social-toggle.is-open .mobile-social-icon:nth-of-type(4),
  .mobile-social-toggle:hover .mobile-social-icon:nth-of-type(4) { transform: translateY(-208px) scale(1) rotate(0deg); }
  .mobile-social-toggle.is-open .mobile-social-icon:nth-of-type(5),
  .mobile-social-toggle:hover .mobile-social-icon:nth-of-type(5) { transform: translateY(-260px) scale(1) rotate(0deg); }

  /* ---------- Header auto-hide on scroll + Back-to-top button ---------- */
  .site-header { transition: transform .45s cubic-bezier(.4,0,.2,1); will-change: transform; }
  .site-header.nav-hidden { transform: translateY(-130%); }

  .scroll-top-btn {
    position: fixed; right: 1.1rem; bottom: 1.35rem; z-index: 45;
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px;
    background: #a47752; color: #f7f3ea; box-shadow: 0 12px 30px rgba(31,23,17,.35);
    opacity: 0; transform: translateY(16px) scale(.85); pointer-events: none;
    transition: opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1), background-color .25s ease;
  }
  .scroll-top-btn.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; animation: scroll-top-bounce 2.4s ease-in-out infinite; }
  .scroll-top-btn:hover { background: #c19b77; animation-play-state: paused; }
  .scroll-top-btn svg { transition: transform .3s cubic-bezier(.2,.75,.25,1); }
  .scroll-top-btn:hover svg { transform: translateY(-3px); }
  @keyframes scroll-top-bounce { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.04); } }

  /* ---------- Social icons: liquid hover fill (simple, deterministic) ---------- */
  .scroll-social-link, .footer-social-link {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }
  .scroll-social-link svg, .footer-social-link svg {
    position: relative;
    z-index: 1;
  }
  .scroll-social-link::before, .footer-social-link::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(circle, #c19b77, #a47752 60%, #1b1a17 100%);
    opacity: 0;
    transform: scale(.3);
    transition: opacity .35s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
  }
  .scroll-social-link:hover::before, .footer-social-link:hover::before {
    opacity: 1;
    transform: scale(1);
  }

  /* ---------- Header cart icon: mobile-friendly tap target + badge ---------- */
  .cart-icon-btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    isolation: isolate;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
  }
  .cart-icon-btn svg { position: relative; z-index: 1; }
  .cart-icon-btn:hover { box-shadow: 0 10px 22px rgba(0,0,0,.28); }
  .cart-icon-btn:hover svg { animation: cart-icon-swing .5s ease; }
  .cart-icon-btn:active { transform: scale(.88); }
  @keyframes cart-icon-swing {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-12deg); }
    70% { transform: rotate(8deg); }
  }
  /* Sits fully clear of the icon circle (not clipping its edge) and gets its
     own border ring so it always reads as one distinct badge — never a
     second shape fused onto the icon. */
  .cart-count-badge {
    right: -6px;
    top: -6px;
    height: 19px;
    min-width: 19px;
    padding: 0 4px;
    border: 2.5px solid #292825;
    box-sizing: content-box;
    z-index: 2;
  }
  .cart-count-badge.count-pop { animation: cart-badge-pop .5s cubic-bezier(.34,1.56,.64,1); }
  @keyframes cart-badge-pop {
    0% { transform: scale(.35); }
    55% { transform: scale(1.3); }
    100% { transform: scale(1); }
  }

  /* ---------- Page-to-page smooth transition veil ---------- */
  /* Starts fully opaque (matches body background, set instantly via inline
     critical CSS in <head> so there is no unstyled flash before this file
     loads). JS toggles .veil-out to fade it away — a single continuous
     transition, never an animation that gets cut mid-flight, so it can
     never "jump" straight to black. */
  .page-veil {
    position: fixed; inset: 0; z-index: 999; pointer-events: none;
    background: #292825; opacity: 1;
    transition: opacity .6s cubic-bezier(.4,0,.2,1);
  }
  .page-veil.veil-out { opacity: 0; }

  /* ---------- Smooth page-enter (used on Contact) ---------- */
  .page-enter { animation: page-enter-fade .8s cubic-bezier(.2,.75,.25,1) both; }
  .page-enter-delay-1 { animation-delay: .08s; }
  .page-enter-delay-2 { animation-delay: .16s; }
  @keyframes page-enter-fade {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  .scroll-fill-line { position: relative; width: 100%; height: 1px; overflow: hidden; background: rgba(239, 230, 216, .18); }
  .scroll-fill-line::after {
    content: ''; position: absolute; inset: 0; background: #d8c0a8;
    transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.2,.75,.25,1);
  }
  .reveal-on-scroll.is-visible .scroll-fill-line::after { transform: scaleX(1); }

  .material-video { filter: brightness(1.25) contrast(.82) saturate(.7); }

  /* ---------- Hero title: transparent "glass" text so the background video shows through the letters ---------- */
  .hero-glass-title {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(247,243,234,.92);
    text-stroke: 1.5px rgba(247,243,234,.92);
    text-shadow: 0 2px 30px rgba(0,0,0,.35);
  }
  @supports not ((-webkit-text-stroke: 1px black) or (text-stroke: 1px black)) {
    .hero-glass-title { color: #f7f3ea; }
  }
  .video-pulse {
    width: 7px; height: 7px; border-radius: 999px; background: #d8c0a8;
    box-shadow: 0 0 0 0 rgba(216,192,168,.55); animation: video-pulse 1.8s ease-out infinite;
  }
  @keyframes video-pulse { 70% { box-shadow: 0 0 0 7px rgba(216,192,168,0); } 100% { box-shadow: 0 0 0 0 rgba(216,192,168,0); } }

  .home-hero { min-height: clamp(520px, 64svh, 680px); background: #454545; }
  .home-hero::before {
    content: ''; position: absolute; inset: 18px; z-index: -5;
    border: 1px solid rgba(239, 230, 216, .2); border-radius: 24px; pointer-events: none;
  }
  .hero-brand-lockup img { box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
  .hero-story { border: 1px solid rgba(239, 230, 216, .14); background: #484848; box-shadow: 0 24px 70px rgba(15, 13, 10, .22); }
  .hero-story::after {
    content: '01'; position: absolute; right: 28px; top: 26px; color: rgba(239, 230, 216, .45);
    font-family: var(--app-font-mono); font-size: 10px; letter-spacing: .18em;
  }

  button:focus-visible, a:focus-visible { outline: 2px solid #c28a60; outline-offset: 4px; }
  ::selection { background: #bd8159; color: #f5ecdf; }

  .drawer { display: none; }
  .drawer.is-open { display: block; }

  /* ---------- Hero: mobile-only marquee filling the empty gap under the CTA ---------- */
  .hero-marquee-mobile {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  }
  .hero-marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: .7em;
    white-space: nowrap;
    font-family: var(--app-font-mono);
    font-size: 11px;
    letter-spacing: .16em;
    color: rgba(193, 155, 119, .8);
    animation: hero-marquee-scroll 16s linear infinite;
  }
  .hero-marquee-dot { color: rgba(193, 155, 119, .4); }
  @keyframes hero-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* ---------- Completed work: 2-row scroll grid + hover/tap reveal ---------- */
  .work-grid-hint { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #80766b; }

  .work-grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-columns: 62%;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: .5rem;
    margin-left: -1.25rem; margin-right: -1.25rem;
    padding-left: 1.25rem; padding-right: 1.25rem;
  }
  .work-grid::-webkit-scrollbar { display: none; }
  .work-grid > * { scroll-snap-align: start; }
  @media (min-width: 640px) {
    .work-grid { grid-auto-columns: 32%; margin-left: -2rem; margin-right: -2rem; padding-left: 2rem; padding-right: 2rem; }
  }
  @media (min-width: 1024px) {
    .work-grid {
      grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(5, 1fr);
      overflow-x: visible; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0;
    }
  }

  .completed-work-card { transition: border-color .35s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
  .completed-work-card:hover, .completed-work-card.is-active { border-color: rgba(193,155,119,.5); transform: translateY(-4px); }
  .completed-work-card:hover .work-card-hint, .completed-work-card.is-active .work-card-hint { opacity: 0; }
  .work-card-hint { transition: opacity .3s ease; }

  .work-visual-img { transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .5s ease; }
  .completed-work-card:hover .work-visual-img, .completed-work-card.is-active .work-visual-img { transform: scale(1.09); filter: brightness(.55); }

  .work-index-bg { transition: opacity .4s ease; }
  .completed-work-card:hover .work-index-bg, .completed-work-card.is-active .work-index-bg { opacity: 0; }

  .work-overlay {
    opacity: 0;
    transform: translateY(16px);
    background: linear-gradient(to top, rgba(20,18,16,.94) 12%, rgba(20,18,16,.4) 62%, transparent);
    transition: opacity .4s cubic-bezier(.2,.8,.2,1), transform .45s cubic-bezier(.2,.8,.2,1);
  }
  .completed-work-card:hover .work-overlay, .completed-work-card.is-active .work-overlay { opacity: 1; transform: translateY(0); }

  /* ---------- Mobile round nav button: swap-to-next-page (tap or drag) ---------- */
  .nav-swap-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .nav-swap-label {
    font-family: var(--app-font-mono); font-size: 7px; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(193, 155, 119, .8);
  }
  .nav-swap-btn { touch-action: none; transition: background-color .25s ease, transform .18s cubic-bezier(.2,.75,.25,1); }
  .nav-swap-btn.is-pressed { transform: scale(.9); background: rgba(255,255,255,.1); }
  .nav-swap-icon { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
  .nav-swap-btn:hover .nav-swap-icon { transform: rotate(140deg); }
  /* Falls away when tapped/dragged, right before the page-veil takes over */
  .nav-swap-btn.is-firing .nav-swap-icon { animation: nav-swap-fall .4s cubic-bezier(.4,0,.7,1) forwards; }
  @keyframes nav-swap-fall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(14px) rotate(140deg); opacity: 0; }
  }

  /* ---------- Mobile: 2-up product grid polish ---------- */
  @media (max-width: 639px) {
    .product-card { padding: 6px; }
    .product-card h3 { margin-top: 6px; font-size: 13.5px; line-height: 1.2; }
    .product-card p.mono { font-size: 8px; letter-spacing: .08em; }
    .product-card p:not(.mono) { max-width: 100%; margin-top: 4px; font-size: 10.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .product-card .text-sm.font-bold { font-size: 11px; }
    .product-card [data-add-to-cart] { padding: 6px 8px; font-size: 8px; margin-top: 6px; white-space: nowrap; }
    .product-card .flex.items-end.justify-between { flex-direction: column; align-items: flex-start; gap: 6px; }
    .product-card .text-right { text-align: left; width: 100%; }
    .product-visual span.absolute.right-5.top-5 { right: 10px; top: 10px; padding: 4px 8px; font-size: 7px; }
  }

  /* ================= Mobile app-style experience (own layout below 1024px) ================= */

  /* Fixed bottom tab bar — replaces the desktop pill nav on phones/tablets */
  .mobile-tabbar {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 55;
    align-items: stretch;
    justify-content: space-around;
    gap: 2px;
    padding: 7px 6px calc(7px + env(safe-area-inset-bottom, 0px));
    background: rgba(30, 29, 26, .92);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border-top: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 -14px 34px rgba(0,0,0,.4);
  }
  .mobile-tab-link {
    position: relative;
    display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 7px 2px 6px; border-radius: 14px;
    color: #948b80;
    transition: color .25s ease, transform .18s cubic-bezier(.2,.75,.25,1), background-color .25s ease;
  }
  .mobile-tab-link svg { transition: transform .25s cubic-bezier(.34,1.56,.64,1), stroke .25s ease; }
  .mobile-tab-link span {
    font-family: var(--app-font-mono); font-size: 9px; letter-spacing: .04em; font-weight: 500;
  }
  .mobile-tab-link:active { transform: scale(.9); }
  .mobile-tab-link.active { color: #f7f3ea; background: rgba(164,119,82,.16); }
  .mobile-tab-link.active svg { transform: translateY(-1px); stroke: #c19b77; }
  .mobile-tab-link.active::before {
    content: ''; position: absolute; top: 2px; left: 50%; width: 4px; height: 4px;
    margin-left: -2px; border-radius: 999px; background: #c19b77;
  }

  @media (max-width: 1023px) {
    .mobile-tabbar { display: flex; }
    body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
    /* Bottom tab bar already covers navigation + gives an easy way back
       up to Home, so the floating back-to-top button is redundant and
       was overlapping card content — hide it on phones/tablets. */
    .scroll-top-btn { display: none !important; }
    .scroll-rail { bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important; }
    /* Bigger, easier hamburger tap target next to the logo */
    .nav-toggle-btn { padding: 10px; }
  }

  /* Home hero: tighter, punchier composition on phones */
  @media (max-width: 767px) {
    .home-hero { min-height: clamp(480px, 82svh, 640px); }
    .hero-brand-lockup .mt-8 a {
      display: flex; width: 100%; justify-content: center;
      padding: 1rem 1.5rem; font-size: 11.5px;
    }
    .hero-brand-lockup h1 { letter-spacing: -.045em; }
  }

  /* Home "Featured pieces": single-card swipe carousel instead of a cramped 2-up grid */
  @media (max-width: 767px) {
    #featured-grid {
      display: flex;
      grid-template-columns: none;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      gap: 14px;
      scrollbar-width: none;
      margin-left: -1.25rem; margin-right: -1.25rem;
      padding-left: 1.25rem; padding-right: 1.25rem; padding-bottom: 4px;
    }
    #featured-grid::-webkit-scrollbar { display: none; }
    #featured-grid > div { flex: 0 0 80%; scroll-snap-align: start; }
  }

  /* Cart: larger tap targets for quantity controls on phones */
  @media (max-width: 639px) {
    #cart-body [data-qty] {
      width: 30px; height: 30px; display: grid; place-items: center; font-size: 16px;
    }
    #cart-body [data-remove] { padding: 6px; }
    #cart-body [data-remove] svg { width: 18px; height: 18px; }
  }