/* For Finance Sake — design tokens and site styles.
   Tokens transcribed from the design handoff. Do not add colour values
   outside this palette. */

:root {
  /* Brand dark is "deep teal ink" (v1.1.0) — property name kept as
     --ffs-green for backward compatibility; --ffs-ink is the alias to
     prefer in new code. */
  --ffs-green: #12262B;
  --ffs-ink: var(--ffs-green);
  --ffs-green-hover: #0C1A1E;
  --ffs-blue: #5F7A9E;
  --ffs-blue-text: #3D5573;
  --ffs-lavender: #A18BCB;
  --ffs-lavender-hover: #8F76BE;
  --ffs-pink: #F6DDE1;
  --ffs-cream: #F2EDE6;
  --ffs-charcoal: #2B2B2B;
  --ffs-white: #FFFFFF;
  --ffs-green-16: rgb(18 38 43 / 16%);
  --ffs-green-12: rgb(18 38 43 / 12%);
  --ffs-green-08: rgb(18 38 43 / 8%);
  --ffs-blue-35: rgb(95 122 158 / 35%);
  --ffs-lavender-16: rgb(161 139 203 / 16%);
  --ffs-cream-deep: #E9E2D8;
  --ffs-pink-deep: #EDD6D9;

  /* heroSurface pairings — header takes the deeper tint, hero the lighter;
     always set together (see renderHeader/renderHome in build.js), never
     independently. */
  --ffs-header-bg: rgb(161 139 203 / 20%);
  --ffs-hero-bg: rgb(161 139 203 / 16%);

  --grid-gap: 24px;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: Inter, Arial, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ffs-cream);
  color: var(--ffs-charcoal);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  min-width: 320px;
}

main { flex: 1 0 auto; }

img { max-width: 100%; height: auto; }

h1, h2, h3, p, ol, ul, figure, blockquote { margin: 0; }

strong { font-weight: 600; }

/* <strong> reads in ink on light surfaces (per spec: emphasis is colour,
   never weight alone); on the dark ink section it inherits the cream
   body colour instead, since ink-on-ink would be invisible. */
.steps strong,
.bullets strong,
.need-something strong,
.dont-do strong {
  color: var(--ffs-green);
}

a {
  color: var(--ffs-blue-text);
  transition: color 120ms var(--ease);
}
a:hover { color: var(--ffs-green); }

.nowrap { white-space: nowrap; }

.dot { color: var(--ffs-lavender); }

.cursor {
  display: inline-block;
  width: .055em;
  height: .84em;
  margin-left: .12em;
  border-radius: 2px;
  background: var(--ffs-lavender);
  vertical-align: -.08em;
}
.cursor--blink { animation: ffsCursor 800ms step-end infinite; }

@keyframes ffsCursor {
  0%, 45% { opacity: 1; }
  45.01%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor--blink { animation: none; opacity: 1; }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ffs-green);
  color: var(--ffs-cream);
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  z-index: 100;
}
.skip-link:focus {
  left: 0;
}

/* Focus ring — every interactive element, never colour-only */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.logo:focus-visible {
  outline: 2px solid var(--ffs-blue);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--ffs-blue-35);
  border-radius: 4px;
}
.btn:focus-visible { border-radius: 12px; }

/* Layout */
.section__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 64px);
  padding-block: clamp(56px, 8vw, 112px);
}

/* Typography roles */
.h1 {
  font: 600 clamp(40px, 7.4vw, 72px)/1.02 var(--font-display);
  letter-spacing: -.02em;
  color: var(--ffs-green);
  max-width: 18ch;
  text-wrap: pretty;
}
.h2 {
  font: 600 clamp(32px, 4.8vw, 48px)/1.1 var(--font-display);
  letter-spacing: -.02em;
  color: var(--ffs-green);
}
.h2--small {
  font: 600 clamp(26px, 3vw, 32px)/1.15 var(--font-display);
  letter-spacing: -.02em;
  color: var(--ffs-green);
}
.h3 {
  margin-top: 16px;
  font: 600 24px/1.2 var(--font-display);
  letter-spacing: -.02em;
  color: var(--ffs-green);
}
.lead {
  font-size: 19px;
  line-height: 1.6;
  max-width: 62ch;
  text-wrap: pretty;
}
.small { font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.label {
  display: block;
  font: 600 12px/1.2 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ffs-green);
}
.label--on-cream { color: var(--ffs-blue-text); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  white-space: nowrap;
  height: 48px;
  padding: 0 24px;
  border-radius: 12px;
  font: 600 16px/1 var(--font-body);
  text-decoration: none;
  transition: background-color 120ms var(--ease), transform 120ms var(--ease);
}
.btn--lg { height: 56px; padding: 0 28px; font-size: 17px; }
.btn--primary { background: var(--ffs-green); color: var(--ffs-cream); }
.btn--primary:hover { background: var(--ffs-green-hover); color: var(--ffs-cream); }
.btn--accent { background: var(--ffs-lavender); color: var(--ffs-green); }
.btn--accent:hover { background: var(--ffs-lavender-hover); color: var(--ffs-green); }
.btn:active { transform: translateY(1px); }

/* Text links */
.link {
  color: var(--ffs-blue-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  width: fit-content;
}
.link:hover { color: var(--ffs-green); }

.link-on-dark {
  color: var(--ffs-cream);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: text-decoration-thickness 120ms var(--ease);
}
.link-on-dark:hover {
  color: var(--ffs-cream);
  text-decoration-thickness: 2px;
}

/* Header */
.site-header {
  background: var(--ffs-header-bg);
  /* Header/hero seam: lighter than the standard 16% border so it reads as
     a seam between two tints, not a container edge. */
  border-bottom: 1px solid var(--ffs-green-12);
}
.site-header__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 64px);
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
@media (max-width: 768px) {
  .site-header__inner { height: 64px; }
}

.logo {
  display: inline-flex;
  align-items: baseline;
  flex-shrink: 0;
  /* Brand lock: Cormorant Garamond 600 only, never synthesised heavier;
     36px is the minimum size the full wordmark is ever shown at, so it
     always clears its 220px minimum width. Below the breakpoint there
     isn't room for the full wordmark next to the header CTA, so it
     switches to the short "ffs." mark instead of shrinking under 36px. */
  font: 600 clamp(36px, 2.6vw, 42px)/1 var(--font-display);
  letter-spacing: -.02em;
  text-transform: lowercase;
  color: var(--ffs-green);
  text-decoration: none;
  font-synthesis: none;
  white-space: nowrap;
}
.logo:hover { color: var(--ffs-green); }
.logo__short { display: none; }
@media (max-width: 420px) {
  .logo__full { display: none; }
  .logo__short { display: inline-flex; align-items: baseline; }
}
.logo .cursor { background: var(--ffs-lavender); }

/* Hero */
.hero { background: var(--ffs-hero-bg); }
.hero__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding: clamp(48px, 7vw, 104px) clamp(20px, 4vw, 64px) clamp(40px, 5vw, 72px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.hero__text {
  flex: 1 1 420px;
  min-width: min(100%, 320px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}
.hero__text .lead { max-width: 52ch; }
.hero__photo {
  flex: 0 1 340px;
  min-width: min(100%, 240px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hero__photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}
.caption {
  font: 600 17px/1.4 var(--font-body);
  color: var(--ffs-green);
}

/* The shift */
.stack-28 { display: flex; flex-direction: column; gap: 28px; }
.stack-24 { display: flex; flex-direction: column; gap: 24px; }
.stack-20 { display: flex; flex-direction: column; gap: 20px; }

.the-shift p:not(.the-shift__display) { max-width: 62ch; font-size: 19px; line-height: 1.6; text-wrap: pretty; }
.the-shift__display {
  margin-top: 16px;
  font: 600 clamp(32px, 4.8vw, 48px)/1.1 var(--font-display);
  letter-spacing: -.02em;
  color: var(--ffs-green);
}

/* Two ways to work together */
#work-together .section__inner { padding-bottom: clamp(40px, 5vw, 72px); }
.work-together__wrap { display: flex; flex-direction: column; gap: 40px; }
.offers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: stretch;
}
@media (max-width: 830px) {
  .offers { grid-template-columns: 1fr; }
}

.card {
  width: 100%;
  height: 100%;
  background: var(--ffs-white);
  border-radius: 16px;
  padding: 32px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  row-gap: 16px;
}
.card__body {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card__intro { font-size: 17px; margin-bottom: 20px; }
.card__headline { font: 600 clamp(24px, 2.6vw, 28px)/1.2 var(--font-display); letter-spacing: -.02em; color: var(--ffs-green); }

.steps {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.steps::before {
  content: '';
  position: absolute;
  left: 13.5px;
  top: 20px;
  bottom: 20px;
  width: 1px;
  background: var(--ffs-green-16);
}
.steps li { display: flex; gap: 14px; align-items: flex-start; position: relative; }
.steps__num {
  flex: 0 0 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--ffs-cream);
  color: var(--ffs-green);
  font: 600 14px/28px var(--font-body);
  text-align: center;
}
.steps__text { font-size: 17px; line-height: 1.55; }

.bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bullets li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 1.55; }
.bullets__dot {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--ffs-green);
}

.panel-wyg {
  margin-top: auto;
  padding: 4px 0 4px 24px;
  border-left: 1.5px solid var(--ffs-lavender);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.panel-wyg p { font-size: 17px; line-height: 1.55; }
.panel-wyg p.muted { font-size: 16px; color: var(--ffs-charcoal); }

.need-something { font-size: 17px; line-height: 1.6; text-wrap: pretty; }

/* What I don't do */
#what-i-dont-do .section__inner { padding-block: 0 clamp(48px, 6vw, 96px); }
.dont-do {
  border-top: 1px solid var(--ffs-green-16);
  padding-top: clamp(32px, 4vw, 56px);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: baseline;
}
.dont-do__heading { flex: 0 1 280px; }
.dont-do__body {
  flex: 1 1 380px;
  max-width: 56ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ffs-charcoal);
  text-wrap: pretty;
}

/* How I work */
.how-i-work__inner { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 64px); }
.how-i-work__col {
  flex: 1 1 420px;
  min-width: min(100%, 320px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}
.how-i-work__col .lead { max-width: 62ch; }

/* Testimonials */
#testimonials .section__inner { padding-block: clamp(56px, 7vw, 96px); }
.testimonials__wrap { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 64px); }
.quote {
  flex: 1 1 380px;
  min-width: min(100%, 300px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.quote__text {
  font: 600 clamp(22px, 2.8vw, 28px)/1.3 var(--font-display);
  letter-spacing: -.02em;
  color: var(--ffs-green);
  text-wrap: pretty;
}
.quote__meta { font-size: 16px; line-height: 1.5; color: var(--ffs-charcoal); }
.quote__meta strong { display: block; font-weight: 600; color: var(--ffs-green); }

/* Who I work with */
.who { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 64px); }
.who__heading { flex: 0 1 340px; }
.who__body {
  flex: 1 1 420px;
  min-width: min(100%, 300px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 62ch;
}
.who__body p { font-size: 19px; line-height: 1.6; text-wrap: pretty; }

/* How it starts */
.get-started { background: var(--ffs-green); color: var(--ffs-cream); }
.get-started .h2 { color: var(--ffs-cream); }
.get-started__inner { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 64px); }
.get-started__steps-col { flex: 1 1 420px; display: flex; flex-direction: column; gap: 28px; }
.steps-dark { list-style: none; padding: 0; margin: 0; max-width: 56ch; display: flex; flex-direction: column; gap: 20px; }
.steps-dark li { display: flex; gap: 16px; align-items: flex-start; }
.steps-dark__num {
  flex: 0 0 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--ffs-lavender);
  color: var(--ffs-green);
  font: 600 15px/32px var(--font-body);
  text-align: center;
}
.steps-dark__text { font-size: 18px; line-height: 1.55; color: var(--ffs-cream); }
.get-started__cta-col {
  flex: 0 1 360px;
  min-width: min(100%, 280px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  justify-content: center;
}
.get-started__cta-col .small,
.get-started__cta-col p { color: var(--ffs-cream); max-width: 40ch; text-wrap: pretty; }

/* Footer */
.site-footer { background: var(--ffs-cream); border-top: 1px solid var(--ffs-green-16); }
.site-footer__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding: 40px clamp(20px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.site-footer p { font-size: 15px; line-height: 1.6; color: var(--ffs-charcoal); max-width: 76ch; }
.site-footer .link { font-size: 15px; font-weight: 400; line-height: 1.6; }

/* Privacy page */
.privacy-main .section__inner { padding-block: clamp(48px, 6vw, 96px); }
.privacy-content { max-width: 68ch; display: flex; flex-direction: column; gap: 28px; }
.h1--privacy {
  font: 600 clamp(40px, 5.6vw, 64px)/1.05 var(--font-display);
  letter-spacing: -.02em;
  color: var(--ffs-green);
}
.privacy-content h2 {
  margin-top: 20px;
  font: 600 clamp(28px, 3.2vw, 36px)/1.15 var(--font-display);
  letter-spacing: -.02em;
  color: var(--ffs-green);
}
.privacy-content p:not(.small) { font-size: 19px; line-height: 1.65; text-wrap: pretty; }