/*!
Theme Name: matisse
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: matisse
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

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
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# 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;

  /* ==========================================================
   * 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 1600px — the rail
     is centered and nothing touches the viewport edge — then a fixed two-step
     gutter once the rail meets the viewport. Swapped in media queries below
     the :root block; blocks reference it as padding-inline: var(--aia-gutter). */
  --aia-gutter: 0px;

  /* ==========================================================
   * 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;

  /* 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 @1600 → 1rem @768.) */
@media (max-width: 1600px) {
  :root {
    --aia-gutter: 1.5rem;
  }
}
@media (max-width: 768px) {
  :root {
    --aia-gutter: 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, 5vw, 3.5rem);
  letter-spacing: 0.1rem;
}

h2 {
  font-size: clamp(1.75rem, 4vw, 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;
}

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 slides the page
      sideways 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.

   The rail must be a direct child of <body>, NOT a sibling of .aia-hdr:
   `body.aia-menu-open .aia-hdr ~ *` (assets/aia-nav.css) translates every
   header sibling by the drawer width, which would drag the rail with it. */
.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 translated sideways 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 */
.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);
  box-shadow: var(--card-shadow);
  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(32px, 4vw, 48px);
  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: 48px;
}
.post.type-post .entry-content h2 {
  font-size: 36px;
}
.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: 0.9rem;
    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 */
.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 @1600 / 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 @1600 / 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;
}

/* The Events Calendar — single event + list/calendar views. */
.single-tribe_events .site-main,
.post-type-archive-tribe_events .site-main,
.tribe-events-pg-template,
.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 }`
   — an ID selector, so it wins over the class rule above regardless of
   load order. The wrapper always carries both the id and the class, so
   this just restates the same rule 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. */
#tribe-events-pg-template {
  max-width: var(--container-xl, 1600px) !important;
}
/* #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),
.matisse-dir-cta__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,
.matisse-dir-cta__btn--primary.matisse-btn:not(:only-child):hover,
.matisse-dir-cta__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,
.matisse-dir-cta__btn--primary.matisse-btn:not(:only-child):hover
  .matisse-btn__icon,
.matisse-dir-cta__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) {
  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):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: 21px;
  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: 21px;
  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-dir-cta__btn--primary); only the spacing lives here because
   the dir-cta block stylesheet doesn't load on these templates. */
.aia-dir-cta .matisse-dir-cta__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, 3.5rem);
}
.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;
}