@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600&display=swap');

/* Safety net: the HTML "hidden" attribute must always hide an element,
   no matter what display value another rule sets on that same element. */
[hidden]{display:none !important;}

  :root{
    --bark:#241a13;
    --walnut:#4a2e1e;
    --honey:#c98a3e;
    --honey-bright:#e0a854;
    --parchment:#efe6d0;
    --bone:#faf6ef;
    --moss:#6b7d4f;
    --moss-deep:#3f4b2c;
    --forest:#2f3b26;
    --birch:#e8e1d0;
    --birch-mark:#3a332a;
    --sap:#b8792f;
  }

  *{margin:0;padding:0;box-sizing:border-box;}

  /* Real bark texture: vertical ridges + cracks + scattered moss patches */
  .bark-bg{
    background:
      radial-gradient(circle 85px at 12% 18%, rgba(120,140,90,0.32), transparent 70%),
      radial-gradient(circle 55px at 88% 12%, rgba(63,75,44,0.3), transparent 70%),
      radial-gradient(circle 110px at 78% 68%, rgba(107,125,79,0.22), transparent 70%),
      radial-gradient(circle 45px at 18% 78%, rgba(63,75,44,0.28), transparent 70%),
      radial-gradient(circle 65px at 48% 40%, rgba(107,125,79,0.14), transparent 70%),
      radial-gradient(circle 40px at 60% 90%, rgba(120,140,90,0.2), transparent 70%),
      repeating-linear-gradient(89deg,
        rgba(0,0,0,0.22) 0px, rgba(0,0,0,0.22) 2px,
        transparent 2px, transparent 7px,
        rgba(0,0,0,0.12) 7px, rgba(0,0,0,0.12) 9px,
        transparent 9px, transparent 19px),
      repeating-linear-gradient(93deg,
        rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px,
        transparent 1px, transparent 13px),
      repeating-linear-gradient(86deg,
        rgba(0,0,0,0.28) 0px, rgba(0,0,0,0.28) 1px,
        transparent 1px, transparent 41px),
      radial-gradient(ellipse at 30% 0%, #3a2818 0%, transparent 60%),
      var(--bark);
  }
  .wood-card, .gallery-card, .process-step{transform-style:preserve-3d;}
  .reveal{opacity:0; transform:translateY(28px); transition:opacity 0.7s ease, transform 0.7s ease;}
  .reveal.revealed{opacity:1; transform:translateY(0);}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1; transform:none; transition:none;}
  }
  html, body{max-width:100%; overflow-x:hidden;}
  img, svg{max-width:100%; height:auto;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Work Sans', sans-serif;
    background:
      radial-gradient(ellipse 600px 400px at 8% 8%, rgba(107,125,79,0.14), transparent 60%),
      radial-gradient(ellipse 500px 350px at 95% 30%, rgba(63,75,44,0.12), transparent 55%),
      radial-gradient(ellipse 700px 500px at 50% 90%, rgba(201,138,62,0.10), transparent 60%),
      repeating-linear-gradient(0deg,
        transparent 0px, transparent 38px,
        rgba(58,51,42,0.05) 38px, rgba(58,51,42,0.05) 40px,
        transparent 40px, transparent 74px,
        rgba(58,51,42,0.09) 74px, rgba(58,51,42,0.09) 77px),
      repeating-linear-gradient(90deg,
        rgba(58,51,42,0.02) 0px, rgba(58,51,42,0.02) 2px,
        transparent 2px, transparent 5px),
      var(--birch);
    color:var(--bark);
    line-height:1.6;
    position:relative;
  }
  body::before{
    content:"";
    position:fixed; inset:0;
    pointer-events:none;
    z-index:1000;
    opacity:0.035;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode:multiply;
  }
  body::after{
    content:"";
    position:fixed; inset:0;
    pointer-events:none;
    z-index:999;
    opacity:0.5;
    mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg stroke='%233a332a' stroke-linecap='round' fill='none'%3E%3Cpath d='M12 24 q8 -2 16 0' stroke-width='2.4' opacity='0.55'/%3E%3Cpath d='M60 15 q10 -3 20 1' stroke-width='2' opacity='0.4'/%3E%3Cpath d='M140 40 q9 -2 18 0' stroke-width='2.6' opacity='0.5'/%3E%3Cpath d='M200 20 q7 -2 14 1' stroke-width='1.8' opacity='0.35'/%3E%3Cpath d='M30 110 q9 -2 17 1' stroke-width='2.2' opacity='0.45'/%3E%3Cpath d='M100 130 q11 -3 21 0' stroke-width='2.6' opacity='0.5'/%3E%3Cpath d='M180 150 q8 -2 16 1' stroke-width='2' opacity='0.4'/%3E%3Cpath d='M230 100 q7 -2 13 0' stroke-width='1.8' opacity='0.3'/%3E%3Cpath d='M50 200 q9 -2 18 0' stroke-width='2.3' opacity='0.45'/%3E%3Cpath d='M150 220 q10 -3 19 1' stroke-width='2.4' opacity='0.5'/%3E%3Cpath d='M220 230 q8 -2 15 0' stroke-width='1.9' opacity='0.35'/%3E%3C/g%3E%3C/svg%3E");
    background-size:260px 260px;
  }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
  }

  h1,h2,h3{
    font-family:'Fraunces', serif;
    font-weight:700;
    letter-spacing:-0.01em;
  }

  a{color:inherit;}
  button, .btn{
    font-family:'Work Sans', sans-serif;
    cursor:pointer;
    border:none;
  }
  :focus-visible{
    outline:3px solid var(--honey-bright);
    outline-offset:3px;
  }

  /* ===== NAV ===== */
  nav{
    position:sticky; top:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    padding:1.1rem 6vw;
    background:rgba(36,26,19,0.92);
    backdrop-filter:blur(6px);
    color:var(--bone);
  }
  nav .wordmark{
    font-family:'Fraunces', serif;
    font-weight:700;
    font-size:1.25rem;
    letter-spacing:0.02em;
  }
  nav .wordmark span{color:var(--honey-bright);}
  nav ul{
    list-style:none;
    display:flex;
    gap:1.8rem;
    font-size:0.92rem;
  }
  nav ul a{
    text-decoration:none; opacity:0.85; transition:opacity 0.2s;
    position:relative; padding-bottom:3px; white-space:nowrap;
  }
  nav ul a::after{
    content:"";
    position:absolute; left:0; bottom:0;
    width:0%; height:1.5px;
    background:var(--honey-bright);
    transition:width 0.25s ease;
  }
  nav ul a:hover::after{width:100%;}
  nav ul a:hover{opacity:1;}
  nav ul a.active{opacity:1; color:var(--honey-bright);}
  nav ul a.active::after{width:100%;}
  nav .nav-links{display:flex;}

  .nav-toggle{
    display:none;
    background:none; border:1px solid rgba(224,168,84,0.5); border-radius:4px;
    color:var(--honey-bright); font-size:1.3rem; line-height:1;
    padding:0.4rem 0.7rem; cursor:pointer;
  }

  @media (max-width:760px){
    nav{padding:1rem 5vw; position:relative; flex-wrap:nowrap;}
    .nav-toggle{display:block;}
    nav ul.nav-links{
      display:none;
      position:absolute; top:100%; left:0; right:0;
      flex-direction:column; gap:0;
      background:var(--bark);
      border-top:1px solid rgba(224,168,84,0.25);
      box-shadow:0 12px 24px rgba(0,0,0,0.4);
      max-width:none; overflow-x:visible; max-height:75vh; overflow-y:auto;
    }
    nav ul.nav-links.open{display:flex;}
    nav ul.nav-links li{width:100%; border-bottom:1px solid rgba(250,246,239,0.08);}
    nav ul.nav-links a{
      display:block; padding:0.95rem 6vw; font-size:0.95rem;
      white-space:normal;
    }
    nav ul.nav-links a::after{display:none;}
    nav ul.nav-links a.active{background:rgba(224,168,84,0.1);}
  }
  @media (max-width:420px){
    nav{padding:0.9rem 4vw;}
    nav .wordmark{font-size:1.05rem;}
  }

  /* ===== EXPLORE GRID (homepage section links) ===== */
  .explore{background:rgba(239,230,208,0.3);}
  .explore-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    gap:1rem; max-width:960px; margin:0 auto;
  }
  .explore-card{
    display:block; text-decoration:none;
    background:var(--bone); border:1px solid #e3d5ba; border-radius:6px;
    padding:1.4rem 1.1rem; text-align:center;
    transition:transform 0.2s ease, box-shadow 0.2s ease;
  }
  .explore-card:hover{transform:translateY(-4px); box-shadow:0 14px 26px rgba(74,46,30,0.18);}
  .explore-card .icon{font-size:1.7rem; margin-bottom:0.6rem;}
  .explore-card .label{font-family:'Fraunces', serif; font-weight:600; color:var(--walnut); font-size:1rem;}
  .explore-card .sub{font-size:0.78rem; color:#8a7960; margin-top:0.3rem;}

  /* ===== PAGE HEADER (subpage back button + title) ===== */
  .page-header{
    background:var(--bark);
    padding:2.2rem 6vw 1.6rem;
    text-align:center;
  }
  .back-btn{
    display:inline-flex; align-items:center; gap:0.4rem;
    color:var(--honey-bright); text-decoration:none;
    font-size:0.88rem; font-weight:600;
    margin-bottom:1.2rem;
    transition:transform 0.18s ease;
  }
  .back-btn:hover{transform:translateX(-3px);}
  .page-header h1{
    font-family:'Fraunces', serif; font-size:clamp(1.8rem, 5vw, 2.6rem);
    color:var(--bone);
  }
  .page-header p{
    color:#d8cdbc; margin-top:0.6rem; max-width:52ch; margin-left:auto; margin-right:auto;
    font-size:1rem; line-height:1.6;
  }

  /* ===== CAROUSEL ARROWS ===== */
  .carousel-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:38px; height:38px; border-radius:50%;
    background:rgba(36,26,19,0.75);
    border:1px solid rgba(224,168,84,0.4);
    color:var(--honey-bright);
    font-size:1.1rem; line-height:1;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; z-index:4;
    transition:background 0.2s ease, transform 0.2s ease;
  }
  .carousel-arrow:hover{background:rgba(36,26,19,0.95); transform:translateY(-50%) scale(1.08);}
  .carousel-arrow.prev{left:-6px;}
  .carousel-arrow.next{right:-6px;}
  @media (max-width:500px){
    .carousel-arrow{width:32px; height:32px; font-size:0.95rem;}
    .carousel-arrow.prev{left:-2px;}
    .carousel-arrow.next{right:-2px;}
  }

  /* ===== HERO ===== */
  .hero{
    position:relative;
    min-height:78vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:7rem 6vw 3.5rem;
    background:
      radial-gradient(ellipse at 78% 15%, #45301a 0%, transparent 55%),
      radial-gradient(circle 90px at 12% 18%, rgba(120,140,90,0.32), transparent 70%),
      radial-gradient(circle 60px at 85% 68%, rgba(63,75,44,0.3), transparent 70%),
      radial-gradient(circle 50px at 22% 82%, rgba(107,125,79,0.24), transparent 70%),
      repeating-linear-gradient(89deg,
        rgba(0,0,0,0.22) 0px, rgba(0,0,0,0.22) 2px,
        transparent 2px, transparent 7px,
        rgba(0,0,0,0.12) 7px, rgba(0,0,0,0.12) 9px,
        transparent 9px, transparent 19px),
      repeating-linear-gradient(93deg,
        rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px,
        transparent 1px, transparent 13px),
      repeating-linear-gradient(86deg,
        rgba(0,0,0,0.28) 0px, rgba(0,0,0,0.28) 1px,
        transparent 1px, transparent 41px),
      var(--bark);
    color:var(--bone);
    overflow:hidden;
  }
  @media (max-width:880px){
    .hero{min-height:auto; padding:5.5rem 6vw 3.5rem;}
  }
  .hero-copy{position:relative; z-index:2; max-width:760px;}
  .leaves{position:absolute; inset:0; overflow:hidden; z-index:1; pointer-events:none;}
  .leaf{
    position:absolute; top:-30px;
    font-size:1.1rem;
    opacity:0.55;
    animation:leafFall linear infinite;
  }
  @keyframes leafFall{
    0%{transform:translateY(0) translateX(0) rotate(0deg); opacity:0;}
    8%{opacity:0.6;}
    92%{opacity:0.5;}
    100%{transform:translateY(110vh) translateX(var(--drift, 40px)) rotate(340deg); opacity:0;}
  }
  @media (prefers-reduced-motion: reduce){
    .leaf{animation:none; display:none;}
  }
  .hero .eyebrow{
    font-size:0.8rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--honey-bright);
    margin-bottom:1.4rem;
    cursor:default;
    user-select:none;
    animation:eyebrowReveal 1.4s ease-out both;
  }
  @keyframes eyebrowReveal{
    0%{opacity:0; letter-spacing:0.5em; transform:translateY(-4px);}
    100%{opacity:1; letter-spacing:0.22em; transform:translateY(0);}
  }
  @media (prefers-reduced-motion: reduce){
    .hero .eyebrow{animation:none;}
  }
  .hero h1{
    font-size:clamp(2.6rem, 6vw, 5rem);
    line-height:0.98;
    color:var(--bone);
    text-shadow:0 4px 24px rgba(0,0,0,0.4);
  }
  .hero h1 em{
    font-style:italic;
    color:var(--honey-bright);
    text-shadow:0 4px 24px rgba(224,168,84,0.25);
  }
  .hero p.tagline{
    max-width:56ch;
    margin:1.6rem auto 2.4rem;
    font-size:1.2rem;
    line-height:1.7;
    color:#ecdfc8;
  }
  .hero .cta-row{
    display:flex; gap:1rem; flex-wrap:wrap; justify-content:center;
  }
  .tree-showcase{
    position:relative;
    display:grid;
    place-items:center;
    min-height:420px;
    padding:2rem 0;
  }
  .tree-showcase > *{grid-area:1 / 1;}
  .tree-showcase .glow{
    position:relative;
    width:360px; height:360px;
    background:radial-gradient(circle, rgba(107,125,79,0.28) 0%, rgba(201,138,62,0.18) 45%, transparent 72%);
    filter:blur(14px);
  }
  .tree-showcase svg{width:min(440px, 88vw); height:auto; position:relative;}
  @media (max-width:500px){
    .tree-showcase{min-height:320px;}
  }

  /* Live shop carousel */
  .shop-carousel{
    position:relative;
    width:340px; height:340px;
  }
  @media (max-width:880px){.shop-carousel{width:270px; height:270px;}}
  @media (max-width:400px){.shop-carousel{width:220px; height:220px;}}
  .shop-carousel-circle{
    position:relative;
    width:100%; height:100%;
    border-radius:50%;
    overflow:hidden;
    border:3px solid rgba(224,168,84,0.5);
    box-shadow:0 25px 50px rgba(0,0,0,0.5), inset 0 0 40px rgba(0,0,0,0.35);
    cursor:pointer;
    transition:transform 0.22s ease, box-shadow 0.22s ease;
  }
  .shop-carousel-circle:hover{transform:scale(1.04); box-shadow:0 30px 55px rgba(0,0,0,0.55), inset 0 0 40px rgba(0,0,0,0.35);}
  .shop-slide{
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
    padding:1.2rem;
    opacity:0;
    transform:scale(1.06);
    transition:opacity 0.7s ease, transform 0.7s ease;
  }
  .shop-slide.active{opacity:1; transform:scale(1);}
  .shop-slide .swatch{
    width:64px; height:64px; border-radius:50%;
    margin-bottom:0.8rem;
    box-shadow:inset 0 0 18px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.3);
  }
  .shop-slide .item-name{
    font-family:'Fraunces', serif; font-weight:600;
    color:var(--bone); font-size:1.05rem; margin-bottom:0.35rem;
  }
  .shop-slide .item-price{
    color:var(--honey-bright); font-weight:600; font-size:0.95rem;
    background:rgba(0,0,0,0.25);
    padding:0.2rem 0.7rem; border-radius:20px;
  }
  .shop-dots{
    display:flex; gap:0.4rem; justify-content:center;
    position:absolute; bottom:14px; left:0; right:0; z-index:3;
  }
  .shop-dots span{
    width:6px; height:6px; border-radius:50%;
    background:rgba(250,246,239,0.35);
    transition:background 0.3s ease, transform 0.3s ease;
  }
  .shop-dots span.active{background:var(--honey-bright); transform:scale(1.3);}

  /* Hover-pop on clickable things, site-wide */
  nav ul a, .wood-card, .gallery-card, .process-step, .btn-primary, .btn-secondary{
    transition:transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease, opacity 0.22s ease;
  }
  nav ul a:hover{transform:translateY(-1px) scale(1.06);}
  .wood-card:hover{transform:translateY(-3px) scale(1.015); box-shadow:0 16px 32px rgba(74,46,30,0.18);}
  .process-step{border-radius:6px; padding:0.4rem;}
  .process-step:hover{transform:translateY(-4px) scale(1.03);}
  .btn-primary{
    background:var(--honey-bright);
    color:var(--bark);
    padding:0.95rem 1.9rem;
    border-radius:2px;
    font-weight:600;
    font-size:0.95rem;
    letter-spacing:0.01em;
    text-decoration:none;
    display:inline-block;
    box-shadow:0 8px 20px rgba(201,138,62,0.25);
    transition:transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  }
  .btn-primary:hover{background:#f0bd6f; transform:translateY(-2px); box-shadow:0 12px 26px rgba(201,138,62,0.35);}
  .btn-secondary{
    background:transparent;
    color:var(--bone);
    border:1px solid rgba(250,246,239,0.35) !important;
    padding:0.95rem 1.9rem;
    border-radius:2px;
    font-weight:500;
    font-size:0.95rem;
    text-decoration:none;
    display:inline-block;
    transition:border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
  }
  .btn-secondary:hover{background:rgba(250,246,239,0.08); border-color:var(--bone) !important; transform:translateY(-2px);}

  /* ===== GROWTH RING SIGNATURE ===== */
  .ring{
    fill:none;
    stroke:var(--honey);
    stroke-width:1.4;
    opacity:0;
    transform-origin:center;
    stroke-dasharray:900;
    stroke-dashoffset:900;
  }
  .ring.drawn{
    animation:draw 1.1s ease forwards;
  }
  @keyframes draw{
    to{opacity:0.85; stroke-dashoffset:0;}
  }
  .rings-caption{
    text-align:center;
    font-size:0.8rem;
    color:#b7a892;
    margin-top:1rem;
    letter-spacing:0.04em;
  }
  .rings-subcaption{
    text-align:center;
    font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
    color:#8f8171; margin-top:0.4rem;
  }

  /* ===== SECTION SHARED ===== */
  section{padding:5.5rem 6vw;}
  @media (max-width:480px){
    section{padding:3.6rem 5.5vw;}
  }
  .section-head{max-width:640px; margin:0 auto 3rem;}
  .section-head .eyebrow{
    font-size:0.78rem; letter-spacing:0.18em; text-transform:uppercase;
    color:var(--moss); margin-bottom:0.7rem; display:block; font-weight:600;
  }
  .section-head h2{font-size:clamp(1.9rem, 4vw, 2.6rem); color:var(--walnut);}
  .section-head p{color:#4a3c2e; margin-top:0.9rem; font-size:1.06rem; line-height:1.7;}

  /* ===== STORY / WOOD TYPES ===== */
  .story{background:rgba(250,246,239,0.35);}
  .wood-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:1.6rem;
    max-width:920px; margin:0 auto;
  }
  @media (max-width:700px){.wood-grid{grid-template-columns:1fr;}}
  .wood-card{
    background:var(--parchment);
    border:1px solid #e3d5ba;
    border-radius:4px;
    padding:2rem;
  }
  .wood-card .tag{
    font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
    font-weight:600; color:var(--honey);
  }
  .wood-card h3{font-size:1.35rem; margin:0.4rem 0 0.7rem; color:var(--walnut);}
  .wood-card p{color:#4a3c2e; font-size:1rem; line-height:1.65;}
  .wood-card.hard{border-left:5px solid var(--walnut);}
  .wood-card.soft{border-left:5px solid var(--moss);}

  /* ===== GALLERY ===== */
  .gallery{background:rgba(239,230,208,0.3);}
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:1.4rem;
    max-width:1080px; margin:0 auto;
  }
  .gallery-card{
    aspect-ratio:4/5;
    border-radius:4px;
    background:
      repeating-linear-gradient(115deg, #d8c6a2 0px, #d8c6a2 8px, #cdb88f 8px, #cdb88f 16px);
    border:1.5px dashed #a98f63;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:1.2rem;
    color:#6b5a40;
  }
  .gallery-card .icon{font-size:1.8rem; margin-bottom:0.6rem;}
  .gallery-card .label{font-weight:600; font-size:0.92rem;}
  .gallery-card .sub{font-size:0.78rem; margin-top:0.3rem; color:#7d6c50;}
  .gallery-card{transition:transform 0.2s ease, box-shadow 0.2s ease;}
  .gallery-card:hover{transform:translateY(-4px); box-shadow:0 14px 28px rgba(74,46,30,0.15);}

  .gallery-card.has-photo{
    background:var(--bone); border:1px solid #e3d5ba;
    padding:0; overflow:hidden; justify-content:flex-start;
  }
  .gallery-card.has-photo img{
    width:100%; height:70%; object-fit:cover; display:block;
  }
  .gallery-card.has-photo .info{
    padding:0.8rem 1rem; width:100%; text-align:left;
  }
  .gallery-card.has-photo .label{color:var(--walnut); font-size:0.95rem;}
  .gallery-card.has-photo .sub{color:#7d6c50; margin-top:0.2rem;}
  .gallery-card.has-photo .status{
    margin-top:0.5rem; font-size:0.75rem; font-weight:600;
    color:var(--moss); text-transform:uppercase; letter-spacing:0.03em;
  }
  .gallery-card.has-photo .status.sold{color:#a44;}
  .gallery-card.has-photo .status.priced{color:var(--honey);}

  .gallery-filters{
    display:flex; flex-wrap:wrap; gap:0.6rem; justify-content:center;
    margin-bottom:1.8rem;
  }
  .filter-btn{
    background:transparent; border:1.5px solid var(--walnut); color:var(--walnut);
    padding:0.45rem 1.1rem; border-radius:999px; font-size:0.85rem; font-weight:600;
    cursor:pointer; transition:all 0.18s ease; font-family:inherit;
  }
  .filter-btn:hover{background:rgba(74,46,30,0.08);}
  .filter-btn.active{background:var(--walnut); color:var(--bone); border-color:var(--walnut);}
  .gallery-card[hidden]{display:none;}
  .gallery-card.has-photo{cursor:pointer;}

  /* ===== GALLERY MODAL ===== */
  .modal-overlay{
    position:fixed; inset:0; z-index:200;
    background:rgba(20,14,9,0.82);
    display:flex; align-items:center; justify-content:center;
    padding:1.2rem; overflow-y:auto;
  }
  .modal-overlay[hidden]{display:none;}
  .modal-box{
    background:var(--bone); border-radius:11px; width:100%;
    padding:1.6rem; position:relative; max-height:90vh; overflow-y:auto;
    animation:modalPop 0.22s ease;
  }
  @keyframes modalPop{
    from{opacity:0; transform:scale(0.94);}
    to{opacity:1; transform:scale(1);}
  }
  .modal-close{
    position:absolute; top:0.7rem; right:0.9rem; background:none; border:none;
    font-size:1.8rem; line-height:1; color:var(--walnut); cursor:pointer;
    z-index:2;
  }

  /* Neon/rainbow animated border around the WHOLE popup window — signals "you tapped this" */
  .modal-frame{
    padding:2.5px; border-radius:13px; width:100%; max-width:520px;
    background:linear-gradient(270deg, #ff2d6f, #ff9a3c, #f4e04d, #34e089, #29b6f6, #8c6bff, #ff2d6f);
    background-size:400% 400%;
    animation:rainbowMove 4s linear infinite;
    box-shadow:0 0 20px rgba(255,255,255,0.22);
  }
  @keyframes rainbowMove{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
  }
  .modal-photo{
    border-radius:8px; overflow:hidden; margin-bottom:1.1rem;
  }
  .modal-photo img{
    display:block; width:100%; max-height:52vh; object-fit:cover;
  }

  .modal-info h3{font-family:'Fraunces', serif; color:var(--walnut); font-size:1.3rem; margin-bottom:0.2rem;}
  .modal-category{color:#8f7c5c; font-size:0.85rem; font-weight:600; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:0.7rem;}
  .modal-desc{color:#4a3f30; line-height:1.5; margin-bottom:0.8rem;}
  .modal-status{
    display:inline-block; font-weight:700; font-size:0.85rem;
    color:var(--moss); text-transform:uppercase; letter-spacing:0.03em;
  }
  .modal-status.sold{color:#a44;}
  .modal-status.priced{color:var(--honey);}

  .modal-admin{
    margin-top:1.4rem; padding-top:1.1rem; border-top:1px dashed #cbb894;
    display:flex; flex-direction:column; gap:0.8rem;
  }
  .modal-admin[hidden]{display:none;}
  .admin-divider{font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:#9a8564;}
  .modal-admin label{display:flex; flex-direction:column; gap:0.3rem; font-size:0.85rem; font-weight:600; color:var(--walnut);}
  .modal-admin input, .modal-admin textarea, .modal-admin select{
    font-family:inherit; font-size:0.95rem; padding:0.55rem 0.7rem;
    border:1.5px solid #d3c2a0; border-radius:6px; background:#fff;
    color:#241a13; resize:vertical;
  }
  .modal-admin .btn-primary{align-self:flex-start;}

  /* ===== GLOSSY "POLYURETHANE" SHINE ===== */
  /* A soft permanent highlight plus a light sweep on hover/tap — like a clear coat finish */
  .gallery-card, .wood-card, .btn-primary, .process-step, .custom-box, .faq-item, .shop-slide .swatch{
    position:relative; overflow:hidden;
  }
  .gallery-card::before, .wood-card::before, .btn-primary::before, .process-step::before,
  .custom-box::before, .faq-item::before, .shop-slide .swatch::before{
    content:''; position:absolute; inset:0;
    background:linear-gradient(115deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.06) 20%, transparent 34%);
    pointer-events:none; z-index:2;
  }
  .gallery-card::after, .wood-card::after, .btn-primary::after, .process-step::after,
  .custom-box::after, .faq-item::after, .shop-slide .swatch::after{
    content:''; position:absolute; top:0; left:-75%; width:45%; height:100%;
    background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.55) 45%, rgba(255,255,255,0.1) 60%, transparent 100%);
    transform:skewX(-20deg); pointer-events:none; z-index:3;
    transition:left 0.75s ease;
  }
  .gallery-card:hover::after, .wood-card:hover::after, .btn-primary:hover::after, .process-step:hover::after,
  .custom-box:hover::after, .faq-item:hover::after, .shop-slide .swatch:hover::after{
    left:130%;
  }

  /* ===== ADD-ITEM ADMIN BUTTON + FORM ===== */
  .gallery-admin-bar{
    display:flex; justify-content:center; margin-bottom:1.4rem;
  }
  .add-item-form{
    display:flex; flex-direction:column; gap:0.8rem;
  }
  .add-item-form label{display:flex; flex-direction:column; gap:0.3rem; font-size:0.85rem; font-weight:600; color:var(--walnut);}
  .add-item-form input, .add-item-form textarea, .add-item-form select{
    font-family:inherit; font-size:0.95rem; padding:0.55rem 0.7rem;
    border:1.5px solid #d3c2a0; border-radius:6px; background:#fff;
    color:#241a13; resize:vertical;
  }

  /* ===== PROCESS STRIP ===== */
  .process{
    background:
      radial-gradient(circle 90px at 10% 20%, rgba(107,125,79,0.28), transparent 65%),
      radial-gradient(circle 70px at 90% 80%, rgba(63,75,44,0.24), transparent 65%),
      radial-gradient(circle 45px at 55% 30%, rgba(120,140,90,0.16), transparent 65%),
      repeating-linear-gradient(89deg,
        rgba(0,0,0,0.22) 0px, rgba(0,0,0,0.22) 2px,
        transparent 2px, transparent 7px,
        rgba(0,0,0,0.12) 7px, rgba(0,0,0,0.12) 9px,
        transparent 9px, transparent 19px),
      repeating-linear-gradient(93deg,
        rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px,
        transparent 1px, transparent 13px),
      var(--bark);
    color:var(--bone); padding:4rem 6vw;
  }
  .process-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:2.2rem;
    max-width:980px; margin:0 auto;
  }
  @media (max-width:760px){.process-grid{grid-template-columns:1fr;}}
  .process-step{text-align:center;}
  .process-step .num{
    font-family:'Fraunces', serif; font-style:italic;
    color:var(--honey-bright); font-size:1.1rem; margin-bottom:0.8rem;
  }
  .process-step h3{font-size:1.15rem; color:var(--bone); margin-bottom:0.5rem;}
  .process-step p{font-size:0.9rem; color:#c2b39b;}

  /* ===== CUSTOM ORDER ===== */
  .custom{
    background:
      radial-gradient(circle 100px at 85% 10%, rgba(107,125,79,0.26), transparent 65%),
      radial-gradient(circle 55px at 15% 75%, rgba(63,75,44,0.22), transparent 65%),
      repeating-linear-gradient(89deg,
        rgba(0,0,0,0.16) 0px, rgba(0,0,0,0.16) 2px,
        transparent 2px, transparent 7px,
        rgba(0,0,0,0.09) 7px, rgba(0,0,0,0.09) 9px,
        transparent 9px, transparent 19px),
      repeating-linear-gradient(93deg,
        rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px,
        transparent 1px, transparent 13px),
      var(--walnut);
    color:var(--bone);
  }
  .custom .section-head h2{color:var(--bone);}
  .custom .section-head .eyebrow{color:var(--honey-bright);}
  .custom .section-head p{color:#e0d3bd;}
  .custom-box{
    max-width:640px; margin:0 auto;
    background:rgba(250,246,239,0.06);
    border:1px solid rgba(250,246,239,0.18);
    border-radius:4px;
    padding:2.2rem;
    text-align:center;
  }
  .custom-box p{color:#e0d3bd; margin-bottom:1.4rem;}
  .custom-box a.email{
    font-family:'Fraunces', serif;
    font-size:1.3rem;
    color:var(--honey-bright);
    text-decoration:none;
    border-bottom:1px solid var(--honey-bright);
  }
  .custom-note{
    margin-top:1.6rem;
    font-size:0.82rem;
    color:#c2b39b;
  }
  /* ===== SIZING GUIDE ===== */
  .sizing{background:rgba(250,246,239,0.35);}
  .size-table-wrap{max-width:640px; margin:0 auto; overflow-x:auto;}
  .size-table{width:100%; border-collapse:collapse; background:var(--bone); border-radius:5px; overflow:hidden;}
  .size-table th, .size-table td{text-align:left; padding:0.85rem 1.1rem; font-size:0.92rem; border-bottom:1px solid #e3d5ba;}
  .size-table th{background:var(--walnut); color:var(--bone); font-weight:600;}
  .size-table tr:last-child td{border-bottom:none;}
  .size-table tr:hover td{background:rgba(201,138,62,0.08);}

  /* ===== CARE ===== */
  .care{background:rgba(239,230,208,0.3);}
  .canes.bark-bg{color:var(--bone); padding:5.5rem 6vw;}
  .canes.bark-bg .section-head h2{color:var(--bone);}
  .canes.bark-bg .section-head .eyebrow{color:var(--honey-bright);}
  .canes.bark-bg .section-head p{color:#d8cdbc;}
  .canes.bark-bg .wood-card{background:rgba(250,246,239,0.08); border-color:rgba(250,246,239,0.18);}
  .canes.bark-bg .wood-card p{color:#e0d3bd;}
  .canes.bark-bg .wood-card h3{color:var(--bone);}
  @media (max-width:480px){.canes.bark-bg{padding:3.6rem 5.5vw;}}

  /* ===== FAQ ===== */
  .faq{background:rgba(250,246,239,0.35);}

  /* ===== PET-FRIENDLY PAGE ===== */
  .pets-intro{background:rgba(250,246,239,0.35);}
  .pets-explainer{background:rgba(239,230,208,0.3);}
  .pets-woods{background:rgba(250,246,239,0.35);}
  .pets-finish.bark-bg{color:var(--bone); padding:5.5rem 6vw;}
  .pets-finish.bark-bg .section-head h2{color:var(--bone);}
  .pets-finish.bark-bg .section-head .eyebrow{color:var(--honey-bright);}
  .pets-finish.bark-bg .section-head p{color:#d8cdbc;}
  .pets-cats{background:rgba(239,230,208,0.3);}
  .pets-other{background:rgba(250,246,239,0.35);}
  .pets-safety{background:rgba(239,230,208,0.3);}
  @media (max-width:480px){
    .pets-intro, .pets-explainer, .pets-woods, .pets-finish.bark-bg, .pets-cats, .pets-other, .pets-safety{padding:3.6rem 5.5vw;}
  }
  .faq-list{max-width:640px; margin:0 auto;}
  .faq-item{
    background:var(--bone); border:1px solid #e3d5ba; border-radius:5px;
    padding:1rem 1.3rem; margin-bottom:0.8rem;
  }
  .faq-item summary{
    font-family:'Fraunces', serif; font-weight:600; font-size:1.02rem;
    color:var(--walnut); cursor:pointer; list-style:none;
    display:flex; align-items:center; justify-content:space-between;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{
    content:"+"; font-size:1.3rem; color:var(--honey); margin-left:1rem;
    transition:transform 0.2s ease;
  }
  .faq-item[open] summary::after{transform:rotate(45deg);}
  .faq-item p{margin-top:0.8rem; font-size:0.92rem; line-height:1.65; color:#4a3c2e;}

  /* ===== ORDER FORM ===== */
  .order-form{text-align:left; margin-bottom:0.4rem;}
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:0.9rem;}
  @media (max-width:520px){.form-row{grid-template-columns:1fr;}}
  .form-field{margin-bottom:1rem;}
  .form-field label{display:block; font-size:0.82rem; color:#d8cdbc; margin-bottom:0.4rem;}
  .form-field input, .form-field select, .form-field textarea{
    width:100%; padding:0.7rem 0.85rem;
    background:rgba(0,0,0,0.25); border:1px solid rgba(250,246,239,0.2);
    border-radius:3px; color:var(--bone); font-size:0.92rem; font-family:inherit;
  }
  .form-field textarea{resize:vertical;}
  .form-field input:focus, .form-field select:focus, .form-field textarea:focus{
    outline:2px solid var(--honey-bright); border-color:transparent;
  }
  .form-field select option{background:var(--walnut); color:var(--bone);}
  #orderMsg{
    font-size:0.85rem; margin-top:1rem; padding:0.7rem 0.9rem;
    border-radius:3px; display:none;
  }
  #orderMsg.show{display:block;}
  #orderMsg.error{background:rgba(180,60,50,0.18); color:#f0a898; border:1px solid rgba(180,60,50,0.3);}
  #orderMsg.success{background:rgba(107,125,79,0.22); color:#c8d6b0; border:1px solid rgba(107,125,79,0.4);}
  .veteran-banner{
    background:rgba(107,125,79,0.18);
    border:1px solid rgba(107,125,79,0.35);
    color:#e0d3bd;
    font-size:0.9rem;
    padding:0.9rem 1.1rem;
    border-radius:4px;
    text-align:center;
    margin-bottom:1.6rem;
  }
  .veteran-banner strong{color:var(--honey-bright);}
  .builder-step{
    font-family:'Fraunces', serif; font-size:1.15rem; color:var(--honey-bright);
    margin:1.8rem 0 1rem; padding-top:1.2rem; border-top:1px solid rgba(250,246,239,0.12);
  }
  .builder-step:first-of-type{margin-top:0; padding-top:0; border-top:none;}
  .details-toggle{
    width:100%; text-align:left;
    background:rgba(224,168,84,0.1); border:1px solid rgba(224,168,84,0.3);
    color:var(--honey-bright); font-size:0.9rem; font-weight:600;
    padding:0.75rem 1rem; border-radius:4px; cursor:pointer;
    margin-bottom:1.2rem; transition:background 0.2s ease;
  }
  .details-toggle:hover{background:rgba(224,168,84,0.18);}
  .details-panel{
    display:none;
    padding:1.2rem; margin-bottom:1.2rem;
    background:rgba(0,0,0,0.15); border-radius:6px;
    border:1px solid rgba(250,246,239,0.1);
  }
  .details-panel.open{display:block;}

  /* ===== REVIEWS PAGE ===== */
  .reviews-summary{background:var(--bark); text-align:center; padding:3rem 6vw 1rem;}
  .reviews-summary .section-head h2{color:var(--honey-bright); font-size:1.8rem;}
  .reviews-form-section{background:var(--walnut); padding-top:1rem;}
  .star-input{font-size:1.8rem; color:#5a4b3c; cursor:pointer; letter-spacing:0.1em;}
  .star-input span{transition:color 0.15s ease;}
  .star-input span.filled{color:var(--honey-bright);}
  .reviews-list{background:rgba(250,246,239,0.35);}
  .reviews-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:1.2rem; max-width:1000px; margin:0 auto;
  }
  .review-card{
    background:var(--bone); border:1px solid #e3d5ba; border-radius:5px;
    padding:1.4rem;
  }
  .review-stars{color:var(--honey); font-size:1.1rem; margin-bottom:0.5rem;}
  .review-comment{color:#4a3c2e; font-size:0.95rem; line-height:1.6; margin-bottom:0.8rem;}
  .review-meta{color:#8a7960; font-size:0.8rem;}
  .suggestions-section{background:var(--bark); padding-bottom:5rem;}

  .pay-warning{
    margin-top:1.6rem;
    background:rgba(180,60,50,0.16);
    border:1px solid rgba(200,90,70,0.35);
    color:#f0c4b8;
    font-size:0.85rem;
    line-height:1.55;
    padding:0.9rem 1.1rem;
    border-radius:4px;
    text-align:left;
  }
  .pay-confirm{
    display:flex; align-items:center; gap:0.6rem;
    justify-content:center;
    margin-top:1.1rem;
    font-size:0.88rem;
    color:#e0d3bd;
    cursor:pointer;
  }
  .pay-confirm input{width:16px; height:16px; accent-color:var(--honey-bright); cursor:pointer;}
  .pay-row{
    display:flex; gap:0.8rem; justify-content:center; flex-wrap:wrap;
    margin-top:1.6rem;
    transition:opacity 0.3s ease;
  }
  .pay-row.locked .pay-btn{
    pointer-events:none;
    opacity:0.4;
    filter:grayscale(0.6);
  }
  .pay-btn{
    padding:0.7rem 1.4rem;
    border-radius:3px;
    font-size:0.88rem; font-weight:600;
    text-decoration:none;
    transition:transform 0.18s ease, box-shadow 0.18s ease, opacity 0.3s ease, filter 0.3s ease;
  }
  .pay-btn.cashapp{background:#00d64f; color:#0a2e16;}
  .pay-btn.venmo{background:#3d95ce; color:#0a1f2e;}
  .pay-btn:hover{transform:translateY(-2px) scale(1.03); box-shadow:0 10px 22px rgba(0,0,0,0.3);}

  /* ===== FOOTER ===== */
  footer{
    background:
      radial-gradient(circle 70px at 20% 30%, rgba(107,125,79,0.2), transparent 65%),
      radial-gradient(circle 50px at 80% 60%, rgba(63,75,44,0.18), transparent 65%),
      repeating-linear-gradient(89deg,
        rgba(0,0,0,0.18) 0px, rgba(0,0,0,0.18) 2px,
        transparent 2px, transparent 7px,
        rgba(0,0,0,0.1) 7px, rgba(0,0,0,0.1) 9px,
        transparent 9px, transparent 19px),
      var(--bark);
    color:#8f8171;
    padding:3rem 6vw 2.2rem;
    text-align:center;
    font-size:0.85rem;
  }
  footer .wordmark{
    font-family:'Fraunces', serif;
    color:var(--bone);
    font-size:1.1rem;
    margin-bottom:0.6rem;
  }