/* Unify Funding Co
   Colours taken from the photography this site is built on: warm wood, denim,
   aprons, daylight. Deep green for anything you act on, amber for money. */

@font-face {
  font-family: "Bitter";
  src: url("serif.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("sans.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --ink: #2a211a;
  --ink-deep: #1c1611;
  --paper: #ffffff;
  --sand: #f5efe7;
  --sand-deep: #e9ddcd;
  --forest: #14603f;
  --forest-lt: #1b7a50;
  --amber: #e8a33d;
  --text: #33291f;
  --muted: #6b6259;
  --rule: #e4dcd1;

  --shell: 72rem;
  --measure: 62ch;

  --s--1: 0.8125rem;
  --s-0: 1.0625rem;
  --s-1: 1.25rem;
  --s-2: clamp(1.45rem, 1.2rem + 1.1vw, 1.85rem);
  --s-3: clamp(1.8rem, 1.35rem + 2vw, 2.55rem);
  --s-4: clamp(2.3rem, 1.5rem + 3.6vw, 3.6rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--s-0);
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
}

h1,
h2,
h3 {
  font-family: "Bitter", Georgia, serif;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}
h1 {
  font-size: var(--s-4);
  line-height: 1.06;
}
h2 {
  font-size: var(--s-3);
}
h3 {
  font-size: var(--s-1);
}

p {
  margin: 0 0 1em;
  max-width: var(--measure);
}

.num {
  font-variant-numeric: tabular-nums;
}

.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}

.section {
  padding-block: clamp(3rem, 7vw, 5rem);
}
.section--sand {
  background: var(--sand);
}
.section--tight {
  padding-block: clamp(2rem, 4vw, 2.75rem);
}

.lede {
  font-size: var(--s-1);
  color: var(--muted);
  max-width: 52ch;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 20;
  background: #fff;
  padding: 0.75rem 1rem;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  padding: 0.72em 1.25em;
  cursor: pointer;
  transition: background 0.16s ease;
}
.btn--go {
  background: var(--forest);
  color: #fff;
}
.btn--go:hover {
  background: var(--forest-lt);
}
.btn--line {
  border: 1.5px solid var(--rule);
  background: #fff;
  color: var(--ink);
}
.btn--line:hover {
  border-color: var(--ink);
}
.btn--lg {
  font-size: var(--s-1);
  padding: 0.8em 1.5em;
}
/* A call to action that has broken across two lines reads as a mistake. */
.masthead .btn,
.hero .btn {
  white-space: nowrap;
}

/* ---------- masthead ---------- */

.masthead {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.masthead__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 0.85rem;
}
.masthead__logo {
  margin-right: auto;
  display: flex;
  flex: 0 0 auto;
}
.masthead__logo img {
  /* The supplied logo.png was a 600x200 canvas holding a 566x55 wordmark,
     centred in 145px of transparent padding. Setting a height on that sized
     the padding, not the mark: at 30px the wordmark rendered 8px tall, which
     is why it looked like a mistake. The file is now trimmed to its artwork,
     so height means the height of the words. */
  height: clamp(calc(var(--logo-h, 22px) * 0.82), 4.6vw, var(--logo-h, 22px));
  width: auto;
  /* Without this the flex row squeezes the wordmark rather than the gap. */
  flex: 0 0 auto;
  max-width: none;
}
.masthead__word {
  font-family: "Bitter", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 3.4vw, 1.3rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.masthead__logo {
  text-decoration: none;
}
.masthead__tel {
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
/* Logo, number and button do not all fit across a phone. The number is the
   one that repeats: it is set large in the hero and again in the footer. */
@media (max-width: 30rem) {
  .masthead__tel {
    display: none;
  }
}
/* Below about 360px the wordmark and the button together are still wider than
   the screen. The logo is 566x55 artwork, so even at its floor height of 18px
   it draws 186px wide, and 186 + 16 of gap + a 126px button does not fit in
   the 280px a 320px phone leaves inside the gutter.
   Both come down a step. The bar is also allowed to wrap, so that a font
   metric moving by a few pixels on some device drops the button onto its own
   line instead of pushing the whole page sideways. */
@media (max-width: 23rem) {
  .masthead__bar {
    flex-wrap: wrap;
    gap: 0.6rem;
  }
  .masthead__logo img {
    height: 15px;
  }
  .masthead__bar .btn {
    padding: 0.7em 0.9em;
    font-size: var(--s--1);
  }
}
.masthead__tel:hover {
  color: var(--forest);
}

.nav {
  border-top: 1px solid var(--rule);
}
.nav__list {
  list-style: none;
  margin: 0;
  padding: 0.55rem 0;
  display: flex;
  gap: 0.1rem 1.35rem;
  font-size: var(--s--1);
  /* Nine links wrap to four rows on a phone and push the hero off the
     screen, which on a paid landing page is the form being pushed off the
     screen. One scrolling row instead: the first few are visible, the rest
     are a swipe away, and the page still opens on what it is for. */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.nav__list::-webkit-scrollbar {
  display: none;
}
.nav__list li {
  flex: 0 0 auto;
}
.nav__list li:last-child {
  padding-right: 1.25rem;
}
@media (min-width: 60rem) {
  .nav__list {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}
.nav__list a {
  text-decoration: none;
  color: var(--muted);
  display: inline-block;
  padding-block: 0.25rem;
}
.nav__list a:hover,
.nav__list a[aria-current="page"] {
  color: var(--ink);
}
.nav__list a[aria-current="page"] {
  box-shadow: inset 0 -2px 0 var(--forest);
}

/* ---------- hero ----------
   The form sits here, beside the headline, over a photograph of the kind of
   business this is for. It is the point of the page, so it is the first
   thing on it rather than a slab at the bottom. */

.hero {
  position: relative;
  background: var(--ink-deep);
  color: #f6efe6;
  isolation: isolate;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Heavy enough for white type over the left third, and then it gets out of
     the way. The first version held 0.84 all the way across the middle, which
     made an expensive photograph look like a brown wash. */
  background: linear-gradient(
    100deg,
    rgba(28, 22, 17, 0.93) 0%,
    rgba(28, 22, 17, 0.86) 32%,
    rgba(28, 22, 17, 0.6) 52%,
    rgba(28, 22, 17, 0.34) 75%,
    rgba(28, 22, 17, 0.26) 100%
  );
}

/* Below the split the copy runs the full width, so a scrim that clears to the
   right would clear underneath the text. It goes back to being even. */
@media (max-width: 59.99rem) {
  .hero::after {
    background: linear-gradient(
      180deg,
      rgba(28, 22, 17, 0.88) 0%,
      rgba(28, 22, 17, 0.8) 55%,
      rgba(28, 22, 17, 0.72) 100%
    );
  }
}

.hero__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(2.5rem, 6vw, 4.25rem);
  align-items: start;
}
@media (min-width: 60rem) {
  .hero__grid {
    grid-template-columns: 1fr minmax(20rem, 30rem);
  }
}

.hero h1 {
  color: #fff;
  max-width: 15ch;
}
.hero__sub {
  font-size: var(--s-1);
  color: #d8cdc0;
  max-width: 42ch;
  margin-block: 1rem 1.5rem;
}
.hero__points {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
}
.hero__points li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.4rem;
  color: #e6dbcd;
}
.hero__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--amber);
}
.hero__call {
  font-size: var(--s--1);
  color: #b3a595;
}
.hero__call a {
  display: block;
  color: #fff;
  font-weight: 700;
  font-size: var(--s-2);
  text-decoration: none;
  font-family: "Bitter", Georgia, serif;
}
.hero__call a:hover {
  color: var(--amber);
}

/* ---------- the form card ---------- */

.formcard {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1.75rem 3.5rem -1.25rem rgba(28, 22, 17, 0.55);
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
}
.formcard__head {
  background: var(--forest);
  color: #fff;
  padding: 0.85rem 1.25rem;
  font-size: var(--s--1);
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.formcard__head span:last-child {
  font-weight: 500;
  color: #bfe0cf;
}
.formcard iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* On a light section the card needs an edge rather than a heavy shadow. */
.section--sand .formcard {
  border: 1px solid var(--sand-deep);
  box-shadow: 0 1rem 2.5rem -1.25rem rgba(42, 33, 26, 0.3);
}

.applyrow {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 60rem) {
  .applyrow {
    grid-template-columns: 1fr minmax(20rem, 30rem);
  }
}

/* ---------- stats ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 1rem;
}
@media (min-width: 46rem) {
  .stats {
    grid-template-columns: repeat(4, 1fr);
  }
}
.stat b {
  display: block;
  font-family: "Bitter", Georgia, serif;
  font-size: var(--s-3);
  line-height: 1;
  color: var(--forest);
}
.stat span {
  font-size: var(--s--1);
  color: var(--muted);
}

/* ---------- funding options ---------- */

.options {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
@media (min-width: 40rem) {
  .options {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 64rem) {
  .options {
    grid-template-columns: repeat(3, 1fr);
  }
}
.option {
  display: block;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1.35rem 1.4rem 1.5rem;
  text-decoration: none;
  transition: border-color 0.16s ease, transform 0.16s ease;
}
.option:hover {
  border-color: var(--forest);
  transform: translateY(-2px);
}
.option h3 {
  margin-bottom: 0.3rem;
}
.option__lead {
  color: var(--muted);
  font-size: var(--s--1);
  margin-bottom: 1rem;
  min-height: 2.4em;
}
.option__figs {
  display: flex;
  gap: 1.25rem;
  border-top: 1px solid var(--rule);
  padding-top: 0.85rem;
}
.option__figs div {
  font-size: var(--s--1);
  color: var(--muted);
}
.option__figs b {
  display: block;
  font-size: var(--s-1);
  color: var(--ink);
  font-family: "Bitter", Georgia, serif;
}

/* ---------- photo band ---------- */

.band {
  position: relative;
  isolation: isolate;
  color: #fff;
  background: var(--ink-deep);
  overflow: hidden;
}
.band__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(28, 22, 17, 0.9) 0%, rgba(28, 22, 17, 0.45) 100%);
}
.band__inner {
  padding-block: clamp(3.5rem, 9vw, 6.5rem);
}
.band h2 {
  color: #fff;
  max-width: 18ch;
}
.band p {
  color: #dbd0c2;
  max-width: 44ch;
  margin-top: 1rem;
}

/* ---------- steps ---------- */

.steps {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 2rem;
}
@media (min-width: 52rem) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
  }
}
.step img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 1rem;
}
.step__n {
  font-size: var(--s--1);
  font-weight: 700;
  color: var(--forest);
  display: block;
  margin-bottom: 0.3rem;
}
.step h3 {
  margin-bottom: 0.45rem;
}
.step p {
  color: var(--muted);
  font-size: var(--s-0);
  margin-bottom: 0.75rem;
}

.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--s--1);
  color: var(--muted);
}
.ticks li {
  padding-left: 1.3rem;
  position: relative;
  margin-bottom: 0.28rem;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--forest);
}

/* ---------- product pages ---------- */

.pagehead {
  background: var(--sand);
  padding-block: clamp(2.25rem, 5vw, 3.25rem);
  border-bottom: 1px solid var(--sand-deep);
}

.specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  margin: 1.75rem 0 0;
}
@media (min-width: 46rem) {
  .specs {
    grid-template-columns: repeat(4, 1fr);
  }
}
.spec {
  background: #fff;
  padding: 1rem 1.1rem 1.15rem;
  margin: 0;
}
.spec dt {
  font-size: var(--s--1);
  color: var(--muted);
  margin-bottom: 0.2rem;
}
.spec dd {
  margin: 0;
  font-family: "Bitter", Georgia, serif;
  font-size: var(--s-1);
  font-weight: 700;
  color: var(--ink);
}

.panel {
  background: var(--sand);
  border-radius: 10px;
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
.panel h3 {
  margin-bottom: 0.85rem;
}

.split {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
}
@media (min-width: 52rem) {
  .split {
    grid-template-columns: 1.2fr 0.8fr;
  }
}

.figure img {
  border-radius: 10px;
  width: 100%;
}

/* ---------- footer ---------- */

.foot {
  background: var(--ink-deep);
  color: #bdb0a1;
  padding-block: clamp(2.5rem, 6vw, 3.5rem) 2rem;
  font-size: var(--s--1);
}
.foot a {
  color: #e6dbcd;
  text-decoration: none;
}
.foot a:hover {
  color: var(--amber);
}
.foot h2 {
  font-size: var(--s--1);
  color: #fff;
  font-family: "Figtree", sans-serif;
  letter-spacing: 0.02em;
  margin-bottom: 0.7rem;
}
.foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.foot li {
  margin-bottom: 0.35rem;
}
.foot__cols {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 52rem) {
  .foot__cols {
    grid-template-columns: repeat(4, 1fr);
  }
}
.foot__legal {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #8d8276;
  max-width: none;
}

/* ---------- floor ---------- */

:focus-visible {
  outline: 3px solid var(--forest-lt);
  outline-offset: 2px;
}
.hero :focus-visible,
.band :focus-visible,
.foot :focus-visible {
  outline-color: var(--amber);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- per-brand feature sections ---------- */

.qa {
  margin: 2rem 0 0;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
@media (min-width: 52rem) {
  .qa {
    grid-template-columns: repeat(2, 1fr);
  }
}
.qa__item {
  background: var(--paper);
  padding: 1.4rem 1.5rem 1.6rem;
}
@media (min-width: 52rem) {
  .qa__item:nth-child(odd) {
    padding-left: 0;
  }
  .qa__item:nth-child(even) {
    padding-right: 0;
  }
}
.qa dt {
  font-family: "Bitter", Georgia, serif;
  font-weight: 700;
  font-size: var(--s-1);
  color: var(--ink);
  margin-bottom: 0.45rem;
}
.qa dd {
  margin: 0;
  color: var(--muted);
  max-width: 54ch;
}

.clock {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.75rem;
}
@media (min-width: 60rem) {
  .clock {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
}
.clock__step {
  border-top: 3px solid var(--forest);
  padding-top: 1rem;
}
.clock__when {
  display: block;
  font-weight: 700;
  font-size: var(--s--1);
  color: var(--forest);
  margin-bottom: 0.35rem;
}
.clock__step h3 {
  margin-bottom: 0.4rem;
}
.clock__step p {
  color: var(--muted);
  font-size: var(--s--1);
  margin: 0;
}

.trades {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
}
@media (min-width: 40rem) {
  .trades {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 64rem) {
  .trades {
    grid-template-columns: repeat(4, 1fr);
  }
}
.trades li {
  background: var(--paper);
  padding: 1.1rem 1.2rem 1.25rem;
}
.trades b {
  display: block;
  font-family: "Bitter", Georgia, serif;
  color: var(--ink);
  margin-bottom: 0.2rem;
}
.trades span {
  font-size: var(--s--1);
  color: var(--muted);
}