@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@400;500;600;700&family=Frank+Ruhl+Libre:wght@500;600;700&display=swap');

:root { --header-h: 70px; }

body { background: var(--bg); color: var(--ink); }
a { color: inherit; }
.site-header { background: color-mix(in oklab, var(--bg) 94%, transparent); }
.site-header__logo img { height: 42px; width: auto; }
.site-nav a, .site-footer a { text-decoration: none; }
.site-nav ul { display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.site-nav a:hover, .site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-nav ul { align-items: center; }
.site-header__inner { min-height: var(--header-h); }
.header-cta { white-space: nowrap; }

.eyebrow {
  color: var(--ink-soft);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2;
  margin-block-end: var(--space-4);
}
.eyebrow::before { content: ""; display: inline-block; width: 30px; height: 2px; background: var(--sage); vertical-align: middle; margin-inline-end: 10px; }
.hero { min-height: min(760px, calc(100vh - var(--header-h))); display: grid; grid-template-columns: minmax(0, 1fr); overflow: clip; }
.hero__content { display: flex; align-items: center; padding-block: clamp(4rem, 8vw, 8rem); padding-inline: var(--gutter); }
.hero__content-inner { width: min(100%, 650px); margin-inline-start: auto; }
.hero h1 { font-size: clamp(3rem, 7vw, 6rem); line-height: .98; max-width: 8.5ch; margin-block-end: var(--space-6); }
.hero h1 .fx-accent { color: var(--sage); }
.hero__lead { font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.55; max-width: 34ch; color: var(--ink-soft); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-7); }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-block-start: var(--space-6); color: var(--ink-soft); font-size: var(--step--1); }
.hero__meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero__meta strong { color: var(--ink); }
.hero__media { min-height: 520px; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }

.page-hero { padding-block: clamp(5rem, 10vw, 9rem) var(--space-8); border-block-end: var(--border); }
.page-hero h1 { max-width: 16ch; font-size: clamp(2.8rem, 6vw, 5.2rem); }
.page-hero p { color: var(--ink-soft); font-size: var(--step-1); max-width: 48ch; }
.page-hero__label { margin-block-end: var(--space-4); }
.section--surface { background: var(--surface); }
.section--ink { background: var(--ink); color: var(--accent-ink); }
.section--ink p, .section--ink .eyebrow { color: color-mix(in oklab, var(--accent-ink) 74%, transparent); }
.section--ink .eyebrow::before { background: var(--sage); }
.section--ink a { color: inherit; }
.section--sage { background: var(--accent-soft); }
.rule { border-block-start: var(--border); }
.section-intro { max-width: 720px; margin-block-end: var(--space-8); }
.section-intro h2 { max-width: 14ch; }
.section-intro p { color: var(--ink-soft); max-width: 55ch; font-size: var(--step-1); }
.section--ink .section-intro p { color: color-mix(in oklab, var(--accent-ink) 74%, transparent); }

.split-feature { display: grid; gap: var(--space-8); align-items: center; }
.split-feature__media { min-height: 430px; overflow: hidden; }
.split-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.split-feature__content { max-width: 570px; }
.split-feature__content h2 { max-width: 13ch; }
.split-feature__content p { color: var(--ink-soft); }
.split-feature--reverse .split-feature__content { order: 2; }
.split-feature--reverse .split-feature__media { order: 1; }

.cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 1px; background: color-mix(in oklab, var(--ink) 16%, transparent); border-block-start: 1px solid color-mix(in oklab, var(--ink) 16%, transparent); }
.cards > * { flex: 1 1 240px; min-width: min(100%, 240px); background: var(--bg); padding: var(--space-6); }
.cards h3 { font-size: var(--step-1); margin-block-end: var(--space-3); }
.cards p { color: var(--ink-soft); }
.card-link { display: inline-flex; gap: 8px; align-items: center; margin-block-start: var(--space-4); color: var(--ink); font-weight: 700; text-decoration: none; }
.card-link::after { content: "←"; color: var(--sage); transition: transform var(--dur-fast) var(--ease); }
.card-link:hover::after { transform: translateX(-4px); }

.service-list { display: grid; gap: 0; border-block-start: var(--border); }
.service-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: var(--space-5); align-items: start; padding-block: var(--space-6); border-block-end: var(--border); }
.service-row__num { color: var(--sage); font-family: var(--font-display); font-size: var(--step-2); }
.service-row h3 { font-size: var(--step-2); margin-block-end: var(--space-2); }
.service-row p { color: var(--ink-soft); margin: 0; max-width: 48ch; }
.service-row a { align-self: center; font-weight: 700; text-decoration: none; white-space: nowrap; }

.steps { display: grid; gap: 0; border-block-start: var(--border); counter-reset: step; }
.step { counter-increment: step; display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: var(--space-5); padding-block: var(--space-6); border-block-end: var(--border); }
.step::before { content: counter(step, decimal-leading-zero); color: var(--sage); font-family: var(--font-display); font-size: var(--step-2); }
.step h3 { font-size: var(--step-1); margin-block-end: var(--space-2); }
.step p { color: var(--ink-soft); margin: 0; }

.quote-band { padding-block: var(--space-8); border-block: var(--border); }
.quote-band blockquote { max-width: 900px; margin: 0; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 4rem); line-height: 1.08; }
.quote-band cite { display: block; margin-block-start: var(--space-5); font-family: var(--font-body); font-size: var(--step--1); font-style: normal; color: var(--ink-soft); }

.rating { display: flex; gap: var(--space-6); align-items: baseline; border-block: var(--border); padding-block: var(--space-5); }
.rating strong { font-family: var(--font-display); font-size: var(--step-3); }
.rating span { color: var(--ink-soft); }
.stars { letter-spacing: .1em; color: var(--sage); }

.faq-list { border-block-start: var(--border); }
.faq-item { border-block-end: var(--border); }
.faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-5); font-size: var(--step-1); font-weight: 700; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--sage); font-size: 1.5em; font-weight: 400; }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding: 0 0 var(--space-5); color: var(--ink-soft); max-width: 72ch; }

.article-grid { display: grid; gap: var(--space-5); }
.article-card { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-5); border-block-start: var(--border); padding-block: var(--space-5); text-decoration: none; }
.article-card img { width: 160px; height: 115px; object-fit: cover; }
.article-card h3 { font-size: var(--step-1); margin-block-end: var(--space-2); }
.article-card p { color: var(--ink-soft); font-size: var(--step--1); }
.article-card small { color: var(--ink-soft); }

.prose { max-width: 72ch; }
.prose h2 { margin-block-start: var(--space-8); font-size: var(--step-2); }
.prose h3 { margin-block-start: var(--space-6); font-size: var(--step-1); }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul, .prose ol { padding-inline-start: 1.3em; }
.prose li + li { margin-block-start: var(--space-2); }

.contact-grid { display: grid; gap: var(--space-8); align-items: start; }
.contact-details { display: grid; gap: var(--space-5); }
.contact-detail { border-block-start: var(--border); padding-block-start: var(--space-4); }
.contact-detail small { display: block; color: var(--ink-soft); margin-block-end: var(--space-2); }
.contact-detail a { font-size: var(--step-1); font-weight: 700; text-decoration: none; }
.lead-form { background: var(--surface); padding: clamp(1.5rem, 4vw, 3rem); }
.lead-form h2 { font-size: var(--step-2); }
.form-grid { display: grid; gap: var(--space-4); }
.form-field { display: grid; gap: var(--space-2); }
.form-field label { font-weight: 700; }
.form-field input, .form-field textarea, .form-field select { width: 100%; border: 1px solid color-mix(in oklab, var(--ink) 28%, transparent); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); font: inherit; font-size: 16px; padding: .75rem .9rem; }
.form-field textarea { min-height: 130px; resize: vertical; }
.form-note, .form-status { color: var(--ink-soft); font-size: var(--step--1); }

.site-footer { background: var(--surface); border-block-start: var(--border); padding-block: var(--space-8) calc(var(--space-8) + 70px); }
.site-footer__grid { display: grid; gap: var(--space-7); }
.site-footer h2 { font-family: var(--font-body); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.site-footer p, .site-footer li { color: var(--ink-soft); font-size: var(--step--1); }
.site-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; margin-block-start: var(--space-7); padding-block-start: var(--space-4); border-block-start: var(--border); }

.sticky-bar { background: var(--ink); color: var(--accent-ink); }
.sticky-bar a { color: var(--accent-ink); }
.sticky-bar a + a { border-inline-start: 1px solid color-mix(in oklab, var(--accent-ink) 30%, transparent); }
.mobile-menu { background: var(--bg); }
.mobile-menu__meta { color: var(--ink-soft); font-size: var(--step--1); }
.mobile-menu a.btn--primary { color: var(--accent-ink); background: var(--accent); }
.nav-toggle,
.mobile-menu__close { inline-size: 44px; block-size: 44px; min-inline-size: 44px; min-block-size: 44px; padding: 0; flex: 0 0 44px; }
.nav-toggle svg,
.mobile-menu__close svg { inline-size: 24px; block-size: 24px; max-inline-size: none; flex: none; display: block; }
.nav-toggle__glyph { display: block; color: currentColor; font: 400 25px/1 Arial, sans-serif; transform: translateY(-1px); }
.sticky-bar svg { inline-size: 18px; block-size: 18px; max-inline-size: none; flex: none; }

@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .split-feature, .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split-feature__content { margin-inline-start: auto; }
  .site-footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); }
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .site-header__inner { gap: var(--space-3); min-width: 0; }
  .site-header__logo { min-width: 0; flex: 1 1 auto; display: flex; justify-content: flex-start; }
  .site-header__logo img { width: min(145px, 42vw); height: auto; max-width: 100%; }
  .nav-toggle { flex: 0 0 44px; }
  .header-cta { display: none; }
  .hero { min-height: auto; }
  .hero__content { padding-block: 4.5rem 3.5rem; }
  .hero__content-inner { width: 100%; max-width: none; margin-inline: 0; text-align: center; }
  .hero__media { min-height: 380px; }
  .hero h1 { max-width: 100%; font-size: clamp(2.55rem, 13vw, 3.6rem); text-wrap: pretty; }
  .hero__lead { max-width: 30ch; margin-inline: auto; }
  .hero__actions { align-items: stretch; justify-content: center; }
  .hero__actions .btn { width: 100%; }
  .hero__meta { justify-content: center; }
  .service-row { grid-template-columns: 64px minmax(0, 1fr); }
  .service-row a { grid-column: 2; justify-self: start; }
  .step { grid-template-columns: 64px minmax(0, 1fr); }
  .article-card { grid-template-columns: 112px minmax(0, 1fr); }
  .article-card img { width: 112px; height: 96px; }
}