/*
 * Frontend-only corrective layer — 6.0.3.
 * The Gutenberg editor and approved footer intentionally do not load this file.
 */

/* Reserve the header footprint in its template part, then pin the actual
 * navigation to the viewport. This remains reliable when cache/minify plugins
 * flatten a block-template wrapper or do not support :has(). */
.mohf-sticky-header-shell,
.wp-block-template-part:has(> .site-header){
	position:relative;
	height:var(--header);
}
.site-header,
.mohf-sticky-header-shell .site-header,
.wp-block-template-part:has(> .site-header) > .site-header{
	position:fixed!important;
	top:0!important;
	left:0;
	right:0;
	width:100%;
	z-index:1000!important;
	transition:background-color .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
body.admin-bar .site-header{top:32px!important}
.site-header.is-scrolled{background:rgba(243,234,220,.96);box-shadow:0 10px 35px rgba(49,42,35,.08)}
.mobile-menu{z-index:999}
.header-cta{white-space:nowrap}
.mobile-menu nav .mobile-primary-cta{color:var(--gold)}

/* Dynamic content must remain readable even when an optimization plugin delays
 * the reveal script. JavaScript still adds the intended motion when available. */
.ebook-grid:empty{min-height:1px}
.ebooks-section .ebook-card.reveal{
	animation:mohf-playbook-reveal .85s var(--ease) both;
	animation-delay:calc(var(--reveal-delay,0ms) + 120ms);
}
@keyframes mohf-playbook-reveal{
	from{opacity:0;transform:translateY(28px)}
	to{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
	.ebooks-section .ebook-card.reveal{animation:none;opacity:1;transform:none}
}

/* The service archive keeps one editorial rhythm, while its scope list is
 * specific to the selected service. Decorative sequence numbers are omitted. */
.services-archive{overflow:visible}
.service-path{
	grid-template-columns:150px minmax(0,1fr) minmax(240px,300px);
	column-gap:clamp(28px,4vw,64px);
	row-gap:34px;
	min-height:0;
	padding:42px 0 58px;
}
.service-path-top{min-width:0}
.service-path-top .eyebrow{margin:2px 0 0}
.service-path-main{min-width:0}
.service-path-main h2{font-size:clamp(46px,5.4vw,80px);overflow-wrap:anywhere}
.service-path-main>p{max-width:760px}
.service-path ul{min-width:0;margin-top:2px}
.service-path li{padding:14px 0;overflow-wrap:anywhere}
.service-path-actions{grid-column:2/-1}

/* Insight archive: stable image ratios, generous editorial spacing and a clear
 * two-column hierarchy. These selectors are intentionally page-specific. */
.archive-hero,
.pillar-directory,
.archive-content{box-sizing:border-box}
.archive-content{padding-top:56px}
.archive-grid{align-items:start}
.archive-card{min-width:0;position:relative}
.archive-card[hidden]{display:none!important}
.search-results>a[hidden]{display:none!important}
.archive-card-image{background:#e4d7c6}
.archive-card-image img{display:block;width:100%;height:100%;object-fit:cover}
.archive-card-copy{min-width:0}
.archive-card-copy h2{overflow-wrap:anywhere}
.archive-card-copy>p{font-family:Newsreader,Georgia,serif;font-size:18px;line-height:1.55}
.archive-filter{position:relative;z-index:1}
.pillar-directory-grid>a{min-width:0}
.pillar-directory-grid h3,.pillar-directory-grid p{overflow-wrap:anywhere}

/* Client marks are evidence, not decoration: preserve colour, contrast and a
 * practical optical size on desktop and mobile. */
.client-logo,
.engagement-logo-row a{
  background:rgba(255,255,255,.72);
}
.client-entry-logo{
  background:transparent;
}
.client-logo{text-decoration:none;color:inherit}
.client-logo,
.client-logo img,
.engagement-logo-row img,
.client-entry-logo img{
  filter:none!important;
  opacity:1!important;
}
.client-logo img{
  width:auto;
  max-width:min(190px,100%);
  max-height:82px;
  object-fit:contain;
}

/* Karya / client engagements: keep the five marks as one balanced editorial
 * row. WordPress layout styles must not shrink the links to content width. */
.engagement-preview .engagement-logo-row{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  width:100%;
}
.engagement-preview .engagement-logo-row>a{
  width:100%;
  min-width:0;
  height:175px;
  background:rgba(255,255,255,.2);
}
.engagement-preview .engagement-logo-row img{
  max-width:min(170px,82%);
  max-height:78px;
}
.engagement-logo-row img,
.client-entry-logo img{
  width:auto;
  max-width:min(210px,100%);
  max-height:92px;
  object-fit:contain;
}

/* The archive follows the prototype's editorial treatment: client marks sit
 * directly on ivory, optically aligned to the card edge, without logo tiles. */
.client-archive .client-entry-logo{
  padding:0;
  border:0;
  justify-content:flex-start;
}

/* Field Notes archive: the lead photograph is a portrait composition with the
 * speaker close to the right edge. Preserve its native frame instead of
 * forcing the generic landscape crop used by the remaining cards. */
.fieldnote-entry-featured .fieldnote-entry-image{
  overflow:visible;
  padding:0;
  border:0;
  background:transparent;
}
.fieldnote-entry-featured .fieldnote-entry-image img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  object-position:center;
}
.fieldnote-entry-featured:hover .fieldnote-entry-image img{
  transform:none;
}

/* Home playbooks: keep the cover stage block-level so the metadata cannot
 * flow beside it, then frame each published work like an editorial object. */
.ebooks-section .ebook-card>.ebook-visual{
  position:relative;
  display:flex;
  width:100%;
  height:520px;
  align-items:center;
  justify-content:center;
  margin:0 0 28px;
  padding:22px;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(255,250,241,.72),rgba(224,207,183,.42));
  border:1px solid rgba(143,92,61,.55);
  box-shadow:0 18px 42px rgba(67,45,30,.14),inset 0 0 0 7px rgba(255,250,241,.38);
  isolation:isolate;
}
.ebooks-section .ebook-card>.ebook-visual:before{
  content:"";
  position:absolute;
  inset:9px;
  z-index:0;
  border:1px solid rgba(143,92,61,.25);
  pointer-events:none;
}
.ebooks-section .ebook-card>.ebook-visual img{
  position:relative;
  z-index:1;
  display:block;
  width:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.ebooks-section .ebook-card>.eyebrow{
  display:block;
  width:max-content;
  max-width:100%;
  margin:0 0 12px;
  white-space:nowrap;
}

@media(max-width:820px){
  .fieldnote-entry-featured .fieldnote-entry-image{
    width:100%;
    margin:0;
  }
}

@media(max-width:820px){
  .ebooks-section .ebook-card>.ebook-visual{
    width:min(100%,520px);
    height:min(118vw,540px);
    margin-left:auto;
    margin-right:auto;
    padding:18px;
  }
  .ebooks-section .ebook-card>.eyebrow{
    margin-left:auto;
    margin-right:auto;
  }
}

@media(max-width:820px){
  /* Home trust wall: on mobile the client marks sit directly on the ivory
   * section, matching the clean editorial treatment used on Karya. */
  .trust-section .logo-wall .client-logo,
  .trust-section .logo-wall .client-logo:hover,
  .trust-section .logo-wall .client-logo:focus-visible{
    background:transparent;
  }
  .engagement-preview .engagement-logo-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .engagement-preview .engagement-logo-row>a{
    height:145px;
  }
}

@media(max-width:390px){
  .engagement-preview .engagement-logo-row{
    grid-template-columns:1fr;
  }
  .engagement-preview .engagement-logo-row>a{
    height:132px;
  }
}

@media(max-width:782px){
	body.admin-bar .site-header{top:46px!important}
}

@media(max-width:820px){
	:root{--wrap:calc(100% - 44px)}
	html,body{max-width:100%;overflow-x:clip}
	.header-inner{width:calc(100% - 40px)}
	.site-header{padding-left:max(0px,env(safe-area-inset-left));padding-right:max(0px,env(safe-area-inset-right))}
	.mobile-menu{padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right));padding-bottom:max(30px,env(safe-area-inset-bottom))}
	.hero-copy{padding-left:22px;padding-right:22px}
  .page-hero-copy{padding-left:22px;padding-right:22px}
  .conversation-band,
  .channel-section,
  .related-section,
  .ebook-detail-content,
  .ebook-end{padding-left:22px;padding-right:22px}
  .about-copy,
  .about-portrait>.reveal{padding-left:22px;padding-right:22px}
  .framework-manifesto,
  .framework-reading,
  .path-strip,
  .services-archive,
  .service-fit,
  .service-process,
  .service-deliver,
  .next-paths,
  .venture-archive,
  .engagement-preview,
  .client-archive,
  .client-archive-wrap,
  .fieldnotes-archive,
  .about-story,
  .about-beliefs,
  .about-field-gallery,
  .diagnostic-section,
  .ebook-archive,
  .search-section,
  .contact-main,
  .social-archive{width:calc(100% - 44px)}
  .client-logo{height:128px;padding:22px}
  .client-logo img{max-width:165px;max-height:72px}
  .engagement-logo-row a{padding:24px 20px}
	.engagement-logo-row img{max-width:170px;max-height:78px}

	.services-archive{padding-top:68px}
	.service-path{
		display:flex;
		flex-direction:column;
		gap:0;
		width:100%;
		min-height:0;
		padding:34px 0 46px;
	}
	.service-path-top{
		display:flex;
		flex-direction:row;
		align-items:center;
		justify-content:space-between;
		order:1;
		margin-bottom:22px;
	}
	.service-path-top .eyebrow{display:block;margin:0}
	.service-path-top>a{display:grid;width:46px;height:46px;flex:0 0 auto}
	.service-path-main{order:2;width:100%}
	.service-path-main h2{font-size:clamp(39px,11.2vw,52px);line-height:.96;margin-bottom:20px}
	.service-path-main>p{font-size:18px;line-height:1.5;margin:0}
	.service-path ul{order:3;width:100%;margin:27px 0 0}
	.service-path li{font-size:14px;padding:13px 0}
	.service-path-actions{order:4;width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;margin-top:28px}
	.service-path-actions>a:last-child{text-align:right}

	.archive-hero{grid-template-columns:1fr;gap:30px;padding:68px 0 52px}
	.archive-hero h1{font-size:clamp(48px,13.5vw,72px);line-height:.91;margin-top:20px}
	.archive-intro{font-size:20px}
	.archive-count{position:static;order:-1}
	.pillar-directory{padding-top:58px}
	.pillar-directory-heading{grid-template-columns:1fr;gap:18px;margin-bottom:36px}
	.pillar-directory-heading h2{font-size:clamp(38px,10.8vw,50px)}
	.pillar-directory-heading>p:last-child{font-size:18px}
	.pillar-directory-grid{grid-template-columns:1fr 1fr}
	.pillar-directory-grid>a{min-height:230px;padding:25px 20px;border-bottom:1px solid var(--line)}
	.pillar-directory-grid>a:nth-child(even){border-right:0}
	.archive-content{padding:42px 0 100px}
	.archive-filter{margin-bottom:42px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:7px;scrollbar-width:none}
	.archive-filter::-webkit-scrollbar{display:none}
	.archive-filter button{flex:0 0 auto}
	.archive-grid{grid-template-columns:1fr;gap:56px}
	.archive-card,.archive-card-featured{grid-column:auto;grid-template-columns:1fr;gap:23px;padding-bottom:0;border-bottom:0}
	.archive-card-copy{padding-right:52px}
	.archive-card-copy h2,.archive-card:not(.archive-card-featured) .archive-card-copy h2{font-size:clamp(32px,9.5vw,43px);line-height:1.02}
	.archive-card-copy>p{font-size:17px}
}

@media(max-width:420px){
  :root{--wrap:calc(100% - 40px)}
  .header-inner{width:calc(100% - 36px)}
  .hero-copy,
  .page-hero-copy{padding-left:20px;padding-right:20px}
  .framework-manifesto,
  .framework-reading,
  .path-strip,
  .services-archive,
  .service-fit,
  .service-process,
  .service-deliver,
  .next-paths,
  .venture-archive,
  .engagement-preview,
  .client-archive,
  .client-archive-wrap,
  .fieldnotes-archive,
  .about-story,
  .about-beliefs,
  .about-field-gallery,
  .diagnostic-section,
  .ebook-archive,
  .search-section,
  .contact-main,
	.social-archive{width:calc(100% - 40px)}
	.service-path-actions{align-items:flex-start;flex-direction:column}
	.service-path-actions>a:last-child{text-align:left}
	.pillar-directory-grid{grid-template-columns:1fr}
	.pillar-directory-grid>a{border-right:0;min-height:205px}
	.archive-card-copy{padding-right:42px}
}
/* About hero: preserve the left-positioned subject in the square source image. */
.about-page-hero .page-hero-image img{
  object-position:22% center;
}

@media (max-width:820px){
  .about-page-hero .page-hero-image{
    min-height:0;
    aspect-ratio:1/1;
  }
  .about-page-hero .page-hero-image img{
    object-position:center center;
  }
}

/* Final motion language — quiet, editorial and trustworthy. */
.reveal[data-motion="rise"]{
  transform:translate3d(0,38px,0);
  transition-property:opacity,transform;
  transition-duration:.9s;
  transition-timing-function:var(--ease);
  will-change:opacity,transform;
}
.reveal[data-motion="card"]{
  transform:translate3d(0,30px,0) scale(.985);
  transform-origin:center bottom;
  transition-property:opacity,transform;
  transition-duration:.82s;
  transition-timing-function:var(--ease);
  will-change:opacity,transform;
}
.reveal[data-motion="image"]{
  transform:translate3d(0,20px,0);
  clip-path:inset(0 0 14% 0);
  transition-property:opacity,transform,clip-path;
  transition-duration:1.05s;
  transition-timing-function:var(--ease);
  will-change:opacity,transform,clip-path;
}
.reveal.is-visible[data-motion]{
  opacity:1;
  transform:none;
  clip-path:inset(0);
  will-change:auto;
}
.service-card,.venture-card,.insight-card,.archive-card,.client-entry,.belief-card,.process-card{
  transition:transform .42s var(--ease),box-shadow .42s var(--ease),background-color .42s var(--ease);
}
@media(hover:hover) and (pointer:fine){
  .service-card:hover,.insight-card:hover,.client-entry:hover{
    transform:translateY(-5px);
  }
}
@media(max-width:820px){
  /* The Framework renderer already ships a real dot element
   * (.framework-icon > span). Position that element on the mobile timeline
   * instead of relying on a generated pseudo-element, which is not painted
   * consistently by the live mobile rendering stack. */
  .home .framework-flow>.framework-item:before{
    content:none!important;
    display:none!important;
  }
  /* Every Framework item is also a reveal element. Once it becomes visible,
   * the shared motion rule applies clip-path:inset(0), which cuts off the dot
   * positioned outside the item's left edge. Keep the rise/fade motion, but
   * release clipping only for these mobile timeline items. */
  .home .framework-flow>.framework-item.reveal[data-motion],
  .home .framework-flow>.framework-item.reveal.is-visible[data-motion]{
    clip-path:none!important;
    overflow:visible!important;
  }
  .home .framework-flow>.framework-item>.framework-icon{
    position:absolute!important;
    left:-50px!important;
    top:26px!important;
    z-index:10!important;
    display:grid!important;
    place-items:center!important;
    width:20px!important;
    height:20px!important;
    min-width:20px!important;
    min-height:20px!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    pointer-events:none;
  }
  .home .framework-flow>.framework-item>.framework-icon>span{
    display:block!important;
    width:14px!important;
    height:14px!important;
    min-width:14px!important;
    min-height:14px!important;
    box-sizing:border-box!important;
    border:2px solid var(--copper)!important;
    border-radius:50%!important;
    background:var(--paper)!important;
    box-shadow:0 0 0 4px var(--paper)!important;
    transform:none!important;
  }
  .home .framework-flow>.framework-item.is-flow-active>.framework-icon>span{
    background:var(--copper)!important;
    border-color:var(--copper)!important;
    transform:scale(1.08)!important;
  }

  .reveal[data-motion="rise"]{transform:translate3d(0,28px,0);transition-duration:.76s}
  .reveal[data-motion="card"]{transform:translate3d(0,24px,0) scale(.99);transition-duration:.72s}
  .reveal[data-motion="image"]{transform:translate3d(0,16px,0);clip-path:inset(0 0 10% 0);transition-duration:.86s}
  .reveal.is-visible[data-motion]{transform:none;clip-path:inset(0)}
  /* The Insight archive wrapper is taller than a mobile viewport can satisfy
   * at the observer threshold. Keep the wrapper visible and let each article
   * card retain its own reveal motion. */
  .archive-content>.reveal[data-motion]{
    opacity:1;
    transform:none;
    clip-path:none;
    transition:none;
    will-change:auto;
  }
  /* Article lead images are landscape editorial artwork. Preserve the full
   * composition on mobile instead of cropping it into a tall cover frame. */
  .article-page .article-hero-image{
    min-height:0;
    padding:0;
    border:0;
    overflow:visible;
    background:transparent;
  }
  .article-page .article-hero-image img{
    display:block;
    width:100%;
    height:auto;
    max-height:none;
    aspect-ratio:auto;
    object-fit:contain;
    object-position:center;
  }

  /* Live Insight articles are rendered by the legacy single-post template,
   * not by .article-page. Its mobile rule forces a landscape asset into a
   * 118vw-tall cover box. Release the real renderer's image to its native
   * aspect ratio so the complete composition is visible. */
  .single-post .mo-single-hero>.mo-entry-visual{
    height:auto!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    overflow:visible!important;
  }
  .single-post .mo-single-hero>.mo-entry-visual>img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center!important;
    transform:none!important;
  }

  /* Insight topic archives use the legacy archive-card media class rather
   * than the article hero class. Release the landscape crop on mobile so the
   * complete editorial artwork remains visible. */
  .tax-mo_insight_pillar .mo-archive-card__media{
    height:auto;
    min-height:0;
    aspect-ratio:auto;
    overflow:visible;
  }
  .tax-mo_insight_pillar .mo-archive-card__media img{
    display:block;
    width:100%!important;
    height:auto!important;
    max-height:none;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center!important;
    contain:none!important;
    contain-intrinsic-size:none!important;
  }

  /* Field Notes archive: a tall portrait card can remain below the observer's
   * mobile intersection threshold while still reserving its full grid height.
   * Keep the card readable, tighten the editorial rhythm, and preserve every
   * photograph's native frame instead of cropping people at the edges. */
  .fieldnotes-archive{
    padding-top:46px;
    padding-bottom:72px;
  }
  .fieldnotes-archive .fieldnote-entry,
  .fieldnotes-archive .fieldnote-entry.reveal[data-motion]{
    opacity:1;
    transform:none;
    clip-path:none;
    transition:none;
    will-change:auto;
  }
  .fieldnotes-archive .fieldnote-entry{
    min-height:0;
    align-items:start;
    gap:22px;
    padding:34px 0 42px;
  }
  .fieldnotes-archive .fieldnote-entry-image{
    display:block;
    width:100%;
    height:auto;
    min-height:0;
    margin:0;
    padding:0;
    overflow:visible;
    border:0;
    background:transparent;
    line-height:0;
  }
  .fieldnotes-archive .fieldnote-entry-image img{
    position:static;
    display:block;
    width:100%;
    height:auto!important;
    block-size:auto!important;
    max-height:none;
    aspect-ratio:auto;
    object-fit:contain;
    object-position:center;
    contain:none!important;
    contain-intrinsic-size:none!important;
    transform:none;
  }
}
@media(prefers-reduced-motion:reduce){
  .reveal[data-motion]{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important;will-change:auto!important}
}

/* 6.3.3 — Insight article related cards only. WordPress adds a 3000x1500
 * intrinsic placeholder to lazy images before they load. A plain auto-height
 * image therefore reserves 1500px inside the narrow article grid. Keep the
 * editorial artwork uncropped, but let the frame own a stable 16:10 ratio so
 * the placeholder can never stretch the card. */
.single-post .mo-related:not(.mo-channel-panel) .mo-post-card__media{
  --mo-related-frame-pad:10px;
  position:relative;
  box-sizing:border-box;
  width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:16/10;
  margin-bottom:20px;
  padding:0;
  overflow:hidden;
  border:1px solid var(--mo-line);
  background:var(--mo-paper);
  line-height:0;
}
.single-post .mo-related:not(.mo-channel-panel) .mo-post-card__media img{
  position:absolute!important;
  inset:var(--mo-related-frame-pad)!important;
  display:block;
  width:calc(100% - (2 * var(--mo-related-frame-pad)))!important;
  height:calc(100% - (2 * var(--mo-related-frame-pad)))!important;
  min-height:0;
  max-height:none;
  aspect-ratio:auto;
  object-fit:contain!important;
  object-position:center!important;
  contain:none!important;
  contain-intrinsic-size:none!important;
  transform:none;
}
.single-post .mo-related:not(.mo-channel-panel) .mo-post-card:hover .mo-post-card__media img{
  transform:none;
}

@media(max-width:782px){
  .single-post .mo-related:not(.mo-channel-panel) .mo-post-card__media{
    --mo-related-frame-pad:8px;
    margin-bottom:18px;
  }
}