/* Hero hub and open navigation share the existing glass surface language. */
body.octave-home .hero-copy .story-heading{display:flex;flex-direction:column;max-width:none;line-height:.95;overflow:visible}
body.octave-home .story-heading .story-top{display:flex;align-items:baseline;gap:.15em;line-height:.86}
body.octave-home .story-heading .hero-amp{font-size:2.8em;line-height:.78;font-weight:100!important;font-variation-settings:"wght" 100,"opsz" 12!important}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.hero-action{display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:54px;padding:6px 24px;border:1px solid #ffffffc9;border-radius:999px;background:linear-gradient(135deg,#ffffff12,#ffffff30);box-shadow:inset 0 6px 14px #66563c08;color:var(--ink);font:inherit;font-size:16px;text-decoration:none;backdrop-filter:blur(14px)}
.hero-action-work{padding-right:6px}
.hero-action-work .hero-action-arrow{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border:1px solid #ffffff9c;border-radius:50%;background:color-mix(in srgb,var(--ink) 5%,transparent);font-size:23px}
.hero-action:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.hero-action:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
body.nav-menu-open .toolbar-pill-glass{visibility:hidden!important}
body.octave-home .jm-bar.jm-menu-open .jm-bar-inner{background:transparent!important;border-color:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;justify-content:flex-end!important}
body .jm-bar.jm-menu-open .toolbar-home-capsule{visibility:hidden;pointer-events:none}
body .jm-bar.jm-menu-open .jm-barnav{width:min(300px,calc(100vw - 40px));padding:16px;border-radius:26px;background:color-mix(in srgb,var(--paper) 96%,transparent);border:1px solid #ffffffe6;gap:4px;max-height:calc(100svh - 110px);overflow-y:auto}
body .jm-bar.jm-menu-open .jm-barnav .jm-barlink{min-height:54px;padding:10px 20px;border-radius:16px;font-size:18px}
body.octave-home .jm-bar.jm-menu-open .jm-menu-toggle{outline:1px solid #ffffffce;outline-offset:4px}
body.octave-home .jm-bar.jm-menu-open .jm-menu-icon,body.octave-home .jm-bar.jm-menu-open .jm-menu-icon::before,body.octave-home .jm-bar.jm-menu-open .jm-menu-icon::after{width:14px}
@media(max-width:679px){.hero-actions{gap:10px;margin-top:22px}.hero-action{font-size:14px;padding-left:17px;padding-right:17px;min-height:48px;gap:12px}.hero-action-work{padding-right:5px}.hero-action-work .hero-action-arrow{width:36px;height:36px;flex-basis:36px}}
@media(prefers-reduced-motion:reduce){.octave-home .why-wow.is-scroll-driven .why-wow-word{transition:none!important}}

/* Identical glass surfaces and circular insets across the three controls. */
body.octave-home .hero-action,
body.octave-home .jm-bar:not(.jm-menu-open) .jm-bar-inner,
body.octave-home .story-lockup .board-story-info{
 background:linear-gradient(120deg,#ffffff12,transparent 55%,#ffffff20)!important;
 border:1px solid #ffffffe0!important;box-shadow:none!important;
 backdrop-filter:blur(9px) saturate(1.25);-webkit-backdrop-filter:blur(9px) saturate(1.25);
}
body.octave-home .hero-action{box-sizing:border-box;height:54px;min-height:54px;padding:4px 22px;font:400 15px/1 'ABC Oracle',Arial,sans-serif;white-space:nowrap}
body.octave-home .hero-action-work{padding:4px 4px 4px 20px}
body.octave-home .hero-action-work .hero-action-arrow{box-sizing:border-box;width:44px;height:44px;flex-basis:44px;border:1px solid #ffffffc0;background:linear-gradient(140deg,color-mix(in srgb,var(--ink) 7%,transparent),color-mix(in srgb,var(--ink) 3%,transparent));color:color-mix(in srgb,var(--ink) 75%,var(--paper));font-size:23px}
.hero-actions{flex-wrap:nowrap;container-type:inline-size}
@media(max-width:1000px){
 .hero-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:8px}
 body.octave-home .hero-action{width:100%;min-width:0;padding-inline:10px;font-size:clamp(11px,4.2cqw,15px);gap:8px}
 body.octave-home .hero-action-work{padding-right:4px;padding-left:10px;justify-content:space-between}
}

/* Use the nav's outer glass and recessed inner capsule, not a solid fill. */
body.octave-home .hero-action{position:relative;isolation:isolate;color:var(--ink);}
body.octave-home .hero-action::before{content:"";position:absolute;inset:4px;z-index:-1;border:1px solid #ffffff70;border-radius:999px;background:linear-gradient(120deg,color-mix(in srgb,var(--ink) 10%,transparent),color-mix(in srgb,var(--ink) 5%,transparent));box-shadow:inset 0 1px 1px #ffffff35;pointer-events:none}
body.octave-home .hero-action-work::before{right:56px}

/* Centre the label in the recessed capsule independently of its arrow. */
body.octave-home .hero-action{font-weight:300}
body.octave-home .hero-action-work{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px;padding:4px}
body.octave-home .hero-action-label{display:block;min-width:0;padding-inline:16px;text-align:center;font-weight:300;line-height:1}
/* Clip glass layers to the capsule and remove the inset shadow seam. */
body.octave-home .hero-action{overflow:hidden;clip-path:inset(0 round 999px)}
body.octave-home .hero-action::before{box-shadow:none;background:color-mix(in srgb,var(--ink) 7%,transparent)}
/* Static glass layers avoid backdrop sampling seams during hero movement. */
body.octave-home .hero-action{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;clip-path:none;overflow:hidden}
/* A 44px circle centred inside the 54px shell, just like navigation. */
body.octave-home .story-lockup .board-story-info{height:54px!important;padding:4px 4px 4px 20px!important;gap:16px;align-items:center!important;justify-content:space-between!important;box-sizing:border-box}
body.octave-home .story-lockup .board-story-info::after{position:static!important;width:44px!important;height:44px!important;flex:0 0 44px!important;margin:0!important;box-sizing:border-box;border:1px solid #ffffffc0!important;display:grid;place-items:center;background:linear-gradient(140deg,color-mix(in srgb,var(--ink) 7%,transparent),color-mix(in srgb,var(--ink) 3%,transparent))!important;color:color-mix(in srgb,var(--ink) 75%,var(--paper))!important}
/* Both actions fit the available copy column at every viewport width. */
body.octave-home .hero-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);width:100%;max-width:500px;gap:clamp(6px,1vw,14px)}
body.octave-home .hero-action{width:100%;min-width:0;font-size:clamp(11px,4.1cqw,15px);padding-inline:10px;touch-action:manipulation}
body.octave-home .hero-action-work{grid-template-columns:minmax(0,1fr) 44px;padding:4px;gap:4px}
body.octave-home .hero-action-label{padding-inline:2px}
@media(max-width:380px){body.octave-home .hero-action{font-size:11px}body.octave-home .hero-action-work{grid-template-columns:minmax(0,1fr) 38px}body.octave-home .hero-action-work .hero-action-arrow{width:38px;height:38px;flex-basis:38px}body.octave-home .hero-action-work::before{right:46px}}
@media(max-width:1000px){body.octave-home .hero-actions{width:100%;max-width:500px;margin-left:0;container-type:inline-size}body.octave-home .hero-action{font-size:clamp(11px,3.8cqw,15px)}}

/* Keep both capsules inside the same mobile column as the client logos. */
@media(max-width:679px){
 body.octave-home .hero-action{height:48px;min-height:48px;font-size:11px;padding-inline:6px}
 body.octave-home .hero-action-work{grid-template-columns:minmax(0,1fr) 32px;padding:4px;gap:2px}
 body.octave-home .hero-action-work .hero-action-arrow{width:32px;height:32px;flex-basis:32px;font-size:20px}
 body.octave-home .hero-action-work::before{right:40px}
 body.octave-home .hero-action-label{padding-inline:0}
}
@media(max-width:359px){body.octave-home .hero-actions{grid-template-columns:1fr}body.octave-home .hero-action{font-size:13px}}