/*!
Theme Name: Matisse (ClickFoundry)
Theme URI: https://clickfoundry.co/
Author: ClickFoundry
Author URI: https://clickfoundry.co/
Description: Custom WordPress theme for AIA Long Beach / South Bay — member and firm directories, programs, committees, events and the Matisse block library.
Version: 4.0.1
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: matisse
Tags: custom-logo, custom-menu, featured-images, block-styles, translation-ready

This theme, like WordPress, is licensed under the GPL.

Matisse is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Design Tokens (CSS Custom Properties)
# Generic
  - Normalize
  - Box sizing
# Base
  - Typography
  - Elements
  - Links
  - Forms
# Layouts
  - Site Structure
  - Container Queries
# Components
  - Navigation
  - Posts and pages
  - Comments
  - Widgets
  - Media
  - Captions
  - Galleries
  - Footer
  - Custom scrollbar ("Ember" rail)
# Plugins
  - Jetpack infinite scroll
# Utilities
  - Accessibility
  - Alignments
# Block & Component Overrides
  - General block spacing
  - Hero
  - Testimonials slider
  - Content grid / Portfolio
  - Swiper / slider
  - Newsletter
  - CTA
  - Contact form (luxury)
  - Hero slider
  - Blog archive
  - Blog single
  - Portfolio single
  - Portfolio listings
# Responsive
# Utility classes
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Brand Webfonts (self-hosted)
  ↳ Architype — the AIA custom face. Only Light (300) and Bold (700)
    exist as webfonts; other weights fall back to the nearest of the
    two. Archivo (Google Fonts) stays in the stacks as the fallback.
--------------------------------------------------------------*/
@font-face {
  font-family: "Architype";
  src:
    url("assets/fonts/architype-light-webfont.woff2") format("woff2"),
    url("assets/fonts/architype-light-webfont.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Architype";
  src:
    url("assets/fonts/architype-bold-webfont.woff2") format("woff2"),
    url("assets/fonts/architype-bold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/*--------------------------------------------------------------
# Design Tokens (CSS Custom Properties)
  ↳ ALL adjustable brand colours and design decisions live here.
    Change a value here; it cascades everywhere.
--------------------------------------------------------------*/
:root {
  /* ==========================================================
   * AIA BRAND FOUNDATIONS  (claude-design/foundations)
   * Black top bar · white reversed nav · single red action accent.
   * These are the source-of-truth brand tokens; the palette below
   * maps the legacy variable names onto them so the whole token-
   * driven stylesheet reskins from these seven values.
   * ========================================================== */

  --aia-black: #000000; /* top bar · display headlines */
  --aia-red: #fa4132; /* primary action accent — white text on red */
  --aia-ink: #1a1a1a; /* body / UI text */
  --aia-paper: #ffffff; /* surfaces */
  --aia-mist: #f4f4f2; /* hover · section background */
  --aia-line: #e3e2df; /* borders · dividers */
  --aia-slate: #6e6c66; /* secondary text · icons */

  --aia-red-light: #ff6b5e;
  --aia-red-dark: #d8301f;

  /* House secondary-button underline (text-link secondaries, e.g.
   * .matisse-cta-section__btn--secondary): heavier and darker than the
   * 1px/3px line-grey underline on link-list/card titles. */
  --aia-btn2-underline-w: 2px;
  --aia-btn2-underline-offset: 5px;
  --aia-btn2-underline-color: #9a988f; /* mid-grey, between line and slate */

  /* ==========================================================
   * CUSTOM SCROLLBAR — "Ember"  (.aia-rail, see Components)
   * Black track, muted brick-red thumb, grey-mist border line.
   * The stroke is deliberately ONE STEP LIGHTER than the fill it
   * sits on, in both states — never white — so it reads as a lit
   * edge on the thumb rather than an outline around it.
   * ========================================================== */

  --aia-rail-w: 12px; /* rail width — also the reveal hit target */
  --aia-rail-hot: 40px; /* px from the right edge that reveals the rail */
  --aia-rail-bg: var(--aia-black);
  --aia-rail-line: var(--aia-line); /* grey mist hairline, rail's left edge */
  --aia-rail-thumb: #b8362a; /* muted — quieter than the button red */
  --aia-rail-thumb-stroke: #d24c3c; /* one step lighter than the fill */
  --aia-rail-thumb-hover: var(--aia-red);
  --aia-rail-thumb-stroke-hover: var(--aia-red-light);
  --aia-rail-thumb-inset: 3px; /* keeps black visible either side */
  --aia-rail-thumb-min: 36px;
  /* Above .aia-hdr (300) so the rail runs the FULL viewport height — over the
     eyebrow and the main bar (logo + hamburger), not tucked under them. Sitting
     above .aia-scrim (290) and .aia-drawer (295) costs nothing here because the
     rail is hidden outright whenever the drawer is open. */
  --aia-rail-z: 310;

  /* ==========================================================
   * CORE PALETTE  (legacy names → AIA foundations)
   * ========================================================== */

  /* Dark / ink */
  --color-primary: var(--aia-ink);
  --color-primary-light: var(--aia-slate);
  --color-primary-dark: var(--aia-black);

  /* Light / paper */
  --color-secondary: var(--aia-paper);
  --color-secondary-light: var(--aia-paper);
  --color-secondary-dark: var(--aia-line);

  /* AIA red accent (single action colour) */
  --color-accent: var(--aia-red);
  --color-accent-light: var(--aia-red-light);
  --color-accent-dark: var(--aia-red-dark);

  /* Neutral / muted backgrounds */
  --color-bg-dull: var(--aia-mist);
  --color-bg-dull-accent: rgba(250, 65, 50, 0.05);
  --color-bg-dull-dark: var(--aia-line);

  /* Selection highlights */
  --selected-primary-opac: rgba(250, 65, 50, 0.14);
  --selected-primary: rgba(250, 65, 50, 0.28);

  /* ==========================================================
   * SEMANTIC ALIASES
   * ========================================================== */

  --color-text: var(--aia-ink);
  --color-text-light: var(--aia-slate);
  --color-text-muted: rgba(110, 108, 102, 0.72); /* slate @ ~72% */
  --color-text-inverse: var(--aia-paper);

  --color-background: var(--color-secondary);
  --color-background-alt: var(--color-bg-dull);

  --color-border: var(--color-bg-dull-dark);
  --color-border-light: rgba(0, 0, 0, 0.1);

  /* ==========================================================
   * LINKS
   * ========================================================== */

  /* Primary brand links (nav, UI) */
  --color-link: var(--aia-ink);
  --color-link-hover: var(--aia-red);

  /* Long-form content / blog post links */
  --color-blog-link: var(--aia-red);
  --color-blog-link-hover: var(--aia-red-dark);

  /* ==========================================================
   * FORM ACCENT
   * ========================================================== */

  --color-form-accent: var(--aia-red);
  --color-form-accent-hover: var(--aia-red-dark);
  --color-form-accent-alpha: rgba(250, 65, 50, 0.08);
  --color-form-accent-shadow: rgba(250, 65, 50, 0.2);
  --color-form-accent-shadow-lg: rgba(250, 65, 50, 0.3);

  /* ==========================================================
   * VALIDATION / STATUS
   * ========================================================== */

  --color-error: #d32f2f;
  --color-warning-bg: #fff3e0;
  --color-warning-border: #ff9800;
  --color-warning-text: #e65100;
  --color-success-bg: #e8f5e9;
  --color-success-border: var(--color-form-accent);
  --color-success-text: #1b5e20;

  /* ==========================================================
   * NAVIGATION
   * ========================================================== */

  --color-nav-text: var(--color-primary);
  --color-nav-text-open: var(--color-secondary);
  --color-nav-bg: transparent;
  --color-nav-drawer-bg: #0a0a0a;
  --color-nav-secondary: #cfcfcf;
  --color-nav-border: rgba(255, 255, 255, 0.6);

  /* ==========================================================
   * FOOTER
   * ========================================================== */

  --color-footer-bg: var(--aia-black);
  --color-footer-text: var(--aia-paper);
  --color-footer-text-muted: rgba(255, 255, 255, 0.66);
  --color-footer-border: rgba(255, 255, 255, 0.12);

  /* ==========================================================
   * GLASS / FROSTED CARD SYSTEM
   * Centralises the repeated glass-morphism pattern.
   * ========================================================== */

  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-bg-medium: rgba(255, 255, 255, 0.5);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  --glass-shadow-heavy: 2px 8px 32px rgba(0, 0, 0, 0.6);
  --glass-blur: blur(10px);
  --glass-blur-light: blur(3px);
  --glass-blur-medium: blur(6px);

  /* Card shorthand tokens */
  --card-bg: rgba(255, 255, 255, 0.5);
  --card-border-radius: 0;
  --card-border: 1px solid var(--glass-border);
  --card-shadow: var(--glass-shadow);

  /* ==========================================================
   * OVERLAYS
   * ========================================================== */

  --overlay-dark: rgba(0, 0, 0, 0.6);
  --overlay-light: rgba(255, 255, 255, 0.9);

  /* ==========================================================
   * SPACING SCALE
   * ========================================================== */

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* ==========================================================
   * LAYOUT / CONTAINER WIDTHS
   * ========================================================== */

  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1600px; /* bumped 1440 -> 1600 (xxl) sitewide 2026-06-29 */
  --container-2xl: 1600px;

  --content-width: 75ch;
  --content-wide: 1200px;

  --block-spacing: 100px;
  --block-spacing-mobile: 75px;

  /* Horizontal gutter for every 1600px rail element (entry-content children,
     matisse-section inners, .container-xl blocks). 0 above 1648px — there the
     centered rail's overhang is ≥24px and nothing touches the viewport edge —
     then a fixed two-step gutter once the overhang runs out. Swapped in media
     queries below the :root block; blocks reference it as
     padding-inline: var(--aia-gutter). */
  --aia-gutter: 0px;

  /* Visible-band gutter floor: grey/black bands paint an edge the eye can
     see, so their inners pad max(--aia-gutter, --aia-gutter-min) — content
     must clear the band edge even where the rail token is 0 (above 1600px,
     or inside a padded column like .aia-entity that zeroes the token).
     Tracks the rail token's nonzero steps so schemed and white bands share
     a left edge at every width the token is nonzero. */
  --aia-gutter-min: 1.5rem;

  /* ==========================================================
   * TYPOGRAPHY
   * ========================================================== */

  /* Display / headlines: Architype (AIA custom face) → Archivo web fallback. */
  --font-heading: "Architype", "Archivo", "Helvetica Neue", Arial, sans-serif;
  /* Body / UI: Inter (print equivalent Myriad Pro). */
  --font-base:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans,
    Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Eyebrow / label accent: Architype Light, all caps (replaced the old
     system-mono accent). Pair with font-weight: 300 + text-transform:
     uppercase at the usage site. */
  --font-label: "Architype", "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* Display letter-spacing presets (foundations type scale) */
  --tracking-display: -0.01em; /* hero titles */
  --tracking-wordmark: 0.06em; /* AIA WORDMARK */
  --tracking-label: 0.12em; /* SECTION LABEL */

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-loose: 1.8;

  /* ==========================================================
   * TRANSITIONS & EASING
   * ========================================================== */

  --ease-material: cubic-bezier(
    0.4,
    0,
    0.2,
    1
  ); /* Material Design standard curve */

  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease-out;
  --transition-slow: 0.5s ease;
  --transition-form: 0.3s var(--ease-material); /* form fields & buttons */

  /* ==========================================================
   * BORDER RADIUS SCALE
   *   xs   → precision / luxury-form aesthetic
   *   sm   → minor controls (filter buttons)
   *   md   → standard UI (nav CTA, images)
   *   lg   → glass cards (aliased by --card-border-radius)
   *   xl   → larger panels
   *   pill → tag / category chips
   *   hero → dramatic architectural image treatment
   * ========================================================== */

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-pill: 20px;
  --radius-hero: 6rem;

  /* ==========================================================
   * SHADOW SCALE
   *   xs   → barely-there lift (sidebar panels)
   *   sm   → card hover state
   *   md   → stronger hover (blog cards)
   *   form → luxury form wrapper ambient shadow
   *   (glass-shadow / glass-shadow-heavy live in the Glass section above)
   * ========================================================== */

  --shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-form: 0 8px 40px rgba(0, 0, 0, 0.06);

  /* ==========================================================
   * Z-INDEX SCALE
   *   below      → decorators behind content (dotted bg)
   *   above      → content above decorators
   *   drawer     → fullscreen menu drawer
   *   nav        → fixed navigation bar
   *   menu-btn   → hamburger button (must sit above drawer)
   *   top        → skip links & screen-reader overlays
   * ========================================================== */

  --z-below: 0;
  --z-above: 1;
  --z-drawer: 999;
  --z-nav: 1000;
  --z-menu-btn: 1101;
  --z-top: 100000;
}

/* --aia-gutter steps: the 1600px rail meets the viewport → fixed gutter.
   (Mobile step lives with the other 768px swaps but is restated here so the
   token's full story reads in one place: 0 → 1.5rem @1648 → 1rem @768.)
   The first step fires at 1648 (rail + 2×24px), not 1600: between 1600 and
   1648 the centered rail's overhang is under 24px, so a 0 token left white
   content 0–24px from the viewport edge while schemed bands held their
   --aia-gutter-min floor — a 24px left-edge unpair (AIALBSB-128). The token
   goes nonzero exactly while the overhang is thinner than the gutter. */
@media (max-width: 1648px) {
  :root {
    --aia-gutter: 1.5rem;
  }
}
@media (max-width: 768px) {
  :root {
    --aia-gutter: 1rem;
    --aia-gutter-min: 1rem;
  }
}

/* Optional dark mode — uncomment and extend to activate
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary:         #ffffff;
    --color-primary-light:   #e5e5e5;
    --color-primary-dark:    #cccccc;
    --color-secondary:       #1a1a1a;
    --color-secondary-light: #2a2a2a;
    --color-secondary-dark:  #0a0a0a;
    --color-bg-dull:         #2a2a2a;
    --color-bg-dull-dark:    #3a3a3a;
    --color-border:          var(--color-bg-dull-dark);
    --color-border-light:    rgba(255, 255, 255, 0.1);
    --color-nav-text:        var(--color-secondary);
  }
}
*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize (trimmed for Chrome / Safari / Edge / Firefox targets)
   Removed: IE 10-11-only rules, Edge-12-18-only rules,
   Chrome-<49 rules, moz-focusring (use :focus-visible instead).
--------------------------------------------- */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%; /* still required — iOS Safari */
}

body {
  margin: 0;
  /* Kept so the page never reflows between short and tall documents. With the
     native bar suppressed below it no longer reserves gutter width, but it still
     pins the scroll container. */
  overflow-y: scroll;
}

/* The native bar is suppressed and replaced by .aia-rail (Components → Custom
   scrollbar). Fine-pointer devices only: touch platforms draw transient overlay
   bars that cost no layout width, and a hover-reveal rail is unreachable without
   a cursor, so touch keeps its native affordance. */
@media (hover: hover) and (pointer: fine) {
  html {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;
  }
  body {
    scrollbar-width: none;
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
}

/* REMOVED: main { display: block } — IE 11 only */

/* REMOVED: h1 normalize — browser default matches spec; theme rule below overrides */

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible; /* Firefox <79 */
}

pre {
  font-family: var(--font-mono);
  font-size: 1em;
}

/* REMOVED: a { background-color: transparent } — IE 10 only */

abbr[title] {
  border-bottom: none;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

/* REMOVED: button, input { overflow: visible } — Edge 12-18 only */

button,
select {
  text-transform: none;
}

/* -webkit-appearance still needed for iOS Safari */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/* Firefox removes extra inner padding on buttons */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/* REMOVED: button:-moz-focusring — obsolete; use :focus-visible */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  color: inherit;
  padding: 0;
  white-space: normal;
}

/* REMOVED: progress { vertical-align: baseline } — Chrome 6+ legacy */
/* REMOVED: textarea { overflow: auto } — IE only */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield; /* Safari/Chrome */
  appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

/* REMOVED: details { display: block } — Edge 12-18 only */
/* REMOVED: summary { display: list-item } — Chrome <49 only */
/* REMOVED: template { display: none } — IE 11 only */

[hidden] {
  display: none;
}

/* Box sizing
--------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: 1rem;
  line-height: var(--line-height-normal);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
  font-family: var(--font-heading);
  font-weight: 100;
  line-height: var(--line-height-tight);
}

h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: 0.1rem;
}

h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  letter-spacing: 0.05rem;
}

h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: 0.025rem;
}

h4 {
  font-family: var(--font-base);
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  letter-spacing: 0.02rem;
  line-height: clamp(1.75rem, 3.5vw, 2.25rem);
}

h5 {
  font-size: 1.125rem;
}

h6 {
  font-size: 1rem;
}

p {
  margin-bottom: 1.5em;
  font-size: clamp(1rem, 2.25vw, 1.25rem);
  font-weight: 300;
  line-height: clamp(1.35rem, 4vw, 1.85rem);
}

dfn,
cite,
em,
i {
  font-style: italic;
}

blockquote {
  margin: 0 1.5em;
}

/* Quote-block paragraphs sit inset from the block's left edge/rule. */
.wp-block-quote p {
  padding-left: 1rem;
}

address {
  margin: 0 0 1.5em;
}

pre {
  background: var(--color-bg-dull);
  font-family: var(--font-mono);
  line-height: var(--line-height-normal);
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em;
}

code,
kbd,
tt,
var {
  font-family: var(--font-mono);
}

abbr,
acronym {
  border-bottom: 1px dotted var(--color-border);
  cursor: help;
}

mark,
ins {
  background: var(--color-bg-dull-accent);
  text-decoration: none;
}

big {
  font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
  background: var(--color-secondary);
}

hr {
  background-color: var(--color-border);
  border: 0;
  height: 1px;
  margin-bottom: 1.5em;
}

ul,
ol {
  margin: 0 0 1.5em 3em;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li > ul,
li > ol {
  margin-bottom: 0;
  margin-left: 1.5em;
}

dt {
  font-weight: 700;
}

dd {
  margin: 0 1.5em 1.5em;
}

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

figure {
  margin: 1em 0;
}

table {
  margin: 0 0 1.5em;
  width: 100%;
}

/* Links
--------------------------------------------- */
a {
  color: var(--color-link);
  font-weight: 500;
  transition: color var(--transition-fast);
}

a:hover,
a:focus,
a:active {
  color: var(--color-link-hover);
}

a:focus {
  outline: thin dotted;
}

a:hover,
a:active {
  outline: 0;
}

/* Forms
--------------------------------------------- */
input[type="button"],
input[type="reset"],
input[type="submit"] {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-dull);
  color: var(--color-text);
  line-height: 1;
  padding: 0.6em 1em 0.4em;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  background: var(--color-bg-dull-dark);
}

input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
  background: var(--color-bg-dull-dark);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
  color: var(--color-primary);
}

select {
  border: 1px solid var(--color-border);
}

textarea {
  width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/* Site Structure
--------------------------------------------- */
.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* NOTE: #primary uses an ID selector for layout — ideally a class.
   Requires template change to refactor further. */
#primary {
  margin-top: 100px;
  flex: 1;
}

/* Skip to content link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--color-primary);
  color: var(--color-secondary);
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  z-index: var(--z-top);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 0;
}

/* Container Queries
--------------------------------------------- */
.site,
.site-main,
.entry-content,
.site-footer {
  container-type: inline-size;
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation — Underscores toggle (menu-toggle not in templates;
   rules kept as WP core may inject the class via JS) */
.menu-toggle,
.main-navigation.toggled ul {
  display: block;
}

@media screen and (min-width: 37.5em) {
  .menu-toggle {
    display: none;
  }

  .main-navigation ul {
    display: flex;
  }
}

/* Post / page navigation */
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
  margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
  display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  text-align: end;
  flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */

/* .sticky is added dynamically by WP to sticky posts */
.sticky {
  display: block;
}

.post,
.page {
  margin: 0;
}

.updated:not(.published) {
  display: none;
}

.page-content,
.entry-content,
.entry-summary {
  margin: 1.5em 0 0;
}

.page-links {
  clear: both;
  margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
  word-wrap: break-word;
}

/* .bypostauthor is added dynamically by WP to comment author rows */
.bypostauthor {
  display: block;
}

/* Widgets
--------------------------------------------- */
/* .widget class is output by WP when widget areas are registered */
.widget {
  margin: 0 0 1.5em;
}

.widget select {
  max-width: 100%;
}

/* Media
--------------------------------------------- */
/* .wp-smiley is added by WP emoji handler */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

.custom-logo-link {
  display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
  margin-bottom: 1.5em;
  max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption .wp-caption-text {
  margin: 0.8075em 0;
}

.wp-caption-text {
  text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
  margin-bottom: 1.5em;
  display: grid;
  grid-gap: 1.5em;
}

.gallery-item {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.gallery-columns-2 {
  grid-template-columns: repeat(2, 1fr);
}
.gallery-columns-3 {
  grid-template-columns: repeat(3, 1fr);
}
.gallery-columns-4 {
  grid-template-columns: repeat(4, 1fr);
}
.gallery-columns-5 {
  grid-template-columns: repeat(5, 1fr);
}
.gallery-columns-6 {
  grid-template-columns: repeat(6, 1fr);
}

/* NOTE: .gallery-columns-7/8/9 not found in templates — removed */

/* .gallery-caption is WP shortcode output — keep as low-risk */
.gallery-caption {
  display: block;
}

/* Navigation Bar
--------------------------------------------- */
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  margin: 1rem 0;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2rem;
  z-index: var(--z-nav);
  background: var(--color-nav-bg);
}

.nav-left {
  position: absolute;
  left: 2rem;
  top: 50%;
  transform: translateY(-50%);
}

.nav-absolute-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.nav-logo img,
.custom-logo {
  height: 80px;
  width: auto;
  display: block;
}

.nav-right {
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
}

/* Menu Button
--------------------------------------------- */
.w__menu-button {
  width: 28px;
  height: 19px;
  border: none;
  /* !important justified: overrides browser UA button background */
  background: none !important;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  z-index: var(--z-menu-btn);
}

.w__menu-line {
  width: 100%;
  height: 2px;
  background-color: var(--color-nav-text);
  border-radius: 1px;
  transition:
    transform var(--transition-base),
    background-color var(--transition-base);
}

.w__menu-button.open .w__menu-line {
  background-color: var(--color-nav-text-open);
}

/* Contact CTA Button
--------------------------------------------- */
.nav-cta-link {
  background-color: var(--color-secondary);
  color: var(--color-nav-text);
  font-size: 1rem;
  text-decoration: none;
  font-weight: 500;
  border: 1px solid var(--color-nav-text);
  border-radius: var(--radius-md);
  padding: 0.75rem 1.5rem;
  transition:
    background-color var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base);
}

.nav-cta-link.open {
  background-color: transparent;
  color: var(--color-nav-text-open);
  border: 1px solid var(--color-nav-text-open);
}

.nav-cta-link:hover {
  background: var(--color-nav-text);
  color: var(--color-background);
}

.nav-cta-link.open:hover {
  background-color: var(--color-secondary);
  color: var(--color-nav-text);
}

/* Menu Drawer
--------------------------------------------- */
.w__menu-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--color-nav-drawer-bg);
  color: var(--color-nav-text-open);
  z-index: var(--z-drawer);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
  padding: 2rem;
}

.w__menu-drawer[style*="display: grid"] {
  pointer-events: all;
}

.menu-inner {
  background-color: var(--color-nav-drawer-bg);
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  padding-top: clamp(150px, 15vh, 350px);
  display: grid;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.menu-inner::-webkit-scrollbar {
  width: 6px;
}

.menu-inner::-webkit-scrollbar-track {
  background: transparent;
}

.menu-inner::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
  transition: background 0.2s ease;
}

.menu-inner::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}

/* Primary Menu Links
   NOTE: #primary-menu ID selector — output by WP nav walker;
   refactor to class requires template change.
--------------------------------------------- */

/* NOTE: specificity issue — ID selector used for visual styling.
   Consider adding class="primary-menu" to the nav walker. */
ul#primary-menu {
  width: 100%;
  display: block;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

#primary-menu > li {
  margin: 0;
  position: relative;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-nav-border);
  transition: all var(--transition-slow);
}

#primary-menu > li:hover {
  border-bottom-color: var(--color-nav-text-open);
}

#primary-menu > li > a {
  width: 100%;
  display: block;
  font-family: var(--font-heading);
  letter-spacing: 0.05rem;
  font-size: 2.5rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-nav-text-open);
  transition: color var(--transition-fast);
}

#primary-menu > li > a:hover {
  color: var(--color-accent);
}

/* Secondary Menu Links
--------------------------------------------- */
.nav-secondary-links {
  font-size: 2rem;
}

.nav-secondary-link,
.inline-link,
.gray-link {
  font-size: 1rem;
  text-decoration: none;
  color: var(--color-nav-secondary);
  transition: color var(--transition-fast);
}

.nav-secondary-link:hover,
.inline-link:hover {
  color: var(--color-nav-text-open);
}

/* Merged duplicate .menu-contact-block declarations */
.menu-contact-block {
  max-width: 400px;
  padding-bottom: 2rem;
}

.menu-contact-block > .footer-secondary-navigation > ul {
  font-family: var(--font-heading);
}

.menu-contact-block > a.email-link {
  font-size: 2rem;
  color: var(--color-accent-dark);
  font-family: var(--font-heading);
}

.menu-contact-block > a.email-link:hover {
  color: var(--color-accent-light);
}

.sec-menu-title,
.social-menu-title,
.address-content-title {
  font-size: 1rem;
  font-weight: 300;
  color: var(--color-secondary);
  opacity: 0.8;
  letter-spacing: 0.1rem;
}

/* Footer
--------------------------------------------- */
.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding-top: clamp(3rem, 6vw, 6rem);
  padding-left: clamp(1rem, 3vw, 4rem);
  padding-right: clamp(1rem, 3vw, 4rem);
  padding-bottom: 1.5rem;
  margin-top: auto;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  margin: 0 auto;
  padding-bottom: 2rem;
}

.footer-column.footer-info > .custom-logo-link > img.custom-logo {
  height: 150px;
  width: auto;
  object-fit: contain;
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  font-family: var(--font-heading);
  letter-spacing: 0.1rem;
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
}

.footer-column address {
  font-style: normal;
  line-height: 1.6;
}

.footer-address a,
.footer-menu-list a,
.secondary-menu-list a,
.social-links a {
  color: var(--color-secondary);
  opacity: 0.8;
  text-decoration: none;
  transition: all var(--transition-fast);
  font-size: 1.25rem;
  letter-spacing: 0.15rem;
}

.menu-contact-block .secondary-menu-list a {
  font-size: 1.75rem;
}

.footer-address a:hover,
.footer-menu-list a:hover,
.secondary-menu-list a:hover,
.social-links a:hover {
  opacity: 1;
}

.footer-menu-list,
.secondary-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Merged two duplicate .social-links declarations */
.social-links {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.social-links svg {
  transition: opacity var(--transition-fast);
}

.social-links a:hover svg {
  opacity: 0.7;
}

.site-info {
  display: flex;
  border-top: 1px solid var(--color-footer-border);
  padding-top: 0.75rem;
  text-align: center;
  color: var(--color-secondary);
  opacity: 0.5;
  font-size: 0.875rem;
  justify-content: space-between;
}

.site-info > div > div > a {
  color: var(--color-accent-dark);
}

.site-info .left-info {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.site-info > .left-info > div {
  padding-right: 1rem;
  font-size: 1rem;
}

.site-info .right-info {
  font-size: 1rem;
}

/* Custom scrollbar — "Ember" rail
   --------------------------------------------- */
/* Replaces the native scrollbar. Driven by js/aia-rail.js, which only ever
   READS scroll position and writes a transform — it never owns scrolling, so
   native keyboard/wheel/trackpad and any future Lenis instance keep working.

   Three constraints this markup exists to satisfy:
   1. position:fixed + zero layout participation, so revealing the rail can
      never reflow or shift the page. Nothing here affects document width.
   2. pointer-events are OFF until the rail is revealed, so the right-hand
      12px strip does not swallow clicks on content underneath it at rest.
   3. hidden entirely while the drawer is open — the drawer overlays the page
      and locks scrolling, so a scroll affordance is both wrong and visually
      collides with the panel.
   4. stacked above the sticky header (z 300) so the rail is continuous from the
      top of the viewport to the bottom, crossing the eyebrow and main bar
      rather than disappearing behind them. */
.aia-rail {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--aia-rail-w);
  z-index: var(--aia-rail-z);
  background: var(--aia-rail-bg);
  border-left: 1px solid var(--aia-rail-line);
  /* hidden at rest — revealed by pointer proximity to the right edge */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s var(--aia-ease, ease);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* revealed: cursor is inside the hot zone, or the thumb is being dragged */
.aia-rail.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* nothing to scroll — never show, never intercept */
.aia-rail.is-idle {
  opacity: 0 !important;
  pointer-events: none !important;
}

.aia-rail__thumb {
  position: absolute;
  top: 0;
  left: var(--aia-rail-thumb-inset);
  right: var(--aia-rail-thumb-inset);
  height: var(--aia-rail-thumb-min);
  min-height: var(--aia-rail-thumb-min);
  background: var(--aia-rail-thumb);
  border: 1px solid var(--aia-rail-thumb-stroke);
  border-radius: 99px;
  cursor: grab;
  transition:
    background 0.18s ease,
    border-color 0.18s ease;
  will-change: transform;
}

.aia-rail:hover .aia-rail__thumb,
.aia-rail.is-dragging .aia-rail__thumb {
  background: var(--aia-rail-thumb-hover);
  border-color: var(--aia-rail-thumb-stroke-hover);
}

.aia-rail.is-dragging .aia-rail__thumb {
  cursor: grabbing;
}

/* Drawer open: the page is overlaid and scroll-locked. */
body.aia-menu-open .aia-rail,
body.aia-no-scroll .aia-rail {
  opacity: 0;
  pointer-events: none;
}

/* Touch / coarse pointer keeps the native bar, so the rail must not render.
   Mirrors the suppression media query in Generic — keep the two in sync. */
@media not all and (hover: hover) and (pointer: fine) {
  .aia-rail {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aia-rail,
  .aia-rail__thumb {
    transition: none;
  }
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
  display: none;
}

.infinity-end.neverending .site-footer {
  display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */
/* !important justified: these are safety overrides for screen reader
   hide/show patterns that must not be trumped by component styles. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: var(--color-bg-dull);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 2px 2px var(--overlay-dark);
  clip: auto !important;
  clip-path: none;
  color: var(--color-link);
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: var(--z-top);
}

/* ID used for skip-link target — acceptable accessibility pattern */
#primary[tabindex="-1"]:focus {
  outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {
  float: left;
  margin-right: 1.5em;
  margin-bottom: 1.5em;
}

.alignright {
  float: right;
  margin-left: 1.5em;
  margin-bottom: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5em;
}

/* WordPress Core Block Alignments
--------------------------------------------- */
.alignwide {
  max-width: var(--content-wide);
  margin-left: auto;
  margin-right: auto;
}

.alignfull {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/*--------------------------------------------------------------
# Block & Component Overrides
--------------------------------------------------------------*/

/* Block defaults — every top-level block gets consistent vertical rhythm.
   Desktop: 100px · Mobile (≤768px): 75px via --block-spacing swap.
--------------------------------------------- */
.entry-content > * {
  margin-bottom: var(--block-spacing);
}
.entry-content > *:last-child {
  margin-bottom: 0;
}
.entry-content > .has-background {
  padding-top: var(--block-spacing);
  padding-bottom: var(--block-spacing);
}

.wp-block-matisse-content-grid-item.content-grid-item,
.wp-block-matisse-team-grid-item.team-member-item,
.newsletter-block.wp-block-matisse-newsletter {
  margin-bottom: 0;
}

/* Hero
--------------------------------------------- */
.hero-media-wrapper {
  padding: clamp(1rem, 2vw, 2rem) clamp(1rem, 2vw, 2rem) clamp(1rem, 2vw, 2rem)
    0;
}

/* Glass card treatment shared by hero content, cards, sidebars */
.hero-content {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--card-border-radius);
  border: var(--card-border);
  box-shadow: var(--card-shadow);
  text-align: left;
  align-items: baseline;
  margin-left: clamp(1rem, 2vw, 2rem);
  margin-top: auto;
  max-width: var(--container-md);
}

h1.hero-heading {
  font-size: clamp(2.25rem, 5vw, 4rem);
  letter-spacing: 0.25rem;
}

/* Hero slider info container — desktop-only. Below 992px the block's own
   band layout (blocks/src/hero-slider/style.scss) takes over; these white
   info-box overrides must not leak into it. */
@media (min-width: 992px) {
  .wp-block-matisse-hero-slider.hero-slider .info-container {
    width: 500px;
    margin: 30px;
    padding: 20px;
    background: #fff;
    border-radius: 0;
    border: 1px solid #000;
    box-shadow: none;
    text-align: left;
    align-items: baseline;
    margin-top: auto;
  }

  .info-container .progress-bar-wrapper {
    margin: 20px 20px 40px 20px;
    background-color: #000;
  }

  .info-container .project-title {
    margin-top: 1.25rem;
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    letter-spacing: 0.05rem;
    color: #000;
  }

  .info-container .project-title a {
    color: #000;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
  }

  .info-container .project-title a:hover {
    color: var(--color-link-hover, #e53e3e);
  }

  .info-container .project-tags {
    margin-top: 10px;
    font-weight: 300;
    font-family: var(--font-base);
    color: #000;
  }

  .info-container .project-meta,
  .info-container .project-meta div {
    color: #000;
  }

  .info-container .hero-pagination {
    font-family: var(--font-base);
    font-weight: 300;
    color: #000;
  }

  /* !important needed — Gutenberg block renders inline height */
  .hero-slider {
    height: calc(100dvh - 180px) !important;
  }
}

/* Hero button — !important fights block editor inline styles */
.hero-button.hero-button-outline {
  color: var(--color-secondary) !important;
  border-radius: 0 !important;
  font-family: var(--font-heading) !important;
  font-size: 1.25rem;
  letter-spacing: 0.05rem;
}

/* Mist section modifier (formerly "dull" sage band)
--------------------------------------------- */
/* !important overrides Gutenberg block background-color attribute */
.dull {
  background-color: var(--color-bg-dull) !important; /* now AIA Mist */
  padding: clamp(5rem, 10vw, 10rem) 0 !important;
}

/* Mist is near-white, so reversed light text would vanish — use Ink. */
.dull h2 {
  color: var(--aia-ink);
  opacity: 0.85;
}

/* Testimonials slider
--------------------------------------------- */
.testimonials-slider-block .swiper-scrollbar {
  background-color: rgba(255, 255, 255, 0.2);
}

.testimonials-slider-block .swiper-scrollbar .swiper-scrollbar-drag {
  background-color: var(--color-link-hover);
  opacity: 1;
}

/* SPECIFICITY HOT SPOT: 4-level chain + !important — block CSS needs refactoring at source */
.wp-block-matisse-testimonials-slider.testimonials-slider-block.dull
  h2.block-title {
  color: var(--color-link) !important;
}

/* SPECIFICITY HOT SPOT: 4-level chain — block CSS needs refactoring at source */
.testimonials-swiper .swiper-wrapper .swiper-slide .testimonial-card {
  color: var(--color-text-muted);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--card-border-radius);
  border: var(--card-border);
  box-shadow: var(--card-shadow);
}

.testimonials-slider-block .testimonial-card .quote-icon {
  color: var(--color-link) !important;
  opacity: 0.9;
}

.testimonials-slider-block .testimonial-card .testimonial-text {
  color: var(--color-primary-dark) !important;
  opacity: 0.75;
  letter-spacing: 0.05rem;
}

/* SPECIFICITY HOT SPOT: 5-level chain — candidate for block-level refactor */
.testimonials-slider-block
  .testimonial-card
  .testimonial-author
  .author-info
  .author-name {
  color: var(--color-primary-dark) !important;
  opacity: 0.6;
}

.testimonials-slider-block .testimonial-author {
  border-top: 2px solid var(--color-text-muted) !important;
}

.testimonials-slider-block .author-info a.project-link {
  text-align: left;
  padding-left: 0;
  background: none !important;
  backdrop-filter: none !important;
  border: none;
  color: var(--color-link) !important;
}

/* Content grid / Portfolio
--------------------------------------------- */
/* Dotted background decorator */
.content-grid-block.dotted-bg {
  position: relative;
  overflow: hidden;
}

.content-grid-block.dotted-bg::before {
  content: "";
  position: absolute;
  bottom: calc(-1 * var(--block-spacing));
  left: 0;
  width: 100%;
  height: calc(var(--block-spacing) + 50%);
  background-image: radial-gradient(
    var(--color-bg-dull) 2px,
    transparent 0.5px
  );
  background-size: 20px 20px;
  pointer-events: none;
  z-index: var(--z-below);
}

.content-grid-block.dotted-bg .content-grid {
  position: relative;
  z-index: var(--z-above);
}

/* Grid container */
.content-grid-block {
  width: 100%;
  margin-inline: auto;
}

/* Scoped to the portfolio template's grid only — the matisse/content-grid
   block ships its own layout (blocks/build/style-index.css) and this
   stylesheet loads after it, so an unscoped rule here would override the
   block's ≤1600px overflow-row mode. */
.content-grid-block .content-grid.architecture-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 2vw, 2.5rem);
}

/* Flattened from 5-level chain: .content-grid-block .content-grid .content-grid-item .item-* */
/* Merged two duplicate .content-grid-item declarations */
/* No resting box-shadow on purpose: the grid cell's design language is
   border-only at rest with a hard 4px 4px hover lift (see the content-grid
   block styles). The soft --card-shadow glow that used to sit here reached
   every cell from this bare selector — including cells whose content draws
   its own chrome — and read as a second, softer card behind the real one. */
.content-grid-item {
  padding-bottom: 2rem;
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur-light);
  border-radius: var(--card-border-radius);
  border: var(--card-border);
  overflow: hidden;
  transition: all var(--transition-base);
}

/* Portfolio-specific grid item (PHP template, no glass treatment) */
.content-grid.architecture-grid > .content-grid-item.architecture-item {
  padding: 0;
  background: var(--color-secondary-light);
  border: 1px solid var(--color-secondary-dark);
  border-radius: var(--radius-lg);
}

.content-grid-item.is-hidden {
  display: none;
}

.content-grid-item:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.content-grid-item .item-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.content-grid-item .item-image {
  width: 100%;
  height: 250px;
  overflow: hidden;
  background: var(--color-secondary-light);
  position: relative;
}

.content-grid-item .item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
  display: block;
}

.content-grid-item:hover .item-image img {
  transform: scale(1.05);
}

.content-grid-item .item-content {
  padding: 1.5rem;
}

.content-grid-item .item-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--color-primary-dark);
  line-height: 1.3;
}

.content-grid-item .item-meta {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 14px;
  color: var(--color-text-muted);
}

.content-grid-item .item-meta span {
  display: block;
}

.content-grid-item .item-meta span.meta-type {
  font-weight: 600;
  color: var(--color-primary-dark);
  text-transform: capitalize;
}

.content-grid-item .view-link {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color var(--transition-base);
}

.content-grid-item:hover .view-link {
  color: var(--color-primary-dark);
}

/* Portfolio filter controls */
.filter-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 2rem clamp(1rem, 3vw, 4rem);
  margin-bottom: 2rem;
}

.filter-controls .filter-btn {
  background: transparent;
  border: 1px solid var(--color-secondary-dark);
  padding: 0.75rem 1.5rem;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-base);
  border-radius: var(--radius-sm);
}

.filter-controls .filter-btn:hover {
  border-color: var(--color-primary-light);
  color: var(--color-primary-light);
}

.filter-controls .filter-btn.active {
  background: var(--color-primary-dark);
  color: var(--color-secondary);
  border-color: var(--color-primary-dark);
}

.architecture-portfolio {
  width: 100%;
  margin: 0 auto;
  padding: 2rem 0 10rem 0;
}

.portfolio-header {
  padding-left: clamp(1rem, 3vw, 4rem);
  max-width: var(--container-md);
}

.portfolio-title {
  text-align: center;
}

/* Swiper / slider
--------------------------------------------- */
.wp-block-matisse-swiper-slider-base.swiper-wrapper-outer {
  min-width: 100%;
  overflow: hidden;
  background-color: var(--color-bg-dull);
}

.swiper .swiper-pagination-current {
  padding-bottom: 14px;
  padding-right: 32px;
}

.swiper .swiper-pagination-total {
  padding-top: 10px;
  /* !important needed — Swiper JS overrides this with inline style */
  padding-left: 40px !important;
}

.swiper .swiper-pagination,
.swiper .swiper-pagination-fraction {
  /* !important needed — Swiper JS inline style */
  top: 1rem !important;
}

/* Swiper navigation buttons — all !important needed to override
   Swiper's own highly-specific CSS and JS inline styles */
.swiper-button-prev,
.swiper-button-next {
  background: var(--color-link) !important;
  border: none !important;
  padding: 12px 16px !important;
  cursor: pointer !important;
  transition: background var(--transition-base) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: var(--color-link-hover) !important;
}

.swiper-button-prev:disabled,
.swiper-button-next:disabled,
.swiper-button-disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  background: var(--color-link) !important;
}

.swiper-button-prev:disabled:hover,
.swiper-button-next:disabled:hover,
.swiper-button-disabled:hover {
  background: var(--color-link) !important;
}

.swiper-navigation-icon {
  color: var(--color-secondary) !important;
  fill: var(--color-secondary) !important;
  display: block !important;
}

/* Secondary colour scheme (dark swiper buttons on light blocks) */
.swiper .swiper-button-wrapper .swiper-button-next,
.swiper .swiper-button-wrapper .swiper-button-prev,
.secondary-color-scheme > .swiper .slider-expand-btn,
.swiper-pagination-fraction {
  color: var(--color-secondary) !important;
  background-color: transparent !important;
}

/* Newsletter
--------------------------------------------- */
.newsletter-container {
  background-color: var(--glass-bg);
  background-image: url(../../uploads/2025/10/duotone.jpg);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--card-border-radius);
  border: var(--card-border);
  /* !important overrides block inline box-shadow attribute */
  box-shadow: var(--glass-shadow-heavy) !important;
  padding: var(--block-spacing);
}

/* CTA block
--------------------------------------------- */
/* !important overrides block margin set via Gutenberg spacing controls */
.wp-block-matisse-cta.cta-block {
  margin-top: 0 !important;
}

.cta-content {
  /* !important overrides block inline background attribute */
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur-medium);
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
  padding: clamp(3rem, 2vw, 5rem) 2rem;
}

.verdant-btn a.cta-button {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

/* !important overrides hover state from block CSS */
.verdant-btn a.cta-button:hover {
  background-color: var(--color-link-hover) !important;
  opacity: 1;
}

/* Contact form (luxury)
--------------------------------------------- */
.luxury-form-wrapper {
  max-width: 720px;
  margin: 0 auto;
  padding: 60px 40px;
  background: var(--color-secondary-light);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-form);
}

.luxury-form-wrapper input[type="text"],
.luxury-form-wrapper input[type="email"],
.luxury-form-wrapper input[type="tel"],
.luxury-form-wrapper select,
.luxury-form-wrapper textarea {
  width: 100%;
  padding: 18px 20px;
  margin-bottom: 24px;
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-primary);
  background: var(--color-secondary-light);
  border: 1px solid var(--color-secondary-dark);
  border-radius: var(--radius-xs);
  transition: all var(--transition-form);
  -webkit-appearance: none; /* Safari / iOS */
  -moz-appearance: none; /* Firefox */
  appearance: none;
}

.luxury-form-wrapper input::placeholder,
.luxury-form-wrapper textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
  font-weight: 300;
}

.luxury-form-wrapper input:focus,
.luxury-form-wrapper select:focus,
.luxury-form-wrapper textarea:focus {
  outline: none;
  background: var(--color-secondary-light);
  border-color: var(--color-form-accent);
  box-shadow: 0 0 0 3px var(--color-form-accent-alpha);
}

.luxury-form-wrapper textarea {
  min-height: 160px;
  resize: vertical;
  font-family: inherit;
}

.luxury-form-wrapper select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231a1a1a' d='M1.41 0L6 4.59L10.59 0L12 1.41l-6 6l-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 12px;
  padding-right: 50px;
}

.luxury-form-wrapper select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232d5f3f' d='M1.41 0L6 4.59L10.59 0L12 1.41l-6 6l-6-6z'/%3E%3C/svg%3E");
}

.luxury-form-wrapper .wpcf7-radio {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.luxury-form-wrapper .wpcf7-list-item {
  margin: 0;
  display: inline-flex;
  align-items: center;
}

.luxury-form-wrapper input[type="radio"] {
  width: 20px;
  height: 20px;
  margin: 0 10px 0 0;
  cursor: pointer;
  accent-color: var(--color-form-accent);
}

.luxury-form-wrapper .wpcf7-list-item-label {
  font-size: 15px;
  font-weight: 400;
  color: var(--color-primary);
  cursor: pointer;
  user-select: none;
}

/* Honeypot field — all !important justified to ensure it stays hidden */
.luxury-form-wrapper .website-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.luxury-form-wrapper .wpcf7-acceptance {
  margin: 32px 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.luxury-form-wrapper .wpcf7-acceptance input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 2px 0 0 0;
  cursor: pointer;
  accent-color: var(--color-form-accent);
  flex-shrink: 0;
}

.luxury-form-wrapper .wpcf7-acceptance .wpcf7-list-item-label {
  font-size: 14px;
  color: var(--color-text-light);
  line-height: 1.6;
}

.luxury-form-wrapper .wpcf7-acceptance a {
  color: var(--color-form-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(45, 95, 63, 0.3);
  transition: border-color var(--transition-fast);
}

.luxury-form-wrapper .wpcf7-acceptance a:hover {
  border-bottom-color: var(--color-form-accent);
}

.luxury-form-wrapper .luxury-submit {
  width: 100%;
  padding: 20px 40px;
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05rem;
  color: var(--color-secondary);
  background: var(--color-form-accent);
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all var(--transition-form);
  box-shadow: 0 4px 16px var(--color-form-accent-shadow);
}

.luxury-form-wrapper .luxury-submit:hover {
  background: var(--color-form-accent-hover);
  box-shadow: 0 6px 24px var(--color-form-accent-shadow-lg);
  transform: translateY(-2px);
}

.luxury-form-wrapper .luxury-submit:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px var(--color-form-accent-shadow);
}

.luxury-form-wrapper .wpcf7-not-valid-tip {
  font-size: 13px;
  color: var(--color-error);
  margin-top: -18px;
  margin-bottom: 16px;
  display: block;
}

.luxury-form-wrapper .wpcf7-validation-errors {
  padding: 16px 20px;
  margin: 24px 0 0;
  background: var(--color-warning-bg);
  border-left: 4px solid var(--color-warning-border);
  border-radius: var(--radius-xs);
  color: var(--color-warning-text);
  font-size: 14px;
}

.luxury-form-wrapper .wpcf7-mail-sent-ok {
  padding: 16px 20px;
  margin: 24px 0 0;
  background: var(--color-success-bg);
  border-left: 4px solid var(--color-success-border);
  border-radius: var(--radius-xs);
  color: var(--color-success-text);
  font-size: 14px;
}

/* Blog archive / grid
--------------------------------------------- */
.blog-grid {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 3rem;
  margin: 0 auto;
  max-width: var(--container-lg);
  padding-bottom: clamp(5rem, 10vw, 10rem);
  padding-left: 0;
  padding-right: 0;
}

.blog-main {
  width: 100%;
}

.page-header {
  margin-bottom: 3rem;
}

.page-header .page-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--color-primary-dark);
  margin: 0 0 1rem 0;
}

.archive-description {
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.6;
}

.blog-posts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}

/* Merged two duplicate .blog-card declarations */
.blog-card {
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--card-border-radius);
  border: var(--card-border);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: all var(--transition-base);
  display: grid;
  gap: 0;
  max-width: 100%;
}

.blog-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-image-link {
  display: block;
  text-decoration: none;
}

/* Override from second declaration */
.blog-card > .card-image-link > .card-image {
  width: 100%;
  height: auto;
  min-height: 2px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--color-secondary-light);
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.blog-card:hover .card-image img {
  transform: scale(1.05);
}

.card-content {
  padding: 2rem;
  display: flex;
  flex-direction: column;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 14px;
  color: var(--color-text-muted);
}

.card-date {
  font-weight: 500;
}

.card-separator {
  color: var(--color-secondary-dark);
}

.card-category {
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-base);
}

.card-category:hover {
  color: var(--color-primary-dark);
}

.card-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 1rem 0;
}

.card-title a {
  color: var(--color-primary-dark);
  text-decoration: none;
  transition: color var(--transition-base);
}

.card-title a:hover {
  color: var(--color-text-muted);
}

.card-excerpt {
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.tag-pill {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  background: var(--color-secondary-light);
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: all var(--transition-base);
}

.tag-pill:hover {
  background: var(--color-primary-dark);
  color: var(--color-secondary);
}

.card-read-more {
  display: inline-block;
  color: var(--color-primary-dark);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: all var(--transition-base);
  margin-top: auto;
}

.card-read-more:hover {
  color: var(--color-text-muted);
  transform: translateX(4px);
}

/* Sidebar */
.blog-sidebar {
  width: 100%;
  margin-top: 7rem;
}

.single-sidebar .widget_block .wp-block-latest-posts__list li,
.blog-sidebar .widget_block .wp-block-latest-posts__list li {
  margin-bottom: 1rem;
}

/* Merged two duplicate .sidebar-sticky declarations
   Removed erroneous !important flags (text-align, align-items,
   margin-left, margin-top, max-width) copied from .hero-content. */
.sidebar-sticky {
  position: sticky;
  top: 2rem;
  padding: 2rem;
  border-radius: var(--card-border-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: all var(--transition-base);
  display: grid;
  gap: 0;
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  border: var(--card-border);
}

.sidebar-section {
  background: var(--color-secondary-light);
  padding: 2rem;
  border-radius: var(--radius-xl);
  margin-bottom: 2rem;
  box-shadow: var(--shadow-xs);
}

.sidebar-section:last-child {
  margin-bottom: 0;
}

.sidebar-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 1.5rem 0;
  color: var(--color-primary-dark);
}

.sidebar-section p {
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

.sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-list li {
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-secondary-dark);
}

.sidebar-list li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.sidebar-list a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 14px;
  transition: color var(--transition-base);
}

.sidebar-list a:hover {
  color: var(--color-primary-dark);
}

.sidebar-list .count {
  color: var(--color-text-muted);
  font-size: 13px;
  margin-left: 0.5rem;
}

.sidebar-posts li {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sidebar-posts .post-date {
  font-size: 12px;
  color: var(--color-text-muted);
}

.sidebar-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Merged .sidebar-tag-pill — identical to .tag-pill, share token */
.sidebar-tag-pill {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  background: var(--color-secondary-light);
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: all var(--transition-base);
}

.sidebar-tag-pill:hover {
  background: var(--color-primary-dark);
  color: var(--color-secondary);
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 3rem;
}

.pagination .page-numbers {
  display: inline-block;
  padding: 0.75rem 1rem;
  background: var(--color-secondary-light);
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius-lg);
  font-weight: 500;
  transition: all var(--transition-base);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
  background: var(--color-primary-dark);
  color: var(--color-secondary);
}

.pagination .dots {
  padding: 0.75rem 0.5rem;
  color: var(--color-text-muted);
}

.wp-block-latest-posts.wp-block-latest-posts__list {
  margin-left: 0;
}

/* Blog single
--------------------------------------------- */

/* ID + class chain — kept as-is (requires ID in PHP template) */
#primary .feature-image .post-thumbnail img {
  height: auto;
  max-width: 100%;
  object-fit: cover;
  width: 100%;
  max-height: 80vh;
}

/* SPECIFICITY HOT SPOT: 3-level chain for blog content — intentional
   scoping to prevent bleeds into other entry-content contexts. */
.post.type-post .entry-content h1,
.post.type-post .entry-content h2,
.post.type-post .entry-content h3,
.post.type-post .entry-content h4,
.post.type-post .entry-content h5,
.post.type-post .entry-content h6 {
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--color-primary-dark);
  line-height: 1.3;
}

.post.type-post .entry-content h1 {
  font-size: clamp(2rem, 4vw, 3rem);
}
.post.type-post .entry-content h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}
.post.type-post .entry-content h3 {
  font-size: 28px;
}
.post.type-post .entry-content h4 {
  font-size: 24px;
}
.post.type-post .entry-content h5 {
  font-size: 20px;
}
.post.type-post .entry-content h6 {
  font-size: 18px;
}

.post.type-post .entry-content p {
  margin-bottom: 1.5rem;
  line-height: 1.7;
  color: var(--color-primary-light);
  font-size: 18px;
}

.post.type-post .entry-content p:last-child {
  margin-bottom: 0;
}

/* Blog links use a distinct blue — separate from brand green links */
.post.type-post .entry-content a {
  color: var(--color-blog-link);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.post.type-post .entry-content a:hover {
  color: var(--color-blog-link-hover);
}

.post.type-post .entry-content strong {
  font-weight: 700;
}

.post.type-post .entry-content em {
  font-style: italic;
}

.post.type-post .entry-content ul,
.post.type-post .entry-content ol,
.sticky-section-container .sticky-content ul {
  margin-left: 0;
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}

.post.type-post .entry-content ul li,
.post.type-post .entry-content ol li {
  margin-bottom: 0.15rem;
  line-height: 1.7;
  color: var(--color-primary-light);
  font-size: 18px;
}

.post.type-post .entry-content ul {
  list-style-type: disc;
}

.post.type-post .entry-content ol {
  list-style-type: decimal;
}

/* ==========================================================
 * CONTENT LISTS — sitewide house style: dash rules, not bullets
 * (per the join-benefits-section mockup). Any list dropped into
 * entry content (pages, posts, block bodies like the pillar
 * columns) gets this treatment without per-block CSS. Targets
 * core list blocks and bare uls only; :where() keeps specificity
 * at zero so any component that styles its own list still wins.
 * The :is() covers every prose context that renders post content:
 * .entry-content (pages/posts), .aia-entity__desc (committee/
 * program/competition/spotlight singles), .aia-program__intro
 * (Program Landing hero) — all classes, so specificity is
 * unchanged for .entry-content pages.
 * ========================================================== */
:is(.entry-content, .aia-entity__desc, .aia-program__intro)
  :where(ul.wp-block-list, ol.wp-block-list, ul:not([class]), ol:not([class])) {
  margin: 0 0 1.5rem;
}

:is(.entry-content, .aia-entity__desc, .aia-program__intro)
  :where(ul.wp-block-list, ul:not([class])) {
  list-style: none;
  padding-left: 0;
}

:is(.entry-content, .aia-entity__desc, .aia-program__intro)
  :where(ol.wp-block-list, ol:not([class])) {
  list-style: decimal;
  padding-left: 1.35rem;
}

:is(.entry-content, .aia-entity__desc, .aia-program__intro)
  :where(ul.wp-block-list, ol.wp-block-list, ul:not([class]), ol:not([class]))
  li {
  margin-bottom: 0.9em;
  line-height: 1.6;
}

:is(.entry-content, .aia-entity__desc, .aia-program__intro)
  :where(ul.wp-block-list, ol.wp-block-list, ul:not([class]), ol:not([class]))
  li:last-child {
  margin-bottom: 0;
}

/* The house dash marker */
:is(.entry-content, .aia-entity__desc, .aia-program__intro)
  :where(ul.wp-block-list, ul:not([class])) li {
  position: relative;
  padding-left: 22px;
}

:is(.entry-content, .aia-entity__desc, .aia-program__intro)
  :where(ul.wp-block-list, ul:not([class])) li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--aia-red, #fa4132);
}

:is(.entry-content, .aia-entity__desc, .aia-program__intro)
  :where(ol.wp-block-list, ol:not([class])) li::marker {
  color: var(--aia-red, #fa4132);
}

/* Nested lists sit tight under their parent item */
:is(.entry-content, .aia-entity__desc, .aia-program__intro)
  :where(ul.wp-block-list, ol.wp-block-list, ul:not([class]), ol:not([class]))
  li
  :where(ul, ol) {
  margin: 0.9em 0 0;
}

.post.type-post .entry-content blockquote {
  border-left: 4px solid var(--color-blog-link);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--color-text-muted);
}

.post.type-post .entry-content code {
  background: var(--color-secondary-light);
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.post.type-post .entry-content pre {
  background: var(--color-secondary-light);
  padding: 1rem;
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

.post.type-post .entry-content pre code {
  background: none;
  padding: 0;
}

.post.type-post .entry-content .wp-block-image {
  margin-bottom: 1.5rem;
}

.post.type-post .entry-content .wp-block-image img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.post.type-post .entry-content .wp-block-video {
  margin-bottom: 1.5rem;
}

.post.type-post .entry-content .wp-block-video video {
  max-width: 100%;
  border-radius: var(--radius-md);
}

.post.type-post .entry-content .wp-block-separator {
  margin: 2rem 0;
  border: none;
  border-top: 2px solid var(--color-secondary-dark);
}

.post.type-post .entry-content .wp-block-quote {
  margin: 2rem 0;
}

.post.type-post .entry-content .wp-block-table {
  margin-bottom: 1.5rem;
}

.post.type-post .entry-content .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
}

.post.type-post .entry-content .wp-block-table table th,
.post.type-post .entry-content .wp-block-table table td {
  padding: 0.75rem;
  border: 1px solid var(--color-secondary-dark);
  text-align: left;
}

.post.type-post .entry-content .wp-block-table table th {
  background: var(--color-secondary-light);
  font-weight: 700;
}

.post.type-post .entry-content .wp-block-buttons {
  margin-bottom: 1.5rem;
}

.post.type-post .entry-content .wp-block-buttons .wp-block-button {
  margin-right: 1rem;
  margin-bottom: 1rem;
}

/* SPECIFICITY HOT SPOT: 5-level chain — Gutenberg block scoping */
.post.type-post
  .entry-content
  .wp-block-buttons
  .wp-block-button
  .wp-block-button__link {
  background: var(--color-blog-link);
  color: var(--color-secondary);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  display: inline-block;
  transition: background var(--transition-fast);
}

.post.type-post
  .entry-content
  .wp-block-buttons
  .wp-block-button
  .wp-block-button__link:hover {
  background: var(--color-blog-link-hover);
}

.post.type-post .entry-content .wp-block-html {
  margin-bottom: 1.5rem;
}

.post.type-post .entry-content > * {
  margin-bottom: 1.5rem;
}

.post.type-post .entry-content > *:last-child {
  margin-bottom: 0;
}

/* Single post layout */
/* Fixed: removed duplicate max-width/margin, fixed clamp() syntax error */
.single-grid {
  display: grid;
  max-width: var(--container-lg);
  margin: 0 auto;
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
  padding-bottom: clamp(5rem, 10vw, 10rem);
  position: relative;
  margin-bottom: 4rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.single-grid.fourofour-adj {
  grid-template-columns: 1fr;
  max-width: var(--container-md);
}

.fourofour-adj {
  padding-top: 6rem;
}

.single-grid > .single-blog {
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}

.single-grid > .single-sidebar {
  width: 100%;
  margin-top: 2rem;
}

.single-sidebar > aside {
  position: sticky;
  top: 2rem;
  padding: 2rem;
  border-radius: var(--card-border-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: all var(--transition-base);
  display: grid;
  gap: 0;
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  border: var(--card-border);
}

/* Portfolio single
--------------------------------------------- */
.site-portfolio-single .entry-content {
  width: 100%;
}

.site-portfolio-single .entry-content .project-info,
.site-portfolio-single .entry-content .project-description,
.site-portfolio-single .entry-content .wp-block-matisse-dual-image,
.site-portfolio-single .entry-content .wp-block-image.size-large {
  max-width: var(--container-xl);
  margin: 0 auto;
  border-radius: var(--radius-hero);
}

.site-portfolio-single .entry-content .project-description {
  justify-items: right;
}

.site-portfolio-single .entry-content p,
.site-portfolio-single .entry-content .split-content-block .split-text p {
  font-weight: 300;
  font-size: 1.5rem;
}

.site-portfolio-single .entry-content .project-description .description-wrap {
  width: 75%;
  margin-right: 0;
  padding-bottom: 4rem;
}

.site-portfolio-single .entry-content .project-description .description-wrap p {
  font-size: clamp(1.25rem, 2.125vw, 1.75rem);
  font-weight: 300;
}

.site-portfolio-single
  .entry-content
  .project-description
  .description-wrap
  ul {
  margin-left: 0;
  padding-left: 1.5rem;
  letter-spacing: 0.05rem;
  font-weight: 300;
  font-size: clamp(1rem, 2.125vw, 1.5rem);
}

.project-description .description-wrap ul li {
  margin-bottom: 0.75rem;
}

.site-portfolio-single .entry-content .project-info {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  font-size: 1.25rem;
}

.site-portfolio-single .entry-content .project-info div {
  padding-bottom: 1rem;
}

.site-portfolio-single .entry-content .project-info,
.site-portfolio-single .entry-content .project-description,
.site-portfolio-single .entry-content .wp-block-image.size-large {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* !important needed — Gutenberg renders inline width on images */
.site-portfolio-single .entry-content .wp-block-image.size-large img {
  width: 100% !important;
  border-radius: var(--radius-md);
}

/* Portfolio listings / homepage updates
--------------------------------------------- */
.homepage_updates > .latest_update {
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur-light);
  border-radius: 0;
  border: 1px solid #d1d5db;
  box-shadow: none;
}

/* Legibility constraints
--------------------------------------------- */
.sticky-content p,
.split-text p {
  max-width: 100%;
}

h2.wp-block-heading {
  max-width: 1000px;
}

h4.wp-block-heading {
  max-width: 750px;
}

.has-text-align-center {
  justify-self: center;
}

/* Contact page info layout
--------------------------------------------- */
.contact-info {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 2rem;
}

.contact-icon {
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.contact-content {
  flex: 1;
}

/* Contact info grid (contextual override of content grid styles) */
.contact-info-grid {
  margin: 0 auto;
  padding-left: clamp(1rem, 3vw, 4rem);
  padding-right: clamp(1rem, 3vw, 4rem);
  width: 100%;
  max-width: var(--container-2xl);
}

.contact-info-grid .content-grid .content-grid-item {
  padding: 0 1rem;
  background: transparent;
  border: none;
  box-shadow: none;
}

.contact-info-grid .content-grid .content-grid-item .item-content {
  padding: 0;
}

.contact-info-grid .content-grid .content-grid-item .item-content h3 {
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--color-text-muted);
  line-height: 3rem;
}

/* WordPress columns block used as split layout */
.wp-block-columns.split-container-col-2.is-layout-flex.wp-block-columns-is-layout-flex {
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr 1fr;
  margin: 0 auto;
  max-width: var(--container-xl);
  padding: 0 1.5rem;
}

/* Sticky section layout */
.img-adj-sectr .media-wrapper {
  margin-top: 3rem;
}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/

/* Tablet and below */
@media (max-width: 900px) {
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile (768px) — navigation, footer, blocks */
@media (max-width: 768px) {
  :root {
    --block-spacing: var(--block-spacing-mobile);
  }

  /* Override inline 100px spacing baked in from the editor */
  .entry-content > .has-background[style*="padding-top"] {
    padding-top: var(--block-spacing-mobile) !important;
    padding-bottom: var(--block-spacing-mobile) !important;
  }
  .entry-content > [style*="margin-bottom"] {
    margin-bottom: var(--block-spacing-mobile) !important;
  }

  .nav-bar {
    padding: 0 1rem;
  }

  .nav-left {
    left: 1rem;
  }

  .nav-right {
    right: 1rem;
  }

  #primary-menu > li > a {
    font-size: 2rem;
  }

  .nav-cta-link {
    font-size: 14px;
    padding: 0.4rem 0.9rem;
  }

  .w__menu-drawer {
    padding: 1rem;
  }

  .menu-inner {
    grid-template-columns: 1fr;
  }

  .site-info .left-info {
    max-width: 60%;
  }

  .site-info .left-info .company {
    flex-basis: 100%;
    text-align-last: left;
  }

  .site-info .left-info .address,
  .site-info .left-info .phone {
    flex-basis: auto;
  }

  .content-grid-block.dotted-bg {
    display: none;
  }

  .wp-block-matisse-dual-image {
    gap: 5rem;
  }

  .luxury-form-wrapper {
    padding: 40px 24px;
    box-shadow: none;
  }

  .luxury-form-wrapper .wpcf7-radio {
    flex-direction: column;
    gap: 16px;
  }

  /* Prevents iOS zoom on focus */
  .luxury-form-wrapper input[type="text"],
  .luxury-form-wrapper input[type="email"],
  .luxury-form-wrapper input[type="tel"],
  .luxury-form-wrapper select,
  .luxury-form-wrapper textarea {
    font-size: 16px;
  }
}

/* Mobile footer */
@media (max-width: 600px) {
  .footer-content {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

/* Site info stacking */
@media (max-width: 554px) {
  .site-info {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
  }

  .site-info .left-info {
    flex-direction: column;
    align-items: center;
    max-width: 100%;
  }

  .site-info > .left-info > div {
    padding-right: 0;
    padding-bottom: 0.25rem;
  }
}

/* WordPress Admin Bar adjustment */
.admin-bar .nav-bar {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .nav-bar {
    top: 46px;
  }
}

/* Menu inner secondary links */
@media screen and (max-width: 991px) {
  .nav-secondary-links {
    flex: none;
  }

  .wp-block-columns.split-container-col-2.is-layout-flex.wp-block-columns-is-layout-flex {
    grid-template-columns: 1fr;
  }
}

/* Portfolio grid responsive — horizontal scroll now handled in block SCSS */

@media (max-width: 1024px) {
  .blog-grid {
    grid-template-columns: 1fr;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .blog-sidebar {
    order: 2;
    margin-top: 0;
  }

  .sidebar-sticky {
    position: static;
  }

  .single-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 1rem;
  }

  .site-portfolio-single .entry-content .project-info {
    grid-template-columns: 1fr 1fr;
    font-size: 1rem;
  }

  .site-portfolio-single .entry-content .project-description .description-wrap {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .blog-grid {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .blog-card {
    grid-template-columns: 1fr;
  }

  .sidebar-sticky {
    margin-left: 0;
  }

  .card-content {
    padding: 1.5rem;
  }

  .card-title {
    font-size: 20px;
  }
}

@media (max-width: 640px) {
  .content-grid-item .item-image {
    height: 200px;
  }

  .filter-controls {
    padding: 1rem;
  }

  .blog-grid {
    gap: 2rem;
  }

  .blog-posts-grid {
    gap: 1.5rem;
  }
}

@media (max-width: 400px) {
  .site-portfolio-single .entry-content .project-info {
    grid-template-columns: 1fr;
  }

  .site-portfolio-single .entry-content .project-info div {
    padding-bottom: 0.5rem;
  }
}

/* Body state when menu is open */
body.menu-open {
  overflow: hidden;
}

/*--------------------------------------------------------------
# Utility classes
--------------------------------------------------------------*/

.secondary-color-scheme {
  color: var(--color-secondary);
}

/* lg gallery image override */
img.lg-object.lg-image {
  height: calc(100vh - 50px);
  width: 100%;
  object-fit: contain;
}

.top-marg {
  /* !important justified — utility class must win over component spacing */
  padding-top: var(--block-spacing) !important;
}

.last-div-marg {
  margin-bottom: var(--block-spacing) !important;
}

/* Padding utility scale */
.pt-0 {
  padding-top: 0 !important;
}
.pb-0 {
  padding-bottom: 0 !important;
}
.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Margin utility scale */
.mt-0 {
  margin-top: 0 !important;
}
.mb-0 {
  margin-bottom: 0 !important;
}
.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* CTA section keeps its 96px band padding on the inner container even when
   nested — reach through so pt-0/pb-0/py-0 on the block actually remove
   the gap */
.pt-0 > .matisse-cta-section__container,
.py-0 > .matisse-cta-section__container {
  padding-top: 0;
}
.pb-0 > .matisse-cta-section__container,
.py-0 > .matisse-cta-section__container {
  padding-bottom: 0;
}
.tp-5 {
  padding-top: clamp(3rem, 2rem + 3vw, 5rem) !important;
}
.bp-5 {
  padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}
.bothp-5 {
  padding-top: clamp(3rem, 2rem + 3vw, 5rem) !important;
  padding-bottom: clamp(3rem, 2rem + 3vw, 5rem) !important;
}

.tp-10 {
  padding-top: clamp(5rem, 4rem + 6vw, 10rem) !important;
}
.bp-10 {
  padding-bottom: clamp(5rem, 4rem + 6vw, 10rem) !important;
}
.bothp-10 {
  padding-top: clamp(5rem, 4rem + 6vw, 10rem) !important;
  padding-bottom: clamp(5rem, 4rem + 6vw, 10rem) !important;
}

/* ==========================================================
 * NATIVE CONTAINER SYSTEM (added 2026-06-29)
 * Constrains inner CONTENT, not backgrounds. Mirrors theme.json
 * contentSize (1200) / wideSize (1440 = --container-xl).
 * Loose top-level core blocks inside .entry-content get a max-width +
 * responsive gutter and center. Self-contained Matisse section blocks
 * (.wp-block-matisse-*) manage their own width and are left untouched;
 * .alignfull keeps full-bleed for section backgrounds.
 * ========================================================== */
.entry-content {
  /* --aia-gutter inherits from :root — 0 / 1.5rem @1648 / 1rem @768 */
  --aia-content: var(--content-wide, 1200px);
  --aia-wide: var(--container-xl, 1600px);
}
.entry-content
  > :is(
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    ul,
    ol,
    dl,
    blockquote,
    pre,
    table,
    .wp-block-heading,
    .wp-block-paragraph,
    .wp-block-list,
    .wp-block-quote,
    .wp-block-image,
    .wp-block-gallery,
    .wp-block-media-text,
    .wp-block-latest-posts,
    .wp-block-embed,
    .wp-block-buttons,
    .wp-block-social-links,
    .wp-block-separator,
    .wp-block-table,
    .wp-block-columns,
    .wp-block-group
  ):not(.alignfull):not(.alignwide) {
  max-width: var(--aia-wide);
  margin-inline: auto;
  padding-inline: var(--aia-gutter);
  box-sizing: border-box;
}
.entry-content > .alignwide {
  max-width: var(--aia-wide);
  margin-inline: auto;
  padding-inline: var(--aia-gutter);
  box-sizing: border-box;
}
.entry-content > .alignfull {
  max-width: none;
}

/* ----------------------------------------------------------
 * Sections (wp-block-group / columns) use the WIDE 1440 container.
 * Loose text blocks keep the 1200 content width (rule above); section
 * wrappers get the wider 1440 so their inner content lines up with the
 * Matisse blocks. Full-width groups keep their background full-bleed and
 * tuck their inner content into 1440. (added 2026-06-29)
 * ---------------------------------------------------------- */
.entry-content
  > :is(.wp-block-group, .wp-block-columns):not(.alignfull):not(.alignwide),
.entry-content
  .wp-block-group.alignfull
  > :where(:not(.alignfull):not(.alignwide)) {
  max-width: var(--container-xl, 1600px);
  margin-inline: auto;
}

/* ==========================================================
 * 1600px breakpoint (added 2026-06-30)
 * Matches --container-xl (1600) / theme.json wideSize. This is where the
 * WIDE container is fully reached; loose text stays in the 1200 content
 * column. Past 1600 the gutter opens up a touch and section gaps grow so
 * content does not hug the container edge on large displays.
 * ========================================================== */
@media (min-width: 1600px) {
  /* gutter no longer bumps here — above 1600 the rail is centered and
     --aia-gutter is 0 (see :root token steps) */
  .entry-content > :is(.wp-block-columns, .wp-block-group):not(.alignfull) {
    --wp--style--block-gap: 2.5rem;
  }
}

/* ==========================================================
 * Template / CPT / directory container widths (added 2026-06-30)
 * Pages rendered OUTSIDE .entry-content — archives, custom-post-type
 * archives, search, the member / firm directory, and The Events Calendar
 * — get the same 1600 wide / 1200 content couching the editor gives
 * .entry-content, so template-driven pages don't run edge-to-edge on
 * large screens. Scoped by body class so block-builder pages (which rely
 * on .entry-content for full-bleed) are untouched.
 * ========================================================== */

/* token context for archive / search / CPT-archive / taxonomy mains */
:is(
    body.archive,
    body.search,
    body.blog,
    body[class*="post-type-archive"],
    body[class*="tax-"]
  )
  .site-main {
  /* --aia-gutter inherits from :root — 0 / 1.5rem @1648 / 1rem @768 */
  --aia-content: var(--content-wide, 1200px);
  --aia-wide: var(--container-xl, 1600px);
}

/* archive header + post loop + pagination → 1200 content column, centered */
:is(
    body.archive,
    body.search,
    body.blog,
    body[class*="post-type-archive"],
    body[class*="tax-"]
  )
  .site-main
  > :is(
    .page-header,
    article,
    .hentry,
    .posts-navigation,
    .post-navigation,
    nav.navigation,
    .page-content,
    .no-results
  ) {
  max-width: var(--aia-wide);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--aia-gutter);
  box-sizing: border-box;
}

/* grids / multi-column listings → wide 1600 container */
:is(
    body.archive,
    body.search,
    body[class*="post-type-archive"],
    body[class*="tax-"]
  )
  .site-main
  > :is(
    .content-grid-block,
    .content-grid,
    .archive-grid,
    .posts-grid,
    .wp-block-group,
    .wp-block-columns,
    .wp-block-post-template,
    .wp-block-query
  ) {
  max-width: var(--aia-wide);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--aia-gutter);
  box-sizing: border-box;
}

/* CPT singles that render outside .entry-content (firm / project / group)
   — couch the whole main body to the wide container. */
:is(body.single-firm, body.single-project, body.single-group) .site-main {
  max-width: var(--container-xl, 1600px);
  margin-inline: auto;
  padding-inline: var(--aia-gutter);
  box-sizing: border-box;
}

/* Ultimate Member — member / firm directory, profile & account screens.
   UM emits its own full-width wrappers, so cap them to the wide container. */
.um.um-directory,
.um-members-wrapper,
.um.um-profile,
.um.um-account,
.um.um-form {
  max-width: var(--container-xl, 1600px) !important;
  margin-inline: auto !important;
}

/* Ultimate Member — auth screens: login / register / password reset
   (AIALBSB-131). UM renders these as a naked form on a bare page, in
   its stock blue. Scoped to the um-page-* body classes so the
   directory / profile / account treatments above are untouched.
   !important where noted overrides UM's own stylesheet + the inline
   <style> block UM prints after the form. */

/* The form column fills at least half the viewport and centers in it,
   so the page reads as a deliberate panel rather than a collapsed strip. */
:is(body.um-page-login, body.um-page-register, body.um-page-password-reset)
  .entry-content {
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(2.5rem, 8vh, 5rem);
  /* --aia-gutter is 0 at desktop steps — floor it at the house 16px so
     the card's hairline border never touches the viewport edge. */
  padding-inline: max(var(--aia-gutter, 1rem), 1rem);
  box-sizing: border-box;
}

/* Card: paper on a hairline border, house-square. Beats UM's inline
   per-form max-width (0,2,0) on specificity — no !important needed. */
:is(body.um-page-login, body.um-page-register, body.um-page-password-reset)
  .entry-content
  .um {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  box-sizing: border-box;
  background: var(--aia-paper);
  border: 1px solid var(--aia-line);
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 4vw, 2.5rem);
}

/* Fields — square, hairline border, red focus (--color-form-accent). */
.um-page .um .um-form-field[type="text"],
.um-page .um .um-form-field[type="password"],
.um-page .um input.um-form-field,
.um-page .um textarea.um-form-field {
  border: 1px solid var(--aia-line) !important;
  border-radius: 0 !important;
  background: var(--aia-paper) !important;
  color: var(--aia-ink) !important;
  font-family: var(--font-base);
  font-size: 0.9375rem;
  padding: 12px 14px;
  box-shadow: none !important;
  transition: var(--transition-base);
}
.um-page .um input.um-form-field:focus,
.um-page .um textarea.um-form-field:focus {
  border-color: var(--color-form-accent, var(--aia-red)) !important;
  outline: none;
}
.um-page .um .um-field-label,
.um-page .um .um-field-label label {
  font-family: var(--font-base);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--aia-slate);
}

/* Primary action — the house CTA: white on AIA red, square. */
.um-page .um .um-button,
.um-page .um input[type="submit"].um-button {
  background: var(--aia-red) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-base);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: var(--transition-base);
}
.um-page .um .um-button:hover,
.um-page .um .um-button:focus,
.um-page .um input[type="submit"].um-button:hover,
.um-page .um input[type="submit"].um-button:focus {
  background: var(--aia-red-dark) !important;
  color: #fff !important;
}

/* Secondary action (e.g. Register on the login card) — outline variant. */
.um-page .um a.um-button.um-alt {
  background: transparent !important;
  color: var(--aia-ink) !important;
  border: 1px solid var(--aia-line) !important;
}
.um-page .um a.um-button.um-alt:hover,
.um-page .um a.um-button.um-alt:focus {
  background: var(--aia-mist) !important;
  color: var(--aia-ink) !important;
}

/* Helper links (“Forgot your password?”) — slate, red on hover. */
.um-page .um .um-form a:not(.um-button) {
  color: var(--aia-slate);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.um-page .um .um-form a:not(.um-button):hover {
  color: var(--aia-red);
}

/* The Events Calendar — single event + list/calendar views. */
.single-tribe_events .site-main,
.post-type-archive-tribe_events .site-main,
.tribe-common .tribe-events-l-container {
  max-width: var(--container-xl, 1600px);
  margin-inline: auto;
  padding-inline: var(--aia-gutter);
  box-sizing: border-box;
}
/* tribe-events-full.css ships `#tribe-events-pg-template { max-width:1200px }`
   and `padding: 40px 20px 20px` — ID selectors, so they win over any class
   rule regardless of load order. The wrapper always carries both the id and
   the class, so this restates the rules against the id specifically to match
   it; !important because an ID selector can't otherwise be beaten short of
   another ID, and this is overriding third-party plugin CSS we don't
   control, not our own. Padding is 0, not var(--aia-gutter): on this site
   the wrapper exists only on single events, where .aia-entity--event inside
   it is the single gutter payer (24px / 16px ≤600) — any wrapper padding
   stacks a second gutter on top (AIALBSB-119: 20+16 = 36px at 600px). */
#tribe-events-pg-template {
  max-width: var(--container-xl, 1600px) !important;
  padding: 0 !important;
}
/* TEC also ships `#tribe-events-content { margin-bottom:48px; padding:2px 0 }`
   — that margin stacks under .aia-entity's own 96px/64px bottom padding.
   (1,1,0) beats TEC's (1,0,0), no !important needed. */
.single-tribe_events #tribe-events-content {
  margin-bottom: 0;
  padding: 0;
}
/* #page.site is display:flex;flex-direction:column (header.php), making
   #tribe-events-pg-template a flex item on the cross axis. It should
   stretch to the container's width by default (align-items is "normal",
   which resolves to stretch) — but empirically it wasn't: min-width:0
   alone (added first, still present below) had no effect, and the box
   kept rendering at its content's ~1600px width regardless of viewport,
   confirmed by directly forcing width:100% and watching it snap to the
   real viewport width. Root cause not fully pinned down (likely TEC
   setting something that opts this element out of stretch sizing), but
   an explicit width matches what stretch should have done anyway, so
   it's a safe, verified fix rather than a workaround. This is why the
   sidebox/entry never visually collapsed on a single event page the way
   it does on Posts/Committees, which aren't flex children this way. */
#tribe-events-pg-template {
  min-width: 0;
  width: 100% !important;
  box-sizing: border-box;
}

/* Past 1600 open the gutter to match the .entry-content system. */
@media (min-width: 1600px) {
  :is(
      body.archive,
      body.search,
      body[class*="post-type-archive"],
      body[class*="tax-"]
    )
    .site-main {
    --aia-gutter: clamp(2rem, 4vw, 3rem);
  }
}

/* ==========================================================
 * Column control (added 2026-06-30)
 * Above the WP columns breakpoint (782px), each column caps at the
 * 1600 container and centers — so a single / full-width column doesn't
 * run edge-to-edge, while explicit-width columns keep their width
 * (inline flex-basis outranks this rule). Below 782 columns stack.
 * ========================================================== */
@media (min-width: 782px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 0;
    flex-grow: 1;
    max-width: var(--container-xl, 1600px);
    margin: 0 auto;
  }
}

/* ==========================================================
 * Cover sections — align with the container system (added 2026-06-30)
 * Full/wide cover backgrounds stay full-bleed, but their inner content
 * (heading, RSS/post grids, etc.) tucks into the 1600 container with the
 * same gutter as groups/columns. Mirrors the wp-block-group treatment.
 * ========================================================== */
.entry-content .wp-block-cover.alignfull > .wp-block-cover__inner-container,
.entry-content .wp-block-cover.alignwide > .wp-block-cover__inner-container {
  max-width: var(--container-xl, 1600px);
  margin-inline: auto;
  box-sizing: border-box;
}

/* ==========================================================
 * Utility: .no-left-margin (added 2026-06-30)
 * Add as an "Additional CSS class(es)" on a block to pull it flush left.
 * Zeroes both the left margin and the left padding — lists (e.g. the RSS /
 * latest-posts blocks) indent via padding, so both are needed.
 * ========================================================== */
.no-left-margin {
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.no-left-margin > li {
  margin-left: 0;
}

/* ==========================================================
 * Targeted tweaks (added 2026-06-30)
 * ========================================================== */
/* Latest Updates grid wrapper — remove padding. */
.homepage_intro__updates {
  padding: 0;
}

/* RSS grid — pull flush left. The visible indent on a <ul> comes from its
   left PADDING (old bullet gutter), not margin, so zero both. */
.wp-block-rss.is-grid {
  margin-left: 0;
  padding-left: 0;
}

/* ==========================================================
 * AIA BRAND LAYER  (renovation 2026-06-30)
 *   Source: claude-design/foundations (colors.html, typography.html)
 *   Reskins type weight/tracking and controls to the AIA system.
 *   The :root tokens above already remapped every legacy colour;
 *   this layer fixes weights the old Adobe faces baked in and
 *   brands the action controls.
 * ========================================================== */

/* Surfaces — lock the page to Paper / Ink. */
html {
  background: var(--aia-paper);
}
body {
  background: var(--aia-paper);
  color: var(--aia-ink);
}

::selection {
  background: var(--selected-primary);
  color: var(--aia-ink);
}
::-moz-selection {
  background: var(--selected-primary);
  color: var(--aia-ink);
}

/* ---- Display type (Architype → Archivo) -----------------
   The old serif rendered at hairline weights (100/300); the AIA
   grotesk wants real weight + tight tracking. */
h1,
h2,
h3,
.wp-block-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
}
h4,
h5,
h6 {
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* Body / UI text (Inter). Inter's regular is 400 — drop the old 300. */
body,
p,
li,
dd,
dt,
.wp-block-paragraph {
  font-weight: 400;
}

/* Section label / eyebrow — Archivo 13/600/.12em slate. */
.aia-label,
.is-style-section-label {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--aia-slate);
}
.aia-label--red {
  color: var(--aia-red);
}

/* ---- Action controls (foundations: buttons.html) --------
   CTA = white text on AIA red · radius 10 · Inter 15/500. */
.wp-block-button__link,
.wp-block-button .wp-element-button,
.wp-block-search__button,
input[type="submit"],
button.submit,
.aia-btn {
  font-family: var(--font-base);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 0; /* square — house standard (style guide: Buttons & CTAs) */
  background: var(--aia-red);
  color: #fff;
  text-decoration: none;
  transition: var(--transition-base);
}
.wp-block-button__link:hover,
.wp-block-button .wp-element-button:hover,
.wp-block-search__button:hover,
input[type="submit"]:hover,
button.submit:hover,
.aia-btn:hover {
  background: var(--aia-red-dark);
  color: #fff;
}

/* Dark variant — ink fill, white text. */
.wp-block-button.is-style-dark .wp-block-button__link,
.aia-btn--dark {
  background: var(--aia-ink);
  color: #fff;
}
.wp-block-button.is-style-dark .wp-block-button__link:hover,
.aia-btn--dark:hover {
  background: #000;
}

/* Outline variant — transparent, line border, ink text. */
.wp-block-button.is-style-outline .wp-block-button__link,
.aia-btn--outline {
  background: transparent;
  color: var(--aia-ink);
  border: 1px solid var(--aia-line);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.aia-btn--outline:hover {
  background: var(--aia-mist);
  color: var(--aia-ink);
  border-color: var(--aia-line);
}

/* ---- Matisse pill-contract button ---- */
.matisse-btn {
  --pill: #000;
  --text: #fff;
  --circle: #fff;
  --arrow: #000;
  --pad-y: 1.1em;
  --pad-l: 1em;
  --pad-r: 4em;
  --radius: 0;
  --circle-d: 2.5em;
  --pill-rest: 3.1em;
  --pill-hover: -0.5em;
  --shrink: 0.965;
  --dur: 0.6s;
  --stagger: 3ms;
  --ease: cubic-bezier(0.625, 0.05, 0, 1);

  position: relative !important;
  display: inline-flex !important;
  align-items: center;
  padding: var(--pad-y) var(--pad-r) var(--pad-y) var(--pad-l) !important;
  color: var(--text) !important;
  text-decoration: none !important;
  font-family: var(--font-heading) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: transform var(--dur) var(--ease);
}

.matisse-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: var(--pill-rest);
  z-index: 0;
  background: var(--pill);
  border-radius: var(--radius);
  transition: right var(--dur) var(--ease);
}

.matisse-btn__inner {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
}

.matisse-btn__text {
  display: inline-block;
  white-space: pre;
}

.matisse-btn__char {
  position: relative;
  display: inline-block;
  overflow: hidden;
  white-space: pre;
  vertical-align: top;
}

.matisse-btn__char > span {
  display: block;
  transition: transform var(--dur) var(--ease);
  transition-delay: calc(var(--i) * var(--stagger));
}

.matisse-btn__char > span:nth-child(2) {
  position: absolute;
  left: 0;
  top: 100%;
}

.matisse-btn__icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--circle-d);
  height: var(--circle-d);
  border-radius: 50%;
  background: var(--circle);
  color: var(--arrow);
  border: 2px solid #000;
}

.matisse-btn__icon-svg {
  display: block;
  width: 1.05em;
  height: 1.15em;
}

.matisse-btn:hover,
.matisse-btn:focus-visible {
  transform: scale(var(--shrink));
}

.matisse-btn:hover::before,
.matisse-btn:focus-visible::before {
  right: var(--pill-hover);
}

.matisse-btn:hover .matisse-btn__char > span,
.matisse-btn:focus-visible .matisse-btn__char > span {
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  .matisse-btn,
  .matisse-btn::before,
  .matisse-btn__char > span {
    transition: none !important;
  }
}

.wp-block-button__link.matisse-btn,
.wp-element-button.matisse-btn {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  padding: var(--pad-y) var(--pad-r) var(--pad-y) var(--pad-l) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Pill-contract: "already open" variant — only when paired with a secondary */
.matisse-cta-section__btn--primary.matisse-btn:not(:only-child),
.matisse-feature-section__btn--primary.matisse-btn:not(:only-child),
.matisse-video-hero__btn--primary.matisse-btn:not(:only-child) {
  --pill-rest: -0.5em;
  --shrink: 1;
}

.matisse-cta-section__btn--primary.matisse-btn:not(:only-child):hover,
.matisse-cta-section__btn--primary.matisse-btn:not(:only-child):focus-visible,
.matisse-feature-section__btn--primary.matisse-btn:not(:only-child):hover,
.matisse-feature-section__btn--primary.matisse-btn:not(
    :only-child
  ):focus-visible,
.matisse-video-hero__btn--primary.matisse-btn:not(:only-child):hover,
.matisse-video-hero__btn--primary.matisse-btn:not(:only-child):focus-visible {
  transform: none;
}

.matisse-cta-section__btn--primary.matisse-btn:not(:only-child):hover
  .matisse-btn__icon,
.matisse-cta-section__btn--primary.matisse-btn:not(:only-child):focus-visible
  .matisse-btn__icon,
.matisse-feature-section__btn--primary.matisse-btn:not(:only-child):hover
  .matisse-btn__icon,
.matisse-feature-section__btn--primary.matisse-btn:not(
    :only-child
  ):focus-visible
  .matisse-btn__icon,
.matisse-video-hero__btn--primary.matisse-btn:not(:only-child):hover
  .matisse-btn__icon,
.matisse-video-hero__btn--primary.matisse-btn:not(:only-child):focus-visible
  .matisse-btn__icon {
  transform: translateY(-50%) translateX(3px);
  transition: transform var(--dur) var(--ease);
}

/* Opt-in red pill — add "aia-pill-red" to a block's Additional CSS class
   to brand its primary pill(s) red instead of the default ink, matching
   the video-hero's red primary. Fallback rules cover pre-enhancement. */
.aia-pill-red .matisse-btn,
.aia-pill-red.matisse-btn {
  --pill: var(--aia-red);
}
.aia-pill-red .matisse-button-block__link--pill,
.aia-pill-red .matisse-cta-section__btn--primary:not(.matisse-btn) {
  background: var(--aia-red);
}

/* Opt-in tight header band — add "aia-cta-tight" to a matisse/cta-section
   or matisse/hero-header used as a section header so it reads as a heading
   band, not a full panel: block padding drops from 96px to 40px. */
.aia-cta-tight .matisse-cta-section__container,
.aia-cta-tight .matisse-hero-header__container {
  padding-block: var(--space-xl, 40px);
}

/* Opt-in expired/archival treatment — add "aia-expired" to a block's
   Additional CSS class to mute past-event content (dead CTAs get
   href="#" in the content; this class supplies the visual cue).
   Interactive children (accordion toggles) must stay clickable, so
   no pointer-events lockout here. */
.aia-expired {
  opacity: 0.6;
  filter: grayscale(0.85);
}

/* Inline content links — ink, red on hover (single accent).
   Block-level component links (.matisse-link-list-item, .matisse-pill-list-item)
   are excluded: the whole card/pill is one <a> that manages its own hover —
   an underline here would draw through card content, and the red hover text
   would vanish against the pill's red hover fill. */
.entry-content
  a:not(.wp-block-button__link):not(.wp-element-button):not(
    .matisse-link-list-item
  ):not(.matisse-pill-list-item):not(.matisse-logo-bar__btn):not(.matisse-button-block__link) {
  color: var(--aia-ink);
  text-decoration: underline;
  text-decoration-color: var(--aia-line);
  text-underline-offset: 0.18em;
  transition:
    color var(--transition-fast),
    text-decoration-color var(--transition-fast);
}
.entry-content
  a:not(.wp-block-button__link):not(.wp-element-button):not(
    .matisse-link-list-item
  ):not(.matisse-pill-list-item):not(.matisse-logo-bar__btn):not(.matisse-button-block__link):hover {
  color: var(--aia-red);
  text-decoration-color: var(--aia-red);
}

/* ==========================================================
 * Business Directory — wide profile roster cards (added 2026-06-30)
 *   /directory/wpbdp_category/* listing pages: render each WPBDP
 *   excerpt as the AIA "wide profile / roster card" — 200px photo
 *   on the left, name · title · details · action stacked on the
 *   right. Directory is pinned to the 1600 container (min-width
 *   1600 per spec). Scoped to .business-directory so only WPBDP
 *   pages are affected.
 * ========================================================== */

/* let the directory break out of the 1200 content column to the wide container */
body.business-directory .site-main,
body.business-directory .entry-content {
  max-width: none;
}
body.business-directory .entry-content > * {
  max-width: none;
  padding-inline: 0;
}

/* directory chrome (sort bar, pagination) sits in the 1600 column */
body.business-directory .wpbdp-listings-sort-options,
body.business-directory .wpbdp-page > .box-row,
body.business-directory .wpbdp-pagination {
  max-width: var(--container-xl, 1600px);
  margin-inline: auto;
}

/* listings grid — caps at the 1600 container, but fluid below so the
   column breakpoints can reflow (keeps WPBDP's 12-col grid; just sizes it). */
body.business-directory #wpbdp-listings-list.wpbdp-grid,
body.business-directory .wpbdp-listings-list {
  gap: 22px !important;
  width: 100%;
  max-width: var(--container-xl, 1600px);
  margin-inline: auto;
}
/* INDIVIDUALS → three-up (span 4 of 12); 2-up ≤1200; 1-up ≤768 */
body.term-individuals #wpbdp-listings-list > .wpbdp-listing,
body.term-individuals .wpbdp-listings-list > .wpbdp-listing {
  grid-column: span 4 !important;
  grid-row: auto !important;
  width: auto !important;
  margin: 0 !important;
  float: none !important;
}
@media (max-width: 1200px) {
  body.term-individuals #wpbdp-listings-list > .wpbdp-listing,
  body.term-individuals .wpbdp-listings-list > .wpbdp-listing {
    grid-column: span 6 !important;
  }
}
@media (max-width: 768px) {
  body.term-individuals #wpbdp-listings-list > .wpbdp-listing,
  body.term-individuals .wpbdp-listings-list > .wpbdp-listing {
    grid-column: span 12 !important;
  }
}

/* each listing excerpt → wide roster card */
body.term-individuals .wpbdp-listing-excerpt {
  display: grid;
  grid-template-columns: 175px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "photo title"
    "photo body";
  background: var(--aia-paper);
  border: 1px solid var(--aia-line);
  border-radius: 12px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
}
body.term-individuals .wpbdp-listing-excerpt:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* 200px photo column — placeholder (no thumbnails in the data yet):
   AIA mist + dotted texture + person glyph */
body.term-individuals .wpbdp-listing-excerpt::before {
  content: "";
  grid-area: photo;
  background-color: var(--aia-mist);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23A9A69E'%3E%3Ccircle cx='12' cy='8.5' r='4.2'/%3E%3Cpath d='M3.5 20.5c0-4.4 3.9-6.6 8.5-6.6s8.5 2.2 8.5 6.6z'/%3E%3C/svg%3E"),
    radial-gradient(#c9c7c1 1.4px, transparent 1.4px);
  background-repeat: no-repeat, repeat;
  background-position:
    center,
    0 0;
  background-size:
    72px,
    16px 16px;
  border-right: 1px solid var(--aia-line);
}

/* name → display title */
body.term-individuals .wpbdp-listing-excerpt .listing-title {
  grid-area: title;
  align-self: end;
  padding: 24px 26px 0;
  margin: 0;
}
body.term-individuals .wpbdp-listing-excerpt .listing-title h3 {
  margin: 0;
}
body.term-individuals .wpbdp-listing-excerpt .listing-title a {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.35rem, 3vw, 1.5rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--aia-ink);
  text-decoration: none;
}
body.term-individuals .wpbdp-listing-excerpt .listing-title a:hover {
  color: var(--aia-red);
}

/* details / fields → stacked, slate body */
body.term-individuals .wpbdp-listing-excerpt .excerpt-content {
  grid-area: body;
  padding: 8px 26px 22px;
  display: flex;
  flex-direction: column;
}
body.term-individuals .wpbdp-listing-excerpt .listing-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.term-individuals .wpbdp-listing-excerpt .wpbdp-field-display {
  margin: 0;
}
body.term-individuals .wpbdp-listing-excerpt .wpbdp-field-display .field-label {
  display: none;
}
body.term-individuals .wpbdp-listing-excerpt .wpbdp-field-display .value,
body.term-individuals .wpbdp-listing-excerpt .wpbdp-field-display .value a {
  color: var(--aia-slate);
  font-size: 14px;
  line-height: 1.45;
  text-decoration: none;
}
/* the org/firm field reads as the red eyebrow "title" line */
body.term-individuals
  .wpbdp-listing-excerpt
  .wpbdp-field-firm__organization_name
  .value,
body.term-individuals
  .wpbdp-listing-excerpt
  .wpbdp-field-firm__organization_name
  .value
  a {
  color: var(--aia-red);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* (the View-profile cue now lives in the shared .aia-card-footer below) */

/* tighten WPBDP's default action buttons inside the card if present */
body.term-individuals .wpbdp-listing-excerpt .listing-actions,
body.term-individuals .wpbdp-listing-excerpt .wpbdp-listing-action-contact {
  display: none;
}

/* small mobile — stack the roster card (photo on top) */
@media (max-width: 560px) {
  body.term-individuals .wpbdp-listing-excerpt {
    grid-template-columns: 1fr;
    grid-template-areas: "photo" "title" "body";
  }
  body.term-individuals .wpbdp-listing-excerpt::before {
    min-height: 175px;
  }
}

/* directory roster card — strip WPBDP's default field/title borders & spacing */
body.term-individuals .wpbdp-listing-excerpt .listing-title,
body.term-individuals .wpbdp-listing-excerpt .listing-title h3,
body.term-individuals .wpbdp-listing-excerpt .listing-details,
body.term-individuals .wpbdp-listing-excerpt .wpbdp-field-display,
body.term-individuals .wpbdp-listing-excerpt .excerpt-content {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ==========================================================
 * Business Directory — FIRMS: news card (image · title · icons)
 *   /directory/wpbdp_category/firms/ — vertical "news card" from
 *   the styleguide: 175px image on top, firm name, practice areas
 *   & city, then all social icons in one flex row. Three-up (span
 *   4 of WPBDP's 12-col grid). Same 1600 / min-width 1600 as
 *   individuals (inherited from the .business-directory rules).
 * ========================================================== */

/* FIRMS → three-up: each listing spans 4 of 12 columns */
body.term-firms #wpbdp-listings-list > .wpbdp-listing,
body.term-firms .wpbdp-listings-list > .wpbdp-listing {
  grid-column: span 4 !important;
  grid-row: auto !important;
  width: auto !important;
  margin: 0 !important;
  float: none !important;
}

/* card shell — vertical news card */
body.term-firms .wpbdp-listing-excerpt {
  display: flex;
  flex-direction: column;
  background: var(--aia-paper);
  border: 1px solid var(--aia-line);
  border-radius: 12px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
}
body.term-firms .wpbdp-listing-excerpt:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
/* hoist excerpt-content's children into the card flow so we can order them */
body.term-firms .wpbdp-listing-excerpt .excerpt-content {
  display: contents;
}

/* IMAGE on top — full card width, 175px tall, dotted texture behind */
body.term-firms .wpbdp-listing-excerpt .listing-thumbnail {
  order: 1;
  position: relative; /* containing block for the absolute image */
  width: 100%;
  aspect-ratio: 3 / 2; /* enforced height — image can't stretch it */
  overflow: hidden;
  background-color: var(--aia-mist);
  background-image: radial-gradient(#c9c7c1 1.4px, transparent 1.4px);
  background-size: 16px 16px;
  border-bottom: 1px solid var(--aia-line);
}
body.term-firms .wpbdp-listing-excerpt .listing-thumbnail a {
  position: absolute;
  inset: 0;
  display: block;
}
/* image is taken out of flow so its intrinsic size can't override the 3:2 box */
body.term-firms .wpbdp-listing-excerpt .listing-thumbnail img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
}
/* texture placeholder when a firm has no image (uses styleguide dot grid) */
body.term-firms .wpbdp-listing-excerpt:not(:has(.listing-thumbnail))::before {
  content: "";
  order: 1;
  aspect-ratio: 3 / 2;
  background-color: var(--aia-mist);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9A69E' stroke-width='1.4' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='1.5'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.6'/%3E%3Cpath d='M4 17l5-5 4 4 3-3 4 4'/%3E%3C/svg%3E"),
    radial-gradient(#c9c7c1 1.4px, transparent 1.4px);
  background-repeat: no-repeat, repeat;
  background-position:
    center,
    0 0;
  background-size:
    56px,
    16px 16px;
  border-bottom: 1px solid var(--aia-line);
}

/* TITLE below the image */
body.term-firms .wpbdp-listing-excerpt .listing-title {
  order: 2;
  padding: 16px 18px 0;
  margin: 0;
}
body.term-firms .wpbdp-listing-excerpt .listing-title h3 {
  margin: 0;
}
body.term-firms .wpbdp-listing-excerpt .listing-title a {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--aia-ink);
  text-decoration: none;
}
body.term-firms .wpbdp-listing-excerpt .listing-title a:hover {
  color: var(--aia-red);
}

/* DETAILS (practice areas, city) → stacked left under the title.
   margin:0 cancels WPBDP default's margin-left:calc(150px+24px) (which
   clears a left-floated thumbnail we don't use), so they don't shove right. */
body.term-firms .wpbdp-listing-excerpt .listing-details {
  order: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0 !important;
  padding: 8px 18px 0;
}
/* org-name field duplicates the title → hide it */
body.term-firms .wpbdp-listing-excerpt .wpbdp-field-firm__organization_name {
  display: none;
}
body.term-firms .wpbdp-listing-excerpt .wpbdp-field-display {
  margin: 0;
  font-size: 13px;
  color: var(--aia-slate);
  line-height: 1.45;
}
body.term-firms .wpbdp-listing-excerpt .wpbdp-field-display .field-label {
  font-weight: 600;
  color: var(--aia-ink);
  margin-right: 5px;
}
body.term-firms .wpbdp-listing-excerpt .wpbdp-field-display .value,
body.term-firms .wpbdp-listing-excerpt .wpbdp-field-display .value a {
  color: var(--aia-slate);
  text-decoration: none;
  display: inline;
}

/* SOCIAL ICONS — all in one flex div, pinned to the card bottom */
body.term-firms .wpbdp-listing-excerpt .social-fields {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 14px 0 0;
  padding: 13px 0 16px;
  border-top: 1px solid var(--aia-line);
}
body.term-firms .wpbdp-listing-excerpt .social-field {
  margin: 0;
  padding: 0;
}
body.term-firms .wpbdp-listing-excerpt .social-field a {
  display: inline-flex;
}
body.term-firms .wpbdp-listing-excerpt .social-field img,
body.term-firms .wpbdp-listing-excerpt .social-field .logo {
  width: 20px;
  height: 20px;
  display: block;
}

/* strip WPBDP default field borders/backgrounds inside the firm card */
body.term-firms .wpbdp-listing-excerpt .listing-title,
body.term-firms .wpbdp-listing-excerpt .listing-title h3,
body.term-firms .wpbdp-listing-excerpt .listing-details,
body.term-firms .wpbdp-listing-excerpt .wpbdp-field-display {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* hide WPBDP default action buttons in the firm card */
body.term-firms .wpbdp-listing-excerpt .listing-actions,
body.term-firms .wpbdp-listing-excerpt .wpbdp-listing-action-contact {
  display: none;
}

/* FIRMS responsive — 2-up ≤1200, 1-up ≤768 (matches individuals) */
@media (max-width: 1200px) {
  body.term-firms #wpbdp-listings-list > .wpbdp-listing,
  body.term-firms .wpbdp-listings-list > .wpbdp-listing {
    grid-column: span 6 !important;
  }
}
@media (max-width: 768px) {
  body.term-firms #wpbdp-listings-list > .wpbdp-listing,
  body.term-firms .wpbdp-listings-list > .wpbdp-listing {
    grid-column: span 12 !important;
  }
}

/* WPBDP ships no Houzz.svg (404) → supply an on-brand fallback icon */
body.term-firms .wpbdp-listing-excerpt .social-field.houzz img {
  display: none;
}
body.term-firms .wpbdp-listing-excerpt .social-field.houzz .social-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: center / 20px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236E6C66'%3E%3Cpath d='M12 3 3 10.5V11h3v9h5v-6h2v6h5v-9h3v-.5z'/%3E%3C/svg%3E");
}

/* ==========================================================
 * Directory card footer — LinkedIn · Instagram · Website + View
 * profile, rendered by aia_directory_card_footer(). Empty links are
 * greyed and non-clickable. Replaces WPBDP's default .social-fields.
 * ========================================================== */

/* hide WPBDP's stock social row (footer supersedes it) */
body.business-directory .wpbdp-listing-excerpt .social-fields {
  display: none !important;
}

.aia-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--aia-line);
}
.aia-card-icons {
  display: flex;
  align-items: center;
  gap: 14px;
}
.aia-dico {
  display: inline-flex;
  color: var(--aia-ink);
  transition: color 0.2s ease;
}
.aia-dico:hover {
  color: var(--aia-red);
}
.aia-dico svg {
  width: 18px;
  height: 18px;
  display: block;
}
/* empty → greyed out + non-clickable */
.aia-dico.is-empty {
  color: var(--aia-line);
  pointer-events: none;
  cursor: default;
}

.aia-viewprofile {
  font-family: var(--font-base);
  font-size: 13px;
  font-weight: 600;
  color: var(--aia-red);
  text-decoration: none;
  white-space: nowrap;
}
/* arrow via CSS (text glyph, not the emoji ↗) */
.aia-viewprofile::after {
  content: " \2197";
}
.aia-viewprofile:hover {
  text-decoration: underline;
}
.aia-viewprofile.is-empty {
  color: var(--aia-line);
  pointer-events: none;
  cursor: default;
}

/* INDIVIDUALS: footer sits at the bottom of the body column (inherits its
   padding). Make the body fill the card height so the footer pins down. */
body.term-individuals .wpbdp-listing-excerpt .excerpt-content {
  min-height: 100%;
}
body.term-individuals .wpbdp-listing-excerpt .aia-card-footer {
  padding-top: 14px;
}

/* FIRMS: excerpt-content is display:contents, so the footer is a card flex
   child — order it last and give it the card's horizontal padding. */
body.term-firms .wpbdp-listing-excerpt .aia-card-footer {
  order: 7;
  margin: auto 0 0;
  padding: 13px 18px 16px;
}

/* empty profile → dead (non-clickable) title, styled like the linked title */
body.term-individuals
  .wpbdp-listing-excerpt
  .listing-title.is-empty-profile
  h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.35rem, 3vw, 1.5rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--aia-ink);
  cursor: default;
}
body.term-firms .wpbdp-listing-excerpt .listing-title.is-empty-profile h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--aia-ink);
  cursor: default;
}
/* empty profile → also disable the thumbnail link (firms) */
body.business-directory .aia-empty-profile .listing-thumbnail a {
  pointer-events: none;
  cursor: default;
}

/* ==========================================================
 * Individuals directory — CTA header (wpbdp_before_category_page)
 * Plain stacked text (heading · text · button) at the TOP of the
 * category view, with a generous gap before the "Find listings"
 * search bar. (Reordered above the search via flex order.)
 * ========================================================== */

/* CTA first, then the search box / sort / listings (DOM order kept) */
body.term-individuals #wpbdp-page-category {
  display: flex;
  flex-direction: column;
}
body.term-individuals #wpbdp-page-category > .aia-dir-cta {
  order: -1;
}
/* keep the search box aligned to the 1600 column like the listings */
body.term-individuals #wpbdp-page-category > #wpbdp-main-box {
  width: 100%;
  max-width: var(--container-xl, 1600px);
  margin-inline: auto;
}

.aia-dir-cta {
  width: 100%;
  max-width: var(--container-xl, 1600px);
  margin: 0 auto;
  margin: clamp(44px, 7vw, 88px) 0;
}
.aia-dir-cta__inner {
  display: block; /* plain text, all stacked — no banner */
}
.aia-dir-cta__head {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 42px);
  letter-spacing: -0.015em;
  line-height: 1.08;
  margin: 0;
  color: var(--aia-ink);
}
.aia-dir-cta__text {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--aia-slate);
}
/* Directory CTAs use the house pill (matisse-button.js hooks
   .matisse-cta-section__btn--primary; base button styles ride the global
   block bundle); only the spacing lives here. */
.aia-dir-cta .matisse-cta-section__buttons {
  margin-top: 24px;
}

/*css i added that needs to be organized and checked against*/
.hero-slider.ar-16-9.wp-block-matisse-hero-slider {
  height: auto !important;
}
/* Hero-header heading was too large (clamp maxed at 6rem/96px); scale down to the h1 range. */
.matisse-hero-header .matisse-hero-header__heading {
  font-size: clamp(2rem, 4vw, 3rem);
}
.matisse-latest-posts.container-xl {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: var(--container-xl, 1600px);
  /* was 0 !important; now the standard rail gutter (0 / 1.5rem / 1rem) */
  padding-inline: var(--aia-gutter) !important;
}

/* ==========================================================================
   # Sponsorship tiers (opt-in — /sponsorship/)
   Priced sponsorship levels built as matisse/content-grid-item cards. The
   card chrome, brutalist hover, and 1.5rem side gutters already come from
   content-grid; these rules only add the price typography and the inverted
   "featured level" variant. Applied via Additional CSS class:
     .aia-tier          on every level card
     .aia-tier--feat    on the highlighted level (Platinum)
     .aia-tier__price / __per / __plus  on the paragraphs inside.
   The .content-grid-block .content-grid prefix is required — the block's own
   .item-content rules are 4 classes deep and would otherwise win.
   ========================================================================== */

.entry-content .content-grid-block .content-grid .aia-tier__price {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--aia-ink);
  margin: 0 0 0.25rem;
}

.entry-content .content-grid-block .content-grid .aia-tier__per {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aia-slate);
  margin: 0 0 1.25rem;
}

/* "Everything in Gold, plus:" — the hairline separates the levels this card
   inherits from the benefits it adds on its own. */
.entry-content .content-grid-block .content-grid .aia-tier__plus {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--aia-red);
  margin: 0 0 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--aia-line);
}

/* Purchase button sits on the card floor whatever the benefit list length. */
.content-grid-block .content-grid .aia-tier .item-content > *:last-child {
  margin-top: auto;
}

/* ── Featured level — inverted card ── */
.content-grid-block .content-grid .content-grid-item.aia-tier--feat {
  background: #212121;
  border-color: #212121;
}

.entry-content .content-grid-block .content-grid .aia-tier--feat .item-content,
.entry-content .content-grid-block .content-grid .aia-tier--feat .item-content p,
.entry-content .content-grid-block .content-grid .aia-tier--feat .item-content li {
  color: rgba(255, 255, 255, 0.68);
}

/* p.aia-tier__price is needed here: the muted rule above matches
   `.item-content p` and would otherwise out-specify a classes-only selector. */
.entry-content .content-grid-block .content-grid .aia-tier--feat .item-content h3,
.entry-content
  .content-grid-block
  .content-grid
  .aia-tier--feat
  .item-content
  p.aia-tier__price {
  color: #ffffff;
  opacity: 1;
}

.entry-content .content-grid-block .content-grid .aia-tier--feat .aia-tier__per {
  color: rgba(255, 255, 255, 0.68);
}

.entry-content .content-grid-block .content-grid .aia-tier--feat .aia-tier__plus {
  border-bottom-color: rgba(255, 255, 255, 0.18);
}

/* The eyebrow label and dash markers keep the red accent, which still reads
   against #212121; only the muted slate label needs lifting. */
.entry-content .content-grid-block .content-grid .aia-tier--feat .aia-label {
  color: rgba(255, 255, 255, 0.45);
}

/* Ink drop-shadow is invisible on a near-black card — use the red accent. */
.content-grid-block .content-grid .content-grid-item.aia-tier--feat:hover,
.content-grid-block .content-grid .content-grid-item.aia-tier--feat:focus-within {
  box-shadow: 4px 4px 0 0 var(--aia-red);
}

/* ==========================================================================
   # Reach figures (opt-in — .aia-reach on a matisse/pillar-grid)
   Turns the pillar-grid's uppercase column titles into stat figures so a
   rule-separated row can carry numbers. Used on /sponsorship/ because
   matisse/stats-counter still ships an empty style.scss.
   ========================================================================== */

.aia-reach .matisse-pillar-card__title {
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: none;
  line-height: 1;
  margin-bottom: 12px;
}

/* ==========================================================================
   # Inline links inside dark scheme bands
   The sitewide inline-link rule paints links --aia-ink, which is invisible on
   the #111 of a black-scheme section or two-column container. Same selector,
   one class deeper, so it wins on specificity as well as source order.
   ========================================================================== */

.entry-content
  :is(.matisse-two-col--scheme-black, .matisse-section--scheme-black)
  a:not(.wp-block-button__link):not(.wp-element-button):not(
    .matisse-link-list-item
  ):not(.matisse-pill-list-item):not(.matisse-logo-bar__btn):not(.matisse-button-block__link) {
  color: #ffffff;
  text-decoration-color: rgba(255, 255, 255, 0.4);
}

.entry-content
  :is(.matisse-two-col--scheme-black, .matisse-section--scheme-black)
  a:not(.wp-block-button__link):not(.wp-element-button):not(
    .matisse-link-list-item
  ):not(.matisse-pill-list-item):not(.matisse-logo-bar__btn):not(.matisse-button-block__link):hover {
  color: var(--aia-red);
  text-decoration-color: var(--aia-red);
}

/* ==========================================================================
   # Tier grid wrap (opt-in — .aia-tier-grid on a matisse/content-grid)
   content-grid turns into a horizontal drag row below 1600px, which is right
   for browsing cards but wrong for a rate card: three of four levels visible
   and the fourth only reachable by dragging. This restores a real grid — 2x2
   at mid widths, stacked on mobile — so every level stays comparable. Scoped
   to the opt-in class so no other content-grid on the site changes.
   ========================================================================== */

@media (max-width: 1600px) {
  .aia-tier-grid .content-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow-x: visible;
    scroll-snap-type: none;
    cursor: auto;
    margin-right: 0;
    padding-right: 0;
  }

  .aia-tier-grid .content-grid .content-grid-item {
    width: 100%;
    max-width: none;
    flex: initial;
  }

  /* The block bleeds its row past the right gutter in drag mode — cancel it
     for both the top-level and contained-section cases. */
  .aia-tier-grid.container-xl .content-grid,
  .flexible-container-block.layout-contained
    .container-wrapper
    .aia-tier-grid.container-xl
    .content-grid {
    margin-right: 0;
    padding-right: 0;
  }
}

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

/* ==========================================================================
   .badge-right — accreditation badge image (About page)

   The badge sits alone in the right column of a two-column-container, so
   nothing wraps around it — flex alignment on the figure replaces float.
   Right-aligned beside the text at desktop; when the container stacks its
   columns (≤768px, see two-column-container/style.scss) the badge falls
   under the text, so it switches to left-aligned to match.
   ========================================================================== */

.wp-block-image.badge-right {
  display: flex;
  justify-content: flex-end;
}

.wp-block-image.badge-right img {
  height: 200px;
  width: auto;
}

@media (max-width: 768px) {
  .wp-block-image.badge-right {
    justify-content: flex-start;
  }
}

/* ==========================================================================
   .medium-right / .medium-left — medium image utilities

   Same pattern as .badge-right: flex alignment on the figure, image capped
   at 300px wide. The right variant falls back to left-aligned when columns
   stack (≤768px), matching .badge-right.
   ========================================================================== */

.wp-block-image.medium-right,
.wp-block-image.medium-left {
  display: flex;
}

.wp-block-image.medium-right {
  justify-content: flex-end;
}

.wp-block-image.medium-left {
  justify-content: flex-start;
}

.wp-block-image.medium-right img,
.wp-block-image.medium-left img {
  max-width: 300px;
  height: auto;
}

@media (max-width: 768px) {
  .wp-block-image.medium-right {
    justify-content: flex-start;
  }
}