/* ============================================================
   Nordre Ocean — hand-coded copy
   Palette: header #343c5b · navy #1b305d · accent #3550a0
            eyebrow #22335c · text #666 · headings #333
   Fonts:   Playfair Display / Lato / Open Sans
   ============================================================ */

:root{
  --navy:#1b305d;
  --header:#343c5b;
  --accent:#3550a0;
  --eyebrow:#22335c;
  --text:#666;
  --ink:#333;
  --line:#e6e6e6;
  --card-bg:#fbfbfc;
  --field:#f2f2f2;
  --serif:"Playfair Display", Georgia, "Times New Roman", serif;
  --sans:"Lato", Helvetica, Arial, sans-serif;
  --body:"Open Sans", Arial, sans-serif;
  --maxw:1080px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--body);
  font-size:16px;
  line-height:1.9;
  color:var(--text);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{margin:0;color:var(--ink);font-weight:700;}

.container{max-width:var(--maxw);margin:0 auto;padding:0 6vw;}
.container.narrow{max-width:920px;}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--sans);
  font-weight:900;
  font-size:16px;
  letter-spacing:.2px;
  line-height:1;
  padding:18px 32px;
  border-radius:100px;
  cursor:pointer;
  border:0;
  transition:background-color .3s ease, color .3s ease, transform .3s ease;
}
.btn-white{background:#fff;color:var(--accent);}
.btn-white:hover{background:rgba(255,255,255,.8);transform:translateY(-2px);}
.btn-ghost{background:rgba(255,255,255,.15);color:#fff;}
.btn-ghost:hover{background:rgba(255,255,255,.3);transform:translateY(-2px);}
.btn-navy{background:var(--navy);color:#fff;}
.btn-navy:hover{background:#24407a;transform:translateY(-2px);}

/* ---------- shared headings ---------- */
.eyebrow{
  font-family:var(--sans);
  font-weight:700;
  font-size:16px;
  color:var(--eyebrow);
  margin:0 0 .4em;
}
.section-title{
  font-family:var(--serif);
  font-weight:700;
  font-size:40px;
  line-height:1.2;
  color:var(--ink);
  margin:0 0 .6em;
}
.subhead{
  font-family:var(--sans);
  font-weight:700;
  font-size:24px;
  line-height:1.4;
  color:var(--ink);
  margin:0 0 .8em;
}

/* ============ HEADER ============ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:var(--header);
  box-shadow:0 0 7px rgba(0,0,0,.1);
}
.header-inner{
  max-width:var(--maxw);margin:0 auto;
  padding:10px 6vw;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  position:relative;
}
.logo img{height:54px;width:auto;}
.main-nav{display:flex;align-items:center;gap:14px;}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:22px;}
.main-nav a{
  font-family:var(--sans);font-weight:700;font-size:14px;
  color:#9aa6c4;letter-spacing:.3px;transition:color .25s;
}
.main-nav a:hover,.main-nav a.is-current{color:#fff;}
.nav-search{background:none;border:0;color:#9aa6c4;cursor:pointer;display:flex;padding:4px;transition:color .25s;}
.nav-search:hover{color:#fff;}
.nav-toggle{display:none;}

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:88vh;
  display:flex;align-items:center;
  padding:12vw 0;
  background:url("../images/ice-cubed-fresh-fish-sale-market_1000.png") center/cover no-repeat fixed;
  overflow:hidden;
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(220deg, rgba(53,80,160,.27) 0%, #1b305d 100%);
}
.hero-content{
  position:relative;
  max-width:700px;
  margin-left:6vw;
  padding:0 6vw;
}
.hero h1{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(34px,6.2vw,70px);
  line-height:1.5;
  color:#fff;
  margin:0 0 .25em;
}
.hero-sub{
  font-family:var(--sans);
  font-weight:700;
  font-size:clamp(20px,2.6vw,30px);
  line-height:1.5;
  color:#fff;
  margin:0 0 1.6em;
}
.hero-buttons{display:flex;flex-wrap:wrap;gap:16px;}

/* ============ CONTACT BAR ============ */
.contact-bar{
  background:linear-gradient(#fafafb,#f4f5f7);
  box-shadow:0 1px 0 rgba(0,0,0,.04);
  padding:40px 0;
}
.contact-bar-inner p{margin:.15em 0;color:var(--text);}
.contact-bar-inner .eyebrow{color:var(--eyebrow);font-size:16px;margin-bottom:.6em;}
.contact-bar-inner a:hover{color:var(--accent);}

/* ============ ABOUT ============ */
.about{padding:70px 0;}
.about p{margin:0 0 1.5em;}

/* ============ CTA ============ */
.cta{
  background:url("../images/raw-fish-market-scaled.jpg") center/cover no-repeat;
  padding:60px 0;
}
.cta-panel{
  background:var(--navy);
  max-width:660px;
  margin:0 auto;
  padding:64px 56px;
}
.cta-panel h2{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(28px,4vw,44px);
  line-height:1.25;
  color:#fff;
  margin:0 0 1em;
}

/* ============ SALMON ============ */
.salmon{padding:70px 0;}
.salmon-grid{
  display:grid;
  grid-template-columns:minmax(220px,300px) 1fr;
  gap:50px;
  align-items:start;
}
.salmon-photo{margin:0;}
.salmon-photo img{width:100%;height:auto;}
.salmon-text p{margin:0 0 1.4em;}

/* ============ SIZES ============ */
.sizes{
  background:linear-gradient(#fcfcfd,#f6f7f9);
  padding:60px 0;
}
.sizes .section-title{margin-top:0;}
.sizes-label{font-size:15px;color:#9a9a9a;margin:.2em 0 1.4em;}
.size-cards{
  display:flex;flex-wrap:wrap;gap:18px;margin-bottom:50px;
}
.size-card{
  flex:0 0 auto;
  min-width:96px;
  text-align:center;
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:4px;
  padding:20px 22px;
  display:flex;flex-direction:column;gap:4px;align-items:center;
}
.size-card .size{
  font-family:var(--sans);font-weight:700;font-size:26px;color:var(--ink);line-height:1.1;
}
.size-card .range{
  font-family:var(--sans);font-weight:700;font-size:20px;color:var(--ink);line-height:1.15;
}
.size-card .unit{font-size:14px;color:var(--accent);}
.sizes-note{margin:0;}

/* ============ ATLANTIC ============ */
.atlantic{padding:70px 0;}
.atlantic p{margin:0 0 1.4em;}
.atlantic strong{color:var(--ink);}
.species{margin-top:30px;}
.species-head{margin:0 0 1.2em;}
.species-cols{
  display:grid;grid-template-columns:repeat(3,1fr);gap:30px 40px;
}
.species-cols ul{list-style:none;margin:0;padding:0;}
.species-cols li{
  margin:0 0 1.3em;color:var(--ink);font-weight:600;line-height:1.4;
}
.species-cols li span{color:#9a9a9a;font-weight:400;font-size:14px;}

/* ============ REQUEST + CONTACT ============ */
.request{padding:50px 0 0;}
.request-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;
}
.request-form{padding:50px 50px 60px 0;}
#request-form{display:flex;flex-direction:column;gap:18px;}
.field-row{display:flex;gap:18px;}
.field-row input{flex:1;min-width:0;}
#request-form input,
#request-form textarea{
  width:100%;
  font-family:var(--body);font-size:15px;color:var(--ink);
  background:var(--field);
  border:1px solid transparent;
  border-radius:3px;
  padding:16px 18px;
  transition:border-color .25s, background .25s;
}
#request-form input::placeholder,
#request-form textarea::placeholder{color:#8a8a8a;}
#request-form input:focus,
#request-form textarea:focus{
  outline:none;border-color:var(--accent);background:#fff;
}
#request-form textarea{resize:vertical;min-height:120px;}
.form-bottom{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.captcha{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink);flex:0 0 auto;}
.captcha #captcha-q{white-space:nowrap;flex-shrink:0;}
#request-form .captcha input{width:56px;flex:0 0 56px;text-align:center;padding:14px 8px;}
.form-status{margin:0;font-size:14px;min-height:1.2em;}
.form-status.ok{color:#1d7a3f;}
.form-status.err{color:#b3261e;}

.social{display:flex;gap:14px;margin-top:34px;}
.social a{
  width:46px;height:46px;border-radius:50%;
  background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background .25s, transform .25s;
}
.social a:hover{background:var(--accent);transform:translateY(-2px);}

.contact-panel{
  background:var(--navy);color:#fff;
  padding:56px 50px;
}
.contact-panel h2{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(34px,4vw,48px);line-height:1.15;color:#fff;
  margin:0 0 .8em;
}
.ci-block{margin:0 0 1.6em;}
.ci-block p{margin:.1em 0;color:#fff;line-height:1.6;}
.ci-label{color:rgba(255,255,255,.55)!important;}
.ci-strong{font-weight:700;color:#fff;}
.contact-panel a:hover{color:#cdd6ee;}

/* ============ FOOTER ============ */
.site-footer{padding:46px 0 60px;}
.site-footer .ci-strong{color:var(--ink);margin:0 0 .4em;}
.site-footer p{line-height:1.7;}

/* ============ back to top ============ */
.to-top{
  position:fixed;right:18px;bottom:18px;z-index:40;
  width:42px;height:42px;border-radius:6px;
  background:#e9e9ec;color:#555;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .3s, transform .3s, visibility .3s, background .25s;
}
.to-top.show{opacity:1;visibility:visible;transform:none;}
.to-top:hover{background:#d8d8dd;}

/* ============ reveal animation ============ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);}
.reveal.in{opacity:1;transform:none;}

/* ============ responsive ============ */
@media (max-width:900px){
  .request-grid{grid-template-columns:1fr;}
  .request-form{padding:40px 0;}
  .species-cols{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .hero{background-attachment:scroll;min-height:auto;padding:24vw 0;}
  .hero-content{margin-left:0;}
  .header-inner{flex-direction:row;justify-content:space-between;padding:8px 6vw;}
  .logo img{height:44px;}
  .main-nav{
    position:absolute;top:100%;left:0;right:0;
    background:var(--header);
    flex-direction:column;gap:0;
    max-height:0;overflow:hidden;transition:max-height .35s ease;
  }
  .main-nav.open{max-height:240px;}
  .main-nav ul{flex-direction:column;width:100%;}
  .main-nav li{width:100%;text-align:center;border-top:1px solid rgba(255,255,255,.08);}
  .main-nav a{display:block;padding:14px;color:#fff;}
  .nav-search{padding:12px;}
  .nav-toggle{
    display:flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px;
  }
  .nav-toggle span{width:26px;height:2px;background:#fff;transition:transform .3s, opacity .3s;}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .salmon-grid{grid-template-columns:1fr;gap:30px;}
  .salmon-photo{max-width:320px;}
  .species-cols{grid-template-columns:1fr;}
  .cta-panel{padding:44px 28px;}
  .field-row{flex-direction:column;}
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  .btn:hover,.social a:hover{transform:none;}
}