/* ============================================================
   DEEP SEA ATLANTIC — BOLD DARK THEME
   Single source of truth for all 45 pages.
   Loaded AFTER each page's inline <style>, so it wins on ties.
   To revert the whole site to the light cream theme:
   remove the <link rel="stylesheet" href="dsa-dark.css"> line.
   ============================================================ */

:root{
  /* dark palette */
  --d-base:#0A1A2B;        /* page background */
  --d-deep:#071322;        /* deepest band (footer, proto) */
  --d-panel:#0D2036;       /* alternating section band */
  --d-card:#12293F;        /* elevated card surface */
  --d-card-2:#16314A;      /* hover / nested surface */
  --d-line:#20384F;        /* borders */
  --d-line-2:#2B4763;      /* stronger borders */
  /* dark type ramp */
  --d-head:#FFFFFF;
  --d-body:#B9C7D6;
  --d-muted:#9FB2C6;
  --d-faint:#8397AC;
  /* brighter bronze reads better on dark */
  --bronze:#E42430;
  --bronze-dk:#C41B27;
  --d-bronze-soft:#F4707A;
  --teal:#3C9E72;

/* ---------- TOKEN REMAP ----------
   The light theme's own variables are redefined here. This is what makes
   the reskin reach inline styles (style="color:var(--ink)") that no class
   selector could touch. --navy* deliberately KEEPS its dark value: it is
   used as a background 485 times and only as a text colour in the bounded
   list handled further down. */
  --cream:#0A1A2B; --cream-2:#0D2036; --card:#12293F;
  --ink:#EAF0F6; --ink-soft:#9FB2C6; --line:#20384F;
  --bronze-bg:#2A1216; --teal-bg:#12312A;
}

/* ---------- BASE ---------- */
body{background:var(--d-base) !important; color:var(--d-body) !important;}
main{color:var(--d-body);}
h1,h2,h3,h4,h5{color:var(--d-head) !important;}
p,li,dd,td{color:var(--d-body);}
a{color:var(--d-bronze-soft);}
a:hover{color:var(--bronze-dk);}
hr,.line,.rule{border-color:var(--d-line) !important; background:var(--bronze);}
em,strong,b{color:inherit;}

/* bigger, bolder display type — the "bold" half of bold-dark */
h1{letter-spacing:-.01em;}
h2{font-size:clamp(27px,3.4vw,40px);}

/* ---------- CHROME: proto bar, header, nav, breadcrumb ---------- */
.proto{background:var(--d-deep) !important; color:var(--d-bronze-soft) !important;
       border-bottom:1px solid var(--d-line);}
.header{background:rgba(10,26,43,.90) !important; backdrop-filter:blur(12px);
        border-bottom:1px solid transparent;}
.header.scrolled{border-color:var(--d-line) !important; box-shadow:0 1px 18px rgba(0,0,0,.45) !important;}
.brand .name{color:var(--d-head) !important;}
.navlinks a{color:var(--d-body) !important;}
.navlinks a:hover{color:var(--d-bronze-soft) !important;}
.nav-phone{color:var(--d-head) !important;}
.burger span{background:var(--d-head) !important;}
.mobile-menu{background:var(--d-base) !important;}
.mobile-menu a{color:var(--d-head) !important; border-bottom-color:var(--d-line) !important;}
.crumb{background:var(--d-panel) !important; border-bottom-color:var(--d-line) !important;}
.crumb ol{color:var(--d-muted) !important;}
.crumb a{color:var(--d-muted) !important;}
.crumb a:hover{color:var(--d-bronze-soft) !important;}
.crumb li::after{color:var(--d-line-2) !important;}
.crumb li:last-child{color:var(--d-head) !important;}

/* eyebrow labels stay bronze but brighter on dark */
.eyebrow{color:var(--d-bronze-soft) !important;}

/* ---------- BUTTONS ---------- */
.btn-bronze{background:var(--bronze) !important; color:#0A1A2B !important; font-weight:700;}
.btn-bronze:hover{background:var(--bronze-dk) !important; color:#0A1A2B !important;}
.btn-navy{background:var(--d-card) !important; color:var(--d-head) !important;
          border:1px solid var(--d-line-2);}
.btn-navy:hover{background:var(--d-card-2) !important;}
.btn-outline{background:transparent !important; color:var(--d-head) !important;
             border:1px solid var(--d-line-2) !important;}
.btn-outline:hover{background:rgba(255,255,255,.06) !important; border-color:var(--bronze) !important;}
.btn-outline.light{color:#fff !important; border-color:rgba(255,255,255,.45) !important;}

/* ---------- HEROES (text-only navy heroes on interior pages) ---------- */
.phero,.qhero,.pihero,.chero,.ins-hero,.art-hero,.ab-hero{background:var(--d-deep) !important;}
.phero .bg{background:var(--d-deep) !important;}
.phero .bg::after{background:linear-gradient(95deg,rgba(7,19,34,.96) 0%,rgba(7,19,34,.84) 46%,rgba(7,19,34,.5) 100%) !important;}
.phero .latin,.phero .es{color:var(--d-bronze-soft) !important;}
.phero .latin{color:var(--d-muted) !important;}
.phero .tag{border-color:rgba(255,255,255,.26) !important; color:#D7DEE5 !important;}
.phero .tag.wild{background:var(--bronze) !important; border-color:var(--bronze) !important; color:#0A1A2B !important;}
.phero .tag.fip{background:var(--teal) !important; border-color:var(--teal) !important; color:#fff !important;}

/* ---------- GENERIC SURFACES ---------- */
.card,.fcard,.pcard,.cap-card,.ins-card,.factlist,.teamlist,.netcard,
.certcard,.faccard,.fiplist,.impactcard,.post,.rel,.leader,.mo,.szp,
.sk-table,.mcta,.cform,.cinfo{
  background:var(--d-card) !important;
  border-color:var(--d-line) !important;
  color:var(--d-body) !important;
}
.pcard h3,.fcard h3,.card h3,.post h3,.rel h4,.netcard h3,.certcard h3,.faccard h3{color:var(--d-head) !important;}
.pc-meta,.pc-latin,.rel .l,.qnote,.post .meta{color:var(--d-muted) !important;}
.mo.off{background:var(--d-panel) !important; color:var(--d-faint) !important;}

/* alternating section bands */
#about-seafood,.lead-sec,.qsec.alt,.article blockquote{background:var(--d-panel) !important;}
#about-seafood p,#about-seafood h2,#about-seafood h3{color:inherit;}
#insights,#caps,#catalog,#trace,#sustain,#about,#become,#faq{background:var(--d-base) !important;}
#faq,#about-seafood{background:var(--d-panel) !important;}

/* stat band */
.statband{background:var(--d-deep) !important;}
.stat .n,.s-n,.statline{color:var(--d-bronze-soft) !important;}
.stat .l,.s-l{color:var(--d-faint) !important;}

/* ---------- SPECIES PAGES ---------- */
.blk > h2{border-bottom-color:var(--d-line) !important;}
.blk > h2::after{background:var(--bronze) !important;}

.aside{background:var(--d-card) !important; border-color:var(--d-line) !important;}
.aside h3{color:var(--d-head) !important;}
.aside .es{color:var(--d-bronze-soft) !important;}
.aside .qr .r{border-bottom-color:var(--d-line) !important;}
.aside .qr .r span{color:var(--d-muted) !important;}
.aside .qr .r b{color:var(--d-head) !important;}
.aside .note{color:var(--d-faint) !important;}

.factlist .f{border-bottom-color:var(--d-line) !important;}
.factlist .f span{color:var(--d-muted) !important;}
.factlist .f b{color:var(--d-head) !important;}

.originchips span{background:var(--d-panel) !important; border:1px solid var(--d-line) !important;
                  color:var(--d-body) !important;}

/* SKU presentations table — the biggest contrast risk on species pages */
.skutable,.sk-table{background:var(--d-card) !important; border-color:var(--d-line) !important;}
.skutable th,.sk-table th{background:var(--d-panel) !important; color:var(--d-bronze-soft) !important;
                          border-bottom-color:var(--d-line-2) !important;}
.skutable td,.sk-table td{color:var(--d-body) !important; border-bottom-color:var(--d-line) !important;}
.skutable td.pres,.sk-table td.pres{color:var(--d-head) !important;}
.skutable td.sz,.sk-table td.sz{color:var(--d-muted) !important;}
.skutable tbody tr:nth-child(even) td{background:rgba(255,255,255,.022);}

/* FAQ accordions */
.faq details{background:var(--d-card) !important; border-color:var(--d-line) !important;}
.faq summary{color:var(--d-head) !important;}
.faq summary::after{color:var(--bronze) !important;}
.faq .ans{color:var(--d-body) !important;}

/* related species cards */
.rel:hover{box-shadow:0 14px 32px rgba(0,0,0,.5) !important; background:var(--d-card-2) !important;}
.rel .m{color:var(--d-bronze-soft) !important;}

/* request-pricing band */
.reqband{background:var(--d-panel) !important; border:1px solid var(--d-line) !important;}
.reqband h3,.reqband h2{color:var(--d-head) !important;}
.reqband p{color:var(--d-body) !important;}

/* ---------- CATALOG (dsa-products) ---------- */
.catnav{background:var(--d-panel) !important; border-color:var(--d-line) !important;}
.catnav a{background:var(--d-card) !important; color:var(--d-body) !important;
          border:1px solid var(--d-line) !important;}
.catnav a:hover,.catnav a.on{background:var(--bronze) !important; color:#0A1A2B !important;
                             border-color:var(--bronze) !important;}
.catcount{color:var(--d-muted) !important;}
.pcard:hover{background:var(--d-card-2) !important; box-shadow:0 16px 36px rgba(0,0,0,.5) !important;}
.pc-more{color:var(--d-bronze-soft) !important;}
.pc-pad{color:var(--d-body) !important;}

/* branded placeholder panel for the 23 unphotographed species —
   already navy, just align it to the new base and give it a bronze edge */
.pc-imgph{background:linear-gradient(150deg,#153554 0%,#0C1E33 100%) !important;
          color:var(--d-head) !important; border:1px solid var(--d-line) !important;}

/* ---------- QUALITY / SUSTAINABILITY ---------- */
.intro{color:var(--d-body) !important;}
.certs span,.faccard .certs span{background:var(--d-panel) !important; color:var(--d-body) !important;
                                 border:1px solid var(--d-line) !important;}
.verify{color:var(--d-muted) !important;}
.loc{color:var(--d-muted) !important;}
.fiprow{border-bottom-color:var(--d-line) !important;}
.fiprow:hover{background:var(--d-card-2) !important;}
.vf{color:var(--d-muted) !important;}
.sp{color:var(--d-body) !important;}
.qcta{background:var(--d-panel) !important; border:1px solid var(--d-line) !important;}

/* ---------- ABOUT ---------- */
.ab-story p,.ab-foot p{color:var(--d-body) !important;}
.ab-callout{background:var(--d-panel) !important; border-left:3px solid var(--bronze) !important;}
.big{color:var(--d-head) !important;}
.teamlist .tmrow{border-bottom-color:var(--d-line) !important;}
.teamlist .tmrow:hover{background:var(--d-card-2) !important;}
.tmn{color:var(--d-head) !important;}
.tmr,.tmd{color:var(--d-muted) !important;}
.tmav{background:var(--d-panel) !important; color:var(--d-bronze-soft) !important;
      border:1px solid var(--d-line) !important;}
.lbl{color:var(--d-bronze-soft) !important;}
.who{color:var(--d-body) !important;}

/* ---------- CONTACT / FORMS (contrast-critical) ---------- */
.cform{background:var(--d-card) !important; border:1px solid var(--d-line) !important;}
.cfield label,.cform label{color:var(--d-body) !important;}
.cfield input,.cfield textarea,.cfield select,
.cform input,.cform textarea,.cform select{
  background:var(--d-panel) !important;
  border:1px solid var(--d-line-2) !important;
  color:var(--d-head) !important;
}
.cfield input::placeholder,.cfield textarea::placeholder,
.cform input::placeholder,.cform textarea::placeholder{color:var(--d-faint) !important;}
.cfield input:focus,.cfield textarea:focus,.cfield select:focus,
.cform input:focus,.cform textarea:focus,.cform select:focus{
  outline:none; border-color:var(--bronze) !important;
  box-shadow:0 0 0 3px rgba(208,123,51,.18) !important;
}
.cfield select option{background:var(--d-panel); color:var(--d-head);}
.cinfo{background:var(--d-card) !important; border:1px solid var(--d-line) !important;}
.cinfo b,.cinfo h3{color:var(--d-head) !important;}
.cseg{border-bottom-color:var(--d-line) !important;}
.cmap{background:var(--d-panel) !important; border:1px solid var(--d-line) !important;
      filter:saturate(.85) brightness(.92);}
.val,.reply{color:var(--d-muted) !important;}
.csuccess{background:rgba(60,158,114,.14) !important; border:1px solid var(--teal) !important;
          color:#BFE6D2 !important;}

/* ---------- INSIGHTS / ARTICLES ---------- */
.post:hover{background:var(--d-card-2) !important; box-shadow:0 14px 32px rgba(0,0,0,.5) !important;}
.post .cat,.post .k,.more{color:var(--d-bronze-soft) !important;}
.post.soon{opacity:.62;}
.post.soon .tag{background:var(--d-panel) !important; color:var(--d-faint) !important;}
.side{color:var(--d-muted) !important;}
.article p,.article li{color:var(--d-body) !important;}
.article h2,.article h3{color:var(--d-head) !important;}
.article blockquote{background:var(--d-panel) !important; border-left:3px solid var(--bronze) !important;
                    color:var(--d-body) !important;}
.lede{color:var(--d-muted) !important;}
.meta{color:var(--d-faint) !important;}
.tip{background:var(--d-panel) !important; border:1px solid var(--d-line) !important;
     color:var(--d-body) !important;}
.art-cta{background:var(--d-panel) !important; border:1px solid var(--d-line) !important;}

/* ---------- FOOTER ---------- */
.footer{background:var(--d-deep) !important; color:var(--d-body) !important;
        border-top:1px solid var(--d-line);}
.footer h4{color:var(--d-bronze-soft) !important;}
.footer a{color:var(--d-body) !important;}
.footer a:hover{color:var(--d-head) !important;}
.footer .brand .name,.footer .nap b{color:var(--d-head) !important;}
.footer-bottom{border-top-color:var(--d-line) !important; color:var(--d-faint) !important;}

/* mobile sticky CTA */
.mcta{background:var(--d-panel) !important; border-top:1px solid var(--d-line) !important;}

/* ============================================================
   DELIBERATE LIGHT EXCEPTIONS
   The 13 product photos are pure-white studio cutouts and the FDA
   nutrition panels are white documents. Floating either on a dark
   background reads as a broken light-theme leftover, so both are
   presented as intentional "specimen plates": a light card with a
   bronze top rule that frames the white as a deliberate choice.
   NOTE: the alternative (knocking the white out of the photos) would
   mean altering real product imagery — against the client rule.
   ============================================================ */
.phero-img{
  background:#F7F4EE !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-top:3px solid var(--bronze) !important;
  box-shadow:0 26px 60px rgba(0,0,0,.55) !important;
}
figure.spec-plate,.nutri-card{
  background:#F7F4EE !important;
  border:1px solid var(--d-line) !important;
  border-top:3px solid var(--bronze) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.45) !important;
  padding:16px !important;
}
figure.spec-plate figcaption{color:#52606B !important;}
.nutri-card img{display:block; width:100%; height:auto;}
.aside-img{background:#F7F4EE !important; border:1px solid var(--d-line) !important;
           border-top:3px solid var(--bronze) !important;}
/* CSS-built FDA panel keeps its black-on-white document look */
.nutri{background:#FFFFFF !important; border:2px solid #15212B !important;}
.nutri h4,.nutri .cal .n,.nutri .nr,.nutri .serv{color:#15212B !important;}
.nutri .nr{border-bottom-color:#D8D2C6 !important;}
.nutri .serv{color:#52606B !important;}

/* ---------- ALTERNATING BAND (was an inline cream style) ---------- */
.band-alt{background:var(--d-panel) !important;}

/* ---------- HOMEPAGE-SPECIFIC (folded in from the inline block) ---------- */
.wrap{max-width:1180px;}
#top .hero-title,.hero h1{font-size:clamp(46px,7vw,86px) !important; line-height:.98 !important;}
.hero .sub{color:var(--d-body) !important;}
.hero-video{filter:saturate(1.05) contrast(1.04);}
.scrolldown{color:var(--d-bronze-soft) !important;}
.cap .ic{background:var(--d-panel) !important; color:var(--bronze) !important;
         border:1px solid var(--d-line) !important;}
.cap p{color:var(--d-body) !important;}
.more{color:var(--d-bronze-soft) !important;}
.center-head .rule{background:var(--bronze) !important;}

/* ---------- NAVY-AS-TEXT OVERRIDES ----------
   Every selector that used color:var(--navy) for emphasis text. Navy on a
   dark base computes to ~1.0:1 contrast (invisible), so each is remapped. */
.brand .name,.nav-phone,.navlinks a:hover,.mobile-menu a,.crumb li:last-child,
.aside .qr .r b,.factlist .f b,.factlist b,.asidefact b,.skutable td.pres,
.sk-table td:first-child,.faq summary,.szp,.mo,.sublbl,.sizerow .lbl,
.originchips span,.catnav a,.faccard .certs span,.fiprow .sp b,
.cap .more,.fcard .more,.ocode .c,.steps li b,.terms .ti b,.field label,
.chip-l,.hp-faq summary,.cinfo .val a,.cinfo .val b,.cfield label,
.netcard .n b,.tmn b,.article blockquote,.btn-outline{
  color:var(--d-head) !important;
}
.seg .opt input:checked + label,.cseg .o input:checked + label{
  color:#0A1A2B !important; background:var(--bronze) !important;
}

/* ---------- CHIPS & TAGS ----------
   .tag.wild / .tag.fip are solid bronze/teal chips — they need dark or white
   text ON the chip, not the bronze eyebrow colour. */
.tag.wild{background:var(--bronze) !important; color:#0A1A2B !important; border-color:var(--bronze) !important;}
.tag.fip{background:var(--teal) !important; color:#FFFFFF !important; border-color:var(--teal) !important;}
.tag:not(.wild):not(.fip){background:var(--d-panel) !important; color:var(--d-bronze-soft) !important;
                          border:1px solid var(--d-line) !important;}
.cap .ic{background:var(--d-panel) !important; color:var(--bronze) !important;}

/* ---------- CARDS MISSED BY CLASS NAME ---------- */
.cap,.fcard{background:var(--d-card) !important; border-color:var(--d-line) !important;}
.cap:hover,.fcard:hover{background:var(--d-card-2) !important; box-shadow:0 16px 36px rgba(0,0,0,.5) !important;}
.cap p,.fcard p{color:var(--d-body) !important;}
.post-cat,.cap .more,.fcard .more{color:var(--d-bronze-soft) !important;}
.fcard .img.placeholder{background:linear-gradient(140deg,#153554,#0C1E33) !important;}

/* ---------- PRODUCT-CARD IMAGE WELL ----------
   Holds the same white studio cutouts as the hero, so it stays a light
   plate for the 13 photographed species. The 23 placeholder panels
   (.pc-imgph) override it back to the branded navy gradient. */
.pc-imgwrap{background:#F7F4EE !important; border-bottom:1px solid var(--d-line) !important;}
.pc-imgph{background:linear-gradient(150deg,#153554 0%,#0C1E33 100%) !important;
          color:var(--d-head) !important; border-bottom:1px solid var(--d-line) !important;}

/* ---------- HOMEPAGE: remaining hardcoded-white surfaces ---------- */
.ocode,.terms,.form-card,.chip,.hp-faq details{
  background:var(--d-card) !important;
  border-color:var(--d-line) !important;
  color:var(--d-body) !important;
}
.chip{color:var(--d-body) !important;}
.chip:hover,.chip.on{background:var(--bronze) !important; color:#0A1A2B !important;
                     border-color:var(--bronze) !important;}
.ocode .n,.ocode .c{color:var(--d-head) !important;}
.hp-faq summary{color:var(--d-head) !important;}
.hp-faq summary::after{color:var(--bronze) !important;}
.hp-faq .ans{color:var(--d-body) !important;}
.form-card label{color:var(--d-body) !important;}
.form-card input,.form-card textarea,.form-card select{
  background:var(--d-panel) !important; border:1px solid var(--d-line-2) !important;
  color:var(--d-head) !important;
}
.form-card input::placeholder,.form-card textarea::placeholder{color:var(--d-faint) !important;}
.terms .ti b{color:var(--d-head) !important;}

/* FIP chip: #3C9E72 only reaches 3.3:1 against white, so the chip darkens
   to hold 4.5:1 while staying visibly teal against the bronze "wild" chip. */
.tag.fip,.phero .tag.fip{background:#1D6B4A !important; border-color:#1D6B4A !important;
                         color:#FFFFFF !important;}

/* Cap the fillet plate so a white-background photo doesn't dominate the
   dark page. Frames the photo rather than letting it become the section. */
figure.spec-plate img{max-height:340px; width:auto; margin:0 auto; display:block;}

/* ---------- HERO VIDEO OVERLAY ----------
   The new footage is markedly brighter than the old clip (sunrise water,
   ice, white coats, yellow gloves), so the scrim is strengthened on the
   left where the headline sits and a bottom vignette carries the eye into
   the dark stat band below. Without this, white type sits on white ice. */
.hero-bg::after{
  background:
    linear-gradient(95deg, rgba(7,19,34,.92) 0%, rgba(7,19,34,.76) 38%,
                           rgba(7,19,34,.44) 72%, rgba(7,19,34,.28) 100%),
    linear-gradient(to bottom, rgba(7,19,34,.30) 0%, rgba(7,19,34,0) 28%,
                               rgba(7,19,34,0) 62%, rgba(10,26,43,.85) 100%)
    !important;
}
.hero{min-height:680px;}
.hero-video{filter:saturate(1.06) contrast(1.03);}

/* ---------- NAV: prevent wrapping at mid-widths ---------- */
.brand .name{white-space:nowrap;}
.nav-right .btn{white-space:nowrap;}
.navlinks{white-space:nowrap;}
@media (max-width:1150px){ .nav-phone{display:none;} }

/* ---------- FIX: contact info panel had no padding ----------
   .cinfo was a bare transparent container in the light theme, so it never
   needed padding. Giving it a card surface exposed that — text sat flush
   against the border. */
.cinfo{padding:30px 32px !important;}
.cinfo .blk:last-child{margin-bottom:0 !important;}

/* ---------- FIX: nutrition panel scale ----------
   Source panels are 900x1500 and were rendering ~520px wide, which made the
   FDA label tower over 17px body copy. 340px is close to the ~2.6in printed
   width of a real panel and sits correctly against the surrounding text. */
.nutri-card{max-width:340px !important; padding:12px !important;}
.nutri-card img{width:100%; height:auto; display:block;}

/* Sidebar product photo removed — hero carries the single photo now. */
.aside-img{display:none !important;}

/* Placeholder flag in the prototype band */
.proto{font-weight:500;}

/* ---------- REAL LOGO ----------
   Client-supplied assets. The header uses the white knockout mark on the
   dark chrome; the navy mark is the <img> fallback so print and any
   light context still resolve correctly. Wordmark stays live HTML text
   (already white, stays crisp and selectable, and keeps the brand name
   in the DOM for search and AI extraction rather than locked in a raster). */
picture.mark, .brand picture.mark{display:inline-flex; align-items:center;}
.brand picture.mark img{height:34px; width:auto; display:block;}
.footer .brand picture.mark img{height:30px;}
.brand{display:inline-flex; align-items:center; gap:12px;}
.brand .name{font-family:var(--disp); font-weight:800; letter-spacing:.02em;}

@media print{
  .brand picture.mark img{height:30px; content:url("img/logo-mark.png");}
}

/* legacy .brand .mark was a 30x30 square sized for the old SVG glyph;
   the real mark is 1.78:1 so the square box squashed it. */
.brand picture.mark{width:auto !important; height:auto !important;}
.brand .mark img{height:34px !important; width:auto !important; max-width:none !important;}
.footer .brand .mark img{height:28px !important;}

/* the real mark is wider than the old square glyph, so the header needs
   a little room back at mid widths */
.brand .mark img{height:30px !important;}
.brand{gap:10px !important;}
.brand .name{font-size:15.5px;}
.navlinks{gap:20px !important;}
@media (max-width:1240px){ .nav-phone{display:none;} }

/* nav collapsed to the burger only at 760px, but with the real logo the
   links overflow from ~1000px down. Collapse earlier. */
@media (max-width:1000px){
  .navlinks,.nav-phone{display:none !important;}
  .burger{display:block !important;}
  .nav-right .btn{display:none !important;}
}

/* PRE-EXISTING MOBILE BUG (not theme-related): the seven origin-code tiles
   sat in a non-wrapping flex row, forcing 791px of horizontal scroll on a
   390px screen and dragging the whole page sideways. */
.codes{flex-wrap:wrap !important; justify-content:center;}
@media (max-width:520px){ .codes{gap:8px !important;} .ocode{min-width:78px !important; padding:12px 14px !important;} }

/* ---------- BRAND LOCKUP ----------
   Real client asset. The horizontal lockup already contains the wordmark,
   so the old .name text span was removed rather than duplicated beside it.
   The reversed (white) version is generated from the client's own
   DSA_Horizontal.png — ink mapped to white, red jib #E42430 preserved. */
.brand{display:inline-flex; align-items:center; gap:0;}
.brand .mark{height:34px; width:auto; display:block;}
.footer .brand .mark{height:38px;}
@media (max-width:760px){ .brand .mark{height:28px;} }

/* ---------- FIX: footer bottom bar ----------
   .footer a is display:block for the footer link columns, which made the
   Insights / Privacy / Terms links in the bottom bar stack vertically and
   stranded the separator dots on their own lines. Scope them back to inline. */
.footer-bottom{align-items:center;}
.footer-bottom span{display:inline;}
.footer-bottom a{display:inline !important; padding:0 !important; white-space:nowrap;}

/* ---------- CONTACT FORM: validation + honeypot ---------- */
/* Honeypot must be invisible to humans but reachable by bots — so it is
   moved off-screen rather than display:none, which some bots skip. */
.hp-field{position:absolute !important; left:-9999px !important; top:auto;
          width:1px; height:1px; overflow:hidden;}
.cfield .req{color:var(--bronze); font-weight:700;}
.cfield .err{display:block; color:#FF9B8A; font-size:13px; margin-top:6px; min-height:0;}
.cfield .err:empty{display:none;}
.cfield input[aria-invalid="true"],.cfield textarea[aria-invalid="true"]{
  border-color:#C4553F !important; box-shadow:0 0 0 3px rgba(196,85,63,.16) !important;}
.cerror{color:#FF9B8A; font-size:14px; margin:0 0 14px; line-height:1.5;}
.cerror:empty{display:none;}
.cbanner{background:rgba(196,85,63,.14); border:1px solid #C4553F; color:#FFC4B8;
         padding:14px 16px; margin:0 0 20px; font-size:14.5px; line-height:1.55;}
.privnote{font-size:12.5px; color:var(--d-faint); margin:14px 0 0; line-height:1.55; text-align:center;}
.privnote a{color:var(--d-bronze-soft);}
#cBtn[disabled]{opacity:.6; cursor:not-allowed;}

/* Preview-mode notice on the contact form (file:// only, never on the live site) */
.previewnote{background:#2A1216; border:1px solid var(--bronze); color:#F7B9BE;
             padding:14px 16px; margin:22px 0 0; font-size:13.5px; line-height:1.6;
             text-align:left;}
.previewnote b{color:var(--d-bronze-soft);}

/* ---------- HOMEPAGE FEATURE CARDS ----------
   The product photos are white studio cutouts. Used as a full-bleed
   `cover` background they were scaled up far past their natural size and
   the white bled through the gradient. They are presented as light plates
   instead — same "specimen plate" treatment as the species hero and the
   catalog cards, so all three read as one system. */
.fcard .img.plate,.feat-main .img.plate{
  background-color:#F7F4EE !important;
  background-size:contain !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  border-bottom:1px solid var(--d-line);
}
.feat-main{min-height:0 !important; justify-content:flex-start !important;
           background:var(--d-card); border:1px solid var(--d-line);}
.feat-main .img.plate{position:relative !important; inset:auto !important;
                      height:330px; border-top:3px solid var(--bronze);}
.feat-main .img.plate::after{display:none !important;}   /* kill the overlay gradient */
.feat-main .inner{padding:28px 30px 30px;}
.feat-main h3{color:var(--d-head) !important;}
.feat-main .latin{color:var(--d-muted) !important;}
.feat-main p{color:var(--d-body) !important;}
.feat-main .tags{margin-bottom:14px;}
@media (max-width:900px){ .feat-main .img.plate{height:230px;} }

/* ---------- UNIFORM PRODUCT PLATES ----------
   Card images are pre-composited onto a white 3:2 canvas (img/plate/), so the
   plate colour matches the photo background exactly and every card crops the
   same way. Previously a cream plate sat behind a pure-white photo at mixed
   aspect ratios, producing visible bands down the sides of each card. */
.fcard .img.plate,.feat-main .img.plate,.pc-imgwrap{
  background-color:#FFFFFF !important;
  background-size:cover !important;
  background-position:center !important;
}
.pc-imgwrap img{object-fit:cover; width:100%; height:100%; display:block;}
.feat-main .img.plate{height:340px;}
.fcard .img.plate{height:190px;}

/* ---------- SPECIES HERO PLATE ----------
   Was a 360px card with 20px padding holding an image that already carried
   its own white margin — so the fish sat small inside two nested frames.
   The plate images now carry a consistent 6% margin, so the card frames the
   image edge-to-edge and the subject reads at full size. */
.phero-img{
  padding:0 !important;
  height:auto !important;
  aspect-ratio:3/2;
  width:100%;
  border-radius:10px !important;
  overflow:hidden;
  background:#FFFFFF !important;
  border-top:4px solid var(--bronze) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.5) !important;
}
.phero-img img{
  width:100% !important; height:100% !important;
  max-width:none !important; max-height:none !important;
  object-fit:cover !important; border-radius:0 !important;
}
/* give the image column a little more room in the hero */
.phero-grid{grid-template-columns:1.1fr 1fr !important;}
@media (max-width:760px){ .phero-grid{grid-template-columns:1fr !important;} }
/* border-box so the 1px sides and 4px bronze top rule don't leave a gap */
.phero-img{box-sizing:border-box;}
.phero-img img{display:block;}

/* ---------- DSA RED ON DARK ----------
   Brand red #E42430 is the correct accent, but on the near-black base it
   only reaches 3.84:1 as text, below the 4.5:1 threshold. So: solid red
   fills keep the exact brand value with white text (4.57:1), while red used
   as TEXT on dark steps up to a lighter tint of the same hue (6.2:1).
   The brand colour is preserved where it is seen as colour; readability
   wins where it is being read as words. */
:root{
  --red:#E42430;          /* brand red, for fills */
  --red-dk:#C41B27;       /* hover on fills */
  --red-text:#F4707A;     /* red as TEXT on dark, 6.23:1 */
  --bronze:#E42430;
  --bronze-dk:#C41B27;
  --d-bronze-soft:#F4707A;
}
.btn-bronze{background:var(--red) !important; color:#FFFFFF !important;}
.btn-bronze:hover{background:var(--red-dk) !important; color:#FFFFFF !important;}
.eyebrow,.pc-more,.more,.post .cat,.post .k,.footer h4,.side,.lbl,
.aside .es,.skutable th,.sk-table th,.article .m,.rel .m,.tag:not(.wild):not(.fip),
.stat .n,.s-n,.statline,.cinfo .lbl,.cfield .req,.hp-faq summary::after,
.faq summary::after,.privnote a,.crumb a:hover,.navlinks a:hover{
  color:var(--red-text) !important;
}
a{color:var(--red-text);}
a:hover{color:#FF9FA6;}
.tag.wild{background:var(--red) !important; border-color:var(--red) !important; color:#FFFFFF !important;}
.blk > h2::after,.center-head .rule,.rule{background:var(--red) !important;}
.phero-img,figure.spec-plate,.nutri-card,.aside-img,.feat-main .img.plate{
  border-top-color:var(--red) !important;
}
.catnav a:hover,.catnav a.on,.chip:hover,.chip.on{
  background:var(--red) !important; color:#FFFFFF !important; border-color:var(--red) !important;
}
.ab-callout,.article blockquote,.tip{border-left-color:var(--red) !important;}
.cfield input:focus,.cfield textarea:focus,.cfield select:focus,
.form-card input:focus,.form-card textarea:focus{
  border-color:var(--red) !important; box-shadow:0 0 0 3px rgba(228,36,48,.20) !important;
}
.cap .ic{color:var(--red-text) !important;}
.previewnote{border-color:var(--red) !important; color:#F7B9BE !important;}
.previewnote b{color:var(--red-text) !important;}
/* remaining red-as-text spots the selector list above didn't reach */
.link,a.link,.qhero .link,.sublbl,.certcard .sub,.certcard small,
.faccard small,.qsec small,.article b.k,.tip b,.ans b{
  color:var(--red-text) !important;
}
.verify b,.verify strong{color:var(--red-text) !important;}

/* ---------- TEAM SECTION (rebuilt) ----------
   Was a flat 12-row table with a department column, which read like a
   staff list rather than a team. Now grouped by function with a card per
   person, so a buyer can find who they'd actually be dealing with. */
.teamlist{background:transparent !important; border:0 !important;}
.tmgroup{margin:0 0 30px;}
.tmgh{font-size:12px !important; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
      color:var(--red-text) !important; margin:0 0 12px; padding-bottom:9px;
      border-bottom:1px solid var(--d-line);}
.tmgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(252px,1fr)); gap:12px;}
.tmcard{display:flex; align-items:center; gap:13px; background:var(--d-card);
        border:1px solid var(--d-line); padding:14px 16px; transition:background .16s,border-color .16s;}
.tmcard:hover{background:var(--d-card-2); border-color:var(--d-line-2);}
.tmcard .tmav{width:40px; height:40px; flex:none; border-radius:50%;
      background:var(--d-panel); border:1px solid var(--d-line-2);
      color:var(--red-text); display:flex; align-items:center; justify-content:center;
      font-family:var(--disp); font-size:14px; letter-spacing:.03em;}
.tmgroup:first-child .tmcard .tmav{background:var(--red); border-color:var(--red); color:#fff;}
.tmbody{display:flex; flex-direction:column; gap:2px; min-width:0;}
.tmbody b{color:var(--d-head); font-family:var(--disp); font-size:16px; letter-spacing:.01em;}
.tmrole{color:var(--d-muted); font-size:13.5px;}
.tmtag{display:inline-block; width:fit-content; font-size:10px; font-weight:700;
       text-transform:uppercase; letter-spacing:.08em; color:#fff; background:var(--red);
       padding:2px 7px; margin:2px 0;}
.tmnote{margin:22px 0 0; font-size:14.5px; color:var(--d-body);}
.tmnote a{color:var(--red-text);}
@media (max-width:520px){ .tmgrid{grid-template-columns:1fr;} }

/* ---------- REAL OPERATIONS BAND (homepage) ----------
   Stills pulled from the client's own footage. Answers the ask for more
   real photography without introducing stock or generated imagery. */
.opsband{background:var(--d-panel); padding:74px 0;}
.opsgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:30px;}
.opsfig{margin:0; position:relative; overflow:hidden; background:var(--d-deep);
        border:1px solid var(--d-line);}
.opsfig.ops-wide{grid-column:span 2;}
.opsfig img{display:block; width:100%; height:230px; object-fit:cover;
            transition:transform .5s ease;}
.opsfig:hover img{transform:scale(1.04);}
.opsfig figcaption{position:absolute; left:0; right:0; bottom:0; padding:26px 16px 12px;
  font-size:13px; color:#EAF0F6;
  background:linear-gradient(to top, rgba(7,19,34,.94), rgba(7,19,34,0));}
@media (max-width:900px){
  .opsgrid{grid-template-columns:repeat(2,1fr);}
  .opsfig.ops-wide{grid-column:span 2;}
  .opsfig img{height:190px;}
}
@media (max-width:560px){
  .opsgrid{grid-template-columns:1fr;}
  .opsfig.ops-wide{grid-column:span 1;}
}
.fhint{display:block; font-size:12.5px; color:var(--d-faint); margin-top:6px;}

/* ---------- BUTTONS: more presence ----------
   The CTA buttons read thin against the bold type. Taller, wider, with a
   slight lift on hover so they feel like the primary action. */
.btn{padding:16px 30px !important; font-size:15.5px !important; letter-spacing:.01em;
     border-radius:2px; font-weight:700 !important;}
.btn-bronze{box-shadow:0 8px 22px rgba(228,36,48,.28);}
.btn-bronze:hover{transform:translateY(-1px); box-shadow:0 12px 28px rgba(228,36,48,.36);}
.btn-outline:hover,.btn-navy:hover{transform:translateY(-1px);}
.qcta .btn,.art-cta .btn,.reqband .btn,.mcta .btn{min-width:210px; justify-content:center;}
.feat-main .btn{padding:14px 24px !important;}
@media (max-width:560px){ .btn{width:100%; justify-content:center;} }

/* ---------- FORM FIELDS: larger targets ---------- */
.field input,.field select,.field textarea,
.cfield input,.cfield select,.cfield textarea,
.form-card input,.form-card select,.form-card textarea,
.cform input,.cform select,.cform textarea{
  width:100% !important; font-size:15.5px !important; padding:14px 16px !important;
  line-height:1.4;
}
.cfield textarea,.form-card textarea{min-height:120px;}
.field label,.cfield label,.cform label{font-size:12.5px; letter-spacing:.1em;}
.cseg .o label,.seg .opt label{padding:14px 12px !important; font-size:14.5px;}
.chip{padding:11px 17px !important; font-size:14px !important;}
/* pricing band: give the CTA room and align it to the copy */
.reqband{padding:34px 36px !important;}
.reqinner{display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;}
.reqinner > div{flex:1 1 340px;}
.reqband .btn{min-width:230px; justify-content:center;}
@media (max-width:640px){ .reqinner{flex-direction:column; align-items:stretch;} }

/* ---------- DARK PRODUCT PLATES ----------
   Client authorised background removal (fish itself unaltered), so every
   product image now sits on the dark base instead of a light plate.
   The white-card / dark-card mismatch in the catalog is resolved. */
.phero-img,.fcard .img.plate,.feat-main .img.plate,.pc-imgwrap{
  background-color:#0D2036 !important;
}
.phero-img{border-top:4px solid var(--red) !important;}
.pc-imgwrap{border-bottom:1px solid var(--d-line) !important;}

/* ---------- TEAM PROFILE CARDS ----------
   Justin asked for each person presented as a real contact/profile with
   their details, rather than a compact directory of names and roles. */
.ppgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:14px;}
.pcard-p{background:var(--d-card); border:1px solid var(--d-line); padding:20px 22px;
         transition:background .16s, border-color .16s, transform .16s;}
.pcard-p:hover{background:var(--d-card-2); border-color:var(--d-line-2); transform:translateY(-2px);}
.pp-top{display:flex; align-items:flex-start; gap:14px;}
.pp-av{width:46px; height:46px; flex:none; border-radius:50%;
       background:var(--d-panel); border:1px solid var(--d-line-2); color:var(--red-text);
       display:flex; align-items:center; justify-content:center;
       font-family:var(--disp); font-size:15px; letter-spacing:.03em;}
.tmgroup:first-child .pp-av{background:var(--red); border-color:var(--red); color:#fff;}
.pp-id{display:flex; flex-direction:column; gap:3px; min-width:0;}
.pp-id b{color:var(--d-head); font-family:var(--disp); font-size:17px; line-height:1.25;}
.pp-role{color:var(--d-muted); font-size:14px; line-height:1.4;}
.pp-tag{display:inline-block; width:fit-content; font-size:10px; font-weight:700;
        text-transform:uppercase; letter-spacing:.08em; color:#fff; background:var(--red);
        padding:2px 7px; margin:1px 0;}
.pp-contact{margin-top:15px; padding-top:14px; border-top:1px solid var(--d-line);
            display:flex; flex-direction:column; gap:8px;}
.pp-contact a{display:flex; align-items:center; gap:9px; font-size:13.5px;
              color:var(--d-body); word-break:break-all; line-height:1.4;}
.pp-contact a:hover{color:var(--red-text);}
.pp-contact svg{flex:none; color:var(--red-text); opacity:.85;}
@media (max-width:520px){ .ppgrid{grid-template-columns:1fr;} }

/* team groups need clear separation between departments */
.tmgroup{margin:0 0 46px !important;}
.tmgroup:last-child{margin-bottom:0 !important;}
.tmgh{margin:0 0 16px !important; padding-bottom:10px !important;}
.teamlist .tmgroup + .tmgroup .tmgh{padding-top:6px;}
/* multi-select species chips */
.chips .chip{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;}
.chips .chip input{width:16px;height:16px;accent-color:var(--red);margin:0;}
.chips .chip:has(input:checked){background:var(--red)!important;color:#fff!important;border-color:var(--red)!important;}
#spOtherText{width:100%;font-size:15.5px;padding:14px 16px;background:var(--d-panel);
  border:1px solid var(--d-line-2);color:var(--d-head);}

/* consolidated size & case-weight table */
.skutable th{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;}
.skutable td.pres{vertical-align:top;font-weight:700;color:var(--d-head)!important;
  border-right:1px solid var(--d-line);}
.skutable td.cw{white-space:nowrap;color:var(--d-body)!important;}
.skutable td.sz{color:var(--d-muted)!important;}
.skutable tbody tr:not(:last-child) td{border-bottom:1px solid var(--d-line);}
/* graded-size table: pack column right-aligned, unreliable pack in italic */
.skutable th.pk,.skutable td.pk{text-align:right;white-space:nowrap;}
.skutable td.pk{color:var(--d-body)!important;}
.skutable .nopack{color:var(--d-faint)!important;font-style:italic;font-size:13px;}
.skutable td.pres{font-weight:700;color:var(--d-head)!important;}
.skutable td.sz{color:var(--d-muted)!important;}
.skutable td.form{white-space:nowrap;color:var(--d-body)!important;}
.skutable .tbc{color:var(--d-faint)!important;font-style:italic;font-size:12.5px;}
/* homepage request form: chips and layout */
.form-card .chips{display:flex;flex-wrap:wrap;gap:8px;}
.form-card .chips .chip{display:inline-flex;align-items:center;gap:8px;
  text-transform:none!important;letter-spacing:0!important;font-weight:500!important;
  font-size:14px!important;padding:10px 14px!important;white-space:nowrap;flex:0 0 auto;}
.form-card .chips .chip input{width:15px;height:15px;accent-color:var(--red);margin:0;flex:none;}
.form-card .moq{margin:2px 0 14px;font-size:13px;color:var(--d-faint);}
.form-card .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:560px){.form-card .row2{grid-template-columns:1fr;}}
/* override the prototype's grid-based chip row */
.form-card .chips{display:flex!important;flex-wrap:wrap!important;gap:8px!important;
  grid-template-columns:none!important;}
.form-card .chips .chip{width:auto!important;min-width:0!important;justify-content:flex-start!important;
  text-align:left!important;overflow:visible!important;}
.form-card .chips .chip{flex:0 0 auto!important;width:max-content!important;
  max-width:100%!important;white-space:nowrap!important;}

/* checkboxes and radios must not inherit the full-width text-input rule */
.field input[type=checkbox],.field input[type=radio],
.cfield input[type=checkbox],.cfield input[type=radio],
.form-card input[type=checkbox],.form-card input[type=radio],
.cform input[type=checkbox],.cform input[type=radio],
.optin input,.spchip input,.seg input,.cseg input{
  width:16px!important;height:16px!important;padding:0!important;
  flex:0 0 16px!important;margin:2px 0 0!important;accent-color:var(--red);
}
.optin{display:flex!important;align-items:flex-start;gap:10px;}
.optin span{flex:1 1 auto;}
/* buyer-type options: equal height, centred, no ragged wrap */
.seg .opt,.cseg .o{display:flex!important;}
.seg .opt label,.cseg .o label{display:flex!important;align-items:center;justify-content:center;
  text-align:center;width:100%;min-height:52px;line-height:1.25;padding:10px 12px!important;}
/* FAQ answers must sit inside the same padding as the question */
.faq details > div{padding:0 18px 16px!important;line-height:1.65;}
.faq details > div p:first-child{margin-top:0;}
.faq details > div p:last-child{margin-bottom:0;}
/* buyer type: grid keeps every option the same size at any width */
.seg,.cseg{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))!important;
  gap:8px!important;}
.seg .opt,.cseg .o{display:block!important;min-width:0!important;}
.seg .opt label,.cseg .o label{min-height:56px;}
@media (max-width:520px){.seg,.cseg{grid-template-columns:1fr 1fr!important;}}
.seg .opt,.cseg .o{height:100%!important;}
.seg .opt label,.cseg .o label{height:100%!important;box-sizing:border-box;}