diff --git a/public/images/components/Logo.jsx b/public/images/components/Logo.jsx
index 2d21b69..1b354b8 100644
--- a/public/images/components/Logo.jsx
+++ b/public/images/components/Logo.jsx
@@ -3,36 +3,27 @@ import * as React from "react";
 const SvgIcon = (props) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="122"
-    height="30"
+    width="1803"
+    height="488"
     fill="none"
-    viewBox="0 0 122 30"
+    viewBox="0 0 1803 488"
   >
-    <mask
-      id="a"
-      width="30"
-      height="30"
-      x="0"
-      y="0"
-      maskUnits="userSpaceOnUse"
-      style={{ maskType: "luminance" }}
-    >
-      <path fill="#fff" d="M29.926 0H0v30h29.926z"></path>
-    </mask>
-    <g fill="#48774B" fillOpacity="0.6" 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>
-      <path d="M20.253 27.803c4.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 27.803c4.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="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 fill="#245527" clipPath="url(#a)">
+      <circle cx="200" cy="144" r="100" fillOpacity="0.7"></circle>
+      <circle cx="100" cy="244" r="100" fillOpacity="0.7"></circle>
+      <circle cx="300" cy="244" r="100" fillOpacity="0.7"></circle>
+      <circle cx="270.71" cy="314.71" r="100" fillOpacity="0.7"></circle>
+      <circle cx="129.29" cy="314.71" r="100" fillOpacity="0.7"></circle>
+      <circle cx="200" cy="344" r="100" fillOpacity="0.7"></circle>
+      <circle cx="129.29" cy="173.29" r="100" fillOpacity="0.7"></circle>
+      <circle cx="270.71" cy="173.29" r="100" fillOpacity="0.7"></circle>
+      <path d="M620.4 387 498 107h56.4l109.2 253.2h-32.4L741.6 107h52l-122 280zm291.138-163.6h139.202v42.8H911.538zm4 120h158.002V387H863.538V107h204.402v43.6H915.538zM1171.51 387V107h122.4c30.4 0 57.06 5.867 80 17.6 22.93 11.733 40.8 28 53.6 48.8q19.2 31.2 19.2 73.6 0 42-19.2 73.6c-12.8 20.8-30.67 37.067-53.6 48.8-22.94 11.733-49.6 17.6-80 17.6zm52-44h68c21.06 0 39.2-4 54.4-12 15.46-8 27.33-19.2 35.6-33.6 8.53-14.4 12.8-31.2 12.8-50.4 0-19.467-4.27-36.267-12.8-50.4-8.27-14.4-20.14-25.6-35.6-33.6-15.2-8-33.34-12-54.4-12h-68zm274.96 44 126-280h51.2l126.4 280h-54.4l-108.4-252.4h20.8l-108 252.4zm58-64.8 14-40.8h151.2l14 40.8z"></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>
+    <defs>
+      <clipPath id="a">
+        <path fill="#fff" d="M0 0h1803v488H0z"></path>
+      </clipPath>
+    </defs>
   </svg>
 );
 
diff --git a/src/app/story/page.jsx b/src/app/story/page.jsx
index 4aff5bc..12b373a 100644
--- a/src/app/story/page.jsx
+++ b/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 />
     </>
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
index 623534d..1cdcc8e 100644
--- a/src/components/Button.jsx
+++ b/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:
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index b79a823..e6ec0d4 100644
--- a/src/components/Header.jsx
+++ b/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,
     }
   )
diff --git a/src/components/Hero2.jsx b/src/components/Hero2.jsx
index 4e1a113..ee957e9 100644
--- a/src/components/Hero2.jsx
+++ b/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
diff --git a/src/components/Logo.jsx b/src/components/Logo.jsx
index 25fd8d6..af77d27 100644
--- a/src/components/Logo.jsx
+++ b/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>
diff --git a/src/components/NavLink.jsx b/src/components/NavLink.jsx
index 5f7fb0f..99e46f2 100644
--- a/src/components/NavLink.jsx
+++ b/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>
diff --git a/src/components/StorySticky.jsx b/src/components/StorySticky.jsx
index ba9200f..9244a26 100644
--- a/src/components/StorySticky.jsx
+++ b/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