ok

src/app/story/page.jsx

@@ -16,13 +16,12 @@ export default function OurStory() {
   return (
     <>
       <Header />
-      <main className="bg-[#FEFFF6]">
+      <main>
         <StorySticky>
           <Hero3 />
           <Hero4 />
           <Hero5 />
         </StorySticky>
-        <Team />
       </main>
       <Footer />
     </>

src/components/Button.jsx

@@ -27,7 +27,7 @@ const variantStyles = {
     slate:
       'ring-white text-white hover:text-slate-300 hover:ring-slate-300 active:bg-slate-100 active:text-slate-200 focus-visible:outline-gold-600 focus-visible:ring-slate-300',
     white:
-      'ring-white text-white hover:ring-slate-300 active:ring-slate-200 active:text-slate-100 focus-visible:outline-white',
+      'ring-bg-darkbrown text-bg-darkbrown hover:ring-primary-olive hover:text-primary-olive active:ring-primary-olive active:text-primary-olive focus-visible:outline-bg-darkbrown',
   },
   link: {
     slate:

src/components/Header.jsx

@@ -27,7 +27,7 @@ function MobileNavIcon({ open }) {
   return (
     <svg
       aria-hidden="true"
-      className="h-3.5 w-3.5 overflow-visible stroke-slate-700"
+      className="h-3.5 w-3.5 overflow-visible stroke-bg-darkbrown"
       fill="none"
       strokeWidth={2}
       strokeLinecap="round"
@@ -81,15 +81,11 @@ function MobileNavigation() {
 
 export function Header() {
   const pathname = usePathname()
-  const isHomepage = pathname === '/'
   const isStoryPage = pathname === '/story'
-  const isExperiencesPage = pathname === '/experiences'
   
   const headerClasses = clsx(
+    'bg-bg-sand',
     {
-      'bg-transparent': isHomepage || isExperiencesPage,
-      'bg-[#1e0f01]': !isHomepage && !isStoryPage && !isExperiencesPage,
-      'bg-transparent backdrop-blur-sm': isStoryPage,
       'fixed top-0 left-0 right-0 z-50': isStoryPage,
     }
   )

src/components/Hero2.jsx

@@ -12,10 +12,10 @@ export function Hero2() {
     })
   }
   return (
-    <div className="relative w-full overflow-hidden -mt-20">
+    <div className="relative w-full overflow-hidden mt-0">
       {/* Background Video - Extended to cover header */}
       <video
-        className="w-full h-[90vh] object-cover block relative z-0"
+        className="w-full h-auto object-cover block relative z-0"
         autoPlay
         loop
         muted

src/components/Logo.jsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 const SvgIcon = (props) => (
-  <svg
+<svg
     xmlns="http://www.w3.org/2000/svg"
     width="122"
     height="30"
@@ -17,9 +17,9 @@ const SvgIcon = (props) => (
       maskUnits="userSpaceOnUse"
       style={{ maskType: "luminance" }}
     >
-      <path fill="#48774B" d="M29.926 0H0v30h29.926z"></path>
+      <path fill="#fff" d="M29.926 0H0v30h29.926z"></path>
     </mask>
-    <g fill="#48774B" fillOpacity="0.8" mask="url(#a)">
+    <g fill="#48774B" fillOpacity="0.7" mask="url(#a)">
       <path d="M14.963 15c4.132 0 7.482-3.358 7.482-7.5S19.095 0 14.963 0 7.481 3.358 7.481 7.5s3.35 7.5 7.482 7.5"></path>
       <path d="M7.482 22.5c4.132 0 7.481-3.358 7.481-7.5s-3.35-7.5-7.481-7.5S0 10.858 0 15s3.35 7.5 7.482 7.5"></path>
       <path d="M22.444 22.5c4.132 0 7.482-3.358 7.482-7.5s-3.35-7.5-7.482-7.5-7.481 3.358-7.481 7.5 3.35 7.5 7.481 7.5"></path>
@@ -28,7 +28,8 @@ const SvgIcon = (props) => (
       <path d="M14.963 30c4.132 0 7.482-3.358 7.482-7.5s-3.35-7.5-7.482-7.5-7.482 3.358-7.482 7.5 3.35 7.5 7.482 7.5"></path>
       <path d="M9.673 17.197c4.132 0 7.481-3.358 7.481-7.5s-3.35-7.5-7.481-7.5-7.482 3.358-7.482 7.5 3.35 7.5 7.482 7.5"></path>
       <path d="M20.253 17.197c4.132 0 7.482-3.358 7.482-7.5s-3.35-7.5-7.482-7.5-7.482 3.358-7.482 7.5 3.35 7.5 7.482 7.5"></path>
-    </g>    <path
+    </g>
+    <path
       fill="#48774B"
       d="m47.525 24-7.65-17.5H43.4l6.825 15.825H48.2L55.1 6.5h3.25L50.725 24zm18.196-10.225h8.7v2.675h-8.7zm.25 7.5h9.875V24H62.721V6.5h12.775v2.725h-9.525zM81.97 24V6.5h7.65q2.85 0 5 1.1t3.35 3.05 1.2 4.6q0 2.625-1.2 4.6-1.2 1.95-3.35 3.05t-5 1.1zm3.25-2.75h4.25q1.975 0 3.4-.75 1.45-.75 2.225-2.1.8-1.35.8-3.15 0-1.826-.8-3.15-.774-1.35-2.225-2.1-1.425-.75-3.4-.75h-4.25zM102.404 24l7.875-17.5h3.2l7.9 17.5h-3.4l-6.775-15.775h1.3L105.754 24zm3.625-4.05.875-2.55h9.45l.875 2.55z"
     ></path>

src/components/NavLink.jsx

@@ -4,7 +4,7 @@ export function NavLink({ href, children }) {
   return (
     <Link
       href={href}
-      className="inline-block px-2 py-1 text-sm tracking-wide text-white hover:text-primary-olive transition-colors duration-200"
+      className="inline-block px-2 py-1 text-sm tracking-wide text-bg-darkbrown hover:text-primary-olive transition-colors duration-200"
     >
       {children}
     </Link>

src/components/StorySticky.jsx

@@ -50,15 +50,15 @@ export default function StorySticky({ children }) {
   }, [children]);
 
   return (
-    <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-0 lg:py-12">
+    <section className="mx-auto max-w-7xl px-4 lg:px-0 py-0 lg:py-12">
       {/* Mobile: render as-is */}
       <div className="lg:hidden">{children}</div>
 
       {/* Desktop: 2-col layout with sticky media */}
-      <div className="hidden lg:grid lg:grid-cols-12 lg:gap-8" ref={containerRef}>
+      <div className="hidden lg:grid lg:grid-cols-12 lg:gap-12" ref={containerRef}>
         {/* Sticky left media */}
         <div className="relative lg:col-span-6">
-          <div className="sticky top-28 h-[75vh] rounded-2xl overflow-hidden shadow-lg">
+          <div className="sticky top-0 h-screen overflow-hidden">
             <div className="absolute inset-0">
               {sections.map((s, i) => (
                 <div