/* ==========================================================================
   Harbor Forms — Design Tokens
   ========================================================================== */
:root{
  --off-white:   #FFFFFF;
  --off-white-2: #F6F6F2;
  --light-grey:  #DCD8CC;
  --dark-grey:   #3D3D37;
  --dark-grey-2: #6B6A61;
  --dark-green:  #142A20;
  --dark-green-2:#1E3B2C;
  --mid-green:   #3F6B4F;
  --light-green: #A9C4A0;
  --light-green-2:#C9DBC0;
  --white:       #FFFFFF;

  --font-display: "Poppins", sans-serif;
  --font-body: "Inter", sans-serif;

  --ease: cubic-bezier(.16,.84,.44,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);

  --container: 1240px;
  --nav-h: 84px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background: var(--off-white);
  color: var(--dark-grey);
  font-family: var(--font-body);
  font-weight:400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ol,ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }

.container{
  width:100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

.section{ position:relative; padding: 140px 0; }
@media (max-width: 720px){ .section{ padding: 96px 0; } }

em{ font-style: italic; color: var(--mid-green); font-family: var(--font-display); font-weight:400; }

/* ==========================================================================
   Typography
   ========================================================================== */
.eyebrow{
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid-green);
  font-weight: 600;
  margin-bottom: 22px;
}
.eyebrow--light{ color: var(--light-green); }

h2{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.15;
  color: var(--dark-green);
  letter-spacing: -0.01em;
  margin-bottom: 26px;
}
.h-light{ color: var(--off-white); }

.body-lg{
  font-size: 19px;
  line-height: 1.65;
  color: var(--dark-grey);
  font-weight: 300;
  margin-bottom: 18px;
}
.body{
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--dark-grey-2);
  font-weight: 400;
}
.body--light{ color: rgba(255,255,255,0.72); }
.max-56{ max-width: 56ch; }

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

.cursor-dot,.cursor-ring{
  position: fixed; top:0; left:0; pointer-events:none; z-index: 1000;
  border-radius:50%; transform: translate(-50%,-50%);
  transition: opacity .3s var(--ease);
}
.cursor-dot{ width:6px; height:6px; background: var(--dark-green); }
.cursor-ring{ width:34px; height:34px; border:1px solid rgba(20,42,32,0.35); transition: width .25s var(--ease), height .25s var(--ease), border-color .25s var(--ease), transform .05s linear; }
.cursor-ring.is-active{ width:56px; height:56px; border-color: var(--mid-green); }
@media (hover:none), (pointer:coarse){ .cursor-dot,.cursor-ring{ display:none; } }

/* ==========================================================================
   Nav
   ========================================================================== */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  height: var(--nav-h);
  display:flex; align-items:center;
  background: rgba(255,255,255,0);
  border-bottom: 1px solid rgba(20,42,32,0);
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
}
.nav.is-scrolled{
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(20,42,32,0.08);
}
.nav-inner{
  width:100%; max-width: var(--container); margin:0 auto; padding: 0 32px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display); font-weight:400; font-size:19px;
  color: var(--dark-green);
}
.logo-mark{ display:flex; color: var(--mid-green); }
.nav-links{ display:flex; gap:40px; }
.nav-links a{
  font-size:14px; color: var(--dark-grey); position:relative; padding: 6px 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: var(--mid-green); transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease);
}
.nav-links a:hover::after{ transform: scaleX(1); transform-origin: left; }
.nav-burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.nav-burger span{ width:22px; height:1.5px; background: var(--dark-green); transition: transform .3s var(--ease), opacity .3s var(--ease); }
.nav-mobile{
  display:none;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  padding: 14px 28px; border-radius: 999px;
  font-size: 14px; font-weight:500; letter-spacing:0.01em;
  cursor:pointer; border:1px solid transparent;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.btn span{ position:relative; z-index:1; }
.btn-primary{ background: var(--dark-green); color: var(--off-white); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(20,42,32,0.45); }
.btn-ghost{ background: transparent; color: var(--dark-green); border-color: rgba(20,42,32,0.25); }
.btn-ghost:hover{ border-color: var(--dark-green); transform: translateY(-2px); }
.btn-nav{ padding: 10px 22px; font-size:13px; }
.btn-lg{ padding: 17px 34px; font-size:15px; margin-top:20px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; min-height: 100vh; display:flex; align-items:center;
  overflow:hidden; background: linear-gradient(180deg, #FFFFFF 0%, var(--off-white) 55%, var(--off-white) 100%);
}
.kelp-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.kelp-canvas--dim{ opacity: 0.55; }
.hero-veil{
  position:absolute; inset:0;
  background: radial-gradient(60% 50% at 50% 30%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.55) 62%, rgba(255,255,255,0.92) 100%);
  pointer-events:none;
}
.hero-content{
  position:relative; z-index:2; max-width: var(--container); width:100%;
  margin: 0 auto; padding: calc(var(--nav-h) + 40px) 32px 0;
  text-align:center;
}
.hero-title{
  font-family: var(--font-display); font-weight:200;
  font-size: clamp(40px, 7vw, 84px); line-height: 1.05;
  color: var(--dark-green); letter-spacing:-0.02em;
  margin: 0 auto 28px; max-width: 20ch;
}
.hero-sub{
  font-size: 18px; line-height:1.7; color: var(--dark-grey-2);
  max-width: 56ch; margin: 0 auto 40px; font-weight:300;
}
.hero-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.hero-scroll{
  position:absolute; bottom:38px; left:50%; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px; z-index:2;
  color: var(--dark-grey-2); font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
}
.scroll-line{ width:1px; height:44px; background: rgba(20,42,32,0.18); position:relative; overflow:hidden; }
.scroll-line i{ position:absolute; top:-100%; left:0; width:100%; height:100%; background: var(--mid-green); animation: scrollDrip 2.2s ease-in-out infinite; }
@keyframes scrollDrip{ 0%{ top:-100%; } 50%{ top:0%; } 100%{ top:100%; } }

/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee{
  background: var(--dark-green); color: var(--light-green-2);
  overflow:hidden; padding: 16px 0; white-space:nowrap;
  border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06);
}
.marquee-track{ display:inline-flex; align-items:center; gap:20px; animation: marquee 32s linear infinite; }
.marquee-track span{ font-family: var(--font-display); font-weight:300; font-size:15px; letter-spacing:0.02em; }
.marquee-track i{ font-style:normal; color: var(--mid-green); }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ==========================================================================
   Split layout (Intro / Sustainability)
   ========================================================================== */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items:center; }
.split--reverse{ }
@media (max-width: 900px){
  .split{ grid-template-columns: 1fr; gap:48px; }
  .split--reverse .split-visual{ order:-1; }
}

.split-visual{ position:relative; }
.visual-caption{
  margin-top:16px; font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color: var(--dark-grey-2);
}

.tilt-card{
  position:relative; border-radius: 18px; overflow:hidden;
  background: var(--white); box-shadow: 0 30px 60px -30px rgba(20,42,32,0.35);
  transform-style: preserve-3d; will-change: transform;
  transition: box-shadow .4s var(--ease);
}
.tilt-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.tilt-card:hover{ box-shadow: 0 40px 80px -30px rgba(20,42,32,0.45); }
.tilt-glare{
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,0.35), transparent 55%);
  opacity:0; transition: opacity .3s var(--ease);
}
.tilt-card:hover .tilt-glare{ opacity:1; }

/* ==========================================================================
   Intro
   ========================================================================== */
.intro .split-visual .tilt-card{ aspect-ratio: 4/5; max-width: 420px; margin: 0 auto; }

/* ==========================================================================
   Process
   ========================================================================== */
.process{ background: var(--off-white-2); }
.process-head{ max-width: 720px; margin-bottom: 72px; }
.process-grid{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 80px; align-items:center; }
@media (max-width: 900px){ .process-grid{ grid-template-columns:1fr; gap:56px; } }

.process-visual{ position:relative; display:flex; align-items:center; justify-content:center; }
.process-visual .tilt-card{ width: 78%; aspect-ratio: 4/5; position:relative; z-index:2; }
.process-rings{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.ring{ fill:none; stroke: var(--mid-green); stroke-opacity:0.25; }
.ring-a{ animation: spin 60s linear infinite; }
.ring-b{ stroke-dasharray: 4 8; animation: spin 40s linear infinite reverse; }
.ring-c{ stroke-dasharray: 1 6; animation: spin 26s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }
.process-rings{ transform-origin: 50% 50%; }
.ring{ transform-origin: 100px 100px; }

.steps{ display:flex; flex-direction:column; gap:32px; }
.step{ display:flex; gap:22px; padding-bottom:32px; border-bottom: 1px solid rgba(20,42,32,0.1); }
.step:last-child{ border-bottom:none; padding-bottom:0; }
.step-index{
  font-family: var(--font-display); font-weight:200; font-size:34px; color: var(--light-green);
  line-height:1; min-width:52px;
}
.step h3{ font-family: var(--font-display); font-weight:500; font-size:19px; color: var(--dark-green); margin-bottom:8px; }
.step p{ font-size:14.5px; line-height:1.65; color: var(--dark-grey-2); margin:0; }

/* ==========================================================================
   Products
   ========================================================================== */
.products-head{ max-width: 720px; margin-bottom: 64px; }
.product-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
@media (max-width: 980px){ .product-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .product-grid{ grid-template-columns: 1fr; } }

.product-card{
  border-radius: 20px; overflow:hidden; background: var(--white);
  box-shadow: 0 18px 40px -26px rgba(20,42,32,0.28);
  transform-style: preserve-3d; will-change: transform;
  transition: box-shadow .4s var(--ease);
}
.product-card:hover{ box-shadow: 0 30px 60px -26px rgba(20,42,32,0.4); }
.product-card--feature{ grid-column: span 2; }
@media (max-width: 980px){ .product-card--feature{ grid-column: span 2; } }
@media (max-width: 620px){ .product-card--feature{ grid-column: span 1; } }

.product-media{ position:relative; aspect-ratio: 16/11; overflow:hidden; }
.product-card--feature .product-media{ aspect-ratio: 16/9; }
.product-media img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease-soft); }
.product-card:hover .product-media img{ transform: scale(1.05); }
.product-info{ padding: 22px 24px 26px; }
.product-info h3{ font-family: var(--font-display); font-weight:500; font-size:18px; color: var(--dark-green); margin-bottom:8px; }
.product-info p{ font-size:14px; line-height:1.6; color: var(--dark-grey-2); margin-bottom:14px; }
.product-tag{
  display:inline-block; font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color: var(--mid-green); border: 1px solid rgba(63,107,79,0.3); border-radius:999px; padding: 5px 12px;
}

/* ==========================================================================
   Sustainability
   ========================================================================== */
.sustainability{
  background: radial-gradient(120% 100% at 20% 0%, var(--dark-green-2) 0%, var(--dark-green) 55%, #0F2118 100%);
  overflow:hidden;
}
.sustainability .kelp-canvas{ opacity:.4; }
.sustainability .split{ position:relative; z-index:2; }

.loop-diagram{ position:relative; width: min(100%, 360px); aspect-ratio:1; margin: 0 auto; }
.loop-diagram svg{ width:100%; height:100%; }
.loop-track{ fill:none; stroke: rgba(255,255,255,0.12); stroke-width:1.5; }
.loop-progress{
  fill:none; stroke: var(--light-green); stroke-width:1.5; stroke-linecap:round;
  stroke-dasharray: 804; stroke-dashoffset: 804;
  transform-origin: 160px 160px; transform: rotate(-90deg);
  transition: stroke-dashoffset 1.6s var(--ease-soft);
}
.loop-progress.is-in-view{ stroke-dashoffset: 0; }
.loop-node circle{ fill: var(--off-white); }
.loop-node[data-pos="0"]{ transform: translate(160px, 32px); }
.loop-node[data-pos="1"]{ transform: translate(288px, 160px); }
.loop-node[data-pos="2"]{ transform: translate(160px, 288px); }
.loop-node[data-pos="3"]{ transform: translate(32px, 160px); }
.loop-center{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.loop-word{
  position:absolute; font-family: var(--font-display); font-weight:300; font-size:15px;
  color: var(--off-white); opacity:0; transition: opacity .5s var(--ease);
  letter-spacing:0.04em;
}
.loop-word[data-word="0"]{ top: 18%; }
.loop-word[data-word="1"]{ right: 12%; }
.loop-word[data-word="2"]{ bottom: 18%; }
.loop-word[data-word="3"]{ left: 12%; }
.loop-word.is-in-view{ opacity:1; }

.stat-row{ display:flex; gap:44px; margin-top:36px; flex-wrap:wrap; }
.stat{ display:flex; flex-direction:column; }
.stat-num{ font-family: var(--font-display); font-weight:200; font-size:40px; color: var(--off-white); }
.stat-suffix{ font-family: var(--font-display); font-weight:200; font-size:40px; color: var(--off-white); }
.stat-label{ font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color: var(--light-green-2); margin-top:6px; }

/* ==========================================================================
   CTA
   ========================================================================== */
.cta{ text-align:center; }
.cta-title{ max-width: 18ch; margin-left:auto; margin-right:auto; }
.cta .body-lg{ margin-left:auto; margin-right:auto; }
.cta-visual{ margin: 56px auto; max-width: 720px; }
.tilt-card--wide{ aspect-ratio: 16/10; }
.cta-actions{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.cta-actions .body{ max-width: 46ch; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{ background: var(--dark-green); color: var(--off-white); padding: 80px 0 28px; }
.footer .nav-logo{ color: var(--off-white); }
.footer-inner{ display:flex; justify-content:space-between; gap:48px; flex-wrap:wrap; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer-brand p{ margin-top:14px; color: rgba(255,255,255,0.6); font-size:14px; max-width:32ch; }
.footer-links{ display:flex; gap:64px; }
.footer-links h4{ font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color: var(--light-green); margin-bottom:16px; font-weight:600; }
.footer-links a{ display:block; font-size:14px; color: rgba(255,255,255,0.75); margin-bottom:10px; transition: color .25s var(--ease); }
.footer-links a:hover{ color: var(--off-white); }
.footer-bottom{ display:flex; justify-content:space-between; padding-top:24px; font-size:12.5px; color: rgba(255,255,255,0.45); flex-wrap:wrap; gap:8px; }

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in-view{ opacity:1; transform: translateY(0); }
.process-head .reveal:nth-child(1){ transition-delay: 0s; }
.process-head .reveal:nth-child(2){ transition-delay: .06s; }
.process-head .reveal:nth-child(3){ transition-delay: .12s; }
.steps .step:nth-child(1){ transition-delay: 0s; }
.steps .step:nth-child(2){ transition-delay: .08s; }
.steps .step:nth-child(3){ transition-delay: .16s; }
.steps .step:nth-child(4){ transition-delay: .24s; }
.steps .step:nth-child(5){ transition-delay: .32s; }
.product-grid .product-card:nth-child(1){ transition-delay:0s; }
.product-grid .product-card:nth-child(2){ transition-delay:.05s; }
.product-grid .product-card:nth-child(3){ transition-delay:.1s; }
.product-grid .product-card:nth-child(4){ transition-delay:.15s; }
.product-grid .product-card:nth-child(5){ transition-delay:.2s; }
.product-grid .product-card:nth-child(6){ transition-delay:.25s; }
.product-grid .product-card:nth-child(7){ transition-delay:.3s; }

/* ==========================================================================
   Responsive nav
   ========================================================================== */
@media (max-width: 860px){
  .nav-links{ display:none; }
  .btn-nav{ display:none; }
  .nav-burger{ display:flex; }
  .nav-mobile{
    position:fixed; top: var(--nav-h); left:0; right:0;
    background: rgba(255,255,255,0.98); backdrop-filter: blur(14px);
    display:flex; flex-direction:column; padding: 12px 32px 28px;
    transform: translateY(-12px); opacity:0; pointer-events:none;
    transition: transform .35s var(--ease), opacity .35s var(--ease);
    border-bottom: 1px solid rgba(20,42,32,0.08);
  }
  .nav-mobile.is-open{ transform: translateY(0); opacity:1; pointer-events:auto; }
  .nav-mobile a{ padding: 14px 0; font-size:16px; border-bottom: 1px solid rgba(20,42,32,0.08); color: var(--dark-green); }
  .nav-burger.is-open span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
  .nav-burger.is-open span:nth-child(2){ opacity:0; }
  .nav-burger.is-open span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }
}