/* =====================================================================
   "From Source to Service" page. Scoped under .fss so it never touches the
   shared header/footer or other pages. Uses the site's global font
   (Instrument Sans, inherited) and the brand palette. No animation library.
   ===================================================================== */
.fss{
  --fss-ink:#051026;      /* headings */
  --fss-blue:#183962;     /* deep blue accents, numbers, titles */
  --fss-gold:#d3bf5d;     /* gold accents */
  --fss-body:#33415a;     /* card / description body text */
  --fss-light:#f5f5f7;    /* Part 3 light background */
  --fss-cardline:#d9e0ea; /* card border */
  --fss-rowline:#e3e8f0;  /* row border */
  --header-h:113px;       /* measured at runtime in the inline script */
}
html{scroll-padding-top:113px}
.fss *,.fss *::before,.fss *::after{box-sizing:border-box}

/* ---------- shared pill buttons ---------- */
.fss-pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1.5px solid;padding:14px 38px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;line-height:1;transition:background .25s,color .25s,border-color .25s}
.fss-pill--light{border-color:#fff;color:#fff;background:transparent}
.fss-pill--light:hover{background:#fff;color:#041F38}
.fss-pill--dark{border-color:var(--fss-blue);color:var(--fss-blue);background:transparent}
.fss-pill--dark:hover{background:var(--fss-blue);color:#fff}
.fss-pill:focus-visible{outline:2px solid var(--fss-gold);outline-offset:3px}

/* =====================================================================
   PART 1 + 2 — shared ocean background (CASE B: fixed overlay header)
   ===================================================================== */
.fss-bg-wrap{display:grid;position:relative;overflow-x:clip}
.fss-bg{grid-area:1 / 1;position:sticky;top:0;align-self:start;height:100vh;height:100svh;overflow:hidden;z-index:0;
  background:radial-gradient(130% 90% at 50% 0%,#0d4a72 0%,#083a5c 38%,#041f38 72%,#02101d 100%)}
.fss-bg__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,16,29,.45) 0%,rgba(2,16,29,.25) 40%,rgba(2,16,29,.55) 100%)}
.fss-stack{grid-area:1 / 1;position:relative;z-index:1;color:#fff}

/* ---------- Screen 1 (hero) ---------- */
.hero{min-height:100vh;min-height:100svh;padding:calc(var(--header-h) + 13px) 20px 129px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative}
.hero__eyebrow{display:flex;align-items:center;gap:14px;justify-content:center;font-size:23px;font-weight:400;letter-spacing:.02em;text-transform:none;color:#fff;margin:0 0 20px}   /* same type as the Home hero sentence */
.hero__title{color:#fff;font-weight:600;line-height:1.2;margin:0}
.hero__cta{margin-top:35px}
.hero__cta .btn--outline-light:hover{background:#D21F25;border-color:#D21F25;color:#fff}
.hero__scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.8);font-size:11px;letter-spacing:.3em}
.hero__scroll i{position:relative;display:block;width:1px;height:46px;background:rgba(255,255,255,.3);overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;left:0;top:-50%;width:100%;height:50%;background:linear-gradient(to bottom,transparent,#fff);animation:fss-scroll 1.9s cubic-bezier(.6,.0,.4,1) infinite}
@keyframes fss-scroll{0%{transform:translateY(0)}60%,100%{transform:translateY(200%)}}

/* ---------- Screen 2 (Supplier Practices intro) ---------- */
.sp-intro{position:relative;z-index:1;text-align:center;padding:90px 20px 0;color:#fff}
.sp-intro__title{color:#fff;font-weight:600;margin:0}
.sp-intro__line{display:block;width:56px;height:2px;background:var(--fss-gold);margin:18px auto}
.sp-intro__p{max-width:600px;margin:0 auto;font-size:18px;line-height:1.6;color:#fff;opacity:.92}

/* =====================================================================
   PART 2 — Supplier Practices cards (static)
   ===================================================================== */
.sp-cards{position:relative;z-index:1;padding:56px 24px 90px}
.sp-cards__grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;align-items:stretch}
.sp-card{display:flex;flex-direction:column;text-align:left;background:#fff;border:1px solid var(--fss-cardline);border-radius:14px;padding:28px;box-shadow:0 18px 40px rgba(0,10,40,.35);
  opacity:0;transform:translateY(32px);transition:opacity .8s ease-out,transform .8s ease-out,box-shadow .35s ease}
.sp-cards.is-visible .sp-card{opacity:1;transform:translateY(0)}
.sp-cards.is-visible .sp-card:nth-child(1){transition-delay:0s,0s,0s}
.sp-cards.is-visible .sp-card:nth-child(2){transition-delay:.15s,.15s,0s}
.sp-cards.is-visible .sp-card:nth-child(3){transition-delay:.3s,.3s,0s}
.sp-card__num{font-size:44px;font-weight:600;color:var(--fss-blue);line-height:1}
.sp-card__line{display:block;width:34px;height:2px;background:var(--fss-gold);margin:12px 0 14px}
.sp-card__title{font-size:24px;color:var(--fss-blue);margin:0 0 12px}   /* global h3 look (Instrument Sans, weight 600, line-height 1.2em, no uppercase / letter-spacing) at 24px */
.sp-card p{font-size:18px;line-height:1.55;color:var(--fss-body);margin:0 0 12px}
.sp-card p:last-child{margin-bottom:0}
@media (hover:hover){
  .sp-cards.is-visible .sp-card:hover{transform:translateY(-6px) scale(1.015);box-shadow:0 26px 56px rgba(0,10,40,.45);transition:transform .35s ease,box-shadow .35s ease;transition-delay:0s;z-index:2}
}
@media (max-width:1099px){.sp-cards__grid{gap:20px}.sp-card{padding:22px 20px}.sp-card__num{font-size:30px}}
@media (max-width:819px){
  .sp-cards{padding:40px 20px 88px}
  .sp-cards__grid{grid-template-columns:1fr;grid-auto-rows:1fr;max-width:640px;gap:24px}
}

/* =====================================================================
   PART 3 — Industries We Serve (image + list, light)
   ===================================================================== */
.ind{position:relative;z-index:2;background:var(--fss-light) url(../assets/img/Seafood-Background-183962-8-web.jpg) center/cover fixed no-repeat;padding:90px 0}
@media(max-width:1024px){.ind{background-attachment:scroll}}  /* fixed backgrounds are unreliable on touch devices (same as About Us) */
.ind__container{max-width:1180px;margin:0 auto;padding:0 24px}
.ind__heading{font-size:clamp(28px,3.4vw,40px);font-weight:600;color:var(--fss-ink);line-height:1.2;margin:0}
.ind__intro{max-width:620px;font-size:18px;line-height:1.6;color:var(--fss-body);margin:10px 0 0}
.ind__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:stretch;margin-top:28px;
  opacity:0;transform:translateY(32px);transition:opacity .8s ease-out,transform .8s ease-out}
.ind.is-visible .ind__grid{opacity:1;transform:none}

/* image panel */
.ind__image{position:relative;border-radius:16px;overflow:hidden;min-height:440px}
.ind-photo{position:absolute;inset:0;opacity:0;transition:opacity .25s ease}
.ind-photo.is-active{opacity:1}
.ind-photo__spot{position:absolute;inset:0;background:radial-gradient(60% 50% at 82% 14%,rgba(255,255,255,.28),transparent 70%)}
.ind-photo__label{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);text-align:center;color:rgba(255,255,255,.55);font-size:13px;font-weight:600;letter-spacing:.28em}
.ind-photo__scrim{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 45%,rgba(4,31,56,.7) 100%)}
.ind-photo__cap{position:absolute;left:26px;bottom:22px;color:#fff}
.ind-photo__cap-num{font-size:18px;font-weight:400;opacity:.85}
.ind-photo__cap-title{font-size:clamp(26px,2.6vw,36px);font-weight:600;line-height:1.1;margin-top:2px}
.ind-photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* placeholder gradients (replaced by a real photo when the image field is filled) */
.ind-photo--1{background:linear-gradient(150deg,#0d4a72,#06243c)}
.ind-photo--2{background:linear-gradient(150deg,#6b4a2f,#2f1f12)}
.ind-photo--3{background:linear-gradient(150deg,#3f7fb0,#16324a)}
.ind-photo--4{background:linear-gradient(150deg,#5a4b84,#241c3c)}
.ind-photo--5{background:linear-gradient(150deg,#2f6b4a,#143426)}
.ind-photo--6{background:linear-gradient(150deg,#6b6b2f,#2f2f12)}

/* list */
.ind__list{display:flex;flex-direction:column;gap:10px}
.ind-row{border:1px solid var(--fss-rowline);border-radius:12px;background:#fff;transition:border-color .3s ease}
.ind-row--open{border-color:var(--fss-gold)}
.ind-row__head{display:flex;align-items:center;gap:14px;width:100%;padding:14px 18px;background:none;border:0;cursor:pointer;text-align:left;font-family:inherit;color:inherit}
.ind-row__head:focus-visible{outline:2px solid var(--fss-gold);outline-offset:2px;border-radius:12px}
.ind-row__num{font-size:15px;font-weight:400;color:#6b7a8d}
.ind-row__title{flex:1;font-size:24px;font-weight:600;color:var(--fss-blue);transition:color .2s ease}
.ind-row__head:hover .ind-row__title{color:var(--fss-ink)}
.ind-row__arrow{font-size:20px;line-height:1;color:var(--fss-gold);transition:transform .3s ease}
.ind-row--open .ind-row__arrow{transform:rotate(90deg)}
.ind-row__desc{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.ind-row--open .ind-row__desc{grid-template-rows:1fr}
.ind-row__desc-inner{overflow:hidden}
.ind__list.is-measuring .ind-row__desc{transition:none}  /* height measurement (template script) must not animate */
.ind-row__desc p{margin:0;padding:0 18px 16px 46px;font-size:18px;line-height:1.6;color:var(--fss-body)}
.ind__cta{text-align:center;margin-top:47px}
.ind__cta .fss-pill--dark:hover{background:#d21f26;border-color:#d21f26;color:#fff}

@media (max-width:819px){
  .ind__grid{grid-template-columns:1fr}
  .ind__image{min-height:240px}
}

/* =====================================================================
   Reduced motion — show everything at once, no movement
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .hero__inner>*,.sp-intro>*,.sp-card,.ind__grid{opacity:1!important;transform:none!important;transition:none!important}
  .hero__scroll i::after{animation:none}
  @media (hover:hover){.sp-cards.is-visible .sp-card:hover{transform:none}}
}

/* Screen 1 + Screen 2 on-entry fade (load for hero, in-view for intro) */
.hero__inner>*{opacity:0;transform:translateY(24px);transition:opacity .9s ease-out,transform .9s ease-out}
.hero.is-visible .hero__inner>*{opacity:1;transform:none}
.hero.is-visible .hero__inner>*:nth-child(2){transition-delay:.15s}
.hero.is-visible .hero__inner>*:nth-child(3){transition-delay:.3s}
.sp-intro>*{opacity:0;transform:translateY(24px);transition:opacity .9s ease-out,transform .9s ease-out}
.sp-intro.is-visible>*{opacity:1;transform:none}
.sp-intro.is-visible>*:nth-child(2){transition-delay:.12s}
.sp-intro.is-visible>*:nth-child(3){transition-delay:.24s}

/* buttons do not inherit the page font by default: reconnect the form button to the global Instrument Sans */
.fss button,.fss input,.fss select,.fss textarea{font-family:inherit}