/* Wireframe skin, loaded after styles.css for the wireframe/ build.
   Same layout and content as the design, drawn as lines and boxes: no color, photos or decoration. */

:root {
  --navy: #2b2b2b;          /* text color for headings and links */
  --navy-900: #2b2b2b;
  --navy-700: #ffffff;
  --navy-600: #9a9a9a;
  --gold: #2b2b2b;
  --gold-600: #555555;
  --gold-100: #ffffff;
  --fleet: #ffffff;
  --white: #ffffff;
  --graphite: #333333;
  --muted: #666666;
  --line: #a8a8a8;
  --line-dark: #a8a8a8;
  --on-navy: #555555;
  --font-head: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --radius: 0;
  --radius-lg: 0;
  --shadow: none;
  --wf-ink: #2b2b2b;
  --wf-stroke: 1.5px solid #8c8c8c;
  --wf-x: linear-gradient(to top right, transparent calc(50% - 0.75px), #b0b0b0 50%, transparent calc(50% + 0.75px)),
          linear-gradient(to bottom right, transparent calc(50% - 0.75px), #b0b0b0 50%, transparent calc(50% + 0.75px));
}

body.wf { background: #fff; color: var(--wf-ink); }
.wf h1, .wf h2, .wf h3, .wf h4 { letter-spacing: 0; font-weight: 700; color: var(--wf-ink); }
.wf h1 em { color: inherit; font-style: normal; }
.wf .lead, .wf p, .wf li, .wf dd, .wf dt, .wf td, .wf th, .wf cite, .wf span, .wf label, .wf legend, .wf summary { color: inherit; }
.wf a { color: var(--wf-ink); }
.wf .muted, .wf .card p, .wf .hint, .wf .meta, .wf .trust__label, .wf .steps p { color: #666 !important; }

/* Former dark regions become plain white regions separated by lines */
.wf :is(.topbar, .site-header, .hero, .page-hero, .section--navy, .section--fleet, .cta-band, .card--navy, .site-footer, .action-bar, .nav, .trust) {
  background: #fff !important; color: var(--wf-ink);
}
.wf :is(.topbar, .site-header, .hero, .page-hero, .section--navy, .cta-band, .path, .card--navy, .site-footer, .action-bar, .nav)
  :is(h1, h2, h3, h4, p, a, cite, dd, dt, span, li, .brand, .nav__link, .lead, strong) { color: var(--wf-ink) !important; }
.wf .topbar { border-bottom: 1px solid var(--line); }
.wf .site-header { border-bottom: 1.5px solid #555; box-shadow: none !important; }
.wf .page-hero, .wf .section--navy, .wf .section--fleet { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.wf .site-footer { border-top: 1.5px solid #555; }
.wf .footer__bottom { border-top-color: var(--line); }
.wf .nav__menu { border: var(--wf-stroke); }

/* Remove decoration */
.wf .hero::before, .wf .hero::after, .wf .page-hero::before, .wf .page-hero::after,
.wf .cta-band::after, .wf .path::before, .wf .eyebrow::before { display: none !important; }
.wf .eyebrow { color: #777 !important; letter-spacing: 0.12em; }

/* Photography → crossed boxes */
.wf .hero__bg, .wf .path__bg { background: var(--wf-x), #f4f4f4 !important; }
.wf .hero { border-bottom: 1px solid var(--line); }
.wf .media { background: var(--wf-x), #f4f4f4; border: var(--wf-stroke); }
.wf .media img, .wf .media__fallback { display: none; }
.wf .media__tag { background: #fff; color: var(--wf-ink); border: 1px dashed #8c8c8c; }
.wf .hero .container > *, .wf .path > :not(.path__bg) { position: relative; background: rgba(255, 255, 255, 0.9); width: fit-content; max-width: 100%; }
.wf .path { border: var(--wf-stroke); min-height: 300px; }
.wf .hero__bg::after, .wf .media::after, .wf .path__bg::after {
  content: "IMAGE"; position: absolute; right: 12px; bottom: 12px;
  font: 700 11px/1 var(--font-body); letter-spacing: 0.14em; color: #777; background: #fff; border: 1px solid #a8a8a8; padding: 5px 7px;
}
.wf .path__bg::after { top: 12px; bottom: auto; }

/* Logo → dashed box */
.wf .brand__mark { display: none; }
.wf .brand::before { content: "LOGO"; display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px dashed #555; font: 700 10px/1 var(--font-body); letter-spacing: 0.1em; color: #555; }
.wf .brand__text span { color: #777 !important; }

/* Cards, tiles, tables → outlined boxes */
.wf .card, .wf .card--navy, .wf .form-card, .wf .faq details { background: #fff; border: var(--wf-stroke) !important; box-shadow: none; }
.wf .card--link:hover { transform: none; }
.wf .cta-band { border: 1.5px solid #555; }
.wf .trust { border-bottom: 1px solid var(--line); }
.wf .trust__item { border-color: var(--line); }
.wf .trust__value { color: var(--wf-ink); }
.wf .facts, .wf .facts--navy { background: var(--line); border-color: var(--line); }
.wf .facts > div, .wf .facts--navy > div { background: #fff; }
.wf .facts dt, .wf .facts--navy dt { color: #777 !important; }
.wf .table { border: var(--wf-stroke); }
.wf .table thead th { background: #eee; color: var(--wf-ink); }
.wf .table th, .wf .table td { border-color: var(--line); }
.wf .notice { background: #fff; border: 1px dashed #8c8c8c; border-left: 4px solid #8c8c8c; }
.wf .quote { border-left-color: #8c8c8c; }
.wf .dept { border-top: 3px solid #555 !important; }

/* Icons → empty squares */
.wf .icon-badge { background: #fff !important; border: 1.5px solid #8c8c8c; }
.wf .icon-badge .i { display: none; }
.wf .icon-badge::after { content: ""; width: 40%; height: 40%; border-radius: 50%; border: 1.5px solid #b0b0b0; }
.wf .i { color: #777 !important; }
.wf .checklist li::before { background: #fff !important; border: 1.5px solid #8c8c8c; border-radius: 0; }
.wf .steps li::before { color: #999; }
.wf .steps li::after { background: var(--line); }

/* Buttons: filled = primary action, outlined = secondary */
body.wf .btn { border-radius: 0; }
body.wf .btn.btn--gold, body.wf .btn.btn--navy, body.wf .action-bar .action-bar__primary { background: #2b2b2b !important; border-color: #2b2b2b !important; color: #fff !important; }
body.wf .btn.btn--gold *, body.wf .btn.btn--navy *, body.wf .action-bar .action-bar__primary * { color: #fff !important; }
body.wf .btn.btn--outline, body.wf .btn.btn--outline-light { background: #fff !important; border: 1.5px solid #2b2b2b !important; color: #2b2b2b !important; }
.wf .link-arrow { border-bottom-color: #2b2b2b; }
.wf .nav__link[aria-current="page"] { box-shadow: inset 0 -2px 0 #2b2b2b; }
.wf .action-bar { border-top: 1.5px solid #555; }
.wf .action-bar a { border-color: #8c8c8c; border-radius: 0; }

/* Forms */
.wf .field input, .wf .field select, .wf .field textarea { background-color: #fff; border: 1.5px solid #8c8c8c; border-radius: 0; }
.wf .field input::placeholder, .wf .field textarea::placeholder { color: #aaa; }
.wf .choice span { border-radius: 0; border-color: #8c8c8c; }
body.wf .choice input:checked + span { background: #2b2b2b; border-color: #2b2b2b; color: #fff !important; }
.wf .progress li::before { background: #ddd; }
.wf .progress li.is-active::before, .wf .progress li.is-done::before { background: #2b2b2b; }
.wf .form-success .icon-badge { border-radius: 50%; }

/* Content placeholders */
.wf .ph { background: #fff; border: 1.5px dashed #8c8c8c; color: #777; }
.wf .ph-text { background: #f1f1f1; color: #444; border: 1px dashed #9a9a9a; border-radius: 0; }
.wf .avatar { background: var(--wf-x), #f4f4f4; border: 1.5px solid #8c8c8c; color: #777; }

/* No motion in wireframes */
.js .wf .reveal, .wf .reveal { opacity: 1 !important; transform: none !important; }

/* ---------- Annotations (added by wireframe.js) ---------- */
.wf-bar {
  position: sticky; top: 0; z-index: 60; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
  padding: 8px 16px; background: #2b2b2b; color: #fff; font: 600 12px/1.4 var(--font-body); letter-spacing: 0.04em;
}
.wf-bar strong { letter-spacing: 0.14em; }
.wf-bar span { opacity: 0.8; }
.wf-bar select { margin-left: auto; font: inherit; padding: 4px 6px; border: 0; max-width: 100%; }
.wf .site-header { top: var(--wf-bar-h, 34px); }
.wf-annotated { position: relative; outline: 1px dashed #b5b5b5; outline-offset: -1px; }
.wf-label {
  position: absolute; top: 8px; left: 8px; z-index: 5; pointer-events: none;
  background: #fff; color: #2b2b2b; border: 1px solid #2b2b2b;
  font: 700 10.5px/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 8px;
}
.wf-label b { display: inline-block; margin-right: 6px; padding-right: 6px; border-right: 1px solid #2b2b2b; }
.wf :is(.topbar, .site-header) .wf-label { top: auto; bottom: -10px; left: auto; right: 8px; }
.wf .site-header .wf-label { z-index: 51; }
.wf .action-bar .wf-label { top: auto; bottom: calc(100% + 4px); }
@media (max-width: 1080px) { .wf .site-header .wf-label { display: none; } }

@media print {
  .wf-bar { display: none; }
  .wf .site-header { position: static; }
  .wf .action-bar { display: none; }
}

.wf .icon-badge { flex: none; }

/* ---------- Print document (wireframe/print/) ---------- */
.wf-print .site-header { position: static; }
.wf-print .nav__mobile-contact, .wf-print .menu-btn { display: none !important; }
.wf-cover { box-sizing: border-box; height: calc(100vh - 80px); min-height: 600px; display: flex; flex-direction: column; justify-content: center; padding: 80px; border: 1.5px solid #555; margin: 40px; overflow: hidden; }
.wf-print .wf-cover + .wf-page { margin-top: 400px; }
.wf-cover h1 { font-size: 64px; margin-bottom: 12px; }
.wf-cover .lead { color: #555; margin-bottom: 48px; }
.wf-toc { list-style: none; columns: 2; column-gap: 64px; padding: 0; margin: 0; max-width: 1000px; }
.wf-toc li { break-inside: avoid; display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid #ccc; font-size: 18px; }
.wf-toc b { width: 2.2em; color: #777; }
.wf-toc span { margin-left: auto; color: #888; font-size: 14px; }
.wf-page { display: flow-root; }
.wf-sheet-title { display: flex; align-items: baseline; gap: 14px; padding: 14px 24px; background: #2b2b2b; color: #fff; font: 700 18px/1.2 var(--font-body); }
.wf-sheet-title b { color: #bbb; }
.wf-sheet-title span { margin-left: auto; font-weight: 500; font-size: 14px; color: #ccc; }
@media print {
  html, body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .wf-cover { page: cover; min-height: 0; height: 920px; box-sizing: border-box; }
}
