:root{
  --bg-dark: #221425;
  --bar-dark: #2d2435;
  --accent: #c4b4d1;
  --accent-hover: #ffffff;
  --hover-bg: #776b87;
  --active-bg: #e4e0f0;
  --white: #ffffff;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: #000;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Site-wide max width (Aug 27, 2026): keep photos/hero large but stop the
   whole page from stretching edge-to-edge on very big monitors. Body bg is
   already #000 so the letterboxed margin outside 1600px reads as intentional. */
body{ max-width: 1600px; margin-left: auto; margin-right: auto; }

body.has-page-content{ background: #000000; }

a{ color: var(--white); text-decoration: none; }
a:hover, a:focus{ color: var(--accent); text-decoration: underline; }

img{ max-width: 100%; display: block; }

.skip-link{
  position: absolute; left: -9999px; top: 0;
  background: var(--white); color: #000; padding: 8px 12px; z-index: 1000;
}
.skip-link:focus{ left: 8px; top: 8px; }

/* ---------- Nav ---------- */
.navbar{
  background: var(--bg-dark);
  position: relative;
  z-index: 500;
}
/* Inner wrapper (Aug 31, 2026): matches .layout's max-width/centering so the
   logo and nav links line up with the sidebar/content column on content
   pages, instead of sitting at a fixed 16px while .layout re-centers itself. */
.navbar-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px;
}
.navbar-brand img{ height: 48px; width: auto; display: block; }
.navbar-brand-name{ display:none; }
.navbar-brand:hover, .navbar-brand:focus{ text-decoration:none; }
.navbar-toggle{
  display: flex; flex-direction: column; justify-content: space-between;
  width: 28px; height: 20px; background: none; border: none; cursor: pointer; padding: 0;
}
.navbar-toggle .bar{ display:block; height:3px; width:100%; background: var(--accent); border-radius:1px; transition: transform .2s ease, opacity .2s ease; }
.navbar-toggle[aria-expanded="true"] .bar:nth-child(1){ transform: translateY(8.5px) rotate(45deg); }
.navbar-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity: 0; }
.navbar-toggle[aria-expanded="true"] .bar:nth-child(3){ transform: translateY(-8.5px) rotate(-45deg); }

.nav-menu{ list-style:none; margin:0; padding:0; }
.nav-menu > li > a{
  display:block; padding:10px 14px; font-size:14px; font-weight:600; letter-spacing:.04em; color: var(--white);
}
.nav-menu > li > a:hover, .nav-menu > li > a:focus{ background: var(--hover-bg); color: var(--active-bg); text-decoration:none; }
.nav-menu > li.active > a{ background: var(--active-bg); color:#000; }

.dropdown-toggle{ display:flex !important; align-items:center; gap:6px; }
.caret{ width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid var(--white); display:inline-block; }

.dropdown-menu{ list-style:none; margin:0; padding:6px 0; display:none; border: 1px solid rgba(196,180,209,.45); border-radius:2px; }
.dropdown-col{ list-style:none; margin:0; padding:0; }
.dropdown-col a{ display:block; padding:8px 16px; font-size:13px; color: var(--accent); }
.dropdown-col a:hover{ color: var(--white); background: var(--hover-bg); }
.dropdown-col li.active > a{ color: var(--white); font-weight: 700; }
.dropdown-col .divider{ height:1px; background: rgba(255,255,255,.12); margin:6px 0; }
.dropdown-col .section-label{ padding:8px 16px 4px; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color: var(--white); font-weight:700; }
.dropdown-col .section-label a{ display:block; padding:8px 16px 4px; margin:-8px -16px -4px; color:inherit; text-decoration:none; text-transform:none; }
.dropdown-col .section-label a:hover{ color: var(--white); background: var(--hover-bg); }

.nav-collapse{
  display:none; position:absolute; top:100%; left:0; right:0; background: var(--bg-dark);
  max-height: calc(100vh - 64px); overflow-y:auto; border-top:1px solid rgba(255,255,255,.08);
}
.nav-collapse.open{ display:block; }
.nav-menu.mobile > li{ border-bottom:1px solid rgba(255,255,255,.06); }
.nav-menu.mobile > li > a{ padding:14px 18px; }
.dropdown-menu.mobile-open{ display:block; }

/* ---------- Carousel (homepage) ---------- */
.carousel{ position:relative; width:100%; overflow:hidden; background:#000; touch-action: pan-y; }
.carousel-track{ display:flex; transition: transform .5s ease; height:100%; }
.carousel-slide{ position:relative; min-width:100%; height:100%; }
.carousel-slide img{ width:100%; height:auto; aspect-ratio: 3 / 4; max-height:78vh; object-fit:cover; display:block; }
.carousel-text-slide{ width:100%; aspect-ratio: 3 / 4; max-height:78vh; background: var(--bg-dark); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:32px 24px; }
.carousel-text-slide-eyebrow{ color: var(--accent); font-size:19.5px; letter-spacing:.04em; margin:0 0 12px; }
.carousel-text-slide-headline{ color: var(--white); font-size:33px; font-weight:700; margin:0; line-height:1.3; max-width:560px; }
.carousel-text-slide-body{ color: var(--white); font-size:24px; line-height:1.6; margin:0; max-width:560px; }
.carousel-text-slide-list{ list-style:none; margin:14px 0 0; padding:0; text-align:left; max-width:520px; }
.carousel-text-slide-list li{ color: var(--white); font-size:21px; line-height:1.7; margin:0 0 6px; padding-left:26px; position:relative; }
.carousel-text-slide-list li::before{ content:'\2713'; position:absolute; left:0; color: var(--accent); font-weight:700; }
.carousel-caption{ position:absolute; right:0; bottom:0; left:0; padding:14px 16px; text-align:right; }
.carousel-caption h2{ display:inline-block; margin:0; padding:8px 14px; color: var(--white); font-size:15px; font-weight:700; background: rgba(0,0,0,.6); border-radius:2px; text-shadow:0 1px 2px rgba(0,0,0,.5); }
.carousel-caption a{ display:block; }
.carousel-caption a:hover{ text-decoration:none; }
.carousel-caption a:hover h2{ color: var(--accent); }
.carousel-control{ position:absolute; top:0; bottom:0; width:15%; display:flex; align-items:center; background:transparent; border:none; cursor:pointer; color: var(--white); font-size:28px; z-index:5; opacity:.75; }
.carousel-control:hover{ opacity:1; }
.carousel-control.prev{ left:0; justify-content:flex-start; padding-left:6px; }
.carousel-control.next{ right:0; justify-content:flex-end; padding-right:6px; }
.carousel-control svg{ width:34px; height:34px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
.carousel-indicators{ position:absolute; z-index:5; bottom:10px; left:0; right:0; display:flex; justify-content:center; gap:6px; margin:0; padding:0; list-style:none; }
.carousel-indicators button{ width:8px; height:8px; border-radius:50%; border:1px solid rgba(255,255,255,.8); background:rgba(255,255,255,.25); padding:0; cursor:pointer; }
.carousel-indicators button.active{ background: var(--white); }

/* ---------- Category bar (homepage) ---------- */
.category-bar{ background: var(--bar-dark); padding:14px 8px; }
.category-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:4px 4px; }
.category-list a{ display:inline-block; padding:8px 10px; font-size:13px; color: var(--white); white-space:nowrap; }
.category-list a:hover{ color: var(--accent); text-decoration:underline; }

/* ---------- Page banner (kicker) ---------- */
.page-banner{ background: var(--bg-dark); padding: 22px 18px; }
.page-banner-inner{ max-width: 1100px; margin: 0 auto; }
.page-banner p.kicker{ margin:0; color: var(--accent); font-size:15px; font-weight:600; letter-spacing:.02em; }

/* ---------- Layout: sidebar + content ---------- */
.layout{ max-width: 1200px; margin: 0 auto; display:block; padding: 0; }
.content-inner{ padding: 20px 18px 40px; }

.sidebar{ background: var(--bar-dark); }
.sidebar-toggle{ }
.sidebar-toggle summary{
  cursor:pointer; list-style:none; color: var(--white); font-weight:700; font-size:14px;
  padding: 14px 18px; display:flex; align-items:center; justify-content:space-between;
  letter-spacing:.03em; text-transform: uppercase;
}
.sidebar-toggle summary::-webkit-details-marker{ display:none; }
.sidebar-toggle summary::after{ content:'▾'; color: var(--accent); transition: transform .2s ease; }
.sidebar-toggle[open] summary::after{ transform: rotate(180deg); }
.sidebar nav{ padding: 0 18px 18px; }
.sidebar-group-label{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color: var(--white); font-weight:700; margin: 24px 0 4px; }
.sidebar-group-label:first-child{ margin-top: 4px; }
.sidebar ul{ list-style:none; margin:0; padding:0; }
.sidebar li a{ display:block; padding:7px 0; font-size:13px; color: var(--accent); border-bottom: 1px solid rgba(255,255,255,.06); }
.sidebar li a:hover{ color: var(--white); text-decoration:none; }
.sidebar li.active > a{ color: var(--white); font-weight:700; }
.sidebar li.top-link a{ font-size: 14px; font-weight: 700; color: var(--white); padding: 10px 0; border-bottom: none; }

/* Sept 1, 2026: sidebar titles that no longer expand/collapse. Leadership and
   Project List pages drop the title row entirely; Journey keeps its title but
   as a plain heading instead of a <details>/<summary> toggle. */
.sidebar-static > nav:first-child{ padding-top: 14px; }
.sidebar-toggle-title{
  color: var(--white); font-weight:700; font-size:14px;
  padding: 14px 18px; display:flex; align-items:center;
  letter-spacing:.03em; text-transform: uppercase;
}

/* ---------- Prose / content (dark theme, matching the live site) ---------- */
.content-title{ color:#ffffff; font-size: 22px; font-weight:700; margin: 0 0 14px; }
.content-kicker{ color: var(--accent); font-size:16px; font-weight:400; letter-spacing:.01em; margin: -6px 0 18px; }
.prose{ max-width: 760px; }
.prose p{ color: var(--accent); font-size:16px; line-height:1.65; margin: 0 0 16px; }
.prose h2.chapter{ color:#ffffff; font-size:18px; font-weight:700; margin: 34px 0 10px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.15); scroll-margin-top: 90px; }
.prose h2.chapter:first-of-type{ border-top:none; padding-top:0; margin-top: 10px; }
.prose ul{ margin: 0 0 16px; padding-left: 20px; }
.prose ul li{ color: var(--accent); font-size:15px; line-height:1.6; margin-bottom:6px; }
.prose figure{ margin: 0 0 18px; }
.prose figure img{ width:100%; border-radius: 3px; }
.prose a{ color:#ffffff; text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover, .prose a:focus{ color: var(--accent-hover); }
.prose figure a, .gallery-grid a{ display:block; }

.pdf-download{ display:inline-flex; align-items:center; gap:7px; padding:7px 14px; margin: 0 0 18px; border:1px solid rgba(196,180,209,.45); border-radius:20px; color: var(--accent); font-size:13px; font-weight:600; text-decoration:none; background: rgba(196,180,209,.06); }
.pdf-download:hover, .pdf-download:focus{ color: var(--white); background: var(--hover-bg); text-decoration:none; }
.pdf-download svg{ width:14px; height:14px; flex-shrink:0; }
.pdf-download.pdf-download-all{ font-size:14px; padding:10px 20px; margin: 6px 0 22px; }
.pdf-download.pdf-download-all svg{ width:16px; height:16px; }
.prose figure a img, .gallery-grid a img{ transition: opacity .15s ease; }
.prose figure a:hover img, .gallery-grid a:hover img{ opacity: .85; }
.prose figure.two-up, .gallery-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-bottom:18px; }

.chapter-pills{ display:flex; flex-wrap:wrap; gap:6px; margin: 0 0 24px; padding: 12px; background: rgba(255,255,255,.06); border-radius: 4px; }
.chapter-pills a{ display:inline-block; padding:6px 12px; font-size:12px; border-radius: 999px; background: var(--bar-dark); color: var(--white); }
.chapter-pills a:hover{ background: var(--hover-bg); text-decoration:none; }

.img-missing{ background:#1a1a1a; display:flex; align-items:center; justify-content:center; min-height:120px; color:#888; font-size:12px; border:1px dashed #444; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--bg-dark); color: var(--white); padding:16px; margin-top:24px; text-align:center; font-size:12px; }
.site-footer a{ color: var(--accent); }
.site-footer .footer-inner{ display:flex; flex-direction:column; gap:6px; }

/* ---------- Desktop / tablet (min-width 769px) ---------- */
@media (min-width: 769px){
  .navbar-inner{ padding:10px 18px; }
  .navbar-brand img{ height:56px; }
  .navbar-toggle{ display:none; }

  .nav-collapse{ display:block; position:static; background:transparent; max-height:none; overflow:visible; border-top:none; }
  .nav-menu{ display:flex; align-items:center; }
  .nav-menu.mobile > li{ border-bottom:none; }
  .nav-menu > li{ position:relative; }
  .nav-menu > li > a{ padding:12px 16px; }
  .dropdown-menu{ position:absolute; top:100%; right:0; min-width:480px; background: var(--bg-dark); box-shadow:0 8px 20px rgba(0,0,0,.35); border-radius:2px; display:none; }
  .dropdown-menu{ flex-wrap:wrap; }
  .dropdown-col{ min-width:200px; }
  #projectsMenu{ left:0; right:auto; }
  #leadershipMenu{ right:0; left:auto; transform:none; width:700px; max-width:calc(100vw - 32px); }
  .nav-menu > li.dropdown:hover > .dropdown-menu, .nav-menu > li.dropdown:focus-within > .dropdown-menu{ display:flex; }
  .dropdown-col{ flex:1; min-width:0; padding:6px 0; }
  .dropdown-col + .dropdown-col{ border-left:1px solid rgba(255,255,255,.12); }

  /* Sept 10, 2026: switched from a viewport-height box (58vh) to a fixed
     aspect-ratio matching the actual exported slide images (1000x440,
     i.e. 25:11). A vh-based height with a fluid width let the box's
     aspect ratio drift as the window was resized, which made
     object-fit:cover re-crop the photo each time - looking like a slight
     zoom on resize. A fixed aspect-ratio scales the whole box uniformly
     instead, so the crop never changes, and since it matches the source
     images exactly, the photos now show edge-to-edge with no cropping at
     all (mobile is untouched - still its own 3:4 box above). */
  .carousel-slide img{ height:auto; aspect-ratio:25/11; min-height:0; max-height:none; }
  .carousel-text-slide{ height:auto; aspect-ratio:25/11; min-height:0; max-height:none; }
  .carousel-text-slide-headline{ font-size:42px; }
  .carousel-text-slide-body{ font-size:27px; }
  .carousel-text-slide-list li{ font-size:22px; }
  .carousel-caption{ left:55%; padding:22px 24px; }
  .carousel-caption h2{ font-size:20px; padding:10px 18px; }
  .carousel-control{ font-size:40px; width:8%; }
  .carousel-control svg{ width:52px; height:52px; }
  .category-bar{ padding:18px 12px; }
  .category-list a{ font-size:15px; padding:10px 14px; }
  .site-footer .footer-inner{ flex-direction:row; justify-content:space-between; max-width:1100px; margin:0 auto; }

  .page-banner{ padding: 34px 24px; }
  .page-banner p.kicker{ font-size:18px; }

  .layout.with-sidebar{ display:grid; grid-template-columns: 260px 1fr; gap: 0; align-items:start; }
  .sidebar{ position: sticky; top:0; align-self:start; }
  .sidebar-toggle summary{ cursor:default; }
  .sidebar-toggle summary::after{ content:''; }
  .content-inner{ padding: 32px 32px 60px; }
  .content-title{ font-size:26px; }
  .content-kicker{ font-size:18px; }
}

@media (min-width: 992px){
  .nav-menu > li > a{ font-size:15px; }
  .category-list a{ font-size:16px; }
}

@media (prefers-reduced-motion: reduce){
  .carousel-track{ transition:none; }
  .navbar-toggle .bar{ transition:none; }
}


/* ---------- Home hero (People and Places Inspire Architecture) ---------- */
.home-hero{ background: var(--bg-dark); padding: 32px 18px; text-align:center; border-bottom: 1px solid rgba(255,255,255,.08); }
.home-hero-inner{ max-width: 760px; margin:0 auto; }
.home-hero p.kicker{ margin:0 0 12px; color: var(--white); font-size:24px; font-weight:800; letter-spacing:.01em; text-transform:none; }
.home-hero p.lead{ margin:0 0 18px; color: var(--accent); font-size:15px; line-height:1.6; }
.home-hero p.lead .draft-note{ display:block; color:#9a8aa8; font-size:12px; font-style:italic; margin-bottom:6px; }
.home-hero a.cta{ color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.home-hero a.cta:hover{ color: var(--accent); }

@media (min-width: 769px){
  .home-hero{ padding: 56px 24px; }
  .home-hero p.kicker{ font-size:32px; }
  .home-hero-inner{ max-width: 820px; }
}

@media (min-width: 1600px){
  .home-hero p.kicker{ font-size:38px; }
  .home-hero-inner{ max-width: 900px; }
}

/* ---------- Featured project grid ---------- */
.featured-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; margin: 20px 0 28px; }
.featured-card{ display:block; border:1px solid rgba(255,255,255,.14); border-radius:4px; overflow:hidden; }
.featured-card:hover{ border-color: var(--accent); text-decoration:none; }
.featured-card .photo-pending{ min-height:120px; border:none; border-radius:0; }
.featured-card .featured-card-body{ padding:10px 12px 12px; }
.featured-card .featured-cat{ display:block; color: var(--accent); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
.featured-card .featured-title{ display:block; color:#fff; font-size:14px; font-weight:700; }
.featured-card:hover .featured-title{ color: var(--accent); }

@media (min-width: 769px){
  .featured-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); gap:20px; }
}

/* ---------- Photo placeholder (new photography pending) ---------- */
.photo-pending{ background:#1a1a1a; border:1px dashed #4a3f52; color:#9a8aa8; display:flex; align-items:center; justify-content:center; text-align:center; font-size:12px; line-height:1.5; padding: 24px 16px; min-height:180px; border-radius:3px; }


/* ---------- Story inline figures + lightbox (Aug 26 update) ---------- */
.story-figure{ width:42%; margin:6px 0 18px; }
.story-figure.float-left{ float:left; margin-right:22px; }
.story-figure.float-right{ float:right; margin-left:22px; }
.story-figure img{ width:100%; border-radius:3px; cursor:zoom-in; display:block; }
.story-figure figcaption{ color:#9a8aa8; font-size:12px; font-style:italic; margin-top:6px; line-height:1.4; }
.prose h2.chapter{ clear:both; }
.story-chain{ color:#fff; font-size:17px; line-height:1.7; font-style:italic; }
.story-pullquote{ color:#fff; font-size:19px; line-height:1.6; margin:22px 0; }
.story-see-project{ clear:both; padding-top:14px; border-top:1px solid rgba(255,255,255,.15); }
.story-attribution{ color:#fff; font-weight:600; text-align:right; }
.story-figure-full{ width:100%; float:none; clear:both; margin:20px 0 26px; }
.story-thumb-grid{ display:flex; flex-wrap:wrap; gap:14px; clear:both; margin:10px 0 26px; }
.story-thumb-grid figure{ flex:1 1 150px; max-width:190px; margin:0; }
.story-thumb-grid img{ width:100%; height:120px; object-fit:cover; border-radius:3px; cursor:zoom-in; display:block; }
.story-thumb-grid figcaption{ color:#9a8aa8; font-size:11px; font-style:italic; margin-top:5px; line-height:1.35; }
.story-thumb-grid-caption{ color:#9a8aa8; font-size:13px; font-style:italic; margin:0 0 4px; clear:both; }
.story-figure-pair{ display:flex; flex-wrap:wrap; gap:24px; clear:both; margin:14px 0 24px; align-items:flex-start; }
.story-figure-pair .story-figure{ float:none; width:auto; flex:1 1 260px; max-width:340px; margin:0; }
.story-testimonial{ font-style:italic; color:#d9cfe0; font-size:15px; line-height:1.7; margin:20px 0 4px; padding-left:16px; border-left:2px solid rgba(255,255,255,.25); }
@media (max-width: 640px){
  .story-thumb-grid figure{ flex:1 1 42%; }
}
.content-subtitle{ color:#fff; font-size:19px; font-weight:700; margin:30px 0 6px; }
.story-list{ padding-left:22px; margin:10px 0 0; }
.story-list li{ color:var(--accent); font-size:15px; line-height:1.7; margin-bottom:6px; }
.story-list li a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
.story-list li a:hover{ color:var(--accent); }
.story-list li.story-future{ color:#9a8aa8; }
.story-list .story-soon{ font-size:12px; font-style:italic; }

.lightbox-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.92); display:none; align-items:center; justify-content:center; z-index:2000; padding:24px; }
.lightbox-overlay.open{ display:flex; }
.lightbox-box{ max-width:min(92vw,1100px); max-height:90vh; display:flex; flex-direction:column; align-items:center; }
.lightbox-box img{ max-width:100%; max-height:76vh; width:auto; border-radius:3px; }
.lightbox-caption{ color:#fff; font-size:14px; margin-top:14px; text-align:center; max-width:700px; }
.lightbox-close{ position:fixed; top:18px; right:22px; background:none; border:none; color:#fff; font-size:34px; line-height:1; cursor:pointer; z-index:2001; }
.lightbox-close:hover{ color: var(--accent); }

@media (max-width: 640px){
  .story-figure{ float:none; width:100%; margin:0 0 18px; }
}
@media (max-width: 640px){
  .story-figure-pair{ gap:14px; }
  .story-figure-pair .story-figure{ flex:1 1 100%; max-width:100%; }
}


/* ---------- Story backlink (Aug 26 update pt 2) ---------- */
.story-backlink{ color:#9a8aa8; font-size:13px; margin:0 0 20px; }
.story-backlink a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
.story-backlink a:hover{ color:var(--accent); }

/* ==== LEFT-SIDE NAV (accordion), promoted sitewide Sept 9, 2026 ====
   Applies at desktop widths (>=769px) via body.nav-left-variant, now present
   on every page. Below 769px this block does nothing and the page falls
   back completely to the original mobile hamburger menu above. Companion
   JS: assets/js/nav-left-accordion.js (also desktop-only via its own
   matchMedia guard), included on every page right after site.js. */
.navbar-footer{ display:none; }
@media (min-width: 769px){
  .nav-left-variant .page-shell{ display:flex; align-items:stretch; }
  .nav-left-variant header{ flex:0 0 auto; }
  .nav-left-variant .navbar{ width:180px; flex:0 0 180px; height:100%; }
  .nav-left-variant .navbar-inner{
    display:flex; flex-direction:column;
    align-items:stretch; justify-content:flex-start;
    max-width:none; margin:0; padding:22px 14px; box-sizing:border-box;
    position:sticky; top:0; height:100vh; max-height:100vh;
  }
  .nav-left-variant .navbar-brand{ display:flex; flex-direction:column; align-items:flex-start; margin-bottom:26px; flex:0 0 auto; }
  .nav-left-variant .navbar-brand img{ height:36px; }
  .nav-left-variant .navbar-brand-name{
    display:block; margin-top:7px; color:var(--accent); font-size:8.5px; font-weight:400;
    line-height:1.3; letter-spacing:.01em; white-space:nowrap;
  }
  .nav-left-variant .navbar-toggle{ display:none; }
  .nav-left-variant .nav-collapse{
    display:block; position:static; background:transparent; border-top:none;
    flex:0 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
    margin:0 -14px; padding:0 14px;
  }
  .nav-left-variant .nav-menu{ display:block; }
  .nav-left-variant .nav-menu > li{ position:relative; border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:6px; margin-bottom:6px; }
  .nav-left-variant .nav-menu > li:last-child{ border-bottom:none; }
  .nav-left-variant .nav-menu > li > a{ padding:10px 2px; font-size:14px; opacity:.7; transition: opacity .15s ease; white-space:nowrap; }
  .nav-left-variant .nav-menu > li.dropdown.nav-open > a,
  .nav-left-variant .nav-menu > li.active > a{ opacity:1; }
  .nav-left-variant .nav-menu > li.active > a{ background:transparent; color:var(--white); font-weight:700; }
  .nav-left-variant .caret{ display:inline-block; margin-left:6px; opacity:.8; transition: transform .18s ease; }
  .nav-left-variant .dropdown.nav-open > .dropdown-toggle .caret{ transform: rotate(180deg); }
  /* Sept 15, 2026 (Bill): rotation restored for genuine open/close, but see
     nav-left-accordion.js - it now skips this transition (sets the caret's
     rotated state instantly, no animation) when a page load keeps the SAME
     top-level section open as the page you navigated from, so clicking
     between Leadership/Expertise/Process/sub-links no longer replays the
     spin on every page load. The animation still plays when the open
     section actually changes (or opens from closed). */
  .nav-left-variant .dropdown-menu{
    display:none !important; position:static; border:none; box-shadow:none; background:transparent;
    padding:0 0 10px 2px; min-width:0;
  }
  .nav-left-variant .dropdown.nav-open > .dropdown-menu{ display:block !important; }
  .nav-left-variant .dropdown-col{ flex:none; width:100%; min-width:0; padding:2px 0; }
  .nav-left-variant .dropdown-col + .dropdown-col{ border-left:none; border-top:1px solid rgba(255,255,255,.08); margin-top:6px; padding-top:8px; }
  .nav-left-variant .dropdown-col a{ padding:5px 0 5px 6px; font-size:11px; white-space:nowrap; }
  /* "It: The Architecture of Existence" is the one Leadership link too long to fit on one line at the narrower 60% width; let just this one wrap to two lines instead of getting silently clipped by .nav-collapse's overflow-x:hidden. */
  .nav-left-variant .dropdown-col a[href*="TheArchitectureOfExistence"]{ white-space:normal; }
  .nav-left-variant .dropdown-col .section-label{ padding:2px 0 4px; white-space:nowrap; }
  .nav-left-variant .dropdown-col .section-label a{ margin:0; padding:2px 0 4px; }
  .nav-left-variant #leadershipMenu{ width:auto !important; max-width:none !important; }
  .nav-left-variant #leadershipMenu .dropdown-col:first-of-type > li.section-label:first-child{ display:none; }
  .nav-left-variant main{ flex:1 1 auto; min-width:0; }
  .nav-left-variant .sidebar{ display:none; }
  .nav-left-variant .layout.with-sidebar{ display:block; }
  .nav-left-variant .navbar-footer{ display:block; flex:0 0 auto; margin-top:24px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); font-size:11px; line-height:1.6; }
  .nav-left-variant .navbar-footer-email{ display:block; color:var(--white); text-decoration:underline; margin-bottom:4px; }
  .nav-left-variant .navbar-footer-email:hover{ opacity:.8; }
  .nav-left-variant .navbar-footer-copyright{ margin:0; color:var(--white); }
  .nav-left-variant .site-footer{ display:none; }
}

/* ---------- Journey stories built from Fani's Word documents (Sept 28, 2026) ----------
   Photos are laid out in the same order, grouping and relative size as in the Word
   files: each .wd-figs row holds the images that sat together on one line in Word,
   and each figure's width is its Word width as a share of the text column. */
.story-eyebrow{ color:#9a8aa8; font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; margin:0 0 6px; }
.wd-story .wd-figs{ display:flex; justify-content:center; align-items:flex-end; gap:12px; clear:both; margin:18px 0 20px; }
.wd-story .wd-figs figure{ margin:0; flex:0 1 auto; min-width:0; }
.wd-story .wd-figs img{ width:100%; height:auto; display:block; border-radius:3px; cursor:zoom-in; }
.wd-story .wd-caption{ color:#9a8aa8; font-size:13px; font-style:italic; text-align:center; margin:-10px 0 20px; }
.wd-story .wd-center{ text-align:center; }
.wd-story .story-testimonial{ font-size:15px; }
.wd-letters{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:16px; margin:14px 0 28px; }
.wd-letter{ display:flex; flex-direction:column; gap:6px; text-decoration:none !important; }
.wd-letter img{ width:100%; aspect-ratio:8.5/11; object-fit:cover; object-position:top; background:#fff; border-radius:2px; box-shadow:0 1px 4px rgba(0,0,0,.5); transition:opacity .15s ease; }
.wd-letter:hover img{ opacity:.85; }
.wd-letter-name{ color:#fff; font-size:12px; line-height:1.35; }
.wd-letter-date{ color:#9a8aa8; font-size:11px; }
@media (max-width: 640px){
  .wd-story .wd-figs{ flex-wrap:wrap; gap:8px; }
  .wd-story .wd-figs figure{ width:auto !important; flex:1 1 45%; }
  .wd-story .wd-figs figure:only-child{ flex-basis:100%; }
}
.wd-story .wd-figs figcaption{ color:#9a8aa8; font-size:12px; line-height:1.4; margin-top:6px; }

/* Journey intro: two-column project index (title | place), as in Fani's Journey document */
.journey-index li{ display:grid; grid-template-columns:8.5em 1fr; gap:12px; }
.journey-index li span{ color:var(--accent); }
@media (max-width: 480px){ .journey-index li{ grid-template-columns:1fr; gap:0; } }

/* Oct 2, 2026: Fani asked for the top lines of each project (label, title,
   location, opening question) to read bolder. Applies to Journey pages and
   the matching project sections on What People Say. Title and location
   lines are bolder sitewide so every page with this header matches. */
.story-eyebrow, .prose p.story-eyebrow{ color:#ffffff; font-size:15px; font-weight:800; }
.content-title, .story-topbar ~ .content-title, .story-eyebrow ~ .content-title{ color:#ffffff; font-size:28px; font-weight:800; }
.content-kicker, .story-topbar ~ .content-kicker, .story-eyebrow ~ .content-kicker{ color:#ffffff; font-size:19px; font-weight:700; }
.story-topbar ~ .wd-story > p:first-child strong, .story-eyebrow ~ .wd-story > p:first-child strong{ color:#ffffff; font-size:19px; font-weight:800; }
section[id^="journey-"] > h2.chapter{ font-size:24px; font-weight:800; }
section[id^="journey-"] > .wps-kicker{ color:#ffffff; font-size:19px; font-weight:700; font-style:normal; }
section[id^="journey-"] > .wps-question strong{ color:#ffffff; font-size:19px; font-weight:800; }
@media (min-width:769px){
  .story-eyebrow{ font-size:16px; }
  .content-title, .story-topbar ~ .content-title, .story-eyebrow ~ .content-title{ font-size:32px; }
  .content-kicker, .story-topbar ~ .content-kicker, .story-eyebrow ~ .content-kicker{ font-size:21px; }
  section[id^="journey-"] > h2.chapter{ font-size:28px; }
  section[id^="journey-"] > .wps-kicker{ font-size:21px; }
}

/* Oct 2, 2026: "What People Say" link moved to the top right of each Journey page */
.story-topbar{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 6px; }
.story-topbar .story-eyebrow{ margin:0; }
.wps-top-link{ display:inline-block; padding:8px 16px; border:1px solid #ffffff; border-radius:999px; color:#ffffff; font-size:14px; font-weight:700; letter-spacing:.02em; text-decoration:none; background:rgba(255,255,255,.08); white-space:nowrap; }
.wps-top-link:hover, .wps-top-link:focus{ background:#ffffff; color:var(--bg-dark); text-decoration:none; }
@media (min-width:769px){ .wps-top-link{ font-size:15px; padding:9px 18px; } }

/* Oct 6, 2026: Fani's Oct 5 corrections, items 1 and 2.
   1) Larger body text. Fani asked for 14 or 16 point (to be settled on the
      Oct 6 call). 14pt = ~19px, 16pt = ~21px. Change --body-size below to
      switch; everything in the reading column follows it.
   2) Bold text in white instead of the lavender body color. */
:root{ --body-size: 17px; --body-size-desktop: 19px; /* 16pt option: 21px */ }
.prose p, .prose ul li, .story-list li{ font-size: var(--body-size); line-height:1.65; }
.wd-story .story-testimonial, .story-testimonial{ font-size: var(--body-size); }
.prose strong, .prose b, .story-testimonial strong, .story-testimonial b{ color:#ffffff; font-weight:700; }
@media (min-width:769px){
  .prose{ max-width: 820px; }
  .prose p, .prose ul li, .story-list li,
  .wd-story .story-testimonial, .story-testimonial{ font-size: var(--body-size-desktop); }
}

/* Oct 6, 2026: left nav scaled up to sit better next to the larger body text
   (top-level 14px -> 16px, sub-links 11px -> 14px). Nav widened 180px -> 220px
   so longer links like "Saving Clients' Money" still fit on one line. */
@media (min-width: 769px){
  .nav-left-variant .navbar{ width:220px; flex:0 0 220px; }
  .nav-left-variant .navbar-inner{ padding:24px 16px; }
  .nav-left-variant .navbar-brand img{ height:40px; }
  .nav-left-variant .navbar-brand-name{ font-size:10px; }
  .nav-left-variant .nav-menu > li > a{ font-size:16px; padding:11px 2px; }
  .nav-left-variant .dropdown-col a{ font-size:14px; padding:6px 0 6px 6px; }
  .nav-left-variant .dropdown-col .section-label,
  .nav-left-variant .dropdown-col .section-label a{ font-size:12px; }
  .nav-left-variant .navbar-footer{ font-size:12px; }
}

/* ---------- Oct 6 call fixes ---------- */
/* Side-by-side images: equal heights. Widths are set per image from its aspect ratio (--ar). */
.wd-story .wd-figs.wd-eq{ align-items:flex-start; }
.gallery-grid.eq{ display:flex; gap:10px; align-items:flex-start; }
.gallery-grid.eq > img{ flex: var(--ar,1) 1 0%; min-width:0; width:100%; height:auto; display:block; }
@media (max-width: 640px){
  .wd-story .wd-figs.wd-eq{ flex-wrap:nowrap; }
  .wd-story .wd-figs.wd-eq figure{ flex: var(--ar,1) 1 0% !important; }
}
/* Lightbox: size is set in site.js (2x the on-page size, capped at the screen) */
.lightbox-overlay{ padding:16px; }
.lightbox-box{ max-width:none; max-height:none; }
.lightbox-box img{ max-width:none; max-height:none; }

/* Oct 6: "What People Say" button on Journey pages, larger and bolder */
.wps-top-link{ font-size:17px; font-weight:800; padding:11px 22px; border-width:2px; letter-spacing:.03em; }
@media (min-width:769px){ .wps-top-link{ font-size:19px; padding:12px 26px; } }

/* Oct 6: emphasized key questions inside story text */
.prose strong.key-question{ color:#ffffff; font-weight:800; font-size:18px; }

/* Oct 6: line up the links under "See the built project:" / "See what people say:" */
.story-see-project .see-label{ display:inline-block; min-width:11em; }