*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; scroll-padding-top: 70px; }
    :root {
      --cream:    #f5f0e8;
      --tan:      #e8dcc8;
      --warm-mid: #c4a882;
      --bark:     #7a5c3a;
      --oak:      #4a3220;
      --charcoal: #2a1f14;
      --rust:     #b05a2a;
      --gold:     #c8922a;
      --white:    #fff8f0;
      --text:     #3a2a1a;
      --subtext:  #6a5040;
      --radius:   6px;
      --shadow:   0 4px 24px rgba(60,30,10,0.13);
    }
    body { font-family: 'Georgia', serif; background: var(--cream); color: var(--text); line-height: 1.7; }
    h1, h2, h3, h4 { font-family: 'Georgia', serif; font-weight: normal; letter-spacing: 0.03em; }
    a { text-decoration: none; color: inherit; }
    img { display: block; width: 100%; object-fit: cover; }
    section { padding: 90px 5%; text-align: center; }

    /* Nav */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      background: rgba(42,31,20,1);
      backdrop-filter: blur(6px);
      display: flex; align-items: center; justify-content: space-evenly;
      padding: 0 80px 0 80px;
      height: 32px;
      border-bottom: 1px solid rgba(200,146,42,0.25);
    }
    .nav-logo { display: none; }
    .nav-link { color: var(--tan); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.2s; position: relative; white-space: nowrap; text-decoration: none; }
    .nav-link:hover { color: var(--gold); }
    .nav-link::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 0; height: 1px; background: var(--gold); transition: width 0.28s ease; }
    .nav-link:hover::after { width: 100%; }
    .nav-basket-link { color: var(--gold) !important; border: 1px solid var(--gold); padding: 6px 16px; border-radius: 4px; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; transition: background 0.2s, color 0.2s; cursor: pointer; text-decoration: none; }
    .nav-basket-link:hover { background: var(--gold); color: var(--charcoal) !important; }
    .nav-burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
    .nav-burger span { display: block; width: 24px; height: 2px; background: var(--tan); transition: all 0.3s; }

    /* Hero */
    /* Dark outline on selected hero text only */
    #home .hero-brand,
    #home .hero-title {
      -webkit-text-stroke: 1px rgba(10,6,2,0.8);
      text-shadow: 1px 1px 4px rgba(10,6,2,0.75), -1px -1px 4px rgba(10,6,2,0.75),
                   1px -1px 4px rgba(10,6,2,0.75), -1px 1px 4px rgba(10,6,2,0.75);
    }
    /* 18s cycle: 7s hold → 1.5s fade out → brief dark → 1.5s fade in → 7s hold → repeat */
    @keyframes heroBgFade1 {
      0%, 38%  { opacity: 1; }
      47%      { opacity: 0; }
      92%      { opacity: 0; }
      100%     { opacity: 1; }
    }
    @keyframes heroBgFade2 {
      0%, 45%  { opacity: 0; }
      54%      { opacity: 1; }
      88%      { opacity: 1; }
      97%      { opacity: 0; }
      100%     { opacity: 0; }
    }
    @keyframes heroDarkPulse {
      0%, 38%  { opacity: 0; }
      47%      { opacity: 0.55; }
      54%      { opacity: 0; }
      88%      { opacity: 0; }
      97%      { opacity: 0.55; }
      100%     { opacity: 0; }
    }
    #home {
      min-height: 100vh;
      background: #0e0a05;
      display: flex; align-items: center; justify-content: center;
      text-align: center; padding: 0; position: relative;
      overflow: hidden;
    }
    .hero-bg-track { position: absolute; inset: 0; }
    .hero-bg-slide {
      position: absolute; inset: 0;
      background-size: cover; background-position: center; background-repeat: no-repeat;
    }
    .hero-bg-slide::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(to bottom, rgba(10,6,2,0.45) 0%, rgba(10,6,2,0.1) 55%, rgba(10,6,2,0.45) 100%);
      pointer-events: none;
    }
    .hero-bg-dark {
      position: absolute; inset: 0;
      background: #000;
      opacity: 0;
      animation: heroDarkPulse 18s ease-in-out infinite;
      pointer-events: none;
      z-index: 1;
    }
    .hero-bg-slide-1 {
      background-image: url('../images/workshop background image.png');
      animation: heroBgFade1 18s ease-in-out infinite;
    }
    .hero-bg-slide-2 {
      background-image: url('../images/main background image.png');
      animation: heroBgFade2 18s ease-in-out infinite;
    }
    .hero-edge-hint {
      position: absolute; top: 50%; transform: translateY(-50%);
      z-index: 2; color: rgba(255,255,255,0.55); font-size: 2rem;
      pointer-events: none; opacity: 0; transition: opacity 0.3s;
      text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    }
    .hero-edge-hint-r { right: 1.5rem; animation: heroEdgePulse  1.4s ease-in-out infinite; }
    .hero-edge-hint-l { left:  1.5rem; animation: heroEdgePulseL 1.4s ease-in-out infinite; }
    .hero-edge-hint.visible { opacity: 1; }
    .hero-inner { padding: 0 5%; display: flex; flex-direction: column; align-items: center; }
    .hero-brand {
      font-size: clamp(3.5rem, 10vw, 7rem);
      font-family: 'Georgia', serif;
      color: var(--gold);
      letter-spacing: 0.08em;
      text-transform: none;
      line-height: 1;
      margin-bottom: 1.2rem;
      opacity: 0;
      animation: brandReveal 1.2s cubic-bezier(0.22,1,0.36,1) 0.3s forwards, goldPulse 3s ease-in-out 2s infinite;
    }
    .hero-brand span { color: var(--cream); }
    .hero-label { color: var(--warm-mid); font-size: 1.15rem; letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 1.4rem; opacity: 0; animation: fadeUp 0.7s ease 1.5s forwards; }
    .hero-title { font-size: clamp(1.6rem, 4vw, 2.8rem); color: var(--cream); margin-bottom: 1.2rem; opacity: 0; animation: fadeUp 0.7s ease 1.9s forwards; }
    .hero-sub { color: var(--tan); font-size: 1.05rem; max-width: 520px; margin: 0 auto 2.4rem; opacity: 0; animation: fadeUp 0.7s ease 2.2s forwards; }
    .hero-btns { position: absolute; bottom: 2.5rem; left: 0; right: 0; display: flex; justify-content: center; gap: 1.4rem; opacity: 0; animation: fadeUp 0.7s ease 2.5s forwards; flex-wrap: wrap; z-index: 2; padding: 0 5%; }
    @keyframes brandReveal { 0% { opacity: 0; letter-spacing: 0.6em; transform: translateY(-20px); } 100% { opacity: 1; letter-spacing: 0.08em; transform: translateY(0); } }
    @keyframes goldPulse { 50% { color: #f0b840; text-shadow: 0 0 18px rgba(200,146,42,0.7); } }
    @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

    /* Buttons */
    .btn { display: inline-block; padding: 0.85rem 2.2rem; border-radius: 40px; font-family: 'Georgia', serif; font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: all 0.25s; }
    .btn-primary { background: var(--gold); color: var(--charcoal); border: 2px solid var(--gold); }
    .btn-primary:hover { background: #f0b840; border-color: #f0b840; }
    .btn-outline { background: transparent; color: var(--cream); border: 2px solid var(--cream); }
    .btn-outline:hover { background: var(--cream); color: var(--charcoal); }

    /* About */
    #about { background: var(--charcoal); }
    .section-title { font-size: 2.2rem; color: var(--gold); margin-bottom: 1rem; }
    #about .section-title { color: var(--cream); }
    .section-divider { width: 60px; height: 2px; background: var(--gold); margin: 0 auto 2rem; }
    .section-intro { color: var(--warm-mid); max-width: 700px; margin: 0 auto 3rem; font-size: 1.05rem; }
    #about .section-intro { color: var(--tan); }
    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; max-width: 1100px; margin: 0 auto; text-align: left; align-items: center; }
    .about-img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; }
    .about-img img { height: 100%; }
    .about-text h3 { font-size: 1.6rem; color: var(--cream); margin-bottom: 1rem; }
    .about-text p { color: var(--tan); margin-bottom: 1rem; }
    .about-badges { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }
    .badge { background: rgba(200,146,42,0.15); color: var(--gold); border: 1px solid rgba(200,146,42,0.3); padding: 0.35rem 0.9rem; border-radius: 20px; font-size: 0.8rem; letter-spacing: 0.08em; }

    /* Materials */
    #materials { background: var(--cream); }
    .materials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1100px; margin: 2rem auto 0; }
    .material-card { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; cursor: default; }
    .material-card img { height: 100%; transition: transform 0.4s ease; }
    .material-card:hover img { transform: scale(1.05); }
    .material-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(42,31,20,0.9) 0%, transparent 100%); padding: 1.5rem 1rem 1rem; text-align: left; }
    .material-name { color: var(--gold); font-size: 1.2rem; letter-spacing: 0.05em; }
    .material-sub { color: var(--tan); font-size: 0.8rem; }

    /* Gallery */
    #gallery { background: var(--charcoal); display: flex; flex-direction: column; align-items: center; }
    #gallery .section-title { color: var(--cream); }
    .gallery-grid { display: grid; grid-template-columns: repeat(3, 280px); grid-template-rows: repeat(3, 280px); gap: 12px; margin: 2rem auto 0; }
    .gallery-item { border: 3px solid var(--gold); border-radius: var(--radius); overflow: hidden; cursor: pointer; position: relative; aspect-ratio: 1/1; transition: border-color 0.2s, transform 0.2s; }
    .gallery-item:hover { border-color: #f0c050; transform: scale(1.03); z-index: 2; }
    .gallery-item img { width: 100%; height: 100%; object-fit: cover; }
    .gallery-caption { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(42,31,20,0.85); color: var(--tan); font-size: 0.75rem; padding: 0.4rem 0.6rem; text-align: center; opacity: 0; transition: opacity 0.2s; }
    .gallery-item:hover .gallery-caption { opacity: 1; }

    /* Shop */
    #shop { background: var(--cream); }
    .shop-search { margin: 0 auto 1.8rem; max-width: 520px; }
    .shop-search-wrap { position: relative; display: flex; align-items: center; }
    .search-icon { position: absolute; left: 1rem; width: 18px; height: 18px; color: var(--warm-mid); pointer-events: none; }
    #shop-search-input { width: 100%; padding: 0.75rem 2.8rem; border: 2px solid var(--tan); border-radius: 40px; font-family: 'Georgia', serif; font-size: 0.9rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s; background: var(--white); color: var(--text); }
    #shop-search-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,146,42,0.15); }
    #shop-search-input::placeholder { color: var(--warm-mid); }
    .search-clear { position: absolute; right: 1rem; background: none; border: none; cursor: pointer; color: var(--warm-mid); font-size: 1rem; display: none; }
    .search-clear.visible { display: block; }
    .shop-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 1rem; }
    .filter-btn { background: transparent; border: 1px solid var(--bark); border-radius: 30px; padding: 0.4rem 1.1rem; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bark); cursor: pointer; font-family: 'Georgia', serif; transition: all 0.2s; }
    .filter-btn:hover { background: var(--warm-mid); color: var(--white); border-color: var(--warm-mid); }
    .filter-btn.active { background: var(--oak); color: var(--white); border-color: var(--oak); }
    .cat-filters { margin-top: -0.5rem; }
    .cat-btn { background: transparent; border: 1px solid var(--gold); border-radius: 30px; padding: 0.4rem 1.1rem; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bark); cursor: pointer; font-family: 'Georgia', serif; transition: all 0.2s; }
    .cat-btn:hover { background: var(--gold); color: var(--charcoal); }
    .cat-btn.active { background: var(--gold); color: var(--charcoal); border-color: var(--gold); }
    /* Shop toolbar — Material / Category / Sort dropdowns */
    /* .reveal keeps transform:translateY(0) when visible, which makes a stacking context —
       so the toolbar needs its own z-index or the panels render behind the product cards. */
    .shop-toolbar { display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 2rem; position: relative; z-index: 40; }
    .dd { position: relative; }
    .dd-trigger { background: transparent; border: 1px solid var(--gold); border-radius: 30px; padding: 0.45rem 1rem; font-family: 'Georgia', serif; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bark); cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; transition: background 0.2s, color 0.2s; }
    .dd-trigger:hover { background: var(--tan); }
    .dd-trigger.has-value, .dd.open .dd-trigger { background: var(--gold); color: var(--charcoal); }
    .dd-chev { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform 0.2s ease; }
    .dd.open .dd-chev { transform: rotate(180deg); }
    .dd-panel { display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; min-width: 215px; max-width: calc(100vw - 40px); background: var(--white); border: 1px solid var(--tan); border-radius: 8px; padding: 0.4rem; box-shadow: 0 10px 30px rgba(60,30,10,0.18); }
    .dd.open .dd-panel { display: block; }
    #dd-sort .dd-panel { left: auto; right: 0; }
    .dd-panel .filter-btn, .dd-panel .cat-btn, .dd-panel .sort-btn { display: flex; align-items: center; gap: 0.6rem; width: 100%; background: transparent; border: none; border-radius: 5px; padding: 0.5rem 0.6rem; font-family: 'Georgia', serif; font-size: 0.82rem; letter-spacing: 0.02em; text-transform: none; color: var(--text); cursor: pointer; text-align: left; transition: background 0.15s; }
    .dd-panel .filter-btn:hover, .dd-panel .cat-btn:hover, .dd-panel .sort-btn:hover { background: var(--cream); }
    .dd-panel .filter-btn.active, .dd-panel .cat-btn.active, .dd-panel .sort-btn.active { background: var(--tan); color: var(--charcoal); }
    .dd-panel .filter-btn[data-filter]::before { content: ''; width: 14px; height: 14px; border-radius: 3px; flex: none; border: 1px solid rgba(0,0,0,0.15); }
    .dd-panel .filter-btn[data-filter="all"]::before, .dd-panel .filter-btn[data-filter="favourites"]::before { display: none; }
    .dd-panel .filter-btn[data-filter="wood"]::before    { background: #c4a882; }
    .dd-panel .filter-btn[data-filter="metal"]::before   { background: #8a8f96; }
    .dd-panel .filter-btn[data-filter="brass"]::before   { background: #c8922a; }
    .dd-panel .filter-btn[data-filter="leather"]::before { background: #7a4a2a; }
    .dd-panel .filter-btn[data-filter="acrylic"]::before { background: #9fd4e0; }
    .dd-panel .filter-btn[data-filter="slate"]::before   { background: #6b7280; }
    .dd-panel .filter-btn[data-filter="paper"]::before   { background: #e8dcc8; }
    .dd-count { margin-left: auto; font-size: 0.72rem; color: var(--subtext); }
    .shop-count { font-size: 0.75rem; color: var(--subtext); letter-spacing: 0.06em; }
    /* Premium badge on the top-priced featured pieces */
    .product-card[data-premium] { position: relative; }
    .product-card[data-premium]::before {
      content: '\2605\00A0 Premium'; position: absolute; top: 0.7rem; left: 0.7rem; z-index: 4;
      background: linear-gradient(135deg, #e3b341, #c8922a); color: #2a1f14;
      font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
      padding: 0.3rem 0.6rem; border-radius: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.28);
      pointer-events: none; font-family: 'Georgia', serif;
    }
    .product-card.search-hidden { display: none !important; }
    .shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; max-width: 1100px; margin: 2rem auto 0; }
    .shop-no-results { grid-column: 1/-1; text-align: center; color: var(--subtext); padding: 2rem; display: none; }
    .product-card { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--white); transition: transform 0.3s ease, box-shadow 0.3s ease; }
    .product-card:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 18px 48px rgba(60,30,10,0.22); }
    .product-img { aspect-ratio: 4/3; overflow: hidden; }
    .product-img img { height: 100%; transition: transform 0.4s ease; }
    .product-card:hover .product-img img { transform: scale(1.04); }
    .product-info { padding: 1.2rem; text-align: left; }
    .product-tag { font-size: 0.72rem; color: var(--warm-mid); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.4rem; }
    .made-to-order { display: inline-block; font-size: 0.65rem; color: var(--gold); border: 1px solid rgba(200,146,42,0.5); border-radius: 20px; padding: 0.18rem 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.5rem; }
    .product-name { font-size: 1.1rem; color: var(--text); margin-bottom: 0.5rem; }
    .product-desc { font-size: 0.85rem; color: var(--subtext); line-height: 1.6; margin-bottom: 1rem; }
    .product-footer { display: flex; align-items: center; justify-content: space-between; }
    .product-price { font-size: 1.1rem; color: var(--gold); font-weight: bold; }
    .btn-cart { background: var(--oak); color: var(--cream); border: none; padding: 0.5rem 1.1rem; border-radius: 20px; font-family: 'Georgia', serif; font-size: 0.78rem; letter-spacing: 0.08em; cursor: pointer; transition: background 0.2s; }
    .unavail-notice { color: var(--rust); font-size: 0.78rem; font-style: italic; letter-spacing: 0.06em; }
    [data-unavailable="true"] .btn-cart { display: none !important; }
    [data-unavailable="true"] .product-footer::after { content: 'Currently Unavailable'; color: var(--rust); font-size: 0.78rem; font-style: italic; letter-spacing: 0.06em; }
    .btn-cart:hover { background: var(--rust); }
    .product-variants { display: flex; align-items: center; gap: 0.5rem; margin: 0.6rem 0 0.5rem; flex-wrap: wrap; }
    .variant-label { font-size: 0.72rem; color: var(--subtext); letter-spacing: 0.08em; text-transform: uppercase; margin-right: 0.2rem; }
    .variant-btn { background: transparent; border: 1px solid var(--bark); border-radius: 20px; padding: 0.25rem 0.85rem; font-family: 'Georgia', serif; font-size: 0.75rem; letter-spacing: 0.07em; color: var(--bark); cursor: pointer; transition: all 0.18s; }
    .variant-btn:hover { border-color: var(--oak); color: var(--oak); }
    .variant-btn.active { background: var(--oak); color: var(--cream); border-color: var(--oak); }

    /* Cart */
    .cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; display: none; }
    .cart-overlay.visible { display: block; }
    .cart-panel { position: fixed; top: 0; right: -420px; width: 400px; max-width: 100vw; height: 100vh; background: var(--white); z-index: 201; padding: 2rem; overflow-y: auto; transition: right 0.35s cubic-bezier(0.22,1,0.36,1); box-shadow: -8px 0 32px rgba(0,0,0,0.2); }
    .cart-panel.open { right: 0; }
    .cart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
    .cart-header h3 { font-size: 1.3rem; color: var(--text); }
    .cart-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--subtext); }
    .cart-items { list-style: none; }
    .cart-empty { color: var(--subtext); text-align: center; padding: 2rem 0; }
    .cart-item { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--tan); align-items: center; }
    .cart-item-img { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
    .cart-item-info { flex: 1; }
    .cart-item-name { display: block; font-size: 0.9rem; color: var(--text); margin-bottom: 0.2rem; }
    .cart-item-price { display: block; font-size: 0.85rem; color: var(--gold); }
    .cart-item-custom { display: block; font-size: 0.78rem; color: var(--subtext); font-style: italic; margin-bottom: 0.2rem; }
    .cart-remove { background: none; border: none; cursor: pointer; color: var(--warm-mid); font-size: 1rem; padding: 0.2rem; }
    .cart-footer { margin-top: 1.5rem; }
    .cart-total { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; border-top: 1px solid var(--tan); margin-bottom: 1rem; font-size: 1rem; font-family: 'Georgia', serif; color: var(--text); }
    .cart-total strong { color: var(--gold); font-size: 1.15rem; }
    .cart-total-note { font-size: 0.72rem; color: var(--subtext); text-align: center; margin-bottom: 0.8rem; letter-spacing: 0.04em; }
    .cart-enquire { width: 100%; padding: 0.9rem; background: var(--gold); color: var(--charcoal); border: none; border-radius: 30px; font-family: 'Georgia', serif; font-size: 0.9rem; letter-spacing: 0.1em; cursor: pointer; transition: background 0.2s; margin-bottom: 0.75rem; }
    .cart-enquire:hover { background: #f0b840; }
    .paypal-divider { text-align: center; font-size: 0.75rem; color: var(--subtext); letter-spacing: 0.08em; text-transform: uppercase; margin: 0.5rem 0; }
    #paypal-button-container { min-height: 45px; }
    #paypal-button-container.pp-hidden { display: none; }
    .pp-note { font-size: 0.7rem; color: var(--subtext); text-align: center; margin-top: 0.5rem; }
    .pp-placeholder { width: 100%; padding: 0.85rem; background: #ffc439; color: #003087; border: none; border-radius: 30px; font-size: 0.95rem; font-weight: bold; letter-spacing: 0.04em; cursor: default; opacity: 0.7; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
    .pp-placeholder-note { font-size: 0.68rem; color: var(--subtext); text-align: center; margin-top: 0.4rem; }

    /* Lightbox */
    @keyframes lbOverlayIn   { from { opacity: 0; backdrop-filter: blur(0px); } to { opacity: 1; backdrop-filter: blur(4px); } }
    @keyframes lbOverlayOut  { from { opacity: 1; backdrop-filter: blur(4px); } to { opacity: 0; backdrop-filter: blur(0px); } }
    @keyframes lbPanelIn     { 0% { opacity: 0; transform: translateY(60px) scale(0.88) rotateX(6deg); filter: blur(6px); } 60% { filter: blur(0px); } 100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0deg); filter: blur(0px); } }
    @keyframes lbPanelOut    { 0% { opacity: 1; transform: scale(1); filter: blur(0px); } 100% { opacity: 0; transform: scale(0.9) translateY(30px); filter: blur(4px); } }
    @keyframes lbImgReveal   { 0% { transform: scale(1.12); filter: blur(8px); opacity: 0; } 100% { transform: scale(1); filter: blur(0px); opacity: 1; } }
    @keyframes lbInfoSlide   { 0% { opacity: 0; transform: translateX(30px); } 100% { opacity: 1; transform: translateX(0); } }
    @keyframes lbSpecPop     { 0% { opacity: 0; transform: scale(0.85) translateY(8px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
    .lightbox { position: fixed; inset: 0; background: rgba(20,12,5,0); z-index: 300; display: none; align-items: center; justify-content: center; padding: 1.5rem; overflow-y: auto; perspective: 1200px; }
    .lightbox.active { display: flex; background: rgba(20,12,5,0.92); animation: lbOverlayIn 0.35s ease forwards; }
    .lightbox.closing { animation: lbOverlayOut 0.28s ease forwards; }
    .lightbox-inner { background: var(--white); border-radius: var(--radius); max-width: 1060px; width: 100%; display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden; max-height: 92vh; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.5); transform-style: preserve-3d; }
    .lightbox.active .lightbox-inner { animation: lbPanelIn 0.55s cubic-bezier(0.16,1,0.3,1) forwards; }
    .lightbox.closing .lightbox-inner { animation: lbPanelOut 0.28s cubic-bezier(0.4,0,1,1) forwards; }
    .lightbox.active .lb-img-wrap img { animation: lbImgReveal 0.7s cubic-bezier(0.16,1,0.3,1) 0.1s both; }
    .lightbox.active .lb-info { animation: lbInfoSlide 0.5s cubic-bezier(0.16,1,0.3,1) 0.18s both; }
    .lightbox.active .lightbox-spec:nth-child(1) { animation: lbSpecPop 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.3s both; }
    .lightbox.active .lightbox-spec:nth-child(2) { animation: lbSpecPop 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.36s both; }
    .lightbox.active .lightbox-spec:nth-child(3) { animation: lbSpecPop 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.42s both; }
    .lightbox.active .lightbox-spec:nth-child(4) { animation: lbSpecPop 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.48s both; }
    .lb-close-x { position: absolute; top: 1rem; right: 1rem; background: rgba(42,31,20,0.7); color: var(--cream); border: none; border-radius: 50%; width: 34px; height: 34px; font-size: 1rem; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
    .lb-close-x:hover { background: var(--rust); }
    .lb-img-wrap { overflow: hidden; min-height: 380px; position: relative; background: var(--cream); display: flex; align-items: center; justify-content: center; }
    .lb-img-wrap img { width: 100%; height: 100%; object-fit: contain; transition: opacity 0.35s ease; }
    #lb-video { width: 100%; height: 100%; max-height: 100%; object-fit: contain; background: #000; }
    .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(42,31,20,0.55); color: var(--cream); font-size: 1.5rem; line-height: 1; cursor: pointer; z-index: 6; display: flex; align-items: center; justify-content: center; transition: background 0.2s; padding: 0 0 3px; }
    .lb-nav:hover { background: var(--gold); color: var(--charcoal); }
    .lb-prev { left: 0.7rem; }
    .lb-next { right: 0.7rem; }
    .lb-img-wrap.single .lb-nav, .lb-img-wrap.single .lb-dots { display: none; }
    .lb-dots { position: absolute; bottom: 0.8rem; left: 0; right: 0; display: flex; gap: 0.4rem; justify-content: center; z-index: 6; }
    .lb-dot { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; background: rgba(255,255,255,0.5); cursor: pointer; transition: background 0.2s, transform 0.2s; }
    .lb-dot.active { background: var(--gold); transform: scale(1.25); }
    .lb-info { padding: 2.2rem 2rem; overflow-y: auto; max-height: 92vh; min-height: 0; display: flex; flex-direction: column; gap: 0; }
    .lb-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
    .lb-badge { background: var(--oak); color: var(--cream); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.28rem 0.8rem; border-radius: 20px; }
    .lb-tag { display: none; }
    .lb-title { font-size: 1.6rem; color: var(--text); margin-bottom: 0.9rem; line-height: 1.3; }
    .lb-desc { font-size: 0.9rem; color: var(--subtext); line-height: 1.75; margin-bottom: 0.6rem; }
    .lb-longdesc { font-size: 0.88rem; color: var(--text); line-height: 1.8; margin-bottom: 0.9rem; white-space: pre-line; }
    .lb-longdesc:empty { display: none; }
    .lb-extra { font-size: 0.88rem; color: var(--text); line-height: 1.75; margin-bottom: 1.1rem; padding: 0.9rem 1rem; background: var(--cream); border-left: 3px solid var(--gold); border-radius: 0 4px 4px 0; display: none; }
    .lb-extra.has-content { display: block; }
    .lightbox-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1.4rem; }
    .lightbox-spec { background: var(--cream); padding: 0.55rem 0.8rem; border-radius: 4px; }
    .lightbox-spec strong { display: block; font-size: 0.66rem; color: var(--warm-mid); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.2rem; }
    .lightbox-spec span { font-size: 0.9rem; color: var(--text); }
    .lb-custom { margin-bottom: 1.4rem; }
    .lb-custom-label { display: block; font-size: 0.72rem; color: var(--warm-mid); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.4rem; }
    .lb-custom-req { color: var(--rust); }
    .lb-custom-input { width: 100%; box-sizing: border-box; padding: 0.6rem 0.8rem; font-family: 'Georgia', serif; font-size: 0.95rem; color: var(--text); background: var(--cream); border: 1px solid var(--tan); border-radius: 4px; transition: border-color 0.2s; }
    .lb-custom-input:focus { outline: none; border-color: var(--gold); }
    .lb-custom-error { display: none; font-size: 0.78rem; color: var(--rust); margin-top: 0.4rem; }
    .lb-custom.invalid .lb-custom-input { border-color: var(--rust); }
    .lb-custom.invalid .lb-custom-error { display: block; }
    .lb-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: auto; padding-top: 0.5rem; }
    .lb-btn { padding: 0.7rem 1.5rem; border-radius: 30px; font-family: 'Georgia', serif; font-size: 0.84rem; letter-spacing: 0.08em; cursor: pointer; transition: all 0.2s; border: 2px solid var(--oak); }
    .lb-btn-primary { background: var(--oak); color: var(--cream); }
    .lb-btn-primary:hover { background: var(--rust); border-color: var(--rust); }
    .lb-btn-outline { background: transparent; color: var(--oak); }
    .lb-btn-outline:hover { background: var(--oak); color: var(--cream); }
    .product-card { cursor: pointer; }

    /* Contact */
    #contact { background: var(--oak); }
    #contact .section-title { color: var(--cream); }
    #contact .section-divider { background: var(--gold); }
    #contact .section-intro { color: var(--tan); }
    .contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 4rem; max-width: 1000px; margin: 0 auto; text-align: left; }
    .contact-info h3 { color: var(--cream); font-size: 1.3rem; margin-bottom: 1.2rem; }
    .contact-detail { display: flex; align-items: flex-start; gap: 0.8rem; margin-bottom: 1rem; }
    .contact-detail svg { flex-shrink: 0; margin-top: 3px; color: var(--gold); }
    .contact-detail p { color: var(--tan); font-size: 0.9rem; }
    .contact-form { display: flex; flex-direction: column; gap: 1rem; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .form-group { display: flex; flex-direction: column; gap: 0.4rem; }
    .form-group label { color: var(--tan); font-size: 0.82rem; letter-spacing: 0.08em; }
    .form-group input, .form-group textarea, .form-group select { background: rgba(255,248,240,0.08); border: 1px solid rgba(200,146,42,0.3); border-radius: 4px; padding: 0.7rem 1rem; color: var(--cream); font-family: 'Georgia', serif; font-size: 0.9rem; outline: none; transition: border-color 0.2s; }
    .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--gold); }
    .form-group textarea { min-height: 100px; resize: vertical; }
    .form-group select option { background: var(--oak); }
    .btn-send { align-self: flex-start; background: var(--gold); color: var(--charcoal); border: none; padding: 0.85rem 2.4rem; border-radius: 40px; font-family: 'Georgia', serif; font-size: 0.9rem; letter-spacing: 0.1em; cursor: pointer; transition: background 0.2s; }
    .btn-send:hover { background: #f0b840; }

    /* Footer */
    footer { background: var(--charcoal); padding: 2.5rem 5%; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
    .footer-logo { font-size: 1.4rem; color: var(--gold); font-family: 'Georgia', serif; letter-spacing: 0.1em; }
    .footer-logo span { color: var(--cream); }
    .footer-copy { color: var(--subtext); font-size: 0.8rem; }
    .footer-links { display: flex; gap: 1.5rem; }
    .footer-links a { color: var(--warm-mid); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.2s; }
    .footer-links a:hover { color: var(--gold); }

    /* Reveal animations */
    .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); }
    .reveal.visible { opacity: 1; transform: none; }
    .reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1); }
    .reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.08s; opacity: 1; transform: none; }
    .reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.16s; opacity: 1; transform: none; }
    .reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.24s; opacity: 1; transform: none; }
    .reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.32s; opacity: 1; transform: none; }
    .reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.40s; opacity: 1; transform: none; }
    .reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.48s; opacity: 1; transform: none; }
    .reveal-stagger.visible > *:nth-child(7) { transition-delay: 0.56s; opacity: 1; transform: none; }
    .reveal-stagger.visible > *:nth-child(8) { transition-delay: 0.64s; opacity: 1; transform: none; }
    .reveal-stagger.visible > *:nth-child(9) { transition-delay: 0.72s; opacity: 1; transform: none; }
    .reveal-stagger.visible > *:nth-child(n+10) { transition-delay: 0.80s; opacity: 1; transform: none; }

    /* Cart bounce / shake */
    @keyframes cartBounce { 0%,100%{transform:scale(1)} 35%{transform:scale(0.88)} 65%{transform:scale(1.12)} }
    @keyframes cartShake { 0%,100%{transform:rotate(0)} 20%{transform:rotate(-14deg)} 40%{transform:rotate(12deg)} 60%{transform:rotate(-8deg)} 80%{transform:rotate(6deg)} }
    .cart-bounce { animation: cartBounce 0.5s ease; }

    /* Responsive */
    @media (max-width: 900px) {
      .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
      .about-img { aspect-ratio: 16/9; }
      .gallery-grid { grid-template-columns: repeat(3, 200px); grid-template-rows: repeat(3, 200px); }
    }
    @media (max-width: 680px) {
      .lightbox-inner { grid-template-columns: 1fr; overflow-y: auto; }
      .lb-img-wrap { max-height: 240px; min-height: 0; flex-shrink: 0; }
      .lb-info { max-height: none; overflow-y: visible; }
    }
    @media (max-width: 500px) {
      .nav-link { display: none !important; }
      .nav-burger { display: flex; margin-left: auto; }
      nav { padding: 0 4%; justify-content: flex-start; }
      nav.open { height: auto; flex-direction: column; align-items: flex-start; gap: 0.9rem; padding: 0.8rem 6%; }
      nav.open .nav-link { display: block !important; font-size: 0.9rem; }
      nav.open .nav-burger { position: absolute; top: 0.8rem; right: 6%; }
      .nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
      .nav-burger.open span:nth-child(2) { opacity: 0; }
      .nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    }
    @media (max-width: 600px) {
      section { padding: 70px 4%; }
      .gallery-grid { grid-template-columns: repeat(3, 140px); grid-template-rows: repeat(3, 140px); gap: 6px; }
      .form-row { grid-template-columns: 1fr; }
      footer { flex-direction: column; text-align: center; }
    }
    @media (max-width: 900px) {
      .materials-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* ====== ENHANCED ANIMATIONS ====== */
    /* Section title shimmer */
    @keyframes titleShimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
    .section-title.visible { background: linear-gradient(90deg, var(--gold) 30%, #fff8e0 50%, var(--gold) 70%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: titleShimmer 3s linear 0.2s 1 forwards; }
    #about .section-title.visible, #contact .section-title.visible { background: linear-gradient(90deg, var(--cream) 30%, var(--gold) 50%, var(--cream) 70%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: titleShimmer 3s linear 0.2s 1 forwards; }
    /* Divider grow */
    @keyframes dividerGrow { from { width: 0; opacity: 0; } to { width: 60px; opacity: 1; } }
    .section-divider.visible { animation: dividerGrow 0.6s cubic-bezier(0.22,1,0.36,1) 0.1s both; }
    /* Product cards */
    .product-card { transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease, border-color 0.35s ease; border: 1px solid transparent; }
    .product-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 24px 56px rgba(60,30,10,0.28), 0 0 0 1px rgba(200,146,42,0.35); border-color: rgba(200,146,42,0.3); }
    .product-card:hover .product-name { color: var(--gold); transition: color 0.25s; }
    .product-card:hover .product-price { text-shadow: 0 0 12px rgba(200,146,42,0.6); }
    /* Cart button pulse */
    @keyframes cartBtnPulse { 0% { box-shadow: 0 0 0 0 rgba(176,90,42,0.6); } 70% { box-shadow: 0 0 0 8px rgba(176,90,42,0); } 100% { box-shadow: 0 0 0 0 rgba(176,90,42,0); } }
    .btn-cart:hover { background: var(--rust); animation: cartBtnPulse 0.7s ease; }
    /* Material cards */
    .material-card { transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease; }
    .material-card:hover { transform: scale(1.04); box-shadow: 0 12px 40px rgba(200,146,42,0.3), 0 0 0 2px rgba(200,146,42,0.4); }
    .material-card:hover img { transform: scale(1.08); }
    .material-card:hover .material-name { color: #f0c050; }
    /* Gallery */
    .gallery-item { transition: border-color 0.25s, transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease; }
    .gallery-item:hover { border-color: #f0c050; transform: scale(1.04); box-shadow: 0 0 20px rgba(200,146,42,0.45), 0 8px 32px rgba(0,0,0,0.4); }
    /* Ember particles */
    @keyframes emberFloat { 0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 0.6; } 100% { transform: translateY(-120vh) translateX(var(--dx)) scale(0.3); opacity: 0; } }
    .hero-particle { position: absolute; border-radius: 50%; background: radial-gradient(circle, #f0c050 0%, #c8922a 60%, transparent 100%); pointer-events: none; animation: emberFloat var(--dur) ease-in var(--delay) infinite; bottom: 0; opacity: 0; filter: blur(0.5px); }
    /* Nav logo float */
    @keyframes logoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
    .nav-logo { animation: logoFloat 4s ease-in-out infinite; }
    /* CTA buttons shimmer */
    .btn-primary { background: linear-gradient(90deg, var(--gold) 40%, #f5d080 55%, var(--gold) 70%); background-size: 200% auto; transition: background-position 0.5s ease, border-color 0.25s, transform 0.2s, box-shadow 0.2s; }
    .btn-primary:hover { background-position: right center; border-color: #f0b840; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(200,146,42,0.45); }
    .btn-outline:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(245,240,232,0.2); }
    /* Contact form glow */
    .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,146,42,0.2), 0 0 12px rgba(200,146,42,0.15); }
    /* Badge float */
    @keyframes badgeFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
    .badge { animation: badgeFloat 3s ease-in-out infinite; }
    .badge:nth-child(2) { animation-delay: 0.5s; } .badge:nth-child(3) { animation-delay: 1s; } .badge:nth-child(4) { animation-delay: 1.5s; }
    /* ====================================== */

    /* ====== STUNNING UPGRADE PACK ====== */
    /* Gold scroll progress bar */
    #scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--rust), var(--gold), #f0c050); z-index: 300; box-shadow: 0 0 10px rgba(200,146,42,0.7); pointer-events: none; }

    /* Hero ken-burns slow zoom (layered with existing fades) */
    @keyframes heroZoom { 0% { transform: scale(1); } 100% { transform: scale(1.1); } }
    .hero-bg-slide-1 { animation: heroBgFade1 18s ease-in-out infinite, heroZoom 22s ease-in-out infinite alternate; }
    .hero-bg-slide-2 { animation: heroBgFade2 18s ease-in-out infinite, heroZoom 26s ease-in-out infinite alternate-reverse; }

    /* Shine sweep on product images & material cards */
    .product-img, .material-card { position: relative; }
    .product-img::after, .material-card::after {
      content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
      background: linear-gradient(105deg, transparent 0%, rgba(255,248,224,0.35) 50%, transparent 100%);
      transform: skewX(-20deg); pointer-events: none; z-index: 2;
    }
    .product-card:hover .product-img::after, .material-card:hover::after { animation: shineSweep 0.8s ease forwards; }
    @keyframes shineSweep { from { left: -80%; } to { left: 130%; } }

    /* 3D tilt base — JS drives the transform */
    .product-card { will-change: transform; transform-style: preserve-3d; }

    /* Gallery item ken-burns on hover */
    .gallery-item img { transition: transform 6s ease, opacity 0.8s ease; }
    .gallery-item:hover img { transform: scale(1.15); }

    /* Section divider shimmer */
    .section-divider { background: linear-gradient(90deg, var(--gold), #f5d080, var(--gold)); background-size: 200% auto; animation: titleShimmer 3s linear infinite; }

    /* Button ripple */
    .btn, .btn-cart, .lb-btn, .cart-enquire, .btn-send { position: relative; overflow: hidden; }
    .ripple-wave { position: absolute; border-radius: 50%; background: rgba(255,248,224,0.5); transform: scale(0); animation: rippleGo 0.6s ease-out forwards; pointer-events: none; }
    @keyframes rippleGo { to { transform: scale(3); opacity: 0; } }

    /* Stat pop */
    @keyframes statPop { 0% { transform: scale(0.6); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
    .stat-pop { animation: statPop 0.7s cubic-bezier(0.34,1.56,0.64,1) both; }

    /* ============================================================
       MODERN UPGRADE LAYER
       Typography, whitespace, laser motif, intro, scroll stories
       ============================================================ */

    /* --- Typography: Fraunces display serif + Space Grotesk UI sans --- */
    h1, h2, h3, h4, .hero-title, .section-title,
    .lb-title, .product-name {
      font-family: 'Fraunces', Georgia, serif;
      font-weight: 420;
      font-optical-sizing: auto;
    }
    .section-title { font-weight: 360; }
    /* Brand wordmark keeps the original Georgia — that's the YCR CutWorkS identity */
    .hero-brand, .intro-brand, .footer-logo, .nav-logo {
      font-family: 'Georgia', serif;
      font-weight: normal;
    }
    .section-title em, .hero-title em { font-style: italic; font-weight: 340; }
    .nav-link, .nav-basket-link, .btn, .btn-cart, .btn-send, .lb-btn,
    .cart-enquire, .filter-btn, .cat-btn, .variant-btn, .variant-label,
    .product-tag, .made-to-order, .hero-label, .badge, .lb-badge,
    .footer-links a, .gallery-caption, .material-sub, #shop-search-input {
      font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
      letter-spacing: 0.12em;
    }
    body { font-family: Georgia, serif; }

    /* --- Whitespace & bigger imagery --- */
    section { padding: 130px 6%; }
    .section-title { font-size: clamp(2.4rem, 5vw, 3.4rem); margin-bottom: 1.4rem; line-height: 1.15; }
    .section-intro { font-size: 1.12rem; margin-bottom: 4rem; max-width: 640px; line-height: 1.9; }
    .section-divider { margin-bottom: 2.6rem; }
    .gallery-grid { grid-template-columns: repeat(3, 320px); grid-template-rows: repeat(3, 320px); gap: 18px; }
    .shop-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2.6rem; max-width: 1240px; }
    .materials-grid { gap: 2rem; max-width: 1240px; }
    .product-info { padding: 1.6rem; }
    .product-name { font-size: 1.25rem; }
    @media (max-width: 1100px) { .gallery-grid { grid-template-columns: repeat(3, 260px); grid-template-rows: repeat(3, 260px); } }
    @media (max-width: 900px)  { .gallery-grid { grid-template-columns: repeat(3, 200px); grid-template-rows: repeat(3, 200px); } section { padding: 100px 5%; } }
    @media (max-width: 600px)  { .gallery-grid { grid-template-columns: repeat(3, 140px); grid-template-rows: repeat(3, 140px); gap: 8px; } section { padding: 80px 4%; } }

    /* --- Multi-image product cards (was inline styles) --- */
    .product-img.multi-img { position: relative; }
    .product-img.multi-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 1.2s ease, transform 6s ease; }
    /* Opt-in: show the whole photo (no crop) for products with portrait/mixed-ratio images */
    .product-card .product-img.fit-contain { background: #d3d3d3; }
    .product-card .product-img.fit-contain img { object-fit: contain; }
    /* "Video" badge on any card that includes a clip */
    .product-img.multi-img:has(img[data-video])::before {
      content: '\25B6  Video'; position: absolute; top: 0.6rem; left: 0.6rem; z-index: 3;
      background: rgba(42,31,20,0.78); color: var(--cream); font-size: 0.62rem; letter-spacing: 0.1em;
      text-transform: uppercase; padding: 0.25rem 0.5rem; border-radius: 20px; pointer-events: none;
    }

    /* Shop hover zoom: same slow ken-burns feel as the gallery */
    .product-img img { transition: transform 6s ease; }
    .product-card:hover .product-img img { transform: scale(1.12); }

    /* --- Laser motif: dividers draw themselves with a glowing head --- */
    .section-divider { position: relative; width: 60px; overflow: visible; }
    .section-divider.visible { animation: dividerGrow 0.9s cubic-bezier(0.22,1,0.36,1) 0.1s both; }
    .section-divider.visible::after {
      content: ''; position: absolute; top: 50%; right: -4px; width: 9px; height: 9px;
      transform: translateY(-50%); border-radius: 50%;
      background: radial-gradient(circle, #fff8e0 0%, #f5d080 45%, transparent 75%);
      box-shadow: 0 0 12px 3px rgba(245,208,128,0.85), 0 0 28px 8px rgba(200,146,42,0.4);
      animation: laserHeadPulse 2.2s ease-in-out 1s infinite;
    }
    @keyframes laserHeadPulse { 0%,100% { opacity: 0.85; } 50% { opacity: 0.35; } }

    /* Laser underline on hover for nav links is existing; extend to headings */
    .section-title { position: relative; display: inline-block; }

    /* --- Page-load intro --- */
    #intro-overlay {
      position: fixed; inset: 0; z-index: 9999; background: #14100a;
      display: flex; align-items: center; justify-content: center;
      transition: opacity 0.6s ease, visibility 0.6s;
    }
    #intro-overlay.done { opacity: 0; visibility: hidden; pointer-events: none; }
    .intro-inner { text-align: center; }
    .intro-brand {
      font-size: clamp(2.6rem, 8vw, 5rem); color: var(--gold); letter-spacing: 0.06em;
      opacity: 0; animation: introBrandIn 0.9s cubic-bezier(0.22,1,0.36,1) 0.15s forwards;
    }
    .intro-brand span { color: var(--cream); }
    @keyframes introBrandIn { from { opacity: 0; transform: translateY(16px); letter-spacing: 0.3em; } to { opacity: 1; transform: none; letter-spacing: 0.06em; } }
    .intro-laser-track {
      position: relative; height: 2px; margin: 1.4rem auto 1.1rem; width: min(420px, 70vw);
      background: rgba(200,146,42,0.18); border-radius: 2px; overflow: visible;
    }
    .intro-laser-track::before {
      content: ''; position: absolute; inset: 0; transform-origin: left;
      background: linear-gradient(90deg, var(--rust), var(--gold), #f5d080);
      transform: scaleX(0); animation: introLine 1.1s cubic-bezier(0.65,0,0.35,1) 0.5s forwards;
    }
    @keyframes introLine { to { transform: scaleX(1); } }
    .intro-laser-dot {
      position: absolute; top: 50%; left: 0; width: 10px; height: 10px;
      transform: translate(-50%, -50%); border-radius: 50%;
      background: radial-gradient(circle, #fff8e0 0%, #f5d080 50%, transparent 80%);
      box-shadow: 0 0 14px 4px rgba(245,208,128,0.9), 0 0 34px 10px rgba(200,146,42,0.45);
      animation: introDot 1.1s cubic-bezier(0.65,0,0.35,1) 0.5s forwards;
    }
    @keyframes introDot { to { left: 100%; } }
    .intro-tag {
      color: var(--warm-mid); font-family: 'Space Grotesk', sans-serif; font-size: 0.78rem;
      letter-spacing: 0.3em; text-transform: uppercase;
      opacity: 0; animation: fadeUp 0.6s ease 1.4s forwards;
    }

    /* --- Scroll storytelling --- */
    /* Image wipe reveal: gallery + material + product images uncover with a clip wipe */
    .reveal-stagger > .gallery-item, .reveal-stagger > .material-card, .reveal-stagger > .product-card {
      clip-path: inset(0 0 100% 0);
      transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1),
                  clip-path 0.9s cubic-bezier(0.65,0,0.35,1);
    }
    .reveal-stagger.visible > .gallery-item, .reveal-stagger.visible > .material-card, .reveal-stagger.visible > .product-card {
      clip-path: inset(0 0 0% 0);
    }
    /* Sorting re-appends every card, which restarts the reveal transition and makes
       products wipe in again (looking briefly missing). Once the intro has played,
       reordering must be instant. */
    #shop-grid.reveal-done > .product-card {
      opacity: 1 !important; clip-path: none !important; transform: none !important; transition: none !important;
    }
    /* Deeper entrance for revealed blocks */
    .reveal { transform: translateY(48px); }
    .reveal-stagger > * { transform: translateY(40px); }

    /* On phones the shop becomes one very tall single column — too tall for the
       scroll-reveal to fire/settle reliably, which left every product invisible.
       Below 700px, show product cards immediately with no reveal animation. */
    @media (max-width: 700px) {
      #shop-grid.reveal-stagger > .product-card,
      #shop-grid.reveal-stagger.visible > .product-card {
        opacity: 1 !important;
        clip-path: none !important;
        transform: none !important;
        transition: none !important;
      }
      /* About: on phones put Steve + Ryan side by side on their own row,
         with the intro text spanning full width underneath. */
      .about-team {
        grid-template-columns: 1fr 1fr !important;
        gap: 1.2rem 1.2rem !important;
        margin-bottom: 2rem !important;
        max-width: 460px !important;
        align-items: start !important;
      }
      .about-team > div:nth-child(1) { grid-column: 1; grid-row: 1; }   /* Steve */
      .about-team > div:nth-child(3) { grid-column: 2; grid-row: 1; }   /* Ryan  */
      .about-team > div:nth-child(2) { grid-column: 1 / -1; grid-row: 2; } /* text */
      .team-avatar {
        width: 38vw !important;
        height: 38vw !important;
        max-width: 150px !important;
        max-height: 150px !important;
      }
    }

    /* --- Hero: mouse-driven perspective parallax --- */
    #home { perspective: 1200px; }
    .hero-bg-track {
      will-change: transform;
      transform: scale(1.08);
      transition: none;
    }
    .hero-content-parallax { will-change: transform; }

    /* --- Hero: laser-cut sweep + workshop haze --- */
    .hero-fx { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }

    /* Soft drifting haze, like workshop air catching the light */
    .hero-haze, .hero-haze-2 {
      position: absolute; border-radius: 50%; mix-blend-mode: screen;
      background: radial-gradient(circle, rgba(200,146,42,0.5) 0%, transparent 65%);
      filter: blur(60px);
    }
    .hero-haze   { top: -20%; left: -15%; width: 70vmax; height: 70vmax; opacity: 0.10; animation: hazeDrift 26s ease-in-out infinite alternate; }
    .hero-haze-2 { top: 30%; left: 55%; width: 55vmax; height: 55vmax; opacity: 0.08; animation: hazeDrift2 32s ease-in-out infinite alternate; }
    @keyframes hazeDrift  { from { transform: translate(0,0) scale(1); }   to { transform: translate(8vw,5vh) scale(1.15); } }
    @keyframes hazeDrift2 { from { transform: translate(0,0) scale(1.1); } to { transform: translate(-7vw,-4vh) scale(0.95); } }

    /* --- Lenis smooth scrolling compatibility --- */
    html.lenis, html.lenis body { height: auto; }
    .lenis.lenis-smooth { scroll-behavior: auto !important; }
    .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
    .lenis.lenis-stopped { overflow: hidden; }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
      #intro-overlay { display: none !important; }
      .reveal-stagger > * { clip-path: none !important; }
    }
    /* ====================================== */

    /* --- Favourites --- */
    .product-img { position: relative; }
    .fav-btn {
      position: absolute; top: 10px; right: 10px; z-index: 3;
      width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
      background: rgba(42,31,20,0.55); color: var(--cream);
      font-size: 1.2rem; line-height: 1; padding: 0;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.2s, color 0.2s, transform 0.15s;
    }
    .fav-btn:hover { background: rgba(42,31,20,0.85); transform: scale(1.1); }
    .fav-btn.active { color: var(--gold); }
    @keyframes favPop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
    .fav-btn.pop { animation: favPop 0.35s ease; }
    .filter-btn.fav-filter { border-color: var(--gold); }
    .filter-btn.fav-filter.active { background: var(--gold); color: var(--charcoal); border-color: var(--gold); }

    /* --- Newsletter --- */
    .newsletter-form { max-width: 520px; margin: 0 auto; }
    .newsletter-wrap { display: flex; gap: 0.6rem; }
    #newsletter-email {
      flex: 1; min-width: 0; padding: 0.75rem 1.2rem;
      border: 2px solid rgba(200,146,42,0.4); border-radius: 40px;
      font-family: 'Georgia', serif; font-size: 0.9rem; outline: none;
      background: var(--white); color: var(--text);
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    #newsletter-email:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,146,42,0.25); }
    #newsletter-email::placeholder { color: var(--warm-mid); }
    .newsletter-btn {
      background: var(--gold); color: var(--charcoal); border: 2px solid var(--gold);
      border-radius: 40px; padding: 0.75rem 1.6rem;
      font-family: 'Georgia', serif; font-size: 0.88rem; letter-spacing: 0.08em;
      cursor: pointer; white-space: nowrap; transition: background 0.2s, border-color 0.2s;
    }
    .newsletter-btn:hover { background: #f0b840; border-color: #f0b840; }
    .newsletter-btn:disabled { opacity: 0.7; cursor: default; }
    .newsletter-consent { color: var(--warm-mid); font-size: 0.75rem; line-height: 1.6; margin: 0.9rem auto 0; max-width: 480px; }
    @media (max-width: 480px) {
      .newsletter-wrap { flex-direction: column; }
      .newsletter-btn { width: 100%; }
    }