/* =========================================================
   LUTHER PLASTICS, GLOBAL DESIGN SYSTEM
   Brand source of truth: Luther Plastics Brand Guidelines 2026
   Colours:  Luther Green #004739 (primary) · Green #237428
             Resource Gold #D1AB59 · Luther Black #000000 · White
   Type:     Montserrat (headings) · Clash Display (body/website)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Manrope:wght@500;600;700;800&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&display=swap');

:root{
  /* --- Brand colours (exact, from guideline) --- */
  --lp-green:        #004739; /* Luther Green, primary */
  --lp-green-2:      #237428; /* Green, secondary */
  --lp-gold:         #D1AB59; /* Resource Gold, accent */
  --lp-black:        #000000; /* Luther Black */
  --lp-white:        #FFFFFF;

  /* --- Derived tints/shades (tonal ramp of Luther Green, for UI only) --- */
  --lp-green-900:    #00332A;
  --lp-green-700:    #0B5442;
  --lp-green-500:    #1F6E5A;
  --lp-green-300:    #7FA79A;
  --lp-green-100:    #DCE9E4;
  --lp-green-50:     #F2F7F5;
  --lp-gold-600:     #B58C3E;
  --lp-gold-200:     #EFDDB2;

  /* --- Functional tokens --- */
  --color-bg:         #FFFFFF;
  --color-bg-alt:      var(--lp-green-50);
  --color-bg-dark:     var(--lp-green);
  --color-text:        #101915;
  --color-text-muted:  #4B5D57;
  --color-text-on-dark: #FFFFFF;
  --color-text-on-dark-muted: #C7DAD3;
  --color-border:      #E1E9E6;
  --color-border-dark: rgba(255,255,255,0.16);
  --color-accent:      var(--lp-gold);
  --color-success:     var(--lp-green-2);
  --color-danger:      #B3261E;

  /* --- Typography --- */
  --font-heading: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Clash Display', 'Montserrat', 'Segoe UI', Arial, sans-serif;

  --fs-h1: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --fs-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  --fs-h4: 1.25rem;
  --fs-lead: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.75rem;

  /* --- Spacing / layout --- */
  --container-max: 1240px;
  --container-pad: 1.25rem;
  --section-pad-y: clamp(3rem, 2.4rem + 3vw, 6rem);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(0,20,14,0.06);
  --shadow-md: 0 12px 32px rgba(0,20,14,0.10);
  --shadow-lg: 0 24px 60px rgba(0,20,14,0.16);
  --transition: 220ms cubic-bezier(.4,0,.2,1);
  --header-h: 76px;

  /* --- Motion system: three easing "flavours" used contextually, not
     one transition for everything. Smooth = prominent/large elements,
     spring = playful nav/pill interactions, crisp = utility controls. --- */
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-crisp: cubic-bezier(0, 0, 0.2, 1);
  --dur-smooth: 480ms;
  --dur-spring: 320ms;
  --dur-crisp: 220ms;
}

@media (prefers-color-scheme: dark){
  /* Site is authored as a light, premium manufacturing brand by design
     (per brand guidelines). We keep a single light theme intentionally,
     but ensure dark-surface brand sections (header, footer, hero) already
     use var(--lp-green) so nothing looks broken on dark OS themes. */
}

/* ---------------------------------------------------------
   RESET
   --------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
/* No CSS scroll-behavior here on purpose: Lenis (assets/js/motion.js) now
   owns smooth scrolling. Layering native CSS smoothing underneath a JS
   smooth-scroll library is Lenis's own documented conflict, every one of
   its per-frame scrollTo() calls would get double-smoothed on top of its
   own easing, which reads as sluggish/stuck scrolling. If Lenis is ever
   removed, put `scroll-behavior: smooth` back here. */
body{
  margin:0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
input, textarea, select, button{ font: inherit; color: inherit; }
h1,h2,h3,h4,h5{ font-family: var(--font-heading); font-weight:700; line-height:1.15; margin:0 0 0.6em; color: var(--lp-green); letter-spacing:-0.01em; }
h1{ font-size: var(--fs-h1); font-weight:800; }
h2{ font-size: var(--fs-h2); }
h3{ font-size: var(--fs-h3); }
h4{ font-size: var(--fs-h4); }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 3px solid var(--lp-gold);
  outline-offset: 2px;
}
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--lp-green); color:#fff;
  padding:0.75em 1.25em; z-index:1000; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ---------------------------------------------------------
   LAYOUT UTILITIES
   --------------------------------------------------------- */
.container{
  width:100%;
  max-width: var(--container-max);
  margin-inline:auto;
  padding-inline: var(--container-pad);
}
.section{ padding-block: var(--section-pad-y); }
.section-tight{ padding-block: calc(var(--section-pad-y) * 0.6); }
.bg-alt{ background: var(--color-bg-alt); }
.bg-dark{ background: var(--lp-green); color: var(--color-text-on-dark); }
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4{ color:#fff; }
.bg-black{ background: var(--lp-black); color:#fff; }
.bg-black h1,.bg-black h2,.bg-black h3{ color:#fff; }

.grid{ display:grid; gap: 1.75rem; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-6{ grid-template-columns: repeat(6, 1fr); }
@media (max-width:960px){
  .grid-3{ grid-template-columns: repeat(2,1fr); }
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .grid-6{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width:640px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
  .grid-6{ grid-template-columns: repeat(2,1fr); }
}

.flex{ display:flex; }
.flex-center{ display:flex; align-items:center; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
@media (max-width:640px){
  .flex-between{ flex-direction:column; align-items:flex-start; }
}
.flex-col{ display:flex; flex-direction:column; }
.gap-sm{ gap:0.6rem; } .gap-md{ gap:1.25rem; } .gap-lg{ gap:2.5rem; }
.flex-wrap{ flex-wrap:wrap; }

.text-center{ text-align:center; }
.text-muted{ color: var(--color-text-muted); }
.text-gold{ color: var(--lp-gold); }
.text-green{ color: var(--lp-green); }
.mx-auto{ margin-inline:auto; }
.max-w-content{ max-width: 700px; }
.max-w-content.text-center{ margin-inline:auto; }

.eyebrow{
  display:inline-flex; align-items:center; gap:0.5em;
  font-family: var(--font-heading);
  font-size: var(--fs-tiny);
  font-weight:700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-gold-600);
  margin-bottom: 0.9em;
}
.bg-dark .eyebrow, .bg-black .eyebrow{ color: var(--lp-gold); }
.eyebrow::before{
  content:""; width:22px; height:2px; background: var(--lp-gold); display:inline-block;
}

.section-head{ max-width: 680px; margin-bottom: 2.75rem; }
.section-head.text-center{ margin-inline:auto; }

/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.55em;
  font-family: var(--font-heading);
  font-weight:700;
  font-size: 0.95rem;
  padding: 0.95em 1.7em;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  transition: transform var(--dur-smooth) var(--ease-smooth), background var(--dur-crisp) var(--ease-crisp), color var(--dur-crisp) var(--ease-crisp), border-color var(--dur-crisp) var(--ease-crisp), box-shadow var(--dur-smooth) var(--ease-smooth);
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0) scale(0.98); transition-duration: 100ms; }
.btn-primary{ background: var(--lp-gold); color: var(--lp-green-900); box-shadow: var(--shadow-sm); }
.btn-primary:hover{ background:#DCBB74; box-shadow: 0 16px 32px -8px rgba(209,171,89,0.45), var(--shadow-md); }
.btn-secondary{ background: var(--lp-green); color:#fff; box-shadow: var(--shadow-sm); }
.btn-secondary:hover{ background: var(--lp-green-700); box-shadow: 0 16px 32px -8px rgba(0,71,57,0.45), var(--shadow-md); }
.btn-outline{ background:transparent; border-color: currentColor; color: var(--lp-green); }
.btn-outline:hover{ background: var(--lp-green); color:#fff; border-color: var(--lp-green); box-shadow: var(--shadow-md); }
.bg-dark .btn-outline, .bg-black .btn-outline{ color:#fff; }
.bg-dark .btn-outline:hover, .bg-black .btn-outline:hover{ background:#fff; color: var(--lp-green); }
.btn-ghost{ background: rgba(255,255,255,0.12); color:#fff; border-color: rgba(255,255,255,0.35); }
.btn-ghost:hover{ background: rgba(255,255,255,0.22); box-shadow: 0 12px 28px -8px rgba(0,0,0,0.35); }
.btn-sm{ padding:0.6em 1.2em; font-size:0.85rem; }
.btn-block{ width:100%; }
.btn-icon{ width:1.1em; height:1.1em; flex-shrink:0; transition: transform var(--dur-spring) var(--ease-spring); }
.btn:hover .btn-icon{ transform: translateX(3px); }
.btn[disabled]{ opacity:0.5; cursor:not-allowed; }
.btn[disabled]:hover{ transform:none; box-shadow:none; }

.btn-row{ display:flex; flex-wrap:wrap; gap:0.9rem; }

/* ---------------------------------------------------------
   HEADER / NAV
   Floating dual-pill glass header (logo pill + nav pill), fixed above
   the page. Structure and measurements match the reference; colours
   and typography stay on-brand (Luther Green / Resource Gold).
   --------------------------------------------------------- */
:root{
  --header-float-top: 18px;
  --pill-shadow: 0 6px 20px -6px rgba(15,15,15,0.18), 0 1px 3px rgba(0,0,0,0.06);
}

.site-header{
  position: fixed; top: var(--header-float-top); left:0; right:0; z-index: 500;
  pointer-events: none; /* only the pills themselves are interactive */
  transition: top var(--dur-smooth) var(--ease-smooth);
}
.site-header.is-scrolled{
  --header-float-top: 10px;
}
.site-header.is-scrolled .brand,
.site-header.is-scrolled .nav-main,
.site-header.is-scrolled .nav-toggle{
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 30px -8px rgba(0,35,25,0.20), 0 2px 6px rgba(0,0,0,0.06);
  border-color: rgba(0,71,57,0.18);
}
.floating-nav-row{
  display:flex; align-items:center; justify-content:space-between; gap:0.75rem;
}
.brand{
  pointer-events:auto;
  display:inline-flex; align-items:center; flex-shrink:0;
  background: rgba(255,255,255,0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0,71,57,0.1);
  border-radius: 16px; padding: 0.5rem 0.9rem;
  box-shadow: var(--pill-shadow);
  transition: transform var(--dur-spring) var(--ease-spring), box-shadow var(--dur-smooth) var(--ease-smooth);
}
.brand:hover{ transform: translateY(-1px); }
.brand img{ height:44px; width:auto; }

.nav-main{
  pointer-events:auto;
  display:flex; align-items:center; gap:0.25rem;
  background: rgba(255,255,255,0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0,71,57,0.1);
  border-radius: var(--radius-pill); padding: 0.35rem;
  box-shadow: var(--pill-shadow);
  max-width: min(100vw - 6rem, 58rem);
  transition: box-shadow var(--dur-smooth) var(--ease-smooth);
}
.nav-main a{
  height:36px; display:inline-flex; align-items:center; white-space:nowrap;
  color: var(--color-text-muted); font-weight:600; font-size:0.84rem;
  font-family: 'Manrope', var(--font-heading);
  padding: 0 0.85rem; border-radius: var(--radius-pill);
  transition: background var(--dur-spring) var(--ease-spring), color var(--dur-spring) var(--ease-spring), transform var(--dur-spring) var(--ease-spring);
}
.nav-main a:hover,
.nav-main a[aria-current="page"],
.nav-main a.is-active-spy{
  background: var(--lp-green-50); color: var(--lp-green); transform: translateY(-1px);
}

.nav-main .nav-cta{
  margin-left: 0.25rem; flex-shrink:0;
  background: var(--lp-green); color:#fff;
  font-family: var(--font-heading); font-weight:700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 0 1px rgba(0,0,0,0.08);
  transition: background var(--dur-crisp) var(--ease-crisp), transform var(--dur-smooth) var(--ease-smooth), box-shadow var(--dur-smooth) var(--ease-smooth);
}
.nav-main .nav-cta:hover{
  background: var(--lp-green-700); color:#fff; transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 12px 24px -8px rgba(0,71,57,0.5);
}

.header-actions-mobile{ display:none; }

.nav-toggle{
  pointer-events:auto;
  display:none; background: rgba(255,255,255,0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0,71,57,0.1); box-shadow: var(--pill-shadow);
  width:46px; height:46px; border-radius:50%;
  align-items:center; justify-content:center; color: var(--lp-green); flex-shrink:0;
  transition: background var(--dur-crisp) var(--ease-crisp), transform var(--dur-spring) var(--ease-spring);
}
.nav-toggle:hover{ transform: scale(1.05); }
.nav-toggle svg{ width:22px; height:22px; }

/* Medium screens: keep pill menu compact so it fits beautifully without hamburger */
@media (max-width: 1200px) and (min-width: 961px){
  .nav-main a{ padding: 0 0.6rem; font-size: 0.79rem; }
  .brand img{ height: 40px; }
}

@media (max-width: 960px){
  .nav-main{
    position: fixed; inset: 80px 0 0 0; background: var(--lp-green);
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    padding: 1.5rem var(--container-pad); gap:0; overflow-y:auto;
    max-width:none; border-radius:0; border:none; box-shadow:none;
    transform: translateX(100%); transition: transform var(--dur-smooth) var(--ease-smooth);
    overscroll-behavior: contain;
  }
  .nav-main.is-open{ transform: translateX(0); }
  .nav-main > *{
    opacity:0; transform: translateX(24px);
    transition: opacity 380ms var(--ease-smooth), transform 380ms var(--ease-smooth);
    transition-delay: 0ms;
  }
  .nav-main.is-open > *{ opacity:1; transform:none; }
  .nav-main.is-open > *:nth-child(1){ transition-delay: 60ms; }
  .nav-main.is-open > *:nth-child(2){ transition-delay: 100ms; }
  .nav-main.is-open > *:nth-child(3){ transition-delay: 140ms; }
  .nav-main.is-open > *:nth-child(4){ transition-delay: 180ms; }
  .nav-main.is-open > *:nth-child(5){ transition-delay: 220ms; }
  .nav-main.is-open > *:nth-child(6){ transition-delay: 260ms; }
  .nav-main.is-open > *:nth-child(7){ transition-delay: 300ms; }
  /* .site-header.is-scrolled .nav-main (desktop glass-pill "solid once
     scrolled" effect) has higher specificity (two classes) than the
     plain .nav-main background rule above, so it was winning here too:
     the instant a user scrolled even 35px, which is normal before ever
     opening the menu, the full-screen mobile drawer silently turned
     near-white while its links stayed white text, invisible. Repeating
     the intended background here, same specificity, later in the
     cascade, restores it for the mobile drawer specifically. */
  .site-header.is-scrolled .nav-main{ background: var(--lp-green); backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; }
  .nav-main a{
    height:auto; color:#fff; padding:1em 0; border-bottom:1px solid rgba(255,255,255,0.1);
    font-size:1.05rem; border-radius:0; background:none !important;
  }
  /* The desktop hover rule (.nav-main a:hover{ color:var(--lp-green); })
     turns text dark green, invisible against this same dark green
     drawer. Overridden here to gold instead, same specificity plus
     :hover, later in the cascade. */
  .nav-main a:hover{ color: var(--lp-gold); }
  .nav-main a[aria-current="page"]{ color: var(--lp-gold) !important; }
  .nav-main .nav-cta{ display:none; }
  .nav-main .header-actions-mobile{ display:flex; flex-direction:column; gap:0.75rem; margin-top:1.5rem; }
  .nav-toggle{ display:flex; }
}
body.nav-open{ overflow:hidden; }

/* Compensating top padding for fixed header */
#main{ padding-top: 92px; }
@media (max-width:960px){ #main{ padding-top: 82px; } }

/* In-page anchor targets (about.html's #story/#process/#impact, reached
   via nav/footer links and the .htaccess redirects from the old retired
   pages) need the same offset, or the fixed header covers the heading
   the moment the browser jumps to it. */
section[id]{ scroll-margin-top: 110px; }
@media (max-width:960px){ section[id]{ scroll-margin-top: 96px; } }

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */
.hero{
  position:relative; background: var(--lp-green); color:#fff; overflow:hidden;
  padding-block: clamp(3rem, 2rem + 5vw, 6.5rem);
}
.hero::before{
  content:""; position:absolute; right:-10%; top:-30%; width:70%; aspect-ratio:1;
  border-radius:50%; border:80px solid rgba(255,255,255,0.05); pointer-events:none;
  animation: lp-float 9s ease-in-out infinite;
}
.hero::after{
  content:""; position:absolute; right:5%; top:-10%; width:45%; aspect-ratio:1;
  border-radius:50%; border:60px solid rgba(209,171,89,0.08); pointer-events:none;
  animation: lp-float 7s ease-in-out infinite reverse;
}
/* Gentle idle bob on the hero's decorative rings, pure CSS so it needs no
   JS and can't be blocked by a slow/failed CDN load. */
@keyframes lp-float{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-16px); }
}
@media (prefers-reduced-motion: reduce){
  .hero::before, .hero::after{ animation:none; }
}
.hero .container{ position:relative; z-index:2; }
.hero-grid{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap:3rem; align-items:center; }
.hero-copy p.lead{ font-size: var(--fs-lead); color: var(--color-text-on-dark-muted); max-width:46ch; }
.hero-media{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg); aspect-ratio:4/3; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }

/* ---------------------------------------------------------
   HERO PRODUCT CAROUSEL (desktop: 3D card stack, mobile: flow strip)
   Signature hero interaction, real product photography only.
   --------------------------------------------------------- */
.hero-visual{ position:relative; min-width:0; }

.hero-carousel{
  position:relative; width:100%; aspect-ratio:4/3.6;
  perspective: 3400px;
  overflow:visible; /* clipping happens far away at .hero's own edge, not
    here, right next to the cards, that tight clip was the visible "line"
    where tiles abruptly popped in and out. */
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.hero-carousel.is-dragging{ cursor: grabbing; }
.hero-carousel-inner{
  position:relative; width:100%; height:100%;
  transform-style: preserve-3d;
  transform: rotateX(3deg) rotateY(-4deg);
}
.hero-card{
  position:absolute; left:50%; top:50%; width:66%; aspect-ratio:4/3;
  transform-style:preserve-3d;
  will-change: transform, opacity;
  pointer-events: none; /* the whole wheel drags as one unit, from the carousel container */
}
.hero-card img{
  display:block; width:100%; height:100%; object-fit:cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  background: var(--lp-green-700);
  pointer-events:none;
}
/* aspect-ratio moved from the <img> onto .hero-card itself, with the img
   at an explicit width:100%/height:100% rather than width:100% + auto
   height derived from aspect-ratio. Confirmed by direct testing: once
   width/height HTML attributes (added for CLS, see the Vercel guideline
   pass) exist on an <img>, an aspect-ratio set on the img with only
   width:100% (no explicit height) stops working, Chromium renders the
   image at its raw natural height instead, ignoring the ratio entirely,
   badly distorting every card. Explicit width+height on the img itself
   (not auto) sidesteps the interaction completely, same pattern already
   used everywhere else in this file (.rounded-img img, .gallery-main
   img, .pc-media .pc-img all already do this). If you ever add width/
   height attributes to another image that sits in an aspect-ratio box,
   check this exact failure mode before assuming it's fine. */
/* No CSS transition on .hero-card: position is recomputed every animation
   frame from a continuous phase value (see main.js), so the motion is
   already smooth by construction, a CSS transition would only add lag
   on top of it. */

/* Autoplay motion (carousel auto-rotate, mobile marquee) runs indefinitely
   and sits alongside other page content, WCAG 2.2.2 wants a way to stop
   it. One shared control since the carousel and marquee are never both
   visible at once (see the 900px breakpoint below). */
.hero-motion-toggle{
  position:absolute; right:0.5rem; bottom:0.5rem; z-index:5;
  width:38px; height:38px; border-radius:50%;
  background: rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.28);
  color:#fff; display:flex; align-items:center; justify-content:center;
  transition: background var(--dur-crisp) var(--ease-crisp), transform var(--dur-crisp) var(--ease-crisp);
}
.hero-motion-toggle:hover{ background: rgba(255,255,255,0.24); transform: scale(1.06); }
.hero-motion-toggle svg{ width:16px; height:16px; }
@media (prefers-reduced-motion: reduce){ .hero-motion-toggle{ display:none; } }

.hero-mobile-flow-wrap{ display:none; overflow:hidden; border-radius: var(--radius-lg); width:100%; }
.hero-mobile-flow{
  display:flex; gap:0.9rem; width:max-content;
  animation: hero-mobile-flow 32s linear infinite;
  will-change: transform;
}
.hero-mobile-flow img{
  width:200px; height:150px; object-fit:cover; border-radius: var(--radius-md); flex-shrink:0;
}
@keyframes hero-mobile-flow{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

@media (max-width: 960px){
  .hero-carousel{ display:none; }
  .hero-mobile-flow-wrap{ display:block; }
}
@media (prefers-reduced-motion: reduce){
  .hero-mobile-flow{ animation: none; }
}
.hero-stats{ display:flex; gap:clamp(1.2rem, 3vw, 2.4rem); margin-top:2.2rem; flex-wrap:wrap; }
.hero-stats .stat{ flex: 1 1 120px; min-width: 100px; }
.hero-stats .stat b{ display:block; font-family:var(--font-heading); font-size:clamp(1.4rem, 1.2rem + 1vw, 1.75rem); color:var(--lp-gold); line-height: 1.1; margin-bottom: 0.2rem; }
.hero-stats .stat span{ font-size:var(--fs-small); color: var(--color-text-on-dark-muted); }
@media (max-width:960px){
  .hero-grid{ grid-template-columns:1fr; gap: 2.5rem; }
  .hero-media{ order:-1; }
  .hero-visual{ order:-1; max-width: 520px; margin-inline: auto; width: 100%; }
}

.page-hero{
  background: var(--lp-green); color:#fff; padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  position:relative; overflow:hidden;
}
.page-hero::after{
  content:""; position:absolute; right:-8%; top:-40%; width:50%; aspect-ratio:1;
  border-radius:50%; border:60px solid rgba(255,255,255,0.05);
}
.page-hero .container{ position:relative; z-index:2; }
.page-hero .breadcrumb{ font-size:var(--fs-small); color: var(--color-text-on-dark-muted); margin-bottom:1rem; }
.page-hero .breadcrumb a:hover{ color:#fff; }
.page-hero h1{ color:#fff; max-width: 20ch; }
.page-hero p.lead{ color: var(--color-text-on-dark-muted); max-width:60ch; font-size:var(--fs-lead); margin-top:0.75rem; }

/* ---------------------------------------------------------
   CARDS
   --------------------------------------------------------- */
.card{
  background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-md);
  overflow:hidden; transition: transform var(--dur-smooth) var(--ease-smooth), box-shadow var(--dur-smooth) var(--ease-smooth), border-color var(--dur-smooth) var(--ease-smooth);
}
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
/* .media wrapper divs set their own aspect-ratio inline per instance,
   but the img inside never had a sizing rule of its own, so it rendered
   at whatever its natural size happened to scale to, filling or leaving
   whitespace around the edges depending on the source photo's own
   aspect ratio, most visible when two cards with differently-shaped
   source photos sit side by side (the "Two ways we turn waste" pair on
   index.html). Fixed once, generically, for every .media image. */
.card .media img{ width:100%; height:100%; object-fit:cover; display:block; }

.badge{
  position:absolute; top:0.8rem; left:0.8rem; background:#fff; color:var(--lp-green);
  font-size:var(--fs-tiny); font-weight:700; padding:0.35em 0.8em; border-radius:var(--radius-pill);
  text-transform:uppercase; letter-spacing:0.04em; box-shadow: var(--shadow-sm);
}
.badge.badge-gold{ background: var(--lp-gold); color: var(--lp-green-900); }

/* ---------------------------------------------------------
   PRODUCT TILES (calm, gallery-style grid)
   Flat, borderless-per-tile with shared hairline dividers, product
   floats in generous negative space, detail (quote CTA, alt photo)
   only reveals on hover, keeps the resting grid quiet and uncluttered.
   --------------------------------------------------------- */
.grid-flush{ gap: 1.25rem; }
.product-card{
  display:flex; flex-direction:column; background: #fff; color:inherit;
  border-radius: var(--radius-md); border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform var(--dur-smooth) var(--ease-smooth), box-shadow var(--dur-smooth) var(--ease-smooth), border-color var(--dur-crisp) var(--ease-crisp);
}
.product-card:hover{
  transform: translateY(-5px);
  box-shadow: 0 16px 36px -8px rgba(0,71,57,0.14), var(--shadow-sm);
  border-color: rgba(0,71,57,0.25);
}
.pc-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:0.6rem;
  padding: 1.15rem 1.25rem 0.5rem;
  font-family: var(--font-heading); font-size:0.88rem; font-weight:700;
  color: var(--lp-green); letter-spacing:0.01em;
}
.pc-head .pc-status{
  font-family: var(--font-body); font-weight:600; font-size:var(--fs-tiny);
  color: var(--lp-green-2); background: var(--lp-green-50); padding: 0.2em 0.65em; border-radius: var(--radius-pill);
}
.pc-media{ position:relative; aspect-ratio:1/1; margin:0 0.8rem 0.6rem; background: var(--lp-green-50); border-radius: var(--radius-sm); overflow:hidden; }
.pc-media .pc-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:0.8rem;
  transition: opacity var(--dur-smooth) var(--ease-smooth), transform var(--dur-smooth) var(--ease-smooth);
}
.pc-media .pc-img-2{ opacity:0; }
.product-card:hover .pc-media .pc-img-1{ opacity:0; }
.product-card:hover .pc-media .pc-img-2{ opacity:1; }
.product-card:not(:has(.pc-img-2)):hover .pc-media .pc-img{ transform: scale(1.05); }
.pc-foot{
  padding: 0.85rem 1.2rem; text-align:center;
  font-family: var(--font-heading); font-size:0.82rem; font-weight:700;
  letter-spacing:0.02em; color: var(--lp-green);
  background: var(--lp-green-50); margin-top: auto;
  transition: background var(--dur-crisp) var(--ease-crisp), color var(--dur-crisp) var(--ease-crisp);
}
.product-card:hover .pc-foot{ background: var(--lp-gold); color: var(--lp-green-900); }
@media (prefers-reduced-motion: reduce){
  .product-card:hover{ transform:none; }
}

.feature-card{ padding:2rem 1.6rem; text-align:left; display:flex; flex-direction:column; height:100%; }

/* Team member cards (about.html #team). Initials avatar, not a fake
   photo, real headshots replace these once provided (see
   new-images/team/ and new-images/SHOT-LIST.md at the project root,
   not part of the deployed site). */
.team-card{ padding:2rem 1.6rem; text-align:center; }
.team-avatar{
  width:88px; height:88px; border-radius:50%; margin:0 auto 1.1rem;
  background: var(--lp-green); color: var(--lp-gold);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-heading); font-weight:800; font-size:1.5rem; letter-spacing:0.02em;
}
.team-card h3{ font-size:1.1rem; margin-bottom:0.5rem; }
.icon{
  width:56px; height:56px; border-radius:16px; background: var(--lp-green-50); color: var(--lp-green);
  display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem; flex-shrink:0;
  animation: lp-float-sm 5s ease-in-out infinite;
}
.icon svg{ width:28px; height:28px; }
/* Very small, slow idle bob, decorative only, stays out of the way of the
   calm/uncluttered product grid (Decision 13 deliberately keeps that grid
   still) since .icon only appears on feature cards, not product tiles. */
@keyframes lp-float-sm{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce){ .icon{ animation:none; } }

.stat-card{ text-align:center; padding:2rem 1rem; }
.stat-card b{ display:block; font-family:var(--font-heading); font-size:2.6rem; font-weight:800; color:var(--lp-gold); }
.stat-card span{ display:block; margin-top:0.4rem; font-size:var(--fs-small); color: var(--color-text-on-dark-muted); }
.bg-alt .stat-card span, .section:not(.bg-dark):not(.bg-black) .stat-card span{ color: var(--color-text-muted); }
.section:not(.bg-dark):not(.bg-black) .stat-card b{ color: var(--lp-green); }

.process-step{ position:relative; padding:1.8rem 1.5rem; background:#fff; border-radius: var(--radius-md); border:1px solid var(--color-border); }
.process-step .num{ font-family:var(--font-heading); font-weight:800; font-size:2.2rem; color: var(--lp-green-100); line-height:1; margin-bottom:0.6rem; }
.process-step h3{ font-size:1.1rem; }
.process-step p{ color: var(--color-text-muted); font-size:var(--fs-small); }

/* ---------------------------------------------------------
   FILTER PILLS / TABS
   --------------------------------------------------------- */
.filter-bar{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-bottom:2.2rem; }
.filter-pill{
  padding:0.6em 1.3em; border-radius: var(--radius-pill); border:1.5px solid var(--color-border);
  background:#fff; font-family:var(--font-heading); font-weight:600; font-size:0.88rem; color: var(--color-text-muted);
  transition: border-color var(--dur-spring) var(--ease-spring), color var(--dur-spring) var(--ease-spring), background var(--dur-spring) var(--ease-spring), transform var(--dur-spring) var(--ease-spring);
}
.filter-pill:hover{ border-color: var(--lp-green); color: var(--lp-green); transform: translateY(-1px); }
.filter-pill[aria-pressed="true"]{ background: var(--lp-green); border-color:var(--lp-green); color:#fff; }

.search-row{ display:flex; gap:0.8rem; margin-bottom:1.4rem; flex-wrap:wrap; }
.search-input{
  flex:1; min-width:220px; padding:0.85em 1.2em; border-radius: var(--radius-pill); border:1.5px solid var(--color-border);
  background:#fff;
}

/* ---------------------------------------------------------
   PROCESS FLOW (Collect -> Deliver)
   --------------------------------------------------------- */
.flow-strip{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  overflow: visible;
  padding-block: 1rem;
}
.flow-node{
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: 0 0.5rem;
  position: relative;
  transition: transform var(--dur-smooth) var(--ease-smooth);
}
.flow-node.is-active{ transform: translateY(-3px); }
.flow-node .dot{
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--lp-green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 0.9rem; font-family: var(--font-heading);
  font-weight: 800; font-size: 1.15rem;
  border: 3.5px solid var(--lp-gold);
  box-shadow: 0 4px 14px rgba(0,71,57,0.18);
  transition: transform var(--dur-spring) var(--ease-spring), box-shadow var(--dur-spring) var(--ease-spring);
}
.flow-node:hover .dot, .flow-node.is-active .dot{
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(209,171,89,0.38);
}
.flow-node h4{ font-size: 0.96rem; margin-bottom: 0.25em; color: var(--lp-green); }
.flow-node p{ font-size: var(--fs-small); color: var(--color-text-muted); line-height: 1.45; }
.flow-arrow{
  align-self: flex-start; margin-top: 1.1rem;
  color: var(--lp-gold); flex: 0 0 auto;
}
.flow-arrow svg{ width: 18px; height: 18px; }

@media (max-width: 990px) and (min-width: 641px){
  .flow-strip{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem 1.25rem;
  }
  .flow-arrow{ display: none; }
  .flow-node{
    background: #fff; border: 1px solid var(--color-border);
    border-radius: var(--radius-md); padding: 1.4rem 1rem;
    box-shadow: var(--shadow-sm);
  }
}

@media (max-width: 640px){
  .flow-strip{
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .flow-arrow{ display: none; }
  .flow-node{
    display: flex;
    align-items: flex-start;
    text-align: left;
    gap: 1.1rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.1rem;
    box-shadow: var(--shadow-sm);
  }
  .flow-node .dot{
    margin: 0; flex-shrink: 0;
    width: 48px; height: 48px; font-size: 1rem;
  }
}

/* ---------------------------------------------------------
   FORMS
   --------------------------------------------------------- */
.form-card{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.75rem); box-shadow: var(--shadow-sm); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:0.4rem; }
.field.full{ grid-column: 1 / -1; }
.field label{ font-weight:700; font-size:var(--fs-small); font-family:var(--font-heading); color: var(--lp-green); }
.field .hint{ font-size:var(--fs-tiny); color: var(--color-text-muted); }
.field input, .field textarea, .field select{
  padding:0.85em 1em; border-radius: var(--radius-sm); border:1.5px solid var(--color-border);
  background: var(--lp-green-50); transition: border-color var(--transition), background var(--transition);
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color: var(--lp-green); background:#fff; }
.field textarea{ resize:vertical; min-height:120px; }
.field-file{
  border:1.5px dashed var(--color-border); border-radius: var(--radius-sm); padding:1.4rem; text-align:center;
  background: var(--lp-green-50); font-size:var(--fs-small); color: var(--color-text-muted); cursor:pointer;
}
.field-file input{ display:none; }
.required{ color: var(--color-danger); }
.form-note{ font-size: var(--fs-small); color: var(--color-text-muted); margin-top:1rem; }
.form-success{
  display:none; text-align:center; padding:2.5rem 1.5rem;
}
.form-success.is-visible{ display:block; }
.form-success .check{
  width:64px; height:64px; border-radius:50%; background: var(--lp-green); color:#fff; display:flex;
  align-items:center; justify-content:center; margin:0 auto 1.2rem;
}
form.is-submitted .form-fields{ display:none; }

/* ---------------------------------------------------------
   TABLES (specs)
   --------------------------------------------------------- */
.spec-table{ width:100%; border-collapse:collapse; }
.spec-table th, .spec-table td{ text-align:left; padding:0.9em 1em; border-bottom:1px solid var(--color-border); font-size:var(--fs-small); }
.spec-table th{ width:40%; color: var(--color-text-muted); font-weight:600; }
.spec-table td{ font-weight:600; }

.placeholder-tag{
  display:inline-block; background: var(--lp-gold-200); color:#7A5A17; font-size:var(--fs-tiny);
  font-weight:700; padding:0.15em 0.6em; border-radius:6px; letter-spacing:0.02em;
}

/* ---------------------------------------------------------
   BANNERS / CTA
   --------------------------------------------------------- */
.cta-banner{
  background: var(--lp-green); color:#fff; border-radius: var(--radius-lg); padding: clamp(2rem, 1.6rem + 2vw, 3.5rem);
  text-align:center; position:relative; overflow:hidden;
}
.cta-banner::before{ content:""; position:absolute; left:-15%; bottom:-40%; width:60%; aspect-ratio:1; border-radius:50%; border:50px solid rgba(255,255,255,0.06); }
.cta-banner h2{ color:#fff; }
.cta-banner .container-inner{ position:relative; z-index:2; max-width:640px; margin-inline:auto; }

/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */
.site-footer{ background: var(--lp-green-900); color: var(--color-text-on-dark-muted); }
.footer-top{ padding-block: 3.5rem; display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:2.5rem; }
@media (max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } }
.footer-brand img{ height:36px; width:auto; margin-bottom:1rem; }
.footer-brand p{ font-size:var(--fs-small); max-width:32ch; }
.footer-col h5{ color:#fff; font-family:var(--font-heading); font-size:0.85rem; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:1.1rem; }
.footer-col li{ margin-bottom:0.7rem; font-size:var(--fs-small); }
.footer-col a:hover{ color:#fff; }
.footer-social{ display:flex; gap:0.7rem; margin-top:1.2rem; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center;
  transition: background var(--dur-spring) var(--ease-spring), color var(--dur-spring) var(--ease-spring), transform var(--dur-spring) var(--ease-spring);
}
.footer-social svg{ width:17px; height:17px; }
.footer-social a:hover{ background: var(--lp-gold); color: var(--lp-green-900); transform: translateY(-3px); }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.1); padding-block:1.4rem; display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:0.8rem; font-size:var(--fs-tiny);
}
.footer-bottom a:hover{ color:#fff; }

/* ---------------------------------------------------------
   WEB FEATURE: SCROLL PROGRESS BAR
   --------------------------------------------------------- */
.scroll-progress-bar{
  position: fixed;
  top: 0; left: 0;
  height: 3.5px;
  background: linear-gradient(90deg, var(--lp-gold) 0%, var(--lp-green-2) 50%, var(--lp-gold) 100%);
  background-size: 200% 100%;
  z-index: 10000;
  width: 0%;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(209,171,89,0.55);
}

/* ---------------------------------------------------------
   WEB FEATURE: FLOATING BACK TO TOP WITH PROGRESS RING
   --------------------------------------------------------- */
.back-to-top{
  position: fixed;
  right: 1.25rem;
  bottom: 5.5rem; /* sits right above WhatsApp float */
  z-index: 590;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0,71,57,0.14);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lp-green);
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px) scale(0.9);
  pointer-events: none;
  transition: opacity 300ms var(--ease-smooth), transform 300ms var(--ease-smooth), background 200ms var(--ease-crisp), box-shadow 200ms var(--ease-crisp), color 200ms var(--ease-crisp);
}
.back-to-top.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.back-to-top:hover{
  background: var(--lp-green);
  color: #fff;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 14px 28px -6px rgba(0,71,57,0.35);
}
.back-to-top svg:not(.progress-ring){ width: 20px; height: 20px; }
.back-to-top .progress-ring{
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  transform: rotate(-90deg);
  pointer-events: none;
}
.back-to-top .progress-ring-circle{
  fill: none;
  stroke: var(--lp-gold);
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke-dashoffset 60ms linear;
}

/* ---------------------------------------------------------
   WEB FEATURE: WHATSAPP FLOAT WITH FRIENDLY GREETING BADGE
   --------------------------------------------------------- */
.wa-float-wrap{
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 600;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.wa-float{
  position: relative;
  right: auto; bottom: auto;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37,211,102,0.35), var(--shadow-md);
  transition: transform var(--dur-spring) var(--ease-spring), box-shadow var(--dur-spring) var(--ease-spring);
}
.wa-float:hover{
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 14px 30px rgba(37,211,102,0.45), var(--shadow-lg);
}
.wa-float svg{ width: 28px; height: 28px; }

.wa-tooltip{
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  color: var(--lp-green-900);
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 20px rgba(0,20,14,0.14);
  font-size: 0.82rem;
  font-weight: 700;
  font-family: var(--font-heading);
  border: 1px solid rgba(0,71,57,0.1);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 400ms var(--ease-smooth), transform 400ms var(--ease-smooth);
  pointer-events: none;
  white-space: nowrap;
}
.wa-float-wrap:hover .wa-tooltip,
.wa-tooltip.is-active{
  opacity: 1;
  transform: translateX(0);
}
.wa-tooltip .wa-wave{
  display: inline-block;
  animation: wa-wave-anim 2s ease infinite;
  transform-origin: 70% 70%;
}
@keyframes wa-wave-anim{
  0%, 60%, 100%{ transform: rotate(0deg); }
  10%, 30%{ transform: rotate(14deg); }
  20%, 40%{ transform: rotate(-14deg); }
}

/* ---------------------------------------------------------
   SCROLL REVEAL & SAFE BASES
   --------------------------------------------------------- */
/* Content is 100% visible and accessible by default.
   GSAP handles smooth animated reveals on compositor threads. */
.reveal-armed.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible{
  opacity: 1;
  transform: none;
}
.mask-reveal{
  clip-path: inset(0 0 0% 0);
  transition: clip-path 850ms var(--ease-smooth);
}

@media (prefers-reduced-motion: reduce){
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------
   MISC
   --------------------------------------------------------- */
hr.divider{ border:none; border-top:1px solid var(--color-border); margin: 2.5rem 0; }
.tag-row{ display:flex; flex-wrap:wrap; gap:0.5rem; }
.tag{ background: var(--lp-green-50); color: var(--lp-green); font-size:var(--fs-tiny); font-weight:700; padding:0.35em 0.85em; border-radius: var(--radius-pill); }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
@media (max-width:860px){ .two-col{ grid-template-columns:1fr; gap:2rem; } }
.rounded-img{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-md); }
.rounded-img img{ width:100%; height:100%; object-fit:cover; }

.quantity-selector{ display:flex; align-items:center; border:1.5px solid var(--color-border); border-radius: var(--radius-pill); overflow:hidden; width:fit-content; }
.quantity-selector button{
  background:none; border:none; width:40px; height:40px; font-size:1.1rem; color:var(--lp-green);
  transition: background var(--dur-crisp) var(--ease-crisp), transform var(--dur-crisp) var(--ease-crisp);
}
.quantity-selector button:hover{ background: var(--lp-green-50); }
.quantity-selector button:active{ transform: scale(0.9); }
.quantity-selector input{ width:48px; text-align:center; border:none; background:none; font-weight:700; }

.gallery-main{ border-radius: var(--radius-lg); overflow:hidden; aspect-ratio:1/1; margin-bottom:0.9rem; box-shadow: var(--shadow-sm); }
.gallery-main img{ width:100%; height:100%; object-fit:cover; }
.gallery-thumbs{ display:flex; flex-wrap:wrap; gap:0.7rem; }
.gallery-thumbs button{
  width:74px; height:74px; border-radius: var(--radius-sm); overflow:hidden; border:2px solid transparent; padding:0; background:none;
  transition: border-color var(--dur-spring) var(--ease-spring), transform var(--dur-spring) var(--ease-spring);
}
.gallery-thumbs button:hover{ transform: translateY(-2px); }
.gallery-thumbs button.active{ border-color: var(--lp-green); }
.gallery-thumbs img{ width:100%; height:100%; object-fit:cover; }

.value-list{ display:flex; flex-direction:column; gap:0.9rem; }
.value-list li{ display:flex; gap:0.8rem; align-items:flex-start; font-size:var(--fs-small); }
.value-list li svg{ width:20px; height:20px; color: var(--lp-green-2); flex-shrink:0; margin-top:2px; }

.avatar-quote{ display:flex; gap:1.4rem; align-items:center; }
.avatar-quote img{ width:88px; height:88px; border-radius:50%; object-fit:cover; flex-shrink:0; }

.back-link{ display:inline-flex; align-items:center; gap:0.4em; font-weight:700; color: var(--lp-green); font-size:var(--fs-small); margin-bottom:1.5rem; }
.back-link:hover{ color: var(--lp-gold-600); }
.back-link svg{ width:16px; height:16px; flex-shrink:0; }