/*
 * BP7 Platform V2.0.2
 * Experience layer: resilient audiovisual hero, smarter navigation, cleaner interaction states.
 */
:root{--bp7-header-h:82px;--bp7-v2-ease:cubic-bezier(.16,1,.3,1)}

/* Accessibility and interaction quality */
.skip-link{position:fixed;left:18px;top:14px;z-index:500;transform:translateY(-160%);background:#fff;color:#080808;padding:10px 14px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;transition:transform .22s var(--bp7-v2-ease)}
.skip-link:focus{transform:translateY(0)}
a:focus-visible,button:focus-visible,[role="button"]:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
input:not([type="checkbox"]):not([type="radio"]):focus-visible,textarea:focus-visible,select:focus-visible{outline:none}
input[type="checkbox"]:focus-visible,input[type="radio"]:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* Slim page progress, intentionally quieter than a traditional scrollbar. */
.bp7-page-progress{position:fixed;z-index:140;left:0;right:0;top:0;height:2px;pointer-events:none;background:rgba(255,255,255,.05)}
.bp7-page-progress>i{display:block;width:100%;height:100%;background:var(--blue);transform:scaleX(0);transform-origin:left center;will-change:transform}

/* Header remains present without covering the work. */
.header{will-change:transform,background-color,border-color;transition:transform .42s var(--bp7-v2-ease),background-color .28s ease,border-color .28s ease,backdrop-filter .28s ease}
.header.bp7-header-hidden{transform:translateY(calc(-100% - 8px))}
.header.scrolled{background:rgba(8,8,8,.82);backdrop-filter:blur(18px) saturate(125%);-webkit-backdrop-filter:blur(18px) saturate(125%)}
.header .brand img{transition:opacity .25s ease,transform .35s var(--bp7-v2-ease)}
.header .brand:hover img{opacity:.78;transform:translateY(-1px)}

/* V2.0.4 hero. Media is prepared during loader exit and played only after the page is visible. */
.hero.hero-has-video{position:relative;width:100%;height:100svh;min-height:100svh;padding:0!important;margin:0;display:block;overflow:hidden;background:#050505;isolation:isolate}
.hero.hero-has-video:before{display:none!important}
.hero.hero-has-video .hero-video-track{position:absolute;inset:0;z-index:0;overflow:hidden;background:#050505;opacity:1!important;transform:none!important;pointer-events:none}
.hero.hero-has-video .hero-video-track:before,.hero.hero-has-video .hero-video-track:after{display:none!important}
.hero-native-video,.hero-video-poster,.hero-video-scrim{position:absolute;inset:0;width:100%;height:100%}
.hero-native-video{z-index:1;border:0;object-fit:cover;object-position:center center;background:#050505;opacity:0;transition:opacity .65s ease;pointer-events:none;user-select:none}
.hero-youtube-mount{position:absolute;inset:0;z-index:1;overflow:hidden;background:#050505;opacity:0;transition:opacity .28s ease;pointer-events:none;user-select:none}
.hero-youtube-mount iframe{position:absolute!important;left:50%!important;top:50%!important;width:100vw!important;height:56.25vw!important;min-width:177.78vh!important;min-height:100vh!important;transform:translate(-50%,-50%) scale(1.025)!important;border:0!important;pointer-events:none!important}
.hero-video-poster{z-index:0;background:#050505 center center/cover no-repeat;opacity:1;transition:opacity .28s ease}
.hero-video-scrim{z-index:2;background:linear-gradient(180deg,rgba(5,5,5,.40) 0%,rgba(5,5,5,.06) 34%,rgba(5,5,5,.12) 58%,rgba(5,5,5,.62) 100%),linear-gradient(90deg,rgba(5,5,5,.28),transparent 42%,rgba(5,5,5,.12));pointer-events:none}
.hero-video-track.is-native.is-ready .hero-native-video{opacity:1}
.hero-video-track.is-native.is-ready .hero-video-poster{opacity:0}
.hero-video-track.is-youtube.youtube-visible .hero-youtube-mount{opacity:1}
.hero-video-track.is-youtube.youtube-visible .hero-video-poster{opacity:0}
.hero-video-track.is-poster .hero-video-poster{opacity:1}
.hero-video-track.is-loading .hero-video-poster{opacity:1}
.hero.hero-has-video .hero-inner.hero-overlay{position:relative;z-index:6;width:min(1500px,calc(100% - 64px));height:100%;min-height:100svh;margin:0 auto;padding:calc(var(--bp7-header-h) + 22px) 0 34px;display:flex!important;flex-direction:column;justify-content:space-between;pointer-events:none}
.hero.hero-has-video .hero-meta{display:flex!important;justify-content:space-between;align-items:center;margin:0;color:rgba(255,255,255,.72);text-shadow:0 1px 24px rgba(0,0,0,.25)}
.hero.hero-has-video .hero-meta .kicker{font-size:10px;letter-spacing:.18em;font-weight:700}
.hero.hero-has-video .hero-type-heading,.hero.hero-has-video .hero-case-caption,.hero.hero-has-video .hero-scroll-mark,.hero.hero-has-video .hero-film-track{display:none!important}
.hero.hero-has-video .hero-sub{display:grid!important;grid-template-columns:minmax(0,7fr) minmax(260px,5fr);gap:32px;align-items:end;margin:0;pointer-events:none}
.hero.hero-has-video .hero-sub p{margin:0;max-width:710px;font-size:18px;line-height:1.55;color:rgba(255,255,255,.82);text-shadow:0 2px 30px rgba(0,0,0,.32)}
.hero.hero-has-video .hero-conversation-link{justify-self:end;display:flex;align-items:center;gap:18px;min-width:224px;justify-content:space-between;color:#fff;border-bottom:1px solid rgba(255,255,255,.72);padding:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.12em;pointer-events:auto;transition:border-color .22s ease,opacity .22s ease}
.hero.hero-has-video .hero-conversation-link:hover{border-color:#fff;opacity:.78}
.hero-link-arrow{font-size:16px;line-height:1}
.hero-video-track.is-loading:after{content:"";display:block!important;position:absolute;z-index:5;left:50%;bottom:24px;width:54px;height:1px;background:rgba(255,255,255,.18);transform:translateX(-50%);overflow:hidden}
.hero-video-track.is-loading:before{content:"";display:block!important;position:absolute;z-index:6;left:calc(50% - 27px);bottom:24px;width:54px;height:1px;background:#fff;transform-origin:left;animation:bp7HeroLoad 1.1s ease-in-out infinite}
@keyframes bp7HeroLoad{0%{transform:scaleX(.08);opacity:.35}50%{transform:scaleX(.72);opacity:.95}100%{transform:scaleX(.08);opacity:.35}}
.hero-video-track.is-ready:before,.hero-video-track.is-ready:after,.hero-video-track.is-poster:before,.hero-video-track.is-poster:after{display:none!important}

/* Content rhythm */
.word-tunnel{border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.section-head h2,.thesis h2,.method-intro h2,.value-title,.final h2{text-wrap:balance}
.thesis-copy p,.case-desc,.change-row p,.experience-card p,.method-step p,.value-intro,.article-copy p,.animus-copy p{text-wrap:pretty}

/* Work feels more tactile without becoming card UI. */
.work .case{transition:opacity .35s ease}
.work .case-media{background:#101010;overflow:hidden}
.work .case-media img{transition:filter .55s ease,transform .8s var(--bp7-v2-ease)}
@media(hover:hover) and (pointer:fine){
  .work .case:hover .case-media img{filter:saturate(1.03) contrast(1.02);transform:scale(1.018)}
  .work .case:hover .case-meta span:last-child{color:#fff}
  .work:has(.case:hover) .case:not(:hover){opacity:.62}
}

/* Experience links have a clearer hit area. */
.experience-card{transition:background-color .35s ease,color .35s ease,transform .45s var(--bp7-v2-ease)}
.experience-link{display:inline-flex;align-items:center;min-height:42px}

/* Menu overlay: faster reading and calmer motion. */
.menu-overlay{overscroll-behavior:contain}
.menu-links a{transition:opacity .2s ease,transform .35s var(--bp7-v2-ease)}
@media(hover:hover) and (pointer:fine){.menu-links:has(a:hover) a:not(:hover){opacity:.28}.menu-links a:hover{transform:translateX(8px)}}

/* Images outside the first fold decode more gently. */
img{content-visibility:auto}

@media(max-width:767px){
  :root{--bp7-header-h:68px}
  .bp7-page-progress{height:1px}
  .header.bp7-header-hidden{transform:translateY(calc(-100% - env(safe-area-inset-top) - 4px))}
  .hero.hero-has-video{width:100%;height:auto!important;min-height:0!important;aspect-ratio:16/9;padding:0!important;margin:0;display:block}
  .hero.hero-has-video .hero-video-track{position:absolute;inset:0;width:100%;height:100%}
  .hero-native-video{object-fit:cover;object-position:center center}
  .hero-youtube-mount iframe{width:177.78%!important;height:100%!important;min-width:0!important;min-height:0!important;transform:translate(-50%,-50%) scale(1.03)!important}
  .hero.hero-has-video .hero-inner.hero-overlay{width:calc(100% - 32px);height:100%;min-height:0;padding:calc(var(--bp7-header-h) + 8px) 0 14px}
  .hero.hero-has-video .hero-meta{display:block!important}
  .hero.hero-has-video .hero-meta span:last-child{display:none}
  .hero.hero-has-video .hero-meta .kicker{font-size:8px;letter-spacing:.14em}
  .hero.hero-has-video .hero-sub{display:block!important}
  .hero.hero-has-video .hero-sub p{font-size:11px;line-height:1.35;max-width:29em;padding-right:8px}
  .hero.hero-has-video .hero-conversation-link{margin-top:10px;min-width:0;width:100%;font-size:9px;padding-bottom:6px;gap:10px}
  .hero-video-track.is-loading:after,.hero-video-track.is-loading:before{bottom:8px}
  .word-tunnel{height:88px}
  .word-tunnel .word{font-size:70px}
  .thesis{padding-top:72px}
  .section{padding-top:76px;padding-bottom:76px}
  .section-head{margin-bottom:42px}
  .case{padding-bottom:50px}
  .case-head{margin-bottom:20px}
  .change-row{padding-top:24px;padding-bottom:30px}
  .experience-card{min-height:390px}
  .manifesto{padding-top:76px;padding-bottom:82px}
  .method{padding-top:76px;padding-bottom:76px}
  .final{padding-top:78px}
}

@media(max-width:420px){
  .word-tunnel{height:80px}.word-tunnel .word{font-size:62px}
  .experience-card{min-height:360px}
}


/* Conversation form: keep focus elegant and accessible without browser-style boxes. */
.conversation-modal .form-field:focus-within label,.whatsapp-gate-modal .form-field:focus-within label{color:var(--blue)}
.conversation-modal .form-field input:focus-visible,.conversation-modal .form-field textarea:focus-visible,.whatsapp-gate-modal .form-field input:focus-visible{outline:none!important;outline-offset:0!important;box-shadow:0 1px 0 var(--blue);border-bottom-color:var(--blue)!important}
.conversation-modal .form-field input,.conversation-modal .form-field textarea,.whatsapp-gate-modal .form-field input{caret-color:var(--blue)}
.conversation-modal input:-webkit-autofill,.conversation-modal textarea:-webkit-autofill,.whatsapp-gate-modal input:-webkit-autofill{-webkit-text-fill-color:#111;transition:background-color 9999s ease-out 0s}
@media(prefers-reduced-motion:reduce){
  .hero.hero-has-video .hero-video-track{display:block!important}
  .header,.header .brand img,.hero-native-video,.hero-video-poster,.hero-youtube-mount,.work .case,.work .case-media img,.experience-card,.menu-links a{transition:none!important}
  .bp7-page-progress{display:none}
  .hero-video-track.is-loading:before,.hero-video-track.is-loading:after{display:none!important}
}

/* V2.0.4: poster is the loading state; no secondary loader inside the hero. */
.hero-video-track.is-loading:before,.hero-video-track.is-loading:after{display:none!important}