/* Lending Finance Direct Ltd. — Botanical Editorial concept */
/* Cream paper, italic serif, layered greens. Same layout and content as the main site. */

:root {
  --cream: #FBF8F1;
  --paper: #EFEAD9;
  --linen: #E8E4D4;
  --sage: #A8B89A;
  --sage-light: #CBD5BF;   /* tint of Sage for small labels on dark greens (contrast) */
  --lichen: #7A8A6A;
  --moss: #5C6B4F;
  --fern: #3D5A2E;
  --fern-dark: #2F4723;    /* shade of Fern Deep for gradients and hover */
  --ink: #1F2A1C;
  --hairline: rgba(92, 107, 79, 0.28);
  --max-grid: 1280px;
  --max-prose: 720px;
  --font-display: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Work Sans", "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.85;
  color: var(--moss);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--fern); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color var(--ease); }
a:hover { color: var(--ink); }

.container { width: 100%; max-width: var(--max-grid); margin: 0 auto; padding: 0 32px; }

/* Display type: italic, light, unhurried */

h1, h2, h3 { font-family: var(--font-display); font-style: italic; font-weight: 300; color: var(--ink); text-wrap: balance; }
h2 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.08; margin: 0 0 18px; }
h3 { font-size: 1.65rem; line-height: 1.2; font-weight: 400; margin: 0 0 10px; }

/* Department label */
.eyebrow {
  display: block; font-family: var(--font-body); font-style: normal; font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--fern); margin-bottom: 22px;
}

.lead { margin: 0; color: var(--moss); }

/* Header */

.site-header { background: var(--cream); border-bottom: 1px solid var(--hairline); position: sticky; top: 0; z-index: 50; }
.header-inner { display: flex; align-items: center; justify-content: space-between; max-width: var(--max-grid); margin: 0 auto; padding: 18px 32px; }
.brand { display: flex; align-items: center; text-decoration: none; }
.logo-header { width: 240px; height: auto; }

.main-nav { display: flex; align-items: center; gap: 10px; }

.main-nav a {
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none;
  color: var(--fern); padding: 10px 14px;
  background: linear-gradient(var(--fern), var(--fern)) left calc(100% - 4px) / 0 1px no-repeat;
  transition: background-size var(--ease), color var(--ease);
}

.main-nav a:hover,
.main-nav a[aria-current="page"] { background-size: calc(100% - 28px) 1px; background-position: 14px calc(100% - 4px); }

.main-nav .nav-cta {
  margin-left: 12px; padding: 12px 24px; border-radius: 999px; background: var(--fern); color: var(--cream);
  background-image: none; transition: background-color var(--ease);
}
.main-nav .nav-cta:hover { background-color: var(--ink); color: var(--cream); }

.nav-toggle { display: none; background: none; border: 1px solid var(--hairline); border-radius: 999px; color: var(--fern); padding: 8px 16px; font-size: 1.1rem; cursor: pointer; }

@media (max-width: 960px) {
  .logo-header { width: 190px; }
  .nav-toggle { display: inline-flex; }
  .main-nav {
    position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--cream); border-bottom: 1px solid var(--hairline); padding: 8px 32px 24px;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 16px 0; border-bottom: 1px solid var(--hairline); background-image: none; }
  .main-nav .nav-cta { margin: 18px 0 0; text-align: center; padding: 16px; border-bottom: 0; }
}

/* Decorative overlay graphic: colonnade, trend line, ledger rules (original) */

.data-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Hero: a dark Fern Deep chapter, framed on cream */

.hero-band { background: var(--cream); padding: 28px 0 0; }

.hero-panel {
  position: relative; overflow: hidden; border-radius: 6px; min-height: 540px; display: flex; align-items: center;
  padding: 88px 72px; background: linear-gradient(135deg, var(--fern-dark), var(--fern));
}

.hero-panel::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(31, 42, 28, 0.55) 0%, rgba(47, 71, 35, 0.35) 45%, rgba(61, 90, 46, 0) 85%);
}
.hero-panel .data-overlay { z-index: 0; }
.hero-panel .content { position: relative; z-index: 2; max-width: 720px; }

.hero-panel .eyebrow { color: var(--sage-light); }
.hero-panel h1 { color: var(--cream); font-size: clamp(2.8rem, 6.4vw, 5.2rem); line-height: 1; margin: 0 0 28px; font-weight: 300; }
.hero-panel p { color: rgba(251, 248, 241, 0.86); font-size: 1.1rem; max-width: 560px; margin: 0 0 40px; }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 32px; }

.page-band .hero-panel { min-height: 300px; padding: 64px 72px; }
.page-band .hero-panel h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin: 0; }

/* Buttons */

.btn {
  display: inline-block; border: 0; border-radius: 999px; padding: 17px 36px; font-family: var(--font-body); font-size: 11.5px;
  font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background-color var(--ease), color var(--ease);
}

.btn-dark { background: var(--fern); color: var(--cream); }
.btn-dark:hover { background: var(--ink); color: var(--cream); }

/* On dark chapters the primary pill inverts */
.btn-primary { background: var(--cream); color: var(--fern); }
.btn-primary:hover { background: var(--sage-light); color: var(--ink); }

/* Tertiary: sans text with an underline that grows */
.btn-ghost {
  padding: 6px 0; border-radius: 0; background: linear-gradient(currentColor, currentColor) left bottom / 38% 1px no-repeat;
  color: var(--cream); transition: background-size var(--ease), color var(--ease);
}
.btn-ghost:hover { background-size: 100% 1px; color: var(--cream); }

/* Sections */

section { padding: 112px 0; }
.section-alt { background: var(--paper); }

.section-head { max-width: 720px; margin: 0 auto 64px; text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }

/* Our Model split */

.split { display: grid; grid-template-columns: 1fr 1fr; padding: 0; margin-top: 112px; }
.split .left { position: relative; background: linear-gradient(160deg, var(--fern), var(--fern-dark)); display: flex; align-items: center; padding: 96px 72px; min-height: 440px; overflow: hidden; }
.split .left h2 { position: relative; z-index: 2; color: var(--cream); font-size: clamp(3rem, 6vw, 5rem); line-height: 1; margin: 0; }
.split .left h2::after { content: ""; display: block; width: 72px; height: 1px; background: var(--sage); margin-top: 28px; }
.split .right { background: var(--paper); padding: 96px 72px; display: flex; flex-direction: column; justify-content: center; }
.split .right p { margin: 0 0 20px; }
.split .right p:last-child { margin-bottom: 0; }
.split .mission { font-family: var(--font-display); font-style: italic; font-size: 1.7rem; line-height: 1.35; color: var(--fern); border-left: 1px solid var(--sage); padding-left: 24px; margin-top: 12px; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; margin-top: 72px; }
  .split .left { min-height: 260px; padding: 64px 32px; }
  .split .right { padding: 64px 32px; }
}

/* Why cards: article-card feel, no heavy borders */

.why-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; }

.why-card {
  flex: 0 1 calc(33.333% - 22px); min-width: 280px; background: var(--paper); border: 1px solid transparent; border-radius: 6px;
  padding: 44px 36px 48px; transition: border-color var(--ease), background-color var(--ease);
}
.why-card:hover { border-color: var(--sage); background: var(--linen); }
.why-card .num { display: block; font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--lichen); margin-bottom: 18px; }
.why-card p { margin: 0; font-size: 0.97rem; }

/* Tagline band */

.tagline { background: var(--fern); padding: 64px 0; }
.tagline ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 56px; }
.tagline li { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(1.7rem, 3.6vw, 2.8rem); color: var(--cream); }
.tagline li:not(:last-child)::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--sage); margin-left: 56px; vertical-align: middle; }
@media (max-width: 700px) { .tagline li::after { display: none !important; } .tagline ul { flex-direction: column; } }

/* Model diagram (About) */

.diagram { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 20px; align-items: stretch; }
.node { border: 1px solid var(--hairline); background: var(--cream); border-radius: 6px; padding: 36px 26px; text-align: center; }
.node h3 { margin-bottom: 10px; }
.node p { margin: 0; font-size: 0.93rem; }
.node.us { background: var(--fern); border-color: var(--fern); }
.node.us h3 { color: var(--cream); }
.node.us p { color: rgba(251, 248, 241, 0.82); }
.arrow { display: flex; align-items: center; justify-content: center; color: var(--lichen); font-family: var(--font-display); font-size: 2rem; }
@media (max-width: 860px) { .diagram { grid-template-columns: 1fr; } .arrow { transform: rotate(90deg); } }

/* Partner CTA */

.cta-block { background: var(--paper); text-align: center; }
.cta-block .inner { max-width: var(--max-prose); margin: 0 auto; }
.cta-block h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.cta-block p { margin: 0 0 36px; }

/* Connect tracks */

.tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.track { border-top: 1px solid var(--sage); padding: 32px 0 0; }
.track p { margin: 0 0 12px; font-size: 0.97rem; }
@media (max-width: 760px) { .tracks { grid-template-columns: 1fr; } }

/* Closing pull quote: its own dark chapter */

.quote { background: var(--fern); text-align: center; padding: 128px 0; }
.quote blockquote { margin: 0 auto; max-width: 900px; font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.2; color: var(--cream); }
.quote blockquote::before { content: ""; display: block; width: 1px; height: 56px; background: var(--sage); margin: 0 auto 36px; }

/* Text pages */

.prose { max-width: var(--max-prose); margin: 0 auto; }
.prose p { margin: 0 0 22px; font-size: 1.05rem; }
.prose h2 { margin-top: 56px; font-size: clamp(2rem, 3.6vw, 2.8rem); }
.prose h2:first-child { margin-top: 0; }

.info-table { width: 100%; max-width: var(--max-prose); margin: 0 auto; border-collapse: collapse; font-size: 0.97rem; }
.info-table th, .info-table td { text-align: left; padding: 20px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.info-table th { width: 38%; padding-right: 24px; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.3rem; color: var(--ink); }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.step { border-top: 1px solid var(--sage); padding-top: 24px; }
.step .num { display: block; font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--lichen); margin-bottom: 12px; }
.step p { margin: 0; font-size: 0.97rem; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; gap: 40px; } }

/* Contact page */

.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 88px; align-items: start; }
.details { border-left: 1px solid var(--sage); padding-left: 36px; }
.details h3 { margin-bottom: 4px; }
.details p { margin: 0 0 28px; font-size: 0.97rem; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 56px; } }

/* Forms: cream fields, thin border, Fern Deep on focus */

.form-card { max-width: 720px; margin: 0 auto; }
.form-row { margin-bottom: 24px; }
.form-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 560px) { .form-split { grid-template-columns: 1fr; gap: 0; } }

label { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fern); margin-bottom: 8px; }
label .opt { font-weight: 400; letter-spacing: 0.1em; color: var(--lichen); text-transform: none; }

input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: var(--cream);
  border: 1px solid var(--hairline); border-radius: 4px; padding: 14px 16px; transition: border-color var(--ease);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--fern); }
textarea { min-height: 170px; resize: vertical; }

.form-note { font-size: 0.85rem; color: var(--lichen); margin: 18px 0 0; }
.section-alt .form-note { color: var(--moss); }

.form-status { display: none; border-left: 1px solid var(--fern); background: var(--paper); padding: 18px 22px; font-size: 0.95rem; margin-top: 24px; border-radius: 0 4px 4px 0; }
.form-status.visible { display: block; }

/* Footer */

.site-footer { background: var(--ink); color: var(--sage-light); padding: 88px 0 40px; font-size: 0.93rem; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 48px; margin-bottom: 56px; }
.footer-brand { max-width: 360px; }
.footer-brand .logo-header { width: 240px; margin-bottom: 18px; }
.footer-brand p { margin: 0; }
.site-footer h4 { font-family: var(--font-body); font-style: normal; font-size: 11px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--sage); margin: 0 0 18px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: var(--sage-light); text-decoration: none; }
.site-footer a:hover { color: var(--cream); }
.footer-legal { border-top: 1px solid rgba(203, 213, 191, 0.2); padding-top: 28px; font-size: 0.8rem; line-height: 1.8; color: var(--sage); }
.footer-legal p { margin: 0 0 12px; }

@media (max-width: 700px) {
  section { padding: 80px 0; }
  .container { padding: 0 24px; }
  .hero-panel, .page-band .hero-panel { padding: 56px 28px; min-height: 0; }
  .hero-band { padding-top: 16px; }
  .quote { padding: 88px 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* Keep the Our Model heading clear of the overlay graphic */
.split .left .data-overlay { z-index: 0; }
.split .left::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(31, 42, 28, 0.6) 0%, rgba(47, 71, 35, 0.3) 55%, rgba(61, 90, 46, 0) 90%);
}

/* Four-step process */
.steps.four { grid-template-columns: repeat(4, 1fr); gap: 32px; }
@media (max-width: 960px) { .steps.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps.four { grid-template-columns: 1fr; } }

/* How we can help / resources list */
.help-list { list-style: none; margin: 0 auto; padding: 0; max-width: var(--max-grid); display: grid; grid-template-columns: 1fr 1fr; gap: 0 72px; }
.help-list li { border-top: 1px solid var(--hairline); padding: 28px 0 30px; }
.help-list h3 { font-size: 1.55rem; margin-bottom: 8px; }
.help-list p { margin: 0; font-size: 0.97rem; }
@media (max-width: 760px) { .help-list { grid-template-columns: 1fr; } }

/* FAQ */
.faq { max-width: var(--max-prose); margin: 0 auto; }
.faq details { border-top: 1px solid var(--hairline); padding: 24px 0; }
.faq details:last-child { border-bottom: 1px solid var(--hairline); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.55rem; line-height: 1.25; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-body); font-style: normal; font-size: 1.4rem; color: var(--lichen); }
.faq details[open] summary::after { content: "\2013"; }
.faq summary:focus-visible { outline: 1px solid var(--fern); outline-offset: 6px; }
.faq details p { margin: 16px 0 0; }

/* Honeypot field: hidden from people, visible to bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Form error state */
.form-status.error { border-left-color: #8a3b2c; }

/* Website disclosure in the footer */
.footer-legal .disclosure { font-size: 0.74rem; line-height: 1.75; letter-spacing: 0.01em; }
.footer-legal .disclosure strong { color: var(--sage-light); font-weight: 500; letter-spacing: 0.04em; }

/* Privacy policy */
.policy .meta { font-size: 0.88rem; color: var(--lichen); margin-bottom: 28px; }
.policy h2 { margin-top: 64px; font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.policy h3 { font-size: 1.5rem; margin: 36px 0 8px; }
.policy ul { margin: 0 0 22px; padding-left: 1.2em; }
.policy li { margin-bottom: 6px; }
.notice-box { margin-top: 40px; }
.facts-title { background: var(--fern); border-radius: 6px 6px 0 0; padding: 32px 36px 28px; }
.facts-title .eyebrow { color: var(--sage-light); margin-bottom: 10px; }
.facts-title h3 { color: var(--cream); margin: 0; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; }
.notice-wrap { overflow-x: auto; }
.notice { width: 100%; border-collapse: collapse; margin: 0 0 28px; font-size: 0.95rem; background: var(--cream); }
.notice th, .notice td { border: 1px solid var(--hairline); padding: 14px 18px; text-align: left; vertical-align: top; }
.notice th { color: var(--ink); font-weight: 500; width: 30%; background: var(--paper); }
.notice thead th { width: auto; }
.notice-box > .notice:first-of-type { margin-top: 0; border-top: 0; }

/* Simplified home hero: name plus one line */
.hero-panel h1 { margin-bottom: 20px; }
.hero-panel .hero-sub { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.2; color: var(--sage-light); max-width: none; margin: 0 0 44px; }
.page-band .hero-panel .hero-sub { margin-bottom: 0; }

/* Reason cards: two across, an odd last card centres */
.why-card { flex: 0 1 calc(50% - 16px); }
@media (max-width: 760px) { .why-card { flex-basis: 100%; } }

/* What we do: one short paragraph, set larger */
.split .right p { font-size: 1.15rem; line-height: 1.8; }

/* ------------------------------------------------------------------
   Hero and spacing refinements (2026-11-12)
   The graphic now fits whole inside the right side of the panel instead of
   being cropped behind the text. Desktop and mobile rules are kept separate
   so neither overrides the other.
   ------------------------------------------------------------------ */

.hero-panel .hero-sub { text-wrap: balance; }

@media (min-width: 701px) {
  .hero-band { padding-top: 32px; }
  .hero-panel { padding: 96px 72px; }
  .hero-panel .data-overlay { left: auto; right: 0; width: 62%; }
  .hero-panel h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); line-height: 1.02; margin-bottom: 18px; }
  .hero-panel .hero-sub { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 40px; }
  .page-band .hero-panel .hero-sub { margin-bottom: 0; }
  .split { margin-top: 80px; }
}

@media (max-width: 700px) {
  .header-inner { padding: 14px 24px; }
  .hero-band { padding-top: 20px; }
  .hero-panel { padding: 56px 28px 72px; }
  .hero-panel .data-overlay { left: auto; right: 0; width: 84%; opacity: 0.8; }
  .hero-panel h1 { font-size: 2.7rem; line-height: 1.05; }
  .hero-panel .hero-sub { font-size: 1.5rem; margin-bottom: 32px; }
  .page-band .hero-panel .hero-sub { margin-bottom: 0; }
  .split { margin-top: 56px; }
}