/* ==========================================================================
   APdS Architects — design system for Hello Elementor + Elementor
   Palette derived from the source OKLCH tokens.
   ========================================================================== */
:root {
  --apds-bg: #FCFBF9;
  --apds-fg: #1C1917;
  --apds-primary: #1C1917;
  --apds-primary-fg: #F5F4F2;
  --apds-accent: #C97A41;        /* copper */
  --apds-accent-light: #E0996A;
  --apds-muted: #68625E;
  --apds-secondary: #F1EFEC;
  --apds-border: #E5E2DD;
}

/* ---------- Base ---------- */
body.apds {
  background-color: var(--apds-bg);
  color: var(--apds-fg);
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.apds h1, body.apds h2, body.apds h3, body.apds h4, body.apds h5, body.apds h6 {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 200;
  letter-spacing: -0.01em;
}
html { scroll-behavior: smooth; }
body.apds figure, body.apds figcaption { font-style: normal; margin: 0; }
body.apds { overflow-x: hidden; }
.apds-hero, .apds-hero__content { max-width: 100%; box-sizing: border-box; }
.apds-hero__tagline { max-width: min(42rem, 100%); }

/* Utility text colours (referenced via Elementor CSS Classes) */
.apds-accent-text { color: var(--apds-accent) !important; }
.apds-muted-text { color: var(--apds-muted) !important; }
.apds-light-text { color: var(--apds-primary-fg) !important; }

/* Eyebrow / small tracked labels */
.apds-eyebrow { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--apds-accent); font-weight: 400; margin: 0; }
.apds-eyebrow-muted { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--apds-muted); font-weight: 400; margin: 0; }

/* Headings */
.apds-h1 .elementor-heading-title, .apds-h1 { font-size: clamp(30px,4.2vw,48px); font-weight: 200; line-height: 1.15; letter-spacing: -0.01em; }
.apds-h2 .elementor-heading-title, .apds-h2 { font-size: clamp(24px,3vw,30px); font-weight: 200; line-height: 1.2; }
.apds-h3 .elementor-heading-title, .apds-h3 { font-size: clamp(28px,3.4vw,40px); font-weight: 200; line-height: 1.1; }
.apds-h4 .elementor-heading-title, .apds-h4 { font-size: clamp(18px,2.2vw,22px); font-weight: 300; letter-spacing: 0.02em; }

/* Body copy */
.apds-body, .apds-body p { color: var(--apds-muted); font-weight: 300; line-height: 1.85; font-size: 14px; }
.apds-body.lg, .apds-body.lg p { font-size: 16px; }
.apds-body p { margin: 0 0 16px; } .apds-body p:last-child { margin: 0; }
.apds-justify, .apds-justify p { text-align: left; }
.apds-lede, .apds-lede p { color: rgba(28,25,23,.9); font-weight: 300; font-size: clamp(16px,2vw,20px); line-height: 1.7; }
.apds-lede p { margin: 0 0 20px; } .apds-lede p:last-child { margin: 0; }
.apds-lede a { color: var(--apds-fg); text-decoration: underline; text-underline-offset: 4px; }
.apds-lede a:hover { color: var(--apds-accent); }

/* Two-column proportional grids (map the source's 12-col spans) */
.apds-g57.e-con-full, .apds-g57 > .e-con-inner { display: grid !important; grid-template-columns: 7fr 5fr; gap: 48px; align-items: center; }
.apds-g75.e-con-full, .apds-g75 > .e-con-inner { display: grid !important; grid-template-columns: 7fr 5fr; gap: 48px; align-items: center; }
.apds-g48.e-con-full, .apds-g48 > .e-con-inner { display: grid !important; grid-template-columns: 4fr 8fr; gap: 48px; align-items: start; }
.apds-lg.e-con-full,  .apds-lg  > .e-con-inner { display: grid !important; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
.apds-lg-rev.e-con-full, .apds-lg-rev > .e-con-inner { display: grid !important; grid-template-columns: 7fr 5fr; gap: 48px; align-items: start; }
.apds-gcontact.e-con-full, .apds-gcontact > .e-con-inner { display: grid !important; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: start; }
@media (max-width: 900px) {
  .apds-g57.e-con-full, .apds-g75.e-con-full, .apds-g48.e-con-full,
  .apds-lg.e-con-full, .apds-lg-rev.e-con-full, .apds-gcontact.e-con-full { grid-template-columns: 1fr; }
}
.apds-sticky { position: sticky; top: 120px; }
@media (max-width: 900px){ .apds-sticky { position: static; } }
.apds-scope-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 24px; margin-top: 40px; }
@media (max-width: 640px){ .apds-scope-grid { grid-template-columns: repeat(2, 1fr); } }

/* Accent rule + diamond (the recurring divider motif) */
.apds-rule { display: flex; align-items: center; gap: 12px; }
.apds-rule::before { content: ""; display: block; width: 64px; height: 1px; background: var(--apds-accent); }
.apds-rule::after  { content: ""; display: block; width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--apds-accent); }
.apds-rule.center { justify-content: center; }
.apds-rule.short::before { width: 48px; }

/* Native Divider widget styled with the diamond motif (anchored to the line's end) */
.apds-rule-w .elementor-divider-separator { position: relative; overflow: visible; }
.apds-rule-w .elementor-divider-separator::after {
  content: ""; position: absolute; left: 100%; top: 50%;
  width: 7px; height: 7px; margin-left: 12px;
  transform: translateY(-50%) rotate(45deg);
  border: 1px solid var(--apds-accent);
}

/* ---------- Grid helpers (override container flex → grid) ----------
   Full containers (e-con-full) hold children directly; boxed use .e-con-inner. */
.apds-grid.e-con-full, .apds-grid > .e-con-inner { display: grid !important; gap: 2rem; }
.apds-grid-2.e-con-full, .apds-grid-2 > .e-con-inner { grid-template-columns: repeat(2, 1fr); }
.apds-grid-3.e-con-full, .apds-grid-3 > .e-con-inner { grid-template-columns: repeat(3, 1fr); }
.apds-grid-6.e-con-full, .apds-grid-6 > .e-con-inner { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1024px) { .apds-grid-6.e-con-full, .apds-grid-6 > .e-con-inner { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) {
  .apds-grid-2.e-con-full, .apds-grid-2 > .e-con-inner,
  .apds-grid-3.e-con-full, .apds-grid-3 > .e-con-inner { grid-template-columns: 1fr; }
  .apds-grid-6.e-con-full, .apds-grid-6 > .e-con-inner { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Site header (Header Footer Elementor)
   ========================================================================== */
.ehf-header #masthead,
#ehf-header,
.apds-site-header {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  width: 100%;
  z-index: 9990;
  background: rgba(252, 251, 249, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* keep the admin bar from hiding the header while logged in */
.admin-bar .apds-site-header,
.admin-bar #ehf-header { top: 32px; }
/* On phones (<=782px) the WP admin bar is NOT fixed — it scrolls away with the
   page. Offsetting the fixed header by 46px would then leave an empty gap at the
   top once scrolled, so pin the header to the very top instead. */
@media (max-width: 782px) { .admin-bar .apds-site-header, .admin-bar #ehf-header { top: 0; } }

/* Header inner: match reference (max-width 1280, 48px side padding) */
.apds-site-header .apds-header-inner.e-con-full { max-width: 1280px; margin: 0 auto; padding: 16px 48px; width: 100%; }
@media (max-width: 767px){ .apds-site-header .apds-header-inner.e-con-full { padding: 12px 24px; } }
/* nav+social group shrinks to content so space-between pushes it to the right edge */
.apds-site-header .apds-header-right.e-con-full { width: auto !important; flex: 0 0 auto; }

/* Page content container — aligns with the header (1280px centred, 48px sides) */
.apds-container.e-con-full { max-width: 1280px; margin-left: auto !important; margin-right: auto !important; width: 100%; padding-left: 48px !important; padding-right: 48px !important; }
@media (max-width: 767px){ .apds-container.e-con-full { padding-left: 24px !important; padding-right: 24px !important; } }
/* Team (and any wide section) — full-bleed feel, not header-aligned */
.apds-container.apds-wide.e-con-full { max-width: 1800px; }

/* Nav layout: 32px gap between top-level items */
.apds-site-header .apds-nav ul.hfe-nav-menu { display: flex; align-items: center; gap: 32px; flex-wrap: nowrap; }
.apds-site-header .apds-nav ul.hfe-nav-menu > li.menu-item { margin: 0; }

/* Nav links: 12px, 0.2em, weight 400, muted; reference styling */
.apds-site-header .apds-nav a.hfe-menu-item,
.apds-site-header .apds-nav a.hfe-menu-item:visited {
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
  color: var(--apds-muted) !important;
  font-weight: 400 !important;
  font-family: "Inter", system-ui, sans-serif !important;
  padding: 8px 0 !important;
  transition: color .25s ease;
}
.apds-site-header .apds-nav a.hfe-menu-item:hover,
.apds-site-header .apds-nav .current-menu-item > a.hfe-menu-item,
.apds-site-header .apds-nav .current-menu-ancestor > a.hfe-menu-item { color: var(--apds-fg) !important; }
/* ---------- Contact dropdown — refined to match site styling ---------- */
.apds-site-header .apds-nav .sub-menu {
  background: rgba(252,251,249,0.96) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 0 !important;
  border-top: 2px solid var(--apds-accent) !important;
  box-shadow: 0 16px 40px -12px rgba(28,25,23,.18) !important;
  padding: 6px 0 !important;
  min-width: 190px;
  margin-top: 14px !important;
  border-radius: 0 !important;
  overflow: hidden;
}
.apds-site-header .apds-nav .sub-menu li.menu-item { margin: 0 !important; border: 0 !important; }
.apds-site-header .apds-nav .sub-menu a.hfe-sub-menu-item {
  display: block;
  font-size: 11px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  color: var(--apds-muted) !important;
  padding: 13px 24px !important;
  font-weight: 400 !important;
  border: 0 !important;
  transition: color .25s ease, background .25s ease, padding-left .25s ease;
}
.apds-site-header .apds-nav .sub-menu a.hfe-sub-menu-item:hover {
  color: var(--apds-accent) !important;
  background: rgba(201,122,65,.06) !important;
  padding-left: 30px !important;
}
/* subtle divider between the two items */
.apds-site-header .apds-nav .sub-menu li.menu-item + li.menu-item a.hfe-sub-menu-item { box-shadow: inset 0 1px 0 rgba(229,226,221,.7); }
/* submenu toggle arrow colour + rotation */
.apds-site-header .apds-nav .hfe-menu-item .hfe-menu-toggle,
.apds-site-header .apds-nav .hfe-nav-menu .sub-arrow,
.apds-site-header .apds-nav .hfe-menu-child-count,
.apds-site-header .apds-nav .menu-item-has-children > a .hfe-menu-item svg { color: var(--apds-muted) !important; fill: var(--apds-muted) !important; }

.apds-logo img { height: 44px !important; width: auto !important; object-fit: contain; }
@media (min-width:768px){ .apds-logo img { height: 48px !important; } }
.apds-header-right { display: flex; align-items: center; gap: 28px; flex-wrap: nowrap; flex-shrink: 0; }
.apds-site-header .apds-nav ul.hfe-nav-menu { flex-wrap: nowrap !important; }
.apds-site-header .apds-nav .hfe-nav-menu__item, .apds-site-header .apds-nav li.menu-item { white-space: nowrap; }
.apds-site-header .apds-header-inner.e-con > .e-con-inner { flex-wrap: nowrap; }
.apds-site-header .elementor-social-icon { background: transparent !important; width: auto; height: auto; font-size: 16px; color: var(--apds-muted) !important; }
.apds-site-header .elementor-social-icon:hover { color: var(--apds-fg) !important; }
.apds-site-header .elementor-social-icon svg { fill: currentColor; width: 16px; height: 16px; }
/* HFE mobile toggle colour */
.apds-site-header .elementor-menu-toggle { color: var(--apds-fg) !important; }

/* ==========================================================================
   Site footer
   ========================================================================== */
.apds-footer-logo img { height: 48px !important; width: auto !important; object-fit: contain; }
.apds-footer-col { text-align: center; display: flex; flex-direction: column; align-items: center; }
.apds-footer { background: var(--apds-primary); border-top: 1px solid rgba(245,244,242,0.12); }
.apds-footer .apds-grid-3.e-con-full { gap: 48px; }
.apds-footer-col { gap: 0; }
.apds-footer, .apds-footer p, .apds-footer a, .apds-footer h4 { color: var(--apds-primary-fg); }
.apds-footer .apds-footer-heading, .apds-footer .apds-footer-heading .elementor-heading-title { font-size: 12px !important; letter-spacing: 0.2em !important; color: rgba(245,244,242,.45) !important; text-transform: uppercase; font-weight: 400 !important; }
.apds-footer .apds-footer-body, .apds-footer .apds-footer-body a { color: rgba(245,244,242,.6); font-size: 12px; line-height: 1.9; }
.apds-footer .apds-footer-body a:hover { color: var(--apds-primary-fg); }
.apds-footer .apds-copyright { color: rgba(245,244,242,.3); font-size: 12px; }
/* Mobile: the footer body/links read too small — bump them up. */
@media (max-width: 767px){
  .apds-footer .apds-footer-body, .apds-footer .apds-footer-body a { font-size: 15px; line-height: 1.8; }
  .apds-footer .apds-footer-heading, .apds-footer .apds-footer-heading .elementor-heading-title { font-size: 13px !important; }
  .apds-footer .apds-copyright { font-size: 13px; }
}

/* ==========================================================================
   Floating WhatsApp button
   ========================================================================== */
.apds-whatsapp {
  position: fixed; bottom: 24px; right: 24px; z-index: 9995;
  width: 56px; height: 56px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--apds-accent);
  border: 2px solid var(--apds-accent);
  box-shadow: 0 10px 24px rgba(28,25,23,.18);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.apds-whatsapp:hover { transform: scale(1.1); box-shadow: 0 14px 30px rgba(28,25,23,.26); background: var(--apds-accent); color: #fff; }
.apds-whatsapp svg { width: 28px; height: 28px; fill: currentColor; }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(.25,.46,.45,.94), transform .8s cubic-bezier(.25,.46,.45,.94); }
.reveal-on-scroll.revealed { opacity: 1; transform: translateY(0); }

/* fade-in-up for hero */
@keyframes apdsFadeInUp { from { opacity: 0; transform: translateY(24px);} to { opacity: 1; transform: translateY(0);} }
.apds-fade-up { animation: apdsFadeInUp .9s ease forwards; }
.apds-delay-200 { animation-delay: .2s; opacity: 0; }

/* Full-bleed page content (remove Hello default spacing) */
body.apds .site-main { margin: 0; padding: 0; }
body.apds #content .ast-container, body.apds .site-main > .entry-content { margin: 0; }
/* Home: hide the site footer (source hides <Footer /> on home) & flush hero */
body.home #colophon, body.home .apds-footer { display: none !important; }
body.home .site-main { padding: 0 !important; }

/* ==========================================================================
   HERO SLIDER (home)
   ========================================================================== */
.apds-hero { position: relative; height: 100vh; width: 100%; overflow: hidden; }
.apds-hero__slide { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; opacity: 0; transition: opacity 1.5s ease-in-out; }
.apds-hero__slide.is-active { opacity: 1; }
.apds-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.32) 0%, rgba(0,0,0,.12) 40%, rgba(0,0,0,.42) 100%); }
.apds-hero__content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 24px; text-align: center; }
.apds-hero__tick { width: 48px; height: 1px; background: rgba(224,153,106,.6); margin-bottom: 24px; }
.apds-hero__logo { width: 100%; max-width: 36rem; height: auto; }
@media (min-width: 768px){ .apds-hero__logo { max-width: 42rem; } }
@media (min-width: 1024px){ .apds-hero__logo { max-width: 48rem; } }
.apds-hero__tagline { margin-top: 24px; max-width: 42rem; font-size: 14px; font-weight: 300; line-height: 1.7; letter-spacing: 0.05em; color: rgba(245,244,242,.8); }
.apds-hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; display:flex; align-items:center; justify-content:center; width: 44px; height: 44px; border: 1px solid rgba(245,244,242,.3); background: rgba(0,0,0,.1); color: rgba(245,244,242,.85); backdrop-filter: blur(4px); cursor: pointer; transition: all .25s ease; }
.apds-hero__arrow:hover { border-color: #fff; background: rgba(0,0,0,.3); color: #fff; }
.apds-hero__arrow.prev { left: 16px; } .apds-hero__arrow.next { right: 16px; }
@media (min-width: 768px){ .apds-hero__arrow.prev { left: 32px; } .apds-hero__arrow.next { right: 32px; } }
.apds-hero__dots { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 8px; }
.apds-hero__dot { height: 1px; width: 24px; background: rgba(245,244,242,.4); border: 0; padding: 0; cursor: pointer; transition: all .3s ease; }
.apds-hero__dot.is-active { width: 40px; background: #F5F4F2; }
@media (max-width: 767px) {
  .apds-hero__content { padding-left: 20px; padding-right: 20px; }
  .apds-hero__logo { max-width: 86vw; }
  .apds-hero__tagline { max-width: 86vw; font-size: 13px; }
  .apds-hero__arrow.prev { left: 8px; } .apds-hero__arrow.next { right: 8px; }
}

/* ---------- Native hero (container background-slideshow) ---------- */
.apds-hero-native { min-height: 100vh; }
/* Mobile: all banners are 3:2, but a 100vh tall hero + background-cover crops the
   wide image to a centre strip. Give the hero a 3:2 aspect-ratio on phones so the
   FULL banner shows, uncropped (container ratio == image ratio -> cover fits whole
   image). It still grows if the overlaid logo/tagline needs more height. */
@media (max-width: 767px){
  /* Force an exact 3:2 box (66.67vw tall at full width) so content can't stretch it
     and re-introduce the crop; the cover background then shows the whole 3:2 image.
     margin-top = fixed-header height (44px logo + 12px*2 padding) so the image sits
     directly BELOW the header instead of behind it, and the whole 3:2 banner is
     visible without scrolling. */
  .apds-hero-native { min-height: 0 !important; height: 66.67vw !important; margin-top: 68px !important; padding-top: 0 !important; padding-bottom: 0 !important; justify-content: center; overflow: hidden; }
  .apds-hero-native > .e-con-inner { min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  .apds-hero-native .elementor-background-slideshow,
  .apds-hero-native .elementor-background-slideshow__slide__image { background-size: cover !important; }
}
.apds-hero-logo img { width: 768px !important; max-width: 86vw !important; height: auto; margin: 0 auto; display: block; }
@media (max-width: 1024px){ .apds-hero-logo img { width: 600px !important; } }
@media (max-width: 767px){ .apds-hero-logo img { width: 86vw !important; } }
.apds-hero-tag, .apds-hero-tag p { color: rgba(245,244,242,.82); font-size: 14px; font-weight: 300; letter-spacing: .04em; line-height: 1.7; margin: 0; }
.apds-hero-tag { max-width: 42rem; margin: 0 auto; text-align: center; }

/* ==========================================================================
   WORK — filterable gallery
   ========================================================================== */
.apds-filters { display: flex; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid var(--apds-border); padding-bottom: 24px; }
.apds-filter-disc { border: 1px solid var(--apds-border); background: transparent; color: var(--apds-muted); padding: 8px 16px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: all .2s ease; }
.apds-filter-disc.is-active { border-color: var(--apds-accent); color: var(--apds-fg); }
.apds-cats { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 24px; }
.apds-cat { position: relative; background: none; border: 0; padding: 0 0 8px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--apds-muted); cursor: pointer; transition: color .2s ease; }
.apds-cat.is-active { color: var(--apds-fg); }
.apds-cat.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--apds-accent); }
.apds-work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 64px; }
@media (max-width: 1024px){ .apds-work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .apds-work-grid { grid-template-columns: 1fr; } }
.apds-work-card { display: block; position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--apds-secondary); }
.apds-work-card img { height: 100%; width: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.25,.46,.45,.94); }
.apds-work-card:hover img { transform: scale(1.05); }
.apds-work-card__grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.1) 45%, transparent 100%); }
.apds-work-card__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; }
.apds-work-card__cap h2 { color: #fff; font-size: 28px; font-weight: 200; line-height: 1.1; margin: 0; }
.apds-work-card__meta { margin-top: 8px; display: flex; align-items: center; gap: 12px; }
.apds-work-card__meta span.line { height: 1px; width: 32px; background: var(--apds-accent); }
.apds-work-card__meta span.txt { font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.apds-empty { border-top: 1px solid var(--apds-border); padding: 64px 0; color: var(--apds-muted); font-size: 14px; }

/* ==========================================================================
   Native Image Carousel styling (practice + project galleries)
   ========================================================================== */
.apds-carousel-w .swiper-pagination-bullet, .apds-pcar-w .swiper-pagination-bullet { background: var(--apds-accent); opacity: .5; }
.apds-carousel-w .swiper-pagination-bullet-active, .apds-pcar-w .swiper-pagination-bullet-active { opacity: 1; }
.apds-carousel-w .elementor-swiper-button, .apds-pcar-w .elementor-swiper-button { color: #fff; }
/* practice carousel: 3:2 crop */
.apds-pcar-w .swiper-slide img { aspect-ratio: 3/2; object-fit: cover; width: 100%; }
/* project carousel: contain on secondary bg, wide */
.apds-carousel-w .elementor-image-carousel-wrapper { background: var(--apds-secondary); }
.apds-carousel-w .swiper-slide { display: flex; align-items: center; justify-content: center; }
.apds-carousel-w .swiper-slide img { aspect-ratio: 64/27; object-fit: contain; width: 100%; background: var(--apds-secondary); }

/* ==========================================================================
   PROJECT detail carousel
   ========================================================================== */
.apds-carousel__stage { position: relative; display:flex; align-items:center; justify-content:center; width: 100%; aspect-ratio: 64/27; overflow: hidden; background: var(--apds-secondary); }
.apds-carousel__stage img { height: 100%; width: 100%; object-fit: contain; transition: opacity .6s ease-in-out; }
.apds-carousel__count { position: absolute; right: 16px; bottom: 16px; background: rgba(252,251,249,.7); padding: 6px 12px; font-size: 10px; letter-spacing: 0.2em; color: var(--apds-fg); backdrop-filter: blur(4px); }
@media (min-width:768px){ .apds-carousel__count { right: 24px; bottom: 24px; } }
.apds-carousel__strip { margin-top: 20px; display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.apds-carousel__thumb { flex-shrink: 0; height: 112px; overflow: hidden; border: 2px solid transparent; background: none; padding: 0; cursor: pointer; transition: border-color .2s ease; }
@media (min-width:768px){ .apds-carousel__thumb { height: 144px; } }
.apds-carousel__thumb img { height: 100%; width: auto; object-fit: contain; }
.apds-carousel__thumb.is-active { border-color: var(--apds-accent); box-shadow: 0 0 0 2px rgba(201,122,65,.4); }
.apds-carousel__thumb:hover { border-color: rgba(201,122,65,.6); }

/* Project overview + prev/next nav + back link */
.apds-ov-item { margin-bottom: 24px; }
.apds-ov-label { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--apds-muted); margin: 0; }
.apds-ov-val { font-size: 18px; font-weight: 300; color: var(--apds-fg); margin: 6px 0 0; }
.apds-desc, .apds-desc p { font-size: clamp(17px,2vw,20px); font-weight: 300; line-height: 1.7; color: rgba(28,25,23,.9); }
.apds-desc p { margin: 0 0 24px; } .apds-desc p:last-child { margin: 0; }
.apds-nav2 { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--apds-border); }
.apds-nav2 a { display: flex; flex-direction: column; gap: 8px; padding: 40px 24px; text-decoration: none; }
.apds-nav2 a.next { border-left: 1px solid var(--apds-border); align-items: flex-end; text-align: right; }
.apds-nav2 .lbl { font-size: 12px; letter-spacing: 0.3em; color: var(--apds-muted); text-transform: uppercase; }
.apds-nav2 a:hover .lbl { color: var(--apds-accent); }
.apds-nav2 .ttl { font-size: clamp(18px,2.5vw,24px); font-weight: 300; color: var(--apds-fg); }
.apds-back { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--apds-muted); text-decoration: none; }
.apds-back::before { content: ""; width: 32px; height: 1px; background: currentColor; }
.apds-back:hover { color: var(--apds-fg); }

/* ==========================================================================
   TEAM tiles
   ========================================================================== */
.apds-team-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 32px; }
@media (max-width: 1024px){ .apds-team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px){ .apds-team-grid { grid-template-columns: repeat(2, 1fr); } }
.apds-principals-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; }
@media (max-width: 767px){ .apds-principals-grid { grid-template-columns: 1fr; } }
.apds-tile { position: relative; width: 100%; overflow: hidden; }
.apds-tile img { width: 100%; aspect-ratio: 3/4; object-fit: cover; filter: grayscale(1); transition: filter .7s ease, transform .7s ease; }
.apds-tile.wide img { aspect-ratio: 4/3; object-position: center 25%; }
.apds-tile:hover img { filter: grayscale(0); transform: scale(1.03); }
.apds-tile__grad { position: absolute; inset-inline: 0; bottom: 0; height: 40%; background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.5) 50%, transparent); pointer-events:none; }
.apds-tile__cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; padding: 16px; }
.apds-tile__cap h3 { color: #fff; font-size: 15px; font-weight: 400; letter-spacing: .02em; margin: 0; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.apds-tile__cap span { height: 1px; width: 32px; background: var(--apds-accent); }

/* ---------- Native team tiles (container + image + heading) ---------- */
.apds-principals-grid.e-con-full { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 48px; }
.apds-team-grid.e-con-full { display: grid !important; grid-template-columns: repeat(6, 1fr); gap: 32px; }
@media (max-width: 1024px){ .apds-team-grid.e-con-full { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px){ .apds-team-grid.e-con-full { grid-template-columns: repeat(2, 1fr); } .apds-principals-grid.e-con-full { grid-template-columns: 1fr; } }
.apds-tile-n { position: relative; overflow: hidden; }
.apds-tile-n .apds-tile-img img { width: 100%; aspect-ratio: 3/4; object-fit: cover; filter: grayscale(1); transition: filter .7s ease, transform .7s ease; display: block; }
.apds-tile-n:hover .apds-tile-img img { filter: grayscale(0); transform: scale(1.03); }
.apds-tile-n.wide .apds-tile-img img { aspect-ratio: 4/3; object-position: center 25%; }
.apds-tile-n::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.45) 50%, transparent); pointer-events: none; z-index: 1; }
.apds-tile-n .apds-tile-name { position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 2; margin: 0 !important; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.apds-tile-n .apds-tile-name .elementor-heading-title { color: #fff; font-size: 15px; font-weight: 400; letter-spacing: .02em; margin: 0; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
/* accent line, bottom-right, aligned with the member name (mirrors the reference figcaption) */
.apds-tile-n .apds-tile-name::after { content: ""; flex: 0 0 auto; width: 32px; height: 1px; background: var(--apds-accent); margin-bottom: 7px; }

/* ---------- Native upcoming cards ---------- */
.apds-upc-cards.e-con-full { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 900px){ .apds-upc-cards.e-con-full { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .apds-upc-cards.e-con-full { grid-template-columns: 1fr; } }
.apds-upc-card { background: transparent; overflow: hidden; }
.apds-upc-card .apds-upc-img img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform 1.2s ease; display: block; }
.apds-upc-card:hover .apds-upc-img img { transform: scale(1.05); }
.apds-upc-cap .elementor-heading-title { font-size: 18px; font-weight: 300; letter-spacing: 0.15em; color: var(--apds-fg); text-transform: uppercase; }
.apds-upc-cap { border-top: 1px solid var(--apds-border); background: var(--apds-bg); padding: 16px 20px !important; }

/* ---------- Native work cards (linked container + image + headings) ---------- */
.apds-work-grid-n.e-con-full { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 1024px){ .apds-work-grid-n.e-con-full { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .apds-work-grid-n.e-con-full { grid-template-columns: 1fr; } }
.apds-work-card-n { position: relative; overflow: hidden; background: transparent; cursor: pointer; display: block; }
.apds-work-card-n .apds-wc-img { position: relative; z-index: 0; }
.apds-work-card-n .apds-wc-img img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform 1.2s ease; display: block; }
.apds-work-card-n:hover .apds-wc-img img { transform: scale(1.05); }
.apds-work-card-n::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,0) 75%); pointer-events: none; z-index: 1; }
.apds-wc-title { position: absolute; left: 24px; right: 24px; bottom: 44px; z-index: 3; margin: 0 !important; }
.apds-wc-title .elementor-heading-title { color: #fff !important; font-size: 28px; font-weight: 200; margin: 0; }
.apds-wc-cat { position: absolute; left: 24px; bottom: 24px; z-index: 3; margin: 0 !important; display: flex; align-items: center; gap: 12px; }
.apds-wc-cat::before { content: ""; width: 32px; height: 1px; background: var(--apds-accent); display: inline-block; }
.apds-wc-cat .elementor-heading-title { color: rgba(255,255,255,.9) !important; font-size: 10px !important; letter-spacing: 0.25em; text-transform: uppercase; margin: 0; font-weight: 400 !important; }

/* ---------- Dynamic Work grid (shortcode-rendered CPT cards) ---------- */
#apds-workgrid.apds-work-grid-n { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 64px; }
@media (max-width: 1024px){ #apds-workgrid.apds-work-grid-n { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ #apds-workgrid.apds-work-grid-n { grid-template-columns: 1fr; } }
/* Mobile: tighten the space between the category tabs and the first project */
@media (max-width: 767px){ #apds-workgrid.apds-work-grid-n { margin-top: 12px; } }
/* Work page: the grid sits in its own section whose .apds-container (69facba) has
   48px top / 130px bottom desktop padding -> big gap under the tabs and before the
   footer on mobile. Tighten both. */
@media (max-width: 767px){ .elementor-element-69facba { padding-top: 8px !important; padding-bottom: 40px !important; } }

/* ---------- Single project (CPT PHP template) ---------- */
.apds-single-project { padding-top: 120px; padding-bottom: 96px; }
@media (max-width: 767px){ .apds-single-project { padding-top: 88px; padding-bottom: 36px; } }
.apds-single-project .apds-container { max-width: 1280px; margin: 0 auto; width: 100%; box-sizing: border-box; padding-left: 48px; padding-right: 48px; }
@media (max-width: 767px){ .apds-single-project .apds-container { padding-left: 24px; padding-right: 24px; } }
.apds-single-project .apds-sp-head { padding-top: 12px; padding-bottom: 32px; }
.apds-single-project .apds-h1 { margin: 12px 0 0; }
.apds-single-project .apds-sp-body { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; padding: 64px 0 24px; align-items: start; }
@media (max-width: 900px){ .apds-single-project .apds-sp-body { grid-template-columns: 1fr; gap: 32px; } }
.apds-single-project .apds-sp-ov-h { margin: 0 0 24px; }
.apds-single-project .apds-sp-ov-item { margin-bottom: 24px; }
.apds-single-project .apds-sp-back { padding-top: 8px; }
/* Mobile: lay the overview facts 2-up so they fill the width instead of leaving
   a tall empty column on the right. */
@media (max-width: 900px){
  .apds-single-project .apds-sp-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; }
  .apds-single-project .apds-sp-ov-h { grid-column: 1 / -1; margin-bottom: 0; }
  .apds-single-project .apds-sp-ov-item { margin-bottom: 0; }
}

/* ---------- Work filter tabs ---------- */
.apds-filter-tabs { display: flex; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid var(--apds-border); padding-bottom: 24px; }
.apds-filter-tabs button { border: 1px solid var(--apds-border); background: transparent; color: var(--apds-muted); padding: 8px 16px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: all .2s; }
.apds-filter-tabs button.is-active { border-color: var(--apds-accent); color: var(--apds-fg); }
.apds-cat-tabs { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 24px; }
.apds-cat-tabs button { position: relative; background: none; border: 0; padding: 0 0 8px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--apds-muted); cursor: pointer; }
.apds-cat-tabs button.is-active { color: var(--apds-fg); }
.apds-cat-tabs button.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--apds-accent); }
/* Mobile: keep all three category tabs on one row with a thin divider between them */
@media (max-width: 640px){
  .apds-cat-tabs { flex-wrap: nowrap; gap: 20px; margin-top: 20px; }
  .apds-cat-tabs button { white-space: nowrap; font-size: 11px; letter-spacing: 0.08em; }
  .apds-cat-tabs button + button::before { content: ""; position: absolute; left: -10px; top: 1px; bottom: 8px; width: 1px; background: var(--apds-border); }
}
/* Hello Elementor reset.css pinks every button on :hover/:focus (background:#c36).
   Override it for the work filters (copper hover, not pink) and the gallery thumbnails. */
body.apds .apds-filter-tabs button:hover, body.apds .apds-filter-tabs button:focus {
  background: transparent; color: var(--apds-fg); border-color: var(--apds-accent); text-decoration: none;
}
body.apds .apds-cat-tabs button:hover, body.apds .apds-cat-tabs button:focus {
  background: transparent; color: var(--apds-fg); text-decoration: none;
}
body.apds .apds-carousel__thumb:hover, body.apds .apds-carousel__thumb:focus { background: transparent; }

/* ---------- Native project overview + prev/next ---------- */
.apds-ov-label-h .elementor-heading-title { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--apds-muted); font-weight: 400; }
.apds-ov-val-h .elementor-heading-title { font-size: 18px; font-weight: 300; color: var(--apds-fg); }
.apds-nav2-g.e-con-full { display: grid !important; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--apds-border); }
.apds-nav2-side { padding: 40px 24px !important; }
.apds-nav2-side.next { border-left: 1px solid var(--apds-border); text-align: right; align-items: flex-end !important; }
.apds-nav2-lbl .elementor-heading-title { font-size: 12px; letter-spacing: 0.3em; color: var(--apds-muted); text-transform: uppercase; }
.apds-nav2-side:hover .apds-nav2-lbl .elementor-heading-title { color: var(--apds-accent); }
.apds-nav2-ttl .elementor-heading-title { font-size: clamp(18px,2.5vw,24px); font-weight: 300; color: var(--apds-fg); }
.apds-back-btn .elementor-button { background: transparent; color: var(--apds-muted); padding: 0; font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; border: 0; box-shadow: none; display: inline-flex; align-items: center; gap: 12px; font-weight: 400; }
.apds-back-btn .elementor-button::before { content: ""; width: 32px; height: 1px; background: currentColor; display: inline-block; }
.apds-back-btn .elementor-button:hover { color: var(--apds-fg); background: transparent; }
.apds-map-w .elementor-widget-container, .apds-map-w iframe { aspect-ratio: 16/9; width: 100%; border: 1px solid var(--apds-border); }
.apds-map-w iframe { filter: grayscale(1); height: 100%; }
.apds-social-list .elementor-icon-list-item { border-bottom: 1px solid var(--apds-border); padding: 12px 0 !important; }
.apds-social-list .elementor-icon-list-item > a, .apds-social-list .elementor-icon-list-item { display: flex; align-items: center; width: 100%; }
.apds-social-list .elementor-icon-list-text { font-size: 14px; color: var(--apds-fg); }
.apds-social-list .elementor-icon-list-item a::after { content: "→"; margin-left: auto; color: var(--apds-muted); transition: transform .2s, color .2s; }
.apds-social-list .elementor-icon-list-item:hover .elementor-icon-list-text { color: var(--apds-accent); }
.apds-social-list .elementor-icon-list-item:hover a::after { transform: translateX(4px); color: var(--apds-accent); }
.apds-addr-grid.e-con-full { display: grid !important; grid-template-columns: 1fr 1fr; gap: 32px; border-top: 1px solid var(--apds-border); padding-top: 32px; }
@media (max-width: 600px){ .apds-addr-grid.e-con-full { grid-template-columns: 1fr; } }

/* ==========================================================================
   ABOUT — leadership + stats + scope
   ========================================================================== */
.apds-stat-num { font-size: 40px; font-weight: 200; color: var(--apds-accent); line-height: 1; transition: transform .3s ease; }
.apds-stat:hover .apds-stat-num { transform: scale(1.1); }
.apds-stat-label { margin-top: 12px; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(245,244,242,.5); }
/* stats as native Heading widgets */
.apds-stat-num .elementor-heading-title { font-size: 40px !important; font-weight: 200 !important; color: var(--apds-accent) !important; line-height: 1 !important; }
.apds-stat-label .elementor-heading-title { font-size: 12px !important; letter-spacing: 0.15em !important; text-transform: uppercase; color: rgba(245,244,242,.5) !important; font-weight: 400 !important; }
.apds-stat:hover .apds-stat-num .elementor-heading-title { transform: scale(1.1); transition: transform .3s ease; }
/* academic / experience as native Text Editor widgets */
.apds-academic-w p { font-weight: 300; color: var(--apds-fg); font-size: 14px; margin: 0 0 8px; }
.apds-scope-list ul.elementor-icon-list-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 24px; }
@media (max-width: 640px){ .apds-scope-list ul.elementor-icon-list-items { grid-template-columns: repeat(2, 1fr); } }
.apds-scope-list .elementor-icon-list-item { border-top: 1px solid rgba(229,226,221,.6); padding: 12px 0 !important; }
.apds-scope-list .elementor-icon-list-text { font-size: 12px; letter-spacing: 0.05em; color: var(--apds-fg); }
.apds-scope-list .elementor-icon-list-icon { color: var(--apds-accent); }
.apds-scope-list .elementor-icon-list-icon svg { fill: var(--apds-accent); width: 12px; }
.apds-scope-item { display: flex; align-items: center; gap: 12px; border-top: 1px solid rgba(229,226,221,.6); padding: 12px 0; }
.apds-scope-item .dash { color: var(--apds-accent); }
.apds-scope-item .txt { font-size: 12px; letter-spacing: 0.05em; color: var(--apds-fg); }
.apds-exp-row { display: grid; grid-template-columns: 80px 1fr; gap: 12px; font-size: 14px; margin-bottom: 12px; }
.apds-exp-row .yr { font-weight: 300; color: var(--apds-accent); }
.apds-exp-row .role { font-weight: 300; color: var(--apds-fg); }
.apds-cred { font-size: 12px; letter-spacing: 0.12em; color: var(--apds-muted); font-weight: 300; }
.apds-academic { list-style: none; padding: 0; margin: 0; }
.apds-academic li { font-weight: 300; color: var(--apds-fg); font-size: 14px; margin: 0 0 8px; }
.apds-ae { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; }
@media (max-width: 600px){ .apds-ae { grid-template-columns: 1fr; } }
.apds-ae-g.e-con-full, .apds-ae-g > .e-con-inner { display: grid !important; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 600px){
  /* Academic + Experience stack; tighten the gap so it doesn't sprawl. */
  .apds-ae-g.e-con-full { grid-template-columns: 1fr; gap: 18px; }
  /* Widen the year column and keep ranges on one line so "1993 – 1998" no longer
     wraps and the role column lines up across every row. */
  .apds-exp-row { grid-template-columns: 96px 1fr; gap: 10px 14px; margin-bottom: 10px; }
  .apds-exp-row .yr { white-space: nowrap; }
}
.apds-stats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; max-width: 64rem; margin: 0 auto; }
.apds-stat { padding: 40px 24px; }
.apds-stat + .apds-stat { border-left: 1px solid rgba(201,122,65,.15); }
/* Mobile: the stats stack, so the vertical divider became a stray line on the
   left of each card — turn it into a horizontal rule between them and tighten. */
@media (max-width: 767px){
  .apds-stat { padding: 22px 24px; }
  .apds-stat + .apds-stat { border-left: 0; border-top: 1px solid rgba(201,122,65,.15); }
}
.apds-frame { position: relative; }
/* frame offset border removed per design feedback */

/* Practice carousel (about) */
.apds-pcar { position: relative; width: 100%; aspect-ratio: 3/2; overflow: hidden; }
.apds-pcar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease-in-out; }
.apds-pcar img.is-active { opacity: 1; }
.apds-pcar__dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.apds-pcar__dots button { height: 1px; width: 16px; background: rgba(245,244,242,.5); border: 0; padding: 0; cursor: pointer; transition: all .3s ease; }
.apds-pcar__dots button.is-active { width: 32px; background: #fff; }

/* Section header row (title left, rule right) */
.apds-head-row.e-con-full, .apds-head-row > .e-con-inner { display: flex !important; flex-direction: row !important; align-items: flex-end; justify-content: space-between; gap: 24px; }
.apds-head-row > .elementor-widget-heading { flex: 0 0 auto; }
.apds-head-row > .elementor-widget-divider { flex: 0 0 auto; width: auto !important; margin-bottom: 8px; }
.apds-head-row > .elementor-widget-heading .elementor-heading-title { white-space: nowrap; }
@media (max-width: 600px){ .apds-head-row.e-con-full, .apds-head-row > .e-con-inner { flex-direction: column !important; align-items: flex-start; } }

/* Upcoming project cards */
.apds-cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 900px){ .apds-cards-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .apds-cards-3 { grid-template-columns: 1fr; } }
.apds-upcoming-card { background: var(--apds-secondary); overflow: hidden; display: block; }
.apds-upcoming-img { position: relative; aspect-ratio: 4/5; overflow: hidden; }
.apds-upcoming-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.apds-upcoming-card:hover .apds-upcoming-img img { transform: scale(1.05); }
.apds-upcoming-cap { border-top: 1px solid var(--apds-border); background: var(--apds-bg); padding: 16px 20px; }
.apds-upcoming-cap h2 { font-size: 18px; font-weight: 300; letter-spacing: 0.15em; margin: 0; color: var(--apds-fg); }

/* Contact address blocks */
.apds-addr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; border-top: 1px solid var(--apds-border); padding-top: 32px; }
@media (max-width: 600px){ .apds-addr-grid { grid-template-columns: 1fr; } }
.apds-addr-label { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--apds-muted); margin: 0 0 12px; }
.apds-addr-val { font-size: 16px; font-weight: 300; line-height: 1.6; color: var(--apds-fg); margin: 0; }
.apds-addr-val a { color: var(--apds-fg); text-decoration: none; } .apds-addr-val a:hover { color: var(--apds-accent); }
.apds-social-wrap { border-top: 1px solid var(--apds-border); padding-top: 32px; }

/* generic map */
.apds-map { aspect-ratio: 16/9; width: 100%; border: 1px solid var(--apds-border); background: var(--apds-secondary); overflow: hidden; }
.apds-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1); }

/* contact/social rows */
.apds-social-row { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--apds-border); padding: 12px 0; font-size: 14px; color: var(--apds-fg); text-decoration: none; transition: color .2s ease; }
.apds-social-row:hover { color: var(--apds-accent); }
.apds-social-row .arrow { transition: transform .2s ease; }
.apds-social-row:hover .arrow { transform: translateX(4px); }

/* ==========================================================================
   Mobile & responsive fixes — header menu, director profiles   (2026-07)
   Appended last so these win over the desktop rules above by source order.
   ========================================================================== */

/* --- Mobile / tablet header ------------------------------------------------
   The horizontal nav list was forced `display:flex` at every width, so even
   when the burger hid it (visibility:hidden) it still occupied ~690px of
   in-flow width, overflowed the header and flex-shrank the logo to 0px.
   Below the HFE tablet breakpoint we pull the list out of flow and render it
   as a dropdown the burger reveals; the logo keeps its intrinsic width.       */
@media (max-width: 1024px) {
  .apds-site-header .apds-header-inner.e-con-full { align-items: center; }

  .apds-site-header .apds-logo { flex: 0 0 auto; }
  .apds-site-header .apds-logo img { width: auto !important; max-width: none; }

  /* position:static so the absolute dropdown below resolves against the full-width
     fixed header, not this narrow icon group. */
  .apds-site-header .apds-header-right.e-con-full { flex: 0 0 auto; width: auto !important; position: static !important; }
  .apds-site-header .apds-nav { position: static; }

  /* Instagram sits between the logo and the burger menu on mobile: the social
     widget is the 2nd flex child of header-right (after the nav+toggle), so
     pull it ahead of the nav. Tighten the gap so it sits close to the burger. */
  .apds-site-header .apds-header-right > .elementor-widget-social-icons { order: -1; }
  .apds-site-header .apds-header-right { gap: 12px !important; }

  /* IMPORTANT: HFE's frontend.js sizes the element that is the burger's *next
     sibling* — which is the <nav>, NOT the <ul>. On the first tap it measures
     before layout settles and writes a too-narrow inline width/left, so the panel
     appeared as a narrow strip on the left. So the full-width, header-aligned
     panel must be forced on the <nav> (with !important, beating HFE's inline
     values); the <ul> then just flows as a static full-width column inside it. */
  .apds-site-header .apds-nav nav {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    z-index: 9999 !important;
    background: rgba(252, 251, 249, 0.98);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 2px solid var(--apds-accent);
    box-shadow: 0 16px 40px -12px rgba(28, 25, 23, .18);
  }
  .apds-site-header .apds-nav ul.hfe-nav-menu {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 0 !important;
    margin: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .apds-site-header .apds-nav ul.hfe-nav-menu > li.menu-item { width: 100%; margin: 0; }
  .apds-site-header .apds-nav a.hfe-menu-item { padding: 16px 24px !important; width: 100%; }
  /* nested contact dropdown flows inline within the mobile panel */
  .apds-site-header .apds-nav .sub-menu {
    position: static !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-top: 0 !important;
    background: rgba(0,0,0,0.03) !important;
    min-width: 0 !important;
  }
}

/* --- About page (post-107): tighten desktop-scale section padding on mobile --- */
@media (max-width: 767px){
  .elementor-element-6848140 { padding-top: 84px !important; padding-bottom: 16px !important; } /* hero */
  .elementor-element-6dcc679 { padding-bottom: 20px !important; } /* practice inner: shrink gap before leadership */
  .elementor-element-40864d1,
  .elementor-element-a9ba5ce,
  .elementor-element-a714123 { padding-top: 32px !important; padding-bottom: 32px !important; } /* practice / philosophy / scope */
}

/* About page: nested Elementor containers each add default horizontal padding
   that accumulates and drifts deep content (esp. the director bios) rightward,
   so section titles/content no longer share a left edge. Collapse the horizontal
   padding of containers nested inside an .apds-container so its single 24px edge
   is the one reading line for everything. */
@media (max-width: 767px){
  .elementor-107 .apds-container .e-con { padding-left: 0 !important; padding-right: 0 !important; }
  /* Drop the ~10px Elementor default padding these wrapper sections add on top of
     their .apds-container so every title lines up on the same 24px edge as the
     header logo (the scope section a714123 already uses its own 24px, so leave it). */
  .elementor-element-99371f6,
  .elementor-element-d5cd614,
  .elementor-element-152fcd0,
  .elementor-element-dbca9e5,
  .elementor-element-3bf2b76 { padding-left: 0 !important; padding-right: 0 !important; }
}

/* --- Director profiles: desktop vertical rhythm ---------------------------- */
@media (min-width: 1025px) {
  .elementor-element-d6c9be6 { margin-bottom: 56px !important; } /* Desmond row   */
  .elementor-element-4885c4e { margin-bottom: 0 !important; }    /* Ng Sin Yong (last) */
  .elementor-element-fe3fded { padding-bottom: 56px !important; }/* leadership inner */
}

/* --- Director profiles: mobile -------------------------------------------
   Ng Sin Yong's row stacks text-first, dropping his portrait below the title.
   Reverse it so the image sits above the title, and tighten the gaps.         */
@media (max-width: 767px) {
  /* This row is a CSS grid, so reorder the image *cell* above the text cell
     (flex-direction has no effect on a grid). */
  .elementor-element-4885c4e > .elementor-element-464b74c { order: -1; }

  .elementor-element-d6c9be6,
  .elementor-element-4885c4e { margin-bottom: 24px !important; gap: 16px !important; } /* director->director; image->text */
  .elementor-element-0ac2165 { margin-top: 20px !important; }   /* heading -> first director */
  .elementor-element-9e1d2e9,                                   /* Desmond: background -> academic */
  .elementor-element-08bb492 { margin-top: 16px !important; }   /* Ng Sin Yong: background -> academic */
  .elementor-element-fe3fded { padding-top: 32px !important; padding-bottom: 24px !important; }

  /* trim the space between the portrait and the role/name block per profile */
  .elementor-element-8a4a29c,
  .elementor-element-8923c62 { margin-top: 0 !important; }
}

/* --- Team page + footer: tighten the mobile vertical rhythm ----------------
   On phones the team section left a large empty band before the footer, and the
   footer's own 64px top padding compounded it. Trim both. e40fa71 = team section,
   77a2949 = footer inner (global footer template).                            */
@media (max-width: 767px){
  /* Team page: the inner wrapper (69256bc) carries a desktop-scale 120px bottom
     padding, and the group holding the principals + team grids (a30a48e) has an
     80px flex gap — both leave large empty bands on a phone. Tighten them, and
     trim the footer's own 64px top padding. */
  .elementor-element-69256bc { padding-bottom: 40px !important; padding-top: 0 !important; }
  .elementor-element-a30a48e { gap: 40px !important; row-gap: 40px !important; }
  /* Boxed containers apply their padding to `.e-con > .e-con-inner`, NOT the outer
     element — so target the inner to trim the footer's 64px top space. */
  .apds-footer > .e-con-boxed > .e-con-inner { padding-block-start: 18px !important; padding-block-end: 40px !important; }
  /* "Our Team" hero: cut the 140px top and the 48px gap down to the first tile */
  .elementor-element-21a5e22 { padding-top: 88px !important; padding-bottom: 24px !important; }
}

/* --- Upcoming page (post-109): tighten mobile rhythm ----------------------
   Hero inner 58c9c39 had 140px top (big gap above "In Progress"); cards inner
   99024f2 had 130px bottom (big empty band before the footer). */
@media (max-width: 767px){
  .elementor-element-58c9c39 { padding-top: 88px !important; padding-bottom: 24px !important; }
  .elementor-element-99024f2 { padding-bottom: 36px !important; }
}

/* --- Opportunities page (post-111): tighten mobile rhythm ------------------
   Hero inner 010b6ae had 220px top / 80px bottom (huge top gap + big gap before
   the Careers block); the Careers .apds-container 012ab4c had 130px bottom; and
   3303941 put a 24px gap between the "Careers" label and its rule. Tighten all,
   and stack the Careers 4fr/8fr grid so the copy sits full-width below.        */
@media (max-width: 767px){
  .elementor-element-010b6ae { padding-top: 96px !important; padding-bottom: 28px !important; }
  .elementor-element-012ab4c { padding-bottom: 36px !important; }
  .elementor-element-3303941 { gap: 8px !important; row-gap: 8px !important; } /* label -> rule closer */
  .apds-g48.e-con-full { grid-template-columns: 1fr !important; gap: 20px !important; }
}

/* --- Contact page (post-110): shrink the empty band under the map ---------- */
@media (max-width: 767px){
  .elementor-element-9eb7511 { padding-bottom: 24px !important; } /* below the map */
  .elementor-element-10a35b7 { padding-top: 96px !important; }    /* contact hero top */
}