/* Titan Business Financing.
 *
 * On the ADR-0011 skeleton -- `tools/sitegen/page.css` is the layout. What is
 * here is the palette, the two typefaces, and the one band this site has
 * that the skeleton does not: OWN IT OR LEASE IT.
 *
 * THE PALETTE IS READ OFF THE LOGO: a navy TITAN (#1a2332) and a gold shield
 * and BUSINESS FINANCING (#d4af37). Navy is the ink, the footer and the
 * application band. The gold is 2.1:1 on white, so it NEVER carries type on
 * paper: it is the rule, the ring round the "or" and the eyebrow on the navy
 * application band, where it measures 7.5:1. Wherever the accent has to be
 * read on paper -- the eyebrows, the second line of the headline, the links,
 * the primary button -- it is the same gold taken down to a bronze, #7a5f12,
 * which is 6.05:1 on white and 5.4:1 on the pale gold wash. The cost figure
 * is a burnt orange, #8a4b0c, 6.8:1.
 *
 * POPPINS OVER ROBOTO, the pair the brand's own form already used. Poppins
 * is static on Google Fonts, so 600 and 700 are two files; Roboto is one
 * variable file, 400 to 700.
 *
 * Tighter corners than the skeleton's default: a shield is drawn with points,
 * not pills.
 */

@font-face {
  font-family: "Poppins";
  src: url("display.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("display-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("text.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --ink: #1a2332;
  --ink-soft: #2c3a52;
  --text: #3d4757;
  --muted: #5b6475;

  /* The gold, taken down until it can be read on paper. */
  --accent: #7a5f12;
  --accent-deep: #5c470d;
  --accent-wash: #f8f3e2;
  --accent-line: #e6d49a;

  --good: #5c470d;
  --good-wash: #f8f3e2;
  --warn: #8a4b0c;

  --paper: #ffffff;
  --card: #ffffff;
  --tint: #f6f4ee;
  --rule: #e7e3d8;
  --rule-firm: #d3cdbd;

  /* On the navy application band the logo's own gold is legible. */
  --ask-ink: #c3cad6;
  --ask-accent: #d4af37;

  --shadow: 26, 35, 50;

  --display: "Poppins", system-ui, sans-serif;
  --body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --display-weight: 700;
  --display-track: -0.02em;

  --radius: 10px;
  --radius-sm: 6px;

  /* The brand gold, for rules and marks only. Never text on paper. */
  --gold: #d4af37;
}

/* ------------------------------------------------------------------ *
 * OWN IT OR LEASE IT -- the band this site has and the skeleton does not.
 *
 * Two paths from one quote, at the same size and the same height, with a
 * gold-ringed "or" standing on the seam between them. Each path is a
 * photograph, what it is, five points and what it is best for. Under both,
 * across the full width, the one figure that applies to either: the down
 * payment. Nowhere else on the site do two photographs stand level with each
 * other, which is what makes this read as a choice rather than a list.
 * ------------------------------------------------------------------ */
.fork {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  margin: 56px 0 0;
}

.fork__path {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(var(--shadow), 0.08);
}

.fork__shot {
  margin: 0;
}

.fork__shot img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.fork__say {
  padding: 28px 30px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.fork__n {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
}

.fork__say h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 12px;
}

.fork__points {
  list-style: none;
  margin: 8px 0 22px;
  padding: 0;
  display: grid;
  gap: 9px;
}

.fork__points li {
  position: relative;
  padding-left: 22px;
  color: var(--text);
}

/* A small gold diamond: the point of the shield, not a tick. */
.fork__points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 8px;
  height: 8px;
  background: var(--gold);
  transform: rotate(45deg);
}

.fork__fits {
  margin: auto 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  color: var(--text);
}

.fork__fits b {
  display: block;
  font-family: var(--display);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 4px;
}

/* The "or", on the seam between the two paths, halfway down. */
.fork__or {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 6px var(--paper), 0 10px 26px rgba(var(--shadow), 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fork__or span {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  color: #ffffff;
  letter-spacing: 0.02em;
}

.band--tint .fork__or {
  box-shadow: 0 0 0 6px var(--tint), 0 10px 26px rgba(var(--shadow), 0.3);
}

.fork__down {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px 40px;
  align-items: center;
  margin: 40px 0 0;
  padding: 26px 32px;
  background: var(--accent-wash);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.fork__down p {
  margin: 0;
  color: var(--text);
}

.fork__downfig span {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.fork__downfig b {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1.1;
  color: var(--ink);
  white-space: nowrap;
}

.fork__note {
  margin: 22px 0 0;
  font-size: 0.95rem;
  color: var(--muted);
}

@media (max-width: 760px) {
  .fork {
    grid-template-columns: 1fr;
    gap: 56px;
    margin-top: 36px;
  }
  /* Stacked, the "or" sits on the gap between the first path and the second. */
  .fork__or {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin: -28px auto -28px;
    width: 60px;
    height: 60px;
    order: 0;
  }
  .fork__say {
    padding: 22px 20px 24px;
  }
  .fork__down {
    grid-template-columns: 1fr;
    padding: 22px 20px;
  }
}

/* ---- the shared chrome, painted in this brand's colours ---- */
:root {
  --nav-bg: #ffffff;
  --nav-ink: #1a2332;
  --nav-ink-soft: #5b6475;
  --nav-rule: #e7e3d8;
  --nav-hover: #7a5f12;
  --nav-panel: #ffffff;
  --nav-cta-bg: #1a2332;
  --nav-cta-ink: #ffffff;
  --nav-font: var(--display);
  --nav-size: 0.9375rem;
  --nav-weight: 600;
  --nav-track: 0;
  --nav-case: none;
  --nav-radius: 6px;

  --foot-bg: #1a2332;
  --foot-ink: #b9c1ce;
  --foot-head: #ffffff;
  --foot-rule: #2f3b50;
  --foot-link: #ffffff;
}

/* The application page opens with the form, and on a phone the form comes
   first; the head's full top padding would leave an empty band above it. */
@media (max-width: 760px) {
  .head--form {
    padding-top: 18px;
  }
  .head--form .frame {
    padding: 6px;
  }
}