/* =====================================================================
   GENERATED FILE -- DO NOT EDIT.

   Built from _source/assets/site.css by _dev/generate/theme-assets.mjs. Edit the
   snapshot and regenerate; a hand edit here fails the gate at commit
   rather than surviving to contradict its source. The snapshot is frozen:
   it has been the design of record since 2026-10-08 (frozenOn in its
   source.json), so it is edited in place and never re-synced.

     node _dev/generate/theme-assets.mjs redfish   rebuild this file

   The file below is the static site's stylesheet verbatim, comments and
   all, and unchanged: the tokens, the base, the shared primitives and
   the chrome. It imports its four families from fonts/fonts.css, a
   relative path that holds in the theme too, so no font-path rewrite applies.

   NOTHING WORDPRESS-SPECIFIC GOES IN THIS FILE. Adapter rules that map
   block markup onto these components live in native-adapters.css, which
   is hand-written and loads after this one. Keeping them apart is what
   lets this copy stay diffable against the original.
   ===================================================================== */

/* ════════════════════════════════════════════════════════
   REDFISH MARINE INC, the site sheet
   Red / white / black · Bricolage Grotesque + Newsreader.
   The tokens, the base, the shared primitives (buttons, the photo slot,
   the section shell, scroll reveal) and the chrome: the header and the
   footer. Every page links it first; each section's own rules are in
   assets/components/<name>.css, scoped under .c-<name>.
   ════════════════════════════════════════════════════════ */
@import url('fonts/fonts.css');
/* Bricolage Grotesque, Newsreader, Oswald and Roboto Slab, served from fonts/. */
:root {
  --ink: #111111; --ink-2: #1e1e1e; --ink-soft: #333333;
  --bg: #f2f4f5; --surface: #ffffff; --fg: #11212e; --muted: #5c6b78; --faint: #64707a;
  --border: #e3e8eb; --line: #d7dee2;
  --accent: #c8102e; --accent-on: #ffffff; --accent-ink: #a60e26; --accent-light: #ef3b54;
  --font-display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, monospace;
  --max: 1240px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px;
  --ease: cubic-bezier(.22,.61,.36,1);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.04; letter-spacing: -0.02em; margin: 0; }
/* 1.04 suits a 50px display line and collides once a card heading wraps, so the
   smaller levels take their own leading and lighter tracking. */
h2 { line-height: 1.08; }
h3,h4 { line-height: 1.2; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
.eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .6; }
.eyebrow.center::before { display: none; }
.muted { color: var(--muted); }

/* ── buttons ── */
.btn { --bg-btn: var(--ink); --fg-btn: #fff; --bd: transparent; display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 15px; font-weight: 600; padding: 13px 22px; border-radius: 999px; background: var(--bg-btn); color: var(--fg-btn); border: 1px solid var(--bd); cursor: pointer; transition: transform .25s var(--ease), background .2s, color .2s, border-color .2s; white-space: nowrap; }
.btn .arr { transition: transform .25s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:hover .arr { transform: translateX(3px); }
.btn-accent { --bg-btn: var(--accent); --fg-btn: var(--accent-on); }
.btn-accent:hover { --bg-btn: var(--accent-ink); }
.btn-line { --bg-btn: transparent; --fg-btn: var(--fg); --bd: var(--line); }
.btn-line:hover { --bd: var(--fg); }
.btn-ghost-light { --bg-btn: transparent; --fg-btn: #fff; --bd: rgba(255,255,255,.34); }
.btn-ghost-light:hover { --bd: #fff; }
.btn:active { transform: translateY(0); }

/* ── skip link + screen-reader-only text. These were inline on the home page
      only, so the other four pages had no way to bypass the header. ── */
.skip-link {
  position: absolute; left: 12px; top: 12px; z-index: 999;
  transform: translateY(-160%);
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }
main:focus { outline: none; }
main#main:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── focus visibility (WCAG 2.4.7 / 2.4.13): keyboard users get a clear ring ── */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── photo slot (placeholder + real image) ── */
.shot { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-md); background: radial-gradient(130% 120% at 78% 8%, #3a3a3a 0%, var(--ink-2) 42%, var(--ink) 100%); color: #d6d6d6; }
.shot::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: repeating-linear-gradient(90deg, transparent 0 46px, rgba(255,255,255,.045) 46px 47px), repeating-linear-gradient(0deg, transparent 0 46px, rgba(255,255,255,.045) 46px 47px); mask-image: radial-gradient(120% 100% at 50% 40%, #000 35%, transparent 78%); }
.shot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 0; background: linear-gradient(to top, rgba(0,0,0,.34), transparent); }
.shot > .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.shot-label { position: absolute; z-index: 2; left: 16px; bottom: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,.92); display: inline-flex; align-items: center; gap: 8px; }
.shot-label::before { content: ""; width: 13px; height: 13px; border-radius: 3px; border: 1.5px solid rgba(255,255,255,.6); background: linear-gradient(135deg, transparent 45%, rgba(255,255,255,.6) 45% 55%, transparent 55%); }
.shot-tag { position: absolute; z-index: 2; top: 14px; left: 14px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); background: rgba(255,255,255,.9); border-radius: 999px; padding: 5px 11px; }

/* ════ HEADER ════ */
header.site { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: saturate(150%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; }
header.site.scrolled { border-bottom-color: var(--border); background: color-mix(in srgb, var(--bg) 92%, transparent); }
.brand { display: flex; align-items: center; gap: 12px; }
.mark { width: 38px; height: 38px; flex: none; border-radius: 9px; background: var(--ink); display: block; }
.brand b { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; line-height: 1; }
.brand small { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }

/* ════ SITE HEADER, industrial (integrated from industrial-6, "Slate Chips") ════
   Big diagonal logo cell + centered cert chips and CTAs, over a centered navy
   menu bar topped by a solid 6px red line matching the diagonal seam. Scoped
   under header.site so it overrides the compact bar above without disturbing
   page styles. .brand, .mark and the lockup type above are the footer's. Demo
   swatch chrome from the variation file is NOT carried in. */
header.site {
  --font-cond: "Oswald", var(--font-display);
  --font-slab: "Roboto Slab", var(--font-serif);
  --navy: #0c1a24; --navy-2: #12283a; --seam: 84px;
  /* sticks at a negative offset ≈ the brand-row height, so as you scroll the
     brand row slides up out of view and only the menu bar stays pinned. */
  position: sticky; top: -173px; z-index: 60;
  background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 0; overflow: hidden;
}
header.site.scrolled { background: var(--surface); border-bottom: 0; }
header.site .row { display: flex; align-items: stretch; min-height: 174px; }
header.site .darkcell { position: relative; flex: 0 0 clamp(360px, 46%, 540px); display: flex; align-items: center; gap: 22px;
  background: linear-gradient(100deg, #05131c, #10222f 74%); color: #fff;
  padding-left: clamp(20px, 5vw, 40px); padding-right: calc(26px + var(--seam)); padding-block: 16px;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--seam)) 100%, 0 100%); }
header.site .darkcell > * { position: relative; z-index: 1; }
header.site .darkcell .brand { display: block; }
header.site .logo-img { display: block; width: auto; height: 120px; filter: drop-shadow(0 8px 20px rgba(0,0,0,.45)); }
header.site .brandtext { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
header.site .brandtext .eyebrow { font-family: var(--font-cond); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-size: 11.5px; color: rgba(255,255,255,.6); display: block; }
header.site .brandtext .eyebrow::before { display: none; }
header.site .brandtext .tag { font-family: var(--font-slab); font-size: 14px; line-height: 1.3; letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.78); max-width: 22ch; margin: 0; }
header.site .seam { position: relative; width: 0; align-self: stretch; z-index: 2; }
header.site .seam::before { content: ""; position: absolute; top: 0; bottom: 0; left: -10px; width: 6px; background: var(--accent); transform: skewX(-26deg); }
header.site .lightcell { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding-left: 40px; padding-right: clamp(20px, 5vw, 40px); padding-block: 16px; min-width: 0; }
header.site .certline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
header.site .certchip { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .06em; font-size: 13px; display: flex; align-items: center; gap: 7px; white-space: nowrap;
  background: rgba(12,26,36,.06); color: var(--fg); padding: 7px 14px; border-radius: 999px; border: 1px solid transparent; }
header.site .certchip .ck { color: var(--accent); font-size: 13px; }
header.site .actions { display: flex; align-items: center; gap: 12px; justify-content: center; }
/* header buttons take the industrial squared / uppercase treatment */
header.site .btn { font-family: var(--font-cond); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 12px 20px; border-radius: 6px; }
header.site .btn-call { --bg-btn: #fff; --fg-btn: var(--fg); --bd: var(--line); padding: 8px 16px; }
header.site .btn-call .phi { color: var(--accent); font-size: 17px; line-height: 1; }
header.site .btn-call .ct { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; gap: 1px; }
header.site .btn-call .ct small { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .1em; font-size: 9.5px; font-weight: 600; color: var(--muted); }
header.site .btn-call .ct b { font-family: var(--font-slab); font-weight: 600; font-size: 15px; color: var(--fg); letter-spacing: .01em; }
header.site .btn-call:hover { --bd: var(--accent); }
header.site .btn-call:hover .ct small { color: var(--accent-ink); }
header.site .botedge { position: relative; z-index: 2; margin-top: -1px; background: var(--navy); border-top: 6px solid var(--accent); }
header.site .menu { max-width: var(--max); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); height: 50px; display: flex; align-items: center; gap: 2px; justify-content: center; }
header.site .menu a { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .09em; font-weight: 500; font-size: 13.5px; color: rgba(255,255,255,.72); padding: 9px 15px; border-radius: 6px; transition: color .18s, background .18s; }
header.site .menu a:hover, header.site .menu a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.08); }
/* mobile: "Centered Stack", logo front and centre on the dark cell, cert
   chips small in a single row, Call today + Request estimate side by side,
   then the navy menu. Stays sticky; JS sets the exact collapse offset so the
   menu bar pins to the top on scroll, the same as desktop. */
@media (max-width: 900px) {
  header.site .row { flex-direction: column; min-height: 0; }
  header.site .darkcell { flex: none; width: 100%; clip-path: none; flex-direction: column; align-items: center; text-align: center;
    gap: 8px; padding: 20px clamp(16px, 5vw, 28px) 18px; }
  header.site .darkcell .brand { display: block; }
  header.site .logo-img { height: 76px; }
  header.site .brandtext { align-items: center; }
  header.site .brandtext .tag { display: none; }
  header.site .seam { display: none; }
  header.site .lightcell { align-items: center; border-top: 0; gap: 12px; padding: 14px clamp(16px, 5vw, 28px); }
  header.site .certline { flex-wrap: nowrap; gap: 7px; }
  header.site .certchip { font-size: 10.5px; padding: 6px 10px; }
  header.site .certchip .ck { font-size: 11px; }
  header.site .actions { width: 100%; gap: 10px; align-items: stretch; }
  header.site .actions > .btn { flex: 1 1 0; justify-content: center; }
  header.site .btn-call { padding: 8px 10px; }
  header.site .btn-call .ct { align-items: center; }
  header.site .menu { max-width: none; flex-wrap: wrap; height: auto; padding-block: 8px; gap: 2px 4px; }
}
@media (max-width: 400px) {
  header.site .certline { gap: 6px; }
  header.site .certchip { font-size: 9.5px; padding: 5px 8px; gap: 4px; }
  header.site .btn-call .ct b { font-size: 13px; }
}

/* ════ SECTION SHELL ════ */
section.block { padding-block: clamp(36px, 5.5vw, 72px); }
/* the home page's sections breathe more */
section.block.block--roomy { padding-block: clamp(56px, 8vw, 110px); }
.sec-head { max-width: 62ch; }
.sec-head h2 { font-size: clamp(30px, 4.2vw, 50px); margin-top: 16px; }
.sec-head p { color: var(--muted); font-size: clamp(17px, 1.5vw, 19px); margin-top: 16px; max-width: 54ch; }

/* ════ FOOTER ════ */
footer.site { background: var(--surface); border-top: 1px solid var(--border); }
footer.site .wrap { padding-block: clamp(36px, 4.5vw, 56px); }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
.foot-brand p { color: var(--muted); font-size: 15px; margin-top: 16px; max-width: 32ch; }
.foot-grid h4 { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 500; margin: 0 0 16px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.foot-grid li, .foot-grid a { color: var(--fg); font-size: 15px; }
.foot-grid a:hover { color: var(--accent); }
.foot-note { margin-top: clamp(36px, 5vw, 56px); padding-top: 24px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--faint); font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; }

/* ── scroll reveal ── */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: .07s; } .js .reveal.d2 { transition-delay: .14s; } .js .reveal.d3 { transition-delay: .21s; }

/* ════ RESPONSIVE ════ */
@media (max-width: 880px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .foot-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
}