/* ==========================================================================
   NOBILIS AQUACULTURE LIMITED — Design tokens
   Palette: warm ivory, soft champagne, deep charcoal, muted warm grey, restrained gold
   ========================================================================== */

:root{
  --ivory:        #F6F1E7;
  --ivory-soft:   #EFE8D9;
  --champagne:    #E4D3B4;
  --charcoal:     #14120F;
  --charcoal-2:   #1E1B16;
  --charcoal-soft:#2B2620;
  --grey:         #8C8375;
  --grey-light:   #B8AFA0;
  --gold:         #AC8A55;
  --gold-soft:    rgba(172,138,85,0.35);
  --ink:          #1B1811;

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --ease: cubic-bezier(.16,.84,.44,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);

  --nav-h: 84px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; background:none; border:none; cursor:pointer; color:inherit; }
ul{ list-style:none; }

.wrap{ max-width:1400px; margin:0 auto; padding:0 6vw; }

.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:600;
}
.eyebrow.on-dark{ color:var(--champagne); }

h1,h2,h3{
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:-.01em;
  line-height:1.05;
  color:var(--ink);
}
h1.on-dark, h2.on-dark, h3.on-dark{ color:var(--ivory); }

p{ color:var(--charcoal-soft); }
p.on-dark{ color:var(--grey-light); }

.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:600;
  padding:1.1em 1.9em;
  border:1px solid var(--ink);
  position:relative;
  overflow:hidden;
  transition:color .5s var(--ease-soft), border-color .5s var(--ease-soft);
}
.btn::before{
  content:'';
  position:absolute; inset:0;
  background:var(--ink);
  transform:translateX(-101%);
  transition:transform .5s var(--ease-soft);
  z-index:0;
}
.btn span{ position:relative; z-index:1; transition:color .5s var(--ease-soft); }
.btn:hover{ color:var(--ivory); }
.btn:hover::before{ transform:translateX(0); }
.btn:hover span{ color:var(--ivory); }

.btn.ghost{ border-color:var(--champagne); color:var(--ivory); }
.btn.ghost::before{ background:var(--champagne); }
.btn.ghost:hover span{ color:var(--charcoal); }

.btn.arrow span::after{ content:'→'; margin-left:.5em; display:inline-block; transition:transform .4s var(--ease-soft); }
.btn.arrow:hover span::after{ transform:translateX(4px); }

/* ---------------- Navigation ---------------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:230;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .5s var(--ease-soft), backdrop-filter .5s var(--ease-soft), height .4s var(--ease-soft), box-shadow .5s var(--ease-soft);
}
.site-nav.scrolled{
  height:64px;
  background:rgba(246,241,231,.86);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(20,18,15,.06);
}
.site-nav .wrap{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.wordmark{
  font-family:var(--serif);
  font-size:.92rem;
  letter-spacing:.1em;
  color:var(--ivory);
  white-space:nowrap;
  transition:color .5s var(--ease-soft);
}
.site-nav.scrolled .wordmark{ color:var(--ink); }
.site-nav.on-light .wordmark{ color:var(--ink); }

.nav-links{ display:flex; gap:2.6rem; align-items:center; }
.nav-links a{
  font-size:.74rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ivory-soft);
  position:relative;
  padding-bottom:6px;
  transition:color .5s var(--ease-soft);
}
.site-nav.scrolled .nav-links a{ color:var(--charcoal-soft); }
.site-nav.on-light .nav-links a{ color:var(--charcoal-soft); }
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:currentColor; transition:right .45s var(--ease-soft);
}
.nav-links a:hover::after, .nav-links a.active::after{ right:0; }
.nav-links a.active{ color:var(--gold) !important; }

.nav-toggle{ display:none; width:26px; height:18px; position:relative; z-index:220; }
.nav-toggle span{
  position:absolute; left:0; right:0; height:1px; background:var(--ivory);
  transition:all .4s var(--ease-soft);
}
.site-nav.scrolled .nav-toggle span{ background:var(--ink); }
.site-nav.on-light .nav-toggle span{ background:var(--ink); }
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:8px; }
.nav-toggle span:nth-child(3){ top:16px; }

.mobile-menu{
  position:fixed; inset:0; background:var(--charcoal); z-index:210;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.2rem;
  transform:translateY(-100%);
  transition:transform .55s var(--ease);
}
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu.open ~ .site-nav .nav-toggle span,
.nav-toggle.open span{ background:var(--ivory) !important; }
.nav-toggle.open span:nth-child(1){ top:8px; transform:rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ top:8px; transform:rotate(-45deg); }
.mobile-menu a{
  font-family:var(--serif); font-size:2rem; color:var(--ivory);
}

/* ---------------- Reveal utility ---------------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:.12s; }
.reveal-delay-2{ transition-delay:.24s; }
.reveal-delay-3{ transition-delay:.36s; }

/* ---------------- Footer ---------------- */
.site-footer{
  background:var(--charcoal);
  color:var(--grey-light);
  padding:5rem 0 2rem;
}
.footer-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding-bottom:3rem; margin-bottom:2rem; border-bottom:1px solid rgba(255,255,255,.08);
  flex-wrap:wrap; gap:2rem;
}
.footer-word{ font-family:var(--serif); font-size:1.6rem; color:var(--ivory); letter-spacing:.1em; }
.footer-nav{ display:flex; gap:2.4rem; }
.footer-nav a{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--grey-light); transition:color .3s; }
.footer-nav a:hover{ color:var(--champagne); }
.footer-bottom{ display:flex; justify-content:space-between; font-size:.75rem; color:var(--grey); flex-wrap:wrap; gap:.6rem; }
.footer-bottom a{ color:var(--grey); transition:color .3s; }
.footer-bottom a:hover{ color:var(--champagne); }

/* ---------------- Scroll progress dot indicator ---------------- */
.scroll-cue{
  position:absolute; bottom:2.6rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  color:var(--ivory-soft); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  opacity:.8;
}
.scroll-cue .line{ width:1px; height:38px; background:var(--ivory-soft); overflow:hidden; position:relative; }
.scroll-cue .line::after{
  content:''; position:absolute; left:0; top:-100%; width:100%; height:100%; background:var(--gold);
  animation:cue 2.2s ease-in-out infinite;
}
@keyframes cue{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* ---------------- Supply-chain journey (shared: home + about) ---------------- */
.supply-journey{ position:relative; }
.supply-line{
  position:absolute; top:120px; left:8%; right:8%; height:1px; background:rgba(20,18,15,.12);
  z-index:0;
}
.supply-line .fill{
  position:absolute; left:0; top:0; height:100%; width:0%; background:var(--gold);
  transition:width 1.4s var(--ease);
}
.supply-stages{ display:grid; grid-template-columns:repeat(3,1fr); gap:3vw; position:relative; z-index:1; }
.supply-stage{ text-align:left; }
.supply-stage .num{ font-family:var(--serif); font-size:.85rem; color:var(--gold); letter-spacing:.15em; }
.supply-media{ aspect-ratio:4/3; overflow:hidden; margin:1.4rem 0 1.6rem; }
.supply-media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.1); opacity:0; transition:transform 1s var(--ease), opacity 1s var(--ease); }
.supply-stage.in .supply-media img{ transform:scale(1); opacity:1; }
.supply-stage h3{ font-size:1.5rem; margin-bottom:.5rem; letter-spacing:.06em; }
.supply-stage p{ font-size:.95rem; max-width:22em; }

@media (max-width:900px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
  .wrap{ padding:0 7vw; }
  .wordmark{ font-size:.72rem; letter-spacing:.06em; }
  .footer-top{ flex-direction:column; }
  .supply-stages{ grid-template-columns:1fr; gap:3.2rem; }
  .supply-line{ display:none; }
}