/* ============ TOKENS ============ */
:root{
  --navy: #0E2A3D;
  --navy-deep: #081B27;
  --amber: #E8862E;
  --amber-deep: #C96A18;
  --crate-red: #C23B22;
  --porcelain: #F7F4ED;
  --paper: #FFFDF9;
  --slate: #5C6B73;
  --ink: #16242C;
  --line: rgba(14,42,61,0.12);
  --radius: 4px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  background:var(--porcelain);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
h1,h2,h3{font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.01em; color:var(--navy);}
em{font-style:italic; color:var(--amber-deep);}

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:999;
  opacity:0.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--amber-deep); font-weight:500; margin-bottom:14px;
}
.section-lede{color:var(--slate); font-size:1.05rem; max-width:520px; line-height:1.65;}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:var(--radius);
  font-weight:600; font-size:0.95rem; letter-spacing:0.01em;
  transition:transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.2s, color 0.2s;
  cursor:pointer; border:1.5px solid transparent; white-space:nowrap;
}
.btn-primary{background:var(--amber); color:var(--navy-deep);}
.btn-primary:hover{background:var(--amber-deep); color:#fff; transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(201,106,24,0.55);}
.btn-ghost{border-color:rgba(14,42,61,0.3); color:var(--navy);}
.btn-ghost:hover{border-color:var(--navy); background:rgba(14,42,61,0.05); transform:translateY(-2px);}
.btn-light{background:var(--paper); color:var(--navy-deep);}
.btn-light:hover{transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(0,0,0,0.3);}
.btn-lg{padding:16px 32px; font-size:1rem;}

/* ============ NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(247,244,237,0.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1280px; margin:0 auto; padding:16px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:32px;
}
.brand{display:flex; align-items:center; gap:13px; color:var(--navy);}
.brand-mark{color:var(--amber-deep); display:flex;}
.brand-text{
  font-family:'IBM Plex Mono', monospace; font-weight:500; font-size:1.3rem;
  letter-spacing:0.04em; color:var(--navy); display:flex; flex-direction:column; line-height:1.1;
}
.brand-sub{font-size:0.78rem; letter-spacing:0.2em; color:var(--amber-deep);}
.nav-links{display:flex; gap:36px; flex:1; justify-content:center;}
.nav-links a{font-size:0.92rem; font-weight:500; color:var(--navy); position:relative; padding:4px 0;}
.nav-links a::after{content:''; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:var(--amber); transition:width 0.25s var(--ease);}
.nav-links a:hover::after{width:100%;}
.nav-cta{flex-shrink:0;}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
.nav-toggle span{width:22px; height:2px; background:var(--navy); border-radius:2px;}

/* ============ HERO ============ */
.hero{
  position:relative; padding:170px 32px 100px; overflow:hidden;
  background:linear-gradient(180deg, var(--porcelain) 0%, #F1ECE0 100%);
}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-grid{
  position:absolute; inset:-10% -10%;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 70% 30%, rgba(0,0,0,0.5), transparent 65%);
}
.hero-inner{
  max-width:1280px; margin:0 auto; position:relative; z-index:1;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:center;
}
.hero-copy h1{
  font-size:clamp(2.6rem, 5vw, 4.4rem); line-height:1.02; margin-bottom:22px; font-weight:600;
}
.hero-lede{font-size:1.12rem; color:var(--slate); max-width:480px; margin-bottom:34px; line-height:1.65;}
.hero-actions{display:flex; gap:16px; margin-bottom:56px; flex-wrap:wrap;}
.hero-stats{display:flex; gap:44px;}
.stat{display:flex; flex-direction:column;}
.stat-num{font-family:'Fraunces', serif; font-size:2.1rem; font-weight:600; color:var(--navy);}
.stat-label{font-family:'IBM Plex Mono', monospace; font-size:0.7rem; letter-spacing:0.06em; color:var(--slate); text-transform:uppercase; margin-top:2px;}

/* ---- 3D crate hero scene ---- */
.hero-scene{
  perspective:1300px; height:420px; position:relative;
  display:flex; align-items:center; justify-content:center;
  overflow:visible;
}
.crate-stack{
  position:relative; width:280px; height:280px;
  transform-style:preserve-3d;
  animation:floatStack 7s ease-in-out infinite;
}
@keyframes floatStack{
  0%,100%{transform:translateY(0) rotateX(14deg) rotateY(-20deg);}
  50%{transform:translateY(-14px) rotateX(14deg) rotateY(-20deg);}
}
.crate{
  position:absolute; width:110px; height:110px; transform-style:preserve-3d;
}
.crate-a{ top:140px; left:20px; transform:translateZ(0px); }
.crate-b{ top:140px; left:140px; transform:translateZ(0px) scale(0.92); }
.crate-c{ top:20px; left:80px; transform:translateZ(0px) scale(0.92); }
.face{position:absolute; border:1.5px solid rgba(8,27,39,0.3); border-radius:2px;}
/* front: sits at z = +55 (half depth) */
.face.front{
  width:110px; height:110px; left:0; top:0;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 16px), linear-gradient(135deg, var(--amber) 0%, var(--amber-deep) 100%);
  box-shadow:inset 0 0 0 8px rgba(8,27,39,0.08);
  transform:translateZ(55px);
}
/* top: rotated flat to horizontal, pivoted on its bottom edge (which becomes the top-back edge of front) */
.face.top{
  width:110px; height:110px; left:0; top:-110px;
  background:linear-gradient(135deg, #F2A559, var(--amber));
  transform-origin:bottom center;
  transform:rotateX(90deg);
}
/* side: rotated to vertical depth plane, pivoted on its left edge (which becomes the right edge of front) */
.face.side{
  width:110px; height:110px; left:110px; top:0;
  background:linear-gradient(135deg, var(--amber-deep), #9E5410);
  transform-origin:left center;
  transform:rotateY(90deg);
}
.crate-b .face.front, .crate-b .face.top, .crate-b .face.side{filter:hue-rotate(180deg) saturate(0.6) brightness(0.95);}
.crate-c .face.front, .crate-c .face.top, .crate-c .face.side{filter:saturate(0.3) brightness(1.15);}

.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  width:26px; height:42px; border:1.5px solid rgba(14,42,61,0.35); border-radius:14px;
  display:flex; justify-content:center; padding-top:8px;
}
.scroll-cue span{width:4px; height:8px; background:var(--amber-deep); border-radius:2px; animation:scrollDot 1.8s infinite;}
@keyframes scrollDot{0%{opacity:1; transform:translateY(0);} 70%{opacity:0; transform:translateY(14px);} 100%{opacity:0;}}

/* ============ TRUST STRIP ============ */
.trust-strip{background:var(--navy); padding:26px 32px;}
.trust-inner{max-width:1280px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.trust-inner p{color:rgba(247,244,237,0.6); font-size:0.85rem; font-family:'IBM Plex Mono', monospace; letter-spacing:0.02em;}
.trust-marks{display:flex; gap:28px; flex-wrap:wrap;}
.trust-marks span{font-size:0.78rem; letter-spacing:0.1em; color:rgba(247,244,237,0.85); font-weight:600;}

/* ============ SECTION SHELL ============ */
.section{padding:120px 32px;}
.section-alt{background:var(--navy); color:var(--porcelain);}
.section-alt h2, .section-alt .eyebrow{color:var(--porcelain);}
.section-alt .eyebrow{color:var(--amber);}
.section-alt .section-lede{color:rgba(247,244,237,0.65);}
.section-inner{max-width:1280px; margin:0 auto;}
.section-head{max-width:640px; margin-bottom:64px;}
.section-head h2{font-size:clamp(2rem, 3.4vw, 2.8rem); margin-bottom:18px;}

/* ============ PRODUCT CATEGORY CRATES ============ */
.crate-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;
  perspective:1200px;
}
.crate-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:0; transform-style:preserve-3d; transition:transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
  cursor:default;
}
.crate-card-face{padding:34px 26px;}
.crate-card:hover{
  transform:rotateX(6deg) rotateY(-6deg) translateY(-8px) translateZ(10px);
  box-shadow:-14px 26px 40px -20px rgba(14,42,61,0.35), 0 0 0 1px var(--amber);
}
.crate-card-icon{
  width:56px; height:56px; border-radius:50%; background:var(--porcelain);
  display:flex; align-items:center; justify-content:center; color:var(--amber-deep);
  margin-bottom:20px; transition:background 0.3s, color 0.3s;
}
.crate-card:hover .crate-card-icon{background:var(--navy); color:var(--amber);}
.crate-card h3{font-size:1.18rem; margin-bottom:8px;}
.crate-card p{color:var(--slate); font-size:0.92rem; line-height:1.55;}

/* ============ WHO WE SERVE — rail ============ */
.serve-rail{display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:rgba(247,244,237,0.15); border-radius:var(--radius); overflow:hidden;}
.serve-item{
  background:var(--navy); padding:40px 28px; transition:background 0.3s;
  display:flex; flex-direction:column; gap:14px;
}
.serve-item:hover{background:#142F42;}
.serve-num{font-family:'IBM Plex Mono', monospace; color:var(--amber); font-size:0.85rem; letter-spacing:0.08em;}
.serve-item h3{color:var(--porcelain); font-size:1.3rem;}

/* ============ WHY CHOOSE US ============ */
.why-layout{display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:start;}
.why-copy h2{font-size:clamp(2rem, 3.4vw, 2.8rem); margin-bottom:18px;}
.why-copy .section-lede{margin-bottom:32px;}
.why-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.why-card{background:var(--paper); padding:32px 28px; transition:background 0.25s;}
.why-card:hover{background:#FBF8F0;}
.why-card h3{font-size:1.05rem; margin-bottom:10px; color:var(--navy);}
.why-card p{color:var(--slate); font-size:0.9rem; line-height:1.55;}

/* ============ CTA BANNER ============ */
.cta-banner{
  background:linear-gradient(120deg, var(--crate-red), var(--amber-deep));
  padding:90px 32px; text-align:center; position:relative; overflow:hidden;
}
.cta-banner-inner{max-width:680px; margin:0 auto; position:relative; z-index:1;}
.cta-banner h2{color:#fff; font-size:clamp(1.8rem, 3vw, 2.4rem); margin-bottom:14px;}
.cta-banner p{color:rgba(255,255,255,0.85); margin-bottom:32px; font-size:1.05rem;}

/* ============ FORM ============ */
.section-form{background:var(--porcelain);}
.form-layout{display:grid; grid-template-columns:0.8fr 1.2fr; gap:64px;}
.form-intro h2{font-size:clamp(2rem, 3.4vw, 2.6rem); margin-bottom:18px;}
.form-intro .section-lede{margin-bottom:28px;}
.form-points{display:flex; flex-direction:column; gap:12px;}
.form-points li{
  font-size:0.92rem; color:var(--navy); font-weight:500; padding-left:24px; position:relative;
}
.form-points li::before{content:'→'; position:absolute; left:0; color:var(--amber-deep); font-weight:700;}

.enquiry-form{
  background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:40px;
  display:flex; flex-direction:column; gap:20px;
}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.form-spacer{visibility:hidden;}
label{display:flex; flex-direction:column; gap:8px; font-size:0.82rem; font-weight:600; color:var(--navy);}
label.full{width:100%;}
input, select, textarea{
  font-family:'Inter', sans-serif; font-size:0.95rem; padding:12px 14px;
  border:1.5px solid var(--line); border-radius:4px; background:var(--porcelain); color:var(--ink);
  transition:border-color 0.2s, background 0.2s; font-weight:400;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--amber-deep); background:#fff;
}
textarea{resize:vertical; min-height:100px;}
.form-submit{margin-top:8px; align-self:flex-start;}
.form-success{
  display:none; color:#2A7A45; font-size:0.9rem; font-weight:600; margin-top:-6px;
}
.form-success.visible{display:block;}
.form-error{
  display:none; color:var(--crate-red); font-size:0.9rem; font-weight:600; margin-top:-6px;
}
.form-error.visible{display:block;}

/* ============ FOOTER ============ */
.footer{background:var(--navy-deep); color:rgba(247,244,237,0.75); padding:80px 32px 32px;}
.footer-inner{
  max-width:1280px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px;
  padding-bottom:48px; border-bottom:1px solid rgba(247,244,237,0.12);
}
.footer-brand .brand-text{color:var(--porcelain);}
.footer-brand p{margin-top:14px; font-size:0.9rem; color:rgba(247,244,237,0.5); max-width:240px;}
.footer-col h4{font-family:'IBM Plex Mono', monospace; font-size:0.75rem; letter-spacing:0.1em; color:var(--amber); text-transform:uppercase; margin-bottom:16px; font-weight:500;}
.footer-col p, .footer-col a{display:block; font-size:0.9rem; margin-bottom:10px; color:rgba(247,244,237,0.7); transition:color 0.2s;}
.footer-col a:hover{color:var(--amber);}
.footer-bottom{max-width:1280px; margin:0 auto; padding-top:28px; font-size:0.8rem; color:rgba(247,244,237,0.4);}

/* ============ RESPONSIVE ============ */
@media (max-width:1000px){
  .crate-grid{grid-template-columns:repeat(2, 1fr);}
  .hero-inner{grid-template-columns:1fr;}
  .hero-scene{height:300px; order:-1;}
  .why-layout, .form-layout{grid-template-columns:1fr; gap:40px;}
  .why-grid{grid-template-columns:1fr 1fr;}
  .serve-rail{grid-template-columns:repeat(2, 1fr);}
  .footer-inner{grid-template-columns:1fr 1fr; gap:36px;}
}
@media (max-width:720px){
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
  .nav-cta{display:none;}
  .hero{padding:140px 20px 70px;}
  .section{padding:80px 20px;}
  .crate-grid{grid-template-columns:1fr;}
  .serve-rail{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .form-spacer{display:none;}
  .hero-stats{gap:28px; flex-wrap:wrap;}
  .footer-inner{grid-template-columns:1fr; gap:32px;}
  .trust-inner{flex-direction:column; align-items:flex-start;}
}