/* Motion layer — companion to assets/js/motion.js. Loaded on every page except the guides. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

.page-curtain{position:fixed;inset:0;z-index:200;background:#060707;pointer-events:none;opacity:0;visibility:hidden}

/* Header gains its rule once the page has scrolled. */
.site-header{transition:border-color .3s ease,background .3s ease}
.site-header.is-scrolled{border-bottom-color:rgba(243,239,230,.34)}

/* Interactive states: inversion plus a small lift everywhere, matching hover and focus-visible. */
.motion .button,.motion .btn,.motion .header-cta{will-change:transform;transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease}
.motion .text-link,.motion .booking-fallback,.motion .footer-group>a{transition:color .2s ease,transform .2s ease,text-decoration-color .2s ease}
.motion .site-nav>a:not(.header-cta)::after{transition:right .32s cubic-bezier(.16,1,.3,1)}

/* Split lines on the Johannesburg hero heading. */
.local-hero h1 .line-mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}

/* Sticky call to action on the Johannesburg pages. */
.sticky-cta{position:fixed;right:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,32px);z-index:90;min-height:52px;padding:0 22px;display:inline-flex;align-items:center;gap:18px;border:1px solid var(--paper);background:var(--paper);color:var(--ink);font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;opacity:0;visibility:hidden;box-shadow:none}
.sticky-cta::after{content:'\2197';font-size:1rem}
.sticky-cta:hover,.sticky-cta:focus-visible{background:var(--red);border-color:var(--red);color:var(--paper);outline:none}
@media(max-width:720px){.sticky-cta{left:16px;right:16px;bottom:16px;justify-content:center}}

/* Growth disciplines: the row rule draws in from the left. */
.growth-disciplines__list article{--rule:1;position:relative}
.growth-disciplines__list article::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:currentColor;opacity:.45;transform:scaleX(var(--rule));transform-origin:left center}

/* Details content needs a box to animate. */
.motion details>p{overflow:hidden}

/* Johannesburg hero art stack. */
.local-hero{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);align-content:center;min-height:max(600px,min(calc(100svh - 68px),860px))}
.local-hero__art{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.local-hero__art img{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;object-position:center 40%;will-change:transform}
.local-hero__scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(6,7,7,.96) 0%,rgba(6,7,7,.88) 34%,rgba(6,7,7,.5) 62%,rgba(6,7,7,.22) 100%),linear-gradient(to bottom,rgba(6,7,7,.5),transparent 32%,rgba(6,7,7,.25) 70%,#060707 100%)}
.local-hero__mesh{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(201,179,156,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(201,179,156,.07) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:linear-gradient(transparent,#000 18% 82%,transparent);mask-image:linear-gradient(transparent,#000 18% 82%,transparent)}
.local-hero__wash{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 74% 56%,rgba(225,72,63,.26),transparent 42%)}
.local-hero__frame{position:absolute;inset:18px;z-index:2;pointer-events:none}
.local-hero__frame i{position:absolute;width:56px;height:56px;opacity:.55}
.local-hero__frame i::before,.local-hero__frame i::after{content:'';position:absolute;background:var(--warm)}
.local-hero__frame i::before{width:100%;height:1px}.local-hero__frame i::after{width:1px;height:100%}
.local-hero__frame i:nth-child(1){top:0;left:0}.local-hero__frame i:nth-child(2){top:0;right:0;transform:scaleX(-1)}
.local-hero__frame i:nth-child(3){bottom:0;left:0;transform:scaleY(-1)}.local-hero__frame i:nth-child(4){bottom:0;right:0;transform:scale(-1)}
.local-hero__diagram{position:absolute;z-index:1;right:clamp(20px,4vw,64px);top:50%;width:min(42vw,700px);transform:translateY(-50%);pointer-events:none;opacity:.95}
.local-hero__diagram svg{width:100%;height:auto;display:block;overflow:visible}
.local-hero .growth-shell{position:relative;z-index:3;width:min(1320px,calc(100% - (var(--gutter)*2)));margin-inline:auto}
.local-hero__grid-copy{position:relative}
@media(max-width:980px){.local-hero__diagram{position:relative;right:auto;top:auto;transform:none;order:2;width:min(100%,620px);margin:8px auto 0;padding-inline:var(--gutter);opacity:.9}.local-hero__scrim{background:linear-gradient(to bottom,rgba(6,7,7,.86),rgba(6,7,7,.72) 40%,#060707 100%)}}
@media(max-width:640px){.local-hero{min-height:0}.local-hero__frame{inset:10px}}

@media(prefers-reduced-motion:reduce){
  .sticky-cta{display:none}
  .local-hero h1 .line-mask{overflow:visible}
}