/* === Global Typography (D10, mobile-first, clamp scale) ===
 *
 * Font-size / font-weight / button / --color-primary / --color-text-muted
 * variables come from corporateplus-design-system.css, which loads BEFORE this
 * file. Only project-specific tokens are defined here.
 */

:root {
  /* Font stacks */
  --font-sans: "Cabin", Helvetica, Arial, sans-serif;
  --font-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;

  /* Brand colors */
  --color-text: #555;
  --color-heading: #555;
  --color-theme-blue: #25436b; /* h3 blue / primary brand blue */
  --color-white: #fff;
  --color-navy: #14253b; /* LTD navy */
  --accent-yellow: #f2c20a; /* LTD gold — hover/active highlight */
  --color-accent-dark: #d9ae00; /* gold hover */
  --color-gold-border: #ffd430; /* banner / footer accent border */

  /* Card system */
  --ltd-muted: #5d6470; /* card body text */
  --ltd-panel: #f5f6f7; /* card / band panel */
  --ltd-line: #e4e7eb; /* card border */

  /* Shared geometry */
  --radius-card: 12px; /* hero image, pillar & summary cards */
  --section-pad-y: 2.75rem; /* vertical rhythm for the LTD card sections */
}

/* Base text */
html {
  font-size: 20px;
} /* anchor size for clamp scale */

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: anywhere;
}

p {
  margin: 0 0 1rem;
  color: var(--color-text);
}

/* Headings
   - h1,h2,h6 = Libre Baskerville, bold, #555 (as in D7)
   - h3,h4,h5 = Cabin, bold, letter-spacing:0
   - sizes chosen to feel like D7 but scale smoothly on wide screens
*/
h1,
h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.2;
  margin: 0 0 0.5rem;
}

h3,
h4,
h5 {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}

/* Heading Sizes - Using design system scale for consistency
 * h1: 32-44px (--font-size-5xl)
 * h2: 28-38px (--font-size-4xl)
 * h3: 24-30px (--font-size-3xl)
 * h4: 20-24px (--font-size-xl)
 * h5: 18-21px (--font-size-lg)
 */
h1 {
  font-size: var(--font-size-5xl);
}
h2 {
  font-size: var(--font-size-4xl);
}
h3 {
  font-size: var(--font-size-3xl);
  color: var(--color-theme-blue);
  margin-bottom: 2px;
}
h4 {
  font-size: var(--font-size-xl);
  color: var(--color-heading);
}
h5 {
  font-size: var(--font-size-lg);
}

/* Bold text. The body font-weight resolves the browser default
   "strong { bolder }" too light, so set an explicit bold weight. */
b,
strong {
  font-weight: 700;
}

/* Respect reduced motion users */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

.footer h2,
.footer h3,
.footer h4,
.footer p {
  color: var(--color-white);
}

/* Links */
a:link,
a:visited {
  color: var(--color-theme-blue);
  text-decoration: underline;
}

a:hover {
  color: var(--color-text);
  text-decoration: underline;
}

/* --- Lists --- */
ul {
  list-style: disc outside;
  margin: 0 0 1rem 1.25rem;
  padding: 0;
}

/* Improve vertical rhythm for readability */
li {
  margin-bottom: 0.3rem;
  line-height: 1.5;
}

/* ====== Superfish (D10) → mimic old D7 look (right-aligned) ====== */

/* --- Menu layout --- */
#superfish-main.sf-menu.sf-horizontal {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end; /* right-align menu items */
}

/* --- Top-level link style --- */
#superfish-main a,
#superfish-main .nolink,
#superfish-main span.nolink {
  font-family: "Cabin", helvetica, sans-serif;
  font-size: 1.15em;
  letter-spacing: 0.05em;
  color: var(--color-white);
  text-decoration: none;
  padding: 0.5em 1em;
  border: 0;
  line-height: 1.4;
}

/* --- Hover and active colors --- */
#superfish-main a:hover,
#superfish-main a:focus,
#superfish-main a:active,
#superfish-main li:hover > a,
#superfish-main li.sfHover > a {
  color: var(--accent-yellow);
  background: none;
  background-color: transparent;
  outline: 0;
}

/* 1. Raise the whole Superfish block above the hero */
#superfish-main {
  position: relative; /* create stacking context */
  z-index: 999; /* higher than .hero-top__container (1) */
}

/* Remove Font Awesome "before" arrows from all menu items at any depth */
#superfish-main a::before {
  content: none !important;
  display: none !important;
}

/* === Custom Tweaks === */

.header-container {
  border-top: 40px solid var(--color-theme-blue);
}

.footer {
  background-color: var(--color-theme-blue);
  border-bottom: 4px solid var(--color-gold-border);
}

.header-container .paragraph > .paragraph__column {
  padding-bottom: 0px;
}

.banner {
  margin: 0;
  padding: 1em 0;
  border-bottom: 4px solid var(--color-gold-border);
  background-color: var(--color-theme-blue);
}

/* Avoid horizontal scroll bars from tiny rounding diffs */
html,
body {
  overflow-x: hidden;
}

/* Full-bleed background band for colored paragraphs that sit inside the
   constrained content region. Keeps the paragraph (and its content) aligned
   with the rest of the page, while the background color stretches edge-to-edge.
   box-shadow paints the same color sideways; clip-path inset(0 -100vw) clips it
   vertically to the paragraph height but lets it extend horizontally. */
.main-content .paragraph--color--rgba-grey-slight {
  box-shadow: 0 0 0 100vw rgba(158, 158, 158, 0.1);
  clip-path: inset(0 -100vw);
}

/* ====== Team Grid (Partners) — card layout ==================================
   View: team_grid (block_1), CSS class "team-grid" (the wrapper also carries
   "view", so .view.team-grid matches). Card template:
   templates/ds-1col--node-team-member-teaser.html.twig
   ========================================================================== */

/* Outer wrapper — responsive auto-fit grid. */
.view.team-grid .view-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 40px);
}

@media (min-width: 992px) {
  .view.team-grid .view-content {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Each views row is a pass-through wrapper around the card. */
.view.team-grid .team-item,
.team-grid .team-item,
.team-grid .views-row {
  display: flex;
}

/* Name heading (sizing/margins; color comes from .team-card h3 below). */
.view.team-grid .team-item h3 {
  font-size: clamp(1.1rem, 1.3vw + 0.8rem, 1.4rem);
  margin: 0 0 0.25rem 0;
}
.view.team-grid .team-item .field--name-body {
  color: #333;
}

/* The card itself (the DS layout element). */
.team-grid .team-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 24px;
  background: var(--color-white);
  border: 1px solid #e6e9ee;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(16, 34, 64, 0.08);
}

/* Initials avatar. */
.team-grid .team-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: #0d2240;
  color: var(--color-white);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Content region — grows to fill so the email can anchor to the bottom. */
.team-grid .team-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* Name + qualifications. */
.team-grid .team-card h3 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: #1a5cad;
}

/* Job title. */
.team-grid .team-card h5 {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #555f6e;
  text-transform: none;
}

/* Bio. */
.team-grid .team-card .field--name-body {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.6;
  color: #555f6e;
}

/* Email link. */
.team-grid .team-card .field--name-field-email-address a {
  font-size: 15px;
  color: #1a5cad;
  word-break: break-word;
}

/* Push the email to the bottom so cards of unequal text line up. */
.team-grid .team-card .field--name-field-email-address {
  margin-top: auto;
}

/* ==========================================================================
   HEADER INFO BAR
   Three-column contact/info strip for header area
   ========================================================================== */

.header-info-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 1rem;
  padding: 0.75rem 0;
  max-width: 100%;
}

.header-info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex: 1 1 auto;
  /* No 200px floor: on narrow tablet headers (e.g. iPad Pro, where this column
     is only ~616px) a floor of 200px × 3 + gaps exceeds the width and forces the
     third item to wrap. 0 lets the items shrink to share the row. The mobile
     breakpoint (max-width:767px) still stacks them vertically. */
  min-width: 0;
}

/* Center item on larger screens */
@media (min-width: 768px) {
  .header-info-item:nth-child(2) {
    justify-content: center;
    text-align: center;
  }

  .header-info-item:last-child {
    justify-content: flex-end;
    text-align: right;
  }
}

.header-info-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  object-fit: contain;
}

.header-info-content {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.header-info-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
  line-height: 1.2;
}

.header-info-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

.header-info-links a {
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}

.header-info-links a:hover {
  color: var(--color-text);
  text-decoration: underline;
}

/* Stack on mobile */
@media (max-width: 767px) {
  .header-info-bar {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
  }

  .header-info-item {
    justify-content: center;
    min-width: auto;
  }
}

/* ==========================================================================
   FOOTER BOTTOM REGION OVERRIDE
   ========================================================================== */

.footer-bottom {
  background-color: #666;
}

.footer-bottom__container {
  padding: 1.5em 0;
}

.footer-bottom,
.footer-bottom a {
  color: var(--color-white);
}

.footer-bottom a:hover {
  color: var(--accent-yellow);
}

/* ==========================================================================
   FOOTER DISCLAIMER BLOCK (Nexia style)
   ========================================================================== */

.footer-disclaimer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.5rem 2rem;
  padding: 1.5rem 0;
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.footer-disclaimer__branding {
  flex: 0 0 auto;
  max-width: 160px;
}

.footer-disclaimer__branding img {
  width: 100%;
  height: auto;
}

.footer-disclaimer__text {
  flex: 1 1 400px;
  color: rgba(255, 255, 255, 0.85);
}

.footer-disclaimer__meta {
  flex: 0 0 auto;
  text-align: right;
  color: rgba(255, 255, 255, 0.85);
}

.footer-disclaimer__links {
  margin-bottom: 0.25rem;
}

.footer-disclaimer__links a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
}

.footer-disclaimer__links a:hover {
  color: var(--color-white);
}

.footer-disclaimer__links span {
  margin: 0 0.5rem;
  opacity: 0.5;
}

.footer-disclaimer__copyright {
  margin-bottom: 0.25rem;
}

.footer-disclaimer__credit {
  font-size: var(--font-size-xs);
}

.footer-disclaimer__credit a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
}

.footer-disclaimer__credit a:hover {
  color: var(--color-white);
}

/* Responsive: stack on smaller screens */
@media (max-width: 991px) {
  .footer-disclaimer {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-disclaimer__branding,
  .footer-disclaimer__text,
  .footer-disclaimer__meta {
    flex: 0 0 auto;
    width: 100%;
  }

  .footer-disclaimer__meta {
    text-align: center;
  }
}

.main-content__section {
  padding: 0;
}

/* Single-row columns: header + body share one paragraph, so the heading only
   has its tiny default margin-bottom (2px). Add breathing room between each
   column's blue heading and its body. (JS equalizes header heights; this
   margin sits outside that and applies equally, so bodies still align.) */
.paragraph--type--bp-columns
  .paragraph--type--bp-simple
  > .paragraph__column
  > h4 {
  margin-bottom: 1rem;
}

/* Contact footer divider: top border on mobile, left border on desktop */
.contact-footer-separator {
  /* mobile-first: inset horizontal rule above (pseudo avoids col-12 overflow) */
  position: relative;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}

.contact-footer-separator::before {
  content: "";
  position: absolute;
  top: 0;
  left: 3rem;
  right: 3rem;
  border-top: 1px solid lightgrey;
}

@media (min-width: 768px) {
  .contact-footer-separator {
    border-left: 1px solid lightgrey;
    margin-top: 0;
    padding-top: 0;
    padding-left: 3rem;
  }
  .contact-footer-separator::before {
    content: none;
  }
}

/* General paragraph column reset */
.paragraph > .paragraph__column {
  padding-bottom: 0;
}

/* Force the header above the hero / content */
.header-container .header {
  position: relative;
  z-index: 9999 !important;
}

/* ==========================================================================
   MOBILE NAV — inline links, centered
   Superfish "Small screen" is set to Inactive, so the menu stays horizontal at
   every width. Just center it and let the links wrap on narrow screens.
   ========================================================================== */
@media (max-width: 767px) {
  #superfish-main.sf-menu.sf-horizontal {
    flex-wrap: wrap;
    justify-content: center;
  }
  #superfish-main.sf-menu.sf-horizontal > li {
    float: none;
  }
}

/* ==========================================================================
   MOBILE — center the top header (branding + contact bar)
   ========================================================================== */
@media (max-width: 767px) {
  .region-header-first,
  .region-header-second {
    text-align: center;
  }
  /* layout.css reserves 50px on the right for the theme's mobile hamburger
     (unused here) — drop it so the branding box isn't shifted left */
  .header-first {
    margin-right: 0;
  }
  /* Site branding: the wrapper is display:flex (site-branding.css), so center
     via justify-content, not text-align */
  .region-header-first .logo-and-site-name-wrapper {
    justify-content: center;
  }
  .region-header-first .logo {
    float: none;
    margin: 0;
  }
  /* Contact items: center icon + text as a unit */
  .header-info-item {
    justify-content: center;
  }
  .header-info-content {
    align-items: center;
    text-align: center;
  }
}

/* ==========================================================================
   HERO — add the class `ltd-hero` to the bp_columns "Two Uneven" paragraph.

   Full-bleed navy band with a gold eyebrow, serif headline, muted subhead and
   gold CTA on the left, and an image (or placeholder box) on the right. This
   rule handles the full-width breakout, so set the paragraph Width to
   None/Medium — NOT Full.
   ========================================================================== */
.ltd-hero {
  position: relative;
  display: block; /* override bootstrap_paragraphs `.paragraph { display: table }` */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--color-navy);
  border-bottom: 3px solid var(--accent-yellow);
  color: var(--color-white);
}

/* Constrain the inner content to the site width and keep side gutters.
   bootstrap_paragraphs floats this column (float:left; width:100%) at ≥768px,
   which defeats `margin:auto` centring — so cancel the float and width here. */
.ltd-hero > .paragraph__column {
  float: none;
  width: auto;
  max-width: 65%;
  margin: 0 auto;
  /* Vertical padding matches the other sections; horizontal gutters are
     required because the full-bleed band has no container gutters. */
  padding: 0.75rem clamp(1.35rem, 5vw, 4rem) !important;
}

@media (max-width: 1024px) {
  .ltd-hero > .paragraph__column {
    max-width: 100%;
  }
}

@media (min-width: 1366px) {
  .ltd-hero > .paragraph__column {
    padding-inline: 0 !important;
  }
}

/* Columns side by side: text left, image pushed right (module floats otherwise). */
@media (min-width: 768px) {
  .ltd-hero > .paragraph__column {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(2rem, 5vw, 4rem);
  }

  .ltd-hero > .paragraph__column > [class*="__2col-column"] {
    float: none;
    width: auto;
  }

  /* Text column takes the remaining space and stays left-aligned. */
  .ltd-hero .paragraph--type--bp-columns-two-uneven__2col-column1 {
    flex: 1 1 auto;
    text-align: left;
  }

  /* Image column hugs the right edge and never stretches too wide. */
  .ltd-hero .paragraph--type--bp-columns-two-uneven__2col-column2 {
    flex: 0 0 auto;
    max-width: 40%;
    margin-left: auto;
  }
}

/* Eyebrow. */
.ltd-hero .ltd-eyebrow {
  display: block;
  margin-bottom: 1rem;
  color: var(--accent-yellow); /* gold */
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* The eyebrow sits inside its own <p>; strip that wrapper's spacing. */
.ltd-hero .field--name-bp-text > p:first-child {
  margin: 0;
}

/* Headline. */
.ltd-hero h1 {
  margin: 0 0 1.25rem;
  color: var(--color-white);
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(1.8rem, 3.5vw, 2.75rem);
  line-height: 1.15;
}

/* Subhead. */
.ltd-hero .field--name-bp-text p {
  margin: 0 0 1.75rem;
  max-width: 32rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1rem;
  line-height: 1.6;
}

/* CTA button (a.btn.ltd-cta inside the text field). */
.ltd-hero .ltd-cta {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border: 0;
  border-radius: 6px;
  background: var(--accent-yellow);
  color: var(--color-navy);
  font-weight: 700;
  text-decoration: none;
}

.ltd-hero .ltd-cta:hover,
.ltd-hero .ltd-cta:focus {
  background: var(--color-accent-dark);
  color: var(--color-navy);
}

/* The CTA's wrapping <p> shouldn't add the subhead's bottom margin. */
.ltd-hero .field--name-bp-text > p:last-child {
  margin-bottom: 0;
}

/* Hero image. */
.ltd-hero img {
  border-radius: var(--radius-card);
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   LTD card sections — Pillars / Summary
   --------------------------------------------------------------------------
   These are bp_columns paragraphs. bootstrap_paragraphs renders the columns as
   floated `.paragraph--type--bp-columns__Ncol` wrappers inside a
   `.paragraph__column`. So we cancel those floats and lay the columns out with
   CSS grid — which also gives equal-height cards for free.

   Add the class to the bp_columns paragraph (Paragraph Classes field):
     ltd-pillars  → "What we do"  (3 equal columns)
     ltd-summary  → Assurance/Tax (2 equal columns)
   Each column holds one bp_simple "card". (Partners is a Views team grid,
   styled in the Team Grid section above.)
   ========================================================================== */

/* --- Section spacing / bands ------------------------------------------------ */
.ltd-pillars {
  display: block;
  padding: var(--section-pad-y) 0;
}

.ltd-summary {
  display: block;
  padding: 0 0 var(--section-pad-y);
}

/* --- Grid layout (≥768px). Below this, columns stack naturally. -----------
   The grid container is the OUTER .paragraph__column that directly holds the
   bp-columns column wrappers (matched with :has()). The grid items are the
   `__Ncol` column wrappers; align-items:stretch makes them equal height. A
   height:100% chain then carries that height down to the bp_simple CARD.

   The card nests differently per section, so the chain must cover both:
     Pillars:  __3col > .bp-simple                      (card direct in column)
     Summary:  __2col > .bp-column-wrapper > .paragraph__column > .bp-simple */
@media (min-width: 768px) {
  .ltd-pillars .paragraph__column:has(> [class*="bp-columns"]),
  .ltd-summary .paragraph__column:has(> [class*="bp-columns"]) {
    float: none;
    width: auto;
    display: grid;
    gap: 1.5rem;
    align-items: stretch;
    padding-bottom: 0;
  }

  .ltd-pillars .paragraph__column:has(> [class*="bp-columns"]) {
    grid-template-columns: repeat(3, 1fr);
  }

  .ltd-summary .paragraph__column:has(> [class*="bp-columns"]) {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Grid items = the __Ncol column wrappers. Cancel the module float/width so
     the grid controls them; align-items:stretch makes them equal height. */
  .ltd-pillars .paragraph__column:has(> [class*="bp-columns"]) > [class*="col"],
  .ltd-summary
    .paragraph__column:has(> [class*="bp-columns"])
    > [class*="col"] {
    float: none;
    width: auto;
    min-height: 0;
    padding: 0;
  }

  /* Collapse EVERY wrapper between the column and the bp-simple card so the card
     becomes the column's effective child — then its height:100% fills the
     stretched grid item. The field templates insert classless <div> wrappers,
     and the summary additionally nests a bp-column-wrapper paragraph + its own
     .paragraph__column, hence the several layers. The card keeps its own box. */
  .ltd-pillars
    .paragraph__column:has(> [class*="bp-columns"])
    > [class*="col"]
    > *,
  .ltd-summary
    .paragraph__column:has(> [class*="bp-columns"])
    > [class*="col"]
    > *,
  .ltd-summary .paragraph--type--bp-column-wrapper,
  .ltd-summary .paragraph--type--bp-column-wrapper > .paragraph__column,
  .ltd-summary .paragraph--type--bp-column-wrapper > .paragraph__column > * {
    display: contents;
  }
}

/* On mobile, give the stacked cards breathing room. */
@media (max-width: 767.98px) {
  .ltd-pillars .paragraph--type--bp-simple,
  .ltd-summary .paragraph--type--bp-simple {
    margin-bottom: 1.25rem;
  }
}

/* The card's own inner column shouldn't add module padding. */
.ltd-pillars .paragraph--type--bp-simple > .paragraph__column,
.ltd-summary .paragraph--type--bp-simple > .paragraph__column {
  padding: 0;
  float: none;
  width: auto;
}

/* ============ 1. PILLARS ============ */
.ltd-pillars .paragraph--type--bp-simple {
  flex: 1 1 auto; /* fill the grid cell → equal-height cards */
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--color-white);
  border: 1px solid var(--ltd-line);
  border-radius: var(--radius-card);
  padding: 1.6rem 1.4rem;
}

/* Safety net: cap any image in a pillar card (the icon is a bare <img>) so
   illustrations stay small. */
.ltd-pillars img {
  max-width: 84px;
  max-height: 84px;
  height: auto;
  object-fit: contain;
}

.ltd-pillars h3 {
  color: var(--color-theme-blue);
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
}

.ltd-pillars p {
  color: var(--ltd-muted);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

/* ============ 2. SUMMARY ============ */
.ltd-summary .paragraph--type--bp-simple {
  /* Block-level (override module display:table) so height:100% reliably fills
     the stretched grid column → equal-height cards side by side. */
  display: block;
  height: 100%;
  background: var(--ltd-panel);
  border-radius: var(--radius-card);
  border-left: 3px solid var(--accent-yellow);
  padding: 1.9rem 1.6rem;
}

.ltd-summary p {
  color: var(--ltd-muted);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
}

/* Section head ("What We Do", etc.) */
.main-content .paragraph.ltd-section-head {
  padding-top: 45px;

  p {
    margin-block: 0;
    padding-block: 0;
  }
}

h2#contact-us + div * {
  font-size: large;
}