/* Font Face Declarations */
@font-face {
  font-family: 'Brandon Text';
  src: url('/font/brandon_text.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Brandon Text';
  src: url('/font/brandon_text_medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Brandon Text';
  src: url('/font/brandon_text_bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Brandon Text';
  src: url('/font/brandon_text_black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* CSS Variables - Light Mode */
:root {
  --header-height: 5rem;
  --button-outline: rgba(69, 20, 0, 0.10);
  --badge-outline: rgba(69, 20, 0, 0.05);
  --opaque-button-border-intensity: -8;
  --elevate-1: rgba(69, 20, 0, 0.03);
  --elevate-2: rgba(69, 20, 0, 0.08);
  --background: hsl(0, 0%, 100%);
  --foreground: hsl(17, 100%, 14%);
  --border: hsl(0, 0%, 90%);
  --card: hsl(0, 0%, 98%);
  --card-foreground: hsl(17, 100%, 14%);
  --card-border: hsl(0, 0%, 94%);
  --primary: hsl(43, 90%, 37%);
  --primary-foreground: hsl(144, 61%, 98%);
  --muted-foreground: hsl(17, 60%, 35%);
  --accent: hsl(43, 15%, 88%);
  --font-sans: Inter, system-ui, sans-serif;
  --font-serif: 'Brandon Text', Inter, system-ui, sans-serif;
  --font-brandon: 'Brandon Text', Inter, system-ui, sans-serif;
}

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

/* ============================================
   PRELOADER
   Water fill animation on logo
   ============================================ */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  pointer-events: auto;
  overflow: visible;
}

.preloader::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsl(0, 0%, 100%);
}

.preloader--exit {
  pointer-events: none;
}

.preloader--exit::before {
  animation: preloader-bg-fade 0.5s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;
}

.preloader--exit .preloader-logo {
  animation: preloader-logo-exit 0.5s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;
}

@keyframes preloader-bg-fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes preloader-logo-exit {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100vh);
  }
}

.preloader-logo {
  position: relative;
  z-index: 10000;
  width: 23px;
  height: 80px;
}

.preloader-svg {
  width: 100%;
  height: 100%;
}

.logo-outline path {
  fill: rgba(172, 35, 24, 0.2);
}

.logo-fill path {
  fill: #ac2318;
}

.water-rect {
  animation: water-fill 2s ease-in-out forwards;
}

@keyframes water-fill {
  0% {
    y: 62.12;
  }
  100% {
    y: 0;
  }
}

/* ============================================
   SCROLL PERFORMANCE MODE
   Disables expensive effects during scroll
   ============================================ */
body.is-scrolling .hero-title::before,
body.is-scrolling .hero-subtitle::before {
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

body.is-scrolling .tile--active {
  transition: none;
}

body.is-scrolling .header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  background-color: var(--background);
  color: var(--foreground);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: clip;
}

/* Typography */
h1,
h2,
h4,
h5,
h6 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.2;
}

h3 {
  font-family: var(--font-brandon);
  font-weight: 700;
  line-height: 1.2;
}

p {
  font-family: var(--font-brandon);
  font-weight: 400;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

/* Header Styles */
.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-150%);
  z-index: 10000;
  margin: 0.5rem;
  padding: 0.75rem 1.25rem;
  background-color: var(--primary);
  color: var(--primary-foreground);
  font-family: var(--font-brandon);
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--primary-foreground);
  outline-offset: 2px;
}

.main-content:focus {
  outline: none;
}

.header {
  --header-offset-y: 0px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transform: translateY(var(--header-offset-y));
  will-change: transform;
}

.header-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

.logo-link {
  color: var(--foreground);
  transition: color 0.3s;
}

.logo-link:hover {
  color: #ac2318;
}

.logo {
  height: 2rem;
}

.nav-desktop {
  display: none;
  align-items: center;
  gap: 2rem;
}

.nav-link {
  color: var(--foreground);
  transition: color 0.3s;
  font-size: 1rem;
  font-family: var(--font-brandon);
  font-weight: 500;
}

.nav-link:hover {
  color: #ac2318;
}

.mobile-menu-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  color: var(--foreground);
}

.menu-icon,
.close-icon {
  width: 24px;
  height: 24px;
}

.close-icon {
  display: none;
}

.mobile-menu-button.active .menu-icon {
  display: none;
}

.mobile-menu-button.active .close-icon {
  display: block;
}

.mobile-menu {
  display: none;
  border-top: 1px solid var(--border);
  background-color: var(--background);
}

.mobile-menu.active {
  display: block;
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
}

.mobile-nav-link {
  text-align: left;
  font-size: 1.125rem;
  color: var(--foreground);
  transition: color 0.3s;
  padding: 0.5rem 0;
  font-family: var(--font-brandon);
  font-weight: 500;
}

.mobile-nav-link:hover {
  color: #ac2318;
}

/* Main Content */
.main-content {
  padding-top: 5rem;
}

/* Hero Section */
.hero-section {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Desktop-only video and mask positioning - wrapped to prevent affecting mobile/tablet */
@media (min-width: 1025px) {
  .hero-video {
    --parallax-offset-y: 0px;
    --center-x: 0;
    position: fixed;
    top: 10rem;
    left: 0;
    width: 100%;
    height: calc((100vw / 16) * 9);
    max-height: calc((1600px / 16) * 9);
    object-fit: cover;
    z-index: 1;
    transform: translateX(calc(var(--center-x) * -50%)) translateY(var(--parallax-offset-y));
    will-change: transform;
  }

  .hero-mask-wrapper {
    --mask-offset-y: 0px;
    --mask-offset-x: 0px;
    --mask-rotation: 0deg;
    --mask-scale: 1;
    position: fixed;
    top: 5rem;
    left: 0;
    width: 100%;
    height: calc((100vw / 16) * 9);
    max-height: calc((1600px / 16) * 9);
    z-index: 2;
    pointer-events: none;
    transform: translateY(var(--mask-offset-y)) translateX(var(--mask-offset-x)) rotate(var(--mask-rotation)) scale(var(--mask-scale));
    transform-origin: center bottom;
    will-change: transform;
    overflow: visible;
  }

  .grid-wrapper {
    --grid-offset-y: 0px;
    position: fixed;
    top: 5rem;
    left: 0;
    width: 100%;
    height: calc((100vw / 16) * 9);
    max-height: calc((1600px / 16) * 9);
    z-index: 3;
    pointer-events: none;
    transform: translateY(var(--grid-offset-y));
    transition: transform 150ms ease-out;
  }

  body.is-scrolling .grid-wrapper {
    transition: none;
  }
  
  .grid-overlay {
    display: block;
    position: absolute;
    width: 100%;
    shape-rendering: crispEdges;
    pointer-events: auto;
  }

  .tile {
    fill: transparent;
  }

  .tile--active {
    transition: fill-opacity 350ms ease-in-out;
    fill: url(#reveal-pattern);
    fill-opacity: 0;
  }

  .tile--active.tile--revealed {
    fill-opacity: 1;
  }

  .tile--hole {
    fill: transparent;
    pointer-events: none;
  }

  /* Hide mobile grid on desktop */
  .mobile-grid-wrapper {
    display: none;
  }
}

.hero-mask {
  --mask-scale-x: 1;
  --mask-scale-y: 1;
  --mask-opacity: 1;
  position: absolute;
  width: 100%;
  object-fit: cover;
  pointer-events: none;
  transform: scaleX(var(--mask-scale-x)) scaleY(var(--mask-scale-y));
  transform-origin: 79.5% 47.38%;
  opacity: var(--mask-opacity);
}

/* Desktop-only logo positioning - wrapped to prevent affecting mobile/tablet */
@media (min-width: 1025px) {
  .logo-wrapper {
    position: fixed;
    top: 5rem;
    right: 0;
    width: 100%;
    height: calc((100vw / 16) * 9);
    max-height: calc((1600px / 16) * 9);
    z-index: 5;
    pointer-events: none;
  }

  .logo-wrapper img {
    --parallax-offset-y: 0px;
    --logo-opacity: 0.05;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom right;
    opacity: var(--logo-opacity);
    transform: translateY(var(--parallax-offset-y));
  }
}

.hero-content {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
  user-select: none;
  width: 100%;
  max-width: 60rem;
  padding: 0 1.5rem;
  text-align: center;
}

.hero-title {
  --title-offset-y: 0px;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  color: #ac2318;
  font-family: var(--font-serif);
  opacity: 0;
  transform: translateY(var(--title-offset-y));
  position: relative;
}

.hero-title::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: transparent;
  z-index: -1;
  text-shadow:
    0 0 20px rgba(255, 255, 255, 0.95),
    0 0 40px rgba(255, 255, 255, 0.9),
    0 0 60px rgba(255, 255, 255, 0.8),
    0 0 80px rgba(255, 255, 255, 0.6);
}

.hero-subtitle {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--foreground);
  margin-bottom: 2rem;
  line-height: 1.4;
  font-family: var(--font-brandon);
  opacity: 0;
  position: relative;
}

.hero-subtitle::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: transparent;
  z-index: -1;
  text-shadow:
    0 0 2px rgba(255, 255, 255, 1),
    0 0 5px rgba(255, 255, 255, 1),
    0 0 10px rgba(255, 255, 255, 1),
    0 0 15px rgba(255, 255, 255, 1),
    0 0 20px rgba(255, 255, 255, 1),
    0 0 25px rgba(255, 255, 255, 1),
    0 0 30px rgba(255, 255, 255, 1),
    0 0 35px rgba(255, 255, 255, 0.9),
    0 0 40px rgba(255, 255, 255, 0.8);
}

.hero-title .char,
.hero-subtitle .char {
  display: inline-block;
  opacity: 0;
}

.hero-description {
  font-size: 1rem;
  color: var(--foreground);
  opacity: 0.9;
  max-width: 30rem;
  margin: 3rem 0 0 0;
  line-height: 1.6;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  font-family: var(--font-brandon);
  letter-spacing: 0.05em;
  background-color: transparent;
  color: var(--foreground);
  border: 2px solid var(--foreground);
  border-radius: 0.25rem;
  text-decoration: none;
  transition: all 0.3s;
  cursor: pointer;
}

.btn-hero:hover {
  background-color: var(--foreground);
  color: #FFF;
  border-color: var(--foreground);
}

/* Section Styles */
.section {
  padding: 5rem 0;
}

.section-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}


.section-title {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  color: #ac2318;
  font-family: var(--font-serif);
  position: relative;
}

.section-title.text-center {
  text-align: center;
}

.title-accent {
  position: absolute;
  width: 2.5rem;
  height: auto;
  left: -2.8rem;
  top: 82%;
  transform: translateY(-50%);
}

.section-description {
  font-size: 1rem;
  color: var(--foreground);
  opacity: 0.9;
  line-height: 1.6;
}

/* Purpose Section */
.purpose-wrapper {
  margin-top: 1000px;
}

.purpose-section {
  z-index: 5;
}

.purpose-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  justify-content: center;
  position: relative;
}

.purpose-chiplotle {
  position: absolute;
  left: calc(100% - 5rem);
  top: calc(100% - 5rem);
  height: 80px;
  width: auto;
  z-index: 15;
  transform: translate(-100%, -100%);
}

.purpose-content {
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  padding: 5rem;
  max-width: 56rem;
  width: 100%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  position: relative;
}

.purpose-text {
  font-size: 2rem;
  color: var(--foreground);
  line-height: 1.6;
  margin-bottom: 2rem;
  font-family: var(--font-brandon);
}

.purpose-text .word {
  display: inline-block;
  opacity: 0;
  transition: opacity 1s ease;
}

.purpose-text .word.loaded {
  opacity: 0.15;
}

.purpose-text .word.visible {
  opacity: 1;
}

.purpose-brand {
  font-weight: 700;
  text-transform: uppercase;
}

.purpose-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn-purpose {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  font-family: var(--font-brandon);
  letter-spacing: 0.05em;
  background-color: transparent;
  color: #ac2318;
  border: 2px solid #ac2318;
  border-radius: 0.25rem;
  text-decoration: none;
  transition: all 0.3s;
  cursor: pointer;
}

.btn-purpose:hover {
  background-color: #ac2318;
  color: #FFF;
  border-color: #ac2318;
}

/* Mobile only: Adjust purpose section styling */
@media (max-width: 699px) {
  .purpose-content {
    padding: 3rem;
  }
  
  .purpose-text {
    font-size: 1.5rem;
  }
}

/* Parallax Section */
.parallax-section {
  position: relative;
  margin-top: 0;
  padding: 0 2rem;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* Infinite Scrolling Image Banner
   Edge-to-edge viewport width, breaks out of max-width container
   Right-to-left continuous scroll with seamless loop */
.image-scroller {
  --scroller-gap: 1.5rem;
  --scroller-image-width: 800px;
  --scroller-speed: 30s;
  --scroller-parallax-y: 0px;
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  overflow-x: clip;
  overflow-y: visible;
  padding: 2rem 0;
}

.image-scroller-track {
  display: flex;
  gap: var(--scroller-gap);
  width: max-content;
  animation: image-scroll var(--scroller-speed) linear infinite;
}

.image-scroller-slide {
  flex-shrink: 0;
}

.scroller-image {
  display: block;
  width: var(--scroller-image-width);
  height: auto;
  border: 1rem solid #FFFFFF;
  object-fit: cover;
}

@keyframes image-scroll {
  0% {
    transform: translateX(0) translateY(var(--scroller-parallax-y));
  }
  100% {
    /* Move exactly half the track width (one full set of images) */
    transform: translateX(calc(-50% - var(--scroller-gap) / 2)) translateY(var(--scroller-parallax-y));
  }
}

/* Image scroller parallax offset controlled by JS */
.image-scroller {
  --scroller-parallax-y: 0px;
}

.image-scroller-track {
  transform: translateY(var(--scroller-parallax-y));
}

.parallax-intro {
  position: relative;
  z-index: 2;
  margin-top: -12rem;
  padding: 3rem;
  background-color: #FFFFFF;
  backdrop-filter: blur(12px);
  border-radius: 0.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  max-width: 600px;
}

.parallax-intro .section-title {
  text-align: left;
}

.parallax-intro .section-container {
  position: relative;
}

.parallax-intro .section-description {
  max-width: 30rem;
  text-align: left;
}

.parallax-item {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  padding: 3rem 0;
  gap: 3rem;
  margin-bottom: 0;
}

/* iPad/Tablet: Additional whitespace between video and Farm to Restaurant */
@media (min-width: 640px) and (max-width: 1024px) {
  .parallax-section {
    margin-top: 400px;
  }
  
  /* Reduce padding between parallax items on tablet */
  .parallax-item {
    padding: 1rem 0;
  }
}

/* Desktop: Additional whitespace between video and Farm to Restaurant */
@media (min-width: 1025px) {
  .parallax-section {
    margin-top: 50px;
  }

  /* Tighten spacing between parallax images on desktop */
  .parallax-item {
    margin-bottom: 9.375rem; /* 150px */
  }
}

.parallax-item-reverse {
  flex-direction: row-reverse;
}

.parallax-image-wrapper {
  position: relative;
  width: 50%;
  height: 50vh;
  border-radius: 0.5rem;
  flex-shrink: 0;
}

.parallax-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  will-change: transform;
  border-radius: 0.5rem;
}

.parallax-image-soil {
  background-image: url("/img/soil.webp");
}

.parallax-image-supplychain {
  background-image: url("/img/supplychain.webp");
}

.parallax-image-ingredients {
  background-image: url("/img/ingredients.webp");
}

.parallax-image-robotics {
  background-image: url("/img/robotics.webp");
}

.parallax-image-concept {
  background-image: url("/img/concept.webp");
}

.parallax-content {
  position: relative;
  z-index: 2;
  width: 50%;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.parallax-nextlines {
  position: absolute;
  z-index: 5;
  width: 32px;
  height: auto;
  bottom: 0;
  --text-box-half-width: calc((100vw - 4rem) / 2);
  --overlap: 22px;
  left: calc(50% - var(--text-box-half-width) - var(--overlap));
  pointer-events: none;
  will-change: transform;
}

@media (min-width: 768px) {
  .parallax-nextlines {
    width: 64px;
    --text-box-half-width: min(18rem, calc((100vw - 10rem) / 2));
    --overlap: 54px;
  }
}

/* Individual nextlines positioning per section */

/* Agriculture science (1st) - HIDDEN */
[data-testid="parallax-item-0"] .parallax-nextlines {
  display: none;
}

/* Supply chain (2nd) - 2rem from left edge of parent div, default y-position */
[data-testid="parallax-item-1"] .parallax-nextlines {
  left: 2rem;
}

/* Ingredient innovation (3rd) - HIDDEN */
[data-testid="parallax-item-2"] .parallax-nextlines {
  display: none;
}

/* Automation (4th) - default left overlap, start 150px higher */
[data-testid="parallax-item-3"] .parallax-nextlines {
  bottom: 150px;
}

/* Emerging food concepts (5th) - HIDDEN */
[data-testid="parallax-item-4"] .parallax-nextlines {
  display: none;
}

.parallax-text {
  background-color: #ac2318;
  backdrop-filter: blur(12px);
  padding: 2rem;
  border-radius: 0.5rem;
  width: 100%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  margin-top: 3rem;
}

/* Mobile: Stack vertically */
@media (max-width: 768px) {
  .parallax-item {
    flex-direction: column;
    min-height: auto;
    gap: 2rem;
  }
  
  .parallax-item-reverse {
    flex-direction: column;
  }
  
  .parallax-image-wrapper,
  .parallax-content {
    width: 100%;
  }
  
  .parallax-image-wrapper {
    height: 40vh;
  }
}

.parallax-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #FFF;
  margin-bottom: 1rem;
  font-family: var(--font-brandon);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.parallax-description {
  font-size: 1.125rem;
  color: #FFF;
  line-height: 1.6;
}

.portfolio-cta {
  position: relative;
  z-index: 10;
  margin-top: 7rem;
  width: 90vw;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  background-color: #AC2318;
  padding: 3rem 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.cta-text-wrapper {
  flex: 1 1 auto;
  text-align: center;
}

.cta-text {
  color: #FFF;
  font-size: 1.3rem;
  margin: 0;
}

.cta-button-wrapper {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
}

@media (min-width: 768px) {
  .portfolio-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }

  .cta-text-wrapper {
    text-align: left;
  }

  .cta-button-wrapper {
    justify-content: flex-end;
  }
}

.portfolio-cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  font-family: var(--font-brandon);
  letter-spacing: 0.05em;
  background-color: transparent;
  color: #FFF;
  border: 2px solid #FFF;
  border-radius: 0.25rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.3s;
  cursor: pointer;
}


.portfolio-cta .btn:hover {
  background-color: #FFF;
  color: #AC2318;
  border-color: #FFF;
}

/* Button Styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.375rem;
  transition: all 0.2s;
  min-height: 2.25rem;
}

.btn-primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
  position: relative;
  overflow: visible;
}

.btn-primary::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  transition: background-color 0.2s;
}

.btn-primary:hover::after {
  background-color: var(--elevate-1);
}

.btn-primary:active::after {
  background-color: var(--elevate-2);
}

.btn-arrow {
  margin-left: 0.5rem;
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s;
}

.btn-primary:hover .btn-arrow {
  transform: translateX(0.25rem);
}

/* Investment Strategy Section */
.investment-strategy-section {
  position: relative;
  margin: 0;
}

/* Video wrapper - contains video and overlay */
.inflection-video-wrapper {
  position: relative;
  width: 100%;
}

/* Video background for inflection section - full width, native aspect ratio */
.inflection-video-bg {
  display: block;
  width: 100%;
  height: auto;
}

/* Dark overlay for text readability - sized to match video */
.inflection-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.strategy-container {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 3rem 0 4rem;
  text-align: left;
  z-index: 2;
}

/* Red title and white description for video background readability */
.investment-strategy-section .section-title {
  color: #ac2318;
}

.investment-strategy-section .strategy-description {
  color: #fff;
}

.strategy-description {
  font-size: 1rem;
  color: var(--foreground);
  opacity: 0.9;
  line-height: 1.6;
  margin-top: 2rem;
  max-width: 30rem;
  text-align: left;
}

/* Page Section (Portfolio & Team) */
.page-section {
  padding: 5rem 0;
}

.page-header {
  text-align: center;
  margin-bottom: 4rem;
}

.page-title {
  --parallax-y: 0px;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  color: #ac2318;
  font-family: var(--font-serif);
  transform: translateY(var(--parallax-y));
  will-change: transform;
  opacity: 0;
}

.page-title-accent {
  width: 3rem;
  height: auto;
  display: inline-block;
  vertical-align: baseline;
  margin-right: 0;
  opacity: 0;
  transition: opacity 800ms ease-out;
}

.page-title-accent.fade-in {
  opacity: 1;
}

.page-subtitle {
  --parallax-y: 0px;
  font-size: 1.125rem;
  color: var(--foreground);
  max-width: 48rem;
  margin: 0 auto;
  transform: translateY(var(--parallax-y));
  will-change: transform;
  opacity: 0;
}

.page-title .char,
.page-subtitle .char {
  display: inline-block;
  opacity: 0;
}

/* Portfolio Grid */
.portfolio-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

.portfolio-card {
  background-color: #AC2318;
  border: 1px solid var(--card-border);
  border-radius: 0.5rem;
  padding: 2rem;
  transition: all 0.2s;
  position: relative;
  overflow: visible;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out, background-color 0.2s;
  display: flex;
  flex-direction: column;
}

.portfolio-card .card-description {
  flex: 1 1 auto;
}

.portfolio-card .portfolio-link {
  margin-top: auto;
  align-self: flex-start;
}

.portfolio-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.portfolio-card::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  z-index: 1;
  transition: background-color 0.2s;
}

.portfolio-card:hover::after {
  background-color: var(--elevate-1);
}

.portfolio-icon {
  width: 6rem;
  height: 6rem;
  background-color: #FFF;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.portfolio-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.5rem;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: #FFF;
  font-family: var(--font-brandon);
}

.card-description {
  font-size: 0.875rem;
  color: #FFF;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.portfolio-link {
  display: inline-block;
  font-size: 0.875rem;
  color: #FFF;
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.2s;
}

.portfolio-link:hover {
  opacity: 0.7;
}

.acquired-banner {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background-color: var(--primary);
  color: #FFF;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 2;
  font-family: var(--font-brandon);
}

/* Team Grid */
.team-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

.team-member {
  text-align: center;
}

.team-avatar {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  margin: 0 auto 1rem;
  object-fit: cover;
  background-color: hsla(43, 90%, 37%, 0.1);
}

.team-name {
  font-size: 1.17rem;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 0.25rem;
  font-family: var(--font-brandon);
}

.team-role {
  font-size: 0.875rem;
  color: var(--foreground);
  margin-bottom: 0.75rem;
}

.team-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
  transition: all 0.3s;
  margin-top: 0.5rem;
}

.team-linkedin:hover {
  background-color: var(--primary);
  color: #FFF;
}

/* Contact Page Styles */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  max-width: 48rem;
  margin: 0 auto;
  margin-top: 3rem;
}

.contact-item {
  text-align: left;
}

.contact-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  background-color: hsla(43, 90%, 37%, 0.1);
  border-radius: 50%;
  margin-bottom: 1.5rem;
}

.contact-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--primary);
}

.contact-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 1rem;
  font-family: var(--font-brandon);
}

.contact-detail {
  font-size: 1rem;
  color: var(--foreground);
  line-height: 1.6;
  margin-bottom: 0.25rem;
}

.contact-link {
  font-size: 1rem;
  color: #ac2318;
  transition: color 0.3s;
  display: inline-block;
  margin-top: 0.5rem;
}

.contact-link:hover {
  color: #ac2318;
  text-decoration: underline;
}

/* Footer Styles */
.footer {
  border-top: 1px solid #AC2318;
  background-color: #AC2318;
}

.footer-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 5rem 1.5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

.footer-logo {
  height: 2rem;
  margin-bottom: 1rem;
}

.footer-text {
  font-size: 0.875rem;
  color: #FFF;
  line-height: 1.5;
  font-family: var(--font-brandon);
}

.footer-heading {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #FFF;
  font-family: var(--font-brandon);
  letter-spacing: 2px;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-link {
  text-align: left;
  font-size: 0.875rem;
  color: #FFF;
  transition: color 0.3s;
  font-family: var(--font-brandon);
}

.footer-link:hover {
  color: #B68207;
}

.footer-contact-detail {
  font-size: 0.875rem;
  color: #FFF;
  margin-top: 0.75rem;
  font-family: var(--font-brandon);
}

.footer-bottom {
  padding: 2.5rem 1.5rem;
  background-color: #f2f2f2;
  text-align: center;
}

.footer-copyright {
  font-size: 0.875rem;
  color: #74625b;
  font-family: var(--font-brandon);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 2rem;
  margin-bottom: 1.5rem;
}

.footer-legal-item {
  display: inline-flex;
  align-items: center;
}

.footer-legal-link {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
  text-decoration: none;
  letter-spacing: normal;
  line-height: 1.5;
  font-family: var(--font-brandon);
  font-size: 0.875rem;
  font-weight: 400;
  color: #74625b;
  cursor: pointer;
  transition: color 0.3s;
}

.footer-legal-link:hover {
  color: #471400;
}

.footer-legal-link:focus-visible {
  outline: 2px solid #471400;
  outline-offset: 2px;
}

.privacy-choices-icon {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
}

/* Responsive Styles */
@media (min-width: 640px) {
  .logo {
    height: 2.5rem;
  }

  .hero-title {
    font-size: 3rem;
  }

  .hero-subtitle {
    font-size: 1.5rem;
  }

  .hero-description {
    font-size: 1.125rem;
  }

  .portfolio-cta {
    flex-direction: row;
    justify-content: flex-start;
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .nav-desktop {
    display: flex;
  }

  .mobile-menu-button {
    display: none;
  }

  .header-container {
    padding: 0 2rem;
  }

  .section-container {
    padding: 0 2rem;
  }

  .footer-container {
    padding: 5rem 2rem;
  }

  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-content {
    max-width: 65rem;
    padding: 0 2rem;
  }
}

@media (min-width: 1025px) {
  .hero-title {
    font-size: 8.5rem;
    letter-spacing: -.4rem;
    line-height: 7rem;
  }

  .section {
    padding: 8rem 0;
  }

  .parallax-intro {
    padding: 4rem;
    margin-top: -15rem;
    max-width: 700px;
  }

  .page-section {
    padding: 8rem 0;
  }

  .section-title {
    font-size: 5rem;
    letter-spacing: -.2rem;
    line-height: 4.5rem;
  }

  .section-description {
    font-size: 1.125rem;
  }

  .parallax-text {
    padding: 4rem;
  }

  .parallax-title {
    font-size: 1.2rem;
  }

  .page-title {
    font-size: 3rem;
  }

  .portfolio-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .team-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .portfolio-cta {
    margin-top: calc(8rem + 100px);
  }
}

@media (min-width: 1600px) {
  .header-container {
    max-width: 1600px;
  }

  .section-container {
    max-width: 1600px;
  }

  .footer-container {
    max-width: 1600px;
  }

  .hero-video {
    left: 50%;
    max-width: 1600px;
    max-height: calc((1600px / 16) * 9);
    transform: translateX(-50%) translateY(var(--parallax-offset-y));
  }

  .hero-mask-wrapper {
    top: 5rem;
    left: 50%;
    margin-left: -800px;
    width: 1600px;
  }

  .hero-mask {
    /* Keep base styles for alignment - no overrides needed */
  }

  .grid-wrapper {
    top: 5rem;
    left: 50%;
    margin-left: -800px;
    width: 1600px;
  }

  .logo-wrapper {
    max-width: 1600px;
    left: 50%;
    right: auto;
    margin-left: -800px;
  }

  .hero-content {
    max-width: 54rem;
    left: 50%;
    transform: translateX(-50%);
  }

  .hero-content h1 {
    font-size: 7.5rem;
  }

  .parallax-image-wrapper {
    max-width: 1600px;
  }
}

/* ============================================
   MOBILE & TABLET FIREWALL (≤1024px)
   All changes inside this block will ONLY affect
   screens 1024px wide or smaller, protecting
   desktop (>1024px) from any modifications
   ============================================ */
@media (max-width: 1024px) {

  /* Define shared viewport measurement for all hero elements
     This ensures logo, video, mask, and hero section use identical height
     Base value uses 100vh for broad browser support
     Progressive enhancement with @supports for newer viewport units */
  :root {
    --hero-viewport: calc(100vh - var(--header-height));
  }

  /* Use dvh (dynamic viewport height) if supported - better for mobile browsers */
  @supports (height: 100dvh) {
    :root {
      --hero-viewport: calc(100dvh - var(--header-height));
    }
  }

  /* Use svh (small viewport height) if supported - best for mobile, accounts for browser UI */
  @supports (height: 100svh) {
    :root {
      --hero-viewport: calc(100svh - var(--header-height));
    }
  }

  /* Prevent horizontal scrollbars from mask rotation/scaling
     Must apply to both html and body for iPhone Safari compatibility
     iPhone checks document.documentElement (html) for scroll width
     overflow-y: visible allows mask to extend beyond viewport bottom without clipping 
     CRITICAL: Use overflow-x: clip instead of hidden - clip prevents horizontal scroll
     but does NOT create a scrolling container, so sticky positioning still works */
  html,
  body {
    overflow-x: clip;
    overflow-y: visible;
    width: 100%;
  }

  /* COMPLETELY REMOVE 16:9 aspect ratio constraints on mobile/tablet
     Force hero to fill viewport height, not constrain by desktop aspect ratio
     Use height (not min-height) to ensure it fills the space
     overflow-y: visible allows scaled mask to extend vertically without clipping top
     overflow-x: clip prevents horizontal scrollbars from 20.5% right overflow without breaking sticky */
  .hero-section {
    aspect-ratio: auto !important;
    height: var(--hero-viewport);
    min-height: 0;
    overflow-x: clip;
    overflow-y: visible;
  }

  /* Video: Fixed positioning to fill from header to viewport bottom
     Rotated 90° CW for mobile/tablet - rotation swaps width/height axes
     Width becomes visual height after rotation, so use --hero-viewport for width
     Height becomes visual width after rotation, so use 100vw for height
     Centered vertically using translate transform
     IMPORTANT: Includes --parallax-offset-y so video scrolls with purpose section */
  .hero-video {
    --parallax-offset-y: 0px;
    position: fixed;
    top: calc(var(--header-height) + var(--hero-viewport) / 2);
    left: 50%;
    width: var(--hero-viewport);
    height: 100vw;
    max-width: none;
    max-height: none;
    z-index: 1;
    transform: translate(-50%, calc(-50% + var(--parallax-offset-y))) rotate(90deg);
    transform-origin: center center;
    object-fit: cover;
    /* Fixed-position hero stays glued to viewport during parallax;
       must not intercept taps/swipes once user scrolls past the hero. */
    pointer-events: none;
  }

  /* Remove all 16:9 height constraints from desktop CSS */
  .hero-mask-wrapper,
  .logo-wrapper {
    max-height: none !important;
  }

  /* Hide desktop grid and mobile grid on mobile/tablet for performance */
  .reveal-wrapper,
  .grid-wrapper,
  .mobile-grid-wrapper {
    display: none;
  }

  /* PERFORMANCE: Remove expensive text-shadow glows on mobile/tablet */
  .hero-title::before,
  .hero-subtitle::before {
    text-shadow: none !important;
  }

  /* Mask wrapper: Fixed positioning with symmetric vertical bleed
     Expands equally above and below to prevent clipping when mask scales to 2.4x
     The symmetric offset keeps the center point unchanged (preserves starting position)
     Bleed includes header height to ensure scaled mask has enough vertical headroom
     Uses flexbox to center the rotated mask, same approach as logo
     Responds to JS-driven scroll animations via custom properties
     Base rotation of 90deg CW (vertical) is applied here, JS adds delta rotation
     Transform order: translate, base rotation + delta, scale
     overflow: visible ensures scaled mask isn't clipped
     Increased max bleed to 700px for Safari compatibility on tall iPhones */
  .hero-mask-wrapper {
    --parallax-offset-y: 0px;
    --mask-offset-x: 0px;
    --mask-rotation: 0deg;
    --mask-scale-x: 1;
    --mask-scale-y: 1;
    --mobile-mask-bleed: clamp(calc(var(--header-height) + 280px), calc(var(--header-height) + var(--hero-viewport) * 0.75), calc(var(--header-height) + 700px));
    position: fixed;
    top: calc(var(--header-height) - var(--mobile-mask-bleed));
    bottom: calc(-1 * var(--mobile-mask-bleed));
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
    overflow: visible;
    -webkit-overflow-scrolling: touch;
    transform: translateY(var(--parallax-offset-y)) translateX(var(--mask-offset-x)) rotate(calc(90deg + var(--mask-rotation))) scaleX(var(--mask-scale-x)) scaleY(var(--mask-scale-y));
    transform-origin: center center;
    will-change: transform;
  }

  /* Mask image: Width fills available height, natural aspect ratio maintained
     No transform here - all rotation is handled by wrapper to avoid nested transforms */
  .hero-mask {
    display: block;
    width: var(--hero-viewport);
    will-change: transform, opacity;
  }

  /* Logo wrapper: Fixed positioning to GUARANTEE it fills from header to viewport bottom
     This works regardless of .hero-section's computed height
     Uses fixed positioning like video/mask on desktop, but positioned below header
     Responds to JS-driven scroll animations via --parallax-offset-y */
  .logo-wrapper {
    --parallax-offset-y: 0px;
    position: fixed;
    top: var(--header-height);
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    /* vertical center */
    justify-content: center;
    /* horizontal center */
    z-index: 2;
    transform: translateY(var(--parallax-offset-y));
    will-change: transform;
    /* Fixed-position hero overlay; never intercept taps/swipes on
       sections that scroll beneath it (e.g. the news scroller). */
    pointer-events: none;
  }

  /* Rotated 90° CW logo - MUST fill the full height from header bottom to viewport bottom
     Key insight: After 90° rotation, the pre-rotation WIDTH becomes the visual HEIGHT
     Force BOTH dimensions: width becomes visual height, height becomes visual width
     Do NOT use height: auto as it will size based on SVG aspect ratio
     Opacity controlled by JS during scroll animations */
  .logo-wrapper img {
    display: block;
    width: var(--hero-viewport);
    height: 100vw;
    transform: rotate(90deg);
    transform-origin: center center;
    opacity: var(--logo-opacity, 0.05);
  }

  /* Mobile breakpoint: < 768px (base styles for mobile and small tablets) */
  .hero-title {
    font-size: 4.5rem;
    line-height: 4rem;
    letter-spacing: -.2rem;
  }

  .hero-subtitle {
    font-size: 1.4rem;
  }

  /* Mobile: Increase H2 sizes by 30% */
  .section-title {
    font-size: 2.925rem;
    line-height: 2.8rem;
  }

  /* Purpose section: Mobile adjustments */
  .purpose-section {
    position: relative;
    z-index: 10;
  }

  .purpose-container {
    display: block;
  }

  .purpose-content {
    margin: 0 auto;
    z-index: 11;
    display: flex;
    flex-direction: column;
  }

  .purpose-text {
    order: 1;
  }

  .purpose-chiplotle {
    position: static;
    transform: none;
    display: block;
    margin-top: 0.5rem;
    margin-bottom: 2.5rem;
    margin-left: auto;
    margin-right: auto;
    height: 60px;
    order: 2;
  }

  .purpose-buttons {
    order: 3;
    flex-direction: column;
    width: 100%;
  }

  .btn-purpose {
    width: 100%;
  }

  .portfolio-cta .cta-button-wrapper {
    width: 100%;
  }

  .portfolio-cta .btn {
    width: 100%;
  }

  /* Mobile: Smaller images in scrolling banner */
  .image-scroller {
    --scroller-image-width: 560px;
    --scroller-gap: 1rem;
    --scroller-speed: 25s;
    padding: 1.5rem 0;
  }

  /* Mobile: Thinner white border */
  .scroller-image {
    border-width: 0.5rem;
  }

  /* Mobile: Position parallax-intro below the scroller initially */
  .parallax-intro {
    margin-top: 12rem;
    padding: 1.5rem;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Mobile: Reduced padding for investment strategy section */
  .investment-strategy-section {
    margin: 0;
  }

  /* Mobile: Video sizing for proper display */
  .inflection-video-bg {
    width: auto;
    height: 80vh;
    margin-left: -137vw;
  }

  /* Mobile: Strategy container positioning and parallax */
  .strategy-container {
    padding: 0 2rem;
    top: 120%;
    transform: translateY(calc(-10rem + var(--strategy-parallax-y, 0px)));
  }

  /* Mobile: Add more whitespace between video and Farm to Restaurant section */
  .parallax-section {
    margin-top: 50px;
    padding: 0 1rem;
    margin-left: 0;
    margin-right: 0;
  }

  /* Mobile: Remove padding from section containers */
  .section-container {
    padding: 0;
  }

  /* Article container is an exception: it must keep horizontal padding on
     mobile so the title, cover image, and body don't run edge-to-edge.
     Matches the footer's 1.5rem mobile padding for visual alignment. */
  .section-container.article-container {
    padding: 0 1.5rem;
  }

  /* Mobile: Tighten spacing between parallax items */
  .parallax-item {
    padding: 0.5rem 0;
    gap: 1rem;
  }

  /* Mobile/Tablet: Align nav menu items to the right while keeping left edges aligned */
  .mobile-nav {
    align-items: flex-end;
  }

  /* Mobile: Add left/right margin to contact grid */
  .contact-grid {
    margin: 0 2rem;
  }

  /* Mobile/Tablet: Ensure minimum font size of 1.125rem for readability */
  .hero-subtitle,
  .hero-description,
  .btn-hero,
  .btn,
  .portfolio-cta .btn,
  .card-description,
  .portfolio-link,
  .acquired-banner,
  .team-role,
  .footer-text,
  .footer-link,
  .footer-contact-detail,
  .footer-copyright,
  .section-description,
  .strategy-description {
    font-size: 1.125rem;
  }

  /* Mobile: Fix title-accent alignment to first line baseline when text wraps */
  .title-accent {
    top: 2rem;
    transform: none;
  }

  /* Mobile/Tablet: Match page accent size to homepage accent size */
  .page-title-accent {
    width: 2.5rem;
  }

  /* Mobile: Position second nextlines from right side */
  [data-testid="parallax-item-3"] .parallax-nextlines {
    left: auto;
    right: 3rem;
  }

  /* Large Phone/Small Tablet: ≥ 640px */
  @media (min-width: 640px) {
    /* Tablet: Double hero text sizes */
    .hero-title {
      font-size: 7rem;
      line-height: 6rem;
      letter-spacing: -.35rem;
    }

    .hero-subtitle {
      font-size: 2rem;
    }

    /* Tablet: Slightly larger images in scrolling banner */
    .image-scroller {
      --scroller-image-width: 700px;
      --scroller-gap: 1.25rem;
    }

    /* Tablet: Slightly thicker border than mobile */
    .scroller-image {
      border-width: 0.75rem;
    }

    /* Tablet: Use H2 homepage size for Portfolio, Team, and Contact H1 */
    .page-title {
      font-size: 2.925rem;
    }

    /* Tablet: Align title-accent to baseline of first line (H2 is 2.925rem) */
    .title-accent {
      top: 2.7rem;
      transform: none;
    }

    /* Tablet: Add more whitespace between video and Farm to Restaurant section */
    .parallax-section {
      margin-top: 200px;
    }

    /* Tablet: Position second nextlines from right side */
    [data-testid="parallax-item-3"] .parallax-nextlines {
      left: auto;
      right: 3rem;
    }

    /* Tablet: Add extra space between parallax section and portfolio CTA */
    .portfolio-cta {
      margin-top: calc(3rem + 80px);
    }
  }

  /* Tablet: ≥ 768px */
  @media (min-width: 768px) {
    .hero-content {
      max-width: 44rem;
    }
  }
}
/* ============================================
   NEWS PAGE — list grid + article view
   ============================================ */
.news-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}

.news-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background-color: #fff;
  border: 1px solid var(--card-border);
  border-radius: 0.5rem;
  overflow: hidden;
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.news-card-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: hsla(43, 90%, 37%, 0.08);
}

.news-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease-out;
}

.news-card:hover .news-card-image {
  transform: scale(1.04);
}

.news-card-body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.news-card-date {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ac2318;
  margin-bottom: 0.75rem;
  font-family: var(--font-brandon);
  font-weight: 600;
}

.news-card-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: #ac2318;
  margin: 0 0 0.75rem 0;
}

.news-card-summary {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--foreground);
  margin: 0 0 1.25rem 0;
  flex: 1;
}

.news-card-readmore {
  font-family: var(--font-brandon);
  font-size: 0.875rem;
  font-weight: 600;
  color: #ac2318;
  letter-spacing: 0.02em;
}

.news-loading,
.news-empty {
  text-align: center;
  font-size: 1rem;
  color: var(--foreground);
  opacity: 0.7;
  padding: 3rem 1rem;
  grid-column: 1 / -1;
}

/* ===== Single Article =====
   Article shares the site's standard section-container width (1280px / 1600px on
   wide displays) so its left/right edges align with the footer, header, and
   every other section. Long-form text blocks inside the body get a tighter
   reading width via .article-body so paragraphs stay readable. */
.article-container {
  /* Inherit max-width and padding from .section-container so the article's
     outer edges match the footer's outer edges exactly. */
}

.article-header {
  text-align: left;
  margin-bottom: 2.5rem;
}

.article-meta {
  font-family: var(--font-brandon);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ac2318;
  margin: 0 0 1rem 0;
  font-weight: 600;
}

.article-title {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.15;
  color: #ac2318;
  margin: 0 0 1rem 0;
}

.article-summary {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--foreground);
  margin: 0;
  opacity: 0.85;
}

.article-cover {
  width: 100%;
  margin: 0 0 2.5rem 0;
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: hsla(43, 90%, 37%, 0.08);
}

.article-cover img {
  width: 100%;
  height: auto;
  display: block;
}

.article-body {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--foreground);
  /* Comfortable reading width for long-form text. The outer container still
     extends to the footer's edges; only the prose inside is constrained. */
  max-width: 50rem;
}

.article-body .article-h2 {
  font-family: var(--font-serif);
  font-size: 1.875rem;
  line-height: 1.2;
  color: #ac2318;
  margin: 2.75rem 0 1rem 0;
}

.article-body .article-h3 {
  font-family: var(--font-brandon);
  font-size: 1.375rem;
  font-weight: 700;
  margin: 2.25rem 0 0.75rem 0;
  color: var(--foreground);
}

.article-body .article-h4,
.article-body .article-h5,
.article-body .article-h6 {
  font-family: var(--font-brandon);
  font-weight: 700;
  margin: 1.75rem 0 0.5rem 0;
  color: var(--foreground);
}

.article-body .article-p {
  margin: 0 0 1.25rem 0;
}

.article-body a {
  color: #ac2318;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-body .article-list {
  margin: 0 0 1.5rem 1.5rem;
  padding: 0;
}

.article-body .article-list li {
  margin-bottom: 0.5rem;
}

.article-body .article-quote {
  border-left: 3px solid var(--primary);
  margin: 2rem 0;
  padding: 0.5rem 0 0.5rem 1.5rem;
  font-style: italic;
  color: var(--foreground);
}

.article-body .article-quote p {
  margin: 0 0 0.5rem 0;
  font-size: 1.125rem;
}

.article-body .article-quote-cite {
  display: block;
  font-style: normal;
  font-size: 0.875rem;
  opacity: 0.7;
  font-family: var(--font-brandon);
}

.article-body .article-figure {
  margin: 2rem 0;
}

.article-body .article-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.5rem;
}

.article-body .article-figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  text-align: center;
  opacity: 0.7;
  font-family: var(--font-brandon);
}

.article-body .article-delimiter {
  border: 0;
  border-top: 1px solid var(--card-border);
  margin: 2.5rem auto;
  width: 4rem;
}

.article-body .article-code {
  background-color: hsla(43, 90%, 37%, 0.08);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  font-size: 0.9rem;
  margin: 1.5rem 0;
}

.article-body .article-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  margin: 2rem 0;
  border-radius: 0.5rem;
  overflow: hidden;
}

.article-body .article-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.article-back-wrapper {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--card-border);
}

.article-back-link {
  font-family: var(--font-brandon);
  font-size: 0.9375rem;
  color: #ac2318;
  text-decoration: none;
  font-weight: 600;
}

.article-back-link:hover {
  opacity: 0.7;
}

/* Responsive — match existing breakpoints */
@media (min-width: 640px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1025px) {
  .news-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .article-title {
    font-size: 3rem;
  }

  .article-body {
    font-size: 1.125rem;
  }
}

/* ============================================
   HOMEPAGE LATEST NEWS SCROLLER
   ============================================ */
.home-news-section {
  background: #ffffff;
  padding: 5rem 0;
}

.home-news-container {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.home-news-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.home-news-view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Brandon Text', 'Inter', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ac2318;
  text-decoration: none;
  padding-bottom: 0.5rem;
  transition: color 0.2s, gap 0.2s;
}
.home-news-view-all:hover {
  color: #ac2318;
  gap: 0.75rem;
}

.home-news-scroller-wrapper {
  position: relative;
}

.home-news-scroller {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #d6c0ad transparent;
  padding: 0.5rem 0.25rem 1.5rem;
  margin: 0 -0.25rem;
}
.home-news-scroller::-webkit-scrollbar { height: 6px; }
.home-news-scroller::-webkit-scrollbar-track { background: transparent; }
.home-news-scroller::-webkit-scrollbar-thumb {
  background: #d6c0ad;
  border-radius: 3px;
}

.home-news-card {
  flex: 0 0 320px;
  max-width: 320px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e8d9cc;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.home-news-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(71, 20, 0, 0.08);
  border-color: #d6c0ad;
  text-decoration: none;
}

.home-news-card-image-wrapper {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #faf6f1;
  overflow: hidden;
}
.home-news-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.home-news-card:hover .home-news-card-image {
  transform: scale(1.04);
}

.home-news-card-body {
  padding: 1.25rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.home-news-card-date {
  font-family: 'Brandon Text', 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ac2318;
  margin: 0 0 0.5rem;
}

.home-news-card-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 700;
  color: #471400;
  margin: 0 0 0.625rem;
}

.home-news-card-summary {
  font-family: 'Brandon Text', 'Inter', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #6b4530;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-news-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e8d9cc;
  color: #471400;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(71, 20, 0, 0.1);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  z-index: 2;
}
.home-news-arrow:hover {
  background: #ac2318;
  border-color: #ac2318;
  color: #ffffff;
}
.home-news-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: #ffffff;
  color: #471400;
  border-color: #e8d9cc;
}
.home-news-arrow-prev { left: -0.5rem; }
.home-news-arrow-next { right: -0.5rem; }

.home-news-arrow-visible { display: flex; }

.home-news-loading,
.home-news-empty {
  font-family: 'Brandon Text', 'Inter', sans-serif;
  color: #ac2318;
  font-size: 0.9375rem;
  padding: 2rem 0;
  margin: 0;
}

@media (max-width: 768px) {
  .home-news-section { padding: 3.5rem 0; }
  .home-news-card { flex: 0 0 280px; max-width: 280px; }
  .home-news-arrow-visible { display: none; }
}

/* ===== Motion Pause Control (WCAG 2.2.2) ===== */
.motion-toggle {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background-color: #AC2318;
  color: #FFF;
  border: 1px solid #AC2318;
  cursor: pointer;
  transition: opacity 0.2s, visibility 0.2s;
}

.motion-toggle.motion-toggle--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.motion-toggle:hover {
  opacity: 0.9;
}

.motion-toggle:focus-visible {
  outline: 3px solid #471400;
  outline-offset: 2px;
}

.motion-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

.motion-toggle .motion-icon-play {
  display: none;
}

body.motion-paused .motion-toggle .motion-icon-play {
  display: block;
}

body.motion-paused .motion-toggle .motion-icon-pause {
  display: none;
}

/* Freeze the marquee when the user pauses motion */
body.motion-paused .image-scroller-track {
  animation-play-state: paused;
}

/* ===== Reduced Motion Preference ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .image-scroller-track {
    animation: none !important;
  }
}