/* ==========================================================================
   MortgageTexas: Mike Power, Dallas & North Texas

   Direction: warm editorial print. Cream stock, indigo display serif, a green
   used only where it means something. One dark anchor section carries the
   signature element (the process path). Everything else stays quiet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted, latin subset)
   -------------------------------------------------------------------------- */

/* PT Serif regular (non-italic 400) is deliberately absent: nothing uses it once
   h1/h2 are weight 700 and both pull-quotes are italic. Do not re-add the
   @font-face without shipping the file, or it becomes a dead reference. */

@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/pt-serif-400i.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/pt-serif-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* Variable weight axis, so 400/600/700 all come from this one file. */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/libre-franklin-var.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Colour. Every text/background pair meets WCAG 2.1 AA (4.5:1 or better). */
  --cream: #f7f3e9;
  --cream-deep: #efe9d9;
  --paper: #ffffff;
  --ink: #35322b;
  --ink-soft: #575349;
  --ink-mute: #6f6a58;
  --indigo: #2d2b77;
  --indigo-deep: #1e1c56;
  --green: #2f7d4e;
  --green-deep: #24613d;
  --rule: #ddd6c2;
  --rule-firm: #c6bfa5;
  --forest: #1f4632;
  --forest-lift: #2a5c43;
  --forest-ink: #d6e5da;
  --forest-mute: #a8c4b3;

  /* Type roles.
     Serif is reserved for large type only: h1, section h2s, and the two
     italic pull-quotes. It is never used below about 28px, because that is
     where a screen serif starts to feel dated. Everything that does actual
     work, including h3s, is the sans. The wordmark is a humanist sans, so
     the sans is what the page is really keyed to. */
  --display: 'PT Serif', Georgia, 'Times New Roman', serif;
  --body: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  /* Scale */
  --t-xs: 13px;
  --t-sm: 15px;
  --t-base: 17px;
  --t-md: 19px;
  --t-lg: 22px;
  --t-h3: 21px;
  --t-h2: clamp(28px, 3.6vw, 38px);
  --t-h1: clamp(38px, 6.4vw, 68px);

  /* Layout */
  --wrap: 1120px;
  --gutter: 24px;
  --radius: 3px;
  --band: clamp(56px, 7vw, 92px);

  /* Right edge of the hero text column, in absolute terms.
     The .wrap is max 1120px with 24px padding and .hero__inner is 620px wide,
     so the column ends at 644px on narrow screens and at 50vw + 84px once the
     wrap starts centring. The +16px is slack. The hero veil gradient keys its
     stops to this so contrast holds at every viewport width, which percentage
     stops cannot do. */
  --text-edge: max(660px, calc(50vw + 100px));

  /* Fine paper grain. Keeps the cream from reading as flat fill. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* Clears the sticky nav band when jumping to an anchor. */
  scroll-padding-top: 78px;
}

body {
  margin: 0;
  background-color: var(--cream);
  background-image: var(--grain);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3 {
  font-weight: 700;
  color: var(--indigo);
  line-height: 1.14;
  text-wrap: balance;
  margin: 0;
}

/* Serif only at display sizes. */
h1,
h2 {
  font-family: var(--display);
  letter-spacing: -0.018em;
}

/* h3s sit at 17-21px, where the sans is doing the work. */
h3 {
  font-family: var(--body);
  font-weight: 600;
  letter-spacing: -0.006em;
  line-height: 1.25;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--indigo);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--green);
}

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

:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 3px;
}

/* An indigo outline is invisible on the indigo nav band and call bar, and
   near-invisible on the forest sections. Those surfaces get a cream ring
   instead. Without this, keyboard focus simply vanishes in the mobile call bar.
   outline-offset keeps the ring outside the element, so it still reads against
   the dark field even on the cream-coloured button in the forest band. */
.mainnav :focus-visible,
.callbar :focus-visible,
.band--forest :focus-visible,
.colophon :focus-visible {
  outline-color: var(--cream);
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Bands own all vertical rhythm. Nothing else sets section padding, so the
   selectors below can never cancel each other out. */
.band {
  padding-block: var(--band);
}

.band--paper {
  background: var(--paper);
  border-block: 1px solid var(--rule);
}

.band--forest {
  background-color: var(--forest);
  background-image: var(--grain);
  color: var(--forest-ink);
}

.band--forest h2,
.band--forest h3 {
  color: #fff;
}

/* Vertical stack for the few places without a bespoke layout (404). */
.stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

/* Section heading block: rule, eyebrow, title, standfirst. */
.lede {
  max-width: 660px;
  margin-bottom: clamp(32px, 4vw, 48px);
}

.lede h2 {
  font-size: var(--t-h2);
  margin-block: 14px 14px;
}

.lede p {
  color: var(--ink-soft);
  font-size: var(--t-md);
}

.band--forest .lede p {
  color: var(--forest-ink);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--body);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
}

.eyebrow::before {
  content: '';
  width: 34px;
  height: 2px;
  background: currentColor;
  flex: none;
}

.band--forest .eyebrow {
  color: var(--forest-mute);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--indigo);
  color: #fff;
  padding: 12px 20px;
  text-decoration: none;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
  color: #fff;
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */

/* Nameplate: the cream row carrying the logo and direct contact details. */
.masthead {
  background-color: var(--cream);
  background-image: var(--grain);
}

.masthead__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 16px;
  padding-block: 24px 22px;
}

.masthead__bar > a {
  display: block;
  line-height: 0;
  text-decoration: none;
}

.masthead__logo {
  height: 64px;
  width: auto;
  display: block;
  /* Logo art ships on white; multiply drops it onto the cream field. */
  mix-blend-mode: multiply;
}

.masthead__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-family: var(--body);
  text-align: right;
}

.masthead__standby {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.masthead__phone {
  font-size: 25px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.masthead__email {
  font-size: var(--t-sm);
  color: var(--green);
  text-decoration: none;
}

.masthead__email:hover {
  color: var(--indigo);
}

/* ---- Sticky navigation band ------------------------------------------- */

.mainnav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--indigo);
  /* Hairline of brand green reads as an ink rule under the band. */
  border-bottom: 3px solid var(--green);
}

.mainnav__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 24px;
}

.mainnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.mainnav ul a {
  display: block;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  padding: 17px 18px;
  position: relative;
  transition: color 0.16s ease, background-color 0.16s ease;
}

.mainnav ul li:first-child a {
  padding-left: 0;
}

.mainnav ul a::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 11px;
  height: 1px;
  background: var(--cream);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.mainnav ul li:first-child a::after {
  left: 0;
}

.mainnav ul a:hover,
.mainnav ul a:focus-visible {
  color: #fff;
}

.mainnav ul a:hover::after,
.mainnav ul a[aria-current="true"]::after {
  transform: scaleX(1);
}

.mainnav ul a[aria-current="true"] {
  color: #fff;
}

/* Short nav labels are phone-only; see the markup comment in index.html. */
.lbl-sm {
  display: none;
}

.mainnav__cta {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--green);
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 100px;
  white-space: nowrap;
  transition: background-color 0.16s ease;
}

.mainnav__cta:hover {
  background: var(--green-deep);
  color: #fff;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.2;
  padding: 15px 30px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease,
    color 0.18s ease, transform 0.18s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn--solid {
  background: var(--indigo);
  color: #fff;
}

.btn--solid:hover {
  background: var(--indigo-deep);
  color: #fff;
}

.btn--green {
  background: var(--green);
  color: #fff;
}

.btn--green:hover {
  background: var(--green-deep);
  color: #fff;
}

.btn--outline {
  background: transparent;
  color: var(--indigo);
  /* --rule-firm measures only 1.66:1 against the cream, which fails the 3:1
     WCAG minimum for the boundary of an interactive control. This passes. */
  border-color: var(--ink-mute);
}

.btn--outline:hover {
  border-color: var(--indigo);
  background: rgba(45, 43, 119, 0.04);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-top: clamp(44px, 5.5vw, 76px);
  padding-bottom: 0;
  /* Depth without imagery: light falling from above, a faint brand-green
     warmth top-right, and the same paper grain as the rest of the stock.
     Deliberately not a washed-out photo. See note in the README. */
  background-image:
    var(--grain),
    radial-gradient(1100px 520px at 84% -10%, rgba(47, 125, 78, 0.09), transparent 68%),
    linear-gradient(180deg, #fdfbf5 0%, var(--cream) 58%);
}

.hero__kicker {
  font-family: var(--body);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* --ink-soft, not --ink-mute: this is the lightest text over the veiled
     photograph, and the mute tone would land at about 4.4:1 there. */
  color: var(--ink-soft);
  margin-bottom: 22px;
}

.hero h1 {
  font-size: var(--t-h1);
  line-height: 1.02;
  letter-spacing: -0.028em;
  max-width: 15ch;
}

/* The tagline is the brand's thesis, so it gets pull-quote treatment. */
.hero__thesis {
  margin: 26px 0 0;
  padding-left: 20px;
  border-left: 3px solid var(--green);
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(19px, 2.5vw, 25px);
  line-height: 1.35;
  color: var(--green-deep);
  max-width: 26ch;
}

.hero__split {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 30px clamp(36px, 5vw, 68px);
  align-items: start;
  margin-top: clamp(30px, 3.5vw, 44px);
}

.hero__pitch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}

.hero__standfirst {
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46ch;
}

/* Double-rule frame: a print convention, not a drop shadow. */
/* Credential strip. The D Magazine recognition is the strongest trust signal
   on the page, so it sits above the fold instead of inside a paragraph. */
.credential {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 18px;
  border-top: 2px solid var(--green);
  font-family: var(--body);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--ink-soft);
}

.credential strong {
  color: var(--indigo);
  font-weight: 700;
  font-size: var(--t-md);
  line-height: 1.25;
}

.credential em {
  /* Deep green, not --green: over the veiled photograph the lighter green
     measures 4.03:1, which fails AA. This one measures about 5:1. */
  color: var(--green-deep);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   8. About
   -------------------------------------------------------------------------- */

.profile {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(32px, 4.5vw, 60px);
  align-items: start;
}

.profile__plate {
  padding: 7px;
  border: 1px solid var(--rule);
  background: var(--paper);
}

.profile__plate img {
  display: block;
  width: 100%;
  height: auto;
}

.profile__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.profile__body h2 {
  font-size: var(--t-h2);
}

.profile__body p {
  color: var(--ink-soft);
}

.profile__body p:first-of-type {
  color: var(--ink);
  font-size: var(--t-md);
}

/* --------------------------------------------------------------------------
   9. Loan programme cards
   -------------------------------------------------------------------------- */

.programmes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 18px;
}

.programme {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.18s ease, transform 0.18s ease,
    box-shadow 0.18s ease;
}

.programme:hover {
  border-color: var(--rule-firm);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -18px rgba(53, 50, 43, 0.7);
}

/* The tag is real classification, not decoration: it says which side of the
   business each programme sits on. */
.programme__tag {
  align-self: flex-start;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 4px;
}

.programme h3 {
  font-size: var(--t-h3);
}

.programme p {
  font-size: 16px;
  line-height: 1.62;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   10. The process path (signature element)
   -------------------------------------------------------------------------- */

.journey {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: leg;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
  position: relative;
}

/* The thread every marker sits on. This is the signature, so it has to read
   as a path rather than a hairline that disappears into the field. */
.journey::before {
  content: '';
  position: absolute;
  top: 21px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: rgba(168, 196, 179, 0.45);
}

.journey li {
  counter-increment: leg;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.journey li::before {
  content: counter(leg);
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--forest-mute);
  border-radius: 50%;
  background: var(--forest);
  font-family: var(--display);
  font-size: var(--t-md);
  font-weight: 700;
  color: #fff;
}

.journey h3 {
  font-size: var(--t-md);
  letter-spacing: -0.01em;
}

.journey p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--forest-ink);
}

.journey__foot {
  margin-top: clamp(36px, 4.5vw, 54px);
  padding-top: 24px;
  border-top: 1px solid var(--forest-lift);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  justify-content: space-between;
}

.journey__foot p {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--t-lg);
  color: #fff;
  max-width: 32ch;
}

.btn--onforest {
  background: var(--cream);
  color: var(--forest);
}

.btn--onforest:hover {
  background: #fff;
  color: var(--forest);
}

/* --------------------------------------------------------------------------
   11. Areas served
   -------------------------------------------------------------------------- */

.counties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 0;
  border-top: 1px solid var(--rule-firm);
}

.counties > div {
  padding: 24px 24px 24px 0;
  border-bottom: 1px solid var(--rule);
}

.counties h3 {
  font-size: 17px;
  letter-spacing: 0.01em;
  margin-bottom: 10px;
}

.counties ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.85;
}

.plates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px;
  margin-top: clamp(32px, 4vw, 46px);
}

.plates img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  display: block;
  border: 1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   12. FAQ
   -------------------------------------------------------------------------- */

.questions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 0 clamp(32px, 5vw, 64px);
}

.questions > div {
  border-top: 1px solid var(--rule);
  padding-block: 24px;
}

.questions h3 {
  font-size: var(--t-md);
  margin-bottom: 10px;
}

.questions p {
  font-size: 16px;
  line-height: 1.62;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   13. Contact
   -------------------------------------------------------------------------- */

.contact {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.contact__intro h2 {
  font-size: var(--t-h2);
  margin-bottom: 16px;
}

.contact__intro p {
  color: var(--ink-soft);
  font-size: var(--t-md);
  max-width: 40ch;
}

.contact__details {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 28px 0 0;
  font-size: 16px;
  border-top: 1px solid var(--rule);
}

.contact__details div {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding-block: 13px;
  border-bottom: 1px solid var(--rule);
}

.contact__details dt {
  color: var(--green);
  font-weight: 700;
  font-family: var(--body);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  min-width: 68px;
}

.contact__details dd {
  margin: 0;
}

.form {
  background: var(--cream);
  border: 1px solid var(--rule-firm);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-family: var(--body);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.form__row label {
  flex: 1;
  min-width: 180px;
}

.form input,
.form textarea {
  font-family: var(--body);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  padding: 12px 13px;
  border: 1px solid var(--rule-firm);
  border-radius: var(--radius);
  background: var(--paper);
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.form textarea {
  resize: vertical;
}

.form input:focus,
.form textarea:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(45, 43, 119, 0.14);
}

.form input::placeholder,
.form textarea::placeholder {
  color: var(--ink-mute);
  font-style: italic;
}

.form button {
  align-self: flex-start;
}

/* Honeypot. Kept in the layout but off-screen, so bots that ignore CSS still
   fill it in. Never use display:none here; scrapers check for it. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__note {
  font-size: var(--t-sm);
  color: var(--green-deep);
  min-height: 1.4em;
}

.form__note--error {
  color: #8f2d13;
}

.form__privacy {
  font-size: var(--t-xs);
  color: var(--ink-mute);
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

.colophon {
  background-color: var(--forest);
  background-image: var(--grain);
  color: var(--forest-ink);
}

.colophon a {
  color: #fff;
}

.colophon a:hover {
  color: var(--forest-mute);
}

.colophon__main {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--t-sm);
  padding-top: 34px;
}

.colophon__brand {
  font-family: var(--body);
  font-size: var(--t-md);
  color: #fff;
  letter-spacing: -0.01em;
}

.colophon__legal {
  border-top: 1px solid var(--forest-lift);
  margin-top: 26px;
  padding-block: 20px 34px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: var(--t-xs);
  line-height: 1.65;
}

/* Texas SML prescribed notice. The all-caps wording is mandated, so it cannot
   be sentence-cased; extra tracking and line-height are the only levers
   available to keep a wall of capitals legible. */
.notice {
  font-size: 11px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--forest-mute);
  max-width: 92ch;
}

.ehl {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--body);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

.ehl svg {
  flex: none;
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   15. Mobile call bar
   -------------------------------------------------------------------------- */

.callbar {
  display: none;
}

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .journey {
    grid-template-columns: repeat(2, 1fr);
    gap: 34px;
  }

  /* The thread only reads as a path on one row, so drop it below that. */
  .journey::before {
    display: none;
  }
}

/* Wide viewports: the photo fills what was dead space to the right of the
   headline, and a cream scrim keeps every word sitting on solid colour rather
   than on the image, so contrast is unchanged. The separate framed plate below
   is redundant once this exists, so it is hidden here and shown again on
   narrow screens where a background image would sit under the text. */
/* The photograph sits behind the whole hero under a cream veil, rather than
   being wiped away on the text side. The veil never drops below 0.88 anywhere
   text can reach (it only opens up past 76%, which is clear of the 620px
   column at every width). At 0.88 cream over the darkest pixel in the photo the
   field still lands near L=0.79, which keeps --ink-soft at about 6:1 and the
   indigo headings near 10:1. That floor is what makes the subtle fade safe. */
@media (min-width: 900px) {
  .hero {
    padding-bottom: var(--band);
    background-image:
      var(--grain),
      /* The first three stops are the contrast-critical ones and must not be
         lowered; text reaches 57%. Past that there is no text, so the veil
         opens up considerably to let the photograph read. */
      /* Stops are anchored to --text-edge, not to percentages. The text column
         is a fixed 620px, so its right edge as a PERCENTAGE of the viewport
         grows as the window narrows (54% at 1920px, 69% at 930px) and a
         percentage gradient silently walks off the end of it. Measured in
         absolute terms it tracks exactly, so 0.74 always lands past the last
         character at every width. */
      /* 90deg, NOT 95deg. --text-edge below is a horizontal distance measured
         against a vertical boundary. A tilted gradient shifts each stop
         sideways by tan(angle) x hero height, roughly 50px at 5 degrees over an
         800px hero, which is far more than the slack in --text-edge and would
         drop lower text below the contrast floor. Keep this at 90deg. */
      linear-gradient(
        90deg,
        rgba(247, 243, 233, 0.88) 0,
        rgba(247, 243, 233, 0.74) var(--text-edge),
        rgba(247, 243, 233, 0.4) calc(var(--text-edge) + 190px),
        rgba(247, 243, 233, 0.26) 100%
      ),
      linear-gradient(180deg, rgba(253, 251, 245, 0.9) 0%, rgba(247, 243, 233, 0) 45%),
      image-set(url('img/hero-1600.jpg') 1x, url('img/hero-2048.jpg') 2x);
    background-size: 160px 160px, cover, cover, cover;
    background-position: 0 0, center, center, right center;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  }

  .hero__inner {
    max-width: 620px;
  }

  .hero__split {
    grid-template-columns: 1fr;
    max-width: 620px;
    gap: 28px;
  }

}

/* Phones get the photograph too, as a background behind the whole hero rather
   than a framed block underneath it. The crop is portrait, not the wide frame
   scaled down: a 16:9 image in a tall narrow hero would lose about 60% of its
   width. The veil is uniform here because there is no empty side to reveal;
   text spans the full column, so every part of it must clear contrast. At
   0.82 cream over the darkest pixel the field lands near L=0.74, which is
   lighter than the 0.74-veil desktop floor already measured as passing. */
@media (max-width: 899px) {
  .hero {
    padding-bottom: var(--band);
    background-image:
      var(--grain),
      linear-gradient(
        180deg,
        rgba(247, 243, 233, 0.9) 0%,
        rgba(247, 243, 233, 0.84) 45%,
        rgba(247, 243, 233, 0.82) 100%
      ),
      image-set(url('img/hero-p-780.jpg') 1x, url('img/hero-p-1170.jpg') 2x);
    background-size: 160px 160px, cover, cover;
    background-position: 0 0, center, center top;
    background-repeat: repeat, no-repeat, no-repeat;
  }
}

@media (max-width: 900px) {
  .hero__split {
    grid-template-columns: 1fr;
  }

  .credential {
    max-width: 52ch;
  }

  .profile {
    grid-template-columns: 1fr;
  }

  .profile__plate {
    max-width: 320px;
  }

  .contact {
    grid-template-columns: 1fr;
  }
}

/* Mobile navigation: every label visible, wrapped onto two centred rows.
   No hamburger and no sideways scrolling. Both hide destinations behind an
   interaction the visitor has to discover first, which is a bad trade for an
   audience that skews older. The cost of showing everything is height, and
   that is paid for by dropping the sticky behaviour here: the nav scrolls
   away with the page, and the fixed call bar at the bottom carries the action
   that actually needs to stay reachable. */
/* The five full labels plus the pill need about 990px. Below that the pill
   would wrap onto its own left-aligned row, which looks broken, so it is
   dropped before it can. Nothing is lost: the hero's own "Get in touch" button
   sits directly beneath, and on phones the fixed call bar covers it. */
@media (max-width: 1040px) {
  .mainnav__cta {
    display: none;
  }

  .mainnav__inner {
    justify-content: center;
  }
}

@media (max-width: 820px) {
  .mainnav {
    position: static;
  }

  .mainnav__inner,
  .mainnav ul {
    justify-content: center;
  }

  .mainnav ul {
    flex-wrap: wrap;
  }

  /* Swap to the short labels. */
  .lbl-lg {
    display: none;
  }

  .lbl-sm {
    display: inline;
  }

  /* Tuned so all five fit one row down to a 360px phone with slack to spare.
     Narrower than that it wraps to two centred rows, which is a fine fallback. */
  .mainnav ul a,
  .mainnav ul li:first-child a {
    font-size: 11px;
    letter-spacing: 0.06em;
    padding: 10px 7px;
  }

  .mainnav ul a::after,
  .mainnav ul li:first-child a::after {
    left: 7px;
    right: 7px;
    bottom: 5px;
  }
}

@media (max-width: 640px) {
  .masthead__bar {
    justify-content: center;
    padding-block: 18px;
  }

  .masthead__contact {
    align-items: center;
    text-align: center;
  }

  .journey {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .counties > div {
    padding-right: 0;
  }

  /* This business converts on the phone. */
  .callbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    background: var(--indigo);
    border-top: 1px solid var(--indigo-deep);
  }

  .callbar a {
    flex: 1;
    text-align: center;
    padding: 15px 8px;
    font-family: var(--body);
    font-size: 16px;
    color: #fff;
    text-decoration: none;
  }

  .callbar a + a {
    border-left: 1px solid rgba(255, 255, 255, 0.28);
  }

  body {
    padding-bottom: 54px;
  }
}

/* --------------------------------------------------------------------------
   17. Motion and print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .mainnav,
  .callbar,
  .form,
  .plates {
    display: none;
  }

  body {
    background: #fff;
    padding-bottom: 0;
  }
}