/* ==========================================================
   V27 · FINAL CROSS-DEVICE RESPONSIVE HARDENING
   Desktop / laptop / tablet / mobile / short-landscape.
   This layer is intentionally loaded last. It resolves the
   remaining cascade conflicts without changing approved copy,
   content order or visual art direction.
   ========================================================== */

/* Universal containment and predictable sizing. */
html,body{max-width:100%;min-width:0}
body{overflow-x:clip!important}
@supports not (overflow:clip){body{overflow-x:hidden!important}}
main,section,header,footer,nav,article,aside,figure,form,
.wrap,.sec-head,.section-head,.authority-copy,.logo-surface,
.logo-row,.institution-originals,.media-originals,.member,
.member-actions,.hero-copy,.hero-aside,.valuation-awareness-grid,
.private-brief-pillars{min-width:0;max-width:100%}
img,picture,video,svg,canvas,iframe{max-width:100%;height:auto}

/* Accessible interaction size across pointer types, not only touch devices. */
.nav-toggle,
.mobile-menu>summary,
.topbar .nav-cta,
.member-actions .btn,
.member-actions a.btn,
button.btn,
a.btn{min-height:44px}
.nav-toggle{min-width:44px;width:44px;height:44px}
.mobile-menu>summary{display:inline-flex;align-items:center;justify-content:center}

/* Small labels must not create hidden horizontal scroll. */
.as-seen-stripe__title{min-width:max-content;overflow:visible}

/* Canonical footer: the global 1296px .wrap cap was constraining the
   five-column footer at some desktop widths. Give the footer its own shell. */
@media(min-width:1400px){
  footer>.wrap{
    width:100%!important;
    max-width:1540px!important;
    padding-left:clamp(32px,3.2vw,56px)!important;
    padding-right:clamp(32px,3.2vw,56px)!important;
  }
  footer .f-grid{
    min-width:0!important;
    grid-template-columns:minmax(0,1.34fr) minmax(0,.66fr) minmax(0,1.08fr) minmax(0,.94fr) minmax(0,.94fr)!important;
  }
}
@media(min-width:1400px) and (max-width:1499px){
  footer .f-grid{column-gap:28px!important}
}

/* Tablet footer remains a balanced two-column composition even when
   older page-level grid rules are present earlier in the cascade. */
@media(min-width:720px) and (max-width:1179px){
  footer .f-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)!important}
  footer .footer-brand-col{grid-column:1/-1!important}
}
@media(max-width:719px){
  footer .f-grid{grid-template-columns:minmax(0,1fr)!important}
  footer .footer-link-item,
  footer .office-item,
  footer .office-map-link{grid-template-columns:20px minmax(0,1fr)!important}
}

/* Homepage authority/institution block: eliminate min-content expansion at
   very small phone widths while preserving the desktop composition. */
.authority-jade>.wrap{
  grid-template-columns:minmax(0,1fr)!important;
  min-width:0!important;
}
.authority-jade .authority-copy,
.authority-jade .logo-surface,
.authority-jade .institution-originals,
.authority-jade .institution-originals>*{min-width:0!important;max-width:100%!important}
@media(max-width:359px){
  .authority-jade>.wrap{width:100%!important;max-width:100%!important;overflow:hidden!important}
  .authority-jade .logo-surface{padding-left:14px!important;padding-right:14px!important}
  .authority-jade .institution-originals{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:18px 12px!important;
  }
  .authority-jade .institution-originals img{max-width:100%!important;height:auto!important;max-height:42px!important}
}

/* Team cards and direct-contact actions remain comfortably tappable and
   stable at all grid widths. */
.member-actions{align-items:stretch}
.member-actions .btn{min-width:0!important}
@media(min-width:768px) and (max-width:1039px){
  .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:767px){
  .team-grid{grid-template-columns:minmax(0,1fr)!important}
  .member-actions{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important}
  .member-actions .btn{width:100%!important;min-height:48px!important}
}

/* Header/menu edge cases. Keep the menu usable on compact and short screens. */
@media(max-width:1129px){
  .topbar .mobile-menu>summary{min-height:44px!important;padding-block:10px!important}
}
@media(max-width:767px){
  .topbar .nav-cta{display:none!important}
  .nav-toggle{min-width:44px!important;min-height:44px!important}
}
@media(orientation:landscape) and (max-height:600px) and (max-width:980px){
  .mobile-menu-panel,.nav-links.is-open,.nav-links.open{
    max-height:calc(100dvh - 76px - env(safe-area-inset-bottom,0px))!important;
    overflow-y:auto!important;
  }
}

/* Form and utility controls remain legible on iOS/Android and avoid zoom. */
@media(max-width:767px){
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px!important}
  .valuation-awareness-grid,.convert,.split,.cta-inner{min-width:0!important}
}

/* Device-safe edge spacing on the smallest supported phones. */
@media(max-width:359px){
  :root{--page-gutter-v243:max(14px,env(safe-area-inset-left,0px))}
  .btn{padding-left:14px!important;padding-right:14px!important}
  .brand{max-width:calc(100% - 56px)!important}
}

/* Printing should never inherit clipped viewport behaviour. */
@media print{body{overflow:visible!important}}

/* ==========================================================
   V27.1 · MOBILE ADVISORY TRACK RECORD REFINEMENT
   Dedicated handset composition for the homepage case-study
   section. Desktop/tablet treatment is intentionally unchanged.
   ========================================================== */
@media(max-width:699px){
  #work .work-sec-head{
    margin-bottom:28px!important;
  }
  #work .work-sec-head h2{
    max-width:12.5em;
  }
  #work .work-intro{
    font-size:15px!important;
    line-height:1.62!important;
    margin-bottom:14px!important;
  }
  #work .work-intro-secondary{
    font-size:13.5px!important;
    line-height:1.62!important;
    margin:0!important;
    padding-left:14px!important;
    border-left:2px solid rgba(215,183,130,.55)!important;
    color:rgba(237,235,228,.68)!important;
  }

  /* Separate the six records into clearly defined mobile cards instead
     of inheriting the near-seamless desktop grid treatment. */
  #work .work-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:14px!important;
    background:transparent!important;
  }
  #work .work{
    width:100%!important;
    min-width:0!important;
    padding:0!important;
    border:1px solid rgba(237,235,228,.16)!important;
    background:var(--bone)!important;
    box-shadow:0 12px 28px rgba(0,0,0,.12);
    transition:background .3s,color .3s,box-shadow .3s!important;
  }

  /* Mobile image stage: true full-bleed media with the source image shown at
     its natural aspect ratio. This removes the inherited cream side gutters
     and avoids arbitrary fixed-height cropping/letterboxing on phones. */
  #work .work-media{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    display:block!important;
    overflow:hidden!important;
    background:#0d141a!important;
    border-bottom:1px solid rgba(14,20,24,.18)!important;
  }
  #work .work-media img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    object-fit:initial!important;
    object-position:center center!important;
    transform:scale(1)!important;
    filter:none!important;
    transition:transform .45s ease,filter .35s ease!important;
  }

  /* Preserve the exact desktop interaction treatment on mobile previews and
     hover-capable compact devices: dark card, warm labels, and subtle image
     zoom/dimming. !important is required because the handset base layer is
     intentionally stronger than older responsive rules. */
  #work .work:hover{
    background:var(--ink)!important;
    color:var(--bone)!important;
    box-shadow:0 16px 34px rgba(0,0,0,.18)!important;
  }
  #work .work:hover .work-media img{
    transform:scale(1.025)!important;
    filter:saturate(.92) brightness(.9)!important;
  }
  #work .work:hover h3{color:var(--bone)!important}
  #work .work:hover .cat{color:var(--brass-lt)!important}
  #work .work:hover .meta{color:rgba(237,235,228,.72)!important}
  #work .work:hover .feature-source{color:var(--brass-lt)!important}
  #work .work-badge{
    top:12px!important;
    left:12px!important;
    padding:7px 9px!important;
    font-size:8.25px!important;
    line-height:1.2!important;
    letter-spacing:.13em!important;
  }

  /* Remove desktop equal-height pressure and tighten the reading rhythm. */
  #work .work-content{
    padding:19px 18px 21px!important;
    gap:9px!important;
    min-height:0!important;
  }
  #work .work .cat{
    font-size:9.75px!important;
    line-height:1.45!important;
    letter-spacing:.15em!important;
  }
  #work .work h3{
    font-size:clamp(27px,8.2vw,32px)!important;
    line-height:1.03!important;
  }
  #work .work .meta{
    margin-top:1px!important;
    font-size:14.5px!important;
    line-height:1.52!important;
  }
  #work .work .feature-source{
    margin-top:5px!important;
    gap:6px!important;
    font-size:9.25px!important;
    line-height:1.35!important;
    letter-spacing:.105em!important;
    flex-wrap:wrap!important;
  }
}

@media(max-width:359px){
  #work .work-grid{gap:12px!important}
  #work .work-media{height:auto!important}
  #work .work-content{padding:17px 15px 19px!important}
  #work .work h3{font-size:27px!important}
  #work .work .meta{font-size:14px!important}
}


/* V28.2 — Team profile photo centering
   Keep the approved card layout, but centre each portrait block cleanly so
   every team member headshot sits consistently on the card. */
.page-team .member-mark.member-photo{
  margin-left:auto!important;
  margin-right:auto!important;
}
.page-team .member-mark.member-photo img{
  object-position:center center!important;
}