/*
 * Short Term Capital — TB-1149.
 *
 * The palette, type scale and section rhythm are transcribed from the legacy
 * Divi child theme (wp-content/themes/shorttermcapital/style.css) so the static
 * rebuild reads as the same site. Layout is rebuilt with grid/flex instead of
 * fixed-pixel floats, which is the part the ticket allows to improve.
 *
 * Raleway is self-hosted (the platform CSP forbids third-party font hosts).
 * The live site links Google Fonts, and Google no longer ships static Raleway
 * instances: both the v1 and the css2 endpoints answer every requested weight
 * with the SAME variable woff2 per unicode-range. Those two subsets are
 * self-hosted here, so the 200/300/400/500/600 weights this stylesheet uses
 * each render at their real weight rather than snapping to Regular.
 * See public/assets/fonts/README.txt.
 */

@font-face {
  font-family: 'Raleway';
  src: url('/assets/fonts/raleway-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Raleway';
  src: url('/assets/fonts/raleway-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --navy: #012754;
  --navy-deep: #0d2541;
  --navy-darkest: #031020;
  --navy-black: #01060d;
  --grey: #7f7f7f;
  --grey-light: #aaaaa9;
  --grey-footer: #bfc3c7;
  --pale: #f7f9fc;
  --pale-alt: #f3f6f9;
  --rule: #698fbb;
  --link-hover: #004d7f;
  --accent: #2c3a91;
  --white: #ffffff;
  --shell: 1180px;
  --font: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--grey);
  font-family: var(--font);
  font-size: 15px;
  line-height: 26px;
  font-weight: 300;
}

img { max-width: 100%; height: auto; display: block; }
iframe { max-width: 100%; border: 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font);
  font-weight: 300;
  color: var(--navy-deep);
}

p { margin: 0 0 25px; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--link-hover); }

ul { margin: 0; padding: 0; list-style: none; }

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--navy);
  color: var(--white);
  padding: 12px 20px;
}
.skip-link:focus { left: 0; color: var(--white); }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
}

/* ------------------------------------------------------------- header ---- */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--white);
  padding: 30px 0 10px;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand img { width: min(388px, 60vw); height: auto; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 50px;
}

.site-nav a {
  display: block;
  padding: 14px 0 3px;
  color: var(--navy);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover,
.site-nav a[aria-current='page'] {
  color: var(--link-hover);
  border-bottom-color: var(--navy);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background: var(--navy);
  content: '';
}
.nav-toggle span { top: 21px; }
.nav-toggle span::before { top: -8px; left: 0; }
.nav-toggle span::after { top: 8px; left: 0; }

/* --------------------------------------------------------------- hero ---- */

.home-slider,
.page-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.home-slider__image,
.page-banner__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.home-slider > .shell,
.page-banner__title { position: relative; z-index: 2; }

.home-slider { padding: 235px 0; background: var(--pale); }
.home-slider__text { max-width: 626px; }

.home-slider h1 {
  color: var(--navy);
  font-size: clamp(2.25rem, 5vw, 62px);
  line-height: 1.02;
  font-weight: 200;
  letter-spacing: 1px;
  padding-bottom: 20px;
}

.home-slider p {
  color: var(--navy);
  font-size: 16px;
  line-height: 25px;
  font-weight: 200;
  margin: 0;
}

.home-slider__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 20px;
}

.home-slider__actions a,
.arrow-link {
  display: inline-block;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--navy);
  border-bottom: 1px solid var(--navy);
  padding: 2px 22px 2px 0;
  position: relative;
}

.home-slider__actions a::after,
.arrow-link::after {
  content: '›';
  position: absolute;
  right: 4px;
  top: 0;
  font-size: 18px;
  line-height: 20px;
}

.arrow-link--light {
  color: var(--white);
  border-bottom-color: var(--white);
}
.arrow-link--light:hover { color: var(--white); }

/*
 * The legacy banner sets the photo as a cover background and prints the client's
 * heading in white on top of it. Several of those photos are bright, so a scrim
 * carries the same look at a contrast ratio that actually passes — the kind of
 * UX fix TB-1149 allows on top of the 1:1 content.
 */
.page-banner { background: var(--navy-deep); }
.page-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(4, 26, 50, .62) 0%, rgba(4, 26, 50, .4) 45%, rgba(4, 26, 50, .16) 100%);
}
.page-banner__title { padding: 235px 24px 170px; }
.page-banner h1 {
  color: var(--white);
  font-size: clamp(2.5rem, 6vw, 75px);
  line-height: 1;
  font-weight: 200;
  max-width: 620px;
}
.page-banner h1 span { display: inline; }

/* ------------------------------------------------------------ sections --- */

.home-superior,
.about-top { background: var(--pale); padding: 90px 0; }
.home-approach { padding: 115px 0; background: var(--navy-deep) url('/assets/section-approach.webp') center/cover no-repeat; }
.home-portfolio { background: var(--navy); padding: 90px 0; }
.home-news { padding: 90px 0 60px; }
.about-team { background: var(--navy); padding: 90px 0; }
.about-loan { padding: 90px 0; }
.transactions-page,
.news-page,
.single-transaction { background: var(--pale); padding: 90px 0; }
.single-post { padding: 100px 0 116px; }
.related-section { background: var(--pale); padding: 70px 0; }
.contact-top { padding: 90px 0 45px; }
.contact-map { padding: 0 0 0; }
.contact-newsletter { padding: 95px 0; background: var(--navy-deep) url('/assets/section-newsletter.webp') center/cover no-repeat; }
.sidebar-page { padding: 190px 0 90px; background: var(--pale); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 480fr) minmax(0, 620fr);
  gap: 40px 80px;
  align-items: start;
}

.split__left h3,
.split__left h4 { margin: 0; }

/* Two-tone headings: `lead` grey, `<span>` navy. */
.home-superior h3,
.about-top h3,
.home-approach h3,
.home-news h3,
.transactions-page h3,
.about-loan h3,
.contact-top h3,
.related-section h4 {
  color: var(--grey);
  font-size: clamp(1.75rem, 3.6vw, 40px);
  line-height: 1.25;
  font-weight: 300;
}

.home-superior h3 span,
.about-top h3 span,
.home-approach h3 span,
.home-news h3 span,
.transactions-page h3 span,
.about-loan h3 span,
.contact-top h3 span,
.related-section h4 span { color: var(--navy-deep); }

.home-superior p,
.home-superior li,
.about-top p,
.home-approach p {
  font-size: 16px;
  line-height: 26px;
  font-weight: 300;
  color: var(--grey);
}

.home-superior ul { margin: 0 0 25px; }
.home-superior li { padding-bottom: 6px; }

.home-approach__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 630px);
  gap: 30px 60px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 40px;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 35px;
}

.home-portfolio h5 {
  color: var(--white);
  font-size: clamp(1.75rem, 3.6vw, 40px);
  line-height: 1.05;
  font-weight: 300;
}

.transactions-page h3 { padding-bottom: 55px; }

/* ----------------------------------------------------- portfolio cards --- */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 40px 30px;
}

.portfolio-card__media { display: block; margin-bottom: 25px; }
.portfolio-card__image { width: 100%; aspect-ratio: 370 / 330; object-fit: cover; }

.portfolio-card h2 {
  font-size: 25px;
  line-height: 32px;
  font-weight: 300;
  padding-bottom: 12px;
}
.portfolio-card h2 a::after { content: ' ›'; }
.portfolio-card h6 { font-size: 16px; line-height: 20px; font-weight: 300; }

.home-portfolio .portfolio-card h2 a,
.home-portfolio .portfolio-card h6 { color: var(--white); }

.transactions-page .portfolio-card h2 a { color: var(--navy); }
.transactions-page .portfolio-card h6 { color: var(--grey); }

/* ---------------------------------------------------------- post cards --- */

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 40px 30px;
}

.post-card__media { display: block; margin-bottom: 18px; background: var(--white); }
.post-card__image { width: 100%; aspect-ratio: 1024 / 325; object-fit: contain; }

.post-card__category a,
.news-item__meta a {
  font-size: 14px;
  line-height: 20px;
  font-weight: 300;
  color: var(--grey);
}
.post-card__category { margin: 0 0 5px; }

.post-card h2 {
  font-size: 26px;
  line-height: 31px;
  font-weight: 300;
  margin-bottom: 10px;
}
.post-card h2 a { color: var(--navy); }

.post-card__date,
.news-item__meta .post-date {
  color: var(--grey);
  font-size: 14px;
  line-height: 20px;
  margin: 0;
}

/* ---------------------------------------------------------- news list --- */

.news-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 40px 38px;
}

.news-item__media { display: block; margin-bottom: 30px; background: var(--white); }
.news-item__image { width: 100%; aspect-ratio: 1024 / 325; object-fit: contain; }

.news-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 17px;
  margin-bottom: 6px;
  color: var(--grey-light);
  font-size: 15px;
  line-height: 20px;
}
.news-item__meta .post-category a { color: var(--grey-light); }
.news-item__meta .post-date { color: var(--grey-light); position: relative; padding-left: 20px; }
.news-item__meta .post-date::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 1px;
  background: var(--grey-light);
}

.news-item__details h4 {
  color: var(--navy);
  font-size: 21px;
  line-height: 29px;
  font-weight: 300;
  padding-bottom: 15px;
}
.news-item__details h4 a { color: var(--navy); }

.news-item__excerpt {
  color: var(--grey);
  font-size: 16px;
  line-height: 26px;
  padding-bottom: 25px;
}

.news-item__more a {
  color: var(--navy);
  font-size: 16px;
  line-height: 26px;
  font-weight: 600;
  border-bottom: 2px solid var(--navy);
  padding: 0 22px 5px 0;
  position: relative;
}
.news-item__more a::after { content: '›'; position: absolute; right: 4px; top: 0; }

.empty-state { color: var(--grey); }

/*
 * Divi's archive pagination bar: "« Older Entries" floats left, "Next
 * Entries »" floats right, links in the theme's default #2ea3f2 at body size.
 */
.pagination {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 40px;
  font-size: 15px;
  line-height: 26px;
}
.pagination__newer { margin-left: auto; }
.pagination a { color: #2ea3f2; }
.pagination a:hover { color: var(--link-hover); }

/* --------------------------------------------------------- single post --- */

.single-post__grid {
  display: grid;
  grid-template-columns: minmax(0, 835fr) minmax(0, 265fr);
  gap: 40px 80px;
  align-items: start;
}

.single-post__main h2 {
  color: var(--navy);
  font-size: 28px;
  line-height: 34px;
  font-weight: 300;
  padding-bottom: 45px;
}

.single-post__img { margin-bottom: 30px; }
.single-post__image { max-width: 800px; }

.single-post__content p,
.single-post__content li {
  color: var(--grey);
  font-size: 16px;
  line-height: 27px;
  font-weight: 300;
}

.single-post__share h5 {
  color: var(--navy);
  font-size: 22px;
  line-height: 35px;
  font-weight: 300;
  padding-bottom: 20px;
}
.single-post__share ul { display: flex; gap: 25px; }
.single-post__share img { width: auto; height: 20px; }

/* --------------------------------------------------- single transaction -- */

.single-transaction h5 {
  color: var(--grey);
  font-size: clamp(1.6rem, 3.2vw, 36px);
  line-height: 1.15;
  font-weight: 300;
  padding-bottom: 35px;
}

.transaction-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0 60px;
}

.transaction-body p {
  color: var(--grey);
  font-size: 16px;
  line-height: 27px;
  font-weight: 300;
  margin-bottom: 25px;
}

.transaction-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 90px;
  border-top: 1px solid var(--rule);
  padding-top: 35px;
  margin-top: 40px;
}

.transaction-facts li {
  color: var(--navy);
  font-size: 22px;
  line-height: 22px;
  font-weight: 300;
}

.transaction-facts span {
  display: block;
  color: var(--grey);
  font-size: 16px;
  line-height: 20px;
  padding-top: 9px;
}

/* ----------------------------------------------------------- carousel ---- */

.related-section h4 { text-align: center; padding-bottom: 30px; }

.carousel { position: relative; }

.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, calc((100% - 60px) / 3));
  gap: 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 12px;
}

.carousel__track > * { scroll-snap-align: start; }

.carousel__nav {
  position: absolute;
  top: -56px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--navy);
  cursor: pointer;
}
.carousel__nav::before { font-size: 18px; line-height: 1; }
.carousel__nav--prev { right: 44px; }
.carousel__nav--prev::before { content: '‹'; }
.carousel__nav--next { right: 0; }
.carousel__nav--next::before { content: '›'; }

.slide__media { display: block; margin-bottom: 20px; background: var(--white); }
.slide__image { width: 100%; aspect-ratio: 370 / 300; object-fit: cover; }
.slide--post .slide__image { object-fit: contain; }

.slide h3 { font-size: 24px; line-height: 30px; font-weight: 300; }
.slide h3 a { color: var(--navy); }
.slide--post h2 { font-size: 20px; line-height: 24px; font-weight: 300; margin-bottom: 8px; }
.slide--post h2 a { color: var(--navy); }
.slide__excerpt { color: var(--grey); font-size: 14px; line-height: 20px; margin: 10px 0; }
.slide__more a {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--navy);
  border-bottom: 1px solid var(--navy);
  padding: 2px 18px 2px 0;
  position: relative;
}
.slide__more a::after { content: '›'; position: absolute; right: 2px; top: 0; }

/* -------------------------------------------------------------- about ---- */

.about-team h4 {
  color: var(--white);
  font-size: clamp(1.75rem, 3.6vw, 40px);
  line-height: 1.25;
  font-weight: 300;
}
.about-team p { color: var(--white); font-size: 16px; line-height: 26px; }

.about-loan h3 { text-align: center; }
.about-loan h6 {
  color: var(--grey);
  font-size: 16px;
  line-height: 26px;
  font-weight: 300;
  text-align: center;
  max-width: 920px;
  margin: 0 auto;
  padding: 20px 0 65px;
}
.about-loan p { color: var(--grey); font-size: 16px; line-height: 28px; }

.split--blurb { grid-template-columns: minmax(0, 450fr) minmax(0, 620fr); gap: 40px 70px; }
.blurb__icon { width: 57px; height: 60px; margin-bottom: 9px; }
.blurb h4 { color: var(--navy); font-size: 26px; line-height: 28px; font-weight: 300; }
.blurb h5 { color: var(--grey); font-size: 20px; line-height: 24px; font-weight: 300; padding-top: 6px; }

/* ------------------------------------------------------------ contact ---- */

.contact-top h3 { padding-bottom: 50px; }

.contact-info h4 {
  color: var(--grey);
  font-size: 22px;
  line-height: 25px;
  font-weight: 300;
  margin-bottom: 24px;
}

.contact-info li {
  font-size: 16px;
  line-height: 30px;
  color: var(--grey);
  margin-bottom: 24px;
}

/*
 * The three /contact/ list markers are the child theme's own icons, imported
 * from wp-content/themes/shorttermcapital/images/ at their native size.
 * Offsets and the 30px indent come from that stylesheet (contac-phone.png is
 * the client's spelling).
 */
.contact-info li.contact-phone,
.contact-info li.contact-email,
.contact-info li.contact-address {
  padding-left: 30px;
  background-repeat: no-repeat;
}

.contact-info li.contact-phone {
  background-image: url('/assets/contact-phone.png');
  background-position: left 2px;
  background-size: 17px 17px;
}

.contact-info li.contact-email {
  background-image: url('/assets/contact-mail.png');
  background-position: left 6px;
  background-size: 19px 16px;
}

.contact-info li.contact-address {
  background-image: url('/assets/contact-address.png');
  background-position: left 4px;
  background-size: 18px 18px;
}

.contact-info li a,
.contact-info li span {
  display: block;
  color: var(--navy);
  font-size: 22px;
  line-height: 26px;
  font-weight: 300;
}

.contact-form .field { margin: 0 0 14px; }
.contact-form label,
.newsletter-form label {
  display: block;
  color: var(--grey);
  font-size: 15px;
  line-height: 20px;
  padding-bottom: 4px;
}
.contact-form abbr,
.newsletter-form abbr { text-decoration: none; }

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: none;
  border-radius: 0;
  background: var(--pale);
  color: var(--grey);
  font-family: var(--font);
  font-size: 16px;
  line-height: 22px;
  padding: 13px 15px;
}
.contact-top .contact-form input,
.contact-top .contact-form textarea { background: var(--white); border: 1px solid var(--pale-alt); }
.contact-form textarea { min-height: 150px; }

.newsletter-form input {
  width: min(100%, 420px);
  border: 1px solid var(--grey);
  border-radius: 0;
  background: var(--white);
  color: var(--grey);
  font-family: var(--font);
  font-size: 16px;
  line-height: 22px;
  padding: 10px 16px;
}
.newsletter-form .field { margin: 0 0 14px; }

.submit-button {
  min-width: 170px;
  padding: 16px 24px;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 20px;
  cursor: pointer;
}
.submit-button[disabled] { opacity: .6; cursor: progress; }

.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px;
}

.form-status { margin: 12px 0 0; font-size: 15px; min-height: 1.2em; }
.form-status[data-state='error'] { color: #b3261e; }
.form-status[data-state='success'] { color: #1b5e20; }

.contact-map .shell { padding: 0; max-width: none; }
.contact-map iframe { width: 100%; height: 450px; display: block; }

.contact-newsletter h4 {
  color: var(--grey);
  font-size: clamp(1.75rem, 3.6vw, 40px);
  line-height: 1.25;
  font-weight: 300;
}
.contact-newsletter h6 {
  color: var(--grey);
  font-size: 16px;
  line-height: 30px;
  font-weight: 300;
  padding-top: 8px;
}

.sign-up {
  display: inline-block;
  width: 200px;
  text-align: center;
  padding: 17px 0;
  background: var(--accent);
  color: var(--white);
  font-size: 18px;
  line-height: 22px;
}
.sign-up:hover { color: var(--white); }

/* --------------------------------------------------------- sidebar page -- */

.sidebar-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 40px 60px;
  align-items: start;
}

.newsletter-intro { color: #000; font-size: 22px; line-height: 28px; padding-bottom: 14px; }

.newsletter-disclosure { margin-top: 24px; color: var(--grey); }
.newsletter-disclosure hr { border: 0; border-top: 1px solid var(--pale-alt); margin: 0 0 12px; }
.newsletter-disclosure small { font-size: 13px; line-height: 20px; display: block; }

/*
 * The live sidebar is Divi's default widget treatment: 30px between widgets,
 * headings at 26px/#333/500, links and body text in the page grey. The
 * wp-block-search "Search" label is display:none on the live page (Divi hides
 * it), the input is a 40px rounded field, and the button sits flush right on
 * top of it with a #ddd background. The form itself is deliberately inert -
 * see sidebar() in src/build.mjs.
 */
.sidebar-widget { margin-bottom: 30px; }
.sidebar-widget:last-child { margin-bottom: 0; }

.page-sidebar h2 {
  color: #333333;
  font-size: 26px;
  line-height: 1em;
  font-weight: 500;
  padding-bottom: 10px;
}
.page-sidebar li { margin-bottom: .5em; line-height: 26px; }
.page-sidebar li a { color: #666666; font-size: 15px; }
.page-sidebar li a:hover { color: #82c0c7; }

.sidebar-search__label { display: none; }
.sidebar-search__wrap { position: relative; }
.sidebar-search__input,
.sidebar-search__button {
  height: 40px;
  padding: .7em;
  margin: 0;
  border: 1px solid #dddddd;
  color: #666666;
  font-family: var(--font);
  font-size: 14px;
  line-height: normal;
  opacity: 1; /* keep the live look on the disabled (inert) controls */
}
.sidebar-search__input {
  width: 100%;
  border-radius: 3px;
  background: var(--white);
}
.sidebar-search__button {
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 0 3px 3px 0;
  background: #dddddd;
}

.sidebar-no-comments { color: #666666; font-size: 15px; line-height: 26px; }

/* ------------------------------------------------------------- footer ---- */

.site-footer { background: var(--navy-darkest); color: var(--white); }

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 320fr) minmax(0, 235fr) minmax(0, 250fr);
  gap: 40px 60px;
  padding-top: 90px;
  padding-bottom: 90px;
}

.footer-logo { width: 235px; height: auto; margin-bottom: 24px; }
.footer-grid p { color: var(--white); font-size: 14px; line-height: 25px; font-weight: 300; }

.footer-grid h3 {
  color: var(--grey-footer);
  font-size: 16px;
  line-height: 23px;
  font-weight: 400;
  padding: 0 0 17px;
}

.footer-grid li { color: var(--white); font-size: 14px; line-height: 25px; font-weight: 300; }

/*
 * The footer contact column carries the second half of the child theme's icon
 * set. These three render on all 27 pages; the contact-page trio only on
 * /contact/.
 */
.footer-contact li {
  background-repeat: no-repeat;
  padding-left: 28px;
}

.footer-contact li.footer-phone {
  background-image: url('/assets/footer-phone.png');
  background-position: left center;
  background-size: 13px 13px;
  padding-left: 26px;
}

.footer-contact li.footer-mail {
  background-image: url('/assets/footer-mail.png');
  background-position: left center;
  background-size: 14px 12px;
}

.footer-contact li.footer-address {
  background-image: url('/assets/footer-address.png');
  background-position: left 8px;
  background-size: 16px 16px;
}
.footer-grid a { color: var(--white); }
.footer-grid a:hover { color: var(--grey-footer); }

.footer-bottom {
  display: grid;
  grid-template-columns: minmax(0, 675fr) minmax(0, 265fr) auto;
  gap: 12px 30px;
  align-items: center;
  padding-top: 30px;
  padding-bottom: 30px;
  background: var(--navy-black);
  max-width: none;
}

.footer-bottom > * {
  margin: 0;
  color: var(--white);
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
}
.footer-bottom a { color: var(--white); }
.footer-legal { display: flex; gap: 40px; }
.footer-powered img { display: inline-block; vertical-align: -7px; margin-left: 12px; }

/* --------------------------------------------------------- breakpoints --- */

@media (max-width: 1240px) {
  .footer-bottom { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 960px) {
  .site-header { padding: 16px 0; }
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    padding: 8px 24px 20px;
    box-shadow: 0 12px 24px rgba(1, 39, 84, .12);
  }
  .site-nav[data-open='true'] { display: flex; }
  .site-nav a { padding: 12px 0; border-bottom: 1px solid var(--pale-alt); }
  .site-nav a:hover,
  .site-nav a[aria-current='page'] { border-bottom-color: var(--navy); }

  .home-slider { padding: 150px 0 90px; }
  /* Narrow viewports crop the hero photo behind the client's navy headline;
     a light scrim keeps the copy legible without changing the words. */
  .home-slider::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(100deg, rgba(247, 249, 252, .92) 0%, rgba(247, 249, 252, .68) 60%, rgba(247, 249, 252, .4) 100%);
  }
  .page-banner__title { padding: 150px 24px 90px; }
  .sidebar-page { padding: 130px 0 70px; }

  .split,
  .split--blurb,
  .home-approach__row,
  .single-post__grid,
  .sidebar-page__grid,
  .footer-grid { grid-template-columns: minmax(0, 1fr); }

  .footer-bottom { grid-template-columns: minmax(0, 1fr); }
  .carousel__nav { position: static; display: inline-block; margin: 0 8px 16px 0; }
  .carousel { display: flex; flex-direction: column; }
  .carousel__track { order: -1; margin-bottom: 16px; }
}

@media (max-width: 640px) {
  .home-superior,
  .about-top,
  .home-portfolio,
  .about-team,
  .about-loan,
  .transactions-page,
  .news-page,
  .single-transaction,
  .related-section,
  .home-news,
  .contact-top,
  .contact-newsletter { padding: 56px 0; }
  .home-approach { padding: 64px 0; }
  .single-post { padding: 56px 0; }
  .transaction-facts { gap: 24px 40px; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .carousel__track { scroll-behavior: auto; }
}