/* CSS Reset & Base Styles */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: 'Roboto', sans-serif; font-weight: 300; line-height: 1.6; color: var(--text-body); background: var(--surface-page); }
h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; font-weight: 600; line-height: 1.2; margin-bottom: 1rem; }
h1 { font-size: 3rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1.5rem; }
p { margin-bottom: 1rem; font-family: 'Poppins', sans-serif; font-weight: 400; }
/* Links follow Overlay Color. The previous #2196F3 / #1976D2 was Material-blue boilerplate with
   no relationship to the brand, and it was not theoretical: the three "Learn more" links on page
   1857 rendered bright blue against an otherwise teal site, and it is the reason the service-card
   title rule further down needs an explicit `color: inherit`. Hover uses the same 70%-brightness
   dark variant the header already uses, so the whole site darkens from one control. */
a { color: var(--brand-accent); text-decoration: none; transition: all 0.3s ease; }
a:hover { color: var(--brand-accent-hover); }
img { max-width: 100%; height: auto; display: block; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Header Styles */
.site-header { background: var(--surface-header); box-shadow: 0 2px 10px rgba(0,0,0,0.1); position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }
.header-container { max-width: 1200px; margin: 0 auto; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; }
.site-branding { flex: 0 0 auto; }
.site-branding img { max-height: 60px; width: auto; }
.site-title { font-size: 1.5rem; margin: 0; }
.site-title a { color: var(--text-body); }
.site-title a:hover { color: var(--brand-accent); }
.site-description { font-size: 0.875rem; color: var(--text-muted); margin: 0; }
/* Navigation Styles */
.main-navigation { flex: 1 1 auto; display: flex; justify-content: flex-end; }
.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; }
.menu-toggle-icon { display: block; width: 25px; height: 3px; background: var(--text-body); margin: 5px 0; transition: all 0.3s ease; }
.menu-container { display: flex; }
#primary-menu { list-style: none; display: flex; gap: 2rem; margin: 0; padding: 0; }
#primary-menu li { position: relative; }
#primary-menu a { color: var(--text-body); font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 0.95rem; padding: 0.5rem 0; display: block; }
#primary-menu a:hover { color: var(--brand-accent); }
#primary-menu .sub-menu { position: absolute; top: 100%; left: 0; background: var(--surface-card); box-shadow: 0 4px 12px rgba(0,0,0,0.15); list-style: none; padding: 0.5rem 0; min-width: 320px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; }
#primary-menu li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
#primary-menu .sub-menu li { padding: 0; }
#primary-menu .sub-menu a { padding: 0.75rem 1.5rem; }
#primary-menu .sub-menu a:hover { background: var(--surface-hover); }
#primary-menu .sub-menu .sub-menu { position: absolute; top: 0; left: 100%; transform: translateX(-10px); }
#primary-menu .sub-menu li:hover > .sub-menu { transform: translateX(0); }
#primary-menu .menu-item-contact a, #primary-menu li:last-child a { background: var(--theme-color); color: #fff; padding: 0.75rem 1.5rem; border-radius: 4px; }
#primary-menu .menu-item-contact a:hover, #primary-menu li:last-child a:hover { background: var(--theme-color); color: #fff; }
/* Hero Video Section */
.video-hero { position: relative; overflow: hidden; height: 100vh !important; max-height: 100vh !important; min-height: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.video-hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; object-fit: cover; display: block; pointer-events: none; }
.video-hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: -1; }
.video-hero-content { position: relative; z-index: 1; color: #fff; text-align: center; max-width: 900px; padding: 2rem; }
.hero-heading { font-size: 4rem; font-weight: 700; margin-bottom: 1.5rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.hero-subheading { font-size: 1.5rem; margin-bottom: 2.5rem; font-weight: 300; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); }
.hero-button { display: inline-block; background: var(--theme-color); color: #fff; padding: 1rem 3rem; font-size: 1.125rem; font-weight: 600; border-radius: 4px; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; }
.hero-button:hover { background: var(--theme-color); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(80, 201, 206, 0.4); }
/* Services Section */
.services-section { padding: 6rem 2rem; background: var(--surface-alt); }
.services-container { max-width: 1200px; margin: 0 auto; }
.service-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.service-card { display: block; background: var(--surface-card); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease; text-decoration: none; color: inherit; }
.service-card:hover { transform: translateY(-8px); box-shadow: 0 8px 25px rgba(0,0,0,0.2); }
.service-card-image { width: 100%; height: 250px; background-size: cover; background-position: center; transition: transform 0.3s ease; }
.service-card:hover .service-card-image { transform: scale(1.1); }
.service-card-content { padding: 2rem; }
.service-card-title { font-size: 1.5rem; margin-bottom: 1rem; color: var(--text-body); }
.service-card-description { font-size: 1rem; color: var(--text-muted); line-height: 1.6; }
/* Secondary Video Section */
.video-secondary { position: relative; overflow: hidden; padding: 8rem 2rem; display: flex; align-items: center; justify-content: center; min-height: 400px; background-size: cover; background-position: center; background-repeat: no-repeat; }
.video-secondary-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; object-fit: cover; }
.video-secondary-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: -1; }
.video-secondary-content { position: relative; z-index: 1; color: #fff; text-align: center; max-width: 800px; }
.secondary-heading { font-size: 3rem; font-weight: 700; margin-bottom: 1.5rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.secondary-text { font-size: 1.25rem; font-weight: 300; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); }
/* Footer Styles */
.site-footer { background: #1a1a1a; color: #ecf0f1; }
.footer-main { padding: 4rem 2rem; }
.footer-container { max-width: 1200px; margin: 0 auto; }
.footer-columns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3rem; }
.footer-column { }
.footer-heading { color: var(--theme-color); font-size: 1rem; font-weight: 600; margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: 0.5px; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.75rem; }
.footer-links a { color: #ecf0f1; font-size: 0.875rem; transition: color 0.3s ease; }
.footer-links a:hover { color: var(--theme-color); }
.footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-contact li { margin-bottom: 0.75rem; color: #ecf0f1; font-size: 0.875rem; }
.footer-contact a { color: var(--theme-color); }
.footer-contact a:hover { color: #fff; }
.footer-cta-button { display: inline-block; background: var(--theme-color); color: #fff; padding: 0.75rem 2rem; font-size: 0.875rem; font-weight: 600; border-radius: 4px; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; margin-top: 1rem; }
.footer-cta-button:hover { background: var(--theme-color); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(80, 201, 206, 0.4); }
.site-info { border-top: 1px solid rgba(255,255,255,0.1); padding: 2rem; text-align: center; }
.site-info p { margin: 0; font-size: 0.875rem; color: var(--text-faint); }
/* Page Content Styles */
.site-main { max-width: 1200px; margin: 0 auto; padding: 4rem 2rem; }
.entry-header { margin-bottom: 2rem; }
.entry-title { font-size: 2.5rem; }
.entry-meta { font-size: 0.875rem; color: var(--text-muted); margin-top: 0.5rem; }
.entry-meta span { margin-right: 1rem; }
.entry-content { line-height: 1.8; }
.entry-content h2, .entry-content h3 { margin-top: 2rem; }
.entry-content ul, .entry-content ol { margin-left: 2rem; margin-bottom: 1rem; }
.entry-content li { margin-bottom: 0.5rem; }
.post-thumbnail { margin-bottom: 2rem; }
.post-thumbnail img { width: 100%; height: auto; border-radius: 8px; }
/* Search Form */
.search-form { display: flex; gap: 0.5rem; max-width: 600px; margin: 2rem auto; }
.search-field { flex: 1; padding: 0.75rem 1rem; border: 1px solid var(--border-subtle); border-radius: 4px; font-size: 1rem; }
.search-submit { padding: 0.75rem 2rem; background: var(--theme-color); color: #fff; border: none; border-radius: 4px; cursor: pointer; font-weight: 600; transition: background 0.3s ease; }
.search-submit:hover { background: var(--theme-color); }
/* 404 Page */
.error-404 { text-align: center; padding: 4rem 2rem; }
.error-404 .page-header { margin-bottom: 2rem; }
.error-404 .page-title { font-size: 3rem; color: var(--text-muted); }
/* Responsive Styles */
@media (max-width: 768px) {
    .menu-toggle { display: block; }
    .menu-container { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--surface-header); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
    .menu-container.active { display: block; }
    #primary-menu { flex-direction: column; gap: 0; }
    #primary-menu li { border-bottom: 1px solid var(--border-subtle); }
    #primary-menu a { padding: 1rem 2rem; }
    #primary-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: var(--surface-alt); padding-left: 1rem; }
    .hero-heading { font-size: 2.5rem; }
    .hero-subheading { font-size: 1.125rem; }
    .hero-button { padding: 0.875rem 2rem; font-size: 1rem; }
    .service-cards { grid-template-columns: 1fr; gap: 1.5rem; }
    .secondary-heading { font-size: 2rem; }
    .secondary-text { font-size: 1rem; }
    .video-hero { min-height: 0; }
    .video-hero-bg, .video-secondary-bg { display: none; }
    .video-hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
    .video-secondary { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
    .footer-columns { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}
@media (max-width: 480px) {
    .header-container { padding: 1rem; }
    .hero-heading { font-size: 2rem; }
    .hero-subheading { font-size: 1rem; }
    .secondary-heading { font-size: 1.5rem; }
    .services-section { padding: 3rem 1rem; }
    .video-secondary { padding: 4rem 1rem; }
    .footer-columns { grid-template-columns: 1fr; gap: 2rem; }
    .footer-main { padding: 3rem 1rem; }
}

/* Menu item descriptions */
.menu-item-description { display: block; font-size: 0.7rem; color: var(--text-body); font-weight: 300; line-height: 1.3; margin-top: 2px; white-space: normal; text-transform: none; letter-spacing: normal; }

/* ── About Page ─────────────────────────────────────────────────────────── */
.about-content { padding-top: 56px; } /* breathing room between the hero and the first content heading */
.about-content .wp-block-columns {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 55px 40px;
    gap: 60px !important;
    align-items: center;
    border-top: 1px solid var(--border-subtle);
}
.about-content .wp-block-columns:first-child { border-top: none; }
.about-content .wp-block-image img { border-radius: 4px; box-shadow: 0 2px 16px rgba(0,0,0,0.1); width: 100%; height: auto; }
/* Section headings follow Overlay Color, which the README documents as driving "buttons, links,
   headings, tick marks, footer headings". This was a literal, so every heading on every ported
   page stayed on the old teal while the rest of the site moved - more visible than the CTA panel,
   since a page has many headings and one CTA. An inline color attribute still wins (no
   !important), which is how the white headings inside the dark CTA card keep working. */
.about-content h2 { color: var(--brand-accent); }
.about-content ul li { font-family: 'Poppins', sans-serif; margin-bottom: 0.4rem; }
/* CTA card chrome. Insert it from Patterns > Parkdale > "CTA Card: Teal Panel + Image";
   the pattern applies "about-cta-wrap" itself, so nobody types the class by hand. */
.about-content .about-cta-wrap { padding: 60px 40px; background: #161a1d !important; }
.about-content .about-cta-wrap .wp-block-columns {
    border-radius: 20px; overflow: hidden; max-width: 1100px; border-top: none;
    padding: 0 !important; gap: 0 !important; align-items: stretch;
}
/* var(--theme-color), NOT a literal. This panel appears on every ported service page and on both
   flagship pages, and a hardcoded teal here meant changing Overlay Color moved the whole site
   except this panel. Deliberately NOT !important: a column carrying its own background-color
   block attribute must still win, because that is an editor choice made in the sidebar. Pages
   still carrying that inline attribute therefore keep their own colour until it is cleared. */
.about-content .about-cta-wrap .wp-block-column:first-child {
    background: var(--theme-color); padding: 50px 45px; display: flex; flex-direction: column; justify-content: center;
}
.about-content .about-cta-wrap .wp-block-column:first-child h2,
.about-content .about-cta-wrap .wp-block-column:first-child p { color: #fff; }
.about-content .about-cta-wrap .wp-block-column:first-child p { color: rgba(255,255,255,0.9); }
.about-content .about-cta-wrap .wp-block-column:last-child { min-height: 320px; padding: 0 !important; background-size: cover !important; background-position: center !important; }
/* CTA right column now holds a real (editor-swappable) core/image block instead of a hand-authored CSS background div; make it fill edge-to-edge and cover */
.about-content .about-cta-wrap .cta-bg-image { margin: 0; height: 100%; border-radius: 0; box-shadow: none; }
.about-content .about-cta-wrap .cta-bg-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; box-shadow: none !important; }
/* Align standalone intro blocks (heading/paragraph/list) to the same centered 1100px column + 40px content inset as the rows and hero */
.about-content > h1, .about-content > h2, .about-content > h3, .about-content > h4,
.about-content > p, .about-content > ul, .about-content > ol {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    box-sizing: border-box !important;
}
/* Larger content images: widen the 38% image columns to 46% */
.about-content .wp-block-columns .wp-block-column[style*="38%"] { flex-basis: 46% !important; }
/* Content images: rounded + soft shadow, NO transform unless parallax is enabled on that image */
.about-content .wp-block-image { border-radius: 4px; box-shadow: 0 2px 16px rgba(0,0,0,0.1); }
.about-content .wp-block-image img { border-radius: 4px; display: block; }
/* Parallax is OPT-IN per image (the "Parallax scroll" toggle = pi-parallax class): clip the figure + scale the image so it can travel (scrolls slower than the page). */
.about-content .wp-block-image.pi-parallax { overflow: hidden !important; }
.about-content .wp-block-image.pi-parallax img { border-radius: 0 !important; box-shadow: none !important; transform: scale(var(--pz, 1.5)); will-change: transform; }
/* ── Core buttons (core/button) ─────────────────────────────────────────────
   This theme has no theme.json, so without these rules a native Button block dropped anywhere
   in content renders in core's default dark grey (#32373c) instead of the site's colour. Same
   argument as the Query Loop chrome: a theme that ships to clients has to style CORE blocks,
   not only its own patterns. An editor should be able to insert a plain Button and have it
   look right, with no magic class to type and no pattern to borrow. */
.about-content .wp-block-button__link {
    padding: 1rem 2.5rem; font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px; border-radius: 4px;
    text-decoration: none; transition: all 0.3s ease;
}
/* Colour is applied only when the editor has NOT chosen one. Using :not() rather than
   overriding means core's own colour classes (has-*-background-color) and the sidebar colour
   pickers keep working normally - the theme supplies a default, it does not seize control. */
.about-content .wp-block-button__link:not(.has-background) { background-color: var(--theme-color); }
.about-content .wp-block-button__link:not(.has-text-color) { color: #fff; }
.about-content .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.2); }
/* Core's "Outline" style variant, so that native choice works too */
.about-content .wp-block-button.is-style-outline .wp-block-button__link { border: 2px solid currentColor; }
.about-content .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) { background-color: transparent; }
.about-content .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) { color: var(--brand-accent); }
.about-content .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):hover { background-color: var(--theme-color); }
.about-content .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):hover { color: #fff; }

/* CTA card button - the pattern (Parkdale > "CTA Card: Teal Panel + Image") uses a native
   core/button so the label and link are normal block controls; this is only its skin.
   Selector deliberately carries .wp-block-buttons so it outranks the generic rule above by
   specificity rather than by source order, and keeps working wherever the card is used. */
.about-cta-wrap .wp-block-buttons { margin-top: 1.5rem; }
.about-cta-wrap .wp-block-buttons .wp-block-button__link {
    padding: 1rem 2.5rem; font-size: 1rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px; border-radius: 4px; transition: all 0.3s ease;
}
/* :not() mirrors the generic rule so this outranks it on specificity, not source order, and an
   explicit colour picked in the sidebar still wins over both. */
.about-cta-wrap .wp-block-buttons .wp-block-button__link:not(.has-background) { background-color: #fff; }
.about-cta-wrap .wp-block-buttons .wp-block-button__link:not(.has-text-color) { color: var(--theme-color); }
.about-cta-wrap .wp-block-buttons .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.25); }

/* ── Front page block body ──────────────────────────────────────────────────
   front-page.php wraps the editor blocks in .about-content.home-content:
   .about-content supplies the shared block styling (columns, images, parallax, CTA card),
   .home-content adjusts it for a front page. The article-style top padding has to go: the
   home body opens with a full-bleed band sitting flush under the hero, not with a heading
   that needs breathing room. Without this the blocks path shows a white stripe under the hero
   that the default-sections path does not have. */
.home-content { padding-top: 0; }
.home-content > *:first-child { margin-top: 0; }
.home-content > .wp-block-group:last-child,
.home-content > .wp-block-cover:last-child { margin-bottom: 0; }

/* ── HOME SERVICE CARDS: matched to production ──────────────────────────────
   Every number below was read off www.parkdalestrategy.com at a 1440px viewport on
   2026-07-22 via the browser's own computed styles, not copied from a screenshot:

     card row     1200px wide, white plate, padding 15px, gap 20px, margin-top -100px
     overlap      the plate sits 75px over the hero; the card itself overlaps by 60px
     card         377 x 429, teal #156475 frame produced by 10px padding
     card image   200px tall
     card title   23px / 34.5px Montserrat 600, #156475, 37px gap below it
     card body    16px / 22.4px Roboto, rgb(107,124,130)
     card inset   35px of padding around the text block

   THE NEGATIVE MARGIN IS DELIBERATE. It is what lifts the cards over the hero, which
   is the look Chris asked for and what production does. It is not a stray offset -
   do not "tidy" it away. Two things keep it working, so do not change them casually:
     1. nothing between the hero and this plate may set overflow:hidden, or the
        overlapping part is silently clipped;
     2. the plate carries an explicit z-index so it paints above the hero regardless
        of document order.

   Deliberately keyed to the .service-cards / .service-card CLASSES, listed for both
   the plain and the block markup, because the SAME design has to render identically
   whether the front page is on its defaults path or on the block-pattern path. The
   old rule keyed the pull-up to #services, an id only the defaults path emits, so
   the block path - the one currently live - silently lost the overlap entirely. */
.service-cards,
.wp-block-columns.service-cards {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    max-width: 1200px !important;
    /* -75px, not production's -100px: production's row has a 25px natural gap below its
       hero before the offset is applied, dev's section sits flush. -75 puts the plate at
       the same absolute y (475) and the card at the same y (490) as production. */
    margin: -75px auto 0 !important;
    padding: 15px !important;
    background: var(--surface-card) !important;
    position: relative !important;
    z-index: 10 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    border-top: none !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
}
/* The section around the plate must add nothing: production has no band here, and a
   full-width tinted band pulled up over the hero would read as a slab, not as cards. */
.services-section {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 10 !important;
    overflow: visible !important;
}
.services-section > .wp-block-group__inner-container,
.services-content-wrapper,
.services-container {
    background: transparent !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.service-card,
.wp-block-columns.service-cards > .wp-block-column.service-card {
    flex-basis: auto !important;
    /* The frame is the site's Overlay Color, shown as a 10px border. It is var(--theme-color)
       and NOT the literal #156475 on purpose: production's frame colour is simply what that
       control currently holds, so hardcoding it would silently disconnect the Customizer. */
    background: var(--theme-color) !important;
    padding: 10px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.25) !important; }
.service-card.is-card-link { cursor: pointer; }
.service-card .service-card-image,
.service-card .wp-block-image.service-card-image {
    margin: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    overflow: hidden !important; height: 200px !important; flex: 0 0 200px !important;
}
.service-card .wp-block-image.service-card-image img {
    width: 100%; height: 200px; object-fit: cover;
    border-radius: 0 !important; box-shadow: none !important; transition: transform 0.3s ease;
}
.service-card:hover .service-card-image img { transform: scale(1.06); }
/* Card text block, both paths, using production's measured inset and type. */
.service-card .service-card-content {
    background: var(--surface-card) !important; padding: 35px !important;
    flex: 1 1 auto !important; display: flex !important; flex-direction: column !important;
}
.service-card .service-card-content .service-card-title {
    font-size: 23px !important; line-height: 34.5px !important; font-weight: 600 !important;
    color: var(--brand-accent) !important; margin: 0 0 37px 0 !important;
}
/* Roboto, NOT the global Poppins from the `p` rule at the top of this file. This is a
   MEASURED difference, not a preference: production renders this description in Roboto, and
   Poppins is the wider face, so the identical 115-character string wraps to 4 lines here and
   3 lines on production at the identical 286.7px column. That single extra line, multiplied by
   the grid's align-items:stretch, was the whole "cards are taller than production" gap. The
   size and line-height above were already matched to Roboto's metrics; only the family was
   missed. Do not fix this by widening the card or by trimming the copy - the copy is verbatim
   production text and the 1200px plate / 377px card geometry is matched exactly. */
.service-card .service-card-content .service-card-description {
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px !important; line-height: 22.4px !important; color: rgb(107, 124, 130) !important;
    margin-bottom: 0 !important;
}
/* A card MUST contain exactly one link. main.js line 40 bails on `$links.length !== 1`, so a
   card with zero links silently stops being clickable and a card with two is ambiguous. That
   one link can live in either of two places, and both are styled here:

   1. ON THE TITLE (what production does, and the shorter card). Production wraps the whole card
      in a single anchor, which core blocks cannot express - that is the entire reason main.js
      exists. Putting the link on the heading is the closest core-block equivalent: no visible
      "Learn more" row, so the card loses that ~46px, and the card stays clickable.
      The `color: inherit` is load-bearing, not tidiness: the global `a` rule near the top of this
      file has no card-scoped override, so without it all three titles take the link colour
      instead of the heading colour. That was glaring when the global rule was Material blue; it
      is subtler now that links follow the theme colour, but it is still wrong, because a card
      title is a heading that happens to be clickable, not a link.
   2. AS A "Learn more" ROW (the taller card). Styled as a deliberate affordance rather than a
      stray paragraph link: pushed to the foot of the card so cards with different text lengths
      still line up, with an arrow that advances on hover to echo the card lift.

   Prefer 1. Do not "clean up" by deleting the link markup from a card without moving it to the
   title first, or the whole-card click goes with it. */
.service-card .service-card-title a {
    color: inherit;
    text-decoration: none;
}
.wp-block-column.service-card .service-card-link { margin-top: auto; margin-bottom: 0; padding-top: 20px; }
.wp-block-column.service-card .service-card-link a {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-family: 'Montserrat', sans-serif; font-size: 0.85rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px; color: var(--brand-accent); text-decoration: none;
}
.wp-block-column.service-card .service-card-link a::after { content: '\2192'; transition: transform 0.3s ease; }
.wp-block-columns.service-cards > .wp-block-column.service-card:hover .service-card-link a::after { transform: translateX(4px); }

/* ── Full-width media CTA band ──────────────────────────────────────────────
   Pattern: Parkdale > "Full-width Media CTA Band". A native core/cover, so the
   background video/image and the dim level use the Cover block's own controls. */
.about-content > .wp-block-cover.alignfull,
.about-content > .wp-block-group.alignfull { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
/* core/cover has no poster attribute, so unlike the PHP default section this band has no still
   image before the video decodes. A solid brand-dark base means a slow connection sees a
   deliberate colour rather than an empty rectangle. */
.media-cta-band { background-color: #161a1d; }
.media-cta-band .wp-block-cover__inner-container { text-align: center; }
.media-cta-band h2 { font-size: 3rem; font-weight: 700; margin-bottom: 1.5rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.media-cta-band p { font-size: 1.25rem; font-weight: 300; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); }

/* ── Query Loop (core/query) ────────────────────────────────────────────────
   A theme that ships to clients has to style CORE blocks, not only its own patterns.
   Dropping a Query Loop into a page previously fell through to bare block-library CSS and
   looked visibly plainer than everything around it. These rules give it the same card chrome
   as the service cards, so it matches the site with no extra work from the editor.
   Scoped to .about-content on purpose: archive/blog listings rendered by index.php and
   single.php keep core's default presentation and are unaffected. */
.about-content .wp-block-query {
    max-width: 1100px; margin-left: auto; margin-right: auto;
    padding: 55px 40px; box-sizing: border-box;
}
.about-content .wp-block-query .wp-block-post-template {
    gap: 2rem; padding: 0; margin: 0; list-style: none;
}
.about-content .wp-block-post-template > li.wp-block-post {
    background: var(--surface-card); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease; display: flex; flex-direction: column; padding: 0;
}
.about-content .wp-block-post-template > li.wp-block-post:hover { transform: translateY(-8px); box-shadow: 0 8px 25px rgba(0,0,0,0.2); }
.about-content .wp-block-post-template .wp-block-post-featured-image { margin: 0; overflow: hidden; border-radius: 0; }
/* 220px is the theme's DEFAULT image band, used when the Featured Image block's "Aspect ratio"
   is left on Default. It is deliberately NOT !important: when an editor picks an aspect ratio
   in the block sidebar, core emits inline aspect-ratio on the figure plus height:100% on the
   img, and that inline style rightly wins. A native control the editor can see must actually
   work - making the theme override it would turn Aspect ratio into a control that lies, which
   is the one thing this theme does not do. Do not "fix" this with !important. */
.about-content .wp-block-post-template .wp-block-post-featured-image img {
    width: 100%; height: 220px; object-fit: cover; display: block;
    border-radius: 0 !important; box-shadow: none !important; transition: transform 0.3s ease;
}
.about-content .wp-block-post-template > li.wp-block-post:hover .wp-block-post-featured-image img { transform: scale(1.06); }
/* Inset every part of the card except the edge-to-edge featured image */
.about-content .wp-block-post-template > li.wp-block-post > *:not(.wp-block-post-featured-image) { padding-left: 1.75rem; padding-right: 1.75rem; }
.about-content .wp-block-post-template > li.wp-block-post > *:last-child { margin-bottom: 1.75rem; }
.about-content .wp-block-post-title { font-size: 1.4rem; line-height: 1.3; margin: 1.5rem 0 0.75rem; }
.about-content .wp-block-post-title a { color: var(--brand-accent); text-decoration: none; }
.about-content .wp-block-post-title a:hover { color: var(--brand-accent); text-decoration: underline; }
.about-content .wp-block-post-excerpt { font-family: 'Poppins', sans-serif; font-size: 1rem; color: var(--text-muted); line-height: 1.6; }
.about-content .wp-block-post-excerpt__more-link,
.about-content .wp-block-read-more { color: var(--brand-accent); font-weight: 600; text-decoration: none; }
.about-content .wp-block-post-date,
.about-content .wp-block-post-terms { font-size: 0.85rem; color: var(--text-dim); }
.about-content .wp-block-query-pagination { justify-content: center; margin-top: 2.5rem; }
.about-content .wp-block-query-no-results { text-align: center; color: var(--text-muted); }

/* ── Icon list ──────────────────────────────────────────────────────────────
   Block: Parkdale > "Icon List Item" (pattern: Parkdale > "Icon List").
   Icon is chosen from the block sidebar, never typed as a CSS class. */
.pi-icon-list { margin: 1.5rem 0; }
.pi-icon-item { display: flex; align-items: flex-start; gap: 14px; padding: 8px 0; }
.pi-icon-item-icon { flex: 0 0 auto; width: 1.6em; color: var(--brand-accent); font-size: 1.35rem; line-height: 1.5; text-align: center; }
.pi-icon-item-text { font-family: 'Poppins', sans-serif; font-weight: 400; line-height: 1.6; }

/* Front page still-image hero (used only when no hero video is available) */
.video-hero-image { background-size: cover; background-position: center; background-repeat: no-repeat; }

@media (max-width: 900px) {
    .about-content .wp-block-columns { flex-direction: column !important; padding: 40px 24px; gap: 30px !important; }
    .about-content .about-cta-wrap .wp-block-columns { flex-direction: column !important; }
    .about-content .about-cta-wrap .wp-block-column:last-child { min-height: 220px; }
    .about-content > h1, .about-content > h2, .about-content > h3, .about-content > h4,
    .about-content > p, .about-content > ul, .about-content > ol { padding-left: 24px !important; padding-right: 24px !important; }
    .about-content .wp-block-columns .wp-block-column[style*="38%"] { flex-basis: 100% !important; }
    .wp-block-columns.service-cards { grid-template-columns: 1fr; gap: 1.5rem !important; }
    .about-content .wp-block-query { padding: 40px 24px; }
    .media-cta-band h2 { font-size: 2rem; }
    .media-cta-band p { font-size: 1rem; }
}