@font-face {
      font-family: 'Cowboy Outlaw';
      src: url('../fonts/Cowboy Outlaw Textured.otf') format('opentype'),
           url('../fonts/Cowboy Outlaw Textured.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

    :root{
      --ink:#f5f3ed;
      --ink-muted:#ddd2c4;
      --bg:#211e19;
      --panel:#2f2a23;
      --border:#4d443a;
      --brand:#527a55;
      --accent:#d9b180;
      --gold:#e8cb91;
      --rust:#b5764d;
      --sand:#eadfce;
      --sidebar: 300px;
      --maxw: 1100px;
      --radius: 18px;
      --radius-sm: 14px;
      --radius-lg: 24px;
      --gap: clamp(14px,2.8vw,26px);
      --gutter: 32px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:var(--bg);
      background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
      color:var(--ink);
      font-size:17px;
      font-family:"Cutive Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      line-height:1.65;
    }


    .app{min-height:100dvh}
    nav.sidebar{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:50;width:var(--maxw);display:flex;justify-content:center;transition:transform 0.3s ease;pointer-events:none}
    .sidebar-inner{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;padding:0.75rem var(--gutter);position:relative;background:rgba(47,42,35,0.5);border:1px solid rgba(77,68,58,0.6);border-radius:18px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");backdrop-filter:blur(10px);box-shadow:0 4px 20px rgba(0,0,0,0.4);pointer-events:auto}
    .brand{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);display:flex;justify-content:center;align-items:center;flex-shrink:0;order:2}
    .logo-img{height:50px;width:auto;display:block;filter:brightness(0) saturate(100%) invert(85%) sepia(17%) saturate(631%) hue-rotate(350deg) brightness(102%) contrast(92%);transition:filter 0.3s ease}
    .brand a:hover .logo-img,.brand a:focus-visible .logo-img{filter:brightness(0) saturate(100%) invert(79%) sepia(13%) saturate(891%) hue-rotate(347deg) brightness(101%) contrast(90%)}
    .logo-text{font-family:"Work Sans", system-ui, sans-serif;font-weight:800;font-size:20px;letter-spacing:0.1em;color:var(--gold);text-transform:uppercase}
    .nav-container{display:contents}
    .nav{display:flex;gap:8px;margin:0;flex-wrap:wrap;flex:1;max-width:40%}
    .nav-left{order:1;justify-content:flex-end}
    .nav-right{order:3;justify-content:flex-start}
    .nav a{color:var(--sand);text-decoration:none;padding:6px 16px;border-radius:10px;white-space:nowrap}
    .nav a:hover,.nav a:focus-visible{background:#3a332b;outline:none}
    .nav a[aria-current="page"]{background:transparent}
    .cta{background:transparent;color:var(--accent)}
    .sidebar-footer{display:none}
    .enquire-sticky{display:none}


    main{margin-left:0;}

    section{padding:clamp(40px,8vw,80px) 20px}
    .wrap{max-width:var(--maxw);margin:0 auto}
    h1,h2{font-family:"Cowboy Outlaw", "Work Sans", system-ui, sans-serif;margin:0 0 8px;line-height:1.18;letter-spacing:0.1em;color:var(--sand)}
    h1{font-size:clamp(28px,4.6vw,56px)}
    h2{font-size:clamp(22px,3.2vw,36px)}
    .muted{color:var(--ink-muted)}

    .hero{min-height:100vh;padding:clamp(100px,15vw,180px) 20px clamp(60px,10vw,120px);background:linear-gradient(rgba(40,36,32,0.85), rgba(47,42,35,0.85)), url('../images/sara-nudaveritas-KLN43FtySms-unsplash.jpg');background-size:cover;background-position:center;position:relative;overflow:hidden;filter:contrast(1.15) saturate(0.9);display:flex;align-items:center;justify-content:center}
    .hero::before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E");pointer-events:none}
    .hero::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.3) 100%);pointer-events:none}

    .hero .wrap{max-width:800px;text-align:center;position:relative;z-index:5}
    .hero-copy{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,4vw,32px)}
    .hero-logo{width:clamp(200px,40vw,400px);height:auto;filter:brightness(0) saturate(100%) invert(85%) sepia(17%) saturate(631%) hue-rotate(350deg) brightness(102%) contrast(92%)}
    .hero-separator{width:clamp(60px,10vw,100px);height:2px;background:linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);opacity:0.6}
    .hero-copy .tag{display:inline-block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);background:rgba(217,177,128,.18);padding:8px 16px;border:1px solid var(--accent);border-radius:999px;backdrop-filter:blur(10px)}
    .hero-copy h1{max-width:600px;margin:0;font-size:clamp(36px,6vw,72px);font-weight:800;background:linear-gradient(135deg, var(--sand) 0%, var(--gold) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
    .hero-copy p{margin:0;max-width:500px;font-size:clamp(16px,2.2vw,20px);color:var(--ink-muted);line-height:1.6}
    .actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:8px}
    .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:var(--radius);border:1px solid var(--rust);background:rgba(47,42,35,.8);color:var(--sand);text-decoration:none;font-weight:600;backdrop-filter:blur(10px);transition:all 0.2s ease}
    .btn:hover,.btn:focus-visible{border-color:var(--accent);background:rgba(47,42,35,.95);transform:translateY(-1px);outline:none}
    .btn.secondary{border-style:dashed;opacity:.9}

    .products{background:#24201b;position:relative}
    .products::before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");pointer-events:none}
    .products .wrap{position:relative;z-index:1}
    .products .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:calc(var(--gap) + 6px)}
    .card{grid-column:span 12;background:#38322a;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
    .media{aspect-ratio:4/3;background:#322b23;display:grid;place-items:center;color:#7e857f;position:relative;overflow:hidden}
    .media::before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.12'/%3E%3C/svg%3E");pointer-events:none;z-index:2}
    .media img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s ease}
    .card:hover .media img{transform:scale(1.05)}
    .stamp{position:absolute;bottom:12px;right:12px;padding:6px 10px;border:1px solid var(--gold);color:var(--gold);font-weight:800;border-radius:8px;transform:rotate(-3deg);background:rgba(47,41,33,.85);z-index:2}
    .body{display:flex;justify-content:space-between;gap:12px;padding:14px 16px;align-items:baseline}
    .meta{font-size:13px}
    .code{font-size:12px;color:var(--ink-muted)}

    .band{background:#2b241d;border-block:1px solid var(--border)}
    .quote{font-size:clamp(18px,2.4vw,26px);line-height:1.5;color:var(--sand)}
    .attribution{color:var(--ink-muted);text-align:right}

    .video-section{background:#262018;border-bottom:1px solid var(--border)}
    .video-container{margin-top:var(--gap)}
    .video-placeholder{
      aspect-ratio:16/9;
      background:#322b23;
      border:1px solid var(--border);
      border-radius:var(--radius);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:16px;
      cursor:pointer;
      transition:all 0.3s ease;
      position:relative;
      overflow:hidden;
      max-width:800px;
      margin:0 auto;
    }
    .video-placeholder:hover{
      border-color:var(--accent);
      background:#3a332b;
      transform:translateY(-2px);
    }
    .play-button{
      width:80px;
      height:80px;
      background:rgba(217,177,128,.15);
      border:2px solid var(--accent);
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:24px;
      color:var(--accent);
      transition:all 0.3s ease;
    }
    .video-placeholder:hover .play-button{
      background:rgba(217,177,128,.25);
      transform:scale(1.1);
    }
    .video-placeholder p{
      margin:0;
      font-size:18px;
      color:var(--sand);
    }
    .video-placeholder small{
      margin:0;
      font-size:14px;
    }

    .gallery{background:none}
    .gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
    .shot{aspect-ratio:16/10;background:#322b23;border:1px solid var(--border);border-radius:var(--radius);display:grid;place-items:center;color:#a89f91;overflow:hidden;cursor:pointer;transition:transform 0.2s ease;position:relative}
    .shot::before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.12'/%3E%3C/svg%3E");pointer-events:none;z-index:2}
    .shot img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s ease}
    .shot:hover{transform:translateY(-4px)}
    .shot:hover img{transform:scale(1.1)}

    .about{background:#242018}

    .contact{background:linear-gradient(rgba(40,36,32,0.7), rgba(47,42,35,0.7)), url('../images/dunedinMap.png');background-size:cover;background-position:center;position:relative}
    .contact::before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");pointer-events:none}
    .contact .wrap{position:relative;z-index:1}
    .contact h2{text-align:center;margin-bottom:clamp(16px,3vw,24px)}
    .contact p{text-align:center;margin-bottom:clamp(24px,4vw,40px)}
    
    .enquiry-form{max-width:600px;margin:0 auto;background:rgba(47,42,35,.6);padding:clamp(24px,4vw,40px);border-radius:var(--radius);border:1px solid var(--border);backdrop-filter:blur(10px)}
    .form-group{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
    .form-group label{font-family:"Work Sans", system-ui, sans-serif;font-weight:600;color:var(--sand);font-size:14px;letter-spacing:0.02em}
    .form-group input,.form-group textarea{padding:14px 16px;border-radius:10px;border:1px solid var(--border);background:rgba(58,52,44,.8);color:var(--ink);font-family:"Cutive Mono", ui-monospace, monospace;font-size:15px;transition:all 0.2s ease}
    .form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--accent);background:rgba(58,52,44,.95);box-shadow:0 0 0 3px rgba(217,177,128,.1)}
    .form-group textarea{resize:vertical;min-height:120px;line-height:1.6}
    .form-group input::placeholder,.form-group textarea::placeholder{color:var(--ink-muted);opacity:0.7}
    
    .form-submit{text-align:center;margin-top:8px}
    .form-submit .btn{font-size:16px;padding:16px 32px;background:rgba(58,52,44,.9);border-color:var(--accent)}

    footer{padding:24px 16px;color:var(--ink-muted);text-align:center;background:#1c1915}


    @media (min-width: 760px){
      .card{grid-column:span 4}
    }
    @media (max-width: 980px){
      nav.sidebar{width:calc(100% - 40px);max-width:var(--maxw)}
      .sidebar-inner{padding:0.65rem 20px;gap:10px}
      .logo-img{height:42px}
      .nav{gap:4px;max-width:45%}
      .nav a{padding:6px 12px;font-size:13px;white-space:nowrap}
      .hero{padding:clamp(50px,8vw,100px) 20px}
      .actions{gap:12px}
      .enquiry-form{padding:clamp(20px,3vw,32px)}
      .form-group input,.form-group textarea{font-size:16px}
      .mobile-cta{position:fixed;bottom:12px;right:12px;z-index:60}
    }
    .hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px;z-index:100}
    .hamburger span{display:block;width:24px;height:2px;background:var(--sand);transition:all 0.3s ease;border-radius:2px}
    .hamburger.active span:nth-child(1){transform:rotate(45deg) translate(7px, 7px)}
    .hamburger.active span:nth-child(2){opacity:0}
    .hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(7px, -7px)}

    @media (max-width: 768px){
      nav.sidebar{width:calc(100% - 24px);top:12px;max-width:500px}
      .sidebar-inner{flex-direction:row;padding:0.75rem 1rem;gap:0;border-radius:14px;background:rgba(47,42,35,0.65);justify-content:space-between;align-items:center}
      .brand{position:static;transform:none;order:1;margin:0;padding:0;border:none}
      .logo-img{height:36px}
      .hamburger{display:flex;order:3}
      .nav-container{display:block;position:absolute;top:100%;left:0;right:0;margin-top:8px;background:rgba(47,42,35,0.95);border:1px solid rgba(77,68,58,0.6);border-radius:14px;backdrop-filter:blur(10px);padding:0;max-height:0;overflow:hidden;opacity:0;transition:all 0.3s ease;box-shadow:0 4px 20px rgba(0,0,0,0.4)}
      .nav-container.active{max-height:300px;opacity:1;padding:12px}
      .nav{position:static;flex-direction:column;gap:4px;max-width:100%;flex:none;padding:0;background:transparent;border:none;box-shadow:none;max-height:none;opacity:1;overflow:visible;margin:0}
      .nav-left,.nav-right{order:unset;justify-content:stretch;width:100%;margin:0;flex-direction:column;gap:4px}
      .nav a{padding:12px 16px;font-size:14px;flex:0 0 auto;width:100%;text-align:left}
      .nav a:hover,.nav a:focus-visible{background:#3a332b}
    }
    @media (max-width: 640px){
      .sidebar-inner{padding:0.75rem 16px}
      .logo-text{font-size:16px}
      .gallery-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width: 480px){
      .gallery-grid{grid-template-columns:1fr}
    }