/* EXINCOR v0.8. A lid opens over a stationary, original Exincor mark.
   Only transforms and opacity animate; no video, library or duplicated logo. */
.hero-wordmark{overflow:visible}
.logo-window{position:relative;line-height:0;isolation:isolate;overflow:visible;perspective:1400px}
.logo-window>img{display:block;width:100%;height:auto;opacity:1;transform:none}
.logo-flaps{display:none;position:absolute;inset:-1px;pointer-events:none;perspective:1400px;perspective-origin:50% 50%;transform-style:preserve-3d}
html[data-motion=full] .logo-opening .logo-flaps{display:block}
.logo-flap{position:absolute;display:block;background-color:var(--green);backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform,opacity}
/* The outside flaps hinge on the outer vertical edges. */
.logo-flap--left,.logo-flap--right{top:0;bottom:0;width:calc(50% + 1px);z-index:2}
.logo-flap--left{left:0;transform-origin:left center;background-image:linear-gradient(90deg,#064a45 0%,#084c47 86%,#104f4a);box-shadow:1px 0 0 #ffffff15}
.logo-flap--right{right:0;transform-origin:right center;background-image:linear-gradient(270deg,#064a45 0%,#044742 86%,#06423e);box-shadow:-1px 0 0 #00000020}
/* The second pair opens above and below; the mark is not split or moved. */
.logo-flap--top,.logo-flap--bottom{left:0;right:0;height:calc(50% + 1px);z-index:1}
.logo-flap--top{top:0;transform-origin:center top;background-image:linear-gradient(180deg,#064a45,#0b4e48);box-shadow:0 1px 0 #ffffff18}
.logo-flap--bottom{bottom:0;transform-origin:center bottom;background-image:linear-gradient(0deg,#064a45,#04433e);box-shadow:0 -1px 0 #00000020}
html[data-motion=reduced] .logo-flaps{display:none!important}
@media(prefers-reduced-motion:reduce){html:not([data-motion=full]) .logo-flaps{display:none!important}}
@media print{.logo-flaps{display:none!important}}
/* Social is secondary to the conversation, with a real link in every language. */
.instagram-link{display:inline-flex;align-items:center;gap:11px;min-height:44px;font-size:14px;letter-spacing:0;line-height:1.4}
.instagram-link .ui-icon{width:19px;height:19px;flex:none}
.instagram-icon{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.instagram-icon .instagram-dot{fill:currentColor;stroke:none}
.instagram-link>span{border-bottom:1px solid #ffffff50;padding-bottom:3px}
.instagram-link:hover>span,.instagram-link:focus-visible>span{border-bottom-color:currentColor}
.footer-contact{display:flex;align-items:center;justify-content:space-between;gap:20px 40px;flex-wrap:wrap}
.contact-details .contact-instagram{display:flex;flex-direction:column;align-items:flex-start;gap:13px;margin-top:24px}
.contact-details .instagram-link>span,.menu-foot .instagram-link>span{border-bottom-color:#064a4545}
.menu-foot .instagram-link{font-size:13px;gap:8px}
@media(max-width:600px){.footer-contact{gap:18px;align-items:flex-start;flex-direction:column}.instagram-link{font-size:13px}.menu-foot{gap:12px 20px}.menu-foot .instagram-link{min-height:40px}}
/* v0.8.5 - Keep Bruma's copy and chapter controls in separate layout rows.
   A desktop window can be wide but short. Use its height as well as its width
   to size the editorial type; never cover the copy with absolute-positioned tabs.
   The artwork keeps its existing layers, projection and transitions. */
@media (min-width:701px) {
  .sequence-stage {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr) auto;
    row-gap:clamp(12px,2svh,20px);
    padding:27px var(--pad) 28px;
    min-height:0;
  }
  .stage-top {
    position:relative;
    inset:auto;
    grid-area:1 / 1;
    min-width:0;
  }
  .stage-copy {
    position:relative;
    inset:auto;
    grid-area:2 / 1;
    align-self:start;
    width:43%;
    max-width:43%;
    min-width:0;
    margin-top:clamp(14px,4svh,40px);
  }
  .stage-bottom {
    position:relative;
    inset:auto;
    grid-area:3 / 1;
    min-width:0;
  }
}
@media (min-width:701px) and (max-width:900px) {
  .stage-copy {width:45%;max-width:45%}
}
@media (min-width:701px) and (max-height:800px) {
  .sequence-stage {padding-top:20px;padding-bottom:20px;row-gap:clamp(12px,2svh,16px)}
  .stage-copy {margin-top:clamp(10px,2svh,16px)}
  .chapter-index {font-size:clamp(24px,4svh,32px);padding-bottom:6px}
  .stage-kicker {margin:clamp(12px,2svh,16px) 0}
  .stage-copy h2 {
    font-size:clamp(36px,min(6.5vw,11.5svh),112px);
    margin-bottom:clamp(12px,2.5svh,20px);
  }
  .stage-copy>p:last-child {font-size:clamp(13px,2.2svh,16px);line-height:1.45}
}
@media (min-width:701px) and (max-height:600px) {
  .sequence-stage {padding-top:14px;padding-bottom:14px;row-gap:10px}
  .stage-top>.eyebrow {font-size:8px}
  .concept-tag {font-size:8px;padding:7px 12px}
  .stage-copy {margin-top:8px}
  .chapter-index {font-size:24px;padding-bottom:5px;width:38px}
  .stage-kicker {font-size:8px;margin:10px 0;line-height:1.4}
  .stage-copy h2 {font-size:clamp(32px,min(6.5vw,10svh),62px);margin-bottom:12px}
  .stage-copy>p:last-child {font-size:13px;line-height:1.4}
}
@media (min-width:701px) and (max-height:540px) {
  .stage-copy {margin-top:4px}
  .stage-copy h2 {font-size:clamp(32px,min(6.5vw,8.6svh),50px)}
}
/* On extremely shallow/landscape windows, show every chapter in document flow
   rather than trapping a viewport-sized panel that has no room for its copy. */
@media (max-height:460px), (max-width:700px) and (max-height:540px) {
  html.enhanced[data-motion=full] .sequence {height:auto;min-height:0}
  html.enhanced[data-motion=full] .sequence-stage {display:none}
  html.enhanced[data-motion=full] .story-static {display:block}
}

/* v0.8.6 / Print bleed, not a stretched header logo.
   The original SVG is unchanged. Its frame is the full viewport, deliberately
   cutting a little from both sides and the baseline. Text and CTA stay above. */
.site-footer .footer-logo {
  position:relative;
  width:calc(100% + var(--pad) + var(--pad));
  height:auto;
  aspect-ratio:4.9 / 1;
  padding:0;
  margin:clamp(44px,6vw,92px) calc(-1 * var(--pad)) -1px;
  overflow:hidden;
  isolation:isolate;
  line-height:0;
}
.site-footer .footer-logo img {
  position:absolute;
  inset:0 auto auto -6%;
  width:112%;
  max-width:none;
  height:auto;
  display:block;
}
.site-footer .footer-logo:focus-visible {outline:2px solid var(--cream);outline-offset:-5px}
@media(max-width:700px){
  .site-footer .footer-logo {margin-top:48px;aspect-ratio:4.9 / 1}
}
@media print {
  .site-footer .footer-logo {aspect-ratio:auto;height:auto;overflow:visible;margin:30px 0 0;width:100%}
  .site-footer .footer-logo img {position:static;width:100%}
}