/* Legacy Trades theme styles. Tokens come from theme.json as --wp--preset--* variables. */
:root {
  --ltc-control: 44px;
  --ltc-radius: 8px;
  --ltc-shadow: 0 1px 2px rgba(23, 32, 43, .06), 0 8px 24px rgba(23, 32, 43, .06);
  --ltc-focus: 0 0 0 3px #F7F5F1, 0 0 0 6px #B94700;
  --ltc-column: 70rem;   /* matches layout.wideSize in theme.json */
  --ltc-gutter: 1.25rem;
}
/* The sheet is written assuming border-box -- `min-height: 44px` on a control, a
   68ch measure on a padded element, `width: 100%` on a field -- but the reset was
   never there, so padding and borders were being added on top of every one of those
   numbers. Live effects: every button rendered 69px tall instead of the 44px the
   control token asks for, and a full-width control overflowed its container by
   exactly its padding plus border. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-size: 1.0625rem; }
p { max-width: 68ch; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--ltc-focus); border-radius: 4px; }
.screen-reader-text { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; overflow: hidden; word-wrap: normal !important; }
.skip-link { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--wp--preset--color--navy); color: #fff; padding: .75rem 1rem; }
.skip-link:focus { left: 1rem; top: 1rem; }

/* Header */
/* The sticky bar has to be the template-part WRAPPER, not the bar itself. A sticky
   element can only travel inside its containing block, and the block theme wraps this
   bar in a <header class="wp-block-template-part"> that is exactly the bar's own height
   -- 65px of travel for a 65px element, i.e. none. It looked correct in the computed
   styles and scrolled away in practice: measured on the live page, at scrollY 3000 the
   header's top was -3000, moving 1:1 with the document. On a phone page this long, that
   is the difference between the call to action always being one tap away and being
   8 screens away. */
header.wp-block-template-part:has(> .ltc-header) { position: sticky; top: 0; z-index: 20; }
.ltc-header { background: var(--wp--preset--color--cream); border-bottom: 1px solid var(--wp--preset--color--mist); }
.ltc-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; padding: .5rem 0; }
.ltc-brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--wp--preset--color--navy); text-decoration: none; font-family: var(--wp--preset--font-family--serif); font-weight: 600; font-size: 1.125rem; letter-spacing: -.01em; min-height: var(--ltc-control); }
/* Site logo. The uploaded artwork is the anvil followed by the wordmark on one
   transparent line, so a phone can show just the anvil by cropping from the left --
   one asset, no second file to keep in step. */
.ltc-header .wp-block-site-logo { margin: 0; line-height: 0; }
.ltc-header .wp-block-site-logo a { display: inline-flex; align-items: center; min-height: var(--ltc-control); }
.ltc-header .custom-logo { width: 204px; height: auto; max-width: 100%; }
.ltc-footer .wp-block-site-logo { margin: 0; line-height: 0; }
.ltc-footer .custom-logo { width: 168px; height: auto; }
.ltc-brand .ltc-mark { flex: none; }
.ltc-nav { display: flex; align-items: center; gap: .5rem; }
.ltc-nav a { min-height: var(--ltc-control); display: inline-flex; align-items: center; padding: 0 .9rem; color: var(--wp--preset--color--ink); text-decoration: none; border-radius: var(--ltc-radius); font-weight: 500; }
.ltc-nav a:hover { background: var(--wp--preset--color--mist); color: var(--wp--preset--color--ink); }
@media (max-width: 480px) {
  .ltc-nav .ltc-nav__secondary { display: none; }
  .ltc-footer .ltc-brand span { font-size: 1rem; }
  /* "Legacy Trades Capital" and "Tell us about your business" do not both fit on a
     375px row: side by side they want ~381px of a 335px line, so the wordmark wrapped
     onto three lines and the sticky header took 94px -- 12% of the screen -- on every
     scroll. Keep the mark and keep the button, and hide the wordmark visually only;
     it stays in the link's accessible name, and it is still set in the hero and the
     footer. */
  /* Crop the logo to its anvil: the artwork is 6.4:1 overall and the anvil is the
     left 27% of it, so a 42x24 box filled from the left shows the mark alone. */
  /* Only where the nav CTA competes for the row -- the Stage 2 header has no button,
     so it keeps the whole wordmark. */
  .ltc-header:has(.ltc-nav) .custom-logo { width: 42px; height: 24px; object-fit: cover; object-position: left center; }
  .ltc-header .ltc-nav .ltc-btn--primary { padding-inline: .9rem; }

  /* The photograph is framed for the desktop layout: its left third is the feathered
     dissolve that blends into the copy beside it. On a phone the copy is above, not
     beside, so that third is dead space and the two owners end up small. Crop to them. */
  .ltc-hero__img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 70% center; }
}

/* Buttons */
.ltc-btn, .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--ltc-control); padding: .65rem 1.25rem; border-radius: var(--ltc-radius); font-weight: 600; text-decoration: none; border: 2px solid transparent; cursor: pointer; font-size: 1.0625rem; line-height: 1.2; font-family: inherit; }
.ltc-btn--primary { background: var(--wp--preset--color--copper); color: #fff; }
.ltc-btn--primary:hover { background: var(--wp--preset--color--copper-deep); color: #fff; }
.ltc-btn--secondary { background: transparent; color: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--navy); }
.ltc-btn--secondary:hover { background: var(--wp--preset--color--navy); color: #fff; }
.ltc-btn--ghost { background: transparent; color: var(--wp--preset--color--copper); padding-left: .25rem; padding-right: .25rem; text-decoration: underline; text-underline-offset: 3px; }
.ltc-btn--ghost:hover { color: var(--wp--preset--color--copper-deep); }
.ltc-btn--on-dark { background: #fff; color: var(--wp--preset--color--navy); }
.ltc-btn--on-dark:hover { background: var(--wp--preset--color--mist); color: var(--wp--preset--color--navy); }
.ltc-btn[disabled], .ltc-btn[aria-disabled="true"] { opacity: .6; cursor: progress; }

/* Sections */
.ltc-section { padding-block: clamp(3rem, 8vw, 6rem); }
.ltc-section--dark { background: var(--wp--preset--color--navy); color: #E8E3DB; }
.ltc-section--dark :is(h1,h2,h3,h4) { color: #fff; }
.ltc-section--dark a { color: #F3E4D8; }
.ltc-section--tint { background: #fff; border-top: 1px solid var(--wp--preset--color--mist); border-bottom: 1px solid var(--wp--preset--color--mist); }
.ltc-eyebrow { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--wp--preset--color--copper); margin: 0 0 1rem; }
.ltc-section--dark .ltc-eyebrow { color: #F3B98A; }
.ltc-lead { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--slate); max-width: 60ch; }
.ltc-section--dark .ltc-lead { color: #D6D0C6; }
.ltc-micro { font-size: .9375rem; color: var(--wp--preset--color--slate); }
/* 20ch is the advance width of "0" in the heading face, so this measure moves when
   the face does. It only binds from roughly 700px up: below that the column is
   narrower than 20ch and wins. */
.ltc-hero h1 { max-width: 20ch; margin-top: 0; }
/* Copy left, photograph right. The photograph's left edge is feathered by design, so
   it dissolves toward the copy instead of butting against it. Copy comes first in the
   source, which is also the order a phone wants: headline, promise, button, then the
   picture -- putting the picture first would push the CTA below the fold. */
.ltc-hero__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 60rem) {
  .ltc-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
}
.ltc-hero__media { min-width: 0; }
.ltc-hero__img { display: block; width: 100%; height: auto; border-radius: 12px; }
@media (min-width: 60rem) {
  /* No radius on the feathered edge -- it has no edge to round. */
  .ltc-hero__img { border-radius: 0; }
}
.ltc-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin-top: 1.5rem; }
.ltc-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.ltc-card { background: #fff; border: 1px solid var(--wp--preset--color--mist); border-radius: 12px; padding: 1.5rem; box-shadow: var(--ltc-shadow); display: flex; flex-direction: column; gap: .75rem; }
.ltc-card h3 { margin: 0; font-size: 1.25rem; }
.ltc-card p { margin: 0; color: var(--wp--preset--color--slate); }
.ltc-card .ltc-btn { align-self: flex-start; margin-top: auto; }
.ltc-card__kicker { font-family: var(--wp--preset--font-family--serif); color: var(--wp--preset--color--copper); font-weight: 600; font-size: 1.5rem; margin: 0; }
.ltc-steps { counter-reset: step; list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.ltc-steps li { counter-increment: step; background: #fff; border: 1px solid var(--wp--preset--color--mist); border-radius: 12px; padding: 1.5rem; }
.ltc-steps li::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--wp--preset--font-family--serif); color: var(--wp--preset--color--copper); font-weight: 600; margin-bottom: .5rem; }
.ltc-steps h3 { margin: 0 0 .5rem; font-size: 1.125rem; }
.ltc-steps p { margin: 0; color: var(--wp--preset--color--slate); }
.ltc-list { padding-left: 1.25rem; }
.ltc-list li { margin: .35rem 0; }
.ltc-callout { border-left: 4px solid var(--wp--preset--color--copper); padding: .25rem 0 .25rem 1.25rem; margin: 1.5rem 0; }
.ltc-two-col { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: start; }

/* Phones. Nearly all of this traffic is on one, so the phone layout is the layout
   that matters, not a fallback. */
@media (max-width: 600px) {
  /* Six sections at 48px top and bottom spend 576px of padding on an 812px screen.
     The page is already about nine screens tall. */
  .ltc-section { padding-block: 2.5rem; }

  /* One full-width primary action per screen. "Start here" was a 125px box in a
     301px card -- a small target that read as an afterthought -- and the hero's two
     actions sat side by side competing for the same row. */
  .ltc-hero__actions { flex-direction: column; align-items: stretch; gap: .75rem; }
  .ltc-hero__actions .ltc-btn--primary { width: 100%; }
  .ltc-hero__actions .ltc-btn--ghost { align-self: center; }
  .ltc-card .ltc-btn { align-self: stretch; width: 100%; }

  /* 44 characters of tracked-out caps wrapped to two lines at 375px. */
  .ltc-eyebrow { letter-spacing: .07em; }

  /* The card's own padding was taking 48px of a 375px screen away from the copy. */
  .ltc-card { padding: 1.25rem; }
}

/* Footer */
.ltc-footer { border-top: 1px solid var(--wp--preset--color--mist); padding: 2rem 0; font-size: .9375rem; color: var(--wp--preset--color--slate); }
.ltc-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.ltc-footer a { color: var(--wp--preset--color--navy); }
.ltc-footer .ltc-brand { font-size: 1rem; }

/* Plain pages (privacy, thank you). Same centered column and same left-hand axis as
   the landing page, so the heading lines up under the brand instead of starting
   160px to its right. The Stage 2 intake page keeps its own centered form. */
.ltc-plain { padding-block: 3rem; }
.ltc-plain:not(.ltc-intake-page) { padding-inline: max(var(--ltc-gutter), (100% - var(--ltc-column)) / 2); }
.ltc-plain:not(.ltc-intake-page) > * { margin-left: 0 !important; margin-right: 0 !important; }
.ltc-plain :is(h1) { margin-top: 0; }
.ltc-prose { max-width: 68ch; }

/* One column, centered in the viewport, shared by the sections, the header and the
   footer so the nav button lines up with the copy beneath it.

   The blocks inside a section are left-aligned prose, not centered blocks, so their
   inline margins stay 0. Zeroing them is what a constrained group layout needs to be
   told -- but zeroing them ALSO removes the auto margins that centered the column
   itself, which pinned the whole page to the left edge (~780px of dead space at
   1920px wide). So the column is centered here with padding instead, which leaves the
   full-bleed section backgrounds intact. */
.ltc-section,
.ltc-header,
.ltc-footer { padding-inline: max(var(--ltc-gutter), (100% - var(--ltc-column)) / 2); }
.ltc-section > :where(h1, h2, h3, p, div, ol, ul, dl, article, details) { margin-left: 0 !important; margin-right: 0 !important; }
.ltc-header > *, .ltc-footer > * { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; }

/* Small print is a direct child of the section, so the constrained layout's
   max-width (the full 70rem column) beat the `p { max-width: 68ch }` above it on
   specificity, and the smallest type on the page ended up with the longest line --
   the fairness note ran ~135 characters. Give it its own measure. */
.ltc-section > .ltc-micro { max-width: 72ch; }

/* The inquiry form is much taller than the promise standing next to it, so that
   promise scrolled away and left an empty half-screen beside the fields. Pin it to
   the top of its grid area instead; it travels the height of the form. The grid
   already sets align-items:start, which is what gives a sticky grid item somewhere
   to travel. Single column below 60rem, where there is nothing to pin. */
@media (min-width: 60rem) {
  #inquiry .ltc-two-col > div:first-child { position: sticky; top: 6rem; }
}

/* Landing copy lives in the page as core blocks, so button variants land on the
   block wrapper and the <a> inside needs the same paint. */
.wp-block-button.is-ltc-primary > .wp-block-button__link { background: var(--wp--preset--color--copper); color: #fff; border-color: transparent; }
.wp-block-button.is-ltc-primary > .wp-block-button__link:hover { background: var(--wp--preset--color--copper-deep); color: #fff; }
.wp-block-button.is-ltc-secondary > .wp-block-button__link { background: transparent; color: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--navy); }
.wp-block-button.is-ltc-secondary > .wp-block-button__link:hover { background: var(--wp--preset--color--navy); color: #fff; }
.wp-block-button.is-ltc-ghost > .wp-block-button__link { background: transparent; color: var(--wp--preset--color--copper); padding-left: .25rem; padding-right: .25rem; text-decoration: underline; text-underline-offset: 3px; }
.wp-block-button.is-ltc-ghost > .wp-block-button__link:hover { color: var(--wp--preset--color--copper-deep); }
/* .ltc-hero__actions already carries its own margin and gap above; the card's button
   row is what needs pinning to the bottom now that it is a block, not a bare <a>. */
.ltc-card .wp-block-buttons { margin-block-start: auto; }
.ltc-card .ltc-eyebrow { margin: 0; }
.ltc-grid--spaced { margin-top: 2rem; }
.ltc-list--narrow { max-width: 60ch; margin-top: 1.5rem; }
.ltc-micro--spaced { margin-top: 1.5rem; }
.ltc-section--dark .ltc-micro { color: #D6D0C6; }
/* Steps were an <ol>; as blocks each step is a group, so the counter moves with it. */
.ltc-steps { counter-reset: step; }
.ltc-steps__item { counter-increment: step; background: #fff; border: 1px solid var(--wp--preset--color--mist); border-radius: 12px; padding: 1.5rem; }
.ltc-steps__item::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--wp--preset--font-family--serif); color: var(--wp--preset--color--copper); font-weight: 600; margin-bottom: .5rem; }
.ltc-steps__item h3 { margin: 0 0 .5rem; font-size: 1.125rem; }
.ltc-steps__item p { margin: 0; color: var(--wp--preset--color--slate); }

/* These containers are CSS grids, but WordPress also tags them is-layout-flow and
   opens a block gap above every child but the first. On a grid that margin is added
   to the item box and makes the whole row taller. */
.ltc-hero__grid > *, .ltc-grid > *, .ltc-steps > *, .ltc-two-col > * { margin-block-start: 0; }

/* The callout used to get its breathing room from the default margins of the <p>
   inside it. As a block that paragraph has no margins, so the room becomes padding. */
.ltc-callout { padding-block: 1.25rem; }

@media (max-width: 600px) {
  /* Block-editor equivalents of the phone rules above: the landing buttons are core
     button blocks now, so the variant class sits on .wp-block-button and the painted
     element is the <a> inside it. Same intent: one full-width primary action. */
  .ltc-hero__actions .wp-block-button.is-ltc-primary { width: 100%; }
  .ltc-hero__actions .wp-block-button.is-ltc-ghost { align-self: center; }
  .ltc-card .wp-block-buttons, .ltc-card .wp-block-button { align-self: stretch; width: 100%; }
  .ltc-hero__actions .wp-block-button.is-ltc-primary > .wp-block-button__link,
  .ltc-card .wp-block-button > .wp-block-button__link { width: 100%; }
}

.ltc-footer__credit { margin-top: .35rem; }

/* Founder portraits and the emphasised sub-block in the ownership section. */
.ltc-portrait { width: 5.5rem; height: 5.5rem; border-radius: 50%; object-fit: cover; display: block; margin-bottom: .25rem; }
.ltc-card--wide { margin-top: 1.5rem; }
.ltc-card--wide h3 { font-size: 1.375rem; }
.ltc-verse { font-style: italic; }