/* ==========================================================================
   COTA — theme layer (loaded last). Layout lives in style.css / pages.css / responsive.css.
   Palette (sampled from the client's reference image):
             dark teal  #051a22  ·  light teal-blue  #1e6382 (buttons, bands; hover #2f7fa3)
             pale tint  #edf4f7 (light sections)  ·  deep  #02101a (footer)  ·  soft teal  #8cc4db (accents on dark)
   Rhythm:   dark → light → teal band → dark …  so no section blends into the next.
   (Variable names --blue / --navy-deep are historic; the values are the teal palette.)
   ========================================================================== */
:root {
  --blue: #1e6382;
  --blue-hi: #2f7fa3;
  --navy-deep: #02101a;
  --ice: #edf4f7;
  --surface: #0b2a36;
  --f-text: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Barlow", "Helvetica Neue", Arial, sans-serif;   /* labels, nav and buttons use Barlow */
}

/* ---------- type: paragraphs, buttons, nav, form text in Barlow ---------- */
p, li, input, textarea, select, dd, dt { font-family: var(--f-text); }
.btn, .add-to-bag, .chip, .bag-close, .acc-btn { font-family: var(--f-text); }
.btn { font-size: 14px; font-weight: 600; letter-spacing: .07em; }
.btn--small { font-size: 13px; }
.btn--large { font-size: 15px; }
.add-to-bag { font-size: 12px; font-weight: 600; letter-spacing: .07em; }
.mono { font-weight: 500; letter-spacing: .08em; }
p { font-size: 1.06em; }

/* ---------- header: a plain, confident wordmark and navigation ---------- */
.brand { gap: 14px; }
.brand-mark { width: 54px; height: 54px; }
.brand-name { font-size: 15px; font-weight: 700; letter-spacing: .06em; line-height: 1.15; }
.primary-nav a { font-size: 15px; font-weight: 600; letter-spacing: .05em; }
.bag-link { font-size: 15px; font-weight: 600; letter-spacing: .05em; }
.site-header.is-scrolled { background: rgba(5,26,34, .88); }

/* no arrow glyphs on buttons */
.btn svg, .btn b { display: none; }
.btn { gap: 0; }

/* ---------- remove decorative micro-labels, numbering and placeholder captions ---------- */
.label, .visual-cap, .portal-label, .ph-label, .hero-eyebrow, .hero-meta, .statement-meta { display: none; }

/* ---------- buttons: electric blue, white text ---------- */
.btn--accent, .pdp-buy .add-to-bag,
.add-to-bag:hover, .add-to-bag.is-solid,
.chip[aria-pressed="true"], .topic-chips input:checked + label,
.skip-link { background: #2a7a9c; border-color: #5aa9c9; color: #fff; }   /* a step brighter than the bands so buttons stand out on teal */
.btn:hover, .btn:focus-visible { color: var(--bg); }
.btn--accent:hover, .btn--accent:focus-visible { border-color: var(--text); }
.consent input:checked { background: var(--blue); border-color: var(--blue-hi); }
::selection { background: var(--blue); color: #fff; }
.cursor.is-label::before { background: var(--blue); }
.cursor-label { color: #fff; }

/* ---------- hero: a soft blue glow behind the record ---------- */
.hero-pin { background:
  radial-gradient(75% 105% at 88% 38%, #256886 0%, #164d66 30%, rgba(22, 77, 102, 0) 68%),
  linear-gradient(100deg, #051a22 0%, #051a22 38%, #0a2c3d 72%, #0f3a50 100%); }
.hero-title { text-shadow: 0 2px 40px rgba(5,26,34, .45); }
.hero-line--c .serif-i { color: #a9d6e8; }

/* ---------- light sections ---------- */
.manifesto, .services, .store, .process, .statement, .who, .faq, .store-main, .principles-big {
  --bg: var(--ice); --surface: #dceaf0; --text: #051a22; --muted: #4c6572; --accent: var(--blue);
  --border: rgba(5,26,34, .22); --border-s: rgba(5,26,34, .1);
  background: var(--bg); color: var(--text);
}
.manifesto .tri-outline { color: #f2f8fa; }
.light-shadow, .store .product-sleeve, .store-main .product-sleeve { box-shadow: 0 26px 44px -26px rgba(5,26,34, .55); }
.store::before { display: none; }
.service.is-active .service-num { color: var(--blue); }
.service-bignum { text-shadow: none; }

/* ---------- blue accent bands ---------- */
.marquee { --bg: var(--blue); --text: #fff; background: var(--blue); border-color: rgba(255, 255, 255, .2); }
.marquee-row--b .marquee-track span { -webkit-text-stroke: 1px rgba(255, 255, 255, .8); }
.cta-band {
  --bg: var(--blue); --text: #fff; --muted: #d3e6ee; --accent: #d3e6ee;
  --border: rgba(255, 255, 255, .4); --border-s: rgba(255, 255, 255, .22);
  background: var(--blue); color: #fff;
}
.cta-band .btn--accent { background: #fff; border-color: #fff; color: #051a22; }
.cta-band .btn--accent:hover, .cta-band .btn--accent:focus-visible { color: var(--blue); }

/* ---------- deeper navy for the closing sections ---------- */
.site-footer { background: var(--navy-deep); }
.contact { background: var(--bg); }
.distribution { background: var(--surface); }

/* ---------- placeholder imagery sits in the navy / blue palette ---------- */
main img, .hero-portal img { filter: sepia(1) hue-rotate(150deg) saturate(2.2) brightness(.92); }
.product-sleeve { filter: sepia(1) hue-rotate(156deg) saturate(1.8) brightness(.95); }

/* sticky filter bar stays solid navy over the light product grid */
.store-bar { background: rgba(5,26,34, .97); }

/* hero is a plain section now: no scroll-driven circle wipe */
.hero-portal { display: none; }